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

สวัสดีตอนเย็นของวันเสาร์ ที่ 28/5/2554 นะคะ  วันนี้เขียน Blog ช้าไปหน่อยค่ะ มัวแต่ไป Shopping แล้วก็กลับทำงานบ้านนิดหน่อยค่ะ     แต่ไม่เป็นไรนะคะยังไง มนต์ มีเดีย มีบทเรียนดีๆและง่ายๆ มานำเสนอ ให้ลองได้ทำกันค่ะ  ซึ่งวันนี้จะขอแนะนำวิธีการทำ Banner นำเสนอภาพอีกรูปหนึ่งที่ดู หรู หรา ไม่เบาเลยทีเดียวนะค่ะ   สำหรับใครที่กำลังหาไอเดีย เอาไปทำ Banner เพื่อไปใช้ใน Website ของตัวเอง  อาจจะเป็น Flash Banner  หรือ Flash Header สวยๆ  ก็ได้เลยนะคะ  เอาละเรามาเริ่มกันเลยดีกว่าอย่ารอช้า...







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

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

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

ขั้นตอนที่ 2: เปิดโปรแกรม Flash แล้ว กด (Ctrl+J) Document Properties เพื่อกำหนดค่า ความกว้าง สูง และ Frame Rate (ความช้าเร็วของ Banner ของเรากันก่อนนะคะ)  width = 400 px height = 200 px background = สีขาว  frame rate = 36   (ดูตามภาพประกอบ) จากนั้น Save Project ตั้งชื่อ attactivebanner.fla 

ขั้นตอนที่ 3 : เลือก File -> Import --> Import Library เป็นการเลือกภาพที่เราเตรียมไว้จากที่เก็บภาพ แล้วเลือกภาพทั้งหมด  โดยการกด Shift + Click เพื่อเลือกภาพทั้งหมด แล้วคลิ๊ก Open เท่านี้ภาพก็จะมาปรากฏที่ Library แล้วค่ะ หรือถ้าใคร Library ไม่แสดงให้กด Crtl+L นะคะ

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

ขั้นตอนที่ 5 : คลิ๊กที่ภาพ img 1 บน Stage คลิ๊กจัดตำแหน่งรูปภาพให้วางพอดีกับ Stage ตามรูป

 จากนั้น กด Ctrl + B (Break Apart)

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

ขั้นตอนที่ 7 : เลือก Frame 2 บน Layer image1 แล้ว กด F6

ขั้นตอนที่ 8 :  กด (E) Eraser Tool  เลือกยางลบ และเลือกหัวยางลบเป็นรูป วงกลมขนาดใหญ่สุดค่ะ

ขั้นตอนที่ 9 : จากนั้นเริ่มลบภาพ โดยเริ่มจากมุมบนซ้าย ดูได้ตามภาพประกอบนะคะ

ขั้นตอนที่ 10 : กด F6 ที่แป้นคีย์บอร์ดอีกครั้งหนึ่ง ที่ Frame 3 บน Layer image1

แล้วลบภาพให้มากขึ้นกว่าเดิม  ขั้นตอนนี้อาจจะต้องใช้ศิลปะในการลบสักหน่อยนะคะ เพื่อจะได้ Flash Banner สวย ๆ  (ดูตามภาพประกอบค่ะ)  หลังจากนั้นให้กด F6 แล้วลบภาพไปจนหมดภาพนะคะ

ขั้นตอนที่ 11 : หลังจากลบภาพหมดแล้ว กด (V) Selection Tool แล้วเลือก Frame ทั้งหมดบน Timeline ของ Layer  image1 แล้วคลิกขวา เลือกคำสั่ง Reverse Frame ค่ะ (ดูตามภาพประกอบ)

ขั้นตอนที่ 12: คลิ๊ก Frame 80 ของ Layer image1 และกด F5 จะได้ดังภาพ

ขั้นตอนที่ 13: คลิ๊กปุ่ม Lock  Layer image1 แล้วสร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า image2

ขั้นตอนที่ 14:  คลิ๊ก Frame ที่ 60 บน Layer image2 แล้วกด F6 จากนั้นกด (V) Selection Tool และลาก img2 จาก Library มาวางบน Stage

ขั้นตอนที่ 15:  คลิ๊กเลือก img2 บน Stage แล้วกด Ctrl+B (Break Apart) กับภาพนี้ เหมือนขั้นตอนที่ทำกับภาพที่ img1 ค่ะ

ขั้นตอนที่ 16:  ทำตามขั้นตอนที่ 8 , 9 , 10 และ 11 ค่ะ

ขั้นตอนที่ 17:  จากนั้นทำทุกภาพที่เตรียมให้ครบ ตามขั้นตอนนะคะ

ขั้นตอนที่ 18:  ขั้นตอนสุดท้ายให้กด Ctrl + Enter เพื่อ Run ดู Banner ที่เราได้สร้างไว้นะคะ

สามารถ Download File Master สำหรับตรวจดูความถูกต้องได้  ที่นี่ ค่ะ


หวังว่าทุกท่านคงได้ Flash Banner สวยๆ ไปวางบน Website หรูๆ แล้วนะคะ  ถ้าท่านใดมีคำถาม หรือข้อสงสัยอะไร  Log in แล้ว ฝาก Comment ไว้ได้เลยคะ  หรือถ้า Blog มีอะไรผิดพลาด แจ้งได้เลยนะคะที่ Comment

มนต์ มีเดีย ขอบคุณทุกท่านที่ติดตาม Blog ของเรานะคะ


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