Make your Web pages sing and dance by adding audio, video, and other multimedia to your pages. If you want to provide a richer experience for your users, to show rather than just to tell, or to entertain as well as inform, add animation or video. Not only does multimedia help tell stories more vividly, it can also make you look more professional.
And adding animation or video isn't as hard as you might think. One simple way to add video to a Web page is to upload a video file to YouTube (or search for video already on YouTube) and then insert it into your page. You find detailed instructions in this chapter for using video on YouTube, Vimeo, and other video hosting and social networking sites. You also find step-by-step instructions for using Dreamweaver to insert Flash animations and videos in into your Web pages.
Perhaps the most complicated aspect of multimedia on the Web is choosing the best format for your audience, which is why this chapter starts with a primer on audio and video formats and how multimedia works on the Web today.
When you add video or any other kind of multimedia to a Web site, your visitors may need a special player to play your files. A player is a small program that works alone or with a Web browser to add support for functions such as playing audio, video, or animation files. Among the best-known multimedia players are Adobe Flash Player, Windows Media Player, and Apple QuickTime.
The challenge is that not everyone on the Web uses the same player, and your site visitors must have the correct player to view your multimedia files. If your visitors don't have the right player, your video or animation file won't be displayed at all. If your multimedia file can't be displayed, you can include information on where to download most players for free, but many visitors find these messages confusing or irritating. As a result, many Web developers help out by doing one or more of the following:
Use Flash: By far the most widely used multimedia player, Flash supports video, audio, and animation.
Offer audio and video in two or three formats: For example, you can insert a video in the Flash format and then include links to the video in Windows Media Video and Quicktime so that visitors can choose the format that best fits the player they already have.
The same multimedia files in different file sizes: Including multiple versions of the same video in different sizes enables visitors with slower connection speeds to get the video file faster, while still providing a higher quality version for visitors who do have high-bandwidth connections.
Information about where to find the necessary player: It's always good practice to include instructions about where visitors can download any player needed to view files, but keep in mind that won't work for everyone. Many people surf the Web from offices, libraries, and other locations where they are unable to download and install new players (which is why choosing the popular Flash player or providing multiple versions are the safest options).
Make it easy for people to turn off sound. Remember that many people surf the Web in libraries, offices, and other places where unexpected sound can be jarring, disruptive, or worse. If you get someone in trouble for surfing the Web in their cubical, they may never come back to your Web site. I recommend you always warn people before you play video or audio, and always provide a way to turn off the sound quickly and easily if necessary.
Optimize your video for faster downloads. Optimizing multimedia for the Web works much like it does with images: the smaller the file size, the lower the quality but the faster the file download. One task in this chapter shows you how to optimize a video with the free Adobe Media Encoder.
Most of the tasks in this chapter focus on techniques using the Flash video and animation formats because Flash has clearly emerged as one of the most popular technologies for creating animations as well as videos for the Web. Indicative of its popularity, YouTube converts videos into the Flash format for display on its Web site.
Flash animation files use the file extension .swf. Flash video uses the .flv extension. You can easily insert Flash animations and Flash videos into your pages using Dreamweaver.
Warning
Before you choose Flash, though, you should be aware of its few downsides:
Flash isn't supported by most mobile devices, including the iPhone and Blackberry. (Check the iPhone and Blackberry Web sites for updates as this may change in the future, but as of the writing of this book, if you visit a site built in Flash with an iPhone, you just get a blank page.)
Flash doesn't always print well. Many people like to print Web pages, especially pages that include instructions, directions, and other important reference material. If you include that information in a Flash animation which can't be printed, consider including a simple XHTML version as an alternative.
Flash can cause accessibility problems for visitors with disabilities unless you create an alternate text option for Flash files. Similarly, text included in Flash files isn't easily read by search engines (although including alternative text can help with this limitation, too). You can add Alternative text to a Flash file in Dreamweaver by clicking to select the Flash file, and then entering a text description in the Alt field in the Property Inspector.
Some people deliberately block Flash files because they're often used for advertising or to create animated introduction screens that look pretty but don't offer much value to site visitors. (You may want to describe what they're missing.)
Despite these downsides, adding a little Flash video or animation can add a lot of life to your site. And, if you're not designing your entire site in Flash, it's generally a safe format choice for adding a little video, audio, or animation to your Web site.
Stuff You Need to Know
Adobe Dreamweaver
A Flash file in the SWF format (sample file available for download from
www.DigitalFamily.com/diy)
Time needed:
About an hour
Flash animation files are relatively easy to insert into a Web page when you use Dreamweaver. In this section, I assume that you have a completed Flash animation file and that you want to add it to your Web page. To create a Flash file, you need Adobe Flash or a similar program that supports the Flash format. (If you want to know how to create Flash files, check out Adobe Flash CS4 For Dummies, by Ellen Finkelstein and Gurdy Leete, from Wiley.)
You insert a Flash file in much the same way as you insert an image file, but because Flash can do so much more than a still image, you choose from a variety of settings and options for controlling how your Flash file plays. Before you start, make sure to move or save the Flash file into the main root folder of your Web site (see Chapter 6 for detailed instructions about setting up a site in Dreamweaver and identifying the root folder). If you like, you can create a subfolder to store your Flash files inside your main site folder, just as you might create an images folder for images.
To add a Flash file to a Web site, first open an existing page or create a new document and save the file, and then follow these steps:
In Dreamweaver, click to insert the cursor where you want the Flash file to appear on your Web page. In this example, I'm inserting it into a
divtag in the middle of the page. You can read more aboutdivtags in Chapter 6.
Choose Insert
In the Select File dialog box that opens, browse your hard drive to locate the Flash file that you want to insert in your page, click to select the file, and then click OK. You can also double-click to select the file.
If you haven't turned accessibility options off in Dreamweaver's Preferences dialog, you're prompted to add alternative text to describe the Flash file. Enter a short description or name for the Flash file. Use of the Tab Index and Access Key options is optional. Leave these blank unless you want to include a special key command to control the file. Click OK; the dialog box closes, and the Flash file is inserted into your document.
Tip
Because Flash is an open standard, you can create Flash files with a variety of programs, including Adobe Photoshop Elements (which uses the Flash format when you create Web galleries in Elements), and Adobe Illustrator (which has an Export to SWF option).
Dreamweaver displays Flash as a solid, gray box that represents the width and height of the Flash file. Click the gray box to display the Flash options in the Property Inspector at the bottom of the workspace.
Click the Play button in the Property Inspector to play the Flash file. In this example, the Flash file is a dancing dog I purchased from
iStockPhoto.com, so pressing the Play button causes the cartoon dog to dance on the screen. (Note: When the Play button has been activated, the button text changes to Stop.)
Choose File
You can make a number of adjustments to the way a Flash file is displayed by changing the settings in the Property Inspector: for example, Loop (replays the file if it's an animation), Autoplay (causes the file to play as soon as the page is loaded into a browser), and Quality (controls how good the file will look, how fast it will play, and how long it will take to download).
When you finish adding the Flash file to your page, choose File
You can convert video from one file format to another relatively easily by using most video-editing programs. For example, you can open a video in AVI format in a program such as Adobe Premier Elements (a good video editor for beginners) and then choose File
Editing video gets complicated, and optimizing video for the best quality with the fastest download time is both an art and a science. The most basic process of converting a video file isn't difficult, however, after you understand the conversion options.
This task walks you through the process of converting a video file from Windows Media into Flash video (FLV), using the Adobe Media Encoder. In this task, I'm using the encoder that comes with Adobe CS4 Creative Suite. A very similar, but somewhat more limited version called the Flash Video Encoder is also included in Adobe CS3 Creative Suite. Both versions will work fine for this task.
Launch the Adobe Media Encoder and click the Add button to load a video that you want to convert into a Flash video file. In this example, I added a short video clip that was saved in Windows Media Video (WMV) format, but you can add video in a variety of formats, including AVI, MP4, and QuickTime. Click the Settings button on the right side of the encoder to launch the Export Settings dialog box, as shown in the next figure.
In the Export Settings dialog box that appears, leave the Format set to FLV and then choose a Flash encoding profile from the Preset drop-down menu.
You can choose from a long list of presets. The later the version of Flash and the larger the size, the better the video will look. However, a trade-off is involved: Not everyone has already downloaded the latest version and not everyone has a high-bandwidth connection to the Internet. If you know many people who visit your site will be using older computers or have slow connections, you may want to use one of the lower presets.
Click the double arrows to access Advanced Mode for more specific settings if you want to change any preset options, such as Frame rate, which you can find under the Video tab. To achieve the fastest download time, set the frame rate to the lowest setting that still looks good. If you're encoding a video that has lots of action, you need a higher frame rate — ideally, 24 or better — or else your video loses details and looks fuzzy in places. If you're converting a video, such as this Windows Media file that has already been encoded, your best option is to choose Same As Source from the preset drop-down list and leave the frame rate unchanged.
Click the Audio tab to adjust the Bitrate and other options. If your audio file has only a single voice, you can set this option quite low, and it still sounds good. If your audio file has music, special sound effects, or other multifaceted audio factors, set the Bitrate to at least 128 Kbps.
Choose the Others tab to enter FTP options; then you can upload video files to a server directly from the encoder. When you have all the settings the way you want, click OK. The Export Settings dialog box closes, and you return to the encoder.
After you have everything adjusted, you're ready to begin the encoding process. Click the Start Queue button. Hint: The encoding process can take several minutes, even for a short video file. A small preview window in the lower-right corner of the encoder enables you to watch the encoding process in action. A new file is created in the Flash format and is saved in the same folder as the original video file.
Stuff You Need to Know
Adobe Dreamweaver
A Flash video file (available from this book's companion site; see the Introduction for details)
Time needed:
About an hour
Flash video is fast becoming the video format of choice among many designers. Video on the Web has been problematic for a long time because many different formats are available and you can never guarantee that everyone in your audience can view your videos in any single format.
Although the video players have been fighting it out for years, Flash seems to be winning the game. YouTube offers videos in the FLV Flash video format and millions of people have the Flash player on their computers because it's small, easy to download and install, and free.
Because Adobe owns both Flash and Dreamweaver, you find support for Flash files in Dreamweaver. You can use the Insert dialog box to easily set the many options for how a Flash video plays within a Web page. In the previous task, you find instructions for converting a video file into the Flash format. Follow these steps to insert a Flash video file into a Web page:
Create a new Web page in Dreamweaver or open an existing page, and then click to place your cursor where you want the file to appear on the page. Select Common from the Insert panel; then, from the Media drop-down list, choose FLV for Flash Video. (You can also choose Insert
At the top of the Insert FLV dialog box that appears, specify streaming or progressive. Note that you must have special server software to stream video. Check with your Internet hosting service or system administrator to find out whether your Web server supports streaming Flash files. If not, select Progressive. Click the Browse button and select the Flash file from your hard drive. If the file isn't in your site's root folder, Dreamweaver offers to copy it there for you. Remember: The Flash file must be in your site's main root folder and it must be uploaded to your Web server in the same relative location when you upload the page that displays the file.
Next you choose a Skin, which creates a player, or Flash controller, for your video. The Skin drop-down list includes a variety of Play, Pause, Stop, and Volume controls in different sizes and designs that can be inserted into the page with the Flash file. When you choose a skin from the drop-down list, a preview of the selected skin is displayed, as shown here, so you can see the size and style of the Flash controller.
Click the Detect Size button; Dreamweaver automatically inserts the height and width of the Flash file into the HTML code. If you want the Flash video to play as soon as the page is loaded, select the Auto Play check box. To automatically rewind the video after it has played, select the Auto Rewind check box.
Click OK to insert the Flash file and close the dialog box. The Flash file is represented in the Web page by a box that has the same height and width of the video. Click the box that represents the video to select it. You can make further adjustments to the settings in Property Inspector at the bottom of the workspace. Click to select the Flash file to display the Flash properties, such as size, autoplay, and loop.
To view the Flash video, preview the page in a Web browser by choosing File
When you insert a Flash video file and include a skin for the player, Dreamweaver creates a Flash file with the
.swfextension and saves it in your root site folder. This Flash file contains the player controls. It must be uploaded to your Web site when you publish the page with the Flash file for the player controls to work on your Web site. In this figure, the file namedClear-Skin_3.swfcontains the Flash controller.
Tip
To find out more about advanced Flash settings, called parameters, visit www.Adobe.com and search for "Flash parameters".
Stuff You Need to Know
An Internet connection
A video file optimized for the Internet
Time needed:
About an hour
YouTube has attracted a tremendous amount of attention in recent years as the place to find Web videos. You can upload your own videos to www.youtube.com for all the world to see (a great way to garner free promotion), and use the site to host videos. So why not host your videos on your own Web server? Because bandwidth costs money, especially if you get lucky enough to get millions of visits to your video. YouTube, Vimeo, and others also provide streaming video hosting, which many Web hosts charge extra for (or don't provide at all). After videos are uploaded to a site like YouTube, you can then embed them so that they play within a page in your site. The result is that visitors see your video on your site, but you don't have to pay for premium bandwidth.
If you want the greatest possible audience to view your videos, I recommend YouTube. If you want more control over the use of your videos and how they're displayed in your pages, the premium service at Vimeo is a great option. Other video hosting services include Photobucket, Google Videos, and Revver, which offers advertising revenue for videos that attract a large audience.
As you see in this short task, YouTube makes it easy to upload videos and then embed them into your Web pages. Vimeo and other services are similar. The good thing is that most videos can easily work within those parameters. If your video is ready to post, follow these steps:
Before you can upload videos, you must first register at YouTube, a free and relatively painless process that simply requires filling out a form on the site.
To upload a video you must first log in, then click the Upload link in the upper-right corner of any YouTube page, and then use the Browse button to locate the video file you want to upload from your hard drive. Fill in the fields in the upload form to describe the video and add keywords to make it easier for YouTube visitors to find your video when they search the site.
When uploading is complete, YouTube displays a confirmation page that includes HTML code you can add to your own Web site or blog to display your video on your own site. You can even choose the size and other display settings. To link to a video on YouTube, copy the URL and create a link in Dreamweaver like you would to any page on the Web. If you want to embed the video so that it plays within a page on your site, click and drag to select all text in the Embed box and then press Ctrl+C to copy it.
To add the code to your Web page in Dreamweaver, click the Split View button at the top of the workspace to view the HTML code of any page, click to place the cursor in the code wherever you want the video to be displayed, and choose File
Choose File
Tip
You can always return to the YouTube page to edit your description or keywords and to find the code you need in order to embed the video in your own site: Click the My Account button and then My Videos, and then select the video you want from your list of uploaded files.