flash

Flash Animation : รถวิ่งในเมือง

posted on 29 Apr 2012 18:13 by gatkung in Art directory Cartoon

ตัวอย่างงานที่เสร็จแล้ว

สำหรับการทำ Animation จะรถวิ่ง คนวิ่ง หรือตัวอะไรวิ่งก็ตามนะครับ

หลายๆครั้งที่เรามักจะใช้การขยับฉาก เพื่อให้ภาพดูว่าเป็นรถวิ่งไปข้างหน้า

ส่วนตัวรถจริงๆน่ะไม่ได้ขยับไปไหนเลย

จากตัวอย่างที่เห็นคือขยับตัวตึกด้านหลังเป็น Loop เอาครับ

วิธีการทำก็คือ

1.เตรียมรูปจาก illustrator ให้เรียบร้อยก่อน

null

หลักของการทำ Animation เป็น Loop ก็คือ Frame แรกกับ Frame สุดท้ายต้องเหมือนกันครับ

ดังนั้นวิธีการทำตึกผมเลย copy  ตึกมาอีกชุดนึง เพื่อเอาไว้เลื่อนไปด้านขวาครับ

2.ทำตึกเลื่อนใน Flash

null

ภาพนี้คือ Frame แรกของตึกที่เรา import มาจาก Illustrator ครับ

หลังจากเราสร้าง Tween เสร็จแล้ว กำหนด KeyFrame สุดท้าย แล้วก็เลื่อนตึกเลยครับ

null

ภาพนี้คือ Frame สุดท้าย ของตึกครับ

ที่จำเป็นต้องมี KeyFrame ตรงกลางหลายๆอันเป็นเพราะว่า ถนนมีลักษณะโค้งครับ

ถ้าปรับขนาดและเลื่อนไปเฉยๆเลย ตึกจะขยับไม่รับกับส่วนโค้งของถนนครับ

ต่อมาคือวิธีทำเส้นบนถนนให้วิ่งครับ

อันนี้ผมใช้วิธี Frame by Frame เลย

1st Frame2nd Frame3rd Frame

ที่เหลือก็คือ ทำรถขยับขึ้นลงนิดหน่อยก็เสร็จแล้วครับ

edit @ 29 Apr 2012 18:15:25 by Akara_gat

edit @ 29 Apr 2012 18:16:18 by Akara_gat

edit @ 29 Apr 2012 18:16:58 by Akara_gat

Introduction to Flash Catalyst

posted on 28 May 2011 19:56 by gatkung
*เนื้อหาใน entry นี้มาจากความเข้าใจของผมเองล้วนๆ ถ้าผิดถูกยังไงก็ขออภัย และน้อมรับคำแนะนำทุกข้อครับ
 
Flash Catalyst คืออะไร?
Tool ที่ช่วยแปลงจาก ไฟล์กราฟฟิค(.ai หรือ .psd) กลายเป็น Component ต่างๆ(Button, Tab, Scrollbar, etc.)
ได้อย่างง่ายดาย ชี้ปุ่มเป็นปุ่ม ชี้ tab เป็น tab
 
ทำไมต้องใช้ Flash Catalyst?
ก่อนหน้าจะมี Flash Catalyst เวลาผมทำ Flash App หรือ Flash Game การที่จะสร้างปุ่มขึ้นมา 1 ปุ่มนั้น
ขั้นตอนที่ต้องคือ Import รูปปุ่มนั้นๆเข้าไปใน .fla สร้างมันเป็น Movieclip ถ้ามีการ Rollover แล้วต้อง ดีดเด้ง เปลี่ยนสี โฉบเฉี่ยวไฉไล ก็ต้องทำ animation ยืดๆีดัดๆมันบน timeline ก็ว่ากันไป เสร็จแล้วก็ ตั้งชื่อ KeyFrame ให้โปรแกรมเมอร์เข้าใจว่า เออ ไอ้นี่ถึงนี่ มันคือ ตอนธรรมดานะ ตอน Rolloverนะ เอาเม้าส์ออกแล้วให้มาหยุดตรงนี้นะ
ซึ่ง!! ต้องเสียเวลาทำความเข้าใจกับโปรแกรมเมอร์ระดับนึง เข้าใจตรงกันบ้าง ไม่ตรงกันบ้าง แต่ถ้าใช้ FC ก็ลืมเรื่องพวกนี้ไปได้เลย บอกมัน(ในที่นี้คือ FC)ไปเลย ไอ้นี่คือธรรมดา ไอ้นี่คือเอาเม้าส์ชี้ เอาเม้าส์ออก หรือ แบบนี้คือ Disable ที่กล่าวมาทั้งหมดนี้คือความสามารถพื้นฐานของ FC เฉยๆนะครับ ยังมีอีกหลายอย่างเลยที่ทำให้ เราสามารถทำงานได้เร็วมากขึ้นเยอะ
 
Sample กับ Flash Catalyst
1. ปุ่ม
1.1 Import File .ai เข้าไป
1.2 บอกมันว่าเป็นปุ่ม
 
1.3 Edit ในแต่ละ State ว่าจะเป็นหน้าตายังไง เช่นขนาดใหญ่ขึ้น
State ของ Button จะมี 4 อันคือ up(ปกติ), over(เอาเม้าส์ไปวาง), down(กดคลิก), disable
 
1.4 Edit Animation ในการเปลี่ยนจาก State นึง ไปอีก State นึง
 
2. Scrollbar
2.1 บอกมันไปว่าเป็น scrollbar เลือกแนวตั้งแนวนอนให้ถูกด้วยนะ
 
2.2 ส่วนสำคัญของการ ทำ Scrollbar คือ Part ต่างๆต้องครบ ขั้นตอนถัดมาเราจึงต้อง Edit Part มันก่อน
Scrollbar จะมีองค์ประกอบทั้งหมด 4 ส่วน คือ Thumb(ปุ่มตรงกลางที่ไว้ลากขึ้นลง), Track(ราง), ปุ่มขึ้น, ปุ่มลง
ซึ่ง2ส่วนแรกจำเป็นต้องมี
เท่านี้ก็เสร็จละครับ
 
ข้อเสียของ Flash Catalyst
เท่าที่ผมรู้สึกตอนนี้คือ มัน edit animation ระหว่าง state ได้ไม่มันส์เท่าไร ทำใน Flash จะคล่องและยืดหยุ่นกว่า
แต่ก็นะ ถ้าทำ Flash App ธรรมดา ไม่ได้มีอะไรพิสดารมาก เท่านี้ก็เพียงพอแล้ว