Learn Flash Tutorials: 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 lesson:
  • Publishing to the Web and CD
  • Customizing Publish Settings
  • Creating a standalone, full-screen projector
  • Exporting to video

Publishing for the Desktop with Adobe AIR

With all the capabilities Flash has to offer when it comes to building rich Internet applications, it seems natural that it has evolved to become a great tool for building desktop applications, as well.

The Adobe AIR runtime makes it possible to deploy your Flash movies as full-blown desktop applications in a few clicks from your Publish Settings dialog box. Your movies will behave exactly as they do in a browser, and with a bit of ActionScript you can extend their capabilities to interact with the user’s operating system, work with local files, and connect to outside services to get data.

The Adobe AIR runtime, much like the Flash Player, is available as a free download from the Adobe web site, and is a quick install for most users. Best of all, AIR applications are cross-platform, so there’s no need to create separate installers for Windows vs. Mac OS platforms. One installer package can handle both.

Before you begin the next exercise, make sure you download and install the Adobe AIR runtime at http://www.adobe.com/products/air/.

  • Note
    You can also publish AIR applications from other applications in the Adobe Creative Suite. For example, Dreamweaver CS5 enables you to publish web sites, including HTML, CSS and Javascript files, as AIR applications too.

1 Open the WeatherMate_start.fla file from the fl14lessons folder. This file contains the beginnings of a basic weather application widget. If you do not have the font used in this exercise, you may replace it with any other font on your computer. The exact font you use is not important for this exercise.

2 Choose File > Publish Settings to open the Publish Settings dialog box. Locate and click the Flash tab at the top to see Flash-specific publishing options.

3 From the Player drop-down menu at the top of the dialog box, select Adobe AIR 2, which will create the necessary file(s) to install your movie as an AIR application on your user’s computer.

4 Click the Settings button next to the Player drop-down menu to open the Application & Installer Settings dialog box. Here you can specify options for how your AIR application will be packaged and installed.

fl1504b.ai

The Application & Installer Settings dialog box

Once you’ve set AIR 2.0 as your targeted player, you can dial in additional options for how your new AIR application will appear and behave. At the time of publication of this book, the AIR 2.0 runtime is available as a prerelease (beta) version at adobe.com, and you will need to install it on your computer to perform the steps below.

There are several options within this dialog box that affect how your installer will be packaged, how it appears to the user, and also how the application behaves on the desktop. You’ll focus on the most essential ones for this exercise.

5 First, you’ll set the general options that determine your file and application name. In the Output file field, change the name of your output file to WeatherMate.air; make sure to include the .air extension. This will be the name of the installer file that’s created. If you’d like you can change the save location of the file using the folder icon to the right of the field, but for the sake of this lesson, we’ll leave the default save location which is the same folder as your original .fla file.

6 Under the File Name, App Name and Version, enter WeatherMate, WeatherMate, and 2.0, respectively. These specify the name of the application as your users will see it, and a version number to correspond with the specific release you’re offering. If you are not creating an official release, you can enter temporary information and set a default Version number. This is mostly to help your users identify your application.

7 Next, enter some descriptive text in the Description text field, and relevant copyright info in the Copyright text field. These are optional, so you can leave them blank if nothing comes to mind at the moment.

fl1504c.ai

Enter important information about your application such as its name,
description, and any relevant copyright information.

8 Next, you’ll set the Window Style, which determines how your application is framed, and how it appears on the desktop. The default option is System Chrome, which places a system window around your application. For this application, however, it would be pretty cool to have it be transparent and reveal the user’s desktop below, so choose the Custom Chrome (transparent) option instead.

9 Select the Signature tab at the top of the dialog box.

The digital signature of your application verifies its authenticity and provides a level of confidence to your end users/buyers. For commercial distribution, it’s recommended you purchase a digital certificate (see the sidebar “About Digital Certificates”). For now, you’ll continue the steps to create a self-signed certificate for this example.

10 Next to the Certificate drop-down menu, click the New or Create button, depending upon whether you are using Windows or Mac OS, to begin creating a self-signed certificate.

11 Fill in the text fields for Publisher Name, Organization Unit, Organization Name, and Country.

12 Create a password by entering it in the Password and Confirm Password text fields. You’ll be asked for this again later, when signing your application.

fl1504d.ai

Creating a self-signed certificate allows you to install and run your application
for testing or limited distribution.

13 In the Save As text field, enter a file name for your new certificate. For this example, type MyCertificate. Press OK to create the certificate and return to the Application & Installer Settings dialog box.

