Tag Archives: actionscript

flash flurry of falling franklins

falling one dollar bills

Or Washingtons…

I got an interesting assignment from a design agency… they wanted to have a variable flurry of falling money in the background of an ad. It’s always a challenge in Flash to balance filesize and looks, and when ads are to be run on sites they almost always have strict filesize restrictions, usually 40KB. Video is out of the question, and animating by hand would take ages, so this was a job for animating with ActionScript.

I thought it would be a good idea to not totally reinvent the wheel, so I searched around and found a great falling snow tutorial on Kirupa, with well-written, easy to modify code. This is what I came up with:

// flurry functions, adapted from http://www.kirupa.com/developer/flash8/snow.htm
var billno:Number = 0;
dropbill = function () {
	width = Stage.width;
	height = Stage.height;
	max_billsize = 5;
        // "dolla" is the single animated horizontally spinning dollar
	t = attachMovie("dolla", "dolla"+billno, billno);
        // random location along the top of the movie
	t._x = -(width/2)+Math.random()*(1.5*width);
	t._y = -200;
        // random sizes for each
	t._xscale = t._yscale=50+Math.random()*(max_billsize*10);
        // gravity
	t.g = 10+Math.random()*2;
        // wind
	t.w = -1.5+Math.random()*(1.4*3);
        // they start falling with different angles
	t._rotation = Math.random()*360;
        // random angle on x-axis spin (animated)
	t.gotoAndPlay(1+random(24));
        // so that they move
	t.onEnterFrame = mover;
	billno = billno<150 ? billno+1 : 0;
};
mover = function () {
	this._y += this.g;
	this._x += this.w;
	if (this._y>height+200 || this._x>width+200 || this._x<-200) {
		this.removeMovieClip();
	}
};
  

The main difference between my script and Kirupa’s is killing the movie clips when they reach the bottom of the screen. That way, the quantity of falling dollars can be controlled on the timeline.

// to make one dollar fall, put this on the timeline:
dropbill();

// to make two dollars per second fall, put this on the timeline:
clearInterval(countup);
countup = setInterval(dropbill, 500);
  

Check it out fullscreen: dollars_640x480.swf… only 16K! so I had plenty of wiggle room to work with the animated ad text. Now if only there were an easy way to automate ad layout four totally different size ratios :p

Sociograph 2.0

An idea that has been brewing for some time…

http://apps.facebook.com/sociograph/

The 1.0 version was clunky, in Java, and relied on me racking my brain to figure out how everybody I knew was connected and entering the data manually. Day after day I would add to the dataset, until I finally realized that I was becoming obsessive and I had to stop, as the job was neverending. If we were even acquainted in 2002 you are probably in there…

http://forresto.com/oldsite/interactive/sociograph/sociograph.html

But now it is 2008 and we have fun things like APIs to play with. The only data that I can get to easily to connect people is groups, but I would like this to have more connections graphed. The connections are shallower than my hand-coded graph, but infinitely broader.

I need 5 people to add it in order to release it into the wild, so if you think it is at all neat please do. All suggestions welcome, of course.

Flare: Flash data visualization toolkit

My interest in data visualization can be mapped in this order:

  1. Java Graph Layout demo — a small applet
    • I played with making cubes and snowflakes with the simple notation for adding nodes and edges
  2. Touchgraph — added navigation and metadata, xml datasets
    • undertook a project to connect everybody that I knew by how they knew each other called Sociograph (had to stop adding nodes after a while, was getting obsessed)
  3. Prefuse — improved on these concepts aesthetically, and added many new visualizations
    • almost inspired to learn Java, but never really dove into it
  4. SpringGraph — Graph layout concepts in Flex
    • created TagGraph with this and the Flickr API, which creates an almost limitless web of photos and tags in an easily explorable interface
  5. Flare — some of prefuse ported to ActionScript