13 Replies Latest reply on May 11, 2008 9:06 PM by Badly Drawn Boy

    How do I do this?

    Badly Drawn Boy Level 1
      I'm a total newbie with Flash and I am trying to learn how to make a text-based menu that displays an image when the viewer hovers/rolls over a link.

      In the screenshot below I'd like to set it up so that when the viewer hovers/rolls-over a link, the picture displayed to the right changes.

      You can see what I mean here.

      I'm guessing this is something I'd use Flash for, but I'm a complete beginner and I'm not sure where to start. If someone could point me towards a good online tutorial, a book, or suggest the best way to do this I'd appreciate it.
        • 1. How do I do this?
          Ned Murphy Adobe Community Professional & MVP
          If you look around the forums, there's very recent (today) postings in them about books you might consider and some tutorials too.

          I started a tutorial of my own for you, but decided it could be too long winded to try to include here. So try out a tutorial and then if you have problems post them and you're sure to get help.

          You could also look thru the Flash help file (Getting Started section might be a good place) and seek information about creating buttons and movieclips. They often provide some very simple examples that you can probably quickly get the hang of.

          If you only end up confused, I can create a simple example file and make it available for you to download and scrutinize. If so, let me know what version of Flash and Actionscript you plan to use (AS 3.0 is the latest and is different from its predecessors).
          • 2. Re: How do I do this?
            Badly Drawn Boy Level 1
            I really appreciate your response. Tomorrow morning I'll check into some of the tutorials or help files of Flash (I'm using CS3) and see if I can make sense of it.

            I really appreciate your offer to make a sample file! I may very well take you up on that.
            • 3. Re: How do I do this?
              Badly Drawn Boy Level 1

              I searched the last seven pages of the forum and couldn't find the thread with books and tutorials you mentioned. I did Google some tutorials, but all of them assume a basic level of Flash familiarity that I don't have. I think I probably need to start with a book to familiarize myself with the language.

              If you'd be willing to create a sample file, I'd be very grateful. That's often an excellent way to learn - to look at an example of how it is done and figure it out from that.

              Thanks again,
              • 4. Re: How do I do this?
                Badly Drawn Boy Level 1
                Okay, you can see a working copy of my site at: http://cdkarts.com

                Specifically, this is what I'd like to do:

                1) On the page "portfolio.html", I want to create a Flash application that displays a different image when the viewer rolls over each menu item.

                2) On all of the "statement" pages (you can access one by clicking on a project, then clicking "statement" in the upper right nav bar), I'd like to do the text boxes if Flash so I can use a special font.

                Thanks for your help!
                • 5. How do I do this?
                  Ned Murphy Adobe Community Professional & MVP
                  It looks like you got the buttons done, so now you can set about coding them.

                  If you want them to make a new image appear relative to hovering over each button, then you can create a movieclip symbol that places each image in a different frame on one layer, and on another layer you place stop(); function calls in each frame for each image frame on the other layer so that when you land there it stops there. Place the movieclip on the stage where the images are to appear and give it an instance name... let's say "images_mc"

                  So for the button code you can use the following, placing it on the main timeline where the buttons are (separate layer preferred):

                  function showChoiceImage(event:MouseEvent):void {

                  choice_btn.addEventListener(MouseEvent.ROLL_OVER, showChoiceImage);

                  And repeat this code for each button, using the different button instance names, where each button's function for the ROLL_OVER event sends the images_mc to another frame. Since I'm probably confusing you in trying to be specific, here's the next button's code...

                  function showMTTamImage(event:MouseEvent):void {

                  mttam_btn.addEventListener(MouseEvent.ROLL_OVER, showMTTamImage);

                  When you get to deciding you want to have clicking the buttons do something, you add another event listener for each of them and another function that each listener calls...

                  choice_btn.addEventListener(MouseEvent.CLICK, anotherFunction);

                  • 6. Re: How do I do this?
                    Badly Drawn Boy Level 1

                    Thanks a lot for your reply. It's way over my head, but I'm going to do some reading this afternoon of the Flash help files and see if I can work it out.

                    I didn't actually get the buttons done. The menu you see at " http://cdkartscom/portfolio.html" is just a text-based HTML menu.

                    So I still have to create the buttons in Flash and then follow the steps you laid out.
                    • 7. Re: How do I do this?
                      CHAOS'|nc. Level 1
                      Cool. Best of luck bro.. Will be looking ahead to see the final result :)
                      • 8. Re: How do I do this?
                        And did it work ?

                        With regards,


                        Wonen in Duitsland
                        • 9. Re: How do I do this?
                          Badly Drawn Boy Level 1
                          I haven't had the time to figure it out today, and tomorrow I'm slammed. Tuesday I will get to it! But from what I can tell it will be EXTREMELY helpful to have the sample file. Thanks again, Ned!
                          • 10. Re: How do I do this?
                            Badly Drawn Boy Level 1
                            Okay, I did have some time to work on it this evening. I think I have the general drift, and was hoping to be able to change the existing file Ned provided for my needs. I was able to rename the existing buttons and change the images associated with them.

                            However, I got stuck when I added two new buttons. After adding them, I double-clicked on one. Then I see the 1, 2, 3 & 4 area in the timeline that refers to active, hover, click, etc. I see that there's a black dot in #1, but nothing in 2, 3 or 4. With a new button, how do I modify its appearance and behavior in 2, 3 & 4? I was able to do it with the buttons Ned set up, but they already had values in 2, 3 & 4.

                            Sorry if this doesn't make sense. I obviously don't know the language.

                            • 11. How do I do this?
                              Ned Murphy Adobe Community Professional & MVP
                              You might find it easier to make copies of one of the buttons you changed from what I provided and edit them to be whatever they need to be like you did already (if that's not what you tried already). Just right click on one of them in the library and select Duplicate, then rename it to suit your implementation.

                              Here's a quick rendition of how I created the buttons. In the first of the 4 frames add a static text field as the button label and type in the label text. Then, right click on the fourth (Hit) frame and select Insert Keyframe. Then draw a rectangle that covers the textfield in that same frame (this establishes a solid Hit area)... you can remove the text after that. Then right click on the 2nd frame, select Insert Keyframe, and adjust the text as desired... then the same on the 3rd frame.
                              • 12. Re: How do I do this?
                                Badly Drawn Boy Level 1

                                Let's see if I can be more specific. I was able to duplicate the buttons as you suggested. Then I gave them their own instance name, and added the code in the actions window, like this:

                                function showPortraits(event:MouseEvent):void {
                                portraitsBtn.addEventListener(MouseEvent.ROLL_OVER, showPortraits);

                                Where I get stuck is with the timeline. I know that I now have to add a 4th "step" in the timeline where I will duplicate the menu items and put the correct picture that the viewer will see when they roll over "Portraits". But I can't figure out how to add that 4th "step" (I know this isn't the right word) in the timeline.
                                • 13. Re: How do I do this?
                                  Badly Drawn Boy Level 1
                                  Okay! I figured it out and I now have the entire menu working with the proper images displaying upon rollover. Thanks to you Ned for helping me get this far!

                                  Have a look: http://cdkarts.com/testsite/portfolio.html

                                  Now just need to set it up so that when the viewer clicks on a menu item, they are directed to a new URL. Would that be adding code to the functions menu? What would the code be?

                                  Thanks again!