3 Frame by frame · เล่มที่ 6 เรื่อง เทคนิค Motion Guide และ Mask Layer

เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน เปนเอกสารทใชประกอบการเรยน การสอน วชาคอมพวเตอร กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 3 เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame เอกสารประกอบการเรยนเลมน จดท าขนเพอใหนกเรยนไดศกษาเรยนร และใชประกอบการเรยน ซงจะชวยใหนกเรยนมความสนใจในบทเรยนมากยงขน สงผลใหนกเรยนมผลสมฤทธทางการเรยนสงขน และน าไปใชประโยชนในชวต ประจ าวนได ผจดท าหวงอยางยงวาเอกสารประกอบการเรยนเลมน จะเปนสอการเรยนรทชวยอ านวยความสะดวกแกครและนกเรยน เพอชวยพฒนาศกยภาพของผเรยนใหบรรลตวชวดและมาตรฐานตามทหลกสตรก าหนดไวทกประการ

กรรชพร แสงจนทร

ก

ค ำน ำ

เรอง หนา ค าน า........................................................................................................................ ก สารบญ..................................................................................................................... ข ค าแนะน าการใช....................................................................................................... ค การสรางการตนอนเมชน ........................................................................................................ 1 ตวชวด................................................................................................................ 1 สาระการเรยนรแกนกลาง................................................................................... 1 แนวคด................................................................................................................ 2 สาระการเรยนร................. ................................................................................. 2 จดประสงคการเรยนร......................................................................................... 2 ขอสอบกอนเรยน................................................................................................ 3 Animation แบบ Frame by frame....................................................................... 5 ใบงานและแบบฝกหดระหวางเรยน ขอสอบหลงเรยน................................................................................................ 21 เอกสารอางอง.......................................................................................................... 23 ภาคผนวก................................................................................................................. 24 เฉลยขอสอบ....................................................................................................... 25

ข

สำรบญ

เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน เปนเอกสารทใชประกอบ

การเรยนการสอน วชาคอมพวเตอร กลมสาระการเรยนรการงานอาชพและเทคโนโลย

ชนมธยมศกษาปท 3 เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame

จดท าขนเพอใหนกเรยนใชศกษาเรยนร และใชประกอบการเรยน โดยจดแบงเนอหา ออกเปน

10 เลม ดงน

เลมท 1 เรอง การใชโปรแกรมแฟลซ

เลมท 2 เรอง การวาดรปทรงพนฐาน

เลมท 3 เรอง Animation แบบ Frame by frame

เลมท 4 เรอง Animation แบบ Motion Tween

เลมท 5 เรอง Animation แบบ Shape Tween

เลมท 6 เรอง เทคนค Motion Guide และ Mask Layer

เลมท 7 เรอง Symbol และ Instance

เลมท 8 เรอง การน าเขาภาพ เสยง และวดโอ

เลมท 9 เรอง การใชงาน Scene

เลมท 10 เรอง การเผยแพรและน าไปใช

กอนทจะศกษาเอกสารประกอบการเรยนเลมน นกเรยนควรท าความเขาใจเกยวกบขนตอน

การใชเอกสารประกอบการเรยน เพอทจะไดปฏบตไดถกตองและเกดประโยชน ตามจดมงหมายของ

แตละตอน โดยขอใหนกเรยนปฏบตตามค าแนะน า ดงน

ค

ค ำแนะน ำกำรใช

1. นกเรยนศกษาแนวคด สาระการเรยนร จดประสงคการเรยนร กอนลงมอท าขอสอบ

กอนเรยน จ านวน 10 ขอ

2. นกเรยนศกษาหาความรเพมเตม จากเอกสารประกอบการเรยนแตละตอนตามล าดบ

ตงแตตนจนถงหนาสดทายใหเขาใจ

3. เมอเกดปญหาไมเขาใจค า หรอขอความใดนกเรยนสามารถถามครได

4. นกเรยนท าแบบฝกทบทวนทกกจกรรมตามทก าหนดใหลงในกระดาษค าตอบหรอใบ

งานทจดเตรยมไวให และตรวจค าตอบจากเฉลย

5. หลงจากศกษาเนอหาและท ากจกรรมแตละตอนจบแลวใหนกเรยนท าขอสอบ หลง

เรยน เพอทดสอบความร ความเขาใจ

6. ตรวจขอสอบ 10 ขอ ทงกอนเรยนและหลงเรยน จากเฉลย และเปรยบเทยบการเรยนร

กอนศกษาเอกสารประกอบการเรยนและหลงศกษาบทเรยนแลว หากนกเรยนยงไมเขาใจเรองใด ให

กลบไปทบทวนบทเรยนใหม

