Macromedia Flash 8 สุรีย์ นามบุตร

ความต้องการระบบคอมพิวเตอร์ เครื่องคอมพิวเตอร์ที่มีหน่วยประมวลผลกลางระดับ Intel Pentium 800 MHz หรือสูงกว่า ระบบปฏิบัติการ Windows 2000 หรือสูงกว่า หน่วยความจำ (RAM) อย่างต่ำ 256 MB (แนะนำให้ใช้ 1 GB) เนื้อที่ของฮาร์ดดิสก์อย่างน้อย 710 MB จอภาพสีที่ความละเอียด 1024 x 768 pixels

ความสามารถใหม่ใน Flash 8 พื้นที่นอกสเตจที่เรียกว่า Pasteboard เป็นส่วนที่เราใช้เป็นที่พักชั่วคราวในการวางออบเจ็กต์ที่เราไม่ต้องการให้แสดงบนสเตจ เมื่อเราทดสอบผลงานในเวอร์ชั่นเก่าจะแสดงให้เห็นทั้งหมด แต่งานที่สร้างจาก flash 8 ได้ปิดการแสดงผลตรงนี้ไป เพื่อให้เห็นเฉพาะส่วนงานจริงบนสเตจเท่านั้น

การวาดรูปและการลงสี รูปแบบเดิม ภาพวาดแบบปกติที่นำมาซ้อนกัน   หลังจากแยกภาพออกจากนั้น ภาพที่ถูกซ้อนทับจะหายไป รูปแบบใหม่ใน Flash 8 ภาพวาดที่เป็นออบเจ็กต์ที่นำมาซ้อนกัน   หลังจากแยกภาพออก จะไม่มีส่วนใดของภาพที่หายไป

ส่วนประกอบของหน้าต่างโปรแกรม

Toolbox

การสร้างไฟล์ด้วยการกำหนดรูปแบบเอง Flash Document ไฟล์รูปแบบปกติ ที่ใช้สร้างงานแอนนิเมชันทั่วไป Flash Slide Presentation ไฟล์งานที่เหมาะกับการสร้างงานนำเสนอ Flash Form Application ใช้สร้างฟอร์มสำหรับทำเป็นโปรแกรมใช้งานทั่วไป ActionScript File เป็นหน้าต่างที่ไว้เขียนสคริปต์เพียงอย่างเดียว ActionScript Communication File เขียนไฟล์เพื่อติดต่อกับเชิร์ฟเวอร์ Flash JavaScript File เหมาะสำหรับงานเขียนสคริปต์ที่ทำงานร่วมกับ JavaScript หรือ API Flash Project เป็นการรวมกลุ่มงานที่สร้างทั้งหมด ให้ออกมาเป็น Project ไฟล์

ตัวอย่างที่ 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

ตัวอย่าง การทดลองใช้ Flash

ทดลองใช้ Flash เปิดโปรแกรม สร้างไฟล์ชิ้นแรก เลือก Flash Document สร้างวัตถุง่ายๆ เช่น เลือกปุ่มการทำงานแบบสำเร็จรูปที่เครื่องเตรียมไว้ โดยไปที่ Window > Common Libraries > Buttons แล้วเลือกปุ่มตามต้องการ นำวัตถุมาสร้างภาพเคลื่อนไหว บันทึกการใช้งาน แปลงไฟล์ชิ้นงานสำหรับเผยแพร่

นามสกุลของ Flash *.fla คือไฟล์ที่เกิดจากการบันทึกชิ้นงานใน Flash ซึ่งสามารถแก้ไขชิ้นงานได้ *.swf คือไฟล์สำหรับการนำไปเผยแพร่ หมายเหตุ : เมื่อมีการ Publish เพื่อเผยแพร่งานทางเว็บ จะได้ไฟล์ที่มีนามสกุล *.html เพิ่มขึ้นมาด้วย เพื่อแสดงภาพเคลื่อนไหวผ่านเว็บ

วิธีการ Publish เลือกเมนู File เลือกคำสั่ง Publish หรือกดปุ่ม Shift + F12

ชนิดของกราฟิก Bitmap เป็นภาพที่เกิดจากเม็ดสีหรือจุดสี (pixel) มาเรียงกันเป็นภาพ ภาพประเภทนี้สามารถแสดงรายละเอียดได้ใกล้เคียงภาพจริง เช่น ภาพถ่ายที่มีความละเอียดสูง แต่ภาพเหล่านี้จะมีขนาดใหญ่ และเมื่อนำมาขยายจะทำให้ได้ภาพที่ไม่ชัด Vector ภาพนี้จะใช้การคำนวณทางคณิตศาสตร์มาช่วยในการสร้างเส้นและลวดลายต่างๆ เหมาะสำหรับภาพกราฟิกที่มีสีค่อนข้างต่อเนื่อง แต่สามารถปรับแต่งขนาดได้โดยมีมีผลต่อความละเอียดของภาพ

การกำหนดขนาดและคุณสมบัติของชิ้นงาน Title : ชื่อของชิ้นงาน Description : รายละเอียดเกี่ยวกับชิ้นงาน Dimensions : กำหนดขนาดของสเตจโดยระบุค่าความกว้างและความสูง Match : กำหนดขนาดของสเตจ โดย Printer ให้สเตจเท่ากับพื้นที่ใหญ่ที่สุดที่สามารถพิมพ์ได้ Contents ให้พื้นที่การทำงานโดยรอบสเตจมีขนาดเท่ากัน Default ปรับสเตจให้มีค่ามาตรฐานคือ 550*400 พิกเซล Background color : กำหนดสีพื้น Frame Rate กำหนดอัตราเร็วในการแสดงภาพเคลื่อนไหว (มาตรฐานที่ใช้ 12 fps) Ruler Units เลือกหน่วยวัดของไม้บรรทัด

เทคนิคการวาดเส้น การวาดเส้นตรงให้เราเลือกเครื่องมือ Line Tool หรือกดคีย์บอร์ด ตัว N ลองลากเส้นต่อกันดังรูป กรณีที่เส้น สองเส้นไม่ต่อกันดังรูปที่ผ่านมา ให้เราเลือกที่เครื่องมือ Snap to Object ลองวาดเส้นใหม่อีกครั้ง เส้นที่วาดใกล้กันจะต่อติดกันพอดี เมื่อได้เส้นมาแล้ว เราสามารถปรับแต่งเส้นได้ โดยให้เราเลือกเครื่องมือ Selection tool ก่อน หรือกดคีย์บอร์ดตัว V ดังภาพ

รู้จัก Timeline และ Frame Frame Timeline

Frame Frame เป็นส่วนประกอบของ Timeline ประกอบด้วย Frame ที่ต่อเนื่องกันหลาย ๆ Frame เมื่อมีการแสดงภาพเคลื่อนไหวโปรแกรมจะนำวัตถุ (Instance) ที่อยู่บนเวที (Stage) มาแสดงผลทีละFrame ในส่วนของความเร็วในการแสดงผลมากน้อยเพียงใดขึ้นอยู่กับการกำหนดคุณสมบัติ Movie Properties ที่ Frame Rate มีหน่วยเป็น Frame per Second (fps) ปกติจะใช้อยู่ที่ 12 fps

ลักษณะการทำงานของ Frame ที่ปรากฏบน Timeline ในกรณีที่ยังไม่มีการกำหนดใช้งาน Frame บน Timeline จะปรากฏช่องของแต่ละ Frame อย่างชัดเจน Playhead จะไม่เคลื่อนที่ การกำหนดใช้งาน Frame บน Timeline จะปรากฏเป็นแถบสีขาวเท่ากับจำนวน Frame ที่กำหนด Playhead จะเคลื่อนที่จนถึง Frame สุดท้าย Keyframe มีสัญลักษณ์เป็นจุดสีดำอยู่กลาง Frame เป็นตำแหน่งที่มีวัตถุบนพื้นที่ทำงานหรือมีการเปลี่ยนแปลงการเคลื่อนไหวต่อเนื่องไปจน ถึง Frame สุดท้ายของ Keyframe นั้น มีสัญลักษณ์เป็นรูปสี่เหลี่ยมเล็ก ๆ ภายใน Frame

ลักษณะการทำงานของ Frame (ต่อ) Action frame มีสัญลักษณ์เป็นรูป a อยู่กลาง Frame เป็นตำแหน่งที่มีคำสั่ง Action ประกอบอยู่ภายใน Frame นั้น Motion-tweened keyframes มีสัญลักษณ์เป็นรูปลูกศรสีดำอยู่ระหว่างจุด 2 จุด บนพื้นสีฟ้าอ่อน Shape-tweened keyframes มีสัญลักษณ์เป็นรูปลูกศรสีดำ อยู่ระหว่างจุด 2 จุด บนพื้นสีเขียวอ่อน

การปรับแต่งเส้น

ตัวอย่าง การวาดเส้นการ์ตูน

การวาดเส้นการ์ตูน เริ่มสร้างตัวการ์ตูนก่อน โดยเริ่มจากหัว ใช้ Oval Tool (ไม่ใช้เส้นขอบ ใช้เฉพาะสีพื้น) สร้างตัว โดยใช้ Line Tool สร้างแขนโดยใช้ Line Tool แล้วให้เลือก Selection Tool ทำให้แขนโค้ง คัดลอกแขนข้างซ้ายมาไว้แขนข้างขวา อาจจะใช้ Modify + Transform + Flip Vertical ช่วย วาดขา วาดบันได

การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม ตัวอย่าง การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม

การทำเส้นวิ่งเป็นกรอบห้าเหลี่ยม แบบฝึกหัด การทำเส้นวิ่งเป็นกรอบห้าเหลี่ยม

การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม สร้างเอกสาร พร้อมกับวาดรูปสี่เหลี่ยม ย้ายเส้นกรอบทั้งสี่ให้อยู่เส้นละ Layer พร้อมกับตั้งชื่อ Layer หลังจากนั้นกำหนด Key Frame เพื่อกำหนดความเร็วของ Movie จากนั้นกำหนดให้จุดเริ่มต้นของทุก Layer ให้มีเส้นขนาดที่สั้น โดยใช้เครื่องมือ Free Transform Tool ใส่ Tween --> Shape ให้กับทุก Layer ย้ายจุดเริ่มต้นของเส้นของ Layer ต่างๆ ให้ต่อเนื่องกัน

การแปลงภาพบิทแมพให้เป็นเวคเตอร์ การแปลงภาพให้เป็นเวคเตอร์สามารถทำให้ปรับองค์ประกอบภายในของภาพได้ในลักษณะเดียวกับวัตถุใน Flash และทำให้ไฟล์มีขนาดเล็กลง มีวิธีการ ดังนี้ คลิกเลือกภาพบนสเตจ Modify + Bitmap + Trace Bitmap กำหนดค่าต่างๆ ColorThreshold กำหนดความแตกต่างของสีที่ต้องการจะแปลง Minimum Area กำหนดจำนวนพิกเซลโดยรอบที่ต้องการจะแสดงรายละเอียด

การวาดเส้นลายการ์ตูน 2 ตัวอย่าง การวาดเส้นลายการ์ตูน 2

การวาดเส้นลายการ์ตูน นำเข้ารูปการ์ตูน (baseball.jpg) เลือก Modify + Bitmap + Trace Bitmap เพื่อเปลี่ยนภาพให้เป็นเวคเตอร์ ไปยัง Frame ที่ 2 เลือก Insert Keyframe แล้วค่อยๆ ลบตัวการ์ตูน (เช่น อาจจะลบขาออก 1 ข้าง) เพิ่ม Frame ที่ 3 แล้วค่อยๆ ลบตัวการ์ตูนออกทีละน้อย เพิ่ม Frame ไปเรื่อยๆ จนกว่าตัวการ์ตูนจะหมด เลือก Frame ทั้งหมด แล้วคลิกขวาเลือก Reverse Frame

การวาดภาพใน Flash ภาพใน Flash ประกอบด้วย เส้นขอบ (Storke) โครงร่างของรูป สีพื้น (Fill) พื้นที่ภายในเส้นขอบ

ขั้นตอนการทำ วาดวัตถุที่เราต้องการ หลังจากนั้นคลิกเลือกที่เส้นขอบ แล้วเลือกเปลี่ยนขนาดจาก Properties ของตัวโปรแกรมได้เลย

ตัวอย่าง การทำหน้าปัดวิทยุ

