Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

Community Beginner ,
Jul 30, 2019 Jul 30, 2019

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?

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

correct answers 1 Correct answer

Community Expert , Jul 30, 2019 Jul 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 functional

...
Translate
Community Expert ,
Jul 30, 2019 Jul 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);

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 30, 2019 Jul 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 30, 2019 Jul 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'.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 30, 2019 Jul 30, 2019

I was not looking for a magic wand to do this. Just a way to include an old animation in a modern platform without going the extra mile. Sounds inconceivable to me how this can't be done in a simple way. Guess that's impossible on today standards.

Thanks for the input tho.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2019 Jul 30, 2019

You think you've got it bad, try being someone who has to convert old Director or Authorware projects to HTML. You're positively spoiled by comparison.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2019 Jul 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).

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 30, 2019 Jul 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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 31, 2019 Jul 31, 2019
LATEST

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

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