เรื่อง :: การสร้างปุ่ม Start และ Stop เพื่อควบคุม Timeline

ก่อนที่ท่านจะอ่านบทความนี้ ผมอยากให้ท่านลอง click ปุ่ม Start และ Stop เพื่อลองใช้งานและทำความเข้าใจในเรื่องนี้ดูก่อน ที่ปุ่มด้านบนครับ

ผมขอตกลงกับท่านก่อนนะครับว่า...
1. ท่านต้องเข้าใจและสามารถใช้ object พวก Layer และ Timeline เป็นแล้ว
2. ผมจะไม่ขอกล่าวถึงการสร้าง Timeline และ Layer ในบทความนี้
3. ใน Dreamweaver MX version 7 นั้น ท่านต้องลงตัว update เป็นเวอร์ชั่น 7.1 จึงจะสามารถใช้งาน Timeline ได้

---

วิธีการสร้างปุ่มควบคุม Timeline

1. ให้ท่านสร้าง Layer พร้อมทั้ง Timeline และกำหนดทิศทางไปในรูปแบบที่ท่านต้องการ

2. จากนั้นให้ท่าน Click ที่หน้าต่าง Object หรือหน้าต่าง Insert ( ในกรณีโปรแกรมเป็น MX ) แล้วที่หน้าต่างนี้ให้ท่านเลือกไปที่ object ของการใช้งาน Form ดังรูป Pic.1

Pic.1

3. ที่หน้าต่างของ Form ให้ท่าน click เลือกที่ object ของ Button เมื่อเลือกแล้วท่านจะได้ปุ่มสำหรับกดขึ้นมาที่หน้าเพจของท่าน ให้ท่านทำการสร้างปุ่มเช่นเดียวกันนี้อีก 1 ปุ่ม โดยวิธีการเดียวกัน

4. จากนั้นให้ท่าน click เลือกที่ปุ่มที่ท่านสร้างขึ้นมา แล้วให้ท่านกำหนดค่าต่าง ๆ ที่หน้าต่างของ Properties ครับ ดังรูป Pic.2

 

 

 

5. ให้ท่านทำการกำหนดค่าดังนี้ >>> ที่ Label ให้ใส่คำที่ท่านต้องการจะปรากฏอยู่บน Button ( ในที่นี้ผมกำหนดเป็น Start เพื่อสื่อความหมาย ) และ ที่ Action ให้ click เลือกที่ None ทำเช่นเดียวกันนี้ทั้ง 2 ปุ่มครับ

6. จากนั้นให้ท่านเปิดหน้าต่าง Behaviors ขึ้นมาครับ เมื่อเปิดขึ้นมาแล้วให้ท่านกลับมา click เลือกปุ่มที่ท่านสร้างขึ้นมา

7. หลังจากนั้นให้ท่านมาที่หน้าต่าง Behaviors แล้วทำการคลิ๊กไปที่รูปเครื่องหมายบวก (+) ดังรูป Pic.3 ครับ แล้วเลือกไปที่เมนู Timeline และเลือกไปที่การกระทำที่คุณต้องการครับ ในรูปตัวอย่างผมเลือกที่ Play Timeline เพื่อให้ปุ่มนี้เป็นปุ่มในการใช้ควบคุมในเรื่องของการเริ่มต้นเล่นของ Timeline ที่ปุ่มอื่นก็ให้คุณกำหนดเช่นเดียวกัน เพียงแต่ให้กำหนดการกระทำอย่าให้ซ้ำกันกับปุ่ม ๆ ที่กำหนดไปแล้ว

Pic.3
8. เมื่อเรา click ไปที่ Play Timeline หรือ Stop Timeline แล้วก็จะมีหน้าต่างเกิดขึ้นมาถามเราอีกว่า จะให้เรากำหนดการกระทำนี้ที่ Timeline ที่เท่าไหร่ ก็ให้เราเลือก Timeline ก็ให้เราเลือก Timeline ที่เราต้องการควบคุม จากนั้นก็ OK ครับ

9. ทำเช่นเดียวกันนี้ทั้ง 2 ปุ่มที่เราสร้าง คือ ปุ่ม Start กับ Stop ครับ

10. ให้ท่านลอง Previews ดูกับ Browser ของท่านครับ และลองใช้งานปุ่มที่สร้างขึ้นมาดูครับ

ก็เป็นอันเสร็จสิ้นการสร้างปุ่มบังคับ Timeline ครับ ลองนำไปประยุกติ์ใช้กับการออกแบบเว็บเพจของท่านดูนะครับ ถ้าติดขัดประการใดก็ Post คำถามได้ที่ webboard ของ website นะครับ