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!

The demo shows 100 random (intersecting) triangles textured with a Lena image and is rendering at about 30FPS on my Windows 7/Intel Xeon 5160.

Grab the source code!

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.

“Manny the mole wants to bring an apple home to his sweetheart, but an earthquake scrambled the path to his home. Help Manny to unscramble the path so he can impress his lady!” See if you can keep her happy, play now.