แฟลช Tween แบบไฮสปีด ด้วย Greensock

เวลาที่ Flash Developer อย่างพวกเราคิดจะทำวัตถุให้เคลื่อนไหว จะมานั่งทำ Motion Tween อยู่มันก็ยังไงอยู่ใช่ไหมครับ ก็แหม.. เขียน ActionScript 3.0 กันมาซะขนาดนี้แล้ว จะทำให้วัตถุเคลื่อนไหวทั้งทีใช่ม้าาาา

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

ปรกติแล้วเวลาที่เราจะเลือกใช้งานสคริปในการทำให้อะไรก็แล้วแต่เคลื่อนไหวเราก็จะมีตัวเลือกอยู่หลายทางเหมือนกัน  นั่นก็คือ คลาส Tween ของ flash ที่ติดมากับแฟลชเลย ซึ่งใช้งานยุ่งยาก หลายบรรทัด  หรือ.. บางคนถึงกับ Event.ENTER_FRAME กันเลยทีเดียว ก็ มันง่ายนี่นา แต่ก็แลกมากับความเร็วนะครับ ก็ยิ่งรู้ๆกันอยู่ว่า FlashPlayer ของเรา ก็ไม่ได้เร็วอะไรมากมายขนาดนั้น เพราะทุกอย่าง ถูกโยนภาระให้ CPU ทำงานไปเต็มๆเลย  น่าสงสาร CPU จริงๆ  ไอ้ครั้นว่าจะซื้อ CPU แรงๆก็ไม่มีเงินซะด้วย แถมไม่ใช่ทางแก้ปัญหา เพราะถึงเครื่องเราจะแรง แต่พอ  user มาดู ก็ยังช้าเหมือนเดิม  นี่ถือเป็นอีกความท้าทายนึงเลยที่เราต้องจำกัดงบประมาณให้แฟลชกิน CPU น้อยๆ กินแรมน้อยๆนะลูก อย่าตระกะแหลก CPU  เดี่ยวชาวบ้านจะว่าเอาได้ว่าเป็น Programmer ไม่มีสมบัติผู้ดี

เอาหละโม้กันมายาว อีกทางเลือกหนึ่งที่หลายคนเลือกนั่นก็คือ Tweener เย้… เป็นคลาสที่ดี และผมหลงคิดว่ามันเป็นพระเอกในใจผมเสมอมา
แต่พอมาถึงวันนี้ผมขอนอกใจ Tweener ซักครั้งเมื่อผมได้พบกับอะไรที่มัน Perfect กว่า นั่นก็คือ……  Tweening Platform จากถุงเท้าเขียว  GreenSock หรือไปเยี่ยมชมเว็บไซต์ได้ที่
http://blog.greensock.com/

คลาส Tween ของถุงเท้าเขียว ถ้าเทียบกับผู้หญิงก็เป็นหญิงที่เพียบพร้อมไปด้วยความสามารถ รวดเร็ว และทาน CPU อย่างพอเพียง ช่างน่ารักจริงๆ

หากใครแอบคลิกลิงค์จากข้างบน จะเห็นว่า GreenSock มี product มากมายหลายตัวด้วยกัน  นั่นก็คือ

• TweenNano
• TweenLite
• TweenMax
• TimelineLite
• TimelineMax

สังเกตุแต่ละรุ่น ก็จะมีรุ่นเล็ก รุ่นกลาง รุ่นใหญ่ ยังกะบ้านทรายทอง มีหญิงเล็ก หญิงใหญ่ หม่อมแม่ ก็ว่ากันไป
เท่าที่เราเห็นจะมีสองกลุ่มใหญ่ๆก็คือ  Tween และ Timeline โดยแบ่งเป็นรุ่นๆอย่างที่บอกไป

โดยสรุป

TweenNano หญิงเล็ก จะเป็นรุ่น จิ๋วที่สุดในบรรดาพี่น้องบ้านทรายทอง โดยจะมีขนาดไฟล์ที่เล็กจิ๋ว เพียง 1.6kb เท่านั้นเอง และมี Methode ให้เพียงพอต่อการใช้งานในระดับงานที่ไม่สูงมาก และไม่สามารถใช้งาน plugin ได้ (อ๊ะ แอบบอกซะละว่ามี plugin)

TweenLite เป็นหญิงใหญ่ ที่ขนาดก็เบาสมชื่อ 4.7kb มากกว่ารุ่นเล็ก 3kb ซึ่งรุ่นนี้นอกจากจะมีความสามารถมากกว่ารุ่น Nano แล้ว ยังถูก Optimize โค้ดมาอย่างดี ทำให้รุ่นนี้ มีความเร็วในการทำงานที่มากกว่ารุ่น Nano

TweenMax หม่อมแม่ตัวแรง ซึ่งแน่นอน แรง …ที่มีความสามารถเพียบพร้อมทุกประการ เรียกได้ว่าถ้าไม่สนใจน้ำหนักเกินแล้ว เป็นตัวที่ครอบคลุมทุกสิ่งอย่างมาไว้แล้ว รวมถึงมีความเร็วที่ได้มาจากการ extends ตัว TweenLite แล้ว ยังใช้งาน plugin ได้เยอะแยะมากมายด้วย  (ไว้มาดู Plugin แล้วจะน้ำลายไหล)

ย้อนกลับไปบรรทัดแรกๆ ที่ผมบอกเอาไว้ว่า เมิน Tweener ไปได้เลยในเรื่องความเร็ว ซึ่งมีการสร้างแฟลชสำหรับไว้ทดสอบความเร็วที่

http://blog.greensock.com/tweening-speed-test/

เปิดแล้วทดสอบกันดีๆนะครับ เพราะว่าเป็นการทดสอบที่โหดมหาศาลโดยการทดสอบ Tween ของ ActionScript 3.0 ไว้ที่ประมาณ 2500 วัตถุเลยทีเดียว  หากใจไม่กล้าพอ แนะนำอย่าเลือกทดสอบเมียเก่าอย่าง Tweener ด้วย 2500 ชิ้น เพราะว่าอาจจะทำให้เบราเซอร์ค้างกันเลยทีเดียว

อ้ะ ให้เวลาไปทดสอบ 5 นาทีแล้วกลับมาอ่านต่อ ………….

1

2

3

4

5 นาที

อ้าว กลับมาละ เป็นยังไงครับ มันช่างเป็นความเร็วที่ต่างกันราวฟ้ากับเหว

งั้นต่อไปมาดูเรื่องความสามารถกันต่อ จะขออ้างอิงจากหม่อมแม่ตัวแรง TweenMax นะครับ ยิ่งได้รู้เรื่องความสามารถก็ยิ่งทำให้หลงรักกันไปใหญ่
ลองมาดูกันเล่นๆ

หม่อมแม่นั้น  สามารถ….

Tween ได้ (แน่นอน จะบอกทำไมฟะเนี่ยะ)
ฮ่าๆ ไม่บอกก็รู้มันก็ต้อง Tween ทั่วไปได้ เปลี่ยนสีสันต่างๆ ใช้งาน easing ได้ ไม่ต่างจากทั่วไปหรอกครับ

reverse  เล่นย้อนกลับได้  อื้อหือ มีการเล่น Tween ย้อนกลับได้ด้วย

pause  หยุดเวลาได้……. ที่สำคัญ หยุดเวลา Tween ของทุกชิ้นได้เลย

Slowmotion ได้…  เจ๋งใช่ไหมครับ เราสามารถตั้งให้ช่วงเวลาของ Tween ช้าลงได้ ทำให้ Motion ของเราที่กำลังเล่นอยู่ สามารถจะ Slow ได้ทุกเวลา

เร่ง Speed ได้ แน่นอน เร่ง speed ได้ด้วย นอกจากจะ slow แล้ว

นี่คือสิ่งที่แตกต่าง ไม่ขอพูดถึงการทำงานพื้นฐานที่คิดว่าควรจะมี เช่นการ callback ให้ทำอะไรต่อหลังจาก Tween จบแล้วก็มีให้อยู่แล้วแน่นอน

และที่สำคัญนั่นก็คือ Plugin ซึ่ง Plugin แต่ละตัวนี่สุดยอดมากยกตัวอย่างเช่น

