Dreamweaver Lesson 8
As connection speeds increase, people are demanding more interesting content. One way to meet that need is to add more dynamic content, instead of just plain text, to a web site. Animations, sound, and video are helping to fit the bill in terms of making web content more compelling and keeping web site visitors coming back for more.
What you'll learn in this lesson:
- Inserting Flash content
- Using the Assets panel
- Understanding plug-ins
- Adding video and sound files to a web page
Starting up with Dreamweaver CS4
Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” on page 3.
You will work with several files from the dw08lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.
Before you begin, you need to create a site definition that points to the dw08lessons folder from the included DVD that contains resources you need for these lessons. Go to Site > New Site, or, for details on creating a site definition, refer to Lesson 2, “Setting Up a New Site.”
Making web content interesting in Dreamweaver CS4
Adding video, sound, and animation to a web site is a surefire way to make the site more interesting and engaging. Video, for example, plays a key role in supplying interesting and varied web content, in that it gives the average person an opportunity to showcase his or her talents to a worldwide audience. Web sites such as YouTube and MySpace are prime examples of how video is impacting the Internet in this way. Video also allows companies to post commercials, speeches, and other corporate content that may not normally be available to the public.
Sound allows you to enhance web pages by supplementing visual content with music or sound effects. Sound also inspires user interaction (as you’ll see later in this lesson), thereby giving the user a more interesting online experience.
Animation gives web pages a whole new life by adding movement and effects to images that still pictures just can’t match. Something moving on a web page automatically draws a visitor’s eye. Movement is especially effective for banner ads, buttons, and whatever else you’d like your visitors to pay attention to.
Inserting Flash movies using Dreamweaver CS4
Adobe’s Flash CS4 Professional application is used primarily to create animation and interactive projects. In terms of animation, you can use Flash to create animated web banners, buttons, splash pages, slide shows, and more. Inserting Flash animations into your web page is a great way to bring life to an otherwise static environment.
Web banners are a big part of advertising these days. And if a web banner includes moving elements, that movement automatically draws the user’s eye right to the banner. In this exercise, you will create a banner to place on a web site.
1 In the Files panel, navigate to the dw08lessons folder, and inside the Pages folder, double-click the banner.html page to open it.
|
Double-click banner.html to open this file. |
2 If the page opens in Split view, click on the Show Design View button.
3 Click in the empty cell to the right of the Welcome to MKI text.
4 In the Assets tab of the Files panel, select the fourth button down, the Flash button (
), to display a list of all the Flash movies in the site.
|
Press the Flash button in the Assets tab of
the Files panel. |
-
Flash movies are labeled with the .swf extension. However, other programs, including After Effects and Dreamweaver, can create .swf files as well.
5 Select the learningcenterbanner.swf file and drag it to the cell you clicked on in step 3 to insert it.
6 Type learning center banner in the Title text field when the Object Tag Accessibility Attributes dialog box appears, then press OK.
|
Name the inserted file in the Object Tag Accessibility Attributes dialog box. |
As you can see, inserting a Flash movie into a web page is much like inserting an image. The width and height of the .swf are automatically established based on the file’s physical size, just as they are for images such as .jpeg and .gif files.
The .swf file appears with a generic Flash icon on a gray image. You can preview the image in a number of ways.
7 Keep the image selected and go to the Property Inspector. Select the Play button; the banner should appear.
|
Select the Play button in the Property Inspector to make the banner appear. |
-
You must have Flash Player installed to view an .swf file. If you don’t have the application installed, visit Adobe.com/products/flashplayer to download and install it. Note that visitors to your web site also must have Flash Player installed to view your Flash content. A good rule of thumb when including Flash content on a web site is to let visitors know as soon as they get to your site that they’ll need to have Flash Player. Be sure to include the link to the Flash Player web page (the URL provided at the beginning of this paragraph) so that visitors can download the Flash Player, if necessary.
8 After you click the Play button, it automatically turns into a Stop button. Press the Stop button after you’ve finished checking out the banner.
To see the page without the distraction of the other panels, choose File > Save, then File > Preview in Browser. If the Copy Dependent Files window appears, press OK to preview. When you’re finished, go back to Dreamweaver and look at some of the buttons in the Property Inspector. The Edit button, for example, automatically opens Flash if you have it installed, and then opens the .swf file in Flash. The Property Inspector also includes Loop and Autoplay checkboxes that control the playback of the .swf file.
|
The Property Inspector contains a number of options relating to .swf files. |
9 Choose File > Save to save your file before moving on to the next exercise.
-
When designing web pages, be sure to include space in your design for .swf files, if you’re going to incorporate them into the page. The files can vary in size, depending on what you’re using them for. To learn more about Flash, visit Adobe.com/products/flash.
Adding video in Dreamweaver CS4
Adding video to a web page is relatively easy, the decision to include it should also be based on a evaluation of your audience. The large file sizes associated with video will affect the experience of all your users, particularly those who don’t have high-speed internet connections. In this section you will learn how to integrate video into your web pages using three of the most popular formats: Flash Video, Quicktime and Windows Media.
Flash Video in Dreamweaver CS4
Flash Video is spreading across the web, and is the format of choice on sites such as MySpace, YouTube, and Google. Flash Video allows users to compress video files to a reasonable size, offers smooth streaming for playback, and provides users with the ability to protect video from unauthorized copying.
Different programs create Flash Video, most notably Flash and Premiere Pro. Creating the video is an intricate process, so you’ll want to do your homework and learn as much as you can about how it works in order to get the best results.
To insert Flash Video into your site:
1 In the Pages folder in the Files panel, open the flashvideo.html file. Click in the cell to the right of the Trains of the Wild West text.
2 In the Assets tab of the Files panel, select the sixth button down, the Movie button (insert icon), to show the videos available in your site.
|
Select the Movies button in the Assets tab. |
3 Right-click (Windows) or Ctrl+click (Mac OS) on the trains.flv file and choose Insert from the contextual menu to open the Insert Flash Video dialog box.
4 In the Insert Flash Video dialog box, click on the Video type drop-down menu and select Progressive Download Video.
|
The Insert Flash Video dialog box. |
-
In this example, Progressive Download Video was chosen instead of Streaming Video because the former is the more common method among average web developers. Progressive Download Video works by downloading the video to the user’s hard drive, and then playing it. Because it’s a progressive download, the video starts to play as it downloads, and the user doesn’t have to wait for the entire video to download in order to see it. Streaming Video streams video content and plays it on a web page after a short buffer period. The buffer period ensures smooth playback. The catch is that to enable Streaming Video, your videos must be accessible through a web streaming service such as Adobe Flash Media Server. If you want to learn more about the process, click the Help button on the Insert Flash Video dialog box.
Next, you’ll want to select a skin. A skin is a control panel that shows up on the bottom of the video, and allows the user to control video playback. In other words, this is where users can play, rewind, and fast-forward their videos.
5 Click on the Skin drop-down menu to examine your choices. You see a preview of the skin just below the menu. Choose any skin you like; this example uses Corona Skin 3.
|
A number of skins are available in the Skin drop-down menu. |
6 Click on the Detect Size button so that Dreamweaver can establish the physical space the video will occupy on the page. The size is based on the size of the actual video.
You can put in your own size, too. Do not enter a size that’s bigger than the original video, because the video will stretch and pixelate. The average size of a web video is 320 x 240. Full-screen video (720 x 480) is not a good idea because a video of that size is a big file that will take a long time to download and play properly, even with a broadband connection.
7 Press OK to insert the video.
You can’t see the video in Dreamweaver, so choose File > Save, then File > Preview in Browser to preview it in a web browser. Close the browser when you are finished previewing.
|
Insert the Flash video into your web page. |
8 Choose File > Save to save your work.
QuickTime video and Windows Media
QuickTime and Windows Media are also common video formats used on the web. They’re somewhat similar to each other, but QuickTime offers some advantages over Windows Media, namely that QuickTime offers more compression options for better quality and optimal file size management.
To see a QuickTime video, you need to have QuickTime installed. You can download QuickTime from Apple.com/quicktime/download. To view Windows Media files, you need Windows Media Player, which you can download at Microsoft.com/windows/windowsmedia/download.
QuickTime and Windows Media video are inserted into a page the same way as Flash Video. The difference between the video formats is that users create QuickTime and Windows Media video using different software applications, including Adobe Premiere Pro and Apple Final Cut Pro.
To insert QuickTime and Windows Media video:
1 In the Files panel, open the quicktime.html file in the Pages folder. Click in the cell to the right of the Trains of the Wild West text.
2 Go to the Assets panel and select the Movies button to show the videos available in your site.
3 Right-click (Windows) or Ctrl+click (Mac OS) on the trainsorenson.mov file, and choose Insert from the contextual menu to insert it into the cell. You’ll see a plug-in icon (
) on the page, indicating that a plug-in is required to see the file.
|
The plug-in icon. |
4 When you insert a plug-in file, you need to manually establish the size of the file. In the Property Inspector, type 320 in the W (width) window and 260 in the H (height) window.
The video is 320 x 240. You are using 260 for the height to allow space for the controller. QuickTime and Windows Media files already have a controller built in with the plug-in. You need to allow a little extra space for the video controls when you’re entering a size manually.
5 To preview the file, click the Play button in the Property Inspector, or preview the page in a web browser by pressing the Preview/Debug in Browser button (
) on the Document toolbar.
|
Preview the video file. |
This file is named trainsorenson.mov because of the type of compression used on it. The Sorenson codec is a common form of web video compression. Choosing the right codec is a bit of an art form.
You should use a codec that’s universal and not exclusive to the software that’s generating it, so that the average user visiting your site will be able to see the video. Various programs specialize in compression, among them the Adobe Media Encoder through Premiere Pro, Apple’s Compressor, and Autodesk’s Cleaner. To learn more about compression, type the word codec into the Google or Yahoo search field.
Other web video considerations |
In addition to size, consider the following when you’re preparing video for the Web:
Length: Unless you’ll be offering video through a streaming video service, keep the video length down to keep the file size manageable and the progressive playback smooth.
Audio: Although stereo is nice, using stereo files on the web is a little iffy, as many home users don’t have stereo speakers hooked up to their computers. Stereo creates a larger file size and doesn’t add that much to the quality of the sound unless you’re doing some tricks with the balance between the speakers, which people without speakers won’t hear anyway. Keep your video sound set to mono to help manage the file size a bit more effectively.
Movement, animated graphics, and effects: These things make a video look nice, but increasing the file size can interrupt playback.
Copywritten material: Be careful when choosing material for your video, especially when it comes to music. Pirating is a big issue today. Unless you have the rights to the music or you have permission from the music publisher and are paying royalties, you can’t use music for promotional or commercial purposes when it comes to publishing material on the web. |
Inserting sound in Dreamweaver CS4
Sound is another element you can use to enhance your web site. Sound has the same considerations as video: it can take a while to download and it requires a plug-in, such as QuickTime or Windows Media Player, to hear it.
You can incorporate different types of sound files into a web page. Select a format that will run on any computer, whether the user is on the Windows or Mac OS platform. Three formats are common: .aif, .wav, and .mp3.
Files in the .aif or .wav format are similar; the main difference is where they originate from. Windows is generally linked to the .wav format, and Mac OS is associated with the .aif format. The Windows and Mac OS platforms can read both formats. In addition, these files sound similar to one another: both are dynamic and result in full-sounding, high-quality files.
You can also play .mp3 format files on both the Windows and Mac OS platforms. The big advantage to using an .mp3 file is that it’s typically smaller in size than an .aif or .wav file. The .mp3 format may not reproduce full CD-quality sound, but it downloads faster and takes up less hard drive space. MP3 players, such as Apple’s iPod, have become very popular, as you can tote around literally thousands of songs on them.
1 To insert sound, in the Files panel, double-click the sound.html file located in the Pages folder. Click in the left cell just below the Can you identify the train by its sound? text.
2 In the Common category of the Insert panel, select the Media drop-down menu, and choose Plugin.
|
Choose Plugin from the Media drop-down menu. |
3 In the Select File dialog box, go to the Assets folder located in the dw08lessons root folder. Choose the Audio Assets folder and select the Train Pass 1.mp3 file.
A plug-in icon () appears in the table, indicating that a plug-in is required to hear the sound.
4 Choose File > Save, then preview the page in a browser by pressing the Preview/Debug in Browser button (). The sound plays automatically.
Because you’ll be inserting more than one sound in this exercise, you need to change the parameters of the sound so that the user has to click the sound in order to hear it; otherwise, all three sounds play at the same time. You also do this because users generally want to control the media and to be able to play video and sound at their convenience.
5 After previewing the page in the browser, return to Dreamweaver.
6 Keep the plug-in selected, and press the Parameters button in the Property Inspector.
|
Define the plug-in’s parameters by pressing the Parameters button in the Property Inspector. |
7 In the Parameters dialog box, type autoplay in the Parameter column and false in the Value column. Press OK.
|
The Parameters dialog box. |
8 Choose File> Save, then preview the page in a browser again, and note that you need to press the Play button in the plug-in application in order to hear the sound.
9 Return to Dreamweaver when you finish previewing the page. Click in the cell next to the plug-in and follow the same procedure to insert the Train Pass 2.mp3 file. Finish with the last cell and the Train Pass 3.mp3 file. Don’t forget to set the parameters for each file.
|
Your modified plug-in and the Property Inspector. |
Preparing audio for the web |
Audio has the same considerations as any other digital file type. You need to pay attention to file size while trying to maintain quality.
Various programs offer audio-editing and format capabilities. This includes programs such as Adobe Soundbooth, Apple Soundtrack Pro, and Audacity (which is available as a free download on the web).
Once you’ve edited a sound to your liking, you need to set up certain technical specifications for the final file. This includes the type of file you’ll output (.mp3, .aif, and so on), whether the sound is in stereo or mono, and a sample rate. For the web, a good sample rate is in the 22kHz–32kHz range; 22kHz is at the low end of acceptable quality, and anything higher than 32kHz starts to weigh down the file size.
Stereo is nice, but unnecessary, unless you’re moving sound from the left speaker to the right speaker and vice versa. You can save a significant amount of file space by keeping the sound file set to mono.
There are a number of compression choices when it comes to audio. Your best bet is to experiment and see what gives you the results you want. Creating audio files is very much like creating video for the web: there are no definite answers, and you need to experiment to find the best balance between file size and quality. |
Self study
The best way to learn more about video for the web is to experiment. Try inserting and compressing videos using different codecs and file types. You’ll find that the results will vary, depending on the file type and codec you choose, and also on the type of video content.
Review
Questions
1 When inserting a Flash animation, what type of file is inserted into the web page?
2 What plug-in is needed to view an .flv file?
3 What is a skin when referring to a Flash Video file?
Answers
1 When a Flash animation is inserted into a page in Dreamweaver, an .swf file is used.
2 In order to view an .flv file, a user must have the Flash Player plug-in installed on
their computer.
3 A set of controls on the bottom of the video that control video playback.
Congratulations! You have finished Dreamweaver Lesson 8, “Adding Flash, Video, and Sound Content.”
