Transcript การสร้าง Animation ด้วยโปรแกรม Flash

บทที่ 10
Adobe Flash CS3
อ.ชนิดา เรืองศิริวฒ
ั นกุล
สาขาวิชาเทคโนโลยีสารสนเทศ
คณะวิทยาศาสตร์ และเทคโนโลยี มหาวิทยาลัยราชภัฏอุตรดิตถ์
การสร้ างภาพกราฟิ ก
ภาพ Raster
 เป็ นภาพที่เกิดจากเม็ดสี หรื อจุดสี ที่เรี ยกว่า Pixel มาเรี ยงกันจนเป็ น
ภาพ
่ บั ความละเอียดของเม็ดสี
 ความสวยงามขึ้นอยูก
็ ะใหญ่ตามไปด้วย
 ถ้าภาพคมชัดมาก ขนาดของไฟล์กจ
ภาพ Vector
 ใช้การคานวณทางคณิ ตศาสตร์
 ไม่เกิดปั ญหารอยแตกหรื อรอยหยักเมื่อขยายภาพ
Flash ใช้ หลักการ Vector ในการสร้ างภาพ
ความต้ องการระบบคอมพิวเตอร์
ความต้ องการระบบของโปรแกรม Flash CS3
เครื่องคอมพิวเตอร์ ที่มีหน่ วยประมวลผลกลางระดับ Pentium 4,Core
Duo 1 GHz ขึน้ ไป
ระบบปฏิบัติการ Windows XP ServicePack2 หรือ Windows Vista
หน่ วยความจา (RAM) อย่ างต่า 512 MB (แนะนาให้ ใช้ 1 GB)
เนือ้ ที่ของฮาร์ ดดิสก์อย่ างน้ อย 2.5 GB จอภาพสี ที่ความละเอียด
1024 x 768 pixels (32 bit)
3
การสร้ างไฟล์ ด้วยการกาหนดรูปแบบเอง
Flash Document ไฟล์ รูปแบบปกติ ทีใ่ ช้ สร้ างงานแอนนิเมชันทัว่ ไป
Flash Slide Presentation ไฟล์งานทีเ่ หมาะกับการสร้ างงานนาเสนอ
Flash Form Application ใช้ สร้ างฟอร์ มสาหรับทาเป็ นโปรแกรมใช้ งาน
ทัว่ ไป
ActionScript File เป็ นหน้ าต่ างที่ไว้ เขียนสคริปต์ เพียงอย่างเดียว
ActionScript Communication File เขียนไฟล์เพือ่ ติดต่ อกับเชิร์ฟเวอร์
Flash JavaScript File เหมาะสาหรับงานเขียนสคริปต์ ทที่ างานร่ วมกับ
JavaScript หรือ API
Flash Project เป็ นการรวมกลุ่มงานทีส่ ร้ างทั้งหมด ให้ ออกมาเป็ น Project
ไฟล์
4
การวาดรูปซ้ อนกันใน Flsah
ภาพวาดแบบปกติทนี่ ามาซ้ อนกัน
6
หลังจากแยกภาพออกจากนั้น
ภาพทีถ่ ูกซ้ อนทับจะหายไป
ไทมไลน์ (Timeline)
ไทมไลน์ (Timeline) หรื อเส้นเวลา จะใช้สาหรับสร้างและกาหนด
รายละเอียดของการเคลื่อนไหว โดยเอาองค์ประกอบที่จะเคลื่อนไหว
(เราเรี ยกองค์ประกอบต่างๆ ในชิ้นงาว่าออบเจ็กต์หรื อวัตถุ) มาจัดวางต่อ
กันละภาพในแต่ละช่วงเวลา (เรี ยกว่าเฟรม: Frame) ที่แสดงเป็ น
ภาพเคลื่อนไหว โดยเราจะกาหนดเส้นเวลาให้เล่นภาพเคลื่อนไหวซ้ าๆ
หรื อเล่นแล้วหยุดก็ได้
ร้ ูจัก Timeline และ Frame
Frame
8
Timeline
Frame
Frame เป็ นส่ วนประกอบของ Timeline เป็ นช่ องสาหรับแสดง
ภาพเคลือ่ นไหว ประกอบด้ วย Frame ที่ต่อเนื่องกันหลาย ๆ Frame เมื่อ
มีการแสดงภาพเคลือ่ นไหวโปรแกรมจะนาวัตถุ (Instance) ทีอ่ ยู่บนเวที
(Stage) มาแสดงผลทีละ Frame ในส่ วนของความเร็วในการแสดงผล
มากน้ อยเพียงใดขึน้ อยู่กบั การกาหนดคุณสมบัติ Movie Properties ที่
Frame Rate มีหน่ วยเป็ น Frame per Second (fps) ปกติถ้าเป็ น
โปรแกรม Adobe Flash CS3 จะตั้งค่ าเริ่มต้ นที่ 12 fps แต่ ปัจจุบัน
โปรแกรม Adobe Flash CS4 จะตั้งค่ าเริ่มต้ นที่ 24 fps
9
ลักษณะการทางานของ Frame ที่ปรากฏบน Timeline
1.
2.
3.
4.
5.
6.
ในกรณีทยี่ งั ไม่ มีการกาหนดใช้ งาน Frame บน Timeline จะปรากฏช่ องของ
แต่ ละ Frame อย่างชัดเจน โดยมี Playhead เป็ นตัวชี้อยู่ทเี่ ฟรมทีก่ าลังแสดงอยู่
บนสเตจ
เฟรมที่ไม่ มีออบเจ็กต์
เฟรมที่มอี อบเจ็กต์
ตาแหน่ งของเฟรมทีส่ ร้ างการเคลือ่ นไหวไว้ จะถูกเรียกว่ า คีย์เฟรม (Keyframe)
คีย์เฟรมที่ไม่ มีออบเจ็กต์
คีย์เฟรมที่มอี อบเจ็กต์
ซึ่งหากสร้ างเฟรมไว้ จานวนมาก จะเป็ นการขยายเวลาการแสดงผล
การทางาน เวลาในการแสดงมูฟวี่กจ็ ะมากขึน้ แต่ หากอัตราในการแสดงเฟรม
สู ง ก็จะทาให้ เวลาในการแสดงมูฟวีส่ ้ั นลง
10
การสร้ างคีย์เฟรม
Key frame ในการสร้าง keyframe ขึ้นมาทุกครั้ง หากมีชิ้นงานวางอยูบ่ น
Keyframe ก่อนหน้าในเลเยอร์เดียวกัน โปรแกรมจะคัดอกชิ้นงานนั้นมาวางบน
Keyframe ใหม่ดว้ ย ทาให้สามารถปรับแต่งแก้ไขส่ วนประกอบในคียเ์ ฟรมใหม่ได้
โดยส่ วนประกอบในคียเ์ ฟรมเดิมจะไม่ถูกแก้ไขด้วย
Blank keyframe คียเ์ ฟรมว่าง คือ เฟรมที่ไม่มีขอ้ มูลใดๆในเฟรม เมื่อเราคลิกที่คีย ์
เฟรมว่างนั้น ก็จะไม่เกิดผลใดๆ บน stage ซึ่ งสามารถสร้างคียเ์ ฟรมว่างขึ้นมาเพื่อ
ใส่ ชิ้นงานใหม่ หรื อเว้นช่วงเวลาในการแสดงผลแอนิเมชันก็ได้
ลักษณะการทางานของ Frame
 Motion-tween เฟรมที่สร้าง
ภาพเคลื่อนไหวแบบเคลื่อนที่ มีสัญลักษณ์
เป็ นรู ปลูกศรสี ดาอยูร่ ะหว่างจุด 2 จุด บน
พื้นสี ฟ้าอ่อน
 Shape-tweened เฟรมที่สร้าง
ภาพเคลื่อนไหวแบบเปลี่ยนรู ปร่ าง มี
สัญลักษณ์เป็ นรู ปลูกศรสี ดา อยูร่ ะหว่างจุด
2 จุด บนพื้นสี เขียวอ่อน
 Action frame มีสัญลักษณ์เป็ นรู ป a อยู่
กลาง Frame เป็ นตาแหน่งที่มีคาสัง่ Action
Script ประกอบอยูภ่ ายใน Frame นั้น
 เส้ นประ เฟรมทีไ่ มสมบู
รณ ์
่
หรื อมีขอ้ ผิดพลาด เช่น คียเ์ ฟรมสิ้ นสุ ดถูก
ลบไป
12
Layer
 การทางานแบบ Layer เป็ นเหมือนการวางแผ่ นใสซ้ อนทับกันเป็ นลาดับ
ขั้นขึน้ มาเรื่อย ๆ
บริเวณของ Layer ทีไ่ ม่ มีรูปจะเห็นทะลุถึง Layer ทีอ่ ยู่ข้างล่าง
ในแต่ ละ Layer จะแยกการทางานอย่ างชัดเจน มีคุณสมบัติต่าง ๆ เป็ น
ของตัวเอง และการแก้ไขทีเ่ กิดขึน้ ในแต่ ละ Layer จะไม่ ส่งผลต่ อ Layer
อืน่ ๆ
Symbol และ Instance
Symbol การนาวัตถุที่เป็ นภาพกราฟฟิ ก มากาหนดเป็ นต้นแบบเพื่อ
นาไปใช้เป็ นส่ วนประกอบในชิ้นงาน คล้ายๆ กับการทาสาเนาภาพ
โดย symbol แบ่งได้เป็ น
 Movie Clip เป็ นวัตถุที่สร้างภาพเคลื่อนไหว
 Button เป็ นวัตถุปุ่มกดที่สามารถคลิกได้
 Graphic เป็ นวัตถุที่สร้างขึ้นจากภาพกราฟฟิ กทัว
