แบบฝึกทักษะ Flash ตอนที่ 1

แบบฝึกทักษะ Flash ตอนที่ 2

แบบฝึกทักษะ Flash ตอนที่3

แบบฝึกทักษะ Flash ตอนที่ 4

พัฒนาสื่อด้วย Flash

บทที่  2 
ฝึกทักษะการใช้เครื่องมือ

ในการพัฒนาสื่อด้วยโปรแกรม Flash  นั้น สิ่งจำเป็นและสำคัญเบื้องต้นคือการฝึกทักษะการใช้เครื่องมือให้เกิดความชำนาญ  พร้อมทั้งฝึกการใช้คีย์ลัด (Shortcut Key ) เพื่อให้สามารถพัฒนางานได้อย่างรวดเร็วและผลงานมีประสิทธิภาพ   ผู้เขียนเคยพบผู้พัฒนางานโดยใช้โปรแกรม Flash แต่ได้ละเลยการฝึกทักษะพื้นฐานที่จำเป็น พบว่าการทำงานต้องอาศัยขั้นตอนมากมายทำให้ปฏิบัติงานได้ค่อนข้างช้าก่อให้เกิดการเบื่อหน่าย   จึงขอแนะนำให้ปฏิบัติกิจกรรมอย่างเคร่งครัด
กิจกรรมที่ 1   ทักษะเบื้องต้นเกี่ยวกับไฟล์

จุดประสงค์   เพื่อให้เกิดทักษะในการสร้างไฟล์ใหม่  ปิดไฟล์ เปิดไฟล์  Zoom in Zoom out
โดยการใช้คำสั่งจากเมนูหรือใช้คีย์ลัดอย่างใดอย่างหนึ่ง (แนะนำให้ใช้คีย์ลัด

เพื่อให้เกิดทักษะและความเคยชิน)

ขั้นตอนการปรากฏกิจกรรม

ที่	คำสั่งจากเมนู	คีย์ลัด	กิจกรรม/คำถาม
1	File > New	Ctrl + n	เกิดอะไรขึ้นหลังจากใช้คำสั่ง แล้วลองบันทึกข้อความที่เกิดขึ้นบนจั่วหน้า
2		Ctrl + 2	เกิดอะไรขึ้นหลังจากใช้คำสั่ง
3	View>Zoom in	Ctrl + +	ขนาดของ stage ที่มองเห็นเป็นอย่างไร
4	View>Zoom in	Ctrl + +	ทำซ้ำๆ สังเกตผลเป็นอย่างไร
5	View>Zoom out	Ctrl + -	ขนาดของ stage ที่มองเห็นเป็นอย่างไร
6	View>Zoom out	Ctrl + -	ทำซ้ำๆ สังเกตผลเป็นอย่างไร
7	View>Zoom in/ View>Zoom out	Ctrl + +/Ctrl + -	ทำสลับไปสลับมา สังเกตผลเป็นอย่างไร
8	File > Save	Ctrl + s	จะเกิดอะไรขึ้น  ถ้าพบหน้าต่างใหม่ ลองพิมพ์ข้อความอะไรก็ได้ แล้วคลิก   Save (ควรบันทึกไฟล์ไว้ในโฟลเดอร์เฉพาะ)
ที่	คำสั่งจากเมนู	คีย์ลัด	กิจกรรม/คำถาม
9	File > Close	Ctrl + w	หากเกิดพบปุ่ม Yes/No ให้คลิก Yes  แล้วสังเกตผลที่เกิดขึ้น
10	File > Open	Ctrl + o	ค้นหาไฟล์ที่ save ไว้ หากยังไม่เจอลอง Browse หาตามตำแหน่ง Folder ที่เคย save งานเมื่อเจอแล้วลองคลิกที่ชื่อไฟล์ > open สังเกตผลที่เกิดขึ้น

สรุป/อธิบาย

ที่	คำสั่งจากเมนู	คีย์ลัด	คำอธิบาย
1	File > New	Ctrl + n	เปิดไฟล์ใหม่ โดยปกติโปรแกรมจะตั้งชื่ออัตโนมัติเป็น Untitled-1 หรือ Untitled ตามด้วยเลขอื่นๆ ขึ้นอยู่กับจำนวนครั้งที่เปิด
2		Ctrl + 2	Zoom ขนาดของ Stage ให้เต็ม Work area
3	View>Zoom in	Ctrl + +	Zoom in ผลคือมองเห็น Stage โตขึ้น ซึ่งจริงแล้วขนาดของ Stage เท่าเดิม แต่ที่เห็นโตเพราะคล้ายกับมองในระยะใกล้
4	View>Zoom in	Ctrl + +	ทำซ้ำๆ จะเห็น Stage/Objectsโตขึ้นเรื่อยๆ แต่จะหยุดโตเมื่อโตเต็มที่แล้ว
5	View>Zoom out	Ctrl + -	Zoom out ผลคือมองเห็น Stage เล็กลง ซึ่งจริงแล้วขนาดของ Stage เท่าเดิม แต่ที่เห็นเล็กลงเพราะคล้ายกับมองในระยะไกล
6	View>Zoom out	Ctrl + -	ทำซ้ำๆ จะเห็น Stage/Objects เล็กลงเรื่อยๆ แต่จะหยุดเล็กเมื่อเล็กเต็มที่แล้ว
ที่	File > Save	คีย์ลัด	คำอธิบาย
7	View>Zoom in/ View>Zoom out	Ctrl + +/Ctrl + -	เห็นว่า Stage โตขึ้นเมื่อกด Ctrl + + และจะเล็กลงเมื่อกด Ctrl + -
8	File > Save	Ctrl + s	การบันทึก จะเกิดหน้าต่างให้พิมพ์ชื่อไฟล์หากไฟล์นั้นยังไม่ได้ตั้งชื่อ   หากเคยตั้งชื่อไว้แล้วจะไม่พบสิ่งที่ผิดสังเกตใดๆ แต่ความเป็นจริงโปรแกรมจะจำค่าครั้งสุดท้ายและบันทึกลงในไฟล์ที่ตั้งชื่อไว้เดิม หากไม่เคยตั้งชื่อจะเกิดช่องหน้าต่างให้เราพิมพ์ชื่อไฟล์โดยไม่ต้องใส่ส่วนขยายเพราะโปรแกรมจะเติมให้เองเป็น fla โดยสังเกตได้จาก จั่วหน้า (Title bar)
9	File > close	Ctrl + w	ปิดไฟล์   ที่กำลังทำงานนั้นโดยไม่ปิดโปรแกรม หากมีการเปลี่ยนแปลงการทำงานในไฟล์นั้นจะเกิดปุ่มถามว่าจะบันทึกค่าครั้งสุดท้ายหรือไม่ หากต้องการบันทึกให้คลิก Yes และหากไม่ต้องการบันทึกให้คลิก No
10	File > Open	Ctrl + o	เปิดไฟล์   เมื่อเจอไฟล์ที่บันทึกแล้วพบว่าภาพหรือข้อความต่างๆ ที่เคยสร้างไว้จะปรากฎขึ้น

บันทึกภายหลังปฏิบัติกิจกรรม..........................................................................................
...........................................................................................................................................

...........................................................................................................................................

...........................................................................................................................................

...........................................................................................................................................

กิจกรรมที่ 2 ทักษะเบื้องต้นเกี่ยวกับการใช้ Line tool และ Timeline

จุดประสงค์   1. เกิดทักษะเบื้องต้นจากการใช้ Line tool ใน Toolbar
2. เกิดทักษะเบื้องต้นเกี่ยวกับการใช้ Timeline   
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย

	1.   กดปุ่ม Line tool ใน Toolbox  (ถ้าหากไม่พบ Toolbox ให้คลิก windows> tools หรือกด Ctrl + F2 เพื่อให้ปรากฎ Toolbox ) ดังภาพที่ 16 2.   ทดลองลากเส้น แล้วเปลี่ยนค่าต่างๆ ใน หน้าต่าง Properties แบบต่างๆ แล้วสังเกตผลที่เกิดขึ้น  อาจได้ผลดังภาพที่ 17 ภาพที่ 17
ภาพที่ 16
3. กด Ctrl + a  หมายถึงเลือก objects ทั้งหมด แล้วกด Ctrl + x เพื่อตัด Objects ทั้งหมด       ที่เลือกออกไป จาก Stage  ซึ่งจะพบว่าเส้นต่างๆ บน Stage หายไป
4.   กด Ctrl + z หลายๆ ครั้งแล้วสังเกตผลที่เกิดขึ้น  จะพบว่าเป็นการย้อนกลับ(Undo)       ขั้นตอนต่างๆที่เราได้เคยทำมาแล้ว มีประโยชน์มากในกรณีที่เกิดความผิดพลาดในงาน  ที่เราสร้างเพิ่มเติมไม่ดีเท่าที่ควร  (ย้อนได้จำกัดไม่เกินจำนวนขั้นที่กำหนดไว้ ใน    General Tab ของ  Undo level ซึ่งเป็นเมนูใน Edit > Preferences)
5.   กด Ctrl + y หลายๆ ครั้ง แล้วสังเกตผลที่เกิดขึ้น  จะเห็นว่าเป็นการทำงานที่ตรงกันข้าม  กับ Undo ซึ่งเราเรียกกันว่า Redo
6.   กด Ctrl + a เพื่อเลือกวัตถุ( Objects) ทั้งหมดใน Work area แล้วกด Del เพื่อลบทุกสิ่ง  ทุกอย่างใน Work area  แต่จะไม่เป็นการลบวัตถุที่เก็บไว้ใน Library
7.   เลือก Line Tool เช่นเดียวกับครั้งแรก แต่ในขณะลากเส้นให้กด Shift ค้าง แล้วสังเกต    เส้นที่เกิดจากการลากเปรียบเทียบกับเส้นที่เกิดขึ้นจากกิจกรรมข้อที่ 2
ซึ่งจะพบว่าแตกต่างคือ ครั้งหลังเส้นที่จะเกิดขึ้นเป็นไปได้คือ  แนวดิ่ง แนวระดับ และเฉียง 45    องศา  เท่านั้น ดังภาพที่ 18     แล้วทดลองลบ objects  ทั้งหมด  ออกไปโดยใช้คำสั่งดังได้กล่าวมาแล้ว
		ภาพที่ 18
8.   คลิกปุ่ม Insert Layer บน  Tool        ของ Timeline ดังภาพ เพื่อเพิ่ม Layer และลองImport ภาพจาก        ภายนอกโดยการใช้คำสั่ง File > Import  ดังแสดงในภาพที่ 19		ภาพที่ 19
9.   คลิกปุ่ม Delete Layer บน Tool        ของ Timeline เพื่อลบ Layer ที่ไม่        ต้องการออก (การลบ Layer จะทำ        ให้ ทุก Object ใน Layer นั้น        หายไป  และให้สังเกตว่า เมื่อเลือก        ทำงานที่ Layer ใดจะเกิดแถบสีดำ        บริเวณชื่อเลเยอร์นั้นๆ        ดังภาพที่ 20		ภาพที่ 20
10. Import ภาพจากภายนอก วางบน Stage Layer ละ 1 ภาพ เป็น        จำนวน 2  Layer  แล้วคลิกปุ่มซึ่ง        เป็นจุดสีดำด้านล่างของภาพตา         แล้วสังเกตภาพบน Stage        ดังภาพที่ 21		ภาพที่ 21
จะเห็นว่าเมื่อคลิกที่นี่ ทุก Objects ในเลเยอร์นี้มองไม่เห็น (ไม่ได้หายไป) ซึ่งทำ   ให้เกิดความสะดวกในการทดสอบว่าภาพใดอยู่ในเลเยอร์ใด  และลองสังเกตจะพบว่า ปุ่มเดิมเกิดเครื่องหมายกากบาทสีแดงให้เห็น
11.  ทดลองคลิกเมาส์ใต้ภาพลูกกุญแจ ที่ Layer หนึ่ง แล้วทดลองลบ Objects หรือลากหรือ       กระทำการ ใดๆใน Layer นั้น  จะพบว่าไม่สามารถทำให้ Object ในเลเยอร์นั้น       เปลี่ยนแปลงได้  เนื่องจากเป็นการ Lock Layer นั้นๆ
12. ทดลองคลิกเมาส์ขวาบนเลเยอร์  ซึ่งจะ        เกิดหน้าต่างเมนูย่อย แล้วเลือกเมนู Insert Folder จะเห็นได้ว่าเมื่อมีเลเยอร์        จำนวนมาก  เราสามารถสร้าง  Folder        ของเลเยอร์และสามารถลากเลเยอร์ใส่        ใน Folder ได้ ดังภาพที่ 22			ภาพที่ 22
13. คลิกเมาส์ที่ปุ่มมุมขวาบนของ Timeline  จะพบเมนูย่อยให้เลือก        ขนาดของช่อง Timeline ได้หลายขนาดดังภาพที่ 23 14. คลิกที่ภาพสามเหลี่ยมสีขาวด้านหน้าของ Folder จะเห็นว่าเป็น        การปิดหรือเปิด Folder ของ Layer ดังภาพที่ 24   ภาพที่ 24
				ภาพที่ 23
บันทึกภายหลังปฏิบัติกิจกรรม.......................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ...........................................................................................................................................
กิจกรรมที่ 3   ทักษะเบื้องต้นเกี่ยวกับการใช้  tool  ต่างๆ   จุดประสงค์   1. เกิดทักษะเบื้องต้นจากการใช้  tool ต่างๆ  ใน Toolbar                   2. เกิดทักษะเบื้องต้นเกี่ยวกับการจัดการภาพ  ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย
1.   คลิกเมาส์ที่ Free Transform Tool        จะทำให้เกิด Handle รอบ Object  ใน จำนวน 8 จุด แล้วทดลองนำเมาส์        ลากจากมุมใดๆ  เปรียบเทียบกับ        ลากเมาส์จากด้านใดๆ  จะเห็นว่า        ทำให้ภาพขยายหรือย่อได้  นอก        จากนี้เมื่อเมาส์ใกล้มุมใดๆ Icon        ของเมาส์จะเปลี่ยนเป็นลูกศรรูป        วงโค้ง  ขณะนี้ถ้าลากเมาส์จะทำ        ให้วัตถุหมุนตามที่ต้องการได้ ดัง        แสดงในภาพที่ 25		ภาพที่ 25
2.   คลิกเพื่อเลือกภาพที่ต้องการแก้ไข ให้เกิด Handle รอบๆ 8 จุด แล้วกด Ctrl + B (Break Apart ) เพื่อแยก Object นี้เป็นส่วนย่อยๆ ได้ จะสังเกตเห็นเป็นจุดเล็กๆ บน  Object        นั้นเต็มไปหมด
3.   เลือก Lasso Tool แล้วลากเมาส์บนกราฟิกใดๆ ให้เป็นวงปิดรูปใดๆ  แล้วสังเกตว่า        อาณาบริเวณที่เลือกเป็นอย่างไร   ดังภาพที่ 26
ภาพที่ 26		ซึ่งจะสังเกตเห็นจุดประสีขาวในส่วนที่เลือก 4.   กด Ctrl + x (ตัด) จะสังเกตได้ว่าส่วนที่เลือก        ถูกตัดออก เกิดเป็นสีขาวๆ ดังแสดงใน        ภาพที่ 27
ภาพที่ 27		5.   กด Ctrl + z เพื่อ Undo  จะเห็นภาพกลับสู่        สภาพเดิม  เลือก Lasso tool แล้วลากเพื่อเลือก        บริเวณครั้งใหม่โดยการกด Shift ร่วมด้วย        ในขณะลาก เปรียบเทียบกับการไม่ใช้ Shift        ร่วม  จะเห็นว่าเมื่อใช้ Shift ร่วม  ทำให้เกิด        บริเวณที่เลือกเพิ่มจากที่เคยเลือกไว้ก่อนได้
6.   กด Ctrl + s เพื่อบันทึกไฟล์ หรือ  คลิก File > Save เพื่อบันทึกไฟล์นี้ในชื่อใหม่ สมมติ     ว่าชื่อ ex02.fla (การพิมพ์ชื่อไฟล์ไม่ต้องใส่ส่วนขยายเพราะโปรแกรมจะเพิ่มให้เอง        โดยอัตโนมัติ)
บันทึกหลังปฏิบัติกิจกรรม............................................................................................. ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ...........................................................................................................................................

หมายเหตุ  1.การกำหนดจำนวนขั้นตอนที่สามารถ Undo ได้ ทำได้โดยการกด Edit > Preferences หน้าต่าง (Dialog box )ใหม่  เลือก Tab ชื่อ General  เปลี่ยนค่าในช่อง Undo levels ตามที่ต้องการ แต่ไม่ควรมีค่ามากเกินไปเพราะจะเสียหน่วยความจำมาก
                   2. วัตถุใน Library   มักเกิดจากการImport กราฟิก เสียง ฯลฯ จากภายนอก
มีประโยชน์ในการลดหน่วยความจำในกรณีที่ใช้วัตถุนั้นๆ หลายครั้งในไฟล์นั้นๆ จะเสีย
หน่วยความจำเพียงครั้งเดียว  หากต้องการลบวัตถุใน Library สามารถ กด Ctrl +l เพื่อเปิดหน้าต่าง Library > คลิกเมาส์ขวาในช่อง Name ของวัตถุที่ต้องการลบ > Delete

กิจกรรมที่ 4   ฝึกทักษะเบื้องต้นเกี่ยวกับการใช้ Pen tool, Pencil Tool  และ Brush Tool Rectangle Tool, Oval Tool,  Eye droper

จุดประสงค์ที่   1.เพื่อให้เกิดทักษะเบื้องต้นจากการใช้ Pen tool , Pencil Tool  , Brush Tool          Rectangle Tool, Oval Tool,  Eye dropper
2. เกิดทักษะในการเปลี่ยน Properties ใน Properties panel
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย

1. คลิก Pencil Tool ใน Toolbox แล้วเปลี่ยนค่า ต่างๆ ใน Properties  ดังนี้                    1)   คลิกที่จุดใดๆ ใน Stage แล้วคลิกที่จุดใหม่อีก 1 จุด  แล้วสังเกตผลที่เกิดขึ้น                    2)   คลิกที่จุดใดๆ ใน Stage แล้วลากเมาส์ที่จุดใหม่อีก 1 จุด  แล้วสังเกตผลที่        เกิดขึ้นจะเห็นว่าหากคลิกที่จุดใหม่ ดังข้อ 1)  จะได้เส้นตรง  และหากปฏิบัติดังข้อ  2)     จะได้เส้นโค้ง    และหากต้องการทำให้โค้งมากหรือน้อยขึ้นอยู่กับการลากเส้นยึดให้ยาว        หรือไม่   นอกจากนี้เรายังเลือกชนิดของเส้น ขนาดของเส้น สีของเส้น หรือเปลี่ยน Style ของเส้นจากการคลิกที่ Custom ฯลฯ ด้วยการเปลี่ยนตัวเลือกใน  Properties Panel     ดังภาพที่ 28
ภาพที่ 28
2.  คลิก Oval Tool  แล้วเปลี่ยนตัวเลือก ใน Fill Color ของ Properties window  เป็นค่าต่างๆ             แล้วลองลากเมาส์บน Stage  แบบธรรมดา และการใช้คีย์ Shift ร่วม    ลองสังเกตผลที่        แตกต่างซึ่งจะเห็นว่า เมื่อใช้ Shift ร่วม จะเกิดภาพวงกลม และเมื่อไม่ใช้คีย์ Shift ร่วมจะ
เกิดภาพวงรี ดังภาพที่ 29    3. ทดลองใช้ Rectangle Tool     แล้วปฏิบัติตามกิจกรรมข้อ 2     เพื่อเปรียบเทียบผลที่เกิดขึ้น 4. ทดลองใช้ Brush Tool แล้ว     เปลี่ยนค่า จาก Fill tool ใน Toolbox แล้วลากผ่าน object     ต่างๆ ใน Stage ดังภาพที่ 30
			ภาพที่ 29
5. Copy ภาพจากที่อื่นแล้ว     วางภาพบน Stage 6. กด Ctrl +b เพื่อ Break apart 7. เลือก Eyedropper ใน Toolbox แล้วคลิกเมาส์บน     ภาพที่เรา Break apart
เรียบร้อยแล้ว			ภาพที่ 30
8. เลือก Oval tool แล้วสร้างวงรี     บน Stage จะสังเกตเห็น     วงรีที่เกิดขึ้นมีภาพเหมือน     ภาพที่เรา Break apart เดิม     ดังภาพที่ 31			ภาพที่ 31
9. เลือก Pencil  tool และใช้ Option ของ Pencil  tool แบบต่าง ๆ  แล้วลองลากเส้น  และ     สังเกตว่า   ผลของ Option แบบ Straighten , Smooth และ Ink แตกต่างกันอย่างไร     ดังภาพที่ 32
ภาพที่ 32
10. นำเมาส์เข้าใกล้ปลายเส้นใดๆ แล้วสังเกตรูปร่างของ Mouse pointer เมื่อเห็นเป็นภาพ     เส้น 2 เส้นตั้งฉากกันด้านล่างลูกศร   ลองลากปลายเส้นเหล่านั้นแล้วสังเกตผลที่เกิดขึ้น     จะเห็นว่าเราสามารถยืดปลายเส้น หรือเปลี่ยนทิศทางของเส้นได้ ดังภาพที่ 33
ลองสังเกตว่าเมื่อ Mouse Point Pointer เกิดเส้นโค้งใต้ลูกศรแล้ว ลากกลางเส้นต่างๆ      แล้วสังเกตผลที่เกิดขึ้น  ซึ่งจะสังเกตได้ว่าสามารถทำให้เส้นโค้งขึ้นได้
ภาพที่ 33
นอกจากนี้ยังมีตัวเลือก Snap to object (ภาพแม่เหล็ก) ยังพบว่าเราสามารถทำให้เส้นเชื่อมต่อที่ปลายเส้นได้โดยง่ายอีกด้วย
11. ทดลองเปลี่ยน Option ของ Fill Color เป็น No Fill โดยการคลิกเลือกไม่ให้มีสีเติม     ดังภาพที่ 34  หรือเลือกหน้าต่างสีได้หลากหลายเมื่อใช้ตัวเลือกสีแบบ Custom color
		ภาพที่ 34
12. เลือก Window > Color Mixer  เพื่อเปิดหน้าต่าง Color Mixer Panel เราสามารถเปลี่ยนค่า     ของ Gradient ได้เองตามที่ต้องการ ดังภาพที่ 35
13. บันทึกไฟล์ สมมติชื่อ ex04.fla
		ภาพที่ 35
14. ฝึกทบทวนคำสั่งต่างๆ หลายๆ ครั้งเพื่อให้เกิดความชำนาญ  15. นอกจากแบบฝึกต่างๆ ที่กำหนดไว้แล้วควรฝึกทักษะต่างๆ ที่เกี่ยวข้องในการพัฒนางาน ด้วยโปรแกรม Flash อีกมาก  แต่ในที่นี้จะให้ฝึกเฉพาะส่วนที่สำคัญๆ เพื่อเป็นพื้นฐานในการพัฒนาสื่อการเรียนการสอน
บันทึกหลังปฏิบัติกิจกรรม.................................................................................................. ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ...........................................................................................................................................
ศึกษาตอนที่ 1				ศึกษาตอนที่ 3

โดย อ.องอาจ ชาญเชาว์ สพท.กทม.2
chanmedia.bkk2ict.net