[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 ตัวนุ่มกะตัวแน่น

Comment

Comment:

Tweet

http://www.deelsonheels.com/241899_7c_Adjustable_Shoe_Lifts_7c_Heel_Inserts/p133745_317422.aspSofia

#79 By Kennedy (111.243.249.163, 62.173.43.73) on 2013-10-29 15:31

posting.php?mode=reply

#78 By maillot portugal mondial 2013 (202.105.90.18) on 2013-09-13 18:54

profile.php?mode=viewprofile

#77 By sacs prada (202.105.60.226) on 2013-09-12 22:54

tools.php?event=profile&pname=

#76 By sac louis vuitton pas cher femme (202.105.60.226) on 2013-09-12 22:52

/ftopic*.html

#75 By maglie calcio 2013 2014 (14.147.207.96) on 2013-09-09 04:19

ibcwzir [Flash tutorial] ??????????... | TuaNoom'n TuaNann ???????????????? yrltwgskf

#74 By louis vuitton fake bags (216.244.79.171) on 2013-08-18 17:32

Very great post. I simply stumbled upon your blog and wanted to mention that I’ve really loved browsing your blog posts. After all I’ll be subscribing in your feed and I am hoping you write again soon!

#73 By http://www.sixsigmadss.com/ (183.5.140.64) on 2013-08-03 07:27

I’ll apply this idea…… It can be fun!

#72 By http://www.link898.com/ (202.105.60.235) on 2013-07-30 15:07

index.php?act=post

#71 By http://maillotcroatie.1to1elite.com (116.21.64.219) on 2013-07-27 05:15

forum-thread-view?r=

#70 By http://maillot-psg-20133.webnode.fr/ (116.21.64.219) on 2013-07-27 05:14

viewtopic,p,*.html

#69 By http://maillot-psg.1to1elite.com/ (116.21.64.219) on 2013-07-25 12:56

最も可能性の高い高級オ maillot de foot http://www.maillot-de-foot-pascher.net/

#68 By http://www.maillot-de-foot-pascher.net/ (202.105.60.103) on 2013-07-20 05:54

modules.php?name=Forums&file=viewtopic&p=

#67 By maillot de foot pas cher (103.7.57.18|14.150.73.115) on 2013-07-10 19:50

profile.php?mode=viewprofile

#66 By maillot de foot (103.7.57.18|14.150.73.115) on 2013-07-10 14:29

Thanks-a-mundo for the blog.Really thank you! Will read on…

#65 By gifts for men (103.7.57.18|14.147.204.249) on 2013-07-01 05:30

Good blog! I truly love how it is easy on my eyes and the data are well written.

#64 By maillot de foot (103.7.57.18|14.147.204.249) on 2013-07-01 01:26

I cant wait to go through additional from you. That is really an incredible weblog.

#63 By maillot de foot pas cher (103.7.57.18|14.147.204.249) on 2013-07-01 01:23

viewtopic-p-*.html

#62 By maillot foot pas cher (103.7.57.18|14.147.205.32) on 2013-06-29 15:26

Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again soon!

#61 By ray ban pas cher (103.7.57.18|116.21.65.163) on 2013-06-28 01:40

Many thanks a whole lot for sharing!

#60 By maillot de foot (103.7.57.18|116.21.65.163) on 2013-06-27 22:34

Very informative article post.Really looking forward to read more. Really Great.

#59 By louis vuitton shop (103.7.57.18|202.105.89.148) on 2013-06-22 02:10

I really enjoy the blog.Much thanks again. Great.

#58 By lunette ray ban (103.7.57.18|202.105.90.31) on 2013-06-18 04:10

webboard/index.php?topic=

#57 By lunette ray ban锛宺ay ban wayfarer (103.7.57.18|202.105.91.10) on 2013-06-15 01:44

Thank you for your article.Thanks Again. Awesome. lunette ray ban锛宺ay ban wayfarer http://lunette-ray-ban-raybanwayfarer.blogspot.com/

#56 By lunette ray ban锛宺ay ban wayfarer (103.7.57.18|202.105.62.240) on 2013-06-14 04:16

index.php?/topic/

#55 By maillot psg 2013 (103.7.57.18|183.5.141.225) on 2013-06-05 07:32

Tip top stuff. I'll epxect more now.

#54 By ySXzvFDQHL (103.7.57.18|185.20.137.55) on 2013-05-18 12:33

This is one awesome blog.Thanks Again. Much obliged.

#53 By ugg boots (103.7.57.18|202.103.132.115) on 2013-04-23 04:47

Good day! This is my 1st comment here so I just wanted to give a quick shout out and say I truly enjoy reading your blog posts. Can you recommend any other blogs/websites/forums that go over the same topics? Thanks for your time!

#52 By maillot de foot pas cher (103.7.57.18|202.105.89.183) on 2013-04-22 09:49

Great, thanks for sharing this blog article.Really looking forward to read more. Fantastic.

#51 By Maillot de Foot (103.7.57.18|202.105.89.183) on 2013-04-21 13:48

Very nice site!

#50 By rrttpypi (103.7.57.18|94.200.77.244) on 2013-04-14 01:07

Hello! edccgcd interesting edccgcd site! I'm really like it! Very, very edccgcd good!

#49 By owoeuwup (103.7.57.18|84.22.178.163) on 2013-04-14 01:07

Very nice site!

#48 By rrytiepe (103.7.57.18|94.200.77.244) on 2013-04-14 01:06

Hello! fkkfedd interesting fkkfedd site! I'm really like it! Very, very fkkfedd good!

#47 By toiirpui (103.7.57.18|78.46.235.148) on 2013-04-14 01:06

I loved your post.Thanks Again. Really Great.

#46 By ceinture louis vuitton (103.7.57.18|202.105.60.167) on 2013-04-09 05:37

I don't like pubs <a href=" http://www.blueflyingfish.com ">retin a generic form</a> 17 M/I Fill Number Code 706, 707

#45 By xmGWfOPwzFbPHPRf (103.7.57.18|188.143.232.31) on 2013-03-19 15:31

Did you go to university? <a href=" http://www.ggiodpc.com ">how much does propecia cost uk</a> * 1pc beef cubes

#44 By xmGWfOPwzFbPHPRf (103.7.57.18|188.143.232.31) on 2013-03-19 15:31

Could you please repeat that? <a href=" http://jonathanblaustein.com ">what is orlistat</a> Policy: Members have the right to be treated in a way that respects their dignity and

#43 By xmGWfOPwzFbPHPRf (103.7.57.18|188.143.232.31) on 2013-03-19 15:30

Nice to meet you <a href=" http://www.pinellasanimalfoundation.org ">prozac kaufen</a> 3. Calculate an adjusted body weight AC, PC,

#42 By xmGWfOPwzFbPHPRf (103.7.57.18|188.143.232.31) on 2013-03-19 15:29

I'd like to transfer some money to this account <a href=" http://www.solutionbc.com ">fluoxetine 10 mg tab</a> 501 Header Response Status A/N 1 6-6 R A = Acceptable

#41 By cNHMNQzOzAAq (103.7.57.18|188.143.232.31) on 2013-03-16 15:05

We're at university together <a href=" http://www.nsmedia.se ">purchase lexapro</a> 1-3 MEVS Accepted Codes (see

#40 By cNHMNQzOzAAq (103.7.57.18|188.143.232.31) on 2013-03-16 15:04

I'm a housewife <a href=" http://mvanveenbv.com ">lexapro copay card</a> application, analysis, creativity, no medical indication

#39 By cNHMNQzOzAAq (103.7.57.18|188.143.232.31) on 2013-03-16 15:04

I hate shopping <a href=" http://www.harborassn.com ">purchase desyrel</a> hours; i.e. the student should work any shift the preceptor works. The preceptor may also require

#38 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:53

Sorry, you must have the wrong number <a href=" http://www.skiingitaly.net ">clomipramine hydrochloride generic</a> subsequent patient visits or

#37 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:52

Can I use your phone? <a href=" http://www.meosales.com ">celexa cost</a> Pharmacies should advise patients to contact their plan administrator for additional details.

#36 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:52

Enter your PIN <a href=" http://www.embatech.com ">buy clomipramine</a> preparation and is prescribed solely to circumvent these Maine Care

#35 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:52

I want to make a withdrawal <a href=" http://www.garylandphotography.com ">does 25 mg amitriptyline look like</a> A.) You have not submitted the PIN

#34 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:51

What university do you go to? <a href=" http://www.info-kod.si ">cost of accutane</a> task. Needs sometimes instructor some intervention; situation. Requires situation. Requires

#33 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:51

Could you tell me the dialing code for ? <a href=" http://www.garylandphotography.com ">amitriptyline tablets bp 25 mg</a> 5.7. Summarize and apply events. · Effectively utilize · Discuss the QA process for

#32 By NSVNryKOYXwW (103.7.57.18|188.143.232.31) on 2013-03-13 19:50

bfDOee <a href="http://ilmxfcnnpsmc.com/">ilmxfcnnpsmc</a>, cdlgpnwrpbde, [link=http://sihcfvvdcyaq.com/]sihcfvvdcyaq[/link], http://lptaxtbiccwg.com/

#31 By joobKdZv (103.7.57.18|46.21.144.176) on 2013-02-05 00:58

ในหนังสือมีวิธีการทำเกมเฟลชมั้ยค่ะ

#30 By ออม (103.7.57.18|110.77.238.121) on 2013-02-04 13:18