Skip to main content
fanta458
fanta458
Inspiring
May 15, 2018
Answered

Snap.svg animator

  • May 15, 2018
  • 3 replies
  • 2002 views

Hi there

I'm creating some animated infographics (using the Snap.svg add-on in Animate cc) for a website. As the final animations will sit on a coloured background in the website I am wanting the animated file I supply to the developer to have a transparent background to allow the site's background colour to show through.

I've tried setting the stage colour to alpha 0%, but this results in a dark grey colour in the background when I test the animation in the browser.

I've tried supplying the file using a background layer which is the same colour value as the website bg, bit this seems to result in the animation having a thin lined border around the perimeter of the file when uploaded to the site.

Can anyone help me please?

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    OK.

    I see.

    I thought you were using the SVG panel that exports a .svg with animated content. And BTW, you should also consider this one.

    I did test the output of the SVG document against a background and it seems stage opacity is ignored.

    If you look at your resulting .html, you'll see this CSS (with your color value):

    background-color: #FFFFFF;

    All you need to to is to change to this (again, with your color value)

    background-color: rgba(204, 204, 204, 0.00);

    I think this should work.

    3 replies

    D
    designu46483552
    Inspiring
    January 14, 2019

    Is Snap.svg dead? I see the snap.svg home page is still up but seem to be getting a lot of 404s form everywhere and Adobe add-ons declares it as "retracted".

    Anyone else?

      fanta458
      fanta458Author
      Inspiring
      May 16, 2018

      Hiya

      Thanks, yes that solution of changing the colour value in the html code sounds completely logical. I can open the html file in Text Edit and change the background colour but then I can't view that in the browser. In fact I can't seem to open any html file produced as part of the file package in any browser

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      May 16, 2018

      OK. Here is a test so you can understand better.

      With background:

      Without background:

      FLA download:

      animate_cc_snap_svg_animator.zip - Google Drive

      If this is still not what you want, I'm gonna ask you to share your file with us.

      Regards,

      JC

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      May 15, 2018

      Hi.

      How are you exporting your animation?

      I run a quick test here and I got a SVG animation running in Firefox with transparency.

      Is this what you are trying to do?

      fanta458
      fanta458Author
      Inspiring
      May 15, 2018

      Hiya

      Yes that is ultimately what I'm trying to do.

      I set up the file using the Add-on Snap.svg animator file-type. Then when I've finished doing the animation I go to Control > Test Movie > In browser (Chrome). The resulting animation either has the last colour I used from the swatches panel as the background, or the dark grey background/stage that Animate CC produces when I chose no background colour for the stage, ie 0% transparency. Then I just click File > Publish, which produces a package of files and I send this whole package to the developer.  Package includes html file, json file, fla file and a folder with Vendor information.

      I can only seem to test the animation from within Animate CC as per the above method. If I double click on the html file from Finder, it opens the web browser but there is nothing there?

      Cheers

      Stacey

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community ExpertCorrect answer
      Community Expert
      May 16, 2018

      OK.

      I see.

      I thought you were using the SVG panel that exports a .svg with animated content. And BTW, you should also consider this one.

      I did test the output of the SVG document against a background and it seems stage opacity is ignored.

      If you look at your resulting .html, you'll see this CSS (with your color value):

      background-color: #FFFFFF;

      All you need to to is to change to this (again, with your color value)

      background-color: rgba(204, 204, 204, 0.00);

      I think this should work.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices