Flash for teacher

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

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

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

บทที่ 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

8.3 การควบคุมการหยุดและการเล่นของ Animation 66
8.4 การทาแบบทดสอบแบบเลือกตอบ 68
8.5 การทาแบบฝึ กหัดระหว่างเรียนแบบแสดงกาโต้ ตอบทันที 72
8.6 การโหลดไฟล์ Flash เข้ ามาใช้ ร่วมกัน 73

คีย์ลดที่สาคัญของ Flash
ั 75
เอกสารอ้ างอิง 77
เว็บไซต์ที่สามารถ หาความรู้เพิ่มเติมได้ 77

1

บทที่ 1 ส่ วนประกอบของ Flash
Adobe Flash แต่เดิมเป็ นโปรแกรมของ
ค่าย Macromedia ต่อมา Adobe ได้ ทาการซื ้อ
บริษัท ทาให้ ชื่อในปั จจุบนคือ
ั Adobe Flash
โปรแกรม Flash เป็ นโปรแกรมที่ใช้ ในการสร้ างสื่อ
มัลติมีเดียได้ หลากหลาย ภาพเคลื่อนไหวแบบ
เวคเตอร์ที่มีความคมชัด สามา รถใส่ไฟล์เสียง
วีดีโอ ทาระบบการโต้ ตอบกับผู้ใช้ ทาเว็บไซต์
รวมทังสามารถเขียนโปรแกรมในภาษา
้ Action
Script และเชื่อมโยงติดต่อกับฐานข้ อมูลอื่น ๆ
เทคโนโลยี Flash สามารถทางานได้ หลากหลาย
ระบบปฏิบติการเช่น Windows MacOs Linux รวมทังอุปกรณ์แบบพกพาเช่นโทรศัพท์มือถือ PDA และยัง
ั ้
สามารถทางานเชื่อมต่อกับอุปกรณ์อื่น ๆ เช่นกล้ อง webcam, Printer

ผลงานจากโปรแกรม Flash สามารถนาไปประยุกต์ใช้ ในหลากหลายวัตถุประสงค์เช่น การทาสื่อ
การสอนแบบเอนิมชันที่มีระบบโต้ ตอบได้ , สื่อนาเสนอสินค้ า, เกม, เว็บไซต์,การ์ตน ฯลฯ
่ ู

โครงการฝึ กอบรมเชิงปฏิบัตการผลิตสื่อการเรียนการสอน
ิ

2

1.1 ส่ วนติดต่ อกับผู้ใช้
เมื่อเข้ าสูโปรแกรม Flash จะพบหน้ าจอที่มีสวนประกอบดังนี ้
่ ่
Menu bar

Time Line

Panel

Stage

Tool Box

Properties Inspector

Menu Bar
แทบเครื่องมือคาสังด้ วยรูปแบบตัวอักษร ที่มีครอบคลุมทุกคาสัง โดยจะรวบรวมคาสังแบ่งหมวดหมูตาง ๆ
่ ่ ่ ่ ่
เราไม่ควรใช้ คาสังจากเมนูบาร์เพียงอย่างเดียวเพราะจะทาให้ ทางานได้ ช้า
่
Stage
พื ้นที่การทางานโดยพื ้นที่ที่แสดงผลจะอยู่บนส่วนสีขาว โดยชิ ้นงานที่วาดหรือสร้ างลงไปจะถูกแสดงผลจาก
บริเวณนี ้เท่านัน ส่วนพื ้นที่ที่ไม่แสดงผลจะเป็ นสีเทา แต่ stage สามารถเปลี่ยนสีได้ ไม่ได้ มีเพียงแค่สีขาว
้
เพียงอย่างเดียว
Toolbox
กล่องเครื่องมือที่ช่วยให้ เรียกใช้ คาสังได้ ง่ายยิ่งขึ ้นด้วยการแสดงเป็ นรูปภาพ และในส่วนของ Toolbox ยังมี
่
ส่วนของการปรับแต่งค่าเพิ่มเติมเช่น การเลือกรูปแบบการลงสี รูปแบบของคาสังเพิ่มเติมจาก Toolbox
่
Timeline
Flash เป็ นโปรแกรมที่ใช้ Timeline เป็ นหลัก ใช้ สาหรับกาหนดช่วงเวลาการเคลื่อนไหวการหยุด หรือการ
กาหนดเวลาให้ คาสังต่าง ๆ ทางาน โดยการทางานจะแบ่งเป็ นส่วนของ Layer ที่ทางานเป็ นชัน เหมือนกับ
่ ้
การวางแผ่นใสซ้ อนกัน โดย Layer ที่อยู่ด้านบนสุดจะเป็ น Layer ที่เห็นก่อน ส่วน Layer ด้ านล่างสุดจะเห็น

ิ

3

ที่หลัง และ ส่วนของ 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 ใช้ สาหรับสร้ างรูปหลายเหลี่ยมโดยสามารถกาหนดได้ วาจะสร้ างกี่เหลี่ยม
่

ิ

4

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
้

ชื่อเรื่อง

รายละเอียด

ขนาดของชิ ้นงาน

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

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

ิ

5

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 เป็ นภาพเคลื่อนไหวแบบอื่น ๆ ได้ ด้วย

ิ

6

1.6 การเลือกวัตถุ

ถึงแม้ วา Flash จะเป็ นโปรแกรมแบบ Vector แต่การเลือกวัตถุสามารถยืดหยุ่นได้ เหมือนกับ
่
โปรแกรมประเภท Raster คือสามารถเลือกบางส่วนหรือส่วนใดส่วนหนึ่งได้ โดยอิสระ โดยมีเครื่องมือดังนี ้

