Lesson 18: Tween Effect

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 đều
Chuyể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

Lesson 18: Tween Effect

More Related Content

Viewers also liked (12)

More from Hallo Patidu (16)

Lesson 18: Tween Effect