หน่วยที่ 3 ใบงานที่ 3

ชื่อ-นามสกุล.......................................................................แผนกวิชา.........................................เลขที่.............ระดับชั้นปี..............................ชื่อรายวิชา การใช้โปรแกรมสื่อประสม    อาจารย์ผู้สอน  นายสุภัตต์  วัตรสาร

เรื่อง การสร้างภาพเคลื่อนไหว/Animation ด้วยโปรแกรม Flash         10 คะแนน

 กิจกรรมที่ 1   5 คะแนน

ให้สร้างการ์ตูนโดยใช้เครื่องมือต่างๆ ของ Adobe Flash มาสร้าง และนำเทคนิค Motion Tween และ Frame by Frame มา สร้างให้ตัวการ์ตูนเคลื่อนไหว ผลงานที่ออกมานั้นขึ้นอยู่กับความคิดสร้างสรรค์ของแต่ละคน

ตัวอย่างการสร้างการ์ตูนต่อไปนี้จะเป็นแนวทางให้นักเรียนนำไปประยุกต์ใช้ในการสร้างผลงานชิ้นต่อไปของนักเรียนเอง ซึ่งมีขั้นตอนดังต่อไปนี้

ขั้นตอนที่ 1 เมื่อเปิดโปรแกรมขึ้นมาก ให้ตั้งค่าพื้นหลังให้มีขนาด 800 x 600 โดยไปที่ Properties > Size >Document Properties > OK

 ขั้นตอนที่ 2 ให้ตั้งค่าสีที่จะใช้ในการวาดซึ่งจะวาดโดยยังไม่เติมสีแต่จะให้มีเพียงสีของเส้นซึ่งเป็นสีดำเท่านั้น โดยให้คลิกที่ Fill color   หน้าต่างสีจะแสดงขึ้นมาให้คลิกเลือกที่ ดังภาพ   

ขั้นตอนที่ 3 วาดลำตัวของนกแพนกวินก่อน โดยใช้วงกลมในการวาด เลือกเครื่องมือ Oval Tool (O) หรือกดตัว O ที่คีย์บอร์ด ก็ได้ ดังภาพ

                                                                

ให้วาดวงรีอีกหนึ่งรูปให้อยู่ในวงรีรูปแรก สามารถปรับขนาดของวงรีโดยใช้เครื่องมือ Free Transform Tool (Q)              หรือกดตัว Q ที่คีย์บอร์ดก็ได้ แล้วคลิกที่เส้นวงรีแล้วทำการปรับขนาด ดังภาพ

                                                        ขั้นตอนที่ 4 วาดดวงตาเป็นวงกลม ดังภาพ                        

                                        

ขั้นตอนที่ 5 วาดส่วนปาก โดยวาดวงกลมลงไปก่อน และให้ลบเส้นที่อยู่ตรงกลางออกโดยใช้เครื่องมือ Selection Tool (V)                  คลิกที่เส้นแล้วกด Deletes เส้นตรงกลางจะหายไป

                                                                

ต่อมาให้ทำการปรับรูปทรงของปากโดยใช้เครื่องมือ selection Tool (V)               ลากเมาส์ไปใกล้ ๆ รูปวงกลมแล้วให้ สังเกตที่เมาส์ รูปเส้นโค้งจะปรากฏที่ใต้เมาส์ให้ลากปรับรูปทรงได้ตามต้องการ ดังภาพ

ให้วาดปากส่วนบน โดยใช้เส้นตรง Line Tool (N)                   ดังภาพ          

ขั้นตอนที่ 6 วาดส่วนปีกโดยให้ใช้เส้นเส้นตรงวาด แล้วใช้เครื่องมือ Selection Tool (V)          ปรับรูปทรงเหมือนการวาดปาก

 

                                                        

                                                        

เมื่อวาดปีกได้แล้วให้ทำการ Copy ปีกข้างซ้ายไปวางอีกด้านหนึ่งเพื่อให้ปีกทั้งสองข้างเท่ากัน โดยใช้เครื่องมือ selection Tool (V)                เลือกส่วนปีก แล้วคิกขวา Copy แล้วคลิกขวาอีกครั้ง Paste

จะเห็นได้ว่าปีกยังเป็นปีกข้างซ้ายอยู่ ให้ทำการกลับข้างโดยใช้เครื่องมือ Free Transform Tool (Q)           ก ร อ บ สี่เหลี่ยมจะแสดงขึ้นมา ให้ลากจากด้านซ้ายไปด้านขวา แล้ว ปรับปีกด้านขวาให้สมดุลกับปีกด้านซ้าย ดังภาพ

                                                                                

ขั้นตอนที่ 7 วาดส่วนขา โดยให้วาดวงรี แล้วใช้เครื่องมือ Subselection Tool (A)               คลิกที่วงรีจะสังเกตเห็นว่าจะมีจุดรอบ วงรีและมีสีเขียว ให้ลากจุดปรับรูปทรง ดังภาพ

                                                

เมื่อปรับได้รูปทรงที่ต้องการแล้วให้ ใช้เครื่องมือ Selection Tool (V)                   ลากไปวางที่ตัวนกเพนกวิน ลบเส้นที่เกิน ออกโดยคลิกเมาส์ที่เส้นแล้วกด Deletes ดังภาพ

Copy ขาซ้ายไปวางทางขวาเหมือนขั้นตอนการทำปีก ดังภาพ

                                                        

ขั้นตอนที่ 8 เติมสีให้กับภาพโดยใช้เครื่องมือ Paint Bucket Tool (K)            แล้วย่อภาพให้เล็กลง ดังภาพ

ขั้นตอนที่ 9 สร้างภาพเคลื่อนไหว (ให้นกเพนกรินบิน) ให้คลิกที่เฟรมที่ 1 แล้วคลิกขวาที่ภาพ Copy ดังภาพ

* ให้คลิกที่เฟรมที่ 2 แล้วคลิกขวา Insert Keyframe หรือกด F6 ก็ได้ และให้วางภาพที่ทำการ Copy ไว้ โดย    คลิกขวาที่ พื้นหลัง Paste

* เมื่อวางภาพแล้วให้แก้ไขภาพโดยให้ปีกยกขึ้นเหมือนกำลังจะบิน ดังภาพ

Copy Frames ดังภาพ

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

ขั้นตอนที่ 11 ให้เพิ่มเสียงประกอบเข้าไปโดยไปที่ File > Import > Import Stage เลือกไฟล์เสียงที่ต้องการ คลิก Open เมื่อเลือกไฟล์เสียงแล้วไฟล์จะไปอยู่ที่หน้าต่าง Library ด้านขวามือ

กิจกรรมที่2 (5 คะแนน)

ให้นักเรียนสร้างภาพเคลื่อนไหวแบบ Motion Guide (สร้าง e-card)

  1. เตรียมภาพสำหรับสร้าง e-card

  1. นำซองจดหมายมาวางไว้ในมือของหมี ณ เฟรมที่ 1 ดังภาพข้างล่าง

  1. แทรก layer Guide ขึ้นมาดังภาพ
  2. สร้างเส้น guide ณ เฟรมที่ 30

5. ที่เฟรมที่ 30 ที่ layer ของจดหมายให้สร้างจดหมายเคลื่อนที่แบบ motion tween ให้เคลื่อนย้ายจดหมายไปไว้ที่มุมขวา ด้านบนตรงปลายของเส้น guide ที่เฟรม 88

6. ให้สร้างหมีขึ้นมาอีก 1 ตัว แล้วสร้างเส้น guide ขึ้นมาอีกเส้นแล้วลากจดหมายมาไว้ที่จุดเริ่มต้นของเส้นGuide

7. ลากจดหมายมาไว้ที่จุดสิ้นสุดของเส้นGuide ณ เฟรมที่ 175

 

8. Insert Layer มาใหม่ แล้วสร้าง คำพูดหรือข้อความ ที่เฟรมที่ 175 ให้สร้างภาพเคลื่อนไหวให้กับคำพูดเป็นแบบ Motion Tween ให้คำพูดมีขนาดค่อยใหญ่ขึ้นตามที่ต้องการ

9. Insert Frame เพื่อเพิ่มเวลาในการแสดงของภาพให้นานขึ้น