สอน Flash บทเรียน 11: สร้างเมนู Flash ด้วย icon

    มนต์มีเดีย สวัสดีค่ะสำหรับบทเรียนจะสอนคุณสร้างเมนู
    จาก Icon สวยๆ และการใส่ action script code เมนูนี้
    สามารถใช้ได้กับทุก Website และบทเรียนนี้คุณจะได้
    เรียนรู้
       1. วิธีการใช้ instance name
       2. วิธีการ convert icon เป็น button และ movie clip 
       3. วิธีการใช้ action script code เพื่อให้มีประสิทธิภาพ

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



ขั้นตอนที่ 1: เปิดโปรแกรม Flash กด (Ctrl+J) Document Properties แล้วตั้งค่าความกว้างและสูงของ Flash width = 300 px  height = 100 px  frame rate = 30 fps Background = สีขาว  (ตามภาพประกอบเลยนะคะ)  แล้ว Save Project นี้ ชื่อว่า  iconmenu.fla

ขั้นตอนที่ 2 : สร้าง Layer ใหม่ตั้งชื่อว่า Layer icon หลังจากนั้น สร้าง 4 icons ที่เราต้องการใช้เป็นเมนูใน Website ของเรานะคะ   หรือจะทำ Download icon สวยๆ จาก Internet มาก็ได้ค่ะ

ขั้นตอนที่ 3 : เลือกรูป icon1 กด F8 ที่แป้นคีย์บอร์ดเพื่อทำการ Convert To Symbol  เปลี่ยน icon ของเราเป็น Movie Clip ตั้งชื่อว่า icon1  (ตามภาพประกอบค่ะ)

ขั้นตอนที่ 4 : เลือกที่ Movie Clip icon1 ไปที่ Properties Panel หรือกด (Ctrl+F3) ตรง Bar instance name ให้ใส่ชื่อ icon1 ลงไปด้วยค่ะ

ขั้นตอนที่ 5 : ดับเบิ้ลคลิ๊กบน Movie Clip ของ Stage เราจะเข้าไปอยู่ใน Movie Clip icon1

ขั้นตอนที่ 6 : เลือกเฉพาะส่วนของวงกลม จากนั้นกด (Ctrl+J) Cut Tool เพื่อลบวงกลม และ Copy ไว้ค่ะ

ขั้นตอนที่ 7 : สร้าง  Layer ใหม่ บน Layer 1 เป็น Layer 2 กด Ctrl+Shift+V (Paste in Place)

ขั้นตอนที่ 8 : ส่วนของวงกลมของ icon  ได้ถูก copy มาวางที่ Layer 2 เรียบร้อยแล้วนะคะ  จากนั้นให้เลือกวงกลม แล้วกด F8 (Convert To Symbol) ให้เป็น Movie Clip ตั้งชื่อว่า PartOfIcon1

ขั้นตอนที่ 9 : คลิ๊กที่ Frame 10 ของ Layer 2 แล้วกด F6

ขั้นตอนที่ 10 : กด (Q) Free Transform กด Shift ที่แป้นคีย์บอร์ด  แล้วคลิ๊กวงกลมขยายออกเล็กน้อย

ขั้นตอนที่ 11 :  คลิ๊กที่ Frame 10 ของ Layer 2 แล้วกด (F9) Action Script Panel แล้วพิมพ์ 
stop(); ลงไปค่ะ  (ตามภาพประกอบ)

ขั้นตอนที่ 12 : คลิ๊ก Frame 1 บน Layer 2 เปิด Properties Panel หรือ กด (Ctrl+F3) เมนู Tween เลือกคำสั่ง Motion  แล้วตรงเมนู Rotate เลือกคำสั่ง CW ค่ะ

ขั้นตอนที่ 13 : เลือก Frame 1 ที่ Layer 1 ให้กด F6 ทั้งหมด 10 ครั้ง

 

ขั้นตอนที่ 14 :  คลิ๊ก Frame 2, 4, 6, 8 แล้วกด Delete ที่แป้นคีย์บอร์ดนะคะ  เพื่อให้ icon ของเรากระพริบเวลา รันค่ะ  (ตามภาพประกอบ) 

ขั้นตอนที่ 15 : คลิ๊ก Scene1 เพื่อกลับออกมาที่ Main Scene จากนั้นสร้าง Layer ใหม่บน Layer icon ตั้งชื่อว่า InvisibleButtons 

ขั้นตอนที่ 16 : จากนั้นกด (R) Rectangle Tool วาดสี่เหลี่ยมลงไปทับ icon1  แล้วกด F8 (Convert To Symbol)  เปลี่ยนสี่เหลี่ยมให้เป็น Button ตั้งชื่อว่า InvisibleButton1 

จากนั้นดับเบิ้ลคลิ๊กเข้าไปใน InvisibleButton1 เลื่อนจุดจากตำแหน่ง Up ไปที่ Hit ตามภาพประกอบ

ขั้นตอนที่ 17 : กลับออกมาที่ Main Scene โดยคลิ๊กที่ Scene1 

จากนั้นคลิ๊กที่ Button InvisibleButton1 ที่ Stage แล้ว กด F9 (Action Script Panel) พิมพ์ Code นี้ลงไปค่ะ

on (rollOver) {

_root.mouse_over_icon1 = true;
}

on (rollOut) {
_root.mouse_over_icon1 = fstartlse;
}
on (release){
getURL("http://www.monmedia.co.th/", "blank");
}

หรือดูตามภาพประกอบนะคะ

 

ขั้นตอนที่ 18 : สร้าง Layer ใหม่ เหนือ Layer InvisibleButton ตั้งชื่อว่า action script 

แล้วคลิ๊กที่ Frame1 Layer action script กด F9 อีกครั้งค่ะเพื่อเข้าไปที่ Action Script Panel แล้วพิมพ์ Code นี้ลงไปค่ะ

_root.icon1.onEnterFrame = function() {

 if (mouse_over_icon1) {
  _root.icon1.nextFrame();
 } else {
  _root.icon1.prevFrame();
 }
};

_root.icon2.onEnterFrame = function() {
 if (mouse_over_icon2) {
  _root.icon2.nextFrame();
 } else {
  _root.icon2.prevFrame();
 }
};


_root.icon3.onEnterFrame = function() {
 if (mouse_over_icon3) {
  _root.icon3.nextFrame();
 } else {
  _root.icon3.prevFrame();
 }
};


_root.icon4.onEnterFrame = function() {
 if (mouse_over_icon4) {
  _root.icon4.nextFrame();
 } else {
  _root.icon4.prevFrame();
 }
};

เนื่องจากเรามีทั้งหมด 4 icons นะคะ  ก็เลยให้ใส่ไปเลยค่ะ คำสั่งทั้งหมดใน Frame นี้นะคะ

จากนั้นให้ทำทุกขั้นตอนใหม่ตั้งแต่ต้นจนจบค่ะ  กับทุก iconค่ะ ในส่วนของขั้นตอนที่ต้องตั้งชื่อ icon เราต้องตั้งชื่อให้สอดคล้องกับ icon นั้นนะคะ  รวมทั้งการใส่ script ด้วยค่ะ  เดี๋ยวจะรันกันไม่ออกนะคะ

เอาละค่ะ !!! เราเสร็จแล้วนะคะถ้าทำได้ครบ ก็ให้ Run ดูค่ะ  กด (Ctrl+Enter) เป็นการรันดูค่ะ

ส่วน File Master Download ได้ ที่นี่ เลยค่ะ

มีความสุขทุกวันกันมากๆๆ นะคะ

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