ทำ Sprite sheet จาก Adobe Flash CS6 by

29
Aug
0

1.ทำ Animation ที่ต้องการเอาไว้ใน Symbol จะเป็น MovieClip หรือ Graphic ก็ได้เหมือนกัน

ตัวอย่าง animation

ตัวอย่าง animation แบบ onion skin

2.คลิกขวาที่ MovieClip นั้นๆ แล้วเลือกคำสั่ง Generate Sprite Sheet

3.ผลลัพธ์

แถม: ถ้าหากเลือกคำสั่ง Export PNG Sequence จะเป็นการเซฟรูปแต่ละ frame ออกมาเป็นไฟล์ภาพ png 1 ไฟล์ แทน

ข้อควรระวัง!
1.ภายใน Symbol ที่จะใช้สร้าง Sprite sheet นั้น symbol ด้านในต้องเป็น graphic ทั้งหมด ถ้าอันไหนเป็น movieclip จะแสดงผลแค่ frame แรก frame เดียว

2.ใช้ได้เฉพาะ Adobe Flash CS6 เท่านั้น

3.วิธีการนี้ไม่ค่อยเหมาะกับการทำ Animation แบบ Tween เพราะ Frame จะเยอะมาก

4.ระวัง Frame เปล่า และ Frame ซ้ำ เพราะ จะโดนเซฟออกมาด้วย หากไม่จำเป็นให้เลือกเฉพาะ keyframe ก็พอ

Gradient เพี้ยนใน Flash เมื่อ copy มาจาก illustrator by

30
Sep
0

เมื่อเราทำการ copy รูปจากโปรแกรม illustrator มายัง Flash ถ้ารูปของเรามีส่วนที่ใช้การไล่สี (Gradient) จะพบว่า สีของshape ที่ไล่สีบางอันอาจจะเพี้ยนไป ดังรูปต่อไปนี้
null
null

ทั้งนี้เนื่องจากว่า รูปลูกศรอันซ้ายมือ คืออันที่เกิดจากการ Reflect ขึ้นมาครับ
null

วิธีแก้ไข

เปลี่ยนสีของ shape ที่มีปัญหาก่อน เป็นสีใดก็ได้
null

จากนั้นก็เปลี่ยนกลับเป็นสีที่ต้องการอีกที ก็เรียบร้อยแล้วครับ
null

วิธีทำให้ TextField ใน Flash สามารถแก้ไขข้อมูลโดย Flex ได้ (พร้อมทิป) by

31
Oct
0

โดยปกติแล้วถ้าเราสร้างปุ่มขึ้นมาใน Flash แล้วต้องการให้มันมีตัวหนังสือ (label) เราก็จะสร้าง text field ไว้ในปุ่มนั้นๆเลย ทีนี้ปัญหามันอยู่ที่ว่า ถ้าเรา import ไปใช้กับ Flex แล้วเราจะไม่สามารถอ้างอิงถึง property ที่เป็น Text Field นี้ที่อยู่ใน button ได้ เช่น

text_button.txtOnButton.text = “change”; แบบนี้จะทำให้เกิด Error ได้ จึงมีวิธีมานำเสนอครับ

การสร้างปุ่มที่ใส่ text field ไว้ด้านในแบบทั่วไป ซึ่ง refer ถึง text field ไม่ได้

การสร้างปุ่มที่ใส่ Text Field ไว้ด้านในแบบทั่วไป ซึ่ง refer ถึง Text Field ไม่ได้

เนื่องจากปุ่มเป็น Button จึงเข้าถึงส่วนต่างๆข้างในด้วยโค้ดไม่ได้

เนื่องจากปุ่มเป็น Button จึงเข้าถึงส่วนต่างๆข้างในด้วยโค้ดไม่ได้

เมื่อรันใช้ได้ปกติ

เมื่อรันใช้ได้ปกติ

วิธีแก้ขั้นแรกให้เรา Cut ตัว Text Field ที่อยู่ในปุ่มออกมาก่อนแล้ว New Symbol (Ctrl + F8) แล้วให้เลือกเป็น Movie Clip (ไม่ใช่ Button) จากนั้นก็นำ Text Field ก่อนหน้ามาวาง เท่านี้เราก็สามารถเข้าถึงตัว Text Field จากสคริปได้แล้วล่ะครับ เช่น mcButton.txtOnButton.text = “change”;

ให้เรา cut text field ออกไปก่อน

ให้เรา cut Text Field ออกไปก่อน

นำปุ่มเปล่ามาใส่ใน Symbol พร้อมกับ text field ก่อนหน้ามาใส่

นำปุ่มเปล่ามาใส่ใน Movie clip พร้อมกับ Text Field ก่อนหน้ามาใส่

แต่! มันจะมีปัญหาคือตัว Text Field จะบังตัวปุ่มทำให้เวลาชี้ในระยะกล่อง Text Field มันจะถือว่าไม่ได้ Hover ปุ่มอยู่เลย วิธีแก้ก็คือเขียนสคริปตั้ง Property mouseEnabled ให้เป็น  false สำหรับ Text Field ครับ เท่านี้ก็ใช้งานได้ปกติแล้วล่ะครับ

เวลาชี้แถวตัว text ปุ่มจะไม่ขยายและ cursor ไม่เปลี่ยนเป็นรูปมือ

เวลาชี้แถวตัว text ปุ่มจะไม่ขยายและ cursor ไม่เปลี่ยนเป็นรูปมือ

ใส่ ActionScript ตั้งค่า Property ของ text field เรา mouseEnabled = false;

ใส่ ActionScript ตั้งค่า Property ของ Text Field เรา mouseEnabled = false;

เมื่อรันใช้ได้ปกติ

กลับไปเป็นรูปมือดังเคย

เริ่มต้นกับ After Effect by

29
Aug
0

เกริ่นนำ
Adobe After Effect เป็นโปรแกรมสำหรับการตัดต่อ vdo หน้าที่ของมันคือการเอาภาพ, Text, หรือ VDO และ เสียง มาจัดเรียงใหม่+ใส่effectต่างๆ (จริงๆมันทำอะไรได้เยอะกว่าีนี้แหละครับ แต่ผมพึ่งใช้ได้ไม่ถึงเดือน ก็ใช้เป็นแค่นี้แหละ) ส่วนการทำ Animation อื่นๆผมไปทำใน Adobe Flash แล้วค่อย import ไฟล์.swf เข้ามาครับ

สร้าง Composition
ขั้นตอนแรกเลยคือต้องสร้าง Composition ของ vdo เราก่อนครับ ตั้ง width, height, ระยะเวลา, Frame rate ใ้ห้เรียบร้อย ซึ่งถ้าท่านใช้วิธีการทำ Animation ใน Flash แบบผม width, height, Frame rate ต้องตรงกันกับไฟล์ Flash ของเรานะครับ

import ไฟล์ ต่างๆ
ง่ายๆครับ ลากไฟล์ต่างๆเข้ามาใส่ในหน้าต่าง AE ก็จบครับ จากนั้นไฟล์ทั้งหมดก็จะปรากฏในช่องดังรูป

จัดวาง Timeline
อันนี้ก็ไม่ยากครับ เลื่อนไปเลื่อนมาเฉยๆแล้วก็ดูจาก preview เอา เนื่องจากไฟล์ swf ต้นฉบับของผมบางไฟล์มันก็มียาวมากกว่าที่ผมต้องการ เราก็ลดความยาวที่ัมันจะแสดงได้จากใน AE ครับ

Preview
ปัญหาแรกที่ผมเจอเลยคือกด preview จากปุ่มนี้แล้วมันไม่มีเสียงออกมาครับ

ซึ่งตอนหลังผมเปลี่ยนมากดอีกปุ่มนึงคือ Ram Preview เสียงก็จะออกมาครับ

แต่ว่าก็ต้องรอให้โปรแกรม render ก่อนแปปนึง ซึ่งมันจะขึ้นเป็นแทบสีเขียวๆแบบนี้ตรงแถวๆ timeline ถ้ามันยังวิ่งๆอยู่แสดงว่ายัง render ไม่เสร็จครับ ระหว่างนั้นภาพใน composition มันก็จะวิ่งไปเรื่อยๆตามที่มัน render ครั้งแรกๆก็ทำผมงงเหมือนกัน สำหรับ Ram Preview มี hotkey อยู่ครับคือปุ่ม 0 จะหยุดก็กดซ้ำครับ

Render
AE สามารถ Render ไฟล์ได้หลายแบบครับ แต่ถ้า่ท่านต้องแค่ไฟล์ vdo ธรรมดาๆ เอาไปอัพขึ้น youtube ก็เลือก File > Export > Quicktime Movie แล้วกด ok ไปเลยแบบผมก็ได้ครับ


