SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
สรางภาพ Animation GIF ดวย Macromedia Fireworks

           ภาพที่นําเสนออยูบนอินเทอรเน็ตนั้นจะมีภาพทั้งที่เปนภาพนิ่งและภาพเคลื่อนไหว เพื่อดึงดูดใหผูสนใจ
เขามายังเว็บไซตของเรา แตในการสรางภาพเคลื่อนไหวนั้นจําเปนที่จะตองหาโปรแกรมมาใชในการสราง แตยังมี
หลายทานที่ไมทราบวาโปรแกรมในชุดของ Macromedia ก็มีโปรแกรมที่สรางภาพ Animation GIF ที่
นอกเหนือจาก Macromedia Flash นั่นก็คือ Macromedia Fireworks ที่ใชงานงายไมยาก และไมตองเสียเงินซื้อ
ซอฟตแวรมาติดตั้งเพิ่มเติมแตอยางใด แตกอนจะเริ่มสราง Animation GIF กันมาทําความเขาใจในเรื่อง
ภาพเคลื่อนไหว (Animation) กันกอน
           ภาพเคลื่อนไหว (Animation) ก็คือชุดลําดับของภาพนิ่ง เปนการนําภาพนิ่งหลายๆ ภาพ มาลําดับกันอยาง
ตอเนื่อง เพื่อใหปรากฏเปนการเคลื่อนไหวบนแผนระนาบ ซึ่งก็คือ จอภาพ แผนกระดาษ และการมองเห็นภาพ
เหลานี้เปนภาพเคลื่อนไหว ก็เพราะปรากฏการณ "ภาพติดตา" - Persistence of vision นั่นเอง
        ปจจุบัน มีการนําคอมพิวเตอรมาใชเปนเครื่องมือสราง ลําดับภาพเคลื่อนไหว โดยการสรางภาพกราฟกที
ละภาพ (หรือเรียกวา "เฟรม") วัตถุแตละเฟรม มีการเปลี่ยนแปลงของ "ตัวแปร" เชน ตําแหนงวัตถุ, ขนาด, การ
หมุน, การแปลงรูปราง, สี เปนตน ทีละนอย การเปลี่ยนแปลงของตัวแปรเหลานั้น อาศัย "หลักการประมาณคา
ในชวงระหวางภาพแรก กับภาพถัดไป"

สรางภาพ Animation แบบ 2 มิติ
         เปนการสรางภาพขึ้นมาทีละเฟรมหรือนําภาพมาวางไวบนเฟรมโดย 1 เฟรมตอ 1 รูปและกําหนดให
โปรแกรมแสดงผลที่ไดจากภาพหลายๆ เฟรมตอเนื่องกันดวยความเร็วที่กําหนด จนภาพที่ไดดูเหมือนเกิดการ
เคลื่อนไหวขึ้น




Frame 1                     Frame 2                     Frame 3
Frame 4                      Frame 5                       Frames 6
ตัวอยางการสรางภาพขึ้นมาทีละเฟรมและแสดงตอเนื่องกันจนเกิดเปนภาพเคลื่อนไหว




สรางภาพ Animation GIF เพื่อใชงานบนเว็บเพจ
          ในขั้นตอนนี้ลองมาสรางภาพเคลื่อนไหวแบบงายๆ กันดูครับ
          1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300x250 Pixels และ Resolution เปน 72
             ดังภาพ




          2. สรางวัตถุขึ้นมาหนึ่งรูป (รูปอะไรก็ได) หรือจะนํารูปภาพเขามาใชก็ได ในตัวอยางจะเปนการนํา
             รูปภาพเขามาเพื่อใหภาพเคลื่อนไหว ดวยการเปดไฟลภาพที่ตองการ




              แสดงการนํารูปจากภายนอกเขามาในโปรแกรม
3. ใชเครื่องมือ         คลิกและลากเมาสเปนกรอบรอบรูปหรือวัตถุนี้ทั้งหมดเพื่อแกไขหรือปรับรูป
   ตามที่ตองการ




4. คลิกเมนู Modify, Symbol, Convert to Symbol เพื่อเปลี่ยนวัตถุท่ีถูกเลือกใหเปนสัญลักษณ หรือกด
   ปุม F8 ก็จะไดผลลัพธเหมือนกัน (ตองเลือกรูปกอนทุกครั้งถึงจะสามารถทํางานที่คําสั่งนี้ได)
5. คลิกเลือก Animation เพื่อเปลี่ยนวัตถุใหเปนภาพเคลื่อนไหว




6. คลิกปุม OK
7. กําหนดจํานวนเฟรมที่ตองการสรางภาพเคลื่อนไหว ลงในชอง Frames
8. กําหนดระยะทางที่ตองการใหวัตถุเคลื่อนที่ ลงในชอง Move ในที่นี้ระยะทางจะมีหนวยเปน Pixel
   ตามหนวยของกระดานวาดภาพที่กําหนดไวในตอนตน
9. กําหนดทิศทางในการเคลื่อนที่ของวัตถุ ทิศทางดังกลาวจะมีหนวยเปนองศา
10. คลิกปุม OK

                                                               กําหนดจํานวนเฟรม


                                                               กําหนดระยะทาง


                                                               กําหนดทิศทางในการเคลื่อนที่




    สําหรับคาในชองอื่นๆ ใหใชคาที่ทางโปรแกรมใหมากอนนะครับ โดยจะขออธิบายรายละเอียดใน
    หัวขอตอไป เพื่อใหเขาใจยิ่งขึ้น
11. โปรแกรมจะสรางเสนทางการเคลื่อนที่              และสรางเฟรมขึ้นมาตามจํานวนเฟรมที่กําหนดไวกอน
    หนานี้



                                          โปรแกรมจะสรางเสนทางในการเคลื่อนที่ให




    แสดงเสนทางการเคลื่อนที่ของรูปตามคาที่กําหนด

12. คลิกปุม      เพื่อดูการเคลื่อนไหวที่เกิดขึ้น
แกไขการเคลื่อนที่ของภาพ
         เมื่อการเคลื่อนที่ของภาพยังไมถูกใจ คุณสามารถที่จะแกไขไดจาก Stage เลย ไมตองเขาไปแกไขใน
หนาตางคําสั่งใดๆ ใหวุนวาย
         1. คลิกปุม       เพื่อหยุดการทํางานกอนหากของใครยังทํางานอยู
         2. คลิกปุม       เพื่อกลับมาเริ่มทํางานที่เฟรมแรก

                        คําถาม : แลวจะรูไดอยางไรวาตอนนี้อยูที่เฟรมแรก หรือเฟรมอื่นอยู
                        คําตอบ : ในชุดเครื่องมือ                           นี้จะมีตัวเลขแสดงอยู ตัวเลขที่เห็น
                        นี้คือ เฟรมที่ภาพแสดผลอยู ดังภาพคือ ตอนนี้อยูเฟรมที่ 5

         3. จะเห็นเสนทางการเคลื่อนที่ปรากฏขึ้นมา ใหคลิกเมาสคางไวบนจุดสีแดง ซึ่งเปนจุดปลายของ
            การเคลื่อนที่ และลากเมาสลงมาดานลาง หรือจะขยายออกเพื่อใหภาพนี้เคลื่อนไหวไดไกลขึ้นก็ได
            ในอีกทางหนึ่งจะหดใหสั้นก็สามารถทําได ดังนั้นการกระทําในลักษณะนี้ก็เพื่อที่จะยายตําแหนงจุด
            ปลายดังกลาวไปตามทิศทางที่ตองการ




             แสดงการแกไขวัตถุใหเคลื่อนที่ไปอีกทาง

         4. คลิกปุม       เพื่อดูผลลัพธอีกครั้ง


