Jump to content
Search Community

Reducing TweenLite's Footprint

sondanz test
Moderator Tag

Recommended Posts

Is there any way I can reduce the size of TweenLite's footprint within my Flash banner?

 

On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. 

 

I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite.

 

Am I importing something that I don't need? Here's my AS2.0 TweenLite Code:

// import the tween engine
import com.greensock.*;
import com.greensock.easing.*;

//////////////////////////////////////////////////////////////////////////

// define the timeline
var timeline:TimelineLite = new TimelineLite({onComplete:repeat});

// define repeat function variables
var nPlays = 0;
var totPlays = 2;

// repeat timeline if played less than three times
function repeat() {
	if (nPlays < totPlays) {
		timeline.restart();
		nPlays++;
	}
}

//////////////////////////////////////////////////////////////////////////

// get your tween on
timeline.appendMultiple([
	TweenLite.from(text1, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}),
	TweenLite.from(text1b, 	1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}),

	TweenLite.to(text1, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}),
	TweenLite.to(bg1, 	1, {_alpha:0, ease:Expo.easeOut, delay:2.5}),
	TweenLite.from(text2, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}),
	
	TweenLite.to(text2, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}),
	TweenLite.from(text3, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}),

	TweenLite.to(text3, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}),
	TweenLite.from(text4, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}),
	TweenLite.from(stall, 	2, {_y:"10", delay:10})]);

stop();

 

Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice.

// import the tween engine
import com.greensock.*;
import com.greensock.easing.*;

//////////////////////////////////////////////////////////////////////////

// define repeat function variables
var nPlays = 0;
var totPlays = 2;

// repeat timeline if played less than three times
function repeat() {
	if (nPlays < totPlays) {
		//initBanner.start();
		initBanner();
		nPlays++;
	}
}

//////////////////////////////////////////////////////////////////////////

function initBanner({onComplete:repeat}) { //the issue is with this line
	
TweenNano.from(text1, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0});
TweenNano.from(text1b, 	1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0});

TweenNano.to(text1, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0});
TweenNano.to(bg1, 	1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0});
TweenNano.from(text2,   1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0});
	
TweenNano.to(text2, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0});
TweenNano.from(text3, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0});

TweenNano.to(text3, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0});
TweenNano.from(text4, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0});
TweenNano.from(stall, 	2, {_y:"10", delay:10, overwrite:0});
}

initBanner();

stop();

 

Link to comment
Share on other sites

Yeah, if filesize is your main concern, you can't get better than TweenNano. TweenLite really can't be made much smaller, we've gone to great lengths to get it to its current size. Check out this post to see how to make TweenNano sequences play multiple times: http://forums.greensock.com/topic/6190-tween-nano-looping/#entry22082 

 

 

If you need an animation to play only 2 times. You can just use a counter in your onComplete callback of your last tween
 
var count = 0;


//bunch of tweens


//last tween


TweenNano.to(mc, 1, {_x:200, onComplete:loop});


function loop() {
count++;
if (count != 2){
  //code to replay
}
}

let us know if you need more help with that.

Link to comment
Share on other sites

Thanks Carl for your suggestions and all the wonderful video tutorials you've shared over the years. Unfortunately, this code only seems to loop the final tween, not the entire group. 

 

(I read the other thread you linked to earlier this week. It causes a hiccup as you jump from an empty keyframe, so that creates another issue.)

import com.greensock.*;
import com.greensock.easing.*;

function initBanner() {
	
	TweenNano.from(text1, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0});
	TweenNano.from(text1b, 	1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0});

	TweenNano.to(text1, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0});
	TweenNano.to(bg1, 	1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0});
	TweenNano.from(text2, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0});
	
	TweenNano.to(text2, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0});
	TweenNano.from(text3, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0});

	TweenNano.to(text3, 	1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0});
	TweenNano.from(text4, 	1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0});
	TweenNano.from(stall, 	2, {_y:"10", delay:10, overwrite:0, onComplete:loop});
}

initBanner();

// function to repeat twice
var count = 0;

function loop() {
count++;
	if (count != 2){
		initBanner();  //WHAT AM I DOING WRONG HERE?
		trace("ahhhh");
	}
}
Link to comment
Share on other sites

As mentioned in the other thread, you will need to reset all the values that are tweened.

 

For instance in initBanner() you have 2 tweens that affect the alpha of text1

 

first you tween from  _alpha:0

then you tween to _alpha:0

 

I'm sure that works, but the second time that function runs, the _alpha of text1 is already 0, so tweening from _alpha:0 doesn't do anything. Remember in from() tweens the ending value is the current value. On the second run of initBanner the starting alpha of text1 is the same as the ending alpha, 0.

 

So you are going to have to have to add code that resets all the properties to what they were prior to initBanner running.

 

Here is some code that makes it easy to record all the common transforms (_x, _y, _xscale, _yscale, etc) and re-apply them on each loop

 

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.geom.Matrix;


//record original transform matrix of each mc
var mc1Matrix:Matrix = mc1.transform.matrix;
var mc2Matrix:Matrix = mc2.transform.matrix;


stop();
function initBanner() {
var delay:Number = 0;
//reset transformations on both mcs
mc1.transform.matrix = mc1Matrix;
mc2.transform.matrix = mc2Matrix;


TweenNano.to(mc1, 1, {_x:300});
delay +=  1.5;
TweenNano.to(mc1, 1, {_xscale:2, _yscale:2, delay:delay, overwrite:false});
delay +=  1;
TweenNano.to(mc2, 2, {_x:400, delay:delay, onComplete:loop});


}


// function to repeat twice
var count = 0;


function loop() {
count++;
if (count != 2) {
initBanner();//WHAT AM I DOING WRONG HERE?
trace("ahhhh");
}
}


initBanner();

I have attached a cs5 fla.

 

For alpha you will have to store those values in a separate variable or just set the _alpha of all the clips back to 1

 

 

 

 

 

 

TweenNano_recordMatrix_AS2_CS5.zip

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...