ผลงานตัวอย่างค่ะ
ภาพประกอบจาก www.mytinyshops.com
มาเริ่มกันเลยดีกว่าค่ะ ^O^
ขั้นตอนที่ 1: เตรียมภาพตามขนาดที่เราต้องการจะนำไปใช้ใน Website นะคะ หรือสามารถ Download File ที่เหมือนใน Blog นี้ได้จาก ที่นี่ เพื่อความรวดเร็วในการเรียนค่ะ
ขั้นตอนที่ 2: เปิดโปรแกรม Flash ขึ้นมา กด (Ctrl+J) Document Properties กำหนดกว้างและสูงให้ Banner ของเราค่ะ width = 600 px height = 90 px frame rate =20 fps background = สีเหลือง
ขั้นตอนที่ 3 : เลือก File --> Import --> Import to library เลือกภาพที่เรา Save ไว้ โดยการกด Ctrl+Click Mouse เลือกภาพทั้งหมดให้เข้ามาที่ Library
ขั้นตอนที่ 4 : เลือกภาพ img1 มาวางบน Stage
ขั้นตอนที่ 5 : กด F8 เพื่อ Convert ภาพเป็น Movie Clip ตั้งชื่อว่า image1
ขั้นตอนที่ 6 : กำหนดตำแหน่งภาพให้อยู่ตรงกลางของ Stage โดยกด Ctrl+K คำสั่ง Align แล้วกำหนดตามภาพประกอบเลยค่ะ
ขั้นตอนที่ 7 : ดับเบิ้ลคลิ๊ก Layer 1 เพื่อเปลี่ยนชื่อเป็น image1
ขั้นตอนที่ 8 : คลิ๊ก Frame 20 ของ Layer image1 กด F5
ขั้นตอนที่ 9 : เพิ่ม Layer ใหม่บน Layer image1 แล้วตั้งชื่อว่า mask
ขั้นตอนที่ 10 : กด (R) Rectangle Tool สร้างสี่เหลี่ยมขนาด กว้าง 600px สูง 2 px ไม่มีขอบ เลือกสีอะไรก็ได้นะคะตามใจชอบแต่ในตัวอย่างเลือกสีขาวค่ะ วาดไปตรงกลางของภาพนะคะ ซึ่งการกำหนดคำสั่งสี่เหลี่ยมดูได้จากภาพประกอบ แล้วในส่วนของการจัดกึ่งกลางของภาพสามารถทำตามขั้นตอนที่ 6 ได้ค่ะ
ขั้นตอนที่ 11 : กด F8 เพื่อ Convert สี่เหลี่ยมที่เราสร้างให้เป็น Movie Clip และตั้งชื่อว่า retangle1_mc
ขั้นตอนที่ 12 : คลิ๊ก Frameที่ 20 ของ Layer mask กด F6
ขั้นตอนที่ 13 : คลิ๊กเลือกที่สี่เหลี่ยม กด (Q) Free Transform Tool จากนั้นค่อยๆ ขยายสี่เหลี่ยมโดยการคลิกที่ปุ่มสี่ดำตรงกลางของสี่เหลี่ยมลากให้สี่เหลี่ยมมีขนาดใหญ่เต็มของภาพค่ะ
ขั้นตอนที่ 14 : กลับไป Frame 1 ของ Layer mask กด Ctrl+F3 Properties Panel ที่เมนู Tween ให้เลือกคำสั่ง Motion และเมนู Ease ให้พิมพ์ -100 ลงไปค่ะ
ขั้นตอนที่ 15 : เลือก Layer mask แล้วคลิ๊กขวาเลือกคำสั่ง mask
ขั้นตอนที่ 16 : กลับมาที่ Layer image1 ก่อนนะคะ คลิ๊กที่ Frame 45 แล้วกด F5 อีกครั้งค่ะ เพื่อเลื่อนเวลาของ Timeline ให้แสดงนานขึ้นค่ะ
ขั้นตอนที่ 17 : สร้าง Layer ใหม่เหนือ Layer mask ตั้งชื่อว่า image2
ขั้นตอนที่ 18 : เลือก Frame 46 กด F6 เลือกภาพ img2 จาก Library มาวางบน Stage
ขั้นตอนที่ 19 : กด F8 เพื่อ Convert เป็น Movie Clip ตั้งชื่อ image2
ขั้นตอนที่ 20 : เลือก Frame 60 กด F5
ขั้นตอนที่ 21 : เพิ่ม Layer image2 ตั้งชื่อ mask เลือก Frame 45 กด F6
ขั้นตอนที่ 22 : จากนั้นให้ทำตามขั้นตอนที่ 10-16 ค่ะ เพียงแต่เปลี่ยนชื่อ เปลี่ยน Frame ให้เหมาะสมนะคะ
ขั้นตอนที่ 23 : ขณะนี้เราได้ทำ Animate 2 ภาพเรียบร้อยแล้ว ให้ทำต่อไปจนครบทุกภาพที่เราเตรียมไว้ตามขั้นตอนทั้งหมดนะคะ
ขั้นตอนที่ 24 : กด Ctrl + Enter เพื่อรันดู Banner Presentation สวยๆ ของเราค่ะ
เท่านี้ก็เรียบร้อยแล้วค่ะ ขอให้มีความสุขกันมากๆ นะคะ
เรียบเรียงโดย
