grs t

u

vw

yz 1

23 4

56

7

8

9

10

ab

c

d

e fg

hlm

nopqk

ji

grs t

u

vw

yz 1

3 4

5

79

b

c

d

e fg

hl

m

no

pkji

Funny English With Frank

Learning Object Animate Design

Monnisa Rungpatchim

grs t

uv

wy

z 1

23 4

56

7

8

9

10

ab

c

d

e fg

hlm

nopqk

ji

grs t

u

vw

yz 1

3 4

5

79

b

c

d

e fg

hl

m

no

pkji

Learning Object Animate Design

Monnisa Rungpatchim

AboutName Monnisa LastName RungpatchimNicename Gof Born 10 June 1988Study Chandrakasem Rajabhat UniversityHumanities and Social Sciences Art Visual Communication Design ID 5221304792Email : Monnisa522@gmail.comBlog : http://monnisa-arti3322.blogspot.com

Chandrakasem Rajabhat University 39/1 Ratchadaphisek Road, Khwaeng Chantharakasem, Chatuchak District, Bangkok 10900. Tel. 0-2942-6900-99Website : http://www.chandra.ac.th/th/index.php

สงวนสิทธ์ิ ผลงานของ มนนิสา รุงปจฉิมCopyrights by Monnisa Rungpatchim

frank

contents

introduction

1

softwere

14-15

pre-production

2-9

conclusion

Bibliography

production

10-11

post-production

12-13

introduction

หนังสือเลมนี้สรางขึ้นเพื่อเปนคูมือประกอบการสรางงาน Animation 2Dใน Project Learning Object Animate Design เปน Animatiom 2D ที่สรางขึ้นเพื่อใหความรูเด็กชั้นประถมศึกษาปที่ 1 เกี่ยวกับภาษาอังกฤษ สามารถนำไปใชเปนสื่อการสอนบนสืออิเล็กทรอนิกสเชน Computer Tap Learning Object Animate Design เปนสวนหนึ่งของวิชา ARTI 3322Animation Design เปนหนวยการเรียน ท่ีอยูในคณะมนุษยศาสตร สาขาศิลปกรรมแขนงออกแบบนิเทศศิลป โดยมีทานอาจารย ผศ.ประชิด ทิณบุตร เปนผูสอนและผูใหคำปรึกษา หนังสือเลมนี้อาจมีประโยชนไมมากก็นอยกับผูที่สนใจงาน Animation 2Dถาหากมีขอผิดพลาดหรือมีเนื้อหาที่ไมเหมาะสม ผูจัดทำตองขออภัยมานะที่นี้ดวยคะ

LEARNING OBJECT ANIMATE DESIGN1

Monnisa Rungpatchim

ab

cde f

g

hlm

nopqk

jipre-production

ในสังคมโลกปจจุบัน การเรียนรูภาษาตางประเทศมีความสำคัญและจำเปนอยางย่ิงในชีวิตประจำวัน เน่ืองจากเปนเคร่ืองมือสำคัญในการติดตอส่ือสาร การศึกษา การแสวงหาความรู และใชภาษาตางประเทศเพ่ือการส่ือสารได รวมท้ังเขาถึงองคความรูตางๆ ไดงายและกวางข้ึนภาษาตางประเทศท่ีเปนสาระการเรียนรูพ้ืนฐาน กำหนดใหเรียนตลอดหลักสูตรแกนกลางการศึกษาข้ันพ้ืนฐาน คือ ภาษาอังกฤษซ่ึงเด็กอายุ 6-7 ป อยูในระดับช้ันประถมปท่ี 1 เปนวัยท่ีสามารถแยกเสียง พยัญชนะ สระ วรรณยุกต คำวรรคตอน เปนตน ฝกใหมีมารยาทในการฟง สามารถตอบคำถามไดถูกตอง ปฏิบัติตามคำส่ังและคำ แนะนำไดถูกตอง มีสมาธิและเขาใจในการฟงคำอธิบายตาง ๆ รวมท้ังฟงเร่ืองราว หรือนิทานและติดตามเน้ือเร่ืองตามลำดับ จึงเปนวัยที่เหมาะกับการเรียนรูทักษะภาษาอังกฤษ ผูจัดทำจึงไดทำสื่อการสอนในดานความรูพื้นฐานที่เด็กตองรู ออกมาในรูปแบบการตูน Animatiom 2D เพื่อดึงดูดความสนใจของเด็กใหรูสึกอยากรูอยากเห็น เพราะการตูนจะมีสีสันที่เด็กชอบ

ConcePt

LEARNING OBJECT ANIMATE DESIGN2

grs t

uv

wyz 1

234

56

7 8 9

10qq

วัตถุประสงคท่ีสรางงาน Animation 2D น้ีข้ึนมาเพ่ือเปนส่ือการเรียนการสอนบนคอมพิวเตอรพกพา (Taplet) ใหกับเด็กชั้นประถมศึกษาปที่ 1 เปาหมายเพ่ือใหเด็กช้ันประถมศึกษาปท่ี 1 ไดศึกษาการสะกดและทองจำตัวเลขเปนภาษาอังกฤตั้งแต 1-10 ได

ขั้นตอนการทำงาน เนื่องดวย Animation นี้เปนสื่อการเรียนการสอนใหกับเด็ก จึงไดสรางเนื้อเรื่องในลักษณะครูสอนนักเรียน ครูใน Animation นี้ จะมี Charactor เปนลิง สวนในเรื่องของฉาก จะเปนฉากที่อยูในโรงเรียน บริเวณหองเรียนและมีเพลงประกอบการสอน เพื่อความสนุกสนานและไมนาเบื่อ 1.สรางเนื่อเรื่องและเขียนบท 2.Sketch Character และสรางดวย Sofe Were (Adobe Illustrator) 3.Sketch ฉาก และสรางดวย Sofe Were (Adobe Illustrator) 4.สราง StoryBoard 5.บันทึกเสียงพาษย หา Sound, Sound Effact 6.นำ Character และฉากไปทำ Animation 2D ดวย Sofe Were (Adobe Flash) โดยแบงเปน Scene 7.ตัดตอ Sound และ Vocal ดวย Sofe Were (WavePad Sound Editor) 8.นำ Animation Sound และ Vocal ที่ได ไปตัตอ ดวย Sofe Were (Camtasia Studio 7)

PLAN

FUNNY ENGLISH WITH FRANK 3

StorY

ScriPt

ณ โรงเรียนแหงหนึ่งที่อยูทามกลางธรรมชาติ ซึ้งภายในโรงเรียนนั้นมีลิงอยูตัวหนึ่ง เปนลิงสอนวิชาภาษาอังกฤษและลองตัวนั้นก็มีชื่อวา Mr.Frank เปนครูสอนภาษาอังกฤษใหกับเด็กช้ันประถมศึกษาปท่ี 1 วันนี้ก็เปนอีกวันหนึ่งที่ Mr.Frank ตองเดินไปสอนเด็กๆที่หองประถมศึกษาปท่ี 1 เม่ือเดินไปถึงหอง Mr.Frank ก็ไดกลาวทักทายกับเด็กๆและเริ่มเรียนการสะกดตัวเลขเปนภาษาอังกฤษ หลังจากนั้น Mr.Frank กลัวเด็กๆจะเบ่ือในการเรียนจึงชวยกันรองเพลง ดวยจังหวะสนุกสนาน เมื่อจบเพลง Mr.Frank ก็บอกลาเด็กๆPort

SCENE 1 : ขนาดภาพ Long Shot Mr.Frank เดินมาตามทางเดินของโรงเรียน เพื่อไปที่หองเรียนชั้นประถมศึกษาปที่ 1 มีเสียงเดินและเสียงเพลงทำนองการตูนสนุกๆดังไปพรอมๆกันการเดินของMr.Frank เขาเดินไปเรื่อยๆจนถึงหนาหองชั้นประถมศึกษาปที่ 1

TITLE : ขนาดภาพ Medium Shot ลิงใสเสื้อสีฟา กางเกงสีดำ เดินลากตัวอักษรภาษาอังกฤษที่เปนคำวา “MONNISA” เมื่อลากตัวอักษรไปหยุดที่กลางภาพแลว ลิงก็วิ่งกลับไปที่ชองวางในคำ ซึ่งเปนที่ของตัวไอแลวหันตัวอักษรไอใหเขาที่ แลวภาพก็คอยๆหายไป กลายเปนกระดานสีเขียว ที่มีตัวชอลกคอยๆเขียนเปนคำวา “Funny English With Frank”

Mr.Frank จะสอนสะกดตัวเลขเปนภาษาอังกฤษอยางไร และชวนเด็กๆรองเพลงอะไร

LEARNING OBJECT ANIMATE DESIGN4

5SCENE 2 : ขนาดภาพ Long Shot Mr.Frank เดินเขาหองเรียนจากทางดานขวาของภาพ เพื่อเอาหนังสือ How to Spell English ไปวาที่ โต็ะของเขา มีเสียงเดินและเสียงเพลงทำนองการตูนสนุกๆดังไปพรอมๆกันการเดินของ Mr.Frank

SCENE 3 : ขนาดภาพ Long Shot Mr.Frank ยืนอยูหนากระดานกลางหองเรียน พูดทักทาย แลวเร่ิมสอนการสะกดตัวเลข โดย Mr.Frank ถือกระดาษสีขาวและมีตัวอักษรปรากฎขึ้นตามเสียงที่ Mr.Frank สะกด ไลไปจนครบจำนวน1-10เมื่อครบ Mr.Frank ก็ชวนรองเพลงสนุกๆ

SCENE 4 : ขนาดภาพ Medium Shot Mr.Frank รองเพลง นับตัวเลข 1-10 และยกนิ้วขึ้นมานัยตามจังหวะเพลง

The End : ขนาดภาพ Medium Shot เปนภาพกระดานสีเขียว มีรองรอยของการใชงาน แลวคอยๆข้ึน Cradit ใหกับผูที่เกี่ยวของ ใชเพลงการตูแนวสนุกสนานประกอบ

FUNNY ENGLISH WITH FRANK 5

Character

เลือก Character เปนลิงแสมเพราะ ลิงเแสมเปนลิงที่มีลักษณะคลายมนุษยมีความเฉลียวฉลาด มีขนตามลำตัวสีน้ำตาล หางยาวกวาความยาวของลำตัว ขนตรงกลางหัวมีลักษณะตั้งแหลมชี้ขึ้นมีขนตามลำตัวสีน้ำตาล หางยาวกวาความยาวของลำตัว (ในท่ีน้ีสราง Character เปนลิงที่ไมมีหาง) ขนตรงกลางหัวมีลักษณะตั้งแหลมชี้ขึ้น

ลักษณะและบุคลิก Mr.FrankMr.Frank เปนลิงท่ีมีหนาตาเปนมิตรกับเด็กๆ ใสแวน มีหนวด เพราะเปนลิงท่ีมีประสบการณในการทำงาน ใสเส้ือแขนยาวสีขาว ผูกไทดสีดำ และใสกางเกงขายาวสีดำเพื่อความนาเชื่อถือเปนลิงไทยที่ชอบภาษาอังกฤษ และมีนิสัยที่ชอบเลนกันเด็ก จึงไดมาเปนคุณครูสอนภาษาอังกฤษใหกับเด็กชั้นประถม

LEARNING OBJECT ANIMATE DESIGN6

FUNNY ENGLISH WITH FRANK 7

StorYBoard

LEARNING OBJECT ANIMATE DESIGN8

FUNNY ENGLISH WITH FRANK 9

Scene

Sofe Were (Adobe Illustrator)

ab

cde f

g

hlm

nopqk

jiproduction

Animatiom 2Dในการสราง Animation 2D ใน Project นี้ ขาพเจาไดใช Soft Wereที่มีช่ือวา Adobe Flash เปนโปรแกรมท่ีไดรับความนิยมมากในหมูนักสรางงานมัลติมีเดีย เพราะสามารถสรางภาพเคล่ือนไหวท่ีสมบูรณแบบท้ังภาพและเสียง ไฟลงานที่ไดมีขนาดเล็ก เหมาะสำหรับนำไปเผยแพรผลงานผานเว็บบราวเซอรตางๆ ขั้นตอนการสรางงาน Animation 2D จากโปรแกรม Flash1.กำหนดเลเยอร Background เปนเฟรมภาพนิ่ง2.กำหนดเลเยอรของ Character ใหไปอยู LIBRARY ที่ละสวน3.กำหนดคียเฟรมหลักที่ใชในการเคลื่อนที่ของ Character5.ทดสอบผลที่ได6.Export ไฟลเปน MOV

10 LEARNING OBJECT ANIMATE DESIGN

grs t

uv

wyz 1

234

56

7 8 9

10pq

Sound & Vocal1. คลื่นเสียงใน Soft Were WavePad เปนคลื่นเสียงประเภท Vocal หรือเสียงพากย

2. คลื่นเสียงใน Soft Were WavePad เปนคลื่นเสียงประเภท Sound Effect

3. คลื่นเสียงใน Soft Were WavePad เปนคลื่นเสียงประเภท Sound

11FUNNY ENGLISH WITH FRANK

ab

cde f

g

hlm

nopqk

jipost-production

นำไฟลวิดีโอ ซาวดและเสียงพาษกท่ีได ไปทำการตัดตอ โดยใช Soft Were ท่ีมีช่ือวา Camtasia Studio 7 Camtasia Studio 7 เปนโปรแกรมสรางส่ือมัลติมีเดียท่ีใชตัดตอไดท้ังภาพ เสียง สามารถใส Effect ได และยังสามารถบันทึกการทำงานบนหนาจอคอมพิวเตอรของเราไดดวย ขั้นตอนการตัดตอ1.เปดโปรแกรมนำไฟลที่เตรียมไปใสไวใน Clip Bin2.นำไฟลจาก Clip Bin ลากไปใสใน Timeline3.ตัดตอตามตองการ4.ทดสอบผลที่ได5.Produce and Share

Clip Bin

Timeline

12 LEARNING OBJECT ANIMATE DESIGN

grs t

uv

wyz 1

234

56

7 8 9

10q

สามารถ Export และ Shareไดหลายแบบ

13FUNNY ENGLISH WITH FRANK

rab

cde f

g

hlm

nopqk

jiSoftwere

โปรแกรม Illustrator เปนโปรแกรมสำหรับสรางภาพลายเสนที่มีความคมชัดสูง งานภาพประกอบและงานกราฟกแบบ 2 มิติตางๆ

โปรแกรม Photoshop เปนโปรแกรมสรางหรือตกแตงภาพใชงานงาย มีเอฟเฟคตาง ๆ ใหเลือกใชงานมากมาย

โปรแกรม Flash เปนโปรแกรมที่ใชในการสรางอนิเมชั่นตางๆ หรือใชเปดไฟลวิดีโอ เปดเพลง ผานเว็บไซต

โปรแกรม WavePad เปนโปรแกรมที่ใชในการตัดแตงเพลงไฟลนามสกุล MP3ระบบจะแปลงเพลงนั้นออกมาเปนแบบคลื่น wave เพื่อใหเราเลือกชวงของเพลงแลวตัดเอาเฉพาะสวนใดสวนหนึ่งของเพลงออกมาเพื่อนำไปใช

โปรแกรม Camtasia Studio 7 เปนโปรแกรมสรางสื่อมัลติมีเดียที่ใชตัดตอไดทั้งภาพเสียง สามารถใส Effact ได และยังสามารถบันทึกการทำงานบนหนาจอคอมพิวเตอรของเราไดดวย

LEARNING OBJECT ANIMATE DESIGN14

grs t

uv

wyz 1

234

56

7 8 9

10q

FUNNY ENGLISH WITH FRANK 15

conclusion conclusion

Cartoon Animation 2D ท่ีเราเห็นในปจจุบันน้ี ไมวาจะทาง Internat โทรทัศนหรือส่ือตางๆ ก็ลวนแลวมาจากความคิกสรางสรรค ความรูและทักษะของผูสรางจากการท่ีขาพเจาไดทำ Project น้ี ทำใหรูวา การสรางงาน Animaioom 2D น้ันไมใชเรื่องงาย ตองมีกระบวนการคิดอยางเปนขั้นตอนเปนลำดับ ตองละเอียดและพิถีพิถันในทุกๆข้ันตอน เพ่ืองานท่ีดี และเม่ือพบปญหาหรือตองการการแกไขตรงไหน ถาทำงานอยางเปนระบบ ก็จะทำใหการแกไขนั้นเปนเรื่องงายๆ

16 LEARNING OBJECT ANIMATE DESIGN

Bibliography

พันจันทร ธนวัฒนเสถียน. (2554). Flash cs5.5. (พิมพครั้งที่1). กรุงเทพฯ :สำนักพิมพ ซิมพลิฟายHarry Hamernik , H.H. (2010). Cartoon 360 . (1St ed.) Cincinnati F+M MediaComputer Graphic. (2551). โปรแกรม Illustrator คืออะไร. 31มีนาคม2555จาก Computer Graphic เว็บไซด : http://jomthongprint.blogspot.com/2008/07/illustrator.htmlComputer Graphic. (2551). โปรแกรม Photoshop คืออะไร. 31มีนาคม2555จาก Computer Graphic เว็บไซด : http://jomthongprint.blogspot.com/2008/07/photoshop.htmlComputer Graphic. (2551). โปรแกรม Flash คืออะไร. 31มีนาคม2555 จาก Computer Graphic เว็บไซด : http://jomthongprint.blogspot.com/2008/07/flash.htmlYoutube. (2009) เพลงนับเลข. 9พฤษภาคม2555, จาก Moey White เว็บไซด :http://www.youtube.com/watch?v=audeRLR7juM&feature=g-likeYoutube. (2011) CHOICE วาดวยการตูนFlash. 9พฤษภาคม2555, จาก CHOICE Studio เว็บไซด : http://www.youtube.com/watch?v=5nbnYQ5WHO4&list=PL9269F648480D6597&feature=plcpSoundCloud. (2012) croco_goes_porto. 3พฤษภาคม2555, จาก deadlydrunker เว็บไซด : http://soundcloud.com/search?q%5Bfulltext%5D=croco_goes_porto

17FUNNY ENGLISH WITH FRANK

grs t

uv

wy

z 1

23 4

56

7

8

9

10

ab

c

d

e fg

hlm

nopqk

ji

grs t

u

vw

yz 1

3 4

5

79

b

c

d

e fg

hl

m

no

pkji

สงวนสิทธ์ิ ผลงานของ มนนิสา รุงปจฉิม Copyrights by Monnisa Rungpatchim : Chandrakasem Rajabhat University