ลักษณะของงานนี้จะเป็นการสร้างข้อความวิ่งจากซ้ายไปขวา เราอาจจะพบข้อความลักษณะนี้ เช่น ติดไว้ที่ตึก หน้าร้าน ฯลฯ เป็นข้อความโฆษณาต่างๆ
1. เริ่มต้นสร้างไฟล์ใหม่ ขนาด 300 x 50 Pixels
2. สร้างเลเยอร์ไว้ 2 เลเยอร์
3. Layer 1 คลิกเฟรมที่ 1 แล้วพิมพ์คำว่า Macromedia Flash MX จัดตำแหน่งไว้ดังรูป
4. จัดการแปลงข้อความที่พิมพ์ ให้เป็น Symbol ให้เรียบร้อย
5. Layer 2 คลิกเฟรมที่ 1 แล้ววาดสี่เหลี่ยมที่ตำแหน่งดังภาพ ให้ลบด้านในสี่เหลี่ยมที่เป็น พื้นขาวดังภาพนั้นจะถูกลบ เจาะทะลุ โปร่งใส ไม่เช่นนั้นเมื่อกำหนดให้ข้อความวิ่งผ่านก็จะบังข้อความ
6. แทรกคีย์เฟรมที่เฟรมที่ 10 แล้วจัดคำว่า Macromedia Flash MX ในเฟรมที่ 10 นี้ไว้ด้าน ขวาสุดตามตัวอย่างด้วย
7. สร้าง Motion Tween ให้กับ Layer 1 เพื่อให้ข้อความเคลื่อนจากซ้ายไปขวา
8. ตอนนี้อาจทดสอบผลงานดูก่อนก็ได้ โดยกดปุ่ม Enter

9. การวาดภาพสี่เหลี่ยม ใน Layer 2 เฟรมที่ 1 อาจวาดเป็นส่วนๆ แล้วย้ายมาประกอบเข้า ด้วยกัน จะง่ายกว่าการวาดเป็นสี่เหลี่ยมภาพเดียวแล้วลบด้านใน

 

10. ให้ตรงกลางเป็นช่องโปร่ง ไม่เช่นนั้น ก็จะบังข้อความที่เคลื่อนที่ผ่านด้านใน
11. หรืออาจจะใช้การวาดสี่เหลี่ยมซ้อนกัน 2 ภาพ แล้วลบภาพด้านในออกก็ได้ วิธีนี้ง่ายกว่า
12. หรือไม่ก็วาดเป็นกล่อง ให้เหมือนกล่องไฟที่มีตัวหนังสือวิ่ง

Details

Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash

Hits: 1217

โปรแกรมควบคุมการเล่นไฟล์ Avi/Mpeg
เป็นการใช้โปรแกรม Flash สร้างปุ่มควบคุมการเล่นไฟล์ Avi หรือ Mpeg ซึ่งอาจเป็นภาพ ที่ถ่ายด้วยกล้องดิจิตอลหรือสร้างด้วยโปรแกรมต่างๆ เช่น Derector, 3D Studio เป็นต้น

1. เริ่มต้นสร้างงานใหม่ และกำหนดขนาดของงานให้เรียบร้อย ถ้าไฟล์ AVI หรือ Mpeg เป็นไฟล์ขนาด 320 x 240 Pixels ก็กำหนดขนาดของงานให้ใหญ่กว่านั้น เช่น 400 x 300 Pixels หรือ 640 x 480 Pixels เป็นต้น สำหรับภาพตัวอย่างนี้ จะคล้ายกับซีดีรอมสอนการใช้งานโปรแกรมที่วางขาย กันในท้องตลาด โดยผู้เขียนจับหน้าจอโปรแกรมที่ต้องการสอนเป็นไฟล์ AVI พร้อมอธิบายการใช้งาน ซึ่งได้จับหน้าจอที่ความละเอียด 640 x 480 Pixels
2. ตัวพื้นหลังจะเป็นจอทีวี แนะนำให้แสกนภาพทีวีหรือจอคอมพิวเตอร์มาแทนจะดีดูกว่าวาด เอาเองแบบนี้
3. ปุ่มควบคุมการเล่น เช่น ปุ่มหยุด ปุ่มเริ่มเล่น ปุ่มหยุดชั่วคราว เป็นต้น
4. โลโก้ของบริษัท ก็ควรจะมีในทุกๆ บทเรียน ให้จัดทำเป็น Symbol
5. หน้าจอแรกแนะนำชื่อวิชา ชื่อหัวข้อที่จะสอน
6. เมื่อคลิกปุ่ม Play จึงจะเริ่มต้นแสดงภาพวิดีโอ

 

7. สร้างเลเยอร์ไว้ 4 เลเยอร์ดังภาพ ดับเบิ้ลคลิกที่ชื่อเลเยอร์ พิมพ์ชื่อใหม่ตามตัวอย่าง
8. เลเยอร์ Monitor คลิกเฟรมที่ 1 แล้ววาดภาพสี่เหลี่ยมหรืออาจนำภาพจอคอมพิวเตอร์ ภาพจอทีวีมาเป็นภาพพื้นหลังก็ได้ เวลาแสดงภาพเคลื่อนไหวก็จะดูเหมือนเล่นผ่านหน้าจอจริงๆ
9. เลเยอร์ Button คลิกเฟรมที่ 1 แล้ววาดปุ่มดังตัวอย่าง อาจนำปุ่มสำเร็จรูปมาใช้งานก็ได้ จากตัวอย่างผู้เขียนได้จับหน้าจอโปรแกรม Winamp แล้วนำปุ่มมาตัดด้วยโปรแกรม Paint ก่อนจะ นำมาใช้งานอีกที ทุกปุ่มจะแยกกัน มี 6 ปุ่ม ดังนี้
9.1 ปุ่มเลื่อนไปยังเฟรมแรกสุดหรือตอนต้นของวิดีโอ
9.2 ปุ่มเพลย์เริ่มเล่นไฟล์วิดีโอ
9.3 ปุ่มหยุดการเล่น
9.4 ปุ่มไปยังเฟรมก่อนหน้านั้น
9.5 ปุ่มไปยังเฟรมถัดไป
9.6 ปุ่มเลื่อนไปยังเฟรมสุดท้ายหรือตอนท้ายสุดของวิดีโอ
10. แต่ละปุ่ม ให้สร้างเป็น Symbol โดยคลิกเลือกชนิดเป็น Button
11. เลเยอร์ Lesson คลิกเฟรมที่ 1 แล้ววาดรูปสี่เหลี่ยมดังภาพ โดยให้มีขนาดพอดีกับจอ ในเลเยอร์ Monitor พร้อมกับพิมพ์ข้อความดังตัวอย่าง ... ในส่วนนี้จะเป็นส่วนแสดงหัวข้อ รอให้ผู้ใช้ คลิกปุ่มใดๆ เพื่อเลือกการทำงาน
12. เฟรมที่ 1 นี้ ให้กำหนด Action = Stop ไว้ด้วย เพื่อให้หยุดรอให้ผู้ใช้คลิกปุ่มใดๆ เพื่อ เลือกการทำงาน ถ้าไม่ใส่ Action = Stop ไว้ โปรแกรมก็จะเริ่มเล่นไฟล์วิดีโอทันทีเฟรมที่ใส่ Action ไว้จะมีสัญลักษณ์ตัว a ปรากฏอยู่
13. คลิกเฟรมที่ 2 ของเลเยอร์ Lesson แทรกคีย์เฟรม ด้วยคำสั่ง Insert Keyframe แล้ว Import ไฟล์ Avi หรือ Mpg เข้ามาด้วย คำสั่ง File>>Import>>Import to Stage

14. การใส่ค่า Action = Stop ให้คลิกเฟรม 1 ของเลเยอร์ lesson เพื่อเลือกเฟรมก่อน
15. คลิกปุ่ม Edit the action script for this object หรือกดปุ่ม F9 ที่แป้นพิมพ์
16. คลิกเลือก Expert Mode แล้วคลิกและพิมพ์ stop ();
17. พิมพ์เสร็จแล้ว ก็คลิกชื่อแท็ป Action เพื่อย่อไว้ ไม่ให้เกะกะหน้าจอ

18. เลื่อนไปยังเฟรมสุดท้าย ความยาวความใหญ่ของไฟล์ Avi หรือ Mpg ของเฟรมที่ 2 ใน เลเยอร์ Lesson จะเป็นตัวกำหนดความสั้นยาว ให้รู้ว่าเฟรมสุดท้ายอยู่ที่ตำแหน่งใด จากตัวอย่างก็คือ เฟรมที่ 279
19. กำหนดขอบเขตของงานทุกเลเยอร์ให้เท่ากัน โดยคลิกเฟรมที่ 279 ของเลเยอร์ Monitor แล้วแทรกเฟรมด้วคำสั่ง Insert Frame เลเยอร์ Button เฟรมที่ 279 ก็กำหนดค่าเหมือนกัน
20. เลเยอร์ Stop คลิกเฟรมที่ 279 แล้วแทรกคีย์เฟรมด้วยคำสั่ง ู Insert Keyframe ให้ใส่ Action = Stop ไว้ด้วย เพื่อเป็นการกำหนดขอบเขตการแสดงไฟล์วิดีโอว่าอยู่ในขอบเขตเฟรมที่ 1 ถึงเฟรมที่ 279 เท่านั้น ไม่เช่นนั้นก็จะเลื่อนไปเฟรมอื่น ทำให้เกิดความผิดพลาดได้ ซึ่งเมื่อแสดงวิดีโอ ถึงเฟรมสุดท้ายคือเฟรมที่ 279 แล้วก็จะหยุด เพื่อรอให้ผู้ใช้คลิกปุ่มอื่นๆ

21. กำหนดการทำงานของปุ่มต่างๆ ในเลเยอร์ Button จะกำหนดค่าคล้ายกัน โดยคลิกที่ปุ่ม เพื่อเลือกปุ่มที่ต้องการก่อน
22. คลิกปุ่ม Edit the action script for this object หรือง่ายที่สุดในโลก ก็กด F9 ที่แป้น พิมพ์ ปุ่มอยู่ด้านบนสุดของแป้น เรียงกันไป F1 - F12
23. คลิกและพิมพ์ค่าต่างๆ

23.1 ปุ่มเลื่อนไปยังเฟรมแรกสุดหรือตอนต้นของวิดีโอ ให้พิมพ์
on (release) {
gotoAndStop(1);
}
*** เลข 1 ก็คือเฟรมแรกสุดของเลเยอร์ lesson
23.2 ปุ่มเพลย์เริ่มเล่นไฟล์วิดีโอ ให้พิมพ์
on (release) {
play();
}
23.3 ปุ่มหยุดการเล่น ให้พิมพ์
on (release) {
stop();
}
23.4 ปุ่มไปยังเฟรมถัดไป ให้พิมพ์
on (release) {
prevFrame();
}
23.5 ปุ่มไปยังเฟรมก่อนหน้านั้น ให้พิมพ์
on (release) {
nextFrame();
}
23.6 ปุ่มเลื่อนไปยังเฟรมสุดท้ายหรือตอนท้ายสุดของวิดีโอ ให้พิมพ์
on (release) {
gotoAndStop(279);
}
*** ตัวเลข 279 เป็นเฟรมสุดท้ายก็คือเฟรมที่ 279 ของเลเยอร์ lesson
24. บันทึกงานเก็บไว้ และทดสอบการทำงาน โดยกดปุ่ม Ctrl + Enter
25. นอกจากไฟล์ Avi หรือ Mpg แล้ว ภาพเคลื่อนไหวที่สร้างใน Flash เราก็สามารถสร้าง ปุ่มควบคุมการเคลื่อนไหวได้เช่นกัน ให้ก็อปปี้ไฟล์งานด้วยคำสั่ง File>>Save As.. แล้วบันทึกเป็นชื่อ ไฟล์ใหม่
26. คราวนี้ก็ดัดแปลงงานกันเลย เริ่มจากการลบเฟรมของเลเยอร์ lesson ออกไปโดยคลิก ที่เฟรม 1 กดปุ่ม Shift ค้างไว้แล้วคลิกเฟรมสุดท้ายคือเฟรม 279
27. ชี้ลูกศรที่เฟรมที่ถูกเลือกเป็นแถบดำ กดปุ่มขวาของเมาส์ค้างไว้เรียกคำสั่งลัดแล้วคลิก คำสั่ง Remove Frames
28. เลเยอร์ stop, button และ monitor ก็ลบเช่นกัน โดยลบตั้งแต่เฟรม 31 - เฟรม 279 ยกเว้นเลเยอร์ stop ลบเฟรม 30 - เฟรม278
29. แทรกคีย์เฟรมที่เฟรม 1 ของเลเยอร์ lesson ด้วยคำสั่ง Insert Keyframe แล้วก็สร้าง ภาพเคลื่อนไหวง่ายๆ เลยก็ภาพเคลื่อนไหวแบบ Motion Tween ลูกบอลกระเด้งไปมา
30. การทำงานของปุ่ม มีที่ต้องแก้ไขปุ่มเดียวก็คือ ปุ่มเลื่อนไปยังเฟรมสุดท้ายหรือตอนท้าย สุดของการเคลื่อนไหว ให้แก้ตัวเลขจาก 279 เป็น 30 เพราะตอนนี้เรามีแค่ 30 เฟรมเท่านั้น
on (release) {
gotoAndStop(30);
}
31. ส่วนเลเยอร์ stop เฟรมที่ 1 ก็ใส่ action = Stop ไว้ด้วยเช่นกัน เพื่อใม่ให้เริ่มเล่นไฟล์ ทันที ต้องรอให้ผู้ใช้คลิกปุ่ม Play เสียก่อน
32. เสร็จแล้วก็ทดสอบการทำงานโดยกดปุ่ม Ctrl + Enter ก็จะพบว่า เราสามารถควบคุม การเคลื่อนที่ของลูกบอลได้ โดยคลิกปุ่มควบคุมที่ได้สร้างไว้
33. บันทึกงานเก็บไว้

Details

Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash

Hits: 936

