How to syncronize iframes (html5-banner)?

390 views Asked by At

I would like to synchronize two advertising banners (html5) on a website. The banners are displayed in iframes. I have unfortunately only access to the code of the two banner. I'm trying to use localconnection.js

The html5 banner I create with adobe animate. My two test banners contain a very simple animation. The one banner is a little shorter, in order to demonstrate the temporal "diverge" with different banners. The animation of the right banner I stopped in the first picture (directly behind the Connect) - which should then be "pushed" from the left banner. Is that right? And if so, how do I do that?

HTML - Banner 1:

    <!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>sky1</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="sky1.js"></script>
<script src="localconnection.js"></script>

<script>
var canvas, stage, exportRoot;
function init() {
    canvas = document.getElementById("canvas");
    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.sky1();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
    //Registers the "tick" event listener.
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);        
    //Code to support hidpi screens and responsive scaling.
    (function(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 = w*sRatio+'px';         
            canvas.style.height = h*sRatio+'px';
            stage.scaleX = pRatio*sRatio;           
            stage.scaleY = pRatio*sRatio;           
            lastW = iw; lastH = ih; lastS = sRatio;     
        }
    })(false,'both',false,1);   
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
    <canvas id="canvas" width="200" height="668" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>

js - Banner 1:

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes
lib.webFontTxtInst = {}; 
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];

// library properties:
lib.properties = {
    width: 200,
    height: 668,
    fps: 24,
    color: "#FFFFFF",
    opacity: 1.00,
    webfonts: {},
    manifest: []
};



lib.ssMetadata = [];



lib.updateListCache = function (cacheList) {        
    for(var i = 0; i < cacheList.length; i++) {     
        if(cacheList[i].cacheCanvas)        
            cacheList[i].updateCache();     
    }       
};      

lib.addElementsToCache = function (textInst, cacheList) {       
    var cur = textInst;     
    while(cur != exportRoot) {      
        if(cacheList.indexOf(cur) != -1)        
            break;      
        cur = cur.parent;       
    }       
    if(cur != exportRoot) { //we have found an element in the list      
        var cur2 = textInst;        
        var index = cacheList.indexOf(cur);     
        while(cur2 != cur) { //insert all it's children just before it      
            cacheList.splice(index, 0, cur2);       
            cur2 = cur2.parent;     
            index++;        
        }       
    }       
    else {  //append element and it's parents in the array      
        cur = textInst;     
        while(cur != exportRoot) {      
            cacheList.push(cur);        
            cur = cur.parent;       
        }       
    }       
};      

lib.gfontAvailable = function(family, totalGoogleCount) {       
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);      

    loadedGoogleCount++;        
    if(loadedGoogleCount == totalGoogleCount) {     
        lib.updateListCache(gFontsUpdateCacheList);     
    }       
};      

lib.tfontAvailable = function(family, totalTypekitCount) {      
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);      

    loadedTypekitCount++;       
    if(loadedTypekitCount == totalTypekitCount) {       
        lib.updateListCache(tFontsUpdateCacheList);     
    }       
};
// symbols:



(lib.Symbol1 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Ebene 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#990033").s().p("AvyMwIAA5fIflAAIAAZfg");
    this.shape.setTransform(101.1,81.7);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,202.3,163.4);


// stage content:
(lib.sky1 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        LC.key = '123';
                    LC.name = 'links';
                    LC.frames = 'rechts';
                    LC.onConnect = function () {
                        console.log('Do this as soon as connection established!');
                        LC.rechts.document.getElementsByTagName('body')[0].style.backgroundColor = 'red';
                    };
                    LC.connect();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(203));

    // animation
    this.instance = new lib.Symbol1();
    this.instance.parent = this;
    this.instance.setTransform(100,80.6,1,1,0,0,0,101.1,81.7);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:100.1,y:85.7},0).wait(1).to({y:90.8},0).wait(1).to({y:95.9},0).wait(1).to({y:101},0).wait(1).to({y:106.1},0).wait(1).to({y:111.3},0).wait(1).to({y:116.4},0).wait(1).to({y:121.5},0).wait(1).to({y:126.6},0).wait(1).to({x:100.2,y:131.7},0).wait(1).to({y:136.8},0).wait(1).to({y:141.9},0).wait(1).to({y:147},0).wait(1).to({y:152.1},0).wait(1).to({y:157.2},0).wait(1).to({y:162.3},0).wait(1).to({y:167.4},0).wait(1).to({y:172.6},0).wait(1).to({x:100.3,y:177.7},0).wait(1).to({y:182.8},0).wait(1).to({y:187.9},0).wait(1).to({y:193},0).wait(1).to({y:198.1},0).wait(1).to({y:203.2},0).wait(1).to({y:208.3},0).wait(1).to({y:213.4},0).wait(1).to({y:218.5},0).wait(1).to({x:100.4,y:223.6},0).wait(1).to({y:228.7},0).wait(1).to({y:233.9},0).wait(1).to({y:239},0).wait(1).to({y:244.1},0).wait(1).to({y:249.2},0).wait(1).to({y:254.3},0).wait(1).to({y:259.4},0).wait(1).to({y:264.5},0).wait(1).to({x:100.5,y:269.6},0).wait(1).to({y:274.7},0).wait(1).to({y:279.8},0).wait(1).to({y:284.9},0).wait(1).to({y:290.1},0).wait(1).to({y:295.2},0).wait(1).to({y:300.3},0).wait(1).to({y:305.4},0).wait(1).to({y:310.5},0).wait(1).to({x:100.6,y:315.6},0).wait(1).to({y:320.7},0).wait(1).to({y:325.8},0).wait(1).to({y:330.9},0).wait(1).to({y:336},0).wait(1).to({y:341.1},0).wait(1).to({y:346.2},0).wait(1).to({y:351.4},0).wait(1).to({y:356.5},0).wait(1).to({x:100.7,y:361.6},0).wait(1).to({y:366.7},0).wait(1).to({y:371.8},0).wait(1).to({y:376.9},0).wait(1).to({y:382},0).wait(1).to({y:387.1},0).wait(1).to({y:392.2},0).wait(1).to({y:397.3},0).wait(1).to({y:402.4},0).wait(1).to({x:100.8,y:407.5},0).wait(1).to({y:412.7},0).wait(1).to({y:417.8},0).wait(1).to({y:422.9},0).wait(1).to({y:428},0).wait(1).to({y:433.1},0).wait(1).to({y:438.2},0).wait(1).to({y:443.3},0).wait(1).to({y:448.4},0).wait(1).to({x:100.9,y:453.5},0).wait(1).to({y:458.6},0).wait(1).to({y:463.7},0).wait(1).to({y:468.9},0).wait(1).to({y:474},0).wait(1).to({y:479.1},0).wait(1).to({y:484.2},0).wait(1).to({y:489.3},0).wait(1).to({y:494.4},0).wait(1).to({x:101,y:499.5},0).wait(1).to({y:504.6},0).wait(1).to({y:509.7},0).wait(1).to({y:514.8},0).wait(1).to({y:519.9},0).wait(1).to({y:525},0).wait(1).to({y:530.2},0).wait(1).to({y:535.3},0).wait(1).to({y:540.4},0).wait(1).to({x:101.1,y:545.5},0).wait(1).to({y:550.6},0).wait(1).to({y:555.7},0).wait(1).to({y:560.8},0).wait(1).to({y:565.9},0).wait(1).to({y:571},0).wait(1).to({y:576.1},0).wait(1).to({y:581.2},0).wait(1).to({y:586.4},0).wait(1).to({y:581.5},0).wait(1).to({y:576.6},0).wait(1).to({y:571.7},0).wait(1).to({y:566.8},0).wait(1).to({y:561.9},0).wait(1).to({y:557},0).wait(1).to({y:552.1},0).wait(1).to({y:547.2},0).wait(1).to({y:542.3},0).wait(1).to({y:537.4},0).wait(1).to({y:532.5},0).wait(1).to({y:527.6},0).wait(1).to({y:522.7},0).wait(1).to({y:517.8},0).wait(1).to({y:512.9},0).wait(1).to({y:508},0).wait(1).to({y:503.1},0).wait(1).to({y:498.2},0).wait(1).to({y:493.3},0).wait(1).to({y:488.4},0).wait(1).to({y:483.5},0).wait(1).to({y:478.6},0).wait(1).to({y:473.7},0).wait(1).to({y:468.8},0).wait(1).to({y:463.9},0).wait(1).to({y:459},0).wait(1).to({y:454.1},0).wait(1).to({y:449.2},0).wait(1).to({y:444.3},0).wait(1).to({y:439.4},0).wait(1).to({y:434.5},0).wait(1).to({y:429.6},0).wait(1).to({y:424.7},0).wait(1).to({y:419.8},0).wait(1).to({y:414.9},0).wait(1).to({y:410},0).wait(1).to({y:405.1},0).wait(1).to({y:400.2},0).wait(1).to({y:395.3},0).wait(1).to({y:390.4},0).wait(1).to({y:385.5},0).wait(1).to({y:380.6},0).wait(1).to({y:375.7},0).wait(1).to({y:370.8},0).wait(1).to({y:365.9},0).wait(1).to({y:361},0).wait(1).to({y:356.1},0).wait(1).to({y:351.2},0).wait(1).to({y:346.3},0).wait(1).to({y:341.4},0).wait(1).to({y:336.5},0).wait(1).to({y:331.6},0).wait(1).to({y:326.7},0).wait(1).to({y:321.8},0).wait(1).to({y:316.9},0).wait(1).to({y:312},0).wait(1).to({y:307.1},0).wait(1).to({y:302.2},0).wait(1).to({y:297.3},0).wait(1).to({y:292.4},0).wait(1).to({y:287.5},0).wait(1).to({y:282.6},0).wait(1).to({y:277.7},0).wait(1).to({y:272.8},0).wait(1).to({y:267.9},0).wait(1).to({y:263},0).wait(1).to({y:258.1},0).wait(1).to({y:253.2},0).wait(1).to({y:248.3},0).wait(1).to({y:243.4},0).wait(1).to({y:238.5},0).wait(1).to({y:233.6},0).wait(1).to({y:228.7},0).wait(1).to({y:223.8},0).wait(1).to({y:218.9},0).wait(1).to({y:214},0).wait(1).to({y:209.1},0).wait(1).to({y:204.2},0).wait(1).to({y:199.3},0).wait(1).to({y:194.4},0).wait(1).to({y:189.5},0).wait(1).to({y:184.6},0).wait(1).to({y:179.7},0).wait(1).to({y:174.8},0).wait(1).to({y:169.9},0).wait(1).to({y:165},0).wait(1).to({y:160.1},0).wait(1).to({y:155.2},0).wait(1).to({y:150.3},0).wait(1).to({y:145.4},0).wait(1).to({y:140.5},0).wait(1).to({y:135.6},0).wait(1).to({y:130.7},0).wait(1).to({y:125.8},0).wait(1).to({y:120.9},0).wait(1).to({y:116},0).wait(1).to({y:111.1},0).wait(1).to({y:106.2},0).wait(1).to({y:101.3},0).wait(1).to({y:96.4},0).wait(1).to({y:91.5},0).wait(1).to({y:86.6},0).wait(1).to({y:81.7},0).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(98.9,332.9,202.3,163.4);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

HTML - Banner 2:

<!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>sky2</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="sky2.js"></script>
<script src="localconnection.js"></script>

<script>
var canvas, stage, exportRoot;
function init() {
    canvas = document.getElementById("canvas");
    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.sky2();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
    //Registers the "tick" event listener.
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);        
    //Code to support hidpi screens and responsive scaling.
    (function(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 = w*sRatio+'px';         
            canvas.style.height = h*sRatio+'px';
            stage.scaleX = pRatio*sRatio;           
            stage.scaleY = pRatio*sRatio;           
            lastW = iw; lastH = ih; lastS = sRatio;     
        }
    })(false,'both',false,1);   
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
    <canvas id="canvas" width="200" height="668" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>

js - Banner 2:

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes
lib.webFontTxtInst = {}; 
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];

// library properties:
lib.properties = {
    width: 200,
    height: 668,
    fps: 24,
    color: "#FFFFFF",
    opacity: 1.00,
    webfonts: {},
    manifest: []
};



lib.ssMetadata = [];



lib.updateListCache = function (cacheList) {        
    for(var i = 0; i < cacheList.length; i++) {     
        if(cacheList[i].cacheCanvas)        
            cacheList[i].updateCache();     
    }       
};      

lib.addElementsToCache = function (textInst, cacheList) {       
    var cur = textInst;     
    while(cur != exportRoot) {      
        if(cacheList.indexOf(cur) != -1)        
            break;      
        cur = cur.parent;       
    }       
    if(cur != exportRoot) { //we have found an element in the list      
        var cur2 = textInst;        
        var index = cacheList.indexOf(cur);     
        while(cur2 != cur) { //insert all it's children just before it      
            cacheList.splice(index, 0, cur2);       
            cur2 = cur2.parent;     
            index++;        
        }       
    }       
    else {  //append element and it's parents in the array      
        cur = textInst;     
        while(cur != exportRoot) {      
            cacheList.push(cur);        
            cur = cur.parent;       
        }       
    }       
};      

lib.gfontAvailable = function(family, totalGoogleCount) {       
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);      

    loadedGoogleCount++;        
    if(loadedGoogleCount == totalGoogleCount) {     
        lib.updateListCache(gFontsUpdateCacheList);     
    }       
};      

lib.tfontAvailable = function(family, totalTypekitCount) {      
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);      

    loadedTypekitCount++;       
    if(loadedTypekitCount == totalTypekitCount) {       
        lib.updateListCache(tFontsUpdateCacheList);     
    }       
};
// symbols:



(lib.Symbol1 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Ebene 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#990033").s().p("AvyMwIAA5fIflAAIAAZfg");
    this.shape.setTransform(101.1,81.7);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,202.3,163.4);


// stage content:
(lib.sky2 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        LC.key = '123';
        LC.name = 'rechts';
        LC.frames = 'links';
        LC.onConnect = function () {
                console.log('Do this as soon as connection established!');
                LC.links.document.getElementsByTagName('body')[0].style.backgroundColor = 'blue';
        };
        LC.connect();

        this.stop();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(202));

    // animation
    this.instance = new lib.Symbol1();
    this.instance.parent = this;
    this.instance.setTransform(100,80.6,1,1,0,0,0,101.1,81.7);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:100.1,y:85.7},0).wait(1).to({y:90.8},0).wait(1).to({y:95.9},0).wait(1).to({y:101},0).wait(1).to({y:106.1},0).wait(1).to({y:111.3},0).wait(1).to({y:116.4},0).wait(1).to({y:121.5},0).wait(1).to({y:126.6},0).wait(1).to({x:100.2,y:131.7},0).wait(1).to({y:136.8},0).wait(1).to({y:141.9},0).wait(1).to({y:147},0).wait(1).to({y:152.1},0).wait(1).to({y:157.2},0).wait(1).to({y:162.3},0).wait(1).to({y:167.4},0).wait(1).to({y:172.6},0).wait(1).to({x:100.3,y:177.7},0).wait(1).to({y:182.8},0).wait(1).to({y:187.9},0).wait(1).to({y:193},0).wait(1).to({y:198.1},0).wait(1).to({y:203.2},0).wait(1).to({y:208.3},0).wait(1).to({y:213.4},0).wait(1).to({y:218.5},0).wait(1).to({x:100.4,y:223.6},0).wait(1).to({y:228.7},0).wait(1).to({y:233.9},0).wait(1).to({y:239},0).wait(1).to({y:244.1},0).wait(1).to({y:249.2},0).wait(1).to({y:254.3},0).wait(1).to({y:259.4},0).wait(1).to({y:264.5},0).wait(1).to({x:100.5,y:269.6},0).wait(1).to({y:274.7},0).wait(1).to({y:279.8},0).wait(1).to({y:284.9},0).wait(1).to({y:290.1},0).wait(1).to({y:295.2},0).wait(1).to({y:300.3},0).wait(1).to({y:305.4},0).wait(1).to({y:310.5},0).wait(1).to({x:100.6,y:315.6},0).wait(1).to({y:320.7},0).wait(1).to({y:325.8},0).wait(1).to({y:330.9},0).wait(1).to({y:336},0).wait(1).to({y:341.1},0).wait(1).to({y:346.2},0).wait(1).to({y:351.4},0).wait(1).to({y:356.5},0).wait(1).to({x:100.7,y:361.6},0).wait(1).to({y:366.7},0).wait(1).to({y:371.8},0).wait(1).to({y:376.9},0).wait(1).to({y:382},0).wait(1).to({y:387.1},0).wait(1).to({y:392.2},0).wait(1).to({y:397.3},0).wait(1).to({y:402.4},0).wait(1).to({x:100.8,y:407.5},0).wait(1).to({y:412.7},0).wait(1).to({y:417.8},0).wait(1).to({y:422.9},0).wait(1).to({y:428},0).wait(1).to({y:433.1},0).wait(1).to({y:438.2},0).wait(1).to({y:443.3},0).wait(1).to({y:448.4},0).wait(1).to({x:100.9,y:453.5},0).wait(1).to({y:458.6},0).wait(1).to({y:463.7},0).wait(1).to({y:468.9},0).wait(1).to({y:474},0).wait(1).to({y:479.1},0).wait(1).to({y:484.2},0).wait(1).to({y:489.3},0).wait(1).to({y:494.4},0).wait(1).to({x:101,y:499.5},0).wait(1).to({y:504.6},0).wait(1).to({y:509.7},0).wait(1).to({y:514.8},0).wait(1).to({y:519.9},0).wait(1).to({y:525},0).wait(1).to({y:530.2},0).wait(1).to({y:535.3},0).wait(1).to({y:540.4},0).wait(1).to({x:101.1,y:545.5},0).wait(1).to({y:550.6},0).wait(1).to({y:555.7},0).wait(1).to({y:560.8},0).wait(1).to({y:565.9},0).wait(1).to({y:571},0).wait(1).to({y:576.1},0).wait(1).to({y:581.2},0).wait(1).to({y:586.4},0).wait(1).to({y:581.4},0).wait(1).to({y:576.4},0).wait(1).to({y:571.4},0).wait(1).to({y:566.4},0).wait(1).to({y:561.4},0).wait(1).to({y:556.4},0).wait(1).to({y:551.4},0).wait(1).to({y:546.4},0).wait(1).to({y:541.4},0).wait(1).to({y:536.4},0).wait(1).to({y:531.4},0).wait(1).to({y:526.4},0).wait(1).to({y:521.4},0).wait(1).to({y:516.4},0).wait(1).to({y:511.4},0).wait(1).to({y:506.4},0).wait(1).to({y:501.4},0).wait(1).to({y:496.4},0).wait(1).to({y:491.4},0).wait(1).to({y:486.4},0).wait(1).to({y:481.4},0).wait(1).to({y:476.4},0).wait(1).to({y:471.4},0).wait(1).to({y:466.4},0).wait(1).to({y:461.4},0).wait(1).to({y:456.4},0).wait(1).to({y:451.4},0).wait(1).to({y:446.4},0).wait(1).to({y:441.5},0).wait(1).to({y:436.5},0).wait(1).to({y:431.5},0).wait(1).to({y:426.5},0).wait(1).to({y:421.5},0).wait(1).to({y:416.5},0).wait(1).to({y:411.5},0).wait(1).to({y:406.5},0).wait(1).to({y:401.5},0).wait(1).to({y:396.5},0).wait(1).to({y:391.5},0).wait(1).to({y:386.5},0).wait(1).to({y:381.5},0).wait(1).to({y:376.5},0).wait(1).to({y:371.5},0).wait(1).to({y:366.5},0).wait(1).to({y:361.5},0).wait(1).to({y:356.5},0).wait(1).to({y:351.5},0).wait(1).to({y:346.5},0).wait(1).to({y:341.5},0).wait(1).to({y:336.5},0).wait(1).to({y:331.5},0).wait(1).to({y:326.5},0).wait(1).to({y:321.5},0).wait(1).to({y:316.5},0).wait(1).to({y:311.5},0).wait(1).to({y:306.5},0).wait(1).to({y:301.6},0).wait(1).to({y:296.6},0).wait(1).to({y:291.6},0).wait(1).to({y:286.6},0).wait(1).to({y:281.6},0).wait(1).to({y:276.6},0).wait(1).to({y:271.6},0).wait(1).to({y:266.6},0).wait(1).to({y:261.6},0).wait(1).to({y:256.6},0).wait(1).to({y:251.6},0).wait(1).to({y:246.6},0).wait(1).to({y:241.6},0).wait(1).to({y:236.6},0).wait(1).to({y:231.6},0).wait(1).to({y:226.6},0).wait(1).to({y:221.6},0).wait(1).to({y:216.6},0).wait(1).to({y:211.6},0).wait(1).to({y:206.6},0).wait(1).to({y:201.6},0).wait(1).to({y:196.6},0).wait(1).to({y:191.6},0).wait(1).to({y:186.6},0).wait(1).to({y:181.6},0).wait(1).to({y:176.6},0).wait(1).to({y:171.6},0).wait(1).to({y:166.6},0).wait(1).to({y:161.6},0).wait(1).to({y:156.6},0).wait(1).to({y:151.7},0).wait(1).to({y:146.7},0).wait(1).to({y:141.7},0).wait(1).to({y:136.7},0).wait(1).to({y:131.7},0).wait(1).to({y:126.7},0).wait(1).to({y:121.7},0).wait(1).to({y:116.7},0).wait(1).to({y:111.7},0).wait(1).to({y:106.7},0).wait(1).to({y:101.7},0).wait(1).to({y:96.7},0).wait(1).to({y:91.7},0).wait(1).to({y:86.7},0).wait(1).to({y:81.7},0).wait(2));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(98.9,332.9,202.3,163.4);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
1

There are 1 answers

0
Emre Sakarya On

it's better to call LC.connect(); function at the end of handleComplete() event, because as soon as exportRoot defined, it's available to use it main Animation object.

For example :

.....
 exportRoot = new lib.sky2();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
 LC.key = '123';
                    LC.name = 'links';
                    LC.frames = 'rechts';
                    LC.onConnect = function () {
                        exportRoot.play();
LC.rechts.exportRoot.play();
                    };
exportRoot.stop();
                    LC.connect();
.....

on the other animation you only need to define & call LC.connect(); like this :

.....
 exportRoot = new lib.sky2();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
 LC.key = '123';
                    LC.name = 'rechts'; // adjust name
                    LC.frames = 'links'; // adjust frames
                    LC.onConnect = function () {
                        // no action needed here

                    };
exportRoot.stop();
                    LC.connect();
....