1. Tutorial 7 Adding Behaviors and Rich Media

2. Objectives Session 7.1 – Learn about behaviors – Add behaviors to a page – Add a custom script to a page Session 7.2 – Learn about adding media to a Web site – Insert a Flash movie and adjust its attributes – Insert a Shockwave movie and adjust its attributes 2New Perspectives on Adobe Dreamweaver CS5

3. Objectives Session 7.3 – Learn about different sound formats – Embed a Flash movie with sound – Create a link to an MP3 sound file – Learn about digital video and video file formats – Add Flash video to a Web page – Add Mark of the Web to Web pages New Perspectives on Adobe Dreamweaver CS53

4. Session 7.1 Understanding Behaviors What is a Behavior? – A code added to a Web page that enables users to: Interact with various elements in a Web page Alter a Web page in different ways Cause tasks to be performed – What is an Object? Element in the Web page to which behavior is attached New Perspectives on Adobe Dreamweaver CS54

5. Understanding Behaviors – Event Two components: – User event » What user does to trigger the action, e.g., a mouseover – Event handler » The code that refers to the event, e.g., onMouseOver – Action What happens when the event is performed on the object New Perspectives on Adobe Dreamweaver CS55

6. Understanding Behaviors Inserting Behaviors in Dreamweaver – Behaviors panel Similar to a sophisticated menu After selecting an object, user can choose from a list of prewritten action and event handlers in the Behaviors panel Based on those choices, Dreamweaver creates the behavior and inserts the code New Perspectives on Adobe Dreamweaver CS56

7. Validating Form Data The Validate Form Behavior – Allows user to create requirements/limits that must be met before form data can be submitted – Limits for data: Anything – No limits on what can be entered Number – Only numeric values New Perspectives on Adobe Dreamweaver CS57

8. Validating Form Data Email address – Only information that follows the format of an e-mail address can be entered Number from – A range of acceptable numeric values New Perspectives on Adobe Dreamweaver CS58

9. Validating Form Data New Perspectives on Adobe Dreamweaver CS59

10. Adding a Custom Script to a Page Writing Code – User can write original code and add advanced functionality of behaviors to a Web page – Usually done with JavaScript – Code is considered a custom script; it is not added to the reusable prewritten choice lists in the Behaviors panel – Best practice suggests that the script be written in a separate page, that page be included in the root folder, and the code inserted into the desired page New Perspectives on Adobe Dreamweaver CS510

11. Adding a Custom Script to a Page New Perspectives on Adobe Dreamweaver CS511

12. Adding a Custom Script to a Page Editing and Deleting Behaviors – Can change the event handler associated with the behavior – Can delete a behavior New Perspectives on Adobe Dreamweaver CS512

13. Session 7.2 Adding Media to a Web Site Media – Any special configurable object added to a Web page that needs a player or an application that is not part of a browser, e.g., ActiveX controls, plug-ins – Examples of Media: Flash Shockwave Sound Video New Perspectives on Adobe Dreamweaver CS513

14. Understanding Adobe Flash Flash – One of the premier solutions for delivering interactive animations on a Web page – Uses vector-based graphics Can scale and compress to a very small file size without losing quality New Perspectives on Adobe Dreamweaver CS514

15. Understanding Adobe Flash – Latest version contains new and improved features Video-handling capabilities Better at compressing bitmap-based animation More developed coding capabilities Excellent audio capabilities – Good choice for lightweight interactive components, Web applications, slide show-type presentations, vector-based animation, some bitmap-based animation, video, and sound New Perspectives on Adobe Dreamweaver CS515

16. Understanding Adobe Flash – Types of Flash files.fla – Source file used by the Flash program when a Flash movie is created.swf – Compressed Flash file that is viewable in a browser and can be previewed in Dreamweaver New Perspectives on Adobe Dreamweaver CS516

17. Understanding Adobe Flash – Types of Flash files (continued).swt – Flash template file that enables user to change and replace content in the.swf file.swc – Compiled clip that contains Flash symbols and ActionScript code.flv – Flash video file format that enables inclusion of encoded audio and video for delivery New Perspectives on Adobe Dreamweaver CS517

18. Adding a Flash Movie to a Web Page New Perspectives on Adobe Dreamweaver CS518 Inserting a Flash Movie – Dreamweaver places the code for the movie in the page and copies links to additional scripts to the scripts folder – Dreamweaver also reminds you to place a copy of the movie in the local root folder Puts all materials for the site in one place

