html5 animation

[colin]

Hi
I recently posted an inquiry about html 5 animation in Xara and was directed towards Hippo Animator. I duly downloaded it and found it a great little program - very easy to use and implement; not as comprehensive as Xara's flash animation but sadly necessary these days. Since then I've tried to re-install on a new machine but been blocked on both IE and Chrome with dire warnings of all sorts of malignancy, with the former removing the webpage.
Has anybody else experienced problems with the software? I'd really like to use it again and when I looked at the site this evening everything appeared to be normal but I'm now very wary.
Really appreciate your input.
Colin

[steve.ledger]

Not really a Xara software issue.
Have you contacted Hippo support or user forums?

AVG virus alert ► http://hippostudios.proboards.com/th...trial-download

[gwpriester]

I was hoping to see support for HTML5 animation in the new release, but not so.

What kinds of warnings are you getting? And what virus protection/security are you using.

[Egg Bramhill]

Hi Gary, you can use Google's Swiffy converter to convert swf's to html5. It's limited but I think it should convert most Xara generated swf files.

Swiffy

I've attached a Xara generated animated swf. The forum won't allow me to upload the swiffy generated html file but you can use it to see the results.

[steve.ledger]

As the converted source is too large for a placeholder, have you figured out a good way to embed a Swiffy HTML conversion into a Designer page and include the runtime.js as well, Egg?

[gwpriester]

It does not make me confident to see google.com/doubleclick/studio/swiffy/ as part of the path name. Double Click is one of the biggest ad servers. Do you think that converted Flash movies are being used by double click somehow? Google rarely does anything out of the goodness of their heart.

[Egg Bramhill]

As the converted source is too large for a placeholder, have you figured out a good way to embed a Swiffy HTML conversion into a Designer page and include the runtime.js as well, Egg?

The converted source can fit sweetly into a placeholder Steve. Just note the size on export from Xara. Use this to create the iframe size.

One problem I did have was to remove the background but found if you open the swiffy generated html file & find:

{"type":2},{"type":2},{"type":2},{"type":2},{"type ":2}],"fileSize":355,"v":"5.1.0","backgroundColor":-1,"frameSize":

remove the section re the background,

"backgroundColor":-1,

To read:

{"type":2},{"type":2},{"type":2},{"type":2},{"type ":2}],"fileSize":355,"v":"5.1.0","frameSize":

You can create a transparent background.

You can view it HERE

[Egg Bramhill]

It does not make me confident to see google.com/doubleclick/studio/swiffy/ as part of the path name

There's no link to DoubleClick in the resultant html file Gary.

This is a beta version & considering the huge amount of swf advertisments using Google click throughs it makes sense for Google to create a swf to html5 convertor. I doubt it will remain free in the future but it works nicely on Xara created Flash files at the moment.

[steve.ledger]

The converted source can fit sweetly into a placeholder Steve.

Sorry I should have been clearer, Egg. The size of the rendered animation is not what I was talking about. I am referring to the size of the source code.
The placeholder area is limited to how many characters of code it can contain. The SWF to HTML5 conversion I tested has an excess of the limit and therefore did not work at all..
BTW: The character limit is 30000. The purpose of the limit is as explained by Covoxer:

To avoid additional dynamically allocated memory chunk, which, in general case, increases chances of the memory leaks.
The least important, temporary strings are much easier and safer to use a static memory allocation.

[Egg Bramhill]

Okay Steve, missed that point. Obviously for each individual animation the file size may vary greatly but this one is reasonably short (2,768 characters) so well within the permitted 30,000 limit.
Here's the html5 code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy output</title>
    <script src="https://www.gstatic.com/swiffy/v5.1/runtime.js"></script>

    <script>
      swiffyobject = {"tags":[{"bounds":[{"ymin":0,"ymax":598,"xmin":0,"xmax":1340}],"id":3,"fillstyles":[{"color":[-4259840],"type":1}],"paths":[{"fill":0,"data":[":::a:97ea40m:a:97Ec"]}],"flat":true,"type":1},{"bounds":[{"ymin":0,"ymax":2224,"xmin":0,"xmax":763}],"id":4,"fillstyles":[{"color":[-4234752],"type":1}],"paths":[{"fill":0,"data":[":81c:b2K:2S0hb0H0h0H2sb:3r2q2ya8N:b3M:3M3ma:74fb:9j7j1ma:28fb:3m3m3ma6h:a:55Fb:6F5e6Fb6e:6e6fa:55fa5h:b3m:3m3Ma:28Fb8jV8j1Ma:74Fb:3M3M3Ma8N:b1q9F1q2Yb:4K0H2Sb0H0H2S0Hc"]}],"flat":true,"type":1},{"id":3,"matrix":"::::70el","type":3,"depth":2},{"id":4,"matrix":"::::28h669d","type":3,"depth":3},{"type":2},{"replace":true,"matrix":"::::69e50c","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e89f","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e27j","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e65m","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e04q","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e42t","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e80w","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e719b","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e057c","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e395c","type":3,"depth":2},{"type":2},{"replace":true,"matrix":"::::69e734c","type":3,"depth":2},{"type":2},{"type":4,"depth":2},{"type":4,"depth":3},{"id":3,"matrix":"::::70e072d","type":3,"depth":2},{"id":4,"matrix":"::::28h669d","type":3,"depth":3},{"type":2},{"replace":true,"matrix":"::::69e102e","type":3,"depth":2},{"replace":true,"matrix":"0446g::0365C17d699e","type":3,"depth":3},{"type":2},{"type":4,"depth":2},{"type":4,"depth":3},{"id":3,"matrix":"::::70e132f","type":3,"depth":2},{"id":4,"matrix":"0892n::0729Fh729f","type":3,"depth":3},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2},{"type":2}],"fileSize":355,"v":"5.1.0","frameSize":{"ymin":0,"ymax":6900,"xmin":0,"xmax":2420},"frameCount":26,"frameRate":24,"version":8};
    </script>
    <style>html, body {width: 100%; height: 100%}</style>
  </head>
  <body style="margin: 0; overflow: hidden">
    <div id="swiffycontainer" style="width: 121px; height: 345px">
    </div>
    <script>
      
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);
      
      stage.start();
    </script>
  </body>
</html>