1. Home
2. Developer Connection
3. Flash Developer Center

Flash Article

 

Using Flash for the First Time – Part 3: Publishing and Adding a Flash File to a Web Page

Jen deHaan

Flash Authoring QE
Adobe
Jen deHaan's blog
flashthusiast.com
webvideoblogger.com

This is Part 3 of a three-part article on how to build a simple animated banner in Macromedia Flash and add it to a web page using Macromedia Dreamweaver. In this final part, you learn about file size, banner standards, how to set publish settings, how to add the banner to a Dreamweaver web page, and how to add Flash Player detection.

You must have Dreamweaver MX 2004 or Dreamweaver 8 installed to complete most of this part of the tutorial. If you don't use Dreamweaver, you can complete the first part of this article and use the HTML that Flash outputs with a different HTML editor. However, you won't be able to enjoy some of the benefits of using Flash and Dreamweaver together!

Note: If you are still using Flash MX 2004 and not Flash 8, please see the previous version of this article.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flash Basic 8

• Buy

or Macromedia Flash Professional 8

• Try
• Buy

Macromedia Dreamweaver MX 2004 or Dreamweaver 8

• Try
• Buy

Tutorial and sample files:

• gnome3_fl8.zip (ZIP, 469K)

Prerequisite Knowledge

• Using Flash for the First Time – Part 1: Building a Banner
• Using Flash for the First Time – Part 2: Adding Symbols, Animation, and ActionScript

Considering Your Audience

When you create a site, you often need to follow certain guidelines for submitting a Flash banner. 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. 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—much as 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 6. If you think other web professionals will visit the site, then a later version of Flash Player (with a detection system) should be fine. 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. Many sites you might advertise with now accept Flash Player 6 files. You might also create a website that targets a wide audience, and you need to target an older player. The simple ActionScript you added to your file can play in Flash Player 6. Therefore, you can change your player settings to Flash Player 6 for your website.

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 from Part 2 of this series. If you don't have banner2.fla, open banner3.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.

6. Click the Flash tab and select Flash Player 6 from the Version pop-up menu. When you add Flash advertisements to an HTML page, you should use Flash Player 6 or earlier (as of the time of this writing).

   Many Flash developers still use Flash Player 5 for banner advertisements, although sites are starting to use Flash Player 6, which enables you to include additional functionality to your Flash advertisements.

7. Select ActionScript 1.0 from the ActionScript version pop-up menu. For this example, you wrote ActionScript 1.0 style code (in Part 2). Although this setting does not matter, it's a good habit to check what version you have selected. You can write ActionScript 2.0 code and publish to Flash Player 6 if you want.
8. Select the Compress Movie check box from the Options section. 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 SWF 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 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. 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 article 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, 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. The tags you need are the <object> tag and the <embed> tag, which contain the information that both Internet Explorer and Mozilla-based browsers need to display SWF files.

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

Inserting Flash on a Dreamweaver Site

You might have a web page already created for a banner. We have created a page for you, which is ready to have a banner of this size placed on it. Make sure that you download the gnome3_fl8.zip file at the beginning of this article. Open the ZIP file and find the website folder. Inside that folder are the documents you need to edit. You will modify the gnome.html page in the following exercise.

Note: You can find a finished version of the website in the finish folder.

1. Open the page called gnome.html in Dreamweaver MX 2004 or Dreamweaver 8. You can find this document in the website folder of this article's source files. Look inside the start folder.
2. Save a copy of this file in the same folder as the SWF file you published in the previous exercise (banner3.swf).
3. Save a copy of rightnav.css in the same folder as the SWF file you published in the previous exercise. Look inside the start folder. This document adds styles (such as text color and margins) to the gnome.html file.
4. Make sure you're in Split view (View > Code and Design). When in Split view, you can see and edit the code you're working on and also select the SWF file easily in Design view.

5. In gnome.html, select the large 160 x 600 image placeholder on the right side of the web page (see Figure 1). This is where you want to add the Flash banner to the web page.

   

   Figure 1. Select the large image placeholder on the right side of the web page in Dreamweaver.

6. Press the Backspace or Delete key to delete the image. Leave the text input cursor at that position in the HTML document.
7. Select Insert > Media > Flash. This opens the Select File dialog box, where you can select the SWF file of the banner you created.
8. Select the banner3.swf SWF file, which should be in the same folder as your web page (see Step 2).
9. Click OK. The SWF file is inserted into the web page. (See the gnome.html document in the finish folder to reference the code that's added to the document.)
10. (Optional) Select the SWF file and click Play in the Property inspector to view the banner's animation.
11. Select File > Preview in Browser > iexplore (Windows) or Internet Explorer (Macintosh), or select your preferred browser, to preview your site (which now contains the SWF banner) in a browser window.

About Roundtrip Editing

By now you might want to change something in your Flash banner. Say you want to change the frame rate or add some more text. It's easy to return to Flash to edit the document from within Dreamweaver:

1. In gnome.html, select the SWF file in Design view in Dreamweaver and then open the Property inspector (Window > Properties). The Property inspector displays controls for the SWF file.

2. Click the Edit button in the Property inspector (see Figure 2).

   

   Figure 2. Select the SWF file and click the Edit button in the Property inspector.

   Flash opens the associated FLA document in the Flash authoring environment, or opens a window for you to locate the associated FLA document.

3. Make your edits in Flash. Notice that "Editing From Dreamweaver" appears in the authoring environment to indicate you're editing a file from the Dreamweaver environment.

4. Click the Done button next to Editing From Dreamweaver (see Figure 3).

   

   Figure 3. You can edit the FLA document directly from Dreamweaver. Click Done when you're finished.

5. Flash updates the FLA file, publishes the SWF file, closes Flash, and then returns you to the Dreamweaver document. Your document is updated in Dreamweaver.
6. To view the changes to your SWF file in Dreamweaver, either view your site in a browser or select the SWF file in Design view and click Play in the Property inspector.

Checking for Flash Player

Most people who visit your website will have the Flash Player 6, or later, plug-in installed. In rare circumstances, a visitor might not have the plug-in installed. You can do several different things when a visitor without Flash Player visits your site. When you have a site that uses Flash primarily for functionality, you might want to send that user to a custom page that links to the Macromedia site where the user can download the player.

The Check Plugin behavior in Dreamweaver enables you to verify whether visitors to your website have the Flash Player plug-in installed. After the behavior checks for a plug-in, you can route the visitor to different URLs, depending on whether they have the minimum required plug-in. For example, if the visitor doesn't have Flash Player, you can open a page that links the visitor to the Macromedia website to download the latest version:

1. In gnome.html, click inside the <body> tag (click between the "y" the closing angle bracket) and open the Behaviors panel in Dreamweaver (Window > Behaviors).
2. Click the Add (+) button and select Check Plugin from the behaviors pop-up menu.
3. Select Flash from the Plugin pop-up menu.
4. Leave the If Found, Go To URL text box blank. This text box controls what page the visitor with the specified plug-in sees. Leaving the text box blank ensures that users stays on the same page if they have Flash Player installed.

5. Type a URL into the Otherwise, Go To URL text box. You need to specify an alternative URL for visitors who don't have the Flash Player plug-in. Type noflash.html into the text box.

   Note: I provided a noflash.html document for you with the source files, included in the sample files that accompany this tutorial; it's inside the finish folder. Either save this document in the same folder as the gnome.html document you're working on or create your own file in this location. Ideally you would create a custom web page for users without Flash Player.

6. Select the Always Go to First URL If Detection Is Not Possible check box. When selected, this option effectively means "assume that the visitor has the plug-in unless the browser explicitly indicates that the plug-in is not present." Because you add an alternate ad for visitors without the plug-in, this option is preferable for this exercise. Figure 4 shows the selection you should have made up to this point to add Flash Player detection.

   

   Figure 4. Make these selections to add Flash Player detection in Dreamweaver using a behavior.

7. Click OK. When you finish, Dreamweaver adds the following code to the <body> tag:

   <body id="container" onLoad="MM_checkPlugin('Shockwave Flash','','noflash.html',true);return document.MM_returnValue">
   

You can find the finished files in the source file directory, inside the finish folder.

You can also add Flash Player detection in Flash authoring if you aren't using Dreamweaver:

1. Go to the Publish Settings dialog box (File > Publish Settings) and make sure that you select HTML in the Formats tab.
2. Select the HTML tab.
3. Select the Detect Flash Version check box and type a version of Flash Player to detect.

You can also refer to the Flash Player Detection Kit, which is built into Flash Professional 8, for documentation, articles, and sample files.

Summary

Now you have completed your first Flash site and inserted it into a Dreamweaver web page. You have learned how to create a new file, import content, create new assets in Flash, add simple animation and ActionScript, and publish your work for the web. You also learned how to use Dreamweaver to insert the SWF file into an existing web page, probably one that's similar to a simple page you've created in the past.

This introductory step of learning Flash and adding a SWF file to a web page is an important one when you're learning to use Flash. You now have the fundamentals under your belt and understand the essential nature and workflow of creating content with Flash. Hopefully you'll feel better equipped to learn how to create increasingly interactive, entertaining, functional, or instructional content using Flash.

Where to Go from Here

In the final exercise, you added a Flash detection script. Dreamweaver's plug-in behavior works well but there are certain times when you may need to customize the actions a bit more. For example, if you wanted to check for not only the existence of the Flash Player plug-in, but a specific version of the plug-in. Or you might want to display an alternate GIF or JPEG image if the user doesn't have Flash Player. This means that instead of seeing a blank area on your page, or an area with a plug-in graphic, the visitor sees a static advertisement.

The Flash developer community provides other Flash plug-in scripts, such as the one written by Colin Moock. Even though the content was written in July 2000, it is still largely relevant. You can find the "moock flash player inspector" on moock.org. Using this system, you can substitute the Flash banner on the page, rather than redirect the user to a completely new page.

You may also want to check out Robert Hoeckman's article Best Practices for Flash Player Detection to learn more about the benefits of the new Flash Player Express Install feature in Flash 8 and learn why it beats previous Flash Player detection approaches.

About the author