รู้จักกับ adobe flash cs6 - wnm.ac.th¹€ล่มที่-1.pdf ·...

30
5 รู้จักกับ Adobe Flash CS6 โปรแกรม Adobe Flash CS6 สาระสาคัญ จุดประสงค์การเรียนรูสาระการเรียนรูปัจจุบัน การนาเสนอข้อมูลบนสื่อต่างๆ มีการพัฒนาขึ้นมาอย่างรวดเร็ว สามารถนาเสนอ ได้ทั้งภาพเคลื่อนไหวและเสียงพร้อมๆ กันได้ทันที แต่ต้องอาศัยเทคนิคจากโปรแกรมมากมายที่มี ความยุ่งยากและซับซ้อน ยิ่งกว่านั้นผลงานที่สร้างออกมายังมีขนาดใหญ่อีกด้วย แต่เราก็พบ ทางออกของทุกๆ ปัญหาที่กล่าวมาโดยการใช้งานโปรแกรม “Flash” 1. รู้จักและเข้าใจกระบวนการทางานของโปรแกรม Flash CS6 เบื้องต้น 2. มีความรู้ความเข้าใจเกี่ยวกับส่วนประกอบต่างๆ ของโปรแกรม Flash CS6 3. มีความรู้ความเข้าใจเกี่ยวกับเครื่องมือต่างๆ ที่ใช้ในการทางานของโปรแกรม Flash CS6 1. เริ่มต้นรู้จัก Flash CS6 2. ขั้นตอนการสร้างภาพเคลื่อนไหวหรือมูฟวี3. ส่วนประกอบของ Flash CS6 4. จัดการหน้าจอก่อนเริ่มทางาน 5. ทดลองใช้งาน Flash ครั้งแรก 6. การสร้างชิ้นงานใหม่ใน Flash 7. การบันทึกไฟล์ชิ้นงาน 8. การเปิดไฟล์ช้นงาน 9. การแก้ไขชิ้นงาน 10. การออกจากโปรแกรม Flash CS6

Upload: doanquynh

Post on 12-Apr-2018

239 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

5

รจกกบ Adobe Flash CS6 โปรแกรม Adobe Flash CS6

สาระส าคญ

จดประสงคการเรยนร

สาระการเรยนร

ปจจบน การน าเสนอขอมลบนสอตางๆ มการพฒนาขนมาอยางรวดเรว สามารถน าเสนอไดทงภาพเคลอนไหวและเสยงพรอมๆ กนไดทนท แตตองอาศยเทคนคจากโปรแกรมมากมายทมความยงยากและซบซอน ยงกวานนผลงานทสรางออกมายงมขนาดใหญอกดวย แตเรากพบทางออกของทกๆ ปญหาทกลาวมาโดยการใชงานโปรแกรม “Flash”

1. รจกและเขาใจกระบวนการท างานของโปรแกรม Flash CS6 เบองตน 2. มความรความเขาใจเกยวกบสวนประกอบตางๆ ของโปรแกรม Flash CS6 3. มความรความเขาใจเกยวกบเครองมอตางๆ ทใชในการท างานของโปรแกรม

Flash CS6

1. เรมตนรจก Flash CS6 2. ขนตอนการสรางภาพเคลอนไหวหรอมฟว 3. สวนประกอบของ Flash CS6 4. จดการหนาจอกอนเรมท างาน 5. ทดลองใชงาน Flash ครงแรก 6. การสรางชนงานใหมใน Flash 7. การบนทกไฟลชนงาน 8. การเปดไฟลชนงาน 9. การแกไขชนงาน 10. การออกจากโปรแกรม Flash CS6

Page 2: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

6

Page 3: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

7

ค าชแจง นกเรยนเลอกค าตอบทถกทสดลงในกระดาษค าตอบ

1. ไฟลมลตมเดยทสรางจาก Flash มชอเรยกวาอะไร ก. มฟว ข. ออบเจกต ค. พาเนล ง. มเดย

2. ชนงานชนดใดทไมไดเกดจากการสรางดวยโปรแกรม Flash ก. เวบไซต ข. เกม ค. แบนเนอร ง. ภาพยนตร

3. ขอใดตอไปนคอขนตอนสดทายในการสรางภาพเคลอนไหวหรอมฟวจาก Flash ก. วางโครงเรองชนงาน ข. จดเตรยมสวนประกอบชนงาน ค. ทดสอบชนงาน ง. แปลงไฟลชนงาน

4. สวนประกอบใดในโปรแกรม Flash เปนทรวบรวมค าสงและการตงคาส าหรบการใชงานของโปรแกรม ก. ทลบอกซ ข. เมนบาร ค. พาเนล ง. ไทมไลน

5. สวนประกอบใดทใชส าหรบวางออบเจกตทยงไมตองการใหแสดง ก. สเตจ ข. พนทการท างาน ค. ไทมไลน ง. พาเนล

6. ถาตองการสรางโคดเพอใหชนงานสามารถโตตอบกบผใชได ตองใชงานพาเนลใด ก. Actions ข. Library ค. Editor ง. Color

7. เครองมอชนดใดไมไดจดอยในกลมเครองมอ Edit ก. Pencil Tool ข. Sub selection Tool ค. Brush Tool ง. Eraser Tool

แบบทดสอบกอนเรยน

Page 4: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

8

8. ถาตองการท างานเกยวกบวาดและตกแตงภาพ ควรเลอกใชงานกลมเครองมอชนดใด ก. Tools ข. View ค. Edit ง. Colors

9. หากตองการบนทกชนงานเพอใหสามารถน าไปใชเปนไฟลตนแบบในการสรางชนงานตอไป ควรเลอกการบนทกชนงานแบบใด ก. Save ข. Save As ค. Save and Compact ง. Save as Template

10. ค าสงใดใชส าหรบยอนกลบการท างาน ก. Paste ข. Revert ค. Undo ง. Spelling

Page 5: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

9

dobe Flash เปนซอฟตแวรทชวยในการสรางสอมลตมเดย กราฟกส าหรบงานเวบ ผลงานทพฒนาดวย Flash มทงสอภาพนง

ภาพเคลอนไหว สอมลตมเดย ตลอดจนสอทมระบบโตตอบกบผใชงาน (interactive multimedia) เชน การตอบสนองการกดปมสงงาน หรอการปอนขอมลของผเขาชมเวบไซตอกดวย จดเดนของโปรแกรมนอกจากการจะสรางภาพทมความคมชดสวยงามแลว ชนงานทสรางโดย Flash จะมขนาดเลกท าใหสามารถน ามาเผยแพรบนอนเทอรเนต เพราะโหลดมาแสดงผลไดอยางรวดเรว

Flash เปนโปรแกรมประเภทส าหรบสรางภาพกราฟก ภาพเคลอนไหว และมลตมเดย เราเรยกไฟลภาพเคลอนไหว และมลตมเดยทสรางจาก Flash วา “มฟว (Movie)” ทเราสามารถน า Flash มาใชสรางงานไดหลากหลายรปแบบ อาท

ï ภาพเคลอนไหว ตวอกษร ภาพ และโลโกกราฟก พรอมเสยงและเอฟเฟกตประกอบ เชน ภาพหลกของหนาเวบ แบนเนอรโฆษณา การน าเสนอขอมลในรปแบบของสไลดโชว เปนตน

ï เกมและโปรแกรมทโตตอบกบผใช ไปจนถงฟอรมทใหผใชกรอกขอมล และสงขอมลทกรอกไปทเครองเซรฟเวอรเพอน าไปประมวลผลและบนทกไวได

ï เราอาจใช Flash สรางเวบไซตทงเวบเลยกได Flash จงเปนอกทางเลอกส าหรบการน าเสนอขอมลบนเวบทไดมการน าภาพเคลอนไหวและ

มลตมเดยมาใชอยางแพรหลาย เพอดงดดความสนใจของผชม ซงในอดตการท าเชนนตองอาศยเทคนคการเขยนโปรแกรมบนเวบทยงยาก และซบซอน แถมไฟลผลงานทสรางยงมขนาดใหญอกดวย ท าใหหนาเวบนนโหลดชามากจนผใชอาจไมสามารถทนรอได

A

รจก Adobe Flash CS6

พรเซนเตชนงานทใช Flash

โฆษณาบนหนาเวบไซต

การตน Animation เวบไซตทสรางจาก Flash

ภาพ : ชษณพงศ ธญญลกษณ

Page 6: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

10

การจดท าภาพเคลอนไหวหรอมฟวอาจมหลายขนตอน ขนอยกบความซบซอนของชนงาน อยางไรกตามเราควรมองการสรางมฟวเปนการสราง หรอการน าองคประกอบตางๆ เขามารวมกน และก ากบใหเกดการเคลอนไหวและตอบโตกบผใช จากนนกน าไปเผยแพรในทสด โดยมขนตอนการท างานดงน

ขนตอนท 1 การวางโครงเรองชนงาน เปนการวางแผนวาตองการใหชนงานออกมาแนวไหน มวตถประสงคการท างานเปนอยางไร ซงสงทคดไดมกถกรวบรวมเปนผงโครงรางอยางคราวๆ ทเรยกวา “สตอรบอรด (storyboard)” ถาเปนงานทมการโตตอบกบผใชอาจมการรางหนาจอตางๆ และแสดงการเชอมโยงระหวางกนดวย

ขอดของการจดท าโครงรางชนงาน จะชวยใหเราคดงานอยางมระบบ ซงในกรณทชนงานมความซบซอนและตองใชทมงานสรางหลายคนการใชผงโครงรางในการสอสารจะชวยใหทกคนเขาใจวตถประสงคและรายละเอยดการท างานของชนงานไดงายขน

ขนตอนท 2 การจดเตรยมองคประกอบชนงาน เปนขนตอนตอจากการวางผงโครงราง ซงเราจะก าหนดวาเราจะตองเตรยมอะไรบางเพอน ามาประกอบกนเปนชนงาน เราสามารถวาดภาพกราฟกโดยใชเครองมอในโปรแกรม Flash เองหรอสรางภาพจากโปรแกรมกราฟก เชน Photoshop และ illustrator แลวคอยน าไปใชใน Flash กได ถางานทเราจะสรางเปนมลตมเดยกจะตองเตรยมไฟลเสยงและไฟลภาพยนตรเพอน าเขาไปใชใน Flash ดวย

ขนตอนการสรางภาพเคลอนไหวหรอมฟว

ภาพ : ชษณพงศ ธญญลกษณ

ภาพ : ชษณพงศ ธญญลกษณ

Page 7: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

11

ขนตอนท 3 การสรางชนงานและทดสอบการท างาน ตอไปเราจะใช Flash น าไฟลภาพ ภาพยนตรและเสยงทไดเตรยมไวมาประกอบกนเปนชนงานและทดสอบการท างานใหตรงตามวตถประสงค ขนตอนท 4 การพบลชชนงานเพอน าไปเผยแพร ขนตอนสดทายเปนการพบลช (publish) ชนงานทสรางเสรจสมบรณเปนไฟลมฟว หรอเปนไฟลในรปแบบทตองการ เพอน าไปเผยแพรตอไป ผชมเวบจะเลนมฟวของเรา โดยเปดผานบราวเซอรโดยตรง (บราวเซอรทสามารถเปดไฟลมฟวของ Flash ไดนนจะตองมการตดตงโปรแกรมเสรม (Plug-in) ทเรยกวา “Flash Player” ซงจะตดตงพรอมกบ Flash ใหทนท)

หลงจากตดตงโปรแกรม Flash CS6 แลว เมอเปดโปรแกรมครงแรก โดยเลอกค าสง All Pregame Adobe Flash Professional CS6 เมอเขาสโปรแกรมจะพบหนาจอทมสวนประกอบส าคญ ดงน

สวนประกอบของ Flash CS6

น า Flash ไปใชบนเวบไซต

ชนงานทสรางจาก Flash จะสามารถ เปดดไดงาย ๆ ดวย Flash Player

ภาพ : ชษณพงศ ธญญลกษณ

ภาพ : ชษณพงศ ธญญลกษณ

Page 8: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

12

เมนบาร (Menu Bar)

เมนบารเปนแถบทรวบรวมค าสงในการใชงานทงหมดเกยวกบการสรางชนงาน และการ

สรางมฟว นอกจากนนยงรวมไปถงการตงคาเกยวกบการใชงานในโปรแกรมทงหมด ทลบอกซ (Toolbox) ทลบอกซเปนกลองทรวบรวมเครองมอตางๆ ทใชในกานสราง และปรบแตงออบเจกตตางๆ โดยจะเรยงเครองมอตางๆ เปนแถวเดยวกนลงมา เครองมอแตละชนทลบอกซจะมลกษณะเปนไอคอนรปภาพทเราสามารถคลกเพอเรยกใชงานได ซงมการแบงเครองมอตางๆ เปน 4 กลมดงน กลมเครองมอ Tools

เกยวกบการเลอก คอ Selection Tool , Sub selection Tool

กลมเครองมอ Edit เกยวการวาดและการตกแตงภาพ เชน

Pencil Tool , Brush Tool , Eraser Tool , Free Transform Tool

เมนบาร (Menu Bar) พนทท างาน (Work Area)

ไทมไลน (Timeline) Property Inspector ทลบอกซ (Toolbox)

สเตจ (Stage)

ใชเมาสปรบขนาดของทลบอกซ

Page 9: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

13

กลมเครองมอ View เกยวกบการมองภาพในรปแบบตาง ๆ เชน Hand Tool , Zoom Tool

กลมเครองมอ Colors ใชในการเลอกสใหกบเสนและสพน เชน Eavesdropper Tool

โดยเมอเลอกปมเครองมอเหลาน เราสามารถปรบแตงเพมเตม (Options) ทางดานลางของ

ทลบอกซได เราสามารถเปด/ปดทลบอกซนไดโดยใชค าสง Window > Tools ใหมเครองหมายอยหนาค าวา Tools เพอเปดทลบอกซ และใชค าสง Window > Tools อกครงยกเลกเครองหมายถกเพอปดทลบอกซ สเตจ (Stage) และพนทท างาน (Pasteboard) เราเรยกพนทสขาวตรงกลางหนาจอทใชจดวางออกเจกตตางๆ ทตองการแสดงใหเหนในชนงานวา “สเตจ (Stage) หรอ Document Window” สวนบรเวณสเทาลอมรอบนนเราจะใชวางวตถทยงไมตองการใหแสดงวา “พนทท างาน (Pasteboard)” ซงเราอาจเปลยนสเตจไดเหมอนเปนเวท และพนทท างานเปนพนทหลงเวททผชมมองไมเหน แตเราวางองคประกอบตางๆ ทจะน าไปแสดงบนสเตจได เราสามาเปด/ปดพนทการท างานไดโดยใชค าสง View> Pasteboard ใหมเครองหมายถก เพอเปดพนทการท างาน และใชค าสง View> Pasteboard อกครง เพอยกเลกเครองหมายถกเพอปดพนทการท างาน (หรอจะกดคยลด <ctrl>+<shift>+W กได) ไทมไลน (Timeline) ไทมไลนหรอเสนเวลา จะใชส าหรบสรางและก าหนดรายละเอยดของการเคลอนไหว โดยเอาองคประกอบทจะเคลอนไหว (เราเรยกองคประกอบตางๆ ในชนงานวาออบเจกตหรอวตถ) มาจดวางตอกนทละภาพในแตละชวงเวลา (เรยกวาเฟรม : frame) ทจะแสดงเปนภาพเคลอนไหว โดยเราจะก าหนดเสนเวลาใหเลนภาพเคลอนไหวซ าๆ หรอเลนแลวหยดกได

Page 10: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

14

เราแบงไทมไลนเปน 2 สวนใหญๆ ไดแก สวนแสดงเลเยอร (Layer) ซงแตละเลเยอรเปรยบเหมอนแผนใสทสามารถวางภาพ หรอ

