Svg export from Animate cc

[evie_k]

Hey guys! I have been having troubles exporting the svg animation I have created in flash. I have got the snap svg plug in and everything else in order to make this work. When I try to publish the svg animation the browsers shows a blank page without any of my animation on it. I am not sure what could be the problem, so maybe any of you know the solution or maybe the cause of this. Any little help would be really appreciated

[kglad]

is your animation on the main timeline or a graphic with enough main timeline frames (and not in a movieclip that's on the main timeline)?

[evie_k]

Hey kglad! I just wanted to test the svg export by drawing a simple ball in the main timeline and publish it so I could see if the browser will show the object, but all I see is blank and I don't get why. I'm sure everything is on the main timeline and not hidden somewhere, because I've tried doing the same thing though the ActionScript 3.0 document and everything was fine, but when I do it through SnapSVGAnimator my browser shows nothing when testing the scene the problem is that I need it to be an svg file.

[evie_k]

Hey kglad! I just wanted to test the svg export by drawing a simple ball in the main timeline and publish it so I could see if the browser will show the object, but all I see is blank and I don't get why. I'm sure everything is on the main timeline and not hidden somewhere, because I've tried doing the same thing though the ActionScript 3.0 document and everything was fine, but when I do it through SnapSVGAnimator my browser shows nothing when testing the scene the problem is that I need it to be an svg file.

[kglad]

what if you use file>export>image (legacy)>svg?

[evie_k]

I tried that on the SnapSVGAnimator document in flash and I did not respond to it. Also, I tried it on the normal AS3 document and it worked, but unfortunately the object doesn't move, so I think this will only export it as an image.

If you have time maybe you can quickly look at these two flash files:

This one is SnapSVGAnimator: Ball test.zip - Google Drive

This one is AS3: Ball.fla.zip - Google Drive

Both are the same, just made in different types of documents. I have made a round shape as a test if the svg can work. Then main idea is for the ball to move when the mouse is on top of it and it needs to be an svg file. But I don't know how to make the file svg and also respond to the code written in action script.

[kglad]

i don't know anything about snapsvg, but suspect it's the problem.

and i don't download files, but someone else may.

[evie_k]

Thanks anyway for trying to help

[Colin Holgate]

Your AS3 example has a few errors. The movieclip has two labels Out and two labels Over. There really should only ever be one label with a given name, if you're planning on doing a gotoAndPlay().

You also miss the label name in the btnOut function.

I haven't used any scripting with SVGAnimator, but I doubt that it can use ActionScript classes. This page lists everything it can do:

API · cjgammon/SnapSVG-Animator Wiki · GitHub

[evie_k]

Hey Colin! Thank you for your help I was following this youtube tutorial Snap.SVG Animator Scripting - YouTube  and he seems to use AS3 in the svg file and his works fine, just don't know what else I can do...

[reinko]

I just tested I document I have. It works when I het Cmd-Return (Ctrl-Return in Windows) which tests the movie in a browser via http://localhost. When I open the html file in a browser directly (via file://…) the canvas stays blank. My guess is that it only works over http for some reason.

Does that help you?

[evie_k]

Hey Reinko! Thank you for your help I was following this youtube tutorial Snap.SVG Animator Scripting - YouTube  and he seems to use AS3 in the svg file and his works fine, just don't know what else I can do...

[autumnrecords]

This could be the result of three possible things.

If you preview before exporting, does it work?

If no, then you likely have elements (such as text) that need to be converted to SVGs first.

If it does work on preview, but doesn't work on export
When you export and try to open it up in the browser, the the file paths are likely incorrect, so your export is referencing the wrong urls. Your best bet is to add it to a website and change the file paths to the correct ones.

If the file paths are not the issue, and you are still not seeing it show up on an existing web project
I spent a few hours working on this issue for my own project. Export by default places the animation at the bottom of the body tag on your site, so check your source code to see if it is appearing at all. If you see that it is showing up there, you need to modify the code to display it in the right placement on the page. When you export, find the block of code that looks something like this:

  function handle_AJAX_Complete() {

      if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )

      {

          json = JSON.parse(AJAX_req.responseText);

          comp = new SVGAnim(

                         json,

                         width,

                         height,

                         fps

                         );

      }

  }

There you will want to add a line of code like this to it:

  function handle_AJAX_Complete() {

      if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )

      {

          json = JSON.parse(AJAX_req.responseText);

          comp = new SVGAnim(

                         json,

                         width,

                         height,

                         fps

                         );

           document.getElementById('animationtest').appendChild(comp.s.node); // Add this line of code

      }

  }

What it is doing is finding a tag with the ID of 'animationtest' and placing the code there. You will need to add that ID to the element where you want the code to go. Or just change the name to the ID of the element you want.

Example add this to your HTML:
<div id="animationtest">
     <!-- Your Animation will be show up here -->
</div>

I wish Adobe would fix this, by wrapping the export in a div with a auto generated ID and assigning the code to be placed in that ID.

[delacroixleather · Accepted solution]

THIS!!!!!

@ autumncodes

document.getElementById('animationtest').appendChild(comp.s.node); // Add this line of code

A BILLION THANK YOU'S!!!!!

WHY WOULD ADOBE THINK THIS IS AN INTUITIVE STEP?!?!?!?

(yes, I know I'm yelling. I've been wrestling with this for two days. This is the only place I've found this information.)

I wish Adobe would do more than just add this additional line of code (which they need to). I wish their tutorial:

1. offered detailed instructions on importing non-Adobe made SVG's into Animator.

2. offered detailed instructions on what exactly is published using the SvgSnap plug-in. I thought I would get a nice svg file. Nope. JSON + HTML + seemingly redundant vendor JS files.

Adobe, I ask... is all of this intuitive? To whom?

Anyway, thanks again autumncodes. You really saved me.