Below are three demos and source code. These demos use some new features, I wrote these for use with the free Flex 4 SDK, which you can also use with Flash Builder 4 Beta, these classes are all very simple to convert for use with Flash CS4 instead.

Slide 1: Click on the photo and it shatters into pieces. This is a custom effect I built after some inspiration from Koen De Weggheleire’ s presentation “Play with Vectors.” For this effect I am drawing a 5×5 grid of rectangles and filling them with their respective pixel’s from the original source image. When the image is clicked the pieces have physics properties applied to propel them.

package com.hapticdata.fb2009
{
	import com.hapticdata.phsyics.AngularVelocityVector;
	import com.theflashblog.fp10.SimpleZSorter;
	import flash.geom.Vector3D;
	import flash.geom.Matrix3D;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.geom.Matrix;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.Stage;
	import flash.display.Sprite;

	/**
	 * Exploading picture,
	 * image is embedded split into a grid, the respective pixels are copied to the Sprite,
	 * and AngularVelocityVector is used for the animation
	 * @author kphillips
	 */
	public class ExplodingPicture extends Sprite
	{

		[Embed (source="../../../../eyes4.jpg")]
		private var imgClass:Class;

		public var bd:BitmapData;

		public var columns:int = 10;
		public var rows:int = 10;

		public var gridWidth:int;
		public var gridHeight:int;

		public var container:Sprite;

		public var items:Vector.;
		public var avVectors:Vector.;

		public var hasExploded:Boolean = false;
		public var axis:Vector.;

		public var _stage:Stage;
		override public function get stage():Stage
		{
			return _stage;
		}

		public function ExplodingPicture(stage:Stage=null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}

			axis = new Vector.();
			axis[0] = Vector3D.X_AXIS;
			axis[1] = Vector3D.Y_AXIS;
			axis[2] = Vector3D.Z_AXIS;

			avVectors = new Vector.();

			addEventListener(Event.ENTER_FRAME,handleEnterFrame);

			container = new Sprite();
			container.x = stage.stageWidth*0.5;
			container.y = stage.stageHeight*0.5;
			addChild(container);

			bd = (new imgClass() as Bitmap).bitmapData;

			gridWidth = bd.width / columns;
			gridHeight = bd.height / rows;

			items = new Vector.();
			for(var c:int=0;c < columns;c++)
			{
				for(var r:int=0;r < rows;r++)
				{
					var s:Sprite = new Sprite();
					var m:Matrix = new Matrix();

					var rectBD:BitmapData = new BitmapData(gridWidth,gridHeight);
					rectBD.copyPixels(bd, new Rectangle(c*gridWidth,r*gridHeight,gridWidth,gridHeight), new Point(0,0));
					s.graphics.beginBitmapFill(rectBD,m);
					s.graphics.drawRect(0,0,gridWidth,gridHeight);
					s.graphics.endFill();
					s.addEventListener(MouseEvent.CLICK,handleMouseClick)

					items.push(s);
					container.addChild(s);
					var sx:Number = (c*gridWidth) - (bd.width*0.5);
					var sy:Number = (r*gridHeight) - (bd.height*0.5);
					s.transform.matrix3D = new Matrix3D();
					s.transform.matrix3D.appendTranslation(sx, sy, 0);

					var av:AngularVelocityVector = new AngularVelocityVector();
					av.vector = {x: s.x, y: s.y};
					av.forces = {vx: 0, vy:Math.random()*-25,angle:Math.random()*360, wind: -1, gravity: 4, drag: 0.999};
					avVectors.push(av);
				}
			}
		}

		private function handleEnterFrame(event:Event):void
		{
			if(hasExploded)
			{
				for(var i:uint=0;i < items.length;i++)
				{
					avVectors[i].step();
					items[i].x = avVectors[i].x;
					items[i].y = avVectors[i].y;

					var rot:int = 4;
					if(i&1)rot *= -1;

					items[i].transform.matrix3D.appendRotation(rot, axis[i%axis.length]);
				}
			}
			SimpleZSorter.sortClips(container);
		}

		private function handleMouseClick(event:MouseEvent):void
		{
			hasExploded = true;
			(event.target as Sprite).transform.matrix3D.appendRotation(45,Vector3D.Z_AXIS);
		}
	}
}

The next 2 examples also were inspired by Koen's presentation. With Flash CS4 there is now a native 3d environment, using the Matrix3D class it simple to work in three dimensions without the use of a third-party library like Papervision3D or Away3D. I did however need to use SimpleZSorter, a great class I found on Lee Brimelow's The Flash Blog.

Slide 2: Accelerated Drawing using Vectors and 3D Transformations. This slide will draw 1000 squares in a 3d space, something that previously would've been very difficult for flash. Now using Vector (so much better than un-typed arrays), and some new drawing classes such as GraphicsPathCommand the drawing is very manageable on your systems resources.

package com.hapticdata.fb2009
{
	import flash.display.BitmapData;
	import flash.display.GraphicsBitmapFill;
	import flash.display.GraphicsPath;
	import flash.display.GraphicsPathCommand;
	import flash.display.GraphicsPathWinding;
	import flash.display.GraphicsSolidFill;
	import flash.display.GraphicsStroke;
	import flash.display.IGraphicsData;
	import flash.display.LineScaleMode;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.geom.Matrix3D;
	import flash.geom.Point;
	import flash.geom.Vector3D;

	/**
	 * Drawing3D, using the Vector class and GraphicsPathCommands to accelerate drawing
	 * @author kphillips
	 */
	public class Drawing3D extends Sprite
	{

		public var i:int = 0;
		public var numShapes:int = 1000;

		public var commands:Vector.;
		public var coords:Vector.;

		public var container:Sprite;
		public var shape:Sprite;

		public var _stage:Stage;

		override public function get stage():Stage {
			return _stage;
		}

		public function Drawing3D(stage:Stage = null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}
			container = new Sprite();
			container.x = stage.stageWidth * 0.5;
			container.y = stage.stageHeight * 0.5;

			addChild(container);

			commands = new Vector.();
			commands[0] = GraphicsPathCommand.MOVE_TO;
			commands[1] = GraphicsPathCommand.LINE_TO;
			commands[2] = GraphicsPathCommand.LINE_TO;
			commands[3] = GraphicsPathCommand.LINE_TO;
			commands[4] = GraphicsPathCommand.LINE_TO;
			//
			commands[5] = GraphicsPathCommand.MOVE_TO;
			commands[6] = GraphicsPathCommand.LINE_TO;
			commands[7] = GraphicsPathCommand.LINE_TO;
			commands[8] = GraphicsPathCommand.LINE_TO;
			commands[9] = GraphicsPathCommand.LINE_TO;

			addEventListener(Event.ENTER_FRAME, handleEnterFrame);
		}

		private function handleEnterFrame(event:Event):void
		{
			if(i++ < numShapes)
			{
				//create shape
				var shape:Sprite = new Sprite();
				shape.transform.matrix3D = new Matrix3D();
				shape.transform.matrix3D.appendTranslation(-stage.stageWidth * 0.5, -stage.stageHeight * 0.5, Math.random() * 50 - 25);
				container.addChild(shape);

				var pt:Point = new Point(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight);
				var width:int = Math.random() * 25 + 1
				var height:int = Math.random() * 25 + 1;
				coords = new Vector.();

				//left x
				coords[0] = pt.x - (width * 0.5);
				//top y
				coords[1] = pt.y - (height * 0.5);
				//right x
				coords[2] = pt.x + (width * 0.5);
				coords[3] = coords[1];

				coords[4] = coords[2];
				//bottom-y
				coords[5] = pt.y + (height * 0.5);

				coords[6] = coords[0];
				coords[7] = coords[5];

				coords[8] = coords[0];
				coords[9] = coords[1];

				var drawingData:GraphicsPath = new GraphicsPath(commands, coords, GraphicsPathWinding.NON_ZERO);
				var fillBitmap:GraphicsBitmapFill = new GraphicsBitmapFill(new BitmapData(width, height, true, Math.random() * 0xFFFFFF00));
				var stroke:GraphicsStroke = new GraphicsStroke(1, true, LineScaleMode.NONE, "none", "round", 3, new GraphicsSolidFill(0xffffff, 1));

				var graphicsData:Vector. = new Vector.();
				//fill
				graphicsData[0] = fillBitmap;
				//stroke
				graphicsData[1] = stroke;
				//data
				graphicsData[1] = drawingData;	//i don't want a stroke

				shape.transform.matrix3D.appendRotation(Math.random() * 360, Vector3D.Y_AXIS);
				shape.transform.matrix3D.appendRotation(Math.random() * 360, Vector3D.X_AXIS);

				shape.graphics.drawGraphicsData(graphicsData);

			}

			container.rotationY++;
		}
	}
}

Slide 3: Controlling an object's rotation in 3D There isn't much new here, I'm just trying to show simple control of the environment. You can see how we can implement 3D planes and rotation very simply, this could open up some doors for possible navigations in future projects without a large time investment.

