Skip to main content
Participating Frequently
December 8, 2022
Question

How can i combine multi html

  • 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.

    8 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    December 8, 2022

    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

    Participating Frequently
    December 8, 2022
    <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>
    Participating Frequently
    December 8, 2022

    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>

     

    Participating Frequently
    December 8, 2022
    <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>
    Participating Frequently
    December 8, 2022

    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>

    Participating Frequently
    December 8, 2022

    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>

    Participating Frequently
    December 8, 2022

    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>

    Participating Frequently
    December 8, 2022

    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>