21 Oct 2007
by eviltwinin Design, flash, games
Way back in 2003, when I was just starting to seriously work with Flash, I was inspired by the vast array of games popping up on the internet to create my own, making a slight nod to the sci-fi genre, and computer games from my childhood including Monkey Island and the lesser known, but very cool, Omnicron Conspiracy.
This was my first attempt at any kind of serious ActionScript programming, so now with ActionScript 3.0 on the horizon I’m now going to deconstruct why it was all really not very good.
Organisation and Naming
The main reason to organise your file is to make it easy for yourself and others to work with, make changes, and return to at a later time to make updates.
Layers
So here’s a little snapshot of my FLA file. I’ve made some attempt at naming layers, even categorising them, but I’ve been a little lazy and missed some out. This is going to make it quite difficult if I want to change something on a specific layer. If I’d carefully named all my layers with an appropriate and consistent naming convention, then put them into relevant folders, searching for things would be a much easier process.
Library
It’s not just in the layers section that setting naming conventions and organising folders is helpful. As you can see in this screen of the library I’ve named the symbols with some relevant names, but there is no naming conventions or organisation, which again is going to make it difficult to find a specific symbol I’m looking for.
Actions & Functions
Right, now the really crazy part of the programming. See all those little a’s, I’ve put code in every frame, and on quite a lot of the layers. Many of these are also repetitions of what was on the frame before. There is also code on symbols within the stage. If I want to find out what is happening within the programming I’ll pretty much have to read through almost all of these frames and layers, even then I’m going to have to decipher how it all works. So, to make the application easier to work with, I would be better doing the following:
Actions
Placing all the actions on the one layer makes the code easy to find and debug, this is especially helpful if you are creating a complicated application. You can also create a separate ActionScript (AS) file to keep all your actions together.
Functions
According to Flash…
A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value.
This means I can create one piece of code that I can use once, or be called again using one line of code, instead of repeating the full code each time. So, if I’d created functions for certain repeated tasks, there would be less code throughout the file, and it would be a more streamlined file to work with.
See the example below:
Use this, once:
check_money = function () {
this.onEnterFrame = function() {
if (_root.moneyAmount == 0) {
_root.moneyHave = 0;
} else {
delete this.onEnterFrame;
}
};
};
And whenever you want to use the function use:
check_money();
Instead of the following on every frame within the layer:
if (_root.moneyAmount == 0) {
_root.moneyHave = 0;
}
Structure, Timeline & making it all Dynamic
Another thing that makes my FLA file very messy and difficult to amend is that everything is placed along the timeline. Each background tile and line of conversation has all been placed on each frame. All movements are animated in movie clip within movie clip. This makes the file very rigid and time consuming to develop, as each item is fixed.
Changing the Scene
Using the attachMovie() function means I could store each scene in the library then load them in as needed.
Movement
Instead of animating the character along each path I want him to take I could create one movement function, then every time I wanted him to move I could just call the function including the coordinates for where he should stop.
Dynamic Text
With dynamic text I could create functions to control the lines of conversation and their consequent actions, rather than place different static text on every scene.
Which means…
Creating an application in this way creates:
Increased flexibility – It would allow amendments and additions to be made easily, making developing the application a smoother process.
Increased transferability – The code can be reused again and again in other applications, saving time and effort in the future.
End results
Just to keep you a little longer, here is the flash game, still a bit buggy and rather cheesy. I always meant to create a next chapter for it and develop it further, but hopefully you’ll enjoy it anyway.
PLAY Escape from Zeixo
08 Oct 2007
by eviltwinin ads, Design, flash
Click here. Click here. Click here.
The general inclination of a user is to ignore banner ads. We are far more cynical about online marketing now, so, if the main aim of an ad banner is to engage users, increase the clickthrough rate and increase brand awareness then the banner should be more than just relevant content and pretty animations.
Recently I’ve seen a great banner for the Worldwide Wildlife Fund. It requests:
Can you spot the tiger?
using a set of binoculars, which zooms in on the forest background, but after a few seconds of trying (and failing) the message pops up
Difficult, isn’t it
Then it prompts you to click to adopt a tiger while you still can. I mean, I would, but my flat’s too small, and my current feline occupants probably wouldn’t be too happy about it – but basically I liked it; it creates awareness of their campaign in a clever and engaging way, while appealing to the user to click.
We have the skills to create innovative interactivity in a banner that will capture the user’s interest, but there are a few things I think are required to make this happen.
Awareness – a greater awareness by everyone involved in the project of what can be achieved, using the available technology and subsequent timescales, will mean a smoother process and a more effective outcome.
Research – If we spend more time considering who is the target market, what are their interests, what would capture their attention and therefore make them click on the banner, then we are a step closer to creating an effective ad.
Concept creation - time spent on producing clever and appealing banner concepts should not just involve the design department; Marketing and account management have very valuable input on how we could achieve successful banners.
If at first you don’t succeed, refer to the instruction manual
Paul’s post got me thinking about best practices for the Flash banners we create.
Adobe’s provided some basic instructions on building banners – Adobe Flash Best Practices – Advertising with Flash
I think we should take it a step further and, to a certain extent, standardise how we build banners. I’d like to consider the points below, and get some feedback/comments from everyone.
Optimum frame rate
Considering likely computer performance, resultant file size, as well as appearance, how many frames per second should we create the file at?
(I’m just going to copy this in from an email Paul sent round)
“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: http://www.communitymx.com/content/article.cfm?page=2&cid=C1379
Animation length
What is the average amount of time a user spends on the page, and how should we translate this to the length of the banner ad? I think IAB recommends 15 seconds for the length of the animation – IAB Rich Media Standards
Duration of each message
On average how many seconds does it take a user to read the message on a banner ad? I normally make this 3 – 4 seconds, but deciding on a value would ensure consistency throughout all the Flash banners and animated gifs we create.
cliiiiiiiiiickTaaaaaaaaaaaaaaaaaggggg
Okay – and then there’s the ‘clickTag’…(cue dramatic music). It’s quite simple…..we set the button action in the flash to go to the simple value ‘clickTag’
Kind of like this:
on (release) {
getURL(clickTag, "_blank");
}
So, when the flash is embedded in the page, the page then tells flash what this ‘clickTag’ value should be, i.e. the correct URL with all the tracking bits and pieces added. Another thing to be aware of is which format of ‘clickTag’ should be used; The majority of times the ad server network requests ‘clickTag’ be used, however ‘ClickTag’, ‘ClickTAG’ and ‘clickTAG’ are also used.
Oh, and another thing
One thing that can cause problems when creating the banners, and make it a more time consuming process, is not having the full technical information right from the beginning; Where are the banners going? What are the file size limits? What are all the dimensions required? What is the clickTag format? etc.
If all departments work together from the beginning to verify all the information required this will cause less problems and changes after the banners have been built.
Anyway…
I’ve waffled on for quite a wee bit now, but hopefully this is a step in the right direction for us to continue discussing how to improve our processes to create effective online ads.
RSS