|
กิจกรรมที่ 9 ฝึกทักษะเบื้องต้น
การทำปุ่มเพื่อควบคุมบทเรียน
จุดประสงค์ 1. เกิดทักษะเบื้องต้นการทำปุ่มต่างๆ
เพื่อควบคุมบทเรียน
2. สามารถทำให้มีปฏิสัมพันธ์เช่นบอกหน้าที่ของปุ่มสั้นๆ เมื่อนำเมาส์วางเหนือปุ่ม
หรือเมื่อกดเมาส์มีเสียงบรรยาย
ฯลฯ เป็นต้น
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย
|
|
1. กด Ctrl + n เพื่อเปิดไฟล์ใหม่
|
|
2. เลือก Insert > New Symbol เมื่อเกิดหน้าต่าง
Create New Symbol เลือก Button
ดังภาพที่ 56
|
|
ภาพที่ 56
|
|
3. จะเกิดหน้าต่าง Timeline ของ Button
ดังแสดงในภาพที่ 57 และเกิดเครื่องหมาย + ตรงกลาง Stage ซึ่งเป็นจุดชี้บ่งถึงจุดศูนย์กลางของ Stage ที่ใช้ทำ
Button
|
|
ภาพที่ 57
|
|
 ภาพที่
58
|
4. เลือก Rectangle Tool เลือก
Option ทำมุมให้เป็นวงโค้งขนาด 8 pixel ดังแสดงในภาพที่ 58 แล้วคลิกต่อที่ OK
|
|
|
5. ลากเมาส์ให้เป็นภาพสี่เหลี่ยมผืนผ้ามุมเป็นส่วนโค้ง
ดังแสดงในภาพที่ 59
6. กด Ctrl + k เพื่อเปิด Align Panel และเลือก To Stage ดังภาพที่ 60
|
|
ภาพที่ 59
|
|
|
ภาพที่ 60
|
|
7. เลือกภาพสี่เหลี่ยมแล้วคลิกปุ่ม Align Horizontal Center และ Align Vertical Center
ดังภาพที่ 61
|
|
|
|
|
ภาพที่ 61
|
|
ผลคือทำให้ภาพสี่เหลี่ยมมาอยู่ตรงกึ่งกลางของ Stage พอดี
|
|
8. เลือก Over ( เป็น Event ของเมาส์เมื่อวางเหนือวัตถุ)
แล้วกด F6 > เลือก Down ( เป็น Event ของเมาส์เมื่อกดเมาส์เหนือวัตถุ)
แล้วกด F6 ดังแสดงในภาพที่ 62
การกระทำดังกล่าวเป็นการ Duplicate ภาพจาก กรอบภาพ
แรกสู่ กรอบภาพ ที่ 2 และ 3
ตามลำดับ
|
|
ภาพที่ 62
|
|
9. เลือก Over แล้วเปลี่ยนสีของปุ่มเป็นสีใดๆ
แต่ควรต่างจากช่อง Up ในที่นี้เป็นสีน้ำเงิน ดังภาพที่
63 > เลือก Down แล้วเปลี่ยนสีของปุ่มเป็นสีอื่นๆ ที่แตกต่างจาก ช่อง Up และช่อง Over ดังภาพที่ 64
และอาจเปลี่ยนสีที่ กรอบภาพ ชื่อ Hit อีกด้วยก็ได้
|
|
ภาพที่ 63
|
ภาพที่ 64
|
|
10. คลิกปุ่ม Insert Layer เพื่อเพิ่ม Layer
อีกชั้นหนึ่ง จะเกิดช่องสีขาวเหนือ Layer แรก
|
|
ภาพที่ 65
|
(Layer 2) ดังแสดงในภาพที่ 65 โดยไม่มีขอบของกรอบภาพปรากฎ
หากมีวัตถุ
ใดๆ ใน Layer นี้ จะมองเห็นเหมือนกันทุก
กรอบภาพ
|
|
11. เลือก กรอบภาพ Up แล้วกด Shift
+ F5 เพื่อลบ กรอบภาพ Over, Down และ
Hit ออก
|
|
ดังภาพที่ 66
12. กด F6 เพื่อ Insert Key Frame
ที่ กรอบภาพ Over
|
|
|
13. เลือก Text Tool เพื่อพิมพ์ข้อความใดๆ
|
ภาพที่ 66
|
|
ที่ต้องการให้แสดงผลเมื่อนำเมาส์วางเหนือปุ่มนี้
ในที่นี้ใช้คำว่า เมนูหลัก แล้วกด
Ctrl + B 2 ครั้งเพื่อ Break
apart ( Text กลายเป็น
Graphic)
|
|
14. เลือก กรอบภาพ Down ใน Layer
2 แล้วกด F6 เพื่อ Duplicateวัตถุจากกรอบภาพ Over
|
|
แล้วเลือก กรอบภาพ Hit กด F6 อีกครั้งเพื่อให้ข้อความปรากฎใน Event Hit
อีกด้วย
|
|
15. คลิกปุ่ม Scene ด้านล่างของ Timeline เพื่อกลับสู่ Stage ปกติ (เดิมเป็น Stage
ของ
ปุ่ม) ดังภาพที่ 67 ซึ่งจะไม่พบวัตถุอะไรบน Stage แต่ละมีปุ่มปรากฎใน
Library แทน
|
|
|
16. ลากปุ่มจาก Library วางบน Stage
|
ภาพที่ 67
|
|
17. ทดสอบใช้งาน ด้วยการ กด Ctrl + Enter ซึ่งถ้าหากปฏิบัติถูกต้อง ในภาวะปกติจะเห็นปุ่มสีเขียวว่างๆ
ไม่มีข้อความปรากฎ แต่เมื่อวางเมาส์เหนือปุ่มจะปรากฎคำว่า เมนูหลัก
18. เลือก ปุ่มที่สร้างไว้แล้วใน Library ด้วยเมาส์ขวา
แล้วคลิก Edit เพื่อปรับเปลี่ยน ปรับ
|
|
ปรุงหรือแก้ไขประการใดๆ เมื่อคลิกที่นี่
จะกลับเข้าสู่ Timeline ของปุ่มเหมือนเริ่ม
สร้างปุ่มอีกครั้ง ดังภาพ 68
19. เลือกกรอบภาพ Down แล้ว คลิก File >
Import แล้วเลือกไฟล์เสียง (*.wav หรือ *.mp3)
1 ไฟล์เพื่อให้เกิดเสียงเมื่อกดเมาส์
บนปุ่ม (ซึ่งในความเป็นจริงคือเสียงที่เราได้
บันทึกโดยใช้คุณสมบัติของ Sound Card และโปรแกรมบันทึกเสียงเช่น
Sound Recorder ในวินโดว์เอง
หรือโปรแกรมบันทึกเสียงอื่นๆ เช่น Goldwave, AudioREC ฯลฯ
ดังภาพที่ 69
|
ภาพที่ 68
|
|
ภาพที่ 69
|
|
ผลที่ปรากฎคือเกิด Icon ของเสียงใน Library ดังแสดงในภาพที่ 70
|
|
ภาพที่ 70
|
20. เลือกช่อง Sound ของ Properties เปลี่ยนค่าเป็นชื่อไฟล์ที่ Import ดังภาพที่ 71
|
|
ภาพที่ 71
|
|
21. ทดสอบการใช้งานของปุ่มด้วยการกด Ctrl + Enter ซึ่งถ้าหากปฏิบัติตามกิจกรรมถูกต้องเมื่อทดสอบใช้งาน
ขณะนำเมาส์วางเหนือจะปรากฎคำว่า เมนูหลัก และเมื่อ
กดเมาส์ จะเกิดเสียงตามที่บันทึกเอาไว้ (การใช้งานจริงเมื่อ Import ไฟล์เสียงแล้ว ไม่จำเป็นต้องเก็บไฟล์เสียงต้นฉบับไปใช้งานร่วมดังเช่น
ไฟล์ประเภท HTML
|
|
22. ฝึกสร้างปุ่มอื่นๆ เช่น ต่อไป
ย้อนกลับ ฯลฯ ตามความต้องการ
|
|
หมายเหตุ
วิธีการเดียวกันนี้สามารถนำไปใช้ประโยชน์ในการนำเสนอเนื้อหาสาระของ
สื่อการเรียนการสอนได้เป็นอย่างดี โดยการดัดแปลง กราฟิก
บางส่วนให้เป็นปุ่ม โดย Break Apart ภาพกราฟิก แล้วปฏิบัติดังนี้
1) ใช้ Lasso Tool กำหนดอาณาเขตบนกราฟิกที่ Break Apart แล้ว
2) Copy ส่วนดังกล่าวไปไว้ใน Layer ใหม่ โดยการวาง Object ที่ Copy ไปนี้
ใช้วางโดยใช้คำสั่ง Paste
in place เพื่อให้ Object วางตรงกับตำแหน่งต้นฉบับพอดี
3) ใช้คำสั่ง Convert to Symbol ( F8)
4) กำหนด Behavior เป็น Button
จะทำให้สามารถสร้างสื่อการเรียนการสอนที่ผู้ใช้มีปฏิสัมพันธ์กับเนื้อหาได้เป็นอย่างดี
|
|
|
|
|
|
|
|
บันทึกหลังปฏิบัติกิจกรรม................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
|
|
กิจกรรมที่ 10 ฝึกทักษะเบื้องต้น
การเชื่อมโยง (Link) และ การ Load Movie แบบต่างๆ
จุดประสงค์ 1.
เกิดทักษะเบื้องต้นการเชื่อมโยง (Link)
2. การ Load Movie แบบต่างๆ
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย (รูปแบบที่ 1)
|
|
สมมติว่าได้สร้างไฟล์นำเสนอเนื้อหาเรื่องสิ่งมีชีวิต จำนวน 2 ไฟล์
ไฟล์แรกชื่อ
p001.fla
ต้องการให้เชื่อมโยงสู่ไฟล์ที่ 2 ชื่อ p002.fla ซึ่งเป็นไฟล์ต้นฉบับ
(Source
Code) เมื่อใช้งานจริงจะต้องการให้เป็นไฟล์ที่ใช้งานผ่านเครือข่ายอินเทอร์เน็ตได้
ดังนั้นต้อง
Publish
ไฟล์เป็น *.swf และ *.html มีเงื่อนไขว่าต้องการให้คลิกที่ปุ่ม
Link บางปุ่มใน
ไฟล์ p001.swf แล้วโปรแกรมแสดงผลจะเปิดไฟล์
p002.swf
ในการเผยแพร่ผลงานผ่านเครือข่ายอินเทอร์เน็ตจริง ไฟล์ *.swf จะต้องเป็นไฟล์
ที่ต้องการทำงานร่วมกับไฟล์ *.html โดยไฟล์ *.swf เป็นองค์ประกอบอยู่ภายใน *.html
ดังนั้นการคลิกเมาส์ภายใต้เงื่อนไขข้างต้นจึงเป็นการคลิกเมาส์อยู่ภายใต้ไฟล์
*.html ด้วย
ขั้นตอนกิจกรรม ดังนี้
1. กด Ctrl + n เพื่อเปิดไฟล์ใหม่
2 ไฟล์ แล้วบันทึกชื่อไฟล์เป็น p001.fla และ p002.fla
2. สร้างปุ่มต่างๆ ด้วยวิธีการดังได้กล่าวมาแล้ว
3. ใส่คำสั่งในปุ่ม ต่อไป
ของไฟล์ p001.fla โดยคลิกที่ปุ่มที่ต้องการเชื่อมโยง
แล้วกด F9
เพื่อเปิดหน้าต่าง Action
สำหรับใส่คำสั่ง ดังภาพที่ 72
|
|
ภาพที่ 72
|
|
|
|
|
4. จะปรากฎหน้าต่าง Action เลือก Action > Browser/Network > GetURL ดังภาพที่ 73
|
|
|
|
ภาพที่ 73
|
|
5. ในหน้าต่าง Action Button พิมพ์ชื่อไฟล์เป้าหมายปลายทางที่ต้องการให้
Link ในช่อง
URL และในช่อง
Window ใส่รูปแบบของการเปิดไฟล์ใหม่
ในที่นี้ใช้ _self
เพื่อเปิดไฟล์ใหม่แทนไฟล์เดิมใน Browser หรืออาจใช้ตัวเลือก _Blank เพื่อเปิดหน้าต่างๆ
ของ Browser ใหม่
ซึ่งจะเกิดข้อความในช่อง Editor ดังภาพที่ 74
|
|
|
|
ภาพที่ 74
|
|
ความหมายของคำสั่งมีดังนี้
1) on
(Release) {
หมายถึงให้โปรแกรมทำงานตามคำสั่งใน Block เมื่อปล่อยเมาส์
2)
getURL(p002.html, _self) ;
หมายถึง ให้เปิดไฟล์ p002.html แทนที่ไฟล์เดิม
3) }
หมายถึงการปิด Block คำสั่ง
|
|
6. บันทึก
(save) ไฟล์แล้ว Publish เพื่อสร้างไฟล์
html , swf
ในชื่อเดิมซึ่งจะเกิดขึ้นเอง
ในช่วงใช้คำสั่ง Publish เพื่อใช้แสดงผล
7. ทดสอบการทำงานจริง
8. ทดสอบสร้าง Link
จากไฟล์ p002.html เพื่อเปิดไฟล์ p001.html
ด้วยวิธีการดังกล่าว
มาแล้ว
|
|
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย
(รูปแบบที่ 2)
เป็นรูปแบบการเชื่อมโยงแบบ Load Movie ซึ่งเป็นวิธีการที่แสดงผลได้ดีและรวดเร็วกว่ารูปแบบที่
1 นอกจากนี้ยังสามารถ Load Movie ได้หลาย Level ซึ่งหมายถึงสามารถแสดงผลการทำงานได้ครั้งละหลายๆ
ไฟล์พร้อมกัน วิธีการ ดังนี้
|
|
1. เปิดไฟล์ใหม่ด้วยการกด Ctrl + n จำนวน 2 ครั้ง เพื่อสร้างไฟล์จำนวน 2
ไฟล์เป็นอย่าง
น้อยเพื่อใช้ทดสอบการเชื่อมโยง
สมมติว่ามีชื่อไฟล์เป็น p001.fla ซึ่งเมื่อ Publish แล้ว
ได้ไฟล์ p001.swf และไฟล์ p001.html และไฟล์
p002.fla ซึ่งเมื่อ
Publish แล้วได้ไฟล์
p002.swf และไฟล์ p002.html
(หรือใช้ไฟล์ที่สร้างไว้เดิม แต่ทดลองใช้กับปุ่มใหม่)
2. จากปุ่มหนึ่งในไฟล์ p001.fla ต้องการเชื่อมโยงไปยังไฟล์ p002.swf ได้
จึงเขียนคำสั่ง
จากปุ่มนี้ โดยการเลือกปุ่มแล้วกด F9 เพื่อเปิดหน้าต่าง
Action
ดังภาพที่ 75
|
|
ภาพที่ 75
|
|
3. ในหน้าต่าง Action ใช้คำสั่ง Action > Browser/Network > LoadMovie ดังภาพที่
76
|
|
ภาพที่76
|
|
4. ใส่คำสั่งในช่องURL เป็น p002.swf Location เป็น Level 0 ดังภาพที่ 77
|
|
|
|
ภาพที่ 77
|
|
Level 0
หมายถึงแทนไฟล์เดิมที่กำลังแสดงผล หากเป็น Level ตามด้วยตัวเลข
|
|
อย่างอื่นซึ่งมีค่าตัวเลขมากกว่าจะสามารถบังการแสดงผลของไฟล์ที่มี
Level น้อยกว่า
คือคล้ายกับว่าไฟล์ที่มีค่า Level มากว่ากว่าอยู่ใกล้ผู้สังเกตมากกว่า
การเชื่อมโยงด้วยวิธีการนี้ จะสามารถแสดงผลไฟล์ *.swf ได้หลายไฟล์พร้อมๆ
กัน แต่ต้องระลึกเสมอว่าการให้แสดงผลพร้อมกันหลายหลายๆ ไฟล์
แต่ละไฟล์ต้องมีค่า Level
ต่างกันในช่วงเวลาที่มีการแสดงผลเดียวกัน เพราะใน Level เดียวกันไฟล์ที่
Load มาก่อนจะถูกไฟล์ที่
Load มาใหม่แทนที่
ในการใช้งานจริงอาจออกแบบให้มีLevel เหมือนกันก็ได้เพื่อให้ไฟล์ใหม่เข้าแทนที่ไฟล์เก่าซึ่งตรงกับจุดประสงค์การใช้งาน
|
|
5. บันทึกไฟล์แล้ว Publish
6. ทดสอบการทำงาน
7. ทดสอบสร้างการเชื่อมโยงไฟล์จากไฟล์ p002.swf มายังไฟล์ p001.swf
|
|
บันทึกหลังปฏิบัติกิจกรรม................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
|
|
การพัฒนาสื่อการเรียนการสอนด้วยโปรแกรม Macromedia Flash ปัจจุบันเป็น
ที่นิยมกันมากโดยนักพัฒนาเว็บเพจแบบปฏิสัมพันธ์ระดับมืออาชีพ หรือนักพัฒนาสื่อ
เพื่อจุดประสงค์ต่างๆ ที่ต้องการเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ต
และนับเป็นโปรแกรม
ประเภทเครื่องมือที่มีความสามารถกว้างขวาง และอ่อนตัวในการทำงานสูงมาก นอกจาก
นี้โปรแกรมลิขสิทธิ์ก็มีราคาไม่สูงเกินไป
หรือสามารถจัดได้ว่าราคาต่ำมากเมื่อเทียบกับ
ประสิทธิภาพในการใช้งาน จากประสบการณ์ที่ไปของผู้เขียนพบว่า
คนส่วนใหญ่เข้าใจว่าโปรแกรม Flash ไว้สำหรับทำภาพเคลื่อนไหว
แต่ยังมีน้อยคนนักที่คิดว่าเป็นโปรแกรมที่มี Action Script ที่เปรียบเสมือนภาษาโปรแกรมในตัว สามารถ Publish เป็น *.exe ที่สามารถประมวลผลตัวเองและใช้งานในเครื่องเดี่ยวโดยไม่ต้องมี
Browser เป็นตัวช่วย
จากการฝึกทักษะจากกิจกรรมดังกล่าว
สามารถนำไปประยุกต์ใช้เพื่องานสร้างสื่อผ่านเครือข่ายอินเทอร์เน็ตโดยตรงได้
นอกจากนี้จะเห็นว่า การที่จะเป็นสื่อการเรียนการสอนที่สมบูรณ์ได้
จำเป็นต้องมีแบบทดสอบ ซึ่งต้องใช้ Action Script ค่อนข้างมาก
จึงเป็นการไม่สะดวกสำหรับอาจารย์ผู้สอนที่จะต้องศึกษาเพื่อผลิตสื่อเพื่อใช้ในการเรียนการสอนผู้เขียนจึงได้สร้างเป็นไฟล์สำเร็จรูปเพื่อการสร้างแบบทดสอบโดยเฉพาะซึ่งอยู่ในเอกสารอีกฉบับหนึ่ง
ซึ่งได้แจกผู้รับการฝึกอบรมและได้เผยแพร่ผ่านเครือข่ายอินเทอร์เน็ตที่ http://www.chanmedia.com
ผู้เขียนหวังเป็นอย่างยิ่งว่าเอกสารการสร้างภาพเคลื่อนไหวด้วยโปรแกรม
Macromedia Flash นี้จะเป็นส่วนหนึ่งที่จะสร้างทักษะและความสามารถให้กับผู้ฝึกปฏิบัติ
เพื่อพัฒนาสื่อการเรียนการสอนผ่านเครือข่ายอินเทอร์เน็ตได้เป็นอย่างดี
|
|
|
|
|
|
|
|
|
|
|
|
|
|
