SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ
หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป
โดย อาจารย์เล็กฤทัย ขันทองชัย
หัวข้อ
สมรรถนะที่ 1 การสร้างไฟล์งานใหม่......................................................................................................................2
สมรรถนะที่ 2 การบันทึกไฟล์งานใหม่....................................................................................................................4
สมรรถนะที่ 3 การเปิด-ปิด ไฟล์งาน ......................................................................................................................5
สมรรถนะที่ 4 การสร้างฉากพื้นหลังโดยใช้รูปภาพจากภายนอก.............................................................................6
สมรรถนะที่ 5 การสร้างเลเยอร์ใหม่ (Layer)..........................................................................................................8
สมรรถนะที่ 6 การสร้างข้อความเคลื่อนไหว (Text Animation) ...........................................................................9
สมรรถนะที่ 7 การนาเข้าไฟล์เสียง (Sound)....................................................................................................... 15
สมรรถนะที่ 8 การสร้างปุ่มควบคุม (Symbol Button)...................................................................................... 17
สมรรถนะที่ 9 การเพิ่มฉาก (Scene) .................................................................................................................. 20
สมรรถนะที่ 10 การเขียนคาสั่งควบคุมการทางาน (Action Script 3.0)............................................................. 21
ใบงานที่ 1 ให้นักเรียนออกแบบหน้าเมนูหลัก ลงใน Scene 2 ให้ครบถ้วนและสมบูรณ์ดังนี้............................... 26
ใบงานที่ 2 ให้นักเรียนออกแบบหน้าเนื้อหาบทเรียน ลงใน Scene 3 - Scene 8 และเขียนคาสั่งปุ่มควบคุม ให้
สามารถเชื่อมโยงกันได้ทั้งบทเรียน ให้ครบถ้วนและสมบูรณ์ดังนี้......................................................................... 28
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [2]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป
สมรรถนะที่ 1 การสร้างไฟล์งานใหม่
1. การเข้าใช้งานโปรแกรม คลิกที่โปรแกรม Adobe Flash Professional CS6
2. การสร้างไฟล์งานใหม่ คลิกที่ Create New แล้วเลือก ActionScript 3.0
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [3]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. กาหนดขนาดหน้าจอแสดงผลของไฟล์งาน
3.1 คลิกที่แถบ Properties
3.2 กาหนด Size ให้ width = 850 px และ height = 650 px (เพื่อให้แสดงผลความกว้างและความสูง
เหมาะสมใน 1 หน้าจอพอดี)
3.3 จากนั้นคลิกปุ่ม OK
4. การปรับมุมมองแสดงผลในหน้าออกแบบ ให้เลือกเป็น Fit in Window หรือ Show Frame
3.1
3.2
3.2 3.3
4
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [4]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 2 การบันทึกไฟล์งานใหม่
1. การบันทึกไฟล์งานใหม่ คลิกที่เมนู File เลือก Save As…
2. เลือกที่เก็บข้อมูลและตั้งชื่อไฟล์งาน (การตั้งชื่อไฟล์งานควรตั้งชื่อให้สื่อความหมายถึงชิ้นงาน เพื่อให้จาได้ง่าย
และสะดวกต่อการค้นหาในภายหลัง เช่น เลขที่_ชื่องาน_ชื่อนักเรียน) จากนั้นเมื่อมีการปรับปรุงแก้ไขไฟล์งาน
ให้ทาการบันทึก โดยคลิกที่เมนู File เลือก Save หรือกดปุ่มคีย์ลัด ctrl+S เพื่อบันทึกข้อมูลให้เป็นปัจจุบัน
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [5]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 3 การเปิด-ปิด ไฟล์งาน
1. การปิดไฟล์งาน คลิกที่เมนู File เลือก Exit
2. การเปิดไฟล์งาน คลิกที่เมนู File เลือก Open… จากนั้นไปเลือกชื่อไฟล์ที่ต้องการเปิดทาการแก้ไขปรับปรุง
ตามแหล่งเก็บข้อมูลที่ได้ทาการบันทึกไว้ โดยเลือกไฟล์ที่มีนามสกุล .fla
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [6]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 4 การสร้างฉากพื้นหลังโดยใช้รูปภาพจากภายนอก
1. นาเข้าไฟล์รูปภาพจากภายนอก คลิกที่เมนู File เลือก Import -> Import to Stage
2. จากนั้นปรับขนาดให้เหมาะสมกับไฟล์งาน โดยคลิกที่รูปภาพ แล้วกาหนดขนาดในแถบ Properties ->
POSITION AND SIZE กาหนดความกว้าง (W) และความสูง (H) ให้พอดีกับขนาดไฟล์งาน
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [7]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. การแปลงวัตถุรูปภาพ ให้เป็นซิมโบลกราฟิก โดยคลิกเมาส์ขวาเลือกคาสั่ง Convert to Symbol…
4. ตั้งชื่อซิมโบลให้สอดคล้องกับข้อมูลรูปภาพในช่อง Name เช่น BG (พื้นหลัง) แล้วเลือกประเภทซิมโบลในช่อง
Type เป็น Graphic จากนั้นคลิกปุ่ม OK (Symbol Graphic เป็นซิมโบลที่มีลักษณะเป็นภาพนิ่ง ซึ่งเป็น
ส่วนประกอบหนึ่งใน Animation และสามารถที่จะกาหนดให้มีการตอบโต้กับผู้ใช้ได้ แต่ไม่สามารถใส่เสียงได้)
3
4
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [8]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 5 การสร้างเลเยอร์ใหม่ (Layer)
1. สร้างเลเยอร์ใหม่ คลิกที่เมนู Insert เลือก Timeline -> Layer หรือคลิกที่ปุ่ม New Layer บนแถบ
Timeline หรือคลิกเมาส์ขวาบนเลเยอร์ที่แถบ Timeline แล้วเลือกคาสั่ง Insert Layer
2. ตั้งชื่อเลเยอร์ ดับเบิ้ลคลิกที่ Layer1 แล้วพิมพ์ชื่อเลเยอร์ลงไป ใช้ได้ทั้งภาษาไทยและอังกฤษ เช่น พื้นหลัง
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [9]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 6 การสร้างข้อความเคลื่อนไหว (Text Animation)
1. คลิกที่ Layer2 ตั้งชื่อเลเยอร์เป็น ชื่อเรื่อง
2. คลิกที่แถบเครื่องมือ Text Tool (T) จากนั้นพิมพ์ข้อความที่ต้องการ เช่น บทเรียนคอมพิวเตอร์ช่วยสอน
เรื่อง อินโฟกราฟิก (Infographic)
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [10]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. ปรับแต่งรูปแบบข้อความตามต้องการ คลิกที่แถบ Properties -> CHARACTER โดยเลือกรูปแบบข้อความใน
ช่อง Family ขนาดของข้อความในช่อง Size และเลือกสีของข้อความในช่อง Color เป็นต้น
4. การหมุนวัตถุ (Rotate) โดยใช้เครื่องมือ Free Transform Tool (Q) เพื่อปรับตาแหน่งการจัดวางให้
เหมาะสมกับกรอบพื้นหลังที่กาหนดไว้
3
4
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [11]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
5. คลิกที่ข้อความ จากนั้นนาเมาส์ไปชี้จุดบริเวณมุมบนด้านขวามือ ให้ปรากฏสัญลักษณ์หมุนวัตถุ จากนั้น
กดปุ่มเมาส์ซ้ายค้างไว้แล้วลากหมุนปรับตาแหน่ง (Drag and Drop) การจัดวางให้เหมาะสมดังภาพ
6. การแปลงวัตถุข้อความ ให้เป็นซิมโบลแบบเคลื่อนไหว โดยคลิกเมาส์ขวาที่ข้อความเลือกคาสั่ง Convert to
Symbol…ตั้งชื่อซิมโบลในช่อง Name เป็น title (ชื่อเรื่อง) แล้วเลือกประเภทซิมโบลในช่อง Type เป็น
Movie Clip จากนั้นคลิกปุ่ม OK (Symbol Movie Clip เป็น Symbol ที่มีลักษณะเป็นภาพเคลื่อนไหว ซึ่ง
อาจเรียกได้ว่าเป็น Animation ขนาดเล็กก็ได้ หากเราสร้าง Movie Clip นี้เก็บไว้ใน Library และเมื่อนามาใช้
บน Stage เราก็จะได้ Movie Clip ที่สามารถแสดงภาพเคลื่อนไหวได้อย่างอิสระ โดยไม่จาเป็นที่จะต้องขึ้นอยู่
กับ Timeline บน Stage นั้น นอกจากนั้นยังสามารถใส่เสียงให้กับ Movie Clip ได้ด้วย จึงทาให้ Movie Clip
เป็นตัวหลักในการทา Animation)
5
6
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [12]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
7. ดับเบิ้ลคลิกที่ซิมโบล title ให้สังเกตสัญลักษณ์ Symbol Movie Clip
8. คลิกที่ Layer1 บนแถบ Timeline จากนั้นคลิกเมาส์ขวาตาแหน่งเฟรม (Frame) ที่ 30 เลือกคาสั่ง Insert
Keyframe คือเฟรมที่มีการเปลี่ยนแปลงของเนื้อหา กรณีที่เราแทรก Keyframe ณ ตาแหน่ง Keyframe นั้น
จะมีวัตถุเดิมปรากฏอยู่
7
8
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [13]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
9. คลิกเมาส์ขวาตาแหน่ง Frame ที่ 1 แล้วเลือกคาสั่ง Create Classic Tween
10. คลิกเมาส์ตาแหน่ง Frame ที่ 1 จากนั้นใช้เครื่องมือ Free Transform Tool ปรับย่อขนาดข้อความให้เล็กลง
10
9
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [14]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
11. คลิกเมาส์ขวาตาแหน่ง Frame ที่ 100 แล้วเลือกคาสั่ง Insert Frame คือส่วนที่มีเนื้อหาเดียวกับ Keyframe
ที่อยู่ด้านซ้าย เป็นการขยายเวลาให้แสดงผลวัตถุนั้นๆ นานขึ้นตามเวลาที่กาหนด
12. ทดสอบผลลัพธ์ โดยกดปุ่ม ctrl + enter ที่แป้นพิมพ์ และจะปรากฏไฟล์นามสกุล .swf ขึ้นมาให้อัตโนมัติ
11
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [15]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 7 การนาเข้าไฟล์เสียง (Sound)
1. สร้างเลเยอร์ใหม่ และตั้งชื่อเลเยอร์เป็น เสียงบรรเลง
2. นาเข้าไฟล์เสียง โดยคลิกเมนู File เลือกคาสั่ง Import -> Import to Library… จากนั้นเลือกไฟล์เสียงที่มี
นามสกุล .mp3 หรือ .wav เป็นต้น
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [16]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. คลิกเลือก Frame จากเลเยอร์ที่จะใส่เสียง เช่น คลิกที่เลเยอร์ เสียงบรรเลง จากนั้นคลิกที่แถบ Properties ->
SOUND ในช่อง Name ให้ทาการเลือกชื่อไฟล์เสียงที่ต้องการ และกาหนด Sync เป็น Start แบบ Loop
การกาหนดคุณสมบัติไฟล์เสียง (Sound)
Name: เลือกไฟล์เสียง
Effect: เลือกรูปแบบการแสดง
None: เล่นเสียงตามปกติ ลาโพงดังทั้งด้านขวาและซ้าย
Left Channel: ลาโพงดังเฉพาะด้านขวา
Right Channel: ลาโพงดังเฉพาะด้านซ้าย
Fade Left to Right: เป็นการเล่นเสียงจากด้านซ้ายแล้วค่อยๆ เปลี่ยนมาเป็นด้านขวา
Fade Right to Left: เป็นการเล่นเสียงจากด้านขวาแล้วค่อยๆ เปลี่ยนมาเป็นด้านซ้าย
Fade In: ค่อยๆ เพิ่มความดังของเสียงเป็นลาดับ
Fade Out: ค่อยๆ ลดความดังของเสียงเป็นลาดับ
Custom: ผู้ใช้กาหนดเอง
Sync: เลือกรูปแบบการเล่นเสียง
Event: วนเล่นเสียงใหม่เมื่อวนเฟรมใหม่ แม้เสียงเก่าจะยังคงค้างอยู่ก็ตาม
Start: เล่นเสียงไปเรื่อยๆ จนกว่าจะจบ แม้ว่าจะวนเฟรมอีกกี่รอบก็ตาม
Stop: ใช้กาหนดให้หยุดเสียง
Stream: เสียงจะเล่นและหยุดตามเฟรม
Repeat: กาหนดจานวนรอบของเสียง
Loop: วนเล่นเสียงใหม่ไปเรื่อยๆ เมื่อจบ โดยไม่กาหนดจานวนรอบ
3
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [17]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
สมรรถนะที่ 8 การสร้างปุ่มควบคุม (Symbol Button)
1. สร้างเลเยอร์ใหม่ และตั้งชื่อเลเยอร์เป็น ปุ่มควบคุม จากนั้นนาเข้าไฟล์รูปภาพที่จะสร้างปุ่ม โดยคลิกเลือกไฟล์
btn_start.png เพื่อเข้าสู่บทเรียน จากนั้นคลิกปุ่ม Open
2. การแปลงวัตถุรูปภาพ ให้เป็นซิมโบลแบบปุ่มกด โดยคลิกเมาส์ขวาที่ข้อความเลือกคาสั่ง Convert to
Symbol…ตั้งชื่อซิมโบลในช่อง Name เป็น btn_start (ปุ่มเริ่มเรียน) แล้วเลือกประเภทซิมโบลในช่อง Type
เป็น Button จากนั้นคลิกปุ่ม OK (Symbol Button เป็น Symbol ที่เป็นลักษณะของปุ่มกด ที่สามารถใส่
เสียงและแสดงการตอบโต้กับผู้ใช้ได้ จึงทาให้ Button เป็นตัวหลักที่ใช้ในการแสดงการตอบโต้กับผู้ใช้ เช่น
เวลาที่มีการคลิกเมาส์หรือเวลาการนาเมาส์มาวางไว้บนปุ่มกด เป็นต้น
1
2
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [18]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. ดับเบิ้ลคลิกที่ปุ่ม ซิมโบล btn_start จากนั้นกาหนดสถานะของปุ่ม (Button) ให้คลิก Frame ที่สถานะ
Up คือ เมื่อปล่อยปุ่มเมาส์ ให้อยู่ปกติ
4. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Over คือ เมื่อเมาส์อยู่เหนือปุ่ม เลือกคาสั่ง Insert Keyframe จากนั้นให้
ใช้เครื่องมือ Free Transform Tool คลิกที่ปุ่ม เพื่อปรับหมุนวัตถุให้เกิดความแตกต่างจากเดิมเล็กน้อย
3
4
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [19]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
5. การใส่เสียงที่ปุ่ม บนสถานะ Over ให้นาเข้าไฟล์เสียงมาเก็บไว้ใน Library จากนั้นคลิกแถบ Properties เลือก
ไฟล์เสียงคลิกเมาส์ที่ต้องการ และกาหนด Sync เป็นแบบ Start การเล่นแบบ Repeat 1 รอบ
6. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Down คือ เมื่อกดปุ่มของเมาส์ เลือกคาสั่ง Insert Keyframe จากนั้นให้
ใช้เครื่องมือ Free Transform Tool คลิกที่ปุ่ม เพื่อปรับย่อวัตถุให้เกิดความแตกต่างจากเดิมเล็กน้อย
6
5
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [20]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
7. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Hit คือ พื้นที่ที่ปุ่มจะทางาน เลือกคาสั่ง Insert Keyframe
สมรรถนะที่ 9 การเพิ่มฉาก (Scene)
1. การเพิ่ม Scene ให้คลิกที่เมนู Insert เลือกคาสั่ง Scene จะปรากฎ Scene 2 ขึ้นมา หรือกดปุ่ม shift + f2
เพื่อจัดการกับหน้าต่าง Scene ได้
7
1
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [21]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
2. ให้คลิกที่ Scene 2 และสร้างเลเยอร์ bg เพื่อเก็บวัตถุพื้นหลัง และสร้างเลเยอร์ ปุ่มควบคุม เพื่อเก็บวัตถุ
ปุ่มกด
สมรรถนะที่ 10 การเขียนคาสั่งควบคุมการทางาน (Action Script 3.0)
1. ที่ Scene 1 ให้คลิกที่ปุ่มกด btn_start จากนั้นคลิกที่แถบ Properties ในช่อง Instance name พิมพ์
ชื่อปุ่มกด btn_start (Instance เป็นตัวแทน Symbol ที่ถูกใช้งานอยู่บน Stage)
2
1
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [22]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
2. ให้คลิกขวาที่ปุ่มกด btn_start จากนั้นเลือกคาสั่ง Action หรือกดปุ่มคีย์ลัด F9 เพื่อเปิดหน้าต่างเขียน
คาสั่ง Action Script 3.0
3. ให้คลิกที่ปุ่ม จะปรากฏหน้าต่างคาสั่งขึ้นมา ให้คลิกเลือกกลุ่มคาสั่ง Timeline Navigation
จากนั้นดับเบิ้ลคลิกเลือกคาสั่ง Stop at this Frame จะปรากฏคาสั่ง stop(); เพื่อหยุดการทางานที่ Frame นี้
2
3
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [23]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
4. จากนั้นให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Next Scene and Play จะปรากฏคาสั่ง nextScene();
เพื่อให้เล่น Scene ถัดไป
5. ที่ Scene 2 ให้คลิกที่ปุ่มกด btn_home จากนั้นคลิกที่แถบ Properties ในช่อง Instance name พิมพ์
ชื่อปุ่มกด btn_home จากนั้นให้คลิกที่ปุ่ม จะปรากฏหน้าต่างคาสั่งขึ้นมา ให้คลิกเลือกกลุ่ม
คาสั่ง Timeline Navigation จากนั้นดับเบิ้ลคลิกเลือกคาสั่ง Stop at this Frame จะปรากฏคาสั่ง stop();
เพื่อหยุดการทางานที่ Frame นี้
4
5
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [24]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
6. ที่ปุ่มกด btn_home ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Scene and Play จะปรากฏคาสั่ง
gotoAndPlay(1, "Scene 1"); เพื่อไปและเริ่มเล่น Frame ที่ 1 ของ Scene 1
7. คลิกที่ปุ่มกด btn_back ตั้งชื่อ Instance name เป็น btn_back ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go
to Previous Frame and Stop จะปรากฏคาสั่ง prevFrame(); เพื่อย้อนกลับและหยุดแสดงผล ทีละ 1
Frame
6
7
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [25]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
8. คลิกที่ปุ่มกด btn_next ตั้งชื่อ Instance name เป็น btn_next ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go
to Next Frame and Stop จะปรากฏคาสั่ง nextFrame(); เพื่อไปและหยุดแสดงผลทีละ 1 Frame
8
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [26]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
ใบงานที่ 1 ให้นักเรียนออกแบบหน้าเมนูหลัก ลงใน Scene 2 ให้ครบถ้วนและสมบูรณ์ดังนี้
1. สร้างเลเยอร์ใหม่ ตั้งชื่อเลเยอร์ว่า “ส่วนหัวเรื่อง” เพื่อเก็บวัตถุในข้อถัดไป
2. สร้างซิมโบลแบบเคลื่อนไหว (Symbol Movie Clip) ตั้งชื่อว่า banner จากนั้นพิมพ์ข้อความส่วนหัวเรื่องว่า
“บทเรียนคอมพิวเตอร์ช่วยสอน เรื่อง อินโฟกราฟิก (Infographic)” และนาเข้ารูปภาพการ์ตูนมาประกอบให้
สวยงาม ดังตัวอย่างต่อไปนี้
3. คลิกที่เลเยอร์ปุ่มควบคุม ให้สร้างซิมโบลแบบปุ่มกด (Symbol Button) ตั้งชื่อว่า btn_menu และกาหนด
สถานะของปุ่มกดให้ครบทั้ง 4 สถานะ จากนั้นพิมพ์ข้อความไว้บนปุ่มกดให้ครบดังตัวอย่างต่อไปนี้
1. ความหมายอินโฟกราฟิก
2. หลักการออกแบบ
3. การดึงดูดความสนใจ
4. การสร้างสื่อให้มีประสิทธิภาพ
5. สิ่งที่ไม่ควรทาในการออกแบบ
6. ผู้จัดทา
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [27]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [28]
โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม……………………………………………
…………………………………………………………………………………………………………………………………………………………………
ใบงานที่ 2 ให้นักเรียนออกแบบหน้าเนื้อหาบทเรียน ลงใน Scene 3 - Scene 8 และเขียนคาสั่งปุ่มควบคุม
ให้สามารถเชื่อมโยงกันได้ทั้งบทเรียน ให้ครบถ้วนและสมบูรณ์ดังนี้
Scene 3 ความหมายอินโฟกราฟิก
Scene 4 หลักการออกแบบ
Scene 5 การดึงดูดความสนใจ
Scene 6 การสร้างสื่อให้มีประสิทธิภาพ
Scene 7 สิ่งที่ไม่ควรทาในการออกแบบ
Scene 8 ผู้จัดทา
ตัวอย่าง Scene 3 หน้าเนื้อหา เรื่องความหมายอินโฟกราฟิก
ตัวอย่าง Scene 4 หน้าเนื้อหา เรื่องหลักการออกแบบอินโฟกราฟิก

Mais conteúdo relacionado

Semelhante a เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป

ใบงานประวัติ 3
ใบงานประวัติ 3ใบงานประวัติ 3
ใบงานประวัติ 3poomarin
 
1 พื้นฐานการสร้างเว็บไซต์
1 พื้นฐานการสร้างเว็บไซต์1 พื้นฐานการสร้างเว็บไซต์
1 พื้นฐานการสร้างเว็บไซต์30082527
 
Microsoft office power point
Microsoft office power pointMicrosoft office power point
Microsoft office power pointMaitree Rimthong
 
การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์Thanakon504
 
Word2007 moce
Word2007 moceWord2007 moce
Word2007 moce520147141
 
การเขียนรายงาน
การเขียนรายงานการเขียนรายงาน
การเขียนรายงานDuangsuwun Lasadang
 
กิจกรรมพื้นหลังและตัวละคร
กิจกรรมพื้นหลังและตัวละครกิจกรรมพื้นหลังและตัวละคร
กิจกรรมพื้นหลังและตัวละครMunmuang Tik
 
การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์jakkirt504
 
ใบงานประวัติ
ใบงานประวัติใบงานประวัติ
ใบงานประวัติpoomarin
 
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21Prachyanun Nilsook
 
แบบฟอร์มโครงงานภาษาอังกฤษ
แบบฟอร์มโครงงานภาษาอังกฤษแบบฟอร์มโครงงานภาษาอังกฤษ
แบบฟอร์มโครงงานภาษาอังกฤษสมใจ จันสุกสี
 

Semelhante a เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป (20)

ใบงานประวัติ 3
ใบงานประวัติ 3ใบงานประวัติ 3
ใบงานประวัติ 3
 
Unit1 2
Unit1 2Unit1 2
Unit1 2
 
แผนการจัดการเรียนรู้ที่8
แผนการจัดการเรียนรู้ที่8แผนการจัดการเรียนรู้ที่8
แผนการจัดการเรียนรู้ที่8
 
1 พื้นฐานการสร้างเว็บไซต์
1 พื้นฐานการสร้างเว็บไซต์1 พื้นฐานการสร้างเว็บไซต์
1 พื้นฐานการสร้างเว็บไซต์
 
แผนการจัดการเรียนรู้ที่1
แผนการจัดการเรียนรู้ที่1แผนการจัดการเรียนรู้ที่1
แผนการจัดการเรียนรู้ที่1
 
Microsoft office power point
Microsoft office power pointMicrosoft office power point
Microsoft office power point
 
การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์
 
Atomymaxsite25
Atomymaxsite25Atomymaxsite25
Atomymaxsite25
 
Typecom
TypecomTypecom
Typecom
 
แผนการจัดการเรียนรู้ที่3
แผนการจัดการเรียนรู้ที่3แผนการจัดการเรียนรู้ที่3
แผนการจัดการเรียนรู้ที่3
 
Word2007 moce
Word2007 moceWord2007 moce
Word2007 moce
 
การเขียนรายงาน
การเขียนรายงานการเขียนรายงาน
การเขียนรายงาน
 
ใบงานที่1.2
ใบงานที่1.2ใบงานที่1.2
ใบงานที่1.2
 
กิจกรรมพื้นหลังและตัวละคร
กิจกรรมพื้นหลังและตัวละครกิจกรรมพื้นหลังและตัวละคร
กิจกรรมพื้นหลังและตัวละคร
 
แผนการจัดการเรียนรู้ที่7
แผนการจัดการเรียนรู้ที่7แผนการจัดการเรียนรู้ที่7
แผนการจัดการเรียนรู้ที่7
 
การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์การเขียนรายงานโครงงานคอมพิวเตอร์
การเขียนรายงานโครงงานคอมพิวเตอร์
 
ใบงานประวัติ
ใบงานประวัติใบงานประวัติ
ใบงานประวัติ
 
Work1 1
Work1  1Work1  1
Work1 1
 
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21
การออกแบบบทเรียนออนไลน์แบบปฏิสัมพันธ์ในการจัดการเรียนรู้ในศตวรรษที่ 21
 
แบบฟอร์มโครงงานภาษาอังกฤษ
แบบฟอร์มโครงงานภาษาอังกฤษแบบฟอร์มโครงงานภาษาอังกฤษ
แบบฟอร์มโครงงานภาษาอังกฤษ
 

เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป

  • 1. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป โดย อาจารย์เล็กฤทัย ขันทองชัย หัวข้อ สมรรถนะที่ 1 การสร้างไฟล์งานใหม่......................................................................................................................2 สมรรถนะที่ 2 การบันทึกไฟล์งานใหม่....................................................................................................................4 สมรรถนะที่ 3 การเปิด-ปิด ไฟล์งาน ......................................................................................................................5 สมรรถนะที่ 4 การสร้างฉากพื้นหลังโดยใช้รูปภาพจากภายนอก.............................................................................6 สมรรถนะที่ 5 การสร้างเลเยอร์ใหม่ (Layer)..........................................................................................................8 สมรรถนะที่ 6 การสร้างข้อความเคลื่อนไหว (Text Animation) ...........................................................................9 สมรรถนะที่ 7 การนาเข้าไฟล์เสียง (Sound)....................................................................................................... 15 สมรรถนะที่ 8 การสร้างปุ่มควบคุม (Symbol Button)...................................................................................... 17 สมรรถนะที่ 9 การเพิ่มฉาก (Scene) .................................................................................................................. 20 สมรรถนะที่ 10 การเขียนคาสั่งควบคุมการทางาน (Action Script 3.0)............................................................. 21 ใบงานที่ 1 ให้นักเรียนออกแบบหน้าเมนูหลัก ลงใน Scene 2 ให้ครบถ้วนและสมบูรณ์ดังนี้............................... 26 ใบงานที่ 2 ให้นักเรียนออกแบบหน้าเนื้อหาบทเรียน ลงใน Scene 3 - Scene 8 และเขียนคาสั่งปุ่มควบคุม ให้ สามารถเชื่อมโยงกันได้ทั้งบทเรียน ให้ครบถ้วนและสมบูรณ์ดังนี้......................................................................... 28
  • 2. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [2] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป สมรรถนะที่ 1 การสร้างไฟล์งานใหม่ 1. การเข้าใช้งานโปรแกรม คลิกที่โปรแกรม Adobe Flash Professional CS6 2. การสร้างไฟล์งานใหม่ คลิกที่ Create New แล้วเลือก ActionScript 3.0 1 2
  • 3. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [3] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 3. กาหนดขนาดหน้าจอแสดงผลของไฟล์งาน 3.1 คลิกที่แถบ Properties 3.2 กาหนด Size ให้ width = 850 px และ height = 650 px (เพื่อให้แสดงผลความกว้างและความสูง เหมาะสมใน 1 หน้าจอพอดี) 3.3 จากนั้นคลิกปุ่ม OK 4. การปรับมุมมองแสดงผลในหน้าออกแบบ ให้เลือกเป็น Fit in Window หรือ Show Frame 3.1 3.2 3.2 3.3 4
  • 4. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [4] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 2 การบันทึกไฟล์งานใหม่ 1. การบันทึกไฟล์งานใหม่ คลิกที่เมนู File เลือก Save As… 2. เลือกที่เก็บข้อมูลและตั้งชื่อไฟล์งาน (การตั้งชื่อไฟล์งานควรตั้งชื่อให้สื่อความหมายถึงชิ้นงาน เพื่อให้จาได้ง่าย และสะดวกต่อการค้นหาในภายหลัง เช่น เลขที่_ชื่องาน_ชื่อนักเรียน) จากนั้นเมื่อมีการปรับปรุงแก้ไขไฟล์งาน ให้ทาการบันทึก โดยคลิกที่เมนู File เลือก Save หรือกดปุ่มคีย์ลัด ctrl+S เพื่อบันทึกข้อมูลให้เป็นปัจจุบัน 1 2
  • 5. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [5] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 3 การเปิด-ปิด ไฟล์งาน 1. การปิดไฟล์งาน คลิกที่เมนู File เลือก Exit 2. การเปิดไฟล์งาน คลิกที่เมนู File เลือก Open… จากนั้นไปเลือกชื่อไฟล์ที่ต้องการเปิดทาการแก้ไขปรับปรุง ตามแหล่งเก็บข้อมูลที่ได้ทาการบันทึกไว้ โดยเลือกไฟล์ที่มีนามสกุล .fla 1 2
  • 6. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [6] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 4 การสร้างฉากพื้นหลังโดยใช้รูปภาพจากภายนอก 1. นาเข้าไฟล์รูปภาพจากภายนอก คลิกที่เมนู File เลือก Import -> Import to Stage 2. จากนั้นปรับขนาดให้เหมาะสมกับไฟล์งาน โดยคลิกที่รูปภาพ แล้วกาหนดขนาดในแถบ Properties -> POSITION AND SIZE กาหนดความกว้าง (W) และความสูง (H) ให้พอดีกับขนาดไฟล์งาน 1 2
  • 7. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [7] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 3. การแปลงวัตถุรูปภาพ ให้เป็นซิมโบลกราฟิก โดยคลิกเมาส์ขวาเลือกคาสั่ง Convert to Symbol… 4. ตั้งชื่อซิมโบลให้สอดคล้องกับข้อมูลรูปภาพในช่อง Name เช่น BG (พื้นหลัง) แล้วเลือกประเภทซิมโบลในช่อง Type เป็น Graphic จากนั้นคลิกปุ่ม OK (Symbol Graphic เป็นซิมโบลที่มีลักษณะเป็นภาพนิ่ง ซึ่งเป็น ส่วนประกอบหนึ่งใน Animation และสามารถที่จะกาหนดให้มีการตอบโต้กับผู้ใช้ได้ แต่ไม่สามารถใส่เสียงได้) 3 4
  • 8. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [8] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 5 การสร้างเลเยอร์ใหม่ (Layer) 1. สร้างเลเยอร์ใหม่ คลิกที่เมนู Insert เลือก Timeline -> Layer หรือคลิกที่ปุ่ม New Layer บนแถบ Timeline หรือคลิกเมาส์ขวาบนเลเยอร์ที่แถบ Timeline แล้วเลือกคาสั่ง Insert Layer 2. ตั้งชื่อเลเยอร์ ดับเบิ้ลคลิกที่ Layer1 แล้วพิมพ์ชื่อเลเยอร์ลงไป ใช้ได้ทั้งภาษาไทยและอังกฤษ เช่น พื้นหลัง 1 2
  • 9. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [9] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 6 การสร้างข้อความเคลื่อนไหว (Text Animation) 1. คลิกที่ Layer2 ตั้งชื่อเลเยอร์เป็น ชื่อเรื่อง 2. คลิกที่แถบเครื่องมือ Text Tool (T) จากนั้นพิมพ์ข้อความที่ต้องการ เช่น บทเรียนคอมพิวเตอร์ช่วยสอน เรื่อง อินโฟกราฟิก (Infographic) 1 2
  • 10. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [10] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 3. ปรับแต่งรูปแบบข้อความตามต้องการ คลิกที่แถบ Properties -> CHARACTER โดยเลือกรูปแบบข้อความใน ช่อง Family ขนาดของข้อความในช่อง Size และเลือกสีของข้อความในช่อง Color เป็นต้น 4. การหมุนวัตถุ (Rotate) โดยใช้เครื่องมือ Free Transform Tool (Q) เพื่อปรับตาแหน่งการจัดวางให้ เหมาะสมกับกรอบพื้นหลังที่กาหนดไว้ 3 4
  • 11. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [11] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 5. คลิกที่ข้อความ จากนั้นนาเมาส์ไปชี้จุดบริเวณมุมบนด้านขวามือ ให้ปรากฏสัญลักษณ์หมุนวัตถุ จากนั้น กดปุ่มเมาส์ซ้ายค้างไว้แล้วลากหมุนปรับตาแหน่ง (Drag and Drop) การจัดวางให้เหมาะสมดังภาพ 6. การแปลงวัตถุข้อความ ให้เป็นซิมโบลแบบเคลื่อนไหว โดยคลิกเมาส์ขวาที่ข้อความเลือกคาสั่ง Convert to Symbol…ตั้งชื่อซิมโบลในช่อง Name เป็น title (ชื่อเรื่อง) แล้วเลือกประเภทซิมโบลในช่อง Type เป็น Movie Clip จากนั้นคลิกปุ่ม OK (Symbol Movie Clip เป็น Symbol ที่มีลักษณะเป็นภาพเคลื่อนไหว ซึ่ง อาจเรียกได้ว่าเป็น Animation ขนาดเล็กก็ได้ หากเราสร้าง Movie Clip นี้เก็บไว้ใน Library และเมื่อนามาใช้ บน Stage เราก็จะได้ Movie Clip ที่สามารถแสดงภาพเคลื่อนไหวได้อย่างอิสระ โดยไม่จาเป็นที่จะต้องขึ้นอยู่ กับ Timeline บน Stage นั้น นอกจากนั้นยังสามารถใส่เสียงให้กับ Movie Clip ได้ด้วย จึงทาให้ Movie Clip เป็นตัวหลักในการทา Animation) 5 6
  • 12. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [12] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 7. ดับเบิ้ลคลิกที่ซิมโบล title ให้สังเกตสัญลักษณ์ Symbol Movie Clip 8. คลิกที่ Layer1 บนแถบ Timeline จากนั้นคลิกเมาส์ขวาตาแหน่งเฟรม (Frame) ที่ 30 เลือกคาสั่ง Insert Keyframe คือเฟรมที่มีการเปลี่ยนแปลงของเนื้อหา กรณีที่เราแทรก Keyframe ณ ตาแหน่ง Keyframe นั้น จะมีวัตถุเดิมปรากฏอยู่ 7 8
  • 13. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [13] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 9. คลิกเมาส์ขวาตาแหน่ง Frame ที่ 1 แล้วเลือกคาสั่ง Create Classic Tween 10. คลิกเมาส์ตาแหน่ง Frame ที่ 1 จากนั้นใช้เครื่องมือ Free Transform Tool ปรับย่อขนาดข้อความให้เล็กลง 10 9
  • 14. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [14] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 11. คลิกเมาส์ขวาตาแหน่ง Frame ที่ 100 แล้วเลือกคาสั่ง Insert Frame คือส่วนที่มีเนื้อหาเดียวกับ Keyframe ที่อยู่ด้านซ้าย เป็นการขยายเวลาให้แสดงผลวัตถุนั้นๆ นานขึ้นตามเวลาที่กาหนด 12. ทดสอบผลลัพธ์ โดยกดปุ่ม ctrl + enter ที่แป้นพิมพ์ และจะปรากฏไฟล์นามสกุล .swf ขึ้นมาให้อัตโนมัติ 11
  • 15. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [15] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 7 การนาเข้าไฟล์เสียง (Sound) 1. สร้างเลเยอร์ใหม่ และตั้งชื่อเลเยอร์เป็น เสียงบรรเลง 2. นาเข้าไฟล์เสียง โดยคลิกเมนู File เลือกคาสั่ง Import -> Import to Library… จากนั้นเลือกไฟล์เสียงที่มี นามสกุล .mp3 หรือ .wav เป็นต้น 1 2
  • 16. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [16] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 3. คลิกเลือก Frame จากเลเยอร์ที่จะใส่เสียง เช่น คลิกที่เลเยอร์ เสียงบรรเลง จากนั้นคลิกที่แถบ Properties -> SOUND ในช่อง Name ให้ทาการเลือกชื่อไฟล์เสียงที่ต้องการ และกาหนด Sync เป็น Start แบบ Loop การกาหนดคุณสมบัติไฟล์เสียง (Sound) Name: เลือกไฟล์เสียง Effect: เลือกรูปแบบการแสดง None: เล่นเสียงตามปกติ ลาโพงดังทั้งด้านขวาและซ้าย Left Channel: ลาโพงดังเฉพาะด้านขวา Right Channel: ลาโพงดังเฉพาะด้านซ้าย Fade Left to Right: เป็นการเล่นเสียงจากด้านซ้ายแล้วค่อยๆ เปลี่ยนมาเป็นด้านขวา Fade Right to Left: เป็นการเล่นเสียงจากด้านขวาแล้วค่อยๆ เปลี่ยนมาเป็นด้านซ้าย Fade In: ค่อยๆ เพิ่มความดังของเสียงเป็นลาดับ Fade Out: ค่อยๆ ลดความดังของเสียงเป็นลาดับ Custom: ผู้ใช้กาหนดเอง Sync: เลือกรูปแบบการเล่นเสียง Event: วนเล่นเสียงใหม่เมื่อวนเฟรมใหม่ แม้เสียงเก่าจะยังคงค้างอยู่ก็ตาม Start: เล่นเสียงไปเรื่อยๆ จนกว่าจะจบ แม้ว่าจะวนเฟรมอีกกี่รอบก็ตาม Stop: ใช้กาหนดให้หยุดเสียง Stream: เสียงจะเล่นและหยุดตามเฟรม Repeat: กาหนดจานวนรอบของเสียง Loop: วนเล่นเสียงใหม่ไปเรื่อยๆ เมื่อจบ โดยไม่กาหนดจานวนรอบ 3
  • 17. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [17] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… สมรรถนะที่ 8 การสร้างปุ่มควบคุม (Symbol Button) 1. สร้างเลเยอร์ใหม่ และตั้งชื่อเลเยอร์เป็น ปุ่มควบคุม จากนั้นนาเข้าไฟล์รูปภาพที่จะสร้างปุ่ม โดยคลิกเลือกไฟล์ btn_start.png เพื่อเข้าสู่บทเรียน จากนั้นคลิกปุ่ม Open 2. การแปลงวัตถุรูปภาพ ให้เป็นซิมโบลแบบปุ่มกด โดยคลิกเมาส์ขวาที่ข้อความเลือกคาสั่ง Convert to Symbol…ตั้งชื่อซิมโบลในช่อง Name เป็น btn_start (ปุ่มเริ่มเรียน) แล้วเลือกประเภทซิมโบลในช่อง Type เป็น Button จากนั้นคลิกปุ่ม OK (Symbol Button เป็น Symbol ที่เป็นลักษณะของปุ่มกด ที่สามารถใส่ เสียงและแสดงการตอบโต้กับผู้ใช้ได้ จึงทาให้ Button เป็นตัวหลักที่ใช้ในการแสดงการตอบโต้กับผู้ใช้ เช่น เวลาที่มีการคลิกเมาส์หรือเวลาการนาเมาส์มาวางไว้บนปุ่มกด เป็นต้น 1 2
  • 18. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [18] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 3. ดับเบิ้ลคลิกที่ปุ่ม ซิมโบล btn_start จากนั้นกาหนดสถานะของปุ่ม (Button) ให้คลิก Frame ที่สถานะ Up คือ เมื่อปล่อยปุ่มเมาส์ ให้อยู่ปกติ 4. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Over คือ เมื่อเมาส์อยู่เหนือปุ่ม เลือกคาสั่ง Insert Keyframe จากนั้นให้ ใช้เครื่องมือ Free Transform Tool คลิกที่ปุ่ม เพื่อปรับหมุนวัตถุให้เกิดความแตกต่างจากเดิมเล็กน้อย 3 4
  • 19. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [19] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 5. การใส่เสียงที่ปุ่ม บนสถานะ Over ให้นาเข้าไฟล์เสียงมาเก็บไว้ใน Library จากนั้นคลิกแถบ Properties เลือก ไฟล์เสียงคลิกเมาส์ที่ต้องการ และกาหนด Sync เป็นแบบ Start การเล่นแบบ Repeat 1 รอบ 6. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Down คือ เมื่อกดปุ่มของเมาส์ เลือกคาสั่ง Insert Keyframe จากนั้นให้ ใช้เครื่องมือ Free Transform Tool คลิกที่ปุ่ม เพื่อปรับย่อวัตถุให้เกิดความแตกต่างจากเดิมเล็กน้อย 6 5
  • 20. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [20] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 7. คลิกเมาส์ขวาที่ Frame ตรงสถานะ Hit คือ พื้นที่ที่ปุ่มจะทางาน เลือกคาสั่ง Insert Keyframe สมรรถนะที่ 9 การเพิ่มฉาก (Scene) 1. การเพิ่ม Scene ให้คลิกที่เมนู Insert เลือกคาสั่ง Scene จะปรากฎ Scene 2 ขึ้นมา หรือกดปุ่ม shift + f2 เพื่อจัดการกับหน้าต่าง Scene ได้ 7 1
  • 21. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [21] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 2. ให้คลิกที่ Scene 2 และสร้างเลเยอร์ bg เพื่อเก็บวัตถุพื้นหลัง และสร้างเลเยอร์ ปุ่มควบคุม เพื่อเก็บวัตถุ ปุ่มกด สมรรถนะที่ 10 การเขียนคาสั่งควบคุมการทางาน (Action Script 3.0) 1. ที่ Scene 1 ให้คลิกที่ปุ่มกด btn_start จากนั้นคลิกที่แถบ Properties ในช่อง Instance name พิมพ์ ชื่อปุ่มกด btn_start (Instance เป็นตัวแทน Symbol ที่ถูกใช้งานอยู่บน Stage) 2 1
  • 22. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [22] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 2. ให้คลิกขวาที่ปุ่มกด btn_start จากนั้นเลือกคาสั่ง Action หรือกดปุ่มคีย์ลัด F9 เพื่อเปิดหน้าต่างเขียน คาสั่ง Action Script 3.0 3. ให้คลิกที่ปุ่ม จะปรากฏหน้าต่างคาสั่งขึ้นมา ให้คลิกเลือกกลุ่มคาสั่ง Timeline Navigation จากนั้นดับเบิ้ลคลิกเลือกคาสั่ง Stop at this Frame จะปรากฏคาสั่ง stop(); เพื่อหยุดการทางานที่ Frame นี้ 2 3
  • 23. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [23] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 4. จากนั้นให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Next Scene and Play จะปรากฏคาสั่ง nextScene(); เพื่อให้เล่น Scene ถัดไป 5. ที่ Scene 2 ให้คลิกที่ปุ่มกด btn_home จากนั้นคลิกที่แถบ Properties ในช่อง Instance name พิมพ์ ชื่อปุ่มกด btn_home จากนั้นให้คลิกที่ปุ่ม จะปรากฏหน้าต่างคาสั่งขึ้นมา ให้คลิกเลือกกลุ่ม คาสั่ง Timeline Navigation จากนั้นดับเบิ้ลคลิกเลือกคาสั่ง Stop at this Frame จะปรากฏคาสั่ง stop(); เพื่อหยุดการทางานที่ Frame นี้ 4 5
  • 24. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [24] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 6. ที่ปุ่มกด btn_home ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Scene and Play จะปรากฏคาสั่ง gotoAndPlay(1, "Scene 1"); เพื่อไปและเริ่มเล่น Frame ที่ 1 ของ Scene 1 7. คลิกที่ปุ่มกด btn_back ตั้งชื่อ Instance name เป็น btn_back ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Previous Frame and Stop จะปรากฏคาสั่ง prevFrame(); เพื่อย้อนกลับและหยุดแสดงผล ทีละ 1 Frame 6 7
  • 25. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [25] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… 8. คลิกที่ปุ่มกด btn_next ตั้งชื่อ Instance name เป็น btn_next ให้ดับเบิ้ลคลิกเลือกคาสั่ง Click to Go to Next Frame and Stop จะปรากฏคาสั่ง nextFrame(); เพื่อไปและหยุดแสดงผลทีละ 1 Frame 8
  • 26. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [26] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… ใบงานที่ 1 ให้นักเรียนออกแบบหน้าเมนูหลัก ลงใน Scene 2 ให้ครบถ้วนและสมบูรณ์ดังนี้ 1. สร้างเลเยอร์ใหม่ ตั้งชื่อเลเยอร์ว่า “ส่วนหัวเรื่อง” เพื่อเก็บวัตถุในข้อถัดไป 2. สร้างซิมโบลแบบเคลื่อนไหว (Symbol Movie Clip) ตั้งชื่อว่า banner จากนั้นพิมพ์ข้อความส่วนหัวเรื่องว่า “บทเรียนคอมพิวเตอร์ช่วยสอน เรื่อง อินโฟกราฟิก (Infographic)” และนาเข้ารูปภาพการ์ตูนมาประกอบให้ สวยงาม ดังตัวอย่างต่อไปนี้ 3. คลิกที่เลเยอร์ปุ่มควบคุม ให้สร้างซิมโบลแบบปุ่มกด (Symbol Button) ตั้งชื่อว่า btn_menu และกาหนด สถานะของปุ่มกดให้ครบทั้ง 4 สถานะ จากนั้นพิมพ์ข้อความไว้บนปุ่มกดให้ครบดังตัวอย่างต่อไปนี้ 1. ความหมายอินโฟกราฟิก 2. หลักการออกแบบ 3. การดึงดูดความสนใจ 4. การสร้างสื่อให้มีประสิทธิภาพ 5. สิ่งที่ไม่ควรทาในการออกแบบ 6. ผู้จัดทา
  • 27. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [27] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… …………………………………………………………………………………………………………………………………………………………………
  • 28. เอกสารประกอบการฝึกอบรมตามฐานสมรรถนะ หลักสูตรการผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป [28] โดย อ.เล็กฤทัย ขันทองชัย……………………………..มหาวิทยาลัยราชภัฏจันทรเกษม…………………………………………… ………………………………………………………………………………………………………………………………………………………………… ใบงานที่ 2 ให้นักเรียนออกแบบหน้าเนื้อหาบทเรียน ลงใน Scene 3 - Scene 8 และเขียนคาสั่งปุ่มควบคุม ให้สามารถเชื่อมโยงกันได้ทั้งบทเรียน ให้ครบถ้วนและสมบูรณ์ดังนี้ Scene 3 ความหมายอินโฟกราฟิก Scene 4 หลักการออกแบบ Scene 5 การดึงดูดความสนใจ Scene 6 การสร้างสื่อให้มีประสิทธิภาพ Scene 7 สิ่งที่ไม่ควรทาในการออกแบบ Scene 8 ผู้จัดทา ตัวอย่าง Scene 3 หน้าเนื้อหา เรื่องความหมายอินโฟกราฟิก ตัวอย่าง Scene 4 หน้าเนื้อหา เรื่องหลักการออกแบบอินโฟกราฟิก