Workflow Basics - Flash

No matter what the size or scope, every project in which you choose to participate should follow some type of workflow.Whether it’s for print, film, video, or Web delivery (or all four!), you should establish a process to guide the production of your presentation. Before we can explore the way in which Flash fits into a Web production workflow, we need to define a holistic approach to Web production in general. Figure below shows a typical Web production with an Internet production company.

There are two basic phases to Web production: preproduction (shown here as Phase I) and production (Phase II).

two basic phases to Web production: preproduction (shown here as Phase I) and production (Phase II).

Phase I: Establishing the concept and goals
As a Web developer or member of a creative team, you will be approached by companies (or representatives for other departments) to help solve a problem with a project. The problem may or may not be well defined by the parties coming to you. Phase I’s goal is to thoroughly define the problem, offer solutions for the problem, and approve one (or more) solutions for final production.

Defining the problem
Before you can help someone solve a problem, you need to determine what the problem is, and whether there is more than one problem. When we say “problem,” we don’t mean something that’s necessarily troublesome or irritating. Think of it more as a math problem, where you know what you want you’re just not sure how to get there. When you’re attempting to define a client’s problem, you should keep in mind the following:

  • What’s the message they want to deliver? Is it a product that they want to feature on an existing Web site?
  • Who’s their current audience?
  • Who’s their ideal audience? (Don’t let them say, “Everyone!”)
  • What branding materials (logos, colors, and identity) do they already have in place?
  • Who are their competitors? What do they know about their competitors?

The last question points to a bigger picture, one in which the client may already have several emotive keywords that define their brand. Try to define the emotional heart and feeling of their message get them to be descriptive. Don’t leave the meeting with the words “edgy” or “sexy” as the only descriptive terms for the message. You can also start to ask technical questions at this point:

  • What type of browser support do you want to have?
  • Do you have an idea of a Web technology (Shockwave, Flash, DHTML, SVG) that you want to use?
  • Does the message need to be delivered in a Web browser? Can it be in a downloadable application such as a standalone player? A CD-ROM? DVD?
  • What type of computer processing speed should be supported? What other types of hardware concerns might exist (for example, hi-fi audio)?
  • Of course, many clients and company reps will look to you for the technical answers. If this is the case, then the most important questions are:
  • Who’s your audience?
  • Who do you want to be your audience?

Your audience will determine, in many ways, what type of technology to choose for the presentation. If they say that ma and pa from a country farm should be able to view the Web site with no hassle, then you may need to consider a non-Flash presentation (such as HTML 3.0 or earlier), unless it’s packaged as a stand-alone player that’s installed with a CD-ROM (provided by the client to ma and pa).

However, if they say that their ideal audience is someone who has a 56KB modem and likes to watch mature cartoons, then you’re getting closer to a Flash-based presentation. If the client has any demographic information for its user base, then ask for it up front. It’s difficult to put on a show for a crowd if you don’t know who’s in the crowd.

Determine the project’s goals
The client or company rep came to you for a reason they want to walk away with a completed project. As you initially discuss the message and audience for the presentation, you also need to get a clear picture of what the client expects to get from you.

  • Will you be producing just one piece of a larger production?
  • Do they need you to host the Web site? Or do they already have a Web server and a staff to support it?
  • Do they expect you to market the presentation? If not, what resources are in place to advertise the message?
  • When does the client expect you to deliver proposals, concepts, and the finished piece?
  • Will they expect to receive copies of all the files you produce, including your source .FLA files?
  • What are the costs associated with developing a proposal? Will you do work on speculation of a potential project? Or will you be paid for your time to develop a concept pitch? (You should determine this before you walk into your initial meeting with the client.) Of course, if you’re working with a production team in a company, you’re already being paid a salary to provide a role within the company.

At this point, you’ll want to plan the next meeting with your client or company rep. Give them a realistic time frame for coming back to them with your ideas. This amount of time will vary from project to project, and will depend on your level of expertise with the materials involved with the presentation.

Creative exploration: Producing a solution
After you leave the meeting, you’ll go back to your design studio and start cranking out materials, right? Yes and no. Give yourself plenty of time to work with the client’s materials (what you gathered from the initial meeting). If your client sells shoes, read up on the shoe business. See what the client’s competitor is doing to promote their message visit their Web site, go to a store and compare the products, and read any consumer reports that you can find about your client’s products or services.

You should have clear understanding of your client’s market, and a clear picture of who your client is. After you (and other members of your creative team) have completed a round of research, sit down and discuss the findings. Start defining the project in terms of mood, response, and time. Is this a serious message? Do we want the viewer to laugh?

How quickly should this presentation happen? Sketch out any ideas you and any other member of the team may have. Create a chart that lists the emotional keywords for your presentation. At a certain point, you need to start developing some visual material that articulates the message to the audience. Of course, your initial audience will be the client.