ลักษณะของผลงาน
เป็นการสร้างอัลบัมภาพด้วยโปรแกรม Flash ตัวโปรแกรมจะมีส่วนประกอบดังนี้
1. เมนูหลักเป็นหน้าจอหลัก มีปุ่ม Slide Show ไว้สำหรับการคลิกเพื่อดูภาพแบบสไลด์โชว และปุ่ม View Picture สำหรับการดูภาพไปทีละภาพ
2. หน้าจอ View Photo จะมีปุ่ม Previous และ Next ให้เลื่อนภาพได้ นอกจากนี้ก็ยังมีปุ่ม Menu ให้คลิกเพื่อกลับหน้าจอหลักได้
3. ส่วนสไลด์โชว์ก็จะแสดงภาพไปทีละภาพ มีปุ่ม Menu เช่นกัน

4. ลักษณะการสร้างผลงานนั้นจะใช้ Scene ใช้ซีนเป็นตัวแยกเก็บข้อมูลแต่ละส่วน เมื่อเทียบ กับงานที่ผ่านๆ มาจะมีเพียงซีนเดียว ก็คือ Scene 1 แต่งานนี้มี 3 ซีน ในขณะนั้นถ้าไม่ปรากฏเครื่อง มือ Scene บนหน้าจอก็คลิกเมนู Windows>>Design Panels แล้วคลิกติ๊กถูกเครื่องมือ Scene
5. หน้าตาเครื่องมือ Scene จะมี 3 ปุ่ม
- Duplicate scene สำหรับก็อปปี้ซีน
- Add scene สร้างซีนเพิ่ม
- Delete scene ลบซีนออกไป โดยคลิกชื่อซีนที่ต้องการแล้วคลิกปุ่มนี้
6. การเปลี่ยนชื่อซีน ก็ดับเบิ้ลคลิกที่ชื่อซีน พิมพ์ชื่อใหม่ แล้วกดปุ่ม Enter
7. ส่วนการเลือกเพื่อจะทำงานกับซีนใดๆ ก็คลิกชื่อซีนที่ต้องการได้เลย

8. ส่วนประกอบของซีนในงานนี้ Scene 1 เป็น Main menu หน้าจอหลัก
9. Scene 2 เป็น Slide Show ส่วนแสดงภาพแบบสไลด์โชว์
10. Scene 3 เป็น View Photo สำหรับการคลิกดูทีละภาพ
11. ซีน 1 มีแค่เฟรมเดียวเท่านั้น
12. ซีน 2 เป็นภาพสไลด์โชว์ มีเยอะหน่อย
13. ซีน 3 ก็นิดเดียว เพราะผู้เขียนนำมาแสดงเพียง 5 ภาพ 5 เฟรมเท่านั้นเอง

---

การสร้าง Scene 1 Main Menu
เป็นสร้างหน้าจอหลักหรือเมนูให้เลือกการทำงาน
1. เริ่มต้นสร้างงานใหม่กำหนดขนาดงานตามต้องการ โดยเปิดเครื่องมือ Scene ขึ้นมาก่อน แล้วก็สร้าง Scene 1, Scene 2 และ Scene 3 ไว้ก่อนเลย โดยคลิกปุ่ม Add scene
2. Scene 1 นี้มีเฟรมเดียวเท่านั้น และจะวางทุกอย่างไว้ในเฟรมเดียว
3. ให้นำเส้นไกด์ไลน์จากไม้บรรทัดมาวางเป็นแนวไว้ เพื่อความง่ายในการจัดการ
4. ปุ่มก็ใช้แบบง่ายๆ วาดวงกลมระบายสีแบบ Radial แล้วก็แปลงเป็น Symbol เลือกชนิด เป็น Button
5. ต้องการใช้งานกี่ปุ่ม ก็ลากจากไลบรารีมาวางตามจำนวนที่ต้องการ ไม่ต้องไปสร้างปุ่มให้ มากมาย ขนาดไฟล์จะใหญ่เกินไป
6. ภาพก็นำเข้ามาด้วยคำสั่ง File>>Import>>Import to Stage
7. ข้อควม My Photo Album ก็ใช้เครื่องมือพิมพ์ข้อความ พิมพ์ลงไปได้เลย
8. ในเฟรม 1 นี้เราก็ใส่ Action = Stop ไว้ด้วย เพื่อไม่ให้มีการเลื่อนเฟรมไปยัง Scene 2 ให้หยุดรออยู่ตรงนี้ ไม่ขยับไปไหน จนกว่าผู้ใช้จะคลิกปุ่มใดๆ

9. ปุ่ม Slide Show ให้คลิกที่ปุ่มวงกลม แล้วก็ใส่ Action ดังนี้ กด F9 แล้วพิมพ์
on (release) {
gotoAndPlay("Scene 2 Slide Show", 1);
}
10. ส่วนปุ่ม View Photo ให้คลิกที่ปุ่มวงกลม แล้วพิมพ์ Action ดังนี้
on (release) {
gotoAndPlay("Scene 3 View Photo", 1);
}

---

การสร้าง Scene 2
เป็นการสร้างสไลด์โชว์เพื่อแสดงภาพทีละภาพ
1. คลิกชื่อซีน ก็คือ Scene 2 Slide Show
2. วิธีสร้างก็ก็อปปี้ตัวอย่างงาน Slide Show ก่อนหน้านี้มาใช้ได้เลย แสดงภาพไปทีละภาพ ใช้ Alpha แสดงภาพให้ค่อยๆ ปรากฏ และค่อยๆ หายไป
3. แต่สิ่งสำคัญที่สุดก็คือ ต้องสร้างเลเยอร์ไว้บนสุดหนึ่งเลเยอร์ อาจตั้งชื่อว่า Stop ซึ่งจะ ใส่ Action = Stop ไว้ที่เฟรมสุดท้าย เมื่อแสดงภาพถึงเฟรมสุดท้ายแล้วก็จะหยุดและรอให้ผู้ใช้คลิก ปุ่ม Menu เพื่อกลับเมนูหลัก ถ้าไม่ใส่ Action = Stop ไว้ก็จะกระโดดไปยัง Scene 3 เลย
4. ปุ่มวงกลม Menu ก็ลากจากไลบรารีมาวางได้เลย ไม่ต้องสร้าง Symbol ใหม่แต่อย่างใด ปุ่มเดียว ใช้ได้ทั้งโปรแกรม
5. การวางปุ่มบนเลเยอร์ ให้สร้างปุ่มไว้ที่เลเยอร์ที่อยู่ถัดจากเลเยอร์ที่ใส่ Action = Stop ไว้ และในเลเยอร์นี้ก็เก็บปุ่มอย่างเดียวเท่านั้น หรือเก็บภาพใดๆ ก็ได้ที่ต้องการให้ปรากฏบนหน้าจอตลอด เวลา เช่น ถ้า Layer 5 เป็นเลเยอร์ที่ใส่ Action = Stop ใน Layer 4 ก็วางปุ่มไว้บนเลเยอร์นี้
6. ที่เฟรมสุดท้ายของเลเยอร์ที่วางปุ่มไว้ ก็ต้องแทรกเฟรมด้วยคำสั่ง Insert Frame ไว้ด้วย ไม่เช่นนั้น เล่นๆ ไปปุ่มก็หาย ไม่มีปุ่มให้คลิก จากตัวอย่าง Layer 2 เป็นเลเยอร์ที่วางปุ่มไว้
7. การกำหนดการทำงานของปุ่ม ก็คลิกที่ปุ่ม เพื่อเลือกก่อน แล้วกด F9 ที่แป้นพิมพ์ แล้วก็ พิมพ์ค่าดังนี้
on (release) {
gotoAndPlay("Scene 1 Main Menu", 1);
}
8. ก็เป็นอันเสร็จสิ้นการสร้าง Scene 2 สรุปอีกที การสร้างก็ไม่ยากเลเยอร์บนสุดเป็นเลเยอร์ ที่ใส่ Action = Stop ไว้ เลเยอร์ถัดมาก็เป็นเลเยอร์ที่วางปุ่มหรือภาพที่ต้องการให้ปรากฏอยู่ตลอด เวลาที่แสดงสไลด์ เลเยอร์อื่นๆ ที่อยู่ล่างสุด ก็วางภาพที่สร้างเป็นสไลด์โชว์

---

การสร้าง Scene 3
1. คลิกเลือก Scene 3
2. สร้าง 2 เลเยอร์ดังภาพ ก็คือ Layer1 และ Layer2
3. ให้นำเส้นไกด์ไลน์จากไม้บรรทัดมาวางเพื่อความง่ายในการจัดตำแหน่ง
4. Layer 2 เฟรมที่ 2 ให้แทรกคีย์เฟรมก่อนแล้ววางภาพปุ่มลงไป โดยนำจากไลบรารีมาวาง ส่วนเฟรมที่ 1 ปล่อยไว้ว่างๆ แบบนั้นก่อน ยังไม่ต้องทำอะไร
5. Layer 2 นี้ให้แทรกเฟรมปิดท้ายไว้ด้วย จากตัวอย่างภาพที่สามารถคลิกดูได้ก็คือภาพใน เลเยอร์ 1 มี 7 เฟรม แต่เฟรมที่ 7 จะใส่ Action ไม่ได้วางภาพ ภาพถูกจัดวางไว้ในเฟรมที่ 2 - 6 เท่านั้น ในเลเยอร์ 2 ก็ปิดท้ายเฟรมด้วยคำสั่ง Insert Frame ที่เฟรม 6 เช่นกัน โดยชี้ที่เฟรม 6 กด ปุ่มขวาของเมาส์ แล้วคลิกคำสั่ง Insert Frame
6. Layer 1 เฟรมที่ 2 - 6 ให้แทรกคีย์เฟรมให้กับเฟรม 2 ก่อน แล้วนำภาพเข้ามา ด้วยคำสั่ง File>>Import>>Import to Stage เมื่อปรากฏกรอบข้อความถามว่าจะนำภาพเข้ามาทั้งหมดหรือไม่ ก็นำเข้ามาทั้งหมดเลยมีกี่ภาพ โปรแกรม ก็จะสร้างคีย์เฟรมแยกเก็บแต่ละภาพไว้ จากตัวอย่างมี 5 ภาพ 5 เฟรม ภาพจะอยู่เฟรมที่ 2-6

7. เฟรมของ Layer 1 ทั้ง 5 เฟรม ก็คือเฟรมที่ 2-6 ที่ได้วางภาพไว้ ให้ใส่ Action = Stop ไว้ทุกเฟรมด้วย ไม่เช่นนั้นก็จะเลื่อนภาพจากเฟรม 1 ไปเฟรม 7 ทันทีเลย ต้องใส่ไว้ เพื่อให้แสดงภาพ ในเฟรมนั้นๆ แล้วหยุดรอจนกว่าผู้ใช้จะคลิกปุ่ม Previous หรือ Next จึงจะเลื่อนไปแสดงภาพในเฟรม ถัดไป
8. Layer 1 เฟรมที่ 1 ให้คลิกที่เฟรมนี้ แล้วกด F9 จากนั้นพิมพ์
gotoAndStop(6);
9. Layer 1 เฟรมที่ 7 ให้คลิกที่เฟรมนี้ แล้วกด F9 จากนั้นพิมพ์
gotoAndStop(2); ท้าย ถ้าคลิกปุ่ม Next อีก ก็จะกระโดดไปซีนอื่น ยุ่งไปกันหมด
11. ตอนนี้ก็สร้างครบทั้ง 3 ซีนแล้วให้ทดสอบการทำงานของโปรแกรม แล้วก็บันทึกไว้

Details

Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash

Hits: 4097

สร้างโปรแกรมสอนเล่นกีต้าร์ด้วย Flash MX 2004
การสร้างงานมัลติมิเดียอีกรูปแบบหนึ่งที่โปรแกรม Flash สามารถทำได้ ก็คือ การสร้างงาน CAI หรือโปรแกรมช่วยส่อน ซึ่งจะนิยมสร้างโปรแกรมช่วยสอนให้ผู้ใช้เรียนผ่านอินเตอร์เน็ต แต่เราก็ สามารถประยุกต์ใช้งานในรูปแบบซีดีรอมได้ คล้ายกับแผ่นซีดีสอนที่วางขายกันอยู่ตามท้องตลาด เช่น โปรแกรมสอนการใช้งานคอมพิวเตอร์หรือสอนงานประดิษฐ์ สอนดนตรี ฯลฯ

---

ลักษณะโดยรวมของงาน
ก่อนจะสร้างงานในลักษณะนี้ เรามาดูลักษณะงานโดยรวมๆ กันก่อนว่าเป็นอย่างไรบ้าง มีส่วน ประกอบอะไรบ้าง
1. ส่วนนำหรือไตเติ้ล เมื่อใส่แผ่นซีดีเข้าไปในช่องอ่าน โปรแกรมก็จะทำงาน และเข้าสู่หน้าจอ โปรแกรมทันที ถ้านึกไม่ออกก็เปิดทีวี ดูรายการต่างๆ ก็จะเห็นส่วนนำก่อนเข้ารายการ ที่จะมีโลโก้ชื่อ รายการ ชื่อผู้ผลิต ฯลฯ แสดงขึ้นมาก่อน แล้วจึงเข้าสู่รายการหลัก
2. เมื่อส่วนไตเติ้ลจบลงก็จะมีปุ่ม Enter ให้ผู้ใช้คลิกเพื่อเข้าโปรแกรม
3. เมื่อคลิกปุ่ม Enter ก็จะเข้าเมนูหลักที่มีหัวข้อให้เลือกการทำงาน
3.1 หัวข้อที่ต้องการศึกษา คลิกหัวข้อที่ต้องการได้เลย
3.2 ปุ่ม Help อธิบายวิธีใช้งานโปรแกรม
3.3 ปุ่ม About อธิบายเกี่ยวกับผู้สร้างโปรแกรม
3.4 ปุ่ม Exit ออกจากโปรแกรม
4. ลักษณะการนำเสนอ อาจใช้ข้อความให้ผู้ใช้อ่านเองหรือมีเสียงบรรยายประกอบภาพ
5. บางหัวข้ออาจใช้ภาพเคลื่อนไหวพร้อมเสียงบรรยายประกอบ ซึ่งอาจถ่ายภาพด้วยกล้อง ดิจิตอลหรือใช้โปรแกรมจับหน้าจอคอมพิวเตอร์ มีปุ่มควบคุม ปุ่มเพลย์ ปุ่มหยุดเริ่มต้นสร้างผลงาน

