บทที่ 7 (ต่อ) การสร้าง Animation ด้วย โปรแกรม Adobe Flash

1. วิชา การประยุกต์ใช้งานด้านธุรกิจด้วยมัลติมีเดีย (Multimedia Application in Business)รหัสวิชา BCOM3301 3(2-2-5) ภาคเรียนที่ 1 ปีการศึกษา 2555ผู้สอน อ. เล็กฤทัย ขันทองชัย โทร. (085)138-6677 ห้อง 925/1E-mail :Lekruthai_cru@hotmail.co.thโฮมเพจประจำวิชา : http://msci.chandra.ac.th/lrk/

2. บทที่ 7 (ต่อ) การสร้าง Animation ด้วยโปรแกรม Adobe Flash

3. ความต้องการระบบคอมพิวเตอร์ ความต้องการระบบของโปรแกรม Flash CS3 เครื่องคอมพิวเตอร์ที่มีหน่วยประมวลผลกลางระดับ Pentium 4,Core Duo 1 GHz ขึ้นไป ระบบปฏิบัติการ Windows XP ServicePack2 หรือ Windows Vista หน่วยความจำ (RAM) อย่างต่ำ 512 MB (แนะนำให้ใช้ 1 GB) เนื้อที่ของฮาร์ดดิสก์อย่างน้อย 2.5 GB จอภาพสีที่ความละเอียด 1024 x 768 pixels (32 bit) 3

4. วิทยากร : อ.เล็กฤทัยขันทองชัย

5. การสร้างไฟล์ด้วยการกำหนดรูปแบบเองการสร้างไฟล์ด้วยการกำหนดรูปแบบเอง Flash Document ไฟล์รูปแบบปกติ ที่ใช้สร้างงานแอนนิเมชันทั่วไป Flash Slide Presentationไฟล์งานที่เหมาะกับการสร้างงานนำเสนอ Flash Form Application ใช้สร้างฟอร์มสำหรับทำเป็นโปรแกรมใช้งานทั่วไป ActionScript File เป็นหน้าต่างที่ไว้เขียนสคริปต์เพียงอย่างเดียว ActionScriptCommunication Fileเขียนไฟล์เพื่อติดต่อกับเชิร์ฟเวอร์ Flash JavaScriptFile เหมาะสำหรับงานเขียนสคริปต์ที่ทำงานร่วมกับ JavaScript หรือ API Flash Project เป็นการรวมกลุ่มงานที่สร้างทั้งหมด ให้ออกมาเป็น Project ไฟล์

6. แนะนำโปรแกรม • Flash เป็นโปรแกรมที่ใช้สร้าง ภาพเคลื่อนไหวโดยใช้หลักการของ Vector Graphic • ปัจจุบันนิยมสร้างไฟล์ Flash เพื่อใช้ในการนำเสนองานมัลติมีเดียบนเว็บ (SWF ) วิทยากร : อ.เล็กฤทัย ขันทองชัย

7. ประเภทของกราฟิก • Bitmap เป็นภาพที่เกิดจากจุดสีจุดเล็ก ๆ ที่เรียกว่า Pixel ประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็น ตาราง จะมีปัญหาภาพแตกเมื่อมีการขยายภาพ วิทยากร : อ.เล็กฤทัย ขันทองชัย

8. ประเภทของกราฟิก(ต่อ) • Vector ใช้สมการทางคณิตศาสตร์ เป็นตัวสร้างภาพ เมื่อขยายภาพ ความคมชัดของภาพก็จะยังคงเดิม วิทยากร : อ.เล็กฤทัย ขันทองชัย

9. หลักการทำงานของ Flash ขั้นตอนที่ 1 นำเข้าภาพกราฟิกหรือ ภาพที่สร้างขึ้นมา ขั้นตอนที่ 3 ทำการสร้าง Animation โดยจะใส่เสียง หรือ Script ขั้นตอนที่ 2 แปลงส่วนประกอบต่าง ๆ ให้เป็น Symbol ขั้นตอนที่ 4 Publish ออกมาเป็น ชิ้นงาน วิทยากร : อ.เล็กฤทัย ขันทองชัย

