iii
After completing the exercises in this book and seeing how easy it is to create unique, responsive websites in Flash MX, I bet you are just champing at the bit to take this knowledge and apply it to your own projects. All in good time, little grasshopper! After all, the ideas and media for these exercises were all diligently conceived and prepared for you beforehand. What happens when you yourself are faced with the ominous “blank page”? It can be pretty daunting, believe me. So, let’s take a moment (or a chapter!) to discuss how you might prepare for your own projects, before you even go to open Flash!
Before you put pen to paper, or mouse to mousepad, your first step should be to answer some important questions about the site you are planning. Whether this is a personal site or a business site, for yourself, your company, or your client, there are a few major areas that you need to strictly define, which will inform your ideas and design for the entire site.
What is the purpose of this website?
Your website could have any number of primary goals: e-commerce; entertainment; a point of contact; or simply just to have a presence on the web. If you are creating a personal site, the only purpose might be to create a playground for your own ideas or artwork. Whatever the goal, it should be clearly defined at the outset of your project so you will know which direction you should be heading and where you should be focusing your attention. Without a defined goal, you’ll soon find yourself wandering aimlessly in the desert.
Who is the intended audience?
Almost as important as the purpose of the site is a definition of its audience. This should include age ranges, interests, and web-experience, as well as technical information about the hardware they will be using to view your site, and their connection speed. Choosing an audience will dictate the language you use, the font size, the colors best suited, and the

2
III Build Your First Web Site possible methods of navigation. Their hardware and connection speed will help you to decide what you can offer on the site that will be viewable for your entire audience. In addition to defining the audience, you need also to consider what they will be looking to accomplish at your site. Does this go hand-in-hand with your site’s objectives?
What will be the main content on the site?
Clearly, this is a very important aspect of site design, you should have a concise outline of the information that your site will contain before you start work. Also, if you are producing a commercial website, consider how the color of the company’s logo will work with the rest of the site, or if there are specific images that need to be included.
What media will I be using on the site?
Depending on the website, this question might not need to be addressed at such an early stage, but often the design and the navigation for your site depends upon the media you are presenting.
For example, an online gallery of images, with a defined purpose of displaying the images as an advertisement for the artist, should consider this question very early on. Will you need to present video on your website? How about music?
These questions all need answers before you can proceed with the design, and that’s where the fun starts!
Once you have established the reasons, audience, and content of your site, you must face the oftendaunting task of establishing a design for your site. Sometimes, inspiration will come almost instantly.
Sometimes, you will rack your brain for days in an attempt to come up with anything of value. No matter how long it takes, it’s important that you don’t become discouraged, and instead realize that everyone, even the most prolific of creators, can feel trepidation at this stage. The ideas will come. But how do you help them along?
Inspiration can be found in all corners of our everyday lives. One of the best ways to excite ideas of your own is to take cues from everything around you. And yes, I do mean everything. Here is just a brief list for you to consider:
Whether it’s your favorite baroque composer, or the latest hip-hop sensation, music can key right into the creative areas of your mind. Music has an uncanny way of taking us immediately back in time. We associate it with instances in our lives. It moves us in subtle, subconscious ways like nothing else. Listen to your standards, but also take care to challenge yourself with new artists (or ancient ones!) whenever you can.
These two forms of entertainment are not only easily accessible, but they also offer loads of variety and inspiration. So many movies have set the benchmark for what makes something visually appealing. Watch

Inspirations -III both the pop cultural juggernauts, as well as the programs on the fringe. Check out biographies and documentaries, animation and political discussions. Watch something that will frighten you. Remember that you can be just as inspired by the mediocre—it challenges you to consider the reasons for the mediocrity.
Live performance exudes its own unique energy, whether it be a play, stand-up comedy or performance art. If you wish to see interactivity in a human, public setting, head to a comedy club and witness how an audience’s reaction affects the performance of an entertainer. You may not realize it as you enjoy the show, but you’ll be breathing in ideas and inspiration all the time – and anyway, it beats sitting in front of a computer screen!
I used to make the mistake of going to a museum and attempting to take in as much as I possibly could in one trip. Now, I concentrate on a single exhibit, a single room, sometimes a single piece of art. Go and stare and take it in from all angles. Think and consider, and let your mind wander as you view.
You could read a book a day for the rest of your life, and still not come close to taking in all of the literature—good and bad—that our society has produced. Be sure to take in the classics, but don’t turn your nose up at the latest airport fare. Pick up children’s books and graphic novels. Examine the layout of illustration and how it supports a story. Spend a little time in all genres.
Also, head to a bookstore and just have a look at the packaging. Forget the old adage and judge books completely by the cover. Does it excite you? Do you want to buy the book? Are they selling the title, the author, and the genre? These are the kind of critical questions you need to consider about your own work, and it’ll soon become second nature to start assessing the design merits of everything around you.
3

III Build Your First Web Site
I have such a love/hate relationship with commercials on television. Some I find more entertaining than the surrounding programs. Others annoy me beyond comprehension. Either way, I like to examine why they make me react as they do.
Magazines also offer a huge amount of advertisements to consider, as well as general layout of an entire product. Look at how space, both positive and negative, is arranged. Try to determine how an ad attempts to manipulate, be it with color or imagery or wordplay.
I’m also a big fan of movie posters. Riding the subway here in Manhattan, I am treated to posters for pretty much every major release, whether I like it or not. In a movie poster, advertisers are forced to encapsulate the feeling of an entire picture in a single rectangular image. Some succeed admirably, while others fail majestically. Not only examine why (as you stand there waiting for a train), but also what feelings the poster evokes, and how you might approach it differently.
Finally, and this might not be an apparent source of inspiration, but have a look around you next time you are out shopping, especially at a grocery store, where the variety of products and brands are staggering. Creating a suitable and unique package for a product is quite a task in such an oversaturated marketplace, so take a moment to consider which product packaging works or doesn’t work for you.
Well, since we’re talking about finding inspiration for creating websites, it should go without saying that you should take a look on the web for other examples. On a regular basis, head to one of the many sites that have a site of the day or site of the week to see what else is out there.
We recommend www.macromedia.com
, www.flashkit.com
, and of course www.friendsofed.com
. Where you can not only find a site of the week, but also check out the best weird and wonderful sites posted onto our weblog.
4
Consider how certain effects were achieved, and what makes a site intuitive or too convoluted and complex. As with all of these categories, it can be just as educational to look at the bad as the good.

Inspirations -III
We build art around us every day (well, maybe not us personally, but those friendly construction workers like to drill and hammer at 6 am on your days off certainly are!). Of course, tract housing might not be the pinnacle of architecture, but it sure offers perspective. Stroll through your neighborhood, and then stroll through the nearest downtown district. Find the historic districts in your cities. If you have access to castles, cathedrals, or missions, take advantage of it! Personally, I love the cities that have centuryold buildings next to the most modern of skyscrapers. Some feel that one might destroy the beauty of the other, but I find the placement right next to each other of two magnificent works from two different eras to be inspiring in its historic scope.
I left this until last, for I believe unequivocally that it is the most important. What better place to find inspiration than nature itself? From the awe-inspiring grandeur of the Grand Canyon to the meticulous beauty of a rose, be inspired by what was created long before man’s works. Take a walk through a local park when your inspiration appears dried up and admire the detail found in the leaf of a tree, the intricacy of the tree’s twisting limbs, the fluidity in its form when the wind is blowing. Head to a zoo and observe animals, both native and exotic, and how they interact and play in their man-made habitat. Go hiking on trails and visit natural wonders, which you will find there are more of than the stated list of seven!
Of course, there are many more areas in which to explore and find inspiration, including video games,
DVD interfaces, mathematical algorithms or the circus. Inspiration is all around us, from a simple cereal box to Niagara Falls. What is important is that you experience and take in as much as you can, as much variety as possible. Watch something that makes you angry, read something that makes you cry, and do something that you never do. These are the ways to become inspired.
5

III Build Your First Web Site
I’ve had many talks with friends or co-workers who express the lament, “I’m just not creative,” as if it was something that was controlled by a simple on/off switch. An argument that I’ve defended for years is that creativity is like a muscle—the more you exercise it, the stronger it becomes. Sure there are those who are naturally more creative, but to believe that creativity isn’t something you can develop and nurture is self-defeatist.
Every parent will tell you that children are all capable of inventing the most outrageous stories. Creativity is inherent in all of us, but if we don’t use it then over time it will become flabby, like an under-used muscle. It’s time to start working out again!
The way to foster creativity is to use it, over and over, as often as possible. This may be easier said than done, but it is possible. Most creative writers will tell you that it’s best to write every day, whether the ideas are there or not. I knew a playwright who had written at least ten pages a day for over ten years. A lot of the work never saw live performance, but it did help to produce some outstanding work along the way. You need to keep the wheels turning and ideas coming.
Have you ever played a game or worked in an application so often that it becomes part of your subconscious? I had a Nintendo Gameboy when they first came out and was addicted to its tiny version of Tetris. I played it constantly for the first few weeks. Soon I discovered that I would begin to recognize geometric shapes around me in everything I saw. Everywhere I looked I saw collections of blocks (which was a good enough warning for me to put down the Gameboy for a while).
6
Far closer to the topic: about ten years ago I began to experiment with writing lyrics for the stage. At first, developing unique rhymes was slow going, but in a fairly short time I found myself reading passages in books and immediately finding rhymes for every odd word that cropped up. This would occur without thinking. Ideas for songs would jump out of a newscast, an anecdote, or a single word that had a fascinating sound. Places I had often visited, books I had previously read, movies that I had seen countless times—all became sudden sources of inspiration and catalysts for ideas, where before there had been

Inspirations -III none. In other words, my mind was becoming practiced in the creative angle I was developing it for. But it required my developing of it.
Sometimes, things come naturally. At other, more frustrating times, it takes a lot of hard work (and even more discarded, bad ideas). But in any case, it takes practice, diligence, and patience. Make no doubt about it, though—being creative is an ability that we all can achieve.
Once you get your mind focused on your desired task, though, it’s important that you often distract it.
That’s the time to head to the museum, go see a movie, walk through a park. Find the things that inspire you. I carry a small pad with me most places that I go, and whenever ideas fly at me from out of the blue,
I jot them down. You might find carrying a small dictaphone helpful to record your thoughts. Whatever method, take down whatever ideas strike you and peruse them later.
When it’s time to sit down and concentrate on a specific creative problem, let your pen flow freely and record your whole stream of consciousness. These are the times to think outside the box and brainstorm to your heart’s content. Don’t censure yourself or your ideas at this point, but instead think completely around a problem, offering practical solutions next to Dr. Seuss-like wild imaginings.
In these ways, you can develop your creative abilities. Then, with a healthy combination of inspiration and creativity, you can use the skills that this book has taught you create for your own projects.
I know you’re itching to begin throwing things together in Flash, but unless you layout structurally where your content needs to go, you’ll just end up with a big, virtual mess. You don’t need to lay out all the content on a single page, but you do need to decide how content will be divided, and where it will be located within the structure of the entire site. I can’t stress this enough – if you don’t plan properly at this stage then it will come back to haunt you later.
There’s no hard and fast rule on how to divide your content. It depends on the site. What you should consider is how your audience will expect to find content. If you are an illustrator, then no doubt your users will be looking for a gallery. Do you have magazine illustrations that you want to have separate from children’s book illustrations? Then this is the stage when you should decide.
Go through your content and your media and break it down into intuitive sections. A Flash design firm might have a section for a portfolio, which could be further divided into online and offline projects. You will usually need to have a section containing contact information, and another perhaps with a client list.
Play with different ways of dividing your information, though you’ll often find the pieces fall nicely into place. To aid in this task, create flowcharts of the site hierarchy.
7

8
III Build Your First Web Site
Once you have defined a structure for your site, you can begin dividing the media that you have collected into appropriate folders on your server or hard drive. Keep your content together in a parent folder as you construct your site, creating subfolders for your intended sections, creating further subfolders within these for different media types. Each of us has a different way of organizing, so arrange files in a system that works best for you, but be sure to keep it consistent throughout the project.
There are so many ways that people work when developing, and you will find countless books that explain varying methods (and I would encourage you to read as much as you can on the subject). I am going to explain the methods that have worked best for me, but obviously what’s important is that you find what methods work best for you. The one point I would like to stress is that, whatever methods you use, always take the time beforehand to carefully plan your site before you even open Flash. It’s true that, as with most things, the more work you do in preparation, the easier and less problematic the actual production will be. Believe me now, or realize it on your own after your first debacle, but it’s a true point and one to heed.
After you have answered the practical questions that we posed at the beginning of this chapter about your site’s purpose, audience content and media, then you can begin to brainstorm ways to present the information. Don’t open Flash just yet! Take out a pencil and paper and write down ideas and sketch out layouts. There are a few exercises that might help you in this.
Metaphors not only allow for some fun creative thinking, but they can also help your audience to understand your site and how it works. Consider this: the web is a completely new medium and one that is still developing its own language. When motion pictures were first being developed, films were often nothing more than a recorded version of what an audience might see live on a stage. Only when directors discovered how to utilize the camera as a new tool of creation, allowing for new ways to communicate, did we see the language of motion pictures develop. It is always a process of development, and that process requires inviting an audience in to accept the new medium. One way to accomplish this on the web is to incorporate metaphors.

Inspirations -III
A metaphor is real world parallel. It’s a 3D button on the screen that acts like a tactile 3D button you might find on your computer monitor. It’s a slider that operates just like the equalizer on your stereo. It’s
QuickTime video controls that mimic exactly the controls on your VCR or DVD player. It’s something the audience is already familiar with, and so more than willing to accept on your website, an environment where real world buttons really have no place.
By using these often-tactile items that your audience is comfortable with in their real world, you make them all the more comfortable within your virtual world. Of course, this can extend far beyond the simple button or interface control. It can be as complex as a 3D virtual world through which users can stroll and chat with other users, or as simple as a question mark on a button as an icon metaphor for “help”. The metaphor can encompass an entire site or a single button, and anything in between.
Considering metaphors is a great way to break down creative blocks as well. Having trouble developing a site for a dance studio? How about creating a navigation system based on the old numbered-footstep method of dance instruction? That will give you a unique look that immediately brings to mind “dance” and “instruction”, as well as footsteps that can offer physical direction and orientation—a possible fun method for directing an audience to different pages within the site.
Of course, metaphors are extremely useful, but not always necessary or welcome. A news site would probably not be improved by the real-world metaphor of a newspaper. Considering the audience, who visit the site first and foremost to find information about the current happenings in the world, a textbased page with little superfluous frills seems most appropriate. Just as in language, you must also be careful not to start mixing your metaphors within a single site. Once a user is used to your method of presenting content, stick to it.
OK, I have to admit that this is an area that I jump to early in the process (remember, I said that you need to find which methods work best for you!). Once I know what I am building, why I am building it, and whom I am building it for, I consider how users will navigate through that content. Usually for me, this is tied in very closely to a metaphor, taking into consideration the level of web user I believe will be visiting the site. Navigation systems can vary in complexity from a simple HTML-type navigation bar for the user
9

10
III Build Your First Web Site with limited web experience, to interactive 3D navigation systems for those with more experience, to experimental navigation systems developed for the design community. Navigation can be an over-the-top metaphor like a remote control sending a virtual television screen from link to link, or a standard dropdown menu similar to those found in most applications—anything that will allow your users to travel through and examine the content in your site.
It is best to consider your navigation at an early stage of development, as this will be your user’s main interface to the content. Who will care about the color, font or layout if the navigation system is not well thought out and planned carefully? Your users certainly won’t.
The first thing a user will see when they reach your website will not be the logo, the amazing navigation system, or the wondrous Photoshop montage you put together. No, the first thing a user will notice is the color scheme. Whether consciously or subconsciously, the user will form a first impression of your site from your choice of colors. We as humans, and more generally as animals, react strongly to color.
Consider in nature the extraordinary plumage of certain sexes, all in an effort to attract attention.
Consider that red automobiles are pulled over for speeding (even when they are not) more often than any other color. Consider that the color of paint in a hospital room has been carefully selected to evoke the proper feelings in the patient. Just as with music, we have base, unconscious reactions to colors.
This is not to say, however, that red is always best used for “hot” and blue for “cool”. Coca-Cola has done extraordinarily well selling a cool, refreshing drink with a red label. However, it is definitely something to keep in mind as you experiment with colors. If there are any colors that you automatically associate with your site and its goals, then start with these first. Then pick wild opposites for consideration as well.
Develop a number of color schemes built around your primary color choices, selecting complementary or tertiary colors on the color wheel (CorelDRAW has a wonderful facility I like to play with that creates tinted palettes based on three, four or five associated colors). Of course, there’s nothing to say you can’t explore a monochromatic website instead, if it helps to support (or doesn’t distract) from your purpose.

Inspirations -III
The color palette is something that you can play with throughout the course of your design, but is necessary to solidify before you start processing supporting images. You don’t want to have tinted a number of JPGs an orangey hue, only to discover that the orange clashes with the color of the logo.
You have the reasons for the website, a definition of the intended audience, the content and media you will be presenting, a color scheme, a possible concept for the site and a system to navigate with.
Eventually, you have to get to the actual layout of the information. As in all of these steps, there are several ways how to proceed.
At this stage, I still tend to stay away from the computer (though it will enter in shortly, I promise!) One method I find very useful is rather “crafty”, but easily allows exploration of layout. After determining the necessary content for my home page, keeping in mind the method of navigation I have devised, I cut up pieces of construction paper to match the relative dimensions of each of my assets (sometimes I simulate this in an illustration program like Illustrator or Flash itself, but here I want you to focus on the exercise and not the tool). Once I have each of my assets, I get a blank piece of white paper and I begin to arrange the pieces of construction paper on the white paper in various configurations, experimenting with ways to block out the information. Even if I have already definitively determined my color scheme, I stick with white paper and a single solid color of construction paper as I arrange at this stage. This is because I am playing more with the space of the page than I am with the ways the colors fit on it.
There is a term in theatre coined by Peter Brook called “The Empty Space”, and this is what I think of as
I’m pushing the paper around. What it means is that the negative space on the page, (in other words space without any content) is just as important to balance as the positive. The empty space offers relief for the viewer’s eyes and helps to focus the important information. We have all been to sites that seemed intent on cramming as much content onto a single page as possible. No empty space is left unturned! I don’t know about you, but I feel claustrophobic at such sites, and they often scream “amateur!” So, always remember to offer an adequate amount of breathing space for your content. Examine how positioning the empty space can direct a user’s eyes around the page.
I also keep in mind how I will be bringing on future content. Unlike on an HTML page, I usually prefer to bring subsections right onto a main page, as opposed to replacing the entirety of the page with new content when a link is pressed. This means that the home page layout will directly affect the subsections’ layout, and vice versa. It’s important to consider this as you space the content.
11

