Tengo una dificultad con una animación ya que se ve perfectamente en algunos dispositivos móviles, pero en otros esta animación se desplaza hacia arriba y se sale del margen de la pantalla .
Estoy usando Animate CC, con la configuración responsive. con ajuste de área visible y centrado.
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta property="og:title" content="Hector J Patiño">
<meta property="og:description" content="Respuesta Objetiva">
<meta name="description" content="Hector J Patiño">
<meta name="apple-mobile-web-app-title" content="Hector J Patiño">
<meta name="DC.title" lang="es" content="Hector J Patiño">
<meta name="DC.description" lang="es" content="Tarjeta de Presentacion Digital">
<meta property="og:type" content="website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– for ios 7 style, multi-resolution icon of 152×152 –><meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!– for Chrome on Android, multi-resolution icon of 196×196 –><meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="icon-152.png">
<title>Hector J Patiño</title>
<!-- write your code here -->
<style>
#animation_container, #_preload_div_ {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="Hector J Patiño.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("238762F4A5056B40BB20DE2406CAB833");
var lib=comp.getLibrary();
createjs.MotionGuidePlugin.install();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images=comp.getImages();
if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
var preloaderDiv = document.getElementById("_preload_div_");
preloaderDiv.style.display = 'none';
dom_overlay_container.style.display = canvas.style.display = 'block';
exportRoot = new lib.RespuestaObjetivabyethost7();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:543px; height:850px">
<canvas id="canvas" width="543" height="850" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:543px; height:850px; position: absolute; left: 0px; top: 0px; display: none;">
</div>
</div>
<div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:850px; width: 543px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div>
</body>
</html>
AdChoices