With this easy lesson, you will learn to make a real-world ad banner in Flash CS4. You will see how to do the following things:
- Create an eye-catching animation,
- Make text messages appear gradually,
- Duplicate scenes to cut working time,
- Make a hyperlinked invisible button and more.
Here is the banner that you are going to learn to create:
1. Preparing the elements of your banner: Placing the logo, the message, importing the images
1.1 Open a new Flash CS4 banner template by selecting File > New > Templates. Then select Advertising > 336 x 280 Large Rectangle.
Of course — you could have selected any size, something you need for a specific website. But to be able to follow me more easily, select this one, because I have prepared the materials and this tutorial specifically for it.
Save your file before moving on. Call it whatever you like.
1.2 You will need some images (PNGs, in this case) for your banner: download the images. Unpack them and put them somewhere on your computer where you’ll quickly and easily find them.
1.3 Select File > Import > Import to Stage. Select all three images (ninja_250R.png, ninja_ZX_6R.png and ninja_ZX_10R.png) by control-clicking them. Click Open. They will appear on your document’s stage, stacked one above the other.
1.4 You need to create a movie clip symbol out of each image. So use the Selection tool (V) to drag and spread these three images around — just so you don’t select two or all three of them by accident.
1.5 Click on the green bike with the Selection tool (V) and select Modify > Convert to Symbol. Call the new symbol bike 1, select Movie Clip as type and click OK.
1.6 Click on the black bike and convert it into a movie clip, just like you did for the previous one (Modify > Convert to Symbol or F8). Call it bike 2, and the symbol type should be Movie Clip again.
1.7 Click on the white bike. Convert it into a Movie Clip (F8). Call it bike 3. Click OK. Here is how your Library should look like now: the three imported PNGs, together with the newly created movie clips:
Save your work.
1.8 Delete all the movieclips on stage — just select them and hit Delete or Backspace. Don’t worry, they will stay inside the library.
1.9 Call the first layer logo (just double-click on its name to change it).
1.10 Select the Text tool (T). In the Properties panel, choose these options:
- Static text. This will be the choice that you are going to make for each text field in your banner, because nothing here is going to be dynamic. The text in your banner will be used for conveying messages only.
- Select a nice font, suitable for your banner. I also chose to bold it and italicize it, it’s more prominent that way.
- Choose a big font size. This will be your main banner message/logo, so it needs to be visible.
- Select Anti-alias for readability — the text needs to be clear.
1.11 Click with the Text tool on the stage and start typing. When you’re done, just hit Esc on your keyboard: You will exit the text field, but it will stay selected (you can see that it is selected thanks to a thin blue border around it — see image below).
1.12 So, now that the text field is still selected, go back to the Properties panel — to the Filters section. Click the add new filter button (circled in red in the screenshot below). Select the Glow filter. Tweak its options as follows:
- Blur X and Y are set to 3px.
- Strength is set to 314%.
- Select High quality.
- I used the #00CC00 green for the color. This is close to Kawasaki’s trademark green color
.
Here is how your text should look like:
1.13 Lock the logo layer. Make a new one and call it message.
1.14 Use the Text tool again. Write your ad banner message. The only thing that I changed is the font size: I used 24pt, almost half the size of the logo text size. I added the message just below the main title/logo. I didn’t want to add any effects to this piece of text, because it has to be readable.
You have the basic elements of your ad banner now. Let me show you how to create a nice, eye-catching animation now. Save your file before proceeding!
2. Creating an eye-catching animation for your ad banner
2.1 Lock the message layer. Create a new layer and call it bike.
2.2 Go to the Library and drag out an instance of the bike 1 movie clip onto the stage. Position it outside the stage, on its left.
You will make the bike come inside the scene running, from the outside, that’s why you need it here in the starting position.
2.3 While your bike movieclip is selected, go to the Properties panel — to its Filters section. Click the Add filter button and select the Blur filter.
You will only increase the Blur X setting. Make its value 14px. This is because you want to add the illusion of fast movement. So as the bike moves in inside the scene, it should be blurred in the direction of its movement – horizontally. So keep Blur Y down to zero. To achieve this, make sure that the two values are NOT linked (the linking turned off is circled in red in the screenshot below). Put the Quality setting to Medium. See below how your movieclip should look like, with the blur filter applied to it.
You will animate the bike now.
2.4 Right-click on frame 1 of the bike layer and select Create Motion Tween from the context menu.
Here is how your timeline should look like now:
The azure/light blue background shows you that you have successfully created the beginning of a motion tween.
2.5 Right-click somewhere around frame 75 (still in the bike layer) and select Insert Frame.
Here’s the updated layer in the timeline:
2.6 Click once on the movieclip on the stage (using the Selection tool – V) to select it. Now press and hold down SHIFT and keep pressing the right arrow key until you have moved the bike movieclip off the right edge of the stage, as shown below:
And you’ll immediately notice that a keyframe has been added to the timeline, right where the playhead has been positioned — on the last frame of the tween. It is represented by a small black dot.
2.7 Now move the playhead over to frame 6. Just click on it — if you’re not sure where it is, check below the timeline (see screenshot below).
2.8 Move the movieclip so that a little bit more than half of it has entered the visible portion of the stage.
Flash has inserted a new keyframe, of course.
2.9 Move the playhead now to the adjacent frame – which is frame no. 7.
2.10 Position your movieclip so that the wheel of the bike has slightly entered the scene, as seen in the screenshot below.
2.11 Go to the Filters section of the Properties panel and bring the value of the Blur X property to zero.
Also, check the X position property and remember it.
2.12 Move the playhead to frame 70 now…
…and change the bike’s position to the one in the previous keyframe – the X position that you just saw.
2.13 Lock the bike layer and save your work now.
2.14 Test the animation (Ctrl+Enter) and you should see something like this:
This is basically the animation that you want to have in your ad banner. You can play around with the blur effect a little bit, acceleration (easing) etc, but you got your main animation. As you can see in the animation above, the logo and the message just flicker for a moment. You will adjust this and add additional elements to your ad banner in the next section.
3. Creating the text for your ad banner
3.1 Right-click on frame 70 of the message layer and select Insert Frame from the contextual menu.
This frame is right beneath the ending frame of your animation, so the message will be seen at all times. The two layers have the same duration in the timeline now:
3.2 Repeat the same thing for the logo layer: add a frame so that it lasts as long as the two other layers.
3.3 Add a new layer to the timeline (above the existing ones) and call it model. Here is where the model of the bike that you just animated will be displayed.
3.4 Right-click on frame 8 of model layer and select Insert Keyframe from the contextual menu.
A blank keyframe (represented by a small empty circle) will appear. This is normal, because there isn’t any content here yet. Why frame 8? Well, you want your text animation to start right after the bike movieclip has entered into the scene, which is a frame before that – frame 7.
3.5 Select the Text tool (T). Select Static Text in the Properties panel (in the uppermost menu, see screenshot below).
A small note: If your properties do not appear, just click with the text tool on the stage and you’ll see them show up in Properties panel.
Select some font you like in the Family menu and bold it and italicize it by selecting these options in the Sytle menu. Select a fairly large size, because this has to be visible — I chose 24 points. Again, this may differ from font to font. Select the Anti-alias for readability option. That’s because this text will fly onto the scene fast and will stay there, it is made for being easily readable.
3.6 The text you should type is ‘NINJA 250R’. You should position it above the bike, outside and to the left of the stage. When done typing, just hit Esc and move it around with arrow keys on your keyboard.
3.7 Right click either on frame 8 or anywhere after it in the model layer and select the Create Motion Tween option. The layer shall turn to a nice hue of azure, the same one that you see in the bike layer.
3.8 Move the playhead to frame 14.
3.9 Now move the text field just horizontally — the easiest way to do this is by using the arrow keys, either alone, or while Shift is pressed (to move it by 10 pixels at a time). Move it to the right, just close to the right edge of your ad banner. A dotted line will appear, indicating the path your text field will make during the animation.
Save and test your Flash movie. You should see something similar to this Flash animation:
You may ask yourself how did I know where to put the movieclips, where the animations should start and end — the exact keyframes. Well, I didn’t! I toyed around until I got it right. I am working with Flash for years now, but still, each animation is unique and has to be modified and tested until it turns out the way I want it to. With practice and experience, you will create your animations quicker, and know what to do much faster. I enjoy creating animations, they’re fun and different each time!
3.10 Lock the model layer and make a new one and call it text.
3.11 Right-click on frame 25 and insert a keyframe there.
3.12 Select the Text tool (T). Keep all the options as before, just change the font size to a smaller one. I changed mine to 14 points. Click below the model name and type ’249 cc’. Press Esc when done.
3.13 Add another keyframe, in frame 35.
3.14 Just click inside the text field, to be able to edit it again, and add a new line with the text ’33 HP @ 8200 RPM’.
Again, press Esc when done.
3.15 Insert the third (and last) keyframe in the text layer — at frame 45.
3.16 Use the Text tool (T) again and add the final line of text, ’170 km/h’.
3.17 Lock the text layer. Select the frames starting from frame 71 up to the end of this layer.
3.18 Right-click on selected frames and click Remove Frames. Your layer should look as pictured in the right screenshot, below.
I removed those frames because I want them to disappear as the bike leaves the scene.
You can also eliminate the same frames for the model layer, by holding down SHIFT, bringing your mouse near the end of the frames and dragging it backwards (if you don’t hold the Shift key, Flash will scale your animation, and you don’t want that here).
3.19 Add a new layer and call it frame.
3.20 Select the Rectangle tool (R). Block out the fill color, select 2.00 as stroke thickness, and turn on the Hinting option. Draw a rectangle of any size on the stage.
3.21 Select the rectangle by double-clicking on it with the Selection tool (V). Open the Align panel (Window > Align). Make sure that the "To Stage" button is turned on. Click the following buttons:
- Match width and height.
- Align left edge.
- Align top edge.
You will now have a nice black border around your ad banner, the same size as it.
I chose to do this because if my banner will end up on a website where the background color of most of the pages is white, I want to make it more prominent by putting a border around it. Of course, maybe you’ll want to blend it in, so you won’t add a border. Or simply change the banner’s background color to make it more prominent. You’ll see what works best with your targeted website and with experience, too.
3.22 Make a new layer and call it button.
3.23 Select the Rectangle tool (R) again. But this time, block out the stroke (border) color. Choose any color for the fill. It doesn’t matter, you’ll make the button invisible anyway.
3.24 Click and drag to draw a rectangle. Make it cover the whole stage — it may go over the edges of your banner, because the whole area of the banner must be clickable.
3.25 Select the Rectangle with the Selection tool (V). Select Modify > Convert to Symbol. Call it ad banner button, be sure to select Button as type and click OK.
3.26 While the ad banner’s button is still selected, go to the Properties panel. In the Color Effect menu select the Alpha option and bring it down to zero. This will make the button completely transparent.
Then, give it an Instance name: call it invisible_btn. This instance name will make it possible for you to add ActionScript code which will take the user to a website of your choice once he or she clicks the button.
3.27 Add the final layer and call it actionscript.
3.28 Right-click on the first frame of the actionscript layer (circled in the screenshot below) and select Actions from the contextual menu.
3.29 The Actions window will show up. Enter the following code inside it:
invisible_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.flashexplained.com"));
}
Save your work now!
Now, let me explain you this little bit of ActionScript code. First you have the instance name of your button added an event listener to it:
invisible_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
The event listener actually listens for an event to happen. If this event transpires, the event will trigger an action. In the line above, The event that the listener is listening for is MouseEvent.MOUSE_DOWN, which stands for the event when the mouse button is pressed. This is exactly what you need to make your button clickable.
The second parameter inside the parentheses of the addEventListener action is the event handler. The handler handles what happens when the event coming before it has happened. So, this handler is in fact the name of the ActionScript function that will be run when the event has been triggered. In this case, it’s name is mouseDownHandler.
The only line that this function contains is the one that orders the user’s browser to navigate to the URL of your choice:
navigateToURL(new URLRequest("http://www.flashexplained.com"));
This is done via the navigateToURL command. Between the quotation marks is the website (including http://) or page that you want your banner to point to. I chose my website. You will put what you need, what is being advertised, of course.
If you like, test your Flash ad banner right now by selecting Control > Test Movie and click it. It should take you to my website.
Fine. Let me show you now how to easily and quickly make all the other scenes for your ad banner.
4. Adding scenes to your Flash ad banner
4.1 Lock the actionscript layer. Open the Scene panel by selecting Window > Other Panels > Scene.
4.2 Double click on the Scene 1 name and rename it to bike 1.
4.3 Click the Duplicate Scene button. A copy of the bike 1 scene will be created. Rename it to bike 2.
When a scene is duplicated in Flash, all of its contents get duplicated, including ActionScript! The new scene comes straight after the previous one — as the first one finishes playing, your SWF animation continues right into the next one. Scenes are here to help you divide your animation into segments that are more easy to work with. Imagine changing something in your animation, and having to adjust all the other layers and frames, because of that change. Also, in a project like this one, an ad banner, scenes cut down your working time when similar animations are being used, by being duplicated.
You can see the scene you’re working on right under the name of your document, above the stage area.
4.4 Let me show you how to quickly create a second animation, just by replacing the existing elements with new ones. Unlock the bike layer and select the green bike movieclip by clicking on it once with the Selection tool (V).
4.5 While the movieclip is selected, go to the Properties panel. You should see "Instance of: bike 1" written there. Click the Swap button next to it.
4.6 The Swap Symbol window will appear. Select the bike 2 movieclip and click OK.
The bike on the stage will change from the green one to the black one. You can see this change in the Properties panel too, it says "Instance of: bike 2" now.
4.7 Lock the bike layer and unlock the model layer. Go to the first keyframe — where the text field first appears.
4.8 Double-click on the text field on stage to enter inside it. Change the NINJA 250R text to NINJA ZX6R. Press Esc when done.
You’ll notice that the text has changed in all frames, like the bike movieclip has changed in the entire animation. This is great about the new motion tweens in Flash CS4, as opposed to classic tweens, where you were obliged to change movieclip or a text field in each keyframe.
4.9 Lock the model layer and unlock the text layer. Go to the keyframe where the text field first appears.
4.10 Change the text "249cc" to "599cc".
4.11 Go to the next keyframe in the same layer, and change the contents of the text field to "599cc 131 HP @ 14000 RPM", as shown in the screenshot below.
4.12 In the third keyframe, make the final changes as shown below.
4.13 Lock the text layer.
4.13 Lock the text layer. You have just finished duplicating the scene and changing it! Yep, that’s it! But there is a small thing that needs to be fixed. To see what I am talking about, test your SWF by selecting Control > Test Movie.
Flash will warn you about an ActionScript error:
Why? Because you have defined the mouseDownHandler event handler function in the first scene. You should only define it once, and Flash knows for the rest of your animation what it does. So to change that, follow the next step.
4.14 You are still in the bike 2 scene. Right-click on the first frame of the actionscript layer and select Actions from the contextual menu.
4.15 Delete the whole handler function definition here, so that only the command that adds the listener to your button remains, like this:
invisible_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
If you test your SWF again, you won’t see an error reported, because everything’s fine now.
You have just finished adding the second scene to your Flash ad banner now! As you see, that was really easy. The third scene will be like a breeze.
4.16 Go once again to the Scene panel. While the bike 2 scene is selected, click on the Duplicate Scene button. Name the new scene bike 3.
4.17 Now, repeat the same things you did from step 4.4. through 4.12. The only difference this time is that you should:
- Swap the bike 2 movieclip for the bike 3 movieclip.
- Change the "NINJA ZX6R" text to "NINJA ZX10R" (in the model layer).
- Change the message in the text layer to: "998cc
200HP @ 11700RPM
282 km/h".
You don’t have to change the ActionScript code, because you have duplicated the second scene, in which there is just one line of code, and that is fine. There is nothing to remove now.
Here is how your ad banner should look now:
5. Creating the call to action for the ad banner
You need a final scene, and that’s the one where you incite the visitors to the website where your ad banner is running to click on it.
5.1 In the Scene Panel, duplicate the bike 3 scene. Call the new scene call to action.
5.2 Delete the following layers: bike, model and text.
5.3 Insert a new layer and name it call to action.
5.4 Select the Text tool (T). Choose a different font this time, to emphasize your message and select a big font size: I used 43pt. Type "Click here to book your test ride today!" and place this message in the center of your banner ad.
5.5 Right click anywhere on the call to action layer and select Create Motion Tween from the contextual menu. YOur layer’s background should turn to azure, as seen in the screenshot below.
5.6 Move the playhead to frame 10 and make sure that your text filed is selected. In the Properties panel, go to the Filters section and select the Glow filter. Set both blur values to 16px, the strength to 100%, the Quality to Low and select a nice green color.
5.7 Move the playhead to frame 20 of the same layer and turn the blur properties of the Glow filter to 0 (zero) there.
5.8 In frame 30, turn the glow back on, as you did the first time. Then move to frame 40 and turn it back to 0 again.
Here is how your scene should look like:
Conclusion: Tips on creating ad banners in Flash
You have just seen how to easily create a nice ad banner in Flash CS4. There are a few things that you should remember when creating ad banners in general:
- Make sure that the banner is eye-catching, but not to the point of being irritating! Note that some websites put a limit on the amount of times your banner can loop, to avoid annoying their visitors.
- Always include a nice, clear and readable text message. The text message is MORE important than the pictures or animations. People should be able to read what your banner is about easily and quickly. You must make them understand immediately what is it that you are advertising. Yes, the saying goes that a picture is worth a thousand words, but in this case, that doesn’t work by itself! A banner with a text message is more effective than a banner with just pictures in it! That’s also the reason why I chose a big font size for the messages.
- Always include a call to action inside your ad banner. This may be a single scene, like in the example you just followed through woth my tutorial, but you can include it in every scene too. For example, you can insert a big pointing finger or the classic mouse arrow cursor that is clicking on a button or anywhere on the banner. The words "click here" with any variation such as "click here to see our new…" or "click here to find out more" are used o often for a reason. You must incite people to click, give them a reason to do so.
Maybe you are wondering why did I choose bikes for my ad banner example? Well, I ride a Ninja 250R myself! Create cool banners and see my other Flash ad banner tutorials for more ideas! Keep on creating cool Flash work!!!
Download the source file for this ad banner.
The ad serving company should have provided you with a compatibility level as well as maximum file size, duration, repeat count and specifications for the animated GIF that is served for those without Flash. Use those.
Does anyone know software which can take a client’s .swf containing actionscript 3, and save it in a version GAM will accept? (Let’s assume I can’t get hold of the .fla master).
The ad serving organization really should have provided you with a compatibility level too as maximum file size, duration, repeat count and specifications for your animated GIF that is served for individuals without Flash. Use people.
my error panel indicates a syntax error that i cant really fix…it sayd:Scene=scene1, layer=Actionscript The class or interface ‘MouseEvent’ could function mouseDownhandler(event:MouseEvent):void { can anyone explain what i did wrong please.
@ emmanuel francis Which version of Flash/ActionScript do you use?
I’m a beginner in flash and despite reading some flash books on the subject, I had no idea of the “methods” in making simple banners… your tutorial has helped me see how are things done in flash tremendously! Thank you!
It’s a wonderful tutorial!
thanks very much!
Very interesting post. Ninja 250R is the best bike in its segment.
Thanks so much for the detailed tut. Also like the tips at the end. Your Tuts are the BEST!!!!
It is really nice tut.and very helpful
While doing your tut I’ve just by chance found out that the stage can just as well be cleared of elements by way of pressing F7
Thanks a lot for the tut!
Thanks you for the great detail in how to great a good flash banner. The only thing I am still confused about is what are the advantages of using flash. I have had many people tell me its useless and I shouldn’t bother with it. Why is that?
In the last tutorial about creating banner ads in CS3 (I think it was CS3) you went into detail about how to save the swf for previous versions of the flash player. is there a reason that this isn’t in this article?
These tutorials are so helpful and well written. Thanks for doing them.
Thank you for the great tutorial! Well explained and easy to understand. Helped me a lot!
I am still confused about the seo advantages with using flash, are there any?
Thank for great tutorials u have!!I ve been doing stuff only one week with this program so im really a starter. im havin some what of the problem here everythin goes fine till i duplicate scene. What happens is when I swap the bikes to another it changes it place though i know it should do same movement as the bike it was copied. in animation this means when second bike comes out it goes by and u r left with blurred image of back of the bike. Dont know what im doing wrong. please can some one help:)
j
Very nice and informative post. Its also helpful for a newbie flash learner and for expert too. I always love to work with flash and spent lots of time on creating something new every time. Hoping few more good post from your end..
Thanks for all your hard work!
I always love to create new stuff with Flash. I’m a web designer and need something new daily to keep update my self. The only frustrating to work with flash is more time taking. It takes a huge time to create a awesome ad banner with flash..
I went thrugh this tutorial and all I can say it AWESOME!!! Please, please product more like these. Very easy to follow and it was a lot of fun. I’ve take other courses, and got so confused and frustrated I stopped. Not with yours, though. Thank you very much!
Flash experts are in great demand nowadays. One of my friend have expertise in this field and he’s earning good in a renowned company. It require lots of hard work and patience to be successful in it….
Not a bad tut (aside from some design issues) but to be honest… there is no need to use scenes on a simple banner. I build banners for a living and I nor 30 other artists use scenes for a banner.
If you use movie clips, layers, AS and timeline wisely, you can create the same effect just as easy and quick saving the hassle of having to go back and forth between scenes for editing.
To create something in flash not an easy task.It require lots of hard work n focus.More you focused more chance to get best output.And you design will be awesome…
If you wanna create something new in flash.First of all you should have sound knowledge of working with.It demands lots of time to create some extra.After having 2-3yrs experience you can earn good money..
Click with the Text tool on the stage and start typing. When you’re done, just hit Esc on your keyboard: You will exit the text field, but it will stay selected (you can see that it is selected thanks to a thin blue border around it — see image below).
Great tips thanks for the info
Its really very good tutorial.i’m flowing your all tutorial after creat it.i’m really happy for this tutorial.
Flash maker are great demand off late.Most of the advertising companies seeking for such professional.It require more time to be expert in flash making stuff and need more time for creativity.
Thanks for the tips I had a few problems the other day and this cleared them right up. Sometimes you just have to walk away a do a bit more research.
Great tutorial, I had some problems with this a few months back and gave up. Really appreciate the tips.
mind blowingggggggggggggggggggg…………………………guys you done fanatasatic job please add more flash coontents with more easily…….simply greate job………………….thanks a lot……………..
great site. brilliant tutorials i cannot say anthing except thanks.
I’ve been working on getting my Flash skills up to speed, because there still seems to be a lot of demand for it. And this tutorial was really helpful. Your instructions are very clear and you don’t skip steps, assuming I’ll know what to do.
Thanks for this,
Blake
When can we see a new post?
Good question, man. And I don’t mean that in a sarcastic way.
Thanks for the tutorial I have a hard time with flash sometimes.
Very good tutorial. And like Luka and Dale, when is the next post. Again thanks very much. This is very goog.
Great tutorial. Flash can be tricky
Great tutorial. Thanks for share.
badass dude hell yeh
It was my very first application I had made while learning flash!!!
Thankx for such a lovely tutorial!!!
Flash has never been my strong suit. Thanks for the tutorial