Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Inserting Multimedia

Now you're ready to begin inserting multimedia objects on your page.

Even if a visitor to your site doesn't have the Flash Player plug-in, they'll be prompted to download and install it, so really, you shouldn't hesitate to incorporate Flash into your web site.

We'll start with Flash. You'll see not only how to insert a Flash movie, but also how to set properties for it so that it plays back for your visitor as you want it to. Then you'll see how to work with audio and video, both of which work in a similar manner.

Inserting Flash Files

You're ready to insert Flash movies on your Dreamweaver page. Flash movies are typically created in the Macromedia Flash program and saved as SWF (Shockwave Format) files. You then insert these SWF files on a web page just as you insert a graphic.

Imminent Doom

If you're working on a Mac, make sure your media filesboth audio and videohave a file extension. If you leave off the extension when you upload your site, your media files won't work!

As a designer, you should have popular multimedia plug-ins installed for testing purposes, just as you should have multiple browsers available.

You can insert a Flash movie, saved in the SWF format, on your page in Dreamweaver. Even though the Flash movie may contain its own content, like graphics, buttons, and so on, you can combine it with content in your Dreamweaver page.

[View full size image]

A cool thing about working with Flash is that once you've place a movie on your web page, you can move it and manipulate it just as if it were a static graphic. And when you preview your page in a web browser, you'll see the animation play within your page layout.

Noteworthy

The file format and extension are a little confusing. Flash files use the .swf extension, which stands for Shockwave Flash. However, another Macromedia program, Director, creates Shockwave files, but they use the .dcr extension.

Noteworthy

When using any sort of multimedia on the web, remember this golden rule: Your multimedia must have a purpose. Using Flash, audio, or video on your site simply because you always wanted to create a spinning logo or just to show off your collection of background music won't cut it. You should use it only if you've determined that the experience the particular media provides is the best way to communicate with your audience.

Here's how to insert a Flash movie:

Open your page in Dreamweaver and place the insertion point where you want to insert the Flash file.

You can insert Flash files anywhere on your page. For example, if you're using layers to control your page layout, click inside the layer that you want to contain your movie.

Choose Insert > Media > Flash.

Lookin' for some free Flash content for your site? Get started at [flashbuttons.com] and [freeflashlogos.com].

In the Select File dialog box that appears, navigate to and select the SWF file that you want to insert; then click OK (Windows) or Choose (Mac).

Noteworthy

Because Flash has been misused so often, some web browsers now have extensions and plug-ins to block Flash contentfor instance, Firefox's Flashblock. If you want to include Flash movies in your site, consider building an opening splash page for your site that lists your site's optimal requirements, including the Flash Player plug-in.

If you have Dreamweaver's accessibility features turned on, the Object Tag Accessibility Attributes dialog box appears. Fill in the Title, Access Key, and Tab Index fields to give your users an alternate way to access and view your media, then click OK.

What do these accessibility attributes mean?

Title: Similar to the Alt tag, it gives your page elements a name and description that your users can view.

Access Key: Provides a keyboard shortcut that moves users directly to an element on the page.

Tab Index: Establishes a sequential order in which page elements are accessed using the Tab key.

Dreamweaver inserts the Flash file onto your page, leaving an icon of a plug-in as a placeholder. Unlike with Flash Text and Flash buttons, Dreamweaver doesn't display the contents of a Flash file after it's been inserted.

[View full size image]

To see your Flash file in action, click the Play button in the Property Inspector.

[View full size image]

The Flash file plays within Dreamweaver. It's much better, however, to preview your Flash file in a web browser. That way, you'll have a better idea of what your visitor will see.

Now that you have a Flash file inserted into your page, you're ready to set its properties.

If you've inserted more than one Flash file on your page and you want to view them all at once, press Control+Alt+Shift+P (Windows) or Shift+Option+Command+P (Macintosh).

In the Property Inspector, use the W (width) and H (height) fields to specify the size of the area that your Flash movie will occupy on your page.

