Highlighted

Convert Flash to html5 — tutorial not helpful

Community Beginner ,
Apr 22, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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.

TOPICS
Discussions

Views

787

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Convert Flash to html5 — tutorial not helpful

Community Beginner ,
Apr 22, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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.

TOPICS
Discussions

Views

788

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 1
Community Beginner ,
Apr 22, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 1
Community Beginner ,
Apr 22, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

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.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 1
Community Beginner ,
Apr 22, 2019

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
Adobe Community Professional ,
Apr 22, 2019

Copy link to clipboard

Copied

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?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2019 0
Community Beginner ,
May 14, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Adobe Community Professional ,
May 14, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Adobe Community Professional ,
May 14, 2019

Copy link to clipboard

Copied

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.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Adobe Community Professional ,
May 14, 2019

Copy link to clipboard

Copied

Hi again.

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
HannaB LATEST
Community Beginner ,
May 31, 2019

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0