Highlighted

Responsive no funciona en algunos dispositivos móviles

New Here ,
Dec 14, 2019

Copy link to clipboard

Copied

Hola Comunidad

 

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.

Además le tengo activo el Viewport, a continuación el código HTML:

<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:site_name" content="http://respuestaobjetiv.byethost7.com/">
<meta property="og:title" content="Hector J Patiño">
<meta property="og:description" content="Respuesta Objetiva">
<meta property="og:image" itemprop="image" content="http://respuestaobjetiv.byethost7.com/LogoRespuestaObjetiva500.png">
<meta property="og:url" content="http://respuestaobjetiv.byethost7.com/">
<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="shortcut icon" sizes="16x16" href=http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="shortcut icon" sizes="196x196" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="apple-touch-icon-precomposed" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<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 canvasstageexportRootanim_containerdom_overlay_containerfnStartAnimation;
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(evtcomp) {
    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=0i<ssMetadata.lengthi++) {
        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>

 

TOPICS
How to

Views

26

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive no funciona en algunos dispositivos móviles

New Here ,
Dec 14, 2019

Copy link to clipboard

Copied

Hola Comunidad

 

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.

Además le tengo activo el Viewport, a continuación el código HTML:

<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:site_name" content="http://respuestaobjetiv.byethost7.com/">
<meta property="og:title" content="Hector J Patiño">
<meta property="og:description" content="Respuesta Objetiva">
<meta property="og:image" itemprop="image" content="http://respuestaobjetiv.byethost7.com/LogoRespuestaObjetiva500.png">
<meta property="og:url" content="http://respuestaobjetiv.byethost7.com/">
<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="shortcut icon" sizes="16x16" href=http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="shortcut icon" sizes="196x196" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<link rel="apple-touch-icon-precomposed" href="http://respuestaobjetiv.byethost7.com/Respuetaobjetivaiconoredondo.png">
<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 canvasstageexportRootanim_containerdom_overlay_containerfnStartAnimation;
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(evtcomp) {
    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=0i<ssMetadata.lengthi++) {
        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>

 

TOPICS
How to

Views

27

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 14, 2019 0

Have something to add?

Join the conversation