สร้างสือ flash cs 5

2013 ใบความรู้ Adobe Flash CS5NIKUL JAIDEERATCHABORIKANUKROK

โครงการสอน 2013รหัส ง 32214 วชิ า งานกราฟิ กข้นั สูง 22 จานวน 4 ชั่วโมง/สัปดาห์หน่วยที่ เร่ือง จานวนช่ัวโมง 81. การใชง้ านเคร่ืองมือที่จาเป็ นในการสร้าง Animation 42. การจดั การ Layer 143. การวาดรูปดว้ ยเคริ่องมือ Flash 124. การสร้าง Animation เบ้ืองตน้ 45. การจดั การ Scene 86. การแปลงงานเพื่อนาเสนอ (Publish) 127. Workshop รวม 80

ใบความรู้ที่ 1 เรื่อง ทาความรู้จกั กบั Adobe Flash CS5รู้จักกบั Flashสาเหตุทข่ี นาดของ Flash มีขนาดเลก็ กว่าแฟ้ มทว่ั ไป สาเหตุสาคญั ที่ทาใหไ้ ฟลม์ ลั ติมีเดียที่สร้างโดย Flash มีขนาดเลก็ มาก เมื่อเทียบกบั ไฟล์มลั ติมีเดียประเภทอ่ืนเป็นเพราะรูปแบบการเก็บรายละเอียดของรูปเป็นลายเส้นในขณะท่ีโปรแกรมอ่ืน ๆ จะบนั ทึกรายละเอียดของรูปทุก Pixels จะเห็นวา่ ลกั ษณะภาพที่เหมาะสาหรับใชก้ บั โปรแกรม Flash ควรเป็นภาพแนวการ์ตูนท่ีเนน้ ลายเส้นและใชส้ ีค่อนขา้ งสม่าเสมอ ซ่ึงจะเห็นไดว้ า่ ในงานมลั ติมีเดียท่ีเป็น Flash ส่วนใหญ่จะเป็นแนวลายเส้นง่าย ๆ โดยมีการใชภ้ าพถ่ายผสมเทา่ ท่ีจาเป็นเทา่ น้นัความต้องการระบบของ Adobe Flash CS5 Adobe Flash CS5 มีความตอ้ งการระบบคอมพวิ เตอร์เพอ่ื ท่ีจะนามาใชง้ านแสดงผล ดงั น้ี 1. Microsoft Windows 98 / 2000 / NT 4 /Me / XP 2. CPU 200 MHz หรือมากกวา่ น้นั 3. RAM 64 MB ซ่ึงจริง ๆ แลว้ ควรเป็ น 128 MB มากกวา่ 4. พ้ืนท่ีฮาร์ดดิสก์ 85 MB 5. ความละเอียดของจอภาพท่ีใชแ้ สดงผล 1024 x 768 Pixels 6. การ์ดจอแสดงความละเอียดสี 16 Bit เป็นอยา่ งนอ้ ย แตส่ าหรับการแสดงกราฟิ กสีท่ีมีความละเอียดสูงควรเป็น 24 Bit 7. บราวเซอร์ที่สนบั สนุน Plug-in Shockwave Flash (สาหรับบราวเซอร์ InternetExplorer ต้งั แต่เวอร์ชนั่ 4 ข้ึนไป Netscape ต้งั แตเ่ วอร์ชน่ั 4.5 ข้ึนไป) 8. ไดร์ฟ์ CD-ROM สาหรับติดต้งั โปรแกรมหรือคน้ หาไฟลภ์ าพเข้าสู่โปรแกรม Adobe Flash Professional CS5 สามารถเรียกใชง้ านโปรแกรม Adobe Flash CS5 ไดด้ ว้ ยวิธีการดงั ตอ่ ไปน้ี 1. คลิกเมาส์ท่ีป่ ุม Start 2. เลือกคาสง่ั Program  Adobe Master Collection CS5  Adobe Flash Professional CS5 3. จะปรากฏหนา้ จอแรกของ Flash

