Learn this simple technique to create eye-catching banner ads that leap out of the container and onto the web page.

In an increasingly mature market, online ads compete to attract the attention of Web site visitors more than ever. Recent years have seen a migration from animated GIF banners to Flash because of Flash’s superior interactivity, flexibility and high-quality image reproduction.

While this has helped maintain user interest and click-throughs, users are becoming harder to engage through advertising as they become desensitized.

One way to stand out is to break the mould: allow your ad design to leave the confines of its banner, taking advantage of the full browser window to capture the visitor’s imagination.

In this tutorial we’re going to look at how to achieve this effect, some of the pitfalls to avoid, and how to deploy our special ad onto a Web page. An image from iStockPhoto was used for the video the tutorial is based on; if you’d like to recreate the video yourself, this can be bought for a small cost from http://tinyurl.com/67pjja. The demonstration version of the finished project (which you can download here) works from a Web server rather than from a conventional Web browser.

01. Open up the Web site template (which you can download here) in your browser – I use Firefox, but any up-to-date browser will do. You’ll see we’ve got an area at the top ready to accommodate a banner advert. This template is very basic, but we’ll use it to test and illustrate the effect in practice.

02. In the HTML code, you’ll see a div tag ready for the banner ad code to be pasted into. This div is positioned absolutely via CSS, and appears after the content in the page template HTML. It’s important to grasp that the rules of Z-index, and what appears where in Z space, are partly determined by the code chronology. For this reason, the banner code is at the end to make sure it sits above everything else.

03. Open Flash and create a new ActionScript 2.0 Flash movie. Set the frame rate to 30fps, and the movie’s dimensions to be 860-x-524 pixels.

04. Select File > Import > Import Video. Locate the FinalMovie. mov file, and select it to be imported. Click Continue to choose from a list of deployment options. We’re going to embed the video on the timeline, so select Embed video in SWF and play in timeline.

05. Accept the default values on the next screen by clicking Continue. On the next screen, choose the Video tab, and make sure Encode Alpha is ticked. The video was saved with an embedded Alpha channel to give the movie’s background transparency; this is essential to allow our content to appear to float over the Web site underneath. Click Continue, then Finish.

06. The video is now embedded in the timeline, but it’s sitting out of position. Set both X and Y to 0 in order to align the video to the canvas. Select Control > Test Movie to get a preview of the effect. You’ll see that we have a banner-sized sand-coloured box. The photo grows from it, breaks into different planes, moves in 3D, then returns to the banner.

07. Initially, only the banner will be visible to the user. We need to prevent the video from playing until the user moves their mouse over the banner, so let’s create a button that sits over the banner and watches for that event. Click on the New Layer button, then draw a rectangle that covers the banner using the Rectangle tool.

08. Select the rectangle by doubleclicking on it, and choose Modify > Convert to Symbol. Choose Button as the type, and give it a name. Double-click on your new button, and in the timeline add a keyframe to the ‘hit’ state by selecting it, and pressing F6. Select the ‘up’ state in the timeline, and press Delete. Return to the main timeline.

09. Give your button an instance name of ‘myBtn’ by clicking on it, and typing ‘myBtn’ into the Properties panel. Add a new layer and give it the name ‘Actions’. We’re going to add the code that will stop the movie playing and assign the mouseover event to the button.

10. On Frame 1 of the Actions layer, press F6 to add a keyframe. Select Frame 1 again, and bring up the Actions panel (Window > Actions). Enter this code into the panel: stop(); myBtn.onRollOver = function():Void { play(); }; Test your movie to check the mouseover code is working properly.

11. Embellish the banner area by adding new layers and inserting text and graphics. Here we’ll add a question to compel the user to move their mouse over the ad. With that done, we’re ready to test the movie on our Web page, so save the file, then publish it by choosing File > Publish Settings. Make sure both SWF and HTML are ticked, then click Publish.

12. In your HTML editor, open the Flash-generated page. Copy the content inside the tags and paste it into the container on our Web site template. The template already has the required AC_ RunActiveContent.js included at the top. Save the template, and test it in your browser.

13. The banner works well, but because it sits over the top of the Web page, it interferes with the navigation bar; it’s impossible to choose a link. We’ll solve this using the jQuery JavaScript library (see Tip Box) to reduce the size of the banner container until the user moves over the banner. Type the following code into the head section of the template: $(document).ready(function() { makeSmall(); }); function makeBig() { $(“#bannercontainer”).css(“height”,”524px”); } function makeSmall() { $(“#bannercontainer”).css(“height”,”65px”); }

14. We need to get Flash to fire the makeBig function we’ve just added when the video is starting to play, and the makeSmall function when it’s done. Add a keyframe to frame 2 of the actions layer by pressing F6. Type the following code in to the Actions panel: getURL(“javascript:makeBig();”); Add another keyframe to the last frame of the movie, and add this code: getURL(“javascript:makeSmall();”);

15. Publish your movie again, and this time you’ll see the navigation can be accessed when the banner isn’t playing the video. To finish this project off, you can add a click event to the button we created in Step 08. Adding sound would also help engage the user, although you should provide a Mute button.

Sam Hampton-Smith

Who: With over ten years’ experience as a print-based graphic designer and Web developer, Sam Hampton-Smith set up a design studio in 2001. Sam lives in Scotland with his wife and three children. As well as being a full-time designer, he teaches graphics students, regularly writes and illustrates for magazines, and especially enjoys typography.
Contact: http://hampton-smith.com
Software: Adobe Flash, Adobe Dreamweaver
Time to complete: 2 hours
 

Download the project files

All files for this tutorial can be downloaded here (registration required).