ใบงาน

1

2

เอกสารประกอบการเรยี น รายวิชา การสร้างการต์ นู แอนิเมชนั่
ใบความร้ทู ่ี 1 ความร้เู บอื้ งต้นเก่ียวกบั แอนิเมชนั่

1. ร้จู กั งานแอนิเมชนั่
แอนิเมชนั่ (Animation) คอื การนาภาพนิ่งหลาย ๆ ภาพมาวางเรยี งต่อกนั แลว้ คอ่ ย ๆ เล่นทลี ะภาพ

อยา่ งต่อเน่อื งจะทาใหเ้ กดิ เป็นภาพเคล่อื นไหวทม่ี ชี วี ติ ชวี า โดยการสรา้ งงานแอนเิ มชนั่ นัน้ มหี ลายรปู แบบไมว่ า่ จะ
เป็นแอนเิ มชนั่ แบบ 2D หรอื 3D นอกจากน้โี ปรแกรมทใ่ี ชส้ รา้ งหรอื แสดงงานแอนิเมชนั่ กม็ หี ลายหลาย เชน่
Adobe Flash, SwishMax, Toon Boom, 3Ds Max หรอื โปรแกรมพวก Gif Animation ต่าง ๆ
2. ความรทู้ วั่ ไปเก่ียวกบั โปรแกรม Flash

โปรแกรม Flash เป็นซอฟตแ์ วรท์ ช่ี ่วยในการสรา้ งสอ่ื มลั ตมิ เี ดยี , ภาพเคล่อื นไหว (Animation),
ภาพกราฟิกทม่ี คี วามคมชดั เน่อื งจากเป็นกราฟิกแบบเวค็ เตอร(์ Vector), สามารถเล่นเสยี งและวดี โิ อ แบบสเตรโิ อ
ได,้ สามารถสรา้ งงานใหโ้ ต้ตอบกบั ผใู้ ช(้ Interactive Multimedia) มฟี ังกช์ นั่ สาหรบั การเขยี นโปรแกรม (Action
Script) และยงั ทางานในลกั ษณะ CGI โดยเชอ่ื มต่อกบั การเขยี นโปรแกรมภาษาอ่นื ๆ ไดม้ ากมาย เช่น ภาษา
PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVA และอ่นื ๆ โดยเฉพาะขอ้ ดขี อง
โปรแกรม Flash คอื ความสามารถในการบบี อดั ไฟลใ์ หม้ ขี นาดเลก็ มผี ลทาใหแ้ สดงผลไดอ้ ยา่ งรวดเรว็
นอกจากนนั้ ยงั แปลงไฟลไ์ ปอยใู่ นฟอรแ์ มตอ่นื ไดห้ ลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp,
jpg, gif, png เป็นตน้

โปรแกรม Flash เรม่ิ มชี ่อื เสยี งประมาณปี พ.ศ. 2539 จนถงึ ปัจจบุ นั ไดถ้ ูกนามาใชง้ านอย่างแพรห่ ลาย
โดยเฉพาะเทคโนโลยเี วบ็ ทาใหก้ ารนาเสนอทาไดอ้ ยา่ งน่าสนใจ นอกจากนนั้ โปรแกรม Flash ยงั สามารถสรา้ ง
แอพพลเิ คชนั่ (Application) เพ่อื ใชท้ างานต่างๆ รองรบั การใชง้ านกบั อุปกรณ์ท่ี เชอ่ื มต่อกบั ระบบเครอื ขา่ ย
อนิ เตอรเ์ น็ต และทางานไดก้ บั หลายๆ แฟลตฟอรม์ (Platform)
3. ประโยชน์ที่ได้จากโปรแกรม Flash

สามารถนาไปสรา้ งส่อื การเรยี นการสอนทเ่ี ป็นสอ่ื มลั ตมิ เี ดยี , ภาพเคล่อื นไหว(Animation)และภาพกราฟิก
หลากหลายแบบทน่ี ่าสนใจไดอ้ ยา่ งมากมาย และประยุกตใ์ ชเ้ ป็นส่วนประกอบของอกี หลายๆโปรแกรมไดแ้ ละมี
ปะสทิ ธภิ าพสามารถ บบี อดั ไฟลใ์ หม้ ขี นาดเลก็ เพอ่ื ทจ่ี ะสามารถนาไฟลไ์ ปใชแ้ สดงทไ่ี หนกไ็ ดโ้ ดยไม่ ตอ้ งนาไป
ทงั้ หมด มผี ลทาใหแ้ สดงผลไดอ้ ยา่ งรวดเรว็ และ นอกจากนนั้ ยงั สามารถแปลงไฟลไ์ ปอยใู่ นฟอรแ์ มตอ่นื ได้
หลากหลายแบบ เชน่ avi, mov, gif, wav, emf, eps, ai, dxf, bmp , jpg, gif, png หรอื อ่นื ๆ
4. การเรยี กใช้โปรแกรม Flash
การเรยี กใชง้ านโปรแกรม Flash มหี ลกั การคลา้ ยๆ กบั การเรยี กโปรแกรมทวั่ ๆ ไปของระบบปฏบิ ตั กิ ารวนิ โดวส์
โดย เรมิ่ จากการคลกิ ป่มุ Start จากนนั้ เลอ่ื นไปคลกิ ทร่ี ายการ Program, Adobe Flash รอสกั ครจู่ ะปรากฏ
หน้าต่างการทางาน ซง่ึ มโี หมดการทางานใหเ้ ลอื กไดห้ ลายลกั ษณะไดแ้ ก่• การเปิดไฟลจ์ ากคาสงั่ Open aRecent
Item

• การสรา้ งงานผลงานจากรายการ Create New
• การสรา้ งผลงานแมแ่ บบ Create from Template

3

5. ส่วนประกอบของโปรแกรม Flash และเครื่องมือพื้นฐาน

1. Menu Bar (เมนูบาร)์ ซง่ึ ประกอบดว้ ยเมนูหลายอย่างทจ่ี าเป็นในการสงั่ งาน เช่น เมนู Window มี

สาหรบั แสดง และ ซอ่ น เครอ่ื งมอื ทกุ ชนิด หน้าต่างเครอ่ื งมอื ทห่ี ายไปเราสามารถมาสงั่ เรยี กเปิดทน่ี ่ี
2. Time Line (ไทมไ์ ลน์) มไี วส้ าหรบั ควบคมุ และกาหนดการนาเสนอผลงาน การเคล่อื นไหวต่างๆ โดย

จะประกอบ ดว้ ยเฟรม (frame) ซง่ึ จะสามารถบรรจสุ ง่ิ ต่างๆไมว่ า่ จะเป็น ภาพ เสยี ง และอ่นื ๆ ลงไปเพอ่ื ใหใ้ นช่วง
เวลานนั้ ประกอบดว้ ยอะไรบา้ งทต่ี อ้ งการแสดงผล เวลาสรา้ งงานเราจะทาการ

3. Layer (เลเยอร)์ คอื ชนั้ ๆต่างๆทจ่ี ะทาใหเ้ ราทางานเป็นระบบมากขน้ึ เราสามารถแยกวตั ถุต่างๆ ออก

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

4. Tool Bar แถบเครอ่ื งมอื กลมุ่ เครอ่ื งมอื สรา้ งงานและจดั การวตั ถุ ประกอบดว้ ยป่มุ เครอ่ื งมอื ยอ่ ยต่างๆ
5. Panel (พาเนล) หน้าต่างทท่ี าหน้าทแ่ี สดง พาเนลย่อย ของโปรแกรม โดยในแต่ละ พาเนลยอ่ ย กจ็ ะ

ประกอบดว้ ยรายละอยี ดของการควบคุมการแสดงการปรบั แต่งไวใ้ นตวั เชน่ swatches กจ็ ะมสี ตี ่างๆ มากมายให้
เลอื กใชใ้ นการปรบั แต่งสี

6. Stage (สเตจ) คอื พน้ื ทท่ี เ่ี รากาหนดขอบเขตขนาดของการทางาน ซง่ึ เราสามารถตงั้ คา่ หรอื ปรบั ไดท้ ่ี

Properties โดยกดทป่ี ่มุ ทม่ี คี า่ 550x400 จะไดห้ น้าต่างขน้ึ มา
7. Properties ไวส้ าหรบั กาหนดคณุ สมบตั ใิ หก้ บั พน้ื ทก่ี ารทางานและสง่ิ ต่างๆทเ่ี ราจะใชง้ าน หากวา่ เรา

ตอ้ งการปรบั ปรงุ เปลย่ี นแปลง แกไ้ ขวตั ถุไหนกน็ าเมาสไ์ ปคลกิ ทว่ี ตั ถุนนั้ ค่าทส่ี ่วน Propertiesก็ จะเปลย่ี นแปลง
ไป ตามวตั ถุนนั้ เช่น คลกิ ทต่ี วั อกั ษร กจ็ ะสามารถเปลย่ี นเรอ่ื งฟ้อนท์ , สี . ขนาด และอ่นื ๆ

4

6. กล่องเคร่ืองมือพืน้ ฐาน Tool Panel

7. Time Line (ไทมไ์ ลน์)

5

ใบงานท่ี 1 การใช้เครื่องมอื Line Tool

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

6

ใบงานที่ 2 การใช้เครอ่ื งมือ Line Tool 2

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด โดยเลอื กวาดคนละ 2 แบบ

ใบงานที่ 3 การใช้เคร่อื งมอื Oval Tool 1

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

7

ใบงานท่ี 4 การใช้เคร่อื งมือ Oval Tool 2

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

8

ใบงานที่ 5 การใช้เครื่องมือ Rectangle Tool

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

9

ใบงานที่ 6 การใช้เคร่อื งมอื Pencil Tool 1

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

10

ใบงานท่ี 7 การใช้เครื่องมอื Pencil Tool 2

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด โดยเลอื กวาดคนละ 5 แบบ (วาดรปู ใหญ่ๆ)

ใบงานท่ี 8 การใช้เคร่อื งมอื Pencil Tool 3

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

11

ใบงานท่ี 9 การใช้เคร่อื งมือ Brush Tool

คาชแ้ี จง : ใหน้ กั เรยี นวาดภาพตามแบบทก่ี าหนด

12

ใบงานที่ 10 การสร้างแอนิเมชนั่ แบบ Frame by frame 1
(การต์ นู กระพริบตา)

ใบงานที่ 11 การสร้างแอนิเมชนั่ แบบ Frame by frame 2
(การต์ นู ขยบั ปากพดู )

13

ใบงานที่ 12 การสรา้ งแอนิเมชนั่ แบบ Frame by frame 3

ใบงานที่ 13 การสรา้ งแอนิเมชนั่ แบบ Tween 1
(Motion Tween รถว่ิง)

สรา้ ง ซมิ โบล ตน้ ไม,้ ดวงอาทติ ย,์ ถนน, รถยนต์

14

ใบงานที่ 14 การสร้างแอนิเมชนั่ แบบ Tween 2
(Motion Tween เต่าเดิน)

ใบงานท่ี 15 การสร้างแอนิเมชนั่ แบบ Tween 3
(shape Tween )

15

ใบงานท่ี 16 การสร้างแอนิเมชนั่ แบบ Tween 4
(shape Tween )

16

ใบงานท่ี 17 การสร้างแอนิเมชนั่ แบบ Tween 2
(Motion Rotate รถว่ิง)

กรงุ เทพมหานคร – บรุ รี ัมย์ 927-
1 ม.4 ก

17

ใบงานท่ี 18 การประยกุ ตใ์ ช้โปรแกรม การสรา้ งนกบิน

คาชี้แจง : ใหน้ กั เรยี นวาดภาพตามหวั ขอ้ ทก่ี าหนดใหต้ ่อไปน้ี แลว้ จดั องคป์ ระกอบเองตามความเหมาะสม

ภาพนงิ่
1. ตน้ ไม้
2. ภเู ขา
3. บา้ น

แอนเิ มชนั่
1. ดวงอาทติ ย์
2. กอ้ นเมฆ
3. นกบนิ
4. ตน้ หญา้

ใบงานที่ 19 การประยกุ ตใ์ ช้โปรแกรม การสรา้ งไก่จิกอาหาร

คาชี้แจง : ใหน้ กั เรยี นวาดภาพตามหวั ขอ้ ทก่ี าหนดใหต้ ่อไปน้ี แลว้ จดั องคป์ ระกอบเองตามความเหมาะสม

ภาพน่ิง
1. ตน้ ไม้
2. พมุ่ ไม้
3. บา้ น
4. สระน้า

แอนิเมชนั ่
1. ดวงอาทติ ย์
2. กอ้ นเมฆ
3. นกบนิ
4. ตน้ หญา้
5. ไก่จกิ อาหาร

18

ใบงานท่ี 20 การสรา้ งตวั อกั ษรแอนิเมชนั่ แบบ Frame by frame 1

คาชี้แจง : ใหน้ กั เรยี นพมิ พข์ อ้ ความทก่ี าหนดใหต้ ่อไปน้ีเป็นแบบแอนิเมชนั่ โดยเปลย่ี นสที กุ ๆ เฟรม

1. Nongtadpittayakhom
school

2. Buriram Thailand
3. Kulnida Kapoo (ช่อื นกั เรยี น)

ใบงานท่ี 21 การสรา้ งตวั อกั ษรแอนิเมชนั่ แบบ shape Tween

คาชี้แจง : ใหน้ กั เรยี นพมิ พข์ อ้ ความทก่ี าหนดใหต้ ่อไปน้ีเป็นแบบแอนิเมชนั่ โดยเปลย่ี นสที กุ ๆ เฟรม

1. Nongtadpittayakhom school โรงเรยี น
หนองตาดพทิ ยาคม

2. Buriram Thailand บุรีรมั ย์
ประเทศไทย ปราสาทสายฟา้
3. ยนิ ดีตอ้ นรบั สู่

19

ใบงานท่ี 22 การประยกุ ตใ์ ช้โปรแกรม Flash ในการสร้างงาน

คาชี้แจง : ใหน้ กั เรยี นวาดภาพการต์ ูนแอนเิ มชนั่ ใหม้ คี วามยาวไมต่ ่ากว่า 2 นาที ตามหวั ขอ้ ทก่ี าหนดต่อไปน้ี
1. ภาวะโลกรอ้ น
2. เศรษฐกจิ พอเพยี ง
3. อาเซยี น