Adobe
Sign in My orders My Adobe

by Dan Carr

Dan Carr

Content

Modified

30 June 2011

Page tools

best practice Flash Builder Flash Professional mobile RIA workflow

Prerequisite knowledge

The steps in the tutorial are designed to get you up to speed on working with the Project panel, whether you're an experienced developer or brand new to Flash. Previous experience programming with ActionScript is required if you wish to extend the supplied templates beyond the scope of this article.

User level

Intermediate

Required products

Sample files

The best way to avoid web development projects that become disorganized, cluttered, and downright confusing is to take advantage of the project management tools available in your development environment. The Project panel in Adobe Flash Professional can help you manage your projects and publish multiple files within a single project. It's a great way to visualize your Flash projects and move quickly between files and folders as you work.

By using the Project panel and following best practices for asset organization, you'll be able to quickly launch and maintain projects—saving production time and making it easier to deliver the final product. The Project panel helps you do the following:

  • Create, manage, and visualize projects
  • Switch between project folders quickly
  • Open files for editing
  • Create files and folders
  • Test and publish project files to various formats
  • Bind external resources to your project
  • Use author-time shared assets across files in the project (new)
  • Open Adobe Flash Builder projects in Flash Professional (new)

The Project panel has been updated in Flash Professional CS5.5 to include better development workflows using shared assets and a standard project format, as well as to optimize integration with Adobe Flash Builder 4.5.

Follow this tutorial to create a slideshow sample project. You'll learn how to use the Project panel as you set up your project using shared assets and then publish the slideshow to three different platforms to deploy for web, desktop, and mobile (see Figure 1). Use the provided slideshow asset files to build the completed project.

slide-show-mobile-fig1 Click to interact with sample
Figure 1. Completed slideshow project for mobile (click to view the live example).

You'll learn the project development workflow and how to leverage the new author-time shared assets feature. Along the way, you'll become familiar with the structure of the FLA file as you build the project, so that you can edit the artwork assets. You can use the provided sample files to build and review a fully functional slideshow application, analyze the project structure and (if desired) update the template using your own image files to customize it.

Before you get started, you may find it helpful to read the section titled Create projects in the Flash Professional Help documentation and watch Improved project workflows on Adobe TV. To get a detailed overview of the improved Project panel, check out Tareq AlJaber's article, Sharing projects between Flash Professional and Flash Builder, which covers the details of working with Flash Professional CS5.5 and Flash Builder 4.5.

Analyzing the project assets and understanding the project workflow

Before you begin building the sample project, let's review the provided assets in the sample files folder to get an overview of the workflow you'll use to create and manage Flash projects.

Analyzing the slideshow assets

The supplied slideshow assets create a simple image viewer including a display area with transitions, a play button, a caption bar, back and forward buttons, and a full-screen button (see Figure 2).

Figure 2. Diagram of the elements in the slideshow user interface.
Figure 2. Diagram of the elements in the slideshow user interface.

The display area is the heart of the slideshow powered by the PhotoGallery component. The PhotoGallery is designed as a dynamic widget that loads a list of images from an external source. An XML file supplies the names and captions for the images, which allows you to change the list without updating the SWF file (see Figure 3).

Figure 3. Diagram of the photo gallery project structure.
Figure 3. Diagram of the photo gallery project structure.

The primary objective in this tutorial is to create variations of the supplied slideshow elements using a Flash project and the author-time shared assets feature.

Following the Flash project workflow

Building a Flash project is easy to do. You usually start by creating a project folder and a strategy for structuring files and folders within it. From there, you gather the artwork and assets you'll need before moving to Flash.

Here's an overview of the steps you'll follow in this tutorial:

  1. Download the supplied files.
  2. Set up the project in the Project panel.
  3. Define shared assets to use throughout the project.
  4. Create a new slideshow file using the shared assets.
  5. Change the color theme across shared assets.
  6. Create a new ActionScript file to add mobile functionality.
  7. Publish the project to web, desktop, and mobile formats.

The following sections describe each of these steps and walk you through the workflow.

Downloading the sample files

The provided sample files contain the slideshow assets as well as some sample images to work with. Use these files to follow the tutorial and jump right into building a Flash project.

Follow these steps to set up the sample files:

  1. Download the slideshow.zip file using the link at the beginning of the article.
  2. Unzip the archive and save the folder to your desktop (or some other convenient place on your hard drive).
  3. Open the folder and explore the contents.

Tip: If you plan on working with a lot of different projects for many different clients, it can be useful to create a "work" folder where you can store multiple project folders. Doing so makes your projects easy to find and you can use the Flash Player Global Security Settings panel to set the folder as a trusted location, which helps to avoid security errors during local development.

Setting up the project in the project panel

The easiest way to create a project is to create a quick project from a FLA file open in Flash. The FLA's folder becomes the project folder and the FLA becomes the default file selected for publishing.

Follow these steps to create your Flash project:

  1. Open the SlideShow.fla file from the supplied files in Flash Professional CS5.5.
  2. Open the Project panel (Window > Project).
  3. Choose the Quick Project option from the Projects menu at the top of the Project panel (see Figure 4).
Figure 4. The expanded Projects menu of the Project panel
Figure 4. The expanded Projects menu of the Project panel
Figure 5. The slideshow project assets.
Figure 5. The slideshow project assets.

That's it! You've created the Flash project. Take a moment to explore the project (see Figure 5). Notice that Flash automatically created the AuthortimeSharedAssets.fla file. You'll use this FLA to store shared assets in the next steps.

The project includes two folders along with the FLA files: assets and src. The assets folder contains the images and XML file which describes them. The src folder contains ActionScript script files which provide functionality to the slide show assets. For the purposes of this tutorial, you don't need to edit any of the code in the src folder, but you can browse and open the files using the Project panel if you're curious and want to learn how the code controls the behavior of the slideshow.

The default configuration of the Project panel doesn't display image file types in the view.

Follow these steps to add the JPEG file type filter:

  1. Click the Options button in the top right of the Project panel. Choose the Panel preferences option.
  2. Click the Settings tab in the Panel Preferences dialog box.
  3. Enter the jpg extension in the Change default filters field. Press the plus (+) button (see Figure 6).
Figure 6. Add the jpg file type filter to the panel preferences in the Settings tab.
Figure 6. Add the jpg file type filter to the panel preferences in the Settings tab.
  1. Notice that you change which file types and folders appear in the panel. Click OK when you are finished.

At this point, you can see all the project asset files listed in the Project panel.

Defining shared assets to use throughout the project

One of the improvements of the Flash CS5.5 Project panel is the ability to use author-time shared symbols across FLA files in the project. This opens up new work flows for defining common assets which update across files any time a change is made. In the next steps you'll convert the supplied files into shared assets which can be used to create slide shows of different sizes.

Follow these steps to convert the slide show assets to shared symbols:

  1. Open the SlideShow.fla file in Flash, if it's not already open.
  2. Open the Library panel to view the symbols which create the slideshow.
  3. Activate the author-time sharing feature by enabling the check box next to each symbol's name (see Figure 7). Check the following symbols:
    1. CaptionBar
    2. FullScreenBtn
    3. NextBtn
    4. PlayPauseBtn
    5. PrevBtn
    6. TimerDisplay
    7. FooterArea
    8. PhotoGallery
  4. Save the file.
  5. Open the AuthortimeShareAssets.fla file and explore its Library to confirm that the symbols have been copied for sharing.
Figure 7. The Library with the selected symbols enabled for authortime-sharing.
Figure 7. The Library with the selected symbols enabled for authortime-sharing.

At this point, you can use the shared assets to define any number of file variations.

Creating a new slideshow using the shared assets

Another new feature in Flash CS5.5 is the improved workflow for publishing Flash content to mobile and desktop formats. To understand how this works, you'll set up a slideshow to run in an AIR for Android FLA file.

Follow these steps to create the FLA:

  1. Click the New File button on the bottom right of the Project panel to launch the Create File dialog box.
  2. In the File name field, enter SlideShowMobile.fla.
  3. Switch the Player menu to AIR for Android (see Figure 8).
Figure 8. Set the player to AIR for Android in the Create File dialog box.
Figure 8. Set the player to AIR for Android in the Create File dialog box.
  1. Enable the Open file after creation option and click the Create File button.

Notice that the new FLA is added to the Project panel and opened in the Flash workspace. Choosing the AIR for Android option automatically configures the Stage size (480 x 800) and the player settings for the file.