ทดลองใช้โปรแกรม Adobe Flash CS5 หลงั จากที่เปิ ดโปรแกรม Flash ข้ึนมาแลว้ Flash จะมีตวั อยา่ งของไฟลใ์ หไ้ ดท้ ดลองใช้ ซ่ึงไฟลต์ วั อยา่ งน้ีจะเป็นไฟล์ที่มาพร้อมกบั โปรแกรม Adobe Flash CS5 โดยใหเ้ ลือกไปที่ File  Open เพอ่ื จะทาการเปิ ดไฟลท์ ่ี Flash ไดเ้ ตรียมไวใ้ ห้ หลงั จากน้นั จะปรากฏหนา้ ตา่ ง Open ข้ึนมา ใหเ้ ขา้ ไปท่ีโฟลเดอร์ Macromedia  AdobeFlash CS5  Samples  FLA จะมีตวั อยา่ งไฟล์ Flash ที่เตรียมไว้ ใหเ้ ลือกตวั อยา่ งที่ตอ้ งการ เพ่ือเปิ ดข้ึนมาทดสอบ (จากรูปเลือก Color picker) จากน้นั Click mouse ท่ีป่ ุม Open

เมื่อตวั อยา่ งข้ึนมา จะพบตวั อยา่ งงานท่ีสร้างเสร็จข้ึนมาแลว้ ซ่ึงจะมาทาการทดสอบตวั อยา่ งที่สร้างเสร็จแลว้ โดยเลือกที่ Control  Test Movie หรือ กด < Ctrl + Enter > เพื่อทาการทดสอบโปรแกรม ทาการทดสอบไฟลต์ ามตอ้ งการ เม่ือทดสอบโปรแกรมเสร็จแลว้ ให้ คลิกเมาส์ ป่ ุมกากบาทเพอ่ื ปิ ดหนา้ จอท่ีทาการเล่นโปรแกรมอยู่ แลว้ จะกลบั ไปหนา้ จอเดิมออกจากโปรแกรม Flash หลงั จากท่ีใชง้ านโปรแกรม Flash เสร็จสิ้นแลว้ สามารถออกจากโปรแกรมได้ โดยเลือกคาส่ังFile  Exit หรือกดคีย์ < Ctrl + Q > จะเป็นการสิ้นสุดการใชง้ านโปรแกรม

ใบงานที่ 1 เร่ือง ความแตกต่างระหว่าง ภาพ Bitmap และ ภาพ Vectorช่ือ…………………………………………นามสกุล……………………………………เลขท่ี……………..ช้นั …………วนั ท่ี…………เดือน…………………พ.ศ……………1. ใหน้ กั เรียนอธิบายถึงลกั ษณะของภาพ Bitmap พร้อมบอกขอ้ ดี และ ขอ้ เสีย ของภาพ Bitmap ดว้ ย……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………2. ใหน้ กั เรียนอธิบายถึงลกั ษณะของภาพ Vector พร้อมบอกขอ้ ดี และ ขอ้ เสีย ของภาพ Vector ดว้ ย……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………3. ใหน้ กั เรียนอธิบายความแตกต่างระหวา่ งภาพ Bitmap และ ภาพ Vector…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ใบงานท่ี 3 เร่ือง ไฟล์ต่าง ๆ ท่ี Flash สามารถนามาใช้งานได้ช่ือ……………………………………นามสกุล……………………………เลขท่ี………ช้นั …………………วนั ท่ี…………………เดือน…………………พ.ศ………………1. ผสู้ อนใหน้ กั เรียนอา่ นทบทวนใบความรู้ที่ 2 เกี่ยวกบั ไฟลท์ ่ีสามารถนามาใชใ้ น Flash ได้ พร้อม ใหน้ กั เรียนยกตวั อยา่ งมาคนละ 10 ชนิดลาดบั ท่ี ชนิดของไฟล์ นามสกุลไฟล์ ลกั ษณะไฟล์ 1 2 3 4 5 6 7 8 9 10

ใบความรู้ท่ี 2 เรื่อง ส่วนประกอบของโปรแกรมส่วนประกอบของโปรแกรม Adobe Flash CS5แถบคาสั่ง (Menu Bar) แถบคาส่ัง (Menu bar) ประกอบดว้ ยคาสัง่ ต่าง ๆ ที่ใชส้ าหรับงานทว่ั ไปเหมือนกบั โปรแกรมอื่น ๆ ไดแ้ ก่ เมน ูู File, Edit, Insert, Modify, Text, Commands, Control, Windows และ Help ดงัภาพท่ี 1 ภาพท่ี 1แถบเคร่ืองมอื (Tool Bars) ภาพท่ี 2ในการเปิ ดใชง้ านคร้ังแรกแถบเคร่ืองมือจะไมแ่ สดงใหค้ ลิกท่ีเมนู Windows > Toolbars >แลว้คลิกทาเครื่องหมายถูกที่ Main, Controller และ Edit Bar ดงั ภาพที่ 3 ภาพที่ 3

