Flash Tutorial: Delivering Your Final Movie

Flash CS5 book
Although Flash is commonly thought of as a web design and development program, it's also a full-featured multimedia authoring tool. With Flash CS5 Professional, you can publish content for distribution to the Web, CDs, DVDs, and even as full-featured desktop applications.
What you'll learn in this Flash tutorial:
  • Publishing to the Web and CD
  • Customizing Publish Settings
  • Creating a standalone, full-screen projector
  • Exporting to video

Starting up in Flash CS5

Before starting, make sure that your tools and panels are consistent by resetting your preferences. See “Resetting the Flash workspace” on page 3.

You will work with several files from the fl14lessons folder in this lesson. Make sure that you have loaded the fllessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.

The project

In this lesson, you won’t be creating a movie or even a piece of one. Instead, you’ll be publishing existing movies to the Web and CD-ROM. You will also learn how to customize Publish settings to adapt Flash content for a variety of applications and, finally, you will create a Flash projector file to deploy your Flash movies as standalone files.

The publishing process

By now you should be very familiar with the Test Movie command. As you learned in previous lessons, the command generates an SWF file so that you can preview how your animation looks and how well its interactive elements behave.

Although Test Movie works very well for preview purpose, the Publish command gives you a much wider range of options. By default, the Publish command creates an HTML page with your SWF file embedded into it for display in a browser. You can also specify other file types such as web-ready image formats (JPEG/GIF/PNG), standalone projector files and more.

Publishing to the Web

For viewing in a web browser (the most common option), a Flash file must be embedded into a web page. Flash’s Publish command does all the work for you by creating an SWF file, as well as an HTML file (web page) that has your SWF file embedded into it. Once you have published these files you can easily upload them to your web site to display your work to the world.

Publishing a file is simple. With your FLA file open, select File > Publish. Flash then creates HTML, SWF, and any supplemental JavaScript files (for version checking and browser support), and saves them to the directory that contains the FLA file, or another directory that you specify.

Before you publish, you may want to explore, and work with, some of the Publish settings that can tweak the appearance and behavior of your movie, as well as generate any additional file types you may need.

Customizing the Publish settings

The default settings are fine for many situations, but you can customize the Publish settings for better results. Give it a try:

1 From the fl14lessons folder, open the file named fl1401.fla, which is an animated footer for a web site.

2 Choose File > Publish Settings to open the Publish Settings dialog box. The dialog box is initially composed of three tabs: Formats, which lets you choose the publish format; Flash, which contains settings for the FLA file you’re publishing; and HTML, which enables you to customize the associated HTML file. By default, Flash is already set to publish a Flash movie and embed it in an HTML page. If you choose another format in the Formats tab, additional tabs related to that format appear. For now, keep the default Format settings.

Open the Publish settings dialog box

Open the Publish Settings dialog box through the File menu.

3 Click the Flash tab. The settings here control how the Flash movie you publish is created. They are grouped into three general sections: SWF file options, image options, and audio options. Make sure that Player is set to Flash Player 10, and ActionScript is set to ActionScript 3.0. By default, the Flash Player version is set to the most recent version available. In addition, Flash automatically sets the ActionScript version to match the choice you make when you choose ActionScript 2.0 or 3.0 when first creating a document.

4 In the Advanced section, click to turn on the Protect from import checkbox, if necessary, and in the SWF Settings section, click to turn off the Include hidden layers checkbox, if necessary,. The Protect from import option prevents a user from downloading your Flash movie and reimporting it into Flash to reuse. Deselecting the Include hidden layers option ensures that layers that are hidden are not included in the published file.

Hiding layers in publish settings

Adjust your movie’s Publish settings.

  • Note
    You can set three additional options for the Flash file export. Omit Trace Action and Permit Debugging are specifically geared toward working with ActionScript, while Generate Size Report creates a text file that breaks down the size of each scene and symbol in your movie.

 

5 Lower the JPEG Quality slider to 85 to increase the amount of compression on the bitmap images in your movie, and lower the file size.

Changing the quality settings

Drag the JPEG quality slider to 85.

  • Note
    Although the example file does not use any audio effects, the Images and Sounds section of the Flash tab enables you to set a movie’s audio quality. By clicking on the Set buttons to the right of Audio stream and Audio event, you can open up dialog boxes that control how those types of audio objects are compressed. The default MP3 setting is very efficient in most situations.

 

6 Click the HTML tab to view the options for the HTML file that you are publishing. By default, Template is set to display Flash only. Click the Info button to the right of the Template drop-down menu to view the description of the current template. For Flash Only, the Info pop-up explains that this template is intended as a container for your Flash movie; and that the publish operation creates additional JavaScript files that the HTML page needs to display the Flash content correctly. Close the pop-up after you have reviewed the description.

Publish settings

Review the descriptions on the HTML tab.

7 Make sure the Detect Flash Version checkbox is selected. This configures your document to detect the user’s version of Flash Player and redirects the user to download the latest version of Flash Player if the targeted player isn’t installed.

8 Select Percent from the Dimensions drop-down menu. The Dimensions menu sets the display size of the Flash movie in your HTML page. Make sure Width and Height are both set to 100 percent to ensure that the movie scales to fit the size of the browser window.

9 In the Playback options area, make sure the Display Menu checkbox is selected. The playback options control how the Flash movie behaves when loaded into the browser. With Display Menu on, the user can display a context menu by right-clicking (Windows) or Ctrl+clicking (Mac OS) on the Flash movie in the browser.

  • Note
    Because the example movie uses a nested movie clip symbol, the HTML tab’s Paused at Start and Loop Playback options would have no effect; they target the main Timeline only. Device Fonts is a Windows-only solution that substitutes system fonts for those fonts used in the Flash movie that are not loaded on the user’s computer.

 

10 Choose Best from the Quality drop-down menu to ensure that the Flash movie displays at its highest possible quality setting. Be aware that this setting has a downside: specifically, the processing time needed to achieve Best quality is longer than for lower settings.

11 Leave Window Mode, HTML Alignment, and Scale at the default settings. Window Mode controls the appearance of the box in which the SWF file appears; you can use it to create an SWF file with a transparent background. HTML Alignment controls the position of the SWF file window in the web page. Apply Scale only if you changed the SWF file’s original dimensions.

12 Next to Flash Alignment options, set Horizontal to Center and Vertical to Top, which places the SWF file in the upper-middle portion of the browser window.

Alignment in Flash

Choose Center from the Horizontal field and Top from the Vertical field.

13 Click the Publish button to publish your file with the settings you’ve chosen. Click OK to close the Publish Settings dialog box and File > Close to close the file. You may be asked if you want to save the changes, if so, click OK or Save to save changes.

In the lesson files folder, you should see a newly created fl1401.swf and fl1401.html file sitting in this folder. Double-click the HTML file to view your published movie in a browser.

1 2 3 | Next

split

Flash Tutorial

Learn Flash with this Adobe Flash Tutorial based on the book written by AGI's Adobe Certified Instructors and used in AGI's Adobe Flash training classes. This Flash tutorial is provided free of charge for you to learn Flash on your own and to see the quality of the Flash book, Flash training, and Flash tutorials created by AGI. To learn Flash with the help of one of our expert instructors please visit AGI's training website. If you are interested in buying this Flash training book you can buy it on-line at Amazon.com or at your favorite local book store. The team at AGI hopes that you find this Adobe Flash tutorial a useful way to learn Flash.