6 Replies Latest reply on Aug 25, 2010 4:07 PM by lopoo

    Animated hit area into a button, it's possible?

    Rubén Santiago Level 1

      Hi!, i wondering if a button of this kind is posible:

       

      I have an 800x800px button within a 800x800 stage, in the up state only 200px of the button are visible, the others 600px remains out of the stage, the over state is a movie clip with a spring-like animation that brings the button to the left to a viewable area of 600 pixels (while now only 200px are left out of the stage). the down state is very the same than the over (without animation, so no changes in size at all).

       

      The problem here is how i set my hit area: if I set it to be the size of the up state then the button works the way it's supposed to work but if i move the mouse just i little to the left (just out of the hit area, remember, same size as the up state) then is considered not to be on the over state so i come back to my initial 200px button. By the way if i set the hit area to match the size of the button once it has completed it animation on over state (600px of viewable button) I fix this issue but then I will click the button even when I'm out of the UP state.

       

      It's possible to place a movie clip inside the hit area so that it always mach the motion of the movie clip inside the over state?

       

      To explain myself better here is the site I'm working in: http://matriuska.iblogger.org/

      This is an early prototype of the site but you'll see what i mean, my buttons are the numbered tabs, when you roll over there you'll see they become animated but i planning to make this animation much more exaggerated and then is when the problem come...

        • 1. Re: Animated hit area into a button, it's possible?
          kglad Adobe Community Professional & MVP

          i don't see a problem on your website and am not sure what problem you see when you make the changes you want to make.


          • 2. Re: Animated hit area into a button, it's possible?
            Rubén Santiago Level 1

            Yes, I know is difficult to see the probleng as long as the website I just posted is an old version of the site. In the new version the animation of the tabs extend a lot more to the left leaving a great portion of the tab visible and here is whe the problems come... Let me explain it with a few screenshots...

             

            The user is supposed to click on any visible area of a given tab in order to access the content, most likely in the center of the tab (see the pink circle)

            1.jpg

            So I've set my hit area accordingly to this. I don't care the hit area extends far from the right as the stacked tabs overlap each other...

            2.jpg

            So this is how is supposed to work the hit area, when the mouse come into this area it will trigger the movie clip i've placed into the over stare...

            3.jpg

            This will bring the tab to this position, but note that, as this happens very quickly (only 15 frames or so) the mouse pointer remains in the place where it were before triggering the movie clip:

            4.jpg

            Now this is a problem because as long as the hit area remains unchanged is quite easy for the user's hand to move outside the hit area making the extended tab disappear, this lead to a very weird behavior. The idea is that you can hover your mouse all over the extended tab area and that you'll have to hover outside that area in order to get back to up state.

            5.jpg

             

            The obvious solution will be to set a hit area tha covers the entire animation so that the user will need to hover completly outside the extended tab to come back to the up state as it is intended:

            6.jpg

            But, the problem is that by doing so i would have a hit area much larger than my actual up state.

            7.jpg

             

            So the question is if there is another method to get this accomplished or maybe a way to set an movie clip for would be equal to both the over and hit state? As far as I Know is only possible to set basic shapes as hit areas...

            • 3. Re: Animated hit area into a button, it's possible?
              kglad Adobe Community Professional & MVP

              i still don't see a problem.

               

              don't assign a hitarea.  assign a rollover/rollout to 01, 02 etc.

              • 4. Re: Animated hit area into a button, it's possible?
                Rubén Santiago Level 1

                Well, it's done!, thank you very much!!

                 

                You were right, i didn't need to make a button but to code some action script so the the tabs became AS3 buttons with rollover rollout mouse events.Now the problem is solved and everything work like a charm!

                 

                The problem were that my AS knowledge were very poor (in fact it's limited to some "stop" and gotoAndPlay commands) but now I've done the homework and have learned some basics of AS3 (thanks google!).

                • 6. Flash
                  lopoo

                  thenks