samedi 25 juin 2016

Adobe Animate HTML5 loading animation

I've created an presentation with Adobe Animate HTML5 canvas and now I want to add a simple animation that hides once the presentation is loaded. I have the animation and placed it in the HTML just fine, but I can't figure out how to make it go away once everything is loaded. Here is the code:

<html>
<head>
<meta charset="UTF-8">
<title>Intervention</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="Intervention.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
    // --- write your JS code here ---

    canvas = document.getElementById("canvas");

    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

function handleComplete(evt) {
    exportRoot = new lib.Intervention();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}


function playSound(id, loop) {
    return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>

<!-- write your code here -->

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas" width="833" height="510" style="background-color:#FFFFFF"></canvas>
    <div id="MyLoader" style="position: absolute; top: 255px; left: 416px;"><img src="./images/myloader.gif"></div>
</body>
</html>

What do I place and where so that "MyLoader" will hide after the canvas has loaded?

Thank so much!

Aucun commentaire:

Enregistrer un commentaire