การสร้างภาพเคลื่อนไหวแบบ shape

การสร้างภาพแบบ shape
แบบ วัตถุ - วัตถุ
1. สร้างวัตถุลงในชิ้นงาน
2. สร้าง frame ขึ้นมา 30 เฟรม โดยกดปุ่ม F6
3. คลิกขวาที่เฟรม เลือก Create Motion Tween
4. คลิกที่เฟรม ไปยัง properties > Tween > เปลี่ยนจาก Motion เป็น shape
(สีของเฟรมจะเปลี่ยนจาก สีม่วงอมเท่าเป็นสีเขียวอ่อน๗
5. สร้าง key frame ที่เฟรมที่ 30 โดย กดปุ่ม F6
6. ลบวััตถุในเฟรมที่ 30 ทิ้ง โดยกด delete
7. วาดภาพใหม่ขึ้นมาแทนที่
8. ไปยัง เฟรมที่ 1 คลิกขวาที่วัดถุ กด break Apart เพื่อเปลี่ยนเป็นภาพนิ่ง

แบบ วัตถุ - วัตถุ หลายภาพ
1. สร้างวัตถุลงในชิ้นงาน
2. สร้าง frame ขึ้นมา 30 เฟรม โดยกดปุ่ม F6
3. คลิกขวาที่เฟรม เลือก Create Motion Tween
4. คลิกที่เฟรม ไปยัง properties > Tween > เปลี่ยนจาก Motion เป็น shape
(สีของเฟรมจะเปลี่ยนจาก สีม่วงอมเท่าเป็นสีเขียวอ่อน๗
5. สร้าง key frame ที่เฟรมที่ 30 โดย กดปุ่ม F6
6. ลบวััตถุในเฟรมที่ 30 ทิ้ง โดยกด delete
7. วาดภาพใหม่ขึ้นมาแทนที่
8. ไปยัง เฟรมที่ 1 คลิกขวาที่วัดถุ กด break Apart เพื่อเปลี่ยนเป็นภาพนิ่ง
9. สร้าง key frame ในเฟรมที่ 15 โดยกด F6
10. ลบวััตถุในเฟรมที่ 15 ทิ้ง โดยกด delete
11. วาดภาพใหม่ขึ้นมาแทนที่
12. รันผลงานโดยกด Control + Enter

แบบ วัตถุ - ข้อความ
1. สร้างวัตถุลงในชิ้นงาน
2. สร้าง frame ขึ้นมา 30 เฟรม โดยกดปุ่ม F6
3. คลิกขวาที่เฟรม เลือก Create Motion Tween
4. คลิกที่เฟรม ไปยัง properties > Tween > เปลี่ยนจาก Motion เป็น shape
(สีของเฟรมจะเปลี่ยนจาก สีม่วงอมเท่าเป็นสีเขียวอ่อน๗
5. สร้าง key frame ที่เฟรมที่ 30 โดย กดปุ่ม F6
6. ลบวััตถุในเฟรมที่ 30 ทิ้ง โดยกด delete
7. สร้างข้อความขึ้นมาที่เฟรมที่ 30 โดยเลือกเครื่องมือรูป A
8. ปรับค่าตัวอักษรประมาณ 60
9. ไปยัง เฟรมที่ 1 คลิกขวาที่วัดถุ กด break Apart เพื่อเปลี่ยนเป็นภาพนิ่ง
10. ไปยัง เฟรมที่ 30 คลิกขวาที่ข้อความ กด break Apart สองครั้งเพื่อเปลี่ยนข้อความเป็นภาพ
*** เราสามารถกดแป้นลัด Control + B แทน การคลิกขวา แล้วเลือก Break Apart ได้

การสร้างภาพเคลื่อนไหวแบบ Tweening

งานมอบหมาย ( 5 คะแนน)
1. ให้นักเรียนจดเนื้อหาต่อไปนี้ ให้เรียบร้อย
2. เขียนวันที่ให้ชัดเจน
3. ลงหัวข้อในตารางคะแนนในสัปดาห์ที่กำหนดไว้
4. เมื่อเสร็จสิ้นจะทำการสอบเก็บคะแนนด้วย(ให้อ่านมา)
ภาพเคลื่อนไหวแบบ Motion Tween เป็นการสร้างภาพเคลื่อนไหวโดยกำหนดจุดเริ่มต้นและจุดสิ้นสุด ซึ่งโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมให้โดยอัตโนมัติซึ่งคุณสมบัตินี้เองที่ทำให้การสร้างภาพ เคลื่อนไหวแบบ Motion Tween มีขนาดไฟล์ที่เล็กกว่าการสร้างภาพเคลื่อนไหวแบบ Frame by Frame เหมาะสำหรับภาพเคลื่อนไหวที่ต้องการความต่อเนื่องสม่ำเสมอ เช่น ภาพดวงอาทิตย์กำลังตกดิน ภาพกังหันกำลังหมุน ภาพเครื่องบินกำลังบินขึ้น ภาพรถยนต์ที่กำลังเคลื่อนที่ หรือภาพก้อนเมฆที่ลอยอยู่เป็นต้น
การสร้างภาพเคลื่อนไหวแบบ Tweening มี2 ชนิดคือ
1. Motion Tween เป็นการเคลื่อนไหวที่มีการกำหนดการเคลื่อนที่ หมุน ย่อ หรือขยายให้กับวัตถุเป็นรูปแบบการเคลื่อนไหวที่ใช้มากที่สุด และโปรแกรมจะกำหนดรูปแบบชนิดนี้เป็นค่าเริ่มต้นของการสร้างภาพเคลื่อนไหวทุกครั้ง โดยโปรแกรมจะสร้างภาพเคลื่อนไหวและเส้นทางการเคลื่อนไหวให้เองโดยอัตโนมัติวัตถุที่นำมาสร้างจะเป็นวัตถุประเภทใดก็ได้ ไม่ว่าจะเป็นวัตถุที่วาดขึ้นเอง ข้อความ
ซิมโบล หรือวัตถุที่ถูกรวมกลุ่ม โดยหลังจากสร้างภาพเคลื่อนไหวแล้วโปรแกรมจะแปลงวัตถุเหล่านั้นให้เป็นซิมโบลประเภทกราฟิกชื่อ Tween1 Tween 2 …… ตามลำดับ
2. Shape Tween เป็นการเปลี่ยนแปลงรูปทรงของวัตถุจากรูปทรงหนึ่งไปเป็นอีกรูปทรงหนึ่งหรือเปลี่ยนจากวัตถุหนึ่งไปเป็นอีกวัตถุหนึ่ง ซึ่งแตกต่างจากแบบ Motion คือ Motion จะเกิดการเคลื่อนไหวของวัตถุเพียงชิ้นเดียว แต่แบบ Shape จะเกิดการเคลื่อนไหวโดยใช้วัตถุ2 ชิ้น ซึ่งเหมาะสำหรับภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงจากแบบหนึ่งไปเป็นแบบอื่นอย่างสิ้นเชิง เช่นเปลี่ยนจากคน
เป็นหุ่นยนต์ จากกางเกงเป็นกระโปรง จากดวงอาทิตย์เป็นดวงจันทร์ เป็นต้น
องค์ประกอบของการสร้างภาพเคลื่อนไหว
- Scene หรือ ฉาก ในการสร้างภาพเคลื่อนไหว (Animation) หรือภาพยนตร์(Movie) Scene หรือฉากเป็นส่วนสำคัญในการทำงาน ภาพยนตร์1เรื่อง อาจมีหลายตอนหรือ หลายฉาก โดยแต่ละฉากจะแสดงข้อมูลแยกกันไปภาพเคลื่อนไหว (Animation) ใน Flash 8 อาจจะต้องมีการแบ่งภาพเคลื่อนไหว (Animation) ที่สร้างขึ้นออกเป็นตอน ๆ หรือ เป็นฉาก ๆ เพื่อสะดวกควบคุมการทำงาน ภาพเคลื่อนไหวในแต่ละฉากนั้น อาจจะมีข้อมูลหลาย Layer แตกต่างกันไปตามข้อมูลแต่ละฉาก
- Timeline คือ เครื่องมือหนึ่งของ Flash ที่ช่วยในการกำกับเวลาในการแสดงของภาพเคลื่อนไหว โดยมีPlayhead เป็นตัววิ่งผ่านแต่ละ Frame ใน Timeline เพื่อแสดงภาพหรือ Animation ที่ใส่ไว้ใน Frame นั้นๆ


- Playhead คือ เครื่องมือที่ใช้ในการแสดงวัตถุต่าง ๆ ใน Frame นั้นทำหน้าที่คล้ายหัวอ่านเครื่องวีดีโอเทปที่วิ่งบน Timeline มีลักษณะเป็นเส้นสีแดงวิ่งผ่านแต่ละFrame เพื่อแสดงวัตถุที่อยู่ใน Frame นั้นออกมาบน Stage PlayHead จะทำงานสัมพันธ์กับเวลาและแสดงภาพออกมาบน Stage อย่างรวดเร็วทำให้ดูเหมือนเกิดภาพเคลื่อนไหวขึ้น

- Frame มีลักษณะเป็นช่องเล็กที่เรียงกันเป็นแถวยาว ทำหน้าที่บรรจุภาพและเสียงที่จัดวางบน Stage เราจึงต้องจัดเรียงเรื่องราวบน Frame เพื่อแสดงออกเป็น Flashmovie โดยแต่ละ Frame จะถูกแสดงเมื่อมีการวิ่งผ่านของ Playhead

- Keyframe คือ เฟรมที่มีวัตถุหรือเฟรมที่มีการเปลี่ยนแปลงสามารถสังเกตได้โดยจะมีจุดใน Frame ดังรูปนี้

หรือมีจุดที่จุดเริ่มต้นของ Frame การสร้างภาพเคลื่อนไหว (Animation) เราจะต้องกำหนดคีย์เฟรม (Keyframe) ในตำแหน่งต่าง ๆ และกำหนดรายละเอียดของแต่ละคีย์เฟรม (Keyframe) ได้อย่างเหมาะสม
ภาพเคลื่อนไหว (Animation) ที่ได้จึงจะมีผลลัพธ์ตามที่เราต้องการ

ไฟล์ VDO ขั้นตอนการสร้างงานต่างๆ

ดวงตาการ์ตูนและรอยยิ้ม

ขั้นตอนการสร้างก้อนเมฆ

ขั้นตอนการสร้างดอกไม้
Ctrl + x = ตัด
Ctrl + C = คัดลอก
Ctrl + Shift + v = วางทับวัตถุเดิม
Ctrl + z = ย้อนการกระทำ
Ctrl + y = ไปข้างหน้า
Ctrl + ข = ย่อลง
Ctrl + ช = ขยายใหญ่
Ctrl + O = เปิดไฟล์เก่า
Ctrl + N = สร้างงานใหม่
Ctrl + Enter = ดูไฟล์ตัวอย่าง

บทที่ 1 การใช้เครื่องมือในการวาดภาพและใช้สี

ในการสร้างผลงานด้วยโปรแกรม Flash 8 เป็นความจำเป็นอย่างยิ่งที่จะต้องมีความรู้ในเรื่องเครื่องมือที่ใช้ในการทำงานอย่างถูกต้องและถูกวิธี เพื่อให้สามารถเลือกใช้เครื่องมือได้อย่างเหมาะสมกับการทำงาน และให้ได้ผลงานที่ตรงความต้องการ และมีประสิทธิภาพสูงสุด ในการสร้างสรรค์ผลงาน การใช้สีก็มีความจำเป็น ซึ่งสีจะเป็นตัวทำให้ผลงานมีจุดเด่นและสะดุดตามากขึ้น

ภาพกราฟิกในโปรแกรม Flash 8
ภาพกราฟิกที่สร้างขึ้นมาไม่ว่าจะเป็นรูปทรงใด เช่น เส้น, รูปทรงสี่เหลี่ยม, ทรงกลม หรือทรงหลายเหลี่ยม เป็นต้น โดยแต่ละรูปทรงจะประกอบไปด้วยส่วนประกอบที่สำคัญ ดังนี้
Stoke เป็นส่วนประกอบที่มีลักษณะเป็นลายเส้น เช่น เส้นตรง เส้นโค้ง เส้นหยัก หรืออาจเป็นเส้นที่ล้อมรูปทรงอยู่
Fill เป็น ส่วนของพื้นรูปทรงที่อาจอยู่ภายในเส้นขอบ หรือไม่มีเส้นขอบก็ได้ โดยสามารถกำหนดสีและลวดลายต่าง ๆ ได้


ประเภทของกราฟิก
ภาพแบบเวกเตอร์ (Vector)
ภาพชนิดนี้ เป็นภาพที่ใช้ในการคำนวณทางคณิตศาสตร์เข้ามาช่วยทำไม่เกิดปัญหารอยแตกหรือรอยหยิกเมื่อขยายภาพให้ใหญ่ขึ้น คุณภาพของภาพไม่เสียทำให้ภาพได้ความคมชัดเหมือนเดิม นอกจากนี้ไฟล์ที่ได้ยังมีขนาดเล็ก แก้ไขได้ง่าย เหมาะสำหรับนำไปสร้างเป็นภาพเคลื่อนไหว
ภาพแบบบิทแมพ (Bitmap)
ภาพแบบิบทแมพ เกิดจากการเอาจุดสีหรือเม็ดสีที่เราเรียกว่าพิกเซล(Pixel) มาเรียงกันเป็ตารางสี่เหลี่ยม ลักษณะคล้ายการปูกระเบื้อง ซึ่งกระเบื้องแต่ละแผ่นจะแทนเม็ดสี แต่ละพิกเซลนั่นเอง ขนาดของภาพจะมีความกว้างยาวและจำนวนพิกเซลคงที่ เพราะฉะนั้นความสวยงามของภาพจึงขึ้นอยู่ความละเอียดหรือจำนวนพิกเซล ยิ่งมีความละเอียดมากภาพยิ่งสวยงาม เมื่อมีการขยายภาพคุณภาพของภาพจะลดลง โดยจะมองเห็นภาพเป็นสี่เหลี่ยมที่เกิดจากจุดพิกเซลขยายตัวอย่างชัดเจน



กำหนดรูปแบบการวาด
การวาดภาพกราฟิกใน Flash มี2 รูปแบบ ดังนี้
การวาดแบบ Object Drawing
1. รูปทรงที่ได้จากการวาดแต่ละครั้งเป็นอิสระต่อกัน
2. เมื่อนำมาวางซ้อนกันก็ไม่มีผลทำให้ออบเจ็คอื่นหรือตัวเองเปลี่ยนแปลง ก่อนที่จะวาด
รูปทรงแบบนี้ให้คลิกเลือก Object Drawing ก่อน
3. หลังจากวาดรูปทรงแบบนี้แล้วจะมีกรอบสีฟ้าล้อมรอบวัตถุ(Object)



การวาดแบบ Merge Drawing
1. รูปทรงที่วาดจะมีผลกระทบต่อรูปทรงอื่น
2. เมื่อนำมาวางซ้อนกันจะมีผลกับรูปทรงอื่นหรือรูปทรงตัวเองแปรเปลี่ยนไป
3. การวาดรูปทรงแบบนี้ต้องคลิกยกเลิกปุ่ม Object Drawing

ผลการเรียนรู้ที่คาดหวัง ง31201

รายวิชาเทคโนโลยีสารสนเทศ เรื่อง การสร้างอนิเมชั่นด้วย Flash
คำอธิบายรายวิชา
ศึกษาหลักการขั้นตอน และปฏิบัติเกี่ยวับการสร้างงานอนิเมชั่น ด้วยซอฟต์แวร์ประยุกต์ ศึกษา ความต้องการของระบบ ซอฟต์แวร์ประยุกต์ องค์ประกอบของซอฟต์แวร์ประยุกต์ อุปกรณ์ที่ใช้สำหรับวาดรูปต่างๆ การใช้ และปรับแต่งสี เครื่องมือในการตกแต่งภาพ เครื่องมือจัดตำแหน่ง การสร้างตัวอักษร การใช้งาน Symbol, Instance และ Layer การจัดการกับเสียง หลักการสร้างงานอนิเมชั่น และการเผยแพร่ผลงาน เพื่อให้้มีความรู้ ความเข้าใจ และทักษะเกี่ยวกับการสร้างงานอนิเมชั่น ด้วยการใช้ซอฟต์แวร์ในการทำงาน อย่างมีจิตสำนึกได้

1. อธิบายความหมาย ความเป็นมา และลักษณะการใช้งานโปรแกรมอนิเมชั่น ว่ามีบทบาทความสำคัญของชีวิตและสังคม
2. อธิบายความเป็นมา และลักษณะการใช้งาน โปรแกรมอนิเมชั่น โดยโปรแกรม Macromedia Flash 8
3. รู้จักส่วนประกอบต่างๆและส่วนการทำงานต่างๆของ Macromedia Flash 8
4. สามารถใช้อุปกรณ์ เครื่องมือ ที่ใช้วาดภาพหรือทำงานในส่วนต่างๆของโปรแกรม Macromedia Flash 8
5. สามารถนำ Symbol แต่ละแบบนำไปใช้ได้อย่างเหมาะสม อย่างมีความรู้และเข้าใจ
6. สร้างวัตถุให้เกิดการเคลื่อนไหวในรูปแบบต่างๆตามความต้องการได้
7. สร้างปุ่มกด และทำงานเชื่อมโยงไปยังวัตถุ หรืออ้างอิงไปยังที่อื่นๆได้
8. รู้จักเลเยอร์(Layer) และหลักพื้นฐานในการสร้างอนิเมชั่น
9. สามารถใช้ไฟล์เสียงที่เหมาะสมแทรกเข้ากับอนิเมชั่นโดยโปรแกรม Macromedia Flash 8
10. สามารถเผยแพร่ การทำ publish เพื่อใช้ไฟล์ที่สร้างขึ้น ใช้งานได้ในรูปแบบต่างๆตามต้องการ