Knight Digital Media Center Multimedia Training

Tutorial: Building Flash Templates

By Jeremy Rue

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

Introduction

Flash templates provided by Jane Stevens, Val Krist and the staff of the Ventura County Star. 

Adobe Flash is a program used to display rich interactive animation and multimedia content on the Web.

One of the main advantages of Flash is that it stores all of the information in a single file that can be easily integrated with most Content Management Systems. Flash is great for showcasing various pieces of media in a dynamic way that can be completely controlled by the author. However, it should be noted that Flash is not a method to replace HTML Web pages. While Flash opens up certain capabilities, its nature of being a single locked file prevents a flash project's text from being read by some search engines, screen readers for the blind and archiving Web services that cache Web pages. Use Flash only as a way to display media in a self-contained "shell," knowing that the surrounding HTML will complement it.

This tutorial will go through the process of constructing a simple flash template with three buttons. Each button will take you to a different section of the project that will showcase your videos, photo slideshows or Google map mashup.

This is a sample of the end product this tutorial will show you how to create:

This tutorial was written for people using either Flash 8 or Flash CS3, under the ActionScript 2.0 language.

Introduction to Flash

Understanding File Types

There are three types of files you will generally encounter when working with Flash:

Working with Flash Layout

At first appearance, the Flash environment looks to be a cross between Photoshop and Premiere. You will see a timeline at the top of your screen, and there is a white "stage" area in the middle where the work is displayed. While Flash may appear similar to both programs, it is a mistake to think that Flash works like either of the previous two programs mentioned.

The biggest difference is that Flash is a "frame-based" program, so the timeline does not represent actual time, rather each square represents an individual frame that can be manipulated. Flash originally began as an animation program, but has evolved to support displaying interactive graphics and rich media in the form of audio, video, graphics and text.

Timeline

Timeline in Flash

The timeline is a very unique convention in Flash. Working in the timeline can be tricky to a first-time user. Taking a moment to understand how the timeline works will save a lot of trouble in the long run.

Selecting (highlighting) frames on the timeline is tricky. You can click and drag to highlight frames, but once frames are highlighted, you are forced to drag them on the second click. You can de-select them by clicking elsewhere if you want to redo your selection. The easiest way for first-time users to highlight frames is to hold the shift key and click all the frames you want to select.

Library

Library in Flash

It's best to think of the Library as a bin that holds all of your media. Anything you import into Flash will automatically be displayed in the Library. You can click and drag things out of the Library and onto the stage.

Later, we'll talk about symbols, which are master copies of special containers. They also show up in the Library for easy access.

Property Inspector

Property inspector in Flash

One of the staples of the Flash program is the property inspector. This panel is contextual, which means the options on this window pane will change depending on what you last clicked on.

For example: To see properties for the timeline, click on the timeline. To see and adjust the properties of an object on the stage, click on that object and the property inspector window will change to reflect the settings related to that clicked object.

Setting up a Flash project

In this tutorial, you will be guided through all of the steps to create a simple Flash template that consists of three sections. It's important to understand that Flash should be used as a publishing tool, not an editing one. This means, building your project in Flash should be the last step in the multimedia creation process.

1. Setting image sizes

Before you begin building a project in Flash, you want to make sure you have correctly sized all of your images in Photoshop before you import them.

Don't resize images in Flash because it may cause images to appear jagged or distorted, similarly to how an image might appear if it is resized on a Web page. This requires you to know how your Flash project will appear before you start building it. Generally people first build comps or mockups in Photoshop to size images and understand the size relationships between the different elements.

In our tutorial sample media, we have already gone through the process of correctly sizing all of the images to match the output.

2. Setting the Stage

First, click anywhere in the stage to bring up the stage properties in your property inspector pane. Click on the "size" option, and this will allow you to set the document size and background color, among other things. Make your project 600 x 400 pixels, the same size as our background image.
 Setting the Stage in Flash
In most cases, you will check with the Web team first to see how large to publish your Flash project. You should decide this before building your project.

3. Importing your photos

