Knight Digital Media Center Multimedia Training

Flash Tutorial

By Jane Stevens, Tim Gnatek, Jeremy Rue

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/flash-intro/

Introduction

Flash CS4 iconAdobe Flash is a powerful vector-based animation tool that has become the de facto standard for multimedia on the Internet because it allows authors to create online presentations with minimum file sizes.

With Flash, Web presentations can blend text, pictures, video, audio, interactive buttons and animated charts and graphs. Flash is also becoming a rich ground for multimedia journalism, because its interactivity lends itself as a medium to non-linear, reader-directed storytelling.

We take a two-pronged approach to teaching Flash. This tutorial is a basic entry-level introduction to Flash. It will cover how to use the timeline to make a simple animated photo slideshow. The second step is creating a self-contained program with interactive buttons and media, which can be found in this tutorial.

This tutorial was written using Flash CS4. Some of the screenshots may not match exactly if you are using earlier versions of Flash, but this tutorial will be applicable to people using Flash versions 8 and above.

A 30-day trial version of Flash can be downloaded from Adobe's Web site (registration required):

http://www.adobe.com/products/flash/

Flash is also sold in packaged "suites" by Adobe at greatly reduced prices.

Starting Out With Flash

This tutorial will take you through the process of creating a photo slideshow in Flash step-by-step. If you don't have a copy of the Flash authoring program, you can download a 30-day trial version from Adobe's Web site: http://www.adobe.com/products/flash/. You can also download a copy of the finished .fla file of this tutorial here.

File Types in Flash

There are many file types you will deal with in Flash, but only two are the most common:

.FLA - This is the extension of the main project file that you will be working on.

.SWF - Pronounced "swift", this is the exported Flash file that will go on the Web when you're done.

It's important to know that the .FLA contains all of the media that you import into Flash. For example, if you import 10 photos into your library, those photos will be stored in the .FLA file and will be available to any person who opens the .FLA from their computer. Another thing to know about the .SWF file is that it is locked. This means that you cannot give someone a .SWF to open and manipulate; it is considered the finished exported project.

Here are some other, more rare, file types you may encounter in advanced Flash situations:

.FLV - This is a Flash Video file. It cannot be opened on a computer without a special player.

.AS - This is a special ActionScript file that has code that some advanced projects need.

.MXP - This is a Flash component file that you can install on your computer. Many components are downloadable from the Internet. If you find one, you will have to install it only once.

Creating a Slide Show in Flash

First, let's take a look at the finished product:

As you can see, this slideshow has four photos. Here's what is happening:

1) It starts out blank
2) A photo fades up
3) Displays for a brief second
4) Then fades out while the next photo fades up.

We will manually create each four steps of these fades from scratch using a mechanism in Flash called tweening. Let's take a look at the completed timeline:

Flash completed timeline

While this may look confusing a first glance, it becomes simple once we break down each element. Each bar on the timeline represents a different layer of the project. When creating animation using tweens, each layer can only have one element on it; in this case, a photograph. The dots represent keyframes, which are special frames that indicate change. In this case, these points indicate the start and end points of the fades.

Workspace

After you first launch Flash, you will be presented with a Welcome window. You are required to make a selection to begin using Flash, however you can check the box to prevent this window from opening again.

Flash introduction window

There are several options in the center column based on the type of project you wish to begin. For Flash projects, you will only want to select one of the two first choices. The biggest decision you have will be whether to create a project in ActionScript 2.0 or ActionScript 3.0.

ActionScript

ActionScript (AS) is a programming lanuage that Flash uses to create interactivity. Recently, Adobe updated the version of ActionScript to create many new features for advanced programmers. While advanced programmers have praised the new lanuage, it has become less user-friendly to beginners.

Since the two languages are incompatible — meaning projects created with ActionScript 2.0 cannot be opened in ActionScript 3.0 — Adobe has decided to keep its support for ActionScript 2.0 for the time being.

This beginning tutorial uses minimal ActionScript, so it doesn't matter which version you pick at this point. However, we will proceed by clicking ActionScript 3.0.

Workspace

After Flash launches, you should first set your workspace to the way you like it. In Flash CS4, several new workspace "presets" were created, offering traditional users a way to create environments they were more familiar with. Since we are writing this tutorial to cater to previous versions of Flash, we will use the "Classic" workspace.

Adobe Flash 8 or CS3 users should select Window --> Workspace --> Default
Adobe Flash CS4 users should click Window --> Workspace --> Classic

Setting the workspace in Adobe Flash CS4

Let's take a look at the Flash CS4 workspace.

Flash CS4 workspace

Timeline: At the top of the screen is the Timeline. It is important to note that the Timeline is a frame-based timeline, not time-based. This means each of the squares represents one-frame of time — similar to a film strip or a flip-book.

Tools: At the left of the screen are the tools. The one important thing to note here is that the black arrow tool, also known as the Selection Tool, is the primary tool to move objects around. The white arrow, known as the sub-selection tool, is used for a completely different purpose (manipulating vector graphics). You should always use the black arrow. In fact, you will only rarely use the white arrow tool.

Stage: In the middle is the white area known as the Stage. This is the main preview area where your content will be placed. Content here can change based on where you are at in the Timeline. Surrounding the white area is a gray area known as the pasteboard. You can place objects off-stage on the pasteboard, but they will not be visible viewers who visit your site. Keeping unused items in the pasteboard area will export with your final movie, possibly increasing the filesize, so it's not good practice to keep unused items in this area.

Palettes: On the right are several icons and boxes. These are all for controlling various settings for different features. You can click the icons to pull up extra windows, or drag windows around to attach them to other areas of your workspace.

Important - Expand the Library! 

In the Classic view of Flash CS4, the Library is contracted into an icon. Click on the center icon that looks like some books (see image above). You can click and drag this icon to the right so that it snaps to the properties window.

Expanding the library to the properties window

Library: The library is an important aspect of Flash. It is where all of the media that is a part of your project is stored. Any time you import media into your project, such as an image or an audio file, it will be stored in your library. Your library also acts as bin for "master copies" of media in your project. For example, let's say you have a photo in your project, and you replace the library copy of this photo (by right-clicking and selecting properties), it will automatically replace every instance of that photo throughout your whole project.

Property Inspector: Lastly is the properties window, also called the property inspector. This window will show you settings for various things in Flash. Most importantly, you should know that the properties window is a contextual window and will change based on what you click. So if you click in your Timeline, it will show you the settings for your Timeline. If you click on the Stage, it will display settings for your stage.

Flash property inspector in CS4

The properties window will display on the bottom of the screen in Flash 8 and CS3:

Flash CS3 workspace

Setting the Stage Size in Document Properties

The size of your Stage will determine the size of your Flash project when you embed it on a Web page. Figuring out what size to make your Flash project can be a tricky process, because this is something you generally don't want to set later, or else you may have to redo a lot of work. Generally, you want to mock-up your project in another program, like Photoshop, and then import the elements into Flash.

In our case, we will set the document size to the same size as the photos we will be using for the slide show; which is 400 pixels wide and 300 pixels high.

Setting the Stage size in Adobe Flash CS4

In Adobe Flash CS4, click on the Edit button in the Properties window under the Properties section. Remember, the properties window is contextual, so if you don't see this option, then click on the Stage first.

Edit button to set the Stage size in Flash CS4

In the document properties window, set the Stage size to 400 x 300 pixels, and set the framerate to 15 frames-per-second.

Setting the stage size in Flash CS4

The framerate is a value you that you can change at any time when creating your Flash project, and it won't affect anything your have already done in your project. The faster the framerate, the smoother and quicker animations will play. For our purposes, we found 15 to work well, but you can change this to 24 or 30 fps to see the differences in speed.

Setting the Stage size in Adobe Flash 8 or CS3

If you are using Adobe Flash CS3, the document properties are in a slightly different location. Click on the Stage size button in your Property Inspector bar at the bottom of your screen. Remember, you may have to click on the Stage first if this option is not present.

Button to set the stage size in Flash CS3

In the document properties, there are some additional fields. You can leave these blank for now. Filling these out would identify the Web page you embed your Flash project on in the last step; should you choose to let Flash create a Web page for you.

Document properties in Flash CS3

For this tutorial, set your stage size to 400 x 300, and the framerate to 15 fps.

Importing Images

The first step in building our slide show will be to import the images into the Flash program.

If you haven't done so already, start a new Flash project, and select ActionScript 3.0 from the Welcome window. Next save your project in a folder you can easily find.

You can download the four sample photos by right-clicking (Control-click on Mac) on the links below and saving the images to the folder where you will be working from:

Right-click here to download the sample image of some boats
Right-click here to download the sample image of a waterfall
Right-click here to download the sample image of a town
Right-click here to download the sample image of a palm tree

OR you can right-click (Control-Click on Mac) on the sample images themselves, and save them to the folder where you will be working from:

Right-click to download the sample image of boats

Right-click to download the sample image of a waterfall

Right-click to download the sample image of a town

Right-click to download the sample image of a palm

To import these images into Flash, go to the File menu and select Import --> Import to Stage.

Flash importing menu

The Import to Stage option will also place the photos in your Library. The only difference between "Import to Stage" and "Import to Libarary" is that one will also place the photos directly on your Stage.

Next, hold down the shift key and select all four of the photos so you can import them at the same time.

Select all images for import

Click import. After importing, it is really important to not click on the images on the Stage. You will only see one image, that is because they are stacked perfectly on top of each other. (Your top image may be different than the example)

All four images will have a border around them (colors may vary depending on the Flash version you are using) to indicate they are selected.

 Images imported into Flash

The next step is to align them property with the Stage. We want to make sure to get it exact, so we will use a special align option built into Flash. Click on the Window menu and select Align.

Flash align menu

The align window will appear on the right side. There are several options for aligning elements on your Stage using this window. The aligning options allow you to either align elements with each other, or in relation to the Stage. We will align these images with the Stage, so you should turn on the To Stage button at the right (see the cursor in the image). It will darken to indicate it is selected.

Align window in Adobe Flash

Next, you will want to align your images to the vertical center and horizontal center. The buttons to do this are in the middle of each of the align segments (circled in red). If some of your images did not align properly, it may have been because one of the images was accidentally de-selected. To fix this, click Ctrl-A (Command-A for Mac) to select all of the images on your Stage and press the proper align buttons again.

Flash images aligned to Stage

Once your images are property aligned to the Stage, and no white is showing, you can proceed to the next step.

Click on the Modify menu and select Timeline --> Distribute to Layers.

Distribute to layers in Flash

This will put each image on its own layer, as well as automatically name each layer based on the image name.

Layers distributed in Flash

Whenever you do a "Distribute To Layers," it will take every element currently selected on the Stage, and place it in a separate layer. If everything on the Stage is selected, then it will leave the existing layer empty. We can delete this top Layer1 since it is empty and we will not be using it. To delete it, select Layer 1 and click the trash can icon at the bottom of the timeline.

Delete a layer in Flash

Converting to Symbols

Symbols are abstract elements in Flash. The best way to describe them would be to think of them as containers. When you convert an image to a Symbol, you aren't actually converting it as much as you are placing it inside a Symbol container.

Why do you need to do this? Well, Flash doesn't really have the ability to do much with objects that are on the Stage. But, if you place an object inside of a Symbol, Flash can manipulate properties of that Symbol. For example, it can move it around the Stage, stretch it out, or change its transparency — which is the property we are going to change to make the images fade.

Grasping the concept of Symbols is not easy. It is best to work with them for a little bit, and you will quickly understand the way Symbols work. Just remember: 

When you should convert an object to a Symbol:
When you want to animate, stretch, fade, position, move, make clickable or interact with an object on your Stage.

When you do not need to convert an object to a Symbol:
When the object is static and will not change at all, like a background image or a logo.

Converting your Images to Symbols

Converting an image to a symbol is generally very easy to do, however in our case it is a little trickier since we want each of our four images to be converted to their own symbol. We will have to first hide some of the images to make sure we only convert one image at a time into a symbol.

Click the small dots under the eye icon to hide the top three layers.

Hiding layers in Flash

You will see the images on those layers disappear.

Next, and this is important, click once on the image that is showing on your stage to select it.

Under the Modify menu, select Convert To Symbol.

Convert to Symbol menu

If the option is grayed out, it means you haven't selected the image on the Stage. Click once on the image that is on the Stage first.

Type the name of the image in the symbol dialogue box, and choose Graphic for the type option.

Convert to symbol dialogue box

The registration won't really matter in this tutorial, so you can leave the upper-left box checked, and for people using CS4, the Folder option can remain Library Root.

You will know you were successful in converting the image to a symbol if you see a small circle appear in the center of the image. The border may be a different color depending on the Flash version you are using.

Seeing if convert to symbol was a success

Now hide the layer with the image you just converted to a symbol and reveal the next layer up.

Flash hiding the next layer up

Repeat the process of converting the image to a graphic symbol, naming it appropriately. Do this will all four images so that they are all symbols.

About the different types of symbols

There are three types of symbols: MovieClip, Button and Graphic. This is an introductory tutorial, so we will only be using Graphic symbols, but it is good to understand the differences between the different symbols.

A Graphic symbol is mostly used by animators. It is essentially the most basic of symbols and offers the ability to animate objects in your Flash project. It also has certain properties that allow you to see the animation play out inside the symbol as you scroll through your timeline.

A Button symbol is just what it sounds like. It is a basic symbol that allows you to create buttons with roll over effects. You can also give button symbols an instance name, which allows you to add functionality with ActionScript code.

A MovieClip is the most advanced type of symbol. It is much like a graphic symbol, except you can give it and instance name so you can manipulate it with ActionScript code -- something you cannot do with Graphic symbols. Almost all moderate to advanced projects require the use of MovieClip symbols.

Add Frames and Keyframes

Now that we have converted our images into symbols, we can now build out our timeline by adding some frames.

Click once on Frame 44 in the top layer to select it.

Selecting frame 44 in the timeline

Then, while holding down your shift key, and click once on frame 44 in the bottom layer. This will select all of the frames inbetween.

Selecting multiple frames in the Flash timeline

In the Insert menu, select Timeline --> Keyframe.

Menu to insert a keyframe in Flash

Now, select the entire column of frames on frame 10 using the same technique as you did with frame 44. Click once on the top frame of frame 10, hold down shift, then click once on the bottom.

Insert keyframes at frame 10

Insert a keyframe in column 10 as well by going to the Insert menu, and selecting Timeline --> Keyframe.

Repeat this process one more time for frame 35.

After creating all of the frames

Your timeline should look like the timeline above at this point, with keyframes (black dots) at 1, 10, 35 and 44.

What are keyframes?

Keyframes represent change in a particular layer of a timeline. If you can imagine a flip book that animates as you snap the pages with your thumb; each of those pages would be a separate keyframe in Flash, because each page is different. The gray bars simply represent time where nothing is changing.

The reason why we placed keyframes at frames 1 and 10 is this will be the space where the photos fade up. The space between frames 10 and 35 will simply display the image, and frames 35 to 44 will fade out the image.

The small white squares in the timeline are absolutely meaningless. Well, actually they represent the end of a keyframe section, but you can already tell that because there is another keyframe just after it. So just ignore the little white squares.

(Why did we choose frame 44 for the end? While it is not really necessary, it helps us keep the fade segments aligned later on in this tutorial. Because the timeline starts on frame 1 and not on frame 0, using frame 44 will match each fade as 9-frames long by the end of this project.)

Tweens and Animation

The next step for us will be tweening the animation of the photos fading up and fading out.

If you may have wondered why all of the layers and keyframes are stacked perfectly on top of each other at this point, it is because we are taking a bit of a shortcut by creating all of the keyframes and tweens first, then we will move each piece of the timeline to cascade it out in the last step.

Setting the Alpha (transparency) of the images for the fades

To make the fades, we must first set the transparency to invisible in the first and last frames of our timeline.

To do this, first select all of the keyframes in frame 1 of your timeline using the same method as the last page. Need a refresher? First click on the top keyframe, hold down shift, then click on the bottom keyframe.

Selecting the column frame 1 in Flash

Next, and this is important, click once on the image showing on the stage (maybe different than the example):

Click on image in Flash

The reason why we click on the image is to change the options offered to us in the Properties Window. Without clicking on the image, the properties window would only display options for the timeline, not the object on the Stage.

For Flash CS4: In the Properties Window, find the section for Color Effect, and set the style property to Alpha.

Setting the alpha setting in the properties window

Alpha refers to the amount of transparency of the symbols currently selected (which is all of them). Move the slider to set the Alpha to zero, meaning completely invisible.

Setting Alpha to zero

For Flash 8 and CS3: In the Property inspector at the bottom of the screen, set the Color setting to Alpha.

Setting Alpha in Flash CS3

Alpha refers to the amount of transparency of the symbols currently selected (which is all of them). Move the slider to set the Alpha to zero, meaning completely invisible.

Setting the alpha to zero in Flash cs3

All versions: What we have done is set all of the symbols to be invisible in that first keyframe. Since Flash cannot adjust the transparency of images alone, we had to convert them to symbols in order to do this. We selected all of the keyframes in the timeline, thus selecting all of the symbol in that first keyframe at once.

Next, we are going to these steps, but with the last keyframe — frame 44.

Highlight frame 44 in all layers.

Selecting frame 44 in all layers

Click once on the image that is displayed on the Stage.

Then set the Alpha to zero in the properties window.

One you have set the last set of keyframes to 44, you have completed setting the in-and-out points of the fades. If you click on the red playhead (click up where the frame numbers are) and drag it back and forth through your project, you will see the images disappear and reappear in the proper keyframes.

Understanding which keyframes are set to zero

Tweening the animation of the fades

A tween refers to "animation" in Flash. We have the alpha set on the correct keyframes, but now we need to actually see the gradation of invisible to visible of the photos.

A tween in Flash works like this: It analyzes two keyframes, sees how they are different from each other, then it will automatically animate the frames in-between the two keyframes. The term "Tween" is a throwback to the days of animation when in-betweeners would do the grunt work of animating the motion. Now Flash does that job.

Click and select all of the keyframes on frame 1.

Selecting the column frame 1 in Flash

For Adobe Flash CS4: Click on the Insert menu and select Classic Tween.

Inserting a classic tween in Flash CS4

For Adobe Flash 8 and CS3: In the property inspector at the bottom of the screen, set the Tween option to Motion.

Setting a Tween in Flash CS3 or Flash 8

For all versions: A line with an arrow will appear from one keyframe to the next. This line represents the fade animation. If you drag the red playhead back-and-forth over this section, you will see all of the photos fade up together.

Now follow the same steps in creating a tween for FRAME 35. You do not want to create a tween on the last frame, but rather on 35. This is because we want the animation to go from visible (frame 35) to invisible (frame 44).

Tweens in the main Flash timeline

Your timeline show look like the one above.

Understanding Tweens and Classic Tweens

Back in the days of early animation, a lead artist would draw only very few frames of the cartoon characters in a film or show. These drawing were called the key frames, thus the term. Then these keyframes were handed to an apprentice called an in-betweener or tweener for short. The apprentices would build their skills by drawing all of the in-between frames to imitate the appearance of motion.

Flash works much the same way. It started out as an animation program and it works by taking the various keyframes you've added tweens to and comparing them. If it sees one frame as having an alpha at 100% and another with an alpha at 0%, it will animate that transition by filling in all of the frames in-between.

It will also consider motion, as in the example below:

In Adobe Flash CS4, a new easier type of Motion Tween was created that allows you to animate without having to insert keyframe first. Instead, you create the tween first and then as you manipulate the animation, keyframes are automatically added by Flash depending on where the playhead is at in the timeline.

We elected to not show this new method of tweening, thus keeping this tutorial compatible with older versions of Flash. Adobe has preserved the old way of making tweens by calling them Classic Tweens.

A shape tween is an animation applied to vector graphics that are drawn in Flash (or another vector-based program). You cannot apply a shape tween to images or symbols.

A motion tween is an animation applied to a symbol. You can put just about anything inside a symbol: a graphic, an image or even a video.

Cascading the Layers

Now that the animation is complete, the last step is to position the frames so that they play one after the other.

Click once on the first keyframe in the second layer.

Selecting the second layer in the first frame

Hold down the shift key, and select frame 44 in the last layer.

Hold shift and select frame 44 in the last layer

By doing this, you will have highlighted the lower three layers. Now click on the selection and drag it to the right until you reach frame 35, overlapping with the last tween segment. Careful, if you click and hold down too long without moving the mouse arrow, a contextual menu will pop up.

Dragging frame to the right

Be sure you are not placing the frame end-to-end, or moving them up or down. Remember, if you mess up, just press Ctrl-Z (Command-z for Mac) a few times to undo.

After dragging frame to the right

Compare your timeline with the image above. (We've deselected the frames to see them better). Make sure you have overlapped the tweened regions. This will create a crossfade, so as one image fades out, the next one begins to fade in.

Now repeat the following steps with the other layers, to cascade them out like stairs. You will highlight the two lower layers and drag them to the right, making sure to overlap the tweened regions.

Highlight the lower two layers and repeat

By the time you have dragged all of the layers out, your timeline should be cascaded out as so.

A completed timeline for a photo slideshow

To test your project, click Ctrl-Enter (PC) or Command-Return (Mac).

Analyze the slideshow above and compare it with your own. You can play with the framerate to see how it affects the speed and smoothness of your slideshow.

If you want to adjust your slideshow, you will have make adjustments to keep all of the photos in sync. This is why it is a good idea to plan out your project early.

Flash is not the best program to use to create a slideshow. We recommend using SoundSlides (view our tutorial). However, we teach people to use Flash in this way because we have found it is a great introduction to the concepts behind the Flash program, such as keyframes, tweens and symbols.

We offer a slightly more advanced tutorial on building your own Flash template, complete with buttons and media:

Tutorial on Building Your Own Flash Template.

Adding Text to a Slideshow

We have added a few sections on some other things you can do in your slideshow. This section will cover adding text, which is very similar to the process you went through in adding an image.

Look at the example below to see how we are going to add some text to your slideshow.

As you can see, the text "My Vacation" fades in a moment after the first image, and fades out at the same time as the first image. Take a look at what the completed timeline looks like:

Completed timeline with slideshow and text

You will see the addition of a text layer and the tween fading up the text just after the initial image fades up.

Adding a layer and a text box

Click on the top layer of your project to highlight it. Then add a new layer by clicking on the small new layer button just below the timeline on the left. (Make sure the new layer is at the very top. If it's not, you can drag it to the top by clicking on the small page-flip icon by the layer name)

Adding a layer in Flash

The new layer will automatically be given a name, in my case it was "Layer 6." Double-click on this layer name and rename it to "text."

Naming a layer in Flash

It is important to always name your layers something relevant, otherwise it will become very difficult to tell what is on a layer without these indicators.

Next, lock all of the layers except for your text layer. When you lock a layer, it prevents you from accidentally clicking on it or changing it (or in our case, messing it up).

Locking the other layers in Flash

Next, move your playhead to the first frame. The Stage will appear white at this point, since the first image is invisible. Click on the Text Tool in your tool palette and draw a text box on the Stage.

Drawing a text box on the Stage

Type in the words "My Vacation" or any other title for your project. Don't worry about the font size at this point, we will adjust that next.

For Flash 8 or CS3: You will have to highlight the text first. This isn't necessary in CS4.

Highlight text in Flash

 In the Properties Window, you can adjust the font size and all of the other text formatting options.

Formatting text in Flash

For the purposes of this tutorial, we recommend setting the font to Verdana, the Style to Italic, the font size to 24 point, and aligning the paragraph to the center. (These options are in the property inspector at the bottom of the screen in Flash CS3)

After you have formatted your text to the way you like it, you now need to convert it to a graphic symbol. But first, to do this, you must switch your tool to the black arrow Selection Tool.

Choosing the selection tool in Flash

It is a common mistake to forget to switch back to the selection tool. You cannot select items on the stage unless you are using the Selection Tool, so it is a good habit to switch back to the Selection Tool after each tool you use.

Select your text box with the black arrow, then choose Modify --> Convert To Symbol. (Remember, any object you want to fade, move, or animate, you will need to convert it to a symbol)

Convert Text to a symbol

Now, insert keyframes on the text layer at frames 12, 20, 35 and 44. You will have to do this one at a time by selecting the frame, and choosing the Insert menu and selecting Timeline --> Keyframe.

Inserting keyframe into the text layer

The keyframes at 12 and 20 will be the text fading in, and the keyframes at 35 and 44 will be the text fading out.

Click on the first keyframe, and then click on the text box on your Stage (remember, you have to click on the object on the stage to change the menu in the property window). Change the Alpha to 0%.

Change the the text symbol in frame 12 to Alpha 0% following the steps above. And lastly, change the text to Alpha 0% in frame 44.

Next, select frame 12 and Insert --> Classic Tween (Flash CS4) or choose Motion Tween in the property inspector (Flash 8 or CS3). Follow this same step to add a tween to keyframe 35.

Your timeline should appear like the following image.

Flash text timeline done

Add Audio to a Slide Show

In Two Easy Steps

Flash can import .aif, .wav, or mp3 digital audio files. Flash can do some editing, but it's best if you've edited the audio in Pro Tools or some other audio editing program before importing it. You can do some basic audio editing in iMovie and export the files as .aif files.

If you import a large audio file, only use part of it and mute the rest, the exported Flash movie will still contain the entire audio file that you put there. That will make your exported Flash movie huge. Since you'll sometimes use sound from a video-editing program like Adobe Premiere, iMovie, or Final Cut Pro, you can export only the audio from those files, and import them into Flash.

In this step, you'll learn how to import an audio file and do simple editing.

Import Audio

  1. Find a 10-second audio file.

  2. Open a new Flash file.

  3. From the menu, choose File > Import to Library. Find your audio file and click OK.

  4. Add a new layer under your Actionstop layer. [It's usually best to put your audio files at the top of the stack of layers.] Name it Asound_ or whatever suits the audio file you chosen.

  5. Highlight Frame 1, and drag the .aif file onto the Stage or into the frame. The audio pattern will show up as a long waveform in the A_sound layer.



  1. In this layer, put key frames at the beginning and end of the audio file. In this case, there's already a keyframe in Frame 1, so put a key frame at around 147 seconds.

  2. In the Property Inspector, note that when the A_sound layer is selected, the name of the audio file appears in the Sound box. Make sure that "stream" is selected in the Sync box. For sounds that play throughout a Flash movie that will appear on the Web, select stream. [Event sounds are usually short and accompany a button.] The file begins streaming right away instead of having to download completely before starting. Note also, at the bottom of the Property Inspector details about the audio file: It's 22 kHz Mono 16 Bit 9.3 s 412.2 kB. [s = seconds, and the last number is the file size]

Edit Audio

  1. With the Asound layer selected, go into the Property Inspector and take a look at Effect. Fade Left to Right means that the sounds seems to move from the left to the right speaker; Fade Right to Left, the opposite. We're going to customize this audio, so select Custom. You can also click on Edit next to the Effect drop-down menu. The audio wave forms pop up in a separate window.

  2. At the bottom right, near the Help button, are four symbols. The first two are zoom in and zoom out. The second two provide two different ways of looking at the waveform -- seconds or frames. Choose the frames button. The numbers in between the two waveforms will change.

  3. You're going to change the volume of the audio so that, at about two seconds in, it decreases. It stays at decreased volume for a couple of seconds, and then increases until about two seconds from the end, where it begins to fade out. So, first scroll until you see frame 30.

  4. At Frame 30, click on the thin straight line at the top of top waveform. An empty square box will appear on the lines in both waveforms.

  5. At Frame 32, click on the thin straight line again until a box appears, and drag it down below the top waveform. Because this is stereo, you'll have to do the same for the bottom waveform. [If you didn't click on Frame 32, you'd have a gradual fade out from the beginning of the audio file to this point. Setting markers on Frame 32 decreases the audio volume over two frames.




  1. At Frame 60, click on one of the thin lines until boxes appear on both lines.

  2. At Frame 62, click on the top thin line until the box appears and drag the line back up to the top. Test the audio changes by hitting the arrow at the lower left corner of the audio edit window.

  3. At Frame 115, click on the top thin line until boxes appear on both wave-form audio volume lines.

  4. At Frame 117, click on the top thin line until a box appears, and drag it down to the bottom of the wave form. Do the same for the other wave form.

  5. Test the changes by hitting the arrow button. If they're OK, close the window, click on Control > Rewind if the red bar isn't at Frame 1, and check out how the audio works with the images. Save your file.

  6. Note: You can only put in eight of these boxes, or audio changes. So, if you want more, it's best to edit the file in Pro Tools or some other audio editing file before importing it into Flash.

Important Note: If you have a human voice in your Flash movie, when you export it, do the following: In the Export Flash Player window that pops up after you choose Export, find Audio Stream. There's a small "Set" button to the right of the export details. Click on it, and a Sound Settings window pops up. In the Bit Rate pull-down menu, choose 24 or 32 kbps. If you use the regular settings, the voices will come out tinny and weak. This increases your file size a tiny bit.

The same improvement can be obtained by selecting "Speech" from the Compression drop-down menu. But this increases the file size more.

Exporting your Flash SWF file

In order to include your Flash project in a web page, the first step is to export your project from Flash as a ".swf" file, (pronounced "swif"). Remember, Flash uses ".fla" file extension for the files that you actually build in Flash, while SWF is the file format that is exported from Flash and ultimately embedded on a web page. The SWF file is a locked file, and cannot be used to edit a Flash project.

Exporting SWF from Flash

To export your SWF from Flash, pull down the File menu and select publish settings. These are the settings for the file you are about to export. At the top of the publish settings window are three tabs: Formats, Flash and HTML.

The Formats Tab

Flash export window showing formats.

Under the Formats tab, there are a series of check boxes that specify what files will be published when you click the publish button. Generally, you always want to export a SWF file, but you also have the option to export an ".html" web page file as well. The HTML button is selected by default, and with both of these selected, Flash will automatically build a plain HTML web page file with your Flash project (SWF) embedded on the page when you click Publish.

The Flash Tab

Flash export window showing Flash settings

In the Flash tab, there are various settings related to how Flash will export your SWF file.

  • Version: The version is an important setting. This will determine the version of Flash the user must have in order to view your project. See the latest penetration statistics to find out how many people are using a particular version of Flash.
  • Load Order: This will determine which layers Flash loads first. This usually is only apparent to users with very slow connections. The default is bottom first, so that elements like buttons are loaded before the ActionScript (which is traditionally on the top layer).
  • ActionScript Version: Specifies the version of ActionScript you have used in your project.
  • Generate size report: This will generate a report displaying the amount of data your in your exported SWF file.
  • Protect from import: This further locks your SWF and helps to prevent others from easily converting your SWF back into an FLA document using a password. However, this is not 100% secure, and there are a host of third-party programs that have cracked this security. Use this only as a deterrent if the code or copyright is important to encrypt.
  • Omit trace actions: Trace code in your ActionScript will be ignored if this is selected. Usually this only appears when viewing SWFs from Flash.
  • Permit debugging: Allows you to debug your SWF file using the built-in Flash debugger, even after you have published your SWF to the Web. Also allows you to password protect your SWF.
  • Compress movie: Compresses the SWF file to a smaller filesize. Mostly this is beneficial for text or ActionScript-intensive projects.
  • Optimize for Flash Player 6: (off by default) If you've selected Flash Player 6 as the version, this further specifies which release version of Flash Player 6 to use. Check to include optimizations that were updated in Flash Player 6 that allowed improved performance.
  • Export hidden layers: This exports all hidden layers in a Flash document (selected by default). If this is not selected, Flash will not export any layers that are marked as hidden in Flash (even ones that are inside MovieClips). This could be used as a tool to aid in testing different versions by marking some layers visible.
  • Export SWC: This will export a .swc file which is used in distributing components.
  • JPEG quality: Slider that will determine the quality of jpeg images in your project.
  • Audio Stream: Set the quality (sample rate and compression) for stream sounds in the SWF file (only if the Override Sound Settings checkbox is selected.) Streaming sounds load progressively and are synced with the timeline.
  • Audio Event: Set the quality of event sounds. Event sounds do not play until loaded completely, and play independently from the timeline.
  • Override sound settings: If checked, compression settings made to individual files is overridden by the setting here. If not checked, Flash will look at all individual settings, and use the highest quality compression it finds and apply it to all stream sounds in the SWF.
  • Export device sounds: Select this to export sounds suitable for devices like mobile devices.
  • Local playback security: Allows published SWF files local security access, and allows the SWF to access local files or over a network if played locally.

The HTML tab

Flash export window showing html.

This tab displays the settings for the HTML file that is published, when the export HTML option is selected.

  • Template: This determines the HTML template to be used when exporting. You can create your own templates or used the built-in Flash Only template.
  • Detect Flash Version: If selected, this will add some javascript to your web page to detect the Flash version the user is currently using, and issue a warning if they are not using a version equal to, or greater than the version you are exporting.
  • Dimensions: The dimensions of the Flash projects when embedded in the Web page.
  • Paused at start: Prevents the SWF from playing until an ActionScript starts the timeline.
  • Display Menu: Shows a menu when users right-click (PC) or control-click (MAC).
  • Loop: Repeats the timeline when the SWF reaches the end. This is the default behavior.
  • Device Font: Will substitute anti-aliased system fonts for fonts not installed on the user's computer (only with Windows). Selecting this will make smaller fonts clearer on Windows computers, but could vary from PC and Mac computers.
  • Quality: Determine the trade off between playback speed and appearance.
  • Window Mode: Specify the relationship of the bounding box Flash is embedded in, and the rest of the HTML page. Window and Opaque Windowless are both opaque, but Window uses the HTML background color, while Opaque Windowless lets HTML content render above the Flash content. Transparent Windowless sets the background of Flash to transparent allowing HTML content to appear above and below the content.
  • Alignment: Sets the alignment of the Flash project as it is embedded in the page.
  • Scale: Specifies the boundaries of the Flash project, and how it relates to the rest of the HTML page.
  • Flash alignment: If the embedded Flash content is cropped, this setting will specify from what sides the cropping will occur.

Inserting Flash into a web page

There are many ways to insert your Flash project into a web page. This page will cover several different methods, including using the Adobe Dreamweaver program, or doing it manually by writing out the code.

Inserting Flash into a Dreamweaver page

Inserting Flash into Dreamweaver is a pretty straightforward process. Within Dreamweaver, pull down the Insert menu and select Media, then select Flash.

menu for inserting Flash in Dreamweaver

Dreamweaver will present you with an accessibility box. Use the title field to describe your project.

Accessibility dialogue box

Inserting Flash into web pages manually with code

There are times, particularly when using a content management system, where you will have to insert some Flash media into a web page by typing out the code manually. To insert Flash onto a web page or content management system manually, you must first upload your SWF file to a web server using a protocol called FTP or through an upload form on your content management system.

Once you have the URL to your SWF file on the web, you can use the code samples below, simply swapping out somefilename.swf for your own URL, and change the width and height to the dimensions of your own Flash project. The code below can appear complex, but works for all Flash content. Here is the gist of the code:

<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

This block of code uses two primary tags. The <object> tag, and the <embed> tag. The <object> tag is the web standard for embedding content on to a web page, but the <embed> is a carry over from the days of the Netscape browser, and is not actually a valid tag in web standards. However, it is still widely used today to embed Flash content due to its wide compatibility with multiple browsers. Many popular sites like YouTube still offer embed code follows the above format.

Embedding Flash media so it validates

A much better alternative, that is standards compliant, is to include what are called comment tags that are used by Internet Explorer browsers. This method is a pseudo hack, but conforms to the W3 standard and helps to achieve a standardization across the World Wide Web.

<!--[if !IE]> -->
  <object type="application/x-shockwave-flash" data="somefilename.swf" 
width="300" height="200">
<!-- <![endif]-->
<!--[if IE]>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
width="300" height="200">
    <param name="movie" value="somefilename.swf" />
<!-->
  </object>
<!-- <![endif]-->

Note that in each of these examples, there are two locations you must swap out with the URL to your flash file. Also, don't forget to set the correct width and height (there are two locations in each of the examples above). You can also create your own web standards embed code using the Validifier Online Tool.

A third method for embedding Flash content is to use some JavaScript programming code to embed Flash content. This is generally seen as the best method, as it circumvents lots of issues and bugs with embedding Flash across multiple browsers; such as the notorious click-to-activate security features in some Internet Explorer browsers that forces the user to click on the Flash content to activate it before they can interact with it. Often, this method is not possible to do within a content management system by a user, unless the feature is built into the CMS. The code to do this is beyond the scope of this tutorial, but the more popular tools to do this is called SwfObject.

Check out this great article from A List Apart about embedding Flash while Supporting Web Standards.

Timeline in Action Script

In Three (or Four) Easy Steps

In this tutorial, you'll learn how to make a simple timeline in ActionScript 2.0 -- a line with a series of buttons labeled with numerical dates that you roll over to reveal text.

Make the Base Layer
1. Open a new Flash file, make it 600 x 400 pixels, with a white background, and make sure the Library and Info windows are open. Name this new file "Line".

  1. Choose Insert > New Symbol, name it "timeline" and choose "Graphic" as the symbol type. Click OK.

  2. Select the rectangle tool and draw a red (stroke and fill) rectangle 600 pixels wide and 10 pixels high. (Just slap a rectangle on the screen, then choose the arrow tool, click on the rectangle twice to select the fill and stroke, then size it in the Info box.)

  3. Choose the text tool, change fill and stroke to black, and type these four dates across the bottom of the line: 1700, 1900, 1915, 1995. Space them equidistant from each other.

  4. Go back into Scene 1, drag the "timeline" symbol onto the Stage, center it, and name its layer "line".

Make the Buttons
6. Now, choose Insert > New Symbol. Name it "yelbutton" and choose "Button" as the symbol type. Click OK. In Layer 1 of the Flash Timeline, the "Up", "Over", "Down", and"Hit" frames appear.

  1. In the toolbar, change the fill color to a yellow, and using the circle tool, draw a circle. (Just slap a circle on the screen, then choose the arrow tool, click on the circle twice to select the fill and stroke, then size it to be 20 pixels in diameter in the info box.)

  2. Then, insert keyframes in "Over", "Down", "Hit" - the easiest way is to drag the mouse or shift-click across all three to select them, then hold the mouse down until a menu appears and choose Convert to Keyframes. Or, select all three frames and choose Modify > Timeline > Convert to Keyframes. The circle is repeated in all the keyframes.

Put the Buttons on the Line
9. Above the Stage, click on Scene 1 to leave symbol-editing mode.

  1. Add five more layers, and name them "1700", "1900", "1915","1995", and "actions".

  2. Highlight the "line" layer. Drag the yellow button symbol from the Library onto the Stage, and, above "1700", put it on top of the red line.

  3. Repeat three more times, putting a yellow marker over each date.

Tell the First Button What to Do
13. Select the "line" layer. Click on the red scrubber bar that's sitting over Frame 1. Then go to the Stage and select the 1700 button. A blue square will appear around the button. In the Properties Inspector, name the instance of that button "my1700_btn".

  1. From the Window menu, open the Actions menu. At the top of the window, you should see "Actions for my1700_btn (yelbutton)". This means that you're going to assign some actions to the 1700 instance of the symbol yelbutton.

  2. Then go to Actions > Movie Control and double-click "on". In the Parameters box, deselect "Release". Select "Roll Over". The script changes to "on (Rollover)" in the scripting pane (bottom right).

  3. In Actions>Timeline Control, double-click "goto". In the Parameters window, change the "Go to and Play" button to the "Go to and Stop" button. (You really, really, really don't want Flash to play - you want it to go to a particular frame, which it will play, and screech to a halt.) Change the frame number in the Frame drop-down window to "2".

  4. Click on number 3 in the scripting panel. (If you don't see numbers in the scripting pane, click on the boxed arrow above the pane on the right, and select "view line numbers".) Still in Actions>Timeline Control, double-click "on", deselect "Roll Over", and select "Roll Out".

  5. Still in Actions > Timeline Control, double-click "goto", select the "Go to and Stop" button, and leave the Frame number at Frame 1. What you've told Flash to do is when you roll over the yellow button named 1700, go to Frame 2. And when you roll off the yellow button named 1700, go back to Frame 1. The reason you're doing this will become clear in a moment.

Tell the Second Button What to Do
19. Go back to the Stage and click on the 1900 button. In the Properties Inspector, name the instance of that button "my1900_btn".

  1. In the Actions window, double-click "on" in Actions > Movie Control. Deselect "Release" and select "Roll Over". The script changes to "on (Rollover)" in the scripting window.

  2. Double-click "goto". In the Parameters window, change from the "Go to and Play" button to the "Go to and Stop" button. Change the frame number in the Frame drop-down window to "3".

  3. Double-click "on", deselect "Release", and select "Roll Out". Double-click "goto", select the "Go to and Stop" button, and leave the Frame number at Frame 1.

Tell the Last Two Buttons What to Do
23. Repeat steps 17, 18, 19, and 20 for the 1915 and 1995 buttons, but make sure you name their instances in the Property Inspector, and make sure you change the frame number in the first "goto" script to Frame "4" for 1915 and "5" for 1995.

Extend the Base Layer to Frame 20
24. Still in the "line" layer, insert a keyframe in Frame 20. Now all the frames between one and 20 are the same.

Test the Buttons, Stop the Movie at One
25. Save the movie. You can do a simple test to see if your buttons are active by choosing Control > Enable Simple Buttons, and moving your mouse over the yellow buttons. The hand will appear. But you're not finished yet. Before moving on to the next step, deselect Control > Enable Simple Buttons. (Those hands just get in the way.)

  1. In the "actions" layer, click on Frame 1, and in the Actions panel, choose Actions > Movie Control, and then double-click on "stop". A small "a" appears in Frame 1. This tells Flash to stop on Frame 1 as soon as it starts, rather than continue playing all the frames.

Put Text with Each Button
27. Click on layer "1700" and insert a blank keyframe in Frame 2. In the toolbar, select the text-editing tool ("A") and on the Stage, above the 1700 button, type "16K to 20K sea otters in California". In the toolbar, select the arrow tool to position it above the 1700 button.

  1. Click on layer "1900" and insert a blank keyframe in Frame 3. In the toolbar, select the text-editing tool and on the Stage, above the 1900 button, type "California sea otters though to be extinct". In the toolbar, select the arrow tool to position it above the 1900 button.

  2. Click on layer "1915" and insert a blank keyframe in Frame 4. In the toolbar, select the text-editing tool and on the Stage, above the 1915 button, type "50 sea otters found in Big Sur, CA". In the toolbar, select the arrow tool to position it above the 1915 button.

  3. Click on layer "1995" and insert a blank keyframe in Frame 5. In the toolbar, select the text-editing tool and on the Stage, above the 1995 button, type "Sea otters hit 2,300, start slow decline". In the toolbar, select the arrow tool to position it above the 1995 button.

  4. Save the movie. Now test it by choosing, from the Flash menu, Control > Enable Simple Buttons and Control > Test Movie. An export window will appear and disappear when the export is finished, and a new window will pop up.

  5. At the top of this new window is the file name, with attached swf. From View, choose "Bandwidth Profiler", which adds a pane at the top about the file, such as the dimensions, frame rate, size, etc. In the pane at the bottom is your timeline. You can mouse over the dates to see the text appear and disappear as you scripted.

Extra Info: Link a Button to a URL:
1. Create a button symbol, drag an instance from the library to the Stage and give it a name in the Property Inspector.

  1. Select the layer you've put the button into, then select the first frame of the main Timeline, and open the Actions panel.

  2. Choose Objects > Movie > Button > Events > onRelease.

  3. In the Object field, enter the name of the button symbol. The onRelease event handler for the button is created.

  4. Choose Actions > Browser/Network > get URL. The getURL action is added to the onRelease event handler.

  5. In the URL field, enter the full address of a Web site.

  6. Leave the Expression checkbox unchecked.

  7. Export your Flash movie in Flash and html, and play it in either Flash Player or a browser. From the Flash player, a separate window opens for the url. In Dreamweaver, when you click the button you created, the Web site loads in the same window as your Flash movie. Click the back button in your browser to return to your Flash movie.

[From Macromedia Flash MX Advanced, by Russell Chun, pp. 192-193.]

Sample Media

This page includes sample images, audio, and video you can use to start working with Flash. It also includes some sample .FLA files you can use to see how a working version of the tutorial is constructed.

Sample Images

First, you need images to create a Flash movie. For this tutorial, you're going to create a slide show with at least four jpg images.

If you don't already have four jpg images to use for the slide show, click on each of the images below and drag them to your desktop. (With a double-click mouse you can also right click on the image and save it to your computer.)

Sample Audio/Video

You'll also need some audio and video to work with. Here are a QuickTime movie and an audio file to download. Tip: To prevent these from playing in your web browser, you'll want to explicitly download them. You can do this by right-clicking the files (Mac: Ctrl-click) and choosing "Save Linked File As..." from the context menu.

Download shark movie
Download cricket audio

Sample Flash Files

The downloadable .fla files below can be used to follow along with the preceding tutorial. But you should use these as a reference, not as a substitute for creating the .fla files yourself.

Download slide show (.fla file)
Download photos with text (.fla file)
Download photos with text and audio (.fla file)
Download photos with text, audio and video (.fla file)

Timeline sample (.fla file)

Related Links

Flash for Beginners

About this Tutorial

This tutorial was originally co-written by J-School graduate Tim Gnatek and Multimedia instructor Jane Stevens, with input from Flash instructor Russell Chun and webmaster Scot Hacker.

It was completely re-written and updated by Jeremy Rue.