Follow these steps to add the author-time shared assets:

  1. Open the SlideShow.fla file. Copy everything in the src folder in the Library.
  2. Return to the SlideShowMobile.fla file. Paste the symbols into the Library. Open the folders in the Library and notice that all the linked files were copied over along with the Font symbol (which is not a shareable asset).
  3. Name the default layer background. Drag a copy of the FooterArea asset to the Stage. Position the graphic along the lower edge and scale it to the width of the Stage (480 px).
  4. Create a new layer named buttons. Drag copies of the buttons to the Stage. Position the buttons along the background graphic. Name the button instances as follows:
    1. FullScreenBtn: fullScreen_btn
    2. NextBtn: next_btn
    3. PlayPauseBtn: playPause_btn
    4. PrevBtn: prev_btn
  1. Create a new layer named captions. Drag a copy of the CaptionBar asset to the Stage. Position it between the buttons and scale its width so that it doesn't obscure the other controls. Name the instance captions_mc.
  2. Create a new layer named display area. Drag a copy of the PhotoGallery symbol to the Stage. Position it at 0, 0. Scale its width to 320 px and its height to 440 px. Name the instance slideShow_mc.
  3. Create a new layer named timer display. Drag a copy of the TimerDsiplay symbol to the Stage. Position it just above the background graphic and scale its width to 320 px. Name the instance timer_mc.
  4. Run the Control > Test Movie command to check your layout (see Figure 9).
Figure 9. The SlideShowMobile.swf file with the added shared asset files.
Figure 9. The SlideShowMobile.swf file with the added shared asset files.

At this point, both the SlideShow.fla file and the SlideShowMobile.fla file are linked to the shared content in the AuthortimeSharedAssets.fla file.

Changing the color theme across shared assets

Author-time shared assets simplify the process of editing content that repeats across files. For example, if you create a series of banners that reuse common graphic elements, you can easily edit those common elements from a single file. When you update any file, all the other files linked to that shared symbol update automatically.

Follow these steps to change the colors of the controls across files:

  1. Return to the SlideShowMobile.fla file.
  2. Double-click any of the buttons or controls in the Library to enter their timeline in order to edit them. Change the colors of the graphics or add new images.
  3. Save the file.
  4. Return to the SlideShow.fla file or the AuthortimeSharedAssets.fla file and notice that the changes you made are copied over.

Tip: If you check the other FLA files and don't see the shared assets updates, you probably didn't save the edited file when you made the changes. Saving the file after edits is the operation that updates the linked files.

Creating a new ActionScript file to add mobile functionality

The Android file is intended for playback on a mobile device which uses touch and gesture events for user interaction instead of mouse events. That means you'll need to rework the ActionScript code in the sample files to accommodate the characteristics of the device. To do this, you'll create a new ActionScript file and assign it as the document class of the FLA.

You have two options at this point: You could use the Project panel to create an ActionScript file which you can edit in Flash Professional, or you can open the Flash project in Flash Builder and use the Flash Builder text editor to create and edit the file. The following sections describe both approaches.

Follow these steps to create an ActionScript file in Flash Professional:

  1. Click the Create Class button in the lower right of the Project panel to launch the Create Class dialog box.
  2. In the class field, enter SlideShowMobile.
  3. Click the Create Class button to create the file and open it for editing in the Flash workspace.

You'll add the ActionScript to the file in a moment, but first take a moment to review how you would create the file if you want to work with the project in Flash Builder.

Follow these steps to open the project in Flash Builder for editing:

  1. Open Flash Builder 4.5.
  2. Choose File > Import Flash Builder Project.
  3. In the Import Flash Builder Project dialog box, select the Project folder option and browse for the folder that contains your Flash project. Click the Finish button after selecting the folder.
  4. In the Choose Flex SDK Version dialog box, click OK to accept the default version of Flex. Notice that the SlideShow project appears in the Flash Builder Package Explorer panel.
  5. Right-click the project in the Package Explorer, and choose File > New > ActionScript class to launch the New ActionScript Class dialog box.
  6. Enter the name SlideShowMobile in the Name field. Click the Finish button to create the file.

Note: Flash Professional CS5.5 and Flash Builder 4.5 share the same project structure, enabling you to combine workflows more smoothly than before. This means that you can open a Flash Professional project in Flash Builder, and vice versa, interchangeably and seamlessly.

Whichever route and editor you prefer to use, the next step involves updating the file with the ActionScript code below and assigning it as the document class of the FLA file.

