This task seemed simple at first, but the more I thought about it, the more complicated it seemed. The trick is being able to split your image up into a grid, and then affect the grid pieces in an order that would start from one corner, and work its way to the other corner. I immediately started sketching down grids and trying to figure out patterns. With the help of a fellow employee, we found a pattern that worked for all directions.

The solution revolves around using a grid where the pieces are numbered by row and column. Here’s a simple example:

[0,0][0,1][0,2]

[1,0][1,1][1,2]

[2,0][2,1][2,2]

Lets examine the above example. We know we want to move from one corner to the opposite corner. Examining the grid, there’s a simple pattern using addition and subtraction. Travelling along diagonals, the items in a line all add up or subtract to the same values. 0,0 = 0; 0,1 = 1; 1,0 =1; 0,2 = 2, 1,1 = 2 etc…

Using this as our base, the next trick is how to loop through. The following is how it would work for one corner:

for (sum = 0; sum >= lastRow + lastCol; ++sum)
{
     for (row = 0; row >= lastRow; ++row)
     {
          col = sum - row;
     }
}

After that, all you have to do is affect your bitmaps however you woud like. Below are a few examples I came up with; Just click the image to begin the transition.

The first is a simple alpha fade with a large grid. This allows you to see whats going on from the most basic standpoint:

This example adds rotation and a subtle color transform:

This version scales the x values inward and randomly moves their x position slightly. Again there is a subtle color transform:

This last version is similar to the last only it uses the Y axis as opposed to the X:

With this technique, I’m curious to see what other people can do with it!

Using FLEX to develop banners is not a common technique. For some, it may seem a bit gratuitous versus just using flash. Hopefully by the end of this series, I can convert a few people to make a switch. For a lot of designer/developers, FLEX is a foreign tool that is oft left unused, but when it comes to the creation of multiple banners in multiple sizes, in a short timeline, FLEX allows you to build banners faster that run faster and smoother than using Flash IDE. This is not to say that Flash can’t accomplish these things that FLEX can, but this is to say that once you learn how to appropriately include FLEX in your development process, it will save you time and allow you to focus on the parts of the banner that really matter – the creative.

One of the biggest hurdles for flash developers is how to get their banner designs into FLEX. While this article is not about how to use FLEX, I’ll briefly explain the model we use at Glow. We design all of our banners layouts within flash IDE. We usually put everything inside of one movieclip, typically named MCStage and we set the clip for export with a package that matches our banner (i.e. com.client.project.size.MCStage). By giving all your banners the same export clip, you can begin to easily template how graphics are brought into Flex. Within MCStage, you can setup your banner however you would normally setup a banner on the timeline. Then when you’re done, you simply generate a SWC file and save it to a swc library folder inside your flex project.

To begin, lets look at the problems FLEX helps us tackle:

• Easy banner creation, multiple resizing
• Changing constants between multiple files, such as frame-rate and dimensions
• Handling clickTag’s for multiple vendors
• Focus more time on the creative, not the structure

To address a quick criticism for those flash IDE die-hards, I do understand that its super simple to change the dimensions of a banner, frame-rate, or clickTags within flash IDE. The reason that I started using FLEX to develop banners is not because It’s hard to change these items within flash, but because it becomes time consuming to change these things when you’re producing 50+ banners a week across multiple sizes, and need to make changes to hundreds of banners at the same time. While your projects may not always be this large, these principles apply equally to small projects as they do to large projects.

The foundation of any template is an abstract class and/or an interface. This foundation class will provide you with enough functionality to cover any banner creative as well as be customizable enough to grow into any media project imaginable. For my example, I’ve created both an interface (IBanner) and an abstract (AbstractBanner) from which all online media projects I build extend. This file should facilitate all foundation principles of a banner that you would find useful in any online media situation. By examining the interface file, IBanner, you get an idea of what this foundation looks like:

public interface IBanner
{
	function init(event:Event=null):void;
	function onReady():void;
	function start():void;
	function stop():void;
	function reset():void;
	function bannerLoop(event:TimerEvent):void
	}

Any IBanner will accurately handle its own loading, starting, stopping, resetting and looping. Lets take a brief walk through how I implement these functions. To begin, lets look at our constructor:

public function AbstractBanner()
	{
		//initialize any foundation objects here;

		this.bannerState = BannerConstants.STATE_LOADING;
		this.loaderInfo.addEventListener(Event.INIT, this.init);
	}

This function is very simple. The first thing we do is set our bannerState to a loading state, add an event listener to listen for when the file itself is completely loaded. This ensures the banner doesn’t begin before everything is loaded. bannerState is simply a variable you can check against to ensure that nothing is happening when it shouldn’t be. In its most basic form, there are three banner states: Loading, Ready, and Complete.

public function init(event:Event=null):void
	{
		this.stage.frameRate = BannerConstants.FRAME_RATE;
		this.stage.scaleMode = StageScaleMode.NO_SCALE;

		this.loaderInfo.removeEventListener(Event.INIT, this.init);

		this.bannerState = BannerConstants.STATE_READY;
	}

Then, in the init function, we can begin to set up constants that can be shared between projects. These basics listed here are frameRate and scaleMode but can include anything you’d need to be the same across multiple files, such as tune-in text, load locations, security permissions, etc. The last thing we do is set the banner state to Ready which tells our main loop that you can start running. From here, programming your banner is pretty simple. I use onReady to set up any graphics, and then call any number of custom functions to animate the graphics of the banner. At this point, start and stop are not as necessary for standard banners, but they become much more useful when extending this class for rich media.

By having all your banners extend from this template, it allows you to easily set up similar behavior for all your banners. Nothing exemplifies this more than clickTag’s. Our navigateToUrl function looks as follows:

public function navigateToUrl(url:String, description:String=""):void
	{
		var sURL:String;
		if ((sURL = root.loaderInfo.parameters.clickTag))
		{
			navigateToURL(new URLRequest(sURL), "_blank");
		}
		else
		{
			throw new Error("clickTag not found in loaderInfo.parameters, but user did click banner, Actionscript 3.0 Flash Player 9, " + new Date());
		}
	}

This function represents a standard Dart clickTag (because the majority of our banners are served through Dart). When we need to make a clientX version of the banner, all we have to do is make a new abstract that extends this class, customize the navigateToUrl function, and then extend your banner from that.

The last function of importance is bannerLoop. This is the tree from which all the banners’ branches stem. The last point problem I listed above is focusing on creative rather than building banner structures and that is where this function becomes essential. At its essence, our bannerLoop provides a model for building any number of effects, particle generators, syncing banners and much more. The foundation of all of this comes from our updateObjects model. UpdateObjects will be explained in more detail in a future article, but if you look at the function below, you can see how they are implemented:

public function bannerLoop(event:TimerEvent):void
	{
		switch(this.bannerState)
		{
			case BannerConstants.STATE_LOADING:
				//nothing
				break;
			case BannerConstants.STATE_READY:
				if (this.updateObjects.totalUpdateObjects > 0)
				{
					var now:Number = getTimer();
					var dt:Number = now - this.oldTime;
					this.oldTime = now;
					dt = dt < 0 ? 0 : dt;

					this.currentAnimationTime += dt;
				}

				this.updateObjects.update(this.currentAnimationTime);

				if (this.currentAnimationTime > BannerConstants.BANNER_LENGTH)
				{
					this.bannerState = BannerConstants.STATE_END;
				}

				break;
			case BannerConstants.STATE_END:
				//nothing
				break;
		}
	}

Lastly, an ancillary bonus of building a template is to provide functionality that you use during the development of banners for all your banners. One example of this is a function we use in virtually every banner project, hideDisplayObject(… args). This function sets the visibility of any clip you pass to it. I use this all the time to hide stage items after their alpha is tweened to 0.

protected function hideDisplayObject(... args):void
	{
		for each (var target:DisplayObject in args)
		{
			if (target)
			{
				target.visible = false;
			}
		}

	}

You can begin to see how important building a solid foundation for your banners becomes. In future articles we’ll discover how this abstract can be used to build any online media project from simple video players to full page take overs. However, with the ideas outlined here, you have a foundation from which you can quickly build, duplicate, and resize any standard media project. If you have any questions about the ideas outlined here, feel free to leave a comment below.

I decided to work on a little bit more, but as it turned out really soon, I needed some open format model files that would serve as demos. As a fan of the original Quake, and everything around it, and having a feeling that the original levels could run easily on present hardware minus Flash, I started working on a Quake BSP parser. See the result for yourself. Use mouse (with left button down) for mouselook, ASDW to move horizontally, RF to move up/down.  (It’s intentionally running fullscreen, just maximize your window.)

I would like to point out that it is Flash 9, i.e. no Alchemy involved!

Conclusion: the demo is running just fine to create a true 3D environment for a Flash game!

Additionally, the game is wrapped around a sweepstakes where the grand prize is the all-new Ford Taurus Limited.  Players must complete all seven weeks to be eligible to win the grand prize.

Can you catch The White Shadow? Play now!

Have what it takes to stop the Bugs Gone Wild or Alien Invaders?  If you like old school games give them a play. Bugs Gone Wild. Attack on Mother Earth.

Anemone

My first entry was called Anemone.

The Code:

if(i++<9)o[i-1]={x:275,y:200,a:l=i,w:30};with(o[i%l]){if(w>5)o[l++]={x:x,y:y,a:a,w:w};ls(w--,i);mt(x,y);lt(x+=9*s(2-a),y+=9*s(a+=r()*.6+6))}

Wormhole

I was really happy about Wormhole, because it seemed to become an inspiration for piXelero’s winning entry Tunnel of Stripes.

The Code:

g.clear();for(c=-90;c++;){d=91+(c-i*10)%90;ls(.1*d+9/d,0,1/d);g.drawCircle(275+.3*(s(i)+s(2*i))*(d+99),200+30*s(i),999/d)}i+=.01

Twister

The next submission received a notable mention, Twister.

The Code:

g.clear();for(c=999;c--;mt(c,k=275))if(!i)o[c]=r();else ls(1,lt(c,k),l=o[c],g.drawCircle(k+l*c*s(i+c)/9+99*s(i*.1)*s(2-2*l),k-l*k,.5));i+=.1

Grass

Fourth is Grass.

The Code:

g.clear();for(m=c=275;c--;ls(1,c<<8))for(u=c&4,v=9,mt(p=m+m*s(c*6),q=m+99*s(c*5)),k=.1+s(c+i)/20,d=15;d--;u+=v*k,v-=u*k)lt(p+=u,q-=v);i+=.1

Fur

Last but not least. At the time of the competition, our whole office became obsessed with the “fur effect” that you can see in the blog header. It was a bit challenging to recreate the effect in 140 characters, but it worked out well and I also had a couple of characters left to give the result a form, Female Form (let it run for a while).

The Code:

l=r();o.a=r()*7;mt(o.x=275+l*(r()-.5)*200,o.y=300-l*200);for(c=9;c--;){ls(1,0,c/9);l=r()*9;lt(o.x+=l*s(o.a+=r()-.5),o.y+=l*s(1.6-o.a))}

“Pete the Penguin can’t navigate his way across the frozen tundra without your help.  Guide him across the ice blocks so he can enjoy a tasty meal.”  Give it a shot.