Using SWiSH with Dreamweaver 4

Top  Previous  Next

This is a step-by-step tutorial on using your SWiSH (.swf) Movie in Dreamweaver 4.

Note: Dreamweaver cannot embed your .swi (SWiSH working file format) Movie. You will need to export your SWiSH Movie to the Flash Player file format (.swf)


Exporting your .swf file from SWiSH

1.	Start with the Movie you created in the first tutorial or open "first.swi" from the Samples Menu

2.	Uncheck the 'Offset Movie to suit use as a Movie Clip' option on the SWF section of the Export Panel

3.   Press the 'Export to SWF' button on the Export Toolbar, or select Export | SWF from the File Menu. You should now see the 'Export to SWF' dialog box

Note: If the 'Export to SWF' button is not visible, select View | Toolbars. The dialog box will enable you to turn on the Export Toolbar


4.   Choose the folder that you want to export the .swf file to, enter a file name of " first.swf " (without quotes) and press the 'Save' button

Note: Any export parameters that you set for HTML in the 'Export' Panel of SWiSH will be ignored by Dreamweaver if you simply import your .swf file rather than producing your HTML page in SWiSH and then opening it in Dreamweaver to edit


To insert your .swf Movie into an HTML page using Dreamweaver

Open dreamweaver and you will find that there are 2 ways to access the 'insert Flash' Object:

1.   From the Main Menu bar select Insert | Media | Flash (Ctrl+Alt+F)


2.   From the Dreamweaver 'Objects' Panel ( Ctrl+F2 ), select the Flash icon and click on it, or drag it to the insertion point on your page



Once you have selected the Movie you wish to insert, Dreamweaver will generate the most common parameters automatically.

If you open your Code Inspector (F10), you will see the code that is produced.
It will look like this (the parameters automatically set by Dreamweaver are highlighted):

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
id="mycalculator" width="400" height="300" align=right>
<param name="movie" value="mycalculator.swf">
<param name="quality" value="high">
<param name="scale" value="noborder">
<param name="salign" value="r">
<param name="align" value="right">
<param name="wmode" value="transparent">
<param name="bgcolor" value="#FCFAFA">
<param name="allowScriptAccess" value="sameDomain">
<embed name="mycalculator" src="mycalculator.swf"
quality="high" scale="noborder" salign="r" align="right" wmode="transparent" bgcolor="#FCFAFA" swLiveConnect="true" allowScriptAccess="sameDomain"
width="400" height="300"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

This code contains both the <embed></embed> tags recognized by Netscape Navigator and the <object></object> tags recognized by Internet Explorer.


The Properties Inspector
Your Movie properties can be altered and added to by using the Properties Inspector ( Ctrl+F3 ).

Note: Dreamweaver 3 users may see a slightly different Properties Inspector (without the Play button)



Exploring the Movie parameters in the Properties Inspector

W, H: specify the width and height parameters of your Movie in pixels (you can also specify %).

Align: specifies the align parameter, which aligns your Movie to a selected side of the browser window and crops the other sides to fit if needed.

Bg: specifies the BGCOLOR (background color) parameter for the Movie area. This color also appears while the Movie is loading or has finished playing (this is an optional parameter).

Quality: sets the quality parameter for the Object and embed tags that run the Movie. The settings relate to the level of anti-aliasing used during playback of the Movie. With higher settings a Movie looks better, but requires a faster processor to render correctly, while lower settings emphasize speed above appearance (this is an optional parameter).

Scale: sets the scale parameter for the Object and Embed tags that run the Movie (this is an optional parameter).

Autoplay: defines the play parameter. A value of 'true' plays the Movie automatically when the page loads (this is an optional parameter).

Loop: controls the loop parameter, if set to true it makes the Movie loop indefinitely (this is an optional parameter).

id: is an ActiveX ID parameter, which is used to pass information between ActiveX controls (this parameter is automatically generated in your SWiSH produced HTML page) [this is an optional parameter].

V Space, H Space: HTML parameters, which set the amount of white space between your Movie and the browser window.

'Parameters...' button: opens a dialog box where you can add additional parameters to pass on to the Movie.


You can preview your Movie from the 'Properties' Panel by pressing the 'Play' button.


Editing your SWiSH produced HTML page in Dreamweaver
Open your SWiSH-built HTML page in Dreamweaver. You will notice that SWiSH generates a more complete set of parameters than is produced by Dreamweaver. For this reason, it is considered better to produce your HTML page in SWiSH and then import it into Dreamweaver for any further editing.

If you open your Code Inspector (F10), you will see the code that is produced.
It will look similar to this (the parameters set by the user in SWiSH are highlighted):

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
id="mycalculator" width="400" height="300" align=right>
<param name="movie" value="mycalculator.swf">
<param name="quality" value="high">
<param name="scale" value="noborder">
<param name="salign" value="r">
<param name="align" value="right">
<param name="wmode" value="transparent">
<param name="bgcolor" value="#FCFAFA">
<param name="allowScriptAccess" value="sameDomain">
<embed name="mycalculator" src="mycalculator.swf"
quality="high" scale="noborder" salign="r" align="right" wmode="transparent" bgcolor="#FCFAFA" swLiveConnect="true" allowScriptAccess="sameDomain"
width="400" height="300"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

This code contains both the <embed></embed> tags recognized by Netscape Navigator and the <object></object> tags recognized by Internet Explorer. It also covers a more comprehensive range of .swf Movie parameters.

To edit your Movie properties open the Properties Inspector ( Ctrl+F3 ).

Note: Dreamweaver 3 users may see a slightly different Properties Inspector (without the Play button)



You will see some of the parameters that you specified in the 'Export' Panel in SWiSH. You can change these by selecting alternatives from the drop-down Menus, or typing a value into the text input boxes.

To see all the parameters you set, you will also need to open the 'Parameters' dialog box by pressing the 'Parameters' button on the Properties Inspector.


This dialog box and the Properties Inspector will allow you to edit all the .swf file parameters of your Movie.
You can also edit the code directly by opening the Code Inspector (F10) and typing in your changes.


Note: Some .swf Movie parameters should not be changed, or changed with care:

·	classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

Identifies the media type and should always be left as shown for .swf Movies

·	codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"

You can change the cab#version to =5,0,0,0 to force the Movie to get the ActiveX control for Flash Player Version 5

·	pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"

This is the location of the Flash player plugin for Netscape Navigator or browsers that do not use ActiveX controls