Home Webboard ArticlesKnowledges  
ข่าวประกาศ:

:: กติกา มารยาท ในการใช้งานเว็บบอร์ด ::
กรุณากรอกอีเมล์จริงในการสมัคร และรับอีเมล์ยืนยันเพื่อใช้งานในบอร์ด

ผู้เขียน หัวข้อ: มาทำการ์ตูนแอนิเมชั่น อย่างสั้นๆ ง่ายๆ ด้วย Flash ลองทำตามกันดูนะคะ  (อ่าน 118604 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
มาทำการ์ตูนแอนิเมชั่น อย่างสั้นๆ ง่ายๆ ด้วย Flash ลองทำตามกันดูนะคะ
พอดีเคยทำไว้บทเรียนผ่านเว็บ เรื่อง พื้นฐานการภาพเคลื่อนไหว เพื่องานวิจัย แล้วก็ทดลองไปเสร็จเรียบร้อยแล้ว
ก็เลยเอามาฝาก ค่ะ เพื่อจะเป็นประโยชนฺกับผู้ที่สนใจ ให้ออกมาหน้าตาแบบนี้  


<table class="maeva" cellpadding="0" cellspacing="0" border="0" style="width: 425px" id="sae1"> <tr><td style="width: 425px; height: 355px" colspan="2" id="saeva1"> <div id="aevid1"></div> <script type="text/javascript"><!-- // --><![CDATA[ var oldLoad = window.onload; window.onload = function() { if (typeof(oldLoad) == "function") oldLoad(); aevacopy(); } swfobject.embedSWF("http://basic-animation.com/moodle/file.php/1/moviecliptry1.swf", "aevid1", "425", "355", "9", aeinst, {}, aevams, {id:"aevawi1"}); // ]]></script></td></tr> <tr><td class="aeva_t"><a href="http://basic-animation.com/moodle/file.php/1/moviecliptry1.swf" target="_blank" class="aeva_link bbc_link new_win">http://basic-animation.com/moodle/file.php/1/moviecliptry1.swf</a></td><td class="aeva_q" id="aqc1"></td></tr></table>

credit : http://www.basic-animation.com/tryanimation.html
           http://basic-animation.com/moodle/

ขั้นตอนที่ 1 คลิกที่รูปภาพเพื่อดาวโหลดไฟล์ แฟลชและไฟล์เสียงค่ะค่ะ

« แก้ไขครั้งสุดท้าย: 11, เมษายน 2012, 09:35:21 AM โดย ชลปุษบา »



ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
2. เปิดไฟล์ ชื่อ moviecliptrystudent1.fla ที่ทำการดาวน์โหลดขึ้นมา จะมีหน้าตาแบบนี้





3. ทำการเปลี่ยนพระอาทิตย์ให้เป็นมูฟวี่คลิป แล้วทำการเคลื่อนไหว ดังภาพ

3.1 คลิกขวาที่รูปพระอาทิตย์ เลือกคำสั่ง cut เพื่อเปลี่ยนให้เป็นมูฟวี่คลิป



3.2 เลือกคำสั่ง Insert New Symbol... เลือกชนิดเป็น Movie clip ตั้งชื่อให้กับมูฟวี่คลิป



3.3 เข้ามาที่หน้ามูฟวี่คลิป คลิกขวา patse รูปพระอาทิตย์ทีทำการ cut มาจากหน้า มูฟวี่หลัก แล้วคลิกขวา Convert to Symbol ที่รูปพระอาทิตย์



3.4 เลือกชนิดของ Symbol ให้เป็นก Graphic



3.5 คลิกไปที่เครื่องมือ Free Transform แล้วลากจุดศูนย์กลางมาไว้ตรงกลางแล้ว
ทำการหมุน เมื่อทำการเคลื่อนไหวเสร็จแล้วให้คลิกที่ Scene 1 เพื่อกลับมายังมูฟวี่หลัก
« แก้ไขครั้งสุดท้าย: 11, เมษายน 2012, 09:47:26 AM โดย ชลปุษบา »

ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
4. เมื่อกลับมาที่มูฟวี่หลักแล้วให้คลิกที่เลเยอร์ "พระอาทิตย์" แล้วดึงมูฟวี่คลิป "พระอาทิตย์หมุน" ที่ไลบรารี มาไว้ในสเตจ ในตำแหน่งให้เหมาะสม




5. ทำการเปลี่ยน "ปาก" ให้เป็นมูฟวี่คลิป ซึ่งจะมีขั้นตอนคล้ายกันกับการสร้างมูฟวี่ของ

"พระอาทิตย์" โดยทำการเคลื่อนไหวให้ปากขยับตลอดเวลา

เมื่อกลับมาที่มูฟวี่หลักแล้วให้คลิกที่เลเยอร์ "ปาก" แล้วดึงมูฟวี่คลิป "ปากขยับ" ที่ไลบรารี มาไว้ในสเตจ ในตำแหน่งบนใบหน้าดังเดิม





ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
6. คลิกขวา Convert to Symbol...ที่แขนขวาืของตัวการ์ตูน เลือกชนิดเป็น Graphic แล้วคลิกเครื่องมือ Free Transform

แล้วลากจุดศูนย์กลางมาวางไว้ที่หัวไหล่ของตัวการ์ตูน ต่อจากนั้นคลิกขวา Convert to Symbol...

ที่ศีรษะของตัวการ์ตูน เลือกชนิดเป็น Graphic ไม่ต้องเลื่อนจุดศูนย์กลาง




7. กดคีย์ F5 เพื่อเพิ่มความยาวของเฟรม ในทุกเลเยอร์ แล้ว Insert KeyFrame (กดคีย์ F6)

ที่ตำแหน่งเฟรมที่ 15 และ 25 ที่เลเยอร์แขนขวากับศีรษะต่อจากนั้นทำการขยับ แขนขวา และ ศีรษะในตำแหน่งคีย์เฟรมที่ 25 ดังภาพ

แล้วคลิกขวาตรงกลางระหว่างคีย์เฟรมที่ 15 และ 25 ตรงเลเยอร์แขนขวา กับศีรษะ แล้วเลือกคำสั่ง Create Motion Tween




ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
8. ทำการเพิ่มเลเยอร์ ขึ้นใหม่อีก 1 เลเยอร์ แล้วตั้งชื่อว่า "เสียงพากษ์" ต่อจากนั้น Import ไฟล์เสียงประกอบชื่อ "soundwait"

แล้วเลือกคำสั่ง Flie>Import >Import to Library... คลิกที่เลเยอร์ "เสียงพากษ์์ิ" แล้วทำการลากไฟล์เสียง "soundwait" ที่ไลบรารีมาไว้ที่สเตจ

เลือกประเภทของเสียงเป็นแบบ Stream Sound กดคีย์ F5 ที่เฟรมตำแหน่งที่ 130 เพื่อขยายช่วงเวลาในการเล่นเสียง

และในเลเยอร์อื่นๆก็ให้กดคีย์ F5 ในตำแหน่งเฟรมที่ 130 ในทุกๆเลเยอร์





9. ทำการเพิ่มเลเยอร์ ขึ้นใหม่อีก 2 เลเยอร์ แล้วตั้งชื่อว่า "action script" กับ "ปุ่ม" แล้ว Insert Keyframe เปล่า (กดคีย์ F7) 

ที่เลเยอร์ "action script" ตำแหน่งเฟรมที่ 130 หรือ ให้ตรงกับตำแหน่งเฟรมสุดท้ายของมูฟวี่

คลิกที่เลเยอร์ของปุ่มเลือกคำสั่ง Window > Common Libraries>Buttons เลือกปุ่มในหมวดโฟลเดอร์ playback rounded

แล้วเลือกปุ่มชื่อ "rounded green play" และปุ่ม "rounded green stop " แล้วดึงลงไปใน stage




ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
10. คลิกไปที่เลเยอร์ "action script" ในตำแหน่งเฟรมที่ 1แล้วกดคีย์ F9 แล้วใส่ action script ให้กับคีย์เฟรม

ด้วยการคลิกฟังชันก์ Global Funtions > Timeline Control > stop หรือจะพิมพ์โค๊ด stop(); ลงไปก็ได้ไปที่เลเยอร์

ต่อจากนั้น คลิกไปที่คีย์เฟรมที่ 130 หรือเฟรม สุดท้ายที่เรา Insert คีย์เฟรมเปล่าเข้ามาแล้วกดคีย์ F9

แล้วใส่ action script ให้กับคีย์เฟรม ด้วยการคลิกที่ฟังชันก์Global Funtions > Timeline Control > gotoAndPlay แล้วพิมพ์ 2

ลงในวงเล็บหลัง gotoAndPlay หรือ จะพิมพ์โค๊ด gotoAndPlay(2); ลงไปก็ได้




10. คลิกที่ปุ่ม play กด F9 แล้วใส่ action script ให้กับปุ่ม ด้วยการคลิกที่ฟังชันก์ Global Funtions > Movie Control > on>เลือกฟังก์ชัน release

คลิกที่ แถวที่ 2 ให้เคเซอร์อยู่ข้างหน้า } แล้วเลือก Global Funtions > Timeline Control > play หรือจะพิมพ์โค๊ด on (release) {play();} ลงไปก็ได้

ต่อจากนั้น คลิกที่ปุ่ม stop กด F9 แล้วใส่ action script ให้กับปุ่ม ด้วยการคลิกที่ฟังชันก์ Global Funtions > Movie Control > on>

เลือกฟังก์ชัน releaseคลิกที่ แถวที่ 2 ให้เคเซอร์อยู่ข้างหน้า } แล้วเลือก Global Funtions > Timeline Control > stop

หรือจะพิมพ์โค๊ด on (release) { stop();} ลงไปก็ได้


 


ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
เมื่อทำตามครบทุกขั้นตอนแล้ว เราก็จะได้ การ์ตูนแอนิเมชั่น ออกมาดังนี้


<a href="http://basic-animation.com/moodle/file.php/1/moviecliptrytest.swf" target="_blank" class="new_win">http://basic-animation.com/moodle/file.php/1/moviecliptrytest.swf</a>

ออฟไลน์ ชลปุษบา

  • Ju
  • *
  • กระทู้: 34
  • เห็นด้วย&ขอบคุณ: 9
  • เพศ: หญิง
    • บ้านสิงห์ตุ๊กตากิ๊ฟช็อป
สำหรับใคร ที่ยังงๆกับการใส่ "action script" ให้กับปุ่ม ดูตามคลิปวีดิโอได้ค่ะ ทำไว้ประกอบบทเรียน

<a href="http://www.youtube.com/v/vJ-BmPZ1IN8?version=3&amp;amp;hl=th_TH&quot; type=&quot;application/x-shockwave-flash" target="_blank" class="new_win">http://www.youtube.com/v/vJ-BmPZ1IN8?version=3&amp;amp;hl=th_TH&quot; type=&quot;application/x-shockwave-flash</a>

หรือใครที่สนใจทำในเทคนิคอื่นๆ เช่น Mask Layer ก็คลิกไปที่ วีดิโอของ songmonster ได้ค่ะ มีสอนไว้หลายเทคนิค

<a href="http://www.youtube.com/v/6eiuPDclEHE?version=3&amp;amp;hl=th_TH&quot; type=&quot;application/x-shockwave-flash" target="_blank" class="new_win">http://www.youtube.com/v/6eiuPDclEHE?version=3&amp;amp;hl=th_TH&quot; type=&quot;application/x-shockwave-flash</a>

Monsterbirdzz

  • บุคคลทั่วไป

123

  • บุคคลทั่วไป
ทำ2-3 รอบแล้วอะ แต่มันไม่ได้อะ ทำตามที่บอกด้วยนะ แต่ว่ามันมีแต่เสียงเพลงอะ แต่มือ พระอากทิตย์ ปากมันไม่ขยับอะ ช่วยหน่อยได้ไหมอะ แอดเมล์แล้วทักมาหน่อยได้ไหมอะ ขอด่วยเลยนะ ต้องส่งงานอะ ขอร้อง :cry: :cry: :cry:

 

Sitemap 1 2 3 4 5 6 7 8 9 10 
Back to top