Mondeemedia: สอน Flash บทเรียน 12: สร้าง Animation ภาพในอนาคตด้วย Flash

              มนต์ มีเดีย สวัสดีค่ะ บทเรียนวันนี้จะเป็นการอธิบาย
              วิธีการสร้าง Create Future Photo Animation คือ
              การนำภาพมาทำการเคลื่อนไหวให้ดูเหมือนภาพใน
              อนาคตจะใช้ Trick พิเศษกับการใช้คำสั่ง Mask
และไม่ต้องใช้คำสั่ง Action Script Code ค่ะ
              สำหรับในบทเรียนนี้และ Animation ภาพนี้ เรา
              สามารถใช้ได้กับทุก Website Bannerหรือสำหรับ
การนำเสนอเป็น Presentation และบทเรียนนี้จะ
              ได้เรียนรู้การ animate รูปภาพ การสร้าง Mask
              Layer วิธีการทำ Flash Filters บนรูปภาพ
             การใช้ Selection Tool โดยกด (V) สำหรับ
   ตัดชิ้นงานบางส่วนค่ะ
                    ถ้าพร้อมกันแล้วเราเริ่มกันได้เลยดีกว่านะคะ!!

ผลงานตัวอย่างค่ะ

ขั้นตอนที่ 1 : เตรียมภาพสำหรับใช้นำมาเป็น Background ที่เราต้องการหรือสามารถ Download ภาพเหมือนในตัวอย่างได้ ที่นี่

ขั้นตอนที่ 2 : เปิดโปรแกรม Flash จากนั้นกด (Ctrl+J) Document Properties และกำหนดค่าความกว้างและความสูงให้กับ Flash ของเรานะคะ กำหนด width = 450 px height = 315 px background = สีขาว frame rate = 38 fps แล้วคลิ๊ก Ok

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 ทำการเปลี่ยนชื่อเป็น Background

ขั้นตอนที่ 4 : คลิ๊ก File -> Import --> Import to stage เลือกภาพที่เราเตรียมไว้มาวางใน Library
จากนั้น bg1 มาวางบน Stage

จากนั้นกำหนดตำแหน่งให้ภาพนี้ด้วยการกด (K) Align Properties แล้วทำตามภาพประกอบค่ะ

ขั้นตอนที่ 5 : เลือกภาพบน Stage กด F8 (Convert to symbol) Convert ภาพเป็น movie clip ตั้งชื่อว่า photo_mc

ขั้นตอนที่ 6 : คลิ๊ก Frame 70 บน Layer1 กด F6

ขั้นตอนที่ 7 : กลับไปที่ Frame 1 ของ Layer 1 กด (V) Selection Tool และไปที่ Properties Panel (Ctrl+F3) ใต้ Stage เลือกที่ Tap Filter จากนั้นเลือกหาคำสั่ง Blur แล้วกำหนดค่าตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : คลิ๊กขวาบนพื้นสีเทาบน Timeline ระหว่าง Frame 1 กับ Frame 70 แล้วเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 9 : เลือก Frame 70 กด (Ctrl+C) Copy แล้วสร้าง Layer ใหม่เหนือ Layer Background ตั้งชื่อว่า Photo 1

ขั้นตอนที่ 10 : คลิ๊กเลือก Frame 1 บน Layer Photo1 จากนั้นกด (Ctrl+Shift+V) (Paste In Pace)

ขั้นตอนที่ 11 : คลิ๊ก Frame 70 บน Layer Photo1 กด F6

ขั้นตอนที่ 12 : สร้าง Layer ใหม่เหนือ Layer Photo1 และตั้งชื่อว่า Mask

ขั้นตอนที่ 13 : คลิ๊กเลือก Layer mask กด (R) Rectangle Tool จากนั้นวาดสี่เหลี่ยมลงไปทับภาพ
ดูตัวอย่างภาพประกอบค่ะ

ขั้นตอนที่ 14 : คลิ๊ก Frame 25 และ 45 และ 70 และกด F6

ขั้นตอนที่ 15 : คลิ๊กที่ Frame 45 ของ Layer mask แล้วกด (V) Selection Tool แล้วใช้เมาส์ลากไปบนเส้นตรงจากซ้ายไปขวา เพื่อทำ ลายเส้นให้กับภาพ แล้วกด Delete ที่คีย์บอร์ด

แล้วทำแบบเดิมที่ Frame ที่ 25 ด้วยค่ะ

ขั้นตอนที่ 16 : จากนั้นคลิ๊กวาบนพื้นสีเทา ระหว่าง Frame 1 กับ Frame 25 , Frame 25 กับ Frame 45 , Frame 45 กับ Frame 70 บน Timeline แล้วเลือกคำสั่ง Create Shape Tween