คาบที่ 17 หิมะตกซะแล้วสิ (2)

ครั้งที่แล้วยังไม่จบ มาต่อกันดีกว่า

1. การสร้างลูกกลมสีขาว ก่อนอื่น คุณเปิดโปรแกรมแฟลชขึ้นมา ให้เป็น as 3.0 มาที่ช่องใส่สคริป และกำหนดสคริปตามข้าพเจ้า ดังนี้

stop(); //เอาไว้หยุดเฟรมไว้ที่เฟรมที่ 1

var pick:MovieClip = new MovieClip(); //สร้างตัวแปรชื่อ pick ที่มีชนิดตัวแปรเป็นมูฟวี่คลิ๊ป ซึ่งเป็นการสร้างมูฟวี่คลิ๊ปขึ้นมาใหม่

pick.graphics.beginFill(0xff66ff); //pickนั้นใช้คำสั่งในหมวดกราฟฟิคซึ่งเป็นหมวดเฉพาะ เริ่มสร้างรูปร่าง กำหนดสีเป็นสี ชมพู
pick.graphics.drawCircle(50,50,10); //วาดวงกลม ตำแหน่ง x อยู่ที่ 50 pixel และ y = 50 pixel มีรัศมีออกจากจุดทั้ง 2 =10 pixel
pick.graphics.endFill(); //วาดเสร็จแล้ว

addChild(pick); //วางลงบนหน้าจอ

เอาล่ะครับ สำหรับคำสั่งที่เห็นนี้จะเป็นการวาดวงกลมสำหรับหิมะ ในคำสั่ง pick.graphics.beginfill ผมกำหนดสีให้เป็นชมพู เพราะพื้นมันขาวอยู่ ถ้าอยากเปลี่ยนสีอื่นก็ตามใจครับ รหัสสีดูได้จากเว็บสี หรืออาจจะเปิกโฟโต้ชอปดูก็ได้ โดยสีนั้น จะเป็นตัวเลขไม่ก็ตัวอักษร 6 ตัว ตามตำแหน่งดังภาพ

รหัสสีจากโปรแกรมแฟลช

รหัสสีจากโฟโต้ชอป

พอได้ทั้ง 6 ตัวแล้ว ในการกำหนดสี ให้เติม 0x ไว้ข้างหน้า เพื่อบอกเครื่องว่า นี่คือรหัสสีครับ

หลังจากนั้นก็สั่งให้สคริป วาดวงกลม และจบการวาด รวมถึง วางภาพที่วาดแล้วลงกระดานหรือ stage ครับ

ถ้าทำอย่างนี้แล้ว เราจะได้อะไรที่มีลักษณะหน้าตาแบบนี้

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

การเคลื่อนไหวของหิมะนั้น ไม่มีกฏเกณฑ์ แต่มันมีรูปแบบอยู่นั่นคือ ร่วงจากบนลงล่าง และขยับซ้ายขวาตามแรงลมและอากาศที่ต้าน พูดง่ายๆ หิมะมันไม่ได้ร่วงลงมาเป็นเส้นตรงซะทีเดียว ดังนั้น ก่อนอื่นเรามาทำความเข้าใจการร่วงของภาพในมูฟวี่คลิ๊ปกันก่อน

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

ปรกติ เมื่อจุด origin หรือจุดที่ x และ y มีค่าเท่ากับ 0 อยู่มุมบนซ้าย ในการกำหนดตำแหน่งในควอตร์ซแร้นทซ์นี้ หรือควอเตอร์นี้ ค่า x จะเป็น + และค่า y จะเป็น - แต่โปรแกรมแฟลชนั้น แม้จุด origin ของโปรแกรมจะอยู่บนซ้ายเช่นกัน แต่ค่า y จะถูกกำหนดให้เป็นบวก ซึ่งต่างจากการคำนวนคณิตศาสตร์ปรกติ

ดังนั้น ในโปรแกรมแฟลช ถ้าเคลื่อนที่ไปในแกน x จากซ้ายไปขวา ค่า x จะเพิ่มขึ้น
ถ้าเคลื่อนที่ในแกน y จากบนลงล่าง ค่า y จะเพิ่มขึ้น
ถ้าไปตรงกันข้าม เครื่องหมายก็ตรงกันข้าม

ดังนั้น ถ้าต้องการให้ลูกกลม ร่วงจากบนลงล่าง ก็ต้องกำหนดให้ตำแหน่ง y ของลูกกลม มีค่าเพิ่มขึ้นเรื่อยๆ

การกำหนดให้หิมะร่วงจึงกลายเป็น

pick.y += 2; //หมายถึง ตำแหน่งของตัวแปร pick ในทิศทาง y ไม่ว่าจะมีค่าเท่าไร ก็จะเพิ่มขึ้น +2

เพื่อความเข้าใจได้ง่ายๆ ก็จะขอสรุปความรู้ดังนี้

ถ้าวัตถุ มีค่า x เพิ่มขึ้น จะเคลื่อนที่จากซ้ายไปขวา
ถ้าวัตถุเคลื่อนที่ในแนว x มีค่า x ลดลง จะเคลื่อนที่จากขวาไปซ้าย
ถ้าวัตถุเคลื่อนที่ในแนว y มีค่า y เพิ่มขึ้น จะเคลื่อนที่จากบนลงล่าง
ถ้าวัตถุเคลื่อนที่ในแนว y มีค่า y ลดลง จะเคลื่อนที่จากล่างขึ้นบน

แล้วมาต่อกันคราวหน้านะครับ

คาบที่ 16 หิมะตกซะแล้วสิ

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

STAGE 1 !!!!!!!!!! SNOW FALL !!!!!!!!!!!!

เป้าหมาย: ทำหิมะตก ด้านหน้า ส่วนพื้นหลัง จะไม่กำหนด ให้แต่ละคนหาภาพมาใส่เอง
แยกจุดประสงค์เป็นจุดประสงค์ย่อย:
1 หิมะตก
2 ตกด้านหน้าของภาพ

แยกจุดประสงค์ย่อยเป็นตัวแปรและการกระทำของตัวแปร
1 หิมะตก : 1.1 ใช้ลกกลมสีขาวเป็นตัวแทนหิมะ (หรือใครอาจจะใช้ภาพเกร็ดหิมะจากพี่กูเกิ้ลก็ได้)
การกระทำของหิมะ
1.1.1 ร่วงลงมาจากข้างบนจอถึงข้างล่างจอ
1.1.2 ไม่ได้ร่วงเป็นเส้นตรง แต่อาจปลิวไปมาตามแรงลมได้
1.1.3 เมื่อมาถึงพื้นก็หยุด
ได้ตัวแปรตาม :
1.2 พื้น
1.3 ลม
การกระทำของพื้น
1.2.1 อยู่เฉยๆ ด้านล่าง เมื่อหิมะลงมาโดนก็หยุด
การกระทำของลม
1.3.1 มองไม่เห็น แต่ส่งผลให้หิมะเคลื่อนที่ไม่ใช่เส้นตรงซะทีเดียว

2 ตกด้านหน้าภาพ : นำมาไว้ที่เลเยอร์หรือมูฟวี่คลิ้ปที่หิมะตกไว้หน้าสุด

โอเค ดังนั้นเราได้สิ่งที่เราต้องทำทั้งหมดแล้ว แต่อาจเพิ่มได้ทีหลังถ้าเรามองข้ามอะไรไป เอาล่ะ มาสรุปสิ่งที่ต้องลงมือทำเลยดีกว่า

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

ลูกกลมขาว เรามองเห็น เป็นวัตถุ
พื้น อาจใช้ด้านล่างจอแทนพื้นก็ได้ ดังนั้น ไม่ต้องทำ
ลม มองไม่เห็น แต่ทำให้การเคลื่อนที่ของวัตถุเปลี่ยนไปมา ดังนั้น ก็คือตัวแปร

ทำเสร็จไปแล้ว 50 % ครับผม ง่ายมะ
เราได้สิ่งที่จะทำแล้ว บทหน้า ผมจะเริ่มการทำงานตามแผนงานที่เราวางไว้นะครับ

คาบที่15 สรุปความเข้าใจ

เอาล่ะ ไม่คิดเหมือนกันว่าจะมาถึงคาบที่ 15 ได้ เอาเถอะ งั้นมาสรุปใจความกันหน่อยดีกว่า กันลืม

ก่อนอื่นถามนิด ยังมั่นใจที่อยากจะเรียนแฟลชกันอยู่ไหม ถ้าไม่แล้วกรุณาปิดหน้านี้ไปเลยครับ

........

........

...........

....

โอเค ถือว่ายังอยากรู้ต่อนะ

เรามาเริ่มกันที่ความรู้ความเข้าใจที่ผ่านมากันเลยดีกว่า

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

การเขียนสคริปแฟลช (แอคชั่นสคริป)

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

คำสั่งที่ใช้ในแอคชั่นสคริป 3.0 ที่ใช้มาก และควรศึกษาเพิ่มเติม

stop();
var;
function();
addEventListener();
gotoAndStop();
if();

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

จากนี้ จะเป็นภาคประยุกต์แล้ว หวังว่าท่านที่อยากทำความเข้าใจ ก็ต้องไปหาอ่านเพิ่มเติมด้วยนะครับ เจอกันครั้งหน้าครับ

คาบที่ 14 ตัวแปร และ ฟังก์ชั่น

วันก่อน ผมไปเจออะไรน่าสนใจที่เกี่ยวข้องกับการทำงานของฟังก์ชั่นและตัวแปร จากเว็บ TFD

นั่นคือ การสร้างตัวแปรภายในและภายนอกฟังก์ชั่น มันต่างกันอย่างไร

var pick:int = 20;

function pock(){
gotoAndStop(pick);
}
pock();

และ

