Building a Polite Ad

A polite ad consists of an initial lightweight file that waits for the web page to fully load before loading in additional files. This functionality means that designers aren’t restricted by the 40k file size limit that most publishers enforce for ads. As long as the initial file is less than 40k and the rest of the files load politely, publishers will accept heavier ads. Any format can be built politely. The most common formats that use polite loading are In Page and Expands.

Below is a step by step guide to building a Polite In Page ad. If you’re building a polite expand ad, we recommend that you read the Building an Expand article and then come back to this one.

1. Create the ad in Flash

Create the initial flash movie with the stage size set to define the size of the ad. This is your main flash movie that you will load any additional files into.

2. Add the Core Component

Drag our Core component onto the first frame. We advise placing it off to the side of the stage so it doesn’t get in your way when designing. When you load in additional files from this initial file, please ensure you DO NOT include the Core component in any other file. The Core component should only exist in the initial (or “Main” as it is called in ONE by AOL: Creative) file.

3. Decide how you’re going to build the polite ad.

You have 3 options:

a) Use our File Loader component. You can drag the File Loader onto the stage in the position that you would like another file to load in. Set the file name on the component. Tick the Load Politely option. The defined file will load in after the page has loaded. Before that time, the File Loader component is actually invisible on the stage. One technique for building a polite ad is to have a looping animation behind (i.e on a lower layer than) the File Loader component. The looping animation will then be visible until the page has loaded and the File Loader component loads in the additional file. “polite-300×250-example-2″ in our sample files download uses this technique

b) Use ADTECH.isPageLoaded() to check whether the page has loaded at the end of each loop of an animation in your initial file. If it has, load in your additional file(s). “polite-300×250-example-1″ in our sample files download uses this technique. On frame 166 at the end of the animation we have the following code that either loads in the additional file or starts the looped animation again by instructing the flash movie to return to frame 1:


if(ADTECH.isPageLoaded()) {
 loadMovie(ADTECH.getFileUrl("polite300x250File2.swf"));
} else {
 gotoAndPlay(1);
}

function loadMovie(url:String) {
 var loader:Loader = new Loader();
 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
 loader.load(new URLRequest(url));
}

function loadCompleteHandler(event:Event) : void {
 addChild(event.currentTarget.content);
}

c) Listen for the page load event through ADTECH.addEventListener() so that you can load in the additional files as soon as the page has loaded in. Here’s some example code:

function loadMovie() {
 var loader:Loader = new Loader();
 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
 loader.load(new URLRequest(ADTECH.getFileUrl("polite300x250File2.swf")));
}

function loadCompleteHandler(event:Event) : void {
 addChild(event.currentTarget.content);
}

ADTECH.addEventListener(ADTECH.EVENT_PAGE_LOAD, loadMovie);

4. Build out the ad

Design the initial file and any additional files to look and function exactly how you want them to. During this design phase you can use as many (or as few!) of our components and API methods as you wish. Our only requirement is that you adhere to the five rules of ad building.

5. Upload to ONE by AOL: Creative

Create the ad in ONE by AOL: Creative. Click on Create New Ad in the top left of ONE by AOL: Creative, give it a name, brand and campaign name, select the In Page format and choose the ad size. Click Next and then upload your file(s). If you upload more than one file, ONE by AOL: Creative will detect which one contains the Core component and recognize that as the Main file. Remember, there should only be ONE file with the Core component in it. Now click Create and you should see your ad running in the Preview screen.

6. Change and Re-Upload

If you notice something that needs changing in the Flash file then make the change in Flash, publish the movie and then go to the files panel in ONE by AOL: Creative to re-upload the file.

7. Final Edits

Edit anything else that needs editing within ONE by AOL: Creative (e.g click urls and names). Share the ad with someone else so that they can do it!

Feedback and Knowledge Base