Skip to main content
Inspiring
November 30, 2017
Answered

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

  • November 30, 2017
  • 1 reply
  • 381 views

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.

This topic has been closed for replies.
Correct answer kglad

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.

1 reply

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
November 30, 2017

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.

KeelyMAuthor
Inspiring
November 30, 2017

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?