The difference in choosing an html5 canvas document over actionscript3

[catalystgrrl-f6zNOD]

Hello,

I am beginning a new project at work and am considering using the html5 canvas mode, so that it can be viewed on ipads, phones, etc. but I want to make sure that I'm importing everything correctly, ie:

When importing Illustrator files into an HTML5 animate cc canvas, do I need to select "import as bitmap" or can they remain vectors?

I understand I would need to make the original vectors larger and then size them down within animate, if viewing on large hd screens, because the output is bitmap, correct? I just don't want to create this whole thing having used the wrong formats.

Or should I just stick with an actionscript 3 file (which I am mildly familiar with) and export it to html5 if necessary?

I understand there are a couple of tools not available in html5 mode, which does not concern me. Is there any other consideration when choosing this format over as3?

Thanks in advance for your input!

Cat

[ClayUUID]

catalystgrrl  wrote

I understand I would need to make the original vectors larger and then size them down within animate, if viewing on large hd screens, because the output is bitmap, correct?

The output of everything on your computer is a bitmap. Animate canvas documents, when set to scale (incorrectly labeled as "responsive" in the publish settings), will dynamically change the resolution of the canvas element so any text/vector content stays sharp no matter what size it's scaled to.

However, canvas vector content is limited to the capabilities of the HTML5 canvas element drawing API, which is primitive and inconsistently implemented across browsers. So if you want your Illustrator illustrations to look correct, you'd best convert them to upscaled bitmaps.

Note that when upscaling vector artwork you need to make certain to also proportionately scale up the line thicknesses. Elsewise all the lines will look too skinny when the bitmap is scaled back down.

[catalystgrrl-f6zNOD]

Thank you, Clay, much appreciated.

However, I don't understand your statement that 'the output of everything on your computer is bitmap'.

ie:

.swf file from flash

.ai file from Illustrator

.wav file from Audition aren't bitmaps...

perhaps you meant everything that comes out of an animate html5 canvas?

[ClayUUID]

I mean you're not reading this page on an oscilloscope.

[Colin Holgate · Accepted solution]

In terms of importing and seeing vectors, and how it all looks in the end, there is currently not much difference between AS3 and Canvas. In Flash Player, that plays AS3 SWFs, you can scale up to any amount, and vector art will look good. Normally with Canvas if you scaled up you would notice pixels, even if the part you're looking at was made of vectors. But, the HTML that gets published from Animate will dynamically resize the canvas area to compensate for the scaling you have done. So, it looks ok.

If you are animating for video, stay with AS3. If you're animating for non-plugin playback (either the user disabled Flash, or you're on mobile), you could either stay with AS3 and convert near the end, but you would probably have to fix some things, or you could stay with HTML5 Canvas. The main hardship is that HTML5 Canvas doesn't currently do Stream sync for audio, and doing lip sync animations would take longer.

I think that there are only three reasons to use HTML5 Canvas, the piece must work in browsers after 2021, your client hates Flash, or you must have it run in a mobile browser. If you're doing something ambitious that needs to work on mobile, think about publishing as an AIR app. That way you keep the advantages of AS3, and your users can still play back on mobile.

[catalystgrrl-f6zNOD]

Brilliant. Thanks Colin!!