พื้นฐานการทำ CSS Menu

29/05/2014

แปลความหมายเพลง Olivia Ong – 海枯石爛

01/06/2014

Flash – Text Animate – ข้อความค่อยๆ แสดงอย่างรวดเร็ว

30/05/2014
empty image
empty image

ตั้งชื่อบทความยากมาก -..- เอาหล่ะวันนี้จะทำไร พอดีไปเจอคำถาม มีคนถามใน pantip ว่าตรงแถบนี้ทำยังไง ? เราก็เลยเจอก็เลยอยากลองทำ (ว่างจัดไง)  จริงๆ ใช้ AE ทำดูท่าจะง่ายกว่า แต่เราจะต้องทำด้วย Flash งั้นก็ลุยเลย !!!

ตัวอย่างวิดีโอ

ตรงที่มันเป็นข้อความแสดงตัวเลข ชื่อนักร้อง และชื่อเพลงอ่านะ
จากการดูตัวอย่าง จะเห็นว่ามีแค่การ scale กับ Mask เท่านั้น ซึ่งไม่ยากเท่าไหร่ เริ่มกันเลย !!!

ตัวอย่างเมื่อเสร็จแล้ว

 

1. วาดวัตถุทั้งหมด ที่เราเห็น

กรอบของตัวเลขลำดับ
– วาด 4 เหลี่ยมจตุจักร เอ้ย ! จัตุรัส โดยใช้ Rectangle Tool กด Shift ตอนวาดด้วย แล้วแปลงเป็น Graphic Symbol
– ใช้ Text Tool พิพ์ตัวเลข แล้วก็แปลงเป็น Graphic Symbol

กรอบของชื่อศิลปิน และชื่อเพลง
– วาด พื้นของชื่อศิลปิน ที่เป็นสีขาวๆ อ่ะ ด้วย Rectangle Tool ขนาดตามความเหมาะสม แล้วแปลงเป็น Graphic Symbol
– วาด พื้นของชื่อเพลง ที่เป้นสีดำด้วย  Rectangle Tool ขนามตามความเหมาะสม แต่วิธีลัดคือ copy ข้างบนอ่ะ แล้วขยายด้านสูง แล้วแปลงเป็น Graphic Symbol
– พิมพ์ข้อความที่เป็นชื่อนักร้อง และ ชื่อเพลง โดยอันนี้ ไม่ต้องแปลงเป็น symbol ก็ได้

**วัตถุทุกชิ้นต้องอยู่คนละเลเยอร์
เมื่อวาดทั้งหมดแล้วก็จะได้แบบนี้

 

2. ใส่การเคลื่อนไหว

2.1 การเคลื่อนไหวของ ส่วนที่ 1 เลขบอกลำดับ
– การเคลื่อนไหวของกล่อง ใช้ 10 เฟรม
เฟรม 1 วัตถุอยู่ด้านล่าง นอกจอ
เฟรม 10 วัตถุอยู่ในตำแหน่งที่ต้องการ กด [F6] เฟรม 7 กด [F6] แล้วเลื่อนวัตถุขึ้นไปข้างบนนิดหน่อย

– การเคลื่อนไหวของตัวเลข
เฟรม 10 ให้เป็นเฟรมเริ่มต้นของตัวเลข > คลิกวัตถุ (ตัวเลข) > Properties > Color Effect > Alpha ปรับเป็น 0%
เฟรม 15 ให้เป็นจุดสิ้นสุด ปรับ Alpha เป็น 100%

** ถ้าเร็วไปก็ปรับความยาวของเฟรมได้ ตามสบายเลยครับ
เรียบร้อย ก็จะเป็นแบบนี้

2.2 การเคลื่อนไหวของ ส่วนที่ 2 ชื่อนักร้อง
– การเคลื่อนไหวของพื้นสีขาว
ลากจัดกึ่งกลางมาไว้ด้านซ้าย

เฟรมที่ 15 เริ่มต้นการเคลื่อนไหว ปรับ scale ด้านนอนให้เป็น 0%
เฟรมที่ 25 จุดสิ้นสุด ปรับ scale เป็น 100%

– การเคลื่อนไหวของชื่อนักร้อง
เฟรมที่ 18 ให้เป็นจุดเริ่มต้นของชื่อ ซึ่งจะค่อยๆ โผล่ออกมา
ตรงนี้ให้สร้างเลเยอร์ใหม่ขึ้นมาเพื่อเป็น Mask จากนั้นก็ copy เฟรมของพื้นสีขาวคือตั้งแต่ 15 ถึง 25 ก๊อปมาวางในเฟรมที่ 18 แล้วก็คลิกขวาที่เลเยอร์ เลือก Mask
เสร็จแล้วก็จะได้แบบนี้

2.3 การเคลื่อนไหวของ ส่วนที่ 3 ชื่อเพลง
– การเคลื่อนไหวของพื้นสีดำ
ลากจุดกึ่งกลางมาไว้ที่ด้านบน

