CM510 Computers in Communication

Creating Animation with Flash

Flash provides tools for creating text and graphics for your animation, and for moving these around inside the ad. You can also import JPEG, GIF, or PICT images into Flash, and animate them as well.

Set up the Stage.

Open Flash. Choose a new document using Action script 2.0

Set your Flash project to a size of 500x500 pixels. Do this by choosing Modify  Document from the menu bar, and then entering the appropriate numbers into the boxes. If your ad needs a background color, choose it now. You will see the stage shrink to the size of a banner ad, with the color you have chosen.

Create your Objects.

You must import any photographic or bitmap images that you need for your ad. Before you import them, set them to the proper size and resolution with Photoshop. Remember that your file is only 500 by 500 pixels, at 72 pixels per inch, so keep the images within these limits. To import a bitmap image, choose File  Import  Import to Stage from the Flash menu bar, and you will see your images appear on the Stage.

You should create within Flash any text or graphic elements you need for your ad. Choose a tool from Flash’s tool palette, choose line and fill colors, then draw (or type, if it’s text) the object you need onto the Stage.

It’s a good idea to create a new layer for each element in you movie. To create a new layer, go to Insert  Timeline Layer

If your ad will have more than one scene, create the objects for the first scene now, and then add other scenes later by going to Insert  Scene .

Using Type

To create text, choose the Text Tool form the toolbox. Click and drag open a square on your stage that you will begin to type into. When you draw your box, the Properties Window should appear to let you determine font, size and color.

Animate the Objects

You can animate several aspects of an object:

Location: move the object from one place on the Stage to another.
Transparency: make the object fade in and out of the scene.
Rotation: make the object spin.
Size: make the object get bigger and smaller.

…and you can combine any and all of these. Text, images, and graphics can all be animated in these ways.

Animating location

When you imported or created the object, it went into frame 1 in the Timeline. This will be the first frame, the beginning point of the animation. To make the object animate, you need to create several more frames, and a last keyframe. You then need to move the object in the keyframe to the ending location of the animation, and create the in-between frames. Follow these steps:

Create or place the object on the stage, where you want its animation to start. It should show up in frame 1 on the timeline.
Choose Modify  Convert to Symbol (or hit F8), and convert the object to a Graphic symbol. (This step is REAL important.)
Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert  Timeline  Keyframe from the menu bar. (or hit F6)
With the keyframe (frame 15) selected in the timeline, choose the black arrow tool, and then move the object to where you want it to end its animation.
In the timeline, right-click to anywhere between the frames 1-15 and choose Create Motion Tween from the menu.
Use the Control menu to rewind, and then play the animation.
Watch the object move across the Stage.

Animating Transparency

In Flash, the transparency of an object is called its Alpha value. An Alpha of zero is invisible; and Alpha of 100 is fully opaque, and an Alpha of 50 is halfway there – you can see through it. To gradually change the transparency from opaque to transparent, follow these steps:

Create or place the object on the stage. It should show up in frame 1 on the timeline.
Choose Modify  Convert to Symbol (F8) from the menu bar, and convert the object to a Graphic symbol.
Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert  Timeline  Keyframe from the menu bar.
With the keyframe (frame 15) selected in the timeline, select the object .
Open the Properties window by choosing Window Properties Properties (Ctrl+F3). A window should appear below your workspace
Within the window there should be a drop box with the title “Color.” From this drop box, choose Alpha.
Use the slider to set the Alpha to the ending value (e.g., 5%).
In the timeline, select frames 1-15.
Choose Insert  Timeline  Create Motion Tween from the menubar.
Use the Control menu to rewind, and then play the animation.
Watch as the object disappears.

Animating Rotation

Any object can be rotated, and rotation is expressed in degrees. 360 degrees makes a complete circle. Animating the rotation of an object is very much like animating its transparency. Follow these steps:

Create or place the object on the stage. It should show up in frame 1 on the timeline.
Choose Modify  Convert to Symbol (F8) from the menu bar, and convert the object to a Graphic symbol.
Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert  Timeline  Keyframe from the menu bar.
With the keyframe (frame 15) selected in the timeline, select the object.
Open the Transform window by choosing Window  Transform (Ctrl+T).
In the transform window, enter a new number for the rotation (e.g., 45 degrees).
In the timeline, select frames 1-15.
Choose Insert  Timeline  Create Motion Tween from the menu.
Use the Control menu to rewind, and then play the animation.

You should see the object rotate smoothly as the frames play.

Animating Size

You can shrink or stretch an object over time to create a size animation. Its very much the same as creating a rotation animation. Follow these steps:

