Using the Project Panel in Flash Professional 8


In this final section of the chapter, we'll show you how to use the Project panel in Flash Pro 8 using some sample files we provide on this book's CD-ROM. You'll jump right into the Project panel, so you may want to review some of the content in the Help panel of Flash 8 before proceeding. The Using Flash ð Working with Projects section in the Help panel (Help ð Flash Help) contains useful information about the Project panel.

Before you start using the Project panel, consider a scenario in which you would want to use the feature. The Project panel lets you organize and group all of the files related to a Flash production. You can include any file type you want in the Project panel. All of the asset names and locations are stored in a Flash Project file, which uses an .flp file extension. This file is essentially an .xml file that describes the files you want to manage.

Once you've created a Flash Project file, you can quickly open any document directly in Flash or another application. You can publish one or more Flash documents in the project. But more important, you can use the Project panel to directly upload content to your FTP server or a local network server. The Project panel can check in and check out files, so that other members on your team know that you're working on them.

The Project file is linked to a site definition in the Project panel. The site definition is exactly the same site you may have created in Macromedia Dreamweaver. If you've made a site in Dreamweaver, it's automatically available in Flash 8 as well.

One important factor to keep in mind when you use the Project panel is that you should only open a local copy of the project's files on your computer. In this way, everyone working on the project has his or her own copy of the files. One member of the team can be editing, implementing, and testing changes while other members are doing the same with their copies. When a member is done editing a file, she can check the file back into the server.

Caution 

Unless you're implementing a version control system with your project files, you should not edit the same file that another person is using. Currently, Flash Pro 8 only ships with support for Microsoft SourceSafe, a version control product. You can develop your own plug-in, though, for your particular version control product. Version control systems can merge changes to the same document. For example, if two people edit the same ActionScript document (.as file), the version control system merges the changes into one file and even flags potential conflicts during the process. The Project panel cannot perform this type of merge without the assistance of a separate software product such as SourceSafe. Also, it's important to note that version control software cannot merge changes in two Flash documents (.fla files) because such files are binary, not ASCII (or Unicode). Usually, version control systems can only merge text documents.

Here's a quick review of the procedures you follow:

  1. Establish a site definition in Flash Pro 8. This definition describes where you'll store your local copy of the project files, and where to upload the master copies of the project.

  2. Add the files to the Flash Project file in the Project panel of Flash Pro 8.

  3. Open, edit, and test one of the sample files.

  4. Create a new blank document to add to the project.

  5. Publish an entire project.

The headings that follow elaborate on these five steps, and include the step numbers for easy reference.

1. Establishing a Project and a Site

Before you can start making or editing documents in Flash Pro 8 for a project, you need to define a site that the Project panel can use. In this section, you learn how to define a site and establish a local mirror copy of your site's files on your machine.

  1. On your computer, choose a location that you can use to store all of the files with a project. For example, if you're on Windows, you can create a folder named Sites at the root of your C drive. If you're on a Mac, you can create a folder named Sites at the root of your startup drive, such as Macintosh HD.

  2. Inside of the Sites folder, copy the robertreinhardt.com folder from the ch03/starter_files folder located on this book's CD-ROM. As shown in Figure 3-5, the robertreinhardt.com folder has two subfolders, dev and prod.

    The dev folder, short for development, will contain any source files, specifications, planning documents, raw assets (images, video, and sound), and so on. The fla folder inside of the dev folder holds all Flash documents (.fla files) for the project.

    The prod folder, short for production, will contain any and all files that will be part of the final application, as a publicly accessible Web site or application. The prod folder has only one nested folder, wwwroot, for this example. The wwwroot folder holds the files that will be uploaded to the public root folder of your Web server. These files are also called runtime files, as they will run in the Flash Player and Web browser from the live Web site. All of the Flash movies (.swf files), runtime assets (JPEGs, MP3s, FLVs, and so on), and HTML documents will be kept here. The copy of wwwroot from the CD-ROM includes several subfolders to store external assets necessary for the Flash movie (.swf file) at run time.

    Tip 

    The prod folder can also contain other folders, such as a Flash Communication Server applications folder or a database folder, which holds other assets related to services available on your Web server.

  3. Now you're ready to create a Flash Project file to put into the project folder you created in the last step. Open Flash Professional 8. Choose Window ð Project (Shift+F8).

  4. Click the Create a new project link in the Project panel (shown in Figure 3-6).

  5. In the New Project dialog box, browse to the robertreinhardt.com folder on your computer. Save a new project file named reinhardt_site.flp in this location, as shown in Figure 3-7.

  6. With a project file created, you're ready to define a site in Flash Pro 8. In the Project panel, click the Version Control button, which features an icon of two arrows pointing in opposite directions. In this menu, choose the Edit Sites option, as shown in Figure 3-8.

  7. In the Edit Sites dialog box, you may see other sites already defined (as shown in Figure 3-9). If you use Macromedia Dreamweaver, you can use these sites, or create a new site for the project. For this example, create a new site by clicking the New button.

  8. In the Site Definition dialog box, specify a name for the site such as robertreinhardt.com. Most important, specify the path to the robertreinhardt.com/prod/wwwroot folder in the Local Root field, as shown in Figure 3-10. For the Email and Check Out Name fields, type your own information. In the Connection parameters, you must decide how you will connect to the testing (or live) server that will host the "master" copy of all project documents. You can use a location that's accessible via FTP, the local network, or a SourceSafe database. This location also stores the lock files (.lck files) necessary for members in your team to check in and check out documents. When you're finished specifying the connection details, you may want to click the Test button to make sure that Flash Pro 8 can connect to the location. Click OK to close the dialog box, and click the Done button in the Edit Sites dialog box.

    Note 

    The Connection parameters shown in Figure 3-10 are for demonstration purposes only. These parameters will not connect to an actual FTP site. If you use an FTP connection, make sure that the FTP Directory field specifies the path to the public HTML or Web folder for the site. The public Web folder of your server will vary depending on your server's operating system and Web server software. Also, with the dev and prod folder setup for this example, only the files in the wwwroot folder can be checked in and out. If you want to be able to check in and out files in the dev folder, you need to make sure that your local and remote folders have identical folder hierarchies.

  9. Now, you'll link the newly defined site to your reinhardt_site.flp project file. Right-click (or Control+click on Mac) the reinhardt_site file in the Project panel, and choose Settings. In the Project Settings dialog box, choose robertreinhardt.com in the Site menu. Refer to Figure 3-11. Click OK to close the dialog box.

