CSci 220 - Lecture 25
Web Page Design
© Morris Firebaugh
B. New Flash 4.0 Features and Basic Design
Flash 4 offers exciting new features for creating immersive, lush interactive web sites.
- MP3 streaming audio
- Export both streaming and event audio with MP3 compression to create compelling movie sound tracks while maintaining files small enough for efficient, low-bandwidth delivery.
- Text fields for placing user-editable text in a movie
- Place text fields in a movie to let your audience edit text while a movie plays. Use text fields to create password entry fields, registration forms, surveys, and other forms for collecting data from users.
- Enhancements to Flash actions that let you create sophisticated games, forms, and surveys
- Sophisticated Library of Objects
- The redesigned Library window now makes it much easier to manage hundreds of assets for large projects. Create folders to organize and store assets. In addition to the name of a symbol, Library window columns now display symbol type, the number of times the item appears in the movie, and the last modification date. Sort library items by any of the columns.
- Streamlined web publishing
- The Publish command is a one-step process for exporting a movie in multiple formats, as well as the supporting HTML file. Customize the individual properties of each format prior to publishing. You can also create your own external template file that instructs Flash how to write out specific HTML syntax.
Flash Basic Design
The basic design of Flash consists of four components:
C. Flash Drawing Tools and Symbols
Flash supports a minimal but powerful set of drawing tools:
An example of the power of some of these tools is the pencil tool
Another versatile tool is the PaintBrush
Perhaps the most impressive drawing tool is the reshape feature:
"A symbol is a reusable image, animation, or button. An instance is an occurrence of a symbol on the stage. Symbols help you keep a file's size low and make editing a movie easier. "
To create a symbol:
To work with instances of symbols:
This nomenclature is consistent with OOP design.
D. Flash Layers
You can think of layers as transparent sheets of acetate stacked on top of each other. Where there is nothing on a layer, you can see through it to the layers below. Layers are used to organize artwork in a movie. You can draw and edit artwork on one layer without affecting artwork on another layer.
The basic idea of layers:
They can be re-ordered:
They help solve the z-depth problem:
Shockwave offers Streaming Radio Music
Example 1: Linear Motion - Tweening
1. Insert an object (Eagle) on the stage
2. Modify Layer 1 to name the layer "Eagle"
3. With layer Eagle active, click on frame 25, and Insert --> Frame
4. Click on the Eagle layer (to select the object) and Insert --> Create Motion Tween
5. Click on Frame 25 and drag the eagle to the desired position (RedX)
6. In the Controller window, click play
7. Under File, choose Export Movie as Animated GIF, Quicktime, or Flash
Example 2: Shape Animation
1. Insert or draw an object on the stage and name it Shape
2. Click on frame 25 and Insert --> Key Frame
3. Click on Key Frame 1 (Frame 1) and go to Modify --> Frame
4. Select Tweening Tab, then select Shape
5. Use Controller to play movie
6. Export as Animated GIF
Example 3: Animation Along a Path