1

我是 createjs 和 jquery mobile 的新手。这可能是一个简单的问题，但我不知道该怎么做，也没有在网上找到任何答案。

我使用用于 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...
}

我的问题是如何使用滑块转到画布对象中的特定实例框架。
我很感激任何答案！

4

2 回答 2

0

toolkit 的 flash 阶段通常是您的 FLA 的名称，它是生成的 JavaScript 文件中的第一个库定义。通常它是在 Toolkit 创建的 HTML 中作为“exportRoot”为您创建的。在您的情况下，它可能是“SquareB”的一个实例（请注意“舞台内容”注释）。

    var exportRoot = new lib.SquareB();
    exportRoot.instance.gotoAndStop(1);
于 2012-11-01T17:11:45.870 回答
0

随时在支持论坛http://community.createjs.com上发布 CreateJS 问题

这看起来像用于 CreateJS 输出的 Toolkit。这不起作用的可能原因是，除非您创建了一个名为“canvas”的变量，它是 Flash 的导出根，否则 squareB1 没有定义。Flash 中舞台上的元素将作为 exportRoot 的子项导出，您可以在生成的 HTML 引导文件中看到该子项。squareB1 孩子可能生活在该范围内。

您能否发布更多代码来显示创建导出根目录的位置，或者更多地描述您的设置？

于 2012-10-30T21:28:24.733 回答