Select Page

Site Launch: How Much Carbon…?

This project was another fantastic visualisation for David McCandless of informationisbeautiful.
http://www.informationisbeautiful.net/

It is the second visualisation we have worked on, and it was even more fun than the first.
The data is coming in live (as a CSV) from a Google Docs Spreadsheet http://bit.ly/tonsofcarbon.
The application is built in Flash using ActionScript 3.0 and the PureMVC framework, with SWFAddress and a small amount of XML.

You can read more about this project on David’s great blog here:
http://www.informationisbeautiful.net/2011/how-much-carbon/

link

Arranging objects in a grid

There are many ways to arrange objects in a grid using ActionScript and some ways of doing this are easier than others. The following way I have found is the easiest.
If you loop through all of your objects using a for(var i…) loop or something similar, you can set the x and y position of each one using only one line of code:

// inside a for(var i:int...) loop
gridObj.x = START_X + (i % COLUMNS) * (PAD_X + gridObj.width);
gridObj.y = START_Y + Math.floor(i / COLUMNS) * (PAD_Y + gridObj.height);

(COLUMNS is the number of required columns, PAD_X and PAD_Y are padding between objects along each axis.)
This uses the modulo (%) operator to determine the remainder of the division of the iterator and the number of columns. This is used for the X position of each object. The y position is calculated the other way, using Math.floor to get the highest exact number of divisions these two numbers will produce.
Note: int() can also be used instead of Math.floor().

Creating a simple Load Indicator / preloader

Here is a handy class to display a simple spinning load indicator / preload animation while your content is loading or transitioning. This demo uses the bit101 minimalcomps to show how flexible and configurable this class is.

loadindicator

Use this demo to set up the style for your project, then hit the “copy” button to copy the configuration to your clipboard.

click to launch

Usage:

// create
_loadInd = new LoadIndicator(this, 75, 75);

// remove
_loadInd.destroy();

download LoadIndicator.as

Site launch: The Megané Experiment

This was a very quick build and a steep learning curve with the Facebook Graph API integration. The site is PureMVC, AS3 and XML driven. Also it integrates with a Renault server for saving information about each user and their betting scores for the competition.
An interesting campaign with some great prizes available, but be quick as this is only for 9 more days.

link

Site Launch: Nissan Qashqai differentiation

This site for Nissan finally launched last week almost 4 months after I completed the build. It is AS3 and uses the PureMVC framework. It is to help customers compare the two different Qashqai models and their respective features. I really like the way the paint splashes around in this campaign.

link