How to embed Adobe Animate HTML5 File

Need help Plugins
1

Hi,

I have created some animations using adobe Animate in HTML5. I have used HTML element to embed the file. It is working fine in the editor but when I preview it in browser, it keeps showing me loading.

Please anyone can assist me on this ?

Thanks

2 Likes
2

Can you please send some screenshots?

3

Screenshot (162)
Screenshot (162)1920×1080 454 KB

Screenshot (163)
Screenshot (163)1920×1080 262 KB

Please find the attached screenshote

4

Can you please also show the html/css code that you have inserted in the html element?

5

Screenshot (165)
Screenshot (165)1920×1080 175 KB

and following is the code

<style>
  #animation_container, #_preload_div_ {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }
</style>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="https://tabschool.in/bustracking/mobile.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("258C34EA94D9464687D66EDC5FC84115");
	var lib=comp.getLibrary();
	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';
	canvas.style.display = 'block';
	exportRoot = new lib.mobile();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',false,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="width:460px; height:968px">
		<canvas id="canvas" width="460" height="968" style="position: absolute; display: none;"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:460px; height:968px; 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:968px; width: 460px; text-align: center;'>	<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>	<img src="https://tabschool.in/bustracking/images/_preloader.gif" style='vertical-align: middle; max-height: 100%'/></div>
6

Your code contains Javascript. Javascript cannot be interpreted in the HTML element.

7

Hi,

Here is working well

You check Display as an iframe?

image
image1144×483 85.7 KB

8

Hi,

I think is possible :slight_smile:
See bellow

1 Like
9

Thanks man, it started to work

2 Likes
10

Great to know
Success!

2 Likes
11

Hi @dualpixel, yes you are right. The “display as an iframe” does the trick. Good to know. Learned something new. Thanks :slight_smile:

2 Likes
12

I am glad to know that was useful

Have nice day