การสร้างภาพเคลื่อนไหวด้วย Timeline
Dreamweaver สามารถสร้างการเคลื่อนไหวให้รูปภาพหรือตัวอักษรที่อยูใน Layer ได้ การเคลื่อนที่นี้ใช้หลักการของ Dynamic HTML ที่เป็นการเขียนสคริปท์ให้วัตถุเคลื่อนที่ ซึ่งจะแตกต่างจากการทำภาพเคลื่อนไหวด้วยวิธีการของ gif Animation ที่ต้องอาศัยภาพหลายๆ ภาพมาเรียงต่อๆ กัน จึงทำให้เกิดเป็นภาพเคลื่อนไหว
ตัวอย่างการสร้างภาพเคลื่อนไหวด้วย Timeline
เครื่องมือที่ใช้สำหรับการสร้างภาพเคลื่อนไหวนี้ประกอบด้วย Layer และ Timeline
ถ้าต้องการทำให้รูปภาพเคลื่อนที่ให้เตรียมหารูปไว้ก่อนจากนั้นก็มาลงมือทำกันเลย
1. สร้าง Layer ขึ้นมาก่อน โดยไปที่เมนู Insert > Layer หรือคลิ๊กที่ Layer Icon ใน Object Tools Box
แล้ววาด Layer ตามขนาดที่ต้องการ ผมวาง Layer ไว้ด้านซ้ายของจอ
2. ใส่ข้อความหรือรูปภาพลงใน Layer (ภาพหรือตัวอักษรจะเคลื่อนที่ได้ต้องอยู่ใน Layer)
ผมพิมพ์ว่า "Welcome to my Homepage" ลงไปใน Layer 1
3. จากนั้นให้เปิด Timeline Palette ขึ้นมา (ไปที่เมนู Window > Timeline)
ตอนนี้เราจะ ให้ Layer 1 ที่มีข้อความ "Welcome to my Homepage" เลื่อนไปทางขาวให้ทำดังนี้
4. ทำการเลือก Layer 1 ที่สร้างไว้ โดยคลิ๊กที่เส้นขอบของ Layer
5. เมื่อเลือก Layer แล้ว จากนั้นไปที่เมนู
Modify > Timeline แล้วคลิ๊กเลือกคำสั่ง Add Object to Timeline
6. ใน Timeline Palette จะปรากฎแถบสีฟ้าขึ้นมา แสดงว่าทำถูกวิธีแล้ว
7. จากนั้นคลิ๊กที่ Frame 15 ใน Timeline Palette
8. .ให้ลาก Layer 1 มาทางขาว
โปรดสังเกต ถ้าคุณทำถูกวิธีจะมีเส้นตรงตาม Layer มาด้วย ถ้าไม่มี ให้ทำใหม่จนกว่าจะ มีเส้นก็ขึ้น
9. คลิ๊กที่ช่อง Autoplay เพื่อสั่งให้ Layer 1 เคลื่อนที่ทันทีตอนที่หน้านี้ถูก load ขึ้นมาใน Browser (ถ้าต้องการให้ Layer นี้เล่นซ้ำๆ ให้คลิ๊กที่ช่อง Loop ด้วย)
10. ทดลองคลิ๊กที่ปุ่มขาว จะเห็นว่า Layer 1 เคลื่อนที่ได้
11. Layer ที่เคลื่อนที่นี้เราทำให้มันเคลื่อนที่ตามแนวเส้นตรง ซ้าย-ขาว ถ้าเราต้องการให้มันเคลื่อนที่แบบโค้งก็สามารถทำได้
11.1 คลิ๊กที่ Frame ที่ 8 ใน Timeline Palette (แล้วแต่นะครับ คลิ๊กที่ Frame ไหนก็ได้ ตามความเหมาะสม อันนี้ผมทดลองประมาณ Frame กลางๆ น่ะ)
11.2 จากนั้นไปที่เมนู Modify > Timeline แล้วคลิ๊กเลือกคำสั่ง Add Keyframe
11.3 แล้วลาก Layer 1 ลงมา จะเห็นว่า เส้นจะโค้งตาม Layer มาด้วย
11.4 ทดสอบโดยการกดปุ่ม ซ้าย-ขาว ดูการเคลื่อนที่
Note : ใน 1 Timeline จะ Add Keyframe หลายอันก็ได้ คือคุณสามารถทำให้วัตถุวิ่งโค้งไป โค้งมาได้ โดยใช้วิธีการในข้อ 11.1 - 11.3 กับโค้งอื่นๆ
12. Save แล้ว Test ใน Browser
ที่มา http://sleepydesign.tripod.com/timeline.html |