• home
  • forum
  • my
  • kt
  • download
  • Organizing and structuring your Flash projects

    Author: 2007-06-14 19:41:39 From:

    You have just got an amazing idea for a new exciting flash game and you start coding and designing frantically. Suddenly you stop and you remember that you had to stop working on your last project because you could not understand your code anymore; worse, you could not locate most of it at all. Without even mentioning the fact that you had erased some precious graphics by mistake because of the random naming convention you always apply to your library assets. Right, time for a change...a new Flash developer is about to be born.

    Organizing your workspace

    Panels

    Are you happy with the layout of your workspace ? Why are you leaving those panels that you never use? Maybe it's time to move them or even to get rid of them.
    - you can drag the panel by its gripper gripper (on the left side of the title bar).
    - to add a panel to an existing panel group drag the panel by its gripper onto another panel. A black line appears next to the target panel to show where the panel will be placed.
    - to float a panel drag the panel by its gripper and move it away from other panels.
    - to close a panel, do one of the following: Select the desired panel from the Window menu. Right-click (Windows) or Control-click (Macintosh) the panel's title bar and select Close Panel Group from the context menu.

    In Adobe Flash, you can organize panels into groups
    (fig1). You can rearrange the order in which panels appear within panel groups. You can also create new panel groups and dock panels to existing panel groups. If you want a panel to appear on its own, separated from other panel groups, you can float the panel. This is particularly useful for panels that you want access to all the time, for example, the Help panel or the Actions panel.

    Flash panels fig1

    Once you are happy with the layout of your panels go to
    Window > Workspace Layout > Save Current. Enter a name for the layout and click OK.

    Timeline


    It is worth mentioning that you can change the size of frames in the Timeline
    (fig2), and add color to sequences of frames to highlight them. You can also include thumbnail previews of frame content in the Timeline (fig3). These thumbnails are useful as an overview of the animation, but they require extra screen space.

    Flash timeline Flash timeline
    fig2


    Flash timeline
    fig3

    Using the Flash project panel

    If you are not the only one who is going to work on a project it is well advised that you create a new Flash project before anything else (fig4)

    fig4

    Projects in Adobe Flash introduce a way for members on a team to work together on a single Flash application or project. A project file remembers each of the files it contains, and lets you incorporate some SourceSafe capabilities into your applications, which helps you keep backups of modified files.

    You can group multiple files into a single project file using the Project panel in Adobe Flash Professional 8 (fig5). This helps simplify application building, where managing related files could get complex and confusing. You can define a site for your work, create a Flash Project file (FLP), and then upload everything to the server so that a team can work on the project.

    Flash FLP (fig5)

    Version control lets you check files in and out of your repository, and check that only one person is working on a file at a certain time. Other benefits include the ability to revert to older versions of the files, so if your FLA file becomes corrupted or spontaneously stops working, you can revert to an older (working) version.

    Version control features help to ensure that you use the correct current files when authoring, and that certain files are not overwritten. When multiple authors work on the same project, you can check that only one person has the file checked out and, during that time, another person cannot overwrite the file.

    Before you start working on a file just right click on it and select Check Out
    (Fig6). The file is now readable only for your co-workers and they won't be able to edit it until you Check In (fig7). You will notice that a little paddlock icon appears next to your file when you have checked in (fig7).

    Check Out fig6 Chech In fig7

    Organizing assets on layers

    Organizing your layers and the assets on layers is very important if you (and especially your co-workers) want to be able to see where is what and what is where.

    Naming your layers

    When you create a new layer make sure you give it a proper name. Is that layer going to be used for sounds ? actionscript code ? graphics ? frame labels ? To give a name to a layer just double click on it (fig8)

    naming layers fig8

    You will notice on the picture above that the top layer is named actionscript. A lot of Adobe Flash developers generally use the top layer to write their code. You can name it "scripts" or "my scripts" or whatever it doesn't really matter, but it's best to keep it at the top for convention reason.

    Creating layer folders

    You can even organize your layers in folders, this is very convenient in some cases. Let's say you are animating a character with a head, arms, legs, feets etc. In that case you could have a folder named "my Character" with all the body parts inside that folder
    (fig9). The beauty of creating folders is that you can close them :) (fig10) therefore it's a winning key if you are trying to organize your Flash work.

    layers in folder fig9 layers in folder fig10

    To Insert a layer folder just click on the little icon Add layer at the bottom left of the timeline.


    Organizing assets in the library


    You have to choose a co-worker based on the state of their library when they work on a Flash project, which one would you choose ? the left one or the right one ?

    assets in library organized library

    There are two important rules to organize your assets in your library : give a descriptive name to all of them and group them by folders

    To create a library folder just click on the little icon Add layer at the bottom left of your library.

    Sometimes you might want to clean up your library from the assets that are not used in your project. You can do that by opening the Library menu (click on the top right of the Library panel) and click on Select Unused Items, all assets that are not used on the stage or dynamically used (using attachMovie) will be selected. You can then delete them safely.

    Cleaning your library won't make your published file smaller because in any case just the assets used in the file will be compiled in the SWF. Cleaning your Library is just useful from an authoring point of view.

    Be aware that all assets that you are planning to attach dynamically need to have identifier name in the Linkage properties in order for them to be kept out of the unused items list. If they don't have one they will be automatically selected and you might delete them by mistake.

    Organizing your code

    Centralize your code

    If you have ever had to edit a Flash file that was created by somebody else you might have realised that sometimes it can turn into a real nightmare. Because actionscript can be attached to movie clips it can get really tricky to locate every bit of code. Therefore it is strongly advised that you should keep your code on the top layer in the first frame as far as it is possible depending on your project.

    For example, Instead of attaching the following code to a Movie clip called myButton :

    onClipEvent(load){
    this.onPress = function(){
    // doSomething
    }
    }


    it is best to put the following code on the first frame of the top layer.

    myButton.onPress = function(){
    // doSomething
    }


    It's best to go for the second option because if someone else edits your file he won't have to look for every Movie clip and select them to see if there is code attached to them.

    Keeping your code external can be a good option

    Sometimes you need to reuse some bits of code across different projects, in that case it could be a good choice to keep your code in external .as files and to include it in your actionscrit using the #include directive, for example :

    #include "myScript"


    Do not place a semicolon (;) at the end of the line that contains the #include directive or you will end up with a " Malformed #include directive" error.

    Keeping the code external as much as possible will make it more readable and it is easier to update a little module than to scroll through 2000 lines of code.

    Comment your code

    It is a good practise to comment your code, not just for others but even for you. It will make it a lot easier to spot the different modules and functions and the interaction between them.

    If, despite the above advice, you end up with a messy Flash file all is not lost. You can use the Movie explorer (fig11) to explore the file and search for buried actionscript, text, movie clips, sounds etc...

    Movie explorer fig11

    Select the type of assets you want to display in the Show menu then type what you are looking for in the Find box. You might sometimes discover some hidden treasures, who knows :)

    Hopefully this article will help you to get a bit more organized or comfort you that you are on the right path :)

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (21)
      Web Design (22)

    New

    Hot