When you first insert a Flash file, Dreamweaver sets the width and height of the movie for you. Note that these fields do not necessarily set the width and the height of the Flash movie, but only of the page area that the Flash movie will occupy. You'll specify the relationship between the movie size and the page area when you use the Scale option, as you'll soon see.

Click Loop if you want to make the movie play continuously in your visitor's browser.

If Loop is unchecked, then the movie will play through once and then stop.

To make the movie play automatically as soon as it loads into the visitor's browser window, select Autoplay.

In other words, with Autoplay checked, the user won't have to click a Play button to start the movie; it will begin playing on its own.

To add some space between the Flash movie and other objects on your page, insert values for V Space and H Space.

Just as for graphics, adding horizontal or vertical spacing pushes text, graphics, and other page objects away from your Flash file.

10.

Use the Quality pull-down menu to set the playback quality of your Flash movie, and thus the speed at which it is rendered on your visitor's screen.

Low makes the movie play faster, but sacrifices quality.

Auto Low plays the movie faster, but improves the movie's quality if possible.

Auto High places more importance on the movie's quality, increasing playback speed if possible.

High produces the highest-quality movie; use it when you're not concerned about playback speed.

11.

Choose an option from the Scale menu to control the way your Flash movie occupies the space on your page. The options are as follows:

[View full size image]

Default (Show All) displays the entire contents of your Flash movie in the area specified in the Property Inspector's W (width) and H (height) fields without distorting the shape of the movie. Any extra space around the movie is filled with the color specified in the Property Inspector's background color field.

[View full size image]

No Border completely fills the specified area without distortion, but doesn't show any background color. The movie will be cropped if necessary for it to occupy the entire area with the correct proportions.

[View full size image]

Exact Fit fills the entire specified area, but instead of filling empty space with background color or cropping the movie to maintain its proportions, this option distorts the Flash file so that it fills the specified area on your page.

12.

Use the Align menu to set the horizontal and vertical alignment of your Flash movie.

The alignment options available in the Property inspector's Align menu are the same for Flash movies as they are for graphics.

13.

Use the Property Inspector's Bg field to set a background color for the movie area.

The background color appears in the visitor's browser whenever the movie isn't playing, and it may also appear during the movie depending on the option you choose from the Scale menu.

Inserting Director Shockwave Files

Inserting Director Shockwave files is similar to inserting Flash files, but with just a few differences. Most notably, when you insert a Shockwave file, Dreamweaver won't read the file's dimensions and instead places the file on your page at 32x32 pixelsno good. So when inserting Shockwave files, you need to manually insert the dimensions of the file after it's on your page.

To minimize the hassle, open your file in Director and choose Modify > Movie > Properties. See the Stage Size values? Burn them into your memory. When you've resized your file, head back to Dreamweaver to insert it.

Inserting a Shockwave file into your Dreamweaver page is similar to inserting a Flash file, although you'll have to manually set the Shockwave file's width and height.

[View full size image]

Here's how to insert a Shockwave file:

Open your page in Dreamweaver and place the insertion point where you want to your Shockwave movie to appear.

Choose Insert > Media > Shockwave.

In the Select File dialog box that appears, navigate to your Shockwave file, select it, and click OK (Windows) or Choose (Mac).

Don't forget that Shockwave files use the DCR file extension.

If you have Dreamweaver's accessibility features turned on, the Object Tag Accessibility Attributes dialog box will appear. Complete the dialog box and click OK.

Dreamweaver inserts the file on your page as a 32x32 pixel Shockwave icon.

In the Property Inspector, set the correct size of your Shockwave file in the W (width) and H (height) fields.

What, you forgot? Geez, that means a trip back to Director to find out the correct size. Don't worryI do that all the time!

Proceed as when inserting a Flash file.

The other options in the Property Inspector are the same as for Flash files, except there aren't as many.

Adding Audio

You can add audio to your site in two ways. The simplest way is to provide a link on your page to an audio file that surfers can download and listen to at their leisure. When a visitor downloads the audio file, the visitor's audio software will kick in and play it, so you don't have to worry about what plug-ins are installed.

