Developing (v7+)

Animation to website

Permalink January 12, 2015 at 3:26 AM

Hi guys,

i have build a html5 animation with Animatron online service and i just downloaded one resource file (html) that i got from them that included html and javascript.

What is the best practise to add this into my site's header content block?? And what about those image refrences in javasript??

This is out of my knowledge...

<!doctype html>
<!--
    ~ Copyright (c) 2011-2014 by Animatron.
    ~ All rights are reserved.
-->
<html>
<head>
    <style type="text/css">
       html, body {
            margin: 0;
            padding: 0;
        }
        body.no-iframe {
            background-color: rgb(51, 51, 51);
        }

Viewing 15 lines of 52 lines. View entire code block.

 
<!doctype html>
<!--
    ~ Copyright (c) 2011-2014 by Animatron.
    ~ All rights are reserved.
-->
<html>
<head>
 
 
    <style type="text/css">
 
       html, body {
            margin: 0;
            padding: 0;
        }
 
        body.no-iframe {
            background-color: rgb(51, 51, 51);
        }
 
        body.no-iframe .anm-wrapper {
            border: 1px solid #ccc;
            top: 50%;
            left: 50%;
            display: block;
            position: absolute;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
 
    </style>
 
 
        <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/player.js"></script>
</head>
<body onload="if(typeof start === 'function' ) { start(); }">
 
<div id="target"></div>
 
    <script type="text/javascript">
        var width = 1472;
        var height = 485;
 
        var playerParams = {
            width: width,
            height: height,
            autoPlay: false,
            repeat: false,
            controlsEnabled: true
        };
 
        var WRAPPER_ID = 'target';
        var wrapper = document.getElementById(WRAPPER_ID);
 
        document.body.className = 'no-iframe';
        wrapper.className = 'no-iframe';
        wrapper.style.width = width + 'px';
        wrapper.style.height = height + 'px';
        wrapper.style.marginLeft = -Math.floor(width / 2) + 'px';
        wrapper.style.marginTop = -Math.floor(height / 2) + 'px';
 
        var filename = 'project';
        var animation = {"meta":{"id":"dc5aaa548c3f6bb4703495b6","created":1420450524200,"modified":1420450524200,"author":"Kari Hernesniemi","description":"","name":"toiska intro animaatio","copyright":"Copyright (c) by Kari Hernesniemi","duration":54.0,"numberOfScenes":1,"projectAccess":{"visibility":"PUBLIC","writeAccess":[],"readAccess":["PUBLIC"]},"authorUsername":"Kari.Hernesniemi"},"anim":{"dimension":[1472.0,485.0],"framerate":24.0,"loop":true,"background":"#ffffff","paths":["KrOwAdmiITA=","KrPugdmiLH0AAMA=","KrRrgdmiITA=","J0zNCbRjZv4KAAfQwA==","LMla4CfLiEw=","J1A4EznjZuKyACr4wA==","LMZdQFJGiEw=","J3QXlbIrZp5WAA+gwA==","LMJNqFi8qEw=","KtCL76p7UzzW6kKSa4X5PARRSqlC3+s=","LLfc8KKzyEw="],"elements":[[2,"$$$LIBRARY$$$",32.0,[],{}],[2,"Scene1",54.0,[[2,"Pohjakuva valittu","","",[736.0,242.0],"",4,[[4,[0.0,54.0],"",1],[4,[54.0],"",2]],{}],[3,"vaalea pilvi","","",[165.0,74.0],"",4,[[4,[0.0,27.9],"",3],[4,[27.9],"",4]],{}],[4,"tummapilvi",[6.5],"",[138.0,92.0],"",4,[[4,[0.0,33.4],"",5],[4,[33.4],"",6]],{}],[5,"Pieni pilvi",[26.5],"",[165.0,74.0],"",4,[[2,[0.0,23.4],"",[0.534]],[2,[23.4],"",[0.534]],[4,[0.0,23.4],"",7],[4,[23.4],"",8]],{}],[6,"Liitävälintu",[31.9],"",[48.0,23.0],"",4,[[1,[0.0,17.9],"",[2.3736477827122884]],[1,[17.9],"",[2.3736477827122884]],[2,[0.0,17.9],"",[0.594]],[2,[17.9],"",[0.594]],[4,[0.0,17.9],"",9],[4,[17.9],"",10]],{}]],{}],[8,"/packages/bootstrap/themes/bootstrap/images/f345ae5473939588eaf3c5df.png",[1472.0,485.0]],[8,"0660aa54e3003e4ecfdfc31d.png",[331.0,149.0]],[8,"f75faa54613dec3782d25516.png",[276.0,185.0]],[8,"0660aa54e3003e4ecfdfc31d.png",[331.0,149.0]],[8,"abf4ac541ecd8cb63b339698.png",[96.0,47.0]]],"scenes":[1]}};
 
        anm.createPlayer(WRAPPER_ID, playerParams).load(animation, anm.importers.create('animatron'));
    </script>
</body>
</html>

// Mika