Chapter 3. Planning Flash Projects

IN THIS CHAPTER

  • Knowing your workflow

  • Managing Flash content production

  • Creating a functional specification document

  • Using the Project panel in Flash CS5

One of the most important steps — if not the most important step — to producing great Flash content is knowing what steps you'll have to take to move from the concept or idea of the Flash movie to the finished product. This chapter explores the basics of Flash production and how to use the Project panel in Flash CS5 to organize your files. Whether you're a freelance Web consultant (or designer) or a member of a large creative or programming department, knowing how to manage the Flash content production will save you plenty of headaches, time, and money.

Workflow Basics

No matter what the size or scope, every project in which you choose to participate should follow some type of planned 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 you can explore the way in which Flash fits into a Web production workflow, I need to define a holistic approach to Web production in general. Figure 3.1 shows a typical example of the Web production process within an Internet production company.

Note

Web production processes have been generally derived from traditional software development processes. The methodologies for production discussed in this chapter all fit into a category known as the "waterfall model." In short, the waterfall model dictates that each phase of production is completed before the next phase is entered. One of the problems with the waterfall model is that the business client (usually) only sees the project working at the end of the production cycle.

In contrast, an "agile model" for production mandates a full production cycle on a smaller scale to be completed within one to four weeks, presenting a functional aspect of the project to the business client at the end of the iteration. It's beyond the scope of this book to discuss all the differences between a waterfall and agile approach, but you should make yourself familiar with these terms because they're becoming more widely used with Web production processes.

Two of the most common phases when generating Web content are preproduction and the actual production phase.

Figure 3.1. Two of the most common phases when generating Web content are preproduction and the actual production phase.

Note

The phases of production have been coined differently by various project managers and companies. Some interactive agencies refer to preproduction as an "architecture phase" or a "planning phase." Preproduction may also involve a "discovery phase," which is a span of time before the architecture phase wherein the requirements for a project are determined.

Phase I: Establishing the concept and goals

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

The next-to-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.

Information Architects and User Experience

You may have already been bombarded with the idea of information architecture. Information architecture is the method by which sought data is represented and structured. Good information architecture is usually equivalent to intuitive user interface design — visitors to a well-organized Web site won't spend much time searching for what they want. More recently, the term "user experience design" is also bandied about, to refer to intuitive and user-centric interface design, organizing menus, buttons, navigation controls, and so on around the practical use of a product.

I mention information architecture because the steps in Phase I are similar to the steps that traditional architects take to build a comprehensive design and production strategy before they start to build any structure. Although this may seem obvious enough, the sad fact remains that many Internet sites (or projects) are planned as they're constructed. Indeed, we're told that production must move at Internet speed; thus, directives may be given without thorough research into other solutions for a given problem.

Tip

Never go into a meeting or a planning session without a white board or a big pad of paper. Documenting everyone's ideas and letting the group see the discussion in a visual format is always a good idea. If all participants are willing, it's often useful to record the meeting with a digital voice recorder or video camera so that it can be reviewed outside of the meeting. There are also products on the market that enable you to record every detail of a meeting, such as Adobe Acrobat Connect, which enables you to conduct live meetings, as well as record them, over the Internet.

You can also start to ask the following 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; Dynamic HyperText Markup Language, or DHTML; Scalable Vector Graphics, or 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 stand-alone player? A CD-ROM? A 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 look to you for the technical answers. If this is the case, the most important questions are

  • Who's your audience?

  • Who do you want to be your audience?

Your audience determines, in many ways, what type of technology to choose for the presentation. If the client says that Ma and Pa from a country farm should be able to view the Web site with no hassle, you may need to consider using an older version of the Flash Player (such as Flash Player 8) or building a non-Flash presentation (such as HTML and CSS). If the client wants the text on the Web site well indexed by search engines, you may also need to consider building a non-Flash version of the content. However, if they say that their ideal audience is someone who has a 56K modem and likes to watch cartoons, then you're getting closer to a Flash-based presentation. If the client has any demographic information for their user base, ask for it upfront. Putting on a show for a crowd is difficult if you don't know who's in the crowd.

Determining the project's goals

The client or company reps come to you for a reason — they want to walk away with a completed and successful 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 need you to maintain the Web site after handoff?

  • 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? These important dates are often referred to as milestones. The payment schedule for a project is often linked to production milestones.

  • 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 reps. Give them a realistic timeframe 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 competitors are doing to promote their message — visit their Web sites, go to stores and compare the products, and read any consumer reports that you can find about your client's products or services. You should have a clear understanding of your client's market and a clear picture of how your client distinguishes their company or their product from their competitors'.

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 you 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. I assume here that you are creating a Flash-based Web site for your client. For any interactive presentation, you need to prepare the following:

  • An organizational flowchart for the site

  • A process flowchart for the experience

  • A functional specification for the interface

  • A prototype or a series of comps

Tip

You can use tools such as Microsoft Visio (http://office.microsoft.com/) or Omni Group's OmniGraffle for Mac (www.omnigroup.com/applications/omnigraffle). For more information on Visio 2007 Bible, published by Wiley, go to www.flashsupport.com/books/visio.

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, site map, navigation flowchart, and layout flowchart. It includes the major sections of the presentation. For example, if you're creating a Flash movie for a portfolio site, you might have a main menu and four content areas: About, Portfolio, Resumé, and Contact. In an organizational flowchart, this would look like Figure 3.2.

A sample organizational chart for a portfolio site

Figure 3.2. A sample organizational chart for a portfolio 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 a few types of process charts. A basic process flowchart displays the decisions an end user will make. For example, what type of options does a user have on any given page of the site? Another type of flowchart shows 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 or she have to pass a test, finish a section of a game, or enter a username and password? See Figure 3.3 for a preliminary flowchart for a section of my portfolio Web site. I discuss the actual symbols of the flowchart later in this chapter.

A functional specification (see Figure 3.4) 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.

The user watches an intro animation and is led through several short subsequent animations detailing each area of the portfolio. The user can then go to an area of his or her choice after this animation is complete.

Figure 3.3. The user watches an intro animation and is led through several short subsequent animations detailing each area of the portfolio. The user can then go to an area of his or her choice after this animation is complete.

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

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

Each page of a functional specification (functional spec, for short) lists all the assets used on a page (or Flash keyframe, Movie Clip) and indicates 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 also be used in organizational and process flowcharts.

  • Type: This part of the spec defines the name you're 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 indicates 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 element (frames, scene, nested Movie Clips) necessary to accomplish the goals of the asset.

Note

Functional specs come in all shapes and sizes. Each company usually has their own template or approach to constructing a functional spec. The client should always approve the functional spec so that you and your client have an agreement about the scope of the project.

Finally, after you have a 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, that represents each major section or theme of the site. In our portfolio content site example, you might create a comp for the main page and a comp for one of the portfolio work sections, such as Animation. Don't create a comp for each page of the portfolio section. You simply want to establish the feel for the content you will create for the client. I recommend that you use the tool(s) with which you feel most comfortable creating content. If you're better at using Illustrator or Photoshop to create layouts, then use that application. If you're comfortable with Flash for assembling content, then use it.

Warning

Do not use copyrighted material for final production use, unless you have secured the appropriate rights to use the material. However, while you're exploring creative concepts, use whatever materials you feel best illustrate your ideas. When you get approval for your concept, improve upon the materials that inspired you.

Then you 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 that 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, 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.

Exploring the details of the workflow process any further is beyond the scope of this book. 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 (Butterworth-Heinemann, 1998). I strongly recommend that you consult the Graphic Artists Guild Handbook of Pricing & Ethical Guidelines (Graphic Artists Guild, 2003) and the AIGA Professional Practices in Graphic Design: American Institute of Graphic Arts (Allworth Press, 1998), 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've 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 the options that you've presented with the client. 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 one of two things:

  • The client has signed off on the entire project or presentation.

  • 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.

Designing for Usability, by Scott Brown

As the author of this book mentions earlier in this chapter, the first step in developing a Flash site, or any other type of site, is to define the information architecture. In this tutorial, I show you how to define the goals and mission of the site.

Defining the goals and mission of the site

When you define the mission and goals for your project, you lay the foundation upon which to build it. To create a solid project foundation, you must begin by questioning everything, especially the company's business model. Start with these questions:

  • What is the mission or purpose of the organization?

  • Why does this organization want a Web site?

  • Will the Web site support the mission of the organization?

  • What are the short- and long-term goals of the Web site?

  • Who is the intended audience?

  • Why will people come to the site?

  • Is the organization trying to sell a product?

  • What is the product or products?

  • Do I have a unique service?

  • What makes the service different?

  • Why will people come to the site for the first time?

  • Will they ever come back?

  • Why would they come back?

The list of questions can go on forever. After you've gathered a list of questions, you need to get the answers. Ask around the organization, ask your friends, ask strangers, ask anyone. After you've collected the answers, filter through them to create a list of goals based on the responses. From this list of goals, you must further define the answer to the question, "Who is the audience?"

Defining the audience

The audience can be defined as the potential users of the site and their intentions or tasks when they come to your site. Are they kids or adults? Are they Generation X, Y, or Z? Are they into rave music or country music?

So, who is your audience? It's not an easy question because there are so many possibilities. Start with a list of all the possible audiences that the organization would like to reach, and then rearrange the list in a ranking order of most important audience to least important audience. From the audience-ranking list, create a list of the possible goals and needs each audience has.

Creating character scenarios

With the list of possible goals, take the process one step farther by creating scenarios for the users. Think of it as writing a screenplay for your Web site. Create multiple characters who represent the majority of the visitors, giving them hobbies, likes, dislikes, and, most important, a task to complete on the site. The object of the scenario game is to get into the characters' heads to learn why and how they would use your site. Approaching the design from their viewpoints makes it easier for you to create a list of the needs and wants of the characters, a wish list, if you will.

After you write the scenarios, the next step in the process is to gather the team together and analyze the Web sites of the competition.

Note from the author: Character scenarios are often referred to as use case scenarios.

Analyzing the competition

Studying the competition gives you the chance to generate a list of the kinds of features they are offering and to determine whether your feature list, the one that you created from the scenarios, is missing anything. If your wish list lacks anything in comparison to your competition, now is a good time to expand the user's functionality requirements and to return to the scenarios to determine whether the competition's functionality matches your characters' needs. If it does, you should try to elaborate on the competition's functions and create new functions of your own — the classic case of outdoing your competition.

Reaching a consensus on what good design is

At this time in the process, have the team come together to develop a definition of what is "good site design." This step is most beneficial for any contract designer trying to gain an understanding of the client's design viewpoint. To create this "good design" definition, the team should observe a good number of sites and document everybody's likes and dislikes for each one. This way, everyone on the team will have a better understanding of what to strive for and what to avoid.

Structuring the content

Now you should have several documents to refer to — the project mission statement, the user functionality needs (wish list), and the organization's definition of good design. With these three documents in hand, the next step is to blend them into one master menu of content inventory. Think of each item on this list as a building block. You now have all the blocks needed to construct the site. The only problem is that these blocks are in a big pile and lack organization (structure). Naturally, the next step is to begin creating layouts of the site, providing structure. But before you can begin the page layout process, you need to educate yourself on some Web site usability issues.

Identifying factors of usability

Usability is a much-debated concept, but generally it means creating a site/project/interface that is functional and that your audience understands. A useable site aims to be a natural extension of a user's expectations and needs. A user-friendly site tries to mirror its structure to that of the user's experience and goals. Just to make the task at hand a little more complex, keep in mind that user expectations learned in other areas of life affect how the user will think your site works. So, how can you design a site to meet your user's expectations? Well, if you did your homework on your audience and wrote the character scenarios, you should have a pretty good idea of the target audience's expectations. Given that you know the general background of the user, you could include metaphors in the structure of the site. Using metaphors is a great way to help users draw upon knowledge they already have, thereby making the site easier to use. Matching the site structure to the user's experience minimizes the amount of time it takes for the user to learn how to operate or navigate the site. The shorter the learning curve for the site, the better. If you come to a site when you have a specific goal in mind, and it takes you ten minutes to figure out how to achieve your goal, would you call that a positive experience? Most likely not!

Your goal as the designer is to create an attractive site without distracting users from their goals. Forcing users to spend a noticeable amount of time trying to learn how to achieve their goals is very taxing on their patience, and it is a good way to create a negative experience. If you're trying to sell something, chances are you want customers to be happy, not annoyed. One way to make your customers' experience more enjoyable is to make it as easy as possible. So, how do you create a positive experience? Let's start with the most basic of user needs: the ability to navigate.

Users need to know at all times where they are in the site, where they have been, and where they can go. When developing a navigation system, be sure to keep the navigation visually consistent. Inconsistency in the navigation can confuse and frustrate the user. A great concept for a navigational aid is the use of a breadcrumb trail. The breadcrumb system is a visual way to show users the path they took to get to their current position in the site. This navigational convention is used on many resource sites and even in the Flash authoring environment itself — as you click to edit grouped shapes or symbols, the steps you take appear as text labels on the bar above the Stage. Beyond displaying the path of the user, this system gives the user the ability to backtrack to any page displayed in the path. However, remember that navigation is not the goal of the user, only an aid. The user is there to find or buy something; the user is there for the content. So, make the content the first read on all of your pages. Navigational elements are there to support the content, not eclipse it.

Of course, navigation isn't the only factor to consider when designing for usability. Other variables, such as the length of text on a page, can affect the usability of a site tremendously. It's a fact that reading text on a monitor is far more taxing on the eyes than reading text on paper. Therefore, people are less inclined to read large amounts of text on the Web. As designers, we must accommodate these changes in reading patterns. Keep these simple guidelines in mind when writing text for the Web. Try to make the text scannable, because readers skim Web content. Bold the important ideas or put key information in bulleted lists. But most of all, keep the text short.

In addition to the treatment of text, there are several other tips to help improve the usability of a site. The concept of redundant links is an excellent method to support users with different backgrounds and goals. With redundant links, a user has more than one way to get to the desired content. The user may have the option to click a text link, a graphic link, or even a text link that is worded differently. Each redundant link should be designed to accommodate a wide range of users. So, where on the page should all these usability elements go?

I can't tell you where you should place your navigation system or your redundant links. However, I can provide you with some information from eye-tracking studies that will help you make an educated decision. Yes, it is true that usability researchers are able to actually monitor and record what you're looking at when you're viewing a Web site. Researchers have found that when a Web page loads, our eyes are looking at the center of the page, and then move over to the left, and then sometimes to the right. Of course, these findings are dependent on the user's cultural background. Nevertheless, the scary finding is that the users rarely look to the right! This is most likely because most sites use the right side of the page as a place to add sidebar elements, items of lesser importance. This is also a good example of how a user's experience can affect his or her future experiences. So, how does Flash fit into Web site usability considerations?

Flash is a great design tool to create amazing interfaces. Flash gives the designer the freedom to create almost anything he or she desires. But the flexibility Flash gives to the designer is also the tool's greatest weakness from a usability perspective. Flash is great for creating animation; however, inexperienced Web designers can easily go overboard. Just because you can animate an object doesn't mean that you should. The eye is very sensitive to the smallest amount of animation or movement in its peripheral view, pulling the viewers' attention away from the site's main content. On the plus side, animation used as a transitional element is very beneficial for the user. Animated transitions enable the user to follow the navigation process and gain a better understanding of how the site might work.

Similar to the problem of animation abuse, Flash enables the designers to create their own graphical user interface (GUI) elements. This is great for the designers, but users are often left out in the cold with all this newfound freedom. This design freedom forces the user to learn, almost from scratch, how to operate a scroll bar or a navigation bar. If you recall, I mention earlier the importance of a short learning curve for the users. The extreme creative versions of standardized GUI elements might rank high on the "cool" scale, but they really throw a monkey wrench into the user's goal and expectations. GUI standards are developed to help create a consistent experience across all platforms, thereby eliminating any unpleasant surprises. Again, these usability problems can be avoided in Flash if you understand the issues at hand and are able to find solutions based on the set standards.

Other usability issues with Flash arise from the actual plug-in nature of Flash. Unfortunately, because Flash requires a plug-in to work in Web browsers, Flash movies do not communicate with the browser's Back button or History by default. In order to add this functionality, you can use external ActionScript and JavaScript libraries like SWFAddress, which can be found at www.asual.com/swfaddress/

Building mockups of the site

You are now ready to begin mocking up the site structure by using index cards, sticky notes, and other common office supplies. Creating these paper mockups saves the development team a large amount of time. The beauty of the paper mockups is that you can quickly create a navigational system and find the major flaws without spending long hours developing a beautiful rendering of a structure that may be flawed. There is nothing worse than spending months developing a product with a faulty structure only to discover the mistake just before launch!

Testing the site on real users

Testing the site is the most important step in creating a useable site. The key to testing the site is not to test it on people in the organization, but to test it on people in the target audience. Test the site on the real users. It's usually easier to test the site by using people who are familiar with the project. The problem with that practice is that the people are familiar with the project. You want to test fresh eyes and minds in order to get optimum feedback. For testing purposes, create a list of several tasks to complete on the site. The tasks should be pulled from the list of possible users' goals defined in the early steps of the project. As the test subjects navigate through your project, pay close attention to how long it takes them. How many times did they have to click to find what they were looking for? How many had to resort to using a search feature (or wished that they could)? What elements seemed to cause confusion or delay? What elements attracted or held the users' attention? After each test subject has completed a task, or tried, give him or her a post-task questionnaire with questions such as:

"How would you rate the quality of the content on this site?"
Unacceptable –3 –2 –1 0 1 2 3 Excellent

Also, leave some room for the test subject to elaborate on the questions. After the testing is finished, review your findings and determine what needs to be fixed. After the problems are fixed, test the site again, but on new users. Repeat the process until you have a product that meets the defined goals of the organization and the users. Keep asking yourself this question: Is the interface helping the users accomplish their goals? When all else fails, you can always depend on the greatest guideline of the century: Keep it simple. Oh, how true.

Phase II: Producing, testing, and staging the presentation

When 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's 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, or music composer (or all four!) to start work on the production. Or, if you perform any of these roles, then you should start creating rough drafts for the elements within the production. At this stage, you can also gather high-quality images from the client for their logos, proprietary material, and so on.

Making the Flash architecture

Of course, I'm assuming that you're creating a Flash-based production. All the resources that you've gathered (or are working to create) in Phase 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 ActionScript 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'll need to recompose most of the elements on the Stage if you used the entire Stage. Any changes in your frame rate change the timing of any linear animation and/or sound synchronization that you've already produced.

Staging a local test environment

As soon as you start to author the Flash movies, you 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:

  • Plug-in detection with JavaScript that directs visitors without the Flash Player plug-in to the Adobe site to download the plug-in.

Note

For more info about detecting Flash using JavaScript, see Chapter 19.

  • HTML page(s) to display any non-Flash material in the site within the browser.

You should construct basic HTML documents to hold 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 need to set up a Web server that is publicly accessible (preferably 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. After quality assurance (QA) testing is complete (the next step that follows), you move the files from the staging server to the live Web server.

I've noticed problems with larger SWF files that weren't detected until I 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 (digital subscriber line) or cable modem connection, you have to wait for the SWF files to load over slower network conditions. Especially with preloaders or loading sequences, timing glitches may be revealed during tests on the staging server that were not apparent when you tested locally.

Tip

You should use the Simulate Download feature of the Bandwidth Profiler in the Test Movie environment of Flash CS5 to estimate how your Flash movies will load over a real Internet connection. See Chapter 18, "Publishing Flash Movies," for more discussion of this feature.

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're 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 reports it to the creative and/or programming teams. QA teams test the production with the same hardware and conditions as the target audience, accounting for variations in:

  • Computer type (Windows versus Mac)

  • Computer speed (top-of-the-line processing speed versus minimal supported speeds, as determined by the target audience)

  • Internet connection speeds (as determined by the target audience)

  • Flash Player plug-in versions (and any other plug-ins required by the production)

  • Browser application and version (as determined by the target audience)

Note

It's worthwhile to use an online reporting tool to post bugs during QA. Many companies use the open source (freeware) tool called Mantis, a PHP/MySQL solution. You can find more information about Mantis at www.mantisbt.org/. Another popular bug reporting tool is Bugzilla (www.bugzilla.org).

After QA has finished rugged testing of the production, 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 isn't over yet. If you were contracted to build the site or presentation for a third party, 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 project in your initial budget proposal. If you don't want to be responsible for updates, make sure that 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.

Note

You can find an online archived PDF version of Eric Jordan's tutorial, "Interface Design," on the book's Web site at www.flashsupport.com/archive. This tutorial was featured in Flash MX Bible (Wiley, 2002).

Using the Project Panel in Flash CS5

In this final section of the chapter, I show you how to use the Project panel in Flash CS5 by using some sample files provided on this book's CD-ROM. You jump right into the Project panel, so you may want to review some of the content in the Help pages of Flash CS5 before proceeding. The Using Flash

Using the Project Panel in Flash CS5

Note

The Project panel in Flash CS5 is completely different than the Project panel featured in the last three versions of the Flash authoring tool. The new Project panel is much easier to use than its predecessor, and you can set up project files with much less hassle.

Before you start using the Project panel, consider a scenario in which you would want to use the feature. The Project panel lets you access files related to a Flash production. You can include any file type you want in your project, and this is reflected in the Project panel. The panel essentially works as a modified file explorer, similar to Windows Explorer or the Finder (Mac), especially geared to Flash content. After you've created a Flash project, you can quickly open any document directly in Flash CS5 or another application. The project name is added as a new item in the drop-down menu at the top of the Project panel.

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, he or she can check the file back into the server.

Warning

Unless you're implementing a version control system with your project files, you need to make sure that two or more members of the team do not attempt to make edits to the same file simultaneously or make edits to a copy of a file. 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. 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 merge only text documents.

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

  1. Establish a new project structure with files and folders on your local system.

  2. Create a new project in Flash CS5. The primary setting for a new project is the location of your Flash files, where you'll store your local copy of the project files.

  3. Edit panel and project preferences to suit the needs of your project (optional).

  4. Open and edit a file in 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 structure

Before you can start making or editing documents in Flash CS5 for a project, you need to define a folder structure 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 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 folder located on this book's CD-ROM. As shown in Figure 3.5, the robertreinhardt.com folder has two subfolders, src and deploy.

The layout of folders for a site named robertreinhardt.com

Figure 3.5. The layout of folders for a site named robertreinhardt.com

Tip

In Mac OS X, you can turn on Personal Web Sharing in the Sharing preferences (Apple menu

The layout of folders for a site named robertreinhardt.com

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

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

2. Creating the project in Flash CS5

After you create the file and folder structure, you're ready to create a new Flash project in Flash CS5.

  1. Open Flash Professional CS4. Choose Window

    2. Creating the project in Flash CS5

  2. In the top drop-down menu, select New Project (shown in Figure 3.6).

    The Project panel

    Figure 3.6. The Project panel

  3. In the Create New Project dialog box, type a name for your project in the Project name field, such as robertreinhardt.com. Click the folder icon to the right of the Root folder field, and browse to the robertreinhardt.com folder on your computer. In the ActionScript Version menu, choose the version of ActionScript that you will use with your Flash project. For this example, ActionScript 3.0 (AS3) is used, so the ActionScript 3.0 option is selected. Review the example settings shown in Figure 3.7. Click the Create Project button to build a new project setting in Flash CS5.

    The Create New Project dialog box

    Figure 3.7. The Create New Project dialog box

  4. After the project is created, you can expand the folder nodes to see the documents that reside in the project. The Project panel automatically filters the file types shown in the folder nodes to include only those files commonly used in Flash production, such as .fla, .swf, and .as. When all the folder nodes are expanded (as shown in Figure 3.8), some files are not visible such as image, XML, HTML, and CSS files. In the next section, you learn how to modify preferences to add file extensions to the project's file filter.

    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. The published SWF file of the default document is the movie that is loaded into the Test Movie environment when you test a project. In the src/fla folder of the Project panel, right-click (or Control+click on the Mac) the Bio.fla document and choose Make Default Document in the context menu, as shown in Figure 3.9. The icon of the document should now include a gold star to indicate that it is the default document.

    The structure of the site within the Project panel, with default file extensions visible

    Figure 3.8. The structure of the site within the Project panel, with default file extensions visible

    The Make Default Document option in the context menu for a FLA file

    Figure 3.9. The Make Default Document option in the context menu for a FLA file

Tip

The check box to the right of a FLA file in the Project panel determines if the document is published when you click the Test Project button. All FLA files are unchecked by default.

3. Changing project and panel preferences

After you have created a new project with existing files on your system, you can alter the Project panel's display of files and folders. In this section, you learn how to set up project properties and alter the panel preferences to show the additional runtime files (images, HTML, CSS, and so on) in the panel.

  1. To create a shortcut to your ActionScript class files in the Project panel (and more important, to instruct the panel where to create new class files), click the options combo box at the top-right corner of the panel (marked with a gear icon), and choose Project Properties, as shown in Figure 3.10.

    The options menu of the Project panel

    Figure 3.10. The options menu of the Project panel

  2. In the Classes tab of the Project Properties dialog box, click the browse folder icon for the Save classes in field, as shown in Figure 3.11. Browse to the classes folder in the src/actionscript folder of the sample project files. Click OK to close the dialog box. The Project panel now displays the classes folder as a separate folder node (Figure 3.12). Note that a new folder was not created in the actual folder structure — you simply have a quicker way to find and access the class files for a project.

  3. To change the file and folder filter preferences, choose Panel Preferences from the same options menu you used in Step 1. Click the Settings tab in the Panel Preferences dialog box, and enter the file extensions for the file types you want to see displayed in your Flash projects, as shown in Figure 3.13. For this example, you can enter the following extensions: png, css, html, and js. Click OK when you've finished adding your preferred extensions. When you expand the folder nodes in the Project panel, you should now see all the files for the example project (Figure 3.14).

    Tip

    You may want to uncheck the Show hidden files option, which is enabled by default. Version control files, such as .svn and .git files, will be visible unless this option is unchecked.

    The Classes tab of the Project Properties dialog box

    Figure 3.11. The Classes tab of the Project Properties dialog box

    The new classes node in the Project panel

    Figure 3.12. The new classes node in the Project panel

    The Settings tab of the Panel Preferences dialog box

    Figure 3.13. The Settings tab of the Panel Preferences dialog box

    The updated file view in the Project panel

    Figure 3.14. The updated file view in the Project panel

4. Opening and editing files in the project

After you create a project and set up your preferences, you can open and edit documents from the Project panel.

  1. Double-click the master document, Bio.fla, to edit it in the Flash authoring environment.

  2. With Bio.fla open, take a look at how the bio.swf file (located in the wwwroot folder) is published. Choose File

    4. Opening and editing files in the project
    You can publish files with relative paths in the Formats tab.

    Figure 3.15. You can publish files with relative paths in the Formats tab.

  3. You can also edit some text files, such as HTML and XML files, directly in the Flash CS5 authoring environment. If you want to open a non-Flash-specific file in its associated application, you can right-click that file in the Project panel and choose Open File With Associated Application (Figure 3.16). If you have Adobe Dreamweaver associated with CSS files, you can right-click the styles.css file, choose this option, and edit the CSS file directly in Dreamweaver.

    The contextual menu of a file in the Project panel

    Figure 3.16. The contextual menu of a file in the Project panel

5. Publishing the entire project

In this final section, you learn how to test an entire project and view the master document's movie in the Test Movie environment.

  1. Click the Test Project button in the lower-left corner of the Project panel. Flash CS5 publishes all the Flash documents (FLA files) set to publish in the project file. In our example, there's only one FLA file, Bio.fla. The newly published bio.swf file, located in the deploy folder, then opens in the Test Movie environment.

  2. When you finish testing the file, close the Test Movie window. Remember, when you close and reopen Flash CS5, you can reopen all the project files for this example by choosing the site name in the Project panel's main drop-down menu.

Note

You can find the site files in the ch03 folder on this book's CD-ROM.

Summary

  • Your clients rely on you to understand and guide the production process involved with Flash content creation.

  • Careful planning helps you to create Flash solutions that best meet the goals of your project. The technical issues, such as usability, target audience, and delivery platform, should be balanced with the aesthetic aspects of experience design.

  • To structure the development of Flash projects, many Web developers use a two-phase production model that involves six milestones: Business Initiative, Creative Solutions, Approval, Production, QA, and Delivery.

  • During the production period, it is helpful to keep six key concepts in mind: asset assembly, a master Flash architecture, a local test environment, HTML page layout, a server staging environment, and proper QA testing. After production is finished, you also need to devise a strategy for systematic maintenance.

  • You can use the Project panel in Flash CS5 to manage all the Flash documents for a site or application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset