5 Replies Latest reply on May 15, 2011 5:46 PM by Ned Murphy

    Fade-in Fade-out Flash Navigation Bar for Website

    MFDesigns1227 Level 1

      Hi,

       

      So my flash skills are pretty rusty. The project I'm currently working on is updating my portfolio site and I have a navigation bar that I want to fade in, click on a link, fade out, then go to the specified link. I've got the animation working the way I like, however I cant get the links to work correctly. I've used the standard getURL commands, but then every button goes to the same link, not different ones.

       

      What Action Script 3.0 coding do I need to make the animation play the way I've described and have each button go to it's own link? Thanks in advance for any help.

        • 1. Re: Fade-in Fade-out Flash Navigation Bar for Website
          Ned Murphy Adobe Community Professional & MVP

          Why do you want to switch to AS3 if you already have the animation working as desired in an AS2 file?  Maybe if you explain how you have the getURL code implemented the problem regarding going to multiple links can be resolved.

           

          In any case, as far as linking in AS3 goes...

           

          In AS3, to make a button work with code, you need to add an event listener and event handler function for it.  You might need to add a few (for different events, like rollover, rollout, clicking it, but for now we'll just say you want to be able to click it to get a web page to open.  In the timeline that holds that button, in a separate actions layer that you create, in a frame numbered the same as where that button exists, you would add the event listener:

           
          btn1.addEventListener(MouseEvent.CLICK, btn1Click);

           

          The name of the unique function for processing the clicking of that button is specified at the end of the event listener assignment, so now you just have to write that function out.  HEre it is showing the different pieces that go into it:

           
          function btn1Click(evt:MouseEvent):void {

             var url:String = "http://www.awebsite.com/awebpage.html";

             var req:URLRequest = new URLRequest(url);

             navigateToURL(req);

          }

           

           

          A commonly condensed version of that function's code would be...

           

          function btn1Click(evt:MouseEvent):void {

             navigateToURL(new URLRequest("http://www.awebsite.com/awebpage.html"));

          }

          1 person found this helpful
          • 2. Re: Fade-in Fade-out Flash Navigation Bar for Website
            MFDesigns1227 Level 1

            I get that, so that takes care of linking the different buttons to their own pages, but the animation isn't playing to the end before going to the specified page. Or are you saying that I insert the code you're suggesting IN ADDITION to the animation coding?

            • 3. Re: Fade-in Fade-out Flash Navigation Bar for Website
              Ned Murphy Adobe Community Professional & MVP

              You said you had the animation working the way you want, and the problem was all the buttons linked to the same web page.  So Iwas showing how to link using AS3.   You gave no explanation of the animation so I didn't attemot to offer code for doing it.

               

              If the issue is that you want to wait for the animation to finish before the change to the new link occurs, then you you need to build the triggering mechanism into the end of your animation.

               

              What you could try is to just have the button being clicked set a variable to a specific url string and trigger the animation to start. Then have the end of the animation call a function that uses that variable to make the web page change.

               

              // the main timeline code...

               

              var url:String = "";

               

              btn1.addEventListenert(MuseEvent.CLICK, startTransition);

               

              function startTransition(evt:MouseEvent):void {

                   url = "http://www.etc.com";

                   // start the animation

              }

               

              function goToPage():void {

                  var req:URLRequest = new URLRequest(url);

                  navigateToURL(req);

              }

               

               

              // the animation's last frame code

              MovieClip(parent).goToPage();

              1 person found this helpful
              • 4. Re: Fade-in Fade-out Flash Navigation Bar for Website
                MFDesigns1227 Level 1

                Thanks so much for your patients and help with this. I think I'm just not being clear about exactly what I have here. I am working in AS3. I have four buttons set up in the main timeline, each on their own layer, with an ACTIONS layer to govern the functionality. The animation starts, then at the specified frame in the ACTIONS layer I have the following code:

                 

                stop();

                function playclip(event:MouseEvent): void {

                this.play();

                }

                AboutBtn.addEventListener(MouseEvent.CLICK, playclip);

                ArtworkBtn.addEventListener(MouseEvent.CLICK, playclip);

                ResumeBtn.addEventListener(MouseEvent.CLICK, playclip);

                ContactBtn.addEventListener(MouseEvent.CLICK, playclip);

                 

                and then on the final frame of the ACTIONS layer a stop(); command.

                 

                The end result of this is the animation continues to the end, which is perfect. The problem comes in when clicking on the buttons. What do I need to add to the above code to make each button link to a different page after the animation is done playing?

                • 5. Re: Fade-in Fade-out Flash Navigation Bar for Website
                  Ned Murphy Adobe Community Professional & MVP

                  You probably need to read what I described in my last posting a few times.  If the buttons are telling the animation to play, then they can't also tell the movie to go to a new page at the same time.  Something has to wait until the animation is done, which the animation itself is perfect for.  The code you showed would be modified to be something more like...

                   

                  // start of animation

                   

                  stop();

                   

                  var url:String;

                   

                  function startClosure1(evt:MouseEvent):void {

                      url = "about.html";

                      play();

                  }

                   

                  function startClosure2(evt:MouseEvent):void {

                      url = "artwork.html";

                      play();

                  }

                   

                  AboutBtn.addEventListener(MouseEvent.CLICK, startClosure1);

                  ArtworkBtn.addEventListener(MouseEvent.CLICK, startClosure2);

                  // etc...

                   

                  ---------------------------

                   

                  // last frame of the animation...

                   

                  navigateToURL(new URLRequest(url));