Macromedia Authorware 7

หนังสือ

Macromedia Authorware 7.0

ความรู้เบือ# งต้นเกยี' วกบั งานออกแบบ

ผู้ช่วยศาสตราจารย์นเรศร์ บุญเลศิ

โปรแกรม Macromedia Authorware 7.0

ลกั ษณะของ Macromedia Authorware

Macromedia Authorware เป็นโปรแกรมสาํ หรับสร้างงานประเภทส%ือการเรียนรู้หรือ
CAI สามารถสร้างงานไดห้ ลายระดบั ท0งั งานที%เป็นการนาํ เสนอเน0ือหาไปเรื%อยๆ หรือมีลกั ษณะ
โครงสร้างผงั งานเป็ นแบบเส้นตรง จนถึงการสร้างงานท%ีมีความสลบั ซบั ซอ้ น สามารถเลือกหรือ
เชื%อมโยงไปมาไดห้ ลายๆ ท%ีในหนา้ เดียว นอกจากน0ียงั สามารถสร้างงานที%มีการโตต้ อบกบั ผใู้ ชไ้ ดอ้ ีก
ดว้ ย

Macromedia Authorware มีการพฒั นาใหใ้ ชไ้ อคอนแมนคาํ ส%ังจากภาษาคอมพิวเตอร์ จึงไม่
จาํ เป็นตอ้ งเขียนโปรแกรมหรือภาษาคอมพิวเตอร์ดว้ ยตนเอง วธิ ีการพฒั นางานจะกระทาํ โดยการนาํ
ไอคอนที%ตอ้ งการใชท้ าํ งานโปรแกรม (Flow line) โดยวธิ ีการคลิกคา้ งแลว้ ลากหรือการแดรกเมาส์
ส%ิงท%ีสาํ คญั อีกส%ิงหน%ึงที%ผใู้ ช้ Macromedia Authorware ตอ้ งคาํ นึงถึงก็คือ การซ0าํ ๆ กนั หลายไอคอน
หากต0งั ช%ือใหส้ มั พนั ธ์กบั งานก็จะช่วยใหส้ ามารถแยกชิ0นงานและทราบวา่ กาํ ลงั ทาํ งานอยใุ่ นส่วนใด

จุดเด่นของ Macromedia Authorware คือในขณะที%ผใู้ ชง้ านกาํ ลงั พฒั นาโปรแกรมจะสามารถ
ตรวจสอบผลงานไดต้ ลอดเวลา ทาํ ใหร้ ู้ขอ้ ผดิ จากงานน0นั และเรียนรู้งานเพ%ิมข0ึนจากขอ้ ผิดพลาดของ
ตนเอง ซ%ึงเป็นการสร้างลกั ษณะนิสยั ใหก้ ลายเป็นบุคคลทร%ี ะเบียบวนิ ยั และมีความรอบคอบในการ
ทาํ งานมากยงิ% ข0ึน

แนะนําโปรแกรม

โปรแกรม Macromedia Authorware K.M เป็นโปรแกรมที%ใชเ้ ป็นเคร%ืองมือซ%ึงมีขีด
ความสามารถในการสร้างงานนาํ เสนอที%ตอ้ งการ ใหม้ ีการตอบสนองระหวา่ งโปรแกรมกบั ผใู้ ช้
โปรแกรมไดห้ ลากหลายรูปแบบในรูปของภาพ (Graphics),วดิ ีโอ(Video), เสียง (Sound),
ภาพเคลื%อนไหว (Animation), ขอ้ ความตวั อกั ษร (Text) เป็ นสื%อการสร้างบทเรียนคอมพิวเตอร์ช่วย
สอน (CAI) ท%ีสมบูรณ์

ประเภทของคอมพวิ เตอร์ช่วยสอน

การแบ่งประเภทบทเรียนคอมพวิ เตอร์ช่วยสอน
บทเรียนคอมพิวเตอร์ช่วยสอน มีหลายรูปแบบดว้ ยกนั ซ%ึงการแบ่งรูปแบบหรือประเภท

