SlideShare une entreprise Scribd logo
1  sur  82
Télécharger pour lire hors ligne
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
เรื่อง การสร้าง Animation และสื่อมัลติมีเดียด้วยโปรแกรม Adobe Flash
Adobe Flash
สารบัญ
บทที่ 1 ส่วนประกอบของ Flash 1
1.1 ส่วนติดต่อกับผู้ใช้ 2
1.2 กล่องเครื่องมือ 3
1.3 การเริ่มต้นชิ้นงาน 4
1.4 การควบคุมมุมมองของโปรแกรม 5
1.5 การบันทึกไฟล์ 5
1.6 การเลือกวัตถุ 6
1.7 การจัดวัตถุ 7
บทที่ 2 การสร้างวัตถุกราฟิก 8
2.1 การวาดเส้นตรง 8
2.2 การดัดเส้น 8
2,3 การเปลี่ยนคุณสมบัติของเส้น 8
2.4 การเปลี่ยนความหนาเส้น 9
2.5 การปรับแต่งขอบของมุมเส้น 9
2.6 การปรับรูปแบบของปลายเส้น 10
2.7 การวาดเส้นอิสระ 10
2.8 การวาดเส้นโดยใช้ปากกา 10
2.9 การเพิ่มจุดของเส้น 11
2.10 การวาดรูปทรงสี่เหลี่ยม 11
2.11 การวาดวงกลม 12
2.12 การวาดรูปทรงหลายเหลี่ยม 13
2.13 การใช้เครื่องมือยางลบ 14
2.14 การลงสีวัตถุ 15
2.15 การเทสีลงบนพื้นที่ 16
2.16 fการเทสีลงบนเส้น 16
2.17 การจัดการระบบสี 17
2.18 การปรับสีจาก Panel 17
2.19 การควบคุมการไล่สี 17
บทที่ 3 การจัดการข้อความ 19
3.1 โหมดตัวอักษร 20
3.2 ปัญหาภาษาไทยกับ Flash 20
3.3 วิธีการพิมพ์ข้อความ 20
3.4 การเปลี่ยนคุณสมบัติข้อความเป็นหมวดต่าง ๆ 22
3.5 การเปลี่ยนคุณสมบัติของข้อความให้เป็นรูปภาพ 22
บทที่ 4 การจัดการวัตถุ 24
4.1 การแปลงวัตถุเป็น Symbol 24
4.2 การเรียกใช้และแก้ไข Symbol 25
4.3 การสร้าง Symbol แบบปุ่ม 25
4.4 การสร้าง Symbol แบบภาพเคลื่อนไหว 27
4.5 การจัดการ Library 28
4.6 การเปลี่ยนคุณสมบัติSymbol 29
4.7 นา Symbol จากไฟล์อื่นมาใช้ 30
บทที่ 5 การทา Animation 31
5.1 การใช้ Play Head 31
5.2 สร้าง Layer ใหม่ 32
5.3 สร้าง Folder 32
5.4 วิธีการสร้าง Folder 32
5.5 ระบบ Frame 33
5.6 การเพิ่ม Key Frame 33
5.7 การเพิ่ม Frame 34
บทที่ 6 การสร้างภาพเคลื่อนไหว 36
6.1 Animation แบบเฟรมต่อเฟรม(Frame by Frame) 36
6.2 การสร้าง Animation แบบเฟรมต่อเฟรม 37
6.3 Animationแบบเคลื่อนที่ (Motion Tween) 38
6.4 การสร้างAnimationแบบเคลื่อนที่ (Motion Tween) 39
6.5 การปรับแต่งการเคลื่อนไหวแบบ Motion Tween 40
6.6 Animation แบบเปลี่ยนรูปทรง (Shape Tween) 40
6.7 การสร้าง Animation แบบเปลี่ยนรูปทรง (Shape Tween) 41
6.8 การเคลื่อนไหวตามเส้น Guide (Motion Guide) 42
6.9 วิธีการสร้างภาพเคลื่อนไหวตามเส้น Guide 42
6.10 การใช้Maskกับงาน Animation 45
6.11 วิธีการใช้งาน Mask 46
6.12 การเปลี่ยนคุณสมบัติสีของ Animation 47
6.13 ขั้นตอนการปรับแต่งคุณสมบัติสี 48
บทที่ 7 การแทรกไฟล์VDO และ Sound 51
7,1 การแทรกไฟล์VDO 51
7.2 การแปลงไฟล์ VDO 51
7.3 การบันทึกไฟล์ Clip จาก YouTube 52
7.4 การนาไฟล์ VDO เข้าไปใส่ใน flashแบบที่ 1 53
7.5 การนาไฟล์ VDO เข้าไปใส่ใน flashแบบที่ 2 55
7.6 การแทรกไฟล์เสียง 56
7.7 การนาไฟล์เพลงเข้ามาใช้เบื้องหลัง 56
7.8 การนาไฟล์เสียง Fx เข้ามาใช้ 58
7.9 การแทรกไฟล์เสียงพูดของตัวละคร 59
บทที่ 8 การสร้างระบบการทางานแบบ Interactive 61
8.1 การทาปุ่มเมนู 61
8.2 การปรับแต่งค่าของ event 65
8.3 การควบคุมการหยุดและการเล่นของAnimation 66
8.4 การทาแบบทดสอบแบบเลือกตอบ 68
8.5 การทาแบบฝึกหัดระหว่างเรียนแบบแสดงกาโต้ตอบทันที 72
8.6 การโหลดไฟล์ Flash เข้ามาใช้ร่วมกัน 73
คีย์ลัดที่สาคัญของ Flash 75
เอกสารอ้างอิง 77
เว็บไซต์ที่สามารถ หาความรู้เพิ่มเติมได้ 77
บทที่ 1 ส่วนประกอบของ Flash
Adobe Flash แต่เดิมเป็นโปรแกรมของ
ค่าย Macromedia ต่อมา Adobe ได้ทาการซื้อ
บริษัท ทาให้ชื่อในปัจจุบันคือ Adobe Flash
โปรแกรม Flash เป็นโปรแกรมที่ใช้ในการสร้างสื่อ
มัลติมีเดียได้หลากหลาย ภาพเคลื่อนไหวแบบ
เวคเตอร์ที่มีความคมชัด สามา รถใส่ไฟล์เสียง
วีดีโอ ทาระบบการโต้ตอบกับผู้ใช้ ทาเว็บไซต์
รวมทั้งสามารถเขียนโปรแกรมในภาษา Action
Script และเชื่อมโยงติดต่อกับฐานข้อมูลอื่น ๆ
เทคโนโลยี Flash สามารถทางานได้หลากหลาย
ระบบปฏิบัติการเช่น Windows MacOs Linux รวมทั้งอุปกรณ์แบบพกพาเช่นโทรศัพท์มือถือ PDA และยัง
สามารถทางานเชื่อมต่อกับอุปกรณ์อื่น ๆ เช่นกล้องwebcam, Printer
ผลงานจากโปรแกรม Flash สามารถนาไปประยุกต์ใช้ในหลากหลายวัตถุประสงค์เช่น การทาสื่อ
การสอนแบบเอนิมชั่นที่มีระบบโต้ตอบได้ , สื่อนาเสนอสินค้า, เกม, เว็บไซต์,การ์ตูน ฯลฯ
1
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
1.1 ส่วนติดต่อกับผู้ใช้
เมื่อเข้าสู่โปรแกรม Flash จะพบหน้าจอที่มีส่วนประกอบดังนี้
Menu Bar
แทบเครื่องมือคาสั่งด้วยรูปแบบตัวอักษร ที่มีครอบคลุมทุกคาสั่ง โดยจะรวบรวมคาสั่งแบ่งหมวดหมู่ต่าง ๆ
เราไม่ควรใช้คาสั่งจากเมนูบาร์เพียงอย่างเดียวเพราะจะทาให้ทางานได้ช้า
Stage
พื้นที่การทางานโดยพื้นที่ที่แสดงผลจะอยู่บนส่วนสีขาว โดยชิ้นงานที่วาดหรือสร้างลงไปจะถูกแสดงผลจาก
บริเวณนี้เท่านั้น ส่วนพื้นที่ที่ไม่แสดงผลจะเป็นสีเทา แต่stage สามารถเปลี่ยนสีได้ ไม่ได้มีเพียงแค่สีขาว
เพียงอย่างเดียว
Toolbox
กล่องเครื่องมือที่ช่วยให้เรียกใช้คาสั่งได้ง่ายยิ่งขึ้นด้วยการแสดงเป็นรูปภาพ และในส่วนของToolbox ยังมี
ส่วนของการปรับแต่งค่าเพิ่มเติมเช่น การเลือกรูปแบบการลงสี รูปแบบของคาสั่งเพิ่มเติมจากToolbox
Timeline
Flash เป็นโปรแกรมที่ใช้ Timeline เป็นหลัก ใช้สาหรับกาหนดช่วงเวลาการเคลื่อนไหวการหยุด หรือการ
กาหนดเวลาให้คาสั่งต่าง ๆ ทางาน โดยการทางานจะแบ่งเป็นส่วนของLayer ที่ทางานเป็นชั้น เหมือนกับ
การวางแผ่นใสซ้อนกัน โดย Layer ที่อยู่ด้านบนสุดจะเป็นLayer ที่เห็นก่อน ส่วน Layer ด้านล่างสุดจะเห็น
Stage
Panel
Menu bar
Properties Inspector
Time Line
Tool Box
2
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
ที่หลัง และ ส่วนของ Frame ที่แบ่งเป็นช่อง ๆ แทนช่องละ 1 Frame โดย 1 วินาทีเราสามารถกาหนดได้ว่า
จะให้แสดงผลจานวนกี่ Frame
Properties Inspector และ Panel
เป็นส่วนที่แสดงคุณสมบัติของวัตถุที่เลือก หรือเรียกใช้งานโดยสามารถปรับแต่งค่าต่าง ๆ ได้เช่น ปรับ
ขนาดเส้น ปรับสี แบบอักษร
1.2 กล่องเครื่องมือ
Selection tool < v > เครื่องมือที่ใช้ทาหน้าที่เลือกวัตถุและยังสามารถเคลื่อนย้ายวัตถุได้ด้วย
Subselection tool < A > เครื่องมือในการเลือกส่วนประกอบของวัตถุเช่นเลือกเฉพาะจุด
Free Tranform Tool < Q > เครื่องมือใช้สาหรับการหมุนภาพ บิดภาพ และขยายภาพ
Gradien Tranform Tool < F > เครื่องมือที่ใช้ปรับแต่งการไล่สีไปในทิศทางต่าง ๆ
Lasso Tool < L > เครื่องมือการเลือกบริเวณพื้นที่ในชิ้นงานแบบอิสระ
Pen Tool < P > เครื่องมือที่ใช้การวาดเส้นแบบจุดต่อจุดโดยสามารถทาเป็นเส้นโค้งและเส้นตรง
Add Anchor Point < = > เครื่องมือที่ใช้การเพิ่มจุดของเส้น
Delete Anchor Point < - > ใช้ลบจุดของเส้น
Convert Anchor Point < C > ใช้สาหรับเปลี่ยนจุดของเส้นจากเส้นตรงให้เป็นเส้นโค้ง
Text Tool < T > ใช้สาหรับพิมพ์ตัวอักษรข้อความ
Line Tool < N > ใช้สาหรับวาดเส้น
Rectangle Tool < R > ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้
Oval Tool < O > ใช้สาหรับสร้างวงรี โดยถ้ากดปุ่มShift ค้างเอาไว้จะทาให้เป็นวงกลม
Rectangle Primitive Tool < R > เป็นเครื่องมือสร้างกล่องสี่เหลี่ยมโดยสามารถปรับมุมโค้งได้ทั้งก่อน
และหลังสร้าง
Oval Primitive Tool < O > ใช้สาหรับสร้างวงรี โดยถ้ากดปุ่ม Shift ค้างเอาไว้จะทาให้เป็นวงกลม
สามารถปรับแต่งโค้งได้ทั้งก่อนและหลังสร้าง
PolyStar Tool ใช้สาหรับสร้างรูปหลายเหลี่ยมโดยสามารถกาหนดได้ว่าจะสร้างกี่เหลี่ยม
3
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
Pencil Tool < Y > ใช้สาหรับวาดเส้นแบบอิสระ
Brush Tool < B > ใช้สาหรับวาดเส้นแบบพู่กัน โดยเส้นมีคุณสมบัติเดียวกับรูปทรง
Ink Bottle Tool < S > เครื่องมือใช้สาหรับการเปลี่ยนสีเส้น
Paint Bucket Tool < K > เครื่องมือที่ใช้สาหรับลงสีพื้นผิว
Eye dropper < I > เครื่องมือที่ใช้สาหรับดึงสี ใช้สาหรับตรวจสอบสี หรือนาสีไปใช้กับส่วนอื่น
Eraser < E > ใช้สาหรับลบวัตถุ
Hand< H > ใช้สาหรับเคลื่อนย้ายมุมมองหน้าจอ
Zoom < M,Z > ใช้สาหรับย่อขยายมุมมองหน้าจอ
Stroke color ใช้สาหรับกาหนดสีของเส้น
Fill Color ใช้สาหรับกาหนดสีของพื้นผิว
1.3 การเริ่มต้นชิ้นงาน
2. คลิกที่คาสั่งmenu bar File -> New จะปรากฏหน้าต่าง New Document
3. เลือกรูปแบบชิ้นงานที่ต้องการซึ่งโปรแกรมจะมีค่าเริ่มต้นสาหรับผลงานหลาย ๆ แบบแต่โดยปกติ
จะเลือกที่ flash file ActionScript
4. ตั้งค่าชิ้นงานได้ที่menu bar Modify -> Document
ชื่อเรื่อง
รายละเอียด
ขนาดของชิ้นงาน
รายละเอียด รูปแบบการใช้
หน่วยจานวนเฟรมต่อวินาที
4
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
1.4 การควบคุมมุมมองของโปรแกรม
การควบคุมมอมองมีสวนสาคัญในการทางานที่รวดเร็ว เพื่อใช้งานบ่อย ๆ ควรหัดใช้คาสั่งhotkey ร่วมด้วย
โดยการควบคุมมุมมองมี 2 คาสั่งหลัก ๆ คือ
1. การ pan ภาพที่ช่วยการเคลื่อนมุมมองของกล้องไปตามจุดต่าง ๆ คลิกที่ Toolbox Hand tool
จากนั้นคลิกที่หน้าจอของชิ้นงาน มุมมองของหน้าจอจะเลื่อนไปมาเหมือนกับว่าเราใช้มือเลื่อน
ชิ้นงานบนโต๊ะ
2. การ Zoom คาสั่งย่อขยายมุมมอง เพื่อดูภาพรวมและขยายมุมมองในจุดที่ต้องการแก้ไข คลิกที่
Zoom แล้วจึงคลิกที่พื้นที่ทางาน โดยปกติค่าเริ่มต้นจะถูกตั้งค่าให้เป็นการขยายมุมมองแต่
ถ้าต้องการย่อมุมมองให้กดปุ่ม Alt ที่คีย์บอร์ดค้างไว้แล้วคลิกที่พื้นที่ทางานจะเป็นการย่อมุมมอง
1.5 การบันทึกไฟล์
การบันทึกไฟล์เบื้องต้นในFlash มี 2 รูปแบบหลัก ๆ คือ แบบไฟล์ที่ต้องการแก้ไขได้ จะบันทึกเป็น
ไฟล์ .FLA มีขั้นตอนการบันทึกไฟล์ดังนี้
1. คลิกที่ Menu Bar ที่ File - > save ในกรณีที่ต้องการบันทึกเป็นไฟล์เดิม หรือครั้งแรก และ
Save As สาหรับกรณีที่ต้องการบันทึกไฟล์เป็นชื่ออื่น
2. เลือกตาแหน่งที่จัดเก็บไฟล์ พร้อมพิมพ์ชื่อไฟล์
3. ที่ Save As Type เลือก เวอร์ชั่นที่ต้องการ ซึ่งถ้านาไปเปิดในเครื่องที่เวอร์ชั่นต่าว่าจะไม่
สามารถเปิดได้ ควรบันทึกเป็นเวอร์ชั่นที่ถูกต้อง ในกรณีที่ไม่ได้ไปเปิดเครื่องอื่นก็ไม่ต้องสนใจ
ส่วนนี้สามารถบันทึกได้เลย จากนั้นกดSave
และสาหรับไฟล์ที่ใช้สาหรับเผยแพร่บทหน้าเว็บหรือสื่ออื่น ๆ ซึ่งไฟล์ประเภทนี้จะสามารถดูและใช้งานได้
เท่านั้นไม่สามารถแก้ไขหรือปรับแต่ได้ จะต้องบันทึกเป็นไฟล์.SWFมีขั้นตอนดังนี้
1. คลิกที่ Menu Bar ที่ File - > Export -> Export Movie
2. เลือกตาแหน่งที่จัดเก็บไฟล์ พร้อมพิมพ์ชื่อไฟล์
3. ที่ Save As Type เลือก รูปแบบไฟล์ที่ต้องการ ให้เลือกswf ถ้าต้องการนาชิ้นงานไปเผยแพร่แบบ
Flash แต่ในส่วนนี้ยังสามารถเลือก export เป็นภาพเคลื่อนไหวแบบอื่น ๆ ได้ด้วย
5
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
1.6 การเลือกวัตถุ
ถึงแม้ว่า Flash จะเป็นโปรแกรมแบบ Vector แต่การเลือกวัตถุสามารถยืดหยุ่นได้เหมือนกับ
โปรแกรมประเภท Raster คือสามารถเลือกบางส่วนหรือส่วนใดส่วนหนึ่งได้โดยอิสระ โดยมีเครื่องมือดังนี้
Selection tool ใช้สาหรับการเลือกทั้งวัตถุ ถ้าคลิกเพียง1 ครั้ง จะเป็นการเลือก 1 วัตถุ แต่ถ้าดับเบิล
คลิกจะเป็นการเลือกวัตถุและเส้นพร้อมกัน แต่ถ้าในกรณีที่คลิกทีเส้น1 ครั้งจะเป็นการเลือกส่วนของเส้น
แต่ถ้าดับเบิลคลิกที่เส้นจะเป็นการเลือกเส้นที่อยู่กับเส้นที่คลิกทั้งหมด คาสั่งนี้ยังเป็นคาสั่งเคลื่อนย้ายวัตถุ
และเปลี่ยนรูปร่างของวัตถุด้วย
Subselection tool ใช้สาหรับเลือกส่วนของวัตถุ โดยให้คลิกที่วัตถุ1 ครั้ง จากนั้นจะปรากฏจุดต่อ
ของวัตถุ ซึ่งสามารถคลิกตามจุดต่าง ๆ เพื่อปรับเปลี่ยนรูปทรงได้
Lasso Tool ใช้สาหรับเลือกส่วนของวัตถุโดยกาหนดอณาเขตแบบอิสระ โดยวาดขอบเขตที่ต้องการ
6
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
1.7 การจัดวัตถุ
วัตถุที่วาดหรือนาเข้ามาใช้ในโปรแกรมFlash บางครั้งต้องการจัดเรียงให้เป็นระเบียบและระยะ
เท่ากัน ถ้าใช้มือกะระยะอาจมีความผิดพลาดและไม่ตรง โปรแกรมจึงอานวยความสะดวกด้วยเครื่องมือ
การจัดการตาแหน่งวัตถุดังนี้
1. จากภาพวัตถุกล่องจัดวางไม่เป็นระเบียบ
2. ไปที่menu bar เลือก Windows->Align เพื่อเรียกหน้าต่าง Align
3. คลิกครอบวัตถุทั้งหมด แล้วคลิกเลือกการจัดระยะ การเว้นระยะห่าง การเรียงให้ตรงกันตามรูป
7
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
บทที่ 2 การสร้างวัตถุกราฟิก
2.1 การวาดเส้นตรง
คลิกที่เครื่องมือ Line tool เมาส์จะเปลี่ยนเป็นสัญลักษณ์+ ใครคลิกตาแหน่งเริ่มต้น จากนั้นคลิก
เมาส์ค้างเอาไว้แล้วลากเมาส์ไปยังทิศทางที่ต้องการ แล้วจึงปล่อยเมาส์ แต่ในกรณีที่ต้องการวาเส้นให้
ขนานกับแกน 8 ทิศ ให้กดปุ่ม Shift ขณะลากเส้น จะทาให้เส้นนั้นตั้งฉากหรือเฉียง45 องศา โดยที่ไม่ต้อง
คอยกะระยะเอง
2.2 การดัดเส้น
สามารถดัดเส้นตรงที่วาดขึ้นให้เป็นเส้นโคงโดยการคลิกเมาส์ที่ Selection tool จากนั้นคลิกที่บริเวณ
กลางเส้นค้างเอาไว้แล้วลากไปยังทิศทางต่าง ๆ เส้นจะถูกแปลงเป็นเส้นโค้ง
2,3 การเปลี่ยนคุณสมบัติของเส้น
ให้คลิกที่เส้นที่ต้องการจะเปลี่ยนคุณสมบัติ ถ้าคลิก1 ครั้งจะเป็นการเลือกช่วงเส้น1 ช่วง แต่ถ้าใช้การ
ดับเบิ้ลคลิกจะเป็นการเลือกเส้นในบริเวณที่ต่อเนื่องกัน ซึ่งเส้นได้มีการพาดเกี่ยวหรือติดกันก็จะถูกเลือกมา
ทั้งหมด จากนั้นทึ่ด้านล่างของหน้าจอบริเวณหน้าต่างProperties ให้ทาการ set ค่าดังนี้
8
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2.4 การเปลี่ยนความหนาเส้น
ให้คลิกที่เส้นจากนั้นที่คาสั่งเปลี่ยนความหนาของเส้นให้พิมพ์ความหนาลงไปเป็นตัวเลข ในเวอร์ชั่นCS3 นี้
สามารถใส่ความหนาของเส้นเป็นจุดทศนิยมได้ หรือใช้วิธีการ สไลด์เพิ่มขนาดหรือลดขนาดที่ลูกศรด้านข้าง
ของขนาดเส้น
2.5 การปรับแต่งขอบของมุมเส้น
ในการวาดรูปจะต้องมีการใช้เส้นหลายเส้นมาต่อกันหรือมีการหักมุมของเส้น ถ้าจะให้มีความสวยงาม
จะต้องกาหนดขอบมุมเส้นด้วย Miter มุมแหลม Round มุมมน Beval มุมตัด
สีของเส้น
ความหนา รูปแบบเส้น
เส้นขอบมนหรือตัด
รูปแบบการเชื่อมจุดต่อรูปแบบการเชื่อมจุดต่อ
ช่วยลดการเบลอส่วนโค้งของเส้น Miter ความแหลมของมุม
กาหนดรูปแบบเส้นเอง
ความสัมพันธ์กับความ
หนาของเส้นและมุมมอง
แ
9
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2.6 การปรับรูปแบบของปลายเส้น
เส้นที่วาดขึ้นมาตรงปลายเส้นสามารถปรับรูปแบบได้ 3 รูปแบบดังนี้
None ปลายเส้นตัดพอดีกับความยาวของเส้น
Round ปลายเส้นโค้งมน
Square ปลายเส้นตัดแต่เว้นระยะออกมาห้างกับปลายเส้น
2.7 การวาดเส้นอิสระ
การวาดเส้นอิสระจะใช้เครื่องมือ Pencil Tool โดยคาสั่งนี้เสินที่วาดยังคงคุณสมบัติของStoke อยู่
สามารถดัดแก้ไขได้ง่ายเช่นเดียวกับคาสั่งLine สามารถปรับแต่งลักษณะการวาดได้ โดยการปรับแต่งจะ
อยู่ด้านล่างของ Tool box มี3 ลักษณะดังนี้
Straighten ทาให้การวาดมีความเป็นเส้นตรงหรือเส้นเป็นรูปทรงโค้ง วงรี วงกลม
Smooth ทาให้การวาดมีความโค้งมนและมีความต่อเนื่องกัน
Ink ทาให้การวาดมีความอิสระเหมือนกับการขยับของมือมากที่สุด แต่เส้นมักมีปัญหาไม่ต่อเนื่องกัน
2.8 การวาดเส้นโดยใช้ปากกา
การวาดเส้นโดยใช้ปากกาเป็นการวาดเส้นที่ผสมผสานระหว่างเส้นตรงกับการวาดโค้งแบบ Bezier เมื่อ
ต้องการวาดเส้นโค้งให้คลิกเมาส์ค้างเอาไว้แล้วลาก เส้นจะถูกบิดเป็นโค้งแบบBezier และเส้นสามารถ
ลากต่อ ๆ กันได้ และเมื่อต้องการให้เป็นรูปทรงปิด ให้วนเส้นกลับมาคลิกที่จุดเริ่มต้นอีกครั้ง
10
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2.9 การเพิ่มจุดของเส้น
การเพิ่มจุดของเส้นที่วาดขึ้นจากปากกา หรือเส้นเพื่อเปลี่ยนให้เส้นเป็นรูปร่างต่าง ๆ หรือใส่รายละเอียดให้
มากยิ่งขึ้น วิธีใช้ให้คลิกเมาส์ไปที่ Add Anchor Point จากนั้นคลิกไปที่ส่วนของเส้นในจุดที่ต้องการ
คาสั่งนี้ต้องใช้คาสั่ง Convert Anchor Point หรือ Subselection tool เป็นเครื่องมือที่ใช้ขยับ
จุดที่สร้างไว้ และถ้าต้องการนาจุดออกให้เลือกที่คาสั่ง Delete Anchor Point เพื่อลบจุด
2.10 การวาดรูปทรงสี่เหลี่ยม
1. วาดรูปสี่เหลี่ยมโดยคลิกที่ปุ่ม Rectangle Tool
2. กาหนดคุณสมบัติของส่วนโค้งในกรณีที่ต้องการทาให้สี่เหลี่ยมโค้งมน
11
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. คุณสมบัตินี้ถ้ากาหนดเป็น0 จะไม่มีขอบมน ถ้าใส่เป็นค่าบวกขึ้นไปจะเป็นขอบมน และถ้าใส่ค่าที่
เป็นลบจะเป็นขอบมนแต่เข้าด้านใน
4. คลิกเมาส์ กาหนดจุดเริ่มต้นของสี่เหลี่ยม ซึ่งจะเป็นจุดมุมของสี่เหลี่ยม แต่ถ้าต้องการวาดรูป
สี่เหลี่ยมให้เป็นสี่เหลี่ยมจัตุรัสให้กดปุ่มShiftค้างไว้ ถ้าต้องการให้เริ่มจากศูนย์กลางให้กดปุ่มAlt
ค้างเอาไว้
5. ในกรณีที่ต้องการสร้างกล่องที่มีระยะที่แน่นอน ให้กดปุ่มAlt ก่อนที่จะคลิกเมาส์จะปรากฏกล่อง
ข้อความขึ้นมาดังรูป
สาหรับการวาดรูปสี่เหลี่ยมในเวอร์ชั่นนี้มี2 แบบคือ
Rectangle Tool ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้แต่เมื่อตั้งค่าไปแล้ว
จะไม่สามารถแก้ไขได้โดนสะดวก เพราะจะต้องขยับเองทีละมุม
Rectangle Primitive Tool ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้ทั้งก่อนและ
หลัง สามารถปรับแต่งค่าได้สะดวก มีลักษณะเป็นวัตถุ ถ้าจะแก้ไขแบบอิสระจะต้องดับเบิ้ลคลิกที่วัตถุซ้า
อีกครั้งหนึ่ง
2.11 การวาดวงกลม
1. สร้างวงกลมด้วยการคลิกที่ปุ่ม Oval Tool
2. สร้างวงกลมด้วยการคลิกที่มุมจุดแรก และลากเฉียง ไปยังอีกจุดโดยปกติแล้วรูปทรงจะไม่เป็น
วงกลมจะต้อง กดปุ่ม Shift ร่วมด้วย และถ้าต้องการให้เริ่มจากศูนย์กลางจะต้องกดปุ่มAlt
ความกว้าง
ความสูง
กาหนดขนาดของมุม
วาดจากศูนย์กลาง
12
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. สามารถกาหนดจุดเริ่มของส่วนโค้งได้ โดยการใส่ตาแหน่งของรัศมีของวงกลม โดยสามารถกาหนด
ได้ทั้งจุดเริ่มและจุดจบ
4. กาหนดค่า inner radian เพื่อเจาะวงกลมให้เป็นลักษณะโดนัท
5. คลิกที่ Close Path โปรแกรมจะไม่ลง fill สีให้กับวงกลมในกรณีที่ใช้กับคาสั่ง Start angle และ
end angle
2.12 การวาดรูปทรงหลายเหลี่ยม
1. คลิกที่ปุ่ม PolyStar Tool ในคาสั่งนี้จะสามารถสร้างเหลี่ยมได้ 3-32 มุม
2. คลิกที่ปุ่ม Options จะปรากฏหน้าต่าง Tool Settings
3. คาสั่งรูปหลายเหลี่ยมนี้มีให้เลือกการวางเพียงอย่างเดียวคือ วางจากศูนย์กลางจึงไม่ต้องกดปุ่มAlt
4. ส่วนการปรับแต่งค่าอื่น ๆ จะมีความคล้ายกับเส้นและกล่องสี่เหลี่ยม
การวาดด้วยพูกัน
เลือกรูปหลายเหลี่ยมและรูปดาว
จานวนมุม
ความลิกของแฉกดาว
13
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
การวาดด้วยคาสั่งพูกันจะทาให้ได้เส้นที่เหมือนจริง มีความสวยงามเวลาวาดภาพ ถ้าใช้กับอุปกรณ์Teblet
จะทาให้การวาดเหมือนจริงมากยิ่งขึ้น แต่คาสั่งนี้ก็มีข้อจากัดคือ เส้นที่วาดมีคุณสมบัติเป็นFill ไม่ใช่ Stoke
ทาให้แก้ไขได้ยาก
1. คลิกที่ปุ่ม Brush Tool เลือกสีจากกล่อง Fill Color เนื่องจากคาสั่งนี้ไม่ใช่คาสั่งเส้น
2. วาดเส้นลงไปในชิ้นงาน
3. ถ้าต้องการวาดเส้นลงพื้นที่ลักษณะพิเศษ จะต้องคลิกปุ่มBrush Mode เพื่อนเลือกรูปแบบ
การลงสีที่ต้องการ โดยมีรูปแบบดังนี้
a. Paint Normal เมื่อระบายสี สีที่ระบายจะทับเส้นและพื้นที่
b. Paint Fills สีที่ระบายจะทับเฉพาะส่วนของพื้นที่แต่ไม่ยุ่งเกี่ยวกับเส้น
c. Paint Behind สีที่ระบายจะปรากฏที่พื้นหลังวัตถุ
d. Paint Selection สี่ที่ระบายจะระบายเฉพาะพื้นของบริเวณที่เลือกเท่านั้นโดย
จะต้องเลือกวัตถุนั้น ๆ ก่อน
e. Paint Inside สีที่ระบายจะระบายเฉพาะพื้นที่ด้านใน
2.13 การใช้เครื่องมือยางลบ
การใช้ยางลบในโปรแกรมFlash จะแตกต่างกับโปรแกรมกราฟิกVector อื่น ๆ คือสามารถเลือก
ลบเฉพาะส่วนได้ ทาให้สะดวกต่อการวาดรูปอย่างมาก การใช้ยางลบมีขั้นตอนดังนี้
1. เมื่อต้องการลบภาพ คลิกที่ Eraser Tool เพื่อทาการเปลี่ยน
หัวปากกาเป็นยางลบ
2. คลิกที่ปุ่ม เพื่อเลือกลักษณะของยางลบ มีหลายลักษณะให้
เลือกเช่น สี่เหลี่ยม วงกลม
14
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2. คลิกปุ่ม Eraser Mode เพือเลือกโหมดการลบ
a. Eraser Normal ลบเส้นและพื้นที่
b. Eraser Fills ลบเฉพาะส่วนของพื้นที่โดยยางลบจะไม่ไปลบเส้น
c. Eraser Lines ลบเฉพาะส่วนของเส้นเท่านั้น
d. Eraser Selected Fills ลบเฉพาะพื้นที่ของบริเวณที่เลือกโดยยางลบจะไม่ไปลบเส้น
e. Eraser Inside ลบเฉพาะภายในพื้นที่ของพื้นที่ด้านใน
3. สามารถใช้เครื่องมือ Faucet ลบเฉพาะพื้นที่ของสีโดยไม่จาเป็นใช้ยางลบลบที่ละส่วน
2.14 การลงสีวัตถุ
วัตถุใน Flash จะมีส่วนหลัก ๆ อยู่ 2 ส่วนคือ
เส้น Stoke และพื้นที่ Fill โดยการลงสีวัตถุสามารถลง
สีหรือเปลี่ยนได้ทั้ง 2 วัตถุ ส่วนพื้นที่ของสีสามารถ
ปรับแต่งการไล่สีผสมสี ซึ่งใช้เทคนิคเดียวกับโปรแกรม
กราฟิกประเภท Vertor ทั่ว ๆ ไปได้
15
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2.15 การเทสีลงบนพื้นที่
การลงสีบนพื้นที่สามารถลงได้ทั้งบริเวณที่มีสีอยู่แล้วและบริเวณที่ไม่มีสีก็ได้ สาหรับพื้นที่ที่จะลงสีนั้น
จะต้องมีลักษณะเป็นเส้นปิด หรือเกือบปิด หรือมีพื้นที่อยู่ก่อนจึงจะสามารถลงสีใหม่หรือเปลี่ยนสีได้ โดยมี
วิธีการทาดังนี้
1. คลิกที่ปุ่ม Paint bucket Tool
2. เลือกสีจากแถบ Tool box Fill Colorเปลี่ยนสีที่ต้องการ จากนั้นคลิกเทสีลงไปใน
ช่องว่างตามรูป
3. การลงสีบนวัตถุใน Flash บางครั้งจะพบปัญหาไม่สามารถลงสีได้ นั้นก็เพราะว่าเส้นของภาพนั้น ๆ
ไม่ปิดสนิทกันจึงต้องตั้งค่าเพิ่มเติมโดยตาแหน่งด้านล่างToolbox จะพบคาสั่ง Gaps ให้คลิกค้าง
ไว้ ถ้าเส้นปิดกันมากให้เลือกที่Don’t Close Gaps ถ้ามีช่องว่างมากให้เลือก Close Large Gaps
จึงจะสามารถลงสีได้
2.16 fการเทสีลงบนเส้น
1. ลงสีหรือเปลี่ยนสีของเส้น Stroke ได้โดยใช้เครื่องมือ Ink Bottle
Tool เทลงไปลงบนเส้น โด
2. เลือกสีที่ Toolbox Stoke Color เพื่อเปลี่ยนสีเส้นที่ต้องการ
3. คลิกไปที่เส้นที่ต้องการจะเปลี่ยนสี
16
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2.17 การจัดการระบบสี
Swatches ระบบสีใน Flash มีหน้าตาดังรูป โดยจะมีองค์ประกอบการตั้งค่าดังนี้
2.18 การปรับสีจาก Panel
ทางด้าน Panel ด้านขวามือเป็นการปรับแต่งสีโดยสามารถควบคุมสีได้ระเอียดมากขึ้นสามารถทา
การไล่สี ปรับแต่งค่าสีขั้นสูง โดยคลิกที่ Panel Color จะปรากฏน่าต่างดังนี้
2.19 การควบคุมการไล่สี
1. เลือก Type เป็น Linear จะปรากฏแทบ Overflow
แสดงการไล่สีเริ่มต้น
2. ด้านล่างกล่อง Color จะปรากฏแถบสีที่มีการไล่สี โดยสีเริ่มต้น
จะเป็นสีขาวและดา ซึ่งสามารถปรับเลื่อนได้ทาให้วัตถุที่ได้มีการ
ไล่สีตามระยะที่ต้องการ
สีที่เลือก
ถาดสีพิเศษ
ความโปรงแสง ไม่มีสี
ปรับแต่งสีเอง
เปลี่ยนสีเส้น
เปลี่ยนสีพื้น
เปลี่ยนเป็นสีขาวดา
เลือกไม่มีสี
สลับสีเส้นกับพื้นที่
ไล่โทนสีมืดสว่าง
คลิกบริเวณสีที่ต้องการ
ความโปรงใส่ปรับแต่งค่าสีโดยใส่ค่าเลข ปรับสีด้วยเลขฐาน 2
รูปแบบการไล่สี
17
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. สามารถเพิ่มจุดตาแหน่งของสีได้ โดยนาเมาส์คลิกไปที่บริเวณเส้นแถบสี เป็นการเพิ่มตาแหน่งสี
จากนั้นดับเบิ้ลคลิกที่ตาแหน่งสีเพิ่ม แล้วจึงเลือกสีที่ต้องการ
4. ถ้าต้องการลบตาแหน่งให้คลิกที่จุดสีแล้วคลิกเมาส์ค้างเอาไว้ ลางลงมาด้านล่างจุดสีจะหายไป
5. ถ้าสีใดใช้บ่อย ๆ อยากเก็บไว้เรียกใช้ให้คลิกที่ option menu ของหน้าต่าง Color
6. เลือกที่ Add Swatch เพื่อจัดเก็บสีไว้ในถาดสี
18
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
บทที่ 3 การจัดการข้อความ
การสร้างบทเรียน การใส่คาบรรยายหรือคาอธิบายเป็นเรื่องที่พบกันอยู่บ่อย ๆ ในflash เองก็มี
เครื่องมือที่จัดการเรื่องตัวอักษรข้อความ สามารถรองรับได้หลากหลายภาษา เมื่อต้องการเรียกใช้ Text ให้
คลิก Tool box Texttool ส่วนบริเวณของ Properties Inspector จะเปลี่ยนเป็นText Tool ดังรูป
ด้านล่าง
 Text Type โหมดของอักษรข้อความ
 Text Block Position ตาแหน่งและขนาดของข้อความ
 Character Spacing การกาหนดระยะห่างของตัวอักษร
 Font รูปแบบของตัวอักษร
 Text Fill Color กาหนดสีของตัวอักษร
 Alignment การจัดตาแหน่งตัวอักษร
 Edit Format Option กาหนดรูปแบบการย่อหน้า
 Change Orientation of text กาหนดแนวการวางตัวอักษร
 Line Type กาหนดชนิดของการับข้อมูล ในส่วนของ Input Text
 Font Rendering method กาหนดรูปแบบการเรนเดอร์ตัวอักษร
 Auto Kern กาหนดให้ปรับช่องไฟของตัวอักษรอัตโนมัติ
 URL Link กาหนดการเชื่อมโยงไปยังเว็บอื่น
 Target กาหนดการรูปแบบการเปิดหน้าเว็บ
โหมดของอักษรข้อความ แบบ Font ตาแหน่งการจัดวางปรับแต่งคุณสมบัติ
ระยะห่างระหว่างอักษร
ตัวยกตัวห้อย
การ Render ตัวอักษร
ตั้งค่าจานวนบรรทัดของ Dynamic URL Linkเชื่อมโยง Target ของ Link
19
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3.1 โหมดตัวอักษรมีด้วยกัน 3 หมวดคือ
1. Static Text เป็นข้อความธรรมดา ใช้สาหรับพิมพ์ข้อความทั่วไป ไม่สามารถใช้คาสั่งตัวแปรแก้ไขได้
2. Dynamic Text เป็นข้อความ Text ที่มีการเปลี่ยนแปลงด้วยการเขียนคาสั่งเพิ่มเติมได้
3. Input Text เป็นการสร้างกล่องข้อความ กาหนดพื้นที่รับข้อมูล
3.2 ปัญหาภาษาไทยกับ Flash
เนื่องจากยอดขายโปรแกรม Adobe แบบลิขสิทธิ์ในเมืองไทยมีปริมาณไม่มาก บริษัทจึงไม่ได้ให้
ความสาคัญเป็นพิเศษกับเรื่องภาษาไทย การพัฒนาโปรแกรมให้ใช้งานกับภาษาไทยนั้นเป็นเรื่องที่ยุ่งยาก
ของผู้ผลิต เนื่องจากภาษาไทยมีตัวอักษรหลายชั้น และมีเงื่อนไขการตัดคามากมาย ทาให้ผู้ที่ใช้โปรแกรม
ของ adobe ต้องใช้โปรแกรมเสริมอื่น ๆ เข้าช่วย หรือบางทีก็ต้องเปลี่ยน font ชุดใหม่มาใช้เพื่อแก้ปัญหา
สาหรับปัญหาเรื่องพิมพ์ข้อความใน Flash CS3 จะมีปัญหาเรื่องระยะห่างของตัวอักษรกับWindows Vista
และ Windows 7 ปัญหาจะเกิดขึ้นตอนที่พิมพ์ข้อความตอนสร้าง แต่ตอนนาไปแสดงผลใช้จริงจะไม่มี
ปัญหา
3.3 วิธีการพิมพ์ข้อความ
1. คลิกที่ Text tool เพื่อพิมพ์ข้อความ
2. ปรับแต่งค่า Properties Inspector ตามรูปภาพด้านล่าง Font เป็นแบบ Arial ขนาด 25 และเป็นสี
ดา ชิดด้านซ้าย
20
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. คลิกวางข้อความลงบนชิ้นงานตามตัวอย่าง และพิมพ์ข้อความลงไป ว่า Introduction to
computer
4. คลิก Text tool และเปลี่ยนขนาดเป็น16 ลากกรอบโดยลากไปทางด้านขวาตามระยะของ
ข้อความที่ต้องการ จะปรากฏกล่องสี่เหลี่ยมขึ้น 1 บรรทัด จากนั้นพิมพ์ข้อความ “The lessons
contain relatively little text, plenty of images and many podcasts prepared by students in
which they talk about a particular topic within each lesson. Most of the lessons are
framed around concepts from the world of computers ลงไปในช่องโดยไม่ต้องกด enter เพื่อ
ทาการขึ้นบรรทัดใหม่ โปรแกรมจะพยายามตัดคาให้เอง
5. ทางกล่องด้านขวามือใส่ Link เชื่อมโยงไปยังเว็บไซต์ พิมพ์ชื่อเว็บไซต์ตามรูปด้านล่างลงไป
6. คลิกที่ชื่อที่พิมพ์ 1 ชื่อ และแก้ไข Properties Inspector ในช่อง Link
7. ใส่ชื่อเว็บตามชื่อด้านล่าง จะส่งเกตุว่าชื่อเว็บจะต้องขึ้นต้นด้วยhttp:// และชื่อ Url เว็บกับชื่อที่
เขียนเป็น เมนูอาจจะเป็นคนละชื่อก็ได้ เช่นpapemodel แต่ Link ไปที่
http://www.papermode.in.th
Http://www.sanook.com
Http://www.google.com
Http://www.yahoo.com
Http://www.papermodel.in.th
Http://www.hotmail.com
21
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3.4 การเปลี่ยนคุณสมบัติข้อความเป็นหมวดต่าง ๆ
ตัวอักษรข้อความใน Flash สามารถสลับโหมดการทางานไปมาระหว่าง Static Text Dynamic
Text และ Input Text ได้แต่การสลับไปมาอาจทาให้คุณสมบัติและการตั้งค่าบางอย่างเปลี่ยนไป จึงควร
ตรวจสอบทุกครั้งหลังจากการเหมือนโหมด
ข้อความ สามารถเปลี่ยนได้ด้วยวิธีดังนี้
1. คลิกที่ข้อความที่ต้องการเปลี่ยนโหมด
2. Properties Inspector คลิกเลือกลูกศร
ข้างกับชื่อโหมดข้อความเพื่อเปลี่ยนโหมดที่
ต้องการ
3.5 การเปลี่ยนคุณสมบัติของข้อความให้เป็นรูปภาพ
ตัวอักษรที่อยู่ใน Flash มีคุณสมบัติเป็น Text ซึ่งมีข้อดีคือแก้ไขเปลี่ยนแปลงข้อมูลได้ง่าย แต่ถ้า
นามาใช้ในงานออกแบบเพื่อให้ชิ้นงานมีเอกลักษณ์ เราจะต้องทาลายคุณสมบัติของText ทิ้งเสียก่อน โดย
มีขั้นตอนดังนี้
1. คลิกที่ Text tool เพื่อพิมพ์ข้อความ โดยเลือกตัวอักษรที่มีความหนาและขนาดใหญ่ ใน
ตัวอย่างเลือก Font Arial Black และเลือกขนาด Font ที่ 60 และสีน้าเงิน
22
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2. ถ้าต้องการปรับตัวอักษรให้เป็นรูปภาพจะต้องใช้คาสั่งBreak Apart โดยการคลิกขวา แล้วเลือก
Break Apart หรือกด Ctrl + B ชุดข้อความคาว่า CAI จะถูกแยกออกเป็น3 ตัว ซึ่งยังคงคุณสมบัติ
ตัวอักษรอยู่
3. ใช้คาสั่ง Break Apart ทาลายคุณสมบัติของตัวอักษรอีกครั้ง ตัวอักษร CAI จะกลายเป็นวัตถุ
รูปภาพไม่สามารถพิมพ์แก้ไขข้อมูลได้อีกต่อไป
4. เมื่อถูกเปลี่ยนเป็นคุณสมบัติรูปภาพโดยสมบูรณ์แล้วสามารถดัดแปลงดึงแก้ไขใด ๆ ก็ได้
23
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
บทที่ 4 การจัดการวัตถุ
การใช้งาน Flash ทา Animation จะต้องแปลงวัตถุต่าง ๆ ให้มีคุณสมบัติที่ถูกต้อง เพื่อง่ายต่อการแก้ไข การ
ใช้งาน การเรียกใช้งานภายหลัง โดยรูปแบบวัตถุนี้จะเรียกว่า Symbol โดย Symbol มี 3 สถานะด้วยกันคือ
 Movie clip : ชุดวัตถุที่มีการเคลื่อนไหว
 Button : วัตถุที่เป็นปุ่ม
 Graphic : วัตถุที่เป็นรูปภาพ
4.1 การแปลงวัตถุเป็น Symbol
1. เมื่อมีวัตถุอยู่แล้ว ให้คลิกที่คาสั่ง Selection tool จากนั้นคลิกล้อมรอบวัตถุที่ต้องการจะแปลง
เป็น Symbol
2. คลิกขวาเลือกที่คาสั่ง Convert to symbol หรือ กด F8 จะปรากฏหน้าต่าง Convert to Symbol
3. Name พิมพ์ชื่อของวัตถุ โดยชื่อของวัตถุไม่ควรซ้ากัน ควรมีการวางแผนชื่อให้ดี
4. Type เลือกรูปแบบของ Symbol ในกรณีรูปต้นไม้ดังรูปควรใช้แบบGraphic
5. Registration เป็นการเลือกจุดอ้างอิงเริ่มต้น
6. จากนั้นวัตถุจะเข้าไปอยู่ในกล่องLibrary ถ้าในกรณีที่ไม่ปรากฏหน้าต่าง Library ให้กด Ctrl+L
24
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
4.2 การเรียกใช้และแก้ไข Symbol
เมื่อเราสร้าง Symbol ขึ้นมาในไฟล์นั้น ๆ สามารถดึง Symbol มาใช้ได้ตลอดวิธีการเรียกใช้ทาได้ดังนี้
1. คลิก Symbol จากกล่อง Library ลากเข้ามาใช้ในชิ้นงาน โดย Symbol จะเหมือนกับต้นแบบและ
สามารถย่อขยายขนาดได้
2. ถ้าต้องการเปลี่ยนแปลงแก้ไข Symbol ให้ดับเบิลคลิกที่ Symbol
3. จากนั้นสังเกตแถบแสดงสถานะของการแก้ไขชิ้นงาน จะปรากฏชื่อของSymbol ที่ต้องการแก้ไข
4. เมื่อทาการแก้ไขแล้วทุก Symbol จะถูกเปลี่ยนให้เหมือนกับSymbol ที่มีการแก้ไข
4.3 การสร้าง Symbol แบบปุ่ม
นอกจากการทางาน animation โปรแกรม Flash ยังถูกออกแบบมาให้ทางาน ในลักษณะที่ผู้ใช้งาน
สามารถโต้ตอบหรือมีปฏิสัมพันธ์ได้ จึงจาเป็นต้องมีการกาหนดSymbol ให้มีลักษณะเป็นปุ่ม โดยการตั้ง
ค่าพื้นฐานของปุ่มมีด้วยกัน 4 สถานะคือ up over down hit วิธีการสร้างปุ่มมีวิธีดังนี้
1. สร้างกล่องหรือวัตถุขึ้นมาแทนปุ่ม ด้วยเครื่องมือ
Rectangle Tool
2. คลิกล้อมรอบวัตถุ แล้ว convert Symbol ด้วยการ
กด F8
25
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. จะปรากฏหน้าต่าง Convert to Symbol ให้เลือกที่ Button และตั้งชื่อปุ่มว่า ok หมายถึงปุ่มนี้จะถูก
ใช้เป็นปุ่มตกลง
4. ดับเบิลคลิกที่วัตถุSymbol ที่สร้างขึ้น ที่แถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol ok และที่
Timeline จะถูกเปลี่ยนเป็น4 สถานะคือ up over down hit
a. Up สถานะปุ่มที่ยังไม่ถูกคลิก
b. Over สถานะปุ่มเมื่อนาเมาส์ไปวางเหนือปุ่ม
c. Down เมื่อนาเมาสไปคลิกที่ปุ่ม
d. Hit กาหนดพื้นที่ของปุ่ม
5. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องOver จากนั้นแก้ไขสีหรือเปลี่ยนแปลงลักษณะของปุ่ม
ให้เป็นรูปแบบอื่น ๆ เพื่อให้เกิดความแตกต่างเวลานาเมาส์ไปวางเหนือปุ่ม
26
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องDown เพื่อกาหนดสถานะเมื่อมีเมาส์คลิกไปที่ปุ่ม
7. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องHit เป็นการกาหนดบริเวณของปุ่ม ซึ่งบางครั้งอาจจะ
ใหญ่กว่าปุ่มที่สร้างไว้ก็ได้ มักใช้กรณีที่ใช้ข้อความLink ที่เป็นตัวอักษร
4.4 การสร้าง Symbol แบบภาพเคลื่อนไหว
Symbol ประเภทนี้ใช้สาหรับจัดกลุ่มรวบรวมวัตถุหรือ Symbol ให้เป็นภาพเคลื่อนไหว โดยมีวิธีการทาดังนี้
1. วาดวัตถุต้นแบบในลักษณะภาพกราฟิก ในรูปตัวอย่างเป็นลูกบอลวงกลม
2. คลิกล้อมรอบวัตถุ แล้ว convert Symbol ด้วยการกด F8
3. พิมพ์ชื่อวัตถุ โดยจะต้องไม่ซ้ากับชิ้นงานที่มีอยู่แล้ว
4. เลือก Type เป็น Movie Clip Registration เป็นศูนย์กลางจากนั้นกด Ok
5. ดับเบิลคลิกที่วัตถุSymbol ที่สร้างขึ้น ที่แถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol “ball”
6. ให้คลิกส่วนของ Time Line ด้านบน ช่องแรกใน Frame ที่ 10 แล้วกด F6 เพื่อสร้าง Key frame
7. ลากลูกบอลไปในทิศทางอื่น เพื่อกาหนดจุดเคลื่อนที่
27
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
8. คลิกขวาที่ ระหว่างเฟรมที่ 1-10 เลือกที่ Create Motion Tween เพื่อสร้างการเคลื่อนไหว
9. ออกจากสถานะการแก้ไข Symbol เพื่อกลับไปที่ Scene หลัก โดยคลิกที่ Scene 1
10. ทดสอบการทางานโดยการกด Ctrl+Enter เพื่อทดสอบชิ้นงาน Animation
หมายเหตุ สาหรับรายละเอียดของการทา Animation จะกล่าวถึงในบทต่อไป
4.5 การจัดการ Library
หน้าต่าง Library สามารถเรียกใช้งานได้จากการกดปุ่มCtrl + L หรือคลิกที่ Window -> Library
สัญลักษณ์ของ Symbol มีดังนี้
Button : ปุ่ม
Movie Clip : ภาพเคลื่อนไหว
Graphic : ภาพ
Floder : แฟ้ มเพื่อจัดเก็บ Symbol ให้เป็นหมวดหมู่
28
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
ส่วนประกอบต่าง ๆ ของ หน้าต่าง Library
4.6 การเปลี่ยนคุณสมบัติ Symbol
Symbol สามารถสลับคุณสมบัติกันได้ เช่นสลับจากButton เป็น Movie clip หรือสลับจาก Graphic เป็น
Button แต่การสลับนี้จะทาให้คุณสมบัติบางอย่างของวัตถุหายไป เท่าที่พบเห็นจะเป็นการสลับจาก
Graphic เป็น Button หรือ Movie clip เป็นส่วนใหญ่ วิธีการสลับมีดังนี้
วิธีที่ 1
1. เลือกวัตถุจากชื่อในหน้าต่างLibrary
2. คลิกที่ปุ่มเครื่องมือ จะปรากฏหน้าต่าง Symbol Properties
3. เปลี่ยนคุณสมบัติของวัตถุตามต้องการ
ชื่อไฟล์
ปริมาณsymbol
รูป Symbol
รายชื่อ Symbol
สร้าง Symbol
สร้าง Folderl
ดูข้อมูล Symbol
ลบ Symbol
เรียงลาดับ Symbol
ตรึง Library
สร้าง Library ใหม่
29
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
วิธีที่ 2
1. คลิกขวาที่ชื่อของ symbol แล้วเลือก ที่ Type -> เลือกรูปแบบ Symbol ที่ต้องการ
4.7 นา Symbol จากไฟล์อื่นมาใช้
เราสามารถนา Library ที่สร้างขึ้นใรชิ้นงาน ไปใช้กับไฟล์อื่น ๆ หรือนา Library ของไฟล์อื่น ๆ มาใช้ใน
ชิ้นงานได้ แต่ต้องระมัดระวังเรื่องชื่อของ Symbol อาจมีการซ้ากัน ทาให้ผลงานเกิดปัญหา ในกรณีที่ชื่อ
เดียวกันให้ตรวจสอบให้ดีว่าจะใช้ตัวใหม่หรือตัวที่มีอยู่เดิม จึงควรให้ความสาคัญกับคาเตือนของโปรแกรม
ด้วย มีขั้นตอนการนาเข้าดังนี้
1. เมื่ออยู่ในไฟล์งานที่ต้องการเรียกใช้ Library ไปที่เมนูบาร์ File -> Import -> Open External
Library
2. โปรแกรมจะให้เลือกไฟล์ Flash ที่มี Library ที่ต้องการ
3. ในไฟล์ที่ทางานอยู่ จะปรากฏ Libraryที่เรา Import เข้ามาใช้งาน
30
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
บทที่ 5 การทา Animation
ความสามารถที่โด่ดเด่นมาก ๆ ของโปรแกรม Flash นั้นก็คือความสามารถด้าน Animation ที่
สามารถทางานง่าย ๆ จนถึง Animation ที่มีความซับซ้อนได้ ลักษณะการทางานของAnimation บน Flash
จะต้องทางานบน Time Line ที่มีลักษณะเป็นเฟรม อยู่ทางด้านบนของหน้าจอ เรามาทาความรู้จักหน้าตา
ของ Time Line Flash ดังนี้
5.1 การใช้ Play Head
Play Head ใช้เพื่อตรวจสอบ สร้าง และแก้ไขชิ้นงาน ของเฟรมต่าง ๆ โดยหน้าจอของพื้นที่ทางาน
จะแสดงผลตามที่มีการกาหนดตาแหน่งPlay Head สามารถเลื่อน Play Head โดยการคลิกที่ Play Head
ที่มีลักษณะเป็นสีแดงเลื่อนไปยังเฟรมที่ต้องการ
ซ่อน / แสดง Layer
Lock Layer แสดงเค้าร่าง ตาแหน่งเฟรม เฟรมปัจจุบันที่ทางาน Play Head
สร้าง Layer
สร้าง Guide Layer
สร้าง Folder
ลบ Layer เคลื่อน Playhead
ไปกี่งกลางเฟรม
Onion skin Onion skin แบบ เห็น
เฉพาะ Outline
Onion skin
แบบชัดเฉาะ
Key frame
ช่วงของการแสดง Onion skin
หมายเลขเฟรมปัจจุบัน
จานวนเฟรมต่อ 1 วินาที
เวลาที่ใช้นับจากเริ่มถึงPlay Head
31
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
5.2 สร้าง Layer ใหม่
ในตอนเริ่มต้นโปรแกรมจะสร้าง Layer 1 ขึ้นมารอก่อนแล้ว สามารถสร้างหรือนาวัตถุเข้ามาใช้งาน
ได้ทันที ถ้าต้องการสร้าง Layer เพิ่มให้คลิกที่ปุ่มInsert Layer จะปรากฏ Layer ใหม่ ซึ่งควรจะมีการแก้ไข
ชื่อ Layer ให้สอดคล้องกับชิ้นงาน โดยการกดปุ่ม F2 ที่ชื่อ Layer
5.3 สร้าง Folder
ในการสร้างชิ้นงาน Flash มักประสบปัญหา Layer ที่มีจานวนมาก ซึ่งไม่สะดวกต่อการเรียกใช้
งาน จึงควรจัดเก็บLayer ต่าง ๆ ให้อยู่ในหมวดหมู่ เช่นตัวอย่างด้านล่างซ้ายจะพบว่า ชิ้นงานมีLayer
มากมายส่วนทางด้านขวาเป็นการจัดเก็บLayer ไว้เป็นหมวดหมู่
5.4 วิธีการสร้าง Folder
1 ให้คลิกที่ จะปรากฏ Folder ขึ้นมา
32
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2 จากนั้นให้เปลี่ยนชื่อFolder ให้สอดคล้องกับชิ้นงาน โดยการกดF2 ที่ชื่อ Folder
3 นา Layer เข้าไปใส่ใน Folder โดยการคลิกเมาส์ที่ Layer ค้างไว้ แล้วลากไปที่ Folder
5.5 ระบบ Frame
ลักษณะ Frame 1 Frame ของโปรแกรม Flash แทนภาพ 1 ภาพ ซึ่งจะต้องนา Frame มาเรียงต่อ
กันจนเกิดเป็นภาพเคลื่อนไหว ลักษณะFrame มีรูปแบบดังนี้
Frame ที่ไม่มีวัตถุ
Key Frame ที่ไม่มีวัตถุ
Key Frame ที่มีวัตถุ
Frame ที่มีการเขียน Action Script
KeyFrame ที่มีการตั้งชื่อ Instance
Frame เปล่า
Motion Tween ( พื้นสีฟ้ า ) Frame ที่มีการเคลื่อนไหวอย่างต่อเนื่อง
Shape Tween ( พื้นสีเขียว ) Frame ที่มีการเปลี่ยนรูปทรงอย่างต่อเนื่อง
Frame ที่มี Keyframe
5.6 การเพิ่ม Key Frame
เมื่อมีการเปลี่ยนแปลงตาแหน่งการเคลื่อนที่ของ
วัตถุ เราจะต้องสร้าง Key Frame ขึ้นมาใหม่ โดยการกด
คลิกขวาที่ Frame ที่ต้องการสร้าง Key Frame แล้วเลือก
Insert Keyframe หรือกด ปุ่ม F6
33
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
5.7 การเพิ่ม Frame
ในกรณีที่ภาพไม่มีการเปลี่ยนแปลงหรือต้องการเพิ่มช่วงระยะเวลาของAnimation จะต้องใช้คาสั่ง
เพิ่มเฉพาะ Frame โดยมีวิธีดังนี้
1. ในตัวอย่างด้านล่าง Animation ลูกบอลจะวิ่งจากเฟรมที่ 1 ไปสิ้นสุดในเฟรมที่ 20
2. ถ้าต้องการเพิ่มเฟรมให้คลิกขวาที่เฟรมจากนั้นเลือกที่Insert Frame หรือกด F5 กด 1 ครั้งจะ
มี Frame เพิ่ม 1 Frame
3. ถ้าต้องการเพิ่มเฟรมจานวนมากให้ทาHighlight คลิกครอบจานวนหลาย ๆ Frame แล้วกด
ปุ่ม F5 จานวน Frame จะขยายออกไปตามจานวนช่วงที่ได้เลือกเอาไว้
34
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
นอกจากการเพิ่ม Frame ในช่วงระหว่าง Animation เรายังสามารถเพิ่ม Frame หลังจาก Keyframe เพื่อทิ้ง
ภาพสุดท้ายให้ปรากฏค้างอยู่ มีวิธีการดังนี้
1. จากตัวอย่าง Keyframe หยุดอยู่ที่ Frame ที่ 25 นั้นก็หมายความว่า ลูกบอลจะหยุดที่เฟรมที่ 25
ภาพก็จะตัดไปที่เฟรมที่ 1 วนอีกครั้ง ซึ่งถ้าต้องการให้ลูกบอลหยุดค้างถึงFrame ที่ 40 จะต้องคลิก
ขวาจากนั้นเลือกที่ Insert Frame หรือกดปุ่ม F5
2. ผลที่ได้คือลูกบอลจะวิ่งจาก Keyframe ที่1 จนมาหยุดที่ Keyframe ที่ 25 และปรากฏค้างไว้ถึง
Frame ที่ 40
35
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
บทที่ 6 การสร้างภาพเคลื่อนไหว
การสร้างภาพเคลื่อนไหวหรือ Animation ในโปรแกรม Flash มีลักษณะการสร้างด้วยกัน 3 แบบคือ
 แบบเฟรมต่อเฟรม (Frame by Frame)
 แบบเคลื่อนที่ (Motion Tween)
 แบบเปลี่ยนรูปทรง (Shape Tween)
6.1 Animation แบบเฟรมต่อเฟรม (Frame by Frame)
การสร้าง Animation แบบ เฟรมต่อเฟรม เป็นการนาเอาเฟรมมาเรียงกัน โดยในภาพแต่ละเฟรมจะต้องมี
การเปลี่ยนแปลง การทา Animation แบบนี้ภาพที่ได้จะไม่ลื่นไหล มักใช้งานกับAnimation ที่มีการ
เปลี่ยนแปลงของภาพที่ไม่สม่าเสมอและไม่ต่อเนื่อง เช่น การทาAnimation ภาพ ปากคนพูด
แต่ในบางชิ้นงานถ้าทาแบบเฟรมต่อเฟรม จะใช้เวลาในการทามากเช่น การทาลูกบอลกระเด้ง ถ้าเป็นแบบ
เฟรมต่อเฟรม ผู้สร้างจะต้องกาหนดการเคลื่อนไหวของลูกบอลทุก ๆ เฟรม ดังรูปด้านล่าง ซึ่งถ้ามีการแก้ไข
ตาแหน่งของลูกบอลในอนาคต อาจจะต้องทาใหม่ทั้งหมด
36
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6.2 การสร้าง Animation แบบเฟรมต่อเฟรม
1. ตั้งชื่อ Layer ให้สอดคล้องกับวัตถุในตัวอย่างตั้งชื่อว่าไฟ
2. สร้างวัตถุลงบน Keyframe ที่ 1 ดังตัวอย่างเป็นรูปเปลวไฟ
3. คานวณจานวนเฟรมต่อ 1 วินาที ถ้าต้องการ Animation ที่ลื่นไหล จะต้องวาดทุกเฟรม แต่ใน
ตัวอย่างนี้ต้องการเพียงแค่4 ภาพ ต่อ 12 เฟรม
4. ให้ไปที่เฟรมที่ 5 กด F6 เพื่อสร้าง Keyframe จากนั้นวาดต่อเติมหรือลบของเดิมออกและวาดรูปไผ
ลงไปใหม่ ควรวาดให้ใกล้เคียงกับตาแหน่งเดิม
5. ทาแบบนี้ไปเรื่อย ๆ โดย Keyframe จะอยู่ในตาแหน่งที่ 1,5,9 และมีการทิ้ง Frame ไปจนถึง 11
เหตุที่ไม่ทา Frame ที่ 12 เนื่องจากการทา Animation ใน Flash เมือจบชิ้นงานแล้วจะมีการวนซ้า
ใหม่ ทาให้ภาพสุดท้ายจะตรงกับภาพที่1 พอดี
6. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง
37
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6.3 Animationแบบเคลื่อนที่ (Motion Tween)
เป็นรูปแบบการสร้างที่ทาให้วัตถุมีการเคลื่อนที่เคลื่อนไหว เปลี่ยนแปลงรูปทรง ซึ่งการทากาหนด
เพียงจุดเริ่มต้นและจุดสิ้นสุด ส่วนFrame ที่เหลือถ้าใช้ Motion Tween โปรแกรมจะช่วยสร้าง Animation
ที่เหลือเอง การทา Animation แบบนี้ช่วยประหยัดเวลาและทาให้ผลงานมีความลื่นไหล
6.4 การสร้างAnimationแบบเคลื่อนที่ (Motion Tween)
1. จากรูปตัวอย่าง มีผล Apple อยู่บนต้นไม้ต้องการให้ผล Apple ตกลงมาที่พื้น ให้กาหนดระยะเวลา
ในการตก ดังตัวอย่างต้องการ 1 วินาที ให้คลิกที่ Frame ที่ 12 แล้วกด F6 จากนั้นลากผล Apple
ลงมาที่พื้น
38
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
2. ถ้าเลื่อน Play Head ไปมาจะพบว่าใน Frame ที่ 1-11 ผล appleจะยังค้างอยู่บนต้นไม้ แต่เมื่อถึง
เฟรมที่ 12 ผล Apple จะตกมาที่พื้นทันที การทาแบบนี้จะเป็นลักษณะanimation แบบ Frame
by Frame
3. ปรับให้เป็นแบบMotion Tween โดยการคลิกขวาที่ช่วงระหว่าง Frame แล้วเลือก Create Motion
tween ทาให้ช่วง Frame มีลูกศรเพิ่มเข้ามา แสดงให้รู้ว่า Motion Tween ทางาน
4. ตอนนี้ลูก Apple ตกลงที่พื้นในเฟรมที่12 แล้ว แต่การตกลงมายังไม่สมจริง จึงต้องการทาให้ลูก
Apple กลิ้งไปมาก่อนที่จะหยุดอยู่กับที่ โดยให้กดF6 ใน Frame ที่ 17 เพื่อสร้าง Keyframe
5. คลิกที่คาสั่ง Free Transform จัดการหมุนลูก Apple ไปทางขวาเล็กน้อย
6. กด F6 ใน Frame ที่ 22 เพื่อสร้าง Keyframe
7. คลิกที่คาสั่ง Free Transform จัดการหมุนลูก Apple ไปทางซ้ายเล็กน้อย
8. คลิกขวาที่ช่วงระหว่าง Frame แล้วเลือก Create Motion tween ทั้ง 2 ช่วงเฟรม
9. คลิกที่ Frame ที่ 35 ของ Layer ผลไม้ กด F5 เพื่อทิ้งเฟรม เนื่องจากตั้งแต่เฟรมที่22 – 35 ไม่มี
การเปลี่ยนแปลงการเคลื่อนไหววัตถุ
10. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง
39
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6.5 การปรับแต่งการเคลื่อนไหวแบบ Motion Tween
เราสามารถปรับแต่งการเคลื่อนไหว โดยคลิกที่ Frame ที่มีการใช้ Motion ด้านล่างของหน้าจอส่วน
ของ Properties จะปรากฏหน้าต่างดังรูป
 Tween ชนิดการเคลื่อนไหว มี 3 รูปแบบดังนี้
- None ยกเลิกการเคลื่อนไหวMotion Tween
- Motion สร้างการเคลื่อนไหวแบบเคลื่อนที่
- Shape สร้างการเคลื่อนไหวแบบเปลี่ยนรูปร่าง
 Scale เมื่อใช้จะทาให้วัตถุที่อยู่ในKeyframe แรก และ Keyframe สุดท้ายมีขนาดเท่ากัน โดย
อัตโนมัติ
 Ease ระดับความเร็วในการเคลื่อนที่
- ค่ามากกว่า 0 การเคลื่อนไหวจะเป็นจากช้าไปเร็ว
- ค่าน้อยกว่า 0 การเคลื่อนไหวจะเป็นจากช้าไปเร็ว
- ค่าเท่ากับ 0 จะเป็นการเคลื่อนไหวแบบปกติ
 Edit เป็นการปรับแต่งค่า Ease In / Ease Out ขั้นสูงปรับผ่านส่วนโค้ง
 Rotate เป็นคาสั่งการหมุ่นวัตถุที่ถูกสั่งการให้เคลื่อนไหว โดยมีการตั้งค่าดังนี้
- None ไม่หมุน
- Auto หมุนไปตามการเปลี่ยนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้าย
- CW หมุนตามเข็มนาฬิกา
- CCW หมุนทวนเข็มนาฬิกา
6.6 Animation แบบเปลี่ยนรูปทรง (Shape Tween)
เป็นการทาAnimation ให้เปลี่ยนรูปทรงจากวัตถุหนึ่งไปยังอีกวัตถุหนึ่ง หรือวัตถุเดียวกันแต่เปลี่ยน
รูปทรงก็ได้ สาหรับวัตถุที่จะนามาทาต้องไม่เป็น Symbol ถ้าเป็น Symbol จะต้องทาการเปลี่ยนให้เป็นวัตถุ
ธรรมดาก่อน
40
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6.7 การสร้าง Animation แบบเปลี่ยนรูปทรง (Shape Tween)
1. วาดรูปขึ้นมาใหม่หรือใช้วัตถุที่เป็นSymbol แทรกเข้ามาในชิ้นงานในไฟล์ตัวอย่างจะมี2 วัตถุคือ
Apple และ Tree
2. คลิก Frame ที่ 1 ลาก แล้วลาก Symbol Apple ลงบน Stage
3. กด Alt+B (Break Apart) เพื่อเปลี่ยน Symbol ให้เป็นภาพปกติ
4. คลิก Frame ที่ 36 กดปุ่ม F6 ลบภาพ Apple ที่อยู่บน Frame ที่ 36 ออก
5. ลาก Symbol Tree ลงบน Stage แล้วกด Alt+B (Break Apart) เพื่อเปลี่ยน Symbol ให้เป็นภาพ
ปกติ
41
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
6. คลิกขวาช่องว่างระหว่าง Frame แล้วเลือก Create Shape Tween
7. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash
โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง
6.8 การเคลื่อนไหวตามเส้น Guide (Motion Guide)
เราสามารถกาหนดเส้นทางเดินของวัตถุโดยวาดเส้นทาง ทาให้สะดวกต่อการทาAnimation เช่น
การทารถวิ่ง เครื่องบินบิน นกบินบนฟ้ า หรือคนเดินขึ้นภูเขา เราเพียงสร้างMovie Clip จากนั้นสั่งให้ขยับ
ตามเส้นทาง นอกจากนี้ยังสามารถแก้ไขเส้นทางได้ภายหลังด้วย
6.9 วิธีการสร้างภาพเคลื่อนไหวตามเส้นGuide
ไฟล์ตัวอย่างเป็นไฟล์พื้นที่มีต้นไม้อยู่ข้างทาง โดยที่จะต้องนารถขับไปตามทางดังกล่าว โดยได้
จัดเตรียมพื้นที่ไว้ให้แล้ว แต่จะต้องนารูปรถเข้ามาจากภายนอกเองในที่นี้ใช้รูปรถที่เป็นรูปภาพแบบPNG
1. จัดการ Lock Layer Ground และ Tree โดยการกดที่ตาแหน่งLock Layer ของ Layer เมื่อคลิก
แล้วจะเป็นรูปกุญแจ
2. สร้าง ขึ้นมา 1 Layer โดยคลิกที่ปุ่ม และเปลี่ยนชื่อเป็น Car และย้าย Layer ไปไว้ด้านบนสุด
42
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
3. คลิกที่ Layer Car คลิกที่ปุ่ม Add Motion
guide จะปรากฏ Layer Guide :car ซึ่งจะเป็น
Layer ที่ใช้วาดเส้นทางเดิน สาหรับสิ่งที่อยู่ในLayer
นี้จะไม่เห็นตอนที่นาเสนอผลงาน จะเห็นในตอน
สร้างผลงานเท่านั้น
4. คลิกที่ Layer Guide :car จากนั้นวาดเส้นทางเดินลง
บนถนนด้วยคาสั่ง Pencil Tool ซึ่งควรปรับ
Pencil mode ที่ด้านล่าง Toolbox เป็นแบบ
Smooth เพื่อให้รถขับตามเส้นอย่างเป็นธรรมชาติ
5. ในกรณีที่วาดเส้นแล้วมือไม่นิ่ง หรือเส้นยังเป็นหยักเปลี่ยมมุม ให้ดับเบิลคลิกที่เส้นเพื่อทาการเลือก
เส้นจากนั้นให้คลิกที่Tool box ที่เขียนว่า Smooth จนกว่าเส้นจะโค้งมน หรือถ้ากดจนเป็นเป็น
เหลี่ยม ๆ ก็ควรลบและวาดใหม่
6. คลิกที่ Layer car จากนั้นวาดภาพรถ หรือนาไฟล์รูปรถเข้ามาในชิ้นงาน แต่ในตัวอย่างนี้ได้เตรียม
รูปรถไว้ให้แล้ว ให้นาภาพรถเข้ามาโดยคลิกที่ Menu bar File->Import->Import to Stage
จากนั้นเลือกไฟล์ car.png ซึ่งไฟล์นี้เป็นรูปที่มีคุณสมบัติฉากหลังโปร่งใส
43
โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู
Adobe flash-คู่มือ-สำหรับครู

Contenu connexe

Tendances

การเขียน Storyboard
การเขียน Storyboardการเขียน Storyboard
การเขียน StoryboardYaowaluck Promdee
 
เฉลยข้อสอบเพาเวอร์พ้อยท์
เฉลยข้อสอบเพาเวอร์พ้อยท์เฉลยข้อสอบเพาเวอร์พ้อยท์
เฉลยข้อสอบเพาเวอร์พ้อยท์peter dontoom
 
แบบทดสอบ Powerpoint
แบบทดสอบ Powerpointแบบทดสอบ Powerpoint
แบบทดสอบ Powerpointpoomarin
 
การผลิตสื่อวิดีโอ (Video Production)
การผลิตสื่อวิดีโอ (Video Production)การผลิตสื่อวิดีโอ (Video Production)
การผลิตสื่อวิดีโอ (Video Production)Dr.Kridsanapong Lertbumroongchai
 
คู่มือ SketchUp
คู่มือ SketchUpคู่มือ SketchUp
คู่มือ SketchUpPiyaboon Nilkaew
 
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์Supaporn Khiewwan
 
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์ศุภชัย พุทธรักษ์
 
เล่ม1 สื่อมัลติมีเดีย
เล่ม1 สื่อมัลติมีเดียเล่ม1 สื่อมัลติมีเดีย
เล่ม1 สื่อมัลติมีเดียboonyarat thungprasert
 
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสารแผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสารวัชรพล เที่ยงปา
 
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)Dr.Kridsanapong Lertbumroongchai
 
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)Dr.Kridsanapong Lertbumroongchai
 
เครื่องมือที่ใช้วาดภาพในโปรแกรม Paint
เครื่องมือที่ใช้วาดภาพในโปรแกรม Paintเครื่องมือที่ใช้วาดภาพในโปรแกรม Paint
เครื่องมือที่ใช้วาดภาพในโปรแกรม PaintBenjapeon Jantakhot
 
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)Dr.Kridsanapong Lertbumroongchai
 
ความหมายของสตอรี่บอร์ด
ความหมายของสตอรี่บอร์ดความหมายของสตอรี่บอร์ด
ความหมายของสตอรี่บอร์ดrungtip boontiengtam
 
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1Dr.Kridsanapong Lertbumroongchai
 
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinotiสร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย VidinotiDr.Kridsanapong Lertbumroongchai
 
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิคแผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิคเทวัญ ภูพานทอง
 

Tendances (20)

ออกแบบและเทคโนโลยี ม.5
ออกแบบและเทคโนโลยี ม.5ออกแบบและเทคโนโลยี ม.5
ออกแบบและเทคโนโลยี ม.5
 
การเขียน Storyboard
การเขียน Storyboardการเขียน Storyboard
การเขียน Storyboard
 
แนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshopแนะนำโปรแกรม Adobe Photoshop
แนะนำโปรแกรม Adobe Photoshop
 
เฉลยข้อสอบเพาเวอร์พ้อยท์
เฉลยข้อสอบเพาเวอร์พ้อยท์เฉลยข้อสอบเพาเวอร์พ้อยท์
เฉลยข้อสอบเพาเวอร์พ้อยท์
 
แบบทดสอบ Powerpoint
แบบทดสอบ Powerpointแบบทดสอบ Powerpoint
แบบทดสอบ Powerpoint
 
การผลิตสื่อวิดีโอ (Video Production)
การผลิตสื่อวิดีโอ (Video Production)การผลิตสื่อวิดีโอ (Video Production)
การผลิตสื่อวิดีโอ (Video Production)
 
คู่มือ SketchUp
คู่มือ SketchUpคู่มือ SketchUp
คู่มือ SketchUp
 
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์
เฉลยแบบฝึกหัด เรื่อง ส่วนประกอบของสื่อสิ่งพิมพ์
 
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์
วิชาเขียนแบบด้วยโปรแกรมคอมพิวเตอร์
 
เล่ม1 สื่อมัลติมีเดีย
เล่ม1 สื่อมัลติมีเดียเล่ม1 สื่อมัลติมีเดีย
เล่ม1 สื่อมัลติมีเดีย
 
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสารแผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
 
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)
การเขียนบทสำหรับงานวิดีโอ (Script Writing for Video Production)
 
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)
เทคนิคการเล่าเรื่องดิจิทัล (Digital Storytelling Technique)
 
เครื่องมือที่ใช้วาดภาพในโปรแกรม Paint
เครื่องมือที่ใช้วาดภาพในโปรแกรม Paintเครื่องมือที่ใช้วาดภาพในโปรแกรม Paint
เครื่องมือที่ใช้วาดภาพในโปรแกรม Paint
 
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
อินโฟกราฟิกในยุคการศึกษา 4.0 (Infographic in Education 4.0)
 
ความหมายของสตอรี่บอร์ด
ความหมายของสตอรี่บอร์ดความหมายของสตอรี่บอร์ด
ความหมายของสตอรี่บอร์ด
 
Auto cad all
Auto cad allAuto cad all
Auto cad all
 
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1
การประมวลผลภาพพาโนรามา (Panorama Photography) Part 1
 
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinotiสร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
สร้างสื่อ Augmented Reality ง่ายๆ ด้วย Vidinoti
 
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิคแผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
 

En vedette

คู่มือFlash
คู่มือFlashคู่มือFlash
คู่มือFlashMark Liberty
 
ภาคผนวก
ภาคผนวกภาคผนวก
ภาคผนวกYok Sarinee
 
ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe FlashCS5
ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5
ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe FlashCS5kroorat
 
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์Yok Sarinee
 
บทที่ 1 ชีวิตกับสิ่งแวดล้อม
บทที่ 1 ชีวิตกับสิ่งแวดล้อมบทที่ 1 ชีวิตกับสิ่งแวดล้อม
บทที่ 1 ชีวิตกับสิ่งแวดล้อมWichai Likitponrak
 

En vedette (7)

คู่มือFlash
คู่มือFlashคู่มือFlash
คู่มือFlash
 
ภาคผนวก
ภาคผนวกภาคผนวก
ภาคผนวก
 
หลักการใช้ยา ปี4
หลักการใช้ยา ปี4หลักการใช้ยา ปี4
หลักการใช้ยา ปี4
 
10. กัณฑ์ที่ ๑๐ สักกบรรพ ๔๓ พระคาถา
10. กัณฑ์ที่ ๑๐ สักกบรรพ ๔๓ พระคาถา10. กัณฑ์ที่ ๑๐ สักกบรรพ ๔๓ พระคาถา
10. กัณฑ์ที่ ๑๐ สักกบรรพ ๔๓ พระคาถา
 
ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe FlashCS5
ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5
ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe FlashCS5
 
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์
โครงงานCai เรื่องการบำรุงรักษาเครื่องคอมพิวเตอร์
 
บทที่ 1 ชีวิตกับสิ่งแวดล้อม
บทที่ 1 ชีวิตกับสิ่งแวดล้อมบทที่ 1 ชีวิตกับสิ่งแวดล้อม
บทที่ 1 ชีวิตกับสิ่งแวดล้อม
 

Similaire à Adobe flash-คู่มือ-สำหรับครู

ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูปเอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูปlekruthai khantongchai
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
Photoshop
PhotoshopPhotoshop
Photoshopjompon
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 pom_2555
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาpom_2555
 
ใบความรู้ที่ 1
ใบความรู้ที่ 1ใบความรู้ที่ 1
ใบความรู้ที่ 1Khanittha Bumrunglan
 
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlash
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlashแนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlash
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlashssuser5adb53
 
งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)Anekphongtupan
 
งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)Anekphongtupan
 
การเข้าโปรแกรม Psd
การเข้าโปรแกรม Psdการเข้าโปรแกรม Psd
การเข้าโปรแกรม Psdsombut
 
Adobe Flash CS6
 Adobe Flash CS6 Adobe Flash CS6
Adobe Flash CS6siwaporn_jo
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007Wee Jay
 

Similaire à Adobe flash-คู่มือ-สำหรับครู (20)

Flash for teacher
Flash for teacher Flash for teacher
Flash for teacher
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ซอฟแวร์
ซอฟแวร์ซอฟแวร์
ซอฟแวร์
 
ซอฟแวร์
ซอฟแวร์ซอฟแวร์
ซอฟแวร์
 
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูปเอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป
เอกสารประกอบการอบรม หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสำเร็จรูป
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
 
ใบความรู้ที่ 1
ใบความรู้ที่ 1ใบความรู้ที่ 1
ใบความรู้ที่ 1
 
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlash
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlashแนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlash
แนวการสร้างภาพแอนนิเมชั่น+การใช้โปรแกรมFlash
 
งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)
 
งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)งานนำเสนอ(เริ่มต้นกับAuthorware)
งานนำเสนอ(เริ่มต้นกับAuthorware)
 
การเข้าโปรแกรม Psd
การเข้าโปรแกรม Psdการเข้าโปรแกรม Psd
การเข้าโปรแกรม Psd
 
Adobe Flash CS6
 Adobe Flash CS6 Adobe Flash CS6
Adobe Flash CS6
 
คู่มือFlash
คู่มือFlashคู่มือFlash
คู่มือFlash
 
Powerpoint 2007
Powerpoint 2007Powerpoint 2007
Powerpoint 2007
 
Microsoft office power point 2007
Microsoft office power point 2007Microsoft office power point 2007
Microsoft office power point 2007
 

Plus de สุเมธี​​​​ ตี่พนมโอรัล / សុមេធី ទីភ្នំឱរ៉ាល់ (Sumedhi TyPhnomAoral)

Plus de สุเมธี​​​​ ตี่พนมโอรัล / សុមេធី ទីភ្នំឱរ៉ាល់ (Sumedhi TyPhnomAoral) (20)

