สอน Flash บทเรียน 4: สร้าง Banner นำเสนอภาพ 3 (Flash Photo Gallery)

สำหรับบทเรียนนี้ มนต์ มีเดีย ขอนำเสนอการสร้าง Banner นำเสนอภาพแบบไม่ต้องเขียน Action Script   และสำหรับบทเรียนจะได้เรียนรู้วิธีการ Import Picture เข้ามาใน Flash และวิธีการ Convert ภาพ เป็น Movie Clip  เรียนรู้การใช้ Blur Filter  ลองทำตามกันดูนะคะ  ก็เป็นอีกวิธีหนึ่งที่ง่ายๆ ไม่ยากอะไรเลยค่ะ








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

การบูรผลไม้

ภาพประกอบจาก www.mytinyshops.com

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash ขึ้นมา  กด (Ctrl+J) Document Properties กำหนดกว้างและสูงให้ Banner ของเราค่ะ  width = 300 px  height = 225 px   frame rate =30 fps background = สีขาว

ขั้นตอนที่ 2 :  สามารถ Download File ที่นี่ (ภาพเหมือนในตัวอย่างค่ะ) เพื่อความสะดวกและรวดเร็วในการเรียนค่ะ

ขั้นตอนที่ 3 : เลือก File --> Import --> Import to library

จากนั้นเลือกภาพ img1 ลากมาวางบน stage

ขั้นตอนที่ 4 : ภาพ img1 ถูกเลือกอยู่ที่ stage กด (Ctrl+K) และคลิ๊กกำหนดภาพ img1  เพื่อกำหนดตำแหน่งตามภาพค่ะ

ขั้นตอนที่ 5 :  กด F8 เพื่อ Convert ภาพเป็น Movie Clip  และตั้งชื่อว่า  image1

ขั้นตอนที่ 6 : คลิ๊ก Frame 10 ของ Layer 1 กด F6 แล้วคลิ๊กกลับไป  Frame 1  และ กด (Q) Free Transform และย่อภาพลงให้เล็กไปกลางจอ Stage

ขั้นตอนที่ 7 : ขณะนี้ภาพ image1 ยังคงถูกเลือกอยู่ กด (Ctrl + F3) Properties Panel คลิ๊กเลือก Filter แล้วคลิ๊กเลือกเครื่องหมาย + เลือกคำสั่ง Blur และกำหนดค่าความเบลอตามภาพ

ขั้นตอนที่ 8 :  คลิ๊กบน Frame 1 และ กด Ctrl + F3   ตรงเมนู Tween ให้เลือกคำสั่ง Motion

 

 จากนั้นคลิ๊กบน Frame 30 แล้วกด F6

ขั้นตอนที่ 9 :   คลิ๊ก Frame 45 และกด F6 จากนั้นกด (Q) Free Transform และย่อภาพให้เล็กลง เหมือนกับภาพที่เราทำไว้ในขั้นตอนที่ 6 ไงค่ะ

ขั้นตอนที่ 10 : คลิ๊ก Frame 30 และเลือกพื้นที่สีเทาคลิ๊กขวาเลือกคำสั่ง Create Motion Tween 

ขั้นตอนที่ 11 : เพิ่ม Layer ใหม่  คลิ๊ก Frame 30 แล้วกด F6 

จากนั้นเลือกภาพ img2 มาวางบน Stage แล้วทำตามขั้นตอนที่ 4 ( กำหนดตำแหน่งภาพ )

แล้วกด F8 Covert เป็น Movie Clip ตั้งชื่อ image2

ขั้นตอนที่ 12 :  คลิ๊ก Frame 40 กด F6

ขั้นตอนที่ 13 :  คลิ๊กที่ Frame 30 แล้วให้ทำตามขั้นตอน 6 และ 7 ค่ะ

ขั้นตอนที่ 14 :  จากนั้นให้คลิ๊กขวาบน Timeline ระหว่าง Frame 30 กับ Frame 40 แล้วเลือกคำสั่ง Create Motion Tween 

ขั้นตอนที่ 15 : จากนั้นคลิ๊ก Frame 60  กด F6 

ตอนนี้เราทำ animate ภาพเสร็จ 2 ภาพแล้วนะคะ   ให้ทำตามขั้นตอนกับภาพทั้งหมดที่เราเตรียมไว้ หลังจากเสร็จแล้วให้กด Ctrl + Enter เพื่อรัน Banner ของเราค่ะ  เพียงเท่านี้เราก็ได้ Banner อีก Style กับสินค้าสวยๆ ของเราแล้วนะคะ 

สามารถ Download File Master ที่นี่  เพื่อตรวจสอบความถูกต้องค่ะ

ขอให้มีความสุขกันถ้วนหน้าทุกท่านค่ะ

เรียบเรียงโดย