listbox visibility

[kwimbi]

hi,
I am new to as. I have a mc which contains a button (to make a list box visible) and a dynamic text field (to show the label selected from the listbox). The list box become invisible when the selection is made from it. But I also want it to become invisible when the user moves his cursor off it even if no selection is made. Here is the code:

// attached to the listbox component
onClipEvent (enterFrame) {

this.onRollOut = function() {
this._visible = false;
}
}

It works but the labels in the listbox are no longer selectable and so does not work. Can anyone let me know why or provide a work around solution... any advice, tutorials or code would be greatly appreciated.

Cheers Kym

[retrotron]

Hi Kym,


It works but the labels in the listbox are no longer selectable and so does not work
I'm not sure I understand. If the listbox becomes invisible, how would one be able to select the labels?

Also, what does the "this" refer to inside the this.onRollOut() function?

retrotron

[kwimbi]

sorry to be confusing, I mean that the rollout works ie when the mouse is no longer over the list box it's visiblity is set to false and so no longer visible....but the listbox does not work ie the labels are not selectable.

The 'this' refers to the listbox instance.

Hope this is more clear.

Cheers Kym

[retrotron]

So once you roll the mouse off the listbox, it becomes invisible.

But then, once the mouse is off the listbox, the labels are no longer selectable.

Is that what you're saying? I think you're being clear, I just don't think I'm understanding what you're trying to do.

I'm thinking that there are two places the mouse can be:

(1) over the listbox, in which case the listbox is visible. At that time, the user can select the labels and then click a button.

(2) off the listbox, in which case the listbox is invisible. At this time, the user cannot select the labels (you're saying they do not work). Here's where I'm confused. Wouldn't the user not be able to select the listbox anyways because (a) their mouse is not over the listbox and (b) the listbox is invisible (i.e. so they couldn't see it, so they wouldn't even know that it's there at all)?

Maybe you'll have to post the .fla so I can see what you're talking about.

[kwimbi]

retro,
Yes, you are right both times. My problem is that in scenerio 1 that you outlined - the mouse is over the list box, it is visible but the labels are not selectable for some reason. I can get the listbox to work or the mouseout function to work but not both at the same time, which is what I require.

I'll post the fla and you can check it out.

Thanks again kym.

[retrotron]

I understand now. Thanks for posting the flash, I'll take a look.

[retrotron]

Hi there,

I've gleaned your .fla and can tell you this much: when you define a hitArea for the listbox (which is what happens when you give it a button event such as "onRollOut"), Flash treats it like button. That means it only has one kind of functionality: click it (i.e. click the whole thing as a single large button) or move your mouse on/off it. So when you define a hitArea for the listbox, it ceases to act like a listbox (hence you cannot select any of the options).

Also, if you define a different (invisible) movieclip as a hitArea and place it over the listbox, then you can't select the listbox items because the listbox remains underneath the invisible movieclip, so your mouse only clicks on the invisible movieclip rather than the listbox.

Well, I've racked my brain trying to come up with a solution, but I have yet to succeed. Whatever the solution is, it seems to me it'll be a bit complex. I'm still thinking about it.

retrotron

[retrotron]

Okay Kym, I think I figured out a way to do what you want, but it is not "pretty" or "neat" code. If you ask me, this is a very cumbersome way to get the job done. I can't seem to think of a better way though. If anybody has any suggestions, feel free to fill me in!

Here's how it works. Basically, when you click the "select dog" button, an invisible button is placed over the listbox. When your mouse passes over the invisible button, that invisible button is removed and a new invisible button which surrounds the listbox is placed on the stage. When the mouse passes over the new button (hence when it passes off the listbox), then the new button is also removed from the stage and everything is back to normal.

I've posted the .fla so you can take a look at it, but let me explain it more in detail.

The first thing I did was create two movieclip symbols which are simply blocks of color the same size as the listbox and the green square (with holes for the button and the listbox) respectively. I set these symbols for "export" in their "properties" dialogue box. Then I attached this code to the "select dog" button:


on (release){
_root.square_mc.dogListBox_lb._visible = true;
// attach hitArea2 over the listbox
_root.attachMovie("square_hitArea2_mc","squareBtn_mc",0);
_root.attachMovie("square_hitArea2_mc","square_hitArea2_mc",1);
_root.squareBtn_mc._x = 88
_root.squareBtn_mc._y = 68;
_root.square_hitArea2_mc._x = 88
_root.square_hitArea2_mc._y = 68;

// make the hitArea_mc invisible
_root.squareBtn_mc._alpha = 0;
_root.square_hitArea2_mc._visible = false;
_root.squareBtn_mc.hitArea = _root.square_hitArea2_mc;

// define squareBtn_mc onRollOver
_root.squareBtn_mc.onRollOver = function() {
_root.switchHitArea("squareBtn_mc");
return; // exit this function
} // end squareBtn_mc onRollOver
} // end on(release)

What I'm doing here is using the symbols I created to attach an invisible button over the top of the listbox. The button is built by attaching the same movieclip symbol twice, but making one of them the hitArea of the other. I set the hitArea's _visible to false, but I made the other one's _alpha 0 (I couldn't just set it to _visible false too, because that deactivates the movieclip as well as make it invisible . . . I still need the clip activated so it can detect when the mouse passes over it). Once that invisible button is created, I define the onRollOver function for it, and when the mouse rolls over it, it calls the "switchHitArea" function (which resides on _root).

Then at _root, I added this code:

// define the switchHitArea function
function switchHitArea(x) {
// x: the name of the hitArea which called this function ("squareBtn_mc", "squareBtn2_mc")
if (x == "squareBtn_mc") { // if squareBtn_mc called this function
// remove the squareBtn_mc and its hitArea
_root.square_hitArea2_mc.removeMovieClip();
_root.squareBtn_mc.removeMovieClip();
_root.square_mc.dogListBox_lb._visible = true; // show the listbox
// attach the other squareBtn2_mc and its hitArea
_root.attachMovie("square_hitArea_mc","squareBtn2_mc",0);
_root.attachMovie("square_hitArea_mc","square_hitArea_mc",1);
_root.squareBtn2_mc._x = 88;
_root.squareBtn2_mc._y = 100;
_root.square_hitArea_mc._x = 88;
_root.square_hitArea_mc._y = 100;
_root.squareBtn2_mc._alpha = 0; // make squareBtn2_mc transparent
_root.square_hitArea_mc._visible = false; // make hitArea_mc invisible
_root.squareBtn2_mc.hitArea = _root.square_hitArea_mc;
_root.squareBtn2_mc.onRollOver = function() {
switchHitArea("squareBtn2_mc");
return; // exit this function
} // end squareBtn2_mc.onRollOver()
} else if (x == "squareBtn2_mc") { // if squareBtn2_mc called this function
// remove the squareBtn2_mc and its hitArea
_root.square_hitArea_mc.removeMovieClip();
_root.squareBtn2_mc.removeMovieClip();
_root.square_mc.dogListBox_lb._visible = false; // don't show listbox

} // end "if x == squareBtn"
} // end switchHitArea()

This code does one of two things, depending on the parameter passed to it. If "squareBtn_mc" is the value of the parameter, then this function removes "squareBtn_mc" from the stage altogether. That way the mouse can click on the listbox without having this invisible button in the way. Then this function creates a new button (just like before, by attaching the same movieclip symbol twice and making one the hitArea of the other), only this button covers the area around the listbox. Then it defines the onRollOver for this new button. If the mouse rolls over this new button which surrounds the listbox, the switchHitArea() function is called again, but this time the parameter is "squareBtn2_mc".

This time, when the function executes, it removes "squareBtn2_mc" from the stage, and now everything is back to normal.

So, it's like I said: when you click the "select dog" button, an invisible button is placed over the listbox. When your mouse passes over the invisible button, that invisible button is removed and a new invisible button which surrounds the listbox is placed on the stage. When the mouse passes over the new button (hence when it passes off the listbox), then the new button is also removed from the stage and everything is back to normal.

[kwimbi]

retro,
you've done it again. As usual much more complex than I had anticipated. I'll add another degree of difficulty - I will need this functionality on many listboxes is it possible to create a function that will dynamically place the invisible buttons or will it be necessary to hard code positioning as you have in your example? This is possible for my project but will obviously create a lot of code.

Thanks again for your efforts so far.

Cheers Kym

[retrotron]

Everything's possible to do dynamically (or at least almost everything). That's what I love about MX. :) Yes, it generates much more code, but code compresses very well and your movies become very fast ... downloading a bunch of code which generates 50 _mcs is much quicker than downloading 50 movie clips.

You might try and play around with creating some variables to hold the _x and _y coordinates of the positions involved in this one example. Then try substituting those variables in one at a time for the hard-coded values until you get it working with all variables. I'm not sure I'm making any sense when I say that...

From there you have a number of options. It'd probably be a good idea to see if you can get all of the code inside one function, so that when you execute the function, it generates your square_mc (along with the mouseOver functionality).

If you can get it all into one function, you're in prime pouncing position to make it dynamic. You might, for example, use a for-loop to execute the function x number of times, each time changing the location/position variables so the square_mc appears in a different place.

Oh yes, along with variables for the _x and _y positions, you'll also want to use a variable to keep track of the "depth" of the movieclips that are attached with actionscript. If a movie is created or attached at the same depth as another movie, the new will replace the former, so each movieclip needs to have its own depth. Also, movies at higher depths are on top of (laid over the top of) movies at lower depths. It would be sufficient to simply increment a "depth" variable by 1 each time you create or attach a movieclip to ensure that each movieclip gets its own depth.

Those are just some ideas. You're right though, it was a whole lot more complex than I expected. There's got to be an easier way....