Actionscript to HTML5 question

[acon234 0 Likes (Newbie)]

Hi, I'm not really a coder, was hoping for some help. Trying to convert some Flash banners to HTML5. There is some Greensock scripting in the file and I need to rewrite for HTML5. Code below. Could anyone tell me how to rewrite these functions?

 

function initTween_pig1()

{

    com.greensock.TweenNano.from(pig1_mc, 1.7, {_alpha: 0, _xscale: 0, _yscale: 0, ease: com.greensock.easing.Elastic.easeOut});

}

function initTween_pig2()

{

    com.greensock.TweenNano.to(pig2_mc, 1.7, {_alpha: 100, _xscale: 150, _yscale: 150, ease: com.greensock.easing.Elastic.easeOut});

}

function initTween_pig3()

{

    com.greensock.TweenNano.to(pig3_mc, 1.7, {_alpha: 100, _xscale: 200, _yscale: 200, ease: com.greensock.easing.Elastic.easeOut});

}

function initTween_pig4()

{

    com.greensock.TweenNano.to(pig4_mc, 1.7, {_alpha: 100, _xscale: 250, _yscale: 250, ease: com.greensock.easing.Elastic.easeOut});

}

function initTween_pig5()

{

    com.greensock.TweenNano.to(pig5_mc, 1.7, {_alpha: 65, _xscale: 400, _yscale: 400, ease: com.greensock.easing.Elastic.easeOut});

}

function initTween_pink()

{

    com.greensock.TweenNano.from(pinkSquare_mc, 0.1, {_alpha: 0, ease: com.greensock.easing.Linear.easeIn, overwrite: 1});

}

initTween_pig1();

[Carl 9,704 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Unfortunately it seems this project was written in ancient AcrionScript 2.0 which Adobe stopped supporting in Flash Pro CC and doesn't exist at all in Animate CC.

I think even an experienced coder would have their work cut out for them trying to adapt an AS2 project to an HTML5 / JS one.

 

There are a few tips / suggestions though that I can offer:

 

1. read the article here: http://greensock.com/animatecc-quickstart and download the zip file provided
2. Use the GSAP_Basic.fla and import assets from your project into it. At least this way you are starting with a file that will publish as HTML5, load TweenMax.min.js and run GSAP animations without having to jump through all the hoops of creating your own template.
3. TweenNano does not exist in the HTML5 version of GSAP, but you can use TweenMax or TweenLite tweens instead.
4. _xscale / _yscale from AS2 are now _scaleX / _scaleY in JavaScript
5. _xscale:100 would now be _scaleX:1 (1 is normal size as opposed 100)

 

I know the code you are using is very old but it seems strange that they are writing new functions for each tween. I imagine there is some other code that is firing those functions at different intervals to build sequences. Regardless its outdated and very bad. 

 

Our timeline tools (TimelineLite and TimelineMax) will make building sequences a breeze. To get up to speed:

http://greensock.com/sequence-video and http://greensock.com/position-parameter

 

In general your converted code might look something like this

 

Old AS2 (very very bad)

 

funcfunction initTween_pig1()
{
    com.greensock.TweenNano.from(pig1_mc, 1.7, {_alpha: 0, _xscale: 0, _yscale: 0, ease: com.greensock.easing.Elastic.easeOut});
}
function initTween_pig2()
{
    com.greensock.TweenNano.to(pig2_mc, 1.7, {_alpha: 100, _xscale: 150, _yscale: 150, ease: com.greensock.easing.Elastic.easeOut});
}

New JavaScript (amazing)

var tl = new TimelineLite();

tl.from(this.pig1_mc, 1.7, {_alpha: 0, _scaleX: 0, _scaleY: 0, ease: Elastic.easeOut})
  .to(pig2_mc, 1.7, {_alpha: 100, _scaleX: 1.5, _scaleY:1.5, ease: Elastic.easeOut});

I'm sure this is probably quite confusing to new eyes, there just isn't an easy way to explain it all. There are about a dozen other things to consider that I haven't even touched on. 

 

I really wish I had better news for you.

[acon234 0 Likes (Newbie)]

thank you for the info Carl. Seeing there's no easy way here. If possible can you recommend some resources for getting started with GreenSock? Kind of ground zero for someone with limited coding skills?

[retropunk 128 Likes (Specialist)]

The link Carl included should help you

 

http://greensock.com/animatecc-quickstart

[Carl 9,704 Likes (Superhero)]

Hi Acon234,

 

As far as recommending learning resources it really depends on how low ground-zero is.

All of the resources we provide assume a base level of understanding of HTML and CSS. Knowing a few JavaScript concepts is certainly helpful. 

 

I would recommend watching our Getting Started Video: http://greensock.com/get-started-js

 

If that intrigues you and doesn't seem to scary, I would recommend our Step-by-Step training that we use in our classes: 

https://www.nobledesktop.com/books/gsap

 

It provides very clear instructions and lots of detailed info on creating GSAP animations. Source files are provided with all the CSS and HTML already written so you are just focusing on the GSAP code. 

 

Also, swing by our learning section and go through the GreenSock 101 series from Petr Tichy: http://greensock.com/learning/