Adobe flash-คู่มือ-สำหรับครู

82
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน เรื่อง การสร้าง Animation และสื่อมัลติมีเดียด้วยโปรแกรม Adobe Flash Adobe Flash

Transcript of Adobe flash-คู่มือ-สำหรับครู

Page 1: Adobe flash-คู่มือ-สำหรับครู

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

เรอง การสราง Animation และสอมลตมเดยดวยโปรแกรม Adobe Flash

Adobe Flash

Page 2: Adobe flash-คู่มือ-สำหรับครู

สารบญ บทท 1 สวนประกอบของ Flash 1 1.1 สวนตดตอกบผใช 2 1.2 กลองเครองมอ 3 1.3 การเรมตนชนงาน 4 1.4 การควบคมมมมองของโปรแกรม 5 1.5 การบนทกไฟล 5 1.6 การเลอกวตถ 6 1.7 การจดวตถ 7 บทท 2 การสรางวตถกราฟก 8 2.1 การวาดเสนตรง 8 2.2 การดดเสน 8 2,3 การเปลยนคณสมบตของเสน 8 2.4 การเปลยนความหนาเสน 9 2.5 การปรบแตงขอบของมมเสน 9 2.6 การปรบรปแบบของปลายเสน 10 2.7 การวาดเสนอสระ 10 2.8 การวาดเสนโดยใชปากกา 10 2.9 การเพมจดของเสน 11 2.10 การวาดรปทรงสเหลยม 11 2.11 การวาดวงกลม 12 2.12 การวาดรปทรงหลายเหลยม 13 2.13 การใชเครองมอยางลบ 14 2.14 การลงสวตถ 15 2.15 การเทสลงบนพนท 16 2.16 fการเทสลงบนเสน 16 2.17 การจดการระบบส 17

Page 3: Adobe flash-คู่มือ-สำหรับครู

2.18 การปรบสจาก Panel 17 2.19 การควบคมการไลส 17 บทท 3 การจดการขอความ 19 3.1 โหมดตวอกษร 20 3.2 ปญหาภาษาไทยกบ Flash 20 3.3 วธการพมพขอความ 20 3.4 การเปลยนคณสมบตขอความเปนหมวดตาง ๆ 22 3.5 การเปลยนคณสมบตของขอความใหเปนรปภาพ 22 บทท 4 การจดการวตถ 24 4.1 การแปลงวตถเปน Symbol 24 4.2 การเรยกใชและแกไข Symbol 25 4.3 การสราง Symbol แบบป ม 25 4.4 การสราง Symbol แบบภาพเคลอนไหว 27 4.5 การจดการ Library 28 4.6 การเปลยนคณสมบต Symbol 29 4.7 น า Symbol จากไฟลอนมาใช 30 บทท 5 การท า Animation 31 5.1 การใช Play Head 31 5.2 สราง Layer ใหม 32 5.3 สราง Folder 32 5.4 วธการสราง Folder 32 5.5 ระบบ Frame 33 5.6 การเพม Key Frame 33 5.7 การเพม Frame 34

Page 4: Adobe flash-คู่มือ-สำหรับครู

บทท 6 การสรางภาพเคลอนไหว 36 6.1 Animation แบบเฟรมตอเฟรม (Frame by Frame) 36 6.2 การสราง Animation แบบเฟรมตอเฟรม 37 6.3 Animationแบบเคลอนท (Motion Tween) 38 6.4 การสรางAnimationแบบเคลอนท (Motion Tween) 39 6.5 การปรบแตงการเคลอนไหวแบบ Motion Tween 40 6.6 Animation แบบเปลยนรปทรง (Shape Tween) 40 6.7 การสราง Animation แบบเปลยนรปทรง (Shape Tween) 41 6.8 การเคลอนไหวตามเสน Guide (Motion Guide) 42 6.9 วธการสรางภาพเคลอนไหวตามเสน Guide 42 6.10 การใชMaskกบงาน Animation 45 6.11 วธการใชงาน Mask 46 6.12 การเปลยนคณสมบตสของ Animation 47 6.13 ขนตอนการปรบแตงคณสมบตส 48 บทท 7 การแทรกไฟลVDO และ Sound 51 7,1 การแทรกไฟลVDO 51 7.2 การแปลงไฟล VDO 51 7.3 การบนทกไฟล Clip จาก YouTube 52 7.4 การน าไฟล VDO เขาไปใสใน flashแบบท 1 53 7.5 การน าไฟล VDO เขาไปใสใน flashแบบท 2 55 7.6 การแทรกไฟลเสยง 56 7.7 การน าไฟลเพลงเขามาใชเบองหลง 56 7.8 การน าไฟลเสยง Fx เขามาใช 58 7.9 การแทรกไฟลเสยงพดของตวละคร 59 บทท 8 การสรางระบบการท างานแบบ Interactive 61 8.1 การท าป มเมน 61 8.2 การปรบแตงคาของ event 65

Page 5: Adobe flash-คู่มือ-สำหรับครู

8.3 การควบคมการหยดและการเลนของ Animation 66 8.4 การท าแบบทดสอบแบบเลอกตอบ 68 8.5 การท าแบบฝกหดระหวางเรยนแบบแสดงกาโตตอบทนท 72 8.6 การโหลดไฟล Flash เขามาใชรวมกน 73 คยลดทส าคญของ Flash 75 เอกสารอางอง 77 เวบไซตทสามารถ หาความรเพมเตมได 77

Page 6: Adobe flash-คู่มือ-สำหรับครู

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

Adobe Flash แตเดมเปนโปรแกรมของ

คาย Macromedia ตอมา Adobe ไดท าการซอ

บรษท ท าใหชอในปจจบนคอ Adobe Flash

โปรแกรม Flash เปนโปรแกรมทใชในการสรางสอ

มลตมเดยไดหลากหลาย ภาพเคลอนไหวแบบ

เวคเตอรทมความคมชด สามา รถใสไฟลเสยง

วดโอ ท าระบบการโตตอบกบผใช ท าเวบไซต

รวมทงสามารถเขยนโปรแกรมในภาษา Action

Script และเชอมโยงตดตอกบฐานขอมลอน ๆ

เทคโนโลย Flash สามารถท างานไดหลากหลาย

ระบบปฏบตการเชน Windows MacOs Linux รวมทงอปกรณแบบพกพาเชนโทรศพทมอถอ PDA และยง

สามารถท างานเชอมตอกบอปกรณอน ๆ เชนกลอง webcam, Printer

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

การสอนแบบเอนมชนทมระบบโตตอบได , สอน าเสนอสนคา, เกม, เวบไซต,การตน ฯลฯ

1

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 7: Adobe flash-คู่มือ-สำหรับครู

1.1 สวนตดตอกบผใช เมอเขาสโปรแกรม Flash จะพบหนาจอทมสวนประกอบดงน

Menu Bar แทบเครองมอค าสงดวยรปแบบตวอกษร ทมครอบคลมทกค าสง โดยจะรวบรวมค าสงแบงหมวดหมตาง ๆ เราไมควรใชค าสงจากเมนบารเพยงอยางเดยวเพราะจะท าใหท างานไดชา Stage พนทการท างานโดยพนททแสดงผลจะอยบนสวนสขาว โดยชนงานทวาดหรอสรางลงไปจะถกแสดงผลจากบรเวณนเทานน สวนพนททไมแสดงผลจะเปนสเทา แต stage สามารถเปลยนสได ไมไดมเพยงแคสขาวเพยงอยางเดยว Toolbox กลองเครองมอทชวยใหเรยกใชค าสงไดงายยงขนดวยการแสดงเปนรปภาพ และในสวนของ Toolbox ยงมสวนของการปรบแตงคาเพมเตมเชน การเลอกรปแบบการลงส รปแบบของค าสงเพมเตมจาก Toolbox Timeline Flash เปนโปรแกรมทใช Timeline เปนหลก ใชส าหรบก าหนดชวงเวลาการเคลอนไหวการหยด หรอการก าหนดเวลาใหค าสงตาง ๆ ท างาน โดยการท างานจะแบงเปนสวนของ Layer ทท างานเปนชน เหมอนกบการวางแผนใสซอนกน โดย Layer ทอยดานบนสดจะเปน Layer ทเหนกอน สวน Layer ดานลางสดจะเหน

Stage

Panel

Menu bar

Properties Inspector

Time Line

Tool Box

2

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 8: Adobe flash-คู่มือ-สำหรับครู

ทหลง และ สวนของ Frame ทแบงเปนชอง ๆ แทนชองละ 1 Frame โดย 1 วนาทเราสามารถก าหนดไดวาจะใหแสดงผลจ านวนก Frame Properties Inspector และ Panel

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

ขนาดเสน ปรบส แบบอกษร

1.2 กลองเครองมอ

Selection tool < v > เครองมอทใชท าหนาทเลอกวตถและยงสามารถเคลอนยายวตถไดดวย

Subselection tool < A > เครองมอในการเลอกสวนประกอบของวตถเชนเลอกเฉพาะจด

Free Tranform Tool < Q > เครองมอใชส าหรบการหมนภาพ บดภาพ และขยายภาพ

Gradien Tranform Tool < F > เครองมอทใชปรบแตงการไลสไปในทศทางตาง ๆ

Lasso Tool < L > เครองมอการเลอกบรเวณพนทในชนงานแบบอสระ

Pen Tool < P > เครองมอทใชการวาดเสนแบบจดตอจดโดยสามารถท าเปนเสนโคงและเสนตรง

Add Anchor Point < = > เครองมอทใชการเพมจดของเสน

Delete Anchor Point < - > ใชลบจดของเสน

Convert Anchor Point < C > ใชส าหรบเปลยนจดของเสนจากเสนตรงใหเปนเสนโคง

Text Tool < T > ใชส าหรบพมพตวอกษรขอความ

Line Tool < N > ใชส าหรบวาดเสน

Rectangle Tool < R > ใชส าหรบสรางกลองสเหลยมสามารถปรบขอบมมโคงมนได

Oval Tool < O > ใชส าหรบสรางวงร โดยถากดป ม Shift คางเอาไวจะท าใหเปนวงกลม

Rectangle Primitive Tool < R > เปนเครองมอสรางกลองสเหลยมโดยสามารถปรบมมโคงไดทงกอนและหลงสราง

Oval Primitive Tool < O > ใชส าหรบสรางวงร โดยถากดป ม Shift คางเอาไวจะท าใหเปนวงกลม สามารถปรบแตงโคงไดทงกอนและหลงสราง

PolyStar Tool ใชส าหรบสรางรปหลายเหลยมโดยสามารถก าหนดไดวาจะสรางกเหลยม

3

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 9: Adobe flash-คู่มือ-สำหรับครู

Pencil Tool < Y > ใชส าหรบวาดเสนแบบอสระ

Brush Tool < B > ใชส าหรบวาดเสนแบบพกน โดยเสนมคณสมบตเดยวกบรปทรง

Ink Bottle Tool < S > เครองมอใชส าหรบการเปลยนสเสน

Paint Bucket Tool < K > เครองมอทใชส าหรบลงสพนผว

Eye dropper < I > เครองมอทใชส าหรบดงส ใชส าหรบตรวจสอบส หรอน าสไปใชกบสวนอน

Eraser < E > ใชส าหรบลบวตถ

Hand< H > ใชส าหรบเคลอนยายมมมองหนาจอ

Zoom < M,Z > ใชส าหรบยอขยายมมมองหนาจอ

Stroke color ใชส าหรบก าหนดสของเสน

Fill Color ใชส าหรบก าหนดสของพนผว

1.3 การเรมตนชนงาน

2. คลกทค าสงmenu bar File -> New จะปรากฏหนาตาง New Document

3. เลอกรปแบบชนงานทตองการซงโปรแกรมจะมคาเรมตนส าหรบผลงานหลาย ๆ แบบแต โดยปกต

จะเลอกท flash file ActionScript

4. ตงคาชนงานไดท menu bar Modify -> Document

ชอเรอง

รายละเอยด

ขนาดของชนงาน

รายละเอยด รปแบบการใช

หนวย จ านวนเฟรมตอวนาท

4

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 10: Adobe flash-คู่มือ-สำหรับครู

1.4 การควบคมมมมองของโปรแกรม

การควบคมมอมองมสวนส าคญในการท างานทรวดเรว เพอใชงานบอย ๆ ควรหดใชค าสง hotkey รวมดวย

โดยการควบคมมมมองม 2 ค าสงหลก ๆ คอ

1. การ pan ภาพทชวยการเคลอนมมมองของกลองไปตามจดตาง ๆ คลกท Toolbox Hand tool

จากนนคลกทหนาจอของชนงาน มมมองของหนาจอจะเลอนไปมาเหมอนกบวาเราใชมอเลอน

ชนงานบนโตะ

2. การ Zoom ค าสงยอขยายมมมอง เพอดภาพรวมและขยายมมมองในจดทตองการแกไข คลกท

