CS 325 and Film 385: Introduction to Flash


flash icon

Highlights of this lab:

  • What is Flash?
  • Flash's Environment
  • Drawing with Flash
  • Classic Tween
  • Using a Motion Guide
  • Modern Motion Tweening
  • Shape Tweening
  • Working With Buttons
  • Publishing Your Flash Movie
  • Assignment

:: What is Flash? ::

Flash is a vector graphic based application. It is used worldwide to produce movies, animations, presentations and more. You can use it to create presentations for your company, equipped with an up to date database to show the right information at the right time. Flash is easy to use and an effective tool in the web development industry. One advantage to Flash is it is a cross-browser platform, which means you can show your movies in any browser out there, such as Internet Explorer or Netscape Navigator.


:: Flash's Environment ::

The Flash Workspace:

The Flash workspace consists of five main components:

Flash Library:

The library is a small database where Flash stores all your graphics, symbols, videos and music - the assets for your animation. It is accessed through the Library panel. If you can't find that panel press F11 on Windows or Command-L on Mac. From the library, you can click and drag symbols onto your stage area, which saves you a lot of time, instead of re-creating new graphics.

Flash Symbols

In Flash, a symbol represents a movie clip (flash animation), button or graphic that you have created. Symbols make it easier to use the same object over and over again without having to re-create it, which is a waste of time. In addition you can only animate and apply certain rendering effects to symbols. In this section, we will learn how to create, modify and remove symbols you have created. We will also learn how to add effects to these symbols, enhancing your movie.

Flash Layers

Layers are simple transparent sheets that are placed one on top of each other. These layers can be moved around, added and they can also be deleted. They organize your movie into distinct pieces that don't affect the rest of your movie.


:: Drawing with Flash ::

For this lab we are going to make a simple boat movie. Sounds like fun??, "No!", well too bad!...no, no, it'll be fun!

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:


:: Classic Motion Tweens ::

Let's add some motion to our boat.

Step 1:

Step 2:

Step 3:

Step 4:


:: Using a Motion Guide ::

Step 1:

Step 2:

Step 3:

Step 4:


..:: Working with Buttons ::..

Step 1:

Step 2:

Step 3:

Step 4:

Each frame should now be a keyframe with the same basic picture in it. We will add distinguishing details in a second layer.

Step 5:

..::Button Linking Instructions::..

Buttons are given their action by a programming language called Actionscript. The language has evolved over the years along with Flash. The current version is Actionscript 3.0 which is a complete restructuring of the language. Actionscript 1 and 2 are simpler to begin using, but they are disorganized and are hard to use in large Flash projects. Actionscript 3 is a bit harder to learn because it is an Object Oriented programming language. It is very well organized, and the structuring it imposes makes large Flash projects possible.

The following are instructions for both Actionscript 2.0 and 3.0, both of which are available in Flash CS4. In the scripting lab we will focus on Actionscript 3.0 because it represents the future of Flash programming.

To see your button in action it must be in a web page, and should be published on the web. Both the page and the resulting .swf file should be on the web and in the same folder.

Actionscript 2 Instructions:

Sample:

Click button to download flash file.

Actionscript 3 Instructions

Sample:

Click button to download flash file.

:: Publishing Your Flash Movie ::

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:


:: Assignment ::

For this lab assignment I want you to simply follow the instruction for this lab and create a flash animation or button. The animation or button can be exactly as descibed above.

Embed your flash file on your web page if you like, but please submit your flash .fla document, your published .html and .swf files, and all your resources in a folder with your name on it. This is due at the beginning of your next lab. Have fun!


..:: Web [Re]Sources ::..