all groups > flash (macromedia) > april 2006 >
You're in the

flash (macromedia)

group:

Advanced Button with Movie Clip and Fading


Advanced Button with Movie Clip and Fading jacksonrobinson
4/16/2006 8:46:33 PM
flash (macromedia): 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.

http://www.fjcruiser.ca/
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.
Re: Advanced Button with Movie Clip and Fading Sbisa
4/16/2006 9:35:21 PM
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)){
loadMovieNum("sampleMovie.swf",this.blanc_mc);
} else {
this.blanc_mc.loadMovie("sampleMovie.swf");
}
//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.

r

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.


Re: Advanced Button with Movie Clip and Fading jacksonrobinson
4/17/2006 2:14:07 AM
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.
Re: Advanced Button with Movie Clip and Fading Sbisa
4/17/2006 4:30:53 AM
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).

http://www.oemlive.com/fade_Movie.fla
AddThis Social Bookmark Button