gif animation with macromedia fireworks

16
สรางภาพ 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

Upload: boonlert-aroonpiboon

Post on 25-Dec-2014

1.376 views

Category:

Education


0 download

DESCRIPTION

สร้างกราฟ Gif Animation ด้วย Macromedia Fireworks

TRANSCRIPT

Page 1: Gif Animation with Macromedia Fireworks

สรางภาพ 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

Page 2: Gif Animation with Macromedia Fireworks

Frame 4 Frame 5 Frames 6

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

สรางภาพ Animation GIF เพ่ือใชงานบนเว็บเพจ

ในขั้นตอนนี้ลองมาสรางภาพเคลื่อนไหวแบบงายๆ กันดูครับ

1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300x250 Pixels และ Resolution เปน 72 ดังภาพ

2. สรางวัตถุขึ้นมาหนึ่งรูป (รูปอะไรก็ได) หรือจะนํารูปภาพเขามาใชก็ได ในตัวอยางจะเปนการนํา

รูปภาพเขามาเพื่อใหภาพเคลื่อนไหว ดวยการเปดไฟลภาพที่ตองการ

แสดงการนํารูปจากภายนอกเขามาในโปรแกรม

Page 3: Gif Animation with Macromedia Fireworks

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

4. คลิกเมนู Modify, Symbol, Convert to Symbol เพื่อเปลี่ยนวัตถุที่ถูกเลือกใหเปนสัญลักษณ หรือกด

ปุม F8 ก็จะไดผลลัพธเหมือนกัน (ตองเลือกรูปกอนทุกครั้งถึงจะสามารถทํางานที่คําสั่งนี้ได)

5. คลิกเลือก Animation เพื่อเปลี่ยนวัตถุใหเปนภาพเคลื่อนไหว

6. คลิกปุม OK

7. กําหนดจํานวนเฟรมที่ตองการสรางภาพเคลื่อนไหว ลงในชอง Frames

8. กําหนดระยะทางที่ตองการใหวัตถุเคลื่อนที่ ลงในชอง Move ในที่นี้ระยะทางจะมีหนวยเปน Pixel ตามหนวยของกระดานวาดภาพที่กําหนดไวในตอนตน

9. กําหนดทิศทางในการเคลื่อนที่ของวัตถุ ทิศทางดังกลาวจะมีหนวยเปนองศา

10. คลิกปุม OK

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

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

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

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

Page 4: Gif Animation with Macromedia Fireworks

11. โปรแกรมจะสรางเสนทางการเคลื่อนที่ และสรางเฟรมขึ้นมาตามจํานวนเฟรมที่กําหนดไวกอนหนานี้

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

12. คลิกปุม เพื่อดูการเคลื่อนไหวที่เกิดขึ้น

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

Page 5: Gif Animation with Macromedia Fireworks

แกไขการเคล่ือนท่ีของภาพ

เมื่อการเคลื่อนที่ของภาพยังไมถูกใจ คุณสามารถที่จะแกไขไดจาก Stage เลย ไมตองเขาไปแกไขในหนาตางคําสั่งใดๆ ใหวุนวาย

1. คลิกปุม เพื่อหยุดการทํางานกอนหากของใครยังทํางานอยู

2. คลิกปุม เพื่อกลับมาเริ่มทํางานที่เฟรมแรก

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

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

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

กําหนดความเขม - จางของวัตถุ

เมื่อไดนําวัตถุมาสรางภาพเคลื่อนไหวแลวนั้น แตภาพที่เคลื่อนไหวนี้นั้นอยากจะเพิ่มคุณสมบัติพิเศษใหกับงานชิ้นนี้อีกหนอยดวยการกําหนดความเขม-จางใหกับวัตถุ คือตองการใหวัตถุที่แสดงผลนี้มีความจางกอนแลวคอยเขม

คําถาม : แลวจะรูไดอยางไรวาตอนนี้อยูที่เฟรมแรก หรือเฟรมอื่นอยู

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

Page 6: Gif Animation with Macromedia Fireworks

นอกจากจะกําหนดความเขม - จางของวัตถุในแตละเฟรมจาก Layer Panel แลว คุณยังสามารถสั่งใหโปรแกรมกําหนดความเขม - จางในเฟรมตางๆ โดยอัตโนมัติอีกดวย

1. คลิกบนวัตถุที่สรางขึ้น เพื่อเลือกการแกไขความเขม- จางในเฟรมตางๆ

2. คลิกเมนู Modify, Animation, Settings เพื่อแกไขคาตางๆ ในการเคลื่อนที่

3. ภายในหนาตาง Animate กําหนดคาความเขม - จางของวัตถุในชอง Opacity เทากับ 40 to 100 เพื่อกําหนดใหภาพจางลงเทากับ 40 หนวยในเฟรมแรก และคอยๆ เขมขึ้นจนถึง 100 หนวยในเฟรมสุดทาย สวนในเฟรมที่เหลือโปรแกรมจะคํานวณใหโดยอัตโนมัติ ไมตองมากําหนดที่ละเฟรมใหเสียเวลา

4. คลิกปุม OK

5. คลิกปุม Play เพื่อดูผลลัพธ

6. ผลลัพธ ภาพจะเริ่มตนจากจางมาก และคอยๆ เขมขึ้นในเฟรมตอไปจนถึงเขมที่สุดตามที่กําหนดไวในเฟรมสุดทาย

Page 7: Gif Animation with Macromedia Fireworks

การยอ - ขยายขนาดของวตัถุขณะเคลื่อนท่ี

เชนเดียวกับการกําหนดความเขม - จางของวัตถุ คุณสามารถใชวิธีเดียวกันมากําหนดขนาดใน การยอ - ขยายวัตถุขณะเกิดการเคลื่อนที่ไดดวย

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

Page 8: Gif Animation with Macromedia Fireworks

6. ตองการใหภาพเปลี่ยนก็ใหทําขั้นตอนที่ 2 ซ้ําไปเรื่อยๆ จนดูเหมือนภาพเคลื่อนไหวได

7. เมื่อกําหนดเฟรมและใสภาพลงไปใหเฟรมจนครบตามที่ตองการแลว ก็ใหคลิกปุม Play เพื่อดู

ภาพเคลื่อนไหวที่เกิดขึ้น

8. ผลลัพธ โปรแกรมจะเปลี่ยนภาพไปตามเฟรมที่ไดนําภาพมาไว จนดูเหมือนภาพจะเคลื่อนไหวได

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

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

3. เปด Frame Panel

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

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

Page 9: Gif Animation with Macromedia Fireworks

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

สรางตัวอักษรวิ่ง

การสรางภาพเคลื่อนไหวอีกแบบหนึ่งซึ่งพบเห็นบอยๆ บนเว็บไซตนอกจากภาพกระพริกตามหัวขอเมื่อสักครูแลว อีกแบบก็คือ การสรางตัวอักษรว่ิงบนจอภาพ ตัวอักษรว่ิงดังกลาวจะเปนภาพเคลื่อนไหวประมาณ 40-50 เฟรม วิธีการสรางก็มีวิธีการงายๆ คือสรางขึ้นมาทีละเฟรมเทานั้น จะใชเวลาเทาไหรนั้นก็แลวแตละงานวาตองการใหเคลื่อนไหวแคไหน ซึ่งก็คงจะใชเวลาคอนขางนานกวาจะทําเสร็จ

แตถาคุณไมอยากเสียเวลามากขนาดนั้น ลองศึกษาการสรางภาพเคลื่อไหวแบบอัตโนมัติจากตัวอยางนี้ดู จะชวยลดเวลาทํางานลงเหลือแคไมมีนาทีเทานั้น

1. สรางไฟลงานขึ้นมาใหมหนึ่งไฟลขึ้นมากําหนดขนาดเปน 300 x 100 Pixels และ Resolution เปน 72 dpi

2. สรางกรอบสี่เหลี่ยมขึ้นมารอบกระดานวาดภาพ พรอมทั้งกําหนดความหนาของเสน และลวดลายตามตองการ โดนใหสีพ้ืนเปนแบบไมมีสี ถาไมกําหนดลักษณะนี้สี้พ้ืนจะบังขอความทําใหการแสดงผลมองไมเห็น

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

