สอน Flash บทเรียน 2: สอนสร้าง Banner นำเสนอภาพ 1 Presentation Banner

สวัสดีค่ะ สำหรับวันนี้ มนต์ มีเดีย ขอแนะนำการทำ Banner แบบง่ายๆ ในโปรแกรม Flash ใครๆ ที่อยากจะทำ Banner นำเสนอภาพไปวางบน Website แต่ไม่รู้จะทำหรือเริ่มต้นอย่างไร บทเรียนนี้สามารถช่วยคุณได้นะคะ มาเริ่มกันเลยดีกว่าค่ะ...










ตัวอย่าง Flash Banner ที่สำเร็จแล้ว (ขออนุญาติใช้ภาพสินค้าของตัวเองนะคะ อิอิ. ทำเองกันกะมือโปรโมทนิสสหนึ่งค่ะ)

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

ขั้นตอนที่ 1:  ก่อนอื่นเลยก็ต้องเตรียมภาพสำหรับที่จะทำ Banner กันก่อนนะคะ  จะใช้ Size อะไรก็ปรับตามความเหมาะสมของขนาด Banner ที่จะใช้ได้ค่ะ  หรือถ้าความรวดเร็วในการทดลองเรียนบทเรียนนี้ ก็ Download ที่นี่ ได้เลยค่ะ  (ภาพเหมือนในตัวอย่างนะคะ)

ขั้นตอนที่ 2:  ต้องเปิดโปรแกรม Flash ขึ้นมาก่อนนะคะ  จากนั้นกด Ctrl + J (Document Properties) เพื่อกำหนดความกว้างและความสูงของ Banner ของเรานะคะ   กว้าง = 240 px  สูง = 361 px  Frame rate = 32 Backgroud color = สีขาว  (ตามรูปเลยค่ะ)

ขั้นตอนที่ 3: เลือก File --> Import --> Import to Library (เป็นการเลือกภาพเข้ามาใน Library) ให้เลือกภาพที่จาก file ที่เราเตรียมไว้หรือที่ Download มานะคะ (img1,img2,...) แล้วกด OK

ขั้นตอนที่ 4:  กด (V) Selection Tool และลากภาพที่ 1 จาก Library ภาพ img1 มาวางบน Stage

 

ขั้นตอนที่ 5:  ขณะภาพ img1 ยังคงถูกเลือกหรือ Select อยู่ ให้กด Ctrl+K และทำตามขั้นตอนดังนี้

                      1. คลิ๊กที่  Align/Distribute ให้เปิดทำงาน

                      2. คลิ๊กที่ Align/horizontal Center ให้เปิดทำงาน

                      3. คลิ๊กที่  Align/Vertical  ให้เปิดทำงาน 

ดูตามภาพประกอบได้ค่ะ

ขั้นตอนที่ 6:  ภาพที่ 1 ก็ยังคงถูกเลือกอยู่  กด F8 (Covert to Symbol)  เพื่อเปลี่ยนภาพให้เป็น Movie Clip และตั้งชื่อ Movie Clip ว่า Photo1_mc

ขั้นตอนที่ 7:  ดับเบิ้ลคลิ๊กเปลี่ยนชื่อที่ Layer 1 เป็น image1

ขั้นตอนที่ 8: คลิ๊ก Frame 40  ของ Layer image 1 กด  F6

ขั้นตอนที่ 9:  สร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า image2

ขั้นตอนที่ 10: คลิ๊กเลือก Frame 20 ของ Layer image2 จากนั้นกด F6 แล้วเลือกภาพ img2 จาก Library มาวางที่ Stage แล้วให้ทำตามขั้นตอนที่ 5 และ 6

ขั้นตอนที่ 11: คลิ๊ก Frame 40,80 แล้วกด F6 ของ Layer image2  แล้วให้กลับไปคลิ๊กที่ Frame 20 กด (V) Selection Tool แล้วคลิ๊ก 1 ครั้งที่ภาพ image2 ที่ Stage หลังจากนั้นกด (Ctrl+F3) Properties Panel ใต้ Stage ด้านขวาจะเห็น Color Menu  ให้เลือกคำสั่ง Alpha และกำหนด 0%

ขั้นตอนที่ 12: จากนั้นคลิกขวาบริเวณไหนก็ได้บนพื้นเทาระหว่าง Frame ที่ 20 และ 40 บน Time line และเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 13: สร้าง Layer ใหม่ เหนือ Layer image 2 ตั้งชื่อว่า image3

ขั้นตอนที่ 14: คลิ๊ก Frame 60 กด F6 จากนั้นลากภาพ img3 จาก Library มาวางบน Stage แล้วทำตามขั้นตอนที่ 5 และ 6  แล้วให้ไปที่ Frame 80,120  กด F6

ขั้นตอนที่ 15: คลิ๊ก Frame 60 แล้วทำตามขั้นตอนที่ 11

ขั้นตอนที่ 16: คลิ๊กขวาระหว่าง Frame 60 และ 80 เลือก Create Motion Tween

ขั้นตอนที่ 17: ให้ทำตามขั้นตอนกับภาพที่เหลือให้ครบทั้ง 5 ภาพที่เตรียมไว้

ขั้นตอนที่ 18: เมื่อทำภาพสุดท้ายเสร็จแล้ว กลับไปคลิ๊กที่ Frame ที่ 1 ของ Layer 1 จากนั้นกด (Ctrl+C ) เพื่อทำการ Copy

ขั้นตอนที่ 19: สร้าง Layer ใหม่เหนือ Layer image5 และตั้งชื่อ image1 อีกครั้ง จากนั้นคลิ๊กที่ Frame 180 กด F6 แล้วกด (Ctrl+Shift+V)  Paste in Place   เพื่อทำการวางสิ่งที่ Copy มาค่ะ

ขั้นตอนที่ 20: คลิ๊ก Frame 200 ของ Layer image 1 ข้างบนสุด กด  F6

ขั้นตอนที่ 21: คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 180 และ Frame 200 แล้วเลือก Create Motion Tween

เป็นอันเสร็จเรียบร้อยแล้วค่ะ  สามารถกด Ctrl+Enter (Run) เพื่อดูผลได้เลยค่ะ  ถ้าทำตามบทเรียนนี้จะได้ Banner นำเสนอภาพสวยๆ ไปติดบน Website แล้วนะคะ  ไม่ยากเลยใช่ไหมค่ะ  หรือถ้าติดปัญหาอะไรตรงไหนก็ Comment ได้เลยค่ะ


สำหรับ File Master ไปตรวจสอบความถูกต้อง คลิ๊ก ที่นี่ ได้เลยค่ะ


ขอให้ทุกท่านสนุกกับผลงานค่ะ  ^O^


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