Selection tool ใช้ สาหรับการเลือกทังวัตถุ ถ้ าคลิกเพียง 1 ครัง จะเป็ นการเลือก 1 วัตถุ แต่ถ้าดับเบิล
้ ้
คลิกจะเป็ นการเลือกวัตถุและเส้ นพร้ อมกัน แต่ถ้าในกรณีที่คลิกทีเส้ น 1 ครังจะเป็ นการเลือกส่วนของเส้ น
้
แต่ถ้าดับเบิลคลิกที่เส้ นจะเป็ นการเลือกเส้ นที่อยู่กบเส้ นที่คลิกทังหมด คาสังนี ้ ยังเป็ นคาสังเคลื่อนย้ ายวัตถุ
ั ้ ่ ่
และเปลี่ยนรูปร่างของวัตถุด้วย

Subselection tool ใช้ สาหรับเลือกส่วนของวัตถุ โดยให้ คลิกที่วตถุ 1 ครัง จากนันจะปรากฏจุดต่อ
ั ้ ้
ของวัตถุ ซึ่งสามารถคลิกตามจุดต่าง ๆ เพื่อปรับเปลี่ยนรูปทรงได้

Lasso Tool ใช้ สาหรับเลือกส่วนของวัตถุโดยกาหนดอณาเขตแบบอิสระ โดยวาดขอบเขตที่ต้องการ

ิ

7

1.7 การจัดวัตถุ

วัตถุที่วาดหรือนาเข้ ามาใช้ ในโปรแกรม Flash บางครังต้ องการจัดเรียงให้ เป็ นระเบียบและระยะ
้
เท่ากัน ถ้ าใช้ มือกะระยะอาจมีความผิดพลาดและไม่ตรง โปรแกรมจึงอานวยความสะดวกด้วยเครื่องมือ
การจัดการตาแหน่งวัตถุดงนี ้
ั

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

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

3. คลิกครอบวัตถุทงหมด แล้ วคลิกเลือกการจัดระยะ การเว้ นระยะห่าง การเรียงให้ ตรงกันตามรูป
ั้

ิ

8

บทที่ 2 การสร้ างวัตถุกราฟิ ก
2.1 การวาดเส้ นตรง

คลิกที่เครื่องมือ Line tool เมาส์จะเปลี่ยนเป็ นสัญลักษณ์ + ใครคลิกตาแหน่งเริ่มต้ น จากนันคลิก
้
เมาส์ค้างเอาไว้ แล้ วลากเมาส์ไปยังทิศทางที่ต้องการ แล้ วจึงปล่อยเมาส์ แต่ในกรณีที่ต้องการวาเส้ นให้
ขนานกับแกน 8 ทิศ ให้ กดปุ่ ม Shift ขณะลากเส้ น จะทาให้ เส้ นนันตังฉากหรือเฉียง 45 องศา โดยที่ไม่ต้อง
้ ้
คอยกะระยะเอง

2.2 การดัดเส้ น

สามารถดัดเส้ นตรงที่วาดขึ ้นให้ เป็ นเส้ นโคงโดยการคลิกเมาส์ที่ Selection tool จากนันคลิกที่บริเวณ
้
กลางเส้ นค้ างเอาไว้ แล้ วลากไปยังทิศทางต่าง ๆ เส้ นจะถูกแปลงเป็ นเส้ นโค้ ง

2,3 การเปลี่ยนคุณสมบัติของเส้ น

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

ิ

9

ความหนา รูปแบบเส้ น กาหนดรูปแบบเส้ นเอง
สีของเส้ น

เส้ นขอบมนหรือตัด

รูปแบบการเชื่อมจุดต่อ
รูปแบบการเชื่อมจุดต่อ ความสัมพันธ์กบความ
ั
หนาของเส้ นและมุมมอง
ช่วยลดการเบลอส่วนโค้ งของเส้ น Miter ความแหลมของมุม
แ
2.4 การเปลี่ยนความหนาเส้ น

ให้ คลิกที่เส้ นจากนันที่คาสังเปลี่ยนความหนาของเส้ นให้ พิมพ์ความหนาลงไปเป็ นตัวเลข ในเวอร์ชน CS3 นี ้
้ ่ ั่
สามารถใส่ความหนาของเส้ นเป็ นจุดทศนิยมได้ หรือใช้ วิธีการ สไลด์เพิ่มขนาดหรือลดขนาดที่ลกศรด้ านข้ าง
ู
ของขนาดเส้ น

2.5 การปรับแต่ งขอบของมุมเส้ น
ในการวาดรูปจะต้ องมีการใช้ เส้ นหลายเส้ นมาต่อกันหรือมีการหักมุมของเส้ น ถ้าจะให้ มีความสวยงาม
จะต้ องกาหนดขอบมุมเส้ นด้ วย Miter มุมแหลม Round มุมมน Beval มุมตัด

ิ

10

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

เส้ นที่วาดขึ ้นมาตรงปลายเส้ นสามารถปรับรูปแบบได้ 3 รูปแบบดังนี ้
None ปลายเส้ นตัดพอดีกบความยาวของเส้ น
ั
Round ปลายเส้ นโค้ งมน
Square ปลายเส้ นตัดแต่เว้ นระยะออกมาห้ างกับปลายเส้ น

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

การวาดเส้ นอิสระจะใช้ เครื่องมือ Pencil Tool โดยคาสังนี ้เสินที่วาดยังคงคุณสมบัติของ Stoke อยู่
่
สามารถดัดแก้ ไขได้ ง่ายเช่นเดียวกับคาสัง Line สามารถปรับแต่งลักษณะการวาดได้ โดยการปรับแต่งจะ
่
อยู่ด้านล่างของ Tool box มี3 ลักษณะดังนี ้

Straighten ทาให้ การวาดมีความเป็ นเส้ นตรง หรือเส้ นเป็ นรูปทรงโค้ ง วงรี วงกลม
Smooth ทาให้ การวาดมีความโค้ งมนและมีความต่อเนื่องกัน
Ink ทาให้ การวาดมีความอิสระเหมือนกับการขยับของมือมากที่สด แต่เส้ นมักมีปัญหาไม่ตอเนื่องกัน
ุ ่

