Correctly displaying a SWF file in a browser requires an HTML file. The browser loads the HTML file, and then loads the SWF file that is specified in the HTML code. It's necessary that the HTML page contains an OBJECT tag that specifies the location of the actual Adobe Animate SWF file.
The HTML OBJECT tag directs the browser to load Adobe Flash Player and then use it to play your SWF file.
The Publish command in Animate automatically creates an HTML file that contains the required tags for web browsers to play the published SWF file. There are several different HTML publishing templates you can choose from in the Publish dialog box (File > Publish).
The HTML files created by Animate contain only the code required to display your SWF file. To add your SWF file to an HTML page that contains other elements such as text or graphics, paste the following code into the HTML document. Paste this code somewhere inside the BODY tag of the HTML file.
To add the OBJECT tag manually, do the following:
- Copy the HTML code below and paste it into your HTML. Place the code in the HTML file in the location where you want the SWF file to appear in the web page.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle"> <param name="movie" value="movie_name.swf"/> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="movie_name.swf"/> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
- Edit the attributes of the OBJECT tag for your SWF file.
- Change the HEIGHT and WIDTH parameters to match the height and width of the Stage. To automatically scale the SWF file to consume a specific percentage of the browser window, enter percentage values for height and width instead.
- Change all instances of "movie_name.swf" where it appears in the OBJECT tag above to the actual path or URL of your SWF file.
The SWF file path can be relative to the location of your HTML file or the fully qualified, absolute path of your SWF file. For example:
- If the SWF file is in the same folder as the HTML file, you only need the filename of the SWF file.
- If the SWF file is in a subfolder, the path is something like "subfolder_name/movie_name.swf" (without the quotes).
- If the SWF file isn't in the folder with the HTML file, use "../" for each level up from the folder with the HTML file. (Don't include the quotes in the syntax.) So "../../../separate_folder/movie_name.swf" goes up three levels from the folder with the HTML file before going down into the "separate_folder" to find the SWF file.
- A fully qualified path is the same thing as a complete URL (that is, http://www.myDomain.com/flash_content/movie_name.swf.)
You can also use the Publish command in Animate to create a basic HTML file containing the OBJECT tag. Then copy and paste the HTML code within the OBJECT tag into your own HTML file. The name of your SWF file is already correctly specified in the HTML code.
The code above is the minimum required to insert a SWF file in your HTML file. There are additional attributes you can specify for these tags to control the details of how Flash Player plays your SWF file. For information, see OBJECT and EMBED tag attributes.
Test your HTML page in all web browsers you want your intended audience to be able to use.
Note: Dreamweaver, Adobe's HTML authoring tool, can easily embed a SWF file into an HTML document for you. Dreamweaver allows full control of the design of the page that contains the SWF file. For more information, see the Dreamweaver product page.