III Build Your First Web Site
Another thing to consider is an asymmetry of design. There is nothing wrong with symmetry, per se, but it often produces an unexciting, motionless site—a layout more at home in a stuffy application than a dynamic web page. This is another great way to utilize the cutout papers. Since all you are doing is rearranging paper, there’s no reason not to explore every possibility before you get on the computer.
12
Once you have satisfied yourself with how pieces will fall on the page, you can finally boot up your machine if you’d like and try the layout in an illustration program like Illustrator, Freehand, CorelDRAW, or even Flash itself. If you use Flash, remember that this stage is about laying out the design, not building it. This is the stage where I examine how the colors will fit together on the page, what background color
I will use, and how each of the elements on the home page will be colored or tinted. Again, I use only basic geometric shapes to simulate each asset, instead of the actual asset itself. I’m examining more the abstract feeling I get from the arrangement of the colored content. If I like how the colors and shapes are interacting, I proceed. If not, I look at what is still troubling me and try to fix it.
The last step I usually take before I begin mocking up a layout within Photoshop or Illustrator (I tend to stick with Flash for creating the interactivity, but not for the design and layout) is to look into which fonts will best suit the site I’m creating. Most of the time, this will only be one or two fonts—a sans serif font that’s easily readable like Arial or Verdana for the body text, and possibly a livelier font for headings.
When you develop a Flash site, you have the option to embed fonts in your movies so they will remain consistent for all users. This is great in the sense that you know your design will look the same for everyone, but there are also problems, like added file size and sometimes-unwanted anti-aliasing (as discussed earlier in this book). However, you might not need to embed heading (since the letters you use will be limited), and the anti-aliasing will probably be desirable for the larger font. Either way, the choice of which fonts you use can be just as important to the look of the site as the color scheme.

Inspirations -III
Letters that appear to be cut out from different newspaper clippings, as in a ransom note, evoke very specific feelings. Illuminated lettering, as would appear in a Bible from the Middle Ages, evokes a completely different feeling. Whether you use novelty fonts, hand written fonts serif or sans serif, your font will give users an immediate impression of your site. Choose with care the fonts you will use throughout your site, and remain consistent.
CorelDRAW has another great facility that I utilize when choosing fonts—a live preview of the font for a textbox. Using this, I can type in a heading name I intend to use, then quickly scroll through my installed fonts to see what best supports the feeling of my site. Flash has a similar feature. You can also use a font manager to quickly scan your installed fonts to choose the proper font. Head online if you can’t find one that works for you—countless sites offer fonts that you may purchase for a minimal fee.
One terrific feature to explore with Flash, as you continue working with the application, is the ability to export a font from the library, and then use the embedded font throughout your movie. The benefit of this becomes most apparent when you want to change the font used in the movie. A simple switch in the library will update all of the text fields using this font throughout your movie. It’s a great way to experiment with different fonts during the design stages.
Finally, with all of your practical questions concerning the site addressed, the colors and fonts chosen, the media prepared and structured, the navigation decided, a concept explored and the layout determined, you can approach mocking up the design with the knowledge you have prepared what you need to confidently create. The preparation acts as a support structure. You are not heedlessly throwing together content in a haphazard way that will irritate or confuse your audience, but instead building a site that supports and enhances the content you have prepared to place on the web.
With that support structure providing the foundation, open up your layout program of choice, whether it’s Photoshop, Illustrator, Freehand, Fireworks, Flash, or whatever, and start putting it together. The design now is up to you. Arrange the actual content on the page as you planned in your earlier design stages.
Make adjustments as you need, play with the arrangements further, and feel free to experiment as you go along—just because you decided on a layout earlier doesn’t mean you’re stuck with it! Take your earlier layout decisions as blueprints, but don’t feel confined by them.
Once you’re satisfied with what you have produced in a static form, it’s time you begin putting it together for the web. You are now at the same point at which you started the exercises in this book—a fully realized idea that you want to make interactive for the web. So now it’s time to get to work!
Bring it all into Flash, and apply the knowledge you’ve gained working through the exercises in this book.
You have started your own site from scratch, and come up with a solid design that supports your content, so now it’s time you make Flash work for its supper!
13