Zoom แลวจงคลกทพนทท างาน โดยปกตคาเรมตนจะถกตงคาใหเปนการขยายมมมองแต

ถาตองการยอมมมองใหกดป ม Alt ทคยบอรดคางไวแลวคลกทพนทท างานจะเปนการยอมมมอง

1.5 การบนทกไฟล

การบนทกไฟลเบองตนใน Flash ม 2 รปแบบหลก ๆ คอ แบบไฟลทตองการแกไขได จะบนทกเปน

ไฟล .FLA มขนตอนการบนทกไฟลดงน

1. คลกท Menu Bar ท File - > save ในกรณทตองการบนทกเปนไฟลเดม หรอครงแรก และ

Save As ส าหรบกรณทตองการบนทกไฟลเปนชออน

2. เลอกต าแหนงทจดเกบไฟล พรอมพมพชอไฟล 3. ท Save As Type เลอก เวอรชนทตองการ ซงถาน าไปเปดในเครองทเวอรชนต าวาจะไม

สามารถเปดได ควรบนทกเปนเวอรชนทถกตอง ในกรณทไมไดไปเปดเครองอนกไมตองสนใจ

สวนนสามารถบนทกไดเลย จากนนกด Save

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

เทานนไมสามารถแกไขหรอปรบแตได จะตองบนทกเปนไฟล .SWFมขนตอนดงน

1. คลกท Menu Bar ท File - > Export -> Export Movie

2. เลอกต าแหนงทจดเกบไฟล พรอมพมพชอไฟล 3. ท Save As Type เลอก รปแบบไฟลทตองการ ใหเลอก swf ถาตองการน าชนงานไปเผยแพรแบบ

Flash แตในสวนนยงสามารถเลอก export เปนภาพเคลอนไหวแบบอน ๆ ไดดวย

5

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 11: Adobe flash-คู่มือ-สำหรับครู

1.6 การเลอกวตถ

ถงแมวา Flash จะเปนโปรแกรมแบบ Vector แตการเลอกวตถสามารถยดหยนไดเหมอนกบ

โปรแกรมประเภท Raster คอสามารถเลอกบางสวนหรอสวนใดสวนหนงไดโดยอสระ โดยมเครองมอดงน

Selection tool ใชส าหรบการเลอกทงวตถ ถาคลกเพยง 1 ครง จะเปนการเลอก 1 วตถ แตถาดบเบล

คลกจะเปนการเลอกวตถและเสนพรอมกน แตถาในกรณทคลกทเสน 1 ครงจะเปนการเลอกสวนของเสน

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

และเปลยนรปรางของวตถดวย

Subselection tool ใชส าหรบเลอกสวนของวตถ โดยใหคลกทวตถ 1 ครง จากนนจะปรากฏจดตอ

ของวตถ ซงสามารถคลกตามจดตาง ๆ เพอปรบเปลยนรปทรงได

Lasso Tool ใชส าหรบเลอกสวนของวตถโดยก าหนดอณาเขตแบบอสระ โดยวาดขอบเขตทตองการ

6

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 12: Adobe flash-คู่มือ-สำหรับครู

1.7 การจดวตถ

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

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

การจดการต าแหนงวตถดงน

1. จากภาพวตถกลองจดวางไมเปนระเบยบ

2. ไปทmenu bar เลอก Windows->Align เพอเรยกหนาตาง Align

3. คลกครอบวตถทงหมด แลวคลกเลอกการจดระยะ การเวนระยะหาง การเรยงใหตรงกนตามรป

7

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 13: Adobe flash-คู่มือ-สำหรับครู

บทท 2 การสรางวตถกราฟก

2.1 การวาดเสนตรง

คลกทเครองมอ Line tool เมาสจะเปลยนเปนสญลกษณ + ใครคลกต าแหนงเรมตน จากนนคลก

เมาสคางเอาไวแลวลากเมาสไปยงทศทางทตองการ แลวจงปลอยเมาส แตในกรณทตองการวาเสนให

ขนานกบแกน 8 ทศ ใหกดป ม Shift ขณะลากเสน จะท าใหเสนนนตงฉากหรอเฉยง 45 องศา โดยทไมตอง

คอยกะระยะเอง

2.2 การดดเสน

สามารถดดเสนตรงทวาดขนใหเปนเสนโคงโดยการคลกเมาสท Selection tool จากนนคลกทบรเวณ

กลางเสนคางเอาไวแลวลากไปยงทศทางตาง ๆ เสนจะถกแปลงเปนเสนโคง

2,3 การเปลยนคณสมบตของเสน

ใหคลกทเสนทตองการจะเปลยนคณสมบต ถาคลก 1 ครงจะเปนการเลอกชวงเสน 1 ชวง แตถาใชการ

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

ทงหมด จากนนทดานลางของหนาจอบรเวณหนาตาง Properties ใหท าการ set คาดงน

8

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 14: Adobe flash-คู่มือ-สำหรับครู

2.4 การเปลยนความหนาเสน

ใหคลกทเสนจากนนทค าสงเปลยนความหนาของเสนใหพมพความหนาลงไปเปนตวเลข ในเวอรชน CS3 น สามารถใสความหนาของเสนเปนจดทศนยมได หรอใชวธการ สไลดเพมขนาดหรอลดขนาดทลกศรดานขางของขนาดเสน 2.5 การปรบแตงขอบของมมเสน ในการวาดรปจะตองมการใชเสนหลายเสนมาตอกนหรอมการหกมมของเสน ถาจะใหมความสวยงาม

จะตองก าหนดขอบมมเสนดวย Miter มมแหลม Round มมมน Beval มมตด

สของเสน ความหนา รปแบบเสน

เสนขอบมนหรอตด

รปแบบการเชอมจดตอ รปแบบการเชอมจดตอ

ชวยลดการเบลอสวนโคงของเสน Miter ความแหลมของมม

ก าหนดรปแบบเสนเอง

ความสมพนธกบความ

หนาของเสนและมมมอง

9

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 15: Adobe flash-คู่มือ-สำหรับครู

2.6 การปรบรปแบบของปลายเสน

เสนทวาดขนมาตรงปลายเสนสามารถปรบรปแบบได 3 รปแบบดงน

None ปลายเสนตดพอดกบความยาวของเสน

Round ปลายเสนโคงมน

Square ปลายเสนตดแตเวนระยะออกมาหางกบปลายเสน

2.7 การวาดเสนอสระ

การวาดเสนอสระจะใชเครองมอ Pencil Tool โดยค าสงนเสนทวาดยงคงคณสมบตของ Stoke อย

สามารถดดแกไขไดงายเชนเดยวกบค าสง Line สามารถปรบแตงลกษณะการวาดได โดยการปรบแตงจะ

อยดานลางของ Tool box ม3 ลกษณะดงน

Straighten ท าใหการวาดมความเปนเสนตรง หรอเสนเปนรปทรงโคง วงร วงกลม

Smooth ท าใหการวาดมความโคงมนและมความตอเนองกน

Ink ท าใหการวาดมความอสระเหมอนกบการขยบของมอมากทสด แตเสนมกมปญหาไมตอเนองกน

2.8 การวาดเสนโดยใชปากกา

การวาดเสนโดยใชปากกาเปนการวาดเสนทผสมผสานระหวางเสนตรงกบการวาดโคงแบบ Bezier เมอ

ตองการวาดเสนโคงใหคลกเมาสคางเอาไวแลวลาก เสนจะถกบดเปนโคงแบบ Bezier และเสนสามารถ

ลากตอ ๆ กนได และเมอตองการใหเปนรปทรงปด ใหวนเสนกลบมาคลกทจดเรมตนอกครง

10

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 16: Adobe flash-คู่มือ-สำหรับครู

2.9 การเพมจดของเสน

การเพมจดของเสนทวาดขนจากปากกา หรอเสนเพอเปลยนใหเสนเปนรปรางตาง ๆ หรอใสรายละเอยดให

มากยงขน วธใชใหคลกเมาสไปท Add Anchor Point จากนนคลกไปทสวนของเสนในจดทตองการ

ค าสงนตองใชค าสง Convert Anchor Point หรอ Subselection tool เปนเครองมอทใชขยบ

จดทสรางไว และถาตองการน าจดออกใหเลอกทค าสง Delete Anchor Point เพอลบจด

2.10 การวาดรปทรงสเหลยม

1. วาดรปสเหลยมโดยคลกทป ม Rectangle Tool

2. ก าหนดคณสมบตของสวนโคงในกรณทตองการท าใหสเหลยมโคงมน

11

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 17: Adobe flash-คู่มือ-สำหรับครู

3. คณสมบตน ถาก าหนดเปน 0 จะไมมขอบมน ถาใสเปนคาบวกขนไปจะเปนขอบมน และถาใสคาท

เปนลบจะเปนขอบมนแตเขาดานใน

4. คลกเมาส ก าหนดจดเรมตนของสเหลยม ซงจะเปนจดมมของสเหลยม แตถาตองการวาดรปสเหลยมใหเปนสเหลยมจตรสใหกดป ม Shiftคางไว ถาตองการใหเรมจากศนยกลางใหกดป ม Alt

คางเอาไว

5. ในกรณทตองการสรางกลองทมระยะทแนนอน ใหกดป ม Alt กอนทจะคลกเมาสจะปรากฏกลอง

ขอความขนมาดงรป

ส าหรบการวาดรปสเหลยมในเวอรชนน ม2 แบบคอ

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

Rectangle Primitive Tool ใชส าหรบสรางกลองสเหลยมสามารถปรบขอบมมโคงมนไดทงกอนและ

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

อกครงหนง

2.11 การวาดวงกลม

1. สรางวงกลมดวยการคลกทป ม Oval Tool

2. สรางวงกลมดวยการคลกทมมจดแรก และลากเฉยง ไปยงอกจดโดยปกตแลวรปทรงจะไมเปนวงกลมจะตอง กดป ม Shift รวมดวย และถาตองการใหเรมจากศนยกลางจะตองกดป ม Alt

ความกวาง

ความสง

ก าหนดขนาดของมม

วาดจากศนยกลาง

12

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 18: Adobe flash-คู่มือ-สำหรับครู

3. สามารถก าหนดจดเรมของสวนโคงได โดยการใสต าแหนงของรศมของวงกลม โดยสามารถก าหนดไดทงจดเรมและจดจบ

4. ก าหนดคา inner radian เพอเจาะวงกลมใหเปนลกษณะโดนท

5. คลกท Close Path โปรแกรมจะไมลง fill สใหกบวงกลมในกรณทใชกบค าสง Start angle และ

end angle

2.12 การวาดรปทรงหลายเหลยม

1. คลกทป ม PolyStar Tool ในค าสงนจะสามารถสรางเหลยมได 3-32 มม

2. คลกทป ม Options จะปรากฏหนาตาง Tool Settings

3. ค าสงรปหลายเหลยมนมใหเลอกการวางเพยงอยางเดยวคอ วางจากศนยกลางจงไมตองกดป ม Alt

4. สวนการปรบแตงคาอน ๆ จะมความคลายกบเสนและกลองสเหลยม

การวาดดวยพกน

เลอกรปหลายเหลยมและรปดาว

จ านวนมม

ความลกของแฉกดาว

13

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 19: Adobe flash-คู่มือ-สำหรับครู

การวาดดวยค าสงพกนจะท าใหไดเสนทเหมอนจรง มความสวยงามเวลาวาดภาพ ถาใชกบอปกรณ Teblet

จะท าใหการวาดเหมอนจรงมากยงขน แตค าสงนกมขอจ ากดคอ เสนทวาดมคณสมบตเปน Fill ไมใช Stoke

ท าใหแกไขไดยาก

1. คลกทป ม Brush Tool เลอกสจากกลอง Fill Color เนองจากค าสงนไมใชค าสงเสน

2. วาดเสนลงไปในชนงาน

3. ถาตองการวาดเสนลงพนทลกษณะพเศษ จะตองคลกป ม Brush Mode เพอนเลอกรปแบบการลงสทตองการ โดยมรปแบบดงน

a. Paint Normal เมอระบายส สทระบายจะทบเสนและพนท

b. Paint Fills สทระบายจะทบเฉพาะสวนของพนทแตไมยงเกยวกบเสน

c. Paint Behind สทระบายจะปรากฏทพนหลงวตถ

d. Paint Selection สทระบายจะระบายเฉพาะพนของบรเวณทเลอกเทานนโดยจะตองเลอกวตถนน ๆ กอน

e. Paint Inside สทระบายจะระบายเฉพาะพนทดานใน

2.13 การใชเครองมอยางลบ

การใชยางลบในโปรแกรม Flash จะแตกตางกบโปรแกรมกราฟก Vector อน ๆ คอสามารถเลอก

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

1. เมอตองการลบภาพ คลกท Eraser Tool เพอท าการเปลยน

หวปากกาเปนยางลบ

2. คลกทป ม เพอเลอกลกษณะของยางลบ มหลายลกษณะให

เลอกเชน สเหลยม วงกลม

14

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 20: Adobe flash-คู่มือ-สำหรับครู

2. คลกป ม Eraser Mode เพอเลอกโหมดการลบ

a. Eraser Normal ลบเสนและพนท

b. Eraser Fills ลบเฉพาะสวนของพนทโดยยางลบจะไมไปลบเสน

c. Eraser Lines ลบเฉพาะสวนของเสนเทานน

d. Eraser Selected Fills ลบเฉพาะพนทของบรเวณทเลอกโดยยางลบจะไมไปลบเสน

e. Eraser Inside ลบเฉพาะภายในพนทของพนทดานใน

3. สามารถใชเครองมอ Faucet ลบเฉพาะพนทของสโดยไมจ าเปนใชยางลบลบทละสวน

2.14 การลงสวตถ

วตถใน Flash จะมสวนหลก ๆ อย 2 สวนคอ

เสน Stoke และพนท Fill โดยการลงสวตถสามารถลง

สหรอเปลยนไดทง 2 วตถ สวนพนทของสสามารถ

ปรบแตงการไลสผสมส ซงใชเทคนคเดยวกบโปรแกรม

กราฟกประเภท Vertor ทว ๆ ไปได

15

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 21: Adobe flash-คู่มือ-สำหรับครู

2.15 การเทสลงบนพนท

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

จะตองมลกษณะเปนเสนปด หรอเกอบปด หรอมพนทอยกอนจงจะสามารถลงสใหมหรอเปลยนสได โดยม

วธการท าดงน

1. คลกทป ม Paint bucket Tool

2. เลอกสจากแถบ Tool box Fill Colorเปลยนสทตองการ จากนนคลกเทสลงไปใน

ชองวางตามรป

3. การลงสบนวตถใน Flash บางครงจะพบปญหาไมสามารถลงสได นนกเพราะวาเสนของภาพนน ๆ

ไมปดสนทกนจงตองตงคาเพมเตมโดยต าแหนงดานลาง Toolbox จะพบค าสง Gaps ใหคลกคาง

ไว ถาเสนปดกนมากใหเลอกท Don’t Close Gaps ถามชองวางมากใหเลอก Close Large Gaps

จงจะสามารถลงสได

2.16 fการเทสลงบนเสน

1. ลงสหรอเปลยนสของเสน Stroke ไดโดยใชเครองมอ Ink Bottle

Tool เทลงไปลงบนเสน โด

2. เลอกสท Toolbox Stoke Color เพอเปลยนสเสนทตองการ

3. คลกไปทเสนทตองการจะเปลยนส

16

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 22: Adobe flash-คู่มือ-สำหรับครู

2.17 การจดการระบบส

Swatches ระบบสใน Flash มหนาตาดงรป โดยจะมองคประกอบการตงคาดงน

2.18 การปรบสจาก Panel

ทางดาน Panel ดานขวามอเปนการปรบแตงสโดยสามารถควบคมสไดระเอยดมากขนสามารถท า

การไลส ปรบแตงคาสขนสง โดยคลกท Panel Color จะปรากฏนาตางดงน

2.19 การควบคมการไลส

1. เลอก Type เปน Linear จะปรากฏแทบ Overflow

แสดงการไลสเรมตน

2. ดานลางกลอง Color จะปรากฏแถบสทมการไลส โดยสเรมตน

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

ไลสตามระยะทตองการ

สทเลอก

ถาดสพเศษ

ความโปรงแสง ไมมส

ปรบแตงสเอง

เปลยนสเสน

เปลยนสพน

เปลยนเปนสขาวด า

เลอกไมมส

สลบสเสนกบพนท

ไลโทนสมดสวาง

คลกบรเวณสทตองการ

ความโปรงใส ปรบแตงคาสโดยใสคาเลข ปรบสดวยเลขฐาน 2

รปแบบการไลส

17

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 23: Adobe flash-คู่มือ-สำหรับครู

3. สามารถเพมจดต าแหนงของสได โดยน าเมาสคลกไปทบรเวณเสนแถบส เปนการเพมต าแหนงส จากนนดบเบลคลกทต าแหนงสเพม แลวจงเลอกสทตองการ

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

5. ถาสใดใชบอย ๆ อยากเกบไวเรยกใชใหคลกท option menu ของหนาตาง Color

6. เลอกท Add Swatch เพอจดเกบสไวในถาดส

18

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 24: Adobe flash-คู่มือ-สำหรับครู

บทท 3 การจดการขอความ

การสรางบทเรยน การใสค าบรรยายหรอค าอธบายเปนเรองทพบกนอยบอย ๆ ใน flash เองกม

เครองมอทจดการเรองตวอกษรขอความ สามารถรองรบไดหลากหลายภาษา เมอตองการเรยกใช Text ให

คลก Tool box Texttool สวนบรเวณของ Properties Inspector จะเปลยนเปน Text Tool ดงรป

ดานลาง

Text Type โหมดของอกษรขอความ

Text Block Position ต าแหนงและขนาดของขอความ

Character Spacing การก าหนดระยะหางของตวอกษร

Font รปแบบของตวอกษร

Text Fill Color ก าหนดสของตวอกษร

Alignment การจดต าแหนงตวอกษร

Edit Format Option ก าหนดรปแบบการยอหนา

Change Orientation of text ก าหนดแนวการวางตวอกษร

Line Type ก าหนดชนดของการบขอมล ในสวนของ Input Text

Font Rendering method ก าหนดรปแบบการเรนเดอรตวอกษร

Auto Kern ก าหนดใหปรบชองไฟของตวอกษรอตโนมต

URL Link ก าหนดการเชอมโยงไปยงเวบอน

Target ก าหนดการรปแบบการเปดหนาเวบ

โหมดของอกษรขอความ แบบ Font ต าแหนงการจดวาง ปรบแตงคณสมบต

ระยะหางระหวางอกษร

ตวยกตวหอย

การ Render ตวอกษร

ตงคาจ านวนบรรทดของ Dynamic URL Linkเชอมโยง Target ของ Link

19

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 25: Adobe flash-คู่มือ-สำหรับครู

3.1 โหมดตวอกษรมดวยกน 3 หมวดคอ

1. Static Text เปนขอความธรรมดา ใชส าหรบพมพขอความทวไป ไมสามารถใชค าสงตวแปรแกไขได

2. Dynamic Text เปนขอความ Text ทมการเปลยนแปลงดวยการเขยนค าสงเพมเตมได

3. Input Text เปนการสรางกลองขอความ ก าหนดพนทรบขอมล

3.2 ปญหาภาษาไทยกบ Flash

เนองจากยอดขายโปรแกรม Adobe แบบลขสทธในเมองไทยมปรมาณไมมาก บรษทจงไมไดให

ความส าคญเปนพเศษกบเรองภาษาไทย การพฒนาโปรแกรมใหใชงานกบภาษาไทยนนเปนเรองทยงยาก

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

ของ adobe ตองใชโปรแกรมเสรมอน ๆ เขาชวย หรอบางทกตองเปลยน font ชดใหมมาใชเพอแกปญหา

ส าหรบปญหาเรองพมพขอความใน Flash CS3 จะมปญหาเรองระยะหางของตวอกษรกบ Windows Vista

และ Windows 7 ปญหาจะเกดขนตอนทพมพขอความตอนสราง แตตอนน าไปแสดงผลใชจรงจะไมม

ปญหา

3.3 วธการพมพขอความ

1. คลกท Text tool เพอพมพขอความ

2. ปรบแตงคา Properties Inspector ตามรปภาพดานลาง Font เปนแบบ Arial ขนาด 25 และเปนส

ด า ชดดานซาย

20

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 26: Adobe flash-คู่มือ-สำหรับครู

3. คลกวางขอความลงบนชนงานตามตวอยาง และพมพขอความลงไป วา Introduction to

computer

4. คลก Text tool และเปลยนขนาดเปน 16 ลากกรอบโดยลากไปทางดานขวาตามระยะของ

ขอความทตองการ จะปรากฏกลองสเหลยมขน 1 บรรทด จากนนพมพขอความ “The lessons

contain relatively little text, plenty of images and many podcasts prepared by students in

which they talk about a particular topic within each lesson. Most of the lessons are

framed around concepts from the world of computers ลงไปในชองโดยไมตองกด enter เพอ

ท าการขนบรรทดใหม โปรแกรมจะพยายามตดค าใหเอง

5. ทางกลองดานขวามอใส Link เชอมโยงไปยงเวบไซต พมพชอเวบไซตตามรปดานลางลงไป

6. คลกทชอทพมพ 1 ชอ และแกไข Properties Inspector ในชอง Link

7. ใสชอเวบตามชอดานลาง จะสงเกตวาชอเวบจะตองขนตนดวย http:// และชอ Url เวบกบชอท

เขยนเปน เมนอาจจะเปนคนละชอกได เชน papemodel แต Link ไปท

http://www.papermode.in.th

Http://www.sanook.com

Http://www.google.com

Http://www.yahoo.com

Http://www.papermodel.in.th

Http://www.hotmail.com

21

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 27: Adobe flash-คู่มือ-สำหรับครู

3.4 การเปลยนคณสมบตขอความเปนหมวดตาง ๆ

ตวอกษรขอความใน Flash สามารถสลบโหมดการท างานไปมาระหวาง Static Text Dynamic

Text และ Input Text ไดแตการสลบไปมาอาจท าใหคณสมบตและการตงคาบางอยางเปลยนไป จงควร

ตรวจสอบทกครงหลงจากการเหมอนโหมด

ขอความ สามารถเปลยนไดดวยวธดงน

1. คลกทขอความทตองการเปลยนโหมด 2. Properties Inspector คลกเลอกลกศร

ขางกบชอโหมดขอความเพอเปลยนโหมดท

ตองการ

3.5 การเปลยนคณสมบตของขอความใหเปนรปภาพ

ตวอกษรทอยใน Flash มคณสมบตเปน Text ซงมขอดคอแกไขเปลยนแปลงขอมลไดงาย แตถา

น ามาใชในงานออกแบบเพอใหชนงานมเอกลกษณ เราจะตองท าลายคณสมบตของ Text ทงเสยกอน โดย

มขนตอนดงน

1. คลกท Text tool เพอพมพขอความ โดยเลอกตวอกษรทมความหนาและขนาดใหญ ใน

ตวอยางเลอก Font Arial Black และเลอกขนาด Font ท 60 และสน าเงน

22

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 28: Adobe flash-คู่มือ-สำหรับครู

2. ถาตองการปรบตวอกษรใหเปนรปภาพจะตองใชค าสง Break Apart โดยการคลกขวา แลวเลอก

Break Apart หรอกด Ctrl + B ชดขอความค าวา CAI จะถกแยกออกเปน 3 ตว ซงยงคงคณสมบต

ตวอกษรอย

3. ใชค าสง Break Apart ท าลายคณสมบตของตวอกษรอกครง ตวอกษร CAI จะกลายเปนวตถ

รปภาพไมสามารถพมพแกไขขอมลไดอกตอไป

4. เมอถกเปลยนเปนคณสมบตรปภาพโดยสมบรณแลวสามารถดดแปลงดงแกไขใด ๆ กได

23

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 29: Adobe flash-คู่มือ-สำหรับครู

บทท 4 การจดการวตถ

การใชงาน Flash ท า Animation จะตองแปลงวตถตาง ๆ ใหมคณสมบตทถกตอง เพองายตอการแกไข การ

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

Movie clip : ชดวตถทมการเคลอนไหว

Button : วตถทเปนป ม

Graphic : วตถทเปนรปภาพ

4.1 การแปลงวตถเปน Symbol

1. เมอมวตถอยแลว ใหคลกทค าสง Selection tool จากนนคลกลอมรอบวตถทตองการจะแปลง

เปน Symbol

2. คลกขวาเลอกทค าสง Convert to symbol หรอ กด F8 จะปรากฏหนาตาง Convert to Symbol

3. Name พมพชอของวตถ โดยชอของวตถไมควรซ ากน ควรมการวางแผนชอใหด

4. Type เลอกรปแบบของ Symbol ในกรณรปตนไมดงรปควรใชแบบ Graphic

5. Registration เปนการเลอกจดอางองเรมตน

6. จากนนวตถจะเขาไปอยในกลอง Library ถาในกรณทไมปรากฏหนาตาง Library ใหกด Ctrl+L

24

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 30: Adobe flash-คู่มือ-สำหรับครู

4.2 การเรยกใชและแกไข Symbol

เมอเราสราง Symbol ขนมาในไฟลนน ๆ สามารถดง Symbol มาใชไดตลอดวธการเรยกใชท าไดดงน

1. คลก Symbol จากกลอง Library ลากเขามาใชในชนงาน โดย Symbol จะเหมอนกบตนแบบและ

สามารถยอขยายขนาดได

2. ถาตองการเปลยนแปลงแกไข Symbol ใหดบเบลคลกท Symbol

