Convert Flash to html5 — tutorial not helpful

[HannaB]

Is it just me who can't follow the steps provided in Adobe's tutorial for how to convert Flash to html5?

This tutorial: Convert Flash Ads to HTML5 |

In the video itself the application icon up top left clearly says "Fl"  so I assume they show the tutorial steps within Flash, not Animate.

1. Open your Flash file in Animate and click Command > Convert To Other Document Formats.
2. Choose HTML Canvas and click OK.
3. Change Actions script by clicking Code Snippets.
4. Convert vectors to bitmaps by right clicking and choosing Convert To Bitmap.
5. Check Export all bitmaps as Spritesheets and check Convert text to outlines, then click OK to Publish

However, the steps provided does not work in Animate as the menu references at 1. are not available in Animate.

How do I find the simplest possible way to convert my fla animations to html5 so they can continue play after Flash is gone?

Help!

[JoãoCésar]

Hi.

The first step is now under File > Convert To in the newest releases of Adobe Animate.

But this will only convert the graphics/structure of your project.

All the coding will have to be recreated manually in JavaScript from scratch.

Regards,

JC

[HannaB]

Hi JC,

I tried that but that only lets me create another .fla file. Not html5. Not sure if that matters though, does it? I just don't want the animations I have to stop working when Flash is gone.

Any good tips on where to look for recreate JavaScript? I am no programmer so this is something I need guidance with.

Thank you!

Hanna

[JoãoCésar]

Yeah. It's going to create another FLA file but in HTML5 Canvas mode.

If you only have raw timeline animations, then you should be up and running. What you may need to do that doesn't involve coding is to remove filters, radial gradients, and other stuff that may cause browser compatibility issues.

But if you really need to rewrite the code, the comment in this thread that starts with "Excellent!" has some tips and references:

Re: Keep button state

Regards,

JC

[HannaB]

Thank you JC,

what's the best way to test if the animation works after conversion? I did one but it auto played on load, which isn't desirable. Original animation has a play button that starts the clip.

[JoãoCésar · Accepted solution]

You test with Control > Test like you would normally do with AS3 documents.

The reason your animation isn't stopping is because you probably had an AS3 stop instruction in your main timeline but the convertion process comments out all code in the new FLA.

But converting the stop method won't be hard.

Just write

this.stop();

instead of only

stop();

For the button, one possible scenario would be:

myButton.addEventListener("click", start); // 'start' will be the function that will be called when the button is clicked

instead of:

myButton.addEventListener(MouseEvent.CLICK, start);

Please let us know if this helps you.

[HannaB]

Hi, thanks so much for sticking with me. I am so out of my element here, but I really need these animations converted for my client. And all of them have the same "Play" button.

this is the code  used on the Play button — it's the same before and after the conversion:

///* this.playBtn.on("mousedown",doplay);

//var self = this;

//

//function doplay(e){

// self.movie.play();

//}*/

It doesn't look like what you've suggested above and I don't know what to change to make it work.

Here's the warning I get when I do "Publish" of the converted file:

WARNINGS:

** 4 Bitmaps packed successfully into 1 spritesheet(s).

Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)

Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

Motion tweens are published as frame by frame animations. Use classic tweens where possible. (3)

[JoãoCésar]

This code is already JavaScript.

This is strange.

Do you mind posting a link to your FLA here so I can take a look at it?

[HannaB]

Sorry that it's been awhile but I just uploaded what's generated when I do Publish. You can find it here: 1_1_ActionScript 3.0_HTML5 Canvas

[JoãoCésar]

Hi again.

I need to see your orginal FLA - before the conversion. Would you mind sharing it?

[HannaB]

Hi, I thought I shared it but perhaps I did something wrong as I still don't have a response from you.

It's weird — in Dreamweaver, I'm uploading using this path:

1_1_ActionScript 3.0_HTML5 Canvas

But I can't view the movie there. Can you?

This is the Warning I get when I Publish out of Animate CC — is there something I should do that I haven't done yet?:

WARNINGS:

** 4 Bitmaps packed successfully into 1 spritesheet(s).

Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)

Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

Motion tweens are published as frame by frame animations. Use classic tweens where possible. (3)

[ClayUUID]

JoãoCésar  wrote

This code is already JavaScript.

This is strange.

Nothing strange at all. Every single line of his code is commented out. Of course it's not going to do anything.

[JoãoCésar]

You're missing the context here. It's not about the code being commented out. The question here is that the code should be AS3 before the conversion.