SlideShare a Scribd company logo
1 of 21
Download to read offline
แอนิเมชัน (Animation) เป็นการสร้างออบเจ็กต์ให้มีการเคลื่อนไหว มักนิยมใช้ประกอบในชิ้นงาน
ทั่วไป ไม่ว่าจะเป็นเว็บเพจ, เกม , หรือเอกสารสมัยใหม่ โปรแกรม Flash ที่เรากาลังใช้อยู่นี้ เป็นโปรแกรมที่ดี
โปรแกรมหนึ่งที่สามารถสร้างงานแอนิเมชันได้อย่างง่ายดาย และนาไปใช้กันอย่างแพร่หลาย
          สาหรับในเรื่องนี้เราจะได้เรียนรู้ขั้นตอนการสร้างแอนิเมชันในรูปแบบต่างๆ ทั้งหมด เช่น หากต้องการ
นาออบเจ็กต์หรือภาพหลายๆ ภาพมาเรียงต่อกันเป็นผลงานแอนิเมชันก็สามารถทาได้ด้วย Frame by Frame
เมื่อต้องการสร้างแอนิเมชันให้มีการเคลื่อนไหวสามารถทาได้ด้วย Classic Tweening หากมีออบเจ็กต์ตั้งแต่ 2
ชิ้นและต้องการแปลงจากชิ้นหนึ่งเป็นอีกชิ้นหนึ่งให้ใช้ Tweening Shape หรือต้องการสร้างแอนิเมชันให้
เคลื่อนไหวไปตามเส้นไกด์สามารถทาได้ด้วย Guide Layer และการสร้างแอนิเมชันในลักษณะ Mask Layer
ใช้ในกรณีเมื่อต้องการสร้างผลงานแอนิเมชันในลักษณะเหมือนมีแสงไฟกาลังหมุนและส่องลงบนภาพ




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

                                                                     เฟรม 2
                                       เฟรม 4




           เฟรม 6
                                                                                    เฟรม 1
                              เฟรม 5                   เฟรม 3
                 1. เลือกที่เลเยอร์ที่จะสร้างภาพเคลื่อนไหวแล้วคลิกที่เฟรมในเลเยอร์นั้นที่จะเริ่มสร้างในที่นี้
ให้สร้างไฟล์ใหม่ และคลิกที่เฟรมแรกของ Layer 1



โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7                หน้า 123
2. หากเฟรมนั้นยังไม่เป็นคีย์เฟรม ให้เลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe




        3. สร้างภาพแรกของการเคลื่อนไหวขึ้นในเฟรมนั้น โดยอาจวาดขึ้นเองหรือนาจากไฟล์อื่นเข้ามาใช้
ด้วยเมนูคาสั่ง File เลือกคาสั่ง Import ก็ได้
        4. คลิกที่เฟรมถัดไป แล้วเลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe
        5. สร้างภาพถัดไปของการเคลื่อนไหวหากนาเข้าจากไฟล์ อย่าลืมลบรูปเก่าออกด้วย
        6. ทาขั้นตอนที่ 4 และ 5 ซ้าจนครบทุกเฟรมของการเคลื่อนไหว




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7     หน้า 124
เลือกเมนูคาสั่ง Control เลือกคาสั่ง Play เพื่อดูผล และก็บันทึกภาพเก็บไว้ในชื่อ Butterfly



        Onion skinning เป็นส่วนที่ช่วยให้เราสามารถเห็นภาพในเฟรมก่อนหน้าหรือหลัง เฟรมขณะนั้น หรือ
ทุกๆ เฟรมพร้อมๆ กันได้ โดยไม่ต้องไปเลือกเฟรมกลับไปกลับมา ทาให้สามารถปรับแต่งภาพในแต่ละเฟรมให้
มีการเคลื่อนไหวอย่างนุ่มนวลได้อย่างสะดวก
        ส่วนของ Onion skinning นี้จะอยู่ในตอนล่างของพาเนล Timeline




                                                                            Modify Onion
                               Onion Skin         Edit Multiple Frames      Markers
                                             Onion Skin Outlines
       การขอดูหลายๆ เฟรมพร้อมกัน
       1. คลิกที่เฟรมหลักที่จะดู
       2. คลิกที่ปุ่ม Onion Skin
       โปรแกรมจะแสดงภาพในเฟรมก่อนหน้าเฟรมนั้นให้ หากต้องปรับจานวนเฟรมที่จะดู ให้
ลากส่วนของ Start Onion Skin และ End Onion Skin marker ซึ่งอยู่ในแถบหัวของพาเนล Timeline

โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7     หน้า 125
Start              Stop
                          Onion Skin
                          Marker

       การแสดงกรอบเฟรมแทนภาพ ให้คลิกที่ปุ่ม Onion Skin Outlines หากต้องการปรับตาแหน่ง
ภาพในเฟรม ให้ลากกรอบเฟรมนั้น หากต้องการแก้ไขภาพในเฟรมใดๆ ก็ได้ ให้ค ลิกที่ Edit Multiple
Frames




         Onion Skin
         Outlines




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7   หน้า 126
Edit Multiple Frames




                                                                   คลิกทีเฟรมที่จะแก้ไขแล้ว
                                                                          ่
                                                                   คลิกปุ่ม Edit




คลิกที่ปุ่ม   Modify Onion Marker แล้วลักษณะการแสดงผลจากเมนู
                                          แสดง Onion Skin Marker ในแถบหัวของพาเนล Timeline ตลอด
                                          ไม่ว่าจะเลือกใช้ Onion Skinning หรือไม่ก็ตาม
                                          ล็อคไม่ให้ Onion Skin Marker เลื่อนตามเฟรมที่เลือก
                                          แสดง 2 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก
                                          แสดง 5 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก
                                          แสดงทุกเฟรม




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7         หน้า 127
การสร้างแอนิเมชันในลักษณะ Classic Motion Tweening คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์เพียง
ชิ้นเดียว จากนั้นจึงสั่งให้มีการเคลื่อนไหวและการเปลี่ยนแปลงเกิดขึ้นมาที่ออบเจ็กต์นั้น
      ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิ เมชันในลักษณะ Classic Tweening คือ ให้รถมีการแล่นมาถึง
เฟรมที่ 5 และมีขนาดใหญ่ขึ้น จากนั้นในเฟรมที่ 10 ให้จานบินคันนี้มีขนาดเล็กลง ถูกหมุนกลับด้าน และมีสี
ลดลงไปจากเดิมสาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้

        1. สร้างออบเจ็กต์ (รูปรถ) ไว้ในเฟรมที่ 1
        2. คลิกขวาเฟรมที่ 5 และเลือกคาสั่ง Insert Keyframe เฟรมทั้งหมดจะมีความยาวจานวน 5 เฟรม
        3. คลิกขวาเฟรมที่ 10 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหวจนถึงเฟรม
           ที่ 10




                                                              2.สร้างออบเจ็กต์ไว้ในเฟรมที่ 10
                                                              และ เลือกคาสั่ง Insert keyframe

                                                              1.สร้างออบเจ็กต์ไว้ในเฟรมที่ 1




     3.คลิกเมาส์ขวาเฟรมที่ 10 และเลือก
        คาสั่ง Create Classic Tween




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7          หน้า 128
4. เลื่อนวัตถุลงมาข้างล่างและคลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์
            5. ดรากส์เมาส์ทาการขยายขนาดตามต้องการ
            6. คลิกเมาส์ขวาเฟรมที่ 15 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน
               เฟรมที่ 15

4.คลิกปุ่ม Free Transform Tool




  5.ดรากส์เมาส์ทาการขยายขนาด




                                                           6.คลิกเมาส์ขวาเฟรมที่ 15 และ เลือก
                                                           คาสั่ง Insert Keyframe




            7. ดรากส์เมาส์ทาการย่อขนาดให้เล็กลงไปจากเดิม
            8. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Transform เลือกคาสั่ง Flip Horizontal จากนั้นออบเจ็กต์
               จะถูกหมุนกลับด้านไป
            9. คลิกหน้าต่างคาสั่ง Properties

   โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7       หน้า 129
10. ที่ Color ให้คลิกเลือก Alpha จากนั้นออบเจ็กต์ จะมีสีลดลงไปจากเดิม
        11. คลิกขวาที่ keyframe ที่ 15 เลือก Create Classic Tween




                                                                         8.คลิกเมนู Modify > Transform
                                                                         > Flip Horizontal




         7.ดรากส์เมาส์ทาการย่อขนาด


                                                                             9.คลิกหน้าต่าง Properties




                                                                          ปรับค่า Alpha ตามต้องการ



                                                                             10.คลิกเลือก Alpha




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7            หน้า 130
จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter>



     การสร้างแอนิเมชันในลักษณะ Tweening Shape คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์ หรือ
ภาพ 2 ชิ้นโดยชิ้นแรกจะวางอยู่ที่ตาแหน่งเริ่มต้นของเฟรม และอีกชิ้นหนึ่งจะวางอยู่ที่ตาแหน่งสุดท้ายของ
เฟรม จากนั้นจึงสั่งให้มีการ รวมออบเจ็กต์ หรือภาพทั้ง 2 ชิ้นเข้าด้วยกัน และเมื่อทาการแสดงผลภาพหนึ่งก็จะ
แปลงกลายเป็นอีกภาพหนึ่ง
     ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Tweening Shape โดยเริ่มแรกจะนา
ออบเจ็กต์ที่ 1 ไว้เฟรมที่ 1 และทาการ Insert Keyframe เพื่อวางออบเจ็กต์ที่ 2 ไว้ในเฟรมที่ 10 จากนั้นจะ
รวมออบเจ็กต์ทั้ง 2 เข้าด้วยกัน เมื่อทาการเล่นแสดงแอนิเมชัน จากออบเจ็กต์ที่ 1 จะกลายเป็นออบเจ็กต์ที่ 2
ให้โดยอัตโนมัติสาหรับขั้นตอน การทางานสามารถทาได้ดังนี้
          1. สร้างออบเจ็กต์ ไว้ในเฟรมที่ 1
          2. คลิกเมาส์ขวาเฟรมที่ 10 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน
              เฟรมที่ 10
          3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจากรูปภาพที่อยู่ใน เฟรมที่ 1




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7        หน้า 131
1.สร้างออบเจ็กต์ไว้ในเหรมที่ 1


                                                          2.คลิกเมาส์ขวาเฟรมที่ 10 และ
                                                            เลือกคาสั่ง Insert Keyframe




                           3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจาก
                           รูปภาพเดิม
        4. คลิกหน้าต่างคาสั่ง Properties คลิกที่ Tween ให้คลิกเลือก Shape จากนั้นเมื่อทาการแสดงผล
           ออบเจ็กต์ที่ 1 จะถูกรวมและแปลงเป็นออบเจ็กต์ที่ 2 ให้โดยอัตโนมัติ




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7          หน้า 132
5.คลิกเลือก Create shape tween


จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter>



                                                    การแสดงผลออบเจ็กต์ที่ 1
                                                    จะถูกรวมและแปลงเป็น
                                                    ออบเจ็กต์ที่ 2




     การสร้างแอนิเมชันในลักษณะ Guide Layer คือ การสร้างแอนิเมชันโดยให้ออบเจ็กต์
เปลี่ยนแปลงเคลื่อนที่ไปตามเส้นไกด์ สาหรับขั้นตอนการสร้างแอนิเมชันในลักษณะนี้ จะต้องทาการคลิกปุ่ม
Add Classic Guide ที่ไทม์ไลน์จากนั้นสร้างเส้นไกด์ที่ใช้ในการควบคุมทิศทางการวิ่งของออบเจ็กต์ขึ้นมา
     ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Guide Layer คือ ให้ใบไม้ไป
ตามเส้น Guide ทีได้วาดไว้
                   ่

โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7   หน้า 133
1. สร้างออบเจ็กต์ ไว้ในเลเยอร์ที่ 2
        2. คลิกเมาส์ขวาเฟรมที่ 20 และเลือกคาสั่ง Insert keyframe เฟรมทั้งหมดจะมีความยาวจานวน
           20 เฟรม




                                                              2.คลิกเมาส์ขวาเลือกคาสั่ง
                                                              Insert keyframe
        1.สร้ างออบเจ็กต์




        3. คลิกเมาส์ขวาที่เฟรมที่ 20 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหว
           จนถึงเฟรมที่ 20

        4. คลิกขวาที่ เลเยอร์ 2 เลือกคาสั่ง Add Classic Guide ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่
           ขึ้นมาจานวน 1 เลเยอร์ สามารถสังเกตได้ว่า Layer 2 ได้ถอยเยื้องเข้าไป 1 แท็บ ซึ่งหมายถึง
           Layer 2 ได้ถูกไกด์เรียบร้อยแล้ว

โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7     หน้า 134
5. คลิกปุ่ม Pencil Tool ที่ทูลบ็อกซ์
               6. ดรากส์เมาส์สร้างเส้นพาธที่ต้องการให้เป็นแนววิ่งของออบเจ็กต์


          4.คลิกขวาเลือกคาสั่ง Add
          Classic Guide




  5.คลิกปุ่ม Pencil Tool


6.ดรากส์เมาส์สร้างเส้นพาธ




               7. คลิกปุ่ม Arrow Tool        ที่ทูลบ็อกซ์
               8. ดรากส์เมาส์ย้ายออบเจ็กต์มาไว้ยังตาแหน่งสุดท้ายของเส้นไกด์




      โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7   หน้า 135
7.คลิกปุ่ม Arrow
Tool




                                            9.ดรากส์เมาส์ย้ายออบเจ็กต์




                  จากตัวอย่างที่ผ่านมาเมื่อทดสอบดูการเคลื่อนที่ของออบเจ็กต์ทั้งหมด จะสังเกตเห็นว่าออบเจ็กต์มีการ
        เคลื่อนที่ไปตามเส้นไกด์ในทิศทางแนว 180 องศา ซึ่งทาให้ดูไม่สมจริงเท่าที่ควร
                  ดังนั้นคุณสามารถสั่งคาสั่ง Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้างขึ้น
        จากนั้นจึงทาการหมุนออบเจ็กต์ให้เอียงไปตามทิศทางการเคลื่อนที่ของเส้นพาธ และเมื่อทาการทดสอบการ
        แสดงผลแอนิเมชัน ผลงานที่สร้างขึ้นก็จะมีการเคลื่อนที่ได้อย่างสมจริงมากขึ้น
                  1. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฎเครื่องหมายถูก
                  2. คลิกเฟรมที่ 1 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งแรกสุด ขณะที่อยู่ในเลเยอร์ 2
                  3. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง
                       ขึ้น
                   4. คลิกปุ่ม Free Transform Tool        ที่ทูลบ็อกซ์
                   5. ดรากส์เมาส์หมุนออบเจ็กต์ไปในทิศทางเดียวกับเส้นพาธ




        โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7          หน้า 136
คลิกปุ่ม Free Transform Tool

      ดรากส์เมาส์หมุนออบเจ็กต์



                                                                                       คลิกให้ปรากฏเครื่องหมายถูก
                                                                                       ที่ Orient to path
     คลิกเฟรมที่ 1 ของ Layer 2

                 6. คลิกเฟรมที่ 15 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งสุดท้ายขณะที่อยู่ในเลเยอร์ 1
                 7. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง
                    ขึ้น
                 8. คลิกปุ่ม Free Transform Tool           ที่ทูล บ็อกซ์ดรากส์ เมาส์ ห มุนออบเจ็กต์ไปในทิศทาง
                    เดียวกันกับเส้นพาธ




                    คลิกปุ่ม Free Transform Tool




                                                                               คลิกให้ปรากฏเครื่องหมายถูก
                  ดรากส์เมาส์หมุนออบเจ็กต์
                                                                               ที่ Orient to path




                                 คลิกเฟรมที่ 20 ของ Layer 2
        โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7              หน้า 137
จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter>




         การสร้างแอนิเมชันในลักษณะ Mask Layer คือ การสร้างแอนิเมชันโดยแสดงภาพภายใน
ขอบเขตที่กาหนดไว้ซึ่งมีลักษณะเหมือนกับการส่องไฟลงบนเลเยอร์ที่ได้ถูก Mask ไว้
         ดังนั้นจึงต้องมีอย่างน้อย 2 เลเยอร์ เลเยอร์หนึ่งไว้สาหรับใส่ข้อมูลที่จะถูก Mask เช่น ออบเจ็กต์ ภาพ
ซึงสามารถเห็นข้อมูลที่อยู่ในเลเยอร์นี้ได้ ก็ต่อเมื่อได้มีการนาข้อมูลของอีก เลเยอร์หนึ่งจะทาการ Mask มาวาง
  ่
ซ้อนทับหรือเคลื่อนที่ผ่าน จึงสามารถเปรียบได้ว่าเลเยอร์ที่จะทาการ Mask นี้ เป็นเสมือนลาแสงไฟที่ส่องลงไป
ยังข้อมูลของเลเยอร์ที่จะถูก Mask นั่นเอง
         ตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Mask Layer โดยเลเยอร์ ที่ 1 ที่จะถูก Mask ได้
มีข้อมูลเป็นรูปวงกลมก็จะเคลื่อนส่องผ่านไปที่รูปภาพ สาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้
         1. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Document จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document
               Properties ขึ้นมา
         2. ที่ Background Color ให้คลิกเลือกสีเทา จากนั้นที่ฉากหลังจะมีพื้นเป็นสีดา
         3. คลิกปุ่ม OK เพื่อยืนยันคาสั่ง
         4.




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7            หน้า 138
5.
                                                            คลิกเมนู Modify > Document




                                                                        คลิกปุ่ม OK


                                                       คลิกเลือกสีเทา




          6. คลิกเมนูคาสั่ง File เลือกคาสั่ง Import แล้วเลือก Import to stage เพื่อนาไฟล์ภาพ ที่ต้องการ
             เข้ามา
          7. คลิกเมาส์ขวาเฟรมที่ 30 และเลือกคาสั่ง Insert Frame เฟรมทั้งหมดจะมีความยาวจานวน 30
             เฟรม




คลิกเมนู File > Import >Import to Stage




  โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7        หน้า 139
คลิกเมาส์ขวาเฟรมที่ 30 และ
เลือกคาสั่ง Insert Frame




         8. คลิกปุ่ม Insert Layer       ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่ ขึ้นมาจานวน 1 เลเยอร์
         9. สร้างออบเจ็กต์ ไว้ใน Layer 2
         10. คลิกเมาส์ขวาเฟรมที่ 30 เลือก Insert Keyframe และเลือกคาสั่ง Create Classic Tween เพื่อ
             สร้างการเคลื่อนไหวจนถึงเฟรมที่ 30
         11. ดรากส์เมาส์ย้ายออบเจ็กต์ไปอีกด้านหนึ่งของออบเจ็กต์ที่อยู่ใน Layer 1




โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7      หน้า 140
สร้างออบเจ็กต์ไว้ใน Layer 2



    คลิกเมาส์ขวาเฟรมที่ 30
    เลือก Insert Keyframe
    และเลือกคาสั่ง Create
    Classic Tween




                                                                    คลิกปุ่ม Insert Layer




                                                                  ดรากส์เมาส์ย้ายออบเจ็กต์




         12. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฏเครื่องหมายถูก
         13. คลิกเฟรมไหนก็ได้ระหว่างเฟรมที่ 1 ถึง เฟรม 30 ของ Layer 2 เพื่อเลือกออบเจ็กต์ ตาแหน่ง
             แรกสุดที่อยู่ในเลเยอร์ 2
โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7       หน้า 141
14. ที่ Rotate ให้คลิกเลือก CW เพื่อให้ลักษณะการหมุนเป็นแบบตามเข็มนาฬิกา
             15. พิมพ์จานวนที่ต้องการให้มีการหมุน เป็น 3 Times ออบเจ็กต์จะถูกหมุนตามเข็มนาฬิกาไปเป็น
                 จานวน 3 รอบ
             16. คลิกเมาส์ขวาที่เลเยอร์ 2 เลือกคาสั่ง Mask จากนั้นออบเจ็กต์ในเลเยอร์ที่ 1 ที่ได้ถูก Mask ไว้อยู่
                 จะปรากฏขึ้นมาเฉพาะบริเวณที่ออบเจ็กต์ ในเลเยอร์ 2 วางซ้อนทับไว้อยู่เท่านั้น




คลิกเฟรมไหนก็ได้ของ Layer 2



                                               คลิกเลือก CW
                                                                         พิมพ์จานวนที่ต้องการให้มีการหมุน




                                                                            คลิกเมาส์ขวาที่เลเยอร์ 2
                                                                            เลือกคาสั่ง Mask




     จากนั้นทดสอบภาพแอนิเมชันที่เรา Mask Layer ขึ้นมาโดยการ กด <Ctrl+Enter>




     โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7                 หน้า 142
โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7   หน้า 143

More Related Content

What's hot

What's hot (13)

Flash8
Flash8Flash8
Flash8
 
Lesson3
Lesson3Lesson3
Lesson3
 
Lesson7
Lesson7Lesson7
Lesson7
 
การทำภาพ Animation
การทำภาพ Animationการทำภาพ Animation
การทำภาพ Animation
 
Lesson2
Lesson2Lesson2
Lesson2
 
คู่มือFlash CS3
คู่มือFlash CS3คู่มือFlash CS3
คู่มือFlash CS3
 
Hanfbookflash8
Hanfbookflash8Hanfbookflash8
Hanfbookflash8
 
การใส่รูปภาพและการประดิษฐ์ตัวอักษร
การใส่รูปภาพและการประดิษฐ์ตัวอักษรการใส่รูปภาพและการประดิษฐ์ตัวอักษร
การใส่รูปภาพและการประดิษฐ์ตัวอักษร
 
Lesson8
Lesson8Lesson8
Lesson8
 
คู่มือ SketchUp
คู่มือ SketchUpคู่มือ SketchUp
คู่มือ SketchUp
 
Dream cs3
Dream cs3Dream cs3
Dream cs3
 
PowerPoint 2003
PowerPoint 2003PowerPoint 2003
PowerPoint 2003
 
Lesson6
Lesson6Lesson6
Lesson6
 

Similar to Lesson7

เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานเครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานกชพร มณีพงษ์
 
ใบความรู้ที่ 1
ใบความรู้ที่ 1ใบความรู้ที่ 1
ใบความรู้ที่ 1Khanittha Bumrunglan
 
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layoutการจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ LayoutKhon Kaen University
 
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหวใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหวคีตะบลู รักคำภีร์
 
รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6Khon Kaen University
 
ใบงานที่ 28 การทำ wallpaper แนวสีสัน
ใบงานที่ 28 การทำ wallpaper แนวสีสันใบงานที่ 28 การทำ wallpaper แนวสีสัน
ใบงานที่ 28 การทำ wallpaper แนวสีสันSuda Sangtong
 
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0usanee31
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007Wee Jay
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007Wee Jay
 

Similar to Lesson7 (20)

Flash7
Flash7Flash7
Flash7
 
Flash6
Flash6Flash6
Flash6
 
Flash8
Flash8Flash8
Flash8
 
Lesson7
Lesson7Lesson7
Lesson7
 
Namo webeditor 6
Namo webeditor 6Namo webeditor 6
Namo webeditor 6
 
Lesson6
Lesson6Lesson6
Lesson6
 
Lesson6
Lesson6Lesson6
Lesson6
 
เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานเครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐาน
 
Lesson8
Lesson8Lesson8
Lesson8
 
คู่มือFlash
คู่มือFlashคู่มือFlash
คู่มือFlash
 
ใบความรู้ที่ 1
ใบความรู้ที่ 1ใบความรู้ที่ 1
ใบความรู้ที่ 1
 
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layoutการจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout
 
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหวใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
 
Lesson3
Lesson3Lesson3
Lesson3
 
animation-gif-by-firework
animation-gif-by-fireworkanimation-gif-by-firework
animation-gif-by-firework
 
รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6รู้จักโปรแกรม Adobe Photoshop CS6
รู้จักโปรแกรม Adobe Photoshop CS6
 
ใบงานที่ 28 การทำ wallpaper แนวสีสัน
ใบงานที่ 28 การทำ wallpaper แนวสีสันใบงานที่ 28 การทำ wallpaper แนวสีสัน
ใบงานที่ 28 การทำ wallpaper แนวสีสัน
 
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007
 

More from Augusts Programmer

การสร้างตัว Preload
การสร้างตัว Preloadการสร้างตัว Preload
การสร้างตัว PreloadAugusts Programmer
 
การเปลี่ยนสีวัตถุ
การเปลี่ยนสีวัตถุการเปลี่ยนสีวัตถุ
การเปลี่ยนสีวัตถุAugusts Programmer
 
การเปลี่ยนรูปทรงโดยใช้ Motion shape
การเปลี่ยนรูปทรงโดยใช้ Motion shapeการเปลี่ยนรูปทรงโดยใช้ Motion shape
การเปลี่ยนรูปทรงโดยใช้ Motion shapeAugusts Programmer
 
การเปลี่ยนขนาดเส้นขอบของวัตถุ
การเปลี่ยนขนาดเส้นขอบของวัตถุการเปลี่ยนขนาดเส้นขอบของวัตถุ
การเปลี่ยนขนาดเส้นขอบของวัตถุAugusts Programmer
 
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยมการทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยมAugusts Programmer
 
การทำวัตถุเคลื่อนไหว
การทำวัตถุเคลื่อนไหวการทำวัตถุเคลื่อนไหว
การทำวัตถุเคลื่อนไหวAugusts Programmer
 
การทำภาพ Tv screen
การทำภาพ Tv screenการทำภาพ Tv screen
การทำภาพ Tv screenAugusts Programmer
 
การทำปุ่มควบคุมการเล่นเพลง
การทำปุ่มควบคุมการเล่นเพลงการทำปุ่มควบคุมการเล่นเพลง
การทำปุ่มควบคุมการเล่นเพลงAugusts Programmer
 
การทำตัวอักษร Blur
การทำตัวอักษร Blurการทำตัวอักษร Blur
การทำตัวอักษร BlurAugusts Programmer
 
การใช้ปุ่มสำเร็จรูป
การใช้ปุ่มสำเร็จรูปการใช้ปุ่มสำเร็จรูป
การใช้ปุ่มสำเร็จรูปAugusts Programmer
 
การกำหนดวัตถุหมุนรอบตัวเอง
การกำหนดวัตถุหมุนรอบตัวเองการกำหนดวัตถุหมุนรอบตัวเอง
การกำหนดวัตถุหมุนรอบตัวเองAugusts Programmer
 
Flash mx ตอน แสดงวิดีโอใน flash mx 2004
Flash mx ตอน แสดงวิดีโอใน flash mx 2004Flash mx ตอน แสดงวิดีโอใน flash mx 2004
Flash mx ตอน แสดงวิดีโอใน flash mx 2004Augusts Programmer
 
การทำปุ่มควบคุมการเล่น Movie ของ flash
การทำปุ่มควบคุมการเล่น Movie ของ flashการทำปุ่มควบคุมการเล่น Movie ของ flash
การทำปุ่มควบคุมการเล่น Movie ของ flashAugusts Programmer
 
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)Augusts Programmer
 
สร้างลูกศรควบคุมเกม Flash
สร้างลูกศรควบคุมเกม Flashสร้างลูกศรควบคุมเกม Flash
สร้างลูกศรควบคุมเกม FlashAugusts Programmer
 
เทคนิคการสร้าง Flash แสดงวันที่
เทคนิคการสร้าง Flash แสดงวันที่เทคนิคการสร้าง Flash แสดงวันที่
เทคนิคการสร้าง Flash แสดงวันที่Augusts Programmer
 
เทคนิคการสร้าง Cursor
เทคนิคการสร้าง Cursorเทคนิคการสร้าง Cursor
เทคนิคการสร้าง CursorAugusts Programmer
 
เทคนิคการทำภาพ Zoom เข้า zoom ออก
เทคนิคการทำภาพ Zoom เข้า zoom ออกเทคนิคการทำภาพ Zoom เข้า zoom ออก
เทคนิคการทำภาพ Zoom เข้า zoom ออกAugusts Programmer
 

More from Augusts Programmer (20)

การสร้างตัว Preload
การสร้างตัว Preloadการสร้างตัว Preload
การสร้างตัว Preload
 
การวาด Flare
การวาด Flareการวาด Flare
การวาด Flare
 
การเปลี่ยนสีวัตถุ
การเปลี่ยนสีวัตถุการเปลี่ยนสีวัตถุ
การเปลี่ยนสีวัตถุ
 
การเปลี่ยนรูปทรงโดยใช้ Motion shape
การเปลี่ยนรูปทรงโดยใช้ Motion shapeการเปลี่ยนรูปทรงโดยใช้ Motion shape
การเปลี่ยนรูปทรงโดยใช้ Motion shape
 
การเปลี่ยนขนาดเส้นขอบของวัตถุ
การเปลี่ยนขนาดเส้นขอบของวัตถุการเปลี่ยนขนาดเส้นขอบของวัตถุ
การเปลี่ยนขนาดเส้นขอบของวัตถุ
 
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยมการทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
 
การทำวัตถุเคลื่อนไหว
การทำวัตถุเคลื่อนไหวการทำวัตถุเคลื่อนไหว
การทำวัตถุเคลื่อนไหว
 
การทำภาพ Tv screen
การทำภาพ Tv screenการทำภาพ Tv screen
การทำภาพ Tv screen
 
การทำปุ่มควบคุมการเล่นเพลง
การทำปุ่มควบคุมการเล่นเพลงการทำปุ่มควบคุมการเล่นเพลง
การทำปุ่มควบคุมการเล่นเพลง
 
การทำตัวอักษร Blur
การทำตัวอักษร Blurการทำตัวอักษร Blur
การทำตัวอักษร Blur
 
การใช้ปุ่มสำเร็จรูป
การใช้ปุ่มสำเร็จรูปการใช้ปุ่มสำเร็จรูป
การใช้ปุ่มสำเร็จรูป
 
การกำหนดวัตถุหมุนรอบตัวเอง
การกำหนดวัตถุหมุนรอบตัวเองการกำหนดวัตถุหมุนรอบตัวเอง
การกำหนดวัตถุหมุนรอบตัวเอง
 
การ Import file
การ Import fileการ Import file
การ Import file
 
Flash mx ตอน แสดงวิดีโอใน flash mx 2004
Flash mx ตอน แสดงวิดีโอใน flash mx 2004Flash mx ตอน แสดงวิดีโอใน flash mx 2004
Flash mx ตอน แสดงวิดีโอใน flash mx 2004
 
การทำปุ่มควบคุมการเล่น Movie ของ flash
การทำปุ่มควบคุมการเล่น Movie ของ flashการทำปุ่มควบคุมการเล่น Movie ของ flash
การทำปุ่มควบคุมการเล่น Movie ของ flash
 
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)
เชื่อมต่อ Flash mx กับเท็กซ์ไฟล์ และ xml (ตอนที่ 2)
 
สร้างลูกศรควบคุมเกม Flash
สร้างลูกศรควบคุมเกม Flashสร้างลูกศรควบคุมเกม Flash
สร้างลูกศรควบคุมเกม Flash
 
เทคนิคการสร้าง Flash แสดงวันที่
เทคนิคการสร้าง Flash แสดงวันที่เทคนิคการสร้าง Flash แสดงวันที่
เทคนิคการสร้าง Flash แสดงวันที่
 
เทคนิคการสร้าง Cursor
เทคนิคการสร้าง Cursorเทคนิคการสร้าง Cursor
เทคนิคการสร้าง Cursor
 
เทคนิคการทำภาพ Zoom เข้า zoom ออก
เทคนิคการทำภาพ Zoom เข้า zoom ออกเทคนิคการทำภาพ Zoom เข้า zoom ออก
เทคนิคการทำภาพ Zoom เข้า zoom ออก
 

