Your First Flash Movie
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
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 simpl260 file, created to help you see how the movie will look on a Web page.
NOTE
After a while, you may not want th260 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 stati258 page, you may be wondering how to place the movie on a ColdFusion page. Since the tags needed to display a Flash movie are standar259, you don't need to learn much.Take a look at th260 source code for the l 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):
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.Using Flash Remoting" portion in the Flash documentation.
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash."
cab#version=6,0,0,0"
width="537"
height="190"
id="MyFirstMovie"
align=">
<param name="movie" value="MyFirstMovie.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed
src="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>
Copying and Pasting th260 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 l 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 a269 reference guide.
NOTE
Th260 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:
1. | 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). |
2. | 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. |
3. | 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.[View full size image] ![]() |
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. |
