13 Replies Latest reply on Jun 2, 2010 11:13 AM by sourceofdenial

    Button Design Question

    sourceofdenial Level 1

      I'm new to flash--I was hoping to do this in Fireworks, but because of the nested buttons, it doesnt look possible.


      This is what I'm trying to do.  I'm looking for general tips on how to set this up--I'm reading 'Learning Flash CS4 Professional' and doing the tutorials, but what I'm asking is a little different than whats in the book, and I don't yet have the knowledge to make the leap myself.


      On the stage I want 3 buttons on the side.  When you click on each of those buttons, it's respective image pops up in the middle of the stage(3 buttons, 3 images).  THen, you can mouse over to each of those images which are labeled, and when you move th emouse over the label, the label changes to different text.  This is for a rudimentary virtual microscope with each button corresponding to 4x, 10x, 40x magnification, the images are the slide images, and the labels are of things like cell bodies, chromatin, etc. THe goal being the student can click on each magnification, see the slide image with labels, and when he/she mouses over the labels, they change to text identifying the cell part.


      Thanks in advance for any advice!

        • 1. Re: Button Design Question
          Ned Murphy Adobe Community Professional & MVP

          Here's one approach...  Make the labels as button symbols so that you can place the different text in the different frames.  That way you won't have to code the buttons.  Place these buttons into consecutive frames of a movieclip, each with the image that it accompanies, with stop(); commands in each frame.  Have the buttons to the left side tell that movieclip which frame to go to.  If the images are not showing at first, then include a command to set the movieclip to be invisible at first, then have the buttons turn it visible along with commanding which frame to go to.

          1 person found this helpful
          • 2. Re: Button Design Question
            sourceofdenial Level 1

            So, if I set it up as you are describing, and each button goes to a different frame of the movie clip, can I then still controll the ability of the user to mouse over certain parts of the picture and have the text change?  It seems like using that there would be movie frames within an indvidual movie frame, am I right?

            • 3. Re: Button Design Question
              Ned Murphy Adobe Community Professional & MVP

              Yes and no, it doesn't matter and could be. For what I described you would have a movieclip that contains three frames.  In each of those frames would be an image with a label (being a button).  You originally said the label would change when you mouse over the label, but if you want to include the images in the rollover, then include them inside the button symbols as well.  When you use button symbols, they automatically animate between their up/over/down frames, so you would just be taking advantage of that feature.  You could use movieclips instead, but you would have to code them to do what the buttons already do automatically.


              So when you click the second button to the side it would tell that movieclip to gotoAndStop(2), which contains the image/label for that magnification.

              1 person found this helpful
              • 4. Re: Button Design Question
                sourceofdenial Level 1

                Okay, this is starting to make sense--does it matter if each of my images has more than one label?  So for each button(lets say clicking on the 4x button opens a picture of a cell nucleus) you'd have multiple labels, one corresponding to nuclear envelope, nucleolus, etc. 

                • 5. Re: Button Design Question
                  Ned Murphy Adobe Community Professional & MVP

                  If you want to have multiple labels for a given image, where each changes individually, then just create each label as a separate button.

                  1 person found this helpful
                  • 6. Re: Button Design Question
                    sourceofdenial Level 1

                    Great, this is slowly coming together.  I have another question that piggybacks on this one:


                    I want my images to pop up and stay up when you click and release the buttons on the side.  Using the 'down' function of the button to pull up the image when clicked..it disappears on release.  Is there a release state I'm missing in the timeline?

                    • 7. Re: Button Design Question
                      Ned Murphy Adobe Community Professional & MVP

                      You should have as a minimum two separate entities... a group of buttons to the side, and a movieclip that contains the images/labels.  When you click on one of the buttons it should tell the movieclip to gotoAndStop(#), where # represents whichever frame that the movieclip is supposed to go to.


                      I do not understand what you mean by "release state".

                      • 8. Re: Button Design Question
                        sourceofdenial Level 1

                        It might be easier if I include the fireworks file I made because all I'm wanting to do is replicate it in flash.  I was told that because hotspots/slices are shared between all layers in fireworks, I needed to go to flash...so here I am.  DRG Example for Tuesday Meeting2.png If you open that in fireworks you'll see that mousing over the 4X button you pull up an image with labels you can mouse over.  It falls apart in 10x and 40x because the hotspots for mouseovers are reused between the states.


                        I'm in grad school and don't come from a programming background, so the computing language being tossed around is as confusing to me as probably  the anatomy of the dorsal root ganglion is to you guys

                        • 9. Re: Button Design Question
                          Ned Murphy Adobe Community Professional & MVP

                          Can you show the code you are using for the side buttons?  All they should be doing is telling the movieclip to change frames.  The movieclip and imagges/labels within it shouldn't need any code with the approach I've suggested, outside of a stop(); command on each frame.

                          1 person found this helpful
                          • 10. Re: Button Design Question
                            sourceofdenial Level 1

                            Ah the lynch pin---I haven't written any code in flash...still going

                            through that example in the book

                            • 11. Re: Button Design Question
                              sourceofdenial Level 1

                              Okay I've made a little example here.  When you mouse over the green square or click on it the strawberry with labels A, B, C pops up.  Those A,B,C labels are all buttons that when you mouse over them, they change to 1,2,3.  What I don't understand is how to have the strawberry with labels pop up, stay up, and then being able to mouse over and switch the 1,2,3 labels.  I have a feeling this is something like nested buttons, but really am clueless.


                              Crap, how do I attach a .fla file?

                              • 12. Re: Button Design Question
                                Ned Murphy Adobe Community Professional & MVP

                                I don't have CS4, so I wouldn't be able to open your file.  Here's a link to a crude example I made for you that demos what I tried to explain... dig in and explore.



                                • 13. Re: Button Design Question
                                  sourceofdenial Level 1

                                  How do I stop the loop?  I used the stop (); code in each of the movie frames but it still cycles through endlessly.


                                  On its most simple level I am just trying to create a button that when clicked, pops up an image that has labels on it, and when you mouse over those, the label text changes.  I see where you are going with this Ned, but I think where we are off is the buttons are linked to the goto(frame #) command and I want the labels to change not with button clicks, but with mouseovers of the actual image.


                                  I really appreciate all the help so far, this is slowly becoming more clear!  Thanks for bearing with me.