控制與jquery移動滑塊easeljs符號

Question

我是createjs和jquery移動新。這可能是一個簡單的問題，但我不知道如何去做，也沒有在網上找到任何答案。

我使用CreateJS的Flash工具包創建了一個畫布對象。我想用jQuery Mobile滑塊控制它。

這是我的html代碼：

<canvas id="canvas" width="200" height="200" style="background-color:#ffffff"></canvas> 
<input type="range" name="slider-1" id="slider-1" value="1" min="1" max="6" data-highlight="true" /> 

，我想控制的實例的名稱是squareB1，它的時間表有6幀，看 片段 整個下面的代碼。注意滑塊有6個值，相同的幀數。

(function (lib, img, cjs) { 

var p; // shortcut to reference prototypes 

// stage content: 
(lib.squareB = function() { 
this.initialize(); 

// Layer 1 
this.instance = new lib.squareB1(); 
this.instance.setTransform(100,100,1,1,0,0,0,19.4,60.5); 

this.addChild(this.instance); 
}).prototype = p = new cjs.Container(); 
p.nominalBounds = new cjs.Rectangle(80.6,39.5,38.9,121); 

// symbols: 
(lib.squareB1 = function(mode,startPosition,loop) { 
this.initialize(mode,startPosition,loop,{thiner:0,thin:1,mean:2,thick:3,thicker:4},true); 

// timeline functions: 
this.frame_0 = function() { 
    this.stop(); 
} 

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

// Layer 1 
this.shape = new cjs.Shape(); 
this.shape.graphics.f("rgba(71,31,7,0.2)").s("#1A1A1A").ss(1,1,1).p("ADCpcIAAS5ImDAAIAAy5IGDAA").cp(); 
this.shape.setTransform(19.5,60.5); 

this.shape_1 = new cjs.Shape(); 
this.shape_1.graphics.f("rgba(71,31,7,0.2)").s("#1A1A1A").ss(1,1,1).p("Ak3pcIJvAAIAAS5IpvAAIAAy5").cp(); 
this.shape_1.setTransform(19.4,60.5); 

this.shape_2 = new cjs.Shape(); 
this.shape_2.graphics.f("rgba(71,31,7,0.2)").s("#1A1A1A").ss(1,1,1).p("AmtpcINbAAIAAS5ItbAAIAAy5").cp(); 
this.shape_2.setTransform(19.4,60.5); 

this.shape_3 = new cjs.Shape(); 
this.shape_3.graphics.f("rgba(71,31,7,0.2)").s("#1A1A1A").ss(1,1,1).p("AojpcIRHAAIAAS5IxHAAIAAy5").cp(); 
this.shape_3.setTransform(19.4,60.5); 

this.shape_4 = new cjs.Shape(); 
this.shape_4.graphics.f("rgba(71,31,7,0.2)").s("#1A1A1A").ss(1,1,1).p("AKaJdI0zAAIAAy5IUzAAIAAS5").cp(); 
this.shape_4.setTransform(19.4,60.5); 

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape}]}).to({state:[{t:this.shape_1}]},1).to({state:[{t:this.shape_2}]},1).to({state:[{t:this.shape_3}]},1).to({state:[{t:this.shape_4}]},1).wait(1)); 

}).prototype = p = new cjs.MovieClip(); 
p.nominalBounds = new cjs.Rectangle(-35.3,0,109.7,121); 

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

然後，我做這樣的事情在jQuery中，這又是一個JS文件的一部分：

var canvas, stage, exportRoot; 

function init() { 
canvas = document.getElementById("canvas"); 
exportRoot = new lib.squareB(); 

stage = new createjs.Stage(canvas); 
stage.addChild(exportRoot); 
stage.update(); 

createjs.Ticker.setFPS(24); 
createjs.Ticker.addListener(stage); 
} 

$('#slider-1').live('change', function(){ 
    var slider_value = $(this).slider().val(); 
    if(slider_value==1){ 
    } 
    else if(slider_value==2){ 
     //here is the issue, squareB1 is the symbol instance 
     exportRoot.squareB1.gotoAndStop(1); 
    } 
    else if... 
} 

我的問題是如何通過去實例的畫布對象的特定幀滑塊。
我很欣賞任何答案！

Answer 1

隨意張貼在支持論壇http://community.createjs.com

這看起來像工具箱的CreateJS輸出CreateJS問題。可能的原因不起作用是因爲除非創建了名爲「canvas」的變量，該變量是Flash的輸出根，否則squareB1未定義。在Flash中處於舞臺上的元素將作爲exportRoot的子元素導出，您可以在生成的HTML引導程序文件中看到該元素。廣場B1的孩子可能住在那個範圍內。

你可以發佈更多的代碼來顯示出口的創建位置，或者說你的設置多一點？

Answer 2

工具箱的flash階段通常是您的FLA的名稱，它是生成的JavaScript文件中的第一個庫定義。通常它是作爲Toolkit創建的HTML中的「exportRoot」創建的。就你而言，它可能是「SquareB」的一個實例（請注意「舞臺內容」評論）。

var exportRoot = new lib.SquareB(); 
    exportRoot.instance.gotoAndStop(1);