26th May 2008

Hey Look, a Mouse.

In one of the books I am reading, Foundation Actionscript 3.0 Animation : Making Things Move! by Keith Peters, he has an example of using trig to make an arrow point at the location of the mouse. I decided to play with this a bit and make an animation where the eyes follow the mouse. I actully ended up adding this to my animation class, so this (after attaching the class via the library linkage):

can be accomplished with:

leftEye.startWatchingMouse();

rightEye.startWatchingMouse();

 

Functions in class:

 

public function startWatchingMouse():void{

stage.addEventListener(MouseEvent.MOUSE_MOVE,watchMouse);

}

public function stopWatchingMouse():void{

stage.removeEventListener(MouseEvent.MOUSE_MOVE,watchMouse);

}

private function watchMouse(event:MouseEvent):void{

var dx:Number = stage.mouseX - this.x;

var dy:Number = stage.mouseY - this.y;

var rad:Number = Math.atan2(dy,dx);

//for some reason the example as written was 90 degrees off, so I added 90 and that fixed it.

this.rotation = rad*180/Math.PI + 90;

}

Edit:

Found a version of the class that has these function in it.

package com.vfd.animation{
/**
* Animation class. Based off of mc_tween2.as project.
* @author Jeremy Wischusen <cortex@visualflowdesigns.com>
*/
import flash.display.Sprite;
import fl.transitions.Tween;
import fl.motion.Color;
import flash.geom.ColorTransform;
import fl.transitions.TweenEvent;
import flash.events.Event;
import flash.events.MouseEvent;
public class AnimatedClip extends Sprite {
private var originalX:Number;
private var originalY:Number;
private var xTween:Tween;
private var yTween:Tween;
private var alphaTween:Tween;
private var rotationTween:Tween;
private var widthTween:Tween;
private var heightTween:Tween;
private var eventTween:Tween;
private var tweenArray:Array;
private var colorTween:Tween;
private var colorTrans:ColorTransform;
private var tweenToColor:Number;
private var lastColor:Number;
private var timerClip:Sprite;
private var orbitAngle:Number = 0;
private var _orbitVelocity:Number = .5;
private var _orbitY:Number = stage.stageHeight/2;
private var _orbitX:Number = stage.stageWidth/2;
private var _orbitDistance:Number;

public function AnimatedClip() {
this.originalX = this.x;
this.originalY = this.y;
this.xTween = new Tween(this, "x", null, this.x, this.x, 1, true);
this.yTween = new Tween(this, "y", null, this.y, this.y, 1, true);
this.alphaTween = new Tween(this, "alpha", null, this.alpha, this.alpha, 1, true);
this.rotationTween = new Tween(this, "rotation", null, this.rotation, this.rotation, 1, true);
this.widthTween = new Tween(this, "width", null, this.width, this.width, 1, true);
this.heightTween = new Tween(this, "height", null, this.height, this.height, 1, true);
this.timerClip = new Sprite();
this.colorTween = new Tween(this.timerClip,'alpha',null,0,1,1,true);
this.colorTween.stop();
this.tweenArray = new Array(this.xTween, this.yTween, this.alphaTween, this.rotationTween, this.widthTween, this.heightTween,this.colorTween);
this.colorTrans = this.transform.colorTransform;
this._orbitDistance = this.width*2;
this.colorTween.addEventListener(TweenEvent.MOTION_CHANGE, updateColor);

}
public function resetPosition():void {
this.x = this.originalX;
this.y = this.originalY;
}
public function moveToPoint(x:Number, y:Number,duration:Number = 0, loop:Boolean = false):void {
this.xTween.finish = x;
this.xTween.duration = duration;
this.xTween.looping = loop;
this.yTween.finish = y;
this.yTween.duration = duration;
this.yTween.looping = loop;
this.xTween.start();
this.yTween.start();
}
public function fadeTo(val:Number =0, duration:Number = 0, loop:Boolean = false):void {
this.alphaTween.finish = val;
this.alphaTween.duration = duration;
this.alphaTween.looping=loop;
this.alphaTween.start();
}
public function sizeTo(w:Number, h:Number, duration:Number=0, loop:Boolean = false):void {
this.widthTween.finish=w;
this.widthTween.looping = loop;
this.widthTween.duration = duration;
this.heightTween.finish = h;
this.heightTween.looping = loop;
this.heightTween.duration = duration;
this.widthTween.start();
this.heightTween.start();

}
public function widthTo(width:Number, duration:Number, loop:Boolean = false):void {
this.widthTween.finish =width;
this.widthTween.looping = loop;
this.widthTween.duration = duration;
this.widthTween.start();
}
public function heightTo(height:Number, duration:Number, loop:Boolean = false):void {
this.heightTween.finish =height;
this.heightTween.looping = loop;
this.heightTween.duration = duration;
this.heightTween.start();
}
public function spinTo(rot:Number= 0, duration:Number = 0, loop:Boolean = false):void {
this.rotationTween.finish=rot;
this.rotationTween.duration = duration;
this.rotationTween.looping = loop;
this.rotationTween.start();
}
public function xTo(x:Number, duration:Number = 0, loop:Boolean = false):void {
this.xTween.finish = x;
this.xTween.duration = duration;
this.xTween.looping = loop;
this.xTween.start();
}
public function yTo(y:Number, duration:Number = 0, loop:Boolean = false):void {
this.yTween.finish = y;
this.yTween.duration = duration;
this.yTween.looping = loop;
this.yTween.start();
}
public function set easing(ease:Function):void {
for (var tw in this.tweenArray) {
tweenArray[tw].func = ease;
}
}
public function colorTo(toColor:Number, duration:Number):void {
this.lastColor = this.transform.colorTransform.color;
this.tweenToColor = toColor;
this.colorTween.duration = duration;
this.colorTween.start();
}
private function updateColor(event:TweenEvent):void {
this.colorTrans.color = Color.interpolateColor(this.lastColor, this.tweenToColor,event.position);
updateColorTransform();
}
public function set currentColor(clr:Number) {
this.lastColor = clr;
this.colorTrans.color= clr;
updateColorTransform();

}
public function startOrbit():void {
this.addEventListener(Event.ENTER_FRAME,orbit);
}
public function stopOrbit():void {
this.removeEventListener(Event.ENTER_FRAME,orbit);
this.orbitAngle = 0;
}
private function orbit(event:Event) {
this.y = this._orbitY + Math.sin(this.orbitAngle)*this._orbitDistance;
this.x = this._orbitX + Math.cos(this.orbitAngle)*this._orbitDistance;
this.orbitAngle += this._orbitVelocity;
}
public function startWatchingMouse():void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,watchMouse);
}
public function stopWatchingMouse():void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,watchMouse);
}
private function watchMouse(event:MouseEvent):void{
var dx:Number = stage.mouseX - this.x;
var dy:Number = stage.mouseY - this.y;
var rad:Number = Math.atan2(dy,dx);
this.rotation = rad*180/Math.PI + 90;
}
public function set yEasing(ease:Function) {
this.yTween.func = ease;
}
public function set xEasing(ease:Function) {
this.xTween.func = ease;
}
public function set heightEasing(ease:Function) {
this.heightTween.func = ease;
}
public function set widthEasing(ease:Function) {
this.widthTween.func = ease;
}
public function set alphaEasing(ease:Function) {
this.alphaTween.func = ease;
}
public function set rotationEasing(ease:Function) {
this.rotationTween.func = ease;
}
public function set orbitVelocity(velocity:Number) {
this._orbitVelocity = velocity;
}
public function set orbitY(y:Number) {
this._orbitY = y;
}
public function set orbitX(x:Number) {
this._orbitX = x;
}
public function set orbitDistance(distance:Number) {
this._orbitDistance = distance;
}
public function get currentColor():Number {
return this.lastColor;
}
private function updateColorTransform() {
this.transform.colorTransform = this.colorTrans;
}
}
}

2 Responses to “Hey Look, a Mouse.”

  1. Mike Says:

    Hmm how do you refer to this as a class with 2 eyes and just 1 class?

  2. Jeremy Wischusen Says:

    While there are two eyes (movieclip instances), they are both linked to the same class file. So two clips, once class. I am not sure that I ever committed his class to the code repository on google code, hence that is why I put the actual functions in the post.