Lesson7

  • 1. แอนิเมชัน (Animation) เป็นการสร้างออบเจ็กต์ให้มีการเคลื่อนไหว มักนิยมใช้ประกอบในชิ้นงาน ทั่วไป ไม่ว่าจะเป็นเว็บเพจ, เกม , หรือเอกสารสมัยใหม่ โปรแกรม Flash ที่เรากาลังใช้อยู่นี้ เป็นโปรแกรมที่ดี โปรแกรมหนึ่งที่สามารถสร้างงานแอนิเมชันได้อย่างง่ายดาย และนาไปใช้กันอย่างแพร่หลาย สาหรับในเรื่องนี้เราจะได้เรียนรู้ขั้นตอนการสร้างแอนิเมชันในรูปแบบต่างๆ ทั้งหมด เช่น หากต้องการ นาออบเจ็กต์หรือภาพหลายๆ ภาพมาเรียงต่อกันเป็นผลงานแอนิเมชันก็สามารถทาได้ด้วย Frame by Frame เมื่อต้องการสร้างแอนิเมชันให้มีการเคลื่อนไหวสามารถทาได้ด้วย Classic Tweening หากมีออบเจ็กต์ตั้งแต่ 2 ชิ้นและต้องการแปลงจากชิ้นหนึ่งเป็นอีกชิ้นหนึ่งให้ใช้ Tweening Shape หรือต้องการสร้างแอนิเมชันให้ เคลื่อนไหวไปตามเส้นไกด์สามารถทาได้ด้วย Guide Layer และการสร้างแอนิเมชันในลักษณะ Mask Layer ใช้ในกรณีเมื่อต้องการสร้างผลงานแอนิเมชันในลักษณะเหมือนมีแสงไฟกาลังหมุนและส่องลงบนภาพ การสร้างแอนิเมชันในลักษณะ Frame by Frame เราจะต้องมีออบเจ็กต์ ภาพ หรือไฟล์งาน ตั้งแต่ 1 ไฟล์เป็นต้นไป และทาการ Insert Keyframe เพื่อแทรกข้อมูลแต่ละชิ้นลงในคีย์เฟรม หลังจากได้ แทรกข้อมูลเรียบร้อยแล้ว จึงทาการทดสอบการแสดงผล โปรแกรมก็จะทาการเล่นแสดงข้อมูลทั้งหมดให้อย่าง ต่อเนื่องจนกลายเป็นผลงานแอนิเมชันขึ้นมา ซึ่งสามารถเปรียบเทียบการทางานได้กับการทางานของฟิล์ม ภาพยนตร์จะทาการฉายเฟรมหนังแต่ละเฟรมจนกลายเป็นภาพยนตร์ขึ้นมา ในที่นี้ เราจะมาลองสร้างภาพผีเสื้อบิน ซึ่งทุกๆ เฟรมจะเปลี่ยนท่วงท่าและตาแหน่งไปดังรูป เฟรม 2 เฟรม 4 เฟรม 6 เฟรม 1 เฟรม 5 เฟรม 3 1. เลือกที่เลเยอร์ที่จะสร้างภาพเคลื่อนไหวแล้วคลิกที่เฟรมในเลเยอร์นั้นที่จะเริ่มสร้างในที่นี้ ให้สร้างไฟล์ใหม่ และคลิกที่เฟรมแรกของ Layer 1 โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 123
  • 2. 2. หากเฟรมนั้นยังไม่เป็นคีย์เฟรม ให้เลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe 3. สร้างภาพแรกของการเคลื่อนไหวขึ้นในเฟรมนั้น โดยอาจวาดขึ้นเองหรือนาจากไฟล์อื่นเข้ามาใช้ ด้วยเมนูคาสั่ง File เลือกคาสั่ง Import ก็ได้ 4. คลิกที่เฟรมถัดไป แล้วเลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe 5. สร้างภาพถัดไปของการเคลื่อนไหวหากนาเข้าจากไฟล์ อย่าลืมลบรูปเก่าออกด้วย 6. ทาขั้นตอนที่ 4 และ 5 ซ้าจนครบทุกเฟรมของการเคลื่อนไหว โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 124
  • 3. เลือกเมนูคาสั่ง Control เลือกคาสั่ง Play เพื่อดูผล และก็บันทึกภาพเก็บไว้ในชื่อ Butterfly Onion skinning เป็นส่วนที่ช่วยให้เราสามารถเห็นภาพในเฟรมก่อนหน้าหรือหลัง เฟรมขณะนั้น หรือ ทุกๆ เฟรมพร้อมๆ กันได้ โดยไม่ต้องไปเลือกเฟรมกลับไปกลับมา ทาให้สามารถปรับแต่งภาพในแต่ละเฟรมให้ มีการเคลื่อนไหวอย่างนุ่มนวลได้อย่างสะดวก ส่วนของ Onion skinning นี้จะอยู่ในตอนล่างของพาเนล Timeline Modify Onion Onion Skin Edit Multiple Frames Markers Onion Skin Outlines การขอดูหลายๆ เฟรมพร้อมกัน 1. คลิกที่เฟรมหลักที่จะดู 2. คลิกที่ปุ่ม Onion Skin โปรแกรมจะแสดงภาพในเฟรมก่อนหน้าเฟรมนั้นให้ หากต้องปรับจานวนเฟรมที่จะดู ให้ ลากส่วนของ Start Onion Skin และ End Onion Skin marker ซึ่งอยู่ในแถบหัวของพาเนล Timeline โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 125
  • 4. Start Stop Onion Skin Marker การแสดงกรอบเฟรมแทนภาพ ให้คลิกที่ปุ่ม Onion Skin Outlines หากต้องการปรับตาแหน่ง ภาพในเฟรม ให้ลากกรอบเฟรมนั้น หากต้องการแก้ไขภาพในเฟรมใดๆ ก็ได้ ให้ค ลิกที่ Edit Multiple Frames Onion Skin Outlines โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 126
  • 5. Edit Multiple Frames คลิกทีเฟรมที่จะแก้ไขแล้ว ่ คลิกปุ่ม Edit คลิกที่ปุ่ม Modify Onion Marker แล้วลักษณะการแสดงผลจากเมนู แสดง Onion Skin Marker ในแถบหัวของพาเนล Timeline ตลอด ไม่ว่าจะเลือกใช้ Onion Skinning หรือไม่ก็ตาม ล็อคไม่ให้ Onion Skin Marker เลื่อนตามเฟรมที่เลือก แสดง 2 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก แสดง 5 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก แสดงทุกเฟรม โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 127
  • 6. การสร้างแอนิเมชันในลักษณะ Classic Motion Tweening คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์เพียง ชิ้นเดียว จากนั้นจึงสั่งให้มีการเคลื่อนไหวและการเปลี่ยนแปลงเกิดขึ้นมาที่ออบเจ็กต์นั้น ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิ เมชันในลักษณะ Classic Tweening คือ ให้รถมีการแล่นมาถึง เฟรมที่ 5 และมีขนาดใหญ่ขึ้น จากนั้นในเฟรมที่ 10 ให้จานบินคันนี้มีขนาดเล็กลง ถูกหมุนกลับด้าน และมีสี ลดลงไปจากเดิมสาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้ 1. สร้างออบเจ็กต์ (รูปรถ) ไว้ในเฟรมที่ 1 2. คลิกขวาเฟรมที่ 5 และเลือกคาสั่ง Insert Keyframe เฟรมทั้งหมดจะมีความยาวจานวน 5 เฟรม 3. คลิกขวาเฟรมที่ 10 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหวจนถึงเฟรม ที่ 10 2.สร้างออบเจ็กต์ไว้ในเฟรมที่ 10 และ เลือกคาสั่ง Insert keyframe 1.สร้างออบเจ็กต์ไว้ในเฟรมที่ 1 3.คลิกเมาส์ขวาเฟรมที่ 10 และเลือก คาสั่ง Create Classic Tween โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 128
  • 7. 4. เลื่อนวัตถุลงมาข้างล่างและคลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์ 5. ดรากส์เมาส์ทาการขยายขนาดตามต้องการ 6. คลิกเมาส์ขวาเฟรมที่ 15 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน เฟรมที่ 15 4.คลิกปุ่ม Free Transform Tool 5.ดรากส์เมาส์ทาการขยายขนาด 6.คลิกเมาส์ขวาเฟรมที่ 15 และ เลือก คาสั่ง Insert Keyframe 7. ดรากส์เมาส์ทาการย่อขนาดให้เล็กลงไปจากเดิม 8. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Transform เลือกคาสั่ง Flip Horizontal จากนั้นออบเจ็กต์ จะถูกหมุนกลับด้านไป 9. คลิกหน้าต่างคาสั่ง Properties โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 129
  • 8. 10. ที่ Color ให้คลิกเลือก Alpha จากนั้นออบเจ็กต์ จะมีสีลดลงไปจากเดิม 11. คลิกขวาที่ keyframe ที่ 15 เลือก Create Classic Tween 8.คลิกเมนู Modify > Transform > Flip Horizontal 7.ดรากส์เมาส์ทาการย่อขนาด 9.คลิกหน้าต่าง Properties ปรับค่า Alpha ตามต้องการ 10.คลิกเลือก Alpha โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 130
  • 9. จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter> การสร้างแอนิเมชันในลักษณะ Tweening Shape คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์ หรือ ภาพ 2 ชิ้นโดยชิ้นแรกจะวางอยู่ที่ตาแหน่งเริ่มต้นของเฟรม และอีกชิ้นหนึ่งจะวางอยู่ที่ตาแหน่งสุดท้ายของ เฟรม จากนั้นจึงสั่งให้มีการ รวมออบเจ็กต์ หรือภาพทั้ง 2 ชิ้นเข้าด้วยกัน และเมื่อทาการแสดงผลภาพหนึ่งก็จะ แปลงกลายเป็นอีกภาพหนึ่ง ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Tweening Shape โดยเริ่มแรกจะนา ออบเจ็กต์ที่ 1 ไว้เฟรมที่ 1 และทาการ Insert Keyframe เพื่อวางออบเจ็กต์ที่ 2 ไว้ในเฟรมที่ 10 จากนั้นจะ รวมออบเจ็กต์ทั้ง 2 เข้าด้วยกัน เมื่อทาการเล่นแสดงแอนิเมชัน จากออบเจ็กต์ที่ 1 จะกลายเป็นออบเจ็กต์ที่ 2 ให้โดยอัตโนมัติสาหรับขั้นตอน การทางานสามารถทาได้ดังนี้ 1. สร้างออบเจ็กต์ ไว้ในเฟรมที่ 1 2. คลิกเมาส์ขวาเฟรมที่ 10 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน เฟรมที่ 10 3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจากรูปภาพที่อยู่ใน เฟรมที่ 1 โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 131
  • 10. 1.สร้างออบเจ็กต์ไว้ในเหรมที่ 1 2.คลิกเมาส์ขวาเฟรมที่ 10 และ เลือกคาสั่ง Insert Keyframe 3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจาก รูปภาพเดิม 4. คลิกหน้าต่างคาสั่ง Properties คลิกที่ Tween ให้คลิกเลือก Shape จากนั้นเมื่อทาการแสดงผล ออบเจ็กต์ที่ 1 จะถูกรวมและแปลงเป็นออบเจ็กต์ที่ 2 ให้โดยอัตโนมัติ โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 132
  • 11. 5.คลิกเลือก Create shape tween จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter> การแสดงผลออบเจ็กต์ที่ 1 จะถูกรวมและแปลงเป็น ออบเจ็กต์ที่ 2 การสร้างแอนิเมชันในลักษณะ Guide Layer คือ การสร้างแอนิเมชันโดยให้ออบเจ็กต์ เปลี่ยนแปลงเคลื่อนที่ไปตามเส้นไกด์ สาหรับขั้นตอนการสร้างแอนิเมชันในลักษณะนี้ จะต้องทาการคลิกปุ่ม Add Classic Guide ที่ไทม์ไลน์จากนั้นสร้างเส้นไกด์ที่ใช้ในการควบคุมทิศทางการวิ่งของออบเจ็กต์ขึ้นมา ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Guide Layer คือ ให้ใบไม้ไป ตามเส้น Guide ทีได้วาดไว้ ่ โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 133
  • 12. 1. สร้างออบเจ็กต์ ไว้ในเลเยอร์ที่ 2 2. คลิกเมาส์ขวาเฟรมที่ 20 และเลือกคาสั่ง Insert keyframe เฟรมทั้งหมดจะมีความยาวจานวน 20 เฟรม 2.คลิกเมาส์ขวาเลือกคาสั่ง Insert keyframe 1.สร้ างออบเจ็กต์ 3. คลิกเมาส์ขวาที่เฟรมที่ 20 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหว จนถึงเฟรมที่ 20 4. คลิกขวาที่ เลเยอร์ 2 เลือกคาสั่ง Add Classic Guide ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่ ขึ้นมาจานวน 1 เลเยอร์ สามารถสังเกตได้ว่า Layer 2 ได้ถอยเยื้องเข้าไป 1 แท็บ ซึ่งหมายถึง Layer 2 ได้ถูกไกด์เรียบร้อยแล้ว โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 134
  • 13. 5. คลิกปุ่ม Pencil Tool ที่ทูลบ็อกซ์ 6. ดรากส์เมาส์สร้างเส้นพาธที่ต้องการให้เป็นแนววิ่งของออบเจ็กต์ 4.คลิกขวาเลือกคาสั่ง Add Classic Guide 5.คลิกปุ่ม Pencil Tool 6.ดรากส์เมาส์สร้างเส้นพาธ 7. คลิกปุ่ม Arrow Tool ที่ทูลบ็อกซ์ 8. ดรากส์เมาส์ย้ายออบเจ็กต์มาไว้ยังตาแหน่งสุดท้ายของเส้นไกด์ โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 135
  • 14. 7.คลิกปุ่ม Arrow Tool 9.ดรากส์เมาส์ย้ายออบเจ็กต์ จากตัวอย่างที่ผ่านมาเมื่อทดสอบดูการเคลื่อนที่ของออบเจ็กต์ทั้งหมด จะสังเกตเห็นว่าออบเจ็กต์มีการ เคลื่อนที่ไปตามเส้นไกด์ในทิศทางแนว 180 องศา ซึ่งทาให้ดูไม่สมจริงเท่าที่ควร ดังนั้นคุณสามารถสั่งคาสั่ง Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้างขึ้น จากนั้นจึงทาการหมุนออบเจ็กต์ให้เอียงไปตามทิศทางการเคลื่อนที่ของเส้นพาธ และเมื่อทาการทดสอบการ แสดงผลแอนิเมชัน ผลงานที่สร้างขึ้นก็จะมีการเคลื่อนที่ได้อย่างสมจริงมากขึ้น 1. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฎเครื่องหมายถูก 2. คลิกเฟรมที่ 1 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งแรกสุด ขณะที่อยู่ในเลเยอร์ 2 3. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง ขึ้น 4. คลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์ 5. ดรากส์เมาส์หมุนออบเจ็กต์ไปในทิศทางเดียวกับเส้นพาธ โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 136
  • 15. คลิกปุ่ม Free Transform Tool ดรากส์เมาส์หมุนออบเจ็กต์ คลิกให้ปรากฏเครื่องหมายถูก ที่ Orient to path คลิกเฟรมที่ 1 ของ Layer 2 6. คลิกเฟรมที่ 15 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งสุดท้ายขณะที่อยู่ในเลเยอร์ 1 7. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง ขึ้น 8. คลิกปุ่ม Free Transform Tool ที่ทูล บ็อกซ์ดรากส์ เมาส์ ห มุนออบเจ็กต์ไปในทิศทาง เดียวกันกับเส้นพาธ คลิกปุ่ม Free Transform Tool คลิกให้ปรากฏเครื่องหมายถูก ดรากส์เมาส์หมุนออบเจ็กต์ ที่ Orient to path คลิกเฟรมที่ 20 ของ Layer 2 โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 137
  • 16. จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter> การสร้างแอนิเมชันในลักษณะ Mask Layer คือ การสร้างแอนิเมชันโดยแสดงภาพภายใน ขอบเขตที่กาหนดไว้ซึ่งมีลักษณะเหมือนกับการส่องไฟลงบนเลเยอร์ที่ได้ถูก Mask ไว้ ดังนั้นจึงต้องมีอย่างน้อย 2 เลเยอร์ เลเยอร์หนึ่งไว้สาหรับใส่ข้อมูลที่จะถูก Mask เช่น ออบเจ็กต์ ภาพ ซึงสามารถเห็นข้อมูลที่อยู่ในเลเยอร์นี้ได้ ก็ต่อเมื่อได้มีการนาข้อมูลของอีก เลเยอร์หนึ่งจะทาการ Mask มาวาง ่ ซ้อนทับหรือเคลื่อนที่ผ่าน จึงสามารถเปรียบได้ว่าเลเยอร์ที่จะทาการ Mask นี้ เป็นเสมือนลาแสงไฟที่ส่องลงไป ยังข้อมูลของเลเยอร์ที่จะถูก Mask นั่นเอง ตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Mask Layer โดยเลเยอร์ ที่ 1 ที่จะถูก Mask ได้ มีข้อมูลเป็นรูปวงกลมก็จะเคลื่อนส่องผ่านไปที่รูปภาพ สาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้ 1. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Document จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document Properties ขึ้นมา 2. ที่ Background Color ให้คลิกเลือกสีเทา จากนั้นที่ฉากหลังจะมีพื้นเป็นสีดา 3. คลิกปุ่ม OK เพื่อยืนยันคาสั่ง 4. โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 138
  • 17. 5. คลิกเมนู Modify > Document คลิกปุ่ม OK คลิกเลือกสีเทา 6. คลิกเมนูคาสั่ง File เลือกคาสั่ง Import แล้วเลือก Import to stage เพื่อนาไฟล์ภาพ ที่ต้องการ เข้ามา 7. คลิกเมาส์ขวาเฟรมที่ 30 และเลือกคาสั่ง Insert Frame เฟรมทั้งหมดจะมีความยาวจานวน 30 เฟรม คลิกเมนู File > Import >Import to Stage โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 139
  • 18. คลิกเมาส์ขวาเฟรมที่ 30 และ เลือกคาสั่ง Insert Frame 8. คลิกปุ่ม Insert Layer ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่ ขึ้นมาจานวน 1 เลเยอร์ 9. สร้างออบเจ็กต์ ไว้ใน Layer 2 10. คลิกเมาส์ขวาเฟรมที่ 30 เลือก Insert Keyframe และเลือกคาสั่ง Create Classic Tween เพื่อ สร้างการเคลื่อนไหวจนถึงเฟรมที่ 30 11. ดรากส์เมาส์ย้ายออบเจ็กต์ไปอีกด้านหนึ่งของออบเจ็กต์ที่อยู่ใน Layer 1 โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 140
  • 19. สร้างออบเจ็กต์ไว้ใน Layer 2 คลิกเมาส์ขวาเฟรมที่ 30 เลือก Insert Keyframe และเลือกคาสั่ง Create Classic Tween คลิกปุ่ม Insert Layer ดรากส์เมาส์ย้ายออบเจ็กต์ 12. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฏเครื่องหมายถูก 13. คลิกเฟรมไหนก็ได้ระหว่างเฟรมที่ 1 ถึง เฟรม 30 ของ Layer 2 เพื่อเลือกออบเจ็กต์ ตาแหน่ง แรกสุดที่อยู่ในเลเยอร์ 2 โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 141
  • 20. 14. ที่ Rotate ให้คลิกเลือก CW เพื่อให้ลักษณะการหมุนเป็นแบบตามเข็มนาฬิกา 15. พิมพ์จานวนที่ต้องการให้มีการหมุน เป็น 3 Times ออบเจ็กต์จะถูกหมุนตามเข็มนาฬิกาไปเป็น จานวน 3 รอบ 16. คลิกเมาส์ขวาที่เลเยอร์ 2 เลือกคาสั่ง Mask จากนั้นออบเจ็กต์ในเลเยอร์ที่ 1 ที่ได้ถูก Mask ไว้อยู่ จะปรากฏขึ้นมาเฉพาะบริเวณที่ออบเจ็กต์ ในเลเยอร์ 2 วางซ้อนทับไว้อยู่เท่านั้น คลิกเฟรมไหนก็ได้ของ Layer 2 คลิกเลือก CW พิมพ์จานวนที่ต้องการให้มีการหมุน คลิกเมาส์ขวาที่เลเยอร์ 2 เลือกคาสั่ง Mask จากนั้นทดสอบภาพแอนิเมชันที่เรา Mask Layer ขึ้นมาโดยการ กด <Ctrl+Enter> โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 142
  • 21. โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 143