package com.hapticdata.fb2009
{
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextField;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import flash.geom.Vector3D;

	import com.theflashblog.fp10.SimpleZSorter;
	import flash.geom.Matrix3D;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.display.Bitmap;
	import flash.display.Sprite;

	/**
	 * Rotating3D, an embedded object, rotating in a 3d environment
	 * @author kphillips
	 */
	public class Rotating3D extends Sprite
	{
		[Embed (source="../../../../tree.png")]
		private var imgClass:Class;

		public var original:Bitmap;

		//circle properties
		public var radius:int = 150;
		public var center:Point;

		public var numItems:int = 8;

		public var rotY:Number=0;
		public var rotZ:Number=0;

		public var container:Sprite;
		public var items:Vector.;

		public var _stage:Stage;
		override public function get stage():Stage
		{
			return _stage;
		}

		public function Rotating3D(stage:Stage=null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}
			stage.addEventListener(MouseEvent.MOUSE_MOVE,handleMouseMove);
			center = new Point(stage.stageWidth*0.5,stage.stageHeight*0.5);

			var tF:TextField = new TextField();
			tF.defaultTextFormat = new TextFormat("arial");
			tF.autoSize = TextFieldAutoSize.LEFT;
			tF.text = "move mouse to rotate";
			tF.x = 10;
			tF.y = 10;
			addChild(tF);

			container = new Sprite();
			container.x = center.x;
			container.y = center.y;
			addChild(container);
			container.addEventListener(MouseEvent.CLICK,handleClick);

			original = new imgClass() as Bitmap;

			items = new Vector.();
			var radialStep:Number = 360 / numItems;
			for(var i:uint=0;i < numItems;i++)
			{
				items[i] = new Bitmap(original.bitmapData.clone());
				items[i].transform.matrix3D = new Matrix3D();
				var rotZ:int =radialStep * i;

				items[i].transform.matrix3D.appendTranslation(-items[i].width*0.5, -items[i].height*0.5, 0);
				items[i].transform.matrix3D.appendRotation(rotZ,Vector3D.Y_AXIS);

				container.addChild(items[i]);

			}

			//SimpleZSorter.sortClips(container);

			//container.rotationX += 60;
			//container.rotationX += 15;
			addEventListener(Event.ENTER_FRAME,handleEnterFrame);
		}

		private function handleMouseMove(event:MouseEvent):void
		{
			var distX:Number = mouseX - center.x;
			var distY:Number = mouseY - center.y;

			rotY = distX / (stage.stageWidth*0.5);
			rotZ = distY / (stage.stageHeight*0.5);
		}

		private function handleClick(event:MouseEvent):void
		{
                        //move back in z-space every click
			//if(event.target is Bitmap)
			//{
				event.target.transform.matrix3D.appendTranslation(0,0,10);
			//}
		}

		private function handleEnterFrame(event:Event):void
		{
			container.rotationY+=(rotY*-2);
			container.rotationZ+=(rotZ*-2);
			SimpleZSorter.sortClips(container);
		}
	}
}

hd-fbexamples.zip (source files)

Overall the event was lots of fun, and a pretty optimal way to pull an all-nighter. A lot of people were feeling pretty miserable, and their were smells but it was an interesting site. More monitors than people, a lot of us brought our own dedicated servers for our workflow, and my teammate Justin had a cool cigarette-lighter / cup holder installed into his box instead of a second rom drive. Some neat setups. The event also had 2 projections, one displaying our countdown, and one displaying the live twitter activity surrounding the event; #webchallenge was consistently between the #3 – #8 most active topics on twitter for the whole challenge. Follow up more on this event at Inside the Nerdery, there is some good content showing everybody’s setup and our process, from discussing site objectives with the non-profits to the late hours of development. Below is a picture of our team, taken from the Nerdery, I’m on a back step eating an apple.

At the end of our three days of training we were given a brief. Help a big box retailer (like Wal-Mart) find success in its brick-and-mortar world during our economic recession, and allow them to compete against Netflix, Amazon and iTunes through a web presence. A bit impossible for a three day project?

We built a web application focusing on the social aspects of shopping, public custom lists, shout-style commentary, localizing rss-feeds from favorite brands. This concept was then bridged with an in-store shopping experience using a Microsoft Surface table. The three of us stayed locked in the office long nights, throwing around concepts, designing, and trying to pick up a new application model quickly. My main focus became the multi-touch Surface application, which focused on remote account access and a multi-user shopping experience through the table.

The teams were MOOV w/ Sierra Bravo, Hanson, Space 150, Zeus Jones w/ Sierra Bravo and Colle+McVoy (our team). In the end Zeus Jones won with their ability to re-invent the brief, and distill it to a single sentence. Their Silverlight application was very well designed and functionality behind the application seemed solid. Their in-store presence was lacking and I think that is one area that we were very solid. In the end we are not heading to SXSW to compete nationally, but every single judge did come up to us that night and explain how difficult of a decision it was, so I feel proud of our work. You try designing and developing a web application and a multi-touch application in three days with three people!

In the end it was a great time. I met a lot of cool people, I got to present my ideas to a room filled with talent, I got free Absinthe, a great party and some Microsoft swag.

Below is a photo of the in-store application we built using the Microsoft Surface table. You can see a shopping catalog, watch theatrical trailers, and bring up your personal account information.