© 2010 Delmar, Cengage Learning Chapter 10 Adding Media Objects

© 2010 Delmar, Cengage Learning

Chapter 10

Adding Media Objects

© 2009 Delmar Cengage Learning

1. Add and modify Flash objects

2. Add rollover images

3. Add behaviors

4. Add Flash video

Chapter 10 Lessons


Adding Media Objects

• With Dreamweaver, you can add media objects created in other programs to the pages of your website

• You can create complex, interactive websites with media effects that can be viewed within the pages themselves, rather than loading an external document player


Understanding Media Objects

Media objects are combinations of visual and audio effects and text to create a fully engaging experience with a website.


Understanding Adobe Flash• Flash is a program that allows you to create

low-bandwidth animations and interactive elements – use a series of vector-based graphics

– load quickly

– merge with other graphics and sounds to create short movies

• To view Flash movies, you need the Flash Player


Inserting Flash Buttons

• Flash button– Button from a small predefined flash

movie that can be inserted on a Web page to provide navigation

• The option to create Flash buttons inside Dreamweaver is not available in Dreamweaver CS4, although you can place buttons created in Flash on your web pages.


Inserting Flash Movies

• Flash movie– File containing a variety of multimedia

elements such as audio files, animated objects, scripted objects, and clickable links

• Use Flash command in Media menu on Insert panel– Select File dialog box


Fig. 3: Flash Movie Placeholder on the Café Page

Flash movie placeholderProperties of selected Flash movie


Fig. 4: Flash Movie Playing in Dreamweaver

Flash movie playing

Click to stop movie


Fig. 5: Flash Movie Playing in a Browser


Fig. 7: Editing the Flash Movie and Returning to Dreamweaver

Click done to save the file and return to Dreamweaver

FPS text box


Add Rollover Images

• Understanding rollover images• Adding rollover images


Understanding Rollover Images

• Changes its appearance when the mouse pointer is placed over it in a browser

• Actually consists of two images• Often used to help create a feeling of action

and excitement on a Web page• Can also be used to display an image

associated with a text link


Adding Rollover Images

• Use the Rollover Image command in the Images menu in the Common category

• Specify both the original image and the rollover image

• Both images should share the same width and height dimensions


Adding Rollover Images

• When a rollover image is inserted onto a page, Dreamweaver automatically adds two behaviors:– Swap Image– Swap Image Restore behavior


Fig. 8: Images Menu on the Insert Panel

Rollover imagecommand

Images menu


Fig. 10: Finding the Source File for the Rollover Image


Fig. 15: Swap Behavior Code for Rollover Image

Code for rollover image


Add Behaviors

• Adding interactive elements• Using the behaviors panel• Inserting sound effects• Understanding actions and events• Using the Spry framework


Adding Interactive Elements

• Add sound and other multimedia actions to elements by attaching behaviors to them

• Behaviors– Sets of instructions that you can attach to

page elements that tell the element to respond in a specific way when an event occurs


Using the Behaviors Panel

• Use the Behaviors panel located in the Tag panel group to insert a variety of JavaScript-based behaviors on a page

• To insert a behavior, click the Add Behavior button on the Behaviors panel to open the Actions menu


Fig. 13: Behaviors Panel with the Actions Menu Displayed

Add behavior button

Actions menu


Inserting Sound Effects

• To apply a sound effect– Select the link or object to which you want

the sound effect added– Then select the Play Sound behavior

located in the Actions menu of the Behaviors panel

• Sound effects should be used very sparingly!


Understanding Actions and Events• Actions are triggered by events

– onClick– onMouseOver– onLoad


Using the Spry Framework

• Asynchronous JavaScript and XML (AJAX) is a method for developing interactive Web pages that respond quickly to user input, such as a map– spry widgets (prebuilt components for

adding interaction)– spry effects (which are screen effects

such as fading and enlarging page elements)


Fig. 15: Setting Open Browser Window Options


Fig. 18: Viewing the Edited Behavior

onMouseOver action


Add Flash Video

• Flash video files are files that include both video and audio and have an .flv file extension

• Played through Flash Player• Two options for delivering Flash:

– Progressive video download– Streamlining video download

• You can also link or embed AVI (Audio Visual Interleave), the Microsoft standard for digital video, or MPEG (Motion Picture Experts Group) files


Progressive Video Download

• Will download the video to the viewer’s computer, then allow the video to play before it has completely downloaded

• It will finish the download as the video plays, but the viewer will not notice that this is taking place


Streamlining Video Download

• Very similar to a progressive download, except streaming video downloads use buffers to gather the content as it is downloading to ensure a smoother playback


Fig. 19: Viewing a Flash Video in a Browser

Video window

Controls for video

Sound controls

Closed caption option

Script for video is displayed when Closed caption option selected

Federal Aviation Administration website www.faa.gov


Fig. 20: Insert FLV Settings for the Umbrella Anchor Video type = Progressive

Download Video

URL = umbrella_anchor_movie.flv

Skin = Halo Skin 1 (min width 180)

Width = 180

Height = 180

Constrain check box

Skin preview window If your Total with skin figures do

not appear automatically, click the Direct Size button

Documents

© 2010 Delmar, Cengage Learning Chapter 10 Adding Media Objects