งานสื่อการสอน Authorware

01/04/2014

แอนิเมชั่นคนไทยชนะเลิศการประกวดที่อเมริกา ?

10/04/2014

Flash – เปลี่ยนภาพพื้นหลังธรรมดาๆ ให้ดูมีชีวิต !!!

04/04/2014
empty image
empty image

ไม่ค่อยได้เขียนบล๊อกเลย ฮ่าๆๆ วันนี้เราจะมาทำภาพพื้นหลังนิ่งๆ ให้มันดูมีชีวิตกัน
ตัวอย่างแบบนี้…
ภาพเดิม

ขอบคุณภาพจาก…http://wallpaper.thaiware.com/wallpaper_download.php?id=463968

เมื่อใส่จิตวิญญาณเข้าไป

(ไม่สามารถเล่นไฟล์ .swf ได้ ให้โหลดไฟล์ไปเล่นเองที่เครื่องนะครับ โหลดไฟล์ด้านล่างสุด)

มาเริ่มทำกันเลย รูปอยู่ด้านล่าง อธิบายด้านบนนะ

1. import ภาพเข้ามา แล้ววางลงบน stage ภาพควรเลือกที่มีวัตถุอยู่แยกจากกันอย่างชัดเจน

2. ปรับขนาดให้พอดีกับ stage ตัวอย่างนี้ผมใช้ขนาดเดิมคือ 550*400

3. คลิกที่ภาพใน stage นะ ไปที่แถบเมนูเลือก Modifly > Break Apart หรือกด [Ctrl+B] จะให้ภาพแตกกลายเป็นการ Fill ด้วยภาพ ซึ่งจะทำให้เลือกแก้ไขส่วนต่างๆ ได้
(อีกวิธีหนึ่งคือ Trace Bitmap แต่มันเปลืองทรัพยากร เนื่องจากภาพจะกลายเป็น Vector และภาพก็จะไม่เหมือนต้นฉบับด้วย)

4. เลือกส่วนของก้อนเมฆ (จะทำให้เมฆเคลื่อนไหว) จากนั้น Convert to Symbol [F8] – ดับเบิ้ลคลิกเข้ามาหน้าแก้ไข คลิกเลือกเมฆแล้ว [Crtl+C] แล้ว [Ctrl+Shift+C] เพื่อวางไว้ที่เดิม แล้วกด Shift+ลูกศรขวา เพื่อเลื่อนเมฆไปทางขวา
– เลือกทั้งหมดแล้วแปลงเป็น symbol อีกครั้ง

5. มาถึงขั้นตอนการทำแอนิเมชั่น
5.1 กำหนดคีย์เฟรมที่เฟรมที่ 2 (ฮะ เมฆหรือจรวด -..-) ย้ำกำหนดที่เฟรมที่ 2 ก่อน
5.2 เลื่อนเมฆขากขวามาซ้าย ลองใช้เมาส์เลื่อนหัวอ่าน ระหว่างเฟรมที่ 1 กับ 2 ดู ให้เมฆมันทับกันพอดี คือเลื่อนดูแล้วมันไม่เห็นความต่าง
แต่อีกแบบนึงที่จะเนียนกว่าคือ ที่เฟรมที่ 2 เมฆในตำแหน่งในแนวนอน (X) ต้องอยู่เกือบเท่าเฟรมที่ 1 อาจจะห่างกันซัก 1 px อะไรงี้ ฮ่าๆ ใครจะไปมองทัน
จะใช้แบบข้างบนคือเท่ากันเป๊ะเลยก็ได้ ตามนุษย์ก็มองไม่ทัน ดูไม่ออกหรอก

5.3 หลังจากเรียนร้อยแล้วให้ลากเฟรมที่ 2 ไปไว้ไกลๆเลย ซัก 480 (20 วินาที) ขึ้นอยู่กับความเร็วที่เราต้องการ ขนาด 480 เมฆมันยังเคลื่อนเร็วเลย ให้อยากให้ช้าๆ ก็ลากไปยาวๆ
– Create Classic Tween จากนั้นลอง Test Movie ดูก็จะได้แล้ว กับพื้นหลังที่มีเมฆลอยเอื่อยๆ

ต่อไปจะเพิ่มอะไรดี ทำไก่ล่ะกัน ให้มันบินไปบินมา (ไก่บ้านแกบินไปมาหรอ ? ในภาพมันอาจจะไม่ใช่ไก่ก็ได้หนิ ฮ่าๆ)

6. ใช้ Lasso Tool [L] ตัดบริเวณรอบๆ ไก่ แล้วกด [Ctrl+X] ตัดมันออกมา

6.1 สร้างเลเยอร์ใหม่ขึ้นมา แล้วกด Ctrl+Shift+V เพื่อวางไกไว้ตำแหน่งเดิม ลองดูภาพซิ ภาพเหมือนเดิมทุกประการ

