How to Publish a Flash Movie on the Web

How to Publish a Flash Movie on the Web

Open Flash and load your .fla file.
Go to File > Publish Settings.
Under the Formats tab, make sure Flash (.swf) and HTML (.html) are checked. These two file types (.swf and .html) are needed to publish a Flash movie to the Web. A .swf file is a final Flash movie. An .html file is a Web page file (virtually all Web sites are built in HTML). Your Formats screen should look like this (Note: your version of Flash may have slight variations):
Under the Flash tab, keep the default settings. However, understand that the Flash tab lets you manipulate the output settings for your movie. For example, you could protect your file from being imported and edited by another user by checking the "Protect from Import" box. Similarly, you can set a password restriction on your file. You can also alter the image and audio quality of your exported file by changing the JPEG and Audio Stream options. For our purposes, we're going to leave the file set to its defaults. Your Flash tab should look like this (Note: your version of Flash may have slight variations):
Under the HTML tab, look for the "Loop" checkbox and make sure it is unchecked. The Loop option causes Flash movies to keep playing over and over. You can leave the other options on this screen set to their defaults. Please note: The HTML tab gives you a variety of ways to manipulate your final HTML document. From this screen you can control the width and height of your Flash project, you can also place your Flash project in different positions via the HTML Alignment option. You're welcome to experiment with the different options, but for this project all you need to do is make sure the Loop option is unchecked. Your HTML tab should look like this (Note: your version of Flash may have slight variations):
You are now ready to publish your Flash project. Click the "Publish" button.
You will see a very fast status bar appear and then disappear (if you have a long and complicated Flash movie, the status bar may stick around for a while). When this bar disappears, your Flash movie has been published.
When Flash publishes a movie it creates two files: a .swf file and an .html file. These two files are placed in the same folder as your original .fla file. You should navigate to the folder where you stored your .fla file. In this folder you should see two new files that have the same name as your .fla file. These two new files will have different icons and different file extensions:
- One file will have an Internet Explorer icon (or a Web browser icon) and an .html file extension (note: depending on your system, you may not see the extensions -- don't worry, this isn't a problem). This file is an HTML Document.
- The other file will have a small cursive "f" icon. This file will have a .swf extension. This file is a Flash Movie (note: a .swf file is different from a .fla file -- .swf files are Web-ready Flash movies that can not be edited in Flash; .fla files are editable Flash files that can only be opened from within Flash).
Your file directory should look similar to this:
At this point, you have created the two files needed to publish your Flash movie on the Web. However, you have not actually published anything yet. You need to take your .html file and your .swf file and transfer them to your Pages folder. Go ahead and copy these two files over to your Pages account (you can drag and drop them or copy and paste -- either method will work).
You can now view your Flash masterpiece on the Web. Open a Web browser and go to:
http://pages.emerson.edu/students/firstname_lastname/flash_filename.html
Note: You need to insert your name into "firstname_lastname" and you need to insert your Flash file's title into "flash_filename.html"
For example, my final Flash movie would be viewable at this address:
http://pages.emerson.edu/faculty/andrew_slocum/mac_slocumv3.html
At this point you have successfully published your Flash movie. Anyone with a Web browser and an Internet connection could now view your project on the Web.
One thing to keep in mind: In our example we are publishing a Web page that only contains a Flash movie. This is unusual. Most Flash movies are inserted into Web templates that contain a Web site's navigation, other Web content, advertising, etc. Confused? Here are a couple of examples
- A standalone Flash movie.
- A Flash movie contained within a Web template.
A Final Complicated Step for People Who Want to Get Fancy
If you ever decide to save your .html files and your .swf files in different locations, you may encounter a scenario where your Flash movies won't load. The solution to this problem lies in the html code.
The basic outputted code that Flash produces looks something like this:

<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="550" HEIGHT="400" id="flash-template-example" ALIGN="">

<PARAM NAME=movie VALUE="flash-template-example.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="flash-template-example.swf" loop=false quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="flash-template-example" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

Now here's where it gets tricky: Different browsers use different tags to load Flash movies. Internet Explorer uses the <OBJECT> tag. Netscape and Firefox use the <EMBED> tag.
Because of this, you need to make sure you tell both types of browsers where to find your .swf file. This means you need to alter the "VALUE" parameter for Internet Explorer and the "src" parameter for Netscape/Firefox.

This is the VALUE parameter (used with Internet Explorer):

<PARAM NAME=movie VALUE="flash-template-example.swf">

This is the src parameter (used with Netscape/Firefox):

<EMBED src="flash-template-example.swf"

So, here's a scenario: Let's say I have decided to save all of my Flash files in a folder titled "Flash" on my Web server (separating Flash files, multimedia and images is an organizational technique that's used in professional Web shops). This being the case, my .html file and my .swf (Flash) file now reside in two totally separate folders:

My .html file is here:

http://www.theindependentpublisher.com/flash-tutorials/flash-in-template-example.shtml

My .swf file is here:

http://www.theindependentpublisher.com/flash-files/flash-template-example.swf

Because of this, I would have to make sure my HTML code is altered to reflect this difference. I would change my VALUE and src parameters to this:

This is the VALUE parameter (used with Internet Explorer):

<PARAM NAME=movie VALUE="/flash-files/flash-template-example.swf">

This is the src parameter (used with Netscape/Firefox):

<EMBED src="/flash-files/flash-template-example.swf"

You'll note that I added /flash-files/ to each parameter. This tells the Web browser to look for a folder called "flash-files." Inside that folder, the browser will find the file named flash-template-example.swf.
If I neglected to insert the /flash-files/ code, the browser wouldn't know where to find the flash-template-example.swf and my final Web page would not show my Flash movie.
That's it! You're done! Congratulations!