A Better Way to Build Flash Banners

Flash banner development is often plagued by multiple files, fragmented code and messy timelines. This tutorial will show you how you can create a project template to serve as a solid base which will help you develop robust flash banners quickly, freeing you up to focus on bringing the creative idea to life.

Step 1: Setting Up Project Folder Structure

When building multiple flash banners, good file management is essential to keep your workflow efficient. Start your banner project template by creating the folder structure shown below:

Step 2: Creating A Photoshop Template

Now we are going to create a set of Photoshop templates to use when starting to design a flash banner campaign. (If you don't have Photoshop don't worry, you can skip ahead to Step 5). The Interactive Advertising Bureau maintain Ad Unit Guidelines that list the common dimensions of ad units (banners). For the purposes of this tutorial, we're going to create the three most common:

The Wide Skyscraper (160px wide x 600px tall)
The Medium Rectangle (300px wide x 250px tall)
The Leaderboard (728px x 90px tall)

Let's start by creating the template for The Wide Skyscraper. Open Photoshop and select File > New. Configure the properties for your new Photoshop document as shown below:

Step 3: Adding Layer Groups

To keep the layers in your Photoshop file as structured as your project folders when it's time to produce a banner design, we're going to add Layer Groups in the template file to hold core design elements.

Using New Group from the menu in the top-right corner of the Layers panel create the Layer Group structure shown below:

The 'Background' layer group will hold design elements that are in the background of your banner at all times, for example a color or a texture.

The 'Foreground' layer group will hold design elements that are in the foreground of your banner at all times, such as a company logo.

The 'Frame' layer groups will hold design elements of the key moments in your flash banner sequence or interaction. This could include key messages, critical points of an animation, or user interfaces.

Step 4: Save

Now your template is ready to save. Go to File > Save As and navigate to the 'design' folder in your project folder structure. Name the file according to its dimensions, in this case '160x600' and ensure it's in Photoshop format, with Layers checked.

That's your first fantastic flash banner template created! Repeat these steps for The Medium Rectangle (300px wide x 250px tall) and The Leaderboard (728px x 90px tall). With these Photoshop templates completed, we're ready to move into Flash.

Step 5: Creating Your Flash Project

Let's start by creating a Flash Project so you can navigate your file structure in the Flash IDE. Open Flash CS4 (the process is very similar in Flash CS3 although the Flash interface will differ) and go to Window > Other Panels > Project. In the Project panel, click on the Projects dropdown and select New Project. Specify the Project name as 'BannerTemplate'.

For the Root Folder, navigate to the /banner_template/development/ folder you created in Step 1 using the folder icon. Make sure the ActionScript version is set to ActionScript 3.0 and click Create Project.

Step 6: Flash Project Classes Folder

Now we are going to set the Flash Project properties to help Flash do the work of stubbing out our classes for us. Click the dropdown with the gear icon in the top right corner of the Project panel and select Project Properties. For the 'Save classes in' field, navigate to the /as/ folder you created in Step 1 and click OK.

Step 7: Banner Package Folder

If you performed the last step correctly, you should see little code brackets are now on your /as/ folder icon. We are now going to create a folder for all classes specific to our banner templates. Select the /as/ folder and click the new folder icon in the bottom of the panel. In the dialog box that appears name your folder 'banner' and click OK.

Step 8: Banner Base Document Class

Now (at last!) you are ready to create your banner base document class. If you're not familiar with using document classes (or classes in general), it's a good idea to read this quick tip first.

With the /as/banner/ folder selected, click the Create Class icon in the bottom of the panel. In the Class field add the class name 'Banner' after the package name 'banner.' and click Create Class.

Now we need to take this class stub and modify it to a functional base document class. Add to the ActionScript to reflect the code shown below:


package banner {
	
	import flash.display.MovieClip;
	
	public class Banner extends MovieClip {
		
		// Constants:
		
		// Public Properties:
		
		// Private Properties:
		private var config:Object;
	
		// Initialization:
		public function Banner(config:Object = null):void {
		}
	
		// Public Methods:
		public function init():void {
			trace("Banner class initialized");
		}
		
		// Protected Methods:
	}
	
}

Let's quickly cover the changes we've made to the Banner class:

Imported the MovieClip class.
Made the class Banner extend MovieClip (so it can be used as a document class).
Made the Banner document initialization function receive an optional config Object that we can use to pass in parameters.
Created a public init() function that outputs a trace when called. The reason why this is handy will be explained when we start to create the banner .FLAs.

Right now this isn't doing much, but the important thing here is to build a class structure that allows us to centralize banner logic, reducing code repetition. From here, we can now extend the Banner class to create our individual banner document classes.

Step 9: Banner Document Classes

Let's start with the class file for The Wide Skyscraper. Create a "WideSkyscraper" class in your Flash project /as/banner/ folder just as you did for the "Banner" class. Take the generated class stub code and add to it so it looks like this:


package banner {
	
	public class WideSkyscraper extends Banner {
		
		// Constants:
		// Public Properties:
		// Private Properties:
		private var config:Object;
	
		// Initialization:
		public function WideSkyscraper() {
			super();
		}

		// Public Methods:
		public override function init():void {
			trace("WideSkyscraper class initialized");
			super.init();
		}
		
		// Protected Methods:
	}
	
}

Let's go over the changes we've made to the WideSkyscraper class:

Made the WideSkyscraper class extend Banner.
Called the base Banner class document function with super() in the WideSkyscraper document function.
Overridden the base Banner class init() function with a custom init() function that outputs a trace when called, then calls the Banner class init() function.

Now repeat this step to create the banner document classes for the MediumRectangle and the Leaderboard. With this done, our document class structure is now in place.

Step 10: Creating Your Banner .FLAs

Now we can start to create the .FLA files we need. Again, let's start by creating the template for The Wide Skyscraper (160x600).

Open Flash CS4 and select File > New. Select "Flash File (ActionScript 3.0)" as the Type and click OK. In the Properties panel, edit the Publish and Properties settings as shown below:

Now save your file as "160x600.fla" in the /development/ folder of your project.

Step 11: Setting A Relative Source Path

We're now going to set a relative source path and a relative publish path. This becomes important when you want to make a copy of your banner template project, rename it and start working, or when you want to give the template to someone else. Absolute paths can be a real pain to update (especially across multiple files!) every time you want to start a project.

To set the source path go to File > Publish Settings and click the Flash tab. Now click the Settings button beside the Script dropdown to open the Advanced ActionScript 3.0 Settings window. Make sure Source Path is the active tab and click the '+' to add the './as' path. Now you can add the text 'banner.WideSkyscraper' in the Document Class field. Your window should look like this:

Click OK and your document is now linked to the WideSkyscraper class you created in Step 9.

Step 12: Setting A Relative Publish Path

To set the publish path, go to File > Publish Settings and click the Formats tab. We don't need the HTML file, so uncheck this box. In the publish path for the SWF, target the /www/ folder in your project folder as shown below. If everything looks correct, click OK. Your compiled swf will now be put in the /www/ folder when you preview or publish it.

There's a little more info on this in this Quick Tip screencast.

Step 13: The Main Timeline

For some reason, some ad serving systems require the first frame of your movie to be blank (Eyeblaster is an example of this), or to import their classes/include their ActionScript on the first frame. Often the Flash extensions you can install for these ad serving systems will refuse to package your file if you don't comply with this stipulation.

This is where the init() function you created in your document class earlier comes in. To ensure our template can be used in this situation, we are going to create a two frame timeline with the first frame blank, the second one containing a stop action and a call to the init() function as shown below:

If you compile this file now you should get the following in your Output panel which confirms your WideSkyscraper document class and Banner base document class are working:

1
2	WideSkyscraper class initialized
3	Banner class initialized

Step 14: Creating A Library Symbol Class

Now we're going to create a library symbol to hold the banner creative, whether it's an animation or an interface. Go to Insert > New Symbol and give it the name "creative", check Export for ActionScript and give it the class "Creative". Make sure the type is Movie Clip and click OK.

Now add some placeholder text on the stage as shown below so you can see something when you add it to your stage in code later:

And that's all we need from the .FLA file! Go ahead and create the other .FLAs for The Medium Rectangle (300 wide x 250 tall) and The Leaderboard (728 wide x 90 tall). With this in place, we can revisit our Banner document class and start adding core functionality across all these banners.

Step 15: Adding A Background Sprite

Nearly all banner guidelines advise you to place a solid background color in your Flash file as the Stage background color can be overwritten when the Flash object is embedded in an HTML page. Rather than going into every .FLA and drawing a shape on the stage, we can centralize this task in code. Open up your Banner class and update the file to reflect the code shown below:


package banner {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.Graphics;
	
	public class Banner extends MovieClip {
		
		// Constants:
		private const BG_COLOR:Number = 0x0E0E0E;
		
		// Public Properties:
		
		// Private Properties:
		private var config:Object;
	
		// Initialization:
		public function Banner(config:Object = null):void {
		}
	
		// Public Methods:
		public function init():void {
			trace("Banner class initialized");
			
			// Create background
			var bg:Sprite = new Sprite();
			bg.graphics.beginFill(BG_COLOR);
			bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
			bg.graphics.endFill();
			addChild(bg);
		}
		
		// Protected Methods:
	}
	
}

Let's recap the modifications we've made to the Banner class:

Imported the Sprite and Graphics classes.
Added a constant BG_COLOR and assigned to it a hexadecimal value.
Created a bg sprite and drawn a rectangle with a fill of BG_COLOR that covers our whole stage.
Added bg to the display list.

Now all you need to do is change the BG_COLOR value to get the right color background in all your banners.

Step 16: Adding to the Display List

Now we need to add the Creative symbol that we created in Step 14 to the display list as this will be the container for the creative execution. This is really easy to do, just update the init() function to this:


// Public Methods:
public function init():void {
	trace("Banner class initialized");
	
	// Create background
	var bg:Sprite = new Sprite();
	bg.graphics.beginFill(BG_COLOR);
	bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
	bg.graphics.endFill();
	addChild(bg);
	
	// Add Creative
	var creative:Creative = new Creative();
	addChild(creative);
}

Step 17: Adding A Clickable Area

Another common requirement is for the banner's clickable area to open a new window based on a "clicktag" variable passed in from the HTML page when the Flash object is embedded. Let's create a utility class to handle this for us. In the Flash Project panel navigate to your /as/banner/ folder and create a new subfolder called /util/. Create a new class in here called 'ClickArea' and code this as shown below:


package banner.util {
	
	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	
	public class ClickArea extends Sprite {
		
		// Private Properties:
		private var clickthroughURL:String;
	
		// Initialization:
		public function ClickArea(loaderInfo:Object,stage:Stage) {
			
			// Create clickable area
			this.graphics.beginFill(0x00FF00,0);
			this.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
			this.graphics.endFill();
			
			// Determine clickthrough URL (by checking known naming conventions)
			if(loaderInfo.parameters.clicktag != null) {
				clickthroughURL = loaderInfo.parameters.clicktag;
			} else if(loaderInfo.parameters.clickTag != null) {
				clickthroughURL = loaderInfo.parameters.clickTag;
			} else if(loaderInfo.parameters.clickTAG != null) {
				clickthroughURL = loaderInfo.parameters.clickTAG;
			}
			
			// Add button behaviour
			this.buttonMode = true;
			this.addEventListener(MouseEvent.CLICK, mouseClickHandler, false, 0, true);
		}
	
		// Public Methods:
		
		// Protected Methods:
		private function mouseClickHandler(e:MouseEvent):void {
			if(clickthroughURL != null) {
				navigateToURL(new URLRequest(clickthroughURL),"_blank");
			} else {
				trace("Clickthrough");
			}
		}
	}
	
}

Let's quickly summarize what the ClickArea class is doing:

Imports the necessary Flash classes.
Is based on the Sprite class.
ClickArea's constructor function requires two variables, the loaderInfo Object and the Stage. We will pass these in from our Banner document class.
Draws a transparent clickable area the width and height of the stage.
Attempts to get a clickthrough url out of the loaderInfo object and assign it to the clickthroughURL variable.
Adds behavior on mouse click that launches a clickthroughURL in a new window or outputs a trace if no URL is available. This is handy when testing in the Flash IDE.

Now open up your Banner class again and add import banner.util.ClickArea under your list of Flash class imports and update the init() function to instantiate the ClickArea and add it to the display list as shown below:


// Public Methods:
public function init():void {
	trace("Banner class initialized");
	
	// Create background
	var bg:Sprite = new Sprite();
	bg.graphics.beginFill(BG_COLOR);
	bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
	bg.graphics.endFill();
	addChild(bg);
	
	// Add Creative
	var creative:Creative = new Creative();
	addChild(creative);
	
	// Create clickable area
	var clickArea:ClickArea = new ClickArea(loaderInfo,stage);
	addChild(clickArea);
}

We're adding the basic fundamentals of banner development into this class, but the real value here is that we are adding these to all our banners in one centralized class. Any common tasks you find yourself doing repeatedly in banners can be added in here to free up your time to craft the unique animation or interaction the banner creative has.

Step 18: Publishing Your .FLAs

With all of our code nicely organized, opening the individual .FLAs and publishing them is starting to feel like a hassle. The good news is, we can automate this as well. Go to your Project panel and check the tickbox beside each banner .FLA format (if you can't see them in this list, click on the dropdown with the Gear icon and select Refresh) as shown below:

Now you can publish all of your banners to the /www/ folder you configured in Step 12 by clicking on the dropdown with the Gear icon and selecting Publish Project.

Step 19: HTML Presentation Page

The last element we need to complete to finish our banner project template is creating an HTML page to present them on so they can be shown to a client easily. Download SWFObject and place swfobject.js in the /www/ folder, then create a HTML file in the editor of your choice and write the code shown below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Banner Signoff Template</title>
	<style type="text/css" media="screen">
		body { padding:60px; }
		.banner { padding:0 40px 40px 0; float:left; display:block; }
	</style>
	<script src="swfobject.js" type="text/javascript"></script>
	<script type="text/javascript">
		var flashvars = { clickTag: "http://www.hornergraphic.com/" }
		swfobject.embedSWF("160x600.swf", "wide_skyscraper", "160", "600", "9", false, flashvars);
		swfobject.embedSWF("300x250.swf", "showcase", "300", "250", "9", false, flashvars);
		swfobject.embedSWF("728x90.swf", "leaderboard", "728", "90", "9", false, flashvars);
	</script>
</head>
<body>
	<div class="banner"><div id="wide_skyscraper"></div></div>
	<div class="banner"><div id="showcase"></div></div>
	<div class="banner"><div id="leaderboard"></div></div>
</body>
</html>

You can read more about how to use SWFObject in the online documentation, but let's quickly cover the key things we're doing here:

Declaring two css styles to create some space around the page and the individual banners.
Including swfobject.js, creating a test clickTag to pass in to our banners and writing the swfobject embed statements.
Defining a div structure and assigning a unique id to a div for SWFObject to dynamically replace with our SWF file.

Now save this file as index.html in the /www/ folder. You can now preview your banners in a web browser or upload this folder somewhere for your client to view:

Step 20: Review Your Project File Structure

Let's finish by reviewing our populated folder structure and ensuring all files are in the appropriate place:

You now have a project template with:

A set of Photoshop templates to produce the artwork in.
A set of Flash templates to import library assets into and create timeline animations in.
A document class structure that allows you to implement functionality in one or all banner formats.
A way to compile all of your banners at once.
An HTML page to view all the banners together for yourself and your client.

Conclusion

This tutorial is really only the start. Identify recurring tasks in your banner projects and tailoring your project template to address them to make it speed up your workflow as much as possible. Extend upon it by including your favorite lightweight frameworks (TweenNano is great for scripted animation) and libraries so your favorite tools are at your fingertips when you start your next project.

If you use Subversion or some other kind of source control, this would be a great project to include in your repository so you can improve on it over time and check out the latest revision for each banner project you start.

Got ideas about how this could be improved or comments about issues that hamper your banner development? Join in the discussion below!