Category Archives: Flash

Animate any Quadratic BezierLine with me

Wow, it’s been a while. Regardless, let’s get right into it shall we?

So, my code sucks, so feel free to let me know what I could do better, but made this simple class for a project I’m working on now. Hit me up on twitter (@trippedout) if you have any questions.

Fairly simple – pass it two anchor points and two control points, optional threshold and linestyle objects (feel free to change). Threshold controls the amount of times a line is broken down into smaller segs if you’re animating your line quickly and it isn’t smooth enough (smaller is smoother).

Use your favorite tweening engine to tween the ‘time’ attribute and shazam – animated quad beziers!

[cc lang=”php” width=”545″]
var bezLine:BezierLine = new BezierLine( anchor1, control1, control2, anchor2 );
addChild( bezLine ) bezLine, .35, { time:1, ease:Cubic.easeOut } );

[cc lang=”php” width=”545″]
package utils
import flash.display.Shape;
import flash.geom.Point;

public class BezierLine extends Shape
private var _time :Number = 0;
private var _prevTime :Number = 0;
private var _threshold :Number;
private var _frozen :Boolean = true;

private var anchor1 :Point;
private var anchor2 :Point;
private var control1 :Point;
private var control2 :Point;

private var _lineStyle :Object = { thickness:2, color:0xffffff, alpha:.35 };

public function BezierLine( $anchor1:Point, $control1:Point, $control2:Point, $anchor2:Point, $threshold:Number = .025, $lineStyle:Object = null )
anchor1 = $anchor1;
anchor2 = $anchor2;
control1 = $control1;
control2 = $control2;

_threshold = $threshold;

if( $lineStyle ) $lineStyle.thickness, $lineStyle.color, $lineStyle.alpha );
else _lineStyle.thickness, _lineStyle.color, _lineStyle.alpha ); anchor1.x, anchor1.y );

private function updateLine():void
if( _frozen ) return;

var len:int = 1, i:int, dif:Number,
posx:Number, posy:Number, u:Number;

if( _time < 1 ) { dif = _time - _prevTime; //check to see if the difference between last frame and this is under //the threshold, if it is, change the length of the for loop for //how many segments the current line will be broken in to if( dif > _threshold ) len = Math.ceil( dif / _threshold );

for( i = 0; i < len; ++i ) { //if on last loop (or first of len=1) set to time, else //increment thru the time by the threshold amount, making smoother lines if( i == len - 1 ) u = _time; else u = _prevTime + ( i * _threshold ); //draw lines based on posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x) +3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x) +3*u*(control1.x-anchor1.x)+anchor1.x; posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y) +3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y) +3*u*(control1.y-anchor1.y)+anchor1.y;,posy); } } else,anchor2.y); _prevTime = _time; } public function clear():void { _frozen = true;; } public function get time():Number { return _time; } /** * Tween this value from 0-1 to animate the line in and out. */ public function set time(value:Number):void { _time = value; _frozen = false; updateLine(); } } } [/cc] Be sure to leave a comment if you have any questions/ideas/tell me i suck!

the HYPE Framework

What more can be said about Joshua Davis. The guy is a genius.

So when I found out the Hype Framework came from the combined effort of him and Branden Hall, another genius technologist, I had to give it a shot.

The premise is simple, give simple access to seemingly hard concepts for designers and programmers alike and see what they can come up with. Classes such as VariableVibration and SimpleRhythm that make random motion and timing of events super simple.

The first time I got to see it at work was actually during Flash And The City during Stacey Mulcahy’s histerical presentation. She took random tweets, ran the text through a text-to-speech API and then took the sound data and displayed it with HYPE. It was super neat.

I hope I have more time to play in the future, rarely have enough time to even sleep with work and freelance lately. Here’s something I threw together in a few minutes for my boys at typcut. Click it to reset the circles and create new ones.

CBS Around the World For Free – success!

And so my life can begin again!

Told ya I was super busy, and now I’m finally done. Spent the last 3 months working with Robotlegs for the first time, and I gotta say, I was super happy that I learned it cuz now I don’t think I’ll ever use another framework (implying that i’ve ever used another framework haha). Regardless, check out the site by clicking on the screenshot below!

CBS Around the World

Long story short – Jeff Schroeder from Big Brother and the Amazing Race is going to spend 100 days traveling around the world “for free”. Our application tracks him in pseudo real time throughout his individual ‘journeys’. His path is drawn onto the map using GPS data from twitter, tweetphoto, his digital cam photo uploads, and a GPS Locator which is represented by the blue dot on the map of his current journey.

Users can create accounts with CBS, log into the application, and place tips/photos on the map to tell him where to go, as well as message Jeff directly if they want to meet up and show him around an area, give him a ride somewhere, etc. Jeff has to rely heavily on his fans and this site to get around.

It was alot of fun to work on this project, and it’s truly gratifying to hear how happy the execs at CBS are. Plus we got 29,000 unique hits on launch day Monday! Super stoked about it all. But more importantly, with the free time I’m going to have (i forgot what its like!) hopefully I’ll get some more experiments up here and keep content updated a little more regularly.

Ohh, also launched Neutrogena Wave microsite last week, another reason I’ve been so busy, go play the games and lemme know what you think. It was kind of a rush project but i think it’s pretty cool.

Till next time!

RobotLegs – AsyncCommand video tutorial

So i’ve been spending the last day or two playing around with RobotLegs after seeing the presentation on it at FATC by Joel Hooks. It’s been tough to just dive right into a framework like MVC when i’ve never done anything like that before, but the docs that I read prior to this past weekend from PureMVC as well as the docs at RobotLegs have helped.

And as an even more help, check out this video just posted at that brought it all together.

(Also the totally awesome amount of shortcuts used to make programming that much easier)

Life and Flash

Long story short, Flash and the City was a true turning point in my career/life/nerd-ness. The speakers there were absolutely amazing and my retarded amount of projects/stress seemed to take a turn for the calm.

That being said, I apologize for anyone who stumbles upon this and sees how little has actually been accomplished. Too many contracts, too little time.

But on a solid note, huge things in the future. AIR 2.0 will allow me to create a project i’ve been dreaming up for a solid few months and my ‘social media expert’ girlfriend believes that there could be some super interesting law suits in my future. I’m super stoked.

Early July i’ll be done with most of my major side shit so then I’ll have some more stuff to post and hopefully everyone will enjoy. Let the battle for internet freedom/privacy begin. Stay tuned.

Particles and image color

So I started playing with flash and ‘particles’, in this instance just a whole lot of triangles. I wanted to try and get the particles to settle over the areas of color closer to white but ended up just taking an average of the image that loads in and spreading them out over anything above my pre-defined color threshold. It’s very random, as is the motion on the particles, but I like how it looks.

Hopefully this is my first experiment of many, hope you enjoy!

UPDATE: click anywhere to toggle between the original image and particles

Flash “Bug” – Timeline shape mask and movieclips with linkage

Alright so I just wasted about 2 hours of my day trying to figure out why I couldn’t populate a movieclip with other clips while it was animating onto the stage.

There are two ways to encounter this error, mine was the latter:

1. You have a movieclip on the stage, and it is masked by a shape tween of any number of frames. You try to load a swf/img/mc into this movieclip on any frame, but it isn’t there once your shape tweened mask is done playing.

2. You have a movieclip on the stage associated with a class through its linkage properties. My movieclip was a holder for the recipe section of a liquor brand site that was able to import xml and create a list of drinks (after it animated in of course). There is a shape tweened mask above it and it has multiple keyframes on it. You call a function that loads new mc’s from your class and you see them (or don’t) for a split second before they disappear.


As evil as it may seem, Flash actual re-instantiates the masked movieclip every time it encounters a shape tween keyframe. I ended up putting a trace(“I AM INIT”) into my mc’s class constructor and noticed that it ran 8 times, the same number of keyframes that the masks shape had on its timeline, even though my mc existed only once.

I realized this after I unmasked the shape tween and it traced “I AM INIT” only once.

Further investigation led me to Adobe’s Help Forum once I learned the cause of my problem.

A fun little quote from that page from Adobe’s help team (bold italic for emphasis):

As long as I’m understanding the issue correctly, this is a long standing “Flashism” (not saying it’s right or desirable, but something that has required a workaround for a very long time). See if you can use nesting to get around the issue (the animation will restart when keyframes are encountered), I’ll send this issue in for review. It’s possible it has something to do with Player, although I can’t find any concrete information on this to know for sure.

As far as I know, by turning the shape tween into a movieclip, all problems go away, except now you have one more timeline to deal with (which is great when your current project consists of thousands of heavily hand animated timelines). I’m not sure I enjoy this “flashism” very much, and hope that I can help someone else out if anyone actually reads this.

JP Auclair finds treasure in mm.cfg

So this seems like a nice nerdy way to start off my blog. JP Auclair managed to find a TON of information regarding all the undocumented config parameters in the dreaded mm.cfg that Flash Player uses to decide how its going to output traces and such.

Alot of this is way way over my head but it’s interesting none-the-less. As well as the fact that there is feature called AS3Turbo, which is probably like meth for flash apps.

Check it out over at


I’ve actually heard someone say that before. Needless to say, I’m finally taking the plunge. Figure I do enough Flash-based experimenting and ranting about nonsense that I might as well start my own blog so I can keep a record of it all. And who knows, someone might actually give a shit about the stuff I post here.

So, reader’s beware, this is going to be a totally unfiltered account of the inner workings of my brain, whether it be football related, skiing related, code related, traveling related, oh, you get the idea.

And I promise I will figure out how to skin this shit asap so its not so boring.