© 2011 delmar, cengage learning chapter 11 adding media and interactivity with flash and spry
TRANSCRIPT
© 2011 Delmar Cengage Learning
1. Add and modify Flash objects
2. Add rollover images
3. Add behaviors
4. Add Flash video
Chapter 11 Lessons
© 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
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
• 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 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
© 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
Swap behavior code for rollover image
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
Behaviors panel with the Actions menu displayed
Add behavior button
Actions menu
Add Behaviors
© 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
Viewing a Flash video in a browser
Script for video isdisplayed whenClosed caption optionis selected
Closed caption option
Sound control
Video window
Video controls
© 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.