Amp_5150110156: Tech&Tips

เรื่องที่1การทำ Flash Pop-up Menu

การทำ POP-UP MENU ด้วยการวาด layer จาก Dreamweaver มาแล้ว คราวนี้ก็มาถึง Flash
1. ให้คุณใช้เครื่องมือ Rectangle ทำการวาดรูปปุ่มขึ้นมา 1 รูป ใช้ Text Tool เขียน menu ได้เลย

2. เสร็จแล้วให้ใช้เครื่องมือ Arrow ทำการ Selection รูปปุ่ม แล้วกด F8 เพื่อทำการเปลี่ยนรูปให้เป็น Symbol ที่หน้าต่าง Symbol Properties ในช่อง Name ให้ใส่เป็น Menu ส่วนช่อง Type ให้กำหนดเป็น Button แล้วกด OK

3. กด F8 อีกครั้ง เพื่อเลือก Covert to Symbol อีก อันหนึ่ง โดย ในช่อง Name ให้ใส่เป็น popmenu ส่วนช่อง Type ให้กำหนดเป็น Movie clip แล้วกด OK

4. ตอนนี้เราเข้ามาอยู่ในส่วนของการแก้ไข Movie clip ที่เราสร้างไว้แล้วนะครับ ให้กด Ctrl+L เพื่อเปิดหน้าต่าง Library ขึ้นมา คลิ๊กที่ชื่อ Menu ที่อยู่ใน List (หรือชื่ออื่นที่คุณตั้ง) แล้วลากลงมาใน Layer1 จัดปุ่มนี้ให้อยู่กึ่งกลางของ Movie clip (สังเกตุได้จากเครื่องหมายบวกที่อยู่บนพื้นที่ทำงาน)

5.กด Ctrl+F8 เพื่อ Create new Symbol ทำ 2 อัน อัน แรก ทำ Home อันที่ 2 ทำ Board โดยเลือก Type เป็น Button

6. เข้าไปใน Movie clip ที่ชื่อว่า popmenu กด F6 เพื่อใส่คีย์เฟรม ใน เฟรม ที่2 ของ Layer แรก แล้วดึง Button Home กับ Board จากหน้าต่าง Library มาไว้ในตำแหน่งที่ต้องการให้เป็นปุ่มย่อย

7. จากนั้น Insert -> Layer เข้ามาอีก เป็น Layer2 และให้ดึง Layer2 ลงมาด้านล่าง เพื่อให้ Layer1 อยู่นด้านบน

8. กด Ctrl+F8 เพื่อ Create new Symbol ในช่อง Name ใส่ HideMenu เลือก Type เป็น Button

7. ให้คลิ๊กที่เฟรม Hit กด F7 แล้วใช้เครื่องมือ Rectangle วาดรูปสี่เหลี่ยมขนาดพอเหมาะลงไป ไม่ต้องสนใจว่าจะเป็นสีอะไร เพราะว่าเวลานำไปใช้จริง เราจะไม่เห็นรูปสี่เหลี่ยมนี้ (เพราะว่า Flash จะนำรูปในเฟรม Hit ไปกำหนดพื้นที่การตอบสนองการคลิ๊ก จะไม่นำไปแสดงผล)

8. เสร็จแล้วกลับไปยังส่วนของการแก้ไข Movie clip กันต่อ (ให้คลิ๊กขวาที่ Movie clip ที่ชื่อ PopMenu ในหน้าต่าง Library เลือก Edit ครับ) ในเฟรมที่ 2 ให้ลากปุ่มที่ชื่อ HideMenu จากหน้าต่าง Library ลงมาในพื้นที่ทำงาน แล้วปรับขนาดของปุ่มนี้ให้ใหญ่กว่าวัตถุทั้งหมดที่อยู่ใน Layer1 เฟรมที่2, แล้วดับเบิ้ลคลิ๊กที่วัตถุนี้ จะมีหน้าต่าง Instance Properties ขึ้นมา ให้คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มเครื่องหมายบวก เลือกคำสั่ง On MouseEvent แล้วเลือก Event เป็น Roll Over หลังจากนั้นไปคลิ๊กที่ปุ่มบวก เลือกคำสั่ง Goto แล้วใส่เลข 1 ในช่อง Number เสร็จแล้วกด OK

9.ดับเบิ้ลคลิ๊กที่ปุ่มที่อยู่ในเฟรมที่ 2 ใน Layer1 จะมีหน้าต่าง Instance Properties ขึ้นมา ให้คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Get URL ในช่อง URL ให้ใส่ URL ที่คุณต้องการจะลิงค์ไปเช่น http://www.webthaidd.com/main.php จะเห็นว่า Flash จะใส่คำสั่ง On Mouse Release มาให้โดยอัตโนมัติ (อีกอันทำแบบเดิม เปลี่ยน url เอา )

10. คราวนี้ไปที่ Layer1 เฟรมที่1 แล้วดับเบิ้ลคลิ๊กที่ปุ่มที่อยู่ในเฟรมนี้ ในหน้าต่าง Insatnce Properties คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง On Mouse Event แล้วเลือก Event เป็น Roll Over คลิ๊กที่ปุ่มบวกอีกครั้ง เลือกคำสั่ง Go to ในช่อง Number ให้ใส่เป็น 2