2.8 การวาดเส้ นโดยใช้ ปากกา
การวาดเส้ นโดยใช้ ปากกาเป็ นการวาดเส้ นทีผสมผสานระหว่างเส้ นตรงกับการวาดโค้ งแบบ Bezier เมื่อ
่
ต้ องการวาดเส้ นโค้ งให้ คลิกเมาส์ค้างเอาไว้ แล้ วลาก เส้ นจะถูกบิดเป็ นโค้ งแบบ Bezier และเส้ นสามารถ
ลากต่อ ๆ กันได้ และเมื่อต้ องการให้ เป็ นรูปทรงปิ ด ให้ วนเส้ นกลับมาคลิกที่จดเริ่มต้ นอีกครัง
ุ ้

ิ

11

2.9 การเพิ่มจุดของเส้ น
การเพิ่มจุดของเส้ นที่วาดขึ ้นจากปากกา หรือเส้ นเพื่อเปลี่ยนให้ เส้ นเป็ นรูปร่างต่าง ๆ หรือใส่รายละเอียดให้
มากยิ่งขึ ้น วิธีใช้ ให้ คลิกเมาส์ไปที่ Add Anchor Point จากนันคลิกไปที่สวนของเส้ นในจุดที่ต้องการ
้ ่
คาสังนี ้ต้ องใช้ คาสัง
่ ่ Convert Anchor Point หรือ Subselection tool เป็ นเครื่องมือที่ใช้ ขยับ
จุดที่สร้ างไว้ และถ้ าต้ องการนาจุดออกให้ เลือกที่คาสัง
่ Delete Anchor Point เพื่อลบจุด

2.10 การวาดรูปทรงสี่เหลี่ยม
1. วาดรูปสี่เหลี่ยมโดยคลิกที่ปม
ุ่ Rectangle Tool
2. กาหนดคุณสมบัติของส่วนโค้ งในกรณีที่ต้องการทาให้ สี่เหลี่ยมโค้ งมน

ิ

12

3. คุณสมบัตินี ้ ถ้ ากาหนดเป็ น 0 จะไม่มีขอบมน ถ้ าใส่เป็ นค่าบวกขึ ้นไปจะเป็ นขอบมน และถ้ าใส่คาที่
่
เป็ นลบจะเป็ นขอบมนแต่เข้ าด้ านใน
4. คลิกเมาส์ กาหนดจุดเริ่มต้ นของสี่เหลี่ยม ซึ่งจะเป็ นจุดมุมของสี่เหลี่ยม แต่ถ้าต้ องการวาดรูป
สี่เหลี่ยมให้ เป็ นสี่เหลี่ยมจัตรัสให้ กดปุ่ ม Shiftค้ างไว้ ถ้ าต้ องการให้ เริ่มจากศูนย์กลางให้ กดปุ่ ม Alt
ุ
ค้ างเอาไว้
5. ในกรณีที่ต้องการสร้ างกล่องที่มีระยะที่แน่นอน ให้ กดปุ่ ม Alt ก่อนที่จะคลิกเมาส์จะปรากฏกล่อง
ข้ อความขึ ้นมาดังรูป
ความกว้ าง

ความสูง

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

วาดจากศูนย์กลาง
สาหรับการวาดรูปสี่เหลี่ยมในเวอร์ชนนี ้ มี2 แบบคือ
ั่
Rectangle Tool ใช้ สาหรับสร้ างกล่องสีเ่ หลี่ยมสามารถปรับขอบมุมโค้ งมนได้ แต่เมื่อตังค่าไปแล้ ว
้
จะไม่สามารถแก้ ไขได้ โดนสะดวก เพราะจะต้ องขยับเองทีละมุม
Rectangle Primitive Tool ใช้ สาหรับสร้ างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้ งมนได้ ทงก่อนและ
ั้
หลัง สามารถปรับแต่งค่าได้ สะดวก มีลกษณะเป็ นวัตถุ ถ้ าจะแก้ไขแบบอิสระจะต้ องดับเบิ ้ลคลิกที่วตถุซ ้า
ั ั
อีกครังหนึ่ง
้

2.11 การวาดวงกลม
1. สร้ างวงกลมด้ วยการคลิกที่ปม
ุ่ Oval Tool
2. สร้ างวงกลมด้ วยการคลิกที่มมจุดแรก และลากเฉียง ไปยังอีกจุดโดยปกติแล้ วรูปทรงจะไม่เป็ น
ุ
วงกลมจะต้ อง กดปุ่ ม Shift ร่วมด้ วย และถ้ าต้ องการให้ เริ่มจากศูนย์กลางจะต้ องกดปุ่ ม Alt

ิ

13

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. ส่วนการปรับแต่งค่าอื่น ๆ จะมีความคล้ ายกับเส้ นและกล่องสี่เหลี่ยม
การวาดด้ วยพูกน
ั

ิ

14

การวาดด้ วยคาสังพูกนจะทาให้ ได้ เส้ นที่เหมือนจริง มีความสวยงามเวลาวาดภาพ ถ้ าใช้ กบอุปกรณ์ Teblet
่ ั ั
จะทาให้ การวาดเหมือนจริงมากยิ่งขึ ้น แต่คาสังนี ้ก็มีข้อจากัดคือ เส้ นที่วาดมีคณสมบัติเป็ น Fill ไม่ใช่ Stoke
่ ุ
ทาให้ แก้ ไขได้ ยาก
ุ่ 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 เพื่อทาการเปลี่ยน
หัวปากกาเป็ นยางลบ
ุ่ เพื่อเลือกลักษณะของยางลบ มีหลายลักษณะให้
เลือกเช่น สี่เหลี่ยม วงกลม

ิ

15

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 ทัว ๆ ไปได้
่

ิ

16

