Publish swf with HTML Page

Publish swf with HTML Page

Flash CS4 Tutorial

 

How to Create a HTML Page That Includes Your Flash swf File

 

 

The publish settings in Flash allow you to quickly create a html page that includes your swf file. The page can be set to detect the users Flash Player version, center your content and scale the swf movie.

 

Step One

In a new Flash document, select the Rectangle tool (r key) and add a rectangular object to the stage. The object should cover the entire stage.

Step Two

Select the object and change the fill to a gradient in the Properties panel, Fill and Stroke section.

Step Three

Save your fla file in a folder called HtmlProject.

Step Four

Choose File > Publish Settings and click the HTML tab.

Step Five

Set Dimensions to Percent and Scale to No Scale. This will allow your page to scale and the swf will never exceed the original Flash stage size in the center of the html page.

Step Six

Click Publish to save a html file in your HtmlProject folder. Click OK to close the Publish Settings dialog box. Double-click your html page to open it with your web browser.

Step Seven

Choose File > Publish Settings and click the HTML tab.

Step Eight

Set Dimensions to Percent and Scale to Exact Fit. This will allow your page to scale and the swf will scale with the html page.

Step Nine

Click Publish to save a html file in your HtmlProject folder. Click OK to close the Publish Settings dialog box. Double-click your html page to open it with your web browser.

Say Goodby to the Border

When you published the html page in Step Nine you probably noticed a border around your swf content. To eliminate the border, you need to open the html page in a HTML Editor (i.e., Dreamweaver) and alter the code.

Right above the heading close tag (</head>) type the following code:

<style type="text/css">

body {

margin: 0px;

}

</style>