11. ให้คุณดับเบิ้ลคลิ๊กที่เฟรมที่ 1 ในเลเยอร์ไหนก็ได้ แล้วเลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Stop แล้วกด OK

กด ctrl + Enter เพื่อ แสดง ผล ถ้าทำ Flash Pop-up Menu นั้นควรจะใส่แท็ก <param name="wmode" value="transparent"> เข้าไปในแท็ก <Object> เพื่อ ทำให้ Flash ของเราจะมีพื้นเป็นลักษณะโปร่งใส (ตรงส่วนที่ไม่มีการ Fill สีลงไป

เรื่อง 2 การซูมภาพเข้า-ออก

1. สร้างเอกสารขึ้นมาใหม่ ขนาด 310 x 310 โดยไปที่ Modify > Document หรือกดคีย์ลัด (Ctrl+J)

2. ตั้งชื่อ layer 1 เป็น zoom process และ import รูปมาไว้บน stage โดยไปที่ File > Import > Import to Stage หรือกด (Ctrl+R)

3. คลิกที่รูปภาพ กด F8 หรือคลิกขวาที่รูป เลือก convert to symbol เลือกเป็น movie clip ตั้งชื่อว่า picture

4. ตั้งชื่อ Instance Name ของ movie clip ที่ชื่อว่า picture ว่า zoom

5. ดับเบิ้ลคลิกที่ movie clip ชื่อว่า picture ที่สร้างขึ้นมา หลังจากนั้น ไปยังเฟรมที่ 10 กด F6 เพื่อ insert keyframe หลังจากนั้น กด F9 เพื่อใส่ action script ลงไป ดังนี้

stop();

6. กลับไปยังเฟรมที่ 1 แล้วใช้เครื่องมือ Free Transform Tool หรือกด (Q) และย่อรูปให้เล็กลง

7. คลิกขวาที่ frame 1 เลือก create motion tween

8. กลับไปที่ scene หลัก แล้วสร้าง layer ใหม่ ตั้งชื่อว่า button +

9. ใช้เครื่องมือ Text Tool หรือกด (T) พิมพ์คำว่า + zoom ลงไป หลังจากนั้นคลิกขวาที่ text เลือก convert to symbol เลือกเป็น button ตั้งชื่อว่า zoom ดังรูป

10. หลังจากนั้น คลิกขวาที่ ปุ่มที่สร้างขึ้นมา เลือก action script หรือ กด F9 ใส่ action script ลงไปดังนี้

on (release) {
_root.mouse_over_zoom = true;
}

11. ใช้เครื่องมือ Text Tool หรือกด (T) พิมพ์คำว่า - zoom ลงไป หลังจากนั้นคลิกขวาที่ text เลือก convert to symbol เลือกเป็น button ตั้งชื่อว่า zoom out ดังรูป

12. หลังจากนั้น คลิกขวาที่ ปุ่มที่สร้างขึ้นมา เลือก action script หรือ กด F9 ใส่ action script ลงไปดังนี้

on (release) {
_root.mouse_over_zoom = fstartlse;
}

13. สุดท้าย สร้าง layer ขึ้นมาใหม่ ตั้งชื่อว่า action คลิกที่เฟรมแรก กด F9 แล้วใส่ action script ลงไปดังนี้

_root.zoom.onEnterFrame = function() {
if (mouse_over_zoom) {
_root.zoom.nextFrame();
} else {
_root.zoom.prevFrame();
}
};

14. ทดสอบ ด้วยการกด Ctrl+Enter

เรื่องที่3: การทำภาพหมุนรอบด้าน

วิธีการสร้างภาพ 3D หมุนๆใน flash ให้หมุนรอบตัวเลยแบบ 360 องศา

flash3d tutorial ทำภาพสามมิติหมุนๆ

วิธีการสร้างภาพ 3D หมุนๆใน flash ให้หมุนรอบตัวเลยแบบ 360 องศาไปเลยครับ สิ่งที่ต้องเตรียมคือรูปภาพที่เราจะมาสร้างภาพสามมิติกันครับ โดยภาพที่เราจะนำมานี้ต้องถ่ายให้ให้ เป็นมุมๆไปครับแบบว่ารอบตัวเลยครับ ถ้าอย่างได้อย่างละเอียดๆก็ให้ถ่ายรูปมาแบบละเอียดๆ เลยครับ มาดูกันครับ

อันนี้เป็นตัวอย่างครับ

1 เปิดโปรแกรม flash ขึ้นมาสร้างเอกสารใหม่ ขึ้นมาแล้วเลือกขนาดตามต้องการเลยครับ

flash3d tutorial ทำภาพสามมิติหมุนๆ

2 ให้import รูปภาพที่เราถ่ายมาเข้าไป โดยให้ไปที่ file > import > import to Library… แล้วรูปมันจะเข้ามาเก็บไว้ใน่วนของ library