Dreamweaver

1
Tutorial 8 Adding Rich Media To a Web Site
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
• Insert Flash text into a Web page
• Insert Shockwave into a Web page
• Insert a video into a Web page
• Insert sound into a Web page

3
Adding Media to a 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.
• Discard elements that do not reinforce the site
  goals and might distract the viewer.

4
Adding Media to a Site

• When adding media, you should also consider the
  technical capabilities of the user.
• Most media requires 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.

5
Understanding Macromedia Flash

• Macromedia Flash uses vector based graphics and
  can scale and compress graphics to a very small
  file size without losing quality.
• Flash can now also handle video, compressing
  bit-map based animation and includes excellent
  audio capabilities.
• Flash is both the software name and the name used
  to refer to the completed animation files.

6
Understanding Macromedia Flash

• There are three types of Flash files
• .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.
• .swt. Template files that allow for modifying
  or replacing information within a Flash movie.
• There are pros and cons to using Flash.

7
Understanding Macromedia Flash
Pros and Cons of Using Flash
8
Understanding Macromedia Flash
You can research Flash on the Macromedia Web
Site
9
Understanding Macromedia Flash
Reviewing the current Flash Player Statistics
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 tab 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
Adding Flash Movies to Web Pages
The Site Home Page with the Flash Movie Placed
12
Adding Flash Movies to Web Pages
Previewing the Flash Movie in a Browser
13
Adding Flash Movies to Web Pages

• 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
Adding Flash Movies to Web Pages

• Attributes that can be adjusted (cont)
• Reset Size Returns the movie to its original
  size if it has been altered.
• Loop Plays the movie continuously as long as
  the page is loaded in the browser. Otherwise the
  movie plays only once.
• Autoplay When checked starts the movie
  automatically when the page is loaded.
• V Space (vertical space) and H Space (horizontal
  space) the pixels of white space placed around
  the movie. The default is 0.

15
Adding Flash Movies to Web Pages

• Attributes that can be adjusted (cont)
• Quality Controls the smoothing of diagonal or
  jagged lines (anti-aliasing). Options are Low,
  Auto Low, Auto High and High. High looks best
  but requires more processing time.
• Scale Controls how the movie displays in the
  allotted space. Options are Default, No Borders
  and Exact Fit.
• Align Sets the alignment of the movie. Options
  are Default, Baseline, Top, Middle, Bottom, Text
  Top, Absolute Middle, Absolute Bottom, Left, and
  Right.

16
Adding Flash Movies to Web Pages

• Attributes that can be adjusted (cont)
• 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. The
  movie plays in the document window. A Stop
  button replaces the Play button.
• Parameters Allows passing parameters to the
  movie if the movie was set to receive them.

17
Adding Flash Movies to Web Pages
The Open Property Inspector for the Flash Movie
18
Adding Flash Movies to Web Pages
The Flash Movie Playing in the Page
19
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. For instance, you might do site
  headings in a special font this way.
• Flash text is not, however, attached to the style
  sheet and must be changed individually if the
  site look changes.
• Because Flash text often appears poorly rendered
  in Dreamweaver, you need to preview in a browser.

20
Adding Flash Text to Web Pages

• You can create a Flash text movie by clicking the
  Flash Text button on the Media tab of 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.

21
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 Flash Text dialog box.

22
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 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.

23
Adding Flash Text to Web Pages
Creating a Flash Text Heading Using the Flash
Text Dialog Box
24
Adding Flash Text to Web Pages
The Web page with the Flash Text Heading Displayed
25
Adding Flash Text to Web Pages
The Web page with the Flash Text Heading
Displayed in a Browser Window
26
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 on the Media tab of the Insert bar.
• The Flash Button dialog box shows you the
  predesigned options.
• The various states of the button style can be
  viewed in the Sample box.
• Once a style is selected you can add and format
  text to appear on the button.

27
Using Flash Buttons
Using the Flash Button Dialog Box to Insert a
Flash Button
28
Understanding 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.

29
Understanding 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.

30
Understanding Shockwave
Some Positive and Negative aspects of Using
Shockwave
31
Understanding Shockwave
Accessing the Macromedia Web site Shockwave
Player page To research Shockwave
32
Understanding Shockwave
Researching the Current Penetration Statistics on
the Shockwave Player
33
Understanding Shockwave
Looking at Shockwaves Technical Breakdown
Statistics
34
Adding Shockwave to Web Pages

• You can add a Shockwave Movie to a page by using
  the Shockwave button on the Media tab of the
  Insert menu bar.
• Dreamweaver adds code for the movie into the page
  and cues you to save it into the root folder.
• A 32 x32 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.

35
Adding Shockwave to Web Pages

• To add the Shockwave movie, first add a new
  layer to
• position text around the movie

36
Adding Shockwave to Web Pages

• Then add a new layer, size and position it to
  so there is
• space for the movie.

37
Adding Shockwave to Web Pages

• The Shockwave movie is added, but is not at the
  correct
• size and will not play.

38
Adding Shockwave to Web Pages

• You can adjust the same Shockwave attributes as
  Flash
• movies using the Property inspector

39
Adding Shockwave to Web Pages
The Final Page in a Browser with the Shockwave
Movie Playing
40
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.

41
Understanding Sound

• Sound can be embedded in a page or included as a
  link.
• Sound is often streamed to the users 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.

42
Understanding Sound

• Linked files dont start to download until the
  user clicks on the link eliminating downloading
  unused data, but making the user wait until the
  sound starts playing.
• Sound files are created outside of Dreamweaver in
  programs such as Sound Forge, Cool Edit Pro or
  Pro Tools.
• Sound files can be large and should be compressed
  into acceptable sound formats.

43
Understanding Sound

• Sound formats use different CODEC (Compressor/
  DECompressor) software.
• CODEC converts sound to digital code and shrinks
  it for transmission. It also expands it back for
  playing on the users 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.

44
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 users 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.

45
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.

46
Embedding a Sound Only Flash Movie

• There are two types of sound 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.

47
Embedding a Sound Only Flash Movie
Adding Sound Only Flash Movies to the Web Page
48
Embedding a Sound Only Flash Movie
The Dialog Box to Enable the Button to Start the
Sound Only Flash Movie
49
Embedding a Sound Only Flash Movie
Flash Sound Playing in a Browser after the
Selected Button was Clicked
50
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.

51
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 users player
  will not display its own sound interface.

52
Creating a Link to an MP3 Sound File
Adding an MP3 Sound Option played using the
Windows Media Player in a Browser
53
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 users 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.

54
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 or 240 x 180
  pixels smaller size, smaller video.
• Playback quality is dependent on target audience
  as well as the ultimate quality of the video that
  is desired.
• Sound issues include stereo or mono and the
  clarity of sound needed. Stereo and high
  resolution need more space.

55
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.

56
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.

57
Understanding Digital Video

• Digital video 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.

58
Adding Video to a Web Page

• Dreamweaver does not come with the tools to
  easily add video to a Web page.
• To add video, you should
• Download and install the appropriate extension
  for the format you want to do the video in (i.e.
  RealMedia, QuickTime, etc.).
• Use the extension software to add the video clip
  to the web site.
• Adjust the video attributes in the Property
  inspector.

59
Adding Video to a Web Page

• To add video, you should (cont)
• Save the Web page.
• Research the appropriate Web site to learn about
  your chosen format. (i.e. RealMedia site).
• Download the appropriate player and install in
  your browser.
• Preview the Web page with the installed video
  clip.

60
Adding Video to a Web Page
On the Web Site looking at a list of Available
Extensions to Download
61
Adding Video to a Web Page
Once downloaded and installed, the appropriate
tab appears on the Dreamweaver Insert bar.
62
Adding Video to a Web Page
The RealMedia Video Clip Added to the Web Page
63
Adding Video to a Web Page

• Once added, you can adjust the attributes of the
  Video clip
• Name the name for the inserted clip.
• W and H width and height of the video clip.
  This should not be changed from the dimensions in
  which the clip was made.
• Src the name of the video clip that was
  inserted.
• Auto-Start starts the video when the page is
  loaded.

64
Adding Video to a Web Page

• In addition, each format has some unique
  attributes that can be adjusted.
• The unique attributes for RealMedia are
• Hide Logo hides the RealMedia logo.
• Metafile the name of a file created
  automatically when the RealMedia object was
  inserted. Should not normally be altered.
• Allow JavaScript Control an option to include
  JavaScripts to control the RealMedia object.

65
Adding Video to a Web Page
The home page in a browser window with the video
clip playing
66
Updating the Web Site on the Remote Server

• When pages are changed, they should be updated on
  your remote site.
• To update
• Connect to the remote server using the Connects
  button on the Site panel.
• Click View list and Local View.
• Select the updated files and then the Put Files
  button.
• Click the View list and then Remote view.
• Disconnect using the Disconnects button.

67
Tutorial Summary

• You should now be able to
• Add several types of media to your Web site
• Insert a Flash movie
• Insert Flash text
• Insert Shockwave
• Insert a video
• Insert sound