Rafe Kemmis

Click on the yellow area below to see an even uglier version of myself do a facial contortion act!

How It Works

This little ditty uses two action script event handlers. The first handler, onCanvasClick, runs every time you click on the stage. It creates an instance of the head class, which is just a traced MovieClip of my head. Each head MovieClip gets its own event listener, which is where all the animation goodness comes in.

animateHead is the event handler where the animation occurs. This funtion executes when the movie enters a new frame. The height and width of the head get scaled by a random amount between -0.5 and 0.5. The drop shadow filter that is applied to the head also gets manipulated. Once the head goes beyond a certain point on the stage, it is removed from the movie.

The Action Script

stage.addEventListener(MouseEvent.CLICK, onCanvasClick);

function onCanvasClick(event:MouseEvent):void
{
        // define variables
        var headClip:Head = new Head();
        var dropShadowFilter:DropShadowFilter = new DropShadowFilter();
        
        // add head to mc
        addChild(headClip);
        
        // position head
        headClip.x = event.stageX - (headClip.width / 2);
        headClip.y = event.stageY - headClip.height + 4;
        
        // add filter to head
        dropShadowFilter.angle = 90;
        dropShadowFilter.blurX = 10;
        dropShadowFilter.blurY = 10;
        dropShadowFilter.distance = 50;
        dropShadowFilter.color = 0xCC3333;
        headClip.filters = [dropShadowFilter];
        
        // add animation eventlistener
        headClip.addEventListener(Event.ENTER_FRAME, animateHead);
        
}

function animateHead(event:Event):void
{
        var head:Head = Head(event.target);
        var dropShadowFilter:DropShadowFilter = DropShadowFilter(head.filters[0]);
        
        // change size of head
        head.scaleX += (Math.random() - 0.5);
        head.scaleY = head.scaleX;
        
        // move head up
        head.y -= 15;
        
        // change shadow
        dropShadowFilter.blurX += 15;
        dropShadowFilter.blurY += 15;
        dropShadowFilter.distance += 15;
        head.filters = [dropShadowFilter];
        
        // remove head if it goes off screen
        if(dropShadowFilter.distance - head.y > stage.stageHeight )
        {
                head.removeEventListener(Event.ENTER_FRAME, animateHead);
                removeChild(head);
        }
}

©2007 Rafe Kemmis