Tải bản đầy đủ - 0 (trang)
Chapter 9. Adding Flash, Video, and Sound Content

Chapter 9. Adding Flash, Video, and Sound Content

Tải bản đầy đủ - 0trang

SeeLesson9inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson9to

viewthevideotrainingfileforthislesson.



Chapter9.AddingFlash,Video,and

SoundContent

Asconnectionspeedsincrease,peoplearedemandingmore

interestingcontent.Onewaytomeetthatneedistoaddmore

dynamiccontent,insteadofjustplaintext,toawebsite.

Animations,sound,andvideoarehelpingtofitthebillinterms

ofmakingwebcontentmorecompellingandkeepingwebsite

visitorscomingbackformore.



9.1.Startingup

Beforestarting,makesurethatyourtoolsandpanelsare

consistentbyresettingyourworkspace.See"Resettingthe

Dreamweaverworkspace"onpage3.

Youwillworkwithseveralfilesfromthedw09lessonsfolderin

thislesson.Makesurethatyouhaveloadedthedwlessons

folderontoyourharddrivefromthesuppliedDVD.See

"Loadinglessonfiles"onpage3.

Beforeyoubegin,youneedtocreateasitedefinitionthat

pointstothedw09lessonsfolderfromtheincludedDVDthat

containsresourcesyouneedfortheselessons.GotoSite>

NewSite,or,fordetailsoncreatingasitedefinition,referto

Lesson2,"CreatingaNewSite."



SeeLesson9inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson9to

viewthevideotrainingfileforthislesson.



9.2.Makingwebcontentinteresting

Addingvideo,sound,andanimationtoawebsiteisasurefire

waytomakethesitemoreinterestingandengaging.Video,for

example,playsakeyroleinsupplyinginterestingandvaried

webcontent,inthatitgivestheaveragepersonanopportunity

toshowcasehis/hertalentstoaworldwideaudience.Websites

suchasYouTubeandMySpaceareprimeexamplesofhowvideo

isimpactingtheInternetinthisway.Videoalsoallows

companiestopostcommercials,speeches,andothercorporate

contentthatmaynotnormallybeavailabletothepublic.

Soundallowsyoutoenhancewebpagesbysupplementing

visualcontentwithmusicorsoundeffects.Soundalsoinspires

