เริ่มต้นเขียนโปรแกรมด้วย Flash Builder และ ActionScript 3.0

โปรแกรมสำหรับทำ Flash Project ที่ Adobe ผลิตออกมา ณ ปัจจุบันจะมี 2 โปรแกรมครับ คือ Adobe Flash Professional และ Adobe Flash Builder โดยที่เวอร์ชั่นล่าสุด ณ ตอนที่เขียนโพสนี้คือ

• Adobe Flash Professional CS6
• Adobe Flash Builder 4.6

ปกติแล้ว Graphics Designer เค้าก็จะทำงานใน Photoshop และ/หรือ Illustrator เสร็จแล้วค่อย Import งานเข้ามาในโปรแกรม Flash Professional หรือบางทีก็อาจจะสร้าง Content ด้วย Tools ต่างๆ ภายใน Flash Professional เองเลยก็ได้ครับ

กลับมาที่เรื่องของ ActionScript ซึ่งเป็นภาษาที่ใช้ใน Flash โดยที่จริงๆ แล้วเราก็สามารถใช้โปรแกรม Flash Professional เขียนได้เหมือนกันไม่ว่าจะเขียนใน Frame เลยตรงๆ หรือว่าจะสร้างไฟล์ .as แยกออกมา แต่มันจะเขียนได้ง่ายขึ้นมากหลายเท่า ถ้าเกิดคุณใช้โปรแกรมอีกตัวนึงที่เค้าสร้างขึ้นมาเพื่อไว้เขียน Code โดยเฉพาะ นั่นก็คือ Flash Builder ครับ ที่ผมใช้คำว่า Code เพราะว่าเจ้า Flash Builder มันไม่ได้ใช้เขียนได้แค่ ActionScript แต่มันยังมีเขียน MXML (Flex) ได้ด้วยนั่นเองครับ

ในเบื้องต้นนี้ผมจะขอเน้นไปที่ ActionScript อย่างเดียวเลยนะครับ และก็จะเป็นเนื้อหาเชิง Programming แบบจัดเต็มครับ เป้าหมายของผมคือคนที่ไม่เคยเขียนโปรแกรมมาก่อนเลยก็สามารถมาหัดเขียน ActionScript ได้ที่นี่เลยครับ หรือคนที่เคยเขียนภาษาอื่นมาแล้วจะมาดู Syntax หรือ Concept ของ ActionScript เพื่อลองสร้าง Flash Project ก็ได้เช่นกันครับ

เอาล่ะมาเริ่มกันเลยดีกว่า

ตามหัวข้อของ Post นี้เลยนะครับ "เริ่มต้นเขียนโปรแกรมด้วย ActionScript 3.0" เพราะฉะนั้นเราก็จะมาหัดเขียนโปรแกรมกันครับ ซึ่งตามหลักสากลโลกแล้วเวลาเราจะหัดเขียนโปรแกรม หรือหัดเขียนภาษาใหม่ๆ โปรแกรมแรกที่เราจะเขียนคือ HelloWorld ครับ เค้าคงถือเป็นโปรแกรมไหว้ครูกันมั้งครับ ผมก็ขอเอาอย่างบ้างละกัน

ส่วนโปรแกรมที่เราจะใช้ แน่นอนครับ Flash Builder เลยครับ ไม่ต้องเปิด Flash Professional นะครับ เราจะจริงจังด้านเขียนโปรแกรมกันแล้ว มาใช้ตัวนี้กันเลยดีกว่า หลังจากเปิดโปรแกรม Flash Builder ขึ้นมาแล้วก็ให้เราทำการสร้าง ActionScript Project กันเลยครับ โดยการคลิกซ้ายที่พื้นที่ด้านซ้ายมือในหน้าต่าง Package Explorer แล้วเลือก New > ActionScript Project ตามรูปด้านล่างครับ

พอเราคลิกแล้วก็จะเจอ Dialog หน้าตาเหมือนรูปด้านล่าง ก็ให้ใส่ชื่อ Project Name เป็น HelloWorld ครับ เสร็จแล้วก็กดปุ่ม Finish ได้เลย เจ้า Flash Builder มันก็จะสร้าง ActionScript Project HelloWorld ให้เราแล้วครับ

หลังจาก Flash Builder สร้าง Project ให้เราเรียบร้อยแล้วก็จะได้หน้าตาเป็นดังรูปด้านล่างครับ

รูปภาพผม Capture มาไม่เต็มจอครับ ในรูปจะไม่เห็นหน้าต่าง Outline ที่อยู่ด้านล่างซ้าย ซึ่งเรายังไม่สนใจมัน ณ ตอนนี้ครับ สิ่งที่เราสนใจตอนนี้คือหน้าต่าง Package Explorer เราจะเห็นว่าตอนนี้ Flash Builder มันสร้าง Project HelloWorld ให้ โดยใน Project มีโฟลเดอร์ src ในโฟลเดอร์ src ก็มี (default package) และใน (default package) ก็มีไฟล์ HelloWorld.as ซึ่งหน้าต่างใหญ่ๆ ด้านขวานั้นก็ได้เปิดไฟล์ HelloWorld.as ไฟล์นี้อยู่นั่นเองครับ