You can add audio to your site in two ways: by linking to an audio file or by embedding the file in your web page.

You can also embed an audio file on your page, so that it plays within your site. You can set the audio file to streamthat is, to begin playing before it's entirely downloaded, so that your visitors hear it more quickly after they open your web page. Streaming audio is useful, for instance, if you want to include background music on your site.

Stuck for audio and sound effects for your site? [Flashkit.com] has a massive library of sound effects and background loops (as well as lots of other web-related content). Also check out [sound-effects-library.com].

Inserting audio into Dreamweaver is easy. You'll see only the plug-in icon on your page as you work in Dreamweaver, but when you preview the page in a browser, you'll see your media player's controls instead.

When you go this route, you'll be relying on the visitor to have one of the three media browser plug-ins installed; whatever plug-in the visitor has will then appear as an object on your page. The plug-in will give the visitor stop, rewind, and play controls to play the sound file. However, since you can't know which audio plug-in your visitor will be using, you won't know exactly how your page will look (if you're as concerned about page design and aesthetics as I am, this can be a real issue).

Noteworthy

Whether you're providing a link to an audio file or streaming it, don't forget that just like other files used in your site, audio files will need to be uploaded when you publish your site to the web. Otherwise, your audio won't work.

Probably the best fix is to use Flash's SWF format for your audio. As discussed earlier, the SWF format relies on the Flash Player plug-in, so you can forget about plug-in compatibility issues and awkward audio controls. However, you'll need to create your sound files using the Flash application.

Whether you link to audio files or embed them, MP3 is the simplest, cleanest format to use. It's the standard for audio on the web, and any media software can play it, so your visitors should have no problems hearing your audio. Even so, if you're offering audio files for download, you should provide several audio formats, such as WMA and WAV, so surfers can choose the file type they prefer.

Here's how to link to an audio file:

On your page in Dreamweaver, select the text or graphic that you want to use to link to the audio file.

Noteworthy

If you want to provide audio files in multiple formats, consider Apple's QuickTime Pro (not to be confused with the free QuickTime Player). At $30, it's a pretty cheap fix for converting sound files to different formats. Check it out at [apple.com/quicktime] for more.

If you're linking from text, it's a good idea to type the size of the audio file so surfers know what kind of download they're in for.

In the Property inspector, click the Link field's folder icon.

In the Select File dialog box that appears, navigate to and select the audio file that you want to link to; then click OK (Windows) or Choose (Mac).

Dreamweaver creates a link to the audio file.

Don't use MIDI music on your site, or I'll come to your house and take away your computer.

Here's how to embed an audio file:

On your page in Dreamweaver, place the insertion point where you want to embed the audio file.

Choose Insert > Media > Plugin.

In the Select File dialog box that appears, navigate to and select the audio file that you want to embed; then click OK (Windows) or Choose (Mac).

Dreamweaver inserts the embedded audio file on your page. It appears as a 32x32-pixel plug-in placeholder.

In the Property Inspector, set the embedded audio file's width and height.

The values that you enter determine the size of the player controls that will appear on your page. Most player plug-ins should work with width and height values of 144x60. If you want to remove the player controls, set the width and height to 0. Keep in mind, though, that removing the player controls means your visitors will have no way to turn off the audio other than turning off their speakersor leaving your site.

To play your embedded sound in Dreamweaver, click the green Play button in the Property Inspector.

When you click Play, Dreamweaver displays the plug-in audio interface on your page. Just click the interface's Play button to hear your embedded sound file.

Adding Video

Just as with audio, you have two choices for working with video in Dreamweaver: Let visitors download and play the video on their ownthe simple and easy approachor embed the video on your page. When your embedded video streams, the visitor can begin watching the clip right away. Unfortunately, streaming playback is often choppy until the clip has been fully loaded. And then there's the issue of browser plug-ins, just as with embedded audio.

As with audio, you have two choices for adding video to your site: link to a video file or embed the file in your web page.

When using video in your site, you can either create a hyperlink to it, which allows visitors to download it and play it, or you can embed it in your page and stream it to your viewers, as seen here.

Just as with audio, if you want to reach the maximum number of web surfers, offer your video clip in a few different formats, such as MOV and MPEG, so that visitors can choose their format of preference before downloading. And as with any files, be sure to upload any movie clips you use to your web server when you publish your site.

Here's how to link to a video clip:

On your page in Dreamweaver, select the text or graphic that you want to link to the video.

If you're linking from text, type the file size of the video that your visitors will be downloading, as a courtesy to let surfers know what they're in for before they start downloading.

In the Property Inspector, click the Link field's folder icon.

In the Select File dialog box that appears, navigate to and select the video file that you want to link to; then click OK.

Dreamweaver creates a link to the audio file.

Here's how to embed a video clip on your web page:

On your page in Dreamweaver, place the insertion point where you want the video clip to appear.

Choose Insert > Media > Plugin.

In the Select File dialog box that appears, navigate to your video clip, select it, and click OK.

Dreamweaver inserts the video clip on your page as a 32x32-pixel plug-in placeholder.

With your clip still selected, set width and height values in the Property Inspector.

Unlike the width and height for a graphic, the width and height values here won't scale your video clip. Instead, the values determine how much of your movie will be cropped and how much area will be visible.

You'll probably want your movie to play back at its intended size. To figure this out, you'll have to open your movie in your media player and find its dimensions. Then enter these values in the Property Inspector.

[View full size image]

Click the green Play button in the Property Inspector to view your movie directly inside Dreamweaver.

Delivering Flash Video in Your Web Pages

As you've seen in both the audio and video discussions in this chapter, working with media can be tricky business due to the plug-in issue. We talked about the possibility of using the Flash Player plug-in to deliver embedded audio. You can also use it to deliver video, by using a relatively new file format called Flash Video. Your video file will first need to be converted to Flash Video's FLV format. This can be done with the Flash 8 Video Encoder, which ships with Flash 8. Once your video's been converted, it can be easily inserted into Dreamweaver.

Rather than inserting traditional video files on your page, which is a game of hit-and-miss with the three popular browsers, you can go with Flash Video's FLV format, which relies on the Flash Player plug-in.

Here's how to insert a Flash Video:

On your page in Dreamweaver, place the insertion point where you want to insert your video and choose Insert > Media > Flash Video.

In the Insert Flash Video dialog box that appears, set the Video Type pull-down menu to Progressive Download Video.

From the Skin pull-down menu, choose the appearance for the video's player controls.

The video player's skin is the interface style that users see when they play your video.

Use the W (width) and H (height) fields in the Insert Flash Video dialog box to set the size of your video in pixels.

Even better, click the Detect Size button to have Dreamweaver load the video dimensions for you. If Dreamweaver can't find the video's size, you'll be prompted to type the values yourself.

Select the Auto Play and Auto Rewind check boxes if you want your video to play as soon as the page loads and then return to the beginning as soon as it has played through.

Make sure that Prompt Users to Download Flash Player If Necessary is checked.

Code will then be inserted to check to make sure that visitors have the correct Flash Player plug-in installed when your page loads in their browsers. If they don't, they'll be prompted to download the latest version of the player. You can use the Message field to customize the prompt that visitors receive.

Click OK when you're done.

Dreamweaver inserts the Flash Video on your page.

To see the video play, you'll need to preview your page in a web browser. If you want to make any further adjustments to your Flash Video, use the options that appear in the Property Inspector.

When you insert Flash Video on your page, Dreamweaver automatically generates two SWF files and saves them in your site, in the same folder as the current web page. The first SWF file contains the video player, and the other contains the player skin. So a Flash Video actually requires four files: the FLV file, two SWF files, and the web page that the Flash Video is inserted into. Make sure that all of these files are uploaded to your server when you're ready to publish your site.

If you're considering offering video content on your site, seriously consider Flash Video. For lots more information, check out the Flash Video Development Center at [macromedia.com/go/flv_devcenter].

[View full size image]

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی