multiple tweens

[reporter]

Hi,

I am pretty new to actionscript. I am trying to have multiple tweens in the actionscript but they are interfering with each other. I have 2 animated cars tweening onto the artboard. I then want them to remain and to have text fade in and out above them.

 

I got the cars working but not the text. It gives me errors saying there are undefined properties - mytimeline, Fade, TweenLiteAlign. Anybody have any suggestions? Thanks

 

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

TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44});
TweenLite.from(accord, 2, {delay:2, x:"672", y:"-158", width:69, height:44});

myTimeline.insertMultiple([new TweenLite(text1, 1, {type:Fade}),
                            new TweenLite(text2, 1, {delay:2, type:Fade}),
                            new TweenLite(text3, 1, {delay:4, type:Fade})],
                            0,
                            TweenLiteAlign.START,
                            3);

[Carl]

Hi and welcome to the GreenSock forums.

 

It looks like you have a few problems..

 

1: prior to doing myTimeline.insertMultiple() you need to first create a TimelineLite with

 

 

var myTimeline:TimelineLite = new TimelineLite();
 

2: setting "type:Fade" isn't part of the API. I think you meant to do

 

 

 new TweenLite(text2, 1, {delay:2, alpha:0})
 

3: TweenLiteAlign.START should be TweenAlign.START

 

I think you may be using the older version of our code, version 11. Version 12 has a lot of new features and will perform much better. You can get the latest code by clicking the "get GSAP" button at the top of this page.

 

For instance, your insertMultiple() code can be abbreviated using the add() method like this:

 

 

tl.add([tween1, tween2, tween3], 0 , "start", 3);
 

If you are just starting out, I would strongly suggest starting with v12, and be sure to consult the v12 docs (link in the left nav).

[reporter]

Hi,

Thanks for the help. It stopped the animation from flickering. I've been copying and pasting code that looks appropriate to try and get what I want.

 

Is there a way to designate that the rotating tweens start after the cars have stopped? I'm not sure if there is a place to put a Frame# or something.

 

Also the rotating tweens aren't fading from one to the next. I only get the first one to show.

 

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


//TweenLite.to(accord, 3, {alpha:0.5});
TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44});
TweenLite.from(accord, 2, {delay:2, x:"672", y:"-158", width:69, height:44});

//var myTimeline:TimelineMax = new TimelineMax({tweens:[new TweenLite(text1, 1, {type:Fade}), TweenMax.to(text2, 1, {type:Fade})], align:TweenAlign.SEQUENCE, onComplete:myFunction});

/*var myTimeline:TimelineLite = new TimelineLite({tweens:[new TweenLite(text1, 1, {type:Fade}),*/
var myTimeline:TimelineLite = new TimelineLite();


myTimeline.insertMultiple([new TweenLite(text1, 1, {delay:2, alpha:0}),
                            new TweenLite(text2, 1, {delay:4, alpha:0}),
                            new TweenLite(text3, 1, {delay:6, alpha:0})],
                            0,
                            TweenAlign.START,
                            3);

[Carl]

Yes, in order to efficiently schedule the text tweens to start after the car tweens, just put the car tweens into the timeline as well.

 

 

 

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append(TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44}));
myTimeline.append(TweenLite.from(accord, 2, {x:"672", y:"-158", width:69, height:44}));


myTimeline.insertMultiple([new TweenLite(text1, 1, {delay:2, alpha:0}),
                            new TweenLite(text2, 1, {delay:4, alpha:0}),
                            new TweenLite(text3, 1, {delay:6, alpha:0})],
                            0,
                            TweenAlign.START,
                            3);
 

Sorry, I don't see any rotation in your tweens, are you referring to the text1, text2, text3 tweens?  

 

If you upload your existing FLA (zipped) I can convert the code to the much easier v12 syntax.

I think you will have a much easier time with it. There are a lot of good examples and info in the v12 TimelineLite docs that should help you get up to speed.

[reporter]

My .fla file was too big to attach even when I zipped it. Here's the code I was trying. I got some of it from the dir you linked earlier. It still keeps blinking.

 

The text is supposed to appear above the cars after they stop and fade in and out in sequence.

 

 

//import the GreenSock classes

import com.greensock.*;

import com.greensock.easing.*;

 

var myTimeline:TimelineLite = new TimelineLite();

var textFields = [tf1, tf2, tf3, tf4];

 

myTimeline.append(TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44}));

myTimeline.append(TweenLite.from(accord, 2, {delay:2, x:"672", y:"-158", width:69, height:44}));

 

//var textFields = [tf1, tf2, tf3, tf4];

//myTimeline.staggerTo(textFields, 1, {y:"+=150", ease:Cubic.easeIn}, 0.2);

 

//var myTimeline:TimelineLite = new TimelineLite({tweens:[new TweenLite(text1, 1, {type:Fade});

myTimeline.insertMultiple(new TweenLite(tf1, 1, {alpha:1}, {alpha:0}, 0.2));

        new TweenLite(tf2, 1, {alpha:1}, {alpha:0}, 0.2);

        new TweenLite(tf3, 1, {alpha:1}, {alpha:0}, 0.2);

        new TweenLite(tf4, 1, {alpha:1}, {alpha:0}, 0.2);

        0,

        TweenAlign.START,

        3);

[Carl]

Yeah, it seems you are trying to use a TweenLite tween to accomplish the task of a TweenMax.fromTo() which allows you to set start AND end values.

 

also tweens inside insertMultiple() need to be in an array [tween1, tween2, tween3] *note the brackets. Also they need to be separated by commas, not semi-colons. If you want the text tweens to be added after the other tweens, use appendMultiple().

 

BAD

 

 

myTimeline.insertMultiple(new TweenLite(tf1, 1, {alpha:1}, {alpha:0}, 0.2));
        new TweenLite(tf2, 1, {alpha:1}, {alpha:0}, 0.2);
        new TweenLite(tf3, 1, {alpha:1}, {alpha:0}, 0.2);
        new TweenLite(tf4, 1, {alpha:1}, {alpha:0}, 0.2);
        0,
        TweenAlign.START,
        3);
 

 

BETTER

 

 

myTimeline.appendMultiple([

        TweenMax.fromTo(tf1, 1, {alpha:1}, {alpha:0}, 0.2),
        TweenMax.fromTo(tf2, 1, {alpha:1}, {alpha:0}, 0.2),
        TweenMax.fromTo(tf3, 1, {alpha:1}, {alpha:0}, 0.2),
        TweenMax.fromTo(tf4, 1, {alpha:1}, {alpha:0}, 0.2)]
        0,
        TweenAlign.START,
        3);
 

 

Again, v12 has a much easier to grasp syntax. If you need more help, please upload a file. If your file is too big just use a 3rd party service like http://ge.tt/ (free, no registration). Its much easier to help and provide accurate solutions if we have something to test with.

[reporter]

Hi,

I used ge.tt to upload my flash file. Here's the link. http://ge.tt/6WvK1xa

I tried your fixes but still have problems.

 

My co-worker and I are new to this. He is trying to get the text to tween onto the stage and I'm trying to get it to fade in and out. 

 

Is there a big difference in multiple tweens actionscript for these actions other than I would be using a TweenMax.fromTo and he would be using a Tweenlite.from? I'm hoping to get the fades to work and just use the same multiple tween principle for his tweening of text onto the stage.

 

Here's my actionscript if the link doesn't work. 

Thanks alot.

 

 

//import the GreenSock classes

import com.greensock.*;

import com.greensock.easing.*;

 

var myTimeline:TimelineLite = new TimelineLite();

var textFields = [tf1, tf2, tf3, tf4];

 

myTimeline.append(TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44}));

myTimeline.append(TweenLite.from(accord, 2, {x:"672", y:"-158", width:69, height:44}));

 

/*myTimeline.insertMultiple([new TweenLite(tf1, 1, {delay:2, alpha:0}),

        new TweenLite(tf2, 1, {delay:4, alpha:0}),

        new TweenLite(tf3, 1, {delay:6, alpha:0})],

        0,

        TweenAlign.START,

        3);*/

        

myTimeline.appendMultiple([

 

        TweenMax.fromTo(tf1, 1, {alpha:1}, {alpha:0}, 0.2),

        TweenMax.fromTo(tf2, 1, {alpha:1}, {alpha:0}, 0.2),

        TweenMax.fromTo(tf3, 1, {alpha:1}, {alpha:0}, 0.2),

        TweenMax.fromTo(tf4, 1, {alpha:1}, {alpha:0}, 0.2)]

        0,

        TweenAlign.START,

        3);

[Carl]

ok, I was able to work on your file.

A big problem in your file was that your ActionScript code was on frame 1, but Textfields you were trying to animate were on frames 2, 3, 4, and 5.

 

When using scripted animation, you need all the assets to be on the same frame. Code on frame 1 can't target and object on frame 5.

 

I attached a working version with v12 (current version) of the platform. Here is the code:

 

//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;


var myTimeline:TimelineLite = new TimelineLite();
var textFields = [tf1, tf2, tf3, tf4];


myTimeline.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44})
        .from(accord, 2, {x:"672", y:"-158", width:69, height:44})
        .appendMultiple([
            TweenMax.fromTo(tf1, 1, {alpha:0}, {alpha:1, repeat:1, repeatDelay:0.5, yoyo:true}),
            TweenMax.fromTo(tf2, 1, {alpha:0}, {alpha:1, repeat:1, repeatDelay:0.5, yoyo:true}),
            TweenMax.fromTo(tf3, 1, {alpha:0}, {alpha:1, repeat:1, repeatDelay:0.5, yoyo:true}),
            TweenMax.fromTo(tf4, 1, {alpha:0}, {alpha:1, repeat:1, repeatDelay:0.5, yoyo:true})],
        0,
        TweenAlign.START,
        2);
 

Let us know if you need more help. 

hondav6_GSAPv12_CS5.zip

[reporter]

Hi,

Thanks for all the help. The file works great! However, I need to keep the file under 40k.

 

I shrank the image files and re-exported. It got down to about 63k. It appears the import greensock classes code automatically adds 20k to my file size.

 

Are there other ways to make the file smaller but still use the greensock classes code?

[jamiejefferson]

Short answer:

If possible, try and remove all usage of TweenMax or TimelineMax. If you limit usage to TweenLite and TimelineLite (although removing timeline use entirely would also help...) then the GSAP code required to be embedded in your swf will be reduced, along with the filesize.

 

This might be challenging though, as you would need to adjust your tweens for this (e.g. repeat and repeatDelay are only available in Max, but could be replaced with an onComplete to restart the tween).

[Carl]

If you remove TweenMax, you can save another ~10kb.

 

In the file I sent I used TweenMax for its ability to repeat tweens. So, as an alternative you can just manually create tweens that reverse the fade in like so:

 

 

 

//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;


var myTimeline:TimelineLite = new TimelineLite();
var textFields = [tf1, tf2, tf3, tf4];






myTimeline.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44})
        .from(accord, 2, {x:"672", y:"-158", width:69, height:44})
        .fromTo(tf1, 1, {alpha:0}, {alpha:1})
        .to(tf1, 1, {alpha:0}, "+=0.5")//start this tween 0.5 seconds after the previous tween
        .fromTo(tf2, 1, {alpha:0}, {alpha:1})
        .to(tf2, 1, {alpha:0}, "+=0.5")
        .fromTo(tf3, 1, {alpha:0}, {alpha:1})
        .to(tf3, 1, {alpha:0}, "+=0.5")
        .fromTo(tf4, 1, {alpha:0}, {alpha:1})
        .to(tf4, 1, {alpha:0}, "+=0.5");
 

Using this modified code, the file you sent me dropped from 163kb to 153kb. 

 

If you need more, reduction you could lose TimelineLite and just use delays

 

 

 

//import the GreenSock classes
import com.greensock.*;
import com.greensock.easing.*;


var myTimeline:TimelineLite = new TimelineLite();
var textFields = [tf1, tf2, tf3, tf4];


var delay = 0;


TweenLite.from(accordcoupe, 2, {x:"-700", y:"-158", width:69, height:44})
delay+=2
TweenLite.from(accord, 2, {x:"672", y:"-158", width:69, height:44, delay:delay})
delay+=2
TweenLite.fromTo(tf1, 1, {alpha:0}, {alpha:1, delay:delay})
delay+=1;
TweenLite.to(tf1, 1, {alpha:0, delay:delay})
delay+=1;
TweenLite.fromTo(tf2, 1, {alpha:0}, {alpha:1, delay:delay})
delay+=1;
TweenLite.to(tf2, 1, {alpha:0, delay:delay})
delay+=1;
TweenLite.fromTo(tf3, 1, {alpha:0}, {alpha:1, delay:delay})
delay+=1;
TweenLite.to(tf3, 1, {alpha:0, delay:delay})
delay+=1;
TweenLite.fromTo(tf4, 1, {alpha:0}, {alpha:1, delay:delay})
delay+=1;
TweenLite.to(tf4, 1, {alpha:0, delay:delay});
 

this brings that file to 141kb but you lose the conveniences of the timeline. If that's the only animation you have, you can probably due without it. 

 

Notice each time I do 

 

delay+=someNumber

someNumber is the duration of the previous tween. It allows you to keep track of the overall delay without doing a lot of math.

 

If you have optimized all the images, I really don't know what else you can do besides setting your font to _sans which will prevent Flash from embedding your font of choice. 

[reporter]

Thanks for the suggestions. I'll try them out. You have helped out alot.