This is a quick beginners guide to creating advertising Flash banners, including some technical issues you should consider.

Before you create your Flash banner

Before you begin creating your file there are a few things you will need to confirm with your client, advertising network (i.e. MSN or Yahoo), or digital marketing agency (i.e. TradeDoubler) . These are, for example, banner sizes, file restrictions (such as animation length, looping, file size), and URL.

Banner sizes

A banner can be of almost any size, and can be dependent on placement, geographic location and company. Some common sizes are:

• MPU – 300 x 250 px
• Skyscraper – 120 x 600 px
• Full banner – 468 x 60 px
• Leaderboard – 728 x 90 px

File restrictions

Animation length

Some advertising networks will require a limit to your animation length, so before you start ensure you know what this is if there is one, otherwise take a look at IAB Rich Media Standards. They recommend 15 seconds for the length of the animation.

Looping

Some advertising networks also do not allow the animation to loop, so find out if this is so. It’s also worth considering whether the banner will benefit from looping the animation, or if you want to finish on a final frame with a strong call to action.

File size

There will be a file size limit to your Flash banner, so optimising your banner is essential. It’s a good idea to consider this at the design stage. Try to keep everything as simple as you can. Bitmap images and a variety of typefaces will increase your final file size, so on your publish settings select the option to generate a size report to discover where you can streamline your file. Also, take a look here for some further advice on optimising your banner.

URL

The standard method of passing a URL to the Flash banner is by using a clickTag. This code allows the banner clicks to be tracked. The page that the Flash is placed in will tell the banner what the ‘clickTag’ value should be, i.e. the URL with the tracking code, then the Flash banner will use that value as the URL when it is clicked.

The format of the clickTag is also dependant on the placement. ‘clickTag’ seems to be the most common, however, ‘ClickTag’, ‘ClickTAG’ and ‘clickTAG’ are also used.

Starting the Flash banner

Frame rate

Too fast and some processsors can’t keep up, too slow and the animation is jumpy and awkward. So what should you set your frame rate too?

Here’s some info on the ‘Magic Frame Rate’

“About magic frame rate numbers: Recommended fps values for your FLA document are either 21 or 31, otherwise known as the “magic frame rate numbers”. The reason for these values is that the default document setting of 12 fps is more often than not too slow for tween animations, resulting in “jerky” motion. So most of the time it needs to be higher. In addition, it has been found that two SWFs published to the same fps, will run slower on the Mac Flash Player than on the PC Flash Player, given equivalent processing power. Sometimes the lag time is quite noticeable. To counteract this “bug”, we must set our FLA to either 21, 31, 41, 51 or 61 fps to negate this effect. But of course most computer processors cannot keep up with a frame rate higher than 31 fps, or performance issues in the Flash Player may occur. Thus it is advised that only frame rates of either 21 or 31 be used for most FLA documents. Only if you are running an FLV video player in your browser with the video at high resolution (larger than 320×240) would it be advisable to drop the frame rate of your FLV down to 12-15 in order to conserve performance. See Tom Green’s CMX article for more details on video performance in Flash.”

Taken from: Community MX : Understanding the Movie Clip Architecture.

So, I’d recommend keeping your frame rate to 31fps, to ensure minimal performance issues while still keeping a nice, smooth animation.

Background

Always remember to add a solid background to your banner, rather than setting the background property in Flash. Quite often, when a banner is placed it will have the ‘wmode’ set to transparent, so you can lose your set background colour.

Border

It is also recommended to have a solid border differentiating your Flash banner from the content surrounding it. This is quite often a restriction requested by advertising networks to ensure that your banner does not appear to be part of the site content.

Button

Unless you want different parts of your banner to link to different places, a good habit to create a transparent button covering the full size of the banner.

Then add the button action, something like this:

on (release) {
getURL(clickTag, "_blank");
}


Providing an alternative

Also remember that you may have to create a gif alternative to the Flash banner. The file size restrictions will also be an issue here, so try to keep it as simple as possible. It may be a good idea to keep this static if possible.

And finally

If you are looking for some more information, check out Adobes Best Practices when advertising with Flash or read my other article on Flash Banners Ads.

This is harder than I thought it was going to be, writing this Features Specification, that is.

Well, I’ve almost finished the first draft of the written document. Then my plan is to print it out, read it through, sketch out a site map and then work out where all the holes are. There is a lot to think about. I want to ensure that I’m making the user experience as smooth and beautiful as possible, while considering all the functionality that the client wants to include.

It’s felt a bit like I’m chipping away at it for days, but soon I’ll be able to see the big picture (Sorry to mix metaphors!)

As I’m a Designer, it’s normally expected that I’d want to get straight into actually working on the visuals for any project, but as it turns out I’m the main advocate of creating a detailed Features Specification for the current project I’m working on.

It’s really important before a project goes ahead to know it’s full scope for a variety of reasons.

1. To make it clear to all involved in the project what the purpose and functionality is of each page, and the site as a whole. This clarity ensures that at the start of the project everyone knows what we are aiming to acheive. It documents our intentions and ensures we are going to create something that properly fits into the clients requirements and expectations.

2. To make the design more cohesive by defining components. When designing numerous pages there can end up being many different elements. Just a bit of thought into grouping these elements as similar components can make it easier on design and build.

3. To accurately plan and cost the project. If we are all aware at the beginning of a project of what the level of work will be required, especially in development, then the cost will be more accurate and the planning will be much easier.

4. To make it easier to actually design. If there is a clear set of content and functionality for each page, then when it comes to designing the site, there will be more time to concentrate on the look and feel, rather than what is actually going on each page.

Well, I’m rather impressed with myself (even though I really shouldn’t be, because this has taken me days). Anyway, I eventually managed to get my Actionscript 2.0 Zoom Class working.

It will let you drag a  movie clip and make it zoom in and out from either the centre or top left of  the screen, rather than the centre/top left of the actual clip. Sounds a  bit confusing, but once it’s finished I’ll put up a sample and you can see what I mean.

Well, I’m back to working on some Flash Actionscript today, which is nice for a change.

I’m creating an image gallery, which should be quite simple, but I’m going to employ my new found fondness for Actionscript Classes. Still getting the hang of using them, but they are going to be really useful when we want to re-use them for new projects..

I think I’m going to need 3 Classes. One which someone has already written, will load in the images, then crop if required. I’ll write the second to zoom in and out, and the third will let you scroll through the images horizontally. Will hopefully all come together beautifully!

Something I really want to spend more time on, is creating icons. Cute little darlings scattered across the internet. From favicons in your address bar to folder icons on your desktop to an extra touch in the design of a website. Little visual cues – telling you what’s going on, what’s it about, or just where abouts you are. Who doesn’t recognise the blue and white Facebook ‘F’, or the Windows Messenger figure.

Even I’ve created my little pixel icons as part of this latest web design (let’s call it v01, just in case I redesign this at some point in the future), which if you really fancy you can download here.

Anyway, here are some free icon sets that I think are really adorable:

Turbo Milk Monster Icons

~dimpoart on deviantART Yummy Icons

Icon Buffet Sushinobi Icons

And, if you want to make your own, try this out Axialis Icon Workshop

I’ve been building a site for the past few days, that I haven’t actually designed, and it’s been quite interesting. Although, a small part of me is dying inside because it’s been designed by a print designer who doesn’t really have a clue how to design websites.

So, anyway, as I’ve been building it I’ve been checking it in Firefox 3 (I really should’ve done Firefox 2 as well, hmm), IE7 and, thanks to this program, Multiple IE, IE6 as well.

The first thing I learned, which has solved so many problems, was to make sure I was defining the margins and paddings as zero. Solved quite a few of my basic errors. And this wonderful add-on for Firefox, FireBug, makes it really easy to visually work out what is going on. (I really want one for IE now).

Another thing that I’ve had to use to accurately follow the designs is use transparent PNG’s. Which works in Firefox and IE7, but alas not IE6. One to be considered later….

And another lovely part of their design was to have input boxes for log-in with the label as the text value inside the box. So what do you do about the password box? So, I turned to Google for answers, as my Javascript skills are pretty non-existent. So far I have a solution that works perfectly in Firefox, and only partially in IE6/7. I think I’ll look to someone with more experience for answers in this one.

So, let’s all pray for a day when all browsers compile the code in the same way…sigh.

Today I’ve been doing some testing. Running through one of the sites we’ve been working on. Was really initially meant to be testing the layout in IE6, but due to my slightly pedantic nature I’m pretty much running through a lot of the functionality and logging the rather numerous, if minor, bugs. There aren’t that many IE6 issues anyway.

Testing is actually something we’re normally quite bad at doing right. It always gets scheduled in at the start, but as a project goes along, and things take longer than expected – especially the development work, the time for testing gets shrunk. It is a really essential step though. It’s hard to view something you’ve been working on objectively. You know where to click and what button takes you where, so you never get lost in a site, and unless there is an error, your expectations are always fulfilled. So, you require an outsiders eye. Someone who has absolutely no idea what’s going on (Okay, that’s a slight exaggeration).

Anyway – there is lots to check and fix. Fingers crossed for the deadline on Monday!

I’m almost at the end of working on this sign up process, so here are a few basics.

• Ensure that having to sign up is actually necessary
• Inform the user what the benefits are if you sign up
• Only request the minimum amount of information required
• Show links for ‘Sign in’ and ‘Forgotten your password?’
• The form labels should be simple and obvious
• When showing form errors, make it explicit where the error actually is (i.e. explain if it’s either the email or the password that is wrong)

Well, there is still lots more to learn, and if you are interested, here is a little bit more reading :

• Smashing Magazine, Web Form Design Patterns: Sign-Up Forms
• User Interface Engineering, Account Sign in: 8 Design Mistakes to Avoid
• A List Apart, Sign Up Forms Must Die ( excerpt from the Web Forms Book mentioned before)

Well, after my last post about Twitter, I’ve actually added a Twitter Tools widget to my blog. See over there in the side bar. I’m impressed with myself.