Macromedia Flash MX2004

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

Flash MX ตอน แสดงวิดีโอใน Flash MX 2004

วิธีที่ง่ายที่สุดในการแสดงผลวิดีโอ นั่นก็คือจับทั้งวิดีโอและ Flash มาแสดงผลรวมกัน ถ้า Flash เล่นวิดีโอก็เล่นตาม และในทางกลับกันถ้า Flash หยุดเล่น วิดีโอก็หยุดเล่นด้วยเช่นกัน ดังนั้นเราจึงสามารถใช้คำสั่ง Play() หรือ Stop() มาควบคุมการเล่นหรือหยุดเล่นของวิดีโอใน Flash ได้


รูปที่ 1 สร้างกรอบมาตกแต่งบริเวณรอบๆ วิดีโอ

1. ภายในไฟล์เอกสาร Flash ที่ได้อิมพอร์ตไฟล์วิดีโอเข้ามาแล้ว ให้ไปที่พาเนล Library แล้วลากซิมโบลวิดีโอที่ต้องการนำมาแสดงผลจากพาเนล Library ลงมาไว้ ณ ตำแหน่งที่ต้องการในพื้นที่ทำงาน

2. จะปรากฏไดอะล็อกบอกว่าซิมโบลวิดีโอที่เราลากลงมาใส่ไว้ในพื้นที่ทำงานนั้น ต้องการจำนวนเฟรมเท่าไหร่ และเราต้องการให้ Flash เพิ่มจำนวนเฟรมให้เท่ากับจำนวนเฟรมที่ซิมโบลวิดีโอต้องการโดยอัตโนมัติหรือไม่ ซึ่งเราควรจะคลิ้ก Yes

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


รูปที่ 2 สร้างรูปปุ่มสำหรับเล่นและหยุดเล่น

4. ใช้เครื่องมือต่างๆ สร้างรูปปุ่มสำหรับเริ่มเล่น และหยุดเล่น ดังรูปที่ 2

5. ให้ใช้เม้าส์เลือกรูปปุ่มสำหรับเริ่มเล่น แล้วกดคีย์ F8 จะปรากฏหน้าต่าง Convert to Symbol ขึ้นมา ในช่อง Name กำหนดชื่อซิมโบลเป็น btPlay และกำหนด Behavior เป็น Button เสร็จแล้วกด OK

6. ใช้เม้าส์เลือกรูปปุ่มสำหรับเริ่มเล่น แล้วกดคีย์ F8 เช่นเดิม ที่หน้าต่าง Convert to Symbol ในช่อง Name กำหนดเป็น btStop และกำหนด Behavior เป็น Button เสร็จแล้วกด OK

7. ใช้เม้าส์คลิ้กที่ btPlay ที่อยู่ในพื้นที่ทำงาน แล้วไปที่พาเนล Actions ต่อจากนั้นให้ใส่แอคชันสคริปต์ลงไป ดังนี้

on (release) {
_root.play();
}

8. ใช้เม้าส์คลิ้กที่ btStop ที่อยู่ในพื้นที่ทำงาน แล้วไปที่พาเนล Actions ต่อจากนั้นใส่แอคชันสคริปต์ลงไปดังนี้

on (release) {
_root.stop();
}


รูปที่ 3 ตัวอย่างการแสดงผลวิดีโอที่ได้

ตอนนี้วิดีโอของเราก็ใส่ลงไปใน Flash เรียบร้อยแล้ว และปุ่มควบคุมการเล่นและหยุดเล่นทั้งสองก็พร้อมแล้ว ต่อไปก็ให้กดคีย์ Ctrl+Enter เพื่อสั่งทดสอบ Flash ก็จะเห็นวิดีโอเล่นทันที ดังรูปที่ 3 และเมื่อกดปุ่ม Stop เพื่อหยุดเล่น Flash ก็จะเห็นว่าวิดีโอนั้นจะหยุดเล่นตามไปด้วย และเมื่อกดปุ่ม Play ก็จะทำให้ Flash เริ่มเล่นอีกครั้ง ส่งผลให้วิดีโอเล่นตามด้วย

วิดีโอแบบ Streaming จากไฟล์ .FLV

ถึงแม้ว่าวิธีการแสดงวิดีโอในแบบที่แล้วก็เป็นการแสดงผลแบบ Streaming เหมือนกัน แต่ว่าเนื้อหาวิดีโอภายใน Flash นั้นไม่สามารถนำมาใช้ได้อีก เพราะว่าถูกรวมไปกับ Flash แล้ว แต่ถ้าเราเปลี่ยนมาใช้วิธีแปลงไฟล์เป็นไฟล์ .FLV (Macromedia Flash Video) ก่อนแล้วค่อยให้ Flash ดึงข้อมูลวิดีโอจากไฟล์ .FLV นี้มาแสดงผล ก็จะทำให้เรายังคงสามารถนำวิดีโอนี้ไปใช้ในงานอื่นๆ ได้อีก ซึ่งมีวิธีการแปลงไฟล์วิดีโอทั่วไปให้เป็น .FLV ดังนี้

1. ทำตามขั้นตอนต่างๆ ตามหัวข้อตัดต่อวิดีโอด้วย Flash MX 2004” เพื่ออิมพอร์ตวิดีโอเข้ามาในไลบรารี่


รูปที่ 11 นำคอมโพเนนต์ MediaPlayback ลงมาไว้ในพื้นที่ทำงาน

2. คลิ้กขวาที่ซิมโบลวิดีโอที่ต้องการแปลงเป็นไฟล์ .FLV ในพาเนล Library แล้วเลือก Properties ดังรูปที่ 4 จะปรากฏหน้าต่าง Embedded Video Properties ต่อจากนั้นให้คลิ้กที่ปุ่ม Export จะปรากฏหน้าต่าง Export FLV ขึ้นมา ให้ใส่ชื่อไฟล์ .FLV ที่ต้องการบันทึกลงไปในช่อง File Name แล้วคลิ้กที่ปุ่ม Save ก็จะได้ไฟล์ .FLV สำหรับใช้ในการแสดงวิดีโอแบบ Streaming แล้ว

จากขั้นตอนเหล่านี้ก็จะทำให้เราได้ไฟล์วิดีโอในรูปแบบของ .FLV แล้ว ซึ่งถ้าคุณต้องการไฟล์ .FLV สำหรับไฟล์วิดีโออื่นๆ ก็ต้องทำซ้ำตั้งแต่ขั้นตอนแรกอีกครั้ง ซึ่งเวลานำไปใช้งานจริง เราจะนำแค่ไฟล์ .FLV ไปใช้งานเท่านั้น ไม่จำเป็นต้องนำไฟล์วิดีโอต้นฉบับไปด้วย

แสดงวิดีโอด้วย Media Playback Component

หลังจากที่เราได้ไฟล์วิดีโอ .FLV แล้ว ก็แสดงผลวิดีโอในไฟล์รูปแบบนี้ก็ไม่ใช่เรื่องยากอีกต่อไป เพราะว่าในโปรแกรม Flash MX 2004 ได้มีคอมโพเนนต์สำหรับแสดงวิดีโอจากไฟล์ .FLV มาให้เรียบร้อยแล้ว เราเพียงแค่นำคอมโพเนนต์ตัวนี้มาใส่ไว้ในพื้นที่ทำงาน และกำหนดค่าต่างๆ อีกเพียงเล็กน้อยเท่านั้น


รูปที่ 5 นำคอมโพเนนต์ MediaPlayback

1. ในโปรแกรม Flash MX 2004 ให้สร้างไฟล์เอกสาร Flash ขึ้นมาใหม่ ต่อจากนั้นไปที่พาเนล Components แล้วใช้เม้าส์ลากคอมโพเนนต์ที่ชื่อ MediaPlayback ดังรูปที่ 5 ลงมาวางไว้ในพื้นที่ทำงาน แล้วใช้เครื่องมือ Transform มาปรับขนาดของคอมโพเนนต์ MediaPlayback ที่อยู่ในพื้นที่ทำงาน ให้มีขนาดตามต้องการ (ซึ่งควรจะสัมพันธ์กับขนาดภาพของวิดีโอด้วย)

2. ให้คลิ้กที่คอมโพเนนต์ MediaPlayback ที่อยู่ในพื้นที่ทำงาน แล้วไปที่พาเนล Properties จะเห็นปุ่ม Launch Component Inspector ให้คลิ้กที่ปุ่มนี้ แล้วจะปรากฏพาเนล Component Inspector ขึ้นมา ซึ่งจะมีรายละเอียดต่างๆ อยู่ในพาเนลดังรูปที่ 6


