8 Replies Latest reply on Jan 9, 2011 5:45 PM by Declan.

    Mouse over effects? Help please.

    Declan.

      Hey guys.

       

      I am a Trainee Web Designer. I have done a few major projects for websites and stuff using alot of Adobe Programs but i have this job where i need to make a map of a school with rollover mouse effects.

       

      So when the mouse rolls over the Admin Building on the map, a large picture of the Admin Building comes up. Then when the mouse is moved away the images closes. I need to do that with about 8 images.

       

      I have one main image which is an arial of the school, then there is different sections that i need to make 'active'

       

      How can i go about doing this? i have looked for tutorials for ages now but they are either outdated or too advanced for me, i just need a tutorial that can show me how to achieve my goal. i cotton onto things very quickly so i dont get lost unless things get too advanced or there is a lack of explanation.

       

      Any help will be greatly appreciated.

       

      I will be happy to supply more information if you need me to,

       

      Thanks in advance,

      Declan

        • 1. Re: Mouse over effects? Help please.
          Ned Murphy Adobe Community Professional & MVP

          What you probably want to do is create invisible buttons that you place over the main image.  These will provide the rollover triggering that you want.  To make invisible buttons you can create button symbols that only have a shape in their "Hit" frames.  That creates a button that you can still see while editing but do not appear in the published file when you run it.

           

          Then you need to have an image that rolling over that button will bring into view.  It would be preferable to have the images that appear be away from the buttons so that they don't interfere/block the buttons, so each larger image may have to be placed in a different area.

           

          To control an image that appears, for starters you could just have it invisible and make rolling over the button make it visible.  You would need to convert these images to movieclips in order to accomplish that.  So let's say you create an image movieclip and place it on the stage and assign it an instance name of "image1" (instance names are assigned in the properties panel).  And for that image/movieclip's button you add a button over the main image and give that an instance name of "btn1"

           

          To make them work as planned, in the timeline in the same frame (different layer) where you have btn1 and image1, you would add code as follows...

           

          image1.visible = false;

           

          btn1.addEventListener(MouseEvent.ROLL_OVER, showImg1);

          btn1.addEventListener(MouseEvent.ROLL_OUT, hideImg1);

           

          function showImage1(evt:MouseEvent):boid {

               image1.visible = true;

          }

           

          function hideImage1(evt:MouseEvent):boid {

               image1.visible = false;

          }

          1 person found this helpful
          • 2. Re: Mouse over effects? Help please.
            Declan. Level 1

            Thanks so much! I will give it a go now and see how i go,

             

            So if i were to do it for multiple pictures i would just have

            Image1,

            Image2,

            Image3, etc in the respected places.

             

            Same with btn1, btn2 etc etc.

             

            Declan

            • 3. Re: Mouse over effects? Help please.
              Declan. Level 1

              I am getting 2 errors:

              Scene1, Layer 'Button', Frame 1, Line 5             1046: Type was not found or was not a compile-time constant: boid.

              Scene1, Layer 'Button', Frame 1, Line 9             1046: Type was not found or was not a compile-time constant: boid.

               

               

              This is my Code;

              (Undercover being the picture and UCButton1 being the Button)

               

               

              Undercover.visible = false;

              UCButton1.addEventListener(MouseEvent.ROLL_OVER, showUndercover); UCButton1.addEventListener(MouseEvent.ROLL_OUT, hideUndercover);

              function showUndercover(evt:MouseEvent):boid {
                   Undercover.visible = true;
              }

              function hideUndercover(evt:MouseEvent):boid {
                   Undercover.visible = false;
              }

              • 4. Re: Mouse over effects? Help please.
                carl schooff Level 3

                change the boid to void

                 

                just a typo.

                1 person found this helpful
                • 5. Re: Mouse over effects? Help please.
                  Declan. Level 1

                  Scene1, Layer 'Button', Frame 1, Line 5             1046: Type was not found or was not a compile-time constant: Void.

                  Scene1, Layer 'Button', Frame 1, Line 9             1046: Type was not found or was not a compile-time constant: Void.

                   

                  Is there something else that i am missing?

                   

                  i have named all the instances exactly to the ones in the tutorial, changed the typo but i still get the errors.

                  • 6. Re: Mouse over effects? Help please.
                    Declan. Level 1

                    **EDIT** I got it working its ok. Thanks for you help everyone!

                     

                     

                     

                     

                    Now when i change the Void to void i get a whole list of other errors, i will post a screenshot. i have no idea what is going on here and i really need to get this project finished for a client

                     

                    Screen.jpg

                    • 7. Re: Mouse over effects? Help please.
                      Ned Murphy Adobe Community Professional & MVP

                      Partly my fault for mixing up names (and for a keyboard that has somehow led me to become sloppier since getting it)...

                       

                       

                      image1.visible = false;

                       

                      btn1.addEventListener(MouseEvent.ROLL_OVER, showImg1);

                      btn1.addEventListener(MouseEvent.ROLL_OUT, hideImg1);

                       

                      function showImg1(evt:MouseEvent):void {

                           image1.visible = true;

                      }

                       

                      function hideImg1(evt:MouseEvent):void {

                           image1.visible = false;

                      }

                       

                       

                      For the others, you have some admin thing somewhere?

                       

                       

                       

                       

                      • 8. Re: Mouse over effects? Help please.
                        Declan. Level 1

                        Hey thanks for that. Well i have it working except for one thing. When i have my mouse over the button the images shows up, but it flashes like crazy like it is swapping between something. I have the exact code that you gave me, the only edits i made were to the names of the images and buttons. My image does cover another button and this seems to be the only time when my image will flash like crazy.

                         

                        The problem is i need the image to be displayed right above where the button/curser is.

                         

                        If you could help me sort out this problem that would be great.

                         

                        Thank you.