Publishing and Deploying: Chapter 14 - Learning Flash CS4 Professional

by Rich Shupe

Welcome! It's the final chapter of the book, and you're almost home. You worked hard, you know your way around Flash, and you created a portfolio that ties together everything you've learned. All that remains now is get ting it out into the world.

Learning Flash CS4 Professional book cover

This excerpt is from Learning Flash CS4 Professional. This easy-to-read book is loaded with full-color examples and hands-on tasks to help you master Flash CS4's new motion editor, integrated 3D system, and character control using the new inverse kinematics bones animation system. No previous Flash experience is necessary.

buy button

Chapter 14. PUBLISHING AND DEPLOYING

Introduction

In this chapter, you'll publish a SWF and a host HTML file that will run in your friendly neighborhood web browser. As an added bonus, you'll also create an AIR (Adobe Integrated Runtime) desktop appl ication that will wrap the portfolio into one neat little package. You can download the AIR application and run it locally o r even leave a copy behind at job interviews.

First, however, you'll cre ate a preloader to keep your viewers aware of any loading delays caused by slow Internet connections. When the preloader is finished and you've deployed to both HTML and AIR, your mission will be complete. In this chapter, you'll work on the projec t in three separate segments so you can focus on each topic individually.

Using a Preloader

When a viewer to your site is struggling with a slow Internet connection, waiting a long time for assets to load can be di sconcerting. At best, the experience is frustrating. At worst, your visitor may think there is a problem with your site and move on.

In time, you will be able to optimize your online applications to keep SWF sizes small, load more assets from external sources, and reduce embedded assets by accomplishing more with code. Until you're comfortable and experienced enou gh to do these things, you'll have to work around large assets.

The portfolio project that wound its way through this book was designed to show you how. The user interface's large viewing wheel contributes significantly to the size of your SW F. By displaying a progress bar during the initial load time, you can indicate to visitors that your content is coming and a lso indicate how long they will have to wait.

To do this, you will create a preloader that sits as the only asset in t he first frame of any FLA. When the file begins to load, the preloader will stop in frame 1 and begin monitoring the percent age of your SWF that has loaded. When that value reaches 100%, the SWF will be fully loaded and the code will continue playi ng the file.

The Assets

The only asset essential to this task is a movie clip that will act as a progre ss bar. To provide the viewer with some context as to how much of the loading process remains, however, you need to create the progress bar in a specific manner:

  1. Create a new file (without using the book template) and give it a black Stage color.

  2. Select the Rectangle tool in the Tools panel.

  3. Make sure Object Drawing mode is off.

  4. Using the Tool panel's color chips, select a gray stroke color (#999999) and white fill (#FFFFFF).

  5. Draw a rectangle anywhere on the Stage.

  6. Switch to the Selection tool and double-click the fill of the rectangle, or click outside the rectangle and drag over the entire rectangle with the Selection tool to select both the fill and stroke.

  7. Using the Properties panel, give the rectangle a width of 150 pixels and height of 10 pixels. To control these values ind ependently, click the adjacent link icon to unlock the aspect-ratio lock.

  8. Convert the shape to a movie clip, name it preloader, and give it an upper-left registration point. Click OK to create the symbol.

  9. This movie clip is a symbol you can drop into any project to use as a preloader. You will create your progress bar and add your code inside this movie clip.

  10. Double-click the movie clip to edit its c ontents. In the Timeline panel, name the existing layer progBar.

  11. Using the Selection tool, carefully double-click the stroke of the shape you created. Be sure the fill remains unselected. Zoom in if selecting only th e stroke is difficult.

  12. Cut the stroke (Edit→Cut), create a new layer in the Timeline panel called outline, and paste the stroke in place (Edit→Paste in Place) in that layer. Be sure the stroke ends up at the same x and y position so it appears to surround the fill. Lock this layer. By separating the stroke and fill, you will create not only a progress bar, but also a rectangular frame that the progress bar will fill up, providing context to the viewer.

  13. Select the fill and convert it to a movie clip, name it bar, and choose a center-left registration point. This is important because you will incrementally scale this bar to the right with ActionScript to show loading progress. If the registration point is not on the left side, it may not appear to grow correctly. For example, if you use a center registration point, it will expand in both the left and right directions. Click OK to create the symbol .

  14. Select the instance of the bar movie clip on the Stage and give it an instance name of progBar. Double-click anywhere on the black background of the Stage to return to the main timeline. You're now done with the assets and are ready to move on to coding. Compare your file to preload er_01.fla of the companion source files.

The ActionScript

When writing ActionScript within your FLA, you'll usually write code in the main timeline. This consolidates code and reduces the need to hunt for scripts elsewhere. In this case, however, you' re designing a generic preloader that you can reuse often simply by dropping it into the first frame of each file. For this reason, you're going to place t he ActionScript inside the preloader, making it self-contained like a component.

