This article is part of a multi-part series on using FLEX builder for banner development. The article here represents a starting point for developing standard flash media with FLEX. In future articles we will look into rich media development, and how to integrate 3rd party api’s such as doubleclick or pointroll into your FLEX projects. As a short disclaimer, this article assumes you understand concepts of abstract classes, polymorphism and the basics of FLEX builder.

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.