NoomnannStudy

[Flash tutorial] ทำเป็นซึ้ง...

posted on 10 Mar 2012 22:06 by noomnann in NoomnannStudy directory Cartoon, Knowledge
ตัวนุ่มกะตัวแน่น
 
ตัวนุ่มกะตัวแน่นกลับมาแล้วววว!! หลังจากโดนพิษน้ำท่วม
ได้ไปซุ่มเขียนหนังสือ Flash จนเสร็จเรียบร้อย
วางแผงแล้วทั่วประเทศ (มั๊ง?) โดยมีตัวนุ่มกะตัวแน่นเป็น presenter จ้า
 
ตัวนุ่มกะตัวแน่น
 
Flash CS5 Animation & Interaction ของสำนักพิมพ์ Netdesign
หากผู้ใดมีไว้ครอบครองส่งเสียงทักทายกันนิสนึงนะครับ หรือจะติชมอย่างไร
ก็ยินดีน้อมรับครับผม
 
 ตัวนุ่มกะตัวแน่น
 
เพื่อเป็นการฉลองที่เขียนหนังสือเสร็จ (แต่บ้านยังทำไม่เสร็จ) ก็เลยปล่อย
Entry แรกหลังจากหายไปหลายเดือน
เป็น Tutorial เล็กๆ สำหรับคนที่อยากทำ Flash โดยหวังว่าอาจจะทำให้
หลายๆ คนได้เรียนรู้เกี่ยวกับการทำ Animation ง่ายๆ และเกิดความสุขเล็กๆ
กับการได้เห็นตัวการ์ตูนของท่านขยับไปมา

นอกจากนี้ บทความใน Blog จะเป็นการเพิ่มเติมและทบทวนบทเรียนที่กระผมเองได้สอน
แก่นักศึกษา จึงน่าจะเป็นประโยชน์ต่อคนอื่นๆ ด้วยเช่นกัน (เป็นทางการละเกินแฮะ)
 
 
noomnann
 
ผมจะแสดงขั้นตอนการทำ Animation ง่ายๆ โดยไม่ได้ลงรายละเอียดตั้งแต่เริ่มต้นนะครับ
ในส่วน Basic การวาดและใช้โปรแกรมสามารถอ่านได้ในหนังสือ
(ไม่ได้แอบขายหนังสือนะค้าบ แหะแหะ)
จะหนังสือผม หรือหนังสืออื่นก็ได้ครับ แต่อันที่จริงผมเคยทำ Tutorial เกี่ยวกับ
Basic Animation ใน Flashไปแล้วใน Blog เก่า  "Hungry-Angry แฟนผมโมโหหิว"
แต่หลังจากโดนแฟนทิ้งก็เลยไม่ได้ update อีก (พูดแล้วช่างปวดใจ 55) แต่ยังไง
ท่านที่ไม่เคยใช้ Flash เลยสามารถตามไปดูที่ Link นี้ได้เลยจ้า
http://hungryangry.exteen.com/20090304/flash-tutorial-1
 

กลับมาที่บทเรียนของเรา เมื่อวันก่อนนักศึกษาถามผมว่า จะให้ตัวการ์ตูนทำตาซึ้งทำอย่างไร
ในความคิดของผมน่าจะออกมาเป็นประมาณนี้
 


ซึ่งทำง่ายเหลือเกิน แทบไม่ต้องมีพื้นฐานใดๆ ทั้งสิ้น เริ่มจากเตรียมตัวการ์ตูน
ที่ต้องการทำตาซึ้งขึ้นมา 1 ตัว ตัวการ์ตูนตัวนี้จะต้องสามารถแยกชิ้นส่วนได้นะครับ
อย่าวาดใน Flash ขึ้นมาดื้อๆ เพราะอาจทำให้สีตัดกันได้ ดังนั้นถ้าวาดใน Flash ให้ใช้
Drawing Object หรือ Group ด้วย
 
 
 

ว่าจะไม่พูดเรื่อง Basic ละ แต่ก็อดไม่ได้แฮะ 55 วัตถุเบื้องต้นที่วาดใน Flash จะเป็น Shape ครับ
ซึ่งเมื่อวาดซ้อนกันจะตัดกันทิ้ง แบบนี้เอามาทำ Animation ไม่ได้ ก่อนวาดจึงต้องเลือกเป็น
Drawing Object เสียก่อน เช่นถ้าจะวาดวงกลมต้องกดปุ่มนี้ไว้ก่อนครับ
 
 
 
 
พอเป็น Drawing Object แล้ว วัตถุจะมีชั้นงาน ซึ่งท่านสามารถสลับชั้นด้วยการกด
Ctrl + up or down ครับ หากท่านไม่ชำนาญการวาดใน Flash ให้วาดจาก Illustrator
แล้ว Copy มา Paste เป็น ai เลยครับ
 

 
อ้อ!! เลือกตัวการ์ตูนที่มีลูกตาด้วยนะครับ





แท้จริงแล้วการทำตาซึ้งในลักษณะนี้ ก็คือการทำให้ตาเป็นฉ่ำๆ เหมือนมีน้ำกลิ้งในตานั่นเอง
วิธีทำง่ายที่สุดคือเติมวงกลมสีขาวเข้าไปบนลูกตา แล้วทำให้วิ่งไปมาเท่านั้นเอง




แต่เดี๋ยวก่อน !! ส่วนใหญ่แล้วเราไม่ทำ Animation กันที่ Scene ครับ
เพราะทำให้เราย้ายตำแหน่งลำบากและเมื่อมีวัตถุหลายๆ ชิ้น
เราก็จะจัดการเวลาลำบาก (แต่ละตัวเล่นไม่เท่ากัน) ให้เริ่มต้นด้วยการ
Convert ตัวการ์ตูนทั้งหมดเป็น MovieClip ก่อน (เลือกที่วัตถุแล้ว F8)
 
 
 
 
จากนั้น Double click เข้าไปใน MovieClip เราจะเริ่มทำ Animation ในนี้
 



 
เริ่มด้วยการเพิ่ม Layer (กดกระดาษพับมุมตรง Timeline) เพื่อวาดวงกลมเล็กๆ
สีขาวลงไปบนลูกตาทั้ง 2 ข้างในที่นี้ผมตั้งชื่อว่า Layer - แววตา
 
 


 
ทำ Animation โดยการไปเพิ่ม keyframe ไว้ซัก frame ที่ 3
(เลือกช่อง frame ที่ 3 ของ layer แววตา กด F6)
 

 
 
layer ของตัวการ์ตูนก็ใส่ frame ตามมาให้เท่ากัน (เลือก frame ที่ 3 กด F5)
 

 
 
ตรง frame ที่ 3 ของ layer แววตานี้จับย้ายวงกลมสีขาวไปเล็กน้อย
 

 
 
ใส่ frame ต่อด้านหลังไปอีก 1 frame เพื่อให้ทั้ง 2 ภาพเล่นเท่ากัน
(เลือกช่อง frame ที่ 4 ของทั้งสอง layer กด F5)
 

 
 
ใน MovieClip นี้เมื่อเล่นจบ frame ใดก็จะวนกลับมาเริ่มต้นใหม่ให้เอง
ดังนั้นหากไม่ใส่ frame เพิ่มหลังภาพที่ 2 จะทำให้เล่นไม่สมดุล
ตอนนี้ลองทดสอบงานโดยกด Ctrl+Enter ก็จะเห็น Animation แล้ว

Note
ลองกลับมาที่ Scene (คลิกที่คำว่า Scene 1) จะเห็นว่ามีวัตถุชิ้นเดียว ซึ่งก็คือ
MovieClip ประโยชน์ที่เห็นได้ชัดจาก MovieClip คือท่านสามารถย้าย ย่อ ขยาย
Animation ได้ทั้งก้อนนั่นเอง
 
 


ลองทำหลายๆ ตัวได้เล้ยยย



เพิ่มเติมจ้า
ถ้าจะลองเอามาใส่ใน Blog - Exteen ต้องใช้การ Upload แบบเก่านะครับ
โดยเมื่อสร้าง Entry ใหม่ หากอยากจะใส่ Flash ลงใน Entry นั้นๆ ต้องไปเลือกมุมขวาล่าง
ที่เขียนว่า Use Old Editor ครับ



จะใส่ Flash ตรงไหนก็กดที่สัญลักษณ์ Flash แล้วก็ระบุที่อยู่กับขนาดได้เลยครับ



หวังว่าจะได้ประโยชน์กันไปบ้างนะครับ คิดถึง Exteen จริงๆ ไว้จะรีบมา up blog กันอีกนะคร้าบบบบ

edit @ 10 Mar 2012 23:43:56 by TuaNoom'n TuaNann ตัวนุ่มกะตัวแน่น