กล่องเคร่ืองมอื (Toolbox)

กล่องเคร่ืองมือ (Toolbox)เป็นส่วนที่เกบ็ เคร่ืองมือต่าง ๆ เพอื่ ใหส้ ามารถเรียกใชง้ านได้สะดวกและรวดเร็วข้ึน แบง่ เป็นกลุ่มต่าง ๆ เพื่อสะดวกในการเรียกใชง้ าน ดงั ภาพท่ี 4 ภาพที่ 4

Toolbar Menubar Stage Timeline FrameLayer Flash มกี ารทางานลกั ษณะเดยี วกบั โปรแกรมอนื่ ๆ ทท่ี างานบน Windows ดงั นี้Menu Bar คือ แสดงรายการคาสั่งตา่ งๆ ของโปรแกรม Toolbar คือ แสดงป่ ุมเครื่องมือการทางานมาตรฐานของโปรแกรม เช่น ป่ ุมเปิ ดงานใหม่ เปิ ดไฟล์ เอกสาร, จดั เก็บไฟล์ เป็นตน้ Toolbox คือ แสดงป่ ุมเครื่องมือเกี่ยวกบั การวาดภาพ สร้างภาพTimeline คือ หนา้ ต่างแสดงเส้นควบคุมเวลาสาหรับการนาเสนอผลงาน ประกอบดว้ ยส่วนทางาน เก่ียวกบั Layer และ Timeline Stage คือ พ้นื ที่ส่วนที่ใชใ้ นการวางวตั ถุต่างๆ หรืออาจจะเรียกวา่ \"เวที\" เมื่อมีการนาเสนอผลงานจะ แสดงเฉพาะวตั ถุบน Stage เท่าน้นั Panel คือ หนา้ ต่างควบคุมฟังกช์ นั งาน ซ่ึงมีหลายฟังกช์ นั (หลายหนา้ ต่าง)

รายละเอยี ดของเคร่ืองมือกลุ่มเลอื ก ภาพท่ี 5รายละเอยี ดของเครื่องมอื กลุ่มวาดและตกแต่งภาพ ภาพท่ี 6รายละเอยี ดของเคร่ืองมือกลุ่มมุมมอง (View) ภาพที่ 7

รายละเอยี ดของเคร่ืองมือกลุ่มสีเส้นและสีพนื้ (Colors) ภาพที่ 8 การสร้างวตั ถุ (Object) ด้วยเคร่ืองมือ Line Tool Line Tool คือเคร่ืองมือสาหรับวาดเส้นตรง โดยสามารถกาหนดสี ความหนา และลวดลาย ต่างๆ โดยกาหนดไดท้ ่ีหนา้ ต่าง properties ข้นั ตอนการสร้าง ดงั น้ี ข้นั ท่ี 1 คลกิ เลอื กเคร่ืองมอื ท่ี Tool Box (ภาพท่ี 1) ภาพที่ 1 ข้นั ท่ี 2 กาหนดลกั ษณะของเส้นทห่ี น้าต่าง Properties กรณหี น้าต่างถูกปิ ด เปิ ดได้โดยคลกิ Window > Properties > Properties (ภาพท่ี 2) ภาพที่ 2

กาหนดลกั ษณะของเส้นตามต้องการ (ภาพที่ 3) ภาพที่ 3ข้นั ท่ี 3 ใช้เมาส์ลากเส้น ปรับขนาด เปลย่ี นสี ตามต้องการ (ภาพที่ 4) ภาพที่ 4

ตัวอย่างการประยุกต์ใช้ 1. ลากเส้นตามตอ้ งการ 2. คลิกลูกศรสีดา (Selection Tool) 3. คลิกเส้นท่ีไม่ตอ้ งการแลว้ ลบทิ้ง โดยกดป่ ุม Delete ท่ี Keyboard 4. เลือกภาพวตั ถุ โดยดบั เบิลคลิก หรือลากคลุมภาพวตั ถุ . ตกแต่งเส้นโดยกาหนดท่ี หนา้ ต่าง Properties