1 / 54

Chapter 11

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

leyna
Download Presentation

Chapter 11

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 11 Adding Media and Interactivity

  2. Adding and Modifying Flash Objects • 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.

  3. Adding and Modifying Flash Objects Website based on Flash

  4. Adding and Modifying Flash Objects • Low-bandwidthanimations 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.

  5. Adding and Modifying Flash Objects • Vector-based graphics are scalable graphics that are built using mathematical formulas, rather than built with pixels.

  6. Adding and Modifying Flash Objects • 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.

  7. Adding and Modifying Flash Objects Flash movie playing in the browser

  8. Adding and Modifying Flash Objects • The original Flash file is stored as a separate file in the website root folder.

  9. Adding and Modifying Flash Objects The path for your site root folder The crabdance.fla file is selected Selecting the crab.fla file

  10. Adding and Modifying Flash Objects • 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.

  11. Adding and Modifying Flash Objects • 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.

  12. Adding and Modifying Flash Objects • Like all Flash objects, Flash buttons have the .swf file extension.

  13. Adding and Modifying Flash Objects • You can use Flash to: • create Flash movies that include multimedia elements, such as audio files (both music and voiceovers)

  14. Adding and Modifying Flash Objects Flash movie playing Click to stop movie Flash movie playing in Dreamweaver

  15. Adding and Modifying Flash Objects • 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.

  16. Adding Rollover Images • A rollover image is an image that changes its appearance when the mouse pointer is placed over it in a browser.

  17. Adding Rollover Images Menu opens when mouse rolls over menu name Walton Arts Center website using rollover images to display menus

  18. Adding Rollover Images • 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.

  19. Adding Rollover Images • 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.

  20. Adding Rollover Images Image is swapped when the mouse rolls over it Image is swapped when the mouse rolls over it Viewing the rollover image in the browser

  21. Adding Rollover Images • 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.

  22. Adding Rollover Images • 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.

  23. Adding Rollover Images Rollover Image command Images menu Fireworks HTML command Images menu on the Insert panel

  24. Adding Rollover Images • 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.

  25. Adding Rollover Images • 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.

  26. Adding 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, such as when the mouse pointer is positioned over the element.

  27. Adding Behaviors • When you attach a behavior to an element, Dreamweaver generates the JavaScript code for the behavior and inserts it into your page code.

  28. Adding Behaviors • You can use the Behaviors panel located in the Tag panel group to insert a variety of JavaScript-based behaviors on a page.

  29. Adding Behaviors Adding behavior button Actions menu Behaviors panel with the Actions menu displayed

  30. Adding Behaviors • 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.

  31. Adding Behaviors onMouseOver action Viewing the edited behavior

  32. Adding Behaviors • Some of the behaviors that you can add to web pages use a JavaScript library called the Spry framework for AJAX.

  33. Adding Behaviors • Asynchronous JavaScript and XML (AJAX) is a method for developing interactive web pages that respond quickly to user input, such as clicking a map.

  34. Adding Behaviors • 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.

  35. Adding Behaviors • 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.

  36. Adding Video • 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.

  37. Adding Video Script for video is displayed when Closed caption option is selected Video window Closed caption option Controls for video Sound control Viewing a video in a browser

  38. Adding Video • 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.

  39. Adding Video Video placeholder inserted on page Inserting a video on the about_us page

  40. Adding Video • 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.

  41. Adding Video • You can include code to link multiple video formats to provide access for all browsers and make your videos searchable by search engines.

  42. Adding Video • 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.

  43. Adding Video • 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.

  44. Adding Video • Not all browsers support all three formats, so it is a good idea to provide multiple file formats for your users files.

  45. Adding Video Play button becomes pause button while video is playing Viewing the video in a browser

  46. Adding Video • Users access playback controls with a controller. • A controller appears as a graphic element called a skin placed over or below a video.

  47. Adding 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.

  48. Adding Video • Controllers can be coded to customize both the appearance of the skin and the controls that will be included.

  49. 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 <audio> tags introduced with HTML5.

  50. Adding Sound Playing an audio file on a web page List of audio files available Pause/play button Playhead indicates playback position Blue bar indicates how much of the file has been downloaded Volume control

More Related