GridSplitter: Solution

The GridSplitter challenge is over. I enjoyed receiving and reviewing all the AS3 and JS solutions. Take a peek inside to see how it was done.

This movie requires Flash Player 9

Roll over the grid above to see the final result.

The GridSplitter challenge was very easy for many of you on the AS3 side of things as I provided you with the classes that did all the heavy lifting. The basis of this exercise was really to challenge you to make practical use of existing tools.

For the HTML5/JS folks I really wanted to see how one would recreate common “flash-like” things. I have to say I’m very impressed with not only the amount of JS solutions I received but by the effort people put into this challenge. Thank you.

AS3 Solution

Some of you came up with your own solutions and that is great. Using my provided classes it was really just a matter of figuring out which methods and properties of each class you had to use.

Using the BitmapTileGrid class it is very easy to take a solid image and break it up into a grid of image tiles.

//create a grid based on the image_mc movie clip symbol with 13 columns and 10 rows
var grid:BitmapTileGrid = new BitmapTileGrid(image_mc, 13, 10);

//add the grid to the stage
addChild(grid)

The GrowAndColorizeItem class takes a display object and applies a cool scale and saturation effect on roll over. But how do we access each tile and pass it into a GrowAndColorizeItem?

The BitmapTileGrid class allows you access to an array of all the BitmapTile objects in a BitmapTileGrid via the tilesArray property.

//see an array of all the BitmapTiles
trace(grid.tilesArray);

Now that we know how to access each tile, its just a matter of passing each tile into a GrowAndColorizeItem object.

//use a for each loop BitmapTile in the BitmapTileGrid's tilesArray array:

for each (var tile:BitmapTile in grid.tilesArray) {
        //pass each tile into a new GrowAndColorizeItem object
	new GrowAndColorizeItem(tile);
}

Some of you may be more comfortable with regular for loops, the following would have worked the same way:

for (var i:int = 0; i < grid.tilesArray.length; i++){
	new GrowAndColorizeItem( grid.tilesArray[i] );
}

For a great explanation of the various AS3 loops read the Republic of Code: Using Using Loops with ActionScript 3.0 tutorial.

Download the AS3 Solution Files

gridSplitter_solution_CS4.zip: includes fla and custom classes.

Non-Flash Entries

I was very happy with the variety of "non-flash" entries as it helps me learn about Flash alternatives. I was informed by some of my trusted and respected js peers that certain elements of the challenge weren't exactly easily or widely supported in all browsers. For instance, in order to reliably do the saturation to color effect many opted to use a black and white image AND a color image and do an alpha cross fade.

This is by no means a knock on the technology or on the contestants. I remember doing the same thing in Flash back in the day. With all technologies, there are always going to be limits imposed on us. It is our job to creatively work within those limitations to come up with the best solution.

I can't post all of the entries, but here are some that really stood out:

Canvas Solution by Casey C.
I really enjoyed the smoothness and zippiness of Casey's canvas solution.

JS/CSS3 Solution by Matt L.
Matt got a little funky and submitted 2 versions:
Traditional: followed the "scale and mask" style presented in the swf version
Fancy: a free-thinking approach to the scaling

The Winners!

I chose 3 random contest entrants and 2 folks that tweeted about they contest.
Cristian B
Kenny T
Harry D
Eder D
William A

All the winners have been contacted and will be notified how to claim their prizes shortly.

Big thanks to all that participated!

-carl

Post to Twitter Post to Facebook

This entry was posted in Challenge. Bookmark the permalink.