MANAGE VISIBILITY
Visibility Management lets you play a creative’s animation only when it’s visible.
To implement this solution, we must manage the visibility event in the banner and execute the animation when the event is captured.
case where the banner is not visible:
First of all, you must modify your banner with the default display (image, div …), in case the banner is not visible.
In your html file, add a div corresponding to the size of your banner or a default image.
Tip: Add this feature only when your banner is finished. Edit your html file.
example :
<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>
For the moment we do not wish to display the animation of our canvas
<canvas id="canvas" width="300px" height="250px" style="background-color:#FFFFFF;display:none;"></canvas>
Under adobe animate the initialization of the canvas is realized by the call of the function init(), present in the tag body .Clear it, to be able to control the call
<body style="background-color:#D4D4D4;margin:0px;cursor:pointer;" onclick="ADventori.click();" >
Capture visibility:
the ADventori.isVisible() method tells you when the banner is visible.
ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); this method subscribes to the visibility event and calls the function as a parameter when it is visible
example :
//in the case below, the startAnimation function will be called when the banner is visible
if(!ADventori.isVisible()){
ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,startAnimation);
}else{
startAnimation();
}
function startAnimation() {
document.getElementById('loading').style.display = 'none';
document.getElementById('container').style.display = 'block';
//your code to trigger banner animation under adobe animate
init();
}
Test the visibility of the banner:
Go to the ADventori test page : link
Upload your banner, to activate visibility click on the eye icon
result :