To import your photos, simply go to the File menu and click "Import -> Import to Library"
You can pick multiple photos to import at the same time by holding down the shift key and selecting multiple photos. Go ahead and import all of the photos from the images folder in our tutorial sample.

Creating a Background

4. Create your background

Having a background image or graphic is a very popular style in Flash multimedia projects. In this step, drag the background.jpg image to your stage.

To align your image with the stage, open the "align" pane under the window menu.

Aligning to Stage in Flash

To align, you must first set the To stage: option to "on," then click the buttons to align to the left edge of the stage and the top edge of the stage.

Next, double click on name of the layer up in the timeline and name it to "background." You might have noticed that the keyframe on this sole layer has now turned black to indicate that there is something on that keyframe. Next, click the little page icon to create a new layer, which is where we will put our title.

Creating a new layer in Flash
Name the new layer "title." (Important! After you create the title layer, LOCK your background layer. Why? Accidentally placing content on the wrong layer is very easy to do in Flash. Lock your layers when you’re not using them to prevent you from accidentally selecting them or putting content on them.)

5. Creating a graphical title for your project

You want the title to be attractive and easily descriptive. Titles are typically not as long as headlines in a newspaper, but serve a very similar purpose. You can also rely on subtext to describe your project in greater detail.

Use the text tool to draw a box on your stage. And type in "Disappearing in Darfur."

Text tool in Flash

When you click on the text tool, you might have noticed your properties box has changed to show you all of the options related to text. Here you can change the color of your text, the font, and the style.

Text properties in Flash

