Web Animation Using Flash 5

Introduction
Flash, created by Macromedia, Inc., is the software that runs some of the coolest
websites. When you surf the Web and see sites that contain animation across the entire
page or buttons that do spectacular stunts when you click on them, youre probably
seeing some of Flashs magic. If you create a website, you can use Flash to improve it,
so that your viewers will say, Wow!
In this paper, I will discuss the basic skills on creating animation and adding interaction
to a web page using the most recent version of Macromedia Flash, Flash ".
The Benefits of Flash 5
#ou can use Flash " to create simple animation to add to your webpage or you can create
an entire web page or site and incorporate te$t, graphics, interactive buttons, or
animation.
%reate simple or fancy te$t that remains still or appears animated on your web
page.
&se Flash tools to create your own graphics for your web page, or import
graphics.
'nimate graphics and make ob(ects appear and disappear by using the
transparency feature.
Fill shapes and te$t with gradients, which are colors that gradually change into
new colors.
%reate web page buttons that not only lead your viewers wherever you want them
to go but change shape or color at the same time.
'dd sounds or music to your movie.
%reate pop)up menus that viewers can use to navigate your site.
*
Two Ways to Animate Using Flash 5
Frame by Frame+
o #ou move or modify ob(ects one frame at a time. ,his frame)by)frame
animation is time consuming, but often the only way to create comple$
animated effects. It can certainly satisfy your appetite for total control.
,weening+
o #ou create starting frames and ending frames and let Flash figure out
where everything goes in the in)between frames, which is why its called
tweening. ,weening is a lot more fun and easier than frame)by)frame
animation. If you can create the animation you want by tweening, its
definitely the way to go. Flash offers two types of tweening+ motion
tweening and shape tweening.
Motion ,weening+
,his is probably the most common type of tweening. -imple motion
tweening moves your ob(ects in a straight line from here to there. Flash
can, however, easily handle animation along any path you create, even on
with lots of curves.
.
-hape ,weening+
,his type of tweening takes any shape and gradually changes it to
another shape. #ou create the first and last shapes. #our kids call
it morphing. #ou can add shape hints to tell Flash e$actly how you
want your shape to morph.
,weening -ummary
o #ou can change an ob(ects si/e
o 0otate an ob(ect
o %hange color and1or transparency
Art and Animation Interactive
Interactivity means that your viewers interact with your web site. 2$amples include
clicking to go to another web page and choosing to stop the music.
Flash uses actions to specify how the interactivity works. 'ctions are simply short
instructions that tell Flash what to do ne$t. 3y combining actions, you can create very
comple$ sets of instructions that are like programming. #ou can use actions to control
your animation without interactivity, if you want. Flash actions offer a great deal of
fle$ibility.
In Flash ", you can write actions from scratch in 2$pert mode. ,he language is called
ActionScript and its structure is similar to 4ava-cript, which is used to program web
pages.
Flash Lets You ut Actions in !nly Three laces
' frame on the timeline
' button
' movie clip
5
I. Adding Actions to Frames
#ou add an action to a frame to control what happens when the movie reaches that
frame. Frame actions are often used to play a movie clip or to loop a movie so
that a certain section of the animation is repeated. 'nother use for frame actions
is to stop a movie or to automatically link to another &06 7a web address8. #ou
can also use frame actions fro more comple$ programming of Flash.
II. Adding Actions to Buttons
' common way to add interactivity is to create a button. ,he viewer clicks the
button and something happens 7or stops happening8. &sually, you add te$t near or
on the button, so that your viewers know what the button is for.
9
1. When the user clicks the button
2. When the user releases the button of the mouse
3. When the user moves the mouse outside of the hit
area and releases the mouse button
4. When the key you specify ne$t to the :ey ;ress
checkbo$ is pressed
5. When the mouse cursor passes over the hit area of
the button, without clicking.
6. When the mouse cursor passes out of the hit area
of the button, without clicking
7. When the mouse cursor passes over the hit area of
the button, with the mouse button held down
8. When the mouse cursor passes out of the hit area
of the button, with the mouse button held down
1. ;ress
2. 0elease
3. 0elease <utside
4. :ey ;ress
5. 0oll <ver
6. 0oll <ut
7. =rag <ver
8. =rag <ut
"tatement When the Action !ccurs
Button Action "tatements
III. Adding an Action to a Movie Clip
With Flash ", you can now add an action to a movie clip instance. ;reviously,
actions were only on frames or in buttons. 'ctions in movie clips work within the
,imeline of the movie clip, not on the main ,imeline of the entire movie.
,herefore, you can create movie clips that are interactive within themselves.
When you create an action, you first specify what has to occur for the action to be
e$ecuted. For e$ample, if you add an action to a button, you can specify that the action
will happen when the user releases the mouse button after clicking it.
>e$t you specify the action itself. ,he action must come from the list of actions in Flash.
Many of the actions have parameters that you must add. For e$ample, to get a button to
bring your viewer to another web page, you use the ?et &06 action and add the e$act
&06 7web page address8 as a parameter.
#acromedia Action"cri$t Tutorial
http+11www.macromedia.com1support1flash1action@scripts1actionscript@tutorial1
#acromedia !nline Action"cri$t %ictionary
http+11www.macromedia.com1support1flash1action@scripts1
"
1. 's soon as the movie clip loads into memory,
that is, pretty much at the beginning of the
movie.
2. 's the movie clip enters each frame.
3. In the first frame after the movie clip is removed
from the ,imeline.
4. When the 7left8 mouse button is clicked.
5. When the 7left8 mouse button is released.
6. When the mouse is moved 7anywhere on the
screen8.
7. When any key is pressed.
8. When any key is released.
9. When data is received from either a
loadAariables or loadMovie action
1. 6oad
2. 2nterFrame
3. &nload
4. Mouse down
5. Mouse up
6. Mouse move
7. :ey down
8. :ey up
9. =ata
"tatement When the Action !ccurs
#ovie &li$ Action "tatements
Flash 5 Limitations
'lthough Flash " may be wonderful, it still isnt for everyone. Flash doesnt load as
Buickly as plain te$t or simple graphics. -o if you have a "Ck modem, you may be
waiting a while for the page to load. ,here is no point in using Flash on your website if
you want simple pages consisting of mostly te$t and a few graphics.
"ummary
Websites are getting more and more sophisticated. 3y using animation and special
effects using Flash ", you can distinguish your website. &sing animation isnt hard, and
you dont have to be an e$pert. -o, anyone can create simple animations using Flash " to
enhance their website. 'lso, remember that not everyone has a dedicated internet line
and that there are still people using "Ck modems. Daving a "Ck modem would make a
flash web page load more slowly and could make it unattractive to prospective visitors.
Ten 'reat Web "ites That Use Flash
:. -ports
' great preloader gets you Buickly to the buttons so you can choose bikes,
snowboards, skis, or skates. ,ry the bike button for a way cool cartoon. ,he site
includes a -kip Intro button.
o http+11www.k.sports.com
%rashMedia
,his creator of web sites has created a comple$ site for itself. ,he site includes
the choice to download the necessary players and an alternate D,M6 site. ,he 5)
= effects are great. %lick >avigation to display the buttons. %lick %lients and
follow the directions to drag)and)drop the client buttons into the empty bo$.
o http+11www.crashmedia.com
Intellispace
Intellispace, the first managed optical I; network in the &.-., starts out by
offering three optionsE to enter the site, to download the Flash player, or to go to
the D,M6 site. When you enter the Flash site, you see a very pretty intro that
relates to the companys business. ,here are Music <n1<ff and -kip Intro
buttons.
o http+11www.intellispace.com
=ennis Interactive
=ennis Interactive, a multimedia design company, offers an innovative site with
unusual animation and button sounds. #et the site never loses its focus. ,he site
C
offers a non)Flash alternative as well as an opportunity to download the Flash
player.
o http+11www.dennisinteractive.com
'reeba
'reeba offers a variety of Internet services and solutions for companies. ,heir
site is beautiful, yet simple and easy to use. #ou always know how to get the
information you need. ,hey offer a non)Flash site as well.
o http+11www.areeba.com.au
9site
9site, a Web design and consulting company, offers a nice site for your inspection.
,he main page is a good e$ample of an D,M6 page with Flash elements. %hoose
the 'merican flag for the 2nglish site. #ou can see a great e$ample of typewriter
te$t F te$t that appears letter by letter. >e$t is an entertaining sci)fi movie and
you finally arrive at the site content.
o http+119site.co.il
Ditachi =igital
,his beautiful yet simple site is dedicated to e$plaining Ditachi =igital ,A. #ou
can download a screensaver from this site.
o http+11www.hitachidigitaltv.co.uk
=avid ?ary -tudios
%reated in a futuristic style, this web site is the home of =reamwave ;roductions,
Inc., speciali/ing in high)end, interactive Web and %=)0<M applications. ,he
site features very unusual menus.
o http+11www.davidgarystudios.com
,ele>et
%lick -ite Introduction to see a great movie. ,his is the site of ,ele>et -ervices,
6td., a &nited :ingdom)based company speciali/ing in Internet consultancy,
design, and e)commerce applications.
o http+11www.telenet.co.uk
0ay of 6ight ;roductions
;robably the most beautiful site. 0ay of 6ight ;roductions10epublik <ne, 66%
offers a full range of design and Internet solutions for Web sites.
o http+11www.rayoflight.net
G
%ownload
Flash 5 for & or #ac(
?o to http+11www.macromedia.com1software1downloads1
From the list, find Flash and choose whether to buy or try
#oull be asked to fill out some information about yourself before you can download any
trial version of the software.
%ownload si)e+
Windows+ *H." M3E Macintosh+ .".G M3
Available languages for trial+
2nglish, French, ?erman and 4apanese
Available languages for $urchase+
2nglish, French, ?erman, 4apanese, Italian, -wedish, -panish and ;ortuguese
Full urchase rice
Macromedia Flash " I5JJ
H
"ystem *e+uirements
Authoring
Windows J"1JH1M21>,1.KKK or later
*55 MD/ Intel ;entium processor
5.mb of free available system 0'M
9Kmb of available disk space
."C color monitor capable of HKK$CKK resolution
%=)0<M drive
<r
;ower Macintosh with Mac <- H." or later
5.mb of free available system 0'M
9Kmb of available disk space
."C color monitor capable of HKK$CKK resolution
%=)0<M drive
laybac,
Microsoft Windows J", JH, Me, >,, .KKK ;rofessional, or later
>etscape plug)in works with >etscape 5 or later
Macromedia Flash ;layer 4ava 2dition reBuires a 4ava)enabled browser
'ctiveL control works with Microsoft Internet 2$plorer 5 or later 7Windows J" or later,
Windows >,8
<r
Macintosh -ystem H.* or later
>etscape plug)in works with >etscape 5 or later, and Microsoft Internet 2$plorer 5.K or
later
Macromedia Flash ;layer 4ava 2dition reBuires a 4ava)enabled browser
<r
6inu$ 0edhat C.K or above 7;entium)based only8
>etscape >avigator 9 or later, with standard install defaults
<r
-olaris .." or ..C 7.9)bit color, -;'0% only8
>etscape >avigator 5 or later, with standard install defaults
J
*eferences
http+11www.*animationflasharchitecture5dwebflashanimation.com1
M* 'nimation Flash 'rchitecture 5= Web Flash 'nimation+
3oca 0aton, Florida, animation studio works on Flash animation, Web design, 5=
architecture rendering, 5= modeling, and computer)animation presentations.
http+11www.charleskaufman.com1animation.html
Flash webmaster presents a varied selection of original cartoons and animated greeting
cards.
http+11www.virtual)f$.net1
Flash 0esource ?uide N ,utorials+
Aiew tutorials, message boards, and links to Flash resources for the aspiring Macromedia
animation artist.
http+11www.macromedia)flash)")infocenter.com1
Folks wanting to learn about the Flash " utility can consult a F'O, find technical info,
click links to tutorial sites and download the player.
http+11www.macromedia.com1support1flash1
,his support site will have links to some common Buestions that may be asked, technical
notes on flash ", training information, and more.
http+11www.flashkit.com1
<ffers tutorials, reviews, news and sound loops. -ubmit your own animations, play
games and search for employment.
,his paper is written by #u(ung :im for the course 2=%5H"? Multimedia 'uthoring at
the &niversity of ,e$as ) 'ustin


*K