Make your own free website on Tripod.com
กลับไปหน้า Dreamweaver Tutorialsกลับไปหน้า Dreamweaver Tutorialsกลับไปหน้า Dreamweaver Tutorials

การสร้างภาพเคลื่อนไหวด้วย 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

| Home | My Bookmark | Dreamweaver Tutorials | Web Design Tips | Just for Fun | About |

Copyright © 2000 Sleepy Design. All rights reserved.