11 Replies Latest reply on Mar 14, 2008 12:37 PM by chrisgolfs

    Multiple buttons - Button on hover always on top

    chrisgolfs
      Hi all,
      As an example of what I'm doing, picture a map of Europe, divided into countries. Each country (which is a button) is obviously touching one beside it (if they share a border), and the countries are all on their own layer. The problem is, some countries that touch other countries have their 'glow' effect appear behind a country beside them (if they are on a layer below the other layer), and I want whatever country the mouse is hovering over to be always on top.
      My question is, what code can I attach to each button to ensure that when I hover over it, it will be on top of the other buttons, regardless of what layer it is on? Also where do I put the code?
      Thanks!
        • 1. Re: Multiple buttons - Button on hover always on top
          clbeech Level 3
          hey chris - you should be able to use swapDepths to achieve this, even if the buttons are constructed in the IDE. here's a basic example: FILE
          • 2. Re: Multiple buttons - Button on hover always on top
            chrisgolfs Level 1
            That is really close to what I was looking for, thanks very much.
            Regarding the filters, the way you have done it is completely new to me. What I did, was apply a filter on each individual button on the hover state. Are you saying that this could be avoided by doing what you have done? Not sure where the "0xFFFFFF, .8, 12, 12)];" section can be altered though, or what exactly those #'s stand for (aside from the ffffff). And why did you put "ar ="? What does that stand for? I know that a,b,c,... are instance names for the movies. Also, as the 'countries' in my example are all different shapes, I can't use just one movie clip as you did in your example.
            Sorry I am a little confused here but I think I could use your method for my purposes potentially.
            Thanks for your help.
            • 3. Re: Multiple buttons - Button on hover always on top
              clbeech Level 3
              Hey chris np - sorry I use a few things here in script to simplify the demo construction :)

              First, the GlowFilter is being applied to each instance dynamically in the script onRollOver, you can find infomation on the parameters of the Filter in the Flash Help Manual (there are more that can be used in the declaration as well) however, applying the filter in the IDE will work just fine how you have it now. But yes, it could be avoided by using a system like I have defined here. The parameters are [color, alpha, blurX, blurY] but I would recommend looking up the class and reading about them and their value ranges.

              Second, the ar=[] is an array declaration and the name 'ar' is arbitrary, you may have seen it in the form: var ar:Array = new Array(); and yes the elements listed in the array are the instance names of the movieclips on Stage. It would be fine to list the 'countries' MCs in your file within an array by their instance names as well, and it doesn't matter that they are different shapes, it is simply a stored reference to the MC. I used a single MC within the demo simply for quick construction of the example.

              Third, I have applied the two methods in the script to all of the instances within the array using the 'for' loop, by doing it this way, I did not need to write an 'onRollOver' and 'onRollOut' method for each MC in the file, makes it quick and easy to apply similar methods to all clips listed in the array. handy convenient! :)

              But all in all, what your needing to do is use the 'swapDepths()' method, and in this case within the onRollOver handler, each clip will 'swap' to a depth of 0, essentially 'changing' places in the z-order with the clip currently at a depth of 0.
              • 4. Re: Multiple buttons - Button on hover always on top
                chrisgolfs Level 1
                Thanks so much, this code works like I wanted it to. Now, how would I instead of making the movie being rolled over the top level, how could I make it the second-from-the-top level (so that the layer on top containing the country names is always on top)?
                Secondly, I would like to have the 'down' state of the movie a darker shade of the 'over' state. Is that possible?
                Thanks,
                Chris
                • 5. Re: Multiple buttons - Button on hover always on top
                  chrisgolfs Level 1
                  Still trying to figure this one out, any thoughts on my previous post? Solutions?
                  Thanks
                  • 6. Re: Multiple buttons - Button on hover always on top
                    clbeech Level 3
                    sure chris - I would recommend that you place the country names within the 'button' MC clips, then they travel with them to top without doing anything extra. another solution: place the names all within a single MC, then using swapDepths() send that MC to a higher level, like say 1, this will place the name MC above the level that you are swapping the buttons too (i think it was level 0 right?).

                    second Q: if your 'buttons' are MC buttons (which would be best) are you using the 'automatic' button recognitions? (ie. an MC with the labels '_up', '_over', and '_down') if so, simply apply a tint to the '_down' state clip keyframe on the timeline. also, using MCs as buttons is necessary if you wish to have one of them 'remain' in the down state, by calling it to gotoAndStop('_down'); (of course you also will need a method to reset the other MC states each time a new button is 'selected').
                    • 7. Re: Multiple buttons - Button on hover always on top
                      chrisgolfs Level 1
                      I like your second option of placing the movie clips all within a single MC. I did think of your first option before I read it from you, but I think as my project grows, that will become too hard to maintain.
                      So if I use swapDepths(), what will the code look like to keep it on level 1?
                      • 8. Re: Multiple buttons - Button on hover always on top
                        chrisgolfs Level 1
                        Hi again, I'm trying different things with swapdepths, but I can't get the names to stay on top level. What is the code for that?
                        Thanks
                        • 9. Re: Multiple buttons - Button on hover always on top
                          habsolutely
                          Hi,
                          I did this:

                          "place the names all within a single MC"

                          but how do I do the following, keeping in mind the previous code you gave me?:

                          "then using swapDepths() send that MC to a higher level, like say 1, this will place the name MC above the level that you are swapping the buttons too (i think it was level 0 right?)"


                          Please helps as soon as possible.
                          Thanks
                          • 10. Re: Multiple buttons - Button on hover always on top
                            habsolutely Level 1
                            Hi guys,
                            Is there any way that someone can help me out with this code? Please?
                            Thanks
                            • 11. Re: Multiple buttons - Button on hover always on top
                              chrisgolfs Level 1
                              quote:

                              Originally posted by: clbeech
                              sure chris - I would recommend that you place the country names within the 'button' MC clips, then they travel with them to top without doing anything extra. another solution: place the names all within a single MC, then using swapDepths() send that MC to a higher level, like say 1, this will place the name MC above the level that you are swapping the buttons too (i think it was level 0 right?).q]

                              Clbeech or someone else: Thanks again for this; it is very useful. Another question I have is after clicking on one of these MC's, I want it to launch a new MC in the foreground. Is it possible to launch this new MC in the same frame so that the other MC's are still visible in the background (not absolutely necessary)? However I have to have the functionality of clicking on the MC's and launching new MC's from there.
                              Please help. Thanks!