Uploading .js file to display animation

[duncanh57994477]

Hello, I'm looking for some help or pointers if possible. A few years ago I was working on some animations and had to extract some of the javascript from the .html file and combined it with the .js file. This is so I could just upload the .js into my website and feature it on page. This is the bit I stripped out of the .html file and added into the top of the .js file.jQuery(document).ready(function($) {

canvas = document.getElementById("canvas");
exportRoot = new lib._13TStoresRail();stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);});I've done a new animation for the website along a similar line but when I publish the files, the javascript in the html file looks totally different and I'm unsure which bit I can use to combine the two together. This is all the javascript in the .html file now:
<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");
createjs.MotionGuidePlugin.install();
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.WHS_CrystalBall_Animationv1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", handleTick)
function handleTick(event) {
var cameraInstance = exportRoot.___camera___instance;
if(cameraInstance)
{
if(cameraInstance._off != null && cameraInstance._off == true)
exportRoot.transformMatrix = new createjs.Matrix2D();
else
{
var mat = cameraInstance.getMatrix();
var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
mat.tx -= stageCenter.x;
mat.ty -= stageCenter.y;
var inverseMat = mat.invert();
inverseMat.prependTransform(stageCenter.x, stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
inverseMat.appendTransform(-stageCenter.x, -stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
exportRoot.transformMatrix = inverseMat;
}
}
stage.update();
}
} 
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) { 
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) { 
sRatio = lastS; 
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'both',false,1);
fnStartAnimation();
}
</script>If anyone can give me some advice I'd appreciate it.Cheers

[ClayUUID]

Trying to manually smash together your JS and Animate's JS is a path that leads only to pain and suffering. Just embed the animation in an iframe.

[duncanh57994477]

Thanks for responding, this is how the files where exported last time (which might be a better explanation)

This was taken from the html and inserted at the top:

jQuery(document).ready(function($) {

canvas = document.getElementById("canvas");

exportRoot = new lib._13TStoresRail();

stage = new createjs.Stage(canvas);

stage.addChild(exportRoot);

stage.update();

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick", stage);

});

You are correct but this is the way its been built and I'm trying to facilitate. Do you know how to export from AA in the manner above?

[ClayUUID]

Nope, I'm no fan of sticking my hand in the blender like that. If you're still determined to stick with your approach, all I can recommend is copying everything and see what happens.

[duncanh57994477]

Yep, at the moment I'm just trying to follow whats been done before

[Colin Holgate · Accepted solution]

The code you showed is nearly five years old, and so it's not surprising that the current publish code looks different.

Many people solve the problem of needing to only upload one file by having the JavaScript included in the HTML. Would that approach do the same thing for you?

[duncanh57994477]

Potentially, I've tried publishing it with everything included into the .html file. I'll have another punt at that and come back.

Thanks for answering