R3:Result


โครงการออกแบบสื่อแอนิเมชั่นเพื่อการเรียนรู้บนคอมพิวเตอร์สำหรับพกพา
“Learning Object Animate Design For Tablet Computer”
สำหรับเด็กประถมตอนต้น “ชุด ความไม่ประมาท” ในตอนความปลอดภัยในการข้ามถนน
แรงบันดาลใจ ( Inspiration )
เกิดจากการที่เห็นว่าเมื่อมีสะพานลอยอยู่ใกล้ๆ กับทางม้าลายนั้นคนส่วนมากคิดที่จะข้าม
ทางม้าลายแทนการข้ามสะพานลอย เพราะสะดวกกว่าและเร็วกว่า จนลืมไปว่าสะพานลอยที่สร้าง
มานั้น ไม่ใช้มีไว้เพื่อกันแสงแดดเวลาข้ามถนนแต่ก็สร้างมาเพื่อที่จะลดอันตรายที่จะเกิดขึ้นกับ
คนทุกๆ คนจึงอยากจะปลูกฝังและสอนกับเด็กๆ ให้เริ่มคิดเสียใหม่เพื่อที่จะได้ลดอุบัติเหตุให้น้อย
ลงและเกิดความปลอดภัยมากขึ้น จึงทำมาเป็นการ์ตูน Animation เพื่อที่จะทำให้เด็กเข้าใจง่าย และทำให้ตัวของเด็กเองมีความสนใจมาขึ้น
โครงเรื่อง ( Theme )
“ ข้ามทางม้าลายหรือจะข้ามสะพานลอย อย่างไหนปลอดภัยกว่ากัน “
เนื้อเรื่อง ( Story )
        เป็นเรื่องราวของเด็กชาย 2 คน (ในที่นี้จะให้ชื่อว่า “น้องหมาก” กับ “น้องบอย” ) ที่เดินมา
เจอกันพอดีแล้วก็ได้พูดถึงร้านของเล่นซึ่งเปิดใหม่ที่ฝั่งอยู่ตรงข้ามถนน จึงได้ชวนกันไปเดินเล่นกัน
ที่ร้านขายของที่เปิดใหม่อีกฝั่ง เด็กทั้ง 2 จึงได้คุยกันว่าเราจะ ข้ามถนนไปยังไงดี “น้องบอย” บอกว่าต้องการที่จะข้ามถนนไปยังร้าน โดยการข้ามทางม้าลายซึ่งมีทางม้าลายที่อยู่ทางหน้าร้าน
พอดีแต่ ”น้องหมาก” ก็บอกกับ “น้องบอย” ว่ากับบริเวณใกล้ๆกับทางม้าลายนั้นก็มีสะพานลอยอยู่
ใกล้ๆ กันเด็กทั้ง 2 ซึ่งน่าจะปลอดภัยกว่า เพราะบริเวณนี้ไม่ค่อยมีผู้ใหญ่เดินผ่านเท่าไหร่นัก แถมรถแถวนี้ยังเยอะและขับเร็วอีก เด็กทั้ง 2 จึงเริ่มถกเถียงกันว่าจะข้ามทางม้าลายหรือจะข้าม
สะพานลอยจึงจะปลอดภัยกว่าจนในที่สุดก็ได้ข้อตกลงกันว่าตัว”น้องบอย”จะข้ามทางม้ายลายซึ่งเร็วกว่าแต่”น้องหมาก”ขอที่จะเดินไปข้ามสะพานลอยดีกว่า ขณะที่”น้องบอย”ได้ข้ามถนนไปแล้วนี่เอง ก็ได้มีรถวึ่งมาเร็วมากเกิดเฉี่ยวเข้าพอดี แต่ตอนนั้นน้องหมากได้เดินขึ้นสะพานลอยมาถึงร้านอย่าง
ปลอดภัยแล้ว
การออกแบบตัวละคร ( Characters Design )
แบบ Sketch ตัวละคร คร่าวๆ

ก็จะได้ตัวละครที่จะใช้ในเรื่อง
Characters Design 3
อุปกรณ์ประกอบฉาก ( Prop )
        หลังจากที่เราเขียน Story Board และสร้าง Characters แล้ว ต้องมาสร้างอุปกรณ์ต่างๆ หรือ Prop ต่างๆ เพื่อที่จะทำให้ ฉาก หรือ Scene นั้นๆ มีความสมจริงมากขึ้น โดยการสร้างนั้น ทำโดยการเขียนขึ้นมาทีละอย่าง โดยใช้โปรแกรมที่เขียนเป็น Vector เพราะจะได้ไฟล์ที่มีความคม
ชัดมากขึ้น โดยอาจจะวาดชิ้นงานให้มีขาดใหญ่กว่า ตัวงานจริง เพื่อที่เวลาเรา Export ไฟล์ไป เผื่อเวลาที่เราขยายไฟล์จะได้ไม่แตกเป็น Pixel โดยที่เวลา Export ไฟล์ ให้เป็น .PNG 24 ไฟล์จะได้มีความคมชัดมากขึ้น
หลังจากทำอุปกรณ์ประกอบฉากเสร็จทั้งหมดแล้ว ก็ลองเอาทั้งมาใส่ใน Story Board ที่นี้ก็จะเห็นจาก Story Board สีขาว-ดำจากจินตนาการและความคิด มาทำให้เป็น Story Board ที่เป็นเรื่องราวจริงๆ ที่จะผลิตในขั้นตอนต่อไป
.

ขั้นตอนการผลิตการ์ตูน Animation ( Production )

        หลังจากที่เตรียมความพร้อมในการทำการ์ตูน Animation แล้ว ก็มาเข้าสู่ขั้นตอนการทำ Animation โดยใช้ขนาดโดย Stage หรือตัวงานอยู่ที่ 720x540 Pixels โดยกำหนด Frame อยู่ที่ 25fps.เพื่อความไหลลื่นของเฟรม และสะดวกในการคำนวนด้วยว่าเราต้องการให้ตัวละครขยับ