ในการสร้างผลงานลักษณะนี้ อาจเริ่มสร้างไปตามลำดับ ดังนี้

---

การเตรียมข้อมูล
เป็นการเตรียมข้อมูลที่จำเป็นต้องใช้
1. ควรสร้างโฟลเดอร์ เพื่อเก็บไฟล์งาน แยกไว้ให้เป็นระเบียบ เช่น guitar
2. ไฟล์ประเภทภาพเคลื่อนไหวประกอบเสียงบรรยายแบบ Avi หรือ Mpg ไฟล์เสียง ไฟล์ ภาพประกอบ ก็ควรก็อปปี้มาไว้ในโฟลเดอร์เดียวกันให้หมด เพื่อความสะดวกในการเรียกใช้

---

การออกแบบหน้าจอโปรแกรม
หน้าจอโปรแกรมจะดูดี ถ้าตกแต่งด้วยโปรแกรมตกแต่งภาพ ที่นิยมใช้กันมากที่สุดก็คือตก แต่งภาพ สร้างเมนูสร้างส่วนต่างๆ ของโปรแกรมด้วย Photoshop แล้วนำภาพที่ได้มาใช้งานอีกที
ตัวอย่างการออกแบบหน้าจอโปรแกรมด้วย Photoshop
เป็นลักษณะการออกแบบหน้าจอโปรแกรมประเภท CAI สำหรับหลายๆ ท่าน ที่เป็นครู อาจารย์ หรือผู้ที่ต้องการสร้างงานนำเสนอข้อมูล
1. เริ่มต้นสร้างงานใหม่ ด้วยคำสั่ง File>>New กำหนดขนาดของงาน แล้วคลิก OK เช่น
- Width = 640, Height = 480 pixels หรือ อาจมากกว่านี้ W=800 และ H=600
- Resolution = 72 pixels/inch, Mode RGB Color, Contents = white

 

 

2. ระบายสีพื้นตามต้องการ โดยคลิกเลือกสี แล้วกด Alt+Delete
3. สร้างเลเยอร์ใหม่ ก็คือ Layer1
4. ใช้เครื่องมือมาร์คี เลือกภาพตามตัวอย่าง เป็นสี่เหลี่ยมเส้นประ
5. คลิกเลือกสีในจานสี แล้วระบายลงไปด้วยการกดปุ่ม Alt+Delete
6. ด้านล่างก็ปฏิบัติคล้ายๆ กัน เลือกด้วยเครื่องมือมาร์คี แล้วระบายสีลงไป

7. ถ้ายังมีเส้นประปรากฏอยู่ก็ยกเลิกโดยกด Ctrl+D ทำให้นูนด้วยคำสั่ง Layer>>Layer Style>>Bevel and Emboss
8. ผลงานที่ได้

9. คลิกเลือกเครื่องมือไทพ์ เลือกแบบตัวหนังสือ ขนาด ลักษณะตัวหนา เอียงตามต้องการ แล้ว พิมพ์ข้อความ Multimedia Photo Album
10. ใช้เครื่องมือ Polygon วาดภาพสามเหลี่ยมดังตัวอย่าง ระบายสีตามต้องการ
11. เสร็จแล้วก็บันทึกงานเก็บไว้ โดยคำสั่ง File>>Save As เลือกชนิดไฟล์เป็น Bmp
12. เปิดไฟล์ภาพที่ต้องการนำมาไว้ในอัลบั้ม อาจเป็นภาพที่ถ่ายด้วยกล้องดิจิตอล แล้วคลิกเมนู Image>>Image Size
13. กำหนดค่า Width = 420 แล้วคลิก OK
14. บันทึกเป็นไฟล์ภาพแบบ Bmp โดยคลิกเมนู File>>Save As
15. เมื่อนำไปใช้งานจริง ก็จะได้ภาพคล้ายตัวอย่าง พื้นหลังจะใช้ขนาด 640 x 480 ส่วนภาพด้าน บนจะใช้ขนาด 420 จึงสามารถ แสดงบนพื้นหลังได้พอดี

การนำภาพไปใช้งาน
หลังจากออกแบบเสร็จแล้ว ก็แปลงเป็นไฟล์แบบ bmp เพื่อนำไปใช้งานใน Flash อีกที
1. คลิกเมนู File>Save As...
2. คลิกเลือกที่เก็บ
3. คลิกและพิมพ์ชื่อไฟล์
4. คลิกเลือกชนิดของไฟล์เป็นแบบ Bmp
5. คลิกปุ่ม Save
6. คลิกปุ่ม Yes

---

การสร้างข้อมูลที่เป็นภาพเคลื่อนไหว
การสร้างภาพเคลื่อนไหวพร้อมเสียงบรรยายประกอบ สามารถทำได้หลายวิธี ซึ่งอาจแยกเป็น 2 ลักษณะใหญ่ๆ ดังนี้
1. สร้างภาพเคลื่อนไหวพร้อมเสียงด้วยการใช้กล้องดิจิตอลหรือกล้องถ่ายวิดีโอ เป็นวิธีที่ง่าย และสะดวกมาก เหมาะสำหรับสร้างบทเรียนช่วยสอน ที่อธิบายขั้นตอนการทำงานต่างๆ เช่น ขั้นตอน การผลิต สอนการใช้เครื่องมือ สอนวิธีเล่นเครื่องดนตรี เป็นต้น ไฟล์ที่ได้จะเป็นไฟล์แบบ Avi หรือ Mpg
2. สร้างภาพเคลื่อนไหวด้วยโปรแกรมจับหน้าจอคอมพิวเตอร์ เหมาะสำหรับผู้ที่ต้องการทำ ซีดีสอนการใช้โปรแกรมคอมพิวเตอร์ คล้ายกันกับซีดีสอนที่วางขายในท้องตลาดโปรแกรมจับภาพก็ มีให้เลือกใช้หลายโปรแกรมเช่น Camtasia, Hypercam, Wincam เป็นต้น

 

---