10. นามสกุลของ Flash • *.fla (Flash Movie) • เป็นไฟล์ที่ได้จากการสร้างชิ้นงานใน Flash ที่สามารถนำมาแก้ไขเปลี่ยนแปลงได้ • *.swf (Shockwave Flash) • เป็นไฟล์ที่ Flash สร้างขึ้นหลังจากการแสดงผลออกมา • สามารถดูผลการแสดงได้โดยไม่ต้องเปิดโปรแกรม Flash • ในการ Publish จะมีการสร้างไฟล์ .html เพิ่ม เพื่อเป็นตัวเรียกใช้ไฟล์ *.swf ขึ้นมาให้ทำงาน วิทยากร : อ.เล็กฤทัย ขันทองชัย

11. การเข้าสู่โปรแกรม Flash8 • Start • Programs • Adobe Master Collection CS5 • Adobe Flash Professional CS5 วิทยากร : อ.เล็กฤทัย ขันทองชัย

12. ส่วนประกอบหน้าจอโปรแกรมส่วนประกอบหน้าจอโปรแกรม วิทยากร : อ.เล็กฤทัย ขันทองชัย

13. การแสดง / ซ่อน Toolbox • เมนู Window  Tools วิทยากร : อ.เล็กฤทัย ขันทองชัย

14. การแสดง / ซ่อน Panels • Window  เลือก Panels ต่าง ๆ • กดปุ่ม F4 เพื่อซ่อน วิทยากร : อ.เล็กฤทัย ขันทองชัย

15. Selection : ใช้เลือก เคลื่อนย้ายวัตถุ Subselection : ใช้ปรับแต่งเส้น Line : ใช้สร้างเส้น Lasso : ใช้เลือกวัตถุ Pen : ใช้วาดเส้นตรงหรือเส้นโค้ง เครื่องมือต่าง ๆ (Toolbox) วิทยากร : อ.เล็กฤทัย ขันทองชัย

16. Text : ใช้สร้างตัวอักษร Oval : ใช้สร้างวงกลม วงรี Rectangle:ใช้สร้างรูปสี่เหลี่ยม Pencil : ใช้วาดเส้น Brush : ใช้ระบายสี เครื่องมือต่าง ๆ (Toolbox) ต่อ วิทยากร : อ.เล็กฤทัย ขันทองชัย

17. Free Transform : ใช้ปรับขนาดและเปลี่ยนแปลงรูปทรงวัตถุ Fill Transform : ใช้ปรับแต่งเฉดสี Ink Bottle : ใช้กำหนดสีเส้น Paint Bucket : ใช้กำหนดสีพื้นให้วัตถุ Eyedropper : ใช้ดูดสี เครื่องมือต่าง ๆ (Toolbox) ต่อ วิทยากร : อ.เล็กฤทัย ขันทองชัย

18. Eraser : ใช้ลบส่วนของวัตถุ Hend : ใช้เลื่อนหน้าจอ Zoom : ใช้ย่อขยาย มุมมอง Option : เป็นที่กำหนดคุณสมบัติของเครื่องมือต่าง ๆ เครื่องมือต่าง ๆ (Toolbox) ต่อ วิทยากร : อ.เล็กฤทัย ขันทองชัย

19. การสร้างชิ้นงานใหม่ • เมนู File  New • Ctrl + N วิทยากร : อ.เล็กฤทัย ขันทองชัย

20. การกำหนดคุณสมบัติเอกสารการกำหนดคุณสมบัติเอกสาร • เมนู Modify  Document • Dimensions : ขนาดของเอกสาร • Background Color : สีพื้นหลัง • Frame Rate : จำนวน Frame ที่แสดงต่อวินาที วิทยากร : อ.เล็กฤทัย ขันทองชัย

21. การกำหนดคุณสมบัติเอกสาร(ต่อ)การกำหนดคุณสมบัติเอกสาร(ต่อ) • Ruler units : หน่วยของไม้บรรทัด • Make Default : บันทึกค่าที่ได้กำหนดไว้ให้เป็นค่ามาตราฐาน วิทยากร : อ.เล็กฤทัย ขันทองชัย

22. การปรับการแสดงขนาดพื้นที่ทำงานการปรับการแสดงขนาดพื้นที่ทำงาน • เลือกขนาดที่ต้องการ • Show Frame : แสดงขนาดชิ้นงานให้พอดีกับพื้นที่ว่าง วิทยากร : อ.เล็กฤทัย ขันทองชัย

23. เมนู View > Rulers ลากเส้นไม้บรรทัดมาไว้ใช้ ถ้าไม่ต้องการใช้ก็ลากเก็บไว้ที่เดิม การเรียกใช้ ไม้บรรทัด วิทยากร : อ.เล็กฤทัย ขันทองชัย

24. Hand Tool (H) • ใช้ในการเลื่อนดูข้อมูล ในกรณีที่ใช้ Tool ใดๆ แล้วต้องการใช้ Hand Tool ให้กด Space bar ค้างไว้ วิทยากร : อ.เล็กฤทัย ขันทองชัย

25. ขยาย ย่อ Zoom Tool ใช้ ย่อ – ขยายหน้าจอ ดูที่ Option กด Alt ค้างขณะคลิก จะได้การ Zoom Tool ตรงกันข้าม Zoom 100% ให้ double click ที่เครื่องมือ Zoom Zoom เท่าขนาดพื้นที่ให้ double click ที่เครื่องมือ Hand วิทยากร : อ.เล็กฤทัย ขันทองชัย

26. การวาดภาพ • Line : ใช้วาดเส้นตรง • Oval : ใช้วาดวงกลม, วงรี • Rectangle : ใช้วาดรูปสี่เหลี่ยม • Pen : ใช้วาดเส้นโค้ง วิทยากร : อ.เล็กฤทัย ขันทองชัย

27. Oval Tool • ใช้วาดวงกลม หรือวงรี • กำหนดรูปแบบที่ Properties กด Shift ค้างขณะวาด จะได้วงกลม วิทยากร : อ.เล็กฤทัย ขันทองชัย

28. Rectangle Tool • ใช้วาดสี่เหลี่ยมมุมเหลี่ยม หรือมุมโค้ง กด Shift ค้างขณะวาด จะได้สี่เหลี่ยมจัตุรัส วิทยากร : อ.เล็กฤทัย ขันทองชัย

29. Line Tool • ใช้วาดเส้น • กำหนดรูปแบบที่ Properties ถ้าต้องการให้เส้นตรง ให้กด Shift ค้างขณะวาด วิทยากร : อ.เล็กฤทัย ขันทองชัย

30. ใช้ปรับโค้ง ใช้ย้ายจุด Arrow Tool ใช้เลือก หรือปรับแต่งรูปทรงวัตถุ • - ใช้เลือกวัตถุ • - ย้ายวัตถุ • คัดลอกวัตถุ • (กด Alt ขณะย้าย) วิทยากร : อ.เล็กฤทัย ขันทองชัย

31. Snap Smooth Straighten Arrow Tool (ต่อ) • Option Bar วิทยากร : อ.เล็กฤทัย ขันทองชัย

32. Rectangle Tool วิทยากร : อ.เล็กฤทัย ขันทองชัย

33. Free Transform Tool วิทยากร : อ.เล็กฤทัย ขันทองชัย

34. Rotate Distort Scale Envelope Free Transform Tool วิทยากร : อ.เล็กฤทัย ขันทองชัย

35. การปรับขนาดวัตถุ • เลือกวัตถุ • เมนู Modify  Transform  Scale วิทยากร : อ.เล็กฤทัย ขันทองชัย

36. การหมุนวัตถุ • เลือกวัตถุ • เมนู Modify  Transform  Rotate Rotate 90 CW Rotate 90 CCW วิทยากร : อ.เล็กฤทัย ขันทองชัย

