Adobe

Flash CS5
Creating a Photo Slideshow

AdobeFlashCS5

CreatingaPhotoSlideshow

What is Flash?
AdobeFlashisamultimediaplatformoriginallyacquiredbyMacromediaandcurrentlydevelopedand distributedbyAdobeSystems.Sinceitsintroductionin1996,Flashhasbecomeapopularmethodfor addinganimationandinteractivitytowebpages.Flashiscommonlyusedtocreateanimation, advertisements,andvariouswebpageFlashcomponents,tointegratevideointowebpages,andmore recently,todeveloprichInternetapplications.AdobeFlashCS5istheapplicationforuserstodesign Flashcontent.ItisapartoftheAdobeCreativeSuite. ThesimplestwaytothinkofhowFlashworksistothinkofhowmoviefilmworks.Thefilmisbroken downintoindividualframes,eachofwhichcontainsapicture.Whenplayedquickly,itgivestheillusion ofmotion.InFlash,youusethetimelinetocreateyourindividualframes,andthentheyareplayedat 24framespersecond. Flashhastheaddedadvantageofusingkeyframestosaveyousometime.Ratherthanhavingtochoose whathappensineachindividualframe,youcanmarkcertainframesaskeyframes,puttingthemost importantpositioningofyourobjectsinthem.YoucanthenletFlashdotheheavyliftingofanimating betweenthekeyframes,movingfluidlybetweenthem.
Menu Bar Properties tab Library tab

Tools panel

Stage or Movie Area

Palettes

Timeline

1TheAdobeFlashCS5Interface

Menubar Stage PropertiesTab LibraryTab ToolsPanel Timeline

Mostofthecommoncommandsarestoredinthemenu. ContainsthecontentoftheFlashmovie. DisplaysthepropertiesofanyitemselectedontheStage. ArepositoryofcontentitemstobeusedintheFlashmovie. Containsthemostcommonlyusedtools. Showsthecontentsofthemovieoveraperiodoftime.

ComputerServices,TempleUniversity1

AdobeFlashCS5

CreatingaPhotoSlideshow

Creating a Flash Project

WeregoingtobeusingFlashtobuildaphotoslideshowwithtextcaptions.Butbeforewecandoit,we havetocreatetheFlashfileinthefirstplace. ThereareafewdifferenttypesofFlashfilesyoucancreate.Mostofthedifferencesinvolve ActionScript,whichisaprogramminglanguageforusewithFlash.Itisthisprogramminglanguagethat allowsyoutodomoreadvancedthingsinFlash,suchasusingthekeyboardandmouse,settingup collisionproperties,andpullinginformationinfromanoutsidesource. ActionScript3.0isthelatestversion,andituseswhatiscalledObjectOrientedProgramming(OOP). EventhoughwearentgoingtouseActionScriptforourslideshow,wellsetitupreadytouse ActionScript3.0,incasewewanttocomebacktoitatalatertime.

Create the Flash file

1. LaunchAdobeFlashCS5 2. OntheWelcomeScreenunderCreateNew,clickFlashFile(ActionScript3.0) TheFlashfileiscreated,butweneedtoconfigureafewthingsbeforeweaddinanycontent.

Set document properties

1. RightclickontheStageandselect DocumentProperties 2. Setthedimensionsto640x325pixels Dependingonthesizeofthepicturesyou areusing,yourdimensionsmaybe differentfromtheonesabove.The imagesforthisprojectwillbe400x300 pixels,sowereleavingalittlespaceon thesidetoaddtext. 3. Changetheframerateifdesired Increasingtheframerateislikemakingthemoviereelgofaster.Ifyoufindyourmovieistoo slowingeneral,youcanincreasethefameratetomakeitfasterandtomaketheanimation smoother. 4. SettheBackgroundcolortomatchwhereyouwillbeplacingthefinishedFlashfile 5. ClickOK Thepropertiesforyourprojecthavebeenset.Nowwerereadytostartbringinginthepictureswellbe using.
2 TheDocumentPropertieswindow

2ComputerServices,TempleUniversity

AdobeFlashCS5

CreatingaPhotoSlideshow

Importing Images into the Flash Project

Nextweneedtoaddthepicturesforourslideshowintotheproject.Thesecanbedownloadedfromthe internet,takenwithadigitalcamera,orevenscanned;aslongastheyreonyourcomputeryoucanuse them. SettheirresolutionsothattheywillfitinsidetheFlashprojectwerecreating.Inourslideshow,the pictureswillbe400x300pixels.YoucanresizepicturesusingPhotoshoporanyotherimageeditor. Ratherthanimportingthemdirectlytoourstage,wellimportthemtothelibrary,aprestagingground wherewecanorganizethecontentgoingintoourproject.

Import images to the Library

1. IntheFilemenu,selectImport,thenImporttoLibrary 2. Browsetowhereyourpicturesarelocatedonyour computer 3. SelectthepicturetoimportandclickOpen Ifallthepicturestobeimportedarelocatedinonefolder, youcanselecteachofthemwhilepressingtheCtrlor Commandkeytoselectmultiplepicturesatthesametime. Inthiscase,welladd3imagescalledSlide1.jpg,Slide2.jpg, andSlide3.jpg. 4. ClickontheLibrarytab.Thethreeimagesshouldbelisted below. Alittlelater,welladdtheseimagestoourstage,butfirstweneed toaddsomeofthelayerswellbeusinginourprojecttokeep differentelementsseparate.

3 LibraryPanel

ComputerServices,TempleUniversity3

AdobeFlashCS5

CreatingaPhotoSlideshow

Working with Layers

Oneofthemorepowerfultoolsatourdisposalislayering.Ratherthan everythingbeingoneflatimage,wecangivetheillusionofsome objectsbeingontopofothers.Inthisway,wecanmakeourpictures fadeinandout.Weregoingtocreateonelayerfortheimage, anotherlayerforthetext,andalayerontopofbothofthemforthe fadeeffect.Aswechangethetransparencyofthefadelayer,the pictureswillslowlycomeintoview.

Create the layers

1. ClicktheNewLayerbutton onthelistoflayersinthe Timelinetwice 2. Doubleclickoneachlayertorenameit a. NamethetoplayerFade b. NamethemiddlelayerText c. NamethebottomlayerPicture Wenowhavethebasicframeworkinplacetostartaddingelementsto ourproject.Nextwellsetkeyframesinourprojectfortheimportant pointsinouranimation 4Eachlayerisplacedontopof

Adding Elements to the Project

theonebelowitinthelist

Beforeweaddanyofthepicturestotheproject,wellneedaplacetoputthemacrossthetimeline. Eachsmallcellinthetimelineisaframe,andrepresentsapieceofananimatedsegment.This determineswhatshouldappearataparticularpointofthemovie.Keyframesrepresentaplacewhere theanimationchangesornewcontentisaddedtothemovie.Forexample,whenfadingapicturein,at onepointtheimageisnotthereatall,andatanother,itscompletelyvisible.Thesewouldbeour keyframes.WecanthenuseaprocesscalledtweeningtohaveFlashanimatebetweenthosetwo points,makingthepicturegofromnothing,toagradualfadein.ItismucheasiertohaveFlashtween theimagethantohavetocreateeverysingleframeofmovement. Wellfirstaddinourkeyframesintospecificcellsofspecificlayers.Thenwelladdthecontentthat belongsineachofthosekeyframes.

4ComputerServices,TempleUniversity

AdobeFlashCS5

CreatingaPhotoSlideshow

Add keyframes to the project

Firstwelladdtheplaceswherethepictureswillchangein ourproject.Frame1alreadyhasakeyframe,sowellspace 5Keyframesthathavecontentappearasblack dots.Keyframeswithoutcontentappearas thepicturesout120framesfromeachother(about45 whitecircles. secondseachat24framespersecond) 1. Clickonframe120 2. IntheInsertmenu,selectTimeline,thenKeyframe Alternately,youcanrightclickthecellandselectKeyframeorusethefunctionkeyF6 3. Repeattheprocessforframe240and360

Add images to the project

1. Clickonframe1 2. DragSlide1.jpgfromthelibrarytothestage.Positionthepicturesothereisenoughspacefor sometextontheside. 3. DragSlide2.jpgtoframe120,andSlide3.jpgtoframe240. Noticethatwhenthepicturesareaddedtothekeyframe,theystayinthemovieuntilthekeyframe changes.

Add shapes to the project

Ifwejustusedourmovieasitis,ourslideshowwouldjustimmediatelyfliptothenextpictureevery4or soseconds.NextwelluseourFadelayertohaveagradualfadeinandoutforeachofourpictures. WelldothisbydrawingawhiterectangleontheFadelayerandchangingthetransparencyofthe rectangleacrossthetimeline. 1. Inframe1oftheFadelayer,clickanddragtodrawawhiterectangle(orthecolorof yourbackground)withnobordercolorovertheentireproject Wereputtingthisinframe1beforewecreateotherkeyframessothatwedont havetodrawitagaininalltheotherkeyframes. 2. InsertkeyframesintheFadelayerforframes10,110,120,130,230,240,250,350, and360 Eachofthesekeyframesrepresentsthebeginningortheendofafade.For instance,startinginframe1therectanglewillbeopaque,andbyframe10itwill befullytransparent,allowingustoseethepicturebeneathit.Inframe110itwill starttobecomeopaqueagain,becomingfullyopaqueinframe120,andthen disappearingagainbyframe130.Thisgivesusafadetimeofabouthalfasecond (10frames).
6Acondensedtoolbar withtherectangletool selected,andawhite fillcolorwithno bordercolor

ComputerServices,TempleUniversity5

AdobeFlashCS5

CreatingaPhotoSlideshow

Edit shape properties

Nowwehavetosettherectangletobetransparentinspecifickeyframes.Wedothisbygoingintothe propertiesoftheshapeandmodifyingtheAlphasetting.Alphaissimplyhowtransparentanobjectis. 100%Alphameanstheobjectiscompletelyopaque,and0%Alphameansitiscompletelytransparent. 1. ClickontheSelectionTool atthetopofthe toolspanel 2. Clickinframe10oftheFadelayerandclickon thewhiterectangleintheproject 3. ClickthePropertiesTabnexttothetoolspanel andselecttheFillColor 4. DragtheAlphapercentageto0% 5. Repeatthisprocessforframes110,130,230, 250,and350,settingtheAlphapercentageto0% ineachofthem Thesearetheframesinwhichthepicturesshouldbe completelyvisible.TheremainingkeyframesintheFade layeraretheframesinwhichthepicturesarecompletely fadedout. Ourmovienowcutsimmediatelytowhiteaswepass throughthepictures.Ournextstepistousetweeningto 7 Thefillcolorproperties haveitgraduallyfadeinorout.

Animating Objects in the Project

Flashhasavarietyofwayswecananimatethedifferentelementsofourproject.Wecanhaveanobject movefromoneplacetoanother,wecanhaveanobjectappearintheproject,wecanhaveanobject changecolor.Theeasiestwaytoaccomplishanimationisthroughtweening.Tweeninglooksatthe differencesbetweenanytwokeyframes,andthengraduallyconvertsoneintotheotheracrossthe timeline.Themoredistancethereisbetweenthekeyframes,theslowertheanimationwillhappen. Wealreadyhavethekeyframesinplace.NowitsjustamatteroftweeningthekeyframesoftheFade layer.

Insert a tween
1. Clickanyframebetweenframes1and10 2. IntheInsertmenu,selectShapeTween

8AcompletedShapeTweenappearsasa filledgreensectionwithanarrow

6ComputerServices,TempleUniversity

AdobeFlashCS5

CreatingaPhotoSlideshow

Thetweenappearsasanarrowconnectingthetwokeyframes. 3. RepeattheprocesstocreateaShapeTweenbetweenframes110and120,frames120and130, frames230and240,frames240and250,andframes350and360.

Preview the movie

Ifatanypointyouwanttoseehowyourmovielookssofar,youcanpreviewyourprojecteasily 1. Clickbackonframe1oftheproject Alternately,youcanclickinthetimelineandpressShift< 2. IntheControlmenu,clickPlay Alternately,youcanpresstheEnterkey WhenyourepreviewinginFlash,themoviewillendinthelastframe.However,whenyouexportit,the moviewillloopoverandoveragain.Mosttimes,thisiswhatwewantforaslideshowonawebpage.

Adding Text to a Project

Thelastthingwellputintheprojectissometextoneachoftheslides.

Create a text box

1. HidetheFadelayerbyclickingthedotunderneaththeeyeinthat layer UnlesswehidetheFadelayer,wewontbeabletoseeanyofthe textwereaddingtotheslides. 2. 3. 4. 5. 6. Selectframe1oftheTextlayer SelecttheTextBoxtool Clicktocreateatextboxtothesideofthepicture Typesomecontentintothetextbox Resizethetextboxifnecessary
9Thefadelayerishidden

Format text
1. ClicktheSelectiontoolinthetoolspanel,andselectthetextbox 2. ClickonthePropertiespanel 3. Modifythetextpropertiesasdesired

10Textproperties

ComputerServices,TempleUniversity7

AdobeFlashCS5

CreatingaPhotoSlideshow

Copy the text to each picture

Allthatslefttodoisaddtexttoeachpicture. 1. IntheTextlayer,addakeyframeatframes 120and240 2. Doubleclickthetextboxtomodifyitineach ofthoseframes 11 Imagewithtextbox 3. UnhidetheFadelayerbyclickingthered undertheeye

Exporting the swf file

WhenwesavetheFlashfile,itisgiventheextensionfla.Thistypeoffileisonlyreadableinthefull versionofFlash.Inthisnextsectionwellexportourmovieasaswf(ShockwaveFlash)file.Theswf canbeembeddedinawebpagewithease,orcanrunonitsownwithastandaloneFlashplayer. 1. IntheFilemenu,selectExport,thenExportMovie 2. BrowsetowhereyouwanttheswfsavedandgiveitanamebeforeclickingSave Alternately,youcanusethekeyboardshortcutCtrlEnter.Thisimmediatelyexportsthe swftowheretheFlashfileissavedandopensittoseeitinaction. Andthatsit!TheFlashfileisexportedandreadytobeused.Manywebeditors,suchasDreamweaver andContributeallowembeddingswffilesintowebpages.IfyougototheInsertmenuofeitherof thoseapplications,youllseeanoptiontoinsertaFlashobject.

8ComputerServices,TempleUniversity