GERER LA VISIBILITE
La gestion de la visibilité vous permet de jouer l’animation d’une créa uniquement lorsque celle-ci est visible.
Pour implementer cette solution , nous devons gérer l’événement de visibilité dans la bannière et exécuter l’animation lorsque l’evenement est capturé.
Cas où la bannière n’est pas visible :
Avant toute chose , vous devez modifier votre bannière pour l’affichage par defaut (image , div…), dans la cas ou la bannière n’est pas visible .
Dans votre fichier html, ajoutez une div correspondant à la taille de votre bannière ou une image par defaut.
Conseil : ajouter cette fonctionnalité uniquement lorsque votre bannière est terminer. Editer votre fichier html.
exemple :
<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>
Pour l’instant nous ne souhaitons pas afficher l’animation de notre canvas
<canvas id="canvas" width="300px" height="250px" style="background-color:#FFFFFF;display:none;"></canvas>
Sous adobe animate l’initialisation du canvas est réalisé par l’appel de la fonction init(), présent dans la balise body .Effacer la , pour pouvoir controler l’appel
<body style="background-color:#D4D4D4;margin:0px;cursor:pointer;" onclick="ADventori.click();" >
Capturer la visibilité:
La methode ADventori.isVisible () vous renseigne quand la bannière est visible.
ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); cette méthode s’abonne à l’événement de visibilité et appelle la fonction en paramètre lorsqu’elle est visible
exemple :
//dans le cas ci-dessous, la fonction startAnimation sera appelée quand la bannière sera visible
if(!ADventori.isVisible()){
ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,startAnimation);
}else{
startAnimation();
}
function startAnimation() {
document.getElementById('loading').style.display = 'none';
document.getElementById('canvas').style.display = 'block';
//votre code pour déclencher l'animation de la bannière
init();
}
Tester la visibilité de vôtre bannière:
Allez dans la page de test ADventori : lien
Uploadez votre bannière, pour activer la visibilité, cliquez sur l’icône en forme d’oeil
resultat :