6.2 ใช้ Lasso Tool [L] อีกแล้วไปเลือกที่ Magic Wand แล้วไปคลิกบริเวณด้านนอกของตัวไก่ พื้นที่ที่เป็นสีส้มๆ เหลืองๆ แล้วลบออก (สามารถตั้งค่าความละเอียดได้โดยคลิกที่ wand setting แล้วปรับ Threshold ให้สูงๆ ส่วน Smoothing: ก็แล้วแต่ )

6.3 Convert to Symbol แปลงไก่เป็น Symbol ในภาพผมใช้เป็น Graphic เพราะผมจะไม่ไปทำให้มันเคลื่อนไหวภายในตัวมัน ถ้าใครอยากให้มันขยับอีก ก็เลือกเป็น Movie Clip ก็ได้

6.4 ให้ไก่มันแค่โดดขึ้นๆ ลงๆ แค่นี้ละกัน ฮ่าๆๆ
ต้องนี้ก็น่าจะรู้กันแล้วนะ เฟรมแรกอยู่ล่าง เฟรมต่อไปอยู่บน เฟรมสุดท้ายลงมาที่เดิม

จากนั้นก็ทำกับนกอีกตัว เหมือนขั้นตอนที่ 7

ได้แล้ว นกน้อยหัดบิน (เอ๊ะ ตกลงนกหรือไก่) ต่อไป ตรงไหนดี ตรงสะพานละกัน หัวสะพานอ่ะ ทำให้มันกระพริบๆๆ

7. ตัดออกมาดังรูป แล้วแปลงเป็น Symbol

8.1 ทำให้มันดูเหมือเนการกระพริบดังรูป หรือใครจะลบออกไปเลยก็ได้ แล้ววาดขึ้นมาใหม่

เสร็จละ ต่อไป… ควันที่ปล่องไฟละกัน

9. ติดมันออกมาแล้วแปลงเป็น symbol

9.1  ใช้ Lasso Tool [L] ตัดพื้นข้างนอกออก

9.2 ออกมาด้านนอกที่ BG ไปที่เลเยอร์ควันที่เราตัดเมื่อกี้นี้ ย่อมันลงให้เล็กๆ

9.2 ในตัวอย่างที่ผมทำนะ
เฟรมที่ 1 – ลบภาพทิ้งไป
เฟรมที่ 5 – ขนาดเล็ดสุด
จากนั้นค่อยๆ ขยายไปเรื่อยๆ ทุกๆ 5 เฟรม จนไปถึงเฟรมที่ 65 จะมีขนาดใหญ่สุด แล้วไปกำหนดคีย์เฟรมที่ 80 ปรับ Alpha เป็น 0 แล้ว Create Classic Tween ก็เสร็จเรียบร้อย

ต่อไป…. ทำให้ต้นไม้ ดอกไม้ต่างๆ เคลื่อนไหว ณ ตรงนี้ ยุ่งยากพอสมควร

10.  copy พื้นหลัง (Layer :bg) ไปวางไว้ในเลเยอร์ใหม่ โดยผมตั้งชื่อว่า bg_tmp กด Ctrl+Shift+V วางแล้วล๊อกเลเยอร์อื่นๆ ให้หมด

10.1 ตัดออกดังภาพ แล้วแปลงเป็น Symbol แบบ Movie Clip  แล้วใช้ Lasso Tool [L] ตัดพื้นหลัง และบริเวณสีเขียวๆ และส่วนเกินอื่นๆ ออก จากนั้นก็ขยายพื้นที่เฉพาะส่วนที่เป็นลำต้นให้มันสูงกว่าเดิมเล็กน้อย

10.2 ในเลเยอร์ fw1 นี้เลือกทั้งหมดแล้วแปลงเป็น symbol แบบ Graphic
จากนั้นก็ทำการใส่แอนิเมชั่นเข้าไป ผมแค่ให้มันโยกไปโยกมาๆ แค่นี้แหละ

ต่อไปทำกับต้นอื่นๆ หรือจะไม่ทำก็ได้นะ แค่นี้ก็พอดีแล้วแหละ

 

10.3 ต้นข้างๆ ซึ่งอยู่ถัดมา
– เลือก

– ลบขอบนอกออก แล้วใส่ Classic Tween

– ทำเหมือนเดิมกับดอกที่อยู่ถัดมา (ผมทำกลับกันอ่ะ -..-)

11. ต่อไปดอกไม้ที่อยู่ถัดมา

– และถัดมา

12. ดอกไม้ซึ่งอยู่ถัดมา ผมตัดออกไปเลย แล้วเอาดอกไม้ในข้อ 12 มาใส่แทน
– ใช้ Lasso Tool [L] ลากครอบ แล้วลบลิ้ง

– แล้วเอาดอกไม้ในข้อ 11 มาใส่แทน (ก็ขี้เกียจทำใหม่ไง ฮ่าๆ)

13. ต้นไม้ข้างๆ บ้าน
– ครอบแล้วลบทิ้ง

– แปลงเป็น symbol แล้วก็ใส่ Classic Tween

 

14. ดอกไม้ริมรัว สุดขอบขวา (หมดซักที -..-)
– ครอบแล้วลบทิ้ง

– แปลงเป็น symbol แล้วก็ใส่ Classic Tween เหมือนเคย

 

15. สายน้ำหลั่งไหล (ยังไม่หมดอีกเรอะ !!! )
– ตัดส่วนที่เป็นขีดๆ ออก แล้วก๊อปปี้น้ำส่วนอื่นๆ มาแปะๆ ไม่ต้องเนียนก็ได้ ทำในเลเยอร์ใหม่นะ
คือถ้าได้แบบรูปด้านล่างแล้วก็ Ctrl+X ออกไปใส่ในเลเยอร์ใหม่

– แล้วก็วาดเส้นๆ แสงๆ ให้ดูเหมือนน้ำมันไหล ผมก็ละเลงมั่วๆ ไป ฮ่าๆๆ

 

เรียบร้อย พอแล้วมั้ง….โอเค พอและ ขี้เกียจแล้ว ฮ่าๆๆ ต่อไปจะถึงขั้นตอนการเก็บรายละเอียด

16. เอาพื้นหลังขึ้นมา แล้วบังต้นไม้ต่างๆ ไว้
– ลบภาพในเลเยอร์ bg_tmp ทิ้งไป จากนั้น copy ภาพในเลเยอร์ bg มาวางในเลเยอร์ bg_tmp ใหม่
– ซ่อนเลเยอร์อื่นๆ ทั้งหมด โดยกด Alt ค้างไว้แล้วไปกดแถวที่เป็นลูกตา ในเลเยอร์ bg_tmp ซึ่งจะเป็นการซ่อนทั้งหมดยกเว้นเลเยอร์ที่เลือก
16.1 เลือกส่วนที่เป็นต้นไม้ดอกไม้แล้วลบทิ้งไปเลย

16.2 เมื่อตัดออกหมดแล้วก็จะได้ภาพพื้นหลังที่เว้าๆ แหว่งๆ แบบภาพด้านล่างนี้แหละ ฮ่าๆๆ

– เนื่องจากผมจะใช้สีพื้นหลังเดิมจึงดูดสีไว้ก่อน

16.3 ลบเลเยอร์ bg ทิ้งไปเลย เหลือแต่ bg_tmp จะเปลี่ยนชื่อเป็น bg ก็ได้ (ที่สร้างมา 2 เลเยอร์เพื่อต้องการสำรองไว้ก่อนเฉยๆ)

– ลบพื้นหลังเดิมออกไปให้หมดด้วย Lasso Tool + Magic Wand ก็จะได้แบบนี้

16.4 วาดรูปสี่เหลี่ยมขึ้นมาใหม่ อยากได้พื้นหลังสีอะไรก็แล้วแต่เลยตรงนี้ ถ้าเปลี่ยนสีตรงนี้ อย่าลืมไปเปลี่ยนสีแถบเมฆด้วย ฮ่าๆๆ ผมใช้สีเดิม

16.5 เสร็จแล้วก็เปิดโชว์เลเยอร์ให้หมดแล้วจัดตำแหน่งเลเยอร์ ก็เสร็จเรียบร้อยจริงๆ ซะที (กว่าจะเสร็จ ปาไปครึ่งวัน ฮ่าๆๆ)
ใครจะเพิ่มอะไรก็ตามสบายเลย จะเพิ่มนกบิน เครื่องบินอะไรก็ว่าไป

 

รูปสุดท้ายเป็นลำดับเลเยอร์ทั้งหมดและ Symbol ทั้งหมดที่ใช้

Note :
ถ้าอ่านที่ผมเขียนไว้ บางคนอาจจะสับสน บางครั้งก็แปลงเป็น Symbol แบบ Movie Clip บางครั้งก็ Graphic เหตุผลก็คือ ถ้าเราอยากให้มีการเคลื่อนไหวของตัวเองในวัตถุชิ้นนั้นๆ ก็แปลงเป็น Movie Clip ถ้าจะไม่ทำการเคลื่อนไหวก็แปลงเป็น Graphic แต่ทั้งนี้ทั้งนั้น สามารถเปลี่ยนคุณสมบัติของ Symbol ได้ตลอดเวลา

Download Source File

เอิ่ม…ทำใน Photoshop มันจะง่ายกว่าป่ะ ฮ่าๆๆ ไม่เป็นไร ให้รูปไว้ว่า Flash ก็ทำได้ สำหรับวันนี้ บ๊ายบาย Zzz