CONTENTS

• Khái niệm Tweening trong AS3

• Greenshock Tweening Platform’s API

• Sử dụng TweenLite, TweenMax, TimelineLite và TimelineMax

• Nâng cấp các sản phẩm game và bài tập

Khái niệm Tweening

Tweening là gì ?Viết tắt của in-bettweening, quá trình sinh các khung hình trung gian giữa 2 hình để có được sự chuyển động mượt từ hình 1 tới hình 2.

Các phương pháp tạo tween đã học

Sử dụng Timeline để tạo ra:

Shape Tween

MotionTween

Classic Tween

Sử dụng Event.ENTER_FRAME và Timer tạo ra các loại tween trong:

Chuyển động đềuChuyển động có gia tốc (nhanh dần đều, chậm dần đều)…

Nâng cấp Tween Effects

Bạn có giải pháp gì cho những vấn đề sau ?

- Chuyển động theo quỹ đạo cong bất kỳ.

- Làm các hiệu ứng chuyển động ease trong chuyển động bằng timeline bằng code.

- Hiệu ứng fade in và fade out.

- Chuyển màu sắc vật thể từ màu này sang màu khác.

- Hiệu ứng blur tăng dần và giảm dần.

- Hiệu ứng tween thay đổi độ sáng đối tượng.

Greenshock Tweenning Platform API

• API làm tween phổ biến nhất hiện tại.

• API được thiết kế để làm đơn giản hóa việc làm tweening bằng code.

• Bao gồm:TweenLite & TweenMax

TimelineLite and TimelineMax

…

Ví dụ: Greenshock Tweenning Platform API

Sử dụng TweenLite và TweenMax

• Download code: http://www.tweenlite.com/

• Cài đặt code.• Import thư viện API.• Cú pháp TweenLite (basic).• Cú pháp TweenMax

• onComplete, • onStart, • onUpdate, • onCompleteParams, • ease, • paused,

• … more

Ví dụ:TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction});function myFunction():void {    trace("tween finished");}TweenMax.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction});function myFunction():void {    trace("tween finished");}

Các thuộc tính đặc biệt

Điều khiển TweenLite và TweenMax

var myTween:TweenLite = new TweenLite (mc, 1, {x:100, y:100}); myTween.pause(); // Dừng chuyển động tạm thời.

myTween.resume(); // tiếp tục (trực tiếp, đảo ngược hoặc không )

myTween.reverse(); // đảo ngược chuyển động

myTween.play(); // ngược với pause – tiếp tục thực hiện chuyển động

myTween.restart();// khởi động lại tween – chạy lại từ đầu

myTween.kill(); // xóa chuyển động myTween

TweenLite.killTweensOf(mc); // xoa toàn bộ tween của đối tượng chuyển động.

Cách sử dụng TimeLineLite và TimelineMax

• TimelineLite và timelinemax thực chất là sử dụng nhiều tweenlite và tweenmax

• private var myTween4:TimelineMax;

• myTween4 = newTimelineMax({onComplete:FinishTimeline,onReverseComplete:FinishReverse});

• Khởi tạo 1 đối tượng myTween

• Sử dụng thuộc tính insert(chèn vào), append( nối thêm) để sử dụng

• myTween4.append(new TweenLite(_box1, 1 , {x:100, y:50, onComplete:RotationBox}));

• // tạo 1 tweenlite mới append vào đối tượng timelinelite

• myTween4.append(new TweenLite(_box2, 1 , {x:200, y:50}));

• myTween4.append(new TweenLite(_box3, 1 , {x:300, y:50} ));

• // có thể append cho nhiều đối tượng cùng 1 lúc mà ko phải khai báo như trên

• myTween4.appendMultiple([ new TweenLite(_box1,1, {alpha:0 } ),

new TweenLite(_box2,1, {alpha:0 } ), new TweenLite(_box3,1, {alpha:0 } )], 1 , TweenAlign.SEQUENCE, 0.2);

• TweenAlign.SEQUENCE : theo trình tự, hết thì mới bắt đầu tiếp

• TweenAlign.START : bắt đầu luôn, khi 1 cái bắt đầu thì các cái tiếp theo cũng bắt đầu mà ko cần biết cái trước xong chưa

• TweenAlign.NORMAL: chế độ bình thường

• Các bạn có thể tham khảo tại http://www.greensock.com/as/docs/tween/

Các thuộc tính đặc biệt

• onStartParams • onUpdate • onUpdateParams • onComplete• onCompleteParams• onReverseComplete• onReverseCompleteParams• onRepeat• onRepeatParams• Điều khiển TimeLineLite và TimeLineMax

myTween.pause(); // Dừng chuyển động tạm thời.myTween.resume(); // tiếp tục (trực tiếp, đảo ngược hoặc không )myTween.reverse(); // đảo ngược chuyển động myTween.play(); // ngược với pause – tiếp tục thực hiện chuyển động myTween.restart();// khởi động lại tween – chạy lại từ đầu myTween.kill(); // xóa chuyển động myTween

Bài tập

• Sử dụng Tween để làm đoạn code chia bài

• Tìm hiểu các sử dụng plugin trong TweenLite.

• Tham khảo thêm các tính năng khác của TweenLite, TweenMax, TimelineLite, TimelineMax … tại : http://www.greensock.com