Flashnew

การสรางบทเรียน e-Learning เบื้องตน ดวยโปรแกรม Macromedia Flash MX

รูจักกับ Macromedia Flash

Macromedia Flash เป น โปรแกรมที่ ส ามารถสร างภาพกราฟ ก และภาพเคลื่ อ นไหวได ม ากมายหลายรูป แบบ
ที่สําคัญคือ เปนโปรแกรมสรางภาพเคลื่อนไหวแบบ Flash Animation ที่สมบูรณแบบที่สุด มีคุณสมบัติที่เดนหลายดานคือ
รูปแบบไฟลมีขนาดเล็ก สามารถแสดงภาพออกมาไดชัดเจน มีลูกเลนตางๆ มากกวาภาพเคลื่อนไหวแบบอื่นๆ ที่ใชงานกัน
อยูบนเว็บ สามารถสรางเปนหนาเว็บที่โตตอบกับผูใชงานไดทันที ปจจุบันเวอรชั่นลาสุดคือ Macromedia Flash MX 2004
แตเวอรชั่นที่นิยมอยูในขณะนี้ยังคงเปน Macromedia Flash MX หรือเวอรชั่น 6.0 นั่นเอง

สวนประกอบหลักของ Flash MX

1

4

2
7

3

6
5

1. Menu Bar
เปนแถบสําหรับเก็บคําสั่งตางๆ ของโปรแกรมไวทั้งหมด ตัวอยางเชน คําสั่งสราง movieเปด movie /ปด movie
คําสั่งปรับแตงคาตางๆ ของ movie และอื่นๆ

โดย ดวงพร วิฆเนศ มหาวิทยาลัยศิลปากร หนาที่ 1


2. Tools Box
เปนที่สําหรับจัดเก็บเครื่องมือที่ตองใชงานเปนประจําไว ไดแกเครื่องมือดังนี้

Arrow Subselect
Line Lesso
Pen Text
Oval Rectangle
Pencil Brush
Free Transform Fill Transform
Ink Bottle Paint Bucket
Eyedropper Eraser

Hand Zoom

Stroke Color
Fill Color
Default Colors Swap Colors

3. Stage พื้นที่ทํางาน
ในการสรางภาพเคลื่อนไหวหรือสรางชิ้นงานจะตองสรางลงบนพื้นที่สวนนี้ ซึ่งเปนสวนของพื้นที่ทํางานบน
โปรแกรม โดยสามารถกําหนดสีสันและขนาดไดตามตองการ



4. Timeline Panel
เปน Panel สําหรับกําหนดชวงจังหวะเวลาของภาพเคลื่อนไหว ซึ่งสามารถกําหนดไดถึง 2,000 เฟรม รวมทั้งแสดง
ใหเห็น Layer ตางๆ ที่สรางขึ้นมาใชงาน

5. Properties Panal
เปน Panel สําหรับกําหนดคุณสมบัติตางๆ ของวัตถุที่ตองการเลือกปรับแตง รวมถึงการปรับแตงคุณสมบัติของ
พื้นที่ทํางานดวย เชน สามารถปรับแตงขนาด ปรับสีฉาก การจัดวาง เปนตน



6. Actions Panel
เปน Panel สําหรับกําหนดคําสั่งพิเศษตางๆ ซึ่งเปนคําสั่งของ Flash Movie โดยเฉพาะ ลงไปกับภาพเคลื่อนไหว

7. All Panel
เปนเครื่องมือเสริมสําหรับชวยใหสามารถทํางานในโปรแกรมไดคลองตัวขึ้น เชน เลือกสี ปรับขนาด เปนตน และ
ยังสามารถเลือกล็อก Panel ติดกันเปนชุดเพื่อใชงาน และเลือกปดเปดไดอยางสะดวก



การสรางภาพเคลื่อนไหว

ภาพเคลื่อนไหวแบบจังหวะตอจังหวะ (Frame by Frame) เปนการสรางภาพเคลื่อนไหวแบบพื้นฐาน โดยผูสราง
จะตองสรางการเคลื่อนไหวในแตละจังหวะเอง โดยใหภาพออกมาในลักษณะจังหวะตอจังหวะ ตอกันไปเรื่อยๆ จนเปนภาพ
เคลื่อนไหวที่สมบูรณแบบ
ภาพเคลื่อนไหวแบบ Tween Animation เปนการสรางภาพเคลื่อนไหวโดยใหโปรแกรมเปนผูจัดการสรางจังหวะ
ในการทํางานใหโดยอัตโนมัติ ซึ่งภาพที่ไดออกมาจะมีความสวยงามและมีจังหวะราบรื่น

