Tutorial: Create a Simple Banner with Flash CC

This tutorial (both above and below) will walk you through some techniques you can use to create a simple banner in Flash CC. At the end of the tutorial you should understand these techniques enough to be able to create your own banner in Flash. Resource files for this tutorial can be found in this ZIP archive.

(Note that the banner dimensions in this example are quite large so it is easier to see in the screen shots. Feel free to change the dimensions of your banner to something more appropriate for your use.) Let’s get started.

Create a New Flash File

Launch Flash. You will see a dialog box appear asking which type of document you want to create/edit. Select the new Actionscript 3.0 document option. Although we won’t be using much action script in this tutorial, this is still the type of document we want to work in. (Note: you can click any of the images in this post to see a larger version with more detail.)

A new Flash file will load and you will see the default stage load onto your workspace. You can change the properties of the stage by clicking the Properties tab near the top-right of the Flash workspace. Here you can change FPS (frames per second), stage dimensions, and stage color.

• On the Properties tab, click the Edit button next to the stage Size to change the width and height
• The Document Settings dialog will open, as seen above.
• Change the dimensions of the stage to 350px x 500px. Leave the rest of the settings as their default values.

Import Images Into the Library

Let’s begin creating the movie. There are a few images that need to be imported into Flash before they can be used in the movie. I like importing images straight into the Library so that I have them handy when they are needed and because it helps me stay organized right from the beginning of the project.

• Find the option to import images by going to the top menu and selecting File -> Import -> Import to Library, as seen below.

• Locate the file or files you want to import on your computer using the Import to Library dialog that opens up and then click Open.

 

The file(s) is now imported and can be found by clicking the Library tab near the top-right of the window. The swirly-clouds.png is in the Library along with a symbol (named Symbol2 in my workspace, yours may be named Symbol1) that Flash automatically created for me of that image. Remember that symbols in Flash are handy because they allow you to use many instances of an object in your movie, while only using that object once when the movie is published. This helps keep the file size small.

Place Library Objects On the Timeline

The swirly-clouds.png image will be the background image for this movie. To move it to the workspace:

• Click the first empty keyframe in Layer 1 of the timeline to be sure it is selected
• Move the cursor to the Library and click + drag the symbol of the swirly-clouds graphic onto the stage
• Use the Free Transform tool to scale the image smaller to the approximate size of the stage (It is a large file for the size of this movie stage)

You can view the properties of this image on the stage by clicking on it with the Selection tool and viewing the Properties panel. Notice there are options for adding Color Effects on this panel.

• Click on Color Effects, then click on Tint (see the image below)
• Edit the tint of the Swirly Clouds graphic so it appears as a more subtle background

Once the tint of the Swirly Clouds is complete:

• Move the cursor out to frame 100
• Right + click, and select insert keyframe, (the duration of this Flash movie will be 100 frames long)
• Place a keyframe at the last frame of the movie to ensure the background is visible for the entirety of the movie

Finally, lock the background layer so it isn’t inadvertently changed while we are working on the rest of the movie. Remember that you can rename layers, which is a helpful practice as it will make finding layers easier as your develops.

Draw Objects on the Stage

Next we will draw some hills in front of the Swirly Clouds, but before we do we will create a new layer to draw the first hill on.

• Click the New Layer icon in the bottom-left of the Timeline to create and new layer
• Select the first frame of the new layer
• Switch to the Pen tool
• Begin drawing the first hills (Drawing with the Pen tool in Flash is very similar to drawing with the Pen tool in Fireworks)
• BE SURE TO REMEMBER to click on the Object Drawing icon (near the bottom of the toolbar) once you have selected the Pen tool

Once the hills are drawn:

• Change back to the Selection tool
• Click on the hills you just drew
• Edit the color in the Properties panel

• On two new layers draw two more hills for a total of three hills, each on their own layer
• Lock all of the hill layers when they are all finished

Introduce Animation Into a Movie

Now that all of the static elements of the movie are finished it is time to begin work on the animated objects. We will be adding some people walking by in the foreground and animated text. Before we can add the people images, they will need to be imported into the Library (unless you prefer to draw your people). This process will be exactly like importing the Swirly Clouds background image, except we will import many images of people. You will find the images in the ZIP archive linked at the beginning of this tutorial, in a folder called “people”.

Before we drag our first person onto the stage web:

• Create a new layer
• Click once in the first frame of the new layer and click + drag person1 onto the stage. This person will be walking from right to left across the stage so position the image at the point where you want it to begin moving.

• In the Properties panel, edit the tint of person 1 from black to gray.

Now, we will add a Motion Tween to move this person from the right to the left side of the stage.

• Right + click frame 100 of the layer person 1 is on and select Create Motion Tween from the context menu
• While still on frame 100 and with your Select tool selected, drag the person to the other side of the stage. You will know you have successfully created the Motion Tween if a gray dotted path appears between the start and end locations of the person
• Hit your Enter key to test your tween animation

Next, add a few more people onto the stage, each in a new layer, and make them walk across the stage in the same way we did person 1. Change the scale and tint of the other people to make them look farther away or closer to the foreground.

With the last person I added to the stage, person 3, I added a scale change and a shift in tint into the Motion Tween.

• First click frame one of the new layer
• Place the person on the stage
• Change the tint to something light to give the illusion of him being farther away

• Next, Right + click frame 100 and select Create Motion Tween
• Move the person diagonally to the opposite side of the stage
• Change the tint again back to almost black and scale the person larger so that it looks like he is walking closer into the foreground
• Reorder the layers so people cross each others’ paths correctly

Add Text

Adding text to the stage is as simple as creating a new layer, switching to the Text tool, clicking on the stage and beginning to type.. I’ll be adding two text layers to this movie, a company name and a tagline. Using a Motion tween, I’ll drop the company name in from the top, then fade in the tagline.

• Start by typing the company name on a new layer
• Once you have entered text you can switch to the Selection tool
• Click the text to select it and change its characteristics such as font size, color, and font family in the Properties panel

To make this text drop onto the stage, create a Motion Tween, just like with the people, only this time move the text from off-stage onto the stage. We want the text to stop moving before the people do, so let’s eliminate the empty frames after frame 30 in the text layer by highlighting them, right + clicking, and selecting Remove Frames from the context menu.

• Next, right + click frame 30 again and select Create Motion Tween from the context menu.
• Using the Selection tool, drag the text down onto the stage to where you want it to remain until the end of the movie. The text will finish its animation in 30 frames, which gives people time to read it without having to chase it across the stage.
• Finally, right + click on frame 100 of the text layer and select Insert Frame from the context menu. This will ensure the text remains visible while the rest of the movie plays.

To add the tagline text we will create a new layer. This text will begin to appear after the company name text has finished moving, so we need to introduce the tagline text at frame 30.

• Select frame 30 of the new tagline layer
• Right + click and select Insert Empty Keyframe
• Select frame 30 again
• Grab the Text tool
• Click on the stage and start typing the tagline

Create a Classic Tween

The tagline animation will finish on frame 70.

• Right + click frame 70 of the tagline layer and select Insert Keyframe from the context menu.
• Right + click any frame between frames 30 and 70 and select Create Classic Tween from the context menu.
• Frames 30 through 70 should turn purple and a long arrow will appear between them in the timeline, indicating a Class Tween has been created.

We can add a Blur filter to the tagline text to transition it into visibility.

• On frame 30 of the tagline text layer, select the text on the stage with the Selection tool.
• Scroll down in the Properties panel until you see Filters, near the bottom.
• Click the Add Filter icon in the very bottom-left corner and select blur.
• Slide the Blur value out to 40.

To test what the movie will look like, click the first frame in the timeline and hit Enter on your keyboard. The playhead should move along the timeline and display your movie.

Stop Looping

There is one tiny piece of Action script we will include in this movie and it will stop this movie from looping when we publish it for the web. The piece of script we will be adding looks like this:

stop();

To add it to the movie, first create a new layer and name it Actions. Right + click on frame 100 of the Actions layer and select Insert Blank Keyframe from the context menu. Right + Click frame 100 of the Actions layer again and this time select Actions from the very bottom of the context menu. The Actions panel will appear. At line 1 type, stop();

Publish Your Flash Movie

With this tutorial you should now understand some basic techniques that will allow you to create a simple banner ad in flash. There are a number of other images in the resource archive found at the beginning of this tutorial that you can experiment with in your movie if you want to keep exploring. When you’re finished with your Flash movie and ready to put it on the web, you will publish the movie so that everyone with a Flash Player can see it. Up until this point we have been editing an FLA file. FLA is the native file format for Flash, but the only way to view FLA files is to have a full version of Flash, which most people do not have. Publishing your Flash movie converts it to a SWF (Shockwave Flash) format which can be played by anyone with a Flash player.

To publish your movie go to File -> Publish Settings

In the first tab ensure that you are publishing a SWF file and an HTML file. The HTML file will tell web browsers how to correctly display your Flash movie.

On the Flash tab there are a few settings, but we are concerned with the JPEG Quality area wich will help optimize images in the final SWF. Use the slider to better optimize images.

The third tab, publish settings for HTML, we are concerned with the Playback area. Uncheck all of the checkboxes.

All that is left to do now its to publish the movie. Remember that when you load your movie to the web, to load the HTML file as well. Share the address to the HTML file with anyone you want to see your Flash movie. The HTML file will contain a link to the SWF movie.