เริ่มต้นสร้างงานใน Flash
เมื่อเตรียมข้อมูลพร้อมแล้ว ก็จะเริ่มต้นสร้างผลงานในโปรแกรม Flash
สร้างส่วนนำหรือไตเติ้ลเข้าโปรแกรม
เป็นส่วนบทนำ ผู้เขียนจะใช้การนำเสนอแบบง่ายๆ ส่วนใครที่มีไอเดียดีๆ ก็บรรเลงกันได้เต็ม ที่ จากตัวอย่าง จะใช้การเลื่อนข้อความจากซ้ายเข้ามา ส่วนปุ่มก็ลอยจากด้านบนลงล่าง
1. เริ่มต้นสร้างงานใหม่ กำหนดขนาดของงานตามต้องการ ในที่นี้จะสร้างที่ขนาด 320 x 240 Pixels เท่านั้น แต่การใช้งานจริงส่วนใหญ่จะมากกว่านี้ เช่น 800 x 600 Pixels
2. ในไฟล์ title นี้จะมีทั้งหมด 6 Layers 20 เฟรม
3. Layer 6 บนสุด ให้แทรกคีย์เฟรมที่เฟรม 20 แล้วใส่ Action = Stop ไว้ด้วย
4. Layer 5 นำไฟล์เสียงเข้ามา จะมีหรือไม่มีก็ได้ สำหรับเลเยอร์นี้ แต่ก็ควรจะมีเสียง จะช่วย ให้ผลงานดูน่าสนใจมากกว่า
5. Layer 4 ให้แทรกคีย์เฟรมที่เฟรม 10 แล้ววาดปุ่ม Enter ไว้ด้านบนนอกเสตจ
6. Layer 1 คลิกเฟรมที่ 1 นำภาพกีต้าร์เข้ามาวาง โดยในเฟรมที่ 20 ให้ปิดท้ายด้วยคำสั่ง Insert Frame (ชี้ลูกศรที่เฟรม 20 กดปุ่มขวาของเมาส์ เรียกคำสั่งลัด แล้วคลิก Insert Frame)
7. Layer 2 แทรกคีย์เฟรมที่เฟรม 6 พิมพ์คำว่า ติวเตอร์ แปลงเป็น Symbol แบบ Graphic
8. ใน Layer 2 เฟรมที่ 20 ให้ปิดท้ายด้วยคำสั่ง Insert Keyframe แล้วย้ายคำว่า ติวเตอร์ ไปไว้ที่ตำแหน่งดังภาพ
9. สร้าง Motion Tween ดังภาพ ซึ่งจะเป็นการกำหนดให้ข้อความ ติวเตอร์ เลื่อนจากด้าน ซ้ายมือนอกเสตจ เลื่อนมาที่ด้านขวาของจอ ตามตำแหน่งที่ได้วางภาพในเฟรมที่ 20
10. Layer 3 ก็ปฏิบัติคล้ายๆ กันกับ Layer 2 เพียงแต่พิมพ์คำว่า Guitar
11. Layer 4 คลิกเฟรมที่ 10 ที่ได้วาดปุ่ม Enter ไว้ แล้วแปลงเป็น Symbol แบบ Button ภาพปุ่มในตอนนี้จะอยู่นอกเสตจด้านบน
12. แทรกคีย์เฟรม ในเฟรมที่ 20 พร้อมย้ายตำแหน่งปุ่ม Enter ไปไว้ด้านล่าง
13. สร้าง Motion Tween เพื่อให้ปุ่ม Enter เลื่อนจากบนลงล่าง (เลื่อนจากเฟรม 10 มายัง เฟรมที่ 20)

14. กำหนดการทำงานของปุ่ม Enter โดยคลิกเฟรมที่ 20 ของเลเยอร์ 4 ที่เป็นตำแหน่งที่ วางปุ่ม Enter นั่นเอง
15. คลิกที่ตัวปุ่มในเฟรม 20
16. กด F9 เปิดแท็ป Action คลิกแล้วพิมพ์
on(release){
loadMovie(“mainm.swf”, _root);
}
17. ในการทดสอบการทำงาน จะพบว่า โปรแกรมจะแสดง Menu หรือรายการคำสั่งด้านบน เช่น File View Control Help ถ้าไม่ต้องการให้แสดงคำสั่งเหล่านี้ ก็สามารถยกเลิกได้
18. การยกเลิกไม่ให้แสดงคำสั่ง ให้คลิกที่ Layer 1
19. กด F9 เปิดแท็ป Action คลิกและพิมพ์ดังนี้
fscommand(“showmenu”, false);
หรือถ้าต้องการแบบเต็มจอเลย ไม่ต้องมี Title Bar ก็พิมพ์เพิ่มอีกบรรทัด
fscommand(“fullscreen”, true);

20. ทดสอบผลงาน โดยกด Ctrl + Enter
21. หลังจากทดสอบการทำงานจนเสร็จสมบูรณ์แล้ว ก็คอมไพล์หรือบันทึกเป็นไฟล์แบบ exe ด้วยคำสั่ง File>>Publish Settings...

22. คลิกเลือกชนิดของไฟล์เป็นแบบ exe แล้วคลิกปุ่ม Publish เสร็จแล้วคลิกปุ่ม OK
23. ก็เป็นอันเสร็จสิ้นการสร้างส่วนนำหรือไตเติ้ลก่อนเข้าเมนูหลัก
24. หลังจาก Publish เสร็จแล้วก็จะได้ไฟล์ title.exe เป็นไฟล์หลัก ถ้าดับเบิ้ลคลิกไฟล์นี้ก็ จะเข้าโปรแกรม ซึ่งเราสามารถนำไฟล์ที่ได้นี้ไปใช้กับเครื่องใดๆ ก็ได้ ในเครื่องนั้นๆ ไม่จำเป็นต้องติด ตั้งโปรแกรม Flash ไว้ เพราะการ Publish โปรแกรมจะรวมไฟล์บางตัวของโปรแกรม Flash เข้ากับไฟล์ งานของเรา จึงสามารถนำไฟล์ไปใช้งานได้เลย

 

---

การสร้างไฟล์เมนูหลัก
mainm.fla จะเป็นไฟล์เมนูหลัก ซึ่งมีส่วนประกอบดังนี้
1. หัวข้อ มี 4 หัวข้อเท่านั้น แต่ในการเขียนโปรแกรมจริงๆ จะมีมากกว่านี้ ก็แนะนำให้สร้าง เป็นซีน แต่ละซีนก็แยกเป็นบทที่ 1, 2, 3, ... แล้วทำปุ่มเลื่อนไปยังซีนต่างๆ (ดัดแปลงจากโปรแกรม Photo Album)
2. ปุ่มควบคุม มี 3 ปุ่ม ปุ่ม Help ปุ่ม About และปุ่ม Exit
3. สร้างเลเยอร์ 3 เลเยอร์ดังภาพ
4. Layer 1 คลิกเฟรมที่ 1 แล้ววาดปุ่มวงกลม แปลงเป็น Symbol ชนิด Button จากตัวอย่าง ก็คือปุ่ม Lesson01 ที่อยู่ใน Library
5. ภาพกีต้าร์ ก็ Import เข้ามาไว้ใน Layer 1 เฟรมที่ 1 เช่นกัน
6. ข้อความ Guitar พิมพ์แล้วก็อปปี้ซ้อนกันดังภาพ
7. หัวข้อต่างๆ ทำความรู้จักกีต้าร์ วิธีจับ วิธีดีด ... ก็พิมพ์ลงไป
8. ชื่อปุ่มควบคุม Help, About และ Exit ก็พิมพ์ลงไป
9. ลากนำปุ่มชื่อ Lesson01 ใน Library มาวางดังตัวอย่าง
10. ปิดท้ายเฟรมที่ 10 ด้วยคำสั่ง Insert Frame
11. ส่วน Layer 2 จะเป็นเสียงประกอบ
12. Layer 3 หยุดการทำงานไว้ที่เฟรม 10 ด้วย Action = Stop

13. กำหนด Actions ให้กับปุ่มต่างๆ จะเป็นการกำหนดค่าให้กับปุ่มวงกลมทั้ง 7 ปุ่ม แต่บาง หัวข้อยังไม่ได้ทำ จึงกำหนดได้เพียงบางส่วนเท่านั้น
14. คลิก Layer 1
15. กดปุ่ม F9 เปิดแท็ป Action คลิกและพิมพ์
fscommand(“showmenu”, false);
16. คลิกปุ่ม Exit คลิกใน Actions แล้วพิมพ์
on(release){
fscommand(“quit”);
}
17. ปุ่มอื่นๆ ที่เหลือ เมื่อสร้างไฟล์ต่างๆ ต่อไปนี้เสร็จแล้ว จึงจะกำหนดการทำงาน
17.1 หัวข้อ ทำความรู้จักกีต้าร์ จับคู่กับไฟล์ guitar.swf
17.2 หัวข้อ วิธีจับคอร์ด จับคู่กับไฟล์ cords.swf
17.3 หัวข้อ วิธีดีดกีต้า จับคู่กับไฟล์ picking.swf
17.4 หัวข้อ การอ่านโน้ต จับคู่กับไฟล์ note.swf
17.5 หัวข้อ Help จับคู่กับไฟล์ help.swf
17.6 หัวข้อ About จับคู่กับไฟล์ about.swf

---

การสร้างไฟล์หัวข้อหรือบทเรียน
จะเป็นการสร้างไฟล์ที่เป็นส่วนของเนื้อหาซึ่งก็คือ หัวข้อ ทำความรู้จักกีต้าร์ วิธีจับคอร์ด วิธี ดีดกีต้า และการอ่านโน้ต ในหัวข้อเหล่านี้จะมีปุ่ม Main Menu ให้คลิกเพื่อกลับไปยังเมนูหลัก
1. ข้อความให้อ่าน
2. ภาพประกอบ อาจทำเป็น Movie Clip จะดูน่าสนใจมากกว่า เพราะสามารถเปลี่ยนภาพ ใส่เสียงประกอบได้
3. หรือไม่ก็ใช้การบันทึกเป็นไฟล์วิดีโอพร้อมเสียงประกอบ ก็ดูดีกว่า
4. ปุ่ม Main Menu ให้คลิกเพื่อกลับเมนูหลัก ไฟล์ mainm.fla หลังจากได้ศึกษาบทเรียน นี้เสร็จแล้ว

วิธีสร้างในแต่ละหัวข้อก็จะคล้ายๆ กัน
1. Layer 1 คลิกเฟรมที่ 1 จากนั้นก็นำภาพเข้ามา ด้วยคำสั่ง File>>Import และพิมพ์ข้อความ ลงไปดังภาพ
2. ปุ่มวงกลม จะใช้การก็อปปี้จากไฟล์งาน mainm.fla เข้ามา ไม่ต้องเสียเวลาสร้างใหม่ การ ก็อปปี้ก็คลิกภาพปุ่มในไฟล์งาน Mainm.fla คลิก Edit>>Copy กลับไปที่ไฟล์งานที่กำลังสร้างอยู่ แล้ว ก็นำภาพเข้ามาด้วยคำสั่ง Edit>Paste in Center
3. Import ไฟล์เสียงบรรยายเข้ามาใน Library ด้วยคำสั่ง File>>Import>>Import to Library...
4. การใส่เสียงก็คลิกเฟรม 1 ของ Layer 2 แล้วลากเสียงใน Library ไปวางในเสตจ
5. การดูว่าไฟล์เสียงที่เพิ่มเข้ามา มีความยาวเท่าใด ก็คลิกที่เฟรม 1 ของ Layer 2 ก่อน แล้ว ก็ดูใน Properties ด้านล่าง จากตัวอย่าง มีความยาว 8.3 s หรือ 8.3 วินาที
6. ใน Timeline เมื่อคลิกที่เฟรมใดๆ โปรแกรมจะแจ้งว่า ณ เฟรมนั้นๆ มีความยาวกี่วินาที เช่น คลิกเฟรมที่ 100 จะมีความยาว 8.3 วินาที
7. จัดการปิดท้ายเฟรมที่ 100 ด้วยคำสั่ง Insert Frame
8. ที่ตำแหน่งเฟรมที่ 100 จะทำให้ไฟล์นี้มีความยาวเท่ากับเสียงบรรยายที่ 8.3 วินาที
9. จัดการปิดท้ายเฟรมที่ 100 ของ Layer 1 ด้วยเช่นกัน

 

10. คลิกปุ่มวงกลม หน้า Main Menu
11. กด F9 เปิด Actions คลิกแล้วพิมพ์
on(release){
LoadMovie(“mainm.swf”, _root);
}
12. คลิก Layer 1 คลิกที่ว่างๆ นอกเสตจ
13. กด F9 เปิด Actions คลิกแล้วพิมพ์
fscommand(“showmenu”, false);
เป็นการกำหนด ไม่ให้แสดงเมนูคำสั่ง
14. ทดสอบผลงาน โดยกด Ctrl + Enter เสร็จแล้วก็บันทึกงานเก็บไว้ ตั้งชื่อไฟล์ว่า guitar.fla

สร้างหัวข้ออื่นๆ ที่เหลือ
การสร้างหัวข้ออื่นๆ หรือบทเรียนที่เหลือ ก็ใช้วิธีคล้ายๆ กัน แนะนำให้เปิดไฟล์ quitar.fla ขึ้นมาแล้วก็อปปี้เป็นไฟล์ใหม่ด้วยคำสั่ง File>>Save As...
1. เปิดไฟล์ guitar.fla ขึ้นมา
2. ก็อปปี้เป็นไฟล์ใหม่ด้วยคำสั่ง File>>Save As... จากนั้นก็ตั้งชื่อไฟล์ใหม่ตามชื่อบทเรียน ดังต่อไปนี้
2.1 หัวข้อ วิธีจับคอร์ด ตั้งชื่อไฟล์ cords.swf
2.2 หัวข้อ วิธีดีดกีต้า ตั้งชื่อไฟล์ picking.swf
2.3 หัวข้อ การอ่านโน้ตตั้งชื่อไฟล์ note.swf
2.4 หัวข้อ Help ตั้งชื่อไฟล์ help.swf
2.5 หัวข้อ About ตั้งชื่อไฟล์ about.swf

3. บางเนื้อหาที่เป็นภาพเคลื่อนไหวพร้อมเสียง ก็ทำปุ่มควบคุม เช่น ปุ่ม Play ปุ่ม Stop

4. เนื้อหาใดที่มีเนื้อหาให้อ่านค่อนข้างมาก ก็ใช้การเพิ่มปุ่มเลื่อนหน้า มีปุ่มเดินหน้า ปุ่มย้อน หลัง (ให้กลับไปอ่านเนื้อหาก่อนหน้านี้ ดูตัวอย่างการสร้างโปรแกรมแสดงภาพวิธีสร้างคล้ายกัน)
5. ในการแก้ไขผลงาน อาจเปิดขึ้นมามากกว่า 1 ไฟล์ ก็ได้ แล้วจึงคลิกชื่อไฟล์ที่ต้องการแก้ไข
6. ไฟล์งานทั้งหมด เมื่อแก้ไขครั้งสุดท้ายแล้ว ให้ทดสอบผลงานโดยกดปุ่ม Ctrl + Enter เพื่อให้โปรแกรมสร้างไฟล์ swf ห้ามลืมเด็ดขาด

---

สร้างการเชื่อมโยงในไฟล์ mainm.fla
หลังจากสร้างบทเรียนครบทั้งหมดแล้ว ก็จะสร้างการเชื่อมโยงในไฟล์หลัก
1. เปิดไฟล์ mainm.fla ขึ้นมา คลิกปุ่มวงกลม หน้าหัวข้อ เช่น ทำความรู้จักกีต้าร์
2. กดปุ่ม F9 เปิด Actions คลิกแล้วพิมพ์
on(release){
loadMovie(“guitar.swf”, _root);
}
3. ส่วนปุ่มอื่นๆ ที่เหลือ ก็คลิกเลือกปุ่ม แล้วพิมพ์ Action ตามตัวอย่าง
3.1 หัวข้อ วิธีจับคอร์ด จับคู่กับไฟล์ cords.swf
on (release){
loadMovie("cords.swf", _root);
}
3.2 หัวข้อ วิธีดีดกีต้า จับคู่กับไฟล์ picking.swf
on (release){
loadMovie("picking.swf", _root);
}
3.3 หัวข้อ การอ่านโน้ต จับคู่กับไฟล์ note.swf
on (release){
loadMovie("note.swf", _root);
}
3.4 หัวข้อ Help จับคู่กับไฟล์ help.swf
on (release){
loadMovie("help.swf", _root);
}
3.5 หัวข้อ About จับคู่กับไฟล์ about.swf
on (release){
loadMovie("about.swf", _root);
}

---

ทดสอบผลงาน
1. เข้าโปรแกรม Windows Explorer ไปยังโฟลเดอร์ที่เก็บไฟล์งานไว้ แล้วดับเบิ้ลคลิกที่ไฟล์ title.exe เพื่อเข้าโปรแกรม
2. จะเข้าโปรแกรมดังภาพ ก็คลิกปุ่ม Enter
3. จะเข้าเมนูหลัก ให้คลิกหัวข้อที่ต้องการ
4. หัวข้อต่างๆ ศึกษาจบแล้ว ก็คลิกที่ปุ่ม Main Menu เพื่อกลับเมนูหลัก

 

---

การนำโปรแกรมไปใช้งาน
ถ้าต้องการนำไปใช้งานไม่ว่าจะก็อปปี้ไปเก็บไว้ในเครื่องใดๆ หรือเขียนลงแผ่นซีดี ก็ให้นำไป เฉพาะไฟล์ที่ได้เลือกเป็นแถบสีไว้เท่านั้นก็พอ ไฟล์อื่นๆ เป็นไฟล์ต้นฉบับ ไม่ต้องเอาไป

---

ตัวอย่างการเขียนโปรแกรม CAI ลงซีดี
ถ้ามีจุดประสงค์ในการผลิตเพื่อจำหน่าย การสร้างเป็นแผ่นซีดีรอมจะทำได้ง่ายที่สุด โดยเขียน ข้อมูลลงในแผ่นซีดีได้เลย
1. สร้างไฟล์ Autorun.inf โดยเข้าโปรแกรม Notepad
2. พิมพ์ดังนี้
[Autorun]
OPEN=title.exe
3. คลิกเมนู File>>Save คลิกเลือกที่เก็บที่เดียวกับที่ได้เก็บไฟล์ Flash ไว้
4. คลิกและพิมพ์ชื่อไฟล์ autorun.inf ห้ามผิดแม้แต่ตัวเดียว แล้วคลิกปุ่ม Save
5. ในการเขียน CD ก็จะนำเอาเฉพาะไฟล์ title.exe, autorun.inf และ ไฟล์ *.swf เท่านั้น ไปเขียนลงแผ่นซีดี

 

ตัวอย่างการเขียนซีดีด้วยโปรแกรม Nero
ในตัวอย่างนี้จะเป็นการเขียนซีดีด้วยโปรแกรม Nero Express
1. เข้าโปรแกรม Nero Express คลิก Data>>Data Disc
2. คลิกปุ่ม Add

3. คลิกเลือกไฟล์ดังตัวอย่าง โดยคลิกไฟล์แรก กดปุ่ม Ctrl ที่แป้นพิมพ์ค้างไว้ แล้วคลิกเลือก ไฟล์ที่ต้องการทั้งหมด (เฉพาะไฟล์ title.exe, autorun.inf และ ไฟล์ *.swf เท่านั้น) ครบแล้วปล่อยปุ่ม Ctrl
4. คลิกปุ่ม Add และ Finish
5. คลิกปุ่ม Next
6. กำหนดค่าคล้ายตัวอย่างแล้วคลิกปุ่ม Burn เริ่มต้นเขียนซีดี

---

ตัวอย่างการนำไฟล์ Flash MX 2004 ไปสร้างเป็นเว็บไซท์
ผลงานที่ได้ ถ้าต้องการนำไปสร้างเป็นเว็บไซท์ อาจจะเก็บไว้บนอินเตอร์เน็ต ถ้าโรงเรียนหรือ หน่วยงานของคุณ ได้สร้างระบบเน็ตเวิร์คเอาไว้ ก็นำไฟล์ไปเก็บไว้ในเครื่องที่เป็นเซิร์ฟเวอร์ เครื่องอื่น ที่ได้เชื่อมต่อเข้ามาก็จะสามารถดูผลงานได้ ก็น่าจะดีทีเดียว เพราะผู้เรียนสามารถเลือกเรียนวิชาที่ต้อง การได้ เพียงแค่เปิดเครื่องแล้วไปยังเว็บไซท์ที่ทำเป็นระบบอินทราเน็ตไว้
1. เปิดไฟล์งาน Flash ขึ้นมาก่อน
2. คลิกเมนู File>>Publish Settings...
3. คลิกติ๊กถูก 2 แบบแรกบนสุดคือ พับลิชเป็นไฟล์แบบ swf และ html
4. คลิกปุ่มเลือกโฟลเดอร์ไว้เก็บไฟล์
5. คลิกปุ่ม Publish เสร็จแล้วคลิกปุ่ม OK เพื่อออก
6. สำหรับไฟล์ title ให้เปลี่ยนชื่อเป็น index.html เพื่อให้เป็นไฟล์หลักสำหรับการสร้างเว็บไซท์ ซึ่งต้องมีไฟล์หลักอย่างน้อย 1 ตัว

7. หลังจาก Publish ครบทุกไฟล์แล้วก็จะได้ไฟล์ต่างๆ ดังภาพตัวอย่าง ซึ่งผู้เขียนได้จัดเก็บ ไว้ในโฟลเดอร์ชื่อ Website
8. ให้ก็อปปี้ไฟล์ทั้งหมดไปไว้ในเว็บไซท์ ก็จะกลายเป็นเว็บไซท์แบบ Flash หรือจะก็อปปี้ไป ไว้ในเครื่องที่เป็น Server ในหน่วยงานก็ได้

ก็มาถึงหน้าสุดท้าย ก่อนจากกันก็ขอให้ผู้อ่านทุกท่านโชคดี มีแต่ความสุข ปราศจากโรคภัย
สำหรับโปรแกรม Flash ก็จะมีผู้จัดทำหนังสือ เอกสาร หรือทิปสอนการใช้โปรแกรมค่อนข้าง เยอะมาก ท่านใดที่ต้องการศึกษาในระดับสูงกว่านี้ ก็สามารถค้นหาได้จากเว็บไซท์บนอินเตอร์เน็ต มี ทุกเรื่อง ตั้งแต่ง่ายๆ ไปจนถึงระดับมืออาชีพ

Details

Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash

Hits: 9495