2 Replies Latest reply on Jan 12, 2014 3:11 PM by AMULI

    Help Movement for a navigation bar

    brakkin

      I am currently trying to setup a navigation bar, and cannot get it to function correctly.  In my head it should be easy, yet its just not coming together in Edge.  I found this template for a website and I really like the navigation layout but wanted to do it a little differently.  But I am currently stuck on getting the buttons to slide out on mouse over and was wondering if anyone could point me in the right direction.

       

      Template I am trying to make my navigation bar resemble: http://www.templatemonster.com/demo/45856.html

       

      And here is my project that I have been working on: https://docs.google.com/file/d/0BzU-llWDwE4teVRnX01IS3h6XzA/edit?usp=sharing

       

      Any help would be greatly appreciated.  I setup mouseover to have it move to the left, yet everything moves to the left as soon as it is opened in html.  I am hoping to make it similar to the template, except to have the buttons slide down and have the page slide between the top part where a company logo will go and the buttons.  The template has the new page go underneath.... I am not sure if I need to start with a stop command....

       

      Honestly imo (just cause this is all new to me) it would be easier instead of having a timeline bar where everything runs in order, but instead to have it all run based on mouse commands...

        • 1. Re: Help Movement for a navigation bar
          AMULI Level 4

          Hi brakkin,

           

          You should trim your graphics file to the bounding box of the icon : you waste resources with useless transparent pixels.

           

          The icon images (they are highly pixelated) and backgrounds should be flattened in a unique image file to limit the number of elements to tween.

           

          You need to structure with symbols. First convert the black rectangle, that will be instantiated four times, into a blackRect symbol (uncheck autoplay).

           

          Each of the four symbols item1, item2, item3 and item4 wraps an instance of blackRect, a text and the icon image (GIF). They are laid out on stage and stacked correctly in the Elements panel (top : item4 ; bottom : item1).

           

          We could then select the four symbols and convert them into a symbol accordion (uncheck autoplay). The timeline for this symbol would have four labels : expand1 (0 s), expand2 (1 s), expand3 (2 s), expand4 (3 s), each of these sequences (tweening the left property of one of the items) ending by a sym.stop(); trigger. Finally, we would add mouseover and mouseout event handlers with sym.play(); and sym.playReverse(); statements.

           

          Such a timeline-based solution would only be possible with a linear state machine. Here, there are five states : S0 (collapsed), S1 (item1 expanded), S2 (item2 expanded), S3 (item3 expanded) and S4 (item4 expanded). By linear state machine, I mean a graph of possible state changes like the following :

           

          S0 <==> S1 <==> S2 <==> S3 <==> S4

           

          But that's not the case here : to the preceding changes, you must also add the possible state changes

           

          S0 <==> S2, S0 <==> S3 and  S0 <==> S4

           

          For example :

           

          S1 + mouseover item2 => S2

          S2 + mouseout on the right (mouseover item3) => S3

          S2 + mouseout on the left (mouseover item1) => S1

          S2 + mouseout on the top or bottom => S0

           

          So, you need to handle by code

          - the complete state machine

          - the tweening via animate()

           

          Gil

           

          PS : this is an horizontal variant of the accordion widget

          1 person found this helpful
          • 2. Re: Help Movement for a navigation bar
            AMULI Level 4

            A solution with example files here : http://forums.adobe.com/thread/1376754?tstart=0

             

            Gil

            1 person found this helpful