Download Chapter 11

Chapter 11
Adding Media and Interactivity
with Flash and Spry
© 2011 Delmar, Cengage Learning
Chapter 11 Lessons
1.
2.
3.
4.
Add and modify Flash objects
Add rollover images
Add behaviors
Add Flash video
© 2011 Delmar Cengage Learning
Adding Media and Interactivity with
Flash and Spry
• A plug-in (add-on) is a small
computer program that works with a
host application such as a web
browser to allow it to perform certain
functions.
© 2011 Delmar Cengage Learning
Adding Media and Interactivity with
Flash and Spry
• Media objects are combinations of
visual and audio effects and text to
create a fully engaging experience
with a website.
© 2011 Delmar Cengage Learning
Adding Media and Interactivity with
Flash and Spry
Tools You’ll Use
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
• Low-bandwidth animations are
animations that don’t require a fast
connection to work properly.
• Vector-based graphics are scalable
graphics that are built using
mathematical formulas, rather than
built with pixels.
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
• Flash movies require the Flash Player
plug-in.
• Rich content is a general term that
can mean visually stimulating, useful,
or interactive content on a web page.
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
• When you add Flash content to a web
page, the code that links and runs the
content is embedded into the page
code.
• The original Flash file is stored as a
separate file in the website root
folder.
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
Website based on Flash
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
• A Flash button is a button made
from a small, predefined Flash movie
that you can insert on a web page.
• You can assign Flash buttons a
variety of behaviors in response to
user action.
© 2011 Delmar Cengage Learning
Add and Modify Flash Objects
• As with images, you should always
add a title tag when inserting Flash
content to provide accessibility.
• To view Flash movies, you can either
use Live view or preview them in a
browser window.
© 2011 Delmar Cengage Learning
Add Rollover Images
• A rollover image is an image that
changes its appearance when you
place the mouse pointer over it in a
browser.
• You can create a rollover image using
two images.
© 2011 Delmar Cengage Learning
Add Rollover Images
You can add a rollover
image to a web page
using the Rollover
image command
Rollover Image
command
Images
menu
Fireworks HTML
command
Images menu on the Insert panel
© 2011 Delmar Cengage Learning
Add Rollover Images
• You can use rollover images to
display an image associated with a
text link.
• A Swap Image behavior is
JavaScript code that directs the
browser to display a different image
when the mouse is rolled over an
image.
© 2011 Delmar Cengage Learning
Add Rollover Images
• A Swap Image Restore behavior
restores the swapped image back to
the original image.
© 2011 Delmar Cengage Learning
Add Rollover Images
Code for rollover image
Swap behavior code for rollover image
© 2011 Delmar Cengage Learning
Add 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.
© 2011 Delmar Cengage Learning
Add Behaviors
• You can use the Behaviors panel to
insert a variety of JavaScript-based
behaviors on a page.
• You can click the Add behavior button
to insert a behavior.
© 2011 Delmar Cengage Learning
Add Behaviors
Add behavior button
Actions menu
Behaviors panel with the Actions menu displayed
© 2011 Delmar Cengage Learning
Add Behaviors
• Methods you can use for developing
interactive web pages:
– Asynchronous JavaScript
– XML (AJAX)
© 2011 Delmar Cengage Learning
Add Behaviors
• In the JavaScript library you will find
spry widgets, which are prebuilt
components for adding interactivity to
pages.
• Spry effects are screen effects such
as fading and enlarging page
elements.
© 2011 Delmar Cengage Learning
Add Flash Video
• Flash video files are files that can
include both video and audio and
have an .flv extension.
• A progressive video download will
download the video to the user’s
computer, then allow the video to play
before it has completely downloaded.
© 2011 Delmar Cengage Learning
Add Flash Video
Script for video is
displayed when
Closed caption option
is selected
Video window
Video controls
Closed caption
option
Sound control
Viewing a Flash video in a browser
© 2011 Delmar Cengage Learning
Add Flash Video
• A streaming video download is similar
to a progressive download, except
streaming video uses buffers to
gather the content as it downloads to
ensure a smoother playback.
© 2011 Delmar Cengage Learning
Add Flash Video
• A buffer is a temporary storage area
on your hard drive that acts as a
holding area for the Flash content as
it is being played.
© 2011 Delmar Cengage Learning
Add Flash Video
• Video formats that can you can link or
embed on a web page include:
– AVI (Audio Visual Interleave)
– MPEG (Motion Picture Experts Group)
© 2011 Delmar Cengage Learning