Back to Top
sunshine
Untitled Document

   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


  สาระการเรียนรู้

1.  สร้างมูฟวี่คลิปเพื่อนำมาใช้งานได้
2.  สามารถสร้างปุ่มกดเพื่อนำมาใช้ในชิ้นงานได้

 



มาทำแบบทดสอบก่อนเรียนก่อนนะคะ

   แบบทดสอบ หน่วยที่ 3









Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   การสร้างมูฟวี่คลิป

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

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

  ตัวอย่างการสร้างมูฟวี่คลิป

            เราจะสร้างมูฟวี่คลิปดังตัวอย่างภาพข้างต้นเป็นตัวอักษรคำว่า “WOW” แล้วทำให้แสดงเป็นภาพเคลื่อนไหวโดยหมุนตัวอักษร 2 รอบก่อนจะหยุดนิ่ง
ให้เราคลิกปุ่ม New Symbol หรือที่พาเนล LIBRARY หรือกดคีย์ Ctrl + F8  หรือเลือกคำสั่ง lnsert->New Symbol… เลือกประเภทซิมบอลเป็น Movie clip และคลิก OK

 




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

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




       ในขณะที่สร้างมูฟวี่คลิปอยู่นั้นเราสามารถกดคีย์<Enter>หรือเลือกคำสั่ง Control->Play เพื่อทดสอบการเคลื่อนไหวของมูฟวี่คลิปได้เช่นเดียวกับการสร้างแอนิเมชั่นบนไทมไลน์ เมื่อสร้างมูฟวี่คลิปเสร็จแล้วให้เรากดที่ Scene 1 เพื่อกลับมายังหน้าจอทำงานปกติ มูฟวี่คลิปที่สร้างจะปรากฏเป็นซิมบอลในพาเนล LIBRARY สังเกตไอคอนที่แสดงว่าเป็นซิมบอลประเภทมูฟวี่คลิป















เมื่อคลิกที่ชื่อมูฟวี่คลิปจะมีภาพตัวอย่างแสดงให้เห็นมีปุ่ม Play และปุ่ม Stop ปรากฏให้เราลองดูตัวอย่างการเคลื่อนไหวได้

 

    การนำมูฟวี่คลิปมาใช้งานบนสเตจ

       เช่นเดียวกับการใช้ซิมบอลแบบอื่น เราสามารถคลิกลากมูฟวี่คลิปนี้เป็นอินสแตนซ์บนอินสแตนซ์บนสเตจได้ ซึ่งในตัวอย่างนี้เราจะวางมูฟวี่คลิปไว้ที่คีย์เฟรมแรกของชิ้นงาน แม้บนหน้าจอหลักจะไม่แสดงความเคลื่อนไหวของมูฟวี่คลิปให้เห็น แต่เราจะดูได้โดยกดคีย์ Ctrl + Enter  หรือเลือก Control->Test Movie เพื่อแปลงชิ้นงานเป็นมูฟวี่ทดลอง



จะปรากฎแอนิเมชั่นเมื่อเราทำการทดสอบ

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player




   ความสัมพันธ์ระหว่างช่วงเวลาของมูฟวี่คลิปกับไทมไลน์หลัก

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

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

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

 

 

       และนอกจากวิธีการใช้ActionScrip เราอาจสามารถใช้การสร้างเฟรมเปล่ามาหยุดการทำงานของมูฟวี่คลิปได้ แม้จะไม่เป็นที่นิยมมากนัก แต่ก็สามารถระบุเฟรมที่ต้องการกำหนดให้มูฟวี่คลิปหยุดการทำงานได้ดังตัวอย่าง มูฟวี่คลิป ที่เราสร้างนั้นมีทั้งหมด 24 เฟรม แต่ถ้าเราขยายจำนวนเฟรมที่จะแสดงมูฟวี่คลิปเพียง 5 เฟรม แล้วเพิ่มเฟรมเปล่าตามเข้าไป ผลที่ออกมาเราจะเห็นการแสดงมูฟวี่คลิป ในช่วงเฟรมที่ 1-5 เท่านั้น (มูฟวี่คลีปจะไม่แสดงภาพเคลื่อนไหวจนครบ 1  รอบเหมือนดังที่ผ่านมา)

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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

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

 

 

   เทคนิคการแปลงภาพเคลื่อนไหวที่สร้างไว้แล้วเป็นมูฟวี่คลิป

            ในกรณีที่เราต้องการนำภาพเคลื่อนไหวที่สร้างไว้บนไทมไลน์หลัก มาเป็นภาพเคลื่อนไหวในมูฟวี่คลิปเราต้องทำการคัดลอกเฟรม หรือเหตุการณ์ทั้งหมดที่เราต้องการนั้นโดยเลือกเฟรมทั้งหมดที่ต้องการ (โดยกดคีย์ <Shift>ค้างไว้) และคลิกขวาเลือกคำสั่ง Copy Frames เพื่อก๊อปปี้เฟรมทั้งหมดไว้ จากนั้นให้เราสร้างมูฟวี่คลิปใหม่โดยคลิกที่พาเนลLIBRARY หรือกดคีย์ Ctrl + F8  เมื่อเข้าสู่ไทมไลน์ของมูฟวี่คลิป ให้คลิกเลือกเฟรมแรกที่ต้องการนำเฟรมทั้งหมดที่คัดลอกไว้มาวาง แล้วคลิกขวาเลือก Paste Frames เพื่อทำการคัดลอกเฟรมทั้งหมดไว้ในไทมไลน์ของมูฟวี่คลิป




 

 


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   การสร้างปุ่มกด

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



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

  ตัวอย่างการสร้างปุ่มกด

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