่ ไป
เราไม่สามารถนา symbol มาใช้บนสเตจได้โดยตรง แต่จะทาได้
เพียงสาเนาของ symbol เรี ยกว่า Instance มาใช้ ซึ่งหนึ่ง symbol
มีได้หลาย Instance
่ น Stage โดย Instance
 Instance คือ Symbol ที่ถูกใช้งานอยูบ
สามารถปรับคุณสมบัติต่างๆ ได้ เช่น สี ขนาด โดยไม่มีผลกระทบต่อ
symbol

การปรับแต่ ง Instance
สามารถปรับแต่ ง Instance โดยไม่ กระทบกับ Symbol
 ปรับความสว่าง ความเข้ม
 ปรับเปลี่ยนสี
 ปรับความโปร่ งใส
การใช้ Symbol ในการสร้างงานมีขอ้ ดีคือ ช่วยคุมต้นแบบที่ใช้ใน
ชิ้นงานได้ โดยที่ไม่จาเป็ นต้องสร้างภาพนั้นบ่อยๆ สามารถนา
instance ไปใช้บนสเตจแทนได้กี่ภาพก็ได้ เนื่องจาก Flash จะ
มองเห็นเป็ นภาพเดียว ทาให้ชิ้นงานมีขนาดเล็กลง ทางานได้รวดเร็ ว
กว่าเดิม
15
การสร้ าง Symbol ประเภท Graphic
สร้ าง Symbol ประเภท Graphic ใหม่
 ลองสร้าง Symbol ใหม่ โดยการเลือก Insert + New Symbol
 จะสังเกตเห็นเครื่ องมือ + ตรงกลางรู ป
 เมื่อสร้างเสร็ จแล้วลองนา Symbol มาวางไว้ในสเตจ จะเรี ยกว่า
Instance
 แล้วกลับไปแก้ไข Symbol เพื่อดูการเปลี่ยนแปลงภายในสเตจ
สร้ าง Symbol ประเภท Graphic จากรูปทีม่ ีอยู่แล้ว
่ ล้วให้เป็ น Symbol โดยการเลือกวัตถุ
 สามารถเลือกวัตถุที่มีอยูแ
ที่ตอ้ งการจะเปลี่ยน แล้วเลือก Modify + Convert to Symbol
16
หลักการทางานของ Flash
ขั้นตอนที่ 1
นาเข้าภาพกราฟิ กหรื อ
ภาพที่สร้างขึ้นมา
ขั้นตอนที่ 2
แปลงส่ วนประกอบต่าง ๆ
ให้เป็ น Symbol
ขั้นตอนที่ 3
ทาการสร้าง Animation
โดยจะใส่ เสี ยง หรื อ Script
ขั้นตอนที่ 4
Publish ออกมาเป็ น
ชิ้นงาน
นามสกลุ ของ Flash
*.fla (Flash Movie)
 เป็ นไฟล์ที่ได้จากการสร้างชิ้นงานใน Flash ที่สามารถนามาแก้ไข
เปลี่ยนแปลงได้
*.swf (Shockwave Flash)
 เป็ นไฟล์ที่ Flash สร้างขึ้นหลังจากการแสดงผลออกมา
 สามารถดูผลการแสดงได้โดยไม่ตอ
้ งเปิ ดโปรแกรม Flash
ในการ Publish จะมีการสร้ างไฟล์ .html เพิม่ เพือ่ เป็ นตัวเรียกใช้ ไฟล์
*.swf ขึน้ มาให้ ทางาน
แบบฝึ กหัด
1. การสร้างภาพเคลื่อนไหวแบบ frame by frame เป็ นอย่างไร พร้อมบอก
ข้อดีและข้อเสี ย ของการสร้างภาพเคลื่อนไหวแบบ frame by frame
2. การสร้างภาพเคลื่อนไหวแบบ Tween เป็ นอย่างไร มีกี่ประเภท
อะไรบ้าง จงอธิบาย
3. Symbol คืออะไร มีกี่แบบ จงอธิบาย
4. Symbol กับ Instance แตกต่างกันอย่างไร
5. Timeline คืออะไร และมีองค์ประกอบใดบ้าง
6. จงบอกความสามารถของโปรแกรม Adobe Flash มาไม่ต่ากว่า 5 ข้อ