คาบที่ 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 ได้ด้วย