Page 10: Gif Animation with Macromedia Fireworks

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. ยายตําแหนงตัวอักษรมาทางขวาของจอภาพ ใหตัวอักษรตัวแรกโผลพนกรอบออกมาเล็กนอย

Page 11: Gif Animation with Macromedia Fireworks

12. ลากตัวอักษรออกมาอีกช้ิน แลวนําไปไวทางซายโดยใหขอความสุดทายโผลอออกมาเล็กนอย เชนเดียวกัน

13. คลิกเลือกตัวอักษรทั้งสองขอความ ดวยวิธีกดปุม S บนคียบอรดคางไวขณะเลือก

14. เมื่อมาถึงขั้นตอนนี้ก็จะเปนการกําหนดใหโปรแกรมสรางภาพเคลื่อนไหวใหกับเฟรมตางๆ โดยอัตโนมัติ

15. เมื่อเลือกขอความทั้งสองเรียบรอยแลวใหคลิกที่เมนู Modify, Symbol, Tween Instances เพื่อกําหนดการเคลื่อนไหวจากซายไปขวาโดยอัตโนมัติ

16. กําหนดจํานวน Step ของการเคลื่อนที่ในชอง Steps ใหกําหนดคาเปน 30

ลากขอความมาวางไวบน stage

Page 12: Gif Animation with Macromedia Fireworks

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

18. คลิกปุม OK

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

20. ผลลัพธ ตัวอักษรจะวิ่งจากซายไปขวา และว่ิงตอเนื่องจากการกําหนดจํานวนรอบของการเลน

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

คัดลอกวัตถุท่ีเลือกลงในเฟรมที่กําหนด

1. ใหกลับมาทํางานที่เฟรมที่ 1 และคลิกเลือกกรอบสี่เหลี่ยมที่สรางขึ้น

2. คลิกปุม ที่อยูมุมขวาของพาเนลเฟรม

3. คลิกเลือก Copy to Frames จากตัวเลือกที่ปรากฏขึ้น เพื่อคัดลอกกรอบสี่เหลี่ยมที่เลือกไปไวในเฟรมที่กําหนด

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

Page 13: Gif Animation with Macromedia Fireworks

4. ภายในหนาตาง Copy to Frames คลิกเลือก All Frames เพื่อกําหนดใหโปรแกรมคัดลอกกรอบสี่เหลี่ยมไปไวในเฟรมทั้งหมดที่มีอยู

5. คลิกปุม OK

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

ปรับความเร็วในการแสดงผล

การแสดงผลภาพเคลื่อนไหวที่ผานมาเปนการแสดงผลดวยความเร็วที่โปรแกรมมาในตอนแรก ความเร็วในการเคลื่อนที่ระหวางเฟรมสามารถปรับเปลี่ยนได เพื่อใหเหมาะสมกับการเคลื่อนไหวของแตละชนิด

ปรับความเร็วในการแสดงภาพเฉพาะเฟรมที่ถูกเลือก

1. คลิกปุม บน Stage ไปเรื่อยๆ จนพบเฟรมที่ตัวอักษรอยูตรงกลางของกระดาน

2. ภายในเฟรมพาเนล ใหดับเบิ้ลคลิกบนตัวเลข แถวหลังสุดของเฟรมดังกลาว เพื่อแกไขเวลาที่ใชแสดงภาพในเฟรมนั้น

เลือก All Frames

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

o Previous Frames คือการคัดลอกไปไวในเฟรมกอนหนาเฟรมที่ทํางานอยู

o Next Frame คือการคัดลอกไปไวในเฟรมถัดไปจากเฟรมที่ทํางานอยู

o Range คือการคัดลอกไปไวในเฟรมที่กําหนด เชน จากเฟรมที่ 2-30 เปนตน

Page 14: Gif Animation with Macromedia Fireworks

3. กําหนดคา 300 ลงในชอง Frame Delay ที่ปรากฎขึ้น เพื่อกําหนดใหเฟรมดังกลาวใชเวลาในการแสดงภาพ 300/100 second หรือ 3 วินาที่นั่นเอง

4. คลิกปุม เพื่อแสดงผล

5. ผลลัพธที่ได นั้นจะเปนลักษณะที่วาภาพจะคอยๆ เลื่อนเขามาตามเฟรมที่กําหนดเวลาไว แลวภาพจะหยุดสักพักหนึ่ง แลวคอยเลื่อนตอไปตามเวลาที่กําหนดลงไวในเฟรม

ปรับความเร็วในการแสดงภาพของเฟรมที่มีอยูท้ังหมด

1. ภายใน Frame Panel ใหคลิกเลือกเฟรมที่ตองการแกไขทั้งหมด ดวยการกดปุม S บนคียบอรดคางไวขณะเลือก (การใชปุม S ชวยจะใชในกรณีที่เฟรมนั้นตองตอกันตลอด) หรือจะใชปุม C เลือกก็ได (การใชปุม C ชวยในการเลือกนั้นเฟรมที่ตองการเลือกไมจําเปนที่จะตองตอกัน สามารถเลือกขามเฟรมได)

2. เมื่อเลือกเฟรมที่ตองการแกไขไดแลว ใหดับเบิ้ลบนตัวเลขในชองดานหลังสุดของเฟรมใดเฟรมหนึ่งเพื่อกําหนดเวลาในการแสดงภาพ

3. กําหนดเวลาในการแสดงภาพใหเปน 50/100 หรือครึ่งวินาทีนั่นเอง

4. ผลลัพธที่ไดจากการกําหนดเวลาในการแสดงภาพจะแสดงผลตามเวลาที่ไดกําหนดในเฟรมทั้งหมดที่เลือก

ลดขนาดของไฟล

ไฟลที่เกิดจากการสรางภาพเคลื่อนไหว จะมีขนาดใหญกวาไฟลปกติมากเพราะฉะนั้น ควรจะระวังเรื่องขนาดของภาพใหดี

1. คลิกเลื่อนตัวอักษรในอยูตรงกลาง

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

3. กําหนดคา

4. แสดงผล

Page 15: Gif Animation with Macromedia Fireworks

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

กําหนดสีใหพอดีกับการใชงาน เพื่อความรวดเร็วในการ Load

1. คลิกเมนู File, Image Preview เพื่อกําหนดรูปแบบของไฟลที่จะใชในการบันทึก

2. ภายในหนาตาง Image Preview คลิกเลือกชนิดของไฟลแบบ Animate Gif จากชอง Format

3. คลิกเลือกจํานวนสีที่จะใชในภาพที่ตองการบันทึก ในที่นี้ภาพของผูเขียนมี 3 สีเทานั้น (จากตัวอยางเมื่อสักครู) คือ ดํา, แดง, ขวา จึงเลือกจํานวนสีเพียงแค 4 สีเทานั้น

4. คลิกใหมีเครื่องหมายถูกหนาชอง Remove Unused Colors เพื่อสั่งใหโปรแกรมตัดสีที่ไมไดใชงานออก

5. คลิกปุม Export เพื่อสงไฟลที่ไดออกไปเตรียมการบันทึกไฟลชนิดตางๆ ตอไป

6. ภายในหนางตาง Export คลิกเลือกโฟลเดอรที่ตองการบันทึกไฟล จากชอง Save in

7. พิมพช่ือที่ตองการใชในการบันทึกลงในชอง file name

8. คลิกเลือกชนิดของไฟลแบบ Image and HTML จากชอง Export

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

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

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

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

Page 16: Gif Animation with Macromedia Fireworks

9. คลิกเลือก Export HTML File จากชอง HTML

10. คลิกใหมีเครื่องหมายถูกหนา Put image in subfolder

11. คลิกปุม Export เพื่อบันทึกไฟลทีไดกําหนดคาไว

12. หลังจากบันทึกไฟลลงในโฟลเดอรที่กําหนดไวแลวใหดับเบิ้ลคลิกบนไฟลในโฟลเดอรดังกลาว

เพื่อดูผลที่เกิดขึ้นบนเว็บเบราวเซอร

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

แสดงผลใหโดยอัตโนมัติ

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