Mondeemedia: สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (Advanced and attractive photo flash menu)

       มนต์ มีเดีย สวัสดีค่ะ กลับมาแล้วนะคะหลังจาก
       ห่างหายไปหลายเดือนเลยทีเดียวค่ะติดภารกิจ
       หลากหลายประการ สำหรับผู้ที่ติดตาม 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

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

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash File--> New--> Flash Document และสามารถ Download photos ที่ใช้บทเรียนนี้ได้ ที่นี่ ค่ะ

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

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อใหม่ว่า photo1

ขั้นตอนที่ 4 : เลือกเมนู File > Import > Import to Library แล้วเลือกภาพที่เราเตรียมไว้จาก Folder ที่เราเก็บเลือกภาพทั้งหมดโดยการกด Shift และ Click พร้อมกัน จากนั้นคลิก Open จากนั้นให้เปิดหน้าต่าง Library (Ctrl + L) คุณจะได้เห็นภาพที่ Import เข้ามาแล้ว 3 ภาพใน Library

ขั้นตอนที่ 5 : ใช้ Selection Tool (กด V) เลือกภาพจาก Library มาวางบน stage ตามตำแหน่งที่เราต้องการดังภาพตัวอย่าง

ขั้นตอนที่ 6 : ใช้คำสั่ง Selection Tool (กด V) และเลือกภาพที่ 1 ใน เมนูของเรา

ขั้นตอนที่ 7 : ขณะนี้ภาพที่ 1 ของเรากำลังถูกเลือกอยู่ กด F8 เพื่อเปลี่ยนเป็น Movie Clip และตั้งชื่อ photo1_mc ให้ดังภาพตัวอย่างค่ะ

ขั้นตอนที่ 8 : Movie Clip ของเรายังคงถูกเลือกอยู่ ให้ไปตั้งค่าการทำงานที่ Properties Panel ใต้ Stage ให้กำหนดชื่อ Instance name ให้กับ Movie Clip ของเราที่ด้านซ้ายว่า “Photo1_mc”

ขั้นตอนที่ 9 : ดับเบิ้ลคลิ๊กที่ Movie Clip บน Stage และให้เลือก Selection Tool (V) ซึ่งหลังจากดับเบิ้ลคลิ๊กแล้วเราจะเข้าไปอยู่ข้างในของ Movie Clip สังเกตได้จากภาพตัวอย่างค่ะ

ขั้นตอนที่ 10 : ให้ทำการดับเบิ้ลคลิ๊กเพื่อเปลี่ยนชื่อ Layer1 เป็นชื่อใหม่ว่า image1

ขั้นตอนที่ 11 : จากนั้นเลือกที่ภาพที่ 1 อีกครั้ง กด F8 (Convert to Symbol) เปลี่ยน ภาพเป็น Movie Clip อีกครั้งหนึ่ง แล้วตั้งชื่อว่า photo1_mc_inside

ขั้นตอนที่ 12 : คลิก frame15 และกด F6 และในขณะนี้เราอยู่ที่ frame 15 จากนั้นเราจะใช้คำสั่ง Free Transform Tool (Q) และคลิกไปที่ภาพแล้วทำการขยายภาพให้ใหญ่ขึ้นตามภาพตัวอย่าง

ขั้นตอนที่ 13 : หลังจากนั้น ใช้คำสั่ง Selection Tool (V) และคลิก 1 ครั้งที่ภาพที่เราได้ขยายแล้ว ต่อจากนั้นไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage ข้างซ้าย ให้คลิกที่เมนู Filter คลิก 1 ครั้ง จากนั้นให้คลิกที่เครื่องหมายบวก (+) เลือกหาคำสั่ง Adjust Color แล้วกำหนดตามภาพตัวอย่างค่ะ

ขั้นตอนที่ 14 : คลิกขวาระหว่าง Frame1 และ Frame15 บนพื้นสีเทาๆ จากนั้นเลือกคำสั่ง Create Motion Tween จากเมนูที่ปรากฏค่ะ

ขั้นตอนที่ 15 : คลิกที่ Frame7 และกด F6 key. จากนั้นเราจะยังอยู่ที่ Frame 7 แล้วให้กด F6 Key 2 ครั้งค่ะ

ขั้นตอนที่ 16 : จากนั้นกลับไปที่ Frame 7 และใช้คำสั่ง Selection Tool (V) จากนั้นเลื่อนภาพไปข้างขวาเล็กน้อย

ขั้นตอนที่ 17 : แล้วเลือก Frame 8 และเลื่อนภาพกลับไปทางซ้ายเล็กน้อย

ขั้นตอนที่ 18 : เลือก Frame 9 แล้วเลื่อนภาพไปด้านบนเล็กน้อย

ขั้นตอนที่ 19 : สร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า Mask ค่ะ

ขั้นตอนที่ 20 : เลือกที่ Frame 1 ของ Layer mask ใช้คำสั่ง Rectangle Tool ( R) และให้ไปกำหนดในสี ในเมนู Tool Panel ให้กำหนด สีของ Stroke ไม่ให้ Active โดยเลือกที่ไอคอนดินสอ จากนั้นในช่องสี่เหลี่ยมเล็กๆ ให้เลือกสีพื้นเป็นสีแดง เพื่อเป็นสีพื้นในการวาดสี่เหลี่ยม หลังจากเลือกเรียบร้อยแล้วก็ให้วาดสี่เหลี่ยมที่ Frame1

ขั้นตอนที่ 21 : เลือกที่ Layer mask และเปลี่ยนเป็น mask โดยการคลิกขวาบน Layer Mask แล้วเลือกคำสั่ง Mask ดูจากภาพตัวอย่าง

ขั้นตอนที่ 22 : สร้าง Layer ใหม่เหนือ Layer mask แล้วตั้งชื่อว่า textline

ขั้นตอนที่ 23 : คลิก Frame 5 ของ Layer text จากนั้นกด F6 key. และในขณะที่เราอยู่ Frame 5 ใช้คำสั่ง Rectangle Tool (R) ใน Color Tool Panel ให้กำหนด Stroke สีเส้น ไม่ใช้ และกำหนดสีพื้นเป็นสี #96E12F แล้ววาดสี่เหลี่ยม Size 150 x 80 px ไปที่ข้างใต้ของรูปที 1 ดูจากภาพตัวอย่างค่ะ

ขั้นตอนที่ 24 : ในขณะที่เลือกสี่เหลี่ยมอยู่ให้กด F8 เพื่อเปลี่ยน Movie Clip ตั้งชื่อว่า TextLine_mc

ขั้นตอนที่ 25 : คลิกที่ Frame 15 กด F6 key

ขั้นตอนที่ 26 : กลับไปที่ Frame 5 ที่ Layer textline กด (Q) เพื่อใช้คำสั่ง Free Transform Tool จากนั้นกด Alt ที่แป้นคีย์บอร์ดค้างไว้แล้วลากสี่เหลี่ยมลงมา