Adding Flash SWF Movies to Your Pages | Macromedia Studio MX Bible

< Day Day Up >

You can add a whole new world of interactivity to your pages through the addition of Macromedia Flash SWF movies. Whether simply entertaining your site visitors with a quick-to-load animation for visual interest, providing truly interactive content, or using Flash to provide sound to your site, Flash movies are easy to place in your pages by choosing Insert ® Media ® Flash. Dreamweaver uses the <object> and <embed> methods when inserting a Flash movie to get the best results in all browsers.

Your movie files will play using the Flash Player plug-in in Netscape browsers and with an ActiveX control in Microsoft Internet Explorer (on the PC). Flash Players are incorporated in the latest versions of Netscape Navigator, Microsoft Internet Explorer, and America Online.

Flash movies are assets and are viewable and playable from the Assets panel. To view your Flash assets, press F11 to open the Assets panel and click the Flash Assets icon. Select a SWF file. The Preview space above the list of assets can be expanded for better viewing. To play your Flash asset, click the arrow in the Preview space, as shown in Figure 41-5.

Figure 41-5: Flash Assets can be played in the Assets panel or in the document after a SWF is inserted.

Habitat Alert site In this section you add an interactive Flash movie (SWF) to a page in the Habitat Alert site. This movie features rollovers that provide information about the different kinds of herons that have endangered habitats:

Use the Site panel to locate the flash_movies folder and open index.htm form. Click to change to Design view.

Place your cursor into the page, and choose Insert ® Media ® Flash. In the dialog box, navigate to the flash_movies folder and select heronFreestyleMovie.swf. Click OK.

You can also use the Media toolset in the insert bar by clicking the Media tab. Click the Flash button or drag it to your page and drop it in the desired location. In either case, the Insert Flash Movie dialog box opens to enable you to select the Flash movie.

Another method for inserting a Flash file uses the Assets panel. Select a Flash asset in the Assets panel and click the Insert button located at the bottom of the panel or right-click (Control-+click) to place your movie in the document.

Like audio and video files, a placeholder is put into the page. With Flash movies, the width and height are preset for you because Dreamweaver can get the information from the file; however because Flash is vector-based, you can scale the movie as you desire.

Tip

To maintain proportional width and height, hold down the Shift key and drag the bottom-right corner to scale your movie smaller or larger. A Reset Size button is available in the Property inspector if you want return the movie to its original dimensions.

Click below or beside the newly inserted movie. In this step, you add another Flash movie to provide a background sound in the page. This file contains only a sound and is only 1 × 1. Add the movie Heron_sound.swf from the sounds folder. Set the W and H of the file equal to zero and turn off the Loop option using the Property inspector.
You can press F12 to preview your Flash content in a browser, but one fabulous new feature of Dreamweaver MX is the ability to interact with your Flash media in Design view. With the placeholder selected, click the Play button in the Property inspector. Move your cursor over the eggs to see the interactivity. Click the goose egg to see what happens. To stop movie, click the Stop button.

Tip
You can preview all Flash content in a page by pressing Control+Alt+Shift+P (Shift+Option+Command+P) to set ll Flash objects and movies to play.
Save your page and preview it in a browser.

As shown in Figure 41-6, some properties of your inserted Flash movie are preset by Dreamweaver.

click to expand
Figure 41-6: Use the Property inspector to modify Flash movie properties or to add parameters.

The properties in the Property inspector are as follows:

Name — Provide a name to identify the movie for scripting in the unlabeled field at the top, left side of the Property inspector, just below where it says Flash and the file size.
W and H — Specify the width and height of the movie in pixels. You may also use picas (pc), points (pt), inches (in), millimeters (mm), centimeters (cm), or percentage of parent container (%). The abbreviations must follow the value without a space (for example, 400px or 50%).
File — The path to the Flash or Shockwave movie file. Click the Browse for Folder icon to locate a file, or type the correct path.
Src — This displays only when Design Notes are being maintained and the SWF file was exported to the Dreamweaver site. The Src is the path to the original authoring file (FLA) for the Flash movie selected.
Edit — This button lets you launch Macromedia Flash MX to update an FLA file, but it is disabled if you do not have Macromedia Flash MX installed on your computer.
Reset Size — Returns the movie to its original size. To size a movie, enter new W and H values or drag the bottom-right corner of the movie. Hold the Shift key to maintain proportional W and H.
Loop — Use to set a movie to play continuously. Uncheck it to have the movie play once and stop.
Autoplay — Automatically plays the movie when the page loads when checked.
V Space and H Space — Specifies the number of pixels of white space above and below and/or to the left and right of the movie. Use this to provide a margin around the movie when text or other content is contained in the same block.
Quality — Controls anti-aliasing in playback of a movie. A movie looks better with a high setting but requires the user to have a faster processor to work well. Low emphasizes speed over appearance. High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance where and when it's possible. Auto High emphasizes speed and appearance, but favors speed over appearance if playback suffers.
Scale — Determines how a movie fits into the dimensions set in the width and height fields.
- Default displays the entire movie.
- No Border fits the movie into the set dimensions so that no borders show and the original aspect ratio is maintained.
- Exact Fit scales the movie to the set dimensions, regardless of the aspect ratio.
Align — Floats the movie in the same way you might float or align an image relative to other content in the block.
Bg — Sets a background color for the movie area, which also appears during loading and after playing, when the movie is not playing.
Parameters — Opens a dialog box for entering parameters to pass to a movie. Your Flash movie must have been designed to receive additional parameters.

Editing a Flash movie

You can edit the original Flash file (FLA) from within Dreamweaver MX, just as you can edit the original source file for any Fireworks image. To initiate editing from Dreamweaver, select your Flash SWF file and click the Edit button in the Property inspector. You must have Flash MX installed on your computer. The Edit button isn't available if you do not. You must also have Design Notes enabled for the site so that when you export your movie (SWF) from the authoring file (FLA), a note is placed in the site.

When you click Edit, Dreamweaver launches Flash MX, and Flash MX attempts to locate the original source file from information stored in a Design Note (MNO). This information is present only if you exported your SWF from Flash into a Dreamweaver site and if Design Notes are enabled.

Note

Some SWF files may be created using Macromedia FreeHand 10. When this is the case, Dreamweaver displays the Edit button and launches Flash MX, but you will not be able to select the FreeHand file to open it because its extension is .fh.

Editing links for Flash SWF movies

You can update links used in your SWF files from Site Map view in your Dreamweaver site. To view a site map and edit your links, you must define a home page for the site and display dependent files. To switch to Site Map view in the Site panel (window), click the Expand button in the docked Site panel, as shown in Figure 41-7. For Mac OS, use the small white expander arrow located at the bottom of the Site window to view the Local and Remote sides of the Site window. Click the Site Files and Map icon to enter Map view.

Figure 41-7: Expand the Site panel (window) to enter Site Map View.

Select the link to update, which appears beneath the SWF file. You may opt to change the link for just one occurance or change it sitewide:

To change the link for just this instance, right-click the link; then choose Change Link. Type the new URL (path) in the dialog box that opens.
To update all instances of a link, choose Site ® Change Link Sitewide. There are two steps to the process. First, browse to or type the path of the link you are changing in the Change All Links To field; then browse to or type the new URL in the Into Links To field.

When the paths are set, click OK and collapse the Site panel with the Expand/Collapse toggle button (Windows) or the white expander arrow (Mac).

< Day Day Up >