In my last post I talked about how freelancing in London’s advertising industry promted me to write a blog post on some good flash build principles and practices specifically for flash banner ads. Below I hope are some useful tips that will help streamline production for yourself and those in a team environment. My primary focus is on 3 aspects in building flash banner ads. The first is ensuring the first build is flexible enough to be transformed into multiple dimensions and multiple creatives. The second is creating the banner to be cross ad platform friendly (meaning that you don’t have to make extensive changes to deliver this on another ad provider) and thirdly building the ad in a manner that is understandable to both flash designers and developers.

Some of the methods I suggest here are pretty obvious but as I mentioned in my previous post are often not implemented. Most of these techniques I’ve refined over the years working on flash banners with other flash designers and developers. In no way am I putting myself forward as an authority on the subject, I’m sure you will have your own view on many of the ways I’ve gone about implementing these design stratergies and for those of you who’ve worked on resolving similar issues in workflow I’m quite keen to hear your solutions and add/change/update my own.

I’ve also created a flash file template that implements the discussed techniques. Feel free to download and use it as you will. If I feel anyone has any good recommendations I’ll update this page and implement those to the file also.

Download Example Flash File Here (zip)

1. The Flexible Build

1. File Set Up
   Create around 5 frames for your ad and 4 layers. Label the top one ‘actions’ and on frame 2 place a ‘stop();’ call. Label the second layer ‘clicktag’ and the layer beneath this ‘mask’ and finally the bottom layer ‘timeline’.
2. Leave frame 1 blank on all of these layers, I’ll explain later.
3. Then on frame 2 create a MovieClip that will contain the whole ad. I usually call this something like ‘timelineMain’. In this clip you will do all your animating.
4. Create a mask and place it on frame 2 of the ‘mask’ layer and use this to mask the timeline. This is not always necessary but it has helped  on several occasions where in showing ads to clients the elements from the timeline have displayed outside the ad dimensions because of the way they are previewing the file.  Adding the mask simply cleared this up.
5. On frame 2 of the ‘clicktag’ layer place your button appropriately named ‘clicktag’ or ‘button’ if it’s generic. If you’ve got an add with rollover states then this may not apply and you will have to place it in the appropriate places of your ad, but 9 times out 10 this has been the best place to put it and get quick access to it.
6. Library

2. Cross Ad Platform Delivery

1. Blank Frame 1

   Quite a few ad serving platforms require you to leave the first frame blank. So even if you don’t have to for a particular sever you might as well leave it blank incase you later have to then provide it somewhere else.

2. Dropping the main timeline animation of the clip in a MovieClip container can help when you have to set up the banner in a completely different format,

3. Communication. Creating an understandable workflow.

Probably the most painful pitful. Even if things are a mess if someone’s explained where things are or how their production system works you can work with it. If not more often than not it gets to a point where it seems it would be easier to simply re-build the banner. Below are some of the ways people have communicated their build stratergies to me and some of my own.

1. Frame 2, Actions Pannel – instruct me with your notes.

   This is a great place, if not the most obvious place for designers and developers to read your instructions on how the banner has been put together, what variables/paramaters are important and how they should be set or adjusted. The good thing about putting them on frame 2 is that they are easy to find and they are with every version of the banner. It’s also important to place these on frame 2 so as to keep frame 1 empty for reasons mentioned in section 2.
   Go into detail on how things are set up, why you did it a certain way, where things are located and how things are labelled. If you have MovieClips with actions on them, list them here and where they are located.
   If you notice that your banner is over file size and your notes are quite extensive you may have to remove these notes. In this case save a production version with the notes and label this as the Master Production Version, so others know to check this out.

2. trace() – trace statements are our friends.

   It is so helpful to run a banner from within a flash authoring environment and the first thing to be output is a brief explanation of any variables/properties and how they are presently set. These should then be updated appropriately say when a user interacts with an object, you might want to list the object that is being interacted with and any values that are being updated.

3. Loop Count.

   Because not everyone is a programmer I set the loop count variable to 1. I also trace the loop count every time the ad loops. This lets me know as I’m watching it what loop I’m watching and enables me to catch it if it goes over the specified maximum loop count. A good way of doing this is to trace out the following:
   trace(“Current Loop: ” + _loopCount);

4. Click Initiated.

   I add a trace statement to the clicktag code. It is important to see while developing that the whole area of the ad is listening for the users click. Running the ad in flash and clicking randomly across it should then output a successful click message to let you know it’s doing what it should. I use the following: trace(“User Click Initiated”);

5. Labeling. Tell me what you are and what you do.

   Call an apple an apple an orange an orange and put them in a folder called fruit! It’s really that simple. Call the button you use as a clicktag… ‘clicktag’. If a movie is a container for the whole timeline, call it something like ‘timelineContainer’. If you have a MovieClip you reuse for several instances give it a name that lets someone know it’s purpose, if it’s simply empty call it ‘blank’. This way when someone else, or yourself is browsing your Flash File Library they will get a good idea of what library items do what.

6. Naming Conventions.

   Maybe not so important but nice none the less is how you name things. I personally use Camel Case but I don’t use Hungarian notation (maybe I should?) but rather put it in plain english in the name. So for those who are not programmers Camel case is simply naming clips without spaces or underscores and instead putting all the words together with each new word capitalised. eg. ‘elephant dancing container’ would become ‘elephantDancingContainer’. Do the same thing with your variables, it will keep the developers happy. For developers writing code that might need to be modified by a flash designer without much coding experience, write the variables with easy to understand names. eg. loopCount, loopMax & starsArray, starsArrayLength. Avoiding Hungarian notation here helps those who are not coders see what is what, what they can touch and what they probably shouldn’t.

7. Coding Notation.

   I don’t really feel I need to get into that here as I’ve talked a bit about this in a previous post, but it is extremely important for those writing code in banner ads to document that code. There are many blog posts out there that deal with how to go about writing good documentation and I recommend you check these out. It helps the next developer and designer to see it’s importance and to work out what might need to be modified without having to read through the scripting itself. Write it cleanly and in plain english.