ActionScript 3.0 and rollovers.

March 4, 2009 12:16 PM

ActionScript 3.0 trouble: rollover effects.

Alright, so here's what I'm trying to do in Flash CS3. I want a button to get darker when I roll over it, and lighten back up when I roll out. It's linked to a movie clip with a simple tween to change the color, and I have ActionScript (3.0) doing this. (HTML link; my code got messed up during preview.)

This works except for the fact that it doesn't fade between colors; it simply jumps between them, and I can't figure out why. I've tried Googling, but that's proved fruitless.

If you can find a way to fix my current code rather than replace it, that would be much preferred (i.e. no alpha effects, please).

Feel free to email/MeMail me with questions, for the .fla, etc. Thanks so much.

Running OS X 10.5, Flash CS3.

posted by reductiondesign to computers & internet (11 comments total)

Looks like you're stepping through frames at processor cycle speed instead of at your desired frame rate. Try moving your animation into a separate enterframe event handler, and use your mouse events to add/remove listeners for that.
posted by kaseijin at 12:41 PM on March 4

I'm sorry, could you be a lot more specific? I haven't used Flash in years.
posted by reductiondesign at 12:47 PM on March 4

Essentially, something to this end... my syntax may be buggy - I just threw this together, but you can see where I'm going with it:

private var _dir:Number = 0;

onMouseOver.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler, false, 0, true);
onMouseDown.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);

private function activateEnterFrame():void {
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
}

private function portfolioResponsePlay(e:MouseEvent):void {
if(portfolioAnimation.currentFrame <> _dir = 1;
activateEnterFrame();
}
}

private function portfolioResponseRev(e:MouseEvent):void {
if(portfolioAnimation.currentFrame > 1) {
_dir = -1;
activateEnterFrame();
}
}

private function enterFrameHandler(e:Event):void {
if (_dir != 0) {
portfolioAnimation.gotoAndStop(portfolioAnimation.currentFrame + _dir);
} else {
this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler, false);
}
}
posted by kaseijin at 12:53 PM on March 4

Feh, that bugged out on html render. lemme try this:

private var	_dir:Number = 0;

onMouseOver.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler, false, 0, true);
onMouseDown.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);

private function activateEnterFrame():void {
	this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
}

private function portfolioResponsePlay(e:MouseEvent):void {
	if(portfolioAnimation.currentFrame <>
		_dir = 1;
		activateEnterFrame();
	}
}

private function portfolioResponseRev(e:MouseEvent):void {
	if(portfolioAnimation.currentFrame > 1) {
		_dir = -1;
		activateEnterFrame();
	}
}

private function enterFrameHandler(e:Event):void {
	if (_dir != 0) {
		portfolioAnimation.gotoAndStop(portfolioAnimation.currentFrame + _dir);
	} else {
		this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler, false);
	}
}

posted by kaseijin at 12:55 PM on March 4

Hmm, that did it too... mods, please delete above!

private var	_dir:Number = 0;

onMouseOver.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler, false, 0, true);
onMouseDown.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);

private function activateEnterFrame():void {
	this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
}

private function portfolioResponsePlay(e:MouseEvent):void {
	if(portfolioAnimation.currentFrame <>
		_dir = 1;
		activateEnterFrame();
	}
}

private function portfolioResponseRev(e:MouseEvent):void {
	if(portfolioAnimation.currentFrame > 1) {
		_dir = -1;
		activateEnterFrame();
	}
}

private function enterFrameHandler(e:Event):void {
	if (_dir != 0) {
		portfolioAnimation.gotoAndStop(portfolioAnimation.currentFrame + _dir);
	} else {
		this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler, false);
	}
}

posted by kaseijin at 12:57 PM on March 4

Feh, I dunno why MeFi is rendering "<>" but oh well... you get the jist.
posted by kaseijin at 12:58 PM on March 4

Basically if you're trying to step forward or back frames via a while loop, Flash is going to do it at the speed with which your machine parses the code (which is why you're seeing an abrupt jump). For animation, you need to tie that stepping to the timeline using an enter frame event.
posted by kaseijin at 1:00 PM on March 4

Oh, and that last conditional there should check to see if the current frame is 0, not the _dir variable. =P
posted by kaseijin at 1:01 PM on March 4

I copy/pasted that code in Flash and cleaned it up as best I could:

"The private attribute may be used only on class property definitions."

Eh? By the way, thanks so much for helping; this is above and beyond what I expected.
posted by reductiondesign at 1:08 PM on March 4

Ah yeah, I set that up to go inside a class. If you're sticking the code on the timeline, then just kill the "private" declarations.
posted by kaseijin at 1:11 PM on March 4

Ha, I just noticed that I didn't name the handlers consistently, either. I always name them something like mouseDownHandler, so that upper part was basically autopilot. anyway - if you need any more help shoot me a mefi mail
posted by kaseijin at 1:22 PM on March 4