สอน Flash บทเรียน 15: สร้างเมนู Flash แบบที่ 3 (Advanced drop down flash menu)

 มนต์มีเดีย สวัสดีค่ะ บทเรียนจะเป็นการสอนในเรื่องการทำเมนู
 แบบเป็นชั้นๆ โดยมีการใช้ Action Script Code และมีการใช้
 เทคนิคพิเศษเล็กน้อยนะคะ บทเรียนนี้คุณจะได้เรียนรู้
    1. วิธีการ Design Drop Down Menu flash
    2. วิธีการเปลี่ยนสีสำหรับ Drop Down เมนู
    3. วิธีการสร้าง invisible button
    4. วิธีการใช้ reverse effect
    5. วิธีการประยุกต์ใช้ action script code บนเมนู






ผลงานตัวอย่างสำหรับวันนี้ค่ะ




ขั้นตอนที่ 1 : เปิดโปรแกรม Flash   File--> New--> Flash Document

ขั้นตอนที่ 2 : เลือกคำสั่ง modify --> document ตั้งค่าต่าง ๆ width: 250 px height :250 px  background : สีขาว  Frame rate : 28  แล้ว Save ตั้งชื่อว่า advancedropdownmenu.fla

ขั้นตอนที่ 3 : กด (R) ไปที่ colors part ของ tool panel และปิดในส่วนของคำสั่ง stroke และเลือกสีของพื้นเป็นสี #161616

หลังจากนั้น คลิ๊กบน corner radius icon และกำหนดให้มุม radius = 4 point ดูภาพประกอบเลยค่ะ

แล้ววาดสี่เหลี่ยมขนาด 80 x 50 px คุณสามารถกด (V) selection tool สำหรับจัดกรอบสี่เหลี่ยมจัดตำแหน่งที่เราต้องการได้ค่ะ

ขั้นตอนที่ 4 : คลิ๊กที่สี่เหลี่ยมที่เราวาด กด F8 (Convert to symbol) เพื่อเปลี่ยนสี่เหลี่ยมให้เป็น movie clip symbol ตั้งชื่อว่า menu

                        
ขั้นตอนที่ 5 : ดับเบิ้ลคลิ๊ก movie clip เข้าไปข้างในซึ่งเรารู้ได้ว่าเราอยู่ข้างในแล้วจากภาพประกอบนี้เลยค่ะ

ขั้นตอนที่ 6 : ขณะนี้รูปสี่เหลี่ยมของเราถูกเลือกอยู่ให้กด F8 (convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น button ตั้งชื่อว่า button  ดูตามภาพประกอบเลยค่ะ

 

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

 

ขั้นตอนที่ 8 : จากนั้นคลิ๊ก frame 2 ของ layer button กด f6   ถึงเวลาที่เราจะทำ 3 เมนูย่อยของเราแล้วนะคะ

ขั้นตอนที่ 9 : กด (R) rectangle และไปที่ color part tools ปิดคำสั่ง stroke color และเลือกสีของพื้นเป็นสี #ff9933 

ขั้นตอนที่ 10 : จากนั้นวาดสี่เหลี่ยมที่ 1 ลงไป

ขั้นตอนที่ 11 : จากนั้นวาดสี่เหลี่ยมที่เราวาด กด F8 (Convert to symbol)  เปลี่ยนสี่เหลี่ยมให้เป็น button ตั้งชื่อว่า sublink 

ขั้นตอนที่ 12 :  ดับเบิ้ลคลิ๊กเข้าไปใน sublink 

ขั้นตอนที่ 13 : คลิ๊กที่คำสั่ง Over กด F6 

ขั้นตอนที่ 14 : จากนั้นสี่เหลี่ยมยังคงถูกเลือกอยู่ให้กด F8  (convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น movie clip ตั้งชื่อว่า symbol1 

ขั้นตอนที่ 15 : ดับเบิ้ลคลิ๊ก Movie Clip Symbol1 เพื่อเข้าไปข้างใน 

ขั้นตอนที่ 16 : จากนั้นคลิ๊กที่สี่เหลี่ยม กด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Movie Clip อีกครั้งตั้งชื่อว่า Symbol2 

 

ขั้นตอนที่ 17 :  คลิ๊กที่ Frame 10 กด F6 กด (V) Selection Tool และคลิ๊ก 1 ครั้งบน Movie Clip ที่สร้างมาใหม่จากนั้นกด (Ctrl + F3) เพื่อไป Properties Panel อยู่ข้างใต้ Stage ให้ไปที่คำสั่ง color menu  เลือกคำสั่ง  tint และเลือกสี #FFFF33

ขั้นตอนที่ 18 : คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 1 กับ Frame 10 เลือกคำสั่ง Create Motion Tween จากนั้นคลิ๊ก Frame 10 กด F6  5 ครั้ง

 จากนั้นกลับไป Frame 12,14 กด Delete

ขั้นตอนที่ 19 : สร้างเลเยอร์ใหม่เหนือเลเยอร์ 1 (layer 2) จากนั้นคลิ๊ก Frame 15 กด F6 

ขั้นตอนที่ 20 : คลิ๊ก F15 กด (N) Line Tool  แล้วกลับไปที่ Properties Panel (Ctrl+F3) จากนั้นกำหนดค่าต่าง ๆ ดังนี้
     1. เลือกสี Stroke  #000000
     2. เลือกเส้นแบบ Solid  ความหนา 1
     3. แล้วคลิ๊กให้เครื่องหมายถูกทำงานที่คำสั่ง stroke hinting

จากนั้นวาดเส้นที่ส่วนล่างของ button

ขั้นตอนที่ 21 : ถึงเวลาที่ต้องใช้คำสั่ง reverse effect และขณะนั้นเราอยู่ frame 15 กด F6 และจากนั้น กด (E) Eraser Tool  และทำการลบเส้นทีละนิดๆ กด F6 1 ครั้ง คลิ๊กลบเส้น 1 ครั้ง จนเส้นหมด

ขั้นตอนที่ 22 : จากนั้นกด (V) Selection Tool และเลือกทุก Frame คลิ๊กขวาเลือกคำสั่ง Reserve Frame

ขั้นตอนที่ 23 :  เลือก Frame สุดท้ายของ Layer 2 กด F9 Action Script Panel แล้วพิมพ์คำสั่งนี้ลงไป   

 

ขั้นตอนที่ 24 : กลับไปที่ scene ก่อนหน้า คลิ๊กที่ sublink

ขั้นตอนที่ 25 : คลิ๊กขวาบนคำสั่ง hit แล้วเลือก Insert Frame

   

ขั้นตอนที่ 26 : กลับไป scene ก่อนหน้า คลิ๊กที่ Menu 

ขั้นตอนที่ 27 : กด (V) Selection Tool และคลิ๊กที่ button 1 ครั้ง จากนั้นไปที่ Action Script Panel
หรือกด (Ctrl + F3) แล้วใส่ค่าลงไป

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

ขั้นตอนที่ 28 : จากนั้นกด (V) Selection Tool แล้วกด Alt + Shift key แล้วทำการ copy สี่เหลี่ยมออกมา 2 ครั้ง

ขั้นตอนที่ 29 :  ถึงเวลาของการใส่ตัวอักษรแล้วสร้าง Layer ใหม่เหนือ Layer button ตั้งชื่อว่า text

ขั้นตอนที่ 30 : คลิ๊กบน Frame ที่ 1 ของ Layer text กด (A) Text Tool  และไปที่ Properties  Panel กด (Ctrl + F3) ใต้ Stage จากนั้นทำตามขั้นตอนดังนี้
     1. เลือก Static Text Field
     2. เลือก Font
     3. เลือกขนาด Font 14 px
     4. เลือกสีให้ตัวอักษร
     5. เลือกคำสั่ง anti-alias font readability

ขั้นตอนที่ 31 : คลิ๊ก Frame 2 ของ Layer 2 แล้วกด F6 กด (V) Selection Tool   จากนั้นดับเบิ้ลคลิ๊กบน Text และไปที่ Properties Panel (Ctrl+F3) จากนั้นเปลี่ยนสีตัวหนังสือเป็น #CCFF00

ขั้นตอนที่ 32 : กด (V) Selection Tool จากนั้นกด Alt+Shift ทำการคลิ๊ก Copy Text ลากลงมาวางที่ Button ให้ครบทุกอันค่ะ

ขั้นตอนที่ 33 : หลังจากนั้น ดับเบิ้ลคลิ๊กทุกๆ คำใน subbuttons เปลี่ยนสีตัวอักษร เปลี่ยนคำที่เราต้องการลงไปค่ะ  เปลี่ยนเป็นสีดำ

ขั้นตอนที่ 34 : สร้าง Layer ใหม่บน Layer text ตั้งชื่อ action

\

ขั้นตอนที่ 35 : คลิ๊กบน Frame 1  ของ Layer Action กด F9 action script code panel ในคำสั่ง stop();

ขั้นตอนที่ 36 : สร้าง Layer ใหม่บน Layer action จากนั้นใช้เมาส์ลาก Layer ลงมาข้างล่างใต้ Layer Button ตั้งชื่อว่า invisible button

ขั้นตอนที่ 37 :  คลิ๊กบน Frame ที่ 2 ของ Layer invisible button แล้วกด F6 Key

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

ขั้นตอนที่ 39 : คลิ๊กเลือกที่สี่เหลี่ยมที่เราเพิ่งวาดนะคะ กด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Button แล้วตั้งชื่อว่า invisible button

ขั้นตอนที่ 40 : ดับเบิ้ลคลิ๊กเข้าไปในข้างใน invisible button

ขั้นตอนที่ 41 : กด (V) Selection Tool  ย้าย Key Frame จาก Up ไปที่ Hit

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

 


ขั้นตอนที่ 43 : กด (V) Selection Tool และคลิ๊ก 1 ครั้งที่ invisible button ที่ stage จากนั้นกด F9 (Action Script Code Panel) พิมพ์ code ทั้งหมดนี้ลงไป

on (rollOver) {
gotoAndStop(1);
}

ขั้นตอนที่ 44 : กลับไปที่ Frame 1 ของ Layer Button จากนั้นกด (V) Selection Tool แล้วคลิ๊กเลือกที่ button จากนั้นใช้ Code ลงไปที่ action script code panel


on(rollOver) {
restartAll();
gotoAndStop(2);
}

 เสร็จแล้วค่ะ  กด Ctrl + Run  ดูนะคะ สามารถ Download File Master ได้ที่นี่ ค่ะ (เพื่อนำไปตรวจสอบค่ะ)


ขอให้สนุกนะคะ

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

 

สอน Flash บทเรียน 14: สร้างเมนู Flash แบบที่ 2 (Advance And Modern Flash)

               มนต์ มีเดีย สวัสดีค่ะ บทเรียนวันนี้ คุณจะได้
               เรียนรู้วิธีการสร้าง Flash Menu แบบทันสมัย
               แล้วมีการใส่ action script code แล้วสามารถ
               นำไปใช้บน website ของเรานะคะ เพื่อเพิ่ม
               ความหรูหรา คุณจะได้เรียนรู้วิธีการ Design
               menu แบบ Modern วิธีการใช้ instance name
               สำหรับ action script code ด้วยค่ะ พร้อมแล้ว
               เราเริ่มกันเลยค่ะ !!!







ตัวอย่างผลงานสำหรับวันนี้




ขั้นตอนที่ 1 : เปิดโปรแกรม Flash กด (Ctrl+J) Properties Document กำหนดความกว้างและสูงของ Flash  width = 360 px height = 105 px  Background =  สีขาว Frame rate = 28 fps. จากนั้นคลิ๊ก OK

ขั้นตอนที่ 2 : กด (N) Line Tool กำหนดที่ Properties Panel (กด Ctrl+F3) ใต้ Stage กำหนดค่าต่างๆ ดังนี้
            1. ใส่สีเส้น Stroke
            2. เลือก Solid 1
            3. เปิด Stroke hinting โดยการคลิ๊กเครื่องหมายถูก ที่หน้าเมนู

จากนั้นวาดเส้นลงไปเหมือนภาพตัวอย่างค่ะ

ขั้นตอนที่ 3 : กด (R) Rectangle Tool ใน colors panel ของTool Panel Block Stroke โดยการคลิ๊กที่รูปไอคอนดินสอเล็ก ๆ แล้วเข้าไปคลิ๊กปิดให้เป็นกากบาทสีแดงในสี่เหลี่ยมเล็กของเส้นค่ะ

และเลือกสีของพื้นสี่เหลี่ยม  จากนั้นวาดสี่เหลี่ยมลงไปที่ข้างล่างของทุก Button ขนาด 120 x 4 px ดูตามภาพ

ขั้นตอนที่ 4 : กด (T) Text Tool แล้วไปที่ Properties Panel กด (Ctrl+F3) ใต้ Stage แล้วกำหนดตามรายละเอียดดังนี้
   1.  เลือกคำสั่ง Static Text Field
   2. เลือก Font Veranda
   3. Size 16
   4. เลือกสี #333333
   5. เลือกการ Render = Anto_alias for readabity

จากกนั้นพิมพ์คำของ Menu ลงไปค่ะ

ขั้นตอนที่ 5 :  หลังจากนั้นเลือกตัวอักษรสองตัวสุดท้าย กำหนดให้ไม่ต้องหนา ค่ะ

ขั้นตอนที่ 6 : กด (V) Selection Tool และคลิ๊กที่ text HOME และสี่เหลี่ยมด้านล่างของกล่อง 1 ครั้งกด F8  (Convert To Symbol) ให้เป็น Movie Clip ตั้งชื่อว่า  home_mc

ขั้นตอนที่ 7 : และไปที่ Properties Panel Stage ด้านล่างไปที่เมนู instance name ใส่ชื่อว่า home_mc  ตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : ดับเบิ้ลคลิ๊กที่ Movie Clip ของ home_mc กด (V) Selection Tool ตามภาพค่ะ ซึ่งเราจะเข้าไปข้างใน

ขั้นตอนที่ 9 : กด (V) Selection Tool เลือกเฉพาะคำว่า HOME กด (Ctrl+x) Cut Tool สร้าง Layer ใหม่เหนือ Layer 1 แล้วกด (Ctrl + Shift +V) (Past in Place)

ขั้นตอนที่ 10 : กลับไป Layer 1 ดับเบิ้ลคลิ๊กเปลี่ยนชื่อเป็น Rectangle และดับเบิ้ลคลิ๊กที่ Layer 2 เปลี่ยนชื่อเป็น Text

ขั้นตอนที่ 11 :  คลิ๊กกลับมาที่ Layer rectangle กด F8 (Convert To Symbol) เป็น Movie Clip ตั้งชื่อว่า rectangle_mc

ขั้นตอนที่ 12 : คลิ๊ก Frame 10 ของ Layer rectangle กด F6  จากนั้นกด Q (Free transform) กด Alt + คลิ๊ก Mouse ลากสี่เหลี่ยมจากจุดดำตรงกลางให้เต็มกรอบ

ขั้นตอนที่ 13 : คลิ๊กขวาบริเวณสีเทาระหว่าง Frame 1 กับ Frame 10 บน Timeline เลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 14 : กด (V) Selection Tool และคลิ๊ก Text Layer กด F8 (Convert To Symbol) Text HOME ให้เป็น Movie Clip ตั้งชื่อว่า text_mc

ขั้นตอนที่ 15 : คลิ๊ก Frame 10 ของ Layer text กด F6 จากนั้นกด (Q) Free Transform แล้วขยายตัวหนังสือให้ใหญ่ขึ้น  แล้วขยับ Text HOME ขึ้นไปข้างบน

ขั้นตอนที่ 16 :  จากนั้นกด (V) Selection Tool แล้วคลิ๊กที่ตัวหนังสือ 1 ครั้ง ไปที่ Properties Tool  กด (Ctrl + F3) ใต้ Stage กำหนด Menu Color เลือกคำสั่ง Tint เลือกสีขาว และใส่ค่า 10% ดูตามภาพประกอบ

ขั้นตอนที่ 17 : คลิ๊กขวาบริเวณสีเทาระหว่าง Frame 1 และ 10 บน Timeline ของ Layer text จากนั้นเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 18 : กลับไปที่ Main Scene (Scene 1)

ขั้นตอนที่ 19 : ดับเบิ้ลคลิ๊กที่ Layer 1 ตั้งชื่อใหม่ว่า menu  จากนั้นสร้าง Layer ใหม่บน Layer Menu ตั้งชื่อว่า invisible button

ขั้นตอนที่ 20 : สร้าง invisible button layer และสร้าง invisible button บน Menu HOME

ขั้นตอนที่ 21 : กด (V) Section Tool คลิ๊กเลือกที่ invisible button 1 ครั้ง กด F9 (Action Script Panel) จากนั้นใส่ Code ลงไป

on (rollOver) {
_root.mouse_over_home_mc = true;
}
on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}
on (release){
getURL("http://www.monmedia.co.th/");
}

ขั้นตอนที่ 22 : สร้าง Layer ใหม่เหนือ Layer invisible button ตั้งชื่อ action

ขั้นตอนที่ 23 : คลิ๊กที่ Frame 1 ของ Layer Action กด F9 (action script panel) ใส่ code ลงไป

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

_root.services_mc.onEnterFrame = function() {
if (mouse_over_services_mc) {
_root.services_mc.nextFrame();
} else {
_root.services_mc.prevFrame();
}
};

_root.contact_mc.onEnterFrame = function() {
if (mouse_over_contact_mc) {
_root.contact_mc.nextFrame();
} else {
_root.contact_mc.prevFrame();
}
};

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

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


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


Have a nice day!!!


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