image from book
Figure 3-5: The layout of folders for a site named robertreinhardt.com

image from book
Figure 3-6: The Project panel

image from book
Figure 3-7: The New Project dialog box

image from book
Figure 3-8: The Version Control menu

image from book
Figure 3-9: The Edit Sites dialog box

image from book
Figure 3-10: The Site Definition dialog box

image from book
Figure 3-11: The Project Settings dialog box

2. Adding Files to the Project

After you've created a Flash Project file and defined a site for the project, you're ready to start adding files to the project.

  1. Begin the process of re-creating the folder structure of the local site folders in the reinhardt_site.flp project file. In the Project panel, click the Add Folder icon at the lower-right corner of the panel. Name the first folder dev. Repeat this process until you have created all the folder names you had in the local robertreinhardt.com folder, including the subfolders. When you are finished, you should have the same folder structure shown in Figure 3-12.

    Caution 

    Unlike Macromedia Dreamweaver, the Flash Project panel does not automatically create a folder structure for the defined site. You must create each folder in the Project panel, and add individual files.

  2. Select the fla folder you created in the last step, and click the Add File button in the lower-right corner of the Project panel. Browse to the Sites ð robertreinhardt.com ð dev ð fla folder and select the bio_100.fla file located there. Repeat this process for all of the files contained in the robertreinhardt.com folder. Do not add the reinhardt_site.flp file itself. When you are finished, your Project panel should resemble Figure 3-13.

  3. It's highly likely that you'll have more than one Flash document (.fla file) in a project. As such, you should define the default document for the project. This file should be the master file, the one "most in charge" per se. This could be the Flash document that controls the loading of other runtime assets or the document that contains the most code. In the dev folder of the Project panel, right-click (or Control+click on the Mac) the bio_100.fla document and choose Make Default Document in the contextual menu. The icon of the document should change to a downward-pointing green arrow.

image from book
Figure 3-12: The folder structure of the site within the project file

image from book
Figure 3-13: The folder and document structure of the site within the project file

3. Committing and Editing Files in the Project

