WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
HTML (M-F) Text (M,TH)



Jobs at webdeveloper.com

Resources By Subject
Technical
Graphical
Authoring
Business
WDJ resources
Archive

internet.com

internet.commerce
  • Partner With Us
















Developer Channel


Find a web host with:
CGI Access DB Support Telnet Access
NT Servers UNIX Servers



Semi-automatic?

JavaScript
JavaScript Helper:
Meet Paige Turner, the least geeky geek we've ever come across.

Variables and Operators Explained:
First of a three part guide to JavaScript basics.

Controlling Forms:
Enhance your HTML forms with a touch of JS.

DHTML:
Forget how it works, let's see some in action!


Inserting Flash Movies in DreamWeaver: These two Web tools from Macromedia work well together.

by Kurt Nimmo

Before the introduction of Flash 4.0 -- the latest version of Macromedia's vector-based animation program for the Web -- you had to use a separate application in order to create the HTML code necessary to deliver functioning Flash movies for the Web. This application was called Aftershock and it generated all the code needed. With the introduction of Flash 4.0, Aftershock is no longer needed -- inserting the appropriate code is done natively in Flash. This is somewhat of a challenge for designers and developers, especially if they are unfamiliar with Flash or do not use the application.
December 13, 1999

If you are a Dreamweaver user, however, inserting Flash movies -- and generating the crucial code needed -- is an easy, almost effortless task. This is done with the Flash 4.0 object, an extension developed by Macromedia, which makes its home in the Object palette. Since Dreamweaver 2.0 was introduced well before the release of Flash 4.0, if you wish to use this object you must download it from the Macromedia site (http://www.macromedia.com/software/dreamweaver/download/extensions/). The download is free of charge. The extension is available in both PC and Mac versions. Since the extension comes with an installer, it is relatively painless to install. After you have downloaded the installer executable, simply follow the onscreen instructions and then restart Dreamweaver. It should appear in the Object palette when you restart Dreamweaver.

Now you are ready to insert a Flash movie in your HTML document. The object will appear under Common in the Object palette. If you are uncertain which object is the one that inserts the Flash movie, or you are unfamiliar with Dreamweaver objects and the Object palette, simply move your mouse over the icons until you see the "Insert Flash" tool tip. When you click on the Insert Flash icon, you will be presented with the Select File dialog where you can choose the Flash file to be inserted. Flash movies have the file extension of .swf, short for Shockwave Flash. Locate the file and click the Select button and the movie will be inserted in your Dreamweaver document. If you open the HTML Inspector, you will see code similar to the example listed below.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="550" height="150">
<param name=movie value="mymovie.swf">
<param name=quality value=high>
<embed src="mymovie.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="150">
</embed>
</object>

If you are unfamiliar with the <OBJECT> and <EMBED> tags, the code above may not make much sense to you. If, on the other hand, you have some knowledge of these tags, you may be confused as to why there are two tags in the code. The reason is really quite simple -- Internet Explorer and Netscape Navigator use different conventions to embed the movie in HTML. Originally, with HTML 2.0, the <OBJECT> tag was proposed as a way to insert media into documents. Microsoft accepted this proposed standard, while Netscape did not. Instead, Netscape proposed its own standard, the <EMBED> tag. Not to worry, though -- when Netscape encounters the <OBJECT> tag, it simply ignores it, reads the stuff inside the <EMBED> tag, and continues merrily upon its way rendering the document. Internet Explorer does the same with the <EMBED> tag.

Let's take a look at the above code more closely. First, you do not need to concern yourself with the stuff at the beginning of the tag -- classid and codebase. These simply point to external ActiveX code on Macromedia's site (the code is not needed to run your Flash movie, however, if your browser has the Flash 4.0 plugin). The same applies to pluginspace within the <EMBED> tag. These can be blissfully and non-destructively ignored (again, only if you have the plugin installed, otherwise pluginspace will tell the browser where to find the plugin).

Next, we encounter param, which is short for parameter (the <EMBED> tag, however, uses attributes, not parameters). If you are familiar with Java applets, param will ring a bell -- it simply passes values to the Flash movie, as do the attributes in <EMBED>. In the above example, it spells out the width, height, and quality of the movie. Keep in mind that attributes and values for both tags must be identical. There are, as well, a host of other settings, most of which are determined by Flash during authoring. Generally, these will not be of concern if you are simply doing the code and not authoring the Flash movie.

That's it. As you can see, Dreamweaver makes it relatively easy to insert Flash 4.0 movies in your document. As a rule of thumb, though, it is a good practice to take the time to learn exactly what is going on with your code. Otherwise, if problems arise, you may be stumped as to why.

Kurt Nimmo is a Web developer, HTML educator, and design consultant in Chicago.

Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers