4 Replies Latest reply on Nov 5, 2009 4:59 PM by pbase

    Solution needed for simple navigation issue…

    pbase

      I would like to create an image navigation window similar to the one at Conservation International:

      http://conservation.org/Pages/default.aspx

      Where the large image changes on mouseover of the smaller preview images, and the small previews are linked to their respective pages. I'm sure it's rather simple to do, but I could use some guidance. Either direction to a tutorial or an out-the-box solution that requires customization.

      Any advice appreciated.

        • 1. Re: Solution needed for simple navigation issue…
          Ned Murphy Adobe Community Professional & MVP

          I wouldn't call it simple--and while I sometimes have to catch myself using "simply" in a response, I usually hesitate to call anything simple to explain.

           

          I don't know that you will find a tutorial that will mirror what your example page has.  What you'll need to know is how to code button behaviors for rollover and clicking of the thumbnail images.  And because you can go from any one image to another, you will need to learn how to use actionscript tweening for the fade-in effect and the code needed for swapping the depths of the larger images so that the one fading in always moves to the top.  The actual commands you will use depend on which version of actionscript you plan to use.

           

          If you search Google you might find a slideshow tutorial that has some of the features that I outlined... or maybe all of them between a few different ones.  Try search terms like "AS# slideshow tutorial" where you substitute 2 or 3 for #.

           

          One recommendation I will make it get a simplified functional version working before you otherwise design yourself into a corner. Just have two buttons (or movieclips as buttons) and two images (movieclips) and get that working first.  Don't sweat the aesthetics.

          • 2. Re: Solution needed for simple navigation issue…
            pbase Level 1

            Thanks Ned, I have a bit of experience working with AS, but mainly in making alterations to existing script. Let me see what a search on the terms you recommended turns up.

            • 3. Re: Solution needed for simple navigation issue…
              Ned Murphy Adobe Community Professional & MVP

              For the tweening, there is the built-in Tween class (both in AS2 and AS3).  And that should work well enough for the purposes indicated.  Others will recommend using a third party tweening class like tweener or tween-lite/max, but for getting started I figure the built-in is the better option.

              • 4. Re: Solution needed for simple navigation issue…
                pbase Level 1

                Ned, are you a Flash developer? Perhaps you can answer a few questions.

                 

                Like conservation.org, I'm only using four images.

                 

                I'm assuming I can place all four images on a single timeline.

                Can the small navigation thumbnails be placed on a separate layer, with actionscript that will control

                the display of the larger images on mouseover?

                 

                And if I'm not asking too much, how does one use a tween to control fade-in and fade-out between different images

                on a timeline?