รูปที่ 6 รายละเอียดต่างๆ ในพาเนล Component Inspector

3. ในช่อง URL ของพาเนล Component Inspector ให้ใส่ URL ของไฟล์ .FLV ที่ต้องการนำมาแสดงผล

4. นอกจากนี้ยังมีตัวเลือกอื่นๆ ภายในพาเนล Component Inspector ที่น่าสนใจได้แก่

* Automatically Play สำหรับกำหนดให้เล่นวิดีโออัตโนมัติ

* Use Preferred Media Size สำหรับกำหนดให้ปรับขนาดตามขนาดของวิดีโอ

* Respect Aspect Ratio สำหรับกำหนดให้รักษาอัตราส่วนของขนาดวิดีโอ ในกรณีที่เราปรับให้ขนาดของ MediaPlayback ไม่เท่ากับขนาดของวิดีโอ

* Control Placement สำหรับกำหนดตำแหน่งของแถบคอลโทรล ว่าจะให้อยู่ในตำแหน่งใดของ MediaPlayback

* Control Visibility สำหรับกำหนดการแสดงแถบคอลโทรลว่าจะให้แสดง (On), ไม่แสดง (Off), หรือแสดงอัตโนมัติเมื่อนำเม้าส์ไปวางไว้ ณ ตำแหน่งของแถบคอลโทรล (Auto)


รูปที่ 7 ตัวอย่างผลลัพธ์ที่ได้

เมื่อทุกอย่างเสร็จเรียบร้อยแล้ว ก็ให้กดคีย์ Ctrl+Enter เพื่อสั่งทดสอบ Flash ก็จะเห็นวิดีโอที่คอมโพเนนต์MediaPlayback แสดงขึ้นมา ดังรูปที่ 7 โดยเราสามารถเลื่อนไปดูวิดีโอ ณ ตำแหน่งต่างๆ ได้ด้วย Timeline ที่ปรากฏบนแถบคอลโทรล และสามารถควบคุมการเล่นและหยุดเล่น รวมทั้งระดับเสียงของวิดีโอได้อีกด้วย

ที่จริงแล้ว คอมโพเนนต์ที่เพิ่มความสะดวกสบายในการสร้าง Flash ไม่ได้มีเพียงแค่ MediaPlayback เท่านั้น ยังมีคอมโพเนนต์อื่นๆ ที่แถมมากับ Flash MX 2004 อีกหลายตัวเลยทีเดียว ซึ่งแต่ละตัวก็มีข้อดีข้อเสียแตกต่างกันไป อันนี้ก็ต้องแล้วแต่ว่าใครจะนำไปประยุกต์ใช้อย่างไรครับ…

 

การทำวัตถุเคลื่อนไหว

การทำวัตถุเคลื่อนไหว การที่เราจะทำวัตถุให้เคลื่อนไหวนั้นใน Flash ถือได้ว่าใช้งานได้ง่ายมากโดยที่เราไม่ต้องมานั่งวาดภาพทีละภาพ มาดูขั้นตอนการทำ

ขั้นตอนการทำ
1.
วาดวัตถุที่เราต้องการทำภาพเคลื่อไหว


2.
หลังจากที่เราวาดถัตถุเรียบร้อยแล้วให้เรามากำหนด Key Frame เพื่อระบุตำแหน่งเริ่ม – สิ้นสุดของวัตถุ ในที่นี้ผมจะกำหนดความยาว 30 Frame ให้เราคลิกขวาที่ Key Frame ที่ 30 แล้วเลือก Insert KeyFrame ดังภาพ


3.
หลังจากที่เราใส่ Key Frame ลงไปแล้วจะสังเกตุที่ Frame จะเป็นสีเทา และมีจุดหัวท้าย ดังภาพ


4.
หลังจากนั้นให้เรานำ Mouse เลือก Frame ทั้งหมดตั้งแต่ 1 – 30 แล้วคลิกขวาเลือก Create Motion Tween ดังภาพ


5.
หลังจากที่เราใส่ Motion Tween แล้วสังเกตุว่า Frame จะเป็นสีม่วงมีลูกศรชี้หัวท้าย ดังภาพ


6.
หลังจากนั้นให้คลิกที่ Frame ที่ 30 แล้วนำ Mouse มาลากวัตถุไปยังตำแหน่งที่เราต้องการ


การกำหนดวัตถุหมุนรอบตัวเอง

การหมุนรอบตัวเองโดยเราสามารถที่จะกำหนดรอบของการหมุนได้

1.นำชิ้นงานที่เราจะต้องการให้หมุน วางไว้บน Stage



2.
จากนั้นให้เพิ่ม Keyframe โดยเลือกเฟรมที่เราต้องการ แล้วคลิกขวาเลือก Insert Keyframe



3.
คลิกขวาที่ เฟรมแรก เลือก Create Motion Tween
4.
กำหนดค่าต่างๆของ Motion Tween ใน Properties Panel ดังนี้
   *
ที่ช่อง Tween ให้เราเลือก Motion
   *
ที่ช่อง Rotate ให้เราเลือก CW (หมุนตามเข็มนาฬิกา) หรือ CCW (หมุนทวนเข็มนาฬิกา)
   *
ที่ช่อง Times ให้เราใส่จำนวนรอบที่เราต้องการให้ชิ้นงานหมุน


5.จากนั้นให้เราทดสอบชิ้นงานโดยกด Ctrl + Enter

 

การเปลี่ยนรูปทรงโดยใช้ Motion Shape

 

ขั้นตอนการทำ

1. สร้างเอกสารเปล่าขึ้นมา ดังภาพ

2. วาดวัตถุที่เราต้องการให้เป็นวัตถุเริ่มต้น ในที่นี้ผมวาดสี่เหลี่ยม จัดตำแหน่งให้อยู่กึ่งกลาง ดังภาพ

3. กำหนดขนาด Movie ว่าเราต้องการให้เปลี่ยนรูปทรงช้าหรือเร็วในที่นี้ผมกำหนด 20 Frame ให้คลิกขวาที่ตำแหน่ง Frame จากนั้นเลือก Insert KeyFrame ดังภาพ

4. จากนั้นจะมี KeyFrame ที่จุดเริ่มต้น – สิ้นสุดของ Movie ที่จะเปลี่ยนวัตถุ ดังภาพ

5. หลังจากนั้นลบวัตถุที่อยู่ในตำแหน่ง Frame ที่ 20 ออกแล้ววาดวัตถุที่เราต้องการให้เปลี่ยน ในที่นี้ผมวาดวงกลม ดังภาพ

 

6. ทำการ Highlight ตั้งแต่ Frame 1 – Frame 20 ดังภาพ

7. หลังจากนั้นลอง Preview โดยกด Ctrl+Enter

 

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

การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม บทความนี้เป็นการประยุกต์นะครับ ถ้าใครไม่เข้าใจลองอ่านพื้นฐานการเปลี่ยนรูปทรงก่อนนะครับ

ขั้นตอนการทำ

1. สร้างเอกสาร พร้อมกับวาดกรอบสี่เหลี่ยมขึ้นมา ดังภาพ

2. ทำการย้ายเส้นกรอบทั้งสี่ให้อยู่เส้นละ Layer พร้อมกับตั้งชื่อ Layer 1-4 ดังภาพ
ในการย้ายให้ใช้คำสั่ง Cut จากนั้นใช้ Paste in Place เพื่อให้เส้นยังคงตำแหน่งเดิม

3. หลังจากนั้นกำหนด Key Frame เพื่อกำหนดความเร็วของ Movie ในที่นี้ผมกำหนด 10 Frame ดังภาพ

4. จากนั้นกำหนดให้จุดเริ่มต้นของทุก Layer ให้มีเส้นขนาดที่สั้น ดังภาพ
ในการย่อใช้เครื่องมือ Free Transform Tool

5. ใส่ Tween –> Shape ให้กับทุก Layer และย้ายจุดเริ่มต้นของเส้นของ Layer ต่างๆ ให้ต่อเนื่องกัน ดังภาพ

6. ใส่ Frame เพื่อแสดงเส้นที่ต่อเนื่องตั้งแต่ line1-line4 ดังภาพ

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

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s