ทำหน้าปัดวิทยุ 1. สร้างเอกสารใหม่ขึ้นมา ขนาด 350 X 180 โดยตั้งให้ Frame Rate = 20 เลือก bgcolor เป็นสีเทา (#6666666) 2. เลือกเมนู view -> Grid -> Show Grid เพื่อใส่เส้นกริดเข้าไป 3. วาดรูปสี่เหลี่ยมผืนผ้าสีขาว บริเวณล่างซ้ายของกรอบให้พอดีกับเส้นกริด โดยใช้เครื่องมือ Rectangle Tool ดังรูป 4. Copy สี่เหลี่ยมที่วาดลงไปมาอีก 11 อัน แล้วนำมาวางเรียงกัน ดังรูป

ทำหน้าปัดวิทยุ 5. ใส่สีไล่โทนให้กับรูปสี่เหลี่ยมโดยไล่จากล่างขึ้นบนและจากอ่อนไปเข้ม ดังรูป โดยใช้เครื่องมือ Paint Bucket Tool ใส่สีให้กับสี่เหลี่ยมแต่ละอันจากล่างขึ้นบน 6. Copy รูปสี่เหลี่ยมทั้งหมด มาวางให้ตรงกับแนวเส้นกริด ให้ครบ 6 อัน แล้ว Insert Keyframes ในเฟรมที่ 19

ทำหน้าปัดวิทยุ 7. สร้างเลเยอร์ใหม่ตั้งชื่อว่า wave1 ที่เฟรมที่ 1 ให้สร้างสี่เหลี่ยมสีดำ โดยใช้เครื่องมือ Rectangle Tool ปิดทับสี่เหลี่ยมไล่โทนอันแรกไว้ 8. ให้ Insert Keyframes ที่เฟรมที่ 4,7,10,13,16,19 เลือก Create Motion Tween

ทำหน้าปัดวิทยุ 9. เข้าไปขยับสี่เหลี่ยมสีดำที่เฟรมที่ 4,10,16 ให้เปิดให้เห็นแถบสีแค่ไหนก็ได้ตามต้องการให้ดูเหมือนกับว่าแถบสีกำลังทำงานอยู่ 10. ทำข้อ 7 - 9 กับแถบสีอีก 5 อันที่เหลือโดยตั้งชื่อเลเยอร์ใหม่เป็น wave 2 - 6 ตามลำดับ และบางแถบสีอาจขยับสี่เหลี่ยมในเฟรมที่ 7,13,19 แทนก็ได้ 11. เปลี่ยนสี Background เป็นสีดำ และเอาเส้นกริดออก

ตัวหนังสือวิ่งเรียงต่อกัน ตัวอย่าง ตัวหนังสือวิ่งเรียงต่อกัน

ตัวหนังสือวิ่งเรียงต่อกัน เลือก Text Tool พิมพ์ข้อความ กำหนด Property ของตัวอักษร เลือกเมนู Modify + Break Apart Modify + Timeline + Distribute to Layer เลือก Frame ทั้งหมด แล้ว Insert Keyframe ปรับแต่งตัวหนังสือใน Frame แรก (เช่น อาจจะให้จางกว่า ตัวใหญ่ขึ้น) คลิกภายใน Frame แล้วเลือก Motion Tween เลื่อน Frame ของตัวหนังสือตัวอื่น

การสร้างตัวอักษรจากภาพ ตัวอย่าง การสร้างตัวอักษรจากภาพ

การสร้างตัวอักษรจากภาพ Import ภาพมาไว้ใน Library (butterfly.bmp) นำภาพจาก Library มาไว้ใน scene เลือก Modify + Break Apart (Ctrl + B) Insert Keyframe ใน Frame ที่ 40 ลบภาพผีเสื้อทิ้ง แล้วพิมพ์ข้อความที่ต้องการแทน Modify + Break Apart (2 ครั้ง) เลือก Shape Tween

สรุป

เปรียบเทียบภาพแบบ Vector กับ Bitmap สร้างแฟ้มข้อมูลใหม่ นำรูป baseball.bmp เข้ามาไว้ใน Library ดึงรูป baseball.bmp มาไว้ในสเตจ 2 รูป รูปแรกเปลี่ยนเป็น Vector (Modify + Bitmap + Trace Bitmap) รูปที่ 2 ไม่ต้องเปลี่ยน แล้วลองใช้แว่นขยายส่องดูความแตกต่างระหว่างรูปทั้งสอง

การซ้อนทับกันของวัตถุ ดึงสีน้ำเงินออกจากวงกลม เส้นก็มีลักษณะเดียวกัน Flash 8 แก้ไขปัญหานี้ด้วยการใช้ Object Drawing

การกำหนดรูปทรงที่วาด กำหนดสีขอบ กำหนดสีพื้น ลองใช้ดินสอวาดเส้นแบบต่างๆ หัวของเส้น (Cap)

การสร้างลูกบอลเคลื่อนที่ตาม Guide ตัวอย่าง การสร้างลูกบอลเคลื่อนที่ตาม Guide

การสร้างลูกบอลเคลื่อนที่ตาม Guide สร้างไฟล์ใหม่ แล้วสร้างลูกบอล Insert KeyFrame ที่เฟรม 25 เพิ่ม Motion Guide เลือกดินสอ เพื่อวาดเส้นให้ลูกบอลเคลื่อนที่ เฟรมที่ 1 และ 25 เลื่อนลูกบอลมาไว้ในเส้น กำหนด Motion Tween

การใช้ Pen Tool เลือก Pen Tool ใช้ mouse คลิกซ้ายเพื่อกำหนดจุดเริ่มต้น คลิกซ้ายเพื่อเพิ่มจุดที่ 2 จุดที่ 3 ถ้าคลิกแล้วปล่อยจะวาดเป็นเส้นตรง แต่ถ้าต้องการเส้นโค้งให้คลิก mouse ค้างไว้ แล้วปรับแต่งความโค้ง โดยปกติแล้ว การใช้เครื่องมือนี้จะเป็นการสร้างรูปทรงปิด ถ้าต้องการสร้างรูปทรงแบบเปิด ให้กดปุ่ม Ctrl ค้างไว้ แล้วคลิกซ้าย 1 ครั้ง

การใช้สี การกำหนดสีโดยใช้ Color Mixer หรือ Color Swatch การกำหนดสีโดยใช้ Gradient Transform Tool

การกำหนดสีโดยใช้ Color Mixer หรือ Color Swatch สามารถเลือกใช้เมนูนี้ได้ โดยการเลือก Windows + Color Mixer หรือ Color Swatch โหมด RGB เป็น แดง เขียว น้ำเงิน (นิยม) โหมด HSB เป็นการกำหนดสีตามการมองเห็นของสายตา รูปแบบของสี Solid Linear Radial Bitmap

รูปแบบของสี Solid ตัวเลขในการป้อนค่า 0-255 หรือเลือกสีจากหน้าจอ หรือป้อนค่าในช่อง เป็นตัวเลขฐาน 16 Alpha การกำหนดความโปร่งใส เมื่อผสมสีแล้ว ใช้กระป๋องสีในการเทสี สามารถบันทึกสีที่เราผสมได้ โดยเลยกระป๋องสี แล้วมาเทสีที่ Color Swatch

Linear การไล่สีในระดับแนวเส้น (เส้นตรง) สามารถควบคุมสีได้ตามต้องการ (อย่างน้อย 2 จุด) เพิ่มจุดควบคุมสีโดยการคลิกในแนวแถบสี สามารถบันทึกสีที่เราผสมได้ โดยเลยกระป๋องสี แล้วมาเทสีที่ Color Swatch สามารถเลือกรูปแบบเพิ่มได้ที่ Over Flow (ปุ่มที่ 2 ทางขวา)

Radial ไล่สีในแนววงกลมจากในวงออกนอกวง หลักการเพิ่มสีเหมือนใน Linear

การใช้ Gradient Transform Tool ใช้ในการควบคุมสี Gradient แบบ Linear จะประกอบด้วย 3 จุด คือ จุดศูนย์กลางของสี ทิศทางในการไล่สี และระยะในการไล่สี ใช้ในการควบคุมสี Gradient แบบ Radial จะประกอบด้วย 4 จุด คือ จุดศูนย์กลางของสี (ความสว่างในการไล่โทนสี) การควบคุมการไล่โทนสี ควบคุมความกว้างความแคบ ทิศทางการไล่สี

Bitmap สามารถเลือกภาพ Bitmap มาเป็นสีพื้นได้โดยการคลิกเลือก Bitmap เลือกภาพที่ต้องการจากเครื่องคอมพิวเตอร์ ปรับรูปแบบตามต้องการโดยใช้ Gradient Transfom Tool

เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด ตัวอย่าง เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด

เทคนิคการแสดงภาพจากภาพถ่ายเป็นภาพวาด 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

Layer การสร้าง Flash Movie นั้นเราสามารถสร้าง Layer ไว้ใช้งานได้หลาย Layer แต่เราจะสามารถทำงานได้ครั้งละ 1 Layer เท่านั้น ชั้นของ Layer ที่ทำงานจะเรียกว่า Active Layer จะปรากฏเป็นชั้นสีทึบ การเลือก Active Layer ทำได้โดยใช้เมาส์เลือกคลิกในชั้น Layer ที่ต้องการ Active Layer Insert Layer

Layer (ต่อ) การลบ Layer ทำได้โดยการเลือก Layer ที่ต้องการลบ ด้วยการคลิกเมาส์ที่ Layer นั้นให้เป็น Active Layer เสียก่อน จากนั้นจึงใช้เครื่องมือ Delete Layer ด้วยการคลิกเมาส์ที่เครื่องมือ Delete Layer 1 ครั้ง Layer ที่ถูกเลือกก็จะถูกลบทึ้งไป พร้อมกับวัตถุต่าง ๆ ที่อยู่บน Layer Delete Layer ซ่อนและแสดง Layer

Layer (ต่อ) การตั้งชื่อและการเปลี่ยนชื่อ Layer เพื่อสื่อกับผู้จัดทำได้ว่าในแต่ละ Layer ใช้ทำอะไร หรือมีวัตถุใดเป็นองค์ประกอบ โดยปกติค่าใช้งานเริ่มต้นของโปรแกรม จะใช้ชื่อว่า Layer 1, Layer 2, Layer 3, และเพิ่มขึ้นไป ถ้าต้องการเปลี่ยนชื่อ Layer เพื่อให้มีความหมาย สามารถทำได้อย่างง่าย ๆ โดยการใช้เมาส์ ดับเบิลคลิกที่ชื่อ Layer ที่ต้องการเปลี่ยน จะปรากฏ Cursor รอการพิมพ์ ให้พิมพ์ชื่อที่ต้องการได้เลยและสามารถตั้งชื่อเป็นภาษาไทยได้ด้วย Layer 3 ยังใช้ชื่อเดิม Layer 2 รอการพิมพ์ Layer 1 เปลี่ยนชื่อแล้ว

Layer (ต่อ) การเปลี่ยนลำดับ Layer โปรแกรม Macromedia Flash 8 จะนำวัตถุใน Layer แรกมาแสดงก่อน แล้วเรียงลำดับตามชั้น Layer ถ้าวัตถุตรงกันก็จะทับซ้อนกันโดยมีวัตถุใน Layer แรกอยู่ด้านล่าง ดังนั้น ถ้าต้องการให้วัตถุแสดงผลด้านบนหรือล่าง จะต้องจัดเรียงลำดับชั้นของ Layer เสียใหม่ โดยการใช้เมาส์ลากชั้น Layer ไปวางตำแหน่งที่ต้องการ ตำแหน่ง Layer เดิม ตำแหน่ง Layer ใหม่

แสดงทั้งหมด แสดงเฉพาะโครงร่าง Layer (ต่อ) เครื่องมือป้องกันแก้ไข เครื่องมือแสดงโครงร่าง แสดงทั้งหมด แสดงเฉพาะโครงร่าง

Tween เป็นการกำหนดการเคลื่อนไหวของภาพ มี 2 ประเภท คือ Motion Tween ใช้กำหนดการเคลื่อนที่ของวัตถุ Shape Tween ใช้ในกรณีที่มีการเปลี่ยนแปลงรูปร่าง สี ขนาด

เปรียบเทียบ Tween แบบ Shape และ Motion ตัวอย่าง เปรียบเทียบ Tween แบบ Shape และ Motion

เปรียบเทียบ Tween แบบ Shape และ Motion สร้างไฟล์ใหม่ ให้มี 2 Layer (Shape & Motion) Layer Shape ให้สร้างวงกลมทางซ้ายไว้เฟรมที่ 1 และสี่เหลี่ยมทางขวาที่ 25 ใส่ Shape Tween Layer Motion ให้คลิก ก่อนแล้วสร้างวงกลมทางซ้ายไว้เฟรมที่ 1 และ Insert KeyFrame ที่เฟรม 25 แล้วย้ายวงกลมมาทางขวา แล้วใส่ Motion Tween

Symbol & Instance Symbol เป็นการนำภาพ Graphic, Movie clip, Button มาไว้ใน Library ท่านสามารถนำ Symbol มาวางไว้ในสเตจเพื่อการใช้งานได้ (จะเรียกว่า Instance) ข้อดีของการใช้ Symbol เมื่อมีการปรับแต่งแก้ไข Symbol แล้ว Instance ภายในสเตจจะมีการเปลี่ยนแปลงตาม Symbol ที่แก้ไข

ประเภทของ Symbol Graphic ใช้สำหรับรูปภาพ Movie Clip ใช้กำหนดการเคลื่อนไหว Button ใช้สำหรับปุ่มกด

การสร้าง Symbol ประเภท Graphic ลองสร้าง Symbol ใหม่ โดยการเลือก Insert + New Symbol จะสังเกตเห็นเครื่องมือ + ตรงกลางรูป เมื่อสร้างเสร็จแล้วลองนำ Symbol มาวางไว้ในสเตจ จะเรียกว่า Instance แล้วกลับไปแก้ไข Symbol เพื่อดูการเปลี่ยนแปลงภายใน สเตจ สร้าง Symbol ประเภท Graphic จากรูปที่มีอยู่แล้ว สามารถเลือกวัตถุที่มีอยู่แล้วให้เป็น Symbol โดยการเลือกวัตถุที่ต้องการจะเปลี่ยน แล้วเลือก Modify + Convert to Symbol

การปรับแต่ง Instance สามารถปรับแต่ง Instance โดยไม่กระทบกับ Symbol ปรับความสว่าง ความเข้ม ปรับเปลี่ยนสี ปรับความโปร่งใส สามารถเปลี่ยน Symbol ของ Instance ได้ เช่น มี Symbol 2 ชิ้น คือ ต้นไม้และผลไม้ แล้วสร้าง Instance ต้นไม้ แล้วเกิดอยากจะเปลี่ยนใจเปลี่ยน Instance ให้เป็นผลไม้ สามารถทำได้โดยการเลือก Instance ที่ต้องการจะเปลี่ยน แล้วเลือก Property ตามด้วย Swap

ตัวอย่าง การทำลูกตุ้ม

การสร้างลูกตุ้ม เปลี่ยนชื่อ layer ให้เป็น bg แล้วสร้างคานพร้อมลูกตุ้มที่ต้องการให้อยู่นิ่งๆ สร้าง layer ชื่อ left เพื่อให้ลูกตุ้มทางซ้ายเคลื่อนไหวได้ Frame ที่ 15 ให้ Insert Keyframe แล้วหมุนลูกตุ้มสีแดงให้อยู่ในแนวตรง เพื่อกำหนดการเคลื่อนไหวของลูกตุ้มสีแดง (Motion Tween) ลูกตุ้มทางขวาทำในลักษณะเดียวกัน

การนำภาพจากภายนอกมาใช้ สามารถนำภาพจากภายนอกมาใช้ได้ใน 2 ลักษณะ คือ นำมาไว้ในสเตจ นำมาเป็น Symbol ไว้ใน Library การกำหนดคุณสมบัติของภาพที่นำเข้ามา โดยเลือก Library แล้วคลิกรูปหน้าชื่อ Symbol

ตัวอย่าง ดอกไม้ไฟ

ดอกไม้ไฟ เฟรมที่ 1 สร้างวงกลมเล็กๆ ที่ด้านล่าง เฟรมที่ 8 สร้างวงกลมตรงกลาง เฟรมที่ 25 สร้างวงกลมกระจาย กำหนดให้เป็น Shape Tween

การทำตัวอักษรวิ่งรอบวัตถุ ตัวอย่าง การทำตัวอักษรวิ่งรอบวัตถุ

การทำตัวอักษรวิ่งรอบวัตถุ นำเข้า 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

การทำตัวอักษรวิ่งรอบวัตถุ (ต่อ) Layer cup นำถ้วยกาแฟ coffee.bmp มาวาง Layer Text นำ Movie Clip Text1 มาวาง แล้วปรับแต่งให้เอียงตามปากถ้วยกาแฟ

Mask Layer เป็นการกำหนดให้ผู้ชมเห็นเฉพาะเนื้อหาภายในช่องเท่านั้น ส่วนเนื้อหาที่อยู่ด้านนอกจะถูกบังไว้ ช่องกรอบดังกล่าวจะสามารถปรับแต่งหรือสร้างการเคลื่อนไหวได้เหมือนกับวัตถุทั่วไป ตัวอย่างนี้จะแสดงการส่อง Spotlight ไปยังตัวละครบนเวทีที่กำลังแสดงอยู่

ตัวอย่าง Spotlight

Spotlight สร้างไฟล์ใหม่ ขนาด 700x460 pixels นำรูป stage.jpg มาไว้ที่ Layer bg และ stage Layer bg (อยู่ล่างสุด) ให้กำหนด Color (Tint ให้มีสีน้ำตาล) สร้าง Layer ใหม่ชื่อ Mask อยู่ข้างบน Layer stage แล้ววาดช่องที่ต้องการให้สปอตไลท์ส่อง (อาจจะเป็นวงกลม หรือรูปตามต้องการ) กำหนดเส้นทางการเคลื่อนที่ของสปอตไลท์ คลิกขวาที่ Layer Mask แล้วเลือก Mask

ตัวอย่าง Spotlight2

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();}

เทคนิคการตกแต่งวัตถุ ฟิลเตอร์ คือ รูปแบบพิเศษที่ใช้ในการตกแต่งวัตถุที่เป็น Symbol แบบ Movie Clip & Button และยังสามารถตกแต่งข้อความได้ ใส่ฟิลเตอร์ โดยเปิดจาก Window + Properties + Filters

การสร้างตัวอักษรที่รูปแบบพิเศษ เพิ่มอักษร Window + Properties + Filters คลิกเครื่องหมาย + เพื่อเพิ่ม Filter

ปุ่ม (Button) ปุ่ม (Button) เป็น Symbol ประเภทหนึ่งซึ่งสามารถแสดงภาพที่แตกต่างกันออกไปตามสถานะของปุ่มในขณะนั้น และยังสามารถสร้างคำสั่งให้กับสถานะของปุ่มได้ เพื่อให้ทำงานตามที่กำหนดไว้ เช่น คลิกที่ปุ่มแล้วให้แสดงภาพเคลื่อนไหว หรือคลิกที่ปุ่มแล้วไปยังเฟรมที่ต้องการ ปุ่มเป็น Interactive Movie Clip

ปุ่ม (Button) ประกอบด้วย เฟรม Up เป็นเฟรมที่จะแสดงเมื่อ mouse อยู่นอกขอบเขตของปุ่ม เฟรม Over เป็นเฟรมที่จะแสดงเมื่อ mouse เลื่อนมาอยู่ในขอบเขตของปุ่ม เฟรม Down เป็นเฟรมที่จะแสดงเมื่อ ปุ่มถูกคลิกภายในขอบเขตของปุ่ม เฟรม Hit เป็นเฟรมเนื้อหาที่ใช้เป็นขอบเขตของปุ่ม เพื่อให้มีการตอบสนองต่อ mouse ทั้ง 3 สถานะข้างต้น ดังนั้นเนื้อหาในเฟรมจะไม่ปรากฏเมื่อนำปุ่มไปใช้