3. จากนนสงเกตแถบแสดงสถานะของการแกไขชนงาน จะปรากฏชอของ Symbol ทตองการแกไข

4. เมอท าการแกไขแลวทก Symbol จะถกเปลยนใหเหมอนกบ Symbol ทมการแกไข

4.3 การสราง Symbol แบบปม

นอกจากการท างาน animation โปรแกรม Flash ยงถกออกแบบมาใหท างาน ในลกษณะทผใชงาน

สามารถโตตอบหรอมปฏสมพนธได จงจ าเปนตองมการก าหนด Symbol ใหมลกษณะเปนป ม โดยการตง

คาพนฐานของป มมดวยกน 4 สถานะคอ up over down hit วธการสรางป มมวธดงน

1. สรางกลองหรอวตถขนมาแทนป ม ดวยเครองมอ

Rectangle Tool

2. คลกลอมรอบวตถ แลว convert Symbol ดวยการ

กด F8

25

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 31: Adobe flash-คู่มือ-สำหรับครู

3. จะปรากฏหนาตาง Convert to Symbol ใหเลอกท Button และตงชอป มวา ok หมายถงป มนจะถก

ใชเปนป มตกลง

4. ดบเบลคลกทวตถ Symbol ทสรางขน ทแถบแสดงการแกไข symbol จะเขาส Symbol ok และท

Timeline จะถกเปลยนเปน 4 สถานะคอ up over down hit

a. Up สถานะป มทยงไมถกคลก

b. Over สถานะป มเมอน าเมาสไปวางเหนอป ม

c. Down เมอน าเมาสไปคลกทป ม

d. Hit ก าหนดพนทของป ม

5. กด F6 เพอสราง คยเฟรมใหม ใหมในชอง Over จากนนแกไขสหรอเปลยนแปลงลกษณะของป ม

ใหเปนรปแบบอน ๆ เพอใหเกดความแตกตางเวลาน าเมาสไปวางเหนอป ม

26

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 32: Adobe flash-คู่มือ-สำหรับครู

6. กด F6 เพอสราง คยเฟรมใหม ใหมในชอง Down เพอก าหนดสถานะเมอมเมาสคลกไปทป ม

7. กด F6 เพอสราง คยเฟรมใหม ใหมในชอง Hit เปนการก าหนดบรเวณของป ม ซงบางครงอาจจะ

ใหญกวาป มทสรางไวกได มกใชกรณทใชขอความ Link ทเปนตวอกษร

4.4 การสราง Symbol แบบภาพเคลอนไหว

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

1. วาดวตถตนแบบในลกษณะภาพกราฟก ในรปตวอยางเปนลกบอลวงกลม

2. คลกลอมรอบวตถ แลว convert Symbol ดวยการกด F8

3. พมพชอวตถ โดยจะตองไมซ ากบชนงานทมอยแลว 4. เลอก Type เปน Movie Clip Registration เปนศนยกลางจากนนกด Ok

5. ดบเบลคลกทวตถ Symbol ทสรางขน ทแถบแสดงการแกไข symbol จะเขาส Symbol “ball”

6. ใหคลกสวนของ Time Line ดานบน ชองแรกใน Frame ท 10 แลวกด F6 เพอสราง Key frame

7. ลากลกบอลไปในทศทางอน เพอก าหนดจดเคลอนท

27

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 33: Adobe flash-คู่มือ-สำหรับครู

8. คลกขวาท ระหวางเฟรมท 1-10 เลอกท Create Motion Tween เพอสรางการเคลอนไหว

9. ออกจากสถานะการแกไข Symbol เพอกลบไปท Scene หลก โดยคลกท Scene 1

10. ทดสอบการท างานโดยการกด Ctrl+Enter เพอทดสอบชนงาน Animation

หมายเหต ส าหรบรายละเอยดของการท า Animation จะกลาวถงในบทตอไป

4.5 การจดการ Library

หนาตาง Library สามารถเรยกใชงานไดจากการกดป ม Ctrl + L หรอคลกท Window -> Library

สญลกษณของ Symbol มดงน

Button : ป ม

Movie Clip : ภาพเคลอนไหว

Graphic : ภาพ

Floder : แฟมเพอจดเกบ Symbol ใหเปนหมวดหม

28

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 34: Adobe flash-คู่มือ-สำหรับครู

สวนประกอบตาง ๆ ของ หนาตาง Library

4.6 การเปลยนคณสมบต Symbol

Symbol สามารถสลบคณสมบตกนได เชนสลบจาก Button เปน Movie clip หรอสลบจาก Graphic เปน

Button แตการสลบนจะท าใหคณสมบตบางอยางของวตถหายไป เทาทพบเหนจะเปนการสลบจาก

Graphic เปน Button หรอ Movie clip เปนสวนใหญ วธการสลบมดงน

วธท 1

1. เลอกวตถจากชอในหนาตาง Library

2. คลกทป มเครองมอ จะปรากฏหนาตาง Symbol Properties

3. เปลยนคณสมบตของวตถตามตองการ

ชอไฟล

ปรมาณsymbol

รป Symbol

รายชอ Symbol

สราง Symbol

สราง Folderl

ดขอมล Symbol ลบ Symbol

เรยงล าดบ Symbol

ตรง Library

สราง Library ใหม

29

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 35: Adobe flash-คู่มือ-สำหรับครู

วธท 2

1. คลกขวาทชอของ symbol แลวเลอก ท Type -> เลอกรปแบบ Symbol ทตองการ

4.7 น า Symbol จากไฟลอนมาใช

เราสามารถน า Library ทสรางขนใรชนงาน ไปใชกบไฟลอน ๆ หรอน า Library ของไฟลอน ๆ มาใชใน

ชนงานได แตตองระมดระวงเรองชอของ Symbol อาจมการซ ากน ท าใหผลงานเกดปญหา ในกรณทชอ

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

ดวย มขนตอนการน าเขาดงน

1. เมออยในไฟลงานทตองการเรยกใช Library ไปทเมนบาร File -> Import -> Open External

Library

2. โปรแกรมจะใหเลอกไฟล Flash ทม Library ทตองการ

3. ในไฟลทท างานอย จะปรากฏ Libraryทเรา Import เขามาใชงาน

30

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 36: Adobe flash-คู่มือ-สำหรับครู

บทท 5 การท า Animation

ความสามารถทโดดเดนมาก ๆ ของโปรแกรม Flash นนกคอความสามารถดาน Animation ท

สามารถท างานงาย ๆ จนถง Animation ทมความซบซอนได ลกษณะการท างานของ Animation บน Flash

จะตองท างานบน Time Line ทมลกษณะเปนเฟรม อยทางดานบนของหนาจอ เรามาท าความรจกหนาตา

ของ Time Line Flash ดงน

5.1 การใช Play Head

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

จะแสดงผลตามทมการก าหนดต าแหนง Play Head สามารถเลอน Play Head โดยการคลกท Play Head

ทมลกษณะเปนสแดงเลอนไปยงเฟรมทตองการ

ซอน / แสดง Layer

Lock Layer แสดงเคาราง ต าแหนงเฟรม เฟรมปจจบนทท างาน Play Head

สราง Layer

สราง Guide Layer

สราง Folder

ลบ Layer เคลอน Play head

ไปกงกลางเฟรม

Onion skin Onion skin แบบ เหน

เฉพาะ Outline

Onion skin

แบบชดเฉาะ

Key frame

ชวงของการแสดง Onion skin

หมายเลขเฟรมปจจบน

จ านวนเฟรมตอ 1 วนาท

เวลาทใชนบจากเรมถง Play Head

31

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 37: Adobe flash-คู่มือ-สำหรับครู

5.2 สราง Layer ใหม

ในตอนเรมตนโปรแกรมจะสราง Layer 1 ขนมารอกอนแลว สามารถสรางหรอน าวตถเขามาใชงาน

ไดทนท ถาตองการสราง Layer เพมใหคลกทป ม Insert Layer จะปรากฏ Layer ใหม ซงควรจะมการแกไข

ชอ Layer ใหสอดคลองกบชนงาน โดยการกดป ม F2 ทชอ Layer

5.3 สราง Folder

ในการสรางชนงาน Flash มกประสบปญหา Layer ทมจ านวนมาก ซงไมสะดวกตอการเรยกใช

งาน จงควรจดเกบ Layer ตาง ๆ ใหอยในหมวดหม เชนตวอยางดานลางซายจะพบวา ชนงานม Layer

มากมายสวนทางดานขวาเปนการจดเกบ Layer ไวเปนหมวดหม

5.4 วธการสราง Folder

1 ใหคลกท จะปรากฏ Folder ขนมา

32

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 38: Adobe flash-คู่มือ-สำหรับครู

2 จากนนใหเปลยนชอ Folder ใหสอดคลองกบชนงาน โดยการกด F2 ทชอ Folder

3 น า Layer เขาไปใสใน Folder โดยการคลกเมาสท Layer คางไว แลวลากไปท Folder

5.5 ระบบ Frame

ลกษณะ Frame 1 Frame ของโปรแกรม Flash แทนภาพ 1 ภาพ ซงจะตองน า Frame มาเรยงตอ

กนจนเกดเปนภาพเคลอนไหว ลกษณะ Frame มรปแบบดงน

Frame ทไมมวตถ

Key Frame ทไมมวตถ

Key Frame ทมวตถ

Frame ทมการเขยน Action Script

KeyFrame ทมการตงชอ Instance

Frame เปลา

Motion Tween ( พนสฟา ) Frame ทมการเคลอนไหวอยางตอเนอง

Shape Tween ( พนสเขยว ) Frame ทมการเปลยนรปทรงอยางตอเนอง

Frame ทม Keyframe

5.6 การเพม Key Frame

เมอมการเปลยนแปลงต าแหนงการเคลอนทของ

วตถ เราจะตองสราง Key Frame ขนมาใหม โดยการกด

คลกขวาท Frame ทตองการสราง Key Frame แลวเลอก

Insert Keyframe หรอกด ป ม F6

33

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 39: Adobe flash-คู่มือ-สำหรับครู

5.7 การเพม Frame

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

เพมเฉพาะ Frame โดยมวธดงน

1. ในตวอยางดานลาง Animation ลกบอลจะวงจากเฟรมท 1 ไปสนสดในเฟรมท 20

2. ถาตองการเพมเฟรมใหคลกขวาทเฟรมจากนนเลอกท Insert Frame หรอกด F5 กด 1 ครงจะ

ม Frame เพม 1 Frame

3. ถาตองการเพมเฟรมจ านวนมากใหท า Highlight คลกครอบจ านวนหลาย ๆ Frame แลวกด

ป ม F5 จ านวน Frame จะขยายออกไปตามจ านวนชวงทไดเลอกเอาไว

34

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 40: Adobe flash-คู่มือ-สำหรับครู

นอกจากการเพม Frame ในชวงระหวาง Animation เรายงสามารถเพม Frame หลงจาก Keyframe เพอทง

ภาพสดทายใหปรากฏคางอย มวธการดงน

1. จากตวอยาง Keyframe หยดอยท Frame ท 25 นนกหมายความวา ลกบอลจะหยดทเฟรมท 25

ภาพกจะตดไปทเฟรมท 1 วนอกครง ซงถาตองการใหลกบอลหยดคางถง Frame ท 40 จะตองคลก

ขวาจากนนเลอกท Insert Frame หรอกดป ม F5

2. ผลทไดคอลกบอลจะวงจาก Keyframe ท1 จนมาหยดท Keyframe ท 25 และปรากฏคางไวถง

Frame ท 40

35

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 41: Adobe flash-คู่มือ-สำหรับครู

บทท 6 การสรางภาพเคลอนไหว การสรางภาพเคลอนไหวหรอ Animation ในโปรแกรม Flash มลกษณะการสรางดวยกน 3 แบบคอ

แบบเฟรมตอเฟรม (Frame by Frame)

แบบเคลอนท (Motion Tween)

แบบเปลยนรปทรง (Shape Tween)

6.1 Animation แบบเฟรมตอเฟรม (Frame by Frame)

การสราง Animation แบบ เฟรมตอเฟรม เปนการน าเอาเฟรมมาเรยงกน โดยในภาพแตละเฟรมจะตองม

การเปลยนแปลง การท า Animation แบบนภาพทไดจะไมลนไหล มกใชงานกบ Animation ทมการ

เปลยนแปลงของภาพทไมสม าเสมอและไมตอเนอง เชน การท า Animation ภาพ ปากคนพด

แตในบางชนงานถาท าแบบ เฟรมตอเฟรม จะใชเวลาในการท ามากเชน การท าลกบอลกระเดง ถาเปนแบบ

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

ต าแหนงของลกบอลในอนาคต อาจจะตองท าใหมทงหมด

36

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 42: Adobe flash-คู่มือ-สำหรับครู

6.2 การสราง Animation แบบเฟรมตอเฟรม

1. ตงชอ Layer ใหสอดคลองกบวตถ ในตวอยางตงชอวาไฟ

2. สรางวตถลงบน Keyframe ท 1 ดงตวอยางเปนรปเปลวไฟ

3. ค านวณจ านวนเฟรมตอ 1 วนาท ถาตองการ Animation ทลนไหล จะตองวาดทกเฟรม แตใน

ตวอยางนตองการเพยงแค 4 ภาพ ตอ 12 เฟรม

4. ใหไปทเฟรมท 5 กด F6 เพอสราง Keyframe จากนนวาดตอเตมหรอลบของเดมออกและวาดรปไผ

ลงไปใหม ควรวาดใหใกลเคยงกบต าแหนงเดม

5. ท าแบบนไปเรอย ๆ โดย Keyframe จะอยในต าแหนงท 1,5,9 และมการทง Frame ไปจนถง 11

เหตทไมท า Frame ท 12 เนองจากการท า Animation ใน Flash เมอจบชนงานแลวจะมการวนซ า

ใหม ท าใหภาพสดทายจะตรงกบภาพท 1 พอด

6. กดป ม Ctrl+Enter เพอท าการทดสอบผลงานหรอ คลกท Menu File-> Publish Preview -> Flash

โปรแกรมจะปรากฏหนาตางผลงานขนมาแสดง

37

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 43: Adobe flash-คู่มือ-สำหรับครู

6.3 Animationแบบเคลอนท (Motion Tween)

เปนรปแบบการสรางทท าใหวตถมการเคลอนทเคลอนไหว เปลยนแปลงรปทรง ซงการท าก าหนด

เพยงจดเรมตนและจดสนสด สวน Frame ทเหลอถาใช Motion Tween โปรแกรมจะชวยสราง Animation

ทเหลอเอง การท า Animation แบบนชวยประหยดเวลาและท าใหผลงานมความลนไหล

6.4 การสรางAnimationแบบเคลอนท (Motion Tween)

1. จากรปตวอยาง มผล Apple อยบนตนไมตองการใหผล Apple ตกลงมาทพน ใหก าหนดระยะเวลา

ในการตก ดงตวอยางตองการ 1 วนาท ใหคลกท Frame ท 12 แลวกด F6 จากนนลากผล Apple

ลงมาทพน

38

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 44: Adobe flash-คู่มือ-สำหรับครู

2. ถาเลอน Play Head ไปมาจะพบวาใน Frame ท 1-11 ผล appleจะยงคางอยบนตนไม แตเมอถง

เฟรมท 12 ผล Apple จะตกมาทพนทนท การท าแบบนจะเปนลกษณะ animation แบบ Frame

by Frame

3. ปรบใหเปนแบบ Motion Tween โดยการคลกขวาทชวงระหวาง Frame แลวเลอก Create Motion

tween ท าใหชวง Frame มลกศรเพมเขามา แสดงใหรวา Motion Tween ท างาน

4. ตอนนลก Apple ตกลงทพนในเฟรมท 12 แลว แตการตกลงมายงไมสมจรง จงตองการท าใหลก

Apple กลงไปมากอนทจะหยดอยกบท โดยใหกด F6 ใน Frame ท 17 เพอสราง Keyframe

5. คลกทค าสง Free Transform จดการหมนลก Apple ไปทางขวาเลกนอย

6. กด F6 ใน Frame ท 22 เพอสราง Keyframe

7. คลกทค าสง Free Transform จดการหมนลก Apple ไปทางซายเลกนอย

8. คลกขวาทชวงระหวาง Frame แลวเลอก Create Motion tween ทง 2 ชวงเฟรม

9. คลกท Frame ท 35 ของ Layer ผลไม กด F5 เพอทงเฟรม เนองจากตงแตเฟรมท 22 – 35 ไมม

การเปลยนแปลงการเคลอนไหววตถ

10. กดป ม Ctrl+Enter เพอท าการทดสอบผลงานหรอ คลกท Menu File-> Publish Preview -> Flash

โปรแกรมจะปรากฏหนาตางผลงานขนมาแสดง

39

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 45: Adobe flash-คู่มือ-สำหรับครู

6.5 การปรบแตงการเคลอนไหวแบบ Motion Tween

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

ของ Properties จะปรากฏหนาตางดงรป

Tween ชนดการเคลอนไหว ม 3 รปแบบดงน

- None ยกเลกการเคลอนไหว Motion Tween - Motion สรางการเคลอนไหวแบบเคลอนท - Shape สรางการเคลอนไหวแบบเปลยนรปราง

Scale เมอใชจะท าใหวตถทอยใน Keyframe แรก และ Keyframe สดทายมขนาดเทากน โดยอตโนมต

Ease ระดบความเรวในการเคลอนท - คามากกวา 0 การเคลอนไหวจะเปนจากชาไปเรว - คานอยกวา 0 การเคลอนไหวจะเปนจากชาไปเรว - คาเทากบ 0 จะเปนการเคลอนไหวแบบปกต

Edit เปนการปรบแตงคา Ease In / Ease Out ขนสงปรบผานสวนโคง Rotate เปนค าสงการหมนวตถทถกสงการใหเคลอนไหว โดยมการตงคาดงน

- None ไมหมน - Auto หมนไปตามการเปลยนแปลงของออบเจกตในคยเฟรมสดทาย - CW หมนตามเขมนาฬกา - CCW หมนทวนเขมนาฬกา

6.6 Animation แบบเปลยนรปทรง (Shape Tween)

เปนการท า Animation ใหเปลยนรปทรงจากวตถหนงไปยงอกวตถหนง หรอวตถเดยวกนแตเปลยน

รปทรงกได ส าหรบวตถทจะน ามาท าตองไมเปน Symbol ถาเปน Symbol จะตองท าการเปลยนใหเปนวตถ

ธรรมดากอน

40

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 46: Adobe flash-คู่มือ-สำหรับครู

6.7 การสราง Animation แบบเปลยนรปทรง (Shape Tween)

1. วาดรปขนมาใหมหรอใชวตถทเปน Symbol แทรกเขามาในชนงานในไฟลตวอยางจะม 2 วตถคอ

Apple และ Tree

2. คลก Frame ท 1 ลาก แลวลาก Symbol Apple ลงบน Stage

3. กด Alt+B (Break Apart) เพอเปลยน Symbol ใหเปนภาพปกต

4. คลก Frame ท 36 กดป ม F6 ลบภาพ Apple ทอยบน Frame ท 36 ออก

5. ลาก Symbol Tree ลงบน Stage แลวกด Alt+B (Break Apart) เพอเปลยน Symbol ใหเปนภาพ

ปกต

41

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 47: Adobe flash-คู่มือ-สำหรับครู

6. คลกขวาชองวางระหวาง Frame แลวเลอก Create Shape Tween

7. กดป ม Ctrl+Enter เพอท าการทดสอบผลงานหรอ คลกท Menu File-> Publish Preview -> Flash

โปรแกรมจะปรากฏหนาตางผลงานขนมาแสดง

6.8 การเคลอนไหวตามเสน Guide (Motion Guide)

เราสามารถก าหนดเสนทางเดนของวตถโดยวาดเสนทาง ท าใหสะดวกตอการท า Animation เชน

การท ารถวง เครองบนบน นกบนบนฟา หรอคนเดนขนภเขา เราเพยงสราง Movie Clip จากนนสงใหขยบ

ตามเสนทาง นอกจากนยงสามารถแกไขเสนทางไดภายหลงดวย

6.9 วธการสรางภาพเคลอนไหวตามเสน Guide

ไฟลตวอยางเปนไฟลพนทมตนไมอยขางทาง โดยทจะตองน ารถขบไปตามทางดงกลาว โดยได

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

1. จดการ Lock Layer Ground และ Tree โดยการกดทต าแหนง Lock Layer ของ Layer เมอคลก

แลวจะเปนรปกญแจ

2. สราง ขนมา 1 Layer โดยคลกทป ม และเปลยนชอเปน Car และยาย Layer ไปไวดานบนสด

42

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 48: Adobe flash-คู่มือ-สำหรับครู

3. คลกท Layer Car คลกทป ม Add Motion

guide จะปรากฏ Layer Guide :car ซงจะเปน

Layer ทใชวาดเสนทางเดน ส าหรบสงทอยใน Layer

นจะไมเหนตอนทน าเสนอผลงาน จะเหนในตอน

สรางผลงานเทานน

4. คลกท Layer Guide :car จากนนวาดเสนทางเดนลง

บนถนนดวยค าสง Pencil Tool ซงควรปรบ

Pencil mode ทดานลาง Toolbox เปนแบบ

Smooth เพอใหรถขบตามเสนอยางเปนธรรมชาต

5. ในกรณทวาดเสนแลวมอไมนง หรอเสนยงเปนหยกเปลยมมม ใหดบเบลคลกทเสนเพอท าการเลอกเสนจากนนใหคลกท Tool box ทเขยนวา Smooth จนกวาเสนจะโคงมน หรอถากดจนเปนเปน

เหลยม ๆ กควรลบและวาดใหม

6. คลกท Layer car จากนนวาดภาพรถ หรอน าไฟลรปรถเขามาในชนงาน แตในตวอยางนไดเตรยม

รปรถไวใหแลว ใหน าภาพรถเขามาโดยคลกท Menu bar File->Import->Import to Stage

จากนนเลอกไฟล car.png ซงไฟลนเปนรปทมคณสมบตฉากหลงโปรงใส

43

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 49: Adobe flash-คู่มือ-สำหรับครู

7. ยอรปรถใหมขนาดตามถนนโดยการคลกท Free Transform แลวยอขนาดรถ

8. รปรถทน าเขามาเปนวตถรปภาพซงจะตองแปลงรปรถใหเปน Symbol เสยกอน โดยใหคลกทรปรถ

กด F8 โดยเลอกใหวตถเปนแบบ Graphic และตงชอวา “ redcar” แตในกรณทวตถรปรถมการ

เคลอนไหวดวยเชนลอหมน จะตองแปลงรปรถลอหมนใหเปน Movie Clip

9. ลาก Symbol “redcar” ไปทปลายเสน โดยใหจดอางองวงกลมใส ตดกบเสนพอด ( ความรสกจะ

เหมอนกบมแมเหลกมาดดตด ) โดยปกตโปรแกรมจะตงคา Snap ดดตดกบวตถมาใหอยแลวใน

กรณทเสนไมตดกบวตถใหคลกท Menubar View -> Snapping -> Snap to Objects

10. ท า Highlight ครอบบรเวณ Frame ท 60 ทก Layer แลวกด F5 เพอสราง Frame ตงแต Layer 1-

60 ซงในชนงานน 12 Frame ตอ 1 วนาท ถาตองการใหวง 5 วนาท จะตองใชจ านวน 60 Frame

11. ใน Layer car ใหกดป ม F6 ใน Frame ท 60 เพอท าการสราง Keyframe

44

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 50: Adobe flash-คู่มือ-สำหรับครู

12. ใหคลก Keyframe ท 60 ของ Layer car จากนนลากรถมาทปลายเสนอกฝง ตอนลากนนจะพบวา

รถจะถกดดตดกบเสน

13. หมนรถใหเอยงตามเสนปลายทางเพอใหตอนจบ การเคลอนทรถจะไดสมจรง 14. คลกขวาท Layer car แลวเลอก Create Motion Tween เพอท าใหรถเคลอนไหวตามเสน

15. ซงในขณะนรถจะเลยวโคงไมเปนธรรมชาต รถจะหนไปในทางเดยวกนหมด ใหแกไขโดยคลกให

ปรากฏเครองหมาย ทกลอง Orient to path ในหนาตาง properties ดานลางของหนาจอ

16. กดป ม Ctrl+Enter เพอท าการทดสอบผลงานหรอ คลกท Menu File-> Publish Preview -> Flash

โปรแกรมจะปรากฏหนาตางผลงานขนมาแสดง

6.10 การใชMaskกบงาน Animation

Mask จะเหมอนกบมหนากากทบงวตถทอยดานหลง สามารถบงสวนทไมตองการใหแสดงผลได

โดย Mask สามารถก าหนดเปนรปรางทเปนรปทรงตาง ๆ และภาพเคลอนไหวได

45

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 51: Adobe flash-คู่มือ-สำหรับครู

6.11 วธการใชงาน Mask

ในตวอยางงานชนนจะท าใหมไฟฉาย ฉายไปบนภาพโดยมลกษณะหาของในทมดแตพบกบปศาจแทน โดย

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

1. สราง Layer ใหม ตงชอวา Light

2. คลกขวาทชอ Layer Light แลวใหเลอกค าสง Mask ท าให Layer Background จะอยในสวนหนง

ของ Layer Light ดงรป และรปภาพของ Background จะถกซอนทนท

3. คลกค าสง unlock ทต าแหนงลกกญแจของ Layer Light

4. วาดรปวงกลมลงบน Layer light และเปลยนใหเปน Symbol Graphic โดยการกด F8 ตงชอวา

balllight

46

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 52: Adobe flash-คู่มือ-สำหรับครู