ตัวอย่างสร้างปุ่มกด  (ในที่นี้เราจะไม่ทำการสร้างปุ่มกดใน Hit)

  1. คลิก New Symbol หรือกดคีย์ลัด<Ctrl>+<F8>หรือเลือกเมนู Insert->New Symbol…เพื่อสร้างซิมบอลใหม่ขึ้นมาในกรอบ Create New Symbol ให้เราคลิกเลือก Button เพื่อสร้างซิมบอลแบบปุ่มกด และคลิก OK



            2. โปรแกรม Flash จะเข้าสู่โหมดแก้ไขซิมบอล และแสดงไทมไลนของปุ่มกดที่ประกอบด้วย 4 เฟรมที่มี่ชื่อตามแต่ละสถานะของปุ่มกด โดยจะเริ่มต้นที่เฟรมแรกคือ Up จะถูกกำหนดไว้เป็นคีย์เฟรมเปล่า



           3. เราสามารถกำหนดหน้าตาของปุ่มกดในสถานะนี้ได้โดยการใช้เครื่องมือของโปรแกรม Flash วาดภาพขึ้นมา หรือจะลากอินสเตจของซิมบอลมาวางบนอินสเตจก็ได้ ดังตัวอย่างเราลากอินสแตนซ์รูปลูกบอลมาจากพาเนลLIBRARY และตั้งชื่อเลเยอร์นี้เป็น “Ball” จากนั้นเราจะคลิกขวาที่เลเยอร์ดังกล่าว เลือกคำสั่ง Insert->New Layer เพื่อสร้างอีกเลเยอร์ขึ้นมา ตั้งชื่อว่า “Text” และพิมพ์ข้อความ “Up”



4.    หลังจากนั้น เราจะทำการเพิ่มเฟรมว่างในเฟรม Down ของเลเยอร์Ball เฟื่อแสดงลูกบอลเป็น                                       
ภาพนิ่งตั้งแต่เฟรม Up-Down



5. ต่อไปเราจะกำหนดสถานะ Over ของปุ่มกด ให้เราเพิ่มคีย์เฟรมในเฟรมนี้โดยคลิกขวาที่เฟรม Over และเลือกคำสั่ง Insert Keyframeจากนั้นให้พิมพ์ข้อความ “Over” เพื่อใช้กับสถานะนี้



6.    ต่อไปเรากำหนดสถานะ Downของปุ่มกด ให้เราเพิ่มคีย์เฟรมในเฟรมนี้โดยคลิกขวาที่เฟรม
Downและเลือกคำสั่ง Insert Keyframe จากนั้นให้พิมพ์ข้อความ “Down” เพื่อใช้กับสถานะนี้



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

8. เมื่อเรากำหนดการทำงานให้กับปุ่มเสร็จเรียบร้อยแล้ว ให้เราคลิกที่ Scene 1 เพื่อกลับมายังหน้าจอทำงานปกติ ปุ่มที่สร้างจะปรากฏเป็นซิมบอลในพาเนลLIBRARY โดยสังเกตไอคอลที่แสดงว่าเป็นซิมบอลประเภทปุ่มกด



   การนำปุ่มที่สร้างมาใช้บนสเตจ

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



แต่ถ้าเราต้องการทดสอบการทำงานของปุ่มกดแต่ละสถานะที่ได้กำหนดไว้ ให้เลือกคำสั่ง Control->Enable Buttons ได้



       ในขณะที่เราให้ปุ่มกดทำงานได้บนสเตจ หากเราต้องการเลือกปุ่มกดนี้เพื่อทำการแก้ไขใดๆ จะคลิกเลือกที่ปุ่มกดไม่ได้ เพราะปุ่มกดจะตอบสนองตามสถานะต่างๆที่เราได้กำหนดไว้ แต่จะต้องใช้วิธีลากเมาส์ให้ครอบคลุมทุกบริเวณของปุ่มแล้วคลิกปุ่มขวา เลือกคำสั่งจากเมนูลัดแทน (เมื่อใดที่ต้องการกลับไปทำงานแบบเดิมก็ให้เลือกคำสั่ง Enable Buttons นี้อีกครั้งหนึ่งเพื่อทำการยกเลิก)   อีกวิธีในการทดสอบการทำงานของปุ่มกดให้กดคีย์  Ctrl + Enter  หรือเลือก Control->Test Movie เพื่อแปลงชิ้นงานเป็นมูฟวี่ทดสอบ

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



  ปรับแต่งปุ่มเพิ่มเติม

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

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



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



ผลลัพธ์สร้างเอนิเมชั่นให้ปุ่ม เมื่อเอาเมาส์วางบนปุ่มจะเกิดภาพเคลื่อนไหว



 


  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player