Transcript การสร้าง Symbol แบบปุ่ม

การสร้าง SYMBOL แบบปุ่ม
1. เปิ ดเอกสาร Flash เลือกเมนู File -> New
แล้วเลือก Flash File (ActionScript 2.0)
2. ไปทีเ่ มนู Insert -> New Symbol
3. ทีห่ น้าต่าง Create New Symbol
- Name ให้กาหนดชือ่ Symbol ตามต้องการ
- Type
กาหนดเป็ น Button
ประเภทของ SYMBOL แบ่งเป็ น 3 ชนิด
- ซิมโบลแบบกราฟิ ก (Graphic Symbols) สาหรับ
สร้างภาพและส่วนประกอบของภาพเคลือ่ นไหว โดยแสดงภาพใน
แบบภาพนิง่ ไม่สามารถใส่เสียงได้ แต่สามารถโต้ตอบกับผู ใ้ ช้ได้
- ซิมโบลแบบปุ่ม (Button Symbols) ใช้สร้างปุ่มกด
เพือ่ โต้ตอบกับผู ใ้ ช้โดยผ่านการคลิกเมาส์ วางเมาส์เหนือปุ่ม
สามารถใส่เสียงและ action ได้
- ซิมโบลแบบมูฟวีคลิป (Movie Clip Symbols) ใช้
สร้างภาพเคลือ่ นไหว โดยนาไปใช้ประกอบกับมูฟวีทสี่ ร้างขน้
การสร้าง SYMBOL แบบปุ่ม
4. เมือ่ เข้าสู่หน้าต่าง Edit Symbol จะปรากฎเหตุการณ์ของ
ปุ่ม 4 แบบ คือ
- UP
เกิดเมือ่ เรียกใช้งาน
- Over
เกิดเมือ่ นาเมาส์ไปวางเหนือปุ่ม
- Down เกิดเมือ่ นาเมาส์ไปคลิกปุ่ม
- Hit
เป็ นการกาหนดพืน้ ทีต่ อบสนองกับเมาส์เมือ่ มี
เหตุการณ์ Over และ Down
หน้าต่าง Edit Symbol
การสร้าง SYMBOL แบบปุ่ม
5. ที่ Layer1 ในส่วนของ Up ให้วาดรูป สีเ่ หลีย่ มสีน้าเงินหนง่ รูป
คลิกขวาที่ Layer1 แล้วเลือก Insert Layer จะได้
Layer2 ให้พมิ พ์ขอ้ ความ โดยใส่ชอื่ ของตนเอง และกาหนดสี
ข้อความเป็ นสีเหลือง
การสร้าง SYMBOL แบบปุ่ม
6. ให้ลากแถบแสงคลุมที่ Over ในส่วนของ Layer1 และ
Layer2 แล้วคลิกเมาส์ปุ่มขวาเลือก Insert KeyFrame
การสร้าง SYMBOL แบบปุ่ม
7. เปลีน่ สีฉากหลังของภาพสีเ่ หลีย่ มใน Layer1 เป็ นสี เหลือง และ
เปลีย่ นสีขอ้ ความใน Layer2 เป็ นสีน้าเงิน
การสร้าง SYMBOL แบบปุ่ม
8. ให้ลากแถบแสงคลุมที่ Down ในส่วนของ Layer1 และ
Layer2 แล้วคลิกเมาส์ปุ่มขวาเลือก Insert KeyFrame
แล้วกาหนดสีของสีเ่ หลีย่ มใน Layer1 เป็ นสีน้าเงิน และ ข้อความ
ใน Layer2 เป็ นสีเหลือง
การสร้าง SYMBOL แบบปุ่ม
9. คลิกเมาส์ท ี่ Scene 1
การสร้าง SYMBOL แบบปุ่ม
10. ให้ลาก ซิมโบลทีส่ ร้างขน้ มาวางไว้ท ี่ Scene ดังภาพ
การสร้าง SYMBOL แบบปุ่ม
11. เนือ่ งจากเราจะนาปุ่มไปใช้ใน HTML ดังนัน้ จงต้องทาการปรับ
ขนาดของ Scene ให้พอดีกบั ปุ่ม โดยคลิกเลือกเมนู
Modify -> Document
การสร้าง SYMBOL แบบปุ่ม
12. ทาการสร้าง HyperLink ไปยังเว็บไซต์ทตี่ ้องการ เช่น
Google.com โดยกดปุ่ม Shift + F3 หรือ เลือก
เมนู Window Behaviors
การสร้าง SYMBOL แบบปุ่ม
13. ทีห่ น้าต่าง BEHAVIORS คลิกทีป่ ุ่มเคือ่ งหมาย + เลือก
Web แล้วเลือก Go to Web Page
การสร้าง SYMBOL แบบปุ่ม
14. ทีห่ น้าต่าง Go to URL กาหนดชือ่ เว็บเพจ เช่น
test.html
Open In กาหนดเป็ น _blank
การสร้าง SYMBOL แบบปุ่ม
15. ทาการบันทกไฟล์ เลือกเมนู File -> Save โดยตัง้ ชือ่ เป็ น
myButton.fla
16. ทดสอบการทางานของ Symbol และให้โปรแกรมสร้างไฟล์
swf โดยกดปุ่ม Ctrl + Enter
การนาไฟล์ FLASH มาใส่ไว้ในเว็บเพจ
1. ทีโ่ ปรแกรม DreamWeaver ให้เลือกเมนู Inser ->
Media -> SWF