Skip to main content
Participating Frequently
Dec 8, 2022 4:51 AM UTC
Question

How can i combine multi html

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 is closed to new replies. Start a new post to keep the conversation going.

    8 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    Dec 8, 2022 12:57 PM UTC

    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

    Translate
    Participating Frequently
    Dec 8, 2022 5:13 AM UTC
    <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>
    Translate
    Participating Frequently
    Dec 8, 2022 5:02 AM UTC

    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>

     

    Translate
    Participating Frequently
    Dec 8, 2022 5:00 AM UTC
    <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>
    Translate
    Participating Frequently
    Dec 8, 2022 4:54 AM UTC

    2nd html

     

     

    <!DOCTYPE html>
    <!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
    -->
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>03</title>
    <!-- write your code here -->
    <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>
    </html>

    Translate
    Participating Frequently
    Dec 8, 2022 4:53 AM UTC

    1st html

     

     

    <!DOCTYPE html>
    <!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
    -->
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>02</title>
    <!-- write your code here -->
    <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>
    </html>

    Translate
    Participating Frequently
    Dec 8, 2022 4:52 AM UTC

    2nd html

     

    <!DOCTYPE html>
    <!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
    -->
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>03</title>
    <!-- write your code here -->
    <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>
    </html>

    Translate
    Participating Frequently
    Dec 8, 2022 4:52 AM UTC

    1st html

     

    <!DOCTYPE html>
    <!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
    -->
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>02</title>
    <!-- write your code here -->
    <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>
    </html>

    Translate