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


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