Participating Frequently

Question

How can i combine multi html

Forum|Forum|3 years ago
December 8, 2022
8 replies
380 views

Good Morning!

I have published two animate art work as responsive html separately and need to combine them like a landing page website.

i have try to give different names to those image or variable folder but also failed.

Can any experienced give me a hand?

Thanks you very much!

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

Hi.

Embed each Animate output as a separate iframe in your website.

Or please provide more details explaining exactly what you want to do.

Regards,

JC

C

chenga41842763Author

Participating Frequently

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>02</title>
<style>
  #animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;  }
</style>
<script>

	var createjs02 = createjs02||{};
	var createjs = createjs02;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="02.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("EA93937ACCF53543AB617ECE8553D715");
	var lib02=comp.getLibrary();
	var loader = new createjs02.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib02=comp.getLibrary();
	loader.loadManifest(lib02.properties.manifest);}
function handleFileLoad(evt, comp) {
	var images02=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images02[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 lib02=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib02.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} )	}
	exportRoot = new lib02._02();
	stage = new lib02.Stage(canvas);	
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs02.Ticker.framerate = lib02.properties.fps;
		createjs02.Ticker.addEventListener("tick", stage);	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib02.properties.id);
	fnStartAnimation();}
</script>
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:598px; height:846px">
		<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

C

chenga41842763Author

Participating Frequently

2nd Code

<style>
  #animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }
</style>
<script>
	// change the default namespace for the CreateJS libraries:
	var createjs03 = createjs03||{};
	var createjs = createjs03;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="03.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("EA93937ACCF53543AB617ECE8553D715");
	var lib03=comp.getLibrary();
	var loader = new createjs03.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib03=comp.getLibrary();
	loader.loadManifest(lib03.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images03=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images03[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 lib03=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib03.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} )
	}
	exportRoot = new lib03._03();
	stage = new lib03.Stage(canvas);
	stage.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs03.Ticker.framerate = lib03.properties.fps;
		createjs03.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib03.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:598px; height:846px">
		<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>

C

chenga41842763Author

Participating Frequently

<style>
  #animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }
</style>
<script>
	// change the default namespace for the CreateJS libraries:
	var createjs02 = createjs02||{};
	var createjs = createjs02;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="02.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("EA93937ACCF53543AB617ECE8553D715");
	var lib02=comp.getLibrary();
	var loader = new createjs02.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib02=comp.getLibrary();
	loader.loadManifest(lib02.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images02=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images02[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 lib02=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib02.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} )
	}
	exportRoot = new lib02._02();
	stage = new lib02.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs02.Ticker.framerate = lib02.properties.fps;
		createjs02.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib02.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:598px; height:846px">
		<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>

C

chenga41842763Author

Participating Frequently

2nd html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>03</title>

<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script>
// change the default namespace for the CreateJS libraries:
var createjs03 = createjs03||{};
var createjs = createjs03;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="03.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("EA93937ACCF53543AB617ECE8553D715");
var lib03=comp.getLibrary();
var loader = new createjs03.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib03=comp.getLibrary();
loader.loadManifest(lib03.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images03=comp.getImages();
if (evt && (evt.item.type == "image")) { images03[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 lib03=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib03.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} )
}
exportRoot = new lib03._03();
stage = new lib03.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs03.Ticker.framerate = lib03.properties.fps;
createjs03.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib03.properties.id);
fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:598px; height:846px">
<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>

C

chenga41842763Author

Participating Frequently

1st html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>02</title>

<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script>
// change the default namespace for the CreateJS libraries:
var createjs02 = createjs02||{};
var createjs = createjs02;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="02.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("EA93937ACCF53543AB617ECE8553D715");
var lib02=comp.getLibrary();
var loader = new createjs02.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib02=comp.getLibrary();
loader.loadManifest(lib02.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images02=comp.getImages();
if (evt && (evt.item.type == "image")) { images02[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 lib02=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib02.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} )
}
exportRoot = new lib02._02();
stage = new lib02.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs02.Ticker.framerate = lib02.properties.fps;
createjs02.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib02.properties.id);
fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:598px; height:846px">
<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>

C

chenga41842763Author

Participating Frequently

2nd html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>03</title>

<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script>
// change the default namespace for the CreateJS libraries:
var createjs03 = createjs03||{};
var createjs = createjs03;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="03.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("EA93937ACCF53543AB617ECE8553D715");
var lib03=comp.getLibrary();
var loader = new createjs03.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib03=comp.getLibrary();
loader.loadManifest(lib03.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images03=comp.getImages();
if (evt && (evt.item.type == "image")) { images03[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 lib03=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib03.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} )
}
exportRoot = new lib03._03();
stage = new lib03.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs03.Ticker.framerate = lib03.properties.fps;
createjs03.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib03.properties.id);
fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:598px; height:846px">
<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>

C

chenga41842763Author

Participating Frequently

1st html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>02</title>

<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script>
// change the default namespace for the CreateJS libraries:
var createjs02 = createjs02||{};
var createjs = createjs02;
</script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="02.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("EA93937ACCF53543AB617ECE8553D715");
var lib02=comp.getLibrary();
var loader = new createjs02.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib02=comp.getLibrary();
loader.loadManifest(lib02.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images02=comp.getImages();
if (evt && (evt.item.type == "image")) { images02[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 lib02=comp.getLibrary();
var ss=comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib02.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} )
}
exportRoot = new lib02._02();
stage = new lib02.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs02.Ticker.framerate = lib02.properties.fps;
createjs02.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib02.properties.id);
fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:598px; height:846px">
<canvas id="canvas" width="598" height="846" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:598px; height:846px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded