8 Replies Latest reply on Oct 7, 2011 5:26 AM by Ned Murphy

    Growing Button Rollover help

    andersonOllie

      Hi guys,

      I've searched for a similar discussion but can't find one, so the first bit of help i'd like is if anyone can point me to an already exisiting discussion...

       

      I'm basically looking to create some buttons that once 'rollover'd' grow slightly, and shrink again once 'rollout'd', and im hoping to add a little bounce (or i believe its called elastic) once it snaps back.

      I am a beginner, but have created buttons before with rollover, rollout etc but arent sure how to create the motion of it growing in the button.

      (Im using Flash CS4 and was intending AS3, but happy to use whatever is recommended for this.)

       

      All and any help very much appreciated!

       

      Ollie

       

      ps i did use this site tutorial (http://www.kirupa.com/developer/mx2004/button_effect.htm), but i wasnt sure which AS or CS it was using. Everything worked but the motion of the growing.

        • 1. Re: Growing Button Rollover help
          Ned Murphy Adobe Community Professional & MVP

          That tutorial is using AS2, so if you want it to work you probably need to switch your Publish Settings to be for AS2.  There is also some poor programming being demo-ed in that tutorial - namely an onEnterFrame that is always running unnecessarily.

           

          If you want to use AS3, you'll need to change the code to use event listeners for the buttons (movieclips as buttons, that is).    Here the equivalent code in AS3 with the fix for the enterframe wastefulness in place... (code not tested).

           

          var rewind = false;

           

          function enterFrame():void{ 
             if(rewind == true && currentFrame > 1){ 
                prevFrame();
             } else {
                this.removeEventListener(Event.ENTER_FRAME, enterFrame);
                rewind = false;
             }

            
          this.addEventListener(MouseEvent.ROLL_OVER, thisRollOver);
          this.addEventListener(MouseEvent.ROLL_OUT, thisRollOut);
          this.addEventListener(MouseEvent.CLICK, thisClick);

           

          function thisRollOver(evt:MouseEvent):void{ 
              rewind = false; 
              play();

            
          function thisRollOut(evt:MouseEvent):void{ 
              rewind = true;
              this.addEventListener(Event.ENTER_FRAME, enterFrame);

            
          function thisClick(evt:MouseEvent):void{
              navigateToURL(new URLRequest("http://www.kirupa.com"),"_blank");
          }

          1 person found this helpful
          • 2. Re: Growing Button Rollover help
            andersonOllie Level 1

            Hi Ned,

            Thanks for your reply.

             

            That's a great help towards me using AS3 for this project.

            Should i be replacing the ENTER_FRAME and enterFrame with my mc/gr etc? I'll have a go now.

             

            You mentioned that the tutorial may not be a good example, is there an easier way you know of and could perhaps show me?

            This is currently a very simple test so i can get my head around how it works, then i'll be making a simlar project more customised with more complex graphics, and for about 9 buttons.

             

            Thanks!

             

            Ollie

            • 3. Re: Growing Button Rollover help
              Ned Murphy Adobe Community Professional & MVP

              The poor aspect of that tutorial is remedied in the AS3 code I provided - notive that the ENTER_FRAME listener is assigned as needed and removed when it isn't..  Just be aware that I haven't tested the code, I just typed it up without checking it, so hopefully I didn't err. 

              • 4. Re: Growing Button Rollover help
                andersonOllie Level 1

                I wish i could speak ActionScript like you can. I'm going to do a class to get mroe to grips with things soon.

                 

                Is there a better way you would do this Ned? EG if you wanted to have some buttons that grew slightly when hovered what would you do? If you could provide any code for that or instruct a BASIC tutorial for such a thing that would be amazing.

                As i said, once i can see a good working example of this and absorb how it all works i'll be making my own version with better imagery etc.

                 

                Very grateful Ned,

                 

                Ollie

                • 5. Re: Growing Button Rollover help
                  Ned Murphy Adobe Community Professional & MVP

                  If you can't get the one working for you using the tutorial you already tried, I don't expect my creating one just for you would result in anything more successful..  I recommend you stick with the tutorial you already found and get it working as an AS2 file... understand how it works, then make the adjustments to get it working as an AS3 file.

                  • 6. Re: Growing Button Rollover help
                    andersonOllie Level 1

                    Ok thanks Ned, i will give it a go.

                     

                    Ollie

                    • 7. Re: Growing Button Rollover help
                      andersonOllie Level 1

                      Can i just confirm that the tutorial should work?

                      Im running CS4 and will do it in AS2.

                      I'm just making sure i don't waste another afternoon trying to problem solve something that doesnt work.

                       

                      Thanks

                      • 8. Re: Growing Button Rollover help
                        Ned Murphy Adobe Community Professional & MVP

                        Yes, you can confirm that the tutorial should work by downloading the source file for it for which they provide a link.  Even if the tutorial is poorly written (I am not going to review/critique it for you), the file should be all you need as a working example to follow.