Transcript Add media object and interactivity

Chapter 11
Adding Media and
Interactivity
Chapter 11 Lessons
Introduction
1. Add and modify Flash objects
2. Add rollover images
3. Add behaviors
4. Add video
5. Add sound
Introduction
Adding Media Objects
• With Dreamweaver, you can add media objects created in other
programs to the pages of your website
– Fireworks – navigation bars, rollover images
– Flash – video, sound, animation
• Plug-ins – computer program that works with a host application (ie
web browser) to enable certain functions to work
– Flash Player plug-in – plays Flash SWF files
– Adobe Reader plug-in – reads Adobe PDF files
– Allows you to create complex, interactive websites with media effects
that can be viewed within the pages themselves, rather than loading
an external document player
Introduction
Understanding Media Objects
• Media objects – combination of visual and audio effects and
text to create a fully engaging experience with a website
• It is the experience you are striving for when you add video
and audio elements to a web page
• Flash Movies
• Video
• JavaScript behaviors (sounds, rollover images, pop-up
menus, go to URLs, and menus)
Lesson 1: Add and Modify Flash Objects
Understanding Adobe Flash
• Flash is a program that allows you to create low-bandwidth
animations and interactive elements
– Low bandwidth – don’t require a fast internet connection to work
properly
– use a series of vector-based graphics
• Scalable graphics built with mathematics formulas, rather than
built with pixels
– load quickly
– merge with other graphics and sounds to create short movies
• To view Flash movies, you need the Flash Player plug-in
– Included in the latest versions of IE, Firefox, Safari, and Opera
Lesson 1: Add and Modify Flash Objects
Inserting Flash Buttons and Movies
• Flash button
– Button from a small predefined flash
movie that can be inserted on a Web
page to provide navigation
– Can be assigned a variety of
behaviors in response to user actions
• Flash movie
– Contain a variety of multimedia
elements such as audio files,
animated objects, scripted objects,
and clickable links
– To Add to page: Insert Panel 
Common  Media  SWF
Lesson 1: Add and Modify Flash Objects
Flash Movie Placeholder
Flash movie placeholder
Properties of selected Flash movie
Edit in Flash button
Play/Stop Button
Lesson 2: Add Rollover Images
Understanding Rollover Images
• Rollover Images change their appearance when the mouse
pointer is placed over it in a browser
• Actually consists of two images
– First image appears when the mouse is not positioned over it
– Second image appears when the mouse is positioned over it
• 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
Lesson 2: Add Rollover Images
Adding Rollover Images
• To Add to page: Insert Panel
 Common  Images
Rollover Image
• Both original image and
rollover image are selected in
the Insert Rollover Image
dialog box
• Both images should be same
size to prevent resizing during
rollover
Lesson 2: Add Rollover Images
Adding Rollover Images – cont.
• Dreamweaver automatically adds two behaviors when a
rollover is added to a page
– Swap Image – JavaScript code that directs the browser to display
a different image when the mouse is rolled over an image on
the page
– Swap Image Restore – restores the swapped image back to the
original image
Lesson 3: Add Behaviors
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
Lesson 3: Add Behaviors
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
Add behavior
button
Actions menu
Lesson 3: Add Behaviors
Understanding Actions and Events
• Actions are triggered by events
– onClick
– onMouseOver
– onLoad
Lesson 3: Add Behaviors
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
• SpryAssets folder is automatically added to the root folder
with the supporting files inside the folder when a spry effect
is added to a page element
Lesson 4: Add Video
Video Formats
• Video provides another way to add rich media content to Web
pages
• Video can be added through formats such as MP4, AVI, FLV,
WebM, MOV, and Ogg with MP4 being one of the most
popular
• Video can be inserted to a Dreamweaver page either with:
– Insert  Media  Plugin
– HTML5 <video> tag (only supports MP4, WebM, and Ogg formats)
Lesson 4: Add Video
HTML 5 <video>
• Benefits of using HTML5 <video>:
– it supports video in native formats
– it is compatible with all browsers
– you can access the video controls using a keyboard
• Not all browsers support all three HTML5 <video> formats, so
it is a good idea to provide multiple file formats for your users
files
Lesson 4: Add Video
Adding Video - Miscellaneous
• Code can be included to link multiple video formats to provide
access for all browsers and make your videos searchable by
search engines
• 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
Lesson 4: Add Video
Video Controllers
• Users access playback controls with a controller
• A controller appears as a graphic element called a skin placed
over or below a 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
• Controllers can be coded to customize both the appearance of
the skin and the controls that will be included
Lesson 5: Add Sound
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
• Before adding a sound ask
yourself:
– What is the purpose you have in
mind?
– Will the sound add to the rich
media experience for your users?
– What devices will the users use to
play the sound?
– Have you tested the audio file to
make sure the sound quality is
excellent?
Lesson 5: Add Sound
Sound Controllers
• Dreamweaver has a generic controller that you will see when
you add a sound file
• 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