Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cbum7210

tweenmax combos

Recommended Posts

:D:D:D Hi all, I am new to greensock and just got the club greensock, I am tryin to make a xmas text animation and the problem i am running into is combining tweens (its been several years since ive done coding with flash, and AS3 is new) anyhow, its basic, id like to have several lines of text run onto stage, pause for few seconds, then explode, pause a few seconds and then start over

I looked at the timeline Max and the insertMultiple, but have no idea on how I can incorpate the exploding code into that

 

code for runin is

var description_stf:SplitTextField = new SplitTextField(description_txt);

 

var tl:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2});

tl.timeScale = 1

tl.insertMultiple(TweenMax.allTo(description_stf.textFields, 0, {alpha:0}))

tl.insertMultiple(TweenMax.allFrom(description_stf.textFields, .5, {scaleX:1.4, scaleY:1.4, y:"-12", blurFilter:{blurX:10, blurY:5}, glowFilter: {color:0xffffff, blurX:20, blurY:20, strength:6, alpha:2, quality:1, ease:Quad.easeIn}}, 0.02));

tl.insertMultiple(TweenMax.allTo(description_stf.textFields, .1, {alpha:1, delay:0}, 0.02));

 

and the explode code is

 

function explode(){

var XmasText_stf:SplitTextField = new SplitTextField(XmasText);

 

//explode the words outward using the physics2D feature of TweenLite/Max

TweenPlugin.activate([Physics2DPlugin]);

var i:int = XmasText_stf.textFields.length;

var explodeOrigin:Point = new Point(XmasText_stf.width * 0.4, XmasText_stf.height + 100);

while (i--) {

var angle:Number = Math.atan2(XmasText_stf.textFields.y - explodeOrigin.y, XmasText_stf.textFields.x - explodeOrigin.x) * 180 / Math.PI;

TweenMax.to(XmasText_stf.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});

}

}

;

 

At the moment my project looks like this

//split myTextField1 by characters (the default type of split)

var stf:SplitTextField = new SplitTextField(XmasText, SplitTextField.TYPE_WORDS);

 

for (var i:int = stf.textFields.length - 1; i > -1; i--) {

TweenMax.from(stf.textFields, 1, {blurFilter:{blurX:10, blurY:10}, x:Math.random() * 650 - 100, y:Math.random() * 350 - 100, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 360 - 180, autoAlpha:0, delay:Math.random() * 0.5, ease:Quad.easeIn});

}

TweenMax.delayedCall(3, explode);

 

 

function explode(){

var XmasText_stf:SplitTextField = new SplitTextField(XmasText);

 

//explode the words outward using the physics2D feature of TweenLite/Max

TweenPlugin.activate([Physics2DPlugin]);

var i:int = XmasText_stf.textFields.length;

var explodeOrigin:Point = new Point(XmasText_stf.width * 0.4, XmasText_stf.height + 100);

while (i--) {

var angle:Number = Math.atan2(XmasText_stf.textFields.y - explodeOrigin.y, XmasText_stf.textFields.x - explodeOrigin.x) * 180 / Math.PI;

TweenMax.to(XmasText_stf.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});

}

}

;

but it doesnt work, the text runs in but nothing after that,

Id appricate any pointers in the right directions

  • Like 1
Link to comment
Share on other sites

Hi welcome to the forums and the club.

 

is there any way you can simplify the effect so that it is easier to focus on the core issue?

 

right now your code is very hard to read with all the physics stuff, multiple filters, and Math.random()s in there.

 

I don't know

-why there are 2 explode() functions.

-or what "and the explode code is"

-and "At the moment my project looks like this" means.

 

it seems code is duplicated and I really can't piece it together

 

in short I have no idea where to begin dissecting such a huge mass of unformatted code.

 

perhaps you can build something that fades in a few words and then each letter just fades out and while doing that exercise you it will help you clearly explain exactly what part you need help with.

 

You can even post a simplified zipped Fla for us to test (just don't upload the membership plugins).

 

We would love to help you, but right now what you have provided is simply a bit too cryptic to diagnose.

 

thanks

 

Carl

Link to comment
Share on other sites

im sorry if i was jumbled in my post

 

what im looking for is a simple way to do my 3 items, number one, run in text, then pause for few seconds, then explode text, wait a few seconds, rinse and repeat

 

current code i have for this is

 

//split myTextField1 by characters (the default type of split)

var stf:SplitTextField = new SplitTextField(XmasText, SplitTextField.TYPE_WORDS);

 

for (var i:int = stf.textFields.length - 1; i > -1; i--) {

TweenMax.from(stf.textFields, 1, {blurFilter:{blurX:10, blurY:10}, x:Math.random() * 650 - 100, y:Math.random() * 350 - 100, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 360 - 180, autoAlpha:0, delay:Math.random() * 0.5, ease:Quad.easeIn});

}

TweenMax.delayedCall(3, explode);

 

 

function explode(){

var XmasText_stf:SplitTextField = new SplitTextField(XmasText);

 

//explode the words outward using the physics2D feature of TweenLite/Max

TweenPlugin.activate([Physics2DPlugin]);

var i:int = XmasText_stf.textFields.length;

var explodeOrigin:Point = new Point(XmasText_stf.width * 0.4, XmasText_stf.height + 100);

while (i--) {

var angle:Number = Math.atan2(XmasText_stf.textFields.y - explodeOrigin.y, XmasText_stf.textFields.x - explodeOrigin.x) * 180 / Math.PI;

TweenMax.to(XmasText_stf.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});

}

}

;

i cant seem to get the explode fucntion to run when its called and i know its there cause i ran a trace on the function and it shows up

hope this helps carlify things a bit

cbum7210

Link to comment
Share on other sites

I gather what you're saying is you need to split a single textfield

 

-into words (for what you describe as the text running in)

 

-and then individual characters (for what you describe as exploding)

 

if that is the case please read greensock's explanation of re-using the same textfield for different split types:

viewtopic.php?f=5&t=4873&p=19404&hilit=splittextfield#p19404

 

Then look at my demo that includes a rinse and repeat

http://snorkl.tv/dev/splitWordsChars/

 

Here is the code I used:

 

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


var greetingWords:SplitTextField = new SplitTextField(christmas_txt, "words");
greetingWords.deactivate();

var greetingCharacters:SplitTextField = new SplitTextField(christmas_txt);
greetingCharacters.deactivate();

christmas_txt.visible = false;




var tl:TimelineMax = new TimelineMax({onStart:activateWords, onRepeat:activateWords, repeat:20, repeatDelay:.5})

//animate each word
tl.appendMultiple( TweenMax.allFrom( greetingWords.textFields, .5, {alpha:0, y:"50" } ), 0, "normal", .2  )
tl.addCallback(activateChars, tl.duration);

//animate each character
tl.appendMultiple( TweenMax.allTo( greetingCharacters.textFields, .3, {alpha:0, y:"-100", scaleY:-1 } ), 1, "normal", .1  )


function activateWords(){
trace("activate words");
greetingCharacters.deactivate();
greetingWords.activate();
}

function activateChars(){
trace("deactivate words");
greetingWords.deactivate();
greetingCharacters.activate();
}

 

attached is a flash cs4 fla. no greensock code

 

this was an interesting challenge. I have never done this before. Good thing GreenSock addressed this already.

Link to comment
Share on other sites

:? Ok got that, and followed code, works nicely but id still like to use the exploding text part

what i got so far is this

 

var greetingWords:SplitTextField = new SplitTextField(XmasText, "words");

greetingWords.deactivate();

 

var greetingCharacters:SplitTextField = new SplitTextField(XmasText);

greetingCharacters.deactivate();

 

XmasText.visible = false;

 

TweenPlugin.activate([Physics2DPlugin]);

var i:int = greetingCharacters.textFields.length;

var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);

while (i--) {

var angle:Number = Math.atan2(greetingCharacters.textFields.y - explodeOrigin.y, greetingCharacters.textFields.x - explodeOrigin.x) * 180 / Math.PI;

}

 

 

var tl:TimelineMax = new TimelineMax({onStart:activateWords, onRepeat:activateWords, repeat:-1, repeatDelay:1.5})

 

tl.appendMultiple( TweenMax.allFrom( greetingWords.textFields, .5, {alpha:0, y:"50" } ), 0, "normal", .2 )

tl.addCallback(activateChars, tl.duration);