ผลงานที่เสร็จแล้วครับ

ข้อควรรู้

  1. รูปแบบของไฟล์ที่นำมาโยนไว้ใน AE เป็นลักษณะเดียวกันกับ illustrator คือมันจะอ้างไปยัง path ของไฟล์นั้นๆ ถ้าท่านทำการเปลี่ยนแปลงอะไรกับไฟล์นอกโปรแกรม เช่น edit, เปลี่ยนชื่อ, ลบไฟล์ิทิ้ง ข้างใน AE ก็จะได้รับผลกระทบไปด้วย
  2. หน่วยของเวลาใน timeline จะมี 4 หลัก 00:00:00:00 3อันแรกคือ ชม.:นาที:วินาที แน่นอนอยู่แล้วครับ แต่ว่าหลักสุดท้ายตอนแรกผมนึกว่ามันคือเสี้ยววิ ซึ่งต้องเป็นจำนวน 0-99 แต่ไม่ครับ มันคือ Frame ต่างหาก ซึ่งในกรณีของผม set Frame rate ไว้ที่ 24 มันก็จะเป็น 0-23 ครับ

ปัญหา Click Event กับภาพ PNG พื้นหลังโปร่งใสใน Flash by

31
May
0

เคยไหมเมื่อต้องการ Import ภาพนามสกุล PNG ที่มีพื้นหลังโปร่งใส แล้วมีปัญหาเวลารับเหตุการณ์ Click Mouse ตรงที่เมื่อ Click ในส่วนที่เป็นพื้นโปร่งใสแล้วดันทำเหตุการณ์ไปด้วย เช่น

มีภาพ PNG ดังนี้

applepic

สร้างไฟล์ Flash ขึ้นมา 1 ไฟล์ และ Import ภาพแล้วนำไปทำเป็น Movie Clip แล้วตั้งชื่อว่า apple จากนั้นตั้ง Event ดังนี้

apple.addEventListener(MouseEvent.CLICK, clickApple);
function clickApple(e:MouseEvent)
{
trace("Wow!");
}

เมื่อกด Ctrl + Enter แล้วลองคลิกในส่วนที่เป็นพื้นหลังใส รอบๆ แอปเปิล สังเกตว่าจะขึ้นข้อความ Wow! ทั้งๆ ที่ไม่ได้กดในส่วนที่เป็นแอปเปิลเลย เพราะ Flash จะมองส่วนที่เป็นรูปภาพทั้งหมดไม่ว่าพื้นหลังจะใสก็ตาม ดังนั้นจากภาพตัวอย่างด้านล่างนี้ ถ้าคลิกในบริเวณในกรอบฟ้า ก็จะแสดงผล Wow! ทั้งหมด

appleborder

วิธีการทำให้ Event ตรวจจับเฉพาะส่วนของแอปเปิล นั่นคือการใช้ Class สำเร็จรูปที่มีชื่อว่า InteractivePNG ซึ่งจะทำให้เราสามารถแก้ไขปัญหาในบทความนี้ได้ ซึ่ง ดาวน์โหลดได้ที่นี่

เมื่อดาวน์โหลดมาแล้วให้แตกไฟล์และ Copy Folder ชื่อ com ไปไว้ที่เดียวกับไฟล์ Flash ที่บันทึกไว้ จากนั้นให้แก้ไข Movie Clip รูปแอปเปิ้ลที่ใช้งานด้านบนด้วยการไปที่ Library แล้วคลิกขวาที่ Movie Clip ที่ใช้งาน เลือก Properties…  ให้กดติ้กถูกที่ Export for Actionscript และในช่อง class ให้ใส่ com.mosesSupposes.bitmap.InteractivePNG ดังภาพ  (หากไม่มีรายละเอียดดังกล่าวให้แก้ไข ให้กดปุ่ม Advanced ก่อน)

screen-shot-2556-05-31-at-90338-pm

จากนั้นให้ลองกด Ctrl + Enter เพื่อรันใหม่ จะพบว่าเมื่อกดพื้นหลังใสบริเวณรอบแอปเปิลจะไม่ขึ้นข้อความ Wow! แล้ว จะขึ้นเฉพาะตอนที่กดโดนแอปเปิลเท่านั้น

ดาวน์โหลดตัวอย่างที่เสร็จสมบูรณ์ได้ที่

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