2.15 การเทสีลงบนพืนที่
้
การลงสีบนพื ้นที่สามารถลงได้ ทงบริเวณที่มีสีอยู่แล้ วและบริเวณที่ไม่มีสีก็ได้ สาหรับพื ้นที่ที่จะลงสีนน
ั้ ั้
จะต้ องมีลกษณะเป็ นเส้ นปิ ด หรือเกือบปิ ด หรือมีพื ้นที่อยู่ก่อนจึงจะสามารถลงสีใหม่หรือเปลี่ยนสีได้ โดยมี
ั
วิธีการทาดังนี ้
ุ่ 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. คลิกไปที่เส้ นที่ต้องการจะเปลี่ยนสี

ิ

17

2.17 การจัดการระบบสี
Swatches ระบบสีใน Flash มีหน้ าตาดังรูป โดยจะมีองค์ประกอบการตังค่าดังนี ้
้
สีที่เลือก
ปรับแต่งสีเอง

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

ถาดสีพิเศษ

2.18 การปรับสีจาก Panel
ทางด้ าน Panel ด้ านขวามือเป็ นการปรับแต่งสีโดยสามารถควบคุมสีได้ ระเอียดมากขึ ้นสามารถทา
การไล่สี ปรับแต่งค่าสีขนสูง โดยคลิกที่ Panel Color จะปรากฏน่าต่างดังนี ้
ั้

เปลียนสีเส้ น
่ รูปแบบการไล่สี

เปลียนสีพื ้น
่ สลับสีเส้ นกับพื ้นที่

เปลียนเป็ นสีขาวดา
่
ไล่โทนสีมืดสว่าง
เลือกไม่มีสี
คลิกบริเวณสีที่ต้องการ

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

2.19 การควบคุมการไล่ สี
1. เลือก Type เป็ น Linear จะปรากฏแทบ Overflow
แสดงการไล่สีเริ่มต้ น
2. ด้ านล่างกล่อง Color จะปรากฏแถบสีที่มีการไล่สี โดยสีเริ่มต้ น
จะเป็ นสีขาวและดา ซึ่งสามารถปรับเลื่อนได้ ทาให้ วตถุที่ได้ มีการ
ั
ไล่สีตามระยะที่ต้องการ

ิ

18

3. สามารถเพิ่มจุดตาแหน่งของสีได้ โดยนาเมาส์คลิกไปที่บริเวณเส้ นแถบสี เป็ นการเพิ่มตาแหน่งสี
จากนันดับเบิ ้ลคลิกที่ตาแหน่งสีเพิ่ม แล้ วจึงเลือกสีที่ต้องการ
้

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

5. ถ้ าสีใดใช้ บ่อย ๆ อยากเก็บไว้ เรียกใช้ ให้ คลิกที่ option menu ของหน้ าต่าง Color
6. เลือกที่ Add Swatch เพื่อจัดเก็บสีไว้ ในถาดสี

ิ

19

บทที่ 3 การจัดการข้ อความ
การสร้ างบทเรียน การใส่คาบรรยายหรือคาอธิบายเป็ นเรื่องที่พบกันอยู่บ่อย ๆ ใน flash เองก็มี
เครื่องมือที่จดการเรื่องตัวอักษรข้ อความ สามารถรองรับได้ หลากหลายภาษา เมื่อต้ องการเรียกใช้ Text ให้
ั
คลิก Tool box Texttool ส่วนบริเวณของ Properties Inspector จะเปลี่ยนเป็ น Text Tool ดังรูป
ด้ านล่าง

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

การ Render ตัวอักษร
ระยะห่างระหว่างอักษร

ตั ้งค่าจานวนบรรทัดของ Dynamic URL Linkเชื่อมโยง ตัวยกตัวห้ อย Target ของ Link

 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 กาหนดการรูปแบบการเปิ ดหน้ าเว็บ

ิ

20

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 และเป็ นสี
ดา ชิดด้ านซ้ าย

ิ

21

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

ิ

22

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 และสีน ้าเงิน

ิ

23

2. ถ้ าต้ องการปรับตัวอักษรให้ เป็ นรูปภาพจะต้ องใช้ คาสัง Break Apart โดยการคลิกขวา แล้ วเลือก
่
Break Apart หรือกด Ctrl + B ชุดข้ อความคาว่า CAI จะถูกแยกออกเป็ น 3 ตัว ซึ่งยังคงคุณสมบัติ
ตัวอักษรอยู่

3. ใช้ คาสัง Break Apart ทาลายคุณสมบัติของตัวอักษรอีกครัง ตัวอักษร CAI จะกลายเป็ นวัตถุ
่ ้
รูปภาพไม่สามารถพิมพ์แก้ ไขข้ อมูลได้ อีกต่อไป
4. เมื่อถูกเปลี่ยนเป็ นคุณสมบัติรูปภาพโดยสมบูรณ์แล้ วสามารถดัดแปลงดึงแก้ ไขใด ๆ ก็ได้

ิ

24

บทที่ 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
้

ิ

25

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

ิ

26

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 จากนันแก้ ไขสีหรือเปลี่ยนแปลงลักษณะของปุ่ ม
้
ให้ เป็ นรูปแบบอื่น ๆ เพื่อให้ เกิดความแตกต่างเวลานาเมาส์ไปวางเหนือปุ่ ม

ิ

27

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. ลากลูกบอลไปในทิศทางอื่น เพื่อกาหนดจุดเคลื่อนที่

ิ

28

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 ให้ เป็ นหมวดหมู่
้

ิ

29

ส่วนประกอบต่าง ๆ ของ หน้ าต่าง Library
ชื่อไฟล์ ตรึง Library

สร้ าง Library ใหม่

รูป Symbol
ปริมาณ symbol

เรียงลาดับ Symbol

สร้ าง Folderl รายชื่อ Symbol

ดูข้อมูล Symbol
สร้ าง Symbol ลบ Symbol

4.6 การเปลี่ยนคุณสมบัติ Symbol

Symbol สามารถสลับคุณสมบัติกนได้ เช่นสลับจาก Button เป็ น Movie clip หรือสลับจาก Graphic เป็ น
ั
Button แต่การสลับนี ้จะทาให้ คณสมบัติบางอย่างของวัตถุหายไป เท่าที่พบเห็นจะเป็ นการสลับจาก
ุ
Graphic เป็ น Button หรือ Movie clip เป็ นส่วนใหญ่ วิธีการสลับมีดงนี ้
ั

วิธีที่ 1

1. เลือกวัตถุจากชื่อในหน้ าต่าง Library

2. คลิกที่ปมเครื่องมือ
ุ่ จะปรากฏหน้ าต่าง Symbol Properties
3. เปลี่ยนคุณสมบัติของวัตถุตามต้ องการ

ิ

30

วิธีที่ 2

1. คลิกขวาที่ชื่อของ symbol แล้ วเลือก ที่ Type -> เลือกรูปแบบ Symbol ที่ต้องการ

4.7 นา Symbol จากไฟล์ อ่ นมาใช้
ื
เราสามารถนา Library ที่สร้ างขึ ้นใรชิ ้นงาน ไปใช้ กบไฟล์อื่น ๆ หรือนา Library ของไฟล์อื่น ๆ มาใช้ ใน
ั
ชิ ้นงานได้ แต่ต้องระมัดระวังเรื่องชื่อของ Symbol อาจมีการซ ้ากัน ทาให้ ผลงานเกิดปั ญหา ในกรณีที่ชื่อ
เดียวกันให้ ตรวจสอบให้ ดีวาจะใช้ ตวใหม่หรือตัวที่มีอยู่เดิม จึงควรให้ ความสาคัญกับคาเตือนของโปรแกรม
่ ั
ด้ วย มีขนตอนการนาเข้ าดังนี ้
ั้

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

2. โปรแกรมจะให้ เลือกไฟล์ Flash ที่มี Library ที่ต้องการ
3. ในไฟล์ที่ทางานอยู่ จะปรากฏ Libraryที่เรา Import เข้ ามาใช้ งาน

ิ

31

บทที่ 5 การทา Animation
ความสามารถที่โด่ดเด่นมาก ๆ ของโปรแกรม Flash นันก็คือความสามารถด้ าน Animation ที่
้
สามารถทางานง่าย ๆ จนถึง Animation ที่มีความซับซ้ อนได้ ลักษณะการทางานของ Animation บน Flash
จะต้ องทางานบน Time Line ที่มีลกษณะเป็ นเฟรม อยู่ทางด้ านบนของหน้ าจอ เรามาทาความรู้จกหน้ าตา
ั ั
ของ Time Line Flash ดังนี ้

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

ซ่อน / แสดง Layer ช่วงของการแสดง Onion skin

สร้ าง Guide Layer
หมายเลขเฟรมปั จจุบน
ั
สร้ าง Layer
เวลาที่ใช้ นบจากเริ่ มถึง Play Head
ั

สร้ าง Folder

Onion skin จานวนเฟรมต่อ 1 วินาที
ลบ Layer เคลื่อน Play head Onion skin Onion skin แบบ เห็น
ไปกี่งกลางเฟรม เฉพาะ Outline แบบชัดเฉาะ
Key frame

5.1 การใช้ Play Head

Play Head ใช้ เพื่อตรวจสอบ สร้ าง และแก้ ไขชิ ้นงาน ของเฟรมต่าง ๆ โดยหน้ าจอของพื ้นที่ทางาน
จะแสดงผลตามที่มีการกาหนดตาแหน่ง Play Head สามารถเลื่อน Play Head โดยการคลิกที่ Play Head
ที่มีลกษณะเป็ นสีแดงเลื่อนไปยังเฟรมที่ต้องการ
ั

ิ

32

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 ขึ ้นมา

ิ

33

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

ิ

34

5.7 การเพิ่ม Frame
ในกรณีที่ภาพไม่มีการเปลี่ยนแปลงหรือต้ องการเพิ่มช่วงระยะเวลาของ Animation จะต้ องใช้ คาสัง
่
เพิ่มเฉพาะ Frame โดยมีวิธีดงนี ้
ั
1. ในตัวอย่างด้ านล่าง Animation ลูกบอลจะวิ่งจากเฟรมที่ 1 ไปสิ ้นสุดในเฟรมที่ 20

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

3. ถ้ าต้ องการเพิ่มเฟรมจานวนมากให้ ทา Highlight คลิกครอบจานวนหลาย ๆ Frame แล้ วกด
ปุ่ ม F5 จานวน Frame จะขยายออกไปตามจานวนช่วงที่ได้ เลือกเอาไว้

ิ

35

นอกจากการเพิ่ม Frame ในช่วงระหว่าง Animation เรายังสามารถเพิ่ม Frame หลังจาก Keyframe เพื่อทิ ้ง
ภาพสุดท้ ายให้ ปรากฏค้ างอยู่ มีวิธีการดังนี ้
1. จากตัวอย่าง Keyframe หยุดอยู่ที่ Frame ที่ 25 นันก็หมายความว่า ลูกบอลจะหยุดที่เฟรมที่ 25
้
ภาพก็จะตัดไปที่เฟรมที่ 1 วนอีกครัง ซึ่งถ้ าต้ องการให้ ลกบอลหยุดค้ างถึง Frame ที่ 40 จะต้ องคลิก
้ ู
ขวาจากนันเลือกที่ Insert Frame หรือกดปุ่ ม F5
้

2. ผลที่ได้ คือลูกบอลจะวิ่งจาก Keyframe ที่1 จนมาหยุดที่ Keyframe ที่ 25 และปรากฏค้ างไว้ ถึง
Frame ที่ 40

ิ

36

