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.
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!
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
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
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
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:
Regards,
JC
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.
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.
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)
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?
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
Copy link to clipboard
Copied
Hi again.
I need to see your orginal FLA - before the conversion. Would you mind sharing it?
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)
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.
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.