Follow these steps to complete the file:

  1. Delete the placeholder code in the new ActionScript file you just created.
  2. Copy and paste the following ActionScript code into the empty file:
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.display.StageDisplayState; import flash.events.Event; import flash.events.TransformGestureEvent; import flash.events.MouseEvent; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; import src.gallery.Photo; import src.gallery.PhotoGallery; public class SlideShowMobile extends MovieClip { //******************** // Properties: public var slideShowDataURL:String = "assets/images.xml"; public var slideShowDelay:uint = 6000; //******************** // Initialization: public function SlideShowMobile() { // Configure the Multitouch object for gesture input Multitouch.inputMode = MultitouchInputMode.GESTURE; // Configure slide show slideShow_mc.slideShowDelay = slideShowDelay; slideShow_mc.scaleMode = Photo.SCALEMODE_ZOOM; slideShow_mc.transition = slideShow_mc.transitions["iris"]; slideShow_mc.addEventListener(Event.COMPLETE, onDataLoaded); slideShow_mc.addEventListener(Event.CHANGE, onImageChanged); slideShow_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe); slideShow_mc.maxWidth = 480; slideShow_mc.maxHeight = 759; slideShow_mc.loadXML(slideShowDataURL); // Configure buttons playPause_btn.initialize(clickHandler, true, true); prev_btn.initialize(clickHandler, false); next_btn.initialize(clickHandler, false); fullScreen_btn.initialize(clickHandler, false); } //******************** // Events: protected function clickHandler(event:MouseEvent):void { // Route button clicks switch( event.target ) { case playPause_btn: if( slideShow_mc.isPlaying ) { timer_mc.stopTimer(); }else{ timer_mc.resetTimer(); } slideShow_mc.playSlideShow(!slideShow_mc.isPlaying); break; case prev_btn: slideShow_mc.back(); break; case next_btn: slideShow_mc.forward(); break; case fullScreen_btn: toggleFullScreen(); break; } } protected function onDataLoaded(event:Event):void { slideShow_mc.playSlideShow(true); } protected function onImageChanged(event:Event):void { var str:String = slideShow_mc.selectedPhoto.id+" of "+ slideShow_mc.selectedPhoto.total+": "+ slideShow_mc.selectedPhoto.caption; captions_mc.maxChars = 44; captions_mc.setText(str); if( slideShow_mc.isPlaying ){ timer_mc.startTimer(slideShowDelay); } } protected function onSwipe( event:TransformGestureEvent ):void { if( event.offsetX == 1 ){ // Swiped towards right slideShow_mc.forward(); } else if( event.offsetX == -1 ){ // Swiped towards left slideShow_mc.back(); } } //******************** // Methods: function toggleFullScreen():void { if( stage.displayState == StageDisplayState.NORMAL ){ stage.displayState = StageDisplayState.FULL_SCREEN; }else{ stage.displayState = StageDisplayState.NORMAL; } } } }
  1. Save the file.
  2. Return to SlideShowMobile.fla in Flash.
  3. Select an empty area of the stage so that you see the Document properties appear in the Properties panel. Enter the name of the ActionScript file (SlideShowMobile) in the Class field to associate the code with the FLA (see Figure 10).
  4. Save the file.
Figure 10. In the Document properties, the Class field displays the ActionScript file.
Figure 10. In the Document properties, the Class field displays the ActionScript file.

SlideShowMobile.as is configured slightly differently than the supplied SlideShow.as file. It includes additional code that responds to gesture swipes on a device. This allows you to swipe left to see the previous picture or swipe right to see the next picture in the slideshow.

At this point, your project is ready to publish.

Publishing the project to web, desktop, and mobile formats

You can publish one or more FLA files from the project at a time using the Test Project button on the Project panel. In the next steps you'll publish the original SlideShow.fla file for the web, convert its settings to publish it to the desktop, and set up the Android file to publish to mobile format.

Web format

To publish the SlideShow.fla to web format, open the SlideShow.fla file in Flash Professional and click the Test Project button in the Project panel. The SWF plays and the related HTML file is automatically added to the project.

Notice that the web published files include the SlideShow.html file, the SlideShow.swf file, and the files in the assets folder. To display the slideshow on the web, upload all of these files to a server.

Desktop format

Follow these steps to publish the SlideShow.fla to a desktop format:

  1. Open the SlideShow.fla file in Flash Professional.
  2. Choose File > Publish Settings to launch the Publish Settings dialog box.
  3. Change the Player field in the top right of the dialog box to AIR 2.6 (see Figure 11).
Figure 11. Change the player setting in the Publish Settings dialog box.
Figure 11. Change the player setting in the Publish Settings dialog box.
  1. Click OK to close the dialog box.
  2. Choose File > AIR 2.6 settings to launch the AIR settings dialog box.
  3. You'll use the default settings for this example, but you need to add the reference to the assets folder so that the images and XML file are bundled with the AIR installer. In the General tab, in the Included files section, click the Add Folder button. Browse to the assets folder in the project folder and click OK. The assets folder lists the included files.
  4. Click the Signature tab to add a self-signed certificate file. The certificate file is used to verify that the application is from a trusted developer. For development purposes, you can assign a temporary certificate by clicking on the Create button. In the Create Self-Signed Digital Certificate dialog box, fill in the fields as desired. All of the fields except the password are essentially ignored. Enter self-signed.p12 in the Save As field and click OK.
  5. Enable the Remember password for this session check box and click OK.
  6. Right-click the SlideShow.fla file in the Project panel and choose Publish Movie in the menu that appears. The AIR installer file is published to the project folder.
  7. Save your file.
  8. Double-click the SlideShow.air file and follow the installation prompts to test the slideshow as a desktop application.

Notice that the published files are encapsulated in the SlideShow.air file. This is an installer file which will install the slideshow as a desktop application for the user.

Mobile format

Follow these steps to publish the SlideShowMobile.fla file to a mobile format:

  1. Open the SlideShowMobile.fla file in Flash Professional.
  2. Choose File > AIR for Android Settings to launch the AIR for Android Settings dialog box.
  3. Under the General tab, set the render mode to GPU to optimize bitmap rendering in the slideshow. Add the assets folder to the Included files list the same way you did when publishing the desktop app.
  4. Click the Deployment tab. Browse for the self-signed certificate (self-signed.p12) you created in the previous steps. Enter your password and enable the Remember password for this session option.
  5. Click the Permissions tab. Select the Internet option to enable image loading from the Internet. Android applications require that you declare permissions for access to system functionality. Take a moment to explore the available options.
  6. Click OK.
  7. Right-click the SlideShowMobile.fla file in the Project panel and choose Publish Movie. Look in the project folder to locate the SlideShowMobile.apk file. If you want to see the file appear in the Project panel, you can enable this file type filter in the Project panel preferences under the Settings tab.

Notice that the published files are encapsulated in the SlideShowMobile.apk. This is an installer file that you can upload to the Android market.

Another exciting feature in Flash Professional CS5.5 is the ability to preview and debug Android applications on an Android device plugged into your computer via USB.

Follow these steps to preview the SlideShowMobile app on an Android device:

  1. Confirm that your phone or tablet is running the Android OS. Connect the device to your computer using a compatible USB cable.
  2. Turn on the device. Choose Settings > Applications > Development and select the USB Debugging option.
  3. In Flash, choose File > AIR for Android settings. The Settings dialog box launches. Click the Deployment tab and select Install application on the connected Android device. Then click the Launch application on the connected Android device option.
  4. Click the Publish button to publish the app to your device.
  5. At this point, you'll see the slideshow launch on your device. You can tap the buttons and view the slideshow. Use swipe gestures to interact with the app and move forward and back in the series of images. If a "Could not find an Android device" error occurs, it is likely that you need to install the driver for the device (Windows), or configure the device settings differently. If you get stuck, check out this TechNote for more information.
  6. Navigate to All Applications on your device and notice that the SlideShowMobile app has been installed.
  7. Return to Flash. Press OK to exit the Settings dialog box.
  8. Save your file.

To get more instructions on publishing for mobile, check out this Adobe TV video by Paul Trani demonstrating the Android publishing process: Publishing an AIR for Android app.

Packaging your application for Google Android, Apple iOS, or BlackBerry Tablet OS devices involves acquiring signing certificates and provisioning application packages for the various platforms. For more specifics, read the following tutorials (written for ActionScript and Flex developers but applicable to Flash Profesional developers as well):

Where to go from here

Practice using author-time shared assets and working with the Project panel to port a single application to multiple platforms. As a next step, try working with the iOS mobile platforms and the extended ActionScript APIs for touch and gesture devices.

See the following resources for more information on using the Project panel in Flash Professional CS5.5 and author-time shared assets:

Also check out the following links for details on working with AIR and mobile apps in Flash Professional:

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement