Uploading Your Site to the Web

When your files are ready to share, you can use an application (like Transmit, FileZilla, or Dreamweaver) with File Transfer Protocol (FTP) capabilities to transfer your files to your web server. You’ll only need to transfer the output files (e.g., SWF, HTML, XML, CSS, JS) in order for your site to function. Your source files (e.g., FLA, AS, PSD) do not need to (and in most cases should not) be uploaded.

Before uploading your ﬁles, you want to make sure that you’ve published your HTML document. Testing your movie in the authoring environment only generates a SWF ﬁle.

1. Choose File > Publish Settings and click on the HTML heading at the top.

2. Set the Dimensions menu to Pixels and update the Width and Height to 830 and 630 pixels, respectively.

The increased dimensions will make room for a stroke and drop shadow around the background symbol.

3. Set the HTML alignment to Top, set Scale to No scale, and set both the Horizontal and Vertical Flash align-

ment settings to Center (Figure 5.43).

4. Click the Publish button to publish both the SWF and the HTML ﬁle, and then click OK to save your Publish

settings.

Chapter 5 Sharing Your Animation

Figure 5.43 The updated HTML Publish Settings.

5. Navigate to your website directory on your hard drive. You should see a site.html ﬁle. Open the site.html ﬁle

in your web browser by double-clicking on the ﬁle. Note that there is plenty of room for the stroke and drop shadow (Figure 5.44).

Figure 5.44 The site.html file viewed in a web browser.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

6. Open the site.html ﬁle again, this time in a plain text editor (like TextWrangler on a Mac, Notepad in Win-

dows, or Dreamweaver code view). You should now see the raw HTML text (Figure 5.45).

Figure 5.45 The raw HTML text in TextWrangler (with customized color coding).

7. Edit line 9 in the site.html ﬁle to match the following highlighted code:

#flashContent { margin-left:-415px; padding-left: ➥ 50%; width:100%; height:100%;}

Flash wraps your movie in a <div> tag with an id attri- bute set to flashContent by default when you publish your HTML ﬁle. The text that you just added to the

While you’re editing the HTML HTML is actually CSS embedded in the HTML page. By

code, also consider updating the giving the flashContent element a negative left margin text within the <title> tag. This

that is half the width of your embedded Flash movie, text will appear at the top of your

and padding the left side of the element by 50%, you browser tab or window when the

page is loaded. have effectively centered your movie horizontally

(even when the user changes the scale of the browser window).

You can find TextWrangler (a free code editor for the Mac OS) at

8. Save the HTML ﬁle.

www.barebones.com/products/ textwrangler.

9. Refresh the site.html page in your web browser (or reopen it if you closed it). The style update in the previ-

ous step will have centered your Flash content horizontally, blending the Flash more seamlessly into the matching HTML background (Figure 5.46).

Chapter 5 Sharing Your Animation

Figure 5.46 The site.html page centered horizontally in the web browser.

10. Use an FTP application of your choice and upload Before uploading your files, be sure the following ﬁles and folders: site.swf, site.html, the

to test them on as many operating content folder (and the files contained within), and the systems and browsers as you have available to make sure everything is config folder (and its files).

working properly.

When your ﬁles have been uploaded, you can send the link to your desired clients/employers, friends, and family, and show them the great work you’ve done.

Now that you have a solid web portfolio up and running, it’s time to look at a few other ways to get others to notice your work.

Uploading Your Site to the Web