575050188 3 open learning environment

การวเิคราะหสิ่งแวดลอมทางการเรยีนรู

นายรณฤทธิ์ ธรรมาธิกร

รหัสประจําตัว 575050188-3

สาขาเทคโนโลยีการศึกษา (โครงการพเิศษ)

Education Technology Faculty of Education

Khon Kaen University

1. ทฤษฎทีี่ใชเปนพื้นฐานในการออกแบบ ประกอบ

ดวยอะไรบาง พรอมอธบิาย

• Cognition constructivist• Social Constructivist

2. มอีงคประกอบอะไรบางในส่ิงแวดลอม

ทางการเรยีนรู

Problem Base

Resource

2. มอีงคประกอบอะไรบางในส่ิงแวดลอม

ทางการเรยีนรู (ตอ)

Scaffolding

Coaching

2. มอีงคประกอบอะไรบางในส่ิงแวดลอม

ทางการเรยีนรู (ตอ)

Collaboration

Cognitive tool

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

อยางไร

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

อยางไร (ตอ)

เหมาะกับการงานแบบ Interactive ท้ังในแบบออนไลนและออฟไลน

สามารถเปดใชกับเคร่ืองเลนไดหลากหลาย ไมวาจะเปน คอมพิวเตอร พดีเีอ

โทรศัพทมอืถอื หรือแมแตนาฬกิาขอมอื ภาพของงาน flash เปนแบบ Vector

ทําใหภาพคมชัดสสีดใส

ใชงานรวมกับโปรแกรมหรือไฟลงานอื่นไดมากมาย เชน FreeHand EPS

illustrator Photoshop GIF JPEG PNG PCT TIF WAV และ MP3

สามารถเขยีน Script เขาไปในตัวโปรแกรมเพื่อสรางความสามารถในการ

ทํางานใหสูงย่ิงขึ้น

4. ใหนักศกึษาเลือกเทคโนโลยี(จะใชส่ืออะไรก็ได)ที่จะ

ใชสรางส่ิงแวดลอมทางการเรยีนรู พรอมทัง้อธบิาย

วธิกีารใชงาน คุณสมบัติ โดยทําเปน PPT นําเสนอ

Adobe Flash CSAdobe Flash CS33การสรางภาพกราฟก

ภาพ Raster

เปนภาพที่เกดิจากเม็ดสีหรือจุดสทีี่เรยีกวา Pixel มาเรียงกันจนเปนภาพ

ความสวยงามขึ้นอยูกับความละเอยีดของเม็ดสี

ถาภาพคมชัดมาก ขนาดของไฟลก็จะใหญตามไปดวย

ภาพ Vector

ใชการคํานวณทางคณิตศาสตร

ไมเกดิปญหารอยแตกหรือรอยหยักเมื่อขยายภาพ

Flash ใชหลักการ Vector ในการสรางภาพ

ความตองการระบบคอมพวิเตอร ความตองการระบบคอมพวิเตอร

ความตองการระบบของโปรแกรม 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)

การสรางไฟลดวยการกําหนดรูปแบบเองการสรางไฟลดวยการกําหนดรูปแบบเอง

Flash Document ไฟลรูปแบบปกต ิที่ใชสรางงานแอนนเิมชันทั่วไป

Flash Slide Presentation ไฟลงานที่เหมาะกับการสรางงานนําเสนอ

Flash Form Application ใชสรางฟอรมสําหรับทําเปนโปรแกรมใชงานทั่วไป

ActionScript File เปนหนาตางที่ไวเขยีนสครปิตเพยีงอยางเดยีว

ActionScript Communication File เขยีนไฟลเพื่อตดิตอกับเซริฟเวอร

Flash JavaScript File เหมาะสําหรับงานเขยีนสครปิตที่ทํางานรวมกับ JavaScript หรอื API

Flash Project เปนการรวมกลุมงานที่สรางทั้งหมด ใหออกมาเปน Project ไฟล

ไทมไลน (Timeline) ไทมไลน (Timeline) หรอืเสนเวลา จะใชสําหรับสรางและกําหนด

รายละเอยีดของการเคลื่อนไหว โดยเอาองคประกอบที่จะเคลื่อนไหว

(เราเรยีกองคประกอบตางๆ ในช้ินงาวาออบเจ็กตหรือวัตถุ) มาจัดวาง

ตอกันละภาพในแตละชวงเวลา (เรยีกวาเฟรม: Frame) ที่แสดงเปน

ภาพเคลื่อนไหว โดยเราจะกําหนดเสนเวลาใหเลนภาพเคลื่อนไหวซ้ําๆ

หรอืเลนแลวหยุดก็ได

รูจัก รูจัก TimelineTimeline และ และ FrameFrame

Frame Timeline

FrameFrame

Frame เปนสวนประกอบของ Timeline เปนชองสําหรับแสดง

ภาพเคลื่อนไหว ประกอบดวย Frame ที่ตอเนื่องกันหลาย ๆ Frame เมื่อมี

การแสดงภาพเคลื่อนไหวโปรแกรมจะนําวัตถุ (Instance) ที่อยูบนเวที

(Stage) มาแสดงผลทีละ Frame ในสวนของความเร็วในการแสดงผล

มากนอยเพียงใดขึ้นอยูกับการกําหนดคุณสมบัติ Movie Properties ที่

Frame Rate มีหนวยเปน Frame per Second (fps) ปกติถาเปนโปรแกรม

Adobe Flash CSAdobe Flash CS33 จะตั้งคาเริ่มตนที่ 12 fps แตปจจุบันโปรแกรม Adobe Adobe

Flash CSFlash CS4 4 จะตัง้คาเริ่มตนที่ 24 fps

ลักษณะการทํางานของ ลักษณะการทํางานของ Frame Frame ที่ปรากฏบนที่ปรากฏบน Timeline Timeline

1. ในกรณทีี่ยังไมมกีารกําหนดใชงาน Frame บน Timeline จะปรากฏชองของแตละ Frame อยางชัดเจน โดยม ีPlay head เปนตัวช้ีอยูที่เฟรมที่กําลังแสดงอยูบนสเตจ

2. เฟรมที่ไมมอีอบเจ็กต

3. เฟรมที่มอีอบเจ็กต

4. ตําแหนงของเฟรมที่สรางการเคลื่อนไหวไวจะถูกเรยีกวา คยีเฟรม (Keyframe)

5. คยีเฟรมที่ไมมอีอบเจ็กต

6. คยีเฟรมที่มอีอบเจ็กต

การสรางคยีเฟรม

Key frame ในการสราง keyframe ขึ้นมาทุกครั้ง หากมีช้ินงานวางอยู

บน Keyframe กอนหนาในเลเยอรเดียวกัน โปรแกรมจะคัดอกช้ินงานนั้น

มาวางบน Keyframe ใหมดวย ทําใหสามารถปรับแตงแกไขสวนประกอบ

ในคยีเฟรมใหมได โดยสวนประกอบในคยีเฟรมเดมิจะไมถูกแกไขดวย

Blank keyframe คียเฟรมวาง คือ เฟรมที่ไมมีขอมูลใดๆในเฟรม เมื่อ

เราคลกิที่คยีเฟรมวางนั้น ก็จะไมเกิดผลใดๆ บน stage ซึ่งสามารถสราง

คียเฟรมวางขึ้นมาเพื่อใสช้ินงานใหม หรือเวนชวงเวลาในการแสดงผล

แอนเิมชันก็ได

ลักษณะการทํางานของ ลักษณะการทํางานของ FrameFrameMotion-tween เฟรมที่สรางภาพเคลื่อนไหว

แบบเคลื่อนที่ มสีัญลักษณเปนรูปลูกศรสดีําอยูระหวางจุด 2 จุด บนพื้นสฟีาออน

Shape-tweened เฟรมที่สรางภาพเคลื่อนไหวแบบเปลี่ยนรูปราง มีสัญลักษณเปนรูปลูกศรสดีํา อยูระหวางจุด 2 จุด บนพื้นสเีขียวออน

Action frame มสีัญลักษณเปนรูป a อยูกลาง Frame เปนตําแหนงที่มคีําสั่งAction Script ประกอบอยูภายใน Frame นัน้

เสนประ เฟรมที่ไมสมบูรณหรอืมขีอผิดพลาด เชน คยีเฟรมสิ้นสุดถูกลบไป

Layer

การทํางานแบบ Layer เปนเหมอืนการวางแผนใสซอนทับกันเปน

ลําดับขัน้ขึ้นมาเรื่อย ๆ

บรเิวณของ Layer ที่ไมมรีูปจะเห็นทะลุถงึ Layer ที่อยูขางลาง

ในแตละ Layer จะแยกการทํางานอยางชัดเจน มคีุณสมบัตติาง ๆ

เปนของตัวเอง และการแกไขที่เกดิขึ้นในแตละ Layer จะไมสงผลตอ

Layer อื่น ๆ

Symbol และ InstanceSymbol การนําวัตถุที่เปนภาพกราฟก มากําหนดเปนตนแบบเพื่อนําไปใชเปนสวนประกอบในช้ินงาน คลายๆ กับการทําสําเนาภาพ โดย symbol แบงไดเปน

Movie Clip เปนวัตถุที่สรางภาพเคลื่อนไหว

Button เปนวัตถุปุมกดที่สามารถคลกิได

Graphic เปนวัตถุที่สรางขึ้นจากภาพกราฟกทั่วไป

เราไมสามารถนํา symbol มาใชบนสเตจไดโดยตรง แตจะทําไดเพยีงสําเนาของ symbol เรียกวา Instance มาใช ซึ่งหนึ่ง symbol มไีดหลาย Instance

Instance คอื Symbol ที่ถูกใชงานอยูบน Stage โดย Instance สามารถปรับคุณสมบัตติางๆ ได เชน สี ขนาด โดยไมมีผลกระทบตอ symbol

การปรับแตง การปรับแตง InstanceInstance

สามารถปรับแตง Instance โดยไมกระทบกับ Symbol

ปรับความสวาง ความเขม

ปรับเปลี่ยนสี

ปรับความโปรงใส

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

การสราง การสราง Symbol Symbol ประเภท ประเภท GraphicGraphic

สราง Symbol ประเภท Graphic ใหม

ลองสราง Symbol ใหม โดยการเลอืก Insert + New Symbol

จะสังเกตเห็นเครื่องมอื + ตรงกลางรูป

เมื่อสรางเสร็จแลวลองนํา Symbol มาวางไวในสเตจ จะเรยีกวา

Instance

แลวกลับไปแกไข Symbol เพื่อดูการเปลี่ยนแปลงภายในสเตจ

สราง Symbol ประเภท Graphic จากรูปที่มอียูแลว

สามารถเลอืกวัตถุที่มอียูแลวใหเปน Symbol โดยการเลือกวัตถุ

ที่ตองการจะเปลี่ยน แลวเลือก Modify + Convert to Symbol

หลักการทํางานของ Flash

ขั้นตอนท่ี 1

นําเขาภาพกราฟกหรอื

ภาพที่สรางข้ึนมา

ขั้นตอนท่ี 2

แปลงสวนประกอบตาง ๆ

ใหเปน Symbol

ขั้นตอนท่ี 3

ทําการสราง Animation

โดยจะใสเสยีง หรอื Script

ขั้นตอนท่ี 4

Publish ออกมาเปน

ช้ินงาน

*.fla (Flash Movie)

เปนไฟลที่ไดจากการสรางช้ินงานใน Flash ที่สามารถนํามาแกไขเปลี่ยนแปลงได

*.swf (Shockwave Flash)

เปนไฟลที่ Flash สรางขึ้นหลังจากการแสดงผลออกมา

สามารถดูผลการแสดงไดโดยไมตองเปดโปรแกรม Flash

ในการ Publish จะมกีารสรางไฟล .html เพิ่ม เพื่อเปนตัวเรยีกใชไฟล *.swf ขึ้นมาใหทํางาน

นามสกุลของ Flash