Using a slider to control visibility of Movieclips - HTML5, JS
I'm working on a small interactive html5 document and am trying to use a slider to control the visibility of some of my movieclips.
I have three movieclips which have instance names of - sideRight, sideLeft, and sideZero
I gave them variable names to simplify things -
var sRight = this.sideRight;
var sLeft = this.sideLeft;
var sZero = this.sideZero;
I then set the visiblity on two of them to false and one true -
sRight.visible = false;
sLeft.visible = false;
sZero.visible = true;
I have a slider boundary area that I set up like this -
var handleHeight = 20;
var bounds = {x:430, y:480, width:150,height:50};
var sliderBoundary = new createjs.Shape();
sliderBoundary.graphics.beginStroke("#999")
.setStrokeStyle(2)
.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
this.stage.addChild(sliderBoundary);
sliderBoundary.alpha=0;
The slider handle movieclip instance name is botHandle to which I added an event listener (the mouseMove function is something I'm using to rotate another MC) -
this.botHandle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
var p = this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = Math.max(bounds.x+handleHeight, Math.min(bounds.x + bounds.width - handleHeight, p.x));
mouseMove();
slideshow();
}
I tried writing a function called 'slideshow' to change the visibility of my three movieclips based on the positoin of botHandle -
function slideshow(){
if (botHandle == 450) {
sRight.visible = true;
sZero.visible = false;
} else {
sRight.visible = false;
sZero.visible = true;
}
}
However, this function doesn't seem to be doing what I want it to do. Essentially, I want when the slider handle is on the far left to show the sRight movieclip, when it's in the middle to show the sZero moviecip, and when it's on the far right to show the sLeft movieclip. I'm very very new to javascript and don't know very much.
If anyone could help me out with this or point me in the right direction I would appreciate it!
Thanks.