ในเวลาเท่าไหร่
โดยการทำงานจะแยกการทำงานต่างเป็นทีละ Scene หรือถ้าบางซีนมีรายละเอียดเยอะมาก
ก็จะย่อย Scene ลงไปอีก แล้วค่อยๆ นำแต่ละซีนที่เราทำมาประกอบกันอีกทีในซีนหลักโดยการ
เลือกที่คำสั่ง Insert-Scene หลังจากที่เอา Scene ต่างๆมารวมกันแล้วถ้าเราจะแก้ไขซีนต่างๆก็กด Shift+F2 แล้วเลือกซีนั้น เพื่อที่จะทำการแก้ไข
ตัวอย่างการทำงานใน Scene ต่างๆ
Scene#1 มุมกล้องแบบ ELS
        
เป็นฉากเริ่มต้นเรื่องใช้ภาพที่มีมุมกว้าง แสดงให้เห็นถึงเมืองที่มีการจราจรคับคั่ง แล้วค่อยซูมเข้าเข้าใบบริเวณที่จะเข้าสู่ Sence ที่ 2
Scene#3 มุมกล้องแบบ MS
เป็นฉากที่ตัดให้เห็นร้านขายของที่เปิดใหม่โดยที่รอบๆ บริเวณร้านถูกทำในเบลอเพื่อที่
จะได้เห็นว่าร้านนี้เป็นจุดเด่นกว่าร้านอื่น
Scene#7 มุมกล้องแบบ MS
ตัดกลับมาเป็นฉากที่กำลังสนทนากันด้วยสีหน้าที่กำลังโมโห เพราะกำลังเถียงกันอยู่
Scene#9 มุมกล้องแบบ MS
ตัดภาพมาที่น้องบอยกำลังเดินข้ามถนนแล้วก็มีรถวิ่งมาแล้วเบรคดังมากแล้วก็ตัดภาพไปเลย
ส่วนการใส่ Sound Effect ต่างๆ Download ได้จาก http://www.flashkit.com/ ซึ่งมี Sound Effect หลายแบบ ทั้ง Sound FX และ Sound Loop

ส่วนตัวโปรแกรมที่ใช้ในการตัด-ต่อเสียงนั้น เป็นโปรแกรมที่มีชื่อว่า Cool edit Pro เป็นโปรแกรมที่ใช้สำหรับการบันทึกเสียง การแก้ไข ตัด - ต่อเสียง ในระดับมืออาชีพ สามารถทำการปรับแต่งเสียง ใส่เอฟเฟคต่างๆ เช่น การทำเสียงก้อง (Reverb) การทำเสียงสะท้อน (Echo) ซึ่งมีเครื่องมือต่างๆให้เลือกใช้งานมากมาย สามารถบันทึกเป็นไฟล์ได้หลายรูปแบบ เช่น WAV , WMA , MP3 , RM , AVI , OGG และอื่นๆ
**ที่มาและคู่มือสอนการใช้งาน http://lms.ubru.ac.th/file.php/1/Manual_Cooledit.pdf
วิธีการใส่เสียงคือสร้าง Layer มา 1 Layer ทำการกด Insert Keyfremes (F6) แล้วคำสั่ง File-Import-Import to Library แล้วเลือก Property เลือกตรง Sound-Nameแล้วเปลี่ยน จาก None เป็นเสียงที่เราจาะใส่
Animation for TouTube

eDocument : Fine and Apoplied Arts Division, Department of Humanities Sciences, Faculty of Humanities and Social Sciences, Chandrakasem Rajabhat University, Ratchadabhisek Road, jatuchak District, Bangkok,Thailand 10900.Contact Current E-mail:manoch.pd@gmail.com

R2:Resume



โครงการออกแบบสื่อแอนิเมชั่นเพื่อการเรียนรู้บนคอมพิวเตอร์สำหรับพกพา
“Learning Object Animate Design For Tablet Computer”
สำหรับเด็กประถมตอนต้น “ชุด ความไม่ประมาท” ในตอนความปลอดภัยในการข้ามถนน

ขั้นตอนการผลิตการ์ตูน Animation ( Per-Production )

แรงบันดาลใจ ( Inspiration )
เกิดจากการที่เห็นว่าเมื่อมีสะพานลอยอยู่ใกล้ๆ กับทางม้าลายนั้นคนส่วนมากคิดที่จะข้าม
ทางม้าลายแทนการข้ามสะพานลอย เพราะสะดวกกว่าและเร็วกว่า จนลืมไปว่าสะพานลอยที่สร้าง
มานั้น ไม่ใช้มีไว้เพื่อกันแสงแดดเวลาข้ามถนนแต่ก็สร้างมาเพื่อที่จะลดอันตรายที่จะเกิดขึ้นกับ
คนทุกๆ คนจึงอยากจะปลูกฝังและสอนกับเด็กๆ ให้เริ่มคิดเสียใหม่เพื่อที่จะได้ลดอุบัติเหตุให้น้อย
ลงและเกิดความปลอดภัยมากขึ้น จึงทำมาเป็นการ์ตูน Animation เพื่อที่จะทำให้เด็กเข้าใจง่าย และทำให้ตัวของเด็กเองมีความสนใจมาขึ้น
โครงเรื่อง ( Theme )
“ ข้ามทางม้าลายหรือจะข้ามสะพานลอย อย่างไหนปลอดภัยกว่ากัน “
เนื้อเรื่อง ( Story )
        เป็นเรื่องราวของเด็กชาย 2 คน (ในที่นี้จะให้ชื่อว่า “น้องหมาก” กับ “น้องบอย” ) ที่เดินมา
เจอกันพอดีแล้วก็ได้พูดถึงร้านของเล่นซึ่งเปิดใหม่ที่ฝั่งอยู่ตรงข้ามถนน จึงได้ชวนกันไปเดินเล่นกัน
ที่ร้านขายของที่เปิดใหม่อีกฝั่ง เด็กทั้ง 2 จึงได้คุยกันว่าเราจะ ข้ามถนนไปยังไงดี “น้องบอย” บอกว่าต้องการที่จะข้ามถนนไปยังร้าน โดยการข้ามทางม้าลายซึ่งมีทางม้าลายที่อยู่ทางหน้าร้าน
พอดีแต่ ”น้องหมาก” ก็บอกกับ “น้องบอย” ว่ากับบริเวณใกล้ๆกับทางม้าลายนั้นก็มีสะพานลอยอยู่
ใกล้ๆ กันเด็กทั้ง 2 ซึ่งน่าจะปลอดภัยกว่า เพราะบริเวณนี้ไม่ค่อยมีผู้ใหญ่เดินผ่านเท่าไหร่นัก แถมรถแถวนี้ยังเยอะและขับเร็วอีก เด็กทั้ง 2 จึงเริ่มถกเถียงกันว่าจะข้ามทางม้าลายหรือจะข้าม
สะพานลอยจึงจะปลอดภัยกว่าจนในที่สุดก็ได้ข้อตกลงกันว่าตัว”น้องบอย”จะข้ามทางม้ายลายซึ่งเร็วกว่าแต่”น้องหมาก”ขอที่จะเดินไปข้ามสะพานลอยดีกว่า ขณะที่”น้องบอย”ได้ข้ามถนนไปแล้วนี่เอง ก็ได้มีรถวึ่งมาเร็วมากเกิดเฉี่ยวเข้าพอดี แต่ตอนนั้นน้องหมากได้เดินขึ้นสะพานลอยมาถึงร้านอย่าง
ปลอดภัยแล้ว
บท ( Script )
Scene#1 มุมกล้องแบบ ELS
        เป็นฉากเริ่มต้นเรื่องใช้ภาพที่มีมุมกว้าง แสดงให้เห็นถึงเมืองที่มีการจราจรคับคั่ง แล้วค่อยซูมเข้าเข้าใบบริเวณที่จะเข้าสู่ Sence ที่ 2
Scene#2 มุมกล้องแบบ ELS + MS
        เป็นฉากที่เด็กทั้ง 2 เดินมาเจอกัน โดยใช้มุมกล้องแบบ ELS แล้วค่อยตัดมาเป็นแบบ MS ในฉากที่กำลังสนนทนากันอยู่
Scene#3 มุมกล้องแบบ MS
เป็นฉากที่ตัดให้เห็นร้านขายของที่เปิดใหม่ โดยที่รอบๆ บริเวณร้านถูกทำในเบลอเพื่อที่จะ
ได้เห็นว่าร้านนี้เป็นจุดเด่นกว่าร้านอื่น
Scene#4 มุมกล้องแบบ LS
        ตัดมาเป็นฉากที่ น้องบอยกำลังรอที่จะข้ามถนน ซึ่งบริเวณนั้นมีรถวิ่งอยู่มาก
Scene#5 มุมกล้องแบบ LS
        น้องหมากเรียกน้องบอย เพราะเห็นว่าใกล้ๆ กันนั้นมีสะพานลอยอยู่
Scene#6 มุมกล้องแบบ LS
        แสดงให้เห็นว่ามีรถวิ่งอยู่เยอะมาก และวิ่งเร็วด้วย
Scene#7 มุมกล้องแบบ MS
ตัดกลับมาเป็นฉากที่กำลังสนทนากันด้วยสีหน้าที่กำลังโมโห เพราะกำลังเถียงกันอยู่
Scene#8 มุมกล้องแบบ LS
        เป็นฉากที่ตกลงกันได้แล้วว่าน้องบอยจะข้ามทางม้าลาย ส่วนตัวน้องหมากก็เดินจากไป เพื่อที่จะไปที่สะพานลอย
Scene#9 มุมกล้องแบบ MS
        ตัดภาพมาที่น้องบอยกำลังเดินข้ามถนน แล้วก็มีรถวิ่งมาแล้วเบรคดังมากแล้วก็ตัดภาพ
ไปเลย
Scene#10 มุมกล้องแบบ LS
        เริ่มจากเสียงไซเรน แล้วค่อยๆ Fade ภาพเข้ามาเป็นรถพยาบาลวิ่งเข้ามาจอด ส่วนด้านหลังรถพยาบาลมีน้องหมากยืนอยู่หน้าร้านขายของ แล้วซูม IN ภาพทั้งหมดเพื่อตัดเข้าสู่ END CREDIT
**อธิบายมุมกล้อง
ELS คือ ( Extreme Long Short ) เป็นมุมภาพที่ให้เห็นบรรยากาศรอบข้างอย่างชัดเจน
LS คือ ( Long Short ) เป็นมุมภาพที่บอกว่าตัวละครอยู่สถานที่ใด
MS คือ ( Medium Short ) เป็นภาพครึ่งตัวของตัวละคร
STORY BOARD

การออกแบบตัวละคร ( Characters Design )
แบบ Sketch ตัวละคร คร่าวๆ

หลังจากที่ได้แบบที่เราต้องการแล้ว ก็นำมาพัฒนาต่อ
Characters Design 1




หลังจากที่ได้แบบ1และแบบที่ 3 แล้ว ก็นำมาพัฒนาต่อ Characters Design 2






ก็จะได้ตัวละครที่จะใช้ในเรื่อง
Characters Design 3


หลังจากที่ได้ตัวละครแล้วเราก็นำตัวละครที่ได้แยกเป็นส่วนๆ แล้ว Export ไฟล์แต่ละ
ส่วนเป็น .swf เพื่อที่จะนำไฟล์มาทำในโปรแกรม Flash เพื่อที่จะเวลาเราจะขยับส่วนต่างๆ สามารถทำได้อย่างสะดวกขึ้น



**ตัวละครเขียนขึ้นจากโปรแกรม Illustartors หลังจากทำเสร็จแล้วก่อน Export ให้ทำการยกเลิก Storke ต่างๆ เพื่อที่เวลาเราย่อ-ขยายชิ้นส่วนต่างๆ แล้ว ตัวเส้นจะได้มีขนาดเท่ากันกับที่เราเขียนไว้
ตั้งแต่ต้นโดยการไปที่ Opject-Path-Outline Storke
อุปกรณ์ประกอบฉาก ( Prop )
        หลังจากที่เราเขียน Story Board และสร้าง Characters แล้ว ต้องมาสร้างอุปกรณ์ต่างๆ หรือ Prop ต่างๆ เพื่อที่จะทำให้ ฉาก หรือ Scene นั้นๆ มีความสมจริงมากขึ้น โดยการสร้างนั้น ทำโดยการเขียนขึ้นมาทีละอย่าง โดยใช้โปรแกรมที่เขียนเป็น Vector เพราะจะได้ไฟล์ที่มีความคม
ชัดมากขึ้น โดยอาจจะวาดชิ้นงานให้มีขาดใหญ่กว่า ตัวงานจริง เพื่อที่เวลาเรา Export ไฟล์ไป เผื่อเวลาที่เราขยายไฟล์จะได้ไม่แตกเป็น Pixel โดยที่เวลา Export ไฟล์ ให้เป็น .PNG 24 ไฟล์จะได้มีความคมชัดมากขึ้น

หลังจากทำอุปกรณ์ประกอบฉากเสร็จทั้งหมดแล้ว ก็ลองเอาทั้งมาใส่ใน Story Board ที่นี้ก็จะเห็นจาก Story Board สีขาว-ดำจากจินตนาการและความคิด มาทำให้เป็น Story Board ที่เป็นเรื่องราวจริงๆ ที่จะผลิตในขั้นตอนต่อไป

จบขั้นตอนการ PRE-PRODUCTION
_____________________________________________
โครงการออกแบบสื่อแอนิเมชั่นเพื่อการเรียนรู้บนคอมพิวเตอร์สำหรับพกพา
“Learning Object Animate Design For Tablet Computer”
สำหรับเด็กประถมตอนต้น “ชุด ความไม่ประมาท” ในตอนความปลอดภัยในการข้ามถนน

ขั้นตอนการผลิตการ์ตูน Animation ( Production )

        หลังจากที่เตรียมความพร้อมในการทำการ์ตูน Animation แล้ว ก็มาเข้าสู่ขั้นตอนการทำ Animation โดยใช้ขนาดโดย Stage หรือตัวงานอยู่ที่ 720x540 Pixels โดยกำหนด Frame อยู่ที่ 25fps.เพื่อความไหลลื่นของเฟรม และสะดวกในการคำนวนด้วยว่าเราต้องการให้ตัวละครขยับ
ในเวลาเท่าไหร่

โดยการทำงานจะแยกการทำงานต่างเป็นทีละ Scene หรือถ้าบางซีนมีรายละเอียดเยอะมาก
ก็จะย่อย Scene ลงไปอีก แล้วค่อยๆ นำแต่ละซีนที่เราทำมาประกอบกันอีกทีในซีนหลักโดยการ
เลือกที่คำสั่ง Insert-Scene หลังจากที่เอา Scene ต่างๆมารวมกันแล้วถ้าเราจะแก้ไขซีนต่างๆก็กด Shift+F2 แล้วเลือกซีนั้น เพื่อที่จะทำการแก้ไข

การทำงานใน Scene#Title
         
Scene#1 มุมกล้องแบบ ELS
        เป็นฉากเริ่มต้นเรื่องใช้ภาพที่มีมุมกว้าง แสดงให้เห็นถึงเมืองที่มีการจราจรคับคั่ง แล้วค่อยซูมเข้าเข้าใบบริเวณที่จะเข้าสู่ Sence ที่ 2

Scene#2 มุมกล้องแบบ ELS + MS
        เป็นฉากที่เด็กทั้ง 2 เดินมาเจอกัน โดยใช้มุมกล้องแบบ ELS
แล้วค่อยตัดมาเป็นแบบ MS ในฉากที่กำลังสนนทนากันอยู่

Scene#3 มุมกล้องแบบ MS
เป็นฉากที่ตัดให้เห็นร้านขายของที่เปิดใหม่ โดยที่รอบๆ บริเวณร้านถูกทำในเบลอเพื่อที่จะ
ได้เห็นว่าร้านนี้เป็นจุดเด่นกว่าร้านอื่น

Scene#4 มุมกล้องแบบ LS
        ตัดมาเป็นฉากที่ น้องบอยกำลังรอที่จะข้ามถนน
ซึ่งบริเวณนั้นมีรถวิ่งอยู่มาก

Scene#5 มุมกล้องแบบ LS
        น้องหมากเรียกน้องบอย เพราะเห็นว่าใกล้ๆ กันนั้นมีสะพานลอยอยู่
Scene#6 มุมกล้องแบบ LS
        แสดงให้เห็นว่ามีรถวิ่งอยู่เยอะมาก และวิ่งเร็วด้วย

Scene#7 มุมกล้องแบบ MS
ตัดกลับมาเป็นฉากที่กำลังสนทนากันด้วยสีหน้าที่กำลังโมโห เพราะกำลังเถียงกันอยู่

Scene#8 มุมกล้องแบบ LS
        เป็นฉากที่ตกลงกันได้แล้วว่าน้องบอยจะข้ามทางม้าลาย
ส่วนตัวน้องหมากก็เดินจากไป เพื่อที่จะไปที่สะพานลอย

Scene#9 มุมกล้องแบบ MS
        ตัดภาพมาที่น้องบอยกำลังเดินข้ามถนนแล้วก็มีรถวิ่งมาแล้วเบรคดังมากแล้วก็ตัดภาพไปเลย

Scene#10 มุมกล้องแบบ LS
เริ่มจากเสียงไซเรนแล้วค่อยๆ Fade ภาพเข้ามาเป็นรถพยาบาลวิ่งเข้ามาจอดส่วนด้านหลัง
รถพยาบาลมีน้องหมากยืนอยู่หน้าร้านขายของแล้วซูม IN ภาพทั้งหมดเพื่อตัดเข้าสู่ END CREDIT
Scene#END CREDIT
ส่วนการใส่ Sound Effect ต่างๆ Download ได้จาก http://www.flashkit.com/ ซึ่งมี Sound Effect หลายแบบ ทั้ง Sound FX และ Sound Loop
ส่วนตัวโปรแกรมที่ใช้ในการตัด-ต่อเสียงนั้น เป็นโปรแกรมที่มีชื่อว่า Cool edit Pro เป็นโปรแกรมที่ใช้สำหรับการบันทึกเสียง การแก้ไข ตัด - ต่อเสียง ในระดับมืออาชีพ สามารถทำการปรับแต่งเสียง ใส่เอฟเฟคต่างๆ เช่น การทำเสียงก้อง (Reverb) การทำเสียงสะท้อน (Echo) ซึ่งมีเครื่องมือต่างๆให้เลือกใช้งานมากมาย สามารถบันทึกเป็นไฟล์ได้หลายรูปแบบ เช่น WAV , WMA , MP3 , RM , AVI , OGG และอื่นๆ
**ที่มาและคู่มือสอนการใช้งาน http://lms.ubru.ac.th/file.php/1/Manual_Cooledit.pdf

 ที่มาของรูป http://lms.ubru.ac.th/file.php/1/Manual_Cooledit.pdf
วิธีการใส่เสียงคือสร้าง Layer มา 1 Layer ทำการกด Insert Keyfremes (F6) แล้วคำสั่ง File-Import-Import to Library แล้วเลือก Property เลือกตรง Sound-Nameแล้วเปลี่ยน จาก None เป็นเสียงที่เราจาะใส่

eDocument : Fine and Apoplied Arts Division, Department of Humanities Sciences, Faculty of Humanities and Social Sciences, Chandrakasem Rajabhat University, Ratchadabhisek Road, jatuchak District, Bangkok,Thailand 10900.Contact Current E-mail:manoch.pd@gmail.com

R1: Research



โครงการออกแบบสื่อแอนิเมชั่นเพื่อการเรียนรู้
บนคอมพิวเตอร์สำหรับพกพา
”Tablet Computer” (แท็บเล็ต-Tablet)
สำหรับเด็กประถมตอนต้น เรื่อง”ความปลอดภัยในการข้ามถนน”
__________________________________________________________


Animation คือ ?


เกิดขึ้นจากการแสดงภาพอย่างเร็วของชุดภาพนิ่งแบบสองมิติ (2D) หรือเกิดจากการเปลี่ยนตำแหน่งของวัตถุที่เราอยากให้เคลื่อนที่โดยใช้หลักภาพลวงตาให้ดูเหมือนว่าภาพนิ่งเหล่านั้น มีการเคลื่อนไหวจากหลักการมองเห็นภาพติดตาของคนเรานั่นเองโดย Animation เกิดจากหลายองค์ประกอบรวมตัวกัน โดยหนึ่งในหัวใจของ Animation นั้นคือการ animateแปลกันอย่างตรงตัวก็คือการเคลื่อนไหวให้ชีวิตกับสิ่งต่างๆที่ยังไม่มีการเคลื่อนไหวหรือที่เรามักเรียกติดปากกันว่าภาพ Still/ภาพนิ่ง ดังนั้นเหล่า Animator ก็คือผู้ให้ชีวิตนั่นเอง
- Animation นั้นมีด้วยกันหลายประเภทแต่ในที่นี้ขอกล่าวถึง 3 ประเภทที่พบเห็นกันทั่วไป ได้แก่ -
1.Traditional Animation / Hand Drawing Animation / 2D Animation:
เป็นงานแอนิเมชั่นสมัยแรกเริ่ม มักจะใช้การวาดด้วยมืองานประเภทนี้พบเห็นได้ทั่วไป ในการทำ Animation ยุคแรกๆ โดยใช้เทคนิคการวาดด้วยมือ ทีละแผ่น แล้วใช้วิธี Flip เพื่อตรวจดูท่าทางของตัวละครที่เราได้ทำการ animate ไปแล้ว หรือที่เราเรียกกันว่า In Between (IB) โดยทั่วไปแล้วในงาน Animation แบบนี้ถ้าเป็นงาน Animation จากฝั่งตะวันตกหรือเป็นหนังโรงจะกำหนดให้ 1 วินาทีใช้รูป 24 เฟรมแต่ถ้าเป็นพวกซีรี่ย์การ์ตูนญี่ปุ่นจะกำหนดไว้ที่ 1 วินาทีใช้รูป 12 เฟรม หรือ อาจมากกว่านั้น
ที่มาของภาพ http://media.computerarts.futurecdn.net..... 
2. Stop-motion หรือ Clay Animation:

งานแอนิเมชั่นประเภทนี้ animator จะต้องเข้าไปทำการเคลื่อนไหวโดยตรงกับโมเดล และทำการถ่ายภาพเอาไว้ทีละเฟรม ๆการทำ StopMotion ถือเป็นเรื่องยากพอสมควรเพราะต้องแม่นในเรื่องของ Timing และ Pose มากๆ แม้การทำจะไม่ต้องอาศัยการวาดรูปเป็นหลัก แต่ก็ต้องทำ IB เองทั้งหมดด้วยมือการทำ IB ในงาน Animation ประเภทนี้ต้องอาศัยความชำนาญในการคำนวนล่วงหน้า เพราะ ถึงแม้จะมีอุปกรณ์ต่างๆ ช่วยในการ Flip แล้วก็ตาม(เช่น โปรแกรมต่างๆ ที่ช่วยในการ Capture รูป แล้ว Play ดูได้ทันที) แต่การจัดแสง และการควบคุมความต่อเนื่องระหว่างเฟรม ต้องอาศัยความรอบคอบ และความอดทนสูงมาก บางทีทำกันหลายวันหลายคืนไม่ได้พักเลยก็มี ดังนั้น Animator ของงานประเภทนี้นอกจากจะต้องมีความชำนาญแล้ว ควรจะมีสุขภาพแข็งแรงด้วย
ที่มาของภาพ http://www.garieinternational.com.sg/art/animation/...
3. Computer Animation / 2D Animation on computer / 3D Animation :

เป็นงานแอนิเมชั่นที่มักพบกันได้บ่อยในยุคปัจจุบันเนื่องจากการเข้าถึงโปรแกรมเป็นไปได้ง่าย และการนำหลักการแบบ 2D เข้ามาผสมผสานกับตัวโปรแกรม ทำให้เข้าใจได้ง่าย แถมยังสะดวกในการแก้ไขและแสดงผลจึงเป็นที่นิยมกันมาก Animator ในงานประเภทนี้ จึงมีเกิดขึ้นมาในยุคปัจจุบันอย่างมากมาย พร้อมด้วยความต้องการ ของวงการบันเทิงในยุคนี้ ที่เน้นการทำ CG Animation มากขึ้น ดูได้จากเมืองไทย ที่มีสถาบันสอนการทำ Animation เกิดขึ้นอย่างมากมาย และ Studio ที่ทำงาน Animation ในบ้านเราก็มีมากขึ้น เราจะเห็นได้ว่า งานต่างๆในวงการบันเทิงไทย ไม่ว่าจะเป็นภาพยนตร์ ภาพยนตร์โฆษณา การ์ตูนซีรี่ย์ ต่างๆ ล้วนล้วนแต่ มีงาน CG Animatoin แฝงอยู่ด้วยแทบทั้งนั้น เรียกได้ว่า เมืองไทยตอนนี้ มีความตื่นตัวในกระแส Animation เป็นอย่างมากเลยทีเดียว
ที่มาของภาพ http://2.bp.blogspot.com/-MtvYK4NenKA/... 
- ลักษณะการสร้างแอนิเมชัั่น -
1. การสร้างโดยวาดรูปทีละเฟรม (frame by frame):
Frame by frame Animationคือการนำภาพมาใส่ไว้ทีละเฟรมโดยการวาดหรือสร้างขึ้นมาทีละภาพและทำการกำหนดคีย์เฟรมเป็นการแสดงภาพแต่ละภาพที่เรียงต่อกันอย่างต่อเนื่องจนดูเหมือนว่าภาพนั้นมีการเคลื่อนไหวซึ่ง เราจะทำกา ร Import ภาพที่เราจะสร้าง มาไว้ใน Frame แต่ละ Frame
คีย์เฟรม คือ เฟรมที่ถูกกำหนดให้มีการเปลี่ยนแปลงของวัตถุเพื่อสร้างการเคลื่อนไหวการสร้างเคลื่อนไหวแบบ เฟรมต่อเฟรม เหมาะสำหรับภาพแอนิเมชั่นที่มีการเปลี่ยนแปลงแบบรวดเร็ว หรืองานที่ซับซ้อนมากๆ
ที่มาของภาพ http://0.tqn.com/d/animation/1/0/t/7/8.jpg
2. การสร้างแบบ Tween animation:
การสร้างภาพเคลื่อนไหวแบบ Tween เป็นการสร้างภาพเคลื่อนไหวจากเฟรมเบื้องต้นและเฟรมสุดท้าย ซึ่งโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมให้โดยอัตโนมัติ นั่นคือ การสร้างภาพเคลื่อนไหวแบบ Tween จะมีการสร้างเฟรมเพียง 2 เฟรมคือเฟรมเบื้องต้นและเฟรมสุดท้ายซึ่งคุณสมบัตินี้เองที่ทำให้ภาพเคลื่อนไหวแบบ Tween ซึ่งมีขนาดไฟล์ที่เล็กกว่าการสร้างภาพเคลื่อนไหวแบบ Frame-by-Frame
ลักษณะเฟรมของการสร้างภาพเคลื่อนไหวแบบTween การสร้างภาพเคลื่อนไหวในลักษณะต่างๆ จะปรากกฎรูปแบบและสีบนส่วนของเฟรมบนจอภาพ Timeline ในลักษณะที่ แตกต่างกันดังนี้
-Tween = Between แปลว่าระหว่างสร้างโดยการกำหนดภาพที่เฟรมต้นทางและปลายทาง แล้วให้คอมพิวเตอร์คำนวณการเปลี่ยนภาพ ต่อเนื่องระหว่างทางให้ทั้งหมด
- Motion Tween หรือ Motion Path เป็นการเคลื่อนไหวที่มีการกำหนดการเคลื่อนที่หมุนย่อหรือขยายไปตามเส้นที่วาดไว้โดยที่รูปร่างของวัตถุไม่มีการเปลี่ยนแปลง
- Shape Tween เป็นการสร้างภาพเคลื่อนไหวที่มีการเปลี่ยแปลงรูปทรงของวัตถุเป็นหลัก
ที่มาของภาพ http://www.onetuts.com/attachments/...
3. การสร้างด้วย Action Script หรือ Programming:

Action Script เป็นภาษาโปรแกรมหนึ่งมีความคล้ายคลึงกับภาษา Javaที่นำมาใช้เพื่อเพิ่มประสิทธิภาพในการทำงานของแอนิเมชั่น ให้สามารถประมวลผล ตัดสินใจหรือ โต้ตอบ (Interactive) กับผู้ใช้งานได้โดย ActionScript จะถูกนำมาใช้เมื่อมีการกระทำเกิดขึ้นซึ่งเรียกว่า “เหตุการณ์ (Event)” เช่นการคลิกเมาส์หรือการกดคีย์บอร์ดการติดตามพฤติกรรมผู้เล่นเป็นต้น
ภาษา Action Script (เรียกย่อๆว่า AS) นั้นเป็นภาษาที่ใช้งานกับไฟล์ flash เป็นหลัก แต่สามารถเขียนพัฒนาได้จากหลายโปรแกรมอื่นๆในปัจจุบัน เช่น AIR (เน้นพัฒนา application บน desktop), flexbuilder (flashbuilder 4 ในปัจจุบัน) หรือโปรแกรมโอเพ่นซอรส์ (Open Source หมายถึง โปรแกรมที่ไม่มีการปิดบังโค้ดเพื่อให้คนอื่นสามารถร่วมพัฒนาต่อยอดได้ และที่สำคัญคือ ฟรี ) อย่าง flashdeveloper หรือ อื่นๆได้เช่นกัน โดยประโยชน์ของ AS นั้นคือการช่วยให้ผู้ชม flash สามารถทำการอินเตอร์แอคทีพหรือตอบโต้กับวัตถุต่างๆได้ นอกจากนี้การเชื่อมต่อกับแหล่งข้อมูลอื่นๆ ก็ทำได้มากขึ้นรวมถึงบางสิ่งที่ flash ต้องอาศัยภาษาอื่นช่วยในการทำก็สามารถทำได้ด้วยตัวมันเองในภายหลังซึ่งเป็นหน้าที่ของเหล่า developer ทั้งหลายที่จะต้องคอยติดตามการพัฒนาทอยู่สม่ำเสมอ
ที่มาของภาพ http://actionscript.org/resources/... 
- ประเภทของแอนิเมชัน -
เดิมการสร้างแอนิเมชั่นนั้นจะใช้กับการ์ตูนเท่านั้น เช่น ทอมแอนด์เจอรี่ พิงค์แพนเตอร์ใช้การวาดด้วยมือเป็นหลักปัจจุบันเทคนิคและวิธีการสร้างมักนำคอมพิวเตอร์มาช่วยในการวาดการคำนวณความต่อเนื่องเพื่อให้งานทำได้ง่ายขึ้นทำให้ประเภทแอนิเมชั่นแบ่งเป็น
1.เซลแอนิเมชั่น:
คำว่า“เซล (Cel)” มาจากคำว่า“เซลลูลอยด์ (Celluloid)” เป็นแผ่นใสสำหรับวาดภาพในแต่ละเฟรม ซึ่งในปัจจุบันเปลี่ยมาใช้พลาสติก (Acetate) แทนแล้วมื่อวาดภาพตัวละครเสร็จก็นำตัวละครที่วาดบนแผ่นใสมาวางทับบนฉากที่ได้วาดเตรียมไว้แล้วถ่ายภาพลงฟิล์มทีละภาพต่อเนื่องเป็นวิธีการดั้งเดิมที่วอลท์ดิสนีย์ใช้ในการสร้างการ์ตูน
ที่มาของภาพ http://www.drip.de/wp-content/uploads... 
2.คอมพิวเตอร์แอนิเมชัน (computer animation):
คือการสร้างภาพเคลื่อนไหวด้วยคอมพิวเตอร์โดยอาศัยเครื่องมือที่สร้างจากแนวคิดทางคอมพิวเตอร์กราฟิกส์ ช่วยในการสร้างดัดแปลง และให้แสงและเงาเฟรมตลอดจนการประมวลผลการเคลื่อนที่ต่างๆ โดยเครื่องมือที่ว่าประกอบด้วยฮาร์ดแวร์ ซอฟต์แวร์ ที่สร้างขึ้นจาก ระเบียบวิธี ขั้นตอนวิธี หลักการ กฏ หรือ การคำนวณต่างๆ
ที่มาของภาพ http://upload.wikimedia.org/wikipedia/commons...
- การใช้คอมพิวเตอร์จำลองส่วนต่างๆ ของร่างกายเพื่อการศึกษามี 2 แบบคือ -
1.คีนิเมติก (Kinematic)
คีนิเมติก (Kinematic) เน้นการเรียนรู้ลักษณะกิริยาท่าทางและการเคลื่อนไหวของโครงสร้างส่วนที่มีการเชื่อมต่อกันเช่น ท่าทางการเดินของมนุษย์ซึ่งจะต้องทำการคำนวณตำแหน่ง จุดหมุน ความเร็ว และความเร่งของการเคลื่อนที่ของข้อต่อต่างๆ ภายในร่างกายมนุษย์ เช่น การงอเข่า ส่ายสะโพก แกว่งไหล่ ผงกศีรษะ เป็นต้น โปรแกรม Fractal’s Poser เป็นโปรแกรม หนึ่งที่ใช้ในการสร้างรูปแบบร่างกายของมนุษย์ (ผู้ชาย ผู้หญิง ทารก และวัยหนุ่มสาว) ในท่าทางต่างๆ กันเช่น ท่าทางในการเดินหรือเคลื่อนไหวอวัยวะต่างๆ สร้างผิวในรูปแบบของกล้ามเนื้อ ความสัมพันธ์ และข้อจำกัดของข้อต่อต่างๆ เช่น มือและช่วงแขน หรือข้อศอกที่ไม่สามารถพับไปด้านหลังได้ ซึ่งหลังจากที่มีการกำหนดเงื่อนไขต่างๆ แล้วจะให้คอมพิวเตอร์คำนวณผลลัพธ์และทำการสร้างภาพต่อไป
ที่มาของภาพ http://idav.ucdavis.edu/~dfalcant/images/... 
2. มอร์ฟฟิ่ง (Morphing):
มอร์ฟฟิ่ง (Morphing) คือเอฟเฟคการเปลี่ยนหรือแปรรูปจากรูปหนึ่งเป็นอีกรูปหนึ่งอย่างแนบเนียน มักแสดงให้เห็นความเปลี่ยนแปลงที่ดูเสมือนจริงโดยผ่านเทคโนโลยีที่ดูเกินจริงในสมัยก่อนมักใช้การแปรรูปสองรูป โดยให้ภาพสองภาพเลือนเข้าหากันโดยภาพนึงลดความคมชัดของภาพและอีกรูปเพิ่มความคมชัดของภาพ แต่บางครั้งการใช้งานเทคนิคนี้กับอะนิเมชันจะให้งานที่มีคุณภาพดีกว่าปัจจุบันการ morph ใช้เทคโนโลยีทางคอมพิวเตอร์เพื่อสร้างกระบวนการที่สมจริงมากขึ้น ตัวอย่างโปรแกรมลักษณะนี้ เช่น Avid’s Elastic Reality, Black Belt’s Winimages, Gryphon Software’s Morph, Human Software’s Squizz, Ulead’s Morphstudio. Jasc Paint Shop Pro และ Morph Man เป็นต้น
ที่มาของภาพ http://www.fugly.com/media/IMAGES/Random/... 
- รูปแบบของไฟล์อะนิเมชั่น -
1.GIF (Graphics Interlace File):
ไฟล์ GIF หรือ กิฟอะนิเมชัน Gif Animation ได้รับความนิยมมากเนื่องจากประหยัดพื้นที่ในการจัดเก็บ โดยจะจัดเก็บภาพนิ่งเป็นลำดับต่อเนื่องกันเหมาะกับการใช้งานบนเว็บไซต์ ปัจจุบันเว็บไซต์ทั่วไปสามารถแสดงผลภาพกิฟอะนิเมชันได้ทั้งสิ้น
Gif89a พัฒนาขึ้นในปี ค.ศ.1989 เป็นรูปแบบหนึ่งของกิฟอะนิเมชัน มักจะเรียกกันว่าอะนิเมทเทดกิฟ (AnimatedGif) ปัจจุบันมีหลายโปรแกรมที่สนับสนุนการสร้าง กิฟอะนิเมชัน เช่น โปรแกรม Animagic Gif, Premiere และ Flash ซึ่งสามารถจัดเก็บกิฟอะนิเมชันได้ทั้งสิ้น มาตรฐานอะนิเมชันที่ผลิตในรูปแบบของวิดีโอ และภาพยนตร์เอวีไอ (AVI Movie) ได้รับความนิยมเป็นอย่างมากในปัจจุบัน โดยสามารถแก้ไขผสมผสานกับคลิ๊ปอะนิเมชัน (AnimationClip) อื่นๆ เพิ่มเติมเทคนิคพิเศษและเตรียมเป็นทรัพยากรสำหรับใช้งานในผลิตภัณฑ์มัลติมีเดียได้อย่างไรก็ตามคลิ๊ปอะนิเมชันจะมีลักษณะเฉพาะบางอย่างมีผลต่อการใช้งาน โดยเฉพาะรูปแบบของการวาด ลักษณะรูปร่าง และพื้นผิวที่ราบเรียบของภาพอะนิเมชันอีกทั้งยังมีการสูญเสียของข้อมูลน้อยกว่าไฟล์วิดีโอตัวอย่างเช่นการแปลงไฟล์แบบเอวีไอเพื่อแสดงผลเป็นการ์ตูนกิฟอะนิเมชันและเพิ่มเติมเทคนิคให้อะนิเมชันแต่ละเฟรมแลดูมีเงาแสงใกล้เคียงความจริงมากที่สุดด้วยความละเอียด 256 สีหลังจากนั้นก็นำภาพแต่ละเฟรมมาจัดลำดับการแสดงผลด้วยโปรแกรม Animagic Gif และจัดเก็บอะนิเมชันในรูปแบบกิฟอะนิเมชันต่อไปพื้นที่ที่เก็บข้อมูลกิฟอะนิเมชันจะใช้เพียง 1.01 Mb เท่านั้น
2.JPG (Joint Photographer’s Experts Grop):
เป็นไฟล์ภาพที่ใช้งานบนระบบเครือข่าย มีโปรแกรมสนับสนุนในการสร้างจำนวนมาก สามารถเรียกดูได้กับ Graphics Browser ทุกตัวมักใช้ในกรณีที่ต้องการนำเสนอภาพที่มีความละเอียดสูง (สนับสนุนสีถึง 24 bit) ใช้กับภาพถ่ายที่นำมาสแกนมีระบบแสดงผลตั้งแต่ความละเอียดน้อยๆ และค่อยๆ ขยายไปสู่ความละเอียดสูงโดยผู้ใช้สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการ (ค่าของการบีบอัดไฟล์อยู่ระหว่าง 1-10) ไฟล์ที่ได้จึงมีขนาดเล็ก แต่ก็มีข้อเสียคือ ไม่สามารถทำให้พื้นภาพโปร่งใสได้ และเมื่อมีการส่งภาพจาก Server ไปแสดงผลที่ Client จะทำให้การแสดงผลภาพช้ามากเพราะต้องเสียเวลาในกาคลายไฟล์ดังนั้นการเลือกค่าการบีบอัดไฟล์ ควรกำหนดให้เหมาะสมกับภาพแต่ละภาพ
3.PNG (Portable Network Graphics):
เป็นไฟล์ที่ทำพื้นภาพให้โปร่งใสได้ สนับสนุนสีได้ตามค่า “True Color” (16 bit, 32 bit หรือ 64 bit) มีระบบแสดงผลตั้งแต่ความละเอียดน้อยๆ และค่อยๆ ขยายไปสู่รายละเอียดที่มีความคมชัดมากขึ้น (Interlace) โดยผู้ใช้สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการไฟล์ที่ได้มีขนาดเล็ก แต่หากกำหนดค่าการบีบไฟล์ไว้สูงก็จะต้องใช้เวลาในการคลายไฟล์สูงตามไปด้วย
โปรแกรมสนับสนุนในการสร้างมีน้อยไม่สามารถเรียกดูกับ Graphic Browser รุ่นเก่าได้ เป็นไฟล์ที่สนับสนุนเฉพาะ IE 4 และ Netscape
4.SWF (shockwave flas):
"Flash movie" หรือ Adobe Flash (หรือที่เราคุ้นเคยกับชื่อ Macromedia Flash นั่นเอง) เป็นไฟล์จะมีนามสกุลเป็น .swf และ .flv ซึ่งจะได้จากการ Compile ไฟล์ .fla ที่ถูกสร้างโดย Flash, FreeHand, Generator, แอนิเมชัน และอินเตอร์แอกทีฟ ในเว็บเพจ และในโปรแกรมหลายๆ โปรแกรมระบบ และ เครื่องมือต่างๆ ที่มีความสามารถในการแสดง แฟลชได้ และแฟลชยังเป็นที่นิยมในการใช้สร้างแอนิเมชั่นโฆษณาออกแบบส่วนต่างๆ ของเว็บเพจใส่วิดีโอบนเว็บและอื่นๆอีกมากมาย อีกทั้งยังเป็นไฟล์ที่ได้รับความนิยมสูงมากในปัจจุบัน เพราะมีขนาดเล็กมากกราฟิกเป็นแบบเวกเตอร์จึงมีความคมชัดตลอดเวลา และสนับสนุนการทำงานด้านมัลติมีเดีย เช่น ผสมผสาน เสียง ภาพนิ่ง ภาพเคลื่อนไหวอื่นลงไปได้ สามารถแทรกโค้ดคำสั่งสร้างการเชื่อมโยงไปยังสื่อชนิดอื่น หรือแหล่งข้อมูลอื่นได้และยังสามารถทำงานได้กับบราวเซอร์ทุกตัวที่มีการติดตั้งโปรแกรมเสริมเข้าไป
- ตัวอย่างซอฟต์แแวร์ส์สาหรับสร้างแอนิเมชัั่น -
ชื่อโปรแกรม
ข้อมูลทั่วไป

