controlling easeljs symbol with jquery mobile slider

Question

I am new in createjs and jquery mobile. This may be a simple question, but I do not know how to do it and have not found any answer online.

I created a canvas object using the Flash toolkit for CreateJS. I want to control it with a jQuery Mobile slider.

This is my html code:

<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" />

The name of the instance that I want to control is squareB1, its timeline has 6 frames, see the fragments whole of code below. Notice that the slider has 6 values, the same number of frames.

(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;

Then, I am doing something like this in jQuery, this is part of another JS file:

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...
}

My question is how to go to an specific frame of instance in the canvas object using the slider.
I appreciate any answer!

Answer 1

Feel free to post CreateJS questions on the support forum http://community.createjs.com

This looks like Toolkit for CreateJS output. The possible reason this isn't working is because unless you have created a variable named "canvas", which is the export root from Flash, then squareB1 is not defined. Elements that live on the stage in Flash, are exported as children of the exportRoot, which you can see in the generated HTML bootstrap file that gets created. The squareB1 child likely lives in that scope.

Can you post more code that shows where the export root is created, or describe your setup a little more?