Chapter 11
Adding Media and Interactivity
Adding and Modifying Flash Objects
• Flash is a software program that allows you to
create low-bandwidth, high-quality
animations and interactive elements that you
can place on your web pages.
Adding and Modifying Flash Objects
Website based on Flash
Adding and Modifying Flash Objects
• Low-bandwidth animations are animations
that don’t require a fast connection to work
properly. These animations use a series of
vector-based graphics that load quickly and
merge with other graphics and sounds to
create short movies.
Adding and Modifying Flash Objects
• Vector-based graphics are scalable graphics
that are built using mathematical formulas,
rather than built with pixels.
Adding and Modifying Flash Objects
• Flash movies require Flash Player, a plug-in
that is included in the latest versions of
Internet Explorer, Mozilla Firefox, Safari, and
Opera, to view them.
Adding and Modifying Flash Objects
Flash movie playing in the browser
Adding and Modifying Flash Objects
• The original Flash file is stored as a separate
file in the website root folder.
Adding and Modifying Flash Objects
The path for
your site root
folder
The
crabdance.fla
file is selected
Selecting the crab.fla file
Adding and Modifying Flash Objects
• A Flash button is a button made from a small,
predefined Flash movie that you can insert on
a web page to provide site navigation, either
in place of or in addition to other types of
hyperlinks, such as plain text links.
Adding and Modifying Flash Objects
• You can assign Flash buttons a variety of
behaviors in response to user actions, such as
opening a different page in the browser when
the mouse pointer is placed over it.
Adding and Modifying Flash Objects
• Like all Flash objects, Flash buttons have the
.swf file extension.
Adding and Modifying Flash Objects
• You can use Flash to:
– create Flash movies that include multimedia
elements, such as audio files (both music and
voiceovers)
Adding and Modifying Flash Objects
Flash movie
playing
Click to stop
movie
Flash movie playing in Dreamweaver
Adding and Modifying Flash Objects
• You can use Flash to:
– animated objects, scripted objects, clickable links,
and just about any other animated or clickable
object imaginable.
– add content to your existing website or to create
an entire website.
Adding Rollover Images
• A rollover image is an image that changes its
appearance when the mouse pointer is placed
over it in a browser.
Adding Rollover Images
Menu opens when
mouse rolls over
menu name
Walton Arts Center website using rollover images to display menus
Adding Rollover Images
• A rollover image consists of two images:
– the first image is the one that appears when the
mouse pointer is not positioned over it.
– the second image is the one that appears when
the mouse pointer is positioned over it.
Adding Rollover Images
• A rollover image can use Flash to:
– animated objects, scripted objects, clickable links,
and just about any other animated or clickable
object imaginable.
– add content to your existing website or to create
an entire website.
Adding Rollover Images
Image is swapped
when the mouse
rolls over it
Image is swapped
when the mouse
rolls over it
Viewing the rollover image in the browser
Adding Rollover Images
• Rollover images are often used to help create
a feeling of action and excitement on a web
page.
• You can add rollover images to a web page
using the Rollover Image command on the
Images menu in the Common category.
Adding Rollover Images
• Another way for you to create a rollover
image, button, or menu bar is to insert it as a
Fireworks HTML file.
• You can also use rollover images to display an
image associated with a text link.
Adding Rollover Images
Rollover Image
command
Images menu
Fireworks
HTML
command
Images menu on the Insert panel
Adding Rollover Images
• When a rollover image is inserted onto a page,
Dreamweaver adds two behaviors;
– Swap Image behavior has JavaScript code that
directs the browser to display a different image
when the mouse is rolled over an image on the
page.
Adding Rollover Images
• When a rollover image is inserted onto a page,
Dreamweaver adds two behaviors;
– Swap Image Restore behavior restores the
swapped image back to the original image.
Adding Behaviors
• Behaviors are sets of instructions that you can
attach to page elements that tell the page
element to respond in a specific way when an
event occurs, such as when the mouse pointer
is positioned over the element.
Adding Behaviors
• When you attach a behavior to an element,
Dreamweaver generates the JavaScript code
for the behavior and inserts it into your page
code.
Adding Behaviors
• You can use the Behaviors panel located in the
Tag panel group to insert a variety of
JavaScript-based behaviors on a page.
Adding Behaviors
Adding behavior
button
Actions menu
Behaviors panel with the Actions menu displayed
Adding Behaviors
• Actions are triggered by events.
• If you want the user to see a page element
slide across the page when the element is
clicked, you hey would attach the Slide action
using the onClick event to trigger the action.
Adding Behaviors
onMouseOver action
Viewing the edited behavior
Adding Behaviors
• Some of the behaviors that you can add to
web pages use a JavaScript library called the
Spry framework for AJAX.
Adding Behaviors
• Asynchronous JavaScript and XML (AJAX) is a
method for developing interactive web pages
that respond quickly to user input, such as
clicking a map.
Adding Behaviors
• In the library, you will find:
– spry widgets, which are prebuilt components for
adding interactivity to pages.
– spry effects, which are screen effects such as
fading and enlarging page elements.
Adding Behaviors
• When you add a spry effect to a page
element, Dreamweaver automatically adds a
SpryAssets folder to the site root folder with
the supporting files inside the folder.
Adding Video
• Another way to add rich media content to
your web pages is to insert video files.
• Of the several available video formats, one of
the most popular is the MP4 format.
Adding Video
Script for video is
displayed when
Closed caption
option is selected
Video window
Closed caption option
Controls for video
Viewing a video in a browser
Sound control
Adding Video
• You can insert a video in Dreamweaver with
the Insert, Media, Plugin command, but
HTML5 introduced another way to add video
with the <video> tag.
Adding Video
Video
placeholder
inserted on page
Inserting a video on the about_us page
Adding Video
• The advantages of this method are numerous:
– it supports video in native formats.
– it is compatible with all browsers.
– You can access the video controls using a
keyboard.
Adding Video
• You can include code to link multiple video
formats to provide access for all browsers and
make your videos searchable by search
engines.
Adding Video
• A buffer is a temporary storage area on your
hard drive that acts as a holding area for the
video content as it is being played.
Adding Video
• Other video formats that you can link or
embed on a web page include AVI, FLV,
WebM, MOV, Ogg.
• Currently, the MP4, WebM, and Ogg formats
support the HTML5 <video> tag.
Adding Video
• Not all browsers support all three formats, so
it is a good idea to provide multiple file
formats for your users files.
Adding Video
Play button becomes
pause button while
video is playing
Viewing the video in a browser
Adding Video
• Users access playback controls with a
controller.
• A controller appears as a graphic element
called a skin placed over or below a video.
Adding Video
• Controls include buttons or sliders to stop,
start, and pause the video, control the sound
level or mute the sound, or display a script of
the video.
Adding Video
• Controllers can be coded to customize both
the appearance of the skin and the controls
that will be included.
Adding Sound
• To incorporate sound into a website you can:
– embed them as background sounds.
– embed them on a page with visible sound controls
– link them to a page.
– add them to a page with the new <audio> tags
introduced with HTML5.
Adding Sound
Playing an audio file on a web page
List of audio
files available
Pause/play
button
Playhead indicates Blue bar indicates how much of
playback position
the file has been downloaded
Volume control
Adding Sound
• The following are a few questions you should
ask yourselves before you decide to add a
sound to a page.
– What is the purpose you have in mind?
– Will the sound add to the rich media experience
for your users?
Adding Sound
• The following are a few questions you should
ask yourselves before you decide to add a
sound to a page.
– What devices will the users use to play the sound?
– Have you tested the audio file to make sure the
sound quality is excellent?
Adding Sound
• Dreamweaver has a generic controller that
you will see when you add a sound file in the
following steps.
Adding Sound
• You can use CSS3 to change the appearance of
a controller, but all controllers will have the
basic play and pause buttons and a way to
control the volume.