export animated SVG ?

Community Beginner ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

I thought this is what animate is designed for. But may be i do smth wrong. I need to export a simple svg animation with tweens, but the farest result i could get to is a sequence of SVG files instead to be a single animated file.

 

Plz help, how to export my animation as a single SVG\HTML(with animation)\or anything I could use on my HTML page as animation (except SWF of course)?

TOPICS
Import and export , Missing feature

Views

7.5K

Likes

Translate

Translate

Report

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

Mentor , Mar 24, 2020 Mar 24, 2020
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...

Likes

Translate

Translate
Mentor ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

Hi mate,

 

Animate can't export animated SVG. (There may be some extension that does it, but I've heard that it has been unsupported for a long time.)

 

What you can do is convert your file to HTML5/Canvas and export that without generating textures/spritesheets, i.e. the vectors will remain vector.

Then you can embed this html into your webpage as an iFrame.

 

Here is an example of such 'embeds' on our website:  http://flash-powertools.com/keeping-cycles-flexible-for-easy-re-timing-by-using-service-frame-and-wo...

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Powertools Team - extensions for character animation

Likes

Translate

Translate

Report

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 ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

Thank u again, Nick. an iFrame is absolutley OK. Could u help me plz with publishing settings? A screenshot or smth. Because when i untick "Export image assets" - I get just blank html page with no animations.

Likes

Translate

Translate

Report

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
Mentor ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

Here you go, mate:

 

Convert your AS3 file to Canvas:

Clipboard-1.png

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:

Clipboard-2.png

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.

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Powertools Team - extensions for character animation

Likes

Translate

Translate

Report

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 ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

Thank u, really helpfull 

Likes

Translate

Translate

Report

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
New Here ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

Hi Nick

 

Thank you for the help! Ilustrator has changed so the screens aren't the same anymore but I did get a test file working. Would you be able to upload new screens based on the latest verison of Illustrator with your fav suggestions? As another long time Flash user it astonishes me that we are back to using timelines and a bunch of code and a big chunk of sequential svg files to embed in a site just for an animates vector file when it was so prefect 2 decades ago! Thanks, Jodi

Likes

Translate

Translate

Report

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
Mentor ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

Hi Jody,

None of the screens above are from Illustrator. This is Animate. Animate is Flash.

 

Nick - Character Designer and Animator, Flash user since 1998
Member of the Flanimate Powertools Team - extensions for character animation

Likes

Translate

Translate

Report

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
New Here ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

LATEST
Oh, right, so sorry, that’s what I meant 😊

Sent from my iPhone

Likes

Translate

Translate

Report

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