ของบทเรียนคอมพิวเตอร์ช่วยสอนดว้ ยคอมพวิ เตอร์ โดยสรุปแลว้ มี 5 รูปแบบดว้ ยกนั คือ การสอน
(Tuturial ) ฝึกหดั ปฏิบตั ิ (Drill and Practice) สถานการณ์จาํ ลอง (Simulation ) เกม (Games) และ
การทดสอบ (Tests)

[. การสอน (Tutorial) บทเรียนคอมพวิ เตอร์ช่วยสอนประเภทน0ี จะเป็นสอนสิ%งใหม่
ใหแ้ ก่นกั เรียน คอมพิวเตอร์จะเป็นเหมือนครูสอนนกั เรียนเป็นรายบุคคล บทเรียนคอมพวิ เตอร์ช่วย
สอนก็จะตอ้ งดาํ เนินตามข0นั ตอน วธิ ีการสอนหน่วยหน%ึงๆ เหมือนกบั ครูสอนในห้องเรียน
คอมพวิ เตอร์ช่วยสอน ส่วนใหญ่จะใชล้ กั ษณะน0ี เพราะจะใชก้ บั วชิ าใดก็ไดจ้ ะสอนอะไรก็ไดเ้ ช่นกนั

2. ฝึกหดั และปฏิบตั ิ (Drill and Practice) การใชค้ อมพวิ เตอร์ช่วยสอน เพือ% ฝึกหดั และ
ปฏิบตั ิน0นั จะใชห้ ลงั จากการเรียนรู้สิ%งใหม่แลว้ อาจจะเรียนจากการสอน หรืออาจจะเรียนจาก
เอกสาร หนงั สือหรือส%ืออื%นๆ ก็ได้ การฝึกหดั และการปฏิบตั ิน0ีใชไ้ ดเ้ กือบทุกสาขาวชิ าไม่ใช่เพยี งแต่
สอนเลขคณิตกบั คาํ ศพั ท์ ซ%ึงบทเรียนจาํ นวนมากท%ีทาํ ในสองวชิ าน0ี แต่ยงั อาจจะใชฝ้ ึกหดั วชิ าอ%ืนๆได้
เช่น ภูมิศาสตร์ ประวตั ิศาสตร์ วทิ ยาศาสตร์ เป็นตน้

^. แบบสร้างสถานการณ์จาํ ลอง (Simulation) เพือ% ใชส้ าํ หรับการเรียนรู้ หรือทดลอง
จากสถานการณ์ท%ีจาํ ลองจากสถานการณ์จริง ซ%ึงอาจจะหาไม่ไดห้ รืออยไู่ กล ไม่สามารถนาํ เขา้ มาใน
หอ้ งเรียนได้ หรือมีสภาพอนั ตราย หรืออาจสิ0นเปลืองมากที%ตอ้ งใชข้ องจริงซ0าํ ๆ สามารถใชส้ าธิต
ประกอบการสอน ใชเ้ สริมการสอนในหอ้ งเรียน หรือใชซ้ ่อมเสริมภายหลงั การเรียนนอกหอ้ งเรียน
ที%ได้ เวลาใด ก็ได้

4. แบบเกมส์ (Games) เกมส์คอมพวิ เตอร์ แบ่งออกเป็ น 2 กลุ่มใหญ่ๆ ไดแ้ ก่ เกมส์เพ%อื
การสอนและเกมส์ท%ีไม่ใช่เพ%ือการสอนหรือเป็ นเกมส์บนั เทิง

5. ทดสอบ (Tests) การใชค้ อมพิวเตอร์เพ%ือการทดสอบ หรือประเมินผลนกั เรียน ทาํ
ได้ 2 วธิ ี คือการใชค้ อมพิวเตอร์เป็นเครื%องมือในการสร้างขอ้ สอบ และการใชค้ อมพิวเตอร์ในการ
บริหารงานทดสอบหรือในการจดั สอบ

5.1 การใชค้ อมพวิ เตอร์เป็ นเครื%องมือในการสร้างขอ้ สอบ โดยทวั% ไปมกั จะใช้
โปรแกรมคอมพิวเตอร์ เพอ%ื อาํ นวยความสะดวกในการเช%ือมคาํ ถามและคาํ ตอบ นอกจากน0ียงั
สามารถจดั เก็บในลกั ษณะเป็นคลงั ขอ้ สอบไดอ้ ีกดว้ ย

5.2 การใชค้ อมพิวเตอร์ในการบริหารงานทดสอบ ครูสามารถเลือกหรือสุ่ม
ขอ้ สอบท%ีตอ้ งการออกมาใชเ้ ป็นแบบทดสอบได้

กระบวนการออกแบบและสร้างบทเรียนคอมพวิ เตอร์ช่วยสอน

กระบวนการออกแบบและสร้างบทเรียนคอมพวิ เตอร์ช่วยสอน จะแบ่งข0นั ตอนการพฒั นา
ดงั น0ี

ข0นั ที% [ การออกแบบโปรแกรมบทเรียน (Courseware Designing)
ข0นั ที% b การสร้าง Storyboard ของบทเรียน
ข0นั ที% ^ การสร้างโปรแกรมบทเรียน(Courseware Construction)
ข0นั ที% e การตรวจสอบและประเมินผลก่อนนาํ ไปใชง้ าน

วธิ ีการเข้าสู่โปรแกรม Authorware 7.0

[.เลือก Start /Programs /Macromedia / Macromedia Authorware 7.0 ดงั รูปภาพท%ี [

รูปภาพท'ี ? การเขา้ สู่โปรแกรม Macromedia Authorware 7.0
2 จะปรากฏหนา้ จอภาพโปรแกรม Macromedia Authorware 7.0 ดงั ภาพท%ี b

รูปภาพที' @ Macromedia Authorware 7.0

3.จะมีหนา้ จอท%ีมีแบบใหใ้ นโปรแกรม เรียกวา่ Knowledge Objects ถา้ ไม่ตอ้ งการสร้างงาน
ตามแบบที%มีมาใหก้ ็ใหเ้ ลือกคลิก Cancel เพอ%ื ไปยงั หนา้ จอที%ตอ้ งการ ดงั ภาพที% ^

รูปภาพที' 3 Knowledge Objects
e. จะปรากฏหนา้ จอการทาํ งานของ Macromedia Authorware 7 ดงั ภาพท%ี 4

รูปภาพที' 4 หนา้ จอ Macromedia Authorware 7.0

ส่วนประกอบโปรแกรม Authorware C.D

ในการทาํ งานโปรแกรม Authorware K.M ซ%ึงเป็ นโปรแกรมสําเร็จรูปที%นาํ มาประยกุ ตใ์ ชใ้ นการ
เรียนการสอน ตลอดจนการนาํ เสนอผลงานออกทางจอภาพ ซ%ึงมีความสาํ คญั ประการหน%ึงท%ีสามารถ
ติดต่อกบั ผใู้ ช(้ User Interface) การใชง้ านของโปรแกรมจะตอ้ งมีความเขา้ ใจในเรื%องเครื%องมือและ
ลกั ษณะเด่นของโปรแกรมในการนาํ เสนอ ตลอดจนการนาํ เขา้ ซ%ึงภาพ เสียง มลั ติมีเดีย และมีความ
เกี%ยวขอ้ งกบั โปรแกรมอ%ืน ๆ มากมาย ดงั น0นั ส่วนประกอบของโปรแกรมแยกออก ดงั น0ี

1. เมนูบาร์ (Menu Bar) เป็นส่วนประกอบแรกที%มีความสาํ คญั ที%รวบชุดคาํ ส%ังท0งั หมดของ
โปรแกรมไวอ้ ยา่ งครบถว้ ยมีท0งั หมด [[ เมนู (ชุดคาํ สั%ง) ดงั ภาพท%ี p

รูปภาพท'ี E เมนูบาร์ (Menu Bar) Macromedia Authorware 7.0



12
3

5. Presentation Windows : เป็นพ0ืนท%ีแสดงผลงานที%ไดจ้ ากออกแบบไวใ้ น Design window
สามารถกาํ หนดคุณสมบตั ิในเรื%องของขนาดพ0ืนหลงั หรือเมนูที%ตอ้ งการแสดง ไดต้ ามตอ้ งการโดย
คลิกเลือกท%ีเมนูคาํ ส%ัง Modify>File>Properties ดงั ภาพท%ี [[

รูปภาพท'ี ??-1@ Properties

เริ'มต้นสร้างงานนําเสนอด้วย Authorware 7.0

Display Icon เป็นไอคอนท%ีใชส้ าํ หรับแสดงผลทางจอภาพ แสดงตวั อกั ษร แสดงภาพ แสดง
ภาพเคล%ือนไหว การใชง้ านไอคอน ดงั น0ี

• ใหใ้ ชเ้ มาส์คลิกรูปไอคอนน0ีบนแถบเครื%องมือคา้ งไวล้ ากมาวางบนเส้นผงั งาน

• ดบั เบิลคลิกเปิ ดหนา้ ต่างไอคอนแสดง หนา้ ต่างน0ีประกอบดว้ ย คอนโทรลบ็อก
แถบคาํ ส%ังกล่องเครื%องมือ

การวาดรูป คลิกเมนู Window เลือก Inspectors เลือก Colors

ไดห้ นา้ ต่างกล่องสี คลิกอุปกรณ์ในกล่อง คลิกเลือกสี แลว้ วาดรูป จะไดร้ ูปตามตอ้ งการ

การพมิ พ์ตัวอกั ษรและข้อความ
ใน Display Icon สามารถพิมพต์ วั อกั ษร ใส่รูป วาดเส้นตรง วงกลมรุปสี%เหลี%ยมต่างๆ ได้
โดยใชเ้ คร%ืองมือจาก Toolbox เม%ือตอ้ งการพมิ พข์ อ้ ความ ก็เพยี ง
1. ดบั เบิ0ลคลิกที%ไอคอน Display Icon
2. คลิกเลือกรูปแบบที%ตอ้ งการ
3. คลิกวางเมาส์ท%ีบริเวณท%ีตอ้ งการแลว้ ทาํ การพมิ พข์ อ้ ความตามที%ตอ้ งการ

การกาํ หนดลกั ษณะอกั ษร ขนาด และการจัดรูปแบบตัว
1. คลิกเลือก Object ที%ตอ้ งการเปล%ียน จะปรากฏ Handle
2. คลิกเมนู Text เพือ% เลือก Font เลือกที% Other เพ%ือทาํ การปรับเปล%ียน

3. ถา้ ตอ้ งการกาํ หนดลกั ษณะตวั อกั ษรใหเ้ ลือก Style

4. ถา้ ตอ้ งการเปล%ียนขนาดตวั อกั ษรใหเ้ ลือก Text Size

5. ถา้ ตอ้ งการปรับตาํ แหน่งของขอ้ ความให้เลือก Alignment

การใช้เครื'องมือวาดใน Toolbox
เราสามารถเลือกรูปแบบการวาดรูปได้ โดยเลือกท%ี Toolbox แลว้ ทาํ การวาดที%ตาํ แหน่งที%
ตอ้ งการ

การสร้างและการพฒั นางานให้น่าสนใจ

ความหมายและการใช้คาํ ส'ัง Transition
คาํ สั%ง Transition มีผลต่อการเร%ิมปรากฏภาพ และการเปล%ียนภาพ การใส่ Transition
เพอื% ใหก้ ารแสดงภาพในแต่ละเฟรมน่าสนใจ
การใชค้ าํ ส%ัง Transition สามารถทาํ ได้ ดงั น0ี

1. คลิกเลือก Object ท%ีตอ้ งการเปลี%ยน จะปรากฏ Handle
2. คลิกเมนู Modify เพอ%ื เลือก Icon เลือกที% Transition

3. จะปรากฏ Box ใหเ้ ลือกกาํ หนดลกั ษณะตามท%ีตอ้ งการ

การใชค้ าํ ส%ังต่างๆ ที%สาํ คญั และใชง้ านบ่อย
- คาํ ส%ัง Inport รูปภาพ ทาํ ได้ 2 วธิ ี คือ
1. Insert ---> Image
2. File ---> Inport
- คาํ ส%ัง Group และ Upgroup

ใชใ้ นการรวมกลุ่ม หรือยกเลิกการรวมกลุ่ม ทาํ ไดโ้ ดย
Modify ---> Group หรือ Upgroup

- คาํ ส%ัง Copy และ paste
Edit ---> Copy
Edit ---> Paste

Motion Icon เป็นไอคอนสาํ หรับทาํ ใหส้ %ิงที%อยขู่ า้ งหนา้ เคลื%อนไหวตามรูปแบบท%ีกาํ หนดการ
ใชง้ านไอคอนสร้างการเคลื%อนไหว

คลิกลากไอคอนน0ีมาต่อจากไอคอนแสดงท%ีมีส%ิงท%ีตอ้ งการทาํ ใหเ้ คลื%อนไหวอยบู่ นเส้นผงั
งาน

คลิกเมนู Control เลือก Restart ไดห้ นา้ ต่างกาํ หนดการเคลื%อนไหว

คลิกวตั ถุคา้ งไว้ รูปวตั ถุจะเขา้ ไปอยใู่ นช่องแสดง ลากวตั ถุไปยงั ตาํ แหน่งที%ตอ้ งการ

ถา้ ตอ้ งการเปลี%ยนแบบการเคล%ือนไหว ใหใ้ ชเ้ มา้ ส์คลิกป่ ุมเปิ ดแบบการเคลื%อนไหวข0ึนมาให้
เลือก กาํ หนดความเร็วจากตวั เลขในช่อง Timing ค่ามากเคล%ือนไหวชา้ แลว้ กดป่ ุม Preview ทดลอง
การเคลื%อนไหว แลว้ คลิกป่ ุม OK

Erase Icon เป็นไอคอนสาํ หรับส%ังใหภ้ าพบนจอหายไปเพื%อแสดงภาพใหม่การใชง้ าน
ไอคอนลบหนา้ จอ

ใชเ้ มา้ ส์คลิกไอคอนน0ีบนแถบเคร%ืองมือลากมาวางต่อจากไอคอนส่วนท%ีตอ้ งการจะลบออก

คลิกเมนู Control คลิกแถบ Restart เพ%อื ทดลองใหแ้ สดงการทาํ งานของโปรแกรม

การแสดงจะหยดุ ท%ีหนา้ ต่างลบหนา้ จอ ใหท้ ่านคลิกส%ิงท%ีตอ้ งการลบ ไอคอนสิ%งเหล่าน0นั จะ
หาย ไปจากหนา้ ต่างลบจอ เลือกแบบการหายไปของวตั ถุ( Transition)

เสร็จแลว้ กดป่ ุม Preview ทดลอง แลว้ กดป่ ุม OK
Wait Iconใชส้ าํ หรับทอดระยะเวลาใหโ้ ปรแกรมแสดงผลออกทางจอภาพหรือทาํ งาน
อยา่ งใดอยา่ งหน%ึงใหส้ าํ เร็จก่อนจึงทาํ งานต่อไป

การใช้งานไอคอนหน่วงเวลา
คลิกลากไอคอนหน่วงเวลามาวางหลงั กลุ่มไอคอนท%ีทาํ งานชุดท%ีจะหน่วงเวลา
ดบั เบิลคลิกไอคอนหน่วงเวลาจะไดห้ นา้ ต่างหน่วงเวลา เลือกรายการท%ีตอ้ งการ

เมื%อให้โปรแกรมทาํ งานจะแสดงป่ ุมกดตามที%กาํ หนด

Framework Icon เป็นไอคอนสาํ หรับรวบรวมงานที%แสดงเป็นแผน่ ภาพต่อ ๆ กนั หรือ
เอกสารต่อ ๆ กนั แบบหนงั สือ โดยมีเคร%ืองมือสาํ หรับเปิ ดเดินหนา้ ถอยหลงั คน้ หา ฯลฯ

ดบั เบิลคลิกเปิ ดหนา้ ต่างแกไ้ ขระบบเฟรมงาน ตดั หรือเพ%ิมได้

การเพิ%มป่ ุมของระบบ ลากไอคอนสามเหลี%ยมคว%าํ มาวางบนผงั ป่ ุมของระบบ แลว้ ดบั เบิล
คล|ิก ไอคอนน0ี จะไดห้ นา้ ต่างสาํ หรับกาํ หนดการทาํ งานของป่ ุม

การยอ่ ขยายป่ ุมกดของระบบ ดบั เบิลคลิกไอคอนแสดงบนผงั งานภายในเฟรมงาน จนได้
หนา้ ต่างมีรูปของแถบป่ ุมกด ใชเ้ มา้ ส์ลากป่ ุมส%ีเหลี%ยมเลก็ ๆ รอบรูปใหม้ ีขนาดตามตอ้ งการ

การกาํ หนดไอคอน Decision และ Interaction
Decision Icon ใชส้ าํ หรับใหโ้ ปรแกรมเลือกตาม เง%ือนไข หรือ สุ่ม หรือ ฯลฯ การใชง้ าน
- คลิกลากไอคอนทางเลือก มาวางบนเส้นผงั งาน
- คลิกลากไอคอนแสดงมาวางต่อจากไอคอนทางเลือกถดั ไปทางขวา bอนั

- ดบั เบิลคลิกเปิ ดไอคอนแสดงออกมาใส่ขอ้ มูลทีละอนั เช่น ใส่วงกลม กบั ส%ีเหล%ียม
- ดบั เบิลคลิกไอคอนทางเลือกเพอื% ใส่รายการตามที%ตอ้ งการใหท้ าํ งาน

- เม%ือโปรแกรมทาํ งานจะกระพริบเลือกระหวา่ งรูปวงกลมกบั สี%เหลี%ยมจนนาฬิกาบอกหมด
เวลา

Interaction Icon เป็นไอคอนสาํ หรับใหผ้ เู้ รียนตดั สินใจเลือกทางเดินของโปรแกรมตาม
ตอ้ งการการใชง้ าน

- คลิกลากไอคอนตดั สินใจมาวางบนเส้นผงั งาน
- คลิกลากไอคอนแสดงมาวางต่อจากไอคอนตดั สินใจไปทางขวา 2 - 3 อนั

- ดบั เบิลคลิกเปิ ดไอคอนแสดงเพ%ือใส่ขอ้ มลู เช่น วงกลม ส%ีเหลี%ยม กากะบาด
- คลิกป่ ุมเล็กๆเป็นป่ ุม Response Type ไดห้ นา้ ต่างใหเ้ ลือกรายการที%ตอ้ งการ เช่น
PauseBeforeExit , Don't Erase เป็นตน้

- คลิกป่ ุม บนหนา้ ต่าง Properties : Response ทาํ เหมือนกนั ทุกทางเลือกดบั เบิลคลิก
ไอคอนตดั สินใจ ไดห้ นา้ ต่างแสดงผล จดั ตาํ แหน่งของป่ ุมกด ทางเลือกและแกใ้ ขรูปแบบต่าง ๆ

- เม%ือให้โปรแกรมทาํ งาน จะมีป่ ุมปรากฏใหเ้ ลือกกด แลว้ แสดงผลคา้ งไว้

การสร้างการโต้ตอบ

การโต้ตอบแบบกดป่ ุม (Button)
เป็นการโตต้ อมในรูปแบบของป่ ุม เพือ% ให้ผใู้ ชค้ ลิกเมาส์ที%ป่ ุมตวั เลือกต่างๆ สัญลกั ษณ์ท%ีใช้
แทนการโตต้ อบแบบน0ี จะเป็ นรูปสี%เหล%ียมมุมมน

ดบั เบิ0ลคลิกที%บริเวณ จะปรากฏหนา้ จอในการเซ็ตค่าต่างๆ

การโต้ตอบแบบกาํ หนดจํานวนคร#ัง (Tries Limit)
เป็นการโตต้ อบในรูปแบบที%ตอ้ งการกาํ หนดจาํ นวนคร0ังในการตอบคาํ ถาม สัญลกั ษณ์ที%ใช้
แทนการโตต้ อบแบบน0ี จะเป็ นรูปสี%เหล%ียมมุมมน

ดบั เบิ0ลคลิกท%ีบริเวณ จะปรากฏหนา้ จอในการเซ็ตค่าต่างๆ
การโต้ตอบแบบกาํ หนดเวลา (Time Limit)
เป็นการโตต้ อบในรูปแบบท%ีตอ้ งการกาํ หนดเวลาในการตอบสนอง สัญลกั ษณ์ท%ีใชแ้ ทน
การโตต้ อบแบบน0ี จะเป็นรูปส%ีเหลี%ยมมุมมน
การโต้ตอบแบบกาํ หนดพนื# ที' (Hot Spot)
เป็นการโตต้ อบในรูปแบบท%ีตอ้ งการกาํ หนดพ0ืนที%ในการตอบสนอง คือ ตอ้ งคลิกในบริเวณ
ท%ีกาํ หนด สญั ลกั ษณ์ที%ใชแ้ ทนการโตต้ อบแบบน0ี จะเป็นรูปสี%เหลี%ยมมุมมน
การโต้ตอบแบบคลกิ วตั ถุ (Hot Object)
เป็นการโตต้ อบในรูปแบบท%ีตอ้ งคลิกวตั ถุก่อนถึงจะมีการตอบสนอง คือ ตอ้ งคลิกใน
บริเวณที%กาํ หนด สญั ลกั ษณ์ท%ีใชแ้ ทนการโตต้ อบแบบน0ี จะเป็นรูปส%ีเหล%ียมมุมมน

การโต้ตอบแบบลากวตั ถุ (Target Area)
เป็นการโตต้ อบในรูปแบบที%ผใู้ ชส้ ามารถลากเอาวตั ถุไปวางไวย้ งั ตาํ แหน่งท%ีกาํ หนดบน
หนา้ จอได้ สญั ลกั ษณ์ท%ีใชแ้ ทนการโตต้ อบแบบน0ี จะเป็นรูปสี%เหล%ียมมุมมน

การโต้ตอบแบบเตมิ ข้อความ (Text Entry)
เป็นการโตต้ อบในรูปแบบท%ีผใู้ ชเ้ ติมขอ้ ความแลว้ นาํ ไปแสดงออกทางหนา้ จอได้
สญั ลกั ษณ์ที%ใชแ้ ทนการโตต้ อบแบบน0ี จะเป็นรูปส%ีเหล%ียมมุมมน
การโต้ตอบแบบกดแป้ นพมิ พ์ (Keypress)
เป็นการโตต้ อบในรูปแบบท%ีผใู้ ชต้ อ้ งกดแป้ นพมิ พต์ ามท%ีกาํ หนดถึงจะมีการตอบสนอง
สญั ลกั ษณ์ที%ใชแ้ ทนการโตต้ อบแบบน0ี จะเป็นรูปส%ีเหล%ียมมุมมน

การใช้งานไอคอน ภาพยนตร์ เสียง และดวี ดี ี

Digital Movie Icon เป็นไอคอนสาํ หรับนาํ ภาพยนตร์ที%สร้างไวจ้ ากโปรแกรมอื%นเขา้ มาแสดง
ในโปรแกรม

Sound Icon เป็นไอคอนสาํ หรับนาํ เสียงท%ีสร้างไวจ้ ากโปรแกรมอ%ืนเขา้ มาแสดงใน
โปรแกรม

DVD Icon เป็นไอคอนสาํ หรับนาํ วดี ีโอท%ีสร้างไวจ้ ากโปรแกรมอ%ืนเขา้ มาแสดงในโปรแกรม

ตัวอย่างการวางไอคอน

การสร้างชิ#นงานด้วยเคร'ืองมอื Icon Palette

1. ทาํ การสร้างพ0ืนท%ีทาํ งานใหม่โดยไปที% File > New > File เพียงเท่าน0ีก็ไดพ้ 0ืนที%ทาํ งานแลว้

b.ลาก Display icon มาวางบนเส้น Flowline แลว้ ทาํ การต0งั ช%ือ icon เพ%อื ความสะดวกในการ
ใชง้ าน

3. ดบั เบิ0ลคลิ|ก Display icon เพ%ือนาํ ไฟลภ์ าพที%เตรียมไวม้ ามาใส่ในหนา้ กระดาษ

e. เลือกไฟลภ์ าพที%ตอ้ งการ โดยไปท%ี Insert > Image > Import > เลือกไฟลภ์ าพท%ีตอ้ งการ >
Import แลว้ คลิก OK จะไดภ้ าพที%ตอ้ งการใหท้ าํ การยอ่ หรือขยายขนาด ของภาพใหพ้ อดีกบั กรอบ
ของ Display icon เพอ%ื ความสวยงามของภาพ



p. แทรกไฟล์ Flash หรือ Animation gif เพือ% เพิ%มความน่าสนใจใหก้ บั ชิ0นงาน โดยไปท%ี
Insert > Media > Flash Movie > Browse > เลือกไฟลท์ %ีตอ้ งการ > Open ก็จะไดไ้ ฟล์ Flash ที%
ตอ้ งการ

6. วธิ ีตดั พ0ืนหลงั ของไฟล์ Flash ออก โดยดบั เบิ0ลคลิกท%ี Flash Movie จะปรากฏหนา้ ต่างข0ึนมาแลว้
เลือกที% Display ต0งั ค่าMode เป็น Transparent เท่าน0ีก็จะไดไ้ ฟล์ Flash ท%ีไม่มีพ0ืนหลงั แลว้

K. วธิ ีการสร้าง Main Menu ทาํ ไดโ้ ดยการลาก Display icon มาวางบน Flow line แลว้ ต0งั
ช%ือใหเ้ รียบร้อย แลว้ ทาํ ตามข0นั ตอนขอ้ ท%ี e เพื%อใส่ Background ใหก้ บั ชิ0นงาน

‚. สร้างเง%ือนไขใหก้ บั Main menu โดยลาก Interaction icon มาวางบน Flow line แลว้ ต0งั ชื%อ จะได้
ดงั ภาพ

ƒ. สร้างลิงคใ์ หก้ บั Main Menu โดยลาก Map icon มาวางทางดา้ นขวาของ Interaction icon จนครบ
ตามจาํ นวน ของ Main Menu ที%กาํ หนดไวด้ งั ภาพ

[M. กาํ หนดเงื%อนไขใหต้ รงกบั Main Menu ที%เราสร้างไว้ โดยดบั เบิ0ลคลิกท%ีไอคอน Menu เพื%อเปิ ด
Background มากาํ หนดลิงคแ์ ลว้ คลิกบน Map icon เพ%อื ใหป้ รากฎกรอบชิ0นงานแลว้ ปรับใหพ้ อดีกบั
ป่ ุมไอคอนท%ีเราสร้างไว้ ดงั ภาพ

หมายเหตุ : ใหท้ าํ จนครบหมดทุกป่ ุมที%เราสร้างไว้
[[. เมื%อกาํ หนดการเชื%อมโยงครบหมดแลว้ ต่อไปสร้างเน0ือหาใหก้ บั Map icon โดยดบั เบิ0ลคลิกท%ี
Map icon เพื%อวาง Display icon ลงบน Flowline แลว้ ดบั เบิ0ลคลิกท%ี Display icon เพ%ือใส่
Background ใหก้ บั ชิ0นงาน ดงั ภาพ (ภาพท%ีนาํ มาใส่สามารถทาํ ตามขอ้ ที% e ได)้

[b. สร้างลิงคใ์ หก้ บั ป่ ุมเพอ%ื กลบั หนา้ Menu โดยสร้าง icon แลว้ ดบั เบิ0ลคลิกที% Calculation icon เพื%อ
สร้างเงื%อนไขในการลิงคไ์ ปยงั Menu โดยพมิ พค์ าํ วา่ GoTo (IconID@”Menu”) แลว้ save coad ไว้
ดงั ภาพ

[^. สร้างเน0ือหาใหก้ บั คาํ อธิบายรายวชิ า,จุดประสงคก์ ารเรียนรู้และแบบทดสอบใหค้ รบซ%ึงวธิ ีการ
ทาํ สามารถทาํ ไดใ้ นขอ้ [[และ[b
[e. สร้างการเช%ือมโยงใหก้ บั ป่ ุมออกจากโปรแกรม โดยลาก Map icon มาวางทางดา้ นขวาของ
Interaction icon แลว้ ดบั เบิ0ลคลิกที% Map icon แลว้ นาํ Calculation icon มาวางบน Flowline แลว้

กาํ หนดเงื%อนไขใหเ้ รียบร้อย โดยใส่ coad Quit (0) แลว้ save ไว้ จากน0นั นาํ Calculation icon มา
วางขา้ ง Map icon แลว้ กาํ หนดเง%ือนไขโดยใส่ coad GoTo(IconID@"menu") จะไดด้ งั ภาพ