5. ก าหนดใหลกบอลเคลอนไหวไปมา โดยใชความรของการท า Animationแบบ Motion Tween โดย

สลบลกบอลไปมา แตตองใหมสวนพาดผานตวปศาจดวย

6. กด F5 ในต าแหนง Frame สดทายของ Layer Background โดยจะตองเทากบ Layer light

7. คลกขวาท Layer light แลวเลอก Create Motion Tween

8. กดป ม Ctrl+Enter เพอท าการทดสอบผลงานหรอ คลกท Menu File-> Publish Preview -> Flash

โปรแกรมจะปรากฏหนาตางผลงานขนมาแสดง

6.12 การเปลยนคณสมบตสของ Animation

นอกจากการเคลอนทการเปลยนรปรางของ Animation ยงสามารถปรบสของวตถคอย ๆ เปลยน

หรอความชดของวตถจากชดไปจนจางหายไป สามารถก าหนดไดจากแถบส Instance จากกลองเครองมอ

Properties Inspector

47

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 53: Adobe flash-คู่มือ-สำหรับครู

สวนของ Color Instance สามารถปรบแตงไดดงน

1. Brightness ก าหนดความสวางของวตถและภาพ

2. Tint ก าหนดคาสของวตถและภาพ

3. Alpha ก าหนดความโปรงใสของวตถและภาพ

4. Advanced เปนการปรบแตงคาขนสงสามารถปรบเปลยนไดทงสและความโปรงใสไดพรอม ๆ กน

6.13 ขนตอนการปรบแตงคณสมบตส

ในตวอยางจะมรปสายฟา กบกอนเมฆ บน Layer

light และ Cloud ซงตองการใหเมฆเปลยนส และสายฟา

ปรากฏขนและหายไป

1. กดป ม F8 แปลงวตถกอนเมฆ ใหเปน Symbol Graphic ชอวา Cloud

2. กดป ม F8 แปลงวตถสายฟาเปน Symbol Graphic ชอวา Light

3. คลกท Symbol Cloud แลวกด F8 อกครง ตงชอวา cloud-animate เลอก Type Movie clip(การ

ท าวธนเปนการซอน Symbol 2 ชน ซงSymbol ใน flash สามารถซอนกนหลาย ๆ ชน ได )

4. คลกท Symbol light แลวกด F8 อกครง ตงชอวา light-animate เลอก Type Movie clip

48

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 54: Adobe flash-คู่มือ-สำหรับครู

5. ดบเบลคลกท symbol cloud-animate จะเขาสสถานการณแกไขของ Symbol cloud-animate ดง

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

6. กด F6 ใน Frame ท 10 และ 20 ของ Layer 1 เพอสรางต าแหนง Keyframe ทมการเปลยนสของ

กอนเมฆ

7. คลกท KeyFrame ท 10 ใหแกไขสวนของ Properties Inspector Color : Tint ดงน กอนเมฆจะ

เปลยนเปนสเขมขน ซงถาตองการสใดผใชสามารสามารถปรบสไดดวยตวเอง โดยคา 3 ชองของส

คอ R=สแดง G =สเขยว B =สน าเงน

8. ท าการ Create Motion Tween ทLayer 1

9. คลกยอนกลบไปท Stage ของ Scene 1

49

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 55: Adobe flash-คู่มือ-สำหรับครู

10. ดบเบลคลกท symbol light-animate จะเขาสสถานการณแกไขของ Symbol light-animate

11. กด F6 ใน Frame ท 5 และ 10 ของ Layer 1 เพอสรางต าแหนง Keyframe ทมการเปลยนของ

สายฟาใหปรากฏและหายไป

12. คลกท KeyFrame ท 5 ใหแกไขสวนของ Properties Inspector Color : Alpha เทากบ 0 เพอให

วตถจากหายไป

13. ท าการ Create Motion Tween ทLayer 1

14. คลกยอนกลบไปท Stage ของ Scene 1

15. กดป ม Ctrl+Enter เพอท าการทดสอบผลงาน จะพบวาจงหวะของกอนเมฆทเปลยนสทก 10

Frame และ สายฟาทจะปรากฏทก 5 Frame ท าใหเกดภาพฟาผาและกอนเมฆสลบไปมา

16. เราสามารถคดลอกกอนเมฆออกมาเปนหลาย ๆ ชนได โดยทเมฆยงคงคณสมบตการเปลยนส โดยจะตองท าการคดลอกจาก Symbol Light-animation และ Cloud-animation เทานน โดยคลกท

Selection tool จากนนใหกดป ม Ctrl คางเอาไว แลวคลกลากวตถออกมา

17. ท าการยอขยายวตถ ใหมขนาดตาง ๆ กน หรอถาตองการใหการปรากฏของสายฟาไมพรอมกน

สามารถสราง Layer ใหม และใหสายฟาปรากฏตางเวลากน

50

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 56: Adobe flash-คู่มือ-สำหรับครู

บทท 7 การแทรกไฟลVDO และ Sound

7,1 การแทรกไฟลVDO

โปรแกรม Flash นอกจากท า Animation ไดแลวยงสามารถน าไฟลภาพเคลอนไหวอยาง VDO เขา

มาใชงานได เชนการท าสอการสอนทตองมครพดเกรนน าเปน VDO หรอการถายท าเรองบางเรองทตองเปน

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

คอไฟล FLV ซงเปนไฟล VDO ของโปรแกรม Flash ซงสามารถ convert ไดจากโปรแกรมแปลงไฟลทว ๆ

ไป และยงสามารถหาไฟล FLV ไดงาย ๆ จาก Clip ของ YouTube

7.2 การแปลงไฟล VDO

ในความเปนจรงแลว Flash สามารถ import ไฟลตาง ๆ ทเปน VDO เขามาไดเลย แตมกจะเกด

ปญหาการเขารหสของไฟล VDO ท าใหเปดไดบางไมไดบาง วธทงายทสดคอแปลงเปนไฟล FLV เสยกอน

โดยโปรแกรมทแนะน าคอ xilisoft video converter วธการแปลงไฟลท าไดดงน

1. เปดโปรแกรม xilisoft video converter

2. คลกท Profile เพอเลอกวาจะแปลงไฟลเปนไฟลใดใชกบอปกรณใด ในทนใหเลอกเปน picture

and Animation -> FLV-Flash Video Format (*”flv) และก าหนดต าแหนงของไฟลทแปลงแลวท

Destination

3. คลกทป ม Add file แลวเลอกไฟลตนฉบบทตองการจะแปลง

4. สามารถปรบแตงคาความละเอยดของไฟล ขนาดไฟล โดยปรบแตงทางดานขวาของโปรแกรม

51

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 57: Adobe flash-คู่มือ-สำหรับครู

5. ไฟลจะเขาไปอยในรายการ เตรยมพรอมทจะแปลงไฟล

6. กดทป ม เพอท าการ Convert ไฟล

7. ไฟลจะอยใน Folder ทเราก าหนดไว พรอมน าไปใชงาน

7.3 การบนทกไฟล Clip จาก YouTube

มหลายเวบไซตทมบรการบนทกไฟลจาก YouTube วธการคนหางาย ๆ เพยงพมพค าวา “ Save

Youtube” กจะพบเวบไซตมากมาย ในทนขอยกตวอยางเวบไซต http://downloadyoutubevideo.org/

ขนตอนการบนทกไฟล VDO ท าไดดงน

1. เปดเวบไซต Youtube พมพ http://www.youtube.com ทชอง Url

2. พมพ Clip Video ทตองการคนหา ในตวอยางตองการคนหา”วธการท าอาหาร”

3. คลกเขาไปทคลปวดโอ ใหคดลอก URL จากกลองขอมลทางดานขวาโดยการกดป ม Ctrl +C

52

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 58: Adobe flash-คู่มือ-สำหรับครู

4. เขาเวบไซต http://downloadyoutubevideo.org ตรงชองกรอกขอมลใหกด Ctrl+V เพอวาง URL

แลวกดป ม Download

5. จะปรากฏหนาใหคลกทป ม download video link โดยไฟลทจะ download มาจะเปนไฟล .FLV

ใหจดเกบไวใน Folder ทตองการ ชอของไฟลเบองตนจะเปน Vidio.flv ซงควรจะเปลยนให

สอดคลองกบเนอหาใน Clip

7.4 การน าไฟล VDO เขาไปใสใน flashแบบท 1

ใหจดเตรยมไฟล VDO จดเกบไวใน Folder เดยวกบไฟลชนงานเพอความสะดวกในการเรยกไฟล

VDO ขนมาใช และไมมปญหาต าแหนงของไฟลไมสอดคลองกนดวย วธการท ามดงน

1. ใหท าการ บนทกไฟล Flash กอน ในทนตงชอวา vdo.fla

2. ไปท File-> Import -> Import to stage

3. เลอกไฟล VDO ในตวอยางเปนไฟลชอวา guide.flv

4. ปรากฏหนาตางแสดงต าแหนงของไฟล VDO จากนนกด Next เพอสขนตอนตอไป

53

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 59: Adobe flash-คู่มือ-สำหรับครู

5. โปรแกรมจะถามถงรปแบบการน าไฟล Video เขามาใช จะปรากฏหวขอใหเลอกดงน

a. Prograssive download from a web server ดาวนโหลดไฟล Video จาก Web server ท

เกบไฟลนน

b. Stream from Flash Video Straming Service ดาวนโหลดไฟล Video แบบ Straming

จากผใหบรการ

c. Stream from Flash Communication Server ดาวนโหลดไฟล Video จาก Flash

Commuication Server

d. As Mobile Device Video bundled in SWF ใชส าหรบไฟลทน าเสนอผานมอถอ

e. Embed video in SWF and play in timeline แทรกไฟล Video ฝงเขาไปในชนงาน

f. Linked QuickTime video for publishing to Quicktime เชอมโยงกบไฟลประเภท MOV

6. ใหเลอก Prograssive download from a web server

7. เลอก Skin ของไฟล VDO ใหเหมาะสมกบ VDO

8. ตรงสวนของกลอง Color สามารถปรบแตงส และคา Alpha ความโปรงใส ของป มควบคมการ

เคลอนทและเสยงของ Video

9. จากนนกด Next และจบขนตอนดวยป ม Finish

10. ไฟล Clip Vdo จะเขาไปอยท Layer 1 โดยท

สามารถขยบไปมาตามต าแหนงทตองการได

11. กดป ม Ctrl + Enter เพอแสดงผลงาน

54

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 60: Adobe flash-คู่มือ-สำหรับครู

7.5 การน าไฟล VDO เขาไปใสใน flashแบบท 2

ใหจดเตรยมไฟล VDO จดเกบไวใน Folder เดยวกบไฟลชนงานเพอความสะดวกในการเรยกไฟล

VDO ขนมาใช และไมมปญหาต าแหนงของไฟลไมสอดคลองกนดวย วธการท ามดงน

1. ใหท าการ บนทกไฟล Flash กอน ในทนตงชอวา vdo2.fla

2. ไปท File-> Import -> Import to stage

3. เลอกไฟล VDO ในตวอยางเปนไฟลชอวา guide.flv

4. ปรากฏหนาตางแสดงต าแหนงของไฟล VDO เลอก Embed video in SWF and play in timeline

จากนนกด Next ให

5. ตงคาการ Embed ไฟล ตรงสวนของ symbol Type ถาเลอกเปน Embedded video จะท าให Clip

VDO แทรกเขาไปใน Frame ของ Layer ซงเราสามารถเลอนแถบ Play Head ไปมาได

55

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 61: Adobe flash-คู่มือ-สำหรับครู

7.6 การแทรกไฟลเสยง

เสยงทน ามาใชในงาน Animation สอการสอน งานบางงานใชเสยงเพลงประกอบ และเสยงเอ

ฟเฟกทสอดคลองกบการเคลอนทของ animation ท าใหงานออกมาดนาสนใจนาตดตาม มากกวาผลงานท

มแตภาพเคลอนไหวไมมเสยง เสยงทใชมลกษณะดงน

1. เสยงบรรยาย เสยงสนทนา ใชสอสารบอกเลากนระหวางตวละคร หรอเลาเรอง 2. เสยงบรรเลงประกอบใชสรางบรรยากาศของเรองราวใหนาเชอมากยงขน

3. เสยง FX ประกอบ เชน เสยงการเดน เสยงประตปด เสยงฟาผา

การใชเสยงตามลกษณะทบอกนนมรปแบบการแสดงเสยงทแตกตางกน เชนเสยงบรรเลงประกอบ

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

เปนระยะ ซงการท างานเสยงกบ Flash ควรสราง Layer เสยง 3 Layer แยกตามหวขอขางตน

7.7 การน าไฟลเพลงเขามาใชเบองหลง

ลกษณะการน าเสยงดนตรหรอเพลงเขามาใชประกอบเบองหลง จะเลนตลอดทงไฟล เมอเพลงจบ

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