บทที่ 6 การสร้ างภาพเคลื่อนไหว
การสร้ างภาพเคลื่อนไหวหรือ Animation ในโปรแกรม Flash มีลกษณะการสร้ างด้ วยกัน 3 แบบคือ
ั
 แบบเฟรมต่อเฟรม (Frame by Frame)
 แบบเคลื่อนที่ (Motion Tween)
 แบบเปลี่ยนรูปทรง (Shape Tween)

6.1 Animation แบบเฟรมต่ อเฟรม (Frame by Frame)
การสร้ าง Animation แบบ เฟรมต่อเฟรม เป็ นการนาเอาเฟรมมาเรียงกัน โดยในภาพแต่ละเฟรมจะต้ องมี
การเปลี่ยนแปลง การทา Animation แบบนี ้ภาพที่ได้ จะไม่ลื่นไหล มักใช้ งานกับ Animation ที่มีการ
เปลี่ยนแปลงของภาพที่ไม่สม่าเสมอและไม่ตอเนื่อง เช่น การทา Animation ภาพ ปากคนพูด
่

แต่ในบางชิ ้นงานถ้ าทาแบบ เฟรมต่อเฟรม จะใช้ เวลาในการทามากเช่น การทาลูกบอลกระเด้ ง ถ้ าเป็ นแบบ
เฟรมต่อเฟรม ผู้สร้ างจะต้ องกาหนดการเคลื่อนไหวของลูกบอลทุก ๆ เฟรม ดังรูปด้ านล่าง ซึ่งถ้ ามีการแก้ ไข
ตาแหน่งของลูกบอลในอนาคต อาจจะต้ องทาใหม่ทงหมด
ั้

ิ

37

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
โปรแกรมจะปรากฏหน้ าต่างผลงานขึ ้นมาแสดง

ิ

38

6.3 Animationแบบเคลื่ อนที่ (Motion Tween)
เป็ นรูปแบบการสร้ างที่ทาให้ วตถุมีการเคลื่อนที่เคลื่อนไหว เปลี่ยนแปลงรูปทรง ซึ่งการทากาหนด
ั
เพียงจุดเริ่มต้ นและจุดสิ ้นสุด ส่วน Frame ที่เหลือถ้ าใช้ Motion Tween โปรแกรมจะช่วยสร้ าง Animation
ที่เหลือเอง การทา Animation แบบนี ้ช่วยประหยัดเวลาและทาให้ ผลงานมีความลื่นไหล

6.4 การสร้ างAnimationแบบเคลื่อนที่ (Motion Tween)
1. จากรูปตัวอย่าง มีผล Apple อยู่บนต้ นไม้ ต้องการให้ ผล Apple ตกลงมาที่พื ้น ให้ กาหนดระยะเวลา
ในการตก ดังตัวอย่างต้ องการ 1 วินาที ให้ คลิกที่ Frame ที่ 12 แล้ วกด F6 จากนันลากผล Apple
้
ลงมาที่พื ้น

ิ

39

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 ไม่มี
้
การเปลี่ยนแปลงการเคลื่อนไหววัตถุ

ิ

40

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 จะต้ องทาการเปลี่ยนให้ เป็ นวัตถุ
ธรรมดาก่อน

ิ

41

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 ให้ เป็ นภาพ
ปกติ

ิ

42

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

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 ไปไว้ ด้านบนสุด

ิ

43

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 ซึ่งไฟล์นี ้เป็ นรูปที่มีคณสมบัติฉากหลังโปร่งใส
้ ุ

ิ

44

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

ิ

45

12. ให้ คลิก Keyframe ที่ 60 ของ Layer car จากนันลากรถมาที่ปลายเส้ นอีกฝั่ ง ตอนลากนันจะพบว่า
้ ้
รถจะถูกดูดติดกับเส้ น
13. หมุนรถให้ เอียงตามเส้นปลายทางเพื่อให้ ตอนจบ การเคลื่อนที่รถจะได้ สมจริง
14. คลิกขวาที่ Layer car แล้ วเลือก Create Motion Tween เพื่อทาให้ รถเคลื่อนไหวตามเส้ น

15. ซึ่งในขณะนี ้รถจะเลี ้ยวโค้ งไม่เป็ นธรรมชาติ รถจะหันไปในทางเดียวกันหมด ให้ แก้ ไขโดยคลิกให้
ปรากฏเครื่องหมาย ที่กล่อง Orient to path ในหน้ าต่าง properties ด้ านล่างของหน้ าจอ

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

Mask จะเหมือนกับมีหน้ ากากที่บงวัตถุที่อยู่ด้านหลัง สามารถบังส่วนที่ไม่ต้องการให้ แสดงผลได้
ั
โดย Mask สามารถกาหนดเป็ นรูปร่างที่เป็ นรูปทรงต่าง ๆ และภาพเคลื่อนไหวได้

ิ

46

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

ิ

47

5. กาหนดให้ ลกบอลเคลื่อนไหวไปมา โดยใช้ ความรู้ของการทา Animationแบบ Motion Tween โดย
ู
สลับลูกบอลไปมา แต่ต้องให้ มีสวนพาดผ่านตัวปี ศาจด้ วย
่

6. กด F5 ในตาแหน่ง Frame สุดท้ ายของ Layer Background โดยจะต้ องเท่ากับ Layer light
7. คลิกขวาที่ Layer light แล้ วเลือก Create Motion Tween


6.12 การเปลี่ยนคุณสมบัติสีของ Animation

นอกจากการเคลื่อนที่การเปลี่ยนรูปร่างของ Animation ยังสามารถปรับสีของวัตถุคอย ๆ เปลี่ยน
่
หรือความชัดของวัตถุจากชัดไปจนจางหายไป สามารถกาหนดได้ จากแถบสี Instance จากกล่องเครื่องมือ
Properties Inspector

ิ

48

ส่วนของ 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
้ ้

ิ

49

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

ิ