When writing code insi de a movie clip that refers to the main timeline, you need to adjust your point of reference. The main timeline is the parent of a movie clip inside it. If you use the identifier this, you will be referring to the movie clip in which you wrote the script. If, instead, you use this.parent, you can refer to the main timeline.

  1. Double-click the preloader movie clip you created to edit its contents.

  2. At the top of the Timeline panel, create a new layer called actions, type the following script into this layer, and save your work :

    1 var main:MovieClip = MovieClip(this.parent);
    2 var mainInfo:LoaderInfo = main.loaderInfo;
    3 var loadPercent:Number = 0;
    4
    5 main.stop();
    6 progBar.scaleX = 0;
    7
    8 this.addEventListener(Event.ENTER_FRAME, onCheckLoaded);
    9 function onCheckLoaded(evt:Event):void {
    10 loadPercent = mainInfo.bytesLoaded / mainInfo.bytesTotal;
    11 progBar.scaleX = loadPercent;
    12 if (progBar.scaleX == 1) {
    13 removeEventListener(Event.ENTER_FRAME, onCheckLoaded);
    14 main.play();
    15 }
    16 }

So, what does this new ActionScript do? Line 1 stores a reference to the main timeline—the parent of the preloader movie clip you are creating. To prevent errors from the compiler, this line casts the main timeline as a MovieClip data type. This lets the compiler know that the main timeline is, in fact, a movie clip, so using movie clip properties and methods is legal.

Line 2 stores a reference to the main timeline's loaderInfo property. As its name implies, this property contains information pertaining to the loading of a display object. In most cases, you will query this property when checking on an instance of the Loader class that you create to load an external asset. However, this also works when checking on the loading progress of the main timeline.

The load Percent variable in line 3 is initialized to a value of 0 and will contain the percentage of the main timeline that has loaded throughout the preloading process.

Line 5 stops the main timeline from playing so the preloader can do its work. The progBar instance name in line 6 refers to the progress bar movie clip that you created earlier. This line initializes the horizontal scale of the progress bar to 0 before the load ing begins.

Lines 8 and 9 create an event listener that listens for the enter frame event, thereby updating the progress bar many times per second. Line 10 divides the current number of bytes loaded by the total available bytes to calculate the percentage loaded each time the listener function is called . Line 11 sets the horizontal scale of the progress bar to this percentage. Thus, when 50% of the SWF is loaded, the progress bar will be scaled to 50% of its total width.

Finally, the conditional statement in lines 12 through 15 checks to see if the amount loaded has reached 100%. If so, the listener is removed and the main timeline is played. This makes the preloader disappear and the portfolio's user interface begins to animate in.

Testing Your Preloader

With the assets and code in place, the preloader is complete and you can now test it using Flash's download simulator. The preloader_02.fla companion source file has been provided for this purpose. It contains a second frame with a large asset in it. You can copy and paste the preloader from your file into frame 1 of preloader_02.fla for testing, or simply use preloader_03.fla, which has a finished preloader included.

  1. Test your movie. The movie will load instantly because everything is local.

  2. When you test a movie in Flash, you run a copy of Flash Player launched from within the Flash application interface. The application menus have changed so that you can use play er features designed to simulate online connections. Access the View→Download Settings menu command to see a variety of connection speeds and select 56k (modem speed).

  3. Test the movie again, while still in player mode, by using the View→Simulate Download menu command (do not close the SWF and return to Flash to retest). This will test the SWF again, but this time, throttle the speed to simulate a 56k Internet connection. You should see the progress bar increase in horizontal scale until it reaches full width and then advance to the next frame to show the content.

Project Progress Preloader

Because you added the necessary ActionScript to the preloader movie clip itself, all you need to do for the prelaoder to work is add it to frame 1 of your main portfolio FLA:

  1. Open your main portfolio FLA and add a layer to the timeline beneath the labels layer. The placement of the layer isn't critical; it just helps keep things tidy by keeping frame labels and ActionScript at the top of your timeline. Name it preloader.

  2. Create a keyframe (F6) in frame 2, isolating frame 1 from the rest of the layer's frames.

  3. If your preloader FLA is still open, make sure you're in the main timeline. Otherwise, open your preloader FLA, or preloader_03.fla if you prefer to use the furnished source file.

  4. Copy the preloader movie clip from your preloader FLA and paste it into the first frame of the preloader layer in your portfolio FLA.

  5. Save your work and test the preloader using the same process outlined previously in this chapter, in the the section called “Testing Your Preloader” section.

Your project is now complete! Now it's time to deploy it to the world.

Distributing External Assets

When a SWF is compiled and readied for dep loyment, your distribution doesn't have to include any of the assets that were imported into the FLA. For example, you don't need to include your portfolio's interface PSD when you upload your files to a server. However, you must include all external assets that will be loaded at runtime.

Whenever any of the Project Progress exercises throughout the book have needed to load external assets, you've consolidated the external files in the assets folder in your main project directory. When uploading your HTML deployment package, and when preparing your AIR application, you will need to include this directory and the assets within.

Because the preparation for deployment via web browsers and AIR is different, the external assets will be mentioned in both exercises.

Deploying for Web Browsers