function pock(){
var pick:int = 20;
gotoAndStop(pick);
}
pock();

สองชุดสคริปนี้ต่างกันอย่างไร

- ถ้าให้สคริปทั้งสองทำงาน ในกรณีนี้ การทำงานของทั้งคู่จะไม่มีความแตกต่าง นั่นคือ จะไปหยุดที่เฟรมที่ 20
แต่ความจริงแล้วมีความแตกต่างกันอย่างเห็นได้ชัด นั่นคือ

ถ้าลองใส่คำสั่ง

trace(pick);

ลงไปแล้วลองแสดง คุณจะเห็นความแตกต่าง นั่นคือ ค่าในสคริปแรก จะได้เท่ากับ 20 และสคริปที่ 2 จะได้เท่ากับ error

อ้าว error ได้ไง

ได้ครับ เพราะตัวแปรที่สร้างในฟังก์ชั่นหรือสร้างในคำสั่งนั้น จะไม่สามารถเรียกได้จากภายนอก แต่สามารถเรียกได้เฉพาะภายในคำสั่งนั้นเท่านั้น
เช่น

function pick(){
var p:int = 10;
trace(p);
}
pick();
trace(p);

ในที่นี้จะมีการ trace 2 ครั้ง ครั้งแรกในฟังก์ชั่น และครั้งที่ 2 นอกฟังก์ชั่น เมื่อทำการแสดงในโปรแกรม ค่าที่ออกมาที่ output จะ error จาก trace ภายนอก เพราะตัวแปร p สร้างขึ้นในฟังก์ชั่น การเรียกถามตัวแปรนอกฟังก์ชั่นไม่สามารถทำได้ เพราะถ้าการทำงานของฟังกชั่นจบลงแล้ว ตัวแปรนั้นก็จะถูกโปรแกรมเคลียร์ไป (เขาว่ากันแบบนั้นนะ) แต่ถ้าคุณลบ trace(p); ที่อยู่ข้างนอกฟังก์ชั่นออกไป โปรแกรมก็จะทำงานเป็นปรกติ


ของพวกนี้รู้ไปเพื่ออะไร

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

สรุป

จะสร้างตัวแปรต้องคิดถึงการใช้ด้วย ถ้ามีหลายจุดต้องอ้างอิงตัวแปรนี้ คุณต้องสร้างตัวแปรไว้นอกฟังก์ชั่น


คาบนี้แค่นี้ คาบหน้าเจอกันใหม่ครับ

คาบที่ 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 ซม ไว้ตลอดครับ

สรุปครับ

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

คาบที่ 12 การเรียกใช้คำสั่งโดยใช้เหตุการณ์

การเรียกใช้คำสั่งนั้น ก็อย่างที่บอกไปแล้ว คุณก็แค่ เรียกไปที่ชื่อคำสั่ง ตามด้วย ();

แต่ถ้าเราต้องการการทำงานที่โต้ตอบกับการกระทำของผู้ใช้ล่ะ

การโต้ตอบการกระทำของผู้ใช้ นั่นคือ เมื่อผู้ใช้ใช้งานทำกิจกรรมอะไรบางอย่าง ตัวงานที่เราทำก็จะตอบรับอย่างเป็นระบบ เช่น

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

เพียงแต่เราต้องเป็นคนกำหนดเหตุการณ์ และกำหนดผลที่ตามมา

ในงานที่คุณจะสร้างมันขึ้น ถ้าคุณกดปุ่มลง ตัวละครของคุณจะย่อเข่าลง ถ้ากดขึ้น ตัวละครก็จะกระโดด ไอ้ที่คุณกดปุ่มต่างๆเหล่านี้คือการเกิดเหตุการณ์(กิจกรรม)ทั้งสิ้น เราเรียกเหตุการณ์เหล่านี้ว่า Event

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

addEventListener();

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

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

ตัวแปรที่เราอยากรู้ เหตุการณ์ที่เราคาดว่าจะเกิด และคำสั่งที่จะให้เกิดขึ้นเมื่อเกิดเหตุการเหล่านั้น เช่น

stage.addEventListener(Event.ENTER_FRAME , pick);

ข้อความด้านบนคือ เมื่อ เสตจ หรือหน้าจอหลักของเรา เกิดเหตุการณ์ที่เรียกว่า แสดงเฟรม ให้เรียกการทำงานคำสั่งที่ชื่อว่า pick
ในวงเล็บของคำสั่ง addEventListener จะมี 2 ตัวแปรที่เราต้องใส่มันลงไปเพื่อกำหนดการทำงาน นั่นคือ

1 เหตุการณ์เฝ้าระวัง
2 คำสั่งที่ต้องการถ้าเหตุการณ์เฝ้าระวังนั้นดันเกิดขึ้นจริง

การพิมพ์ addEventListener นั้น บอกตามตรงว่า ยาวจนเมื่อยมือ แต่น่าเสียดายที่คำสั่งนี้เป็นคำสั่งที่ใช้งานมากที่สุด ดังนั้น เราจึงต้องจำวิธีการใช้งานให้ดีๆ

คำถาม ถ้าเราสร้างตัวแปรขึ้นมา แล้วเราอยากตรวจจับเหตุการณ์ของตัวแปรนั้น เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener();

คำถาม ตัวแปรเดิม ถ้าเราสร้าง function pick(){} อยู่ แล้วตรวจจับเหตุการณ์ของตัวแปรนั้น ถ้าเจอเหตุการณ์ที่ว่า ให้คำสั่ง pick ทำงาน เราจะทำอย่างไร
เฉลย - ตัวแปรนั้น.addEventListener(เหตุการณ์ที่ว่า , pick);

ต่อๆ รูปแบบเท่าที่อ่านมันไม่ได้มีความยากอะไรเลยล่ะ จะติดก็ตรง เหตุการณ์ที่ว่าที่เราจะใส่นั่นเอง แล้วเหตุการณ์มีอะไรบ้าง

เหตุการณ์ที่เกิดบ่อยๆมีดังนี้

Event - คือเหตุการณ์ที่เห็นโดยทั่วไปและแบ่งหมวดยาก แต่สำหรับเรา ไม่ค่อยได้ใช้หรอก ได้ใช้แค่ไม่กี่อันเอง
MouseEvent - เหตุการณ์ที่เกี่ยวข้องกับการใช้เมาส์ เช่น ถ้าเรากดเม้าส์ คำสั่งก็จะทำงาน
KeyboardEvent - เป็นเหตุการณ์เกี่ยวกับการกดแป้นพิมพ์ต่างๆ
TimerEvent - เป็นเหตุการณ์ที่เกี่ยวกับการตั้งเวลา

เอาล่ะ เราเข้าใจแล้วล่ะนะว่า แต่ละเหตุการณ์นั้น ก็จะแยกหมวดหมู่ชัดเจน เหล่าเหตุการณ์นี้ จะนำเอาไปใส่ลงในคำสั่ง addEventListener กันล่ะ

addEventListener(Event.ENTER_FRAME , pick);

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

ถ้าเกิดเหตุการณ์กับเม้าส์ คุณจะรู้ไหมว่า เกิดอะไรกับเม้าส์ เพราะมันเป็นได้หลายอย่าง เช่น การขยับเม้าส์ กดเม้าส์ เม้าส์อยู่บนข้อความนั้น มันเป็นได้หลายอย่าง คุณต้องกำหนดเหตุการณ์ย่อยลงไป

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

addEventListener(Event.ENTER_FRAME , pick); ทำงาน

เมื่อไม่กำหนดตัวแปร มันจะถือว่า เมนหลักของไทม์ไลน์ เป็นตัวที่กำลังทำการตรวจจับเหตุการณ์ ถ้าเกิดเหตุการณ์ แสดงในเฟรมเมื่อไหร่ ฟังก์ชั่น(คำสั่ง) pick จะถูกเรียกทำงาน 1 ครั้ง แต่โดยปรกติ flash จะทำงาน 12 เฟรม/ 1 วินาที ดังนั้น คำสั่ง pick จึงถูกเรียกใช้งาน 12 ครั้งต่อวินาที ซึ่งก็ถือว่ามากโขอยู่นะ ดังนั้น จะสั่งอะไรให้ทำงาน คิดด้วยละกัน

แล้วเราจะประยุกต์ใช้อย่างไร

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

สรุป
1. ถ้าเราต้องการให้คำสั่งของเราทำงานเลย ให้เราเลือกชื่อคำสั่งนั้น ตามด้วย (); เช่น pick(); นั่นคือคำสั่ง pick ถูกเรียกใช้งานแล้ว
2. ถ้าเราต้องการให้เกิดเหตุการณ์ก่อนถึงจะเรียกคำสั่ง pick ให้ทำงาน ให้เราใส่ไว้ในคำสั่ง addEventListener เพียงแต่ต้องกำหนดเหตุการณ์ที่จะเกิดด้วย เช่น addEventListener(เหตุการณ์.เหตุการณ์ย่อย, pick);

อาจเริ่มหนักสมองกันบ้างแล้วล่ะนะ แต่พอได้ทำจริงประกอบไปด้วยเดี๋ยวจะเข้าใจมากขึ้น เจอกันใหม่คาบหน้าครับ

คาบที่ 11 คำสั่ง-2

ในบทก่อนหน้านี้ เราเคยผ่านคำสั่งมาบ้างแล้ว ทวนอีกครั้ง ในโปรแกรมแฟลช คำสั่งนั้น จะมีเครื่องหมาย () ตามท้าย เพื่อให้แน่ใจว่า เราแยกคำสั่งออกจากตัวแปรได้ คำสั่งนั้น โปรแกรมแฟลชจะเรียกว่า funtion ซึ่ง เราสามารถเรียกคำสั่งที่มีสำเร็จรูปอยู่แล้วในโปรแกรม เช่น คำสั่งพวกควบคุมไทม์ไลน์ เช่น stop(); play(); หรือจะเป็น method ซึ่งเป็นคำสั่งภายในคลาส แต่ในคาบนี้ เราจะกล่าวถึงคำสั่งที่เราต้องสร้างมันขึ้นมาเอง

