Introduction to Flash, lesson 2

WIT 2002

Flash 2

Agenda

Check out some funny Flash movies at http://www.joecartoon.com
Today's topics:

Today we're going to create a gallery of images of members of the class, like this. (Here's a smaller version that I will actually use for the notes that follow.)

Here is the *.fla for this movie. You might want to download it to check out the finished product if you get stuck along the way.

However, I want you to use your creativity to alter the movie as we create it to fit your personal style

Here's the final timeline for the class picture gallery:

Some things to notice:

There are 8 frames in the movie. The frame per second rate is .5. (This means each frame plays for 2 seconds.)
The "front" layer only plays for one frame. It's just an entrance into the rest of the movie.
The background keyframe covers all the frames from 2 to 8.
The "mask" layers control what appears on the Zooms and Content layers. (Note that the mask layers could change from frame to frame if I wanted them to.)
There are "actions" associated with the first "Front" frame, and all the "content" keyframes. We'll explore these actions later.

This is the library that we'll end up with (three views of the same library):

Setting up a new movie

Create a new folder on your desktop, called March28. Use this for everything in this session.

Open Flash. A new movie should open. Save this movie into the March28 folder. Call it "classpix.fla."

Click Modify|Movie. Change the background color to something you like.

Creating a common set of elements

We need to create the "front page" and the background for the gallery itself.

Rename the default layer "front" and add another layer, just above it, called "background."

Make a keyframe in "front" frame 1, and another keyframe in "background" frame 2.

To create the radial gradient look like on my movie, draw a rectangle with a "stroke" of dotted lines and a "fill" that is a gradient. The "Fill" panel can be used to tweak the gradient to make it look like what you want.

Use the text tool to add some text.

Use the Character panel to change font sizes, styles, and colors.

Use the "Align" panel to line up your text the way you want it.

Now we'll need to add a button to enter the gallery. Click Window|Common Library|Buttons to find a button that you like. Drag it onto the "front" later. Right-click (control-click) the button, and choose Actions. Add the "goto frame number 2" action to the button.

Also, since we want the movie to STOP on the first frame (until the button is pressed), let's add a Stop action to the frame. Right-click or control-click the frame and choose action. Add the "Stop" action.

Now create the background. Create a place for information, and a place for the images, and a place for the controls.

For information, you'll use the text tool to make labels, "Name:" and "Web Address." These are "static" text (they don't ever change).

Then, you'll use the text tool to create "input" text boxes for the actual information. Use the Text Options panel to change the text type to "Input." Also, in the "variable" field, type "url" (no quotes). This field will be used to set the variable "url" to the actual url of each person's web address. Then, when the Get Web Address button (see below) is pressed, a new browser window will open with that URL.

I know this is confusing. For now, just do it. This will become clearer later.

Use the rectangle tool to make placeholders for the images and the controls.

You can play with the paint bucket fill tool and gradients by clicking on the paint bucket color picker.

Adding buttons

Create a new layer. Call it "Controls." Make it active. Create a new keyframe in frame 2. (Leave keyframe 1 blank in this layer.)

Choose a set of buttons from the Common Library and drag them onto the bottom rectangle of your background. Align them.

We're going to create three versions of the controls. Frame 2 will have a version in which the "rewind" and "previous" buttons don't work and result in a sound. Frame 8 will have a version in which "next" and "play" don't work. Frames 2 and 8 will also contain a "stop" frame action. All the other frames will have working versions of all of the buttons.

For now, we'll just make one version (in Frame 2), and then copy that version into frames 3 and 8 after we add some actions to the buttons.

Adding actions to buttons

Button actions are applied to every instance of a button in a movie. To assign different actions to different buttons, create copies of the buttons in the library. We'll cover that later.

For now, let's just add actions to the buttons in frame 2. The following images show what goes for each button. (the button is highlighted at the bottom right of each image.)

Now, we're going to copy the buttons to frames 3 and 8. Right-click (control-click) the keyframe in the Controls layer, frame 2 and choose Copy Frames. Click in the same layer in frame 3 and choose Paste. This is the keyframe that will control most of the frames in the movie.

Then, click on the same layer in frame 8 and choose Paste. This is the keyframe that won't allow playing or moving to the next image.

Adding sound to buttons

We're going to add a sound to buttons in frames 2 and 8 that tells the user that a given button doesn't work in a certain situation.

Flash contains some default sounds, but for this procedure, let's download this sound to the folder on your desktop. The sound indicates "this doesn't work." (Right-click or control click and choose Save Link As...)

To import a sound into Flash, choose File|Import and change file type to All Sound Formats. Choose the sound you want a double-click. The sound will now appear in the library for your movie.

Now, as for adding the sound to the right buttons.

In frame 2, the rewind and previous buttons will not work; in Frame 8, the next and play buttons won't work. Use the same sound for each.

You can add sounds to and of the frames of a button (up, over, down, hit).

But first, we need to create nonfunctioning duplicates of the "rewind," "previous," "next" and "play" buttons and put the "THIS DOESN'T WORK" sound in the duplicates, and use them in the places where the buttons don't work.

To duplicate the buttons, find them in your movie's library. (NOT in the common library, but in yours.) Right-click (control-click) the button in the library and choose Duplicate. Name the buttons "nonfunctioning left," etc.

NOTE: I have created some folders in my library to make it easier to find what I need.

Now, go to frame 2, and replace the "rewind" button with the nonfunctioning gel Rewind button.. Choose Actions. Delete the action associated with the button.

Also, replace the "previous" button in Frame 2, and for the "next" and "play" buttons in Frame 8. Make sure you delete the actions associated with the nonfunctiong buttons as well.

Now, we're going to add sound to the "nonfunctioning" buttons. To do this, right-click (control-click) one of the non-functioning buttons in frame 2 or 8. This will open a separate editing window. Add a layer to the button. Call it sounds or sound. Add a keyframe in the "down" frame. Click and drag the "this doesn't work" sound onto the stage and drop it.. It doesn't matter where you put it. You'll see a mini-version of the sound waveform appear in the appropriate keyframe.

Repeat this procedure for the two nonfunctioning buttons in frame 2 and for the two nonfunctioning buttons in frame 8.

Onion Skinning

When you want to work on multiple frames at a time (for example, to align elements across frames, or to add content to several keyframes at once), use onion skinning, which is a way of seeing the content of multiple frames at once.

BE CAREFUL! You can do some things with onion skinning that you don't intend to do. Be especially careful when using onion skinning with "edit multiple frames."

For example, you might want to onion skin in order to make sure your controls line up across the various frames. In this image, the buttons are not quite lined up:

To turn on onion skinning, click the small button on the timeline that looks like this:

To turn on "edit multiple frames," click the small button on the timeline that looks like this:

You can use the select tool to draw a selection marquis to select instances on multiple frames, and then use the Align panel to align them.

Now, they're all lined up:

BE SURE to turn off onion skinning when you're done. I"ve messed up many an application by forgetting this!

Importing images

A group of images is here. Save several into your work folder.

To import the images into your movie's library, choose File|Import... and then hold down the SHIFT key while you click the first and the last one from the work folder, and then click OK. All of the images will be imported into the library.

I put this into a folder in my library called "raw images." This is different from the "zoom images" folder, which contains the images on the zoom layer. For the zoom function to work, the zoom images must be converted to "symbols." I'll discuss this later.

Creating a mask layer

A "mask layer" is a layer that is linked to another layer and that "masks" the content of the second layer. Only areas that contain content on the mask layer will show through.

We're going to use two "mask layers" to keep us from having to crop every image we use in the gallery.

Insert a new layer just above the "content" layer. Name it "content mask." Make this new layer active. Draw three rectangles: one just inside the "Name" text box, one just inside the "Web Address" text box, and one just inside the "Photo" textbox.

Then, right-click (control-click) the new layer, and choose "Mask". Then, lock the content mask layer and the content layer. They should now look llike this:

Now we're going to add two more layers, "Zoom" and "Zoom mask." The "Zoom" layer will contain blow-up images of the members of the class and the "Zoom mask" layer will mask that layer to show the zoomed image only in the area we want it to.

Create a keyfrmae in frame 2 of the Zooms and the Zoom mask layer.

In Zooms, frame 2, drag one of your large pictures and place it and scale it so the main part of the image is on the stage, thus:

Draw a rectangle in frame 2 of the Zoom mask layer that takes up the space above the controls, with a margin on all sides.

You won't see the mask applied until BOTH the masked layer and the mask layer are locked and visible, like this:

Frame Actions

You can associate actions with frames. Then, whenever a frame loads, an action is performed.

In the classpix movie, there is a STOP action in the "front" layer's one frame:

Also, when each subsequent frame loads, the "zoom" version of the picture is hidden, by an action associated with the content layer..

In order to do this, I had to make a "symbol" out of the zoom images. This is the only way to be able to control that image's properties using actions.

Once I added my images to the zoom layer, and adjusted their size and position, I converted them to symbols. To do this, click Insert|Convert to symbol. Choose the movie clip option. Give it a name that makes sense, like "cac."

Once an image is converted to a movie clip, each instance of the movie clip can have separate properties. You need to name the instance. We're going to name each instance of the different images the same thing, so we only need to write one version of our zoom script.

Choose the "instance" panel and add a name, for example "pix_zoom.."

Now, you can "target" this instance in an action script.

Right-click (control-click) frame 2 of the "content" layer. Choose Actions. Let's create an action. (This is not a basic action, but you use clicks to build it.)

Choose Actions. Then setProperty. The property we're going to set is "_visible." We're going to set the visibility of "pix_zoom" to "false." (don't type in the quotation marks.) False must be treated as an "expression," since it is a value rather than a string. Check the "expression" box.

Creating new buttons

Choose Insert|New Symbol. Make it a button, and call it zoom.

A new window will open, called zoom. This is the button editing window.

There are four frames, each corresponding to one of the "states" of the button: up, over, down, and hit.

The "up" version is the regular state of the button.

"Hit" is the area in which the cursor is considered to be over the button. You might want this to be bigger than the button itself.

In the Up frame, draw your tool. You may use this image if you want: (Right-click or control-click, choose Save Image As...). Then, in Flash, choose File|Import... and select this image.

When you're done with the up frame, create a new keyframe in the over frame. This frame will appear when the mouse cursor passes over the button. Add some kind of highlighting. (A differernt fill color or surrounding box). When you're done with the over frame, add a "down"keyframe.

To create the "down" press effect, select the entire button, and move it a few pixels right and down. (the arrow keys work well to move it after selecting it). Now add some kind of shadow to the left and top of the image. If you want you can use this:

In the "hit" keyframe, draw a rectangle slightly bigger than your button. This is the area the cursor has to be in to activate the button.

If you want to be really cruel or clever, draw a rectangle here that is somewhere else in the image entirely from your button!

Now we'll add this sound to the zoom button:

We'll need to add three instances of the zoom button on the controls layer: one to frame 2, one to frame 3, and one to frame 4. Click and drag the button from the library to the stage when the appropriate layer and frame is selected.

To make sure these instances are lined up, change to onion skin mode. Set the markers at frame 2 and frame 8, and choose edit multiple frames. Use the selection tool to draw a selection marque around the zoom tool, and then use the Align panel to line them up.

Now we'll create one more button, to load the URL listed in the Web Address field.

Click Insert|New Symbol... and choose the button type. Call it getWebAddress.

Let's make the UP symbol look like this:

and the OVER like this:

and the DOWN like this:

Make the "HIT" a little bit bigger than the button.

We're going to put a copy of this button on every frame, in the Content layer. This is because we want the button to "read" the text in the Web Address field and load that URL in a separate browser window. (We need to put a rectangle on the Content mask layer in order to see the button when we place it on the content layer.) Don't do that yet, though, because we'll first set up the action for one button and then copy that button onto the other frames.

To 'read' the text in the Web Address field, we need to make it "input" instead of 'static' text. Use the Text Options panel to change the type. We need to do this in each frame. The "variable" will call "url" (no quotes) in every frame, and we'll include a maximum input of 35 characters. We also need to embed the entire font, so Flash can display whatever characters are in a given URL.

We could leave the URL field blank and allow the user to type it in, but instead, we're going to have already filled in the "url" field with each person's url.

Of course, the actual value of the url in each frame will differ to reflect the actual URL. (The user can, if he chooses, type in a different URL for each frame.)

Now we're going to set the action for the button. Right click on it and choose Action. Fill the form out this way: We make the "url" an expression so Flash will "evaluate" the expression, which refers to a variable, url, defined by the text field.

Now select the button, click Edit|Copy, and then go to each frame in the content layer and choose Edit|Paste in Place.

Save your movie. Then test it. (The load URL won't work unless you test it in a browser plug-in. So instead of Control|Test Movie, choose File|Publish Preview.)

Publishing your movie

Choose File|Publish Settings. You won't actually change anything here; I just want you to see that you can change the names and fle types under which your movie is published.

To publish, simply choose File|Publish. A *.swf and *.html file will be created with the same name as your *.fla. These are the two files that need to be published to the Web.

Putting your movie on the Web

Use FTP to put your movie onto your web site.

The contents of the Web Institute for Teachers website are Copyright 1999-2002, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of the Web Institute for Teachers.