3 Replies Latest reply on Apr 16, 2006 9:30 PM by Realtoast

    Advanced Button with Movie Clip and Fading

      Problem: I'm trying to create a bottun that when you roll over it it plays a movie clip and also fades in and out on roll out. It is similiar to the three main navigating buttons on the following site.

      the buttons with the compasses that appear are the ones I am talking about.

      I already know how to make buttons, I just can't figure out the actionscripting to load the movie and also fade in and fade out according to roll over and roll out.

      Please help. Thank everyone.
        • 1. Re: Advanced Button with Movie Clip and Fading
          There are probably a couple different ways to get the effect that I saw on the site you mentioned. But, what I think that they are doing is, on rollover, loading an external .swf movie into a blank movie on the stage.

          1. First create a simple movie that tween-fades your symbol from Alpha 0 to Alpha 99, save that movie as an external .swf (i.e. sampleMovie.swf). Make sure to save it in the same file as your .fla. Then,
          2. Create a blank movie for your library (named blank), drag it to the stage and give it the instance name "blank_mc"
          2. Create your button, drag it to the stage. Highlight it on the stage and, in the buttons action panel, type:

          on (rollOver) {
          //load Movie Behavior
          if(this.blanc_mc == Number(this.blanc_mc)){
          } else {
          //End Behavior

          There. Now, when the mouse is hovered over the button, your external movie should fade right into the blank movie that you placed on the stage.


          Also, I used the Behaviors panel to get that code. Makes it real easy if you're not an actionscript hotshot (which I am admittedly not). Highlight your button; Window>Behaviors (Shift-F3). Click the "+" sign >Movieclip>Load External Movie Clip. Fill in the blanks.

          • 2. Re: Advanced Button with Movie Clip and Fading
            jacksonrobinson Level 1
            Thanks for your help that is exactly what I was looking for but that only gets me 50% there. If you notice on the example site the compass buttons fade in and fade out in congruence with the user rollover and rolloff I want to get that effect as well. So far the movie fades if you roll over it but if you quickly roll off it still plays through the movie clip. Thanks again for you help.
            • 3. Re: Advanced Button with Movie Clip and Fading
              Realtoast Level 1
              Amazingly, I actually know exactly how to do this. And it only requires about 4 lines of code in the _root layer and on the button.

              Instead of having the rollover load an external movie, you want the have the rollover execute an on(enterFrame) function that tells each newly entered frame of your movie to check to make sure the mouse is still on the button, and if not, send the movie playhead backwards.

              So, put that sampleMovie right on the stage with the button. Then write the code in the _root so that says: as long as the mouse is over the button, the movie will advance to nextFrame(). When it gets to the next frame, again the code checks to see if the mouse is on the button, if so, the movie is instruct to go one more next frame (which is tweening the fade, right?) again, over and over until the stop() at the last frame. But, if while while entering a frame, the code finds that the mouse is no longer over the button, it does the same thing but this time instructs prevFrame(), and so on, going prevFrame (backwards, in other words) as long as the mouse is not on the button.

              The result of the above is a gradual fade in and out, depending on whether the mouse is hovering. This, as opposed to an abrupt disappearing graphic on(rollOut).

              Click the below link for the .fla that demonstrates this technique (which, by the way, I learned from Joshua Davis' excellent book, "flash to the core". Check it out at Amazon, or wherever. Lots of cool tricks).

              click here for fade_Movie example