สอน Flash บทเรียน 6: สร้าง Banner นำเสนอภาพ 5 (Full Flash Banner)

บทเรียนนี้ก็เป็นอีกบทเรียนหนึ่งที่สามารถสร้าง Banner โดยไม่ต้องใช้คำสั่ง Action Script ในการสร้างค่ะ และบทเรียนนี้จะได้เรียนรู้การจัดเรียงรูปภาพกับ Back gourd  ได้เรียนรู้วิธีการใช้  Free Transform Tool นั่นคือการกด (Q) ที่แป้นคีย์บอร์ดนั่นเอง   และการเปลี่ยน Layer ให้เป็น Layer Mask  วิธีง่ายๆ แค่นี้ ก็จะได้ Banner เก๋ๆๆ ไปวางบน Website ของเราแล้วค่ะ


มนต์ มีเดีย ขอให้ทุกท่านมีความสนุกนะคะ





ตัวอย่างผลงานบทเรียนวันนี้ค่ะ

ภาพประกอบจาก www.monmedia.co.th

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

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

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

ขั้นตอนที่ 4 : เลือก File --> Import --> Import Library (Ctrl+R) เลือกภาพจากที่เก็บมาที่ Library จากนั้นเลือก img1 มาวางบน stage และกำหนดกึ่งกลางให้กับภาพ

ขั้นตอนที่ 5 : คลิ๊ก Frame 80 ของ Layer image1 กด F5

ขั้นตอนที่ 6 :  เพิ่ม Layer ใหม่ ตั้งชื่อ Line 1   แล้ววาดสี่เหลี่ยมขนาด กว้าง 10px สูง 20px ลงไปบนภาพ  แล้วให้จัด Align ให้อยู่ตรงกลางข้างขวา ตามภาพตัวอย่างค่ะ

 

กด (R) Rectangle Tool กำหนด Stroke ให้ไม่มีหรือไม่ทำงาน  เลือกสีพื้นอะไรก็ได้ตามใจชอบ

แล้ววาดสี่เหลี่ยมขนาด กว้าง 10px สูง 20px ลงไปบนภาพ  แล้วให้จัด Align ให้อยู่ตรงกลางข้างขวา ตามภาพตัวอย่างค่ะ

ขั้นตอนที่ 7 : คลิ๊กบน Frame 10 กด F6 บน Layer Line 1 แล้วกด (Q) แล้วลากสี่เหลี่ยมไปด้านหน้าตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : คลิ๊ก Frame 20 และกด F6 จากนั้น กด (Q) และลากสี่เหลี่ยม

ขั้นตอนที่ 9 : คลิ๊ก Frame 1 บน Layer Line1 และ Frame 10 แล้วไปกำหนดค่าที่ Properties Panel ที่เมนู Tween เลือก Shape

 ขั้นตอนที่ 10 : คลิ๊กที่ Layer Line1 และคลิ๊กขวาเลือกคำสั่ง mask

ขั้นตอนที่ 11 : เลือก Layer Line1 และสร้าง Layer ใหม่ ตั้งชื่อว่า image2

ขั้นตอนที่ 12 : คลิ๊ก Frame 60 กด F6 แล้วกด (Ctrl+R)  Rectangel Tool แล้วเลือก img2 มาวางบน Stage

 

 
ขั้นตอนที่ 13 :  คลิ๊ก Frame 160 ของ Layer imgae2 แล้วกด F5

ขั้นตอนที่ 14 : สร้าง Layer ใหม่ตั้งชื่อว่า Line2 และทำตามขั้นตอน 6-10 แต่การ animation สี่เหลี่ยมนั้นให้ย้ายไปมา  อาจจะเริ่มต้นจากบนซ้าย  หรือล่างซ้าย ตามภาพประกอบ

         

ขั้นตอนที่ 15 : จากนั้นให้ทำภาพให้ครบตามขั้นตอนทั้งหมดแล้วกด Ctrl+Enter เพื่อ Run ดูผลงานของ Flash ที่สร้างไว้ค่ะ


เสร็จแล้วค่ะ ผลงานสวยๆ อีกรูปแบบสำหรับนำไปติดตั้งบน Website ของเรานะคะ  สามารถ Download File Master ได้  ที่นี่  เพื่อใช้ตรวจสอบความถูกต้อง



Have a nice day !

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

  

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

สวัสดีค่ะ  ในบทเรียนนี้จะเป็นบทเรียนที่ มนต์ มีเดีย จะแนะนำวิธีการสร้าง Banner Presentation บน Flash site อีกวิธีหนึ่งที่ไม่ต้องเขียน Action Script นะคะ  วิธีง่ายแบบนี้ไม่ลองทำไปใช้บน Website ของคุณได้ไง  จริงมะ...










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

ภาพประกอบจาก 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 สวยๆ ของเราค่ะ  

และสามารถ Download File Master ได้  ที่นี่ เพื่อตรวจสอบความถูกต้องของชิ้นงานค่ะ

เท่านี้ก็เรียบร้อยแล้วค่ะ   ขอให้มีความสุขกันมากๆ นะคะ

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

สอน 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 ที่นี่  เพื่อตรวจสอบความถูกต้องค่ะ

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

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