open learning environment

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
 สามารถเขียน Script เข้าไปในตัวโปรแกรมเพื่อสร้างความสามารถในการ
ทำงานใหสู้งย่งิ ขนึ้

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

10. AAddoobbee FFllaasshh CCSS3
การสร้างภาพกราฟิก
ภาพ 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 เหมาะสำหรับงานเขยี นสครปิ ตท์ี่ทำงานรว่ มกับ
JavaScript หรือ API
Flash Project เป็นการรวมกลมุ่ งานท่สี รา้ งทั้งหมด ให้ออกมาเป็น Project
ไฟล์

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

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

16. FFrraammee
Frame เป็นส่วนประกอบของ Timeline เป็นช่องสำหรับแสดง
ภาพเคลื่อนไหว ประกอบดว้ ย Frame ท่ตี อ่ เนื่องกันหลาย ๆ Frame เมื่อมี
การแสดงภาพเคลื่อนไหวโปรแกรมจะนำวัตถุ (Instance) ที่อยู่บนเวที
(Stage) มาแสดงผลทีละ Frame ในส่วนของความเร็วในการแสดงผล
มากน้อยเพียงใดขึ้นอยู่กับการกำหนดคุณสมบัติ Movie Properties ที่
Frame Rate มีหน่วยเป็น Frame per Second (fps) ปกติถ้าเป็นโปรแกรม
AAddoobbee FFllaasshh CCSS3 จะตั้งค่าเริ่มต้นที่ 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. ลลัักษณณะะกกาารททํำางงาานของ FFrraammee
Motion-tween เฟรมท่สี รา้ งภาพเคลื่อนไหว
แบบเคลื่อนที่ มสีัญลักษณเ์ ป็นรูปลูกศร
สีดำอยู่ระหว่างจุด 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 ท่ถีูกใชง้ านอยบู่ น Stage โดย Instance
สามารถปรับคุณสมบัติต่างๆ ได้ เช่น สี ขนาด โดยไม่มีผลกระทบ
ต่อ symbol

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

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

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

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