คาบที่ 13 การใช้งานจริงของสคริปอย่างง่ายๆ

เอาล่ะนะ คาบนี้จะเริ่มการทำงานสนุกๆกัน ผมได้สคริปของ AS3 มาชุดหนึ่ง ดังนั้น ลองมาดูสคริปทำงานของจริงกันดีกว่า

var pick:Sprite = new Sprite();
pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();

addChild(pick);

pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);

function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}

และเมื่อคุณกดให้มันแสดงผลงาน ผลที่ได้คือ
กดที่ลูกเขียวแล้วลองลากไปมาดูครับ

กด

เอาล่ะเราจะมาวิเคราะห์สคริปกันเลย

var pick:Sprite = new Sprite();

อันนี้เคยสอนไปแล้วนะ สร้างตัวแปรชื่อ pick มีชนิดตัวแปรเป็นภาพวาด(กราฟฟิค ซิมโบล) เมื่อเป็น มูฟวี่คลิ๊ป ปุ่ม หรือสไปร์ค ให้ new เมื่อสร้าง

บรรทัดต่อมาจะเป็นชุด คือ

pick.graphics.beginFill(0x009900);
pick.graphics.drawCircle(50,50,20);
pick.graphics.endFill();

ในการวาดภาพโดยใช้สคริปนั้น จะมีคำสั่งที่ใช้อยู่คือ
beginFill และ endFill(); ซึ่งคำสั่งทั้ง 2 นี้จะถูกจัดอยู่ในหัวข้อ graphics ดังนั้น ถ้าจะเรียกคำสั่งทั้งคู่ ก็ต้องอยู่ภายใต้คำสั่งของหมวด graphics และเพราะคำสั่งชุุดนี้คือการสร้างวงกลมใน symbol pick เมื่อมีคำว่า สร้างใน เราจึงต้องเติมหน้ามันด้วย pick. ตลอด

ในbeginFill เราสามารถกำหนดสีได้ด้วย แต่ต้องเป็นเลขฐาน 16 ซึ่งเราเปิดหาดูรหัสสีได้ในเน็ตทั่วไป พวก 00ffff aabbcc อะไรพวกนี้แหละ แถมยังกำหนดความเข้มจางได้ด้วย แต่เราไม่ลงลึก เพราะเรายังเลเวลน้อยอยู่ เอาเป็นว่า การสร้างภาพขึ้นมา เราจำต้องเปิดประเด็นการวาดภาพด้วยคำสั่ง beginFill และเมื่อวาดภาพเสร็จก็ให้จบด้วย endFill ส่วน คำสั่ง drawCircle นั้น คือการวาดวงกลม ทั้งนี้ยังมี drawRect สำหรับวาดสี่เหลื่ยม และวาดอื่นๆ อีก ในคำสั่งวาดวงกลม จะมีตัวเลขอยู่ 3 ชุดที่กำหนดค่าการสร้างวงกลม ตัวแรกคือตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว x ตัวที่ 2 คือ ตำแหน่งที่จะลงจุดศูนย์กลางของวงกลมในแนว y และตัวที่ 3 คือรัศมีของวงกลม

เราสร้างวงกลมเสร็จ แต่วงกลมอยู่ตรงไหนเราก็ไม่รู้ รู้แค่สร้าง ถ้าจะเรียกมันให้แสดงที่หน้าจอก็

addChild(pick); เหมือนการลากจาก ไลบราลี่ลงสเตจนั่นแหละคำสั่งนี้

ต่อจากนี้ เราจะมาเจอกับคำสั่งที่เราเคยเรียนกันไปบ้างแล้ว

pick.addEventListener(MouseEvent.MOUSE_DOWN, pick01);
pick.addEventListener(MouseEvent.MOUSE_UP, pick02);

function pick01 (MouseEvent):void{
startDrag();
}
function pick02 (MouseEvent):void{
stopDrag();
}

ในที่นี้ มีการสร้างคำสั่งขึ้น นั่นคือ function ชื่อ (){} จะเห็นได้ว่ามีการสร้างคำสั่ง 2 คำสั่งคือ pick01 และ pick02 คำสั่งนั้น ในช่องวงเล็บ เพราะเหตุการณ์มันเกี่ยวกับเม้าส์ พูดง่ายๆ ยกอีเว้นท์ลงมาใส่นั่นแหละ แต่ไม่ต้องลึกถึงเหตุการณ์ย่อย ส่วน void ไม่ต้องจำ ใส่ตามไปเลยครับ ไม่ต้องเข้าใจด้วย

โอ้ addEventListener(); จะต้องพูดถึงไหมเนี่ย อืม สักนิดนะ เหตุการณ์ที่เกิดขึ้นกับตัวแฟลช ให้เราลองจินตนาการนิดนึงว่าเราเป็นโปรแกรมแฟลชเวลาคนเขียนคำสั่ง เราต้องรู้อะไรบ้าง คิดตามนะ ช้าๆ เมื่อมีคนมากดเม้าส์ลงบนวงกลมเขียวที่สร้างไว้ คำสั่ง pick01 จงทำงาน นั่นคือคำสั่งบรรทัดแรกในช่วงนี้
กดเม้าส์ลงบนลูกกลมเขียว ดังนั้น ลูกกลมเขียวคือตัวแปรที่ถูกกระทำ จึงต้องเอาเขาไปไว้หน้า addEventListener เลย เหตุการณ์ก็อย่างที่บอก กดเม้าส์ กดเม้าส์ ไม่ใช่ CLICK เพราะ CLICK คือกดแล้วปล่อย มันมีอีกเยอะ MOUSE_OVER = เม้าส์อยู่บนลูกกลมเขียว ไม่ใช่นะ เราต้องกดก่อนสิถึงจะทำงาน ในที่นี้จึงใส่ MOUSE_DOWN แทนเหตุการณ์ย่อย ที่เหลือก็ตามที่สอนในบทที่แล้วชื่อคำสั่งที่ต้องการเรียกให้ทำงานนั่นเอง

MOUSE_UP ก็ตรงกันข้ามครับ ที่เพิ่มเข้ามานอกเหนือจากที่เคยสอนก็คือ

startDrag();
stopDrag();

ที่ทำหน้าที่ตามชื่อของมัน เริ่มขยับตามเม้าส์ และหยุดขยับตามเม้าส์

ถาม ถ้าคุณใช้คำสั่งกับลูกกลมเขียวเลย จะเกิดอะไรขึ้น
pick.startDrag();
ตอบ เมื่อคุณ C+E เม้าส์ขยับไปทางไหน pick ก็จะไปทางนั้น แต่ไปพร้อมกันเลยนะ ไม่ใช่ว่าอยู่ตรงตำแหน่งเม้าส์ เช่นเม้าส์คุณอยู่ห่างจากลูกกลมเขียว 13 ซม เมื่อคุณขยับเม้าส์ เจ้าลูกกลมเขียวก็จะรักษาระยะห่าง 13 ซม ไว้ตลอดครับ

สรุปครับ

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