How to Embed SWF in the HTML of a Webpage

Steps to Add Shockwave Flash Animations in the HTML of Your Website

Do you want to insert your SWF file into your website? While Shockwave Flash has the option to publish in HTML format, all that gives you is a blank white webpage with your SWF file playing in it. That isn't very appealing to your audience if you're using your own layout and you want to insert your Flash movie inside that layout to enhance your website. Learn how to embed SWF files using either a WYSIWYG editor or a text editor.

Using a WYSIWYG Editor to Embed SWF

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.

Using a Text Editor to Embed SWF in the HTML Code

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 webpage.
  • 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.)

    Example of Embedded HTML Code for SWF

    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>

    Editing the SWF HTML Code

    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".

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