|
เอกสารประกอบการฝึกอบรม
การพัฒนาสื่อผ่านเครือข่ายอินเทอร์เน็ต
เรื่อง
การสร้างสื่อให้มีปฏิสัมพันธ์ด้วยโปรแกรม
Macromedia
flash
[เป็นภาพจาก Flash 5 แต่สามารถใช้งานได้กับ Flash รุ่นสูงกว่าได้]
************************
ความนำ
ในการพัฒนาสื่อสื่อมัลติมีเดียเพื่อการเรียนการสอนโดยทั่วไปเราจะพบว่า
ได้นำเอาคุณสมบัติการซ่อนตัว และแสดงตัวของวัตถุ
เพื่อทำให้บทเรียนมีปฏิสัมพันธ์บ่อยๆ ในโปรแกรม Macromedia
Flash 5
ก็สามารถสร้างสื่อให้มีปฏิสัมพันธ์ดังกล่าวนี้ได้
สมมติสถานการณ์ว่าเราเราต้องการสร้างสื่อคอมพิวเตอร์เพื่อนำเสนอความรู้เรื่องการขยายเสียง
ให้ผู้เรียนเข้าใจหลักการทางวิทยาศาสตร์ที่สามารถทำให้เสียงดังกว่าเสียงต้นแบบได้
โดยได้หาภาพ ไมโครโฟน เครื่องขยายเสียง และลำโพง เชื่อมต่อกัน
โดยใช้ภาพเป็นตัวนำเสนอ ดังแสดงในภาพที่ 1
ภาพที่ 1
จุดประสงค์
1) กำหนดบริเวณในเอกสาร Flash ให้มีปฏิสัมพันธ์โดยเมื่อนำเม้าส์วางเหนือบริเวณที่กำหนด
จะปรากฎคำอธิบายโดยย่อ
2) กำหนดบริเวณในเอกสาร Flash ให้มีปฏิสัมพันธ์โดยเมื่อคลิกเม้าส์เหนือบริเวณที่กำหนด
จะปรากฎคำอธิบายอย่างละเอียด/มีเสียงอธิบาย
สมมติสถานการณ์
ต้องการให้ผู้ใช้เลื่อนเม้าส์เหนือบริเวณหมายเลขใดๆ
แล้วเกิดคำบอกกล่าวว่าอุปกรณ์ชนิดนั้นๆ คืออะไร
และเมื่อคลิกเม้าส์คำอธิบายหน้าที่การทำงานของอุปกรณ์นั้นจะปรากฎขึ้น เราสามารถสร้างได้ดังนี้
ขั้นตอนในการสร้าง
1. เปิดโปรแกรม Macromedia Flash 5
2. สร้างภาพในโปรแกรมใดๆ เช่น Adobe photoshop
หรือโปรแกรม graphic อื่นๆแล้ว copy
ภาพเหล่านั้นมาวางใน stage
3. คลิกเม้าส์บนภาพที่วางบน stage จะเกิดสี่เหลี่ยมสีฟ้าล้อมรอบภาพดังกล่าว
ซึ่งหมายถึงการเลือกวัตถุ (ภาพ)นี้เป็นวัตถุเป้าหมาย
พร้อมรับคำสั่งมายังวัตถุนี้ต่อไป ดังแสดงในภาพที่ 2
ภาพที่ 2
4. กด Ctrl+B (Break Apart)
ครั้งที่ 1 จะปรากฎเส้นสีดำล้อมรอบวัตถุที่เลือก
ดังแสดงในภาพที่ 3
ภาพที่ 3
5. กด Ctrl+B (Break
Apart) อีกครั้งหนึ่งวัตถุนี้จะปรากฎเป็นจุดเล็กๆ
สีขาวเล็กๆโดยทั่วไป ดังแสดงในภาพที่ 4
ภาพที่ 4
ขณะนี้ภาพจะถูกแยกออก เป็นส่วนย่อยๆ พร้อมที่จะใช้ Lasso Tool ลากเพื่อตัดวัตถุนี้ออกเป็นบริเวณที่ต้องการ
|
6. นำ Lasso
Tool ขีดล้อมอาณาบริเวณที่ต้องการสร้างเป็น Hyperlink
เพื่อแสดงอาณาเขตในการกำหนดบริเวณ
ดังแสดงในภาพที่ 5
|
|
|
|
ภาพที่ 5
|
|
|
กด Ctrl + c เพื่อคัดลอก
(copy) บริเวณนี้เข้าหน่วยความจำ
แล้วกดปุ่ม New layer ดังแสดงในภาพที่ 6
|
|
ภาพที่ 6
|
|
|
7. จะเกิด Layer
เพิ่มขึ้นอีก 1 Layer คลิกเม้าส์ตรงเฟรมที่ 1 (หมายเลข 1) Layer ที่ 2 แล้วคลิกเม้าส์
ต่อที่ edit (หมายเลข
2) ดังแสดงในภาพที่ 7
|
|
|
|
ภาพที่ 7
|
|
ภาพที่ 8
|
จะเกิดเมนูย่อยของ edit
แล้วคลิกเม้าส์ต่อที่ Paste
in Place เพื่อให้ภาพที่วางอยู่ในตำแหน่ง
เดียวกับวัตถุต้นฉบับ
ผลที่เกิดขึ้นจะมองไม่เห็นการเปลี่ยนแปลงแต่อย่างใด
เพราะสิ่งที่ไปทับมีลักษณะเหมือนกับสิ่งที่ถูกทับ
และอยู่ในตำแหน่งเดียวกัน ดังแสดงในภาพที่ 8
|
|
8. คลิกเม้าส์ที่
Insert
> Convert to Symbol (เครื่องหมาย > หมายถึง"ในขั้นตอนต่อไปคลิกเม้าส์ที่
เมนู" สัญลักษณ์ใช้ความหมายนี้ ตลอดทั้งเอกสาร)
หรือกด F8 ดังแสดงในภาพที่ 9
|
|
|
|
จะเกิดหน้าต่าง Symbol Properties
คลิกเม้าส์ที่
radio button ในช่อง button แล้วคลิกต่อที่ OK ดังแสดงในภาพที่ 10
|
|
ภาพที่ 9
|
|
|
ภาพที่ 10
|
|
ตรงบริเวณที่วางภาพจะกลายเป็น button ซึ่งสามารถบรรจุคำสั่งของ Action
Script ได้ดังแสดงในภาพที่ 11
9. คลิกเม้าส์ที่อักษร A ภายในหน้าต่าง
Tool เพื่อพิมพ์ข้อความดังแสดงในภาพที่ 12
|
|
ภาพที่ 11
|
ภาพที่ 12
|
|
กด Ctrl+T เพื่อเปิด
Character Panel เพื่อปรับชนิดของตัวอักษร
(Font) ในที่นี้ปรับเป็น AngsanaUPC (หมายเลข
1) ซึ่งเป็น Font ภาษาไทย ขนาดของอักษร (หมายเลข
2) ระยะระหว่างตัวอักษร (หมายเลข 3 ) สีของตัวอักษร (หมายเลข
4) รูปแบบตัวอักษรเช่นตัวยก หรือตัวห้อย (หมายเลข5)
ดังแสดงในภาพที่ 13
|
 ภาพที่ 13
|
|
การปรับในช่องใดๆ หากมีปุ่ม drop down list ด้านขวามือ
เมื่อคลิกเม้าส์ที่ปุ่มนั้นจะเกิดรายการให้เลือก
หรืออาจพิมพ์ตัวอักษรหรือเลขที่ถูกต้องก็ได้
สำหรับช่องเลือกสี ก็สามารถคลิกเม้าส์สองครั้งติดกัน
(double click) ในช่องหมายเลข 4
แล้วเลือกสีจากถาดสีที่ปรากฏระยะระหว่างตัวอักษร (หมายเลข 3) หากเป็นเลข
0 แสดงว่าเป็นระยะปกติ หากตัวเลขเป็น -
แสดงว่าระยะชิดกว่าปกติ ? และหากเป็น +
แสดงว่าระยะห่างกว่าปกติ
โดยระยะชิดหรือระยะห่างขึ้นกับตัวเลขที่เราปรับ
ถ้าคลิกที่ปุ่มอักษร B เป็นการสั่งให้ตัวอักษรหนากว่าปกติ และ หากคลิกที่ปุ่ม I จะทำให้ตัวอักษรเอียง
??และหากต้องการกลับเป็นภาวะปกติให้คลิกให้คลิกที่ปุ่มเดิมอีกครั้งหนึ่ง
หากต้องการทำอักษรให้เป็นตัวยก (Superscript) หรือตัวห้อย (Subscript)
ก็สามารถเปลี่ยนได้ในช่องหมายเลข 5
10. เมื่อพิมพ์ข้อความเสร็จ แล้วคลิกเม้าส์ที่ Arrow Tool จะเกิดสี่เหลี่ยมสีฟ้าล้อมรอบอักษรดังกล่าว
ในที่นี้พิมพ์คำว่า "ลำโพง"
กดแป้นพิมพ์ F8
แล้วแปลงข้อความนี้ให้เป็น Movie Clip ซึ่งสังเกตได้จากมีเครื่องหมาย
+ ตรงกลางของวัตถุที่เราแปลงแล้ว ดำเนินการต่อด้วยกดแป้นพิมพ์
Ctrl + I (หรือคลิกเม้าส์ที่
Modify > Instance) จะเกิดหน้าต่าง Instance
จะพบว่าในช่อง Behavior ปรากฏคำว่า
Movie Clip แล้วพิมพ์ข้อความในช่อง Name เพื่อตั้งชื่อเป็นอะไรก็ได้
ในที่นี้ตั้งชื่อ spk1 ดังแสดงในภาพที่ 14
|
|
ภาพที่ 14
12. คลิกเม้าส์ที่เครื่องหมาย + คลิกเม้าส์ต่อที่ Action เลือกเมนู setProperty ดังแสดงในภาพที่ 16
|
11. คลิกเม้าส์ขวาบนข้อความ
"ลำโพง" แล้วเลือก Action เพื่อเขียน Action Script ดังแสดงในภาพที่ 15
ภาพที่ 15
|
|
ภาพที่ 16
|
ซึ่งจะเกิดหน้าต่าง
Object
Action ในช่อง Propertyเลือก
Visible (Visibility)
ดังแสดงในภาพที่
17
ภาพที่ 17
|
|
13. ในช่อง Taget พิมพ์ spk1 และในช่อง Value พิมพ์คำว่า true และคลิก Check
Box
ทั้งสองช่อง
ดังแสดงในภาพที่ 18
|
|
ภาพที่ 18
14. คลิกเม้าส์ใน Object Action ที่บรรทัดแรกซึ่งมีข้อความ On (Roller) {
จะเกิดช่อง Event ต่างๆ
ให้คลิกเม้าส์เลือกช่อง Roll Over เพียงช่องเดียว ดังแสดงในภาพที่ 19
|
|
ภาพที่ 19
|
|
คำสั่ง On(rollOver) หมายถึงจะแสดงผลคำสั่งภายในเครื่องหมายวงเล็บปีกกา
เมื่อนำเมาส์มาวางเหนือปุ่มนี้ สรุปได้ว่าเมื่อนำเม้าส์วางเหนือปุ่มที่เราใส่ Script นี้ Movie Clip ชื่อ spk1 ซึ่งมีข้อความว่า ลำโพง จะปรากฎให้เห็น
15. คลิกเม้าส์ที่บรรทัดสุดท้าย (บรรทัดซึ่งมีเครื่องหมาย
"}")
แล้วคลิกเม้าส์ที่เครื่องหมาย
+ เพื่อเพิ่ม Script ดังแสดงในภาพที่
20
|
|
ภาพที่ 20
|
|
16. ใช้กระบวนการในการเพิ่ม Script ดังที่ได้กล่าวมาแล้ว
โดยให้ช่อง Value มีค่าเป็น false
โปรดสังเกตค่าที่ปรากฏในตำแหน่งปลายลูกศร ของภาพที่ 21
ภาพที่ 21
|
|
จะเห็นข้อความในคำสั่งว่า setProperty (spk1,_visible, false)
ความหมายของคำสั่งคือ ให้ Movie Clip ชื่อ spk1
มีคุณสมบัติการมองเห็นเป็นเท็จ (มองไม่เห็น)
แต่คำสั่งนี้อยู่ในเหตุการณ์ของเม้าส์ที่เป็น On
release หมายถึงจะแสดงผลคำสั่งก็ต่อเมื่อการปล่อยเม้าส์เหนือปุ่มนี้
ซึ่งเป็นสิ่งที่เราไม่ต้องการ แต่เราต้องการให้แสดงผลเมื่อมีการวางเม้าส์เหนือปุ่มนี้ ดังนั้นเราจำเป็นต้องเปลี่ยนคำสั่ง
กำหนดในหัวข้อต่อไป
17. คลิกเม้าส์บรรทัดซึ่งแสดงข้อความ
on (release) { จะเกิดหน้าต่างของ
Event
ให้คลิกเลือกที่ช่อง
rollOut
จะทำให้ข้อความจาก on(release) เป็น
on (rollOver) ดังแสดงในภาพที่
22
|
|
|
|
|
ภาพที่ 22
ความหมายของคำสั่งคือ เมื่อนำเม้าส์ออกกจากปุ่มนี้แล้วจะแสดงผลคำสั่งในเครื่องหมายวงเล็บปีกกา
ซึ่งอยู่หลังคำสั่งนี้
ความหมายโดยรวมคือ เมื่อนำเม้าส์ออกจากปุ่มที่ใส่
Script นี้ Movie Clip ชื่อ spk1
ซึ่งแสดงข้อความว่า ลำโพง มีสมบัติการมองเห็นเป็นเท็จ (มองไม่เห็น)
18. คลิกเม้าส์ที่ Frame แรก
แล้วเลือก Action ดังแสดงในภาพที่ 23
|
|
|
|
ภาพที่ 23
19. เปลี่ยนข้อความใน Script ให้เป็น setProperty(spk1,_visible,false)
ซึ่งใช้วิธีการดังกล่าวมาแล้วข้างต้น ดังแสดงในภาพที่
24
ภาพที่ 24
ข้อความนี้เป็นคำสั่ง ให้เริ่มทำงานเมื่อโหลด Frame แรก
ทำให้ Movie Clip ชื่อ spk1
มีสมบัติการมองเห็นเป็นเท็จ (มองไม่เห็น)
ดังนั้นคำว่าลำโพงจะไม่ปรากฎให้เห็นขณะเริ่มต้นใช้งาน
การทดสอบการใช้งาน
กด Ctrl + Enter เพื่อทำสอบการทำงานเบื้องต้น
(ไม่ใช่ใช้งานจริง) จะพบว่าขณะเปิดโปรแกรม ข้อความว่า ลำโพง
ไม่ปรากฏให้เห็น และตัวชี้เม้าส์เป็นรูปลูกศร ดังแสดงในภาพที่ 25
ภาพที่ 25
|
|
|
|
เมื่อวางเม้าส์เหนือปุ่มซึ่งเราได้ใส่ Script จะพบว่าตัวชี้เม้าส์เป็นเป็นรูปมือ Hyperlink
และปรากฏคำว่า ลำโพง ขึ้นมาด้วย ดังแสดงในภาพที่ 26
|
|
ภาพที่ 26
|
|
|
|
|
|
การนำผลงานออกใช้จริง
1. คลิกเม้าส์ที่ File (หมายเลข 1) คลิกเม้าส์ต่อที่ Publish Settings ดังแสดงในภาพที่
27
จะเกิดหน้าต่าง publish
Settings ดังแสดงในภาพที่ 28
|
|
ภาพที่ 27
|
|
|
ภาพที่ 28
ตามคำสั่งนี้เราเลือกผลงานที่ต้องการเป็น shock wave flash (*.swf)
และ HTML ซึ่งเป็นไฟล์ภาษา HTML เพื่อส่งแฟ้มขึ้นเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ต
หรือถ้าต้องการให้แสดงผลเป็นไฟล์ที่ประมวลผลเองได้ (*.exe) ด้วย ท่านก็สามารถเลือกในช่อง Windows Projector (*.exe) แล้วคลิกที่ Publish ซึ่งผลที่ได้คือเกิดไฟล์ใหม่ที่มีชื่อตรงกับ
ไฟล์ *.fla (ไฟล์ต้นฉบับ
แต่มีส่วนขยายต่างกันออกไปตามที่ต้องการ
********************
|
|
