3.การเขียนโปรแกรม actionScript ด้วยโปรแกรม flash

3.การเขียนโปรแกรม ActionScript ด้วยโปรแกรม Flash

                สำหรับการเขียนโปรแกรมมีหลายๆโปรแกรมที่สามารถนำมาเขียนตามผังงานที่กำหนดได้ มีโปรแกรมที่นิยมใช้เขียนโปรแกรมหนึ่งคือ Adobe Flash ซึ่งสามารถเขียนได้หลายลักษณะ  เช่น  การคำนวนต่างๆ  การรับค่าจากแป้นพิมพ์  การรับค่าจากเมาส์  การเขียนโปรแกรมในลักษะ Animation เป็นต้น
        ตัวอย่างโปรแกรม


พอเราคลิกแล้วก็จะเจอ 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 เราก็เสร็จสมบูรณ์แล้ว 

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