Funny with Action Script

1. เรียนขำ ๆ แบบเข้าใจง่ายกับ Action ที่มา ttp://korstudio.exteen.com/category/Tutorial Funny with Action Script

2. AddEventListenerคืออะไร ....อะ? • Event หรือ เหตุการณ์ คือ เหตุการณ์ หรือสิ่งที่(คาดว่า)จะเกิดขึ้น..ไง • Event Listener หรือ ยาม คือ ผู้เฝ้ารอ และคอยจับดูเหตุการณ์ที่กำหนด เวลาจะจ้างยามมาเฝ้าดูอะไรให้เรา เราต้องมีการ "ว่าจ้าง” คือ addEventListener • addEventListenerคือ จ้างยามให้เฝ้าเหตุการณ์ ที่วัตถุๆ ถ้าเกิดอะไรขึ้น.. ก็ทำตามคำสั่งที่กำหนดไว้ วิธีการเขียนคำสั่ง • ชื่อวัตถุ.addEventListener(ชื่อเหตุการณ์, รายการคำสั่ง หรือ Listener); เช่น mc.addEventListener(MouseEvent.CLICK, mouseClick); แปลว่า mc ถูกเฝ้ารอดูเหตุการณ์การเกิดเหตุการณ์ MouseEvent.CLICKหากเกิดเหตุการณ์ดังกล่าวขึ้น.. ให้ทำตามคำสั่งที่เขียนไว้ใน mouseClickสำหรับ MouseEvent.CLICK คือ รูปแบบของเหตุการณ์ ในที่นี้หมายถึง "เมื่อมีการคลิก" เกิดขึ้น

3. ตัวอย่าง การเรียกใช้คำสั่ง MouseEvent.CLICK

4. ตัวอย่าง การเรียกใช้คำสั่ง MouseEvent.CLICK function goPlay(e) { gotoAndPlay(2) } btnPlay.addEventListener(MouseEvent.CLICK,goPlay); หมายความว่า: เฝ้าดูเหตุการณ์การคลิกเม้าส์ที่ ปุ่มชื่อ btnถ้ามีการคลิกที่ปุ่มนี้เมื่อไร ให้ทำตามคำสั่ง ที่กำหนดไว้ใน function ชื่อgoPlay

5. การเขียนคำสั่งควบคุมปุ่มอื่น ๆ stop(); function goClick(e) { gotoAndPlay(2); } function goStop(e) { gotoAndStop(26); } function goPause(e) { stop(); } function goBack(e) { prevFrame(); } function goNext(e) { nextFrame(); }

6. การเรียกใช้ Function คำสั่งควบคุมปุ่มอื่น ๆ btnPlay.addEventListener(MouseEvent.CLICK,goPlay); เรียกใช้คำสั่งในฟังก์ชัน goPlay ให้ Animation เล่น btnStop.addEventListener(MouseEvent.CLICK,goStop); เรียกใช้คำสั่งในฟังก์ชัน goStop ให้ Animation หยุดเล่นที่เฟรมสุดท้าย btnNext.addEventListener(MouseEvent.CLICK,goNext); เรียกใช้คำสั่งในฟังก์ชัน goNext ให้ Animation เล่นที่เฟรมถัดไป btnBack.addEventListener(MouseEvent.CLICK,goBack); เรียกใช้คำสั่งในฟังก์ชัน goBack ให้ Animation เล่นที่เฟรมก่อนหน้านี้ btnPause.addEventListener(MouseEvent.CLICK,goPause); เรียกใช้คำสั่งในฟังก์ชัน goPause ให้ Animation หยุดเล่นที่เฟรมปัจจันที่กำลังเล่นอยู่

7. การจัดการ Layer เพื่อเตรียมส่วนประกอบต่าง ๆ

8. เรื่องของ FRAME เฟรม (Frame)คือส่วนที่ทำงานเหมือนกับเฟรมที่ประกอบกันเป็นภาพยนตร์ โดยเมื่อมีการนำเฟรมเหล่านี้มาแสดงอย่างต่อเนื่องก็จะทำให้เกิดภาพเคลื่อนไหว Frame จะแสดงผลทีละเฟรม จุดเริ่มต้น (Playhead) ที่เป็นเส้นสีแดงบอกตำแหน่งว่ากำลังทำงานอยู่ที่เฟรมใด เฟรมแบ่งออกได้ 3 อย่างคือ1. Frame คือเฟรมที่ไม่มีการเปลี่ยนแปลงของวัตถุ (ภาพ) 2. Keyframeคือ เฟรมที่มีวัตถุอยู่ในนั้น (มีจุดสีดำ) มีการเปลี่ยนแปลง3. Blank Keyframeคือเฟรมเปล่าๆ (มีวงกลมสีขาว)

9. เรื่องของ FRAME การแสดงสถานะบน Time Line1. Current frame  เป็นช่องที่บอกว่าขณะนี้ Playheadแสดง Frame อยู่ที่ช่องเท่าไร 2. Frame Rate เป็นช่องที่บอกว่าขณะนี้ Playheadวิ่งด้วยความเร็วกี่ Frame ต่อวินาที 3. Elapsed time  เป็นช่องทีบอกว่าเมื่อ Playheadวิ่งมาถึง Frame นี้จะใช้เวลาเท่าไร 1 2 3 คีย์ลัดเกี่ยวกับเฟรม 1. F5 = สร้าง หรือ เพิ่ม Frame 2. F6 = สร้าง หรือเพิ่ม Keyframe3. F7 = สร้าง Blank Keyframe

10. เรื่องของ FRAME Frame Label คือ รูปธงสีแดง ใช้แทนการเรียกหมายเลขเฟรมในการเขียนคำสั่ง Action ซึ่งกำหนดการตั้งชื่อที่ส่วนของ LABEL ใน Panel Properties A F L http://202.143.142.151/flash/chap7/topic5/index.html

11. แบบฝึกหัดเรื่องการใช้งาน Frame Label ศึกษาเพิ่มเติม http://202.143.142.151/flash/chap7/topic5/index.html

12. การอ้างอิงตำแหน่งของวัตถุการอ้างอิงตำแหน่งของวัตถุ หน้าที่ของสเตจเป็นพื้นที่ในการแสดงผลลัพธ์ ฉะนั้นวัตถุที่อยู่นอก Stage จะมองไม่ ยกเว้นว่าเมื่อเรานำ swfไปวางใน html ซึ่งกำหนดขนาดที่ใหญ่กว่า แต่ก็ขึ้นอยู่กับตอน publish ว่าจะให้ swfมีการปรับสเกลหรือขยายตามหรือไม่ พิกัดตำแหน่งของสเตจตำแหน่งของวัตถุบน Stage ในแนวแกน x และ y เริ่มต้นคือจุด 0,0 โดยยึด จากตำแหน่งมุมบนซ้ายของ Stage เป็นหลัก  เหมือนกับโปรแกรมทั่วๆไป โดยจะมีค่าเพิ่มขึ้นไปทางขวาในแนวแกน x และเพิ่มขึ้นจากบนลงล่างในแนวแกน y

13. การอ้างอิงตำแหน่งของวัตถุการอ้างอิงตำแหน่งของวัตถุ

14. ประเภทของ Symbol ครูเรียกว่า ซิมโบ๊ะ...ขำขำ ประเภทของ Symbol Movie Clip สำหรับทำ Animation Button สำหรับทำปุ่ม Graphic สำหรับนำกราฟิกมาใช้งานเป็นภาพนิ่ง หรือ Timeline ของ Animation จะเป็นตัวเดียวกับScene ความยาวเท่ากัน วิธีการสร้าง 1. คลิกที่เมนู Insert->New Symbol…

15. Button Symbol การสร้าง Symbol ประเภท Button (ปุ่มกด) จะได้ Timeline สำหรับสร้างปุ่มดังนี้ • Up สี/รูปหน้าปุ่ม • Over เมื่อ Mouse อยู่เหนือปุ่ม • Down เมื่อกด Mouse • Hit กำหนดของเขตการคลิก Mouse ที่เฟรม Hit เป็นการกำหนดขอบเขตพื้นที่รับค่าให้กับปุ่ม (ปกติถ้าไม่กำหนดพื้นที่ที่ Hit เวลาเอา Mouse ไปชี้ที่ระหว่างกลางข้อความกับรูปด้านหน้า ถ้าไม่มีสีพื้นอยู่จะไม่สามารถกดได้จึงต้องแก้ไขด้วยวิธีการกำหนดพื้นที่ที่ Hit)

16. Button Symbol ตัวอย่าง Over UP Hit Down

17. ตัวอย่างการสร้างปุ่มที่มี Animation 1 ที่ตำแหน่ง Up - วาดภาพที่ต้องการ แสดงบนหน้าจอ ที่ตำแหน่งHit - ทำเช่นเดียวกัน หรือเปลี่ยนภาพก็ได้ ตามความต้องการ 3 2 ที่ตำแหน่ง Over - Convert ภาพเป็น MovieClip - สร้าง Animation

18. การสร้างAnimation ที่ปุ่ม