7. ขอส าคญ นกเรยนตองซอสตยตอตนเอง ไมเปดดเฉลยขอสอบกอนเรยนและหลงเรยน

รวมทงแบบฝกหดทกกจกรรมกอนเดดขาด และหามลอกของเพอน เพราะนกเรยนจะไมประสบ

ความส าเรจในการเรยนตามเอกสารประกอบการเรยน เลมนเลย

8. ถานกเรยนและผทสนใจศกษาทกทานตองการขอมลหรอเนอหาเพมเตมจากเอกสาร

ประกอบการเรยนทง 10 เลมน สามารถคนควาไดจากเอกสารอางองทใหไวทายเลม

ง

ค าชแจงส าหรบคร

เอกสารประกอบการเรยนเรอง การสรางการตนอนเมชน กลมสาระการเรยนรการงานอาชพ

และเทคโนโลย ชนมธยมศกษาปท 3 เลมนใชเปนสอประกอบการจดกจกรรมการเรยนร เพอพฒนาทกษะการเรยนรวชาคอมพวเตอร โดยมขนตอนการปฏบตดงน

1. ครแจกเอกสารประกอบการเรยน เรอง การสรางการตนอนเมชนกลมสาระการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 3 เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame ใหนกเรยนทกคนในชนเรยน

2. ครชแจงการเรยนดวยเอกสารประกอบการเรยนเลมนใหนกเรยนฟงกอนลงมอศกษา 3. ครใหนกเรยนท าแบบทดสอบกอนเรยนเสมอโดยทนกเรยนจะตองไมดเฉลยกอนลงมอท า

เพอฝกความสอสตยตอตนเองและผอน 4. ครใหนกเรยนเรมศกษาและท ากจกรรมการเรยนรจากใบความรและท าใบงาน

โดยทนกเรยนจะตองไมดเฉลยกอนลงมอท าใบงาน 5. ครใหนกเรยนท าแบบทดสอบหลงเรยนเสมอโดยทนกเรยนจะตองไมดเฉลยกอนลงมอท า

เพอฝกความสอสตยตอตนเองและผอน 6. ครตรวจสอบและเฉลยค าตอบของใบงานและแบบทดสอบกอนเรยนหลงเรยนและบนทกผล 7. ครสงเกตพฤตกรรมนกเรยนระหวางทากจกรรมการเรยนการสอนครงนและบนทกผล 8. ครแจงคะแนนใหนกเรยนทราบและชมเชยนกเรยนพรอมใหค าแนะน าเพมเตม 9. เวลาทใชในการจดกจกรรมการเรยนการสอนสามารถยดหยนไดตามความ

เหมาะสม

จ

ค ำชแจงส ำหรบนกเรยน

เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชนมธยมศกษาปท 3 เลมนใชเปนสอประกอบการจดกจกรรม การเรยนรเพอพฒนาทกษะการเรยนรวชาคอมพวเตอรโดยมกจกรรมหลกดงน

1. นกเรยนฟงค าชแจงการใชเอกสารประกอบการเรยนเรอง การสรางการตน อนเมชน เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame

2. นกเรยนรบเอกสารประกอบการเรยนเปนรายบคคล 3. นกเรยนเรมท าแบบทดสอบกอนเรยนเพอตรวจสอบดวานกเรยนมพนฐานความร

ความเขาใจมากนอยเพยงใด 4. นกเรยนศกษาและปฏบตกจกรรมการเรยนรแตละใบงานจากเอกสารประกอบ

การเรยนและแผนการจดการเรยนรจากคร นกเรยนปฏบตตามล าดบขนตอนดงตอไปน

ศกษาใบความรท 1

ท าใบงานท 1



ฉ

ท าแบบฝกหดระหวางเรยนท 1

5. นกเรยนศกษาเอกสารประกอบการเรยนตงใจศกษาเนอหาท าความเขาใจตาม ขนตอนโดยหามขามขนตอน

6. เมอพบค าชแจงหรอค าถามในแตละใบงานใหอานและท าใบงานอยางรอบคอบ 7. สงผลงานการท าใบงานเลมนเพอใหครตรวจและบนทกผล 8. เมอท าใบงานครบถวนแลวใหนกเรยนท าแบบทดสอบหลงเรยนดวยความตงใจ

และซอสตย 9. นกเรยนรบฟงการแจงคะแนนค าชมเชยและค าแนะนาเพมเตมจากคร 10. นกเรยนควรใหความรวมมอตงใจในการท ากจกรรมทกครง



ช

ท าแบบฝกหดระหวางเรยนท 2

นกเรยนเขำใจ

แลวนะคะ

มำตรฐำนกำรเรยนร / ตวชวด

สำระท 3 เทคโนโลยสำรสนเทศและกำรสอสำร

มำตรฐำน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศ ในการสบคน

ขอมล การเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล

มคณธรรม

ตวชวด

1. อธบายหลกการท าโครงงานทมการใชเทคโนโลยสารสนเทศ

2. เขยนโปรแกรมภาษาขนพนฐาน

3. ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสมกบลกษณะงาน

4. ใชคอมพวเตอรชวยสรางชนงานจากจนตนาการหรองานทท าในชวตประจ าวน

ตามหลกการท าโครงงานอยางมจตส านกและความรบผดชอบ

สำระกำรเรยนรแกนกลำง

1. หลกการท าโครงงานเปนการพฒนาผลงานทเกดจากการศกษา คนควา

ด าเนนการพฒนาตามความสนใจและความถนดโดยใชเทคโนโลยสารสนเทศ

2. หลกการพนฐานในการเขยนโปรแกรม

2.1 แนวคดและหลกการโปรแกรม โครงสรางโปรแกรม ตวแปร การล าดบค าสง การ

ตรวจสอบเงอนไข การควบคมโปรแกรม ค าสงแสดงผล และรบขอมล การเขยนโปรแกรมแบบงายๆ

1

กำรสรำงกำรตนอนเมชน

หนวยกำรเรยนรท 3 เรอง Animation แบบ Frame by frame

2.2 การเขยนสครปต เชน จาวาสครปต แฟลช

3. การเลอกซอฟตแวรทเหมาะสมกบลกษณะของงาน การใชซอฟตแวรและอปกรณดจทล

มาชวยในการน าเสนองาน

4. การใชคอมพวเตอรชวยสรางงานตามหลกการท าโครงงานโดยมการอางองแหลงขอมล

ใชทรพยากรอยางคมคาไมคดลอกผลงานผอน ใชค าสภาพและไมสราง

ความเสยหายตอผอน

สำระกำรเรยนร

1. สวนประกอบของ Timeline

2. การสรางเฟรมและลบเฟรม

3. การสรางภาพเคลอนไหวAnimation Frame By frame

จดประสงคกำรเรยนร

1. บอกสวนประกอบของ Timeline ได

2. สรางเฟรมและลบเฟรมได

3.สรางภาพเคลอนไหว Animation Frame By frame ได

2

ค าชแจง 1. ขอสอบม 4 ตวเลอก คอ ก ข ค และ ง 2. ขอสอบมจ านวน 10 ขอ ขอละ 1 คะแนน

3. นกเรยนเลอกค าตอบทถกทสดเพยงค าตอบเดยว โดยกาเครองหมาย x ลงในกระดาษค าตอบ 1. Frame เปรยบเสมอนสงใด? ก. กระดาษ ข. รปภาพ ค. พนหลง ง. หนาตาง 2. Time Line หมายถงสงใด? ก. ชวงเวลาทใชในการภาพเรมตน ข. ชวงเวลาทใชในการภาพสนสด ค. ชวงเวลาทใชในการสรางภาพเคลอนไหว ง. ชวงเวลาทใชในการสรางภาพนง 3. ภาพในขอใดอยในสวนของ Timeline?

ก. ข.

ค. ง.

4. คยเฟรม Keyframeมความสอดคลองกบขอใดมากทสด? ก. การก าหนดต าแหนงการสรางภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในแตกตางกน ข. เฟรมวางทไมก าหนดภาพเปนเฟรมวางเปลา ค. ชองสเหลยมเลกๆ ทเรยงตอกนตามชวงเวลา ง. การก าหนดเวลาทใชในการสรางภาพเคลอนไหว

3

ขอสอบกอนเรยน

เรอง กำรสรำงกำรตนอนเมชน วชำ คอมพวเตอร

กลมสำระกำรเรยนรกำรงำนอำชพและเทคโนโลยชน มธยมศกษำปท 3


5. การสรางKeyframe ใชค าสงในขอใด?

ก. Keyframe---> Timeline ---> Insert ข. Timeline --->Insert--->Keyframe

ค. Insert--->Timeline ---> Frame ง. Insert--->Timeline--->Keyframe

6. ปมใดแทนการใชค าสง Insert--->Timeline--->Frame?

ก. F3 ข. F4

ค. F5 ง. F6

7. Frame By Frame Animation หมายถง ขอใด?

ก. การตดตอภาพทเหมอนกน เรยงตอกนอยางตอเนอง

ข. การเปลยนรปทรงจากภาพถงไปยงอกภาพหนงอยางตอเนอง

ค. การแสดงภาพแตละภาพทเรยงตอกนอยางตอเนองจนดเหมอนวาภาพนน

มการเคลอนไหว

ง. การแสดงภาพทเหมอนกน น ามาเรยงตอกนอยางตอเนอง

8. กดป ม F7 มความสอดคลองกบขอใดมากทสด?

ก. การสรางคยเฟรมก าหนดภาพนง ข.การลบเฟรมทไมตองการ

ค. การสรางคยเฟรมก าหนดภาพเคลอนไหว ง.การสรางคยเฟรมวางเปลาไมใหมการ

สรางภาพเคลอนไหว

9. Ctrl + Enter สอดคลองกบขอใด?

ก. ป มทแสดงการทดสอบผลงาน ข. ปมเรมตนการท างาน

ค. ปมสนสดการน าเสนองาน ง. ป มหยดการน าเสนองาน

10. การเคลอนทของหวอานจะเปนอยางไรเมอกด Enter?

ก. จากทางดานซายไปขวา ข. จากทางดานขวาไปซาย

ค. จากทางดานลางขนบน ง. จากทางดานบนลงลาง

4

ภาพเคลอนไหวAnimation หรอการสรางภาพยนตรคอการน าภาพนงมาเรยงกนเปนชด ๆเพอแสดงบนจอทละภาพ ในการแสดงแตละภาพจะตอเนองกนท าใหดเหมอนวาภาพเคลอนไหว ซงอาจเปนภาพทไดจากภาพวาดโดยใชโปรแกรม flashและใสลกเลนหรอ Effect ใหการเคลอนไหวดสวยงามและนาสนใจมากยงขน เมอมการน าคอมพวเตอรมาใชสรางสรรคภาพยนตร หรอภาพเคลอนไหว Animationโดยใชโปรแกรม flash นน Frame กเปรยบเสมอนกระดาษแตละใบทมการวาดอรยาบถของการตนลงไปและ Timeline กคอชวงเวลาทใชควบคมการน าเสนอ ดงนน Frame และ Timeline จงเปนสวนส าคญอกสวนในการสรางภาพเคลอนไหวของ Flash Timeline เปนสวนประกอบทส าคญหนาตางTimeline แบงเปนสวนใหญๆ 2 สวน แตละสวนท างานอยางสมพนธกน เพอควบคมและแสดงผลการท างานของชนงานใน Movie ประกอบดวย กรอบLayer และกรอบFrame ดงนน Timeline เปรยบเสมอนชวงเวลาทใชในการสรางภาพเคลอนไหว หรอ Movie โปรแกรมจะแบงชวงใหหนวยละ 5 ชวงเวลา

5

Timeline 4

3 5 2

1

6 7 8 9 10 11

13 12 14 15

ใบควำมรท 1

เรอง กำรสรำงภำพเคลอนไหว Animation ดวยโปรแกรมFlash

ของรปทรง

กำรสรำงภำพเคลอนไหวAnimation ดวยโปรแกรม Flash

1) กรอบ Layer 6) เพมเลเยอร 11) อตราการแสดงของเฟรม 2) กรอบ Frame 7) ไกลเลเยอร 12) หวอาน(Play Head 3) ซอน/แสดงเลเยอร 8) สรางโฟลเดอร 13) Frame 4) ลอค/ปลดลอคเลเยอร 9) ลบเลเยอร 14) หมายเลขชวงเวลา 5) แสดงเลเยอรแบบโครงราง 10) ก าหนด OnionSkin 15) มมมองไทมไลน

Frame เฟรม คอ ชองสเหลยมเลกๆ ทเรยงตอกนตามชวงเวลา แตละชองเปรยบเสมอน

กระดาษ 1 แผนทวาดMovie 1อรยาบถ และเปลยนไปทกๆ เฟรม เพอใหเกดการเคลอนไหวของวตถการเพมFrame ใหใชค าสง Insert --->Timeline --->frame หรอกดป ม F5เพอเพมเฟรมหรอก าหนดเฟรมใหยาวขน

Keyframe คยเฟรม คอ การก าหนดต าแหนงการสรางภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในทแตกตางกน จะก าหนดใหมสถานะเปน Keyframe โดยใชค าสงInsert --->Timeline --->Keyframe หรอกดป ม F6 เพอเพมคยเฟรม

ทงน ยงสามารถก าหนดเฟรมวาง เพอไมก าหนดการแสดงของภาพไดโดยก าหนดคยเฟรมทเปนเฟรมวางเปลา โดยใชค าสง Insert --->Timeline ---> Blank Keyframe หรอกดป ม F7 เพอเพมคยเฟรมวาง

6

Frame Keyframe

Blank Keyframe เฟรมทเกดขอผดพลาด

Actionscript

เฟรม และคยเฟรม (Frame & Keyframe)

