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

XP Dreamweaver 8.0 Tutorial 8 2 Adding 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

XP Dreamweaver 8.0 Tutorial 8 3 Adding 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

XP Dreamweaver 8.0 Tutorial 8 4 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 5 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 6 Understanding 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.

XP Dreamweaver 8.0 Tutorial 8 7 Understanding Macromedia Flash 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.

XP Dreamweaver 8.0 Tutorial 8 8 Understanding Macromedia Flash Pros and Cons of Using Flash

XP Dreamweaver 8.0 Tutorial 8 9 Understanding Macromedia Flash Flash Player Statistics

XP Dreamweaver 8.0 Tutorial 8 10 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 11 Adding Flash Movies to Web Pages Home Page with a Flash Movie Inserted

XP Dreamweaver 8.0 Tutorial 8 12 Adding Flash Movies to Web Pages Flash Movie Previewed in a Browser

XP Dreamweaver 8.0 Tutorial 8 13 Adjusting 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.

XP Dreamweaver 8.0 Tutorial 8 14 Adjusting Attributes of a Flash Movie 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.

XP Dreamweaver 8.0 Tutorial 8 15 Adjusting Attributes of a Flash Movie 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.

XP Dreamweaver 8.0 Tutorial 8 16 Adjusting Attributes of a Flash Movie 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.

XP Dreamweaver 8.0 Tutorial 8 17 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 18 Adding Flash Text to Web Pages 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.

XP Dreamweaver 8.0 Tutorial 8 19 Adding Flash Text to Web Pages 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.

XP Dreamweaver 8.0 Tutorial 8 20 Adding Flash Text to Web Pages 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 –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.

XP Dreamweaver 8.0 Tutorial 8 21 Adding Flash Text to Web Pages Insert Flash Text Dialog Box

XP Dreamweaver 8.0 Tutorial 8 22 Adding Flash Text to Web Pages Bands Page with Flash Text

XP Dreamweaver 8.0 Tutorial 8 23 Adding Flash Text to Web Pages Flash Text in a Browser

XP Dreamweaver 8.0 Tutorial 8 24 Using 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.

XP Dreamweaver 8.0 Tutorial 8 25 Using Flash Buttons Insert Flash Button Dialog Box

XP Dreamweaver 8.0 Tutorial 8 26 Understanding 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.

XP Dreamweaver 8.0 Tutorial 8 27 Understanding Macromedia Shockwave 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.

XP Dreamweaver 8.0 Tutorial 8 28 Understanding Macromedia Shockwave Pros and Cons of Using Shockwave

XP Dreamweaver 8.0 Tutorial 8 29 Understanding Macromedia Shockwave Shockwave Player Technology Breakdown

XP Dreamweaver 8.0 Tutorial 8 30 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 31 Adding Shockwave Movies to Web Pages Shockwave Movie Added to the Bands Page

XP Dreamweaver 8.0 Tutorial 8 32 Adjusting Attributes of a Shockwave Movie Edited Shockwave Movie

XP Dreamweaver 8.0 Tutorial 8 33 Adjusting Attributes of a Shockwave Movie Bands Page with Shockwave Movie Previewed in a Browser

XP Dreamweaver 8.0 Tutorial 8 34 Understanding 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.

XP Dreamweaver 8.0 Tutorial 8 35 Understanding Sound 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.

XP Dreamweaver 8.0 Tutorial 8 36 Understanding Sound 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.

XP Dreamweaver 8.0 Tutorial 8 37 Understanding Sound 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.

XP Dreamweaver 8.0 Tutorial 8 38 Understanding Sound 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.

XP Dreamweaver 8.0 Tutorial 8 39 Embedding 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.

XP Dreamweaver 8.0 Tutorial 8 40 Embedding a Sound-only Flash Movie 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.

XP Dreamweaver 8.0 Tutorial 8 41 Embedding a Sound-only Flash Movie Sound-only Flash Movie in the Catalogue Page

XP Dreamweaver 8.0 Tutorial 8 42 Embedding a Sound-only Flash Movie Sound-only Flash Movie in the Catalogue Page Previewed in a Browser

XP Dreamweaver 8.0 Tutorial 8 43 Embedding a Sound-only Flash Movie 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.

XP Dreamweaver 8.0 Tutorial 8 44 Creating 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.

XP Dreamweaver 8.0 Tutorial 8 45 Creating a Link to an MP3 Sound File MP3 Sound Button Added to the Catalogue Page

XP Dreamweaver 8.0 Tutorial 8 46 Understanding 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.

XP Dreamweaver 8.0 Tutorial 8 47 Understanding Digital Video 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.

XP Dreamweaver 8.0 Tutorial 8 48 Understanding Digital Video 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.

XP Dreamweaver 8.0 Tutorial 8 49 Understanding Digital Video 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.

XP Dreamweaver 8.0 Tutorial 8 50 Understanding Digital Video 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.

XP Dreamweaver 8.0 Tutorial 8 51 Adding 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.

XP Dreamweaver 8.0 Tutorial 8 52 Adding Flash Video to a Web Page 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.

XP Dreamweaver 8.0 Tutorial 8 53 Adding Flash Video to a Web Page 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.

XP Dreamweaver 8.0 Tutorial 8 54 Adding Flash Video to a Web Page Insert Flash Video Dialog Box

XP Dreamweaver 8.0 Tutorial 8 55 Adding Flash Video to a Web Page Flash Video in the Home Page

XP Dreamweaver 8.0 Tutorial 8 56 Reviewing 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.

XP Dreamweaver 8.0 Tutorial 8 57 Reviewing the Files and Code Added with Flash Video Clips Files Added to the Local Root Folder with the Flash Video

XP Dreamweaver 8.0 Tutorial 8 58 Reviewing the Files and Code Added with Flash Video Clips Behaviors Attached to the Tag

XP Dreamweaver 8.0 Tutorial 8 59 Mark 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.

XP Dreamweaver 8.0 Tutorial 8 60 Mark of the Web Home Page Previewed in Internet Explorer with Warning

XP Dreamweaver 8.0 Tutorial 8 61 Mark of the Web Home Page with Video Previewed in Browser

XP Dreamweaver 8.0 Tutorial 8 62 Updating 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.

XP Dreamweaver 8.0 Tutorial 8 63 Tutorial 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