Flash Site Design - Invisible button rollover, text animation

Author

Invisible button rollover, text animation

djelder

2007-02-20, 10:15 pm

:beer;

Hi,

I am designing my website, I am good with flash and basic scripting, but I am
running across my first big problem. I will try and lay it out as best as
possible. I have the layout with the text, boxes and logos, I haven't animated
any of those yet, I wanted to get the harder scripting first. So I have my
rollover text menus, each menu is animated with an effect from after effects
that makes the text glow, Couldn't replicate in Flash easily enough, if at all.
I exported the animated text as .swf files and into flash as a movie clip. In
the movie clip, the animation is 100 frames, I moved it over one frame to make
it 101 frames so that the first frame isn't on my main scene with the first
frame being the first frame of the animation. I called the movie clip instance
"about_us" On my main scene, I have created an invisible button with over my
text, and have the animated text in place, then I scripted the invisible button:

on (rollOver) {
gotoAndPlay.about_us(2);
}

In the animation, I want it to continue to loop as long as they are on the
layer, and once they have rolloff I want it to stop, and if they click on the
button, I want it to go to the scene About Us.

Any advice would be greatly appreciated, thanks. Please ask if you need
clarification too.

aniebel

2007-02-21, 6:15 pm

I am guessing here since I'm having a hard time understanding your situation
but if it were me...

I'd make a movie clip button and put keyframes with the following frame labels
so it will respond to mouse events:
_up
_over
_down

At the "_over" keyframe start the animation. On the last frame of the
animation put a "gotoAndPlay" to the first frame of the animation(which is the
same frame as the "_over" frame label. On the "_up" and "_down" keyframes, put
a "stop();" That way you can put a static image on the keyframe for "_up" and
the playhead will not move forward.

I personally don't use scenes because they are problematic but apparently, if
you understand them thoroughly, you'll have no issues.

Then add this code in your actions layer to control the movie clip (button):

myButton.onRelease(){
this._parent.gotoAndPlay("about_us", 2);
};

djelder

2007-02-22, 6:15 pm

Hi,

Sorry for the delay in returning to you. Basic setup, I have my text, then I
created a text rollover in flash and exported it as a .swf file. Now here is
where I get lost in how I set up the timeline, buttons and scripting. So I
have my text "ABOUT US" and I have my text rollover animation which I called
about us rollover, it's instance name will be about_us_roll. How do I want to
set up this scenario so that when I rollover the area of the text, this .swf
file will animate on the rollover?

Thanks

aniebel

2007-02-22, 6:15 pm

How have you set your text as rollover? Do you have a paragraph of text?

Take your "ABOUT US" text, select it, hit F8 to create a movie clip. Then
you'll have a movie clip that, when opened, only displays the text on one
layer. Add another layer above that and title it "actions". This is the layer
you put your "stop();"s and your frame labels on.

You see, you need to make some sort of button (in this case it's a movie clip
button) in order for Flash to respond to mouse events like "onRollOver",
"onRollOut", "onPress", "onRelease". You can make text act as a hyperlink but
you won't get the functionality of a button or movie clip acting as a button.

Then follow my first set of directions to add your animation to the "_over"
state. Repeat this process for all areas you want to perform as buttons. Also,
make sure you put some rectangle or something in a layer behind your text. This
will act as the hit area. Otherwise, it will be hard for Flash to respond
because it will only see the bits that are the text as the hit area.

djelder

2007-02-22, 6:15 pm

My text right now is just "ABOUT US" I don't have an invisible button attached
to it yet, if I were to, would I put the invisible on it's own layer? or in the
text button, on the hit state? All I want is to have the text with the
rollover area, and the text animation rollover and rollout actions. Thanks
aniebel.

aniebel

2007-02-22, 6:15 pm

I forgot to mention, when you create an "actions" layer, you need to lock it
and not add any symbols to it. It should only contain ActionScript and even
though it's locked, you can still edit the code.

Ok, so...

Let's say you have you movie clip (button) and on the _down frame you want a
ball to bounce up and down. You can take the ball animation, make it it's own
movie clip (with an instance name something like "ball_mc"). Make the first
frame with a stop(); on it, add a keyframe to frame two then make your tweens
there. If you want it to loop continuously, on the last frame of the animation,
send it back to frame two again. Otherwise put another stop(); at the end of
the animation. You can control it from the actions in the main timeline like
this:

myButton.onPress = function(){
this.ball_mc.gotoAndPlay(2);
};
myButton.onRelease = function(){
this.ball_mc.gotoAndStop(1);
};