เปนการสรางภาพเคลอนไหวแบบแยกเฟรม จะมอสระตอกนมากทสด การเคลอนไหว แตละเฟรมแยกกน โดยน าภาพมาเรยงตอกนอยางตอเนอง จนดเหมอนวาภาพนนมการเคลอนไหว การเปลยนแปลงของภาพแตละภาพทเรยงอยางตอเนองในลกษณะน เหมาะส าหรบการท า Animation ทซบซอนมการเคลอนไหวลกษณะทาทางมาก เชน การตนตวเสน, กนแตงโม, ดอกไมบาน, การงอกของตนไม, การบนของผเสอ, การเดนของคนและสตว เปนตน ขอเสย ของการสรางภาพเคลอนไหวแบบแยกเฟรมน จะใชภาพวาดจ านวนมาก โดยทแตละ Frame จะวาดภาพในลกษณะทาทางตาง ๆ1 ภาพ ท าใหเสยเวลา แตจะท าใหภาพมการเคลอนไหวทเหมอนจรง กำรใช Onion Skin ตามปกตขณะสรางเนอหาใหกบเฟรม จะมองเหนเฉพาะภาพของเฟรมปจจบน แตเมอ ใช Onion skin จะสามารถมองเหนภาพของเฟรมอน ๆ ไดดวย ซงมประโยชนในการสรางภาพ เคลอนไหวแบบ Frame by frameมากเพราะจะท าใหทราบวาในเฟรมปจจบนจะตองปรบใหออบเจกตเคลอนไหวไปแคไหนและอยางไร เมอเทยบกบเฟรมกอนหนาและเฟรมถดไป อกทง ในการใช Onion skinสามารถเลอกทจะแกไขเฉพาะภาพในเฟรมปจจบน หรอแกไขเฟรมอน ๆ ไปพรอมกนกได หวอำนหรอ Play Head

หลกการท างานของหวอาน Play Head เพอทดสอบการเคลอนไหวโดยการกดป ม Enter ทแปนพมพ หวอานเปนรปสเหลยมเลกสชมพ จะเคลอนทจากทางดานซายไปดานขวาโดยผานชองเฟรมทมออบเจกตตางๆ

7

Play Head

กำรเคลอนไหวชนดภำพตอภำพ (Frame By Frame Animation)

8

ใบงำนท 1

เรอง กำรสรำงภำพเคลอนไหวAnimationดวยโปรแกรมFlash

ค ำชแจง นกเรยนวาดภาพการตนโดยใชเครองมอของโปรแกรม Flash ทนกเรยน

ชนชอบ พรอมใสสใหสวยงามลงในเครองคอมพวเตอร (5 คะแนน )

สอ/วสดอปกรณ

1. เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame

2. เครองคอมพวเตอร

ชอ...................................................สกล.................................เลขท......................

ค ำชแจง 1. ขอสอบม จ านวน 5 ขอ ขอละ 1 คะแนน

2. นกเรยนตอบค าถามตอไปนใหไดใจความสมบรณ

1. Timeline คออะไร? ตอบ .......................................................................................................................... ................................................................................................................................................. 2. เฟรม Frameคออะไร? ตอบ........................................................................................................................................ ................................................................................................................................................. 3. หนาตาง Timeline ประกอบดวยกสวนอะไรบาง? ตอบ ......................................................................................................................................... ................................................................................................................................................. 4. คยเฟรมKeyframeคออะไร? ตอบ ......................................................................................................................................... ................................................................................................................................................. 5. Frame By Frame Animation หมายถงอะไร? ตอบ ........................................................................................................................................ .................................................................................................................................................

9

แบบฝกหดระหวำงเรยนท 1


เปนการสราง Animation กนแตงโม ทละนอยจนหมด โดยใช Animation แบบ Frame by frame

1. วาดรปแตงโมลงในชองเฟรมท 1และกดป ม Onion skin

2. คลกเฟรมท 2 กดป ม F6 ทแปนพมพ หรอเมน Inserts ---> Timeline --->Keyframe เพอ สรางคยเฟรมใหม โดยรปแตงโมจะถกเพมลงมาดวยในเฟรมท 2

3. คลกป ม Eraser Tool ยางลบท Tool box เลอกขนาดหวยางลบตามตองการ 4. ท าการลบเนอแตงโมเสมอนกนแตงโมทละค า 5. คลกเฟรมท 3 กดป ม F6 ทแปนพมพหรอเมน Inserts ---> Timeline --->Keyframe เพอสรางคยเฟรมใหม แลวท าการลบเนอแตงโมโดยใช Eraser Tool

10

Onion skin

เรอง กำรสรำงภำพ Animation แบบ Frame by frame ของรปทรง

ขนตอนกำรสรำงAnimation แบบ Frame by frame (กนแตงโม)


6. คลกเฟรมท 4 กดป ม F6 ทแปนพมพ หรอเมน Inserts ---> Timeline --->Keyframe เพอสรางคยเฟรมใหม แลวท าการลบเนอแตงโมโดยใช Eraser Tool ท าเชนนไปเรอยๆ จนกวาเนอแตงโมจะหมดหรอตามตองการ

ถาตองการลบ frame ทไมตองการออกโดยท าการคลกเมาสซายแลวลากคม frame ทตองการลบ แลวคลกขวาเลอก Remove Frame

7. กดป ม Ctrl + Enter เพอทดสอบดผลงาน การสราง Animation กนแตงโม โดยใช Animation แบบ Frame by frame

11

หวอาน Play Head

12


เรอง กำรสรำงภำพ Animation แบบ Frame by frame

ค ำชแจง

นกเรยนสรางภาพเคลอนไหว Animation แบบ Frame by frame (การตนตวเสนเคลอนไหว) โดยใชหลกการเดยวกนกบการกนแตงโม ลงในเครองคอมพวเตอร( 5 คะแนน )

สอ/วสดอปกรณ

1. เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน เลมท 3 หนวยการเรยนรท 3Animation แบบ Frame by frame


ชอ...................................................สกล.................................เลขท......................



1. บอกขนตอนวธการลบเฟรมทไมตองการ? ตอบ ...........................................................................................................................

................................................................................................................................................. 2. Onion Skin มคณสมบตอยางไร?

ตอบ ......................................................................................................................................... ................................................................................................................................................. 3. หลกการท างานของหวอาน Play Head หมายถงอะไร?

ตอบ ......................................................................................................................................... ................................................................................................................................................. 4. การสรางKeyframeใชค าสงใด?

ตอบ ......................................................................................................................................... ................................................................................................................................................. 5. ถาตองการลบวตถตองใชเครองมอใด?

ตอบ ......................................................................................................................................... .................................................................................................................................................

13

แบบฝกหดระหวำงเรยนท 2


การสรางการตนกระพรบตาขยบปาก มขนตอนดงตอไปน

1. วาดตวการตนลงในเฟรมท 1 ใชเครองมอ Brush Tool เปลยนชอ Layer ตวการตน โดยดบเบลคลกท Layer พมพชอ

ดบเบลคลกเปลยนชอ Layer

เครองมอ Brush Tool Fill color

Tool

14

เรอง กำรสรำงภำพ Animation แบบ Frame by frame ของรปทรง

ขนตอนกำรสรำงAnimation แบบ Frame by frame(กำรตนกระพรบตำขยบปำก)


2. คลกปมเพม Insert Layer เปลยนชอ Layer ตากระพรบ

3. วาดตาลงในชองเฟรมท 1 Layer ของตากระพรบแบบลมตา ดงรป

4. ลากคลมตาโดยใช ปมค าสง Free Transform Tool เพอท าการคดลอก Copy ตาทวาด

5. คลกเมาสขวา เลอก Copy หรอทเมน Edit + Copy หรอ Ctrl + C

6. คลกเมาสบนพนทวางใน Stage คลกเมาสขวา เลอก Paste หรอ เมน Edit + Paste หรอ Ctrl + V

15

คลกป มเพม Layer

ดบเบลคลกเปลยนชอ Layer

วาดตา โดยใช ป ม Brush Tool

7. ใชปมค าสง Free Transform Tool ปรบต าแหนงตาทคดลอกมาใหกลบดาน เวลาคดลอกตาจะหนไปทางเดยวกน

8. คลกเลอกเมน Modify ----> Transform ----> Flip Horizontal เพอกลบดานวตถในแนวนอนเสรจแลวท าการลากไปใสบนหนาของตวการตน ดงรป

ตาทไดหลงจาก ใชค าสง Flip Horizontal

9. คลกปมเพม Inserts Layer เปลยนชอ Layer ปากขยบ

16

คลกป มเพม Layer ดบเบลคลกเปลยนชอ Layer

10. Layer ปากขยบ ใชปมค าสง Brush Tool วาดปากการตน ลงในเฟรมท 1

11. คลกเมาสซายคางลากคลม เฟรมท 10 เลอกทงสาม Layer

12. กดป ม F6 หรอเมน Inserts---> Timeline --->Keyframe เพอสรางคยเฟรมใหม

13. คลกป ม Onion Skin 14. คลกเฟรมท10 ใน Layer ตากระพรบ ท าการลบตาแบบท 1 ออก โดยกดป ม Delete ท

แปนพมพ หรอ Ctrl + X หรอคลกขวา เลอก Cut Frame เพอวาดตาแบบท 2

17

วาดปาก โดยใช ป ม Brush Tool

15.วาดตาแบบท 2 ลงไปในเฟรมท 10ใน Layer ตากระพรบ

16. คลกเฟรมท 10 ใน Layer ปากขยบ ท าการลบปากแบบท 1 ออก โดยกดป ม Delete ทแปนพมพ หรอ Ctrl + X หรอคลกขวา เลอก Cut Frame เพอวาดปากแบบท 2

17. วาดปากแบบท 2 ลงไปในเฟรมท 10 ใน Layer ปากขยบ

18

18. คลกเมาสซายคางลากคลม เฟรมท 13 ทงสาม Layer

19. กดป ม F6 หรอเมน Inserts ---> Timeline --->Keyframe เพอสรางคยเฟรมใหม

20. ทดสอบการแสดงผลงาน กดป มCtrl + Enter

19

20



ค ำชแจง

นกเรยนสรางภาพเคลอนไหว Animation แบบ Frame by frame (การตนกระพรบตาขยบปาก) ทนกเรยนชนชอบ ลงในเครองคอมพวเตอร ( 10 คะแนน ) สอ/วสดอปกรณ

1. เอกสารประกอบการเรยน เรอง การสรางการตนอนเมชน เลมท 3 หนวยการเรยนรท 3 เรอง Animation แบบ Frame by frame


ขอสอบหลงเรยน

เรอง กำรสรำงกำรตนอนเมชน วชำ คอมพวเตอร

กลมสำระกำรเรยนรกำรงำนอำชพและเทคโนโลย ชนมธยมศกษำปท 3


ค ำชแจง 1. ขอสอบม 4 ตวเลอก คอ ก ข ค และ ง

2. ขอสอบมจ านวน 10 ขอ ขอละ 1 คะแนน

3. นกเรยนเลอกค าตอบทถกทสดเพยงค าตอบเดยว

โดยกาเครองหมาย x ลงในกระดาษค าตอบ

1. “ชองสเหลยมเลกๆทเรยงตอกนตามชวงเวลาเปรยบเสมอนกระดาษ”สอดคลองกบขอใด? ก. Layer ข. Timeline ค. Frame ง. Animation

2. “ เปรยบเสมอนชวงเวลาทใชในการสรางภาพเคลอนไหว” มความสมพนธตรงกบขอใด? ก. Timeline ข. Title Bar ค. Menu Bar ง. Time Selection

3. ภาพในขอใดอยในสวนของ Timeline?

ก. ข.

ค. ง.

4. “การก าหนดต าแหนงการสรางภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในแตกตางกน”มความสมพนธตรงกบขอใด? ก. Timeline ข. Keyframe ค. Onion Skin ง. Selection tool

21

5. จากค าสง Insert---->Timeline---->Keyframe มความสมพนธตรงกบขอใด? ก. การสรางTime line ข. การสรางInsert ค. การสรางKeyframe ง. การสราง Selection 6. การสรางframeสามารถกดป มใดเพอด าเนนการได? ก. F3 ข. F4 ค. F5 ง. F6 7. “การแสดงภาพแตละภาพทเรยงตอกนอยางตอเนองจนดเหมอนวาภาพนน มการเคลอนไหว” มความส าคญตรงกบขอใด? ก. Frame By Frame Animation ข. Guide Layer ค. Shape tween ง. Mark Layer 8. ถาตองการสรางเฟรมวางเปลาไมใหมการก าหนดภาพเคลอนไหวตองใชค าสงขอใด? ก. F2 ข. F5 ค. F6 ง. F7 9. ถาจะทดสอบการน าเสนอผลงาน ตองใชค าสงใด?

ก. Ctrl + Enter ข. Ctrl + Delete

ค. Ctrl + Import ง. Ctrl + A

10. หวอาน Play Head มลกษณะเปนอยางไร?

ก. เสนโคงสชมพ ข. วงรสชมพ

ค. วงกลมสชมพ ง. สเหลยมสชมพ

22

ณฐกานต ภาคพรต. (2553).คมอคร แผนกำรจดกำรเรยนร เทคโนโลยสำรสนเทศ

ชนมธยมศกษำปท 3 กลมสำระกำรเรยนรกำรงำนอำชพและเทคโนโลย

ตำมหลกสตรแกนกลำงกำรศกษำขนพนฐำน พทธศกรำช 2551. กรงเทพฯ:

วฒนาพานช.

ภชงค จนทรเปลง. (2550). กำรใชโปรแกรม macromedia Flash 8.กรงเทพฯ :

มเดยอนเทลลเจนท เทคโนโลย.

. (2554).หนงสอเรยนรำยวชำเพมเตม ชนมธยมศกษำ กลมสำระกำรเรยนร

กำรงำนอำชพและเทคโนโลย ตำมหลกสตรแกนกลำงกำรศกษำขนพนฐำน

พทธศกรำช 2551. กรงเทพฯ : มเดย อนเทลลเจนท เทคโนโลย.

23

เอกสำรอำงอง

ภำคผนวก

เฉลยขอสอบกอนเรยน หนวยกำรเรยนรท 3 เรอง Animation แบบ Frame by frame

ขอท ค ำตอบ ขอท ค ำตอบ 1 ค. Frame 6 ค. F5 2 ค. ชวงเวลาทใชในการสราง

ภาพเคลอนไหว 7 ค. การแสดงภาพแตละภาพทเรยงตอกน

อยางตอเนองจนดเหมอนวาภาพนน มการเคลอนไหว

3 ข.

8 ง. การสรางคยเฟรมวางเปลาไมใหมการสรางภาพเคลอนไหว

4 ก. การก าหนดต าแหนงการสรางภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในแตกตางกน

9 ก. ป มทแสดงการทดสอบผลงาน

5 ง. Insert--->Timeline--->Keyframe 10 ก. จากทางดานซายไปขวา เฉลยขอสอบหลงเรยน


ขอท ค ำตอบ ขอท ค ำตอบ 1 ค. ชวงเวลาทใชในการสราง

ภาพเคลอนไหว 6 ง. Insert--->Timeline--->Keyframe

2 ค. Frame 7 ค. F5 3 ก. การก าหนดต าแหนงการสราง

ภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในแตกตางกน

8 ก. จากทางดานซายไปขวา

4 ข.

9 ง. การสรางคยเฟรมวางเปลาไมใหมการสรางภาพเคลอนไหว

5 ค. การแสดงภาพแตละภาพทเรยงตอ

กนอยางตอเนองจนดเหมอนวาภาพนน

มการเคลอนไหว

10 ก. ป มทแสดงการทดสอบผลงาน

25



1. Timeline คออะไร? ตอบ Timeline คอ Timeline เปรยบเสมอนชวงเวลาทใชในการสรางภาพเคลอนไหว หรอ Movie โปรแกรมจะแบงชวงใหหนวยละ 5 ชวงเวลา

2. เฟรมคออะไร? ตอบ เฟรมคอ ชองสเหลยมเลกๆ ทเรยงตอกนตามชวงเวลา แตละชองเปรยบเสมอน

กระดาษ 1 แผนทวาด Movie 1 อรยาบถ และเปลยนไปทกๆ เฟรม เพอใหเกดการเคลอนไหวของวตถ

3. หนาตาง Timeline ประกอบดวยกสวนอะไรบาง? ตอบ แบงเปนสวนใหญๆ 2 สวน คอ สวนของ Layer และสวนของ Frame

4. คยเฟรมคออะไร? ตอบ คยเฟรมคอ การก าหนดต าแหนงการสรางภาพเคลอนไหว ทมการเปลยนแปลงการเคลอนไหวภายในทแตกตางกนการก าหนดใหมสถานะเปน Keyframe ใชค าสง Insert ---> Timeline --->Keyframe หรอกดป ม F6

5. Frame By Frame Animation หมายถงอะไร? ตอบ การแสดงภาพแตละภาพทเรยงตอกนอยางตอเนองจนดเหมอนวาภาพนนมการเคลอนไหว ซงจะท าการสรางภาพไวใน Frame แตละ Frame

26

เฉลยแบบฝกหดระหวำงเรยนท 1




1. บอกขนตอนวธการลบเฟรมทไมตองการออก? ตอบ ท าการคลกเมาสลากคม frame ทตองการลบ แลวคลกขวาเลอก Remove Frame

2. Onion Skin มคณสมบตอยางไร? ตอบ Onion skin สามารถมองเหนภาพของเฟรมอน ๆ ซงมประโยชนในการสรางภาพเคลอนไหวแบบ Frame by frameมากเพราะจะท าใหทราบวาในเฟรมปจจบนจะตองปรบใหออบเจกตเคลอนไหวไปแคไหนและอยางไร เมอเทยบกบเฟรมกอนหนาและเฟรมถดไป

3. หลกการท างานของหวอาน Play Head หมายถงอะไร? ตอบ เพอทดสอบการเคลอนไหวโดยการกดป ม Enter ทแปนพมพ หวอานเปนรปสเหลยมเลกสชมพ จะเคลอนทจากทางดานซายไปดานขวาผานเฟรมทมออบเจกตตางๆ

4. การสราง Keyframe ใชค าสงใด ? ตอบ Insert ----> Timeline ---->KeyFrame หรอ F6

5. ถาตองการลบวตถตองใชเครองมอใด?

ตอบ เครองมอ Eraser Tool

27

เฉลยแบบฝกหดระหวำงเรยนท 2


Documents

3 Frame by frame · เล่มที่ 6 เรื่อง เทคนิค Motion Guide และ Mask Layer