XP Dreamweaver 8.0 Tutorial 8 1 Adding Rich Media to a Web Site

Dreamweaver 8.0Tutorial 8

1

XP

Tutorial 8

Adding Rich Media

to a Web Site


2

XPAdding Rich Media to a Web Site

• In this tutorial, you will:– Learn about adding media to a Web site

– Insert a Flash movie into a Web page and adjust its attributes

– Insert Flash text into a Web page

– Review Flash button styles

– Insert a Shockwave movie into a Web page and adjust its attributes

– Embed a sound-only Flash movie in a Web page


3

XPAdding Rich Media to a Web Site

• In this tutorial, you will (cont’d):– Start a Flash movie with a button

– Create a link to an MP3 sound file

– Learn about digital video and video file formats

– Add Flash video to a Web page

– Review the files and code added to a Web page with Flash video clips

– Add Mark of the Web to Web pages


4

XPAdding Media to a Web Site

• Media is any special configurable object that needs a player or additional application to display within a browser.

• Some useful media to add to Web sites are Flash, Shockwave, sound, and video.

• Media, like animation, should only be added to a Web site if they have a purpose and add to the site goals.


5

XPAdding Media to a Web Site

• When adding media, you should also consider the technical capabilities of the user.

• Most media require special plug-ins to run.• Some plug-ins are part of the newer browsers,

while others must be downloaded by the user. • You should assess the availability of the plug-ins

before adding media to your site.• You should also consider the time delay added to

the site because of the media.


6

XPUnderstanding Macromedia Flash

• Macromedia Flash™ uses vector-based graphics and can scale and compress graphics to a very small file size without losing quality.

• Latest version of Flash contains video-handling capabilities, is better at compressing bitmap-based animation, and includes excellent audio capabilities.

• Flash is both the software name and the name used to refer to the completed animation files.


7


• The two most common types of Flash files are:– .fla – Source files for Flash movies. This is the file that

is edited to make changes to the Flash movie; usable only in the Flash program.

– .swf – Compressed Flash files viewable in a browser and Dreamweaver.

• There are pros and cons to using Flash.


8


Pros and Cons of Using Flash


9


Flash Player Statistics


10

XPAdding Flash Movies to Web Pages

• You can add a Flash movie to a Web page by using the Flash button on the Media list of the Insert bar.

• Dreamweaver will insert the code for the movie into the page and place a copy of the element in the root folder if requested.

• It is a good idea to create a separate media folder to hold these elements.

• Once added, a gray rectangle will appear on the page the size of the Flash movie.


11


Home Page with a Flash Movie Inserted


12


Flash Movie Previewed in a Browser


13

XPAdjusting Attributes of a Flash Movie

• There are many attributes that can be adjusted: – Name – Identifies the movie.

– W (Width) and H (Height) – Specifies the dimensions of the movie. Note: changing the dimensions can distort or slow the movie.

– File – The path to the Flash movie (.swf).

– Src (Source File) – the path to the Flash source file (.fla).

– Edit – Launches Flash and opens the .fla file so that you can edit the Flash movie.


14


• Attributes that can be adjusted (cont.): – Reset Size – Returns the movie to its original size if it

has been altered.

– Class – A list of CSS styles that you can apply to the object.

– Loop – Plays the movie continuously as long as the page is loaded in the browser.

– Autoplay – When checked, starts the movie automatically when the page is loaded.


15


• Attributes that can be adjusted (cont.): – V Space (Vertical Space) and H Space (Horizontal

Space) – The pixels of white space placed around the movie. The default is 0.

– Quality – Controls the smoothing of diagonal or jagged lines (anti-aliasing). Options are Low, Auto Low, Auto High and High.

– Scale – Controls how the movie displays in the allotted space. Options are Default, No Borders and Exact Fit.


16


• Attributes that can be adjusted (cont.): – Align – Sets the alignment of the movie. Options are

Default, Baseline, Top, Middle, Bottom, Text Top, Absolute Middle, Absolute Bottom, Left, and Right.

– Bg (Background Color) – The color that is the background for the movie. Also appears if the movie is not playing.

– Play – Starts the movie in Dreamweaver.

– Parameters – Allows the passing of parameters to the movie if the movie was set to receive them.


17

XPAdding Flash Text to Web Pages

• Flash movies can be used to add custom text to a Web page since they are self-contained and do not require the text to be installed on the client computer.

• Flash text is not, however, attached to the style sheet and must be changed individually.

• Because Flash text sometimes appears poorly rendered in Dreamweaver, you need to preview in a browser.


18


• You can create a Flash text movie by clicking the Flash Text button in the Media list in the Common category on the Insert bar.

• You can set many attributes in the dialog box:– Font – any TrueType font loaded on your system.

– Size – the size of the text in points.

– Bold and Italicize – style attributes for the text.

– Alignment – text alignments options: left, center or right.


