Advanced RollOver effects

[Spencer Lavery]

Hi guys,

I need to create a holding page with navigation to 4 sections within. The navigation is simply 4 small boxes in the middle of the page, then when the browsers hovers over each box, I would like the box to 'grow' and give a little information about the section.

I would want the larger box to the be clickable to take the browser to the section, and I would want the box to get smaller when the mouse leaves the box.

Ideally I would want the boxes to get bigger and smaller in a 'fluid' manner, so that if if only grows to 50% size (because the mouse wasn't over it for very long) it would then shrink from 50% to the small box, instead of jumping back up to 100% or jumping back to a small box.

What would be the best way of doing this do you think?

All I can think of is having it as a movie clip in the buttons 'over' state, but that wouldn't allow the growth to be fluid.

I could also make the small boxes jump to sections on rollOver, containing the relevant movieclip, but that also would not be fluid.

What would you recommend?

[Ohls]

I didnt fully understand what you ment but I think what you want to use is some tween scripts.

ActionScript Code:

var buttonspeed = 15

_root.<instances>.onRollOver = function() {
myXTween = new mx.transitions.Tween(_root.<instance>, "_y", mx.transitions.easing.Regular.easeOut, _root.<instance>._y, 10, buttonspeed);
};





var buttonspeed = 15
sets up a variable named buttonspeed, and sets the value to 15.

_root.<instances>.onRollOver = function() {
When you roll over the _root.<instance> this/these functions will happen

myXTween = new mx.transitions.Tween
To be honest I'm not 100% sure what all of this does, all I know is that it creates the tween.

(_root.<instance>,
Object that should be tweened.

"_y",
property that should be tweened

mx.transitions.easing.Regular.easeOut,
this creates a normal easeOut as if you should make a non scripted tween. You can also use Elastic, Bounce etc. Cant remember them all right now.

_root.<instance>._y,
The starting position of the tween, in this case its the current position of the object. It could aswell be any number or a variable.

54,
The end position.

buttonspeed);
The speed for the tween. I used this script for several buttons, thus I made a variable for the speed so that I could easily change it for all the buttons. The higher the value the slower the tween will be.

Hope I helped =)

[Anogar]

Check out this tutorial:

http://www.kirupa.com/developer/mx2004/button_effect.htm

This method allows for incredibly complex and still smooth rollover effects.

[Spencer Lavery]

Hi guys,

Thanks for the replies, they were both incredibly helpful!

The first method looks as though it could be tweaked a lot more but being a bit of an actionscript newbie I'm going to have to use the method in the tutorial. Surprised I didn't see that tute myself!

Thanks again both of you!

[Spencer Lavery]

Hi guys, here's how it looks:

http://test.freshegg.com/letterstone/Site%20Concept%20(Flash%20Holding%20Page)/ (http://test.freshegg.com/letterstone/Site%20Concept%20%28Flash%20Holding%20Page%29/)

I've run into a small proble though, I need to make the gray box disappear when the user rolls over the blue or yellow boxes. I used the same method with the gray box as described in the tutorial, and changed the actionscript to reflect rollOver of the blue box's instance name, but that hasn't worked. Any ideas?


stop();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

BlueBox.onRollOver = function(){
Intro.rewind = false;
Intro.play();
}

BlueBox.onRollOut = function(){
Intro.rewind = true;
}

[Spencer Lavery]

Nevermind I figured it out :)