37. การพลิกกลับภาพ • เลือกวัตถุ • เมนู Modify  Transform • Flip Vertical : บนลงล่าง • Flip Horizontal : ซ้ายไปขวา วิทยากร : อ.เล็กฤทัย ขันทองชัย

38. กำหนดสีเส้น กำหนดสีพื้น สลับระหว่าง สีเส้นกับสีพื้น ไม่กำหนดสี สีที่เป็น Default การปรับแต่งสีวัตถุ วิทยากร : อ.เล็กฤทัย ขันทองชัย

39. Workshop วิทยากร : อ.เล็กฤทัย ขันทองชัย

40. การบันทึกเอกสาร • เมนู File  Save as • ระบุแหล่งที่เก็บไฟล์ • ตั้งชื่อไฟล์ • OK ** จะได้นามสกุล .fla ** วิทยากร : อ.เล็กฤทัย ขันทองชัย

41. การเปิดไฟล์เก่า • เมนู File  Open วิทยากร : อ.เล็กฤทัย ขันทองชัย

42. ปรับให้เส้นตรง ปรับให้เส้นโค้ง แทบจะไม่ปรับ Pencil Tool • ใช้วาดเส้น กด Shift ค้างขณะวาด จะเส้นตรงในแนวตั้งและแนวนอน วิทยากร : อ.เล็กฤทัย ขันทองชัย

43. กำหนดว่าจะ Lock ไม่ใช้สี แบบเฉดหรือไม่ กำหนดลักษณะการทาสี เลือกขนาดของ Brush เลือกรูปทรงของ Brush Brush Tool • ใช้ทาสีพื้นให้กับวัตถุ วิทยากร : อ.เล็กฤทัย ขันทองชัย

44. ระบายสีโดยทับทั้งสีพื้นและสีเส้นระบายสีโดยทับทั้งสีพื้นและสีเส้น ระบายสีพื้นไม่ทับสีเส้น ระบายสีนอกบริเวณวัตถุ ระบายสีเฉพาะส่วนที่เลือก ระบายสีเฉพาะในบริเวณกลุ่มที่คลิกเริ่มต้น Brush Tool วิทยากร : อ.เล็กฤทัย ขันทองชัย

45. เลือกรูปแบบของ Eraser ลบทั้งสีพื้นและสีเส้น ลบเฉพาะสีพื้น ลบเฉพาะเส้น ลบเฉพาะสีพื้นที่ถูกเลือก ลบเฉพาะในบริเวณกลุ่มที่คลิกเริ่มต้น ลบส่วนที่คลิกทั้งหมด Eraser Tool • ใช้ลบวัตถุ วิทยากร : อ.เล็กฤทัย ขันทองชัย

46. Ink Bottle Tool • ใช้ใส่สีเส้นโดย Click ที่ขอบวัตถุ วิทยากร : อ.เล็กฤทัย ขันทองชัย

47. กำหนดว่าจะ Lock ไม่ใช้สีแบบเฉดหรือไม่ Paint Bucket Tool • ใช้ใส่สีพื้นของวัตถุ วิทยากร : อ.เล็กฤทัย ขันทองชัย

48. หากชี้ที่เส้นขอบ เป็นการดูดสีเก็บไว้ที่ Stroke Color หากชี้ที่พื้นวัตถุ เป็นการดูดสีเก็บไว้ที่ Fill Color Dropper Tool • ใช้ดูดสีมาเก็บไว้ใช้งาน วิทยากร : อ.เล็กฤทัย ขันทองชัย

49. การปรับแต่ง การไล่สี • เมนู Window > Color Mixer • Linear การไล่สีแนวเส้นตรง • Radial การไล่สีแนวรัศมี • (ใส่แนวการไล่สี ได้สูงสุด 8 สี) • Bitmap การใช้รูปภาพ วิทยากร : อ.เล็กฤทัย ขันทองชัย

50. การปรับแต่ง การไล่สี(ต่อ) • การเพิ่มสี • คลิกขวาที่ • เลือก Add Swatch วิทยากร : อ.เล็กฤทัย ขันทองชัย