อนุบาลงานแฟลช

พอดีนั่งอ่านห้องแฟลชไปเรื่อยๆ ไปเจอจู๋นี้เข้า
http://www.f0nt.com/forum/index.php/topic,4636.0.html     
ก็เลยคิดถึงอดีต เมื่อครั้งยังไม่ได้ประสบพบเจอกับ เจ้าโปรแกรมนี้
เห็นงานพวกนี้ทีไรก็จะรู้สึก อู้วห์ อ้าห์ น่าตื่นเต้นทุกที 
จริงๆที่ตั้งกระจู๋นี้ เพียงเพราะมองเห็นตัวเอง  งงอะดิ  คือมองเห็นว่าตัวเองนั้น ก็มีความชอบพอ
กับ output ของเจ้าโปรแกรม แฟลชนี้ มาก่อนที่จะรู้จักโปรแกรมซะอีก   พอเห็นครั้งแรก ก็รู้สึกดี มองสบายตา
น่าตื่นเต้น และอยากทำได้บ้าง แต่ไอ้การที่จะทำได้นี่แหละปัญหา เพราะไม่รู้จะเริ่มตรงไหน
อยากได้ไอ้หมุนๆ วิ่งๆ ยืดๆหดๆ แต่ก็ไม่มีปัญญา ว่างั้นเถอะ  และเมื่อมีโอกาส ได้รู้มาบ้าง ก็เลยอยากจะให้
เพื่อนๆพี่ๆน้องๆลุงๆป้าๆที่ชอบพอแต่ไม่รู้จะเริ่มอย่างไร ได้มีโอกาสได้เริ่มบ้าง เอามันจาก output ง่ายๆ
มันนี่แหละไม่ต้องหวือหวาอะไร ถ้าเข้าไปในโรงเรียนสอนพวกนี้โดยตรง พื้นฐาน เขาก็คงไม่พ้นหน้าตาโปรแกรม
และหลักการที่พึงรู้ไว้ แต่ปัญหาผมอีกอย่างก็คือ ผมไม่มีความสามารถพอที่จะอธิบายทฤษฎีพวกนี้ได้ ไม่มีเลยจริงๆ T-T 
 ดังนั้นมาเริ่ม กัน ด้วยการหยิบยกเอา ชิ้นงานง่ายๆมาทำด้วยวิธีง่ายๆ ด้วยความมักง่ายๆ กันดีกว่า ครับ

 เอ......แล้วจะเริ่ม กันอย่างไรละเนี่ย... เอาเป็นว่าผมเอาตัวเอง เป็นที่ตั้งละกัน   มีอยู่ครั้งหนึ่ง ตอนสมัยเรียน 
ผมเข้าไปดูผลงานแฟลช ชิ้นหนึ่งในห้องอาจารย์ เป็นงานที่มารู้ภายหลังว่าใช้ เจ้าโปรแกรมแฟลชทำ(ครั้งแรกที่ได้ยินชื่อนี้)
เป็นการทำแอนิเมชันประกอบเพลง ทีเขาเรียกว่า ทำมิวสิควีดีโอ อะไรซักอย่างนี่แหละ มันเป็นผลงานที่ดูกระตุกๆมาก
ด้วยความ สงสัย  ก็ถามอาจารย์ไปว่า “เขาทำอย่างไร “   ก็ได้รับคำตอบว่า เขาใช้ แฟลช ทำ   
พอผมได้ยินก็งง ซิครับ อะไรวะ แฟลช  ?????   โอเคพล่ามมานานแล้วไม่รู้จะนำเข้าเรื่องอย่างไร 

เอาเป็นว่า มะ มะ มาเริ่มทำแฟลช ง่ายๆ กัน ดีกว่า เอาแบบง่ายๆเลยนะ แล้วไม่ต้องอายพี่ๆน้องๆที่ เขา advance กันแล้วนะ 
(เอาน่าต้องมีคนไม่รู้บ้างละน่า)

สรุปคือจุ๋นี้ อยากให้ ยกตัวอย่าง output ของแฟลช แบบง่ายๆมาแล้วมาบอกวิธีทำกันให้เป็นวิทยาทาน ซักหน่อย


เช่น คุณรู้จักการทำ motion tween มั้ย  อืม ก็ ถ้าง่ายๆก็ ทำให้ วัตถุเคลื่อนที่ไปมานั่นแหละ
 อะ อยากเห็นเหรอ ว่า มันเป็นอย่างไร    ก็นี่ไง


<a href="http://img2.f0nt.com/flash/467ce7b88bf2973ddb218729f96a5bec.swf" target="_blank">http://img2.f0nt.com/flash/467ce7b88bf2973ddb218729f96a5bec.swf</a>

เดี๋ยวมาบอกวิธีทำในแบบของผม.........

วิธีการทำจะ....... ยากไม่ยาก ก็ลองเปิดโปรแกรมกันก่อน ดีกว่า  ในที่นี้ ผมจะใช้ flash Cs 3 ทำนะ
 ด้วยเหตุผลที่ว่า  มันใหม่สุด *-*  ความจริงแล้ว งานนี้ ไม่จำเป็นว่า โปรแกรมจะเป็น เวอร์ชัน ไหน 
ขอให้มันมี area   timeline  แล้วก็  box tools ก็พอ แล้วววว    อะ อะ อย่าเพิ่ง งง area ที่ผมเรียกนี่
ไม่รู้ว่าคนอื่นเขาเรียกอย่างผมรึเปล่านะ 
 สรุป มันก็คือ ไอ้ พื้นที่  ทำงานสีขาว ที่พอเปิดโปรแกรม ปุ๊บ ! มันก็จะ เซต ขนาด มาให้เราแล้ว 
ประมาณ 550x400  แหมแถมเซต ความเร็วเป็นเฟรมต่อวินาทีมาให้ด้วยนะ 12 fps 
ก็คือ ไอ้เส้นสีแดง*วิ่งไป 12 เฟรมเท่ากับ 1 วินาที    ซึ่งไอ้เส้นสีแดงและเฟรมนี่มันก็อยู่ในส่วนที่เรียกว่า
 timeline นี่เอง ส่วน box tools นี่ก็คือกล่องเก็บเครื่องมือ ตรงตัว เป้ะ!  เอาเป็นว่า สามส่วนนี่ไปดูรูป ดีกว่า




พอรู้จักกับเจ้าแฟลช พอสมควรแล้ว คืออยากจะอธิบาย เครื่องมือเยอะกว่านี้หน่อยแต่อย่างที่บอก
 ผมมีปัญหาเรื่อง ทฤษฎีอยู่โขเลย ก็เลย เอาแค่คร่าวๆดีกว่า เดี๋ยว จะทำให้คนเริ่มใหม่ งงซะเปล่าๆ 
เอาเป็นว่า เรามาเปิดโปรแกรมกันดีกว่า

การเปิดโปรแกรมขั้นตอนก็ไม่ยากครับ  เอ่ออ...คงพอรู้กันแล้วใช่มั้ย ว่าต้องคลิกที่ ไอค่อนโปรแกรม
  พอเปิดขึ้นมาเราก็เริ่มสร้างเอกสารใหม่กันเลย ด้วยการ ไปที่ Bar menu ข้างบน  แล้วเลือก File > New 
ไม่ใช่ ไฟล์มากกว่านิว นะ แต่หมายความว่า คลิกเมนู  File แล้วก็ไปเลือก หัวข้อ New   



 พอเลือก เอกสารใหม่แล้ว มันจะขึ้นหน้าต่างให้เราเลือก ประเภทของเอกสาร นะครับ 
ให้เลือกไปที่  Flash File (Action Script 2.0) แต่สำหรับเวอร์ชัน 8 ประเภทเอกสารสูงสุดก็ คือ 2.0 นี่แหละ
 ถ้าใช้ Cs 3 ก็ต้องระวัง ถ้าเผลอไปเลือก 3.0 ในขณะที่ไม่รู้จัก as 3 นี่ งงตาย ตรงนี้ผมเคยโง่มาก่อน -*-




เมื่อเปิดมาแล้วหน้าจอก็ประมาณนี้   



ในการทำงานชิ้นนี้ เราใช้พื้นที่ไม่มาก ดังนั้น กำหนดขนาดของงานใหม่ซะเลย

รู้จัก เครื่องมือ และส่วนที่ต้องใช้ กันไปพอสมควร แล้วนะครับ  เราก็มาค่อยๆเริ่มทำ กันเลย
ก่อนอื่น ก็ วาดรูปวงกลมมารูปหนึ่ง นะครับ ไปที่กล่องเครื่องมือแล้วใช้เครื่องมือ
ที่ชื่อว่า Oval Tool นะครับ ไอ้สัญลักษณ์ขิง เอ้ย !! สัญลักษณ์ที่เป็นรูป วงกลม นั่นแหละครับ
แต่ปกติแล้วมันจะถูกเลือกไว้ให้เป็น Rectangle Tool หรือรูปสี่เหลี่ยม ครับ ให้คลิกที่มุมขวาสุดของสัญลักษณ์
แล้ว Sub Menu มันก็จะไหลออกมา   มี Tool ในประเภทเดียวกันให้เลือกอยู่หลายตัว ในที่นี้ให้เลือก  Oval Tool เน้อ..




อะฮะ นั่นแหละครับ เลือกแล้วนำมาทำเป็นวงกลม สีอะไรก็ได้  วางไว้ทางซ้าย




ไปที่ Timeline เฟรมที่1 เลเยอร์ที่1คลิกขวาเลือก Create Motion Tween



ต่อจากนั้นไปที่ Timeline เฟรมที่ 20 เลเยอร์ที่1 คลิกขวาเลือก Insert Keyframe  หรือ กด F6 ก็ได้



จากนั้นย้ายตำแหน่งของรูปวงกลม ให้ไปอยู่ในตำแหน่งขวาของ area




กลับไปที่ ส่วนของ Timeline เฟรมที่1 เลเยอร์ที่1คลิกขวาเลือก Copy Frames  (คือเราต้องการ copy เฟรมนี้)



แล้วไปที่ เฟรมที่ 20 40  คลิกขวาเลือก Paste Frame 


จะเห็นได้ว่า เฟรมที่ 2040 กับเฟรมที่1  ใน area มีการทำงานเหมือนกัน



แค่นี้ก็เสร็จ ในส่วนของการทำ motion tween แล้วครับ  ง่ายดีมั้ย  ต่อมามาลองเล่นในส่วนของ properties บ้าง  แต่เดี่ยว มาใหม่

โอ้ว จักรี มันยอดมาก เท่าที่จำความได้ตอนแรกๆยืมหนังสือรุ่นน้องมา

แล้วก็เปิดศึกษาเองทำได้แบบนิดหน่อยง่ายๆ ขอติวแฟลชด้วยคนนะเพราะตอนนี้ไม่ได้เล่นมานานแล้ว

ขอเรียนด้วยคน 

อู้วววว เยี่ยมจอร์จสุดๆ บวกเลยครับ

สำหรับคนอนุบาลเรื่องแฟลช เราเกิดมาเพื่อสิ่งนี้จริงๆ

 


มาดูส่วนของ Properties กันต่อ

ลองเลือกไปที่วงกลมใน area ดู ครับ แล้วสังเกตช่องpropertiesด้านล่าง ซึ่งมันจะบอกรายละเอียดของ
ออปเจ๊ก นั้นๆไว้ในที่นี้จะเห็นได้ว่า มันบอกชนิดของ ออปเจ๊กวงกลมไว้ว่า เป็น กราฟิก ขนาดกว้างยาว 76.5
อยู่ในตำแหน่ง x =446.3 ,y= 90.5  ฯลฯ



จากนั้น มาลองดู properties ของเฟรมบนtimelineบ้าง ก็เอาเมาส์ไปคลิกเลือกที่เฟรม(เฟรมไหนก็ได้ ในที่นี้ เลือกที่เฟรม1)
จะเห็นได้ว่า properties ด้านล่างจะเปลี่ยนไปเป็นรายละเอียดของเฟรมแล้ว




ที่นี้เรามาเล่นกับ Properties ของ เฟรมดู   คือเมื่อเราอยากให้การเคลื่อนที่ของวงกลม
เป็นไปอย่างมีจังหวะ ประมาณว่า ให้เริ่มช้า หยุดเร็วหรือเริ่มเร็ว หยุดช้า ก็ต้องมาดูที่ Ease ใน Properties นี่แหละครับ มาลองทำกันดู



อันดับแรก ก็คือเลือกเฟรมที่1-20 ด้วยการคลิกที่เฟรมที่1 หนึ่งครั้งแล้วกด shift ค้างไว้
จากนั้นไปคลิกเฟรมที่20 มันก็จะเลือกทั้งหมด 20 เฟรมดังรูป  ทีนี้เรามากำหนด Ease ให้กับการเครื่องไหวของวงกลมตั้งแต่เฟรมที่ 1
ถึงเฟรมที่ 20 กัน

โดยผมจะให้มันเคลื่อนไหวแบบช้าๆแล้วค่อยๆเร็วขึ้น  ผมก็ใส่ -100 ไปที่ช่อง Ease



ขั้นตอนต่อไปเลือกเฟรมที่21ถึงเฟรมที่40 ก็ใช้วิธีเดียวกันคือคลิกที่เฟรม21 หนึ่งครั้ง กด shift ค้างไว้ แล้วคลิกเฟรม40
แล้วไปที่ properties ในช่องEase เปลี่ยน ให้เป็น 100 ซะ เพื่อให้ วงกลมเคลื่อนที่จากเฟรมที่21ไปเฟรมที่40 แบบเร็วแล้วค่อยๆช้าลง



สรุปแบบชาวบ้านๆคือในช่อง Ease ใน Properties   ถ้าน้อยกว่า 0 ลงไป มันจะทำให้วัตถุเคลื่อนที่จากช้าไปเร็ว
 ส่วนมากกว่า 0ขึ้นมา ก็ตรงข้ามกันคือ จากเร็วไปช้า      …………………ช้าๆเร็วๆเร็วๆช้าๆ เออแหะ งงเหมือนกันเนอะ......

เอาละครับ ทีนี้ก็ลอง ทดสอบดูได้ ถ้ายังไม่export ก็ กด Ctrl+Alt  ดูก่อนได้เลยนะครับ แต่ถ้า Export ให้เป็น swf ขั้นตอนก็ดังนี้ ครับ


1.เลือก ที่เมนูบาร์ข้างบน  เลือกไปที่ File >>>Export >>> Export Movie


2.เลือก path (ที่เก็บไฟล์) แล้วก็ตั้งชื่อให้เรียบร้อย



3.พอกด save มันจะขึ้นมาให้เลือก เวอร์ชั่น แฟลชเพลเยอร์ อันนี้เลือก flash Player 8  
ไอ้ แอ็คชั่น สคริปเวอร์ชั่นอะไรนั่น ก็เลือก แค่ 2.0 พอ ไม่ต้องเลือก 3 นะ



แค่นี้ก็เสร็จแล้ว  เย้ๆ.........เป็นไงง่ายดีมั้ย  อันนี้เป็นบทเรียนแรกๆที่พอเปิดหนังสือปุ๊ปก็มีสอนเลยละมั้ง
ปกติผมเป็นคนไม่ค่อยซื้อหนังสืออ่านก็เลยไม่รุ้ว่าเขาสอนอะไรบ้างน่ะนะ แต่ อย่างที่บอกผมเอาตัวเองเป็นที่ตั้ง
ครั้งแรกที่ผมทำแฟลชผมก็เริ่มจากไอ้  โมชั่นทวีน นี่แหละ  แต่เท่าที่คุ้ยๆดูก็ มี ที่สอนทำลูกบอลกระเด้งๆอยู่เหมือนกันนะ
แต่ก็เอาเถอะ จุ๋นี้ ถึงแม้ จะ ดูเป็นเรื่องพื้นๆแต่ก็น่าจะมีประโยชน์บ้างละน่าสำหรับคนที่เริ่มต้น  เอาเป็นว่า  
ใครมีอะไรแบบง่ายๆๆๆ ที่ตาสีตาสายายมียายมา สามารถทำได้เองโดยไม่ต้องไปหาซื้อหนังสือมานั่งงง  
ก็ รบกวนมาแปะๆเอาไว้ให้ อ่าน บ้างนะครับ........

ว่าจะบวกเยอะๆ
แต่กดทีเดียวก็เลขสวยแล้วเลยบวกแค่ 1 พอ

ขออนุญาตเอากระทู้นี้ไปกระจายต่อนะครับ 

เจ๋งครับ เชฟ

ผมไม่ + นะครับ
เลข 333 สวยมาก

[มังกร]

จักรี 


เรารักนายนะ

[มังกร]

 :25:ขอบคุณค่ะพี่ัจักรี

[มังกร]

  เยี่ยมมากเลยน้องจักรี

 

                                                                                               

ขอเรียนด้วยคนครับ