Funny with Action Script ที่มา ttp://korstudio.exteen.com/category/Tutorial

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

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

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

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

การเรียกใช้ 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 หยุดเล่นที่เฟรมปัจจันที่กำลังเล่นอยู่

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

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

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

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

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

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

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

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

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

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

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

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