ทางขวาไปซาย เราจะแทรกเสยงเพลงเขาไปโดยวธการดงน

1. ไฟลมดวยกน 3 Layer ซงเปน Layer ทมวตถอยแลว เราจงตองสราง Layer ขนมาใหมและเปลยน

ชอใหเปน Music ซง Frame จะถกสรางใหเทา ๆ กบ Layer ทมอยกอนหนาน

2. ไปท File ->Import->Import to Library แลวใหเลอกไฟลเพลงทเตรยมไว ในตวอยางนใชไฟล

เพลงทชอวา Cartoon2.mp3

3. คลกท Frame ท 1 ของ Layer music

56

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 62: Adobe flash-คู่มือ-สำหรับครู

4. ทแถบ Properties Inspector สวนของ Sound ใหเปลยนเปนชอไฟลเพลงทเรานะเขามา แลวให

ปรบแตงคาเปน loop เพอนใหเพลงวนไมมสนสด ส าหรบการตงคาสวนอน ๆ ถาตองการปรบแตง

มรายละเอยดดงน

a. Sound ชอไฟลเพลงหรอเสยง

b. Effect การเพมลกเลนใหไฟลเสยงเชน Left / Right Channel เลนเสยงออกล าโพง

ดานซายหรอขวาขางใดขางหนง Fade ไลเสยงจากล าโพงดานหนงไปยงอกดานหนง

c. Fade In – out ใหเสยงคอย ๆ ดงขนและเบาลง

d. Edit แกไขลกเลนเสยงขนสง โดยสามารถก าหนดจดของระดบความดงของเสยงได

e. Sync การตงคาการเลนเสยง มตวเลอกดงน

i. Event เลนเมอ Movie ถง Keyframe แรกของเสยง เสยงทเลนจะเรมจนจบ

ถงแมวา animation จะหมดแลวเสยงกยงคงเลนอยจนจบไฟลเสยง

ii. Start เลนเมอ Movie ถง Keyframe แรกของเสยง เสยงทเลนจะเรมจนจบ

ถงแมวา animation จะหมดแลวเสยงกยงคงเลนอยจนจบไฟลเสยง แตถาใช

Start เสยงจะเรมใหมนบจากจดการตงคา Start

iii. Stop ใชส าหรบหยดเสยง

57

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 63: Adobe flash-คู่มือ-สำหรับครู

iv. Stream เปนการ Synchronize เสยงใหเหมาะสมกบงาน Animation โดยจะม

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

v. Repeat จ านวนรอบในการวนไฟลเสยง

vi. Loop เสยงจะวนรอบเมอจบไฟลเสยงแลว

5. กดป ม Ctrl + Enter เพอแสดงผลงาน กระตายจะวงไปและมเสยงเพลงประกอบ

7.8 การน าไฟลเสยง Fx เขามาใช

ตามตวอยางท 1 กระตายโดดไปทางซาย แลวมเสยงเพลงประกอบ ซงยงขาดเสยงของการกระโดด

ของกระตาย โดยจะตองน าเสยงกระตายกระโดดไปวางไวบน Keyframe ทกระตายตกถงพนหญา มวธการ

ดงน

1. ไปท File ->Import->Import to Library แลวใหเลอกไฟลเสยงทเตรยมไว ในตวอยางนใชไฟลเสยง

ทชอวา jump.mp3

2. คลกKey frame ทกระตายตกถงพน ในตวอยางคอ Frame ท 10 20 30 ของ Layer Bunny

3. ทแถบ Properties Inspector สวนของ Sound เลอกไฟล jump ท าแบบนทก ๆ Frame ท 10 20

และ 30

4. กดป ม Ctrl + Enter เพอแสดงผลงาน กระตายจะวงไปและมเสยงเพลงประกอบและเสยงกระโดด

58

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 64: Adobe flash-คู่มือ-สำหรับครู

7.9 การแทรกไฟลเสยงพดของตวละคร

1. เขาไปแกไข Stage ของชนงาน mama โดยการดบเบลคลกทหวผหญง

2. สราง Layer Talk เพมขนมาเพอใชจดเกบเสยง

3. ไปท File ->Import->Import to Library

แลวใหเลอกไฟลเสยงทเตรยมไว ใน

ตวอยางนใชไฟลเสยงทชอวา talk.wav

4. ทแถบ Properties Inspector สวนของ

Sound เลอกไฟล talk และ ตงคาเปนแบบ Stream

5. กดป ม Ctrl + Enter เพอแสดงผลงาน จะพบวาเสยงพดยงไมทนจบ กจะวนเรมใหม เนองจากการ

ใชรปแบบ Stream จะตองสราง time line ใหสอดคลองกบเสยง ใหกดป ม F5 ท Layer talk ,face

eye ใน frame ท 177

6. น าภาพปากลงมาใสใน Layer Mouth

โดยไดเตรยมภาพปากไวใน Library

โดยขนตนดวย m- ตามดวยเสยงสระ a

e I o u ไปใสใน Frame ตาง ๆ ของ

Mouth

7. ใหน าไปใสโดยคลกท Frame แลวกด F6

แลวจงลากมาใสตามภาพ ควรจะสลบ

กบ Symbol m-c เพอใหปดปากและ

เปดปาก จนถง Frame สดทาย เทคนคการใสปากขยบใหสมจรงควรเลอกแถบ Play head โดยกะ

ระยะของการพดการปดปากใหลงจงหวะของเสยง

59

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 65: Adobe flash-คู่มือ-สำหรับครู

8. กดป ม Ctrl + Enter เพอแสดงผลงาน

การขยบปาก ไมจ าเปนตองท าทกตวค าพด เราสามารถสรางแมแบบการขยบปากตามเสยงของสระไดดง

รปภาพดานลาง เมอน ามาผสมกนเปนค าดานขวามอ

http://www.how2machinima.com/lipsync.jpg

60

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 66: Adobe flash-คู่มือ-สำหรับครู

บทท 8 การสรางระบบการท างานแบบ Interactive

โปรแกรม Flash มความสามารถในการสรางงาน animation ในแบบทผใชงานสามารถตอบโตกบ

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

เปนภาษา Action Script ถาใครมพนฐานทางดานการเขยน Java และ Script จะท าใหการใชงาน งายขน

ส าหรบผ ทเขยนโปรแกรมไมเปน โปรแกรม Flash มสวนชวยเหลอในการใชงานอยบาง การอบรมครงน

ไมไดเจาะลกถงโครงสรางของภาษา เนองจากระยะเวลาอนจ ากด แตทางผจดท าเอกสารประกอบการ

อบรมเลมนกไดคดรปแบบระบบ Interactive ทใชบอย ๆ เตรยมไวใหศกษากน

8.1 การท าปมเมน

ในตวอยางนจะพดถงการสรางป มเมน เมอคลกทป มจะมเนอหาปรากฏขนมา โดยมรปดวยกน 4

รปไดแก น า ตนไม พระจนทร พระอาทตย โดยมขนตอนการทดงน

1. เปดไฟลตวอยางซงเตรยมวตถรปภาพและป มไวใหแลว โดยจะม 2 Layer ไดแก menu ไวส าหรบ

ใสภาพป ม และ content ไวใสรปภาพเนอหา

2. กด F5 ท Layer Menu ในเฟรมท 5 เพอใหภาพเมนปรากฏตลอดชนงาน

3. กด F6 ท Layer Content ในเฟรมท 2 เพอสราง Keyframe

61

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 67: Adobe flash-คู่มือ-สำหรับครู

4. ลาก Symbol water จาก Library ลงใน Layer Content ในเฟรมท 2 และขยายขนาดรปภาพให

พอเหมาะ เนองจาก Layer content อยดานหลงท าใหสามารถซอนสวนทเกดไวหลงกรอบเมนได

5. กด F6 ท Layer Content ในเฟรมท 3 เพอสราง Keyframe

6. ลาก Symbol tree จาก Library ลงใน Layer Content ในเฟรมท 3

7. กด F6 ท Layer Content ในเฟรมท 4 เพอสราง Keyframe

8. ลาก Symbol sun จาก Library ลงใน Layer Content ในเฟรมท 4

9. กด F6 ท Layer Content ในเฟรมท 5 เพอสราง Keyframe

10. ลาก Symbol moon จาก Library ลงใน Layer Content ในเฟรมท 5

11. ใน Layer content จะมKeyframe ตงท Frame ท 2-5 และ Frame ท 1 เปน Black Frame

12. ถาท าการทดสอบผลงานตอนนจะพบวา เรายงไมสามารถควบคมเมนได จะปรากฏภาพตาง ๆ วนแสดงผล เราจงตองเขยน Script สงใหหยดการท างานของ Animationตงแตตนเสยกอน

13. คลกท Layer Menu ใน Frame ท 1 กด F9 เพอเรยกหนาตางการท างานของ Action Script ขนมา

62

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 68: Adobe flash-คู่มือ-สำหรับครู

14. เพอความงายตอการใชงานใหเลอกตวชวยกอนโดยการคลกทป ม จะปรากฏ

หนาจอชวยเหลอ

15. ทบรเวณกลอง Actions Toolbox เลอกท Global Functions -> Timeline Control -> Stop จะ

ปรากฏ code ตามรปดานลาง บรรทดท 1 เขยนวา “ stop (); “ แสดงความหมายวาเมอวงท

Frame ท 1 ใหหยด

16. คลกไปทป ม p1

17. กด F9 เพอเรยกหนาตาง Action script ทบรเวณกลอง Actions Toolbox เลอกท ท Global

Functions -> Timeline Control ->goto

Actions Toolbox

Script Pane Script Navigator

Toolbar

63

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 69: Adobe flash-คู่มือ-สำหรับครู

18. เพมเตมการตงคา โดยคลกท gotoAndStop จะปรากฏชองใหแกไขคา ใหแกไขในชอง Frame

number เปน 2 หมายถงใหวงมาท Frame ท 2 และเลอกท Go to and stop เพอก าหนดใหเมอ

คลกป ม p1 แลวจะวงมาท Frame ท 2 แลวใหหยด

19. คลกทป ม P2 แกไขในหนาตาง Action Script Frame number เปน 3และเลอกท Go to and stop

20. คลกทป ม P3 แกไขในหนาตาง Action Script Frame number เปน 4และเลอกท Go to and stop

21. คลกทป ม P4 แกไขในหนาตาง Action Script Frame number เปน 5และเลอกท Go to and stop

22. ถาตองการใหเพยงแคน าเมาสไปวางแลวภาพเปลยนใหคลกท บรรทดท 1 เลอกตกท Roll Over

และเอาเครองหมายถกท Release ออก ใหท าแบบนทกป ม

23. ท าการทดสอบผลงาน จะพบวาเมอคลก หรอน าเมาสไปวางทเมนจะปรากฏภาพตาง ๆ กน

64

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 70: Adobe flash-คู่มือ-สำหรับครู

8.2 การปรบแตงคาของ event

Script ในสวนของ Event ใชส าหรบก าหนดวาให

กระท าสงใด ถงจะท างานค าสงตอไป เชน ตองกดป ม ก ท

คยบอรด ถงจะปรากฏภาพ VDO หรอ ถาน าเมาสออกจากป ม

จะปรากฏค าเตอนขนมา วธการใชงานใหคลกทบรรทดทม

ค าสงของ Event ปรากฏอยแลวจงคลกเพอสรางเครองหมาย

ถกในกลอง โดยท event สามารถใชหลาย ๆ event พรอมกนได โดยการใช Event มรายละเอยดการ

เลอกใชงานดงน

on (press) เมอสมผสหรอกดไปบนวตถ

on(release) เมอปลอยป มทกดลงไป

on(releaseOutside) เมอคลกคางไวทป มและเอาเมาสเลอนออกจากบรเวณป ม

on(keypress) เมอใชคยบอรดพมพ โดยก าหนดไดวาจะใหพมพตวอกษรใด หรอคยค าสง

on(rollover) เมอใชเมาสวางอยเหนอวตถ

on(rollout) เมอใชเมาสเลอนออกจากวตถ

on(dragOver) เมอมการคลกเมาสลากอยในวตถ

on(dragOut) เมอมการคลกเมาสลากออกนอกวตถ

การปรบแตงคาเปาหมายของ Goto

ค าสง Goto ท Action Script ทก าหนดใหไปยงทตาง ๆ โดยจะตองเลอก set คาดงตอไปน

Frame Number ระบหมายเลข Frame

Frame Label ระบชอของ Frame

Expression ระบคาตวเลขจากการค านวณทางคณตศาสตร

Next Frame ระบใหเลน Frame ถดไป

Previous Frame ระบใหเลน Frame กอนหนา

65

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 71: Adobe flash-คู่มือ-สำหรับครู

8.3 การควบคมการหยดและการเลนของ Animation

ในตวอยางเปน Animation กระตายกระโดด โดยตองการใหมป มควบคมกระตายใหกระโดดและ

หยด สามารถน าไปประยกตใชกบบทเรยนทมเนอหาทเปน Animationได โดยมวธการดงน

1. ไฟลตวอยางทเตรยมให มป ม 2 ป มไดแก ป ม play และ stop และถาท าการทดสอบ animation

จะพบวากระตายจะวงวนไปมาเรอย ๆ

2. คลกทป ม Play เพอใส Action Script บรเวณกลอง Actions Toolbox เลอกท Global Functions -

> Timeline Control ->Play จะปรากฏ Script ดงรป

3. คลกทป ม Stop เพอใส Action Script บรเวณกลอง Actions Toolbox เลอกท Global Functions -

> Timeline Control ->Stop จะปรากฏ Scriptดงรป

66

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 72: Adobe flash-คู่มือ-สำหรับครู

4. เมอท าการท าทดสอบผลงาน จะพบวาเมอกด Play กระตายจะวง เมอกด Stop กระตายจะหยด

แตขาของกระตายจะยงคงกาวไปมาอย

ถาตองการให Symbol ของกระตายหยดวงแลหยดกาวเทาจะตองท าขนตอนดงน

1. จากไฟลเดมใหปดการท างานของ ตวชวยเหลอโดยการคลกทป ม

2. พมพขอมลเพมในบรรทดท 3 โดย bunny เปนชอของInstance Name ของ Movie clip

3. ท าการทดสอบผลงาน โดยกดทป ม Play กระตายจะวง ถากดป ม Stop กระตายจะหยดวง แตเมอ

กดป ม Play กระตายกจะกระโดดแตไมกาวเทา

4. ใหแกไขป ม Play เพมบรรทดท 3 เพอสงการให Symbol กระตายวง เมอทดสอบแลวจะพบวา

กระตายหยดวงและวงตามทกดป ม Play และ Stop

67

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 73: Adobe flash-คู่มือ-สำหรับครู

5. ถาตองการสงใหเพลงบรรเลงหยดดวยพรอมกบป ม Stop ใหเพม code ลงไปทบรรทดท 4 ดงน

6. เมอทดสอบแลวเสยงเพลงจะหยดทงหมดทนทเมอกดป ม Stop

8.4 การท าแบบทดสอบแบบเลอกตอบ

1. สรางขอความแบบทดสอบ ค าสงใหพมพชอ กลองส าหรบใสชอ ลงใน Frame ท 1

2. คลกทเฟรมท 1 แลวสราง action script โดยพมพตามรปดานลาง เพอสรางตวแปล idname

ขนมา พรอมกบสงหยด Animation เมอถง Frame แรก

3. สรางกลอง Dynamic text ทบรเวณกลองทสรางขนมากอนหนาน ปรบขนาดใหพอดและใสคา

Instance Name ของ Dynamic text เปน idname เพอเปนตวแปรในการสงคา

68

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 74: Adobe flash-คู่มือ-สำหรับครู

4. สราง ป ม หรอน าป มเขามาใช เพอท าการสงคาของชอผสอบและใสคา Actionscript ลงไปดงน

เปนการสงใหเมอมการคลกทป มสงคา Text ชอผานตวแปร idname และเงอนไขทตองพมพชอ

แลวเทานนถงสามารถเรมท าแบบทดสอบได

5. กด F6 ใน Frame ท 2 แลวพมพขอความลงไปดงน เพอตงค าถามขอท 1

69

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 75: Adobe flash-คู่มือ-สำหรับครู

6. สรางหรอน าป มเขามาวางในแตละตวเลอก และใส Action script ลงไปแตละป มดงนส าหรบขอท

ตอบผด สงใหเมอคลกแลวใหวงไปท Frame ถดไป

7. ส าหรบขอทตอบถกใหใส Action Script ลงไปดงน โดยเพมสวนของการ + คาลงไปทตวแปล

point และใหวงไปท Frame ถดไป

8. คลกทคยเฟรมท 2 ใส ใส Action Script ลงไปดงน เพอท าการสงใหหยดเมอวงมาท Frame ท 2

9. สราง Keyframe ท 3 และท าสรางแบบทดสอบ ตามขนตอนท 5 ท าแบบนจนครบขอทตองการ ใน

ทนใหผ เรยนท าทงหมด 5 ขอ

70

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 76: Adobe flash-คู่มือ-สำหรับครู

10. กด F6 เพอสราง Keyframe ใน Frame ท 7 ซงใน Frame นจะเปน Frame จบทรายงานผลคะแนน

ใหสรางกลอง Dynamic text ลงไปดงรปดานลาง โดยตงคา Instance name วา Show

11. คลกท Keyframe ท 7 ใส ActionScript ลงไปดงน ถาขอสอบมกขอกใหเปลยนจาก 100/5 เปน

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

แสดงตวแปลดงน

- +myname+คอขอของผท าแบบทดสอบ

- +point+ คอคะแนนของผท าแบบทดสอบและ

- +ss+ คะแนนทมการคดเปน %

12.ทดสอบชนงาน เมอเราท าการกรอกชอ และท าแบบทดสอบ จดหมดทกขอโปรแกรมจะแสดงผล

คะแนนทได พรอมคดเปน %

71

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 77: Adobe flash-คู่มือ-สำหรับครู

8.5 การท าแบบฝกหดระหวางเรยนแบบแสดงกาโตตอบทนท

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

ทนทโดยไมมการเกบคะแนน เปนเพยงแคกระตนใหผ เรยนไดคดเทานน ท าไดดงน

1. สรางป มขนมาหรอใชป มทมอยแลวจาก Library โดยก าหนด Actionของป มใหครบ

2. คลกขวาทชอ symbol ป ม b1 จากนนเลอก duplicate เพอคดลอก Symbol มาเพม แลวเปลยนชอ

วา b2 และก าหนดเปน Type แบบ Button เชนเดม

3. น าป ม B1 ลากไปวางไวในขอทผด และวางป ม B2 ลากไปวางในขอทถก

4. ดบเบลคลกลงบน symbol b1 เขาไปแกไขในสถานะของ Down โดยการคลกท Keyframe Down

จากนนวาดเครองหมายกากบาททหนาป ม แลวจงกดยอนกลบไปท Scene 1

72

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 78: Adobe flash-คู่มือ-สำหรับครู

5. ดบเบลคลกลงบน symbol b2 เขาไปแกไขในสถานะของ Down โดยการคลกท Keyframe Down

จากนนวาดเครองหมายถกทหนาป ม แลวจงกดยอนกลบไปท Scene 1

6. ทดสอบผลงาน เมอเราคลกไปทป มในขอทผดจะขนเครองหมายแจงวาผด ถาคลกป มในขอทถกจะ

ปรากฏเครองหมายแจงวาถก

8.6 การโหลดไฟล Flash เขามาใชรวมกน

การสรางผลงาน Flash ดวยไฟลเดยวอาจะท าใหไฟลมขนาดใหญตองใชเวลาในการโหลดไฟล

และยากตอการแกไขชนงาน แตถาหากมหลายไฟลกจะสามารถแยกการแกไขไฟลไดและลดภาระการ

โหลดของไฟล ในตวอยางนไดมการเตรยมไฟล m1.swf m2.swf m3.swf และm4.swf ซงเปนไฟลเนอหาท

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

ดงน

1. สรางไฟลทเปนศนยกลางของการโหลดชนงานโดยตองวางแผนเรองขนาดไฟลใหถกตอง ใน

ตวอยางจะตองสราง Stage ทมขนาด 790 x

460 px โดยคลกท Modify ->Document เมอ

แกไขเรยบรอยแลวใหคลก ok

2. บนทกไฟลงานชอวา main.fla

3. บนทกไฟลงานอกครงในชอ menu.fla ซง

73

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 79: Adobe flash-คู่มือ-สำหรับครู

ในตอนนจะมไฟลดวยกน 2 ไฟล

4. เรมแกไขไฟล menu ดวยการสรางป มขนมา 4 ป ม จดต าแหนงใหอยดานบนสดของไฟล

5. ใหคลกในป มท 1 ใส Action Script ลงไปดงน คลกทตวชวย Global

Functions ->Browser/Network เลอก LoadMovie

6. คลกทบรรทดท 3 เพอแกไข URL เปน m1.swf เพอเปดไฟล m1 ขนมา และ Level 1 คอการโหลด

ไฟล m1 ขนมาอยใน Layer ชนท 1

7. ท าแบบนจนครบ 4 ป ม โดยเปลยนจาก m1 เปนm2 m3 m4 ตามเมน สวน Level ยงคงตงคาไวท

level 1 ทกป ม

8. ใหท าการบนทกผลงานเปนไฟล menu.swf หรอเมอท าการทดสอบผลงานไฟล menu จะมไฟล

menu.swf ปรากฏขนโดนอตโนมต ถาลองคลกทป มจะพบวาไฟลของสอการสอนจะมาทบตวป ม

นนกเพราะยงไมไดก าหนด Lavelใหกบเมน

9. กลบไปทไฟล main.fla ใหแกไขใส Action Script ทเฟรมท 1 โดยไปท Global Functions -

>Browser/Network เลอก LoadMovie แกไข URL เปน menu.swf เพอโหลดไฟล menuเขามา

บนชนงาน และตงคา Level 2 เพอใหเมนนนอยเหนอ เนอหา m1 m2 m3 m4

74

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 80: Adobe flash-คู่มือ-สำหรับครู

10. ท าการทดสอบไฟล main จะปรากฏเมนขนมาบนหนาจอ เมอคลกทป มใดจะมเนอหาปรากฏขน

ซงอยดานหลงป มตลอดเวลา

75

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 81: Adobe flash-คู่มือ-สำหรับครู

คยลดทส าคญของ Flash Tool bar A - Arrow/Cursor T - Text Tool P - Pencil I - Ink Bottle B - Paint Brush U - Paint Bucket E - Eraser D - Dropper M - Magnifier L – Lasso Frame F5 - Add frame Shift F5 - Delete Frame F6 - Add Key Frame F7 - Add Blank Key Frame F8 - Make Symbol Timeline Enter - Play Command/Control 0 (zero) - Rewind < - Previous Frame > - Next Frame Home - Goto First Scene End - Goto Last Scene Page Up - Goto Previous Scene Page Down - Goto Next Scene

ไฟล-File Ctrl+ R - Import Image/Sound/etc... Ctrl+ Shift R - Export to .swf/.spl/.gif/etc... Ctrl+ l Shift O - Open as Library วว-View Ctrl+ 1 - View movie at 100% size Ctrl+ l 2 - Show Frame Ctrl+ 3 - Show All Windows Ctrl+ L - Show/Hide Library Ctrl+ M - Modify Movie Properties Ctrl+ E - Toggle between Edit Movie& Edit Symbol Mode Ctrl+ Shift L - Show/Hide Timeline Ctrl+ Shift W - Show/Hide Work Area Modifying and editing Ctrl+ G - Group Ctrl+ U - Ungroup Ctrl+ B - Break Apart Ctrl+ Shift V - Paste in Place Ctrl+ D - Duplicate Ctrl+ A - Select All Ctrl+ Shift A - Deselect All Ctrl+ Shift O - Optimize Curves Ctrl+ K - Align Window Ctrl+ Shift S - Scale and Rotate Ctrl+ Shift Z - Remove Transform Ctrl+ Up Arrow - Move Ahead Ctrl+ Down Arrow - Move Behind Ctrl+ Shift Up Arrow - Bring to Front Ctrl+ Shift Down Arrow - Send to Back Ctrl+ T - Modify Font Ctrl+ Shift T - Modify Paragraph Ctrl+ left Arrow - Narrower Letter Spacing (kerning) Ctrl+ right Arrow - wider Letter Spacing (kerning)

76

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

Page 82: Adobe flash-คู่มือ-สำหรับครู

เอกสารอางอง

ภททรา เหลองวลาศ.. มอใหม Flash CS3 ใชงานอยางมอโปรฯ. กรงเทพ : ซเอดยเคชน.2551 Narin Roungsan. สรางการตน Animation ดวย Flash. กรงเทพ : โปรวชน.2551 อภชย เรองศรปยะกล. 2D Animation และ Interactive ดวย Flash 8. ซเอดยเคชน จ ากด , 2550. ก าพล ลลาภรณ .Flash Action Script.โปรวชน.2551 ดนย มวงแกว.Flash workshop 8: digiart.2549 ก าพล ลลาภรณ .Advanced Flash Action Script.โปรวชน.2544

เวบไซตทสามารถ หาความรเพมเตมได

1. http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=98&Itemid=31

2. http://knowflash.doubleclickspace.com/Ch3s007-P1.html 3. http://www.nmp.ac.th/2553/2553/study/4/tech04/21/standard/f02.html 4. http://alaska.reru.ac.th/flash/home.php 5. http://www.nr.ac.th/learning/flashforweb/indexflash.html 6. http://flashjournalism.com/book/ 7. http://www.howdoflash.net/ 8. http://flashkit.com 9. http://www.ahref.com 10. http://www.flashcentral.com 11. http://www.virtual-fx.net

77

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน