 |
 |
|
|
|
Parkland
College > CSIT
Dept > Web
Technology > CSC 121 >
Calendar > Lesson 8
CSC 121 WEB SITE DESIGN
Lesson 8: Introduction to Flash
Instructor: Paul
Young
|
| |
Objectives
|
|
To become comfortable in the Flash
environment by creating a simple animation similar to the sample
on this
page.
|
| |
Discussion
|
|
Flash began as a vector drawing program
similar to Adobe Illustrator and Freehand. Vector art (also known
as "outline-fill") is computer graphics defined by lines
instead of pixels. Since lines can be described as mathematical
formulas, vector art can be very small in file size.
Today, Flash is a complete multimedia development environment
with its own "action script" programming language. Macromedia
claims 500,000 developers and over 325 million Web users of the
Flash Player, making the Flash plug-in the most widely distributed
piece of software on the Internet.
Creating Flash animation involves the process of "tweening" (short
for "in between" frames). This process allows the animator
to design two (or more) "key" frames and then lets Flash
draw all the "in between" frames. This very powerful
and efficient way of animating allows one to create complex motion
with very little effort.
Benefits of using Flash to create animation include:
- relatively small file sizes (vector vs. pixels)
- scalable art (Flash files can be blown up to any
size without loss of resolution)
- ability to embed fonts (can use any font on a Flash
web page)
- complex interactivity (can create entire web sites
in Flash)
- multimedia support (can embed video and sound)
- can export to Quicktime (can be used for television,
movies)
|
| |
Procedure
|
|
Overview: Import art into Flash to
trace over. Create symbols to tween. Adjust timing. Export as SWF
and import into home page
using Dreamweaver. Test, publish to server.
Creating the art for animation
- duplicate "upload/lesson7" folder, rename "lesson8"
- launch Flash, file > save as "lesson8.fla" (inside "prep")
- practice navigation shortcuts (space; space+cmd; space+cmd+option;
cmd+1, cmd+2, cmd+3)
- rename "layer 1" as "bg"
- file > import "upload/lesson8/name.gif" (note
dimensions)
- modify > document: match dimensions of imported file (fps=12)
- position imported file to upper left corner (x=0, y=0)
- add new layer, lock others
- recreate type: choose font, size, color, etc (type tool)
- open "lesson5.psd", save as "lesson8.psd" (inside "prep")
- delete unneeded layers
- file > save for web "name-bg.gif" (selected slice
only, in "upload/lesson8")
- return to Flash
- file > import into library "name-bg.gif"
- swap "name.gif" with "name-bg.gif"
Animating the type
- select type: modify > break apart
- make each letter into a graphic symbol (F8)
- select all symbols
- modify > timelines > distribute to layers
- in "bg" layer: insert > frame on frame 40 (F5)
- in all other layers: insert > keyframe on frame 5
(F6)
- frame 1: insert > create motion tween, ease out
+100
- frame 1: move type down, alpha=0
- window > toolbars > controller: play animation (ENTER)
- start animated sequence at frame 10
- move each animated sequence to start a different
frame
- test animation (ctrl+ENTER)
- file > publish settings: format=SWF, flash version=4, click
PUBLISH
- save
Importing Flash into Dreamweaver
- launch Dreamweaver
- define a new site (site > manage sites > new site):
name=lesson8,
local root folder=jsmith/csc121/upload/lesson8
- open "index.htm"
- delete art associated with "name.gif"
- insert > media > Flash (loop=no)
- file > preview in browser (F12)
- troubleshoot, publish (see instructions from lesson 4)
|
|
|
