dcsimg
A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Design this navigation?

  1. #1
    Junior Member
    Join Date
    Jan 2004
    Posts
    12

    Design this navigation?

    Hi, I am very impressed by the simple and stylish site navigation used on www.imagedive.com I mean the navigation menu in the bottom left corner.

    I want to have the same navigation on my site but havent a clue on how to accomplish this. Looked everywhere for a similar code example that I could learn from, but found nothing.

    Any help would be appreciated. Thanks

  2. #2
    Sun Devil asun2art's Avatar
    Join Date
    Feb 2001
    Location
    Maui, Hawaii
    Posts
    573
    Try posting in the actionscript section. People there have tons of code. But I think you will have to make this one on your own.

  3. #3
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    it's pretty straightforward though you'd have to be confident with foundation actionscript.

    the method that I would use for creating it would be,

    make a movie clip for each instance of the menu.
    Create an empty movie clip.
    Inside the empty movie clip put the base menu on a layer.
    Put each of the other menu clips on a second layer, one after the other positioned underneath the main nav clip, so that as you move along the timeline the main clip is always visible but the secondary clips change as you hit each keyframe.
    then put labels and stop actions at each of those key frames. Name the labels relevant to your secondary clip.
    drop the clip containing all that on the stage in an appropriate position.
    create a mask that shows only the first level of nav.

    so then, to execute the effect you would put an action on each button that would go to the appropriate clip label in the movie clip containing the nav clips, then the code would move the clip upwards underneath the mask, so the clip under the main clip becomes visible and usable.

    there are other ways to do it that would be more code reliant, but this is probably the easiest way I can think of off the top of my head. the coding for it is straightforward if you know foundation actionscript stuff.

  4. #4
    Junior Member
    Join Date
    Jan 2004
    Posts
    12
    Originally posted by aversion
    to execute the effect you would put an action on each button that would go to the appropriate clip label in the movie clip containing the nav clips, then the code would move the clip upwards underneath the mask, so the clip under the main clip becomes visible and usable.
    How do you move the clips upwards? Could you include a small sample code perhaps?

    Thanks for your help. You have given me a good start on how to do this.

  5. #5
    Senior Member
    Join Date
    May 2002
    Location
    Salt Lake City
    Posts
    211
    how you always move stuff in flash, either a motion tween or some equation.

  6. #6
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    Originally posted by Doffenn
    How do you move the clips upwards? Could you include a small sample code perhaps?

    Thanks for your help. You have given me a good start on how to do this.
    I would do it using code, it's smoother and you can customise it if you have different height sections.

    if you attach an onenterframe event to the nav MC on the stage that contains some code that compares your current y-position with your desired y-position and multiplies the difference by a multiplier so you don't move all the way, but part of the way. This kind of movement is called easing and you can get all sorts of different movement by playing with the multiplier value.

    for example
    your desired y-position is set by yPos

    _root.yourNavMC.onEnterFrame = function() {
    this._y += (_root.yourNavMC.yPos-this._y)*0.1;
    };

    then all you need to do is set yPos to your desired y-position and the movie clip will ease itself into position.

    a multiplier of 0.1 will produce a slow smooth movement, 0.7 will be snppier and probably more suitable if you want to emulate the original effect.

  7. #7
    Junior Member
    Join Date
    Jan 2004
    Posts
    12
    Right. I understand what youre trying to do. My Flash skills are not up to date though and I cant seem to get this working. If you have the time to set up a small .fla demonstrating this it would help me enormously. Please...

    Thanks again for your time and help Aversion

  8. #8
    Junior Member
    Join Date
    Jan 2007
    Posts
    4

    Keeping state?

    Time to wake this thread again..

    I am trying to follow the advice by aversion on how to build this menu system.

    1. The original imagedive also keeps track of state. So that if you click on "Works" and then "2001" the menu remembers this state and indicates this by underlining the buttons.

    How is that done easily?

    2. Has anyone done a menu system that resembles the one suggested by aversion and are willing to share their code so that I can learn from it?

    Thanks / L

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center