Giant scrolling text banner creation

You will see in this tutorial how simple, yet effective putting a giant scrolling text in a banner is. It is even more effective and eye-catching when the text is a mask showing an image behind it! See the effect for yourself:

Looks nice, huh? You will be making a slightly different banner - I can't give you the image from the banner above, because it belongs to the company which hired me to make the ad banner. Yes, the banner above is a real one, made on order and was put on a high-traffic portal!

Preparing the image for the banner

Before starting Flash, you need to prepare the image for the ad banner. It has to be optimized, because the banner's filesize shoudn't be bigger than 15 KB (that is the requirement I had to fulfill).

This particular banner was made for a hotel company - it is advertising its holiday offers. So a choice of a young lady taking a sunbath was natural. It is very eye-catching, too. But, as I said, the image is not mine, so you'll use the one from the photography stock exchange site. Once on the site, register if you already haven't, so that you can download the image in its original size.

1. Optimize the image so that it weighs between 6 and 7 KB. What's important is that the image's height is equal to your banner's height - 60 pixels. Below is the image after optimization.

The width can't be made equal because the filesize of the image would be too big. So you will improvise - I will show you how.

Look at the example banner at the beginning of this tutorial. The skin color is in good contrast with the turquoise water and the deep blue color at the right side of the banner. Now why did I put this color there? Simply because the image had to be cut down to make the required banner filesize possible.

Had the image been as wide as the banner, its quality would have been drastically reduced to obtain the desired filesize. So I made a compromise. The image is not as wide as the banner is, but is showing the lady taking a sunbath and the blue color is good for contrast and as a beginning backgound for the scrolling text.

2. You can also use a second image, instead of a color, to simulate the sea to the right of the lady snorkeling. So I cut a piece of the photo showing the sea and optimized it down to 1.06 KB. Save this small picture to your computer.

3. In Flash, open the template for this banner ad by selecting File > New > Templates > 468x60 (Banner) and clicking OK.

4. Select Modify > Document and set the movie's framerate to 25 fps.

Call the first layer message 1.

5. Select the Text tool, choose a nice font (sans serif fonts work fine with this idea and design), set its size to 16 and its color to #003399 (you are making a banner that advertises holidays on the seaside, that's why blue is ok). Make sure that text you have chosen Static text in the Properties pnale.

Type "7 days on the Adriatic for 35 Euros?" or whatever promotional text you were given.

6. Convert this text field to a movie clip and call it message 1. Center the newly made movie clip on stage vertically and horizontally with the aid of the Align panel.

In the Properties panel, make sure that the movie clip's coordinates (X, Y) are set to round numbers. If they are not, round them manually by entering zeros after the decimal point in both fields.

7. Right-click on the frame number 6 of the current layer and choose Insert Keyframe.

Right-click anywhere between the first and the second keyframe and choose Create Motion Tween.

Select the first keyframe. Your timeline should now look exactly like the one on the image below.

8. On the first keyframe, select the movie clip and place it outside the scene, on the left, but on the exactly same Y coordinate. In other words, just move it horizontally, without changing its vertical position. You want to create the effect of text flying in on the stage from the left, quickly.

The movie clip on the first keyframe:

The movie clip on the second keyframe:

9. Right-click on frame 50 and choose Insert Frame. This is necessary if you want the audience to actually see the message :)

Lock this layer. Your banner up to now must look like the one below.

10. Make a new layer above the current one and call it button. Create an invisible button with the width and height equal to the stage dimensions and place a link to your client's site on it.

I won't go into explaining how to do this, because there already is an in-depth tutorial about the basics of making a flash ad banner, where every detail you need to know about this is layed out clearly. :)

11. Open the Scene panel (Window > Other Panels > Scene). Call the current scene message 1 by double-clicking on its name in the panel.

12. Click on the small plus icon in the bottom right corner of the Scene panel to create a new scene.

Call this new scene scroller.

In this new scene, call the current layer image.

13. Select File > Import > Import to Stage and find the image of the snorkeling lady you optimized earlier and import it onto the scene.

Align it with the left edge of the stage and center it vertically on stage.

14. Import the small image showing the sea (you can see it in the second step of this lesson) on the stage, too.

Center it vertically and put it right next to the image you first imported on the scene.

Copy the image and place it right next to the original. Repeat this until the stage is completely covered with images. It doesn't matter if the last image overflows and is partly over the right border of the scene. In fact it is allright, because you should cover the whole scene.

Take a look at the whole picture now. It doesn't look bad even if it's repetitive. And that won't be seen at all when you place the scrolling text over it. It will, in fact, look cool.

Lock the image layer.

15. Make a new layer above the image layer and call it scrolling text mask.

Choose the Text tool. Select a big, bold font (I chose Futura XBlk BT). Put the font's size at something like 84. Write the ad's message, "Holidays on the Adriatic" or whatever you like or have been given to display.

Now, it is important that the height of the letters, not of the text field, matches the height of the banner. Play with font size until you get it right. Look at the image below to see what I mean.

16. Once you got it right, convert the text field to a movie clip. Call it whatever you like. Be sure that you chose movie clip as type of symbol, because the type option is probably set to button from the previous steps (when you made an invisible button).

Now, position the movie clip with the text at the right of the stage. It will come in as those news scrollers at the bottom of the screen and pass through, disappearing on the left. In the Poperties panel, set the X and Y coordinates of the movie clip to round numbers.

17. Right-click on this layer's frame 114 and select Insert Keyframe. You can choose the keyframe 110 or 120 - it's important that the frame is above 100, because you want a smooth movement that is not too fast).

Position the movie clip with the text at the left of the stage - outside it!

Right-click between the two keyframes and select Create Motion Tween.

Right-click in the image layer right below the second keyframe of the motion tween animation you just made and select Insert Frame. You want the image layer to last as long as the animated text above it!

18. Right-click on the scrolling text mask layer and select Mask. This layer will become the mask and the one below it, containing the image, the masked one. This is just what you need for this ad banner.

Test your movie. Whooo! :)

I'll explain what makes this banner tick at the end of this tutorial, but now let me just quickly instruct you how to finish this banner.

19. On this scene, create a new layer, call it button and paste the keyframe with the button from the previous scene into it. Always remember that the ad banner must always be clickable!

You will now create a second message.

20. In the Scene panel, select the message 1 scene and click the Duplicate scene button (the leftmost at the bottom of the panel). Drag this new scene below the two existant ones, so that it will come after them when the movie's playing. Call this scene message 2.

21. Open the library (Window > Library) and duplicate the message 1 movie clip. Call it message 2.

Once duplicated, double-click on it to enter it and change the text in the text field to some other message. Flash really makes life easy, doesn't it? :)

22. Unlock the animation layer on this scene, select the movie clip on the first keyframe and in the Properties panle, click Swap and replace it with the message 2 movie clip you just made.

Repeat this for the second keyframe of the message's motion tween.

Also, you will have to readjust the starting and the final position of the movie clip so that it comes from outside the scene and ends its animation centered on the scene. You may also have to prolong the duration of the last keyframe so that the message can be read at normal speed, if the second message contains more text than the first one.

23. Duplicate the scroller scene and put it below all other scenes. You should make this, so that beyween the text messages the mask text animation appears again.

And that's it! It was easy, wasn't it? Flash banners can be really attractive. Now why?

The mask text that is scrolling is eye-catching. 60 pixels isn't something that is noticeable by itself, but 60 pixel text is. It clearly stands out on the whole page, and what's more it is revealing an appealing image as it scrolls.

You woudn't be able to buy a text ad with this property, and an animated gif would have a filesize far too big to conform to most sites' standards that are renting ad space.

And guess what? This banner you just made is just a little bit smaller than 15 KB! And that's the file size that you'll encounter often (as a requirement from the site displaying it) when working with 468x60 banners. You can download the source FLA file for this banner below.

Download the zipped source FLA file for this tutorial.