You want to make sure you are using Static Text (like it sounds, it's text that never changes). This is the most common form of text you will use for titles, captions, or text that is "static" and unchanging.

(Fonts: Unlike Web design, you are free to use ANY font you want. Flash converts all fonts into something called "vector outlines" so go wild! But follow standard graphic design principles. Weird or crazy fonts are best for titles and simple easy to read fonts are best for blocks of text.)

6. Adding Filter Effects to your Text

You can add effects, such as drop shadows, to your text by clicking on the filters tab in your property inspector:

Adding filters to text in Flash

Press the small plus symbol "+" and choose "Drop Shadow" from the pull down menu.

Here you can adjust all of the settings for the drop shadow, including the amount of blur, the angle of the shadow, and the distance from the text.

Sample project with drop shadow text

(Note on Quality: Most filters have quality settings. Setting them to the highest quality seems like the natural thing to do, but doing so can make your project very "process intensive" which means older or slower computers might struggle to display these graphics. Generally this not an issue unless you have several filters (10 to 100) running at the same time on different pieces of text. In these situations, you should consider using a lower quality filter.)

Inserting buttons into Flash

7. Inserting Buttons

Create a new layer and call it "buttons." Remember to lock your title layer, as we won’t be using it again.

(Putting everything on its own layer not only helps to organize your project, it also makes it possible to find and select things. Having too many elements on one layer makes it difficult to find or select objects when they overlap each other.)


Now grab each of the button1_up.jpg, button2_up.jpg, button3_up.jpg and drag them to the right side of the stage one at a time, so they are stacked vertically.

You can space the images out evenly by selecting all of them and using the align pane. This time we are not aligning them to the stage but, rather, to each other. So we turn off the To stage: option.

Align with no to stage option

You can use the middle Distribute option or the left Space button to space out the three buttons. You can also align each button to their left or right edge. In order for this to work, all three buttons have to be selected (you will see a grey strip surrounding them).

Sample with button images

The next step is to convert the three images into button symbols.

8. Converting to Symbols

The idea of "symbols" is by far the most confusing part in the process of learning Flash. It is best to think of symbols as containers that hold things. In this tutorial, we will primarily be using the button symbol.

Click on only ONE of your three button images, making sure only one is selected. Then in the top menu click on Modify then choose Convert To Symbol.

Don’t be fooled, this wording is a little deceptive. You are not actually converting the image into a symbol, rather you are placing it inside a symbol container.

converting to symbols in Flash

Choose button for the symbol type, and give your symbol a relevant name. This name is for your reference only.

You might have noticed a new addition to your Library: the button symbol you just created. It might seem redundant to keep the button1_up.jpg image in your Library now that you have converted it to a symbol, but deleting the image from your Library will only remove the image from the symbol container, and you’ll be left with an empty button symbol!

You will know you have successfully converted your button to a symbol when you see a blue line surrounding your image and a small circle in the center. Repeat the steps above for each image, converting each one to a button symbol.

Blue symbol outline in Flash

Editing Button Symbols

9. Editing Button Symbols

Once you have “converted” each of the three images into button symbols, you can edit the properties of each symbol by double-clicking it to enter symbol-editing mode.

Double-click on the first button, and you’ll notice that your timeline has completely changed! Don’t worry, you’re simply seeing the timeline INSIDE the button.

Editing the button symbol in Flash
(Note: The image above represents Flash CS3. In Flash 8 the breadcrumb appears above the timeline)

How do you know you’re inside the button? If you look just below the timeline (above the timeline in Flash 8), you’ll see an area that reads “Scene 1” and another that reads “button1.” This is called breadcrumb navigation. Scene 1 is your main timeline. If you ever want to go back, just click on Scene 1, and it’ll take you back to the main timeline. In complex projects, you might have symbols inside of other symbols. This breadcrumb will show you the hierarchy of where you are and which symbol you’re currently in.

10. Understanding the Button timeline

To understand how the timeline of a button symbol works, you first have to understand how most clickable links work on a Web site. They have certain properties depending on how you interact with them. When you encounter a link on a Web page, several things happen depending on what you do with your cursor:

  1. You initially see the link or button displayed.

  2. You move your mouse OVER the button or link, and it changes to indicate that it is clickable. Maybe it changes color, gets brighter, or a text description appears.

  3. And sometimes you will see a different color when you click down on the button.

On the button symbol timeline, you’ll see four sections or states. Up, Over, Down and Hit.

First, let’s rename the only layer to “image”. After that, click on the frame representing the “over” state, and click Insert ? Timeline ? Keyframe. You can also right-click to insert a keyframe.

Editing the Over state of the button symbol

You now have two Keyframes that are independent of each other. Each one represents a different state. While the red play head is currently on the over state, click on the button image on your stage, and then in your property inspector click on swap.

Swapping photos from symbols

This allows you to swap the photo on that keyframe for another photo. The advantage to using swap is that the new photo will be placed in the same exact location as the previous photo. If you were to manually delete the photo, and grab another copy from your library, then you might have a tough time remembering the exact position it was in.

Choose button1_down.jpg. This is the same photo, but in color.

After you swap the image, grab the red playhead and drag it back and forth between the UP and OVER states. You’ll see your image change from black and white to color. This shows you the change that will occur when you move your mouse over the image in the published project.

In fact, let’s test it now. You can test a project at any time by going to Control ? Test Movie. Or you can press the shortcut key which is Ctrl + Enter (command + return on a Mac). Try moving the mouse arrow over the image you modified with an OVER state.

Now close the window, and repeat the steps above giving each of your three images an OVER state. Remember, you can go back to the main timeline by clicking on Scene 1.

Separating Flash into Sections

11. Creating “sections” of your project using the timeline

Now that you have three buttons with rollover properties, it is time to actually make these buttons DO something. Each button will take you to a different section of your project where you will have some media waiting.

Adding labels layer to Flash

Create two new layers. Name one “media” and the other “labels.” The media layer will hold all of the videos, photos, and audio in your project. The labels layer simply exists to give names to each section.

Highlight frame 40 of all layers. You can do this one of two ways, either by clicking on frame 40 in the top layer and dragging down or by highlighting the top frame first, then holding the shift key down and clicking on the bottom layer. Your timeline should look like this:

Highlighting Frame 40 in Flash

Now go to the Insert menu and click on Timeline and insert a Frame. (This option is also available if you right-click on the selection.)

Now that you have stretched your project out so that it is 40 frames long, we will be creating sections of the project that hold different media types.

Highlight frame 10 only on both the media and labels layers, then insert a keyframe.

Creating section keyframes

Do the same for frame 20 and frame 30.

Keyframes have been added to create sections

Each of these will represent different sections of your project. Let’s label the sections, so we know which is which.

With the first frame on the labels layer highlighted, look at your property inspector, and you will see a section that allows you to insert a frame label.

Make frame labels

Let’s call this first section “opening.” We will follow the same steps labeling each section “video,” “audio,” and “text.”

Label the keyframes on the timeline

Your timeline should look like the one above. You can now lock your labels layer as we will not be using it again.

Adding Video to Flash

12. Adding a video player to your project

Drag your playhead to the video section of your project, and click on the keyframe that is on the media layer. You are going to put your video on this keyframe.

From the window menu, click on components. This will open up the components window pane.

Components window in Flash 8
(picture shows additional components installed)

Components are pre-built items that can be used in your Flash project without a lot of knowledge of code or the technical aspects of Flash. The components found in this window are made available to you from Adobe, but you can install additional components from third-party vendors or Web sites.

One of the most popular components is the FLVPlayback component. This is a very basic video player that allows you to play Flash video (.FLV) files. This is overwhelmingly the most popular video format on the Web.

Drag the FLVPlayback component to the stage and position it where you want it. Your timeline should now show a solid keyframe in the "media" layer under frame 10.

Adding video under the media section

This means that you have content (the FLV player) on this keyframe.

13. Converting your video to FLV

(NOTE: Adobe recently added support for a video codec called H.264 in Flash CS3. This means you will probably skip this step in the future and embed files that have been encoded with the H.264 codec directly from your video editing software. Since it's so new, support is still limited, so in this tutorial we show you how to convert to FLV.)

Included in the Adobe Flash package is a program called “Adobe Flash CS3 Video Encoder.” (With Flash 8 this folder will be called "Macromedia Flash 8 Video Encoder") This simple program encodes most video types to .FLV or Flash Video.

Launch the program.

Converting videos to FLV

There are several ways to add videos to this program. By far the simplest method is to drag videos to the main source area. You can also click the “ADD” button and select the video file.

Next, click the “settings” button. While the settings vary depending on the situation, here are some recommended settings for general performance:

Codec: On2 VP6
Deinterlace:
Checked if the footage is shot on non-HD or non-progressive.
Frame Rate:
Same as source
Quality:
High if a short video, Medium if longer
KeyFrame:
Automatic
Audio:
Encode between 96 to 128kbps

You can also use the Crop and Resize options to trim the length of the video you want to encode or to crop into the sides. The Resize option is especially important as you should always encode your video for the same size as the output, however resizing your video in the encoding process will add considerable encoding time per video (three to five times as long as the video itself).

Adjusting the setting for encoding FLV
(Note this window appears differently in Flash 8. The same settings are available in the older version, however.)

To begin encoding, click Start Queue in the main window. You can batch encode several videos, but the video encoder will only do one at a time.

14. Setting the Video path in Flash

Once you have encoded your .FLV file, go into Flash and set the source path so that the FLV player knows which video to play. Set the source path by clicking on the FLV Player in your Flash project, and then clicking "Parameters" in the property inspector. (In Flash 8, open the Component Inspector window open to find these settings. The Component Inspector can be found under the Window menu.)

Settings for components in Flash CS3

You will notice there are several features you can modify in the FLV Player, including the skin (scrubber) and the color. Once option says "contentPath" this is where you set the FLV file you just created.

Adding Text to Flash projects

16. Adding text to the text section

Drag your red playhead to the text section of your timeline. Click on the text tool in your tool pallet.

 Text tool in Flash

You will notice that your property inspector will change, giving you various text options.

Text properties in Flash

Unlike the titles you created earlier, this time choose Dynamic Text. Why? Because the text you are about to import will be changeable, meaning it will not stay in one "static" position.

Change your font size to a small number, such as 10, to accommodate a large amount of text. You should also change the text color to black and change the line setting to Multiline to accommodate multiple line breaks.

Multiline button in Flash

Other options include the Ab button, which enables your text to be selectable, the <> angle bracket button, which means your text will render HTML, and the square button, which applies a background to your text.

Draw a text box on your stage and paste in some sample text from the tutorial file sample.txt.

You might have noticed that there is far too much text for the text box you have. In order to shrink your text box, you will have to turn on the Scrollable option found under the Text menu.

Text menu in Flash

Since your text is scrollable we need to add a scroll bar. Simply grab the UI Scrollbar component from your components window pane on to the right side of the text box. Placement is important, because the UI Scrollbar will detect the textbox and latch to the nearest side. To prevent horizontal scrolling, make sure you latch the scrollbar to the right side only.

Placing the UIScrollbar in Flash

The scrollbar won’t be functional in the authoring environment. You will have an opportunity to test it out once we create button actions in the next section.

Working with dynamic text: Dynamic text works a lot differently than static text. Flash converts static text into “outlines,” or graphical images, so you don’t have to worry about fonts. But dynamic text is more like real Web text, so you must embed the fonts.

After selecting a font, click the embed button in your property inspector and choose the glyphs you want to embed.

Embed button in Flash for dynamic text

(The embed button will appear in the property inspector when clicking on a text box.)

Embedding glyphs to Flash

Hold the shift key to select multiple glyphs. For virtually all English text, you will only need four sets: Uppercase, Lowercase, Numerals and Punctuation. Flash allows you to select individual glyphs so that if you're only using certain characters, you don’t have to embed everything, taking up memory on a visitor’s computer. 

Adding ActionScript to Flash

17. Adding "Actions" to your buttons using ActionScript

This is the last part of creating a Flash template before publishing it. Now that we have buttons, and different sections of the project separated out, we need to add "actions" to give Flash information telling it what to do when you click a button.

First, we need to identify each button for Flash, so it knows how to reference it. This is called giving each button an "Instance Name."

Unlock your buttons layer, then click on your top button. This will give you a set of options on your property inspector, including a spot to give the button an instance name.

 Giving instance names to buttons

Name your button "video_btn" (all lowercase) with an underscore. Name the next button "photo_btn" and the last button "text_btn".

To add code, first create a new layer in your project and title it"actions".

Then click on the first keyframe of the first frame in your project. This is generally where you will always put your ActionScript, so that it is loaded immediately when your project loads.

 Putting actions on a keyframe

While this keyframe is highlighted, go to the Window menu at the top of the screen and click on Actions.

Actions panel in Flash

The actions window has a small tab at the bottom that tells you where you are putting your ActionScript. It will display the name of the layer and the frame number. If it says anything different, then you are placing your actions in the wrong spot. The actions window will also stay open even if you click on the stage behind it. Be careful: if you click on a layer other than the actions layer, the actions window will change where you are writing ActionScript. Always check to be sure you're writing ActionScript on the actions layer.

This part requires a little bit of programming with code. While at first sight it might look like Greek, there is one basic set of code that we will show you that can be used for virtually any Flash project involving buttons. This is one of the most basic and fundamental pieces of code in Flash.

//------- FOR FLASH 8 (ACTIONSCRIPT 2.0)-----------

stop(); 

video_btn.onRelease = function(){
    gotoAndStop("video");

audio_btn.onRelease = function(){
    gotoAndStop("audio");
}

text_btn.onRelease = function(){
    gotoAndStop("text");
}

//------- FOR FLASH CS3 (ACTIONSCRIPT 3.0) -----------

stop();


function video(myevent:MouseEvent):void {
    gotoAndStop("video");
}


function audio(myevent:MouseEvent):void {
    gotoAndStop("audio");
}


function txt(myevent:MouseEvent):void {
    gotoAndStop("text");
}


video_btn.addEventListener(MouseEvent.CLICK, video);

audio_btn.addEventListener(MouseEvent.CLICK, audio);

text_btn.addEventListener(MouseEvent.CLICK, txt);

//---------------------------------------------------

Type the exact actionscript above into your actions window. Just to make things more difficult, you must precisely match the capitalization and case (uppercase, lowercase, etc.).

Notice that some of the words turn blue as you type.

This means those words are recognized by Flash. The black words are ones we just made up to name things. If you are naming a function and the word turns blue, then you should use a different name because that word is reserved by Flash.

Now test your movie by press CTRL + Enter (command + return on a Mac) and watch your project come to life! If you get errors, that means you might have typed something wrong. Carefully check the syntax and spelling to the above script. Even the slightest mistake will throw it off!

Adding Components to Flash

Adding components to your Flash Project

The sample provided on the first page makes use of several pre-built components. Programmers built flash objects to be easily used by dragging and dropping the item from your components window onto the stage. Components make doing certain things in Flash quite easy that would otherwise require lots of coding and design work.

Soundslides

Soundslides is a great program for building quick and easy slideshows. Its publishing options seem limited because the program creates a folder of files that don't appear to be easily customizable. But Soundslides provides a Flash component for including Soundslides projects right in your Flash project.

You can download the Soundslides component here (requires Flash MX, 8 or CS3 but only with ActionScript 2.0)
http://store.soundslides.com/apps/downloads/component/

Mirror (version 673, rel. Jan 07): http://multimedia.journalism.berkeley.edu/media/upload/tutorials/soundslides/soundslides.mxp.zip

When you install the component, notice a new addition to the components window when you restart Flash:

Component Window with SoundSlides component

This component is added to your project by simply dragging it to the stage. Make sure the red playhead of your timeline is at the location where you want to put the component!

Once you place the component on the stage, you can change the properties of the component by selecting the Window menu, and open the Component Inspector window pane. Clicking on the component will open up a set of properties for that component.

SoundSlides component properties

Notice in this example, we have set the size parameter to custom. This allows us to resize the Soundslides component; however, it requires that your Soundslides project be built with a custom size setting. You also have the ability to change a lot of different parameters, i.e. colors, showing or hiding the header and footer, and fonts.

Use the Free Transform Tool to change the size of the component on the stage.

Free transformt tool in Flash

When you do, the component will display a series of dimensions. You should write these dimensions down, and go back to Soundslides and set the output size to match. Ideally, you would have created a placeholder for your Soundslides project before starting on the actual slideshow, but reality dictates that this isn't always the case.

To connect your slideshow to the component, you must first take the publish_to_web folder from your Soundslides project and place it in the same location as your .FLA flash project. See the tutorial on Soundslides for more information on the publish_to_web folder. You can rename this folder if you wish.

If you are using the tutorial materials downloaded from this site, the publish_to_web folder has already been stored in the same location as your .fla - but has been renamed to just soundslides. Type this name in the project folder field of the Component Inspector.

Component inspector connecting to Soundslides project

gMaps Google Map Component 

The company AFComponents.com provides a free Google Maps mashup component for Flash.

You can download the component here: http://afcomponents.com/components/g_map/
(Note: You must register with their site. This is the ActionScript 2.0 version. They have an AS3 version as well)

Google Map component from AFComponents

The GMap component is a little more complicated because it requires some basic ActionScript. The full API documentation can be found here: http://afcomponents.com/components/g_map/docs/

In the example seen the first page of this tutorial we gave our component the instance name "gMap" and added the following code to our Actions layer:

gMap.setMapType("hybrid");
gMap.setCenter({lat:13.410994034321702, lng:23.994140625},4);
gMap.addControl(gMap.GTypeControl());
gMap.addControl(gMap.GZoomControl());
gMap.addControl(gMap.GPositionControl());

This code will set the map type to hybrid (Google maps has three map views: map, satellite and hybrid). Then it centers the map to a given latitude and longitude -- in this example, the coordinates for Darfur in Sudan. The last three lines of code add zoom controls to the map.

In order for the ActionScript to work, it must be in the same timeframe as the component it's referencing. This means you must add a keyframe on the Actions layer just above the area where the map is located.

ActionScript on frame that has map

About this Tutorial

This project was written by Jeremy Rue, mutimedia training instructor for the Knight Digital Media Center. Flash templates provided by Jane Stevens, Val Krist and the staff of the Ventura County Star.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.