Introduction to Flash

Flash is a tool for creating interactive and animated Web sites.

What you should already know
Before you continue you should have a basic understanding of the following:
WWW, HTML and the basics of building Web ages
!f you want to study these sub"ects first, go to our Home #age
What is Flash?
Macromedia Flash is a multimedia grahics rogram secially for use on the Web
Flash enables you to create interactive $movies$ on the Web
Flash uses vector grahics, which means that the grahics can be scaled to any
si%e without losing clarity&'uality
Flash does not re'uire rogramming s(ills and is easy to learn
Flash vs. Animated Images and Java Applets
)nimated images and *ava alets are often used to create dynamic effects on Web
ages.
The advantages of Flash are:
Flash loads much faster than animated images
Flash allows interactivity, animated images do not
Flash does not re'uire rogramming s(ills, "ava alets do
Flash How To..
Who can View Flash?
Macromedia writes: $!n +etember ,---, .#/ 0esearch, the arent comany of
MediaMetri1, conducted a study to determine what ercentage of Web browsers have
Macromedia Flash reinstalled. The results show that 23.45 of Web users can e1erience
Macromedia Flash content without having to download and install a layer.$
Macromedia +hoc(wave #layer is shied with Windows 26, 27, Mac8+, !nternet
91lorer :/, )merica 8nline, and .etscae .avigator.
!f you do not have the +hoc(wave #layer installed you can download it for free from
Macromedia;s site <,-- =>.
Who can reate Flash !ovies?
To create your own Flash movies you need to buy a Flash rogram.
The latest version from Macromedia is Flash Basic 7 <or Flash #rofessional 7>.
!f you do not have a Flash rogram, you can download a ?- days free trial version of
Flash from Macromedia.
Where to "tart?
)fter you have installed Flash, you should go through the lessons that are included in the
rogram. +tart Macromedia Flash, clic( Hel in the menu and choose Lessons. These
lessons will teach you the basics of Flash.
Flash in HT!#
Flash $m%edded in HT!#
)fter creating a Flash movie you choose File @ +ave )s from the to menu to save your
movie. +ave the file as $+omefilename.fla$.
To embed the Flash movie you "ust made into an HTML age, you should go bac( to
your Flash rogram and do the following stes:
"tep &
:hoose File @ 8en. 8en a Flash movie you have created.
"tep '
:hoose File @ 91ort Movie.
"tep (
.ame the file $somefilename.swf$. :hoose the location where the file is to be stored <in
your Web folder>. :lic( 8=.
"tep )
8en the HTML age where you want to insert your Flash movie. !nsert this code:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
*ote+ This is the minimum code you need to embed a Flash movie in a browser. ) bro(en
icon will aear on the Web age if the user does not have the Flash lugAin installed.
*ote+ !n the code above there is both an Bembed@ tag and an Bob"ect@ tag. This is
because the Bob"ect@ tag is recogni%ed by !nternet 91lorer, and .etscae recogni%es the
Bembed@ tag and ignores the Bob"ect@ tag.
"tep ,
Tye in the address of the HTML file in your browser and loo( at your first Flash movie.
#et the Flash -rogram do the Work
The code above is the absolute minimum code to embed Flash movies in HTML ages. !t
is not recommended to use the minimum code. There should be a few more attributes
added:
classid is an attribute to the Bob"ect@ tag. !t tells !nternet 91lorer to load the
)ctiveC lugAin if it is not installed
luginsage is an attribute to the Bembed@ tag. !t dislays a lin( to the
+hoc(wave download age if .etscae does not have it
The Flash rogram can add these attributes for you:
"tep &
:hoose File @ #ublish. Flash will now create the Bob"ect@, Baram@, and Bembed@ tags
for you. !t will also create the classid and luginsage attributes.
"tep '
8en the HTML document that Flash created, view the HTML source and coy the code
into your HTML age where you want your Flash movie.
"tep (
Be sure that you have the $somefilename.swf$ in your Web folder.
"tep )
Tye in the address of the HTML file in your browser and loo( at your first Flash movie.
Flash Tweening
Tweening comes from the words $in between$.
With Tweening you can go from one (eyframe to another and secify changes in the
animation and let the Flash rogram create the frames in between.
$.ample
!n this e1amle you will learn how to ma(e an ob"ect move across the screen.
"tep &
:reate a small circle to the left in the +tage area. /o this by selecting the circle tool from
the left toolbar. /raw the circle in the +tage area.
"tep '
+elect the )rrow tool from the left toolbar. /oubleAclic( on the circle to select it.
"tep (
.ow we have to convert the circle to a symbol. When the circle is converted to a symbol
we can create instances of the circle. From the to menu choose Modify @ :onvert to
+ymbol. .ame the symbol $Ball$, and select 8=.
"tep )
Do to Frame E- in the Timeline. /o this by clic(ing the gray field below E-. Then right
clic( in this field. :hoose !nsert =eyframe. =eyframes aear as circles in a frame. This
oeration dulicates the image.
*ote+ ) (eyframe secifies changes in an animation. Fou create (eyframes at imortant
oints in the Timeline and let Flash create the frames in between.
"tep ,
+elect the circle and move it to the right a coule of inches.
"tep /
:lic( on the Timeline any lace between Frame E and Frame E-. Then right clic( and
choose :reate Motion Tween.
"tep 0
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.
Flash 1uide Tweening
With Motion Duide Tweening you can move an ob"ect from one location to another along
a secified ath.
$.ample
!n this e1amle you will learn how to draw a ath an ob"ect should follow.
"tep &
:hoose Window @ :ommon Libraries @ Drahics. +elect the image you want to use. !n
this e1amle we have used a blue mouse.
"tep '
:lic( on the image and drag it outside the left edge of the +tage.
"tep (
Do to Frame 4- in the Timeline. /o this by clic(ing the gray field below 4-. Then right
clic( in this field. :hoose !nsert =eyframe. =eyframes aear as circles in a frame. This
oeration dulicates the image.
"tep )
:lic( on the Timeline any lace between Frame E and Frame 4-. Then right clic( and
choose :reate Motion Tween.
"tep ,
0ight clic( on Layer E <:lic( on the layer name, where it says $Layer E$>. :hoose )dd
Motion Duide in the oAu menu. The Flash rogram will now insert a motion guide
layer on to of layer E. Motion guide layers are used to draw lines an animated symbol
should follow.
"tep /
:lic( on the Motion Duide Layer to ma(e sure it is the active layer <:lic( on the layer
name, where it says $Duide: Layer E$>.
"tep 0
:lic( on the #encil tool in the left toolbo1. +et the #encil Mode to +mooth <in the
8tions section of the left toolbo1>.
"tep 2
/raw a line. Begin on the image and draw a line to the other side of the +tage.
"tep 3
Do bac( to Frame E in the Timeline. :lic( on the )rrow tool in the left toolbo1. +elect
the $+na to 8b"ects$ button in the 8tions section of the left toolbo1.
"tep &4
#lace the image with its center on the beginning of the motion guide <the blac( line you
have drawn with the #encil>. The center of the image shows as a G. ) blac( circle aears
when the image is snaed to the motion guide. 0elease the mouse button when the
image is snaed to the guide.
"tep &&
Do to Frame 4-. #lace the image with its center on the end of the motion guide.
"tep &'
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.
Is your Flash !ovie -laying too Fast?
Fou can control this by selecting Modify @ Movie from the to menu. ) Movie #roerties
bo1 will show. The Frame 0ate field sets how many frames to dislay er second. )d"ust
the number to a lower number, and test your movie again.
Flash Tint Tweening
With Tint Tweening you can change the color of an ob"ect.
$.ample
!n this e1amle you will learn how to change the color of an ob"ect.
"tep &
:hoose !nsert @ .ew +ymbol.
*ote+ To add Tint effects the ob"ect must be a symbol.
"tep '
.ame the symbol $changecolor$ and select the Drahic otion in Behavior. :lic( 8=.
*ote+ Fou will now be ta(en to the symbol generator in the Flash rogram. Here you
create symbols. +ymbols can be dragged to the stage of your movie after you have
created them.
"tep (
:hoose the Te1t tool in the left toolbo1. :hoose Te1t @ +i%e @ ?3 from the to menu to
ma(e the te1t big. :hoose Te1t @ +tyle @ Bold to ma(e the te1t thic(.
"tep )
:lic( in the wor( area and write $:olor :hanging Te1t$.
"tep ,
*um bac( to the movie. /o this by choosing 9dit @ 9dit Movie.
"tep /
!nsert the symbol you "ust created into the movie. :hoose Window @ Library. +elect the
$changecolor$ symbol and drag it into the middle of the +tage.
"tep 0
!nsert a (eyframe in Frame E6 and in Frame ?-.
"tep 2
Do to Frame E6. 0ight clic( on the te1t in the +tage. !n the oAu menu, choose #anels @
9ffect.
"tep 3
:hoose Tint from the dro down menu. ) color ma will show. +et the colors to: 0H-,
DH,66, BH-.
"tep &4
:lic( on the Timeline any lace between Frame E and Frame E6. Then right clic( and
choose :reate Motion Tween.
"tep &&
:lic( on the Timeline any lace between Frame E6 and Frame ?-. Then right clic( and
choose :reate Motion Tween.
"tep &'
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.
Flash "hape Tweening
With +hae Tweening you can change one ob"ect into another.
$.ample
!n this e1amle you will learn how to change one ob"ect into another.
"tep &
:hoose the Te1t tool in the left toolbo1. :hoose Te1t @ +i%e @ 47 from the to menu to
ma(e the te1t big. :hoose Te1t @ +tyle @ Bold to ma(e the te1t thic(.
"tep '
:lic( in the wor( area and write $Hello$.
"tep (
0ight clic( on the te1t you "ust wrote and choose #anels @ )lign from the oAu menu.
"tep )
!n the )lign bo1 select the $To +tage$ button first. Then clic( on the $)lign Hori%ontal
:enter$ button and the $)lign Iertical :enter$ button. :lose the )lign bo1.
"tep ,
+elect the )rrow Tool and clic( on the te1t. :hoose Modify @ Brea( )art from the to
menu.
"tep /
!nsert (eyframes at Frame ,4, 6- and 6E.
"tep 0
/elete the te1t $Hello$ in Frame ,4. +elect it and ress the /elete button on your
(eyboard.
"tep 2
Write a new te1t on the +tage. Write $WorldJ$ <Font si%e: 47, style: bold>.
"tep 3
0ight clic( on the te1t you "ust wrote and choose #anels @ )lign from the oAu menu.
!n the )lign bo1 select the $To +tage$ button first. Then clic( on the $)lign Hori%ontal
:enter$ button and the $)lign Iertical :enter$ button. :lose the )lign bo1
"tep &4
+elect the )rrow Tool and clic( on the te1t. :hoose Modify @ Brea( )art from the to
menu.
"tep &&
!nsert a (eyframe in Frame ,3.
"tep &'
/ouble clic( the (eyframe in Frame E. !n the small oAu bo1 clic( on the Frame tab.
+et Tweening to +hae. :lose the oAu bo1.
"tep &(
/ouble clic( the (eyframe in Frame ,3. !n the small oAu bo1 clic( on the Frame tab.
+et Tweening to +hae. :lose the oAu bo1.
"tep &)
/ouble clic( the (eyframe in Frame 6E. !n the large oAu bo1 clic( on the Frame
)ctions tab. :lic( on the G sign. :hoose Basic )ctions @ Do To. :lose the oAu bo1es.
"tep &,
:hoose :ontrol @ Test M
Flash 5utton &
$.ample
!n this e1amle you will learn how to insert an image, convert it to a button, and add a
K0L to it so it becomes a lin(.
"tep &
:hoose File @ !mort to imort an image that will become a button. Locate the image and
clic( 8en. The image will be saved in the Library.
"tep '
+elect the image with the )rrow tool.
"tep (
:onvert the image to a symbol. :hoose !nsert @ :onvert to +ymbol from the to menu.
.ame the symbol $button$, choose Button from the Behavior list and clic( 8=.
"tep )
0ight clic( on the image. :hoose )ctions from the oAu menu.
"tep ,
!n the 8b"ect )ctions bo1 clic( on the G sign. :hoose Basic )ctions @ Det K0L.
"tep /
9nter a full K0L in the K0L field <li(e htt:&&www.w?schools.com>.
"tep 0
:hoose target in the Window field. :lose the 8b"ect )ctions bo1.
"tep 2
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.
Flash 5utton '
$.ample
!n this e1amle you will learn how to create your own button and add a K0L to it so it
becomes a lin(.
"tep &
:hoose !nsert @ .ew +ymbol from the to menu.
"tep '
.ame the symbol $button$, choose Button from the Behavior list and clic( 8=. !n the
Timeline area, you will now see the four states of a button: u, over, down, hit.
"tep (
+elect the 0ectangle tool, ic( a light red Fill :olor and draw a rectangle in the wor(
area.
"tep )
+elect the Te1t tool, ic( a dar( Fill :olor and write $:lic( Me$ over the rectangle.
"tep ,
+elect the )rrow tool and lace the te1t in the middle of the rectangle.
"tep /
)dd a (eyframe to the 8ver +tate in the Timeline. The 8ver +tate indicates what should
haen when you mouse over the button.
"tep 0
+elect the 0ectangle, change the Fill color to a light green.
"tep 2
:hoose 9dit @ 9dit Movie to go bac( to the movie.
"tep 3
:hoose Window @ Library to locate the button. /rag the button into the wor( area.
"tep &4
0ight clic( on the image. :hoose )ctions from the oAu menu.
"tep &&
!n the 8b"ect )ctions bo1 clic( on the G sign. :hoose Basic )ctions @ Det K0L.
"tep &'
9nter a full K0L in the K0L field <li(e htt:&&www.w?schools.com>.
"tep &(
:hoose target in the Window field. :lose the 8b"ect )ctions bo1.
"tep &)
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.
Flash Animation
"tep &
!nsert a te1t in the uer left corner of the +tage area. /o this by selecting the te1t tool
from the left toolbar. Write some te1t in the $te1tarea$.
"tep '
+elect the arrow tool from the left toolbar. :lic( on the te1t once to select it.
"tep (
:onvert the te1t to a symbol. From the to menu choose !nsert @ :onvert to +ymbol.
.ame the symbol $te1t$, choose grahic from the Behavior list and select 8=.
"tep )
Do to Frame ?- in the Timeline. /o this by clic(ing the gray field below ?-. Then right
clic( in this field. :hoose !nsert =eyframe. =eyframes aear as circles in a frame.
"tep ,
:lic( on the Timeline any lace between Frame E and Frame ?-. Then right clic( and
choose :reate Motion Tween.
"tep /
Do bac( to Frame ?- in the Timeline. Move the te1t to the lower right corner.
"tep 0
Ma(e sure the te1t is selected. :hoose Modify @ Transform @ Fli Hori%ontal.
"tep 2
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie. The te1t
should move from the first location <in frame E> to the second location <in frame ,>. The
te1t should also turn around on its way to the second location.
Flash "ound
"tep &
:hoose File @ !mort to imort a sound file. Locate the sound file and clic( 8en. The
sound file will be saved in the Library.
"tep '
:lic( in the first frame of $Layer E$ in the Timeline. :hoose Window @ #anels @ +ound
from the to menu.
"tep (
!n the o u window <+ound> choose the sound you imorted in the +ound field. :hoose
+tream in the +ync field. :lose the o u window.
"tep )
Do to frame 6- in the Timeline. 0ight clic( and choose !nsert Frame.
"tep ,
:hoose :ontrol @ Test Movie from the to menu to test your Flash movie.