ใบความรู้ที่ 11 เรื่อง การสร้างตัวอักษรว่ิงรอบวัตถุ

รายวิชา ง 30247 การสร้างงานแอนิเมชัน ชั้นมัธยมศึกษาปีที่ 5 หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างตัวอักษรวิ่งรอบวัตถุ เวลา 2 ชั่วโมง 1. การสร้างตัวอักษรว่ิงรอบวัตถุ ทางเลือกหนึ่งในการเพิ่มจุดเด่นให้กับองค์กรก็คือการสร้างโลโก้ ซึ่งในปัจจุบันโลโก้ท่ีสามารถเคลื่อนไหวได้สามารถเพ่ิมความน่าสนใจให้กับชิ้นงานมากกว่าในอดีตซึ่งโลโก้เป็นเพียงแค่ภาพนิ่งเท่านั้น ซึ่งการสร้างโลโก้เคลื่อนไหวนี้ต้องอาศัยการท างานของ 2 โปรแกรม คือโปรแกรม Adobe Photoshop ใช้ส าหรับการสร้างข้อความรูปวงกลม และโปรแกรม Macromedia Flash ใช้ส าหรับการก าหนดการเคลื่อนไหวและเพ่ิมความสมจริงให้กับการเคลื่อนไหว 2. ขั้นตอนการสร้างตัวอักษรว่ิงรอบวัตถุ 1. การสร้างตัวอักษรจากโปรแกรม Adobe Photoshop 2. การก าหนดรูปแบบการหมุนให้กับตัวอักษร 3. เพ่ิมความสมจริงในการหมุนให้กับชิ้นงานโดยใช้ LayerMask

ตัวอย่างการสร้างตัวอักษรว่ิงรอบวัตถุ 1. เปิดโปรแกรม Adobe Photoshop เพื่อสร้างข้อความที่มีลักษณะเป็นวงกลม

2. คลิกเมนู File >>New… เพ่ือสร้างชิ้นงานใหม่

3. ก าหนดค่า Transparent ให้กับ Background Contents เพ่ือก าหนดให้พ้ืนหลังมีลักษณะโปร่งแสง

4. ใช้เครื่องมือ (EllipeTool) วาดรูปบริเวณกลางชิ้นงาน โดยในขณะที่ท าการวาดให้กดปุ่ม

Shift ที่แป้นพิมพ์ค้างไว้เพ่ือสร้างรูปวงกลม

5. คลิกเลือกท่ีเครื่องมือ (TextTool) แล้วน าเมาส์มาวางที่บริเวณเส้นขอบของรูปวงกลม

6. พิมพ์ชื่อ นามสกุล ชื่อเล่น ห้องเรียน และโรงเรียนตามความโค้งของเส้นรอบวง พร้อมทั้งก าหนดสีและขนาดข้อความตามต้องการ

7. เลือกเมนู Image >>Trim จากนั้นคลิกปุ่ม OK ที่หน้าต่าง Trim เพ่ือก าหนดให้ขนาดของชิ้นงานพอดีกับวัตถุ

8. เราจะได้ชิ้นงานที่มีขนาดพื้นที่เท่ากันกับวัตถุ(ข้อความ)

9. คลิกเลือกท่ี Layer Shape1 แล้วกดปุ่มถังขยะเพ่ือลบวัตถุ (รูปวงกลม) รูปวงกลมจะหายไปดังภาพด้านขวา

10. เลือกเมนู File >> Save for web & Devices เพ่ือบันทึกไฟล์

11. เลือกไฟล์ภาพแบบ Gif แล้วคลิกปุ่ม Save

12. บันทีกไฟล์ชื่อ “ข้อความ.gif” เก็บไว้ที่ไดร์ D:\

13. เปิดโปรแกรม Macromedia Flash เพ่ือก าหนดการเคลื่อนไหวให้กับวัตถุ

14. เลือกเมนู Insert >> New Symbol… เพ่ือสร้าง Symbol ใหม่ให้กับข้อความ

15. ใส่ค่า “Text” เป็นชื่อและก าหนดรูปแบบเป็น Movie Clip ให้กับ Symbol ใหม่

16. เลือกเมนู File >> Import >> Import To Stage.. เพื่อน าภาพตัวอักษรมาให้ใช้งาน

17. เลือกภาพที่เราสร้างจากโปรแกรม Adobe Photoshop (D:\ข้อความ.gif) แล้วกดปุ่ม Open

18. จะ

ปรากฎข้อความดังภาพด้านล่าง จากนั้นคลิกเมาส์ขวาเฟรมที่ 50 บน Timeline เลือกเมนู Insert Keyframe

19. ปรากฏแถบสีเทาตั้งแต่เฟรมที่ 1 ถึง เฟรมที่ 50 แล้วให้เราคลิกเลือกเฟรมที่ 1

20. ที่หน้าต่าง Property ก าหนดค่าดังนี้ 1. Tween => Motion เพ่ือก าหนดการเคลื่อนไหวแบบไม่เปลี่ยนรูปร่าง 2. ก าหนดค่า Rotate

- CW เพ่ือให้วัตถุหมุนตามเข็มนาฬิกา - CCW เพ่ือให้วัตถุหมุนทวนเข็มนาฬิกา

21. คลิกเลือก Scene1 เพ่ือกับไปท างานต่อที่ Scene1

22. เลือกเมนู File >> Import >> Import To Stage.. เพื่อน าภาพมาให้ใช้งาน

23. เลือกภาพเพ่ือใช้ส าหรับให้ข้อความวิ่งรอบ (D:\ยินดี.jpg) แล้วกดปุ่ม Open

24. จัดต าแหน่งและขนาดของรูปภาพตามต้องการ

25. สร้าง Layer 2 แล้วลาก Text จากหน้าต่าง Library มาวางทับรูปภาพ

26. ให้เครื่องมือ (FreeTrasformTool) หมุนตัวอักษรเพ่ือให้ดูสมจริงดังภาพตัวอย่าง

27. ใช้เครื่องมือ (FreeTrasformTool) ปรับขนาดของตัวอักษรให้ดูสมจริงมากยิ่งขี้นดังภาพตัวอย่าง

28. คลิกปุ่ม (Insert Layer) เพ่ือสร้าง Layer 3

29. คลิกเมาส์ขวาของเฟรมที่ 1 ของ Layer 1 เลือกค าสั่ง Copy Frames เพ่ือท าการคัดลอกเฟรม

30. คลิกเมาส์ขวาของเฟรมที่ 1 ของ Layer 3 เลือกค าสั่ง Paste Frames เพ่ือท าการวางเฟรม

31. ท าการทดสอบแอนิเมชันโดยกดคีย์ <Ctrl + Enter>