50

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 ใหม่ และให้ สายฟาปรากฏต่างเวลากัน
้

ิ

51

บทที่ 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

ุ่ Add file แล้ วเลือกไฟล์ต้นฉบับที่ต้องการจะแปลง
4. สามารถปรับแต่งค่าความละเอียดของไฟล์ ขนาดไฟล์ โดยปรับแต่งทางด้ านขวาของโปรแกรม

ิ

52

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
ั

ิ

53

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 เพื่อสู้ขนตอนต่อไป
้ ั้

ิ

54

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 เพื่อแสดงผลงาน

ิ

55

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 ไปมาได้

ิ

56

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

ิ

57

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 ใช้ สาหรับหยุดเสียง

ิ

58

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 เพื่อแสดงผลงาน กระต่ายจะวิ่งไปและมีเสียงเพลงประกอบและเสียงกระโดด

ิ

59

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 โดยกะ
ระยะของการพูดการปิ ดปากให้ ลงจังหวะของเสียง

ิ

60

8. กดปุ่ ม Ctrl + Enter เพื่อแสดงผลงาน

การขยับปาก ไม่จาเป็ นต้ องทาทุกตัวคาพูด เราสามารถสร้ างแม่แบบการขยับปากตามเสียงของสระได้ ดง
ั
รูปภาพด้ านล่าง เมื่อนามาผสมกันเป็ นคาด้ านขวามือ

http://www.how2machinima.com/lipsync.jpg

ิ

61

บทที่ 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

ิ

62

4. ลาก Symbol water จาก Library ลงใน Layer Content ในเฟรมที่ 2 และขยายขนาดรูปภาพให้
พอเหมาะ เนื่องจาก Layer content อยู่ด้านหลังทาให้ สามารถซ้ อนส่วนที่เกิดไว้ หลังกรอบเมนูได้

6. ลาก Symbol tree จาก Library ลงใน Layer Content ในเฟรมที่ 3
8. ลาก Symbol sun จาก Library ลงใน Layer Content ในเฟรมที่ 4
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 ขึ ้นมา

ิ

63

14. เพื่อความง่ายต่อการใช้ งานให้ เลือกตัวช่วยก่อนโดยการคลิกที่ปม
ุ่ จะปรากฏ
หน้ าจอช่วยเหลือ

Toolbar
Actions Toolbox

Script Pane
Script Navigator

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

ิ

64

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
ุ่
ุ่
ุ่
22. ถ้ าต้ องการให้ เพียงแค่นาเมาส์ไปวางแล้ วภาพเปลี่ยนให้ คลิกที่ บรรทัดที่ 1 เลือกติ๊กที่ Roll Over
และเอาเครื่องหมายถูกที่ Release ออก ให้ ทาแบบนี ้ทุกปุ่ ม

23. ทาการทดสอบผลงาน จะพบว่าเมื่อคลิก หรือนาเมาส์ไปว่างที่เมนูจะปรากฏภาพต่าง ๆ กัน

ิ

65

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 ก่อนหน้ า

ิ

66

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ดังรูป

ิ

67

4. เมื่อทาการทาทดสอบผลงาน จะพบว่าเมื่อกด Play กระต่ายจะวิ่ง เมื่อกด Stop กระต่ายจะหยุด
แต่ขาของกระต่ายจะยังคงก้ าวไปมาอยู่

ถ้ าต้ องการให้ Symbol ของกระต่ายหยุดวิ่งแล้ หยุดก้ าวเท้ าจะต้ องทาขันตอนดังนี ้
้

1. จากไฟล์เดิมให้ ปิดการทางานของ ตัวช่วยเหลือโดยการคลิกที่ปม
ุ่
2. พิมพ์ข้อมูลเพิ่มในบรรทัดที่ 3 โดย bunny เป็ นชื่อของInstance Name ของ Movie clip

3. ทาการทดสอบผลงาน โดยกดที่ปม Play กระต่ายจะวิ่ง ถ้ ากดปุ่ ม Stop กระต่ายจะหยุดวิ่ง แต่เมื่อ
ุ่
กดปุ่ ม Play กระต่ายก็จะกระโดดแต่ไม่ก้าวเท้ า
4. ให้ แก้ ไขปุ่ ม Play เพิ่มบรรทัดที่ 3 เพื่อสังการให้ Symbol กระต่ายวิ่ง เมื่อทดสอบแล้ วจะพบว่า
่
กระต่ายหยุดวิ่งและวิ่งตามที่กดปุ่ ม Play และ Stop

ิ

68

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 เพื่อเป็ นตัวแปรในการส่งค่า

ิ

69

4. สร้ าง ปุ่ ม หรือนาปุ่ มเข้ ามาใช้ เพื่อทาการส่งค่าของชื่อผู้สอบและใส่คา Actionscript ลงไปดังนี ้
่
เป็ นการสังให้ เมื่อมีการคลิกที่ปมส่งค่า Text ชื่อผ่านตัวแปร idname และเงื่อนไขที่ต้องพิมพ์ชื่อ
่ ุ่
แล้ วเท่านันถึงสามารถเริ่มทาแบบทดสอบได้
้

5. กด F6 ใน Frame ที่ 2 แล้ วพิมพ์ข้อความลงไปดังนี ้ เพื่อตังคาถามข้ อที่ 1
้

ิ

70

6. สร้ างหรือนาปุ่ มเข้ ามาวางในแต่ละตัวเลือก และใส่ Action script ลงไปแต่ละปุ่ มดังนี ้สาหรับข้ อที่
ตอบผิด สังให้ เมื่อคลิกแล้ วให้ วิ่งไปที่ Frame ถัดไป
่

7. สาหรับข้ อที่ตอบถูกให้ ใส่ Action Script ลงไปดังนี ้ โดยเพิ่มส่วนของการ + ค่าลงไปที่ตวแปล
ั
point และให้ วิ่งไปที่ Frame ถัดไป