กําหนดความเขม - จางของวัตถุ
         เมื่อไดนําวัตถุมาสรางภาพเคลื่อนไหวแลวนั้น แตภาพที่เคลื่อนไหวนี้นั้นอยากจะเพิ่มคุณสมบัติพิเศษ
ใหกับงานชิ้นนี้อีกหนอยดวยการกําหนดความเขม-จางใหกับวัตถุ คือตองการใหวัตถุที่แสดงผลนี้มีความจางกอน
แลวคอยเขม
นอกจากจะกําหนดความเขม - จางของวัตถุในแตละเฟรมจาก Layer Panel แลว คุณยังสามารถสั่งให
โปรแกรมกําหนดความเขม - จางในเฟรมตางๆ โดยอัตโนมัติอีกดวย
        1. คลิกบนวัตถุที่สรางขึ้น เพื่อเลือกการแกไขความเขม- จางในเฟรมตางๆ
        2. คลิกเมนู Modify, Animation, Settings เพื่อแกไขคาตางๆ ในการเคลื่อนที่
        3. ภายในหนาตาง Animate กําหนดคาความเขม - จางของวัตถุในชอง Opacity เทากับ 40 to 100 เพื่อ
           กําหนดใหภาพจางลงเทากับ 40 หนวยในเฟรมแรก และคอยๆ เขมขึ้นจนถึง 100 หนวยในเฟรม
           สุดทาย สวนในเฟรมที่เหลือโปรแกรมจะคํานวณใหโดยอัตโนมัติ ไมตองมากําหนดที่ละเฟรมให
           เสียเวลา
        4. คลิกปุม OK
        5. คลิกปุม Play เพื่อดูผลลัพธ




        6. ผลลัพธ ภาพจะเริ่มตนจากจางมาก และคอยๆ เขมขึ้นในเฟรมตอไปจนถึงเขมที่สุดตามที่กําหนดไว
           ในเฟรมสุดทาย
การยอ - ขยายขนาดของวัตถุขณะเคลื่อนที่
          เชนเดียวกับการกําหนดความเขม - จางของวัตถุ คุณสามารถใชวิธีเดียวกันมากําหนดขนาดใน
การยอ - ขยายวัตถุขณะเกิดการเคลื่อนที่ไดดวย
         1. คลิกเลือกวัตถุที่ตองการแกไข
         2. คลิกเมนู Modify, Animation, Settings เพื่อแกไขคาในการเคลื่อนที่
         3. ภายในหนาตาง Animate กําหนดคาการยอ-ขยายในชอง Scale = 40 เพื่อกําหนดใหวัตถุคอยๆ ยอ
            ขนาดลงจนเหลือ 35% ในเฟรมสุดทาย
         4. คลิกปุม OK
         5. คลิกปุม Play เพื่อดูผลลัพธ
         6. ผลลัพธ ภาพจะคอยๆ ยอขนาดลงจนถึง 35%




สรางภาพเคลื่อนไหวแบบเปลี่ยนภาพไปเรื่อยๆ
         นอกจากการสรางภาพเคลื่อนไหวใหเคลื่อนที่ไปเรื่อยๆ แลว คุณยังสามารถนําภาพที่อยูในเครื่องของคุณ
ภาพที่หามาจากอินเทอรเน็ต หรือจะเปนภาพที่ถายจากกลองดิจทัลก็สามารถที่จะนํามาสรางภาพเคลื่อนไหวได
                                                         ิ
หมดโดยใหนําเขามาใสไวในแตละเฟรม เพื่อกําหนดใหเปนภาพเคลื่อนไหว การนําภาพตางๆ มาสราง
ภาพเคลื่อนไหวทําไดดังนี้
         1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300x250 Pixels และ Resolution เปน
            72 dpi
         2. นําภาพที่มีอยูในเครื่องของคุณใสลงไปบนกระดานวาดภาพ ดวยคําสั่ง File, Import
         3. เปดพาเนลของเฟรมขึ้นมา เพื่อสรางภาพในเฟรมอื่นๆ ดวยการไปที่เมนู Window, Frames จะ
            ปรากฏพาเนล Frames ทางดานขวาของโปรแกรม
         4. คลิกปุม      เพื่อสรางเฟรมขึ้นมาใหม
         5. ในเฟรมที่สรางขึ้นมาใหม ใหนําภาพที่ตองการเปลี่ยนใสลงไปดวยวิธีการ Import เชนเดียวกับ
            ขั้นตอนที่ 2
6. ตองการใหภาพเปลี่ยนก็ใหทําขั้นตอนที่ 2 ซ้ําไปเรื่อยๆ จนดูเหมือนภาพเคลื่อนไหวได


                                 1. กําหนดความกวางความสูงของ Stage



                                                                              3. เปด Frame Panel



              2. นําภาพเขามาไวบน Stage




5. นําภาพใสลงไปในเฟรม
ใหมที่เพิ่มเขามา




                                                         4. สรางเฟรมขึ้นมาใหม


      7. เมื่อกําหนดเฟรมและใสภาพลงไปใหเฟรมจนครบตามที่ตองการแลว ก็ใหคลิกปุม Play เพื่อดู
         ภาพเคลื่อนไหวที่เกิดขึ้น
      8. ผลลัพธ โปรแกรมจะเปลี่ยนภาพไปตามเฟรมที่ไดนําภาพมาไว จนดูเหมือนภาพจะเคลื่อนไหวได
9. ถาในกรณีที่ภาพแสดงผลเร็วไปสามารถเพิ่มความหนวงใหกับภาพไดดวยการปรับ ตัวเลขการ
            แสดงผลใหเพิ่มขึ้นโดยดับเบิลคลิกที่ ตัวเลขหลังเฟรมที่ตองการ แลวกําหนดตัวเลขลงไป
            (30 = 0.30 วินาที) จะแสดงผลหนวงเวลาที่ 0.30 วินาทีกอนเปลี่ยนภาพตอไป ผลลัพธที่ไดภาพก็จะ
            แสดงผลชาขึ้นนิดหนอย ทําใหเห็นภาพชัดขึ้น


                                                      9. ดับเบิลคลิกที่ตัวเลขเพื่อแกไข




สรางตัวอักษรวิ่ง
           การสรางภาพเคลื่อนไหวอีกแบบหนึ่งซึ่งพบเห็นบอยๆ บนเว็บไซตนอกจากภาพกระพริกตามหัวขอเมื่อ
สักครูแลว อีกแบบก็คือ การสรางตัวอักษรวิ่งบนจอภาพ ตัวอักษรวิ่งดังกลาวจะเปนภาพเคลื่อนไหวประมาณ
40-50 เฟรม วิธีการสรางก็มีวิธการงายๆ คือสรางขึ้นมาทีละเฟรมเทานั้น จะใชเวลาเทาไหรน้ันก็แลวแตละงานวา
                              ี
ตองการใหเคลื่อนไหวแคไหน ซึ่งก็คงจะใชเวลาคอนขางนานกวาจะทําเสร็จ
        แตถาคุณไมอยากเสียเวลามากขนาดนั้น ลองศึกษาการสรางภาพเคลื่อไหวแบบอัตโนมัติจากตัวอยางนี้ดู
จะชวยลดเวลาทํางานลงเหลือแคไมมีนาทีเทานั้น
         1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300 x 100 Pixels และ Resolution เปน
            72 dpi
         2. สรางกรอบสี่เหลี่ยมขึ้นมารอบกระดานวาดภาพ พรอมทั้งกําหนดความหนาของเสน และลวดลาย
            ตามตองการ โดนใหสพื้นเปนแบบไมมีสี ถาไมกําหนดลักษณะนี้สี้พื้นจะบังขอความทําให
                                  ี
            การแสดงผลมองไมเห็น
3. สรางตัวอักษรขึ้นมาตรงกลางของกระดานวาดภาพ ใชขนาดประมาณ 40 pixels




4. แปลงขอความใหเปน Symbol ดวยการไปที่เมนู Modify, Symbol, Convert to Symbol… หรือจะ
   กดปุม F8 เลยก็ได
5. ตั้งชื่อ Symbol ในชอง Name




6. เลือกประเภท Symbol เปนแบบ Graphic
7. คลิกปุม OK
8. จากนั้นใหลบขอความที่สรางไวในขั้นตอนที่ 3 ออกจาก Stage ใหเหลือแคกรอบก็พอ
9. ใหเปด Library Panel ขึ้นมาดวยการไปที่เมนู Windows, Library เมื่อคลิกแลวจะมีหนาตางขึ้นมาที่
   ทางขวา
10. คลิกเมาสคางไวบนตัวอักษรใน Library และลากเมาสมาปลอยบน stage เปรียบเสมือนการคัดลอก
    ตัวอักษรดังกลาวขึ้นมาใชงาน
11. ยายตําแหนงตัวอักษรมาทางขวาของจอภาพ ใหตัวอักษรตัวแรกโผลพนกรอบออกมาเล็กนอย
12. ลากตัวอักษรออกมาอีกชิ้น แลวนําไปไวทางซายโดยใหขอความสุดทายโผลอออกมาเล็กนอย
    เชนเดียวกัน
                                                                        ลากขอความมาวางไวบน stage




13. คลิกเลือกตัวอักษรทั้งสองขอความ ดวยวิธีกดปุม S บนคียบอรดคางไวขณะเลือก
14. เมื่อมาถึงขั้นตอนนี้ก็จะเปนการกําหนดใหโปรแกรมสรางภาพเคลื่อนไหวใหกับเฟรมตางๆ โดย
    อัตโนมัติ
15. เมื่อเลือกขอความทั้งสองเรียบรอยแลวใหคลิกที่เมนู Modify, Symbol, Tween Instances เพื่อ
    กําหนดการเคลื่อนไหวจากซายไปขวาโดยอัตโนมัติ




16. กําหนดจํานวน Step ของการเคลื่อนที่ในชอง Steps ใหกําหนดคาเปน 30
17. ใหคลิกเครื่องหมายถูกหนา Distribute to Frames เพื่อสั่งใหโปรแกรมสรางเฟรมขึ้นมาจาก Step ที่
           กําหนด




       18. คลิกปุม OK
       19. โปรแกรมจะคํานวณ Step การเคลื่อนที่ และสรางเฟรมขึ้นมา 30 เฟรมตามจํานวน Step ที่กําหนด




                                                            จํานวนเฟรมที่โปรแกรมสรางให




       20. ผลลัพธ ตัวอักษรจะวิ่งจากซายไปขวา และวิ่งตอเนื่องจากการกําหนดจํานวนรอบของการเลน
           ภาพเคลื่อนไหว แตการแสดงผลนี้ยังไมสมบูรณจะเห็นวากรอบขอความจะมีเฉพาะที่เฟรมแรก
           เทานั้น ดังนั้นจะตองมีขึ้นตอนเพิ่มอีกนิดเพื่อแกไขปญหานี้

คัดลอกวัตถุที่เลือกลงในเฟรมที่กาหนด
                               ํ
       1. ใหกลับมาทํางานที่เฟรมที่ 1 และคลิกเลือกกรอบสี่เหลี่ยมที่สรางขึ้น
       2. คลิกปุม     ที่อยูมุมขวาของพาเนลเฟรม
       3. คลิกเลือก Copy to Frames จากตัวเลือกที่ปรากฏขึ้น เพื่อคัดลอกกรอบสี่เหลี่ยมที่เลือกไปไวใน
          เฟรมที่กําหนด
4. ภายในหนาตาง Copy to Frames คลิกเลือก All Frames เพื่อกําหนดใหโปรแกรมคัดลอกกรอบ
           สี่เหลี่ยมไปไวในเฟรมทั้งหมดที่มีอยู




                                               เลือก All Frames



        5. คลิกปุม OK
        6. ผลลัพธที่ไดกรอบที่ไดคัดลอกเมื่อสักครูจะปรากฏอยูบันเฟรมทุกเฟรม การแสดงผลจะสมบูรณขึ้น

                      นอกจากการคัดลอกวัตถุท่ถูกเลือกไปไวในทุกๆ เฟรมแลวคุณยังสามารถเลือกกําหนดการ
                                            ี
                      คัดลอกภาพแบบอื่นๆ ไดอีก ดังนี้
                           o Previous Frames คือการคัดลอกไปไวในเฟรมกอนหนาเฟรมที่ทํางานอยู
                           o Next Frame คือการคัดลอกไปไวในเฟรมถัดไปจากเฟรมที่ทํางานอยู
                           o Range คือการคัดลอกไปไวในเฟรมที่กําหนด เชน จากเฟรมที่ 2-30 เปนตน



ปรับความเร็วในการแสดงผล
        การแสดงผลภาพเคลื่อนไหวที่ผานมาเปนการแสดงผลดวยความเร็วที่โปรแกรมมาในตอนแรก ความเร็ว
ในการเคลื่อนที่ระหวางเฟรมสามารถปรับเปลี่ยนได เพื่อใหเหมาะสมกับการเคลื่อนไหวของแตละชนิด
        ปรับความเร็วในการแสดงภาพเฉพาะเฟรมที่ถูกเลือก
        1. คลิกปุม      บน Stage ไปเรื่อยๆ จนพบเฟรมที่ตัวอักษรอยูตรงกลางของกระดาน
        2. ภายในเฟรมพาเนล ใหดับเบิ้ลคลิกบนตัวเลข แถวหลังสุดของเฟรมดังกลาว เพื่อแกไขเวลาที่ใช
           แสดงภาพในเฟรมนั้น
3. กําหนดคา 300 ลงในชอง Frame Delay ที่ปรากฎขึ้น เพื่อกําหนดใหเฟรมดังกลาวใชเวลาในการ
           แสดงภาพ 300/100 second หรือ 3 วินาที่น่ันเอง
        4. คลิกปุม     เพื่อแสดงผล
        5. ผลลัพธที่ได นั้นจะเปนลักษณะที่วาภาพจะคอยๆ เลื่อนเขามาตามเฟรมที่กําหนดเวลาไว แลวภาพ
           จะหยุดสักพักหนึ่ง แลวคอยเลื่อนตอไปตามเวลาที่กําหนดลงไวในเฟรม

                                                                                  2. ดับเบิลคลิก




                                                                                         3. กําหนดคา


                      4. แสดงผล                   1. คลิกเลื่อนตัวอักษรในอยูตรงกลาง



        ปรับความเร็วในการแสดงภาพของเฟรมที่มีอยูทั้งหมด
        1. ภายใน Frame Panel ใหคลิกเลือกเฟรมที่ตองการแกไขทั้งหมด ดวยการกดปุม S บนคียบอรด
           คางไวขณะเลือก (การใชปุม S ชวยจะใชในกรณีที่เฟรมนั้นตองตอกันตลอด) หรือจะใชปุม
           C เลือกก็ได (การใชปม C ชวยในการเลือกนั้นเฟรมที่ตองการเลือกไมจําเปนที่จะตองตอกัน
                                 ุ
           สามารถเลือกขามเฟรมได)
        2. เมื่อเลือกเฟรมที่ตองการแกไขไดแลว ใหดับเบิ้ลบนตัวเลขในชองดานหลังสุดของเฟรมใดเฟรม
           หนึ่งเพื่อกําหนดเวลาในการแสดงภาพ
        3. กําหนดเวลาในการแสดงภาพใหเปน 50/100 หรือครึ่งวินาทีนั่นเอง
        4. ผลลัพธที่ไดจากการกําหนดเวลาในการแสดงภาพจะแสดงผลตามเวลาที่ไดกําหนดในเฟรมทั้งหมด
           ที่เลือก


ลดขนาดของไฟล
       ไฟลที่เกิดจากการสรางภาพเคลื่อนไหว จะมีขนาดใหญกวาไฟลปกติมากเพราะฉะนั้น ควรจะระวังเรื่อง
ขนาดของภาพใหดี
นอกจากการระวังดวยการสรางภาพใหมีขนาดเล็กๆ แคเพียงพอกับการใชงานแลวนั้น ก็ยังมีวิธีที่จะชวย
ลดขนาดไฟลใหเล็กลงมาไดโดยผลลัพธที่เกิดขึ้นจะไมเสียคุณภาพไป
        กําหนดสีใหพอดีกับการใชงาน เพื่อความรวดเร็วในการ Load
        1. คลิกเมนู File, Image Preview เพื่อกําหนดรูปแบบของไฟลที่จะใชในการบันทึก
        2. ภายในหนาตาง Image Preview คลิกเลือกชนิดของไฟลแบบ Animate Gif จากชอง Format
        3. คลิกเลือกจํานวนสีที่จะใชในภาพที่ตองการบันทึก ในที่นี้ภาพของผูเขียนมี 3 สีเทานั้น (จากตัวอยาง
           เมื่อสักครู) คือ ดํา, แดง, ขวา จึงเลือกจํานวนสีเพียงแค 4 สีเทานั้น
        4. คลิกใหมีเครื่องหมายถูกหนาชอง Remove Unused Colors เพื่อสั่งใหโปรแกรมตัดสีที่ไมไดใชงาน
           ออก
        5. คลิกปุม Export เพื่อสงไฟลที่ไดออกไปเตรียมการบันทึกไฟลชนิดตางๆ ตอไป




                                                      2. เลือกชนิดของไฟล


                          3. เลือกจํานวนสีที่ใช




 4. คลิกเลือก
                                                   5. สงไฟลออกไป


                       การกําหนดจํานวนสีใหเพียงพอกับการใชงานจะทําใหขนาดของไฟลที่ไดเล็กลงโดย
                       คุณภาพจะไมเสียไป (ตองเลือกสีใหครบตามสีที่มีในภาพ)



        6. ภายในหนางตาง Export คลิกเลือกโฟลเดอรที่ตองการบันทึกไฟล จากชอง Save in
        7. พิมพชื่อที่ตองการใชในการบันทึกลงในชอง file name
        8. คลิกเลือกชนิดของไฟลแบบ Image and HTML จากชอง Export
9. คลิกเลือก Export HTML File จากชอง HTML
        10. คลิกใหมีเครื่องหมายถูกหนา Put image in subfolder
        11. คลิกปุม Export เพื่อบันทึกไฟลทีไดกําหนดคาไว




        12. หลังจากบันทึกไฟลลงในโฟลเดอรที่กําหนดไวแลวใหดับเบิ้ลคลิกบนไฟลในโฟลเดอรดังกลาว
            เพื่อดูผลที่เกิดขึ้นบนเว็บเบราวเซอร




        13. ทดลองแสดงผลดวยการดับเบิ้ลคลิกที่ไฟลนามสกุล htm โปรแกรมก็จะเปดเบราวเซอรแลว
            แสดงผลใหโดยอัตโนมัติ


         ดวยขั้นตอนตางๆ ที่ไดแนะนําไปนั้น เปนขั้นตอนในการสรางงาน Animation GIF ดวยโปรแกรม
Macromedia Fireworks โดยจะเห็นวาขั้นตอนตางๆ นั้นไมยากเลยใชไหมครับ และผมก็ไดมีตัวอยางหลายๆ แบบ
ใหลองทํากันดู สุดทายนี้กขอใหสนุกกับการสรางสรรคงาน Animation GIF เพื่อประกอบกับงานนําเสนอตางๆ
                          ็
โดยเฉพาะบนเว็บไซตนะครับ

Weitere ähnliche Inhalte

Was ist angesagt?

คู่มือ Photoshop cs3
คู่มือ Photoshop cs3คู่มือ Photoshop cs3
คู่มือ Photoshop cs3charuwarin
 
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7Jele Raviwan Napijai
 
คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์พัน พัน
 
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5Rattapadol Gunhakoon
 
Digital media animation
Digital media animationDigital media animation
Digital media animationajpeerawich
 
พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7Thanawat Boontan
 
หน่วยที่ 3 1
หน่วยที่ 3 1หน่วยที่ 3 1
หน่วยที่ 3 1Bee Saruta
 
การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)Dr.Kridsanapong Lertbumroongchai
 
ขั้นตอนการใช้ Movie wizard ulead 11
ขั้นตอนการใช้ Movie wizard  ulead 11ขั้นตอนการใช้ Movie wizard  ulead 11
ขั้นตอนการใช้ Movie wizard ulead 11BussRa ThongThai
 

Was ist angesagt? (16)

คู่มือ Photoshop cs3
คู่มือ Photoshop cs3คู่มือ Photoshop cs3
คู่มือ Photoshop cs3
 
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
 
คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์
 
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
 
Hanfbookflash8
Hanfbookflash8Hanfbookflash8
Hanfbookflash8
 
Manual swish max
Manual swish maxManual swish max
Manual swish max
 
Filter photoshop cs5
Filter photoshop cs5Filter photoshop cs5
Filter photoshop cs5
 
Lesson 6
Lesson 6Lesson 6
Lesson 6
 
Flipalbum6
Flipalbum6Flipalbum6
Flipalbum6
 
วิธีการใช้โปรแกรม Microsoft word 4
วิธีการใช้โปรแกรม Microsoft word 4วิธีการใช้โปรแกรม Microsoft word 4
วิธีการใช้โปรแกรม Microsoft word 4
 
Digital media animation
Digital media animationDigital media animation
Digital media animation
 
Lesson 8
Lesson 8Lesson 8
Lesson 8
 
พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7
 
หน่วยที่ 3 1
หน่วยที่ 3 1หน่วยที่ 3 1
หน่วยที่ 3 1
 
การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)
 
ขั้นตอนการใช้ Movie wizard ulead 11
ขั้นตอนการใช้ Movie wizard  ulead 11ขั้นตอนการใช้ Movie wizard  ulead 11
ขั้นตอนการใช้ Movie wizard ulead 11
 

Andere mochten auch

Andere mochten auch (19)

Web 2.0 & OSS for Library
Web 2.0 & OSS for LibraryWeb 2.0 & OSS for Library
Web 2.0 & OSS for Library
 
XnView Resize
XnView ResizeXnView Resize
XnView Resize
 
NSTDA Knowledge Sharing - User Manual
NSTDA Knowledge Sharing - User ManualNSTDA Knowledge Sharing - User Manual
NSTDA Knowledge Sharing - User Manual
 
Semantic web and library
Semantic web and librarySemantic web and library
Semantic web and library
 
Digital Standard and Thai MOST Web site
Digital Standard and Thai MOST Web siteDigital Standard and Thai MOST Web site
Digital Standard and Thai MOST Web site
 
EM Ball 01
EM Ball 01EM Ball 01
EM Ball 01
 
EM academic summary final
EM academic summary  final EM academic summary  final
EM academic summary final
 
20080522 OSS4libs
20080522 OSS4libs20080522 OSS4libs
20080522 OSS4libs
 
Microsoft PowerPoint
Microsoft PowerPointMicrosoft PowerPoint
Microsoft PowerPoint
 
PKP Open Harvester Software
PKP Open Harvester SoftwarePKP Open Harvester Software
PKP Open Harvester Software
 
Open Source Software สำหรับห้องงสมุด
Open Source Software สำหรับห้องงสมุดOpen Source Software สำหรับห้องงสมุด
Open Source Software สำหรับห้องงสมุด
 
Myanmar Rarebooks Seminar
Myanmar Rarebooks SeminarMyanmar Rarebooks Seminar
Myanmar Rarebooks Seminar
 
STKS Open Source & Freeware
STKS Open Source & FreewareSTKS Open Source & Freeware
STKS Open Source & Freeware
 
Open Source Software เพื่อการศึกษา
Open Source Software เพื่อการศึกษาOpen Source Software เพื่อการศึกษา
Open Source Software เพื่อการศึกษา
 
Automated Library with OpenBiblio - myLib
Automated Library with OpenBiblio - myLibAutomated Library with OpenBiblio - myLib
Automated Library with OpenBiblio - myLib
 
Digitization KU Library
Digitization KU LibraryDigitization KU Library
Digitization KU Library
 
Desktop Author 5
Desktop Author 5Desktop Author 5
Desktop Author 5
 
Scratch Learning Tools for Kids
Scratch Learning Tools for KidsScratch Learning Tools for Kids
Scratch Learning Tools for Kids
 
NSTDA KM
NSTDA KMNSTDA KM
NSTDA KM
 

Ähnlich wie animation-gif-by-firework

เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานเครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานกชพร มณีพงษ์
 
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0usanee31
 
เทคนิคโฟโต้
เทคนิคโฟโต้เทคนิคโฟโต้
เทคนิคโฟโต้weena22
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้องChamp Wachwittayakhang
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้องChamp Wachwittayakhang
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้องChamp Wachwittayakhang
 
คู่มือการใช้ Sony vegas 7
คู่มือการใช้  Sony vegas 7คู่มือการใช้  Sony vegas 7
คู่มือการใช้ Sony vegas 7Vinz Primo
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 

Ähnlich wie animation-gif-by-firework (20)

เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐานเครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐาน
 
Photo story
Photo storyPhoto story
Photo story
 
Image editing-with-photoscape
Image editing-with-photoscapeImage editing-with-photoscape
Image editing-with-photoscape
 
Namo webeditor 6
Namo webeditor 6Namo webeditor 6
Namo webeditor 6
 
คู่มือFlash
คู่มือFlashคู่มือFlash
คู่มือFlash
 
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0
 
เทคนิคโฟโต้
เทคนิคโฟโต้เทคนิคโฟโต้
เทคนิคโฟโต้
 
captivate-flash-courseware
captivate-flash-coursewarecaptivate-flash-courseware
captivate-flash-courseware
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
swishmax2
swishmax2swishmax2
swishmax2
 
Manual Swish max3
Manual Swish max3Manual Swish max3
Manual Swish max3
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
 
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
 
Chapter7
Chapter7Chapter7
Chapter7
 
คู่มือการใช้ Sony vegas 7
คู่มือการใช้  Sony vegas 7คู่มือการใช้  Sony vegas 7
คู่มือการใช้ Sony vegas 7
 
Lesson7
Lesson7Lesson7
Lesson7
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 

Mehr von Boonlert Aroonpiboon (20)

Excel quiz
Excel quizExcel quiz
Excel quiz
 
Scival for Research Performance
Scival for Research PerformanceScival for Research Performance
Scival for Research Performance
 
20190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-420190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-4
 
20190409 social-media-backup
20190409 social-media-backup20190409 social-media-backup
20190409 social-media-backup
 
20190220 open-library
20190220 open-library20190220 open-library
20190220 open-library
 
20190220 digital-archives
20190220 digital-archives20190220 digital-archives
20190220 digital-archives
 
OER KKU Library
OER KKU LibraryOER KKU Library
OER KKU Library
 
Museum digital-code
Museum digital-codeMuseum digital-code
Museum digital-code
 
OER MOOC - Success Story
OER MOOC - Success StoryOER MOOC - Success Story
OER MOOC - Success Story
 
LAM Code of conduct
LAM Code of conductLAM Code of conduct
LAM Code of conduct
 
RLPD - OER MOOC
RLPD - OER MOOCRLPD - OER MOOC
RLPD - OER MOOC
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
New Technology for Information Services
New Technology for Information ServicesNew Technology for Information Services
New Technology for Information Services
 
digital law for GLAM
digital law for GLAMdigital law for GLAM
digital law for GLAM
 
20180919 digital-collections
20180919 digital-collections20180919 digital-collections
20180919 digital-collections
 
Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)
 
20180828 digital-archives
20180828 digital-archives20180828 digital-archives
20180828 digital-archives
 
Local Wisdom Information : How to
Local Wisdom Information : How toLocal Wisdom Information : How to
Local Wisdom Information : How to
 
201403 etda-library-settup
201403 etda-library-settup201403 etda-library-settup
201403 etda-library-settup
 
201403 etda-library
201403 etda-library201403 etda-library
201403 etda-library
 

animation-gif-by-firework

  • 1. สรางภาพ Animation GIF ดวย Macromedia Fireworks ภาพที่นําเสนออยูบนอินเทอรเน็ตนั้นจะมีภาพทั้งที่เปนภาพนิ่งและภาพเคลื่อนไหว เพื่อดึงดูดใหผูสนใจ เขามายังเว็บไซตของเรา แตในการสรางภาพเคลื่อนไหวนั้นจําเปนที่จะตองหาโปรแกรมมาใชในการสราง แตยังมี หลายทานที่ไมทราบวาโปรแกรมในชุดของ Macromedia ก็มีโปรแกรมที่สรางภาพ Animation GIF ที่ นอกเหนือจาก Macromedia Flash นั่นก็คือ Macromedia Fireworks ที่ใชงานงายไมยาก และไมตองเสียเงินซื้อ ซอฟตแวรมาติดตั้งเพิ่มเติมแตอยางใด แตกอนจะเริ่มสราง Animation GIF กันมาทําความเขาใจในเรื่อง ภาพเคลื่อนไหว (Animation) กันกอน ภาพเคลื่อนไหว (Animation) ก็คือชุดลําดับของภาพนิ่ง เปนการนําภาพนิ่งหลายๆ ภาพ มาลําดับกันอยาง ตอเนื่อง เพื่อใหปรากฏเปนการเคลื่อนไหวบนแผนระนาบ ซึ่งก็คือ จอภาพ แผนกระดาษ และการมองเห็นภาพ เหลานี้เปนภาพเคลื่อนไหว ก็เพราะปรากฏการณ "ภาพติดตา" - Persistence of vision นั่นเอง ปจจุบัน มีการนําคอมพิวเตอรมาใชเปนเครื่องมือสราง ลําดับภาพเคลื่อนไหว โดยการสรางภาพกราฟกที ละภาพ (หรือเรียกวา "เฟรม") วัตถุแตละเฟรม มีการเปลี่ยนแปลงของ "ตัวแปร" เชน ตําแหนงวัตถุ, ขนาด, การ หมุน, การแปลงรูปราง, สี เปนตน ทีละนอย การเปลี่ยนแปลงของตัวแปรเหลานั้น อาศัย "หลักการประมาณคา ในชวงระหวางภาพแรก กับภาพถัดไป" สรางภาพ Animation แบบ 2 มิติ เปนการสรางภาพขึ้นมาทีละเฟรมหรือนําภาพมาวางไวบนเฟรมโดย 1 เฟรมตอ 1 รูปและกําหนดให โปรแกรมแสดงผลที่ไดจากภาพหลายๆ เฟรมตอเนื่องกันดวยความเร็วที่กําหนด จนภาพที่ไดดูเหมือนเกิดการ เคลื่อนไหวขึ้น Frame 1 Frame 2 Frame 3
  • 2. Frame 4 Frame 5 Frames 6 ตัวอยางการสรางภาพขึ้นมาทีละเฟรมและแสดงตอเนื่องกันจนเกิดเปนภาพเคลื่อนไหว สรางภาพ Animation GIF เพื่อใชงานบนเว็บเพจ ในขั้นตอนนี้ลองมาสรางภาพเคลื่อนไหวแบบงายๆ กันดูครับ 1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300x250 Pixels และ Resolution เปน 72 ดังภาพ 2. สรางวัตถุขึ้นมาหนึ่งรูป (รูปอะไรก็ได) หรือจะนํารูปภาพเขามาใชก็ได ในตัวอยางจะเปนการนํา รูปภาพเขามาเพื่อใหภาพเคลื่อนไหว ดวยการเปดไฟลภาพที่ตองการ แสดงการนํารูปจากภายนอกเขามาในโปรแกรม
  • 3. 3. ใชเครื่องมือ คลิกและลากเมาสเปนกรอบรอบรูปหรือวัตถุนี้ทั้งหมดเพื่อแกไขหรือปรับรูป ตามที่ตองการ 4. คลิกเมนู Modify, Symbol, Convert to Symbol เพื่อเปลี่ยนวัตถุท่ีถูกเลือกใหเปนสัญลักษณ หรือกด ปุม F8 ก็จะไดผลลัพธเหมือนกัน (ตองเลือกรูปกอนทุกครั้งถึงจะสามารถทํางานที่คําสั่งนี้ได) 5. คลิกเลือก Animation เพื่อเปลี่ยนวัตถุใหเปนภาพเคลื่อนไหว 6. คลิกปุม OK 7. กําหนดจํานวนเฟรมที่ตองการสรางภาพเคลื่อนไหว ลงในชอง Frames 8. กําหนดระยะทางที่ตองการใหวัตถุเคลื่อนที่ ลงในชอง Move ในที่นี้ระยะทางจะมีหนวยเปน Pixel ตามหนวยของกระดานวาดภาพที่กําหนดไวในตอนตน 9. กําหนดทิศทางในการเคลื่อนที่ของวัตถุ ทิศทางดังกลาวจะมีหนวยเปนองศา 10. คลิกปุม OK กําหนดจํานวนเฟรม กําหนดระยะทาง กําหนดทิศทางในการเคลื่อนที่ สําหรับคาในชองอื่นๆ ใหใชคาที่ทางโปรแกรมใหมากอนนะครับ โดยจะขออธิบายรายละเอียดใน หัวขอตอไป เพื่อใหเขาใจยิ่งขึ้น
  • 4. 11. โปรแกรมจะสรางเสนทางการเคลื่อนที่ และสรางเฟรมขึ้นมาตามจํานวนเฟรมที่กําหนดไวกอน หนานี้ โปรแกรมจะสรางเสนทางในการเคลื่อนที่ให แสดงเสนทางการเคลื่อนที่ของรูปตามคาที่กําหนด 12. คลิกปุม เพื่อดูการเคลื่อนไหวที่เกิดขึ้น
  • 5. แกไขการเคลื่อนที่ของภาพ เมื่อการเคลื่อนที่ของภาพยังไมถูกใจ คุณสามารถที่จะแกไขไดจาก Stage เลย ไมตองเขาไปแกไขใน หนาตางคําสั่งใดๆ ใหวุนวาย 1. คลิกปุม เพื่อหยุดการทํางานกอนหากของใครยังทํางานอยู 2. คลิกปุม เพื่อกลับมาเริ่มทํางานที่เฟรมแรก คําถาม : แลวจะรูไดอยางไรวาตอนนี้อยูที่เฟรมแรก หรือเฟรมอื่นอยู คําตอบ : ในชุดเครื่องมือ นี้จะมีตัวเลขแสดงอยู ตัวเลขที่เห็น นี้คือ เฟรมที่ภาพแสดผลอยู ดังภาพคือ ตอนนี้อยูเฟรมที่ 5 3. จะเห็นเสนทางการเคลื่อนที่ปรากฏขึ้นมา ใหคลิกเมาสคางไวบนจุดสีแดง ซึ่งเปนจุดปลายของ การเคลื่อนที่ และลากเมาสลงมาดานลาง หรือจะขยายออกเพื่อใหภาพนี้เคลื่อนไหวไดไกลขึ้นก็ได ในอีกทางหนึ่งจะหดใหสั้นก็สามารถทําได ดังนั้นการกระทําในลักษณะนี้ก็เพื่อที่จะยายตําแหนงจุด ปลายดังกลาวไปตามทิศทางที่ตองการ แสดงการแกไขวัตถุใหเคลื่อนที่ไปอีกทาง 4. คลิกปุม เพื่อดูผลลัพธอีกครั้ง กําหนดความเขม - จางของวัตถุ เมื่อไดนําวัตถุมาสรางภาพเคลื่อนไหวแลวนั้น แตภาพที่เคลื่อนไหวนี้นั้นอยากจะเพิ่มคุณสมบัติพิเศษ ใหกับงานชิ้นนี้อีกหนอยดวยการกําหนดความเขม-จางใหกับวัตถุ คือตองการใหวัตถุที่แสดงผลนี้มีความจางกอน แลวคอยเขม
  • 6. นอกจากจะกําหนดความเขม - จางของวัตถุในแตละเฟรมจาก Layer Panel แลว คุณยังสามารถสั่งให โปรแกรมกําหนดความเขม - จางในเฟรมตางๆ โดยอัตโนมัติอีกดวย 1. คลิกบนวัตถุที่สรางขึ้น เพื่อเลือกการแกไขความเขม- จางในเฟรมตางๆ 2. คลิกเมนู Modify, Animation, Settings เพื่อแกไขคาตางๆ ในการเคลื่อนที่ 3. ภายในหนาตาง Animate กําหนดคาความเขม - จางของวัตถุในชอง Opacity เทากับ 40 to 100 เพื่อ กําหนดใหภาพจางลงเทากับ 40 หนวยในเฟรมแรก และคอยๆ เขมขึ้นจนถึง 100 หนวยในเฟรม สุดทาย สวนในเฟรมที่เหลือโปรแกรมจะคํานวณใหโดยอัตโนมัติ ไมตองมากําหนดที่ละเฟรมให เสียเวลา 4. คลิกปุม OK 5. คลิกปุม Play เพื่อดูผลลัพธ 6. ผลลัพธ ภาพจะเริ่มตนจากจางมาก และคอยๆ เขมขึ้นในเฟรมตอไปจนถึงเขมที่สุดตามที่กําหนดไว ในเฟรมสุดทาย
  • 7. การยอ - ขยายขนาดของวัตถุขณะเคลื่อนที่ เชนเดียวกับการกําหนดความเขม - จางของวัตถุ คุณสามารถใชวิธีเดียวกันมากําหนดขนาดใน การยอ - ขยายวัตถุขณะเกิดการเคลื่อนที่ไดดวย 1. คลิกเลือกวัตถุที่ตองการแกไข 2. คลิกเมนู Modify, Animation, Settings เพื่อแกไขคาในการเคลื่อนที่ 3. ภายในหนาตาง Animate กําหนดคาการยอ-ขยายในชอง Scale = 40 เพื่อกําหนดใหวัตถุคอยๆ ยอ ขนาดลงจนเหลือ 35% ในเฟรมสุดทาย 4. คลิกปุม OK 5. คลิกปุม Play เพื่อดูผลลัพธ 6. ผลลัพธ ภาพจะคอยๆ ยอขนาดลงจนถึง 35% สรางภาพเคลื่อนไหวแบบเปลี่ยนภาพไปเรื่อยๆ นอกจากการสรางภาพเคลื่อนไหวใหเคลื่อนที่ไปเรื่อยๆ แลว คุณยังสามารถนําภาพที่อยูในเครื่องของคุณ ภาพที่หามาจากอินเทอรเน็ต หรือจะเปนภาพที่ถายจากกลองดิจทัลก็สามารถที่จะนํามาสรางภาพเคลื่อนไหวได ิ หมดโดยใหนําเขามาใสไวในแตละเฟรม เพื่อกําหนดใหเปนภาพเคลื่อนไหว การนําภาพตางๆ มาสราง ภาพเคลื่อนไหวทําไดดังนี้ 1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300x250 Pixels และ Resolution เปน 72 dpi 2. นําภาพที่มีอยูในเครื่องของคุณใสลงไปบนกระดานวาดภาพ ดวยคําสั่ง File, Import 3. เปดพาเนลของเฟรมขึ้นมา เพื่อสรางภาพในเฟรมอื่นๆ ดวยการไปที่เมนู Window, Frames จะ ปรากฏพาเนล Frames ทางดานขวาของโปรแกรม 4. คลิกปุม เพื่อสรางเฟรมขึ้นมาใหม 5. ในเฟรมที่สรางขึ้นมาใหม ใหนําภาพที่ตองการเปลี่ยนใสลงไปดวยวิธีการ Import เชนเดียวกับ ขั้นตอนที่ 2
  • 8. 6. ตองการใหภาพเปลี่ยนก็ใหทําขั้นตอนที่ 2 ซ้ําไปเรื่อยๆ จนดูเหมือนภาพเคลื่อนไหวได 1. กําหนดความกวางความสูงของ Stage 3. เปด Frame Panel 2. นําภาพเขามาไวบน Stage 5. นําภาพใสลงไปในเฟรม ใหมที่เพิ่มเขามา 4. สรางเฟรมขึ้นมาใหม 7. เมื่อกําหนดเฟรมและใสภาพลงไปใหเฟรมจนครบตามที่ตองการแลว ก็ใหคลิกปุม Play เพื่อดู ภาพเคลื่อนไหวที่เกิดขึ้น 8. ผลลัพธ โปรแกรมจะเปลี่ยนภาพไปตามเฟรมที่ไดนําภาพมาไว จนดูเหมือนภาพจะเคลื่อนไหวได
  • 9. 9. ถาในกรณีที่ภาพแสดงผลเร็วไปสามารถเพิ่มความหนวงใหกับภาพไดดวยการปรับ ตัวเลขการ แสดงผลใหเพิ่มขึ้นโดยดับเบิลคลิกที่ ตัวเลขหลังเฟรมที่ตองการ แลวกําหนดตัวเลขลงไป (30 = 0.30 วินาที) จะแสดงผลหนวงเวลาที่ 0.30 วินาทีกอนเปลี่ยนภาพตอไป ผลลัพธที่ไดภาพก็จะ แสดงผลชาขึ้นนิดหนอย ทําใหเห็นภาพชัดขึ้น 9. ดับเบิลคลิกที่ตัวเลขเพื่อแกไข สรางตัวอักษรวิ่ง การสรางภาพเคลื่อนไหวอีกแบบหนึ่งซึ่งพบเห็นบอยๆ บนเว็บไซตนอกจากภาพกระพริกตามหัวขอเมื่อ สักครูแลว อีกแบบก็คือ การสรางตัวอักษรวิ่งบนจอภาพ ตัวอักษรวิ่งดังกลาวจะเปนภาพเคลื่อนไหวประมาณ 40-50 เฟรม วิธีการสรางก็มีวิธการงายๆ คือสรางขึ้นมาทีละเฟรมเทานั้น จะใชเวลาเทาไหรน้ันก็แลวแตละงานวา ี ตองการใหเคลื่อนไหวแคไหน ซึ่งก็คงจะใชเวลาคอนขางนานกวาจะทําเสร็จ แตถาคุณไมอยากเสียเวลามากขนาดนั้น ลองศึกษาการสรางภาพเคลื่อไหวแบบอัตโนมัติจากตัวอยางนี้ดู จะชวยลดเวลาทํางานลงเหลือแคไมมีนาทีเทานั้น 1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300 x 100 Pixels และ Resolution เปน 72 dpi 2. สรางกรอบสี่เหลี่ยมขึ้นมารอบกระดานวาดภาพ พรอมทั้งกําหนดความหนาของเสน และลวดลาย ตามตองการ โดนใหสพื้นเปนแบบไมมีสี ถาไมกําหนดลักษณะนี้สี้พื้นจะบังขอความทําให ี การแสดงผลมองไมเห็น
  • 10. 3. สรางตัวอักษรขึ้นมาตรงกลางของกระดานวาดภาพ ใชขนาดประมาณ 40 pixels 4. แปลงขอความใหเปน Symbol ดวยการไปที่เมนู Modify, Symbol, Convert to Symbol… หรือจะ กดปุม F8 เลยก็ได 5. ตั้งชื่อ Symbol ในชอง Name 6. เลือกประเภท Symbol เปนแบบ Graphic 7. คลิกปุม OK 8. จากนั้นใหลบขอความที่สรางไวในขั้นตอนที่ 3 ออกจาก Stage ใหเหลือแคกรอบก็พอ 9. ใหเปด Library Panel ขึ้นมาดวยการไปที่เมนู Windows, Library เมื่อคลิกแลวจะมีหนาตางขึ้นมาที่ ทางขวา 10. คลิกเมาสคางไวบนตัวอักษรใน Library และลากเมาสมาปลอยบน stage เปรียบเสมือนการคัดลอก ตัวอักษรดังกลาวขึ้นมาใชงาน 11. ยายตําแหนงตัวอักษรมาทางขวาของจอภาพ ใหตัวอักษรตัวแรกโผลพนกรอบออกมาเล็กนอย
  • 11. 12. ลากตัวอักษรออกมาอีกชิ้น แลวนําไปไวทางซายโดยใหขอความสุดทายโผลอออกมาเล็กนอย เชนเดียวกัน ลากขอความมาวางไวบน stage 13. คลิกเลือกตัวอักษรทั้งสองขอความ ดวยวิธีกดปุม S บนคียบอรดคางไวขณะเลือก 14. เมื่อมาถึงขั้นตอนนี้ก็จะเปนการกําหนดใหโปรแกรมสรางภาพเคลื่อนไหวใหกับเฟรมตางๆ โดย อัตโนมัติ 15. เมื่อเลือกขอความทั้งสองเรียบรอยแลวใหคลิกที่เมนู Modify, Symbol, Tween Instances เพื่อ กําหนดการเคลื่อนไหวจากซายไปขวาโดยอัตโนมัติ 16. กําหนดจํานวน Step ของการเคลื่อนที่ในชอง Steps ใหกําหนดคาเปน 30
  • 12. 17. ใหคลิกเครื่องหมายถูกหนา Distribute to Frames เพื่อสั่งใหโปรแกรมสรางเฟรมขึ้นมาจาก Step ที่ กําหนด 18. คลิกปุม OK 19. โปรแกรมจะคํานวณ Step การเคลื่อนที่ และสรางเฟรมขึ้นมา 30 เฟรมตามจํานวน Step ที่กําหนด จํานวนเฟรมที่โปรแกรมสรางให 20. ผลลัพธ ตัวอักษรจะวิ่งจากซายไปขวา และวิ่งตอเนื่องจากการกําหนดจํานวนรอบของการเลน ภาพเคลื่อนไหว แตการแสดงผลนี้ยังไมสมบูรณจะเห็นวากรอบขอความจะมีเฉพาะที่เฟรมแรก เทานั้น ดังนั้นจะตองมีขึ้นตอนเพิ่มอีกนิดเพื่อแกไขปญหานี้ คัดลอกวัตถุที่เลือกลงในเฟรมที่กาหนด ํ 1. ใหกลับมาทํางานที่เฟรมที่ 1 และคลิกเลือกกรอบสี่เหลี่ยมที่สรางขึ้น 2. คลิกปุม ที่อยูมุมขวาของพาเนลเฟรม 3. คลิกเลือก Copy to Frames จากตัวเลือกที่ปรากฏขึ้น เพื่อคัดลอกกรอบสี่เหลี่ยมที่เลือกไปไวใน เฟรมที่กําหนด
  • 13. 4. ภายในหนาตาง Copy to Frames คลิกเลือก All Frames เพื่อกําหนดใหโปรแกรมคัดลอกกรอบ สี่เหลี่ยมไปไวในเฟรมทั้งหมดที่มีอยู เลือก All Frames 5. คลิกปุม OK 6. ผลลัพธที่ไดกรอบที่ไดคัดลอกเมื่อสักครูจะปรากฏอยูบันเฟรมทุกเฟรม การแสดงผลจะสมบูรณขึ้น นอกจากการคัดลอกวัตถุท่ถูกเลือกไปไวในทุกๆ เฟรมแลวคุณยังสามารถเลือกกําหนดการ ี คัดลอกภาพแบบอื่นๆ ไดอีก ดังนี้ o Previous Frames คือการคัดลอกไปไวในเฟรมกอนหนาเฟรมที่ทํางานอยู o Next Frame คือการคัดลอกไปไวในเฟรมถัดไปจากเฟรมที่ทํางานอยู o Range คือการคัดลอกไปไวในเฟรมที่กําหนด เชน จากเฟรมที่ 2-30 เปนตน ปรับความเร็วในการแสดงผล การแสดงผลภาพเคลื่อนไหวที่ผานมาเปนการแสดงผลดวยความเร็วที่โปรแกรมมาในตอนแรก ความเร็ว ในการเคลื่อนที่ระหวางเฟรมสามารถปรับเปลี่ยนได เพื่อใหเหมาะสมกับการเคลื่อนไหวของแตละชนิด ปรับความเร็วในการแสดงภาพเฉพาะเฟรมที่ถูกเลือก 1. คลิกปุม บน Stage ไปเรื่อยๆ จนพบเฟรมที่ตัวอักษรอยูตรงกลางของกระดาน 2. ภายในเฟรมพาเนล ใหดับเบิ้ลคลิกบนตัวเลข แถวหลังสุดของเฟรมดังกลาว เพื่อแกไขเวลาที่ใช แสดงภาพในเฟรมนั้น
  • 14. 3. กําหนดคา 300 ลงในชอง Frame Delay ที่ปรากฎขึ้น เพื่อกําหนดใหเฟรมดังกลาวใชเวลาในการ แสดงภาพ 300/100 second หรือ 3 วินาที่น่ันเอง 4. คลิกปุม เพื่อแสดงผล 5. ผลลัพธที่ได นั้นจะเปนลักษณะที่วาภาพจะคอยๆ เลื่อนเขามาตามเฟรมที่กําหนดเวลาไว แลวภาพ จะหยุดสักพักหนึ่ง แลวคอยเลื่อนตอไปตามเวลาที่กําหนดลงไวในเฟรม 2. ดับเบิลคลิก 3. กําหนดคา 4. แสดงผล 1. คลิกเลื่อนตัวอักษรในอยูตรงกลาง ปรับความเร็วในการแสดงภาพของเฟรมที่มีอยูทั้งหมด 1. ภายใน Frame Panel ใหคลิกเลือกเฟรมที่ตองการแกไขทั้งหมด ดวยการกดปุม S บนคียบอรด คางไวขณะเลือก (การใชปุม S ชวยจะใชในกรณีที่เฟรมนั้นตองตอกันตลอด) หรือจะใชปุม C เลือกก็ได (การใชปม C ชวยในการเลือกนั้นเฟรมที่ตองการเลือกไมจําเปนที่จะตองตอกัน ุ สามารถเลือกขามเฟรมได) 2. เมื่อเลือกเฟรมที่ตองการแกไขไดแลว ใหดับเบิ้ลบนตัวเลขในชองดานหลังสุดของเฟรมใดเฟรม หนึ่งเพื่อกําหนดเวลาในการแสดงภาพ 3. กําหนดเวลาในการแสดงภาพใหเปน 50/100 หรือครึ่งวินาทีนั่นเอง 4. ผลลัพธที่ไดจากการกําหนดเวลาในการแสดงภาพจะแสดงผลตามเวลาที่ไดกําหนดในเฟรมทั้งหมด ที่เลือก ลดขนาดของไฟล ไฟลที่เกิดจากการสรางภาพเคลื่อนไหว จะมีขนาดใหญกวาไฟลปกติมากเพราะฉะนั้น ควรจะระวังเรื่อง ขนาดของภาพใหดี
  • 15. นอกจากการระวังดวยการสรางภาพใหมีขนาดเล็กๆ แคเพียงพอกับการใชงานแลวนั้น ก็ยังมีวิธีที่จะชวย ลดขนาดไฟลใหเล็กลงมาไดโดยผลลัพธที่เกิดขึ้นจะไมเสียคุณภาพไป กําหนดสีใหพอดีกับการใชงาน เพื่อความรวดเร็วในการ Load 1. คลิกเมนู File, Image Preview เพื่อกําหนดรูปแบบของไฟลที่จะใชในการบันทึก 2. ภายในหนาตาง Image Preview คลิกเลือกชนิดของไฟลแบบ Animate Gif จากชอง Format 3. คลิกเลือกจํานวนสีที่จะใชในภาพที่ตองการบันทึก ในที่นี้ภาพของผูเขียนมี 3 สีเทานั้น (จากตัวอยาง เมื่อสักครู) คือ ดํา, แดง, ขวา จึงเลือกจํานวนสีเพียงแค 4 สีเทานั้น 4. คลิกใหมีเครื่องหมายถูกหนาชอง Remove Unused Colors เพื่อสั่งใหโปรแกรมตัดสีที่ไมไดใชงาน ออก 5. คลิกปุม Export เพื่อสงไฟลที่ไดออกไปเตรียมการบันทึกไฟลชนิดตางๆ ตอไป 2. เลือกชนิดของไฟล 3. เลือกจํานวนสีที่ใช 4. คลิกเลือก 5. สงไฟลออกไป การกําหนดจํานวนสีใหเพียงพอกับการใชงานจะทําใหขนาดของไฟลที่ไดเล็กลงโดย คุณภาพจะไมเสียไป (ตองเลือกสีใหครบตามสีที่มีในภาพ) 6. ภายในหนางตาง Export คลิกเลือกโฟลเดอรที่ตองการบันทึกไฟล จากชอง Save in 7. พิมพชื่อที่ตองการใชในการบันทึกลงในชอง file name 8. คลิกเลือกชนิดของไฟลแบบ Image and HTML จากชอง Export
  • 16. 9. คลิกเลือก Export HTML File จากชอง HTML 10. คลิกใหมีเครื่องหมายถูกหนา Put image in subfolder 11. คลิกปุม Export เพื่อบันทึกไฟลทีไดกําหนดคาไว 12. หลังจากบันทึกไฟลลงในโฟลเดอรที่กําหนดไวแลวใหดับเบิ้ลคลิกบนไฟลในโฟลเดอรดังกลาว เพื่อดูผลที่เกิดขึ้นบนเว็บเบราวเซอร 13. ทดลองแสดงผลดวยการดับเบิ้ลคลิกที่ไฟลนามสกุล htm โปรแกรมก็จะเปดเบราวเซอรแลว แสดงผลใหโดยอัตโนมัติ ดวยขั้นตอนตางๆ ที่ไดแนะนําไปนั้น เปนขั้นตอนในการสรางงาน Animation GIF ดวยโปรแกรม Macromedia Fireworks โดยจะเห็นวาขั้นตอนตางๆ นั้นไมยากเลยใชไหมครับ และผมก็ไดมีตัวอยางหลายๆ แบบ ใหลองทํากันดู สุดทายนี้กขอใหสนุกกับการสรางสรรคงาน Animation GIF เพื่อประกอบกับงานนําเสนอตางๆ ็ โดยเฉพาะบนเว็บไซตนะครับ