19


• Attributes in the dialog box (cont.):– Color – the text color identified by a color code or

using the color picker.

– Rollover Color – the text color that appears when the mouse hovers over linked text.

– Text – the actual text that you want in the Flash text movie.

– Show Font – displays the font style in the Text field in the Insert Flash Text dialog box.


20


• Attributes in the dialog box (cont.):– Link – a link between the Flash text and another page

within the site or another Web site. This should be an absolute link (path name beginning with http://).

– Target – the target for the linked page: _blank, _parent, _self, or _top.

– Bg (Background) Color – the color that displays behind the text.

– Save As – the option to name and save the file as a .swf file.


21


Insert Flash Text Dialog Box


22


Bands Page with Flash Text


23


Flash Text in a Browser


24

XPUsing Flash Buttons

• Dreamweaver contains predesigned, customizable Flash buttons that can add excitement to a site.

• Flash buttons can be added with the Flash Button button located in the Media list in the Common category on the Insert bar.

• The Insert Flash Button dialog box shows you the available button styles.


25

XPUsing Flash Buttons

Insert Flash Button Dialog Box


26

XPUnderstanding Macromedia Shockwave

• Shockwave® is the Macromedia solution for delivering interactive multimedia on the Web.

• Shockwave is used for more complex applications like games and interactive 3D.

• Shockwave files are created in Macromedia Director®.

• Director creates complex multimedia solutions which can be deployed across multiple mediums such as Web, DVD, etc.


27


• There are several file extensions associated with Director:– .dcr (Shockwave) – compressed files viewable in a

browser or in Dreamweaver.

– .dir – source files used when you are creating movies.

– .dxr – uncompressed files locked for distribution.

– .cst – files containing additional information used in a .dir or .dxr file.

– .cxt – .cst files that are locked for distribution.


28


Pros and Cons of Using Shockwave


29


Shockwave Player Technology Breakdown


30

XPAdding Shockwave Movies to Web Pages

• You can add a Shockwave movie to a page by using the Shockwave button in the Media list in the Common category on the Insert bar.

• A 32 x 32 pixel gray square with the Shockwave logo will appear on the page.

• The correct movie size must be entered in the Property inspector in order for the movie to play properly.


31

XPAdding Shockwave Movies to Web Pages

Shockwave Movie Added to the Bands Page


32

XPAdjusting Attributes of a Shockwave Movie

Edited Shockwave Movie


33

XPAdjusting Attributes of a Shockwave Movie

Bands Page with Shockwave Movie Previewed in a Browser


34

XPUnderstanding Sound

• Sound can add richness and depth when added wisely.

• Sounds, like other media, should be used to reinforce the site goals.

• Common uses of sound include music, narration, and sounds paired with user actions.

• Things to consider when adding sound are the ability of users to hear the sound and how it will affect the speed of your site.


35


• Sound can be embedded in a page or included as a link.

• Sound is often streamed to the user’s computer, allowing them to start hearing the sound before the entire file is downloaded.

• Embedded sound starts downloading when the page is loading and can be set to play automatically or when the user clicks a button.

• This can result in downloading sound files that are never used.


36


• Linked files do not start to download until the user clicks on the link – eliminating the downloading of unused data, but making the user wait until the sound starts playing.

• Sound files are created outside of Dreamweaver in programs such as SoundForge, Audition, or ProTools.

• Sound files can be large and should be compressed into acceptable sound formats.


37


• Sound formats use different CODEC (Compressor/ DECompressor) software.

• CODEC converts sound to digital code, shrinks it for transmission, and later expands it back for playing on the user’s computer.

• Popular CODEC programs in use on the Web are MP3, RealMedia, QuickTime® and Windows Media®.

• The user will need to download a plug-in or player to play the sound.


38


• Even though CODEC software is now very efficient and sophisticated, it is very difficult to get sound to play the same on all user computers.

• Experiences vary with the user’s configuration, but can include having pop up windows with ads that display before the sound starts.

• You can alleviate the confusion and standardize the experience by using Flash format to add sound to the site.


39

XPEmbedding a Sound-only Flash Movie

• Flash will deliver sound without opening a separate window or disrupting the Web page.

• You will create a Flash movie with sound but no images.

• You add Flash sound exactly the same way you added a Flash movie.

• You will add the Flash sound with a size of 1 x 1 pixels and a background color to match the page since no images will display.


40


• There are two types of sounds in Flash movies:– Those that play automatically

– Those that prevent automatic play

• Automatic sounds are often used to provide background music.

• Non-automatic sounds are often user activated by clicking a button.

• When you attach Control Shockwave or Flash behavior, you can create control buttons such as play, rewind, etc.


41


Sound-only Flash Movie in the Catalogue Page


42


Sound-only Flash Movie in the Catalogue Page Previewed in a Browser


43


• You can set the attributes for Loop and Autoplay for a sound-only Flash movie.

• Other attributes are visual and not relevant to sound-only Flash movies.

• Embedding other types of sound files is more difficult since Dreamweaver does not contain controls to do it.

• You can optionally download an extension from Macromedia which allows for embedding other types of sound files.


44

XPCreating a Link to an MP3 Sound File

• MP3 sound files contain very high quality with a very small file size.

• This format has become very popular and most computers already contain the proper player.

• MP3 files are a good choice when you want to link to a sound file, because it will likely play as expected.

• Using a link will ensure that the user’s player will not display its own sound control interface, potentially interfering with your design.


45

XPCreating a Link to an MP3 Sound File

MP3 Sound Button Added to the Catalogue Page


46

XPUnderstanding Digital Video

• Video can add excitement to a Web site, but video files are relatively large and potentially slow to download.

• Since videos grab user’s attention, it may be a good way to reinforce your site goals, but can easily overload the user with too much motion.

• In general, users will only wait for downloads when they think the wait is worth their while.


47


• Major features that affect video file size are frame size, playback quality, and sound parameters.

• Common frame sizes are 320 x 240 and 240 x 180 pixels – smaller frame size equals smaller video.

• Playback quality is dependent on target audience as well as the ultimate quality of the video that is desired.

• Sound parameters include stereo or mono and the clarity of sound needed.

• Stereo and high resolution need more space.


48


• To ensure continuous playback, the video must be buffered (5 –10 seconds downloaded before play starts).

• Depending on the download speed, even buffering may not stop interruptions in the playback.

• To provide better service to the user, the site may offer multiple formats, such as low, medium, and high resolution, for the user to select one to match their computer resources.


49


• Digital video can have different formats:– .mov – QuickTime movie containing sound, video and

animation.

– .rm – RealMedia movie. Dreamweaver translates to a .rpm file.

– .rpm – Metafile containing the location of the RealMedia file.

– .smil – Synchronized Multimedia Integration Language (SMIL) file used with RealMedia to create multimedia presentations.


50


• Digital video can have different formats (cont.):– .wmv – Windows Media File.

– .avi – An earlier Microsoft format largely replaced by the newer Windows Media format (.wmv).

– .mpg – Created by the Motion Picture Experts Group; generally used for CDs and multimedia pieces rather than for Web distribution.

– .flv – the Flash video format.


51

XPAdding Flash Video to a Web Page

• To add a Flash video clip, click the Flash Video button in the Media list in the Common category on the Insert bar.

• Flash video parameters include:– Video Type – Progressive Download Video or

Streaming Video.

– URL – the path to the video clip.

– Skin – a predefined look for the control bar.


52


• Flash video parameters include (cont.):– Width and Height – the dimensions of the video clip.

– Auto Play – when checked, starts playing the video clip automatically when the page is loaded into a browser.

– Auto Rewind – when checked, rewinds the video clip to the first frame automatically once it has played.


53


• Flash video parameters include (cont.):– Prompt Users to Download Flash Player If

Necessary – when checked, alerts user when the user’s browser does not have the correct version of the Flash Player installed.

– Message – a custom message that will be seen by users who do not have the correct version of the Flash Player.


54


Insert Flash Video Dialog Box


55


Flash Video in the Home Page


56

XPReviewing the Files and Code Added with Flash Video Clips

• When you add a Flash video clip to a page using the Insert Flash Video button, two additional files are added to the site’s local root folder.

• Dreamweaver also adds some extra code to the page when a Flash video file is inserted into the page using the Insert Flash Video button.


57


Files Added to the Local Root Folder with the Flash Video


58


Behaviors Attached to the <body> Tag


59

XPMark of the Web

• Sometimes Internet Explorer (version XP with Service Pack 2) prevents you from previewing pages with active content in them or warns that it has restricted the file from showing active content.

• Active content is JavaScript or anything that requires an ActiveX control, such as Flash Player.

• Mark of the Web is a special comment that you insert into Web pages to enable Internet Explorer to display active content from a local file without a warning.


60

XPMark of the Web

Home Page Previewed in Internet Explorer with Warning


61

XPMark of the Web

Home Page with Video Previewed in Browser


62

XPUpdating the Web Site on the Remote Server

• To update:– Connect to the remote server using the Connects to

Remote Host button on the Files panel toolbar.

– Click the View list arrow, and then click Local View

– Select the updated files and then click the Put File(s) button.

– Click the Yes button to include dependent files.

– Disconnect using the Disconnects from Remote Host button.

– Click the View list arrow, and then click Local View.


63

XPTutorial Summary

• You should now be able to:– Insert a Flash movie

– Insert Flash text

– Insert a Shockwave movie

– Add sound

– Add an MP3 file

– Add Flash video

– Add Mark of the Web

Documents

XP Dreamweaver 8.0 Tutorial 8 1 Adding Rich Media to a Web Site