Macromedia Flash
เป็นโปรมแกรมที่ได้รับความนิยมอย่างมาก
ในการนำมาใช้งานสามารถสร้างภาพแอนิ
เมชั่นในรูปแบบมัลติมีเดียที่สมบูรณ์แบบ

MacromediaDirector
เป็นโปรมแกรมที่สามารถ
สร้างไฟล์ข้อมูล
สำหรับเล่นกับปลั๊กอินได้

True space
โปรมแกรมสร้างรูปทรง มิติสามารถใช้
สร้างรูปมนุษย์ใบหน้าอารมณ์ต่างๆ
และการวาดรูปทรงเรขาคณิตได้

Maya
เป็นโปรแรมสร้างแอนิเมชั่นแบบ มิติ
ที่ได้รับความนิยมสูงอีกชนิดหนึ่ง
สร้างภาพยนตร์

3D MAX
ซอฟต์แวร์สร้าง
แอนิเมชั่น มิติที่โด่งดัง
มีชื่อเสียงมานาน

Swish
โปรแกรมสร้างเว็บเพจ
ในรูปแบบอินเตอร์แอ๊กที
ฟเช่นเดียวกับ Flash

3D Canvas
เป็นซอฟต์แวร์สร้างแอนิเมชั่น
แบบเวลาจริงการใช้งานจำเป็นต้องมี
ฮาร์ดแวร์มาสนับสนุน

20-Slim Pro
โปรแกรมสร้างภาพเสมือน
และจำลองระบบ
การทำงานต่างๆ ด้านวิศวกรรม

ที่มาข้อมูลต่างๆ....Credit by:    


R3:Result

โครงการออกแบบสื่อแอนิเมชั่นเพื่อการเรียนรู้บนคอมพิวเตอร์สำหรับพกพา “Learning Object Animate Design For Tablet Computer” สำหรับเด็กประถม...