ทำตัวกิริยาศัพท์ ตามขั้นตอน อย่างง่าย _ Step By Step _Pali Verb Building
ทำตัวกิริยาศัพท์ ตามขั้นตอน อย่างง่าย _ Step By Step _Pali Verb Buildingทำตัวกิริยาศัพท์ ตามขั้นตอน อย่างง่าย _ Step By Step _Pali Verb Building
ทำตัวกิริยาศัพท์ ตามขั้นตอน อย่างง่าย _ Step By Step _Pali Verb Building
 
ประโยคโบราณ ในพระธัมมปทัฏฐกถา _ _การใช้ภาษาบาลี.pdf
ประโยคโบราณ ในพระธัมมปทัฏฐกถา _ _การใช้ภาษาบาลี.pdfประโยคโบราณ ในพระธัมมปทัฏฐกถา _ _การใช้ภาษาบาลี.pdf
ประโยคโบราณ ในพระธัมมปทัฏฐกถา _ _การใช้ภาษาบาลี.pdf
 
ประโยคแบบ ในภาษาบาลี _ _การใช้ภาษาบาลี.pdf
ประโยคแบบ ในภาษาบาลี _ _การใช้ภาษาบาลี.pdfประโยคแบบ ในภาษาบาลี _ _การใช้ภาษาบาลี.pdf
ประโยคแบบ ในภาษาบาลี _ _การใช้ภาษาบาลี.pdf
 
การใช้ สเจ ศัพท์ ในประโยคเงื่อนไข _ การใช้ภาษาบาลี
การใช้ สเจ ศัพท์ ในประโยคเงื่อนไข _ การใช้ภาษาบาลีการใช้ สเจ ศัพท์ ในประโยคเงื่อนไข _ การใช้ภาษาบาลี
การใช้ สเจ ศัพท์ ในประโยคเงื่อนไข _ การใช้ภาษาบาลี
 
การสร้างประโยคคำถามในภาษาบาลี_การใช้ภาษาบาลี
การสร้างประโยคคำถามในภาษาบาลี_การใช้ภาษาบาลีการสร้างประโยคคำถามในภาษาบาลี_การใช้ภาษาบาลี
การสร้างประโยคคำถามในภาษาบาลี_การใช้ภาษาบาลี
 
ประโยคที่กิริยาซ้อนกัน และหลักการแปลมคธเป็นไทย.pdf
ประโยคที่กิริยาซ้อนกัน และหลักการแปลมคธเป็นไทย.pdfประโยคที่กิริยาซ้อนกัน และหลักการแปลมคธเป็นไทย.pdf
ประโยคที่กิริยาซ้อนกัน และหลักการแปลมคธเป็นไทย.pdf
 
การแปลบทสมาสที่สัมพันธ์กับบทอื่นๆ_Samasa Relating To Other Words
การแปลบทสมาสที่สัมพันธ์กับบทอื่นๆ_Samasa Relating To Other Wordsการแปลบทสมาสที่สัมพันธ์กับบทอื่นๆ_Samasa Relating To Other Words
การแปลบทสมาสที่สัมพันธ์กับบทอื่นๆ_Samasa Relating To Other Words
 
คําเรียกญาติ (บาลี-ไทย-อังกฤษ)_Family Tree Pali.pdf
คําเรียกญาติ (บาลี-ไทย-อังกฤษ)_Family Tree Pali.pdfคําเรียกญาติ (บาลี-ไทย-อังกฤษ)_Family Tree Pali.pdf
คําเรียกญาติ (บาลี-ไทย-อังกฤษ)_Family Tree Pali.pdf
 
ประมวลศัพท์บาลี ตามหมวดหมู่ _ Pali_Vocab
ประมวลศัพท์บาลี ตามหมวดหมู่ _ Pali_Vocabประมวลศัพท์บาลี ตามหมวดหมู่ _ Pali_Vocab
ประมวลศัพท์บาลี ตามหมวดหมู่ _ Pali_Vocab
 
การแปล อนฺต, มาน, ต, ตฺวา ปัจจัย_Anta-Mana-Ta-Tva_Translation
การแปล  อนฺต,  มาน,  ต,  ตฺวา  ปัจจัย_Anta-Mana-Ta-Tva_Translationการแปล  อนฺต,  มาน,  ต,  ตฺวา  ปัจจัย_Anta-Mana-Ta-Tva_Translation
การแปล อนฺต, มาน, ต, ตฺวา ปัจจัย_Anta-Mana-Ta-Tva_Translation
 
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ธ.3 พ.ศ.2550-2566 (17 ปี)_Pali grammar Exam A...
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ธ.3 พ.ศ.2550-2566 (17 ปี)_Pali grammar Exam A...ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ธ.3 พ.ศ.2550-2566 (17 ปี)_Pali grammar Exam A...
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ธ.3 พ.ศ.2550-2566 (17 ปี)_Pali grammar Exam A...
 
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ย.1-2 พ.ศ.2511-2566 (56 ปี)_Pali grammar Exam...
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ย.1-2 พ.ศ.2511-2566 (56 ปี)_Pali grammar Exam...ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ย.1-2 พ.ศ.2511-2566 (56 ปี)_Pali grammar Exam...
ปัญหาและเฉลย วิชาบาลีไวยากรณ์ ป.ย.1-2 พ.ศ.2511-2566 (56 ปี)_Pali grammar Exam...
 
หลักการแปลบาลี 8 ประการ _ หลักการแปลมคธเป็นไทย 8 ประการ
หลักการแปลบาลี 8 ประการ _  หลักการแปลมคธเป็นไทย 8 ประการหลักการแปลบาลี 8 ประการ _  หลักการแปลมคธเป็นไทย 8 ประการ
หลักการแปลบาลี 8 ประการ _ หลักการแปลมคธเป็นไทย 8 ประการ
 
ปัญหาและเฉลยข้อสอบ ป.ธ.3 วิชาไวยากรณ์ฉบับปรับปรุง_ปี ๒๕๑๑-๒๕๖๑.pdf
ปัญหาและเฉลยข้อสอบ ป.ธ.3 วิชาไวยากรณ์ฉบับปรับปรุง_ปี ๒๕๑๑-๒๕๖๑.pdfปัญหาและเฉลยข้อสอบ ป.ธ.3 วิชาไวยากรณ์ฉบับปรับปรุง_ปี ๒๕๑๑-๒๕๖๑.pdf
ปัญหาและเฉลยข้อสอบ ป.ธ.3 วิชาไวยากรณ์ฉบับปรับปรุง_ปี ๒๕๑๑-๒๕๖๑.pdf
 
ปัญหาและเฉลยบาลีไวยากรณ์ ประโยค 1-2 ปี ๒๕๑๑-๒๕๖๑.pdf
ปัญหาและเฉลยบาลีไวยากรณ์ ประโยค 1-2 ปี ๒๕๑๑-๒๕๖๑.pdfปัญหาและเฉลยบาลีไวยากรณ์ ประโยค 1-2 ปี ๒๕๑๑-๒๕๖๑.pdf
ปัญหาและเฉลยบาลีไวยากรณ์ ประโยค 1-2 ปี ๒๕๑๑-๒๕๖๑.pdf
 
ธมฺมปทฏฺฐกถา (๘ ภาค รวมเล่ม)_ธรรมบท ภาคที่ 1-8 รวมเล่ม ฉบับภาษาบาลี
ธมฺมปทฏฺฐกถา (๘ ภาค รวมเล่ม)_ธรรมบท ภาคที่ 1-8 รวมเล่ม  ฉบับภาษาบาลีธมฺมปทฏฺฐกถา (๘ ภาค รวมเล่ม)_ธรรมบท ภาคที่ 1-8 รวมเล่ม  ฉบับภาษาบาลี
ธมฺมปทฏฺฐกถา (๘ ภาค รวมเล่ม)_ธรรมบท ภาคที่ 1-8 รวมเล่ม ฉบับภาษาบาลี
 
อภิธานวรรณนา_พจนานุกรมว่าด้วยศัพท์ที่เป็นนามบัญญัติของเนื้อความที่มีปรากฏอยู่...
อภิธานวรรณนา_พจนานุกรมว่าด้วยศัพท์ที่เป็นนามบัญญัติของเนื้อความที่มีปรากฏอยู่...อภิธานวรรณนา_พจนานุกรมว่าด้วยศัพท์ที่เป็นนามบัญญัติของเนื้อความที่มีปรากฏอยู่...
อภิธานวรรณนา_พจนานุกรมว่าด้วยศัพท์ที่เป็นนามบัญญัติของเนื้อความที่มีปรากฏอยู่...
 
สำนวนแต่งไทยเป็นมคธ สำนักงานแม่กองบาลี & กองพุทธศาสนศึกษา (1)_(2).pdf
สำนวนแต่งไทยเป็นมคธ  สำนักงานแม่กองบาลี & กองพุทธศาสนศึกษา (1)_(2).pdfสำนวนแต่งไทยเป็นมคธ  สำนักงานแม่กองบาลี & กองพุทธศาสนศึกษา (1)_(2).pdf
สำนวนแต่งไทยเป็นมคธ สำนักงานแม่กองบาลี & กองพุทธศาสนศึกษา (1)_(2).pdf
 
จูฬธาตุปัจจยโชติกา _ พจนานุกรมบาลี-บาลี
จูฬธาตุปัจจยโชติกา  _  พจนานุกรมบาลี-บาลีจูฬธาตุปัจจยโชติกา  _  พจนานุกรมบาลี-บาลี
จูฬธาตุปัจจยโชติกา _ พจนานุกรมบาลี-บาลี
 
ธรรมบท ภาคที่ 8 แปลโดยพยัญชนะ ฉบับสองภาษา (ไทย-บาลี).pdf
ธรรมบท ภาคที่ 8 แปลโดยพยัญชนะ ฉบับสองภาษา (ไทย-บาลี).pdfธรรมบท ภาคที่ 8 แปลโดยพยัญชนะ ฉบับสองภาษา (ไทย-บาลี).pdf
ธรรมบท ภาคที่ 8 แปลโดยพยัญชนะ ฉบับสองภาษา (ไทย-บาลี).pdf
 

Adobe flash-คู่มือ-สำหรับครู

  • 2. สารบัญ บทที่ 1 ส่วนประกอบของ Flash 1 1.1 ส่วนติดต่อกับผู้ใช้ 2 1.2 กล่องเครื่องมือ 3 1.3 การเริ่มต้นชิ้นงาน 4 1.4 การควบคุมมุมมองของโปรแกรม 5 1.5 การบันทึกไฟล์ 5 1.6 การเลือกวัตถุ 6 1.7 การจัดวัตถุ 7 บทที่ 2 การสร้างวัตถุกราฟิก 8 2.1 การวาดเส้นตรง 8 2.2 การดัดเส้น 8 2,3 การเปลี่ยนคุณสมบัติของเส้น 8 2.4 การเปลี่ยนความหนาเส้น 9 2.5 การปรับแต่งขอบของมุมเส้น 9 2.6 การปรับรูปแบบของปลายเส้น 10 2.7 การวาดเส้นอิสระ 10 2.8 การวาดเส้นโดยใช้ปากกา 10 2.9 การเพิ่มจุดของเส้น 11 2.10 การวาดรูปทรงสี่เหลี่ยม 11 2.11 การวาดวงกลม 12 2.12 การวาดรูปทรงหลายเหลี่ยม 13 2.13 การใช้เครื่องมือยางลบ 14 2.14 การลงสีวัตถุ 15 2.15 การเทสีลงบนพื้นที่ 16 2.16 fการเทสีลงบนเส้น 16 2.17 การจัดการระบบสี 17
  • 3. 2.18 การปรับสีจาก Panel 17 2.19 การควบคุมการไล่สี 17 บทที่ 3 การจัดการข้อความ 19 3.1 โหมดตัวอักษร 20 3.2 ปัญหาภาษาไทยกับ Flash 20 3.3 วิธีการพิมพ์ข้อความ 20 3.4 การเปลี่ยนคุณสมบัติข้อความเป็นหมวดต่าง ๆ 22 3.5 การเปลี่ยนคุณสมบัติของข้อความให้เป็นรูปภาพ 22 บทที่ 4 การจัดการวัตถุ 24 4.1 การแปลงวัตถุเป็น Symbol 24 4.2 การเรียกใช้และแก้ไข Symbol 25 4.3 การสร้าง Symbol แบบปุ่ม 25 4.4 การสร้าง Symbol แบบภาพเคลื่อนไหว 27 4.5 การจัดการ Library 28 4.6 การเปลี่ยนคุณสมบัติSymbol 29 4.7 นา Symbol จากไฟล์อื่นมาใช้ 30 บทที่ 5 การทา Animation 31 5.1 การใช้ Play Head 31 5.2 สร้าง Layer ใหม่ 32 5.3 สร้าง Folder 32 5.4 วิธีการสร้าง Folder 32 5.5 ระบบ Frame 33 5.6 การเพิ่ม Key Frame 33 5.7 การเพิ่ม Frame 34
  • 4. บทที่ 6 การสร้างภาพเคลื่อนไหว 36 6.1 Animation แบบเฟรมต่อเฟรม(Frame by Frame) 36 6.2 การสร้าง Animation แบบเฟรมต่อเฟรม 37 6.3 Animationแบบเคลื่อนที่ (Motion Tween) 38 6.4 การสร้างAnimationแบบเคลื่อนที่ (Motion Tween) 39 6.5 การปรับแต่งการเคลื่อนไหวแบบ Motion Tween 40 6.6 Animation แบบเปลี่ยนรูปทรง (Shape Tween) 40 6.7 การสร้าง Animation แบบเปลี่ยนรูปทรง (Shape Tween) 41 6.8 การเคลื่อนไหวตามเส้น Guide (Motion Guide) 42 6.9 วิธีการสร้างภาพเคลื่อนไหวตามเส้น Guide 42 6.10 การใช้Maskกับงาน Animation 45 6.11 วิธีการใช้งาน Mask 46 6.12 การเปลี่ยนคุณสมบัติสีของ Animation 47 6.13 ขั้นตอนการปรับแต่งคุณสมบัติสี 48 บทที่ 7 การแทรกไฟล์VDO และ Sound 51 7,1 การแทรกไฟล์VDO 51 7.2 การแปลงไฟล์ VDO 51 7.3 การบันทึกไฟล์ Clip จาก YouTube 52 7.4 การนาไฟล์ VDO เข้าไปใส่ใน flashแบบที่ 1 53 7.5 การนาไฟล์ VDO เข้าไปใส่ใน flashแบบที่ 2 55 7.6 การแทรกไฟล์เสียง 56 7.7 การนาไฟล์เพลงเข้ามาใช้เบื้องหลัง 56 7.8 การนาไฟล์เสียง Fx เข้ามาใช้ 58 7.9 การแทรกไฟล์เสียงพูดของตัวละคร 59 บทที่ 8 การสร้างระบบการทางานแบบ Interactive 61 8.1 การทาปุ่มเมนู 61 8.2 การปรับแต่งค่าของ event 65
  • 5. 8.3 การควบคุมการหยุดและการเล่นของAnimation 66 8.4 การทาแบบทดสอบแบบเลือกตอบ 68 8.5 การทาแบบฝึกหัดระหว่างเรียนแบบแสดงกาโต้ตอบทันที 72 8.6 การโหลดไฟล์ Flash เข้ามาใช้ร่วมกัน 73 คีย์ลัดที่สาคัญของ Flash 75 เอกสารอ้างอิง 77 เว็บไซต์ที่สามารถ หาความรู้เพิ่มเติมได้ 77
  • 6. บทที่ 1 ส่วนประกอบของ Flash Adobe Flash แต่เดิมเป็นโปรแกรมของ ค่าย Macromedia ต่อมา Adobe ได้ทาการซื้อ บริษัท ทาให้ชื่อในปัจจุบันคือ Adobe Flash โปรแกรม Flash เป็นโปรแกรมที่ใช้ในการสร้างสื่อ มัลติมีเดียได้หลากหลาย ภาพเคลื่อนไหวแบบ เวคเตอร์ที่มีความคมชัด สามา รถใส่ไฟล์เสียง วีดีโอ ทาระบบการโต้ตอบกับผู้ใช้ ทาเว็บไซต์ รวมทั้งสามารถเขียนโปรแกรมในภาษา Action Script และเชื่อมโยงติดต่อกับฐานข้อมูลอื่น ๆ เทคโนโลยี Flash สามารถทางานได้หลากหลาย ระบบปฏิบัติการเช่น Windows MacOs Linux รวมทั้งอุปกรณ์แบบพกพาเช่นโทรศัพท์มือถือ PDA และยัง สามารถทางานเชื่อมต่อกับอุปกรณ์อื่น ๆ เช่นกล้องwebcam, Printer ผลงานจากโปรแกรม Flash สามารถนาไปประยุกต์ใช้ในหลากหลายวัตถุประสงค์เช่น การทาสื่อ การสอนแบบเอนิมชั่นที่มีระบบโต้ตอบได้ , สื่อนาเสนอสินค้า, เกม, เว็บไซต์,การ์ตูน ฯลฯ 1 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 7. 1.1 ส่วนติดต่อกับผู้ใช้ เมื่อเข้าสู่โปรแกรม Flash จะพบหน้าจอที่มีส่วนประกอบดังนี้ Menu Bar แทบเครื่องมือคาสั่งด้วยรูปแบบตัวอักษร ที่มีครอบคลุมทุกคาสั่ง โดยจะรวบรวมคาสั่งแบ่งหมวดหมู่ต่าง ๆ เราไม่ควรใช้คาสั่งจากเมนูบาร์เพียงอย่างเดียวเพราะจะทาให้ทางานได้ช้า Stage พื้นที่การทางานโดยพื้นที่ที่แสดงผลจะอยู่บนส่วนสีขาว โดยชิ้นงานที่วาดหรือสร้างลงไปจะถูกแสดงผลจาก บริเวณนี้เท่านั้น ส่วนพื้นที่ที่ไม่แสดงผลจะเป็นสีเทา แต่stage สามารถเปลี่ยนสีได้ ไม่ได้มีเพียงแค่สีขาว เพียงอย่างเดียว Toolbox กล่องเครื่องมือที่ช่วยให้เรียกใช้คาสั่งได้ง่ายยิ่งขึ้นด้วยการแสดงเป็นรูปภาพ และในส่วนของToolbox ยังมี ส่วนของการปรับแต่งค่าเพิ่มเติมเช่น การเลือกรูปแบบการลงสี รูปแบบของคาสั่งเพิ่มเติมจากToolbox Timeline Flash เป็นโปรแกรมที่ใช้ Timeline เป็นหลัก ใช้สาหรับกาหนดช่วงเวลาการเคลื่อนไหวการหยุด หรือการ กาหนดเวลาให้คาสั่งต่าง ๆ ทางาน โดยการทางานจะแบ่งเป็นส่วนของLayer ที่ทางานเป็นชั้น เหมือนกับ การวางแผ่นใสซ้อนกัน โดย Layer ที่อยู่ด้านบนสุดจะเป็นLayer ที่เห็นก่อน ส่วน Layer ด้านล่างสุดจะเห็น Stage Panel Menu bar Properties Inspector Time Line Tool Box 2 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 8. ที่หลัง และ ส่วนของ Frame ที่แบ่งเป็นช่อง ๆ แทนช่องละ 1 Frame โดย 1 วินาทีเราสามารถกาหนดได้ว่า จะให้แสดงผลจานวนกี่ Frame Properties Inspector และ Panel เป็นส่วนที่แสดงคุณสมบัติของวัตถุที่เลือก หรือเรียกใช้งานโดยสามารถปรับแต่งค่าต่าง ๆ ได้เช่น ปรับ ขนาดเส้น ปรับสี แบบอักษร 1.2 กล่องเครื่องมือ Selection tool < v > เครื่องมือที่ใช้ทาหน้าที่เลือกวัตถุและยังสามารถเคลื่อนย้ายวัตถุได้ด้วย Subselection tool < A > เครื่องมือในการเลือกส่วนประกอบของวัตถุเช่นเลือกเฉพาะจุด Free Tranform Tool < Q > เครื่องมือใช้สาหรับการหมุนภาพ บิดภาพ และขยายภาพ Gradien Tranform Tool < F > เครื่องมือที่ใช้ปรับแต่งการไล่สีไปในทิศทางต่าง ๆ Lasso Tool < L > เครื่องมือการเลือกบริเวณพื้นที่ในชิ้นงานแบบอิสระ Pen Tool < P > เครื่องมือที่ใช้การวาดเส้นแบบจุดต่อจุดโดยสามารถทาเป็นเส้นโค้งและเส้นตรง Add Anchor Point < = > เครื่องมือที่ใช้การเพิ่มจุดของเส้น Delete Anchor Point < - > ใช้ลบจุดของเส้น Convert Anchor Point < C > ใช้สาหรับเปลี่ยนจุดของเส้นจากเส้นตรงให้เป็นเส้นโค้ง Text Tool < T > ใช้สาหรับพิมพ์ตัวอักษรข้อความ Line Tool < N > ใช้สาหรับวาดเส้น Rectangle Tool < R > ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้ Oval Tool < O > ใช้สาหรับสร้างวงรี โดยถ้ากดปุ่มShift ค้างเอาไว้จะทาให้เป็นวงกลม Rectangle Primitive Tool < R > เป็นเครื่องมือสร้างกล่องสี่เหลี่ยมโดยสามารถปรับมุมโค้งได้ทั้งก่อน และหลังสร้าง Oval Primitive Tool < O > ใช้สาหรับสร้างวงรี โดยถ้ากดปุ่ม Shift ค้างเอาไว้จะทาให้เป็นวงกลม สามารถปรับแต่งโค้งได้ทั้งก่อนและหลังสร้าง PolyStar Tool ใช้สาหรับสร้างรูปหลายเหลี่ยมโดยสามารถกาหนดได้ว่าจะสร้างกี่เหลี่ยม 3 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 9. Pencil Tool < Y > ใช้สาหรับวาดเส้นแบบอิสระ Brush Tool < B > ใช้สาหรับวาดเส้นแบบพู่กัน โดยเส้นมีคุณสมบัติเดียวกับรูปทรง Ink Bottle Tool < S > เครื่องมือใช้สาหรับการเปลี่ยนสีเส้น Paint Bucket Tool < K > เครื่องมือที่ใช้สาหรับลงสีพื้นผิว Eye dropper < I > เครื่องมือที่ใช้สาหรับดึงสี ใช้สาหรับตรวจสอบสี หรือนาสีไปใช้กับส่วนอื่น Eraser < E > ใช้สาหรับลบวัตถุ Hand< H > ใช้สาหรับเคลื่อนย้ายมุมมองหน้าจอ Zoom < M,Z > ใช้สาหรับย่อขยายมุมมองหน้าจอ Stroke color ใช้สาหรับกาหนดสีของเส้น Fill Color ใช้สาหรับกาหนดสีของพื้นผิว 1.3 การเริ่มต้นชิ้นงาน 2. คลิกที่คาสั่งmenu bar File -> New จะปรากฏหน้าต่าง New Document 3. เลือกรูปแบบชิ้นงานที่ต้องการซึ่งโปรแกรมจะมีค่าเริ่มต้นสาหรับผลงานหลาย ๆ แบบแต่โดยปกติ จะเลือกที่ flash file ActionScript 4. ตั้งค่าชิ้นงานได้ที่menu bar Modify -> Document ชื่อเรื่อง รายละเอียด ขนาดของชิ้นงาน รายละเอียด รูปแบบการใช้ หน่วยจานวนเฟรมต่อวินาที 4 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 10. 1.4 การควบคุมมุมมองของโปรแกรม การควบคุมมอมองมีสวนสาคัญในการทางานที่รวดเร็ว เพื่อใช้งานบ่อย ๆ ควรหัดใช้คาสั่งhotkey ร่วมด้วย โดยการควบคุมมุมมองมี 2 คาสั่งหลัก ๆ คือ 1. การ pan ภาพที่ช่วยการเคลื่อนมุมมองของกล้องไปตามจุดต่าง ๆ คลิกที่ Toolbox Hand tool จากนั้นคลิกที่หน้าจอของชิ้นงาน มุมมองของหน้าจอจะเลื่อนไปมาเหมือนกับว่าเราใช้มือเลื่อน ชิ้นงานบนโต๊ะ 2. การ Zoom คาสั่งย่อขยายมุมมอง เพื่อดูภาพรวมและขยายมุมมองในจุดที่ต้องการแก้ไข คลิกที่ Zoom แล้วจึงคลิกที่พื้นที่ทางาน โดยปกติค่าเริ่มต้นจะถูกตั้งค่าให้เป็นการขยายมุมมองแต่ ถ้าต้องการย่อมุมมองให้กดปุ่ม Alt ที่คีย์บอร์ดค้างไว้แล้วคลิกที่พื้นที่ทางานจะเป็นการย่อมุมมอง 1.5 การบันทึกไฟล์ การบันทึกไฟล์เบื้องต้นในFlash มี 2 รูปแบบหลัก ๆ คือ แบบไฟล์ที่ต้องการแก้ไขได้ จะบันทึกเป็น ไฟล์ .FLA มีขั้นตอนการบันทึกไฟล์ดังนี้ 1. คลิกที่ Menu Bar ที่ File - > save ในกรณีที่ต้องการบันทึกเป็นไฟล์เดิม หรือครั้งแรก และ Save As สาหรับกรณีที่ต้องการบันทึกไฟล์เป็นชื่ออื่น 2. เลือกตาแหน่งที่จัดเก็บไฟล์ พร้อมพิมพ์ชื่อไฟล์ 3. ที่ Save As Type เลือก เวอร์ชั่นที่ต้องการ ซึ่งถ้านาไปเปิดในเครื่องที่เวอร์ชั่นต่าว่าจะไม่ สามารถเปิดได้ ควรบันทึกเป็นเวอร์ชั่นที่ถูกต้อง ในกรณีที่ไม่ได้ไปเปิดเครื่องอื่นก็ไม่ต้องสนใจ ส่วนนี้สามารถบันทึกได้เลย จากนั้นกดSave และสาหรับไฟล์ที่ใช้สาหรับเผยแพร่บทหน้าเว็บหรือสื่ออื่น ๆ ซึ่งไฟล์ประเภทนี้จะสามารถดูและใช้งานได้ เท่านั้นไม่สามารถแก้ไขหรือปรับแต่ได้ จะต้องบันทึกเป็นไฟล์.SWFมีขั้นตอนดังนี้ 1. คลิกที่ Menu Bar ที่ File - > Export -> Export Movie 2. เลือกตาแหน่งที่จัดเก็บไฟล์ พร้อมพิมพ์ชื่อไฟล์ 3. ที่ Save As Type เลือก รูปแบบไฟล์ที่ต้องการ ให้เลือกswf ถ้าต้องการนาชิ้นงานไปเผยแพร่แบบ Flash แต่ในส่วนนี้ยังสามารถเลือก export เป็นภาพเคลื่อนไหวแบบอื่น ๆ ได้ด้วย 5 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 11. 1.6 การเลือกวัตถุ ถึงแม้ว่า Flash จะเป็นโปรแกรมแบบ Vector แต่การเลือกวัตถุสามารถยืดหยุ่นได้เหมือนกับ โปรแกรมประเภท Raster คือสามารถเลือกบางส่วนหรือส่วนใดส่วนหนึ่งได้โดยอิสระ โดยมีเครื่องมือดังนี้ Selection tool ใช้สาหรับการเลือกทั้งวัตถุ ถ้าคลิกเพียง1 ครั้ง จะเป็นการเลือก 1 วัตถุ แต่ถ้าดับเบิล คลิกจะเป็นการเลือกวัตถุและเส้นพร้อมกัน แต่ถ้าในกรณีที่คลิกทีเส้น1 ครั้งจะเป็นการเลือกส่วนของเส้น แต่ถ้าดับเบิลคลิกที่เส้นจะเป็นการเลือกเส้นที่อยู่กับเส้นที่คลิกทั้งหมด คาสั่งนี้ยังเป็นคาสั่งเคลื่อนย้ายวัตถุ และเปลี่ยนรูปร่างของวัตถุด้วย Subselection tool ใช้สาหรับเลือกส่วนของวัตถุ โดยให้คลิกที่วัตถุ1 ครั้ง จากนั้นจะปรากฏจุดต่อ ของวัตถุ ซึ่งสามารถคลิกตามจุดต่าง ๆ เพื่อปรับเปลี่ยนรูปทรงได้ Lasso Tool ใช้สาหรับเลือกส่วนของวัตถุโดยกาหนดอณาเขตแบบอิสระ โดยวาดขอบเขตที่ต้องการ 6 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 12. 1.7 การจัดวัตถุ วัตถุที่วาดหรือนาเข้ามาใช้ในโปรแกรมFlash บางครั้งต้องการจัดเรียงให้เป็นระเบียบและระยะ เท่ากัน ถ้าใช้มือกะระยะอาจมีความผิดพลาดและไม่ตรง โปรแกรมจึงอานวยความสะดวกด้วยเครื่องมือ การจัดการตาแหน่งวัตถุดังนี้ 1. จากภาพวัตถุกล่องจัดวางไม่เป็นระเบียบ 2. ไปที่menu bar เลือก Windows->Align เพื่อเรียกหน้าต่าง Align 3. คลิกครอบวัตถุทั้งหมด แล้วคลิกเลือกการจัดระยะ การเว้นระยะห่าง การเรียงให้ตรงกันตามรูป 7 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 13. บทที่ 2 การสร้างวัตถุกราฟิก 2.1 การวาดเส้นตรง คลิกที่เครื่องมือ Line tool เมาส์จะเปลี่ยนเป็นสัญลักษณ์+ ใครคลิกตาแหน่งเริ่มต้น จากนั้นคลิก เมาส์ค้างเอาไว้แล้วลากเมาส์ไปยังทิศทางที่ต้องการ แล้วจึงปล่อยเมาส์ แต่ในกรณีที่ต้องการวาเส้นให้ ขนานกับแกน 8 ทิศ ให้กดปุ่ม Shift ขณะลากเส้น จะทาให้เส้นนั้นตั้งฉากหรือเฉียง45 องศา โดยที่ไม่ต้อง คอยกะระยะเอง 2.2 การดัดเส้น สามารถดัดเส้นตรงที่วาดขึ้นให้เป็นเส้นโคงโดยการคลิกเมาส์ที่ Selection tool จากนั้นคลิกที่บริเวณ กลางเส้นค้างเอาไว้แล้วลากไปยังทิศทางต่าง ๆ เส้นจะถูกแปลงเป็นเส้นโค้ง 2,3 การเปลี่ยนคุณสมบัติของเส้น ให้คลิกที่เส้นที่ต้องการจะเปลี่ยนคุณสมบัติ ถ้าคลิก1 ครั้งจะเป็นการเลือกช่วงเส้น1 ช่วง แต่ถ้าใช้การ ดับเบิ้ลคลิกจะเป็นการเลือกเส้นในบริเวณที่ต่อเนื่องกัน ซึ่งเส้นได้มีการพาดเกี่ยวหรือติดกันก็จะถูกเลือกมา ทั้งหมด จากนั้นทึ่ด้านล่างของหน้าจอบริเวณหน้าต่างProperties ให้ทาการ set ค่าดังนี้ 8 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 14. 2.4 การเปลี่ยนความหนาเส้น ให้คลิกที่เส้นจากนั้นที่คาสั่งเปลี่ยนความหนาของเส้นให้พิมพ์ความหนาลงไปเป็นตัวเลข ในเวอร์ชั่นCS3 นี้ สามารถใส่ความหนาของเส้นเป็นจุดทศนิยมได้ หรือใช้วิธีการ สไลด์เพิ่มขนาดหรือลดขนาดที่ลูกศรด้านข้าง ของขนาดเส้น 2.5 การปรับแต่งขอบของมุมเส้น ในการวาดรูปจะต้องมีการใช้เส้นหลายเส้นมาต่อกันหรือมีการหักมุมของเส้น ถ้าจะให้มีความสวยงาม จะต้องกาหนดขอบมุมเส้นด้วย Miter มุมแหลม Round มุมมน Beval มุมตัด สีของเส้น ความหนา รูปแบบเส้น เส้นขอบมนหรือตัด รูปแบบการเชื่อมจุดต่อรูปแบบการเชื่อมจุดต่อ ช่วยลดการเบลอส่วนโค้งของเส้น Miter ความแหลมของมุม กาหนดรูปแบบเส้นเอง ความสัมพันธ์กับความ หนาของเส้นและมุมมอง แ 9 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 15. 2.6 การปรับรูปแบบของปลายเส้น เส้นที่วาดขึ้นมาตรงปลายเส้นสามารถปรับรูปแบบได้ 3 รูปแบบดังนี้ None ปลายเส้นตัดพอดีกับความยาวของเส้น Round ปลายเส้นโค้งมน Square ปลายเส้นตัดแต่เว้นระยะออกมาห้างกับปลายเส้น 2.7 การวาดเส้นอิสระ การวาดเส้นอิสระจะใช้เครื่องมือ Pencil Tool โดยคาสั่งนี้เสินที่วาดยังคงคุณสมบัติของStoke อยู่ สามารถดัดแก้ไขได้ง่ายเช่นเดียวกับคาสั่งLine สามารถปรับแต่งลักษณะการวาดได้ โดยการปรับแต่งจะ อยู่ด้านล่างของ Tool box มี3 ลักษณะดังนี้ Straighten ทาให้การวาดมีความเป็นเส้นตรงหรือเส้นเป็นรูปทรงโค้ง วงรี วงกลม Smooth ทาให้การวาดมีความโค้งมนและมีความต่อเนื่องกัน Ink ทาให้การวาดมีความอิสระเหมือนกับการขยับของมือมากที่สุด แต่เส้นมักมีปัญหาไม่ต่อเนื่องกัน 2.8 การวาดเส้นโดยใช้ปากกา การวาดเส้นโดยใช้ปากกาเป็นการวาดเส้นที่ผสมผสานระหว่างเส้นตรงกับการวาดโค้งแบบ Bezier เมื่อ ต้องการวาดเส้นโค้งให้คลิกเมาส์ค้างเอาไว้แล้วลาก เส้นจะถูกบิดเป็นโค้งแบบBezier และเส้นสามารถ ลากต่อ ๆ กันได้ และเมื่อต้องการให้เป็นรูปทรงปิด ให้วนเส้นกลับมาคลิกที่จุดเริ่มต้นอีกครั้ง 10 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 16. 2.9 การเพิ่มจุดของเส้น การเพิ่มจุดของเส้นที่วาดขึ้นจากปากกา หรือเส้นเพื่อเปลี่ยนให้เส้นเป็นรูปร่างต่าง ๆ หรือใส่รายละเอียดให้ มากยิ่งขึ้น วิธีใช้ให้คลิกเมาส์ไปที่ Add Anchor Point จากนั้นคลิกไปที่ส่วนของเส้นในจุดที่ต้องการ คาสั่งนี้ต้องใช้คาสั่ง Convert Anchor Point หรือ Subselection tool เป็นเครื่องมือที่ใช้ขยับ จุดที่สร้างไว้ และถ้าต้องการนาจุดออกให้เลือกที่คาสั่ง Delete Anchor Point เพื่อลบจุด 2.10 การวาดรูปทรงสี่เหลี่ยม 1. วาดรูปสี่เหลี่ยมโดยคลิกที่ปุ่ม Rectangle Tool 2. กาหนดคุณสมบัติของส่วนโค้งในกรณีที่ต้องการทาให้สี่เหลี่ยมโค้งมน 11 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 17. 3. คุณสมบัตินี้ถ้ากาหนดเป็น0 จะไม่มีขอบมน ถ้าใส่เป็นค่าบวกขึ้นไปจะเป็นขอบมน และถ้าใส่ค่าที่ เป็นลบจะเป็นขอบมนแต่เข้าด้านใน 4. คลิกเมาส์ กาหนดจุดเริ่มต้นของสี่เหลี่ยม ซึ่งจะเป็นจุดมุมของสี่เหลี่ยม แต่ถ้าต้องการวาดรูป สี่เหลี่ยมให้เป็นสี่เหลี่ยมจัตุรัสให้กดปุ่มShiftค้างไว้ ถ้าต้องการให้เริ่มจากศูนย์กลางให้กดปุ่มAlt ค้างเอาไว้ 5. ในกรณีที่ต้องการสร้างกล่องที่มีระยะที่แน่นอน ให้กดปุ่มAlt ก่อนที่จะคลิกเมาส์จะปรากฏกล่อง ข้อความขึ้นมาดังรูป สาหรับการวาดรูปสี่เหลี่ยมในเวอร์ชั่นนี้มี2 แบบคือ Rectangle Tool ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้แต่เมื่อตั้งค่าไปแล้ว จะไม่สามารถแก้ไขได้โดนสะดวก เพราะจะต้องขยับเองทีละมุม Rectangle Primitive Tool ใช้สาหรับสร้างกล่องสี่เหลี่ยมสามารถปรับขอบมุมโค้งมนได้ทั้งก่อนและ หลัง สามารถปรับแต่งค่าได้สะดวก มีลักษณะเป็นวัตถุ ถ้าจะแก้ไขแบบอิสระจะต้องดับเบิ้ลคลิกที่วัตถุซ้า อีกครั้งหนึ่ง 2.11 การวาดวงกลม 1. สร้างวงกลมด้วยการคลิกที่ปุ่ม Oval Tool 2. สร้างวงกลมด้วยการคลิกที่มุมจุดแรก และลากเฉียง ไปยังอีกจุดโดยปกติแล้วรูปทรงจะไม่เป็น วงกลมจะต้อง กดปุ่ม Shift ร่วมด้วย และถ้าต้องการให้เริ่มจากศูนย์กลางจะต้องกดปุ่มAlt ความกว้าง ความสูง กาหนดขนาดของมุม วาดจากศูนย์กลาง 12 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 18. 3. สามารถกาหนดจุดเริ่มของส่วนโค้งได้ โดยการใส่ตาแหน่งของรัศมีของวงกลม โดยสามารถกาหนด ได้ทั้งจุดเริ่มและจุดจบ 4. กาหนดค่า inner radian เพื่อเจาะวงกลมให้เป็นลักษณะโดนัท 5. คลิกที่ Close Path โปรแกรมจะไม่ลง fill สีให้กับวงกลมในกรณีที่ใช้กับคาสั่ง Start angle และ end angle 2.12 การวาดรูปทรงหลายเหลี่ยม 1. คลิกที่ปุ่ม PolyStar Tool ในคาสั่งนี้จะสามารถสร้างเหลี่ยมได้ 3-32 มุม 2. คลิกที่ปุ่ม Options จะปรากฏหน้าต่าง Tool Settings 3. คาสั่งรูปหลายเหลี่ยมนี้มีให้เลือกการวางเพียงอย่างเดียวคือ วางจากศูนย์กลางจึงไม่ต้องกดปุ่มAlt 4. ส่วนการปรับแต่งค่าอื่น ๆ จะมีความคล้ายกับเส้นและกล่องสี่เหลี่ยม การวาดด้วยพูกัน เลือกรูปหลายเหลี่ยมและรูปดาว จานวนมุม ความลิกของแฉกดาว 13 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 19. การวาดด้วยคาสั่งพูกันจะทาให้ได้เส้นที่เหมือนจริง มีความสวยงามเวลาวาดภาพ ถ้าใช้กับอุปกรณ์Teblet จะทาให้การวาดเหมือนจริงมากยิ่งขึ้น แต่คาสั่งนี้ก็มีข้อจากัดคือ เส้นที่วาดมีคุณสมบัติเป็นFill ไม่ใช่ Stoke ทาให้แก้ไขได้ยาก 1. คลิกที่ปุ่ม Brush Tool เลือกสีจากกล่อง Fill Color เนื่องจากคาสั่งนี้ไม่ใช่คาสั่งเส้น 2. วาดเส้นลงไปในชิ้นงาน 3. ถ้าต้องการวาดเส้นลงพื้นที่ลักษณะพิเศษ จะต้องคลิกปุ่มBrush Mode เพื่อนเลือกรูปแบบ การลงสีที่ต้องการ โดยมีรูปแบบดังนี้ a. Paint Normal เมื่อระบายสี สีที่ระบายจะทับเส้นและพื้นที่ b. Paint Fills สีที่ระบายจะทับเฉพาะส่วนของพื้นที่แต่ไม่ยุ่งเกี่ยวกับเส้น c. Paint Behind สีที่ระบายจะปรากฏที่พื้นหลังวัตถุ d. Paint Selection สี่ที่ระบายจะระบายเฉพาะพื้นของบริเวณที่เลือกเท่านั้นโดย จะต้องเลือกวัตถุนั้น ๆ ก่อน e. Paint Inside สีที่ระบายจะระบายเฉพาะพื้นที่ด้านใน 2.13 การใช้เครื่องมือยางลบ การใช้ยางลบในโปรแกรมFlash จะแตกต่างกับโปรแกรมกราฟิกVector อื่น ๆ คือสามารถเลือก ลบเฉพาะส่วนได้ ทาให้สะดวกต่อการวาดรูปอย่างมาก การใช้ยางลบมีขั้นตอนดังนี้ 1. เมื่อต้องการลบภาพ คลิกที่ Eraser Tool เพื่อทาการเปลี่ยน หัวปากกาเป็นยางลบ 2. คลิกที่ปุ่ม เพื่อเลือกลักษณะของยางลบ มีหลายลักษณะให้ เลือกเช่น สี่เหลี่ยม วงกลม 14 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 20. 2. คลิกปุ่ม Eraser Mode เพือเลือกโหมดการลบ a. Eraser Normal ลบเส้นและพื้นที่ b. Eraser Fills ลบเฉพาะส่วนของพื้นที่โดยยางลบจะไม่ไปลบเส้น c. Eraser Lines ลบเฉพาะส่วนของเส้นเท่านั้น d. Eraser Selected Fills ลบเฉพาะพื้นที่ของบริเวณที่เลือกโดยยางลบจะไม่ไปลบเส้น e. Eraser Inside ลบเฉพาะภายในพื้นที่ของพื้นที่ด้านใน 3. สามารถใช้เครื่องมือ Faucet ลบเฉพาะพื้นที่ของสีโดยไม่จาเป็นใช้ยางลบลบที่ละส่วน 2.14 การลงสีวัตถุ วัตถุใน Flash จะมีส่วนหลัก ๆ อยู่ 2 ส่วนคือ เส้น Stoke และพื้นที่ Fill โดยการลงสีวัตถุสามารถลง สีหรือเปลี่ยนได้ทั้ง 2 วัตถุ ส่วนพื้นที่ของสีสามารถ ปรับแต่งการไล่สีผสมสี ซึ่งใช้เทคนิคเดียวกับโปรแกรม กราฟิกประเภท Vertor ทั่ว ๆ ไปได้ 15 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 21. 2.15 การเทสีลงบนพื้นที่ การลงสีบนพื้นที่สามารถลงได้ทั้งบริเวณที่มีสีอยู่แล้วและบริเวณที่ไม่มีสีก็ได้ สาหรับพื้นที่ที่จะลงสีนั้น จะต้องมีลักษณะเป็นเส้นปิด หรือเกือบปิด หรือมีพื้นที่อยู่ก่อนจึงจะสามารถลงสีใหม่หรือเปลี่ยนสีได้ โดยมี วิธีการทาดังนี้ 1. คลิกที่ปุ่ม Paint bucket Tool 2. เลือกสีจากแถบ Tool box Fill Colorเปลี่ยนสีที่ต้องการ จากนั้นคลิกเทสีลงไปใน ช่องว่างตามรูป 3. การลงสีบนวัตถุใน Flash บางครั้งจะพบปัญหาไม่สามารถลงสีได้ นั้นก็เพราะว่าเส้นของภาพนั้น ๆ ไม่ปิดสนิทกันจึงต้องตั้งค่าเพิ่มเติมโดยตาแหน่งด้านล่างToolbox จะพบคาสั่ง Gaps ให้คลิกค้าง ไว้ ถ้าเส้นปิดกันมากให้เลือกที่Don’t Close Gaps ถ้ามีช่องว่างมากให้เลือก Close Large Gaps จึงจะสามารถลงสีได้ 2.16 fการเทสีลงบนเส้น 1. ลงสีหรือเปลี่ยนสีของเส้น Stroke ได้โดยใช้เครื่องมือ Ink Bottle Tool เทลงไปลงบนเส้น โด 2. เลือกสีที่ Toolbox Stoke Color เพื่อเปลี่ยนสีเส้นที่ต้องการ 3. คลิกไปที่เส้นที่ต้องการจะเปลี่ยนสี 16 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 22. 2.17 การจัดการระบบสี Swatches ระบบสีใน Flash มีหน้าตาดังรูป โดยจะมีองค์ประกอบการตั้งค่าดังนี้ 2.18 การปรับสีจาก Panel ทางด้าน Panel ด้านขวามือเป็นการปรับแต่งสีโดยสามารถควบคุมสีได้ระเอียดมากขึ้นสามารถทา การไล่สี ปรับแต่งค่าสีขั้นสูง โดยคลิกที่ Panel Color จะปรากฏน่าต่างดังนี้ 2.19 การควบคุมการไล่สี 1. เลือก Type เป็น Linear จะปรากฏแทบ Overflow แสดงการไล่สีเริ่มต้น 2. ด้านล่างกล่อง Color จะปรากฏแถบสีที่มีการไล่สี โดยสีเริ่มต้น จะเป็นสีขาวและดา ซึ่งสามารถปรับเลื่อนได้ทาให้วัตถุที่ได้มีการ ไล่สีตามระยะที่ต้องการ สีที่เลือก ถาดสีพิเศษ ความโปรงแสง ไม่มีสี ปรับแต่งสีเอง เปลี่ยนสีเส้น เปลี่ยนสีพื้น เปลี่ยนเป็นสีขาวดา เลือกไม่มีสี สลับสีเส้นกับพื้นที่ ไล่โทนสีมืดสว่าง คลิกบริเวณสีที่ต้องการ ความโปรงใส่ปรับแต่งค่าสีโดยใส่ค่าเลข ปรับสีด้วยเลขฐาน 2 รูปแบบการไล่สี 17 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 23. 3. สามารถเพิ่มจุดตาแหน่งของสีได้ โดยนาเมาส์คลิกไปที่บริเวณเส้นแถบสี เป็นการเพิ่มตาแหน่งสี จากนั้นดับเบิ้ลคลิกที่ตาแหน่งสีเพิ่ม แล้วจึงเลือกสีที่ต้องการ 4. ถ้าต้องการลบตาแหน่งให้คลิกที่จุดสีแล้วคลิกเมาส์ค้างเอาไว้ ลางลงมาด้านล่างจุดสีจะหายไป 5. ถ้าสีใดใช้บ่อย ๆ อยากเก็บไว้เรียกใช้ให้คลิกที่ option menu ของหน้าต่าง Color 6. เลือกที่ Add Swatch เพื่อจัดเก็บสีไว้ในถาดสี 18 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 24. บทที่ 3 การจัดการข้อความ การสร้างบทเรียน การใส่คาบรรยายหรือคาอธิบายเป็นเรื่องที่พบกันอยู่บ่อย ๆ ในflash เองก็มี เครื่องมือที่จัดการเรื่องตัวอักษรข้อความ สามารถรองรับได้หลากหลายภาษา เมื่อต้องการเรียกใช้ Text ให้ คลิก Tool box Texttool ส่วนบริเวณของ Properties Inspector จะเปลี่ยนเป็นText Tool ดังรูป ด้านล่าง  Text Type โหมดของอักษรข้อความ  Text Block Position ตาแหน่งและขนาดของข้อความ  Character Spacing การกาหนดระยะห่างของตัวอักษร  Font รูปแบบของตัวอักษร  Text Fill Color กาหนดสีของตัวอักษร  Alignment การจัดตาแหน่งตัวอักษร  Edit Format Option กาหนดรูปแบบการย่อหน้า  Change Orientation of text กาหนดแนวการวางตัวอักษร  Line Type กาหนดชนิดของการับข้อมูล ในส่วนของ Input Text  Font Rendering method กาหนดรูปแบบการเรนเดอร์ตัวอักษร  Auto Kern กาหนดให้ปรับช่องไฟของตัวอักษรอัตโนมัติ  URL Link กาหนดการเชื่อมโยงไปยังเว็บอื่น  Target กาหนดการรูปแบบการเปิดหน้าเว็บ โหมดของอักษรข้อความ แบบ Font ตาแหน่งการจัดวางปรับแต่งคุณสมบัติ ระยะห่างระหว่างอักษร ตัวยกตัวห้อย การ Render ตัวอักษร ตั้งค่าจานวนบรรทัดของ Dynamic URL Linkเชื่อมโยง Target ของ Link 19 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 25. 3.1 โหมดตัวอักษรมีด้วยกัน 3 หมวดคือ 1. Static Text เป็นข้อความธรรมดา ใช้สาหรับพิมพ์ข้อความทั่วไป ไม่สามารถใช้คาสั่งตัวแปรแก้ไขได้ 2. Dynamic Text เป็นข้อความ Text ที่มีการเปลี่ยนแปลงด้วยการเขียนคาสั่งเพิ่มเติมได้ 3. Input Text เป็นการสร้างกล่องข้อความ กาหนดพื้นที่รับข้อมูล 3.2 ปัญหาภาษาไทยกับ Flash เนื่องจากยอดขายโปรแกรม Adobe แบบลิขสิทธิ์ในเมืองไทยมีปริมาณไม่มาก บริษัทจึงไม่ได้ให้ ความสาคัญเป็นพิเศษกับเรื่องภาษาไทย การพัฒนาโปรแกรมให้ใช้งานกับภาษาไทยนั้นเป็นเรื่องที่ยุ่งยาก ของผู้ผลิต เนื่องจากภาษาไทยมีตัวอักษรหลายชั้น และมีเงื่อนไขการตัดคามากมาย ทาให้ผู้ที่ใช้โปรแกรม ของ adobe ต้องใช้โปรแกรมเสริมอื่น ๆ เข้าช่วย หรือบางทีก็ต้องเปลี่ยน font ชุดใหม่มาใช้เพื่อแก้ปัญหา สาหรับปัญหาเรื่องพิมพ์ข้อความใน Flash CS3 จะมีปัญหาเรื่องระยะห่างของตัวอักษรกับWindows Vista และ Windows 7 ปัญหาจะเกิดขึ้นตอนที่พิมพ์ข้อความตอนสร้าง แต่ตอนนาไปแสดงผลใช้จริงจะไม่มี ปัญหา 3.3 วิธีการพิมพ์ข้อความ 1. คลิกที่ Text tool เพื่อพิมพ์ข้อความ 2. ปรับแต่งค่า Properties Inspector ตามรูปภาพด้านล่าง Font เป็นแบบ Arial ขนาด 25 และเป็นสี ดา ชิดด้านซ้าย 20 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 26. 3. คลิกวางข้อความลงบนชิ้นงานตามตัวอย่าง และพิมพ์ข้อความลงไป ว่า Introduction to computer 4. คลิก Text tool และเปลี่ยนขนาดเป็น16 ลากกรอบโดยลากไปทางด้านขวาตามระยะของ ข้อความที่ต้องการ จะปรากฏกล่องสี่เหลี่ยมขึ้น 1 บรรทัด จากนั้นพิมพ์ข้อความ “The lessons contain relatively little text, plenty of images and many podcasts prepared by students in which they talk about a particular topic within each lesson. Most of the lessons are framed around concepts from the world of computers ลงไปในช่องโดยไม่ต้องกด enter เพื่อ ทาการขึ้นบรรทัดใหม่ โปรแกรมจะพยายามตัดคาให้เอง 5. ทางกล่องด้านขวามือใส่ Link เชื่อมโยงไปยังเว็บไซต์ พิมพ์ชื่อเว็บไซต์ตามรูปด้านล่างลงไป 6. คลิกที่ชื่อที่พิมพ์ 1 ชื่อ และแก้ไข Properties Inspector ในช่อง Link 7. ใส่ชื่อเว็บตามชื่อด้านล่าง จะส่งเกตุว่าชื่อเว็บจะต้องขึ้นต้นด้วยhttp:// และชื่อ Url เว็บกับชื่อที่ เขียนเป็น เมนูอาจจะเป็นคนละชื่อก็ได้ เช่นpapemodel แต่ Link ไปที่ http://www.papermode.in.th Http://www.sanook.com Http://www.google.com Http://www.yahoo.com Http://www.papermodel.in.th Http://www.hotmail.com 21 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 27. 3.4 การเปลี่ยนคุณสมบัติข้อความเป็นหมวดต่าง ๆ ตัวอักษรข้อความใน Flash สามารถสลับโหมดการทางานไปมาระหว่าง Static Text Dynamic Text และ Input Text ได้แต่การสลับไปมาอาจทาให้คุณสมบัติและการตั้งค่าบางอย่างเปลี่ยนไป จึงควร ตรวจสอบทุกครั้งหลังจากการเหมือนโหมด ข้อความ สามารถเปลี่ยนได้ด้วยวิธีดังนี้ 1. คลิกที่ข้อความที่ต้องการเปลี่ยนโหมด 2. Properties Inspector คลิกเลือกลูกศร ข้างกับชื่อโหมดข้อความเพื่อเปลี่ยนโหมดที่ ต้องการ 3.5 การเปลี่ยนคุณสมบัติของข้อความให้เป็นรูปภาพ ตัวอักษรที่อยู่ใน Flash มีคุณสมบัติเป็น Text ซึ่งมีข้อดีคือแก้ไขเปลี่ยนแปลงข้อมูลได้ง่าย แต่ถ้า นามาใช้ในงานออกแบบเพื่อให้ชิ้นงานมีเอกลักษณ์ เราจะต้องทาลายคุณสมบัติของText ทิ้งเสียก่อน โดย มีขั้นตอนดังนี้ 1. คลิกที่ Text tool เพื่อพิมพ์ข้อความ โดยเลือกตัวอักษรที่มีความหนาและขนาดใหญ่ ใน ตัวอย่างเลือก Font Arial Black และเลือกขนาด Font ที่ 60 และสีน้าเงิน 22 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 28. 2. ถ้าต้องการปรับตัวอักษรให้เป็นรูปภาพจะต้องใช้คาสั่งBreak Apart โดยการคลิกขวา แล้วเลือก Break Apart หรือกด Ctrl + B ชุดข้อความคาว่า CAI จะถูกแยกออกเป็น3 ตัว ซึ่งยังคงคุณสมบัติ ตัวอักษรอยู่ 3. ใช้คาสั่ง Break Apart ทาลายคุณสมบัติของตัวอักษรอีกครั้ง ตัวอักษร CAI จะกลายเป็นวัตถุ รูปภาพไม่สามารถพิมพ์แก้ไขข้อมูลได้อีกต่อไป 4. เมื่อถูกเปลี่ยนเป็นคุณสมบัติรูปภาพโดยสมบูรณ์แล้วสามารถดัดแปลงดึงแก้ไขใด ๆ ก็ได้ 23 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 29. บทที่ 4 การจัดการวัตถุ การใช้งาน Flash ทา Animation จะต้องแปลงวัตถุต่าง ๆ ให้มีคุณสมบัติที่ถูกต้อง เพื่อง่ายต่อการแก้ไข การ ใช้งาน การเรียกใช้งานภายหลัง โดยรูปแบบวัตถุนี้จะเรียกว่า Symbol โดย Symbol มี 3 สถานะด้วยกันคือ  Movie clip : ชุดวัตถุที่มีการเคลื่อนไหว  Button : วัตถุที่เป็นปุ่ม  Graphic : วัตถุที่เป็นรูปภาพ 4.1 การแปลงวัตถุเป็น Symbol 1. เมื่อมีวัตถุอยู่แล้ว ให้คลิกที่คาสั่ง Selection tool จากนั้นคลิกล้อมรอบวัตถุที่ต้องการจะแปลง เป็น Symbol 2. คลิกขวาเลือกที่คาสั่ง Convert to symbol หรือ กด F8 จะปรากฏหน้าต่าง Convert to Symbol 3. Name พิมพ์ชื่อของวัตถุ โดยชื่อของวัตถุไม่ควรซ้ากัน ควรมีการวางแผนชื่อให้ดี 4. Type เลือกรูปแบบของ Symbol ในกรณีรูปต้นไม้ดังรูปควรใช้แบบGraphic 5. Registration เป็นการเลือกจุดอ้างอิงเริ่มต้น 6. จากนั้นวัตถุจะเข้าไปอยู่ในกล่องLibrary ถ้าในกรณีที่ไม่ปรากฏหน้าต่าง Library ให้กด Ctrl+L 24 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 30. 4.2 การเรียกใช้และแก้ไข Symbol เมื่อเราสร้าง Symbol ขึ้นมาในไฟล์นั้น ๆ สามารถดึง Symbol มาใช้ได้ตลอดวิธีการเรียกใช้ทาได้ดังนี้ 1. คลิก Symbol จากกล่อง Library ลากเข้ามาใช้ในชิ้นงาน โดย Symbol จะเหมือนกับต้นแบบและ สามารถย่อขยายขนาดได้ 2. ถ้าต้องการเปลี่ยนแปลงแก้ไข Symbol ให้ดับเบิลคลิกที่ Symbol 3. จากนั้นสังเกตแถบแสดงสถานะของการแก้ไขชิ้นงาน จะปรากฏชื่อของSymbol ที่ต้องการแก้ไข 4. เมื่อทาการแก้ไขแล้วทุก Symbol จะถูกเปลี่ยนให้เหมือนกับSymbol ที่มีการแก้ไข 4.3 การสร้าง Symbol แบบปุ่ม นอกจากการทางาน animation โปรแกรม Flash ยังถูกออกแบบมาให้ทางาน ในลักษณะที่ผู้ใช้งาน สามารถโต้ตอบหรือมีปฏิสัมพันธ์ได้ จึงจาเป็นต้องมีการกาหนดSymbol ให้มีลักษณะเป็นปุ่ม โดยการตั้ง ค่าพื้นฐานของปุ่มมีด้วยกัน 4 สถานะคือ up over down hit วิธีการสร้างปุ่มมีวิธีดังนี้ 1. สร้างกล่องหรือวัตถุขึ้นมาแทนปุ่ม ด้วยเครื่องมือ Rectangle Tool 2. คลิกล้อมรอบวัตถุ แล้ว convert Symbol ด้วยการ กด F8 25 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 31. 3. จะปรากฏหน้าต่าง Convert to Symbol ให้เลือกที่ Button และตั้งชื่อปุ่มว่า ok หมายถึงปุ่มนี้จะถูก ใช้เป็นปุ่มตกลง 4. ดับเบิลคลิกที่วัตถุSymbol ที่สร้างขึ้น ที่แถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol ok และที่ Timeline จะถูกเปลี่ยนเป็น4 สถานะคือ up over down hit a. Up สถานะปุ่มที่ยังไม่ถูกคลิก b. Over สถานะปุ่มเมื่อนาเมาส์ไปวางเหนือปุ่ม c. Down เมื่อนาเมาสไปคลิกที่ปุ่ม d. Hit กาหนดพื้นที่ของปุ่ม 5. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องOver จากนั้นแก้ไขสีหรือเปลี่ยนแปลงลักษณะของปุ่ม ให้เป็นรูปแบบอื่น ๆ เพื่อให้เกิดความแตกต่างเวลานาเมาส์ไปวางเหนือปุ่ม 26 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 32. 6. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องDown เพื่อกาหนดสถานะเมื่อมีเมาส์คลิกไปที่ปุ่ม 7. กด F6 เพื่อสร้าง คีย์เฟรมใหม่ ใหม่ในช่องHit เป็นการกาหนดบริเวณของปุ่ม ซึ่งบางครั้งอาจจะ ใหญ่กว่าปุ่มที่สร้างไว้ก็ได้ มักใช้กรณีที่ใช้ข้อความLink ที่เป็นตัวอักษร 4.4 การสร้าง Symbol แบบภาพเคลื่อนไหว Symbol ประเภทนี้ใช้สาหรับจัดกลุ่มรวบรวมวัตถุหรือ Symbol ให้เป็นภาพเคลื่อนไหว โดยมีวิธีการทาดังนี้ 1. วาดวัตถุต้นแบบในลักษณะภาพกราฟิก ในรูปตัวอย่างเป็นลูกบอลวงกลม 2. คลิกล้อมรอบวัตถุ แล้ว convert Symbol ด้วยการกด F8 3. พิมพ์ชื่อวัตถุ โดยจะต้องไม่ซ้ากับชิ้นงานที่มีอยู่แล้ว 4. เลือก Type เป็น Movie Clip Registration เป็นศูนย์กลางจากนั้นกด Ok 5. ดับเบิลคลิกที่วัตถุSymbol ที่สร้างขึ้น ที่แถบแสดงการแก้ไข symbol จะเข้าสู่ Symbol “ball” 6. ให้คลิกส่วนของ Time Line ด้านบน ช่องแรกใน Frame ที่ 10 แล้วกด F6 เพื่อสร้าง Key frame 7. ลากลูกบอลไปในทิศทางอื่น เพื่อกาหนดจุดเคลื่อนที่ 27 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 33. 8. คลิกขวาที่ ระหว่างเฟรมที่ 1-10 เลือกที่ Create Motion Tween เพื่อสร้างการเคลื่อนไหว 9. ออกจากสถานะการแก้ไข Symbol เพื่อกลับไปที่ Scene หลัก โดยคลิกที่ Scene 1 10. ทดสอบการทางานโดยการกด Ctrl+Enter เพื่อทดสอบชิ้นงาน Animation หมายเหตุ สาหรับรายละเอียดของการทา Animation จะกล่าวถึงในบทต่อไป 4.5 การจัดการ Library หน้าต่าง Library สามารถเรียกใช้งานได้จากการกดปุ่มCtrl + L หรือคลิกที่ Window -> Library สัญลักษณ์ของ Symbol มีดังนี้ Button : ปุ่ม Movie Clip : ภาพเคลื่อนไหว Graphic : ภาพ Floder : แฟ้ มเพื่อจัดเก็บ Symbol ให้เป็นหมวดหมู่ 28 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 34. ส่วนประกอบต่าง ๆ ของ หน้าต่าง Library 4.6 การเปลี่ยนคุณสมบัติ Symbol Symbol สามารถสลับคุณสมบัติกันได้ เช่นสลับจากButton เป็น Movie clip หรือสลับจาก Graphic เป็น Button แต่การสลับนี้จะทาให้คุณสมบัติบางอย่างของวัตถุหายไป เท่าที่พบเห็นจะเป็นการสลับจาก Graphic เป็น Button หรือ Movie clip เป็นส่วนใหญ่ วิธีการสลับมีดังนี้ วิธีที่ 1 1. เลือกวัตถุจากชื่อในหน้าต่างLibrary 2. คลิกที่ปุ่มเครื่องมือ จะปรากฏหน้าต่าง Symbol Properties 3. เปลี่ยนคุณสมบัติของวัตถุตามต้องการ ชื่อไฟล์ ปริมาณsymbol รูป Symbol รายชื่อ Symbol สร้าง Symbol สร้าง Folderl ดูข้อมูล Symbol ลบ Symbol เรียงลาดับ Symbol ตรึง Library สร้าง Library ใหม่ 29 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 35. วิธีที่ 2 1. คลิกขวาที่ชื่อของ symbol แล้วเลือก ที่ Type -> เลือกรูปแบบ Symbol ที่ต้องการ 4.7 นา Symbol จากไฟล์อื่นมาใช้ เราสามารถนา Library ที่สร้างขึ้นใรชิ้นงาน ไปใช้กับไฟล์อื่น ๆ หรือนา Library ของไฟล์อื่น ๆ มาใช้ใน ชิ้นงานได้ แต่ต้องระมัดระวังเรื่องชื่อของ Symbol อาจมีการซ้ากัน ทาให้ผลงานเกิดปัญหา ในกรณีที่ชื่อ เดียวกันให้ตรวจสอบให้ดีว่าจะใช้ตัวใหม่หรือตัวที่มีอยู่เดิม จึงควรให้ความสาคัญกับคาเตือนของโปรแกรม ด้วย มีขั้นตอนการนาเข้าดังนี้ 1. เมื่ออยู่ในไฟล์งานที่ต้องการเรียกใช้ Library ไปที่เมนูบาร์ File -> Import -> Open External Library 2. โปรแกรมจะให้เลือกไฟล์ Flash ที่มี Library ที่ต้องการ 3. ในไฟล์ที่ทางานอยู่ จะปรากฏ Libraryที่เรา Import เข้ามาใช้งาน 30 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 36. บทที่ 5 การทา Animation ความสามารถที่โด่ดเด่นมาก ๆ ของโปรแกรม Flash นั้นก็คือความสามารถด้าน Animation ที่ สามารถทางานง่าย ๆ จนถึง Animation ที่มีความซับซ้อนได้ ลักษณะการทางานของAnimation บน Flash จะต้องทางานบน Time Line ที่มีลักษณะเป็นเฟรม อยู่ทางด้านบนของหน้าจอ เรามาทาความรู้จักหน้าตา ของ Time Line Flash ดังนี้ 5.1 การใช้ Play Head Play Head ใช้เพื่อตรวจสอบ สร้าง และแก้ไขชิ้นงาน ของเฟรมต่าง ๆ โดยหน้าจอของพื้นที่ทางาน จะแสดงผลตามที่มีการกาหนดตาแหน่งPlay Head สามารถเลื่อน Play Head โดยการคลิกที่ Play Head ที่มีลักษณะเป็นสีแดงเลื่อนไปยังเฟรมที่ต้องการ ซ่อน / แสดง Layer Lock Layer แสดงเค้าร่าง ตาแหน่งเฟรม เฟรมปัจจุบันที่ทางาน Play Head สร้าง Layer สร้าง Guide Layer สร้าง Folder ลบ Layer เคลื่อน Playhead ไปกี่งกลางเฟรม Onion skin Onion skin แบบ เห็น เฉพาะ Outline Onion skin แบบชัดเฉาะ Key frame ช่วงของการแสดง Onion skin หมายเลขเฟรมปัจจุบัน จานวนเฟรมต่อ 1 วินาที เวลาที่ใช้นับจากเริ่มถึงPlay Head 31 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 37. 5.2 สร้าง Layer ใหม่ ในตอนเริ่มต้นโปรแกรมจะสร้าง Layer 1 ขึ้นมารอก่อนแล้ว สามารถสร้างหรือนาวัตถุเข้ามาใช้งาน ได้ทันที ถ้าต้องการสร้าง Layer เพิ่มให้คลิกที่ปุ่มInsert Layer จะปรากฏ Layer ใหม่ ซึ่งควรจะมีการแก้ไข ชื่อ Layer ให้สอดคล้องกับชิ้นงาน โดยการกดปุ่ม F2 ที่ชื่อ Layer 5.3 สร้าง Folder ในการสร้างชิ้นงาน Flash มักประสบปัญหา Layer ที่มีจานวนมาก ซึ่งไม่สะดวกต่อการเรียกใช้ งาน จึงควรจัดเก็บLayer ต่าง ๆ ให้อยู่ในหมวดหมู่ เช่นตัวอย่างด้านล่างซ้ายจะพบว่า ชิ้นงานมีLayer มากมายส่วนทางด้านขวาเป็นการจัดเก็บLayer ไว้เป็นหมวดหมู่ 5.4 วิธีการสร้าง Folder 1 ให้คลิกที่ จะปรากฏ Folder ขึ้นมา 32 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 38. 2 จากนั้นให้เปลี่ยนชื่อFolder ให้สอดคล้องกับชิ้นงาน โดยการกดF2 ที่ชื่อ Folder 3 นา Layer เข้าไปใส่ใน Folder โดยการคลิกเมาส์ที่ Layer ค้างไว้ แล้วลากไปที่ Folder 5.5 ระบบ Frame ลักษณะ Frame 1 Frame ของโปรแกรม Flash แทนภาพ 1 ภาพ ซึ่งจะต้องนา Frame มาเรียงต่อ กันจนเกิดเป็นภาพเคลื่อนไหว ลักษณะFrame มีรูปแบบดังนี้ Frame ที่ไม่มีวัตถุ Key Frame ที่ไม่มีวัตถุ Key Frame ที่มีวัตถุ Frame ที่มีการเขียน Action Script KeyFrame ที่มีการตั้งชื่อ Instance Frame เปล่า Motion Tween ( พื้นสีฟ้ า ) Frame ที่มีการเคลื่อนไหวอย่างต่อเนื่อง Shape Tween ( พื้นสีเขียว ) Frame ที่มีการเปลี่ยนรูปทรงอย่างต่อเนื่อง Frame ที่มี Keyframe 5.6 การเพิ่ม Key Frame เมื่อมีการเปลี่ยนแปลงตาแหน่งการเคลื่อนที่ของ วัตถุ เราจะต้องสร้าง Key Frame ขึ้นมาใหม่ โดยการกด คลิกขวาที่ Frame ที่ต้องการสร้าง Key Frame แล้วเลือก Insert Keyframe หรือกด ปุ่ม F6 33 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 39. 5.7 การเพิ่ม Frame ในกรณีที่ภาพไม่มีการเปลี่ยนแปลงหรือต้องการเพิ่มช่วงระยะเวลาของAnimation จะต้องใช้คาสั่ง เพิ่มเฉพาะ Frame โดยมีวิธีดังนี้ 1. ในตัวอย่างด้านล่าง Animation ลูกบอลจะวิ่งจากเฟรมที่ 1 ไปสิ้นสุดในเฟรมที่ 20 2. ถ้าต้องการเพิ่มเฟรมให้คลิกขวาที่เฟรมจากนั้นเลือกที่Insert Frame หรือกด F5 กด 1 ครั้งจะ มี Frame เพิ่ม 1 Frame 3. ถ้าต้องการเพิ่มเฟรมจานวนมากให้ทาHighlight คลิกครอบจานวนหลาย ๆ Frame แล้วกด ปุ่ม F5 จานวน Frame จะขยายออกไปตามจานวนช่วงที่ได้เลือกเอาไว้ 34 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 40. นอกจากการเพิ่ม Frame ในช่วงระหว่าง Animation เรายังสามารถเพิ่ม Frame หลังจาก Keyframe เพื่อทิ้ง ภาพสุดท้ายให้ปรากฏค้างอยู่ มีวิธีการดังนี้ 1. จากตัวอย่าง Keyframe หยุดอยู่ที่ Frame ที่ 25 นั้นก็หมายความว่า ลูกบอลจะหยุดที่เฟรมที่ 25 ภาพก็จะตัดไปที่เฟรมที่ 1 วนอีกครั้ง ซึ่งถ้าต้องการให้ลูกบอลหยุดค้างถึงFrame ที่ 40 จะต้องคลิก ขวาจากนั้นเลือกที่ Insert Frame หรือกดปุ่ม F5 2. ผลที่ได้คือลูกบอลจะวิ่งจาก Keyframe ที่1 จนมาหยุดที่ Keyframe ที่ 25 และปรากฏค้างไว้ถึง Frame ที่ 40 35 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 41. บทที่ 6 การสร้างภาพเคลื่อนไหว การสร้างภาพเคลื่อนไหวหรือ Animation ในโปรแกรม Flash มีลักษณะการสร้างด้วยกัน 3 แบบคือ  แบบเฟรมต่อเฟรม (Frame by Frame)  แบบเคลื่อนที่ (Motion Tween)  แบบเปลี่ยนรูปทรง (Shape Tween) 6.1 Animation แบบเฟรมต่อเฟรม (Frame by Frame) การสร้าง Animation แบบ เฟรมต่อเฟรม เป็นการนาเอาเฟรมมาเรียงกัน โดยในภาพแต่ละเฟรมจะต้องมี การเปลี่ยนแปลง การทา Animation แบบนี้ภาพที่ได้จะไม่ลื่นไหล มักใช้งานกับAnimation ที่มีการ เปลี่ยนแปลงของภาพที่ไม่สม่าเสมอและไม่ต่อเนื่อง เช่น การทาAnimation ภาพ ปากคนพูด แต่ในบางชิ้นงานถ้าทาแบบเฟรมต่อเฟรม จะใช้เวลาในการทามากเช่น การทาลูกบอลกระเด้ง ถ้าเป็นแบบ เฟรมต่อเฟรม ผู้สร้างจะต้องกาหนดการเคลื่อนไหวของลูกบอลทุก ๆ เฟรม ดังรูปด้านล่าง ซึ่งถ้ามีการแก้ไข ตาแหน่งของลูกบอลในอนาคต อาจจะต้องทาใหม่ทั้งหมด 36 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 42. 6.2 การสร้าง Animation แบบเฟรมต่อเฟรม 1. ตั้งชื่อ Layer ให้สอดคล้องกับวัตถุในตัวอย่างตั้งชื่อว่าไฟ 2. สร้างวัตถุลงบน Keyframe ที่ 1 ดังตัวอย่างเป็นรูปเปลวไฟ 3. คานวณจานวนเฟรมต่อ 1 วินาที ถ้าต้องการ Animation ที่ลื่นไหล จะต้องวาดทุกเฟรม แต่ใน ตัวอย่างนี้ต้องการเพียงแค่4 ภาพ ต่อ 12 เฟรม 4. ให้ไปที่เฟรมที่ 5 กด F6 เพื่อสร้าง Keyframe จากนั้นวาดต่อเติมหรือลบของเดิมออกและวาดรูปไผ ลงไปใหม่ ควรวาดให้ใกล้เคียงกับตาแหน่งเดิม 5. ทาแบบนี้ไปเรื่อย ๆ โดย Keyframe จะอยู่ในตาแหน่งที่ 1,5,9 และมีการทิ้ง Frame ไปจนถึง 11 เหตุที่ไม่ทา Frame ที่ 12 เนื่องจากการทา Animation ใน Flash เมือจบชิ้นงานแล้วจะมีการวนซ้า ใหม่ ทาให้ภาพสุดท้ายจะตรงกับภาพที่1 พอดี 6. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง 37 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 43. 6.3 Animationแบบเคลื่อนที่ (Motion Tween) เป็นรูปแบบการสร้างที่ทาให้วัตถุมีการเคลื่อนที่เคลื่อนไหว เปลี่ยนแปลงรูปทรง ซึ่งการทากาหนด เพียงจุดเริ่มต้นและจุดสิ้นสุด ส่วนFrame ที่เหลือถ้าใช้ Motion Tween โปรแกรมจะช่วยสร้าง Animation ที่เหลือเอง การทา Animation แบบนี้ช่วยประหยัดเวลาและทาให้ผลงานมีความลื่นไหล 6.4 การสร้างAnimationแบบเคลื่อนที่ (Motion Tween) 1. จากรูปตัวอย่าง มีผล Apple อยู่บนต้นไม้ต้องการให้ผล Apple ตกลงมาที่พื้น ให้กาหนดระยะเวลา ในการตก ดังตัวอย่างต้องการ 1 วินาที ให้คลิกที่ Frame ที่ 12 แล้วกด F6 จากนั้นลากผล Apple ลงมาที่พื้น 38 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 44. 2. ถ้าเลื่อน Play Head ไปมาจะพบว่าใน Frame ที่ 1-11 ผล appleจะยังค้างอยู่บนต้นไม้ แต่เมื่อถึง เฟรมที่ 12 ผล Apple จะตกมาที่พื้นทันที การทาแบบนี้จะเป็นลักษณะanimation แบบ Frame by Frame 3. ปรับให้เป็นแบบMotion Tween โดยการคลิกขวาที่ช่วงระหว่าง Frame แล้วเลือก Create Motion tween ทาให้ช่วง Frame มีลูกศรเพิ่มเข้ามา แสดงให้รู้ว่า Motion Tween ทางาน 4. ตอนนี้ลูก Apple ตกลงที่พื้นในเฟรมที่12 แล้ว แต่การตกลงมายังไม่สมจริง จึงต้องการทาให้ลูก Apple กลิ้งไปมาก่อนที่จะหยุดอยู่กับที่ โดยให้กดF6 ใน Frame ที่ 17 เพื่อสร้าง Keyframe 5. คลิกที่คาสั่ง Free Transform จัดการหมุนลูก Apple ไปทางขวาเล็กน้อย 6. กด F6 ใน Frame ที่ 22 เพื่อสร้าง Keyframe 7. คลิกที่คาสั่ง Free Transform จัดการหมุนลูก Apple ไปทางซ้ายเล็กน้อย 8. คลิกขวาที่ช่วงระหว่าง Frame แล้วเลือก Create Motion tween ทั้ง 2 ช่วงเฟรม 9. คลิกที่ Frame ที่ 35 ของ Layer ผลไม้ กด F5 เพื่อทิ้งเฟรม เนื่องจากตั้งแต่เฟรมที่22 – 35 ไม่มี การเปลี่ยนแปลงการเคลื่อนไหววัตถุ 10. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง 39 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 45. 6.5 การปรับแต่งการเคลื่อนไหวแบบ Motion Tween เราสามารถปรับแต่งการเคลื่อนไหว โดยคลิกที่ Frame ที่มีการใช้ Motion ด้านล่างของหน้าจอส่วน ของ Properties จะปรากฏหน้าต่างดังรูป  Tween ชนิดการเคลื่อนไหว มี 3 รูปแบบดังนี้ - None ยกเลิกการเคลื่อนไหวMotion Tween - Motion สร้างการเคลื่อนไหวแบบเคลื่อนที่ - Shape สร้างการเคลื่อนไหวแบบเปลี่ยนรูปร่าง  Scale เมื่อใช้จะทาให้วัตถุที่อยู่ในKeyframe แรก และ Keyframe สุดท้ายมีขนาดเท่ากัน โดย อัตโนมัติ  Ease ระดับความเร็วในการเคลื่อนที่ - ค่ามากกว่า 0 การเคลื่อนไหวจะเป็นจากช้าไปเร็ว - ค่าน้อยกว่า 0 การเคลื่อนไหวจะเป็นจากช้าไปเร็ว - ค่าเท่ากับ 0 จะเป็นการเคลื่อนไหวแบบปกติ  Edit เป็นการปรับแต่งค่า Ease In / Ease Out ขั้นสูงปรับผ่านส่วนโค้ง  Rotate เป็นคาสั่งการหมุ่นวัตถุที่ถูกสั่งการให้เคลื่อนไหว โดยมีการตั้งค่าดังนี้ - None ไม่หมุน - Auto หมุนไปตามการเปลี่ยนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้าย - CW หมุนตามเข็มนาฬิกา - CCW หมุนทวนเข็มนาฬิกา 6.6 Animation แบบเปลี่ยนรูปทรง (Shape Tween) เป็นการทาAnimation ให้เปลี่ยนรูปทรงจากวัตถุหนึ่งไปยังอีกวัตถุหนึ่ง หรือวัตถุเดียวกันแต่เปลี่ยน รูปทรงก็ได้ สาหรับวัตถุที่จะนามาทาต้องไม่เป็น Symbol ถ้าเป็น Symbol จะต้องทาการเปลี่ยนให้เป็นวัตถุ ธรรมดาก่อน 40 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 46. 6.7 การสร้าง Animation แบบเปลี่ยนรูปทรง (Shape Tween) 1. วาดรูปขึ้นมาใหม่หรือใช้วัตถุที่เป็นSymbol แทรกเข้ามาในชิ้นงานในไฟล์ตัวอย่างจะมี2 วัตถุคือ Apple และ Tree 2. คลิก Frame ที่ 1 ลาก แล้วลาก Symbol Apple ลงบน Stage 3. กด Alt+B (Break Apart) เพื่อเปลี่ยน Symbol ให้เป็นภาพปกติ 4. คลิก Frame ที่ 36 กดปุ่ม F6 ลบภาพ Apple ที่อยู่บน Frame ที่ 36 ออก 5. ลาก Symbol Tree ลงบน Stage แล้วกด Alt+B (Break Apart) เพื่อเปลี่ยน Symbol ให้เป็นภาพ ปกติ 41 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 47. 6. คลิกขวาช่องว่างระหว่าง Frame แล้วเลือก Create Shape Tween 7. กดปุ่ม Ctrl+Enter เพื่อทาการทดสอบผลงานหรือ คลิกที่ Menu File-> Publish Preview -> Flash โปรแกรมจะปรากฏหน้าต่างผลงานขึ้นมาแสดง 6.8 การเคลื่อนไหวตามเส้น Guide (Motion Guide) เราสามารถกาหนดเส้นทางเดินของวัตถุโดยวาดเส้นทาง ทาให้สะดวกต่อการทาAnimation เช่น การทารถวิ่ง เครื่องบินบิน นกบินบนฟ้ า หรือคนเดินขึ้นภูเขา เราเพียงสร้างMovie Clip จากนั้นสั่งให้ขยับ ตามเส้นทาง นอกจากนี้ยังสามารถแก้ไขเส้นทางได้ภายหลังด้วย 6.9 วิธีการสร้างภาพเคลื่อนไหวตามเส้นGuide ไฟล์ตัวอย่างเป็นไฟล์พื้นที่มีต้นไม้อยู่ข้างทาง โดยที่จะต้องนารถขับไปตามทางดังกล่าว โดยได้ จัดเตรียมพื้นที่ไว้ให้แล้ว แต่จะต้องนารูปรถเข้ามาจากภายนอกเองในที่นี้ใช้รูปรถที่เป็นรูปภาพแบบPNG 1. จัดการ Lock Layer Ground และ Tree โดยการกดที่ตาแหน่งLock Layer ของ Layer เมื่อคลิก แล้วจะเป็นรูปกุญแจ 2. สร้าง ขึ้นมา 1 Layer โดยคลิกที่ปุ่ม และเปลี่ยนชื่อเป็น Car และย้าย Layer ไปไว้ด้านบนสุด 42 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน
  • 48. 3. คลิกที่ Layer Car คลิกที่ปุ่ม Add Motion guide จะปรากฏ Layer Guide :car ซึ่งจะเป็น Layer ที่ใช้วาดเส้นทางเดิน สาหรับสิ่งที่อยู่ในLayer นี้จะไม่เห็นตอนที่นาเสนอผลงาน จะเห็นในตอน สร้างผลงานเท่านั้น 4. คลิกที่ Layer Guide :car จากนั้นวาดเส้นทางเดินลง บนถนนด้วยคาสั่ง Pencil Tool ซึ่งควรปรับ Pencil mode ที่ด้านล่าง Toolbox เป็นแบบ Smooth เพื่อให้รถขับตามเส้นอย่างเป็นธรรมชาติ 5. ในกรณีที่วาดเส้นแล้วมือไม่นิ่ง หรือเส้นยังเป็นหยักเปลี่ยมมุม ให้ดับเบิลคลิกที่เส้นเพื่อทาการเลือก เส้นจากนั้นให้คลิกที่Tool box ที่เขียนว่า Smooth จนกว่าเส้นจะโค้งมน หรือถ้ากดจนเป็นเป็น เหลี่ยม ๆ ก็ควรลบและวาดใหม่ 6. คลิกที่ Layer car จากนั้นวาดภาพรถ หรือนาไฟล์รูปรถเข้ามาในชิ้นงาน แต่ในตัวอย่างนี้ได้เตรียม รูปรถไว้ให้แล้ว ให้นาภาพรถเข้ามาโดยคลิกที่ Menu bar File->Import->Import to Stage จากนั้นเลือกไฟล์ car.png ซึ่งไฟล์นี้เป็นรูปที่มีคุณสมบัติฉากหลังโปร่งใส 43 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน