Applying EventListener and countdown to Tweening & Timelines

[X10 0 Likes (Newbie)]

Hi all,

I'm quite new to all this but have read through most of the basic documentation.

I'm having trouble with 2 things, 1 is how to apply something I have created using "Event.ENTER_FRAME" to a timeline and 2 is how to use a counter function with Tween and the Timeline.

 

I have a AS3 Flash file with some movieclips on them, which I use as a grainy film effect (taken from here: http://www.republicofcode.com/tutorials ... old_grain/), these start as soon as the flash starts, see below code:

addEventListener(Event.ENTER_FRAME,myEventHandler);
function myEventHandler(event:Event):void {
Dust1.alpha=Math.random();
Dust1.x=Math.random()*688;
Dust1.y=Math.random()*364;
Dust1.rotation=Math.random()*360;
var dustran1=Math.random()*0.65;
Dust1.scaleX=dustran1;
Dust1.scaleY=dustran1;
...
}

 

I also have a counter which counts down from 7 to 0:

 

var countdown_time:Number=7;
var counter:Number=countdown_time;
var intID=setInterval(countdown,1000);
var test1=String(countdown_time);

function countdown() {
counter--;
countdown_txt.text=counter.toString();
if (counter==3){
	clearInterval(intID);
	intID=setInterval(countdown,3000);

else if (counter==0) {
	trace("countdown complete");
	clearInterval(intID);
}
}

countdown_txt.text=test1;
trace(counter);

 

So the whole thing looks like an old grainy movie film leader intro.

What I'm trying to do is control the grainy flicker effect with Tween and TimeLine, as I want the film grain effect to start to fade out when the counter reaches 1.

I also have some text clips that I want to tween when the counter displays 3, 2 and 1 respectively.

I don't want the grain affect playing again until the movie repeats.

After the grain fades out and the counter finishes and the text clips have played I have other movieclips that need animating but this is the intro and I am trying to figure out how to apply these to Tween and TimeLine.

 

I think there is probably some basic concept to Flash that I think I'm missing but I would appreciate any input you could give.

Happy to supply my FLA file if needed!

 

Thanks!

X10

[Carl 9,066 Likes (Superhero)]

this could be a bit involved but the best thing to do is put all your dust specks / lines into one container movieclip.

 

select all the dust stuff on the stage > convert to symbol > name it something.

in the properties panel give this new symbol the instance name dustContainer_mc

 

now that all your dusts live in a new symbol, you need to modify the code everywhere in your enterframe function to read

 

dustContainer_mc.dust1

dustContainer_mc.dust2

dustContainer_mc.dust3 etc.

 

a short cut would be to just create new references (using the same names in your enterframe) to these movies in the top of your code outside any functions like:

 

var dust1:MovieClip = dustContainer_mc.dust1

var dust2:MovieClip = dustContainer_mc.dust2 etc

 

watch this if you need to: http://www.snorkl.tv/2011/01/fireside-c ... -addchild/

 

now the whole point of putting all the dusts into one clip is so that you can easily fade all dusts by just tweening the container and not all 3 or 4 dusts individually.

 

to fade out the dustContainer use a basic TweenLite.

1: add import statements at the top of your code on frame 1

import com.greensock.*;

import com.greensock.easing.*;

 

2: modify your counter code so that dust fades out

 

function countdown() {

counter--;

countdown_txt.text=counter.toString();

if (counter==3){

clearInterval(intID);

intID=setInterval(countdown,3000);

 

else if (counter==0) {

trace("countdown complete");

clearInterval(intID);

//add this

 

TweenLite.to(dustContainer_mc, 1, {alpha:0});

 

 

}

}

 

 

as for the counter 3, 2, 1 text. you can either have if else statement for 3 2 1 in your counter code and use a TweenLite to tween each TextField

 

or

 

you can build a TimelineLite that sequences all the numbers fading out. Please experiement and let us know where you get hung up.

 

Carl

[X10 0 Likes (Newbie)]

Hi Carl,

Thank you for the help, and the little video, very useful.

Okay, so now that I put my film grain bits in a container and able to tween them seperately, I now have 2 more questions, and I suspect they aren't directly related to Greensock, but any help is greatly appreciated.

 

1) The counter goes into a Dynamic Text field, I tried turning it into a MovieClip and tweening it so that when it reached 0 it dissapeared, however it doesn't seem to work. I tried putting more layers onto the counter text movie clip and they all tween as they should, but not the Dynamic Text - How can I tween this?

 

2) Although I can now tween the Alpha of the film grain, technically it's still 'playing', does this mean it's still using resources?

Is there anyway to stop this clip with Timeline until I restart the whole movie?

 

Thanks again,

X10

[Carl 9,066 Likes (Superhero)]

the issue with the text not fading is that whey using dynamic text you need to embed the font. if the font isn't embedded, it won't fade. its a flash thing.

to embed your font, select the textfield and in the properties panel click "embed"

 

 

as for issue number 2 yes, I believe your enterframe is still running.

 

you don't want the dust to stop moving until it is faded out correct?

 

so do this on your fade tween:

 

TweenLite.to(dustContainer_mc, 1, {alpha:0, onComplete:killDust});

 

 

then outside of any functions create a new function like this

function killDust(){
removeEventListener(Event.ENTER_FRAME,myEventHandler);
}

 

----

what I would do is put a trace("running")

somewhere in myEventHandler() and then you will know if it is running once the objects fade out.

[X10 0 Likes (Newbie)]

Carl, thanks again for your advice, all worked as expected.

However this now leads me to restarting a TimelineLite issue.

 

I took your advice and decided to put the calls into a TimelineLite, but now that I have killed the "dustContainer_mc", it doesn't seem to start up again when restarting the TimelineLite which I am doing via:

 

myTimeline.append(TweenLite.from(Messaging4, 0.3, {scaleX:0,scaleY:0, ease:Back.easeOut,onComplete:restart} ),0.5);

function restart():void {
trace('Total timeline lasted'+myTimeline.duration);
myTimeline.restart()
}

 

This is also true for the counter. Presumeably this is because both the counter and the event listener are outside of the TimelineLIte, so I'm assuming I need to put both 'dustContainer_mc' & 'counter' into a function(?) and append them to the beginning of the TimelineLite, but I think I'm missing something.

[Carl 9,066 Likes (Superhero)]

congrats on getting the count down to work.

 

i don't know if you have changed it, but I thought your dust was controlled by an ENTER_FRAME event.

if so, you will have to create that listener again, and possibly fade up the dustContainer_mc so you can see it.

 

something like

 

function restart():void {

trace('Total timeline lasted'+myTimeline.duration);

myTimeline.restart()

addEventListener(Event.ENTER_FRAME,myEventHandler);

//add a Tweenlite to fade up the dust

}

[X10 0 Likes (Newbie)]

Hi Carl,

Firstly I just want to thank you for all your input here, it is very much appreciated!

Secondly, I had a look at your video tutorials and I am very greatful for them, I have learnt a lot about TweenLite/Max that I didn't and have started to use these 'tips & tricks'.

 

Clearly AS3 is very new to me as I didn't realise I had to restart the EventListener again.

Your suggestion works perfectly.

 

My problem now is that the counter function will not restart.

Here is some simplified code:

 

var countdown_time:Number=5;
var counter:Number=countdown_time;
var intID=setInterval(countdown,1000);
var test1=String(countdown_time);

function countdown(){
counter--;
CountDownText.countdown_txt.text=counter.toString();
trace('counter says '+counter+' seconds');
if (counter==3){
	clearInterval(intID);
	intID=setInterval(countdown,2000);
} else if (counter==0) {
	trace("countdown complete");
	TweenLite.to(FilmGrainContainer, 1, {alpha:0,onComplete:killFilmGrain});
	clearInterval(intID);
}
}

CountDownText.countdown_txt.text=test1;
trace(counter);

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append(TweenLite.to(myMC, 0, {alpha:0}) );
....
myTimeline.append(TweenLite.to(myMC, 0.3, {alpha:1, onComplete:restart} ),0.5);


function restart():void {
trace('Total timeline lasted'+myTimeline.duration);
myTimeline.restart()
addEventListener(Event.ENTER_FRAME,filmGrain);
TweenLite.to(FilmGrainContainer, 0, {alpha:1, onComplete:countdown});
var intID=setInterval(countdown,1000);
countdown_time = 5;
counter = countdown_time;
trace('I have now reset countdown_time to '+countdown_time);
trace('and counter to '+counter);
trace('Restarted :)');
}

 

This does start the numbers counting down again on restart, but it starts at 1, then jumps to 4, then goes down by 1 infinitely, so it's not going through the if statements in counter() again.

 

I tried adding Dust1.addEventListener(Event.INIT,counter); and removing it in counter() when it reached 0, but that just threw an error.

 

I realise this is now nothing to do with Greensock/TweenLite so I might take it to another forum, but as Carl has been so helpful here I thought I would post this follow-up.

 

Thanks again.

X10

[Carl 9,066 Likes (Superhero)]

good job, you're almost there.

 

the problem is that even though you are resetting the countdown_time, you aren't updating the textfield that displays that number until later. so chances are it is stuck on 1.

 

the next time the countdown starts and you subrtact 1 from 5 it is immediately displaying 4. so I'm guessing somewhere in restart you want to chuck a 5 into that textfield.

 

make your restart() function do this

 

function restart():void {

trace('Total timeline lasted'+myTimeline.duration);

myTimeline.restart()

addEventListener(Event.ENTER_FRAME,filmGrain);

TweenLite.to(FilmGrainContainer, 0, {alpha:1, onComplete:countdown});

var intID=setInterval(countdown,1000);

countdown_time = 5;

 

CountDownText.countdown_txt.text=String(countdown_time);

 

counter = countdown_time;

trace('I have now reset countdown_time to '+countdown_time);

trace('and counter to '+counter);

trace('Restarted :)');

}

[X10 0 Likes (Newbie)]

Hi Carl,

Thanks for the tip and the explanation.

I've put that in, but the problem is that it doesn't seem to actually activate the function again, or if it does, it's not going through the if else statements.

The function should slow the timer down to a 2 second interval on the countdown when it reaches 3:

 

   if (counter==3){
     clearInterval(intID);
     intID=setInterval(countdown,2000);
  } else if (counter==0) {
     trace("countdown complete");
     TweenLite.to(FilmGrainContainer, 1, {alpha:0,onComplete:killFilmGrain});
     clearInterval(intID);
  }

 

but when the restart happens, it doesn't check those statements.

Is there some sort of pointer that is stuck at the end of that if else statement from the first time it ran that needs to reset to get it back to the start of that if statement?

 

X10

[Carl 9,066 Likes (Superhero)]

try not using var inside the restart function body for your setInterval as it is already defined elsewhere

 

function restart():void {

trace('Total timeline lasted'+myTimeline.duration);

myTimeline.restart()

addEventListener(Event.ENTER_FRAME,filmGrain);

TweenLite.to(FilmGrainContainer, 0, {alpha:1, onComplete:countdown});

 

maybe bad

var intID=setInterval(countdown,1000);

 

maybe gooder

intID = setInterval(countdown,1000);

 

countdown_time = 5;

 

 

 

do you have traces inside countdown() before the else statements? you should first confirm whether or not countdown is being called, and then you can figure out if there is a problem with

 

 

c

[Carl 9,066 Likes (Superhero)]

try not using var inside the restart function body for your setInterval as it is already defined elsewhere

 

function restart():void {

trace('Total timeline lasted'+myTimeline.duration);

myTimeline.restart()

addEventListener(Event.ENTER_FRAME,filmGrain);

TweenLite.to(FilmGrainContainer, 0, {alpha:1, onComplete:countdown});

 

maybe bad

var intID=setInterval(countdown,1000);

 

maybe gooder

intID = setInterval(countdown,1000);

 

countdown_time = 5;

 

 

 

 

c

[X10 0 Likes (Newbie)]

I can't believe it was as simple as that! (Well I can, usually troubleshooting progarmming ends up being a silly user mistake).

 

Thank you for all your help Carl!

 

X10

 

P.S. I just read your random number post on Snorkl, really interesting (in a geeky aspergic way).