ความตางของ F5 กับ F6

F5 (Frame) คือ ระยะเวลาของภาพเคลื่อนไหว ทุก Frame แสดงเหมือนกันหมด เชน หาก Frame ที่ 1 วาดรูป
วงกลม Frame ที่ 1-100 ก็จะกลายเปนรูปวงกลมทั้งหมด
F6 (Key Frame) คือการสรางจังหวะในชอง Frame ใหแตกตางกันในแตละ Frame เปนจุดเริ่มตนของการสราง
ภาพเคลื่อนไหว คือ เมื่อเกิดความแตกตางของจังหวะก็จะเกิดภาพเคลื่อนไหว

การทดสอบ Movie

คือการ ทดสอบการทํางานของภาพเคลื่อนไหว เลือกคําสั่ง Control > Test Movie หรือกด Ctrl + Enter



การ Save ไฟล

ไฟล .Fla จะเปนไฟลที่มีการบันทึกขอมูลตางๆ เอาไวทั้งหมดจะมีขนาดไฟลที่ใหญ เปนตนฉบับ ไมสามารถนํา
ไปแสดงผลบน Flash Player หรือ บนเว็บบราวเซอรอินเทอรเน็ตได ดังนั้นการ Save ไฟลในรูปแบบนี้จึงเปนการบันทึกเพื่อ
เอาไวแกไขหรือปรับแตง Movie การบันทึกทําไดโดย เลือก File > Save หรือ File > Save as

.fla

ไฟล .swf เปนไฟลที่จะนําไปใชจริงบน Flash Player หรือ บนอินเทอรเน็ตซึ่งไฟล Movie ในรูปแบบนี้ แสดงผล
ไดอยางเดียว แกไขไมได บันทึกโดยเลือก File > Export Movie >ในชอง Save as type เลือกรูปแบบ .swf > กด Ok

.swf



การสราง Animation แบบ Frame By Frame

1. New File หรือ กด Ctrl + N
2. คลิกเฟรมที่ 1 สรางวงกลม 1 วง พรอมพิมพเลข 1 ลงไป ดังรูป

2

3. สรางเฟรมที่ 2 โดยกดปุม F6 เพื่อเพิ่มคียเฟรม จะไดภาพเหมือนเฟรมแรก จากนั้นคลิกที่เมนู Edit > Select All แลวคลิกที่
Edit > Copy เพื่อคัดลอกวงกลมพรอมตัวเลข แลวคลิก Edit > Paste in Place เพื่อวางรูปวงกลมซอนในตําแหนงเดิม แลวใช
Arrow Tool เลือกทั้งรูปแลวยายไปทางขวาของวงกลมเดิม โดยในขณะที่ยายใหกดปุม Shift บนคียบอรดคางไวดวย จากนั้น
ใหเปลี่ยนตัวเลขในวงกลมขวามือในเฟรมที่ 2 จากเลข 1 เปนเลข 2

3



4. สรางเฟรมที่ 3 โดยกดปุม F6 เพื่อเพิ่มคียเฟรม จะไดภาพเหมือนเฟรมที่ 2 จากนั้นใช Arrow Tool เลือกวงกลมดานขวามือ
พรอมเลข 2 ในวงกลม แลวคลิกที่ Edit >Copy เพื่อคัดลอก แลวคลิก Edit > Paste in Place เพื่อวางรูปวงกลมซอนใน
ตําแหนงเดิม แลวใช Arrow Tool เลือกตําแหนงวงกลมที่ 2 ทั้งรูปแลวยายไปทางขวา โดยในขณะที่ยายใหกดปุม Shift บน
คียบอรดคางไวดวย จะไดวงกลมชิ้นที่ 3 จากนั้นใหเปลี่ยนตัวเลขในวงกลมจากเลข 2 เปนเลข 3

4

5. จากนั้นใชเมาสคลิกที่พื้นที่วางบน Stage แลวกําหนด Frame Rate ใหเทากับ 1 เฟรมตอวินาที แลวทดลองกดปุม Enter
เพื่อดูตัวอยาง หรือกด Ctrl + Enter เพื่อดูผลงาน

5



การสราง Animation แบบ Shape Tweening

2. คลิกเฟรมที่ 1 สรางรูปสี่เหลี่ยม 1 รูป

2

3. คลิกที่เฟรมที่ 30 เลือกคําสั่ง Insert > Keyframe หรือกดปุม F6 เพื่อเพิ่มคียเฟรม
4. กดปุม Delete ที่คียบอรด1 ครั้ง เพื่อลบรูปสี่เหลี่ยมออก แลวสรางรูปวงกลมขึ้นมาแทนที่สี่เหลี่ยม จะไดภาพเฟรมที่ 1 เปน
สี่เหลี่ยมและภาพเฟรมที่ 30 เปนรูปวงกลม

3

4



5. คลิกที่เฟรมที่ 1 กําหนด Properties ในชอง Tween เปน Shape จะพบวามีเสนเชื่อมระหวางเฟรมที่ 1 กับ เฟรมที่ 30

5

6. ทดสอบการทํางานโดยกด Enter หรือคลิก Play ที่ Windows Controller จะพบวา รูปสี่เหลี่ยมจะเปลียนแปลงรูปรางกลาย
่
เปนรูปวงกลม

หมายเหตุ กรณีที่เปนตัวอักษร ใหใชหลักการเดียวกัน คือ
1. กําหนดวัตถุในเฟรมเริ่มตน และกําหนดวัตถุในเฟรมสุดทาย
2. กรณีที่เปนตัวอักษร ใหทําการ Break Apart (Ctrl + B) กอน ทั้งเฟรมเริ่มตนและเฟรมสุดทาย
โดยคําสั่ง Break Apart เรียกไดจาก Modify > Break Apart



การสราง Animation แบบ Motion Tweening

2. คลิกที่เฟรมที่ 1 แลวพิมพขอความลงบน Stage
3. เลือกเครื่องมือ Arrow Tool แลวคลิกเลือกขอความ “Multimedia” นําไปวางไวที่มุมลางซายของ stage หรือในจุดที่
ตองการ

2

3

4. คลิกที่เฟรม 25 เลือก Insert > Keyframe หรือกด F6 จะไดขอความเหมือนเดิม ( “Multimedia” )ที่เฟรม 25 จากนั้นใช
เครื่องมือ Arrow Tool คลิกลากขอความไปวางไวที่มุมบนขวาของ stage

4



5. กําหนด Properties ในชอง Tween เปน Motion กําหนด Rotate เปนแบบ CW ( ตามเข็มนาฬิกา )จํานวน 1 รอบ จะเกิด
เสนเชื่อมระหวางเฟรมที่ 1 กับเฟรมที่ 25 ที่ Timeline

5



6. ทําการทดสอบโดยการกดปุม Play ที่ Window > Tool bar > Controller จะไดขอความ “Multimedia” หมุน 1 รอบจาก
จุดเริ่มตนไปยังจุดสุดทาย

หมายเหตุ
ถาเปนรูปกราฟกที่สรางขึ้นจากเครื่องมือของโปรแกรม จะทําการ Motion ไดก็ตอเมื่อทําการรวมกราฟกนั้นๆ กอน
โดยเลือกคําสั่ง Modify > Group



การสราง Animation โดยการ Mask Layer

1. New File หรือ กด Ctrl + N กําหนดสีพื้นหลัง ( Background ) เปนสีดํา
2. คลิกที่เฟรมที่ 1 พิมพขอความวา “Animation”โดยเลือกรูปแบบตัวอักษรและสีตามตองการ

2

3. จากนั้นคลิกที่เฟรม 30 กดปุมเพิ่มเฟรม (F5)
4. ทําการเพิ่ม Layer ใหม โดยคลิกคําสั่ง Insert > Layer จะได Layer 2 เพิ่มขึ้นมา

3

4



5. สรางภาพวงกลมที่เฟรมที่ 1 ของ Layer 2 ที่ดานซายของคําวา “Animation”

5

6. จากนั้นเลือกคําสั่ง Insert > Create Motion Tween แลวคลิกเฟรมที่ 30 กดปุม F6 เพื่อเพิ่ม Keyframe จากนั้นใชเมาส
คลิกภาพวัตถุวงกลมไปวางไวทางดานขวาของคําวา “Animation”

6

7. เมื่อทดสอบโดยการกด Enter หรือ คลิกปุม Play จะเห็นภาพวงกลมวิ่งไปบนขอความ “Animation”



8. คลิกเมาสที่ Layer 2 แลวเลือกคําสั่ง Mask โดยคลิกขวาของเมาสที่ Layer 2 แลวเลือกคําสั่ง Mask

9. เมื่อทดสอบการทํางานก็จะพบวาขอความ “Animation” จะแสดงเมื่อมี Mask (Layer บน) เคลื่อนที่ผานเทานั้น



การสราง Animation โดยใช Motion Guide

1. New File หรือกด Ctrl + N แลววาดรูปปลา ไวที่ริม Stage ดานซาย (เพื่อใหวายไปดานขวา)
2. จากนั้นเลือกคําสั่ง Insert > Create Motion Tween เฟรมเริ่มตนอยูทางดานซายในเฟรมที่ 1

2

1

3. คลิกที่เฟรม 40 แลวเพิ่ม keyframe โดยการกดปุม F6 จะไดภาพเหมือนเฟรมที่ 1 คือ ภาพปลาที่ตําแหนงเดียวกันจากนั้น
ใชเมาสคลิกลากวัตถุ(ปลา)ไปวางที่ริมStage ทางดานขวาจะไดภาพปลาในเฟรมที่ 40 และจะปรากฎเสนเชื่อมระหวางเฟรม
ที่ 1 กับเฟรมที่ 40 ดังรูป

3

4. เมื่อทดสอบดูขณะนี้ จะพบวาปลาจะเคลื่อนที่จากขอบดานซายไปดานขวา ในลักษณะเสนตรง



5. การกําหนดเสนทางการเคลื่อนที่ (Motion Guide) ทําไดโดยเลือกเมนู Insert > Motion Guide เมื่อเลือกคําสั่งนี้แลวจะ
ปรากฏ Layer เพิ่มเขามาใน Timeline ชื่อวา Guide Layer1
6. คลิกที่เฟรมที่ 1 ของ Layer Guide Layer 1 แลวใชเครื่องมือ Pencil Tool จากนั้นทําการลากเสนจากดานซายไปดานขวา
หรือตามลักษณะที่ตองการใหปลาเคลื่อนที่ไป ตัวอยางดังรูป

6

7. จากนั้นปรับจุดเริ่มตนและจุดสุดทายใหกับวัตถุโดยคลิกเมาสที่เฟรมที่ 1 เลือกปุม Snap to objects หรือเลือกที่
คําสั่งView Snap to objects ใชเมาสลากวัตถุ(ปลา)ใหเกาะติดกับเสน ณ จุดเริ่มตน และที่เฟรม 40 ลากวัตถุใหเกาะติดกับ
ปลายเสนทางดานขวามือ ดังรูป



8. จากนั้นทดสอบการเคลื่อนที่และแกไขเสนทางไดตามตองการ แตการเคลื่อนที่ของวัตถุจะหันหัวไปทางเดียวยังดูไมเปน
ธรรมชาติ ก็สามารถปรับใหหันตามเสนทางที่เปลี่ยนแปลงได โดยใชเมาสคลิกที่เฟรมที่ 1 แลวกําหนด Properties ในชอง
เลือกทําเครื่องหมายถูก ในชอง Orient to path แลวลองทดสอบการทํางานอีกครั้ง

8



การนําภาพเขามาใชงาน

การนําภาพเขามาใช โดยใชคําสั่ง File > Import จะไดภาพที่เลือกมาปรากฏบน
พื้นที่การทํางานเลย หากเลือก File > Import to Library ภาพจะถูกนําไปเก็บ
ไวใน Library



การนําไฟลวิดีโอเขามาใชงาน

3

2

1. เลือก File > Import
2 ชอง Files of type เลือกไปที่ All Video Format
3. เลือกไฟล Video ที่ตองการนําเขามาใชงาน แลวกดปุม open โปรแกรมจะเปดหนาตางใหตั้งคาได
4. กําหนดตั้งคาตามตองการแลวกดปุม OK

4



การใสเสียงใหกับชิ้นงาน

3

2

1. เลือกเมนู File > Import
2. ชอง File of type เลือก All Sound Formats
3. เลือกไฟลเสียงที่ตองการ แลวกด Open โปรแกรมจะทําการ Import ไฟลเสียงมาใสไวใน Library

5

4

4. เปด Library จะพบไฟลเสียงที่นําเขามา
5. กดปุม play เพื่อทดลองฟงเสียงได


6. การนําไฟลเสียงมาใสในชิ้นงาน ใหลากไฟลเสียงที่ตองการ มาวางบนพื้นที่ของชิ้นงาน

7. สามารถปรับแตงเสียงไดในชอง propertiesโดยเลือกประเภทของ Effect แลวกดปุม Edit เพื่อปรับแตงตามตองการ

7



การสราง Symbol

ประโยชนของ Symbol คือการทําใหชิ้นงานที่จะนําออกไปใชมีขนาดไฟลที่เล็ก และสามารถนํามาใชไดหลายครั้ง
โดยไมตองสรางใหม
1. หากจะทําการสราง Symbol จากที่วางๆ ใหเลือกเมนู Insert > New Symbol
2. หากตองการแปลงภาพหรือวัตถุเพื่อใหกลายเปน Symbol ทําไดโดยการ คลิกเลือกวัตถุที่ตองการทําเปน symbol
จากนั้นเลือกเมนู Insert > Convert to Symbol หรือ กดปุม F8

2
1

Symbol มี 3 รูปแบบ ไดแก

Movie Clip Symbol
เปนรูปแบบของ Symbol ที่สามารถสรางภาพเคลื่อนไหวที่ซับซอนได
Button Symbol
เปนรูปแบบของภาพกราฟกที่ถูกเปลี่ยนใหกลายเปนปุม
Graphic Symbol
เปนรูปแบบของภาพกราฟก (ภาพนิ่ง) ที่ถูกเปลี่ยนมาเปน Symbol ภาพกราฟกไดมาจากการวาดจากเครื่องมือใน
Flash หรือ การนําภาพจากภายนอกเขามาก็ได ภาพที่นําเขามาใชงานในตอนแรกจะเปน Bitmap ไมสามารถแกไข
คาได หากทําการ Convert เปน Graphic Symbol จะสามารถปรับแตงได เชน การปรับแตง Alpha, tint, Brightness



การใชคําสั่ง Action Script เบื้องตน

เปนการใชคําสั่งเพื่อควบคุม Movie เชน สั่งใหเลน สั่งใหหยุด สั่งใหไปยังหนาใดๆ หรือคําสั่งที่ซับซอนมากมาย

1. เชน เมื่อตองการจะสั่งให Stop ใหเลือกตําแหนงหรือวัตถุที่จะใส Action Script

1

2. เลือก Actions > Movie Control > stop

2

3. จะเกิดคําสั่ง Stop ดังภาพที่ 3

3

3



การ Publish

คือการนําไฟลไปใชงานบนเว็บบราวเซอร
โดยเลือก File > Publish Settings >ในชอง Formats เลือกรูปแบบ Type ที่จะนําไปใชงาน > กด Ok

เลือก File > Publish โปรแกรมจะสรางไฟลที่ทําการเลือกไวทั้งหมด



วิธีแกไขคา registry

โปรแกรม Flash MX หากตองการใชงานในสวนของ Properties บางคําสั่ง แตวาไมสามารถใชงานไดเนื่องจากมี
ขนาดลนหนาจอ มีวิธีการปรับแกโดยตองเขาไปแกไขคา registry ดังนี้

มีขนาดลนจอ

พอดีหนาจอ

1. ไปที่ Start > Run
2. พิมพคําวา Regedit เพื่อเปด Registry Editor
3. เลือกที่ My Computer จากนั้นไปที่ Menu > Edit > Find Next
4. ตองทําการหา Registry 2 ตัวคือ Fixedfon.fon และ Fonts.fon
พิมพคําวา Fixedfon.fon ลงไป กด OK
5. เมื่อพบแลวให Double Click ที่ชื่อ เพื่อเขาไปแก Data
โดยแกใหเปนคําวา vgafixed.fon
6. เมื่อแกแลวกดที่ F3 เพื่อหาจุดผิดตอไป แกใหหมดทุกตัว
7. Restart เครื่องใหม

คําเตือน การแกไขคา registry นี้ควรกระทําโดยผูที่มีความรูความชํานาญเกี่ยวกับ Windows ขั้นสูง เพราะหากแกไขผิดคา
จะทําใหสงผลกระทบตอระบบวินโดวสได


Flashnew

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Flashnew

Similar to Flashnew (20)

Flashnew