แปลความหมายเพลง Olivia Ong – A Love Theme

20/11/2013

บันทึกการทำ CITEC Pass Level X2

28/12/2013

Flash – Happy Christmas Animation

25/12/2013
empty image
empty image

       เนื่องในวันนี้เป็นวันคริสต์มาส มันก็นึกถึง หิมะตก ซานตาคลอส … ลองมาทำแอนิเมชั่นกันซะหน่อย
มาเริ่มกันเลย วาดอะไรก่อนดี…
ผมก็ไม่ได้เรียงอ่านะ คิดอะไรได้ก็วาดเลย ฮ่าๆ
ย้ำว่าทุกชิ้นที่วาดต้องเป็น Symbol โดย New Symbol ก่อนวาด

1. ทำฉากกั้น

– อันนี้ไม่ต้องเป็น Symbol ก็ได้นะ วาดใน Scene1 เลย
– เลเยอร์นี้ต้องอยู่บนสุด
– กั้นไว้เพื่อ….ปิดบังขยะหรือส่วนเกิน ที่อยู่ข้างๆฉาก ฮ่าๆ คือแทนที่จะมองเห็นภาพที่เราวาดเกินๆ กับขยะที่กองไว้ ก็เห็นเป็นฉากดำๆ แทน

2. ฉากภูเขา
– วาดภูเขาโดยใช้ Line Tool แล้วดัด หรือจะใช้ Pen Tool ก็ได้ แล้วแต่ถนัด วาดให้มันโค้งก็พอ
– ในที่นี้ผมแบ่งเป็น 2 เลเยอร์ คือเขาใหญ่กับเนินเขา

– จากนั้นก็ลงสี สามารถใช้ Gradient Transform Tool ปรับการไล่สี
– ทำไมสีมันไม่สวยเลยหง่ะ ฮ่าๆ (ตาบอดสี)

3. ฉากท้องฟ้า
– วาดแล้วไล่สี เอิ่ม….

4. เอาท้องฟ้ามาใส่ใน Scene

5. เอาภูเขามาใส่ใน Scene

พักไว้ก่อน ต่อไปมาวาดส่วนประกอบอื่นๆ ….
6. ต้นคริสต์มาส
– ก็วาดครึ่งเดียวก่อน จากนั้นค่อย copy ไปอีกข้างก็ได้
– แล้วดัดให้โค้งนิดๆ หน่อยๆ แล้วลงสี

7. ดวงจันทร์
– วาดวงกลม 2 วง แล้วเอามาวางทับกัน

แสงสว่างของดวงจันทร์

– Symbol วงกลมสีอะไรก็ได้
– ลากใส่ Scene1 แล้วใส่ Filter : Drop Shadow ตั้งค่าตามภาพเลย

8. แสงดาว
– ใช้ PolyStar Tool วาดดาว 4 แฉก
– วาดเสร็จ copy แล้ว Shift+V เพื่อวางในตำแหน่งเดิม
– กด [Q] หมุน แล้วย่อขนาด ก็จะกลายเป็น 8 แฉก
– ให้ Classic Tween ทำย่อและขยาย (เฟรมแรกภาพเล็ก เฟรมสุดท้ายขยายให้ภาพใหญ่ขึ้น แล้ว Create Classic Tween)

ให้ได้ประมาณนี้

9. เกล็ดหิมะ
– เริ่มแรกผมวาดวงกลม จากนั้นก็แบ่งเป็น 8 ส่วนเท่าๆ กัน
– จากนั้นย่อขอบหรือเส้นรอบวงมาข้างใน
– ลงมือวาดตามสบาย โดยวาดแค่เส้น หรือเสี้ยวเดียว จากนั้นค่อย copy แล้วหมุน
เดี๋ยวทำวิธีวาดเกล็ดหิมะเพิ่มเติมดีกว่า…

9. ซานตาคลอส 
– คือจะเอาแค่เงาอ่ะ จะทำแค่สไลด์อยู่บนภูเขา
– ผมเลยวาดแบบชุ่ยๆ เอาให้ดูเหมนือลุงแกนั่งรถเลื่อนก็พอ ฮ่าๆ

10. ตุ๊กตาหิมะ

– วาดวงกลม 3 ลูก จากนั้นทำการจัดกลุ่มโดยหลังวาด 1 ลูกเสร็จก็กด [Ctrl+G] หรือจะวาดให้เป็น Drawing Object ก็ได้

