II II - tciwiki

Files
FlashlTutorial6 CreatingSpecialEffectsand Publishing
I
Practicethe skills
you learnedin
tfie tutorial using
the same case
scenario.
Review Assignments
ul
{J
lNrg
**
,l
I
II
tv
A
h
salmon.ipg,
DataFilcsnecdedfor the ReviewAssignments:
iennysAlt.fla,
hutBanner"iPg
sarnple,&it.htun,
OysterHut
versionof theJenny's
Aly wantsyou to makesomechangesto an alternate
in the seabitmap
a
salmon
to
add
you
She
wants
it
to
she
shows
bannerbefore
Jenn!.
for
displayed.
be
fish
bitmap,
the
after
will
appear
bitmap
The
salmon
food animation.
the
extend
will
in.
This
fades
bitmap
the
salmon
while
out
fade
then
two seconds,and
text
in
the
letters
the
change
you
to
Jenny's
asks
She
also
animationby threes.econds.
fill.
blockto a gradient
folder.includedwith your
file locatedin the Flash6\Review
1. Openthe jennysAlt.fla
jennysAlternate.fla
in the samefolder'
DataFiles,and'thensavethe banneras
folderincludedwith
2. lmportthesalmon.jpgbitmaplocatedin the Flash6\Review
so
bitmap'sproperties
salmon
the
Modify
library.
document's
your DataFilesinto the
is
80.
thatthe qualityvalue
andthenadda
animationmovieclip in symbol-editing.mode,
3. open the seafood
new layerabovethe shrimplayerand nameit salmon.Makesurethe salmonlayer
hidethe contentsof the fish layer,the
is indentedunderthe masklayer.Temporarily
shrimplayer,and the masklayerwhileyou work with the salmonlayer.
and thendraga copyof the
4. At Frame120 of the salmonlayer,inserta keyframe,
to 0 and
X andY coordinates
the
set
lnfo
panel,
ln
the
salmonbitmapto the Stage.
bitmap
salmon.jpg
the
Convert
is
selected.
point
makesurethe centerregistration
point
registration
the
center
with
symbol
salmon
named
into a movieclip symbJ
selected.
At Frame120,changethe alpha
5. At Frame144of the salmonlayer,inserta keyframe.
amountof the salmonsymbolto 0%. At Frame144,makesurethe alphaamount
is j 00%.Createa motiontweenat Frame120. lnserta color propertykeyframeat
Frame143andsetthe alphaamountto 100%.
add regularframesto extendthe layers.
6. At Frame216of all the layers,
at Frame192 and at Frame216. AtFrame216,
Z. ln the salmonlayer,insertakeyframe
changethe alphaamountof the salmonsymbolto 0%. Createa motiontween
at Frame192. lnserta color propertykeyframeat Frame215 and setthe alpha
amountto 0%.
hidethe contentsof the salmonlayerand showthe contentsof the fish
B.
- Temporarily
selected
SelectFrame120 through Frame144of ihe fish layer,and then drag_the,
f
"yul.
layer'
fish
of
the
216
Frame
through
192
fri*es to the right,placingth-emin Frame
9. Showall the tui"rt, toct<att the layers,testthe animation,and thenexit symboleditingmode.
selectthe lenny'stextblock,andthenapplythe BreakApartcommand
i 0. On the Stage,
twiceto convertthetextto fills.
linear
usetheColorpanelto selectthe white-to-black
11. With thetextstillselected,
and leavethe right
gradient,changethe color of the leftcolor pointerto #FF6600,
colorpointerat S000000.
then changethe
12. publishthe bannerasa SWFfile with the namealtBanner.swf,,and
a
not
do
and
options
Settings
to uncheckthe SWF
Senerate
Flashpublishsettings
sizereport.
in the Flash6\
Web.page.loc.ated
13. In yourtexteclitor,openthe sampleAlt.htm
tagthathasthe
image
the
replace
Files,
Datu
your
with
incluied
folder
Review
the
reference.using
altBanrr_er.swf
the
with
tag
EMBED
an
to
reference
hutBanner.jpg
page
Web
height="250">so that the
width=uSOO"
code <embeJsrc="attBanner.swfil
banner.
new
the
display
will
Tutorial6 CreatingSpecialEffectsand publishingFilesI Flash
14. saveandclosethesampleAlt.htm
file,andthenpreviewsampleAlt.htm
in a web
browser.
15. Submitthe iinishedfilesto yourinstruclor.
. . ateand export
. zo with a
't'sap fade
;- tation and a
:t::ient fill.
€-asc Fs$bEegcc
€
Frcafu$eEcr
Fffi
€
Da[.]ilila*nstcdeei
t*r ihigCa"eFrrrhletrn:
[<6;rtogc.rl*,
t.;]ifi"pet?.gpq
$rr,t
Katie'sPetResort KatieasksJohnto developa new logofor the resort's
Web site.She
wantsthe logoto includetwo pictures
thataie eachdis[layedfor a few seconds
at a
time.lohnasksyou to createan animationof the pictures
whereonefadesout whilethe
otherfadesin to useasthe background
for the logo.He alsowantsyou to createa gradient to useasthe fill for the lettersin the logo.Figure6-43 showsthe completedlo96.
Katie'sPet Resortlogo
1' Open the kprLogo.flafile locatedin the Flash6\Casel
folderincludedwith vour
DataFiles,and thensavethe documentaskatielogo.flain the samefolder.
2. lmportthe petl.jpgand pet2.jpgbitmapslocatedin the Flash6\Case1
folder
includedwith yourDataFilesdirectlyintothe document's
library.Modifyeachbitmap'sproperties
by changing
the compression
qualityto B0%.
3. Createa new movieclip symbolnamedresortanimation.ln symbol-ecliting
mode,
dragan instanceof the,petl.jpg.bitmapto the centerof the stage,and then]in the
Infopanel,set its X andY coordinates
to 0, and, if necessary,
selectthe centerregistrationpoint.Convertthe bitmapinstanceto a movieclip symbolnamedpetl
symbol.RenameLayer1 to petl
4. In the petl layeqinsertkeyframes
at Frame36 and Frame48. At Frame36, setthe
alphaamountfor the petl symbolinstanceto 100%.At Frame48, changethe alpha
amountfor the petl symbolinstanceto 0o/o.
Createa motiontweenat Fiame36,'add
a co,lorpropertykeyframeat Frame47, andthensetthe alphaamountfor the petl
symbolinstance
to 0% so thatthe petl symbolinstance
fadesout betweenFrame36
and Frame48.
5. In the petl layer,inserta keyframeat Frame84, createa motiontweenat Frame84,
extendthe motiontweento Frame96, add a color propertykeyframeat Frame9G,
and,thensetthe alpia amountfor the petl symbol'insiance
to i ooy" so that the petl
symbolinstancefadesin betweenFrame84 and Frame96.
6. In theTimel.ine,
add a new layerand nameit pet2.ln Frame36, inserta keyframe,
and,thgladd an instanceof the pet2.jpgbitmapto the stage.ln the Info panel,centh9 bitmapon the Stageand selectits centerregistration
point.Conveitthe petz.
ler
jpg bitmapinstance
to a movieclip symbolnameJpet2symbol.
-
FlashI Tutorial6 CreatingSpecialEffectsand PublishingFiles
7. In the pet2layer,inserta keyframeat Frame48. In Frame36, changethe alpha
amountof the pet2symbolto 0%. Createa motiontweenat Frame36, and thenadd
a color propertykeyframeat Frame47, andsetthe alpha amountfor the pet2 symbol
instanceto 100%so thatthe pet2symbolinstancefadesin betweenFrame36 and
Frame48.
B. In the pet2 layer,inserta keyframeat Frame84, setthe alphaamountfor the pet2
symbolinstanceto 'l00%, createa motiontween,inserta color propertykeyframe
at Frame96, andthensetthe alphaamountto 0% so thatthe peCIsymbolinstance
mode.
fadesout betweenFrame84 and Frame96. Exitsymbol-editing
9. ln theTimeline,selectthe backgroundlayer,and thendraga copyof the resortanimationfrom the libraryto the centerof the Stage.ln the Align panel,alignthe bitmap to the left edgeand the top edgeof the Stage.Lockthe backgroundlayer.
10. In the petresortlayer,changethetextto fillsby applyingthe BreakApart
commandtwice.
In the Colorpanel,changethe
11. In the Swatches
panel,selectthe grayradialgradient.
gradiThetext now hasa white-to-yellow
color of the rightcolor pointerto #FFFF33.
ent. Deselectthe text, and then lock the pet resortlayer.
12. Publishthe logoin the SWF,HTML,andJPECfileformats.Usethe defaultnames
files.
for the published
and settings
13. Previewthe logo in aWeb browserusingthe HTMLfile createdby Flash.
14. Submitthefinishedfilesto yourinstructor.
I
I
I
I
Createand then
publish a logo
with a bitmap
and a custom
gradient.
eass Frqlh$effi ?
h
*J
&
#*
€
tiraife"ii:q
Daia Filcrn*"*dtrliqr thi* {ase {'r*tlleffi;acrN-og,r:,f!*,
Alamo CityZoo JanetasksAlex to createa new logothat can be usedas an advertisementon otherWeb sitesto promotethe AlamoCity Zoo'snew giraffeexhibit.Alex
thatthe logoshouldincludea pictureof a giraffeand usea gradientin the backsuggests
ground.To completethe logo, you needto import a bitmapof a giraffeand then add the
with a radialgradient
for the logo.Youwill alsoadd a rectangle
bitrnupas a background
overthe bitmapto enhancethe logo.Figure6-44 showsthe
that is.partiallytransparent
completedIogo.
Alamo Citv Zoo
{olderincludedwith your
1. Open the aczlogo.flafile locatedin the Flash6\Case2
DataFiles,and t"hensavethe documentaszoologo.flain the samefolder.
folderincludedwith you'
bitmaplocatedin the Flash6\Case2
2. lmportthe giraffe.jpg
compression
bitmap's
the
change
librrary,
and
then
DataFilesti th" OoJu*ent's
qualityto B0o/o.
FilesI Flash
Tutorial6 CreatingSpecialEffects
andPublishing
layer,draga copyof the giraffebitmapfromthe libraryto the cen3. In the background
ter of the Stage.In the Positionand Sizesectionof the Propertyinspector,setthe X
to 0. Lockthe backgroundlayer.
andY coordinates
4. In theTimeline,inserta new Iayerabovethe backgroundlayerand nameit gradient.
panel,selectthe grayradialgradient.
ln the Colorpanel,changethe
In the Swatches
Hex valueof the rightcolor pointerto f FFFF99.
to makethegradientpartially
5. In theColorpanel,setthe alphaamountto 10o/o
transparent.
with no strokeandthe new gradient
as its
6. In the gradientlayer,drawa rectangle
fill thaicoversthe entireStage.lf n"."ttury, in the Propertyinspector,
setthe X and
Y coordinates
to 0, setthe width to 300, and setthe heightIo 225,
7. With the rectanglestillselected,usethe CradientTransform
tool to displaythe gradisideof"the
ent'sboundingIircle.Dragthe middleeditinghandleon the lower-right
reduce
circle
to
the
gradient's
radius
to
about
half
its
original
size.
bounding
centerpointto the upper-left
cornerof the Stagebetweenthe letB. Dragthe gradient's
ters"A" and "1"in the "Alamo"text.
dialogbox, createa new profileand nameit zooProfile.Set
9. ln the PublishSettings
to publisha Flashfile,an HTMLfile,anda JPEGimagefile usingthe
the zooProfile
defaultnames.
10. In the Flashpublishseftings,
changethe playerversionto FlashPlayerB anddo not
includehiddenlayers.ln the HTML publishsettings,
in the Playbacksection,do not
displaythe menuanddo not loop.In theJPECpublishsettings,
changethequality
valueto 90. Publishthefiles.
11. Previewthe logoin a browserusingthe HTMLfile createdby Flash.
12. Submitthe finishedfilesto yourinstructor.
. Z:'ld
ui
^ en
uti
ti"
, :Taps
' = :k an d
- ated
iii ,
,-,'
WestcreekNursery Alice and her stafflike the interactivelogo developedfor the
Westcreek
NurseryWeb site,but thinkthat picturesof flowersin an animationcould
,,,
i,'j:r enhancethe logo evenmore.Amandaagreesand wantsyou to add somesamplepictures
,,i- of flowersto the logo.Amandaalsosuggests
changingthe logo'stitleto makeit more
r -,1 dynamic.You'llhelpAmandareviseth6-logoby creatingan Jnimationwith the flower
bitmapsand addinga new moredynamictitle.Figure6-45 showsthe completedlogo.
WestcreekNurserv
Ir\fe
dqlivfrcd freshl
FlashI Tutorial6 CreatingSpecialEffectsand PublishingFiles
folderincludedwith your
1. Open the wcnLogo.flafile Iocatedin the Flash6\Case3
DataFiles,and then savethe documentasflowerlogo.flain the samefolder.
2. Importthe flowerl.jpg,flower2.jpg,and flower3.jpgbitmapslocatedin the Flash6\
library.Modifythe
Case3folderincludedwith your DataFilesto the document's
qualityof B0%.
properties
of eachbitmapto havea compression
mode,
3. Createa new movieclip symbolnamedfloweranimation.In symbol-editing
the
extendLayer'lto Frame90,renameLayer1 toflowerl, draganinstanceof
flowerl bitmapto the centerof the Stage,and then usethe lnfo paneIto centerit on
the Stase.
4. Convertthe flowerl bitmapinstanceto a movieclip symbolnamed{lowerl
- symbol.Createa motiontweenbetweenFrame10 and Frame20 to fadeout the
(thealphaamountshouldbe 100%at Frame10 and 0%
flowerl symbolinstance
at Frame20).Createa motiontweenbetweenFrameB0 and Frame90 to fadein
theflowerl symbol(thealphaamountshouldbe 0% at FrameB0 and 100%at
Frame90).
andthendrag
5. Inserta new layerand nameit flower2.In Frame20, inserta keyframe
Info
panelto
using
the
the
Stage,
bitmap
to
the
center
of
flower2
instance
of
the
an
centerit.
to a movieclip symbolnamedflower2symbol.
5. Convertthe flower2bitmapinstance
Createa motiontweenbetweenFrame20 and Frame30 to fadein the flower2symbol. Createa motiontweenbetweenFrame40 and Frame50 to fadeout the flower2
sYmbol.
andthen
7. Inserta new layerand nameit flower3.In Frame50, inserta keyframe,
using
the
Info
the
Stage,
of
flower3
bitmap
to
the
center
instance
of
the
dragan
Stage.
it
on
the
panelto center
B. Convertthe flower3bitmapinstanceto a movieclip symbolnamed{lower3symbol.
Createa motiontweenbetweenFrame50 and Frame60 to fadein the flower3symbol. Createa motiontweenbetweenFrame70 and FrameB0to fadeout the {lower3
symbol.
9. lnserta new layerabovethe flower3layerand nameit mask.Changeit to a mask
Theflowerlayers
layer,and then changealt of the flowerlayersinto maskedlayers.
mask
layer.
the
shouldall be indentedunder
0.50,nostroke,
f"f eXp[-Sffi€ tO. lnthemasklayer,drawafive-sidedstarshapewithapointsizeof
width to 200, its
and a fill color of your choice.ln the lnfo panel,setthe starshape's
to 0. Lockall of the layers.Exitsymbolheightto 195,and itsX andY coordinates
tool in theToolspanel,
editingmode.(Hintfo drawa starshape,selectthe PolyStar
and
sectionof the Propertyinspector,
click the Optionsbuttonin theToolsSettings
dialogbox')
optionsin theToolSettings
thensetthe appropriate
11. Inserta new layerand nameit star.Movethe starlayerbelowthe contentlayer.
symbol[o the centerof
of thefloweranimation
In the starlayer,addan instance
the Stage.
mode.Copythe textblock in the titletext
12. Openthe title symbolin symbol-editing
layer.Add a new layerand nameit title mask.ln this layer,usethe Pastein Place
commandto pastea copyof the text in the samerelativepositionas in the titletext
deselectthe text.
layer.lf necessary,
fiIgXPLORE t:. Createanewlineargradient.SelectthegraylineargradientfromtheSwatchespanel
in
asa startingpoint. ln,theColorpanel,add two morecolor pointersclosetogethe.r
white.
new
gradient.
colors
Make
these
two
the centerof the gradientdefinitionbar.
Themiddleof the gradi(#FFFFFF).
gradientcolor black(#000000).
MaketheJar.left
(Hrnt:
bar to placea new
color
definition
Clickthe
ent hasa narrowwhiteband.
colorpointer.)
I4. lnserta new layerabovethe title text layerand nameit gradient.In the gradient
with the gradientyou createdasthe fill and with no stroke
layer,drawa rectangle
and is 150 pixelswide and 55 pixetshigh.
thatcovers"West"in "Westcreek"
Tutorial6 CreatingSpecialEffects
FilesI Flash
andPublishing
15. Convertthe rectangle
to a movieclip symbolnamegradientsymbol.Extendall the
layersto Frame20. Insertkeyframes
in the gradientlayerat Frame10 and Frame20.
In Frame10 of the gradientlayer,movethe gradientinstanceto the rightso that it
coversthe lastiour letters("reek"1of"Westcreek."
Createmotiontweensat Frame1
and FrameI0.
16. Changethe title masklayerto a masklayer,and makesurethe gradientlayer
becomesthe maskedlayer.Thelettersmaskthe gradient,givingthe texta moving
highlighteffect.Exitsymbol-editing
mode.
t/In the PublishSettings
dialogbox,createa new profileand nameitwcnProfile.
Set
the profileto publisha Flashfile,an HTMLfile,a GIFfile,anda PNCfile usingthe
defaultfilenames.
18. In the Flashpublishsettings,
changethe Playerto FlashPlayer9, and thencheckthe
movie,lncludehiddenlayers,IncludeXMPmetadata,
Compress
and Protectfrom
importoptions.In the HTMLpublishsettings,
usethe defaultsettings.
In the GIF
publishsettings,
checktheOptimizecolors,lnterlace,
Smooth,
and Dithersolids
options.In the PNC publishsetings,serthe Birdepthto 24-bit.publishthe files.
ji KX p F"*R€ 19. Exportthe new profileand saveit with itsdefaultname
in the Flash6\Case3
folder
includedwith yourDataFiles.(Hint:Clickthe lmporl,/export
profilebuttonin the
PublishSettings
dialogbox, and thenclick Export.)
24. Previewthe logo in a browserusingthe HTMLfile createdby Flash.Makesurethe
flowerswithin the starfadein and out and the "Westcreek"
text hasthe gradient
movingthroughits letters.
21. Submitthefinishedfilesto yourinstructor.
'=a nd
l] l
,t a banner
: cttmap
:-ound
,stom
'it1:,
u!
Ftrt
&
(J
Case Problem 4
Data Fileneededfor this CaseFrchlem:mission,jpg
MissionsSupport Association BrittanyasksAnissato createa new bannerthat can
be usedon the MissionsSupportAssociation
Web siteto promotethe association
to
itsmembers.
Thebannershouldincludethe mission,jpg
bitmap(whichhasthedimensionsof 300 pixelsx 300 pixelst,motiontweensthatcreatea fadeeffectfor a symbol
instance,
and gradients.You
willdesignand createthenewbanner.Figure6-46shows
one possible
banner.
SampleMissionsSupportAssociationbanner
FlashI Tutorial6 CreatingSpecialEffectsand PublishingFiles
in the Flash6\Case4
1. Createa new document,and thensaveit as msaPromotion.fla
to setthe dimenfolderincludedwith your DataFiles.Editthe documentproperties
sionsandStagecolorappropriately.
folderincludedwith you,
bitmaplocatedin the Flash6\Case4
2. lmportthemission.jpg
of the bitmapto allow
library.Modifythe properties
DataFilesinto the document's
quality
setting
of
B0%.
a
to
have
and
smoothing
bitmap.
in the bannerdesignusingthe mission.jpg
3. Createa fadeeffectsomewhere
Forexample,you could createa movieclip symbolof the bitmapand havethe
imagefadein asthe banner'sbackground.
to the banner,usingthe
name,MissionsSupportAssociation,
4. Add the association's
movie
clip symbolthat
a
create
example,
you
can
For
your
choice.
of
properties
thatfadesin
gradient
custom
with
a
shape
on
background
block
a
inciudesthe text
banner.
or movesontothe
to the banner,usingthe text properties.
5. Add the key pointsaboutthe association
and
of your choice.Youcan usethe textSpecialevents,Volunteeropportunities,
Educational
tours,or makeup your own. Forexample,you could makethe textfade
the fill colorto match
5. Useat leastone gradientfill color in the banner.Customize
appropriately.
the gradient
your bannerdesiln.Transform
In
Z. Publishthe bannerasa Flashfile andan HTMLfile usingthedefaultfilenames.
movie,lncludehiddenlayers,Include
checkthe Compress
the Flashpublishsettings,
use
and Protectfrom importoptions.In the HTMLpublishsettings,
XMPmetadata,
thedefaultoptions.
B. Previewthe logo in a browserusingthe HTMLfile createdby Flash.
9. Submitthefinishedfilesto yourinstructor.
ENDING DATA FILES
[-**-r
I ilT:_r
bariner..tir'j
b;: ir:i*i ilef:r'*ii.tx i
l*r:nvsi*gi:.il;
jtn nvsLrigr.-:.
gii
i:h*lr,ciJa*fier"iln
,r:fi*irliia**e t"ht;"r-:
i
p i:ir:lts ii r:ri i: e r..rrvl:
hli]]
s.l*-rpie.
aitSanii*r":tiif
i*n ii'r';Alteri:ai*.il;:
san-rpltAii.i:it'r
i---**]
| '::::_l
:cr:i-r:gc"iia
Zi,,i; i,,* i:r-:.it ii-;fj
zr:i:Liiq*.Ji:*
21r-:;!-5g1-1-.c'.g1
ficrr,'*:lL,:g*"11;
iiclv'erLr:g*.g!i
i
ltii"l.:
iirwer Lr;5lc;.
f ir-li.ll-.i-L* 1lr;.g:n g,
LLlgs.51.\'f
{l{-:\,1r*f
i
1"4* Prlii'iIi:.:{"il-i
kati*L*gc.i'!.:
\ai r6 L{} q{ r.i l i ,l -l !
l<:iiiei+go"jrg
slvi
i<;liieLr::ic.
ic:r.i!:.
rrla Fr*n-r.*:
ir,'
r ;saFr*nrctir;;r.h
:r sa f] rii m i:ti r-,r^r.-s\,\i