Most of the time, Flash designers and developers create Flash projects that are uploaded to a server and accessible via the World Wide Web. This typically requires not only the creation of the SWF that is compiled every time you test your movie (Control→Test Movie), but also a host HTML file. For your convenience, both of these files are created when you publish your FLA (File→Publish). To configure properties of both files, use the Publish Settings dialog (File→Publish Settings).

Publish Settings: Format

The Publish Settings dialog is a file -specific set of properties divided into segments based on which assets you want to publish. By default, the Flash and HTML options are enabled ( Figure 14.1, “Determining which file types to publish in the Formats section of Publish Settings”), and as you select additional publish options, additional sections become active.

Figure 14.1. Determining which file types to publish in the Formats section of Publish Settings

Determining which file 
 types to publish in the Formats section of Publish Settings

The GIF, JPG, and PNG options publish the first frame of the movie in their respective formats, with GIF supporting the added option of publishing animations as animated GIFs. The Windows and Macintosh Projector options publish an operating system-specific executable, which adds the player code to your SWF so the application is self-sufficient.

Note

Although you can publish both Windows and Macintosh executables on either platform, the resulting application will only run on the targeted operating system.

To deliver your project across the Web, however, you typically need to enable the Flash and HTML options. Exceptions to this rule include situations where only the SWF file is required, such as when integrating your SWF into an existing HTML page or uploading to an online content management system (CMS) that is already responsible for generating the HTML host files. The next two sections cover both SWF and HTML generation, and you can apply what is needed to your work on a project-by-project basis.

Regardless of which formats you choose to publish, you can use default names when creating the files (which use the name of the FLA as base file names) or create custom names for any format. In both cases, you can also specify a path for the asset by clicking the folder icon to the right of the name field.

Publish Settings: Flash

The Flash section of the Publish Settings dialog (Figure 14.2, “Flash publish settings”) provides instructions to the Flash compiler that are used when creating SWFs. It's in this section that you target the minimum version of Flash Player required to run your SWF, set file-wide image and sound compression values, manipulate security settings, and more.

In general, you can use the default settings for SWF export. When changes are needed, the most common areas of interest include image and sound compression and local playback security. These and other options are explained in the following list.

General

Player

The Player setting specifies the minimum player version required to display your content. If no CS4-specific features are used, for example, you may be able to target Flash Player 9. If ActionScript 3.0 is not required, you may be able to target Flash Player 8, and so on. This is also where you target AIR as a platform to create AIR files.

Script

The Script setting specifies the version of ActionScript used in your FLA. Flash Player versions prior to 6 can parse ActionScript 1.0 only. Player versions 6 and later can parse ActionScript 2.0, and versions 9 and later can process ActionScript 3.0. AIR can use only ActionScript 3.0.

The Settings button for this option lets you configure ActionScript settings, which can include how strictly the compiler validates your code, whether or not to show warnings in addition to errors when testing, whether or not instance names added in the Properties inspector are automatically declared in your scripts, and more.

Figure 14.2. Flash publish settings

Flash publish settings

Images and Sounds

JPEG quality

The JPEG quality setting applies a global compression setting applicable to all bitmaps that do not have a custom compression defined on a per-bitmap basis in the Library Bitmap Properties options. See Chapter 4, IMPORTING GRAPHICS for more information.

Audio stream/event

These settings allow you to dictate the compression settings for stream and event sounds. If you use the Override sound settings option, you can override the per-sound compression values applied in the Library's sound properties options. See Chapter 11, TEXT for more information.

SWF Settings

Compress movie

The Compress movie option applies additional compression to your SWF file during compiling and should be used for all player versions 6 and later. It has the greatest impact on text- and script-heavy files.

Include hidden layers

The Include hidden layers feature, by default, includes layers hidden in the Timeline panel when compiling a SWF. However, with this feature disabled, you can selectively, even temporarily, prevent layers from being included in the SWF. For example, you could temporarily prevent sound layers from being compiled, saving time during development.

Include XMP metadata

The Include XMP metadata option can include an extensive amount of metadata in the SWF, readable by Adobe Bridge and other XMP-aware applications. The File Info button lets you add descriptive information about the file as a whole (title, author, rating, and so on), video and sound information, mobile playback data, and lots, lots more.

Export SWC

The Export SWC option lets you compile a protected file that is typically used for distributing components or script libraries.

Advanced

Generate size report

The Generate size report option exports a comprehensive text file detailing the size of the data contained in your SWF. It is broken down by frame number, scene, symbol, asset type, external file, data type, and more. Reading this text file can help you identify unnecessarily large assets ripe for optimization.

Protect from import

Enabling the Protect from import option prevents unauthorized users from importing graphic assets from your SWF. Use this feature carefully because it will also prevent you from importing your SWF. See "Password," later in this list .

Omit trace actions

A helpful ActionScript debugging technique is to trace text into the Output panel during authoring. Common uses include tracing the values of variables and references to objects so you can determine if your scripts are functioning properly. As a last step before distribution, you can use the Omit trace actions option to prevent others from discovering your traces in the wild.

Permit debugging

Enabling the Permit debugging feature allows the Flash Debugger to debug SWF files from a remote location like a server. This is an intermediate to advanced skill that is reserved for ActionScript debugging and requires use of the debug version of the Flash Player. See the next entry, "Password," for more information.

Password

To prevent unauthorized use of the debugger or unauthorized SWF import, you can add a password to your file. In this case, a valid password must be entered when attempting to debug or import a protected SWF; otherwise the process will fail.

Local playback security

As a security safeguard, your Flash file cannot access both local files from your hard drive and files or locations on the Internet. The Local playback security option lets you pick which of these realms will contain your file. In general, Access network only is the option of choice when uploading your files to a server.

Hardware acceleration

For processor-intensive projects you can take advantage of Hardware acceleration . Two options are available. Direct lets Flash Player draw directly to the screen instead of letting the browser handle the display. GPU uses the graphics card to handle video playback and compositing.

Script time limit

As a preventive measure, Flash Player will allow viewers of your SWF to abort scripts that take too long to run. This prevents crashes due to programming problems like circular logic and endless loops.

Publish Settings: HTML

The HTML section of the Publish Settings dialog (Figure 14.3, “HTML publish settings”) creates an HTML host file that will contain your SWF and display it when users visit your site with a web browser. This is where you add Flash Player vers ion detection, set the size of the SWF display, and more.

In general, you can use the default settings for HTML export. When changes are needed, the most common adjustments are to scale your SWF when resizing the browser and enable full-screen mode. These and other options are explained in the following list.

Figure 14.3. HTML publish settings

HTML publish settings

Template

Template lets you choose from precreated HTML templates that enable or support Flash Player options. Some templates include JavaScript support features like player version detection and communication between the SWF and learning management systems (LMSs), among other things. By and large the Flash Only option will serve you well. Another notable option is Flash Only – Allow Full Screen, which enables full-screen mode for SWF and video content.

When player version detect ion is needed, the major version, or the leading digit (such as Flash Player 10, or Flash Player 9) is dictated by t he version you specified in the Flash segment of the dialog. The minor version, or the dot release that follows the main player version (such as Flash Player 10.0.2), can then be typed into the field.

Dimensions

The Dimensions menu and the accompanying Width and Height fields allow you to specify the size of the Flash file and what happens when the browser is scaled. Option s include Match Movie (which disables the Width and Height fields and matches the Stage size of your SWF), Pixels (which enables the fields and lets you enter a desired size in pixels) and Percent (which enables the fields and lets you enter a size in percent form). The first two options will not scale the image, but specifying a percentage bases the size of the SWF on the size of the browser window and scales your SWF accordingly.

Playback

Playback options include pausing the movie at startup, looping playback, displaying a context-sensitive menu of Flash Player control options (like zoom, rewind, play, and so on) when you Control+click (Mac) or right-click (Windows) on the SWF, and the Windows-only feature of substituting device fonts (default serif and sans-serif fonts installed on your operating system).

Quality

Quality controls display features that improve quality at a cost to performance (such as antialiasing). Settings include Low (no antialiasing), Medium (some antialiasing, but no bitmap smoothing), High (always antialiased, but bitmap smoothing is dropped during animation), and Best (antialiasing and bitmap smoothing always on). Two other settings are also included. Auto Low starts in low quality, but changes to higher quality if the computer can accommodate the associated performance hit. Auto High starts in high quality, but changes to lower quality if the computer can't handle the features.

Window Mode

Window Mode controls how the Flash file can visually interact with the surrounding HTML. The default value, Window, renders an opaque background in the SWF and sets the HTML background color to that of the Stage. HTML content can't flow over or beneath the Flash content. Opaque Windowless sets the background of the SWF to opaque, but let s HTML content stack on top of or be eclipsed by the SWF. Transparent Windowless renders the SWF background as transparent, letting HTML appear in front of and behind the SWF.

Warning

Window Mode has long been one of the most error- or conflict-prone settings in Flash because it must coexist with a flurry of browser versions and features and the rendering quirks that come with them. If you are experiencing display problems within a browser, first set the Window Mode to Window and see if that improves or solves your problem.

HTML alignment

HTML alignment controls how the SWF display window is positioned within the HTML page, relative to other HTML elements on the page, such as text, images, and so on. The values include Default, Left , Right, Top, or Bottom. Default centers the content in the browser window and crops all four sides of content if the browser window is smaller than the SWF dimensions. The remaining options align the SWF along the specified edge of the browser window and crop the other three sides if the browser window becomes smaller than the SWF dimensions. See "Flash alignment," later in this list.

Note

The HTML alignment setting does not change the position of a SWF if it is the sole element on the HTML page. Like the align attribute of the HTML img tag, for example, it controls the relative positioning of the SWF in conjunction with other HTML assets. Consequently, this setting will not appear to have any effect until additional content is added to the HTML page or the generated SWF tags are integrated into another HTML document.

Scale

Scale controls how the SWF is scaled, if percentage is specified in the Dimensions setting. When the user changes the browser window size, the following settings apply. Default (Show All) shows the entire stage while maintaining aspect ratio. Borders may appear above and below, or at left and right, of your stage boundaries if the dimensions of the browser window do not match the aspect ratio of your stage. No Border also scales your SWF while maintaining aspect ratio, but doesn't allow borders to appear. As a result, the SWF display area in the HTML page may crop the SWF. Exact Fit matches the exact size of the SWF display area without preserving aspect ratio. Distortion will result if the browser window size doesn't match the aspect ratio of the SWF stage. Finally, No Scale prevents the SWF from scaling.

