![Page 1: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/1.jpg)
Chapter 11
Adding Media and Interactivity
![Page 2: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/2.jpg)
• Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive elements that you can place on your web pages.
Adding and Modifying Flash Objects
![Page 3: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/3.jpg)
Website based on Flash
Adding and Modifying Flash Objects
![Page 4: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/4.jpg)
• Low-bandwidth animations are animations that don’t require a fast connection to work properly. These animations use a series of vector-based graphics that load quickly and merge with other graphics and sounds to create short movies.
Adding and Modifying Flash Objects
![Page 5: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/5.jpg)
• Vector-based graphics are scalable graphics that are built using mathematical formulas, rather than built with pixels.
Adding and Modifying Flash Objects
![Page 6: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/6.jpg)
• Flash movies require Flash Player, a plug-in that is included in the latest versions of Internet Explorer, Mozilla Firefox, Safari, and Opera, to view them.
Adding and Modifying Flash Objects
![Page 7: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/7.jpg)
Flash movie playing in the browser
Adding and Modifying Flash Objects
![Page 8: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/8.jpg)
• The original Flash file is stored as a separate file in the website root folder.
Adding and Modifying Flash Objects
![Page 9: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/9.jpg)
Selecting the crab.fla file
The path for your site root
folder
The crabdance.fla file is selected
Adding and Modifying Flash Objects
![Page 10: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/10.jpg)
• A Flash button is a button made from a small, predefined Flash movie that you can insert on a web page to provide site navigation, either in place of or in addition to other types of hyperlinks, such as plain text links.
Adding and Modifying Flash Objects
![Page 11: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/11.jpg)
• You can assign Flash buttons a variety of behaviors in response to user actions, such as opening a different page in the browser when the mouse pointer is placed over it.
Adding and Modifying Flash Objects
![Page 12: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/12.jpg)
• Like all Flash objects, Flash buttons have the .swf file extension.
Adding and Modifying Flash Objects
![Page 13: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/13.jpg)
• You can use Flash to:– create Flash movies that include multimedia
elements, such as audio files (both music and voiceovers)
Adding and Modifying Flash Objects
![Page 14: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/14.jpg)
Flash movie playing in Dreamweaver
Flash movie playing
Click to stop movie
Adding and Modifying Flash Objects
![Page 15: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/15.jpg)
• You can use Flash to:– animated objects, scripted objects, clickable links,
and just about any other animated or clickable object imaginable.
– add content to your existing website or to create an entire website.
Adding and Modifying Flash Objects
![Page 16: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/16.jpg)
• A rollover image is an image that changes its appearance when the mouse pointer is placed over it in a browser.
Adding Rollover Images
![Page 17: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/17.jpg)
Walton Arts Center website using rollover images to display menus
Menu opens when mouse rolls over
menu name
Adding Rollover Images
![Page 18: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/18.jpg)
• A rollover image consists of two images:– the first image is the one that appears when the
mouse pointer is not positioned over it.– the second image is the one that appears when
the mouse pointer is positioned over it.
Adding Rollover Images
![Page 19: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/19.jpg)
• A rollover image can use Flash to:– animated objects, scripted objects, clickable links,
and just about any other animated or clickable object imaginable.
– add content to your existing website or to create an entire website.
Adding Rollover Images
![Page 20: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/20.jpg)
Viewing the rollover image in the browser
Image is swapped when the mouse
rolls over it
Adding Rollover Images
Image is swapped when the mouse
rolls over it
![Page 21: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/21.jpg)
• Rollover images are often used to help create a feeling of action and excitement on a web page.
• You can add rollover images to a web page using the Rollover Image command on the Images menu in the Common category.
Adding Rollover Images
![Page 22: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/22.jpg)
• Another way for you to create a rollover image, button, or menu bar is to insert it as a Fireworks HTML file.
• You can also use rollover images to display an image associated with a text link.
Adding Rollover Images
![Page 23: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/23.jpg)
Images menu on the Insert panel
Images menu
Rollover Image command
Fireworks HTML
command
Adding Rollover Images
![Page 24: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/24.jpg)
• When a rollover image is inserted onto a page, Dreamweaver adds two behaviors;– Swap Image behavior has JavaScript code that
directs the browser to display a different image when the mouse is rolled over an image on the page.
Adding Rollover Images
![Page 25: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/25.jpg)
• When a rollover image is inserted onto a page, Dreamweaver adds two behaviors;– Swap Image Restore behavior restores the
swapped image back to the original image.
Adding Rollover Images
![Page 26: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/26.jpg)
• 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, such as when the mouse pointer is positioned over the element.
Adding Behaviors
![Page 27: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/27.jpg)
• When you attach a behavior to an element, Dreamweaver generates the JavaScript code for the behavior and inserts it into your page code.
Adding Behaviors
![Page 28: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/28.jpg)
• You can use the Behaviors panel located in the Tag panel group to insert a variety of JavaScript-based behaviors on a page.
Adding Behaviors
![Page 29: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/29.jpg)
Behaviors panel with the Actions menu displayed
Adding behavior button
Actions menu
Adding Behaviors
![Page 30: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/30.jpg)
• Actions are triggered by events.• If you want the user to see a page element
slide across the page when the element is clicked, you hey would attach the Slide action using the onClick event to trigger the action.
Adding Behaviors
![Page 31: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/31.jpg)
Viewing the edited behavior
onMouseOver action
Adding Behaviors
![Page 32: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/32.jpg)
• Some of the behaviors that you can add to web pages use a JavaScript library called the Spry framework for AJAX.
Adding Behaviors
![Page 33: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/33.jpg)
• Asynchronous JavaScript and XML (AJAX) is a method for developing interactive web pages that respond quickly to user input, such as clicking a map.
Adding Behaviors
![Page 34: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/34.jpg)
• In the library, you will find:– spry widgets, which are prebuilt components for
adding interactivity to pages.– spry effects, which are screen effects such as
fading and enlarging page elements.
Adding Behaviors
![Page 35: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/35.jpg)
• When you add a spry effect to a page element, Dreamweaver automatically adds a SpryAssets folder to the site root folder with the supporting files inside the folder.
Adding Behaviors
![Page 36: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/36.jpg)
• Another way to add rich media content to your web pages is to insert video files.
• Of the several available video formats, one of the most popular is the MP4 format.
Adding Video
![Page 37: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/37.jpg)
Viewing a video in a browser
Video window
Sound control
Controls for video Closed caption option
Script for video is displayed when Closed caption
option is selected
Adding Video
![Page 38: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/38.jpg)
• You can insert a video in Dreamweaver with the Insert, Media, Plugin command, but HTML5 introduced another way to add video with the <video> tag.
Adding Video
![Page 39: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/39.jpg)
Inserting a video on the about_us page
Video placeholder
inserted on page
Adding Video
![Page 40: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/40.jpg)
• The advantages of this method are numerous:– it supports video in native formats.– it is compatible with all browsers.– You can access the video controls using a
keyboard.
Adding Video
![Page 41: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/41.jpg)
• You can include code to link multiple video formats to provide access for all browsers and make your videos searchable by search engines.
Adding Video
![Page 42: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/42.jpg)
• 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.
Adding Video
![Page 43: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/43.jpg)
• Other video formats that you can link or embed on a web page include AVI, FLV, WebM, MOV, Ogg.
• Currently, the MP4, WebM, and Ogg formats support the HTML5 <video> tag.
Adding Video
![Page 44: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/44.jpg)
• Not all browsers support all three formats, so it is a good idea to provide multiple file formats for your users files.
Adding Video
![Page 45: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/45.jpg)
Viewing the video in a browser
Play button becomes pause button while
video is playing
Adding Video
![Page 46: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/46.jpg)
• Users access playback controls with a controller.
• A controller appears as a graphic element called a skin placed over or below a video.
Adding Video
![Page 47: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/47.jpg)
• 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.
Adding Video
![Page 48: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/48.jpg)
• Controllers can be coded to customize both the appearance of the skin and the controls that will be included.
Adding Video
![Page 49: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/49.jpg)
• 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.
Adding Sound
![Page 50: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/50.jpg)
Playing an audio file on a web page
List of audio files available
Blue bar indicates how much of the file has been downloaded
Pause/play button
Playhead indicates playback position Volume control
Adding Sound
![Page 51: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/51.jpg)
• The following are a few questions you should ask yourselves before you decide to add a sound to a page.– What is the purpose you have in mind?– Will the sound add to the rich media experience
for your users?
Adding Sound
![Page 52: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/52.jpg)
• The following are a few questions you should ask yourselves before you decide to add a sound to a page.– What devices will the users use to play the sound?– Have you tested the audio file to make sure the
sound quality is excellent?
Adding Sound
![Page 53: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/53.jpg)
• Dreamweaver has a generic controller that you will see when you add a sound file in the following steps.
Adding Sound
![Page 54: Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive](https://reader038.vdocuments.mx/reader038/viewer/2022110103/56649dd95503460f94acf704/html5/thumbnails/54.jpg)
• 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.
Adding Sound