From Flash to HTML 5

[campbellma]

Hello, Ive recently started trying to understand Canvas and making interactive content in HTML 5 and I have some front end web dev experience, mainly using HTML and CSS as well as a little JS here and there. In addition I have some experience with using Flash and AS3 in the past. I would like to know how is the transition from working with AS3 and making SWF to making HTML5 content with JS through Animate, is it simple, is it hard?

Can I make something as if I was making a SWF or even take an old SWF and convert it to HTML5 automatically and still be able to edit it? Would I have to rebuild from scratch? Is there a middle ground were it automatically builds the structure but I have translate AS3 to JS?

Really what I want to know is things like how would it handle symbols? I think I remember seeing that it makes sprites sheets for the frames but how would instance names transfer? Does it bundle each set of frames for a symbol into a folder and then assign that folder a variable name in JS for the instance name?

If I had a Flash project where I had a movie clip with 4 frames and frame labels on each frame, and I had as3 target those frames based on user interaction outside of the movieclip how would that translate to HTML 5? Would it export the frames and then index them in order and create and array and label it with the frame labels so that I can still reference them from outside the frame?

Ive been searching online for tutorials and such but there all over the place in terms of consistency. The best tuts on HTML 5 Canvas are building it from scratch but I didnt find anything using Flash/Animate that really explained or answered my questions, just bits and pieces of unfinished tutorials and links to automatic converters like Swiffy. I need more direction in what I should be searching to get a better understanding of this. 

Ive been so out of loop on the whole Flash to HTML thing I dont know where to start to get back in.

[ClayUUID · Accepted solution]

You sound like someone having a panic attack. Stop.

AS3 FLAs can be automatically converted to Canvas FLAs. Almost everything except the scripting will come over intact. Scripting will need to be redone manually. In some cases this will be trivial, for instance adding "this." in front of all the stop(), gotoAndPlay(), etc. commands. In other cases it will be non-trivial, since Canvas mode uses a different (though similar) API than AS3.

Convert your ActionScript code to HTML5

Canvas mode uses the CreateJS API for all internal audio/video functions, so you'll be coding against that.

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

Unlike AS3, there is no compilation step for your code. Anything you type in the Actions window ends up verbatim in the published code.