Button function help

shuga · February 20, 2003, 7:26pm

here’s the code for my buttons that lostinbeta helped me with


MovieClip.prototype.MCenlarge = function(endWidth, endHeight, minWidth, minHeight) {
 this.speed = 10;
 this.endX = endWidth;
 this.endY = endHeight;
this.onEnterFrame = function() {
		this._xscale += (this.endX-this._xscale)/this.speed;
		this._yscale += (this.endY-this._yscale)/this.speed;
		if (this._xscale<=minWidth && this._yscale<=minHeight) {
			this._xscale = minWidth;
			this._yscale = minHeight;
		}
	}
}
MovieClip.prototype.createRollOvers = function(clipWidth, clipHeight) {
	this.onRollOver = function() {
		this.MCenlarge(this._xscale+20, this._yscale+20, clipWidth, clipHeight);
	}
	this.onRollOut = function() {
		this.MCenlarge(this._xscale-20, this._yscale-20, clipWidth, clipHeight);
	}
}
 this.onRollOut = function() {
  this.MCenlarge(this._xscale+20, this._yscale+20, clipWidth, clipHeight);
}
//declare buttons to which fuctions will be applied
_root.mm.tech.createRollOvers(133.7, 133.7);
_root.mm.design.createRollOvers(180, 180);
_root.mm.contact.createRollOvers(102.9, 102.9);
_root.mm.fun.createRollOvers(75.7, 75.7);
_root.mm.logoAnim.logoAndName.apic.createRollOvers(19.3, 29.1);
_root.mm.window.closer.createRollOvers(11.8, 11.8);

i can’t get a maxHeight / Width variable to work b/c the min variables do their job … but how can i make a max variable work

i tried something like this :: but it doesn’t work


MovieClip.prototype.MCenlarge = function(endWidth, endHeight, minWidth, minHeight, maxWidth, maxHeight) {
 this.speed = 10;
 this.endX = endWidth;
 this.endY = endHeight;
this.onEnterFrame = function() {
		this._xscale += (this.endX-this._xscale)/this.speed;
		this._yscale += (this.endY-this._yscale)/this.speed;
		if (this._xscale<=minWidth && this._yscale<=minHeight) {
			this._xscale = minWidth;
			this._yscale = minHeight;
		}
if (this._xscale>=maxWidth && this._yscale<=maxHeight) {
			this._xscale = maxWidth;
			this._yscale = maxHeight;
		}

	}
}
MovieClip.prototype.createRollOvers = function(clipWidth, clipHeight) {
	this.onRollOver = function() {
		this.MCenlarge(this._xscale+20, this._yscale+20, clipWidth, clipHeight, clipWidth, clipHeight);
	}
	this.onRollOut = function() {
		this.MCenlarge(this._xscale-20, this._yscale-20, clipWidth, clipHeight, clipWidth, clipHeight);
	}
}
 this.onRollOut = function() {
  this.MCenlarge(this._xscale+20, this._yscale+20, clipWidth, clipHeight, clipWidth, clipHeight);
}
//declare buttons to which fuctions will be applied
_root.mm.tech.createRollOvers(133.7, 133.7);
_root.mm.design.createRollOvers(180, 180);
_root.mm.contact.createRollOvers(102.9, 102.9);
_root.mm.fun.createRollOvers(75.7, 75.7);
_root.mm.logoAnim.logoAndName.apic.createRollOvers(19.3, 29.1);
_root.mm.window.closer.createRollOvers(11.8, 11.8);

system · February 20, 2003, 8:32pm


        if (this._xscale<=minWidth && this._yscale<=minHeight) {
            this._xscale = minWidth;
            this._yscale = minHeight;
        }
        if (this._xscale>=maxWidth && this._yscale<=maxHeight) {
            this._xscale = maxWidth;
            this._yscale = maxHeight;
        }

This is what you have and I am curious if it is what you want because I am not sure what it is you are doing. The way you have set up the if statements you have to have both the x and y scales above or below the min/max to get them to be set to the min/max

You might want to use something like below which will set each scale seperate of each other, so if the x is above max but the y is not it will reset the x instead of waiting on the y.


this._xscale = (this._xscale<=minWidth) ? minWidth : this._xscale + 1;
this._yscale = (this._yscale<=minHeight) ? minHeight : this._yscale + 1;
this._xscale = (this._xscale>=maxWidth) ? maxWidth : this._xscale + 1;
this._yscale = (this._yscale>=maxWidth) ? maxHeight : this._yscale + 1;

This way it will update each scale when they are above or below their min and max instead of only updating when both are above or below.

system · February 20, 2003, 10:08pm

i’m not sure i understand exactly what you’re saying … let me explain exactly what i’m doing

i have movieclips to which i want to apply this function
the function is intended to enlarge w/ easing on rollOver and shrink w/ easing on rollOut

it scales 20% of the current x and y values. the problem is if it doesn’t get to shrink all the way back down or get all the way to the top when you rollOver or rollOut then it changes the x and y values from which the mc will scale.

i want it to have a number set that is the height and width of the mc and i want it to scale 20% larger and then back down to where it was

no more … no less … b/c i don’t want the buttons getting endlessly larger / smaller

i could do it with animation but that’d be a lot of work … this is nice b/c i can just add the button’s instance name to the script and poof =)

your help is greatly appreciated

system · February 20, 2003, 10:22pm

I didnt really look at the code but what I assume youre missing is ‘target scales’ <- meaning the destinations scales to approach while easing. This opposed to the ‘incremement me this much while easing this many times’ which can lead to the confusion.

I have an example online somewhere using MC rollover w/ hitTest in Flash 5. It will give you the basic idea I think…
whoops, its elastic, not ease
http://www.umbc.edu/interactive/fla/elastic.swf
http://www.umbc.edu/interactive/fla/elastic.fla
but you can atleast see how each scale size is based on a target scale - the scale to attempt to achieve when the mouse is over, and the scale to shoot for after the mouse leaves.

system · February 24, 2003, 9:56pm

senocular , your fla was very usefull I’ve been looking all over for a similar effect.
Is there any supplemental scripting that could be added to the elastic effect that would achieve something like the menu seen here

http://www.posny-artwork.de/flash.html

If there is could you please explain.

your help is greatly appreciated

system · February 24, 2003, 10:06pm

what a gorgeous site
that scripting that is involved in making that menu work like that isn’t the same as what senocular posted. i don’t know how to do it but it’s the same interaction as Macintosh’s OS X menu has … so do a search on this site or www.flashkit.com or www.google.com and you might find an fla you can take apart.

::side-note::
i always see great websites and design coming from other countries. it makes me sad that we only have 2 or 3 cities where designers are. i really wish the american psyche didn’t downplay the importance of design and creativity so much. it’s really quite discouraging. anyway … enough *****ing … back to my work

i hope this helps

Button function help

Follow:

Popular

Loose Ends