Eye curve + elasticity

rawnewdlz · March 21, 2006, 6:07pm

Hi. I’m trying to create an eye effect where the pupil will follow the mouse arrow and slightly curve (like a sphere) when the mouse arrow is at an angle. I am also trying to have the pupil bounce back when the mouse arrow leaves the swf. any help would be greatly appreciated.

this is what I have so far but its buggy and only worx if its as 1.0
I tried to convert to as2 from what I saw on the forum but I’m still trying to figure it out.

 ActionScript Code:
 [FONT=Courier New][LEFT][COLOR=#0000ff]onClipEvent[/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000ff]load[/COLOR][COLOR=#000000])[/COLOR][COLOR=#000000]{[/COLOR]
MAXeyeMovement = [COLOR=#000080]30[/COLOR]
distanceFromEye = [COLOR=#000080]5[/COLOR]
ovality = [COLOR=#000080]1[/COLOR].[COLOR=#000080]5[/COLOR]
origin = [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]116[/COLOR],y:[COLOR=#000080]191[/COLOR][COLOR=#000000]}[/COLOR]
centerx = [COLOR=#000080]116[/COLOR];
centery = [COLOR=#000080]191[/COLOR];
x0 = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_x[/COLOR];
y0 = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR];

[COLOR=#000000]}[/COLOR]

[COLOR=#0000ff]onClipEvent[/COLOR]COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
xdiff = [COLOR=#0000ff]_parent[/COLOR].[COLOR=#0000ff]_xmouse[/COLOR] - origin.[COLOR=#000080]x[/COLOR]
ydiff = [COLOR=#0000ff]_parent[/COLOR].[COLOR=#0000ff]_ymouse[/COLOR] - origin.[COLOR=#000080]y[/COLOR]
radius = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]min[/COLOR]COLOR=#000000[/COLOR]
angle = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]atan2[/COLOR]COLOR=#000000[/COLOR]
[COLOR=#0000ff]_x[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]cos[/COLOR]COLOR=#000000[/COLOR]radiusovality + origin.[COLOR=#000080]x[/COLOR]
[COLOR=#0000ff]_y[/COLOR] = [COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]sin[/COLOR]COLOR=#000000[/COLOR]*radius + origin.[COLOR=#000080]y[/COLOR]
[COLOR=#0000ff]updateAfterEvent[/COLOR]COLOR=#000000[/COLOR]
[COLOR=#000000]}[/COLOR]

[COLOR=#0000ff]onClipEvent[/COLOR] COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000ff]startDrag[/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR], [COLOR=#000000]true[/COLOR][COLOR=#000000])[/COLOR];
xp = [COLOR=#0000ff]this[/COLOR]._x-x0;
yp = [COLOR=#0000ff]this[/COLOR]._y-y0;
x0 = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_x[/COLOR];
y0 = [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_y[/COLOR];
[COLOR=#000000]}[/COLOR] [COLOR=#0000ff]else[/COLOR] [COLOR=#000000]{[/COLOR]
mc.[COLOR=#000080]buffer[/COLOR].[COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#0000ff]this[/COLOR].[COLOR=#000080]move[/COLOR][COLOR=#000000]([/COLOR]centerx, centery, [COLOR=#000080]0[/COLOR].[COLOR=#000080]1[/COLOR],[COLOR=#000080]0[/COLOR].[COLOR=#000080]9[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[/LEFT]
[/FONT]

JoshuaJonah · March 21, 2006, 6:11pm

What do you mean by it doesnt work in AS2.0, what part of it doesn’t work?

I would add some strick datatyping, like this:

onClipEvent(load){
var MAXeyeMovement:Number = 30
var distanceFromEye:Number = 5
var ovality:Number = 1.5
origin = {x:116,y:191}
var centerx:Number = 116;
var centery:Number = 191;
var x0:Number = this._x;
var y0:Number = this._y;
}

onClipEvent(mouseMove){
var xdiff:Number = _parent._xmouse - origin.x
var ydiff:Number = _parent._ymouse - origin.y
var radius:Number = Math.min(Math.max(Math.sqrt(xdiff*xdiff+ydiff*ydiff)/distanceFromEye,0),MAXeyeMovement)
var angle:Number = Math.atan2(ydiff,xdiff)

//also, if these are supposed to be variable names, they conflict with properties. You can only use these like this if they are contained in a with() statement
_x = Math.cos(angle)*radius*ovality + origin.x
_y = Math.sin(angle)*radius + origin.y


updateAfterEvent()
}

onClipEvent (enterFrame){
this.onPress = function(){
startDrag(this, true);
var xp:Number = this._x-x0;
var yp:Number = this._y-y0;
var x0:Number = this._x;
var y0:Number = this._y;
} 
this.onRelease = function(){
mc.buffer.stopDrag();
this.move(centerx, centery, 0.1,0.9);
}
}

rawnewdlz · March 21, 2006, 6:28pm

thx 4 the datatyping help. The only part that works in AS2 is when the pupil follows the mouse arrow. In AS1 it follows just the same, but it’ll keep jumping (as if flashing) back into place w/elasticity.

JoshuaJonah · March 21, 2006, 6:40pm

ok… i would probably use the tween class with elasticity easing to get the eyes back to it’s origin. Are you familiar with tween class?

Kinda like this:

import mx.transitions.Tween;
import mx.transitions.easing.*;
onClipEvent(load){
var MAXeyeMovement:Number = 30
var distanceFromEye:Number = 5
var ovality:Number = 1.5
origin = {x:116,y:191}
var centerx:Number = 116;
var centery:Number = 191;
var x0:Number = this._x;
var y0:Number = this._y;
}

onClipEvent(mouseMove){
var xdiff:Number = _parent._xmouse - origin.x
var ydiff:Number = _parent._ymouse - origin.y
var radius:Number = Math.min(Math.max(Math.sqrt(xdiff*xdiff+ydiff*ydiff)/distanceFromEye,0),MAXeyeMovement)
var angle:Number = Math.atan2(ydiff,xdiff)

//also, if these are supposed to be variable names, they conflict with properties. You can only use these like this if they are contained in a with() statement
_x = Math.cos(angle)*radius*ovality + origin.x
_y = Math.sin(angle)*radius + origin.y


updateAfterEvent()
}

onClipEvent (enterFrame){
this.onPress = function(){
startDrag(this, true);
var xp:Number = this._x-x0;
var yp:Number = this._y-y0;
var x0:Number = this._x;
var y0:Number = this._y;
} 
this.onRelease = function(){
mc.buffer.stopDrag();
//this.move(centerx, centery, 0.1,0.9);
new Tween(this, "_x", Elastic.easeOut, this._x, centerx, 2, true);
new Tween(this, "_y", Elastic.easeOut, this._y, centery, 2, true);
}
}

check this out: http://www.macromedia.com/devnet/flash/articles/tweening_05.html

rawnewdlz · March 21, 2006, 6:46pm

I’m not sure how I would use it here. I’ll do a search for it. Thanks

I was also thinking for the eye to slightly curve it may be a better chance of getting it to shrink(scale) instead of *curve( *kinda 3d…never seen it done in flash though)

JoshuaJonah · March 21, 2006, 6:56pm

i put in a basic tween in the code i posted previously(-:

rawnewdlz · March 21, 2006, 8:26pm

Thanks for the help, the easing back in place doesn’t let the pupil follow the mouse arrow anymore. I think I may have to start over :cantlook:

rawnewdlz · March 22, 2006, 4:23pm

(guess after a while of not working with AS I’m lost.) I have the elasticity working. Anyone have advice for getting the eye to follow the mouse?
This is where I’m at so far

ActionScript Code:
[FONT=Courier New][LEFT][COLOR=#0000FF]onClipEvent[/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000FF]load[/COLOR][COLOR=#000000])[/COLOR][COLOR=#000000]{[/COLOR]

[COLOR=#0000FF]import[/COLOR] mx.[COLOR=#000080]transitions[/COLOR].[COLOR=#000080]Tween[/COLOR];
[COLOR=#0000FF]import[/COLOR] mx.[COLOR=#000080]transitions[/COLOR].[COLOR=#000080]easing[/COLOR].*;

[COLOR=#000000]var[/COLOR] centerx:[COLOR=#0000FF]Number[/COLOR] = [COLOR=#000080]116[/COLOR];
[COLOR=#000000]var[/COLOR] centery:[COLOR=#0000FF]Number[/COLOR] = [COLOR=#000080]191[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#0000FF]onClipEvent[/COLOR] COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]onPress[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]startDrag[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]onRelease[/COLOR] = [COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]onReleaseOutside[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]stopDrag[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#000000]new[/COLOR] Tween[COLOR=#000000]([/COLOR][COLOR=#0000FF]this[/COLOR], [COLOR=#FF0000]"_x"[/COLOR], Elastic.[COLOR=#000080]easeOut[/COLOR], [COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]_x[/COLOR], centerx, [COLOR=#000080]1[/COLOR], [COLOR=#000000]true[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#000000]new[/COLOR] Tween[COLOR=#000000]([/COLOR][COLOR=#0000FF]this[/COLOR], [COLOR=#FF0000]"_y"[/COLOR], Elastic.[COLOR=#000080]easeOut[/COLOR], [COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]_y[/COLOR], centery, [COLOR=#000080]1[/COLOR], [COLOR=#000000]true[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[/LEFT]
[/FONT]

Topic		Replies	Views
Limited Mouse Follow (please help) flash	11	93	January 25, 2003
Following eye? flash	0	41	September 29, 2003
Following eye?	0	35	September 29, 2003
Making eyes follow the cursor [FMX] flash	6	99	November 19, 2002
Mc follow movement then bounce back	1	73	March 24, 2006

Eye curve + elasticity

Follow:

Popular

Loose Ends

Eye curve + elasticity

Related topics

Follow:

Popular

Loose Ends