Несколько холстов в сочетании с анимированным CC?Возможный? - PullRequest
Новая
       47

Несколько холстов в сочетании с анимированным CC?Возможный?

0 голосов
/ 13 декабря 2018

Я не получил ответа на этот вопрос , поэтому я решил разделить анимацию.Теперь я хочу объединить 2 холста.

первый холст: 

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>ipzk</title>
<!-- write your code here -->
<style>
  body {
    overflow:hidden;
  }
  #animation_container {
    position:absolute;
    margin:auto;
    left:-100%;right:-100%;
    top:-100%;bottom:-100%;
  }
</style>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="ipzk.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("3233CBCD1A1D3C42ABE1CA5E1A3C8363");
    var lib=comp.getLibrary();
    handleComplete({},comp);
}
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 lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    exportRoot = new lib.ipz();
    stage = new lib.Stage(canvas);
    stage.enableMouseOver();    
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        stage.addChild(exportRoot);
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }       
    //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;            
            stage.tickOnUpdate = false;            
            stage.update();            
            stage.tickOnUpdate = true;      
        }
    }
    makeResponsive(true,'both',true,2); 
    AdobeAn.compositionLoaded(lib.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:620px; height:550px">
        <canvas id="canvas" width="620" height="550" 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:620px; height:550px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>
    </div>

</body>
</html>

второй холст: 

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>minipz</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="minipz.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("A0BE97CBA444F248B8DE9B8DD081D02C");
    var lib=comp.getLibrary();
    handleComplete({},comp);
}
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 lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    exportRoot = new lib.minipz();
    stage = new lib.Stage(canvas);
    stage.enableMouseOver();    
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        stage.addChild(exportRoot);
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }       
    //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;            
            stage.tickOnUpdate = false;            
            stage.update();            
            stage.tickOnUpdate = true;      
        }
    }
    makeResponsive(false,'both',false,1);   
    AdobeAn.compositionLoaded(lib.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:130px; height:100px">
        <canvas id="canvas" width="130" height="100" 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:130px; height:100px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>
    </div>
</body>
</html>

переменные идентичны, я пытался создать новые переменныено отображается только второй холст.

Я пробовал canvas2, stage2, anim_container2, dom_overlay_container2, comp2, lib2, ss2, handleComplete2, makeResponsive2 ...

Второй должен быть выше первого.Спасибо

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

хорошо, это exportRoot.myname и exportRoot2.myname2 (exportroot2.myname2.mc1.mc2) myname может быть ipzk и myname2 minipz, если это имя определено в Adobe Animate или Flash MovieClip

0 голосов
/ 14 декабря 2018

ОК, я сделал это: 

    <html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>ipzk</title>
<!-- write your code here -->
<style>
  body {
    overflow:hidden;
  }
  #animation_container {
    position:absolute;
    margin:auto;
    left:-100%;right:-100%;
    top:-100%;bottom:-100%;
  }
</style>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="ipzk.js"></script>
<script src="minipz.js"></script>
<script>
var canvas, stage, exportRoot, exportRoot2, anim_container, anim_container2, dom_overlay_container, dom_overlay_container2, fnStartAnimation;
function init() {   
    canvas = document.getElementById("canvas2");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp2=AdobeAn.getComposition("A0BE97CBA444F248B8DE9B8DD081D02C");
    var lib2=comp2.getLibrary();
    var ss2=comp2.getSpriteSheet();
    exportRoot2 = new lib2.minipz();
    console.log(lib2);
    stage = new lib2.Stage(canvas);
    stage.enableMouseOver();    
    stage.addChild(exportRoot2);
    createjs.Ticker.setFPS(lib2.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    canvas = document.getElementById("canvas"); 
    var comp=AdobeAn.getComposition("3233CBCD1A1D3C42ABE1CA5E1A3C8363");
    var lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    exportRoot = new lib.ipz();
    stage = new lib.Stage(canvas);
    stage.enableMouseOver();    
    stage.addChild(exportRoot);
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);    

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;            
            stage.tickOnUpdate = false;            
            stage.update();            
            stage.tickOnUpdate = true;      
        }
    }
    makeResponsive(true,'both',true,2); 
}


</script>

</head>
<body onload="init();" style="margin:0px;">
    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:620px; height:550px">
        <canvas id="canvas" width="620" height="550" 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:620px; height:550px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>      
    </div>  
        <canvas id="canvas2" width="130" height="100" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>     
</body>
</html>

Теперь, как общаться между двумя холстами?

...