Project panel tips and tricks

The Project panel contains a handful of subtle, yet powerful features to help you combine assets for your project. This section describes a few of the ways you can use the Project panel to build upon the concepts covered earlier in the article.

Converting a Flash CS3 project to Flash CS4 format

If you have previously used the Flash CS3 Project panel, you can still load your project in the Flash CS4 format.

To update a Flash CS3 project to Flash CS4 format:

1. Open the Project panel and choose Open from the Project Menu.
2. Browse for the folder containing the Flash CS3 FLP file.
3. Click OK to load the folder containing the FLP file as the Flash CS4 project folder.
4. Once this is completed, you can delete the FLP file if you like.

Note: An alternate approach involves opening the primary FLA file in the Flash CS3 project folder and then selecting the Quick Project option in the Project panel's Project Menu options.

Use ActionScript templates to add behaviors to your movie clips

The Project panel allows you to assign a custom class template to a standard class and a class bound to a symbol in the Library. Realistically, this feature is intended for general class templates that can be applied to a number of uses. However, you can also use this feature to swap templates easily and apply different predefined functionalities to different symbols.

To create and apply a template containing drag-and-drop functionality to a symbol:

1. Browse to the boundClass_as3.as file located in the templates folder in the Project panel.
2. Double-click the file to open it in Flash.
3. Select all the text and copy it to the Clipboard.
4. Click the New File icon in the Project panel and create a new ActionScript file named boundClassDrag_as3.as. The new file will open in Flash.

5. Update the template code to match the following code shown below:

   package %PACKAGE_NAME%
   {
      import flash.events.MouseEvent;
      import src.core.Component;
     
      /**
      *    Class creates a component.
      *
      *    @langversion ActionScript 3.0
      *   @playerversion Flash 9.0
      *   @tiptext
      */  
      public class %CLASS_NAME% extends Component
      {
         //*********************************
         // Properties:
        
         public var isDragging:Boolean = false;
        
         //*********************************
         // Initialization:
        
         public function %CLASS_NAME%():void
         {
            // Initialize...
            addEventListener(MouseEvent.MOUSE_DOWN,dragPressHandler);
            addEventListener(MouseEvent.MOUSE_UP,dragReleaseHandler);
         }
        
         //*********************************
         // Properties:
        
         private function dragPressHandler(event:MouseEvent):void
         {
            // Constrain drag to Stage area
            var rx:Number = 0;
            var ry:Number = 0;
            var rw:Number = stage.stageWidth - width;
            var rh:Number = stage.stageHeight - height;
            var rb:Rectangle = new Rectangle(rx, ry, rw, rh);
           
            // Start dragging...
            isDragging = true;
            startDrag(false, rb);
         }
        
         private function dragReleaseHandler(event:MouseEvent):void
         {
            if( isDragging ){
               isDragging = false;
              
               // Stop drag
               stopDrag();
            }
         }
      }
   }

6. Save the file.
7. From here you can assign the custom template to any project and use it to create a movie clip class that has drag-and-drop functionality built-in.

Note that this approach works well if you're planning on creating new classes for every symbol you assign the class to. If you want to assign a class to more than one symbol, then you'll have to manually assign the class to the Base class field in the symbol's properties.

Use JSFL to manipulate the Project panel

Flash JavaScript (JSFL) is an extensibility layer built into Flash CS4 that allows you to control the author-time environment using JavaScript. You can create JSFL commands as options in the Commands menu, as commands triggered by ActionScript in custom Window SWF panels, or as stand-alone scripts that cause the Flash IDE to respond when activated.

The Project panel is a Window SWF containing a JSFL API that you can use to extend the panels utility in the Flash workspace. You may find this feature useful if you want to create Commands related to the Project panel.

To create a JSFL file, follow these steps:

1. Click the New File icon on the Project panel and create a new JSFL file named helloworld.jsfl.
2. Enter Flash JavaScript code to manipulate the Flash workspace and the Project panel.
3. Save the file.
4. To run the file, select Commands > Run Command option while working in a FLA file. You can also copy the JSFL file to the Commands folder in your Flash CS4 Configuration folder. Doing so will install the command directly into the Commands menu.

Note: You'll need to download and install the latest update to the Flash CS4 Project panel to see the JSFL commands work. Assuming that you're using the latest files, you can use the following JSFL commands related to the Project panel:

createProject(uri:String, name:String, asVersion:Number)
 
// Point to an FLA or a directory
createQuickProject()
openProject(uri:String)
 
// Recent project list:
getRecentProjectList():Array
 
// Project settings (affect current project):
getName():String
setName(value:String)
getURI():String
setURI(value:String)
getASVersion():Number
setASVersion(value:Number) // value can be 2 or 3
 
getClassTemplate():String
setClassTemplate(uri:String)
getSymbolClassTemplate():String
setSymbolClassTemplate(uri:String)
 
runCompileList():Boolean
getCompileList():Array
addToCompileList(uri:String):Boolean
removeFromCompileList(uri:String):Boolean
 
getLocationNames():Array
getLocationURIs():Array
addLocation(uri:String, name:String)
removeLocation(uri:String):Boolean
 
getFlexSDKPath():String
setFlexSDKPath(value:String)
 
// for source, library, and external lib:
getLibraryPaths():Array
addLibraryPath(uir:String)
removeLibraryPath(uri:String);
 
getSourcePaths():Array
addSourcePath(uri:String)
removeSourcePath(uri:String)
 
getExternalLibraryPaths():Array
addExternalLibraryPath(uri:String)
removeExternalLibraryPath(uri:String)

Please see the Extending Adobe Flash CS4 Professional documentation for more information on using JSFL.

Use Adobe Flex code and external ActionScript libraries in your Flash project

The Project panel allows you to compile the Flex SDK and other external ActionScript libraries along with your Flash CS4 project. This opens up possibilities for manipulating Flex project files inside your Flash CS4 project. You can also use this feature to aggregate public ActionScript libraries that you obtain from Google, Yahoo!, and elsewhere.

To include the Flex SDK in your project, follow these steps:

1. Choose the Project properties option from the Options menu in the Project panel.

2. Click the Paths tab and then click on the folder icon next to the Flex SDK field to browse for the location of the Flex SDK on your computer (see Figure 11).

   

   Figure 11. Project properties settings pointing to a Flex project

3. Under the source tab, click the folder icon to browse for your Flex project folder or other folders containing ActionScript files. You can also select the Library tab to add SWC based code and assets libraries to the project.
4. Click OK to save the changes.

Note: You need to publish the project files using the Project panel in order to see the external code libraries compiled with the project.

Where to go from here

After following along with the steps outlined in this tutorial, you have the skills to create and manage projects and assets in Flash CS4. Even more exciting, you can now aggregate everything you need to develop organized projects quickly that include assets from multiple resources.

The next step in project planning is to define a directory structure and a systematic approach for organization that works best for you. Think about your long-term goals and develop a structure that facilitates your workflow to create future projects:

• What type of experience will you encounter when you return to a project you began long ago?
• Will it make sense?
• Can you leverage any of the reusable assets?

Spend some time thinking about it; it's usually worth the effort.

If you'd like to research further and extend the template, experiment with customizing the Photo Gallery to make it unique. Update it to suit your needs. Check out some of the ActionScript 3 tutorials available on the ActionScript Technology Center and try adding some new features of your own.

Page 4 of 4

Previous Page