14 Enter the password you created for your certificate in the password text field, and press OK to exit the Application & Installer Settings dialog box.

15 In the Publish Settings dialog box, press the Publish button to create your .air installer file. If you are prompted for your password, please re-enter the password for the self-signed certificate you created in step 12. When the process is complete, press OK to exit the Publish Settings dialog box. Note that you may be prompted to enter the password for your new digital certificate again—do so and then click the Publish button once again, if necessary.

16 Choose File > Save to save your work, then close your document. If you return to the fl14lessons folder, you should see a series of new files created, including a file named WeatherMate.air.

About Digital Certificates

Digital certificates are used to verify the security and authenticity of a software application, and are commonly used for distribution of commercial and non-commercial applications. Depending upon your needs, you can purchase these certificates from vendors such as Thawte (http://www.thawte.com) and VeriSign (http://www.verisign.com).

While a self-signed certificate will work for testing and limited distribution, if you are considering making your AIR application available for sale, or wide distribution, a certificate can provide an extra level of confidence for your consumers.

Installing Your New AIR Application

Installing your new AIR application is an easy task, especially if you’ve already taken the time to install the Adobe AIR Runtime. Adobe AIR does the work for you, registering your new application on the system and making it available, just like any other application on your computer.

  • Note
    Make sure you have the Adobe AIR 2.0 runtime installed on your system. If you attempt to install an AIR 2.0 application on a system running an older version of AIR, you may receive an error message.
  • 1 From your Windows Explorer or Mac Finder, locate the WeatherMate.air installer file that you published to the fl14lessons folder.

    On Windows, if your extensions are hidden you may need look closely at each weathermate file and choose the Adobe Air application. If you are still unsure, select a file, right-click and choose Properties, then locate the type. You can double-click Adobe Air applications to open them.

    2 Double-click the installer file; this will open the Adobe AIR installer dialog box.

    3 The dialog box will confirm that you want to install the application. Press OK to begin installation.

    4 When the installation is complete, locate your new application under the Start menu (Windows) or the Applications folder (Mac OS), and launch it.

    You will notice that the WeatherMate application appears with no defined background or window; the desktop below, and only the application artwork itself shows. This is because you chose the Custom Chrome (Transparent) option in your publish settings in the previous exercise. Remember that a Flash movie is actually transparent, so the stage will not appear in this environment.

    CD-ROM delivery

    The web is not your only option for delivering your Flash content. If necessary, you can distribute it offline, as well as through CDs and DVDs, by creating projector files. A projector file is a standalone executable Flash document that can be downloaded or delivered on a CD or DVD. Projector files are often used to deliver games and presentations that are deployed locally on the viewer’s computer and not through the Internet. Because the Flash Player is included in the projector, users can display the Flash content without a web browser or the need to have the Flash Player installed.

    While Adobe AIR makes a better candidate for building desktop-centric applications, the projector option is still useful for specific cases where you don’t want to require the end user to download either the Flash Player or the Adobe AIR Runtime, such as widespread distribution on hard media like CDs, DVDs or flash drives.

    Creating a standalone projector

    Like publishing to the Web, the process of publishing an FLA file to a projector file starts in the Publish Settings panel. The difference is what you set in the Formats tab.

    1 Open the fl1402.fla file from the fl14lessons folder. This file contains the beginning stages of a game called Dodge ’Em that you will publish as an executable projector file.

    2 Choose File > Publish Settings.

    3 In the Formats tab of the Publish Settings panel, turn off the Flash and HTML checkboxes, if necessary. Turn on the checkbox next to Windows Projector (Windows) and/or Macintosh Projector (Mac OS), if necessary. Unlike Flash and HTML files, there are no editable options for the Projector format.

    fl1506.ai

    Deselect the Flash and HTML checkboxes and choose either Windows Projector
    or Macintosh Projector.

    • Note
      The File fields to the right of each output type allow you to specify a name for your file and an output location. By default, the output name and location are the same as that of your original Flash FLA file.

    4 Click the Publish button in the Publish Settings panel to produce a standalone Flash projector. Press OK.

    • Note
      If the Publish Settings panel is closed, you can publish a file by choosing File > Publish or pressing Shift+F12.

    5 Minimize Flash, and, from your desktop, navigate to the fl14lessons folder. Double-click on the fl1402.exe (Windows) or fl1402.app (Mac OS) file to launch it. Your operating system may be set to hide file extensions, so the .app or .exe extensions my be hidden. The Dodge ’Em game that you just published should open and play inside a window on your desktop. The window is the same size as the Stage was in Flash. Close the file and return to Flash.

    Previous | 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.