|
บทที่ 1
การพัฒนาสื่อการเรียนรู้ด้วยโปรแกรม Flash MX
ความนำ
ในการพัฒนาสื่อผ่านเครือข่ายอินเทอร์เน็ตที่สมบูรณ์นั้น
สื่อจะต้องผ่านการออกแบบเป็นอย่างดี เพื่อกระตุ้นให้ผู้เรียนได้คิด
วิเคราะห์ สังเคราะห์ แก้ปัญหา หรือหาข้อสรุปได้ด้วยตนเอง
และสื่อนั้นต้องตอบสนองต่อความแตกต่างระหว่างบุคคล
ในอดีตที่ผ่านมาเรามักพบเว็บเพจนำเสนอเนื้อหา
และมีผู้นำไปเรียกกันว่าเป็นสื่อบนเว็บบ้าง CAI on Web
บ้าง ฯลฯ ซึ่งจริงแล้วมาจากศัพท์เดิมคือ (Web Based
Instruction) ซึ่งมีพัฒนาการมาจากสื่อคอมพิวเตอร์ช่วยสอน
ดังนั้นจึงต้องมีสมบัติสำคัญของสื่อคอมพิวเตอร์ช่วยสอนไว้ครบถ้วนคือ
1)
เนื้อหาสาระ (Information)
2)
การมีปฏิสัมพันธ์ (Interactive)
3)
การมีผลป้อนกลับทันที (Immediate Feedback)
4)
สนองตอบต่อความแตกต่างระหว่างบุคคล (Individualization)
แต่สมบัติเพิ่มเติมของสื่อผ่านเครือข่ายอินเทอร์เน็ตคือ
ต้องสามารถเผยแพร่ผ่านเครือข่ายอินเทอร์เน็ตที่ผู้เรียนสามารถเรียนได้โดยตรงผ่านเว็บ
และอาจมีคุณสมบัติอื่นเพิ่มเติมเช่น การเก็บสถิติผู้เรียน หรือมีกระดานสนทนาเพื่อให้ผู้เรียนสามารถสอบถามปัญหาจากผู้สอนได้
เป็นต้น
สื่อผ่านเครือข่ายอินเทอร์เน็ตในที่จึงไม่รวมถึงเว็บเพจนำเสนอเนื้อหาดังที่พบกันโดยทั่วไป
แต่จะต้องประกอบด้วยคุณสมบัติดังกล่าวข้างต้นอย่างครบถ้วน ดังนั้น โปรแกรมที่ใช้สร้างสื่อประเภทนี้
โดยเฉพาะในปัจจุบันน่าจะเป็นโปรแกรม Macromedia Flash เท่านั้นที่จะตอบสนองต่อผลงาน
(out put) สื่อตามคุณสมบัติที่กำหนดได้
(ปัจจุบันมีโปรแกรม swish เวอร์ชั่น 2
สามารถนำมาสร้างงานร่วมกับโปรแกรม Flash นี้ได้บ้าง
แต่ก็ยังมีข้อจำกัดอีกบางประการ)
ความจำเป็นพื้นฐานด้าน Hardware และ software
1)
Pentium
200 MHz หรือเทียบเท่า
2)
ระบบปฏิบัติการ Windows 98 SE,
Windows ME, Windows NT 4.0, Windows 2000,
or Windows XP;
3)
RAM
อย่างน้อย 64 MB แต่แนะนำให้ใช้
128 MB จะดีกว่า
4)
เนื้อที่เหลือใน Hard disk อย่างน้อย
85 MB
5)
จอภาพแสดงสีได้อย่างน้อย 16-bit ( 65536 สี)
6)
รายละเอียดการแสดงผลไม่น้อยกว่า 1024 x 768 pixel
7)
มีช่องบรรจุแผ่นซีดีรอม (CD-ROM drive)
ข้อตกลงเบื้องต้นเกี่ยวกับสัญลักษณ์ในเอกสารฉบับนี้
1) เครื่องหมาย > หมายถึงขั้นตอนต่อไป
2)
หากกำหนดชื่อเมนูแต่ไม่ได้กำหนดวิธีการกระทำการต่อเมนูนั้น
ให้หมายถึงการคลิกเมาส์ปุ่มซ้าย เช่น start>Run หมายถึงคลิกเมาส์ปุ่มซ้ายที่เมนู
start และเมื่อเกิดเมนูย่อยให้ให้คลิกเมาส์ต่อที่ Run
3) คลิก
หมายถึงคลิกเมาส์ปุ่มซ้าย คลิกขวาหมายถึงคลิกเมาส์ปุ่มขวา คลิกซ้ำ (Double Click) หมายถึงคลิกซ้ายซ้ำ 2 ครั้งติดกัน
4) การใช้คีย์ร่วม เช่น Alt, Shift หรือ Ctrl ร่วมกับคีย์อื่นจะต้องกดคีย์ดังกล่าวค้างแล้วค่อยกดคีย์อื่นสั้นๆ
ที่กำหนดตามมา เช่น Ctrl + c หมายถึงกดแป้น Ctrl
ที่คีย์บอร์ดค้าง แล้วกดคีย์อักษร c ตามสั้นๆ
การติดตั้งโปรแกรม
|
1
|
นำแผ่นซีดีรอมต้นฉบับใส่ในช่อง CD-ROM drive.
|
|
2
|
จาก Windows เลือก Start > Run
> Flash MX Installer.exe ซึ่งเป็น
ไฟล์หนึ่งภายในแผ่นซีดีรอมโปรแกรม Flash MX แล้วคลิกต่อที่ OK เพื่อเริ่มติดตั้ง
|
|
3
|
คลิกต่อตามขั้นตอนต่างๆ เมื่อเรียกหา Serial No ให้พิมพ์หมายเลขดังกล่าวลงในช่องให้ถูกต้อง
(เป็นค่าเฉพาะของโปรแกรมแต่ละตัว) จนกว่าการติดตั้งสำเร็จ
|
|
4
|
ปิดเครื่องแล้วเปิดใหม่ ซึ่งจะทำให้ฟังก์ชั่นการทำงานสมบูรณ์
|
1. การใช้เมนูช่วยเหลือ
เมื่อต้องการใช้งานคำสั่งหรือการกระทำใดๆ ที่ยังไม่ทราบขั้นตอน
ท่านสามารถขอความช่วยเหลือจากโปรแกรมได้
ด้วยวิธีการอย่างใดอย่างหนึ่งดังนี้
|
1) กด F1 ที่ Key board หรือ คลิกที่ เมนู Help> using Flash
|
|
2) เลือก Tab ใดๆ 1 ใน 3 Tab คือ CONTENTS, INDEX, SEARCH
ดังภาพที่ 1
|
ภาพที่ 1
|
|
3) แนะนำให้ใช้ SEARCH เพื่อค้นหาตามคำสำคัญ
ซึ่งจะเกิดหน้าต่างค้นหาดังภาพที่ 2
|
|
ภาพที่ 2
|
ภาพที่ 3
|
|
4)
สามารถใช้ Keyword ร่วมได้หลายตัวพร้อมกันเพื่อให้หาง่ายขึ้น
ดังภาพที่ 3
|
2. การใช้ Scenes
ในการสร้างงานด้วยโปรแกรม Flash สามารถทำทีละ
Scene โดยแต่ละ Scene จะอิสระจากกัน
แต่การแสดงผลจะดำเนินต่อเนื่องกันโดยอัตโนมัติเมื่อไม่มีการควบคุมด้วย Action
Script ใดๆ (คำสั่งอาจอยู่ในปุ่ม หรือ Frame ของ Timeline ฯลฯ)
อย่างไรก็ตามเราสามารถเพิ่ม ลบ หรือเปลี่ยนลำดับของ Scene ได้ในหน้าต่าง Scene โดยการคลิก window
> scene ดังภาพที่ 4
|
คำสั่งสำคัญเกี่ยวกับ Scene
1. คลิก Add Scene button
เพื่อ
เพิ่ม Scene
2. คลิก Delete Scene button
เพื่อ ลบ Scene
3. เพื่อให้ได้ Scene ใหม่โดยมี
วัตถุเหมือนกัน Scene ต้นฉบับ
คลิก Duplicate Scene button
4. กดเมาส์ค้างแล้วลากสัญรูป Scene
ในช่องเพื่อเปลี่ยน ลำดับของ Scene
|
ภาพที่ 4
|
3. ความสามารถทั่วไปของโปรแกรม Flash
1) ตบแต่งภาพนิ่งทั้งแบบ Vector และ Bitmap
2) สร้างภาพเคลื่อนไหวในรูปแบบต่างๆได้เป็นอย่างดี
3)
ภาพเคลื่อนไหวแบบปฏิสัมพันธ์ ผู้ใช้สามารถควบคุมได้
4)
ขนาดไฟล์ไม่โตหรืออาจกล่าวได้ว่าเล็กมาก เมื่อเทียบกับไฟล์ชนิดอื่นที่แสดงผล
ในระดับคุณภาพเดียวกัน
5)
สามารถแสดงผลด้านเสียงและเป็นเสียงที่ควบคุมได้
6) มี Action Script ซึ่งเสมือนหนึ่งเป็นโปรแกรมภาษาอยู่ในตัว
สามารถพัฒนางาน
ได้ตามความต้องการอันหลากหลายอย่างไม่จำกัด
7)
สามารถบันทึกไฟล์ให้ประมวลผลตัวเองได้ (*.exe)
8)
ผลงานที่สร้างขึ้นสามารถทำงานร่วมกับไฟล์ HTML
และแสดงผลได้โดยตรง
ผ่านเครือข่ายอินเทอร์เน็ต
|
4. การเตรียมโปรแกรมก่อนใช้จริง
ในการพัฒนางานจริง
ผู้ใช้อาจต้องใช้คำสั่งบางคำสั่งบ่อยครั้ง
การใช้คำสั่งจากเมนูอาจทำให้งานช้าเนื่องจากมีขั้นตอนมาก
เราจึงอาจปรับแต่งโปรแกรมให้มีคีย์ลัดเพื่อความสะดวกในการพัฒนางานโดยสามารถตั้งได้ตามใจชอบและความเคยชินของตนเอง
ได้ดังนี้
1. เลือก Edit > Keyboard
Shortcuts.
2. ในหน้าต่าง Keyboard Shortcuts
เลือก Command และคลิก Duplicate Set button
3. คลิกเครื่องหมาย+
เพื่อเลือกเมนู ย่อยภายในที่ต้องการตั้งค่า
3. พิมพ์ Keyที่ต้องการในช่อง Press key >change
|
ภาพที่ 4
|
|
4. อาจลบค่า shortcut เดิมโดยการคลิกเครื่องหมาย
- หรือเพิ่มโดยคลิกเครื่องหมาย +
5. คลิก OK
|
5. การใช้ Timeline
การสร้างงานด้วยโปรแกรม
Flash มีความจำเป็นอย่างยิ่งที่จะต้องมีความเข้าใจเกี่ยวกับ
Timeline เป็นอย่างดี
เนื่องจากการแสดงผลของภาพเกี่ยวข้องกับ Timeline เป็นอันมาก
โดยต้องมีความเข้าใจเบื้องต้นว่า
ภาพเคลื่อนไหวเกิดจากการแสดงภาพนิ่งจำนวนหลายๆภาพนำเสนออย่างต่อเนื่องกันในช่วงเวลาหนึ่ง
เช่น ภาพยนตร์ 24 ภาพต่อวินาที (fps) แต่ใน Flash
เราจะใช้ค่าน้อยกว่านี้เนื่องจากข้อจำกัดในเรื่องความเร็วในการส่งข้อมูล
คำและความหมายของคำบางคำที่สำคัญและเกี่ยวข้องกับ Timeline ดังนี้
|
คำศัพท์
|
ความหมาย/คำอธิบาย
|
|
frame
|
กรอบภาพ เป็นพื้นที่แสดงภาพ ข้อความ หรือเสียง
|
|
keyframe
|
กรอบภาพที่มีการเปลี่ยนแปลงการเคลื่อนไหว ในTimelineมีลักษณะเป็นกรอบภาพที่มีขอบกั้นและมีจุดสีดำอยู่ภายใน
|
|
Playhead
|
ตัวชี้ตำแหน่งกรอบภาพที่กำลังแสดงผล
|
|
Empty Keyframe
|
กรอบภาพว่างที่จะมีการเปลี่ยนแปลงการเคลื่อนไหว (ยังไม่มี object ใดๆ ใน Frame นี้)
|
|
Tween Animation
|
มีการแสดงการเคลื่อนไหวอย่างใดอย่างหนึ่งหรือรวมกัน
เช่น เลื่อนตำแหน่ง ขยาย/ย่อ หมุน
Fade in /Fade out ฯลฯ
|
|
Tween shape
|
แสดงการเคลื่อนไหว ที่มีการปรับเปลี่ยนรูปร่างจากภาพหนึ่งสู่อีกภาพหนึ่งอย่างค่อยเป็นค่อยไป
|
|
Frame by frame
Animation
|
แสดงการเคลื่อนไหวที่เกิดจากการนำภาพอิสระซึ่งมีความสัมพันธ์กันมาวางต่อเนื่องกันคล้ายแต่ละกรอบภาพของภาพยนตร์
|
|
Layer
|
ชั้นของภาพที่ทำให้มองภาพเป็นสามมิติ โดย Layer บนแสดงว่าใกล้
ผู้สังเกต Layer บรรทัดล่างอยู่ไกลผู้สังเกต
โดย Layer หลาย Layerอาจรวมกลุ่มกัน
เป็น Layer folder ด้วยก็ได้
|
|
Layer Guide
|
Layer ที่ใช้สำหรับใช้กำหนดเส้นทางการเคลื่อนที่ของ
Object ที่อยู่ในLayer
ด้านล่างของของ Layer Guide
|
|
Frame rate
|
อัตราการแสดงผลของภาพเคลื่อนไหวซึ่งประกอบด้วยการแสดง
ภาพนิ่งจำนวนกรอบภาพค่าหนึ่งต่อวินาที มีหน่วยเป็น fps (frame per
second)
|
หน้าต่างของ Timeline แสดงดังภาพที่ 5
ภาพที่ 5
6. การเลื่อนตัวชี้กรอบภาพ (Playhead)
ขณะสร้างงานหากต้องการเปลี่ยนกรอบภาพเพื่อทำงานที่กรอบภาพอื่นสามารถเลื่อนได้โดยกดคีย์
> เพื่อเลื่อนตัวชี้กรอบภาพไปทางขวามือ
และกดคีย์ <
เพื่อเลื่อนตัวชี้กรอบภาพไปทางซ้ายมือ
ขณะเลื่อนตัวชี้กรอบภาพจะมองเห็นแถบสีชมพูเลื่อนอย่างชัดเจนดังภาพที่ 6
ภาพที่ 6
8. การเปลี่ยนขนาดการแสดงผลของ Timeline
ในมุมมองของ Timeline บางครั้งอาจต้องการมองให้เห็นรายละเอียดชัดๆ
ก็อาจมองในลักษณะ Zoom in หรือในบางครั้งอาจต้องการมองภาพรวมกว้างๆ
อาจมองในลักษณะ Zoom out สามารถทำได้โดยการคลิกที่ปุ่ม Frame
view button ซึ่งมุมขวาบนของ Timeline จะเห็นเมนูย่อยให้เลือกมากมายเช่น Tiny, Small, Normal,
Medium, หรือ Large.
เมื่อให้เห็นขนาดต่างกัน
9. การตั้งชื่อกรอบภาพ
ในบางครั้งอาจมีความจำเป็นต้องตั้งชื่อ
Frame เพื่อสะดวกในการจำเมื่อทำงานที่มีความซับซ้อน
และเพื่อการอ้างอิง
โปรแกรมนี้จึงยินยอมให้สามารถตั้งชื่อกรอบภาพได้ ดังนี้
1)
เลือกกรอบภาพที่ต้องการ
2)
ตั้งชื่อเฟรมใน Properties ถ้าหากต้องการตั้งชื่อแบบ Comment
ให้เติม // ก่อนแล้วตามด้วยชื่อกรอบภาพ
10. การใช้ Layer
โปรแกรม Flash เลียนแบบการแสดงผลของภาพในธรรมชาติ
ดังนั้นวัตถุใกล้จะบังวัตถุที่อยู่ไกลออกไป คำว่า Layer แปลว่าเป็นชั้นๆ Layer ที่อยู่บรรทัดบนหมายถึงอยู่ใกล้ผู้สังเกต
สามารถบังวัตถุที่อยู่ Layer ล่าง เรียงไปตามลำดับ
แต่เราสามารถเปลี่ยน Layer ได้โดยการใช้เมาส์ลากขึ้นบนหรือลงล่าง
และสามารถเพิ่ม Layerโดยคลิกที่  และลบ
Layer ได้โดยคลิกที่ 
|
หากมีจำนวน Layer มากๆ เราอาจรวม Layer
ลงใน Folder ได้
โดยการคลิกเมาส์ขวาในช่อง Layer (ซ้ายมือของ
Timeline) ดังภาพที่ 7
|
|
|
|
ภาพที่ 7
|
11. กราฟิกแบบ Vector
& Bitmap
|
ภาพแบบ Vector เป็นภาพที่ประกอบ ด้วยเส้นลักษณะต่างๆ
และคุณสมบัติเกี่ยวกับสีของเส้นนั้นๆ เช่น ภาพของคน
ก็จะถูกสร้างด้วยจุดเส้นหลายๆ เส้นเป็นลักษณะของโคร่งร่าง (Outline) และสีของคนก็เกิดจากสีของเส้นโครงร่างนั้นๆ กับพื้นที่ผิวภายในนั่นเอง
เมื่อมีการแก้ไขภาพ ก็จะเป็นการแก้ไขคุณสมบัติของเส้น
ทำให้ภาพไม่สูญเสียความละเอียด
|
ภาพที่ 8
|
|
เมื่อมีการขยายภาพนั่นเอง ภาพแบบ Vector ที่คุ้นเคยได้แก่ภาพ
.wmf ซึ่งเป็น clipart ของ Microsoft Office ดังภาพที่ 8
|
|
ภาพแบบ Bitmap เป็นภาพที่เกิดจากจุดสีที่เรียกว่า pixels ซึ่งประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็นเส้นตาราง
(grid) ทำให้เกิดปัญหาเมื่อมีการขยายภาพ เพราะgrid
ของภาพมีขนาดที่แน่นอนนั่นเอง ภาพ
bitmap เมื่อมีการขยายขนาด จะสูญเสียความคมชัด ดังภาพที่ 9
|
ภาพที่ 9
|
|
|
|
12. ส่วนประกอบของหน้าต่างโปรแกรม
Flash
มีหน้าที่การทำงานลักษณะเดียวกับโปรแกรมอื่นๆ ที่ทำงานบน Windows
ดังนี้
- Title
Bar แสดงปุ่มควบคุมหลัก (Control
Menu) ชื่อโปรแกรม และปุ่มควบคุมหน้าต่างโปรแกรม ดังภาพที่
10
ภาพที่ 10
|
- Toolbox
แสดงปุ่มเครื่องมือเกี่ยวกับการวาดภาพ หรือสร้างภาพ ดังภาพที่ 11
|
|
|
- Panel คือหน้าต่างควบคุมฟังก์ชัน
ซึ่งมีหลายฟังก์ชัน (หลายหน้าต่าง) ดังภาพที่ 12
|
|
|
ภาพที่ 11
|
ภาพที่
12
- Library
หน้าต่างควบคุมและเก็บชุดวัตถุของโปรแกรม ได้แก่ Symbols, Buttons,
Movies หรือเสียง ดังภาพที่ 13
|
- Work Area พื้นที่ทำงาน ประกอบด้วยพื้นที่
ว่างสำหรับวางวัตถุแบบชั่วคราว
และพื้นที่
ของเวที (Stage)
- Stage พื้นที่ส่วนที่ใช้ในการวางวัตถุต่าง
ๆ
หรืออาจจะเรียกว่า เวที เมื่อมีการนำเสนอ
ผลงานจะแสดงเฉพาะวัตถุบน Stage เท่านั้น
ดังภาพที่ 14
|
ภาพที่ 13
|
|
ภาพที่ 14
|
|
|
13. หน้าต่างคำสั่งของโปรแกรม
คำสั่งที่ใช้ในการสร้างงานด้วยโปรแกรม Flash ส่วนใหญ่อยู่ในเมนูย่อยของ
Window เมื่อคลิกเมนูย่อยจะเกิดหน้าต่างคำสั่งย่อย
ดังภาพที่ 15
14. การเลิกใช้โปรแกรม
เมื่อต้องการเลิกใช้งานโปรแกรม สามารถปฏิบัติได้ดังนี้
วิธีที่ 1 เลือกคำสั่ง File, Exit
วิธีที่ 2 ใช้ปุ่มคำสั่ง Ctrl +q
วิธีที่
3 ใช้ปุ่มคำสั่ง Alt + F4
(F4 หมายถึง ฟังก์ชั่นคีย์ซึ่งอยู่บรรทัดบนสุดของแป้นพิมพ์)
วิธีที่ 4 คลิกที่ปุ่มปิดโปรแกรม
ซึ่งปรากฏอยู่ที่มุมขวาบนสุดของ Title Bar
|
|
|
|
ภาพที่ 15
|
ศึกษาตอนที่ 2
โดย อ.องอาจ ชาญเชาว์ สพท.กทม.2
chanmedia.bkk2ict.net
|