การสร้างปุ่ม (Button) Insert Symbol ตั้งชื่อปุ่ม เลือกประเภทเป็น Button กดปุ่ม OK เริ่มสร้างรูปปุ่มด้วยเครื่องมือการวาด เลื่อนมาที่ Over แล้ว Insert Keyframe แก้ไขรายละเอียดของเฟรมนั้น เฟรมที่เหลือทำลักษณะเดียวกัน

ตัวอย่าง การสร้างเมนู

การสร้างเมนู Import รูปเข้ามา 5 รูป เฟรมที่ 1 นำรูปที่ 1 มาวาง เฟรมที่ 2 นำรูปที่ 2 มาวาง (ตั้งชื่อเฟรมว่า button2) ทำจนครบ 5 เฟรม เพิ่ม Layer ที่ 2 ชื่อ butt ใช้ในการวางปุ่ม นำปุ่มจาก Windows + Common Library + Button มาวางใน butt 4 ปุ่ม เปลี่ยนข้อความในปุ่ม โดยไปที่ symbol button เลือก Layer text

กำหนด Action Script ให้กับปุ่ม First on (release){ gotoAndStop(1); } Second gotoAndStop(button2); Next on (release) { nextFrame(); Previous prevFrame();

การนำเสียงมาใช้ใน Flash File + Import + Import to Library สร้าง Layer ใหม่ ให้กับเสียง คลิกเลือก Layer ที่ต้องการใส่เสียง ลากเสียงจาก Library มาไว้ใน Stage

การกำหนดจุดเริ่มต้นและจุดสิ้นสุดของเสียง คลิกเลือกเฟรมที่ต้องการจะให้เริ่มเล่นเสียง กด Insert Keyframe ลากเสียงจาก Library มาไว้ใน Stage คลิกเลือกเฟรมที่ต้องการจะให้หยุดเล่นเสียง กด Insert Keyframe

ลบเสียงออกจากเฟรม คลิกเฟรมเสียงบนไทม์ไลน์ ที่ Property Inspector ให้เลือก Sound เป็น none

Property ของ Sound ชื่อไฟล์เสียง Effect Synchronization

Effect None ไม่ใช้เอฟเฟ็คต์ใดๆ Left Channel เล่นเสียงเฉพาะช่องสัญญาณทางซ้ายเท่านั้น Right Channel เล่นเสียงเฉพาะช่องสัญญาณทางขวา Fade Left to Right ให้เสียงเคลื่อนย้ายช่องสัญญาณซ้ายไปยังช่องสัญญาณขวา Fade Right to Left ให้เสียงเคลื่อนย้ายช่องสัญญาณขวาไปยังช่องสัญญาณซ้าย Fade In ให้เริ่มจากเสียงเบาแล้วค่อยๆ ดัง Fade Out ให้เริ่มจากเสียงดังแล้วค่อยๆ เบา Custom กำหนดเอง

Synchronization ใช้กำหนดวิธีเล่นเสียง ควบคุมการเริ่มเล่น และจบ Event เริ่มเล่นเสียงในเฟรมที่กำหนดไว้ และจะเล่นไปเรื่อยๆ จนกว่าจะจบ โดยไม่ขึ้นกับไทม์ไลน์แม้ว่า Movie จะจบไปแล้ว Start จะเล่นเสียงคล้ายกับ Event แต่ถ้าเสียงกำลังเล่นอยู่ และเกิดเหตุการณ์ที่จะต้องเล่นเสียงเดิมซ้อนขึ้นมา เครื่องจะไม่เล่นซ้อนอีก จะเล่นเพลงเดิมต่อไปเรื่อยๆ Stop ใช้สำหรับกำหนดให้หยุดเล่น Stream จะใช้ในกรณีของการเล่นเสียงบนเว็บ บังคับให้ภาพเคลื่อนไหวถูกแสดงแบบสอดคล้องกันเสียง ถ้าภาพเคลื่อนไหวตามไม่ทันก็จะข้ามเฟรมบางเฟรมไป และไม่เล่นเกินกว่าเฟรมที่มีอยู่

การเล่นเพลงเมื่อกดปุ่ม สร้างปุ่มกดเพื่อเล่นเพลง นำไฟล์เสียงเข้ามาใน Library ไปยัง Symbol Button เพิ่ม Layer เพื่อเล่นเพลง ไปยัง Layer ที่เพิ่ม แล้ว Insert Keyframe ลากเพลงที่ต้องการมาไว้ใน scene