Flash Design and Setup


Prototype Iteration

The first thing on the Vshift Flash team's agenda is to review the comments sent back from the MonkeyTongue designers regarding the prototype.

graphics/02fig03j.gif

The Flash team will now change the prototype colors and begin setting up the actual Flash movie that will contain the expense application.

Flash Application Setup

Flash application development can be a complex undertaking. Using Flash as an application user interface involves more considerations than using HTML. Because of this, Vshift tries to adhere to a certain methodology when creating applications in Flash. Here are some of the things the team is keeping in mind while working on the expense report application:

  • The team wants to separate major application states into a few sections across the timeline.

  • The sections will be separated by about four blank frames between them (to make the time frame a little less clumped together).

  • The timeline will have several layers on it, including Actions (all of the ActionScript for this section will be included here), Objects (all the objects for this section will be included here), and Background (this contains background graphics for the application).

  • Each section will be denoted by a frame label applied directly to the Actions layer on the initial frame of the section. The labels will indicate the movie's application state.

  • Major user-interface screens will be created on separate movie clips stored in the library (this is done to allow for the future use of these screens for a mobile application).

  • Movie clips should be organized in the library, by creating folders and subfolders to store related movie clips together.

  • Most of the application ActionScript will be located in the first frame of the main timeline's application state, though some actions will need to be placed on specific movie clips.

  • Including external ActionScript .as files for large chunks of code will allow for a cleaner code view, as well as facilitating editing by several developers at once.

NOTE Large teams should consider using included ActionScript .as files for all of their development efforts, since this will allow multiple developers to have access to the code without having the original .fla file open. The syntax for including an .as file is:

 #include"file_to_include.as"  
  • The file should only contain Flash ActionScript.

  • Each application state will require an ActionScript stop(); on it to ensure that the application waits at that state until the code moves the application into the next state.

  • ActionScript should be commented using either a one-line format:

     //Thisisaone-linecomment 

    Or by using a multiline format:

     /*Theseareallcommented lines.*/ 
  • Wherever possible, Flash-component instance names should use the standard suffixes. This will allow the ActionScript editor to show code hints as we use the components.

Some standard suffixes for Flash MX components are:

  • cb ComboBox

  • lb ListBox

  • pb PushButton

More component conventions can be found at Macromedia.com.

The team has decided on the following major application states for the expense application:

  • Load This will be a progress bar that shows the application loading.

  • Login This section will include the logic to check to see if the user is online or not, in addition to displaying the log-in form.

  • Anim This will be an animation that wipes the screen and makes it appear to the user that something is happening while he or she is being logged in.

  • User The major portion of the user application will be located here.

  • Admin The major portion of the admin application will be located here.

Also, based on what needs to be accomplished, the team thinks the following forms will be needed for the application:

  • Login The form will have the username and password fields as well as a submit button.

  • OldReports This will show either local reports (stored when the user is offline) or returned reports (from when an administrator denies the expense report).

  • DateRange This will take the expense report name, as well as show a calendar to select a date range.

  • ListReport This form will be duplicated for each day in the date range to have a list of expense items and a subtotal for each day.

  • ExpenseWizard This will show the corresponding form fields for the various expense types, and when completed it will add an expense item to ListReport.

  • Complete This will show the total price of the expense report as well as cancel and submit buttons.

  • Admin This will include the admin forms.

The team put together the initial Flash movie (Figure II-3.4) and stored it on the development network, allowing all developers to have access.

Figure II-3.4. The stage of the initial Flash movie shows an overview of everything in the expense report application.

graphics/02fig10.gif

Movie Clip Design

Now that the layout of the main Flash movie is set up, the Flash team is focusing on the design of the actual application states and forms that need to appear onscreen. The team agrees that this is an excellent time to include the MonkeyTongue design team in the process. Because the application forms will include many Flash MX form components, the Vshift Flash team has decided to have a teleconference to discuss form components with the MonkeyTongue designers.

graphics/02fig04k.gif

Figure II-3.5. The Macromedia Extension Manager interface is used to add new components to Flash MX.

graphics/02fig11.gif

Figure II-3.6. The Components panel in Flash MX shows the available components in Flash MX.

graphics/02fig12.gif



Reality Macromedia ColdFusion MX. Macromedia Flash MX Integration
Reality Macromedia ColdFusion MX: Macromedia Flash MX Integration
ISBN: 0321125150
EAN: 2147483647
Year: 2002
Pages: 114

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