WordPress Flash Navigation

Consider this beta, and not heavily tested. Just wanted to get it out there while I’m still working on it.

For a recent project a client wanted more control over the display of their WordPress navigation. They wanted to be able to use any font. They also wanted a dynamic fold-able navigation that enables access to all categories without re-loading the page. This was a perfect project for me since I use WordPress all over the mofo place. For example, you can see the navigation in use over there to the right. Also, as I’ve stated previously, I’m a big fan of leveraging the many publishing outlets I already use. So, I buit the nav in Flash connecting to WordPress via XMLRPC using some classes from http://mattism.com/. This essentially allows me to use WordPress as a content management system for Flash. You could obviously see how this could be applied to entire sites, like I have with my homepage. I’ve thought about building this a WordPress plugin, and maybe down the road I will, but I doubt it as I’ll probably jump ship and start another project per usual. Besides, everyone knows you can’t make money writing WordPress plugins.

How It Works:
Flash calls _rpc.call(“wp.getCategories”) to xmlrpc.php which returns an array of categories. I use this array to create a bunch of MovieClip()s. These clips add TextFields as children, are sorted and have events applied to them that enable the interactions. Two fonts reside in the library. One for the top node and one for the child and grandchildren nodes.

Features [the current goods]:

  • Dynamic – Works dynamically with WordPress categories. You update your categories in WordPress, they show properly in Flash
  • Sorting – Dynamically sorts top nodes. Controlled by WordPress plugin my category order. For this to work I had to make a small addition to the WordPress xmlrpc.php, located in your WordPress root folder, to return the category term order. Added line 2776 – $struct['order'] = $cat->term_order;
  • Page recognition – Recognizes the page you’re on and dynamically opens navigation to the parent node of said page onload. I could have used XMLRPC tomake this call, I’m sure. However, I opted to pass in the page url via Flashvars and run a check to find a match. When a match is found the nav opens to it’s parent node.
  • Folding – Uses Grant Skinner GTween for interactions.
  • Multiple – Allows posts to live under multiple category nodes.

Wish List [the future goods]:

  • Multiline – Currently only supports single line category titles, so you’re limited in char length
  • Scrolling – Currently the length of your category list is limited to the length of the swf. I plan to add functions to enable scrolling of the list based on mouseY. This will free up the nav to be as long as you desire.
  • Post count – Do people really use this though? Probably not as its annoying.
  • Levels – Currently the nav only supports 3 levels. It would be nice to be infinite.
  • Build in the rest of WordPress feature support for tag cloud, recent comments etc.

Total devel time: 2 days, or about 12 hours.

I’d love to see where other people take the code and what people build with it.

Source Code:
wpNavMain.as

/**
* wpNavMain by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
package
{
        import flash.display.*;

        public class wpNavMain extends Sprite
        {

                /*
                ========================================================
                | Constructor
                ========================================================
                */

                public function wpNavMain ()
                {
                        stage.align = StageAlign.TOP_LEFT;

                        // add nav
                        var wp:Wp = new Wp()
                        addChild( wp )
                }
        }
}

Wp.as

/**
* Wp by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/

package
{
        import com.gskinner.motion.*
        import com.mattism.http.xmlrpc.*;
        import com.mattism.http.xmlrpc.util.*;
        import flash.filters.*;
        import flash.media.*;
        import flash.ui.*;
        import flash.display.*;
        import flash.events.*;
        import flash.net.*;
        import flash.utils.*;
        import flash.geom.*;
        import flash.text.*;
        import fl.transitions.*;
        import fl.transitions.easing.*;
        import flash.system.SecurityPanel;
        import flash.system.Security;

        public class Wp extends Sprite
        {

                /*
                ========================================================
                | Private Variables                         | Data Type
                ========================================================
                */
                private var _navArray:Array = new Array();
                private var _rpc:Connection;
                private var _topFont:Font = new topFont();
                private var _roadSign:Font = new roadSign();
                private var _topFmt:TextFormat = new TextFormat()
                private var _currUrl:String = ""
                private var _hideTimer:Timer

                private var _textYPad:int = 16
                private var _navSpeed:Number = .2
                /*
                ========================================================
                | Constructor
                ========================================================
                */

                public function Wp ()
                {
                        loadRpc()
                }

                private function checkPage()
                {
                        // load in title
                        var paramList:Object = this.root.loaderInfo.parameters;

                        // set var to hold text
                        var _currUrl:String = paramList["url"]

                        //_currUrl = "http://www.christeso.com/index.php/category/portfolio/truth/truth-found/"

                        // scan through array and open nav to that one
                        for( var i=0;i MovieClip(mc.parent).origY )
                                        {
                                                yLeap = _navArray[i].mc.origY + ( _totOpen*_textYPad )
                                                new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
                                        }
                                        else
                                        {
                                                yLeap = _navArray[i].mc.origY
                                                new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
                                        }
                                }

                                // push down child nodes as long as they are below the node you're on and are a child of the node you're on
                                if( _navArray[i].childMc != null )
                                {
                                        if( _navArray[i].childMc.parent == mc.parent )
                                        {
                                                if( _navArray[i].childMc.origY > mc.origY )
                                                {
                                                        yLeap = _navArray[i].childMc.origY + ( _totOpen*_textYPad )
                                                        new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
                                                }
                                                else
                                                {
                                                        yLeap = _navArray[i].childMc.origY
                                                        new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
                                                }
                                        }
                                }

                                // make grandchildren visible
                                if( _navArray[i].grandChildMc != null )
                                {
                                        if( _navArray[i].grandChildMc.parent == mc )
                                        {
                                                _navArray[i].grandChildMc.visible = true
                                                new GTween( _navArray[i].grandChildMc, _navSpeed, {alpha:1} )
                                        }
                                        else
                                        {
                                                new GTween( _navArray[i].grandChildMc, _navSpeed/2, {alpha:0, autoHide:true} )
                                        }
                                }
                        }
                }

                private function hideGrandChildren( e:Event )
                {
                        // amount to go down
                        var yLeap:Number;                        

                        // ok we can prob do this in one big loop
                        for( var i=0;i

Download CS4 AS3 FLA and Classes

Enjoy.

Music Visualization Engine and Generative Drawing

http://vimeo.com/moogaloop.swf?clip_id=3191128&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1
The Neural Orb from chris teso on Vimeo.

130 seconds of a music visualization engine and generative drawing built in AS3 using particles and physics engine.

See it in it’s 4:02 entirety HERE.

512 particles are released with instructions to randomly disperse throughout the scene. Variants include friction and wander. Particle location is constantly tracked and more particles are drawn at that location. These particles are sized and alpha’d according to stage location creating a “corridor”.

Music visualization occurs by looping through SoundMixer.computeSpectrum and creating a ByteArray. Each of the 512 particles are controlled the ByteArray which conveniently contains 512 bytes of data. Each byte contains a floating-point value. This value determines the individual particles scale and glow.

I hope to make this more interesting if/when I get some free time.

Music: All Mine | Portishead

Motion Detection and Typography

http://vimeo.com/moogaloop.swf?clip_id=2829875&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1
Webcam Swarm – Motion Detection from chris teso on Vimeo.

Reactive installation concept idea for future interactive installation using motion detection.

Concept: Using Particles to conform to typography.

Picture this large. Now take that image and double it. That’s how I envision it. Giant.

Try it for yourself : Reactive Motion Detection and Typography [webcam es necessitous]

Permalink: http://www.christeso.com/index.php/lab/motion-detection-and-typography/

BIT-101 Particle class in AS3

/*Public Properties:


vx:Number – the velocity on the x axis. default is 0
vy:Number – the velocity on the y axis. default is 0
damp:Number – a pseudo-friction value. 1.0 is no friction. Usual values are between 0.9 and 1.0. default is 0.9
bounce:Number – how much the particle will bounce from a wall. -1.0 will bounce with same force it hit with.

default is -0.5

grav:Number – how much velocity is added to vy each frame. Usual values are 0.0 to 2.0. default is 0
maxSpeed:Number – maximum allowed speed in any direction for a particle.

default is Number.MAX_VALUE (essentially infinity or no limit)

wander:Number – gives particle a random motion. numbers between 0 and 5 works well. default is 0
draggable:Boolean – if true, drag and throw is possible on the particle
edgeBehavior:String – determines behavior when particle hits an edge of the world.

Can be set to "wrap", "bounce", or "remove"
        wrap causes the particle to disappear and appear on the opposite edge of the space
        bounce causes the particle to bounce off the edge at a speed determined by the bounce property
        remove causes the particle to be permanently deleted if it leaves the space.

turnToPath:Boolean – if true, particle will turn towards the direction it is moving in.

Public Methods:


setBounds(bounds:Object)

- sets the "walls" of the universe in which the particle will be able to travel
- arguments:
    bounds. an object containing properties: xMin, xMax, yMin, yMax.
            you can directly use the object returned from the method getBounds().
            default values are the Stage dimensions.

gravToMouse(bGrav:Boolean [, force:Number])

- causes the particle to gravitate towards the mouse. it is advised that us use maxSpeed along with this,
  as this method can create near infinite particle speeds.
- arguments:
    bGrav. if true, particle will gravitate towards mouse. if false, it won't. default is false.
    force. the gravitational force applied to the particle.
           generally high numbers of 1000 or more are used. default is 1000

springToMouse(bSpring:Boolean [, force:Number])

- causes the particle to spring to the mouse
- arguments:
    bSpring. if true, particle will spring to the mouse. if false, it won't. default is false.
    force. the strength of the spring. generally numbers less than 1 are used. default is 0.1

repelMouse(bRepel:Boolean [, force:Number, minDist:Number])

- causes the particle to spring away from the mouse
- arguments:
    bRepels. if true, particle will spring away from the mouse. if false it won't.
    force. the strength of the spring action. generally numbers less than 1 are used. default is 0.1
    minDist. the distance in pixels from the mouse that the particle will attempt maintain.
             default is 100
- returns:
    the index number of the point added (can be used to remove the point)

addSpringPoint(x:Number, y:Number [, force:Number])

- adds a stationary point to which the particle will spring. any number of points can be added,
  but the result will be that the particle will spring to an point which is the average of all points.
- arguments:
    x, y. the point to which the particle will spring.
    force. the strength of the spring. default is 0.1
- returns:
    the index number of the point added (can be used to remove the point)

addGravPoint(x:Number, y:Number [, force:Number])

- adds a stationary point to which the particle will try to gravitate. any number of points can be added.
- arguments:
    x, y. the point to which the particle will gravitate.
    force. the gravitational force of the point. default is 1000
- returns:
    the index number of the point added (can be used to remove the point)

addRepelPoint(x:Number, y:Number [, force:Number, minDist:Number])

- adds a stationary point which the particle will try to spring away from.
  any number of points can be added.
- arguments:
    x, y. the point the particle will try to avoid.
    force. the force of the spring. default is 0.1
    minDist. the distance in pixels from the point that the particle will try to maintain. default is 100
- returns:
    the index number of the point added (can be used to remove the point)

addSpringClip(clip:MovieClip [, force:Number])

- designates a movie clip to which the particle will spring towards. any number of clips can be added.
- arguments:
    clip. a movie clip towards which the particle will spring.
    force. the strength of the spring. default is 0.1
- returns:
    the index number of the clip added (can be used to remove the clip from the list)

addGravClip(clip:MovieClip [, force:Number])

- designates a movie clip to which the particle will gravitate. any number of clips can be added.
- arguments:
    clip. a movie clip towards which the particle will spring.
    force. the strength of the gravitation. default is 1000
- returns:
    the index number of the clip added (can be used to remove the clip from the list)

addRepelClip(clip:MovieClip [, force:Number, minDist:Number])

- designates a movie clip which the particle will spring away from. any number of clips can be added.
- arguments:
    clip. a movie clip which the particle will spring away from.
    force. the strength of the spring. default is 0.1
    minDist. the distance in pixels from the point that the particle will try to maintain. default is 100
- returns:
    the index number of the clip added (can be used to remove the clip from the list)

removeSpringPoints(index:Number)

- removes a previously specified spring point
- arguments:
    index. the number of the point to remove

removeGravPoints(index:Number)

- removes a previously specified gravity point
- arguments:
    index. the number of the point to remove

removeRepelPoints(index:Number)

- removes a previously specified repel point
- arguments:
    index. the number of the point to remove

clearSpringPoints()

- removes all spring points

clearGravPoints()

- removes all grav points

clearRepelPoints()

- removes all repel points

clearSpringClips()

- removes all spring points

clearGravClips()

- removes all grav points

clearRepelClips()

- removes all repel points*/

package
{

import flash.display.MovieClip;
import flash.events.*;

/**
 *      Original AS2 Class by Keith Peters (BIT-101)
 *      Conversion to AS3 by Chris Teso
 */
public class Particle extends MovieClip {

    private var __vx:Number                 = 0;
    private var __vy:Number                 = 0;
    private var __k:Number                  = .2;
    private var __damp:Number               = .9;
    private var __bounce:Number             = -.5;
    private var __grav:Number               = 0;
    private var __bounds:Object;
    private var __draggable:Boolean         = false;
    private var __edgeBehavior:String       = "bounce";
    private var __drag:Boolean;
    private var __oldx:Number;
    private var __oldy:Number;
    private var __maxSpeed:Number;
    private var __wander:Number             = 0;
    private var __turn:Boolean              = false;
    private var __springToMouse:Boolean     = false;
    private var __mouseK:Number             = .2;
    private var __gravToMouse:Boolean       = false;
    private var __gravMouseForce:Number     = 5000;
    private var __repelMouse:Boolean        = false;
    private var __repelMouseMinDist:Number  = 100;
    private var __repelMouseK:Number        = .2;
    private var __springPoints:Array;
    private var __gravPoints:Array;
    private var __repelPoints:Array;
    private var __springClips:Array;
    private var __gravClips:Array;
    private var __repelClips:Array;
    private var __efClip:MovieClip;

    //
    public function Particle()
    {
        trace( "particle initialized" )
        addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
        init();
    }

    private function onAddedToStage( event:Event ):void
    {
        removeEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
        //can access the stage now.
        //trace( "added to stage" );
    } 

    private function init():void
    {
        __bounds = new Object();
        setBounds( 0, Main.stage.stageWidth, 0, Main.stage.stageHeight );
        __maxSpeed = Number.MAX_VALUE;
        __springPoints = new Array();
        __gravPoints = new Array();
        __repelPoints = new Array();
        __springClips = new Array();
        __gravClips = new Array();
        __repelClips = new Array();

        __efClip = new MovieClip();
        __efClip.addEventListener( Event.ENTER_FRAME, __efHandler );

    }
    public function set vx(nVx:Number):void
    {
        __vx = nVx;
    }

    public function get vx():Number
    {
        return __vx;
    }

    public function set vy(nVy:Number):void
    {
        __vy = nVy;
    }

    public function get vy():Number
    {
        return __vy;
    }

    public function set damp(nDamp:Number):void
    {
        __damp = nDamp;
    }

    public function get damp():Number
    {
        return __damp;
    }

    public function set bounce(nBounce:Number):void
    {
        __bounce = nBounce;
    }

    public function get bounce():Number
    {
        return __bounce;
    }

    public function set grav(nGrav:Number):void
    {
        __grav = nGrav;
    }

    public function get grav():Number
    {
        return __grav;
    }

    public function set maxSpeed( nMaxSpeed:Number )
    {
        __maxSpeed = nMaxSpeed;
    }

    public function get maxSpeed():Number
    {
        return __maxSpeed;
    }

    public function set wander( nWander:Number ):void
    {
        __wander = nWander;
    }

    public function get wander():Number
    {
        return __wander;
    }

    public function set edgeBehavior(sEdgeBehavior:String):void
    {
        __edgeBehavior = sEdgeBehavior;
    }

    public function get edgeBehavior():String
    {
        return __edgeBehavior;
    }

    public function setBounds( left, right, top, bot)
    {
        __bounds.top = top;
        __bounds.bottom = bot;
        __bounds.left = left;
        __bounds.right = right;
    }

    public function set draggable( bDrag:Boolean ):void
    {
        __draggable = true;
        if ( bDrag )
        {
            this.addEventListener( MouseEvent.CLICK, pressHandler );
            this.addEventListener( MouseEvent.MOUSE_UP, releaseHandler );
            stage.addEventListener( MouseEvent.MOUSE_UP, outsideHandler) ; // releaseOutside handler hack

        } else
        {
            this.removeEventListener( MouseEvent.CLICK, pressHandler );
            this.removeEventListener( MouseEvent.MOUSE_UP, releaseHandler );
            stage.removeEventListener( MouseEvent.MOUSE_UP, outsideHandler );
            __drag = false;
        }
    }

    private function pressHandler( e:MouseEvent ):void
    {
        this.startDrag();
        __drag = true;
    }

    private function releaseHandler( e:MouseEvent ):void
    {
        this.stopDrag();
        __drag = false;
    }

    private function outsideHandler( e:MouseEvent ):void
    {
        this.stopDrag();
        __drag = false;
    }

    public function get draggable():Boolean
    {
        return __draggable;
    }

    public function set turnToPath(bTurn:Boolean):void
    {
        __turn = bTurn;
    }

    public function get turnToPath():Boolean
    {
        return __turn;
    }

    private function __efHandler( e:Event ):void
    {
        __move();
    }

    private function __move():void
    {
        var dx;
        var dy;
        var distSQ;
        var dist;
        var force;
        var tx;
        var ty;
        var point;
        var clip;
        var k;
        var minDist;

        if ( __drag )
        {
            __vx = this.x - __oldx;
            __vy = this.y - __oldy;
            __oldx = this.x;
            __oldy = this.y;

        } else
        {
            if ( __springToMouse )
            {
                __vx += ( this.parent.mouseX - this.x ) * __mouseK;
                __vy += ( this.parent.mouseY - this.y ) * __mouseK;
            }

            if ( __gravToMouse )
            {
                trace( "this.x = "+this.x )
                trace( "this.parent.mouseX ="+this.parent.mouseX )
                dx = this.parent.mouseX - this.x;
                dy = this.parent.mouseY - this.y;

                distSQ = dx * dx + dy * dy;
                dist = Math.sqrt( distSQ );
                force = __gravMouseForce / distSQ;
                __vx += force * dx / dist;
                __vy += force * dy / dist;
            }

            if ( __repelMouse )
            {
                dx = this.parent.mouseX - this.x;
                dy = this.parent.mouseY - this.y;

                dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < __repelMouseMinDist)
                {
                    tx = this.parent.mouseX - __repelMouseMinDist * dx / dist;
                    ty = this.parent.mouseY - __repelMouseMinDist * dy / dist;
                    __vx += (tx - this.x) * __repelMouseK;
                    __vy += (ty - this.y) * __repelMouseK;
                }
            }

            for ( var sp:uint=0; sp < __springPoints.length; sp++ )
            {
                point = __springPoints[sp];
                __vx += (point.x - this.x) * point.k;
                __vy += (point.y - this.y) * point.k;
            }

            for ( var gp:uint = 0; gp < __gravPoints.length; gp++ )
            {
                point = __gravPoints[gp];

                dx = point.x - this.x;
                dy = point.y - this.y;

                distSQ = dx * dx + dy * dy;
                dist = Math.sqrt( distSQ );
                force = point.force / distSQ;
                __vx += force * dx / dist;
                __vy += force * dy / dist;
            }

            for ( var rp:uint = 0; rp < __repelPoints.length; rp++ )
            {
                point = __repelPoints[rp];
                dx = point.x - this.x;
                dy = point.y - this.y;

                dist = Math.sqrt( dx * dx + dy * dy );
                if (dist < point.minDist)
                {
                    tx = point.x - point.minDist * dx / dist;
                    ty = point.y - point.minDist * dy / dist;

                    __vx += (tx - this.x) * point.k;
                    __vy += (ty - this.y) * point.k;

                }
            }

            for ( var sc:uint = 0; sc < __springClips.length; sc++ )
            {
                clip = __springClips[sc].clip;
                k = __springClips[sc].k;
                __vx += (clip.x - this.x) * k;
                __vy += (clip.y - this.y) * k;

            }

            for ( var gc:uint = 0; gc < __gravClips.length; gc++ )
            {
                clip = __gravClips[gc].clip;
                dx = clip.x - this.x;
                dy = clip.y - this.y;

                distSQ = dx * dx + dy * dy;
                dist = Math.sqrt( distSQ );
                force = __gravClips[gc].force / distSQ;
                __vx += force * dx / dist;
                __vy += force * dy / dist;
            }

            for ( var rc:uint= 0; rc < __repelClips.length; rc++ )
            {
                clip = __repelClips[rc].clip;
                minDist = __repelClips[rc].minDist;
                k = __repelClips[rc].k;
                dx = clip.x - this.x;
                dy = clip.y - this.y;

                dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < minDist)
                {
                    tx = clip.x - minDist * dx / dist;
                    ty = clip.y - minDist * dy / dist;
                    __vx += (tx - this.x) * k;
                    __vy += (ty - this.y) * k;

                }
            }
            __vx += Math.random() * __wander - __wander / 2;
            __vy += Math.random() * __wander - __wander / 2;
            __vy += __grav;
            __vx *= damp;
            __vy *= damp;

            var speed = Math.sqrt(__vx * __vx + __vy * __vy);
            if (speed > __maxSpeed) {
                __vx = __maxSpeed * __vx / speed;
                __vy = __maxSpeed * __vy / speed;
            }
            if (__turn)
            {
                this.rotation = Math.atan2(__vy, __vx) * 180 / Math.PI;
            }

            this.x += __vx;
            this.y += __vy;

            if(__edgeBehavior == "wrap")
            {
                if ( this.x > __bounds.right + this.width/2 )
                {
                    this.x = __bounds.left - this.width/2;
                } else if ( this.x < __bounds.left - this.width/2)
                {
                    this.x = __bounds.right + this.width/2;
                }
                if( this.y > __bounds.bottom + this.height/2)
                {
                    this.y = __bounds.top - this.height/2;
                } else if (this.y < __bounds.top - this.height/2)
                {
                    this.y = __bounds.bottom + this.height/2;
                }

            } else if(__edgeBehavior == "bounce")
            {
                if ( this.x > __bounds.right - this.width/2)
                {
                    this.x = __bounds.right - this.width/2;
                    __vx *= __bounce;
                } else if (this.x < __bounds.left + this.width/2){
                    this.x = __bounds.left + this.width/2;
                    __vx *= __bounce
                }
                if( this.y > __bounds.bottom - this.height/2){
                    this.y = __bounds.bottom - this.height/2;
                    __vy *= __bounce
                } else if ( this.y < __bounds.top + this.height/2){
                    this.y = __bounds.top + this.height/2;
                    __vy *= __bounce;
                }

            } else if(__edgeBehavior == "remove")
            {
                if( this.x > __bounds.right + this.width/2 || this.x < __bounds.left - this.width/2 ||
                   this.y > __bounds.bottom + this.height/2 || this.y < __bounds.top - this.height/2){
                    removeChild( this );
                }
            }
            if( stage != null )
                stage.invalidate();
        }
    };

    public function gravToMouse( bGrav:Boolean, force:Number ):void
    {
        if (bGrav) {
            if (!force) {
                var force = 1000;
            }
            __gravMouseForce = force;
            __gravToMouse = true;
        }
        else {
            __gravToMouse = false;
        }
    }

    public function springToMouse( bSpring:Boolean, force:Number ):void
    {
        if (bSpring)
        {
            if (!force) {
                var force = .1;
            }
            __mouseK = force;
            __springToMouse = true;

        } else
        {
            __springToMouse = false;
        }
    }

    public function repelMouse( bRepel:Boolean, force:Number, minDist:Number ):void
    {
        if (bRepel)
        {
            if (!force)
            {
                var force = .1;
            }
            if (!minDist)
            {
                var minDist = 100;
            }
            __repelMouseK = force;
            __repelMouseMinDist = minDist;
            __repelMouse = true;

        } else
        {
            __repelMouse = false;
        }
    }

    public function addSpringPoint(x:Number, y:Number, force:Number):Number
    {
        if (!force)
        {
            var force = .1;
        }
        __springPoints.push( {x:x, y:y, k:force} );
        return __springPoints.length - 1;
    }

    public function addGravPoint(x:Number, y:Number, force:Number):Number
    {
        if (!force)
        {
            var force = 1000;
        }
        __gravPoints.push( {x:x, y:y, force:force} );
        return __gravPoints.length - 1;
    }

    public function addRepelPoint( x:Number, y:Number, force:Number, minDist:Number ):Number
    {
        if (!force) {
            var force = .1;
        }
        if (!minDist) {
            var minDist = 100;
        }
        __repelPoints.push({x:x, y:y, k:force, minDist:minDist});
        return __repelPoints.length - 1;
    }

    public function addSpringClip(clip:MovieClip, force:Number):Number
    {
        if (!force)
        {
            var force = .1;
        }
        __springClips.push( {clip:clip, k:force} );
        return __springClips.length - 1;
    }

    public function addGravClip(clip:MovieClip, force:Number):Number
    {
        if (!force)
        {
            var force = 1000;
        }
        __gravClips.push({clip:clip, force:force});
        return __gravClips.length - 1;
    }

    public function addRepelClip( clip:MovieClip, force:Number, minDist:Number ):Number
    {
        if ( !force )
        {
            var force = .1;
        }
        if ( !minDist )
        {
            var minDist = 100;
        }
        __repelClips.push( {clip:clip, k:force, minDist:minDist} );
        return __repelClips.length - 1;
    }

    public function removeSpringPoint( index:Number ):void
    {
        __springPoints.splice(index, 1);
    }

    public function removeGravPoint( index:Number ):void
    {
        __gravPoints.splice(index, 1);
    }

    public function removeRepelPoint( index:Number ):void {
        __repelPoints.splice(index, 1);
    }

    public function removeSpringClip(index:Number):void
    {
        __springClips.splice(index, 1);
    }

    public function removeGravClip(index:Number):void
    {
        __gravClips.splice(index, 1);
    }

    public function removeRepelClip(index:Number):void
    {
        __repelClips.splice(index, 1);
    }

    public function clearSpringPoints():void
    {
        __springPoints = new Array();
    }

    public function clearGravPoints():void
    {
        __gravPoints = new Array();
    }

    public function clearRepelPoints():void
    {
        __repelPoints = new Array();
    }

    public function clearSpringClips():void
    {
        __springClips = new Array();
    }

    public function clearGravClips():void
    {
        __gravClips = new Array();
    }

    public function clearRepelClips():void
    {
        __repelClips = new Array();
    }
}

}

AS3 Polar Coordinates and Radians

/flash/radians.swf

Many times I’ve set up interfaces where I need to place different objects equidistant around a central object. The solution to this problem is to first calculate the angle of each object by converting Radians to Degrees. This can be expressed by the following formula

Media_httpuploadwikim_idwbg

So, you simply need to loop through your collection of objects and assign each a different angle. After that you plug that angle into a new Polar Point.

for(var i=0;i

Here’s the complete source: radians.zip

package
{
        import flash.ui.*;
        import flash.display.*;
        import flash.events.*;
        import flash.geom.*;

        public class Main extends Sprite
        {

                /*
                ========================================================
                | Private Variables                         | Data Type
                ========================================================
                */

                private var array:Array = new Array()
                private var circumference:int;

                /*
                ========================================================
                | Constructor
                ========================================================
                */

                public function Main ()
                {
                        stage.align = StageAlign.TOP_LEFT;

                        // make some balls
                        addParticle( 100 )

                        menu.txtParticles.text = 'Particles: 100';

                        stage.addEventListener( Event.ENTER_FRAME, runParticle )

                        menu.slideCircumference.addEventListener( Event.CHANGE, changeCircumference );
                        menu.particles.addEventListener( Event.CHANGE, changeParticles );

                }

                private function addParticle( num )
                {
                        stage.removeEventListener( Event.ENTER_FRAME, runParticle )

                        var tot:Number = array.length

                        // kill mc's
                        for( var t=0;t

Permalink: http://www.christeso.com/index.php/lab/as3-polar-coordinates-and-radians

Interactive Installation Testing Tribulations and Nerdery

Media_httpfarm4static_aiqlb

photo by .:9:.
With just a couple days until the launch of the interactive installation in Downtown Portland I’ve been going mad tweaking code and functionality to run motion detection in rain, darkness and direct sunlight, with multiple object motion distractions such as pedestrians, bikers, segways and automobile headlights stopped at the traffic light precariously located directly in front of the installation camera. Simultaneously we’ve been crazy busy setting up the environment. Designing and developing the application for motion detection has kept me busy enough and has been an awesome learning experience using Flash as an interactive installation platform.

Media_httpfarm4static_gmevh

What I’ve underestimated are the challenges and learning curve associated with the industrial design end of the project. The challenges the environment has placed on us have been many. I’ve mentioned the lighting situation and the application challenges of varying weather, lighting and motion objects. There have also been other challenges such as getting the lens and projector right to cover the entire store front window from an elevation, keystoning [ keystonery? keystoningness? ] focal and clarity perspective. Properly aligning the webcam for best motion detection and display results within the application. [ viewers will be video overlayed in the application ].

Media_httpfarm4static_vkfxg

Sewing together multiple tarps and hanging them one story above the installation to block out extraneous light that would dull the projection. Major issues with using an AT&T 3G card for connectivity in the absence of any wifi. [ the application takes a snapshot and posts the image to a private flickr account every 10 minutes so I can ensure the app. is up and running ]. Dealing with not being able to use an internal monitor while running the app with the projector. Adhering the specialized light sensitive acrylic pieces properly into each of the six window frames. The list goes on and is still mounting.

All this said, testing is moving along nicely. As you can see from the images below there have been people using the app. in its beta stage already. The feedback has been amazing. Standing on the street corner and watching people interact with the snowflakes and move around the area waving their hands and legs has been great. It’s been especially cool pretending to be an innocent onlooker to overhear the conversations and guessing of how the entire thing may be working. I saw more than a few people physically touching the glass guessing that they could effect the display ala touch screen. Several people danced in front of it. A few people looked semi frightened by the whole scenario. The best quote of the night came from a man who was simply amazed by the display. After carrying on about how cool it was he wrapped up the rant by exclaiming “this is downright amazing… but pfft… they’ve probably had this in Tokyo for the last 10 years”.

Media_httpfarm4static_tpeii

More testing tomorrow… and posting to ensue.

Watch the news report on the installation
Steve’s coverage of the install

Permalink: http://www.christeso.com/index.php/lab/interactive-installation-testing-tribu…

AS3 Drop Down Menu Class

I briefly Googled for a drop down class to no avail. I say briefly as I only went one page deep. I’m sure there are others out there, but I instead got impatient as usual and just wrote my own. I thought I’d share it for other impatient people’s benefit. Without further ado here’s the AS3 Drop Down Class code. It’s a work in progress and most likely will be updated when I give it any more thought.

You can see the drop down in use on my homepage.

Edit [ 12.16.08 ] : added directional code.

//usage
// array for drop
var dropOtherArray:Array = new Array()
dropOtherArray.push( {title:"iWork", name:"folio"} )
dropOtherArray.push( {title:"iExperiment", name:"lab"} )
dropOtherArray.push( {title:"iWrite", name:"blog"} )
dropOtherArray.push( {title:"iPhotograph", name:"photo"} )
dropOtherArray.push( {title:"iFlickr", name:"flickr"} )
dropOtherArray.push( {title:"iRecord", name:"vimeo"} )
dropOtherArray.push( {title:"contactMe", name:"contact"} )

fmat.color = 0xffffff
fmat.font = font.fontName
fmat.size = 11

addChild( _dropOther = new DropDown( 180, 25, "iLiveElsewhere:", fmat, 0x000033, dropOtherArray, "down", other ) )

package com.teso.ui
{
        import com.gskinner.motion.*
        import flash.display.*;
        import flash.events.*;
        import flash.net.*;
        import flash.utils.*;
        import flash.text.*;
        import fl.transitions.*;
        import fl.transitions.easing.*;

        public class DropDown extends Sprite
        {
                private var _items:Array = new Array()
                private var _overC:uint;
                private var _backC:uint;
                private var _w:Number;
                private var _h:Number;
                private var _timer:Timer;
                private var _open:Boolean = false;
                private var _defaultText:TextField;
                private var _title:String;
                private var _direction:String;
                private var _fmt:TextFormat;

                public function DropDown( w:Number, h:Number, title:String, fmt:TextFormat, colorBack:uint, itemArray:Array, direction:String, callback )
                {
                        // timer
                        _timer = new Timer( 300 );
                        _timer.addEventListener( TimerEvent.TIMER, closeDrop )

                        // vars
                        _w = w
                        _h = h
                        _backC = colorBack
                        _items = itemArray
                        _title = title
                        _direction = direction
                        _fmt = fmt

                        // create a back for the holder
                        var holder:MovieClip = new MovieClip();
                        holder.name = "holder"
                        holder.graphics.beginFill( _backC, 1 );
                        holder.graphics.drawRoundRect( 0, 0, _w, _h, 2, 2 )
                        holder.graphics.endFill()

                        // add the drop
                        addChild( holder )

                        // set listeners
                        holder.buttonMode = true;
                        holder.addEventListener( MouseEvent.MOUSE_OVER, openDrop )
                        holder.addEventListener( MouseEvent.MOUSE_OVER, cancelClose )
                        holder.addEventListener( MouseEvent.MOUSE_OUT, startClose )

                        // create a text field
                        var t:TextField = new TextField()
                        t.name = "holderText"
                        t.selectable = false;
                        t.autoSize = TextFieldAutoSize.LEFT;
                        t.htmlText = title
                        t.setTextFormat( fmt )
                        t.y = ( holder.height/2 ) - ( t.height/2 )

                        _defaultText = t

                        // add the text
                        holder.addChild( t )

                        // create children
                        for( var i=0; iPermalink:

http://www.christeso.com/index.php/lab/as3-drop-down-menu-classas3-drop-down-menu-class/

Tracking Multiple Objects Using a Webcam

http://vimeo.com/moogaloop.swf?clip_id=2337699&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1
Tracking Multiple Objects Using a Webcam from chris teso on Vimeo.

In continuing exploration into motion tracking using flash and a webcam I’ve created an application that enables you to track multiple objects based on color. The holy grail of the application is of course to track multiple objects without specifying color. However, this is a good step forward and actually opens up many other avenues for use. Color, after all, is ubiquitous.

The truly useful part of the code is getColorBoundsRect. If you’re unfamiliar with this function, it determines a rectangular region that either fully encloses all the pixels of a specified color within a BitmapData object, or fully encloses all pixels that do not include the color. The function returns a rectangle around the color area. You can then reference this rectangles x and y respectively.

var areaColor:Rectangle = SomeBitmapData.getColorBoundsRect( 0xFFFFFFFF, _colorArray[i].color, true );

The function is rather finicky about the depth of where the object is. Since it’s only searching for a certain RGB value it tends to lose it if the lighting or the object gets too small in the camera’s depth of field. To overcome this you could search for similar colors. Soulwire has written a sweet Color utility class that can aid you in this endeavor. However, searching for a range of colors will also come with it’s challenges, as the more range of color you search on the tougher it will be to pinpoint the exact object you want to track.

Check out the demo here: Tracking Multiple Objects Using a Webcam [webcam obv required]

Music: My Morning Jacket – I’m Amazed

Permalink: http://www.christeso.com/index.php/lab/tracking-multiple-objects-using-a-webcam/

AS3 Sound Visualization Engine

Media_httpfarm4static_wwwak

, originally uploaded by NymphoBrainiac.

Remember when I used to take photographs and post them on flickr?

Well, I guess I’ve been distracted making things, rather than just recording them.

This is one of those things. A sound visualization engine built in Actionscript. It works by analyzing the raw data of an mp3 file, taking a snapshot of its sound wave every 31 milliseconds and placing it into a ByteArray. The ByteArray is fixed to 512 floating-point values, where the first 256 values represent the left channel, and the second 256 values represent the right channel of audio. I then loop through all 512 channels and assign animations based on each (again every 31 milliseconds). The animation effects are assigned randomly applying blurring, scaling, motion and sizing based on the sound wave values. For added effect I added a photo of cannon beach I took and masked it with the sound wave. After all the song is about a beach.

Check it out here: AS3 Sound Visualization Engine.

Music: Beachcomber Blues – Dolorean

Permalink: http://www.christeso.com/index.php/lab/as3-sound-visualization-engine/as3-sou…

AS3 Motion Detection Drawing Installation

http://vimeo.com/moogaloop.swf?clip_id=2339145&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1
AS3 Webcam Drawing from chris teso on Vimeo.

You have to admire a job that allows you to make a bumble-bee/owl (a bumblowl?) fly around a mural merely by waving your finger… all while drinking beer.

This is an elaboration on my actionscript webcam motion detection experiments, built as an installation for the Inverge party hosted by North. The idea was to take motion detection and combine it with art in the form of digital drawing and 2d space in the form of a wall mural. The concept is to allow human interaction to affect physical space, freeing oneself from all traditional user interface. The application works by constantly monitoring a webcam, taking snapshots of each frame every millisecond. The pixels in the current frame are compared to pixels in the previous. The difference in brightness within each section determines whether or not motion had occurred in this area of the screen. If motion is detected the coordinates of a rectangular grid around said motion is recorded and the owl is ordered to go to that point. The line drawings begin and follow the owl recording a ‘flight path’. A mask is drawn to prevent the owl and its drawing trail from going in front of some of the trees giving the mural a sense of dimension.

Thanks to the great Eric Natzke for the drawing inspiration and open source, and NORTH for being forward thinking enough to encourage digital experimentation.

Permalink: http://www.christeso.com/index.php/lab/as3-motion-detection-drawing-installat…