Flash alignment

In contrast to HTML alignment, which aligns the SWF display area within the HTML page, Flash alignment aligns the content within the SWF display area, cropping as needed. Horizontal options include Left, Center, and Right, and vertical options include Top, Center, and Bottom.

Show warning messages

This setting, which should remain enabled whenever possible, will turn on a message system that will warn you if there is a conflict in any settings you choose. For example, if you specify an HTML template that displays an alternate image upon failure to detect Flash, but you don't specify the creation of that file in the Formats section of the settings dialog, a warning will be displayed.

Deployment

Once you configure your Flash and HTML settings, you can publish your file using the button in the Publish Settings dialog or the File→Publish me nu option. Flash CS4 Professional will compile your SWF and create a corresponding host HTML page. These two files, along with any local external assets designed to load at runtime, must be collected for upload. After uploading the HTML, SWF, and external files to a server, you can point your browser to the a ddress of the HTML file and view your finished work.

Project Progress HTML

To prepare your portfolio project for deployment, you must configure the Flash and HTML publish settings and collect the assets folder containing your external files for runtime loading:

  1. Check to make sure your main portfolio FLA and the assets folder are in your main project directory.

  2. Open your main portfolio FLA.

  3. In the Flash publish settings, set the following options (omitted options are inconsequential):

    1. Player: Flash Player 10

    2. Script: ActionScript 3.0

    3. JPEG quality: 80

    4. Compress movie: on

    5. Include hidden layers: on (unless you specifically used this feature to your advantage to enable/disable features during testing—this was not a planned part of the project progress, so if you are unsure of your actions, enable this feature).

    6. Protect from import: on

    7. Omit trace actions: on

    8. Local playback security: Access network only

    9. Hardware Acceleration: None (feel free to experiment with this feature, but a setting of None is most compatible with all possible systems that may view your portfolio).

  4. In the HTML publish settings, set the following options:

    1. Template: Flash Only

    2. Detect Flash Version: on, testing for version 10.0.2

    3. Dimensions: Match Movie

    4. Playback: Loop and Display menu

    5. Quality: High

    6. Window Mode: Window

    7. HTML alignment: Default

    8. Scale: Default (Show All)

    9. Flash alignment: Horizontal Center and Vertical Center

  5. Click Publish to create the SWF and HTML files.

  6. Inside your main project directory, you should now find the following three items: the HTML and SWF files created in the publish process (most likely titled portfolio.html and portfolio.swf), and the assets directory, which contains the external files you plan to load at runtime.

  7. Upload these three items to your server. Do not upload the FLA file or any external files that were used during authoring (such as files that were imported into the FLA or compiled into the SWF).

  8. Compare your site with the online version found at the companion website ( Figure 14.4, “The finished Portfolio project viewed in a browser”).

    Figure 14.4. The finished Portfolio project viewed in a browser

    The finished Portfolio project viewed in a browser

Deploying for AIR

AIR is an application designed to expand the realm of rich Internet applications to include the desktop. For example, AIR is capable of delivering Flash SWFs, HTML, and JavaScript—technologies typically used for web development—in a desktop environment.

AIR applications consist primarily of two separate parts: a standalone player and a data file. AIR, itself, is a player that is installed on a user's computer just like any other program. It contains all the runtime code needed to play your project, but includes no file-specific data. Your project file is the opposite side of the equation. It contains all the file-specific information, but no runtime code. Your AIR application, as it is most often called, is essentially a mini-installer that installs the data portion of your project onto a user's hard drive. The installation process makes it appear, for simplicity and ease of use, as though your project is a standalone application. In reality, when you double-click your project file, the AIR player launches automatically and loads the data file.

Note

Users who don't have AIR installed, or who want the latest and greatest version, can find it at http://get.adobe.com/air/.

It's important to note that Adobe did not conceive AIR as a replacement for Flash projectors or as competition for third-party projector enhancers. As described, AIR doesn't create self-contained executable files complete with runtime code. Therefore, it can't practically serve as the primary executable on a disc-based project (CD-ROM or DVD-ROM) because users must have AIR installed on their computers for your application to operate.

AIR doesn't have as broad a feature set as some projector enhancers, such as Screentime's cross-platform mProjector. However, AIR does make it possible to deliver your Flash projects outside the confines of a web browser and with a level of professionalism previously unavailable directly from Flash. Best of all, it's free and integrated right into Flash.

Note

Another advantage of using AIR to deliver your project is that it is not subject to as many security restrictions as a SWF running in a browser. For example, AIR grants limited access to the local filesystem that is forbidden to browse r-bound SWFs.

Publish Settings

The first step in preparing a file for desktop delivery is to set the file's targeted player to AIR rather than Flash Player. As discussed previously in the the section called “Deploying for Web Browsers” section, the player version is set in the Flash section of the file's Publish Settings dialog (File→Publish Settings), shown in Figure 14.5, “The FLA's publish settings, setting Adobe AIR 1.5 as the target player”. In this case, however, instead of choosing a version of Flash Player (such as Flash Player 10, the default for a new FLA created in Flash CS4 Professional), choose Adobe AIR as your target player.

Note

Flash CS4 Professional ships with a publishing profile for Adobe AIR 1.1. However, at the time of this writing, an update that supports publishing to Adobe AIR 1.5 was available. To update your AIR publishing capabilities, visit http://www.adobe.com/support/flash/downloads.html and look for "Adobe AIR 1.5 Update for Flash CS4 Professional." Alternatively, consult the update options in Flash's Help menu or use Adobe Updater to check for any available updates.

Figure 14.5. The FLA's publish settings, setting Adobe AIR 1.5 as the target player

The FLA's publish settings, setting Adobe AIR 1.5 as the target player

When you set the player to Adobe AIR, a Settings button will become visible adjacent to the Player drop-down list. Click this button to compile your SWF and open the AIR Application and Installer Settings dialog shown in Figure 14.6, “AIR application and installer settings”. As its name implies, the dialog is divided into two main sections featuring settings pertinent to your application and to the AIR installation process.

Figure 14.6. AIR application and installer settings

AIR application and installer settings

Application settings

The application settings contain information about your project, as well as about how your file will be displayed.

File name

The File name is, literally, the name of the AIR file that users will see.

Name

The Name of your project will be displayed in the application menu, system Dock (Mac) or Start menu (Windows), and window title bar.

Version

You can optionally assign a Version number to an application to keep track of updates.

ID

The ID identifies your application to the AIR engine by a unique value. The default is com.adobe.example.<application name>, but you can change it if desired. The value must be 212 characters or fewer and contain only a–z, A–Z, 0–9, dot (.), and dash (–).

Description

The optional Description is a string describing your project. Users will see this in an installer window during the installation process.

Copyright

The optional Copyright allows you to specify a copyright string for your project.

Window style

The Window style setting dictates how the window will be rendered. None renders the window with no interface elements at all. System Chrome will render a standard rectangular operating system window with controls such as name bar, close, minimize, and so on. Custom Chrome (opaque) allows you to create your own window interface in the FLA. Custom Chrome (transparent) allows you to create your own window interface in the FLA, but makes the Stage transparent.

Note

If you choose not to use the System Chrome setting for the AIR window style, you will need to create your own custom controls for features such as dragging, minimizing, and similar functionality provided by the operating system.

Icon

The optional Icon feature lets you specify custom application icons as external files in four standard sizes (Figure 14.7, “AIR application icon images”).

Figure 14.7. AIR application icon images

AIRapplication icon images

Advanced

When you click the Advanced button, an additional dialog will open (Figure 14.8, “AIR application advanced settings” ). This dialog lets you specify advanced features, such as the initial size and position of the application window and where the application is installed.

Associated file types

The Associated file types feature allows you to specify which file types your AIR application handles. For example, FLA files are associated with the Flash application. You must specify the name and file extension of the file type, but you can also add a MIME type, description, and even file icons.

Initial window settings

You can use Initial window settings to specify the width, height, x location and y location of the window. You can also specify whether the window is initially visible, and if it's minimizable, maximizable, or resizeable along with its minimum and maximum width and height values.

Figure 14.8. AIR application advanced settings

AIR application advanced settings

Other settings

