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

Post นี้เราจะกลับมาทวนเรื่องราวการเขียนโปรแกรมด้วย ActionScript 3.0 กัน และอธิบายเกี่ยวกับ Flash Builder เพิ่มเติม สำหรับกับผู้เริ่มต้นต้องหมั่นทบทวนและลองเขียนดูบ่อยๆ หน่อยนะครับ

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

อย่างเช่นผมบอกว่าเขียน

trace("1");
trace("2");
trace("3");


หมายความว่าในไฟล์ HelloWorld.as นั้นจริงๆ แล้วมีหน้าตาดังด้านล่างนี้นะครับ

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

ขอให้เรา Focus Code ของเราอยู่ในพื้นที่ดังกล่าวก่อนนะครับ

package
{
    import flash.display.Sprite;
   
    public class HelloWorld extends Sprite
    {
        public function HelloWorld()
        {
            ให้เขียน Code อยู่ในพื้นที่ส่วนนี้ไปก่อน ส่วนอื่นยังไม่ต้องสนใจครับ
        }
    }
}

เรื่องที่สอง ทำความเข้าใจว่าโปรแกรมมันจะรันไปทีละบรรทัดจากบนลงล่าง เช่น ถ้าเราเขียนแบบนี้

trace("1");
trace("2");
trace("3");

มันก็จะ Output (ทาง Console) ออกมาเป็น

1
2
3

ถ้าเราสลับบรรทัดของ Code เป็น

trace("3");
trace("2");
trace("1");

Output ที่ได้ก็จะเป็น

3
2
1

เห็นมั้ยครับ ไม่ยากเลย โปรแกรมมันรันทีละบรรทัดจากบนลงล่าง เอาเป็นว่าเข้าใจอย่างนี้ก่อนในเบื้องต้นนะครับ

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

trac("hi");

trace"hi");

trace("hi")

trcae("hi");

trace("hi";)

tr ace("hi");

เหล่านี้เป็นต้นครับ ถ้าคุณพิมพ์ผิดแม้แต่เพียงเล็กน้อยโปรแกรมคุณอาจจะเกิด Error ได้ทันทีครับ

พูดถึงเรื่อง Error นิดนึง Error นั้นแบ่งได้ง่ายๆ ออกเป็น 2 ประเภทตามช่วงเวลาที่โปรแกรมพบ Error ดังนี้

1. Compile Time Error (หรือเรียกสั้นๆ ว่า Compile Error)
2. Runtime Error

Compile Time Error คือ Error ที่ Compiler ตรวจพบในระหว่างการ Compile โปรแกรมครับ ขั้นตอนการ Compile พูดง่ายๆ คือขั้นตอนที่ Compiler ของ Flash Builder ทำการแปลง Code ของเรา (ไฟล์ .as) ให้กลายเป็นไฟล์โปรแกรมที่ใช้งานได้ครับ (สำหรับ Flash ก็คือไฟล์ .swf นั่นเองครับ) Error ชนิดนี้เกิดขึ้นตอนกำลัง Compile เพราะฉะนั้นถึงได้ชื่อว่า Compile Time Error ครับ ถ้าหากโปรแกรมของเราเกิด Compile Time Error หมายความว่า Compiler ไม่สามารถสร้างไฟล์ .swf ได้สำเร็จครับ

Runtime Error คือ Error ที่เกิดขึ้นตอนโปรแกรมของเรา (ไฟล์ .swf) กำลังทำงานอยู่ครับ Error ชนิดนี้ คุณอาจจะได้พบได้เจอเวลาใช้งานโปรแกรมต่างๆ กันบ้างแล้ว ที่เวลาใช้งานอยู่โปรแกรมก็ปิดตัวเองไป หรือค้างไปซะเฉยๆ หรือที่เราเรียกว่าโปรแกรม Crash พวกนี้ก็คือ Runtime Error ครับ เป็น Error ที่เกิดตอน Runtime นั่นเอง โดยที่ Runtime Error นี้จะแก้ยากกว่า Compile Time Error ครับ

ปกติ แล้วถ้าเราพิมพ์ Code ผิด Syntax สิ่งที่เราจะเจอส่วนใหญ่ก็จะเป็น Compile Time Error ครับ แต่การพิมพ์ผิดบางทีบางครั้งก็อาจจะทำให้เกิดเป็น Runtime Error ได้เช่นกันครับ

ลองกลับมาดู Code บรรทัดนี้ดูครับ

trace   (   "3" )  ;

เขียนแบบนี้แล้วคิดว่าสามารถ Compile ได้หรือเปล่าครับ ลองเขียนและลอง Debug ดูนะครับ

ผลปรากฎว่า ตามรูปด้านล่างเลยครับ

โปรแกรมเรา Compile ผ่านและรันได้นะครับ Output ที่ Console ด้านล่างก็ออกเป็น

3

ถูก ต้องนะครับ คุณอาจจะสงสัยว่าอ้าวพิมพ์แบบนี้ได้ด้วยหรอ ผมก็ขอบอกว่า ได้ครับ ไม่ผิด Syntax ครับ แต่มันก็ไม่ควรเขียนแบบนี้นะครับ เพราะจะทำให้อ่าน Code เข้าใจยากครับ

ทีนี้เราลองกลับมาดูอันที่ผิด Syntax กันครับ เช่น

 trac("hi");

พอเรากด Debug ปุ๊ปก็จะเจอแบบนี้ครับ

จะเจอหน้าต่าง Error in Workspace เด้งขึ้นมาฟ้องว่ามี Error อยู่ในโปรเจค HelloWorld ของเราครับ โดยมันจะถามว่าจะให้รันโปรแกรมตัวเก่ามั้ย (Proceed) หรือว่าจะยกเลิก (Cancel) ตรงนี้ต้องทำความเข้าใจหน่อยนึงครับ เวลาเจอหน้าต่างแบบนี้แปลว่าเกิด Compile Time Error ขึ้นแล้ว เมื่อกี๊นี้เรารู้แล้วใช่มั้ยครับว่าเมื่อเกิด Compile Error แปลว่ามันไม่สามารถ Generate ไฟล์ .swf ออกมาได้ เพราะฉะนั้นหากเรากด Proceed ไปมันก็จะเอาไฟล์ .swf ตัวเก่าจากการ Compile สำเร็จครั้งล่าสุดมารันให้ครับ ไม่ใช่การรันโปรแกรมที่มี Syntax ผิดนะครับ

โอ เค ปกติเวลาเราเจอหน้าต่างนี้เราก็จะกด Cancel ไปครับ แล้วก็หาจุดผิดพลาดที่เป็นสาเหตุของ Compile Error อันนี้และจัดการแก้ไขซะให้เรียบร้อย วิธีการมีดังนี้ครับ


ให้ เราคลิกที่ Tab "Problems" ที่มันอยู่ทางซ้ายมือสุดใน Level เดียวกันกับ Tab "Console" ครับ จะเห็นว่ามันมีฟ้องว่าโปรแกรมเรามีอยู่ 1 Error ให้คลิกลูกศรเพื่อ Expand ออกมาดูรายละเอียด Error ดังภาพครับ

แต่ละ Compile Error มันก็จะมีรายละเอียดบอกครับ ส่วนที่สำคัญๆ ได้แก่

• Description - อธิบายเกี่ยวกับ Error นั้นๆ
• Resource - บอกไฟล์ .as ที่เกิด Error นี้ขึ้น
• Path - บอกตำแหน่งที่อยู่ของไฟล์ที่แจ้งไว้ใน Resource
• Location - บอกบรรทัดที่เกิด Error

นอกจากนั้น Flash Builder ยังอำนวยความสะดวกให้แก่เรา โดยที่เราสามารถ Double Click ลงไปที่รายละเอียด Error แล้ว Flash Builder มันจะกระโดดไป Highlights บรรทัดที่เกิด Error ให้ได้ทันทีครับ จากรูปด้านล่างผมทำการ Double Click ลงไปที่รายละเอียด Error รหัส 1180 อันแรกแล้วมันก็ Highlights ให้ผมที่บรรทัดที่เกิด Error ทันทีครับ

หลายๆ ท่านอาจจะบอกว่า เอ๊ะ จริงๆ แล้วสังเกตุดูดีๆ หน้าบรรทัดที่มันเกิด Error เนี่ย มันมีเครื่องหมาย x อยู่ในวงกลมสีแดงบอกอยู่แล้วนี่นา ไม่ต้องไปดูที่ Tab "Problems" ก็ได้ อันนี้ถูกต้องครับถ้าโปรแกรมเรามีขนาดเล็กและมีไฟล์ .as แค่ไฟล์ หรือไม่กี่ไฟล์ แต่คุณลองคิดดูว่าถ้าเกิดโปรแกรมเราใหญ่มากมีไฟล์ .as อยู่หลายสิบไฟล์ แต่ละไฟล์มีมากกว่า 300 บรรทัด คุณจะมานั่งไล่เปิดไฟล์ดูทุกไฟล์ หรือ Scroll หา Error จากเครื่องหมายนี้หรอครับ

Error ที่แสดงอยู่ใน Tab "Problems" นั้นจะแสดง Errors ทั้งหมดในโปรแกรมเราครับ ไม่ใช่เฉพาะไฟล์ .as ที่เปิดอยู่เท่านั้น เพราะฉะนั้นการไล่แก้ Error โดย Double Click จากทาง Tab "Problems" จะช่วยเราประหยัดเวลาได้เยอะมากเลยทีเดียวครับ

Flash Builder ยังช่วยอำนวยความสะดวกให้เราอีกประการหนึ่งนั่นก็คือ Flash Builder สามารถ Auto-Compile แถมยังสามารถ Detect และแจ้ง Compile Error ได้ทันทีทุกครั้งที่เรา Save ไฟล์ .as ครับ โดยที่ Option นี้เราสามารถ Enable หรือ Disable ก็ได้ครับ ณ ตอนนี้ก็ปล่อยให้มัน Enable ไปก่อนละกันนะครับ

ยังอยู่ที่เรื่อง Error อีกเล็กน้อยครับ หากไฟล์ .as ใดๆ ก็ตามของเรามี Error อยู่ นอกจากแจ้งที่ Tab "Problems" แล้ว Flash Builder ยังแจ้งอีก 3 ที่ครับ ในขณะที่ไฟล์ .as นั้นๆ เปิดอยู่เท่านั้นนะครับ ตามรูปด้านล่างเลยครับ

หมายเลข 1 เราพูดถึงไปแล้ว หมายเลข 2 ถ้ามีไฟแดงขึ้นตรงนี้แสดงว่าไฟล์นี้มี Error อยู่ครับ ส่วนหมายเลข 3 บอกตำแหน่งที่เกิด Error ขึ้นในไฟล์นี้โดยเทียบตำแหน่งกับ ScrollBar ครับ ปกติแล้วถ้าไฟล์ .as เรายาวขนาด 100 - 300 บรรทัดขึ้นไป เราก็จะกวาดสายตามองที่ตำแหน่ง 3 ก่อนครับ พอ Scroll ไปใกล้ๆ แล้วค่อยมามองที่ตำแหน่ง 1 เพื่อหาบรรทัดที่เกิด Error นั้นๆ ครับ

สรุปเรื่องที่สามนะครับ แค่อยากจะบอกว่าสำหรับมือใหม่ผู้เริ่มต้น อยากให้พิมพ์ให้เป๊ะกับในตัวอย่างก่อนนะครับ ไม่ว่าจะเป็นการเว้นวรรค การขึ้นบรรทัดใหม่ ไม่งั้นอาจจะเจอปัญหาหรือ Compile Error ต่างๆ ได้ครับ แต่ถ้าคิดว่าเชียวชาญประมาณนึงแล้วอันนี้ไม่เป็นไรครับ

Post นี้ว่าจะสั้นๆ ดันร่ายซะยาวเลยครับ งั้นขอจบที่ตรงนี้ก่อนนะครับ