© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.

© 2011 Delmar, Cengage Learning

Chapter 11

Adding Media and Interactivity with Flash and Spry

© 2011 Delmar Cengage Learning

1. Add and modify Flash objects

2. Add rollover images

3. Add behaviors

4. Add Flash video

Chapter 11 Lessons



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



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


Tools You’ll Use



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.



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



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



Website based on Flash



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



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


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.


Add Rollover ImagesYou can add a rollover image to a web page using the Rollover image command

Images menu on the Insert panel

Rollover Image command

Fireworks HTML command

Images menu


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.


Add Rollover Images

• A Swap Image Restore behavior restores the swapped image back to the original image.


Add Rollover Images

Swap behavior code for rollover image

Code for rollover image


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.


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.


Behaviors panel with the Actions menu displayed

Add behavior button

Actions menu

Add Behaviors


Add Behaviors

• Methods you can use for developing interactive web pages:– Asynchronous JavaScript– XML (AJAX)


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.


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.


Add Flash Video

Viewing a Flash video in a browser

Script for video isdisplayed whenClosed caption optionis selected

Closed caption option

Sound control

Video window

Video controls


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.


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.


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 Chapter 11 Adding Media and Interactivity with Flash and Spry.

Documents

Transcript of © 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.