สอน Flash บทเรียน 18: สร้าง Banner นำเสนอภาพ 6 (Mask Photo Flash Banner Presentaion)

วันนี้ มนต์ มีเดีย จะขอนำเสนอวิธีการสร้างภาพต่าง ๆ ที่เราต้องการจะไปนำเสนอบน Website ของเราโดยโปรแกรม Flash ซึ่งจะเป็นการใช้คำสั่ง mask และก็เทคนิคพิเศษโดย Flash นะคะ ซึ่งไม่จำเป็นต้องใช้ Action Script เลยสำหรับในบทเรียนนี้ค่ะ คุณจะได้เรียนรู้วิธีการ Import ภาพเข้ามาใน flash และบน Stage ของเราค่ะ และจะได้เรียนรู้วิธีการ filter บนรูปภาพของเรานะคะ ถ้าพร้อมกันแล้วก็เราก็เริ่มกันเลยนะคะ










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



                      

ขอบคุณภาพประกอบจาก Mytinyshops
ขั้นตอนที่ 1 : ขั้นตอนแรก จำเป็นที่สุดคือเราต้องเตรียมภาพสำคัญของเราที่จะนำมาสำหรับการนำเสนอก่อนนะคะ ภาพในบทเรียนนี้ Size width 420 px height 315 px ค่ะ หรือสามารถ Save ภาพจากใน Blog ได้เลยนะคะ

ขั้นตอนที่ 2 : เปิดโปรแกรม Flash   File--> New--> Flash Document  เลือกคำสั่ง modify --> document ตั้งค่าต่างๆ width: 420  px height : 315 px   Frame rate : 33 แล้ว Save ตั้งชื่อว่า maskphoto.fla  

ขั้นตอนที่ 3 : เปลี่ยนชื่อ Layer 1 เป็น photo  โดยการดับเบิ้ลคลิ๊กที่ Layer 1 แล้วก็พิมพ์ชื่อใหม่ลงไป

ขั้นตอนที่ 4 : เลือกคำสั่ง  File > Import to stage (Ctrl + R) และเลือกภาพจากที่เตรียมไว้จากขั้นตอนที่ 1 มาวางบน stage   และภาพที่นำลงมาวางยังคงถูกเลือกอยู่   จากนั้นไปที่คำสั่ง Align Panel (Ctrl + K) และกำหนดตามคำสั่งดังต่อไปนี้ :

          1. เลือกคำสั่ง Align/Distribute to stage เพื่อเปิดคำสั่งนี้

          2. คลิกเลือกที่คำสั่ง Align horizontal center

          3. คลิกเลือกที่คำสั่ง Align vertical center

ขั้นตอนที่ 5 : ขณะนี้ภาพที่เรากำหนด  ก็ยังคงถูกเลือกอยู่ จากนั้นให้กด F8 key (Convert to Symbol)  เพื่อเปลี่ยนภาพของเราให้เป็น Movie Symbol  แล้วตั้งชื่อว่า  photo_mc  ตามภาพที่แสดง

ขั้นตอนที่ 6 : คลิกเลือกที่ frame 65 ของ Layer photo  ให้กด F6 key

ขั้นตอนที่ 7 : กลับที่ frame ที่ 1 ของ Layer photo  จากนั้นใช้คำสั่ง Selection Tool (V)  และคลิก 1 ครั้งที่ ภาพ บน stage  จากนั้นไปที่ Properties Panel (Ctrl + F3) ข้างใต้ stage จากนั้นเลือก Filters tab ซึ่งอยู่ข้างซ้าย   จากนั้นคลิกที่เครื่องหมายบวก  และเลือกคำสั่ง Blur filters  จากนั้นก็กำหนดค่าตามภาพดังต่อไปนี้

ขั้นตอนที่ 8 : คลิกขวาระหว่างพื้นที่สีเทาระหว่าง  frame 1 ถึง 65 บน timeline และเลือกคำสั่ง Create Motion Tween จากเมนูที่ปรากฏ

ขั้นตอนที่ 9 : สร้าง Layer ใหม่ บน Layer photo ตั้งชื่อ  Layer ว่า mask

ขั้นตอนที่ 10 : คลิกเลือก Layer mask และวาด shape และวางไว้ที่ตำแหน่ง ที่แสดงให้ดูในภาพประกอบค่ะ

ขั้นตอนที่ 11 : คลิกเลือก frame 30 ของ Layer mask กด F6 key  และขณะนี้ก็อยู่ที่ frame 30  ให้ลาก shape เหมือนกับ ภาพประกอบ

ขั้นตอนที่ 12 : คลิกเลือก frame 65 กด F6 key  และขณะนี้เราอยู่ที่ Frame 65 และลาก Shape ให้
เหมือนภาพประกอบอีกครั้งค่ะ

ขั้นตอนที่ 13 : คลิกขวาบริเวณพื้นที่สีเทาระหว่าง frame 1 และ frame 30 และ frame 65  บน timeline เลือกคำสั่ง Create Shape Tween จากเมนูที่ปรากฏ

ขั้นตอนที่ 14 : เลือก Layer Mask แล้วคลิกขวาเลือกคำสั่ง Mask ตามภาพประกอบ

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


อย่าลืมนะคะว่า  ไม่มีสมาธิในการทำก็ จบ ค่ะ

Well Done!!!

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

บทเรียนสอน Flash : Tthai Tutorail Flash

บทเรียนช่วยสอน โปรแกรม Flash

Thai Flash Tutorail จัดทำขึ้นเพื่อเป็นการช่วยผู้ที่ต้องการเรียนรู้โปรแกรม Flash โดยการเรียบเรียงด้วยคำพูดง่ายๆ แล้วก็มีภาพประกอบให้ทำตามกันอย่างละเอียด สำหรับใครที่ต้องการตกแต่ง Website หรือต้องการจะทำ Banner, Menu จาก Flash เอง โดยไม่ต้องไปจ้างเสียเงินแพงๆๆ บทเรียนต่างๆ ที่ Monmedia จัดเตรียมไว้ คงมีประโยชน์สำหรับทุกคนค่ะ

หวังว่าคงได้ใช้ประโยชน์กันไม่มากก็น้อยนะคะ ถ้ามีปัญหาหรือสงสัยก็ ฝากข้อความไว้ตามกระทู้ต่างๆ ได้เลยค่ะ

สอน Flash บทเรียน 1: สร้างเมนูเลือกภาพด้วยตัวเลข (Image Listing By number)	เรียน ที่นี่
สอน Flash บทเรียน 2: สอนสร้าง Banner นำเสนอภาพ 1 Presentation Banner	เรียน ที่นี่
ภาพประกอบจาก http://www.mytinyshops.com/
สอน Flash บทเรียน 3: สร้าง Banner นำเสนอภาพ 2 (Attactive Banner)	เรียน ที่นี่
ภาพประกอบจาก http://www.alldecorate.com/
สอน Flash บทเรียน 4: สร้าง Banner นำเสนอภาพ 3 (Flash Photo Gallery)	เรียน ที่นี่
ภาพประกอบจาก http://www.mytinyshops.com/
สอน Flash บทเรียน 5: สร้าง Banner นำเสนอภาพ 4 (Flash Simple Photo Effect)	เรียน ที่นี่
ภาพประกอบจาก http://www.mytinyshops.com/
สอน Flash บทเรียน 6: สร้าง Banner นำเสนอภาพ 5 (Full Flash Banner)	เรียน ที่นี่
ภาพประกอบจาก http://www.monmedia.co.th/
สอน Flash บทเรียน 7: สร้าง Flash Header อย่างง่ายๆ	เรียน ที่นี่
สอน Flash บทเรียน 8: สร้าง ฟองสบู่ (Bubble) โปรแกรม Flash	เรียน ที่นี่
สอน Flash บทเรียน 9: สร้างตัวหนังสือหมุนบนแบนเนอร์ (Rotation Text Banner)	เรียน ที่นี่
สอน Flash บทเรียน 10: สร้างเมนูภาพเลื่อนโดย Flash (Scrolling Photo Menu Panel)	เรียน ที่นี่
สอน Flash บทเรียน 11: สร้างเมนู Flash ด้วย icon	เรียน ที่นี่
สอน Flash บทเรียน 12: สร้าง Animation ภาพในอนาคตด้วย Flash	เรียน ที่นี่
สอน Flash บทเรียน 13: สร้างเมนู Flash แบบที่ 1	เรียน ที่นี่
สอน Flash บทเรียน 14: สร้างเมนู Flash แบบที่ 2 (Advance And Modern Flash)	เรียน ที่นี่
สอน Flash บทเรียน 15: สร้างเมนู Flash แบบที่ 3 (Advanced drop down flash menu)	เรียน ที่นี่
สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (Advanced and attractive photo flash menu)	เรียน ที่นี่
สอน Flash บทเรียน 17: สร้างเมนู Flash แบบที่ 5 สร้างเมนูเป็นภาพลายน้ำ (Gradient Flash Button)	เรียน ที่นี่

สอน Flash บทเรียน 17: สร้างเมนู Flash แบบที่ 5 สร้างเมนูเป็นภาพลายน้ำ (Gradient Flash Button)

สวัสดีค่ะ มนต์ มีเดีย ขอเสนอแนะวิธีการทำ Button Menu แบบง่ายๆกันนะคะ  คุณเคยคิดที่อยากจะรู้วิธีการทำ Menu ใน Website ของคุณให้น่าสนใจไหมค่ะและในบทเรียนนี้จะเป็นอีกบทเรียนหนึ่งที่จะสอนให้คุณสร้าง Button Menu ให้ Website ของคุณดูดี  ดูหรู  ได้อย่างง่ายๆๆ ค่ะ    บทเรียนนี้คุณจะได้เรียนรู้วิธีการสร้าง Button Menu Flash ด้วย  RollOver and RollOut effect  และมีการใช้ Action Script สั้นๆๆ ไม่กี่ประโยคก็สามารถทำให้สวยได้แล้วค่ะ   งั้นเรามาเริ่มกันเลยดีกว่าไหมค่ะ 





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



ขั้นตอนที่ 1 : เปิดโปรแกรม Flash   File--> New--> Flash Document  เลือกคำสั่ง modify --> document ตั้งค่าต่างๆ width: 200  px height : 100 px   Frame rate : 25  แล้ว Save ตั้งชื่อว่า gradientmenu.fla  

ขั้นตอนที่ 2 :  ใช้คำสั่ง Rectangle Tool (R)  และเลือกสีพื้นตามใจชอบค่ะ ส่วนสีเส้นต้องปิดโหมดนี้ไม่ให้  Active   จากนั้นให้ไปที่ Color Mixer Panel (Shift+F9)  แล้วเลือกเป็นแบบ  Linear จากนั้นวาดสี่เหลี่ยมเพื่อเป็น Button Menu ของเรานะคะ  ดูตัวอย่างได้จากภาพค่ะ    

ขั้นตอนที่ 3 :   ขณะนี้สี่เหลี่ยมที่วาดไว้ยังคงถูกเลือกอยู่ให้กด F8 Key เพื่อเป็นการใช้คำสั่ง  (Convert to symbol)   จากนั้นให้เลือกเป็น  Movie Clip แล้วตั้งชื่อว่า Button_mc

ขั้นตอนที่ 4 :   ดับเบิ้ลคลิ๊กที่ Movie Clip Button_mc ที่เราสร้างขึ้น หรือ คลิ๊กขวาเลือกคำสั่ง Edit in Place     

ขั้นตอนที่ 5 :  หลังจากคลิกที่ Frame 20 ของ Layer 1 แล้วกด F6  จากนั้นสร้าง Layer ใหม่  (Layer 2)  ดูตามภาพประกอบ 

ขั้นตอนที่ 6 : คลิกที่ Frame แรก ของ Layer 2 จากนั้นกด F9 เพื่อเปิด  Action Script Panel   และจากนั้นก็ใส่คำสั่ง ดังนี้

stop ();

ขั้นตอนที่ 7 :  คลิกที่ Frame 2 ของ Layer 2 จากนั้นกด F6 key  ต่อจากนั้นคลิกเลือกที่ Layer 1  แล้วกด Ctrl+C เพื่อทำการ copy   จากนั้นคลิก Frame ที่ 2 ของ Layer 2 แล้วกด  Ctrl+Shift+V (Paste in Place) เพื่อทำการวางที่สิ่ง Copy มา  

ขั้นตอนที่ 8 :  ถึงขั้นตอนนี้สี่เหลี่ยมก็ยังคงถูก ก๊อปปี้อยู่   และยังคงถูกเลือกอยู่ ให้กด F8 key  (Convert to Symbol)  เพื่อเปลี่ยนให้เป็น  Movie Clip จากนั้น ตั้งชื่อให้ว่า Button1_mc  ตามภาพประกอบ 

ขั้นตอนที่ 9 : ใช้คำสั่ง Free Transform Tool (Q) คลิกที่จุดสีดำตรงกลางแล้วลากลงมาข้างล่างเพื่อกลับสี่เหลี่ยมด้านบนเป็นด้านล่าง และด้านล่างเป็นด้านบน  

 

ขั้นตอนที่ 10 :  คลิก Frame 10 ที่ Layer 2 และกด F6 key  จากนั้นกด F9 เพื่อเปิด Action Script Panel และใส่ Script ดังนี้

stop ();

ขั้นตอนที่ 11 :  กลับไปที่ Frame ที่ 2 ของ Layer 2 จากนั้นเลือกคลิกเลือกที่ สี่เหลี่ยม 1 ครั้ง แล้วไปที่ Properties Panel (Ctrl + F3) อยู่ข้างล่างใต้ Stage แล้วเลือกคำสั่ง Alpha ที่ Menu Color แล้วใส่ค่า 0% ลงไป ตามภาพ   

ขั้นตอนที่ 12 :   คลิกที่ Frame 20 Layer 2 กด F6 key   

  

ขั้นตอนที่ 13 :    จากนั้นกด F9 เพื่อเปิด Action Script Panel แล้วใส่คำสั่งดังนี้

gotoAndPlay (1);

ขั้นตอนที่ 14 :    จากนั้นไปที่ Frame 20 ของ Layer 2 แล้วคลิกที่สี่เหลี่ยม  1 ครั้ง แล้วไปที่  และกำหนด Alpha ที่ Menu color แล้วกำหนดค่าเป็น 0%  ซึ่งขั้นตอนนี้จะเหมือนขั้นตอน 10  Properties Panel (Ctrl+F3)

ขั้นตอนที่ 15 :   กลับไปที่ Frame 2 ของ Layer 2 แล้วไปที่ Properties Panel (Ctrl+F3) ข้างใต้ Stage  จากนั้นไปที่  Frame Label พิมพ์ชื่อ  go1 ลงไป   ตามภาพประกอบ  

ขั้นตอนที่ 16 :   จากนั้นคลิกที่ Frame 10 ของ Layer 2 แล้วไปที่ Properties Panel (Ctrl+F3) ข้างใต้ Stage  จากนั้นไปที่  Frame Label พิมพ์ชื่อ  go2 ลงไป

ตามภาพประกอบ  

 

ขั้นตอนที่ 17 :  กลับไปที่ Main Scene (Scene1) จากคลิกที่ Button 1 ครั้ง  แล้วกด F9 เพื่อเปิด Action Script Panel  และใส่คำสั่งดังนี้

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (release) {
getURL ("http://www.kcupdrawer,com", _self);
}

ขั้นตอนที่ 18 :  สร้าง Layer ใหม่ และตั้งชื่อว่า Text จากนั้นใช้คำสั่ง Text Tool (A) แล้วพิมพ์ คำที่ต้องการเป็นเมนูดังภาพ

เสร็จแล้วค่ะเมื่อมาถึงขั้นตอนนี้ ทดสอบการรันด้วยการกด (Ctrl + Enter) เพื่อดูผลการรันนะคะ
ค่อยๆ ทำนะคะ เพราะมันค่อนข้างสับซ้อนนิดหน่อย  ถ้าไม่เข้าใจอะไร comment ถามไว้ได้เลยค่ะ

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


อย่าลืมนะคะว่า  ไม่มีสมาธิในการทำก็ จบ ค่ะ


Have a nice day!!!


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

 

สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (ภาค 2)

       มนต์ มีเดีย สวัสดีค่ะ  กลับมาแล้วนะคะหลังจาก
       ห่างหายไปหลายเดือนเลยทีเดียวค่ะติดภารกิจ
       หลากหลายประการ  สำหรับผู้ที่ติดตาม Blog นี้
       อยู่นะคะ  ต่อไปจะมีการ Update ให้เรียนรู้กัน
       ต่อไปค่ะ
                   
       สำหรับบทเรียนนี้จะเป็นการสร้าง Menu จาก Flash
       ให้น่าสนใจน่าคลิกมากขึ้น   ซึ่งในบทเรียนนี้ คุณจะ
       ได้เรียนรู้เรื่องดังต่อไปนี้
          1. วิธีการ Design เมนูจากภาพ
          2. วิธีการ Import ภาพต่าง ๆ เข้ามาวางบน Stage
          3. วิธีการ Convert ภาพต่าง ๆ เป็น Movie Clip
          4. วิธีการ Create Instant Name
          5. วิธีการ Animate Photo และ Text
          6. วิธีการ Create invisible Button
          7. วิธีการ Apply Flash Filter ของทุกภาพ
          8. วิธีการขยายภาพโดยใช้เครื่องมือ (Q) Free Transform Tool


ขั้นตอนที่ 27:  ขณะนี้คุณก็ยังคงอยู่ที่ Frame 5 ของ Layer textline ใช้คำสั่ง Selection Tool (V) และคลิ๊กไปที่สี่เหลี่ยมที่เราเพิ่งจะย่อลงมา  จากนั้นไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage  ไปที่ด้านขวามือที่เมนู Color เลือกคำสั่ง Alpha แล้วลดระดับลงไปที่ 0%  ตามภาพ

ขั้นตอนที่ 28:  คลิกขวาบริเวณพื้นที่สีเทา ระหว่าง Frame 5 ถึง 15 บน timeline แล้วเลือกคำสั่ง Create Motion Tween 

ขั้นตอนที่ 29: สร้าง Layer ใหม่เหนือ Layer textline ตั้งชื่อว่า  text

ขั้นตอนที่ 30: คลิกที่ Frame 10 บน Layer text แล้วกด A เพื่อใช้คำสั่ง Text Tool (A) และไปที่ Properties Panel (Ctrl + F3) ข้างล่างใต้  Stage จากนั้นให้กำหนดลักษณะตัวอักษรดังนี้

          1. เลือกคำสั่ง  Static Text field
          2. เลือก Font ตามที่ใจชอบ  
          3. เลือก Font size 12
          4. เลือกสีขาว ให้ Font
          5. เลือกคำสั่ง rendering option  เลือกใช้คำสั่ง Anti alias for readability text 

จากนั้นให้พิมพ์คำที่เราต้องการเป็น Menu ลงไปค่ะ  เหมือนตัวอย่างภาพประกอบ

ขั้นตอนที่ 31:  และขณะนี้ Layer text ก็กำลังถูกเลือกอยู่  ให้กด F8 key (Convert to Symbol) เพื่อเปลี่ยนเป็น movie clip  

 
ขั้นตอนที่ 32: กด F6 key ที่ Frame 15 Layer text 

ขั้นตอนที่ 33: กลับไปที่ Frame 10 ของ Layer text  แล้วใช้คำสั่ง Selection Tool (V) คลิก 1 ครั้งที่ text  จากนั้นให้ไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage  คลิกที่ Menu Filter  คลิกที่เครื่องหมายบวก แล้วเลือกคำสั่ง Blur แล้วกำหนดค่าตามดังนี้

ขั้นตอนที่ 34: คลิกที่ Properties button จากนั้นคลิกที่ Menu color อยู่ด้านขวาของ Properties Color  เลือกคำสั่ง Alpha กำหนด 0% ตามภาพ

ขั้นตอนที่ 35: เลือกที่ Frame 10 ของ Layer text และขยับตัวอักษรของเราลงมานิดหนึ่ง

ขั้นตอนที่ 36: คลิกขวาบริเวณสีเทาระหว่าง Frame 10 และ 15 บน timeline เลือกคำสั่ง Create Motion Tween 

ขั้นตอนที่ 37: กลับไปที่ Scene 1 

 

ขั้นตอนที่ 38: สร้าง Layer ใหม่ เหนือ Layer photo  และตั้งชื่อว่า invisible button

ขั้นตอนที่ 39: เลือกที่ Layer invisible button และใช้คำสั่ง Rectangle Tool (R) เพื่อจะวาดสี่เหลี่ยม จากนั้นให้กำหนดเลือกสีเส้นไม่ให้ Active และเลือกสีพื้นสีอะไรก็ได้ค่ะ จากนั้นก็วาดสี่เหลี่ยมลงไปทับที่รูปแรกตามภาพประกอบ    

 

ขั้นตอนที่ 40: จากนั้นสี่เหลี่ยมที่เราวาดไว้ยังคงถูกเลือกอยู่  ให้กด F8 key (Convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น  Button Symbol  ตั้งชื่อว่า bu1

ขั้นตอนที่ 41:  ดับเบิ้ลคลิกที่ Invisible Button เพื่อเข้าไปข้างใน  จากนั้น ลากจุดสีดำจาก Up ไปวางที่ Hit   

 


ขั้นตอนที่ 42:  กลับไปที่ Scene1  

 



ขั้นตอนที่ 43:  ใช้คำสั่ง  Selection Tool (V) คลิกที่ Invisible Button 1 ครั้ง  จากนั้นกด F9 (Action Script Panel แล้วก็ใส่คำสั่งนี้ลงไปค่ะ   

on (rollOver) {
_root.mouse_over_Photo1_mc = true;
}

on (rollOut) {
_root.mouse_over_Photo1_mc = fstartlse;
}

on (release){
getURL("http://www.mytinyshops.com/");

}

ขั้นตอนที่ 44:  สร้าง Layer ใหม่เหนือ Layer Invisible Button ตั้งชื่อว่า action 

 

จากนั้นเลือกที่ Frame 1 ของ Layer action และพิมพ์ Action Script ข้างล่างนี้ลงไปค่ะ 

_root.Photo1_mc.onEnterFrame = function() {
if (mouse_over_Photo1_mc) {
_root.Photo1_mc.nextFrame();
} else {
_root.Photo1_mc.prevFrame();
}
};

 

เสร็จแล้วค่ะเมื่อมาถึงขั้นตอนนี้ ทดสอบการรันด้วยการกด (Ctrl + Enter) เพื่อดูผลการรันนะคะ
ค่อยๆ ทำนะคะ เพราะมันค่อนข้างสับซ้อนนิดหน่อย  ถ้าไม่เข้าใจอะไร comment ถามไว้ได้เลยค่ะ

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


อย่าลืมนะคะว่า  ไม่มีสมาธิในการทำก็ จบ ค่ะ


Have a nice day!!!


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