วิธีการสร้าง คำสั่ง นั้น ทำได้ดังนี้

function ชื่อสั่งตามใจชอบ () {}

ตัวอย่าง

function pick () {}

ใช้คำว่า function ขึ้นต้น เมื่อเราต้องการสร้างคำสั่ง คล้ายการสร้างตัวแปรที่ขึ้นต้นด้วย var แล้วที่เหลือก็เหมือนการสร้างตัวแปร ครับ แค่นี้ เราก็สร้างคำสั่งที่ชื่อว่า pick สำเร็จแล้ว ง่ายมะ แค่อย่าลืมว่า มันมี 2 วงเล็บ อันหนึ่งวงเล็บธรรมดา อีกอันหนึ่งเป็นปีกกา

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

ครับ ขอให้นึกถึงรูปแบบของการสร้างตัวแปรไว้

var pick:int = 100;
function pick (e:MouseEvent):void {}

เห็นความเหมือนที่แตกต่างไหมครับ

ในการสร้างตัวแปร (หมายถึงกรณีสร้างนะ) คุณจะใช้ var
ในการสร้างคำสั่ง คุณจะใช้ function
กำหนดชนิดของตัวแปร :int ความหมาย ให้เป็นจำนวนเต็ม
กำหนดชนิดของคำสั่ง (e:MouseEvent):void กำหนดให้เป็นเหตุการที่เกี่ยวกับการใช้เม้าส์ และไม่ต้องส่งค่าไปไหน (ยังไม่ต้องจำ)
ค่าตัวแปร = 100
ค่าของคำสั่ง = { ยังไม่ได้กำหนด }

การกำหนดค่าของคำสั่ง เราจะใส่ไว้ในเครื่องหมายปีกกา สมมติ

function pick(){ gotoAndStop(2);}

หมายความว่ายังไง จากข้างบน มันก็หมายถึง สร้างคำสั่งชื่อ pick โดยคำสั่งนั้นคือ ให้ ไทม์ไลน์หลัก ไปแสดงที่เฟรม 2 แล้วหยุด

คำถาม ถ้าเราเขียนข้างบนลงในแอคชั่นสคริปแล้ว C+E ถามว่า ไทม์ไลน์หลักจะแสดงอะไร
เฉลย ไม่แสดงอะไรเลย เพราะเราแค่สร้างคำสั่ง เรายังไม่ได้ใช้คำสั่งครับ วิธีใช้คำสั่งก็อย่างที่เคยบอก

pick();

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

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

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

แต่ถ้าคำสั่งไม่เกี่ยวข้องกับเหตุการณ์ ในวงเล็บแรก อาจกำหนดค่าตัวแปรแทนไปเลยก็ได้ ถ้าภายในคำสั่งนั้นมีการใช้ตัวแปรด้วย เช่น

function pick (bo:int, co:String){}

หมายถึง สร้างคำสั่งชื่อ pick โดยภายในคำสั่งจะมีตัวแปรให้ใช้งานภายในคำสั่งนี้เท่านั้นคือ ตัวแปร boที่เป็นจำนวนเต็ม และ coที่เป็นตัวหนังสือ
กำหนดต่อ

function pick (bo:int, co:String){
gotoAndStop(bo);
trace(co);
}

คราวนี้เรากำหนดตัวแปรแล้ว แต่การสร้างตัวแปรในคำสั่ง เราสามารถระบุได้เลย ไม่ต้องใช้ var (มันเป็นข้อยกเว้นน่ะ)

คำสั่ง pick คือ ให้ไปที่เฟรมที่เป็นค่าของ bo ซึ่งค่าของ bo เรายังไม่กำหนด และแสดงคำที่เป็นค่าของ co เป็นตัวหนังสือ ซึ่งก็ยังไม่กำหนดเช่นกัน รูปแบบนี้เป็นคำสั่งปลายเปิด เราสามารถเรียกคำสั่งแบบนี้โดยกำหนดตัวแปรลงไปได้เลยเช่น

pick(3,"hello world");

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

สังเกตุ กรณีเราไม่ได้ใส่ตัวแปรไว้ เวลาเรียก pick();
แต่เมื่อเราใส่ตัวแปรกำหนดเอาไว้ เวลาเรียก pick(3, "hello world");

แทบไม่ต่างกัน จะต่างก็ตรง ตัวหลังมีการกำหนดค่าตัวแปรไว้เลย ซึ่งให้เราจำรูปแบบนี้ไว้ เพราะจะได้ใช้ในภายหลัง

สรุปเลยดีกว่า

1. การสร้างคำสั่งหรือเรียกกันว่าฟังก์ชั่นนั้น(ในกรณีที่อยู่ในคลาส ฟังก์ชั่นจะเรียกว่า method) จะมีรูปแบบคือ
function ชื่อ () {}
2. การเรียกใช้งานคำสั่ง ให้พิมพ์ชื่อคำสั่งที่สร้างไว้แล้ว ตามด้วย ();
3. การสร้างฟังก์ชั่น จะสร้างแบบกำหนดเหตุการณ์ หรือจะสร้างแบบปลายเปิดก็ได้

คาบหน้าจะเป็นเกี่ยวกับเหตุการณ์พร้อมทั้งเริ่มการสร้างงานที่เป็นระบบครับ หวังว่าจะตั้งใจรับฟังกันนะ โชคดีครับ

คาบที่ 10 ทบทวนและแบบฝึกหัด

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

มามะ มาทบทวนกันก่อนเลยดีกว่า

โจทย์

ในตอนนี้ คุณอยู่ที่เฟรมที่ 1 แต่สร้างไป 10 เฟรม ให้สร้างตัวแปรชื่อ pick ชนิดตัวหนังสือ เมื่อถึงเฟรมที่ 2 ให้คุณกระโดดข้ามไปหยุดที่เฟรมที่ 4 เลย และให้ตัวแปร pick มีค่าเป็น ปื๊กหล่อที่สุด แสดงในช่อง output ด้วย คุณจะทำอย่างไร

---

---

---

เฉลย

ก็กดที่เฟรม ที่ 2 นะ แล้วใส่สคริปดังนี้
gotoAndStop(4);
var pick:String = "ปิ๊กหล่อที่สุด";
trace(pick);

ข้อต่อมา

ให้สร้างตัวแปร ชื่อnumb ที่มีค่าเป็น 180 เพียงแต่ 180 นั้นมีชนิดเป็นตัวหนังสือ

---

---

---

เฉลย
var numb:String = "180";

ข้อต่อมา

ถ้าวันนี้เป็นวันอาทิตย์ที่ 1 มกราคม ทุกสิ้นเดือน จะได้เงิน 8300 บาท ปลายปี ได้โบนัสอีก 20000 บาท ถามว่า วันที่ 1 ปีหน้า ยอดเงินรวมจากที่ได้รับเงินเดือนกับโบนัส จะเป็นกี่บาท (นับเฉพาะรายได้รวมทั้งหมด เผื่อจะเอาไปคำนวนภาษีไง) จงพิสูจน์

---

---

---

เฉลย

var pick:int = 8300*12+20000;
trace(pick);



ถ้าอ่านแล้วเข้าใจหมดเลย หรือดูเฉลยแล้วถึงบางอ้อ งั้นคุณก็

!!! ยินดีด้วย ตอนนี้แฟลชเลเวลของคุณคือ เลเวล 2 !!!

แต่ถ้ายังก็

!!! เสียใจด้วย ตอนนี้แฟลชเลเวลของคุณยังไม่ถึง เลเวล 2 !!!

บทหน้าจะเป็นบทมหากาพย์ เพราะจะยาวมาก เกี่ยวกับอีเว้นท์และฟังก์ชั่น เตรียมใจไว้แล้วเจอกันใหม่นะครับ

คาบที่ 9 properties ก็สอนเราได้

จั่วหัวแบบนี้อีกแล้ว properties มันคืออะไรอีก มันคือแถบด้านล่างเวลาใช้เครื่องมือใช่ไหม

หายใจเข้าก่อนครับ แล้วหายใจออก ทำใจให้สบาย

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

นั่นคือ properties และ method

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

ง่ายๆ และเข้าใจที่สุด

properties = ตัวแปร
method = คำสั่ง หรือฟังก์ชั่นนั่นเองแหละ

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

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

ดังนั้น ผืนดินก็คือ properties
การหมุนรอบตัวเองก็คือ method

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

เมื่อเรากำหนดตัวแปรของเรา ให้มีชนิดของตัวแปรเป็นคลาสคลาสหนึ่ง สมมติคือ MovieClip ดังนี้

var pick:MovieClip = new MovieClip;

ASboy: เฮ้ย new มาจากไหน (แหม่ นานๆทีจะได้ออก)

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

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

ที่ต้อง new ก็มี MovieClip Sprite และก็บรรดา class ต่างๆ เท่านั้น

ในคลาสมูฟวี่คลิ๊ปนั้น จะมีคำสั่ง และตัวแปรสำหรับใช้งานมากมาย

ยกตัวอย่างง่ายๆ ตัวแปรในคลาสมูฟวี่คลิ๊ปชื่อ x และก็ y ทั้ง 2 ตัวเป็น properties เพราะเป็นตัวแปรในคลาสมูฟวี่คลิ๊ป

เราจะเรียกใช้ตัวแปรนั้น ก็เมื่อเราประกาศแล้วว่า ตัวแปรที่เราสร้างนั้น มีชนิดเป็น มูฟวี่คลิ๊ป ดังนั้น