Physic  Plugin ซึ่งปรกติแล้วเราจะใช้งาน Tween คลาสอื่นๆ ก็แค่ไหลไปมา แค่นี่ถึงกับมี physic กับการ Tween ได้เลยด้วย

MotionBlur  ซึ่งจะเบลอในทิศทางที่วัตถุเคลื่อนที่ ให้สมจริงที่สุด

แต่ Plugin ไม่ได้จะใช้กันง่ายๆนะครับ  ต้องมีฐานนะอย่างเราๆเท่านั้น (อิอิ)เท่านั้น ถึงจะได้มีโอกาสได้แตะต้อง เพราะว่าทางเว็ปไซต์กำหนดว่า ต้องบริจาค กี่ $ ถึงจะได้ใช้ Bonus Plugin อะไรบ้าง ซึ่งแบ่งเป็นขั้นๆไป ตามนี้เลย

http://blog.greensock.com/club/

สูงสุดก็แค่ 99$ หรือประมาณ 3พันกว่าบาทเท่านั้นเอง  แหม…. โนเกียร์  ไอพอด ไอโฟน ก็ยังซื้อกันได้.. กินเหล้าทีเป็นพัน  คาราโอเกะเป็นแสน (เอ๊ะ!! คุ้นๆ) ก็ยังยอมจ่ายกันได้ แค่นี้ถ้าจะใช้งานจริงๆคงไม่ถึงกับขนหน้าแข้งร่วง  (แต่ใครหาโหลดเถื่อนได้ส่งต่อมาด้วยละกัน หลังไมค์นะ นะ นะ)

เอาหละ ไปเล่นกันเอง  วันนี้ไม่มีอารมณ์เขียนโค้ดให้ดู….  ที่นั่งเขียนอยู่นี่ก็ ตี 2 แล้วเนี่ยะ จะเอาโค้ดอะไรกันตอนนี้

มาๆ ต่อด้วย สองพี่น้อง ที่จะมาแนะนำให้รู้จัก

TimelineLite  และ TimelineMax

สองพี่น้องนี้จะเป็นใครไปไม่ได้นอกจาก

TimelineLite  ชายน้อย แห่งบ้านทรายทอง และ

TimelineMax ชายกลาง ผู้หล่อเลิศ (ศรรามแสดง นะ ยุคนั้น)

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

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

หรือแม้กระทั่ง กระโดดไปยังช่วงเวลาต่างๆของการ Tween (ที่เขียนด้วยโค้ดนะอย่าลืม ถ้าทำ MotionTween บน Timeline หนะมันกระโดดไปไหนมาได้ได้อยุ่แล้ว)

ซึ่งจะต่างจาก Tweener ที่ไม่สามารถควบคุมได้เลย

หากใครคิดอยากเห็นตัวอย่างให้เข้าไปที่เว็บไซต์หน้าแรกของ GreenSock ได้เลยที่

http://blog.greensock.com

แล้วอย่างเพิ่งเปิดลิงค์ไหน ให้ดูคุณสมบัติเพลินๆบน Head Banner ก่อน จากนั้นเมื่อ banner เล่นจบ เราจะพบว่ามี Seeking Bar มาให้เราได้ลองลากดูอยู่ด้านล่าง

นั่นแหละครับคือผลงานของคลาส Timeline

เราจะเห็นว่าคลาสนี้ เป็นคลาส Tween ที่ถูกออกแบบมาอย่างดี  และมีการควบคุมช่วงเวลาเอง ไม่ใช่เป็นการปล่อยไหลเหมือน Enter Frame
ทำให้มีความเร็วสูง  เพราะจะสามารถกระโดดไปยังตำแหน่งของวัตถุตามช่วงเวลาได้เลย ต่างจาก Enter frame ที่ต้องรอให้มัน Tween ไปเองตามช่วงเวลาจริง

ความเร็วก็เร็ว แรง..

มาถึงตอนนี้บอกได้คำเดียวว่า หากว่า คลาสฟรีๆอย่าง Tweener ไม่มีการพัฒนา ก็จะเป็นคลาสตายด้าน ที่นานวันก็จะถูก Tween Platfom  จาก ถุงเท้าเขียว GreenSock มาแทนที่อย่างแน่นอน คอนเฟิร์ม