Design in Animate; publish as html5

[eslmaxx]

Hi

I hope I am wording this correctly.  I know almost nothing about html5 except that it is supposed to be what is making Flash obsolete.

Can I work in Animate the way I have worked in Flash - On a stage with layers and a timeline using symbols, usually movie clips, and creating simple tweens and publish that animation as an html5 file?

Also, could I add AS2 script to a button to run the animation and have it work in a published html5 file?  Would AS3 be required and would it even work?

The animations are just text, for example, on a page a user sees the sentence 'I'd set him up' with a button beside it.  User clicks the button and the text animates to arrive at 'I'd se dimup'.  In Flash you can produce a smooth animation to have letters fade to nothing, other letters appear, some letters move across the screen, and some letters change color.  In html you can produce the before and after, but the change is instant and I am looking for the gradual (as gradual as you decide to make it) animation that you easily make in Flash. 

Or, am I way off track?  Is there some other tool or code that would do the job?

[Colin Holgate · Accepted solution]

Something changed between AS2 and AS3, where you could add scripts to buttons. You had to add them to the timeline.

Other than that, most of what you did in AS2 should work on in HTML5 Canvas. You need to get more familiar with how AS3 worked, and how CreateJS works.

[eslmaxx]

Wow, quick response! Thanks.

Yes, I need to get way more familiar with AS3 and CreateJS.  Fortunately, the animations I am doing probably require very little AS3.
I've been reading this Create HTML5 Canvas documents in Animate CC

From what I can see, an html file and a javascript file will be published and if I understand correctly, all the code will be present as well.

Does this mean that these files are pretty much ready to be inserted into a larger project - that very little additional code will be necessary to make the animation work?

A note regarding static text says that since the text is published as vector outlines, you cannot edit them at runtime.  But do I still have the ability to change text to a symbol, like a MovieClip and then animate it?

[Colin Holgate]

Yes, what you say should work.

[ClayUUID]

eslmaxx  wrote

Yes, I need to get way more familiar with AS3 and CreateJS.  Fortunately, the animations I am doing probably require very little AS3

AS3 is not used in Canvas mode. You need to get more familiar with JavaScript, which is more like AS2.

From what I can see, an html file and a javascript file will be published and if I understand correctly, all the code will be present as well.

Animate added the option a few versions ago to include all the JS in the HTML file, so only a single file is generated (other than the support library and all the assets).

A note regarding static text says that since the text is published as vector outlines, you cannot edit them at runtime.  But do I still have the ability to change text to a symbol, like a MovieClip and then animate it?

Do NOT use static text in Canvas unless you really absolutely have to, and the quantity of text is small. Each letter is converted to a graphics object, which is both slow to render and massively inflates the file size.

Dynamic text, on the other hand, is pretty much just like in AS2 as far as animation and runtime modification. You can't mix font styles within a single textfield though... a limitation of the HTML5 canvas text API.

[eslmaxx]

Interesting.  In Canvas Mode, do I still have the stage, timeline and layers like in Flash?  Can I pretty much set up the animation the way I want it to work and then use JavaScript for the interactivity. 

My animations are all text.  I mean they look like text to the user.  The purpose is to demonstrate various aspects of English pronunciation, so for example, the user sees 'drop it', clicks the button, and watches the animation which ends up as 'dro pit'.  The way I have done it in Flash is to type the text and break it apart into individual letters distributed to layers.  Then convert each letter to a MovieClip, and then animate each MovieClip individually as needed.  In Animate, can I also type the text, break it into individual letters, convert them to MovieClips on separate layers, and then animate each one (move it across the screen, change it from black to red, fade it to 0% opacity, etc)?  I guess the only reason that wouldn't work is if you can't break apart static text anymore.

Actually, it looks like you are saying each letter is converted to a graphics object.  I believe I can animate those in the way I described above - change color, move from left to right or vice versa, fade to 0% opacity.

[ClayUUID]

eslmaxx  wrote

Interesting.  In Canvas Mode, do I still have the stage, timeline and layers like in Flash?

Of course. The IDE in Canvas mode is nearly identical to AS3 mode.

I wouldn't advise using filters to achieve color changes though. Color filters are not natively supported by the HTML5 canvas element, so are emulated in JavaScript, slowly.

[eslmaxx]

Thank you for your replies.  This is very useful.

Is there a way to animate a color change with JavaScript that isn't going to slow everything down?  If I have a sentence like "She broke it" and I want an animation that ends up as "She bro kit" where the e in broke has faded to invisible, the k has moved over to it to make kit and bro changes from black to red, is that pretty standard and easy to achieve in JavaScript like it is in Flash?  If so, it's exactly what I need.

Also, If i set up this animation in Canvas mode then I must use JavaScript for the animation, right?  I mean, there is no conceivable way to set up this animation in Animate using Action Script (for testing purposes for example) and then generate the html file?