Dynamic Sliding Menu Help

I'm building an mp3 player and I'm trying to build a dynamic menu to select songs from. The first thing I need help with is getting the menu to stay in position after it has slid out from behind the mp3 player. Right now I have a movie clip button with an instance name of songListBtn_mc and has an event handler which uses the tween and easing classes to slide open the movie clip songList_mc. The reverse happens with the onRollOut event handler.  You can see a working example of what I have here: http://djnathanjones.com/wedding/mp3_player.html .  I'm trying to get the mp3 player to work the same as the one here:  www.lawnchairgenerals.com .  I know how to do this using multiple frames, but what I'm trying to accomplish is a way to do it all in code all on the first frame of the movie.  Here's the code I'm working with for the sliding menu:
_root.songListBtn_mc.onRollOver = function() {
      new Tween(songList_mc, "_x", Regular.easeInOut, 1, 172, 15, false);
_root.songListBtn_mc.onRollOut = function() {
      new Tween(songList_mc, "_x", Regular.easeInOut, 172, 1, 15, false);

Eventually I'd like to build the mp3 player so it uses an XML file to dynamically populate the song selection Menu.  I was also wondering if I should use a dynamic text box for the sliding menu instead of a movie clip?

Any and all help is greatly appreciated, thanks in advance.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MontoyaProcess Improvement MgrCommented:
Hey there.

Your first question: How do I get it to stay in place...

don't use the RollOut function. Your rollOut function is sending the menu back. If you dont have it there, it wont.  Instead you could use an onRelease function so when the user hits the button, then it will roll back into place.

Now, if you want to control that, just use variables and check for the variables before you roll in/out

_root.songListBtn_mc.onRollOver = function() {
     new Tween(songList_mc, "_x", Regular.easeInOut, 1, 172, 15, false);
_root.songListBtn_mc.onRelease = function() {
     new Tween(songList_mc, "_x", Regular.easeInOut, 172, 1, 15, false);

does that make sense? Now you just want to adjust it a bit so that it reacts properly when the user clicks on the button when the movie is hidden (or just leave it like that and it will work just fine...just flip the image of the arrow when the movie slides out and it will make for a nice interface).

djnathanjonesAuthor Commented:
Thanks for your help.  That's a little closer, but not exactly what I'm looking for.  I want it to behave exactly like the mp3 player at www.lawnchairgenerals.com , so if the user decides to roll off the top, bottom, or left of songListBtn_mc the menu retracts and if the user rolls off to the right the menu stays open to allow the user to select a song.  Once the user selects a song or rolls off the song list movie clip the menu will retract.  I guess the easiest way to do it would be with onPress/onRelease, but I'd like to be able to do it with roll overs.  Is that possible?
I had a good day... so enjoy :o)  : http://www.ivanos.wz.cz/mp3player.zip 

I'm awaiting your questions.

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

djnathanjonesAuthor Commented:
Thanks for taking a look!  For some reason I keep getting an error when I try to unzip.  Is the .zip corrupt?  
It looks like something's wrong with the server.

Here's the file: http://download.yousendit.com/F8463FAE6FCA57EA

ivan_os :o)
djnathanjonesAuthor Commented:
Sorry, I forgot to mention I'm using Flash MX 2004 Professional.  I'm unable to open the file...  Will what you've done work in mx 2004?
Here it is : http://download.yousendit.com/2923B438138C29BD
MX 2004


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
djnathanjonesAuthor Commented:
DUDE, you're a genius!!!  This is exactly what I was trying to do!  I have a few questions:
1.  I was using the loadSound method to load external mp3's.  I noticed the onLoad function for the XML playlist does the same thing?
2.  I noticed you used a button for rollOut_zone, was there any specific reason or could you have used a movie clip had you wanted to?
3.  In the code that adjusts the rollOut_zone, what does the "+=" do?  Does it add padding?  Also, what does the line "rollOut_zone.useHandCursor = false;" do?
4.  I'm assuming the media display component displays the song duration, does it do more?  Looks like I need to research this component...
5.  How did you get the songList_mc to contract?  I don't see any onRollOut functions for songList_mc or songListBtn_mc.
6.  Where did you set the background color for songList_mc, is that the color of the movie clip?
7.  How/where did you set the gray background color for the song roll overs?

Thanks again for your help, this thing is sweet!  I may have a couple more questions for you if that's ok?


1. No. onLoad function of XML only loads the xml playlist. For loading the songs MediaDisplay.setMedia(url)  method is used. You can find it in  "player_stuff" layer line 69.

2. Button or MC, just matter of preferences - if you will open the instance you'll see a rectangle in "Hit" frame.  After populating the playlist, this button is resized to actually match the size of rolled-out playlist and little more from every side... So if you will leave the playlist with your cursor ,  onRollOver event of the button will be launched and playlist will start to hide...  
it's acting like invisible button -> no graphic, but active area. To achieve this with movieClip, you would have to make it invisible, but i like idea of invisible button being actually button.

3. a  what does the line "rollOut_zone.useHandCursor = false;" do?
every symbol that interacts with mouse ( e.g. has defined onMouseDown, Up , RollOver... ) has the "hand" cursor by default. Since rollOut_zone is our secret area and we don't want to confuse user by showing hand cursor on places where it doesn't have any meaning for him - i just tell Flash not to use hand cursor for this symbol.

3. b
   var something += 5;
is the same as if you write something = something + 5;
what does the "+=" do ?  let me explain it to you like this :
in the time of starting the movie size of rollOut_zone is 100x100 , while size of songList_mc is 0x0 ( no items yet ) . so now the situation is that if you will leave sonList_mc with your cursor you'll find 50 (_width/2 , _height/2)  pixels of rollOut_zone on each side.. right? ( it's kind of overlaping ).  After populating the songList it gets bigger. So I udjust _width of rollOut_zone to be what it was before ( 100 ) plus new _width  of songList. Same width height.  The result is that no matter how songList will became big, the size of rollOut_zone overlap will remain constant -> 50 pixels..    I'm not sure if it's clear.. , but I supose you;ll ask if not.

4. no. mediadisplay is component that can be used to view video or play sond. if you play sound , no visual output is provided. actually mediaDisplay is small recatngle in "mediaDisplay" layer inside player movieClip. click on the layer to see it. since it's used only for sound, you will never have to interact with it directly.
Thing that displays duration is simple Dynamic TextField, that gets updated on every MediaDisplay.change() event . ( you can find that code in "player_stuff" layer, line 7 .

5. already explained :o)

6. there's not background of songList_mc what you see is color of singList items. to change that color:
 go to library ,
open folder playlist,
open folder item
and doubleclick itemButton instance. there you will see colors for "up" , "over" and "down" state of the item. change them at your will.

7. = 6.

Question thing : no problem. :o)

djnathanjonesAuthor Commented:
Great, it makes more sense now!  

I was also wondering about the EventListeners.  I'm guessing they're listening for the change, progress, and complete events from the media component wich they use to execute the functions assigned to them?

Thanks again,

djnathanjonesAuthor Commented:
One last thing...
I'm trying to load the mp3 player into an empty movie clip with an instance name of mp3Container_mc which is on the _root timeline of my main movie.  I can get the mp3_player.swf to load in mp3Container_mc fine, but it will not function properly. I'm wondering what I'm doing wrong? Any ideas?
I have no idea what you're doing worng. There's tons of things that can be screwed :o).
Send me your not working fla, and I'll tell you.

djnathanjonesAuthor Commented:
Thanks, sent the files via email.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.