• | Table of Contents
• | Index
Building Dynamic Websites with Macromedia® Studio MX 2004
By Tom Green, Jordan L. Chilcott, Chris S. Flick
Publisher | : New Riders Publishing
Pub Date | : October 23, 2003
ISBN | : 0-7357-1376-6
Pages | : 576

Each of the applications in Macromedia's just-released Studio MX 2004 product suite—Dreamweaver MX 2004, Flash MX 2004, Fireworks MX 2004, and FreeHand MX—is, in its own right, a powerhouse in some aspect of Web development. Put them together, and you'll be conquering the world with your dynamic, data-driven sites! All you need is this guide to pull it all together. Written by a trio of Web experts, this volume uses the creation of a fictitious community center to give you a solid overview of how you can use the integrated workflow of Macromedia's Studio MX product suite to create your own dazzling sites. You'll start by learning about the principles that govern the creation of database-driven sites and the planning that ensures their successful deployment. Then the fun begins! The remainder of the book shows you how to use the tools at your fingertips—along with Contribute, Flash Remoting, and Flash Communications Server—to build real-world applications.


• | Table of Contents
• | Index
Building Dynamic Websites with Macromedia® Studio MX 2004
By Tom Green, Jordan L. Chilcott, Chris S. Flick
Publisher | : New Riders Publishing
Pub Date | : October 23, 2003
ISBN | : 0-7357-1376-6
Pages | : 576

Copyright
About the Authors
About the Technical Reviewers
Acknowledgments
Tell Us What You Think
Introduction: Of Pixels and Progressive JPEGs
 | What's In It for You
 | How This Book Works
 | How to Use This Book
 | Moving On
Part I. Building Dynamic Sites
 | Chapter 1. What Is a Dynamic Site?
 |  | Dynamic Sites Defined
 |  | Dynamic Site Tools
 |  | The Skills
 |  | Team Management
 |  | Asset Management
 |  | Summary
 | Chapter 2. The Architecture of Dynamic Sites
 |  | The Pancake Principle of Dynamic Site Architecture
 |  | Let the Software Do the Work
 |  | Complexity vs. Simplicity
 |  | Summary
 | Chapter 3. Planning a Dynamic Site
 |  | Want vs. Need
 |  | The Creative Brief
 |  | The Technical Brief
 |  | The Communication Process
 |  | Creating a Chat Room in Flash MX 2004
 |  | Summary
 | Chapter 4. Planning the Data for a Dynamic Site
 |  | Planning the Data
 |  | Flowcharting the Logic
 |  | Planning the Community Center Site
 |  | Getting Ready to Work
 |  | Summary
 | Chapter 5. Planning the Look
 |  | Creating the Site Model
 |  | Wireframing
 |  | Comprehensive Designs
 |  | Prototyping
 |  | Summary
Part II. Building the Interactive Tour
 | Chapter 6. Creating the Tour Assets
 |  | The Plan
 |  | Imaging in Fireworks MX 2004
 |  | The Studio MX 2004 Workflow
 |  | Creating the Oakbridge Community Center Masthead
 |  | Batch Process is a Developer's Best Friend
 |  | Summary
 | Chapter 7. The Elements of the Dynamic Page
 |  | Dreamweaver MX 2004 and Dynamic Data
 |  | Building Templates in Dreamweaver MX 2004
 |  | Creating Cascading Style Sheets in Dreamweaver MX 2004
 |  | Summary
 | Chapter 8. Building the Data
 |  | Databases and Studio MX 2004
 |  | A ColdFusion MX Overview
 |  | Building a Simple Back-End
 |  | Summary
 | Chapter 9. Flash Remoting
 |  | What It Is
 |  | Flash/ColdFusion
 |  | Summary
 | Chapter 10. Assembling the Tour
 |  | Choosing Fonts
 |  | Designing the Look for the Applications
 |  | Assembling the Dreamweaver MX 2004 Pages
 |  | Summary
Part III. Building the Booking Facility
 | Chapter 11. Creating the Booking Facility Assets
 |  | Director vs. Flash
 |  | The Plan
 |  | Imaging in Fireworks MX 2004
 |  | The Fireworks MX 2004/Director MX Connection
 |  | The Flash MX 2004/Director MX Connection
 |  | Summary
 | Chapter 12. Flash Communication Server MX: Moving Dynamic Data Through Director MX and Flash MX 2004
 |  | The Movement of Dynamic Data Through and Out of Director MX and Flash MX 2004
 |  | Interface Issues
 |  | Summary
 | Chapter 13. Assembling the Booking Application in Flash MX 2004
 |  | Planning the Project
 |  | Creating the Booking Facility Database
 |  | Creating an ActionScript Document in Dreamweaver MX 2004
 |  | Building the Booking Facility in Flash MX 2004
 |  | Building the Calendar
 |  | Summary
 | Chapter 14. Assembling the Booking Application in Director MX
 |  | A "Dispassionate" Look at the Differences
 |  | Wrapping the Booking Facility in Director MX
 |  | Summary
Part IV. Building the Online Meeting Facility
 | Chapter 15. Embedding and Streaming Video in Flash MX 2004
 |  | Digital Video Overview
 |  | Incorporating Video into Flash MX 2004
 |  | Streaming Video Through the Flash Communication Server MX
 |  | Summary
 | Chapter 16. Building the Chat Room
 |  | Chat Issues
 |  | Designing the Room
 |  | Building the Chat Room
 |  | Summary
 | Chapter 17. Flash MX 2004 and Real-Time, Two-Way Communication
 |  | Streaming and How We Got from "There" to "Here"
 |  | Design Issues
 |  | Building the Streaming Audio Communicator in Flash MX 2004
 |  | Summary
 | Chapter 18. Building the Meeting Application
 |  | The Competitive Advantage of Flash MX 2004
 |  | Jordan's Epiphany
 |  | The "Story" Behind the Meeting Room
 |  | The Technologies That Make the Meeting Room Work
 |  | Constructing the Meeting Room
 |  | Summary
Part V. Pulling It All Together
 | Chapter 19. Debugging and Testing
 |  | Debugging Issues
 |  | Using ColdFusion MX's Debugging Options
 |  | Optimizing Dreamweaver MX 2004 Code
 |  | Director MX Debugging Tools
 |  | Debugging in Flash MX 2004
 |  | Usability/Functionality
 |  | Accessibility
 |  | The Testing Team and Its Responsibilities
 |  | Summary
 | Chapter 20. Deployment
 |  | Ensuring Dynamic Components Are Working
 |  | Uploading to the Remote Server
 |  | Summary
Index


Copyright

Copyright © 2004 by New Riders Publishing

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means—electronic, mechanical, photocopying, recording, or otherwise—without written permission from the publisher, except for the inclusion of brief quotations in a review.

Library of Congress Catalog Card Number: 2003110964

Printed in the United States of America

First printing: November, 2003

07 06 05 04 03 7 6 5 4 3 2 1

Interpretation of the printing code: The rightmost double-digit number is the year of the book's printing; the rightmost single-digit number is the number of the book's printing. For example, the printing code 03-1 shows that the first printing of the book occurred in 2003.

Trademarks

All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. New Riders Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Macromedia is a registered trademark of Macromedia Corporation.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible, but no warranty of fitness is implied. The information is provided on an as-is basis. The authors and New Riders Publishing shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of the CD or programs that may accompany it.

Publisher

Stephanie Wall

Production Manager

Gina Kanouse

Senior Acquisitions Editor

Linda Anne Bump

Development Editor

Chris Zahn

Project Editor

Jake McFarland

Copy Editor

Ben Lawson

Indexers

Cheryl Lenser

Lisa Stumpf

Proofreader

Beth Trudell

Composition

Ron Wise

Manufacturing Coordinator

Dan Uhrig

Interior Designer

Louisa Klucznik

Cover Designer

Aren Howell

Marketing

Scott Cowlin

Tammy Detrich

Hannah Onstad Latham

Publicity

Kim Lombardi

Susan Nixon

Dedication

To Mary Margaret Green and Margaret Mary Fogal, two moms who encouraged in me a passion for the written word and for never giving up.

—Tom Green


About the Authors

Tom Green, self-employed in the digital media field since 1986, has lived and worked through the rise of desktop publishing, multimedia, and the web. As an educator, author, lecturer, and passionate advocate for the Toronto New Media community, he has spoken about new media technologies at conferences around the world, and he is a founding member of Macromedia's largest user group, FlashinTO. Tom also developed the first process-based New Media curriculum in the early 1990s for a private sector training company. He has served on a number of influential New Media awards juries, and he works closely with secondary and post-secondary educators and their students across Canada to improve the level of New Media education and employability of students enrolled in New Media programs.

Tom and Keltie, his wife and life partner for the past 25 years, live in Oakville, Ontario, with their two children—Robert and Lindsay—along with a cat, a dog, four fish, a frog, and a turtle. Tom can be reached at tgreen17@cogeco.ca.

Jordan L. Chilcott, born and raised in Toronto and now a resident of Guelph, Ontario, graduated from Radio College of Canada's Electronic Engineering Technology program in 1983, only to discover that he had a passion for computer programming. Spending his days working as a service technician, Jordan invested many sleepless nights teaching himself Assembly Language. He published his first program in 1985 and started learning higher-level languages such as C and C++.

Jordan co-founded The Computer Software Specialists, now known as Interactivity Unlimited, and eventually left the computer hardware industry to focus on his passion for programming. Today, Jordan does application programming for both desktop (he loves Mac OSX's Cocoa framework) and the Internet in various languages, such as ActionScript, ColdFusion, PHP, JSP, Java, and C/C++/Objective-C. When not programming or administering Blue World's Dreamweaver-Talk list, he spends time with his wife, Joelle, and five children, Margot, Dina, Henry, Jack, and Joshua; composes and records music—producing soundtracks for movies and short films; and studies Karate. He is hoping to earn his brown belt by the time this book goes to print.

Chris S. Flick, while attending Radford University in southern Virginia, always knew that he wanted to find some way to combine his illustrative skills and his passion for traditional design. This was something he continued to strive for after graduating in 1991, when he immediately began working as a newspaper production artist and a sometime editorial illustrator. From there, Chris moved on to become a graphic designer for a prominent advertising firm in Rockville, Maryland. It was there that Chris discovered his love for the web and immediately recognized it as being the perfect medium to combine his design and illustration passions. Not long after that, Chris gave up the print realm entirely and became the art director and head of web development at a prominent consulting firm in McLean, Virginia, where he has been since 1999.


About the Technical Reviewers

These reviewers contributed their considerable hands-on expertise to the entire development process for Building Dynamic Web Sites with Macromedia Studio MX 2004. As the book was being written, these dedicated professionals reviewed all the material for technical content, organization, and flow. Their feedback was critical to ensuring that Building Dynamic Web Sites with Macromedia Studio MX 2004 fits our readers' need for the highest-quality technical information.

Dorian Nisinson, born and raised in New York, is an artist, graphic designer, illustrator, and muralist who discovered Flash back when Macromedia first acquired it. She was a founding member of FlashCentral.com, which was one of the first sites dedicated to Flash; she designed the graphics for the Widgets Sample files that shipped with Flash 4; and she has contributed to or tech edited several books on Flash. These include Flash 4 Bible by Reinhardt and Lentz; Flash 4 Web Animation f/x by Milburn and Croteau; Flash 5 Bible by Reinhardt and Lentz; Flash MX Bible by Reinhardt and Dowd; Building Web Sites with Macromedia Studio MX by Green, Chilcott, and Flick; and Jon Warren Lentz's best-selling book, Flash: The Future. Dorian is also a member of the Mobile Content Consortium (http://www.mobilecc.org) and head of the design firm, Dorian Nisinson Design (http://www.nisinson.com).

Currently, Dorian is involved in exploring the uses of Flash as a tool for creating interactive art, both on the web and on handheld devices.

James Cullin has been building database-driven web sites using ColdFusion since 1998. His focus is on the not-for-profit sector, with clients that include the Canadian International Development Agency and APEC. He currently teaches courses in Internet technology and web programming at Toronto's Humber College. He also teaches an online course about Internet research techniques at the University of Guelph-Humber. When James is not building web applications or teaching, he can be found hiking or gardening with his wife, Paula, and daughters, Gwendolyn and Madeline.

James graduated from the University of Guelph with an undergraduate degree in Management-Economics. He is currently completing a Master's degree in Education at Central Michigan University. He can be reached at james@cullin.org. You can read his musings at http://cullin.org.

Marcus J. Dickinson is a freelance Macromedia Developer and Corporate Trainer in the Toronto area. His skills have been sought by many prominent companies in North America. He is actively involved in the Toronto community, as well as online, where he moderates numerous forums. He brings an enthusiasm and excitement to Flash that is hard to match. His personal project, Diaries of War, promises to be unique and engaging.


Acknowledgments

When you deal with the seriously complex technical subject matter of this book, you simply can't do it alone. This is our chance to thank a number of people who helped us in innumerable ways to convert our ideas from brain synapses to words on the page.

First up is Linda Bump. Though Linda has the official title of Senior Acquisitions Editor with our publisher, we have always regarded her more as a friend and mentor than "suit." We may get all the glory, but when we needed guidance, advice, a laugh, or a kick in the pants, Linda was always there. When we started talking about the idea for this book, it was Linda who championed our idea and ensured we never lost sight of you, our audience.

Next is Chris Zahn, our Development Editor. These guys are the heart and soul of the process of writing a book of this sort. Chris helped us mold our thoughts and clarified our thinking with his keen insights and sharp wit. Managing three writers and technical editors, and keeping them all moving in the same direction can only be described as "herding cats." Chris's job was simply astounding, and we can't thank him enough for his patience, sense of humor, and the smack upside the head when we got stuck.

Our Technical Editors also need to be acknowledged. Though their biographies are elsewhere, their keen insights and questions moved this book to a level we never expected. This is the second time we have been honored with Dorian Nisinson's presence on the Tech Edit team, and, as usual, her observations and insightful questions litter the book. James Cullin is new to the crew, but not to one of the authors. Tom and James have worked very closely over a number of years on various projects at Humber College's School of Media Studies. In fact, the genesis for this book was James's observation a few years back that the multimedia students and the Internet management students will soon be working together using these technologies. When the question of Technical Editors was raised, James was an absolute natural.

Others who helped us think through the book or were there when we got stuck include Stephanie Sullivan of Violet Sky Design, Steve Minton out of the U.K., Shawn Pucknell of FlashinTO fame, and Marcus Dickinson of diariesofwar.com. John Cowie and Shaul Swartz of NI Solutions Group, who provided the Shared Hosting environment, deserve a huge vote of thanks. Finally, we can't overlook all of our friends at the Blueworld Dreamweaver list who, every day, ask the same questions we do about these technologies. Here's hoping you find some answers, guys.


Tell Us What You Think

As the reader of this book, you are the most important critic and commentator. We value your opinion and want to know what we're doing right, what we could do better, what areas you'd like to see us publish in, and any other words of wisdom you're willing to pass our way.

As the Senior Acquisitions Editor for New Riders Publishing, I welcome your comments. You can fax, email, or write me directly to let me know what you did or didn't like about this book—as well as what we can do to make our books stronger. When you write, please be sure to include this book's title, ISBN, and author, as well as your name and phone or fax number. I will carefully review your comments and share them with the author and editors who worked on the book.

Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of email I receive, I might not be able to reply to every message.

Fax: | 317-428-3280
Email: | linda.bump@newriders.com
Mail: | Linda Bump Senior Acquisitions Editor New Riders Publishing 800 East 96th Street, 3rd Floor Indianapolis, IN 46240 USA


Introduction: Of Pixels and Progressive JPEGs

Technologies don't just appear. They start small, almost like stray pixels in a freshly-scanned image. You don't see them unless you really start looking for them. The stray pixel that led to this book first appeared on a dull, damp, and drizzly March day in Toronto. It was the type of day that forces one to curse the weather, not to look for trends. It happened this way.

Josh Davis. Yes, that Josh Davis—food dye in the eyes, fish tattoos on the back—that Josh Davis is in town to speak to the new media community about "Being Josh." The venue fits Josh to a "T." The Bloor Cinema is located in the university area of town, which is an area populated with book resellers, CD-resellers, clothes resellers, and resellers for any item you could possibly imagine. Every university town has a place like this, and as you might expect, the area is a bit run down, but like the Bloor, it has a hip seediness to it.

Huddled under sagging store awnings or in unoccupied doorways are a hundred or so black-clad New Media Developers, waiting to learn how to "Be Josh." Cries of "Cool," "Dude," and "Wassup" ricochet out of doorways and along the street, creasing the "wild fruit explosion" or jet-black hair that is this week's style. The mood is electric, and one would almost expect electricity to start arcing between the piercing studs and nose rings as everyone waits to see Josh. It is in this crowd, this oh-so-hip crowd, that the stray pixel first appears, and it appears in the last place one would think to look.

One of the authors has been dragooned by the organizers of FlashinTO as a greeter, ticket taker, and all-around "gofer." The doors aren't scheduled to be open for a few minutes, and the volunteers are gathered in front of the theater's lobby espresso bar. The conversation is the usual mundane New Media developer conversation, touching on a myriad of techniques and technologies and including liberal usage of the word "cool." Except for the author and Lorraine Spiess, the dress is mandatory black, set off with "wild fruit explosion" or jet-black hair.

Lorraine, she of the long blonde hair and prim and proper deportment associated with the suburban housewife, is on the fringe of the conversation. She is not listening intently; instead she is leaning into the conversation, waiting for a polite pause where she can participate. It arrives and… "I have been playing around with databases and Flash," says Lorraine, "and I have been getting some cool results." She then launches into a full rundown of what she is doing, and she is politely dismissed with a "That's interesting" before the conversation moves to something really "Cool."

It wasn't until 18 months later that author understood he had seen the stray pixel. It had landed on a suburban housewife and not some black-clad, pierced, multi-hue hair trendoid on the other side of the glass entrance to the Bloor Cinema.

As these things tend to do, the conversation stayed with the author. It rattled around his subconscious, forcing him to pay attention to anything associated with the words "dynamic," "scalable," or "application." It was in this way he started gathering other stray pixels, and it was in this way the pixels started to form an image, and, like a progressive JPEG, the trend started to take on resolution.

Six months later, the image came into sharper focus, and it happened this way.

The FlashinTO crew has gathered for its monthly get together at the Mockingbird, a rather large bar located at the geographic center of the industry in Toronto. They are gathered around the screens set up at either end of the establishment, watching their peers present some rather "cool" stuff. They are hanging around the bar, gossiping and trading business cards, or they are in the back area of the bar, just on the other side of the DJ booth, playing pool and foosball; others are gathered on the couches littered throughout the area, discussing business and strategic alliances. In the midst of all this, oblivious to her surroundings, can be found the suburban housewife Lorraine.

Here, surrounded by the black-clad cool-crew, she has been joined by 10 others, and the subject is "Database Connectivity." The paper notepads are carefully placed so as not to jostle the pints of Toronto's finest, and those around the table who have their laptops open are keeping a close eye on the table to ensure their heavy metal doesn't become wet heavy metal. Among this group, the code is flying, and the participants are so focused on the conversation they don't notice the cool-crew has tossed an invisible quarantine area of five feet around their table. Those that wander into the DMZ soon leave, and, when asked why, they will tell you straight out, "Dude, they are too hardcore for me."

The progressive JPEG came into sharper focus a few months later. It happened this way.

The "MX Studio" is on the street, and we are all gathered at the Mockingbird for the FlashinTO gathering. This is a special one, and seats close to the screen are at a premium. The bar area is sparsely populated, as are the pool and foosball tables. Knots of people can be found sprinkled among the couches, but everybody is ready for tonight's topic. There is no talk of "Cool." There is no sassing. The talk is of "Flat Architecture," "Dynamic Flash," "ColdFusion MX," and "recordsets," "components," and "templates." Finally, somebody is going to at least explain it to us.

At 7:30, the projector is switched on, and all conversations cease as Lorraine Spiess, that Lorraine Spiess, the "hardcore" Lorraine, the snubbed Lorraine, steps in front of the crowd and begins to enlighten the masses.


What's In It for You

As the title says, this book is about "building dynamic web sites with Macromedia Studio MX 2004." It is neither the definitive book about building dynamic sites, nor does it provide you with the skills to master the tools in the Studio. If that is what you are looking for, we would like to thank you for spending this brief time with us and to tell you those books are elsewhere on the shelf.

This book is designed to get you into "The Game." For the next 500 or so pages, we are going to build a dynamic web site for a fictional organization—"The Oakbridge Community Center." We will start where all dynamic projects start—on a sheet of paper—and end where all dynamic sites end—with upload to the server and maintenance. Along the way, we will be using some pretty amazing Macromedia technologies: Flash, Dreamweaver, Freehand, Fireworks, ColdFusion, Director and the Flash Communication Server.

Taken at face value, that list can be regarded as a rather intimidating lineup of products. They are, but we have a different perspective when we use them. To us, they are nothing more than the tools we use to build Dynamic Web Sites. To us, Flash is a hammer. Director is screwdriver. Flash Communication Server is a wrench. So what, you may ask, are the raw materials? Simple. The raw materials are your creativity and some paper.

In the pages that follow, you will see how seven of Macromedia's products in Studio MX 2004 offer you a comprehensive production solution when it comes to building dynamic web sites.

Our intention is not to overwhelm you with technology. This book also is not designed to talk down to you or present concepts that will go right over your head. We don't assume you are a dummy, and we don't assume you have, as Cliff Klaven so eloquently put it in Cheers, a degree in "rocket scientry." We know where you are and how you feel about this new way of doing things because, quite frankly, a couple of us were in your shoes a couple of years ago and had to be dragged, kicking and screaming into the "dynamic way of doing things."

As we did with our first book, Building Web Sites with Macromedia Studio MX, we are going to open a conversation with you around the building of dynamic sites and show you how the skills you have already developed with these applications are the same skills used to build dynamic sites. Along the way, we will share many of the tips, tricks, and techniques we have developed as we move through the creation process.


How This Book Works

Using a mythical community center gives us the opportunity to build a site that will incorporate many of the features your clients are, or soon will be, clamoring for in their sites. They would include a dynamic visit to the facility based on visitor interest, an online booking feature for facility use, and an online meeting facility for community outreach. This way, you can work with us to build three of the more common dynamic site features.

This book follows the building of a dynamic site from concept to upload to a server. Working with seven applications can be rather daunting, and the temptation would be to take the easy way out and present each product in isolation. That does you no good whatsoever, which is why we have broken the book into five sections that mirror the workflow of the Oakbridge site.

The first section, "Building Dynamic Sites," starts with an overview of what you are getting into, the tools you will use, and the skills necessary to build the site. We discuss the architecture of web applications and introduce you to our infamous "Pancake Principle" of building a dynamic site. We fully discuss the planning issues and the paper trail that must be built. We then discuss how to plan the logic and the flow of a dynamic site. Finally, we show you how to prototype a site (from site map to wireframes), and we conclude with a comprehensive design of the site for client review.

The second section of the book deals with building a dynamic facility tour. We show how the "art" tools—Fireworks MX 2004 and Freehand MX—can create much of the content and how Flash MX 2004 and Dreamweaver MX 2004 use and display dynamic data. It is here, too, that we show you how to utilize the power of Cascading Style Sheets, build a database, configure ColdFusion for Dynamic Data, and use Flash Remoting to communicate with your database. The section finishes with the assembly and testing of the Tour.

The third section deals with the building of a booking facility; we show you both how to plan the section and how to create the assets used in the section. We then move into an area very few developers think of when it comes to building dynamic sites—using Director MX, not Flash MX 2004—for the task. We will show you how the applications in the Studio integrate with Director and discuss how to move data through Director MX using the Flash Communication Server. We haven't forgotten the Flash purists. The last chapter in the section explains how one would build the booking facility in Flash MX 2004.

The fourth section of the book builds an online meeting facility. Again, we show you how a number of the tools in the Studio can be used to construct the assets. Then we discuss how to design and build an online chat room with streaming audio and video capabilities.

The last section pulls the entire site together and focuses on assembly and alpha and beta testing. We examine usability and accessibility issues and finish up with deploying the site and using Macromedia Contribute to update the static pages and building a "back end" that updates the dynamic areas.

By the time you finish, you will have created a rather complex dynamic site, but, most important of all, you will have gained the confidence to take your skills even further.

Dynamic web site development, to many developers, is just like those progressive JPEGs we used to start this introduction. At first, the picture looks a little fuzzy, but, over time, the whole picture comes into focus. Building Dynamic Web Sites with Macromedia Studio MX 2004 does just that—it brings the building of these sites into focus and shows you how to have some fun along the way.


How to Use This Book

The applications in this book are cross-platform. In fact, many of the figures show either a Macintosh or a PC interface. Apart from the Operating System differences, you should have no difficulty working through this book using your computer. To ensure both sides of the computing divide are accommodated, we will show keyboard commands in the following manner:

To open a new Fireworks MX 2004 document, select Command-N (Mac) or Control-N (PC).

Menu commands are treated a bit differently. They are presented as Menu, Submenu, Submenu. For example:

To open a new Fireworks MX 2004 document, select File, New.

Keyboard commands do differ between the platforms. They will be shown as Keystroke-Keystroke, followed by the platform to which it is applicable in parentheses. The previous example told you to press the Control and N keys if you use a PC or the Command and N keys if you use a Macintosh.

In certain cases, you will be asked to use the mouse to complete a particular task. This is also an area where platform differences are evident. Contextual menus are the poster children for this. On a PC, the instruction is:

To open the Contextual menu, right-click the object.

The Macintosh is a bit different. Though the Macintosh world is increasing populated with third-party mice containing a second mouse button, Apple has always provided a one-button mouse. In this case, the Mac instruction would be:

To open the Contextual menu, Control-click the object.

The cross platform instruction would be:

To open the Contextual menu, right-click (PC) or Control-click (Mac) the object.

Code is unavoidable when building Dynamic Sites. Throughout the book, you will be asked to enter, change, or optimize code. There will be three major code languages used throughout the book. The first is the one that drives the web—HTML. The second is the language that drives Flash—Actionscript. And the third is the language that drives Director—Lingo.

In all cases, code will be easy to identify due to the use of a special typeface. For example, a code listing will look like this:

<HTML>
<Head>
<title> Hello World!</title>
</head>
</HTML>

When code needs to be changed, we indicate the change in this manner:

On exitFrame
Go to the frame
End

By showing the code in bold text, you can quickly identify what needs to change and where the code is located. Using bold italic type as shown then indicates the change:

On exitFrame
Go to frame 3
End

In this case, the instruction you would follow is presented in the following manner:

There are occasions where you won't want to stay put. In this case, the frame script in Director MX would change from a frame loop to a "jump" to a particular frame.

  1. This is easily accomplished by opening the frame script and selecting the command:

    On exitFrame
Go to the frame
End

  2. With the command selected, change the command to jump to Frame 3 of the movie:

    On exitFrame
Go to frame 3
End

The last thing you need is a 500-page typing lesson. To avoid these, we will, on occasion, explain why the change is being made or the purpose of the code being entered.

An example would be explaining the purpose of a line of Actionscript in Flash:

If_(framesloaded,=_totalFrames){

If the number of frames loaded into memory equals the number of frames in the entire Flash movie then…

GoToAndPlay("Go");

…go to the frame label "Go" and start playing the movie from that point.

}

This book also follows a few typographical conventions:

  • A new term is set in italics the first time it is introduced.

  • As suggested previously, commands, functions, variables and other components of the coding languages are set in a fixed-width font. This is true for the text as well as listings. For example, <title> Hello World from Three Lost Souls!</title>.

  • Code lines that do not fit on the page of the book will continue on the next line and will be preceded by a continuation character [image].


Moving On

What happens after you finish this book? Simple: You go to work!

We present a ton of techniques throughout the book, and it is your decision whether to use them, modify them to your way of doing things, or simply say "That isn't the way I would do it!" and then discover a better way of doing it. That's the dynamic site development process.

We aren't so arrogant as to assume we provide the definitive word on the use of Macromedia Studio MX 2004 production tools. The day of the web guru who knows it all ended a few years ago. This business is complex, and you will be relying on a team of experts formed from in-house resources or independent contractors. These teams will bring their very focused skills to bear on an aspect of a project and then disband upon the project's completion.

Yet, as you will discover, much of what we present can benefit your workflow in ways you may not have considered.

The process doesn't stop with this book. There are any number of sites, tutorials, and discussion lists on the web that are designed to answer the "How do I…" questions you will inevitably encounter. We have included a number of our favorites on the book's web site.

You might also consider getting involved with your local Macromedia User Group (MMUG). These are invaluable opportunities for you to meet with your fellow developers to swap techniques, share war stories, or simply network. In Toronto, the local user group (http://www.FlashinTO.com), which is the largest MMUG in North America, meets on the last Wednesday of every month at the Mockingbird. If you wish to discover if there is an MMUG in your area, visit the Macromedia site (http://www.macromedia.com/cfusion/usergroups/ ) to see if there is a group near you. If there isn't, Macromedia will help you start one.

There are also a number of national and international conferences that focus on the use of the tools and provide you with an opportunity to meet some of the hottest developers on the planet. Macromedia's User Conference, MAX2003, is the annual "Big One." Others we suggest you seriously consider are TODCON—The Other Dreamweaver Conference—or MXNorth, both of which are run by Ray West out of Florida. Both are rapidly becoming important forums for Macromedia Web Developers from around the world. If Flash is your focus, consider FlashForward, which annually runs three conferences in San Francisco, New York, and Europe, or FlashintheCan, the annual Canadian conference.

Online discussion forums are also an invaluable source of information, tips and techniques, which are freely shared by some of the top minds in the business. In many cases, these lists function as Level One Trauma Centers when you are facing a deadline or an irate client and something just isn't doing what it is supposed to do. They provide you the opportunity to state your problem (be specific and very detailed if something isn't working), post your link or code, and ask for immediate help. The advice you receive may be both direct and pointed, but it is also a lifesaver. Also, don't be terribly surprised if someone from Macromedia jumps in with a suggestion. A list of some of the more important groups is located on the book's web site.

Let's go to work.


Part I: Building Dynamic Sites

1 What Is a Dynamic Site?

2 The Architecture of Dynamic Sites

3 Planning a Dynamic Site

4 Planning the Data for a Dynamic Site

5 Planning the Look


Chapter 1. What Is a Dynamic Site?

To hear the experts tell it, building dynamic sites should be left to them. They will point you to Amazon.com, CNN.com, or sites that feature interactive chats and live video feeds, and they will point out just how complex it can be to deliver a site of this genre.

The average web developer, whose client list includes a large number of local businesses, will listen to the expert's explanation of the technologies involved and the skills required and will have the following, understandable reaction: "Not for me, dude."

We beg to differ. Our response is quite the opposite: "Cool. Bring it on."

Before you start accusing us of being some sort of collection of "techno dweebs" or "tekkie elites," understand that a couple of us were in your shoes a few years ago. We saw it coming and said, "Nope, not for me…too complex…too technical. We'll never go there!" The way we got to the point in our careers where this chapter came about is a fairly typical story. Our clients started asking about building dynamic sites, which left us in the position of either getting dynamic or getting dead.


Dynamic Sites Defined

In a dynamic site, the content is delivered to the user's web browser or portable web device on demand. Pages are built as the server sends the content—images, text, animations, and so on—to the user's browser. From there, it is placed on the page and displayed on the screen. This is a far cry from pages where the content is fixed in place during the design process.

What, then, is a dynamic site? It is a site where, to use an industrial metaphor, the page is built "just in time." If you purchased this book online, you have experienced this metaphor. You requested the book title and were shown a page containing a picture of the book, the description of what's inside, our biographies, the price, a couple of similar titles to spark a buying frenzy, and customer reviews of the title.

That page is a template. The template is composed of a number of areas into which the pictures and text are placed and formatted. Those recommended titles are based on your buying history with the book seller, and that data, based on a rather sophisticated algorithm, looks at what you and others are buying and puts the book picture and the description into the slot in the template. The reviews are entered into a separate area of the site, kept in a database, and fed into the review area of the template.

In a static site, where the information is essentially "hard-wired" onto the pages, the web page for this book would not be a pleasant experience for the purchaser. Although there would be a picture of the book, a description, and maybe our biographies, for items like the latest reviews from our beloved readers or recommendations of similar titles to appear on the page, the web designer would be forced to build an entirely new page on a constant basis. For the user, the information needed is not readily available, meaning he or she has to hunt through several pages—called "data drilling"—to locate what is needed.

That simple phrase "dynamic site" is enough to scare off the average developer. It is quite understandable because getting into the game involves the use of some rather complex applications.

First up is a database. These applications range from the rather simple (and consequently popular), such as FileMaker Pro on the Mac or Microsoft Access on the PC, to the complex, such as Oracle or Microsoft SQL Server. A database holds the content, which could be text, images, sound, or video among others and displays the content in a way that is meaningful to the user requesting the data.

The data runs through another application, called middleware, which is the communication conduit between the database and the web page. Its job is often fairly simple: Build a web page using the requested data from the database. One of the most powerful middleware applications is also one of the easiest to use. The ease with which ColdFusion MX communicates with a variety of databases and Dreamweaver MX 2004 is astonishing (a developer edition of ColdFusion comes bundled with Macromedia Studio MX 2004).

The final application is Dreamweaver MX 2004. When Macromedia released the MX version of this application in the fall of 2002, Dreamweaver users were simply agog at the number of new features built into it. What really caught their attention was the capability to create dynamic sites without the steep learning curve, which was all too common prior to the release of the MX Studio. Using a relatively simple point-and-click interface with a minor knowledge of building a template, we could get into the game in a relatively painless manner.

So What's with a Dynamic Site?

Dynamic sites have actually simplified the job of the web developer.

Prior to their introduction, a typical web site was a potential administrative nightmare. It usually contained a few dozen pages and a ton of content. The nightmare occurred when the client changed something. Inevitably, that change rippled through any number of pages. This was a time-consuming process, which, in many respects, involved the client wondering out loud, "I thought the Internet would speed things up." Even if one were to use a Dreamweaver MX 2004 template, a global change often meant updating the entire site.

By going "dynamic," things do get a speed boost. Production essentially focuses around content. Rather than spending an inordinate amount of time on each page, the combination of database, middleware, and Dreamweaver MX 2004 templates permits each member of the team to focus on his or her specialty. The end result is a more efficient workflow.

Changes can be accommodated almost instantly. For example, assume you have just completed a site for a resort. After a couple of months, the resort management changes the bedspreads in the room from a muted geometric pattern to a vibrant floral pattern. On a static page, this change— image and descriptive text—would have to be manually added to each page where the image and the descriptive text is used. In the dynamic universe, simply changing the image and the text files called by the database ripples through the entire site…instantly.

Dynamic sites permit you, to use a management "buzz phrase," to think outside the box. By doing this, you avoid a concentration on the technology and focus on the user. This is a fundamental shift in thinking. A great example is Amazon.com.

This company pays close attention to your buying patterns. For example, one of the authors started thinking about the theoretical aspects of this business and purchased a few books written by Peter Lunenfeld and Lev Manovitich. Now, when he hits Amazon, the site notices he has arrived, and the page that appears contains suggestions for titles of the same genre as those ordered previously. Thus, your welcoming page will differ significantly (based on your buying patterns at Amazon) from that shown in Figure 1.1.

Figure 1.1. The author's Amazon page, featuring suggestions based on his buying patterns. They may be significantly different from yours.

Photographers can now shape their sites to reflect client interest. If I am interested in landscape photos, those images appear on my screen. Educators are looking at putting their classes online and building sites incorporating video, audio, and chat in an effort to approximate the classroom experience.

The Function of Dynamic Sites in Today's Internet

The Internet of 2003 is a far cry from the Internet of 1998. For all intents and purposes, the web was a static place where information was fixed in place. Pages were HTML-driven, and sites rich in content could be expected to contain easily over 100 individual pages.

In today's dynamic environment, those hundreds of pages have been reduced to a handful of templates. What those templates can do, when compared to their 1998 ancestors, is simply astonishing.

They permit the free flow of commerce between businesses and their customers and between businesses themselves. These financial transactions can occur in real time and can streamline the purchase and delivery cycle.

It isn't only business that benefits from this shift in focus. News organizations—electronic and print-based—that deal with time-sensitive information are able to develop web sites that reflect the latest breaking news. For example, Figure 1.2 shows the home page of the author's local paper on April 20, 2003. The stories on this page match those of the front page of that day's edition.

Figure 1.2. The home page of the Toronto Star reflects the content on the front page of the print edition of the newspaper.

Looking for a cool job? How about working on a cruise ship? CruiseShips.com is a job board with a difference. Need that first leg up in the interactive media development business? Why not have a class of New Media students put together a dynamic site that showcases their talent to prospective internships, such as the one put together by the students attending Hyper Island (http://www.crew8.net/thetree/) off the coast of Sweden.

Are you a medical researcher who wants to share your findings on a regular basis with your peers? Dr. Dale Purvis at the Duke University Medical Center has created a site for this purpose. He uses Flash to make his research findings regarding visual perception available to his peers (See Figure 1.3).

Figure 1.3. Research findings can be presented to a broad audience in a timely, engaging, and effective manner, as shown by this example from Dr. Dale Purvis' site.

These sites are here to stay, and, as you have seen, your only barrier into the game is the limit you put on your creativity.


Dynamic Site Tools

Macromedia Studio MX 2004 features a full complement of tools that enable you to go right to work. Freehand MX is a powerful vector-drawing tool that integrates workflow with not only Flash MX 2004 but also Fireworks MX 2004. Flash MX 2004 is able to talk to the Flash Communication Server MX and have content fed into it through ColdFusion MX, and Flash files can be used in Director MX presentations and, of course, be embedded in a Dreamweaver MX 2004 page.

Dreamweaver MX 2004 is the hub of the Studio. Content created elsewhere can be easily added to Dreamweaver MX 2004 pages, and, if the content is Flash MX 2004- or Fireworks MX 2004-produced, it can be edited in those applications with a single mouse click in Dreamweaver MX 2004. Dreamweaver is easily configured to communicate with ColdFusion MX, allowing you to preview your data in real time. It ships with an abundance of ready-made templates and can even be used as an ActionScript editor.

Fireworks MX 2004 is the imaging application with the capability to accommodate slicing, gif animation creation, pull-down menus, buttons, and a host of other features.

The following is a listing of many of the tools and a short list of their major features:

  • Dreamweaver MX 2004

    • Rapid development and management of HTML and XHTML pages.

    • Code and design views accommodate all skill levels.

    • Capability to create template-driven sites for a uniform look and feel.

    • Capability to integrate content from Flash MX 2004, Freehand MX, Fireworks MX 2004, and Director MX.

    • Live data preview.

    • Full CSS support.

  • Flash MX 2004

    • Streaming vector-based multimedia means rapid downloads to browsers.

    • Online Internet Application development tool (also known as Rich Internet Applications).

    • Hundreds of third-party components available.

    • Superb integration with Freehand MX.

    • Capability to add video and audio to Flash presentations.

    • Capability to easily create dynamic Flash presentations and sites.

  • Fireworks MX 2004

    • One of the best web image optimization tools on the market.

    • GIF animations, buttons, rollovers, and pop-down menus are simple to create.

    • Slicing and hotspot features for large pages or image maps.

    • Full complement of special effects features ranging from Drop Shadows to code-driven special effects.

    • Works with vectors, bitmaps, and images composed of both vectors and bitmaps.

    • Seamless Flash MX 2004 integration.

    • One-click access to Fireworks MX 2004 from Dreamweaver MX 2004 and Freehand MX.

  • Freehand MX

    • Freehand MX symbols move seamlessly into Fireworks MX 2004 and Flash MX 2004.

    • Connector tool for rapid creation of site maps.

    • Action tool for creation of prototype clickthrus.

    • Multiple page feature allows for site comp creation in one, not several, documents.

    • Master pages can be applied to different pages of a multipage Freehand document.

    • One-click bitmap editing with Fireworks MX 2004.

    • The most robust collection of typographic tools in the Studio.

    • Libraries can be shared among members of the team.

  • Director MX

    • Industrial strength multimedia development tool.

    • Capability to integrate content from various sources.

    • Full-featured programming language.

    • Capability to call content on demand rather than waiting for the entire movie to stream.

    • Access to Flash Communication Server.

  • ColdFusion MX

    • Tag-based language.

    • Integrates databases with web pages or Flash movies.

    • Built-in search engine and scheduler.

    • Rapid application development.

  • Flash Communication Server

    • Streaming communications between Flash players.

    • Integrates with various middleware.

    • Capability to share objects between connected Flash players.


The Skills

The day of the web guru is over. This mythical character hung up his robe and sandals when web development became a serious business requiring a specialized skill set for each member of the team. The process is complex and, depending on the scope of the project, will require skills ranging from project management to database programming. This situation requires a team-based approach to the development process and grew from the fact that the industry quickly realized the skills needed are specialized, not generalized.

The complexity of dynamic web design has also injected complexity into the production process. The major accommodation to this change was the shift from the "one-developer-does-all" workflow to the adoption of a team-based production workflow.

These teams are a collection of internal or external specialists, each charged with a specific task. These individuals are either currently employed by the developer or are a collection of contract workers with whom the company has developed a working relationship through collaboration in past projects or through peer referrals.

Those of you reading this book who are sole proprietors or who manage a small firm composed of two partners and a couple of developers may think this workflow model doesn't apply to you. Nothing could be further from the truth. In today's production environment, time really is money, and clients are no longer willing to fund your "learning curve." You either can do the job, or you can't, and if you can, budgets are such that there is no margin for doing things a few times before you get it right. You have one or two opportunities to get it right. After that, the client will seriously start to question your competency or refuse to pay for the time spent getting it right. Thus, finding the right people to bring their talents to bear on a project at the right time not only makes business sense but also could be an issue of simple corporate survival.

Though the skills are varied, they fall into three loose groupings:

  • Management

  • Design

  • Code

Keep in mind that the structure is rarely formalized. The skills vary to reflect project complexity, and those skills can overlap or be carried out by one or a number of the team members.

Management

The following is a breakdown of the management team and their roles:

  • Project Manager: This individual is the primary contact between the client and the team. He or she could have a formal title reflecting this status or could be a principal of the firm. Regardless of title, this individual is tasked with managing the team and the client, as well as the entire process from concept to upload.

    You may also be working with a Project Manager on the client side. In this case, this individual is charged with representing the client and will be responsible for approvals, content delivery, and generally ensuring the client's needs and expectations are met.

  • Information Architect: This relatively new position ensures the information on the site is both accessible and understandable. He or she will work with the Creative Director, the Technical Director, and the client to determine how the information on the site is structured, how the information flows through the entire site, and that the technological infrastructure being developed is sound.

  • Creative Director: Tasked with setting the parameters for what the users see, hear, and experience on the site, this individual manages the creative side of the process. It is his or her task to create and champion the vision: to motivate the creative team and to articulate the creative vision in such a way that each member of the creative team clearly understands the "look and feel" of the site. This individual also develops the creative strategy, develops the storyboards, and then rolls up his or her sleeves and goes to work.

  • Content Manager: A large, technically complex project will require this individual's services. He or she is charged with gathering the content in the areas of copy, images, illustrations, video, audio, interactive animations, or any other element that will appear on a page in the site.

  • Technology Director: It would be a huge mistake on your part to regard this individual as the "Lead Geek." This key individual is responsible for how the site functions. One task is the creation of a document outlining the site's technical and functional specifications. This individual also may be responsible for the creation of forms, shopping carts, databases, and content management systems.

Design

Though there could be a myriad of creative specialties brought to bear—type designer, illustrator, digital imaging specialist—there are essentially two major roles:

  • Web Designer: Reporting to the Creative Director, this individual works on the site's appearance and assembles the web pages using the provided content. In certain instances, this individual will also be assigned the illustration or imaging tasks using Dreamweaver MX 2004, Freehand MX, Flash MX 2004, or Fireworks MX 2004. Though sometimes derisively referred to as the "Pixel Monkey," this individual's role is far more critical than slinging pixels around a screen.

  • Interactive Designer: Using either Flash MX 2004, Fireworks MX 2004, or Director MX, this individual ensures all animations or interactive content are both well-designed and functional. This role inevitably involves a familiarity with ActionScript (Flash), JavaScript (Fireworks), or Lingo (Director).

Code

No matter how you approach it, the web inevitably revolves around code. Some of the major roles are:

  • Web Programmer: Reporting to the Technology Director and working with the Database Programmer/Designer, this individual is responsible for ensuring the code—XML, HTML, JavaScript, DHTML, and XHTML to name a few languages —integrates seamlessly with both the look of the site—usually driven by Cascading Style Sheets—and the back-end server functions that actually make the site work.

  • Database Designer/Administrator: If the project involves e-commerce or has a degree of complexity requiring a skill set unavailable to the team, you need this individual. He or she is responsible for developing the database and the ColdFusion MX code links to the content in the database. In addition, it is this individual's task to ensure the various relationships between the elements of the database are both logical and functional.

  • ActionScript/Lingo Programmer: The addition of ActionScript to Flash 4 and the constant improvements to Director MX's language, Lingo, may require the services of these very talented individuals. On the Flash side of the equation, this individual may be required to manage the coding tasks around the use of Flash Components or to write the code that matches the vision of the Creative Director. On the Director side, this individual will write the code that manages the Director Xtras that communicate with a database or drive the interactivity of the entire presentation.

  • Quality Assurance Tester: This is one of the more thankless jobs in the process. What makes this a key position is this individual will be the difference between a project's success or failure. This individual is tasked with assuring everything does what it is supposed to do. He or she will test every element on a page and report any problems to the Creative and Technology Directors.

These are some of the key roles, and this list is, by no stretch of the imagination, a complete one. A team's structure derives from the scope of the project, the budget, and the project plan; thus, there are no standards for team composition. In the case of Amazon.com, the team is huge, with clear lines of responsibility and duties. In the case of smaller shops, the duties may overlap or be shared among individuals.


Team Management

Managing the production process has been regarded by some as being as easy to accomplish as the "herding of cats." In some respects, this statement is accurate because of the personality types and skill sets involved. It would also be incorrect.

If you were to stop reading this chapter at this point, you would assume that the web development process involves a number of very specialized skills that could be compartmentalized on an organization chart. Don't do it.

The management of a team does not follow the "Me Boss, You Worker" hierarchical model. When it comes to web development, the manager is more of a facilitator and supporter than anything else. He or she manages the resources and makes them available to everyone when needed. This includes pulling together a team with complementary skill sets. He or she also takes the time to discover the strengths and weaknesses of each member of the team, ensuring there is a proper balance between the strengths and the weaknesses.

Building the Team

One of the authors has been following the writings of a fellow author, Molly Holzschlag, for a number of years. In her latest New Riders book, Integrated Web Design, Building the New Breed of Designer and Developer, Molly talks about the rise of the production team and suggests that the members not be specialists. She contends they should be "integrationists," and we couldn't agree more.

The divisions of Management, Design, and Code are more arbitrary than anything else. This is because the members of the team should have broad enough skill sets that their secondary skill backs up or complements the role of other team members.

As a teacher, one of the authors is constantly reinforcing this point with his students. Inevitably, they will each find their way into his office to tell him a course "sucks." This is student code for "I don't see why I have to learn something I will never use." On this particular day, he was having this conversation with a student and decided to open the student's eyes.

"So you are working on a team and doing a lot of the design work?" the teacher asked.

"Yes," was the student's reply.

"When you discuss the project with the team, is everybody around the table, including the coders?"

"Yes, we have some great discussions."

"Then I can assume you knew what the coders were talking about, and when they asked you questions about the design, you understood the question was to help them grasp what you are trying to do?"

"Yes."

"So what do you do," the teacher asked, "when you aren't designing?"

"I do my own code, and when I am stuck or need advice, I go talk to one of the coders."

Game. Set. Match.


Asset Management

When it comes to building dynamic sites, proper management of content is critical. With pages that are seemingly "built on the fly," a misfiled image or the wrong version of a Flash MX 2004 animation could potentially result in huge problems. There are a number of web production books out there—Kelly Goto's New Riders book Web Redesign: Workflow That Works is one of the best—but the bottom line when it comes to managing content is managing what you have, when you have it. That involves managing content when it is in production, and then managing it when it is ready to be called into the page.

Managing What You Have While You Create It

Here's a typical scenario. You need a logo. You go to a Logo folder where you are confronted with a dozen files named "logo." What makes it even more confusing is that they are named "logo1," "logo2," and so on. What you need is the EPS version of the latest logo. Good luck.

Naming Conventions

Proper naming conventions are absolutely critical when building a dynamic site. Files ranging from sounds to text are created in a variety of applications, and improperly named files can have a serious impact upon workflow.

Though there are no formal rules when it comes to naming files, it is absolutely critical that there be a standard and that it be rigorously adhered to by everyone on the team. When setting your file naming system, consider these points:

  • Use lowercase lettering for all filenames. This is especially important when sites are hosted through Linux or Unix servers.

  • Add a three-letter extension to all files to aid identification, such as video.mov. Hard-core Mac users may object, claiming this is a PC convention more than anything else. Realizing that the Internet is meant for more than Macs, and with Mac OS X firmly in place, this shouldn't be an issue anymore for Mac users wanting to communicate with the rest of the world.

  • Use the four-letter extension—HTML—for all web pages if you intend to host your pages on Unix/Linux-based servers. If you are using a Windows-based server, you can use HTM for your extension, although HTML is recommended.

  • Always name the first page of any site index.htm, index.cfm, index.jsp, or whatever the default page would be for the server on which you would be deploying your web site. Windows servers also allow the name default.htm to be used. However, if you were to wind up moving your web site to a Unix server, you would probably have less of a hassle using index.html or the others mentioned above than you would trying to get the server administrator to add default.htm to the Apache httpd.conf file.

File Extensions

Always consider the file source when adding the file extension to the name. There are a number of different file formats for similar media, and being able to determine which format is being used is absolutely critical. For example, the two more common video formats are QuickTime and AVI. Each uses a different player, and a file named "Video_01" could have implications for playback. Here are some suggestions:

  • HTML: Use the four letters for all HTML pages.

  • CSS: Cascading Style Sheet.

  • ASP: Active Server Page.

  • JSP: Java Server Page.

  • CFM: ColdFusion MX Page.

  • SWF: Flash MX 2004 or Director MX movie.

  • FLA: Uncompressed Flash MX 2004 movie.

  • DIR: Uncompressed Director MX movie.

  • CST: External Director cast.

  • GIF: Gif image.

  • JPG: JPEG image.

  • PSD: Adobe Photoshop Document.

  • EPS: Postscript drawing from Freehand MX or Adobe Illustrator.

  • PNG: PNG graphic, which is the default format for Fireworks MX 2004.

  • TXT: Plain text file.

  • MP3: MP3 audio file.

  • WAV: Windows sound file.

  • AIF: Actual name is AIFF (Audio Interchange File Format).

  • MOV: Quicktime Video.

  • AVI: A Windows Media Player video format.

  • PDF: Adobe Acrobat file.

Naming Images

When you consider the fact that buttons require three separate images—Up, Over, Down—and that logos created in Freehand and Fireworks eventually have to be rasterized, you quickly come to the conclusion that the way files are named is just as important as their extensions. Here are some suggestions:

  • btn_name.gif: A button without a rollover or "clickable" state.

  • btn_name_up.gif: The up state of a button.

  • btn_name_over.gif: The over state of a button.

  • btn_name_down.gif: The down state of a button.

  • logo_name.eps: The vector version of a logo.

  • Icon_name.png: Icons, custom or standard, used throughout a site.

Tip

Though computers can read the space between words—for example, the space between e and b in the book— browsers tend to have a bit of a problem with the space between the words because the space is often a delimiter between commands and parameters to the server. Thus, the browser will attempt to compensate by URL-encoding it as "the%20book." Spaces between names are considered bad practice. Thus, it is best always to use an underscore between words. In this instance, the file would be named "the_book."

File Management Issues

"Page Not Found" error messages, inactive links, and broken file icons are clear indications of poor file management. Studio MX 2004 contains a number of very robust tools designed for this specific purpose. The odd thing about these tools is very few developers are aware of them or use them on a regular basis.

Managing What You Have When It Is Created

Change is a given when it comes to the creation of content for dynamic sites. Clients will request changes. Contractors will request changes. Inevitably, you will make a change, and the client will decide an earlier version of the file is the one to be used. Here are some suggestions for managing versions of files:

  • Number all files. lLogo_0010.png indicates the first iteration of the file.

  • Indicate minor changes by changing the number to logo_0011.png.

  • Indicate major changes by changing the number to logo_0100.png.

  • Place all files in a folder off the main directory and group them in a rational manner. For example, graphics/icons/buttons.

  • Use naming conventions that make sense to everyone.

  • Use the Check In/Check Out feature of Dreamweaver MX 2004.

  • Use the Design Notes feature of Fireworks MX 2004 and Dreamweaver MX 2004 to facilitate communication among the team members. Design notes are the virtual equivalent of a "sticky note." As Dreamweaver pages or Fireworks files move through the production process, these notes move with them.

File Management and Check In/Check Out in Dreamweaver MX 2004

When you define a remote site in Dreamweaver MX 2004, all the remote options, except for None, present you with the opportunity to Enable File Check In and Check Out. If you are on a production team, always select this option. Doing so lessens the remote chance of two people working on the same file at the same time.

If a file is checked out, you will see a check mark next to the file's name in the Site Window. If the check mark is red, the file is in use, and the user's name will appear. If the check mark is green, you are working on the file. Clicking on a user's name opens your email application and allows you to shoot a note to the individual working on the file.

Setting up the Check In/Check Out protocols is quite easy if you follow these steps:

  1. Select Site, Manage Sites… to open the Manage Sites dialog box. Select the site from the list on the left and click the Edit button. If the site is a new one, click the New button or select Site, New Site….

    At this point, depending on how you have configured your version of Dreamweaver MX 2004, clicking the Edit button or the New button will launch the Site Definition Wizard. If this happens, simply click the Advanced tab in the Wizard.

  2. When the category list appears in the Advanced Options, select Remote Site. Selecting any of the options in the Access pop-down menu, except for None, will activate a button at the bottom of the window that will activate Check In/Check Out. Click the Enable File Check In and Check Out button to open the options shown in Figure 1.4.

    Figure 1.4. Once you select Enable File Check In and Check Out, you simply have to add your name and email address.

  3. Enter your name in the Check Out Name Box. Many developers add the location or computer they are using. For example, Jordan has a portable computer, a computer in his home, and another in his office. In this case, he would enter Jord-Home, Jord-Office, or Jord-Portable. This lets the others in the group know not only who has checked out the file but where he is working on that file. Entering your email address allows one-click communication within the work group.

  4. Click OK to Enable Check In/Check Out. This closes the Advanced Window and returns you to the Edit Sites dialog box. Click Done to close the box and save the changes made to the site.
Using Check In/Check Out

Having enabled Check In/Check Out, here is how to check a file out.

  1. Open the site and select Site, Check Out, Command-Option-Shift-D (Mac) or Control-Alt-Shift-D (PC). If there are files such as video and downloads associated with the page, the Dependent Files dialog box will open. Selecting Yes will download those files to your disk as well.

  2. After you make your decision, a Status Window will open, and a progress bar will show you the progress of the download to your computer. When that is complete, a check mark will appear beside the checked-out file as shown in the Site Map in Figure 1.5.

    Figure 1.5. The file Index.html has been checked out by Tom, and clicking his name in the Checked Out By area will launch your email client.

  3. When you are finished with the file, make sure the site is active and the files to be Checked In are selected. There are a number of ways to check the file(s) in, such as:

    • Select Site, Check In, Command-Option-Shift-U (Mac) or Control-Alt-Shift=U (PC).

    • Click the Check In button on the Site View toolbar.

    • Select the files and Right-Click (PC) or Control-Click (Mac) to open the Context menu. Select Check In.

  4. If there are dependent Files associated with the document, select Yes when prompted.


Summary

The purpose of this chapter is to get you into the dynamic mindset. We started off by presenting what a dynamic site does and some of the tools involved, and we showed you a couple of examples of sites from a variety of industries that use the tools necessary to create dynamic sites.

We took a look at the major tools in Studio MX 2004 and presented a brief overview of their features. As you saw, they also integrate quite seamlessly with each other.

Having presented the tools, we looked at the people who will use them. We talked about the rise of the work team and reviewed the three major categories—Management, Design, and Code—of the team's composition. We also presented a brief overview of many of the more important roles played by each team member. Remember, the structure mirrors the complexity of the project, the budget, and your particular way of managing workflow.

Once the team goes to work, content starts to get created. We reviewed Asset Management from the perspective of Naming Conventions and File Management.

One of the more important file management tools is an integral feature of Dreamweaver MX 2004. File Check In and Check Out in Dreamweaver MX 2004 was reviewed from the way it is implemented to the way files are Checked In and Checked Out in order to avoid team members working on the same file simultaneously.

Having looked at a variety of the "soft" issues of web development, the next chapter gets a bit more specific and discusses the underlying structures—the architecture—of dynamic sites. It also demonstrates how to let the software do most of the work using specific productivity-boosting techniques using Flash MX 2004, Freehand MX, and Dreamweaver MX 2004. The chapter finished with an interesting discussion of how information is structured in a dynamic site.


Chapter 2. The Architecture of Dynamic Sites

Building dynamic sites requires you to take an entirely different view of the way you build web sites. First off, workflow has changed simply because databases and middleware have been injected into the process. The result is that you have to work with individuals who have an unfamiliar skill set. Whole new languages—CFML, PHP, and JSP, to name three—are now part of the vocabulary. Specialized software, such as ColdFusion MX and Flash Communication Server MX, and database software, such as MySQL or MS Access, also come into play.

The applications have also changed. Integration between the tools is tighter than ever. Symbols suddenly become a productivity tool, not a "neat" feature. Code-driven work no longer requires an intimate understanding of the languages—though it helps—and we demonstrate an example of this point in both Flash MX 2004 and Dreamweaver MX 2004.

Even assembly is different. Instead of content being placed where you put it on the page, it now sits in a database and is added to the page when needed. Dreamweaver templates, along with server-side templates, suddenly take on an unfamiliar importance. Flash components become even more necessary and less mysterious than in the past.

Even site construction is different. Sites tend to start small and grow large in a very short period of time. These sites are said to be scalable, meaning the developers can add to the sites at a later date with minimal effort.

Everything has changed, and if you are like us, you are probably wondering, "Where do I start?" A great place is with a famous Greek dessert, Baklava.


The Pancake Principle of Dynamic Site Architecture

Baklava is composed of a few dozen sheets of filo pastry stuffed with nuts and soaked in a honey sauce. The process of creating the dessert is rather simple. Five or six sheets of filo pastry are place on top of each other, the top filo sheet is buttered, a layer of ground nuts is smoothed over the layers, and some of the honey mixture is poured over the filling and the filo. This process is repeated until you have used all of the ingredients.

When completed and ready for the oven, you have used about 36 sheets of pastry, three layers of filling, and a cup or so of the honey sauce. If you are like one of the authors, you will also have a huge mess to clean up in the kitchen.

Were you to build this dessert dynamically, you would only need one sheet of pastry and a simple description of the filling and the sauce. When it was built, in the oven, multiple copies of the sheet of filo would be used and the filling and sauce would be added when needed. Suddenly the ingredients (and resulting mess in the kitchen) for the creation of a complex dessert become negligible, and the process becomes simplified to the point where a multi-layer dessert essentially flattens into a pancake.

The best part of this process is you can create other delicacies, such as spinach and feta pie, using essentially the same instructions and ingredients.

Keeping the Structure as Flat as Possible

The method of building a static web site is very much like creating that dessert. Each page in the site is a sheet of filo pastry. Physically laying one page over the other and adding the content—the filling and sauce—before moving on to the next page is how you build the static site—the dessert.

The dynamic method only requires one sheet of pastry—a template—and a database containing both text and pointers to the location of the sauce and filling. The dessert is built in the oven—the middleware—by allowing the pastry to call the database, ask for the ingredients (as they are needed), and create the finished pastry as outlined in the directions—the code—in the template. The finished pastry is then handed over to the customer—the browser—for consumption. When you build the dessert this way, a few things happen:

  • The site is built much more quickly and efficiently because it is essentially code-driven and requires less building and maintaining time.

  • You can immediately accommodate those with nut allergies—personalization—by changing the ingredients in the filling.

  • The structure of the site flattens. One page is able to accommodate the needs of many users, rather than many pages being built to accommodate the anticipated needs of a few.

In this manner, you suddenly regard a complex, multi-layer dessert in terms of a single layer… a pancake. You are dealing with complexity, as one of the authors is fond of saying, from a position of simplicity.


Let the Software Do the Work

The key to building a dynamic site follows the first rule of digital media creation and how one deals with complexity: "Let the software do the work."

When software gets involved, things happen much more quickly and efficiently than if you do it yourself. Four examples of letting the software do the work are symbols, Flash MX 2004 Components, Dreamweaver MX 2004 Snippets, and the Dreamweaver MX 2004 Application Panel.

Symbols in Freehand MX, Flash MX 2004, and Fireworks MX 2004

Symbols are nothing more than a blueprint of the original artwork. They reside in Libraries, and when the artwork is needed, instances of that artwork can be dragged into the document from the Library. How many instances? An infinite number because they are simply proxies or "instances" of the original work. Instances are extremely small because they are nothing more than pointers to the original symbol, which resides in the application's Library. The great thing about symbols and their instances is the capability to change an instance's size or color without affecting any other copies of that instance on the page. However, if you change a symbol, all instances will instantly reflect that change.

Follow these steps to discover how symbols created in Freehand smoothly move to Fireworks and Flash:

  1. Download the Chapter_02Exercise folder from the book's web site.

  2. Open the Apple.fh10 file, located in the SymbolsEx folder, to launch Freehand MX.

    When the file opens, open the Layers panel. You will notice the image is composed of a number of named layers. Those layers are going to be converted to symbols. Close the Layers panel.

  3. Open the Library by doing one of the following:

    • Pressing the F11 key,

    • Selecting Window, Library, or,

    • Opening the Assets panel and clicking once on the Library tab.

  4. Select the Pointer tool and click once on the apple. With the apple selected, press the F8 key or select Modify, Symbol, Convert to Symbol. A file named Graphic-01 will appear in the Library, as shown in Figure 2.1.

    Figure 2.1. After a symbol is created, it immediately appears in the Freehand MX Library.

  5. Click once on the name of the symbol in the Library to select the name. Change the name of the symbol to Apple.

  6. Create symbols for the stem, the leaf, and the dimple in the apple.
Moving Symbols Between the Applications

The Freehand drawing is composed of four layers and four symbols. Those layers and symbols are easily moved to Fireworks for rasterization, slicing, or any other Fireworks operation. Follow these steps to move symbols and layers from Freehand to Fireworks:

  1. Open Fireworks MX 2004. When the application launches, open a new document with a canvas that is 10 inches by 10 inches with a white background. Don't maximize the window on a PC.

  2. Navigate back to the open Freehand MX page, make sure it isn't maximized, and select all the objects on the page.

  3. Drag the selected objects from the Freehand page to the Fireworks canvas. When you see a hollow square appear over the Fireworks canvas, release the mouse. The Apple will appear on the Fireworks canvas.

    Tip

    Alternatively, you can copy and paste without changing the program windows, even if both program windows are maximized. The Library items will retain their names. If you want to retain layer names, then you need to import the Freehand file into a pre-existing file in Fireworks. The art would not, however, be contained in their original layers.

  4. Open the Fireworks Library by selecting Window, Library, pressing the F11 key, or by clicking the Library tab in the Assets panel. You will see all the Freehand symbols are now residing in the Fireworks library.

  5. Open the Fireworks Layers panel by selecting Window, Layers, pressing the F2 key, or selecting Layers in the Panels grouping. When the Layers panel opens, you will first notice the object on the canvas is grouped. Select the object and then select Modify, Ungroup, or press Control-Shift-G (PC) or Command-Shift-G (Mac) to ungroup the symbols. Your Fireworks panels should resemble those shown in Figure 2.2. The little arrows in the bottom-left corner of each object on the canvas indicate the object on the canvas is an instance of a symbol.

    Figure 2.2. Freehand symbols and layers move smoothly into Fireworks. Note the arrow in the bottom-left corner of each object on the Fireworks canvas denoting the object is an instance of the symbol in the Library.

  6. Close the Fireworks document and don't save the changes when prompted.

Sharing Freehand MX Libraries

In a collaborative production environment, making the same artwork available to everyone makes solid business sense. In the case of Freehand MX, a Library can be shared among the members of the team. This Library can be placed on a CD or other media or on a server that can be accessed by all concerned.

To create a Shared Library in Freehand MX, follow these steps:

  1. Open the Library to be shared and select Export from the panel pop-down menu as shown in Figure 2.3. This opens the Export Symbols dialog box shown in Figure 2.4.

    Figure 2.3. Library items can be exported by selecting Export from the Library panel pop-down menu.

    Figure 2.4. The Export Symbols dialog box allows you to export only the symbols you choose.

  2. Select the symbols to be exported and click the Export button at the bottom of the Export Symbols Dialog Box. This will open a dialog box named Save.

  3. Name the file and navigate to where the file will be saved. Click OK.

    A Freehand file with the name you assigned to it will appear in the Save location. When you open the file, you will see two things:

    • The document is blank.

    • The Library is populated with the symbols you put into the document in Step 2.

The advantage to you, as developer, is the capability to have all logos, drawings, and so on in one place. Move the file to a server, and that artwork becomes accessible to anyone authorized to access it. In addition, those symbols can be easily added to Fireworks or Flash documents.

Moving Freehand MX Symbols to Flash MX 2004

Building the assets for a Flash animation is not difficult if you let the software do the work. In this case, creating the assets in Freehand will enable you to create the basis for a Flash animation in record time. Here's one way Freehand and Flash are an unbeatable combination:

  1. With your Apple drawing open in Freehand MX, launch Flash MX 2004 and open a new document.

  2. Create a new Flash movie clip by selecting Insert New Symbol, Control-F8 (PC) or Command-F8 (Mac). This opens the New Symbol dialog box. Name the symbol, select Movie Clip, and click OK to open a blank page.

  3. Select the entire apple in the Freehand document and drag the apple from the Freehand page to the blank Flash page. When you see the same square as you saw in the Fireworks example, release the mouse. The apple will appear on the Flash stage.

    Tip

    You may be wondering why the apple was dragged into a Flash symbol and not directly onto the Flash stage. Flash developers rarely place images on the main timeline of the Flash movie.

    Using symbols and instances on the main timeline actually results in more efficient construction and playback. It also enables you to apply Motion Tweens, fades, and other effects that can only be accomplished through the use of symbols. This is why it is a good habit to place any assets you may wish to add to a Flash movie into their own symbols.

  4. Open the Flash Library by either pressing Command-L (Mac) or Control-L (PC). Other methods are selecting Window, Library or, if the Library is visible on your panels, click the Library panel. You will note all the Freehand symbols are currently residing in the Library as shown in Figure 2.5.

    Figure 2.5. Freehand symbols are placed into the Flash Library when the drawing is dragged and dropped into Flash.

Animating Freehand MX Symbols in Flash MX 2004

When Freehand symbols are placed into a Flash Library, the symbols created in Freehand move to Flash, and another symbol with the Freehand document's name appears in the Flash Library. This is the composite containing all the symbols used in the drawing and is the symbol on the Flash stage. It also retains the relative placement of the four symbols that make up the entire apple.

Animating the symbol is quite simple if you let the software do the work. Here is how:

  1. Select the apple on the stage and select Modify, Break Apart, or Command-B (Mac) or Control-B (PC). The image will change to four objects on the stage. An alternate method is to select the entire apple on the movie clip's stage so that you do not need to use Break Apart. Also, this method keeps the whole animated sequence inside a movie clip of its own, which makes things easier if you decide to change the position of the animation.

  2. Select Modify, Distribute to Layers, or Command-Shift-D (Mac) or Control-Shift-D (PC). The result is that each symbol has its own layer, named for the symbol it contains.

  3. Delete the layer named Layer 1.

As you can see in Figure 2.6, each symbol now has its own layer and can be animated.

Figure 2.6. Objects containing symbols created in Freehand MX are animated by breaking the symbol apart and distributing the symbols to layers.

Using Flash MX 2004 Components

Another prime example of letting the software do the work is utilizing the components in Flash MX 2004.

The components feature of Flash MX 2004 injects a more efficient workflow into the content creation process. Components are drag-and-drop, fully coded Flash movies that perform a specific function. These functions range from adding scroll bars and text boxes to providing live video feeds through the Flash Communication Server MX. The beauty of components is that they are easily reusable pieces of code that don't require the average user to have an intimate understanding of ActionScript.

The TextArea component is relatively simple to utilize when you need scrolling text on your Flash site. Follow these steps to use the TextArea component:

  1. Create a new Flash movie and use the Flash MX 2004 defaults.

  2. Open the Components panel. If it isn't open on your machine, select Window, Development panels, Components, or press Control-F7 (PC) or Command-F7 (Mac).

  3. Open the UI Components and drag a copy of the TextArea component to the stage.

  4. With the TextArea component selected on the stage, click once in the Instance name area of the property Inspector and name the instance Component_txt.

When you finish, your Property Inspector should resemble Figure 2.7.

  5. Click once on Frame one of the timeline and press the F9 key to open the ActionScript editor. When the editor opens, click once inside the text input window and enter the following:

    [View full width]

Component_txt.text = "The components feature of Flash MX injects a more efficient workflow
   into the content creation process. Components are drag-and-drop, fully coded Flash movies
   that perform a specific function. These functions range from adding scroll bars to text
   boxes to providing live video feeds through the Flash Communication server. The beauty of
   components is they are simply reusable pieces of code, which don't require the average
   user to have an intimate understanding of Actionscript."

  6. Close the Editor to return to the Main Timeline. Save the movie and test the movie by pressing Command-Return (Mac) or Control-Enter (PC). The movie opens and you should be scrolling the text as shown in Figure 2.8.

    Figure 2.8. The TextArea component automatically adds scroll bars to text boxes in Flash.
Figure 2.7. A text area is prepared for scrolling text in Flash.

Using Snippets in Dreamweaver MX 2004

It is not unheard of for developers to visit sites offering free JavaScript scripts and so on for use in web pages. Some bits and pieces of code are also proprietary and are used repeatedly in a number of pages or sites. Managing these blocks of code for easy access and insertion into a page is a breeze if you use the Snippets panel in Dreamweaver MX 2004. Here's how to use the Snippets:

  1. Open Dreamweaver MX 2004 and select Window, Snippets, or press Shift-F9 (Mac and PC). The Snippets panel shown in Figure 2.9 opens.

    Figure 2.9. The "Different Color Link" Snippet is placed in the code view.

  2. The Snippets panel contains quite a few Snippets, ranging from JavaScript for breadcrumbs to code that changes the color of a link. If you click on one of the Snippets in the panel, the code will appear at the top of the panel, and the snippet will be selected.

  3. To add a Snippet as a block of code to your page, select View, Code to open the Dreamweaver Code View or View, Code and Design and:

    1. Click once in the Code where you want the Snippet placed and double-click the Snippet; or,

    2. Click once where the code is to be placed, select the Snippet and click the Insert button located at the bottom-left corner of the Snippet panel; or,

    3. Drag the Snippet from the Snippet panel into the Code View.

Adding a Snippet to the panel is just as easy as adding a Snippet to your code. To add a Snippet:

  1. Click the New Snippet button at the bottom of the Snippets panel to open the Snippet dialog box shown in Figure 2.10.

    Figure 2.10. The Snippet dialog box allows you to add Snippets to the Snippets panel.

  2. Enter a name for the Snippet in the Name field.

  3. If you wish, enter a description of the Snippet in the Description field.

  4. Select either Wrap Selection or Insert Block in the Snippet Type Area.

  5. If you choose Wrap Selection, enter the code to appear before the selection in the Insert Before field and the code to appear after in the Insert After field.

  6. If you choose Insert Block, the dialog box will change. An Insert Code field will replace the two shown in Wrap Selection. Enter the code or paste it into the field.

  7. At the bottom of the dialog box, select how you want the Snippet to appear in the preview area at the top of the Snippets panel. Selecting Design shows Design view. Selecting Code displays the code.

  8. Click OK to add the Snippet.

Note

Get used to using Snippets. They are an invaluable resource for code that is often reused. This includes ColdFusion MX code used to perform certain repetitive functions.

Be aware, though, that Snippets created in Homesite and ColdFusion Studio are not compatible with Dreamweaver MX 2004. If you do need them, Massimo Foti offers a great conversion facility—Snippets Converter—available at http://www.dwfaq.com/Snippets/. This site should be bookmarked because it contains almost 300 code Snippets in a variety of categories.

Dreamweaver and ColdFusion Markup Language

The concept of letting the software do the work also applies to the construction of dynamic sites using the team of Dreamweaver MX 2004 and ColdFusion MX.

ColdFusion is actually composed of two components the ColdFusion Markup Language (CFML) and the ColdFusion MX application server software. The markup language is a tag-based language that is, in many respects, similar to HTML. Though knowledge of CFML is very handy to have, Dreamweaver's function as a graphical web editor hands much of the code writing over to a point-and-click interface.

For example, ColdFusion MX uses the following code to pull an individual's last name out of a database table named "members:"

<cfquery name = "memberList" datasource = "jct">
SELECT LastName
FROM Members
</cfquery>

Without Dreamweaver, you would have to write the code yourself, and writing the code requires an intimate knowledge of the language.

This can all be done using a Recordset accessible through Dreamweaver's Bindings and Servers panel in the Applications panel group. Instead of writing the code, Dreamweaver, letting the software do the work, presents you with a series of menus and text boxes as shown in Figure 2.11.

Figure 2.11. The Recordset dialog box creates ColdFusion queries through text boxes and menus and writes the appropriate code from the decisions and text you input.

The Database/ColdFusion MX Connection

Here's a request we can almost guarantee you will receive.

Your client wants to create a web-based catalogue for the full product line of left-handed widgets they sell. Not only that, but they want to have the capability to present the widgets to potential clients by price, color, or feature set.

In this case, word processing or even a spreadsheet won't be able to solve the problem at hand. Even though there are only three simple requirements, the request is actually too complex for either the word processor or the spreadsheet. It could be done, but a lot of manual labor is going to be involved, and there is no budget for the work. The solution is a database.

A database is a place to store your information. It is also a place where the pointers to your information can be stored. In addition, the information in the database can be stored in various formats, such as text, images, sound, numbers, video, and so on.

Unfortunately, you still have a problem. The design team has developed the pages for the catalogue. The client has approved the designs, and now the information contained in the database has to appear on the web. The simplest solution is to create a separate page for each widget in each category. Again, this will require a significant investment of time and budget, neither of which the client has available. The solution is ColdFusion MX.

ColdFusion MX is middleware. By this, we mean it works in between the web server and the database to interpret requests for web pages and publishes the results. Any requests for pages with the .cfm extension are handed off to ColdFusion MX, which then reads the tags and functions in the file and outputs the results as HTML. This interpreted document is sent back to the web server and then to the browser where it appears on the user's screen. In the case of the left-handed widgets, ColdFusion MX pulls the information from the database and uses it to build a web page using the Dreamweaver template that was called by a user's browser.

ColdFusion MX connects to your database using a channel known as a datasource connector. This can be regarded as nothing more than a hook into a database management system or a database. One of the more common connections is that of Open Database Connectivity (ODBC). ODBC can be used by databases such as MS Access or MySQL. With the growing popularity of Java and J2EE, including ColdFusion over J2EE, Java Database Connectivity (JDBC) is the ideal choice within this platform.

Being able to store information is one of the main functions of a database. Their other main function is retrieval of information, or the capability to accept queries and return the results. Queries are sent from ColdFusion to the database, and all they do is tell the database what information to look for and how it should be displayed for a given set of records. The standard language used to make these queries is called Structured Query Language, or SQL.

In plain English, a query could be something simple, such as, "Show me all the red left-handed widgets and sort them, in descending order, by price." When the database answers the query, it creates a Recordset containing the results and passes the result back to ColdFusion. The information is incorporated into a ColdFusion template, which builds an HTML page. This page is handed back to the server, which is fed to the client's browser for final rendering.

As you can see, the SQL query can be as complex or as simple as you wish. Just remember not to use 5 lines of ColdFusion code where one line of SQL will do. Use the database for what it was meant for: the storage and retrieval of the site's content.


Complexity vs. Simplicity

The addition of databases and ColdFusion to the web development process does add an extra degree of complexity to the process. It is inevitable. Still, as we pointed out earlier in this chapter, the best way to deal with complexity is from a position of simplicity. The same goes for static versions of dynamic sites. They are extremely complex, requiring the developer to essentially anticipate how the user will interact with the static site and then build the pages that reflect all the permutations and computations of user interaction. To wrap your mind around that one, simply try to imagine Amazon.com or Expedia.com as a series of static pages. When you do that, a relatively simple site becomes extremely complex.

Adding the dynamic element actually introduces simplicity into the process. When that happens, the site "flattens" and the information becomes readily available. Not only that, the site can easily adapt to the user's needs, resulting in what Macromedia calls an improved "user experience."

What follows is a brief comparison between the complex static site and the flat dynamic site. This comparison is done from three very important perspectives: levels of information, interactivity, and navigation.

Complex Sites

A complex site, for the purpose of this section, is simply a large corporate site composed of a large number of HTML pages. In this case, there are a few hundred pages, as shown in Figure 2.12, that can be accessed from the home page and various other section home pages.

Figure 2.12. In the complex static site, information is distributed through hundreds of pages.

Levels of Information

The purpose of a visit to a web page is really simple—to obtain information. The assumption is the user knows exactly what information he or she needs. It is the developer's job to make that information both easy to find and understandable.

The problem with a complex static site is that quite often a fixed number of levels of information exists. These levels are developed simply to make the information easy to find. The most important information is closest to the home page, and the least important information is both quite a distance away from the home page and not very easy to access. On the surface, this makes sense, until you suddenly encounter the customer who really needs that information.

A great non-web example is the experience of one of the authors. He and his son entered a major department store to do some comparison shopping for a large flat screen TV. They had about 20 minutes of free time and spent a few minutes searching the main floor for the Store Directory. TVs were not listed. Electronics were on the top floor. Home Furnishings were two floors below the top floor. Appliances were on the same floor as Home Furnishings. After ten minutes of walking through the store, they discovered the TVs they were looking for were actually behind a wall at the end of the Home Furnishings area. They had the TV they were looking for, but it was over-priced compared to others shops, and they were both a little upset that it took so long to discover this information.

In this case, the levels of information were the six floors in the department store, and the location of the TVs—a sub level of Home Furnishings—indicates the store doesn't sell a lot of TVs. Still, in walk two potential customers, looking for precisely that information.

Complex static web sites are just like that store, but they require a store with multiples of the six floors for the information they contain. When that occurs, the information becomes layered, and proximity to the home page is more of an arbitrary decision than anything else. Now imagine the impact the discontinuance of one product line and the subsequent addition of yet another has upon the site. If it has many levels, those levels become a maintenance nightmare for the webmaster or web design team.

Interactivity Issues

Interactivity is not pop-down menus, buttons, Flash animations, or any other slick trick designed to engage the visitor. It is the ability of the user to interact with the information on a page and access precisely the information he or she seeks in as short a time as possible.

In the complex static site, interactivity is often "fixed" in place. The user essentially has to move through non-essential, fixed information as he or she gets closer to the required information. In this case, very little user interaction takes place with the information. When the user finally locates the information, it often just sits on the screen, waiting for the user to read it. In this case, the user is somewhat detached from the site because he or she simply moves through the irrelevant information in a quest to locate what is needed.

To use the department store visit as an example, the author had to move through perfumes, women's wear, couches, chairs, dining suites, and bedroom furniture before he found the information he was seeking—the TV. When it was finally located, the only interactivity presented was a card with the TV's features and price printed in large lettering.

Navigation Issues

Make no mistake about it, when it comes to the static complex site, the navigation is often fixed in place. In many respects, the only way the user can move through the site is to follow the linking lines between the pages on a site diagram.

In this case, the navigation is fixed in place and maintained by the webmaster or web design team. When things change or new relationships are established, so too must the navigation. The problem here is a high degree of complexity is introduced. Any new elements must be reflected throughout entire site. If the site was not created with a Dreamweaver template or Library item, then updating the site can be a lot of work.

Is it any wonder, then, that those visitors to the site must feel like they are trapped in M.C. Escher's painting named "Relativity"? In that painting, people walk up and down stairs that are, seemingly, connected in multiple dimensions of space. When first viewed, that painting is extremely disorienting, and one can only imagine what the people moving up and down the stairs must have felt the first time they encountered the stairs.

Flat Sites

When simplicity enters the equation, one or two pages can handle the job of a number of pages, as shown in Figure 2.13. The real benefit here is pages that quickly load so that information is readily accessible to the user. By adding that speed boost and rapid accessibility to information, you have an extremely positive user experience.

Figure 2.13. Flattening the architecture of a site by introducing dynamic data results in a more positive user experience.

The most interesting aspect of this positive experience is, from the perspective of someone new to the game, that the experience is programmatically driven, not design-driven. By letting the software do the work, the computer is free to do what it does best: crunch code. The end result is quicker load and search times, coupled with a site that has the capability, through code, to mold the page to the viewer's, not the designer's, choices.

Levels of Information

When a site is driven by server-side code, a lot of action goes on behind the scenes. The main activity is a lot of code (that the user never sees) is busy composing and displaying the pages the user does see. Thus, the hallmark of a flat dynamic site is few HTML pages, but a lot of coded pages that give the illusion of hundreds of HTML pages.

Even more important is the disappearance of the information hierarchy. In a flat dynamic site, all information is given equal importance and accessibility. This is due to the fact that the information is moved from an HTML-based paradigm to a database. When that happens, the information is essentially hidden from the user until it is needed.

The excursion to the department store is a good example of this. If the store was "flat," it essentially would be composed of a sign, a door, and one room. When the author opens the door, he is asked what he is looking for. He selects TVs, and the room configures immediately to the layout of the TV department. By simply saying he is looking for a TV, the store heads to the storeroom (database) where it keeps the TVs and lays out the display (the Dreamweaver template) by the time the author crosses the threshold of the room. When he leaves, everything is put back into the storeroom.

How does the store determine what information he sees in the display? This is governed by the rules that are set in the database and the programming. The display can be one level—show all TVs—or many levels deep—Portable TVs, Color TVs, Flat screen TVs, HDTV, and so on.

This is how the information in dynamic sites can expand and contract to adapt to changes. A new product line is really nothing more than an addition to a database. A price change doesn't require the webmaster or designer to hunt through dozens, if not hundreds, of pages to make the change because it can be done in one field of a database, and it is instantly reflected throughout the site.

Interactivity Issues

When the user controls the information flow, his or her interactions with the information become more relevant, and the site takes on a life of its own. This is because there is more user input required. This way, the site often brings itself to the user, rather than the other way around.

When that happens, the user is inevitably drawn into the site. Instead of hunting for the information on a fixed page, users may actually be doing something, such as purchasing an item or posting to an online community bulletin board. This way, they are primarily in control of the information and the site. The site becomes a guide to information and changes to reflect the information requested by the user. The end result is the user is not frustrated and comes away from his experience with that site with a positive opinion and a desire to return and perhaps even buy something.

One of the side benefits of writing books is a number of requests to attend conferences and user group meetings. One of the authors makes extensive use of his Frequent Flyer points to book his trips. When he hits the airline site, because he is Canadian, his first information request is language choice. After selecting English, he is directed to the login page, where he enters his Frequent Flyer number and password. The next page immediately shows him the number of points currently credited to his account. Not only that, the page, as shown in Figure 2.14, is personalized.

Figure 2.14. A simple task, such as checking Frequent Flyer points, becomes a personal and positive interaction with a dynamic site.

From there, he can book flights, buy extra points, change his profile, or perform a number of other tasks related to his account. Were these to be offered to him through a static series of pages, the process would be tedious, at best, and the opportunities to interact with the information would be limited.

Navigation Issues

As we have been pointing out throughout this section, flat dynamic sites are driven by code. When it comes to planning and creating the navigation through the site, it is rare to encounter navigation that is "hard-wired" or fixed in place. This way, certain navigation elements can be turned on and off.

Another side benefit to the developer is navigation can be easily maintained throughout the entire site. Adding a new navigation element, in many respects, is as easy as adding a new record to the database. If navigation is driven from the page and not a database through the use of a single server-side template, you only have to place a navigation item, such as button, on one page because that template is used throughout the entire site.

When the navigation is moved off of the connector lines between the pages on a site map, a whole new set of unfamiliar problems is presented to you. For example, a navigation system should be aware of its environment and change accordingly. When the author visits the airline site, the first navigation choice involves language. Clicking the language choice radio button takes him to the Frequent Flyer login page, which is displayed in English. If he enters the wrong PIN, he stays put until he gets it right. When the database confirms his identity, he is then able to move to his personal page to check his account. When he enters his PIN, he clicks a submit button. When he wants to move elsewhere on the site, he is presented with an HTML solution.

The bottom line here is, when planning the navigation through a dynamic site, never lose sight of the fact there is a living, breathing human being doing the clicking. If a navigation element is not available or appropriate, then don't put it on the page. If you give them a button, they will most likely press it.


Summary

This has been a rather complex chapter with a lot of important information.

We started off by discussing the architecture of dynamic sites. Rather than get into a technical discussion of the merits of a dynamic site, we used the example of a complex dessert to compare and contrast the ways static and dynamic sites are constructed.

Recognizing that dynamic sites are code-driven, we presented a number of practical examples where the software should be doing the work. The examples included the use of symbols in Fireworks, Freehand, and Flash. We demonstrated how to create a "codeless" scroll bar for a text box located in Flash. We explained how "Snippets" are used in Dreamweaver and also showed how Dreamweaver can actually write the ColdFusion code for SQL queries to a database.

We then explored the intimate relationship between a database and ColdFusion. As we explained, ColdFusion is composed of two elements—an application server and a programming language—both of which are designed to simply move information from a database and bring it to life on an HTML page.

We finished the chapter by discussing the concepts of complexity and simplicity when it comes to building dynamic and static sites. We looked at both the static and the dynamic sites from the perspective of information levels, interactivity, and navigation.

In the next chapter, we start the process of building the site used in this book. Where do you start? You start with a solid plan and the ability to communicate within the team. In fact, we are going to show you how to quickly create a Flash chat room where you and the other members of the team can bounce ideas off each other.


Chapter 3. Planning a Dynamic Site

This will inevitably happen to you.

You are sitting at your desk, and the phone rings. When you answer it, the individual, from the Oakbridge Recreation Center, will start a conversation that goes something like this:

"Do you build web sites?"

Your answer is, "Of course," and then you talk about the work you have done for other clients.

"Here's what we need," says the voice on the phone. "We need to rethink our site and are looking at adding a couple of features that cement our relationship with the community. They would include an interactive tour of the facility based on interest. We would also like to streamline our current facility booking procedures and enable people to book sports facilities or meeting rooms online. Finally, we do a lot of community work and want to create something on the site that enables people to meet online...or something like that. Do you do that sort of thing?"

This is typically the start of the process, and a positive answer will result in a client meeting. The project's success or failure is dependent upon what you do next.

In the good old days of the Wild, Wild Web, up to about 1998, the answer was a resounding, "Yes." In those days, the developer met with the client, got a rough idea of what was needed, and gave the client a rough idea of what he or she was going to do. The client, not having a clue what the developer's proposal entailed, inevitably bought in because it sure sounded "cool." At that point, the developer bought the necessary software and spent the next month learning how to do what he or she had just promised the client.

With the rise of dynamic sites and the introduction of the work group and some pretty sophisticated software, the technical and creative demands placed upon web developers have increased. This means the day of the "One-Guy-Does-It-All" shop is a thing of the past. In today's production environment, speed and accuracy are critical. This means projects can only be completed by a team of specialists working with a carefully crafted production and project plan.

The old business adage, "Plan your work and work your plan," is more appropriate than ever. More often than not, that means the production cycle doesn't start with pixels lighting up on a screen. It starts with a sheet of paper.


Want vs. Need

When talking to the client, a key skill to have is the ability to distinguish between a "want" and a "need." All too often, clients and developers get caught up in the technology and the software when they start discussing the project. A huge number of Flash MX 2004 sites out there could have been done more easily in Dreamweaver MX 2004. Why Flash? The client, discovering how cool it is to have a Flash site, decides they want one.

The problem here is technology is constantly changing and can't be fixed in place. A great example is the MX Studio. In April of 2002, we were all using individual Macromedia products. Six months later, they were completely reinvented as the MX Studio of integrated products that also included a developer edition of ColdFusion MX. Director developers planning a number of projects around the Multi-user server discovered, with the release of Director MX in late 2002, that the Flash Communication server replaced the Multi-user server. A valid question, therefore, is, "How long will the online meeting facility be available through the site, and will it be able to adapt to changing technologies?"

In the case of our community center, they want an online meeting room. This room will be used by members of the clubs or other associations based in the community center to get together online to discuss plans, events, and so on. It should have a shelf-life of at least two to three years, which means the enabling technologies—ColdFusion and Flash—will most likely change, but the upgrades and changes are easy to effect. Then again, there is an even more fundamental question that should be asked.

The question is, do they need such a facility? Ask that question of both yourselves and the client, and the production process takes on an entirely new dimension.

Defining Exactly What Is Needed

The last thing a web developer needs is the client changing his or her mind mid-project. This situation usually results from the clients' discovery that the project is moving in a direction they never expected. Even worse is the client discovering they have a technologically-advanced site their market either can't or doesn't use.

In the case of the Oakbridge Community Center asking for an online meeting room, it is interesting, but do they need it?

In this situation, it is incumbent upon the developer to break out a pad of paper, meet with the client, and start doing some very careful fact-finding. The questions that could be asked are:

  • Have your clients expressed a need for this?

  • What sort of market do you serve?

  • Do you have any idea about what kind of connection they have to the Internet? Broadband or dial-up?

  • Are they technologically sophisticated enough to use video cameras connected to their computers?

  • Does your ISP have the necessary software to accommodate dynamic data transfer?

The key here is discovering whether a full-bore interactive area with streaming video, audio, and chat is needed, or whether the client would be better served with an instant messaging feature.

Never forget, your client is rarely as technologically adept as you are. Thus, your role is twofold: web developer and educator. You will be building the site but also translating the technology to the client and presenting it in terms he or she understands. If the client needs instant messaging, recommend it. Although instant messaging isn't as "cool" as a Chat Room built in Flash, you will have saved your client a serious amount of money that would have been spent on unnecessary technology.

Developing the Project Scope

When you understand what is needed, there is an understandable urge to start up the computer and get to work. This would be a huge mistake. The only software you will need at this point is word processing software. It is used to produce a document that lays out the parameters of the project, including items such as a budget, deadlines, a creative brief, and a technical specification. This is called the project scope. It should be regarded as a deliverable for the client to sign and date.

By producing this document and having the client sign and date it, you and the client reach an agreement regarding exactly what is to be produced, by when, and at what cost. In this manner, you avoid scope creep.

Scope creep is composed of those changes that, at the time, appear insignificant, but when added up can actually result in charges that can increase the original budget by a factor of twenty percent or more. For example, the decision is made to use JavaScript rollover buttons for the navigation. Midway through the process, the client decides they should be done in Flash. In the total scheme of things, the three hours to make the change seem insignificant. If you have a number of them, though, they can have a huge, negative impact upon the final bill, potentially culminating with the involvement of lawyers and lawsuits.

To avoid this potential messiness, create the aforementioned written document and include the fact that changes, additions, or deletions through such things as cancellation penalty clauses in contracts will incur extra charges. Some agencies go as far as setting a limit for these charges, at which time they will actually stop work and renegotiate a new agreement with the client.

Identifying the Technologies

There are a number of technologies that can be utilized in the building of a dynamic site. This book's topic suggests you already own Studio MX 2004. This means you have a serious number of very powerful tools available to you. From Dreamweaver MX 2004 to ColdFusion MX, your production needs are met. Still, the decision regarding which technology to use to meet the needs of the client requires some serious consideration and trade-offs.

The way we chose MySQL as the database for this book is a good example of the considerations and trade-offs you will have to make.

When we first considered producing this book, we assumed we would be using Microsoft Access as our database of choice. We had used it in our previous book—Building Web Sites with Macromedia Studio MX—and we just assumed we would stay with it. The reasons were valid:

  • Microsoft Access is easy to use.

  • It is widely available because it is bundled in the Microsoft Office Suite.

  • ColdFusion can quickly "plug into" it.

The times have changed between our first book and this one. When we started looking at the market—our beloved readers—we came to the conclusion that Microsoft Access was not a suitable choice. For example:

  • Microsoft Access is only available on the PC. Even then, not everyone owns it. The likelihood of someone purchasing it just for the sake of following the exercises within this book is rather slim.

  • ColdFusion MX is widely available on many platforms. Mac OS X, as well as various J2EE platforms, can work with ColdFusion MX.

  • ISPs accommodate MySQL. Our site's host, NI Solutions in Toronto, offers MySQL in addition to the package of technologies available to us and, by association, to you. However, Access was not mentioned as part of their packages offered alongside ColdFusion.

When you ask those questions, the number of technology options tends to narrow to one choice. That choice is MySQL. Here's why:

  • It is freely available under the GNU General Public Licensing. This simply means that it is free for regular users as long they don't need to incorporate it in a commercial application. Go to http://www.mysql.com/downloads/index.html and download and install MySQL Public release 4.0 for your operating system. Mac OS X users can also download a complete installer from http://www.aaronfaby.com/, which also contains a System Preferences panel to control the MySQL daemon.

  • Various GUI (Graphic User Interface) MySQL management tools are available. There are a number of them out there, but for the purposes of this book, we have decided to go with YourSQL by Magister Ludi (http://www.mludi.net/YourSQL/) for Mac OS X. PC users can use http://www.mysql.com/downloads/mysqlcc.html. If all else fails, you can use the widely popular phpMyAdmin, available at http://phpmyadmin.sourceforge.net available on almost all platforms. Just remember that you would need to download and install PHP for this.

  • Connecting to MySQL through ColdFusion MX is done using a JDBC connection. ColdFusion 5 supports ODBC and thus connection strings. Macromedia dropped ODBC in the jump to Cold Fusion 6. That means the only way to connect ColdFusion MX to a database is through a datasource name.

    Dreamweaver MX 2004 Server Behaviors write SQL queries that are understood by all SQL-compliant databases. Thus, anything we do with MySQL here can most likely be used on Microsoft Access.


The Creative Brief

When one introduces complexity into the web design process, one also creates a management problem. The problem is retaining the consistency of design throughout the project. If the site is composed of images, text, artwork, video, sound, and other media, it is absolutely critical they all have the same "look and feel." This way, the site visitor is not left wondering whether he or she has left the web site. A good example would be Nike.com. The site is massive. Yet visit any page in the site, and you still feel you are on the Nike site.

The other issue you will have to contend with is search engines. You have absolutely no guarantee the visitor will start at the index or home page. Again, a consistent design ensures the visitor is not disoriented.

The solution is a solid creative brief. As we pointed out earlier, the web design process begins on a sheet of paper. The software used is usually word processing software, and one of the key documents produced will be a creative brief.

What Is a Creative Brief?

The creative team essentially receives its direction from the creative brief. The document is a written summary of the goals and objectives of the project, with very close attention being paid to the visitor. It also serves to give the team an idea of the creative direction for the project. It does this by laying out the demographics of the audience, their expectations, and the communication strategy behind the site.

This is also a valuable document for the client. It is not uncommon for clients to have unreasonable expectations regarding the design of a site. A carefully-crafted creative brief will serve to focus the client's attention on the creative goals of the site. It can also be used as the vehicle that enables the creative group and the client to agree to a common set of objectives.

The document can be as short as one page, or, if the project is complex, it can be many pages long. Regardless of size, each member of the team should receive a copy of the brief. It should also be given to the client to be signed and dated.

How The Brief Is Developed

The brief is usually the result of a number of meetings held between the developer and the client.

The document can take any form, simply because no two web shops approach the process in the same way. Still, there are some broad topics that can be covered, such as:

  • Project Objectives: List two or three key objectives for the project.

  • Communication Objectives: Two or three key objectives that can be measured should be listed.

  • Audience: Who is using the site? Try to be as specific as possible.

  • Tone and Manner: What is the site's "look and feel?"

  • Brand Idea: What impression should visitors get from the site? A brand idea can be developed by laying out the idea, why you think it works, and the rationale.

Having wrestled with those broad topics, you can produce a brief that is acceptable to both the client and the creative team. The creative brief we will be working with throughout the book is shown in Figure 3.1.

Figure 3.1. The Oakbridge Community Center creative brief will drive the design of the site.

    [ Team LiB ]


The Technical Brief

Dynamic web sites use a lot of technology. As such, it makes sense to produce a document that gives the technical team its "marching orders." From the client's perspective, this document tends to demystify the process.

Let's take a look at the key features the Oakbridge Community Center site will employ. First is an interactive tour based upon user interest. This tells us we will need to create a facility that enables those interested in indoor sports, outdoor sports, and community use features—meeting rooms and conference rooms—to quickly review those features. We'll also need to create an application that enables the visitors to book the various sports and meeting facilities.

A new wrinkle introduced by the client is the creation of an online meeting facility. This is being included as a part of the center's efforts to broaden its reach into the Oakbridge community and to enable a variety of community groups to either communicate their message to the Oakbridge community or to hold online meetings.

Having done that, the process can be reduced even further, and we can describe and rationalize the functionality of each feature.

Rationales for the Features

The tour will be the part of the site that will receive the most visitor interaction. Visitors will need to be able to view the various programs and facilities, based upon their specific interest. After the visitor selects a category, he or she should be presented with an overview of that particular facility. If more specific information is required, the visitor can reach it with a single click.

The booking facility will perform a number of tasks. It will need to keep a running list of the facilities the visitor wishes to book. It must also include functionality to enable the visitor to change his or her mind and add or delete items. It should also include the capability to refuse a booking based on over-capacity or, if the facility is unavailable, provide a few alternative dates or times that can be booked. It should also be able to issue an email confirmation regarding the booking.

The online meeting facility should be flexible enough to accommodate all manner of users, from novices to the technically adept. Thus, it has to be flexible enough to offer services ranging from a text input chat facility to streaming video and audio. It should be able to accommodate groups ranging in size from three to three hundred. It will also contain a "help agent" that will "create" the meeting facility based upon user input.

Cool vs. Practical

The rationale, if you are on the web team, just oozes "cool." Focus on the "cool" factor and the project is doomed to failure. Never forget the web is a communications medium. This means information is being transmitted. Focusing on the technology—"cool"—and not the process—"practical"—will overwhelm the message. For dynamic sites to work, the technology has to be transparent.

The tour could be done in any number of applications, but we decided to feed the content into Dreamweaver templates using content located in or referenced by the database. This way, the information is not fixed in place and can be quickly amended to accommodate change. For example, outdoor tennis courts and baseball diamonds can easily be removed during the winter months, and programs like "spinning" or aerobics can be added without major modifications to the site.

The booking application will be created in both Flash MX 2004 and Director MX. The reason here is to demonstrate to you how both applications can obtain and display data using ColdFusion and Flash Remoting.

The online meeting facility will be a Flash application that shows you how to add some "cool"—streaming video and audio—to the site. It will also be built to accommodate those visitors not as interested in "cool" and will offer a text chat option using the Flash Communications Server.

Timelines/Deadlines

More and more web development companies are starting to understand the importance of project management and the use of a project manager. This individual, in many respects, could be the difference between the success or failure of a project and, to be blunt, the web development company. In fact, one of the authors has gotten used to hearing the principals of many large and small web development firms tell him the smartest thing they ever did was to actually hire a "project manager."

This individual knows the key to the successful completion of the project is the schedule, and that means he or she must get the team and the client to "sign on" to the agreed deadlines. If the schedule is properly developed, both groups will see a continuum from the start of the project to upload to the client's server. This continuum involves timelines and deadlines and helps everyone involved to differentiate between forests and trees.

Timelines, the forest, are usually contained in a key event schedule that lays out the broad parameters of the project and the scheduled completion date for the elements of the project. Depending on the complexity of the project, this document presents the major milestones of the project's progression through the production process as a series of weekly or monthly deadlines. This document should be included in the proposal presented to the client.

A detailed schedule—the trees—serves to move the team toward the completion of the project. By breaking the project into a daily schedule, all the major team members have a daily "to–do" list. This should be a fairly detailed document, but don't make it rigid. Spawned from the key event schedule, this document should accommodate the fact that scope creep will occur and that tasks will inevitably be added or subtracted and deadlines will expand or contract as the project moves toward completion.

The Tardy Client

There are any number of solutions available to the project manager who has to deal with a team member who consistently misses deadlines. What about the client that misses them on a regular basis?

The solutions here range from blood oaths and weapons on the table to account resignation. To avoid this situation, make the client aware right at the start of the process that time is money...the client's money. This tends to get their undivided attention.

Clearly explain each of the project's goals and the financial implications of the client missing his or her goals for content delivery and approvals. In certain instances, it also doesn't hurt to request that the client appoint a back-up individual with the authority to approve, sign, and date documents, should the client be unavailable.


The Communication Process

It makes no difference whether a site is dynamic or static when you reach the core concept behind its existence on the web. The web is nothing more than a high-speed communications vehicle. The page being viewed will communicate with the visitor, or, in the case of dynamic sites, the visitor can communicate with the page.

If you understand that you are dealing with a communications medium, then you can also grasp the importance of clear lines of communication between all the players, from client to team member, in the development process. This communication can be anything from interpersonal communication to the trading of email. Regardless of how you choose to communicate with each other, the key is simply to communicate. The last thing a client or project manager needs to hear is, "Well, no one told me."

Client/Team Communication

A key communication vehicle for all parties is a staging area where the client can view the progression of the project. This usually takes the form of a site created in Dreamweaver.

If you are considering a client site, set up areas for the team and the client, and password-protect both areas. This way, you can control, on the client side, whom the client talks to. If properly designed, a client site imposes tight controls on the communications and avoids conflicting messages to the players.

If you do build a client site, consider adding these features:

  • Security: Most work done involves a legally binding Non-Disclosure Agreement (NDA). To avoid infringing on the project's release date or other confidential information, password protection—to avoid leaks and to protect the confidentiality of the client's work—is the first line of defense.

  • Threaded Communications: By having all the communications in one place, you have a dated record of all communications. This is especially useful in situations where a team member, for example, claims he or she never saw the authorization to proceed.

  • Contact Information: Ensure everyone on the team has current contact information for all team members. In the case of contract members, this will include phone numbers and a valid email address. The client should provide this information on his side of the fence to the project manager.

  • Critical Path: Make the critical path or other scheduling device available to both the client and the team.

We aren't going to explain how to build a client site because these sites inevitably reflect the complexity of the project and the design standards of the developer. If you are looking for a couple of excellent overviews of how create a client site, Kelly Goto presents in her New Riders book, Web Redesign: Workflow that Works, a rather simple example, and Todd Purgasson shows in his New Riders book, Flash deConstruction, how his company, Juxt Interactive, uses a fairly complex site as a communications vehicle.

We are going to show you how to construct a relatively simple chat room in Flash MX 2004. This could be used for real-time communication between the client and the team or as a communications vehicle between the various members of the project team.


Creating a Chat Room in Flash MX 2004

We have been quite consistent to this point in the book. Being firm believers in "let the software do the work," we are constantly looking for ways that make the production process more efficient.

In the case of inter-team communication, the easy way is to simply rely on email. The problem with that is there is simply no way of adding immediacy to the communication process. The only way of doing this is to pick up the phone, yell across a divider, or jump in your car and have a face-to-face meeting. The use of the Chat component in Flash adds a distinct measure of "cool," but, most important of all, it provides a sense of immediacy and, unlike instant messaging, focuses solely around the task at hand.

This final section of the chapter, therefore, injects immediacy into the production process, and it revolves around a new feature of Flash MX Professional 2004 and an "old" feature of Flash MX. The new feature is the Project panel in Flash MX Professional 2004. The old one is the use of the Chat component in Flash MX.

The Flash MX Professional 2004 Project Panel

Until this version of Flash, the capability to share a file around a work group involved servers, "sneaker Net," or email. This version of Flash further cements the integration of the Studio and web development workflow.

In the previous chapter, we discussed a work group aspect of Dreamweaver MX 2004—Check In/Check Out. For some very odd reason, Flash has always been regarded as a single-user product. That may have been true when it was first introduced, but the dynamic and coding features added to the application in subsequent revisions have served to make it far more complex than its VectorWorks roots. When the MX Studio was introduced, we found it odd that the new Flash workflow integration capabilities—Check In/Check Out for example—were simply not there. This has all changed. Sort of.

There are now two versions of Flash on the market. The version packaged with the Studio is Flash MX 2004. Flash MX Professional 2004 is aimed squarely at the high-end application developer market, such as those building e-commerce solutions in Flash. The feature sets between the two versions are not radically different, apart from the addition of some very powerful components, video tools, streaming media components, and the Project panel in the Pro Edition.

We include the Project panel because it is such an important addition to the application, and it is beyond us why it is not included in Flash MX 2004.

Defining a Site in Flash MX Professional 2004

Flash now includes version control capabilities on par with Dreamweaver. This includes Local/Network and FTP access protocols, as well as a plugin interface to allow for integration with version control systems like SourceSafe, WebDAV, and RDS. To get started, you need to define a site. Here's how:

  1. Open the Project panel. If the panel isn't in your panel grouping, select Window, Project. The panel is then activated by selecting either Create a New Project or Open an Existing Project. When the panel activates, you will see two buttons. The first one, which looks like a box with a Flash icon leaning against it, is the Project button. The one beside it with the arrows is the Version Control button.

  2. Click the Version Control button to open the Version Control pop-down menu. Select Edit Sites to open the Edit Sites dialog box.

    Tip

    The Edit Site dialog box may already contain a number of sites. Flash MX Professional 2004 now shares the Site Definitions created in Dreamweaver MX 2004.

  3. Click the New button to open the Site Definitions dialog box, as shown in Figure 3.2. Name the site and set the root folder. Add your email address and the name that will be used to indicate you have checked out a file. Determine your connection from the pop-down list. Depending on your selection, the Connection area will expand and present you with a series of input boxes to determine the appropriate connection information.

    Figure 3.2. Flash shares Site Definitions with Dreamweaver, which permits easy Check In and Check Out of files among members of the team.

  4. When you are finished, click OK. This will return you to the Edit Sites dialog box. Your new site will now be included on the list. Click OK.
Defining and Working with a Project in Flash MX 2004

For the purpose of simplicity, a project is simply all the Flash files used in that particular project. Here's how to define a new project:

  1. Click the Project Button on the Project panel. Select New Project, as shown in Figure 3.3, from the pop-down menu. The New Project window will open, and you will be prompted to name the project and select a location for it to be stored. Note the new file format for a Flash project, .flp.

    Figure 3.3. A new project is created by selecting New Project in the pop-down menu.

  2. When you click OK in the New Project dialog box, the project file is created in the location chosen, and it also appears in the Project panel. Both the .flp file and the project in the panel will have the new Project Icon mentioned earlier.

  3. With the project defined, you can now add files and folders containing files to the project. Select the project in the panel and either right-click (PC) or Control-click (Mac) to open the Context pop-down menu. Select Add File to open the Add Files to Project dialog box. Navigate to the file, select it, and click the Open button. The dialog box will close, and the file will appear under the Project File in the Project panel, as shown in Figure 3.4.

    Figure 3.4. Files can be added to Flash Projects.

  4. Checking files in and out follows the same procedures as those used in Dreamweaver. You select the file in the Project panel, click the Version Control button to open the Context menu, and select Check Out or Check In, as shown in Figure 3.5.

    Figure 3.5. The Version Tracking menu is a key file management and versioning control tool in Flash MX 2004.

Two people can't check out the file at the same time. In case you try to check out a file already in use, you will be asked if you want to override the other person's check out. However, two people may not have the same file checked out at the same time.

The members of the team can see the status of files at all times. The green check mark indicates the file is checked out. The red check mark means that someone other than you has the file checked out. The lock indicates that the file is "in" version control but is not currently checked out by anyone, and the yellow exclamation point indicates that there is a later version of the file available in version control.

Note

One of the version control menus is Update. Update was added to help users of Flash Projects working on teams to be aware of changes made to files by other members of the team. When a file in version control has an older version on the local system, the update status icon will appear to inform the user that there is a newer file available in the version control system.

Setting Up a Chat Room in Flash MX 2004

The decision has been made to give the team an area to talk through their plans, problems, and issues. Though instant messaging and other technologies are readily available, it is decided to build a simple chat room using Flash MX 2004.

If this is your first exposure to using Flash MX 2004 and the Flash Communication Server MX, this decision could be a bit overwhelming. In fact, it is easier than you may think. Essentially, it involves three steps:

  1. Write a script that connects the chat room to the Flash Communication Server.

  2. Build the facility using simple Drag and Drop Components provided by Flash.

  3. Test and tweak.

Note

Before proceeding, you should have Flash Communication Server MX installed on your PC. A free version is available to download at http://www.macromedia.com/software/flashcom/. You should also have IIS 5 up and running on your PC.

Connecting to the Flash Communication server is not terribly difficult. You simply have to create a folder called an application folder on the server that holds the files. Our example assumes you are using your PC as the testing server. If you are using your ISP's server, you can create a subdirectory on the server in your FlashCommMX area that will be made available by your provider.

Follow these steps to create the application folder:

  1. On your PC, double-click My Computer and follow this path: c:\inetpub\wwwroot\flashcomm\applications. This takes you to the applications folder for the Flash Communications server on your PC.

  2. Create a new folder named OccChat, as shown in Figure 3.6.

    Figure 3.6. The "hook" to the Flash Communication Server is provided by the OccChat folder placed in the Comm Server's Admin folder.

    Having created the folder, you now have to create the script that will make the Flash Chat Room function. This can be done in Dreamweaver.

  3. Open Dreamweaver MX 2004. When Dreamweaver opens, select File, New to open the New Document Window. Select Other from the list of choices in the Categories column. Select ActionScript Communications document from this document list and click Create.

  4. A script document opens. Click once in line 2 and enter the following code, as shown in Figure 3.7:

    load("components.asc");
    Figure 3.7. The chat room connection script can be created in Dreamweaver.

  5. Select File, Save As. When the Save As dialog box opens, browse to your OccChat folder and name the file main. Select ActionScript Communication Files from the Save As Type pop-down list. Click Save. Quit Dreamweaver.

Note

The previous technique was met with the usual "That ain't the way I would do it" from one of the coauthors. Here's how he would do it:

  1. Open the OccChat folder and right-click inside the folder.

  2. Select New, Text Document from the pop-down list and name it main.asc.

  3. Open a new Notepad document and enter the code.

  4. Save the file and quit.

Building the Chat Room in Flash MX 2004

The chat room is to be constructed using the Flash MX 2004 Communication UI Components. The beauty of these items is the fact that they are prebuilt Flash movies requiring, at least initially, no deep understanding of ActionScript. Components are quick and simple to use. Before you start construction, be sure that you have installed the Flash Communication Server MX Components into Flash. Here's how to construct a simple chat room in Flash MX 2004.

  1. Open Flash MX 2004 and create new document. When the document opens, open your Components panel. If it isn't visible in the panel grouping, select Window, Development Panels, Components, or press Control-F7 (PC) or Command-F7 (Mac).

    Note

    Though this may seem relatively basic, Flash MX 2004 has moved things around from Flash MX. One change is the move of the Components Menu Item to the Window menu.

  2. Drag the Chat component to the stage. In the Property Inspector, provide an instance name, such as ch3_chat, as shown in Figure 3.8.

    Figure 3.8. The Chat component is dragged onto the stage from the Components panel and given an instance name in the Property Inspector.

  3. Drag the UserColor component to the stage. In the Property Inspector, provide an instance name, such as ch3_color. This component is really interesting. It is a combo box that color-codes all the users.

  4. For fun, we added a ConnectionLight component that will tell us if we have connected to the Flash Comm server. Drag this component to the stage, and, in the property Inspector, give it a name, such as ch3_led.

  5. Drag a SimpleConnect component to stage. This is an important component with a rather deceiving name. This is the component that will manage all the communications between the Flash Communication Server and the Flash Player.

  6. This component won't need an instance name, but you will need to point it to your OccChat directory. In the Property Inspector, click once on the Application Directory and enter the URL for your chat on your Flash Comm Server. For our local server, we entered rtmp://10.0.1.21/OccChat, as shown in Figure 3.9. Your values may be quite different from ours. For example, one of our tech editors tested the exercise on his computer using rtmp://localhost/flascom/samples OccHat.

    Figure 3.9. The SimpleConnect component is configured and the chat room is "good to go."

    If you don't want to go through all the hunting and pecking for rtmp addresses, do what one of our tech editors suggests: use rtmp://OccChat.

    Note

    RTMP stands for Real Time Messaging Protocol. It is a proprietary standard developed by Macromedia to transfer data and messages between the Flash Player and the Communications server. It has no effect on the way the HTTP protocol is handled by the server.

  7. Having told the SimpleConnect component where the directory is located, we also have to tell it what other components are being used. In the Property Inspector, click the [] beside the Communications Component to open the Values dialog box. This is where you will connect your SimpleConnect component to our other components that are on the stage.

  8. Click the (+) sign in the Values dialog box to add a value. Enter ch3_chat.

  9. Click the (+) sign. Enter ch3_color.

  10. Click the (+) sign to add a value. Enter ch3_led. Click OK to close the dialog box. Your chat room should resemble Figure 3.9.

  11. Save movie and test!


Summary

Planning a dynamic site is hard work.

The first thing you need is an ability to help the client distinguish between a "want" and a "need." This will require some rather in-depth discussions between you and the client, but the time spent here will avoid serious problems at a later date when the client discovers what he wants isn't what you are creating.

A key document to prepare is an outline of the project scope. This document lays out the parameters of the project, including such items as budget, deadlines, a creative brief, and a technical specification. This document can be regarded as a "deliverable," and the client should sign off on it.

Using a variety of technologies can make for some interesting decisions and discussions that will have a profound impact upon the finished product. This is why we reviewed how we made the decision to use MySQL as the database for this book. We also explained the purpose of a creative brief, how it is developed, and supplied a sample brief for the Oakbridge Community Center.

The technical brief is another document that should be prepared. It is the document that gives the technical team its marching orders and the client a succinct overview of the technologies being used in the project.

Client/team communication is important, and we also reviewed the reasons behind creating a client site, how to work with timelines and deadlines, and the importance of communication between the members of the team.

This last point is facilitated through the use of a chat room that is constructed using a number of Flash MX 2004 Components.

With the broad issues of the project under control, the next chapter, "Planning the Data for a Dynamic Site," shows you how to plan and organize the raw material for the Oakbridge Community Center site.


Chapter 4. Planning the Data for a Dynamic Site

Dynamic sites open up a serious number of design options to the developer. No longer are you tied to the static model where pages are fixed in place. Now, you can design for a huge amount of content that can be displayed in a handful of templates.

These sites work because they can be designed to be updated without having to add or delete pages. Through the use of templates and content tied to a database (not a fixed page), adding new content to a page is no longer a cumbersome and tedious task.

You also have a greater degree of interactivity available to you than ever before. Data drilling—plowing through a multitude of pages in a site to find specific information—is a thing of the past. The viewer can be engaged in the process right from the index or any other page, and you can mold the site's information to his or her interests. Although you have this freedom, be sure to include a programmer on the team if the site is complex.

In this instance, your margin of error is razor-thin. Dynamic sites are code-driven, and though Dreamweaver MX 2004 makes it relatively easy to get into the game, it doesn't make you a programmer. It is easy to make mistakes that can be potentially difficult to repair if you don't understand how it all works. As one of the authors so succinctly puts it, "It's like a book of spells. One wrong word and you wind up with a million ducks."

This chapter shows you how to avoid turning a dynamic web site into a million ducks. It starts with a plan.


Planning the Data

One of the best pieces of advice ever given to one of the authors is this: "When working with a computer, think like a computer." This means create the databases in a logical manner.

Here are some tips to get you started:

  • Determine what is to be stored in the database. "Text" isn't an answer. It could be a product description, a list of member's last names, a list of image names, or whatever.

  • Decide what each piece of data looks like. If it's a product description, it would be a text field in a database.

  • Decide how the data will be presented. If it's a table-based layout, then each cell of the Dreamweaver table will hold content.

  • Determine a model that meets your needs. The model is a representation of the data in a database. It consists of fields that hold data and tables. Tables are the logical grouping of the fields for the data that these fields may store. Various tables within your database will have data that is tied to other tables. This is known as a relationship, which we will discuss shortly. Don't simply copy a model that makes sense for you and bend the technology around that model—that is inefficient and wastes time. The model should fit your needs, not the other way around.

  • Determine the relationships between the tables in the database. Relationships between tables enable you to consolidate your data and avoid needless repetition. Using the community center as an example, just because a member books a tennis court ten times is no reason to create ten copies of that member's data. Each of the ten entries in the booking table would contain a field containing an ID that links to a record in the membership table containing the member's data.

  • Account for the present and the future. Situations change as data is added or removed, and failure to plan ahead will create a maintenance problem. Using our community center as an example, it is easy to plan a model that enables us to add new types of activities and delete ones no longer available. For example, if we decide to add power skating as an activity, we would accommodate this new entry in a table that contains a list of available activities. Therefore, having a model that includes a table of activities accounts for this type of growth. It would be expensive later to attempt to graft power skating onto a model that wasn't built to accommodate growth, such as a table with the activities hard-wired as fields.


Flowcharting the Logic

The biggest mistake one could make when building a dynamic site is to make it up as you go along. This is a guaranteed prescription for failure because inevitably you will omit a crucial step or overlook a critical piece of information. This why it is so important that you "think through" the plan before constructing the application.

For example, a simple procedure, such as booking a baseball diamond at Oakbridge, is actually quite complex. When the user hits that part of the site, he or she has to make some decisions. The first one is to choose when the diamond is available. When that is determined, the user can reserve the diamond using their membership number, providing the user is a current member.

On the surface, that is a rather simple request. However, a lot goes on behind the scenes. Here are the basic steps:

  1. Choose a baseball diamond.

  2. Choose from a range of desired dates.

  3. Check the availability of the diamond.

  4. If it is available, reserve it using the membership number, or go back to Step 2 and choose a different date, or back to Step 1 to choose a different diamond.

Putting together something that accommodates those four simple steps requires the developer to do two things: plan the data and illustrate the logic.

Note

Don't laugh at Excel. You can actually select all of the cells in an Excel spreadsheet and drag and drop them into an open Dreamweaver MX 2004 page. When you release the mouse, all of the cells dropped into Dreamweaver are contained in a Dreamweaver table on the page.

Data Planning

A data plan creates the blueprint that is required for the data model. Although it sounds rather technical, this document is nothing more than a list of tables and fields that will be used to store the data. If you have a database designer on your team, he will most likely refer to this document as a data dictionary.

A number of ways exist to create this document, but, from our experience, one of the easiest is to either create a spreadsheet or use a table in a database to create the data dictionary, as shown in Figure 4.1. You will find a PDF template of the data dictionary model, Data Dictionary Template.pdf, on the book's web site. Feel free to download it and use it for entering your tables and fields in a database.

Figure 4.1. A sample data dictionary that can be used to plan the data.

The data dictionary should contain the following:

  • Field: This is what you are going to name this field in your database. Use proper naming conventions that are allowed by your database (in this case, MySQL).

  • Type: What kind of field is this? Is it a text field? Is it a date field? We recommend you use names corresponding to the field types available to you through your database. For example, DateofBooking works with a date field.

  • Length: If it is a text field, how large do we need it to be? For example, if we are storing someone's first name, do we need 100 characters? Or do we know that the average name would probably not exceed 25 characters? This is one part of the process we can change in the future if we discover that someone has a first name that could take two lines of a bank card.

  • Description: Use this area to enter your comments regarding the field's function in your table.

After you have your tables and fields listed, create a model, or schema, of your database. The schema will show the tables in the database and their relationships to the other tables in the database. This way, you can see how everything works together. To create a schema in Freehand MX and to learn how to use a new tool—the Connector tool—introduced in Freehand MX, follow these steps:

  1. Open a new document in Freehand MX.

  2. Select the Text tool, click once on the page, and enter the following text: Database Schema. Font, point size, and weight are your choices.

  3. Select the Rectangle tool and draw a rectangle.

  4. Expand the Properties panel by clicking the down arrow. When it opens, you will see two tabs named Object and Document. Click the Object tab to open the Objects panel.

    Note

    If a panel isn't visible in Freehand MX, it can be opened in the Windows menu. In this example, if the Object panel was not a part of the Properties panel, select Window, Object or press Control-F3 (PC) or Command-F3 (Mac) to open the Object panel.

  5. In the Object panel, set the dimensions of the box to 200 pixels wide by 150 pixels high. Press Return/Enter after entering each dimension to cause the box to change on the page.

    Tip

    If the database is large and contains dozens of tables, you should consider converting the box to a symbol. Full details are given in Chapter 2, "The Architecture of Dynamic Sites," in the section "Symbols in Freehand MX, Flash MX 2004, and Fireworks MX."

  6. Select the Text tool, click once inside the box, and enter the following text:

    TABLE 1

    Field 1

    Field 2

    Field 3

    Field 4

    The example we are creating contains four tables. Here's a quick way of creating the four boxes without copying and pasting:

  7. Select the Pointer tool—the solid arrow—and marquee your box to select it and the text. Place the cursor inside the box and press the mouse button. With the mouse button down, press the Alt (PC) or Option (Mac) key and drag the selection to a new position. Create two more copies of the box, as shown in Figure 4.2, and change the table numbers to reflect those shown in the Figure.

    Figure 4.2. The boxes for the database schema are quickly copied into their final position in Freehand MX by selecting the object and clicking and dragging it with the Option (Mac) or Alt (PC) key pressed.
Using the Freehand MX Connector Tool

When the MX Studio was released to the market in late 2002, Freehand was included. Though the inclusion of Freehand in the Studio wasn't a surprise, it was surprising that the product did not contain the "MX" brand. This was remedied in early 2003, when Macromedia released Freehand MX to incorporate the panel-based MX interface.

One of the more interesting tools was one with the odd name of the "Connector" tool. There really wasn't anything remarkable about it until developers discovered that, once again, Macromedia had been listening to its users and watching them work. When we create these schema, we have to connect the boxes to each other to illustrate data flow. This was both a repetitive and time-consuming task. The Connector tool removes that tedium from workflow because it enables developers to map information architecture, data flows, and site maps and to assign relationships between objects on the page.

The key to using the tool is to understand that it establishes the relationships between the objects and that the look of the lines is controlled through the Stroke panel. To use the Connector tool, follow these steps:

  1. Select the Connect Line tool, as shown in Figure 4.3. When the tool is selected the Object Properties panel will change to reflect a stroke.

    Figure 4.3. The Freehand MX Connector tool is located on the toolbar directly above the Magnifying Glass. Note how the Object Properties change to reflect a stroke.

  2. With the tool selected, click once on the left side of the Table 1 box and drag down to the same position on the Table 2 box. When you release the mouse, the lines are drawn for you, as shown in Figure 4.4.

    Figure 4.4. The connector line is drawn and the thickness is set in the Stroke panel.

  3. To thicken the line, select it and click once on the Stroke Description in the Object Properties panel. This will open the Stroke panel. Set the thickness to 2 points, as shown in Figure 4.4, and press the Enter/Return key. The line gets thicker.

    You now have graphically illustrated the way the information from Table 1 is linked to the information in Table 2. The other relationship is data flow between Table 2 and Table 4. In this case, it flows both ways. Here's how to illustrate that relationship:

  4. Select the Connector tool and link the Table 2 and Table 4 boxes. Open the Stroke panel and select the left pointing arrow from the pop-down menu, as shown in Fig. 4.5. Set the stroke to 2 points.

    Figure 4.5. The end points on the connector can be changed to arrows and dots to reflect data flow.

  5. Set a single connection between Table 1 and Table 3. Connect Tables 3 and 4 with a two-way data flow. When finished, your document should resemble that shown in Figure 4.6.

    Figure 4.6. The completed database schema shows how all the data in a database relates to the other data in the database.

The lines connecting the field boxes are, for lack of a better analogy, connected to the boxes. For example, if you want to remove a line, select it and press the delete key. You cannot, however, move the lines. If you do, the data boxes to which they are connected will move with them. To see what we mean:

  1. Select the Select tool.

  2. Click on a line and drag it. The line and the box move. Undo the change by pressing Control-Z (PC) or Command-Z (Mac).

  3. Moving a box has the same effect. Click on a box and move it to another location. Note how the line connected to it changes to reflect the move. Undo the change by pressing Control-Z (PC) or Command-Z (Mac).

Note

Do not use the connect tool for database schemas because relationships have been within specific fields between tables and not tables themselves. If you are connecting fields, use simple strokes with arrowheads pointing to specified fields.

A workaround to use the Connector tool for a schema is making a box for each field and then a separate box for the table that contains the field boxes.

Now that we know how the data flows, we have to illustrate the logic using a flow chart.

What Is a Flow Chart?

To answer that question, you have to first ask another: What is logic? In extremely basic terms, it is the ordered sequence of steps required to get from point A to point B. Booking a tennis court at the community center looks simple, but everything in a web application requires a number of steps to achieve a certain task. For example, a user may be required to press a button to book the tennis courts. On the surface, this is a simple process, but the logic behind it includes checking if the court is available and, if it is, booking the court and sending a confirmation. The best way to show this logic is with a flow chart.

Why Use a Flow Chart?

Think of a flow chart as being the road map for the logic. Building dynamic sites is a complicated process, and you simply can't keep every step in your head until you start building the site. This is especially true when working in a team-based environment; a flow chart shows everyone involved what they need to know, and it underscores the requirements of the task at hand.

As we pointed out earlier, booking a simple baseball diamond requires a four-step process that enables the user to choose the baseball diamond, choose the date, see if it is available, and make the reservation based on a membership number.

A flow chart, as shown in Figure 4.7, presents everyone with a visual representation of the process. It is also a relatively simple process and is flexible enough that the charts can be combined to illustrate the entire process.

Figure 4.7. A flow chart created in Freehand MX demonstrates the steps necessary to provide a user with a baseball diamond reservation.

Although the process of mapping out the logic may appear tedious and a huge imposition on your time, there are three solid advantages behind this step:

  1. Planning the logic allows you to build the site on an extremely solid foundation.

  2. You discover whether your concepts or functionality are workable. You can identify functionality needs and determine if all the requirements for the process to work are being met. At this stage, especially, it is much easier to add features than later on.

  3. You actually save time. This stage of the process will identify potential problems before they occur. By solving these issues at the start of the process, the final application will be much more stable.
Flow Chart Symbols

Although we can use many types of symbols in a flow chart, we will use the four basic symbols, shown in Figure 4.8, for our purposes. Copies of the Fireworks MX 2004 and Freehand MX files, named LogicSymbols.png and LogicSymbols.fh11, are located in the Chapter 4 Exercise folder of the book's web site.

Figure 4.8. The basic shapes used to create a logic map in Freehand or Fireworks.

The basic symbols are:

  • Diamond: Decision block. This block answers a logical "yes/no" question, such as, "Is there a Cookie present on the user's browser?" From here, you have two exit points—one for yes and one for no.

  • Rectangle: This shape indicates a procedure, which is a single step or instruction. A procedure can only have one entry point and one exit point.

  • Parallelogram: This shape indicates a series of steps condensed into one subroutine. Often, this symbol can be broken down into a series of logical steps that could be indicated on another page.

  • Ellipse: Terminal points in your logic. This is where you begin or end your logic sequence.

In Figure 4.7, we showed you a typical login sequence. This map is fairly typical of the work produced by developers. Unfortunately, even though the map looks impressive, there are some serious problems.

The first is that the steps are terribly confusing. They can make life difficult for the database designer and the coder because it is hard to tell which steps are programming steps and which are decision-making steps.

The second issue is the improper use of boxes. Using our shapes as a guide, the map is composed of procedures, which is not useful if your job is to build the database or do the coding.

Finally, it is hard to tell where we enter and exit our logic. This chart will impress the client, but it is too complex. There are many steps that can be consolidated. Remember, the best way of dealing with complexity is from a position of simplicity.

Figure 4.9 shows how we simplified the logic.

Figure 4.9. Simplifying a logic map makes life easier for everyone, from the client to the database programmer.

When the chart is simplified, the steps become clearer and more understandable. The logic is also quite concise and easy to follow. Most important of all, the use of decision diamonds and terminal points to mark where we enter and exit this piece of logic suddenly makes life easy for all concerned.


Planning the Community Center Site

As you have seen, investing the time necessary at the start of the project will save a lot of production time and headaches as you get deeper into the production process.

In the case of the Oakbridge Community Center, three main features need to be developed. They are:

  • A tour based on interest. This section is the center's initial presence on the web and is to be designed to enable a first time visitor to "tour" the center based on interest. There are three interests: Sports, Fitness, and Community outreach.

  • An online booking facility for current members. This will enable them to reserve sports fields and tennis courts, book fitness classes and meeting rooms, and so on.

  • An interactive chat facility where various community and center groups can get together for online meetings and discussions. This feature will provide everything from video feeds to simple chat sessions.

You will notice that at this stage, there is no talk of technology and so on. Keep it simple and save the "Techie Talk" for the work group. The obvious question, therefore, is, how does each feature work? It works by presenting a rather simple objective for the feature and then developing a logic chart that meets the objective.

The Logic for the Tour

The tour works in a relatively simple manner. The visitor arrives at the community center's main page and is presented with a tour link. When it is clicked, the visitor sees a page offering three tours. The user selects his or her area of interest, and the appropriate page is built and displayed in the browser.

The objective is rather simple: Provide the visitor with the opportunity to tour the Oakbridge Community Center site based upon interest.

The process starts with the visitor deciding to take a tour. The page he or she sees contains a side menu containing a list of facilities. The user either has to choose a facility to proceed or press the browser's back button to return. If a facility is selected, a query is sent to the database to see if a record exists and, if it does, to retrieve that record. The record is then displayed on a web page.

The logic chart for this feature is shown in Figure 4.10.

Figure 4.10. The logic chart for the facility tour is rather simple.

The Logic for the Online Booking Area

With this feature, the user, a member of the community center, books an admission ticket to public skating, swimming, or other public recreational pursuits offered to the community at large. In addition, the user can book a sports facility—baseball, tennis, soccer, or football. In all cases, the booking is done based on availability and valid membership.

The objective? To provide the member with the opportunity to book sports and fitness offerings available to the public and the members of the Oakbridge Community Center.

In this instance, the first thing to be confirmed is the member being logged into the site. The member then selects the facility or activity. If the booking is not available, the site presents the visitor with this information. If it is, the member is shown the schedule for the next seven days and is asked to make a selection. If the time is not available, the member is given the opportunity to choose an alternate time. If it is available, the slot is reserved and the member is asked if he or she wants to reserve another time.

The logic map for this feature, as shown in Figure 4.11, is a bit more complex than the tour, but it is still relatively simple to follow.

Figure 4.11. The logic chart for an online booking facility is based upon valid membership and available booking times.

The Logic for the Meeting Facility

The meeting facility is a little bit different. It is to be designed to provide community outreach to various groups in the community and at the community center.

The objective is rather simple: To provide the Oakbridge community and various community center organizations and clubs with an online facility to meet and discuss issues through video, audio, and chat services.

On the surface, this application may appear to be quite complex. When you break it down into a series of logical steps, though, it becomes a rather manageable project.

The user member logs in and is immediately connected to the Flash Communication Server. When the connection is established, the site asks the user to makes some choices. If the user requests video capability, the browser checks to see if this feature is available, and if it is, a video stream is established. If audio is also requested, the same check is made, and that stream is established. In the case of chat, the connection is established with no check. When the meeting gets underway, the system waits until the user is finished. When this occurs, the audio, video, and chat streams are closed and the main meeting page where he or she then logs out. The logic map for all this is shown in Figure 4.12.

Figure 4.12. The logic here simply asks three questions, and, based upon a "yes" or "no" response, the appropriate stream is established.

    [ Team LiB ]


Getting Ready to Work

With the logic charted, the entire team now has a visual road map for each section of the development process. The designers see what areas of the site they have to create and how each section of their work has to function. The coders have their marching orders as well because each graphic on the chart clearly lays out, in broad terms, what they must do to meet the objectives.

The objectives are the key. There should be no more than three, and they should be kept simple and clearly worded. They also should not contradict each other.

The other part of the equation is the client. He or she has retained your services because you possess the technical and design skills unavailable to the client. When proceeding through this process, always keep the client in mind and make sure the client clearly understands what will be done and why. The last thing you need is to have the client change the scope or direction of the project in mid-stream because he or she has an understanding of the project that is the opposite of what you thought it was.

This part of the process is time-consuming and time-intensive, but don't regard it as a chore or "necessary evil." Regard it, instead, as a solid investment in the success of the project.

What Tools Will Be Needed?

This is the point in the chapter where we step away from the project and review the tools you will be using from this point onwards. Naturally, we will be focusing on the use and integration of the tools in Studio MX 2004. Still, there are other bits and pieces you will need to use or to which you should have access as you work your way through this book.

The database we will be using is MySQL. The reason behind this decision is its availability on both the Macintosh and the PC platform. By using MySQL, we avoid becoming "platform-centric." On the PC side of things, the database with the widest distribution is Microsoft Access. On the Mac side of the divide, it is FileMaker Pro. Though both applications have wide use, getting them to hook into Dreamweaver MX 2004, especially FileMaker Pro, would move us outside of the scope of this book. The most compelling reason for the use of MySQL, apart from its ubiquity, is the fact it is also free. A PC and a Mac OS X version are available at http://www.mysql.com/downloads/index.html. Another OS X Macintosh version is available at http://www.aaronfaby.com. This installer contains a control panel as well for turning MySQL on and off.

It would help to have ColdFusion MX installed on your computer. This is to be used for local testing purposes. In addition, a copy of Flash Communication Server is also not a requirement, though it would be nice to have for local testing. Another source of the Flash Communication Server software is Director MX (PC). A local testing version of the Flash Communication server is located on the installation CD. You will need the Flash MX 2004 Remoting Components. If you do not have them, they are available for both platforms at http://www.macromedia.com/software/flashremoting/downloads/components/.

What Data Types Are Needed?

Based on the logic charts, the data types are rather easy to identify. For the tour, the data will consist of fields holding the names of the .jpg images and fields containing the descriptive text that applies to each image.

In the case of the booking facility, a bit more information is required. We will need text to hold membership names. In addition, we will need alphanumeric data—numbers and letters—that represent membership numbers. We will also need to create date fields to ensure the membership number is current. Finally, we will need text fields that generate confirmation messages and numeric fields to generate sequential confirmation numbers.

In the case of the community outreach facility, a lot of similar data will be required to log in. There will be blank text fields into which the input text is flowed and shared with everyone else participating in the gathering. There will also be video and audio data streams that will have to be managed.

How Will the Data Look?

The way the data is presented to the user is a major consideration. Traditionally, dynamic sites contain a consistent area of a page into which the data is placed and which the browser then formats. If the user leaves the Oakbridge Community Center site thinking he or she just visited three separate sites, then the project is a dismal failure.

The bulk of the data will flow from MySQL through ColdFusion MX or the Flash Communication Server into table-based templates created in Dreamweaver MX 2004. In addition, because much of the text will be placed into those tables, the use of Cascading Style Sheets (CSS) to present a consistent and uniform "look" to the site is an important consideration.

The use of Flash also requires that the images and text match that of the HTML-based pages. In addition, the placement of many of the Flash Remoting Components on the Flash stage has to be carefully managed.

Navigation is also an important consideration. It, too, has to have a consistent look. On top of that, it must be intuitive and simple to use.

How Will It Be Managed?

Workflow has changed to a more modular approach as we move toward the design of dynamic sites. With the number of people involved in the process, plus a client approving each milestone, management of content is paramount. There are a number of retail Content Management Systems (CMS) ranging from off-the-shelf to custom-written solutions. Make the decision based on the needs of the project and choose a CMS that works with the design, not against it. Or, better yet, write a simple CMS to input your text and graphic URLs that will suit your needs. You should be able to put a simple CMS together as you go through this book.

Consider, for instance, password-protected areas where the client, the designers, and the coders can all upload content. If the client insists on being involved in the content creation process, whether it be uploading graphics or inserting new text, keep the client away from the original files being used on the site. Also ensure the designers and the coders don't touch each other's work.

Also, develop a central staging area for all content. This way, it is in one place and accessible to all as needed. If the client is to be heavily involved, develop a "client site" that will receive client approvals and a client staging area into which the client places the content.

Finally, all original content, from logos and photos to text and code, should be regularly backed up, and those authorized to work on or have access to original content should be reduced to a select few. The web development process is littered with stories of lost or altered images and other content that required replacement. The problem was that the original was lost or altered and couldn't be replaced. The use of everything, from RAID Drives to CDs, will solve this potentially nasty storage and back-up issue, and the choice of which method to use is simply based upon the complexity of the project.


Summary

This chapter has dealt with a relatively new field in the web development process—the move from content that is fixed in place to content that is constantly changing. With this shift has come a different focus on how web developers regard a web page. No longer is it a collection of images, text links, and the other bits and pieces that comprise the web page. All that content is now, thanks to the increasing use of databases, regarded as data.

We started the chapter by explaining how to plan data and presented a number of tips to get you started. The bottom line is: "Think like a computer."

When you start thinking like a computer, you confront logic, and we explained the difference between planning the "logic" and planning the "data."

One method we presented was the development of a "data dictionary" to help determine the data model and the fields required. A sample is available on the book's web site.

From there, we showed how the "dictionary" can be made even more realistic through the creation of a model, called a "schema." We showed you how to create a schema in Freehand and how to use the new Connector tool in Freehand MX to show the relationships between the various database tables.

Having determined the dictionary and the schema, we showed how to map the logic of the various dynamic elements in the site through the creation of a logic map, using four very basic symbols that can reside in either a Freehand or Fireworks library.

We then turned our attention to the project we will be undertaking for the balance of the book, the creation of a dynamic site for the Oakbridge Community Center. We thoroughly reviewed the tour, booking facility, and community outreach features of the site. Close attention was paid to both the objective and logic flow of each feature using logic charts that could be developed in either Freehand or Fireworks.

We finished the chapter with an overview of the tools to be used to create the site, the data types that will be used, how the data will look, and how it all will be managed.

The underlying message of this entire chapter is that the best way of coping with complexity is from a position of simplicity. Unfortunately, most people new to the dynamic game go in the opposite direction.

With the data and logic under control, it is time to start feeding the client some ideas and concepts. That is the focus of the next chapter.


Chapter 5. Planning the Look

Having spent the previous four chapters carefully walking through the planning process, the time has arrived for the site to start coming to life. The birth of a site isn't the graphics, images, and other material appearing in Dreamweaver MX 2004. Sites come to life in a rather methodical manner. It all starts with a site map showing how each page interacts with the others and the hierarchy of information. Another important map is the one that shows the interaction and data transfer between the client side—the user's browser—and the server side—the machines that feed the content into the page.

When the map is in place and approved, the next step is to create linear drawings—sometimes called "wireframes"—that reflect the placement of content on the page. This gives everyone from the client to the team an idea of where content is to be placed on each page.

Finally, the process moves to the "comping" stage. At this point, the site actually starts to look like a collection of web pages. The images and "rough" artwork are placed on the pages and some light functionality—links, pop-down menus, and so on—are added. It is also at this stage of the process where usability issues are first identified and addressed.

We do realize that no two web development "shops" approach this process the same way. To accommodate this realization, we are going to present a series of techniques that show, in a general manner, how one can produce much of the work generated in this chapter. This way you can use our technique or modify it to reflect your way of doing things. If you are interested in how we approached these steps with the Oakbridge Community Center, the appropriate files are available for download from the book's site.

The Macromedia Studio MX 2004 contains a rather complete, yet unheralded, selection of storyboarding, linear, and comping tools. Having visited a number of user groups and spoken at a number of conferences, it is common for us to hear people say, "Gee, I didn't know you could do that in Freehand" or "Cool. Fireworks lets me do that?" As you may have guessed, your two primary modeling tools are Freehand MX and Fireworks MX 2004. Dreamweaver MX 2004 is used simply for assembly, though we are going to show you how to turn Dreamweaver's site map into a deliverable.


Creating the Site Model

There is a great saying about designing a web site. "All you have to do," said this observer, "is to simply stare at your screen until drops of blood appear on your forehead." Though web designers will tell you there is a grain of truth in that saying, the blood, sweat, and tears process doesn't start on the forehead. It starts with a blank sheet of paper.

The designer will start sketching the navigation and data flow between the pages and to and from the database. He or she will start drawing the placement of the page elements or dynamic content and showing how dynamic content appears on each page, and eventually those drawings will become a site. Looking at this as a continuum from sketch to comprehensive, it could be perceived as a complex process. It is.

The main reason for the complexity is the importance of this stage of the process. Much of what will appear on the site and how the user not only moves through the site but also how the user interacts with the data will be determined at this stage. Usability issues will become evident. Information design mistakes, if not caught here, can have a profound impact upon the way the user accesses information on the site. Color choices, font choices, navigation models, data flow—all are determined in the model, and if problems with them are not caught and fixed, their negative impact on the site will only magnify as the site approaches upload.

Modeling the Server-Side Workflow for Flash MX 2004

In our previous New Riders book, Building Web Sites with Macromedia Studio MX, we took a rather extensive look at building a site model for a static site. Interestingly, the modeling process for a static site and a dynamic site is not radically different, depending on which way you choose to proceed.

A dynamic site adds the server side of the equation to the mix. This is where we will be focusing our efforts regarding modeling. Rather than look at the broad picture, we are going to get a bit specific and focus on building the model for a dynamic Flash application.

The workflow on the server side—the side the user never sees—is fundamentally different from what takes place on the user's computer. The client side depends on the way the user interacts with the Flash MX 2004 UI. The functionality of that UI is provided by the server-side workflow.

Depending upon your project—a hotel reservation system, for example—this workflow can become quite complex. Information, thanks to the Internet, can be retrieved from any number of locations, which involves accessing servers to complete the user's request. This use of internal and external sources of data is sometimes referred to as the data storage tier.

This tier is primarily focused around storing data commonly through the use of individual database documents created in such applications as Microsoft Access, MySQL, and FileMaker Pro. In fact, the power of this tier is unleashed when you consider that data does not have to reside on your network; it can live anywhere, so the data resources can be pulled into the Flash application from any external source. Remember, the user's computer—the client side—couldn't care less where the data it is displaying resides. It simply requests information, and it is up to the server to determine where to go to fulfill the request.

This is why the workflow models for Flash applications look so complex. The workflow moves between the server side and the client side by passing through a communication layer. These two very different worlds use the common language of HTTP when they talk to each other through the communication layer, as shown in Figure 5.1.

Figure 5.1. All communication between the Flash Player in the user's browser and the web server passes through an HTTP Communication Layer.

In the model shown in Figure 5.1, data flow is quite simple to understand. The user makes a request, the request flows into ColdFusion MX, and ColdFusion passes the request on to the database. When the information is found, ColdFusion essentially tosses it between the appropriate "include" tags on the page. That code is then passed through the HTTP Communication Layer to the user's browser where the content appears in the Flash Player on the browser's screen.

This is fundamentally different from the static model of web design. In this case, the user makes a request and the server feeds the page into the browser.

The HTTP Communication Layer is important because a Flash application is delivered through a web browser and HTTP (Hyper Text Transfer Protocol) to get the content to your browser. Just be aware that using it in a dynamic Flash environment results in a bit more work on the client side than it does when the dynamic page is authored using Dreamweaver MX 2004.

The reason is that the Flash application is always working, even when the work is being done on the other side—the server side—of the fence. A dynamic web page put together in Dreamweaver and viewed through a browser essentially rests when the work is being done on the server side.

This is the great strength and weakness of creating dynamic Flash presentations. The more server-side requests you make, the greater the number of weaknesses will be present. If the dynamic Flash presentation is built efficiently, it will be faster and more reliable because the client side will send out the request for data whether the server side is able to receive it or not.

Though there are solutions, the "First Rule of Dynamic Web Physics" will come into play. The rule according to one of the authors is: "For every action, there is an equally opposite and ugly implication." You could, for instance, load in a preloader at the start of the Flash presentation. With the bulk of the information loaded at startup, the application will run a lot smoother in theory. This is, however, not necessarily true in practice. If the preloader or configuration file can't be loaded at start-up, the dynamic Flash application will become useless.

To avoid this, play the "what if" games and build those solutions into the Flash application. For instance, anticipate what would cause a failure and build the solution into the application.

Mapping a Flash MX 2004 Login

A login is relatively easy to understand. In one of the applications we are going to build, the user will be asked to log into a Flash chat room. Nothing could be simpler than that. Right? Not so fast.

The application was built so that users only have to register once. That information is resident in a shared object located on the user's hard drive. If it is there, the route to the chat room branches in one direction. If it isn't on the hard drive, the route branches in the other direction. The user enters the wrong name. What happens? What if the user enters the right name but the wrong password? Getting the picture?

The map shown in Figure 5.2 is created in Freehand MX using the Connector tool and a box. This is a typical map for a dynamic secure login.

Figure 5.2. Mapping of a Flash login can be created in Freehand MX.

What you don't do to get yourself started is to immediately begin drawing. Break out a pad of paper and start telling the story of what a user has to do to log in. Start with, "When the user arrives at the page..." and go from there.

In the case of the login, "When the user arrives at the page..." the application looks for a previously created "cookie" on the user's hard drive. If it is there, the user will be asked if they want to automatically log in using the details from the object. If the user agrees, the information is sent to the server. If the user disagrees, he or she will be shown an area where they have to enter their username and password.

The text fields are completed and the user is asked if he or she wants the details stored in a shared object. The data is then checked to ensure all the fields have been completed. If this fails, the user sees an appropriate message prompting him or her to complete the missing field. Otherwise, the data is shot off to the server to be authenticated.

If the authentication fails, the user gets an error message and is returned to the input area. If the data is correct, the user will then see a message to that effect and consequently be taken directly to the chat room.

Note

During the writing of this book, one of the authors was driven absolutely crazy by an online survey.

In order to participate in a special project, all he had to do was to complete a simple form. The form contained three text input areas for his address. He filled out the form four or five times, and each time, after clicking the submit button, he was prompted to fill in the address area. He finally got the form accepted by entering his street number in the first address box, his street name in the second, and the word "road" in the third.

In this instance, the data map didn't account for the fact that all three address boxes had to be completed. In fact, there was nothing on the survey indicating this requirement. When he returned to the address area, he was understandably mystified. There was nothing on the screen to show him where he had made the mistake.

This is a good lesson in planning these sorts of things. If all boxes have to be completed, let the user know. If an error message is generated, show the user where the error is located. A properly-constructed map will point out these problems.

Accounting for Dynamic Data on a Site Map

If you do build a site map, don't forget to include server interactions and data flow.

In the case of data flow, you can easily include pages that illustrate content flowing in from a database. To do this, you simply create "data buckets" like those shown in Figure 5.3. The square represents database content and the "buckets" underneath illustrate where the content flows after being summoned by the user's browser.

Figure 5.3. "Data buckets" can represent pages where content flows in from a server.

The login presented earlier in the chapter shows how a user interacts with the server. Obviously representing all of the interactions shown in Figure 5.2 would be overkill. When you encounter those areas of the map where the user interacts with the server side, simple shapes can be used to demonstrate that particular user interaction. Just be sure everyone agrees on the meaning of the shape. In the case of the login, the interaction can be illustrated as shown in Figure 5.4.

Figure 5.4. Simple shapes can be used to illustrate user interaction with the server side.

Notice how the diamond shape replaces the schematic in Figure 5.2. The amount of detail you wish to show is something you should agree on with the information designer and technical director. Also understand that this simple diagram shows nothing more than flow. It should never replace a technical or functional specification.


Wireframing

A wireframe is a digital representation of the storyboard. Wireframes use primitive shapes—squares, circles, diamonds, and so on—to illustrate text placement, graphics placement, or any other elements that may appear on a page. The other use for wireframes is to model the information hierarchy. From a pragmatic point of view, wireframes set the graphical layout and provide the coders with a visual framework for the HTML.

You shouldn't complicate the process and wireframe each page in the site. Build them for the templates and major, secondary, and tertiary pages. Also build them for any pages that may be regarded as being outside of the main site design. An example is a page that gathers visitor information or requests addresses.

Finally, wireframes represent content. They aren't content. The shapes represent page elements. They also set the basis for production workflow and can be designed to model navigation between pages. When you design a wireframe, include all the elements on the page that are called for in the original paper-based design sketch or comprehensive.

Wireframing Tools and Techniques

Macromedia Studio MX 2004 provides you with a number of industrial-strength tools. You can, for example, create the wireframe by tracing the artist's drawing in Freehand MX. You also can create the wireframe using symbols and instances in Fireworks MX 2004 and create links and so on to the elements on the page. In Dreamweaver MX 2004, a layers-based layout can be used to create the document. The choice is up to you.

In this section we are going to be building the wireframes using the sketch shown in Figure 5.5. It shows a proposed layout of the community center's main page.

Figure 5.5. The wireframing process starts with a sketch or comprehensive drawing of the page.

Building Wireframes in Fireworks MX 2004

As you arrive at this point in the process, everything you have produced is paper-based. Using Fireworks to produce your wireframes has a number of advantages:

  • Fireworks is a web-imaging application. This means the resulting file can be saved in a web-ready format, such as .jpg, .gif, or .png.

  • The slicing tools enable you to produce a sliced document, with HTML code, which can quickly be added to Dreamweaver.

  • If you need to produce a clickthru, you can attach links to the slices. This makes sure the navigation makes sense.

  • The capability to create a Library and share it with the members of the team ensures everyone is using the same symbols.

To build a wireframe model in Fireworks MX 2004, follow these steps:

  1. Download the Chapter Five files from the book's web site to your desktop and open the CommCenterWireFrame.png file. This will launch Fireworks.

  2. When the file opens, open the Library by clicking the Library tab in the Panel Group, selecting Window, Library, or pressing the F11 key. You will see a collection of icons, shown in Figure 5.6, that can be used in building wireframe models.

    Figure 5.6. Wireframes are built using a set of icons that can be stored in a Fireworks MX 2004 Library.

  3. Select File, Import (Control-R (PC) or Command-R (Mac)), navigate to the Chapter 5 folder on your hard drive, and select the file named Linear.jpg. This is the file shown in Figure 5.5.

  4. When you see the cursor change to the Import cursor—it looks like a sideways "L"—place the cursor in the upper-left corner of the canvas and click once. The image will drop into place in its own layer named Bitmap in the Background Layer.

  5. In the upper-left corner of the drawing, the artist has indicated the placement of a graphic. Open the Library and drag a copy of the symbol named Graphic—it looks like a box with an X in it—onto the canvas. The symbol appears and the arrow in the lower-left corner indicates that the object on the canvas is an instance of the symbol. Drag the instance to its location on the page.

  6. With the instance selected, click the Scale tool. Click and hold on bottom-right handle of the instance. The cursor will change to a double diagonal arrow. Drag that handle up towards the upper-left corner until the bottom of the instance is sitting in the area indicated.

  7. The instance isn't wide enough to fill the area indicated. To fix this situation, select the instance and the Scale tool. This time, drag the center handle on the right side of the instance. The cursor will change to a double horizontal arrow. Drag the handle until the instance's width meets the specification called for in the drawing.

    Tip

    One of the quirks of Fireworks MX 2004 is an inability to lock the layers inside a layer. You can only lock a named layer. A named layer has a file folder icon preceding the layer name. We bring this to your attention because you might accidentally select the drawing instead of an instance. If this is driving you crazy, lock the background layer before you place the graphic. Add a new layer and place the symbols in that layer. This way, you don't accidentally select an important image.

  8. The drawing calls for a Flash animation in the open area of the page. Drag a copy of the Flash.swf symbol onto the canvas and scale it.

  9. Add and scale the remaining symbols called for in the drawing. When you are finished, turn off the visibility of the Bitmap layer. Your final wireframe should resemble that shown in Figure 5.7.

    Figure 5.7. The wireframe model for the page is complete.
Creating a Shared Library in Fireworks MX 2004

We mentioned earlier that Libraries of symbols can be made available to the team. Here's how:

  1. Select Export Symbols from the Library panel's pop-down menu to open the Export Symbols dialog box, as shown in Figure 5.8.

    Figure 5.8. The Export Symbols dialog box lets you choose which symbols are to be exported.

  2. You can choose to export a few of the symbols by pressing the Shift key and clicking the symbols to be exported. If you want to select a few symbols that are not contiguous, hold down the Control key while selecting symbols. You can also choose to Export all of them by clicking the Select All button.

  3. With all the symbols selected, click the Export button. This opens the Save As dialog box shown in Figure 5.9.

    Figure 5.9. A Symbol Library is saved as a .png image to the folder chosen.

  4. Navigate to the folder where the Library is to be saved. Name the file and click the Save button. The file is saved to the location chosen.

Tip

Another quirk of Fireworks MX 2004 is its eagerness to please. When you save a Symbol Library, Fireworks creates the .png document and then proceeds to place all the symbols in the Library on the canvas. Before you hand this file off to the group, open the file and delete all the instances on the canvas. This way they get the Library with a "clean" canvas. We aren't sure if this is a bug in the program or if it will be fixed by the time you read this book.

Building Wireframes in Freehand MX

If ever there was an application that is completely overlooked in this phase of production, it is Freehand MX. With its roots originally planted in the print world and its continuing, rather unfair comparison to Adobe Illustrator, Freehand is simply not seen by the web development community as being an industrial-strength production tool.

Macromedia, recognizing this fact, has slowly been integrating Freehand MX into its web stable of products. Freehand offers you a tool that will result in serious workflow and productivity improvements. The following features help boost productivity:

  1. Symbols move seamlessly into Fireworks and Flash.

  2. The multi-page feature permits you to create multiple pages in one document and import them, one at a time, into Fireworks. Where it was common to see ten separate documents for a ten-page site, you now have only one Freehand document.

  3. The Connector tool enables you to create site maps and tech specs in record time.

  4. The new Link tool enables you to create "clickthrus" and post them to the web in an astonishingly short time frame.

  5. The MX panel grouping, common to all the MX products, provides a familiar working environment.

  6. Multiple master pages enable you to accommodate changes to the master layout and still have them apply to pages in a multiple page document.

  7. The capability to set a page to a custom size to accommodate your web design preferences.

  8. Paper-based deliverables. Freehand's roots are in print, and the capability to print vectors through a laser printer gives you the ability to produce a high-quality deliverable to your client.

  9. The Object panel. This panel applies a wide variety of effects and styles to selected objects.

Follow these steps to build a wireframe model in Freehand MX:

  1. Open the Freehand file named WireSymbols inside the Chapter 5 folder you downloaded from the book's web site. You have just opened a Shared Library containing all the symbols used to create the Fireworks wireframe document in the previous exercise.

  2. Open the Properties panel and click the Document tab. If your Properties panel isn't open, you can select Window, Document to open the Document properties.

  3. When the Document properties is open, select Custom from the Page Size pop-down. Set the X value to 600 and the Y value to 800 as shown in Figure 5.10. Press the Enter/Return key and the page will change to the dimensions chosen.

    Figure 5.10. The Document Properties panel contains a number of preset page sizes, including Web Page. For other sizes, select Custom and enter the values.

  4. Select File, Import (Command-R (Mac) or Control-R(PC)) and, when the Import dialog box opens, navigate to the folder containing the file Linear.jpg. Select it and click Choose.

  5. Place the cursor on the Freehand page. When you do, the cursor changes to the Import cursor, which looks like a sideways L. Click once and the Linear.tif image will be placed on the page.

    Building the wireframe over the original image, like you did in Fireworks, is not a great idea. If there is any one aspect of this application that drives developers new to Freehand crazy, it is that any selected object is automatically moved to the selected layer. Let's assume you place the image in Layer 1. You build over it and there are now 10 layers. If you click on the image just placed while Layer 10 is selected, the image moves to that layer. One solution is to simply lock the layer. There is, however, a more elegant solution.

  6. Select the Pointer tool (the solid black arrow) and click once on the image. Open the Layers panel, and you will notice the Foreground layer is selected.

  7. Click once on the Background layer. The image will appear to "gray out," as shown in Figure 5.11. Click the Lock on the Background layer to "lock" the background layer and prevent changes.

    Figure 5.11. Move any images to be traced into the Background layer.

    You have just used a feature of Freehand MX called a Non-Printing Layer. Anything placed into the Background layer will neither print nor export.

  8. Build the wireframe by dragging the symbols onto the image. When you finish, turn off the visibility of the Background layer by clicking the gray circle beside the check mark on the Background layer. The circle will turn into an outline and the image in the layer will disappear. Your page should resemble that shown in Figure 5.12.

    Figure 5.12. Turning off the visibility to the Background layer reduces clutter and lets you clearly see what you have drawn.
Building Wireframes in Dreamweaver MX 2004

When it comes to building wireframe models, developers rarely, if ever, have Dreamweaver on their radar. Yet Dreamweaver offers two features that are ideally suited to the task. They are:

  1. The capability to include a tracing image that closely resembles the inclusion of an image in a non-printing layer of Freehand. The browser essentially ignores tracing images.

  2. The use of layers. Layers can be easily moved around on the page, can be color-coded, and can contain text.

To build a wireframe model in Dreamweaver MX 2004, follow these steps:

  1. Open Dreamweaver MX 2004 and create a new site by selecting Site, New Site. When the New Site dialog box opens, name the new site FrameIt. Set the site's root folder to be the folder named WireFrame in your Chapter Five Exercise folder and its Graphics folder to the graphics folder located in the WireFrame folder. When you click OK, Dreamweaver will open a new blank page. Enter FrameIt into the page's Title box and save the page to the root folder using the same name.

  2. There are two methods of adding a tracing image. The first is to select View, Tracing Image, Load. This will open the Select Image Source dialog box shown in Figure 5.13. Navigate to the site's Graphics folder, select Linear.jpg, and click Choose. This opens the Page Properties dialog box shown in Figure 5.14. Click OK and the image appears on the page. If you want the image to appear somewhat opaque, click the Appearance Tab of the Page Properties dialog box and then specify the transparency for the image by dragging the Image Transparency slider.

    Figure 5.13. A tracing image is selected from the Select Image Source dialog box.

    Figure 5.14. Tracing images can also be added by selecting page properties from the Modify menu.

  3. The second method is to select Modify, Page Properties (Command-J (Mac) or Control-J (PC)), which opens the same Page Properties dialog box (Figure 5.14) mentioned in the previous step. Click the Browse button beside the Tracing Image input area near the bottom of the dialog box. This opens the Select Image Source dialog box mentioned in the previous step. Navigate to the Graphics folder, open it, and select the Linear.jpg file. Click Choose, and when you return to the Properties dialog box, click OK. The image now appears on the page.

Note

Those two steps are a classic example of what one of the authors tells his students: "There are 6,000 ways of doing everything in digital media, and when you get right down to it, nobody cares how you did it. They just care that you did it."

The first method starts at the Image Source dialog box and winds up in the Page Properties dialog box. The second method goes in the opposite direction. Both accomplish the same task. Don't ask us why. We are like you... we just use the software.

Tip

You can't simply select a tracing image and press the delete key to remove it. To remove a tracing image from a page, remove its path in the Page Properties dialog box.

With the tracing image in place, here is how to build the wireframes:

  1. If you are in Layout Mode—a yellow stripe at the top of document window indicates this—click the Layout button on the toolbar. Click the Common Tab on the Insert Panels and click once on the Draw Layer button.

  2. Place the cursor in the upper-left corner of the image and create a layer by clicking the mouse and dragging down to the point where the right edge of the box touches the Cursive Text instruction and the bottom of the box touches the first key line in the drawing.

  3. Click once on the edge of the box you just drew. The box will show its handles and the Property Inspector will change to provide you with some information regarding the layer.

  4. In the Property Inspector, set the Background Color of the selected layer to #99000. Click once inside the layer, and when you see the flashing text cursor, press the Enter/Return key once and enter Photo of Community Center.

  5. Select the text. In the Property Inspector, set the Format to Paragraph, the Style to Bold, and click the Text Indent button once. Your page should resemble that shown in Figure 5.15.

    Figure 5.15. Layers can be color-coded and text can be added to them to clearly indicate the function of the content.

Tip

Layers can be moved anywhere on the page by simply dragging the handle at the top of the layer. They can also be resized by grabbing one of the handles and dragging it in, out, up, or down.

If the precision of a layer's size is critical, the measurements for width and height can be entered into their respective areas of the Property Inspector.

The Freehand MX, Fireworks MX 2004, and Dreamweaver MX 2004 Round Trips

When you combine the precision of Freehand MX with the web-optimization capabilities of Fireworks MX 2004 and the assembly power of Dreamweaver MX 2004, you have an unbeatable production combination.

In this exercise, you will export a Freehand wireframe image into Fireworks. The image will be sliced up in Fireworks and the slices will be assembled in Dreamweaver. Just to add some variety, we'll add a hot spot that sends the user to New Riders in Fireworks and another that sends the user to Macromedia in Dreamweaver.

  1. Open the CommCenterFrame.fh file in the Chapter 5 file downloaded from the book's web site.

  2. Open a new Fireworks document. When the New Document dialog box opens, set the width to 600 pixels, the height to 800 pixels, and set the Canvas Color to white. Click OK and new Fireworks document opens.

  3. Click once on the Freehand document to bring Freehand to the front. Select all the items on the Freehand page by either "marqueeing" them, selecting Edit, Select, All or pressing the Command-A (Mac) or Control-A (PC) keys.

  4. Drag all the selected objects onto the Fireworks canvas. When you see a square on the Fireworks canvas, as shown in Figure 5.16, release the mouse, and all the objects will appear on the Fireworks canvas. Quit Freehand.

    Figure 5.16. The rectangle that appears between the applications tells you that you can release the mouse button and the selected objects will drop into the target application.

    Note

    Yes, there are other ways of getting Freehand content into a Fireworks document. Selecting File, Import or File, Open in Fireworks immediately comes to mind. The reason we are such big fans of the drag-and-drop technique is because it is much more efficient than the previous two suggestions.

  5. Using Figure 5.17 as your guide, select the Slice tool and slice the image. If you are looking for a seriously efficient method of slicing the images, select them all and press Alt-Shift-U (PC) or Option-Shift-U (Mac). When you are alerted that multiple items are selected, click Multiple. This keyboard command applies slices to all selected objects. A slightly slower method is to select Edit, Insert, Slice.

    Figure 5.17. The Fireworks image is sliced using the Slice tool.

  6. Under the text box at the top of the image, there are four submenus. Select the first one and enter http://www.newriders.com in the Link area of the Fireworks Property Inspector.

  7. Keeping with our "speed" theme, here's a really fast one-click method of exporting the slices into Dreamweaver. Click the Fireworks Quick Export button in the upper-right corner of the Document window. When the pop-down menu appears, select Dreamweaver, Export HTML to open the Export preview dialog box. Name the file and save it to the Slices folder of your Chapter Five Exercises folder. When the Dialog box closes, save the file as a .png file.

  8. Click the Quick Export button and this time select Dreamweaver, Launch Dreamweaver. Dreamweaver will open with a new blank page. Close this blank page, navigate to the SliceIt folder, and open the HTML file just created in Fireworks. If you click on the button that was assigned the New Riders link in Fireworks, you will see the link in the Dreamweaver Property Inspector.

  9. Select the Hot Spot tool on the Dreamweaver Property Inspector and drag a hot spot over the last link button at the top of the page. When you release the mouse, the hot spot appears as a blue overlay over the button and the Property Inspector changes to indicate a hot spot as shown in Figure 5.18. Enter http://www.macromedia.com in the Link area of the Property Inspector.

    Figure 5.18. Use Dreamweaver's Property Inspector to add hot spots and links to objects on the page.

  10. Test the file in a browser by pressing the F12 key.


Comprehensive Designs

With the wireframes submitted, you are going to be dealing with the next question: "That's interesting, but what does it look like?" This is the purpose of a comprehensive design or "comp."

At this stage of the process, the design starts to take on a life of its own and becomes more than a series of seemingly disjointed symbols and boxes on a page. Graphics are added. Text is inserted into the page and links and menus are indicated. In certain cases, they may even be working links and menus.

If you compare the linear for the community center's main page, you will see the design closely follows that of the linear. Naturally the client and other members had some input. The result, shown in Figure 15.18, was that the sublinks became a bit more simplified. We also dispensed with the pop-downs because it was felt they added a bit of confusion to the design and added more complexity to the navigation than was necessary.

Figure 5.19. The "comp" reflects changes to the design identified during the production of the wireframes.

Creating the "Comps" in Fireworks MX 2004

Sometimes just looking at how an artist assembles an image tells you more than describing how it was composed. In this case, our artist used a couple of interesting techniques.

On the surface, the image looks relatively simple. Working to an 800x600 canvas with a white canvas color in Fireworks MX 2004, only two things appear to be on the page. There is the banner at the top of the page and the navigation running down the left side of the page.

It is only when you open the layering for the image that the underlying complexity of the page, as shown in Figure 5.20, becomes evident.

Figure 5.20. A relatively simple-looking comp is actually composed of multiple layers in Fireworks MX 2004.

Things to pay attention to here are:

  • The incorporation of the text box, which is indicated in the linear, into the final community center graphic. This was done because the required font would not have rendered properly in a browser.

  • The fade between the image of the building and the clouds is done using a gradient mask.

  • The use of multiple layers gives you the flexibility to easily make changes. By giving each element on the page its own layer, the objects on a layer can either be removed by simply turning off the visibility on the layer (click the eyeball beside the layer name) or edited by simply clicking on the layer name, which selects all the objects on the layer.

  • Grouping objects makes your life easy. Simply select the objects to be grouped and select Modify, Group (Command-G (Mac) or Control-G (PC)). In this case, the lettering for the links on the left side was converted to outlines. This means each letter becomes a separate piece of artwork. By grouping the converted letters, 70 objects become one manageable object that can be moved around the page as needed.

  • Multiple layers mean you can and should save the image as a .png graphic for subsequent editing.

  • Multiple layers can also be flattened—Modify, Flatten Layers—meaning they become a single layer bitmap, which can then be used to create the prototype or "clickthru" site for the client.

Even at this stage of the process, the design is "fluid." For example, the navigation links down the left side of the layout don't necessarily have to utilize artwork. Cascading Style Sheets can actually drive them.


Prototyping

The purpose of a prototype or "clickthru" is to give the client an opportunity to test the navigation using the "comp."

The great advantage the Studio offers you, the developer, is the opportunity to choose from several methods of accomplishing the same task. This builds efficiency into the process because the method chosen fits your workflow. "clickthrus" are a great example of this. Thus, there are a number of ways to accomplish this using the Studio:

  • Design all the pages in Fireworks MX 2004. Slice the pages, add the hot spots and links, and export the resulting files to Dreamweaver MX 2004. From there, the resulting HTML page created in Fireworks can be posted to the client site.

  • Do the slicing and dicing in Fireworks but do the final assembly, including links, in Dreamweaver.

  • Do the assembly in Freehand MX and select File, Export as HTML.

Then again, if, like Tom Cruise in Top Gun, you "feel the need for speed," you just can't beat a new feature of Freehand MX: the Action tool.

Using the Action Tool in Freehand MX

Every now and then, a software manufacturer slips a new feature into the application that makes one wonder how one ever lived without it. Layers in Photoshop is a great example. The Action tool in Freehand MX is another.

This tool creates a clickthru using the multiple page feature of Freehand MX. It does this by assigning Flash Actions to areas of the Freehand image and then creating a fully interactive .swf file that can be dropped into Dreamweaver. To use the Actions tool, follow these steps:

  1. Open the ClickThru.fh11 file located in the Chapter Five exercise folder. If you don't see six pages on your screen, select Fit All from the Magnification pop up menu located in the bottom-left corner of the document window.

    For this exercise, we will be creating a link that moves from the Number 1 on Page 1 to Page 6. The next link will simply be from Page 6 back to Page 1 and from the Sports page to the main page. If you can create that simple combination, you will have mastered the use of the tool.

  2. Open the Document Properties to see the page order as shown in Figure 5.21. The pages we will be linking are Pages 1 and 6.

    Figure 5.21. The ordering of multiple pages in Freehand MX is set using the Document Properties panel or the Page tool.

    Note

    When working with multiple pages in Freehand MX, you can't simply move the pages around in the main window. There are two ways to accomplish this task.

    The first is to click and drag the pages to be moved in the View window of the Document Properties panel. If the page to be moved isn't visible, click on a page in the panel and press the spacebar. When you see the cursor change to the Grabber Hand, drag the window until the page is visible.

    A less convoluted method is to select the Page tool, the icon under the solid arrow in the toolbar, and in the Show All view, drag the page to its final position. Hold down the Alt (PC) or Option (Mac) key when you drag the page with this tool to create a copy of the page. If you simply want to add a page, click the Add Page button beside the Preview pop-down.

  3. Select Page 1 in the View window of the Document properties. This makes Page 1 the active Page.

  4. Zoom out to 25% view in the Magnification pop up window. All six pages are visible.

  5. Select the Actions tool on the toolbar. It is beside the Connector tool and looks like a black arrow in a blue circle.

  6. Click once on the number 6 on Page One and click once, anywhere, on Page 6. A blue line appears to meander between Pages 1 and 6 as shown in Figure 5.22. This is the Link. The blue square with the plus sign on Page 1 shows the start point, and if you follow the line, it ends on Page 6. Create another link from Page 6 back to Page 1.

    Figure 5.22. The blue line, created by clicking the Action tool on the start and end points of a link, shows the navigation path.

  7. Open the Navigation panel or double-click the start point of the navigation path —the blue arrow in the box—to open the Navigation panel shown in Figure 5.23.

    Figure 5.23. The Navigation Panel in Freehand MX enables you determine the event that starts the navigation and the final location.

Navigating the Navigation Panel

If you are familiar with Flash MX or earlier versions of Flash, the Navigation panel in Freehand MX uses the same drag-and-drop metaphor for ActionScript coding as the "Behaviors" panel of Flash MX. Though not as complete or robust as its Flash counterpart, the Actions included are more than sufficient to undertake some very sophisticated tasks. Some of the more important Actions available to you through the Actions pop-down menu are:

  • Go To and Stop jumps to a frame or scene and stops playback. Use this if you are moving between Freehand pages.

  • The Go To and Play action jumps to a frame or scene and continues playback. If you are working on a clickthru, avoid this one because it will go to the targeted page but then just keep playing.

  • The Get URL action retrieves the URL listed in the Link text box in the Navigation panel. Use this if you add buttons that open web pages.

  • The Play and Stop actions play and stop movies. If you have a Stop action assigned to a page, the movie stops dead on that page unless there is an Action such as "Go To and Play" or "Go To and Stop" assigned to a button on the page.

  • The Full Screen action displays the movie in the Flash Player in full-screen mode, rather than normal mode.

When you assign an action, you also select an event that will cause the action to run when the movie is played. A mouse click or the arrival of the movie's playback head at a specified frame are events that can trigger an action during movie playback.

Removing an Action

There will be times when you make a mistake with the Actions tool. Just for the record: We speak from bitter experience. Here is how to remove a link:

  1. Open the Navigation panel.

  2. Select None in the Actions pop-down menu. The blue link will vanish.
Testing and Publishing Actions

To test a series of links, follow these steps:

  1. Save the document.

  2. Select Window, Movie, Test. When you release the mouse, the movie will compile and Flash Player 7 will open.

  3. Click the links.

Tip

This process actually mirrors the process used by Flash. In fact, you can skip the Window Menu completely and use the Flash keyboard command to test a movie: Control-Enter (PC) or Command-Return (Mac).

Having confirmed everything works to your satisfaction, you can now publish the document and place it in a Dreamweaver page. The file you will be creating is a .swf file. Here is how to create the .swf file:

  1. Select File, Export or press Command-Shift-R (Mac) or Control-Shift-R (PC). This opens the Export dialog box shown in Figure 5.24.

    Figure 5.24. The Export dialog box in Freehand MX.

  2. Name the file, navigate to the location to which the file is to be saved, and select Macromedia Flash SWF from the Format pop-down menu. Click Export and the .swf file is created.

  3. Quit Freehand, launch Dreamweaver, and open a new Dreamweaver page.

  4. When the blank page opens, click the Flash button on the Insert toolbar to open the Select File dialog box. Navigate to the folder where you saved the .swf file in Freehand. When you locate the file, click it once and select Choose at the bottom of the dialog box.

  5. The .swf file will import into Dreamweaver MX 2004 as a gray box with a Flash icon. Click the Play button on the Dreamweaver Property Inspector to see the file and test it. You can also test the file in a browser by pressing the F12 key.


Summary

Planning the look of a site is just as important as planning the logic and data contained in the site. There are some definite steps to be followed as you move through the approval process with your client.

We started with modeling the server-side workflow for Flash MX 2004. We showed how all communications between the Flash Player in the browser and the database pass through an HTTP Communication Layer and presented several ideas regarding how to make the Flash Player's trip through the HTTP Communications Layer as efficient as possible.

We explained how to map a Flash login using Freehand MX and the use of "data buckets" and simple shapes to indicate server interaction in the data flow.

From there we moved into wireframing a site and showed how an artist's sketch can be used in Freehand MX, Fireworks MX 2004, and Dreamweaver MX 2004 to create wireframes. We also showed how the Libraries of wireframe symbols created in Fireworks and Freehand can be shared with other members of the team.

From there, we demonstrated the MX 2004 workflow as a wireframe page created in Freehand MX, sliced, and given links in Fireworks MX 2004. We then showed how Fireworks slices can quickly be added to a Dreamweaver MX 2004 document using the Quick Export button in Fireworks and how links can be added to Fireworks slices through the use of hot spots added in Dreamweaver.

We also explained the way to move from wireframe models to comprehensive designs that present the look of the page using graphics and text. We then dissected a rather simple Fireworks MX 2004 page, paying particular attention to its underlying complexity in layering and the reasons behind that decision.

The final section of the chapter essentially focused on that old adage: "Work smarter, not harder." The new Freehand MX Actions tool is a good example of that adage. We presented a rather thorough review of a new tool that not only links objects and pages in multiple Freehand pages, but also adds Flash ActionScript interactivity to the mix. From there you can actually publish an .swf file that can be added to a Dreamweaver MX 2004 page. Suddenly, the creation of click through sites for clients becomes something that can be done in a couple of hours, not a couple of days.

This completes the first section of the book. By focusing on the production aspects of building a dynamic site, from file naming to "clickthrus," you lay the groundwork for success. By methodically planning each bit of data and each step of the process leading up to assembly and content creation, you have most likely discovered that the creation of a dynamic site involves more than launching the applications in Studio MX 2004 and going to work. There is a lot of paper involved, from creative briefs to sketches, but the time spent patiently mapping and charting the data flow and logic actually reduces production time when the team kicks into gear.

Now that we know what the site looks like and how it will work, let's go build a dynamic facility tour for the Oakbridge Community Center.


Part II: Building the Interactive Tour

6 Creating the Tour Assets

7 The Elements of the Dynamic Page

8 Building the Data

9 Flash Remoting

10 Assembling the Tour


Chapter 6. Creating the Tour Assets

The planning is complete. The client has signed off on the various models and designs. The team is organized and systems for managing the content and production are in place. The time has arrived to go to work.

As one of the authors is fond of saying, "The best way to manage complexity is from a position of simplicity." Thus, the next three sections of this book focus on the creation of the three key elements of the project: the tour, the booking facility, and the community outreach section of the Oakbridge Community Center site. By looking at the project in this manner, the production of the site is broken down into three manageable "chunks," rather than what on the surface appears to be one overwhelming project.

In this chapter, we concentrate on the creation of the tour assets. Those assets are the images and artwork used in the tours. Along the way, we will introduce you to a few new features built into Studio MX 2004 that are designed to make your team's life easier and expand your creativity.

Let's get busy.


The Plan

The tour has been a part of this project right from the initial fact-finding meeting between the community center and the project manager. Though the center has a large number of facilities and programs, it was felt that people visiting the site should be able to zero in on the community center's ability to meet their specific interests, rather than aiming for as broad a market as possible and speaking in generalities.

This goal has been thoroughly discussed among the team members, and several solutions were proposed and examined. When the solution was agreed to, it was presented to the client, and he signed off on it. When that occurs, the client inevitably asks "The Question:" "When will it be completed?" If you directly answer this question, the project is doomed to failure.

At this stage of the process, you are working with concepts and ideas that have become more and more refined as you move from paper-based storyboards to a comprehensive design. You have a rough idea regarding what is needed. You have conducted a content audit to determine what content exists and what content needs to be created. What you haven't done is to create the final production schedule from client acceptance of the proposal to delivery of the project. If you don't know to the day how long it will take to create the assets, how can you give the client an honest answer to the "How long?" question. In addition, no matter how you sugarcoat and obfuscate it, any date you give the client will be filed away for future reference. The last thing you need is the client meeting with you a couple of months later and asking why you aren't able to meet the date given when he asked "The Question."

The only way to answer the question is through the use of a production plan, which evolves from the key event schedule.

Note

There are actually two "Questions." They are "How much?" and "By when?"

The "How much?" question is way out of the scope of this book. Still, the consequences of answering it at the same time as the "By when?" question are similar. Both replies get filed away, and don't be surprised if the client retrieves those two bits of data at the most inappropriate time. Deal with paper, not "vapor." If asked, tell the client you aren't prepared to answer the question right away. Instead, tell the client you would prefer to put it in writing. This way, both sides have the same information.

The Key Event Schedule

There is an exercise one of the authors uses in his classes. Its purpose is to shine a klieg light on the importance of a key event schedule on the production process.

The project is the delivery of a rather simple interactive CD. He first asks the class to come to some sort of consensus about the date the courier delivers the CDs to the client. Thinking that the project is easy to complete, the class usually agrees to a 60-day timeframe.

The class then roughs out a calendar on the whiteboard, and the start and finish dates are added. Then the fun starts.

The author works backwards through the schedule, crossing out weekends and holidays. He gets the class to agree to the various steps of the production schedule, ranging from content and asset creation to Gold Master testing and delivery. In between are testing, revisions, client approvals, and so on. At the end of the exercise, the students are absolutely flabbergasted. By agreeing to a 60-day schedule they have actually left themselves with three to four days of actual production time to build the project.

There is no single way of developing a key event schedule that meets the needs of every web design firm on the planet. Instead, you have to understand that the members of a team need structure, and part of that structure is provided by deadlines. By developing this schedule, the project suddenly becomes real. It is something each member of the team can see, in writing, and it delivers a rather powerful message: "Here is what is needed and when you have to deliver it."

The purpose of a detailed key event schedule is to push the project forward. It is something both the team and the client now have in common. Both sides shares the common commitment to meet the goals outlined.

When it comes to the team, the key event schedule lays out the flow and the pace of the project. In certain cases, it serves as a daily "to-do" list for the team members and highlights how dependent they are upon each other to complete the task at hand.

Finally, a key event schedule is a living document. All deadlines should have what one of the authors calls "The Human Factor" built into them. Accommodate the fact that people get sick, scopes change, and approvals can be late. This is a delicate balancing act because being too accommodating will only serve to cloud the deadlines.

As one of the authors tells his students, "Clients think things can be done instantly because you are using a computer." Instead, tell the client there are three broad options available when it comes to building web sites or other interactive media. They are "Fast," "Accurate," and "Cheap." Explain each option and then tell him he gets to pick two. That will get his attention.


Imaging in Fireworks MX 2004

Before we get into creating the images for the Oakbridge Community Center site, a quick review of the latest release of Fireworks is in order. This release of Fireworks contains some rather nifty new features. They include:

  • Usability Enhancements: Buttons to open and close panels and tabs, just like in Dreamweaver. Brushes and fills now have graphical previews. The Property Inspector now has a Fit to Canvas button that, after you figure it out, will make canvas cropping a thing of the past.

  • Color Replace and Red-Eye Removal Tools: A new color replace tool has been added to the toolbox that provides you with new color manipulation capabilities. While editing a bitmap, choose the color you want to replace and then specify the intensity using the controls in the Property Inspector. Begin brushing on the image, and the color is replaced using the settings you specified.

  • Auto Shapes: Auto Shapes are shapes with custom handles that let you manipulate them in all sorts of ways. They are coded using Java Script and a smart object API, so you can create Auto Shapes of your own.

  • New Live Effects: Including motion blur and a noise filter.

  • Dashes: Dashed strokes and gradients that follow the contours of a path—finally!

The Fireworks MX 2004 Interface

There are some rather subtle, yet important, changes to the interface in this release. Figure 6.1 shows the interface with a blank document open.

Figure 6.1. The Fireworks MX 2004 interface has made a significant change for the better.

The first change you will notice is that the active panels have changed from a dull gray color to a light gray color. Panels that aren't open appear two-dimensional and flat, and the panel name has black text. Those that are active take on a 3-D look, and the name is colored white. You will also notice the loss of the pop-down arrows beside the panel names that were used to open and close panels. To open or close a panel, follow these instructions:

  1. Place the cursor over a panel name. You will notice the name becomes underlined.

  2. Click the name and the panel will either open or close.

Another big addition is the Fit Canvas button on the Property Inspector. This is a really neat feature. One of the more common gripes about working in Fireworks was constantly having to resize oversized images to fit the canvas or cropping the canvas to fit the images. This is now a thing of the past. Here's how this feature works:

  1. Open a new Fireworks document and set the canvas dimensions to 500 pixels wide and 500 pixels high with a canvas color of white. Select the Rectangle tool from the vector tools and draw a rectangle on the canvas. Set the width and the height of the square to 100 pixels in the Property Inspector.

  2. Deselect the rectangle and click once on the canvas to open the canvas properties in the Property Inspector.

  3. Click the Fit Canvas button. The canvas actually shrinks to the size of the object. If you don't believe us, click the Canvas Size button on the Property Inspector, and you will see the canvas has shrunk to 100 pixels wide and 100 pixels high. If you have multiple items on the canvas, the canvas will shrink without disturbing any of the items on the canvas.

  4. Delete the square, and using the Property Inspector, set the canvas size to 50 pixels wide and 50 pixels high.

  5. Select the Rectangle tool and draw a square that is much larger than the canvas. Note the square's dimensions in the Property Inspector.

  6. Deselect the square and click the Fit Canvas button on the Property Inspector. The canvas will expand to the larger size of the image.

Tip

You don't have to click the Fit Canvas button to change the canvas size. You can select Modify, Canvas, Fit Canvas, or press Control-Alt- F (PC) or Command-Option-F (Mac). If you right-click the canvas (PC) or Control-Click the canvas (Mac), you will open the Context menu for the canvas. Fit Canvas can be found in Modify Canvas, Fit Canvas.

Finally, there is a new way of navigating between multiple open documents. They are still available to you at the bottom of the Window menu, but they are also discreetly listed at the top of the document window, as shown in Figure 6.2. To open an image, simply click on the image's name.

Figure 6.2. You can easily navigate to any open document by clicking its name at the top of the document window.

Using the Replace Color Tool

This is one of those tools that, when you first encounter it, has you wondering why it is there in the first place. That would be a huge mistake. One of the more persistent complaints about Fireworks in the past was an inability to precisely control color changes using a brush. This complaint has been seriously resolved. Here are two ways of using this tool. The first changes the color of a baseball jersey from red to blue. The second colorizes a grayscale image.

  1. If you haven't already done so, download the Chapter 6 Exercise folder from the book's web site to your hard drive. Open the file named Baseball.png in the Color_Change folder in CH6_Exercises folder. When it opens, you will see a bunch of guys wearing red baseball jerseys, hats, and socks.

  2. To use the tool, select it, as shown in Figure 6.3. When selected, the Property Inspector changes to reflect the tool settings. They are:

    • Size: This slider sets the size of the brush to be used.

    • Change: This is the color to be changed.

    • Shape: Choose either a round or a square brush.

    • To: This is the color that will replace the original color.

    • Tolerance: This slider sets the sensitivity of the color application. A lower number means a lower range of color will be replaced. The higher number gives you the full range.

    • Strength: For lack of a better metaphor, the strength is comparable to the pressure setting on an Air Brush tool. The higher the number, the larger the amount of color added.

    • Colorize: Select this only if you are working on a grayscale image.

    Figure 6.3. The Replace Color tool is chosen from the Fireworks MX 2004 tools, but the bulk of the work is done using the Fireworks MX 2004 Property Inspector.

  3. To change the uniform colors from bright red to purple, click the Change Color Chip on the Property Inspector to open the Fireworks Color Picker.

    Obviously, changing the red in the uniforms either requires an incredible eye for color subtleties in the Color Picker or a predefined value. There is a much easier way. Simply place the cursor over the red in the uniform and click the mouse. The red from the uniform appears in the Source Color Chip.

  4. Click the "To" Color Chip to open the Fireworks Color Picker. Select 0033CC Blue or enter the values into the Color Picker.

  5. Set the Tolerance input in the Property Inspector to 128 and set the Strength to 108.

  6. Roll the cursor onto the red uniform. When you do, the cursor will change to the brush shape—round or square—chosen in the Property Inspector. Press the mouse button and drag across the color. The red changes to purple. If you drag over a dark red area and nothing happens—when the red areas are in shadow for example —simply increase the tolerance. When you are finished, undo the change or select File, Revert.

The problem with working with a brush is an inability to stop color from "leaking." By this, we mean you may have noticed a bit of purple appearing in areas where there is not a lot of red, such as in the skin tones. In fact, there is red in those areas, but it is not as prominent as in the baseball jerseys. In this case, it is best to create a selection mask. Using a combination of the Magic Wand tool, the Lasso tool, and the Shift (add) or Option/Alt (subtract) keys, carefully select all the areas where the red of the uniform is visible. Give yourself a relatively decent-sized brush—10 pixels for example—and start changing the color. The results are a lot more acceptable.

Tip

You can take the change right down to the single pixel level. To do this, zoom in on areas of the image, change the brush to a square brush, and reduce the brush size to one or two pixels.

Colorizing a grayscale photo actually harkens back to the days before the introduction of color photography, when photographers would hand-tint portraits. Here's how to add color to a grayscale photograph using the Replace Color tool:

  1. Open the CommCenter.png image in the Replace Color Folder. A color image and its grayscale counterpart will open. The foreground of the image shows the area used for a Battling Robots Competition. We will be using the yellow color of the wall to replace its grayscale counterpart.

  2. Select the Replace Color tool. Use the following settings:

    • Brush Size: 5 pixels

    • Brush Shape: Square

    • Tolerance: 66

    • Strength: 32

    • Colorize: Selected

  3. Set the "Change" color to the gray of the border and the "To" color to the yellow in the border of the color image.

  4. Zoom in on the area to be colorized, and with the mouse held down, drag the brush across the area in the grayscale image to be colorized. Notice how the color is almost opaque as you first apply it and how it becomes more intense as you drag the brush across areas that have already been colorized. This is due to the low Strength setting.
Using the Red Eye Removal Tool

The bane of digital artists is red eye in photographs. Red eye is caused by a camera's flash reflecting off the retinas of the subject's eyes. The effect can make even the most angelic of babies or pets look positively diabolical.

Fireworks MX 2004 addresses another common complaint. The complaint? There has got to be an easier way to remove this artifact than the complicated process currently used. There is now. Follow these steps to use the Red Eye Removal tool:

  1. Open the Robert.png file that is located in the Red_Eye folder in your CH6_Exercise folder. This photo, Figure 6.4, of one of the author's sons is fairly typical of the problems posed by red eye. His left eye is positively diabolical and the right eye also has a hint of the problem.

    Figure 6.4. The settings for the new Red Eye Removal tool are found in the Property Inspector.

  2. Select the Red Eye Removal tool. The Property Inspector will change to present you with the tool's options, as shown in Figure 6.4. They are:

    • Size: This sets the size, in pixels, of the brush.

    • Shape: You can choose between a round or square-shaped brush.

    • Tolerance: The higher the number—0 to 255—the broader the change.

    • Strength: The higher the number—0 to 100—the darker (or stronger) the change.

  3. Use the following settings:

    • Size: 23 pixels

    • Shape: Round

    • Tolerance: 198

    • Strength: 86

  4. Place the cursor over the left eye and click once. The red is gone. Repeat this for the other eye.

Tip

Any imaging decision you will make is subjective, not objective. Our Red Eye Removal tool settings are simply designed to demonstrate the tool and what each feature does. Experiment with the settings to find your own way of doing things.

Using Auto Shapes

Auto Shapes are an interesting addition to the feature lineup. Though Macromedia will tell you, "Auto Shapes are vector objects that contain information about how the user can interact with them onscreen," that is only part of the story. In many respects, Auto Shapes are interactive clip art.

Auto Shapes reside in two areas of the Fireworks MX 2004 interface. They are available from a pop-down menu located through the Rectangle tool in the Vector section of the toolbar. They are also available through the Auto Shapes panel, which is accessible through Window, Auto Shapes. The two locations are actually quite a clever idea. The Auto Shapes available off of the tools can be thought of as being editable primitive shapes. The ones located in the Auto Shapes panel are full-bore art, such as button shapes and icons.

Follow these steps to add a Auto Shape to a drawing:

  1. Open a new Fireworks MX 2004 document. When the New Document dialog box opens, set the width and the height to 500 pixels and the canvas color to white. Click OK.

  2. Click and hold on the Rectangle tool in the Vector tools. When the pop-down menu appears, click once on the Doughnut shape. Move the cursor onto the canvas. It will change to a plus sign. Click and drag a doughnut onto the canvas.

  3. Select the shape, and you will notice three yellow diamonds along with the usual red colored handles, as shown in Figure 6.5. Those yellow handles set Auto Shapes apart from regular clip art. They are the control points for actions that can be used to manipulate the object on the canvas. If you place the cursor over each point, a Tool Tip will appear that tells you the function of that particular point. In the case of the doughnut, they are:

    • Top Diamond: Shift-drag to add/divide sector. Dragging this point actually opens up the object.

    • Center Diamond: Click to reset inner radius. Click this and the center of the doughnut disappears.

    • Right Side Diamond: Inner radius. Click/Drag this point to make the inner circle larger or smaller.

    Figure 6.5. All Auto Shapes are manipulated by dragging the Control Points—the diamond shapes.

  4. Drag the top diamond down the right side of the doughnut. A blue connector line will appear. Drag downward until the outer control point is in line with the two inner control points. Release the mouse. You have just created a "C" shape. Also notice that you now have two outer control points. There is the original point in its original location and the new one at the point where you released the mouse.

  5. With this new object selected, select Fill, Pattern, Goo Blue from the Fill pop-down menu of the Property Inspector. The shape fills with the pattern.

  6. With the shape selected, add an Inner Bevel Live Effect and a Drop Shadow Live Effect from the Effects area of the Property Inspector. When finished, your shape should resemble that shown in Figure 6.6.

    Figure 6.6. Auto Shapes, because they are vectors, can have the Fills and Live Effects available through the Fireworks MX 2004 Property Inspector applied to them.

Note

Give us a tool and we'll have more fun with it than should be allowed by law.

For example, the Spiral Auto Shape can be used to create one dandy coil of copper wire. Simply stroke the shape with a copper color and apply an inner bevel to the shape.

We also discovered that they can be used for some rather fascinating masking effects, as shown in Figure 6.7. In this case, the author simply dragged out an Arrow Auto Shape, sized and positioned it, and with both the arrow and the image selected, selected Modify, Mask, Group as Mask.

Figure 6.7. Auto Shapes aren't simply artwork. Be creative and you will discover there are a number of other uses for them, such as masks.

Though you can create your own Auto Shapes, an intimate knowledge of JavaScript is required to make them work. When the developer community catches onto them, expect to see quite a number of these things appearing on the scene. The place to look first will be Macromedia Exchange.

Building Buttons

Buttons are one of those navigation elements that have become so commonplace that we rarely think of them in critical terms. Yet these items are the primary navigation method for your visitor. If they are improperly designed or non-intuitive, the odds of losing your visitor are well over ninety percent.

When designing buttons or menus, consider the following:

  • Keep the design and location of the button consistent throughout the site.

  • The wording must be clear and concise.

  • Keep the button symbols in Shared Libraries and make them available to the team.

  • Test. Test. Test. Did we mention test?

To create a button in Fireworks MX 2004, follow these steps:

  1. Open a new Fireworks MX 2004 document. When the New Document dialog box opens, set the stage to 500 pixels wide and 500 pixels high. Set the background color to white and click OK to open a blank canvas in Fireworks.

  2. Select the Rectangle tool in the Vectors section of the Fireworks toolbar. Draw a square that is 70 pixels wide by 70 pixels high.

  3. Fill the square with a solid color and apply an Inner Bevel Live Effect using the Property Inspector.

  4. Select the object on the canvas and select Modify, Covert to Symbol, or press F8 to open the Symbol Properties dialog box. Name the symbol and select button from the Properties list. Click OK. The object appears as a symbol on the canvas, and a green web layer overlay appears over the button.

    The remaining series of steps review the use of the Button Editor. This is one area where the interface differences between the two platforms will become quite apparent. On a PC, the Button Editor will completely cover the canvas. On a Mac, the Button Editor will appear as a floating window over the canvas. Regardless of how it looks, the Editor's functions are identical despite the platform.

  5. Right-click (PC) or Control-click (Mac) the button on the canvas to open the Context menu. Select Symbol, Edit Symbol to open the Button Editor shown in Figure 6.8.

    Figure 6.8. The Button Editor in Fireworks MX enables you to set the look for the various states of a button and to add links to the button.

    Tip

    As usual, there is a lot of "That isn't the way I would do it" from the other authors. Here are the other methods of opening the Button Editor:

    • Double-click the symbol in the Library.

    • If the canvas is blank, select Edit, Insert, New Button.

    • If the canvas is blank, press Control-Shift-8 (PC) or Command-Shift-8 (Mac).

  6. When the Button Editor opens, you will see your button in the Up section. Click the Over Tab.

  7. As you move through the button states, Fireworks will assume nothing. When the Over state is selected, the window is blank. You can then choose to add a new graphic to the button or manipulate the graphic in the Up area. Click the Copy Up Graphic button. The graphic from the previous window will appear.

  8. Select the button. With the button selected, you will notice the Bevel Effect used to create the button is visible in the Effects area of the Property Inspector. Double-click the name of the Effect in the Property Inspector to open the bevel properties window. Set the preset at the bottom to Inset. The button will look like it has been pushed in. Click outside of the bevel properties window to apply the effect.

  9. To add a link to the button's over state, click the Active Area tab. The Property Inspector will change to indicate a slice. In the Link area of the Property Inspector, enter http://www.macromedia.com and then click Done in the Button Editor.

  10. Save the document and test in a browser.

Note

A new feature of Fireworks MX 2004 is the ability to send your work as an email attachment right out of Fireworks. Here's how:

  1. With your button open, select File, Send to Email.

  2. You will then be presented with three choices, as shown in Figure 6.9:

    • Fireworks PNG: This format will retain all the layers and so on contained in the saved document.

    • JPEG: This will flatten the file to a bitmap. This will only be applied to the image being attached to the email. It will not affect the image on the screen.

    • Use Export Settings: This selection will send the file , such as a .gif, in whatever format has been chosen in the Export Preview dialog box or Optimize panel.

    Figure 6.9. Fireworks images can be emailed directly out of the Fireworks interface by selecting File, Send to Email.

  3. Select JPEG. This will launch your email client, and the file is already in the message as an attachment. When you send the file to the recipients, the email editor will close, and you will be returned to the Fireworks interface.

Fireworks MX 2004 also ships with a number of "prerolled" buttons. These are accessed through Edit, Libraries, Buttons. This will open the Import Symbols: Buttons dialog box, and you can choose the style that best meets your needs. This Library is also accessible through the Button Editor. There is a button at the bottom of the Editor named Import Button. Click it, and the Library will open. The neat thing about this is, by choosing a multi-state button in the Library, the various states will appear in their correct areas of the Editor. This enables you to edit them rather quickly.


The Studio MX 2004 Workflow

One of the key issues you confront when working with the Studio is choosing which tool is best suited for the job. For example, in the above exercise, you created a button in Fireworks and attached a link to it. You can then export the button and its HTML into Dreamweaver. The question, therefore, is, "Is Fireworks the tool for the job?"

When asked this question, we have a standard reply: "No one cares how you did it. They just care that you did it." The average client is more concerned with the functionality of the button than the application used to create the button.

When you start looking at the Studio not as individual applications but as being the "sum of its parts," the workflow process takes on a whole new dimension. For example, button artwork can be created in Freehand MX and imported into Fireworks MX 2004, and the button behaviors can be assigned in Dreamweaver MX 2004. In this model, the strengths of each application are brought to bear on the task at hand.

Note

The integration between the applications doesn't always mean work must flow into or between open applications. New to the Dreamweaver MX 2004 Property Inspector is a series of Fireworks MX 2004 tools in the Edit area of the Property Inspector. For example, select an image on the Dreamweaver page and click the Crop tool. After you read the dialog box and click OK, the bounding box around the selected image is actually placed there by Fireworks. You then crop the image in Dreamweaver using the Crop tool from Fireworks.

If Flash MX 2004 is the ultimate destination, the flow would be Freehand MX to Flash MX 2004 to Dreamweaver MX 2004. One aspect of the Flash workflow that is traditionally overlooked by Flash developers is the use of Fireworks MX 2004 as the Flash MX 2004 imaging application. Here's how that works:

  1. Open a new Fireworks MX 2004 document that is 300 pixels wide by 300 pixels high. Set the Canvas Color to Transparent.

  2. Select the Text tool, click once on the canvas, and enter your name. If it is longer than the canvas, use the word "Cat" or any other three-letter word. Set the point size to 60 points.

  3. Select the image, and with the Alt/Option key pressed, drag a copy of your name to another location on the canvas.

  4. With the copy selected, select Effects, Blur, Motion Blur in the Property Inspector. The Motion Blur is a new Live Effect added to this release of Fireworks. When the Motion Blur dialog box opens, set the Angle to 340 and the Distance to 22. Click OK, and your name looks like it is in motion. Move the blurred copy behind the original, deselect both images, and click the Fit Canvas button on the Property Inspector. Your name should resemble the one shown in Figure 6.10.

    Figure 6.10. A Fireworks MX 2004 image is prepared for use in Flash MX 2004. Note the transparent background.

  5. Save the image as a .png image and quit Fireworks.

Note

The Fit Canvas button is a godsend for Flash developers. Flash was never developed to efficiently process bitmaps. Thus, the ability to trim out all the extra "weight" added by the unused portions of the canvas makes the images even more efficient.

Fireworks MX 2004 to Flash MX 2004

By saving the Fireworks MX 2004 file in its native PNG format, you are able to preserve the transparency as well as maintain all the information necessary to subsequently edit the image in Fireworks. This includes such elements as the font used for your name and the Motion Blur Effect.

  1. Open Flash MX 2004 and select File, Import. Import to Stage, Control-R (PC) or Command-R (Mac). When the Import dialog box opens, navigate to the folder containing the Fireworks file you have just created, select the file, and click Open. This will open the Fireworks PNG Import Settings dialog box shown in Figure 6.11. Ignore all the settings and select Import as a single flattened bitmap. Click OK. Your image will appear on the Flash stage and in the Flash Symbol Library.

    Figure 6.11. To import a Fireworks .png image, simply click the flatten option at the bottom of the dialogue box.

    Note

    Clicking Import as a single flattened bitmap in the PNG Import dialog box doesn't make sense. One would think that selecting it would flatten the image and discard all transparency. Not quite. It actually merges your name and the Motion Blur Live Effect into a single bitmap while maintaining the transparency.

  2. Another little-known feature is the capability to actually edit the image in Fireworks from Flash. Let's assume the Motion Blur travels in the wrong direction. Open the Library and either right-click (PC) or Control-click (Mac) the Library item. This opens the Context menu shown in Figure 6.12. Select Edit with Fireworks. Another way of doing this is to simply select the item on the Flash stage and click the Edit button in the Property Inspector. Both techniques will launch Fireworks.

    Figure 6.12. Selecting the item in the Flash Library and opening its Context Menu enables round-trip editing between Flash and Fireworks. Selecting the item on the Flash stage and clicking Edit in the Flash Property Inspector has the same effect.

  3. When Fireworks MX 2004 launches, you will see "Editing from Flash" at the top of the document window. Open the Motion Blur properties and change the angle to 137 as shown in Figure 6.13. Click OK.

    Figure 6.13. When the changes are made to the .png file in Fireworks, click the Done button in the Document window, and the change will automatically be reflected in the Flash document.

  4. If the blur goes off the canvas, click the Fit Canvas button on the Fireworks Property Inspector. If you are satisfied, click the Done button at the top of the document window. This will automatically save the change to the .png document, quit Fireworks, and open the Flash document. When the Flash document opens, you will see the change reflected in the object on the Flash stage and in the symbol in the Library.


Creating the Oakbridge Community Center Masthead

The design calls for a picture of the community center's administrative building to appear as though it merges into a blue sky with clouds. This should give your Fireworks skills a workout. Follow these steps to create the masthead:

  1. Open the Community_Center.png file located in the CommCenter folder of your Chapter 6 Exercise folder. If you don't have the Chapter 6 folder, download it from the book's web site to your desktop.

  2. As is typical, you will never get what you want. The image was taken on an overcast day, and there is no blue sky to be found. To fix that, select the Magic Wand tool and set the Tolerance to 15 in the Fireworks Property Inspector. Click once anywhere in the sky area of the image above the roof. A large chunk of the sky is selected, but there are still quite a few areas that aren't selected.

  3. To select the rest of the sky, you have to choose whether to "work hard" or "work smart." The former would require you zoom in on the various areas of the sky that aren't selected, and with the Shift key held down, click on them with the Magic Wand tool. If you want to "work smart," you let the software do the work. The sky is a uniform dull color. Why not let Fireworks select it for you? Select Select Similar from the Select menu. Other than a couple of small areas on the building, all of the sky including that between the leaves of the trees is selected.

  4. To remove the selections on the building, select the Lasso tool, and with the Option/Alt key pressed (a minus sign, indicating removal of a selection, will appear under the lasso icon), circle the areas you don't need.

  5. To remove the selection you just made, press the delete key. Deselect and set the Canvas Color to Transparent as shown in Figure 6.14. Save the image.

    Figure 6.14. The Oakbridge Community Center masthead image is prepared for a sky transplant.

  6. Open the Clouds.png image in you CommCenter folder. When it opens, select File, Import, or press Control-R (PC) or Command-R (Mac). When the Import dialog box opens, navigate to the folder where you saved your community center image, select the image, and click Open. This will place the building over the clouds image.

  7. The imported image is quite a bit larger than the clouds image. Select View, Magnification, 25%. Select the Scale tool, press the Shift Key, and with the Shift key pressed, move the bottom-right corner of the community center up until it touches the bottom of the clouds image. The height of the building image should be 200 pixels. When finished, double-click the Magnifying Glass tool to zoom the image to actual size.

  8. When the image is properly sized, select Effect, Adjust Color, Brightness and Contrast on the Property Inspector. When the Brightness and Contrast dialog box opens, set the Brightness to 20 and the Contrast value to –2. Click OK. Your image should resemble Figure 6.15.

    Figure 6.15. The building image is placed over the clouds image, and the building's brightness is increased and its contrast decreased.

  9. With the photograph selected, select Modify, Mask, Reveal All. This turns the image into a mask.

  10. In the tools, click and hold on the Paint Bucket. When the pop-down appears, select the Gradient tool. Choosing this tool will enable you to create a gradient that will actually fade the image into the clouds.

  11. Click the Gradient Paint Chip in the Property Inspector to open the Gradient dialog box. The gradient currently runs from white on the left to black on the right. The order needs to be switched. Drag the black swatch on the right to the left slider of the gradient bar and drag the white slider to the right side. Click outside of the dialog box to accept the change and to close the box.

  12. Select the Gradient tool. Select the locked mask rectangle next to the building layer to add the gradient to the mask and not "over" the building. Place the cursor somewhere in the center of the image and drag the mouse from left to right across the image. When you release the mouse, the image will fade in the direction the mouse was dragged. If you don't like the effect, undo (Control-Z (PC) or Command-Z (Mac)) and repeat until you get a result that meets your expectations.

  13. The decision is also made to leave an area at the bottom of the image to accommodate the addition of a navigation bar. Select the Rectangle tool, draw a small rectangle, and use these values in the Property Inspector:

    • Width: 800

    • Height: 20

    • X: 0

    • Y: 101

    • Fill Color: 0099FF

    • Fill Type: Solid

    • Stroke: None

When finished, your image should resemble that shown in Figure 6.16.

Figure 6.16. The completed masthead image. Note the layering order in the Layers panel.

Looking at Clouds

Earlier versions of Fireworks enabled you to use your Adobe Photoshop filters, providing they were version 5 of Photoshop or lower. This makes creating the clouds used in the masthead image a bit of a chore.

The question, therefore, is: "So how did you guys do it?" We'll let co-author Chris tell you how he did it:

You just have to look at it a bit differently. Clouds are simply areas of soft white randomly placed on a blue background. When you examine the various fills and textures provided by Fireworks MX 2004, you discover they simply don't do the job. Instead, look at the pattern, and you suddenly see marble. Conveniently, Fireworks MX 2004 contains a Marble Filter from Alien Skin's Eye Candy 4000 LE collection. Here's how I created the clouds:

  1. Open a new Fireworks document and set the Canvas Size to 128 pixels wide and 128 pixels high. You can leave the background either white or transparent.

  2. Select the Rectangle tool and draw a rectangle that fills the canvas. With that rectangle selected, use the following settings on the Property Inspector:

    • Width: 128

    • Height: 128

    • X: 0

    • Y: 0

    • Fill Color: #0033CC

    • Fill Type: Solid

    • Stroke: None

  3. With the object selected, select Effects, Eye Candy 4000 LE, Marble to open the Marble Filter dialog box.

  4. With the dialog box open, use these settings, as shown in Figure 6.17:

    • Vein Size: 177.88

    • Vein Coverage: 44

    • Vein Thickness: 98

    • Vein Roughness: 53

    • Bedrock Color: #0033CC (Blue)

    • Vein Color: #FFFFFF (White)

    • Seamless Tile: Selected

    • Random Seed: 1153

    Figure 6.17. Chris used these settings on the Marble Filter to create a cloud effect that met his needs.

    I just clicked the Random Seed button until I found the effect I wanted. Feel free to find another that suits you.

    When you have the effect you want, click OK.

  5. I also softened the effect a bit more by selecting Effects, Blur, Blur from the Property Inspector.

Having done all that work, I next decided I liked it so much I would add it to the Fireworks Fill Patterns. This way, I won't be constantly re-creating this artwork. Here is how I added the Clouds to the Fill Patterns:

  1. Select File, Export Preview and select the PNG 32 format from the Format pop-down in the Export preview dialog box. Click the Export button to open the Export dialog box. We named the image CloudsChip.png and clicked the Save button. Quit Fireworks.

  2. Navigate to the folder where you saved the file, select it, and right-click (PC) or Control-click (Mac). When the Context menu opens, select Copy.

  3. Navigate to your Fireworks MX 2004 folder, open it, and locate the Configuration Folder. Inside the Configuration Folder is a folder named Patterns. Open it.

  4. When the Folder opens, open the Folder's Context menu and select Paste. The CloudsChip image appears in your pattern collection, as shown in Figure 6.18.

    Figure 6.18. Patterns created in Fireworks can be reused by placing them in the Patterns Folder located in the Fireworks MX 2004 Configuration Folder.

  5. If you relaunch Fireworks, create a new document and draw a rectangle on the stage. Select Fill, Pattern, and you will see the CloudChip image you created is now a part of the collection.

Creating the Oakbridge Community Center Logo

The logo for the community center is text-based. Though Fireworks MX 2004 contains some powerful text tools, the application of choice should be Freehand MX. There are a couple of reasons:

  • With its roots in print, the text tools in this application offer far more precise tracking and kerning than that offered by Fireworks.

  • Paragraph controls permit precise alignment and hanging punctuation.

  • Freehand has the ability to convert the text to vectors, permitting the manipulation of the letters and words as though they were artwork.

Before we start, though, a word of caution. Fonts are subject to copyright, and simply handing them out with your work is illegal. This is why we will be walking through the process of creating the text logo using a font—Garamond—that is available on both Macs and PCs. This gives you the opportunity to work through the exercise. The actual fonts used in the logo are AzoteSSi and TangoScriptSSi. To stay on the visitors' side of a court room, we have included a Freehand file of the final logo—OCCLogo.fh11—that has been converted to vectors.

Follow these steps to create the Oakbridge Community Center logo:

  1. Open a new Freehand document, select the Type tool, click once on the page, and enter Oakbridge Community.

  2. Click once between the words and press the Return/Enter key to put the word "Community" under the word "Oakbridge."

  3. Select the text, and in the Object Properties panel, use these settings:

    For the word "Oakbridge":

    • Font: Garamond.

    • Weight: Bold.

    • Size: 71 points.

    • Alignment: Flush left.

    • Leading: Select the "=" sign in the leading pop-down menu and enter a value of 50 points. (This value will "pull" the second line up closer to the first line.)

    For the word "Community":

    • Font: Garamond.

    • Weight: Bold.

    • Size: 61 points.

    • Alignment: Flush left.

    • Leading: 50 points (This value will "pull" the second line up closer to the first line.)

    When finished, the text should resemble Figure 6.19.

    Figure 6.19. The text is entered and formatted using either the Object Properties or the Text toolbar above the Document Window.

    Tip

    There are two ways of formatting text in Freehand MX. The first is to use the text area of the Object Properties. The second is to use the Text toolbar. The Text toolbar can be added by selecting Window, Toolbars, Text. Have both available because the Object Properties enable very precise formatting controls. The Text toolbar enables you to choose the font, point size, leading, and alignment. It also makes a couple of extra tools readily available. They are the ability to wrap text inside object, put text on a path, convert text to paths, and a text editor, spell checker, and a "wrap around" button.

  4. The words and letters need adjusting. This process is referred to as tracking—adjusting the spacing between the letters in a word—and kerning—adjusting the spacing between pairs of letters. Select the Text tool and click once between the "r" and the "i" in the word "Oakbridge." In the text properties, you will notice an area that has A/V beside a text input box. This is the tracking and kerning input area. Click inside the box and enter 3. Press the Return/Enter key and the two letters will move away from each other.

    Tip

    If you click between two letters of a word on the Freehand MX canvas and press Control-Alt-Right Arrow (PC) or Command-Option-Right Arrow (Mac), you can adjust the kerning outward by a point at a time. Press the left arrow with the same modifier keys held down, and the letters move closer to each other.

    Another Freehand text tip is supplied by one of our Tech Editors, Dorian Nissinson. If you type text on the document, either deselect the text or click away from the text. Reselect the text with the Arrow tool and click the font selector in the Object tab of the Properties panel so that it expands to show the scrolling font list. Type the first letter of the font's name, such as g, and the list will scroll down to the first font in the list starting with the letter "g."

  5. With the text formatted, we can now concentrate on the design specification. The word "The" is to be placed inside the "O" in Oakbridge, and the tail of the "y" in Community needs to be lengthened. With the text block selected, select Text, Convert to paths, or click the Convert to Paths button in the text toolbar. If you select the Subselect tool—the hollow arrow—and marquee both lines of text, you will see it is now a series of vectors.

  6. The letters are all regarded as a group. Select the text and select Modify, Ungroup (Control-Shift-G (PC) or Command-Shift-G (Mac)). Keep ungrouping until you can select the "O."

  7. Select the "O" and open the Transform panel, either by selecting Window, Transform, or by clicking the Transform tab on the Align and Transform panel. When the panel opens, click the Scale icon. Deselect Uniform and set the horizontal scale to 115%. The "O" fattens.

  8. Ungroup the word "Community" until it is individual letters. Select the Magnifying Glass tool (you can also select it by pressing the Z key on both platforms) and zoom in on the letter "y."

  9. Select the Subselect tool and select just the tail of the letter. Press the down arrow on you keyboard four times, and the tail lengthens, as shown in Figure 6.20.

    Figure 6.20. The tail of the "y" is lengthened by selecting it with the Subselect tool.

  10. Zoom in on the "O." The design calls for the word "The" to be inside the "O." Select the Text tool and click once inside of the "O." Enter the word The. The format for this word is:

    • Font: Pick a script font. We used Brush.

    • Point Size: 21.

    • Weight: Bold.

    • Tracking: –2.

  11. Select all the objects on the page by selecting Edit, Select All, or by pressing the Control-A (PC) or Command-A keys (Mac). With the objects selected, you can now fill them with the color called for in the design specification.

  12. Select Window, Swatches, or click the Swatches tab in the Assets Panel. Freehand is still a print application at heart, and the blue required—#003399—is not part of the default colors. Click the Assets panel options button, and a pop-down menu with a number of color-picking systems will open.

  13. Select Web Safe Color Library at the bottom of the list. A Web Safe Color Library dialog box that looks a lot like a list of Pantone colors opens. Enter the color number in the text input area of the dialog box. Your color will be selected, as shown in Figure 6.21. Click OK. The dialog box closes and the color will appear on the Swatches panel.

    Figure 6.21. Web Safe colors in Freehand, due to its print roots, are handled a bit differently than the other Macromedia Studio MX 2004 applications.

  14. To apply the color, simply select the text and click the new color swatch. All of the lettering turns blue. Select everything on the page and group it into one object. Save the logo.

Finishing the Masthead

With just a couple of minor additions, the masthead will be complete. The words will have to be placed in Fireworks, and a "Sun" disk and the word "Center" will have to be added. This is a good example of how seamlessly Fireworks and Freehand work with each other.

  1. Open the masthead image created earlier in Fireworks. When Fireworks opens, click the Canvas Size button on the Property Inspector and set the Canvas Height to 600 pixels. The masthead will be left sitting in the middle of the new page size. Drag it up to the top of the page.

  2. Open the Freehand document containing the logo just created. Select it and drag it from the Freehand page onto the Fireworks page. On the PC, the image is ready to be dropped into Fireworks when a small box with a plus sign appears under the cursor. On the Mac, a gray-bordered box will appear on the Fireworks page. Release the mouse, and your logo "drops" onto the Fireworks document. You can quit Freehand.

  3. Drag the logo to the top of masthead until it is just sitting on the top of the bar at the bottom of the masthead, as shown in Figure 6.22.

    Figure 6.22. The Freehand artwork is dragged and dropped into the Fireworks image and moved to its final position.

  4. In Fireworks MX 2004, select the Ellipse tool. Draw a circle and fill it with #FFFF66 yellow. With the circle selected, enter the following values in the Property Inspector:

    • Width: 104

    • Height: 106

    • X: 690

    • Y: 4

  5. The circle moves into position, but it is in front of the logo. Open the Layers panel and drag the layer containing the circle under the layer with the logo.

  6. Select the Text tool. Press your Caps lock key and enter the word CENTER. Format the word using these values in the property Inspector:

    • Font: Arial

    • Point Size: 16

    • Color: #FFFFFF White

    • Weight: Bold

    • Horizontal Scale: 120%

  7. Drag the word onto the bar and place it as shown in Figure 6.23. The banner is now finished.

    Figure 6.23. The finished banner is a great example of using the strengths of both Fireworks and Freehand.

Note

In the Freehand exercise, the text in the logo was converted to outlines. This avoided any potential copyright problems with the unauthorized trading of fonts. That same feature is available in Fireworks. You simply have to select the text block and select Text, Convert to Paths (Control-Shift-P on the PC and Command-Shift-P on the Mac.)

In the design for the Community Center, we use fonts that are not widely available. That's why, in your Chapter 6 Exercise Folder, we have included a copy of the final masthead to be used in the site. This image, named OCC_Final, contains fonts that have been converted to paths.


Batch Process is a Developer's Best Friend

The tour of the facility uses quite a few images that, thanks to a digital camera, offered the designers a few dozen choices for each section. The question is, after the choices are made, is the team prepared to reduce a dozen or so images from their current 400x300 size to the two sizes called for in the Freehand "comp" shown in Figure 6.24?

Figure 6.24. The comprehensive design and the Object Inspector give you all the information needed to do a batch process in Fireworks.

The answer, of course, is "No."

The solution is the batch process feature of Fireworks MX 2004. Batch process is one of those great "Let the Software Do the Work" techniques that only a handful of developers and designers use on a regular basis. This feature simply automates otherwise repetitive tasks and reduces the production time for the task from hours to minutes.

In this case, the comp, prepared in Freehand, gives us all the necessary information needed to scale the images. For the overview page, a series of fourteen images are presented. Click on an image, and you see the page developed for that image. As you can see, though, the fourteen images are one size, and the single image on the page is another. By selecting an image on the page and opening the Object Properties in Freehand, you can see not only the final dimensions of the selected image but its scaling percentage as well.

The dimensions of the thumbnails are 68 pixels wide by 51 pixels high. Each image is scaled to 17% of the original size. The single images are 249 pixels wide by 187 pixels high. They are scaled down to 62% of their original size. Armed with this information, a batch process in Fireworks becomes a breeze.

Follow these steps to batch process the images called for in the comp:

  1. Launch Fireworks MX 2004 and select File, Batch Process. When the Batch Process dialog box opens, navigate to the Tour_Pages folder located in your Chapter 6 Exercise Folder.

  2. A list of the files in the folder will appear. Click the Add All button or select only the files you want to process. The files will move into the area at the bottom of the Batch dialog box. If you want to remove a file at this point, select it and click the Remove button. Click the Next button to open the Batch Process dialog box.

  3. The Batch Process dialog box is divided into two distinct areas. On the left are the Batch Options and on the right is an area named Include in Batch. In this dialog box, you essentially decide what needs to be done to the files. Select Scale and click the Add button. Scale moves to the right and the bottom of the dialog box changes to reflect your scale options.

  4. In the Scale area, select Scale to Percentage from the list in the pop-down menu. A percentage input area opens. Select the 100 in that area and change it to 17% as shown in Figure 6.25. Click Next.

    Figure 6.25. Select your task or tasks in the Batch Process dialog box and determine the settings for the task before you click the Next button.

  5. The next screen you are presented with, as shown in Figure 6.26, simply asks where the processed files should be saved. Because one of the cardinal rules in our business is to never work on the original files, select Custom Location. This will open a Select Images Folder dialog box. Create a new folder named TourThumbs inside the Tour_Pages folder. Select this new folder and click the Choose button if you use a Mac or the Select Tour_Thumbs button on a PC.

    Figure 6.26. Always create a new folder for any artwork affected by a batch process. This avoids harming the original files if you make a mistake.

  6. When you return to the batch process window, click the Batch button. Fireworks will then open a Batch Process dialogue box that will open a Fireworks MX document window and will also tell you which image is currently being processed. When it finishes, the batch process dialog box will tell you the process is complete. Click OK and check out the files in your Tour_Thumbs folder.


Summary

This has been a rather comprehensive chapter that reviewed many of the new imaging features of Fireworks MX 2004 and the tight integration between Flash MX 2004 and Fireworks MX 2004, and between Fireworks MX 2004 and Freehand MX.

We started off with a review of the tour segment of the Oakbridge Community Center and a review of the planning steps that lead to the creation of the images for the tour and the site's web pages.

We talked about the importance of developing a realistic key event schedule. The key event schedule lays out, as we said, "the flow and pace of the project." We also cautioned against regarding the schedule as being carved in stone. The best schedules are those that account for the unexpected, yet still lay out a clear path to the completion of the tasks at hand.

With the schedule in place, the team can get to work.

We presented a brief overview of many of the enhancements and new tools in Fireworks MX 2004. One of the major enhancements is the Fireworks interface. Panels now take on a life of their own, the canvas can now be changed to accommodate the content, and multiple document navigation is now done through a series of discrete tabs at the top of the Document window.

One of the new tools is the Replace Color tool. This tool replaces colors of your choosing in a rather unique and powerful manner. We demonstrated this by changing the uniform color of a baseball team from red to purple.

Another new tool is the Red Eye Removal tool. Finally, Fireworks MX 2004 is able to easily remove this artifact with the click of a mouse.

One of the major changes to the Fireworks MX 2004 application is the addition of Auto Shapes. These items can be thought of as interactive clip art, controlled through the manipulation of Control Points programmed into the Auto Shapes. We showed how to turn a Doughnut Auto Shape into a rather interesting textured logo and how the Arrow Auto Shape can be used as a mask.

From there, we moved into button creation and thoroughly reviewed the use of the Button Editor. We even showed you how a new feature of Fireworks MX 2004—Send to Email—can be used to send the artwork for peer or client review as an email attachment right out of Fireworks MX 2004.

Workflow between the applications in the Studio is still one of the great secrets of the Studio. We talked about workflow and then demonstrated how Fireworks MX 2004 should be regarded as the Flash MX 2004 image editor. We reviewed how artwork created in Fireworks MX 2004 can move into Flash MX 2004 without the loss of transparency. We also demonstrated how a Fireworks MX 2004 image can be edited from Flash MX 2004 by simply clicking the edit button in the Flash MX 2004 Property Inspector.

We then moved to building the masthead for the tour pages. We started by preparing the image of the building used for a "sky transplant." We then reviewed the creation of a mask that enables the building to fade into the sky background. We also had Chris explain a rather unique technique for creating clouds using the Alien Skin Marble Filter and how to save that effect as a pattern for subsequent reuse.

The logo was created in Freehand MX. This gave us the opportunity to review the industrial-strength text handling capabilities of Freehand MX with an emphasis on tracking and kerning. We also explained how to convert text to editable paths for subsequent manipulation. In addition, we explained that this is a great way of ensuring font substitution doesn't occur. This section concluded with a "drag-and-drop" technique for quickly moving artwork from Freehand MX to Fireworks MX 2004.

We concluded the chapter with a thorough review of one of the great productivity tools in the Studio—the Batch Process feature of Fireworks MX 2004. We showed how over a dozen images for the tour were scaled down to 62% in less than two minutes.

With images prepared and ready to go, the pages that will display them have to be constructed. Let's go see how the web crew is doing as they contend with building Dreamweaver MX 2004 templates and adapt many of the new features of Dreamweaver MX 2004 to their workflow.


Chapter 7. The Elements of the Dynamic Page

Until a few years ago, the Dreamweaver world was a relatively peaceful place. Developers happily went about the business of designing static pages, and when the conversation turned to dynamic data, they could shrug it off. "That's geek stuff," they'd say as they contentedly built static sites for their clients.

The first trembler in the peaceable kingdom was the release of Dreamweaver UltraDev. To the average developer, "Ultradev" was an interesting word he or she had heard in passing. It sounded interesting because it was Dreamweaver with a set of tools and options for connecting to databases and for working with ColdFusion and other server technologies. Still "geek stuff," but it was getting awfully close.

Dreamweaver MX took that community, turned it inside out, and rearranged its molecules. UltraDev's functionality was now an integral feature of the application. In fact, everybody now had access to the "geek stuff." To make matters worse, Macromedia was subtly letting the residents of the Dreamweaver world know that, to make it in the web development business, "You either got dynamic or you got dead."

Building a dynamic page, as you have discovered, involves a lot of paper-based planning. This chapter starts those paper-based plans on the road to fulfillment. Still, the first few tasks undertaken don't fall into the realm of "cool."

We take you through the process of defining a local and remote site. This is the first step in the creation process, and we show you a couple of features in this latest release of Dreamweaver MX 2004 that make the process rather simple. We also look at creating templates, which are the foundation of the site. You will also get the chance to review the way a template is constructed to accommodate dynamic data.

With the site defined, you can now turn your attention to how the pages will look. This leads to a discussion of templates and how they are created in Dreamweaver and a look at a new table building tool introduced in this version of Dreamweaver.

We finish off the chapter with a review of one of the more robust features of this new Dreamweaver release—an exciting revamp of the way Dreamweaver creates and manages Cascading Style Sheets. Again, we give you the opportunity to create a CSS sheet for the Oakbridge site that explores many of the new CSS features of the application.

Though this stage may not have a "cool" or a "wow" factor associated with it, mistakes made at this stage of the process will be very expensive to fix.


Dreamweaver MX 2004 and Dynamic Data

Dreamweaver MX 2004 contains a number of extremely robust tools that make creating dynamic sites relatively easy. An intimate knowledge of server technologies and a multitude of languages is not necessary. Dreamweaver's graphical interface walks you through the process in a relatively painless manner, and the fact that two of the more popular application server technologies—ColdFusion MX and Flash Communication Server MX—are integral members of the Studio doesn't hurt either.

To build the Oakbridge Community Center site, you need a web server to test your work. ColdFusion can be used either standalone on Windows or in conjunction with either JRun 4 or Tomcat 4 on any J2EE-enabled computer. Or you can use Microsoft's Internet Information Server (IIS) or Apache in conjunction with ColdFusion to help test your work.

When the software is up and running, create a root folder for the site. Though any location on the computer is appropriate, for the purposes of this book, we are going to assume the server being used is IIS on Windows and JRun 4/ColdFusion MX for J2EE on the Mac. For Windows users, the root folder would be located at C:\Inetpub\wwwroot. For Mac users, we will assume the site root is located in /Library/WebServer.

Note

Mac users should also be aware that this version of Studio is the point where Macromedia has abandoned OS 9.xx compatibility for all the applications in the Studio. This was not an arbitrary decision. Apple has announced it would no longer be supporting OS 9.xx after the summer of 2003, and many application developers have followed suit.

If you are working on a Mac, you already have the Apache Web Server installed. It is a part of the Macintosh OSX System install. To use the Apache Web Server, open the System preferences on your Dock. When the Preferences window opens, double-click File Sharing. Click on the Services Tab to open a number of sharing choices, as shown in Figure 7.1. Select Personal Web Sharing and click the Start button to start the Apache Server. If the button is a Stop button, the Apache server is already running. Close the File Sharing Preference window, and you are ready to go to work.

Figure 7.1. Mac users can turn on their Apache server by simply selecting Personal File Sharing in the Sharing Preferences window.

Defining the Oakbridge Community Center Site

Having configured your system, you next define a Dreamweaver site to manage your files. This is actually a three-step process:

  1. Create and define a folder on your hard drive to hold the working copies of your files. When you create this folder, it would be a good idea to create a subdirectory in the folder named Graphics. Dreamweaver MX 2004 will look for this folder when you define the site, and this would be a great time to create it.

  2. Define a folder for the final files located on the computer running your web server as a remote folder.

  3. Tell Dreamweaver where the dynamic pages are to be processed while you work.

After you have completed these steps, you can go to work.

Defining a Dynamic Site in Dreamweaver MX 2004

The local folder you will define is the folder where working copies of all the files used in the site can be found on your hard disk. This folder also gives you the capability to manage your files and to transfer files to and from your web server. Follow these steps to define a local folder for Dreamweaver MX 2004:

  1. Launch Dreamweaver MX 2004. This is where you will suddenly notice things have changed. In previous versions of Dreamweaver, you would select Site, New Site. The New Site menu command has been replaced with a command named Manage Sites. Select Site, Manage Sites to open the Manage Sites Dialog Box.

    Note

    You don't have to use the menus to open the Manage Sites dialog box. You can define a site using the Files panel. On a Mac, click the arrow in the Files panel, click the Files tab, and click Define New Site to open the Site Definitions dialog box. On a PC, open the Files panel and select Manage Sites from the pop-down menu. This will open the Manage Sites dialog box.

  2. When the Manage Sites dialog box opens, click the New button. The Site Definitions dialog box will open. You have two choices for defining the site. If you click the Basic tab, you will launch the Site Definition wizard. If you click the Advanced tab, you will be presented with the choices shown in Figure 7.2. Click the Advanced tab if you are in the Basic View.

    Figure 7.2. This release of Dreamweaver offers you a couple new ways to access the Site Definition dialog box. You can access it through Sites, Manage Sites or through the Files panel.

  3. Click Local Info from the category list. Enter a name for the site—we used "Oakbridge"—in the Site Name text box.

  4. Click the file folder beside the Local Root Folder to open the Choose Local Root Folder dialog box. Navigate to the folder's location on your hard disk—if it isn't the one you created in the wwwroot folder (PC) or the Sites folder (Mac)—and open the folder. Click the Select button. This will close the dialog box and enter the path to the folder in the Local Root Folder text box.

  5. The next bit of information requested is the location of your site's graphics. Click the File folder beside the Default Images folder text box. When the Choose Local Images Folder dialog box opens, navigate to the Graphics folder you created earlier. Open the Graphics folder and click Select. The path will appear in the text area. When finished, your Local Info dialog box should resemble that shown in Figure 7.3. Don't click OK yet.

    Figure 7.3. The local site, including a default Images folder, is defined.

The next step is to define a remote folder for the Oakbridge site. Technically, this step is not necessary. The site defined in the previous section can function as the root folder if you are running a web server on your computer. Follow these steps to define a remote folder:

  1. Select Remote Info in the Site Definitions dialog box. This opens the Remote Info dialog box shown in Figure 7.4.

    Figure 7.4. The Remote Folder for the Oakbridge site is defined. Note the Check In/Check Out options have been completed.

  2. Open the pop-down menu, and a number of choices are available to you. The choices are:

    • Local/Network: Choose this if your computer is functioning as your server.

    • FTP: Select this one if you connect to a testing server using FTP.

    • RDS (Remote Development Services): Select this one if you connect to your web server using RDS. Keep in mind for this choice that your remote folder must be on a computer running ColdFusion, and you will need an RDS password.

      Note

      If you are not running a developer version of ColdFusion MX on your local machine, or if you are not the ColdFusion administrator on your server, you will need to obtain an RDS password from your administrator.

    • SourceSafe Database: Select this option if you connect to your web server using a SourceSafe Database. SourceSafe Database support is only available for Windows and requires you to define a separate folder. To use SourceSafe with Windows, you must have Microsoft Visual SourceSafe Client version 6 installed.

    • WebDAV (Web-based Distributed Authoring and Versioning): Select this one if you connect to your web server using the WebDAV protocol. This method requires you to use a server such as IIS or Apache that supports this protocol.

  3. Select Local/Network. Navigate to the remote folder located either in the wwwroot (PC) or WebServer (Mac) folder. Select Automatically Upload Files to Server on Save and enable Check In/Check Out if you are a member of a web development team. Don't click OK yet.

Note

The site will eventually connect to ColdFusion MX. We didn't choose RDS because this option can be changed at a later date.

Having told Dreamweaver where the local and remote folders are located, you need to tell it where to go to process dynamic pages. Do the following:

  1. Select Testing Server from the Categories list in the Site Definition dialog box.

  2. Select ColdFusion from the Server Model pop-down list.

  3. Select Dreamweaver MX 2004 Pages Only from the This Site Contains pop-down list.

  4. Select Local/Network from the Access pop-down list. Selecting this also causes the path to your root folder to appear in the Testing Server input box. When finished, the Testing Server dialog box should resemble Figure 7.5. Click OK. The Manage Sites dialog box will reappear and your new site will appear on the list. Click Done to close the dialog box.

    Figure 7.5. The testing server is defined to enable Dreamweaver to generate dynamic content and connect to databases while you work.

  5. Open the Files panel, and you will see your site is also included in the list of sites in the Files pop-down menu. Select Remote View from the View pop-down, and your remote location will appear in the panel.


Building Templates in Dreamweaver MX 2004

In the previous chapter, you built an image for the Oakbridge Community Center's pages. As you saw in the Freehand MX comprehensive designs, that masthead and a couple of others are used on a number of pages. If you have worked on a number of sites for a variety of clients, you know that each project involves content that is repeated across the pages. Whether it be a logo, text, tag line, navigation, or other element, it is quite commonplace to use the same content, often in the same location, on each page of a site.

Dreamweaver templates make this repetitive task quite efficient.

Dreamweaver MX 2004 and Templates

The beauty of working with Dreamweaver templates is the fact that a template is composed of two areas on the page. Content that can be manipulated is put into an area of the page that is editable. All the other elements on the page are non-editable, or locked. In addition, you have the ability to create "child" pages from your templates. Child pages are a bit different from regular templates, in that the editable areas of the page can be changed. The non-editable areas are blocked from change.

The great advantage of a template is that changes to the non-editable regions of a template, when made, will automatically ripple through the site. For example, Tom's name appears in a non-editable region of a template. His role changes, and he is replaced by Jordan. By changing "Tom" to "Jordan" on the template, that change will appear on every page based on that template.

Building a Template in Dreamweaver MX 2004

The first step in creating a template-based site is obvious: Create a template upon which multiple pages will be based. In many respects, templates are somewhat chameleon-like. They change to fit the content, giving the user the illusion of a multi-page site, when in fact, it is only one page pulling information out of a database that is displaying the content.

When designing a Dreamweaver template, keep the following in mind:

  • Place all content that is common to every page in the template.

  • Be sure to place editable regions in every area of a template that will hold content.

  • Test the template before creating the site. The last thing you need is to have rigidity in pages that should be flexible.

To create a new, blank template in Dreamweaver, follow these steps:

  1. Open Dreamweaver MX 2004 and open the Files panel. Click the Assets tab to open the Assets panel. Click the template button—the second icon from the bottom—to open the template category of the Assets panel.

  2. Click the New Template button at the bottom of the panel. It is the second one from the right and looks like a page with the upper-right corner curled down. A new template named Untitled will appear in the list of templates. You will also see a tool tip in the top section of the panel that tells you how get started creating a template.

  3. Name the template—we used "oakbridge_1"—and click the Edit button beside the Trash Can at the bottom of the Assets panel. A new Dreamweaver page will appear, as shown in Figure 7.6. You will also notice that the filename appears on the tab in the document window and that the name has the Dreamweaver extension .dwt used for a Dreamweaver template. If you click the Files tab of the Assets Panel and select Local View from the site's view options, you will see that Dreamweaver has added a Templates folder to the site, and if you open the folder, you will see your template.

    Figure 7.6. A Dreamweaver blank template can be created and/or applied to a page by using the Assets Panel.

Note

As we are fond of saying, "There are six thousand ways to do everything when it comes to web design." This prompted the inevitable, "That isn't the way I would do it" from one of the authors. So tell us how you would do it, Jordan:

"Why not simply select File, New? When the New Document dialog box opens, select Basic Page in the Categories area of the dialog box. Then select HTML Template in the list presented under the Basic Page area and click the Create button. An even faster way to create the template is by placing only the content that will appear on each page in its final position. When that is done, you determine the Editable Regions and then save the page using File, Save as Template."

Adding Editable Regions to a Dreamweaver MX 2004 Template

Jordan got a little ahead of us here, but he is absolutely correct. Until you specify which areas of a page are editable, all areas of the template will be locked. To create an Editable Region on a Dreamweaver template, follow these steps:

  1. Select View, Design, click once on the template, and type your name on the page. Format your name using the following settings on the Property Inspector:

    • Format: Heading 6.

    • Style: Select New, specify Tag, and then type in the name Style1. Select Define In: This document only.

    • Font: Default Font.

    • Size: XX-large to "Super Size" your name.

  2. Select your name. Select Insert, Template Objects, Editable Region—Control-Alt-V (PC) or Command-Option-V (Mac)—to open the New Editable Region dialog box.

  3. Enter a name for the selection and click OK. If you are in Design View, your name is now enclosed in a blue box, and the name of the region is in the tab at the top of the box, as shown in Figure 7.7.

    Figure 7.7. An Editable Region is already on the template and another is about to be created.

Tip

If the color of the Editable Region isn't acceptable, it can be changed by opening the Preferences—Edit, Preferences—and selecting Highlighting. The Highlighting area will present you with a number of choices. Locate Editable regions and click on the Color Chip to open the Dreamweaver Color Picker. Choose your color and click OK.

If you want to change the name of the Editable Region, select the Editable Region on the Dreamweaver page and change the name in the Dreamweaver Property Inspector.

Now that you have the basics of creating templates and Editable Regions, the next section shows you how to create an Oakbridge Community Center template used to show the team members the site's images.

Constructing a Template

This section reviews the way to create a template from an existing document and also presents the new table features of Dreamweaver MX 2004.

  1. Open the ImagePage.htm document in the Templates folder of the Chapter 7 Exercise folder downloaded from the book's web site.

    Tip

    You don't always have to use the Dreamweaver File menu to locate and open a Dreamweaver document. Open Dreamweaver, locate the file to be opened, and drag it into the Dreamweaver interface. When the cursor changes to a page with a "+" sign, release the mouse, and the page opens. Mac users can simply drag the page onto the Dreamweaver icon on the Dock or into the Dreamweaver interface if the application is open.

  2. At the bottom of the page are three table cells. We are going to nest a new table in each one. Click once inside the left-most cell at the bottom of the page. Click the Insert Table button on the toolbar to open the Insert Table dialog box.

  3. The Insert Table dialog box, as you may have noticed in Figure 7.8, has been redesigned. The usual table settings are at the top of the dialog box, but location and accessibility areas have also been added. Use the following settings:

    • Rows: 1

    • Columns: 1

    • Table Width: 100 percent

    • Border Thickness: 0

    • Cell Padding: 5

    • Cell Spacing: 0

    • Header: Top

    • Accessibility: Leave blank

    Figure 7.8. The Insert Table dialog box has been completely revamped in this release of Dreamweaver.

    After you enter the values, click OK and the new table appears in the cell.

  4. Click once inside the left cell of the new table. Click the image button on the Common toolbar to open the Select Image Source dialog box. Navigate to the Graphics folder inside the Templates exercise folder and select the Baseball.jpg image. Click OK and the image will appear in the selected cell.

  5. Select the first two sentences of the Lorem text and copy it. Click inside the cell beside the baseball image and paste the text. In the Property Inspector, set the font to Arial, Helvetica, Sans-serif, the size to 10 pixels, and the alignment to Flush left. Copy the text.

  6. Add new tables to the remaining two cells using the same settings. Paste the text on the clipboard into the two new tables and insert the Skating and Trails images into the tables. The downside of pasting is that the formatting copied from the baseball text area won't maintain its left alignment. Your page should resemble that shown in Figure 7.9.

    Figure 7.9. The page is completed and ready to be turned into a template.
Converting an HTML Page to a Dreamweaver MX 2004 Template

With the layout complete, the page can be turned into a multiuse template. Follow these steps to turn the design into a template:

  1. Select the text cell beside the large image. You can do this in one of two ways. The first is to hold down the Control (PC) or Command (Mac) key and click on the cell when you see it surrounded by a red key line. The second is to click on the <td> tag at the bottom of the document window.

  2. With the cell selected, select Insert, Template Objects, Editable region or press the Control-Alt-V (PC) or Command-Option-V (Mac) keys to open the New Editable Region dialog box. Name the region MainText and click OK. This makes the text in this section of any page with the template applied fully editable. Because you are working with an HTML file, as soon as you convert an area to an editable region, you get an alert box that warns that Dreamweaver is going to convert the document to a template (unless you have previously checked the Do Not Show This Alert Again box). If you see this warning, just click OK.

  3. Select the second <table> tag at the bottom of the document window. Be sure you include the image and the text. Insert an editable region in this area named Sports1.

  4. If you click on each region, you will see how each is treated a bit differently. Click on the name for the MainText region and the text will be selected. Click on the name for the Sports1 region and the entire table is covered with a gray overlay (see Figure 7.10).

    Figure 7.10. The Editable Regions have been assigned to the template and the Sports1 region is selected.

  5. Select File, Save As Template. This will open the Save As Template dialog box. Select the site to which the template will be assigned from the pop-down list, name the template ImagePage, and click OK to close the dialog box and save the template. Close the template document.

    The template just created will be saved to the site's root level and will have a .dwt extension after the name to indicate a template. It is also moved over to the Assets area of the File panel.

To apply a template to a new page:

  1. Open a new blank document—File, New, Basic Page, HTML. Open the File panel and click the Assets tab. Select the ImagePage template found in the list of Assets and click the Apply button at the bottom of the Assets panel. The template is applied to the page.

  2. Another common method is to select File, New, and click the Templates tab in the New Document dialog box. In the Templates For: section, select the site to which the template is to be applied. When you do that, the templates associated with the site appear under the Site: area. Select the template, and a thumbnail of the page (see Figure 7.11) will appear in the preview section of the dialog box. Click Create.

    Figure 7.11. Templates can be applied to blank pages by either selecting them in the Assets panel or by assigning them to new documents.
    [ Team LiB ]


Creating Cascading Style Sheets in Dreamweaver MX 2004

Consistency is a vital element in web design. Change is another. The issue is how to balance consistency of the look of the page against the fact that things will change. No matter how you look at it, a huge amount of extra work is involved.

Cascading Style Sheets (CSS) is the answer. CSS can be used to control a number of elements on a page, and when set up, changes can be applied throughout the site with a minimum of extra work.

Anything that makes your life easier is something that should be considered, but there is an even more important reason to use CSS—the issue of platform and browser compatibility. Specify a text size on a PC or Mac, and you are handing its appearance on the screen over to the browser. This means factors such as the user's screen resolution and whether the browser's owner has decided to enlarge fonts come into play. The end result is your design will be compromised. Use CSS, and you can control the fonts by specifying their size in pixels, which ensures the page looks the same across the platforms and browsers. That is just one aspect of the power of CSS. The standard allows you to control everything from fonts to multi-column layouts.

The purpose of this section is to introduce you to CSS in Dreamweaver MX 2004 and to create and apply a style sheet to a dynamic page. We are not going to turn you into a CSS expert. The subject is huge, and one of the best books on the market for learning CSS is Eric Meyer on CSS, published by New Riders.

Cascading Style Sheets and Dreamweaver MX 2004

This release of Dreamweaver MX 2004 has seriously "beefed up" the application's CSS management capabilities. Among the changes are:

  • CSS Layout Visualization: Layouts are much easier to create when done entirely in CSS. Div tags and other block elements are now available in design view, and they can now be modified through the Property Inspector.

  • A New CSS Panel: The CSS panel has been expanded to provide even more editing options. In addition, the Apply button has been removed, and text styles can now be applied directly from the text Property Inspector.

  • CSS-based Text Property Inspector: By adding this feature to the Text Property Inspector, you don't have to constantly switch between modes to select a CSS Style. A pop-down menu now presents you with all the current styles, and a built-in preview lets you see what a change looks like before the style is applied.

  • CSS Code Hints: If you hand-code CSS, the appropriate options will appear in the Code View. You can also have them appear in Code View by pressing Control-Spacebar (PC) or Command-Spacebar (Mac).

We are now going to build a CSS-driven page that manages the Oakbridge Community Center's images on the site being used by the production team. This will demonstrate many CSS basics.

Building CSS in Dreamweaver MX 2004

To build a relatively simple CSS style sheet in Dreamweaver MX 2004, follow these steps:

  1. If you haven't done so already, download the Chapter 7 Exercise folder from the book's web site. Open the folder named CSSEX and open the page named Index in Dreamweaver MX 2004.

  2. Open the CSS Styles panel. If your CSS Styles panel isn't open, select Window, CSS Styles or press the Shift-F11 keys to open the CSS Styles panel. When the panel opens, select New CSS Style from the Panel Options pop-down or click the New CSS Style button at the bottom of the Panel. This will open the New CSS Style dialog box.

  3. The new style sheet we are creating will change the background color of the cells in a table. Name the style .backcol. The period is important—it establishes a custom class. Don't omit it. Select Make Custom Style (class) in the Type area and select New Style Sheet File in the Define in: area. When finished, your New CSS Style dialog box should resemble Figure 7.12. Click OK. You will now be prompted to save the style sheet. Name the file (we used "ImageChooser") and save the sheet to the CSSEx folder.

    Figure 7.12. CSS styles are named in the New CSS Styles dialog box.

  4. Clicking OK launches the CSS Style Definitions dialog box. Click the categories button and change the Background color to #CCCC99. Click OK. Your new style appears in the Style area of the Property Inspector, as shown in Figure 7.13. If you open the Style pop-down, you will see the style and the color. The sheet you created is now listed in the CSS panel, and the style is listed as a pop-down from the CSS sheet name in the CSS Styles panels.

    Figure 7.13. CSS styles, when created, are available through the Styles pop-down of the Property Inspector and in the CSS Styles panel.

  5. There will be two colored backgrounds used in the table. Open the New CSS Style dialog box. Name the style backcol2, set the Type to Make Custom, and select the ImageChooser file from the Define In pop-down list. This adds the style to the ImageChooser document. When the CSS Definition dialog box appears, select #CCCCFF as the background color. Click OK.

  6. To apply these two styles to the tables, select the table at the top of the page with the links and select the backcol style from the pop-down list in the Styles area of the Property Inspector. With the Shift key pressed, click each of the three cells at the bottom of the page and apply the backcol style. Press the Control (PC) or Command (Mac) key and roll over the table cell containing the Lorem text. The cell will be visible when it is surrounded by a thin red line. Click the mouse to select the cell and apply the backcol2 style to the selected cell. Your page should resemble that shown in Figure 7.14.

    Figure 7.14. CSS styles are applied by selecting the areas to which the Style is to be applied and then selecting the Style from the Styles pop-down in the Property Inspector.

  7. Formatting the text in the cell beside the image is the next task. Open the New CSS Style dialog box, create a new custom style named .mainHead, and attach it to the ImageChooser style sheet. Click OK, and the CSS Style Definitions dialog box will open.

  8. Select the Type category and use these settings:

    • Font: Arial, Helvetica, Sans serif

    • Size: 16 pixels

    • Color: #000000 (Black)

    Click OK.

  9. Create another style named bodyText. When the CSS Style Definitions dialog box opens, use the following settings in the Type category:

    • Font: Arial, Helvetica, Sans serif

    • Size: 11 pixels

    • Line Height: 18 pixels

    • Color: #000000 (Black)

    Click OK.

  10. To apply the styles, select the headline and select the mainHead style from the Style pop-down. Select the body text and select the bodyText style from the Style pop-down.

  11. If you want to edit the style, right-click (PC) or Command-click (mac) the style name in the CSS Styles panel to open the Context Menu for the selected style. Select Edit from the menu, and the CSS Styles Definition dialog box will open. New to this release of Dreamweaver is the capability to select a style or class in the CSS Styles panel and to be able to edit the specific properties of the selection in the Selection panel, as shown in Figure 7.15.

    Figure 7.15. The properties for individual CSS styles can now be edited individually in the Selection panel.

  12. If you want to edit the code for the style sheet, simply double-click the Style Sheet Name or one of the styles. This will open the actual CSS document.

Creating Links Using CSS

At the top of the page are four bits of text that can be used as links. These links will become the various states of a rollover through the use of "pseudo-classes." These are preset definitions for styles in links. The styles are "link," "visited," "hover," and "active," and you can use a CSS selector to define a style for each state.

The order in which these pseudo-classes appear is absolutely critical. The order must be Link, Visited, Hover, and Active. If they don't appear in that order, they may not work in the way you decide. Follow these steps to have them change color when the user rolls over or clicks them:

  1. Open a New CSS Style and name it a.alink:link. Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box.

  2. Use the following settings in the CSS Styles Definition dialog box:

    • Font: Arial, Helvetica, Sans serif

    • Size: 12 Pixels

    • Color: #0000FF

    • Decoration: None

    Selecting None as the decoration will remove the underline that inevitably appears below an HTML link.

  3. Open a New CSS Style and name it a.alink:visited. Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box.

  4. Use the following settings in the CSS Styles Definition dialog box:

    • Font: Arial, Helvetica, Sans serif

    • Size: 12 Pixels

    • Color: #FF00FF

    • Decoration: None

  5. Open a New CSS Style and name it a.alink:hover. Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open CSS the Styles Definition dialog box.

  6. Use the following settings in the CSS Styles Definition dialog box:

    • Font: Arial, Helvetica, Sans serif

    • Size: 12 Pixels

    • Color: #000000

    • Decoration: Underline

  7. Open a New CSS Style and name it a.alink:Active. Set the type to Use CSS Selector and make sure it is attached to the ImageChooser document. Click OK to open the CSS Styles Definition dialog box.

  8. Use the following settings in the CSS Styles Definition dialog box:

    • Font: Arial, Helvetica, Sans serif

    • Size: 12 Pixels

    • Color: #FFFF00

    • Decoration: None

  9. Select the word "home" and link the word to http://www.macromedia.com by selecting Home and adding the address to the Link input box of the Property Inspector. Apply the alink style to the link. You can verify that the style has been applied to the link by switching to Code and Design view. Your link should look something like this:

    <a class="alink" href="http://www.macromedia.com">home</a>

    When the pseudo classes and links have been added, your CSS Properties panel and the Dreamweaver Property Inspector will change, as shown in Figure 7.16.

    Figure 7.16. Various rollover states for hyperlinks can be applied using the CSS pseudo classes.

  10. Test the page in a browser by selecting File, Preview in the Browser or by pressing the F12 key.


Summary

Though we didn't do any of the "sexy" or "cool" stuff in this chapter, we showed you how to lay the foundations for a successful site. At this stage of the process, the designs are moving from paper and coming to life on the computer.

We started off the chapter by reviewing how to create and define a new site in Dreamweaver MX 2004. This started with a discussion of Dreamweaver's capability to connect to a variety of web servers for local and remote testing purposes. From there, we moved into the process of defining a site in Dreamweaver MX 2004. As we point out, it is a relatively simple three-step process:

  1. Create and define a folder on your hard drive to hold and manage the working files.

  2. Define a folder for the final files that is located on a local or remote server.

  3. Tell Dreamweaver MX 2004 where the dynamic pages are to be processed.

One of the great productivity enhancements available to you in a development environment is the use of a template. We discussed in great depth the various template creation tools available to you and then showed you how to build a template based on an HTML page.

As the developer world moves closer to fully embracing Cascading Style Sheets, or CSS, this latest release of Dreamweaver not only embraces CSS, it becomes even more closely identified with the standard. There are several new or improved tools and methods of CSS production in Dreamweaver MX 2004, and we review many of them.

With the elements of dynamic design in place, you can now turn your attention to a technology that makes a site dynamic: the database. You can design templates and manage the content through CSS or table-based layouts. Still, if you don't have a database holding the content, then your site simply won't function.


Chapter 8. Building the Data

You can't avoid it. If you are developing data-driven sites, you have to use a database. There are also some new technologies to work with and eventually master.

There are a couple things you have to know before you start:

  • You must have access to a database management system (DBMS) if you want to create a database and work with it on your computer.

  • The DBMS should reside on your local server, or if you use an ISP, it should reside on the ISP's remote server.

  • You don't have to be a database "guru." Think like a computer, and you will soon come to understand how data is stored and retrieved.

The database you use has to be a relational database, such as MS Access or MySQL. With a relational database, you store data in various tables and then define how those tables relate to each other. The neat thing about relational databases is they offer you multiple tables. That means the information is stored in a series of tables that use common key fields. With multiple tables, there has to be a method of creating the relationships behind the tables. This is the job of the primary key. A primary key is the database phrase for columns that contain values unique to each row. Each table must contain one field that has been designated as the primary key field. The primary key field contains a unique entry for each record. This enables you to hunt down a list of something like baseball diamonds by searching for the unique value in the field.

Finally, application servers, such as ColdFusion MX, communicate with a DBMS through the use of drivers. Drivers are the software that defines how information is moved in and out of your database. The most common drivers are Microsoft Open Database Connectivity (ODBC) and Sun's Java Database Connectivity (JDBC). A DBMS that connects using one of these two drivers is said to be ODBC-compliant or JDBC-compliant. In fact, one of the first questions you answer in ColdFusion MX is which driver you will be using.


Databases and Studio MX 2004

Studio MX 2004 makes extensive use of databases, simply because Macromedia has identified dynamic sites as being the wave of the future. This explains why the Studio products that have a web feature (Flash, Dreamweaver, and Director) are all able to incorporate dynamic data. Though the tools can do it, we still aren't at the point where the platforms—Mac and PC—can manage dynamic data in such a way that novices can easily get into the game regardless of whether they develop on a Mac or a PC.

Databases and Platforms

In many respects, the question of using Mac or PC as the development platform comes down to the software that will be used. The problem is, of course, which is the right software? To arrive at that decision, you should ask such questions as:

  • Are you an experienced database developer, and if so, on which system are you the most comfortable? This will determine the database used.

  • If the team includes a database programmer, which system does he or she use? Database programmers do have their preferences.

  • Will your tables have a lot of records?

  • Will you be working locally and uploading to a server, or do you have a computer dedicated to being a database server?

  • What database software does the server use, and do you even have a choice?

Database Systems

Having answered the platform questions, you should next consider the databases systems themselves. The following is a brief review of the two most popular database systems.

MySQL

With its roots in the UNIX world, MySQL can be used on both Macs and PCs. The great thing about this DBMS is its price—it's free. That's the good news. The bad news is, in its basic form, it uses a command line interface, so familiarity with the Macintosh Terminal or the Windows Command prompt utility is an asset. Still, there are several free graphical user interfaces (GUI) that have been developed for MySQL, making the need for command lines less important. It's fast, it's stable, and it can handle large amounts of data.

MS Access

If you work for a corporation, government, or educational institution, the odds are very good you have a copy of or access to Microsoft Access. It is an integral part of Microsoft Office and is quite reasonably priced. Access doesn't have the power of MySQL under its hood because it's unable to accept a large number of people trying to access the same information simultaneously. If you were selling tickets to a J.K. Rowling reading of a Harry Potter novel, for example, Access won't work. Still, its sheer ubiquity and the capability to manage small- to medium-size databases make it ideal for those on the Windows platform. Those of you using Macs, Unix, or Linux, however, are simply out of luck.

Databases and Dreamweaver, Flash, and Director

As we said earlier, the Studio tools able to create files for web use or playback can use ColdFusion MX to obtain data from a database. Dreamweaver, being the assembly tool, has a robust suite of features located in the Application menu shown in Figure 8.1. Flash uses Flash Remoting to access a database, and Director can either store data gathered or use a Flash movie and the Flash Communication Server.

Figure 8.1. Dreamweaver MX 2004 contains a full range of tools in the Application panel that enable database connectivity.

Defining the Data

Having determined your DBMS, the next question is, "How does the data look?" That's a key question, and there are a number of excellent books out there that will answer it. Still, it is important that you understand a couple general database design principles before you go to work:

  • Group related items together in one table, not many. Use many, and you will have a lot of redundant data. For example, the Oakbridge membership table groups the tables describing the members, a facilities table groups all the facilities data about the facilities available to the members, and so on. If a table appears to describe more than one feature, consider splitting it into two tables.

  • Don't create tables that duplicate values many times in many rows. For example, if an Oakbridge member books a tennis court, place the order information in a separate table named Member_Bookings. Then link that table to the Members table by placing the primary keys from the Members table in the Member_Bookings table. If you treat the data as separate entities, you will only be duplicating the information.

  • Specify the data type for each column of the database. For example, you would store the number of tickets available for public skating in a number column. You would store a member's phone number in a number column. A member's address could go in a text column because the street number is an important text value.

Presenting Data Quickly and Efficiently

The bottom line on the web is speed and efficiency. It is no different with databases. The more accessible the data in the database is to the application calling it, the faster it will appear on the page. Though we gave you some broad guidelines for designing data in the previous section, we thought we would let our resident expert, Jordan, offer a few excellent tips:

  • Categorize your tables to hold data relevant to what you are storing. You wouldn't want to store booking information in the tables that were defined for the tour.

  • Use relations when associating various pieces of data, such as membership information and booking information.

  • In the case of our tour that will be constructed in Chapter 10, "Assembling the Tour," we only need one table for the facilities because there is only one row of records per facility. We can relate other tables, such as the booking information, to the facilities table.

  • If you use the data dictionary template that we discussed in Chapter 4, "Planning the Data for a Dynamic Site," you will have a road map as to HOW you define your fields. We have provided a simple data dictionary for the facilities tour. It is in the Chapter 8 Exercise Folder that can be downloaded from the book's site. The file is Data Dictionary.pdf.

Creating the Database Application in MySQL (Mac Users)

To get yourself started, make sure that you have MySQL installed and running. Full installation and testing instructions are out of the scope of this book. One of the better tutorials for installation and so on is by Minh Huynh of Macromedia. His article "Setting Up the PHP, MySQL and Apache Server Platform on Macintosh OS X for Dreamweaver MX" can be found at http://www.macromedia.com/devnet/mx/dreamweaver/articles/php_macintosh.html. You will also need to make sure that you have a database management application installed and functioning. We are using YourSQL on Mac OS X, which is freely available at http://www.mludi.net/YourSQL/. To create the Oakbridge database, follow these steps:

  1. Launch YourSQL. When the main interface opens, click the Add server button, which opens the Logon dialog box. If your database server is on the same computer as YourSQL, enter localhost in the server text input box. If you have them, enter your User ID and Password and click the Logon button.

  2. Click on the Create Database button to create a new database. When the dialog box appears asking for the name, enter oakbridge and click the Create Database button.

  3. You will only need one table because we are only concerned with the tour. Click the Create Table button. When the Create Table dialog box opens, enter the word facilities in the name text input box and click the Create Table button.

    Note

    Our naming convention is to use plurals because the table will be more than one facility. This is done by clicking on the Create Table button.

  4. After the table has been created, a Design Table tab will appear at the bottom of the interface with the first field column already defined. This predefined column will have to be changed to an ID field. Double-click the name of the field. In this case, it is called new_column. Change the name to facilityID.

  5. Double-click on the name in the Field column—varchar—and rename it int.

  6. Double-click on the size and delete the number. YourSQL will then set the default int (short for integer) size for this field.MySQL uses a default integer size that is 11 bytes long, which is more than enough for our IDs.

  7. Click on the Auto Increment check box to set it. We want this field to automatically assign an incremental value. You will get an error message asking you to create an index. Click the Create Primary Key button.

  8. Deselect the Nullable check box. ID fields should never have a null value.

  9. Click on the Create Column button and create three new columns using the following values:

    • Column 2:

      • Field name— facility

      • Type— varchar

      • Length— 30

    • Column 3:

      • Field name— description

      • Type— text

    • Column 4:

      • Field name— imageURL

      • Type— tinytext

    When finished, your table should resemble Figure 8.2. Quit YourSQL.

    Figure 8.2. The table is created using YourSQL on the Macintosh.
Creating the Database Application in MySQL (PC Users)

Though the steps are the same as in the Mac, the interface is a bit a different on the PC. Before starting, make sure you have downloaded and installed MySQL and MySQL Control Center, which is the MySQL GUI. Both MySQL and the Control Center are available at http://www.mysql.com.

  1. To launch MySQL, open the MySQLAdmin file located in C:\mysql\bin. This will open the WinMySQLAdmin file. Though it looks mysterious, it really isn't. In fact, you really don't need to use it. Simply right-click on the interface where indicated and select Hide Me from the Context window. The window will close, and a small Traffic Light indicating MySQL is running will appear on your taskbar. Keep in mind that the first time you open the WinMySQLAdmin file, you will be asked for a username and password.

  2. Double-click the shortcut to the MySQL Control Center located on your desktop.

  3. When the Control Center opens, right-click the databases folder on the left side of the screen. Select New Database from the context menu. When the Create Database dialog box opens, enter oakbridge and click OK. The dialog box will close and the new database will appear under the databases folder.

  4. The first application to be created is the tour, which means you only need one table. Double-click the Oakbridge database icon. Three subheadings will appear: Databases, Server Administration, and User Administration. Expand the Databases heading and double-click on the Database icon. This creates a further subheading called Tables. Right-click on Tables and select New Table from the Context menu. This will open the Create Table dialog box.

  5. Click the Table Properties dialog box at the bottom of the dialog box to open the table properties. Click once in the table name area and enter the word facilities. (Our naming convention is to use plurals because the database is holding multiple records of the same category. We are storing more than one facility in this table).

  6. Click the Field Properties tab. We will change this predefined column to an ID field. Double-click in the text input box of the first field and enter facilityID. This field will be a primary key in our table. To make this into a primary key, click on the key button in the menu bar.

  7. Click and hold on the Data Type pop-down. A list of choices will appear. Scroll down to int and select it. The number in the length field at the bottom will disappear. The application will set the default int size for this field (in MySQL, the default integer size is 11 bytes long, which is more than enough for our IDs).

  8. Click the Auto Increment check box to set it. We want this field to automatically assign an incremental value. Uncheck the Allow Null checkbox. ID fields should never have a null value.

  9. Create three more fields using these values:

    • Field 2:

      • Field name— facility

      • Type— varchar

      • Length— 30

    • Field 3:

      • Field name— description

      • Type— text

    • Field 4:

      • Field name— imageURL

      • Type— tinytext

    When finished, your table should resemble Figure 8.3

    Figure 8.3. The Oakbridge table is constructed in MySQL.

    When you are finished, click the table's close box. When you are prompted to save the changes, click OK. This will return you to the Console Manager window. Click the table name, and your table will be visible as a part of the Oakbridge database (see Figure 8.4). Close the Console Manager. Don't quit the MySQLAdmin.exe file. Leave it running. Your clue that it is running is a traffic light icon in the system tray.

    Figure 8.4. The table just created is visible through the Console Manager window by selecting the facilities subheading.
    [ Team LiB ]


A ColdFusion MX Overview

As we have pointed out in earlier chapters, ColdFusion MX is the intermediary between the database and the dynamic web page. Still, for the average developer first approaching ColdFusion, it is quite an unfamiliar "application." We put the word "application" in quotation marks because, in actual fact, the entryway into ColdFusion is not through double-clicking an application icon. It is through a browser.

ColdFusion MX will run natively on Windows and various Unix servers, such as Solaris and HP-UX. It also runs on various J2EE platforms. Also, contrary to popular belief, ColdFusion MX does run on both a Macintosh and a PC. Though we discuss how ColdFusion MX can be installed to run on a Macintosh, a complete walkthrough will be supplied through the book's web site.

ColdFusion MX consists of two major components. They are the ColdFusion Markup Language (CFML) and the ColdFusion MX server software found on the Studio MX 2004 Install disc. Just be aware that the Studio includes a developer version of ColdFusion MX for local testing, not the "industrial strength" version offered by an ISP.

The ColdFusion Markup Language is a tag-based language, and if you are familiar with HTML, it won't be "foreign." ColdFusion tags are used to embed commands and functions into your Dreamweaver pages. In addition, CFML integrates quite nicely with other programming languages and components, such as Java servlets and classes.

CFML tags and functions can work alone and are usually mixed in with the other code on your page. These documents are sometimes referred to as ColdFusion templates—the extension is .cfm—and they can be created quite easily in Dreamweaver by opening a ColdFusion Template from the New Document menu.

The ColdFusion server works either as a standalone server on a PC or in conjunction with your web server. Any browser requests for .cfm documents are automatically handed over to the ColdFusion server, either by the web server or directly from the browser using a designated port. It then looks through the file for functions and tags and outputs the results in HTML directly or through the web server. This means the document can be understood and rendered on the user's screen through the open browser.

Note

Macromedia has updated ColdFusion MX. The current version is 6.1. If you own version 6, packaged with the MX Studio, you are entitled to a free upgrade. Details can be found at http://www.macromedia.com/software/coldfusion/.

Configuring ColdFusion MX

ColdFusion MX is a breeze to install. If you are using a PC, simply run the installer. ColdFusion MX can be installed as a standalone application (in which you would use port 8500 to test your apps) or as part of the web server. In this situation, you will be using either IIS (Internet Information Management Services) or Apache. Apache is an open source application and can be downloaded at http://www.apache.org/.

When ColdFusion MX is installed, you will be asked to define an Administrator password, as well as an RDS (Remote Development Server) password. For development purposes, we are using the same password for the admin and the RDS password. If you are using your machine as a development platform, using the same password for the ColdFusion MX Administrator and RDS is not a huge issue. Having done that, you are good to go.

Note

Never use your Admin password for development when you are online. Do that, and you are essentially offering any and all programmers free access to your ColdFusion MX server.

ColdFusion MX on a Mac? Why Not!

Using ColdFusion MX on a Macintosh is one of those things the ColdFusion MX development community can't quite comprehend. In fact, ColdFusion MX runs quite nicely if you are using Mac OS X Jaguar or Panther and have FreeBSD Unix utilizing Java 1.4.1. (FreeBSD is open source and can be downloaded from http://www.freebsd.org/.)

Mac OS X 10.2.x or greater supports standard J2EE servers, such as JRun 4 and Tomcat. ColdFusion MX runs over either of the above servers. In fact one of the authors—Jordan—has it configured to run over Tomcat.

Note

The authors were presenting at a recent conference, and one of the organizers casually mentioned in front of the attendees that ColdFusion simply doesn't run on a Macintosh. Jordan's response was, "Not so fast." He then opened his Macintosh in front of the attendees and launched ColdFusion on his Macintosh Portable. The audience response, to say the least, was a sharp intake of breath.

Why would you want to run ColdFusion MX over J2EE? The short answer is Java servlets and JSP modules can be called as if they are a part of ColdFusion. This provides you with increased flexibility for more powerful web applications that are well beyond the scope of this book.

To run ColdFusion MX on a Mac, you first need to install either one of the two mentioned JSP servers.

Note

ColdFusion MX was built to install over JRun. If you are new to developing web applications, you are best off using a developer version of JRun for your JSP. JRun also has all the necessary database drivers for hooking up to MySQL. However, if you decide to use Tomcat, carefully follow Macromedia's installation instructions outlined on their support site. In addition, if you use Tomcat, it is best to follow Apple's support instructions on their Developer web site (http://developer.apple.com) for installing and testing Tomcat. You will also need to add the MySQL JDBC drivers to Tomcat. For the proper JDBC drivers, you will have to check out http://jakarta.apache.org.

When you have installed your JSP server, you can proceed to install ColdFusion MX and supply the Admin and RDS passwords.

Following installation, you will be asked for an admin and an RDS password. For development purposes, we are using the same password.

Going Online with ColdFusion MX

Connecting ColdFusion MX to the Oakbridge database created earlier in the chapter is a relatively straightforward process. The first thing to do is to start up the ColdFusion MX application. If you are on a Macintosh and using ColdFusion MX over J2EE, ColdFusion MX will start automatically when your JSP server starts. To have ColdFusion MX manage the Oakbridge database, follow these steps:

  1. Launch your web browser and navigate to your ColdFusion MX Administrator page. This entry location will vary, depending upon which platform you are using. The Windows entry point is found in the Start menu (Start/All Programs/ Macromedia ColdFusion MX/Administrator). On the Mac, enter a URL similar to http://your-computer.local:8080/cfusion/ and you will be redirected to the administration area.

  2. Enter your Admin password and click the login button. If you entered the correct password, you will find yourself in the ColdFusion MX Administrator page.

  3. On the left side of the page is an area named Data and Services. Click on Data Sources. This will open the Data Sources page, which is where you add the Oakbridge database.

  4. In the Add New Data Source dialog box, enter Oakbridge in the Data Source Name text box. For our driver, select MySQL from the pop-down list. If your screen resembles Figure 8.5, click the Add button.

    Figure 8.5. The Data Source and the driver are identified in the ColdFusion MX Data Source page.

  5. From the Data Source window, you will be taken to the MySQL Data Source window. This is where you will enter the database information. Enter these values:

    • Database: oakbridge.

    • Server: localhost. (Don't change the port number—that is the default port used to connect to MySQL. If you did an easy installation of MySQL, the port number will not have changed.)

    • Password: For development purposes on your own machine, it will be okay to use your administrative username and password. However, if you are going to use your root password, ensure that you are not deploying any databases on that particular MySQL server. Otherwise, there is a high chance that your entire MySQL server could be hijacked through the Oakbridge database. Enter your username and password in the appropriate text boxes.

    • Description: This is optional (enter one for your own reference if you desire).

  6. If your Data Source window resembles Figure 8.6, click the Submit button. You will be returned to the Data Source page. If the status is OK, you have successfully connected your database, which will be indicated at the top of the page, and Oakbridge will be in the list of data sources at the bottom of the page. If your status is Error, you will need to retrace your steps. You can now quit ColdFusion MX.

    Figure 8.6. The Oakbridge database is identified as a data source in ColdFusion MX.
    [ Team LiB ]


Building a Simple Back-End

In the real world of dynamic web page development, one cannot simply download a database and edit it. Doing so could cause corruption of data or inoperability of either the database or the web application. Therefore, it is best to leave the database where it is and use ColdFusion MX to do the editing. This is sometimes known as the back-end.

In the case of the Oakbridge site, we will build a simple back-end for the tour area. To do this, you will only need the four basic database functions: add, search, update, and delete. What makes this so interesting is that there is no need for any sort of complex SQL code. It can easily be done with server behaviors. Here's how:

  1. If you have not created an Oakbridge directory within your ColdFusion MX directory or your web server, do so now. Your location will vary depending on your platform. If you are using J2EE, your cfusion directory is located within your webapps folder of your JSP server. If you are on a Macintosh, the folder is located in computer_name/Users/Libraryname/Sites. PC users would place the directory in C:\CFusionMX\wwwroot.

  2. Within the Oakbridge directory, create a subdirectory and name it Admin. This will be the final location of the back-end.

  3. Launch Dreamweaver MX 2004. If you have not created a site, do so now. The testing server should point to your Oakbridge directory within our server. Select RDS from the Access pop-down of the Remote Info Category. If the testing server is your local machine, select Local/Network from the Access pop-down. The Testing Server Folder area should show the path to the Oakbridge directory (see Figure 8.7). If it doesn't, click the Browse button and navigate to the folder. When finished, click OK to close the Site Definitions, and click the Done button to close the Manage Sites dialog box.

    Figure 8.7. Identify the testing server and the directory before you build the back-end in Dreamweaver.

Avoiding a ColdFusion MX "Gotcha"

If there is one aspect of defining a dynamic site through Dreamweaver that drives developers up a wall, across the ceiling, and down the other wall, it is the placement of the root directory for the dynamic site on the PC.

Though it is standard operating procedure to use the wwwroot folder in the InetPub folder of the PC for the site, this isn't the case with ColdFusion MX. The site's root folder must be placed in the wwwroot folder of the CFusion MX folder on the PC's hard drive. It doesn't go in the inetpub folder. Do that, and you will get an error from Dreamweaver telling you the URL isn't valid when you try to log in using an RDS password.

To avoid this "gotcha," always place the root folder for a site that utilizes ColdFusion MX in the ColdFusion MX wwwroot folder.

Another source of confusion is the URL prefix area of the Testing Server Category of the Define Site window. If you get this URL wrong, you are going to get the error message. The easiest way of addressing this issue is to click the Basic tab of the Site Definition dialog box that opens the Site Definition wizard.

The wizard walks you through the process in a non-technical manner. Here are the answers to the wizard screens used in this exercise:

Screen 1— Site name: Oakbridge.

Screen 2— Yes, I want to use a server technology. Which server: ColdFusion.

Screen 3— Edit and test locally (my testing server is on this computer). Where do you want to store your files: C:\CFusionMX\wwwroot\Oakbridge\.

Screen 4— What URL would you like to use to browse to the root of your site: This should be completed for you. The value for us was http://localhost:8500/oakbridge/. Click the test button to see if it is valid.

Screen 5— No, I don't want to use a remote server.

Screen 6— A summary of your answers.

Creating Pages to Display Your Data

With the site defined, you can start to build the page. This will require you to create a ColdFusion MX template. To create the template, follow these steps:

  1. Open a new Dreamweaver page. When the New Page dialog box opens, select Dynamic Page from the Categories listing. From the list in the Dynamic Page category, select ColdFusion (not ColdFusion Component). Click the Create button to close the dialog box.

  2. Save the file as listfacilities in your Admin folder. You don't have to add the .cfm extension to the file name. Dreamweaver will do this for you.

  3. If you have not yet entered your RDS login, click on the Server Behavior tab, click on the RDS login, and enter your password when the RDS password dialog box opens. If you created your data source earlier, your Oakbridge database will appear in the Database tab, along with any other database that ColdFusion MX may be connected to.

  4. Click on Server Behavior tab in the Application panel. Click + to add a new server behavior from the pop-down menu. Select Recordset (Query) from the list of choices in the pop-down menu. When the New Recordset dialog box opens, enter the following values:

    • Name: listfacilities

    • Data Source: oakbridge

    • Table: facilities

    • Columns: All

    • Filters: none

    • Sort: none

    If your Recordset dialog box resembles Figure 8.8, click OK.

    Figure 8.8. The Recordset is defined in Dreamweaver using the table from the MySQL database created earlier.

  5. Create a new table that is 2 columns wide by 2 rows high as shown in Figure 8.9. Don't worry about formatting. The top row is just for the heading. In this case, we can put something like "List of Facilities" as the heading and may even want to merge the columns in the top row into one column.

    Figure 8.9. A table is created on the page by selecting Insert Table from the Layout tools and using the settings shown in the dialog box.

  6. Select the Bindings tab in the Application menu and click Recordset (listfacilities) to select it. Click the + to open it and reveal the fields that will be bound to the web page.

  7. Click on the facility field in the Bindings tab and drag it to the lower-left table cell on the page. Drag the description to the lower-right table cell.

  8. Select the bottom row of cells. Click the Server Behavior tab and select Repeat Region from the pop-down menu. This will open the Repeat Region dialog box shown in Figure 8.10. Select listfacilities from the Recordset pop-down—the + sign—and select All Records. Click OK.

    Figure 8.10. The repeat regions are added to the table.

That's it for this section. Keep the page open, as we will use it in the next section.

Creating a Simple Data Entry Page

The next step in the process is to create a page for data entry. This page will gather the information and send it to the database. Here's how:

  1. Create a new dynamic page and save it as addfacility.cfm in the Admin folder.

  2. Select Insert, Form to add a form to the page. Name the form insertForm in the Property Inspector.

  3. Click once inside the form. Add a single line text field named facility, a multiline text field named description, a single line text field named imageURL, and a Submit button. Each item is available from the Insert, Form menu option. Click once in front of the Submit button and press Return/Enter. When finished, the form should resemble Figure 8.11.

    Figure 8.11. The table that will be used to pass values to the database is created.

  4. Select the Server Behaviors tab from the Application panel. Click the + and select Insert Record from the pop-down list of server behaviors. When the Insert Record dialog box opens, add the following values:

    • Form: select insertForm

    • Data Source: oakbridge

    • Insert Into Table: Facilities

    • After Inserting, Go To: listfacilities.cfm

    Click OK if your Insert Record dialog box resembles Figure 8.12.

    Figure 8.12. The data from the text fields is "hooked" into the database using the Insert Record Server behavior.

  5. Click the listFacilities.cfm tab at the top of the Dreamweaver document window. Click once at the bottom of the page and enter Add a facility? Select the text you just input, and in the Property Inspector, add a link to the addfacility.cfm page. You should test the page in a browser by selecting File, Preview in Browser or by pressing the F12 key.

Creating the Capability to Modify and Delete Your Entered Data

Being firm believers in letting the software do the work and not reinventing the wheel, adding the capability to modify or delete records from the database is easier than it sounds. In fact, it is similar to the last page created. The only difference is the addition of a hidden field to the form.

Creating the Edit Page

To get yourself started, ensure the addfacility.cfm page is open. To copy it, simply select File, Save As and rename the page editfacility.cfm.

Finally, open the Application panel and remove the Insert Record behavior from the addfacility page. This is accomplished by selecting the Insert Record server behavior on the Application panel and clicking the – sign. Having done that, follow these steps to create a page that lets you edit data:

  1. In the Application panel, click the + to add a new server behavior from the pop-down menu. When the menu opens, select Recordset (Query). When the Recordset dialog box opens, enter these values:

    • Name: listfacilities

    • Data Source: oakbridge

    • Table: facilities

    • Columns: All

    • Filters: facilityID = URL Parameter facilityID

    • Sort: none

  2. Having identified the Recordset being used in the table, you are going to get a bit more specific and tell Dreamweaver exactly what dynamic data goes where. This is done through the Property Inspector. Select the facility text box and click the lightning bolt beside the Init Value input box on the Property Inspector. This will open the Dynamic Data dialog box shown in Figure 8.13.

    Figure 8.13. The Dynamic Data dialog box identifies which fields in a form will utilize dynamic content.

  3. Open the recordset by clicking the + sign, select facility, and click OK. The dialog box closes and the field turns bluish.

  4. Select the Description field, click the lightning bolt, and select description. Click OK to close the Dynamic Data dialog box.

  5. Select the imageURL field, click the lightning bolt, and select imageURL. Click OK to close the Dynamic Data dialog box.

  6. Click once inside the form. Select Insert, Form, Hidden field. When the field anchor appears in the form, select it and name the hidden field facilityID in the Property Inspector.

  7. Select the hidden field, click the lightning bolt, and select facilityID. Click OK to close the Dynamic Data dialog box.

  8. Having changed the form with the addition of a hidden field, the recordset will have to be updated. Click the + in the Server Behaviors panel to open the Server behaviors. Select Update Record to open the Update Record dialog box.

  9. Enter these values, as shown in Figure 8.14, into the Update Record dialog box:

    • Data Source: oakbridge

    • Update Table: facilities

    • Value: FORM.facilityID

    • Submit As: Numeric (check Primary Key checkbox)

    • After Updating, Go To: listfacilities.cfm

    Figure 8.14. The Update Record dialog box allows users to modify a database by changing the information on the web page and clicking the submit button.

    Click OK.

  10. When the information hits the database, it is going to have to be changed elsewhere. Open the listfacilities.cfm page by either selecting File, Open, or if it is still open, by clicking the document's tab at the top of the Document window.

    Tip

    If you are like us and hate mousing through menus to open documents, the Document Tabs at the top of the Document window are a godsend. Use them.

  11. When the document opens, select the { listfacilities.facility} binding in the bottom left cell of the table, or click once on the Dynamic Text { listfacilities.facility} server behavior in the Application panel.

  12. The record will be linked to the editfacility.cfm page. To do this, click the folder beside the link area of the Property Inspector. When the Select File dialog box opens, click the Parameters button at the bottom of the dialog box to open the Parameters dialog box (see Figure 8.15).

    Figure 8.15. You can use the Link area of the Property Inspector not only to link documents, but also to link dynamic data to documents.

  13. Enter facilityID in the Name text box. Next, click the lightning bolt to open the Dynamic Data dialog box and select facilityID from the list. Click OK to return to the Parameters dialog box. Click OK to return to the Select File dialog box. Select the editfacility.cfm document and click OK.
Creating the Delete Page

This is quite similar to the edit page just created. In fact, you will be using a copy of the same form with the addition of a hidden field.

To get started, ensure the editfacility.cfm page is open. To copy it, simply select File, Save As and rename the page deletefacility.cfm. Finally, open the Application panel and remove the Update Record behavior from the deletefacility page by selecting the Update Record server behavior on the Application panel and clicking the – sign. Having done that, follow these steps to create a page that lets you delete data:

  1. From the server behaviors, select the Delete Record server behavior. When the Delete Record dialog box opens (see Figure 8.16), enter the following values:

    • Data Source: oakbridge. (Select this from the pop-down list.)

    • Table: facilities.

    • Primary Key Column: facilityID.

    • Numeric: Selected.

    • Primary Key Value: Form Variable (from the pop-down list) - facilityID.

    • After Deleting, Go To: listfacilities.cfm.

    Figure 8.16. Data can be deleted from records by using the Delete Record server behavior.

    Click OK to close the dialog box and return to your page.

  2. Open the listfacilities.cfm document and select the { listfacilities.description} binding.

  3. Click the Split Cell button on the Property Inspector to add another cell. When the Split Cell dialog box opens, simply click OK because the default values are acceptable for what we want to do. This will put an empty cell under the { listfacilities.description} cell.

  4. Click once inside the empty cell and enter the word Delete. You will use this word to link to the deletefacility.cfm page.

  5. Highlight the text you just entered and click the Link folder in the Property Inspector to open the Select File dialog box.

  6. Click the Parameters button, and when the parameters dialog box opens, enter these values:

    • Name: facilityID.

    • Value: Click on lightning bolt to open the parameters list.

    Select facilityID and click OK. Link to the listFacility.cfm page. Click OK.


Summary

This chapter has given you a taste of what the database team and the coders do on a regular basis.

We started the chapter with a discussion of how to build a database, the various databases available to you, and the platform advantages and constraints.

We talked about how Director MX, Flash MX 2004, and Dreamweaver MX 2004 can be used for dynamic pages and how to define data and present it quickly and efficiently in an environment that has an insatiable appetite for speed—the Internet. We explained how efficiency gains can be realized from such things as grouping related items together in one table of a database and how tables should not duplicate data.

From there, we showed you how to create the Oakbridge database using MySQL. We covered how to create that database on a Macintosh and a PC.

Having created the database, it will have to move through ColdFusion MX before it appears on your Dreamweaver page. We reviewed the features of the two elements that compose ColdFusion MX and how ColdFusion MX works on the Macintosh—yes, you read that correctly—and PC platforms.

We then explained how to connect the MySQL database to ColdFusion MX.

We concluded the chapter by demonstrating how to create a "back-end" in Dreamweaver MX 2004. This facility enables data to be added and deleted from the database using Dreamweaver's server behaviors. Though this is an area the user will never see, it is an integral component of the Content Management System.

In the next chapter, we move away from Dreamweaver MX 2004 and show you how Flash MX 2004 and ColdFusion MX are an unbeatable combination when there is a need for a dynamic Flash presentation.


Chapter 9. Flash Remoting

You know you are in trouble when the first paragraph of Macromedia's Flash Remoting manual describes Flash Remoting this way:

"Flash Remoting MX is an application gateway that provides a network communications channel between Flash applications and remote services. Remote services consist of application server technologies, such as JavaBean, Macromedia ColdFusion Component or page, ASP.NET page or web service. Service functions represent a reference to a specific remote service from ActionScript in a Flash movie." Say what?

This is precisely why many average developers approach Flash Remoting with a high degree of trepidation. It sounds interesting, but it is also so "techie." In reality, it isn't all that mysterious. Essentially, the technology gives you the ability to flow data into your Flash movie by using ColdFusion MX to pull the content from a database and place it in position in your Flash MX 2004 movie.

We are going to attempt to demystify the process for you by walking you through the technologies and the requirements for Flash Remoting. Then we are actually going to build a Flash Remoting application using ColdFusion MX.

Let's dig in.


What It Is

In many respects, building a dynamic Flash application is no different from building a similar application in Dreamweaver MX 2004. Both pull content from a database, both have to pull that content through ColdFusion, and both display the content in a browser. They differ in the way they communicate with the server and the browser. If the dynamic application is assembled in Dreamweaver, the information has to move through the HTTP Communication layer discussed in Chapter 5, "Planning the Look." Flash does it a bit differently. Remoting uses a technology called Action Message Format (AMF), which enables Flash to communicate directly with ColdFusion, thus bypassing the HTTP Communication Layer completely. This makes testing on your computer a breeze, and it is why dynamic Flash presentations are so fast.

Having established that the process is not unfamiliar, here are some of the advantages Flash Remoting offers you:

  • It works with all browsers.

  • The Flash Player is as close to being a universal standard as you can get in this business.

  • There are no plugins, apart from a current Flash Player, required.

  • The download times are quite fast compared to other technologies.

  • This technology can be deployed across devices such as cell phones, desktops, PDA's, and even gaming systems.

The Technology

The Flash Remoting Communication process is actually quite simple. All communication is done through AMF calls between Flash and ColdFusion, as shown in Figure 9.1. The Flash Remoting service, for want of a better description, "sits" on top of the ColdFusion MX server and sends requests to the ColdFusion MX Server and data from ColdFusion MX back to Flash MX 2004. This data can be in the form of strings (your last name is an example of this), numbers, lists (called arrays), objects, recordsets from databases, and a lot more. For all this to occur, you need to have the Flash Remoting Components installed on your computer. If you have ColdFusion installed, then they are already there. If not, point your browser to http://www.macromedia.com/software/flashremoting/downloads/components/ to download and install the latest versions of the Flash Remoting Components.

Figure 9.1. All data passes from Flash through the Flash Remoting Service, which passes information to ColdFusion MX or from ColdFusion MX back to the Flash movie on the user's computer.

The components consist of all the necessary ActionScript you need to get your Flash movie connected to ColdFusion in as painless a manner as possible. There is also a really neat tool—the NetConnection debugger—that enables you to watch and trace events on both your computer and the server.

The Technical Requirements

Obviously, you will need a few things to get yourself going with Flash Remoting. They are:

  • The Flash Remoting Components.

  • ColdFusion MX. If you have a Windows version of the Studio MX 2004, a copy of ColdFusion MX was included on the installation CD. If you haven't installed ColdFusion MX, now would be a good time to do so. If you don't have a Windows version of the Studio, all the Flash Remoting software is available as a trial download from http://www.macromedia.com. Click the download button on the menu and you will be taken to the download area.

  • Flash MX 2004.

  • A database. Microsoft Access and MySQL are the two most common.


Flash/ColdFusion

The process of creating a valid demonstration for our readers is always an interesting process. It doesn't involve appealing to a broad audience or skill levels. Instead, it really comes down to developing a couple of exercises that simply demonstrate what the technology does. This brings us to the "Marcus Factor."

A couple of years ago, one of the authors was compiling a list of Flash tutorial sites for his students. In the list was a site with the odd name of FlashGoddess (http://www.flashgoddess.com). One of the site's features was a forum moderated by an individual with the handle "Warangel." This was quite an intriguing name, but the answers given by the individual were delivered in a clear, concise manner that always reflected a huge degree of enthusiasm for the task at hand. Not only that, this individual had the talent of presenting very complex technologies in a manner that was both non-technical and thorough.

Two years ago, one of the authors had the pleasure of actually meeting "Warangel," whose name is Marcus J. Dickinson. About one year later, Marcus posted two tutorials to the FlashGoddess site with the most unlikely names of "Flash Remoting in Ten Minutes"and "Flash Remoting in OVER Ten Minutes."

In thinking about this chapter, the author kept coming back to "How would Marcus explain this?" Being a firm believer in not reinventing the wheel, he asked Marcus if he would let us use one of his tutorials in this book. What follows is an expanded version of his first one. In fact, the files for this chapter are the files from "Flash Remoting in Ten Minutes." Thanks, Marcus.

Flash Remoting in Ten Minutes

We'll let Marcus take over for a bit:

By now, you are looking at that heading and perhaps thinking to yourself, "Remoting in ten minutes? No way." Well, I say, "Yes, most definitely." Flash Remoting is Macromedia's tool for communicating Flash to a database. It is faster and more efficient than any previous method of database communication for Flash. It has many key features, which will make it a welcome asset in your arsenal of tools. Here are a few key features of the Flash Remoting MX:

  • The authoring tools are FREE.

  • The Server tools are enabled by default on a ColdFusion MX Server install.

  • You can preview from the player directly. No need for uploading to test.

There are, of course, many other great reasons to use Remoting, and that is the focus of this tutorial. We are going to create a slide show using nothing but Remoting in under ten minutes. You can download the source files for this tutorial from the book's site.

Now let's look at our checklist and make sure we are ready to go.

Remoting Checklist

Before you proceed, here are some questions to answer:

  • Do you have access to a server with Flash Remoting installed (localhost environment, CF Server, or Linux Server with Remoting installed)?

  • Do you have the Flash Remoting Components installed on your authoring machine?

  • Do you have MS Access, MySQL, or other database software installed on your authoring machine, and do you know how to use it?

Common Checklist Questions

You may have asked some or all of those questions, but what if you have even more questions? Here are some of those questions and their answers.

Q1: | I have read my checklist and am not sure on the first two points. How do I know if my web host or ISP supports Flash Remoting?
A1: | It is easy to tell if you have Remoting on your server. Simply type in the following: http://www.yourdomain.com/flashservices/gateway (www.yourdomain.com is actually your domain name.) If this page is blank, you have Remoting installed. If you receive an error, "page not found," you don't.
Q2: | I have checked, and my server does have Remoting. How do I know if I have it installed on my machine?
A2: | Did you download the necessary authoring components from this link? You can find them at http://www.macromedia.com/software/flashremoting/downloads/components/.
Q3: | I think I might have installed the Flash Remoting Components, but I can't remember. Is there a way for me to check if they are installed?
A3: | Of course there is. Open Flash and click Help in the menu at the top. Does it have an item called "Welcome to Flash Remoting?" If it does, you have the authoring components installed.

Thank you, Marcus.

Having reviewed your checklist, building a Flash Remoting application is a three-step process that focuses on each of the three elements of the application. They are:

  • Building the database.

  • Writing the code that links to ColdFusion MX.

  • Building the Flash MX 2004 movie.

In this exercise, we will be moving away from MySQL and showing how MS Access can be used.

Step 1: Building the Database

The first step in the process, building the database, offers you many options for testing and ensuring functionality. This way, you can be sure the data is correct, and you don't have to worry about the design or use of Flash in the project. One final point—if you do not have MS Access installed on your machine, a copy of the file, slideinfo, is included in your Chapter 9 Exercise folder.

  1. Open MS Access. A blank page opens that contains a New File panel.

  2. Select Blank Access database. You will be prompted to name your document; use slideinfo and choose its location. Save the database in an area that is far removed from the web server.

  3. When the file is saved, the Database (Access 2000 File format) dialog box will open. Select Design View to create the table for this application. Select tables in the Objects menu on the left side of the dialog box and Create Table in Design View on the right side.

    The table will contain two columns, imageID and imageTitle (see Figure 9.2). ImageID uses autoNumber as its data type and is the primary key (a primary key is set by right-clicking the field name—imageID—and selecting Primary Key from the Context Menu). imageTitle is a memo field data type, which enables you to add more words in the field than if you had chosen the text data type. Click the close box for the table, and when prompted to save the changes, name the table images.

    Figure 9.2. The database is constructed in Microsoft Access.

    Note

    A primary key in a database is a unique identifier for each record in the table that will help locate records faster when you need them. By setting the imageID field as a primary key, you are telling Access (or MySQL) that each record in the table is unique.

  4. When you save the table, you will be returned to the Database dialog box. Double-click the images file at the bottom of the dialog box to open the table. Click once in the first Image Title text input area and enter the text shown in Figure 9.3. When you enter the text, the number 1 will automatically appear in the imageID field. When your table resembles Figure 9.3, save the database and quit Access.

    Figure 9.3. The descriptive text for each image is entered into the imageTitle field.

Note

If you open your Chapter 9 folder, you will see an images folder. For this slideshow to work, you must have one image for each record in the database, or the slideshow will not work properly.

Step 2: Connecting the Database to ColdFusion MX

To link ColdFusion MX to the slideInfo database, follow these steps:

  1. Open the ColdFusion Administrator page and log in with your password. Select the Data Sources link in the Data & Services area to open the Add New Data Source window.

  2. Enter slideshow into the Data Source Name area and select Microsoft Access from the driver pop-down window. Click the Add button to go to the Data Source Details window.

  3. Click the Browse Server button and navigate to the folder containing the slideInfor.mdb file you just created, as shown in Figure 9.4. Click Apply to select the database.

    Figure 9.4. The path to the database file is identified for ColdFusion MX.

  4. You will be returned to the Data Source window and shown the path to the database in the database file text input box. Click Submit. The links will be created, and you will be returned to the Add Data Source window. Your new data source will appear at the bottom of the list in the Connected Data Sources area.

  5. You might want to apply a little security to the file by assigning an RDS (Remote Development Server) password that restricts access to ColdFusion MX servers by Dreamweaver MX 2004. Click RDS Password in the security list on the left side of the main ColdFusion MX Administrator page.

  6. When the RDS Password page opens, select Use an RDS Password for Dreamweaver MX 2004 or ColdFusion Studio.

  7. Enter your password into the New Password text input box and enter it again in the Confirm Password input box. Click Submit Changes. If there are no problems, quit ColdFusion MX.
Writing the Dreamweaver MX 2004 Code That Links to ColdFusion MX

The use of Flash MX 2004, Dreamweaver MX 2004, and ColdFusion MX is an unbeatable combination because Flash Remoting is designed to work seamlessly with ColdFusion. In addition, ColdFusion MX enables you to use ColdFusion MX Components, which were introduced with ColdFusion MX. Components move the developer away from the practice of writing custom tags to adapt to a variety of situations. Instead, components are a bit more structured, making the code easy to follow and troubleshoot if problems arise. Follow these steps to write the connecting code:

  1. Open Dreamweaver MX 2004. When it opens, select File, New to open the New Document dialog box. Select Dynamic Page in the Categories column and select ColdFusion Component from the choices in the Dynamic page column. A page with the following code will open:

    <cfcomponent>
      <cffunction name="myFunction" access="public" returntype="string">
            <cfargument name="myArgument" type="string" required="true">
            <cfset myResult="foo">
            <cfreturn myResult>
      </cffunction>
</cfcomponent>

  2. The code creates a ColdFusion Component, and in many respects, all you have to do is to change a few things around in the code. You don't have to rewrite it from scratch. Click once after the first line of the code and press Return. Enter the following line:

    <cfcomponent hint = "Populates a Flash array with image information">

    A hint is simply a comment that tells the other developers on the team the purpose of the argument or function that follows.

  3. Click once in front of the word "access" and press the Return key twice.

    Click once after "myFunction" and press Return. Repeat this for "public" and "string." By putting these on separate lines, they become much more accessible. Select the words "myFunction" and change them to slideProvider. Select "public" and change it to remote. Select string and change it to any. In the blank line, enter:

    hint = "retrieve the slide information."

    When finished, the code should look like this:

    <cfcomponent>
<cfcomponent hint = "Populates a Flash array with image information">
      <cffunction name="slideProvider"
      hint = "Retrieve the slide information"
      access="remote"
      returntype="any">

    The first advantage to using a component is that you can use functions. These functions can then be called directly from any external source. The function was given a name, slideprovider, and given remote access. Remote access is the key here. It enables any external object to call this function. Without it, you can do nothing. The value of "any" in the returnType will display any data type in the database.

  4. The next step is to tell the function what to do. This is accomplished through a query to the database. It will be named "retrieveSlides" (just a name), and you want to make sure it is run against the datasource you previously set up in ColdFusion, which was entitled "slideShow." Click once at the end of the > located at the end of the returnType line. Press the Return/Enter key and enter:

    <cfquery name = "retrieveSlides" datasource = "slideShow">

  5. Knowing the name of the query, where the query will be made, and what information is to be pulled out of the database are important. Press Return/Enter and add the following lines:

    SELECT * From images
</cfquery>

    In this instance, we just want to select all the images from the images table in our datasource.

  6. Having the data retrieved, you then return the values of the query to use them in your application. To do this, press the Return/Enter key and enter the following line of code:

    <cfreturn retrieveSlides>

  7. That's all the code you need. Your ColdFusion Component code should look like this:

    <cfcomponent>
<cfcomponent hint = "Populates a Flash array with image information">
      <cffunction name="slideProvider"
      hint = "Retrieve the slide information"
      access="remote"
      returntype="any">
            <cfquery name = "retrieveSlides" datasource = "slideShow">
            SELECT * From images
            </cfquery>
            <cfreturn retrieveSlides>
      </cffunction>
</cfcomponent>

  8. Save the file (see Figure 9.5) as slideEngine.cfc and quit Dreamweaver.

    Figure 9.5. The Dreamweaver page contains the ColdFusion Component code that drives the Flash Remoting application.

Step 3: Building the Flash MX 2004 Movie

Now the fun stuff starts. You have created the database and written the code to "hook" the database into ColdFusion through the HTTP Communication Layer. The time has arrived to create the Flash movie that takes advantage of the work you have done.

Before you get started, create a file in your wwwroot folder named slideshow. Copy the images folder from your Chapter 9 Exercise folder, the database file, and the slideEngine.cfc file created earlier to this folder.

Now you can build the Flash movie that will play the slide show.

  1. Double-click the RemoteEx.fla document in your exercise folder to launch Flash MX 2004. All the code we need for Remoting, based on the web template from the previous version of Flash MX, is inserted for you.

  2. Select Window, Development Panels, Actions, or press the F9 key to open the ActionScript editor (see Figure 9.6).

    Figure 9.6. The ActionScript for the slide show is already in place.

  3. The first line of the code #include "NetServices.as" provides the link to the external ActionScript files that enable Flash Remoting. The second line of the code, #include "NetDebug.as", is necessary for development but needs to removed when the movie is produced.

    This is the debugging utility and is a godsend when the code doesn't do what it is supposed to do. Leaving the debugger enabled when you produce the .swf file is actually quite dangerous. If the debugger is available at run time, the server is extremely vulnerable to an attack. We'll show you how to deal with this before the .swf file is compiled.

    Now that Flash knows where to go to enable Remoting, you have to initialize the connection. This is where Flash tries to connect to the ColdFusion Component created earlier. The best way of doing this is to define the component as a "service" to Flash. By making it a service, you can simply pass information to it at any time. Change the code indicated in bold type, starting with if (inited == null) { in the ActionScript Editor to:

    if (inited == null) {

inited = true;

NetServices.setDefaultGatewayUrl("http://localhost:8500/flashservices/gateway");

gateway_conn = NetServices.createGatewayConnection();

myService = gateway_conn.getService("slideshow.slideEngine", this);

myService.slideProvider();

}

    Note

    The following line of code is a bit deceiving:

    NetServices.setDefaultGatewayUrl("http://localhost:8500/flashservices/gateway");

    Flash will add a port number—8500—when you create the file. You only need to include the port number if you are using a standalone ColdFusion Server and nothing else. If you are using IIS or Apache server, the line would be:

    NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");

    Let's dissect the above code. This code will only run once, when we first run the app, which is why "inited" will equal null.

    The first line sets inited to true, so this condition will never run again. It then establishes your "gateway" as localhost, as we are testing locally. You will most likely have a ColdFusion Server running locally, so this will work. Flash Remoting is powered on the server end, so this gateway is successfully created.

    Next, it looks at the slideEngine.cfc page as a service. The project folder is called slideshow and exists in your wwwroot folder. This is very important.

    The getService line above says "slideshow.slideEngine." It is looking in a path structure starting with the folder slideshow for a CFC called slideEngine. Make sure your structure is the same, or you will get errors in Flash. The last line runs a function located externally, called slideProvider, which as you will remember from step 2 is the name of our function inside of the CFC.

    Thus, you have told Flash to create a connection and then run an external function called slideProvider. The great thing about Flash Remoting is that it will automatically return a result object to you in Flash. This object can then be directly manipulated.

  4. The other great thing about Flash Remoting is that you can create your own function to directly manipulate data after it is received. You do this by creating a "whateverTheServiceWas_Result" function.

    In the case of the Flash movie, you will create a function called "slideProvider_Result," which will pass all the results of the slideProvider ColdFusion function quickly into Flash.

    Click once after the "} " below the "myservice" line and enter:

    function slideProvider_Result(result) {

  5. Having defined the function, you have to now tell it what to do. It will be made to load an image directly into a movie clip named imageHolder. This ensures that something appears on the screen while the user waits for the setInterval action to fire for the first time. Press the Return/Enter key and enter the following line of code:

    imageHolder.loadMovie("images/image1.jpg");

  6. Press the Return/Enter key and enter the next line of code:

    notes.text = result.items[0].imageTitle;

    You want the descriptive text from your database to show under the photo, which is exactly what that line of code does.

  7. You then set up the values for the setInterval to rotate the slides. Press the Return/Enter key and enter the following code:

    thisImage = setInterval(showImage, 7000, i=1);
function showImage() {
imageHolder.loadMovie("images/image"+result.items[i].imageID+".jpg");
notes.text = result.items[i].imageTitle;
if (i<result.items.length-1) {
i++;
} else {
i = 0;
}
}
}

  8. Having told Flash how often to change the pictures, you need to pull the text out of the database and have it appear on the screen. Press the Return/Enter key and enter the following code to create an onscreen text field:

    _root.createTextField("notes",2,20,320,100,20);

_root.notes.autoSize = true;

    The first line of the code uses the following syntax:

    movieClip.createTextField(instanceName, depth, x, y, width, height)

    The first bit creates an empty text field on the main timeline (_root). The stuff in the brackets tells Flash where the text goes ("Notes"), how many lines to show (depth), where the box is located on the stage (x,y), and how wide (100 pixels) and how high (20 pixels) to make the text box.

    The second line simply tells Flash to grow or expand the text box (autosize).

  9. Finally, you need to write the code that creates the image holder on the Flash stage for the images. Press the Return/Enter key and enter the following code:

    root.createEmptyMovieClip("imageHolder", 1);
imageHolder._x = imageHolder._y=20;

    This bit of code creates an empty movie clip on the stage. The values inside the brackets simply create an instance and the depth of the clip.

    The next line simply says to place the clip 20 pixels out and 20 pixels down from the top of the stage.

  10. Locate the second line of code. Click once in front of it and add //. It should read:

    //#include "netDebug.as"

    The symbol // tells Flash that this is a comment and should be ignored.

  11. Your final code should be:

    #include "NetServices.as"

//#include "netDebug.as"

if (inited == null) {

inited = true;

NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");

gateway_conn = NetServices.createGatewayConnection();

myService = gateway_conn.getService("slideshow.slideEngine", this);

myService.slideProvider();

}

function slideProvider_Result(result) {
imageHolder.loadMovie("images/image1.jpg");
notes.text = result.items[0].imageTitle;
thisImage = setInterval(showImage, 7000, i=1);
function showImage() {
imageHolder.loadMovie("images/image"+result.items[i].imageID+".jpg");
notes.text = result.items[i].imageTitle;
if (i<result.items.length-1) {
i++;
} else {
i = 0;
}
}
}
_root.createTextField("notes",2,20,320,100,20);
_root.notes.autoSize = true;
_root.createEmptyMovieClip("imageHolder", 1);
imageHolder._x = imageHolder._y=20;
Testing and Finishing

The Flash movie is designed to be self-contained. By that, we mean everything is driven by code. Many developers new to this technique find themselves in extremely unfamiliar territory. Essentially, the movie is nothing more than a blank stage.

  1. Save the movie to the your slideshow folder located in the wwwroot folder on your hard drive.

  2. Now that the movie has been saved, it can be tested. Select Control, Test Movie. You can also get the same result by pressing Control+Enter (PC) or Command+Enter (Mac). The images and the text appear on the screen.

  3. Stop the movie and select File, Publish. (Shift-F12). This will create the final .swf file for the movie.


Summary

This chapter has delved into the "mysteries" of Flash Remoting. To the average Flash 2004 user, this process can be intimidating and technical.

We started off by explaining that Flash Remoting is simply the process of feeding content into a Flash movie through ColdFusion MX. We also pointed out a number of serious advantages you gain from utilizing this technology.

The technology was explored and explained. We told you what applications you need to get into Flash Remoting.

Marcus J. Dickinson, a Flash Remoting expert, then walked you though the key features of Flash Remoting, gave you a checklist to follow, and even answered a few Flash Remoting questions.

The application to be built is a slideshow. We showed you how to build the MS Access database and how to connect that database to ColdFusion MX. From there, it was off to Dreamweaver MX 2004 to create the ColdFusion MX Component (CFC) that will be used by Flash MX 2004 to "hook into" ColdFusion MX.

The final step of the process was creating the Flash movie. We took a slightly different tack and didn't create a movie with lots of content on the stage. Instead, we carefully walked through the ActionScript necessary to create a code-driven slide show.

As you have seen, Flash Remoting is a fascinating technology that will become more and more important over time. Try it. Play with it. Experiment. This way, you will discover more exciting uses than simple "Hello World" screens and slide shows.

Next up, we pull together the tour of the Oakbridge Community Centre. We will be showing you how some of the design decisions were reached, a couple of new Fireworks and Freehand techniques, and how to build an entire dynamic page driven by many of Dreamweaver MX 2004's new Cascading Style Sheet features.


Chapter 10. Assembling the Tour

To get to the assembly point—creating this section of the Oakbridge Community Center site—there was a lot of planning and paper involved. While all that was occurring, there were also a number of creative decisions being made. This section will review two of them. The first involves the creation of the Oakbridge Community Center logo. It was a typographic treatment, and one of the authors, Chris Flick, will review the rationale behind the font choices. Though we reviewed the creation logo in Chapter 6, "Creating the Tour Assets," we never explained why the fonts were chosen.

The second decision is moving from linears to comps. In Chapter 5, "Planning the Look," we showed a couple of techniques for using linears but never really explained how the process of moving from linear to comp works. Again, Chris will walk you through his thought process.

Having gotten those two issues off the agenda, we will spend the rest of the chapter reviewing how to assemble the dynamic tour.


Choosing Fonts

As one of the authors is fond of saying, "Letting a newbie loose in a font menu is like giving a crazy person a gun." In many respects, the font chosen will actually set the "tone" for the entire site. What follows is Chris' rationale behind his font choices:

Let me first begin by saying that this is not intended to be a lesson in graphic design. By nature, I'm an intuitive designer, and that intuition has been cultivated through a combination of many years of graphic design study and work experience. As such, the way I work is a method that meets my needs and may not be the case for you.

Asking a designer why he or she decided to use a particular font (or in the case of the Oakbridge Community Center logo, a combination of fonts) is very much akin to asking why a painter decides to use "Kelly Green" instead of "Forest Green." Why does a designer ultimately decide to use a serif font instead of a sans serif font? Why Aachen Bold instead of Helvetica Black? These are aesthetic decisions.

Very early in my graphic design schooling, I had a professor that preached that every font has a unique characteristic, and it is the job of the designer to decide if that font's characteristic fits their particular design. In essence, the characteristics of a font will determine how appropriate it is for the design at hand.

To understand how this theory works, let's take a look at wedding invitations. As a rule of thumb, wedding invitations are normally elegant and classy. Therefore, a cursive or calligraphy-type font would be a wise choice to convey those sentiments. A font that is thick, boldfaced, and heavy such as an Aachen Bold typeface would not be a wise choice. Likewise, a stock car racing program should not be designed with the same cursive, elegant font that wedding invitations use because that font would seem too fragile and wouldn't match the nature of the sport. In this instance, Aachen Bold would be a perfect choice, as its characteristics scream "toughness," and its thick, heavy, bold, macho characteristics match that particular sport. Find the characteristic of the font and match it to your project.

That's what I tried to do with the Oakbridge Community Center masthead. At the start of the process, we decided the community center was going to be family friendly. I then chose the characteristics I thought the OCC font should have.

The first decision was to use a serif font. This would convey a sense of class and responsibility and would make it appealing to parents, young adults, and possibly senior citizens.

Although the center would be populated by kids, I purposely tried to stay away from using a font that might look "cool" or "hip" such as a hand-written or graffiti-looking font. Although I'm sure the neighborhood kids might enjoy it, it could also present the wrong type of message and possibly attract the wrong type of crowd.

Figure 10.1 shows you a good example of this. Using Eras Ultra ITC (the middle treatment) and Comic Sans at the bottom, you can easily see how the "message" changes.

Figure 10.1. The choice of font has a dramatic impact on the message.

As such, the serif font needed to be bold but not heavy. Because some serif fonts have very, very thin stems, those stems can sometimes get destroyed when trying to make them into web graphics, so I needed something bold but not too heavy.

Ultimately, I chose to go with a font called AzoteSSi. This font seemed to have all the characteristics I was looking for, and it was perfect for the "Oakbridge Community" portion of the logo.

With regards to the word "The," I found using the AzoteSSi font didn't seem to add enough contrast. Instead, I needed to choose a different font, but one that still seemed to convey friendliness. Finally, TangoScriptSSi seemed to be the perfect fit, and properly scaled, it fit absolutely perfectly inside the letter "O."

The word "Center" was always going to be a part of the navigation bar. As such, it was very easy to compose the word and place it as far to the right as possible. In this case, that meant placing it tightly against the stem of the "Y" in the word "Community."

And a logo was born!


Designing the Look for the Applications

Though the bulk of this book contains a lot of code and technology, we can't overlook the fact that the pages have to be well-designed, functional, and usable. Not only that, they have to meet the needs of the coder. We'll let Chris take over and reinforce this important point:

One of the best parts about working on this second book is that it has given Jordan and I a chance to improve—and understand—how each of us works. The first time around, we didn't have a "working relationship," and it took some time to understand what an artist needs and what a programmer needs. I tried to draw on that experience and knowledge as I was sitting down and thinking about the designs of the various rooms that were going to be "dynamically driven" for the Oakbridge Community Center web site. As I go through the design process of the three rooms below, I will point out why that previous knowledge was so important and helpful.

For the booking room (see Figure 10.2), I started off by viewing that section as an "e-commerce-type page" and went from there.

Figure 10.2. The original sketch for the booking facility reflects Chris' design objective.

The chat room and the tour guides presented unique challenges, as I have never had an opportunity (or reason) to create such facilities in the past. I immediately decided that I would try to keep things as simple as they possibly could be for these two sections. For the chat room, I wasn't as concerned with how it looked as much as how it functioned. I specifically wanted to stay with a simple layout by using lots of squares and no rounded corners or borders.

Jord and I learned how difficult it is to put a shopping cart together that utilizes a layout with rounded corners, so those went out the window. Plus, throughout this whole process, I was also trying to make this layout easy to re-create through the use of as much CSS as possible. Finally, because the OCC masthead is brightly colored and, to an extent, visually complicated, I didn't want a situation where the chat room was so colorful and decorative that it competed with the OCC masthead. Therefore, I tried to use a lot of negative space to keep the chat room "open" and "spacious," as you can see in my sketch in Figure 10.3.

Figure 10.3. "Open" and "spacious" drove the initial design of the chat room.

After the chat room was finished, I knew I could draw on its theme of simplicity to create the tour room. You'll notice that both sections have a "sign up" and "password" page. I'm not sure if this is necessary—Jord would be the judge of that—but it seemed logical to me that one would first have to sign up before using these features of the site. This is one cool aspect about working with a programmer. Because I'm not wholly intimate with databases, I'm not sure how the final product will turn out. Jord may take my idea(s), look at them, and think of an entirely better (and cooler) way to get these pages to work than what I have envisioned here. But this is all a part of working with a team as opposed to just working by yourself. Ideas can come from anywhere.

For example, I thought it would be interesting to have a QuickTime movie play whenever someone clicked on a particular section of the Oakbridge tour or possibly have a Flash streaming video file start playing. Also, in all our planning, we all seemed to overlook what happens after someone comes to the tour site. Again, it seemed logical that after viewing one of these interactive tours, wouldn't people want to try to book that particular facility (because we HAVE a booking section)? So I threw in the "Yes, I would" and the "No, I would not" buttons as part of the design shown in Figure 10.4.

Figure 10.4. When thinking about the design, Chris wondered what happens after the person completes the tour. The "Yes" button was his answer.

Still, even though I thought the first design was suitable for our purposes, I wanted to give Jord another possibility to draw from. What if people didn't want to wait for all those photographs to download (although they're extremely small)? What if we could make a text-based version of my first design? So I went about creating a page where someone clicks on a text link to the left and the streaming or QuickTime movie appears with the capability to book or not to book. Again, it was going to be interesting to see how Jord would decide to incorporate my ideas.

For the booking room, I knew Jord had previously designed an all-CSS calendar/planner, so I decided to see if we could manipulate that into an interactive booking facility. My plans are that someone selects a particular part of the OCC facility by clicking a radio button on the left. Immediately, when they do, a photo of their selection appears below the list (in this case, the ice skating rink), and then on the right, a week-long calendar pops up, displaying all the times for the ice rink and which hours the ice rink is booked.

This is the fun (and easy part) of creating web sites. You're only limited by what your imagination can conjure up. But the hard part comes into play when it's time to take all that imagination and creativity, throw it all together, and actually make it work! Fortunately, that's what programmers do best.


Assembling the Dreamweaver MX 2004 Pages

After the designs are approved, the really hard work starts—actually creating the assets and designing the dynamic pages. This section focuses on that task.

The site is designed to be easily manageable. This means there will be extensive use of the Cascading Style Sheets (CSS) Chris mentioned earlier and the development of the templates that reflect Chris's design vision and accommodate the needs of the technical crew. It is a balancing act.

You got a hint of that when Chris mentioned the use of square boxes as opposed to the use of rounded corners. Square boxes can be created using code. Rounded boxes are a lot more difficult. Thus, there are tradeoffs between the design aesthetic and the harsh reality of code.

Constructing the Templates

In Chapter 7, "The Elements of the Dynamic Page," we covered the basics of building templates and the use of CSS in Dreamweaver MX 2004. In approaching the design of the templates for the Oakbridge Community Center site, we decided to focus on a design that takes full advantage of CSS.

The thing about CSS is that it isn't just for formatting the text on a page. You got a hint of that when you did the "pseudo-classes" in Chapter 7. In this design, the placement and function of each element on the page is managed through Cascading Style Sheets. To do this, you must first concentrate on the layout of the page.

If you haven't already done so, download the Chapter 10 exercise files from the book's web site to your desktop.

  1. Open the Community_Ctr_Comp.png file found in the Ch10Ex folder. When Fireworks MX 2004 opens, the first thing you will notice about the image is that we have sliced the banner at the top of the page and the side menu on the left side of the page. If you open your Web Layer, you will see these two slices.

  2. The first thing to do is to Optimize the image for fast web download. There are two ways of doing this:

    Use the Optimize panel. This is done by opening the Optimize panel. If the Optimize panel is not included in your panel grouping, select Window, Optimize or press the F6 key to open the Optimize Panel.

    For this exercise, we will use the Property Inspector to set the optimization.

  3. Set the optimization value in the Property Inspector to JPG—Better Quality.

    Tip

    You can only use the Property Inspector to optimize sliced images. If you need to optimize an unsliced image, use the Optimize panel.

  4. Hide the side menu text and other non-essential elements in the side menu that will get in our way. Do this by clicking the visibility icon (it looks like an eyeball) beside the object's name in the Background layer. We will bring them back later when we use this file to trace our layout. When finished, your page should resemble that shown in Figure 10.5.

    Figure 10.5. The page has been optimized, "non-essential" items have been hidden, and slices have been added.

  5. With the two slices selected, select File, Export (Control-Shift-R for PC users or Command-Shift-R for Mac users). This will open the Export dialog box. Using the Export dialog box, navigate to the site's graphics folder and open it. Name the file and select Images Only from the Save As Type pop-down menu. Select Export Slices from the Slices pop-down menu and deselect Include Areas Without Slices. You only want the two slices, which is why you deselected Include Areas Without Slices. Click Save.

    The reason for the banner and the blank slice on the left is the Top banner will be used in the template and the Side menu background will go down the length of a web page and be used as a background pattern using CSS.

  6. Turn on the visibility of the elements hidden in Step 4. They will be used as a tracing image later on in the Exercise. Save your graphic and exit Fireworks.
Assembling the Template in Dreamweaver MX 2004

This section of the exercise uses several advanced features of CSS to drive the page including tracing images and the new Page Properties dialog. To get started, launch Dreamweaver MX 2004 and ensure you are working on your site. To assemble the Oakbridge Community Center template, follow these steps:

  1. Open the Assets panel and click the Assets tab. To create the template, click the Templates button. The Assets panel will change to show Templates. Obviously, this area is blank.

  2. Click the New Template icon button at the bottom of the Assets panel. A template named Untitled will appear in the Assets panel. Select the template name in the Assets panel and change its name to main. Double-click the template icon in the Assets panel to open the template.

  3. Press Command-J (Mac) or Control-J (PC) to open the Page Properties dialog box. You can also access the Page properties by selecting Modify, Page Properties. There is a list of properties on the left side of the dialog box. Select Appearance.

    Note

    If you are a regular user of Page Properties, this release of Dreamweaver features a seriously improved Page Properties dialog box. This dialog box has been expanded to include extra features such as the capability to change the fonts used for links and headings. Also, by breaking the Page Properties into sections—General, Appearance, Links, Headings, and Tracing Image—this dialog box has become less intimidating and cumbersome.

  4. By selecting Appearance, the Page Properties change to the Appearance properties. We won't be changing much here. In the margins sections at the bottom of the dialog box, enter 0 in the left and top values and leave the default measurement in the pop-up menu as pixels (leave the bottom and right entries blank). This sets the body margins of the page in such a way that we can position the tracing image at the very top-left corner.

  5. Click on the Tracing Image property. When the Tracing Image Properties appear, click the Browse button to open the Select Image Source dialog box button to bring up File Selector box. Navigate to the Community_Ctr_Comp.png image in your Chapter 10 Exercise folder and select the image. A thumbnail of the selected image will appear in the right side of the dialog box. Click Choose. The dialog box will close, and you will be returned to the Tracing Image properties.

  6. Set the Opacity slider to a value of your choosing. Our preference is around 50%, as shown in Figure 10.6. The image is just faint enough that we can see it without it obscuring our design efforts. Click OK to close the dialog box.

    Figure 10.6. The tracing image and its opacity are determined in the Tracing Image area of the Page Properties dialog box.

    Tracing Paper for the Web

    It isn't only Freehand MX that enables you to "trace" a drawing. As you saw in this section of the exercise, Dreamweaver MX 2004 offers you the opportunity to build your pages in Fireworks or even draw and scan the linears and then build the page right over the drawing. The formats that are allowed for a tracing image are the standard bitmaps acceptable to Dreamweaver: GIF, JPG, or PNG.

    The whole idea of tracing is to place the image behind the page and use the image as a guide for the placement of content, tables, or layers. The opacity setting makes the underlying image less obtrusive. The lower the opacity, the more the page looks like you have placed a piece of tracing paper over it.

    With the tracing image in place, you can start placing the content. This process starts at the top of the page with the banner.

  7. Click on the image icon in the Common toolbar. When the Select Image Source dialog box appears, locate the topbanner.jpg file in your images folder and double-click it. The image should appear at the top-left corner as expected.

    Tip

    There is a faster way of placing the topbanner image. Click the Assets tab in the Assets panel and click on the image icon to open your list of images. Locate the topbanner.jpg file and drag it onto the template or select it and click the Insert button at the bottom of the Assets panel.

  8. Click on the layout tools icon in the Insert panel to get the drop-down menu. Select Draw Layer. When the cursor changes to a crosshair, draw a layer over the text area of the left panel menu area (this is the menu's location). Name the layer leftSide in the Property Inspector (see Figure 10.7).

    Figure 10.7. Draw Layers are added through the Insert panel and named in the Dreamweaver MX 2004 Property Inspector.

  9. Draw another layer over the content area in the middle. Name it contentArea. Draw a layer over the right side survey area. Name it rightSide. Don't worry about size; we will tweak these layers using CSS.

  10. Select the leftSide layer. Start typing in the text in the Tracing image. Leave the font as Default font in the Property Inspector. This will be changed using CSS.

  11. Select the contentArea layer and select Insert, Template objects, Editable Region to create an editable region in our contentArea layer. When the New Editable Region dialog box opens, enter content in the Name area. Click OK.

  12. Select the rightSide layer. If you examine the Tracing Image, you see that area of the page contains two forms—one for the email subscription and the other for the survey. For now, we will not have any URLs for them to link to. They are there, for the moment, as placeholders.

    Select Forms from the Insert panel's pop-down menu and click the Form button. The form will appear on the page as a thin red box. Select the form and name it subscribe in the Property Inspector. This will provide it with a name and an ID named "subscribe."

    Note

    To easily "tweak" the form using CSS, we need to make sure the form tag also has an ID. With the form still selected, look at the bottom-left corner of your document window; you should see, in the chain of tags, the following tag: <form#subscribe>. This will indicate that the form has an ID. If it simply says <form>, you will have to go into Code & Design view (View, Code and Design) and enter ID="subscribe" by hand.

  13. Type in the text and add the appropriate form elements within the form. Don't worry about formatting, and don't worry if it doesn't line up. CSS will take care of all of this. Add another form within the layer and name it survey. Type in the text and add the appropriate form elements within the form. For accessibility access, we have included <LABEL> tags around the radio button form elements. It will also make it easier to format with CSS.

Note

Accessibility is the major issue in web site design. When you add the radio buttons in the last step, you should see the dialog box shown in Figure 10.8. If it does not appear, delete the button, open the Dreamweaver MX 2004 preferences, and select Accessibility in the Category list. When the accessibility options open, select all of them and close the Preferences window.

Figure 10.8. If the Accessibility options are selected in the Dreamweaver Preferences, any time a button is added to a form, you will see the Image Tag Accessibility Attributes dialog box open.

Choosing Label in the preferences and putting the Label tag into the template's HTML adds a visual label to the button.

Building CSS in Dreamweaver MX 2004

In Chapter 7, we quickly reviewed the use of CSS in Dreamweaver MX 2004 and some of the new features introduced to Dreamweaver's capability to create Cascading Style Sheets. This exercise really digs into CSS in Dreamweaver and shows you how CSS can be used to format a page, not just text. It also shows you how a CSS style sheet can be applied to a dynamic page.

  1. If it isn't already open, open the Dreamweaver template created in the previous exercise. When it opens, select the CSS Styles panel. If the CSS Styles panel isn't visible, press Shift-F11.

  2. Click the New CSS Style button at the bottom of the panel to open the New CSS Style dialog box. When it opens, enter P in the tag area, select Redefine HTML tag, and select New Style Sheet to create a new external style sheet. Click OK. When the Save Style Sheet File As: dialog box appears, name the file styles.css and click Save.

  3. The next dialog box to open is the Styles Definition dialog box. Click on Font and select Arial, Helvetica, sans-serif with a pixel size of 11px. Click OK to close the dialog box and save the changes. Save your template.

  4. You are now going to make some changes directly to the style sheet just created. The neat thing about CSS in Dreamweaver MX 2004 is how quickly you can access a CSS sheet and make changes directly to it. Select File, Open and locate the styles.css file and click Open.

    Tip

    An even quicker way of opening a CSS document is to double-click on the document in the CSS Styles panel.

  5. Open the template and switch to View, Code & Design view. If there is any CSS code that may have been generated by Dreamweaver Page Properties (body and so on), cut it from the document and paste it into the styles.css style sheet.

    Tip

    It is best for all styles applied to a page to be in one location for easy manageability. All styles in the layers should be copied over to the style sheet so that you can work with it further.

  6. Return to the styles.css document. In the style sheet, enter:

    #leftSide { }

  7. As we point out in the tip, it is best to have all styles in one place. In the case of this project, the styles will be located in the styles.css document. To move a style from the template to the style sheet, return to your template and click on the leftSide layer. If you are in Design and Code view, you will automatically be taken to the code for the selected Draw Layer. To the right of the div tag is a style tag. Select the style right to the z-index value and select Edit, Cut.

  8. Open the styles.css document. Click once after the first curly brace—{—and press the Return/Enter key. Your cursor will now be on an empty code line. Paste the text on the Clipboard into that empty line.

  9. Click once after the semicolon for each style and press the Return/Enter key. This puts each style entry on its own line for easier reading. The value for the z-index should end with a semicolon.

  10. Repeat steps 6 to 9 for the contentArea Draw Layer and the rightSide Draw Layer. When finished, the code in the styles.css document should resemble that shown in Figure 10.9.

    Figure 10.9. The CSS code uses the styles of each of the Draw Layers.

  11. Open the CSS panel and create a new style by clicking the new style icon. Select Make Custom Style and select styles.css as the style sheet. Enter .formElement for the class name and click OK.

  12. In the Styles Definition dialog box, select Box from the category list. When the Box area opens, click once inside the width text input box and enter 95. Select % from the measurement pop-down.

  13. Select the Type category. When it opens, use these values:

    • Font: Arial, Helvetica, sans-serif

    • Size: 10 pixels

    • Weight: Bold

    Click OK to close the CSS Styles dialog box.

  14. Open the template and select the first textbox form element. In the Property Inspector, click on the class pop-up menu and select formElement. Apply this step to the other text input box.

  15. In the rightSide layer, find the lines that say "JOIN OUR COMMUNITY" and "TODAY'S SURVEY," and in the Property Inspector, select Heading 1 from the Format pop-down. Obviously, the text is too large.

  16. Create a new style in styles.css. Select Use CSS Selector and name the new style #subscribe h1.

  17. When the CSS Styles dialog box opens, use these settings:

    • Type Category:

      • Font: Arial, Helvetica, sans-serif

      • Size: 11px

      • Weight: Bold

      • Color: #FFFFFF

    • Background Category:

      • Background Color: #006666

    • Box category:

      • Padding: 4 pixels

    • Block Category:

      • Text Align: Center

    Click OK.

  18. Create a new style in styles.css. Select Use CSS Selector and name the new style #survey h1.

  19. When the CSS Styles dialog box opens, use these settings:

    • Type Category:

      • Font: Arial, Helvetica, sans-serif

      • Size: 12px

      • Weight: Bold

      • Color: #000099

    • Background Category:

      • Background Color: #7EAAFF

    • Box Category:

      • Padding: 4 pixels

    • Block Category:

      • Text Align: Center

    Click OK.

  20. Create a new style in styles.css. Select Use CSS Selector and name the new style #subscribe p.

  21. When the CSS Styles dialog box opens, use these settings:

    • Type Category:

      • Weight: Bold

    • Background Category:

      • Background Color: #006666

    • Box Category:

      • Deselect "For All"

      • Left: 8 pixels

      • Right: 8 pixels

    • Block Category:

      • Text Align: Center

    Click OK.

  22. Create a new style in styles.css. Select Use CSS Selector and name the new style #survey p.

  23. When the CSS Styles dialog box opens, use these settings:

    • Box Category:

      • Deselect "For All"

    • Left: 8 pixels

    • Right: 8 pixels

    Click OK.

  24. Create a new style in styles.css. Select Use CSS Selector and name the new style #survey.

  25. When the CSS Styles dialog box opens, use these settings:

    • Border Category:

      • Style: Solid

      • Width: 1 pixel

      • Color: #7EAAFF

    Click OK.

  26. Create a new style in styles.css. Select Use CSS Selector and name the new style #subscribe.

  27. When the CSS Styles dialog box opens, use these settings:

    • Border Category:

      • Style: Solid

      • Width: 1 pixel

      • Color: #006666

    Click OK.

  28. New to Dreamweaver MX 2004 is the Tag Inspector, which allows you to edit CSS Styles without navigating to the CSS Editor or to the Style Sheet itself. Open the Tag Inspector by opening the Code panel and selecting the Tag tab. If it isn't there, press the F9 key or select Window, Tag Inspector. Click the CSS Properties tab. The window that opens (see Figure 10.10) will show you all of the properties associated with the selected CSS Style. The two buttons under the tab will show the properties either grouped by Category or in a list. Click the list button; it looks like a fraction ( [image]) with an arrow beside it. Select the #contentArea style in the CSS Styles panel, and the list view will change to show you all of the properties associated with the selected Style. Click once in the border text area of the list and enter 1px. Add a black border to the tag by selecting the color chips beside the border entries and selecting Black from the Color Chips. You can also ignore the Color Chips and enter #000000 into the text entry area of the style to be changed.

    Figure 10.10. CSS Properties can also be set or changed using the Selection panel.

  29. If you have a body style definition, select it in the CSS panel. Click on the Edit Style button in CSS panel; otherwise, create a new body style. When the CSS Style Definitions panel opens, select the background Category.

    Click the Browse button beside background Image and locate and select sidemenu.jpg. Select repeat-y from the Repeat pop-down menu (Figure 10.11). Click OK.

    Figure 10.11. Even a background image and its placement can be controlled through CSS.

We're done for now. Notice the page looks rather similar to the template. You may want to tweak a few values here and there. Preview in browser for final checks. Next up is adding the areas for dynamic content.

Preparing a Template for Dynamic Content

With the template created and driven by CSS, it is now time to turn our attention to linking it to the database and getting the pictures to appear on the page. This way, we only need one page, according to the "Pancake Principle," which dictates that we should access the database and display our results as if there were many pages on the site. By using a server-side template, we keep the main design down to one page. By modifying the look of our template, we will also modify the server-side template.

To start this process, we are going to add a Template object to the page that is currently open.

A Template object is nothing more than a chunk of code that inserts one of the following into a template:

  • An Editable Region: This is the area within the editable region that can be changed.

  • An Optional Region: Content in an optional region may or may not be displayed, depending upon the conditions determined by the individual who designed the template.

  • A Repeating Region: This is an area where the content in a locked area can be repeated as many times as you want. These areas are great for tables.

  • An Editable Optional Region: This is an area of optional content that may or may not be modified in pages based upon this template.

  • Repeating Table: Insert this, and you add a table with repeating editable rows into the template.

These objects can be inserted from the Templates button on the Insert bar (see Figure 10.12). They also can be inserted directly into the code.

  1. With the Main.dwt document open, switch to the Code and Design view (View, Code and Design).

  2. We are going to add the Template object in a specific place in the code. Rather than hunt through the code looking for a particular tag, we are going to let the software do the work. Select the text in the left menu box that reads Classes and Tours. Notice how, when you select it, the text on the page is also selected in the code view. Click the mouse once after the </p> tag for the selected menu item. We have to do this using code view because the region will be placed between the two paragraphs.

  3. Select Insert, Template Objects, Editable Optional Region. The New Optional Region dialog box will appear.

    Note

    You are inserting an Optional Editable Region here because this area is going to be used as a submenu for the tours section. Because it is only needed on the tours page, there is no sense in adding this region to every page we generate from our template. Optional editable regions provide added flexibility to templates.

  4. Click the Advanced tab of the dialog box. Select the Enter Expression radio button and enter the following text in the box:

    pagename=='Tour'

    Click OK to close the dialog box. Some code is added to the code view, and the Editable Region is added to the left menu.

  5. You will notice there is a new expression above the Optional Region in the menu box. It is if pagename== 'Tour'. This is actually the text you entered into the Expression area of the New Optional region dialog box. Because this is an optional region, you can now state what happens to the region named "Tour." To do that, you have set the parameters. Unfortunately, there are no automatic ways of doing this. In the code view, scroll to the end of the new line of code and click once. Press the Return/Enter key and enter the following line of code:

    <!-- TemplateParam name="pagename" type="text" value="index" -->

    This line of code sets up a template variable that can be used across many pages derived from the templates. This will enable you to set up different regions in various areas of the template that can be called according to the template variable "pagename".

  6. Having identified the template parameter name, we are going to have it actually display on the template page and create a rule for the Optional Region. In the code view, scroll to the bottom of the code and locate the </Body> tag. If it isn't on a separate line, click once in front of the tag and press the Return/Enter key twice.

  7. Click once in the empty line above the tag and enter the following code:

    <div id="pageName">@@(pagename)@@</div>

    @@(pagename)@@ is a template variable between the div's. This is known as template programming. This way, you can assign the page name to a template programmatically.
Figure 10.12. Template objects can be added to a template through the Template pop-down in the Insert bar.

Setting the Style for the Content in the Optional Region

Having defined a new Editable Region, there will be text flowing into it from the database. At the moment, no CSS style is attached to it. This could be a problem because the last thing you need is to have the text default to whatever style the user has in his or her browser or font menu. This can easily be accommodated through an addition to the CSS style sheet created earlier. To set the CSS style for the new editable region, follow these steps:

  1. With the main.dwt document open, open the CSS Styles panel and click the New CSS Style button to open the New CSS Style dialog box. Use these settings and values:

    • Name: #pageName

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Style Definition dialog box.

  2. Select the Type Category and use these settings and values:

    • Font: Arial, Helvetica, sans-serif

    • Size: 14 pixels

    • Weight: bold

    • Color: #FFFFFF (White)

  3. Select the Positioning Category and use these settings and values:

    • Type: Absolute

    • Left: 4 pixels

    • Top: 120 pixels

    Click OK to close the CSS Style Definition dialog box.

  4. Save and close the main.dwt template.

Connecting to the Database Through the Applications Panel

Having created the template, you can now start to consider how it will be used. In this case, we are going to use the template to create a tour of the Oakbridge facilities based upon interest. Follow these steps to create the page and set it up to manage dynamic data:

  1. Open a new ColdFusion page. Name it Tour.cfm and save the file to the root of the site.

  2. With the blank Tour.cfm page open, open the Assets panel, select the main.dwt template, and click the Apply button at the bottom of the panel. The template is now linked to the page.

  3. There is still a bit of a problem. The Optional Editable Region created earlier isn't visible on the page. The parameters applied earlier to the template—<!-- TemplateParam name="pagename" type="text" value="index" -->—refer to the index page of the site. These will have to be changed to refer to the tour page. Select Modify, Template Properties to open the Template Properties dialog box. Select the word "index" in the pagename area and change it to Tour (see Figure 10.13). Click OK.

    Figure 10.13. A template's properties can be changed to link directly to the page to which they are being applied.

Note

Before you connect to the ColdFusion server and the MySQL database, now would be a good time to stop and make sure that all the files are where they are supposed to be and are named properly. You also are not going to be able to proceed if the site you are working on isn't located in the wwwroot folder of ColdFusion. On our machine, the path is C:\CFusionMX\wwwroot\Oakbridge.

Getting Dynamic with the Oakbridge Community Center

Now that everything is in place, you can start linking the various Editable Regions of the template to the database and creating the submenu that will be generated from the database. This submenu is going to be located in the Optional Editable region of the page.

  1. Click the Bindings tab of the Application panel and select RecordSet (Query) from the pop-down menu. The Recordset will be used for the submenu. When the Recordset dialog box opens, enter the following information or values:

    • Name: listfacilitynames.

    • Data Source: oakbridge.

    • Table: facilities.

    • Columns: Selected. Press the Shift key and click on facilityID and facility to select them.

    • Filter: None.

    • Sort: None.

    Click OK.

  2. Having identified the fields to be used in the submenu, another Recordset has to be created to display the selected facility on the page. Select Recordset (Query) from the Server Behaviors pop-down menu. When the Recordset dialog box opens, enter the following information or values:

    • Name: getfacility

    • Data Source: oakbridge

    • Table: facilities

    • Columns: All

    • Filter: facilityID = URL Parameter facilityID

    Click OK to close the Recordset dialog box shown in Figure 10.14.

    Figure 10.14. The Recordset that shows a selected facility on the page is created.

  3. Now that the records to be used in the submenu are established, you have to "link" the Editable region to a specific record. Click the Bindings tab of the Application panel. The Recordsets just created will be listed. Click the + sign beside the listfacilitynames Recordset to open a list of the records. Select "facility" and drag it from the panel to the editable region in side menu under CLASSES & TOURS. When the cursor changes to a page icon with a + sign, release the mouse.

  4. To add bullets to the menu items, select the Recordset in the editable region and click the <mminstance: editable> tag in the Tag selector at the bottom of the Document window. With the text selected, select Text, List, Unordered List. A bullet will appear beside the name of the Recordset.

  5. Having identified the Recordset and formatted the information, we now have to link the Tour file to the Facility ID area of the database. Select the entire line in the Editable Area and click on browse folder in Property Inspector to open the Select File dialog box. Navigate to the site's root folder and select Tour.cfm. Click the Parameter button at the bottom of the Select File dialog box.

  6. When the Parameters dialog box opens, click the + sign to add a new parameter. Enter facilityID in the name area and click the lightning bolt to open the Dynamic Data dialog box (see Figure 10.15).

    Figure 10.15. The path to the information to be placed in the submenu is determined.

  7. This menu is going to be composed of more than one line. This means it must become a Repeating Region. Select the Server Behaviors tab in the Application panel and add a Repeating Region behavior. When the Repeat Region dialog box opens, the name is already entered for you in the Recordset input box. Click All records and click OK to close the dialog box.
Adding the Images to the Content Area

When the user clicks a facility, a series of images that illustrates the various features of the selection will appear in the Content area of the page. Follow these steps to add the images:

  1. Select the editable region named "content," delete the word "content" from under the name of the region, and press the Return/Enter key to add a line to the Region.

  2. Select the Bindings tab, open the getfacility Recordset by clicking the + sign beside "getfacility," and drag the "facility" Recordset into Content region.

  3. Select the text {getfacility.facility} in the region and select Heading 1 in the Property Inspector. This will "super size" the selection. Deselect the text and click once under it to go to the next line of the region.

  4. Click the image button on the Insert panel to open the Select Image Source dialog box. Instead of adding an image, you are going to tell ColdFusion MX where to look for the images. Click the Data Sources radio button to open a dialog box that shows you the sources of dynamic data.

  5. Open Recordset (getfacility) and select imageURL in the getfacility records. Click once at the front of the entry in the URL input box and enter images/tour/. The URL should read images/tour<cfoutput>#getfacility.imageURL#</cfoutput>. If the dialog box resembles the one shown in Figure 10.16, click OK. The dialog box will close, and an icon image will appear in the Editable area.

    Figure 10.16. The path to the images folder is set.

  6. Click the image icon in the editable area and name it imagelarge in the Property Inspector. You might also want to check the code in the Code & Design view to ensure the image has an ID. Select the image, select View, Code and Design. The code is selected and should read:

    [View full width]

<img src="images/tour<cfoutput>#getfacility.imageURL#</cfoutput>" name="imagelarge"
   id="imagelarge">

    If an ID was not put in the image, select the image tag code and enter id="imagelarge" as indicated in the above code.

  7. Next up is to bind the image description text to the Content area. Select the Bindings tab in the Application panel. Open the getfacility Recordset and drag the "description" into the Content panel beside the image icon.

  8. The text flowing into the Content area will need to be formatted. Select the text just added to the Content area and select Paragraph from the Format pop-down list on the Property Inspector.

  9. On the left side of the template is a small thumbnail image. We are going to add that image to the page by pulling it from a list of thumbnails in the database. Select the edit region over thumbnail picture and click the Insert Image button on the Insert panel to open the Select Image Source dialog box.

  10. Instead of adding an image, you are going to tell ColdFusion MX where to look for the images. Click the Data Sources radio button to open a dialog box that shows you the sources of dynamic data.

  11. Open Recordset (getfacility) and select imageURL in the getfacility records. Click once at the front of the entry in the URL input box and enter images/thumbnail/. Click OK. The dialog box will close, and an icon image will appear in the Editable area.

  12. Click the image icon in the editable area and name it imagethumb in the Property Inspector. You might also want to check the code in the Code & Design view to ensure the image has an ID. Select the image, select View, Code and Design. The code is selected and should read:

    [View full width]

<img src="images/thumbnail/<cfoutput>#getfacility.imageURL#</cfoutput>" name="imagethumb"
   id="imagethumb">

    If an ID was not put in the image, select the image tag code and enter id="imagethumb" as indicated in the above code.

    Check the code in the Code & Design view. If an ID was not put in the image, select the image tag code and enter id="imagethumb".
Using CSS to Style the Editable Areas

The images are going to be positioned on the page according to the rules determined by a CSS style. In addition, you will need to style the headline and the description that accompanies the images as well as the text used in the submenu created in EditRegion 4. This way, you can control precise positioning of the images on the page and the look of the text. To use CSS to style the headline in the Content region, follow these steps:

  1. We want to format the h1 tag only within our contentArea. Otherwise, we would change the formatting of all the h1 tags.

    Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #contentArea h1

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter the following values and information in the Styles Definition dialog box:

    • Category: Type

    • Font: Georgia, Times New Roman, Times, Serif

    • Size: 28px

    • Weight: bold

    • Color: #FFFFFF

    • Category: Background

    • Background Color: #006633

    Click OK to close the dialog box.

  2. Next up is the style that controls the placement and look of the large image in the Content area. Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #imagelarge

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter the following values and information in the Styles Definition dialog box:

    • Category: Box

    • Float: left

    Click OK to close the dialog box.

  3. With the placement of the large image determined, the placement of the thumbnails is our next concern. Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #imagethumb

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter following values and information in the Styles Definition dialog box (see Figure 10.17).

    • Category: Positioning

    • Position: Absolute

    • Left: 0 pixels

    • Top: 152 pixels

    Figure 10.17. Using CSS to position the thumbnail images that will be added dynamically to the page.

    Click OK to close the dialog box.

  4. Now we turn our attention to the dynamic submenu created earlier in EditRegion. Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #leftside li

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter following values and information in the Styles Definition dialog box:

    • Category: Type

    • Font: Arial, Helvetica, sans-serif

    • Size: 12 pixels

    • Category: List

    • Type: None

    Click OK to close the dialog box.

  5. Now that we know what it looks like, it would make sense to put the text in a box. Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #leftside ul

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter following values and information in the Styles Definition dialog box:

    • Category: Box

    • Padding: 0 pixels

    • Margin: 0 pixels

    Do not deselect Same for All.

    Click OK to close the dialog box.

  6. The final style will differentiate the anchor from a regular line in a paragraph. Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. When the New CSS Style dialog box opens, enter the following information or values:

    • Name: #leftside a

    • Type: Use CSS Selector

    • Define In: styles.css

    Click OK to open the CSS Styles Definition dialog box. Enter following values and information in the Styles Definition dialog box:

    • Category: Type

    • Weight: bold

    • Decoration: Select None

    • Color: #000000 (Black)

    Click OK to close the dialog box.

  7. Save the changes and leave the document open for live data preview.

Testing the Page

Having completed the tour, it is time to start testing the page. At this point, much work has been done, and a ton of code has been written. The question is: Does it all work?

Before you start, make sure that you have a folder in the site's root named images and that the site's root is located in the CFusion MX wwwroot folder. The images folder contains the thumbnails and the tour photos mentioned earlier. You can find it in the chapter files you downloaded at the beginning of this exercise. Also, make sure you have all the files created in Chapter 8, "Building the Data," located in an Admin folder on your site root.

For this page to work, you will use the back-end created earlier. You will add a facility name, some descriptive text, and the image associated with that text. As you remember, this information is sent to the MySQL database. It is then accessed by the Tour page, and the information is displayed.

  1. Open the addFacility.cfm page in Dreamweaver MX 2004 and then select File, Preview in Browser, or press F12.

  2. The page will open and the three input boxes Facility, Description, and Image will appear. Here is what they do:

    • The word you enter in Facility will appear in both the pop-down menu and the Content area of the Tour page. It will also be sent to the Facility field of the database.

    • The description can be as long or as short as you want. It will appear in the Content area. It will also be sent to the content field of the database.

    • The Image is the image name in either the Thumbnail or the Tour folder located in the Images folder. This picture will appear under the word Tour and in the Content area. It will also be sent to the imageURL area of the database.

  3. Enter the data for as many facilities as you want. After you have completed all of the fields, click the Submit button (see Figure 10.18).

    Figure 10.18. The data for an arena is added to the addfacility page of the back-end.

  4. Clicking Submit will take you to the listfacilities page (see Figure 10.19), where you can change the wording or data by clicking on the facility's name (this takes you to the editfacility page) or even remove a facility or record by clicking delete. This is a great chance to simply review the data and ensure it is correct.

    Figure 10.19. The listfacilities page shows you the name of the facility and its description. This information is pulled out of the MySQL database.

    Note

    Clicking delete in the listfacilities page does not remove the record. It simply takes you to the deletefacility page. Clicking the Submit button on the deletefacility page removes the record from the database.

  5. Open the tour page in Dreamweaver MX 2004 and click on the Live Data View button, the page icon with a lightning bolt through it at the top of the Document window. The page will come to life. Live Data View, in very simple terms, enables Dreamweaver to send an HTTP request to the server and display the page with "live" data.

  6. To cycle through your various records, click the settings button, and when the Live Data Preview dialog box appears, select the 2 in the value area and change it to 4. Click OK.

  7. To preview the page in a browser, click the Preview/Debug in a browser button (it looks like a globe on the View panel). When the page opens (see Figure 10.20), test your links.

    Figure 10.20. The tour in the browser. Note the images, text, and submenu.

    If, in the browser view, you notice the content is overrunning the Content box, you can go into the CSS and remove the height parameter to make it more flexible with your content.


Summary

This has been a long chapter that essentially started with an idea and progressed through the dynamic process to the point where data was fed into a page.

We started the chapter with a discussion of two creative aspects of the design: choosing fonts and designing the "look" of the applications. Chris Flick provided some rather interesting insight into his font choices and how his original sketches had to meet the need for accommodating dynamic data.

From there, we reviewed how to build a template and how we used a Fireworks MX 2004 image as a tracing layer to guide the design. We also explained how to add Draw Layers and use them as Template objects to hold dynamic data.

We then reviewed how to design the CSS (Cascading Style Sheets) document that will actually be used to format text and accurately position the content on the page. The end result is a template that looks remarkably similar to the page created in Fireworks.

With the template created, the page was constructed and linked to the database using Template objects. We showed how to construct a submenu using the facility names from the database and how to add text and images from the database. In addition, we showed you how to control their look and location on the pages through the use of CSS.

We finished the chapter by testing our site. Using the Dreamweaver back-end pages created in Chapter 8, we inputted data that was placed in the MySQL database. This information was then used on the Tour page. We then reviewed the use of the Live Data preview feature of Dreamweaver and how to view the pages in a browser.

In the next chapter, we begin the process of creating an online booking facility. Using this facility, visitors to the Oakbridge site can book baseball diamonds, tennis courts, fitness times, and recreation tickets from the comfort of their homes.


Part III: Building the Booking Facility

11 Creating the Booking Facility Assets

12 Flash Communication Server MX: Moving Dynamic Data Through Director MX and Flash MX 2004

13 Assembling the Booking Application in Flash MX 2004

14 Assembling the Booking Application in Director MX


Chapter 11. Creating the Booking Facility Assets

If there is one segment of Macromedia product users that have experienced the heights of exhilaration and the depths of despair, it is the Director crew. When multimedia was at its "new tech" zenith, CDs created in Macromedia Director were unavoidable. Corporations were clamoring for their own interactive CDs, and Director developers were more than happy to oblige. When the web took hold, Director developers were there, riding the wave with a new technology called "Shockwave" that put Director on the web through the use of a browser plugin. The Director crew was understandably a rather happy bunch of campers.

Then Macromedia released Flash.

Suddenly, the klieg light shining glory on the Director developers swung over to the Flash developers. Couple this with the sudden decrease in demand for interactive CDs, and it is understandable why today's Director developer community is feeling a bit resentful. This is demonstrated by a rather amusing incident that occurred at the New York Macromedia DevCon 2001.

A Macromedia tradition is to have gatherings of developers at its annual conferences. The developers and the Macromedia product managers and engineers get together in informal forums around their products and discuss any issues they have been having. The Director gathering had attracted about 150 developers from all experience levels. The Macromedia product manager opened the session with, "Well, what do you guys want to do?" A voice from the crowd piped up, "How about we go into the next room and punch out the Flash guys?"

Director MX is the current iteration of this rich media development product. In 1985, a company named Macromind introduced a product for use on the Macintosh named VideoWorks that made "animation" on the Macintosh rather easy to accomplish. In 1989, to take advantage of the "power" of the Macintosh II, the product metamorphosed into Macromind Director. In 2003, the company is known as Macromedia, and Director has moved from its Macintosh roots to a heavy-duty, cross-platform multimedia authoring application.

Obviously, entire books have been written about the application. It is that deep, rich, feature-laden, and indulgent. We are going to focus on a very small part of the application, which is using Director movies on the web to provide the viewer with a rich media experience.


Director vs. Flash

Before you start bombarding us with email, we know that Director is not a part of Studio MX 2004, even though it carries the MX branding. The reason we are including it is because it is one seriously powerful application for dynamic data management. We aren't going to ignore the Flash MX 2004 guys. Skip ahead to Chapter 13, "Assembling the Booking Application in Flash MX 2004," and we will show you how to create the application in Flash MX 2004.

We also can't overlook the fact that the web development community tends to dismiss Director because "it's too difficult to learn" or because "Flash does it a lot better, so why bother?" They are about to discover how wrong they are, and we hope you will discover, as we did, that Director is an extremely powerful tool that does more on the Internet than "hog web bandwidth."

We have no intention, despite the heading, to get involved in the Flash vs. Director debate. To us, it is right up there with the Mac vs. PC debate. Both tools are remarkably similar in look and feel because both create linear, frame-based movies with which the user can interact. The workflow is quite similar, and both use scripts for interactivity and navigation. At the end of the process, both publish their movies to the web.

Still, there are some fundamental differences between the two applications that Flash users especially should be aware of. They include:

  • A Director movie can only have one timeline. Flash movies containing movie clips are actually composed of multiple timelines that resemble a tree structure, as opposed to Director's flat hierarchy.

  • Flash movies can contain multiple objects in a layer. Director movies don't use layers, meaning there can only be one item in a channel at any given time. For example, a Flash movie layer could contain three squares and a circle. In Director, those three squares and a circle would require a channel for each object.

  • Scripts in Flash are attached to specific objects or keyframes. Director scripts are simply cast members that can be used at will and attached to different frames and sprites in the movie.

Regardless of the development application, everything still starts on paper as the team plans how to approach the task at hand.


The Plan

We will be using Director in combination with MySQL and ColdFusion MX to create a booking facility for the Oakbridge Community Center. The booking facility needs to perform a number of tasks:

  • It will need to keep a running list of the facilities the visitor wants to book.

  • It must also include functionality to enable the visitor to change his or her mind and add or delete items.

  • It should also include the capability to refuse a booking based on over-booking or, if the facility is unavailable, provide a few alternative dates or times that can be booked.

  • It should also be able to issue an email confirmation regarding the booking.

This tells us exactly what needs to be done in Director. We will need to create a Director movie that:

  • Develops a list of the facilities to be booked based upon date, which is provided by the database.

  • Checks a database to ensure the entry on the list does not conflict with a prior booking.

  • Remains flexible until the data is sent to the database. By enabling the user to change his or her mind, the data can't be sent from Director until the user chooses send it. As soon as a user selects a spot and clicks Book, it sends the data to the database.

  • Has the capability to generate a confirmation email confirming a booking.

  • Adds the confirmed booking data to the database.

As you can see, there are two different agendas at play here. There is a list of what the facility needs to do, and there is a list of the functionality that must be built into Director to meet those needs.

Still, Director MX or, for that matter, Flash MX 2004, are merely front ends to do all the UI stuff (like display calendars, turn the data into something the user can understand, and create time slots to book, as well as determine if the user himself owns any of the bookings). The real "work" is being done by the database, and Director and Flash are used as intermediaries to display information from the database or to pass information to the database.

For example, assume a visitor wants to book a tennis court. When the user makes that decision, Director, functioning as the database interface, will determine how many courts are available and send that information to the visitor. If there are three courts and two are already booked, Director will grab that information and tell the visitor that only court 3 is available and ask if he or she wants to reserve the time. In addition, this all must be done in real time in case other members are online and attempting to book a court. If the visitor takes the time presented, Director will fire the information back to the database, and the visitor will be informed onscreen and through email that the court is reserved.

As you can see, there is a fine line between features and functionality. After both are determined, the team can develop a plan that addresses the needs and the functionality of the booking facility and use the features of Director that make the project work.

The Logic Behind the Booking Facility

Before starting the project, you have to look at creating the logic that will drive the application. As we pointed out in Chapter 4, "Planning the Data for a Dynamic Site," the biggest mistake you can make is simply to make it up as you go along. You really should map the logic before you start. This way, everyone involved with the way the data flows understands the functionality of the application. The database developer can create the tables and fields that meet the logic flow, and the Director developer can plan to write the Lingo code that makes it all happen.

In the case of the booking facility, it all starts with an entry point in a Director presentation. The logic map, Figure 11.1, provides a detailed overview, but it won't hurt to walk through the process of booking a tennis court.

Figure 11.1. This is the first part of the logic chart for the booking facility that members will use to book tennis courts, baseball diamonds, or any other facility or activity offered by the Oakbridge Community Center.

When the visitor arrives at the page, the first thing that happens is, if he or she isn't logged into the page, he or she will have to log in. After the visitor is identified, the list of selections will be presented, and the visitor clicks on the tennis court.

If it is unavailable—Can this facility be booked?—alternate times will be presented. If it is available, a calendar showing the bookings for that day is presented. The member then clicks on the requested time.

Again the database is checked to see if the time is available, and the reservation is added to the database. The member is then asked if he or she would like to book another time. If the answer is yes, the procedure starts all over again.

If the member decides he or she doesn't want to choose a different date from the one he or she needs, the next section, Figure 11.2, kicks in. All this section does is ask if the member wants to remove the booking reservation. If the answer is yes, the database checks to see if the user actually has the time, and if the answer is yes, it deletes the information from the database. If the answer is no or if the booking has been deleted, the member, in both instances, will be taken back to the reservation screen.

Figure 11.2. Planning for all eventualities is the mark of careful project planning. This logic chart shows what happens if a user changes his or her mind or decides not to book an alternate date.

    [ Team LiB ]


Imaging in Fireworks MX 2004

While the database developers and the Lingo programmers determine how to structure the code, the database, and the logic flow, the creative crew can be working on designing the interface for the project. One of the best tools you can use to design the interface is Fireworks MX 2004.

Designers inevitably tend to fall back on Photoshop to design their interfaces. This isn't all bad, but in a lot of cases, they are "using an atom bomb to light their BBQ." A lot of energy is going to be wasted to accomplish the objective.

A simple example illustrates this point. When it comes to working with Director, beveled buttons are a must. In Photoshop, this is a relatively complex process, usually involving layers and layer effects, or if they are really hard-core, channel operations. Then the objects on the layers have to be exported out of Photoshop as individual images are imported into Director. Let's assume the artist spends thirty minutes on this task.

The same thing can be done in Fireworks using the Effects area of the Fireworks Property Inspector. Not only that, a fully functioning button with Lingo code can be imported into Director if the button is created using the Frames feature of Fireworks. Total time? Maybe fifteen minutes in the hands of an experienced Fireworks artist.

This is not to say that all imaging should be done in Fireworks. To us, both applications are simply tools we use every day. Also, we understand a fundamental truth of this industry: The client never cares how you did it. The client only cares that you did it on time and on (or under) budget.

Still, we are writing about the integration of the tools in the Studio, and the integration of Fireworks MX 2004 and Director MX is one of the great secrets of the Studio.


The Fireworks MX 2004/Director MX Connection

Until version 4 of Fireworks, very little integration between Director and Fireworks existed. Buttons, for example, still required a separate image for each button state, and to make the buttons work, you had to write the Lingo code. In Version 3 of Fireworks and version 7 of Director, Macromedia introduced a Fireworks Import Xtra for Director that enabled us to import our layers, slices, and rollovers into Director. Best of all, the HTML code from Fireworks was translated into a Lingo behavior. With the introduction of Fireworks and Director, it was no longer necessary to obtain the Xtra from Macromedia. It was included with the Director install disc. Here are four techniques that demonstrate the integration of Director MX and Fireworks MX 2004. The necessary files can be downloaded from the book's web site.

To create a button in Fireworks MX 2004 and use it in Director MX, follow these steps:

  1. Open Fireworks MX 2004 and open a new document with a canvas that is 150 pixels wide and 50 pixels high with a white background.

  2. Right-click (PC) or Control-click (Mac) to open the Context menu and select Insert New Button from the menu. The Button Editor will open.

  3. Click the Import a Button button in the bottom-left of the dialog box to open the Import Symbols: Buttons dialog box. When a list of button choices appears, select the first 3-State button and click Import. The button will appear in the editor, and you might want to click the Over and Down tabs to see how the button functions. Click Done, and the button will appear on the canvas.

  4. The canvas is quite a bit larger than the button, and you really don't need to import all that extra white space into Director. Click on the canvas and select Fit Canvas in the Property Inspector.

  5. Select File, Export Preview (Control-Shift-X (PC) or Command-Shift-X (Mac)) to open the Export Preview dialog box. Select the GIF format and click the Export button to open the Export Dialog Box.

  6. This is the area, shown in Figure 11.3, where you prepare any Fireworks asset for export into Director. Navigate to the folder where the files are to be stored and name the file; we used "3_stateButton." In the Save as Type pop-down, select Director(.htm) and select Fireworks slices as the source. Click Save to save the button states and close the Export dialog box. Save the file and quit Fireworks.

    Figure 11.3. Fireworks MX 2004 files prepared for export to Director MX are saved as Director.htm images.

Note

You are probably muttering "Say what?" when you discover a Fireworks file is exported to Director as a Director.htm file. Don't fret. The slices are saved as individual images, and the file that is imported into Director is the .htm file, which is translated, at import, into a Director behavior.

From Fireworks MX 2004 to Director MX

With the file sliced, diced, and saved in a format Director recognizes, here's how to import the button into Director MX:

  1. Open Director MX. When the new movie opens, select Insert, Fireworks, Images from Fireworks HTML. The open Fireworks HTML dialog box (see Figure 11.4) will appear.

    Figure 11.4. Fireworks buttons are brought into Director using the Insert, Fireworks menu.

  2. Navigate to the folder containing the Fireworks file you just created and select the .htm file. Click open.

  3. When you click Open, the dialog box will close, and the button will appear on the Director stage. Open the cast (Control-3 on a PC or Command-3 on a Mac) and the score (Control-4 on a PC and Command-4 on a Mac), and you will see that the buttons and the behaviors are in the cast (see Figure 11.5) and the button is on the stage.

    Figure 11.5. The imported Fireworks button is placed both in the cast and on the stage.

  4. Click the Play button on the toolbar and test the button.

Fireworks MX 2004, Layers, Behaviors, and Director MX

In the previous exercise, you discovered how a button symbol from Fireworks MX 2004 can easily be added to a Director MX movie. In this exercise, you will be importing a rather complex image using behaviors, frames, and layers into a Director movie. To do to this, follow these steps:

  1. Open the Bar.png image located in the NavBar folder of your exercise folder. When the Fireworks file opens, open the Layers, Frames, and Behaviors Panels. Click on the Web Layer for the baseball button and the Behavior panel will show you that there is a Nav Bar behavior attached to the button (see Figure 11.6). The behavior performs an image swap with the image in frame 2 when the user rolls over the baseball button.

    Figure 11.6. A navigation bar using layers, frames, and behaviors created in Fireworks is ready for placement in Director.

  2. Export the image by creating the director.htm file (as covered previously in this chapter).

  3. Quit Fireworks MX 2004 and open Director MX. Select Insert, Fireworks, Images from Fireworks HTML. Locate the Bar.html file you just created and click OK. The bar appears on the Director stage. Play the movie. Roll the cursor over the baseball button, and you will see an image swap.

Note

Hopefully, you have gathered from these two relatively simple exercises that any Fireworks document with attached behaviors can be imported into Director and used right away. This includes such things as pop-down menus, rollovers, and even disjointed rollovers.

Roundtrip Editing

Like many of the applications in the Studio, you have the ability to place a Fireworks MX 2004 image in Director MX and directly edit it from Fireworks MX 2004. Follow these steps to do a round trip edit in Director MX:

  1. If you haven't done it already, download the Chapter 11 exercise files to your computer. Open the Fireworks file named Baseball.png in the Baseball folder.

  2. The first thing to notice about this image is that the words are on one layer and the image is on another. This image is going to be imported into Director. When it is imported, the two layers will be placed into Director as separate bitmap images. This points out a potential "gotcha" when moving between Director and Fireworks—layers in a Fireworks layer will be flattened when placed in Director. If the words layer was to be moved into the team layer, the words would be flattened into the team image.

    Note

    If you were wondering how we got the words to wrap around the players, we placed them on a curved path. We input and formatted the text. Then we selected the Pen tool and drew a curved line over the team. We selected both the path and the text and selected Text, Attach to Path (Control-Shift-Y (PC) or Command-Shift-Y (Mac)).

  3. Export the image as Director.html and quit Fireworks.

  4. Open Director MX and use the Insert, Fireworks menu to import the image into Director. It is decided to change the color of the text.

    Before you proceed, make sure that Fireworks MX 2004 is the Director MX External Editor for .gif images. Open the Director MX preferences (Edit, Preferences) and select Editors to open the Editors Preferences dialog box. Click once on the GIF description and click the Edit button. This will open the Select Editor for GIF dialog box. Select External Editor and click the Browse button. When you see the Open dialog box, navigate to your Fireworks MX 2004 application folder, select the Fireworks MX 2004 application, and click Open. You will be returned to the Select Editor for GIF dialog box, and Fireworks MX 2004 will appear as the editor. Click OK, and Fireworks MX 2004 is added to the list (Figure 11.7). Click OK to accept the change and close the dialog box.

    Figure 11.7. Fireworks MX 2004 is selected as the External Editor for GIF images.

  5. Open the cast and double-click the cast member named Words. An alert box named Mix Editing in Progress will open, and Fireworks MX 2004 will launch.

  6. The words appear on the Fireworks Canvas as a flattened bitmap. At the top of the Document window, you will see the normal Editing from Director icon and a button named Done.

  7. Select the image on the canvas, and from the Property Inspector, select Effects, Adjust Color, Hue/Saturation to open the Hue/Saturation dialog box. Select the preview button and move the Hue slider to the right to a value of 14 (see Figure 11.8). The words will turn purple. Click OK.

    Figure 11.8. Changes made to Fireworks images are sent to Director by clicking the Done button at the top of the Document window.

  8. Click the Done button at the top of the Document window. You will be returned to Director, and the image on the stage will now have purple lettering.

Tip

An alternate method of changing the text color is to use the Replace Color tool that we discussed in Chapter 6, "Creating the Tour Assets."


The Flash MX 2004/Director MX Connection

The capability to use Flash MX 2004 movies inside a Director MX movie is a relatively new feature. The beauty of a Flash movie inside of Director is size. Flash MX 2004 movies are composed of vectors, and these movies are scalable and optimized for web playback.

Adding a Flash movie to a Director presentation is not terribly difficult. It is imported into the Director cast, and, as such, can be manipulated in Director just like any other cast member. What makes the use of Flash in Director so appealing is that tweening effects that required multiple cast members can be done in a relatively small Flash movie that only requires one cast member.

The other new feature is the capability of Director to access the Flash Communication Server MX. Suddenly, dynamic data is a definite possibility in a rich media authoring environment. We will be spending a lot of time examining this feature in the following chapters.

Naturally, Director offers the capability to control nearly every Flash property—playback, rewind, size, location, quality settings, and even sound control—using Lingo commands. The only downside is that you shouldn't get carried away and use a number of Flash movies in the Director presentation. Each Flash sprite on the Director stage will load its own instance of the Flash Asset Xtra. The result will be serious performance degradation as the number of Flash sprites on the stage increases. Bottom line: The fewer Flash sprites on the Director stage at any one time, the better.

Finally, add a Flash .swf file to a Director Shockwave movie, and you have an unbeatable combination. The Flash .swf, thanks to its vectors, loads much more quickly into a browser than other media. A common use for Flash movies in a Director presentation is as a splash screen that plays an animation while the rest of the Director content streams into memory. Another is embedding entire Flash web sites into a Director movie.

We are going to examine three aspects of working with Flash in Director. They are:

  • Importing and playing a Flash file in Director.

  • Round trip editing between Flash and Director.

  • Controlling a Flash sprite through Lingo.

Importing and Playing a Flash MX 2004 File in Director MX

Though any Flash movie can be imported into Director, there are still a couple of rules. First, any Flash 2.0 movie or later can be imported into Director. Second, the Flash MX 2004 file that is placed into Director is the published .swf file from Flash MX 2004.

Finally, make it a practice to include a copy of the original .fla file with the .swf. Just keep in mind that the .fla file can't be imported into Director MX. You will need the .fla if you need to edit the movie from Director MX. To import a Flash MX 2004 .swf into Director MX, follow these steps:

  1. Launch Director MX. A Flash movie is not simply imported into Director. It is inserted using the Flash Asset Xtra mentioned earlier. Select Insert, Media Element, Flash Movie. This opens the Flash Asset Properties dialog box shown in Figure 11.9. Click the browse button and navigate to the Flash folder in the Chapter exercise file you downloaded from the book's web site. Open the Import Folder and select the Movie1.swf file. Click Open to be returned to the Flash Asset Properties dialog box. The path to the file is located in the Link area, and a thumbnail is visible over the Play button. For a full explanation of the choices, see the sidebar "All Those Choices for One Little Flash Movie." Deselect Linked and click OK. The Flash movie is added to the Director cast.

    Figure 11.9. The Flash Asset Properties dialog box enables you to determine how the movie plays in Director, its scaling properties, and even the location from where the Flash movie will play.

  2. Select Windows, Library Palette. When the Code Library Palette opens, select the Library tab. Click the palette Options button (the square one on the left) and select Navigation.

  3. Drag the Hold on Current Frame behavior from the panel to frame 1 of the Frame Scripts channel, the channel directly above the timeline. Release the mouse, and the script is dropped into the frame.

  4. Open the cast (Command-3 for Mac users, Control-3 for PC users) and drag the Flash movie into frame 1 of channel 1. Depending on your preferences, the Flash movie will span frames 1 to 26 of the channel. Click the square handle at the end of the span and drag it back to frame 1. When finished, your score should resemble that shown in Figure 11.10.

    Figure 11.10. The Flash movie is placed on the Director stage and ready to be tested.

  5. Play the movie. You will notice that all the ActionScript embedded in the Play button is fully functional in the Director movie.

All Those Choices For One Little Flash Movie

A natural question at this point is, "What's with all the choices in that dialog box?"

Media. These choices locate the files and set the preload.

  • Linked: This links the Flash file to the Director movie from its original location. Deselect this to load the Flash movie into the Director cast.

  • Preload: Select this, and the entire Flash movie is loaded into memory before it starts playing. This is only available if the Flash movie is linked. Flash movies playing from the Director cast always load completely into memory before they play.

Playback. These choices determine how Director MX will play the Flash movie.

  • Image: Select this to see the Flash movie. Deselect it, and the movie will be invisible.

  • Sound: Select this, and any sound in the movie will play.

  • Paused: Stops the Flash movie on its first frame.

  • Loop: Select this, and the movie will return to frame 1 of its timeline and start playing all over again.

  • Direct To Stage: This actually does two things. The first is that it optimizes playback of the Flash movie. The second is that the Flash movie, regardless of its channel location, will always be played in front of everything else.

Quality. These choices determine how well the movie plays in Director.

  • High Quality: Select this to play the Flash movie with anti-aliasing turned on. This will slow down performance.

  • Auto-High: Select this to have Director start the movie with anti-aliasing turned on. If performance is affected and the frame rate can't be achieved, Director will automatically turn it off.

  • Low: Select this to play the Flash movie with anti-aliasing turned off. This will speed up performance.

  • Auto-Low: Select this to have Director start the movie with anti-aliasing turned off. If performance is not affected and the frame rate can't be achieved, Director will automatically turn it on.

Scale Mode. The choices in the pop-down determine how the Flash movie will be scaled on the Director stage.

  • Show All: Select this to maintain the movie's aspect ratio when scaling. This is a fancy description for proportional scaling.

  • No Border: If you aren't using proportional scaling, the top or the sides of the Flash movie may be trimmed off and replaced by a border. This selection disregards the border.

  • Exact Fit: Stretches the movie to fit the dimensions of a sprite and disregards the aspect ratio.

  • Auto-Size: Select this if you are going to be skewing, rotating, or flipping the movie.

  • No Scale: Select this to place the movie on the stage with no scaling.

Rate. These choices determine the frame rate. Director calls this tempo—the rate at which the Flash movie will play.

  • Normal: Select this to play the Flash movie using the frame rate established in Flash.

  • Fixed: Select this to manually set the playback rate. Just be aware that if the Director movie's frame rate is 15 frames per second, you can't have the Flash movie play faster than the Director movie.

  • Lock-Step: Select this to have Director play a Flash frame for each Director frame.

Round Trip Editing Between Director MX and Flash MX 2004

Flash members can be edited from the cast in Director, providing that:

  • You have the .fla file in the same folder as the .swf.

  • You didn't select Linked in the Flash Asset dialog box when you imported the file. If the file is linked, it can be unlinked by selecting the cast member and opening the Director MX Property Inspector. Click the Flash tab and then click the Options button to open the Flash Asset Properties dialog box.

  • Flash MX 2004 is the External Editor in the Director MX Preferences. If you installed Flash MX 2004 before you installed Director, it will automatically be made the default editor.

To edit a Flash cast member in Flash MX 2004, follow these steps:

  1. With your Director movie open, select the Flash movie and turn off the Linked status in the Flash Asset properties. Double-click the Flash member in the cast.

  2. The Locate Source File for Member dialog box will open. Navigate to the Edit folder (in the exercise's Flash folder) containing the .fla file and click Open.

  3. This will launch Flash. When Flash opens, change the color of the Play button symbol in the Library from light blue in the Up state to dark blue.

  4. When you are finished, click the Done button on the Document window, and the change will be saved, Flash will quit, Director will reopen, and your change will be visible on the Director stage.

Tip

That second step is only done once. When Director knows the path to the file, it will never forget it. If you want to avoid that step completely, open the Flash Member properties in the Property Inspector. Click the Browse button under the file name input box and navigate to the .fla file.

Flash/Director Communication

Flash movies communicate with Director movies through the ActionScript event getURL. This seems a little odd at first—using a getURL action to send a message to Director. In fact, it makes sense because that is how Flash traditionally talks to browsers. In this instance, we are going to use a Flash button that, when released, sends a Lingo message to Director. That message is simple: When the button is pressed, the Flash Button is going to tell Director to execute a Lingo script named showMovie.

Here's how it works:

  1. Open the Subway.dir movie located in a folder named Code inside the Flash folder of the Chapter 11 Exercise Folder downloaded from the book's web site. When the movie opens, open the score (Control-4 on PC or Command-4 on Mac).

  2. You will notice (see Figure 11.11) that two areas of the score are used. The first area, frame 1, will hold the Flash button. The second area, frame 5, contains a digital video of the subway train used earlier. Above the frame is an inverted triangle with the word "Movie" beside it. This is a marker, and it is traditionally used for frame-based navigation in Director. If you are a Flash user, "Markers" is a Director term for Flash's "Frame Labels." This marker is important because when the Flash Button is clicked, the Director playback head will move to the marker.

    Figure 11.11. The Director movie is just about ready to go. They key to the whole project is the marker named Movie that is sitting over frame 5.

  3. To write the script that controls the move to the marker, select Window, Script (Command-0 (Zero) on Mac or Control-0 (Zero) on PC). A blank movie script will open. Enter the following code:

    on showMovie
  go to frame "Movie"
end

    You have just written a script that starts running when the movie launches, which is why it is called a movie script. The script, in plain English, says, "When the 'showMovie' handler is called—on showMovie—send the director playback head to a frame named 'Movie.'"

    The neat thing about movie scripts is that they just live in the cast. They don't need to be attached to anything.

  4. Close the movie script. Save the changes to the Director movie and open the BlueButton.fla file in the exercise folder. This will open Flash.

  5. When the Flash movie opens, select the button on the stage. Select Window, Development Panels or press the F9 key to open the Actions panel.

    Tip

    If you want to add ActionScript to a Button, always select the button on the stage before you open the Actions panel. Flash MX 2004 will recognize the selected object as a button, meaning that you can add button events in the Actions panel.

  6. Click inside the Text entry area of the Actions panel (see Figure 11.12) and enter the following code:

    on (release) {
      getURL("event: showMovie");
 }
    Figure 11.12. The code that makes things happen in Director is added to the button's on (release) event.

    The key here is "event:showMovie". The key word event sends the event message to Director. The event Director is being asked to execute is the showMovie handler from the Director movie script.

    With this last bit of code from Flash, you can see how things will happen in Director. When the button is released, the Flash Button sends an event message to Director telling it to run a handler named showMovie. Director scoots through its particular script hierarchy looking for the handler. It finds it in the movie script and moves the playback head to frame 5 of the Director movie. The end result is that the video in that frame starts to play.

  7. Select Save and Compact to optimize the Flash movie's playback. Publish the movie and quit Flash.

  8. Return to the Director movie and insert (Insert, Media Element, Flash Movie) the Flash button into the Director cast. When the Flash Asset dialog opens, be sure to deselect Direct To Stage.

  9. Drag the button from the cast to a point just over the word "subway" in frame 1. Play the movie.

Note

In the preceding step, you were told to deselect Direct To Stage. The reason is that this option essentially places the Flash button in front of everything when the screen is drawn by the system. This means that when you move to frame 5, you may actually see the Flash button in the frame. What makes this so disturbing is it isn't in the frame. Essentially, what you would be looking at is a ghost image as a result of Director moving faster than the system can redraw the screen.


Summary

This chapter started the process of building the booking facility in Director MX. Because Flash MX 2004, Director MX, and Fireworks MX 2004 will be used in this section of the book, the chapter focused on planning the data and how Fireworks MX 2004 and Flash MX 2004 integrate with Director MX.

We started with an overview of the similarities—there are a lot—between Flash MX 2004 and Director MX, along with some of the important differences between the applications. Among the major differences are how each utilizes a timeline, how objects in layers are managed differently, and how scripts are managed in each application.

From there, we discussed the plan of action for the project. We looked at the tasks the booking facility needs to perform and related them to how they can be brought to life in Director MX. We also spent some time reviewing the logic behind the booking facility, where Director fits into the scheme, and the logic map that will drive the database design and coding efforts of the technical team.

We also looked at some of the creative issues that might arise as the facility is designed and constructed. We led this off with a thorough review of the integration aspects of Fireworks MX 2004 and Director MX. We reviewed how to save Fireworks files for instant use in Director. We showed you how a button symbol can be created in Fireworks and used as a button in Director. We showed you how multi-layer Fireworks documents using frames and behaviors can also be added to Director movies with no loss of functionality between the two applications. We finished the section with a thorough review of the seamless round trip editing between Director and Fireworks.

The balance of the chapter was devoted to the Flash MX 2004/Director MX connection. We looked at three critical aspects of this connection. We showed you how to import and play a Flash movie in Director. We demonstrated the round trip editing feature between Director and Flash. We then finished the chapter by showing how Flash's coding language—ActionScript—can be used to initiate events in Director's coding language, Lingo.

In the next chapter, we build upon what you learned in this one and dig deeper into Director MX. We are going to show you how the application is used for dynamic data and review a new feature of Director MX—its use of the Flash Communication Server MX.


Chapter 12. Flash Communication Server MX: Moving Dynamic Data Through Director MX and Flash MX 2004

The rise of Battle.net for online multiuser gaming, the increased popularity of Instant Messaging, wireless access, and even web-enabled devices such as cell phones, Palm Pilots, and devices utilizing Windows CE show we are increasingly using our computing devices for more than storing recipes or as work stations. The computer is evolving into a communications device.

This past year, for example, one of the authors was sitting in an airport and working on his email when it occurred to him that what he was doing used to be a novelty. Now it is commonplace, and being in a non-wireless location was more a minor annoyance than the norm. On another occasion, the author was walking across the street with a visitor from Britain who opened up his cell phone and started pushing buttons. When he asked what the visitor was doing, the reply was, "I just took a photo with my cell phone and now I am emailing it to my wife."

On another occasion, one of the authors was having lunch with a local Flash developer and a couple of IT guys. The conversation turned to the use of dynamic Flash content in education and what a typical online class would look like. When the sketching started, there was a lot of talk about Flash components and their use and placement on the page. It wasn't until a week later that it occurred to the author that having that conversation 18 months earlier would have involved some serious coding and the employment of cutting-edge technologies.

How far we have come in such a short time.

In our drive to get connected to each other, there will be an inevitable increase in demand for the services and content that enables those connections. One of the services will be the Flash Communication Server MX, and the technology that connects to it is the Flash Player 7.

At a recent conference regarding Macromedia Studio, Jeremy Allaire, Macromedia's former Chief Technology Officer, positioned the Flash Player in terms that are quite appropriate. He claimed the Flash Player isn't the technology that makes Flash work. He called it a "Trojan Horse." He didn't see the download of hundreds of millions of Flash Players. What he saw was the distribution of hundreds of millions of communications devices that were just now being turned on.


The Movement of Dynamic Data Through and Out of Director MX and Flash MX 2004

In Chapter 4, we talked about planning the data. In this chapter, we are going to talk about how the data moves into and out of Director MX and Flash MX 2004. How this data moves into and out of the applications is through Flash Communication Server.

A good analogy for how the Flash Communication Server fits into the scheme of things is air travel. A good place to start would be Chicago O'Hare. You can hardly fly anywhere in the Midwest without a stop in Chicago. You have people flying into the airport, getting off the plane, and running through the airport to catch a connecting flight to somewhere else in the Midwest.

If you use that analogy in relation to dynamic sites, the Flash Communication Server MX is O'Hare. The people arrive via their Flash Players, and they move through the Server to connect to other people's Flash Players.

These connections, as we briefly mentioned in Chapter 3, "Planning a Dynamic Site," are facilitated using Macromedia's proprietary two-way connection protocol named RTMP or Real Time Messaging Protocol. The Flash Communication Server MX can also connect to other communication servers, J2EE, web services, and ASP.NET application servers. This means data in the form of audio, video, and text-based chat can be delivered in real time along with database connectivity.

In Director, this information is delivered through a Flash sprite located on the stage.

Goodbye Multiuser Server; Hello Flash Communication Server

Until the introduction of Director MX, developers looking to add a multiuser dimension to their Director presentations used the Shockwave Multiuser Server. This technology has been discontinued and replaced, for obvious reasons, with the Flash Communication Server MX.

The key issue among developers was that the Multiuser Server could handle multiple users, but not as many as they would have liked. Depending on whether you entered your Director serial number, the number of connections available at any one time was anywhere between 50 and 2,000. At the time, up to 2,000 was thought to be acceptable. It isn't in today's Internet environment. The Flash Communication Server is designed to support a seriously heavier load. It has been tested with thousands of simultaneous connections.

What tends to be forgotten in all the hype around the Flash Communication Server MX is that it does more than simply accommodate live video, audio, and chat streams. It offers a whole new dimension to work authored in Director because it also supports Macromedia Flash Remoting, which we discussed in Chapter 9, "Flash Remoting." This opens Director to connections with application servers such as .NET and, as you saw in Chapter 9, ColdFusion MX.

Director MX and the Flash Communication Server

Now that you understand that all you need to communicate with the Flash Communication Server MX through Director MX is a Flash sprite on the stage, a world of possibilities opens up for you. To enable you to explore those possibilities, there is a "subset" of Lingo designed to work with Flash.

The extensive Flash Communication Server MX support that has been added to Director, in addition to letting you access all of the server's features, also gives you the capability to use installed USB or Firewire cameras and microphones. We will be explaining this feature later on.

You access the Flash Communication Server MX in Director through the use of Flash sprites on the Director stage that are designed to work with the server or that are used to create NetConnection or NetStream objects in Lingo that can be used to communicate with the server.

The neat thing about this is you use exactly the same ActionScript commands and properties you would use in Flash to manipulate the Flash Object. In fact, the steps necessary to communicate with the Flash Communication Server MX are the same steps you would use, were you to be using Flash. The end result is remarkably similar workflow models.

Let's look at an example that uses Lingo to facilitate a two-way video chat that utilizes much of the functionality of the Flash Communication Server.

Note

This example is derived from an involved tutorial by a couple of Macromedia people —Jay Armstrong and Tom Higgins. Though many developers will claim that "code is code," we believe in acknowledging the source. The interesting thing about coding is how quickly certain bits and pieces of code become standardized and rapidly and widely adopted. Back in the early days of Flash, a developer posted to a forum the ActionScript he had written. The code made a globe spin. Within three months, hundreds of sites utilizing spinning globes driven by the posted code started appearing.

We aren't going to get into the creation of the Flash movie. It is nothing more than a 320x240 Flash movie containing the VideoChat component.

The instance name, in Flash, for the component is videoFeed. We'll get into building a very similar application in the next section of the book when we build the online meeting facility. For now, we are going to show you how Director can be used as the shell for this chat.

The chat will occur between two individuals who have web cameras and microphones connected to their computers. Each person participating in the chat will enter their name and the name of the person to whom they are talking. When they connect, the video and audio streams flow through the Flash Communication Server to the Flash sprite located on the stage. When the chat is finished, they simply disconnect.

To accomplish this, Lingo will have to set up a NetConnection object to communicate with the Flash Communication Server. Camera and Microphone objects will have to be created in order to use the cameras and microphones connected to each individual's computer, along with a NetStream object to send and receive each other's video feed.

The movie starts with the two individuals entering their names when prompted. Those names are then captured by Lingo and become a global variable named gNames. Clicking the Connect button (Figure 12.1) moves them to a frame containing the Flash sprite.

Figure 12.1. The first frame of the Director movie enables the two participants to identify themselves.

The next frame of the Director movie contains the Flash sprite, as shown in Figure 12.2. Attached to this sprite is a Lingo behavior that displays the video stream from the other user. The Lingo creates the ActionScript objects needed to create and control an incoming and outgoing video stream. Under the Flash sprite is some sort of control button that ends the session. In this case, it is a button whose purpose is to disconnect the two users from the Flash Communication Server.

Figure 12.2. All the Lingo that will be written is "attached" to the Flash movie on the stage.

It seems, when you first encounter the project, like a lot of work. It isn't. As we like to say, "Think like a computer." When you do, the code needed becomes nothing more than a series of very logical steps.

How Director MX and Flash MX 2004 "Talk" to Each Other

The key to what follows is to understand that Lingo and ActionScript are separate languages, sort of like English and German. The way they communicate with each other involves, among other things, being lost in Germany.

One of the authors found himself lost in Hamburg, Germany, a couple of years ago and needed to retrace his steps to a specific intersection. He saw a policeman, walked over to him, and asked in English, "How do I get to the harbor?" The policeman, not speaking English, simply looked at him with a blank stare. The author tried again, only this time, in typical North American fashion, raised his voice a bit and slowly repeated the request word-by-word. The policeman's expression didn't change, but the author suspects the policeman was thinking, "Do I arrest him now or later?"

A lady passing by caught this exchange and walked over. "I speak English," she said. "Can I help you?" The author explained his predicament to his savior, and the lady turned to the policeman and started talking to him in German. He replied, and she gave the author the directions he needed in English.

That story demonstrates how Lingo and Actionscript talk to each other. They need an intermediary to translate their commands so that each clearly understands what the other is asking. This is the purpose of the Flash sprite on the Director stage. As a Director sprite, it will understand the "Flash Lingo" sent to it by Director and communicate the request to the Flash Communication Server using ActionScript. When requests flow the other way, the process is simply reversed.

Here's the code attached to the Flash sprite:

global gNames

property pCamera
property pIn
property pMicrophone
property pNetConnect
property pOut
property pSprite

on exitFrame (me)
  if voidP(pNetConnect) then
    me.makeConnection()
  end if
end

on makeConnection (me)
  pSprite = sprite(me.spriteNum)
  pNetConnect = pSprite.newObject("NetConnection")
  pSprite.setCallback(pNetConnect,"onStatus",#myOnStatus,me)
  ServerAddress = "rtmp://localhost/VideoChat"
  pNetConnect.connect(ServerAddress)
  end

on startStreams (me)
  CameraObj = pSprite.newObject("Camera")
  pCamera = CameraObject.get()
  MicObject = pSprite.newObject("Microphone")
  pMicrophone = MicObject.get()
  pOut = pSprite.newObject("NetStream",pNetConnect)
  pOut.attachAudio(pMicrophone)
  pOut.attachVideo(pCamera)
  pOut.publish(gNames.publishName,"live")
  pIn = pSprite.newObject("NetStream",pNetConnect)
  pIn.play(gNames.subscribeName)
  pVideoClip = pSprite.getVariable("VideoClip",FALSE)
  pVideoClip.attachVideo(pInStream)
end

on endSprite
  if not( voidP(pOutStream) ) then
    pOutStream.close()
  end if
  if not( voidP(pInStream) ) then
    pInStream.close()
  end if
  if not( voidP(pNetConnect) ) then
    pNetConnect.close()
  end if
end

on myOnStatus me, aArg1, aArg2
  if (aArg2.code = "NetConnection.Connect.Success") then
    me.startStreams()
  end if
end

That's a lot of code, but it does make sense if you dissect it.

Setting Up for Two-Way Communication

The first section of code simply declares the global variables and the properties used. The global—gNames—is nothing more than the names of the participants who identified themselves in the first frame of the movie.

The properties are:

  • property pCamera: The camera object that provides the video stream from the user's computer.

  • property pIn: The incoming NetStream object.

  • property pMicrophone: The audio stream from the user's computer.

  • property pNetConnect: The NetConnection object that will handle the incoming and outgoing streams.

  • property pOut: The outgoing NetStream object.

  • property pSprite: The sprite number of the Flash movie on the Director stage.

Note

If you are somewhat new to Lingo, you are probably wondering why property names have the letter "p" in front of them. This is a standard practice to distinguish the names from other variables used in the code to avoid confusion. This explains why global variables have a "g." Local variables simply use the name. Thus, "pIn" means a property. The variable "gNames" tells you it is a global variable, and "ServerAddress" is simply a local variable.

Obviously, the Director playback head is going to be held on the frame holding the Flash movie. This uses the following simple Lingo script:

On exitFrame
Go to the frame
End

This simple frame loop keeps the playback head moving in and out of the frame. Thus, the next bit of code…

on exitFrame (me)
  if voidP(pNetConnect) then
    me.makeConnection()
  end if
end exitFrame

…uses the Lingo function voidP() to simply check if a NetConnection object—pNetConnect—exists. If it does not exist, it heads to the makeConnection handler.

Making the Connection

With no NetConnection object found, one has to be made, which is the purpose of the makeConnection handler. The first thing it does is identify the sprite to which the behavior is attached—pSprite = sprite(me.spriteNum).

The remaining four lines are critical:

pNetConnect = pSprite.newObject("NetConnection")

Director first has to create an ActionScript reference to the "NetConnection" object. This ActionScript object will be given the property name pNetConnect.

pSprite.setCallback(pNetConnect,"onStatus",#myOnStatus,me)

When the connection has been identified, the Director Flash command setCallback() can be defined for the myOnStaus handler at the bottom of the script. The syntax for the command is setCallback(ActionScript Object, ActionScript Event Name,# Lingo handler, Lingo Script Object).

This line checks to see if the connection to the server was successful and then calls the startStreams handler.

ServerAddress = "rtmp://localhost/VideoChat"

When the callback handler is defined, this line puts the address of the server in a variable name, and the next line…

pNetConnect.connect(ServerAddress)

…makes the connection to the Flash Communication Server with the NetConnection object's connect() method, using the address as a parameter.

When the connection is made with the Flash Communication Server, it sends an onStatus message of success or failure with the attempt to connect with the server. The myOnStatus handler will capture this message.

Establishing the Data Flow

Having found the connection, the Flash movie on the user's machine has to start communicating with the other Flash movie. This is the purpose of the startStreams handler. The remainder of the script creates the Flash Camera and Microphone objects and starts sending and receiving the audio and video streams.

on startStreams (me)

The next four lines…

CameraObj = pSprite.newObject("Camera")
pCamera = CameraObject.get()
MicObject = pSprite.newObject("Microphone")
pMicrophone = MicObject.get()

…create the Camera and Microphone objects. The first line uses the NewObject() function to create an ActionScript Camera object and names it CameraObj or MicObject. The next line takes those two objects and uses their get() functions to return a reference to the camera or microphone and assigns that reference either the pCamera or pMicrophone property.

With the ActionScript objects created, the video stream has to be sent to the Flash Communication Server. This is the function of this line:

pOut = pSprite.newObject("NetStream",pNetConnect)

The first parameter, "NetStream", names the type of object to create. The second, "pNetConnect", is how Director tells the Flash sprite which NetConnection object to use to connect with the Flash Communication Server. By naming it pOut, you no longer have to be writing this line of code.

Having opened the connection out to the server, you can now determine what gets sent from Director to the Flash Communication Server, namely, the audio and video streams from the user's computer to the viewer's computer. To accomplish this, Director has to tell Flash where the streams are originating. The next two lines…

pOut.attachAudio(pMicrophone)
pOut.attachVideo(pCamera)

…undertake this task. The ActionScript attachAudio(source) command associates a microphone with the NetStream object, just as the attachVideo(source) command attaches a camera to the NetStream object.

With the camera and the microphone attached to the outgoing NetStream object, the audio and video streams flowing out of these devices are ready to be published. This line…

pOut.publish(gNames.publishName,"live")

…using the Actionscript publish command—publish(What getsPublished)—accomplishes this task. The two parameters are rather simple to understand. The first one is the name of the sender. The second says the stream is being published live.

Having established the data flow from the user's computer to the Flash Communication Server, the next consideration is getting that data from the server to the viewer's computer. The first line…

pIn = pSprite.newObject("NetStream",pNetConnect)

…is exactly the same as that used to send the data to the Flash Communication Server. The next line…

pIn.play(gNames.subscribeName)

…uses the Lingo command sprite (nameof FlashSpriteGoesHere).play() to associate the stream from the Flash Communication Server with the newObject and make it play on the viewer's screen. The parameter identifies the user sending the stream.

The last two lines…

pVideoClip = pSprite.getVariable("VideoClip",FALSE)
pVideoClip.attachVideo(pInStream)

…create a reference to the video clip object within the Flash sprite and attach the incoming video stream to the video clip.

The first line is the important one. It uses the Lingo getVariable() function to get the value of the "VideoClip" variable from the Flash sprite. The actual Lingo syntax is sprite (FlashSpriteNumberGoesHere).getVariable ("variablename", returnValueorReference). The first parameter,"variablename", is understandable. The second is one of those "Say what?" things that are so common in computer coding.

There are only two values that can be used. They are "True" or "False." If the value is True, the default, the value of the Flash variable "VideoClip" would be a string (not a good thing in this instance). If it is set to False, as it is in this case, the data is returned as the current literal value—a video stream—of the Flash variable. In this case, the value of the Flash variable is an object. Thus, the rule is really simple. When the value is an object, the parameter must be set to False.

Closing the Streams Between Director and the Flash Communication Server

The endSprite handler closes the two NetStream Objects—Video and Audio—and the NetConnection object. The way this occurs is actually quite simple. The sprite is ended when the Disconnect button is clicked. When the button is clicked, the user is taken back to the login page. If the Flash Movie isn't in that frame of the Director movie, it obviously has ended the connection. The Lingo that makes this happen is:

if not( voidP(pOutStream) ) then

pOutStream.close()
end if
if not( voidP(pInStream) ) then
pInStream.close()
end if
if not( voidP(pNetConnect) ) then
pNetConnect.close()

end if

Note the use of Lingo's VoidP() function. All this does is determine if the properties in the brackets—pOutstream, pInStream, pNetConnect—have a value of either True of False. The not essentially asks if the variable value is False. If it is, the handler sends the ActionScript close() method to sever the connection between Director, the Flash Player, and the Flash Communication Server. The order is important here. Shut down the video and audio streams before you close the NetConnection object. They rely on the NetConnection object for their shut–down procedures.

Flash Communication Server to Director Communication

The final handler constantly checks the status of the connection between the Flash movie in Director and the Flash Communication Server. This is determined by the setcallBack() statement from the on makeConnection handler.

The code…

on myOnStatus me, aArg1, aArg2
  if (aArg2.code = "NetConnection.Connect.Success") then
    me.startStreams()
  end if
end

…looks rather mysterious. However, it is quite succinct.

When a connection to the Flash Communication Server is made, the server sends two arguments to the callback handler. The second one is the important one because it contains a property list. This handler checks the second argument property list for a code string indicating that the connection was successful. If it is successful, the handler starts executing the startStreams handler.


Interface Issues

The key interface issues are usability and intuitiveness. This is an interesting dance because these issues are aimed at your audience more than anything else.

There is a site for a design company that is one seriously gorgeous piece of Flash work. The problem is that it is neither intuitive nor usable if you aren't "with it." This is rather odd because the site is designed as a showcase for the company's work to attract new clients (see Figure 12.3).

Figure 12.3. A typical "high concept" Flash page that fails the usability and intuitiveness tests.

The main page, as you can see, has a solid "A" (the first letter in the company's name) and three circles of varying sizes on the left side of the page. On the right side are the four main site categories. If you click on the categories, nothing happens. If you click on the shapes on the left, nothing happens. You are left to discover that the four items on the left are draggable. Place them over the corresponding area on the right, and you launch that section. You only discover this if you are either patient or have the time necessary to experiment.

The point here is that interface design is a black art and requires a deep understanding of the user and his or her technical sophistication. As you move across the audience continuum from broad to very specific, your interface design choices actually expand as the audience contracts.

When the audience is narrowly defined, you have the freedom to make certain assumptions about the audience. For example, we assume the audience for this book has a basic familiarity with the applications presented. This is why we jumped right into the code for the Flash sprite in Director. If we assumed no experience and jumped right into the code, you would have closed the book by now or thrown it out the window. Is it any different in web design?

Keeping the audience in mind is the first rule. The second is never to drop your user into the interface and assume he or she will know how to use it. If it isn't intuitive, the user will be gone. Instead, give them subtle clues or brief instructions as to how the interface works. In many respects, you are yielding control of the interface to the user and acknowledging that the user is there to access information. If it isn't readily available, they won't hesitate to go somewhere else.

Designing Director Presentations for Dynamic Data

In many respects, Director functions as a "shell" for the dynamic data. The Flash sprite on the Director stage, using the Flash Player, is actually doing the bulk of the work in accessing the Flash Communication Server, or in the case of Flash Remoting, accessing the database through ColdFusion MX. This is the key factor to keep in mind when using Director for dynamic data.

Here are some other general things, in no particular order, to keep in mind:

  • When sketching out the Director interface, for example, you need to know the physical dimensions of the Flash sprite and accommodate those dimensions. The great thing about Flash, though, is you aren't stuck with using the Flash sprite "size as." One of the great features of Flash is its capability to be resized with no loss of quality.

  • Know how the interface is going to be used on the Dreamweaver page and its size on the Dreamweaver page. Designing a Director interface at 640x480 for placement into a 240x180 location on the Dreamweaver page is going to open you up to a world of grief. The main problem will be having to go back to Director and redesign the stage to fit the slot in the Dreamweaver page.

  • Use Fireworks to create your bitmaps and Flash to create your vectors. This enables you to edit the content without having to leave the Director workspace. Photoshop images, including their layers, can be imported into Fireworks, and Freehand Symbols can be imported into Flash and Fireworks with no loss of quality.

  • Optimize and slice the interface in Fireworks and save the interface as a series of .jpg or .gif images. These smaller images can then be used in Director to reassemble the interface.

  • Embed any fonts used in Director into the final .swf file (Director's Shockwave file, not the final Flash MX 2004 file). This is done through the use of the Font Cast Member Properties dialog box, which is accessed through Insert, Media Element, Fonts. This way, you avoid the nasty surprises that are a result of font substitution.

  • Create the primitive shapes—circles and squares, for example—used in the Director design and any solid backgrounds needed in the design in Director. The result will be smaller files sizes and loading times for the web page.

  • Remove any unused cast members and channels from the Director presentation before creating the Director .swf file. You can remove channels by opening the Property Inspector and clicking the Movie tab. Set the number of channels from the default of 150 channels to one or two more than are used in the movie.

  • Remove extraneous Xtras from the movie. They only add weight and an unnecessary hit on bandwidth. A quick way of doing this is to select Modify, Movie, Xtras to open the Movie Xtras dialog box. Select each of the Xtras in the list and click Remove. Click OK and immediately reopen the Movie Xtras dialog box. Only the Xtras used (or needed) will appear in the list.

  • Test. Test. Test. Just because you understand how it is supposed to work doesn't mean your audience understands. One of the authors, for example, will sit his 76–year-old father in front of an interface designed for a broad audience and ask him to try it out. If his father doesn't "get it," it is time to go back to the drawing board.


Summary

This has been a rather technical chapter exploring the new relationship between Director MX and the Flash Communication Server MX.

We started by discussing how computers are evolving from being regarded as computing machines to communication devices. This shift is being facilitated through the use of a "Trojan Horse"—Flash Player 7—and the Flash Communication Server MX.

We next reviewed how dynamic data passes between the Director MX movie and the Flash Communication Server MX. This is facilitated through the use of a Flash MX sprite on the Director stage. From there, we explained how this happens—it starts with getting lost in Germany—and presented the Lingo Code that enables users to create a video and audio chat using a Director "shell."

The code was broken into easily-digestible sections, and we showed how Lingo can communicate with ActionScript and vice-versa.

The keys were the creation of NetConnection and NetStream objects using Lingo to communicate with the Flash Communication Server MX. We showed how to find and connect to cameras and microphones connected to a computer and how to stream their data flow using the attachAudio and attachVideo commands from ActionScript.

We showed how to turn off the streams and also how to disconnect the Flash sprite from the Flash Communication Server MX. We also showed you a rather interesting way of constantly checking to see if Director MX and the Flash Communication Server MX are "talking" to each other.

The chapter then discussed developing interfaces and concluded with some of the interface and design issues to keep in mind when Director is being used on a web page.

In the next chapter, it all comes together as we create a dynamic booking facility for the Oakbridge Community Center.


Chapter 13. Assembling the Booking Application in Flash MX 2004

One of the more common uses for dynamic sites is to present constantly changing and current information. For example, if you have ever booked a hotel room or airline flight online, you are accessing a database. The data you are requesting, at the most basic level, will tell you if the flight or room is available on the date and time selected.

The way it works is rather simple. The data you provide through your request is matched against the data in the database. The result of that match is then presented back to you. In the case of the hotel room, you are normally asked to provide your arrival and departure dates. Those dates are used to check the hotel's room database to discover if, indeed, there is room at the inn. If the answer is yes, the reservation is made, and your data is added to the database. If the answer is no, the data is discarded, and you are asked to try again.

In Chapter 9, "Flash Remoting," we introduced you to how Flash Remoting works. This chapter will build on that knowledge.

The Flash Remoting service is a Flash application interface (API) that enables server-side developers to connect to the Flash Player through ActionScript. This enables you to use Flash to exchange data between objects such as Recordsets and XML (Extensible Markup Language) documents.

As we explained in Chapter 9, the Action Messaging Protocol enables Flash MX 2004 to communicate directly with ColdFusion MX. The end result is Flash presentations that are extremely fast. The capability of Flash to obtain data and display it almost instantly is why Macromedia is so vocal about the user experience. The user receives instant gratification because it "feels" as if they never left the page.


Planning the Project

The project we are going to build is a booking application for the Oakbridge Community Center. Most recreation centers rely on a face-to-face or telephone booking systems for their facilities. Realizing their membership is quite technologically literate, they have decided to offer online booking of the various sports facilities, meeting rooms, and public recreational and entertainment activities undertaken by the community center.

To the uninitiated, this project could be a rather daunting prospect. In fact, it is rather uncomplicated. Our approach was to use a date book metaphor. By segmenting a day into hourly increments during the center's business hours, we could visualize what needed to be done.

To actually see what we were talking about, we created the layout in Freehand MX. We imported the .png file used for the home page in Chapter 10 into Freehand MX. We then created the time strips by using the Rectangle tool and duplicated it nine times to recreate a ten-hour day. The result is shown in Figure 13.1.

Figure 13.1. The booking facility starts out as a visualization exercise in Freehand MX.

After we knew what it would look like, we started planning the data. The question was, "What data do we need for the date book?" Obviously, we needed to identify which facility was being booked. We needed to identify who booked the facility. We also needed to know the duration of the booking and when the booking was needed. With that information in hand, we had to put it into terms the database would understand.

This required an addition to the data dictionary developed for the tour, as shown in Figure 13.2. As you can see, a new table named "bookings" is created. It will be composed of four fields:

  • bookID: This will be an auto-incrementing number used to identify the reservation.

  • facilityID: This will be another number that will actually point to an entry in the facilities table.

  • startDate: This will be a timestamp entry which will be used to keep track of the starting date and time. We do this because it is simpler for the database to perform the required calculations needed for the front end.

  • duration: This will be another number used to determine how much time, in seconds, is being blocked off. Seconds are the basic unit of time measurement in MySQL.

Figure 13.2. The Oakbridge data dictionary is updated to reflect the addition of a booking table to the database.

Note

The data dictionary shown is available for download from the book's web site. It is a .pdf file named Booking.


Creating the Booking Facility Database

With the data dictionary created, it is a relatively simple task to add the booking table to the Oakbridge MySQL database. Here's how:

  1. Open your Administrative Console and locate the Oakbridge database.

  2. Right-click the table icon (PC users) and select New Table from the pop-down menu. Mac users, click the New Table button.

  3. When the new table opens, add the field names and the types.

  4. Set the bookingID field as the primary key. When finished, your MySQL table should resemble that shown in Figure 13.3.

    Figure 13.3. The Booking table is added to the MySQL database created for the Oakbridge Community Center in Chapter 8.

  5. Right-click where indicated on the MySQL Administration panel and select Hide Me. The panel will close, but the MySQL traffic light will be visible on the taskbar.


Creating an ActionScript Document in Dreamweaver MX 2004

One of the more interesting features of Dreamweaver MX 2004 is the capability to create an ActionScript document that controls a Flash movie. In the case of our booking facility, the code will not only control the various buttons and so on in the Flash movie, it will also be used to add data to the MySQL database and pull information from the database that is displayed in the Flash movie.

The main advantage to this approach, as opposed to having the code embedded in the Flash movie, is the ability to make changes as needed. When a Flash movie is posted to a web site, it is in the form of a non-editable file known as an .swf. If something is not working and you need access to the code, a .swf file essentially prevents access to that code. Unless you have the .fla file in your possession or it is readily accessible, you will have a huge problem on your hands. Keeping the code separate enables the coder to focus on the code without the need of the .fla file, enabling the project to be split up. The final movie can then be compiled with all the parts together. The other really neat thing about this technique is that the script only requires one line of code in the Flash movie in order to execute.

Finally, this code uses ActionScript 2, the latest update to the Flash programming language. It is based on the ECMAScript 4 and the JavaScript 2.0 language proposals. It provides a structured approach to object-oriented programming with the syntactic formalization of classes, inheritance, type-checking, private/public members, and static members. Though that may seem like a rather formal description, this version of the language adheres very closely to the ECMA syntax.

Scripts that use ActionScript 2 language elements, such as the one that follows, must be stored as external script files using the .as extension, with a single class defined in each script. In addition, other than the import statement, ActionScript 2 terminology is not supported in the Actions panel.

Follow these steps to create an ActionScript document in Dreamweaver MX 2004:

  1. Open Dreamweaver and make sure you are working with the Oakbridge site.

  2. Select File, New to open the New Document dialog box.

  3. Select Other, ActionScript (see Figure 13.4) and click OK. A blank ActionScript document will open.

    Figure 13.4. Dreamweaver MX 2004 enables you to create ActionScript Documents that can be used to control a Flash movie.

    Note

    The following code has been fully commented to explain the purpose of each section of the code. If this is far too much typing for you, the file is available for download from the book's web site. It is named "booking.as." This file has to be placed in the same directory as your booking.fla file for compiling purposes.

  4. The first thing you need to do is import the NetServices, DataGlue, and NetDebug ActionScript classes used by Flash Remoting into the movie. Enter the following code in the ActionScript Document.

    // ActionScript Document
#include "NetDebug.as"
#include "NetServices.as"
#include "DataGlue.as"

    NetDug allows for support of Flash's NetConnection Debugger. When you deploy your Flash movie, be sure either to comment the line (//) or remove the line totally. It only adds extra weight. It also makes your movie accessible to external debugging, which may threaten the security of your application. The best practice is to comment it out because if you ever need to debug your code again, it is faster to remove the comment.

    NetServices provides prebuilt objects that automate the connection process.

    DataGlue enables you to populate the Flash UI Components with Recordsets. In our case, we will be using the ComboBox and Dynamic Text Box components when we actually assemble the Flash movie.

  5. The next thing we need to do is tell Flash where the web server is located and where the buttons to control the movie will be placed on the Flash stage. The location you enter would be either the location of the site's server or the address for the localhost on your machine. Press the Return/Enter key and enter the following code:

    // ------------------------- USER CHANGEABLE AREA ----------------
// change the URL to match YOUR web server - this one matches MINE

ourURL = "http://bear-faced-cow.local:8080/cfusion/flashservices/gateway";

timeSlot_x = 100;
timeSlot_y = 53;

// ------------------------- END USER CHANGEABLE AREA ------------

    It is also important to remember the /flashservices/gateway part of the URL. Although it looks like a series of folders, it is actually calling a servlet that connects Flash to ColdFusion. So, don't go looking for them on your system.

  6. The next bit of ActionScript tells the buttons what they are supposed to do. In a way, we are doing things a little backward here because we are creating an array of objects (called bookingBtn) and initializing them before we have defined the object. This type of programming is often known as a top-down approach (where defining the object first and then using it would be considered a bottom-up approach). Neither way is more correct than the other. It's more or less what you are used to. Some programmers need to see the big picture first and then fill in the little details. Enter the following code:

    [View full width]

tomorrowBtn.onRelease = tomorrow;    // set our two date changing
buttons to that when they get hit
yesterdayBtn.onRelease = yesterday;    // they will call these functions

bookingButtons = new Array();

for( loop = 0; loop < 10; loop++ )
{
      _root.attachMovie( "Rectangle Button", "booking" + loop, 100 + loop );
      bookingButtons[loop] = new bookingBtn( 9 + loop, _root["booking" + loop] );
      _root["booking" + loop].onRelease = _root["btnPressed" + loop];
// point our handler to our button handling functions

      _root["booking" + loop]._x = timeSlot_x;
      _root["booking" + loop]._y = (loop * parseInt(_root["booking" + loop]._height)) +
   timeSlot_y; // calculate our y in our movie
}

  7. The purpose of a function in Flash is to give you the ability to create modular code that can be reused. The following two functions determine the dates for yesterday and tomorrow. Enter the following code:

    [View full width]

// ------------------------- FUNCTIONS ---------------------------

function tomorrow()
{
     _root.theDate.setTime( _root.theDate.getTime() + (24 * 60 * 60 * 1000) );
      _root.theDate = new Date( _root.theDate.getFullYear(), _root.theDate.getMonth(),
   _root.theDate.getDate(), 0, 0, 0, 0 );
// and remove the time to set it to 12:00am by default

      setOurDate( _root.theDate );

      _root.facilities.getBooking( facilitiesList.getSelectedItem() .data, _root.theDate
  .getTime() / 1000);

}

function yesterday()
{
      _root.theDate.setTime( _root.theDate.getTime() - (24 * 60 * 60 * 1000) );
      _root.theDate = new Date( _root.theDate.getFullYear(), _root.theDate.getMonth(),
   _root.theDate.getDate(), 0, 0, 0, 0 );
// and remove the time to set it to 12:00am by default

      setOurDate( _root.theDate );

      _root.facilities.getBooking( facilitiesList.getSelectedItem() .data, _root.theDate
  .getTime() / 1000);
}

  8. Having dealt with the way dates are handled, you can now decide what happens when buttons are pressed. Enter the following code:

    function btnPressed0()
{
      _root.bookingButtons[0].btnPressed();
}
function btnPressed1()
{
      _root.bookingButtons[1].btnPressed();
}
function btnPressed2()
{
      _root.bookingButtons[2].btnPressed();
}
function btnPressed3()
{
      _root.bookingButtons[3].btnPressed();
}
function btnPressed4()
{
      _root.bookingButtons[4].btnPressed();
}
function btnPressed5()
{
      _root.bookingButtons[5].btnPressed();
}
function btnPressed6()
{
      _root.bookingButtons[6].btnPressed();
}
function btnPressed7()
{
      _root.bookingButtons[7].btnPressed();
}
function btnPressed8()
{
      _root.bookingButtons[8].btnPressed();
}
function btnPressed9()
{
      _root.bookingButtons[9].btnPressed();
}

    Although there are more efficient ways of coding this, the code was written here for the sole purpose of clarity.

  9. The next function adds the date to a dynamic text box on the stage. Enter the following code:

    [View full width]

function setOurDate( aDate )
{
      var monthArray = new Array( "Jan.", "Feb.", "Mar.", "Apr.", "May", "June", "July",
   "Aug.", "Sept.", "Oct.", "Nov.", "Dec." );

      // put our date in our text box
      _root.dateDisp.text = monthArray[aDate.getMonth()] + " " + aDate.getDate() + ", " +
   aDate.getFullYear();
}

  10. The ComboBox will contain a pop-down list of the Oakbridge facilities drawn from the MySQL database. The following code will be called when we select a new list item in our ComboBox component:

    // because components now broadcast their actions using the event model
// we need to define a makeshift object to receive our event changes
// and process the event in order to get a new booking

facilityObj = new Object();
facilityObj.change = function ()
{
      var ourSelection = _root.facilitiesList.getSelectedItem()
      // trace( "Facility Chosen: " + ourSelection.facility );

      // call our CFMX web service with our data from our comboBox
      along with a UNIX timeStamp of our date without the milliseconds
      for( loop = 0; loop < 10; loop++ )
      {
            _root.bookingButtons[loop].setBooking( 0 );
             // init our state
      }
      _root.facilities.getBooking( ourSelection.data, _root.theDate.getTime() / 1000 );
}
// in order to receive the changes from the ComboBox, we need to add
// our object as a listener of the ComboBox. This way, our object is
// automatically called when the user
// makes a new selection in our combo box.
_root.facilitiesList.addEventListener( "change", facilityObj );

  11. Aside from having to tell Flash Remoting what information should be pulled from or added to the MySQL database, the following functions are called automatically by our Flash Remoting calls with the information that we requested. Enter the following:

    [View full width]

// --------------------- FLASH REMOTING METHODS ----------------------
// these functions are called automatically from our web service call

function listFacilities_Result( result )
{
      _root.facilitiesList.dataProvider = result;

      // binding doesn't automatically send a change event, so we will
      // get our selected item manually
      _root.facilities.getBooking( _root.facilitiesList.getSelectedItem().data, _root
  .theDate.getTime() / 1000 );
}
function addBooking_Result( result )
{
      trace( "Create Booking: " + result );

      _root.facilities.getBooking( facilitiesList.getSelectedItem() .data, _root.theDate
  .getTime() / 1000);
}

function removeBooking_Result( result )
{
      trace( "Remove Booking: " + result );

      _root.facilities.getBooking( facilitiesList.getSelectedItem() .data, _root.theDate
  .getTime()/ 1000 );
}

function getBooking_Result( result )
{
      trace( "Received Bookings for " + _root.theDate );

      for( loop = 0; loop < 10; loop++ )
      {
            var aTimeStamp = ( _root.theDate.getTime() / 1000 ) + ( ( loop + 9 ) *  3600 )
   ; // get our timestamp
            _root.bookingButtons[loop].setBooking( 0 );
            // init our state

            // iterate through our results that were returned from ColdFusion MX

            for( resultLoop = 0; resultLoop < result.items.length; resultLoop++ )
            {
                  row = result.items[resultLoop];

                  trace( "Booking ID: " + row.bookingID + " - Start: " + row.startDate + "
   (" + row.bookingStart + ") - Duration: " + row.duration );

                  if( aTimeStamp >= row.bookingStart && aTimeStamp <= (row.bookingStart +
   row.duration) )
                  {
                        _root.bookingButtons[loop].setBooking( row.bookingID );      //
   set our button
                  }
            }
      }
}

    Note

    One of our tech editors, Marcus Dickinson, chimed in with another method of error catching. His code is somewhat similar to ours. The reason we are including it is to make the point that coders all have their "styles." The interesting thing about this is they all end up in the same place.

    [View full width]

function removeBooking_Error( error )
{
      errormessage.text = error.description; // This is pulled automatically from CFMX
   Server. Very useful when NetConnectionDebugger is not running live. For localhost, it is
   just another way of checking.
}

  12. The following code defines an object to which each button is attached. Our bookingBtn object defines a blueprint as to what happens when a button requesting a booking is pressed. This involves starting the check and creating or removing a reservation. You also note Jordan has added his name to the code. This is a normal procedure among coders, and it identifies that the following code is a custom code object he wrote. Enter the following:

    [View full width]

// --------------------- bookingBtn OBJECT ----------------------------
// by: Jordan L. Chilcott, Interactivity Unlimited

// This will handle the various booking buttons that are displayed
// and handled within the timesheet

function bookingBtn( timeSlot, btn )
{
      this.hour = timeSlot;
      this.btn = btn;  // used to control our button

      this.bookingID = 0;  // initialize our booking ID here
}

bookingBtn.prototype.createBooking = function ()
{
      aDate = new Date( _root.theDate.getFullYear(), _root.theDate.getMonth(), _root
  .theDate.getDate(), this.hour, 0, 0, 0 ); // create a date object of the time we want to book

      trace( "Sending booking msg: " + _root.facilitiesList.getSelectedItem().label + ","
   + aDate + "," + 3599 );
      facilities.addBooking( _root.facilitiesList.getSelectedItem() .data, aDate.getTime()
   /  1000, 3599 );
      // book an hour at the allotted timeslot
}
bookingBtn.prototype.removeBooking = function ()
{
      _root.facilities.removeBooking( this.bookingID );
}

bookingBtn.prototype.setBooking = function ( bookingID )
{
      trace( "Setting booking ID to: " + bookingID );

      this.bookingID = bookingID;
      this.btn._alpha = this.bookingID ? 30 : 0;
      // if we have a booking, shade the button
}

// this is our public button handler

bookingBtn.prototype.btnPressed = function ()
{
      trace( "Button Pressed!");

      if( this.bookingID )
      {
            this.removeBooking();
      }

      else
      {
            this.createBooking();
      }
}

// --------------------------------------------------------------------

  13. The next bit of code puts today's date into its location in the movie. It is an actual part of the initialization routines for our movie. Enter the following:

    _root.theDate = new Date(); // start off our date with today
_root.theDate = new Date( _root.theDate.getFullYear(),
_root.theDate.getMonth(), _root.theDate.getDate(), 0, 0, 0, 0 );
// and remove the time to set it to 12:00am by default

setOurDate( _root.theDate );

  14. The final bit of code checks to see that the Flash Remoting gateway is open through a flag that we have set. If our flag isn't set, we proceed to open up a Flash Remoting gateway and call up our ColdFusion Component (called "facilities"). Note the dot syntax. This is how directories are notated in Java. Enter the following:

    // connect to the Flash Remoting service provider
if (isGatewayOpen == null) {

  // do this code only once
  isGatewayOpen = true;
  // Make the Gateway connection
  NetServices.setDefaultGatewayUrl(ourURL);

  gatewayConnnection = NetServices.createGatewayConnection();

  // Connect to our web service (aka: facilities.cfc)
  _root.facilities = gatewayConnnection.getService("oakbridges. facilities", this);

  // Call our Web service: get our list of facilities for our dropdown list
  _root.facilities.listFacilities();
}

  15. Save the document as booking.as. Be sure to save it to the same folder in which your booking.fla file is located.

Building the ColdFusion MX "Facilities" Component

The ActionScript does all the work on the Flash side. ColdFusion MX provides the back-end support. Clicking a button in the Flash movie will trigger a call to access the MySQL database. That call has to move through ColdFusion and is managed by a ColdFusion Component. This component is usually a separate code file with the .cfc extension.

Components were introduced in ColdFusion, and their greatest strength is that they promote code reuse. This makes application development, such the booking facility, a less complex process. For the hard-core coders, components offer an OOP (Object Oriented programming) approach to web application development. The CFC framework is based on the object-oriented concepts of classes, methods, instances, and properties. A full explanation of this is well out of the scope of this book. If you are looking for a general idea of how ColdFusion works, David Golden's New Riders book, ColdFusion MX with Dreamweaver MX is a good starting point. If you are hard-core, then Ben Forta and others' Macromedia Press book, ColdFusion MX Web Application Construction Kit, Fifth Edition, is the most complete and comprehensive book on the street (at 1500 pages, it better be comprehensive).

ColdFusion MX also includes the Flash Remoting service, which acts as the gateway for communication between your Flash movie and ColdFusion. The Flash Remoting services, along with the ColdFusion Components, act as an extension to Flash ActionScript because they extend your Flash movie's capabilities to anything from a simple emailer to a booking application. All you really need to know is that Flash Remoting provides the connection between Flash MX 2004 and ColdFusion MX, and you don't need to do any configuration to make it work. From our perspective, it just works.

Follow these steps to create a ColdFusion Component in Dreamweaver:

  1. Open Dreamweaver and ensure you are working in the Oakbridge site.

  2. Select File, New to open the New Document dialog box shown in Figure 13.5.

    Figure 13.5. ColdFusion Components can be created in Dreamweaver MX 2004.

  3. Select the Dynamic Page category and select ColdFusion Component from the list in the Dynamic Page area. Click OK, and a page with code already entered will open.

  4. The code on the page is actually the basic ColdFusion MX code for the creation of a component:

    <cfcomponent>
      <cffunction name="myFunction" access=" public" returntype="string">
            <cfargument name="myArgument" type="string" required="true">
             <cfset myResult="foo">
             <cfreturn myResult>
      </cffunction>
</cfcomponent>

    The <cfcomponent> statement defines the component and the <cffunction> statement is enclosed in the component definition. When components are used, they call functions, and you can have multiple functions between the <cfcomponent> tags. Using a <cffunction> in ColdFusion is theoretically no different from using a function in ActionScript. They accept arguments, return values, and can be reused as often as you want.

    Functions typically contain the three attributes shown. They are:

    • Name: Names the function; is used when you invoke a component method.

    • Access: Specifies the client that can call a component method and uses one of four attributes. The first attribute is "remote," which is accessible by the FORM and GET methods and is used by the Flash Remoting service. The second is "private," which means the component can only call on itself. The third is "package," which restricts the calls to only the files in the site's web root. The fourth, "public," opens the call to HTTP methods and other means.

    • returnType: Identifies the type of data the component returns from the database. This could be strings, arrays, numbers, and so on.

    The parameters for the function are defined in the <cfargument> tag. The required attribute enables you to set an argument as being required by the function. Finally, the <cfreturn> tag presents the results of whatever CFML processing is done within the function. You can only use one <cfreturn> tag per <cffunction> statement.

  5. Now that you understand the basics of a ColdFusion MX Component, select the text in the document and press the delete key.

  6. Enter the following code into the document:

    [View full width]

<cfcomponent>
      <!--- Get a list of all our facilities --->
      <cffunction name="listFacilities" access="remote" returntype= "query">
            <cfquery name="listFacilities" datasource="oakbridge">
                  SELECT
                        facility AS label,
                        facilityID AS data
                   FROM facilities
            </cfquery>
            <cfreturn listFacilities>
      </cffunction>

      <!--- Get a list of all our bookings for a particular facility on a particular date --->
      <cffunction name="getBooking" access="remote" returntype="query">
            <cfargument name="facilityID" type="numeric">
            <cfargument name="theDate" type="numeric">
            <cfquery name="getBooking" datasource="oakbridge">
                  SELECT *, UNIX_TIMESTAMP( startDate ) as bookingStart FROM booking
                  WHERE facilityID='#facilityID#'
                  AND startDate BETWEEN FROM_UNIXTIME( #theDate# ) AND FROM_UNIXTIME(
   #theDate# ) + INTERVAL 1 DAY
            </cfquery>
            <cfreturn getBooking>
      </cffunction>

      <!--- Add a booking --->
      <cffunction name="addBooking" access="remote" returntype="string">
            <cfargument name="facilityID" type="numeric">
            <cfargument name="startDate" type="numeric">
            <cfargument name="duration" type="numeric">
            <cfquery name="addBooking" datasource="oakbridge">
                  INSERT INTO booking (facilityID, startDate, duration)
                  VALUES ( #facilityID#, FROM_UNIXTIME( #startDate# ), #duration# )
            </cfquery>
            <cfreturn "SUCCESS">
      </cffunction>

      <!--- Remove Booking --->
      <cffunction name="removeBooking" access="remote" returntype= "string">
            <cfargument name="bookingID" type="numeric">
            <cfquery name="removeBooking" datasource="oakbridge">
                  DELETE FROM booking
                  WHERE bookingID=#bookingID#
            </cfquery>
            <cfreturn "SUCCESS">
      </cffunction>
</cfcomponent>

    Is it any coincidence that the <cffunction> names have the same name as the method names called from our ActionScript (such as facilities.getBooking (facilitiesList.getSelectedItem().facility, _root.theDate.getTime ()/ 1000 );)? These functions are being called by ActionScript.

  7. Save the document as facilities.cfc in the Oakbridge site's root.

  8. If you preview the component in a browser (File, Preview in Browser), ColdFusion will show you all the information just entered, as shown in Figure 13.6, in a graphical manner.

    Figure 13.6. Previewing the page in the browser using Dreamweaver's Preview in Browser command gives you a graphical representation of the component just created.
    [ Team LiB ]


Building the Booking Facility in Flash MX 2004

Now that the coding is in place and the ColdFusion Component has been written, you can start to build the booking facility. This is the easiest part of the job. To build an interactive reservation facility in Flash MX 2004, follow these steps:

  1. Open Flash MX 2004. When the application opens, change the canvas in the Property Inspector to 550 pixels wide by 480 pixels high. Set the background color to white—#FFFFFF—in the Property Inspector.

  2. Insert three new layers in the timeline by clicking the Insert Layer button. Rename the layers, from the top layer down, Scripts, Buttons, Layouts, and Facilities. When finished, your screen should resemble that shown in Figure 13.7.

    Figure 13.7. The movie is sized and the layers are named and in their proper order.

    With the layers defined, it is time to incorporate the booking.as script into this movie and to stop the movie from looping.

  3. Click once in frame 1 of the Scripts layer and press the F9 key to open the Actions panel. Type the following script into the text input area:

    #include "booking.as"

    Close the Actions panel.

    This line of code calls the booking.as file created earlier in Dreamweaver.

  4. Add a new keyframe in frame 5 of the Scripts layer. Select the frame and open the Actions panel. Enter the following:

    stop();

    Close the Actions panel. The stop action is added to frame 5 to prevent the playback head from looping and reloading the code every time it arrives in frame 1 of the movie.

    With the first frame of the movie "loading" the booking.as code and the playback head stopped on frame 5, you can now turn your attention to building the interface. The list of the facilities to be booked will appear in a pop-down menu box.

    Those facilities will be pulled from the MySQL database by the booking.as script interacting with the ColdFusion MX Component and will automatically populate the menu. In this manner, you can add new facilities to the community center and only have to change the MySQL database. The changes made will appear in the menu. This menu is already built for you. The ComboBox component is the ideal solution for this task.

  5. Drag a ComboBox component from the UI Components panel to frame 1 of the Facilities layer. When the ComboBox appears on the canvas, drag it to the upper-right corner of the canvas. Add a blank frame in frame 5 of the Facilities layer.

  6. With the ComboBox component selected, give the instance the name of facilitiesList in the Property Inspector.

Note

In the previous version of Flash, the ComboBox component would require you to point to a function handler to process the changes the user would make. This has changed with the recent release of Flash MX 2004.

Components in Flash MX 2004 borrow from modern coding frameworks in that they use an event-messaging infrastructure to broadcast any changes or selections that a user makes. Any object within your Flash application can listen in on any other component by adding itself to the component's list of objects to which it broadcasts. For example, if you click a button in one component and another is listening, the listening object will automatically be aware that the button was clicked and will process the results of the click.

Thus, when a user makes a selection, the component will broadcast the event, "Something was just selected!" to every object that is listening to that component. This method is very convenient for programmers. They can now create controller objects that respond to the components in your Flash movie and communicate the changes to the objects that work with your data. This is a loose explanation of the Model-View-Controller principle. An example of the event listener object can be found in the booking.as code.


Building the Calendar

Having dealt with the facilities appearing in a pop-down menu, the next step is to create the calendar used to book a time.

  1. If you haven't already done so, download the Chapter 13 files to your desktop. Select File, Import to Library. When the Import dialog box appears, navigate to the Chapter 13 Exercise folder and import the datepad.fh11 file into the movie.

  2. Drag the file from the Library into frame 1 of the Layout layer. Add a frame in frame 5 of the Layout layer. Select the file on the stage, and in the Property Inspector, use the following values:

    Width: 550 pixels

    Height: 400 pixels

    X: 0

    Y: 80.3

    This will set the date pad to fit the stage and sit on the left edge and bottom edge of the stage.

  3. To add the time markers along the side of the calendar in the Layout layer, select the Text tool and click once on the stage. Enter 9:00 a.m. Select all the text with the Text tool and set the font to Arial, the weight to bold, the point size to 16 points, and the alignment to centered. Drag the text to the top area of the date pad and align it to the thin line so that it is approximately at the midpoint of the text box. Repeat this step until you have hours that run from 9:00 a.m. to 6:00 p.m. (Figure 13.8).

    Figure 13.8. The date book starts to take form with the addition of text to the layout.

    Tip

    Select the first time marker, press the Option/Alt and Shift keys, and drag the text down to the next slot. Change the number and repeat for the remaining times.

  4. Select the Text tool, click once on the stage, and enter Choose a Facility:. Use the same font, weight, point size, and alignment as the text in the previous step. Drag it to the left of the ComboBox.

  5. Select the Text tool, click once on the stage, and enter Today's Bookings. Use the same font, weight, and alignment as the text in the previous step. Change the point size to 20 points. Drag it to the left of the ComboBox. When finished, your screen should resemble Figure 13.8.

Building the Booking Movie Clip

When a user chooses to book a tennis court, that facility is chosen from the list in the ComboBox. When that happens, the calendar changes to show the time slots that have already been reserved. The user simply clicks on an open time slot to reserve the chosen time. This happens through the use of a movie clip. Here's how to do it:

  1. Add a frame to frame 5 of the Buttons layer.

  2. Select the Rectangle tool and draw a rectangle that covers the entire area for the 9:00 a.m. time slot, as shown in Figure 13.9.

    Figure 13.9. The booking strip is actually a movie clip named Rectangle Button.

  3. Select the rectangle on the stage and right-click (PC) or Control-click (Mac) the rectangle to open the Context menu. Select Convert to Symbol, and when the Create Symbol dialog box opens, name the symbol Rectangle Button and select Movie Clip as its behavior. Click OK to close the dialog box and add the symbol to the Library.

  4. Select the Rectangle Button movie clip on the stage and press the delete key.

  5. An obvious question is, "If you delete the movie clip, how does it connect to the booking.as script if it isn't on the stage?" One of the most popular features of Flash is the capability to actually pull movie clips from the Library and add them to the stage while the movie is playing. To connect the movie clip to the booking.as script, select the Rectangle Button movie clip in the Library. Open the Library Options menu and select Linkage. When the Linkage Properties dialog box opens, click the Export for ActionScript button and make sure the name in the Identifier area exactly matches the name of the symbol in the Library, as shown in Figure 13.10. Click OK to close the dialog box.

    Figure 13.10. The movie clip is linked to the booking.as script by selecting Export for ActionScript in the Linkage properties.

  6. Double-click the symbol to open the Edit Symbol window. Select the object on the stage. Select Window, Design Panels, Align to open the Align Dialog box. Click To Stage. Click the Align Left Edge button in the Align choices and click the Distribute Top Edge button in the Distribute choices. Close the Align dialog box and return to scene 1 of the movie. This sets the movie clip's registration point to the top-left corner of the rectangle. This is extremely important because the ActionScript pointing to it in the book.as script is going to move it into position based on its registration point.

  7. Drag the movie clip onto the stage and put it in its final position. Note the x and y coordinates of the clip in the Property Inspector and delete the movie clip from the stage.

  8. Open the booking.as script in Dreamweaver MX 2004 and locate the following code at the start of the script:

    timeSlot_x = 100;
timeSlot_y = 53;

  9. Enter the previously noted values into the timeslots x and y. For example, ours would be:

    timeSlot_x = 97.8;
timeSlot_y = 80.3;

    Save the script and quit Dreamweaver MX 2004.

The Technical Side of the Rectangle Button Movie Clip

Having a black box used to hold black text and then deleting that movie clip from the stage may be unfamiliar territory to many of you, and to others, it just doesn't make sense.

We asked Jordan to explain what is going on:

When the movie is running, the rectangles are put on the stage, and the booking.as file makes the clip totally transparent. When it gets placed on the stage, we use its vertical position, the _y coordinate, to determine its location on the stage.

The _y coordinate relies on the height of the button as well as the base timeSlot_y. The formula is:

[View full width]

_root["booking" + loop]._y = (loop *parseInt(_root["booking" +
   loop]._height)) + timeSlot_y;

where loop = the number of buttons we have already put on the stage and timeSlot_y = our base _y coordinate.

The movie clip is deleted because it doesn't need to be present on the stage. It simply needs to be in the Library. It gets pulled from the Library using the following ActionScript:

[View full width]

_root.attachMovie( "Rectangle Button", "booking" + loop, 100 +
   loop );

Since Flash 5, a movie doesn't need to exist on the stage in order to appear in the movie. As long as the movie is made attachable to ActionScript (Export for ActionScript in the Linkage dialog box) in the Library, it will be exported along with all the other used assets. It gets pulled from the Library using attachMovie and is given an instance name (in this case, "booking" + loop) when placed on the stage.

I will admit that attachMovie is one of my favorite ActionScript routines. I have used it for creating random stars in the sky, moving cartoon clouds, and falling snowflakes.

Finishing Up

Being able to show the day is fine. What about moving forward and backward in time? For example, today is July 18. I want to book a tennis court on July 20. Right now, there is no way to accomplish this. Let's assume, for a moment, that I can see July 20, but the courts are all booked. I have time on the 19th and want to see what is available. Again, I can't do that because there is nothing that enables me to go back by one day. Follow these steps to enable a user to move forward and backward in the calendar:

  1. Select the Text tool and draw an empty text box at the top of the stage. In the Property Inspector, set the text type to Dynamic Text and name the instance dateDisp. The booking.as script will find that instance name and add the date to the text box. Enter Jan. 1, 2000 in the text box and set the font to a style, point size, and alignment of your choosing. We used Arial, Bold, 16 point, Flush Left. Be sure to leave some space in the box to accommodate months with longer names.

  2. To move forward and backward, we are going to use a couple of buttons that come packaged with Flash. Select Window, Other Panels, Common Libraries, Buttons. The Button Library will open. Double click the Circle Buttons Folder icon in the Library to open a selection of circular buttons. Drag a copy of Circle Button-Next into the Buttons layer and place it to the right of the date text. In the Property Inspector, name the instance tomorrowBtn. Drag a copy of the Circle Button-Previous to the Buttons layer and place it to the left of the date text. Name the instance of this button yesterdayBtn. Your movie should now resemble Figure 13.11.

    Figure 13.11. The booking calendar is assembled and ready to go. Note the text properties for the date in the Property Inspector.

  3. Publish the movie, being sure to save the .swf file in the Oakbridge folder that holds the book.as script and the ColdFusion Component. Quit Flash.

  4. Launch Dreamweaver MX 2004 and open the BookPage.htm file in your Chapter 13 Exercise Folder. When it opens, save the page to the Oakbridge folder containing the scripts and the .swf file.

  5. Add a layer by using Insert, Layer objects to add an empty layer over the blank area in the middle of the page. Click inside the layer. Open the Files panel and drag the datebook .swf from the panel into the new layer. The file will be much larger than the area permitted. To scale the .swf file, click once on the .swf inside the layer. Handles will appear around the file. Drag the bottom-right corner handle diagonally up towards the upper-left corner. When you have it sized properly, click on the layer and move it inside the layout area as well. Click the Play Button on the Property Inspector, and you will see your booking page as shown in Figure 13.12. Save the file.

    Figure 13.12. The booking application is placed in a Dreamweaver page.

Here is how the whole thing works:

When the movie starts, the user selects a facility to book. When he chooses the facility, its name appears in the ComboBox, and the times it is in use appear in the calendar. This information comes from the selected records in the booking table within the database. Each time slot for that day is checked against the retrieved Recordset, and if a time slot falls within the time indicated on a given record (done by converting each time to a UNIX timestamp and comparing the timestamps), then the time slot is marked as in use. Assume 11:00 a.m. is available—if the user wants to book that slot, he simply clicks on the rectangle in the time slot. The button then triggers the object to send a request to the database to reserve the time. After the time is marked off, the booking movie is then instructed to refresh itself to show which times are now reserved.

It should be noted that, for purposes of this book, this is a very simplified booking procedure. A more complex booking procedure could involve anything from requiring a membership number to book a facility to an e-commerce engine to pay for the booking, as well as an automated engine that refreshes itself as other people use the same utility to book time.

Figure 13.13. The Booking page when viewed through a browser. Note the user wants to book a baseball diamond.

    [ Team LiB ]


Summary

This rather comprehensive chapter gave you an in-depth look at how Flash Remoting makes life easier for you and builds on the skills developed in Chapter 9, "Flash Remoting." This is accomplished by building, in Flash MX 2004, an application whereby the members of the Oakbridge Community Center can book one of the sports facilities offered by the Center online.

We started the chapter by reviewing how we planned the project, the metaphor we settled on, and how we used Freehand MX to visualize the final look of the booking facility.

We reviewed how to plan the data and how that plan fit into the data dictionary we have been using throughout the book. With the dictionary completed, we showed you how to add a table to the MySQL database being used for the center that incorporates the data requirements of the dictionary.

We then showed you the advantages of writing an ActionScript page for Flash in Dreamweaver MX 2004. The chief advantage is accessibility to the code if things go wrong. We then carefully reviewed all the code to be written and gave you a few programming pointers. This code will be called by the final .swf file.

With the code written, we next paid attention to how a database is connected to a Flash movie. This is the job of a ColdFusion MX Component (CFC). We explained what a CFC is and how a CFC works. We then reviewed the creation of the CFC document in Dreamweaver MX 2004.

The coding is the hard work. The easy stuff is actually building the booking application in Flash MX 2004. The first thing we showed you was how to have Flash "call" the ActionScript written earlier, and as you saw, it is one very simple line of code.

We then built the calendar using a drawing created in Freehand MX. We showed you how the key to the application is a ComboBox component in the Components Library of Flash MX 2004, which pulls the names of the facilities in the database into a pop-down menu in the interface.

We also showed you how the use of a movie clip in the Library is what enables the user to reserve a time. We finished the chapter by adding the date and navigation buttons to the application and covering how to place the resulting .swf file in a Dreamweaver MX 2004 page.

Next up is a rather short chapter that shows you how the booking facility can be used in Director MX.


Chapter 14. Assembling the Booking Application in Director MX

This chapter will walk you through what you need to know to use the application created in the previous chapter in a Director movie. Before we get into that, we thought we would dress in our battle armor and briefly discuss the differences between Flash MX 2004 and Director MX and the advantages and disadvantages they offer to you, the developer.

Until the introduction of Flash MX, the Director community ruled the roost when it came to interactive media on CD or the web. Director was the only game in town, and Director developers were a rather content group. In fact, in 1995, when the Shockwave plugin for Director arrived that enabled web playback of Director presentations, clients and the Director community were simply agog at what they could do on the web.

However, there was a dark side as well. The drawbacks were the size of the Shockwave files and the fact that the user had to get the plugin. Those two issues really slowed down the mass acceptance of Shockwave, and, this may come as a profound shock to the Flash community, gave rise to the birth of "Skip Intro" pages or redirection to an HTML page.

Is it any wonder, then, when Macromedia unleashed Flash with its speed and plugin ubiquity, that it muscled Director off its perch? The rest is history. Flash sites are all over the web, and when you mention Shockwave to a Flash developer, there is this inevitable blank stare that says, "What's that?"

Still, Shockwave is a viable alternative to Flash.

For example, what if you want to produce a game requiring a joystick? What if you need to produce an interactive 3D animation (the "Holy Grail" of Flash)? What if you need to—heaven forbid—produce a CD containing a game or, in the case of one of the authors, courseware? When it comes to non-web projects such as interactive kiosks or artistic installations, Director's rich media-handling capabilities, extensibility, and features simply "blow the doors off Flash."


A "Dispassionate" Look at the Differences

First off, if you are a Flash developer, we aren't suggesting you drop it in favor of Director MX. If you are a Director developer, we aren't going to play the "Flash is better" game. In some respects they are quite similar, and if your needs involve nothing more than simple tweening—the new timeline effects in Flash MX 2004 are something else—or basic interactivity, then using Director MX would be, as one author is fond of saying, "Using an atom bomb to light your BBQ." If you are a Director MX user and your needs encompass interactive streaming media capabilities or database connectivity without the use of expensive plugins, then a Flash sprite on the stage is the solution. Still, there are some differences to consider.

Accessibility

If you live in the United States or Canada or reside in a member community of the European Union, accessibility is becoming a jurisdictional issue. There are federal legislative standards dealing with this issue, and for those residing in the United States, Section 508 of the Rehabilitation Act, which deals with web accessibility and disabled Americans, is still reverberating through the U.S. If you want to do work for the feds, you meet their accessibility standards. Though there are federal guidelines around this, the message is getting out, and soon the private sector and the educational sector will be insisting on accessibility.

Flash is getting there, but its accessibility features are still rudimentary. For example, if you want to check your Flash movie for accessibility, you select Commands, Detect Accessibility, and you will see the dialog box shown in Figure 14.1. Essentially, Flash enables you to add or hide features that can be detected by screen readers.

Figure 14.1. Flash's accessibility features are still in their infancy.

We get deeper into accessibility issues in Flash MX 2004 in Chapter 19, "Debugging and Testing," but if accessibility is a fundamental issue, then Director MX may be the solution.

With Director MX's Text-To-Speech feature using the Speech Xtra, captioning, and other accessibility behaviors, you can build your own screen reader that is independent of the browser.

The Speech Xtra simply adds special commands to Lingo that "read" the text on the stage. Keep in mind that you must add it to the movie's list of Xtras. Follow these steps to add the Speech Xtra:

  1. Select Modify, Movie, Xtras to open the Xtras dialog box (see Figure 14.2).

    Figure 14.2. The Speech Xtra in Director reads the text on the screen.

  2. Click the Add button to open the Add Xtras dialog box.

  3. Scroll down to the Speech Xtra and click OK to close the Add Xtras dialog box.

  4. The Speech Xtra will appear in the list in the Xtras dialog box. Click OK to close it and save the movie.

Tip

If you are curious as to whether the Speech Xtra will work on your computer, open the Message Window—Control-M (PC) or Command-M (Mac)—and enter the following:

put voiceInitialize()

Press the Return/Enter key. If the result is 1, the Speech Xtra is working. If the result is 0, you may not have text-to-speech software installed on you computer.

Video Integration and Extensibility

Until the release of this version of Flash, video integration was in Director's court. This current release of Flash has moved this issue to a position squarely on the fence.

Prior versions of Flash either resorted to rotoscoping—frame-by-frame video captures and playback—or were limited to roughly two minutes of video in any one Flash movie. Exceed that time limit, and there was a noticeable performance and quality degradation. This is no longer the case.

This new version of Flash contains a Video Import wizard and external FLV (flash video) support. The wizard, when importing video clips, provides additional control over the frame ranges you want to import, reusable encoding settings, and new capabilities for cropping color correction. The most important change is that you can now play FLV files back from disk directly (without the need to pack video into a SWF). This eliminates file duration limitations and optimizes delivery so that long videos can be played back with limited RAM and without having to download the entire file from the web server. We get deeper into both of these new features in the next chapter.

Finally, the FLV format has now migrated to the industrial-strength digital video editing applications, such as Avid and even Media Cleaner Pro. The implication is that the video producers who long kvetched and whined about the lousy quality of their work in Flash can now be told, "So do it yourself, if it's so lousy."

Director, being the grand old man, approaches the Flash news with a "Yeah, so?" The application supports QuickTime for Windows and Macintosh, AVI, QuickTimeVR, and RealMedia. In fact, many animators preparing Flash animations for broadcast will import the entire .swf file into Director for subsequent output to videotape.

Extensibility makes Director the winner by a long shot. The application has hundreds of free or commercially-available Xtras. Still, Flash has suddenly become extensible as well. The current release of Flash also gives third party commercial vendors and developers the ability to offer a number of components for use in Flash. This means developers no longer have to rely on Macromedia for these components.

Scripting

Flash developers tend to look down their noses at Lingo. The reason is they regard Lingo's dot syntax as being somewhat clunky and old-fashioned. Director developers attach a joystick to their machines and ask their Flash counterparts, "Can ActionScript do this?" Our response is, "Who cares?"

As you saw in Chapter 12, "Flash Communication Server MX: Moving Dynamic Data Through Director MX and Flash MX 2004," the two languages can talk to each other, if there is a Flash sprite on the Director stage. Unfortunately, it doesn't work the other way.

Even so, as you have seen, Director MX now supports ColdFusion MX, Flash Communication, and Flash Remoting. The implication is that another dimension has been added to Director MX. It can be used as an application-building tool in the same manner as Flash MX 2004.

Which to Choose?

We regard this one as a "sucker question." There is no correct answer, and no matter how you answer it, you leave yourself open to debate over arcana, not substance. In many respects, it is an internecine debate along the lines of the useless Mac versus PC debate that has been going on for years. Look at them as tools and decide which one best solves the task at hand.

For the majority of web tasks, Flash is all you need. It's is a lighter version of Director, thanks to vectors, it's simpler and easier to use, and the Flash Player has a larger installed user base. This isn't because it's better than Director. It's because Flash is a widely-adopted web application and web site development tool.

When your needs stretch the limits of Flash and you need to develop a specialized interactive web application or game, then Director is the tool for the job. Add to that list such needs as 3D, full screen video, or input devices, and then Director, again, is the tool.

Move outside the web, and not choosing Director is a fatal error. For example, CD, DVD, or kiosk applications almost demand you use Director because the information is "self contained" and doesn't require a Shockwave plugin. Even then, Director includes some pretty nifty ways of accessing the web from these media.


Wrapping the Booking Facility in Director MX

In the previous chapter, we created a rather interesting reservation system for the Oakbridge Community Center. This application made extensive use of ActionScript and ColdFusion Components to communicate with a database. This process is more commonly known as Flash Remoting.

In Chapter 12, we showed you how you can utilize the power of the Flash Communication Server MX using Director. In this chapter, the focus is on the Flash Remoting process and Director. It is easier than you might think.

Creating the Director MX Wrapper

As you learned in Chapter 12, a Flash sprite on the Director stage gives you instant access to the Flash Communication Server MX. The same situation exists if you need access to a MySQL database through ColdFusion MX. All you need on the stage is a Flash .swf file.

Before you get started, download the Chapter 14 files from the book's site. Also make sure the MySQL database created in the previous chapter is available and that all files are in the Oakbridge site folder.

The wrapper we are going to build is fairly basic, but it will show you two things:

  • Director can be used as a control center for applications created in Flash.

  • You can use a button created in Director to navigate to and play a Flash movie on the Director stage. The implication is that you have the capability to place multiple Flash .swfs in the Director timeline and navigate to each one at will.

To build the Director MX wrapper, follow these steps:

  1. Open Director MX. When the movie opens, select File, Save As, and name the movie occ_controller.dir. Click OK.

  2. Click once on the stage. If your Property Inspector isn't open, press Control-Alt-S (PC) or Command-Option-S (Mac) to open it. Click the Movie tab in the Property Inspector. Set the stage size to 640 pixels wide by 480 pixels high. Set the stage color to white.

  3. Select Insert, Media Element, Flash Movie to open the Flash Asset Properties dialog box. Click the browse button, and when the Open Shockwave Flash dialog box opens, navigate to the Oakbridge site folder in the ColdFusion MX folder's wwwroot folder (see Figure 14.3). Locate the booking .swf created in the last chapter, select it, and click OK.

    Figure 14.3. The booking.swf file is brought into Director MX from the Oakbridge site managed by ColdFusion MX.

  4. You will be returned to the Flash Asset dialog box. Click once on the Linked check box. A filled check box indicates linking is turned on. This does not embed the .swf in the Director movie but actually treats it as an external file. When the Flash sprite appears on the stage at runtime, Director will automatically load the file into memory by looking in the location of the sprite as shown in the Link File area of the dialog box.

    Tip

    How can you tell the difference between a linked .swf file and one that isn't? The unlinked .swf file will have a picture in the cast. The linked file will just have text identifying it in the cast, as shown in Figure 14.4.

    Figure 14.4. A linked Flash movie is in Castmember slot 1. The unlinked file is in slot 2.

  5. Click once over frame 10 of the Marker channel. It is the white area at the top of the score. A triangle will appear, and the words "New Marker" will appear beside it. Select the words and change them to Booking.

    Tip

    Accidentally clicking in the Marker channel and adding markers is a common mistake. To remove a marker, simply drag it off the Marker channel. When you release the mouse, it will be gone.

  6. Drag the Flash sprite to frame 10 of channel 1 on the stage. If the flash sprite span is longer than 5 frames, click the handle at the end of the sprite span in channel 1 and drag it back to frame 15.

  7. The beauty of using Flash is its use of vectors. If the Flash file on the stage is too large or too small, it can be resized without affecting the performance of the .swf file. Another neat thing is the movie clip being used to create the booking will still be placed in its proper location. This is because when the file runs, the .swf file will call the booking.as script created in the previous chapter. When finished, your stage and score should resemble those shown in Figure 14.5.

    Figure 14.5. The Flash sprite is placed and resized on the Director stage. Note the marker over frame 10.
Adding the Navigation

The plan is to have the movie wait on frame 1 until the user clicks a button. That button click will send the playback head to frame 10 and loop the playback head over frame 15. Here's how to do it:

  1. Open the Library palette by selecting Window, Library. A panel named Code:Library will open. This is a library of pre-coded behaviors. Click and hold on the Library List button—the one with the squares at the top-left of the panel—and select Navigation from the pop-down menu. When the Navigation items appear, drag the Hold On Current Frame Library item to frame 15 of the Frame Script channel. The behavior will appear in the Frame Script channel, and a copy will also be placed in cast member slot 2.

  2. Drag the Hold On Current Frame behavior from the cast and drop it into frame 1 of the Frame Script channel.

  3. Click once in frame 1 of channel 2. Select the Text tool and click once on the stage to add a Text sprite to your movie. Enter the word Booking. This word is going to be used as the button that enables us to navigate to frame 10.

  4. Select the word and open the Design: Text Inspector panel (Window, Text Inspector). When the Text Inspector opens, set the font to 24 point Arial, Bold, Flush Left. If the text sprite's span exceeds 15 frames, drag the end handle back to frame 15. Your score should resemble that shown in Figure 14.6.

    Figure 14.6. The booking button is in place, and its text is formatted using the Text Inspector.

    Tip

    Pressing Control-T (PC) or Command-T (Mac) are other ways of opening the Design: Text Inspector panel.

  5. Click anywhere in the sprite span for the booking button in channel 2. This will select the entire sprite span.

  6. Open the Behavior Inspector tab in the Code panel and click the + sign to add a new behavior. Select New Behavior from the pop-down menu, and when the Name Behavior dialog box opens, name the behavior Go Booking. Click OK, and the behavior name appears in the panel.

  7. Select the behavior in the Behavior Inspector and click the Script Window button at the top of the panel. It looks like a newspaper. This will open the Script Editor.

  8. When the Script Editor opens, enter the following:

    on mouseup
go "Booking"
end mouseup

  9. Click the Lightning bolt to compile script and check for syntax errors. A syntax error will result in a dialog box showing you the mistake. If there are no errors, nothing will happen. Close the script editor and save the file. Your cast and score should resemble that shown in Figure 14.7.

    Figure 14.7. The Director file is finished and ready to be "shocked."
Creating a Shockwave Player for Web Playback

The steps to create a Director Shockwave movie are remarkably similar to the "Publish" steps in Flash MX 2004. To create a Director Shockwave movie:

  1. Select the Movie tab in the Property Inspector and change the number of channels from 150—the default value—to 5. A Director dialog box will open, asking you if you really want to do this. Click OK. The movie only uses two channels, and having 145 empty extra channels will only eat up bandwidth.

  2. Select File, Save and Compact.

    This step optimizes the movie for playback and is the absolute last thing you do before creating as Director Projector of Director Shockwave Movie. The progress bar that briefly appears indicates the optimization process.

  3. Select File, Publish. This will create a Director Shockwave file and accompanying HTML file and place them in the same folder as the one where you saved the .dir file.

  4. If the .swf and the HTML file are not in the ColdFusion MX directory, move them to that location.

  5. Open the HTML file in a browser, and the movie will play.

Note

When creating a Shockwave movie, you may want to exercise a bit more control than simply selecting Publish in the File menu. In this case, select the Publish Settings from the file menu.

The other thing to keep in mind is that it is really easy to get confused when you have a couple of .swf files in a folder. This is why the icons are radically different from each other and the file extensions are different. A Director Shockwave movie uses the .dcr extension, as shown in Figure 14.8.

Figure 14.8. Though they are both known as Shockwave files, the icons for the Flash .swf file and the Director .dcr file do look different.

    [ Team LiB ]


Summary

This has been a relatively short but important chapter. Its intent was twofold: to explain the differences and similarities between Director MX and Flash MX 2004 and to show you how simple it is to have Director communicate with ColdFusion MX through Flash Remoting.

We looked at how each addresses accessibility issues. The consensus is that Flash is just now starting to address this important issue. We then showed you how to use the Director Speech Xtra to turn a Director movie into a screen reader.

The next topic for examination was video integration and extensibility. When it comes to video integration, it is a draw, thanks to the new video handling capabilities of Flash MX 2004. Though Director can manage an extensive list of video formats, Flash's video format, FLV, is now an output option on high-end digital video editing platforms. The capability to extend either application through the use of plugins and Xtras is still Director's advantage. We did point out, though, that the capability to add third party components (which is new to Flash MX 2004) might make this a dead heat in the not-too-distant future.

From there, we showed you how to use Director MX as a "wrapper" for the Flash MX 2004 Booking application constructed in the previous chapter. The key here was to link the .swf file to the Director movie, rather than embed it in the Director movie.

We finished the chapter by showing you how to create a Director Shockwave Player for web playback and offered a couple of tips for optimizing the movie, prior to it being "shocked."

Next up, if you thought adding video to a Flash movie was something else in Flash MX, see what Macromedia has done with video in the latest release of Flash.


Part IV: Building the Online Meeting Facility

15 Embedding and Streaming Video in Flash MX 2004

16 Building the Chat Room

17 Flash MX 2004 and Real-Time, Two-Way Communication

18 Building the Meeting Application


Chapter 15. Embedding and Streaming Video in Flash MX 2004

Until the release of Flash MX in 2002, if you were to gather a group of Flash developers and ask them what was missing, the answer was always, "The capability to play video." Until then, that capability was primitive at worst or complicated at best.

Video could be brought into Flash, but precise control was a huge issue. The best one could do was to import the video and live with a lengthy timeline (thanks to each frame of the video being translated into a Flash frame) or trace the frames needed and delete the rest. There were some really great creative techniques developed by Hillman Curtis and others, but on the whole, adding video to Flash was an unpleasant experience.

Flash MX changed all that. It included its own codec—Spark from Sorenson Media—that compressed the file during import. The big change was that the codec compressed and decompressed the .swf file at runtime. This meant the video file in the Flash movie could be treated as a symbol in the Library, rather than an object the movie uses when it plays.

Still, while developers were grateful for the improvement, there were a couple of problems. The first was that the Spark codec did some amazing work, but a video whose duration was longer than two minutes experienced image and playback degradation. The other was embedding the video. Even though the Spark codec offered some astounding results—a 2MB video file being compressed down to 800KB, for example—the file was still embedded in the .swf, which meant Flash files with video were understandably large.

This release of Flash addresses those two issues—big time—and you can expect to see video in Flash sites becoming the norm, not the exception. The addition of an Import wizard, video control behaviors, and the capability to stream a video file from a server are three changes. Another major change is the inclusion of the FLV format as an output option for many of the high-end video suites and video editing and manipulation tools. No longer does the Flash developer have to contend with the video supplier complaining about the quality of "my work" on a Flash site. Now you can simply ask him or her to supply you with the file in the .flv format.

Before we dig deeper into the discussion of video in Flash MX 2004, you should understand that there are now two levels of video management in Flash. If you use the version of Flash MX 2004 packaged with Studio MX 2004, you still have quite an array of tools at your disposal. If you are looking to do some advanced video work in Flash, then Flash MX Professional 2004 should be your tool. The following video-editing applications are supported by the FLV Export plugin that only ships with Flash MX Professional 2004:

  • AfterEffects (Windows and Macintosh)

  • Anystream (Windows)

  • Avid (Windows and Macintosh)

  • Cleaner (Windows and Macintosh)

  • Compressor (Macintosh)

  • FinalCut Pro (Macintosh)

  • Premiere (Windows)

  • Procoder (Windows)

  • QuickTime Pro (Macintosh)


Digital Video Overview

Digital video has a long and tortured history on the web. When it first arrived, the best results were reserved for those with T1 lines, cable modems, or DSL lines. If you used a dial-up service, a video window of 80 by 60 (or smaller) was the norm, and even then, the wait for the movie to download was a long one. The situation is a bit different today as bandwidth costs continue to fall. At the same time, the compression technology in the area of streaming has dramatically improved.

Even so, the creation of digital video is technically challenging and time-intensive when it comes to creating web content. The time required to produce a professional-grade digital video from the second the artist draws the storyboard on paper to the delivery of the FLV is measured in weeks or months, not days or hours.

Video in Flash MX 2004

Flash MX supports the following formats, providing the QuickTime 4 Player (or better) is installed on your Windows or Macintosh machine:

  • Audio Video Interleaved (.avi): The .avi format is supported on both platforms, though the AVI format is a bit volatile on a Macintosh.

  • Digital Video (.dv): The .dv format is supported by both platforms, and this format is the standard for digital video cameras.

  • Motion Pictures Expert Group (.mpg or .mpeg): MPG or MPEG files are the most commonly used files for streaming video through a web browser.

  • QuickTime (.mov): The .mov file is supported on both platforms, and it should come as no surprise to discover that it's the Macintosh standard.

  • Windows Media File (.wmv, .asf): This Windows-only format is available only if you have installed DirectX 7 or later.

Frame Size

If you need full screen, full motion playback of a video, the only tool in the Studio available to you is Director MX. Even then, web playback of video of these dimensions is not recommended. In fact, don't do it.

The physical size of a video on the web is small for obvious reasons. A 320x240 video requires significantly more bandwidth and load time than one that is 160x120. When deciding the frame size of a digital video, it is best to "fall in love with the user" and not to "fall in love with the technology." Though bandwidth is readily available in North America and Europe, there are still a lot of people around the world using a dial-up connection…and paying for the time online.

Movie Length

Bottom line? Long videos have a larger file size and bandwidth requirement than short ones. Your audience will vote with its mouse if it has to wait an inordinate amount of time for a compressed video to load and play. If they decide to wait, long videos that experience a streaming lag—the playback head catches up with the stream—playback will be interrupted, and the experience will be less than pleasant.

The new capability in Flash MX 2004 to link to a video and stream it from the server goes a long way toward addressing this frustration. Still, when it comes to the web, the shorter the video, the better.

Frame Rate

Frame rate is essentially the speed at which the video plays. On a television, the rate is 29.97 frames per second (the NTSC standard), which is unacceptably high for web playback. In Flash, the movie plays at the frame rate—12 to 15 frames per second—set for the Flash movie. If you have a video where there is relatively no change in the background—a newscaster—then you can get away with a rate as low as 10 frames per second or lower.

Compression

When the students of one of the authors first experience digital video, they are simply astounded that the file size of an uncompressed video is measured in terms of gigabytes and not megabytes or kilobytes. This is why digital video needs to be compressed.

In Flash, the Spark codec uses temporal compression. When it compresses the movie, it ignores individual frames and looks instead at the changes between the frames. The frames are the key frames and the frames between them are the "difference" or "delta" frames. Delta frames are significantly smaller than the key frames because, in very basic terms, the pixels that don't change between the key frames are removed. The result is a significant reduction in file size. The downside is that it follows the first rule of digital media physics, which states, "For every action, there is an equally opposite and ugly implication." In the case of video compression, finding the proper balance between image and sound quality and file size is a time-consuming process.

When you play your video through the web using Flash, the Spark codec inside the Flash Player decompresses the movie. This is important to know. By having this capability built into the .swf, the load on the user's processor and demand on RAM is significantly reduced.

Data Rate

Data rate is not how fast the video plays. This is the speed at which the information passes from the modem to the computer's processor. Depending upon the connection, this rate can vary anywhere from 1.5 Kbps to 50 Kbps.

The biggest mistake you can make is to set the data rate too high. There is a point Sorenson calls the "quality ceiling," where, regardless of data rate, the quality is the same. In Flash, due to its use of the Spark codec, this ceiling is achieved at lower data rate than you might expect.

To calculate the data rate, use this formula from the Sorenson people:

Data rate = width x height x Frame rate / 48000.

For example, a 320x240 video with a frame rate of 12 frames per second should have a data rate of 19.2 Kbps.


Incorporating Video into Flash MX 2004

Now that you are aware of some of the issues and technologies driving digital video, we can explore how video arrives in Flash and how it can be controlled using some of the new features in the application.

The first big change is the use of a wizard to manage the importation of digital video into Flash. Prior to this release, any video that was imported into Flash opened the Spark Codec dialog box. Though it was quite intuitive, to occasional users of video in Flash, it was also quite mysterious. We will be reviewing this new feature shortly.

The next big change is the addition of behaviors to control video playback. The new Behavior panel in Flash MX 2004 contains a number of behaviors solely designed to control digital video. They range from Play to Rewind. We will be using these as well.

The last big change is probably the most profound. Video can either be embedded in the Flash movie, or it can be streamed for playback through the Flash Communication Server MX. Until this release, the video file could only be embedded into the Flash movie. This meant the video was added to the Library and was compiled into the .swf file when the movie was published. The implication, of course, was larger file sizes and longer waits for the video to load.

The capability to stream a video file sitting on a server and play it through the Flash Player will most likely result in an exponential increase in the use of video in Flash sites. The other use you will start to see is the creation of Flash movies whose sole purpose is to play a video from a frame or other location in Dreamweaver. In addition, the use of the Flash Communication Server to "call" the video into a dynamic page means dynamic sites can make increased use of video.

Importing Digital Video into Flash MX 2004

The first thing to be aware of is that you call the shots. It is up to you to decide whether the video is embedded or linked. Use the file size, bandwidth profiler, video length, and frame size to help you make this determination. Then again, if the company hosting the site does not have the Flash Communication Server installed or available, the decision is essentially made for you.

The next thing to be aware of is to not be terribly surprised if your video supplier/producer wants to provide you with an FLV file. As we pointed out earlier, the FLV Export plugin is now available for the leading video editing systems. Once again, the decision regarding whether to link or embed is up to you.

A FLV file imported into Flash will go straight into the Library or onto the timeline. A QuickTime video will open the new and improved Flash MX 2004 Video Import Wizard.

Using the Flash MX 2004 Video Import Wizard

As noted previously, in the previous version of Flash, importing a video opened up the Spark Video Import window shown in Figure 15.1. This window, to people that understood the information requested, was simple to use. To many users, it was rather cryptic. The move to a wizard-based approach not only makes the process less intimidating but also follows the lead of Dreamweaver's wizard-based approach to the complex subject of defining a site and a remote server.

Figure 15.1. The old way of importing digital video is now history.

Before we start, be sure to download the Chapter 15 Exercise folder from the book's web site to your desktop. To import a digital video and prepare it for Flash playback, follow these steps:

  1. Open Flash MX 2004 and select File, Import, Import to Library to open the Import to Library dialog box.

  2. Navigate to your Chapter 15 Exercise folder and select the subway.mov file. Click Open to launch the Video Import dialog box shown in Figure 15.2.

    Figure 15.2. Importing a QuickTime movie or other non-.flv video format supported by Flash MX 2004 opens the Digital Video Import Wizard.

    The dialog box offers you two choices. You can choose to embed the file or link to an External Video file.

    Embedding creates the .flv file that is headed for the Library. The second choice is worded a bit improperly. When a QuickTime video is "linked," it will not become a part of the .swf file, and the Flash file must now be exported as a QuickTime movie with the inevitable loss of interactivity through ActionScripting.

  3. Select the embed option and click Next to open the Editing Screen of the wizard.

  4. Two more choices are presented to you. You can choose to embed the entire movie or edit the video first. You will also see a yellow alert triangle at the bottom of the wizard. It is telling you it can't find an audio track. There isn't an audio track, so ignore it. Select Edit Video First and click the Next button to open the QuickTime Editing screen (see Figure 15.3).

    Figure 15.3. The editing area of the Import Wizard offers you some very basic editing capabilities.

  5. As you can see, the Video Editing tools are not exactly industrial-strength. The area at the right enables you to combine a series of clips into one video. Frankly, if you need to do that, this isn't the tool for the job. On the left side are the controls. The yellow triangle is the playback head, which can be dragged across the timeline. The half triangle under the playback head and on the left side of the timeline is the "In" point, and the one of the right is the "Out" point. The In and Out tools are also located at either end of the video playback controls. Drag the playback head across the video, and you will notice there is a lot of black starting at the 5.9-second mark of the movie. Drag the Out marker to the left, and when the timer reads 5.9 seconds, release the mouse. Click the Create clip button, and the clip moves into the list at the left (see Figure 15.4). Click Next to open the Encoding window.

    Figure 15.4. About one half second has been trimmed off the end of the video and a new clip created.

  6. The encoding window offers you two choices. The Compression profile is the target modem available through the pop-down. Select 56 Kbps modem from the choices.

    The Advanced settings are a bit misleading. Selecting Create New Profile from the pop-down opens the Advanced settings window for the video where you can change many of the video's physical properties. Click the Edit button in the Compression profile area to open the Encoding Part 2 Window (see Figure 15.5).

    Figure 15.5. The bandwidth, key frames, picture quality, and synchronization settings are found in the Advanced Encoding dialog box.

  7. Select High Quality keyframes and click the Synchronize check box to ensure the movie plays at the same rate as the Flash movie. Click Next to open a summary of the settings. Click Next to return to the Encoding dialog box.

    Click Finish, and a dialog box with a progress bar will appear. When it closes, open your Library, and the video will appear in the list (see Figure 15.6).

    Figure 15.6. The QuickTime movie is converted to a FLV movie and placed in the Library.
Using the New Video Behaviors to Control a Flash MX 2004 Video

New to this release of Flash are a number of pre-coded behaviors designed to control digital video. They are an absolute "snap" to use. To create a video controller, follow these steps:

  1. Import the CIAS.flv file from your Chapter 15 Exercise folder to the Library of the currently open Flash file. When the Import progress bar is finished, the video will appear in the Library.

    Note

    Recognizing there is no such thing as free content, the authors would like to thank Talon GTS (http://www.talongts.com) of Guelph, Ontario, for allowing us to use the small video clip taken from their production for the Canadian International Air Show used in this exercise. The video is copyright by Talon GTS. As a sidenote, Jordan, one of the authors, composed the soundtrack (and thus, holds the copyright for the soundtrack). Neither Chris nor Tom had anything to do with the video, so we hold the copyright on nothing.

  2. Add two more layers to the Flash movie. Name the three layers from the top down:

    • Scripts

    • Buttons

    • Video

  3. Select frame 1 of the Scripts layer and press the F9 key to open the Actions panel. Enter the following action:

    stop();

    Close the Actions panel. This action will hold the Flash movie on the first frame and stop the video from playing.

  4. Select frame 1 of the Video layer. Drag the CIAS video from the Library onto the stage. When you release the mouse, an alert box will tell you the timeline is too short for the video and ask for permission to lengthen it. Click OK. The video, at least the first black frame, will appear on the stage.

  5. Select frame 1 of the Buttons layer. Open Window, Other Panels, Common Libraries, Buttons to open a Library of pre-designed buttons.

  6. In the Library–Buttons panel, double-click the briefcase beside Circle Buttons to open the button choices. Drag copies of the Play, Rewind, and Stop buttons onto the stage. When finished, your stage should resemble Figure 15.7.

    Figure 15.7. The stage is set to "code" the buttons that came from the Button Library.
Adding Video Behaviors to the Buttons

With everything in place on stage, you can now add the code to the buttons that will control the video. This code will come from the Video Behavior Library. Follow these steps to apply a video behavior to the Play button.

  1. Select the video on the stage and give it the instance name of airShow in the Property Inspector. If the video doesn't have an instance name, the behavior will prompt you for one and even add one if you can't decide.

  2. If your behaviors panel isn't visible, select Window, Development Panels, Behaviors or press Shift-F3 to open it.

    The Video Play behavior is going to be attached to the Play button on the stage, and it will point to the video.

  3. Select the Play button on the stage. Press and hold the + sign in the Behavior panel—the Add Behavior button—to open a pop-down menu of behaviors.

  4. Select Embedded Video, Play to open the Play Video dialog box shown in Figure 15.8. Select the instance name of the video in the dialog box, and it will appear in the text input box. Select Relative to set a relative path to the video and click OK to close the dialog box.

    Figure 15.8. For the Video behaviors to work, the dialog box will ask you to identify the instance of the video being controlled.

  5. Add the Rewind and Stop Video behaviors to the Rewind and Stop buttons on the stage. The Rewind button behavior will ask you how many frames to step back. The default is two. This means if you press the button and keep it pressed, it will skip backwards to every other frame of the movie until the start.

  6. Save the movie to your Exercise folder. Select Control, Test Movie. The Exporting Flash Movie progress bar will appear, and when it is finished, the movie will appear in the Flash Player. Click the Play button, and the video will play (see Figure 15.9). Try clicking the other buttons. When finished, close the Flash Player by clicking the Close box at the top of the Document window.

    Figure 15.9. The video controls and the video playing through the Flash Player.

Note

New to this version of Flash are the behaviors. Behaviors are prewritten codes designed to help non-coders go right to work. You can use behaviors to control video, movie clips, and sound files. As you saw in this exercise, they are rather easy to implement in a Flash movie.

There are a couple of reasons behind the addition of behaviors to Flash. The first is the loss of the Basic Mode from the ActionScript editor. Replacing it with a collection of prewritten code should enable non-coders to learn how ActionScript works. The second is that behavior collections are not new to Macromedia. Director has an extensive library of prewritten behaviors.


Streaming Video Through the Flash Communication Server MX

If anything will fuel an explosion of video use in Flash MX 2004, it is the capability to use the Flash Communication Server MX to stream a video on the server through the Flash Player.

The previous release of Flash only offered the developer two choices. He or she could choose to embed the entire video in the Flash movie, which meant a longer wait for the Flash movie to appear in the web page, or he or she could use a preloader. The only other option was to sacrifice interactivity and output the whole thing as a QuickTime video.

Just the fact that the video isn't included in the .swf file will result in exceedingly fast load times.

Preparing to Stream

The first step in the process has nothing to do with Flash. You are going to have to tell the Flash Communication Server where to find the video. This means it will have to reside in the FlashComm folder in the Inetpub folder of your PC. To create the directories and resulting path to the video, follow these steps:

  1. Open the Inetpub folder in your in your PC and open the FlashComm folder. Open the wwwroot folder and add a new folder named ch15. Open this folder and create a new one named streams. Open this folder and create a new one named feature. Thus the path to the video will use the following directories: ch15/streams/feature/.

    This is how the Flash Communications Server (FCS) manages streaming video. To "call" the video, you have to instantiate the FCS application and give it an instance name. In this case, we are naming it "feature" (as you will see when we call our URL). Thus, the stream has to be in a folder with the same instance name.

  2. Copy the CIAS.flv and the stream.as files from your Chapter 15 Exercise folder to the new feature folder.

  3. Copy the main.asc file in the Chapter 15 Exercise folder to the feature folder. This is the script that will call the component used to play the video in the Flash movie. If you remember, the single line of code used is:

    load("components.asc");

Preparing the Flash MX 2004 Movie

With the folder structure in place, you can now concentrate on building the Flash movie. Follow these steps:

  1. Open Flash MX 2004, and when the movie opens, save the movie as stream.fla to your Chapter 15 Exercise folder.

  2. Create the following 4 layers:

    • Labels

    • Actions

    • Text

    • Components

  3. Select frame 1 of the Labels layer. In the Property Inspector, name frame 1 Login. Add a key frame at frame 10 of the Labels layer and name it Feature. Add a frame at frame 20 of the Labels layer by right-clicking (PC) or Control-clicking (Mac) frame 20 and selecting Insert frame from the Context menu.

    As you may have guessed, the user will be logging in between frames 1 and 10.

  4. Add a keyframe at frame 10 of the Actions layer.

  5. Select frame 1 of the Text layer. Select the Text tool and click once on the stage. Enter the following text:

    To see our latest group outing at the Oakbridge Community Center:

    Use your discretion regarding fonts and point size. When finished, add a frame at frame 20 of the Text layer.

  6. Select the first frame of the Components layer. Open the Components panel and drag a copy of the Button component to the stage. Select the button and name it loginBtn in the Property Inspector. Click the Parameters tab of the Property Inspector and change the label name to Click Here.

  7. Add a keyframe in frame 10 of the Components layer. With the keyframe selected, open the Panel Options menu for the Library panel. When the pop-down menu appears, select New Video from the choices presented. This simply creates a placeholder for the video. Drag the Embedded Video Library item to the stage (it looks like a box with a big "X" through it) and set the width and height in the Property Inspector to 320 wide and 240 high. These are the dimensions of the video in the streams folder created in the previous section.

    When you finish, your timeline and stage should resemble Figure 15.10.

    Figure 15.10. The stage is set and only requires the code to make it work.
Coding for Video Streaming

The file that pulls the video into the Flash movie is currently sitting in the feature folder. The file is named stream.as, and its job is to locate the feature folder and connect the video placeholder in frame 10 of the movie to the Flash Communication Server when the button in frame 1 is clicked. Here's the code in the stream.as file:

[View full width]

// ActionScript Document
// To log into the Flash Communications Server and automatically Stream a Video
// Jordan L. Chilcott

// our URL - CHANGE TO MATCH YOUR SERVER!
ourURL = "rtmp://10.0.1.21/ch15/feature";
// NOTE: 'feature' is known as an instantiated session within the server (it is not a
   subdirectory in this case)
// Instantiate the NetConnection object
ourConnection_nc  = new NetConnection();
login = function()
{
      ourConnection_nc.connect(ourURL); // connect to our Flash Comm Server
      ourConnection_nc.onStatus = function( info )
      {
            trace( "LEVEL: " + info.level + " -- CODE: " + info.code );
      }

      gotoAndPlay( "feature" );
}

If you want the movie to work on your machine, be sure to change the RTMP values in the code to match your server's IP address.

To add the code to your movie, follow these steps:

  1. Click once in frame 1 of the Actions layer, press F9 to open the Actions panel, and add the following code to stop the playback head on frame 1 of the movie:

    stop();

    Close the Actions panel.

  2. Select the button in frame 1 of the Components layer and make sure the instance of the button in the Property Inspector is named loginBtn. The button doesn't need to be coded; just given an instance name. The button handler in the stream.as file will do the work of attaching the button to the login function using the onRelease event handler.

  3. Click once on the keyframe in frame 10 of the Actions layer. Open the Actions panel (press the F9 key) and enter the following code:

    videoStream_ns = new NetStream( ourConnection_nc );

videoStream_ns.onStatus = function( info )
{
      trace( "LEVEL: " + info.level + " -- CODE: " + info.code );
}

ourVideo.attachVideo( videoStream_ns );
videoStream_ns.play( "CIAS" );

stop();

    There are basically three lines to this code that perform some significant functions.

    The first line creates a NetStream object, which is our streaming connection to the Flash Communication Server.

    The second line attaches the embedded video to the NetStream object. This basically "wires" the FLA interface to the Flash Communication Server.

    The last three lines tell the stream which movie to play on the Flash Communication Server and to stop the playback head on frame 10 of the Flash movie. In this case, it will play the CIAS movie located in the feature folder.

  4. Publish the movie, place the .swf file in a Dreamweaver MX page, and play it through a browser (see Figure 15.11).

    Figure 15.11. The members of the Oakbridge Community Center visited an air show.
    [ Team LiB ]


Summary

The new video handling capabilities of Flash MX 2004 were the subject of this chapter.

The chapter started with a brief overview of the new features and how they are fundamentally different from all previous methods of video management in Flash MX 2004. A big change is the inclusion of the FLV Export plugin in Flash MX Professional 2004 that connects to all the major video editing systems and software.

We examined the technology of digital video by reviewing the file formats that can be used in Flash MX 2004 and the effects of frame size, movie length, and frame on video performance in Flash MX 2004. We also looked at the need for compression and how the Spark codec manages this.We finished by discussing the data rate issue and how to calculate the data rate.

We then moved from technology into process and reviewed how to import digital video into Flash MX 2004. This involves the new Video Import Wizard, and we thoroughly reviewed many of the features of the wizard. We also reviewed the new video behaviors included in Flash MX 2004. We showed how the simple association of a behavior with a button can quickly create a powerful video controller.

We finished the chapter with an exercise that shows you how to utilize a very powerful feature new to Flash MX 2004. This is the capability of the Flash Communication Server MX to stream a video on the server into a video placeholder in your Flash movie.

In the next chapter, we downshift from streaming video and build an interactive chat room for the Oakbridge Community Center.


Chapter 16. Building the Chat Room

In late 1996, one of the authors was involved in a project that, at the time, was absolutely fascinating. He and a colleague had been asked by the college where they were teaching if they would be interested in delivering an online Photoshop course.

After a comprehensive examination of the technologies available at the time, they decided to conduct the online sessions using a "chat" format. Then they listed many of the features they wanted to incorporate, such as these:

  • Real-time chat.

  • Up to 60 participants.

  • Fast upload even if the modem was 14.4. (That isn't a typo. People actually used 14.4 modems in 1997.)

  • Participant list to see who is in the class.

  • Instant transcript available for download.

At the time, these capabilities were either nonexistent, split across many commercial products, or grossly overpriced. The decision was made to spend three months building a custom chat room using, among other things, Perl, JavaScript, and HTML.

That it worked was a miracle. That it worked as well as it did was a mystery. Yet, while the course was online, it would pull together a typical class consisting of individuals from Europe, Africa, the United States, and all over Canada. The oddest participant was a young woman who lived within walking distance of the college. On Sunday evenings, we would gather around our home computers and review and discuss that week's Photoshop lesson and homework. When the class ended, the students would stay online for a couple extra hours, getting to know each other, swapping recipes, and generally doing what students do when they are out of class.

So there we were, in the days when Flash was a word for speed or the name of a superhero, using the web for what it does best—serving as a communication medium.

Six years later, Flash has taken on a whole new meaning, and that chat room that took three months to build can be constructed in about an hour and go online in less than half an hour. How far we have come in such a short period of time.


Chat Issues

What many people tend to overlook in their rush to create chat rooms using Flash is that, despite the fact that chats are conducted in real time, chat is not instant messaging.

In many respects, instant messaging is a freeform medium. Any number of people can talk to you, simultaneously, about any number of subjects. As long as you are online, instant messaging either finds you, or you find the people on your Buddy List. You can also add video and audio to your instant messaging these days.

Chat is more structured and focused than instant messaging. Chats are topic-based conversations whose medium is print, not voice. Chats are read. They are not spoken. Though many would claim they are a rather sterile medium, participate in a chat and you quickly pick up the personalities of the participants.

When planning a chat room, there are more issues than design to consider. For example, if the chat facility is available to the public, will it be accessible to individuals with disabilities? This is an important consideration because governments are now mandating, in no uncertain terms, that web sites must be accessible to the disabled. If accessibility is a huge issue, the Flash component used in this example—the chat component—does not meet accessibility guidelines. In this case, an HTML solution is recommended. Macromedia is currently addressing this issue.

If it is a "private" room, there are other issues to consider, including restricting access to the room and using passwords.

From a design point of view, there are other issues to be addressed. For example, if someone doesn't have the Flash 7 Player, how can he or she get it? Will the interface be done in Flash, or will the Flash presentation be embedded in a Dreamweaver page? What point size will be used for the text? Will the design be modular so that video and audio capabilities can be added at a later date, if needed?

As you can see, chat rooms are not "cool." Chat rooms are practical. As we have been stressing throughout this book, they require careful planning that starts with the question, "Do we really need a chat room?" and is completed with construction of the chat room and upload.

How Many Users Will be Involved?

The question is valid. Though we exist in a world with "plentiful bandwidth," which is able to accommodate hundreds of people in a single chat room, this simply isn't workable. Imagine the largest sports arena in your area filled with people. Now imagine each of the thousands of people talking to himself or herself. Now imagine that image confined to a chat room. There would be tens of thousands of simultaneous posts. The implications don't need to be demonstrated.

The best chats involve fewer than 30 people. Educational institutions that "get new media" and see it as a viable instructional delivery medium, not a line item on a budget, are running chats for classes where the instructor delivers the lesson, and the students pepper the instructor with questions. These classes are usually tightly controlled.

Some companies use chat rooms with their sales forces. In this situation, a salesman on the road using a wireless hand held device can "talk" through a problem, one-on-one and in real time, with his or her sales manager or customer service team member.

Keep in mind that the effectiveness of chat decreases with the number of people involved. If you go above 30, seriously consider the use of an email list or "threaded" discussion forum. With those kinds of numbers, you will have upset participants who will be denied the opportunity to interact with the other participants. In that instance, the value of real-time interactivity, which is the promise of chat, becomes negligible.

How Will It Be Moderated?

We have learned from bitter experience that leading a chat is comparable to "herding cats." If one person goes off topic, the "herd" will follow, and bringing a chat back on topic is quite similar to turning an aircraft carrier around to reverse course. It takes a lot of time.

The key role for anyone moderating a chat is to keep the group on topic. This actually becomes easier as the participants become familiar with chat. We have found that running an informal session a day or two before the actual get-together tends to stop people from going off topic and "hijacking" the chat when it is time to "get serious."

Here are some moderating tips:

Remind the participants that, due to the nature of chat, going off topic will result in a negative experience for some. Do this in an email to the participants.

  • Send an agenda and stick to it.

  • When the moderator is about to "speak," use a little technique we have learned: send a one-line note that says, "Hands off the key board."

  • If you hit the end of the text input area and have more to say, end the post with "…more."

  • When you have finished and it is time for the group to participate, let them know. We usually end that post with, "OK, jump in."

  • Let the participants post their views and questions. Then stop them and deal with each one. In this case, make it clear to the group it is one-on-one time.

What Control Mechanisms Will Be Built In?

There are a number of things you can do to make the chat experience a positive one. You can:

  • Send an email invitation that clearly states that, to participate, the recipient must respond by a certain date.

  • Use the responses to assign a password to each invitee. This controls who participates. The implication is that entry to the chat room is controlled by a database consulted either by Dreamweaver through a form or using the Flash Remoting features of Flash and the Flash Communications Server.

  • The moderator should have a separate area on the screen to talk privately with the participants. For example, assume Jordan sparks off a Mac versus PC discussion that is way off topic. The moderator can send him a private note telling him that he is off topic and that he should get back to the subject of the discussion. This avoids embarrassing him in public.

  • Consider providing a transcript of the chat to the participants when the session is finished. It can be done using server-side shared objects from the Flash Communications Server, but the mechanics of providing this service are beyond the scope of this book. In a classroom situation, this feature has proven to be invaluable to the students and instructors.


Designing the Room

The plan for the room is to make it as basic as possible to enable the participants to focus on the discussion, not the technology. This idea arose out of discussions with representatives from the Oakbridge Community Center. They want to provide their members with a forum for the various organizations and clubs associated with the center. This would be anything from the local baseball league's teams to the seniors' club. It was also obvious that such a broad range of members would require an interface that appealed to a broad group with a minimal learning curve. In addition, we discovered that the members use everything from dial-up to broadband, so we had to accommodate inevitable bandwidth issues.

Based on that information, we quickly realized the Flash MX 2004 Communications components provide the solution.

The Chat UI component provides three of the requirements:

  • A message input area.

  • A Send button.

  • A message display window.

The SimpleConnect component enables the participants to log in. When they log in, the People List component permits us to show the names of the people who are in the room. To deal with the bandwidth issues, we can use the SetBandwidth component, and to add a little "life" to the interface, each user can select a color for their messages through the UserColor component.

With the technical issues addressed, the next question is, "How will it look?" The first idea, shown in Figure 16.1, is quickly rejected. It just doesn't meet the requirements, and the dark gray background makes the whole area look rather foreboding.

Figure 16.1. The first design idea is quickly rejected for being foreboding.

The final design, shown in Figure 16.2, meets all the needs. The best part is that we are able to maintain the brand identity of the community center by using a "stripped down" version of the home page. In addition, the placement of the components opens up the page and makes the whole look more inviting.

Figure 16.2. The final design comprehensive is a lot more inviting and open through the use of white space.

    [ Team LiB ]


Building the Chat Room

As you may remember from Chapter 3, "Planning a Dynamic Site," there are three rather simple steps to follow. They are:

  1. Write the script that connects the Chat components to the Flash Communication Server.

  2. Build the room using the Drag and Drop components.

  3. Test and tweak.

Connecting to the server requires you to place an application folder—we named ours "akbridgeChat"—in the Flash Communication Server's Applications folder. When you have done that, you have to write the server-side script that will make the chat room function. In Chapter 3, we showed you how to create the script using Dreamweaver. Here's another method:

  1. Open Dreamweaver MX 2004 and create a new ActionScript Communications document.

  2. When a blank document opens, enter the following code:

    load("components.asc")

  3. Select File, Save As and save the file as a plain text document, named main.asc, to the OakbridgeChat folder you just created.

  4. Quit Dreamweaver MX 2004.

Note

Don't panic if you open the Flash Communication Server's Admin folder and notice the icon of the document just created has changed, as shown in Figure 16.3. When the file is placed in the folder, it is immediately associated with the Flash Communication Server MX.

Figure 16.3. The icon for the main.asc text document will change when placed in the Admin folder.

Assembling the Chat Room in Flash MX 2004

The Flash Communication Components are nothing more than "prebuilt" and fully-functioning movie clips. Before we had components, developers had to do a serious amount of coding and design work.

If you do not see the Communication Components category in your Components panel, the components have not been installed into Flash. The components and full installation instructions are available at http://www.macromedia.com/software/flashcom/download/components/components.html. To assemble the chat room, follow these steps:

  1. Open the Components panel. If it isn't visible in your panel grouping, select Window, Development Panels, Components to open the Components panel. (Control-F7 for PC users. Command-F7 for Mac users.) When the panel opens, as shown in Figure 16.4, the Communications Components should be visible.

    Figure 16.4. The Communication Components offer you drag and drop functionality.

  2. Drag the Chat component onto the stage. In the Property Inspector, change the height value to 300 pixels and give it an instance name of ch16_chat. Place the component on the right side of the stage, using Figure 16.1 as your guide.

  3. Drag the SimpleConnect component to the stage and place it according to the layout.

  4. Drag the SetBandwidth component to the stage and place it under the Simple Connect component. Give it the instance name of bandwidth_mc in the Property Inspector.

  5. Drag the PeopleList component onto the stage and place it as indicated in the design. Give it the instance name of peoplelist_mc in the Property Inspector.

  6. Drag the UserColor component onto the stage, and in the Property Inspector, give it the instance name of usercolor_mc. When finished, your layout should resemble Figure 16.5.

    Figure 16.5. The components for the chat room are in place on the Flash stage.

  7. The component that makes it all happen is the one component that doesn't have an instance name: SimpleConnect. Its job is to establish all communication with the Flash Communication Server. Select the SimpleConnect component on the stage and open the Component Inspector panel, Alt-F7 (PC) or Option-F7 (Mac). You will notice that the same parameters as those shown in the Property Inspector are visible. The difference between the two areas is that the Component Inspector enables you to change a component's parameters while authoring in both Dreamweaver and Flash. We won't need it, but you really should be aware of its function.

  8. To use the component to point to the project's directory, click once in the Component's Application directory area of the Property Inspector and enter the URL for the chat on the Flash Communication Server. For our local server, we used the following address: rtmp:/10.0.1.21/OakbridgeChat.

  9. Having used the SimpleConnect component to point to the directory, it now has to be told what other components are being connected to our session that is being created by the SimpleConnect component. In the Property Inspector, click the [] beside the Communication Component box. This will open the Values dialog box, which will be used to connect the SimpleConnect component to the other components in the movie.

  10. When the Values dialog box opens, enter the instance names of the components on the stage, as shown in Figure 16.6.

    Figure 16.6. The Values dialog box for the SimpleConnect component is used to point the Flash Communication Server to the other components on the stage.

Finishing the Design Work

As it currently stands, we have a number of components on the stage, but there is nothing to tell the user what each component does. Follow these steps to complete the design of the chat room:

  1. Select the Line tool and draw a black line horizontally across the page to separate the login and bandwidth areas from the rest of the page. Set the width of the stroke to 1.5 points in the Property Inspector.

  2. Using Figure 16.7 as your guide, add the text to the page.We leave the font and point size to your discretion. We used 12 point Times New Roman Bold.

    Figure 16.7. The chat room is constructed and ready to go.

Dealing with a Potential User Issue

Though the Chat component is not accessible to screen readers, the point size of the text entered and the text displayed can be changed. Follow these steps to change the font and the point size of the text used in the Chat component:

  1. Open the Library panel, Window, Library or Control-L (PC) or Command-L (Mac).

  2. Select the Chat component in the Library panel.

  3. Open the Library panel's Options menu and select Edit. This will open the movie clip that drives the component.

  4. Unlock the Assets layer by clicking the padlock in the layer name.

  5. Select the text boxes that you want to change and change the point size and font in the Property Inspector (see Figure 16.8).

    Figure 16.8. The font and point size of the text to be displayed in the chat can be changed by editing the component.

  6. When finished, lock the Assets layer by clicking the dot where the lock used to be.

  7. Click Scene 1 and save the movie.

At this point, you can publish the movie and place the resulting .swf file in the Dreamweaver page.

Adding the Chat to Dreamweaver MX 2004

  1. Launch Dreamweaver MX 2004 and open the ChatPage.htm file in your Chapter 13 Exercise Folder. When it opens, save the page to the Oakbridge folder containing the main.as script and the .swf file.

  2. Add a layer by choosing Insert, Layer Objects, Layer over the blank area in the middle of the page. Click inside the layer. Open the Files panel and drag the chat .swf from the panel into the new layer. The file may be much larger than the area permitted. To scale the .swf file, click once on the .swf inside the layer. Handles will appear around the file. Drag the bottom-right corner handle diagonally up towards the upper-left corner. When you have it sized properly, click on the layer and move it inside the layout area as well. Click the Play button on the Property Inspector, and you will see your booking page (refer to Figure 13.12). Save the file.


Summary

In this chapter, we went a lot deeper into the issues around creating a chat room than the exercise from Chapter 3. In that chapter, we built a simple facility to enable the team to communicate with each other.

We started off by dealing with the fact that chat is not instant messaging. It is a communications medium that uses text, not voice. We also highlighted a number of other issues such as accessibility, access, and a few design issues.

The next topic of discussion dealt with the number of participants, and we suggested that a chat containing more than 30 people might better be managed through an email list. The next issue we discussed was how a chat could be moderated, and the key message was "keep the chat on topic." From there, we looked at control mechanisms, from passwords to transcripts. As you saw, the key is planning before Flash is even opened.

The next section dealt with designing the room, and we reviewed the conversation held with the Oakbridge Community Center regarding the technological sophistication of the participants and the demographics. This conversation drove our design efforts, and we showed you how we developed the final "look" using Freehand MX.

The remainder of the chapter dealt with the process of building the chat room in Flash MX 2004. This involves three simple steps:

  1. Write the script that connects the Chat components to the Flash Communication Server MX.

  2. Build the room using the Drag and Drop components.

  3. Test and tweak.

We showed you how to use a number of the Communications Components that come packaged with Flash MX 2004 to build the chat room. The key component is the SimpleConnect component, and we thoroughly reviewed its importance in making the chat function. We then showed how to deal with a potential user issue by changing the font and point size of the text in the chat component.

We finished the chapter by showing you how to add the chat room to a Dreamweaver MX 2004 page.

Next up, we take what we have learned, push our skills to the next level, and build an application that permits two-way audio and video communication.


Chapter 17. Flash MX 2004 and Real-Time, Two-Way Communication

True story. One of the authors and Kevin Towes, author of the definitive guide to the Flash Communication Server MX—Macromedia Flash Communication Server MX by Macromedia Press—are at FlashForward in New York City. They have a bit of free time on their hands, and Kevin suggests a visit to the Empire State Building.

Along the way, Kevin decides the time is ripe for him to finally purchase a digital camera. He drags the author into a store just up Fifth Avenue from the Empire State Building and proceeds to spend the next half hour carefully scrutinizing a couple cameras. The one feature he finds intriguing is the capability to record video that is built into the cameras he is considering purchasing. He makes his purchase, and the author and Kevin continue their journey along Fifth Avenue to the Empire State Building, visit the observation deck, and give their digital cameras their usual workout.

Later that afternoon, the author, Kevin, and a couple conference attendees are sitting in the coffee shop located in the lobby of the hotel hosting the conference. Kevin has his portable computer open and is downloading the images in his camera to his computer. Then Kevin asks the inevitable question, "I wonder if I can get a FlashComm video feed from my camera?" Within five minutes, he has the camera connected to the computer and is streaming a video feed of people passing through the lobby to a Flash MX 2004 application on his desktop. The video is, of course, coming from his digital camera.

The point of this story is that you can't get much more dynamic than a live video feed. It is both immediate and compelling. The other point is that you don't necessarily need to own a web cam or expensive video camera to add a live video capability to your dynamic site. As long as the Flash Communication Server MX recognizes the camera, any digital camera, even a relatively inexpensive one purchased on Fifth Avenue, will do the job.

In the previous chapter, "Building the Chat Room," we showed you how to create a text chat room using a few simple components in Flash MX 2004. In this one, we go to the next level and take interactivity from a text-based medium into the realm of streaming audio and video.


Streaming and How We Got from "There" to "Here"

In Chapter 15, "Embedding and Streaming Video in Flash MX 2004," we introduced you to the concept of streaming video using the Flash Communication Server MX. What we didn't do was explain how we got to the point where you can connect a digital camera to your computer and actually stream a video signal across the Internet.

Right now, the major streaming media players are the RealOne player from Real Networks, Windows Media Player, and Apple's QuickTime player. All these players use proprietary technologies and act as clients to deliver synchronized pre-recorded or live video and audio streams to computers connected to the Internet in real time. One thing you may not have noticed in Chapter 15 was that the video playing from the server didn't appear to use any of those three players as the client. In fact, you built your own.

The fascination with streaming media really got underway in 1994. That was the year the Rolling Stones used the Internet to deliver a VooDoo Lounge Tour Concert to 1,000 computers connected to the Internet. The technology was very primitive, but it sparked some serious "buzz."

The following year saw the rollout of the Real Player from a company named Progressive Networks, which, today, is known as Real Networks. They decided, quite correctly, that the HTTP protocol just didn't work, and they developed their own standard—Real Time Streaming Protocol—to broadcast content to the Internet. As long as you had a copy of the Real Player or owned or had access to a Real Media server, you could connect to a host of video and audio streams using their proprietary client.

Naturally, Microsoft, seeing an opportunity, also got involved and introduced a streaming server that used the Windows Media Player as its client. In between this and Apple's streaming QuickTime rollout, a new web standard appeared in the market. It was named SMIL (Synchronized Multimedia Interface Language) and, being based on XML, was used to manage multiple streams of audio and video data.

Which brings us back to the "here" part of the subhead for this section. The "Big Three," with their focus on promoting their standard, have been "blind-sided" by Macromedia. You don't need to use their servers or client software to create dynamic video and audio applications. You only need access to a Flash Communication Server if you are a developer. If you are a user, you only need Jeremy Allaire's "Trojan Horse." It goes by the name of Flash Player, and there is hardly a computer connected to the Internet that doesn't have it.


Design Issues

The key word that describes what we do is "communicate." People love to connect and to tell stories. The purpose of the Flash Communication Server MX is to provide that capability to the designer of dynamic sites. The interfaces he or she designs will be the way users connect and tell their stories.

Chat is great for text-based communication. Due to its low bandwidth requirement and platform neutrality, it is accessible in all bandwidth situations.

The combination of Flash MX 2004 and the Flash Communication Server MX gives you the opportunity to go beyond text chat and explore real-time, two-way communications. Chat still has a time lag. You post the message, the respondent reads it and types a response, and you wait for the post.

Use streaming video and audio, and that time lag is a thing of the past. Even the bandwidth issues are becoming less important because audio and video communication can be compressed for max throughput in a minimum bandwidth (56k modem) environment.

When designing the pages that incorporate audio and video streaming, it is the prudent designer who ignores the technology and instead focuses on designing an interface that is both functional and usable.

Functionality

In Flash MX 2004 you can build simple "communicators" using the Communications Components shown in Figure 17.1. You have seen how easy they are to use, and their attraction to the average developer is that they work.

Figure 17.1. The Flash MX 2004 Communications Components are designed to work, it seems, almost from the minute they arrive on the Flash stage.

The other attraction is the range of coding requirements. With the use of components, you can drag and drop your elements onto the Flash stage, and little or no programming is required. On the other end of the spectrum, you can hard-code your own elements to do exactly what you want. There is great variety in what can be accomplished.

Though the designer inevitably dictates the complexity of the design, communications solutions can be implemented in a matter of minutes if the need arises. In fact, the components can be used to stream audio and/or video at various bandwidths. This is due to the capability of the Flash Communication Server to adjust the video frame rate and audio compression used for the sound.

The best test for functionality is asking if the technology is transparent—determining if the user is unaware, for instance, that they are viewing a video passing through the Flash Communication Server MX: The Flash MX 2004 Communications Components pass this test.

Note

One of the authors pointed out a great example of transparent technology that is just too good to pass up. He calls it the "Toasted Bagel Effect." His toaster actually has a CPU and all that implies. Still, the technology is transparent when using his toaster to toast a bagel.

Usability

When it comes to building a video and audio communicator for the Oakbridge Community Center, the key selling point is that anyone with a Flash Player can use it. According to Macromedia, the Flash Player is the single most rapidly adopted piece of software in history. It is ubiquitous and has a market share larger than the Big Three clients… combined.

The other key point is that no technology other than a microphone and/or web cam is needed. In fact, if the user can connect either of these devices to his or her computer, he or she is just about ready to go. Even then, none of that hardware is required if all the participant wants to do is to view or listen to the discussion.

Finally, as we pointed out, the Flash Player technology is about as close to being transparent as one can get. It provides instant audio and video communications within a web page. Best of all, the users won't need a user manual to learn how to get connected and participate. That, in many respects, is the ultimate usability test.


Building the Streaming Audio Communicator in Flash MX 2004

On the surface, this may appear to be an extremely complex project that is technologically challenging. In fact, it is rather simple to construct and uses only three of the Communication Components. They are:

  • AudioConference

  • SetBandwidth

  • SimpleConnect

Before you start, be sure to download the Chapter 17 Exercise file to your desktop.

Before you open Flash, do the following:

  1. Create a folder in your Flash Communication Server Application folder named ch17.

  2. Drag the main.asc file from your Chapter 17 Exercise folder and drop it into the ch17 folder just created. Launch Flash MX 2004.

  3. Open the Communications Components and drag a copy of the AudioConference component onto the stage. When it appears on the stage, you will see the AudioConference component includes an interface for listing users currently logged into the "conversation" and a Talk button that enables users to join the conversation.

  4. Select the Audio Conference component on the stage, and in the Property Inspector, give it the instance name of audio_mc. Set the width of the component to 200 pixels.

  5. Drag a copy of the SetBandwidth component to the stage. Name it bandwidth_mc in the Property Inspector. This is the component that enables the user to select his or her connection speed to the Internet. Those speeds are listed in the component parameters area of the Property Inspector.

  6. Drag a copy of the SimpleConnect component to the stage.

  7. With the SimpleConnect component selected on the stage, click the parameters tab in the Property Inspector to open the component's parameters. Click once on the Application Directory input area of the parameters and enter the URL of your Flash Communications Server. An example would be (using our URL):

    rtmp://10.0.1.21/ch17/

    That is the path to our directory. Use the path on your computer and be sure to end it with the name of the directory.

    Note

    If you are using a local version of the Flash Communication Server MX on your machine, the address is rtmp:/ch17. Note the single forward slash. If you are connecting to a remote version through an ISP, for example, the syntax is:

    rtmp://[computer name][:port]/ch17

  8. Click once inside the Communications Components input area of the Parameters. When the Values dialog box opens, click the + sign and enter audio_mc. Click the + sign once more and enter bandwidth_mc. Click OK. The values box will close, and the text just entered will appear in the parameters.

  9. Add a new layer and name it Actions. Insert a key frame in frame 5 of the Actions layer. Press the F9 key to open the Actions panel and add the following to stop the playback head on frame 5 of the movie:

    stop();

  10. Right-click (PC) or Control-click (Mac) once in frame 5 of layer 1 to open the Context menu. Select Insert Frame. This ensures you can always see the interface items in frame 1. When finished, your interface and timeline should resemble Figure 17.2.

    Figure 17.2. The interface is constructed, and the SimpleConnect component's parameters are set. All you need to do is publish the .swf, find a friend, and start talking.

  11. Save the movie—we named ours TinCan—and publish the file to your web server.

  12. Open Dreamweaver MX 2004 and insert the .swf file into the new page. At this stage, find a partner and try it out.

Building the Streaming Video Communicator in Flash MX 2004

This is another one of those projects that seems difficult but is actually quite simple to construct. In this case you only need five components on the stage. They are:

  • AVPresence (Two copies: one is used to send, the other to receive.)

  • SetBandwidth

  • PeopleList

  • SimpleConnect

Don't bother creating a new folder or main.as script. We will be using the same directory as the one used in the previous exercise.

  1. Launch Flash MX 2004 and create a new document. When the blank stage opens, open the Communication Components panel. If it isn't open, select Window, Development Panels, Components.

  2. Drag two copies of the AVPresence component to the stage.

    The AVPresence component is a versatile communication component and can be used to create a virtual, interactive presence for the people connected to the presentation. Here are two ways you can use the AVPresence component:

    • Panel Discussions: A group of people can converse amongst themselves.

    • Video Phone: By using two AVPresence components in one application, you can create a low cost, Internet-based video phone application.

  3. Select the first instance of the AVPresence component on the stage and name it p1_mc in the Property Inspector. Select the second AVPresence component on the stage and name it p2_mc in the Property Inspector.

  4. Drag a copy of the SetBandwidth component to the stage. Name the instance bandwidth_mc in the Property Inspector.

  5. Drag a copy of the PeopleList component to the stage. Name the instance peopleList_mc in the Property Inspector.

  6. Drag a copy of the SimpleConnect component to the stage.

  7. In the Component Parameters area of the Property Inspector, enter the rtmp address you used in the previous exercise.

  8. In the Component Parameters area of the Property Inspector, click once in the Communications Components area to open the Values dialog box. Enter the following:

    • p1_mc

    • p2_mc

    • peopleList_mc

    • bandwidth_mc

      Close the Values dialog box. Your stage and timeline should resemble Figure 17.3

      Figure 17.3. The video app is ready to be published and connected to a camera.

  9. Save your Flash file (we called ours videocom.fla) and publish it to your web server.

When the app is published and ready to use, grab your web cam, send your partner the URL, and test it out. To activate the video feed, connect your camera and click on one of the video components. You will get a security warning asking if Flash can access your camera. Click OK, and Flash will start transmitting to the web whatever it is your camera is "seeing." If it has a microphone attached to it, the audio portion will also be transmitted.


Summary

This chapter started with a journey along Fifth Avenue to the Empire State Building in New York and concluded with turning a Flash MX 2004 application into an Internet-based video phone. Though it may be difficult to see how those two events are connected, the common factor is streaming video and the Flash Communication Server MX.

The New York story was used to illustrate the fact that, when it comes to dynamic video streams through the Flash Communication Server MX, equipment is irrelevant. As long as the camera can capture video, you can stream a signal through the Internet.

We next reviewed how streaming video got its big start thanks to the Rolling Stones in 1994 and how Macromedia may have just blind-sided RealNetworks, Microsoft, and Apple with the release of the Flash Player. By introducing the most popular piece of software in history, Macromedia also removed developers' reliance on the streaming media clients from those three companies.

Before building an audio application and a video application, we briefly looked at the issue of usability and functionality when planning these applications. The bottom line is that if the technology is transparent and the user instinctively knows what to do, then the interface works.

We then constructed two very basic applications, using only the Communications Components, to stream audio and video through the Flash Communication Server MX to a .swf file using the Flash Player in a Dreamweaver MX 2004 page.

In the next chapter, we show you how to combine chat, audio, and video capabilities to construct an interactive and dynamic meeting facility for the Oakbridge Community Center.


Chapter 18. Building the Meeting Application

By this point in the book, we hope you have started to see Flash as being more than "eye candy in motion." Although there is no doubt that Flash MX 2004 plays a supporting role in web animations and offers the developer site ideas beyond the simple static page, today's Flash MX 2004 has evolved from being regarded as a toy into a serious web authoring tool.

This old impression is so prevalent because most developers' first exposure to Flash is the creation of a timeline-based animation. This current release of Flash, with its improved ability to connect to the Flash Communication Server, is just another step in the application's evolution to a robust application development environment carried by HTML. Although today's HTML has the ability to display dynamic data, the output is still rather static on the screen.

This is not to suggest that HTML is somehow an inferior technology. Its purpose is, in very simple terms, to tell the browser where things are on a web page and how they look. It is quite a powerful language when coupled with Cascading Style Sheets and even ColdFusion MX. When it comes to Flash, HTML only has to tell the browser, "Here is where the Flash animation is located on the page." The Flash Player then picks up the conversation.

This way, Flash is able to access dynamic data and create full-fledged online applications that enhance the user experience because the user never needs to leave the web page. Suddenly Flash-driven web applications start feeling like desktop applications.


The Competitive Advantage of Flash MX 2004

Flash MX 2004's competitive advantage is this: Time is money, and Flash seriously reduces development and maintenance time. Rather than get into the technical details around that statement, we are going to use a story to illustrate our point.

When asked by one of his clients to include Flash as a major part of the site, one of the authors denigrated it by telling them a really scary story that was based on the following:

  • The images and wording would have to be constantly updated.

  • The source file would have to be constantly updated.

  • The server file would have to be constantly downloaded and uploaded.

Then he finished the scary story with a conclusion even more terrifying than the classic "hook on the door knob" told around campfires. "You know," he said, "You will have to pay me to do this on your behalf."

This isn't the case today. As you saw in Chapter 10, "Assembling the Tour," data can be stored in a database and "called" by Flash using Flash Remoting to populate a Flash movie in a web page. This greatly reduces the maintenance required for a Flash movie, thus increasing its viability as a major part of a web site.

Let's get clear on this last statement. We regard Flash as a tool, and we are consistent in advocating, when it comes to dynamic site development, that you should use the tool best suited for the job at hand. A good example is the combination of HTML and Cascading Style Sheets (CSS) that is being used in some of the best-designed sites on the web. For a bad example, consider the increasing use of the Minimal font in Flash, which focuses on the developer's needs to manage bandwidth and download times. The words set in this font are usually unreadable, but the site loads in record time. The HTML/CSS combination indicates the designer's recognition that web pages are read and that it is the words on the page that are the primary communication vehicle in the site.

The addition of the Flash Communications Server MX has pushed Flash MX 2004 beyond anything previously done with Flash. What used to require numerous plugins can now be accomplished with only one. Most important of all, a new dimension of interactivity can be added to our work.

When we speak of "interactivity," we are not using the word in terms of "push-a-button-and-something-happens." Interactivity is how humans interact with a computer-based interface. This whole process is still a bit sterile because we are still interacting with a machine, not another human. Yet, as you saw in the previous chapter, that barrier can quickly be removed with streaming video. Suddenly, we are offered the opportunity to interact with other humans in real time, and the interface becomes a communications medium. When that happens, we focus on the other people, resulting in what we call "the transparency of the underlying technology." Users are being given the chance to interact with each other, not a machine or a web page, in a more personal manner.

A number of years ago, when eCommerce was just starting to take hold on the Internet, one of the authors was approached by a major retail clothing store that wanted not only to sell their clothing online, but also to talk to their customers using some sort of voice technology. At the time, two-way voice communication over the Internet was not available. The alternative—text chat—would have been an expensive venture for the client at that time. Had the same client approached the author today, a live one-on-one session between the sales rep and a client could have been easily established using Flash and the Flash Communications Server MX at a cost that would have been far less than what was originally quoted for just a text chat.

Five years ago, if you had told a web developer you could build a real-time, two-way audio and video streaming application in less than an hour and have it on the Internet 30 minutes later, you would have been regarded as certifiably insane. In the previous chapter, you did just that.


Jordan's Epiphany

Clients are also quick to see the possibilities. Rather than discuss it, we are going to let Jordan recount a recent experience.

I recently had a meeting with Talon GTS (the video production guys who are graciously letting us use some of their video work to show off the streaming capabilities of Flash and Flash Communications Server). As they were calling to drop off the video for the Air Show to be prepared for the Internet, they heard a note of excitement in my voice and were quick to ask what was new. I answered them with, "You have to see what Macromedia has come up with. It's called the Flash Communications Server, and it's going to revolutionize both of our businesses. You have to come over so I can show you this."

When the principals of the company arrived at my office, I started by showing them the meeting room application that we are going to be building in this chapter. I showed them that with a simple web browser and the Flash plugin, which, according to Macromedia's stats, almost everyone has, one could build a simple communication device within an hour that could be used to interact face-to-face with people on the other side of the globe.

I connected my video camera to my laptop and had them sit at another computer in the office. I then had them visit the URL for the meeting room application and told them to log in. After they were logged in, I proceeded to engage them in a text chat.

What happened next was absolutely fascinating. They immediately saw the application as an easy way to communicate, live, with a client who wanted to hold a meeting with them. I then clicked on the video component of the application and activated the camera. There were cheers of excitement coming from the other end of the office as they saw me broadcasting my picture, live, to almost every computer in the office.

Again, they started seeing the possibilities of a live and personal meeting application. The capability to talk to a client and relate to them on a personal level without having to be there suddenly turned the Internet into a warm meeting place. With the addition of the streaming capabilities, they also felt that not only could they talk to the client and interact with them, they could also go over their videos with their clients without having to burn copies of DVDs and wait for them to be delivered.

Another possibility that went through their minds was the idea of broadcasting live events. The ability to go to community events and meetings and broadcast them live so that members of the community could view the event without having to be there was also brought up as one of the possibilities.

When they got over the initial excitement, they asked the usual next question: "Okay, now what does this entail? How can we make this easy for people who want to log in? What do they need?"

I responded by telling them all that was needed was the Flash Player on the client's machine. I showed them the source of the web page and explained that the only file on the page was a Flash file.

The next question was, "What program needs to be installed to use the meeting application?" I responded by telling them that the Flash Player was the only thing that was needed. I elaborated further by explaining to them that what they saw in the web browser was all they would need. As users, they don't need to worry about how to launch and configure the meeting application. Any configuration is handled on the server side.

The idea of the application being located on the web server benefits both the user and the web master. Most computer users are Internet savvy. They already know how to call up a web page in a browser. Calling up the meeting application is no different from calling up any other web page. The page can either be typed in or hyperlinked. The HTML on the called page acts as the carrier of the application, which is delivered to the client's computer. All the communication capabilities are transparent to the user because of the web browser. All the user needs is a microphone and a webcam if they want to use the audio and video capabilities of Flash.

The convenience to the web master is the ability to retain control of the application. The Flash movie resides on the server. This means that there is only one instance of the movie called to every browser. The web master or developer can update the web application on the server, and everyone who calls the application will receive an updated application. The web master also controls what is on the Flash Communications Server. Therefore, all the programming for the application is handled on the web master's end, not the user's. The user never needs to know where the server is located and how to access it.

The last question was, "How difficult is this to build?" This is an understandable question, considering the budgetary climate of the web development market. I showed them the source file of the application and told them it took me approximately an hour to develop the meeting room application. I showed them all the components involved to create the meeting room and the scripting page, just to show them how little was needed to put this application together.

Needless to say, they left the meeting sold on the Flash Communications Server and all the possibilities for Flash and web browsers.

This isn't a story to sell you on the advantages of Flash MX 2004 and the Flash Communication Server MX or Flash Remoting. The key to Jordan's story lies in the reaction of his clients to the technology. They saw the transparency of the technology first and then started homing in on the process of creating the application that would have a direct impact on their ability to get even closer to their clients. If the owners of a small video company located in Southwestern Ontario can immediately see the positive financial impact of a technology they have never before experienced, you can now understand why Jeremy Allaire regards the Flash Player as a Trojan Horse.


The "Story" Behind the Meeting Room

To start, you have to ask the following question: "What is a meeting room?"

In a physical sense, it is a private space where people interact with each other. In today's office environment, someone would have to reserve the room, and the attendees would have to be physically present in the room. You could also expect that someone would be transcribing the minutes, which would be available to the participants afterward. Now compare that process to an online meeting. To start, our room is "logical," not physical. This means the room is simply an instance of the meeting application that has been given its own little space in memory and on the hard drive. Because the room is logical, it can be designed with enough flexibility that we can create our own rooms online, and we can all meet in those rooms. If we need extra privacy, we can add some programming that would check for "members only."

To enter the rooms, all one needs to do is select the room and click a "join" button. With the addition of the video, users with webcams can see each other and get a real sense of "being there." The addition of a text area enables users to exchange information that would otherwise be hard to express verbally, such as URLs. Of course, we could add to the meeting room capabilities by adding a whiteboard component and using it to share documents while others are conversing.

The entire meeting can be recorded on the server by capturing the video stream for later playback. This way, nothing is missed in the meeting; knowing that a transcript will be available enables the participants to focus on the meeting.

You will notice that there is very little talk about sketching and building. This preamble follows an important point made in Chapter 5, "Planning the Look." Projects of this sort always start with a story that begins with, "When the user arrives at the meeting page…." After the story is related, we break out the paper, pens, and pencils.


The Technologies That Make the Meeting Room Work

Many of the components in the meeting room are ready to go. However, there will be a little bit of scripting involved to take advantage of Flash's RoomList component. However, there is not a lot of support code for the RoomList because the uses for the component are as varied as the number of Flash developers. In addition, we will use a tiny piece of server-side ActionScript on the Flash Communication Server to make use of the login username.

We have already used the video, chat, bandwidth, and people list components in previous chapters. The only thing that will change in this chapter is how we "hook them up" through the use of ActionScript.

You may be asking, "What about the SimpleConnect component?" As efficient and time-saving as the SimpleConnect component is, we need something a little stronger for the purposes of our meeting room. The reason is that the SimpleConnect component establishes a connection to the Flash Communications Server but has real trouble managing multiple instances of our connections. Our meeting room application relies on multiple connections to access our meeting rooms. Therefore, to achieve our needs, using some ActionScript is not unusual.

Our application will consist of three sections:

  • The login area

  • The lobby

  • The meeting room

The login area identifies who is invited to the meeting room. The lobby is like the main reception area of a typical office building. It shows that we are in the application, but don't know where to go. The lobby will provide a list of rooms available. Think of the list of rooms as a directory in the lobby. Looking at the list, we can decide where we need to go for our meeting. After we select the room we want to go to, we are then taken to the meeting room area.

On a more technical level, when we log in to the meeting room application, we establish a connection with the Flash Communications Server. The information used in this connection is then saved for later use.

After we log in, we receive a list of the available rooms, using the RoomList component. After we select the room we want to access, our application asks for a new connection using that room as an instance. Why do we need a new connection? Each room will have its own server-side shared object, which is very much like a cookie, except that it is stored on the server, not the user's machine. Each shared object is isolated from the others, which gives the effect of being in different rooms for a chat. In addition, each instance also has its own set of connections. This helps to isolate not only the chat components but also the audio/visual components. From a human perspective, these instances, or rooms, may seem paper-thin. But to the Flash Communications Server , these rooms are lead-lined and soundproofed.

The benefit to the web master, as said before, is that all the power offered in this meeting room application is contained in one application. Any subsequent improvements or changes made to the meeting room application need to be done only once. In addition, the application resides on the server and does not have to be distributed to each member that wants to use the meeting room. Its usage is transparent to the user because it is invoked by HTML. Keeping it server-side means that the user only needs to know how to talk to someone, not how the application works. Most important of all, from the perspective of the participant, it just works.


Constructing the Meeting Room

With the plan in place, follow these steps to construct a meeting room for the Oakbridge Community Centre:

  1. Download the Chapter 18 Exercise File from the book's web site to your desktop.

  2. Create a folder named ch18 in your Flash Communication Server Applications folder. Open your Chapter 18 Exercise folder and copy the chatroom script in the Exercise folder to the folder just created.

    The chatroom.as script is what makes the whole thing function. The code in the script is:

    [View full width]

// ActionScript Document
// Chat Room Application...

// Joining a Room
// Modifying the RoomList Component to Join a Room without going to a new page (which is
   the current behaviour of the RoomList Component)

FCRoomListClass.prototype.joinRoom = function()
{
      var selectedRoom = this.rooms_lb.getSelectedItem().data;

      // Put our selected room data in a global variable
      _global.activeRoom = this.so.data[selectedRoom];
      this.so.data[selectedRoom].users++;   // add a user to the room

      enterRoom();      // call our local function
}

// Initialization

_global.session = new Object();
_global.ourURL = "rtmp://10.0.1.21/ch18/";      // CHANGE THE URL TO MATCH YOUR FlashComm
   Server!!!

// Create our NetConnection objects to be used by our two areas

loginArea = new NetConnection();
chatArea = new NetConnection();

// Main Login Handler - called when the login button is clicked
(simplified for the context of our book)

// login = function()
loginBtn.onRelease = function()
{
      _global.session.username = loginDisp.text;      // get our text
       from our text box - will be used globally
      loginArea.connect( ourURL + "login", session.username );
// make the connection with our username
      gotoAndPlay( "rooms" );      // we're in - so select a room to
      chat in
}

// Logout Handler -- we're leaving when this button is clicked
// logout = function()
logoutBtn.onRelease = function()
{
      loginArea.close();      // close our connection
      gotoAndPlay( "login" );
}

// Leave a Chat Room Handler -- called when we choose to leave a chat room
// leaveRoom = function()
leaveRoomBtn.onRelease = function()
{
      if( chatArea.isConnected )
      {
            chatArea.close();      // only close the connection if we
            are in a room
      }

      _root.gotoAndPlay( "rooms" );
}

// called from our "rooms" Frame on the timeline
mainLobby = function()
{
      if( !loginArea.isConnected )
      {
            loginArea.connect( ourURL + "login", session.username );      // re-connect if
   we disconnected before
      }

      meetingRooms.connect( loginArea );    // connect our rooms list
      component and display our rooms

      if( activeRoom != undefined )
      {
            meetingRooms.so.data[activeRoom.id].users--;
            _global.activeRoom = undefined;
      }
}

// Enter Room Handler -- called when a room is selected from our
component

enterRoom = function()
{
      loginArea.close();      // close our connect to the login / room
      selection area for now
      chatArea.connect( ourURL + activeRoom.id, session.username ); //
      connect to our chat room!

      _root.gotoAndPlay( "chat" );      // and start chatting away
}

    Essentially, the script—fully commented—is composed of a number of functions designed to dictate what happens when the movie starts and a user enters a particular room. One of the key lines is in the Initialization section of the script. Don't forget to change the RTMP address to match that of your server.

  3. Open Dreamweaver MX 2004. Select File, New to open the New Document dialog box. Select Other from the Categories column and ActionScript Communications document from the list of pages presented. Click Create, and a blank code page will open.

    Note

    We have seen far too many books that become glorified typing lessons. This is why we have supplied the script in the Exercise folder. You want to build stuff, not spend an inordinate amount of time entering code. Still, study the code. You never know when you might need to write a function that closes a login area.

  4. Enter the following script into the new page:

    // ActionScript Communications Document
// This file gets loaded up to the Flash Communications Server area

load( "components.asc" );

application.onConnect = function( client, newUserName )
{
      gFrameworkFC.getClientGlobals(client).username = newUserName;
// Our FlashCom Server puts the user name in the client's username variable
      application.acceptConnection(client);      // allow the user to
      proceed
}

    The first line of this script is the one we have been using throughout this section of the book. The next two lines simply put the user's name into a global variable in the client's iteration of the meeting room app and enable the user to move to the various rooms in the facility.

  5. Save the file to the ch18 folder created in Step 2 and name the file main.asc. Quit Dreamweaver MX 2004.

  6. Open Flash MX 2004. When a new blank stage opens, add two layers to the timeline. Name the three layers, from the top layer to the bottom layer:

    • Labels

    • Actions

    • Components

    Select Frame 20 in each of the layers and select Insert, Timeline, Frame. This lengthens the movie to 20 frames.

    Tip

    You don't have to select frame 20 in each layer to insert a frame. Click and drag through frame 20 to select the frame in each layer. Press the F5 key to add the frame. This can also be accomplished by selecting Insert, Timeline, Frame.

  7. In the Labels layer, add keyframes at frames 2, 7, and 12. Using the Property Inspector, name the frames as follows:

    • Frame 2: login

    • Frame 7: rooms

    • Frame 12: chat

  8. Select frame 1 of the Actions layer, press the F9 key to open the Actions panel, and enter the following line of code into the input area:

    #include "chatroom.as"

  9. Add keyframes at frames 6, 11, and 16 of the actions layer. Add the following script to each key frame:

    stop();

    When finished, your timeline should resemble that shown in Figure 18.1.

    Figure 18.1. The meeting room is "wired up" and awaiting placement of the Communications Components.

Adding the Communication Components

With the navigation elements added to the movie and the various scripts in place, you can now turn your attention to adding the Communication Components to the movie. Follow these steps:

  1. Open the Components Panel—Control-F7(PC) or Command-F7 (Mac). Select frame 1 of the Components layer and drag a copy of the Text Input component to the stage. In the Property Inspector, name the instance of the component loginDisp and set the width to 200 pixels.

  2. Drag a copy of the Button component to stage. In the Property Inspector, name the button loginBtn. With the button still selected, click the Parameters tab in the Property Inspector and enter the following values (see Figure 18.2):

    • Label: Log In

    Figure 18.2. The Log In is constructed, and the button will place the "call" to the login function in the chat.as script.

    The instance name, loginBtn, is the "hook" into the login function in the chatroom.as file.

  3. Insert a blank key frame in frame 6 of the Components layer to ensure the Log In button doesn't appear in the lobby. Add a keyframe to frame 7 of the Components layer. Drag a copy of the RoomList component to the stage and name its instance meetingRooms in the Property Inspector.

    Leave the Application Path in the Component Parameters on the Property Inspector blank. We are going to override this with ActionScript because this component's default behavior is to create a new browser window, which we don't want.

  4. Drag a button from the Components panel to the bottom of the stage. Name the instance of the button logoutBtn in the Property Inspector. Click the Parameters tab and enter Log Out as the button's label (Figure 18.3).

    Figure 18.3. The RoomList Component and a Log Out button are added to the movie.

  5. The stage is about to get really crowded. Click once on the stage and click the size button on the Property Inspector. Set the stage dimensions to 640 pixels wide by 300 pixels high.

  6. Add a keyframe to frame 12, drag the following Communications Components to the top of the stage, and give them the instance names indicated in the Property Inspector:

    • Chat component (name: chatRoom)

    • UserColor component (name: chatColor)

    • ConnectionLight component (name: connectionLED)

    • SetBandWidth component (name: bandWidth_mc)

    • PeopleList component (name: peopleList_mc)

    • 3 AVPresence components (names: me_mc, p1_mc, p2_mc)

  7. Select the Text tool and click once on the stage. Select Dynamic Text in the Property Inspector and name the instance userDisp. Feel free to change the font and point size at this stage. Create another Dynamic text box and name it chatRomDisp.

  8. Drag a Button component to the stage. Give it an instance name of leaveRoomBtn and enter Log Out of Room in the button's label parameter.

At this stage, you may need to resize a couple of the components or move things around. Figure 18.4 shows our final layout.

Figure 18.4. The meeting room is composed of Communication Components, dynamic text boxes, and a Button component.

Adding the Scripts

All that is left to do is to connect the rooms to the various functions in the chatroom.as script. To do that, follow these steps:

  1. Click once in frame 7 of the Actions layer and add a keyframe. Press the F9 key to open the Actions panel and enter the following:

    mainLobby();

  2. Click once in frame 12 of the Actions layer and add a keyframe. Press the F9 key to open the Actions panel and enter the following:

    chatroom.connect( chatArea );
chatColor.connect( chatArea );
connectionLED.connect( chatArea );

bandwidth_mc.connect( chatArea );
peopleList_mc.connect( chatArea );
me_mc.connect( chatArea );
me_mc.setUserName( session.username );
p1_mc.connect( chatArea );
p1_mc.setUserName( session.username );
p2_mc.connect( chatArea );
p2_mc.setUserName( session.username );

userDisp.text = session.username;    // show our user name
chatRoomDisp.text = activeRoom.room; // and chat room

    The main purpose of this script is to wire all our components to our connection named "chatArea." In addition, the script also gets our user's name and the chat room we are in from the global variables and puts them in the text boxes.

  3. Save the file and publish it to the ch18 folder. Open Dreamweaver MX 2004 and add the .swf file to the Oakbridge Meeting page located in your Chapter 18 Exercise folder. Save this file to you ch18 folder.

  4. Send a friend the URL, connect a camera to your computers, and have fun. Figure 18.5 shows the meeting facility "in action."

    Figure 18.5. The online meeting facility is being used by a couple Oakbridge Community Centre members. One of them looks suspiciously like one of the authors, and the other resembles his son.
    [ Team LiB ]


Summary

In this chapter, we focused on the construction of a rather "cool" application for the Oakbridge Community Centre—a fully interactive meeting room with chat, video, and audio capabilities.

Before we got into that, we took a moment to reflect on the implications of a transparent technology that makes human-to-human interaction possible. We discussed the real competitive advantage of the Flash/Flash Communication Server combination and concluded that the money saved by the client in development costs was significant. Even then, we suggested that HTML and CSS are other approaches and that you should use the technology best suited to the task at hand.

It isn't just the developer community that is quick to grasp the implications of this technology. In Jordan's "Epiphany," we watched as the owners of a small video production company immediately grasp the promise of the technology and the technical requirements needed to deploy it for their clients.

We then reviewed how the meeting room will work, discussed the technical requirements of the task, and built a meeting room for the Oakbridge Community Center using the Communications Components and other components that come packaged with the application.

This completes the construction phase of the dynamic site in the book's title. The next step of the process—debugging and testing—is the subject of the following chapter.


Part V: Pulling It All Together

19 Debugging and Testing

20 Deployment


Chapter 19. Debugging and Testing

With the site finished, the big question facing the team is: "Does it work?" Though you may have been testing the bits and pieces of the project as you went along, the answer to that question is rarely, "Of course it does."

Though you may have been testing using the Test in Browser features of Dreamweaver MX 2004 and Fireworks MX 2004 or the Test Movie feature of Flash MX 2004, they really aren't the same as actually testing the site. Even if you have been using the Flash Communication Server MX and ColdFusion MX locally, nothing can come close to the "real thing." At this stage of the game, the team has to pull back from looking at the trees and focus on the forest. This means everything, and we mean everything, has to work.

The first thing you have to realize is that testing is a time-consuming process. You have to look for spelling errors and broken links or links that go to the wrong place. You have to examine each piece of data to ensure it is correct and current. If you have streaming video and audio feeds, you have to ensure they work. The stuff you can see is the easy part of the process. The really hard part is finding bugs and fixing them. This would include the wrong font in a CSS Style Sheet, images that don't load, plugins that don't work, browser crashes caused by antiquated software or plugin difficulty, and any other of the million possible things that can go wrong.

Then there are the accessibility issues. More and more, jurisdictions are not regarding your work as simply a web site. They see the site as an "application," and as such, governments from the United States (Section 508 of the Rehabilitation Act) to the European Union have some pretty stringent and specific accessibility standards, rules, or guidelines that must be met. For example, Section 508 plainly states that all federal and government-owned electronic information must be accessible by the disabled. A good web site for further information is http://www.section508.gov.

Hours are spent fixing problems and addressing accessibility issues, and then you reinvest even more hours to start the process all over again to ensure everything works to the project's technical and creative specifications before going live. The time spent here, being rigorous and meticulous, is not wasted time. In fact, it will be the most valuable investment you will make in the project. A good rule of thumb at this stage is to have your production budget allow for ten percent of the project's time for quality assurance and testing.

The testing process can be informal or formal. It can be done in-house by a few of the team members, or you can retain the services of an outside company to undertake the process on your behalf. No matter how you approach testing, do it.


Debugging Issues

There is a lot of code being used to drive the site. The problem with code is that one rarely gets it perfect the first time. Thus, debugging is a process that should occur throughout development. It is important to help you find errors in your code and retrace your steps. A good rule of thumb is to debug every page of a dynamic site.

The second rule is: "Leave debugging to the pros." If you are not at the expert coding level and you have experts coding the site, leave the debugging in their capable hands.

Many of the Studio MX 2004 applications that generate code have a debugging capability. A complete explanation of how to debug the code in each of the applications is well out of the scope of this book. Instead, we are going to briefly review the debuggers included in ColdFusion MX, Dreamweaver MX 2004, Flash MX 2004, and Director MX.


Using ColdFusion MX's Debugging Options

ColdFusion MX offers you some extensive debugging and error–handling features. There are quite a few, and to the person new to ColdFusion, it is natural to wonder where to start. The place to start is the Debugging settings of the Administrator Page (see Figure 19.1).

Figure 19.1. Ground Zero for debugging in ColdFusion MX is the Administrator Debugging settings.

The ColdFusion MX Administrator Debugging Settings

This page enables you to customize exactly what appears in the debugging output. You can also use it to monitor the ColdFusion MX server. To customize your debugging settings, follow these steps:

  1. Select Start, Macromedia ColdFusion MX, Administrator, or if you are using a Mac (or any J2EE capable system), enter a URL to the cfusion admin, such as http://your-computer.local:8080/cfusion/.

  2. When the login page opens, enter your password.

  3. When the Administrator page opens, select Debugging Settings in the Debugging and Logging section on the left side of the page. This will open the Debugging settings page.

When the page opens, you will be presented with a number of options. They are:

  • Enable Debugging: Click this to enable or disable debugging. Debugging, as you will notice, is turned off by default. If you are using Flash Remoting, having debugging enabled is almost mandatory.

  • Select Debugging Output Format: You have two choices in the pop-down. The first, classic.cfm, appends the debugging information to the end of a web page.

    This has been a feature of ColdFusion since version 1, which explains the name. The second option, dockable.cfm, is new to ColdFusion MX. It is a DHTML-based interface, which displays the information in a tree view in a separate pop up window that can even be docked to the page. Keep in mind that if you are using pop-ups in ColdFusion, they can be an issue. If you are using a browser or tool that kills pop-up windows, including Netscape, Opera, and the Google Toolbar 2.0, you should turn that option off.

  • Report Execution Times: If a page has a slow response time, this option will show you. Simply enter a value, and any page exceeding it will be highlighted in red. This option is selected by default, and you can choose a summary or a detailed tree-based display.

  • Database Activity: Check this option to enable reporting of SQL database activity.

  • Exception Information: Selecting this, the default, causes any exceptions in a request to be reported.

  • Tracing Information: Selecting this, the default, displays an entry for every CFTRACE tag in the application.

  • Variables: Selecting this causes the ColdFusion variables to be displayed. This is selected by default, and you can choose which variables are displayed.

  • Enable Robust Exception Information: Select this if you are an absolute control freak. The list shows you what will be displayed, and the results will be detail-intensive.

  • Enable Performance Monitoring: If you are using Windows NT or Windows 2000-based servers, check this to enable the standard NT performance counters that display information about the ColdFusion Application server. This is deselected by default. If you do enable it, you will see a graph of the counters available.

  • Enable CFSTAT: For non-Windows servers, select this to take the place of Performance Monitoring. You won't get the neat Windows graph, but you do get the same information.

The Debugging IP Addresses Page in ColdFusion MX

This option only displays debugging messages to local users (who use the local IP address 127.0.01). Instead of turning off debugging output across the board, you can use this window to specify which people in the team see the debugging messages. To use this feature, do the following:

  1. Select the Debugging IP Address in the Debugging and Logging list on the right. The page shown in Figure 19.2 will appear.

    Figure 19.2. The Debugging IP Address page lets you limit debugging messages to specific IP addresses.

  2. Enter an IP address that should be receiving the messages and click the add button.

  3. To remove an address, select it from the list and click the Remove Selected button.

Tip

If you don't want to be constantly receiving debugging messages on your local machine, you can delete your address. If you want to add it at a later date, simply click the Add Current button.

ColdFusion MX Logs

ColdFusion MX creates some pretty detailed log files that are an immense help for monitoring and debugging applications. The logging settings page, Figure 19.3, lets you control how ColdFusion MX will maintain the log files and even add a couple that aren't a part of the default. To configure your Log settings, select Logging Settings from the list under Debugging and Logging. The Logging settings page will open.

Figure 19.3. The ColdFusion MX Logging Settings enable you to configure the application's logs.

The settings on the page are:

  • Log Directory: This is the address for the logs. The default is to store them in the ColdFusion MX root directory.

  • Maximum File Size: Log files can get really big…really fast. Use this option to set the maximum file size. When it is reached, the file is copied into a log.archives file.

  • Maximum Number of Archives: If you don't want a couple of hundred logs cluttering up your hard drive, enter a number (the default is 10), and the oldest archive will be deleted when the number of logs exceeds the number entered.

  • Log Slow Pages: Select this to track pages that take longer than the specified amount of time to execute. The primary use for this is to identify bottlenecks in the application.

  • Log All CORBA calls: An option if you are using CORBA objects (Common Object Request Broker Architecture). In simple terms, CORBA is a standard for creating distributed object infrastructures (which is a book by itself). Select this to have ColdFusion log all CORBA interactions to the server.log file.

  • Enable Logging for Scheduled Tasks: Select this if you are using ColdFusion's built–in task scheduler.

Email from ColdFusion MX

With all these debugging messages and logs, it would be nice to ensure that somebody reads them.

ColdFusion MX has a nifty little feature that enables you to add email notification to server administrators in case of serious problems. To set up an SMTP email server, follow these steps:

  1. Select Mail Server from the Server Settings area. This will open the Mail Settings page, as shown in Figure 19.4.

    Figure 19.4. The Mail Server Settings enable you to set up ColdFusion MX to talk to your email server.

  2. Enter either a domain name or an IP address for your company's outgoing (SMTP) mail server.

  3. Enter the Mail Server's port number in the area indicated. The default is 25 because this is almost always the port number used.

  4. If the server is slow, you can adjust the amount of time ColdFusion waits when trying to connect. You can set the amount in the Connection Timeout box.

  5. Enter an amount in the Spool Interval settings to specify how long ColdFusion waits before checking to see if a new email message is waiting to be sent. The lower the value, the sooner they are sent.

  6. Select the Verify Mail Server Connection box to have ColdFusion test the connection settings. Always have this selected.

  7. The Mail Logging settings in the pop-down enable you to choose to log the email generated by ColdFusion by severity or to simply log all the email sent.

  8. Click the Submit Changes button to save the changes.


Optimizing Dreamweaver MX 2004 Code

Talk to a seasoned developer, and he or she will tell you, "Dreamweaver writes ugly code." What they are really saying is, "I prefer to write my own code." There is a grain of truth in this because hand-written code may only require one line, whereas Dreamweaver MX 2004 will do the same thing using four or five lines. Eventually, you are going to write some of your own code, and when you do, you will have to do some debugging.

Debugging is the process of finding and fixing coding errors. This mainly involves checking the code for syntax errors such as spelling mistakes, misplaced or unbalanced brackets, and so on. It also involves following variables to ensure that they have the values they are supposed to have. Though serious debugging should always be in the realm of the team's "coder," there is a rather interesting method of optimizing code in Dreamweaver MX 2004.

Using the Clean Up HTML/XHTML Command

Even though Cascading Style Sheets (CSS) reduce the need for optimized HTML, the key word here is "reduce." As we are fond of saying, "Let the software do the work." Follow these steps to have Dreamweaver scoot through your pages and do the optimization for you:

  1. Open a Dreamweaver MX 2004 page. Select Commands, Clean Up HTML to open the Clean Up HTML/XHTML dialog box shown in Figure 19.5.

    Figure 19.5. Use the Clean Up HTML/XHTML dialog box to optimize the HTML code in a page.

  2. To delete tags with no code between them, such as <p></p>, select the Remove: Empty Container Tags.

  3. To remove tags that repeat the same code in the same text block, select Remove: Redundant Nested Tags.

  4. To remove any comments not created by Dreamweaver for items such as Library or template items, select Remove: Non-Dreamweaver HTML Comments.

  5. To remove all Dreamweaver-specific code comments, select Remove: Dreamweaver Special Mark Up.

  6. To remove a specific tag or tags and all of the tag's attributes, select Remove: Specific Tags, and enter the tag or tags to be removed into the text input box.

  7. To consolidate <font> tags, select Option: Combine Nested <font> Tags when possible.

  8. If you would like to see a log of the changes, select Option: Show Log on Completion.

  9. Click OK.

The requested actions will be undertaken, and if the Show Log Option is selected, an alert will display any changes made.

Balancing JavaScript Braces

If you have written JavaScript or Flash ActionScript, you know how easy it is to lose track of opening and closing curly braces, parentheses, and quotation marks. It's very easy for code to become entrenched in braces. Unbalanced braces can have implications ranging from syntax errors to unpredictable operations of the code.

Though Dreamweaver leaves you to your own devices when it comes to quotation marks, there is help available with curly braces, square brackets, and parentheses. Here is how to use it:

  1. Open a Dreamweaver MX 2004 page and select View, Code View. Select a curly brace, square bracket or parenthesis.

  2. Select Edit, Balance Braces, as shown in Figure 19.6. Dreamweaver will select all the code between that brace and the closing brace. If there is a problem, Dreamweaver will beep.

    Figure 19.6. Dreamweaver MX 2004 will balance braces and quotations in JavaScript and ActionScript code.

Tip

This doesn't work if you select a closing brace.

Note

If Mac users are wondering where the JavaScript Debugger is located, we are pleased to report that it is deceased. The JavaScript Debugger tool has been removed from the application.


Director MX Debugging Tools

In Director MX, bugs inevitably appear as error messages. Figure 19.7 is an example of this. A button has been clicked and the error message box appears. The important items in this dialog box are the Debug button and the Script button.

Figure 19.7. A typical error message in Director MX shows you the error and the Script and Debug buttons.

In addition to the Script and Debug windows, you also have available to you the Compile button in the Script window, the watcher, and the Message window.

Using the Director MX Debugger

If ever there was a feature in Director MX that will trip up the "newbie," it has to be this one. Up pops the error, and the first reaction is to click the Debug button in the mistaken assumption that Director will somehow fix the code. It won't happen. The purpose of the Debug window is to show you where the problem occurred and nothing more.

There are actually two occasions where the Debugger is an invaluable tool. The first is when you get an error message. The second is when you need to set a breakpoint. Follow these steps to use the Debug button:

  1. Open the Button1.dir file in the Chapter 19 Exercise folder downloaded from the book's site. Play the movie and click the button.

  2. When the error message appears, click the Debug button to open the Debugger. Another method for opening the Debugger is to set a breakpoint in the code. Setting a break point in the code causes the movie to stop and the Debugger window to open when the line of code containing the break point is executed.

    The Debugger shown in Figure 19.8 is not as intimidating as it seems.

    Figure 19.8. The Director Debugger shows you the line of code where the error occurred.

    As you can see, the Debugger is essentially divided into four areas. On the left side of the page from top to bottom are the following three panes:

    • Call Stack Pane: This shows the sequence of handlers that ran before the error.

    • Variable Pane: This shows all the variables associated with the handler.

    • Watcher Pane: This shows the values and data in the handler and tracks their values.

    On the right side of the window is the Script Pane. The green arrow points to the line of code where the script started executing.

    In the case of our line of code, it reads:

    sprite (the clickOn).memberNum = sprite (the clikOn).memberNum+1

    It stopped on that line because of a common error—a spelling problem. The mouse property "the clickOn" is spelled incorrectly.

  3. Click the mouse between the "i" and the "k" in the second reference to "the clikOn" and enter a lowercase "c." Close the Debugger.

  4. Rewind and play the movie. The button will change color, and the error window is a thing of the past. Select File, Revert because we are now going to show you how to avoid this problem in the first place.

Note

We can hear the veteran Director MX developers sighing and saying, "Oh man." We agree; using the Debugger for such a simple error is overkill. This feature really shines when variable values and handlers are being used for some rather complex coding.

Using the Script Window

The Script Window is where scripts are entered in Director MX. When you click the button to get the error message, you will notice the Script Error window not only tells you it can't find a Property, it shows you the line of code and the Property—#clickOn—that couldn't be found.

In this instance, click the Script button because you are dealing with a spelling error. Follow these steps to fix the problem in the Script window:

  1. Play the movie and click the button on the stage.

  2. Click the Script button in the Script error window to open the Script window shown in Figure 19.9.

    Figure 19.9. The Director MX Script window is where scripts containing rather obvious errors can be changed.

  3. Add the missing "c" to the word "clikOn."

  4. Close the script window, play the movie, and click the button on the stage. It changes color.

Tip

A very common coding error is a spelling mistake. These usually result in an error that tells you a variable doesn't have a value. A good habit to get into is to compile the script before closing the Script window. The Compile button is on the Button bar and looks like a lightning bolt. When the script is finished, click it, and if there is a problem, you will see an error message like that shown in Figure 19.10. In this instance, a space was added between "mouse" and "Up."

Figure 19.10. Clicking the Compile button—the lightning bolt—before saving the script will catch syntax errors.

    [ Team LiB ]


Debugging in Flash MX 2004

You can't avoid using ActionScript when it comes to using Flash MX 2004 with dynamic sites. When you start using code, you will inevitably make mistakes and have to debug the script to isolate them. Debugging, regardless of the application, requires patience, doggedness, and meticulous attention to detail.

The biggest mistake you can make is to have the people testing the movie report bugs to you in a vague manner. A report along the lines of, "I was using the movie, and after 19 minutes, the screen froze," is totally useless. Take a page from the software manufacturers and document the bugs. This usually takes the form of a step-by-step procedure to replicate the bug. A typical report would be:

  1. Click on the date input field.

  2. Enter today's date.

  3. Click OK.

    • Result: The temperature in degrees Kelvin appears in the field.

    • Expected result: Today's date should appear in the field.

Flash MX 2004 contains the following debugging tools:

  • The trace() function.

  • The Debugger.

  • The List Variables menu.

  • The List Objects menus.

Using the Trace Function

The most ubiquitous tool is the trace function. The function simply accepts an argument and puts the results in the Output window. To invoke it, choose Window, Developer Panels, Output, or press the F2 key. A typical trace function would be:

Trace("Hey Chris");

In this instance, the phrase, "Hey Chris" would appear in the Output window.

Another would be:

var x = 2;
trace(x);

In this instance, the value "2" would appear.

Use this function to trace values of variables used in the code. Also keep in mind that trace only works in test mode. It will not work in a browser.

Tip

Before you export your final .swf file, be sure to click the Flash tab in the Publish Settings (File, Publish). When the Flash Publish window appears, as in Figure 19.11, make sure you check Omit Trace Actions. This prevents the trace function from actually going into the final .swf file.

Figure 19.11. Be sure to turn off the trace actions before you publish the Flash .swf file.

The Flash MX 2004 Debug Panel

The Debug panel (see Figure 19.12), available through Control, Debug Movie, Command-Shift-Return (Mac), or Control-Shift-Enter (PC), launches the .swf file. Here are just some of things this panel can do while the movie is running:

  • Show you the movie clip structure of a movie.

  • View and modify variables.

  • Like Director MX, keep track of the currently running function and what functions were called to that point using the call stack.

  • Add or remove breakpoints to the code. This will enable you to "step" through the movie.

Figure 19.12. The Flash Debug panel can only be accessed through the Control menu.

When the Debug panel is open, the Flash MX 2004 menu will change to include a Debug menu item.

As you can see, the panel is divided into four areas. On the left side of the panel are:

  • Movie Clip Tree View: This area shows you the hierarchy of the movie clips and objects on the stage.

  • Properties, Variables, Locals, Watch: These four tabs enable you to see all the properties, objects, and variables in the movie. Click the Properties tab, and a list of the selected object or movie clip's properties are listed. Click the variables tab to see a list of the variables in the movie. The Locals tab enables you to see the values of your local variables at the current point in the movie. For example, if you set a breakpoint in a function, the Locals tab would show you all the local variables inside the function. The Watch tab enables you to see a subset of the variables and properties from the other tabs. This is usually done by right-clicking (PC) or Control-clicking (Mac) an item and selecting "watch" from the Context menu.

  • Call Stack: This shows you the functions that are running and the functions that started them.

    The right side of the panel gives you access to the code and the ability to add (The Stop Sign) break points or remove them by selecting the Stop sign a second time.


Usability/Functionality

If any one aspect of design drives the authors up the wall, across the ceiling, and down the other wall, it is the issue of usability. We can't begin to count the number of times we have been asked to check out sites that were beautifully designed but impossible to use. When we report this back to the requester, the response is usually along the lines of, "Well I can use it. You must be pretty stupid if you can't." In this case, the designer designed for himself or herself and assumed everyone else on the planet was his or her clone.

At the other end of the spectrum is a very disturbing trend—regarding usability as a "politically correct" mantra. In this case, the final design reflects superb usability but is absolute vanilla on the design scale. These sites are sensitive to the dictums of the "Usability Police," whose chief is Jakob Nielsen.

What's needed is balance.

Maybe web designers should heed Jakob Nielsen's principles but pay more attention to Curt Cloniger's observation in his New Riders book, Fresh Styles for Web Designers. He said, and we agree, "If a site is perfectly usable but it lacks an elegant and appropriate style, it will fail."

Why does it "fail?" The reason, from our experience, is that the designer fell in love with the technology and not the user.

When the site is finished, a great way to learn humility is to actually sit down and watch a complete stranger try to work his or her way through the site. You need to simply shut up and take copious notes. By doing that, you get to watch a real live user attempt to access the information on the site. What is intuitive to you might not be intuitive to the people that have to use it.

One final point: If you are using Flash MX 2004 and Director MX, download time should be an extremely high priority. Flash developers will tell you the Bandwidth Profiler rapidly becomes their best friend. Director developers will viciously strip out anything that isn't used in the presentation, from text to XTRAS, in an effort to reduce file size and the "hit" on bandwidth.


Accessibility

When testing your site, you will have no choice but to test for accessibility. Tell that to the average web developer, and you can expect a response along the following lines: "Dude, it isn't a government project." Our response is, "Dude, that no longer matters." Accessibility is now jurisdictional, and you will have to make your work accessible to those with disabilities.

To put the magnitude of the issue into perspective, we would like you to seriously comprehend the scope of the issue by understanding the plight of the blind. Did you know, 70% of the U.S. population who are legally blind are either unemployed or underemployed? Of that group, approximately 1% have access to the data necessary to change their situation. That means you have essentially locked out 99% of the blind population in the U.S. from the web.

This is something governments haven't overlooked. In the United States, Section 508 of the Rehabilitation Act (www.usdoj.gov/crt/508/508home.html) mandates that any work done for any government, from local to federal, must meet accessibility standards. In Canada, the rules are even tighter. In the European Union, anyone registering for a domain name must provide an accessible version of the site. Though governments are mandating acceptance of these guidelines, educators are now jumping on the accessibility juggernaut, and business will soon follow.

A good example of this is Macromedia. If you have ever dealt with their technical support area, you are quite familiar with how long it takes to resolve your product issue. Did you know that an accessibility issue is so serious with the corporation that they will deal with you personally within ten minutes or so? Did you also know that if the issue cannot be resolved, the policy of the corporation is to involve their accessibility expert, Bob Regan, almost before you hang up your phone?

Accessibility and Dreamweaver MX 2004

To make it relatively easy for you to meet the requirements of the Section 508 statute, Dreamweaver MX 2004 has put the accessibility options in the application's Preferences. To set the Accessibility Options:

  1. Open the Application Preferences, and in the Category listing, select Accessibility to open the Accessibility Preferences shown in Figure 19.13.

    Figure 19.13. The Accessibility Preferences enable you to choose to have additional accessibility options added to objects being inserted into a web page.

  2. Select the Accessibility options to be added and click OK.

  3. To see how these options are applied, open a new HTML page.

  4. Select the Table tool from the Insert panel and click once on the page to open the Insert Table dialog box shown in Figure 19.14. The accessibility options are at the bottom of the dialog box. Enter a caption and select its location on the table from the choices in the pop-down menu.

    Figure 19.14. Selecting an Accessibility preference will add an accessibility section to many dialog boxes.

Accommodating Access

There are no real rules when it comes to designing accessibility into your sites. Use your common sense, and if you really want an attitude-altering accessibility experience, watch a blind person surf the net using a Screen Reader. If you can afford it, get a Screen Reader and learn to use it. Just be prepared for some serious aggravation for the first 30 days as you get used to it. Before you toss the device in the trash, consider this: you just experienced the frustration that disabled visitors to your site will encounter.

Still, here are a few tips, in no particular order, that should help you:

  • When describing a picture, don't over-describe it.

  • Screen readers read from the top of the page to the bottom. Bob Regan at Macromedia has a great way of describing how a Screen Reader works. "It is like reading through a soda straw," he says. "There is absolutely no context."

  • If you have a repeating Flash animation on the stage, turn it off for the Screen Reader. These things are the verbal equivalent of a "recursive code loop." Bottom line? If you can't make it accessible, make it inaccessible.

  • In Flash, make all child objects inaccessible. They drive Screen Readers crazy.

  • Don't color-code information in an accessible site.

  • Ensure that there is sufficient color contrast between the foreground and background colors.

  • Avoid blinking objects. Any object blinking at a rate of 24 mHz could trigger photosensitive epilepsy.

  • When you test the site, approach the project as though the test was being done on a black and white television.

  • If you use keyboard shortcuts, the only keys available to a Screen Reader are 0 to 9. In the U.K., check to see which keys can be used.

  • In Flash, if you are using a movie clip as a button, use frame-based ActionScript to drive it and don't add a hit area to the button. A hit area will be picked up by a screen reader.

Tip

A quick way to identify accessibility issues in Dreamweaver MX 2004 is to select File, Check Page, Accessibility. Dreamweaver will scoot through the page and provide you with a detailed report in the Report panel. If you are unsure how to fix an identified problem, click the More Info button—the "i" in the Text balloon on the left side of the panel. This will open the UsableNet Accessibility Reference manual in the Reference panel, as shown in Figure 19.15.

Figure 19.15. If you are unsure how to address an accessibility issue, select the item and click the More Info button in the Report panel to open the Usability manual in the Reference panel.

    [ Team LiB ]


The Testing Team and Its Responsibilities

With the code debugged and the site deemed both usable and accessible, you can really start to test the site. The first thing to keep in mind is that you are the last person on earth who should be doing this work. You are too "close" to the project and have an intimate understanding of the minutia of the site. You will miss problems.

Secondly, a site isn't a site unless it is viewed through a browser. That doesn't mean just the latest versions of Netscape or Internet Explorer, either. Use as many browsers and versions of those browsers as you see necessary. This also means the site should now be uploaded to a password-protected remote testing server that exactly mirrors the server being used for the site.

If the site is complex, consider running alpha and beta tests. The alpha test will identify significant usability, functionality, and design flaws. The results of this test inevitably require major fixes to the site. This testing can be done by an outside organization or by a group of individuals chosen by both you and the client. In either case, anyone involved in testing should be provided with a concise feedback reporting system.

The beta test is the big one. This test will identify many of the problems missed in the alpha test and identify problems with items fixed in the alpha test. Again, use an outside organization for this one or a group of outside individuals. The outcome of this test and the corresponding "bug fixes" will result in a site that is ready for upload to the server and release.

Because most of the assembly will be done in Dreamweaver MX 2004, we will cover two invaluable testing features built into the application: browser targeting and link checking.

Browser Targeting and Link Checking in Dreamweaver MX 2004

Because Dreamweaver MX 2004 no longer supports the testing of the Explorer and Netscape 3.0 browsers, a huge headache has been removed. Macromedia has declared those browsers obsolete, and we salute the decision. However, in a world of 4.0 browsers and above, there are still a lot of issues that will have to be identified and corrected.

A first line of defense is the Check Target Browser feature. Follow these steps to do a browser check:

  1. Open a Dreamweaver MX 2004 page and select File, Check Page, Check Target Browsers.

  2. The Results panel, shown in Figure 19.16, opens and shows you the errors in the page.

    Figure 19.16. There are some issues with older browsers—4.0 and below—that can be found by selecting Check Target Browser in Dreamweaver.

  3. An important element of any site is the links on the pages. Broken links are embarrassing, and Dreamweaver supplies a rather nifty tool to check links and ensure they are valid. Select Site, Check Links Sitewide, and Dreamweaver will check through all the pages in the site. If any links are broken, it will show you those in the "Link Checker" area of the Results panel.

Tip

If the site is complex, and you only want to check the links for the current page, don't use the Site menu. Open the Results panel and click and hold on the Check Links button (the green arrow). A pop-down menu will appear, enabling you to check the links for the entire site, for the selected page, or for selected files or folders in the site.


Summary

This chapter can be regarded as a self-preservation manual. Sites are never perfect, and things go wrong. The ability to methodically and meticulously locate and fix problems is a valuable skill to develop. As we said right at the start, "Testing is a time-consuming process," and you really should consider devoting at least 10% of the project's time budget to this process.

We started with a review of the code debugging process and stressed that this is a task best left to the coders. We then reviewed the debugging features of ColdFusion MX, Dreamweaver MX 2004, Director MX, and Flash MX 2004. We also dealt with the importance of accessibility to web sites and how Dreamweaver MX 2004 can help the process of making a site accessible. We also touched on alpha and beta testing and their importance in the production process.

We started the debugging section with ColdFusion MX's Administration panel and its debugging settings. We reviewed many of the settings, the way to set up IP addresses for ColdFusion debugging, the importance of ColdFusion MX logs and the way to create them, and finished with an overview of how to configure ColdFusion MX to send an email in the event of a problem.

Dreamweaver MX 2004 was next, and we showed you how to use the Clean Up HTML/XHTML command to optimize your code and how to Balance Braces used in JavaScripts in Dreamweaver's Code View.

We then looked at the Director MX Debugger and reviewed many of this tool's valuable features. We also showed you how to use the Script window to fix coding errors.

Naturally, Flash MX 2004 figures into the coding equation. We explained how to use the trace function and the Debug panel to isolate errors or code problems. From there, we moved into a brief overview of functionality and suggested that if you need a humbling experience, watch somebody try to use your site.

We then examined the issue of accessibility in today's development environment and pointed out that governments worldwide are making accessibility a jurisdictional requirement. We reviewed the extensive accessibility features of Dreamweaver MX 2004 and also offered a short list of things you can do today to accommodate accessibility.

We finished the chapter with a brief discussion of the testing team and their responsibilities. The team should either be a company retained for this purpose or a group of individuals not involved in the creation of the site. We also discussed browser testing and link checking in Dreamweaver MX 2004 and announced the death of 3.0 browser support in Dreamweaver MX 2004.


Chapter 20. Deployment

Having completed the testing phase, fixed the bugs, and received all the necessary approvals, the time has arrived to go "live" and post the site to the web.

Traditionally, this is done by uploading the files to the server using File Transfer Protocol (FTP). This should only occur after the site is fully debugged on the testing server. However, you will still need to debug the site. This is because all testing done on the testing server should be done on the live server after the FTP upload. This FTP upload can be done using Dreamweaver MX 2004.

Talk to many web developers, and they will tell you they prefer to use a standalone FTP product, such as Transmit or Fetch on the Mac or WS_FTP on the PC, for FTP uploads. These are great products, but their weakness is an inability to accommodate workgroups, versioning, and file updates.

Mac users actually have a "built–in" FTP app. They can select Go, Connect to Server, and when they locate the remote server and log in, it will appear as an icon of a globe sitting on a hard drive on their desktop. All they have to do is open the volume and drag the files to their location on the server.

There are a number of other issues to consider as well. You should look at ColdFusion MX to ensure the data source connection is working. Is the database in place and accessible? Is the Flash Communication Server functioning as it should, and can the site be maintained using the back-end administration tools we built earlier in the book?

Deployment will go smoothly if:

  1. You set up your testing server to match your deployment server as closely as possible. This is a simple fact of life that will become a major problem if not adhered to. The testing and deployment server environments should be identical. This way, when the files are uploaded to the deployment server, problems identified will be minor at worst.

  2. You do not have any absolute addressing referring to your testing server. This means links in the page should be relative. If you have a link pointing to an absolute address on a server that is not being used, there will be errors.

  3. The pages in your site are as modular as possible. Modularity ensures that you can move a page from one area of the site to another without the need to recode the module.


Ensuring Dynamic Components Are Working

Ensuring that your dynamic components are working is critical at this stage. As we pointed out earlier in the book, ColdFusion MX Components (CFC files) contain reusable code that is rather easy to maintain. Still, these components are one of the first things to test upon deployment.

This check can easily be done with Flash MX 2004 if you have installed the Flash Remoting components. To verify that the CFC is running:

  1. Open Flash MX 2004 and select Window, Services Browser to open the Service Browser panel.

  2. Click the arrow on the left of the panel to open the Service Browser Options menu.

  3. Select Add Gateway to open the Add Gateway dialog box.

  4. In the text input area of the dialog box, enter the domain name or IP address for your server, along with "/flashservices/gateway." For example, you would enter: http://www.yourdomain.com/flashservices/gateway. Click the Add Gateway button.

  5. Open the Services Options menu and select Add Service to open the Add Service dialog box.

  6. In the text input area, type the name of your CFC file. In this case, it would be the facilities file from the Oakbridge site. Click the Add Service button.

If the connection is successful, you will see a list of the methods within your CFC (such as addBooking, removeBooking, listFacilities, and so on).

Checking Database Connectivity

This is another area that should have a high degree of importance attached to it. Most providers will either provide you with an online database management utility or a domain or IP address of the database. If you have the IP address of the database management utility, you can most likely add it as a server in your database management program.

Some database management programs enable you to export the schema of your MySQL database to a file that can be imported into the new database. Check your database management utility for this, and if you do not have this feature, you will have to re-enter the table information.

Finally, make sure the username and password for your database connections—locally and remotely—match the remote server. This is why many developers make it a habit to mirror the username and password on the testing server. Again, try to keep everything as similar as possible between the testing and remote servers.


Uploading to the Remote Server

If any one aspect of Dreamweaver MX 2004 seems to cause the most problems, it is getting the files from your computer to the remote server (the server that hands up the files the world will see).

Part of the problem is the way Dreamweaver actually thinks about remote sites. When you upload your site—called "putting" in Dreamweaver—Dreamweaver will mirror the site on the local machine to that of the remote site. This approach has a few advantages:

  1. Updating and maintaining the site are much easier.

  2. It assists in the prevention of broken, orphaned, or otherwise incorrect links on the site.

  3. The file/folder structure between the local and remote sites is such that a change locally can be instantly reflected remotely.

  4. Backing up a site becomes routine and automatic.

Using FTP in Dreamweaver MX 2004

The first thing you need to do is tell Dreamweaver MX 2004 you will be using FTP to upload the files to a remote site. Though you can use one of the commercial products mentioned earlier, Dreamweaver can also function as an FTP client.

To use Dreamweaver MX 2004 to FTP your files to a remote server, follow these steps:

  1. Open the Manage Sites dialog box, select the site to be uploaded, and click the Edit button to open the Site Definitions.

  2. Select the Advanced tab and select the remote Info category to open the Remote Info dialog box, which will ask you a few questions:

    • Access: Select FTP from the pop-down menu. When you select FTP, the dialog box will change to that shown in Figure 20.1.

      Figure 20.1. To post files from Dreamweaver MX 2004 to a remote server, you have to set the Remote Info in the Advanced area of the Site Definitions.

    • Host Directory: Enter the directory on the server where the files are uploaded. A lot of servers have the site root set to www.htdocs or public_html/. If you are unsure of the directory, contact your ISP or refer to the documentation provided by your ISP.

    • Login: This is the username assigned to your account.

    • Password: This is the password used to gain entry to the FTP server.

    • Use Passive FTP: Certain firewalls require this feature, and selecting this option enables Dreamweaver MX 2004 to set up the FTP session, rather than having the FTP server do it. Your network administrator can give you all the necessary details.

    • Use Firewall: If firewall preferences have been set in the Dreamweaver MX 2004 preferences, the values will be used. Clicking the Firewall settings button will simply open the Dreamweaver preferences, and you will have to input the Firewall host. If you are unsure of the host, contact the network administrator.

    • Use Secure FTP (SFTP): Select this if this protocol is available.

    • Check In/Out: Select this if you are using Macromedia Contribute for file management or if Check In/Check Out is needed for subsequent work. The last option is dangerous for obvious reasons and should be carefully considered.
Working with a Remote Site in Dreamweaver MX 2004

With the remote site defined, you can now move files to and from the remote server in Dreamweaver MX 2004. This involves connecting to and disconnecting from the remote server. All this can be done using the expanded version of the Files panel in Dreamweaver MX. To view the site's remote information, follow these steps:

  1. If it isn't open, open the Files panel.

  2. Click the Expand/Collapse button, the icon that looks like a split pane at the top of the panel.

  3. The panel will expand to fill the screen, as shown in Figure 20.2. On the left side of the pane that opens are the files sitting on the remote server, and the right side of the pane shows the files on the local server. If this arrangement bothers you because you are used to the reversed order used by certain FTP applications, simply click the Expand/Collapse button and select Edit, Preferences (PC) or Dreamweaver, Preferences (Mac). When the preferences open, select the Site category and select Always show: Local Files on the "Left." Close the preferences, and the panels will swap sides.

    Figure 20.2. The Site panel from previous versions of Dreamweaver MX 2004 is now found in the Files panel.

  4. To connect to the remote server, click the Connect/Disconnect button beside the site's name. If the remote server is local, or if you haven't specified a remote server in the site definition, this button will be grayed out. When you connect, the Connect "light" in the button will turn green. Click it again and you are disconnected.

  5. To send files to a remote server, you must first click the Connect button, and when you get a connection, you simply select the files on the local side of the screen and click the Put button (the blue Up arrow). To move files in the opposite direction, you click the Get button (the green Down arrow).

    There are other ways of doing "Getting" (download) and "Putting" (upload) of selected files:

    • Select Site, Put or Site, Get.

    • Press Control-Shift-D (PC) or Command-Shift-D (Mac) to "Get" a file.

    • Press Control-Shift-U (PC) or Command-Shift-U (Mac) to "Put" a file.

    • Right-click (PC) or Control-click(Mac) the file to be moved and select "Get" or "Put" from the Context menu.

    • Drag the files from one area and drop them in the other. This works but is not recommended because you could, inadvertently, upload a cloaked file.

    Tip

    You don't always have to click the Connect button before you move files around. Click the Get or Put button, and Dreamweaver will automatically connect to the remote site.

  6. Regardless of the method chosen—Get or Put—the Dependent Files dialog box will appear. You will be asked if all files linked to the document should also be included in the transfer.
Synchronizing Files

Though we presented some rather extensive naming conventions earlier in the book, we realize you are human. Eventually, you are going to forget which file on your hard drive is the most recent version that should be uploaded to the remote server.

Synchronizing files is done by selecting Site, Synchronize (PC) or selecting Synchronize from the Files panel's Option pop-down menu. What makes this command so neat is that you control how much of the site is synchronized at once. You can synchronize a file, a folder, or the entire site. It's your call. You can even remove files on the remote site that don't have local counterparts, and vice-versa.

To automatically synchronize the files in your site, follow these steps:

  1. Select the files you want to synchronize.

  2. Select Site, Synchronize (PC) or Synchronize in the panel options (Mac).

  3. When the Synchronize Files dialog box opens, as shown in Figure 20.3, select whether to synchronize the entire site or selected files.

    Figure 20.3. The Synchronize Files dialog box.

  4. The direction pop-down menu has three options:

    • Put newer files to remote: This means only the newest versions of the files are sent to the remote site.

    • Get newer files from remote: This means that if the files on the server are "newer" than those on the local site, they will be downloaded.

    • Get and Put newer files: Put the latest versions of each file on either the local machine or the remote server. Files move in both directions, unlike the previous two choices.

  5. If you select Get and Put newer files, skip to the next step. The other two enable you to select one additional option at the bottom of the dialog box. If the files are being sent to the remote site, you can choose to have them replace the older files by selecting the Replace option at the bottom of the dialog box. If they are moving from the server to the local site, you can delete any files that aren't on the remote site.

  6. Having made your choices, press Preview. This will open a window showing you the files to be synchronized.

  7. Decide whether the file will be synchronized or not by either checking the box in the Actions column or deselecting the check. By default, all boxes in the Actions column are checked. Click OK.

Tip

Be extremely careful when deciding to delete files. There is a real risk of losing the source files. This is why it is a good practice to always keep the original files out of the local site folder.

Using Dreamweaver MX 2004 to Manage Contribute Sites

Here's a typical scenario. Your client professes that his people are what make his business so great. In fact, each week he wants to feature the "Employee of the Week," with a photo and bio on the site. It is hardly worth your while to do this rather mundane task weekly, but you can either do it out of loyalty to the account or give the client the "keys to the site" and let him do it. Contribute was designed to solve this dilemma and free you for the more important revenue-generating maintenance activities.

Combining a web browser with a basic web page editor, Contribute enables your team members or clients to browse to a page and to edit or update it according to some stringent rules that you set. This section isn't designed to fully explore Contribute. Instead, we will assume that the site is Contribute-compatible and that you will be using Dreamweaver MX 2004 to manage the Contribute site.

As the administrator of a Contribute site, you can use Dreamweaver MX 2004 to do any of the following:

  • Change the sitewide settings. This would include such things as the administrator password or email.

  • Change the permissions for the individuals with access to the Contribute site.

  • Create Contribute users and send them connection keys.

To administer a Contribute web site in Dreamweaver MX 2004, follow these steps:

  1. Select Site, Administer Site in Contribute from the Files panel's Options menu. This will open the Administrator Password dialog box. Enter the password and click OK.

    Note

    If there isn't an administrator, you will be asked if you want the job. Click Yes, enter a password, confirm the password, and click OK.

  2. The Administer Web Site dialog box that opens, as seen in Figure 20.4, is divided into three areas:

    • Sitewide Settings: These are the settings such as email, password, and number of revisions saved that will affect the entire site.

    • Permission Groups: You change the permission granted to groups of users.

    • Set Up Users: This is where the connection keys are created.

    Figure 20.4. The Contribute administrator page in Dreamweaver MX 2004.

  3. Click the Sitewide Settings button to open the Sitewide Settings dialog box shown in Figure 20.5. This dialog box is not as complex as it appears at first glance. The Administrator information contains your email address, and clicking the Change Password button opens a dialog box that enables you to set up a new administrator password. Enable rollbacks simply enables you to determine how many revisions of the changed pages are located on the server. The default value is 3. The Advanced Options provide a little extra information, such as the default home page the server uses and the primary and alternate addresses for the site.

    Figure 20.5. The Sitewide Settings dialog box for the Contribute site.

  4. Select Users in the Permissions groups area and click the Edit Group button. This will open the Permissions Group dialog box (see Figure 20.6), which in many respects resembles the Site Definitions dialog box. On the left side are the permission categories, and it is here that you set exactly what Contribute users can and cannot do in the Contribute site. The categories are:

    • General: You can describe the group and identify the home page of the site to which they have access.

    • Folder/File Access: You can indicate the folders to which the group has access and whether or not they can delete files.

    • Editing: This dialog box sets how text is edited on the page. The choices range from the amount of text editing that can be done to the types of line breaks permitted.

    • Styles and Fonts: This area enables users' accesses to the HTML and CSS styles and whether they can apply them. You can also determine how the fonts are applied and the sizes used.

    • New Pages: This dialog box lets you decide if new pages or template-based pages can be added to the site.

    • New Images: This area controls the maximum file size of images that can be uploaded to the site. This way, you avoid a client trying to add a high-resolution photo that weighs in at 10 MB.

    Figure 20.6. The Permission Groups dialog box sets exactly what can or cannot be added to the site.

  5. Click the Send Connection Key button. This opens the Export Wizard (see Figure 20.7), which in many ways resembles the Basic Site Definitions wizard. Your first choice is to send your settings or create a connection key. Select "No, I would like to customize the connection settings for other users," and click Next to create a custom key. The four screens you will see are:

    • Connection Information: Here, you identify how you connect to your remote site and the path to the site.

    • Connection Key Group: Select the group name of the users to receive the "key."

    • Export the Key: Determine whether the key will be emailed to the group or remain on a local computer. Also, this is where they receive a password granting them access to the Contribute site. This password should be different from the administrator password.

    • Summary: You are presented with a summary of the information provided. If everything is acceptable, click OK.

    Figure 20.7. The connection key to the Contribute site is created in the User Setup wizard.

Using a "Back-End" to Update Dynamic Pages

Many people tend to forget that when a database is online, it must be left alone. Rearranging the database or adding fields or columns to the database files poses a real risk of everything from data corruption to the loss of the entire database. In addition, MySQL database files are often kept away from the server's file access for security reasons.

The other aspect of page management to consider is the fact that you are dealing with templates. As you saw when we created the booking facility for the Oakbridge Community Center, the page itself doesn't contain the content shown in the browser. The page is merely a template, and its primary function is to pull the data from the database and place that data in its correct location on the page.

Because databases are essentially untouchable when a site goes live, and because the actual page used to display the data has a limited function, the back-end created in Chapter 8, "Building the Data," takes a significant role in keeping the site current. In fact, a good habit to get into is to always provide a back-end to clients when you build a dynamic site. It gives the clients immediate access to their data without interfering with the page structure.

Use of the back-end that we devised earlier will enable you to add, update, or delete data without worrying about the integrity of the database. The reason is simple—it already has access to the fields in the database and is designed to provide the database with the pointers to the needed data. Even more important than that, any changes to the page can be done in real time.

In the case of the Oakbridge site, if they were to add a golf driving range to the facilities, the images, descriptions, pricing, availability, and any other data can appear on the site from the moment the ribbon opening the facility is cut. There is no requirement for extra pages, design work, and so on. The data is simply added to the site through the back-end. It is a process that takes less than 15 minutes to accomplish. From your perspective as a developer, this is a "no brainer." From the client's perspective, though, it is a huge competitive advantage with significant public relations and revenue implications.

The back-end doesn't have to be pretty. It just needs to be functional and thorough. This is an important point. The addfacility page shown in Figure 20.8 is not going to win any design awards. Yet for the client, this is one of the most important pages developed for the project.

Figure 20.8. The pages for the administrative back-end don't have to be pretty. They have to be functional and usable.

When designing the various back-end pages, keep the needs and sophistication of the end user in mind. The user shouldn't need a manual explaining how to use the back-end. The user needs to be able to look at the screen and instantly know what to do. This could involve a short one-on-one training session, or in the case of a complex site, an all day hands-on training seminar.

Building the back-end isn't as time-consuming as it may seem. A rather complex back-end can quickly be put together using the Dreamweaver MX 2004 server behaviors for quick functionality.

The server behaviors are what make the site "dynamic." They can do anything from displaying data to authenticating users. They are also designed for all levels of experience from the "newbie" to the hard-core coder.

The server behaviors are actually quite different from the JavaScript behaviors used for buttons and so on in Dreamweaver. The primary difference between the two is that a server behavior, which can consist of a single line of code, is designed to be executed by the application server. The JavaScript behaviors, on the other hand, are executed by the browser.

The other fundamental difference between the JavaScript and server behaviors is that the server code can actually live outside of the HTML page. You saw this when you were building the tour in Chapter 10, "Assembling the Tour." The recordset had a section of code that sat above the <HTML> tag and another section of code sat below the </HTML> tag. This is because code placement is very important to the server.

The server behaviors are accessed through the Server Behaviors tab of the Application panel (see Figure 20.9). When you open the server behaviors, you see a listing of all the behaviors included in the current page, and they are listed in the order in which they are applied. Selecting one of the behaviors in the list will actually highlight the page element.

Figure 20.9. Server behaviors are applied to the page by making selections from the Server Behaviors panel.

Finally, although the simplest server behaviors can insert the necessary information without input from you, all of them have a dialog box for specifying the behavior's parameters. In addition, some server behaviors, such as Recordset, have their own Property Inspector.

Some of the server behaviors shown in the Server Behaviors panel are:

  • Recordset Query: Defines the data to be used in a page.

  • Repeat Region: Replicates the selected area on the page as many times as needed.

  • Recordset Paging: This pop-down menu essentially moves the pointer to the indicated record in a specific recordset. There are five behaviors associated with this command.

  • Show Region: Select this to show a specific area of the screen if a predefined condition is true. Depending on your server model, the items in the pop-down menu will change.

  • Dynamic Text: Selecting this has the same effect as dragging a field from a recordset in the Bindings panel onto the page. All it does is place the contents of a database field on your page as text.

  • Insert Record: This one adds a new record to the table in the database.

  • Update Record: Use this one to modify or update the records in a database

  • Delete Record: Use this one to remove a record from a database.

  • Dynamic Form Elements: The pop-down menu associated with this command refers to form elements linked to a data source. These are typically used to update records.

  • User Authentication: The four choices in the pop-down menu are used to restrict access to the site to a list of authorized users.


Summary

This chapter dealt with the "end game" of building dynamic sites, which is the upload of the site to the server and its subsequent maintenance.

We started with an overview of how to end up with a smooth deployment of the site from your computer to the server. This included setting up the testing server to match your deployment server, why you shouldn't use absolute addressing, and why pages should be modular.

We showed you how to test ColdFusion Components using the Remoting capabilities of Flash MX 2004 and some issues to be aware of in the realm of database connectivity.

We then reviewed how to use Dreamweaver MX 2004 to upload files from the local computer to the server. This included a rather extensive overview of defining a remote site. We also spent quite a bit of time reviewing how to use the Files panel to move files from the local site to the remote site and showed how to use the "Put" and "Get" features of this process. We also showed you how to synchronize the files on the local and remote sites in order to have the most current versions of the pages on the local and remote sites.

We also discussed the use of Contribute for site maintenance and showed you how to have Dreamweaver MX 2004 manage a Contribute site. This involved a rather comprehensive overview of how the various areas of the Contribute administrator page enable you to control not only who has access to the site but also the types of changes the users can make to the Contribute site.

We finished the chapter by explaining the importance of a back-end to manage the data in a dynamic site and spent a bit of time briefly reviewing the server behaviors in the Dreamweaver MX 2004 Application panel. As we explained, these behaviors are what put the word "dynamic" into the title of this book.

Which brings us to the end of this book. When one of the authors finishes a class or seminar, he always asks the students or attendees: "Did you learn anything?" We hope you did and that you discovered, as you moved through the book, that building a dynamic site using the comprehensive suite of tools in Studio MX 2004 is not a process involving mysticism and strange incantations. It is common sense that starts with two questions: "What do I want to do?" and "How do I do it?" Ask those questions, and you focus on the process of building a dynamic site and not the technologies that make it happen.

We also hope you had some fun building a dynamic site with the Macromedia Studio MX 2004. As we are fond of saying, "The amount of fun we have in this business should be illegal." We'll see you in jail.


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

.asf file format
.avi file format
.dcr
.dv file format
.dwt
.mov file format
.mpeg file format
.mpg file format
.png images
importing to Fireworks
.swf
linked files
.wmv file format

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Access
access
accomodating 2nd 3rd 4th
accessibility 2nd 3rd
accomodating access 2nd 3rd 4th
Dreamweaver MX 2nd 3rd
Flash MX
versus Director MX 2nd
in forms 2nd
accomodating
access 2nd 3rd 4th
accounting
for dynamic data on siste maps 2nd 3rd
Action Message Format (AMF)
Action Tool 2nd 3rd 4th
removing actions
actions
publishing 2nd 3rd
removing
testing 2nd 3rd
ActionScript
adding to buttons
in Flash MX
attaching movies to 2nd
communication with Lingo 2nd
Actionscript
communication with Lingo
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
ActionScript
creating documents
in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
ActionScript/Lingo Programmers
adding
chat rooms
to Dreamweaver MX 2nd
Communication Components
to meeting rooms 2nd 3rd 4th 5th
Editable Regions
to Dreamweaver MX templates 2nd 3rd
hot spots
Dreamweaver MX
images
to Fill Patterns 2nd 3rd
markers
by accident
navigation
in Director MX 2nd 3rd 4th
scripts
to meeting rooms 2nd 3rd
Smart Shapes 2nd 3rd 4th
tables to databases 2nd
Admin folder
Flash Communication Server MX
Administrator Debugging settings
ColdFusion MX 2nd 3rd 4th
advantages
of Flash MX 2nd 3rd 4th
of flow charts 2nd
Allaire, Jeremy
Flash Player as "Trojan horse"
Amazon.com
example of advantages of dynamic sites 2nd
AMF (Action Message Format)
animating
symbols (Freehand MX)
in Flash MX 2nd 3rd
Apache Web Server
appearance
of data 2nd
Apple
QuickTime player
applications
for dynamic sites 2nd
Macromedia Studio tools 2nd 3rd
logic maps
creating 2nd 3rd 4th
Applications panel
database connections through 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th
applications. [See also names of specific applications (e.g. Dreamweaver MX, Flash MX, etc.)]
applying
templates
to pages
architecture of dynamic sites 2nd 3rd
assembling
chat rooms
in Flash MX 2nd 3rd 4th
images
in Dreamweaver MX 2nd 3rd 4th 5th
assembling pages. [See page assembly]
attaching
movies to ActionScript 2nd
attachMovie routine (ActionScript) 2nd
AudioConference
authentication failure
Flash MX login
AVPresence

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

back-ends
creating 2nd 3rd 4th
data entry pages 2nd 3rd
pages to display your data 2nd 3rd 4th
creating the capability to modify and delete data
creating the Delete Page 2nd 3rd 4th
creating the Edit Page 2nd 3rd 4th 5th
updating dynamic pages 2nd 3rd 4th 5th
background of Director MX 2nd
balancing
braces
in Dreamweaver MX 2nd 3rd
batch process feature
Fireworks MX 2nd 3rd 4th 5th
behaviors
in Fireworks MX
importing into Director MX 2nd 3rd
behaviors (Flash MX)
applying to buttons for video controller 2nd 3rd 4th
creating video controller with 2nd 3rd
beta tests
booking facility. [See interactive reservation facility]
bottom-up approach (programming)
braces
balancing
in Dreamweaver MX 2nd 3rd
browser targeting
Dreamweaver MX 2nd 3rd
Button Editor
Fireworks MX
buttons
building in Fireworks MX 2nd 3rd 4th 5th 6th
designing
Fit Canvas
Fireworks MX 2nd
in Flash MX
adding ActionScript to
Quick Export

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

calendar
creating for interactive reservation facility
in Flash MX 2nd 3rd
moving within interactive reservation facility
in Flash MX 2nd 3rd 4th 5th
Cascading Style Sheets. [See CSS]
cast members
in Director MX
editing with Flash MX 2nd
CFC files
verifying they are running
CFC framework
resources for information
CFML (ColdFusion Markup Language)
and Dreamweaver MX 2nd 3rd
changing
colors
of Editable Regions
chat
chat rooms
adding
to Dreamweaver MX 2nd
assembling
in Flash MX 2nd 3rd 4th
control mechanisms 2nd
creating 2nd 3rd
in Flash MX 2nd 3rd 4th 5th
creating in Flash MX 2nd
design of
designing 2nd 3rd 4th 5th
moderating 2nd 3rd
number of users 2nd
passwords
setting up
in Flash MX 2nd 3rd 4th 5th 6th
transcripts
usability
chat roooms
user issues 2nd
Chat UI component
Check In/Check Out
Check In/Check Out feature in Dreamweaver MX
enabling 2nd 3rd
usage 2nd 3rd
Check Target Browser feature
checklist questions
for Flash Remoting 2nd
child pages
choosing
tools 2nd 3rd
choosing. [See selecting]
Clean Up HTML/XHTML command 2nd 3rd
client sites 2nd
client/team communication 2nd 3rd
clients
deadlines
dealing with
defining exactly what is needed 2nd
developing the project scope 2nd
distinguishing wants versus needs 2nd
closing
panels
in Fireworks MX
streams
communication between Director MX and Flash MX 2nd
clouds
creating in Fireworks MX 2nd 3rd
CMS (Content Management Systems)
Cntent Management Systems (CMS)
code
tradeoffs with design
Code Hints
CSS
code team
roles of 2nd
codecs
Spark 2nd
ColdFusion Markup Language (CFML)
and Dreamweaver MX 2nd 3rd
ColdFusion MX 2nd 3rd 4th
Administrator Debugging settings 2nd 3rd 4th
as middleware
components
creating in Dreamweaver MX 2nd 3rd 4th 5th
configuring 2nd
connections
with databases 2nd
creating
data entry pages 2nd 3rd
databases
debugging
customizing debugging settings 2nd 3rd 4th
email 2nd 3rd
IP Addresses page 2nd
logs 2nd 3rd
features of
going online 2nd 3rd 4th
linking database to
for Flash Remoting 2nd 3rd 4th 5th 6th 7th
overview of 2nd
root directories
placement of
templates
creating pages to display data 2nd 3rd 4th
using on a Mac 2nd 3rd
colorizing
grayscale photos
Fireworks MX 2nd
colors
leaking
of Editable Regions
changing
Web Safe Color Library
combining
images from Fireworks MX and Freehand MX 2nd 3rd 4th 5th
commands
Clean Up HTML/XHTML 2nd 3rd
communication
between Director MX and Flash Communication Server 2nd
between Flash MX and Director MX 2nd 3rd 4th 5th 6th
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
chat
chat. [See chat rooms]
client sites 2nd
client/team communication 2nd 3rd
creating chat rooms in Flash MX 2nd
functionality of design 2nd 3rd
streaming media 2nd
usability 2nd
with Flash Remoting 2nd
Communication Components
adding to meeting rooms 2nd 3rd 4th 5th
complex sites 2nd
interactivity 2nd
levels of information 2nd
navigation 2nd
complexity
versus simplicity 2nd
Component Inspector
components
ColdFusion components
creating in Dreamweaver MX 2nd 3rd 4th 5th
ColdFusion Components
Dreamweaver MX code for Flash Remoting 2nd 3rd 4th
Flash MX
event messaging 2nd
Flash Remoting Components 2nd
Components panel
comprehensive designs 2nd
creating
in Fireworks MX 2nd 3rd 4th
compression
video in Flash MX 2nd
configuring
ColdFusion MX 2nd
on a Mac 2nd 3rd
connecting
to Flash Communication server
connection
creating
for communication between Director MX and Flash MX 2nd
connections
between databases and ColdFusion MX 2nd
to database
through Applications panel 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th
Connector Tool
Freehand MX 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
Connector tool
schemas
contact information
Content area
adding images to 2nd 3rd
content management
file extensions 2nd
image naming conventions 2nd
naming conventions 2nd
problems with
spaces in filenames
version management 2nd
Check In/Check Out feature in Dreamweaver MX 2nd 3rd 4th 5th 6th
Content Managers
Contribute sites
managing
with Dreamweaver MX 2nd 3rd 4th 5th 6th 7th
control mechanisms
chat rooms 2nd
conversion utility for Snippets
converting
HTML pages
into Dreamweaver templates 2nd 3rd 4th
creative briefs 2nd 3rd 4th
developing 2nd
Creative Directors
CruiseShips.com
example of uses for dynamic sites
CSS
Code Hints
creating in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th
creating links 2nd 3rd 4th 5th
in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
opening documents
Property Inspector
setting style for editable regions 2nd
styling editable regions 2nd 3rd 4th 5th
templates
creating 2nd 3rd 4th 5th 6th 7th
CSS (Cascading Style Sheets) 2nd
CSS Layout Visualization
CSS panel
customizing
debugging settings
in ColdFusion MX 2nd 3rd 4th

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

dashes
Fireworks MX
data
appearance of 2nd
defining
for DBMS 2nd
deleting
creating the Delete Page 2nd 3rd 4th
modifying
creating the Edit Page 2nd 3rd 4th 5th
planning 2nd 3rd
flow charts. [See flow charts]
flowcharts 2nd 3rd 4th 5th
presenting 2nd
data dictionaries 2nd
data drilling
data entry pages
creating 2nd 3rd
data flow
communication between Director MX and Flash MX 2nd 3rd
data rate
video in Flash MX 2nd
Data Source window 2nd
data types 2nd
database connections
through Applications panel 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th
database connectivity
verifying 2nd
Database Designers/Administrators
database management system. [See DBMS]
databases 2nd
Access
back-ends. [See back-ends]
building
for Flash Remoting 2nd 3rd 4th
ColdFusion MX
connections
with ColdFusion MX 2nd
creating
in MySQL (Mac users) 2nd 3rd 4th
in MySQL (PC users) 2nd 3rd 4th 5th
Director
Dreamweaver MX
Flash MX
linking editable regions to 2nd 3rd 4th
linking to ColdFusion MX
for Flash Remoting 2nd 3rd 4th 5th 6th 7th
MX Studio
defining data 2nd
MySQL
platforms 2nd
primary keys
queries. [See queries]
relational databases
tables
adding 2nd
datasource connectors
date book project
planning 2nd 3rd 4th
date book project. [See also interactive reservation facility]
date of finished projects
DBMS
presenting data 2nd
DBMS (database management system)
deadlines
clients
key event schedules 2nd 3rd
technical briefs 2nd 3rd
Debug panel
debugging
in Flash MX 2nd 3rd
Debugger
Director MX 2nd 3rd 4th
debugging
Dreamweaver MX 2nd
balancing braces 2nd 3rd
Clean Up HTML/XHTML command 2nd 3rd
in ColdFusion MX
customizing debugging settings 2nd 3rd 4th
email 2nd 3rd
IP Addresses page 2nd
logs 2nd 3rd
in Director MX
Debugger 2nd 3rd 4th
Script Window 2nd 3rd
in Flash MX 2nd 3rd
Debug panel 2nd 3rd
trace function 2nd
defining
data
DBMS 2nd
Dreamweaver MX sites 2nd
dynamic sites
in Dreamweaver MX 2nd 3rd 4th 5th 6th
local folders
for Dreamweaver MX 2nd 3rd
Oakbridge Community Centre site 2nd
projects
in Flash MX 2nd 3rd 4th 5th
remote folders
for Dreamweaver MX 2nd 3rd
sites
in Flash MX 2nd 3rd 4th
Delete Page
creating 2nd 3rd 4th
deleting
data
creating the Delete Page 2nd 3rd 4th
delta frames
deployment
guidelines for 2nd
design
chat rooms
interface design 2nd 3rd
for Director MX presentations 2nd
tradeoffs with code
design issues
functionality of 2nd 3rd
streaming media 2nd
usability 2nd
design team
roles of 2nd
designing
buttons
chat rooms 2nd 3rd 4th 5th
look of dynamic sites 2nd 3rd 4th 5th
developing
creative briefs 2nd
diamonds
flow chart symbols
Dickinson, Marcus J.
Flash Remoting explanation 2nd 3rd 4th
dictionaries
data dictionaries 2nd
digital video. [See video]
Directo MX
Speech Xtra 2nd
Director
databases
Director MX
adding
navigation 2nd 3rd 4th
and Flash Communication Server 2nd 3rd 4th
background of 2nd
communication with Flash Communication Server 2nd
communication with Flash MX through Flash Communication Server 2nd
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
debugging
Debugger 2nd 3rd 4th
Script Window 2nd 3rd
features of
integration with Fireworks MX 2nd 3rd
behaviors, frames, and layers in Director MX 2nd 3rd
editing images in Director MX with Fireworks MX 2nd 3rd 4th
importing files into Director MX 2nd 3rd 4th
integration with Flash MX 2nd
communication between 2nd 3rd 4th
editing cast members in Director MX with Flash MX 2nd
importing files into Director MX 2nd 3rd 4th 5th 6th
interface design 2nd
logic maps
creating 2nd 3rd 4th
plans
creating 2nd
Shockwave movies
creating 2nd 3rd 4th
Text-To-Speech feature
versus Flash MX 2nd 3rd 4th 5th 6th 7th
accessibility 2nd
scripting 2nd
video integration and extensibility 2nd
wrappers
creating 2nd 3rd 4th 5th 6th
Document Tabs
documents
navigating between in Fireworks MX
documents (CSS)
opening
drawings
linear drawings. [See linear drawings]
Dreamweaver MX 2nd
accessibility 2nd 3rd
accessibility in forms 2nd
adding
chat rooms 2nd
hot spots
and CFML (ColdFusion Markup Language) 2nd 3rd
assembling images 2nd 3rd 4th 5th
browser targeting 2nd 3rd
Check In/Check Out feature
enabling 2nd 3rd
usage 2nd 3rd
creating ActionScript documents in 2nd 3rd 4th 5th 6th 7th 8th 9th
creating ColdFusion components in 2nd 3rd 4th 5th
CSS
creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th
creating links 2nd 3rd 4th 5th
CSS in 2nd 3rd 4th 5th 6th 7th 8th 9th
databases
debugging 2nd
balancing braces 2nd 3rd
Clean Up HTML/XHTML command 2nd 3rd
defining dynamic sites 2nd 3rd 4th 5th 6th
Delete Page
creating 2nd 3rd 4th
dynamic data 2nd
features of
FTP 2nd 3rd 4th
link checking 2nd 3rd
linking database to ColdFusion MX
for Flash Remoting 2nd 3rd 4th
managing Contribute sites 2nd 3rd 4th 5th 6th 7th
moving layers
Page Properties dialog box
new features
Property Inspector
remote sites 2nd 3rd 4th 5th
removing code comments
Snippets 2nd 3rd 4th
conversion utility for
synchronizing files 2nd 3rd 4th
tables
creating 2nd 3rd
templates 2nd
adding Editable Regions 2nd 3rd
converting from HTML pages 2nd 3rd 4th
creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th
creating from existing documents 2nd 3rd 4th
preparing for dynamic content 2nd 3rd 4th 5th
uploading to the remote server 2nd
Dreamweaver MX sites
defining 2nd
Dreamweaver MX\
processing dynamic pages 2nd
Dreamweaver MX\:creating
wireframes 2nd 3rd 4th 5th 6th 7th
Dreamweaver UltraDev
drivers
dynamic components
ensuring they work properly 2nd
dynamic data
accounting for on site maps 2nd 3rd
interface design for Director MX 2nd
dynamic pages
updating
with back-ends 2nd 3rd 4th 5th
dynamic sites 2nd
advantages of 2nd 3rd
applications needed for 2nd
Macromedia Studio tools 2nd 3rd
architecture of 2nd 3rd
as flat sites 2nd 3rd
interactivity 2nd 3rd
levels of information 2nd
navigation 2nd
defining in Dreamweaver MX 2nd 3rd 4th 5th 6th
designing look of 2nd 3rd 4th 5th
Dreamweaver MX
processing 2nd
examples of uses for 2nd 3rd 4th
page assembly 2nd
creating templates 2nd 3rd 4th 5th 6th 7th
CSS in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
database connections through Applications panel 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th
preparing template for dynamic content 2nd 3rd 4th 5th
testing pages 2nd 3rd 4th 5th
planning
communication. [See communication]
creative briefs 2nd 3rd 4th
defining exactly what is needed 2nd
developing the project scope 2nd
distinguishing wants versus needs 2nd
identifying technologies to be used 2nd 3rd 4th
technical briefs 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Edit Page
creating 2nd 3rd 4th 5th
editable optional regions (Template objects) 2nd
Editable Regions
adding
to Dreamweaver MX templates 2nd 3rd
changing colors of
editable regions (Template objects)
linking to database 2nd 3rd 4th
setting CSS style for 2nd
styling with CSS 2nd 3rd 4th 5th
editing
cast members in Director MX
with Flash MX 2nd
images in Director MX
with Fireworks MX 2nd 3rd 4th
images in Fireworks MX from Flash MX
ellipses
flow chart symbols
email
debugging
from ColdFusion MX 2nd 3rd
email attachments
sending from Fireworks MX
enabling
Check In/Check Out feature in Dreamweaver MX 2nd 3rd
error catching
in ActionScript documents
event messaging
Flash MX components 2nd
Export Wizard
exporting
Freehand MX wireframe images
into Fireworks MX 2nd 3rd 4th 5th
extensions
.dcr
.dwt
extensions. [See file extensions]

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

file extensions
list of 2nd
file formats
video file formats
in Flash MX 2nd
file management. [See content management]
File Transfer Protocol. [See FTP]
FileMaker Pro
filenames. [See naming conventions]
files
synchronizing
in Dreamweaver MX 2nd 3rd 4th
Fill Patterns
adding images to 2nd 3rd
filters
Marble
finishing
mastheads 2nd 3rd 4th 5th
Fireworks MX
as Flash MX imaging application 2nd
batch process feature 2nd 3rd 4th 5th
building buttons 2nd 3rd 4th 5th 6th
changes to interfaces 2nd
color of active panels
clouds
creating 2nd 3rd
combining images
with Fireworks MX 2nd 3rd 4th 5th
comprehensive designs
creating 2nd 3rd 4th
creating wireframes 2nd 3rd 4th 5th 6th
features of
Fit Canvas button 2nd
imaging in 2nd
importing .png images
importing Freehand MX wireframe images 2nd 3rd 4th 5th
integration with Director MX 2nd 3rd
behaviors, frames, and layers in Director MX 2nd 3rd
editing images in Director MX with Fireworks MX 2nd 3rd 4th
importing files into Director MX 2nd 3rd 4th
locking layers
moving symbols (Freehand MX) to 2nd 3rd 4th
navigating between documents
new features
sending work as email attachments from Fireworks MX 2nd
panels
opening and closing
Red Eye Removal tool 2nd 3rd
Replace Color tool 2nd 3rd 4th
colorizing grayscale photos 2nd
Smart Shapes
adding 2nd 3rd 4th
to Flash MX 2nd 3rd
Fireworks MX\
Button Editor
new features
reusing patterns
Fireworks MX\:editing images
from Flash MX
Fireworks MX\:shared libraries
creating 2nd 3rd
Fireworks PNG
First Rule of Dynamic Web Physics
Fit Canvas button
Fireworks MX 2nd
Flash Asset Properties dialog box
options in 2nd
Flash Communication Server
and Director MX 2nd 3rd 4th
communication between Flash MX and Director MX 2nd
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
communication with Director MX 2nd
Flash Communication server
connecting to
Flash Communication Server
features of
Flash Communication Server MX 2nd 3rd 4th
Admin folder
streaming video 2nd
code for 2nd 3rd
creating Flash MX movie for 2nd 3rd
preparations for 2nd
versus Shockwave Multiuser Server 2nd
Flash MX
advantages of 2nd 3rd 4th
animating symbols (Freehand MX) in 2nd 3rd
behaviors in
building interactive reservation facility 2nd 3rd
calendar creation 2nd 3rd
movie clip creation 2nd 3rd 4th
moving within calendar 2nd 3rd 4th 5th
buttons
adding ActionScript to
chat rooms
assembling 2nd 3rd 4th
creating up 2nd 3rd 4th 5th
setting up 2nd 3rd 4th 5th 6th
communication with Director MX through Flash Communication Server 2nd
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
components
event messaging 2nd
creating
streaming audio communicators 2nd 3rd 4th
streaming video communicators 2nd 3rd 4th 5th
creating chat rooms 2nd
databases
debugging 2nd 3rd
Debug panel 2nd 3rd
trace function 2nd
defining projects 2nd 3rd 4th 5th
defining sites 2nd 3rd 4th
features of
integration with Director MX 2nd
communication between 2nd 3rd 4th
editing case members in Director MX with Flash MX 2nd
importing files into Director MX 2nd 3rd 4th 5th 6th
logins
mapping 2nd 3rd 4th
modeling server side workflow for 2nd 3rd 4th 5th
movies
attaching to ActionScript 2nd
building for Flash Remoting 2nd 3rd 4th 5th 6th 7th
creating ActionScript documents in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
moving symbols (Freehand MX) to 2nd 3rd
RoomList
versus Director MX 2nd 3rd 4th 5th 6th 7th
accessibility 2nd
scripting 2nd
video integration and extensibility 2nd
Video Import wizard
video in 2nd 3rd 4th
applying video behaviors to buttons 2nd 3rd 4th
compression 2nd
creating video controller 2nd 3rd
data rate 2nd
file formats supported 2nd
frame rate
frame size 2nd
importing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
length of movie 2nd
streaming with Flash Communication Server MX 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
Flash MX Communications Components
Flash MX Pro
Flash MX Remoting Components
Flash MX\
Project panel
Flash Remoting 2nd 3rd 4th 5th
advantages of 2nd
building database for 2nd 3rd 4th
building Flash MX movie for 2nd 3rd 4th 5th
testing movie 2nd
checklist questions 2nd
ColdFusion components
creating in Dreamweaver MX 2nd 3rd 4th 5th
communication process 2nd
creating ActionScript documents in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
linking database to ColdFusion MX 2nd 3rd
Dreamweaver MX code for 2nd 3rd 4th
Marcus J. Dickinson explanation 2nd 3rd 4th
requirements for 2nd
verifying existence of
Flash Remoting Components 2nd
FlashGoddess web site
flat sites 2nd 3rd
interactivity 2nd 3rd
levels of information 2nd
navigation 2nd
flattened structures
architecture of dynamic sites 2nd 3rd
flow charts 2nd 3rd
advantages of 2nd
symbols 2nd 3rd 4th 5th
flowcharts
planning data 2nd 3rd 4th 5th
FLV (flash video)
FLV Export plugin (Flash MX)
folders
local folders
defining for Dreamweaver MX 2nd 3rd
preparations for streaming video 2nd
remote folders
defining for Dreamweaver MX 2nd 3rd
fonts
selecting 2nd 3rd
formatting
text
in Freehand MX
forms
accessibility in 2nd
IDs
frame rate
video in Flash MX
frame size
video in Flash MX 2nd
frames
in Fireworks MX
importing into Director MX 2nd 3rd
FreeBSD
Freehand
kerning
Freehand MX
Action Tool 2nd 3rd 4th
combining images with Fireworks MX images 2nd 3rd 4th 5th
Connector tool 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
creating logos 2nd 3rd 4th 5th 6th 7th 8th 9th
creating schemas 2nd 3rd 4th
exporting wireframe images
into Fireworks MX 2nd 3rd 4th 5th
features of 2nd
formatting text
Navigation panel 2nd
new features
Action Tool 2nd 3rd 4th
planning date book project 2nd
schemas
creating 2nd 3rd 4th
Shared Libraries
creating 2nd 3rd 4th
symbols 2nd 3rd
animating in Flash MX 2nd 3rd
moving to Fireworks MX 2nd 3rd 4th
moving to Flash MX 2nd 3rd
Freehand MX\:creating
wireframes 2nd 3rd 4th 5th 6th
FTP
Dreamweaver MX 2nd 3rd 4th
FTP (File Transfer Protocol)
functionality. [See usability]

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Gradient tool
graphics. [See images]
grayscale photos
colorizing
in Fireworks MX 2nd
guidelines
for deployment 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

history of Director MX. [See background of Director MX]
Hot Spot Tool
hot spots
adding
in Dreamweaver MX
HTML
HTML pages
converting
into Dreamweaver templates 2nd 3rd 4th
HTTP Communication Layer
Hyper Island web site
example of uses for dynamic sites

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

identifying
technologies to be used 2nd 3rd 4th
IDs
for forms
IIS (Internet Information Server)
images
adding
to Fill Patterns 2nd 3rd
adding to Content area 2nd 3rd
assembling
in Dreamweaver MX 2nd 3rd 4th 5th
combining
from Fireworks MX and Freehand MX 2nd 3rd 4th 5th
editing in Fireworks MX from Flash MX
importing
in Director MX
editing with Fireworks MX 2nd 3rd 4th
naming conventions 2nd
placing
reducing size of
with batch process feature 2nd 3rd 4th 5th
sliced images
optimizing
tracing
tracing images
imaging
in Fireworks MX 2nd
imaging applications
Fireworks MX 2nd
importing
Fireworks MX .png images
from Fireworks MX to Director MX 2nd 3rd 4th 5th 6th 7th
from Flash MX to Director MX 2nd 3rd 4th 5th 6th
images
video into Flash MX 2nd
with Video Import Wizard 2nd 3rd 4th 5th 6th 7th 8th
Information Architects
instant messaging
integration
between Fireworks MX and Director MX 2nd 3rd
behaviors, frames, and layers Director MX 2nd 3rd
editing images in Director MX with Fireworks MX 2nd 3rd 4th
importing files into Director MX 2nd 3rd 4th
between Flash MX and Director MX 2nd
communication between 2nd 3rd 4th
editing cast members in Director MX with Flash MX 2nd
importing files into Director MX 2nd 3rd 4th 5th 6th
Interactive Designers
interactive reservation facility
building in Flash MX 2nd 3rd
calendar creation 2nd 3rd
movie clip creation 2nd 3rd 4th
moving within calendar 2nd 3rd 4th 5th
interactivity
in complex static sites 2nd
in flat dynamic sites 2nd 3rd
interface design 2nd 3rd
for Director MX presentations 2nd
in Fireworks MX 2nd
interfaces
Fireworks MX
changes to 2nd 3rd
Internet Information Server (IIS)
intuitiveness
in interface design 2nd 3rd
IP Addresses page
debugging
in ColdFusion MX 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Java Database Connectivity (JDBC) 2nd
JavaScript Debugger
locating for Mac users
JDBC (Java Database Connectivity) 2nd
JPEG
JRun
JRun 4

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

kerning 2nd
key event schedules 2nd 3rd
key frames

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

layers
in Fireworks MX
importing into Director MX 2nd 3rd
locking
in Fireworks MX
moving
in Dreamweaver MX
multiple layers
layout of dynamic sites
designing 2nd 3rd 4th 5th
leaking
colors
length of video
in Flash MX 2nd
levels of information
in complex static sites 2nd
in flat dynamic sites 2nd
libraries
shared libaries
creating in Fireworks MX 2nd 3rd
Libraries (Freehand MX)
sharing 2nd 3rd 4th
Library
attaching movies to ActionScript 2nd
linear drawings. [See also wireframes]
Lingo
communication with ActionScript 2nd
communication with Actionscript
closing streams 2nd
creating connection 2nd
data flow 2nd 3rd
setup for 2nd
naming conventions in
link checking
Dreamweaver MX 2nd 3rd
linked files
.swf
linking
database
to ColdFusion MX for Flash Remoting 2nd 3rd 4th 5th 6th 7th
editable regions
to database 2nd 3rd 4th
links
creating
with CSS 2nd 3rd 4th 5th
live video feed
local folders
defining
for Dreamweaver MX 2nd 3rd
locking
layers
Fireworks MX
logic
of meeting facilities
Oakbridge Community Center project 2nd
of online booking areas
Oakbridge Community Center project 2nd
of tours
Oakbridge Community Center project 2nd
logic maps
creating
for Director MX movies 2nd 3rd 4th
login
authentication failure
login areas
meeting rooms
logins
Flash MX
mapping 2nd 3rd 4th
logos
creating
with Freehand MX 2nd 3rd 4th 5th 6th 7th 8th 9th
logs
debugging
in ColdFusion MX 2nd 3rd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Mac users
Apache Web Server
ColdFusion MX 2nd 3rd
creating database applications
in MySQL 2nd 3rd 4th
locating JavaScript Debugger
Studio MX
Macromedia Studio
applications included in 2nd 3rd
Manage Sites dialog box
opening
management
of content. [See content management]
of teams 2nd 3rd
management team
roles of 2nd
managing
Contribute sites
with Dreamweaver MX 2nd 3rd 4th 5th 6th 7th
workflow 2nd
mapping
Flash MX login 2nd 3rd 4th
Marble filter
Marker channel
markers
adding
by accident
removing
mastheads
creating for Oakbridge Community Center project 2nd 3rd 4th 5th 6th 7th
finishing 2nd 3rd 4th 5th
Media options (Flash Asset Properties dialog box)
meeting facilities
logic of
Oakbridge Community Center project 2nd
meeting rooms
creating 2nd 3rd 4th 5th 6th 7th 8th
adding Communication Components 2nd 3rd 4th 5th
adding scripts 2nd 3rd
login areas
real example of 2nd 3rd 4th
SimpleConnect
technologies that make it work 2nd 3rd 4th
web masters
meeting rooms. [See also meeting applications]
menus
Version Tracking
Microsoft Access 2nd 3rd
building database
for Flash Remoting 2nd 3rd 4th
middleware
ColdFusion MX as
modeling
server side workflow for Flash MX 2nd 3rd 4th 5th
models. [See site models]
moderating
chat rooms 2nd 3rd
modifying
data
creating the Edit Page 2nd 3rd 4th 5th
movies
creating Director Shockwave movies 2nd 3rd 4th
movies (Flash MX)
attaching to ActionScript 2nd
building
for Flash Remoting 2nd 3rd 4th 5th 6th 7th
creating ActionScript documents in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
creating for interactive reservation facility 2nd 3rd 4th
movies. [See also video]
moving
layers
Dreamweaver MX
symbols (Freehand MX)
to Fireworks MX 2nd 3rd 4th
to Flash MX 2nd 3rd
Multiuser Server
versus Flash Communication Server 2nd
MX Studio
databases
defining data 2nd
workflow 2nd
Fireworks MX to Flash MX 2nd 3rd
MySQL 2nd 3rd 4th 5th
creating database applications
Mac users 2nd 3rd 4th
PC users 2nd 3rd 4th 5th
databases
adding tables to 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

naming conventions
images 2nd
importance of 2nd
in Lingo
spaces in filenames
navigating
between documents
in Fireworks MX
Navigation panel
Freehand MX 2nd
navigation
adding
in Directoor MX 2nd 3rd 4th
in complex static sites 2nd
in flat dynamic sites 2nd
Navigation panel
Freehand MX 2nd
NDA (Non-Disclosure Agreement)
new features
Action Tool 2nd 3rd 4th
Fireworks MX\:sending work as email attachments from Fireworks MX 2nd
in Fireworks MX 2nd
Non-Disclosure Agreement (NDA)

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Oakbridge Community Center project
creating masthead 2nd 3rd 4th 5th 6th 7th
designing chat rooms 2nd 3rd
mastheads
finishing 2nd 3rd 4th 5th
meeting rooms
creating 2nd 3rd 4th 5th 6th 7th 8th
planning 2nd
logic of meeting facilities 2nd
logic of online booking areas 2nd
logic of tours 2nd
Oakbridge Community Center projects
logos
creating 2nd 3rd 4th 5th 6th 7th 8th 9th
Oakbridge Community Centre site
defining 2nd
Object Oriented Programming (OOP)
Object Properties
Freehand MX
objectives
of projects
objjects
selecting
ODBC (Open Database Connectivity) 2nd
online
with ColdFusion MX 2nd 3rd 4th
online booking applications
online booking areas
logic of
Oakbridge Community Center project 2nd
OOP (Object Oriented Programming)
Open Database Connectivity (ODBC) 2nd
opening
CSS documents
Manage Sites dialog box
panels
in Fireworks MX
optimizing
sliced images
optional editable regions. [See editable optional regions]
optional regions (Template objects)

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

page assembly 2nd
creating templates 2nd 3rd 4th 5th 6th 7th
CSS in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th 8th 9th
database connections through Applications panel 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th
preparing template for dynamic content 2nd 3rd 4th 5th
testing pages 2nd 3rd 4th 5th
Page Properties dialog box (Dreamweaver MX)
new features
pages
creating data entry pages 2nd 3rd
panels
opening nad closing in Fireworks MX
parallelograms
flow chart symbols
passwords
chat rooms
RDS passwords
patterns
reusing
in Fireworks MX
PC users
creating database applications
in MySQL 2nd 3rd 4th 5th
photos
colorizing grayscale photos in Fireworks MX 2nd
pictures. [See images]
placement
of root directories
placing
images
planning
data 2nd 3rd
flow charts. [See flow charts]
flowcharts 2nd 3rd 4th 5th
dynamic sites
communication. [See communication]
creative briefs 2nd 3rd 4th
defining exactly what is needed 2nd
developing the project scope 2nd
distinguishing wants versus needs 2nd
identifying technologies to be used 2nd 3rd 4th
technical briefs 2nd
key event schedules 2nd 3rd
Oakbridge Community Center project 2nd
logic of meeting facilities 2nd
logic of online booking areas 2nd
logic of tours 2nd
projects
date book project 2nd 3rd 4th
tours 2nd 3rd
plans
creating
for Director MX movies 2nd
platforms
databases 2nd
Playback options (Flash Asset Properties dialog box)
Pointer tool
port numbers
in Flash Remoting code
preparing to work
choosing tools 2nd 3rd
clients
data
appearance of 2nd
data types 2nd
managing workflow 2nd
objectives
presenting
data 2nd
primary key
primary keys
processing
dynamic pages
Dreamweaver MX 2nd
programming
OOP
top-down and bottom-up approaches
programming team. [See code team]
programs. [See applications]
Project Managers
Project panel
Flash MX
project scopes
developing 2nd
projects
defining
in Flash MX 2nd 3rd 4th 5th
planning
date book project 2nd 3rd 4th
Property Inspector
CSS
Dreamweaver MX
prototyping 2nd 3rd
with Action Tool
Freehand MX 2nd 3rd 4th
publishing
actions 2nd 3rd
Purvis, Dr. Dale
web site
example of uses for dynamic sites 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Quality Assurance Testers
Quality options (Flash Asset Properties dialog box)
queries
Quick Export button
QuickTime player

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Rate options (Flash Asset Properties dialog box)
rationalizing
features for sites 2nd
RDS (Remote Development Services)
RDS passworods
Real Media servers
Real Networks
RealOne player
Real Time Messaging Protocol (RTMP)
Real Time Streaming Protocol
RealOne player
rectangles
flow chart symbols
red eye
removing
in Fireworks MX 2nd 3rd
Red Eye Removal tool
Fireworks MX 2nd 3rd
reducing image sizes
with batch process feature 2nd 3rd 4th 5th
relational databases
Remote Development Services. [See RDS]
remote folders
defining
for Dreamweaver MX 2nd 3rd
remote server
uploading to
with Dreamweaver MX 2nd
remote sites
Dreamweaver MX 2nd 3rd 4th 5th
Remoting. [See Flash Remoting]
removing
actions
Dreamweaver-specific code comments
markers
red eye
Red Eye Removal tool (Fireworks MX) 2nd 3rd
selections
repeat regions 2nd
repeating regions (Template objects)
repeating tables (Template objects)
Replace Color tool 2nd 3rd 4th
colorizing grayscale photos 2nd
requirements
for Flash Remoting 2nd
resources
CFC framework information
responsibilities
of testing teams 2nd
reusing
patterns
in Fireworks MX
roles of team members 2nd
code 2nd
design 2nd
management 2nd
RoomList
root directories
placement of
round trip editing
in Director MX
with Fireworks MX 2nd 3rd 4th
with Flash MX 2nd
RTMP (Real Time Messaging Protocol)

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

Scale Mode options (Flash Asset Properties dialog box)
schedules
key event schedules 2nd 3rd
technical briefs 2nd 3rd
schemas
Connector tool
creating
in Freehand MX 2nd 3rd 4th
scope creep
Script Window
Director MX 2nd 3rd
scripting
Flash MX
versus Director MX 2nd
scripts
adding to meeting rooms 2nd 3rd
Section 508 of the Rehabilitation Act 2nd
security
client sites
selecting
fonts 2nd 3rd
objects
selections
removing
server behaviors 2nd
Server Behaviors panel
server side workflow
modeling for Flash MX 2nd 3rd 4th 5th
SetBandwidth
shared libraries
creating in Fireworks MX 2nd 3rd
Shared Libraries (Freehand MX)
creating 2nd 3rd 4th
Shockwave
creating Director Shockwave movies 2nd 3rd 4th
Shockwave Multiuser Server
versus Flash Communication Server MX 2nd
SimpleConnect 2nd
meeting rooms
simplicity
versus complexity 2nd
Site Definitions
site maps
accounting for dynamic data 2nd 3rd
site models
creating 2nd
modeling server side workflow for Flash MX 2nd 3rd 4th 5th
sites
Contribute sites
managing with Dreamweaver MX 2nd 3rd 4th 5th 6th 7th
defining
in Flash MX 2nd 3rd 4th
Dreamweaver MX sites
defining 2nd
remote sites
Dreamweaver MX 2nd 3rd 4th 5th
sites. [See dynamic sites, web sites]
skills of team members. [See roles of team members]
sliced images
optimizing
Smart Shapes
Fireworks MX 2nd
adding 2nd 3rd 4th
Flash MX
Spiral Smart Shape
SMIL (Synchronized Multimedia Interface Language)
Snippets (Dreamweaver MX) 2nd 3rd 4th
conversion utility for
software. [See applications]
SourceSafe Database
spaces
in filenames
Spark codec 2nd
Spark Video Import window (Flash MX)
Speech Xtra 2nd
spelling mistakes
Spiral Smart Shape
SQL (Structured Query Language)
static sites
as complex sites 2nd
interactivity 2nd
levels of information 2nd
navigation 2nd
streaming audio communicators
creating in Flash MX 2nd 3rd 4th
streaming media 2nd 3rd
design issues 2nd
functionality of design 2nd 3rd
usability 2nd
streaming video
with Flash Communication Server MX 2nd
code for 2nd 3rd
creating Flash MX movie for 2nd 3rd
preparations for 2nd
streaming video communicators
creating in Flash MX 2nd 3rd 4th 5th
streams
closing
communication between Director MX and Flash MX 2nd
Structured Query Language (SQL)
Studio. [See Macromedia Studio]
styles. [See CSS]
symbols
in flow charts 2nd 3rd 4th 5th
symbols (Freehand MX) 2nd 3rd
animating in Flash MX 2nd 3rd
moving
to Fireworks MX 2nd 3rd 4th
to Flash MX 2nd 3rd
Synchronized Multimedia Interface Language (SMIL)
synchronizing
files
Dreamweaver MX 2nd 3rd 4th

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

tables
adding to databases 2nd
creating
in Dreamweaver MX 2nd 3rd
teams
management of 2nd 3rd
member roles of 2nd
code 2nd
design 2nd
management 2nd
technical briefs 2nd
cool versus practical features 2nd
deadlines 2nd 3rd
rationalizing features for sites 2nd
timelines 2nd 3rd
techniques
for wireframing
technologies
for meeting rooms 2nd 3rd 4th
identifying technologies to be used 2nd 3rd 4th
technology
problems with changing technology
Technology Directors
Template objects 2nd
templates
ColdFusion MX
creating pages to display data 2nd 3rd 4th
Content area
adding images to 2nd 3rd
creating 2nd 3rd 4th 5th 6th 7th
Dreamweaver MX
applying to pages
editable regions
linking to database 2nd 3rd 4th
styling with CSS 2nd 3rd 4th 5th
in Dreamweaver MX 2nd
adding Editable Regions 2nd 3rd
converting HTML pages into templates 2nd 3rd 4th
creating 2nd 3rd 4th
creating from existing documents 2nd 3rd 4th
preparing for dynamic content 2nd 3rd 4th 5th
temporal compression
testing 2nd
actions 2nd 3rd
beta tests
dynamic pages 2nd 3rd 4th 5th
Flash MX movies
built for Flash Remoting 2nd
testing teams
resposibilities of 2nd
text
formatting
in Freehand MX
Text Toolbar
Freehand MX
Text-To-Speech feature
Director MX
timelines
technical briefs 2nd 3rd
Tomcat 4
tools
Action Tool 2nd 3rd 4th
choosing 2nd 3rd
Connector tool
Freehand MX 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
schemas
Gradient
Hot Spot
Pointer tool
Red Eye Removal tool
Fireworks MX 2nd 3rd
Replace Color tool 2nd 3rd 4th
colorizing grayscale photos 2nd
tools. [See applications]
top-down approach (programming)
Toronto Star web site
example of uses for dynamic sites
tours
logic of
Oakbridge Community Center project 2nd
planning 2nd 3rd
Towes, Kevin
trace function
debugging
in Flash MX 2nd
tracing
images
tracing images
tracking
transcripts
of chats

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

UltraDev
Update
updating
dynamic pages
with back-ends 2nd 3rd 4th 5th
uploading
to remote servers
Dreamweaver MX 2nd
usability 2nd
chat rooms
in interface design 2nd 3rd
UserColor
users
chat rooms 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

verifying
CFC files are running
database connectivity 2nd
version management 2nd
Check In/Check Out feature in Dreamweaver MX
enabling 2nd 3rd
usage 2nd 3rd
Version Tracking menu
video 2nd 3rd
in Flash MX 2nd 3rd 4th
applying video behaviors to buttons 2nd 3rd 4th
compression 2nd
creating video controller 2nd 3rd
data rate 2nd
file formats supported 2nd
frame rate
frame size 2nd
importing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
length of movie 2nd
streaming with Flash Communication Server MX 2nd 3rd 4th 5th 6th 7th 8th 9th 10th
streaming 2nd 3rd
streaming video communicators
creating in Flash MX 2nd 3rd 4th 5th
Video Import wizard
Video Import Wizard (Flash MX) 2nd 3rd 4th 5th 6th 7th 8th
video integration
Flash MX
versus Director MX 2nd

[ Team LiB ]


[ Team LiB ]

[SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W]

wants
versus needs 2nd
Web Designers
web masters
meeting rooms 2nd
Web Programmers
Web Safe Color Library
web sites
Amazon.com
example of advantages of dynamic sites 2nd
conversion utility for Snippets
CruiseShips.com
example of uses for dynamic sites
FlashGoddess
Hyper Island
example of uses for dynamic sites
Purvis, Dr. Dale
example of uses for dynamic sites 2nd
static sites
Toronto Star
example of uses for dynamic sites
web sites. [See also dynamic sites]
Web-based Distributed Authoring and Versioning. [See WebDAV]
WebDAV (Web-based Distributed Authoring and Versioning)
Windows Media Player
wireframes
creating
in Dreamweaver MX 2nd 3rd 4th 5th 6th 7th
in Freehand MX 2nd 3rd 4th 5th 6th
creating in Fireworks MX 2nd 3rd 4th 5th 6th
wireframes. [See also linear drawings]
wireframing 2nd
techniques
wizards
Export
Video Import wizard
workflow
managing 2nd
MX Studio 2nd
Fireworks MX to Flash MX 2nd 3rd
wrappers
creating
in Director MX 2nd 3rd 4th 5th 6th

[ Team LiB ]


Team LiB

Brought to You by

Like the book? Buy it!