Chris Johnston
asked on
JavaScript function collision?
I have an Adobe Animate CC project that I have changed to make it better. It is problematic because Adobe has not done a good job of generating code that can run simultaneously on a page. I manipulated the code to be able to do this. Understanding a good amount of JavaScript but not everything I can get this to work. The Adobe Animate CC program generates code that is native Create JS. The local script connects to Create JS to make things animate. When I run the code without a JavaScript timer I think that both functions try to fire at the same time. At this point only, one animation works and shows up. Throwing them into a set Interval fixes this because they are not starting at the same time. I am using jQuery to load and run them on my page. I have seen some jQuery functions, that can run two functions simultaneously. I can’t remember which one. Does anybody know of way jQuery can call two functions in a way where they do not collide? I am interested in knowing how can get a function to fire and not collide in theory also. So any help for that is appreciated. But I would like to know how jQuery would handle functions totaling two, three, four etc. Thanks
Doberman-German.zip
Doberman-German.zip
this is a limitation of any plugin, not only jQuery based, no wizard in the box
the plugin need to have something built inside from beginning to handle this, if not, there's no solution.
if the objects (here canvas) to animate are different, you may put both animation in an iframe, both iframe src to separate page
main page (your current DogyHTML5CanvasD.html) :
here for canvas1.html :
canvas2.html :
the plugin need to have something built inside from beginning to handle this, if not, there's no solution.
if the objects (here canvas) to animate are different, you may put both animation in an iframe, both iframe src to separate page
main page (your current DogyHTML5CanvasD.html) :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>DogyHTML5Canvas</title>
<style>
.myiframe {
width:400px;
height:300px;
}
</style>
</head>
<body style="margin:0px;">
<iframe src="canvas1.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas2.html" class="myiframe" frameBorder="0"></iframe>
</body>
</html>here for canvas1.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>DogyHTML5CanvasD</title>
<!-- write your code here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="DogyHTML5CanvasD.js"></script>
<!-- write your code here -->
<script>
$(document).ready(function () {
function init(anId,canvasId,acId,doId,AnID,libName) {
canvas = document.getElementById(canvasId);
var anim_container = document.getElementById(acId);
var dom_overlay_container = document.getElementById(doId);
var comp=AnID.getComposition(anId);
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,AnID,libName)});
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,AnID,libName) {
//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 exportRoot = eval("new lib." + libName + "()");
var stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
var fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
AnID.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
function setIntervalnow(func, interval) {
func();
return setInterval(func, interval);
}
var myInterval = setIntervalnow( frstRun => {
init("9001234LIBD","cv01","ac01","do01",AdobeAn01,"DogyHTML5CanvasD");
}, 4000);
});
</script>
</head>
<body style="margin:0px;">
<div id="ac01" style="background-color:rgba(255, 255, 255, 1.00); width:400px; height:300px">
<canvas id="cv01" width="400" height="300" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="do01" style="pointer-events:none; overflow:hidden; width:400px; height:300px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>canvas2.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>DogyHTML5CanvasG</title>
<!-- write your code here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="DogyHTML5CanvasG.js"></script>
<!-- write your code here -->
<script>
$(document).ready(function () {
function init(anId,canvasId,acId,doId,AnID,libName) {
canvas = document.getElementById(canvasId);
var anim_container = document.getElementById(acId);
var dom_overlay_container = document.getElementById(doId);
var comp=AnID.getComposition(anId);
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,AnID,libName)});
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,AnID,libName) {
//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 exportRoot = eval("new lib." + libName + "()");
var stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
var fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
AnID.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
function setIntervalnow(func, interval) {
func();
return setInterval(func, interval);
}
var myInterval = setIntervalnow( frstRun => {
init("9005678LIBG","cv02","ac02","do02",AdobeAn02,"DogyHTML5CanvasG");
}, 4000);
});
</script>
</head>
<body style="margin:0px;">
<div id="ac02" style="background-color:rgba(255, 255, 255, 1.00); width:400px; height:300px">
<canvas id="cv02" width="400" height="300" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="do02" style="pointer-events:none; overflow:hidden; width:400px; height:300px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>ASKER
@Julian Hansen, I understand. In the past, on some forums, I have seen how giving more than less context is helpful. I find being narrow does not provide for a member to see the scope of what is truly part of the problem. I understand that forums need to be somewhat narrow to be efficient. The question has already had one answer that fits the context for what I am working with. That is application, technology, and language. This is much more helpful than if I had made the question general. I see what you mean about *.zip files and will try to do better with the conciseness of my questions. Thanks
ASKER
@leakim971 Thanks so much for the reply. It seems that your answer is the way this is getting handled a lot of the time. I have a concern with adding iframes to a page that is going to have a lot of code from JavaScript and PHP plus others. It seems like it will be too much extra code that has to be considered. My example is for two animations but what about 10? Thanks
My example is for two animations but what about 10?
what about :
<iframe src="canvas1.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas2.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas3.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas4.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas5.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas6.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas7.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas8.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas9.html" class="myiframe" frameBorder="0"></iframe>
<iframe src="canvas0.html" class="myiframe" frameBorder="0"></iframe>This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Second - try to narrow down what it is you are asking - you are familiar with your project - we are not - if there is too much information to absorb again you will chase experts away - make it easy for them to see at a glance what it is you are asking. If you can provide a link to code that demonstrates the problem or what you are trying to do that is always a plus as it provides a hook for experts to get started.
From your post above I am going to pick this point as a starting point
Can you explain what you mean by this - lay it out for us - what you want to do - how you have tried it - what you were expecting - and what actually happened.