Skip to main content
vitorh1989
vitorh1989
New Participant
July 30, 2019
Answered

Import my old animation from Flash to Animate CC (HTML5 Canvas)

  • July 30, 2019
  • 3 replies
  • 974 views

I have an old animation made on Flash CS6 with a lot of filters and .gif sfx associated on the library, and also used a Vcam (AS2). I've tried to import it on a HTML5 Canvas on Animate CC. This is where things get really bad. The animation just gets sloppy, as I know most filters are not supported on a Canvas. Even worse, some movieclips won't even play properly (freezes on first frame), probably due to filters as well, I would assume.

My project goal is simple; I have a 'stop' on frame 1 with 3 buttons. Each button 'gotoAndPlays' a different animation (on lets say, Frame 2, 3 and 4), and when the animations ends, it goes back to Frame 1 (main timeline). Normally I would just make a movieclip for each animation, and at the end, rootPlay back to Frame 1.

Now, I've been working on a couple solutions;

- Tried to export the animation on a video format (H.264), as it would offer me the possibility to enhance the animation on After Effects for instance. The problem arises on the limitations on a Canvas and video. I can't even track video on the timeline like the old days. The Video Component does NOT meet my needs. I'm not even able to make the main movie go back to Frame1 with 'if($("#animation").ended==true). Or maybe I'm instantiating it wrong or something.

- Tried to export the animation on a .jpeg sequence so I could have timeline control and bypass all this headaches. But if I do this for a big project I'll have serious trouble on file size. So I don't even think this is a smart or viable solution on the long run.

So please, could someone which had this legacy problems, give me some lights on how to import old animations made on Flash, to a HTML5 Canvas without going overboard and work-around solutions?

This topic has been closed for replies.
Correct answer kglad

it may not be simple but by now you know you need to remove those things in cs6 that are not supported in animate canvas.  if that's too complicated, then it is.

bottomline:  there's no magic conversion tool.  and i've see projects where it's easier to view the end result and approximate it canvas.  in fact, i'm working on an as2 website that the client wants converted to canvas where it's easier to just copy assets from the as2 file and paste them into the canvas file and recreate the functionality without any 'conversion tools'.

3 replies

Myra Ferguson
Community Expert
Myra FergusonCommunity Expert
Community Expert
July 31, 2019

I had some really old animations that I salvaged by playing the swf and using Camtasia to record.

C
ClayUUID
Legend
July 30, 2019

The approach is: Don't use filters. Anything that must use filters, reproduce the filtered effect in an external tool and import as a bitmap. Or, simplify the filter effect to something that HTML5 can do in realtime (basically, transparency).

vitorh1989
vitorh1989Author
New Participant
July 30, 2019

So basically, discard everything I've done, and go for a clean slate. Because removing all filters manually seems impossible, as I got movieclips inside movieclips, and by now keeping track of everything I've done on a old project is inhuman.

I can't believe no one around here has never come across this dilemma. Better yet, how come Adobe never offered a viable solution to problems that could arise from people porting old projects to a new program?

kglad
Community Expert
kgladCommunity Expert
Community Expert
July 30, 2019

in cs6 make the 3 movieclips you want to use in animate (if they don't already exist).  then copy them from the cs6 library and paste them into the animate canvas library.

place on frames 1,2 and 3, place your buttons and this.stop() on frame 0 and on the last frame of the main timeine frame 3 movieclip place this.parent.gotoAndStop(0);

vitorh1989
vitorh1989Author
New Participant
July 30, 2019

It does not work so easily Mr.kglad. As I said before, bottom line, the animation just does not play how it is supposed to on Animate because of the filters, and probably other problems because of the difference in platforms. Don't forget I'm using a Vcam for animation.
Also, I've tried this, and as I said " Normally I would just make a movieclip for each animation, and at the end, rootPlay back to Frame 1."

I'm looking for a different approach on this problem.

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
July 30, 2019

it may not be simple but by now you know you need to remove those things in cs6 that are not supported in animate canvas.  if that's too complicated, then it is.

bottomline:  there's no magic conversion tool.  and i've see projects where it's easier to view the end result and approximate it canvas.  in fact, i'm working on an as2 website that the client wants converted to canvas where it's easier to just copy assets from the as2 file and paste them into the canvas file and recreate the functionality without any 'conversion tools'.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices