How to insert a WebAnimator HTML5 animation in WebSite X5 using the HTML Code Object
Author: IncomediaThe easiest way to insert a WebAnimator 3 animation in WebSite X5 is definitely to use the HTML5 Animation Object. In this way, in fact, all you need to do is to export the animation as .WAX5 and import it in your project.
Alternatively, you can also import animations using the HTML Code Object. Here are the steps you need to follow:
1. Create your WebAnimator animation and save it with a name (e.g.: MYANIMATION).
2. Export the animation from WebAnimator in an empty folder (e.g.: C:\WA_Project).
3. In WebSite X5, insert a HTML Object on a page and embed this HTML Code:
<script>
$(window).bind('resize', function () {
resizeWAObj('MYANIMATIONStage');
}).trigger('resize');
function resizeWAObj(e){
var target = $('#' + e + '.wascript');
t = $("#" + e);
i = $("#" + e + "Container").parent().width();
n = $("#" + e + "Container").parent().height();
r1 = Math.abs(i/t.width());
r2 = Math.abs(n/t.height());
fact = Math.min(r1, r2);
leftsco = (i - (t.width() * fact)) / 2;
target.attr("style", "transform:scale(" + fact + ");top:0px;left:" + leftsco + "px;");
}
</script>
<div id='MYANIMATIONStageContainer' style='position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: 0px; overflow: hidden; '>
<div id="MYANIMATIONStage" class="wascript">
<script type="text/javascript" charset="utf-8" src="MYANIMATION_resources/WA_SCRIPT.js"></script>
</div>
</div>
Please note that if you use a different name for your animation, you should replace "MYANIMATION" everywhere it occurs in the above mentioned code with the name of your choice.
4. Set for the HTML Code Object the same height you set for the WebAnimator animation.
You can change this setting in WebAnimator in the Project Properties section.
5. In the HTML Code Object Expert tab, you need to add all the files you find in "C:\WA_Project\MYANIMATION_resources". Please make sure to set "MYANIMATION_resources" as relative path on your server.
In case of a "jquery-1.7.min.js" file only, please select the option "Link the file (.js and .css files only)".
Note: If you want to import your files faster, you can add the first file and set the correct path. Now, you please need to select the file you just added, press the CTRL key together with the Add button, and select all the files, so to add them all at once.
If you need support on WebAnimator, please contact us on the dedicated forum: http://forum.webanimator.com .
More info about WebAnimator on http://www.webanimator.com !