Using Flash for the first time – Part 3: Publishing and adding a Flash file to a web page

Considering your audience

When you create a banner, you often need to follow certain guidelines for submitting that banner to a particular site or service. For the purposes of this article, following established advertising guidelines is not a great concern because you're not submitting the banner to a company for advertising purposes (and each service will vary and provide directions, or provide a kit such as this one from DoubleClick). This section briefly explores some of the considerations you might have when creating a banner in a real-life project, or a project for wide distribution. When you create a banner that you submit to an advertising company, often you need to make sure that the file meets their specified file size, dimension, target Flash Player version, and frame rate guidelines. Sometimes you have to consider other rules about the kinds of media you can use, button code you use in the FLA file, and so forth.

You have created the banner and resized its dimensions. When doing so, you actually set the banner to established and standardized dimensions for what the Interactive Advertising Bureau calls a “wide skyscraper.” The file size is also reasonable for a Flash ad of this size. You will discover how to reduce the file size in an upcoming exercise. For information on standard advertising dimensions (and many other useful guidelines), check out the Interactive Advertising Bureau's Standards and Guidelines page. However, ensure that you confirm the advertising guidelines for the advertising service, client, or website that you're advertising with first. Guidelines might include standards for file size, dimensions, sound and video usage, and buttons.

What's more important (for the purpose of this article) is that you understand how to create Flash content, export it from Flash, and add it to your own website. The lesson to draw from banner guidelines is that you need to consider your audience. Whenever you create a Flash site, you should think about the kind of people who will see your content—like you would when you create any website. Is your audience a wide range of individuals with many kinds of computers using different versions of Flash Player (or none at all)? Or is your audience primarily fellow Flash developers and new-media companies? Your audience should affect the version of Flash Player you target. For example, if you think a diverse audience (often a large audience with a wide range of computer capabilities) will visit your site, you should target an earlier version of Flash Player, such as version 8. If you think other web professionals will visit the site, then a later version of Flash Player (with a detection system) should be fine. For information on Flash Player version penetration, see the worldwide ubiquity stats on Adobe’s website. You will set your Flash Player and add a Flash Player detection system in upcoming exercises.

Note: If you send your banner to a company to host, they usually have special requirements for how you add button code to your FLA file. Often they want you to add a specific variable (such as clickTAG) instead of a URL. Refer to the advertising service, client, or website guidelines for the correct button code to add to your FLA file. Some companies also limit what frames per second (fps) rate you can use in the SWF file. When you design a banner, try to keep your fps rate as low as possible. Definitely use 18 fps or lower; ideally stick with 12 fps.

Checking your publish settings

Often you need to save banners to earlier versions of Flash Player, but in this part of the tutorial we will explore the Publish Settings dialog box so you understand how to change your settings in case you need to for the provider or audience you’re targeting.

In earlier parts of this tutorial, you made changes in the Document Settings dialog box. You set the dimensions and fps rate for the SWF file. In this final section, you will make sure that the Flash Player setting you want to target is correct, and that you export the files you need. Many Flash authors make these settings when they create the FLA file because they are aware of what they need to output and target:

1. Open the banner2.fla file you saved from completing part 2 of this series. If you don't have banner2.fla, open banner_pt3.fla from the source files ZIP archive that accompanies this tutorial. Look inside the start folder.
2. Select File > Save As and then rename the file as banner3.fla.
3. Select File > Publish settings. The Publish Setting dialog box opens, where you can change many different settings for how you want to publish your files.
4. Click the Formats tab and then make sure that the Flash (.swf) check box is selected.
5. Clear the HTML check box. For this exercise, you don't need to output an HTML page. You just need the SWF file so you can embed it in an existing HTML page using Dreamweaver.
6. Click the Flash tab and select Flash Player 9 from the Version pop-up menu if it isn’t already selected. When you add Flash advertisements to an HTML page, you might select an earlier player version. This is the menu you use to do so. Note that you might need to revert to an earlier version of ActionScript if this is the case.
7. Select ActionScript 3.0 from the ActionScript version pop-up menu, if it isn’t already selected. If you ever use an earlier version of ActionScript for your ad, you change the ActionScript version using this menu.
8. Select the Compress Movie check box from the Options section (it should be selected by default). You do not need to make any other selections on the Flash tab.
9. When you finish, click OK to accept the changes to your document.
10. Select File > Publish when you have finished editing your FLA file. This publishes the SWF file to the directory where you saved the FLA file.
11. Go to the folder to which you published the banner's SWF file. Check the file size of the document (it's called banner3.swf).

As I mentioned previously, file size is not a great concern for this tutorial because you're not submitting the banner to an advertising service. If you need or want to reduce the file size of your banner, you can go to the Publish Settings dialog box again (File > Publish Settings) and click the Flash tab. You can reduce the quality of the bitmap image you use in the background by changing the JPEG quality to a lower number. You could move the slider to 60 and click Publish. When you check the SWF file again, the file size will be smaller.

There are other ways to reduce the file size of a SWF file. If you need to design a file to a specific maximum file size, make sure you publish your work regularly and check the current file size. Bitmap images, sounds, and video quickly increase a SWF file's size.

If you don't have Dreamweaver installed, then this tutorial ends here for you. If this is the case, you can return to the Publish Settings dialog box from this exercise and make sure you select the HTML check box under the Formats tab. When you publish the document, an HTML file is exported with the SWF file. You can open this file, copy the HTML code you need, and paste it into your website. Notice that this file contains some extra tags that you won't need if you have an existing website, such as <head> and <body> tags. You will need the code and scripts that embed the SWF file into a web page, and you can also upload the JS file that exports with the SWF and HTML files to activate the SWF file within pages viewed using Internet Explorer.

If you do have Dreamweaver, carry on. In the following exercises, you will place and edit the banner in a web page.

Page 2 of 4

Previous Page

Next Page