Tải bản đầy đủ - 0 (trang)
Chapter 16. Add Flash and Other Multimedia

Chapter 16. Add Flash and Other Multimedia

Tải bản đầy đủ - 0trang

Flash: An


Figure 16-1: 

Some websites,

like the Get the

Glass game (www.

gettheglass.com), are

created entirely with

Flash. Its ability to

handle interactivity,

animation, and video

playback makes it a

great technology for

online games and entertainment websites.

But you still need an

HTML file to display

the Flash movie.

However, for really high-quality animation, games, and interactivity, there’s not yet a

replacement for Flash. For example, the fantastic “Get the Glass” game merges game

play, video, and animation into an engaging game (as well as a powerful marketing

tool for the California Milk Processor Board). This kind of presentation is simply

outside the ability of JavaScript. That’s why many entertainment companies (especially movie companies) and consumer-oriented product sites, like Nike’s (www.

nike.com), still turn to Flash when they want to create an immersive, interactive


Flash provides other benefits as well. It not only plays Flash-created animations, but

third-party audio and video files as well. And its advanced programming features let

you add a level of sound, video, and interactivity that can make plain HTML pages

look dull by comparison.

In addition, Flash movies look and work exactly the same way in every browser,

whether you use a Windows, Mac, or even Linux PC. That kind of cross-platform

compatibility is rare. And finally, the ubiquity of Flash on the Web means that nearly

every browser—in fact, 90 percent of them—have a Flash player installed. So the

chance of a visitor being unable to enjoy your site is small (and if that does happen,

Dreamweaver automatically points your visitors to the Flash player they need to

download; see “Automate the Flash Download” below for details).


dreamweaver cs5.5: the missing manual


Flash: An


However, that 90 percent figure covers desktop computers only. Two of the most

popular devices for surfing the Web, the iPhone and iPad, don’t support Flash at all.

So if you think you’ll have visitors using their iPhones or iPads to search for your

business’s hours of operation, street address, and phone number, make sure you at

least provide your most crucial information in HTML format. Said another way:

don’t make your site’s home page one big Flash movie (as some sites do). Otherwise

iPhone/iPad guests will be staring at a blank page.

Of course, all this power comes at a price. You need Adobe Flash or a similar program, like Swish (www.swishzone.com), Toon Boom (www.toonboom.com), or