You are preparing materials for them, not the consumer audience. We assume that you are creating a Flash-based Web site for your client. For any interactive presentation, you need to prepare the following:

  1. An organizational flowchart for the site
  2. A process flowchart for the experience
  3. A functional specification for the interface
  4. A prototype or a series of comps

An organizational flowchart is a simple document that describes the scope of a site or presentation. Other names for this type of chart are site chart, navigation flowchart, and layout flowchart. It will include the major sections of the presentation. For example, if you are creating a Flash movie for an animation site, you might have a main menu and four content areas: parody, slapstick, anime, and mature. In an organizational flowchart, this would look like below.

A sample organizational chart for an animation site.

A sample organizational chart for an animation site.

A process flowchart constructs the interactive experience of the presentation, and shows the decision-making process involved for each area of the site. There are few types of process charts. A basic process flowchart will display the decision-making of the end-user (for example, what type of options does a user have on any given page of the site?). Another type of flowchart will show the programming logic involved for the end-user process chart. For example, will certain conditions need to exist before a user can enter a certain area of the site? Does he/she have to pass a test, finish a section of a game, or enter a username and password? For a preliminary flowchart for the Shockwave Web site see below. We discuss the actual symbols of the flowchart later.

In this process chart, you can see that the user watches a teaser animation, which is followed by three linear animations of the characters for the site. After all the animations have finished playing, the user can decide which room to explore.

In this process chart, you can see that the user watches a teaser animation

A functional specification is a document that breaks down the elements for each step in the organizational and/or process flowchart. This is by far the most important piece of documentation that you can create for yourself and your team. Each page of a functional specification (or functional spec) will list all the assets used on a page (or Flash scene, keyframe, Movie Clip) and indicate the following information for each asset:

  • Item ID: This is part of the naming convention for your files and assets. It should be part of the filename, or Flash symbol and instance name. It should lso be used in organizational and process flowcharts.
  • Type: This part of the spec defines the name you are assigning to the asset, in more natural language, such as Home Button.
  • Purpose: You should be able to clearly explain why this element is part of the presentation. If you can’t, then you should consider omitting it from the project.
  • Format: This column will indicate what technology (or what component of the technology) will be utilized to accomplish the needs of the asset. In an all- Flash presentation, list the symbol type or timeline component (frames, scene, nested Movie Clips) necessary to accomplish the goals of the asset.

This functional spec displays the six components of a Flash-based navigation bar, which will appear on the main menu of our animation content site.

This functional spec displays the six components of a Flash-based navigation bar

Finally, once you have plan for your project, you’ll want to start creating some graphics to provide an atmosphere for the client presentation. Gather placement graphics (company logos, typefaces, photographs) or appropriate “temporary” resources for purposes of illustration. Construct one composition (or comp) site example, you might create a comp for the main page and a comp for one of the animation sections. Don’t create a comp for each animation section. You simply want to establish the feel for the content you will create for the client. We recommend that you use the tool(s) with which you feel most comfortable creating content. If you’re better at using FreeHand or Photoshop to create layouts, then use them. If you’re comfortable with Flash for assembling content, then use it.

Then, you’ll want to determine the time and human resources required for the entire project or concept. What role will you play in the production? Will you need to hire outside contractors to work on the presentation (for example, character animators, programmers, and so on)? Make sure you provide ample time to produce and thoroughly test the presentation. When you’ve determined the time and resources necessary, you’ll determine the costs involved. If this is an internal project for your company, then you won’t be concerned about cost so much as the time involved your company reps will want to know what it will cost the company to produce the piece. For large client projects, your client will probably expect a project rate not an hourly or weekly rate. Outline a time schedule with milestone dates, at which point you’ll present the client with updates on the progress of the project. It’s beyond the scope of this book to explore the workflow process any further. However, there are many excellent resources for project planning. One of the best books available for learning the process of planning interactive presentations is Nicholas Iuppa’s Designing Interactive Digital Media. We strongly recommend that you consult the Graphic Artists Guild Handbook of Pricing and Ethical Guidelines and the AIGA Professional Practices in Graphic Design, edited by Tad Crawford, for information on professional rates for design services.

Approving a final concept and budget
After you have prepared your design documents for the client, it’s time to have another meeting with the client (or company rep). Display your visual materials (color laser prints, inkjet mockups, and so on), and walk through the charts you have produced. In some situations, you may want to prepare more than one design concept. Always reinforce how the presentation addresses the client’s message and audience.

When all is said and done, discuss with the client the options that you presented. Gather feedback. Hopefully, the client prefers one concept (and its budget) and gives you the approval to proceed. It’s important that you leave this meeting knowing that:

  1. The client has signed off on the entire project or presentation.
  2. The client wants to see more exploration before committing to a final piece.

In either case, you shouldn’t walk away not knowing how you’ll proceed. If the client wants more time or more material before a commitment, negotiate the terms of your fees that are associated with further conceptual development.

Phase II: Producing, testing, and staging the presentation
Once your client or company executives have signed off on a presentation concept, it’s time to rock and roll! You’re ready to gather your materials, assemble the crew, and meet an insane production schedule. This section provides a brief overview of the steps you need to take to produce material that is ready to go “live” on your Web site.

Assembling assets
The first step is to gather (or start production of) the individual assets required for the Flash presentation. Depending on the resources you included in your functional spec and budget, you may need to hire a photographer, illustrator, animator, music composer (or all four!) to start work on the production. Or, if you perform any of these roles, then you’ll start creating rough drafts for the elements within the production. At this stage, you’ll also gather high-quality images from the client for their logos, proprietary material, and so on.

Making the Flash architecture
Of course, we’re assuming that you’re creating a Flash-based production. All the resources that you have gathered (or are working to create) in Step 1 will be assembled into the Flash movie(s) for the production. For large presentations or sites, you’ll likely make one master Flash movie that provides a skeleton architecture for the presentation, and use loadMovie() to bring in material for the appropriate sections of the site.

Before you begin Flash movie production, you should determine two important factors: frame size and frame rate. You don’t want to change either of these settings midway through your project. Any reductions in frame size will crop elements that weren’t located near the top-left portion of the Stage you will need to recompose most of the elements on the Stage if you used the entire Stage. Any changes in your frame rate will change the timing of any linear animation and/or sound synchronization that you have already produced.

Staging a local test environment
As soon as you start to author the Flash movies, you will create a local version of the presentation (or entire site) on your computer, or a networked drive that everyone on your team can access. The file and folder structure (including the naming conventions) will be consistent with the structure of the files and folders on the Web server. As you build each component of the site, you should begin to test the presentation with the target browsers (and Flash Player plug-in versions) for your audience.

HTML page production
Even if you’re creating an all-Flash Web site, you need a few basic HTML documents, including:

  • HTML frameset document (if you’re creating a scalable Flash movie). The frameset has two frames: One displays the Flash movie at 100 percent of the browser window size, and the other one is hidden.
  • A plug-in detection page, that directs visitors without the Flash Player plug-in to the Macromedia site to download the plug-in.
  • HTML page(s) to display any non-Flash material in the site within the browser. You will want to construct your basic HTML documents holding the main Flash movie as you develop the Flash architecture of the site.

Staging a server test environment
Before you can make your Flash content public, you will need to set up a Web server that is publicly accessible (with login and password protection) so that you can test the site functionality over a non-LAN connection. This also enables your client to preview the site remotely. Once quality assurance (QA) testing has finished (the next step that follows), then you will move the files from the staging server to the live Web server.

We have noticed problems with larger .SWF files that weren’t detected until we tested them from a staging server. Why? When you test your files locally, they’re loaded instantly into the browser. When you test your files from a server (even over a fast DSL or cable modem connection), you can test your .SWF files over slower network conditions. Especially with preloaders or loading sequences, timing glitches may be revealed during tests on the staging server.

Quality assurance testing
In larger corporate environments, you’ll find a team of individuals whose sole responsibility is to thoroughly test the quality of a nearly finished production (or product). If you are responsible for QA, then you should have an intimate knowledge of the process chart for the site. That way, you know how the site should function.

If a feature or function fails in the production, QA will report it to the creative production team. QA teams will test the production with the same hardware and conditions of the target audiences, accounting for variations in:

  • Computer type (PC versus Mac)
  • Computer speed (top-of-the-line processing speed versus minimal supported speeds, as determined by the target audiences)
  • Internet connection speeds (as determined by target audiences)
  • Flash Player plug-in versions (and any other plug-ins required by the production)
  • Browser application and version (as determined by target audiences)

If you are a freelance designer or operate a small company, then you should realize that there is no such thing as a useless computer recycle your older computers as test platforms for target audiences.After QA has finished rugged testing of the production, then, pending approval by the client (or company executives), the material is ready to go live on the site.

Maintenance and updates
After you’ve celebrated the finished production, your job’s not over yet. If you were contracted to build the site or presentation for a third party, then you may be expected to maintain and address usability issues provided by follow-ups with the client and any support staff they might have. Be sure to account for periodic maintenance and updates for the presentation in your initial budget proposal. If you don’t want to be responsible for updates, make sure you advise your clients ahead of time to avoid any potential conflicts after the production has finished.

You should have a thorough staging and testing environment for any updates you make to an all-Flash site, especially if you’re changing major assets or master architecture files. Repeat the same process of staging and testing with the QA team that you employed during original production.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics