สอน 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!!!


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