How would I do it with greensock?

[Max]

Hi guys,

 

I need to make the following update to my text:

 

Connection in 10 sec..

Connection in 9 sec..

Connection in 8 sec..

Connection in 7 sec..

Connection in 6 sec..

etc..

 

I need update my text every second and onComplete I want to run my connect() function. this is all.

 

I know how to do it with Timer, but I think it is possible to do it with greensock too. How would I do it?

[GreenSock]

There are lots of ways to do it, but here's one with TimelineLite and TextPlugin:

http://codepen.io/GreenSock/pen/90fc939c78fac01bfda76a073da10923

 

(don't forget to load TextPlugin)

[Max]

Hi Jack!

 

Really cool example!

 

Jack, could you please explain me first two lines of JS code? I didn't get them...

var tl = new TimelineLite(),
    seconds;

At the moment I do it most hardcore way - I am tweening int type.

[GreenSock]

The first line creates a TimelineLite instance (think of it like a container for tweens - see Carl's video at http://www.greensock.com/sequence-video/ if you haven't already) and the second like is simply declaring a "seconds" variable which I use in the loop. 

 

There are a bunch of ways you could accomplish this effect. Like:

var count = {time:10},
    element = document.getElementById("countdown");
TweenLite.to(count, 10, {time:0, onUpdate:updateTime, ease:Linear.easeNone, onComplete:connect});
function updateTime() {
    element.innerHTML = "Connecting in " + Math.ceil(count.time) + " sec...";
}
function connect() {
    element.innerHTML = "connect()";
}

[GreenSock]

By the way, I just noticed this post is in the ActionScript section of the forums, and for some strange reason I thought you were asking about how to do it in HTML5/JS. The concepts are identical, though. Let me know if you need more Flash-specific help with applying it. 

[Max]

Hi Jack! Thank you very much for you reply.

 

Yes, I know what is TimelineLite and I use is in my AS3 code. I also watched that great video.

 

I just was little bit confused with JS syntax. I don get what that statement need in AS3 terms.

 

How would you do this JS code in AS3?

var tl = new TimelineLite(),
    seconds;

Is this a way how you define vars in JS?

[Carl]

Multiple variable declaration is allowed in AS3 too: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f9d.html

 

The code you are asking about would work fine in AS3 and so would this:

 

var tl = new TimelineLite(), seconds = 1;
tl.to(mc, seconds, {x:0});

And although you can omit data types and not get any compile-time errors, most folks would recommend you do

 

var tl:TimelineLite = new TimelineLite(), seconds:int = 1;
tl.to(mc, seconds, {x:0});

And you can also break onto multiple lines

 

var tl:TimelineLite = new TimelineLite(), 
    seconds:int = 1;

tl.to(mc, seconds, {x:0});

[Max]

Thank you Carl for explanation!