เฟรมที่ 25 เป็นจุดเริ่มของพื้นสีดำ ปรับ scale ด้านตั้งให้เป็น 0%
เฟรมที่ 35 เป็นจุดสิ้นสุด ปรับ scale เป็น 100%

– การเคลื่อนไหวของชื่อเพลง
เฟรมที่ 28 เป็นจุดเริ่มต้น
ตรงนี้ให้สร้างเลเยอร์ใหม่ขึ้นมาเพื่อเป็น Mask จากนั้นก็ copy เฟรมของพื้นสีดำคือตั้งแต่ 25 ถึง 35 ก๊อปมาวางในเฟรมที่ 28 แล้วก็คลิกขวาที่เลเยอร์ เลือก Mask

เสร็จแล้วก็จะได้แบบนี้

เมื่อลองเล่นดูแล้ว อาจเร็วไป หรือยังไง ไม่ถูกใจ เราก็สามารถปรับเฟรมได้ โดยขยายออกหรือหดเข้าก็ตามสบาย

Reverse Frame

ต่อไปการย้อนกลับ เมื่อโผล่มาแล้ว ก็ต้องมีหายไปสินะ

1. ให้ทำการ copy เฟรมทั้งหมด
2. สร้าง symbol ขึ้นมาใหม่ แล้ววางไปเลย โดยคลิกขวาที่เลเยอร์แล้ววาง
3. ลบเฟรมป่าวที่เกินออกไป ให้เหลือเท่ากับคีย์เฟรมที่อยู่ทางขวาสุด ซึ่งในที่นี้คือ มี 60 เฟรม คีย์เฟรมที่อยู่ขวาสุดคือเฟรมที่ 40

4. กำหนดคีย์เฟรมที่เฟรมสุดท้าย +1 นั้นให้หมด ซึ่งก็คือเฟรมที่ 41

5. เลือกทั้งหมด แล้วคลิกขวา เลือก reverse keyframe แล้วก็จะเป็นดังภาพ

6. ปรับให้ดูดีเหมือนเดิม
– ที่เฟรมที่ 41 ให้ไปเคลียคีน์เฟรมออก (Clear Keyframe)
– ที่เฟรมที่ 1 ให้ Remove Frame
– ไปลบเฟรมที่มันเกินๆ ออกมาซึ่งในนี้คือ BoxSong และ BoxName

เท่านี้ก็เสร็จเรียบร้อย นี่เป็นวิธีที่ผมลองผิดลองถูกจนน่าจะเป็นวิธีที่เร็วที่สุดแล้วในการกลับเฟรม และอัตราการเล่นไปและกลับเท่ากัน แต่มันมีอีกวิธีที่จะให้กลับเฟรมซึ่งก็คือการใช้ ActionScript มีความแตกต่างจากวิธีเมื่อกี้นิดหน่อยคือ

– ใช้ Reverse Frame จะเป็นการเล่นไปข้างหน้าเหมือนเดิม เพียงแต่เราสร้างภาพให้มันกลับหลัง
– ใช้ Action Script ในการ reverse จะเป็นการเล่นถอยหลังหรือกลับหลัง
งงป่ะ ฮ่าๆๆ

ปัญหาต่อไป จะทำไงถ้าอยากให้เล่นไปแล้วเล่นกลับ ง่ายมาก

1. ทำแบบวิธีข้างบน มันก็จะได้ symbol ใช่มั้ย ก็เอาอันนั้นแหละไปใส่โดยวางทับเลเยอร์ก่อนนั้นทั้งหมด
วิธีทำ จากเดิม ตัวเดิมมี 60 เฟรมใช่มั้ย ก็กำหนดคีย์เฟรมที่เฟรม 61 แล้วเอา symbol มาวาง

ปัญหาใหญ่เลย ต้องวางให้ทับกันพอดีแป๊ะๆ ซึ่ง Flash บางอยากจะให้ขนาดเท่ากันนั้นยากมาก ไม่รู้ทำไม -..-

2. ใช้วิธีการ reverse frame แบบข้างบน (บนนู่นเลยนะ)  แต่เอาไปวางใน Timeline นั้นเลย ไม่ต้องไปวางใน symbol ซึ่งวิธีนี้จะทำให้เนียน เพราะวัตถุมันจะอยู่ตำแหน่งเดียวกันหมด วิธีนี้ถือว่าดีที่สุดเลย…

เรียบร้อย ตอนแรกว่าจะแค่ทำตามเฉยๆ ไปๆ มาๆ ยาวเลย แต่ก็ดี ถือว่าเป็นการทบทวนเรื่องการ reverse frame ไปด้วย … Zzz
อีกตัวอย่าง ซึ่งอันนี้ใส่ Alpha อันบนไม่ได้ใส่อ่ะนะ

Download Files :  https://www.dropbox.com/s/5xr7n8beeyk3fsc/TextAnimate1New.zip

New : https://www.dropbox.com/s/4munbsijufetuyh/TextAnimate1New%20%281%29.zip
แก้ใหม่ ทำให้สามารถแก้ไขข้อความได้ง่ายขึ้น โดยแก้ผ่าน Symbol ใน Library

Zzz