ออบเจกตได โดยแตละเลเยอรนนแยกเปนอสระตอกน แตประกอบกนเปนชนงานเดยว สวนเฟรม (Frame) ทแสดงชองเฟรมตางๆ ซงท างานเหมอนกบเฟรมทประกอบกนเปน

ภาพยนตรโดยเมอมการน าเฟรมเหลานมาแสดงอยางตอเนองกจะท าใหเกดภาพเคลอนไหว ทงน Frame จะแสดงผล ทละเฟรม โดยจะมหวอาน (Play head) ทเปนสนสแดงคอยบอกต าแหนงวาก าลงท างานอยทเฟรมใด เราสามารถเปด/ปดไทมไลนนไดโดยค าสง View > Timeline ใหมเครองหมายถกอยหนาค าวา Timeline เพอเปดไทมไลน และใชค าสง View > Timeline อกครงยกเลกเครองหมายถกเพอปดไทมไลนซงเราอาจเปรยบการท างานของไทมไลนเหมอนกบมวนฟลม ในขณะทสเตจคอสวนทแสดงแตละเฟรมในมวนฟลมนนตามล าดบทก าหนดไว

พาเนล (Panels) พาเนลคอหนาตางทรวบรวมเครองมอตางๆ ส าหรบใชในการปรบแตงออบเจกต ซงใน Flash ไดมการจดพาเนลตางๆ ไวอยางเปนหมวดหมตามหนาทของมนใหเราเรยกใชได พาเนลส าคญทควรรจกดงน

Properties Inspector เปนพาเนลทใชแสดงคณสมบตตาง ๆ ของออบเจกตทเราคลกเลอก ซงเราสามารถปรบแตงคณสมบตเหลานได ทงนรายละเอยดท Property Inspector จะเปลยนไปตามออบเจกตทเลอก โดยเราสามารถเรยกเปดใชงาน Property Inspector ดวยค าสง Window > Properties หรอกดคยลด

พาเนล color และพาเนล swatches เปนพาเนลทใชเลอกสและผสมสตามทตองการซงจะน าไปใชปรบแตงสใหกบทงภาพวาดและตวอกษรไดอยางงายดาย โดย color จะใชผสมสเองตามตองการ และ swatches จะใชเลอกสจากจานสตามทโปรแกรมก าหนดมาให โดยเราสามารถเรยกเปดใชงานพาเนล color ดวยค าสง window>color เพอเรยกแทบ color และใชค าสง window> swatches เพอเรยกแทบ swatches

พาเนล Color

พาเนล Swatches

Page 11: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

15

พาเนล library เปนพาเนลทใชส าหรบเกบองคประกอบทจะใชกบชนงานนน ๆ เชน ซมบอล ภาพกราฟก และมฟวหรอไฟลชนดตาง ๆ เชน ไฟลวดโอ ไฟลเสยง ซงสามารถจดเกบองคประกอบเหลานไดอยางระเบยบในโฟลเดอร(ทเราสรางเอง) โดยเราสามารถเรยกเปดใชงานพาเนล library ดวยค าสง Windows > library หรอกดคยลด Ctrl + L

พาเนล actions เปนพาเนลทใชส าหรบสรางโคด action Script (ภาษาทใชงาน Flash) เพอใหชนงานนนสามารถโตตอบกบผใชงานได เชน สรางปมทใหผใชคลกเพอจดประสงคบางอยาง ท าเกมและเวบทมการโตตอบกบผใช โดยเราสามารถเรยกเปดใชงานพาเนล actions ดวยค าสง Windows > Actions หรอ กดคยลด

แถบเครองมอ แถบเครองมอหรอทลบาร (Toolbar) ประกอบดวยค าสงทจดเปนปมไอคอนซงเราสามารถคลกเรยกไดทนท โดยไมตองหาในแถบเมน เราเลอกเปด/ปดแถบเครองมอไดโดยเลอก Windows > Toolbar ชอแถบเมนทตองการ (ใหมเครองหมายถกหนาชอเพอใหแสดงแถบเครองมอ และใชค าสงเดยวกนยกเลกเครองหมายถกหนาชอแถบเครองมอทตองการใหซอนไว) ใน Flash มแถบเครองมออย 3 ชด ดงน

แถบเครองมอหลก (Main Toolbar) จะรวบรวมค าสงทใชงานบอยๆ แถบเครองมอควบคมการแสดงผล (Controller) ใชส าหรบควบคมการ

แสดงภาพเคลอนไหว หรอมฟวทเราสราง

ภาพ : ชษณพงศ ธญญลกษณ

Page 12: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

16

แถบเครองมอแกไข (Edit Bar) ใชส าหรบแกไขสเตจ โดยจะมปมค าสงเพมเตมและเมนส าหรบใชยอ/ขยายสเตจ นอกจากนนยงใชในการเลอกท างานกบฉากและซมบอล

หลงจากเราไดลงโปรแกรม Flash เรยบรอยแลว ตอไปนเราจะมาทดลองใชงานโปรแกรมกน

โดยไลเรยงการท างานเบองตนทส าคญทงหมด 5 ขนตอนทจ าเปน ดงน

ขนตอนท 1 เปดโปรแกรม สรางไฟลชนงานแรก ขนตอนท 2 สรางออบเจกตงายๆ ขนตอนท 3 น าออบเจกตทสรางมาจดท าเปนภาพเคลอนไหว ขนตอนท 4 บนทกการท างานในไฟลชนงาน ขนตอนท 5 แปลงไฟลชนงานส าหรบเผยแพร

Flash สามารถสรางงานไดตงแตงายๆ ไปจนถงงานมลตมเดยแบบซบซอนทสามารถโตตอบกบผใชไดแตเพอใหเราเหนความสามารถของโปรแกรมโดยรวม กอนทจะเรมศกษาการใชงาน Flash ในรายละเอยดกนตอไป จะกลาวถงตวอยางทประกอบดวยภาพเคลอนไหวงายๆ 1 ชน ทเราจะน ามาท าใหเคลอนไหวได ดงรป

จากภาพ เราจะสรางปมส าเรจรปจาก Buttons bubble 2 (ซงเปนปมทเปลยนสได) ใหหมนตามเขมนาฬกาจากทางซายไปทางขวาของหนาจอโคงไปทางขวาของหนาจอ

ทดลองใชงาน Flash ครงแรก

ภาพ : ชษณพงศ ธญญลกษณ

Page 13: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

17

ขนตอนท 1 เปดโปรแกรม สรางไฟลชนงานแรก

หลงจากเขาสโปรแกรม Flash แลว ใหคลกเลอก Flash File ทหวขอ Create New เพอท าการสรางไฟลงานใหม ซงจะมชอวา Untitled-1

ขนตอนท 2 สรางออบเจกตงายๆ เราจะสรางปมการท างานแบบส าเรจท Flash เตรยมไวใหเราใชไดงายๆ โดยเปดพาเนลไล บรารทมรปปมส าเรจรป หากไมพบพาเนลดงกลาวใหเลอกค าสง Window > Common Libraries > Buttons

จากนนใหเราเลอกปมส าเรจแบบใดกไดมาสรางไฟลชนงานแรกของเรา โดยในตวอยางนจะเลอกปมส าเรจรป buttons bubble 2 ใหวางในต าแหนงแรกของการเคลอนททเราก าลงจะสราง (ในตวอยางวางปมทางดานซายของสเตจ)

ขนตอนท 3 น าออบเจกตทสรางมาจดท าเปนภาพเคลอนไหว

เลอกค าสง windows > Common Libraries >

Button

จะปรากฏพาเนล External Library

ลากปมส าเรจรปมาวางบนดานซายของสเตจ

Page 14: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

18

ตอไปเราจะสรางภาพเคลอนไหวใหปมส าเรจรปนน หมนตามเขมนาฬกาวงไปทางขวาของหนาจอเปนแนวโคง ในไทมไลนใหคลกขวาเฟรมท 1 เลอก Create Motion Tween เพอเพมเฟรมบนสเตจ แลวคลกลากปมทางขวาของสเตจ

จะเหนเสนไกดสเขยวปรากฏขนบนสเตจ เราสามารถใชเสนไกดนก าหนดลกษณะการเคลอนทในไทมไลนได ใหคลกเมาสตรงชวงเฟรมทตองการการเปลยนการเคลอนท หลงจากนนคลกเมาสทเสนไกดแลวลากลงมาขางลาง จะเหนเสนไกดมลกษณะโคงลง ดงรป

คลกขวาเลอก Create Motion Tween

เลอนปมไปทางขวาของสเตจ

เลอนเมาสเลอกชองเฟรมทตองการเปลยนการเคลอนท

คลกเมาสทเสนไกดแลวลากลงมาขางลาง

Page 15: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

19

ตอไปเราจะก าหนดรปแบบการเคลอนทเพมเตม ใหคลกเมาสทชวงเฟรมใดกได แลวก าหนดคาใน Property Inspector ในชอง Direction เลอก CW (สงใหปมหมนตามเขมนาฬกา)

กดคย <Enter> แลวท าการทดสอบมฟวโดยกดปม <Ctrl>+<Enter> จะไดไฟลมฟวแสดงปมส าเรจรปทเคลอนทดวยการหมนจากทางซายของหนาจอวงไปทางขวาของหนาจอ

ขนตอนท 4 บนทกการท างานในไฟลชนงาน เราตองการเกบไฟลทก าลงท างานนไว ใหเลอกค าสง File>Save As…. จากนนเลอกโฟลเดอรทตองการเกบไฟล แลวตงชอไฟลตามทตองการ (ในตวอยางตงชอวา First File) และเมอบนทกแลว เราจะไดไฟลนามสกล .fla

ใหเลอก CW ในชอง Direction

โปรแกรม Flash Player ก าลงแสดงการเคลอนทของปมทเราสราง

คลกค าสง File>Save As….

คลกเมาส Save

Page 16: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

20

ขนตอนท 5 แปลงไฟลชนงานส าหรบเผยแพร เลอกค าสง File>Publish โปรแกรมจะท าการสรางไฟลในรปแบบทน าไปเผยแพรได (แมในเครองทไมมโปรแกรม Flash ตดตงกสามารถเปดไฟลนไดดวยเชนกน) โดยไฟลเหลานจะถกเกบไวในโฟลเดอรเดยวกบไฟลงาน

หลงจากพอเหนคราวๆ ถงการสรางชนงานโดยโปรแกรม Flash แลว เราจะศกษาการสรางชนงานอยางละเอยดตอไป

การเรมตนสรางชนงานใด ๆ ใน Flash นนตองท าการก าหนดคาและคณสมบตของไฟลงานท

เราตอง การเสยกอน เพอใหไดไฟลทตรงกบงานทจะน าไปใช หลงการท างาน เสรจและจะน าไฟลไปเผยแพร ซงเรา สามารถท าได 3 แบบคอ

สรางชนงานใหมดวยการก าหนดรปแบบเอง สรางโดยใชเทมเพลต (Template) สรางจากไฟลส าเรจรป

ดบเบลคลกเพอดผลงาน

เลอก File > Publish

ดผลงานทเบราวเซอร

การสรางชนงานใหมใน Flash

Page 17: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

21

ส าหรบในบทน เราจะกลาวถงการสรางงานใหม โดยการก าหนดรปแบบเองกอน สวนการสรางชนงานใหมโดยใชเทมเพลตและสรางจากไฟลส าเรจรปจะกลาวถงภายหลง

สรางชนงานใหมดวยการก าหนดรปแบบเอง เปนการสรางไฟลใหม โดยเราจะเปนผก าหนดเองวาจะเลอกสรางไฟลในลกษณะใด ใชกบงานแบบใด ซงโปรแกรมจะมตวเลอกตาง ๆ ใหเราเลอก เพอความสะดวกในการสรางงาน สามารถท าได 2 วธ ดงน

วธท 1 เลอกจากหนาตางเรมตนการท างาน หลงจากทเปดโปรแกรม Flash ขนมา

เราสามารถเล อกสร างไฟล ใหม ไดจากหนาตางเรมตนการท างานไดเลย (โดยปกตการสรางไฟลงานทวไปทเรานยมใชคอ การสรางไฟลเปลาเลอกท Flash File (Action Script 2.0 หรอ 3.0)

วธท 2 เลอกค าสง File>New... หากเราเปดโปรแกรม Flash ไวแลว ใหเลอกค าสง File>New… เพอสรางไฟลใหมจะปรากฏหนาตางส าหรบสรางไฟลขนมา ใหเราเลอกแทบ General แลวเลอกรปแบบของลกษณะไฟลใหม

เลอกค าสง File>New…

เลอกรปแบบไฟลใหม

Page 18: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

22

เราสามรารถสงบนทกหรอเซฟไฟลชนงานทสรางใน Flash (ไฟลชนงานจะถกบนทกเปน

นามสกล .fla) ไวหลายวธ ดงน เลอก File>Save บนทลบาร หารเปนการบนทกไฟลครงแรก เราจะตองตงชอไฟลทตองการ

สงเซฟดวย เลอก File>Save As…. หากเราเคยบนทกไฟลชนนแลวและตองการบนทกชนงานนเปนไฟล

อกชอหนง หรอบนทกเปนส าเนาไวทอน เลอก File>Save as Template.. หากเราตองการบนทกชนงานเปนเทมเพลตเพอน าไปใช

เปนไฟลตนแบบในการสรางชนงานอนๆ ตอไป โดยเราจะตองก าหนดรายละเอยดและค าอธบายไวดวยกอนคลกปม Save เพอบนทกชนงาน

เลอกค าสง File>Open… เพอเปดไฟล .fla ทบนทกไวกลบมาแกไขได (แตไฟลนามสกล .swf

จะเปดมาเพอแสดงไดอยางเดยวเพราะเปนน าไฟลทถกพบลชแลว

บนทกการท างานในไฟลชนงาน

การเปดไฟลชนงาน

เลอกค าสง File>Open…

เพอเปดไฟล .fla

Page 19: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

23

ในขณะทเราท าการแกไขชนงาน เราสามารถยกเลกค าสงทไดท าผดพลาดได โดยเลอก Edit>Undo (หรอกดคย <ctrl>+Z) จะเปนการยกเลกค าสงลาสดทไดท าไป ถาเราตองการยอนกลบหลายขนกใหใชค าสงนช าๆ ได

แตถาเราตองการใหท าซ าค าสงทเพงกระท า หรอใหท าซ าค าสงทเพงยกเลกไปดวยค าสง Undo ใหเราเลอกค าสง Edit>Redo (+Y) นอกจากการใชค าสง Undo ยอนกลบการท างานแลว เราสามารถยอนกลบการท างานไปเรมตมทไฟลชนงานทไดสงเซฟไวครงลาสดได โดยเลอก File>Revert จะปรากฏไดอะลอกถามวา ตองการยกเลกขนตอนการท างานจรงหรอไม ใหคลก Revert เพอยนยน ในขณะทก าลงแกไขชนงานทมขนาดใหญ เราสามารถใชสโครลบารเลอนหนาจอไปยงพนททมองเหนไมเหนได หรอโดย การคลกท Hand Tool จากทลบอกซ สงเกตวาตวชเมาสจะเปนรป ใหคลกเมาสคางไวบนสเตจหรอพนทการท างานแลวเลอนหนาจอเพอเปดดสวนทตองการได (คลายๆกบเปนการจบภาพเลอน) และเมอจะออกจากการท างานกใหคลกท Selection Tool

เราสามารถออกจากโปรแกรม Flash ไดเมอจบการใชงาน โดยเลอกทค าสง File>Exit หรอ

กดคย <Ctrl>+Q แตถาเราปรบเปลยนหรอแกไขชนงาน แลวยงไมไดบนทกไฟลไว จะปรากฏไดอะลอกซถามกอนวา จะตองการเซฟไฟลนหรอไม ถาเราตองการใหคลก Yes แตถาไมตองการใหคลก No

การแกไขชนงาน

การออกจากโปรแกรม Flash

เลอกทค าสง File>Exit

คลก Yes แตถาไมตองการใหคลก No

Page 20: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

24

ชอ – สกล ชน ม.5/ เลขท

ตอนท 1 ใหนกเรยนบอกชอและหนาทการท างานของสวนประกอบส าคญของ Flash ตอไปน

หมายเลข 1 หนาทการท างาน หมายเลข 2 หนาทการท างาน หมายเลข 3 หนาทการท างาน หมายเลข 4 หนาทการท างาน หมายเลข 5 หนาทการท างาน

แบบฝกหดท 1 .... รจกกบ Adobe Flash CS6

หมายเลข 1 หมายเลข 2

หมายเลข 3 หมายเลข 4 หมายเลข 5

Page 21: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

25

ตอนท 2 จงตอบค าถามตอไปน

1. เพราะเหตใดจงตองมการจดท าโครงรางชนงานกอนทจะสรางชนงานจรงจาก Flash

2. ในการสรางชนงานจาก Flash ประกอบไปดวยขนตอนส าคญในการสรางชนงานกขนตอนแตละขนตอนม การด าเนนงานอยางไร จงอธบาย

3. เครองมอในทลบอกซแบงออกเปนกกลมอะไรบาง จงอธบาย

4. เลเยอรและเฟรมแตกตางกนอยางไร

5. การสรางชนงานใหมใน Flash มกรปแบบ อะไรบาง จงอธบาย

Page 22: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

26

ค าชแจง นกเรยนเลอกค าตอบทถกทสดลงในกระดาษค าตอบ

1. ถาตองการสรางโคดเพอใหชนงานสามารถโตตอบกบผใชได ตองใชงานพาเนลใด ก. Actions ข. Library ค. Editor ง. Color

2. เครองมอชนดใดไมไดจดอยในกลมเครองมอ Edit ก. Pencil Tool ข. Sub selection Tool ค. Brush Tool ง. Eraser Tool

3. ถาตองการท างานเกยวกบวาดและตกแตงภาพ ควรเลอกใชงานกลมเครองมอชนดใด ก. Tools ข. View ค. Edit ง. Colors

4. หากตองการบนทกชนงานเพอใหสามารถน าไปใชเปนไฟลตนแบบในการสรางชนงานตอไป ควรเลอกการบนทกชนงานแบบใด ก. Save ข. Save As ค. Save and Compact ง. Save as Template

5. ค าสงใดใชส าหรบยอนกลบการท างาน ก. Paste ข. Revert ค. Undo ง. Spelling

6. ไฟลมลตมเดยทสรางจาก Flash มชอเรยกวาอะไร ก. มฟว ข. ออบเจกต ค. พาเนล ง. มเดย

7. ชนงานชนดใดทไมไดเกดจากการสรางดวยโปรแกรม Flash ก. เวบไซต ข. เกม ค. แบนเนอร ง. ภาพยนตร

แบบทดสอบหลงเรยน

Page 23: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

27

8. ขอใดตอไปนคอขนตอนสดทายในการสรางภาพเคลอนไหวหรอมฟวจาก Flash ก. วางโครงเรองชนงาน ข. จดเตรยมสวนประกอบชนงาน ค. ทดสอบชนงาน ง. แปลงไฟลชนงาน

9. สวนประกอบใดในโปรแกรม Flash เปนทรวบรวมค าสงและการตงคาส าหรบการใชงานของโปรแกรม ก. ทลบอกซ ข. เมนบาร ค. พาเนล ง. ไทมไลน

10. สวนประกอบใดทใชส าหรบวางออบเจกตทยงไมตองการใหแสดง ก. สเตจ ข. พนทการท างาน ค. ไทมไลน ง. พาเนล

Page 24: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

28

ชอ – สกล ชน ม.5/ เลขท

ขอ ก ข ค ง 1 2 3 4 5 6 7 8 9 10

รวมคะแนน

กระดาษค าตอบ

Page 25: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

29

ตอนท 1 ใหนกเรยนบอกชอและหนาทการท างานของสวนประกอบส าคญของ Flash ตอไปน หมายเลข 1 เมนบาร หนาทการท างาน เปนแถบทรวบรวมค าสงในการใชงานทงหมดเกยวกบการสรางชนงาน และการสรางมฟว นอกจากนนยงรวมไปถงการตงคาเกยวกบการใชงานในโปรแกรมทงหมด

หมายเลข 2 สเตจ (Stage) หนาทการท างาน ใชจดวางออบเจกตตางๆทตองการแสดงใหเหนในชนงาน

หมายเลข 3 ไทมไลนหรอเสนเวลา หนาทการท างาน ใชส าหรบสรางและก าหนดรายละเอยดของการเคลอนไหว โดยเอาองคประกอบทจะเคลอนไหว มาจดวางตอกนทละภาพในแตละชวงเวลาทจะแสดงเปนภาพเคลอนไหว

หมายเลข 4 ทลบอกซ หนาทการท างาน เปนกลองทรวบรวมเครองมอตางๆ ทใชในการสราง และปรบแตงออบเจกตตางๆ โดยจะเรยงเครองมอตางๆ เปนแถวเดยวกนลงมา

หมายเลข 5 พาเนล หนาทการท างาน หนาตางทรวบรวมเครองมอตางๆ ส าหรบใชในการปรบแตงออบเจกต ซงใน Flash ไดมการจดพาเนลตางๆ ไวอยางเปนหมวดหมตามหนาทของมนใหเราเรยกใชได

แนวค าตอบแบบฝกหดท 1

หมายเลข 1 หมายเลข 2

หมายเลข 3 หมายเลข 4 หมายเลข 5

Page 26: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

30

ตอนท 2 จงตอบค าถามตอไปน

1. เพราะเหตใดจงตองมการจดท าโครงรางชนงานกอนทจะสรางชนงานจรงจาก Flash จะชวยใหเราคดงานอยางมระบบ ซงในกรณทชนงานมความซบซอนและตองใชทมงานสรางหลายคน การใชผงโครงรางในการสอสารจะชวยใหทกคนเขาใจวตถประสงคและรายละเอยดการท างานของชนงานไดงายขน

2. ในการสรางชนงานจาก Flash ประกอบไปดวยขนตอนส าคญในการสรางชนงานกขนตอน แตละขนตอนม การด าเนนงานอยางไร จงอธบาย ประกอบดวย 4 ขนตอน ดงน

การวางโครงเรองชนงาน เปนการวางแผนวาตองการใหชนงานออกมาแนวไหน มวตถประสงคการท างานเปนอยางไร .......

การจดเตรยมองคประกอบชนงาน จะก าหนดวาเราจะตองเตรยมอะไรบางเพอน ามาประกอบกนเปนชนงาน …….

การสรางชนงานและทดสอบการท างาน เราจะใช Flash CS4 น าไฟลภาพ ภาพยนตรและเสยงทไดเตรยมไวมาประกอบกนเปนชนงาน และทดสอบการท างานใหตรงตามวตถประสงค …….

การแปลงไฟลชนงานส าหรบการเผยแพร ขนตอนสดทายเปนการพบลช (Publish) ชนงานทสรางเสรจสมบรณเปนไฟลมฟว หรอเปนไฟลในรปแบบทตองการ เพอน าไปเผยแพรตอไป …….

3. เครองมอในทลบอกซแบงออกเปนกกลมอะไรบาง จงอธบาย ม 4 กลม คอ ……. 1. กลมเครองมอ Tools เกยวกบการเลอก คอ Selection Tool , Subselection Tool……. 2. กลมเครองมอ Edit เกยวกบการวาดและการตกแตงภาพ เชน Pencil Tool ……. 3. กลมเครองมอ View เกยวกบการมองภาพในรปแบบตางๆ เชน Hand Tool ……. 4. กลมเครองมอ Colors ใชในการเลอกสใหกบเสนและสพน เชน Eyedropper Tool …….

4. เลเยอรและเฟรมแตกตางกนอยางไร เลเยอรเปรยบเหมอนแผนใสทสามารถวางภาพหรอออบเจกตได โดยแตละเลเยอรนนแยกเปนอสระตอกน แตประกอบกนเปนชนงานเดยว สวนเฟรมจะมการแสดงชองเฟรมตางๆ ซงท างานเหมอนกบเฟรมทประกอบกนเปนภาพยนตร โดยเมอมการน าเฟรมเหลานมาแสดงอยางตอเนองกจะท าใหเกดภาพเคลอนไหว

Page 27: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

31

5. การสรางชนงานใหมใน Flash มกรปแบบ อะไรบาง จงอธบาย ม 3 แบบ คอ 1. สรางชนงานใหมดวยการก าหนดรปแบบเอง เปนการสรางไฟลใหม โดยเราจะเปนผก าหนดเองวาจะเลอกสรางไฟลในลกษณะใด 2. สรางโดยใชเทมเพลต Flash CS4 ไดเตรยมเทมเพลต (Template) ซงเปนตวอยางงานส าเรจรปไวจ านวนมาก และเราสามารถน ามาประยกตใชสรางชนงานใหมได 3. สรางจากไฟลส าเรจรป จะมลกษณะคลายกบเทมเพลตทผใชสามารถจะน ามาปรบปรงแกไขรปแบบไดตามตองการ

Page 28: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

32

กอนเรยน หลงเรยน ขอ เฉลย ขอ เฉลย 1 ก 1 ก 2 ง 2 ข 3 ง 3 ค 4 ข 4 ง 5 ข 5 ค 6 ก 6 ก 7 ข 7 ง 8 ค 8 ง 9 ง 9 ข 10 ค 10 ข

เฉลยชดท 1

Page 29: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

33

บนทกเพมเตม

……………………………………………………………………………..…………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. …………………………………………………………………………….. ……………………………………………………………………………..

Page 30: รู้จักกับ Adobe Flash CS6 - wnm.ac.th¹€ล่มที่-1.pdf · รู้จัก Adobe Flash CS6 พรีเซนเตชั่นงานที่ใช้

34

บรรณานกรม

กระทรวงศกษาธการ. หลกสตรแกนกลางการศกษาขนพนฐาน. กรงเทพฯ : โรงพมพชมนมสหกรณการเกษตรแหงประเทศไทยจากด, 2551.

ชษณพงศ ธญลกษณ. การสรางงานแอนเมชนดวย FLASH เวอรชน CS6. – กรงเทพ ฯ : ซคเซส มเดย, 2558. ปยะบตร สทธดารา. Flash CS3 สนกกบงานแอนเมชน. พมพครงท 1 กรงเทพฯ ไอดซ

อนโฟ ดสทรบวเตอร เซนเตอร, 2551 สทธชย ทพยสงห. บทเรยนออนไลนการสรางแอนเมชนดวย Flash. สบคนเมอวนท

7 มถนายน 2559, จากเวบไซตชอ: http://www.kroojan.com/flash/