Scaling buttons on rollOver

[meglundy]

Ok, so first thank you in advance for helping.

Ok so check out this page: http://paragon.sortismarketing.com, and check out the scrolling menu below. This is the infinite scrolling menu found on this site. It works great.

Now i have one request, I know how to create a rollover with a movie clip that scales, but what I can't make work is the buttons in this movie scale(get larger, and smaller) upon rolling over and upon rolling off.

Please help. I was told there is a way to do this with action script instead of making the buttons a movie clip. is this true?

[doctorNo]

Hi Meghan,

If you are using an event listener to get the scale effect on rollover, you can create another eventListener to scale down on rollout.

if you are new to AS3, this may be challenging...what I do is create a tween for scaleX and scaleY, then on MouseEvent.MOUSE_OVER, I'd call the scale tween using something like:

scaleTween.continueTo(scale, duration)

where scale is how big you want it to be, and duration is the time it should take. on MouseEvent.MOUSE_OUT, I'd call the scale tween using this:

scaleTween.continueTo(1, duration)

1 being the normal (100%) scale of the button.

Hope this helps.

doctorNo

[onecommoncode]

Here is a quick sample



import fl.transitions.Tween;
import fl.transitions.easing.*;

box.addEventListener( MouseEvent.ROLL_OUT, mouseListener );
box.addEventListener( MouseEvent.ROLL_OVER, mouseListener );
box.buttonMode = true;

function mouseListener( event:MouseEvent ):void
{
switch( event.type )
{
case MouseEvent.ROLL_OVER:
new Tween( box, "scaleX", Strong.easeOut, box.scaleX, 1.5, .50, true );
new Tween( box, "scaleY", Strong.easeOut, box.scaleY, 1.5, .50, true );
break;

case MouseEvent.ROLL_OUT:
new Tween( box, "scaleX", Strong.easeOut, box.scaleX, 1.0, .50, true );
new Tween( box, "scaleY", Strong.easeOut, box.scaleY, 1.0, .50, true );
break;
}
}

[bzudo]

hey onecommoncode. i used your code and added a click event to it. when i click on the button it should take me to frame 3. it takes me there, but it also gives me this error code:


TypeError: Error #1009: Cannot access a property or method of a null object reference.
at website1_fla::mcMaster_1/mouseListener()

Here is what I added to your code. Any ideas?


stop();
import fl.transitions.Tween;
import fl.transitions.easing.*;

btn1_mc.addEventListener( MouseEvent.ROLL_OVER, mouseListener );
btn1_mc.addEventListener( MouseEvent.ROLL_OUT, mouseListener );
btn1_mc.addEventListener( MouseEvent.CLICK, mouseListener );
btn1_mc.buttonMode = true;

function mouseListener( event:MouseEvent ):void
{
switch( event.type )
{
case MouseEvent.ROLL_OVER:
new Tween( btn1_mc, "scaleX", Strong.easeOut, btn1_mc.scaleX, 1.2, .50, true );
new Tween( btn1_mc, "scaleY", Strong.easeOut, btn1_mc.scaleY, 1.2, .50, true );
break;

case MouseEvent.ROLL_OUT:
new Tween( btn1_mc, "scaleX", Strong.easeOut, btn1_mc.scaleX, 1.0, .50, true );
new Tween( btn1_mc, "scaleY", Strong.easeOut, btn1_mc.scaleY, 1.0, .50, true );
break;

case MouseEvent.CLICK:
gotoAndStop(3);
break;
}
}

[snickelfritz]

I'd rather see you using a TweenLite than the built-in tween class.
It's superior in virtually every way, and only costs you 2K.
The example below uses the targetFrame variable to move the playhead to specific frame labels.
I also added setChildIndex to the over state so the selected button is always on top.
fla is attached.


/*----------------------------------------------------------------------------
frame navigation script.
wrap button instances in parent movieclip "btnGroup"
button instance names correspond with their respective frame label targets.
----------------------------------------------------------------------------*/
stop();
import gs.TweenLite;
import fl.transitions.easing.*;

btnGroup.addEventListener(MouseEvent.MOUSE_OVER, mouseListener, false, 0, true);
btnGroup.addEventListener(MouseEvent.MOUSE_OUT, mouseListener, false, 0, true);
btnGroup.addEventListener(MouseEvent.CLICK, mouseListener, false, 0, true);
btnGroup.buttonMode = true;
btnGroup.mouseEnabled = false;

var targetFrame:String = "";

function mouseListener(event:MouseEvent):void {
switch (event.type) {
case MouseEvent.MOUSE_OVER :
btnGroup.setChildIndex(event.target as MovieClip, btnGroup.numChildren-1);
TweenLite.to(event.target, .5, {scaleX:1.5, scaleY:1.5, ease:Strong.easeOut});
break;

case MouseEvent.MOUSE_OUT :
TweenLite.to(event.target, .5, {scaleX:1.0, scaleY:1.0, ease:Strong.easeOut});
break;

case MouseEvent.CLICK :
targetFrame = event.target.name;
gotoAndStop(targetFrame);
break;
}
}

[bzudo]

awesome piece of script. how does flash know what button is being clicked? how does flash know which frame label to jump to?

sorry i'm new to this.

[snickelfritz]

The buttons and their respective frame label targets share the same names.
If button "btn1" is clicked, it's instance name will be assigned to the targetFrame variable, since this variable has been defined as the event.target.name within the CLICK function.
ie: "btn1" is clicked; event.target.name = "btn1", so targetFrame = "btn1", so the script below actually represents gotoAndStop("btn1"); playhead is sent to the frame label "btn1".

Below are the key aspects of the code.

var targetFrame:String = "";
targetFrame = event.target.name;
gotoAndStop(targetFrame);