การเขียนโปรแกรมมัลติมีเดีย

Multimedia and Animation Programming 54
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 55
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 56
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 57
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 58
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 59
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 60
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 61
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 62
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 63
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

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

การนาํ สอ่ื มัลติมเี ดยี ไปใชงาน โดยการนําไปใชง านหรือการเผยแพร นักศึกษาจะตองทําการ Publish
งานเสียกอ น โปรแกรม Adobe Captivate น้สี ามารถ Publish งานออกมาไดหลากหลายรปู แบบ
สามารถใชง านไดท ้ังคอมพวิ เตอร แท็บเลต็ และมือถือ ดงั นัน้ กอ นจะ Publish งาน นักศกึ ษาตอง
ยอนกลบั ไปดขู ัน้ ตอนการออกแบบสื่อมัลตมิ ีเดยี วา ออกแบบสื่อมลั ติมเี ดียสําหรับอุปกรณประเภทใด
โดยในบทเรียนน้ี จะนําเสนอการ Publish ไฟลในรปู แบบ swf ดงั ตัวอยางดา นลาง

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 64
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 65
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทสรปุ

การใชโปรแกรม Adobe Captivate สําหรับผลิตส่ือมัลติมีเดีย สามารถนําเสนอ
สื่อมัลติมีเดียไดหลากหลายรูปแบบที่สามารถโตตอบกับผูใช งานไดอยางดี มีจุดเดนคือ
สามารถสรางแบบจําลองการใชซอฟตแวรซ่ึงผูเรียนสามารถทําตามในสื่อการสอนไดทันที
นอกจากน้ียังสามารถสรางแบบทดสอบ ใหคะแนนและประเมินผลไดในตัว โดยสามารถ
สรุปผลท่ีไดจากโปรแกรมเปน 2 ประเภทคือ การสาธิตการทํางาน และ ใหผูใชทดลองการ
ทาํ งานแบบโตต อบ (เรียกวา แบบจําลองการทาํ งาน)

ขอ ดขี องโปรแกรม Adobe Captivate
1) ผูใชไมจําเปนตองมีความชํานาญ ทักษะทางดานการเขียนโปรแกรมหรือ

การสรา งมลั ติมเี ดยี มาก
2) เปนโปรแกรมท่ีใชงานงายสามารถทําการแกไขงานท่ีทําไดงาย สามารถ

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

3) ความเสมือนจริง โปรแกรม Adobe Captivate เปนโปรแกรมที่สามารถ
สรา งสือ่ การสอนทเ่ี สมือนจรงิ ทาํ ใหผูเรียนรูสึกเหมือนเรียนอยูในหองเรียน นอกจากนี้ยังทํา
ใหผูเรียนสามารถเรียนรูไดเร็ว เขาใจงาย และถือเปนการเรียนแบบใชผูเรียนเปนศูนยกลาง
เนือ่ งจากผูเ รียนสามารถกาํ หนดเวลาเรยี น ระยะเวลาเรียน การโตต อบในหอ งเรียนเสมือนได
เปน อยางดี

4) การลดตนทุน งบประมาณ เนื่องจากการผลิตส่ือจากโปรแกรมน้ีสราง
ความรูสึกเหมือนเขา หองเรียนจริง และสามารถนําไปใชซ้ําไดอยางไมจํากัด ซ่ึงทําใหลด
คา ใชจา ยในการอบรมไดเปนอยา งดี

5) การสนับสนุนการทํางานรวมกับโปรแกรมอื่นๆ โดยสามารถแปลงไฟล
สงออกไปใชงานรวมกับโปรแกรมอ่ืนไดทันที Macromedia Flash, Director หรือ
Authorware ได หรอื อาจนาํ ไปใชแ ยกโดยอิสระกไ็ ดเ ชน กนั

6) ความสามารถในการสรางแบบทดสอบ ซง่ึ ผใู ชสามารถสรา งแบบทดสอบได
และสามารถประเมินคะแนนไดโ ดยไมต องใชค วามรดู านเขยี นโปรแกรม

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 66
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

แบบฝก หัดบทท่ี 3

จงออกแบบสตอรบี่ อรด ส่ือมัลตมิ ีเดยี ดา นการศึกษาสําหรับนักเรียนระดบั ชั้นประถมศกึ ษา
สาํ หรับผลิตสือ่ อยา งละเอยี ด

ชือ่ ส่อื มลั ตมิ ีเดียท่ีผลติ : ……………………………………………………………………............................
…………………………………………………………………………………………………………………………………………….

ออกแบบสาํ หรบั นักเรยี นชัน้ ประถมศกึ ษาปที : …………………………………….………………………
อางอิงเน้ือหาจากหนังสือ : …………………………………………………………………………………………
ส่อื มีจาํ นวนหัวเรอ่ื ง : …………………………..………ประกอบดว ย…………………………………………
…………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………….
สรปุ จํานวนหนา ท้งั ส้นิ : …………………..………………

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 67
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 68
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 69
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 70
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 71
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 72
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 73
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

Multimedia and Animation Programming 74
การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอ่ื มลั ตมิ เี ดยี : โปรแกรม Adobe Captivate

เอกสารอา งองิ

__________. (2559). การใช Captivate 8. [ออนไลน]. แหลงทมี่ า :
http://lms.dent.psu.ac.th/lmsdent/pluginfile.php/185/block_html/content
การใชcaptivate8.pdf. [สบื คนเม่อื 9 มถิ นุ ายน 2561].

กฤษณพงศ เลศิ บํารงุ ชยั . (2558). การสรา ง Mobile Learning ดวย Adobe Captivate 8. .
[ออนไลน]. แหลงท่มี า : https://programsdd.com/. [สืบคนเมือ่ 9 มิถุนายน 2561].

กฤษณพงศ เลศิ บํารุงชัย และ บงั อร เลิศบาํ รุงชยั . (2556). สรา งส่ือการสอนมัลตมิ ีเดีย ดวย Adobe
Captivate 6. โปรวิช่นั , บจก. : กรงุ เทพฯ.

วิชาญชัย เทียนคณู . (2553). ครบเครื่องเรื่องงานมลั ตมิ เี ดียดวยโปรแกรม Adobe Captivate. เน็ต
ดีไซน พบั ลิชชง่ิ , บจก. : กรุงเทพฯ.

อดิศักด์ิ กิจแสวง. (2558). คูมือการใชง าน Adobe Captivate 7. [ออนไลน] . แหลง ท่ีมา :
http://www.oar.ubu.ac.th/km/images/imageskm/techno/adisak/adisak-
km.pdf. [สบื คนเมอ่ื 11 มิถนุ ายน 2561].

บทที่3 การใชโ้ ปรแกรมสาํ เรจ็ รปู ผลติ สอื่ มลั ตมิ เี ดยี อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์
โปรแกรม Adobe Captivate

บทที่ 4

การเขียนโปรแกรมสาํ หรับผลติ สอื่ มลั ตมิ ีเดีย 2 มิติ

การเขียนโปรแกรมสําหรับผลิตส่ือมัลติมีเดีย 2 มิติ ในบทเรียนน้ีมุงเนนการผลิตสื่อ
มลั ตมิ ีเดยี โดยใชภ าษา ActionScript 3.0 เปนสําคัญ เน้ือหาในบทเรียนประกอบดวย (1) แนะนําการ
ใชโ ปรแกรม (2) การเตรียมขอมูลการผลิตสื่อ (3) ภาษา ActionScript 3.0 (4) การผลิตสื่อมัลติมีเดีย
2 มติ ิ (5) การเผยแพรสื่อมลั ติมเี ดีย 2 มติ ิ ในรปู แบบแอพพลเิ คช่นั

แนะนาํ การใชโปรแกรม

การเขียนโปรแกรมสําหรับผลิตสื่อมัลติมีเดีย 2 มิติ บทเรียนน้ีมุงเนนการสอนการเขียน
โปรแกรมดวยภาษา ActionScript 3.0 โดยใชโปรแกรม Adobe Animation เปนตัวกลางในการ
พัฒนา โปรแกรม Adobe Animation ปรับปรุงมาจากโปรแกรม Adobe Flash ดวยการออกแบบ
เทคโนโลยีใหมห มดในป 2016 เพอื่ ใหสนับสนุนมาตรฐาน HTML5 สมบูรณแบบ และในขณะเดียวกัน
ก็ยังรองรับการทํางานรวมกับไฟล Flash ด้ังเดิม และขยายขีดความสามารถใหรองรับมาตรฐาน
แอนิเมชันปจจุบันและอนาคตท้ัง HTML5 Canvas เน้ือหาสําหรับเว็บและวิดีโอความละเอียดสูง 4K
รวมไปถึงมาตรฐาน webGL อีกดวย

1. สวนประกอบของ Adobe Animation (Workspaces)
You create and manipulate your documents and files using various

elements, such as panels, bars, and windows. Any arrangement of these elements is
called a workspace. The workspaces of the different applications in Adobe®Creative
Suite® 5 share the same appearance so that you can move between the
applications easily. You can also adapt each application to the way you work by
selecting from several preset workspaces or by creating one of your own. Although
the default workspace layout varies in different products, you manipulate the
elements much the same way in all of them. The various available workspaces are :

1.1 Essentials
1.2 Animator
1.3 Classic
1.4 Debug

Multimedia and Animation Programming 79
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

1.5 Designer
1.6 Developer

ภาพที่ 4.1 โปรแกรม Adobe Animation

2. Basic tools
2.1 Brush
Use the Brush Tool (B) to custom-define a brush by setting parameters

of the brush such as shape and angle. You can create natural artwork in your
projects by customizing the brush tool to suit your drawing needs. You can choose,
edit, and create a custom brush in Animate through the Property Inspector, when the
brush tool is selected in the toolbox.

ภาพท่ี 4.2 ตวั อยา งการใช Brush

2.2 Bone
Use the Bone tool to use Inverse kinematics (IK), a way of animating

objects using bones chained into linear or branched armatures in parent-child
relationships. When one bone moves, connected bones move in relation to it. You
can add IK bones to movie clip, graphic, and button instances.

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 80
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

ภาพท่ี 4.3 ตวั อยา งการทํางานของ Bone

2.3 Camera
Use the Camera to mimic a virtual camera movement. When you set a
camera view for your composition, you look at the layers as though you were looking
through that camera. You can also add tweens or keyframes on a camera layer. Use
the following features within camera to refine your animation:

1) Panning with the subject of the frame
2) Zooming in the object of interest for dramatic effect
3) Zooming out of a frame to remind the viewer of a larger picture
4) Modifying the focal point to shift the attention of the viewer from

one subject to another
5) Rotating the camera Using color tint or filters to apply color effects

on a scene

ภาพที่ 4.4 ตวั อยางการทํางานของ Camera

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 81
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

2.4 Transform
Use the Free Transform tool (E) to scale, rotate, or skew a selection..

ภาพท่ี 4.5 ตัวอยา งการทํางานของ Transform

3. Time
3.1 Timeline
The Timeline in Adobe Animate CC organizes and controls a

document's content over time in layers and frames. Like a movie film, Animate
documents divide lengths of time into frames. Layers are like multiple filmstrips
stacked on top of one another, each containing a different image that appears on
the Stage. The major components of the Timeline are layers, frames, and the
playhead.

ภาพท่ี 4.6 Timeline อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ

Multimedia and Animation Programming 82
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

A : Layers in a document are listed in a column on the left side of
the Timeline.

B : Frames contained in each layer appear in a row to the right of
the layer name.

C : The Timeline header at the top of the Timeline indicates frame
numbers.

D : Playhead indicates the current frame displayed on the Stage. As
a document plays, the playhead moves from left to right
through the Timeline.

By default, the playhead loops when it reaches the end.The Timeline
status displayed at the bottom of the Timeline indicates the selected frame number,
the current frame rate, and the elapsed time to the current frame.

3.2 Frames
Frames are at the core of any animation, dictating each segment of

time and movement. The total number of frames in your movie, and the speed at
which they're played back, together determine your movie's overall length. To know
more on Frames, see the article on Frames and the article on creating frame by
frame animation.

Frame Span

ภาพท่ี 4.7 Frames อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ

Multimedia and Animation Programming 83
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

A keyframe and the span of regular frames that follow it are known as
akeyframe sequence. The timeline can contain any number of keyframe sequences.
If the keyframe in a sequence contains graphical content that is visible on the stage,
the regular frames that follow it will appear gray. If the keyframe in a sequence
contains no graphical content, the regular frames that follow it appear white.

3.3 Keyframes
Like films, Adobe Animate CC documents divide lengths of time into

frames. In the Timeline, you work with these frames to organize and control the
content of your document. You place frames in the Timeline in the order you want
the objects in the frames to appear in your finished content. A keyframe is a frame in
Adobe Animate CC where a new symbol instance appears in the Timeline. A
keyframe can also be a frame that includes ActionScript code to control some
aspect of your document. You can also add a blank keyframe to the Timeline as a
placeholder for symbols you plan to add later or to explicitly leave the frame
blank.A black dot in the Timeline indicates a single keyframe. Light gray frames after
a single keyframe contain the same content with no changes.

These frames have a vertical black line and a hollow rectangle at the
last frame of the span.A black dot at the beginning keyframe with a black arrow and
blue background indicates a classic tween. Do not confuse keyframes with property
keyframes; the Timeline icon for a property keyframe is a solid diamond, whereas a
standard keyframe icon is an empty or filled circle.

ภาพที่ 4.8 Keyframes

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 84
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

3.4 Frames per second
The frame rate (the speed at which the animation in Adobe Animate

CC is played) is measured by the number of frames per second (FPS). A frame rate
that is too slow makes the animation appear to stutter (stop and start), while a frame
rate that is too fast blurs the details of the animation. A frame rate of 24 fps is the
default setting for new Animate documents and usually gives the best results on the
web. (The standard rate for motion pictures is also 24 fps.) The complexity of the
animation and the speed of the computer playing the animation affect the
playback's smoothness. To determine optimum frame rates, test your animations on
a variety of computers with different processing capabilities.Because you specify only
one frame rate for the entire Animate document, be sure to set the desired frame
rate before creating your animations.The frame rate essentially determines the rate
at which the playhead moves across the Timeline

ภาพที่ 4.9 Frames per second

3.5 Layers
Layers help you organize the artwork in your Adobe Animate CC

document. You can draw and edit objects on one layer without affecting objects on
another layer. In areas of the Stage with nothing on a layer, you can see through it to

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 85
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

the layers below.To draw, paint, or otherwise modify a layer or folder, select the
layer in the Timeline to make it active. A pencil icon next to a layer or folder name
in the Timeline indicates that the layer or folder is active.

Only one layer can be active at a time—although more than one layer
can be selected at a time.When you create a Animate document, it contains only
one layer. To organize the artwork, animation, and other elements in your
document, add more layers. You can also hide, lock, or rearrange layers.

ภาพท่ี 4.10 Layers

4. Audio
Adobe Animate offers several ways to use sound. Make sounds that play

continuously, independent of the Timeline, or use the Timeline to synchronize
animation to a sound track. Add sounds to buttons to make them more interactive,
and make sounds fade in and out for a more polished sound track.

There are two types of sounds in Animate: event sounds and stream
sounds.

4.1 An event sound must download completely before it begins
playing, and it continues playing until explicitly stopped.

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 86
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

4.2 Stream sounds begin playing as soon as enough data for the first
few frames has been downloaded; stream sounds are synchronized to the Timeline
for playing on a website.

ภาพท่ี 4.11 Audio
5. Convert to other document types

Most often, you want to design your animation once and use it widely
across multiple devices and platforms. Now, you can use easy-to-use document type
converter to convert your animation from one document type to other document
type as per your device requirement.

Convert Animate projects from one document type to other document
type by using File > Convert To user interface. If you have custom scenarios in which
you want to convert files to other document types, then you can use the JSAPI. For
example, you can use the JSAPI method to convert many files at a time into other
document types.

ภาพที่ 4.11 Convert to other document types

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 87
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

6. Animate keyboard shortcuts

ภาพท่ี 4.12 Animate keyboard shortcuts

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 88
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

การเตรยี มขอมูลการผลติ ส่อื

การเตรียมขอมูลการผลิตส่ือจะอางอิงการทํางานในบทที่ 2 คือ การออกแบบส่ือมัลติมีเดีย
ท่ีจะผลิต บทเรียนน้ีจะยกตัวอยางการสรางสื่อมัลติมีเดีย สอนคําศัพทภาษาอังกฤษ อยางงาย โดยมี
การออกแบบดงั นี้

1. ขน้ั ตอนการเตรยี ม สื่อมัลติมเี ดีย Animal Vocabulary
ส่ือมลั ตมิ เี ดีย Animal Vocabulary ที่จะพัฒนามีวัตถุประสงคเพื่อตองการใหเด็กทราบ

คําศพั ทเก่ียวกบั สัตวอยา งงา ย ในบทเรียนนจี้ ะนาํ คาํ ศัพท มาใชใ นการทํางาน 10 คํา ประกอบดวย

ตารางที่ 4.1 คาํ ศัพทท น่ี าํ มาใชในการสรา งสื่อสื่อมัลตมิ ีเดีย Animal Vocabulary

ที่ คําศัพท ความหมาย
1 Bird นก
2 Cat แมว
3 Cow วัว
4 Dog หมา
5 Elephant ชา ง
6 Giraffe ยรี าฟ
7 Hippopotamus ฮิบโป
8 Kangaroo จิงโจ
9 Lion สิงโต
10 Sheep แกะ

2. ข้ันตอนการออกแบบ สอ่ื มัลติมเี ดีย Animal Vocabulary
2.1 การออกแบบ สตอรีบ่ อรด ส่ือมลั ตมิ เี ดยี Animal Vocabulary

ภาพที่ 4.13 สตอรี่บอรด ส่ือมัลตมิ ีเดยี Animal Vocabulary

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 89
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

2.2 สรา งกราฟกตามทอ่ี อกแบบ
ในสวนนี้ใหนักศึกษาทําการสรางกราฟกตามท่ีไดเรียนรูจากวิชาการออกแบบ

กราฟก ดังภาพเปนการสรา งตวั ละครตามที่ออกแบบเน้ือหาขางตน

ภาพที่ 4.14 ตวั อยางการสรา งกราฟกตามงานที่ออกแบบไว
2.3 การเตรยี มเสยี ง จากการออกแบบส่ือมลั ตมิ เี ดีย Animal Vocabulary น้ัน ได
วางแผนใหม ีเสียงอา นคาํ ศัพท ดังนนั้ ผูศึกษาตองทําการเตรียมเสยี งคาํ อานใหพรอ ม ในรูปแบบไฟล
.mp3
3. ข้นั ตอนการเขยี นผงั งาน ส่ือมลั ตมิ ีเดยี Animal Vocabulary
การเขียนผังงาน ส่ือมัลติมีเดีย Animal Vocabulary สามารถเขียนเปน Flowchart
การทาํ งานไดดังน้ี

ภาพท่ี 4.15 Flowchart ส่อื มัลตมิ เี ดีย Animal Vocabulary

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 90
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

ภาษา ActionScript 3.0

ActionScript เปนภาษาสคริปตท ใี่ ชง านรว มกบั โปรแกรม Adobe Flash ซงึ่ ปจ จบุ นั พฒั นา
เปนโปรแกรม Adobe Animation โดยภาษา ActionScript น้มี ีการพฒั นามาจนถงึ เวอรช น่ั คอื
ActionScript 1.0 ActionScript 2.0 และ ActionScript 3.0 ในบทเรยี นนมี้ ุงเนน การใชภ าษา
ActionScript 3.0 รว มกับโปรแกรม Adobe Animation ในการพฒั นาส่ือมัลติมีเดยี นักศกึ ษา
สามารถนาํ ความรูไปประยกุ ตใชก ับ Adobe Flex หรอื จะเปนเคร่ืองมอื ท่เี ปนโอเพน ซอรซอยาง
Swftools และ haXe เปน ตน

1. เริม่ ตนกับ ภาษา ActionScript

ActionScript คือ โปรแกรมภาษาซึ่งจะชวยใหการติดตอส่ือสาร, การจัดการขอมูล
และอ่ืน ๆ อีกมากมายในเนื้อหา Flash และการประยุกตใช ActionScript จะถูกดําเนินการโดย
ActionScript Virtual Machine (AVM) ซึ่งเปน สวนหนึง่ ของ Flash Player

ActionScript Code จะเปนรูปแบบ bytecode (ประเภทของการเขียนโปรแกรม
ภาษาท่ีเขียนและเขาใจไดโดยเครื่องคอมพิวเตอร) โดย คอมไพเลอร ใน Adobe Flash หรือ Adobe
® Flex Builder ™, หรือที่มีอยูใน Adobe ® Flex ™ SDK และ Flex ™บริการขอมูล bytecode
จะถกู แปลงออกมาอยใู นรปู แบบไฟล SWF ซ่งึ ดําเนินการโดยใช Flash Player

ActionScript 3.0 มีรูปแบบการเขียนโปรแกรมท่ีมีประสิทธิภาพซึ่งจะเปนท่ีคุนเคย
กับผูที่มีความรูพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ (OOP) ActionScript 3.0 มีความสามารถใน
การเขียนสคริปตมากกวา ActionScript รุนกอนๆ มันถูกออกแบบมาเพ่ืออํานวยความสะดวกการ
สรางโปรแกรมที่ซับซอนอยางมากกับชุดขอมูลขนาดใหญและการเขียนโปรแกรมแบบ OOP มีการ
ประมวลผลทรี่ วดเร็วกวา รนุ กอนๆ มาก

การทํางานแบบ OOP คือ การแบงโปรแกรมออกเปนสวนๆ ทํางานอิสระตอกัน ซึ่ง
จะมตี นแบบเรยี กวา Class ส่งิ ทสี่ รางจาก Class จะเรียกวา Object

Class ประกอบไปดวย
•Properties (คุณสมบัติ)
•Methods (วิธีการกระทาํ )
•Events (เหตกุ ารณ)

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 91
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

bytecode คือผลที่ไดจากการแปลง ซอรสโคด (Source code ) ของFlash
กลายเปนรหสั ภาษากลางทเี่ รยี กวา Binary File หรือ Byte Code โดยไบตโคด (Bytecode) ท่ีไดจะ
เปน ไฟลนามสกุล .swf เเละเมื่อได ไบตโคด แลว จึงจะทําการแปลง ไบตโคด ตอดวย AVM2
(ActionScript Virtual Machine 2) ซ่ึงทําหนาท่ีแปลงไบตโคดไปเปนภาษาเคร่ือง (Machine
Code) สําหรบั ระบบปฏบิ ัตกิ ารนั้นๆ

2. โครงสรางพืน้ ฐานของ ActionScript

package{ //ประกาศ package ของชิ้นงาน (ปลอ ยวางเปน default package)
import flash.display.*;
public class Test extends MovieClip{//ประกาศ Class หลกั ของชิน้ งาน
private var tf:TextField = new TextField();
public function Test(){//ประกาศ Constructor
tf.text = "Hello World"; //สว นของการทาํ งาน
addChild(tf);//สวนของการทาํ งาน
}
}

}

3. ขอ แตกตา งระหวา ง AS3 กับ AS2

1) AS3 เขียนลงบน Frame อยา งเดยี ว
2) AS3 สนบั สนุนการเขียนแบบ OOP มากข้ึน
3) มคี วามหลากหลายในการทํางานมากกวา

4. ตวั แปร

ทําหนา ทีส่ าํ หรบั เกบ็ ขอ มลู ตา งๆ ตวั อยาง เชน การสรา งตัวแปรเพือ่ เกบ็ คะแนนใน
เกม เกบ็ พลังชวี ิตในเกม เก็บความเรว็ ของยาน เกบ็ ตาํ แหนงเพือ่ ใชใ นการโปรแกรม เกบ็ คา ตา งๆ ใน
โปรแกรมเพ่ือสงตอ คํานวณ หรอื รายงานผล

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 92
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 93
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 94
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 95
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 96
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 97
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 98
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 99
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 100
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 101
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 102
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 103
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 104
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 105
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์

Multimedia and Animation Programming 106
การเขยี นโปรแกรมสาํ หรบั ผลติ สอ่ื มลั ตมิ เี ดยี

บทที่4 การเขยี นโปรแกรมสาํ หรบั ผลติ สอื่ มลั ตมิ เี ดยี 2 มติ ิ อาจารยพ์ จน์ศริ นิ ทร์ ลมิ ปินนั ทน์