var pick:MovieClip = new MovieClip;
addChild(pick);
pick.x = pick.y = 50;

เมื่อเราใส่สคริปนี้ลงไปในเฟรม เมื่อ C+E มันจะสร้างตัวแปรที่เป็น มูฟวี่คลิ๊ป (บรรทัดแรก) แต่เราสร้างมันขึ้นมาแล้วก็จริง แต่ไม่จำเป็นว่ามันจะโผล่ที่หน้าจอเรานี่นา ดังนั้น เราจึงต้องใส่มันลงไปในหน้าจอของเราโดยคำสั่ง

addChild();

เป็นคำสั่งอีกแล้ว แอดชิล คือการนำเป้าหมายวางไว้ในมูฟวี่คลิ๊ป แต่ถ้าเราไม่กำหนดว่า จะวางไว้บนมูฟวี่คลิ๊ปอันไหน มันก็จะกลายเป็นวางบนเสตจ

สมมติ ผมมีมูฟวี่คลิ๊ปอีกตัวบนเสตจชื่อ spock ถ้าผมจะใส่มูฟวี่คลิ๊ป pick ลงใน มูฟวี่คลิ๊ป spock ผมก็ต้องใช้ว่า

spock.addChild(pick);

ตามรูปแบบการใช้งานคำสั่งนะครับ แต่สำหรับบรรทัดที่สอง เราไม่ได้กำหนดดังนั้น มันจะวางมูฟวี่คลิ๊ปปิ้กลงบนเสตจครับ
โอเคนะครับ ถ้าเราไม่วางลงบนเสตจ เราก็จะมองไม่เห็นมูฟวี่คลิ๊ปที่สร้างขึ้น ในกรณีเราวางมูฟวี่คลิ๊ป pick ลงใน spock ถ้า spock ไม่ได้แอดชิล ลงเสตจ เราก็จะไม่เห็น pick อยู่ดี แต่ถ้า spock อยู่บนเสตจอยู่แล้ว เราแอดชิล pick เข้าไป pick ก็จะโผล่ออกกมาบนเสตจ

ส่วนบรรทัดสุดท้าย เป็นการกำหนดค่าตัวแปร x y หรือก็คือพร็อพเพอร์ตี้ของคลาสนั่นเอง โดยผมกำหนดให้ พร็อพเพอร์ตี้ของ pick ตัว x และ y = 50 หมายความว่า ตำแหน่งบนหน้าจอที่ pick จะไปแสดงคือตำแหน่งที่ x = 50 และ y = 50 pixel จากมุมซ้ายบน

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

สรุปนะครับ

1. ถ้าเราจะสร้างตัวแปรใดตัวแปรหนึ่ง คิดดีๆว่าเราจะให้มันทำอะไรบ้าง และกำหนดชนิดของตัวแปรที่เหมาะสมลงไป ชี้ชัดๆไปเลย มันจะทำให้งานเราคล่องกว่า ถ้าตัวแปรที่ใช้งานไม่พอมือ เราก็แค่สร้างใหม่ ให้ตัวแปรอื่นทำหน้าที่ของมันไป เป็นหลักการกระจายงานกันทำครับ

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

คาบที่ 8 Timeline script

สคริปที่ใช้ควบคุม timeline ที่ใช้มาก ก็มีดังนี้

stop();
play();
gotoAndStop();
gotoAndPlay();

*** โปรดระวังเรื่องตัวพิมพ์ใหญ่พิมพ์เล็กให้ดี เพราะสำหรับโปรแกรมแฟลชนั้นมีความสำคัญมาก ***

สคริปหรือคำสั่งพวกนี้ เป็นคำสั่งสำเร็จรูป (บางคนเรียก keyword) ซึ่งจะใช้ในการควบคุมไทม์ไลน์ เพราะปรกติ เมื่อเรากด C+E(งงอะไร Ctrl+Enter ไง บทก่อนก็บอกแล้วนี่) โปรแกรมจะเริ่มแสดงภาพจากเฟรมแรกด้านซ้าย ไล่ไปทางขวาเรื่อยๆ ด้วยความเร็วเท่ากับ 12 frame ต่อ วินาที ซึ่งค่านี้สามารถปรับได้

ดังนั้น ถ้าเกิด เราใส่ปุ่มเอะไรสักปุ่ม(ซิมโบลหรือวัตถุอะไรก็ได้ ทีมีชนิดเป็นปุ่ม) ข้าไปที่ stage ไว้ในเฟรมแรก เมื่อ C+E คุณจะยังไม่ทันได้เห็นปุ่มหรอก โปรแกรมก็จะแสดงเฟรมต่อไปแล้ว ทำให้ปุ่มของเราหายไป จนทำให้เราเกิดสงสัยว่าปุ่มที่อุตส่าห์ใส่มันหายไปไหนล่ะก็ ปัญหาเหล่านี้จะหมดไปถ้าเราใส่สคริป

stop();

ไว้ในเฟรมที่ 1 โดยกดไปที่เฟรมแรก ให้มันขึ้นสีทึบๆ แล้วกลับไปกดที่แถบ action ที่ด้านล่าง แล้วจึงใส่สคริปลงไปในช่องว่างๆ เมื่อโปรแกรมแสดงผล (C+E) มาเจอสคริปนี้ มันจะหยุดรอ และไม่ทำการแสดงผลในเฟรมต่อไป ทำให้เราค้างอยู่ที่เฟรม 1 และทำให้เรามีเวลาตัดสินใจว่า เราจะกดปุ่มที่เราใส่ไว้ดีไหม

คำว่า stop นั้น เป็นภาษาอังกฤษแปลว่าหยุด สังเกตเห็นว่า หลัง stop เป็นเครื่องหมาย () แสดงว่า stop ไม่ใช่ตัวแปร แต่เป็นคำสั่ง ดังนั้น ถ้าเราไม่กำหนดตัวแปร คำสั่งนี้ก็จะส่งผลต่อ stage แทน แต่ถ้าสมมติเรามี มูฟวี่คลิ๊ปอีกตัวบน stage ชื่อว่า pick ซึ่งเป็นรูปวงกลมที่กำลังหมุน

ดังนั้น เมื่อเราสั่ง stop(); หน้าจอเราจะหยุดที่เฟรมที่เราใส่ stop(); แต่เจ้ามูฟวี่คลิ๊ปชื่อ pick ก็จะยังหมุนไปเรื่อยๆ แต่ถ้าเราใส่

stop();
pick.stop();

ทั้ง stage และ มูฟวี่คลิ๊ป pick ก็จะหยุดทั้งคู่

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

ทีนี้มาต่อกันที่

play();

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

สรุป
1. ถ้าต้องการให้โปรแกรมหยุดรอที่เฟรมใด ให้กดที่เฟรมนั้น แล้วใส่สคริป stop(); ไว้ที่แถบaction ถ้าหาไม่เจอก็ f9
2. ถ้าเกิดมีโอกาศที่ต้องการให้มันเล่นต่อในเฟรมที่หยุดไว้ ให้ใส่คำสั่งว่า play(); ในเฟรมที่หยุด

ตามมาด้วย

gotoAndPlay();
gotoAndStop();

มันก็คือรูปแบบของ play และ stop นั่นเอง แต่มีเพิ่มตรง gotoAnd-
คำว่า gotoAnd หมายถึง ไปที่.... และ แปลตรงตัวคือ ต้องไปที่ไหนสักที่ และทำอะไรสักอย่าง แต่เพราะมันถูกจัดอยู่ในสคริปหมวด timeline สถานที่ที่มันจะไปก็มีแต่เฟรมเท่านั้น เหมือนคุ้นๆว่าเคยบอกไปแล้วในคาบก่อนๆ แต่เอาเถอะ ว่าใหม่ก็แล้วกัน

gotoAndPlay();

ดังนั้นความหมายคือ ไปที่เฟรมใดเฟรมหนึ่ง แล้วก็เล่นต่อไป ส่วนเราอยากให้ไปเฟรมไหนก็กำหนดตัวเลขไว้ในเครื่องหมายวงเล็บ เวลาโปรแกรมประมวลผล(C+E) แล้วแสดงภาพในเฟรมไล่มาเรื่อยๆ มาเจอเฟรมที่ใส่สคริปนี้ไว้ มันก็จะทำตามที่สคริปสั่ง

สมมติคุณสร้างเฟรมไว้ 10 เฟรม แล้วในเฟรมที่ 5 คุณใส่สคริปว่า

gotoAndPlay(1);

เมื่อโปรแกรมทำงาน มันก็จะทำงานจากเฟรมที่ 1- 5 แล้วจะวนกลับไปต่อที่เฟรมที่ 1 ใหม่ แล้วก็แสดงภาพไปถึงเฟรมที่ 5 แล้วก็วนกลับไปเฟรมที่ 1 ใหม่ ไม่รู้จบ

ส่วน gotoAndStop(); ก็เหมือนกับตัวบน แต่มันจะไม่ประมวลผลต่อ คือ พอไปเฟรมที่ระบุ มันก็จะหยุดรอที่เฟรมนั้นเลย

คราวนี้เอาแค่พอหอมปากหอมคอก่อนนะครับ เจอกันงวดหน้า กับ ครูปิ้ก ที่นี่ ที่เดียวครับ

คาบที่ 7 สำหรับมือใหม่สุดๆ

ในบทก่อนหน้า เราอาจจะกล่าวได้ว่า คนที่เข้ามาอ่านย่อมมีความรู้พื้นฐานอยู่แล้ว แต่ถ้าเขาไม่มีล่ะ อืม น่าคิดแฮะ แต่จะให้สอนหมดก็ตายดิ งั้นเอาเฉพาะพื้นๆเลยนะ

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

จากรูป ผมใช้เครื่องมือสำหรับใส่ตัวอักษร ด้านล่างในส่วน properties ก็จะมีส่วนปรับแต่งให้ใช้งานได้อย่างถูกใจมากขึ้น โอเชนะ

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

ด้านนี้เป็นส่วนที่เรียกว่า library เอาไว้เก็บพวกวัตถุหรือ symbol สามารถสร้างใหม่ได้ อยากเอาลง stage ก็ลากไปวางเลย ปุ่มสร้างอยู่ตรงด้านล่าง จะสร้างโฟลเดอร์เพื่อเก็บให้เป็นสัดส่วนก็ยังได้ ในการสร้างsymbol พอกดแล้ว เราจะสามารถเลือกชนิดของsymbol ได้ด้วย เป็นมุฟวี่คลิ๊ป ปุ่ม แล้วก็กราฟฟิค

สุดท้ายก็ด้านล่าง

มันจะมีแถบอยู่ เราสามารถเลือกได้ ถ้าเราใช้เครื่องมือ กดที่แถบ properties เพื่อจัดการเครื่องมือ เวลาจะเขียนแอคชั่นสคริป ก็กดตรงแถบ Action ในภาพพอกดแล้วมันจะขึ้น action-frame ก็ไม่มีอะไรหรอก มันแค่บอกว่า เรากำลังเขียนแอคชั่นสคริปลงบนเฟรมนั่นเองแหละ

ทีนี้รู้แล้วนะครับว่า ใส่สคริปตรงไหน อืมๆ

คาบหน้า จะเป็นการสอนใช้งานคำสั่งที่พบเห็นบ่อยๆ ซึ่งจะเป็นเรื่องหลักที่ทุกคนรอคอยกันแล้วล่ะนะ เจอกันใหม่ เร็วๆนี้

คาบที่ 6 คำสั่ง

ถ้าคุณอ่านแล้วทำความเข้าใจมาได้ถึงตรงนี้ ยินดีด้วย คุณผ่านเลเวล 1 ของแฟลชแอคชั่นสคริป มาเป็นที่เรียบร้อยแล้ว

!!!You got Level 1!!!

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

ตัวแปรโลกมีชนิดของตัวแปรเป็นดาวเคราะห์ พอผ่านมาสักพัก เราอยากให้โลกพุ่งชนดวงจันทร์ เราก็สั่งว่า

โลก.พุ่งชนดวงจันทร์();

คำสั่ง หรือที่เราเรียกภาษาอังกฤษว่า ฟังก์ชั่น (function) มีไว้เพื่อกำหนดการทำงานของตัวแปร หรือบางที ก็สามารถกำหนดได้ทั้งอวกาศเลยก็ได้ ในการเรียกใช้คำสั่งนั้นมีอยู่ 2 รูปแบบ นั่นคือ

สั่งเลย กับ รอเหตุการณ์แล้วคำสั่งค่อยทำงาน

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

สั่งเลย วิธีใช้คือ

ชื่อตัวแปรหรือสิ่งที่เราจะสั่ง.คำสั่ง();

ส่วนใหญ่ คำสั่งจะมีลงท้ายด้วย () เช่นนั้นเพื่อให้แยกออกระหว่างคำสั่งกับตัวแปรนั่นเอง เช่น

pick.gotoAndPlay(1);

ในที่นี้ คำสั่ง gotoAndPlay() นั้นเป็นคำสั่งของ ไทม์ไลน์ นั่นคือการกำหนดให้เราเล่นที่เฟรมที่เท่าไหร่บนไทม์ไลน์
ไทม์ไลน์นั้นคือส่วนบนของหน้าจอการทำงานที่มีช่องเล็กๆเรียงกันไม่รู้จบ 1 ช่องเล็กนั้นเรียกเฟรม ในแต่ละเฟรมก็คือ sprite 1 ชิ้น พอมาเรียงต่อกัน เวลาโปรแกรมทำงานก็จะเล่นหรือฉายภาพ sprite ทีละ1 ไปทางขวาเรื่อยๆ ก่อให้เกิดภาพเคลื่อนไหวขึ้น ดังนั้น เมื่อมี sprite หลายๆชิ้นมาต่อกัน เราจะเรียกว่า movieclip ดังนั้น ถ้าจะไปที่เฟรมหรือsprite อื่นๆ ดังนั้น การทำงานต้องอยู่ในรูปแบบ movieclip เท่านั้น ซึ่งปรกติ การทำงานของแฟลชจะถือเป็นมูฟวี่คลิ๊ปตัวหนึ่งอยู่แล้ว จึงสามารถใช้งานคำสั่งนี้ได้เลย
ในคำสั่ง gotoAndPlay(1); มีเลข 1 อยู่ข้างใน โดยในวงเล็บหรือเลข 1 นั้น หมายถึงให้ไปเล่นที่เฟรมที่ 1 แล้วก็เล่นต่อไป นอกจากนี้ยังมี
gotoAndPlay(“pick”); อันนี้หมายถึงให้ไปเล่นที่ซีนที่มีชื่อว่า pick โดยซีนนั้นก็คือ ชื่อเฟรมที่เราตั้งชื่อให้เป็นพิเศษนั่นเอง

2 สั่งตามเหตุการณ์ คือเราจะคาดเดาว่าจะเกิดเหตุการณ์อะไร แล้วเมื่อเกิดเหตุการณ์นั้น เราค่อยสั่งมันโดยมีรูปแบบคือ

ตัวแปร.addEventListener(Event.เหตุการณ์ , คำสั่ง);

อันนี้จะยาก เดี๋ยวขอยกไปบทหน้าก่อนนะ

เอาล่ะ แบบฝึกหัด
จงหาความต่างของการทำงานระหว่าง

Pick.gotoAndStop(5);
gotoAndStop(5);
gotoAndStop(“wand”);

-เฉลย ตัวแรก มีปิ้กนำหน้า นั่นหมายถึง เราจะสั่งงานเฉพาะมูฟวี่คลิ๊ปที่ชื่อ pick เท่านั้น ปรกติ stage สามารถใส่มูฟวี่คลิ๊ปกี่อันลงไปก็ได้ เวลาเราสั่งงาน เราจึงต้องกำหนดชื่อของตัวที่เราจะให้ทำงานเสียก่อน แล้วจึงใช้คำสั่ง ดังนั้น มูฟวี่คลิ๊ปที่ชื่อ pick จะเล่นไปเฟรมที่ 5 แล้วหยุดอยู่แค่นั้น ส่วนการทำงานส่วนอื่นก็จะยังทำงานต่อไป รวมถึงการทำงานของมูฟวี่หลักด้วยก็จะยังทำงานอยู่
บรรทัด 2 เมื่อไม่ได้ระบุมูฟวี่คลิ๊ปไว้ นั่นหมายถึง มูฟวี่หลักหรือมูฟวี่ของ stage จะทำงานตามคำสั่ง โดยไปที่เฟรมที่ 5 แล้วหยุดทำงาน ส่วนมูฟวี่คลิ๊ปอื่นที่อยู่ข้างในก็จะยังทำงานต่อไป
บรรทัดสุดท้าย เป็นการที่มูฟวี่หลักไปหยุดที่เฟรมที่เราตั้งชื่อว่า wand

สรุปสำหรับวันนี้

ในการใช้คำสั่งกับตัวแปรนั้น ถ้าเราไม่กำหนดตัวแปรที่เราจะใช้คำสั่ง มันจะไปโผล่ที่เมนหลัก หรือหน้าจอหลักของเรา ดังนั้น ถ้าอยากให้ตัวลูกๆ ที่อยู่ในหน้าจอหลัก เราก็ต้องเรียกชื่อตัวลูกก่อน แล้วค่อยทำงาน ซึ่งจะมีปัญหาตรงตัวลูกที่ซ้อนอยู่ในตัวลูกอีกที วิธีเรียกตัวลูกซ้อนในตัวลูกก็คือวิธีเดียวกัน เช่น ถ้าเราจะเรียกมูฟวี่คลิ้ป a ที่อยู่ในมูฟวี่คลิ๊บ b ซึ่งมูฟวี่คลิ๊บ b วางอยู่บนเสตจ(มูฟวี่คลิ๊ปหลัก) เราจะเรียกดังนี้
b.a.คำสั่ง();
เอาตัวใหญ่กว่าขึ้นก่อน จนกว่าจะถึงตัวที่เราต้องการ

คาบนี้ก็สอนการทำงานคร่าวๆของการใช้คำสั่งแล้วนะครับ เรื่องนี้ยังอีกยาว แล้วเจอกันคาบหน้าครับ

คาบที่ 5 ชนิดของตัวแปรที่ใช้กันมากอีก 3 ตัว

ต่อเนื่องจากคาบที่แล้ว ชนิดของตัวแปรที่เหลืออยู่นั้นยากยิ่งแก่การทำความเข้าใจ จนผมตั้งฉายาให้ว่า 3 ทหารเสือกันเลยทีเดียว
เริ่มจากง่ายสุดใน 3 ตัวที่เหลือกัน

String หรือก็คือตัวหนังสือ เจ้าตัวนี้คือชนิดของตัวแปรที่ตรงตามชื่อและมักใช้งานผิดบ่อยที่สุด
ข้อต้องจำ การกำหนดค่าของตัวแปรชนิดนี้ ต้องอยู่ภายในเครื่องหมาย “ “ เสมอ (ข้อนี้แหละที่ลืมกันตลอด) ตัวอย่างเช่น

var pick:String = "ปิ๊กรูปหล่อ";
var pock:String = "ปิ้๊กหน้าตาดี";
trace(pick+" "+pock);

จากตัวอย่าง เมื่อกด Ctrl+Enter (ต่อจากนี้จะเรียกย่อๆว่า C+E) ค่าที่แสดงในช่อง output จะได้เป็น