userinteraction(asyou'llseelaterinthislesson),thereby

givingtheuseramoreinterestingonlineexperience.

Animationgiveswebpagesawholenewlifebyadding

movementandeffectstoimagesthatstillpicturesjustcan't

match.Somethingmovingonawebpageautomaticallydrawsa

visitor'seye.Movementisespeciallyeffectiveforbannerads,

buttons,andwhateverelseyou'dlikeyourvisitorstopay

attentionto.



9.3.InsertingFlashmovies

Adobe'sFlashCS3Professionalapplicationisprimarilyusedto

createanimationandinteractiveprojects.Intermsof

animation,youcanuseFlashtocreateanimatedwebbanners,

buttons,splashpages,slideshows,andmore.InsertingFlash

animationsintoyourwebpageisagreatwaytobringlifetoan

otherwisestaticenvironment.

Webbannersareabigpartofadvertisingthesedays.Andifa

webbannerincludesmovingelements,thatmovementwill

automaticallydrawtheuser'seyerighttothebanner.Inthis

exercise,youwillplaceabanneronthehomepageofthe

museumwebsiteyou'vebeenworkingoninthisbooktohelp

promotethemuseum'slearningcenter.

1. IntheFilespanel,navigatetothedw09lessonsfolderand

insidethePagesfolder,double-clickthebanner.htmlpageto

openit.



Figure9-1.Double-clickbanner.htmltoopen

thisfile.



2. ClickintheemptycelltotherightoftheWelcometoMKI

text.

3. IntheAssetstaboftheFilespanel,selectthefourthbutton

down,theFlashbutton(

Flashmoviesinthesite.



),todisplayalistofallofthe



Figure9-2.ClicktheFlashbuttonintheAssets

taboftheFilespanel.



Flashmoviesarelabeledwiththe.swf

extension.However,otherprograms,including

AfterEffectsandDreamweaver,cancreate

.swffilesaswell.You'lllearnmoreaboutthis

laterinthislesson.

4. Selectthelearningcenterbanner.swffileanddragittothe

cellyouclickedoninStep2toinsertit.

5. EnterlearningcenterbannerintheTitletextfieldwhen

theObjectTagAccessibilityAttributesdialogboxappears,

thenpressOK.



Figure9-3.Nametheinsertedfileinthe

ObjectTagAccessibilityAttributesdialogbox.



Asyoucansee,insertingaFlashmovieintoawebpageis

muchlikeinsertinganimage.Thewidthandheightofthe

.swfareautomaticallyestablishedbasedonthefile's

physicalsize,justastheyareforimagessuchas.jpegand

.giffiles.

The.swffileappearswithagenericFlashicononagray

image.Youcanpreviewtheimageinanumberofways.

6. KeeptheimageselectedandgotothePropertyinspector.

SelectthePlaybutton;thebannershouldappear.



Figure9-4.SelectthePlaybuttoninthe

Propertyinspectortomakethebannerappear.



YoumusthaveFlashPlayerinstalledtoview

an.swffile.Ifyoudon'thavetheapplication

installed,visit

http://www.adobe.com/products/flashplayer

todownloadandinstallit.Alsonotethat

visitorstoyourwebsitealsomusthaveFlash

PlayerinstalledtoviewyourFlashcontent.A

goodruleofthumbwhenincludingFlash

contentonawebsiteistoletvisitorsknowas



soonastheygettoyoursitethatthey'llneed

tohaveFlashPlayer.Besuretoincludethe

linktotheFlashPlayerwebpage(theURL

providedatthebeginningofthisparagraph)

sothatvisitorscandownloadtheFlashPlayer,

ifnecessary.



7. AfteryouclickthePlaybutton,itwillautomaticallyturninto

aStopbutton.ClickontheStopbuttonafteryou'vefinished

checkingoutthebanner.

Toseethepagewithoutthedistractionoftheotherpanels,

chooseFile>PreviewinBrowser.Whenyou'refinished,go

backtoDreamweaverandlookatsomeofthebuttonsin

thePropertyinspector.TheEditbutton,forexample,

automaticallyopensFlashifyouhaveitinstalled,andthen

opensthe.swffileinFlash.ThePropertyinspectoralso

includesLoopandAutoplaybuttonsthatcontrolthe

playbackofthe.swf.

Figure9-5.ThePropertyinspectorcontainsanumberof

optionsrelatingto.swffiles.



Whendesigningwebpages,besuretoinclude

spaceinyourdesignfor.swfsifyou'regoingto

incorporatethemintothepage.Thefilescanvary

insize,dependingonwhatyou'reusingthemfor.

TolearnmoreaboutFlash,visit

http://www.adobe.com/products/flash/flashpro.



9.4.CreatingFlashcontent

Asmentionedearlier,Flashisn'ttheonlyprogramthat

generates.swffiles.Dreamweavercreates.swfs,too.Thisis

goodnews—youdon'thavetolearnFlashtocreateinteresting,

dynamiccontentforyourwebsite.

UsingFlashbuttonsandFlashtextisabetterwaytomakethe

interactiveportionofawebpagemoreentertainingforvisitors

thanusingregulartextlinks.Thesefeaturesalsoallowyouto

getabitmorecreativewithwebpagedesign.



9.4.1.Flashbuttons

You'llstartthisexercisebycreatingFlashbuttonsin

Dreamweaver.Thistime-savingfeaturegivesyouthe

opportunitytoworkwithpre-designedbuttonsthatyoumodify

withyourowncontent.Youhaveanentirelibraryofreadymadebuttonstochoosefrom,someofwhicheveninclude

rollovereffects.

1. ClickontheFilestabintheFilespanelorgotoWindows>

Filesand,opentheflashbuttons.htmlfileinthePages

folder.ClickinthefirstcellofthemenutablejustbelowThe

McKnightCentergraphic.

2. GototheCommontabintheInsertbarandchooseFlash

Button(



)fromtheInsertMediadrop-downmenu.



Figure9-6.ChooseFlashButtonfromthe

InsertMediadrop-downmenuintheInsert

bar.



Beforeyouestablishhowthebuttonwilllook,you'llwantto

saveandnameit.

3. GotothebottomoftheInsertFlashButtondialogboxand

clicktheBrowsebuttonnexttotheSaveAstextfield.



Figure9-7.TheInsertFlashButtondialogbox.



4. Navigatetothedw09lessonsfolder>Assets>Flash

Assets.Typehome.swfintotheNametextfieldandpress

Save.You'recreatinganewfile,andthisiswhereyou'llbe

savingit.



Figure9-8.Enterhome.swfintheNametext

fieldandpressSave.



Nowthatyouhavethebuttonnamedandsaved,you're

readytoestablishhowitwilllook.

5. PerusethedifferentbuttonsundertheStylelisttoseethe

listofbuttontypesavailable.WechoseCorporate-Orange

forourdesign.



Figure9-9.Anumberofbuttonoptionsare



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 9. Adding Flash, Video, and Sound Content

Tải bản đầy đủ ngay(0 tr)

×