8. คลิกที่คีย์เฟรมที่ 2 ใส่ ใส่ Action Script ลงไปดังนี ้ เพื่อทาการสังให้ หยุดเมื่อวิ่งมาที่ Frame ที่ 2
่

9. สร้ าง Keyframe ที 3 และทาสร้ างแบบทดสอบ ตามขันตอนที่ 5 ทาแบบนี ้จนครบข้ อที่ต้องการ ใน
้
ที่นี ้ให้ ผ้ เู รียนทาทังหมด 5 ข้ อ
้

ิ

71

10. กด F6 เพื่อสร้ าง Keyframe ใน Frame ที่ 7 ซึ่งใน Frame นี ้จะเป็ น Frame จบที่รายงานผลคะแนน
ให้ สร้ างกล่อง Dynamic text ลงไปดังรูปด้ านล่าง โดยตังค่า Instance name ว่า Show
้

11. คลิกที่ Keyframe ที่ 7 ใส่ ActionScript ลงไปดังนี ้ ถ้ าข้ อสอบมีกี่ข้อก็ให้ เปลี่ยนจาก 100/5 เป็ น
จานวนตัวเลขข้ อ และส่วนที่อยู่ใน เครื่องหมายคาพูด จะเป็ นคาที่ปรากฏขึ ้นบนหน้ าจอ โดยจะ
แสดงตัวแปลดังนี ้
- +myname+คือขื่อของผู้ทาแบบทดสอบ
- +point+ คือคะแนนของผู้ทาแบบทดสอบและ
- +ss+ คะแนนที่มีการคิดเป็ น %

12.ทดสอบชิ ้นงาน เมื่อเราทาการกรอกชื่อ และทาแบบทดสอบ จดหมดทุกข้ อโปรแกรมจะแสดงผล
คะแนนที่ได้ พร้ อมคิดเป็ น %

ิ

72

8.5 การทาแบบฝึ กหัดระหว่ างเรียนแบบแสดงกาโต้ ตอบทันที

จากตัวอย่างแบบทดสอบที่เตรียมไว้ ต้ องการให้ ผ้ เู รียนคลิกที่ชื่อข้ อให้ ปรากฏคาตอบถูกหรือผิด
ทันทีโดยไม่มีการเก็บคะแนน เป็ นเพียงแค่กระตุ้นให้ ผ้ เู รียนได้ คิดเท่านัน ทาได้ ดงนี ้
้ ั

1. สร้ างปุ่ มขึ ้นมาหรือใช้ ปมที่มีอยู่แล้ วจาก Library โดยกาหนด Actionของปุ่ มให้ ครบ
ุ่

2. คลิกขวาที่ชื่อ symbol ปุ่ ม b1 จากนันเลือก duplicate เพื่อคัดลอก Symbol มาเพิ่ม แล้ วเปลี่ยนชื่อ
้
ว่า b2 และกาหนดเป็ น Type แบบ Button เช่นเดิม

3. นาปุ่ ม B1 ลากไปวางไว้ ในข้ อที่ผิด และวางปุ่ ม B2 ลากไปวางในข้ อที่ถก
ู
4. ดับเบิลคลิกลงบน symbol b1 เข้ าไปแก้ ไขในสถานะของ Down โดยการคลิกที่ Keyframe Down
จากนันวาดเครื่องหมายกากบาทที่หน้ าปุ่ ม แล้ วจึงกดย้ อนกลับไปที่ Scene 1
้

ิ

73

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 ซึ่ง
้

ิ

74

ในตอนนี ้จะมีไฟล์ด้วยกัน 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
้ ั้

ิ

75

10. ทาการทดสอบไฟล์ main จะปรากฏเมนูขึ ้นมาบนหน้ าจอ เมื่อคลิกที่ปมใดจะมีเนื ้อหาปรากฏขึ ้น
ุ่
ซึ่งอยู่ด้านหลังปุ่ มตลอดเวลา

ิ

76

คีย์ลัดที่สาคัญของ Flash
Tool bar ไฟล์-File
A - Arrow/Cursor Ctrl+ R - Import Image/Sound/etc...
T - Text Tool Ctrl+ Shift R - Export to .swf/.spl/.gif/etc...
P - Pencil Ctrl+ l Shift O - Open as Library
I - Ink Bottle
B - Paint Brush วิว-View
U - Paint Bucket Ctrl+ 1 - View movie at 100% size
E - Eraser Ctrl+ l 2 - Show Frame
D - Dropper Ctrl+ 3 - Show All
M - Magnifier
L – Lasso Windows
Ctrl+ L - Show/Hide Library
Frame Ctrl+ M - Modify Movie Properties
F5 - Add frame Ctrl+ E - Toggle between Edit Movie& Edit Symbol Mode
Shift F5 - Delete Frame Ctrl+ Shift L - Show/Hide Timeline
F6 - Add Key Frame Ctrl+ Shift W - Show/Hide Work Area
F7 - Add Blank Key Frame
F8 - Make Symbol Modifying and editing
Ctrl+ G - Group
Timeline Ctrl+ U - Ungroup
Enter - Play Ctrl+ B - Break Apart
Command/Control 0 (zero) - Rewind Ctrl+ Shift V - Paste in Place
< - Previous Frame Ctrl+ D - Duplicate
> - Next Frame Ctrl+ A - Select All
Home - Goto First Scene Ctrl+ Shift A - Deselect All
End - Goto Last Scene Ctrl+ Shift O - Optimize Curves
Page Up - Goto Previous Scene Ctrl+ K - Align Window
Page Down - Goto Next Scene 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)

ิ

77

เอกสารอ้ างอิง
ภัททิรา เหลืองวิลาศ.. มือใหม่ 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&It
emid=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

ิ

Flash for teacher

More Related Content

What's hot

Similar to Flash for teacher

More from Pises Tantimala

Flash for teacher