Flash Explained

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! 🙂

Top of page

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.

Top of page

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:

1. Match width and height.
2. Align left edge.
3. 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.

Top of page

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.

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:

Top of page

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:

Top of page

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:

1. 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.
2. 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.
3. 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.

Comments

Submit a comment