Category: Flash

This is a problem which is kinda difficult to describe in short sentence. But this is a problem which I seem to be running into for a couple of weeks now.

Lets descibe the problem and I will illustrate with a banner (or a simple flv-player) example:
The banner (rectangle) is contains a short animation (20 kB) and when you rollover the banner a video (flv) starts to load and play. Onrollout the video will stop playing and hide. But the banner has also smaller pause / play and sound-off buttons on top of the bigger button which start / stop / etc the video.

So the big button starts playing / loading the video onrollover and onrollout stops playing / hides the video. The smaller buttons are stop / pause / play / sound-on / sound-off actions.
Not so difficult, but the tricky part is in the rollout of the big button: as soon as you rollover the smal buttons it means that the video stops playing and hides (rollout of the big button)….

With a little help of Nils we he cracked this nutt:

View the working example hereupdate #1: onMouseMove has to change to this.onMouseMove

this.big_btn.onRollOver = function() {
	this.onMouseMove = function () {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			// rollover state and action
			this._alpha = 50;
			_root.MyCustomRoll("rollover: big_btn");
		} else {
			// rollout state and action
			this._alpha = 90;
			_root.MyCustomRoll("rollout: big_btn");
			delete this.onMouseMove;
			// trace("no hit");
		}
	};
};
// 
this.button1_btn.onRollOver = 
this.button2_btn.onRollOver = function () {
	this._alpha = 50;
	_root.MyCustomRollSmall(this._name + " onRollOver");
};
this.button1_btn.onRollOut = 
this.button2_btn.onRollOut = function () {
	this._alpha = 90;
	_root.MyCustomRollSmall(this._name + " onRollOut");
};
// debug / trace functions
function MyCustomRoll(txt:String) {
	this.debug_txt.text = txt;
}
function MyCustomRollSmall(txt:String) {
	this.debug2_txt.text = txt;
}