– ทีนี้ผมจะทำให้แขนขยับขึ้นลงด้วย
– สร้างมือไปที่เฟรม 48 แล้วใส่เฟรม [F5] 
– ไปที่เฟรมที่ 24 แล้วใส่คีย์เฟรม [F6] แล้วหมุนองศาแขนขึ้นทั้ง 2 ข้าง
– ไปที่เฟรมที่ 48 แล้วใส่คีย์เฟรม แล้วหมุนแขนลงทั้งสองข้างให้เรากับเฟรมแรก วิธีที่จะให้มันเท่ากับเฟรมแรกก็คือ… Copy มาเลย ฮ่าๆ
– จากนั้น Create Classic Tween แขนมันก็จะขยับขึ้นลง

11. จับทุกอย่างมารวมกัน ฝรั่งน่าจะเรียกว่า Composite นะ ไม่รู้เรียกตอนนี้ได้รึยัง ฮ่าๆ

– ต้นไม้ผมใช้ Color Effect : Tint แล้วเลือกสีขาว (ตรงนี้อยู่ในแถบ Properties นะ)

จับทุกอย่างใส่ในฉาก

เปลี่ยนสีขอบของภูเขาซะหน่อย
เปลี่ยนสีดวงจันทร์กับใส่ดาวไปซะหน่อย…

12. ซานต้าสไลด์ลงเขา

– ที่เฟรมแรก ลากซานต้าออกไปนอกขอบ
– ไปที่เฟรม 120 แล้วใส่เฟรม [F5] (จะใส่มาหมดเลยทุกเลเยอร์ก็ได้ ในที่นี้ใส่แค่ภูเขากับซานต้าก่อน)

– ทำ Motion Guide แล้ววาดเส้นไกด์ตามแนวภูเขา เพิ่มเติมเรื่อง Motion Guide…

– ใส่ค่า ease ตามภาพ คือช้าแล้วค่อยๆ เร็วขึ้น

ก็จะได้ลุงซานต้าตกเขา

13. ทำหิมะตก

จริงๆ ถ้าใส่สคริปต์ไปเลยก็น่าจะง่ายกว่า แต่ลองทำหิมะตกเองละกัน ใครอยากได้สคริปต์ก็หาโหลดได้ไม่อยาก มีคนเขียนไว้เยอะเยะ

– สร้าง Symbol เพื่อใส่หิมะตก จากนั้นลากใส่ Scene1 จากนั้นดับเบิ้ลคลิก เพื่อเข้าสู่หน้าแก้ไข Symbol ซึ่งถ้าทำแบบนี้ มันจะทำให้วาด หรือออกแบบอะไรได้ง่าย เพราะเราจะมองเห็น Scene1 ไปด้วย คือมองเห็นว่ามันจะออกมายังไง ขนาดเท่าไหร่ ไรงี้

– สร้างเลเยอร์ 6 เลเยอร์แล้ววาดเส้นไกด์ เส้นละ 1 เลเยอร์นะเฟ้ย

– สร้างเลเยอร์ขึ้นมาใหม่อีก 6 เลเยอร์แล้วเอา เกร็ดหิมะมาใส่

– เปลี่ยนเลเยอร์ที่วาดเส้นให้เป็น ไกด์ แล้วลากเลเยอร์ที่เป็นเกร็ดหิมะมาอยู่ใต้

– ใส่เฟรมและคีย์เฟรมดังรูป (ด้านล่าง)
– ในเฟรมที่ 240 ลากเกร็ดหิมะมาด้านล่าง โดยวางทับเส้นไกด์
(จะใส่เฟรมที่เท่าไหร่ก็แล้วแต่ ผมใส่ 240 คือหิมะตก 10 วิถึงพื้น)

– Create Classic Tween ก็จะได้หิมะตกตามเส้นที่เราวาด

นำหิมะมาใส่ใน Scene

(ตรงนี้แนะนำเลือกชนิด symbol เป็น Graphic ก็ได้ ตอนแรกเราสร้างเป็น movie clip ใช่มะ แต่สามารถเปลี่ยนได้ตรง properties ซึ่งมันจะทำให้เราดูความเปลี่ยนแปลงได้เลยในโปรแกรม โดยไม่ต้อง test movie)

– สร้างเลเยอร์ใหม่ขึ้นมาแล้ว Symbol หิมะตกมาใส่
– พอเล่นไปซักพัก ก็สร้างเลเยอร์ใหม่อีก แล้วลากหิมะมาใส่อีก

– พอเล่นไปซักพักก็ต้องสร้างเลเยอร์ใหม่

– สร้างใหม่อีกเหมือนเดิม รวมแล้วจะมีเลเยอร์หิมะตก 4 เลเยอร์

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

เสร็จแล้วหล่ะม้าง.. ตรวจดูความเรียบร้อย ปรับแต่ง ใส่แสงสีอะไรก็ใส่ไป แล้ว test movie
ตัวอย่างก็ประมาณนี้….

โหลดไฟล์
ดูตัวอย่าง แบบใหญ่

รู้สึกมันจะใช้ cpu ในการดูเยอะไปนะ -..- Zzz