Using a slider to control visibility of Movieclips - HTML5, JS

[KeelyM]

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.

[kglad · Accepted solution]

the first error i see is botHandle is not defined.  the next problem is botHandle probably shouldn't be compared to a number and you probably don't want to use exact equality.

so, that's 3 (related) errors you need to fix.

[KeelyM]

Thank you kglad! Sometimes it's just the simplest thing that is missed.

I added my botHandle variable and changed the slideshow function to -

function slideshow(){
if (botHandle.x == 450) {
sRight.visible = true;
sZero.visible = false;
} else {
sRight.visible = false;
sZero.visible = true;
}
}

Now when I have my slider all the way to the left (when it's at 450 on the x axis) it changes visibility!

Thinking if I change it to be something where it's broken into three sections - left, midpoint, right.

Can I have multiple 'If" statements in one function?

If I wanted to have something like three if statements defining the separate parts along the slider? (my slider goes from 450 to 560 on the X axis).

if (botHandle.x <=490)

** set visibility **

if(botHandle.x >= 490)

** set visibility **

if(botHandle.x >= 550)

** set visibility **

or does each 'if' statement need to be it's own function?

Thanks!

Also not sure if there would be an issue defining the midpoint - if it's greater than 550 it will also be greater than 490. Is there a way I can set a range, or like an 'in between' set of numbers?

[KeelyM]

Nevermind - I'm an idiot sometimes. Realizing if I create functions for my left side and right side that whenever it's not on the left or right it will automatically show the middle movieclip.

Thank you for the help!

[kglad]

you're welcome.