To build a flex volume control component similar to that of Youtube

Question

Hey, I've been assigned to design a flex 3 volume control component similar to the one Youtube players have. I mean, you move the mouse over the volume icon and a vertical slider appears.

My only doubt is about how making this vertical slider to appear and to hide properly.

Should I extend a PopUpButton somehow? Maybe another kind of PopUp component? Or do I really need to program the whole thing in actionscript(that would be just sad and sounds like reinventing the wheel)?

Is anyone able to simply point me in the right direction?

OBS: No need to teach me about skinning, designing.. or any of the rest. :)

Answer 1

Hello,

What I suggest is to create a flex control that contains a graphic for displaying the volume meter and a hidden slider.

When you roll over the graphic volume meter you show the slider. When you roll out the slider or the volume meter then you hide the slider.

I believe that's all

---

http://www.timeister.com

Answer 2

No! Don't use a popup. Put a canvas somewhere hidden behind your bar of controls and just set it's visible to true when you mouse over the control.

I don't remember if the youtube slider covers the volume button or appears above it, but either way you can put it in there with a canvas.

If you want it to be one single component, the problem you run in to is that the size will be wrong if you hide the slider in the button component (It will be measured to be the size of the slider, instead of the button). But don't worry! Just override measure() and measure the button instead of both. Then if you set clipContent to false, it can display the slider outside of its bounds

Answer 3

Can you post some code, please? I need this component too.