djnathanjones
asked on
Dynamic Sliding Menu Help
Greetings,
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.onRol
new Tween(songList_mc, "_x", Regular.easeInOut, 1, 172, 15, false);
};
_root.songListBtn_mc.onRol
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.
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.onRol
new Tween(songList_mc, "_x", Regular.easeInOut, 1, 172, 15, false);
};
_root.songListBtn_mc.onRol
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.
ASKER
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?
Hi,
I had a good day... so enjoy :o) : http://www.ivanos.wz.cz/mp3player.zip
I'm awaiting your questions.
Regards,
ivan_os
I had a good day... so enjoy :o) : http://www.ivanos.wz.cz/mp3player.zip
I'm awaiting your questions.
Regards,
ivan_os
ASKER
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)
Here's the file: http://download.yousendit.com/F8463FAE6FCA57EA
ivan_os :o)
ASKER
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.useHandCurso
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?
nate
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.useHandCurso
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?
nate
Hi,
1. No. onLoad function of XML only loads the xml playlist. For loading the songs MediaDisplay.setMedia(url)
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.useHandCurso
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)
ivan_os
1. No. onLoad function of XML only loads the xml playlist. For loading the songs MediaDisplay.setMedia(url)
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.useHandCurso
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)
ivan_os
ASKER
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,
nate
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,
nate
ASKER
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'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.
ivan_os
Send me your not working fla, and I'll tell you.
ivan_os
ASKER
Thanks, sent the files via email.
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.onRol
_global.movieout=True;
new Tween(songList_mc, "_x", Regular.easeInOut, 1, 172, 15, false);
};
_root.songListBtn_mc.onRel
if(movieout=True){
new Tween(songList_mc, "_x", Regular.easeInOut, 172, 1, 15, false);
movieout=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).