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

เรื่อง การสร้าง Animation และสื่อมัลติมีเดียด้วยโปรแกรม Adobe Flash

Adobe Flash

สารบัญ
บทที่ 1 ส่วนประกอบของ Flash
1.1 ส่วนติดต่อกับผู้ใช้
1.2 กล่องเครื่องมือ
1.3 การเริ่มต้ นชิ ้นงาน
1.4 การควบคุมมุมมองของโปรแกรม
1.5 การบันทึกไฟล์
1.6 การเลือกวัตถุ
1.7 การจัดวัตถุ

1
2
3
4
5
5
6
7

บทที่ 2 การสร้ างวัตถุกราฟิ ก
2.1 การวาดเส้ นตรง
2.2 การดัดเส้ น
2,3 การเปลี่ยนคุณสมบัติของเส้ น
2.4 การเปลี่ยนความหนาเส้ น
2.5 การปรับแต่งขอบของมุมเส้ น
2.6 การปรับรูปแบบของปลายเส้ น
2.7 การวาดเส้ นอิสระ
2.8 การวาดเส้ นโดยใช้ ปากกา
2.9 การเพิ่มจุดของเส้ น
2.10 การวาดรูปทรงสี่เหลี่ยม
2.11 การวาดวงกลม
2.12 การวาดรูปทรงหลายเหลี่ยม
2.13 การใช้ เครื่องมือยางลบ
2.14 การลงสีวตั ถุ
2.15 การเทสีลงบนพื ้นที่
2.16 fการเทสีลงบนเส้ น
2.17 การจัดการระบบสี

8
8
8
8
9
9
10
10
10
11
11
12
13
14
15
16
16
17

2.18 การปรับสีจาก Panel
2.19 การควบคุมการไล่สี

17
17

บทที่ 3 การจัดการข้ อความ
3.1 โหมดตัวอักษร
3.2 ปั ญหาภาษาไทยกับ Flash
3.3 วิธีการพิมพ์ข้อความ
3.4 การเปลี่ยนคุณสมบัติข้อความเป็ นหมวดต่าง ๆ
3.5 การเปลี่ยนคุณสมบัติของข้ อความให้ เป็ นรูปภาพ

19
20
20
20
22
22

บทที่ 4 การจัดการวัตถุ
4.1
การแปลงวัตถุเป็ น Symbol
4.2 การเรียกใช้ และแก้ ไข Symbol
4.3
การสร้ าง Symbol แบบปุ่ ม
4.4 การสร้ าง Symbol แบบภาพเคลื่อนไหว
4.5 การจัดการ Library
4.6
การเปลี่ยนคุณสมบัติ Symbol
4.7
นา Symbol จากไฟล์อื่นมาใช้

24
24
25
25
27
28
29
30

บทที่ 5 การทา Animation
5.1 การใช้ Play Head
5.2 สร้ าง Layer ใหม่
5.3 สร้ าง Folder
5.4 วิธีการสร้ าง Folder
5.5 ระบบ Frame
5.6 การเพิ่ม Key Frame
5.7 การเพิ่ม Frame

31
31
32
32
32
33
33
34

บทที่ 6 การสร้ างภาพเคลื่อนไหว
6.1
Animation แบบเฟรมต่อเฟรม (Frame by Frame)
6.2
การสร้ าง Animation แบบเฟรมต่อเฟรม
6.3 Animationแบบเคลื่อนที่ (Motion Tween)
6.4 การสร้ างAnimationแบบเคลื่อนที่ (Motion Tween)
6.5 การปรับแต่งการเคลื่อนไหวแบบ Motion Tween
6.6
Animation แบบเปลี่ยนรูปทรง (Shape Tween)
6.7
การสร้ าง Animation แบบเปลี่ยนรูปทรง (Shape Tween)
6.8 การเคลื่อนไหวตามเส้ น Guide (Motion Guide)
6.9 วิธีการสร้ างภาพเคลื่อนไหวตามเส้ น Guide
6.10 การใช้ Maskกับงาน Animation
6.11 วิธีการใช้ งาน Mask
6.12 การเปลี่ยนคุณสมบัติสีของ Animation
6.13 ขันตอนการปรั

บแต่งคุณสมบัติสี

36
36
37
38
39
40
40
41
42
42
45
46
47
48

บทที่ 7 การแทรกไฟล์VDO และ Sound
7,1 การแทรกไฟล์VDO
7.2 การแปลงไฟล์ VDO
7.3 การบันทึกไฟล์ Clip จาก YouTube
7.4 การนาไฟล์ VDO เข้ าไปใส่ใน flashแบบที่ 1
7.5 การนาไฟล์ VDO เข้ าไปใส่ใน flashแบบที่ 2
7.6 การแทรกไฟล์เสียง
7.7 การนาไฟล์เพลงเข้ ามาใช้ เบื ้องหลัง
7.8
การนาไฟล์เสียง Fx เข้ ามาใช้
7.9 การแทรกไฟล์เสียงพูดของตัวละคร

51
51
51
52
53
55
56
56
58
59

บทที่ 8 การสร้ างระบบการทางานแบบ Interactive
8.1 การทาปุ่ มเมนู
8.2 การปรับแต่งค่าของ event

61
61
65

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

66
68
72
73

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

75
77
77

1

บทที่ 1 ส่ วนประกอบของ Flash
Adobe Flash แต่เดิมเป็ นโปรแกรมของ
ค่าย Macromedia ต่อมา Adobe ได้ ทาการซื ้อ
บริษัท ทาให้ ชื่อในปั จจุบนั คือ

Adobe Flash

โปรแกรม Flash เป็ นโปรแกรมที่ใช้ ในการสร้ างสื่อ
มัลติมีเดียได้ หลากหลาย ภาพเคลื่อนไหวแบบ
เวคเตอร์ที่มีความคมชัด สามา

รถใส่ไฟล์เสียง

วีดีโอ ทาระบบการโต้ ตอบกับผู้ใช้
รวมทังสามารถเขี

ยนโปรแกรมในภาษา
Script

ทาเว็บไซต์
Action

และเชื่อมโยงติดต่อกับฐานข้ อมูลอื่น ๆ

เทคโนโลยี 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
ทาให้ แก้ ไขได้ ยาก
1. คลิกที่ปมุ่

Brush Tool เลือกสีจากกล่อง

Fill Color เนื่องจากคาสัง่ นี ้ไม่ใช่คาสัง่ เส้ น

2. วาดเส้ นลงไปในชิ ้นงาน
3. ถ้ าต้ องการวาดเส้ นลงพื ้นที่ลกั ษณะพิเศษ จะต้ องคลิกปุ่ ม Brush Mode
การลงสีที่ต้องการ โดยมีรูปแบบดังนี ้

เพื่อนเลือกรูปแบบ

Paint Normal เมื่อระบายสี สีที่ระบายจะทับเส้ นและพื ้นที่

a.
b.

Paint Fills สีที่ระบายจะทับเฉพาะส่วนของพื ้นที่แต่ไม่ย่งุ เกี่ยวกับเส้ น

c.

Paint Behind สีที่ระบายจะปรากฏที่พื ้นหลังวัตถุ

d.

Paint Selection สี่ที่ระบายจะระบายเฉพาะพื ้นของบริเวณที่เลือกเท่านันโดย

จะต้ องเลือกวัตถุนนั ้ ๆ ก่อน

e.

Paint Inside สีที่ระบายจะระบายเฉพาะพื ้นที่ด้านใน

2.13 การใช้ เครื่องมือยางลบ
การใช้ ยางลบในโปรแกรม Flash จะแตกต่างกับโปรแกรมกราฟิ ก Vector อื่น ๆ คือสามารถเลือก
ลบเฉพาะส่วนได้ ทาให้ สะดวกต่อการวาดรูปอย่างมาก การใช้ ยางลบมีขนตอนดั
ั้
งนี ้
1. เมื่อต้ องการลบภาพ คลิกที่

Eraser Tool เพื่อทาการเปลี่ยน

หัวปากกาเป็ นยางลบ
2. คลิกที่ปมุ่

เพื่อเลือกลักษณะของยางลบ มีหลายลักษณะให้

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

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

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

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

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
ลบ Layer

เคลื่อน Play head

Onion skin

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

Onion skin แบบ เห็น

Onion skin

เฉพาะ Outline

แบบชัดเฉาะ

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

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 ไม่มี
การเปลี่ยนแปลงการเคลื่อนไหววัตถุ
10. กดปุ่ ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้ าต่างผลงานขึ ้นมาแสดง

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

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

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

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 160 ซึ่งในชิ ้นงานนี ้ 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 ด้ านล่างของหน้ าจอ

16. กดปุ่ ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้ าต่างผลงานขึ ้นมาแสดง
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

8. กดปุ่ ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้ าต่างผลงานขึ ้นมาแสดง

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

3. คลิกที่ปมุ่

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 อยู่ด้านหลังทาให้ สามารถซ้ อนส่วนที่เกิดไว้ หลังกรอบเมนูได้

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

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

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
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. ทาการทดสอบผลงาน จะพบว่าเมื่อคลิก หรือนาเมาส์ไปว่างที่เมนูจะปรากฏภาพต่าง ๆ กัน

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

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
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)

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

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.