19. Adding a Flash Movie to a Web Page – Good practice to make a separate folder for each media element used in a site – Flash movie appears in the Document window as a gray rectangle with the Flash logo in its center – Height, width, scalability, and other attributes can be adjusted in the Property inspector New Perspectives on Adobe Dreamweaver CS519

20. Adding a Flash Movie to a Web Page New Perspectives on Adobe Dreamweaver CS520

21. Adding a Flash Movie to a Web Page Adjusting Attributes of a Flash Movie – Attributes that can be adjusted New Perspectives on Adobe Dreamweaver CS521 FlashIDEditAutoplay W and HReset sizeV space & H space FileClassQuality SrcLoopScale AlignBgPlay & Parameters Flash Movie Attributes

22. Understanding Adobe Shockwave Shockwave – Abode’s solution for delivering interactive multimedia on the Web – Used for more complex interactive media components like games, interactive 3D, database- driven multimedia, multiuser applications, and educational materials – Files are created in Adobe Director New Perspectives on Adobe Dreamweaver CS522

23. Understanding Adobe Shockwave Director is used to create comprehensive multimedia solutions that can be used in several different media, including CD-ROM, DVD, Web, and Kiosk File extensions associated with Director New Perspectives on Adobe Dreamweaver CS523.dcr (Shockwave).dxr.cxt.dir.cst Director File Extensions

24. Understanding Adobe Shockwave – Differences between Flash and Shockwave Shockwave files are less dependent on processing speed of user’s computer for playback speed – Director movies are pre-rendered File size of a Flash movie with vector graphics is usually smaller than file size of a Director movie with the same content New Perspectives on Adobe Dreamweaver CS524

25. Understanding Adobe Shockwave Shockwave movies tend to process complex coding faster Shockwave movies can display a wider range of media formats Shockwave Player must be installed on client computer for Shockwave movies to be displayed – Must be downloaded; it is generally not distributed with current browsers New Perspectives on Adobe Dreamweaver CS525

26. Adding Shockwave Movies to Web Pages Very similar to adding Flash movies to Web pages – Dreamweaver places the code for the movie into the Web page – Dreamweaver reminds user to include a copy of the file in the local root folder – After the movie is added, a small gray rectangle with the Shockwave logo appears on the page Gray rectangle is 32 x 32 – User must set correct height and width in the Property inspector to see movie play New Perspectives on Adobe Dreamweaver CS526

27. Adding Shockwave Movies to a Web Page – Play button in Property inspector might not start the movie » May need to preview the page in a browser or install the Shockwave player Adjusting Attributes of a Shockwave Movie New Perspectives on Adobe Dreamweaver CS527 IDBgPlay W and HClassAlign FileV space & H spaceParameters Shockwave Movie Attributes

28. Session 7.3 Understanding Digital Audio Sound can be added to a Web page in two ways: – Embedded directly in a page – Included as a link With most sound formats, sound streams to the user’s computer – Streaming means the sound will play after just a small portion downloads and will continue to play as the file downloads completely New Perspectives on Adobe Dreamweaver CS528

29. Understanding Digital Audio If sound is embedded directly in a page, it begins to download as soon as the page is loaded – Embedded sound files can start automatically or be set to begin at the click of a start button Sound files are created or recorded outside Dreamweaver Files can be very large and must be compressed to be delivered over the Web – Each type of compression is often called a sound format New Perspectives on Adobe Dreamweaver CS529

30. Understanding Digital Audio – Each sound format uses a different COmpressor/DECompressor (CODEC) as it is compressed for delivery and decompressed for playback CODEC is software that converts sound to digital code, shrinks the code to the smallest possible size for transmission, and then expands the code for playback New Perspectives on Adobe Dreamweaver CS530

31. Understanding Digital Audio Popular CODECs include MP3, RealMedia, QuickTime, and Windows Media For a computer to play sound, most sound formats require the download of some type of plug-in or player New Perspectives on Adobe Dreamweaver CS531

32. Embedding a Flash Movie That Contains Sound Flash is a consistent and reliable method for adding sound to Web pages – Is widely installed and does not open a separate application to play sound When Flash is used to add sound, the user adds a Flash movie that contains sound with or without images – Flash movies that play automatically are used to add background sounds to pages New Perspectives on Adobe Dreamweaver CS532

33. Embedding a Flash Movie That Contains Sound – Flash movies that do not play automatically are used to provide sounds that the user can activate by clicking a button Adjusting Attributes of a Flash Movie – Attributes can be adjusted in the Property inspector Most settings affect the visual aspects of the Flash movie and do not apply to Flash movies with sound only New Perspectives on Adobe Dreamweaver CS533

34. Embedding a Flash Movie That Contains Sound Embedding Other Sound Formats – Embedding sound files like MP3 and RealTime is a little more difficult than embedding a Flash movie Dreamweaver does not have a custom control for embedding other types of files Can use the generic Plugin button in the Media list in the Common category of the Insert panel – Must type many parameters to make the sound work New Perspectives on Adobe Dreamweaver CS534

35. Creating a Link to an MP3 Sound File MP3 is a common sound format – Contains a high-quality sound and a small file size – Especially good for sending sound over the Web using a slow connection – Most computers are preconfigured with a player that plays MP3 files – Good choice when user wants to link to a sound file rather than embedding the file New Perspectives on Adobe Dreamweaver CS535

36. Creating a Link to an MP3 Sound File New Perspectives on Adobe Dreamweaver CS536

37. Creating a Link to an MP3 Sound File Creating Links to Other Sound Files – Can create a link to any other commonly used sound file formats MP3 Windows Media RealMedia QuickTime – Add a button to the page OR – Create a link to the sound file – Save a copy of sound file in the media folder in the site’s local root folder New Perspectives on Adobe Dreamweaver CS537

38. Understanding Digital Video Video files must be compressed to be delivered over the Web Frame size, playback quality, and sound parameters affect the file size of a video clip Higher-quality video contains cleaner, more detailed images and smoother movement Sound parameters include the choice of mono or stereo and the resolution or clarity of sound New Perspectives on Adobe Dreamweaver CS538

39. Understanding Digital Video For a video clip to run continuously, it must be buffered – The first 5 or 10 seconds of the clip are downloaded before it begins to play If the download does not keep up with the playback, the video playback will be interrupted Solutions used by Web sites to minimize video interruptions include multiple clip options, multiple formats, and specialized video servers New Perspectives on Adobe Dreamweaver CS539

40. Understanding Digital Video Video files created or recorded with programs outside of Dreamweaver can also be added to Web pages in Dreamweaver – Avid – Apple Final Cut – Adobe Premiere Reviewing Video File Formats – Digital video can have many different formats All provide excellent video performance New Perspectives on Adobe Dreamweaver CS540

41. Understanding Digital Video – The different formats are identified by their file extensions New Perspectives on Adobe Dreamweaver CS541.movQuickTime movie.aviEarlier Microsoft Format.rmRealMedia movie.mpg Motion Picture Experts Group.smil Synchronized Multimedia Integration Language.flvFlash video.wmv - Windows Media file Digital Video Formats

42. Adding Flash Video to a Web Page Similar to adding other Flash elements to a Web page – Set attributes only applicable to video using the Property inspector or the Insert FLV dialog box New Perspectives on Adobe Dreamweaver CS542 Video typeSkinAuto play URLWidth&HeightAuto rewind Flash Video Attributes

43. Adding Flash Video to a Web Page New Perspectives on Adobe Dreamweaver CS543

44. Adding Flash Video to a Web Page Reviewing the Files Added with Flash Video Clips – When the Insert FLV button is used to add a Flash video clip, two additional files are added to the site’s local root folder One contains information for the control bar that was inserted in the Flash video One enables the page to play the Flash video file New Perspectives on Adobe Dreamweaver CS544

45. Adding Flash Video to a Web Page Deleting Flash Video – Select and delete the video from the div – Does not delete the additional files that were added to the site Delete these files so the site will not become too cluttered or unnecessarily large New Perspectives on Adobe Dreamweaver CS545

46. Adding Mark of the Web Internet Explorer (version 6 and above) sometimes prevents previewing of pages that contain active content – Active content is JavaScript or anything that requires an ActiveX control, e.g., Flash Player Originally designed to tighten security Mark of the Web code enables Internet Explorer to display active content from a local file without warning New Perspectives on Adobe Dreamweaver CS546

47. Adding Mark of the Web Mark of the Web is a special comment inserted in the head area of a Web page New Perspectives on Adobe Dreamweaver CS547

48. Updating the Web Site on the Remote Server Upload the pages that were changed and the Media folder to the remote server View the site over the Web New Perspectives on Adobe Dreamweaver CS548