งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "เรียนขำ ๆ แบบเข้าใจง่าย กับ Action ที่มา ttp://korstudio.exteen.com/category/Tutorial."— ใบสำเนางานนำเสนอ:

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

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

3

4 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 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

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

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

10 F Frame Label คือ รูปธงสีแดง ใช้แทนการเรียกหมายเลขเฟรมในการเขียนคำสั่ง Action ซึ่งกำหนดการตั้งชื่อที่ส่วนของ LABEL ใน Panel Properties L A

11 ศึกษาเพิ่มเติม

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

13

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

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

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

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

18


ดาวน์โหลด ppt เรียนขำ ๆ แบบเข้าใจง่าย กับ Action ที่มา ttp://korstudio.exteen.com/category/Tutorial.

งานนำเสนอที่คล้ายกัน


Ads by Google