Your First Flash Movie | Macromedia Coldfusion MX 7 Web Application Construction Kit

In case you haven't used Flash before, I will now walk you through the process of creating a Flash movie and displaying it on a ColdFusion page. Unfortunately, I just don't have the space in this book to really teach you how to create nice-looking Flash movies. My intent here is mostly to help you understand what types of files are involved so you won't be completely mystified when a graphic artist hands them to you.:)

What You Need to Install

If you want to follow along with the creation of Flash movies in this chapter, you will need to install the following items:

Macromedia Flash MX 2004
Flash Remoting Components ActionScript 1.0 for Flash MX 2004 and Flash MX Professional 2004
Flash UI Components Set 2

For your convenience, the CD-ROM for this book includes the installation files for Macromedia Flash and the Flash Remoting Components. Simply click or double-click the appropriate Windows or Macintosh file to start the installation process.

To install the Flash UI Components Set 2, use the Macromedia Extension Manager to install FUIComponentsSet2.mxp, a Macromedia Extension Package file. The CD-ROM also includes this file, in the directory for this chapter. To open Extension Manager, choose Help > Manage Extensions from the Flash's main menu. When Extension Manager appears, choose File > Install Extension, then locate the FUIComponentsSet2.mxp file and click the Install button. An entry for Flash Components Set 2 should appear in the list of Installed Extensions. Make sure it's checked, then close the Extension Manager. Finally, close and reopen Flash itself.

NOTE

The version of Flash included on the CD-ROM is a free trial. After a certain number of days, you must purchase Flash to continue using it. There is no additional charge for the Flash Remoting Components.

NOTE

It's possible that updated versions of Flash or the Remoting Components will be available by the time you read this book. If so, they will be available for download from www.macromedia.com.

Creating a Movie

To create a basic Flash movie, perform the following steps:

1.	Launch Flash. A new, untitled movie will appear, ready for you to draw on or add code to.
2.	Use the drawing controls in the Tools panel to draw something on the Stage. The Stage is the large white area that represents the movie you want to show your users. It doesn't really matter what you draw; just draw a few circles or rectangles. If you need help, choose Help > Lessons, then look through the "Illustrating in Flash" lesson.
3.	Save your work by choosing File > Save from the menu. It doesn't matter where you save your document; you can just save it to your desktop to keep things simple. Note that you are saving a Flash document. Flash documents always have a `.fla` extension. This isn't the movie you will show your Web users. This file is only for the person creating the movie.
4.	Publish the Flash movie by choosing File > Publish from the menu. After a moment, Flash launches your browser to a simple test page that displays your movie.

When you published the Flash movie, two files were created in the same place where you saved the .fla file. The most important one is the Flash movie itself, which has a .swf extension. This is the file you would move into the Web server root to make it available to your Web users, much like a GIF or JPEG image. The other file is just a simple HTML file, created to help you see how the movie will look on a Web page.

NOTE

After a while, you may not want the HTML file created anymore, or you may want to store the files in a different location or with different filenames. To control what files are created when you publish the movie, choose File > Publish Settings from the main menu. For details, see the Flash documentation.

Placing the Movie on a ColdFusion Page

Now that you have seen your movie on a static HTML page, you may be wondering how to place the movie on a ColdFusion page. Since the tags needed to display a Flash movie are standard HTML, you don't need to learn much.

Take a look at the HTML source code for the .html file created when you published your movie. To view the source code, just open the file in a text editor such as Macromedia Dreamweaver or Windows Notepad. Of course, you can also use the View Source command in your browser to view the source code.

The source code will include a set of nested <object>, <param>, and <embed> tags, similar to this (I have added white space here for clarity):

 <object  class  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.  cab#version=6,0,0,0"  width="537"  height="190"    align="">  <param name="movie" value="MyFirstMovie.swf">  <param name="quality" value="high">  <param name="bgcolor" value="#FFFFFF">  <embed  src="/books/2/448/1/html/2/MyFirstMovie.swf"  quality="high"  bgcolor="#FFFFFF"  width="537"  height="190"  name="MyFirstMovie"  align=""  type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer">  </embed> </object>

At this point, it's not terribly important for you to know what every one of these tags and attributes does. The basic idea is that the set of tags tells the browser the filename of the movie to display (here, MyFirstMovie.swf), as well as its width, height, and a few other display-related options.

NOTE

Because different browsers have historically supported different tags for displaying multimedia content such as movies, the code shown above provides most of these pieces of information twice, once in the form of <object> and <param> tags, and again in the form of an <embed> tag. For more information, see the "Publishing" section of the "Using Flash Remoting" portion in the Flash documentation.

Copying and Pasting the HTML Code

One way to display your movie in a ColdFusion page is to simply copy and paste the <object> and <embed> source code from the .html file that Flash creates when you publish a movie. Just copy the source code and paste it into a .cfm file.

You will also need to copy the Flash movie (the .swf file) to the same location as your .cfm file so the browser can request it using just the filename. Alternatively, you can place the .swf in some other folder and then include the absolute or relative path to the file along with the filename. This all works the same way as it does for the src attribute of an ordinary <img> tag.

For instance, you might choose to keep the .swf file in the images subfolder of the ows folder. You would then need to use ../images/MyFirstMovie.swf or /ows/images/MyFirstMovie.swf instead of just MyFirstMovie.swf in the two places where the filename appears in the <object> and <embed> code block. For details, see the Flash documentation or an HTML reference guide.

NOTE

The HTML source code usually includes a few number signs (#) in the bgcolor and codebase attributes. If the code appears between <cfoutput> tags, you will need to escape the # signs by doubling them so ColdFusion doesn't think you are talking about a variable. For example, you would need to change bgcolor="#FFFFFF" to bgcolor="##FFFFFF".

Inserting Movies with Dreamweaver

As you might expect, Dreamweaver makes it easy to display your Flash movies in your Cold Fusion pages (or any other type of Web page, for that matter). There are a few different ways to do it, but they lead to the same result: the addition of the appropriate <object> and <embed> tags to your ColdFusion page.

To insert a Flash movie into the current page, do the following:

Choose Insert > Media > Flash from the Dreamweaver's menu; the Select File dialog appears. Alternatively, click the Flash button on the Insert toolbar (it's on the Common tab).

Select the .swf file you want to use. You can choose a file in a different folder if you want, as long as it's accessible to your Web server. Dreamweaver will take care of inserting the correct path information.

Click OK. The appropriate <object>, <param>, and <embed> tags are added to your document (Figure 26.1).

Figure 26.1. Dreamweaver makes it easy to add Flash movies to your pages.

That's it. If you preview the page in your browser, you should see the Flash movie displayed as expected.

NOTE

If you want, you can adjust the Relative To option in the Select File dialog before clicking OK. The default is Document, which means a relative path will be used, probably starting with ../ if the .swf file isn't contained within the current folder. If you select Site Root, an absolute path will be used (starting with /ows/26 if the .swf file is in this chapter's folder). Choose Site Root if you'll be moving the .cfm file around later, but plan to keep the .swf file in the same place.

Inserting Movies via Drag and Drop

Dreamweaver also lets you drag and drop Flash movies into your ColdFusion pages. Just do the following:

1.	Create a new ColdFusion (`.cfm`) file, or open an existing one. Just make sure it's associated with a site. (This is probably already the case for any file within the `ows` folder or its subfolders.)
2.	Make sure the Assets tab of the Files panel is showing. If not, choose Window > Assets from the menu.
3.	Locate the `.swf` file you want to insert. If it isn't displayed, click the Refresh button at the bottom of the Assets tab. You can use the Flash button at the left side of the Assets tab to show only `.swf` files.
4.	Drag the `.swf` file from the Assets tab into your document. The appropriate `<object>`, `<param>`, and `<embed>` tags are added to your document.

TIP

Once you've added the <object> and <embed> block to your document, try placing your cursor on the <object> tag. The Properties panel will present a number of controls relevant for Flash files, as shown in Figure 26.1.

TIP

If you use Design View, a gray square will represent the Flash movie. You can right-click this area for some helpful options, such as opening the movie in Flash.