1

createjsとjquerymobileは初めてです。これは簡単な質問かもしれませんが、私はそれを行う方法がわからず、オンラインで答えを見つけられませんでした。

CreateJS用のFlashツールキットを使用してキャンバスオブジェクトを作成しました。jQueryMobileスライダーで制御したい。

これは私の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

CreateJSの質問をサポートフォーラムhttp://community.createjs.comに投稿してください。

これは、CreateJS出力用のツールキットのように見えます。これが機能しない理由として考えられるのは、Flashからのエクスポートルートである「canvas」という名前の変数を作成していない限り、squareB1が定義されていないためです。Flashのステージに存在する要素は、exportRootの子としてエクスポートされます。これは、作成される生成されたHTMLブートストラップファイルで確認できます。squareB1の子は、おそらくそのスコープに住んでいます。

エクスポートルートが作成された場所を示すコードをさらに投稿したり、セットアップについてもう少し説明したりできますか？

于 2012-10-30T21:28:24.733 に答える
0

ツールキットのフラッシュステージは通常、FLAの名前であり、生成されたJavaScriptファイルの最初のライブラリ定義です。通常、Toolkitが作成するHTMLで「exportRoot」として作成されます。あなたの場合、それはおそらく「SquareB」のインスタンスです（「ステージコンテンツ」コメントに注意してください）。

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