Anime Studio (http://anime.smithmicro.com/index.php), to produce full-fledged

movies. And although these programs aren’t necessarily difficult to get started with,

they represent one more expense and one more technology you have to learn.

Note: Creating external movies, animations, and applications is an art (and a book or two) unto itself.

This chapter is a guide to inserting these goodies into your web page and assumes that a cheerful programmer near you has already created them. For the full scoop on creating Flash files, pick up a copy of

Flash CS5.5: The Missing Manual.

Insert a Flash Movie

To add a Flash movie to a page, position your cursor where you want the movie to

appear and then choose Insert➝Media➝SWF (.swf is the file extension for Flash

movies) or, in the Common category of the Insert panel, choose SWF from the Media menu (circled in Figure 16-2). Either way, the Select File dialog box appears.

Navigate to the Flash file (look for the .swf extension) and double-click it. Dreamweaver automatically recognizes the width and height of the movie and generates the

appropriate HTML to embed it in your page. You’ll see a gray rectangular placeholder with the Flash logo in the center; you can adjust the movie’s settings as described

in the next section.

Tip: You can also drag a Flash movie file from the Files panel into the document window. Dreamweaver

automatically adds the correct code.

chapter 16: add flash and other multimedia



Flash: An


Figure 16-2: 

The Media menu on the Insert panel’s

Common category (top) is where old

web technologies go to die. Only Flash

and Flash video are commonly used

on websites these days. If you’re using

the Classic Workspace (see page 37),

the Media Menu can be found at the

top of the screen (bottom).

To preview Flash files directly in Dreamweaver, select the movie (click it) and then

click the Play button in the Property inspector (see Figure 16-3). To stop the movie,

click the same button—it toggles between a Play and a Stop button.

Note: When inserting a Flash movie, an Object Tag Accessibility Options window appears. This window

lets you set options intended to make accessing Flash content easier, but they don’t really work in most

browsers. If you don’t want to set these options, just click Cancel, and Dreamweaver still inserts the

Flash movie. To permanently turn off this window, open the Preferences window—Edit➝Preferences

(Dreamweaver➝Preferences)—click the Accessibility category, and then turn off the Media checkbox.


dreamweaver cs5.5: the missing manual


Flash: An


Figure 16-3: 

Use the Property

inspector to set the

display and playback

controls for a Flash

movie. Avoid the V

space, H space, and

align settings. Those

same formatting

options are better

handled with CSS.

If your page has lots of Flash movies—numerous animated buttons, say—you can play

all of them at once in Dreamweaver by pressing Ctrl+Shift+Alt+P (-Shift-OptionP). Then sit back and watch the show. To stop all the movies, press Ctrl+Shift+Alt+X


Note: When you save a web page after inserting a Flash movie, Dreamweaver pops up a dialog box

informing you that it needs to save two files—expressInstall.swf and swfobject_modified.js—on your site.

These files make it possible to notify your visitors that they need to download a new version of the Flash

plug-in (see page 702).

Change Movie Properties

You’ll rarely have to change the default properties Dreamweaver assigns Flash movies. But if you do—say you resize a movie and want to change it back to its original

size, or you want to swap in a different movie altogether—the Property inspector is

the place to go.

chapter 16: add flash and other multimedia



Flash: An


Power Users’ Clinic

The Two Lives of the Tag

If you choose View➝Code after inserting a Flash movie,

you may be surprised by the amount of HTML Dreamweaver deposits in your page. You may also encounter some

HTML tags you’ve never heard of, including and

. These tags provide browsers with the information they need to launch the Flash Player and play a Flash


Due to differences between Internet Explorer and all the

other browsers, Dreamweaver has to insert the

tag twice: once for IE (with all the proper settings for that

browser) and once for the other browsers. To do this,

Dreamweaver uses IE conditional statements—HTML comments that are only interpreted by Internet Explorer and

are used to send special instructions to just IE (and even

to just specific versions of IE). You can learn more about

conditional comments at http://tinyurl.com/9osegt.

Dreamweaver started using the tag like this in

Dreamweaver CS4. It replaces the old way of embedding

Flash movies, which involved inserting two tags: the and the tags. This new method is completely standards-compliant, which means that any page

where you use Dreamweaver CS5.5 to add a movie will

pass W3C validation (the same validator used with Dreamweaver CS5.5’s new W3C Validation tool described on page

761.) That wasn’t true in versions of Dreamweaver prior

to CS4, which produced invalid HTML that failed the W3C


Ironicially, if you insert a Flash movie into a HTML5 document (page 10), the code Dreamweaver inserts actually

produces invalid HTML5! One step forward, two steps back.

Rename your movie

Just as you learned that JavaScript can control images and buttons, so it can control

Flash movies. Dreamweaver assigns a generic name to each movie you embed—

FlashID, FlashID2, FlashID3, and so on. This act of naming your movie is important—

the auto install option discussed on page 702 requires a name—but the exact name

isn’t. If you want, you can change the name in the Name field, the box directly below

“SWF” at the top-left of the Property inspector (see Figure 16-3). However, there’s

no real need to since no one visiting the page will ever see it.

Replace your movie

The File box specifies your movie’s location on your hard drive. To swap out the

current movie, type a new path into the File field, or click the nearby folder icon and

browse to the new movie.

Set the Src property

The Src field indicates the location of your original Flash file (the one with the .fla

extension). When you first insert a Flash movie, the Src box is blank. If you think

you’ll want to edit the original Flash file, tell Dreamweaver where to find it.


dreamweaver cs5.5: the missing manual


Flash: An


To do that, click the Edit button in the Property inspector. Dreamweaver asks you to

locate the original file; you’re looking for a file with an .fla extension. Double-click it

and Dreamweaver launches the Flash program and opens the file for editing. Make

any changes you wish (or not) and, in Flash, click Done. Flash renders the movie

(prepares it for playback) and exports the updated .swf file to your site, replacing

the previous version of the movie. In addition, the Src property box now points to

your original .fla file. That way, if you need to work on the movie in the future, you

just press the Edit button. Dreamweaver launches Flash, and it opens your original

movie for editing.

Change your movie’s size

Although enlarging GIF or JPEG images by dragging them usually results in a pixellated mess, you can often resize Flash movies without a problem. If you use Flash’s

vector-based tools to create the movie, you can scale them nicely. However, if the

Flash movie contains bitmap images, such as GIFs, PNGs, or JPEGs, leave the movie

at its original size. If you resize a movie that has bitmaps, the images distort and


To resize a movie, do one of the following:

• Select the movie in the document window and drag one of the three resizing

handles that appear at the edges of the movie. To maintain the movie’s proportions, press Shift as you drag the lower-right corner handle.

• Select the movie in the document window and type new width and height

values into the W and H boxes in the Property inspector. You can also use percentage values, in which case your movie scales to fit the browser window.

If you make a complete mess of your page by resizing your movie beyond recognition, just click the Reset Size button in the Property inspector (circled in Figure


Note: If you want to insert a Flash movie that fills 100% of a browser window, you first need to set the

movie’s height and width to 100%. Then you need to create a few CSS styles. First, create a tag style for

the tag with padding (page 362) and margin (page 362) set to 0, and height and width (page

360) set to 100%. Next, create a style for the tag with the same settings as the tag (a

group selector—discussed on page 318—makes the process of creating the styles more efficient). If the

Flash movie is nested within other tags, like a
or a

tag, you need to remove the padding and

margin for those tags and set their heights and widths to 100% as well. Finally, choose an appropriate

Scaling setting for the movie, as discussed on the next page.

Set playback options

The Loop and Autoplay checkboxes control how your movie plays back. When you

turn on Loop, the movie plays over and over endlessly, an approach advertisers often

use in animated banner ads. The Autoplay option starts playback as soon as the page

loads into a browser.

chapter 16: add flash and other multimedia



Flash: An


Neither of these options overrides any programming instructions you embed in the

Flash movie, however. For instance, if you add a Stop command to the final frame of

a movie, the movie stops at that frame regardless of the Loop setting.

Leave margins unspecified

Skip the “V space” and H settings in the Property inspector. They’re intended to add

space to the top and bottom (V) and left and right (H) edges of your movie, but they

produce invalid HTML for the strict and HTML5 document types (see page 6 for more

on doctypes). In addition, you can’t control each of the four margins individually.

Instead, use Cascading Style Sheets and the CSS margin property (discussed on page

362) to add space around your movie. You can create an ID style (page 116) using the

movie’s name. For example, you might create an ID style named #FlashID.

Select a quality setting

If your Flash movie requires a lot of processing muscle—if it’s heavy on animation

and action, for example—it may overwhelm computers of lesser pedigree, making

playback slow and choppy. Not every computer has a 3-gigahertz processor and 4

gigabytes of memory (not yet, anyway). Until that day, you may need to adjust the

quality settings of your Flash movie so it looks good on all computers, from the sluggish to the speedy.

By default, Dreamweaver sets movie quality to High, but you can choose any of the

following four settings from the Quality menu in the Property inspector:

• High provides the best quality, but the movie may run slower on older computers.

• Low looks terrible. This setting sacrifices quality by eliminating all antialiasing

(edge-smoothing) in the movie, leaving harsh, jaggy lines on the edges of every

image. Movies set to low quality look bad on all computers.

• Auto Low forces the movie to start in low-quality mode, but switches automatically to high-quality playback if the visitor’s computer is fast enough.

• Auto High makes the movie switch to low-quality mode only if the visitor’s

computer requires it. This way, you can deliver a high-quality image to most

visitors, while still letting those with slow computers view the movie. This mode

is the best choice if you want to provide a high-quality image but still make your

movie play back at reasonable speed for those with older computers.

Adjust your movie’s scale

Scaling only becomes an issue when you specify relative dimensions for your movie,

setting it to, say, 90% of a browser window’s width. That’s because the movie grows

or shrinks as your visitor’s browser grows or shrinks, and you have no control over

what your visitors does with her browser—one person may prefer a small horizontal

browser at the bottom of her screen, while another may use a tall, narrow window.


dreamweaver cs5.5: the missing manual


Flash: An


Enter Dreamweaver’s Scale property. It lets you determine how Flash scales your

movie. For example, in Figure 16-4, the top movie’s original size is 334 pixels high ×

113 pixels wide. If you resize the movie using the W and H attributes so that it’s 350

pixels high × 113 pixels wide, one of three things will happen, depending on your

Scale setting:

• Show All. This setting, the default, maintains the original aspect ratio (proportions) of your movie (second from top in Figure 16-4). In other words, although

the overall size of the movie may change as a visitor fusses with his browser, its

width-to-height ratio won’t. Show All keeps your movie from distorting (but it

may also cause white borders on the top, bottom, or either side of your movie;

to hide them, make the movie’s background color the same color as the page).

• No Border. This setting resizes a movie according to your specifications and

maintains its aspect ratio, but it may also crop the sides of the movie. Notice

how the top and bottom of the Chia Vet logo are chopped off in Figure 16-4

(third image from top).

• Exact Fit. This option may stretch your movie’s picture either horizontally or

vertically. In Figure 16-4 (bottom), “Chia Vet” is stretched wider.

Figure 16-4: 

This browser window shows the

results of different choices in

the Scale menu on the Property

inspector. A Flash movie’s Scale

property specifies how a movie

scales when you set its width and

height properties to something

different from the original movie.

If you resize a movie, press F12

(Option-F12) to see how it looks

in a web browser, and then, if

necessary, choose a different setting from the Scale pop-up menu

in the Property inspector.

Show all

No border

Exact fit

chapter 16: add flash and other multimedia



Automate the Flash


Align your movie

You can align Flash movies relative to the paragraphs around them just as you can

align images relative to the surrounding text. In fact, the Property inspector’s movie

alignment options work exactly the same way as its text alignment properties. For

example, when you choose Right from the Align menu, Dreamweaver positions the

movie at the right edge of the screen and wraps text around its left side. (If the movie

is inside a cell, Align➝Right moves the movie to the right edge of the cell.) However,

for strict document types and HTML5, the Align property is invalid. As with the

margin settings discussed above, you’re better off using CSS properties, such as the

float property described on page 361.

Background color

To set a background color for a Flash movie, use the Bg Color box in the Property

inspector. This color overrides any background color set in the movie itself, and becomes the movie’s placeholder color when a page loads but the movie hasn’t.


Wmode stands for “Window mode” and it controls how your movie interacts with

other HTML elements on the page. The standard setting, opaque, is useful when

you include HTML that needs to appear on top of a movie—the classic example is

a drop-down menu like the Spry Navigation Bar you learned about on page 192.

The “opaque” setting ensures that the drop-down menu appears on top of the Flash

movie. The transparent option lets HTML appear above a movie, too, but it also lets

any HTML underneath the movie—like a page’s background color—show through

any transparent areas of the movie.

Finally, the window option is the exact opposite of the opaque option: It makes sure

the Flash movie always appears above any HTML element on the page—even above

a pop-up navigation menu that should appear over the movie.

Automate the Flash Download

Even though the Flash plug-in is nearly universal, you can’t be sure that every visitor’s browser has it. In addition, you may have created a Flash movie that only runs

in the latest version of the plug-in, so a visitor might have the Flash plug-in, but not

the correct version. The result? A movie that either doesn’t play back at all or doesn’t

play back as it should. Guests who fall into this category have to choose from three

equally unpalatable options: go to a different website to download the plug-in, skip

the multimedia show (if you’ve built a second, plug-in-free version of your site), or

skip your website entirely.


dreamweaver cs5.5: the missing manual


Automate the Flash


Up to speed

The Land of Obsolete Web Technology

Dreamweaver CS5.5 includes several other options in the

Media menu of the Insert panel (see Figure 16-2). Some

have been around since Dreamweaver was in training

pants, and most of them don’t see much use on today’s

Web; they either don’t work for many users, or creating the

content to work with these technologies is so hard that few

web designers bother. In addition, some of the technologies look like they’re being phased out by their creators.

Shockwave is a web technology that’s been around a long

time. It’s the Internet-ready form of movies created with

Adobe Director. Historically, Director was a program for

creating CD-ROMs. But when the Web exploded onto the

scene, Director quickly morphed into a web authoring tool,

and its movie-creation tool was called Shockwave. As a result of its CD background, Shockwave offers complex programming possibilities, which makes it ideal for detailed,

interactive presentations, and game-makers still use it.

However, most people won’t find a use for it. Flash provides

much of the same functionality for websites using simpler

programming and, consequently, it’s the much more common choice for web designers. In addition, the Shockwave

plug-in isn’t installed with web browsers, so visitors have to

download the plug-in, the full version of which weighs in at

a hefty 8.96 MB for Windows PCs and 10.13 MB for Macs.

But if you just can’t do without Shockwave, you can insert

a Shockwave movie into a web page just as you would any

other multimedia file. Choose where you want to insert the

movie, and then choose Insert➝Media➝Shockwave, or

choose Shockwave from the Media menu on the Common

category of the Insert panel. Either way, a Select File dialog

box appears. Find and double-click the Shockwave movie

file (look for the .dcr extension).

Dreamweaver also includes tools for inserting other multimedia and plug-in files. In fact, these tools have been

around since much earlier incarnations of Dreamweaver,

when there really were other media types like Java applets,

ActiveX controls, and other plug-in technology. However,

Java applets never really took off (their performance never

quite lived up to the hype), and ActiveX controls are limited

to Internet Explorer for Windows.

Fortunately, Dreamweaver provides a built-in solution for both scenarios. When you

embed a movie in a page, Dreamweaver includes code that detects your visitor’s

plug-in status. If a visitor either doesn’t have the Flash plug-in or doesn’t have the

right version of it, the page displays a message alerting the visitor to the problem

(see Figure 16-5) and offering a link button (labeled “Get Adobe Flash Player”) that

takes guests to the plug-in. If the visitor has at least version 6 of the plug-in, she can

take advantage of the plug-in’s “express install” feature, which lets her upgrade to the

latest version with just a mouse click.

In practice, most of your visitors will never see this message. In fact, in Design view,

you won’t see it either; Dreamweaver keeps it hidden. But you can see and edit the

message by clicking the eye icon (circled in Figure 16-5).

To make all this happen, Dreamweaver adds two files to your website inside a folder

named Scripts: expressInstall.swf and swfobject_modified.js. When you move your

finished web pages and Flash movies to your web server (see Chapter 19), be sure to

move the Scripts folder as well.

chapter 16: add flash and other multimedia



Add Flash videos

Figure 16-5: 

Here’s the message a

web browser displays

if a visitor doesn’t

have the Flash player

installed, or has an old

version of the player.

You can customize this

message by changing

the text. However, it’s

a good idea to leave

the Flash Player icon in

place—it includes a link

to a page on Adobe.

com where your visitor

can download the


Note to Dreamweaver CS3 devotees: Dreamweaver CS3 used to add a JavaScript file to your site

when you added a Flash movie to a page. This file, named AC_RunActiveContent.js, was necessary to

overcome some relationship problems between Internet Explorer and Flash movies. Microsoft has since

worked out those problems in IE 6 and IE 7 (browser therapy?), so you no longer need that file.

Add Flash videos

In addition to playing back animations and hosting games, the Flash player plays

back videos, too. In fact, Flash video, as this feature is called, is likely the most common way to play video on the Web. If you’ve visited a little site called YouTube,

you’ve seen Flash video in action. High among this format’s advantages—compared

to competing standards like QuickTime or Windows Media Video—is that you can

reasonably count on every visitor having the new Flash program to view your videos.

Dreamweaver makes it a snap to embed videos. Unfortunately, Flash can’t play back

videos in just any old format, like MPEG or AVI, without a little help. And Dreamweaver can’t transform videos in these formats to the Flash video format (which has

the extension .flv). Instead, you need one of several Adobe products to create Flash

video files. If you bought the Creative Suite, you’re in business; it includes the Flash

video encoder. Otherwise, you need Flash CS5 Pro or Flash CS4 Pro.

Note: For a quick intro to creating Flash videos, visit http://tinyurl.com/63lkad9. Adobe also dedicates an

entire section of their site to Flash video: www.adobe.com/devnet/video.


dreamweaver cs5.5: the missing manual


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 16. Add Flash and Other Multimedia

Tải bản đầy đủ ngay(0 tr)