หนังสือเรียนรายวิชา แอนิเมชั่น 2 มิติเบื้องต้น ม.5

26 27 ภาพที่ 9.39 ภาพการใช้เคร่อื งมอื Line Tool 26) ปรบั ความหนาของ Stroke เทา่ กบั 1.00 27) ทำ�การลากเสน้ ให้ตรงตามต�ำ แหน่งของภาพร่าง 28 ภาพที่ 9.40 ภาพการใชเ้ คร่อื งมือ Line Tool 28) วาดให้ได้รปู ทรงสี่เหลยี่ มดงั ภาพ 201

29 30 ภาพที่ 9.41 ภาพการใชเ้ ครอ่ื งมือ Line Tool 29) ทแี่ ถบเครื่องมอื Toolbox เลอื กเครือ่ งมอื Line Tool 30) ลากเส้นทะแยงดังภาพ 31 32 ภาพท่ี 9.42 ภาพการปรับแตง่ ความโคง้ ของเสน้ ด้วย Selection Tool 31) ท่ีแถบเครอื่ งมอื Toolbox เลอื ก Selection Tool 32) ลากเมาสม์ าบริเวณกลางเสน้ จะปรากฏ Cursor เมาสท์ ม่ี ีลกั ษณะเปน็ เส้นโคง้ บนหัวลกู ศร ใหค้ ลกิ และดดั เสน้ ใหต้ รงกับภาพร่างดงั ภาพ 202

33 34 ภาพที่ 9.43 ภาพการใชเ้ ครอ่ื งมอื Line Tool 33) ทแี่ ถบเครอื่ งมือ Toolbox เลอื กเคร่อื งมือ Line Tool 34) ลากเส้นตรงให้ได้ตามแนวต้นไมด้ ังภาพ 35 36 ภาพท่ี 9.44 ภาพการปรบั แตง่ ความโคง้ ของเสน้ ด้วย Selection Tool 35) ทแี่ ถบเครื่องมือ Toolbox เลอื ก Selection Tool 36) ลากเมาสม์ าบริเวณกลางเสน้ จะปรากฏ Cursor เมาส์ทม่ี ีลกั ษณะเป็นเส้นโค้งบนหัวลกู ศร ให้คลกิ และดดั เส้นใหต้ รงกบั ภาพตน้ ไม้ที่รา่ งไว้ 203

37 38 39 ภาพที่ 9.45 ภาพการใชง้ านเคร่อื งมือ Oval Tool 37) ท่ีแถบเครือ่ งมอื Toolbox เลือกที่ Oval Tool 38) แดรกเมาส์เพื่อสร้างวงกลมดงั ภาพ 39) แต่งเติมวงกลมให้ครบถว้ นให้ได้รูปทรงของตน้ ไมต้ ามทีไ่ ดร้ ่างไว้ 40 41 ภาพท่ี 9.46 ภาพการใชง้ านเครอื่ งมอื Oval Tool 40) ทแี่ ถบเครอ่ื งมือ Toolbox เลอื กท่ี Oval Tool 41) แดรกเมาสเ์ พื่อสร้างวงกลมใหเ้ ป็นพมุ่ ไม้ 204

42 44 43 ภาพท่ี 9.47 ภาพการใช้ Selection Tool 42) ทแี่ ถบเครือ่ งมือ Toolbox เลือก Selection Tool 43) คลกิ เลือกเส้นทม่ี ีการทบั ซ้อนกนั ดังภาพ 44) เม่ือเลอื กครบแล้วให้กดป่มุ Delete บนคยี บ์ อรด์ 45 45) ตรวจสอบดผู ลลพั ธ์ ภาพท่ี 9.48 ภาพการใช้ Selection Tool 205

46 47 ภาพที่ 9.49 ภาพการเลอื กทำ�งานบน Layer 46) ท�ำ การ Lock Layer Tree 47) เลอื กท�ำ งานบน Layer Bin ซงึ่ เป็นเลเยอรถ์ ดั ไป 48 49 50 ภาพที่ 9.50 ภาพการใช้ Line Tool 48) ทแ่ี ถบเครื่องมอื Tool Box เลอื กที่ Line Tool 49) ลากเส้น Line ใหต้ รงกับภาพทร่ี า่ งเอาไว้ 50) ลากเส้นใหค้ รบตามภาพที่รา่ งเอาไว้ 206

51 52 53 ภาพที่ 9.51 ภาพการปรับแตง่ ความโค้งของเสน้ ด้วย Selection Tool 51) ทีแ่ ถบเครือ่ งมอื Toolbox เลอื ก Selection Tool 52) ให้คลิกและดัดเสน้ ใหเ้ กดิ ความโค้งตรงกบั ภาพร่าง 53) สังเกตดูผลลัพธ์ 54 55 ภาพท่ี 9.52 ภาพการเลือกทำ�งานบน Layer 54) ท�ำ การ Lock Layer Bin 55) เลือกทำ�งานบน Layer Background ซงึ่ เปน็ เลเยอรถ์ ดั ไป 207

56 57 ภาพท่ี 9.53 ภาพการสรา้ งรปู ทรงดว้ ย Rectangle Tool 56) ที่แถบ Toolbox เลอื กเครอ่ื งมอื Rectangle Tool 57) แดรกเมาสส์ รา้ งรปู ทรงสี่เหลย่ี มผืนผ้าให้เปน็ พน้ื ดังภาพ 58 ภาพที่ 9.54 ภาพการสรา้ งรปู ทรงด้วย Rectangle Tool 58) แดรกเมาสส์ ร้างรูปทรงสเี่ หลีย่ มผนื ผ้าดังภาพ 208

59 ภาพที่ 9.55 ภาพการสรา้ งรปู ทรงบนเลเยอร์ทกี่ ำ�หนดไว้ 59) สร้างรปู ทรงให้ครบตามแบบท่รี ่างไว้ 60 61 ภาพที่ 9.56 ภาพการเลอื กทำ�งานบน Layer 60) ท�ำ การ Lock Layer Background 61) เลือกทำ�งานบน Layer MountainBackground ซ่งึ เปน็ เลเยอรถ์ ดั ไป 209

62 63 ภาพที่ 9.57 ภาพการใชเ้ ครื่องมือ Line Tool 62) ทีแ่ ถบเคร่ืองมือ Toolbox เลือกเครอ่ื งมือ Line Tool 63) ลากเสน้ ไปเร่อื ย ๆ ตามแนวภาพร่าง 64 ภาพที่ 9.58 ภาพ ภาพการใช้ Line Tool 64) สร้างเสน้ ให้ครบเปน็ รูปทรงของภเู ขา 210

65 66 ภาพที่ 9.59 ภาพการปรับแต่งความโคง้ ของเสน้ ด้วย Selection Tool 65) ทแี่ ถบเครอ่ื งมอื Toolbox เลือก Selection Tool 66) ให้คลิกและดัดเส้นใหเ้ กดิ ความโคง้ ดงั รูป 67 68 ภาพที่ 9.60 ภาพการสร้างรปู ทรงโดยใชเ้ คร่ืองมอื Pen Tool 67) ท่ีแถบเครื่องมอื Toolbox เลือก Pen Tool 68) สรา้ งรูปทรงของก้อนเมฆขึ้นมา 211

69 ภาพที่ 9.61 ภาพการสรา้ งรูปทรงโดยใช้เครอ่ื งมอื Pen Tool 69) ทุกคร้งั ทค่ี ลิกและแดรกเมาสใ์ ห้เกดิ ความโคง้ จะเกดิ จุด Enchor Point ขึ้น ซงึ่ จะประกอบไปด้วยแขน 2 ขา้ ง เป็นจดุ บ่งบอกทศิ ทางของรูปทรง ใหค้ ลิกทจ่ี ุด Enchor Point หนึง่ ครง้ั เพือ่ ทำ�การหกั แขน เพือ่ ใหส้ ามารถสรา้ ง รูปทรงแบบตดั ได้ อยา่ งอสิ ระมากยิง่ ข้นึ 70 ภาพที่ 9.62 ภาพการสร้างรูปทรงโดยใช้เครื่องมือ Pen Tool 70) สังเกตดผู ลลพั ธ์ 71 ภาพที่ 9.63 ภาพการสรา้ งรูปทรงโดยใช้เครือ่ งมอื Pen Tool 71) ใช้เครือ่ งมอื Pen Tool สร้างกอ้ นเมฆอกี กอ้ นหน่ึง ด้วยเทคนิคเดยี วกัน 212

72 ภาพท่ี 9.64 ภาพการเกบ็ รายละเอยี ดในการสร้างรูปทรงประกอบฉาก 72) สรา้ งวตั ถุอนื่ ๆ ใหค้ รบถ้วนตรงตามภาพรา่ งทไ่ี ด้ออกแบบไวใ้ นตอนต้น 74 73 ภาพท่ี 9.65 ภาพการเลือกทำ�งานบน Layer 73) ทำ�การ Lock Layer MountainBackground 74) กลับมาที่ Layer Chair และคลิกท่ีไอคอน Lock Layer อกี ครงั้ เพือ่ ปลดลอ็ คเลเยอร์ และเริ่มต้นลงสใี นขัน้ ตอนถดั ไป 213

75 76 77 ภาพท่ี 9.66 ภาพการเลือกใช้เครือ่ งมือ Paint Bucket Tool 75) ทแี่ ถบเครื่องมือ Toolbox เลอื ก Paint Bucket Tool 76) คลกิ ท่ี Fill เพอ่ื เลือกสี 77) เลอื กสตี ามตอ้ งการ (ซึ่งในที่นใี้ ชส้ นี ำ้� ตาล) 78 ภาพท่ี 9.67 ภาพการเลือกใชเ้ ครื่องมือ Paint Bucket Tool 78) คลิกทบ่ี รเิ วณเกา้ อี้เพื่อลงสีใหค้ รบดงั ภาพ 214

79 80 ภาพที่ 9.68 ภาพการเลอื กใช้เครอ่ื งมอื Paint Bucket Tool 79) คลกิ ที่ Fill เพื่อเลือกสี 80) ปรับสใี ห้เขม้ ขน้ึ เลก็ นอ้ ย 81 ภาพท่ี 9.69 ภาพการเลอื กใชเ้ ครื่องมอื Paint Bucket Tool 81) คลกิ ลงสีตรงบรเิ วณท่ีเป็นเงาเพอ่ื ใหภ้ าพเกดิ มิติขน้ึ เล็กนอ้ ยดงั ภาพ 215

82 83 84 ภาพท่ี 9.70 ภาพการใชเ้ ครื่องมือ Pencil Tool 82) ที่แถบเคร่อื งมอื Toolbox เลือก Pencil Tool 83) เปล่ยี นสขี อง Stroke ให้เปน็ สีแดง และปรับความหนาของ Stroke ให้เท่ากับ 0.10 84) ลากเส้นตดั ผา่ นวตั ถุ เพอื่ กำ�หนดขอบเขตของเงาขัน้ ที่ 3 ดังภาพ 85 86 ภาพท่ี 9.71 ภาพการเลอื กใชเ้ ครื่องมอื Paint Bucket Tool 85) ท่แี ถบเคร่อื งมือ Toolbox เลอื ก Paint Bucket Tool 86) คลกิ ท่ี Fill เพือ่ ปรับสใี หเ้ ขม้ ขึ้นกวา่ เดมิ อีกเลก็ นอ้ ย 216

87 ภาพที่ 9.72 ภาพการเลอื กใชเ้ ครือ่ งมอื Paint Bucket Tool 87) คลิกลงสภี ายในบรเิ วณทก่ี ำ�หนดไวเ้ พอ่ื ใหเ้ กิดเป็นเงาข้ันที่ 3 ทำ�ให้ภาพดูมมี ติ มิ ากยิง่ ขึน้ 88 90 89 ภาพท่ี 9.73 ภาพการใช้ Selection Tool 88) ทแี่ ถบเครอื่ งมอื Tool Box เลือกที่ Selection Tool 89) คลกิ เลือกเส้นสแี ดงทใี่ ช้ในการก�ำ หนดขอบเขตของเงาขน้ั ท่ี 3 90) เมอ่ื เลอื กครบแลว้ ให้กดป่มุ Delete บนคยี ์บอรด์ และตรวจดผู ลลัพธ์ 217

91 92 ภาพที่ 9.74 ภาพการเลอื กทำ�งานบน Layer 91) ทำ�การ Lock Layer Chair 92) กลบั มาที่ Layer Tree และคลิกทไี่ อคอน Lock Layer อีกครง้ั เพ่อื ปลดล็อคเลเยอร์ และเริ่มต้นลงสใี นข้นั ตอนถัดไป 94 93 ภาพท่ี 9.75 ภาพการเลือกใชเ้ ครอื่ งมือ Paint Bucket Tool 93) ท่ีแถบเครือ่ งมือ Toolbox เลอื ก Paint Bucket Tool 94) คลกิ ที่ Fill และเลือกสีตามท่ีต้องการ 218

95 ภาพที่ 9.76 ภาพการเลอื กใช้เคร่ืองมอื Paint Bucket Tool 95) คลกิ ลงสีวตั ถใุ ห้ครบทุกช้ินบนเลเยอร์น้ัน ๆ 96 97 ภาพท่ี 9.77 ภาพการใชเ้ ครอื่ งมอื Line Tool 96) ทีแ่ ถบเคร่อื งมอื Toolbox เลือก Line Tool 97) เปล่ียนสขี อง Stroke ใหเ้ ป็นสแี ดง และปรบั ความหนาของ Stroke ให้เท่ากบั 0.10 > ลากเส้นตัดผา่ นวตั ถุ เพื่อก�ำ หนดขอบเขตของเงาขนั้ ที่ 2 ดงั ภาพ 219

98 99 ภาพท่ี 9.78 ภาพการเลือกใช้เครือ่ งมอื Paint Bucket Tool 98) ทแี่ ถบเครือ่ งมอื Toolbox เลือก Paint Bucket Tool 99) คลิกท่ี Fill และปรับสีใหเ้ ข้มขึน้ เล็กนอ้ ย > คลกิ ลงสภี ายในบริเวณท่ีก�ำ หนดไวเ้ พ่อื ใหเ้ กิดเป็นเงาตกกระทบ ดังภาพ 100 101 ภาพที่ 9.79 ภาพการใช้ Selection Tool 100) ใช้เครื่องมือ Selection Tool คลิกเลอื กเส้นสแี ดงทใ่ี ชใ้ นการกำ�หนดขอบเขตของเงาตกกระทบ > Delete 101) ตรวจดูผลลัพธ์ 220

102 ภาพท่ี 9.80 ภาพการเลอื กใช้เคร่ืองมือ Paint Bucket Tool 102) ลงสีวตั ถุบนเลเยอร์ต่าง ๆ ใหค้ รบตามวิธกี ารต่าง ๆ ท่ไี ดก้ ลา่ วไวใ้ นขา้ งตน้ 103 104 105 ภาพที่ 9.81 ภาพข้นั ตอนในการ Test Preview 103) ทแ่ี ถบ Menu Bar ด้านบนคลิกที่ Control 104) เลอื กท่ี Test Movie 105) เลือกที่ Test หรือ กด Ctrl + Enter บนคียบ์ อร์ด 221

106 ภาพท่ี 9.82 ภาพการ Test Preview 106) จะเห็นหน้าตา่ งแสดงผลดงั ภาพ เอกสารอา้ งองิ ธรรมปพน ลอี ำ�นวยโชค.(2550).Intro to Animation กรงุ เทพฯ: ส�ำ นกั พมิ พ์ฐานบคุ๊ ส์. Chris Georgenes.(2552). เรียนลดั เล่หโ์ กง Adobe Flash กรุงเทพฯ: บรษิ ัทซีเอด็ ยเู คชั่น จำ�กดั (มหาชน) ดนยั ม่วงแกว้ .(2549). Digiart Flash Workshop นนทบรุ ี : ไอดซี ฯี โปรแกรมทใ่ี ช้ประกอบการสอน Adobe Flash เวอรช์ นั่ CS 6 222

Workshop กจิ กรรมที่ 9 ใบงานท่ี 9.1 Flash Animation 02 ใหน้ กั เรียนสรา้ งสรรค์และออกแบบชิน้ งานดว้ ยโปรแกรม Flash-01 ใหน้ กั เรยี นเขียนสตอรบ่ี อร์ดงานแอนิเมช่นั หนังสั้น พร้อมทง้ั ทำ�แบบรา่ งตวั ละครและเขยี นอธบิ ายถึงแนวคิดและทม่ี าท่ไี ปของงาน เพอ่ื ใหเ้ ห็นถึงระบบการ วางแผนในการท�ำ งานในระดบั Pre-production ในเบ้อื งต้น 223

Workshop กจิ กรรมท่ี 9 ใบงานท่ี 9.2 Flash Animation 02 ใหน้ กั เรยี นสรา้ งสรรคแ์ ละออกแบบชิ้นงานดว้ ยโปรแกรม Flash-02 ใหน้ ักเรยี นออกแบบตวั ละครพร้อมกบั ฉากหลังดว้ ยโปรแกรม Flash 224

Workshop กิจกรรมที่ 9 ใบงานท่ี 9.3 Flash Animation 02 ให้นักเรียนสรา้ งสรรค์และออกแบบช้นิ งานด้วยโปรแกรม Flash-03 ใหน้ กั เรยี นก�ำ หนดการเคลอ่ื นไหวให้กับตวั ละครท่เี ตรียมไว้ในลักษณะของการที่ ตัวละครเดนิ ผา่ นเข้ามาในฉาก 225

บทท่ี 10 การแปลงไฟล์เพอ่ื นำ�เสนองาน 10.1 การจดั เตรยี มและน�ำ เสนองาน 33 ภาพที่ 10.1 ภาพการ Export ไฟลง์ าน 33) เตรยี มไฟล์งานทีไ่ ด้ทำ�การก�ำ หนดการเคล่อื นไหวเป็นท่เี รียบรอ้ ยแล้ว 34 ภาพท่ี 10.2 ภาพการ Export ไฟล์งาน 34) ที่แถบ Menu bar เลอื กท่ี Export > Export Movie 226

35 ภาพที่ 10.3 ภาพการเลอื กสถานที่ในการจัดเกบ็ ไฟล์ 35) เลือกโฟลเดอร์ทใี่ ชจ้ ดั เกบ็ งานและตง้ั ชื่อไฟลใ์ หเ้ รียบรอ้ ย 36 ภาพท่ี 10.28 ภาพการเลอื กประเภทไฟลใ์ นการจดั เกบ็ 36) เลอื กประเภทของไฟล์ในการจัดเก็บ 37 ภาพที่ 10.4 ภาพการ Play Movie เพอ่ื ตรวจสอบการเคลอ่ื นไหว 37) Play Movie เพื่อตรวจสอบการเคลอ่ื นไหว 227

เอกสารอา้ งอิง ธรรมปพน ลอี ำ�นวยโชค.(2550).Intro to Animation กรงุ เทพฯ: สำ�นักพมิ พฐ์ านบุ๊คส์. Chris Georgenes.(2552). เรียนลดั เล่หโ์ กง Adobe Flash กรุงเทพฯ: บริษัทซีเอ็ดยูเคชั่น จำ�กัด(มหาชน) ดนยั ม่วงแกว้ .(2549). Digiart Flash Workshop นนทบรุ ี : ไอดซี ีฯ Adobe Flash เวอร์ชน่ั CS 6 โปรแกรมทใี่ ชป้ ระกอบการสอน 228

Workshop กิจกรรมที่ 10 ใบงานท่ี 10.1 สร้างสรรคผ์ ลงานแอนิเมช่นั เรอ่ื งสนั้ 3-4 นาที (งานเดย่ี ว) ใหน้ กั เรียนสร้างสรรค์ สรา้ งสรรคผ์ ลงานแอนิเมชั่นเรือ่ งส้ัน 3-4 นาที รายบคุ คล โดยไม่จำ�กัดเน้อื หาและวีธกี ารนำ�เสนอ 229

Workshop กิจกรรมที่ 10 ใบงานที่ 10.2 สรา้ งสรรค์ผลงานแอนเิ มชนั่ เรอื่ งส้ัน 5 นาที (งานกลมุ่ ) ใหน้ ักเรียนแบง่ กลุ่ม 3-5 คน สรา้ งสรรคผ์ ลงานแอนิเมชนั่ เร่อื งส้ัน 5 นาที โดยไม่ จ�ำ กดั เนื้อหาและวีธีการนำ�เสนอ 230

บรรณานุกรม ธรรมปพน ลีอำ�นวยโชค.(2550).Intro to Animation กรงุ เทพฯ: ส�ำ นกั พิมพ์ฐานบุ๊คส.์ Chris Georgenes.(2552). เรยี นลัด เล่หโ์ กง Adobe Flash กรงุ เทพฯ: บริษทั ซีเอ็ดยเู คช่ัน จำ�กดั (มหาชน) ดนัย มว่ งแก้ว.(2549). Digiart Flash Workshop นนทบรุ ี : ไอดีซฯี พันจันทร์ ธนวฒั นเสถยี ร.(2554). สร้างงานมลั ติมเี ดยี แอนิเมช่นั ด้วย Adobe Flash กรงุ เทพฯ: ซิมพลฟิ าย พเิ ชษฐ วฒั นเวสกร. (2552). Digitalart CG Painting Basic นนทบุรี : ไอดซี ีฯ. Mark T. Byrne. (1999).The Art of Layout and Storyboarding Ireland : Speciality Print & Design Ltd ยุทธภณั ฑ์ เมฆลอย. (2553). ฝกึ วาดการต์ ูนสนุกจงั vol.01 กรุงเทพฯ : บริษัทอมรินทร์ บ๊คุ เซ็นเตอร์. นุรพงษ์ เวชสวุ รรณมณ.ี (2550). พื้นฐานการสรา้ งงานเคล่อื นไหว 2 มิติ กรุงเทพฯ : บริษัทซเี อ็ดยูเคชัน่ จ�ำกดั (มหาชน). สุรพงษ์ เวชสวุ รรณมณ.ี (2550). พ้นื ฐานการสร้างงานเคลอื่ นไหว 2 มิติ กรุงเทพฯ : บรษิ ทั ซเี อ็ดยเู คช่ัน จ�ำ กัด (มหาชน). กษิรา ศริ ิวฒั นากุล, วรางคณา ธนสริ ติ ระกลู (2551). Computer Art & Graphi Design เสน้ ทางส่นู กั กราฟกิ มอื อาชพี กรุงเทพฯ: โรงเรียนอินเทอร์เน็ตและการออกแบบ (Net Design) 231

คณะกรรมการดำ�เนนิ งานพฒั นาเอกสารประกอบการสอนรายวชิ าคอมพิวเตอรม์ ัลตมิ เี ดียเบื้องตน้ นายสิรวิ ิชย ์ พงั สุวรรณ คณะบรรณาธกิ าร คณะกรรมการฝา่ ยเสริมวิชาการ 232

233

สำ�นกั งานคณะกรรมการอดุ มศึกษา กระทรวงศกึ ษาธิการ 234