จากนั้นให้เราลองคลิกปุ่ม Debug ที่มันเป็นรูปแมลงสีเขียวๆ เวลาเอา Mouse ไปชี้แล้วมันขึ้น Tooltip "Debug HelloWorld" นั่นแหละครับ เพื่อเป็นการเทส Project HelloWorld ของเรา ตามรูปด้านล่างครับ

พอเรากดปุ่ม Debug แล้ว Flash Builder มันจะ Compile และ Build โปรแกรม HelloWorld ของเรา โดยมันจะ Generate ไฟล์ HelloWorld.swf, HelloWorld.html และไฟล์จำเป็นอื่นๆ มาให้เราซึ่งจะอยู่ในโฟลเดอร์ bin-debug ครับ หลังจากที่มัน Generate เสร็จทุกอย่างแล้วก็จะทำการเรียก Browser ซึ่งเราตั้งไว้เป็น Default ขึ้นมาเปิดไฟล์ HelloWorld.html ดังรูปด้านล่างครับ

เห็นหน้าขาวๆ แบบนี้ไม่ต้องตกใจนะครับ เพราะเรายังไม่ได้เขียน Code อะไรลงไปมันก็เลยเป็นแบบนี้ ในรูปนั้นผมใช้ Firefox เป็น Browser ครับ ให้เราปิดหน้าต่างขาวๆ อันนี้จาก Browser ได้เลยครับ แล้วกลับมาดูที่ Flash Builder มองด้านล่างของจอใต้หน้าต่างไฟล์ HelloWorld.as เราจะเห็นมีหน้าต่างที่มี Tab อยู่หลายอย่างให้เราคลิกที่ Tab Console ดังรูปด้านล่างครับ

หน้าต่าง Console อันนี้สำคัญมากครับ เดี๋ยวเราจะเขียน Code ให้มันพิมพ์ข้อมูลออกมาที่หน้าต่างนี้กันดูนะครับ โดยให้เราเพิ่ม Code เข้าไปที่ไฟล์ HelloWorld.as ที่บรรทัดที่ 9 ตามนี้ครับ

trace("HelloWorld!!");

พอใส่ Code เข้าไปแล้วจะได้หน้าตาไฟล์ทั้งหมดตามด้านล่างนี้ครับ

package
{
    import flash.display.Sprite;
   
    public class HelloWorld extends Sprite
    {
        public function HelloWorld()
        {
            trace("HelloWorld!!");
        }
    }
}

หรือดูตามรูปนี้ครับ

หลัง จากนั้นให้เราลอง Debug อีกทีครับ (คุณอาจจะเจอหน้าต่างที่ชื่อ Save and launch เด้งขึ้นมาเมื่อกดปุ่ม Debug ไม่ต้องตกใจครับให้กด OK ไปได้เลย มันฟ้องว่าเรายังไม่ได้ Save ไฟล์ครับ) แน่นอนหน้าต่าง Browser ที่มันเปิดขึ้นมาจะยังขาวอยู่ครับ แต่ให้เรากลับมามองที่หน้าต่าง Console ใน Flash Builder ดูครับ

นั่นแน่ เห็นอะไรมั้ยครับ ในหน้าต่าง Console ตอนนี้มีคำว่า HelloWorld!! แสดงขึ้นมาแล้วครับ นี่คือผลจากการที่เราเขียน Code เพิ่มลงไปไงครับ ตอนนี้โปรแกรม HelloWorld เราก็เสร็จสมบูรณ์แล้ว ยินดีด้วยนะครับที่ทำโปรแกรมแรกได้สำเร็จลุล่วงไปได้ด้วยดี  ถึงจะยังมีอะไรไม่เข้าใจอยู่มากหลายก็ใจเย็นๆ ครับ ค่อยๆ อ่านไปทีละ Post นะครับ

หากใครพบว่าข้อมูลที่ขึ้นในหน้าต่าง Console ไม่เหมือนกับผมตรงที่ไม่มีบรรทัดด้านล่างนี้
[Unload SWF] C:\Users\King\Adobe Flash Builder 4.6\HelloWorld\bin-debug\HelloWorld.swf
ไม่เป็นไรนะครับ มันอาจจะขึ้นมาตอนคุณปิดหน้าต่างหรือ Tab ใน Browser ของคุณทิ้ง หรืออาจจะไม่ขึ้นก็ได้ ยังไม่ต้องสนใจมันครับ

สำหรับ Post นี้ก็ขอตัดจบเพียงเท่านี้ก่อนนะครับ