Other settings include the folder or directory into which your application should be installed (the folder will be created if it doesn't already exist), and into which Program menu (Windows only) your file should be added.

You can also dictate the use of a custom interface for handling updates. By default, AIR will display a standardized dialog that asks the user what to do when a new version of the application is launched. You can prevent this from happening and show your own custom interface to retain control over how an application handles updates.

Note

Creating custom update user interfaces is an intermediate to advanced skill. The companion website can point you to additional Help resources if this becomes a point of interest.

Use custom application descriptor file

In the middle of the Application and Installer Settings dialog is the Use custom application descriptor file option. This allows you to replace the manual completion of user interface elements in the AIR publish settings process with a preconfigured XML file. For more information about the structure of this file, see this book's companion website.

Installer settings

Installer settings specify how your application is bundled. These settings include the capability to add a digital signature to your application that, ideally, instills confidence in users during the installation process, and specifying which external assets are bundled with your application.

Digital signature

A Digital signature is a security certificate that you can purchase from a digital signing company that allows you to "sign" your applications with your identity. This identifies you or your firm as the publisher of the work during the installation process. This may give your users confidence that they are installing an application from a trusted source. See the upcoming the section called “Digital certificates” section for instructions for creating your own digital signature.

Note

The companion website has more information about digital signing options, including links to VeriSign, Thawte, GlobalSign, and ChosenSecurity, all of which sell digital signature certificates for Adobe AIR.

Destination

The Destination setting specifies where the AIR installer file will be saved when it is built.

Included files

The Included files feature lets you add external assets to an AIR bundle. This allows you to distribute one AIR file to your audience. For example, you will use this feature later in the the section called “Project Progress AIR” section of this chapter to add your portfolio's external assets to your AIR application.

Digital certificates

To sign your AIR application, you need to use or create a digital certificate. You must specify a digital certificate to build an AIR application.

In the Installer settings section of the Application and Installer settings dialog, click the Set button (which is named Change if the certificate has already been chosen) to the right of Digital signature. Doing so will open the dialog shown in Figure 14.9, “AIR digital signature settings”. You have the option of either using or creating a certificate, or creating an interim file to which you will later apply a certificate.

Figure 14.9. AIR digital signature settings

AIR digital signature settings

Sign the AIR file with a digital certificate

If you've already acquired a digital signature or want to create your own, you can choose to Sign the AIR file with a digital certificate. Click Browse to locate an existing certificate or click Create to use your own digital signature. If you want to do the latter, see the next section, the section called “ Creating a self-signed digital certificate”.

Either way, you must enter the password you used when acquiring or creating the signing certificate to authenticate its use. You can optionally remember the password for the current authoring session to prevent the need to enter the password each time you make a change.

The Timestamp option is also very important, and you should enable it whenever you have Internet access available. When you create an AIR application, the packaging tool checks to see if the signing certificate is valid when the installer is built. That timestamp is then embedded into the in staller.

When a user attempts to install the application, the installer looks for the timestamp. If found, as long as the certificate was valid at that time—even if the certificate has since expired—the installation can continue. On the other hand, if no timestamp is found, the installer will only work as long as the certificate is valid.

While it sounds like you would never proceed without a timestamp, the feature was made accessible to developers because it relies on an authentication server. Because you can disable the feature, you can still create an installer if the server is inaccess ible.

Note

While creating your own certificate is quick, free, and easy, be aware that the publisher of the work will be identified as unknown during the installation process. Though this is more common than you think, it still may give your users pause when installing your application.

Prepare an AIR Intermediate (AIRI) file that will be signed later

If you haven't yet acquired or don't wish to create a signing certificate during the development process, you can set up your publish settings to create an interim file. This will allow you to test your application in the authortime AIR preview application (called adl, for AIR Debug Launcher), but you will not be able to build an installer that users can run to install your application.

At any point, you can return to this setting and either load a signing certificate or create your own, after which you can build an installer.

Creating a self- signed digital certificate

Creating your own digital certificate is as easy as filling out a few simple form elements, shown in Figure 14.10,  220;Creating a self-signed digital certificate”. Fill out the Publisher name, Organization unit, Organiztion name, and Country, then enter and confirm a password. You can choose from four types and strengths of encryption when creating the certificate and specify where it will be saved.

Figure 14.10. Creating a self-signed digital certificate

Creating a self-signed digital certificate

When you create the certificate, the Publisher name appears in the installer as the developer of the application, and the password is used when selecting the certificate, as described earlier in the the section called “Digital certificates” section.

Deployment

After setting up the Adobe AIR publish settings in your document, each time you test your file, it will launch and run in the AIR Debug Launcher (adl). If you completed the digital signature process rather than choosing to create an AIR intermediate file, it will also build an AIR application.

The application is the lone file that you need to distribute to your audience. When users download and double-click this file, it will look for the AIR engine on the user's computer. If the AIR engine is found, it will run the application's built-in installer and prompt the user to install the file.

The first step in this process is to show the user the digital signature so he can determine if the file is trustworthy (Figure 14.11, “Seeking permission to install an AIR application”). The user can choose to abort or continue with the installation process.

Figure 14.11. Seeking permission to install an AIR application

Seeking permission to install an AIR application

If the user decides to continue, the installer will display a final dialog (Figure 14.12, “AIR installation complete”) that shows the name and description of the application and the preset installation location (which the user can change, if desired), and then offers to start the application after installation.

Figure 14.12. AIR installation complete

AIR installation complete

After the installation, the user can launch the application any time with the installed file, just like most desktop programs. Unless your project requires online access, the AIR application can function without relying on an Internet connection.

Project Progress AIR

Now it's time to apply what you've learned to the final Project Progress session of this book. To whet your appetite, you can see what you'll be creating in Figure 14.13, “The finished Portfolio Project running as an AIR application” . Additionally, all the screenshots in the AIR section of this chapter were taken from the project files, so you can reference them any time you like.

Figure 14.13. The finished Portfolio Project running as an AIR application

The finished Portfolio Project running as an AIR application

  1. Open your final portfolio FLA and access the publish settings (File→Publish Settings). In the Flash section, choose Adobe AIR from the Player menu and click the Settings button. Your file will compile and the Application and Installer Settings dialog will appear.

    Note

    If you are using Flash CS4 Professional without any updates, your player version will likely be Adobe AIR 1.1. If you installed the AIR update mentioned earlier in this chapter, the version will probably be Adobe AIR 1.5 or later.

  2. Under Application settings, enter Porfolio for File name and Name, enter 1.0 for Version, and enter com.adobe.example.Portfolio for ID. Continue by entering My Portfolio for Description, and enter the current year, company name, or other copyright notice for Copyright. Finally, select System Chrome for Window style. Verify your settings using Figure 14.6, “AIR application and installer settings”.

  3. Click the Settings button next to the Advanced option. In the Advanced Settings dialog, under Initial window settings, enter 750 for Width , 500 for Height, and 100 for X and Y. Enable Maximizable, Minimizable, and Visible, but not Resizable (this would allow the user to change the size and shape of the stage, revealing more of the viewing wheel and possibly other behind-the-scenes material) .

  4. Continue by entering MyName/Portfolio for the Install folder and, if using Windows, you may optionally enter a Program menu folder. Feel free to substitute your own name in the Install folder path, but know that you'll need to allow for this change when comparing to screenshots and searching for your installed application. Compare your results with Figure 14.8, “AIR application advanced settings” and close the Advanced Settings dialog.

  5. Back in the Application and Installer Settings dialog, under Installer settings, click the Set (or Change) button found next to the Digital signature option.

  6. In the Digital Signature dialog that opens, select the Sign the AIR file with a digital certificate option and click the Create button.

  7. In the Create Self-Signed Digital Certificate dialog that opens, match the chapter figures by entering My Name for Publisher name, Design for Organizational unit, My Company for Organization name, and US for Country. Feel free to substitute your own values, as long as you remember that the screenshots will differ.

  8. Continue by entering and confirming a password, and choose 1024-RSA for the encryption Type.

  9. In the Save as option, choose a location to save the certificate. Compare your settings with Figure 14.10, “Creating a self-signed digital certificate”. Finish with the Create Self-Signed Digital Certificate dialog by clicking OK.

  10. Returning to the Digital Signature dialog, enter the password you chose in step 8, and enable Timestamp. Compare your settings with Figure 14.9, “AIR digital signature settings” and click OK to close the dialog.

  11. Finally, back in the Application and Installer Settings dialog, choose a Destination for your AIR file.

  12. Continue by clicking the Add Folder icon in the Included files section. Add the assets folder in which you've been storing all your external assets. This will add the directory in the same relative location, allowing your portfolio project to find the external graphics, sound, video, and SWF used in the project. Compare your settings with Figure 14.6, “AIR application and installer settings”.

  13. You are now finished with the AIR settings. Click the Publish AIR File to create your AIR application and then dismiss the Application and Installation Settings dialog by clicking OK. Click OK again to close the main Publish Settings dialog.

    Note

    After configuring a FLA to publish as an AIR application, a shortcut to the AIR-specific settings will be visible in the File menu. Thereafter, you can use the File→AIR Settings menu command to alter any AIR settings.

  14. In the directory you specified in step 11, double-click the Portfolio.air file. Click through and compare the Application Install screens to Figure 14.11, “Seeking permission to install an AIR application” and Figure 14.12, “AIR installation complete” . After clicking Continue on the final screen, your application will launch.

  15. As the very last steps in the development of this project, check the install location you specified in step 4 (which is, by default, found in the Applications folder on the Mac and Program Files folder on Windows) to find the application launcher your AIR installer created. Hereafter, you can bypass the installer and simply double-click the launcher like any other application. The only time you'll likely need to reinstall is if you update your file and create a new version of the application.

    All that remains now is to distribute your files. Conveniently, you bundled everything up into your single Portfolio.air file, so all you need to do is zip it up and put it online for your legions of fans, clients, and supporters to download!

Note

AIR applications can also be installed directly from within a browser if you don't want to require your audience to be responsible for the installation. For more information, see the companion website.

What's Next?

Congratulations! Your project is complete. You've worked your way through a detailed, powerful application with great breadth and depth. You've touched an all the major features Flash CS4 Professional has to offer and developed a feature-rich portfolio application. What's next?

If you want to expand your knowledge and skill set beyond using Flash as a linear, timeline-based animation tool, your next step is to master ActionScript . ActionScript will add an entirely new dimension to your projects. Even some of the simplest uses of ActionScript—like runtime changes based on date and time, processing user input, and randomization—can add a degree of expressiveness and life to your projects that will never be matched by use of the Timeline.

With these features, however, comes a steeper learning curve. ActionScript 3.0 is a powerful, object-oriented programming (OOP) language that takes practice to master. Fortunately, Flash doesn't force you to use object-oriented techniques to benefit from ActionScript. Unlike Flex, or even many ActionScript editors that can be used in conjunction with Flash, Flash CS4 Professional lets you program with simple procedural techniques right in the timeline.

This book's companion text, Learning ActionScript 3.0: A Beginner's Guide (O'Reilly), has been written with this in mind. It introduces syntax and programming concepts in the timeline and slowly introduces OOP practices over the course of the book. Chapter 6, ACTIONSCRIPT BASICS of this book (which was excerpted in part from Learning ActionScript 3.0) introduced you to the basics of events and the display list. Now it's time to jump in and learn the rest of the language.

Even if you decide not to pursue learning ActionScript at this time, the skills you learned in timeline animation, component use, sound and video, 3D, inverse kinematics, text, and more will get you started down a road to Flash design and development. Just keep working and improving, and experiment every day!

If you enjoyed this excerpt, buy a copy of Learning Flash CS4 Professional.