Enviar búsqueda
Cargar
animation-gif-by-firework
•
0 recomendaciones
•
434 vistas
Boonlert Aroonpiboon
Seguir
สร้างภาพ Animation GIF ด้วย Macromedia Fireworks
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 16
Descargar ahora
Descargar para leer sin conexión
Recomendados
Photo story
Photo story
อำพร มะนูรีม
GIMP
GIMP
Boonlert Aroonpiboon
Animation
Animation
krubeenan
Docflash8
Docflash8
Orapan Chamnan
flash jigsaw
flash jigsaw
aucharapon theemcle
Photoshop ict
Photoshop ict
Natda Wanatda
Work1
Work1
rdschool
คู่มือFlash CS3
คู่มือFlash CS3
Paweena Phochan
Recomendados
Photo story
Photo story
อำพร มะนูรีม
GIMP
GIMP
Boonlert Aroonpiboon
Animation
Animation
krubeenan
Docflash8
Docflash8
Orapan Chamnan
flash jigsaw
flash jigsaw
aucharapon theemcle
Photoshop ict
Photoshop ict
Natda Wanatda
Work1
Work1
rdschool
คู่มือFlash CS3
คู่มือFlash CS3
Paweena Phochan
คู่มือ Photoshop cs3
คู่มือ Photoshop cs3
charuwarin
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
Jele Raviwan Napijai
คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์
พัน พัน
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
Rattapadol Gunhakoon
Hanfbookflash8
Hanfbookflash8
Praphaphun Kaewmuan
Manual swish max
Manual swish max
Surapong Jakang
Filter photoshop cs5
Filter photoshop cs5
Rattapadol Gunhakoon
Lesson 6
Lesson 6
krunueng1
Flipalbum6
Flipalbum6
Boonlert Aroonpiboon
วิธีการใช้โปรแกรม Microsoft word 4
วิธีการใช้โปรแกรม Microsoft word 4
ชญานิษฐ์ ทบวัน
Digital media animation
Digital media animation
ajpeerawich
Lesson 8
Lesson 8
krunueng1
พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7
Thanawat Boontan
หน่วยที่ 3 1
หน่วยที่ 3 1
Bee Saruta
การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)
Dr.Kridsanapong Lertbumroongchai
ขั้นตอนการใช้ Movie wizard ulead 11
ขั้นตอนการใช้ Movie wizard ulead 11
BussRa ThongThai
Web 2.0 & OSS for Library
Web 2.0 & OSS for Library
Boonlert Aroonpiboon
XnView Resize
XnView Resize
Boonlert Aroonpiboon
NSTDA Knowledge Sharing - User Manual
NSTDA Knowledge Sharing - User Manual
Boonlert Aroonpiboon
Semantic web and library
Semantic web and library
Boonlert Aroonpiboon
Digital Standard and Thai MOST Web site
Digital Standard and Thai MOST Web site
Boonlert Aroonpiboon
EM Ball 01
EM Ball 01
Boonlert Aroonpiboon
Más contenido relacionado
La actualidad más candente
คู่มือ Photoshop cs3
คู่มือ Photoshop cs3
charuwarin
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
Jele Raviwan Napijai
คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์
พัน พัน
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
Rattapadol Gunhakoon
Hanfbookflash8
Hanfbookflash8
Praphaphun Kaewmuan
Manual swish max
Manual swish max
Surapong Jakang
Filter photoshop cs5
Filter photoshop cs5
Rattapadol Gunhakoon
Lesson 6
Lesson 6
krunueng1
Flipalbum6
Flipalbum6
Boonlert Aroonpiboon
วิธีการใช้โปรแกรม Microsoft word 4
วิธีการใช้โปรแกรม Microsoft word 4
ชญานิษฐ์ ทบวัน
Digital media animation
Digital media animation
ajpeerawich
Lesson 8
Lesson 8
krunueng1
พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7
Thanawat Boontan
หน่วยที่ 3 1
หน่วยที่ 3 1
Bee Saruta
การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)
Dr.Kridsanapong Lertbumroongchai
ขั้นตอนการใช้ Movie wizard ulead 11
ขั้นตอนการใช้ Movie wizard ulead 11
BussRa ThongThai
La actualidad más candente
(16)
คู่มือ Photoshop cs3
คู่มือ Photoshop cs3
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
การบรรยายครั้งที่ 7 cma 448 บทที่ 7
คอมพิวเตอร์กราฟิกส์
คอมพิวเตอร์กราฟิกส์
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
การปรับแต่งแสงด้วยเครื่องมือต่างๆ Photoshop cs5
Hanfbookflash8
Hanfbookflash8
Manual swish max
Manual swish max
Filter photoshop cs5
Filter photoshop cs5
Lesson 6
Lesson 6
Flipalbum6
Flipalbum6
วิธีการใช้โปรแกรม Microsoft word 4
วิธีการใช้โปรแกรม Microsoft word 4
Digital media animation
Digital media animation
Lesson 8
Lesson 8
พื้นฐาน Adobe Flash CS3 ตอนที่7
พื้นฐาน Adobe Flash CS3 ตอนที่7
หน่วยที่ 3 1
หน่วยที่ 3 1
การถ่ายภาพเร่งเวลา (Time-Lapse)
การถ่ายภาพเร่งเวลา (Time-Lapse)
ขั้นตอนการใช้ Movie wizard ulead 11
ขั้นตอนการใช้ Movie wizard ulead 11
Destacado
Web 2.0 & OSS for Library
Web 2.0 & OSS for Library
Boonlert Aroonpiboon
XnView Resize
XnView Resize
Boonlert Aroonpiboon
NSTDA Knowledge Sharing - User Manual
NSTDA Knowledge Sharing - User Manual
Boonlert Aroonpiboon
Semantic web and library
Semantic web and library
Boonlert Aroonpiboon
Digital Standard and Thai MOST Web site
Digital Standard and Thai MOST Web site
Boonlert Aroonpiboon
EM Ball 01
EM Ball 01
Boonlert Aroonpiboon
EM academic summary final
EM academic summary final
Boonlert Aroonpiboon
20080522 OSS4libs
20080522 OSS4libs
Boonlert Aroonpiboon
Microsoft PowerPoint
Microsoft PowerPoint
Boonlert Aroonpiboon
PKP Open Harvester Software
PKP Open Harvester Software
Boonlert Aroonpiboon
Open Source Software สำหรับห้องงสมุด
Open Source Software สำหรับห้องงสมุด
Boonlert Aroonpiboon
Myanmar Rarebooks Seminar
Myanmar Rarebooks Seminar
Boonlert Aroonpiboon
STKS Open Source & Freeware
STKS Open Source & Freeware
Boonlert Aroonpiboon
Open Source Software เพื่อการศึกษา
Open Source Software เพื่อการศึกษา
Boonlert Aroonpiboon
Automated Library with OpenBiblio - myLib
Automated Library with OpenBiblio - myLib
Boonlert Aroonpiboon
Digitization KU Library
Digitization KU Library
Boonlert Aroonpiboon
Desktop Author 5
Desktop Author 5
Boonlert Aroonpiboon
Scratch Learning Tools for Kids
Scratch Learning Tools for Kids
Boonlert Aroonpiboon
NSTDA KM
NSTDA KM
Boonlert Aroonpiboon
Destacado
(19)
Web 2.0 & OSS for Library
Web 2.0 & OSS for Library
XnView Resize
XnView Resize
NSTDA Knowledge Sharing - User Manual
NSTDA Knowledge Sharing - User Manual
Semantic web and library
Semantic web and library
Digital Standard and Thai MOST Web site
Digital Standard and Thai MOST Web site
EM Ball 01
EM Ball 01
EM academic summary final
EM academic summary final
20080522 OSS4libs
20080522 OSS4libs
Microsoft PowerPoint
Microsoft PowerPoint
PKP Open Harvester Software
PKP Open Harvester Software
Open Source Software สำหรับห้องงสมุด
Open Source Software สำหรับห้องงสมุด
Myanmar Rarebooks Seminar
Myanmar Rarebooks Seminar
STKS Open Source & Freeware
STKS Open Source & Freeware
Open Source Software เพื่อการศึกษา
Open Source Software เพื่อการศึกษา
Automated Library with OpenBiblio - myLib
Automated Library with OpenBiblio - myLib
Digitization KU Library
Digitization KU Library
Desktop Author 5
Desktop Author 5
Scratch Learning Tools for Kids
Scratch Learning Tools for Kids
NSTDA KM
NSTDA KM
Similar a animation-gif-by-firework
เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐาน
กชพร มณีพงษ์
Photo story
Photo story
อำพร มะนูรีม
Image editing-with-photoscape
Image editing-with-photoscape
Boonlert Aroonpiboon
Namo webeditor 6
Namo webeditor 6
พงศธร ภักดี
คู่มือFlash
คู่มือFlash
Paweena Phochan
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0
usanee31
เทคนิคโฟโต้
เทคนิคโฟโต้
weena22
captivate-flash-courseware
captivate-flash-courseware
Boonlert Aroonpiboon
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
swishmax2
swishmax2
Surapong Jakang
Manual Swish max3
Manual Swish max3
Surapong Jakang
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Champ Wachwittayakhang
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Champ Wachwittayakhang
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Champ Wachwittayakhang
Chapter7
Chapter7
Surapong Jakang
คู่มือการใช้ Sony vegas 7
คู่มือการใช้ Sony vegas 7
Vinz Primo
Lesson7
Lesson7
krunueng1
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Suthida23
Similar a animation-gif-by-firework
(20)
เครื่องมือและคำสั่งพื้นฐาน
เครื่องมือและคำสั่งพื้นฐาน
Photo story
Photo story
Image editing-with-photoscape
Image editing-with-photoscape
Namo webeditor 6
Namo webeditor 6
คู่มือFlash
คู่มือFlash
คู่มือ Sony Vegus 7.0
คู่มือ Sony Vegus 7.0
เทคนิคโฟโต้
เทคนิคโฟโต้
captivate-flash-courseware
captivate-flash-courseware
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
swishmax2
swishmax2
Manual Swish max3
Manual Swish max3
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
02 บทที่ 2-เอกสารที่เกี่ยวข้อง
Chapter7
Chapter7
คู่มือการใช้ Sony vegas 7
คู่มือการใช้ Sony vegas 7
Lesson7
Lesson7
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
Más de Boonlert Aroonpiboon
Excel quiz
Excel quiz
Boonlert Aroonpiboon
Scival for Research Performance
Scival for Research Performance
Boonlert Aroonpiboon
20190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-4
Boonlert Aroonpiboon
20190409 social-media-backup
20190409 social-media-backup
Boonlert Aroonpiboon
20190220 open-library
20190220 open-library
Boonlert Aroonpiboon
20190220 digital-archives
20190220 digital-archives
Boonlert Aroonpiboon
OER KKU Library
OER KKU Library
Boonlert Aroonpiboon
Museum digital-code
Museum digital-code
Boonlert Aroonpiboon
OER MOOC - Success Story
OER MOOC - Success Story
Boonlert Aroonpiboon
LAM Code of conduct
LAM Code of conduct
Boonlert Aroonpiboon
RLPD - OER MOOC
RLPD - OER MOOC
Boonlert Aroonpiboon
New Technology for Information Services
New Technology for Information Services
Boonlert Aroonpiboon
New Technology for Information Services
New Technology for Information Services
Boonlert Aroonpiboon
digital law for GLAM
digital law for GLAM
Boonlert Aroonpiboon
20180919 digital-collections
20180919 digital-collections
Boonlert Aroonpiboon
Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)
Boonlert Aroonpiboon
20180828 digital-archives
20180828 digital-archives
Boonlert Aroonpiboon
Local Wisdom Information : How to
Local Wisdom Information : How to
Boonlert Aroonpiboon
201403 etda-library-settup
201403 etda-library-settup
Boonlert Aroonpiboon
201403 etda-library
201403 etda-library
Boonlert Aroonpiboon
Más de Boonlert Aroonpiboon
(20)
Excel quiz
Excel quiz
Scival for Research Performance
Scival for Research Performance
20190726 icde-session-chularat-nstda-4
20190726 icde-session-chularat-nstda-4
20190409 social-media-backup
20190409 social-media-backup
20190220 open-library
20190220 open-library
20190220 digital-archives
20190220 digital-archives
OER KKU Library
OER KKU Library
Museum digital-code
Museum digital-code
OER MOOC - Success Story
OER MOOC - Success Story
LAM Code of conduct
LAM Code of conduct
RLPD - OER MOOC
RLPD - OER MOOC
New Technology for Information Services
New Technology for Information Services
New Technology for Information Services
New Technology for Information Services
digital law for GLAM
digital law for GLAM
20180919 digital-collections
20180919 digital-collections
Field-Weighted Citation Impact (FWCI)
Field-Weighted Citation Impact (FWCI)
20180828 digital-archives
20180828 digital-archives
Local Wisdom Information : How to
Local Wisdom Information : How to
201403 etda-library-settup
201403 etda-library-settup
201403 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 เพื่อประกอบกับงานนําเสนอตางๆ ็ โดยเฉพาะบนเว็บไซตนะครับ
Descargar ahora