ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Macromedia Flash 8 สุรีย์ นามบุตร
2
ความต้องการระบบคอมพิวเตอร์
เครื่องคอมพิวเตอร์ที่มีหน่วยประมวลผลกลางระดับ Intel Pentium 800 MHz หรือสูงกว่า ระบบปฏิบัติการ Windows 2000 หรือสูงกว่า หน่วยความจำ (RAM) อย่างต่ำ 256 MB (แนะนำให้ใช้ 1 GB) เนื้อที่ของฮาร์ดดิสก์อย่างน้อย 710 MB จอภาพสีที่ความละเอียด 1024 x 768 pixels
3
ความสามารถใหม่ใน Flash 8
พื้นที่นอกสเตจที่เรียกว่า Pasteboard เป็นส่วนที่เราใช้เป็นที่พักชั่วคราวในการวางออบเจ็กต์ที่เราไม่ต้องการให้แสดงบนสเตจ เมื่อเราทดสอบผลงานในเวอร์ชั่นเก่าจะแสดงให้เห็นทั้งหมด แต่งานที่สร้างจาก flash 8 ได้ปิดการแสดงผลตรงนี้ไป เพื่อให้เห็นเฉพาะส่วนงานจริงบนสเตจเท่านั้น
4
การวาดรูปและการลงสี รูปแบบเดิม
ภาพวาดแบบปกติที่นำมาซ้อนกัน หลังจากแยกภาพออกจากนั้น ภาพที่ถูกซ้อนทับจะหายไป รูปแบบใหม่ใน Flash 8 ภาพวาดที่เป็นออบเจ็กต์ที่นำมาซ้อนกัน หลังจากแยกภาพออก จะไม่มีส่วนใดของภาพที่หายไป
5
ส่วนประกอบของหน้าต่างโปรแกรม
6
Toolbox
7
การสร้างไฟล์ด้วยการกำหนดรูปแบบเอง
Flash Document ไฟล์รูปแบบปกติ ที่ใช้สร้างงานแอนนิเมชันทั่วไป Flash Slide Presentation ไฟล์งานที่เหมาะกับการสร้างงานนำเสนอ Flash Form Application ใช้สร้างฟอร์มสำหรับทำเป็นโปรแกรมใช้งานทั่วไป ActionScript File เป็นหน้าต่างที่ไว้เขียนสคริปต์เพียงอย่างเดียว ActionScript Communication File เขียนไฟล์เพื่อติดต่อกับเชิร์ฟเวอร์ Flash JavaScript File เหมาะสำหรับงานเขียนสคริปต์ที่ทำงานร่วมกับ JavaScript หรือ API Flash Project เป็นการรวมกลุ่มงานที่สร้างทั้งหมด ให้ออกมาเป็น Project ไฟล์
8
ตัวอย่างที่ 1 เลือกปุ่มจาก Windows + Common Library
วางปุ่มในตำแหน่งแรก ไปที่ Frame ที่ 15 คลิกขวาแล้ว กดปุ่ม Insert Keyframe ไปที่ Frame ที่ 30 คลิกขวาแล้ว กดปุ่ม Insert Keyframe ไปที่ Frame ที่ 15 แล้วย้ายไปยังตำแหน่งสุดท้าย คลิกขวาระหว่าง Frame ที่ 1 กับ 15 เลือก Create Motion Tween คลิกขวาระหว่าง Frame ที่ 15 กับ 30 เลือก Create Motion Tween
9
ตัวอย่าง การทดลองใช้ Flash
10
ทดลองใช้ Flash เปิดโปรแกรม สร้างไฟล์ชิ้นแรก เลือก Flash Document
สร้างวัตถุง่ายๆ เช่น เลือกปุ่มการทำงานแบบสำเร็จรูปที่เครื่องเตรียมไว้ โดยไปที่ Window > Common Libraries > Buttons แล้วเลือกปุ่มตามต้องการ นำวัตถุมาสร้างภาพเคลื่อนไหว บันทึกการใช้งาน แปลงไฟล์ชิ้นงานสำหรับเผยแพร่
11
นามสกุลของ Flash *.fla คือไฟล์ที่เกิดจากการบันทึกชิ้นงานใน Flash ซึ่งสามารถแก้ไขชิ้นงานได้ *.swf คือไฟล์สำหรับการนำไปเผยแพร่ หมายเหตุ : เมื่อมีการ Publish เพื่อเผยแพร่งานทางเว็บ จะได้ไฟล์ที่มีนามสกุล *.html เพิ่มขึ้นมาด้วย เพื่อแสดงภาพเคลื่อนไหวผ่านเว็บ
12
วิธีการ Publish เลือกเมนู File
เลือกคำสั่ง Publish หรือกดปุ่ม Shift + F12
13
ชนิดของกราฟิก Bitmap เป็นภาพที่เกิดจากเม็ดสีหรือจุดสี (pixel) มาเรียงกันเป็นภาพ ภาพประเภทนี้สามารถแสดงรายละเอียดได้ใกล้เคียงภาพจริง เช่น ภาพถ่ายที่มีความละเอียดสูง แต่ภาพเหล่านี้จะมีขนาดใหญ่ และเมื่อนำมาขยายจะทำให้ได้ภาพที่ไม่ชัด Vector ภาพนี้จะใช้การคำนวณทางคณิตศาสตร์มาช่วยในการสร้างเส้นและลวดลายต่างๆ เหมาะสำหรับภาพกราฟิกที่มีสีค่อนข้างต่อเนื่อง แต่สามารถปรับแต่งขนาดได้โดยมีมีผลต่อความละเอียดของภาพ
14
การกำหนดขนาดและคุณสมบัติของชิ้นงาน
Title : ชื่อของชิ้นงาน Description : รายละเอียดเกี่ยวกับชิ้นงาน Dimensions : กำหนดขนาดของสเตจโดยระบุค่าความกว้างและความสูง Match : กำหนดขนาดของสเตจ โดย Printer ให้สเตจเท่ากับพื้นที่ใหญ่ที่สุดที่สามารถพิมพ์ได้ Contents ให้พื้นที่การทำงานโดยรอบสเตจมีขนาดเท่ากัน Default ปรับสเตจให้มีค่ามาตรฐานคือ 550*400 พิกเซล Background color : กำหนดสีพื้น Frame Rate กำหนดอัตราเร็วในการแสดงภาพเคลื่อนไหว (มาตรฐานที่ใช้ 12 fps) Ruler Units เลือกหน่วยวัดของไม้บรรทัด
15
เทคนิคการวาดเส้น การวาดเส้นตรงให้เราเลือกเครื่องมือ Line Tool หรือกดคีย์บอร์ด ตัว N ลองลากเส้นต่อกันดังรูป กรณีที่เส้น สองเส้นไม่ต่อกันดังรูปที่ผ่านมา ให้เราเลือกที่เครื่องมือ Snap to Object ลองวาดเส้นใหม่อีกครั้ง เส้นที่วาดใกล้กันจะต่อติดกันพอดี เมื่อได้เส้นมาแล้ว เราสามารถปรับแต่งเส้นได้ โดยให้เราเลือกเครื่องมือ Selection tool ก่อน หรือกดคีย์บอร์ดตัว V ดังภาพ
16
รู้จัก Timeline และ Frame
Frame Timeline
17
Frame Frame เป็นส่วนประกอบของ Timeline ประกอบด้วย Frame ที่ต่อเนื่องกันหลาย ๆ Frame เมื่อมีการแสดงภาพเคลื่อนไหวโปรแกรมจะนำวัตถุ (Instance) ที่อยู่บนเวที (Stage) มาแสดงผลทีละFrame ในส่วนของความเร็วในการแสดงผลมากน้อยเพียงใดขึ้นอยู่กับการกำหนดคุณสมบัติ Movie Properties ที่ Frame Rate มีหน่วยเป็น Frame per Second (fps) ปกติจะใช้อยู่ที่ 12 fps
18
ลักษณะการทำงานของ Frame ที่ปรากฏบน Timeline
ในกรณีที่ยังไม่มีการกำหนดใช้งาน Frame บน Timeline จะปรากฏช่องของแต่ละ Frame อย่างชัดเจน Playhead จะไม่เคลื่อนที่ การกำหนดใช้งาน Frame บน Timeline จะปรากฏเป็นแถบสีขาวเท่ากับจำนวน Frame ที่กำหนด Playhead จะเคลื่อนที่จนถึง Frame สุดท้าย Keyframe มีสัญลักษณ์เป็นจุดสีดำอยู่กลาง Frame เป็นตำแหน่งที่มีวัตถุบนพื้นที่ทำงานหรือมีการเปลี่ยนแปลงการเคลื่อนไหวต่อเนื่องไปจน ถึง Frame สุดท้ายของ Keyframe นั้น มีสัญลักษณ์เป็นรูปสี่เหลี่ยมเล็ก ๆ ภายใน Frame
19
ลักษณะการทำงานของ Frame (ต่อ)
Action frame มีสัญลักษณ์เป็นรูป a อยู่กลาง Frame เป็นตำแหน่งที่มีคำสั่ง Action ประกอบอยู่ภายใน Frame นั้น Motion-tweened keyframes มีสัญลักษณ์เป็นรูปลูกศรสีดำอยู่ระหว่างจุด 2 จุด บนพื้นสีฟ้าอ่อน Shape-tweened keyframes มีสัญลักษณ์เป็นรูปลูกศรสีดำ อยู่ระหว่างจุด 2 จุด บนพื้นสีเขียวอ่อน
20
การปรับแต่งเส้น
21
ตัวอย่าง การวาดเส้นการ์ตูน
22
การวาดเส้นการ์ตูน เริ่มสร้างตัวการ์ตูนก่อน โดยเริ่มจากหัว ใช้ Oval Tool (ไม่ใช้เส้นขอบ ใช้เฉพาะสีพื้น) สร้างตัว โดยใช้ Line Tool สร้างแขนโดยใช้ Line Tool แล้วให้เลือก Selection Tool ทำให้แขนโค้ง คัดลอกแขนข้างซ้ายมาไว้แขนข้างขวา อาจจะใช้ Modify + Transform + Flip Vertical ช่วย วาดขา วาดบันได
23
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
ตัวอย่าง การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
24
การทำเส้นวิ่งเป็นกรอบห้าเหลี่ยม
แบบฝึกหัด การทำเส้นวิ่งเป็นกรอบห้าเหลี่ยม
25
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
สร้างเอกสาร พร้อมกับวาดรูปสี่เหลี่ยม ย้ายเส้นกรอบทั้งสี่ให้อยู่เส้นละ Layer พร้อมกับตั้งชื่อ Layer หลังจากนั้นกำหนด Key Frame เพื่อกำหนดความเร็วของ Movie จากนั้นกำหนดให้จุดเริ่มต้นของทุก Layer ให้มีเส้นขนาดที่สั้น โดยใช้เครื่องมือ Free Transform Tool ใส่ Tween --> Shape ให้กับทุก Layer ย้ายจุดเริ่มต้นของเส้นของ Layer ต่างๆ ให้ต่อเนื่องกัน
26
การแปลงภาพบิทแมพให้เป็นเวคเตอร์
การแปลงภาพให้เป็นเวคเตอร์สามารถทำให้ปรับองค์ประกอบภายในของภาพได้ในลักษณะเดียวกับวัตถุใน Flash และทำให้ไฟล์มีขนาดเล็กลง มีวิธีการ ดังนี้ คลิกเลือกภาพบนสเตจ Modify + Bitmap + Trace Bitmap กำหนดค่าต่างๆ ColorThreshold กำหนดความแตกต่างของสีที่ต้องการจะแปลง Minimum Area กำหนดจำนวนพิกเซลโดยรอบที่ต้องการจะแสดงรายละเอียด
27
การวาดเส้นลายการ์ตูน 2
ตัวอย่าง การวาดเส้นลายการ์ตูน 2
28
การวาดเส้นลายการ์ตูน
นำเข้ารูปการ์ตูน (baseball.jpg) เลือก Modify + Bitmap + Trace Bitmap เพื่อเปลี่ยนภาพให้เป็นเวคเตอร์ ไปยัง Frame ที่ 2 เลือก Insert Keyframe แล้วค่อยๆ ลบตัวการ์ตูน (เช่น อาจจะลบขาออก 1 ข้าง) เพิ่ม Frame ที่ 3 แล้วค่อยๆ ลบตัวการ์ตูนออกทีละน้อย เพิ่ม Frame ไปเรื่อยๆ จนกว่าตัวการ์ตูนจะหมด เลือก Frame ทั้งหมด แล้วคลิกขวาเลือก Reverse Frame
29
การวาดภาพใน Flash ภาพใน Flash ประกอบด้วย
เส้นขอบ (Storke) โครงร่างของรูป สีพื้น (Fill) พื้นที่ภายในเส้นขอบ
30
ขั้นตอนการทำ วาดวัตถุที่เราต้องการ
หลังจากนั้นคลิกเลือกที่เส้นขอบ แล้วเลือกเปลี่ยนขนาดจาก Properties ของตัวโปรแกรมได้เลย
31
ตัวอย่าง การทำหน้าปัดวิทยุ
32
ทำหน้าปัดวิทยุ 1. สร้างเอกสารใหม่ขึ้นมา ขนาด 350 X 180 โดยตั้งให้ Frame Rate = 20 เลือก bgcolor เป็นสีเทา (# ) 2. เลือกเมนู view -> Grid -> Show Grid เพื่อใส่เส้นกริดเข้าไป 3. วาดรูปสี่เหลี่ยมผืนผ้าสีขาว บริเวณล่างซ้ายของกรอบให้พอดีกับเส้นกริด โดยใช้เครื่องมือ Rectangle Tool ดังรูป 4. Copy สี่เหลี่ยมที่วาดลงไปมาอีก 11 อัน แล้วนำมาวางเรียงกัน ดังรูป
33
ทำหน้าปัดวิทยุ 5. ใส่สีไล่โทนให้กับรูปสี่เหลี่ยมโดยไล่จากล่างขึ้นบนและจากอ่อนไปเข้ม ดังรูป โดยใช้เครื่องมือ Paint Bucket Tool ใส่สีให้กับสี่เหลี่ยมแต่ละอันจากล่างขึ้นบน 6. Copy รูปสี่เหลี่ยมทั้งหมด มาวางให้ตรงกับแนวเส้นกริด ให้ครบ 6 อัน แล้ว Insert Keyframes ในเฟรมที่ 19
34
ทำหน้าปัดวิทยุ 7. สร้างเลเยอร์ใหม่ตั้งชื่อว่า wave1 ที่เฟรมที่ 1 ให้สร้างสี่เหลี่ยมสีดำ โดยใช้เครื่องมือ Rectangle Tool ปิดทับสี่เหลี่ยมไล่โทนอันแรกไว้ 8. ให้ Insert Keyframes ที่เฟรมที่ 4,7,10,13,16,19 เลือก Create Motion Tween
35
ทำหน้าปัดวิทยุ 9. เข้าไปขยับสี่เหลี่ยมสีดำที่เฟรมที่ 4,10,16 ให้เปิดให้เห็นแถบสีแค่ไหนก็ได้ตามต้องการให้ดูเหมือนกับว่าแถบสีกำลังทำงานอยู่ 10. ทำข้อ กับแถบสีอีก 5 อันที่เหลือโดยตั้งชื่อเลเยอร์ใหม่เป็น wave ตามลำดับ และบางแถบสีอาจขยับสี่เหลี่ยมในเฟรมที่ 7,13,19 แทนก็ได้ 11. เปลี่ยนสี Background เป็นสีดำ และเอาเส้นกริดออก
36
ตัวหนังสือวิ่งเรียงต่อกัน
ตัวอย่าง ตัวหนังสือวิ่งเรียงต่อกัน
37
ตัวหนังสือวิ่งเรียงต่อกัน
เลือก Text Tool พิมพ์ข้อความ กำหนด Property ของตัวอักษร เลือกเมนู Modify + Break Apart Modify + Timeline + Distribute to Layer เลือก Frame ทั้งหมด แล้ว Insert Keyframe ปรับแต่งตัวหนังสือใน Frame แรก (เช่น อาจจะให้จางกว่า ตัวใหญ่ขึ้น) คลิกภายใน Frame แล้วเลือก Motion Tween เลื่อน Frame ของตัวหนังสือตัวอื่น
38
การสร้างตัวอักษรจากภาพ
ตัวอย่าง การสร้างตัวอักษรจากภาพ
39
การสร้างตัวอักษรจากภาพ
Import ภาพมาไว้ใน Library (butterfly.bmp) นำภาพจาก Library มาไว้ใน scene เลือก Modify + Break Apart (Ctrl + B) Insert Keyframe ใน Frame ที่ 40 ลบภาพผีเสื้อทิ้ง แล้วพิมพ์ข้อความที่ต้องการแทน Modify + Break Apart (2 ครั้ง) เลือก Shape Tween
40
สรุป
41
เปรียบเทียบภาพแบบ Vector กับ Bitmap
สร้างแฟ้มข้อมูลใหม่ นำรูป baseball.bmp เข้ามาไว้ใน Library ดึงรูป baseball.bmp มาไว้ในสเตจ 2 รูป รูปแรกเปลี่ยนเป็น Vector (Modify + Bitmap + Trace Bitmap) รูปที่ 2 ไม่ต้องเปลี่ยน แล้วลองใช้แว่นขยายส่องดูความแตกต่างระหว่างรูปทั้งสอง
42
การซ้อนทับกันของวัตถุ
ดึงสีน้ำเงินออกจากวงกลม เส้นก็มีลักษณะเดียวกัน Flash 8 แก้ไขปัญหานี้ด้วยการใช้ Object Drawing
43
การกำหนดรูปทรงที่วาด
กำหนดสีขอบ กำหนดสีพื้น ลองใช้ดินสอวาดเส้นแบบต่างๆ หัวของเส้น (Cap)
44
การสร้างลูกบอลเคลื่อนที่ตาม Guide
ตัวอย่าง การสร้างลูกบอลเคลื่อนที่ตาม Guide
45
การสร้างลูกบอลเคลื่อนที่ตาม Guide
สร้างไฟล์ใหม่ แล้วสร้างลูกบอล Insert KeyFrame ที่เฟรม 25 เพิ่ม Motion Guide เลือกดินสอ เพื่อวาดเส้นให้ลูกบอลเคลื่อนที่ เฟรมที่ 1 และ 25 เลื่อนลูกบอลมาไว้ในเส้น กำหนด Motion Tween
46
การใช้ Pen Tool เลือก Pen Tool
ใช้ mouse คลิกซ้ายเพื่อกำหนดจุดเริ่มต้น คลิกซ้ายเพื่อเพิ่มจุดที่ 2 จุดที่ 3 ถ้าคลิกแล้วปล่อยจะวาดเป็นเส้นตรง แต่ถ้าต้องการเส้นโค้งให้คลิก mouse ค้างไว้ แล้วปรับแต่งความโค้ง โดยปกติแล้ว การใช้เครื่องมือนี้จะเป็นการสร้างรูปทรงปิด ถ้าต้องการสร้างรูปทรงแบบเปิด ให้กดปุ่ม Ctrl ค้างไว้ แล้วคลิกซ้าย 1 ครั้ง
47
การใช้สี การกำหนดสีโดยใช้ Color Mixer หรือ Color Swatch
การกำหนดสีโดยใช้ Gradient Transform Tool
48
การกำหนดสีโดยใช้ Color Mixer หรือ Color Swatch
สามารถเลือกใช้เมนูนี้ได้ โดยการเลือก Windows + Color Mixer หรือ Color Swatch โหมด RGB เป็น แดง เขียว น้ำเงิน (นิยม) โหมด HSB เป็นการกำหนดสีตามการมองเห็นของสายตา รูปแบบของสี Solid Linear Radial Bitmap
49
รูปแบบของสี Solid ตัวเลขในการป้อนค่า 0-255 หรือเลือกสีจากหน้าจอ
หรือป้อนค่าในช่อง เป็นตัวเลขฐาน 16 Alpha การกำหนดความโปร่งใส เมื่อผสมสีแล้ว ใช้กระป๋องสีในการเทสี สามารถบันทึกสีที่เราผสมได้ โดยเลยกระป๋องสี แล้วมาเทสีที่ Color Swatch
50
Linear การไล่สีในระดับแนวเส้น (เส้นตรง)
สามารถควบคุมสีได้ตามต้องการ (อย่างน้อย 2 จุด) เพิ่มจุดควบคุมสีโดยการคลิกในแนวแถบสี สามารถบันทึกสีที่เราผสมได้ โดยเลยกระป๋องสี แล้วมาเทสีที่ Color Swatch สามารถเลือกรูปแบบเพิ่มได้ที่ Over Flow (ปุ่มที่ 2 ทางขวา)
51
Radial ไล่สีในแนววงกลมจากในวงออกนอกวง หลักการเพิ่มสีเหมือนใน Linear
52
การใช้ Gradient Transform Tool
ใช้ในการควบคุมสี Gradient แบบ Linear จะประกอบด้วย 3 จุด คือ จุดศูนย์กลางของสี ทิศทางในการไล่สี และระยะในการไล่สี ใช้ในการควบคุมสี Gradient แบบ Radial จะประกอบด้วย 4 จุด คือ จุดศูนย์กลางของสี (ความสว่างในการไล่โทนสี) การควบคุมการไล่โทนสี ควบคุมความกว้างความแคบ ทิศทางการไล่สี
53
Bitmap สามารถเลือกภาพ Bitmap มาเป็นสีพื้นได้โดยการคลิกเลือก Bitmap
เลือกภาพที่ต้องการจากเครื่องคอมพิวเตอร์ ปรับรูปแบบตามต้องการโดยใช้ Gradient Transfom Tool
54
เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด
ตัวอย่าง เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด
55
เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด
Layer 1 นำภาพ panda.bmp เข้ามาไว้ในสเตจ (File + Import + Import to Stage) เปลี่ยนจากภาพถ่ายให้เป็นภาพวาด (Modify + Bitmap + Trace Bitmap) Insert KeyFrame ที่เฟรม 55 แล้วกำหนดค่า Alpha = 0 ใส่ Motion Tween Layer 2 นำภาพ panda.bmp จาก Library เข้ามาไว้ในสเตจ Insert KeyFrame ที่เฟรม 55 แล้วกำหนดค่าในเฟรม 1 ให้ Alpha = 0
56
Layer การสร้าง Flash Movie นั้นเราสามารถสร้าง Layer ไว้ใช้งานได้หลาย Layer แต่เราจะสามารถทำงานได้ครั้งละ 1 Layer เท่านั้น ชั้นของ Layer ที่ทำงานจะเรียกว่า Active Layer จะปรากฏเป็นชั้นสีทึบ การเลือก Active Layer ทำได้โดยใช้เมาส์เลือกคลิกในชั้น Layer ที่ต้องการ Active Layer Insert Layer
57
Layer (ต่อ) การลบ Layer ทำได้โดยการเลือก Layer ที่ต้องการลบ ด้วยการคลิกเมาส์ที่ Layer นั้นให้เป็น Active Layer เสียก่อน จากนั้นจึงใช้เครื่องมือ Delete Layer ด้วยการคลิกเมาส์ที่เครื่องมือ Delete Layer 1 ครั้ง Layer ที่ถูกเลือกก็จะถูกลบทึ้งไป พร้อมกับวัตถุต่าง ๆ ที่อยู่บน Layer Delete Layer ซ่อนและแสดง Layer
58
Layer (ต่อ) การตั้งชื่อและการเปลี่ยนชื่อ Layer เพื่อสื่อกับผู้จัดทำได้ว่าในแต่ละ Layer ใช้ทำอะไร หรือมีวัตถุใดเป็นองค์ประกอบ โดยปกติค่าใช้งานเริ่มต้นของโปรแกรม จะใช้ชื่อว่า Layer 1, Layer 2, Layer 3, และเพิ่มขึ้นไป ถ้าต้องการเปลี่ยนชื่อ Layer เพื่อให้มีความหมาย สามารถทำได้อย่างง่าย ๆ โดยการใช้เมาส์ ดับเบิลคลิกที่ชื่อ Layer ที่ต้องการเปลี่ยน จะปรากฏ Cursor รอการพิมพ์ ให้พิมพ์ชื่อที่ต้องการได้เลยและสามารถตั้งชื่อเป็นภาษาไทยได้ด้วย Layer 3 ยังใช้ชื่อเดิม Layer 2 รอการพิมพ์ Layer 1 เปลี่ยนชื่อแล้ว
59
Layer (ต่อ) การเปลี่ยนลำดับ Layer โปรแกรม Macromedia Flash 8 จะนำวัตถุใน Layer แรกมาแสดงก่อน แล้วเรียงลำดับตามชั้น Layer ถ้าวัตถุตรงกันก็จะทับซ้อนกันโดยมีวัตถุใน Layer แรกอยู่ด้านล่าง ดังนั้น ถ้าต้องการให้วัตถุแสดงผลด้านบนหรือล่าง จะต้องจัดเรียงลำดับชั้นของ Layer เสียใหม่ โดยการใช้เมาส์ลากชั้น Layer ไปวางตำแหน่งที่ต้องการ ตำแหน่ง Layer เดิม ตำแหน่ง Layer ใหม่
60
แสดงทั้งหมด แสดงเฉพาะโครงร่าง
Layer (ต่อ) เครื่องมือป้องกันแก้ไข เครื่องมือแสดงโครงร่าง แสดงทั้งหมด แสดงเฉพาะโครงร่าง
61
Tween เป็นการกำหนดการเคลื่อนไหวของภาพ มี 2 ประเภท คือ
Motion Tween ใช้กำหนดการเคลื่อนที่ของวัตถุ Shape Tween ใช้ในกรณีที่มีการเปลี่ยนแปลงรูปร่าง สี ขนาด
62
เปรียบเทียบ Tween แบบ Shape และ Motion
ตัวอย่าง เปรียบเทียบ Tween แบบ Shape และ Motion
63
เปรียบเทียบ Tween แบบ Shape และ Motion
สร้างไฟล์ใหม่ ให้มี 2 Layer (Shape & Motion) Layer Shape ให้สร้างวงกลมทางซ้ายไว้เฟรมที่ 1 และสี่เหลี่ยมทางขวาที่ 25 ใส่ Shape Tween Layer Motion ให้คลิก ก่อนแล้วสร้างวงกลมทางซ้ายไว้เฟรมที่ 1 และ Insert KeyFrame ที่เฟรม 25 แล้วย้ายวงกลมมาทางขวา แล้วใส่ Motion Tween
64
Symbol & Instance Symbol เป็นการนำภาพ Graphic, Movie clip, Button มาไว้ใน Library ท่านสามารถนำ Symbol มาวางไว้ในสเตจเพื่อการใช้งานได้ (จะเรียกว่า Instance) ข้อดีของการใช้ Symbol เมื่อมีการปรับแต่งแก้ไข Symbol แล้ว Instance ภายในสเตจจะมีการเปลี่ยนแปลงตาม Symbol ที่แก้ไข
65
ประเภทของ Symbol Graphic ใช้สำหรับรูปภาพ
Movie Clip ใช้กำหนดการเคลื่อนไหว Button ใช้สำหรับปุ่มกด
66
การสร้าง Symbol ประเภท Graphic
ลองสร้าง Symbol ใหม่ โดยการเลือก Insert + New Symbol จะสังเกตเห็นเครื่องมือ + ตรงกลางรูป เมื่อสร้างเสร็จแล้วลองนำ Symbol มาวางไว้ในสเตจ จะเรียกว่า Instance แล้วกลับไปแก้ไข Symbol เพื่อดูการเปลี่ยนแปลงภายใน สเตจ สร้าง Symbol ประเภท Graphic จากรูปที่มีอยู่แล้ว สามารถเลือกวัตถุที่มีอยู่แล้วให้เป็น Symbol โดยการเลือกวัตถุที่ต้องการจะเปลี่ยน แล้วเลือก Modify + Convert to Symbol
67
การปรับแต่ง Instance สามารถปรับแต่ง Instance โดยไม่กระทบกับ Symbol
ปรับความสว่าง ความเข้ม ปรับเปลี่ยนสี ปรับความโปร่งใส สามารถเปลี่ยน Symbol ของ Instance ได้ เช่น มี Symbol 2 ชิ้น คือ ต้นไม้และผลไม้ แล้วสร้าง Instance ต้นไม้ แล้วเกิดอยากจะเปลี่ยนใจเปลี่ยน Instance ให้เป็นผลไม้ สามารถทำได้โดยการเลือก Instance ที่ต้องการจะเปลี่ยน แล้วเลือก Property ตามด้วย Swap
68
ตัวอย่าง การทำลูกตุ้ม
69
การสร้างลูกตุ้ม เปลี่ยนชื่อ layer ให้เป็น bg แล้วสร้างคานพร้อมลูกตุ้มที่ต้องการให้อยู่นิ่งๆ สร้าง layer ชื่อ left เพื่อให้ลูกตุ้มทางซ้ายเคลื่อนไหวได้ Frame ที่ 15 ให้ Insert Keyframe แล้วหมุนลูกตุ้มสีแดงให้อยู่ในแนวตรง เพื่อกำหนดการเคลื่อนไหวของลูกตุ้มสีแดง (Motion Tween) ลูกตุ้มทางขวาทำในลักษณะเดียวกัน
70
การนำภาพจากภายนอกมาใช้
สามารถนำภาพจากภายนอกมาใช้ได้ใน 2 ลักษณะ คือ นำมาไว้ในสเตจ นำมาเป็น Symbol ไว้ใน Library การกำหนดคุณสมบัติของภาพที่นำเข้ามา โดยเลือก Library แล้วคลิกรูปหน้าชื่อ Symbol
71
ตัวอย่าง ดอกไม้ไฟ
72
ดอกไม้ไฟ เฟรมที่ 1 สร้างวงกลมเล็กๆ ที่ด้านล่าง
เฟรมที่ 8 สร้างวงกลมตรงกลาง เฟรมที่ 25 สร้างวงกลมกระจาย กำหนดให้เป็น Shape Tween
73
การทำตัวอักษรวิ่งรอบวัตถุ
ตัวอย่าง การทำตัวอักษรวิ่งรอบวัตถุ
74
การทำตัวอักษรวิ่งรอบวัตถุ
นำเข้า text.gif & coffee.bmp Insert New Symbol โดยกำหนดให้เป็น Movie Clip ตั้งชื่อว่า Text1 นำ text.gif มาไว้ใน Movie Clip Text1 แล้ว Insert Keyframe เฟรมที่ 100 แล้วกำหนดให้เป็น Motion Tween โดยเลือก Rotate แบบ CW 1 รอบ ที่ Scene1 กำหนดให้มี 2 Layer ชื่อ cup & Text
75
การทำตัวอักษรวิ่งรอบวัตถุ (ต่อ)
Layer cup นำถ้วยกาแฟ coffee.bmp มาวาง Layer Text นำ Movie Clip Text1 มาวาง แล้วปรับแต่งให้เอียงตามปากถ้วยกาแฟ
76
Mask Layer เป็นการกำหนดให้ผู้ชมเห็นเฉพาะเนื้อหาภายในช่องเท่านั้น ส่วนเนื้อหาที่อยู่ด้านนอกจะถูกบังไว้ ช่องกรอบดังกล่าวจะสามารถปรับแต่งหรือสร้างการเคลื่อนไหวได้เหมือนกับวัตถุทั่วไป ตัวอย่างนี้จะแสดงการส่อง Spotlight ไปยังตัวละครบนเวทีที่กำลังแสดงอยู่
77
ตัวอย่าง Spotlight
78
Spotlight สร้างไฟล์ใหม่ ขนาด 700x460 pixels
นำรูป stage.jpg มาไว้ที่ Layer bg และ stage Layer bg (อยู่ล่างสุด) ให้กำหนด Color (Tint ให้มีสีน้ำตาล) สร้าง Layer ใหม่ชื่อ Mask อยู่ข้างบน Layer stage แล้ววาดช่องที่ต้องการให้สปอตไลท์ส่อง (อาจจะเป็นวงกลม หรือรูปตามต้องการ) กำหนดเส้นทางการเคลื่อนที่ของสปอตไลท์ คลิกขวาที่ Layer Mask แล้วเลือก Mask
79
ตัวอย่าง Spotlight2
80
Spotlight Insert New Symbol ประเภท Movie Clip ชื่อ Len
สร้างวงกลม โดยมีสีพื้นแบบ Radial สีดำ Scene1 สร้าง Layer 2 Layer Layer 1 พิมพ์ข้อความ Layer 1 ลาก Movie Clip Len มาไว้ กำหนด Action Script ที่เฟรม 1 ดังนี้ startDrag("len", true); กำหนด Action Script ที่ Len ดังนี้ onClipEvent(load) { startDrag (this,true); Mouse.hide();}
81
เทคนิคการตกแต่งวัตถุ
ฟิลเตอร์ คือ รูปแบบพิเศษที่ใช้ในการตกแต่งวัตถุที่เป็น Symbol แบบ Movie Clip & Button และยังสามารถตกแต่งข้อความได้ ใส่ฟิลเตอร์ โดยเปิดจาก Window + Properties + Filters
82
การสร้างตัวอักษรที่รูปแบบพิเศษ
เพิ่มอักษร Window + Properties + Filters คลิกเครื่องหมาย + เพื่อเพิ่ม Filter
83
ปุ่ม (Button) ปุ่ม (Button) เป็น Symbol ประเภทหนึ่งซึ่งสามารถแสดงภาพที่แตกต่างกันออกไปตามสถานะของปุ่มในขณะนั้น และยังสามารถสร้างคำสั่งให้กับสถานะของปุ่มได้ เพื่อให้ทำงานตามที่กำหนดไว้ เช่น คลิกที่ปุ่มแล้วให้แสดงภาพเคลื่อนไหว หรือคลิกที่ปุ่มแล้วไปยังเฟรมที่ต้องการ ปุ่มเป็น Interactive Movie Clip
84
ปุ่ม (Button) ประกอบด้วย
เฟรม Up เป็นเฟรมที่จะแสดงเมื่อ mouse อยู่นอกขอบเขตของปุ่ม เฟรม Over เป็นเฟรมที่จะแสดงเมื่อ mouse เลื่อนมาอยู่ในขอบเขตของปุ่ม เฟรม Down เป็นเฟรมที่จะแสดงเมื่อ ปุ่มถูกคลิกภายในขอบเขตของปุ่ม เฟรม Hit เป็นเฟรมเนื้อหาที่ใช้เป็นขอบเขตของปุ่ม เพื่อให้มีการตอบสนองต่อ mouse ทั้ง 3 สถานะข้างต้น ดังนั้นเนื้อหาในเฟรมจะไม่ปรากฏเมื่อนำปุ่มไปใช้
85
การสร้างปุ่ม (Button)
Insert Symbol ตั้งชื่อปุ่ม เลือกประเภทเป็น Button กดปุ่ม OK เริ่มสร้างรูปปุ่มด้วยเครื่องมือการวาด เลื่อนมาที่ Over แล้ว Insert Keyframe แก้ไขรายละเอียดของเฟรมนั้น เฟรมที่เหลือทำลักษณะเดียวกัน
86
ตัวอย่าง การสร้างเมนู
87
การสร้างเมนู Import รูปเข้ามา 5 รูป เฟรมที่ 1 นำรูปที่ 1 มาวาง
เฟรมที่ 2 นำรูปที่ 2 มาวาง (ตั้งชื่อเฟรมว่า button2) ทำจนครบ 5 เฟรม เพิ่ม Layer ที่ 2 ชื่อ butt ใช้ในการวางปุ่ม นำปุ่มจาก Windows + Common Library + Button มาวางใน butt 4 ปุ่ม เปลี่ยนข้อความในปุ่ม โดยไปที่ symbol button เลือก Layer text
88
กำหนด Action Script ให้กับปุ่ม
First on (release){ gotoAndStop(1); } Second gotoAndStop(button2); Next on (release) { nextFrame(); Previous prevFrame();
89
การนำเสียงมาใช้ใน Flash
File + Import + Import to Library สร้าง Layer ใหม่ ให้กับเสียง คลิกเลือก Layer ที่ต้องการใส่เสียง ลากเสียงจาก Library มาไว้ใน Stage
90
การกำหนดจุดเริ่มต้นและจุดสิ้นสุดของเสียง
คลิกเลือกเฟรมที่ต้องการจะให้เริ่มเล่นเสียง กด Insert Keyframe ลากเสียงจาก Library มาไว้ใน Stage คลิกเลือกเฟรมที่ต้องการจะให้หยุดเล่นเสียง กด Insert Keyframe
91
ลบเสียงออกจากเฟรม คลิกเฟรมเสียงบนไทม์ไลน์
ที่ Property Inspector ให้เลือก Sound เป็น none
92
Property ของ Sound ชื่อไฟล์เสียง Effect Synchronization
93
Effect None ไม่ใช้เอฟเฟ็คต์ใดๆ
Left Channel เล่นเสียงเฉพาะช่องสัญญาณทางซ้ายเท่านั้น Right Channel เล่นเสียงเฉพาะช่องสัญญาณทางขวา Fade Left to Right ให้เสียงเคลื่อนย้ายช่องสัญญาณซ้ายไปยังช่องสัญญาณขวา Fade Right to Left ให้เสียงเคลื่อนย้ายช่องสัญญาณขวาไปยังช่องสัญญาณซ้าย Fade In ให้เริ่มจากเสียงเบาแล้วค่อยๆ ดัง Fade Out ให้เริ่มจากเสียงดังแล้วค่อยๆ เบา Custom กำหนดเอง
94
Synchronization ใช้กำหนดวิธีเล่นเสียง ควบคุมการเริ่มเล่น และจบ
Event เริ่มเล่นเสียงในเฟรมที่กำหนดไว้ และจะเล่นไปเรื่อยๆ จนกว่าจะจบ โดยไม่ขึ้นกับไทม์ไลน์แม้ว่า Movie จะจบไปแล้ว Start จะเล่นเสียงคล้ายกับ Event แต่ถ้าเสียงกำลังเล่นอยู่ และเกิดเหตุการณ์ที่จะต้องเล่นเสียงเดิมซ้อนขึ้นมา เครื่องจะไม่เล่นซ้อนอีก จะเล่นเพลงเดิมต่อไปเรื่อยๆ Stop ใช้สำหรับกำหนดให้หยุดเล่น Stream จะใช้ในกรณีของการเล่นเสียงบนเว็บ บังคับให้ภาพเคลื่อนไหวถูกแสดงแบบสอดคล้องกันเสียง ถ้าภาพเคลื่อนไหวตามไม่ทันก็จะข้ามเฟรมบางเฟรมไป และไม่เล่นเกินกว่าเฟรมที่มีอยู่
95
การเล่นเพลงเมื่อกดปุ่ม
สร้างปุ่มกดเพื่อเล่นเพลง นำไฟล์เสียงเข้ามาใน Library ไปยัง Symbol Button เพิ่ม Layer เพื่อเล่นเพลง ไปยัง Layer ที่เพิ่ม แล้ว Insert Keyframe ลากเพลงที่ต้องการมาไว้ใน scene
งานนำเสนอที่คล้ายกัน
