© 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

© 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 Tools You’ll Use Adding Media and Interactivity with Flash and Spry

© 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 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 is displayed when Closed caption option is 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.

© 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)