//tl.appendMultiple( TweenMax.allTo( greetingCharacters.textFields, .3, {alpha:0, y:"-100", scaleY:-1 } ), 1, "normal", .1 )

tl.appendMultiple( TweenMax.to(greetingCharacters.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}));

 

 

function activateWords(){

trace("activate words");

greetingCharacters.deactivate();

greetingWords.activate();

}

 

function activateChars(){

trace("deactivate words");

greetingWords.deactivate();

greetingCharacters.activate();

}

taking your code and modding it

now getting error of Scene 1, Layer 'AS', Frame 1, Line 29 1067: Implicit coercion of a value of type com.greensock:TweenMax to an unrelated type Array.

which is buffaloing me - line 29 in code is

tl.appendMultiple( TweenMax.to(greetingCharacters.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}));

 

i have the darn thing pointing to right place

or do i ???

Link to comment
Share on other sites

tl.appendMultiple( TweenMax.to(greetingCharacters.textFields[i], 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}));

 

appendMultiple() expects an array of tweens for the first parameter you are passing in a single tween. just use append()

Link to comment
Share on other sites

I tried using just the append method and came up with all sorts of error, so then i tried just putting the exploding text in the activateChar function and that seems to work once, then the explosion will not repeat after that

 

here is code i have so far

var greetingWords:SplitTextField = new SplitTextField(XmasText, "words");

greetingWords.deactivate();

 

var greetingCharacters:SplitTextField = new SplitTextField(XmasText);

greetingCharacters.deactivate();

 

XmasText.visible = false;

 

 

var tl:TimelineMax = new TimelineMax({onStart:activateWords, onRepeat:activateWords, repeat:-1, repeatDelay:5})

 

tl.appendMultiple( TweenMax.allFrom( greetingWords.textFields, .5, {alpha:0, y:"50" } ), 0, "normal", .2 )

tl.addCallback(activateChars, tl.duration);

//tl.appendMultiple( TweenMax.allTo( greetingCharacters.textFields, .3, {alpha:0, y:"-100", scaleY:-1 } ), 1, "normal", .1 )

//tl.append( TweenMax.allTo(greetingCharacters.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}));

 

 

function activateWords(){

trace("activate words");

greetingCharacters.deactivate();

greetingWords.activate();

}

 

function activateChars(){

trace("deactivate words");

greetingWords.deactivate();

greetingCharacters.activate();

var i:int = greetingCharacters.textFields.length;

var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);

while (i--) {

var angle:Number = Math.atan2(greetingCharacters.textFields.y - explodeOrigin.y, greetingCharacters.textFields.x - explodeOrigin.x) * 180 / Math.PI;

TweenMax.to(greetingCharacters.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});

}

}

the first part of the animation repeats just fine, just not the explosion part. any ideas ?

Link to comment
Share on other sites

it probably has something to do with the order in which you are activating and de-activating.

 

 

 

you are going to get very funky results because when you call activateChars, your timeline is also repeating and is also calling activateWords which is deactivating greetingCharacters.

 

i definitely wouldn't put any of the exploding in the activateChars() function. keep it all in the timeline.

Link to comment
Share on other sites

Ok dumb question but how do i put the exploding text on the time line? I turned the exploding text into a funtion then called it from the time like using

tl.addCallback(explode, tl.duration);

I get same result it will run fine first time around then on repeat it doesnt work, am not sure if im coding it wrong or what,

Link to comment
Share on other sites

modify this code here:

 

var i:int = greetingCharacters.textFields.length;
var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);
while (i--) {
var angle:Number = Math.atan2(greetingCharacters.textFields[i].y - explodeOrigin.y, greetingCharacters.textFields[i].x - explodeOrigin.x) * 180 / Math.PI;
TweenMax.to(greetingCharacters.textFields[i], 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()});
}

 

to create a timeline, and then insert that timeline into your other timeline.

 

like:

 


var explode:TimelineLite = new TimelineLite();

var i:int = greetingCharacters.textFields.length;
var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);
while (i--) {
var angle:Number = Math.atan2(greetingCharacters.textFields[i].y - explodeOrigin.y, greetingCharacters.textFields[i].x - explodeOrigin.x) * 180 / Math.PI;
explode.insert( TweenMax.to(greetingCharacters.textFields[i], 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}) );
}

tl.append( explode);

 

just make sure your main timeline has everything in it that you need before adding the explode timeline.

 

be sure to watch this video: http://bit.ly/vnZhh4 it talks about using appendMultiple() and also nesting timelines in other timelines.

Link to comment
Share on other sites

ok i have this for a code

 

var greetingWords:SplitTextField = new SplitTextField(XmasText, "words");

greetingWords.deactivate();

 

var greetingCharacters:SplitTextField = new SplitTextField(XmasText);

greetingCharacters.deactivate();

 

XmasText.visible = false;

 

 

var explode:TimelineLite = new TimelineLite();

 

var i:int = greetingCharacters.textFields.length;

var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);

while (i--) {

var angle:Number = Math.atan2(greetingCharacters.textFields.y - explodeOrigin.y, greetingCharacters.textFields.x - explodeOrigin.x) * 180 / Math.PI;

explode.insert( TweenMax.to(greetingCharacters.textFields, 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}) );

}

 

tl.append( explode);

 

 

 

var tl:TimelineMax = new TimelineMax({onStart:activateWords, onRepeat:activateWords, repeat:-1, repeatDelay:5})

 

tl.appendMultiple( TweenMax.allFrom( greetingWords.textFields, .5, {alpha:0, y:"50" } ), 0, "normal", .2 )

tl.addCallback(activateChars, tl.duration);

tl.append( explode);

 

function activateWords(){

trace("activate words");

greetingCharacters.deactivate();

greetingWords.activate();

}

 

function activateChars(){

trace("deactivate words");

greetingWords.deactivate();

greetingCharacters.activate();

}

 

and now i get this error TypeError: Error #1009: Cannot access a property or method of a null object reference.

at xmas_fla::MainTimeline/frame1()

I donno what the heck im doin wrong here :oops:

Link to comment
Share on other sites

i think 2 things could be wrong

 

1: it appears you are calling tl.append(explode) twice.

 

2: you are trying to loop through your textFields when the SplitTextField is deactivated.

 

try this

 

var greetingWords:SplitTextField = new SplitTextField(XmasText, "words");
greetingWords.deactivate();

var greetingCharacters:SplitTextField = new SplitTextField(XmasText);

var explode:TimelineLite = new TimelineLite();

var i:int = greetingCharacters.textFields.length;
var explodeOrigin:Point = new Point(greetingCharacters.width * 0.4, greetingCharacters.height + 100);
while (i--) {
var angle:Number = Math.atan2(greetingCharacters.textFields[i].y - explodeOrigin.y, greetingCharacters.textFields[i].x - explodeOrigin.x) * 180 / Math.PI;
explode.insert( TweenMax.to(greetingCharacters.textFields[i], 2, {physics2D:{angle:angle, velocity:Math.random() * 200 + 150, gravity:400}, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 100 - 50, autoAlpha:0, delay:1 + Math.random()}) );
}



greetingCharacters.deactivate();

XmasText.visible = false;







var tl:TimelineMax = new TimelineMax({onStart:activateWords, onRepeat:activateWords, repeat:-1, repeatDelay:5})

tl.appendMultiple( TweenMax.allFrom( greetingWords.textFields, .5, {alpha:0, y:"50" } ), 0, "normal", .2 )
tl.addCallback(activateChars, tl.duration);
tl.append( explode);

function activateWords(){
trace("activate words");
greetingCharacters.deactivate();
greetingWords.activate();
}

function activateChars(){
trace("deactivate words");
greetingWords.deactivate();
greetingCharacters.activate();
}

Link to comment
Share on other sites

Hi Carl,

I thank you for your time in explaining this to an old man LOL

your input has helped me alot, and I am watching your timelite vids, they do alot in explaning how to use timeline lite and max

however i have a question, I donno if its somethin I dragged over from old days but i like to work with functions,

i like to put each action into a function and then be able to call em up when needed

now when u used the tl.append coded and "called" up explode

would that work the same way as if explode was in a function instead of a VAR?

guess simple way is can u use the tl.append to call functions as well? and if it would be same coding?

I do really enjoy you taking your time to help me out, If you ever run into a PC or Network prob that you cant figure out, drop me a line :)

Link to comment
Share on other sites

I'm glad to hear that you are making progress.

 

I don't fully understand your question exactly but here are some thoughts:

 

If I am using TimelineLite/Max for animation I like to keep as much as possible in one timeline so that the whole animation can be controlled as whole: paused, reversed, repeated etc. So instead of having one timeline play and then onComplete call a function that starts another timeline I much rather prefer to put both timelines in one parent timeline.

 

---

 

You can call a function from TimelineMax by using the addCallback() method. My next video on AT+ will cover this.

 

myTimelineMax.addCallback(someFunction, someTimeOrLabelInTheTimeline);

 

 

You can also call a function from TimelineLite by inserting a TweenLite.delayedCall();

 

myTimelineLite.append( TweenLite.delayedCall(delay, someFunction) );

 

 

---

 

in the case of your explode stuff, you can certainly put all that code in a function that returns a timeline and then call that function from an insert() or append() method

 

like

 

function explode():TimelineLite {
var t:TimelineLite = new TimelineLite();
t.insert(...);
t.append(...);
t.append(...)

return t;
}

someOtherTimeline.append( explode(), 5);

 

this approach is used here: http://www.snorkl.tv/2011/09/flash-gene ... -blending/

Link to comment
Share on other sites

TY Carl for your tutorials, however im gonna take a side trip to left field on you,

boss wasnt too impressed with exploding text show (hes a java man and really dont like flash stuff)

so i have new idea, since he rides harleys, I have a pic of santa riding a harley,

now what id like to do is get harley pic to run from right to left on first line of text dragging the first line of "ACS"

then drop down and come from left to right dragging a new line of text, and so on

I plan on making each text line a movieclip (for ease of animation and so forth)

my question is on using a timelineLite or Max, how can I set up tweens so that i can chain them on one line

if not clear, picture bike runs across stage from right side with text following then text sticks to center while bike disapears

then bike drops down, runs opposite direction dragging new line of text.

any suggestions on how i can code this?

Link to comment
Share on other sites

I would build a simple animation in the Flash IDE and get the boss's approval before coding a single thing;)

 

There are multiple ways of approaching something like this, you could make it totally dynamic:

 

based on how many lines of text you have you could loop through your textfields and switch between odd and even iterations to append tweens that would move santa and the text left or right.

 

you could use some trickery to attach the text to santa and after a certain distance detach the text.

 

---

if its only 4 lines of text, just manually build a timelinelite with a series of tweens appended. its really not the extra effort to make it flexible enough to handle 50 or a hundred lines.

 

the tricky part is probably going to be getting the text to follow santa at the same speed, detach, and then have santa continue moving. you might have to play around with that for awhile. once you get it right i'm sure it will be easy to duplicate for each direction.

Link to comment
Share on other sites

Hi carl, I watched your tweenlite tutorial, and im lost, im probably making matters worse by adding extra steps

I am enclosing my fla (done in flash cs5) what i was trying to do is

I have a right and left harley rider bringing in text

well i have 4 lines of text, 2 thant comes in from right side and 2 that comes in left side

well i want bike to bring in textr from each side

exp--

bike1 followed by text 1on right side of screen (line one)

bike2----text on left side of screen(line 2)

bike 1 with text following on right side of screen (line 3)

bike2----text on left side of screen(line 4)

 

I need bike one movie clip when reached end of stage to disapear and go back to new postion on screen so it can start line 3 of text run

i did a alpha 0 then zoom back to x, y positions but that is not working

im enclosing my fla in a zip,

i hope you can tell me what the heck im doin wrong, im tryin to keep it to basic stuff here but its throwin me for a loop

Link to comment
Share on other sites

some reason my fla is too big to upload 1.4 megs which is weird as ive only got very few items in the libarary

Link to comment
Share on other sites

just a hint you can use tweens in your timeline that have 0-second durations if you want to very quickly move santa down to the next line

 

var tl:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

//move right
tl.append(TweenLite.to( santa, 1, {x:300}))

//jump down
tl.append(TweenLite.to ( santa, 0, {y:"60", immediateRender:false}), .2);

//move left
tl.append(TweenLite.to( santa, 1, {x:-60}))

//jump down
tl.append(TweenLite.to ( santa, 0, {y:"60", immediateRender:false}), .2)
tl.append(TweenLite.to( santa, 1, {x:300}))
tl.append(TweenLite.to ( santa, 0, {y:"60", immediateRender:false}), .2);
tl.append(TweenLite.to( santa, 1, {x:-60}))
tl.append(TweenLite.to ( santa, 0, {y:"60", immediateRender:false}), .2);
tl.append(TweenLite.to( santa, 1, {x:-60}))
tl.append(TweenLite.to ( santa, 0, {y:"60", immediateRender:false}), .2)




 

*immediateRender:false is used to make sure that those tweens don't render until their time comes while the timeline plays. when you have tweens with 0-second durations, TweenLite automatically thinks:

"oh, this tween has no duration, i better run it right now!" which is usually the desired behavior if a tween has no duration. in this case we want the downward shift to wait for the right time.

 

to get around the immediateRender issue you could also use a duration of .01 seconds (really fast) and everything will be groovy.

 

file attached. this should be enough to get you going. your timeline is going to be more complex with multiple santas and lines of text.

Link to comment
Share on other sites

Hi Carl,

Ok I got that figured out, I wanted to eliminate a pic and figured i could just do a simple flip of the santa so that hes pointing in right direction for when he goes back accross the stage from opposite direction

figured a simple flip while dropping down would fit the bill so wrote it like this

tl.append(TweenMax.to(harleyR, 1, {y:281, scaleX = -1 }),1);

and i get 1084 errors, one says expectiong colon before assign, and other says expecting identifier before rightbrace

so i tried

tl.append(TweenMax.to(harleyR, 1, {y:281, harleyR.scaleX = -1 }),1);

with same result

the scaleX = -1 was what i found while googleling AS3 flip horizonal

is it something with tween engine not liking regular flash commands or am i just that lost with AS3 ?

Link to comment
Share on other sites

Hi cbum7210,

Glad you've managed to solve some of your issues.

 

The code is almost correct:

 

BAD

tl.append(TweenMax.to(harleyR, 1, {y:281, scaleX = -1 }),1);

 

GOOD

tl.append(TweenMax.to(harleyR, 1, {y:281, scaleX: -1 }),1);

 

All values in the tween are preceeded by a colon.

Link to comment
Share on other sites

Hi Carl, that trick worked out well, guess I need to scrap my way of thinking AS2 there LOL,

I have zipped up my FLA for you to check out, theres couple things id like to do to it and welcome any input that you can offer

1, id like to see how to go about getting letters to follow bike a little closer.

(like you said that may be a challange,

2nd thing is there a property setting in AS3 to bring object(Santa on harley runs behind text on stage) to front, I tried setting it from the stage but that didnt make any difference

and lastly

is there one constructor i can use on all the movie clips (all text clips on stage) so that they all fade out

reason id like that is when all text is on stage, leave it for few seconds, then fade out and animation can start over

Link to comment
Share on other sites

PS i think I answered my last question, using a append multiple and an Array value, will work on that when i get home from work :)

Link to comment
Share on other sites

and lastly is there one constructor i can use on all the movie clips (all text clips on stage) so that they all fade out

reason id like that is when all text is on stage, leave it for few seconds, then fade out and animation can start over

 

To answer your last query, TimelineLite/Max has an appendMultiple method into which you can parse an array of tweens. You could use it like this:

 

timeline.appendMultiple([ 
    TweenLite.to(mc1, 1, {alpha:0}), 
    TweenLite.to(mc2, 1, {alpha:0}), 
    TweenLite.to(mc3, 1, {alpha:0}), 
], 5, TweenAlign.START, 0);

 

This places 3 tweens into an array for the appendMultiple method and START's them all at the same time. There is an offset of 5 seconds, so it won't start until 5 seconds after the last tween.

Carl Schoof's TimeilneLite tutorial on Active Tuts has a brilliant interactive visualiser that you can use to experiment with this if you're feeling up to it, try it out!

 

X10

Link to comment
Share on other sites

TY X10, i got that figured out, also got the bring to front object set as well, what Im still having problems with is setting the stagger pattern for having text following santa on bike, i tried using appendMulitple with stagger, delays and ectrasame with insertMultiple, but it just seems like I can never get a good flow

any thoughts on how i can accoplish this, if you want idea check out my fla on formor post, I posted it as a zip file

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.
×