Audio and Video for the Web


As more and more computers are connected to the web via broadband, the demand has risen for high-bandwidth content such as video, audio, and rich media files such as Flash movies. In response, new streaming and compression technologies have improved the delivery methods for these technologies, making them much easier to deliver from within web pages.

Keep in mind, however, that although audio and video may be fun to add to your pages, it needs to be done properly to ensure that the sounds aren't annoying and the videos stream properly, rather than require the end user to download the entire movie before being able to watch it.

No matter how you distribute your audio or video, keep in mind that for the most part, the Web has been muted since its inception. People aren't necessarily prepared for blaring music or plug-ins that talk to them from a web page, so give them the choice as to whether or not the sound should play before you deluge them with the latest sounds of your motorcycle revving or your favorite MIDI file.

Adding Sound Files

Dreamweaver offers a couple of different options when it comes to adding sound to your web pages. The first option is to create a hyperlink to the audio file on your server. This option enables users to choose whether to open the file or save the file to the local machine. If they choose to open it, the workstation decides which application plays the audio, depending on which application is assigned the audio file's particular format. To link to an audio file, add an image or text to your page and select it. Using the Link field in the Property inspector, locate the audio file or type the path to it.

The second option is to simply embed the sound in your page, which requires users to have either an audio plug-in or ActiveX control to play the audio. As with all plug-ins or ActiveX controls, you can determine which application should process the audio, and if the user doesn't already have it installed, you can link to the plug-in or control that can be downloaded. To embed audio into your page, use the Media button on the Insert toolbar to embed the appropriate ActiveX control or plug-in.

The third option is to create a Flash movie, using only the audio track, and embed the Flash movie in your page. This option is becoming more and more popular because most modern browsers have the Flash Player installed and, therefore, no additional software is required to play the audio. In addition, the Flash Player offers controls that can be embedded into your page layout that enable the end user to pause, play, and stop the audio. To add a Flash movie to your page, use the Media button on the Insert toolbar and choose Flash. Select the location of the Flash movie and be sure to upload that movie to your server when you upload your pages.

Inserting Video

Programmatically, the process of adding video to your pages is virtually identical to that of adding audio. The difference lies in the fact that you'll be selecting a video formatted file, as opposed to an audio file, as the source or target of your link. Although new video formats are always emerging, Dreamweaver can embed a variety of existing formats, including video formatted for the Apple Quicktime player, the Windows Media Player, and the RealMedia Player.

One relatively new format, called Flash Video, does deserve some extra detail because support for it is now standard in Dreamweaver 8. Flash Video is a new format created by Macromedia that enables you to capture new video or transfer existing video to the FLV format. Flash Video files are then stored on your server and either linked to or embedded in your web pages. One of the great features about this new format is that it is rendered with the Flash Player, so nearly every browser out there is capable of displaying it. In addition, Flash Video uses a technology called "progressive download," which means that users start downloading the video to their hard drives, but during the course of the download, the video plays. This means that they don't have to wait for the entire video to be downloaded before they can start watching it.

To insert a Flash Video into your page, choose Insert, Media, Flash Video from the menu bar. Using the Insert Flash Video dialog box, shown in Figure 28.16, you can determine whether you want to use the Progressive Download Video for video stored on any web server, or stream the video if you have access to a Flash Communication Server connection. Streaming the video means that you are not caching the video in the browser, but rather are relaying it from a special server directly to the user's browser in real time.

Figure 28.16. The Insert Flash Video dialog box enables you to add video easily to your pages.


Tip

For more information on the Flash Communication Server, take a look at Chapter 15, "Enhancing Projects with Sound and Video."


In addition, you can specify the look and feel (the "skin") of the player, the size of the video in the page, and the text of the message displayed to users who don't have the latest version of the Flash Player. After you specify the settings for your video, click OK and Dreamweaver embeds the movie into your page. To view it, you need to preview the HTML page in your browser.

Adding Rich Media Content

In addition to Flash Video, Dreamweaver 8 also includes support for other rich media formats such as traditional Flash movies, images via the Image Viewer, Flash Text, Flash buttons, and FlashPaper documents.

Flash Movies

Embedding a Flash movie is pretty straightforward in Dreamweaver 8. Choose Insert, Media, Flash from the menu bar, choose the location of the Flash movie by using the Select File dialog box, and click OK.

Next, add the accessibility information via the Object Tag Accessibility Attributes dialog box and click OK. Dreamweaver embeds the Flash movie placeholder in your page and the Property inspector, shown in Figure 28.17, enables you to modify the attributes of the movie.

Figure 28.17. When a Flash movie is selected, the Property inspector provides you with access to the movie's attributes.


Image Viewer

The Flash Image Viewer was added to Dreamweaver in the MX 2004 version and offers an easy way to add an images slideshow to your pages. To insert the Image Viewer into your page, choose Insert, Media, Image Viewer from the menu bar. Because the resulting slideshow is a Flash file, type a name and choose a location for the file in the Save Flash Element dialog box, shown in Figure 28.18.

Figure 28.18. Select a name and location for the Flash slideshow.


Click OK and Dreamweaver embeds a Flash movie placeholder into your document. As with any other Flash movie, the attributes of the movie are editable via the Property inspector. The next step in creating your slideshow is to indicate the locations of the images that are to be included in the show. To do this, select the Flash placeholder and notice that Dreamweaver opens a special panel called the Flash Element panel (see Figure 28.19). This panel enables you to adjust any of the attributes of the Flash objects in your page.

Figure 28.19. The Flash Element panel displays the attributes for the selected Flash object.


The locations for the images to be displayed in the slideshow are stored in the imgURLs attribute and can be adjusted by selecting the imgURLs attribute and clicking the Edit button that appears. In the Edit 'imgURLs' Array dialog box, shown in Figure 28.20, add or remove as many values as you would like to the list and click OK.

Figure 28.20. Add the URLs to the images that should be included in the slideshow.


Save the page and preview it in your browser and the slideshow displays the images you included in the array.

Flash Text

One of the biggest issues with placing text in a web page is the fact that if the font of the text is not one that is supported by every browser, you run the risk of your page not displaying as you intended. Flash Text resolves that issue by enabling you to render your text into a Flash movie, using any font present on your current system, style, or color, and then convert the text into a Flash movie that retains all this information for all users to be embedded in your page. To create Flash Text, chose Insert, Media, Flash Text from the menu bar. In the Insert Flash Text dialog box, shown in Figure 28.21, add your text and style it however you would like.

Figure 28.21. Use the Insert Flash Text dialog box to create a text-based Flash movie.


You can also turn the Flash Text movie into a hyperlink by typing the URL to which it should point in the Link field. Be sure to type a name and location for the resulting filename and click OK. Dreamweaver saves the movie and embeds it in your document.

Flash Buttons

Similar to Flash Text, Flash buttons enable you to style your text into a clickable button format that contains different states for when the button is moused over or clicked on. To insert a Flash button, choose Insert, Media, Flash Button from the menu bar. In the Insert Flash Button dialog box (see Figure 28.22), choose a button style, enter the text for the button, style it to your taste, and type the URL to which the browser should go when clicked.

Figure 28.22. Use the Insert Flash button dialog box to create your Flash button.


Finally, indicate where the resulting Flash movie should be saved and click OK. Dreamweaver embeds the button in your page and you can view it by previewing the page in your browser.

FlashPaper

The last rich media type that I want to cover in this chapter is new to Dreamweaver 8 and is called FlashPaper. FlashPaper is a new format created by Macromedia that enables you to convert documents such as those created in Microsoft Word or Excel into Flash movies. These movies, referred to as FlashPaper, can then be displayed in your pages just like any other Flash movie.

Note

The creation process of FlashPaper documents is covered a little later in the book in the "Adding FlashPaper Documents" in Chapter 34, "Putting It All Together: Using Contribute to Manage Site Content."


To insert a FlashPaper movie, choose Insert, Media, FlashPaper from the menu bar. In the Insert FlashPaper dialog box (see Figure 28.23), select the source FlashPaper movie and the size to be displayed.

Figure 28.23. Use the Insert FlashPaper dialog box to add FlashPaper documents to your page.


Click OK and Dreamweaver embeds the button in your page. You can then view it by previewing the page in your browser.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net