1. Chapter 11 Adding Media and Interactivity

2. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add video 5.Add sound

3. Adding Media Objects With Dreamweaver, you can add media objects created in other programs to the pages of your website – Fireworks – navigation bars, rollover images – Flash – video, sound, animation Plug-ins – computer program that works with a host application (ie web browser) to enable certain functions to work – Flash Player plug-in – plays Flash SWF files – Adobe Reader plug-in – reads Adobe PDF files – Allows you to create complex, interactive websites with media effects that can be viewed within the pages themselves, rather than loading an external document player Introduction

4. Understanding Media Objects Media objects – combination of visual and audio effects and text to create a fully engaging experience with a website It is the experience you are striving for when you add video and audio elements to a web page Flash Movies Video JavaScript behaviors (sounds, rollover images, pop-up menus, go to URLs, and menus) Introduction

5. Understanding Adobe Flash Flash is a program that allows you to create low-bandwidth animations and interactive elements – Low bandwidth – don’t require a fast internet connection to work properly – use a series of vector-based graphics Scalable graphics built with mathematics formulas, rather than built with pixels – load quickly – merge with other graphics and sounds to create short movies To view Flash movies, you need the Flash Player plug-in – Included in the latest versions of IE, Firefox, Safari, and Opera Lesson 1: Add and Modify Flash Objects

6. Inserting Flash Buttons and Movies Flash button – Button from a small predefined flash movie that can be inserted on a Web page to provide navigation – Can be assigned a variety of behaviors in response to user actions Flash movie – Contain a variety of multimedia elements such as audio files, animated objects, scripted objects, and clickable links – To Add to page: Insert Panel  Common  Media  SWF Lesson 1: Add and Modify Flash Objects

7. Flash Movie Placeholder Lesson 1: Add and Modify Flash Objects Play/Stop Button Flash movie placeholder Properties of selected Flash movie Edit in Flash button

8. Understanding Rollover Images Rollover Images change their appearance when the mouse pointer is placed over it in a browser Actually consists of two images – First image appears when the mouse is not positioned over it – Second image appears when the mouse is positioned over it Often used to help create a feeling of action and excitement on a Web page Can also be used to display an image associated with a text link Lesson 2: Add Rollover Images

9. Adding Rollover Images To Add to page: Insert Panel  Common  Images  Rollover Image Both original image and rollover image are selected in the Insert Rollover Image dialog box Both images should be same size to prevent resizing during rollover Lesson 2: Add Rollover Images

10. Adding Rollover Images – cont. Dreamweaver automatically adds two behaviors when a rollover is added to a page – Swap Image – JavaScript code that directs the browser to display a different image when the mouse is rolled over an image on the page – Swap Image Restore – restores the swapped image back to the original image Lesson 2: Add Rollover Images

11. Adding Interactive Elements Add sound and other multimedia actions to elements by attaching behaviors to them Behaviors – Sets of instructions that you can attach to page elements that tell the element to respond in a specific way when an event occurs Lesson 3: Add Behaviors

12. Using the Behaviors Panel Use the Behaviors panel located in the Tag panel group to insert a variety of JavaScript-based behaviors on a page To insert a behavior: – Click the Add Behavior button on the Behaviors panel to open the Actions menu Add behavior button Actions menu Lesson 3: Add Behaviors

13. Understanding Actions and Events Actions are triggered by events – onClick – onMouseOver – onLoad Lesson 3: Add Behaviors

14. Using the Spry Framework Asynchronous JavaScript and XML (AJAX) is a method for developing interactive Web pages that respond quickly to user input, such as a map – spry widgets – prebuilt components for adding interaction – spry effects – which are screen effects such as fading and enlarging page elements SpryAssets folder is automatically added to the root folder with the supporting files inside the folder when a spry effect is added to a page element Lesson 3: Add Behaviors

15. Video Formats Video provides another way to add rich media content to Web pages Video can be added through formats such as MP4, AVI, FLV, WebM, MOV, and Ogg with MP4 being one of the most popular Video can be inserted to a Dreamweaver page either with: – Insert  Media  Plugin – HTML5 tag (only supports MP4, WebM, and Ogg formats) Lesson 4: Add Video

16. HTML 5 HTML 5 Benefits of using HTML5 : – it supports video in native formats – it is compatible with all browsers – you can access the video controls using a keyboard Not all browsers support all three HTML5 formats, so it is a good idea to provide multiple file formats for your users files Lesson 4: Add Video

17. Adding Video - Miscellaneous Code can be included to link multiple video formats to provide access for all browsers and make your videos searchable by search engines 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 Lesson 4: Add Video

18. Video Controllers Users access playback controls with a controller A controller appears as a graphic element called a skin placed over or below a video 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 Controllers can be coded to customize both the appearance of the skin and the controls that will be included Lesson 4: Add Video

19. Adding Sound 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 tags introduced with HTML5 Before adding a sound ask yourself: – What is the purpose you have in mind? – Will the sound add to the rich media experience for your users? – What devices will the users use to play the sound? – Have you tested the audio file to make sure the sound quality is excellent? Lesson 5: Add Sound

20. Sound Controllers Dreamweaver has a generic controller that you will see when you add a sound file 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 Lesson 5: Add Sound