Flash Explained

Learn Flash easily.

Giant scrolling text banner creation

October 12th, 2008 | Author: Luka | Category: Banners


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.

Optimizing the image for the banner ad.

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.

This image will be used in Flash to simulate a larger image.

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.

Centering the movie clip containing the text on the stage.

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.

Putting the movie clip X and Y coordinates to round numbers.

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.

Creating motion tween to animate the text.

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:

Placing the movie clip outside the scene, on the left.

The movie clip on the second keyframe:

Centering the movie clip on the stage.

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

Prolonging the duration of the second keyframe.

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.

Naming the current scene in the Scene 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.

Aligning the image imported on the 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.

Importing the second image.

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.

Images covering the 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.

Making the height of the letters match the stage height.

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!

The last keyframe of the text animation.

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!

Adjusting the duration of the image layer.

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.

The mask layer and the masked one.

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.

Duplicating a scene. Adjusting the order of the scenes.

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.

Download the zipped source FLA file for this tutorial.

Be Sociable, Share!

Comments

Submit a comment

  • […] Giant scrolling text banner creation […]

  • david Dec 9, 2008 at 11:58 am

    I have tried the scrolling text banner in various forms and have tried downloading your zipped source file and inall cases I get a white screen when the type should be scrolling across the screen, it works if I manually test it with the enter key but not control/enter. What am I doing wrong it’s driving me mad!

  • Oliver Ing Dec 20, 2008 at 10:02 am

    This is a fantastic way to learn how to create a banner. I have been trying all sorts of websites and this is worded the best and easiest to understand. Thank You Very Much

  • Aaron Jan 9, 2009 at 4:01 am

    I got lost on step 6. How exactly do you convert it to a movie clip??
    Someone please help! I’m a newb!

  • nigil Jan 16, 2009 at 11:08 am

    Gr8 tutorial. i finally done it thank you very much delighted.

  • daniella Jan 16, 2009 at 3:27 pm

    I`m at 16 Step.But I can`t convert the text into a movie clip.I know how to do that.However the button is not accessible.Help.

  • fevis Mar 5, 2009 at 10:44 pm

    Section 7)
    If you are using Adobe CS4, you need to chose “Create classic tween”, not “Create motion tween”. Else very nice beginners guide for people creating their first banners.

  • AJ Sep 9, 2009 at 5:03 pm

    David and others,

    To convert to a movie clip:

    Right click on text, go to ‘Convert To Symbol’, Select ‘Movie Clip’, click OK.

    Sorted!

  • Lexie Oct 28, 2009 at 4:46 am

    Hi there. I have a simple banner, background image & scrolling text. I would like the text to loop so there is never a big gap between the end & the start. I’m not sure how to explain it so I’ll draw a diagram:

    [ BANNER ]
    [BANNER ]
    [ANNER B]
    [NNER BA]
    [NER BAN]
    [ER BANN]
    [R BANNE]
    [ BANNER]
    [ BANNER ]

  • Fayaz Mar 20, 2010 at 4:19 pm

    Nice tutorial. Thanks for sharing.

    With all the bloggers sharing their info. the world of internet is a better place than ever.

  • jdobson May 2, 2010 at 10:18 am

    my banner doesnt work the first part does but the masking doesnt!!

  • jdobson May 2, 2010 at 10:28 am

    ‘AJ Sep 9, 2009 at 5:03 pm
    David and others,

    To convert to a movie clip:

    Right click on text, go to ‘Convert To Symbol’, Select ‘Movie Clip’, click OK.

    Sorted!’

    i tried this but it still comes up as a blank white screen!

  • Matty G Jun 16, 2010 at 7:59 pm

    Wow! This is the GREATEST flash site ever! Thanks so much for a great tutorial, so in-depth!!

  • Kim T Aug 6, 2010 at 2:14 pm

    Everything works out fine until I mask it. When I test it, I get a white strip. I’m so confuzzled.

  • pres Sep 15, 2010 at 8:39 pm

    i can not get the mask to work — what going on?

  • Caitlyn_Morris Mar 15, 2012 at 12:09 pm

    the little box thing of water; THERES A FACE OF A WOMAN IN THE WATER!!!!!

You must log in to post a comment.