ปิ๊กรูปหล่อ ปิ๊กหน้าตาดี

เพราะอะไร ในโปรแกรมแฟลช ตัวหนังสือนั้น + กันได้!! งงไหม +กันได้ แต่ลบ คูณ หาร ไม่ได้
ข้างบนผมกำหนดให้ตัวแปรปิ้กคือตัวอักษร มีค่าเท่ากับ ปิ๊กรูปหล่อ ส่วนป๊อกจะเป็น ปิ๊กหน้าตาดี เมื่อ trace สังเกตดีๆ
ผมให้ trace ค่า pick + “ “ + pock ไอ้ที่ใส่ไว้ในเครื่องหมายคำพูด ผมใส่ ช่องว่างเอาไว้ เพื่อให้ประโยคที่ได้ไม่ติดกัน พอแสดงผล มันจึงเป็นไปตามรูปแบบด้านบนครับ แต่ถ้าใส่แค่ pick+pock ในคำสั่ง trace ค่าที่ได้จะเป็น

ปิ๊กรูปหล่อปิ้๊กหน้าตาดี

เข้าใจแล้วนะครับ ส่วนตัวแปรชนิดนี้ มักจะใช้งานยังไง ก็คงบอกได้ว่า เกี่ยวกับการแสดงตัวอักษรทั้งหมดเลยก็ว่าได้เช่น ถ้าในหน้าจอเรามีกรอบคำพูดอยู่ เราอยากให้แสดงประโยคที่เราเก็บในตัวแปรชนิด String เราก็จับมันใส่เครื่องหมาย = ได้เลยครับ แต่ใช้สคริปยังไงนั้น ไว้บทหลังนะครับ



ชนิดที่เหลือ Sprite และ MovieClip
ยากจะอธิบายจริง เอาเป็นว่า มันก็เหมือนกระดาษแผ่นหนึ่งกับกระดาษปึกหนึ่งที่ใช้ทำภาพเคลื่อนไหวก็แล้วกัน
การที่คุณสร้าง symbol* ขึ้นมาสักอันหนึ่งใน library พอกดสร้าง คุณจะมีหัวข้อให้เลือก 3 แบบนั่นคือ movieclip button และ graphic ก็ตรงนั่นเลยครับ ในการสร้างตัวแปร แล้วกำหนดชนิดเป็นพวก Sprite และ MovieClip นั่นก็เหมือนเรากดสร้าง symbol นั่นเลย เพียงแต่เป็นการใช้สคริปสร้างก็เท่านั้นเอง

MovieClip = symbol> movieclip
Sprite = symbol>graphic

เอาเป็น เรามารู้จักเฉพาะขอบเขตการทำงานของมันดีกว่า จะได้กำหนดค่าได้ถูก
เมื่อเรากำหนดชนิดของตัวแปรให้เป็น Sprite หรือ MovieClip แล้วตัวแปรนั้นจะเปรียบเสมือนวัตถุที่มีหน้าที่เป็น class เลย ง่ายๆนะ

ถ้าเราจะสร้างรูปภาพขึ้นในโปรแกรม ให้เรากำหนดชนิดของตัวแปรเป็น sprite
ถ้าเราจะสร้างภาพเคลื่อนไหวในโปรแกรม ให้เรากำหนดชนิดของตัวแปรเป็น MovieClip

ไม่ต้องไปเข้าใจมันมากครับ เน้นวิธีใช้งานละกัน เพราะถ้าเจาะลึก สงสัยน่าเบื่อแย่

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

สำหรับถ้าเราจะสร้างรถให้วิ่งไปมา เราอาจสร้างตัวแปรเป็นมูฟวี่คลิ๊ป แล้วใส่คำสั่งมากมาย เพื่อให้รถวิ่ง
หรือไม่ก็ เราสร้างรูปรถจากบน stage โดยไม่ใช้สคริป ส่วนการเคลื่อนไหวก็ใช้ tween ช่วยเอา มันมีอุปกรณ์มากมายอยู่แล้วโดยไม่ต้องใช้สคริป

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

คุณสร้าง sprite หรือก็คือหน้ากระดาษขึ้นมา ใส่รูปต้นไม้ บ้าน และคน โดยใช้สคริปลงไปในตัวแปร sprite หรือกระดาษนั้น คราวนี้ คุณอยากให้ ภาพทั้งบ้าน ต้นไม้ และคน ย่อขนาดลงเป็น 50 % โดยปรกติ คุณต้องไปไล่ย่อทีละตัว แต่เมื่อคุณใส่รวมกันอยู่ใน sprite เวลาคุณจะย่อ คุณก็ย่อกระดาษหรือ sprite ได้ในทีเดียว ทุกอย่างก็จะย่อตามเป็นสัดส่วน
ด้านมูฟวี่คลิ้ปก็เหมือนกัน แต่มูฟวี่คลิ๊ปจะเป็นภาพเคลื่อนไหว แน่นอนว่า เราสามารถสร้างภาพนิ่งในมูปวี่คลิ๊ปได้ ไม่ผิดกติกา แต่ถ้าสร้างภาพเคลื่อนไหวใน sprite ภาพที่ได้มันจะไม่เคลื่อนไหวก็เท่านั้นครับ


สรุปเลยดีกว่า
1.ชนิดของตัวแปร string ใช้สำหรับตัวแปรที่เป็นตัวหนังสือ
2. trace คือคำสั่งให้แสดงผลเมื่อรันโปรแกรมโดยการกด Ctrl+Enter
3. sprite คือชนิดตัวแปรที่เอาไว้สำหรับภาพนิ่ง
4. movieClip คือชนิดของตัวแปรสำหรับภาพเคลื่อนไหว

ถ้ายังไม่เข้าใจก็ยังไม่เป็นไรครับ อ่านตามไปก่อน แล้วพอเริ่มเอะใจลองกลับมาอ่านย้อน แล้วคุณจะร้องอ๋อครับ พบกันคาบหน้าครับ

*วิธีการสร้าง symbol
ก่อนอื่น เปิดโปรแกรม และเปิด library ขึ้นมา ถ้าไม่มี library ให้กด f11
ในกรอบของ library ด้านล่างจะมีเครื่องหมายแผ่นกระดาษและตัว + คล้าย new layer ของ photoshop
พอกด มันจะสร้าง symbol ขึ้นใหม่ โดยสามารถเลือกชนิดของ symbol ได้ด้วย

คาบที่ 4 ชนิดของตัวแปร

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

สมมติ เราจะสร้างชนิดของตัวแปรให้เป็น หนังสือสักเล่ม(ก็คือเป็นที่รวมของตัวอักษรในหน้ากระดาษแต่ละหน้าจนเป็นเล่ม)
การสร้างชนิดของตัวแปรที่เป็นหนังสือนั้น ชนิดของตัวแปรแบบนี้ก็จะพัฒนาต่อมาจากชนิดของตัวแปรแบบ String หรือก็คือตัวหนังสือ แล้วเอามาเพิ่มรายละเอียดเป็น มีหน้า มีปก รวมเป็นเล่ม แล้วกำหนดใหม่เป็นชนิดของตัวแปรที่เรียกว่าหนังสือ

AS3boy: อ้าว แล้วเราจะสร้างชนิดของตัวแปรยังไงล่ะครับ

ง่ายมากครับ การสร้างชนิดของตัวแปร พูดให้ถูกก็คือ การสร้าง class นั่นเอง โดยคลาสนั้น คือแหล่งรวมใหญ่ที่มีการรวมทั้งตัวแปร และ ”รูปแบบคำสั่ง” อยู่ในนั้น

AS3boy: มีคำศัพท์ใหม่มาอีกแล้ว T T

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

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

ชนิดของตัวแปรที่ใช้งานมากและบ่อยที่สุดก็คงหนีไม่พ้น 6 ตัวนี้

Integer ตัวย่อคือ int
Number
Boolean
String
Sprite
MovieClip

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

คือ var pick:int = 180.36;

จากสคริป ผมสร้างตัวแปรชื่อปิ๊ก มีชนิดของตัวแปรเป็นจำนวนเต็ม มีค่า เป็น 180.36 เมื่อระบบทำงานโดยการสั่งให้ทำงาน ในที่นี้ การสั่งให้แฟลชเริ่มทำงานสคริปให้กด Ctrl+Enter พอระบบเริ่มทำงาน ระบบก็จะสร้างตัวแปรชื่อปิ๊กที่มีค่า 180 ขึ้นมา โดยตัดทศนิยมออกไป ไม่ว่าเราจะใส่ทศนิยมอะไรไปก็ตาม พูดง่าย แม้เจะกำหนดค่ามั่วซั่ว แต่ระบบจะดูชนิดของตัวแปร แล้วก็จะจัดการให้ตัวแปรอยู่ในรูปแบบที่วางไว้อย่างเหมาะสมที่สุดครับ


ชนิดตัวแปรที่ 2 Number ก็คือตัวเลขที่มีจุดทศนิยมก็ได้ ไม่มีก็ได้ เช่นนั้นจึงค่อนข้างใช้งานได้กว้างกว่า โดยเฉพาะ เมื่อคุณนำเอามาใช้คำนวนทางคณิตศาสตร์

ตัวอย่าง var pick:int = 180.36; var spock:Number = 120.64;
โจทย์ pick+spock = ?

เฉลย pick เป็นจำนวนเต็ม เมื่อประมวลผล pick จะมีค่าเท่ากับ 180 ทันที ไม่มีการปัดเลขใดๆทั้งนั้น ส่วน spock ก็จะมีค่าเท่ากับ 120.64 ไม่มีปัดเลขเช่นกัน ดังนั้นบวกกันจะเท่ากับ 180+120.64 = 300.64 เข้าใจนะ