Once you have added files to your project, you should commit the files to your testing server. In this section, you learn how to commit project files and how to open and edit documents from the Project panel.

  1. When you are finished creating folders and adding files to your Flash Project file, you should check in the runtime files to your remote testing server. You can do this procedure only if you have defined a site for the project file. Choose the wwwroot folder in the Project panel. Right-click (or Ctrl+click on the Mac) the folder, and choose Check In. Flash Pro 8 then connects to your remote server and checks in the nested files and folders within the wwwroot folder. When the files and folders have been successfully checked in, a lock appears next to them (see Figure 3-14).

  2. When you're ready to edit a specific file in Flash Pro 8, right-click (or Control+click on the Mac) the file in the Project panel and choose Check Out in the contextual menu. Try this step with the bio.swf document. Once you have checked out this file, double-click its corresponding .fla file, bio_100.fla, to edit it in the Flash authoring environment.

    Note 

    When you have checked out a file, you'll see a green check mark next to the file icon. Other members of your team subscribed to the same project will see a lock next to the same file in their Project panels. If you don't check out the .swf file associated with a .fla file, you will not be able to publish or test the Flash movie (.swf file).

  3. With bio_100.fla open, take a look at how the bio.swf file (located in the wwwroot folder) is published. Choose File ð Publish Settings. In the Formats tab, notice that relative paths are declared for the bio.swf and index.html files (see Figure 3-15) in the Flash and HTML fields, respectively. The ../../prod/wwwroot/ prefix tells Flash 8 to publish these files two folders above the fla folder, inside of the prod/wwwroot folder. Click Cancel to close the dialog box. Leave bio_100.fla open for the next series of steps in the following section.

image from book
Figure 3-14: A file that is checked in displays a lock icon.

image from book
Figure 3-15: You can publish files with relative paths in the Formats tab.

4. Adding New Files to the Project

In this section, you learn how to create a new ActionScript document (.as) using code extracted from the bio_100.fla document. This ActionScript document will be added to the project file as well.

  1. From your desktop, browse to the location of the fla folder (for example, C:\Sites\ robertreinhardt.com\dev\fla). At this location, create a new folder named includes. This folder will be used to store ActionScript files.

    Note 

    If you're writing ActionScript 2.0 class files, you'd likely want to create separate folders in the fla folder to store them. The includes folder is specifically for .as files that are compiled into your Flash movie via the #include directive.

  2. In Flash Professional 8, add the same folder name (includes) as a child of the fla folder in the Project panel.

  3. From the Flash 8 main menu bar, choose File ð New. In the General tab of the New Document dialog box, choose ActionScript File and click OK. When the new document opens, save the empty file as functions.as in the includes folder you created in Step 1. Leave the functions.as document open.

  4. Go back to the bio_100.fla document. In the Timeline window, select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on Mac). Select lines 1–78 and press Ctrl+X or z+X to cut the code from the frame. Be sure to leave the init(); line of code in the actions list.

  5. Switch back to the functions.as document, and choose Edit ð Paste (Ctrl+V or z+V) to move the code into the document. Save and close the functions.as document.

  6. Now, add the functions.as document to the includes folder of the Project panel. Right-click (Control+click on the Mac) the includes folder and choose Add File. Browse to the includes folder on your local drive, and add the functions.as file.

    Caution 

    Changes to a Flash Project file are automatically saved. As such, be careful whenever you modify the project contents.

  7. Go back to the bio_100.fla document, and select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on Mac). Add the following line of code at the top of the Script pane (line 1), above the existing init(); line of code:

     #include "includes/functions.as" 

    This directive tells Flash 8 to insert the contents of the functions.as document at the time of publishing or testing.

    Tip 

    Notice that we don't include the functions.as file with the runtime files located within the wwwroot folder. Many beginner Flash designers and developers mistakenly think that .as files should be uploaded to a live Web server with the other runtime files of a Flash project. Any .as file you use with a Flash document is automatically compiled and included in the .swf file that references it.

  8. Save and close the bio_100.fla document.

5. Publishing the Entire Project

In this final section, you'll learn how to test an entire project, and upload the updated runtime files to your testing server.

  1. Before you can publish or test the project, you'll need to unlock the files that will be published by Flash: bio.swf and index.html. Check out these files in the wwwroot folder of the Project panel.

  2. Click the Test Project button in the lower-left corner of the Project panel. Flash Pro 8 will publish all of the Flash documents (.fla files) in the project file. In our example, there's only one .fla file, bio_100.fla. The newly published bio.swf file, located in the wwwroot folder, then opens in the Test Movie environment.

  3. If everything is working correctly, check in the bio.swf and index.html documents. If there was an error during testing, double-check the code added in the last section for syntax errors. The Output panel will likely provide clues about any errors associated with improper URLs for runtime assets.

On the CD-ROM 

You can find the final site files in the ch03/final_files folder of the Flash 8 Bible CD-ROM. If you try to open the reinhardt_site.flp document from the CD-ROM (or a copy of it), you'll likely need to relink the documents to the locations of the copies on your system.

Web Resource 

We'd like to know what you think about this chapter. Visit www.flashsupport.com/feedback to send us your comments.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net