Tag 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 )

TweenLite.to( 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 )
this.graphics.lineStyle( $lineStyle.thickness, $lineStyle.color, $lineStyle.alpha );
this.graphics.lineStyle( _lineStyle.thickness, _lineStyle.color, _lineStyle.alpha );

this.graphics.moveTo( 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 http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/ 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; this.graphics.lineTo(posx,posy); } } else this.graphics.lineTo(anchor2.x,anchor2.y); _prevTime = _time; } public function clear():void { _frozen = true; this.graphics.clear(); } 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!

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!

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 http://jpauclair.net/2010/02/10/mmcfg-treasure/