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 Starting up
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 fl04lessons folder in this lesson. Make sure that you have loaded the CS5lessons folder onto your hard drive from the supplied DVD or online.
ePub users go to
www.digitalclassroombooks.com/epub/cs5. 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 fl04lessons 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 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, and in the SWF Settings section, click to turn off theInclude hidden layerscheckbox. TheProtect 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.
Adjust your movie’s Publish settings.
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.
Drag the JPEG quality slider to 85.
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.
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.
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.
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.
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/.
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 fl04lessons 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.
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,
atadobe.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.
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.
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 fl04lessons 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.
1 From your Windows Explorer or Mac Finder, locate the WeatherMate.air installer file that you published to the fl04lessons 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. On the PC, 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 and then locate the type. You can double-click Adobe Air applications to open them
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 fl04lessons 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.