Flash Explained

Learn Flash easily.

How to create ad banners in Flash CS4

May 27th, 2010 | Author: Luka | Category: Banners


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.

Selecting a new 336 by 280 ad banner template in Flash CS4.

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.

The three imported PNGs placed on the document stage in Flash CS4.

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.

Creating the first movieclip for the banner ad.

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:

The Library in Flash CS4.

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).

Naming the first layer.

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.

Text tool options in Flash CS4.

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).

Creating a static text field in Flash CS4.

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 :).

Adding a filter effect to a static text field in Flash CS4.

Here is how your text should look like:

The glow filter effect applied to a text field in Flash CS4.

1.13 Lock the logo layer. Make a new one and call it message.

Adding a second layer.

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.

The ad banner message added below the logo.

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.

Adding the layer for the banner animation.

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.

The first movieclip positioned outside the stage area in Flash CS4.

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.

Applying the Blur filter effect to a movieclip in Flash CS4.

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.

Adjusting the Blur filter settings.

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.

Making a motion tween in Flash CS4.

Here is how your timeline should look like now:

A motion tween animation has just been added to the topmost layer.

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.

Adding a new frame to the motion tween.

Here's the updated layer in the timeline:

The elongated tween 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:

The movieclip has changed its position.

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.

A new keyframe added inside a motion tween animation in Flash CS4.

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).

The current frame is shown below the timeline.

2.8 Move the movieclip so that a little bit more than half of it has entered the visible portion of the stage.

Positioning the movieclip on stage in Flash CS4.

Flash has inserted a new keyframe, of course.

A third keyframe inserted by Flash.

2.9 Move the playhead now to the adjacent frame - which is frame no. 7.

Playhead being positioned in Flash CS4 timeline, during the creation of an ad banner.

2.10 Position your movieclip so that the wheel of the bike has slightly entered the scene, as seen in the screenshot below.

The movieclip being positgioned on the stage.

2.11 Go to the Filters section of the Properties panel and bring the value of the Blur X property to zero.

Removing the horizontal blur effect in Flash CS4.

Also, check the X position property and remember it.

The horizontal position od the movieclip inside the banner ad.

2.12 Move the playhead to frame 70 now...

Going over to frame 70 in the bike layer.

...and change the bike's position to the one in the previous keyframe - the X position that you just saw.

Adjusting the movieclip position via the Properties panel in Flash CS 4.

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.

Inserting a frame in the banner ad's message layer.

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:

The duration of different layers as seen in the Flash CS4 timeline.

3.2 Repeat the same thing for the logo layer: add a frame so that it lasts as long as the two other layers.

Extending the duration of another layer in the timeline.

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.

Adding a new layer.

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.

Inserting a new keyframe in the model layer.

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.

Text tool properties as seen in Flash CS4.

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.

A text field has been inserted in the new layer.

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.

Making a new motion tween animation.

3.8 Move the playhead to frame 14.

Moving the playhead in Flash CS 4.

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.

A text field being animated on scene in Flash CS4.

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.

Creating a new layer for additional text messages in the ad banner.

3.11 Right-click on frame 25 and insert a keyframe there.

A new keyframe inserted in the text layer, in Flash CS4.

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.

A new text field added in Flash.

3.13 Add another keyframe, in frame 35.

A second keyframe added to the text layer.

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'.

Expanding the text field and adding text.

Again, press Esc when done.

3.15 Insert the third (and last) keyframe in the text layer — at frame 45.

Adding the third keyframe.

3.16 Use the Text tool (T) again and add the final line of text, '170 km/h'.

Entering the final line into the text field.

3.17 Lock the text layer. Select the frames starting from frame 71 up to the end of this layer.

Selecting keyframes.

3.18 Right-click on selected frames and click Remove Frames. Your layer should look as pictured in the right screenshot, below.

Removing frames in Adobe Flash.

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).

Removing frames in a Flash CS4 motion tween animation layer.

3.19 Add a new layer and call it frame.

Adding the penultimate layer for the banner ad.

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.

Drawing a rectangle.

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.

Using the Align panel to adjust a rectangle in Flash CS4.

You will now have a nice black border around your ad banner, the same size as it.

A border has been added around the ad banner in Flash CS4.

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.

A new layer added, for the ad banner 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.

Selecting the options for drawing a rectangle without the border.

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.

Drawing a rectangle that will be the ad banner button later.

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.

Creating a button symbol for the ad banner to be clickable.

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.

Making the banner button invisible and giving it an Instance name.

3.27 Add the final layer and call it actionscript.

Adding the final layer to the ad banner to enter ActionScript code inside it.

3.28 Right-click on the first frame of the actionscript layer (circled in the screenshot below) and select Actions from the contextual menu.

Adding ActionScript code to a frame in Flash CS4.

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.

The Scene panel as seen in Flash CS4.

4.3 Click the Duplicate Scene button. A copy of the bike 1 scene will be created. Rename it to bike 2.

Duplicating a whole scene in Flash CS4.

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.

The scene name as seen in the Flash CS4 authoring environment.

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).

Unlocking the layer with a movieclip inside it.

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.

Locating the movieclip in the Properties panel.

4.6 The Swap Symbol window will appear. Select the bike 2 movieclip and click OK.

Swapping a movieclip symbol in Flash CS4 via the Swap dialog window.

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.

The new, swapped symbol as seen in the Properties panel.

4.7 Lock the bike layer and unlock the model layer. Go to the first keyframe — where the text field first appears.

Preparing to modify a static text field.

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.

Changing the contents of a text field in Flash CS4.

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.

Modifying a layer in Flash CS4.

4.10 Change the text "249cc" to "599cc".

The text field contents in the first keyframe were just modified.

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.

Adding new contents to the static text field.

4.12 In the third keyframe, make the final changes as shown below.

Adding the final changes to the text message.

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:

ActionScript compiler errors as reported in Flash CS4.

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.

Accessing the ActionScript code placed in a keyframe.

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.

Creating the third scene by duplicating the second one of the ad banner.

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.

A layer where a new message for the banner ad will be placed has been created.

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.

The call to action message inserted in the banner ad in Flash CS4.

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.

A motion tween for the text field has been created.

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.

The Glow filter effect added to a text field.

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.

Reverting the glow for the text field back to zero.

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.

Adding more keyframes for repeating glowing text effects.

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.

Be Sociable, Share!

Comments

Submit a comment

  • Biro Jasa Sep 25, 2013 at 2:08 am

    Your style is so unique in comparison to other
    people I have read stuff from. I appreciate you for
    posting when you have the opportunity, Guess I will just book mark this web site.

  • mouni Jan 2, 2014 at 10:37 am

    Nice usèful actionscript coding welldone

  • Tammy Aug 6, 2014 at 10:20 am

    Can this work in CS3?

You must log in to post a comment.