1 Correct answer
Here you go, mate:
Convert your AS3 file to Canvas:
There are some limitations:
Color effects, radial gradients, animated masks - you will get warnings when you publish or things might not look like they should so you will have to figure out alternative ways of achieving the same results by trial and error.
These are the settings that will not export your vectors as bitmaps/spritesheet, i.e. will keep them vector:
You can change the Export Image Assets > Export as to experiment with the other optio
...
17
Replies
Here you go, mate:
Convert your AS3 file to Canvas:
There are some limitations:
Color effects, radial gradients, animated masks - you will get warnings when you publish or things might not look like they should so you will have to figure out alternative ways of achieving the same results by trial and error.
These are the settings that will not export your vectors as bitmaps/spritesheet, i.e. will keep them vector:
You can change the Export Image Assets > Export as to experiment with the other options.
You will end up with a HTML and JS files and an images folder that holds the preloader GIF.
If you open the HTML you will see that it calls
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
I'd rather host a copy of createjs on my server, so put it somewhere and change that path.
Embed the HTML as an iFrame.
You cant export an animated SVG, but you can export all of your frames into a static SVG, then use SMIL to animate the frames to appear in sequence. There may be an addon that does this automatically, I'm not sure. Blender has one that does this using almost the same code that I am going to show, so I would assume (I havent looked it up) that Adobe use to support this natively, but dropped it when google tried to but didnt cut SVG/SMIL support (more info on that below)
Here is a code example of an animation that I made using an animation that I drew in Adobe Fresco as well as a little topical explanation of it on my website:
https://www.kevnscannell.com/test-svg
https://gistcdn.githack.com/CleanWetGrass/737d39cc3756cdf0b712f402c7bab593/raw/d587cd3ded2f24c248f1e...
Here is a screenshot of the animation code in the bottom of the file.
I had a lot of fun figuring this out, feel free to copy my animation code in the screenshot if youre feeling like it.
The basic premis of my code though is to create a series of keyframe times using "discrete" timing corresponding to visibility and hidden tags that hide/show each frame in sequence. This works best with paths, vector brushes end up creating files that are usually bigger than gifs in standard web formats.
You could do the same thing with an SVG export from Adobe Illustrator, Animate, or Fresco.
I've been meaning to make a video tutorial on how to do this, if I do I'll try to circle back here.
I hope adobe comes to support this natively but it does not seem likely. Theres a pervasive urban legend that SVG's / SMIL are going to be unsupported because google tried to cut support at one point, but immedietly backtracked. SVGs are in fact supported by over 95% of browers, and pretty much all now if you consider that microsoft is discontinuing IE6. If you google it (ironically maybe maniacally) you get articles titled "SMIL is dead." Please believe me when I tell you, it is not dead - people just really shun it for a series of reasons I personally do not agree with, but you can find online if you google it.
It's kinda a lot to explain SMIL, but its incredibly powerful, supported almost universally on browsers, and pronounced "smile" 🙂 which I think is cool. Some other people might argue you should do this using JS, but an SVG is such a self contained object among other inherint advantes iMO.
It is quite dense, but the full documentation is here: https://www.w3.org/TR/SMIL3/
AdChoices