ART279 - 3D Computer Graphics Design II
Spring 2002 - NVCC - Giulio Porta

Web Animation - FLASH

By Holly Zell

This project required using Macromedia's Flash to complete three required assignments to give the student a basic understanding of Flash. A 30 day trial version of this software was downloaded and used to create the following animations. The online Help was invaluable in completed these assignments.
NOTE: Unless you are using Macromedia's Dreamweaver web building tool, you will have to reference their Flash site pages to obtain the necessary
HTML to insert your Flash movies into your web page (more information on this below).


Assignment # 8a
Rotating and Scaling a Logo

This assignment required creating a text logo and modifying it over a timeline to rotate, scale, change color, and fade. 

I replicated my logo on six different layers and applied different functions to each. The top right and bottom left logos rotate 360° counter clockwise, change color, and scale down. The top left and bottom right logos scale down and fade out. The middle logo rotates 360°  clockwise, changes color, and scales up. Another middle logo fades in and scales down to form a shadow effect behind the other. In order to create the 360°  rotations in the desired directions, I had to create additional keyframes on the layers.

Link to Repeated Flash Animation

Animation Appearance at Keyframe Breaks

Keyframe 1

Keyframe 9

Keyframe 18

Keyframe 27

Keyframe 36

Top of Page


 

Assignment # 8b
Mouse Drag

These five apparitions are hidden in the haunted house scene below
and the cursor has been turned into a ghost.
Simply drag the cursor  into the haunted house image below to make the ghost cursor appear. 
Help him with his haunting by moving your cursor around within the image.
When he becomes transparent, click the left mouse button to see what appears. 
To turn off an apparition, click again.

 

The Haunting


The Ghost Cursor

 

This assignment illustrates a simple mouse interaction: a graphic following the cursor as it is moved. In addition, I made the normal cursor invisible and I used invisible buttons to trigger the appearances of the apparitions.

This project required becoming familiar with the Flash ActionScript; a language similar to JavaScript.

Want to know more about it?
Click BOO below

BOO

Top of Page


 

Assignment # 8c
Rotating and Scaling two or more objects simultaneously

This assignment required rotating and scaling 2 or more objects at once. I replicated this assignment from the tutorial example provided.

 There are three layers corresponding to the three 'instances' on the screen. Each has an "action" associated with it: the arrow rotates and shrinks, the orange box scale up and the text, CONCLUSION, also increases in scale. 

 

Link to Repeated Flash Animation

Animation Appearance at various Keyframes

Keyframe 1

Keyframe 6

Keyframe 13

Keyframe 20


Top of Page


 

Inserting Flash Animation into non-Dreamweaver Web Builders

Unless you are using Macromedia's Dreamweaver to create your web page, you will have to include the following code to place your flash movie on your page. I used MS FrontPage 2000 to create this page. You will need to change the highlighted file name to your flash movie file name. NOTE: Be very careful using FrontPage, it is known to modify/expand/messwith the code.

<object CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="100" HEIGHT="100"
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<param name="MOVIE" value="boo6.swf">
<param name="PLAY" value="true">
<param name="LOOP" value="true">
<param name="QUALITY" value="high"><embed SRC="boo6.swf" WIDTH="550" HEIGHT="400" PLAY="true" LOOP="true"
QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</object>

I obtained this information from the Flash Support Center page on the Macromedia web site.
I highly recommend you read about this code and why it must be included.
URL: http://www.macromedia.com/support/flash/ts/documents/html_editor.htm



Interesting Flash Discoveries

Flash is indeed a more efficient animation file builder. 
The Flash Movie files are Vector graphic files. An AVI file is a Raster graphic file.
The table below outlines file size information. 
WHAT A DIFFERENCE!!!

Assignment File

.AVI File Size

Flash Movie(.swf) File Size

Assignment # 8a  

5,248 KB

5 KB

 Assignment #8b   

23,305 KB

61 KB

Assignment # 8c  

2917 KB

2 KB

 

Flash has a scripting language called ActionScript which is based on JavaScript. For non-programmers, using the Action panel will create simple ActionScripts for you (via menus and lists). There is also an Expert mode that allows the more knowledgable scripters to enter more complex scripts. With these scripts you can make your flash movies interactive. (See Assignment 8b)


I have found Flash to be a syntax beast! Thing must be created in a certain order and a certain way to get the effects you want.

Something Important/interesting I only learned after I had consulted several sources: The _visible property renders the target disabled as well as invisible. A fact I did not discover until after I had been wrestling for some time with trying to get the movie clips to act like buttons and repeatedly failing. Several sources said more people use _alpha instead of _visible but only one mentioned this important caviot.

 

The current downloadable version of Flash is Version 6, Flash MX.  It is substantially different from version 5.  For assignment 8a, I made extensive use of the online Help to figure out how to complete the assignments. 

 

For assignment 8b, I found sometimes confusing/conflicting information when I sought help online in understanding ActionScript and most books I found didn't go into enough depth. One of the best book I came across is FOUNDATION ACTIONSCRIPT by Sham Bhangal which I found at the regional library.  It is an indepth description of the ActionScript language and it's function.for those interested in becoming more familiar with ActionScript.


İHolly A Zell
Revised: September 22, 2007
All Original Artwork Copyrighted.