1. การวิเคราะห์สิ่งแวดล้อมทางการเรียนายรณฤทธิ์ ธรรมาธิกร
รหัสประจำาตัว 575050188-3
สาขาเทคโนโลยีการศึกษา (โครงการพิเศษ)
Education Technology Faculty
of Education
Khon Kaen University

2. 1. ทฤษฎีที่ใช้เป็นพื้นฐานในการ
ออกแบบ ประกอบ
ด้วยอะไรบ้าง พร้อมอธิบาย

3. • Cognition constructivist
• Social Constructivist

4. 2. มีองค์ประกอบอะไรบ้างในสิ่ง
แวดล้อม
ทางการเรียนรู้
Problem Base
Resource

5. 2. มีองค์ประกอบอะไรบ้างในสิ่ง
แวดล้อม
ทางการเรียนรู้ (ต่อ)
Scaffolding
Coaching

6. 2. มีองค์ประกอบอะไรบ้างในสิ่ง
แวดล้อม
ทางการเรียนรู้ (ต่อ)
Cognitive tool
Collaboration

7. 3. เทคโนโลยีที่ใช้คืออะไร มี
คุณลักษณะที่สำาคัญ
อย่างไร

8. 3. เทคโนโลยีที่ใช้คืออะไร มี
คุณลักษณะที่สำำคัญ
 เ ห มอำะยก่ำับงกำไรรงำ (นตแบอ่บ) Interactive ทงั้ในแบบ
ออนไลน์และออฟไลน์
 สำมำรถเปิดใช้กับเครื่องเล่นได้หลำกหลำย ไม่ว่ำจะ
เป็น คอมพิวเตอร์ พีดีเอ
โทรศัพท์มือถือ หรือแม้แต่นำฬิกำข้อมือ ภำพของ
งำน flash เป็นแบบ Vector
ทำำให้ภำพคมชัดสีสดใส
 ใช้งำนร่วมกับโปรแกรมหรือไฟล์งำนอื่นได้มำกมำย
เช่น FreeHand EPS
illustrator Photoshop GIF JPEG PNG PCT
TIF WAV และ MP3

9. 4. ให้นักศึกษำเลือกเทคโนโลยี(จะใช้
สื่ออะไรก็ได้)ที่จะใช้สร้ำงสิ่งแวดล้อม
ทำงกำรเรียนรู้ พร้อมทั้งอธิบำยวิธีกำร
ใช้งำน คุณสมบัติ โดยทำำเป็น PPT นำำ
เสนอ

10. AAddoobbee FFllaasshh CCSS33
กำรสร้ำงภำพกรำฟิก
ภำพ Raster
เป็นภำพที่เกิดจำกเม็ดสีหรือจุดสีที่เรียกว่ำ
Pixel มำเรียงกันจนเป็นภำพ
ควำมสวยงำมขึ้นอยู่กับควำมละเอียดของเม็ดสี
ถ้ำภำพคมชัดมำก ขนำดของไฟล์ก็จะใหญ่
ตำมไปด้วย
ภำพ Vector
ใช้กำรคำำนวณทำงคณิตศำสตร์
ไม่เกิดปัญหำรอยแตกหรือรอยหยักเมื่อขยำย
ภำพ
Flash ใช้หลักกำร Vector ในกำรสร้ำงภำพ

11. คววำำมตอ้งกกำำรรระะบบคอมพพิวิวเเตตอรร์ ์
ควำมต้องกำรระบบของโปรแกรม Flash CS3
 เครื่องคอมพิวเตอร์ที่มีหน่วยประมวลผลกลำง
ระดับ Pentium
4,Core Duo 1 GHz ขึ้นไป
 ระบบปฏิบัติกำร Windows XP
ServicePack2 หรือ Windows Vista
 หน่วยควำมจำำ (RAM) อย่ำงตำ่ำ 512 MB
(แนะนำำให้ใช้ 1 GB)
 เนื้อที่ของฮำร์ดดิสก์อย่ำงน้อย 2.5 GB จอภำพ
สีที่ควำมละเอียด
1024 x 768 pixels (32 bit)

12. กกำำรสรร้ำ้ำงไไฟฟลล์ด์ด้ว้วยกกำำรกกำำำำหนด
รรูปูปแแบบบเเออง
Flash Document ไฟล์รูปแบบปกติ ที่ใช้สร้ำงงำน
แอนนิเมชันทั่วไป
Flash Slide Presentation ไฟล์งำนที่เหมำะกับกำร
สร้ำงงำนนำำเสนอ
Flash Form Application ใช้สร้ำงฟอร์มสำำหรับทำำ
เป็นโปรแกรมใช้งำนทั่วไป
ActionScript File เป็นหน้ำต่ำงที่ไว้เขียนสคริปต์
เพียงอย่ำงเดียว
ActionScript Communication File เขียนไฟล์เพื่อ
ติดต่อกับเซิร์ฟเวอร์
Flash JavaScript File เหมำะสำำหรับงำนเขียน
สคริปต์ที่ทำำงำนร่วมกับ

14. ไทมไลน์ (Timeline)
ไทมไลน์ (Timeline) หรือเส้นเวลำ จะใช้
สำำหรับสร้ำงและกำำหนดรำยละเอียดของกำร
เคลื่อนไหว โดยเอำองค์ประกอบที่จะเคลื่อนไหว
(เรำเรียกองค์ประกอบต่ำงๆ ในชิ้นงำว่ำออบเจ็กต์
หรือวัตถุ) มำจัดวำงต่อกันละภำพในแต่ละช่วง
เวลำ (เรียกว่ำเฟรม: Frame) ที่แสดงเป็นภำพ
เคลื่อนไหว โดยเรำจะกำำหนดเส้นเวลำให้เล่นภำพ
เคลื่อนไหวซำ้ำๆ หรือเล่นแล้วหยุดก็ได้

15. รรู้จู้จักัก TTiimmeelliinnee แแลละะ FFrraammee
Frame Timeline

16. FFrraamm
ee
Frame เป็นส่วนประกอบของ Timeline เป็นช่อง
สำำหรับแสดงภำพเคลื่อนไหว ประกอบด้วย Frame
ที่ต่อเนื่องกันหลำย ๆ Frame เมื่อมีกำรแสดงภำพ
เคลื่อนไหวโปรแกรมจะนำำวัตถุ (Instance) ที่อยู่
บนเวที (Stage) มำแสดงผลทีละ Frame ในส่วน
ของควำมเร็วในกำรแสดงผลมำกน้อยเพียงใดขึ้น
อยู่กับกำรกำำหนดคุณสมบัติ Movie Properties ที่
Frame Rate มีหน่วยเป็น Frame per Second
(fps) ปกติถ้ำเป็นโปรแกรม AAddoobbee FFllaasshh CCSS33
จะตั้งค่ำเริ่มต้นที่ 12 fps แต่ปัจจุบันโปรแกรม
AAddoobbee FFllaasshh CCSS44 จะตั้งค่ำเริ่มต้นที่ 24 fps

17. ลลักักษณณะะกกำำรททำำำำงงำำนของ FFrraammee ทที่ปี่ปรรำำกฏ
บน TTiimmeelliinnee
1. ในกรณีที่ยังไม่มีกำรกำำหนดใช้งำน Frame
บน Timeline จะปรำกฏช่องของแต่ละ
Frame อย่ำงชัดเจน โดยมี Play head เป็น
ตัวชี้อยู่ที่เฟรมที่กำำลังแสดงอยู่บนสเตจ
2. เฟรมที่ไม่มีออบเจ็กต์
3. เฟรมที่มีออบเจ็กต์
4. ตำำแหน่งของเฟรมที่สร้ำงกำรเคลื่อนไหวไว้จะ
ถูกเรียกว่ำ คีย์เฟรม (Keyframe)
5. คีย์เฟรมที่ไม่มีออบเจ็กต์
6. คีย์เฟรมที่มีออบเจ็กต์

18. กำรสร้ำงคีย์เฟรม
Key frame ในกำรสร้ำง keyframe ขึ้นมำทุก
ครั้ง หำกมีชิ้นงำนวำงอยู่บน Keyframe ก่อนหน้ำ
ในเลเยอร์เดียวกัน โปรแกรมจะคัดอกชิ้นงำนนั้น
มำวำงบน Keyframe ใหม่ด้วย ทำำให้สำมำรถปรับ
แต่งแก้ไขส่วนประกอบในคีย์เฟรมใหม่ได้ โดย
ส่วนประกอบในคีย์เฟรมเดิมจะไม่ถูกแก้ไขด้วย
Blank keyframe คีย์เฟรมว่ำง คือ เฟรมที่ไม่มี
ข้อมูลใดๆในเฟรม เมื่อเรำคลิกที่คีย์เฟรมว่ำงนั้น ก็
จะไม่เกิดผลใดๆ บน stage ซึ่งสำมำรถสร้ำงคีย์
เฟรมว่ำงขึ้นมำเพื่อใส่ชิ้นงำนใหม่ หรือเว้นช่วง
เวลำในกำรแสดงผลแอนิเมชันก็ได้

19. ลลัักษณณะะกกำำรททำำำำงงำำนของ
Motion-tweFFernraa เmฟmรeeมที่สร้ำง
ภำพเคลื่อนไหวแบบ
เคลื่อนที่ มีสัญลักษณ์เป็น
รูปลูกศรสีดำำอยู่ระหว่ำงจุด
2 จุด บนพื้นสีฟ้ำอ่อน
Shape-tweened เฟรมที่สร้ำง
ภำพเคลื่อนไหวแบบเปลี่ยน
รูปร่ำง มีสัญลักษณ์เป็นรูป
ลูกศรสีดำำ อยู่ระหว่ำงจุด 2
จุด บนพื้นสีเขียวอ่อน
Action frame มีสัญลักษณ์
เป็นรูป a อยู่กลำง Frame
เป็นตำำแหน่งที่มีคำำสั่ง
Action Script ประกอบอยู่
ภำยใน Frame นั้น

20. Layer
 กำรทำำงำนแบบ Layer เป็นเหมือนกำรวำง
แผ่นใสซ้อนทับกันเป็นลำำดับขั้นขึ้นมำเรื่อย ๆ
 บริเวณของ Layer ที่ไม่มีรูปจะเห็นทะลุถึง
Layer ที่อยู่ข้ำงล่ำง
 ในแต่ละ Layer จะแยกกำรทำำงำนอย่ำง
ชัดเจน มีคุณสมบัติต่ำง ๆ เป็นของตัวเอง และกำร
แก้ไขที่เกิดขึ้นในแต่ละ Layer จะไม่ส่งผลต่อ
Layer อื่น ๆ

21. Symbol และ Instance
Symbol กำรนำำวัตถุที่เป็นภำพกรำฟิก มำ
กำำหนดเป็นต้นแบบเพื่อนำำไปใช้เป็นส่วน
ประกอบในชิ้นงำน คล้ำยๆ กับกำรทำำสำำเนำ
ภำพ โดย symbol แบ่งได้เป็น
Movie Clip เป็นวัตถุที่สร้ำงภำพเคลื่อนไหว
Button เป็นวัตถุปุ่มกดที่สำมำรถคลิกได้
Graphic เป็นวัตถุที่สร้ำงขึ้นจำกภำพกรำฟิก
ทั่วไป
เรำไม่สำมำรถนำำ symbol มำใช้บนสเตจได้
โดยตรง แต่จะทำำได้เพียงสำำเนำของ
symbol เรียกว่ำ Instance มำใช้ ซึ่งหนึ่ง
symbol มีได้หลำย Instance
Instance คือ Symbol ที่ถูกใช้งำนอยู่บน

22. กกาารปรรับับแแตตง่
IInnssttaannccee
 สามารถปรับแต่ง Instance โดยไม่กระทบ
กับ Symbol
ปรับความสว่าง ความเข้ม
ปรับเปลี่ยนสี
ปรับความโปร่งใส
 การใช้ Symbol ในการสร้างงานมีข้อดีคือ
ช่วยคุมต้นแบบที่ใช้ในชิ้นงานได้ โดยที่ไม่
จำาเป็นต้องสร้างภาพนั้นบ่อยๆ สามารถนำา
instance ไปใช้บนสเตจแทนได้กี่ภาพก็ได้
เนื่องจาก Flash จะมองเห็นเป็นภาพเดียว
ทำาให้ชิ้นงานมีขนาดเล็กลง ทำางานได้รวดเร็ว
กว่าเดิม

23. กกาารสรร้า้าง SSyymmbbooll ปรระะเเภภท
GGrraapphhiicc
 สร้าง Symbol ประเภท Graphic ใหม่
ลองสร้าง Symbol ใหม่ โดยการเลือก
Insert + New Symbol
จะสังเกตเห็นเครื่องมือ + ตรงกลางรูป
เมื่อสร้างเสร็จแล้วลองนำา Symbol มาวางไว้
ในสเตจ จะเรียกว่า Instance
แล้วกลับไปแก้ไข Symbol เพื่อดูการ
เปลี่ยนแปลงภายในสเตจ
 สร้าง Symbol ประเภท Graphic จากรูปที่มี
อยู่แล้ว

24. หลักการทำางานของ Flash
ขั้นตอนที่ 1
นำาเข้าภาพกราฟิกหรือ
ภาพที่สร้างขึ้นมา
ขั้นตอนที่ 2
แปลงส่วนประกอบต่าง ๆ
ให้เป็น Symbol
ขั้นตอนที่ 3
ทำาการสร้าง Animation
โดยจะใส่เสียง หรือ Script
ขั้นตอนที่ 4
Publish ออกมาเป็น
ชิ้นงาน

25. นามสกุลของ Flash
*.fla (Flash Movie)
เป็นไฟล์ที่ได้จากการสร้างชิ้นงานใน Flash ที่
สามารถนำามาแก้ไขเปลี่ยนแปลงได้
*.swf (Shockwave Flash)
เป็นไฟล์ที่ Flash สร้างขึ้นหลังจากการแสดง
ผลออกมา
สามารถดูผลการแสดงได้โดยไม่ต้องเปิด
โปรแกรม Flash
ในการ Publish จะมีการสร้างไฟล์ .html เพิ่ม เพื่อ
เป็นตัวเรียกใช้ไฟล์ *.swf ขึ้นมาให้ทำางาน