Create or place the object on the stage. It should show up in frame 1 on the timeline.
Choose Modify  Convert to Symbol (F8) from the menu bar, and convert the object to a Graphic symbol.
Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert  Timeline  Keyframe from the menu bar.
With the keyframe (frame 15) selected in the timeline, select the object.
Open the Transform window by choosing Window  Transform (Ctrl+T).
In the transform window, enter a new number for the horizontal and vertical size (e.g., 150% to make it larger, 50% to make it smaller.)
In the timeline, select frames 1-15.
Choose Insert  Timeline  Create Motion Tween from the menu bar.
Use the Control menu to rewind, and then play the animation.

You should see the object shrink or stretch smoothly as the frames play.

Combined effects

By the same method, you can create an object that moves across the screen as it disappears, or performs all four types of animation at once – just apply all the settings to the last frame, one after the other, and then create the motion tween.

Multiple objects

You can animate several objects at the same time, in different directions, by adding them to the Stage and then animating them. Just make sure that you select only the object that you want to animate as you set the transformation parameters. It’s easier to keep track of these if you put each object in its own layer.

Multiple Scenes

To create a new Scene, choose Insert  Scene from the menu. Create the second scene as you created the first. This second scene will play as soon as the first one is finished. To change the scene order, to delete or add scenes, go to Window  Other Panels  Scene or press Shift+F2. To test the Entire Movie, choose Control  Test Movie (Ctrl+Enter) from the menu bar.

Animating Along a Path

To move an object along a path that is not a straight line, you simply draw the path with the pencil tool in a special invisible layer called a Motion Guide. Open the location animation that you created earlier, and follow these steps:

Select the layer with the object in it.
Choose Insert  Timeline  Motion guide from the menu bar.
Click on Frame 1 on the Motion Guide
Select the pencil tool, and draw the animation path. Make sure you start the path at the exact center of the object. (The pencil tool has options for different types of lines – try them and see the results.)
Insert a new frame at the end point (frame 30 for instance) on the Motion Guide and on the object layer.
Insert a Keyframe on the object layer at frame 30
Move the object to frame 30 and place the center of the object on the end point
Create a Motion Tween on Layer 1

Adding a stop action to your movie.

Click on the last frame in your timeline. Go to Window  Actions (F9).In the Actions window, click the blue plus (+) icon. From the menu that drops down choose Global FunctionsTimeline Controlstop.

Creating a Button-link to Your Homepage

Select the object that you would like to make into a button.
Go to Modify  Convert to Symbol (F8). Enter a descriptive name (e.g. “Link”) and choose the option marked “Button.” Click OK to confirm.
Double click the button. The timeline should change from multiple frames into four states: up, over, down, hit. You are currently at the “up” stage, the normal state of the button unclicked.
Go to the “over” stage and right click > Insert Keyframe. Now you can change the color, size or any attributes to your button. This “over” stage represents how the button will look like when the mouse cursor is over it.
Go to the “down” stage and right click > Insert Keyframe. Change your button’s color, size or any attributes. This “down” stage represents how the button will look like when it is clicked.
Double click on the grey area outside the white background. You will go back to Scene 1, where the timeline appears as numerous frames again.
Right click your button > Actions. Below actions, there should be a small menu named “Behaviors.” If not, go to “Window” > “Behaviors” to open the Behaviors menu.
Click on the blue plus (+) icon. From the menu that drops down, choose Web > Go to Web Page. In URL: type in the webpage address: (eg.:

From the “Open in” drop down menu, choose “_self.” This means the link will open up in the same browser window. If you choose “_parent” the link will open up in a new, blank window.

Note that when you add the behavior, Flash will automatically generate a few lines of code under “actions,” similar to this.

on (release) {

//Goto Webpage Behavior

getURL("

//End Behavior

}

This is the actionscript that adds the link to the button. If you manually type in the same lines, you will be able to achieve the same effect.

Note: Ifyou are going to put this on the fist page of the web (index.html) and you want to link to your mian or home page (homepage.html) you would type “homepage.html”

Exporting your movie

To insert your movie into a web page, you can either create a Shockwave file (.swf) as described below, or you can choose to publish your file directly into an HTML file, created in Flash. To export as a Shockwave:

From the menu bar choose File  Export  Export Movie… (Ctrl+Alt+Shift+S).
Give the movie a file name and location. (Remember it needs to be included in your web folder.)
In Dreamweaver, choose Insert  Media  Flash. You can from here set your dimensions as well as whether or not you wish the movie to loop (choose “Parameters”).
(Note: Dreamweaver’s methods do not work on all browsers. It is therefore recommended that you use the Publish command in Flash.)

Exporting your movie and inserting your movie on a web page

From the menu bar choose File  Publish Settings (Ctrl+Shift+F12).
Under the first tab which pops up, “Formats,” you can choose the name of both your Shockwave and HTML files as well as their locations.
Go to the Flash tab. Choose the compression qualities you wish for your Shockwave movie.
Go to the HTML tab. Set the Dimensions as Pixels, and choose whether or not you wish your Flash file to loop.
Hit “OK” to save your files. You can now edit the HTML file in Dreamweaver to suit your taste.