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:

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

(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: Bodyshop Rainforest range

This site is built using the PureMVC framework (AS3.0) and is XML driven to support multiple languages. This is the site I wrote the dynamic text around an ellipse code for, as it is used for the range menu.
It is a great looking site with some nice water and light effects going on in the background.

link

Site launch: HP Make it big

It has been a while since I have been able to update this blog and in that time I have completed about 5 different sites at multiple agencies. I am going to make an effort to get them all up here, but it has been hard to keep track of what has gone live and what is still being deployed. The first small site that is actually live is HP Make it big.
This is built to support multiple European languages and is driven by XML.

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

Dynamic Text around an Ellipse

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

ellipticaltext

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

site launch: GE Memorial Day Emissions

I've been a long-time admirer of the work of David McCandless (http://www.informationisbeautiful.net/), and I finally had the chance to build one of his infographics in Flash. The project displays projected CO2 emissions from car journeys on Memorial Day across America. You can choose between 3 region groupings and 3 fuel types. The numbers involved are mind-boggling!

GE Memorial Day emissions link

Men at Work / Kookaburra – new composition

[Edit: (6th May) This case is currently under appeal, so my understanding is that no precedents have been set yet. Also it has been pointed out to me that there are other issues to consider such as qualitative test for copyright and contrary sweat of brow. Any other legal opinions are welcome.]

On the 4th of February 2010, the Federal Court of Australia ruled that the Australian Band Men at Work reproduced 2 bars of an iconic Australian round "Kookaburra sits in the old gumtree" in their hit song "Down Under". (link to ruling)

"Kookaburra" was written in 1932 by Marion Sinclair as an entry into a competition to produce an authentic Australian folk song. It has been a campfire favourite for generations since and is sung as a "traditional" song all around the world.

But it is also a little-known fact that the rights to the song were sold after the competition in 1932 to raise funds for the Girl Guides movement and under Australian law, the song is still "in copyright".

The brief and playful nod to the song by Men At Work did not come to the attention of the owner of the copyright of "Kookaburra," Larrikin Music Publishing Pty Ltd, until 2007 - more than 25 years later - when this obscure piece of music trivia was featured in a quiz show. Larrikin Music then sued the band.

I'm a huge fan of the "Down Under" song and also grew up singing "Kookaburra" at kindergarten but I never made the connection either until I read about this court case.

The ruling makes interesting reading, and the judgement is based on the following assumptions about melodic copyright infringement:

  • Key is unimportant: relative pitch between notes is what "makes" a melody (point 177 in the ruling)
  • Tempo is not significant as long as the two versions are "more or less the same". (point 185)

The most interesting assumption and precedent for me though is the length of melody in question.

The "Kookaburra" case is based on a single two-bar phrase. Two bars is all that is needed to prove copyright infringement.

Considering that this Kookaburra melody contains only crochets, quavers and rests (assuming a time signature of 4 / 4), there is a finite number of two bar melodies using these values.

If we divide the two bars up into ¼ notes (quavers – the shortest note value used in this melody) we get 2 bars with 8 "spaces" each:

Consider that we want to be able to include notes longer than a quaver, we must allow sustained notes, and also rests.

Using the range of one octave, and restricting the pitches to a major diatonic scale (1-8), we have 8 pitches, a value for a rest (0), and a value for a sustained note (9). This gives us 10 values to choose from for each note "space".

Using this form of notation, the Kookaburra melody (above) would be written like this:

5555606659395030

Now we have 16 note spaces in our two bars and 10 note values which
gives 10^16 possible melodies, or

10,000,000,000,000,000 melodies.

If we play through these melodies one after the other, and each melody takes about 4 seconds to complete, our composition will take about 1268 million years. (I hope there is an interval)

The Australian Copyright Council Information Sheet states:

An original work which falls into one of the relevant categories is
automatically protected as soon as it is recorded in some way (for
example, written down, recorded on audio-tape, or saved in a digital
file). A work is “original” for the purposes of copyright law if it
has not merely been copied from another work, and it is the result of
skill or labour on the part of its author.

Obviously writing down all these melodies would be impossible, but it isn't impossible to write a program to generate them, which is exactly what I have done.
I would say that this program is "the result of skill or labour on the part of its author" and hence is automatically protected by Australian Copyright Laws. Whether or not the code represents it being "recorded in some way... in a digital file" is another issue, but I think it probably does cover this.

This program is written in ActionScript 3.0 for Flash.

The Kookaburra two bar melody in question:

So presumably now I own the copyright of every possible (original) 2 bar one-octave melodic phrase. Give me a new song, and I'll tell you where it already exists in my composition. This not only covers quavers, crochets and minims, but every note of length up to a breve (a double whole note). Nothing original can ever be composed again.

Speaking with my friend Chris Houston about the mathematical side of this, we realised that the beauty of using a one octave range is that with the rest and sustained values added, we have 10 choices per note position and can therefore use a base10 system to generate the melody.

This program stores the current playing melody and adds 1 to its number to generate next melody. If you start at the first melody:

0000 0000 0000 0000 (all rests and not very interesting)
the next melody will be
0000 0000 0000 0001 (a single "C" quaver at the end of the two bars, still pretty boring)

I've included in this program the ability to randomly generate a melody, (which is quite fun to play with and produces some interesting results) and also the ability to make it play a melody of your choice (via the address bar)

eg. http://dev.sitedaniel.com/music/?melody=1234567887654321
which will play up and down the scale.

Here are the first two bars or so from some other famous melodies:
Happy Birthday
Advance Australia Fair
Minuet in G from Children's Bach (now in C!)

Obviously as this composition contains all of these melodies, it does infringe on many existing copyrighted works, including the Kookaburra melody, but everything that is original is now part of my composition and therefore a copyrighted melody.

The purpose of this composition isn't to make million dollars from royalties and ruin music for everybody for the next 70 years, but to point out the flaws in the existing copyright laws. I don't know what is right, but this ruling seems wrong.

Hopefully Larrikin Music Publishing Pty Ltd won't be pursuing damages.

link

Thanks to:
Chris Houston for valuable mathematical input
bit-101 for the wonderful minimalcomps
John Dalziel for the time-keeping The Computus Engine

Expenditure Map – Rewired State

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.

Expenditure Map 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

Expenditure Map