UC Santa CruzInstructional Computing
ITS Home About ITS IC Services News Tutorials Technologies About IC Help

Creating a simple flash animation

If you are on a Macintosh, open "Flash 8" from the Applications folder. If you are on a PC, open "Flash 8" from the Start Menu > Macromedia > Macromedia Flash 8.

The larger window with the white box in it is called the Stage. This is where you will draw your objects and plan where they will move.

The window towards the top of the screen is called the Timeline (pictured to the right). This is where you will plan when your objects will move and when new objects will appear.

timeline


1. We want our demonstration movie to be ten frames long. Click on the "1" frame in the Timeline, then go to Insert > Timeline > Frame. Repeat until you have ten frames. (You can also use the F5 key to insert new frames more quickly.)

insert frame


2. When you make a real movie, you'll want to read Flash's drawing tutorial under Help > Lessons. For this exercise, though, we'll just use a square. Select the rectangle tool in the drawing palette, and click and drag in the Stage to make a square.

square tool


3. Before going any further with this animation, you should transform your image into a symbol. Making images into symbols helps keep your finished file small and should be done with every image you plan to animate. Go to Window > Library to see symbols that have been saved (there shouldn't be any yet). Click on the arrow tool, click and drag all the way around the square to select it, and choose Insert > Convert to Symbol. Name your symbol "square". Your new symbol should appear in the library window.

4. While the square is still selected, go to Insert > Create Motion Tween. A dotted line should appear in the timeline, indicating that a motion will begin at that point, but an end destination has not yet been specified.

5. Click on frame number ten. Use the arrow tool to move the square horizontally to the other side of the Stage. The dotted line in the Timeline should now show a filled-line arrow, indicating a completed motion between the two frames.

tween


6. Select Control > Rewind and Control > Play to see your movie as it now stands. It should look like this.

7. To make your animation viewable on the web, you have to use the Publish command to generate a .swf file and an HTML file that displays that .swf file in the browser. However, make sure first of all to save your file in the regular Flash format (by using File > Save) before publishing it. If you want to edit your movie later, you should edit the original Flash movie you have saved and publish it again.

Go to File > Publish Settings. In this window, you can select which type of files you want Flash to generate. The bare minimum to display on a web page is an HTML file and a .swf file, but you can also choose an GIF or JPEG to display an image if the viewer's browser doesn't have the Flash plug-in. To make an animated gif, click on the box next to GIF, under HTML. Click the GIF tab, which should now appear at the top of the window, and choose Animated rather than Static.

8. When you are finished with the settings, choose Publish. Flash will save the files you have selected to the desktop or wherever you have previously specified.

9. If you want to have your animation on a page all by itself, you're ready to upload your files to the server. See the tutorial on using Fetch on a Mac or SFTP on a PC.

10. If you want your animation to be part of an already existing page, you need to put a chunk of new HTML into your old HTML file. The easiest way to do this is to open the HTML file you just generated with the Publish command into the SimpleText application.

11. Now you need to copy the part of the HTML that begins with the < OBJECT > tag and ends with the < /OBJECT > tag. For example, here is an HTML file generated by Flash:

necessary HTML


The part circled in red is the only piece of the HTML that you need to copy and paste into your old document.

12. Now you're ready to upload your files on a Mac or a PC. Remember to upload your .swf file along with your revised HTML.


Need More Information?

This tutorial is designed to assist students, faculty, and staff of UC Santa Cruz, and is not intended to offer comprehensive support for Flash. If you need more help, please visit the Adobe - Macromedia Flash Support Center.

Please use the form below to tell us what you think of this page.


USCS Faculty Instructional Technology Center
2006-2007
Last updated 05/09/2007