สำหรับแฟลชนั้น เราสามารถให้มันแสดงค่าตัวแปรให้เราดูได้โดยใช้สคริป trace(); วิธีใช้คือ

ตัวอย่าง var pick:int = 180.36; var spock:Number = 120.64; trace(pick+spock);

ถ้าคุณนำประโยคข้างบนไปวางไว้ในช่องสำหรับเขียนสคริป แล้วกด Ctrl+Enter ให้มันทำงาน ช่อง out put จะแสดงผลมาว่า 300.64

เพราะ pick = 180 และ spock = 120.64, pick+spock = 180+120.64 = 300.64

แถมอีกนิด trace(); นั้น สามารถใช้งานได้หลากหลายกว่านั้น เช่น trace(pick); ค่าที่แสดงออกมา ก็จะเป็นค่าของตัวแปร pick ซึ่งก็คือ 180 ส่วน trace(“ซารางเฮโย”); ค่าที่ได้ก็จะแสดงออกมา(หลังกด Ctrl+Enter) ว่า ซารางเฮโย อ๋อ ก็เพราะถ้าใส่เครื่องหมายคำพูด “” มันก็จะแสดงประโยคนั้นออกมาเลย เช่น trace (“pick”); พอกดแสดงผล มันก็จะแสดงว่า pick ครับ


ชนิดของตัวแปรถัดมา Boolean อันนี้ง่ายหน่อย แต่มองยากว่าใช้งานอะไร
บูลีนนั้น ค่าที่แสดงออกมามีอยู่ 2 ชนิดคือ true กับ false ถ้าเราไม่กำหนด หรือกำหนดอะไรที่ไม่ใช่ true มันจะกลายเป็น false เสียทั้งหมด ค่านี้ใช้ทำอะไร

ค่านี้โดยมากมักใช้งานเพื่อบอกสถานะว่าอยู่ในสถานนั้นหรือไม่

ตัวอย่าง var jump:Boolean = false;

หมายถึง กำหนดให้ตัวแปรชื่อ jump เป็นได้แค่ถูกกับผิด (true or false) และตอนนี้มีค่าคือ false

กรณีสมมติ เมื่อคุณกดปุ่ม spacebar แล้วทางเราได้วางคำสั่งตรวจจับการกด spacebar ไว้(การวางคำสั่งตรวจจับการกดปุ่มจะมาสอนบทหลัง) เมื่อตรวจจับว่าคุณกดปุ่มจริง ค่า jump จะเปลี่ยนเป็น true
คราวนี้ ถ้าเราวางการตรวจจับสถานะของ jump ถ้าเปลี่ยนเป็น true เมื่อไหร่ ให้สั่งตัวละครให้กระโดด
จะเห็นได้ว่า Boolean นั้น จะเกี่ยวโยงกับการสั่งการทำงานของระบบเสียมากกว่าจะใช้งานปรกติ ดังนั้นในบทนี้ ขอแค่รู้ว่า มันมีค่าเป็นแค่ true กับ false ก็พอแล้ว


สรุป
1. ชนิดของตัวแปร int คือตัวเลขจำนวนเต็ม
2. ชนิดของตัวแปร number คือตัวเลขที่มีทศนิยมด้วยก็ได้
3. ชนิดของตัวแปร Boolean คือเป็นได้แค่ true กับ false

ยังเหลือชนิดของตัวแปรที่ใช้กันมากอยู่อีก 3 ตัว พักสมองซะก่อน เอาไว้คาบหน้าดีกว่าครับ

คาบที่ 3 - ทำความเข้าใจกับตัวแปร

ASboy: ครูคร้าบ ทำไมอยู่ๆ ตัวแปรมันกลายเป็นชื่อของวัตถุในจักรวาลล่ะคร้าบ งงครับผม

อืม สงสัยครั้งที่แล้วอธิบายเร็วไปหน่อย งั้นมาต่ออีกนิด เพราะถ้ามองไม่เห็นภาพรวมในตอนนี้ แล้วจะทำความเข้าใจยาก

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

who
what
how

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

ASboy: อ้าว ครั้งที่แล้วครูบอกว่า ตัวแปรมันคือ "ชื่อ" ไม่ใช่หรือครับ ทำไมเ่ท่าที่ฟังดู ตัวแปรมันเหมือนวัตถุที่มีชื่อกำหนดมากกว่า

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

ในการสร้างตัวแปรขึ้นมาในลักษณะวัตถุ เช่น สร้างตัวแปรชื่อโลก โดยให้มีชนิดของตัวแปรเป็น โลก แบบโลกของเรา ในโลกที่สร้างขึ้นเป็นตัวแปรนั้น เราสร้างตัวแปรภายในโลกได้ เช่นเราสร้างตัวแปรชื่อประเทศไทยภายในตัวแปรโลก เช่น

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

เมื่อโลกถูกสร้าง เราอยากสร้างประเทศไทยในโลก เราก็สามารถสร้างได้

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

var earth:MovieClip;
earth.thailand = "civil war";

นั่นคือ ประเทศไทย ที่อยู่ในมูฟวี่คลิ๊ปชื่อ โลก มีค่าเท่ากับ "civil war" หรือภาษาไทยว่า สงครามกลางเมือง
จากที่ดู ตัวแปร thailand จะมีชนิดของตัวแปรเป็น String หรือข้อความ เพราะ ในการเขียนข้อความ ต้องใส่ในเครื่องหมาย "" หรือเครื่องหมายคำพูดเสมอ

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

สรุป
1. ตัวแปร คือชื่อเรียกแทนอะไรก็ได้ในโปรแกรมแฟลช และเพื่อให้รู้ว่า เราต้องการใช้ตัวแปรนั้นแทนอะไร จึงต้องกำหนดชนิดของตัวแปรไว้ด้วยเพื่อบอกโปรแกรมว่า เราอยากให้ตัวแปรที่เราสร้างขึ้น ทำงานไปในแนวทางไหน จะได้ไม่กินทรัพยากรในการประมวลผลการทำงานมากนัก
2. การตั้งชื่อตัวแปร ต้องเป็นภาษาอังกฤษเ่ท่านั้น และขึ้นต้นด้วย ตัวเลข หรือเครื่องหมายพิเศษเช่น _ ไม่ได้
3. เมื่อเรียกใช้ตัวแปรที่อยู่ภายในตัวแปร ให้เรียกขึ้นต้นด้วยตัวแปรที่ใหญ่กว่าก่อน ตามด้วยจุดฟูลสต้อบ แล้วจึงตามด้วยตัวแปรที่อยู่ภายในตัวแปรนั้น

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

คาบที่ 2 – Variable = ตัวแปร ค่าฉงนของจักรวาล

ตัวแปร มันคืออะไร สำคัญไฉน ทำไมต้องรู้จักมัน

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

ในแอคชั่นสคริปนั้น ตัวแปรแต่ละตัวก็เปรียบเหมือนชื่อวัตถุในจักรวาล(โปรแกรม)ของแฟลชนั่นเอง ทว่า จักรวาลของแฟลชนั้น ไม่เหมือนจักรวาลของโลกมนุษย์เสียทีเดียว

คำว่า ไก่ ในจักรวาลของแฟลช ไม่จำเป็นเสมอไปว่าจะเหมือนไก่ในจักรวาลของโลกเรา

อ้าว แล้วเราจะรู้ได้ไงว่า ตัวแปร ไก่ ในจักรวาลแฟลชคืออะไร............... ฮึฮึฮึ คำตอบคือ ... ไม่รู้

ดังนั้น เพื่อให้เราสามารถรู้ได้ว่า ไก่ในจักรวาลแฟลชนั้น มันคืออะไร จึงต้องมีการกำหนดคำจำกัดความของตัวแปรไก่ นั่นก็คือ “ชนิดของตัวแปร” นั่นเอง

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

ดังนั้น เมื่อเราประกาศว่า ไก่ คือตัวแปรล่ะนะ มีชนิดของตัวแปรเป็น สัตว์ปีกที่บินไม่ได้ ออกไข่วันละหน ขันตอนเช้า บลาๆ นั่นแหละคือการสร้างไก่ขึ้นมาแล้วในโปรแกรมแฟลช เริ่มมองเห็นภาพแล้วใช่มะ รูปแบบการสร้างตัวแปรในโปรแกรมแฟลชมีดังนี้

รูปแบบ var [ชื่อตัวแปร] : [ชนิดตัวแปร] = [ค่าตัวแปรถ้ามี];

ตัวอย่าง var pickHigh:Number = 180;

ความหมาย สร้างตัวแปร ชื่อ pickHigh มีชนิดตัวแปรคือ ตัวเลข ซึ่งมีค่าเท่ากับ 180

ในการสร้างตัวแปรขึ้นมา ต้องประกาศ(ประกาศ ภาษาแฟลชหมายถึงพิมพ์ลงไปในช่องแอคชั่นสคริป)
ประกาศคำว่า var เคาะเว้นวรรค 1 ที แล้วจึงตามด้วยชื่อตัวแปรที่เราต้องการสร้างขึ้นมา
สำคัญ: ตรงนี้สำคัญมากครับ หลังชื่อตัวแปรที่เราต้องการสร้าง จากบรรทัด รูปแบบ จะเห็นว่า หลัง[ชื่อตัวแปร] จะมีเครื่องหมาย โคล่อน (:) คั่น ก่อนจะประกาศชนิดของตัวแปร สำหรับชนิดของตัวแปรนั้น จะใส่ก็ได้ไม่ใส่ก็ได้ พูดง่ายๆ ถ้าไม่ใส่ก็ไม่ต้องใส่โคล่อนนั่นเอง

ASบอย : อ้าว ไม่ใส่ก็ได้เหรอครับครู

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

ตัวอย่าง var pickHigh:Number = 180;

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

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

ชนิดของตัวแปร โดยปรกติ โปรแกรมแฟลชจะมีชนิดของตัวแปรสำเร็จรูปไว้ให้เราใช้บ้างแล้ว เช่น

Number คือ ตัวเลขที่มีจุดทศนิยมด้วย, int คือ ค่าจำนวนเต็ม ไม่มีทศนิยม, Boolean ค่าทางตรรกศาสตร์ มีแค่ true และ false (จริงกับเท็จเท่านั้น), Sprite ลักษณะเป็นกระดาษแผ่นหนึ่ง ที่สามารถวาดรูปอะไรลงไปก็ได้, Movieclip คือsprite หลายๆแผ่นมาต่อกัน เหมือนเวลาเราทำการ์ตูนขอบสมุด เมื่อเปิดเร็วๆแล้วจะเกิดภาพเคลื่อนไหว เจ้ามูฟวี่คลิปก็สำหรับกำหนดตัวแปรว่าให้เป็นภาพเคลื่อนไหวนั่นเอง ฯลฯ

ทั้งนี้ เรายังสามารถสร้างชนิดของตัวแปรได้เองตามอิสระด้วย ซึ่งเราจะเรียกมันว่า คลาส (Class) โดยจะพบได้ในบทหลังจากนี้
เข้าใจเกี่ยวกับการสร้างตัวแปรมากขึ้นแล้วหรือยัง

เอาล่ะเรามาทบทวนกันก่อนดีกว่า ความรู้ที่ได้จากคาบนี้คือ

1. ตัวแปร ก็คือชื่อของตัวอะไรก็ตามตัวหนึ่งในโปรแกรมแฟลช โดยเราสามารถกำหนด ชนิดและค่าของมันได้อย่างอิสระ
2. ในการสร้างตัวแปรขึ้นมาตัวหนึ่ง จะเริ่มต้นด้วยคำว่า var แล้วตามด้วยชื่อตัวแปร : แล้วจึงกำหนดชนิดของตัวแปร
3. ตัวแปรสามารถกำหนดค่าได้โดยใช้เครื่องหมาย = แล้วจึงตามด้วยค่าที่ต้องการกำหนด
4. ในการประกาศตัวแปร หรือจะประกาศอะไรก็ตาม ถ้าจบประโยคแล้ว ลงท้ายด้วย ; เสมอ


งั้น เรามาลองทำแบบฝึกหัดกันดีกว่า เพื่อจะได้เข้าใจมากยิ่งขึ้น

1. ให้สร้างตัวแปรชื่อ potter โดยมีชนิดของตัวแปรเป็น Boolean ทำอย่างไร

-เฉลย var potter:Boolean;

2. จากตัวแปร potter ให้กำหนดค่าเป็น true

-เฉลย potter = true;

หลายท่านคงสงสัย อ้าว var หายไปไหน ชนิดของตัวแปรด้วย Boolean อ่า นั่นก็เพราะ โจทย์บอกว่า จากตัวแปร potter นั่นหมายถึง เอาตัวแปรที่สร้างมาแล้วมากำหนดค่า เมื่อมันมีตัวแปรสร้างแล้ว คุณจะสร้างใหม่ทำไมล่ะ ก็เอาของเดิมนั่นแหละมาใช้ เมื่อสร้างแล้ว และเพราะเรากำหนดชนิดของตัวแปรตอนสร้างไปแล้ว จึงไม่ควรกำหนดใหม่ ให้ใช้ชนิดของตัวแปรเดิมไปตลอดชีวิต แต่ “ค่า” ของตัวแปรนั้น สามารถเปลี่ยนไปมาได้ตลอด ดังนั้นมันจึงเหลือแค่ ชื่อตัวแปร = ค่า; เท่านั้น

3.จงสร้างตัวแปรตามชื่อวัน และกำหนดชนิดของตัวแปรเป็น Days

- เฉลย var monday:Days; var tuesday:Days; var wednesday:Days; var thursday:Days; var friday:Days;
var saturday:Days; var sunday:Days;

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


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


By ครูปิ๊ก

คาบที่ 1 - AS 3.0 = แอคชั่นสคริปเวอร์ชั่น 3.0

แอคชั่นสคริป คือภาษาที่ใช้ในการควบคุมการทำงานของโปรแกรม Flash ซึ่งปัจจุบันมาถึงเวอร์ชั่น 3.0 แล้ว

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


อ๊อดดดดด (ออดเข้าเรียนดังขึ้น)

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

ทันใดนั้นเอง ก็มีเด็กชายคนหนึ่งยกมือขึ้น

ครูปิ๊ก: เอ้าว่าไง นาย ASบอย มีอะไรรึ

ASบอย: ครูคร้าบ ผมอยากทำเกมเฟซบุ๊คหาเงินใช้คร้าบ ครูสอนผมด้วยได้ไหมคร้าบ

ครูปิ๊ก: แหม่ เริ่มก็จั่วหัวอย่างนี้เลยเรอะ ได้สิ ครูจะสอนให้ ถึงแม้ว่าพวกเธอจะไม่รู้อะไรเลยก็ตามเถอะ ครูจะสอนให้พวกเธอทำเป็นเลยล่ะ เพียงแค่พวกเธอเข้าใจพื้นฐานก่อนจนมีความรู้แน่น พวกเธอจะทำเกมกี่เกมก็ได้ ดังนั้น ขอให้พวกเธอตั้งใจเรียนพื้นฐานกันให้ดีๆ แล้วเธอจะทำได้ตามที่ต้องการ

ASบอย: ครูคร้าบ ผมไม่รู้อะไรเลยนะครับ แค่รู้จักอุปกรณ์ในโปรแกรมแฟลชไม่กี่ชิ้นเองอ่า แล้วผมจะทำได้จริงเหรอ

ครูปิ๊ก: โถๆๆ เจ้าหนูAS ยังไม่ทันไรก็ถอดใจเสียแล้ว อีแบบนี้จะไปทำอะไรได้เล่า ใจปลาซิวจริงๆ ก็บอกแล้วไงว่าครูจะสอนจนพวกเธอมองภาพรวมออกทั้งหมด แล้วเธอจะรู้ว่า สร้างเกมมันไม่ยากอย่างที่คิด จริงๆ แล้ว ทำอย่างอื่นยังยากกว่าอีก เพียงแต่ พวกเธอต้องรู้จักทำจากเล็กไปใหญ่ นี่สำคัญมากนะ ทำจากเล็กไปใหญ่ จำไว้ ไม่มีใครสร้างกรุงโรมได้ในวันเดียวหรอก

ASบอย: อื้อหือ เห็นภาพเลยครับครู งั้นไม่รอแล้ว ครูสอนเลยดีกว่า

ครูปิ๊ก: ใจเย็นๆ ก่อน ทุกอย่างต้องมีขั้นตอน ทุกอย่างย่อมมีเสต็บของมัน จำไว้ อย่าข้ามเสต็บ พวกที่ก๊อบโค้ดเขามาแล้วเอามาอ่าน กะจะทำตาม สุดท้าย ทำอะไรไม่ได้เพราะทำข้ามเสต็บ ดังนั้น จงทำตามเสต็บ โดยครูจะวางเสต็บให้พวกเธอทีละอย่างเลยล่ะ ด้วยวิธีสอนแบบพิศดาร ที่เดียวที่แรกในประเทศ คือการสอนแบบ แปลอังกฤษเป็นไทย แล้วเวลาใช้ค่อยแปลไทยเป็นอังกฤษ

ASบอย: โอ้ มันคืออะไรครับ แปลอังกฤษเป็นไทย ไทยเป็นอังกฤษ นี่ผมกำลังจะเรียนแอคชั่นสคริปไม่ใช่หรือครับเนี่ย

ครูปิ๊ก: ใช่แล้ว เธอกำลังเรียนแอคชั่นสคริปเนี่ยแหละ ข้อดีของแอคชั่นสคริปคือ มันเป็นภาษาที่คล้ายภาษาอังกฤษ เราจึงสามารถแปลมันเป็นภาษาไทยได้ ส่วนรูปแบบการใช้แอคชั่นสคริปก็ตายตัว ดังนั้น ต่อให้จำรูปแบบไม่ได้ แต่ถ้ารู้ว่าต้องการทำอะไร เราก็สามารถไปค้นหาจากในเน็ตได้ไงล่ะ

ASบอย: ผมว่ามันแปลกๆ นะครับการเรียนการสอนแบบนี้ มันจะได้ผลหรือครับ

ครูปิ๊ก: ได้ไม่ได้ไม่รู้ แต่ข้างนอกครูสอนคิดค่าเรียนคนละ 8000 บาทต่อคอร์สละกัน แต่นี่สอนฟรี ว่าไง จะเรียนไหมเด็กๆ

ASบอย: ... เรียนสิคร้าบ แหม่ เริ่มพร้อมสอนเมื่อไหร่ก็ได้ตามสะดวกเลยนะครับครู

ครูปิ๊ก: ฮึๆ ก่อนเริ่มเรียน รู้ไว้เสียหน่อยละกันนะ ขนาด zynga บริษัทผลิตเกมส์เฟซบุ้คชื่อดัง เขายังเริ่มศึกษาแฟลชจาก 0 แล้วใช้เวลาไม่นาน (น่าจะประมาณ 1 – 3 ปี) ก็ทำเกมจนกระทั่งดังอยู่จนปัจจุบันนี้ ฝรั่งทำได้ เธอก็ทำได้ ไม่ต้องห่วง เอ้อ เอาล่ะ ก่อนอื่นเรามาสรุปหัวข้อประจำวันนี้กันก่อนเลยละกัน



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


โอเคนะครับทุกคน สำหรับวันนี้ก็พอแค่นี้ เจอกันคาบต่อไปนะครับ
By ครูปิ้ก