2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0...

12
ใบความรู้ที12 เรื่อง การสร้างแว่นขยาย รายวิชา 30247 การสร้างงานแอนิเมชัน ชั้นมัธยมศึกษาปีท5 หน่วยที2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย เวลา 4 ชั่วโมง 1. การสร้างแว่นขยาย โปรแกรม Macromedia Flash สามารถเขียนชุดคาสั่ง (Action Script) ในการควบคุมการสร้างงาน แอนิเมชันได้ ซึ่งในหัวข้อนี้จะเรียนรู้ถึงการประยุกต์ใช้ชุดคาสั่งในการกาหนดคุณสมบัติให้กับวัตถุที่สร้างขึ้น (แว่นขยาย) โดยการเขียนชุดคาสั่งควบคุมการทางานของแว่นขยาย โดยกาหนดให้เมื่อผู้ใช้งานเลื่อนแว่นขยาย ผ่านบริเวณใด บริเวณนั้นจะแสดงภาพให้มีลักษณะใหญ่ขึ้นกว่าปรกติ ดูราวกับว่าแว่นขยายนั้นสามารถขยาย ขนาดของภาพได้จริง ๆ 2. ขั้นตอนการสร้างแว่นขยาย 1. คลิกที่เมนู Insert >>New Symbol… เพื่อสร้าง Symbol ประเภท Movie Clip ตั้งชื่อ Mag

Transcript of 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0...

Page 1: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

ใบความรู้ที่ 12 เรื่อง การสร้างแว่นขยาย

รายวิชา ง 30247 การสร้างงานแอนิเมชัน ชั้นมัธยมศึกษาปีที่ 5 หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย เวลา 4 ชั่วโมง

1. การสร้างแว่นขยาย

โปรแกรม Macromedia Flash สามารถเขียนชุดค าสั่ง (Action Script) ในการควบคุมการสร้างงาน

แอนิเมชันได้ ซึ่งในหัวข้อนี้จะเรียนรู้ถึงการประยุกต์ใช้ชุดค าสั่งในการก าหนดคุณสมบัติให้กับวัตถุท่ีสร้างข้ึน

(แว่นขยาย) โดยการเขียนชุดค าสั่งควบคุมการท างานของแว่นขยาย โดยก าหนดให้เมื่อผู้ใช้งานเลื่อนแว่นขยาย

ผ่านบริเวณใด บริเวณนั้นจะแสดงภาพให้มีลักษณะใหญ่ขึ้นกว่าปรกติ ดูราวกับว่าแว่นขยายนั้นสามารถขยาย

ขนาดของภาพได้จริง ๆ

2. ขั้นตอนการสร้างแว่นขยาย

1. คลิกท่ีเมนู Insert >>New Symbol… เพ่ือสร้าง Symbol ประเภท Movie Clip ตั้งชื่อ Mag

Page 2: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

2. คลิกท่ีเมนู File >> Import >> Import to Library… เพ่ือน าภาพเก็บไว้ใช้งานที่ไลบารี่

3. เลือกไฟล์ภาพ BigBook SmallBook และ แว่นขยาย จากนั้นคลิกท่ีปุ่ม Open

Page 3: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

4. ลาก แว่นขยาย จากหน้าต่าง Library มาวางที่พ้ืนที่งาน (Stage)

5. คลิกท่ีเมนู Modify>>Bitmap>>Trace Bitmap… จะปรากฏหน้าต่าง Trace Bitmap

ให้ก าหนดค่า Minimum area = 10

Page 4: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

6. ใช้เครื่องมือ (Oval Tool) วาดรูปวงกลมให้มีขนาดเท่ากับแว่นขยาย

7. คลิกท่ีเมนู Modify >> Convert to Symbol.. จะประกฎหน้าต่าง Convert to Symbol ให้

ก าหนดค่าดังนี้ 1. Name ก าหนดค่า magnifier

2. Type ก าหนดค่า Button

Page 5: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

8. กดปุ่ม F9 บนแป้นพิมพ์เพ่ือเรียกน้าต่าง Action Script แล้วพิมพ์ค าสั่งดังนี้

9. คลิกท่ีเมนู Modify >> Align >> Horizontal Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลาง

ในแนวราบ

Page 6: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

10. คลิกท่ีเมนู Modify >> Align >> Vertical Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลางใน

แนวตั้ง

11. สร้างเลเยอร์ใหม่อีก 2 เลเยอร์ตั้งชื่อ mark และ bigpic ตามล าดับ

Page 7: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

12. คลิกท่ีเลเยอร์ mask แล้วใช้เครื่องมือ (Oval Tool) วาดรูปวงกลมให้มีขนาดเท่ากับแว่นขยาย

13. คลิกท่ีเลเยอร์ bigpic แล้วท าการลาก BigBook จากหน้าต่าง Library มาวางที่พ้ืนที่งาน (Stage)

Page 8: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

14. คลิกท่ีเมนู Modify >> Align >> Horizontal Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลาง

ในแนวราบ

15. คลิกท่ีเมนู Modify >> Align >> Vertical Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลางใน

แนวตั้ง

Page 9: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

16. คลิกเมนู Modify>>Convert to Symbol… จะปรากฏหน้าต่าง Convert to Symbol เลือก

ประเภทแบบ Movie clip

17. คลิกเมาส์ปุ่มขวาที่เลเยอร์ mask เลือกค าสั่ง Mask

Page 10: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

18. คลิกเลือกท่ี Scene1 เพ่ือกลับมาท างานยัง Scene1

19. สร้างเลเยอร์จ านวน 2 เลเยอร์และตั้งชื่อ lens และ SmallPic ตามล าดับ

Page 11: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

20. คลิกเลือกท่ีเลเยอร์ SmallPic แล้วลาก SmallBook จากหน้าต่าง Library มาจากพ้ืนที่งาน (Stage)

21. คลิกท่ีเมนู Modify >> Align >> Horizontal Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลาง

ในแนวราบ

Page 12: 2 1.€¦ · หน่วยที่ 2 แอนิเมชันด้วย Flash 1.0 หน่วยการเรียน เรื่อง การสร้างแว่นขยาย

22. คลิกท่ีเมนู Modify >> Align >> Vertical Center เพ่ือก าหนดให้วัตถุ (แว่นขยาย) อยู่ตรงกลางใน

แนวตั้ง

23. คลิกท่ีเลเยอร์ lens แล้วกดปุ่ม F9 บนแป้นพิมพ์เพ่ือเรียกน้าต่าง Action Script แล้วพิมพ์ค าสั่งดังนี้

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