1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Flash Tip: Embedding Your SWF in a Web Page

By

Flash Tip: Embedding Your SWF in a Web Page
If you're publishing for the web, you'll need to be able to insert your SWF file into your website, right? While Flash has the option to publish in HTML format, all that gives you is a blank white web page with your SWF file playing in it. That doesn't do you much good if you're using your own layout and you want to insert your Flash movie inside that layout, does it?

If you're familiar with WYSIWYG (What You See Is What You Get) editors like Macromedia Dreamweaver or Microsoft FrontPage, then it's easy to just use the Insert menu to insert a Flash object, and then select your SWF file from its location on your hard drive; the HTML editor will write the code for you, and all you need to do is edit the path of the file to reflect the location on your web server.

If, however, you're working in a text editor and writing your HTML code from scratch, it can be a tiny bit more difficult. Here's a quick and easy shortcut, though:

  • Edit your Publish settings for Flash SWFs and HTML to reflect how you want your Flash SWF to appear in your web page.
  • Export your Flash movie as HTML.
  • Locate your HTML file on your computer, right-click, and select "Open With".
  • Choose either NotePad or another text editor.
  • Copy the source code from the HTML file.
  • Paste it into your web page's source code in the appropriate location where you want your SWF file to display.
  • Edit the file path to reflect the location of the SWF file on your web server, and upload both your HTML and SWF file to the appropriate directories on your server. (Note: this also applies if you're using PHP, JSP, ASP, CGI, or other web page extensions.)

Your code should look 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="320" HEIGHT="240" id="Yourfilename" ALIGN="">
<PARAM NAME=movie VALUE="Yourfilename.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#333399> <EMBED src="Yourfilename.swf" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

Most of this you don't need to touch, so don't worry about making sense of that. The italicized section sets the codebase for the version of Flash used, to check against to see if your user has that version. The rest has taglines to download the Flash player (if the user doesn't have it) and the parameters that you would need to edit--mainly, the line labeled EMBED src="Yourfilename.swf".

By default only the file name would be there, because Flash publishes the SWF and the HTML file in the same folder together with your FLA file. However, you may want to put your SWF files in a separate subfolder on your server, perhaps a folder labeled "flash"--in which instance you would edit the code to read EMBED src="flash/Yourfilename.swf".

Trust me, it's much simpler than it sounds. Give it a try and find out for yourself.

©2014 About.com. All rights reserved.