บทที่ 1 แนะนำโปรแกรม

บทที่ 3

การสร้างภาพเคลื่อนไหว

กิจกรรมที่ 5 ฝึกทักษะเบื้องต้นการทำภาพเคลื่อนไหว แบบ Tweening Motion โดยใช้ Object อย่างง่ายที่สร้างขึ้น
ด้วยเครื่องมือในโปรแกรม Flash

จุดประสงค์ เพื่อให้เกิดทักษะเบื้องต้นการทำภาพเคลื่อนไหวแบบ Tweening Motion
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย

1. กด Ctrl + n เพื่อเปิดไฟล์ใหม่
2. Double Click ที่ Frame rate ซึ่งอยู่ด้านล่างของ Timeline จะเกิดหน้าต่าง Document
Properties แล้วปรับขนาดของ Stage ให้เป็น 600 x 400 Pixel อัตราการแสดงผล
เป็น 8 ภาพต่อวินาที แล้วคลิกที่ OK ดังภาพที่ 36

3. กด Ctrl + 2 (เลข 2 ใน
     Character key) เพื่อให้
     เห็น Stage เต็ม Work
     area
4. ปรับ Stroke Color และ
     Fill Color ใน Toolbox
     ตามที่ต้องการ

ภาพที่ 36

5. เลือก Oval Tool แล้วกด Shift เพื่อวาดวงกลม ทดลองคลิก 1 ครั้งแล้วลากวงกลม
ออกจากที่เดิมเปรียบเทียบกับ Double Click แล้วลากจะเห็นว่าหากคลิกครั้งเดียว
Stroke จะแยกจาก Fill หาก Double Click ผลคือ Stroke จะไปพร้อมกับ Fill

6. คลิกเมาส์ขวาที่ Frame ที่ 1 Layer ที่ 1 เลือก Create Motion Tween ดังภาพที่ 37

ภาพที่ 37

7. เลือก Frame ที่ 8 ของ Layer 1 (เพื่อกำหนดให้เกิดการเคลื่อนไหวในช่วงนี้ 1 วินาที )

8. กด F6 ( Insert Keyframe) จะเกิดลูกศรสีดำ และมี Play head ดังแสดงในภาพที่ 38

ภาพที่ 38

9. เลื่อนภาพวงกลมไปไว้ในตำแหน่งใหม่ แล้วกด Ctrl + Enter เพื่อทดสอบ Movie
(ภาพเคลื่อนไหวในที่นี่เรียกว่า Movie) หรือคลิก Window >Toolbar> Controller ซึ่ง
จะเกิดกลุ่มของปุ่มควบคุมการเคลื่อนไหวของภาพ ดังภาพที่ 39

แล้วคลิกที่ Play จะเห็นการเคลื่อนไหว
10. บันทึกไฟล์สมมติว่าชื่อ ex04.fla หรือชื่ออื่นใดตาม
ต้องการ

ภาพที่ 39

11. เลือก File > Publish Setting ในTab ชื่อ Format เลือก Type ต่างๆ ดังภาพที่ 40

ภาพที่ 40

เพื่อเลือกไฟล์ที่ต้องการเป็น swf , html และ exe คลิกต่อที่ Publish ซึ่งผลคือจะทำให้
เกิดไฟล์ 3 ชนิดที่ชื่อเดียวกันแต่ต่างส่วนขยาย คือ ex04.swf, ex04.html และ ex04.exe

12. เปิดไฟล์ ex04.html จะเห็นว่าพบภาพเคลื่อนไหวตามที่สร้างไว้ทุกประการ สำหรับ
       ไฟล์ ex04.swf จะเป็นไฟล์ที่ใช้แสดงผลใน ex04.html ดังนั้นไฟล์ทั้ง 2 ชนิดจะต้อง
       ควบคู่ไปด้วยกันเสมอ และเป็นไฟล์ที่นำเสนอผลงานผ่านเครือข่ายอินเทอร์เน็ตได้
       ส่วนไฟล์ ex04.exe สามารถนำไปใช้เดี่ยวๆ กับเครื่องที่ใช้งานแบบเครื่องเดี่ยว
       (Stand alone)ได้

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

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

กิจกรรมที่ 6 ฝึกทักษะเบื้องต้นการทำภาพเคลื่อนไหว แบบ Tweening Motion โดยใช้ Object ที่สร้างขึ้น
ด้วยเครื่องมือใน Flash และการเคลื่อนไหวซับซ้อนขึ้น

จุดประสงค์ เพื่อให้เกิดทักษะเบื้องต้นการทำภาพเคลื่อนไหวแบบ Tweening Motion แบบซับซ้อนขึ้น
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย

1. กด Ctrl + n เพื่อเปิดไฟล์ใหม่

2. เลือก Modify > Document หรือ Double click ที่ frame rate เพื่อปรับแต่งขนาดของ Stage
และอัตราการแสดงผลให้ได้ตรงกับที่ต้องการ แล้วคลิกที่ Make Default เพื่อให้การ
สร้างไฟล์ใหม่ครั้งต่อไปมีขนาดเท่ากับที่กำหนดครั้งนี้ในครั้งต่อไป ดังภาพที่ 41

3. สร้าง สี่เหลี่ยมด้วย
     Rectangle tool โดยมี
     ความยาวแนวดิ่ง
     มากกว่าแนวระดับดัง
     แสดงในภาพที่ 42

ภาพที่ 41

ภาพที่ 42

4. คลิกเมาส์ขวาที่ Frame ที่ 1 เพื่อ Create Motion Tween จะสังเกตเห็นวงกลมซึ่งมี
เครื่องหมาย+กึ่งกลางภาพ
5. กด F6 ที่ Frame 24 จะพบว่าเกิดเป็นภาพลูกศรระหว่าง Frame ที่ 2-23 โดย Frame ที่ 1
เป็นจุดสีดำ และ Frame 25 เป็นจุดสีดำเช่นเดียวกัน ดังแสดงในภาพที่ 43

ภาพที่ 43

6. เลือก Frame ที่ 1 แล้วคลิกภาพสี่เหลี่ยม ต่อด้วยการเปลี่ยน Color เป็น Alpha 0 %
ซึ่งหมายถึงให้โปร่งใส แล้วลากสี่เหลี่ยมไปวางทางด้านขวามือของ Stage พร้อมทั้ง ใช้เครื่องมือ Free Transform Tool ขยายขนาดของสี่เหลี่ยม เพื่อให้มีการเคลื่อนที่ พร้อมกับขนาดค่อยๆ โตขึ้น
7. เลือก Frame ที่ 1 ใน Timeline แล้วเปลี่ยน Properties ตามแสดงในภาพที่ 44

ภาพที่ 44

ช่อง Rotate เป็น CW หมายถึงให้หมุนตามเข็มนาฬิกา 3 รอบ แล้วทดลอง Test
Movie ด้วยการกด Ctrl + Enter

                   จะเห็นว่าจากภาพที่จางแทบมองไม่เห็นจะค่อยๆ ชัดขึ้นและมีการหมุนเป็น
       จำนวน 3 รอบ ในขณะเดียวกับเคลื่อนที่ไปทางขวามือและขนาดของสี่เหลี่ยมก็
       ค่อยๆ โตขึ้นด้วย

8. ทดลองนำเมาส์จับที่ปลายลูกศรใน Timeline ลากให้ยาวออกไป แล้วทดสอบการ
แสดงผล

9. นำเมาส์เลือก Frame ที่ 1 > กด Ctrl + F5 (เพื่อลบ Frame) แล้วทดสอบการแสดงผล

10. บันทึกไฟล์ และ Publish เช่นเดียวกับไฟล์อื่นๆ

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

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

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

7 ฝึกทักษะเบื้องต้นการทำภาพเคลื่อนไหว แบบ Tweening Motion โดยใช้ Object ภาพเคลื่อนไหวจาก ภายนอก

จุดประสงค์ เพื่อให้เกิดทักษะเบื้องต้นการทำภาพเคลื่อนไหวแบบ Tweening Motion ดึงภาพเคลื่อน
ไหวจากภายนอก
ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย

1. กด Ctrl +n เพื่อเปิดไฟล์ใหม่
2. เลือกเมนู Insert > New Symbol ซึ่งจะเกิดหน้าต่าง Create New Symbol ใส่ Name เป็น bird (ไม่ใส่ก็ได้เพราะโปรแกรมจะใส่ให้เอง) เลือก Bahavior เป็น Movie Clip คลิก OK ซึ่งจะเกิด Stage พิเศษ สำหรับสร้าง ภาพเคลื่อนไหวหลังฉากที่เรียกกันว่า Movie Clip ดังภาพที่ 45
ภาพที่ 45
3. ผลจากการปฏิบัติตามข้อ 2 จะเกิด Timeline พิเศษของ Movie Clip ในที่นี้ชื่อ bird
ตามที่เราได้ตั้งชื่อไว้หลัง Scene1 (ในภาพเคลื่อนไหว ไฟล์หนึ่งๆ อาจมีได้หลาย Scene ) ดังภาพที่ 46		ภาพที่ 46
4. เลือก File > Import ซึ่งจะเกิดหน้าต่างให้เราใส่ชื่อไฟล์ภาพ ในที่นี้จะ Import ภาพเคลื่อนไหวประเภท Gif
5. คลิกที่ Scene 1 เพื่อกลับสู่ Timeline ของ Scene เหมือนเดิม ซึ่งจะพบว่าไม่ มีอะไรปรากฏอยู่ใน Stage แต่แท้จริง แล้วจะเกิดMovie Clip ใน Stage ดัง ภาพที่ 47 6. ลาก Movie Clip จาก Library วางบน Stage			ภาพที่ 47
7. กด Ctrl + Enter เพื่อทดสอบ เบื้องต้นว่า Movie Clip ว่าเคลื่อนไหวหรือไม่ ซึ่งถ้าทำถูกต้องจะเห็นภาพเคลื่อนไหว ในที่นี้จะเห็นนกกระพือปีกบินอยู่กับที่ ดังแสดงในภาพที่ 48
8. เราสามารถทำให้ภาพเคลื่อน ที่เหมือนบินไปจริงๆ โดย การ Create Motion Tween กำหนด Key frameแล้วลาก นกไปยังอีกที่หนึ่ง นกก็จะ บินได้คล้ายจริง แต่การบินยัง เป็นเส้นตรง
	ภาพที่ 48
9. คลิกปุ่ม Add Motion Guide เพื่อกำหนดเส้นทางการบินให้กับนก ดังภาพที่ 49
แล้วใช้ Pencil Tool ลากเส้นทางที่ต้องการให้นกบิน โดยระมัดระวังว่า จุดเริ่มต้นของเส้นต้องผ่านวงกลมที่มีกากบาทอยู่ภายในซึ่งหมายถึงจุดอ้างอิงที่นกอาศัยอยู่ดังภาพที่ 50
				ภาพที่ 49

ภาพที่ 50
เส้นสีน้ำเงินที่ปรากฏไม่ใช่ภาพ แต่เป็นเส้นทางเดินทางของ Movie Clip จึงไม่แสดงผลเมื่อใช้งานจริง และ Layer ที่ปรากฏเส้นสีน้ำเงินในที่นี้ เป็น Layer พิเศษ เรียกว่า Layer Guide ดังแสดงในภาพที่ 51
ภาพที่ 51
หากปฏิบัติได้ถูกต้องตามขั้นตอนเมื่อทดสอบการทำงาน นอกจะบินตามเส้นทาง
ที่กำหนดให้ แต่ตัวนกจะอยู่ในแนะระดับตลอดเวลาที่บินซึ่งจะไม่ค่อยเป็นธรรมชาติโดย
เฉพาะเมื่อเวลานกบินขึ้นสู่ที่สูง หรือลงสู่ที่ต่ำ เรายังสามารถให้การบินของนกเสมือนจริง
ได้โดยการกำหนดให้นกมีหัวชี้ไปตามทิศทางที่บิน ด้วยการกำหนด Properties เป็น Orient to path ดังแสดงในภาพที่ 52

ภาพที่ 52
10. ทดสอบการบินของนกด้วยการกด Ctrl + Enter
11. บันทึกไฟล์ เป็น ex05.fla และ Publish เป็นไฟล์ HTML , swf และ exe
บันทึกหลังปฏิบัติกิจกรรม................................................................................................ ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ...........................................................................................................................................
กิจกรรมที่ 8 ฝึกทักษะเบื้องต้นการทำภาพเคลื่อนไหว แบบ Tweening Shape จุดประสงค์ที่ 1. เกิดทักษะเบื้องต้นการทำภาพเคลื่อนไหวแบบ Tweening Shape 2. สามารถเปลี่ยนภาพวงกลมเป็นข้อความได้ ขั้นตอนการปฏิบัติกิจกรรมและคำอธิบาย
1. กด Ctrl + n เพื่อเปิดไฟล์ใหม่
2. Save ไฟล์เป็น ex06.fla
3. วาดวงกลม 1 วง บน Stage 4. เลือก กรอบภาพ ที่ 30 กด F6 เพื่อ Insert Key Frame 5. เลือก กรอบภาพ ที่ 1 เปลี่ยน Properties ของ Tween เป็น Shape ดังภาพที่ 53
ภาพที่ 53
6. เลือก กรอบภาพ ที่ 30 คลิก Text tool ใน Toolbox แล้วพิมพ์ข้อความที่ต้องการ 7. เลือก Free Transform Tool ปรับขนาดของข้อความตามที่ต้องการ ดังภาพที่ 54
ภาพที่ 54
จะเห็นเส้นรอบข้อความเป็นสีน้ำเงิน กด Ctrl + b สองครั้งเพื่อ Break apart
ผลคือข้อความดังกล่าวถูกแบ่งเป็นส่วนๆ ซึ่งจะสังเกตเห็นได้ว่ามีจุดประสีขาวบนข้อความ และจากที่เป็น Text จะกลายเป็นกราฟิก ดังแสดงในภาพที่ 55
ภาพที่ 55
8. ลบภาพวงกลมออก
9. ทดสอบการเคลื่อนไหว จะพบว่ารูปวงกลมสีแดงจะค่อยๆ เปลี่ยนเป็นข้อความ
10. บันทึกไฟล์ และ Publish เพื่อเก็บไว้ใช้งาน
บันทึกหลังปฏิบัติกิจกรรม................................................................................................ ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ........................................................................................................................................... ...........................................................................................................................................

ศึกษาตอนที่ 2

ศึกษาตอนที่ 4

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