Daniel's Tech Ramblings » as3

Site Launch: How Much Carbon…?

Daniel — Mon, 17 Jan 2011 22:40:07 +0000

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

Daniel — Mon, 23 Aug 2010 16:03:17 +0000

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

Daniel — Tue, 03 Aug 2010 16:56:41 +0000

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.

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

Daniel — Wed, 28 Jul 2010 11:15:35 +0000

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

Daniel — Thu, 24 Jun 2010 21:10:34 +0000

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

Dynamic Text around an Ellipse

Daniel — Mon, 21 Jun 2010 22:06:34 +0000

Recently I had to create a dynamic menu that required some text to wrap around an ellipse. Getting the rotation correct involved calculating the angle of the tangent around the ellipse which was a challenge. Also the letter spacing was tricky and I don't think I have the best solution for this but it seems to work quite well.

Here is a quick demo I put together tonight of it in action

click to launch
download source CS5 (also requires minimalcomps Slider source)

Expenditure Map – Rewired State

Daniel — Tue, 23 Mar 2010 11:05:50 +0000

On the weekend I went to "National Hack the Government Day" here in London, organised by Rewired State. (Rewired State runs hackdays where developers show government what is possible, and government shows developers what is needed.)

It was a great day and a chance to collaborate with other developers on a project of our choosing. I have been meaning to get into data-visualisation for a long time, but hadn't managed to actually get around to building anything, so this day was a great opportunity to finally put something together.

I teamed up with Gareth Shapiro, flash/flex developer I have worked with before, and Ian Shortman, who found the data and managed most of the back-end.

We settled on an animated map showing the relative spending by different regions across the UK, using a set of circles that scale and change colour according to the relative values in the data.

It was an intense build as we only had a day to get a demo working, but it was very rewarding and I enjoyed the experience.

The end product is by no means polished and ready to go, but it shows what 3 developers can achieve in a day, and is a good starting point for more data-visualisation projects.

There are two colour pickers that let you choose the colour gradient of the regions, so you can quickly customise the way this looks, and radio buttons to choose the data sets to display. Thanks to Keith Peters (BIT-101) for the easily integrated components from minimalcomps. The project is Flash (AS3.0) with a MySQL and PHP back-end.

The project demonstration at the end of the day went well and the Expenditure Map was awarded one of the two Vodaphone-sponsored prizes which was unexpected but a nice surprise.

The project page at Rewired State is: http://rewiredstate.org/projects/expendituremap
and it can be viewed here: http://ishortman.com/projects/expendituremap

Zooming using transform Matrix

Daniel — Sat, 16 Jan 2010 18:46:04 +0000

Here is a brilliant post 'Zooming in Flash & Flex' on how to use the transform Matrix to zoom and rotate DisplayObjects. Daniel Gasienica writes well and has some great examples demonstrating to correct way to apply these transformations to your clips.
Using this method saves you messing around with the Point class and localToGlobal / globalToLocal methods. This solution is elegant and efficient.

http://gasi.ch/blog/zooming-in-flash-flex/

Site launch – portfolio site v3

Daniel — Sat, 16 Jan 2010 12:47:43 +0000

I've just launched my new portfolio site. This is v3.0 of sitedaniel.com, and takes a more minimalist approach to the design than the previous versions. This site is powered by ActionScript3.0 and XML, and uses some fun BitmapData effects.

link

Site launch: Adam&Eve Xmas Countdown

Daniel — Fri, 18 Dec 2009 11:15:24 +0000

This is a fun 'Flip' Clock that is counting down the days until Xmas.
It is AS3.0 and chooses images randomly from a large set.
Online for a short time only!