toc

Team LiB
Next Section

Macromedia Studio MX 2004 Bible
Macromedia Studio MX 2004 Bible
by Joyce J. Evans ISBN:0764544721
John Wiley & Sons © 2004

Packed with hands-on instruction, and expert tutorials from the crème de la crème of the Macromedia development community, this guide is everything web developers need to build cutting-edge applications with Macromedia’s product line.

Has CD Content
Table of Contents
 | Macromedia Studio MX 2004 Bible
 | Preface
 | Part I - Introduction to Macromedia Studio MX 2004
 | Chapter 1 | - | What Is Macromedia Studio MX 2004?
 | Chapter 2 | - | What's New in Macromedia Studio MX 2004
 | Chapter 3 | - | Designing the Habitat Alert Web Site
 | Part II - Finessing Macromedia FreeHand MX
 | Chapter 4 | - | Introducing Macromedia FreeHand MX
 | Chapter 5 | - | FreeHand MX Art in a Nutshell
 | Chapter 6 | - | Drawing with FreeHand MX
 | Chapter 7 | - | Using FreeHand MX Symbols and Styles
 | Chapter 8 | - | Understanding FreeHand MX Typography
 | Chapter 9 | - | FreeHand MX and Web Graphics
 | Chapter 10 | - | Basic FreeHand MX Animation
 | Chapter 11 | - | FreeHand MX Animation Techniques
 | Chapter 12 | - | Outputting FreeHand MX Documents
 | Part III - Mastering the Power of Macromedia Fireworks MX 2004
 | Chapter 13 | - | Getting Around in Fireworks
 | Chapter 14 | - | Applying Color
 | Chapter 15 | - | Drawing Like a Pro
 | Chapter 16 | - | Designing Spectacular Text Effects
 | Chapter 17 | - | Working with Bitmap Images
 | Chapter 18 | - | Designing Navigational Elements
 | Chapter 19 | - | Automating Your Workflow
 | Chapter 20 | - | Designing Animations
 | Chapter 21 | - | Slicing and Optimizing
 | Part IV - Unleashing the Power of Macromedia Flash MX 2004
 | Chapter 22 | - | Navigating through Flash MX 2004
 | Chapter 23 | - | Designing Visual Content
 | Chapter 24 | - | Symbols and Libraries
 | Chapter 25 | - | Animating a Movie
 | Chapter 26 | - | Working with Sound
 | Chapter 27 | - | Flash Components and Behaviors
 | Chapter 28 | - | Publishing Your Flash Movies
 | Chapter 29 | - | Using ColdFusion MX with Flash Remoting
 | Part V - Developing in Macromedia Dreamweaver MX 2004
 | Chapter 30 | - | Understanding the Dreamweaver Environment
 | Chapter 31 | - | Starting a Web Site with Dreamweaver
 | Chapter 32 | - | Building a Simple Page
 | Chapter 33 | - | Using Tables for Complex Layouts
 | Chapter 34 | - | Building Basic Navigation Links
 | Chapter 35 | - | Using Cascading Style Sheets
 | Chapter 36 | - | Working with Libraries and Templates
 | Chapter 37 | - | Tapping into the Power of Forms
 | Chapter 38 | - | Building a Framed Site
 | Chapter 39 | - | Building Navigation with Behaviors
 | Chapter 40 | - | Inserting Media Elements
 | Chapter 41 | - | Working with Behaviors, Custom Scripts, and Snippets
 | Chapter 42 | - | Extending Your Dreamweaver
 | Chapter 43 | - | Building a Dynamic Site with DHTML
 | Chapter 44 | - | Publishing Your Site
 | Part VI - Using ColdFusion MX in Dreamweaver MX 2004
 | Chapter 45 | - | The Role of ColdFusion in Your Web Sites
 | Chapter 46 | - | Creating a ColdFusion Application in Dreamweaver
 | Chapter 47 | - | Working with Forms and ColdFusion MX
 | Appendix A | - | What's on the CD-ROM
 | Appendix B | - | About Our Guest Experts
 | Appendix C | - | Installing Macromedia Studio MX
 | Index
 | List of Figures
 | List of Tables
 | List of Code Examples
 | List of Sidebars
 | CD Content CD Content

Team LiB
Next Section


backcover

Team LiB

Back Cover

If Macromedia Studio MX 2004 can do it, you can do it too…

Macromedia Studio MX 2004 offers a revolutionary set of integrated tools for Web developers. This book gives you control of its power. You’ll benefit from the expertise of volunteers, beta testers, and advisory board members who share the inside track on Dreamweaver MX 2004, Fireworks MX 2004, Flash MX 2004, FreeHand MX, and ColdFusion MX 6.1 versions. Whether you’re building your first Web site or seeking advanced guidance on the newest tools, you’ll find the information, instructions, and tutorials that let you create cutting-edge sites.

Inside, you’ll find complete coverage of Macromedia Studio MX 2004

  • Learn to use the Studio MX 2004 tools together to create dynamic sites
  • Add ColdFusion MX 6.1 capabilities from within Dreamweaver MX 2004—without writing a single line of code
  • Develop superb animations with the new Flash MX 2004 capabilities
  • Design Web pages with Dreamweaver MX 2004 using tables or CSS style sheets, pop-menus, and third-party extensions
  • Learn to optimize images in Fireworks for smaller file sizes, then slice and export them as a fully functioning Web page

About the Author

Joyce J. Evans developed the scope and focus of this book, as well as wrote the Fireworks and Flash sections. Joyce is a training veteran with over ten years of experience in educational teaching, tutorial development, and Web design. She has received EditorsChoice Awards for her book Fireworks 4 F/X and Design and has authored several computer books, including Dreamweaver MX Complete Course and Fireworks MX: Zero to Hero. Joyce is a Team Macromedia Volunteer.

Team LiB


Macromedia Studio MX 2004 Bible

Joyce J. Evans

Published by
Wiley Publishing, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com

Copyright © 2004 by Wiley Publishing, Inc., Indianapolis, Indiana

Published by Wiley Publishing, Inc., Indianapolis, Indiana

Published simultaneously in Canada

ISBN: 0-7645-4472-1

10 9 8 7 6 5 4 3 2 1

1O/RY/QT/QU/IN

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 750-4744. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4447,
E-Mail: permcoordinator@wiley.com.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Library of Congress Control Number: 2004101610

Trademarks: Wiley, the Wiley Publishing logo and related trade dress are trademarks or registered trademarks of Wiley Publishing, Inc., in the United States and other countries, and may not be used without written permission. Macromedia is a trademark or registered trademark of Macromedia, Inc. in the United States and/or other countries. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book.

About the Author

Joyce J. Evans developed the scope and focus of this book, as well as wrote the Fireworks and Flash sections. Joyce is a training veteran with over tenyears of experience in educational teaching, tutorial development, and Web design. She has received EditorsChoice Awards for her book Fireworks 4 F/X and Design and has authored several computer books, including Dreamweaver MX Complete Course and Fireworks MX: Zero to Hero. Joyce is a Team Macromedia Volunteer. Her work can also be found in the Macromedia Design/Developer center. She can be reached at Joyce@JoyceJEvans.com. Her Web site is www.JoyceJEvans.com.

Guest Experts
Charles E. Brown
Kim Cavanaugh
Steven Grosvenor
Brad Halstead
Japi Honoo
David C. Nicholls
Samuel Neff
Mary Rich
Ron Rockwell
Doug Sahlin
Murray R. Summers

For a list of guest expert tutorials by title, refer to Tutorials at a Glance.
For a list of contact and background information of authors, refer to Appendix B.

Credits

Executive Editor
Chris Webb

Project Editor
Susan Hobbs

Production Editor
Felicia Robinson

Technical Editors
Mary Rich
Samuel Neff

Copy Editor
Joanne Slike

Development Editor
Marcia Ellet

Editorial Manager
Mary Beth Wakefield

Vice President & Executive Group Publisher
Richard Swadley

Vice President and Executive Publisher
Robert Ipsen

Executive Editorial Director
Mary Bednarek

Project Coordinators
Ryan Steffen

Graphics and Production Specialists
Beth Brooks
Lauren Goddard
Jennifer Heleine
Kristin McMullan
Lynsey Osborn
Julie Trippetti

Quality Control Technicians
Andy Hollandbeck
Luisa Perez
Carl William Pierce
Dwight Ramsey
Rob Springer
Brian Walls

Senior Permissions Editor
Carmen Krikorian

Media Development Specialist
Angela Denny

Proofreading and Indexing
TECHBOOKS Production Services

I'd like to dedicate this book first to my family, who have supported me throughout the project. And secondly to all the readers who support my work and write such encouraging notes.


Preface

I recall the days prior to Dreamweaver 1 when I hand-coded or used inferior tools that wrote horrible code. I rejoiced when I started using Dreamweaver. Prior to using Fireworks, I was using Photoshop. I approached Fireworks with a "Why doesn't this work like Photoshop?" attitude. As Fireworks has matured into Fireworks MX 2004, I now ask, "Why can't Photoshop do this?" Because Dreamweaver, Fireworks, and Flash were all developed specifically for the Web, they are powerful and innovative tools. FreeHand has been used primarily for print design but has been adding Web functions as of version 10. FreeHand MX has added even more Web features while maintaining its strong hold in the field of print design.

The Macromedia Studio MX 2004 bundle of Web development tools has matured into a powerful suite of tools that covers the gamut of what developers need to or want to develop. Flash MX is the best version yet, giving designer/developers almost unlimited possibilities, including communication with ColdFusion and other Web server technologies.

The Macromedia Studio MX 2004 bundle includes Flash MX 2004, Dreamweaver MX 2004, Fireworks MX 2004, ColdFusion MX Developer Edition, and FreeHand MX. Each of these topics can or does fill an entire Bible of its own. (Flash MX 2004 has two Bibles: one for Flash MX 2004 and one for Flash MX 2004 ActionScripting.) As you get a feel in this book for which application you want to explore or learn more about, pick up one of the Bibles specific to the application in which you are interested.

The Macromedia Studio MX 2004 Bible offers you the benefit of a lot of inside information and firsthand experience. The authors' combined expertise encompasses being Macromedia beta testers, volunteers, and members on the advisory board. You'll reap the benefits of this experience by having each author share experience from his or her respective areas of specialization. The team worked together on all portions of the book to develop the Habitat Alert Web site in the first version of this book. The update and new material in this version was completed by Joyce J. Evans and Mary Rich.

Who Is This Book For?

Macromedia Studio MX 2004 Bible is the most comprehensive reference for using all the Macromedia Web development applications together. This book will get the beginner or new user of any of the applications started and help him or her move quickly to intermediate and advanced topics. This book is also a reference for a more experienced user: You can pick it up and investigate a specific topic or application.

People who will benefit from this book include

  • Beginners using any of the Macromedia design/development tools

  • Intermediate users who want to learn how to leverage the power of the entire suite of tools

  • Advanced users who may be advanced in one application but not in others

  • All design/developers who may be experienced in one application but not in others

  • Anyone who has a desire to tap into the power of the Macromedia Studio MX 2004 design/developer tools working together


How This Book Is Organized

Because each of the Macromedia Studio MX 2004 applications can fill an entire Bible of its own, this book was quite a challenge. We decided the best thing we could do was to focus on the core features of each application and concentrate on using the suite together to demonstrate the fantastic integration features of the suite.

Each of the applications has a section of the book devoted to it. But interwoven into each section are assets and functions of the other applications.

Because we wanted to give you more material than the book could allow, we have special Bonus Tutorial and Movies folders on the CD-ROM, where you'll find additional tutorials and movies. Since there are two Bibles devoted to Flash alone, you can imagine how difficult it was to try and cover it in one section. We give you the basics to get started if you are new to Flash and an advanced chapter on Web services, as well as some bonus hands-on tutorials in the Bonus folder on the CD-ROM. The sections of the book are as follows.

Part I: Introduction to Macromedia Studio MX 2004

In this section, you see a brief outline of each of the Macromedia Studio MX 2004 applications' strengths and abilities. Then you see a preview of the hottest new features of each application. In Chapter 3, you see how the Macromedia Studio MX 2004 Bible author team worked together to develop the Habitat Alert Web site.

Part II: Finessing Macromedia FreeHand MX

In the FreeHand section, you quickly learn how to use the powerful vector tools in FreeHand. You make logos, business cards, brochures, and even movies. Along the way, you see some of the cool special effects you can achieve.

Part III: Mastering the Power of Macromedia Fireworks MX 2004

The Fireworks section teaches you how to prepare graphics for use on the Web. You learn how to make vector graphics, as well as how to manipulate, edit, and enhance bitmaps. You learn ways to make navigation elements quickly and easily. You learn to optimize your images for smaller file sizes and slice and export them as a fully functioning Web page or for use in Dreamweaver. Because you have more control over a Dreamweaver layout, that method is used for the book's project sample.

Part IV: Unleashing the Power of Macromedia Flash MX 2004

In the Flash section, you discover how its vector tools differ from those in FreeHand and Fireworks, plus how to use its interface and how to get around. You see how to work with states and the Timeline, how to make buttons Movie Clips, and how to use the new Flash components to add sound. Basic ActionScripting is discussed, as well as using the Actions panel. An advanced chapter on Web services is used for an e-card application in conjunction with ColdFusion.

Part V: Developing in Macromedia Dreamweaver MX 2004

The Dreamweaver section takes you from a blank page to a fantastic layout. You learn the ins and outs of using tables or adding CSS style sheets, adding forms, using the Pop-Up Menu behavior, and using third-party extensions. You even learn how to set up a database connection and provide dynamic content from a database. Also included are topics such as using scripts, snippets, DHTML, and all kinds of special tips and tricks.

Part VI: Using ColdFusion MX in Dreamweaver MX 2004

The chapters in this section are designed to show you how to use ColdFusion in Dreamweaver. You don't need to understand a lot of ColdFusion markup to be able to connect to a database using the wizards in Dreamweaver. This chapter focuses on the integration of ColdFusion in the Dreamweaver environment. If you are more interested in coding and the more advanced aspects of ColdFusion, bonus chapters have been provided on the CD-ROM for you.


Conventions Used in This Book

Several conventions used in this book help you understand the instructions:

  • Menu and keyboard commands — When you need to press a keyboard command, you'll see the PC command followed by the Mac command, such as Ctrl/Command+F3. Ctrl is the key to press on the PC, and Command is the key to press on the Mac. Both use the F3 key.

  • Application menu — When you access one of the application menus, such as File, View, Window, and so on, you are told to choose File ® Check Page ® Check Links. The menu and the command are separated by an arrow. If there are submenus, you'll see another arrow, and so on. Menus in panels are referred to by name. If there is a contextual menu, you will commonly see instructions to right-/Control+click to access the menu (that is, you right-click on a PC and press Control+click on a Mac).

  • Bold text is used for words that you need to type.

  • Code font is used for code and URLs.

  • You can jump around anywhere in the book. Of course, if you are just learning, it will do you more good to start at the beginning of a section or, at the very least, the beginning of a chapter. Because this is a reference book as well as a training book, we have provided files for the book's project site for every chapter that uses the Habit Alert Web site files. We can't assume you are doing any of the exercises in any order. Because of this, when you save or export from Fireworks, read the save and/or export directions carefully. You'll need to have a Dreamweaver site defined (refer to Chapter) to have the roundtrip editing work its magic. In the Dreamweaver section, you'll be told when you need to define a new site for a specific chapter's exercise files. By setting it up this way, you can work in any chapter and have the resources needed to complete any of the project exercises.

Icons

The following icons are used to highlight important points throughout the book:

Tip

Tips offer you extra information that further explains a given topic or technique, often suggesting alternatives or workarounds to a listed procedure.
Note

Notes provide supplementary information to the text, shedding light on background processes or miscellaneous options that are critical to the basic understanding of the material.
Caution

When you see the Caution icon, take special note; it tells you something important to watch out for.

Cross - Reference

If you want to find related information to a given topic in another chapter, look for the Cross-Reference icons.
On the CD-ROM

This icon indicates that the CD-ROM contains a related file and points you to the folder location.
New Feature

This icon indicates a new important feature to the specific application.

Habitat Alert site The Heron icon is used to alert you that an exercise or project was used for the Habitat Alert site.

Dreamweaver, Fireworks, FreeHand, Flash, ColdFusion These icons are used to show you important integration features among the applications. When an asset or technique is used from one of the other applications, you'lfrequently see the specific icon of the application used.

Expert tutorials

A group of experts wrote tutorials that give additional insight into many areas of the Macromedia Studio MX 2004 suite of applications. As this book got larger and larger, it was necessary to move some of these tutorials onto the CD-ROM. These tutorials provide additional practice and insight into some of the functions of Fireworks and Flash.


The Habitat Alert Project

In addition to being a book for learning the specific applications and reference material, this Bible includes a unique feature: a Web site built throughout the book that uses all the applications within the Macromedia Studio MX 2004 bundle of software to demonstrate how they work together.

Since we develop a working site, which resides at www.habitat-alert.org, what you see online may vary from what is provided here. Web sites have a tendency to change frequently. Some of the functionality, such as the shopping cart, is not taught in this book, so it's not included in the source files. There is also a separate folder for the site administration pages that will make a great model to use for an intranet. You have permission to use any of the files for your learning purposes only.


Companion Web Sites and CD-ROM

There are two supporting Web sites available to you. Wiley's site is at www.wiley.com/compbooks/evans, and the author's site is at www.JoyceJEvans.com/MXbible/MXbible.htm.

On the CD-ROM, you'll find all the files and images needed for the Habitat Alert site project. Each chapter that has files you'll need has a folder on the CD. You'll also find bonus tutorials and movies.

Acknowledgments

I'd like to first and foremost give gratitude to my God, who empowers my family and me and supports my efforts. A book of this magnitude took the dedication and talent of many people. I'd like to thank the members of the original author team of the first version of this book of Ron Rockwell, Donna Casey, and Charles Mohnike for their great work and dedication to the project. I'd also like to thank the expert guests who provided tutorials that added another level of expertise to various subjects.

I'd like to thank everyone at Wiley who supported us as we made changes and asked a lot of questions. Special thanks to Chris Webb, whose excitement for the book was encouraging. I'd also like to thank Susan Hobbs, our project editor; Mary Rich, the tech editor; and all the folks behind the scenes who were involved in the layout and made special icons for us.

Special thanks go to David Morris at Macromedia, who referred me to Wiley for this book project. Also, a special thanks goes to Heather Hollaender from Macromedia, who made sure I had access to the information I needed and always pointed me in the right direction when I needed answers.

Thanks go to my agent Margot Maley Hutchisen of Waterside Productions, who put so much work into all the gory details and negotiations of a book.Production: Please add a page before CAG that lists the expert tutorials in this book. I've typed in a sample layout below. Thanks--Neil


Part I: Introduction to Macromedia Studio MX 2004

In This Part

Chapter 1: What Is Macromedia Studio MX 2004?
Chapter 2: What's New in Macromedia Studio MX 2004
Chapter 3: Designing the Habitat Alert Web Site


Chapter 1: What Is Macromedia Studio MX 2004?

Overview

Macromedia Studio MX 2004 is a powerful suite of Web development tools. The applications that make up the Studio include Dreamweaver MX 2004, Flash MX 2004 (optional Professional version), Fireworks MX 2004, FreeHand MX, and ColdFusion MX developer edition.

With the introduction of Macromedia Studio MX and now Macromedia Studio MX 2004, I realize just how far Web development tools have come. I recall building my first Web pages using Netscape Communicator and Arachnophilia. I quickly learned that the code was horrible and I didn't know how to fix things, so I learned basic HTML and started using Notepad. When Dreamweaver 1 first became available, I thought it was like heaven. I still used Photoshop for my images, Debabilizer for Optimization, nothing for drawing, and no animation. Through the years, great new tools such as Fireworks — made designing Web graphics easier and faster than competing applications; plus it had great optimization built right in.

All the Web pages were built separately, and updating was extremely and painfully slow. One of my very first sites was a horse game for children that I used to practice my new skills on. Every time I added a section, it required a new link. The site had grown to over 200 pages and was getting over 250 e-mails a day. It was so popular, and the time to maintain it so demanding, that I had to close it down.

As the Macromedia products improved each year, we kept seeing great new tools and capabilities that wowed us, such as being able to make objects move across the screen in Dreamweaver. Then came Flash and it's widely popular capability to deliver moving graphics in a small file size. Today, with the release of Macromedia Studio MX 2004, we realize a new trend — productivity and workflow. How can we do our job and do it more efficiently? The focus starting with Macromedia Studio MX has been on productivity. With this newest release of Macromedia Studio MX 2004, a lot of performance-enhancing improvements have been added, as well as even tighter integration of each of the Studio applications. The interface is designed to make finding and using the tools you need more accessible and intuitive. And moving among the various applications many times is as easy as the click of a button.

There are great new tools such as the capability to crop and resample an image in Dreamweaver without ever leaving Dreamweaver or the new Auto Shapes in Fireworks or the Effects Timeline in Flash. In FreeHand MX, you have over 40 new tools and enhancements. Flash MX now has two flavors and is using ActionScript 2. You get the point — each application has added functionality.

Cross - Reference

See Chapter 2 for a more comprehensive list of new features for each application.

This book focuses on the integration of how to use the Studio applications in conjunction with each other. The book stays true to the Bible format, so you'll get the reference-based information on many of the core features of each application and exercises on how to use the tools. But a new level has been added to this particular book — a project to demonstrate the interaction of the Studios applications.

The books project isn't necessarily a step-by-step, do-everything type of project. Instead of generic examples to teach how to perform a function, major portions of the sample site (Habitat Alert) are used as the teaching tool. Because you'll probably be accessing the various exercises via different chapters, each chapter has an exercise folder so you can perform the exercises in that chapter without completing previous chapters. However, exercises within a specific chapter usually build upon themselves, using the exercise files.

You may be familiar with some of the Studios applications but not others. As you learn the strengths of each application, you may want to delve into a particular application in more detail. There are entire Bibles for most of the applications in the Macromedia Studio MX 2004 bundle. Two entire Bibles have been written on Flash, and it would be impossible to cover all the intricacies of Flash in this type of book. If you have a real interest in Flash, you should consider picking up the Flash MX 2004 Bible. Each section of this book was designed to give you enough information to begin using all of the applications in a real-world situation — enjoy!


FreeHand MX

FreeHand is a drawing program that uses vector graphics (line drawings rather than photos). Its strength lies in drawing tools and print production. Illustrators and artist frequently use FreeHand to create line drawings. In Chapter 11, you'll see how to create the image shown in Figure 1.1.

Figure 1.1: This image was totally created in FreeHand, including both graphics and animation.

FreeHand was originally developed as a vector drawing program and has grown to be arguably the best program on the market for the production of pure vector art. Over the last 15 years of continual change and improvement, FreeHand has become an extremely versatile program for anyone in the graphic arts community.

FreeHand MX has the same type of workspace as the other MX applications and nearly 50 new tools and enhancements that weren't available in previous versions. These tools include Output Area, Extrude, Action, and Connector. Beyond the capabilities these new tools give you, the main thrust of the upgrade is the way you can apply multiple strokes, fills, and effects to a single object. Draw an object once, and add squiggly lines, drop shadows, Gaussian blurs, and glows. But perhaps the biggest change that users of the environment will see is the introduction of the MX workspace. The workspace is flexible and integrated and has docking capabilities for grouping, collapsing, or expanding panels as needed. The new interface simplifies the ability to customize the workspace for working more efficiently.

In addition, rounded corners are easy to create with the tricks you can perform on rectangles using the Subselection, or Subselect, tool, and ellipses can have precise sections of their arcs removed. Polygons are now extremely editable. You can make changes in stars or straight-sided polygons live on the object, or through options in the Object panel.

You can import a SWF (pronounced "swiff") file and make it part of your FreeHand document; then export the document with the SWF embedded in it. You can then distribute your document Flash movie to all of your clients. If you want to edit the SWF file (Flash movie) you imported, you can click a button to open Flash, where you can modify the SWF file. The file is then automatically updated in the FreeHand document.

Cross - Reference

You'll learn more about creating Flash movies in the Flash section of this book.


Fireworks MX 2004

Fireworks MX 2004 is an integral part of the Macromedia Studio MX 2004 Web development workflow. Fireworks is the graphic editor. It's used to edit any bitmap image (such as photos), as well as to apply special effects such as shadows, blurs, changes in color, and tons more. You can fade images into backgrounds or put them into custom shapes. The image composition shown in Figure 1.2 is done in Chapter 17.

Figure 1.2: A Fireworks-created image composition.

Fireworks excels at vector shapes and drawing. You can make all kinds of custom shapes, as well as add shadows, bevels, blurs, patterns, textures, and more to your graphics. There are many tools built in to speed up your workflow, such as the Button Editor, where you can make button symbols complete with rollover states. After you make a symbol, it can be used over and over again. Edit the symbol, and all instances (or copies) are updated. You can use styles that are presets of effects, or you make your own styles. Commands are another powerful feature, allowing you to record frequently used steps so you can replay the steps with just a click.

Fireworks also excels at optimizing images — making the file sizes as small as possible and still having them look good. Along with Fireworks' superior optimization capability is slicing. You can slice an image into different "pieces" and apply different optimization settings to each, making Fireworks the premier tool for optimization. You'll learn how to slice, optimize, and export your images in Chapter 21.

Fireworks exports your images into quite a few different formats depending on how they'll be used. For example, you can export as GIFs and JPEG for use in Dreamweaver and Flash, export as CSS layers for use in Dreamweaver, or even export as Dreamweaver Library Items. (For more on this, see Chapter 36.) You can use the native Fireworks PNG format and use it in Flash, or export your Fireworks layers and frames as files, which you can then import into Flash to use as frames (see Chapter 24).

Cross - Reference

For a full list of new features, see Chapter 2.


Flash 2004

Flash is one of the fastest growing technologies on the Web today. Flash is used to make Web movies. It used to be that developers used Flash to create useless but cool splash pages, but Flash and the Flash community has grown and matured a great deal. More focus is now devoted to usability and accessibility. Flash interfaces now can be more engaging and useful. They can connect to databases so users can shop, register, get and receive live video feeds, and much more. These are advanced features of Flash and won't be covered in this book, but it's important to understand that Flash is no longer a cool toy — it's an extremely powerful part of Web development.

If you haven't used Flash before, you'll get a hands-on feel for how to use it and do some common tasks such as make reusable symbols and animate a movie. You'll learn how to add sound and explore some of the components (prepackaged interface tools) that ship with Flash. For the more experienced Flash user, there is a chapter on Flash Remoting, where you connect the book's sample sites e-card interface built in Flash to a ColdFusion server. When a user clicks on a card, the information he or she fills will be sent to the database. The cards themselves will be pulled from the database. Figure 1.3 shows the e-card interface you'll use to pull the cards from the database.

Click To expand
Figure 1.3: The e-card interface.

One of the great advantages of using Flash is that you can provide engaging content with a minimal wait time. You can reduce file sizes by reusing content, such as symbols (reusable graphics). Most multimedia formats can be integrated into Flash. You can use vector formats, such as EPS, and files from FreeHand and Adobe Illustrator. You can even use bitmaps (pixel-based images), such as GIF, TIFF, JPEG, and PNG. PNG32 files even maintain their alpha transparency in Flash. You can use sound formats, such as WAV, AIF, and MP3, as well as AVI and MOV movie formats.

New with the Studio MX 2004 bundle is the "Optional" Flash MX Professional 2004. This version has everything that Flash MX 2004 has, but it also has a lot more Flash components included. This is the application to use if you are heavy into video, deploy to devices, or build rich Internet applications (such as forms and data connectivity). The Professional version is not covered in this book.


Dreamweaver MX 2004

Dreamweaver MX 2004 is a feature-rich, professional Web design and development program. Its tightly integrated environment enables you to design, build, and manage Web sites and Internet applications with easy-to-use visual design tools and a customizable coding environment that supports current and next-generation technologies for static Web sites or server-based Web applications. Dreamweaver's features and tools are supported by panels that you can group and dock. Design and Code view options enable you to work in a comfortable environment. A single-click option lets you change views at any time. Contextual menus and panel options provide convenient access to tools and are often supported with custom keyboard shortcuts. Program preferences enable you to select specific settings for your workflow, from opening new documents to previewing work in progress. Dreamweaver is also extensible, which means you can add new objects, behaviors, and commands to include new tools, features, and functions in your application.

Dreamweaver has come a long way with its CSS (Cascading Style Sheet) style tools. Because there is no longer any HTML text formatting, new users are encouraged to use the new standard of CSS. But it's still easy for the beginner to use. Figure 1.4 is the sample site built throughout this book.

Click To expand
Figure 1.4: The book's sample site built in Dreamweaver.


ColdFusion MX

When Macromedia merged with the Allaire Corporation in 2001, it added this extremely powerful tool to its arsenal of design applications. ColdFusion gives Flash developers and Dreamweaver designers the ability to create technically sophisticated Web and intranet applications, and the inclusion of ColdFusion MX makes it easier and more intuitive for nonprogrammers to do so.

The relationship between ColdFusion MX and other Macromedia Studio products is now so closely integrated that it's possible you have already been using ColdFusion features in your Flash movies or Dreamweaver sites without realizing it. Dreamweaver, in particular, makes it easy to create basic ColdFusion applications without knowing much about ColdFusion Markup Language (CFML) or how ColdFusion Server works.


Summary

This chapter gave you an overview of each of the applications in the Macromedia Studio MX 2004 bundle. The new interface helps cut the learning curve of each application; after you learn the basics of one, you'll pick up the nuances of the others very quickly. You'll soon discover how powerful it is to have all the Web development tools you need at your fingertips.


Chapter 2: What's New in Macromedia Studio MX 2004

Overview

A streamlined, easy-to-use interface is common to each of the applications in Studio MX 2004. The interface has been changed significantly in this version, with workflow and space saving the key goals, as well as integration and ease of use across the Studio appli-cations. Macromedia Studio MX 2004 ships with Flash MX 2004, Dreamweaver MX 2004, Fireworks MX 2004, FreeHand MX, and ColdFusion MX. This chapter gives you an overview of each component in the suite and the major new features of MX 2004.

Note

FreeHand and ColdFusion are not version 2004. For an additional $100, you can get Flash MX Professional 2004.


What's New in FreeHand MX

The first thing you'll notice when you initially start FreeHand MX is Macromedia's new MX workspace (see Figure 2.1). This workspace is shared across the other MX products, so learn it once and you are ready to be productive in the other programs in the MX product line. Panels — what used to be known as palettes — are located along the right side of the screen. They are dockable and can easily be placed in collapsible panel groups.

Click To expand
Figure 2.1: The Macromedia FreeHand MX workspace.

There are too many new elements to mention individually in this section. Here you'll get the highlights. The other FreeHand MX sections provide a wealth of detail.

New panels

Of all the improvements to FreeHand MX, changes to the panels are the most evident and the most useful — especially if you work on a small screen. All the panels are contained (at least when you first open the program) in a single docking area that runs the full height of the right side of the monitor. It looks similar to the rest of the Studio MX setup. But there's one great advantage if you're on a Windows machine: On the separator bar, you'll see a tiny box and triangle that contains the panels. Click that triangle, and all the panels fly off the monitor completely, leaving only the 6-pixel-wide separator bar running down the right edge of the screen. Click the triangle again, and the whole shebang flies out. There are five panel groups: Properties, Assets, Layers, Mixer and Tints, and Answers. You can move them up and down the stacking order by grabbing the gripper buttons on the left side and dropping the panel where you want it. A white triangle hides or shows the contents of the panel when clicked.

Toolbox

You're likely to notice that the Toolbox has been modified. Tools of a feather are nested together, and you have to hold the cursor down on one tool to open the group of tools that are available. Most of the Xtras have been grouped into the Toolbox as well. You'll also see a few new tools — Output Area, Extrude, Action, and Connector, to name a few.

Gradients

Gradient fills get a big boost too. Any gradient fill can have one of three new modifiers applied to it that reflect, duplicate, or fit the object precisely. The gradient is editable directly within the document with a set of control handles that is new in FreeHand MX.

If you like to use gradient fills, FreeHand MX has some additional toys to play with, called behaviors. These attributes control the way the gradient fills an object, and they come in four flavors: Normal, Repeat, Reflect, and Auto Size. It helps if you turn on the Show Fill Handles option for the Pointer and Subselection tools so you can see what's going on with the various behaviors.

Shapes

Rounded corners on rectangles are definitely easier with the tricks the Subselection tool can do with a rectangle, and ellipses can have precise sections of their arcs removed. Polygons are editable beyond belief now. You can make changes in stars or straight-sided polygons live, on the object, or through modifications in the Object panel.

SWF

You can import a SWF file, make it part of your FreeHand page, and export the page with the SWF embedded in it. During all that, you can click a button to open Flash, where you can modify the SWF file. It's automatically updated in the FreeHand document.

You can have a SWF movie clip as part of a FreeHand MX page. Furthermore, you can export the document as a SWF file, and the imported SWF will be a part of the file you export. The preview frame for the movie is user-chosen and can be printed or exported in a rasterized version or as vectors. You can edit the SWF in Flash with the Flash jump button (Launch/Edit Flash MX). The movie is automatically regenerated and updated in FreeHand.

Unlimited stroke, fill, and effect attributes

Draw an object once and add squiggly lines, drop shadows, Gaussian blurs, and glows. Then do it again. Each attribute is added to an object "tree" that you can edit by moving branches up and down the tree, or removing them altogether.

Object panel

The Object panel makes it easy to change object and text properties all from one location. You can also control the stacking of multiple attributes and drag and drop between the Object and the Styles panels.

Vector Live Effects

One of the new classes of effects in FreeHand MX is called Vector Live Effects. Any object or live text can be given these effects, including Bend, Duet, Expand Path, Ragged, Sketch, and Transform. You'll be using these when you want a freer look to your work. For a great place to start experimenting, import the Vector Effects from the Styles panel. All these effects are contained within the new Properties ® Object panel and can be combined for even more creative appearances. You are encouraged you to tear the default effects apart so you can see how they work and why.

Action tool

Creating navigation actions can't get much easier than this. Choose a view that shows all the pages involved in your movie, and select the Action tool. Click an object that will be the trigger, and then click the object page. Making a link in this manner creates a Go To or Print action between the trigger object and the page. An arrow/box icon and wavy line between the items show the origin object and page.

Connector Lines tool

If you are the organized type, or you need to show the relationship between elements, the Connector tool will be the highlight of FreeHand MX. It's simple to operate. Select the Connector tool, click an object, and click another object. A connector line joins the two objects with a straight-lined path to which you may apply arrowheads to either end, as with any other path.

Extrude tool

You can extrude any vector shape, including live text, in FreeHand MX. Just select an object, click the Extrude tool, and drag. Modification controls are displayed in the Object panel. You also have control over lighting and vanishing points . . . and these can be applied to multiple objects.

Fireworks PNG Importer

FreeHand and Flash have played well together for their last couple versions, but now Fireworks can play too. You can edit quickly a bitmap that's been imported to FreeHand by clicking the new Fireworks jump button at the bottom of the Object panel. When you save a Fireworks PNG document and import it into FreeHand, you can edit it with all the vector tools that FreeHand offers and modify the effects that Fireworks has applied.

SWF import/re-export

You can have a SWF movie clip as part of a FreeHand MX page. Furthermore, you can export the document as a SWF file, and the imported SWF will be a part of the file you export. The preview frame for the movie is user-chosen, and can be printed, or exported in a rasterized version or as vectors. You can edit the SWF in Flash with the Flash jump button (Launch/Edit Flash MX). The movie is automatically regenerated and updated in FreeHand.

Simplified Movie Settings dialog box

Movie Settings can be accessed via the Controller toolbar or the Windows ® Movie menu in FreeHand MX. The Movie Settings dialog box changed significantly (see Figure 2.2). Export Options now provides a choice between Single or Multiple pages, and Animated or Flattened layers. Icons beneath the Layers and Pages title show the effects of your choices. A new Movie Properties section has been added: Size to Match Contents. In addition, Optimization terminology has been simplified. The basic functions are the same, but it's easier for novices to get a handle on the process.

Figure 2.2: The new Movie Settings dialog box.

Image alpha channel support

You can import documents with alpha channels, and you can also export your own alpha channels. If you import a bitmap from Fireworks or Photoshop that has an alpha channel, everything will look and function as you would expect when you have the Display Alpha Channel option turned off in the Object panel.

New Page button

A small but welcome addition is the New Page button in the bottom-left corner of the application window. A single click adds a new page to the document.

Swap object for symbol

If you've ever made a symbol in FreeHand that you would like to use to replace objects already in place in your document, this little addition will be good news for you.

Pantone libraries updates

FreeHand MX has the latest and greatest range of PANTONE colors: 14 separate libraries from Hexachrome to metallics, pastels, and solid to ProSim EURO. Of course, Macromedia retained libraries from Munsell, TOYO, and the DIC Color Guide.

Open documents

For power users who want to test the bursting strength of their computers, FreeHand MX lets you open more than a dozen documents at one time.

JPEG thumbnail preview

Windows users and artists operating Macs on OS X have the option of choosing JPEG or BMP as a file format for Export thumbnail previews. These previews are shown in the Open menus; the user can adjust the size of the preview.

Anti-alias view

For quite a while, Macromedia has heard people ask for an anti-alias view for vector objects. Finally, it has been implemented in FreeHand MX. The old Flash Anti-alias view had a few problems in the integrity of the paths it showed. Flash Anti-alias is no longer in the program.


What's New in Fireworks MX 2004

Fireworks MX 2004 has gone through another face-lift to add usability and productivity. The enhancements to this version will help improve your workflow, reduce the time it takes to make custom shapes, and add visual control in some of the menus. Figure 2.3 shows the Fireworks workspace and interface.

Click To expand
Figure 2.3: The new Fireworks MX 2004 interface.

Start page

The Start page loads when you open Fireworks, and it gives you quick access to recently used files, to opening a new file, or to starting with a new Fireworks page. There are also links to tutorials and additional help at Macromedia. After you open a page, the Start page won't be visible until all files are closed.

Save in original format

The ability to save in the original format is a very welcome feature. You no longer have to re-export a JPEG, TIF, and so on. You can now open, edit, and save in the current format without having to re-export the file.

Document tabs

Although this feature might seem small, it's become a favorite.You can now quickly switch between open documents by clicking the document name at the top of the document. The tabs and names are present when you have the document expanded to fill the workspace.

Pop-up preview

In the Property inspector, the menus for strokes, fills, and fonts now have visual representations to select from.

Dotted line stroke

Finally! You now have several different dotted line types to choose from. This is an extremely popular addition to Fireworks MX 2004.

Contour gradient

The contour gradient fill contours a path.

File Management button

If you have a Studio MX 2004 site defined and a remote server defined, you can now get, put, check in, and check out files all from within Fireworks.

Auto Shapes

Auto Shapes are pretty intuitive. They are custom shapes you can manipulate by control handles. As you pass your mouse over them, you'll see tips on how to use it. It's a great and easy way to get a custom shape if you are not comfortable with the Pen tool. Auto Shapes are in the Rectangle shape area of the Tools panel. Figure 2.4 shows all the Auto Shapes (except the ones in the Shapes panel). They appear below the line (after Rectangle, Ellipse, and Polygon).

Figure 2.4: The Auto Shapes accessed from the Tools panel.
Note

Additional shapes in the Shapes panel are available as part of the Assets panel group. These are made by third parties and can be downloaded from the Fireworks exchange (www.macromedia.com/cfusion/exchange). (The URL says cfusion, but it goes to Fireworks.)

Server-side support

Fireworks MX 2004 now has roundtrip support for server-side files such as CFM, PHP, and ASP.

Send as e-mail

You can attach a Fireworks file to an email directly from Fireworks.

Hide/Show panels

You can hide all your panels by the click of a button when you need extra space for your document.

Red Eye Removal tool

The Red Eye Removal tool removes the red from eyes in some cases; however, this tool doesn't always work the way you'd expect.

Replace Color tool

The Replace color tool is extremely easy to use. You can now replace colors in a percentage of the time it takes using other tools.

New Live Effects

New blur options have been added, such as motion, radial, and zoom blurs. A noise filter is now available as well.

Scale from center

If you press the Alt/Option key and drag the Scale tool, it'll scale from the center out.

Anti-aliasing

There is now a custom anti-aliasing option that gives you more control over how your edges look. You make your text even more readable now by taking advantage of system anti-aliasing on Windows and Quartz on a Mac.

Unicode support

You can now create double-byte graphical and alt text and use characters such as Kanji and Hiragana in any text field.


What's New in Flash MX 2004

One of the biggest changes to Flash 2004 is that there are now two different editions. Flash MX 2004 and Flash MX Professional 2004. Flash MX 2004 ships with the Studio MX 2004 bundle unless you opt to pay the additional fee for Professional. Flash MX 2004 is used in this book. Figure 2.5 shows the Flash MX 2004 interface.

Click To expand
Figure 2.5: The Flash MX 2004 interface.
Note

Flash MX Professional 2004 contains everything that Flash MX 2004 contains. The Pro version is designed to build Web applications. The biggest difference is that it has project management tools, as well as external scripting capabilities to handle dynamic data from databases.

Timeline effects

You can now apply effects, including transitions such as fade-ins, spins, and more, to objects on the Stage. It's a quick and easy way especially for beginners to get some cool effects.

Behaviors

From the Behaviors panel, you can add interactivity without writing any code at all. You can load sounds and graphics, control the playback of embedded videos, and more.

Accessibility support

Accessibility has been a hot topic when it comes to Flash movies. Now accessibility support is built in to make your Flash creations accessible.

Accessibility and components

With the new accessibility features and components, there is now tab ordering, tab focus management, and support for screen readers and closed-caption programs.

Updated templates Flash

New starting templates have been added for e-learning application, mobile devices, presentations, advertisements, and many more.

Integrated Help system

The Help system is now integrated into the Flash environment, providing context-sensitive reference and tutorials.

Spell checker

You can now check your movies for spelling errors.

Document tabs

Document tabs displaying the name of each open document make it easy to switch between documents. This is a Windows-only feature, however.

Start page

All of the MX 2004 family of applications now have a new Start page. The Start page provides quick links to recently used documents and to Macromedia for additional tutorials. You can also quickly open an existing file or open a new Flash file. Figure 2.6 shows the Start page.

Click To expand
Figure 2.6: The Start page.

Find and Replace

You can use the Find and Replace feature to locate and replace a text string, a font, a color, a symbol, a sound file, a video file, or an imported bitmap file.

ActionScript 2

Flash MX 2004 now supports ActionScript 2, which follows the ECMA script language specification and supports inheritance, strong typing, and the event model.

Note

ECMA International is an industry association dedicated to the standardization of information and communication systems.

History panel

All your actions are tracked in the History panel. You can then use the history steps to create custom commands.

Video Import Wizard

The Video Import Wizard has presets and clip editing to streamline your editing tasks.

Small-font size rendering

You now have better support for crisp and clean-looking small fonts.

Publishing

The new publishing features have options for better accessibility and Flash Player detection. You can now save and reuse publish settings and set destination publish locations. The Publish Size report now includes ActionScript, and the Bandwidth Profiler now profiles streaming content.

Flash Player detection

Your SWF files can now detect if the user has the required Flash Player version. You can set it up to direct them to an alternate page.

Enhanced globalization and Unicode support

You can now author multilanguage text using any character set.

Strings panel

You can publish Flash content in multiple languages using the new Strings panel. With just a click of a button, Flash will create an external XML file for each language.

Security

The Flash Player 7 offers stricter security than previous versions. Exact domain matching means the content comes from the same domain and can freely communicate with other contents and documents from that same domain. When content is shared between two different domains, a pop up asks to allow or deny such access.

Better runtime performance

Flash Player 7 runtime performance is now two to five times better for video, scripting, and display rendering.


What's New in Dreamweaver MX 2004

Macromedia Dreamweaver MX 2004 incorporates many new features and that help users of all levels build static and dynamic sites that meet today's tough standards for accessibility, functionality, CSS development, efficient workflow, and fast-paced content management.

Start page

When you first open Dreamweaver you see the Start page, which provides quick links to frequently used features. The Start page is broken up into separate columns so you can quickly select and open a recently used file, open a new document, or open a sample starter document, as seen in Figure 2.7.

Click To expand
Figure 2.7: Dreamweaver interface and Start page.

Insert bar

The new Insert bar frees up more space in your workspace. You access the various categories via a drop-down menu. Each category has icons representing the objects in that category. Some have their own menus with more options. When you select an object from one of the menus, the visible icon changes to the last used object. The best thing about the new Insert bar is that there is a Favorites category. You can add all you own most-used items into one category for quick access.

CSS Rule inspector

The CSS Rule inspector is part of the Tag inspector. You can see which CSS rules apply to the current selection. If you click a rule, you'll be able to see the attributes of that rule. A red strikethrough indicates an attribute that has been overridden by another rule. You can edit the rule and see the changes in Design view.

CSS Layout visualization

In Design view you can select <div> tags and other block elements and then modify their properties using the CSS Rule inspector.

CSS panel

The CSS panel has been improved. There is no longer an edit mode, but you can edit by selecting a style and clicking the Edit icon. You can also jump directly to style definitions within the code and see where and how styles are defined.

CSS text in the Property inspector

There is now only one mode for text: CSS. There is a Style drop-down menu that allows you to add styles. The menu shows a preview of the style. The styles added via the Property inspector will be embedded into the head of your document.

CSS-based page properties

The Page Properties dialog box has gotten an overhaul. There are now various categories from which to select, making it easier to locate what you need to set. The biggest change here is that the code written is CSS, not HTML. The choices you make are written as styles into the head of the document.

CSS code hints

You can set your code hints preferences by choosing Edit ® Preferences ® Code Hints. Code hints can help you insert error-free code. A list appears when you type the first letters of a tag, attribute, or CSS property. The list has options you can choose to complete what you were inserting. You can also use it to simply see the available attribute.

Prebuilt CSS-P templates

When you choose File ® New, select Page Designs (CSS), you'll see a selection of layouts to choose from. It's a great way to get started with a basic CSS positioned site.

Integrated Tag inspector

Make comprehensive edits with this inspector, which lists every available tag attribute that applies to a current selection, as well as CSS rules and behaviors.

Tag Library Editor

Using the Tag Library Editor, you can edit properties of existing tags and import new ones.

Cross-browser validation

You can now check tags and CSS rules to see if they are compatible with the browsers of your choice. You set the browsers for which you want to check, and you can have the check not be automatic if you'd like. There is a new Browser Check icon to the right of the Title field. The arrow accesses the menu of options.

Table-Editing Visual Feedback

When you insert a table, by default you'll see a transparent ruler at the top that contains easy-to-use context menus. You can easily select columns, change column widths, insert or delete columns, or make the column widths the same. If the visual ruler gets in your way or if you prefer not to use it, you can turn it off by choosing View ® Visual Aids ® Table Border.

Siteless file editing

For a quick edit or change, you can access the files without defining a site. You can change code directly on a remote FTP or network server. Of course, for the most part, you'll want to define sites to take advantage of the site management features.

Enhanced performance

Perhaps one of the most important new features is one you can't see — performance. The core Dreamweaver code was improved to increase stability and performance. Some of the areas in which you'll see the improvement is opening and saving files, switching context, and switching in and out of Dreamweaver.

Built-in graphics editor

In previous versions of Dreamweaver, you could change the size of an image in the Property inspector, but all it did was change the physical size not the file size. Plus, if you wanted to edit the image directly, you had to have an image editor. Naturally, Fireworks is the best way to go, but for a quick crop, resize, or minor edit, you don't even need to own an image editor. When you crop an image, you can now resample it. If you change the dimensions rather than use the Crop tool, you can also choose to resample it. You can add brightness/contrast and sharpen, but you have no control over these tools as far as settings are concerned. It's a good and easy quick fix to minor alterations.

You can still use Fireworks roundtripping for editing or the Fireworks Optimization option.

Flash Elements

Flash Elements are an easy way to add Flash to your site right from within Dreamweaver. Only one currently ships with Dreamweaver MX 2004: the Image Viewer. You change the properties, set the URL for the images, and so on right in the Tag <object> inspector. Look for more third-party elements. This will be an exciting addition to Dreamweaver as more and more elements are created.

MX HTML Elements

MX HTML Elements are a series of prebuilt components. They have designs patterns embedded to make it easier to build effective UIs (user interfaces). The MX HTML Elements that ship with Dreamweaver MX 2004 include CSS style sheets, buttons, and Dreamweaver templates. The MX HTML Elements have a halo-type look and feel. This is the new look and feel you see at the Macromedia site.

Microsoft Word and Excel copy-and-paste

You can copy and paste from Word and Excel documents right into Dreamweaver MX 2004. Your fonts, colors, and CSS styles will be preserved.

New reference content

The Reference panel contains updated O'Reilly content on SQL, ASP.NET, and PHP.

Find-and-replace improvements

You can now save your searches, and you'll see that there are now more search options.

Secure FTP

Secure FTP is now available to encrypt file transfers and prevent unauthorized access of your data, usernames, and passwords.

Full Unicode support

Leverage full Unicode support to use, render, and save any font and encoding supported by your operating system, including double-byte character sets.

XML namespace support

Code view supports XML namespaces. Code hints and XML validation work for imported XML schemas that specify a target namespace.

ASP.NET form control objects

Use new ASP.NET objects and property inspectors to build and manipulate ASP.NET Web forms.

PHP server behaviors

New PHP behaviors include Master-Detail Page Set and User Authentication.


What's New in ColdFusion MX

Macromedia Studio MX marks the first time ColdFusion has been bundled with Dreamweaver, Fireworks, and Flash — and as you might expect from this union, compatibility and interactivity between the applications has markedly improved. Dreamweaver in particular has gained some new features allowing ColdFusion MX developers to create and troubleshoot their code. Dreamweaver also serves as the replacement for ColdFusion Studio, the development interface many ColdFusion developers used with previous versions of the software.

The ColdFusion MX server product has also undergone a complete revamp. Although previous versions of ColdFusion were written in C, ColdFusion MX is written in Java, bringing the program into the J2EE fold and allowing Macromedia to offer a version of the program that is directly compatible with J2EE application servers such as IBM's WebSphere and BEA's WebLogic.

Other additions and modifications found in the MX version of ColdFusion are as follows.

Java integration

ColdFusion Server now comes in two varieties: the standard ColdFusion MX Server and ColdFusion MX Server for J2EE Application Servers. The latter enables Java developers to integrate the Java platform seamlessly with ColdFusion's ease of use. Both server versions also allow Java Server Pages (JSPs) to be used

Macromedia Flash remoting

ColdFusion MX and Flash MX can now seamlessly exchange data, enabling ColdFusion developers to take advantage of Flash's advanced interface capabilities, and Flash developers to use ColdFusion's powerful programming tools.

ColdFusion components

ColdFusion components (CFCs) expand on ColdFusion custom tags by enabling developers to create powerful, reusable components that may be called from ColdFusion templates, Macromedia Flash, clients, or as Web services.

XML support

ColdFusion MX enables developers to read, parse, and write XML documents using stan-dard ColdFusion tags. When XML documents are read into ColdFusion MX, they become native ColdFusion objects, which can be treated like any other standard ColdFusion variable.

Improved integration with Dreamweaver MX

ColdFusion developers who use Dreamweaver MX as an interface will find a host of new features including a redesigned code editor and improved debugging tools.

Character-based language support

ColdFusion MX now enables you to build applications that support character-based languages such as Chinese, Japanese, and Korean.

Graphing and charting

ColdFusion MX has vastly improved the performance and features of its graphing and charting functions, allowing developers to quickly and easily create several types of charts, build configurable drill-down data presentations, and integrate graphing and charting functions with Flash MX.


Summary

In this chapter, you saw a condensed list of some of the major new features and enhancements to the Macromedia Studio MX 2004 applications. The Macromedia Studio MX 2004 suite of products is more integrated than ever. Macromedia spent considerable time and resources to ensure that you can move between applications with minimal fuss. The integrated workspace design makes the learning curve of using each application much shorter.


Chapter 3: Designing the Habitat Alert Web Site

Download CD Content

Overview

In writing the Macromedia Studio 2004 MX Bible, we decided to take an approach a bit different from other books. To show how to do work in a real-world environment, we are doing a real site for a nonprofit organization. We encountered obstacles and problems that you won't get to experience, such as saving in multiple folders instead of just one root folder because of the nonlinear fashion of the book. But then we did encounter things that all designers/developers run across — changes requested by the client. For example, the name of the domain was changed twice. This wasn't a problem, because we had a good working relationship with the hosting server, but it did make the writing process for this book a challenge.

This book shows you how easy it is to maintain a site using Dreamweaver and how easy even a name change can be when you've set up your site keeping Dreamweaver's many site-management features in mind from the beginning. A well-planned site saves you from numerous headaches and problems down the line.


The Planning

The first step in planning the site was to get with the client (phone and e-mail) and determine his vision for the site and the kinds of services he wanted to provide. One of the first elements that needed definition was the purpose of the site and what the client wanted to accomplish. We agreed that the main purpose was to educate the public about the preservation of migratory species, sensitive breeding habitats, and endangered ecosystems. Habitat Alert provides a way to educate adults and children. It also accepts donations and sells a few items to help raise money.

The authoring team and client then began to collaborate. After we had a feel for what was needed, ideas were kicked around about how to give the client what he needed. In the end, the main site features included the following components:

  • A mission statement for Habitat Alert

  • An information area to tell users about the current and past fight to save the herons

  • A children's section to entertain and teach children how to participate in the endeavor. Some of the features included puzzles of the herons and informative Flash movies.

  • E-cards that visitors can send to friends as an awareness feature

  • Shopping carts to sell small items to raise funds

  • A section for accepting donations

You will develop many of these sections throughout this book. There are some areas such as a shopping cart that go beyond the focus of this book, but check the Resources in Appendix D for recommendations of other reading materials.


Site Mockup

Mockups, as shown in Figure 3.1, can be done in FreeHand or in Fireworks. FreeHand is great for multiple-page mockups and a great tool for animation storyboards. In this case, the mockups were done in Fireworks, since the majority of graphics were bitmaps and best suited to be worked on in Fireworks. The client was then presented with two different color schemes. The client already knew what design he wanted, so the only remaining decision was the color scheme.

Click To expand
Figure 3.1: The site mockup (design comp) as seen in Fireworks.

A list of categories (such as Photos, Motion, and so on) was developed based on the client's needs, and a flowchart was drawn out. Because the mockup was already done in Fireworks and laid out in Dreamweaver, a flowchart was created using the Files panel in Dreamweaver.

Tip

Flowcharts can be made in Dreamweaver, FreeHand, and Fireworks.

The next step was to decide who would perform what task. One of the first priorities was getting the graphics done. The illustrations in FreeHand needed to be done because most of the site relies on graphics. We decided that the logo and vectors for the e-cards would be done in FreeHand because FreeHand has the most robust vector capabilities. Since FreeHand is designed for print publications, the business cards and brochures would be done here as well (this is covered in Chapter 12). FreeHand was also used to illustrate a few cartoon movies (see Chapters 10 and 11).

It was decided that the e-cards and sound would be done using Flash. Some of the graphics used were prepared in FreeHand, and some were done in Fireworks. The e-cards are then incorporated into a Flash interface, which connects to ColdFusion using Flash Remoting. The site's graphics were all designed, optimized, sliced, and exported using Fireworks. The files also had to be exported into the proper folder structure for the site for use in Dreamweaver to facilitate roundtrip editing. Because of the book, we did, at times, do things several different ways. For instance, the rollovers were created in Dreamweaver, but we show you how to do them in Fireworks as well as how to insert that code directly in a Dreamweaver layout.

Note

The folder structure for your site may depend on how your server is set up. For example, Nexpoint Technologies, which hosts this site, has a separate folder named html that the site needed to go into. For security reasons, the database folder is at the same level as the HTML folder. You'll need to check with your hosting server to see if there are any special requirements before developing your site folder structure.


Testing and Deploying

We tested the site in Dreamweaver, checking for broken links and running various site reports and validations. After this was done, we tested it again on the local server. After everything checked out locally we were ready to upload to their hosting server. Testing a site locally to be sure it performs as expected is an important step to take before making the site available to the general public.

Cross - Reference

Refer to Chapter 44 for the various methods of testing and getting ready to publish a site.

We found Nexpoint (www.nexpoint.net) to be very reasonably priced for the client, and it supported ColdFusion MX. Actually, they were still using ColdFusion 5 on their main servers but agreed to host Habitat Alert on a private server, which is running ColdFusion MX. Don't be afraid to ask your potential host for what you need.


Our Workflow Overview

Listed here is a brief overview of how the workflow was organized.

  • Vector illustrations for the Web site and print media were prepared in FreeHand.

  • All Web site images were prepared in Fireworks, and then laid out, sliced, optimized, and exported to a folder in the sites root folder.

  • The Flash assets were developed, such as the e-cards, banners, and puzzles.

  • Everything was then brought into Dreamweaver and laid out.

  • The dynamic portion of the site was then connected to ColdFusion.

  • The completed site was tested on the local server.

  • The site was then uploaded to the live hosting server and tested again.


Summary

In this chapter, you saw how a team worked together to build a Web site. You went through the planning process, the purpose of the site, and the division of responsibilities, and you were shown a list of the workflow processes that were done.


Part II: Finessing Macromedia FreeHand MX

In This Part

Chapter 4: Introducing Macromedia FreeHand MX
Chapter 5: FreeHand MX Art in a Nutshell
Chapter 6: Drawing with FreeHand MX
Chapter 7: Using FreeHand MX Symbols and Styles
Chapter 8: Understanding FreeHand Typography
Chapter 9: FreeHand and Web Graphics
Chapter 10: Basic FreeHand MX Animation
Chapter 11: FreeHand Animation Techniques
Chapter 12: Outputting FreeHand Documents


Chapter 4: Introducing Macromedia FreeHand MX

Overview

Macromedia FreeHand MX is a powerful drawing program. If you can learn its basics, you can do just about anything in the graphic arts field. In this chapter, you'll get a feel for its power and capabilities, from simple drawing through Web page design and animations.

FreeHand was developed as a vector drawing program and has grown to be arguably the best program on the market for the production of pure vector art. Over the last 15 years or so of continual change and improvement, FreeHand has become an extremely versatile program for anyone in the graphic arts community. Soon after the first edition of the Studio MX Bible was published, Macromedia released FreeHand MX. MX is an extensive upgrade to the FreeHand program; there are nearly 50 new features or improvements.

Nearly anyone will tell you that the grass is always greener on the other side of the fence, and the same is true of FreeHand's and Adobe Illustrator's yards. Both programs contain similar tools and features, and both have tools and features the other program lacks. If you are an experienced Illustrator user and just need a jump-start to functionality, this chapter is a good place for you to start.

Comparisons aside, this book is about Macromedia products, and this chapter is devoted to FreeHand, so let's dig in!


Using FreeHand MX

You can do just about anything in the graphic arts field, from page layout to basic animation. The following sections show some typical uses.

Page layout

FreeHand MX stands alone among drawing programs in its supports for multiple-page documents. You can fill the FreeHand Document window with as many pages of different sizes as you want. The only restriction is the amount of disk space and RAM you have on your machine. Master pages enable you to have common design elements on specific pages to make your layout less time-consuming. Certainly, programs such as Adobe's InDesign and PageMaker, and QuarkXPress are more suited to long-document production, but FreeHand MX can easily handle multi page documents.

The advantage to working on multipage documents in FreeHand MX lies in the amount of artwork that's necessary for the project. If you have a lot of drawings, spot illustrations, logos, or icons in the publication, FreeHand MX is a natural program to choose for the entire undertaking. Because the entire project is in a vector-based program, there's no need to import EPS files. All the drawings can be live vector illustrations. That means a smaller file.

Single projects, such as catalogs or instruction manuals, are easy to create in FreeHand MX, but you can also place all of a company's stationery, including letterhead, envelopes, second sheets, and business cards, in a single document. You can have the logo on one page and use special Lens effects to place live copies of the logo on the other elements. Then you can make changes to the logo, and the changes ripple throughout the whole set of documents.

Of course, you can also use symbols to get the same results. That's one of the beauties of FreeHand MX. Another beauty is the text-handling capabilities within the program. FreeHand MX is a drawing program, not a page-layout program, but there's not much in the way of manipulating text that can't be done in FreeHand MX. Chapter 8 goes into FreeHand MX's text features in detail.

Package design

FreeHand MX makes it easy for you to design packaging. Most box manufacturers require you to draw the lines for the die cuts that form the box after it has been printed. It's an easy task to draw the die lines and then simply duplicate the page. You leave one page as is for the die-cutting process and use the other page to place design elements — photos, blocks of color, and text. Use a separate layer for the die lines on the "art" page so you can place all the elements in their correct location. Hide that layer before printing. Because both pages (die and art) are the same size, the printer registers the die to the printed sheet. With other illustration programs, you would have to contend with two separate documents, and minor changes and adjustments become major stumbling blocks. Through a judicious use of some of the tools available in FreeHand MX, such as master pages and custom pages, you can go a long way in label design.

Technical illustration

Technical illustrations vary in style and complexity, from the line drawings that show you how to set your VCR's clock to colorful exploded or cutaway views of mechanical devices such as a car or airplane. The FreeHand MX toolset is well defined and easy to use and to master. Symbols can be developed for items that must be drawn multiple times. Styles are easy to set up, so you can change a single path or an entire drawing with a single mouse-click. Most graphic programs have layers, and learning to use them should be one of your first priorities. Through layers, you can show or hide various parts of a drawing to make construction of other parts easier.

Maps

Many cartographers around the world use FreeHand MX in the execution of their jobs. FreeHand MX's layers, styles, and custom brushes are a mainstay of map creation. It's not uncommon to have dozens and dozens of layers in a map, and strict organizational skills are a must.

Web graphics

By definition, everything you see on a Web page is graphic, and all those graphics have to start somewhere. There's no better place to start than right here! You can design buttons and page layouts, and construct all the elements you need while you're working in FreeHand MX. This is a really good place to start a Web site's development: by making a storyboard layout for the pages.

Basic animation

Simple animations are easy to do, and you'll catch on to the system very quickly. It's a matter of creating a blend between two objects and assigning the steps of the blend to an animated sequence. You'll learn all about the finer points in Chapter 11. The resulting file can be exported in .SWF format and imported into Flash for further work.


FreeHand MX Workspace

When you first open Macromedia FreeHand MX, you are greeted by the default workspace: the document window, the pasteboard (the white space surrounding the document), and the default panels. The Tools panel is open and placed on the left side; the panels are docked on the right side. Usually, the Answers panel is open. A Welcome window encourages you to learn more about the program through the many sources available, as shown in Figure 4.1. (Note that the panels are not docked on the Macintosh but are free-floating.)

Click To expand
Figure 4.1: The FreeHand MX Workspace in Windows showing the Welcome screen.

The document window and the pasteboard

All of the pages and objects you create are stored in the document and on the pasteboard. In FreeHand MX the pasteboard size has increased to 222 × 222 inches, the equivalent of 520 letter-sized pages. If your computer has enough memory and processing power, you can work with very large documents. The pasteboard is used to store objects and elements that you want available but do not want to include in the document itself. Anything not on the document page itself will not print unless specified through the Print Area option.

To begin working with FreeHand MX, open a document by selecting File ® New or clicking the New File button on the Main toolbar. A blank document based on the default document template opens. You can change the document's parameters using the Document panel — setting a master page, determining the page size and the number of pages, setting the display to Portrait or Landscape, and so on.

To open an already existing file, select File ® Open or click the File Open icon on the Main toolbar. You can also select from the File ® Open Recent Documents submenu. FreeHand MX can open documents created in many other programs, such as earlier versions of FreeHand and Adobe Photoshop and Illustrator. Open the Help file index and go to File ® Import Types to see all of the formats that FreeHand MX opens, and go to File ® Export Formats for to see the formats that FreeHand MX can write.

FreeHand MX toolbars

Seven toolbars are available in FreeHand MX. You control them as a set using the View menu. To see the selected toolbars, check View ® Toolbars. To turn off all toolbars, uncheck View ® Toolbars. Individual toolbars are controlled with Window ® Toolbars (see Figure 4.2). If a toolbar is checked, it is visible.

Figure 4.2: The FreeHand MX Toolbar menu showing the Main toolbar and the Status toolbar checked.

Toolbars can be free-floating or docked along the top, bottom, or sides of the FreeHand window. I like to keep the Tools panel and the Main toolbar floating near the top of the screen (see Figure 4.3).

Click To expand
Figure 4.3: The Tools panel and the Main toolbar floating outside the FreeHand MX window.

Placing the Status toolbar at the bottom of the window works best for my workflow (see Figure 4.4).

Click To expand
Figure 4.4: The Status toolbar docked at the bottom of the window.

Toolbars are easily docked or undocked. Just depress the left mouse button over a blank portion (one not occupied by a button or window) of the bar and drag. After a small movement, a rectangle outline appears, showing the new position (see Figure 4.5).

Click To expand
Figure 4.5: Positioning the Status toolbar at the bottom of the window. Note the outlined rectangle showing where the toolbar will be placed.

The Status toolbar

The bottom of the window (shown in Figure 4.4) contains several informational and navigational aids. You'll find the current magnification percentage or custom view name in the field on the far left. Clicking the down arrow displays a pop-up menu with common choices for magnification. Next to that is a pair of page selector buttons. If you have multiple pages in the document, clicking these buttons takes you to the previous or next page. The next field shows the current page number, as well as a pop-up menu that lets you select a particular page in the document. Selecting any page brings that page to fit completely in the document window.

It's a small thing, really, but the addition of the New Page button in the status bar is welcome. A single click adds a new page to the document. Its icon is a dog-eared document with a plus sign. When you click it, a new page the same size and orientation of the page you're currently working on is created.

The drawing mode is shown in the next field. You can change the way your document looks as you are working by changing the mode in this field. Most drawing is done in the Preview or Keyline modes:

  • Preview shows you the correct line weights and all the colors as they are applied in the document.

  • Keyline reduces everything to thin lines@mdall paths are the same width, and no color is visible. Any photographs or imported graphics are shown as an outlined box with an "x" in it. You cannot print the Keyline view. If you print the document while in this view, you get the actual color and line treatment that you have chosen.

Finally, the Units menu fills out the toolbar. Change the units of measurement for the document by clicking on this menu and making a selection. To make adjustments or simplify your drawing efforts, you can change these units as many times as you like while working.

Two Windows-only features further enhance the Status toolbar. Clicking the Cancel button (after the Units box) cancels an operation. Finally, the Status toolbar displays messages about the task in progress or the menu command highlighted (see Figure 4.4).

The Main Toolbar

The Main toolbar, shown in Figure 4.6, gives one-click access to many of the operating system functions such as New, Open, Save, Print, Copy, Cut, and Paste. It also has a section to control the FreeHand MX panels. Click a panel icon to open the panel; click the icon again to close the panel.

Click To expand
Figure 4.6: The Main toolbar.

The Controller Toolbar

This toolbar (see Figure 4.7) is used to work with Flash movies (SWF files). The Window ® Movie command provides the same options in menu form.

Figure 4.7: The Controller toolbar supports the creation and testing of Flash movies.

When you test a movie, FreeHand MX creates a temporary SWF file and opens a Flash Playback window. The file is played in that window. You control the playback with the Go to Beginning, Go Back One Frame, Play, Go to Next Frame, and Go to End controls. You can choose to export the movie as a SWF file or simply close the Playback window and FreeHand MX will delete the temporary file. This toolbar also gives you one-click access to the Movie preference settings, the Action tool, and the Navigation pop-up menu.

You'll be using this toolbar in Chapter 11.

The Info toolbar

The Info toolbar works on a selected object or objects. The display depends on the object type and current action. Figure 4.8 shows the Info toolbar for two selected objects, of which one point is being moved. The statistics in the bottom window show the change in the point's position, the distance from the starting position, and the angle in which the point is being moved. This is the same information presented in the Status toolbar in Windows systems.

Click To expand
Figure 4.8: The Info toolbar shows information about the selection and about actions taken on the selection.

The Text toolbar

Many of the text functions available in the Object panel for text are duplicated in the Text toolbar (see Figure 4.9) for easy, one-click access.

Click To expand
Figure 4.9: The Text toolbar.

The Xtra Operations toolbar and the Xtras Tools toolbar

Xtras are plug-in modules that extend the capabilities of FreeHand MX. Both Macromedia and third-party developers build Xtras. The Xtras on these two toolbars are delivered with FreeHand MX and are standard facilities of the program. You can, of course, customize them as you would any other toolbar. In addition, you can install more Xtras, obtainable from the Macromedia Web site and from third-party developers. To install an Xtra, simply move the Xtra file module into the FreeHand MX Xtras folder and restart FreeHand MX. You can remove an unwanted Xtra by deleting it from the folder.

The standard Xtras are grouped into two toolbars by similar features. The Xtra Operations toolbar (see Figure 4.10) includes the Xtras that manipulate paths. (Many of these also appear in the Tools panel for ease of access.)

Click To expand
Figure 4.10: In the Xtra Operations toolbar, similar features are grouped together.

The Xtra Tools toolbar (see Figure 4.11) includes Xtras that perform actions on a FreeHand MX object. These are also included in the Tools panel (see Chapter 5).

Click To expand
Figure 4.11: The Xtra Tools toolbar extends FreeHand's capabilities.

The Envelope toolbar

The Envelope toolbar has tools for creating envelopes that transform objects into different shapes. It is especially useful for building perspective into an object. The envelope type is chosen from a pop-up menu. Drawings showing the various types are displayed as you move your cursor through the menu. The selections menu in Figure 4.12 is covering two other icons: the Add as Preset and Remove Preset selections. There is more on the Envelope toolbar in Chapter 10.

Click To expand
Figure 4.12: The Envelope toolbar.

FreeHand MX panels

Much of the work done in Macromedia FreeHand is controlled with information found or entered in the program's panels. You'll notice how intuitive the engineers have made the program as you come to work more and more with Macromedia FreeHand MX. The panels contain everything you need to adjust, alter, or specify every part of your document. The differences between Windows and Macintosh panels are mostly cosmetic. By default, in Windows the panels are docked, and on the Mac the panels float. If you are comfortable working on either platform, you won't be surprised by the way these panels look or feel.

Panel groups (see Figure 4.13) consist of one or more panels that can be customized to fit your particular work style. For instance, the Properties panel group contains the Object and Document panels, but you could easily remove the Object panel and have it floating on the desktop at all times. You control the panels as a set using the View menu. To see the panels and panel groups, check View ® Panels. To turn off all panels, uncheck View ® Panels. Individual panels and panel groups are controlled with the Window menu. If a panel is checked, it is visible.

Figure 4.13: The Panel group header.

You can dock and undock panels and panel groups and group together or set apart various panels. To group a panel with another panel group, click the Panel Options (see Figure 4.14) in the top right corner of the panel and select the group you want. At the bottom of that menu, you can choose New Panel Group, which removes the selected panel from a group and makes a panel group of its own. To move a Panel Group, click and hold the Gripper and drag the panel or group to a new position. A thick gray bar appears between the docked panels, showing where the panel group will be positioned in the docking area, or you can drag the panel group completely out of the docking area to a floating position.

Figure 4.14: The Panel group Options pop-up menu with the Group option selected.
Tip

You must use the Gripper to dock and undock panel groups. Clicking and dragging the Active Title Bar will have no effect.

Properties panel group

The Properties panel group separates FreeHand MX from any previous version. Within it, you'll find the Object and Document panels. Document is no different than in previous FreeHand versions, but the Object panel gives you a whole new way to work.

Object panel

The Object panel replaces the Object, Stroke, Fill, and Text inspectors. At the top of the panel you'll see the Add Stroke, Add Fill, and Add Effect buttons (see Figure 4.15). On the right end of the panel are two trash can icons. To utilize them, you must select an attribute in the attribute tree. Clicking the Remove Branch button deletes everything on the selected branch. This could be fill color, Gaussian blur, and a drop shadow, leaving a sketched, six-point Rhodamine Red stroke (if that's how you had it set up). If you wanted to remove only the drop shadow, you would select that item in the tree and click the Remove Item button. Everything else would remain.

Figure 4.15: The Object panel with the Stroke item selected.

If nothing is selected in the document, Normal will be the top entry in the Object panel. Directly beneath that is the default stroke or fill. Whatever you draw next reflects these attributes. If you want to change the stroke attributes, click the Stroke entry in the attribute tree. That brings up everything to do with strokes: type, color, width, cap, and so on (see Figure 4.15). Anything you select here shows up in the attribute tree. If your object lacks a fill, click the Add Fill button, and the Stroke attributes go away to make room for the Fills attributes. Again, your selections appear in the tree, including a color swatch. Double-clicking the swatch alternately opens the Mixer panel or the Swatches panel so you can change colors quickly.

The bottom half of the Object panel changes according to the tool or object that you select. If a stroke is selected (see Figure 4.15), the panel shows the stroke color, width, end cap, and join selections. The stroke type can be dashed, and the stroke can begin or end with arrowheads.

When you select a regular geometric shape, such as a rectangle or ellipse, the Object panel supplies the dimensions of the object's bounding box, and the location of the x and y coordinates of the bottom-left corner of the object's bounding box (see Figure 4.16).

Figure 4.16: The Object panel with a rectangle object selected.

If you select a text block, the panel tells you the dimensions of the text block and the block's top left corner x and y coordinates. If the text is to be inset in the text block, the inset value can be input in this panel (see Figure 4.17).

Figure 4.17: The Object panel with a text block selected.

The functions of the Text inspector are now in the Object panel, available when text is selected (see Figure 4.18).

Figure 4.18: The Object panel with text selected.
Cross - Reference

Paths, including strokes and fills, are covered in Chapter 6. More information about using text in FreeHand MX is in Chapter 8.

When a bitmap is selected, the Object panel tells you the x and y coordinates of the bottom left corner of an imported bitmap, as well as its dimensions (see Figure 4.19). The file type (TIFF, JPEG, EPS) and its color mode (CMYK, RGB) are also displayed. A Link button enables you to replace the file with another graphic, or to get additional information from the Links panel. A pair of scale windows shows the amount of reduction or enlargement, and changing these numbers changes the physical size of the graphic on the page, although the file size remains the same. At the bottom right of the Object panel is a button that will open Fireworks for bitmap editing.

Figure 4.19: The Object panel with a bitmap selected.
Document panel

You navigate your entire document from the Document inspector (see Figure 4.20). You can add, duplicate, or remove pages using the Document Options pop-up menu.

Click To expand
Figure 4.20: The Document panel.

Master pages can be developed or selected here, and child pages can be emancipated — that is, set free from their master page (see Figure 4.21).

Figure 4.21: The Document panel options.

You can change the size of individual pages and adjust the printer resolution and amount of bleed for each page. A thumbnail shows the location of all the pages in the document. Pages can be moved around on the pasteboard using this small layout window. Portrait or landscape view orientation is available with a simple button click. New pages can be selected at several standard sizes, such as letter, tabloid, legal, A3, A4, A5, B4, B5, Web (550 × 400 pixels), or Custom.

If you select Custom, you must enter width and height numbers in text entry fields. The units of measurement set in the Status toolbar are utilized in the Custom page size fields. If you are looking at pixels and want decimal inches, change the units of measurement. FreeHand MX converts the measurements automatically. You can also enter numbers such as 1.0 in (for inches) or 2p6 (for picas).

Tip

Use the new Add Page icon on the Status toolbar to easily add pages to your document.

Assets panel group

The Assets panel group consists of the Styles, Swatches, and Library panels by default.

Styles panel

If you're a power user and utilize styles, you're going to fall in love with the way you create styles in FreeHand MX. It's sort of a mix between the way it used to be done and symbol making. Graphic styles can include any and all of the following: Stroke, Fill, Object Halftone, and Effect. The Styles panel (see Figure 4.22) is located within the Assets panel by default. You can move it out of the panel. The panel can be viewed in three different modes: Compact List view, Large List view, and Previews Only. Compact List view is basically the old Styles view — a small icon and the name of the style. It's great if you work with many styles. The Large List view has icons about four times larger than the Compact view, and also has the style name. Previews Only is a grid of large icons without names. The icons show stroke and fill for graphic objects. The larger two modes show "Aa" in the font you've chosen for the style.

Click To expand
Figure 4.22: The Styles panel can save you hours of needless work. Notice the Options pop-up menu.
Cross - Reference

There is more about styles in Chapter 7.

Swatches panel

In the Swatches panel (see Figure 4.23) you can build a library of colors to use throughout a document. You can make colors in the Mixer or Tints panels, or choose colors from libraries in the Options pop-up menu, which you find by clicking the triangle in the upper right corner of the panel. You can import color libraries from other sources, or export your own swatch library for use in other FreeHand documents or even to other computers.

Click To expand
Figure 4.23: The Swatches panel makes selecting stroke and fill colors easy. Part of the Options pop-up menu is on the right.

The Swatches panel enables you to apply color in a couple different ways. At the top of the panel there are three selectors and an arrow. The arrow is used to add color to the Swatches panel. Simply drag a color onto the arrow and let go. The color is added to the list. The three selectors are, from left to right, the Fill color, the Stroke color, and both Stroke and Fill color. Choose any one of the three selectors by clicking it. Then click a color swatch name in the list. If you select the Fill selector, the object's fill becomes the color you clicked. If you choose the Stroke color, only the stroke changes to the new color. When you click the Both selector, the Fill and Stroke choices gain the color you selected. If the fill and stroke are different colors, there is a horizontal dash in the middle of an outlined box.

Changing the color of a selected object provides more methods of working. With an object selected, you can drag a color to the object as previously described, or you can drag the color swatch onto the appropriate selector at the top of the Swatches panel. Depending on which selector is active, double-clicking on the color's name effects a color change.

It makes no difference which tool you are in when it comes to applying colors through the Swatches panel. All tools convert to an open arrow tool when they pass onto the panel.

Library panel

Master pages and symbols that you want to reuse are stored in the Library and accessed with the Library panel (see Figure 4.24). Using this panel, you can create a symbol from any object, text, or group, delete a symbol, group associated symbols together, and import and export symbols and master pages.

Click To expand
Figure 4.24: Using the Library can save you both time and file size.

Symbols are efficiency tools. Not only can you avoid redrawing the same object multiple times, but using a symbol for repetitive elements reduces file size.

Cross - Reference

Symbols are discussed in Chapter 7.

Mixer and Tints panel group

Color Mixer panel

You use the Color Mixer panel (see Figure 4.25) to develop colors through various color modes and methods. There are three primary mixing methods:

Click To expand
Figure 4.25: The Color Mixer panel and the color mode icons for both operating systems.

  • CMYK — Cyan, magenta, yellow, and black inks are used in commercial printing processes to achieve an approximation of full color on paper.

  • RGB — Red, green, and blue light combine to form the colors you see on your monitor. This color model is useful for Web-based projects.

  • HSL — Hue, saturation, and lightness in various combinations give a fairly broad color gamut for colors to be viewed on the monitor.

And, depending on your computer platform, you have these additional options:

  • System Color Picker — This is the Windows basic 48-color set; other colors can be added.

  • Apple Color Picker — Macintosh users are treated to a larger scale version of CMYK, HSL, and RGB color mixers, plus HSV (hue, saturation, value), HTML, and an array of crayon colors.

Move the sliders, circles, and other devices, or input values in text input fields, to develop your color. The Color box at the bottom of the Color Mixer panel has two parts. The well on the left is the last mixed color, and on the right is the color you are mixing. You can also drag a color from any stroke or fill into the Color box. This changes both wells to that color.

You can add your color to the Swatches panel by clicking the Add to Swatches button at the bottom left of the panel. This action opens a dialog box that has the color breakdown in its respective color mode (such as 35r, 126g, 16b, or 82c, 18m, 97y, 3k), but you can type any name you want the color to have. Alternately, you can drag a block of the Color box onto the Swatches panel and release the mouse. The color is added to the panel using its default color-breakdown name.

Tints panel

This panel literally pales in comparison to the Color Mixer panel. It shows tints of the current color. (A tint is a color mixed with white.) You can choose from nine tints — from 10 percent to 90 percent — of the color. You can also enter a specific percentage of color or drag the slider until you see the tint you want to use.

After you have mixed a color in the Color Mixer panel, click the Tints panel (see Figure 4.26). The color is automatically transferred from the Color Mixer panel to the Tints panel. The left side of the Color box is the color you have just mixed at 100 percent intensity; the right side shows the selected tint. A pop-up menu accessed from the bar at the top of the panel enables you to choose any color from the Swatches panel. Or you can use the Eyedropper tool to drag a color from the document — or simply drag a color from the Swatches panel — into the color well. The chosen tint can be added to the Swatches panel using the same methods as the Color Mixer panel. Tints are treated as if they were any other kind of color and can be applied to strokes, solid fills, or gradient fills. In the Swatches panel, a tint is named by using the tint percentage, such as 28% 137r 143g 62b.

Click To expand
Figure 4.26: The Tints panel showing the pop-up Swatches menu.

Layers panel

One of the busier panels in FreeHand MX is the Layers panel (see Figure 4.27). That's because an efficient illustrator builds the drawing on several layers to make selection of particular objects or groups in the drawing an easier process. The Layers panel lists all layers in the document. When you open a new document, the Layers panel has a Foreground layer, a Guides layer, and a Background layer. The default Highlight color is cyan.

Click To expand
Figure 4.27: The Layers panel showing the Options pop-up menu.
Tip

The Guides layer is, by default, at the bottom of the layer stack, which means that objects on higher layers overlay the guides. To keep the guides visible at all times, move this layer to the top of the stack as shown in Figure 4.27.

There are four icons preceding the name of each layer. The first icon is a check mark that indicates that a layer is visible. Clicking the check mark makes the check disappear, and the layer becomes hidden. The next icon is a small dark circle. Clicking it makes the circle hollow with a dot in the center, indicating that the layer is in Keyline view.

Next is a padlock that enables you to select and draw on a layer if the lock is open. When you close or lock the layer by clicking on the padlock, the layer cannot be moved or modified in any way. You cannot select objects on a locked layer. If you copy everything on a page (to paste it elsewhere), locked layers aren't copied.

The last icon is a colored square. Use this square to indicate which layer a selected object is on. Drag a color from the Mixer or Swatches panel onto the layer's color square. Anything on that layer reflects the color you've chosen when it is selected. This step makes it easy to navigate through a multilayered drawing.

There is a horizontal bar midway down the Layers panel. This bar demarks the foreground from the background of a document. Everything above the bar prints, and nothing below the bar prints. This is handy when you are tracing a bitmap, for example. But if you are developing an animation, everything below the bar appears in every frame of your movie. The layers below the bar appear grayed-out on the monitor.

The Layer panel Options pop-up menu helps in layer management. Use it to add a layer, duplicate an existing layer, or remove a layer. Combine two or more layers using Merge Selected Layers, or collapse the entire drawing with Merge Foreground. (Layers on the background aren't really part of the drawing.) The All On and All Off choices affect the visibility of all layers at once.

It's not always easy to drag an object from one layer to another. The Move Objects to Current Layer choice simplifies the process. Select your objects, select a layer, open the Options pop-up menu, and click this choice.

Tip

You can move a layer from the background to the foreground by clicking and dragging it. Do this if you want to print a background layer or if you want to include it in an exported file.

Align and Transform panel group

The functions of the Align and Transform panels haven't changed in FreeHand MX, although they have changed cosmetically. This panel group gives you a lot of control over the exact size and placement of objects.

Align panel

The ability to align objects makes many design steps easy. For example, you've designed five buttons that you want to space evenly across the top of the page. In addition, you want the buttons to all be the same distance from the top of the page. That's what the Align panel, shown in Figure 4.28, does — aligns and/or distributes objects or points relative to other objects, other points, or the current page. Aligning moves objects so that they lie on a straight line along one edge or their centers. Distributing spaces objects evenly by one edge or their centers or by evenly spacing the distance between them.

Click To expand
Figure 4.28: The Align panel and the pop-up menu showing the vertical alignment and distribution choices.

You aren't limited to working with objects. You can select individual points in an object. Points are aligned or distributed by their position because they don't have an edge.

Tip

You can lock an object so that it does not move during alignment. Other objects will align relative to the locked one.

Transform panel

The Transform panel has two functions: to apply precise transformations to an object or objects and to display information on objects before and after transformation. Objects can be moved, rotated, scaled, skewed, or reflected. The Transform panel displays the move distance, rotation angle, scale percentage, skew percentage, and reflection axis, respectively. Figure 4.29 shows the five versions of the Transform panel. You can transform contents and fills by checking or unchecking the appropriate check box. When scaling, you can also select the strokes.

Click To expand
Figure 4.29: The five versions of the Transform panel.

All transformations except Move work from a center point. Frequently, this is the actual center of the object, and that is the default that is entered in the Center: x and y coordinates when the object is selected. You can change the coordinates to alter how the transformation works by typing new coordinates in the text boxes or by dragging the center point to a new location. To access the center point, double-click the selected object to open the bounding box, shown in Figure 4.30.

Figure 4.30: The Transformation bounding box.
Tip

To reset the panel to the original values before a transformation takes place, simply deselect the object and select it again. After you have performed a transformation, you have to undo it (Edit ® Undo) first.

Navigation panel

The look of the Navigation panel has changed in FreeHand MX (see Figure 4.31), but its functions remain the same. It has a number of different but specialized uses. You can use it to give a name to an object. This is necessary when you are developing objects such as buttons for the Web, but it may also be used to keep track of your objects. You can also add URL links to objects and text in a Web page.

Figure 4.31: The Navigation panel.

A useful function is the ability to attach a note to an object to document how it was developed, for example. If you are using FreeHand MX to export a document to a PDF file, the names and notes can be exported as annotations.

Cross - Reference

Find out more about using FreeHand MX for Web development in Chapter 9.

Halftones panel

The Halftones panel, shown in Figure 4.32, is for a very specific use — using a PostScript printer to print selected objects at halftone settings that differ from those applied to the document as a whole. You can override object-level halftone settings when choosing separations options in the Print Setup dialog box.

Figure 4.32: The Halftones panel.

Answers panel

All the Studio MX applications now have an Answers panel (see Figure 4.33) as standard equipment. They snap, dock, and zip with each other and are linked to Macromedia's Web site for the latest information on the program. Basically, there's nothing on your machine — it's all on the Web — so an Internet connection is a necessity.

Figure 4.33: The Answers panel.


Interaction between MX Programs

Macromedia comes close to having the look and feel of one large program with the Studio MX. If you're comfortable in one MX program, you won't feel lost in another because the user interface is so similar. Naturally, each program has its own purpose, and the tools and menus are different. But the common user interface is easy to get around in.

Fireworks PNG Importer

Fireworks MX Fireworks MX 2004 is now closely integrated with FreeHand MX, providing the same cross-program functionality that FreeHand and Flash enjoy. You can edit quickly a bitmap that's been imported to FreeHand by clicking the new Fireworks jump button at the bottom of the Object panel. When you save a Fireworks PNG document and import it into FreeHand, you can edit it with all the vector tools that FreeHand offers and modify the effects that Fireworks has applied. Unfortunately, any texture effects you applied from Fireworks styles are lost in the translation. You have a basic fill instead.

Launch/edit Flash

Flash MX If you have used original Flash file to create an SWF file that you've imported into FreeHand, a quick edit mode is available. Click the imported SWF file in the FreeHand document; then go to the Object panel. At the bottom of the panel you'll see the new Flash jump button. Click this button and Flash opens. You are prompted to search for the original FLA file. After the document opens in Flash, the top of the window says Edit From FreeHand. Do any editing necessary, and click the Done button. You return to FreeHand with the newly edited movie in place, even if you rename the movie in Flash.


Summary

In this chapter, you were introduced to some of the new features in FreeHand MX. You learned the makeup of a Macromedia FreeHand document, including the panels that control the attributes of elements in the document. You found out how useful custom keyboard shortcuts can be. Also, you found out about the ease of integration between FreeHand MX and the other MX products.


Chapter 5: FreeHand MX Art in a Nutshell

This chapter continues the introduction to the capabilities of FreeHand MX. You'll see how preferences and keyboard shortcuts can make your working methods more efficient. Then you'll learn about the two different kinds of art in FreeHand MX — vectors and bitmaps — and how to use the Tools panel with each.

Customizing Your Workspace

Everyone works differently, and in FreeHand MX you can make many changes to accommodate the way you work to help improve your workflow. There are a lot of preferences you can set; you can customize your keyboard shortcuts and even customize your toolbars.

FreeHand MX preferences

The Preferences panel lets you customize many elements of the workspace, such as how many undo operations are supported, how various text elements work, import and export parameters, and so on. Figure 5.1 shows the Preferences panel in the Windows environment. Each preference category is indicated by a tab. (On the Macintosh, the preference categories appear in a vertical menu on the left side.)

Click To expand
Figure 5.1: The FreeHand MX Preferences with the General tab selected.

An entire chapter could be written about the various preferences and the ways they affect your use of FreeHand MX. Table 5-1 highlights the main customizations. You are encouraged to try out various combinations and to check the FreeHand MX help files for details.

To open the Preferences options, select Edit ® Preferences or press Ctrl/Command+U.

Table 5-1: FreeHand MX Preferences
Category | Option | Function | Comment
General | Undo's: | Defines the number of undo operations to be retained for each document. | The default is 10. The maximum depends on how much memory is available. Fifty generally works well.
 | Pick Distance | Defines how close to an object the cursor must be to select the object. | Enter the number of pixels. The default is 3 and is a good choice.
 | Snap Distance | Determines the distance between an object and the Snap to point or object. | Enter the number of pixels. The default is 3 and is a good choice.
 | Highlight Selected Paths | Causes a selected path to appear in a different color. | Default is on. This is a keeper.
 | Smaller Handles | Determines the display of the control handles for paths and points |
 | Show Solid Points | Changes the default display of selected points. | The default is that selected points are hollow squares and unselected points are solid squares. Check this option to use the reverse.
 | Remember Layer Info | Retains information about a layer such as blending options, and so on when moving the layer between documents It also retains FreeHand layers when exporting to Photoshop. | The default is on (checked).
 | Smart Cursors | The cursor is called smart because its appearance changes according to the context as it moves | Default is on. The Pen tool with smart cursor set to delete a point: and to add a point: The Pen tool with smart cursors turned off.
Text | Smart Quotes | Automatically change straight quotation marks to smart, (or typographer's) quotes as you type | Default is on.
 | Build Text Styles Based On: | Specifies how the attributes in a selection are used to build a style. | Choose either: First selected paragraph or Shared attributes.
 | Dragging a Text Style Changes: | How much of the text is affected when you drag and drop a style on the container. | Choose either: Single paragraph or Entire text container.
Document | Changing View Sets the Active Page | When this option is selected, you can activate a new page by scrolling through the Document window. The active page is high- lighted in the Document panel. |
 | Always Review Unsaved Documents upon Exit (Quit) | Displays an Alert box for each unsaved document whenever you Exit (Windows) or Quit (Macintosh) FreeHand MX. |
Colors | Guide Color |  | Default is cyan.
 | Grid Color |  | Default is red.
 | Swatches Show |  | Container color or Text color.
Panels | Show ToolTips | ToolTips appear if you hover the cursor over the icon for a second or two | Default is on.
 | Clicking on a Layer Name Moves Selected Objects | You can moving objects between layers by select the object(s) and then clicking the layer's name. | Default is on. If you turn this off, you will have to use the menus to move an object from one layer to another.
 | Label Panel Tabs With | Choose Text, Icon or Text and Icon from the drop-down menu | Default is Text.

Customizing shortcuts

In addition to setting up the panels and preferences to reflect your work environment, FreeHand MX lets you set up customized shortcuts and toolbars.

To open the Windows Customize dialog box, use Edit ® Keyboard Shortcuts. This box with the Shortcuts tab selected is shown in Figure 5.2. (On the Macintosh, select Edit ® Customize Shortcuts.)

Click To expand
Figure 5.2: The Customize dialog box with the Shortcuts tab selected.

There are a number of different ways to set up new shortcuts or change current ones. Using the Keyboard shortcuts setting drop-down menu, you can choose the group that best suits your needs (see Figure 5.2). Also, you can modify an existing set or copy a set of shortcuts from another computer. Develop a shortcut for a specific command by selecting the command from the Commands menu on the left and assigning a new shortcut, as seen in Figure 5.3. If a command already has a shortcut, it is displayed in the Current Shortcut Keys box, but you can override the assigned shortcut to build your own.

Click To expand
Figure 5.3: Assigning a new shortcut to Font Style BoldItalic in the Customize Shortcuts dialog box.

The Print button on the Customize Shortcuts dialog box is a useful tool. Clicking it prints a custom keyboard shortcut card. To save the shortcuts in a file that can be edited in your word processor, select Save As, give the file a name in the File Name text box, and click Save.

For more detailed descriptions or other options on setting up customized shortcuts, refer to the "Customizing Your Environment" section of the Using FreeHand MX manual.

Customizing toolbars

The buttons on the individual toolbars can be added by clicking a button from the Customize Toolbars dialog box (see Figure 5.4) and dragging it to the toolbar where you want it. To choose a button, first select a category in the Commands menu on the left side. The buttons displayed on the right are context-sensitive, changing with the Category selection.

Click To expand
Figure 5.4: The Customize Toolbars dialog box showing the Hide Panels icon selected.

A button can be dragged to any open toolbar. A hollow box indicates where the button will be placed. When the button is where you want it, as shown in Figure 5.5, release the mouse button.

Click To expand
Figure 5.5: The Hide All Panels button about to be inserted into the Main toolbar.

When the Customize Toolbars window is active, you can just click and drag a button off the toolbar to delete it.

Tip

This method also works with the Tools panel.

The Using FreeHand MX manual has more examples of manipulating toolbars in the "Customizing Your Environment" section.


FreeHand MX Art

Computer artwork consists of two main types of images: vectors and bitmaps (also known as raster images). Macromedia FreeHand MX and Adobe Illustrator are examples of vector drawing programs. Adobe Photoshop is bitmap or raster imaging program.

Understanding vectors and bitmaps

The basic element in FreeHand MX is a path connecting two points. This path is a vector, the product of a mathematical formula that calculates the curve of a path between two anchor points. This formula uses the x and y coordinates and the angle and length of the control handles of each point to determine the amount or degree of the curve. A vector path is resolution-independent, meaning that no matter how much a path is enlarged or reduced, the visual sharpness of the curve remains constant; the file size also remains the same. A vector drawing developed as a 1-square-inch document is the same file size (20K) at that size or enlarged to a 3-foot square.

A bitmap, or raster, image of a grid of cells is called pixels. Each pixel has a specific color and location, and if you are editing a bitmap image, you are actually editing individual pixels by changing their color. Bitmap images are resolution-dependent, meaning that they have a finite number of pixels that create the image. If the image is enlarged, the image gets larger by definition, but so do the pixels, and the image becomes blocky or "gets the jaggies" (see Figure 5.6). The small graphic on the left is the original drawing. It was exported to Photoshop and printed at the same size to the right of the vector drawing. Then the drawings were enlarged to show what happens to pixels when an image is expanded. The black line is easily five times wider than the white line, but when you reduce it to a finite number of pixels per inch, the bitmap uses barely twice as many pixels to portray the black line as it does the white line.

Click To expand
Figure 5.6: Notice the differences between vector and bitmapped artwork at various enlargements.

In contrast to a vector image, a 300 dpi (dots per inch resolution), 1-inch square RGB drawing is 264K, and the same drawing at 3 feet would be a whopping 333.7MB! If you simply enlarge the 1-inch square to 3 feet, each pixel would be approximately an eighth of an inch square, creating a pretty blocky image.

This is not to say that vectors are good and bitmaps are bad. They are used side by side in many projects. Vectors are often used in preliminary work for a project that will be finalized in a bitmap program, and the opposite is also true. To complicate matters a little, Macromedia has added some raster effects to FreeHand MX, and Adobe has added some vector capabilities to Photoshop, so it's possible to make a vector-based drawing, add subtle shading and color mixing, and rasterize the final drawing.

FreeHand MX tools panel

You use several tools to draw with in FreeHand MX. No single tool is more valuable than another tool; instead, each tool does a specific type of work. The Pen or Bezigon tools can make straight lines, but if all you're going to do is draw straight lines, the Line tool is a better choice for the job. When you work on a drawing or layout in FreeHand MX, you will use many tools, and the more you learn about each tool, the easier your work will be. The default Tools panel (see Figure 5.7) is broken into four groups — Tools, View, Colors, and Snap. You can change the orientation of the Tools panel to a single or double horizontal or vertical row of tools and place it anywhere on your monitor by dragging it. It rides above the entire document, but beneath the top menu bar.

Click To expand
Figure 5.7: The Tools panel in vertical orientation.

Some tools have a mark in the upper-right corner of their icon (see Figure 5.8). Double-click these tools to bring up a dialog box to modify settings for that particular tool. A tool has multiple choices when there is a small arrow in the lower-right corner.

Figure 5.8: The Pen tool showing the expander arrows.

Selection tools

Selection is the name of the game. Arrow selection tools select any object or block of text that is not locked or on a locked layer. By using specific points on an object or bounding box, you can change the size or shape of most objects with these tools. Keyboard shortcuts are in parentheses after the tool's name. If there is no shortcut, you can usually add one in the Edit ® Keyboard Shortcut menu.

The Pointer tool (V or 0 [zero])

The most often-used selection tool is the solid or black arrow, called the Pointer. If an object is filled, you can select the object by clicking anywhere within its boundaries. If it is not filled, you must click the Pointer directly on the stroke to select it. The smaller the number (in pixels) set in Pick Distance, the closer you must be to the object before you can select it. (You can change the pick distance in the General Category of the Preferences panel.)

If you need to select an odd-shaped object or many objects at once, click and drag a marquee (use the pointer to drag a selection) around the objects or points. Virtually everything enclosed within the marquee will be selected. To select an entire group, object, or block of text by marquee selecting, you must completely encompass the object.

You can change any tool into the Pointer tool when necessary by holding down the Ctrl/Command key. Release the Ctrl/Command key to revert to the original tool. Clicking the Pointer tool anywhere on the page or pasteboard (not on an object) deselects anything that is selected.

Note

Double-click the Pointer tool in the Toolbox to open the Options window (see Figure 5.9). If you check Contact Sensitive, you don't have to surround an entire object to select it. Just dragging the cursor over a section selects that object. (The Option window is available for the Subselect and Lasso tools as well.)

Figure 5.9: The Pointer Tool options dialog box.
On the CD-ROM

On the CD in the Movies folder is a movie named Contact Sensitive.mov.

The Subselection tool (A or 1)

This open or hollow arrow is called the Subselect tool. The most common use is to select only the object, path, or point you click, even if it is contained in a group. Use this tool to select objects that are in back of other objects, either on the same or different layers. (If you have the Pointer tool selected, you can achieve the same effect by holding down the Alt/Option key.) The Subselection tool can also be used to modify the shape of a path by selecting a segment of the path between two points and dragging the path. The control handles of the points on each side of the segment move toward or away from the center of the segment as you drag the cursor.

Access the Subselection tool options by double-clicking the button. The options are the same as those for the Pointer tool.

The Page tool (D)

This tool selects an entire page with a single mouse click. The page can then be moved around the pasteboard to align with other pages. If you click Delete, the page is deleted; you receive a warning that there are elements on the page, and you must decide to delete the objects or cancel. When you have Snap to Grid enabled (in the View menu), you can align multiple pages. You can quickly duplicate a page or range of pages by selecting them with the Page tool, holding down the Alt/Option key, and dragging the duplicate pages to a new location.

The Lasso tool (L)

Use the Lasso tool to build a free-form selection marquee. This is especially useful in selecting a few points in an object. It's often easier than the Shift+select with the Sub-selection tool. (The Pointer and the Subselection tools can only make rectangular marquees.)

The Output Area tool (J)

Click To expand Previous versions of FreeHand had a Print Area tool. This feature has been upgraded and is now called the Output Area tool. Selecting the tool changes the cursor by adding a dashed-line rectangle to the Pointer tool. Drag a selection on the document to print only that area. The Output Area tool is covered in Chapter 12.

The Eyedropper tool (no keyboard shortcut available)

In its basic sense, the Eyedropper tool is used to sample the color in objects. Click the Eyedropper on a stroke or fill in an object and drag the color onto an object you want to have the same color. In addition, you can click the Eyedropper in the color well, the Swatches panel, or the Mixer or Tints panels, and then drag the little box onto whatever you want colored.

The Eyedropper can also be used to choose a color within a gradient. This is extremely useful if you're trying to make another object blend seamlessly into a gradient.

Drawing tools

The six categories of drawing tools in FreeHand MX are the Pen, Text, Line, Pencil, Ellipse, and Rectangle. All except the Text tool have fly-out menus with multiple choices. The Pen tool and the Bezigon tool (on the fly-out) create paths by the placement of individual points; the others create objects. Again, default keyboard shortcuts are in parentheses, but you can change them. This section introduces the drawing tools.

Cross - Reference

Many of the drawing tools are covered in more detail in Chapter 6.

The Pen tool (P)

The new and improved features for the Pen and Bezigon tools include the smart cursor to tell you what the tools are up to at a particular time and the Pen Preview. Double-click the Pen Tool icon in the Toolbar to find Pen Preview. When it's selected, a blue path follows the cursor from the last point placed, in a rubber band fashion, showing you how the path will look if you click the mouse to add a point.

The smart cursor adds a small indicator at the bottom right of the tools to show what is going to happen. For example, when you have the Pen tool selected and it's not on a selected path, the smart cursor shows an "X," indicating that you will be starting a new path when you place the next point. After the first point, the cursor is the normal pen point until you approach the first point to close the path. At that time, the cursor gains a small open circle.

In the Preferences panel, you can turn the smart cursor on and off or change the appearance of points in your documents. The FreeHand default point is a solid square, and a selected point is an open square. If you select the Show Solid Points option, points on a selected path are shown as open squares, and the selected point is a solid square. The points act exactly the same; they just appear differently. Try drawing with each of the preferences to see which works best for you.

The Bezigon tool (B, 8)

What makes the Bezigon different than the Pen tool is the placement of the points as you draw. The Bezigon tool is designed to draw straight paths between points. If you want to make a curve point, hold down Alt/Option as you click. The Bezigon tool places a point with two control handles installed, but you can't adjust the handles until you change tools.

Note

The only way to get a handle on the way these drawing tools work is to use them. After a short learning curve, you'll discover that you know just how much to click and drag to achieve the curve you're after. Believe me, it's well worth the time to master the Pen and Bezigon tools by drawing intricate objects.

The Text tool (T)

The Text tool isn't really a drawing tool, but this is where it is placed in the Toolbar. The Text tool works only with text. You simply clicking the Text tool where you want the text to appear and then start typing. Or you can drag a text block of a specific size and shape, just as you would if you were drawing a rectangle. As you begin to type, your words fill the text block, depending on the various attributes and preferences you have set for the program.

Cross - Reference

For further information on setting attributes and preferences, see Chapter 8, where type is covered in detail.

The Line tool (N)

The Line tool does only one thing, but it does it very well. It places a starting point and an end point with a straight path between the points.

The Arc tool

The Arc tool does just what it says: it draws arcs. To get to the Arc tool, click and hold the Line tool and wait for the menu to pop up. Then click the Arc tool.

There are three options: Create Open Arc, Create Flipped Arc, or Create Concave Arc, as seen in Figure 5.10. The arc direction depends on the direction in which you are dragging the cursor. Hold down the Alt key while dragging to draw the arc in the opposite direction.

Figure 5.10: The three kinds of arcs.

The Spiral tool

This tool is not as useful as the other tools that have been discussed — unless you need a spiral, Then it's invaluable. Double-click the Spiral Tool icon to bring up its dialog box. You can choose between two types of spirals. The regular spiral (left icon button) provides an input field so that you can employ the exact number of lines or rings in the spiral. The proportional spiral (right icon button) enables you to determine the amount of growth between lines or rings in the spiral. Both types of spirals allow you to draw the spiral from the Center, the Edge, or the Corner of its bounding box. You can also choose from clockwise or counterclockwise spirals. See Figure 5.11 for a comparison of the two spiral types and their results.

Click To expand
Figure 5.11: Spiral dialog boxes differ according to the type of spiral that you select.

In Figure 5.12, you can see an effect that would be tough to accomplish without the different spiral types. With the specifications shown in Figure 5.11, two spirals were drawn from the same center point. Start with a horizontal and vertical set of guidelines; drag the first spiral (settings as shown in the left half of Figure 5.11) from the center line out to the right, while holding down the Shift key. Then bring up the Spiral dialog box again and change the specs to match the right side of Figure 5.11. Click the insertion point at the guideline intersection again (note that when the spiral is drawn, the first point is not at that intersection), and press Shift and drag the spiral to the right until the end points meet.

Click To expand
Figure 5.12: The development of a spiral.

Select both spirals, and choose Modify ® Join. In the Object panel, be sure that the path is closed. Then give the spiral a black fill and a stroke of None. You won't often need spirals, but a little experimentation can lead you to something more exciting than canned effects.

The Pencil tool (Y)

When you draw with any of the Pencil tools, you trace a path on the page, and as you reach places in the path that mark a significant change in direction, the program places a Beziér point as you continue drawing your path. When you release the mouse, the path gains the visual effect you've chosen, according to the stroke type and its options.

The Variable Stroke Pen tool

The Variable Stroke Pen tool is a natural for digital tablet users and only slightly more complicated for mouse/trackball artists. To make a line thinner, press the left keyboard arrow; to make the line fatter, press the right keyboard arrow.

The Calligraphic Pen tool

Using this tool is just like writing with a Speedball pen. You have the option of setting minimum and maximum stroke width, and the angle of the pen. You can also choose to have a constant-width pen stroke.

The Ellipse tool

Ellipses run the gamut from circles to thin ovals, and anything in between. The Ellipse tool draws an ellipse from wherever you first touch the mouse to wherever you stop. To draw from the center out, hold down the Alt/Option key, and to make a perfect circle, hold down the Shift key as you drag the mouse. Speaking of mice, you can draw Mickey Mouse with just a few clicks and drags of the Ellipse tool — if you're so inclined.

The Rectangle tool

Use the Rectangle tool to draw four-sided boxes. Click the mouse on the page and drag in any direction — the rectangle is drawn from wherever you clicked the mouse on the page. Press the Alt/Option key to draw the rectangle from the center out. Hold down the Shift key to constrain the rectangle to a square. Press the Alt/Option key and the Shift key to draw a square from its center point out. Double-click the Rectangle Tool icon to open the Rectangle options to round the corners of the rectangle. Whichever unit of measure the document is currently set to will be the unit you use to mark the radius of the corners. If the Status toolbar says Pixels, the value you enter will be in pixels.

FreeHand MX expands the corner options for squares and rectangles. Draw a rectangle or a square. Choose the Subselection tool (white pointer) and select the rectangle. Two diamond-shaped points appear at the corners of the rectangle. Click and drag those points to make instant, symmetrical rounded corners.

More options are available using the Object panel. Choose the Rectangle item in the Object panel, and notice the corner options (see Figure 5.13).

Figure 5.13: Select the rectangle in the Object panel to see the corner options.

Keep Uniform selected (default), and any changes you make in the panel are applied to each corner. Deselect it to make individual corner changes (see Figure 5.14). The eight fields indicate the radius of the corners. Padlock icons allow or prevent changes to corner adjustments. The nicest touch is the group of icons in the center that enable you to make "innie" corners instead of radiused corners.

Figure 5.14: Uncheck the Uniform button to work with individual corners.

It's really easy to create rounded corners. Figure 5.15 shows some of the options.

Click To expand
Figure 5.15: Rounded corners are really a snap in FreeHand MX.

The Polygon tool

Whereas the Rectangle tool builds rigid four-sided objects, the Polygon tool creates objects with any number of sides. The objects can be straight-sided polygons, such as an octagonal stop-sign shape, or star-shaped. Double-click the tool's icon to bring up the Polygon Tool options dialog box. At the top of the box is a field and slider for adjusting the number of sides to the polygon. The slider itself has a maximum of 20 sides, but you can enter any number in the field. (However, your computer may crash if you get into the hundreds.") A thumbnail box shows the shape you are developing as you modify the settings.

The Shape choices are located beneath the information about the number of sides. You can have a polygon or a star. The Polygon choice has straight sides, and the more sides you add, the closer to a circle the polygon appears. The Star choice has interior and exterior points that are modifiable.

Star Points provides you with two adjustments: Automatic and Manual. An Automatic selection provides you with "badge shapes" for sheriffs and other police officers, until you reach ten sides. After that, the polygon more or less turns into a circle with small points. By using the Manual option, however, you can make anything from a pointy starburst to a flat-edged polygon by moving the slider from Acute to Obtuse. The closer the slider is to Acute, the closer the inner star points come to the center of the polygon.

When you finish making adjustments to the polygon, click the OK button. The cursor changes to a crosshair. When you click the mouse and drag, the polygon is drawn from its center point. Modifier keys do not affect this tool, but you can manipulate the angle and dimensions of the polygon with any of the transformation tools.

After you draw your polygon, the Object panel changes to give you the changeable settings you see in Figure 5.16. Play with the inner and outer angles and arcs to develop new shapes. You can also change the number of points in your polygon in the Object panel.

Click To expand
Figure 5.16: Change any of the polygon parameters in the Object panel to create interesting shapes.

Transformation tools

Double-click an object while using the Pointer tool to open the transformation box — a dotted-line rectangle with eight black boxes in corners and in the centers of each side (see Figure 5.17). These are called transform handles. When the transform handles are in view, you can click and drag on any of the black boxes to scale, skew, or rotate your selection (but not reflect). A double circle marks the center point of the selection. The selection can be a single object, a grouped object, several objects or groups, or text blocks. You can select as many objects as you want — the handles adjust to fit the array you choose. Everything that is selected within the transformation box is affected by your adjustments.

Figure 5.17: The transformation handles allow you to scale, skew, and rotate everything within the selection.

Moving objects with the transformation handles is more useful than you'd think. If you dragged a selection marquee around several objects, you may have selected several points on a path but neglected one or two. When you apply a transformation — even as simple as moving the selection — that lonely point or two will remain fixed on the layout. Instead, make your selection and double-click any of the selected objects. That brings up the transformation handles with the bonus of selecting all parts of every object (making a temporary group of everything), so all objects will transform as a unit.

You can also use the Transform panel and select the various means of transformations. In this panel, you can enter specific increments of relocation, rotation, scale, skew, or reflection. You can also enter the center point of transformation in two ways: Enter the x and y coordinates if you know them, or click the document. The mouse click causes the coordinates to be entered in their proper fields.

There are four transformation tools: Scale, Rotate, Reflect, and Skew. Double-clicking on one of these tools in the Tools panel opens the appropriate Transform panel.

Cross - Reference

The Transform panels were pictured in Chapter 4.

The Scale tool

You'll use this tool often enough to warrant creating your own keyboard shortcut. When the tool is selected, the cursor turns into a star cluster. Wherever you click and start to drag the cursor is the center point around which the scaling occurs. With that in mind, you can select an object and click anywhere on the page or pasteboard to enlarge or reduce the size of the object. Drag the cursor to the left or down to shrink an object; move the cursor right or up to enlarge it. To keep the change in size proportional, hold down the Shift key as you drag.

Certain attributes are affected when you use the Scale tool. Those attributes are found in the Transform panel. Double-click the Scale tool to open it. The three check boxes marked Contents, Fills, and Strokes usually cause the most confusion. Any of the three checked will be scaled along with the size of the object itself. A 12-point stroke is reduced to a 6-point stroke if the object is reduced about 50 percent, and it will be enlarged to about 18 points wide if the object is enlarged by about 50 percent. Uncheck this box, and the stroke remains 12 points wide at either size. With Contents checked, anything you have pasted inside an object is enlarged or reduced along with the object. Deselecting Contents leaves the pasted-inside content at its original size while the object gets bigger or smaller. The Fills box relates to tiled fills. Checking the box scales the tile; unchecking it leaves the tiled fill at the original size.

A neat option to the Scale transformation panel is the Copies box. If you enter a number in the Scale box, such as 150 percent, then type 4 in the Copies box and click Apply, the object you selected is cloned and enlarged 150 percent, then cloned and enlarged 150 percent, and again until the fourth iteration is complete. They will be nested concentrically — providing sort of a tunnel vision look. It's akin to the effect you get by making a blend between two different-sized objects, only with this method, the space between the shapes can be varied instead of regular.

The Rotate tool

The Rotate tool's options are few, but it does the job required. Select an object, choose the Rotate tool, and determine where you want the center of rotation to be. Click the mouse in that spot and drag. The center of the rotation is always wherever you click the mouse when you're using this tool. Using the Rotate version of the Transform panel, you can enter a specific angle and the x and y coordinates for the center of the rotation. Just as with the Scale transformation panel, you can enter a number of copies in this panel and create some really quick artwork.

The Reflect tool

With some projects, this little gem can cut your drawing time in half, literally. If you are drawing a symmetrical object, just draw one half of it. Then make a clone of it and use the Reflect tool to flop the clone to the other side. (Conversely, you can use the Reflect version of the Transform panel and enter 1 in the Copies field. Clicking the Reflect button throws a clone of the original across the page for you.) Adjust the halves so their midpoints touch, and join the paths.

The Reflect tool can appear a little squirrelly, with objects flying all around your page. Most reflecting is done from left to right or top to bottom. Holding the Shift key down as you drag the mouse constrains the mirrored image to 45-degree increments and calms down the screen activity.

The Skew tool

When you want to put a different slant on things, this is the tool you need. Select an object and choose the Skew tool. Click the cursor somewhere near the object so you can have a better feel for what the tool is doing. Also, skewing is not restricted to simple parallel shifting of an object's sides. You can skew an object all over the drawing board. (It's similar to the 3D Rotation Xtra in that respect.) If you just click and drag, the results are pretty haphazard, so hold down the Shift key to constrain the distortion to horizontal and vertical. When you drag the mouse up or down, skewing depends on the side of the object the mouse is clicked. Click the left side and drag up to make the right side of the object skew up. If you click the right side and drag up, the left side goes down. The side you drag from will remain in place. You get the same results, but have to think differently as you do it. The same concept works for left/right skewing.

On the CD-ROM

On the CD in the Movies folder is a movie named skew tool.mov.

Double-clicking the Skew Tool icon brings up the Transform panel, where you can enter positive numbers in the Y and V text boxes to skew the object right or up; negative entries skew the selection left or down, respectively. You can enter copies to create clones of the object if you're using the panel for the skewing action.

Other tools

There are even more tools! FreeHand has plenty of editing tools at your disposal.

The Freeform tool

When you need to make organic shapes, such as a tree, seaweed, or a bowl of warm soup, you absolutely can't miss with the Freeform tool. It uses two methods, Push/Pull and Reshape Area, which add or subtract points to the path as you use the tool on a path.

Push/Pull

The Push mode works by moving the shape of the path according to the size and precision values you enter in the Freeform tool Options dialog box.

Reshape Area

When you click the Reshape area radio button in the Freeform tool options dialog box, the icon in the Tools panel changes to the Reshape icon. Use the Reshape Area tool to draw little pointy things.

Cross - Reference

Chapter 6 has more information on the Freeform tool.

The Roughen tool

A path that has been roughened appears jagged or wavy. This tool permanently alters the path by adding points to it. Double-click the tool's icon to open the Roughen tool options dialog box, where you can select the amount of roughening (the number of points added per inch) and whether you want the resulting path to be rough or smooth. Click the cursor on the path and drag until the path is the way you want it. Figure 5.18 shows a circle that has been roughened with an amount setting of 30.

Figure 5.18: A circle that has been roughened.

The Bend tool

When the Bend tool is applied to a geometric shape or free-form object, each point in the object gains control handles. Click and hold the mouse button where you want the center point to be. Then drag upward to bend the path or downward to bloat the path. The object shown in Figure 5.19 started out as a circle. It was first ungrouped. The control handles can now be manipulated with the Subselection tool to further refine the object.

Figure 5.19: A circle distorted by both bending and bloating.

The tool also makes a great splash or explosion in seconds. The example in Figure 5.20 started with several ellipses with different fill colors around a central ellipse. All the ellipses were selected and then the Add Points Xtra applied. Clicking the Bend tool in the center of the mass and dragging it down created the center image in this figure. The points of each object stay in place, but the path between points is bowed out from the mouse click. After the paths were removed, the bottom half of the object was selected and modified with the 3D Rotation tool to complete the splash effect. In shades of green, you could make some pretty good bushes or trees.

Click To expand
Figure 5.20: The Bend tool can be effective for making a splash.

The Eraser tool

What if you had a tool that would cut through a vector object and, instead of slicing the paths, actually remove a swath of the object? This is the Eraser tool, new in FreeHand MX. When you pass the Eraser over a selected vector object, it cuts the path in two places and heals the cuts, retaining the fill and stroke attributes. There is more about the Eraser tool in Chapter 6.

The Knife tool (K, 7)

You can use the Knife tool to cut paths into multiple segments or additional closed paths. See Chapter 6 for more information.

The Perspective tool

The Perspective tool is powerful. There are several things you need to know, however, to tap into its power.

Making the grid work

Draw an object or set some text that you want to see in perspective. Go to the View menu, and choose Perspective Grid ® Show. This places a one-point perspective grid on your document. Select the Perspective tool and play a bit: Look at the cursor as you move it near a grid line. It adds a smart cursor — a vertical or horizontal triangle with a line. The triangle points to the grid that you are approaching. You can change the amount of perspective by clicking (when you have the triangle/line cursor) and dragging the mouse to move the vanishing point. All the lines that make up the grid are active, so clicking and dragging one line affects all lines in that plane.

Attaching objects to the perspective grid

To put things in perspective, keep the Perspective tool active, and select the object you want to have in perspective. For practice, put the object on the vertical face of the grid — lightly tap the left keyboard arrow and let go of the mouse. The object should appear in place on the grid. (If you only have one-point perspective active, press the right or left keyboard arrows to place the object on the active vertical face.) To place the object on the floor of the page, click the object again, tap the down keyboard arrow, and release the mouse. If you select the object, you can move it around the grid and watch its perspective change.

Removing objects from the perspective grid

When you have the drawing the way you want it, select the objects that you're happy with and click View ® Perspective Grid ® Release with Perspective. Now the object is the same as any other FreeHand object and is not controlled by the perspective grid. In fact, if you select it with the Perspective tool and reapply the object to the grid, the distortion will be extremely dramatic — and basically senseless.

To remove an object from the grid so you can reapply it after making modifications, choose Remove Perspective. This places the object back on the pasteboard unchanged. Make your changes and reapply the object to the grid.

Adding more vanishing points

To get a second grid, in other words, two-point perspective, click View ® Perspective Grid ® Define Grids. In the dialog box, you can add the number of grids you want and change their colors. Adding grids has absolutely no effect on objects you've already placed on a grid. If you want to have a second set of grids, open the Define Grids dialog box again and select New. This lets you set up another grid that you can manipulate separately from the first grid. You should set up a completely different color scheme and make a unique name for each grid you have just to keep your head in perspective. You can only see the grids one at a time; click View ® Perspective Grid, and at the very bottom of the pop-up menu, you'll see a list of the grids you've made.

Changing object dimensions

Taking an object off the grid and putting it back on again is easy enough, but what if you just want to make it a tad larger or smaller? The solution is a bit of a mind-bender because of all the keys involved, but here is how it works. The changes work one pixel at a time. Select the object with the Perspective tool. Press the 2 key to enlarge height and width equally; for width alone, press the 4 key; for height only, use the 6 key. Notice that you use even-numbered keys for enlargement. To reduce an object's size, use the 1 key to reduce height and width by 1 pixel; use the 3 key for width alone, and the 5 key for height only.

Moving things around on the perspective grid

To move an object around the grid — up, down, left, right — use the Perspective tool. If you haven't moved the object with any other means, you'll get the effect you're after. If you want to constrain movement parallel to the grid, hold down the Shift key as you drag. To move an object and the grid that it's on, select the object, and move the cursor to a grid line (look for the triangle/line cursor). Hold down the Shift key and drag. To duplicate the grid — for instance, to make a ceiling out of the horizontal grid — hold down the Alt/Option key as you drag the grid. If you have an object on a grid and you want to duplicate both the object and the grid, hold down Shift+Alt/Option as you drag, and a copy of the object will follow the grid in perspective.

Mirroring objects on the perspective grid

To make type (or an object) look as if it were applied to a glass store window that you are viewing from inside the store, select the object and press the spacebar. Conversely, you can select the object, and hold down the Shift key as you drag the grid from one extreme to another. The object mirrors itself as it passes through the vertical or horizontal plane, as seen in Figure 5.21.

Click To expand
Figure 5.21: This illustration uses two sets of perspective grids; only one is visible.

Common situations with the Perspective Grid

Table 5-2 lists situations that commonly occur with the perspective grid and their solutions.

Table 5-2: Common Perspective Grid Situations and Solutions
Situation | Solution
You can't distort a bitmap by placing it on the perspective grid. | Import the bitmap, and outline it using an appropriate drawing tool (that is, if the bitmap has an irregular edge, use the Pen or Bezigon tool to make the outline). Apply the outline (not the bitmap) to the perspective grid. Then release the object from the grid and save it as a Photoshop or Illustrator EPS file. Open the bitmap file, and import the EPS file. Distort the bitmap to fit the EPS outline, and save the distortion, discarding the EPS outline. Back in FreeHand, import the distorted bitmap, but don't place it on the perspective grid, just place it as you would any other bitmap
Text is impossible to edit on the perspective grid. | Just a misconception. Hold down the Ctrl+Alt Keys/Opt+ Cmd keys as you double-click the text with the Pointer tool. The Text Editor box appears, and you can make any text changes there. Click Apply or OK, and the changes are effective and in perspective. Keep in mind, however, that once you release the text from the grid (Release with Perspective), you can't edit that text again. It is now a group of compound paths and can only be treated as such.
The perspective is too severe. | Move the vanishing points off the page. You have the entire pasteboard to work with. Note: If you have multiple pages, the vanishing points may not be usable if they happen to fall on an existing page — that page becomes active with its own set of perspective grids.
As things are moved around the perspective grid, they don't change perspective. | It's a matter of what you've done to the object since you placed it on the grid. If you place the object and then move it with any tool other than the Perspective tool (including keyboard arrow keys), you release the object from the grid. To move anything on the perspective grid, you must be in the Perspective tool. If you've goofed and moved something, don't be alarmed. Just select the Perspective tool again, and tap the appropriate arrow key to reattach the object to the grid. Then move it to the proper location.
The perspective grid doesn't work. Nothing you do makes stuff stick on the grid. | To apply an object to the grid, you must first select the Perspective tool and second tap the arrow key that applies to the correct grid — repeat: tap — the key. If you hold the key down, nothing happens. Just hit it lightly and let it go, and your object sticks to the grid as it should. Then you can move it around all you want.
Fill and stroke adjustments don't change color or size the way you'd expect. | With text, use the Crl+Alt/Opt+ keys while you double-click the text. Change attributes in the Text Editor. You can select objects with the Perspective or Pointer tools, and change their colors by selecting the Fill, Stroke, or Both boxes in the Swatches panel.
You can't seem to get the horizon to be at an angle | It's a matter of perception. You can get it to an angle, but that angle is always perfectly flat — horizontal — and perpendicular to the vertical vanishing point. If it's necessary to have the horizon at an angle, you have to improvise by drawing within the grid, and then releasing the object(s) from the grid with perspective and rotating them.
The grid lies on top of your artwork,making it difficult to see what you're doing. | Turn off the grid's visibility. The perspective grid is active as long as you have the Perspective tool selected.
Note

The perspective of a stroke isn't affected when placed on the perspective grid; a box with a 12-point stroke turns into a trapezoid with a 12-point stroke if the box is applied to the perspective grid. To make the stroke have visible perspective, you must outline the path. In this case, you would use Xtras ® Path Operations ® Expand Stroke and type 12 in the Width field. When the object is attached to the perspective grid, the "stroke" (which is now a filled path or compound path) has the correct perspective.

3D Rotation tool

The 3D Rotation tool rotates a 2D object in 3D space. (This tool was an Xtra in previous versions.) It is a simple rotation, adding a changed perspective to the object. And it is easier to use than the perspective grid when you just want to portray the side of a box, for example. Double-click the tool to open the 3D Rotation options. Choose Easy or Expert. Expert lets you add a projection point (vanishing point) as well as a rotation point.

You can rotate from (and project from) (Figure 5.22):

Figure 5.22: The 3D Rotation tool and a rounded rectangle.

  • Mouse click — The point where you click and start to drag

  • Center of selection — The center of the selected object

  • Center of gravity — The visual center of the selected object

  • Origin — The lower-left corner of the object

Regardless of your choice, the rotation begins when you click and drag your mouse. A controller handle extends from the first click. Drag the mouse to achieve the rotation you want. Moving the mouse along the controller scales the image as you rotate.

Fisheye Lens tool

The Fisheye Lens tool distorts a selected object so that it looks like the mesh grid in the Fisheye Lens Options, as shown in Figure 5.23. After selecting the Fisheye Lens tool from the Toolbox, click and drag the cursor around the area you want to distort. You can use the Options dialog box to precisely set the distortion perspective from concave to convex.

Click To expand
Figure 5.23: The Fisheye Lens tool distorts according to the grid. Use the sliders to make the distortion more concave or convex.

The Extrude tool

New to FreeHand MX, the Extrude tool is like a very smooth blend of one object with lighting, rotation, and perspective added. It can be used with any FreeHand shape, including live text. An example is shown in Chapter 8.

The Smudge tool

The Smudge tool creates a shadow effect by creating multiple grouped copies of the selected object. Choose the smudge fill and stroke colors using the Smudge tool options pop-up menu. Then click and drag the object in the direction of the desired smudge. If you want to smudge around the whole object, hold down the Alt/Option key while dragging. Figure 5.24 shows two examples of a smudge.

Figure 5.24: The object on the left has a linear smudge. The object on the right was smudged around its entire border.

The Shadow tool

This tool creates a manual drop shadow for a vector object. Double-click the tool to see the Shadow Tool Options pop-up menu, where you can set the shadow type, the fill and stroke colors, and the x, y offset from the original object. See an example of the Smudge and Shadow tools in Chapter 8.

The Trace tool

The Trace tool is probably responsible for the most frustration to new FreeHand users. The problem probably lies in the name: People have the hope that they can click this tool and magically transform a full-color photo of Aunt Marge into a really cool drawing. Unfortunately, it doesn't work that way. The Trace tool looks a lot like the Magic Wand in Photoshop — and works in much the same way. However, whereas the Magic Wand selects contiguous colors within a particular color range, the Trace tool can select contiguous color and it can break the image into blocks of a defined color range — 2, 4, 8, 16, 24, 32, 64, 128, and 256 colors — and outlines each contiguous color section. The left drawing in Figure 5.25 shows an example of what the Trace tool does using 16 colors and very high sensitivity settings. The art in the center is the same trace as in the grayscale rendering, except that the closed paths have no fills. More than likely, though, you'll be looking for the drawing on the right, which is pure vector drawing.

Figure 5.25: The faucet on the left is a 16-color trace to grayscale; the center drawing is the same trace without fills; the right drawing was done with the Pen tool.

To utilize the Trace tool, start by double-clicking the tool in the Tools panel. This brings up the Trace dialog box seen in Figure 5.26. Color settings are determined in the various fields: the number of colors; Grays or Colors; RGB (Red, Green, Blue) or CMYK (Cyan, Magenta, Yellow, Black); Low, Medium, or High Resolution; and Trace Foreground, Background, or All Layers. The Path Conversion enables you to choose where to draw the path: Outline, Centerline, Centerline/Outline, or Outer Edge. Outline traces the outside edge of objects or colors and makes a closed, filled path. Choose Tight or Loose for the Path Overlap to determine how precise the tracing will be. If you choose Centerline, the Trace tool splits the middle of graphic strokes. Then you can apply Uniform (1-point) strokes to the line, or deselect Uniform to make a variable line weight. When you choose Centerline/Outline, the trace takes on the attributes of both Outline and Centerline, and you have the option of determining how wide a path must be before it is ignored. Any paths under the number of pixels you select (from 2 to 10 pixels) are left open. The last Path Conversion choice is Outer Edge. This selection creates a very tight clipping path to the graphic that has been traced. I use this frequently to make an object that I can fill with solid white (or a light gradient) and send to the back so the line work stands out on colored backgrounds.

Figure 5.26: Trace tool options include the Uniform option. The original image is at the top, Uniform is selected in the middle, and at the bottom Uniform has been deselected.

Trace Conformity deals with just how tight you want the tracing to be to the original. Higher numbers make a tighter conformity to the object, and also place more points on the path. This also makes a larger file. Noise Tolerance is used as a means to get rid of stray pixels (noise) in a low-quality image. The higher the number you input here, the less noise you'll trace. Finally, the Wand Color Tolerance slider determines the sensitivity when selecting contiguous color ranges. A small number (0) selects a smaller number of colors; select wider ranges by using a higher number — up to 255.

All these settings are made in preparation for you to click and drag a selection box around the entire graphic, or a part of it. As with most drawing tools, holding down the Shift key constrains the selection to a square. The Trace tool works on type, bitmaps (color or grayscale), and vector graphics.

On the other hand, if you want to select particular colors in an image, such as the eyes, nostrils, and lips of a model for a special effect, use the Trace tool in a Magic Wand manner. Click an area that you want to trace. The Wand Color Tolerance comes into play here. If you end up with too much data in your selection, lower the tolerance until you get what you want. When you click the graphic, the program takes a second or two to make its selection, and then you'll see a row of marching red ants. If you want to add other areas of the image, press Shift+click them. Use the same Shift+click to delete areas from a selection. When you're satisfied with your selection (this may take two or three attempts), click the wand on a selected area to open the Wand Options dialog box.

Choose to Trace Selection with the selections you set up in the Trace dialog box, or Convert Selection Edge to trace the outer perimeter of your selection.

The Trace tool is often used to turn a bitmap into vector art for export to Flash or Fireworks. Be careful — depending on your settings, you can make a tracing that is many times larger than the original bitmap. You can also use the Trace tool operation to replace a graphic, which is very useful if you have a bitmap that you want to distort — for example, by placing it on the perspective grid. The bitmap won't distort on the perspective grid, but if you do a nominal tracing of the bitmap, it will go onto the grid with no problems. For more information, refer to Table 5-2. Depending on its size (and importance), most viewers won't even notice that the image was posterized.

Viewing tools

Viewing tools are the tools you use to navigate around the FreeHand MX document. The Hand (or Grabber) tool and the Zoom tool both lie near the bottom of the Tools panel under the View heading.

The Hand/Grabber tool (Spacebar)

Select the Hand tool and click somewhere in the FreeHand window. As you drag the mouse, you move the pasteboard in the window. You can also press the spacebar to bring this tool up temporarily. No matter how you select the tool, you can cover a lot of screen real estate in a click/drag or two.

The Zoom tool

Zoom in or zoom out on the page with this tool (to zoom in: spacebar+ Ctrl/Command; to zoom out: spacebar+Ctrl/Command+Alt/Option: It's quicker to hold down the keyboard shortcuts: spacebar+ Ctrl/Controlto zoom in, and add the Alt/Option key to zoom out. The point at which you click the cursor on the page becomes the center of the window when the view changes.

Color tools

Although these two items are just boxes, not really tools, they are located in the Toolbox. They function much as the Swatches panel.

The Stroke and Fill color boxes

Both of these boxes work exactly the same way. One box applies to an object's stroke, and the other box determines the object's fill. If the box has a color in it, any object you make (excepting text) has that color. The box with a red slash in it indicates a color of None for the stroke or fill. The color attributes of any object you select are indicated in these two boxes as well.

To change the color in the box — for selected and future objects — you can drag a swatch of color from the Swatches panel, the Mixer panel, or the Tints panel. You can also use the Eyedropper tool to drag a color onto the color box. Click the box itself to bring up the color swatches (see Figure 5.27) color in the menu; the color's name and RGB or CMYK breakdown appears in a text field.

Figure 5.27: Fly-out Stroke and Fill color menu.

Next to the text field, a box with a red slash in it appears. Click this to give the element a color of None. To the right of that is a color wheel icon. When clicked, you get the Color Picker for further color choices. A PC shows a window with 56 color choices. A Mac has menus for CMYK, Crayons, HSV, Web Safe Colors, or RGB from which to choose. The color menu also has a pop-up Options menu that you activate by clicking the triangle in the top-right corner. When that menu is open, you can choose between Swatches and Color Cubes.

SNAP icons

You can "snap" objects or points to other objects or points when one or both of the snap features are turned on. The snap distance is determined by the preferences setting — the default is 3 pixels.

Snap to Object

Using the Pointer tool, drag the object near or onto the path you want to snap it too. The cursor changes when you reach the "snap to" distance. Release the mouse button, and the two objects snap together at the selected point (see Figure 5.28).

Figure 5.28: A star object snapped to a point on a rectangle's rounded corner.


Xtras or Necessities?

FreeHand has many main-line tools for you to work with that are a core part of the program. Other features are added to the program in the form of Xtras. FreeHand comes out of the box with about a dozen and a half Xtras that make your life easier. Third-party Xtras can also be found on the Web (start at www.macromedia.com). Xtras will look to you like any other tool, but they aren't hardwired into the program. Instead, they work within the program.

The great news is that they work. You can place their icons in the Main toolbar, or in the Tools panel. My default setup has a Main toolbar filled with three full rows of mainstream tools and Xtras that I use all the time. If you're short on window space, you can always access Xtras through the Xtras menu in the FreeHand menu. Here's a short description of the default Xtras in alphabetical order.

Tip

The top item in the Xtras menu is Repeat [specific Xtra tool listed here] Xtra. This can be a real time-saver when you're doing repetitive tasks.

  • Animate: Release to Layers — Takes objects in a blend and places them on new, separate layers for animation or export to SWF (learn all about ShockWave Flash format in Chapters 11 and 12.

  • Chart — Create objects that can be used as the "bars" in charts. This Xtra makes a pictograph for that purpose.

  • Cleanup — Includes the following four controls:

    • Correct Direction — Used for odd-even fills in compound paths.

    • Remove Overlap — Creates compound path from object crossing itself (as in making an "x").

    • Reverse Direction — Switches beginning and end points of path.

    • Simplify — Reduces number of points in a path using user input; attempts to maintain path integrity.

  • Colors

    • Color Control — Sliders allow change in color makeup in CMYK, RGB, or HSL modes.

    • Convert to Grayscale — Changes all colors in selected objects to grayscale. Color data is lost.

    • Darken Colors — Decreases brightness of colors in 10 percent increments.

    • Desaturate Colors — Incrementally reduces intensity of color, ultimately becoming gray.

    • Import RGB Color Table — A color table contains all the colors in a bitmap. Use this to import those colors to FreeHand for use in modifying an existing drawing or making a new one using the same color scheme.

    • Lighten Colors — Increases brightness of colors in 10 percent increments.

    • Name All Colors — Click this Xtra to move colors that have been dragged into the Swatches panel without being named in one step.

    • Randomize Named Colors — Say you want to know what a drawing would look like if you suddenly experienced one of the acid flashbacks from the sixties your weird uncle tells you about — this Xtra changes colors for no apparent reason. For example, you draw a handful of six flowers. Each flower has a different (named) color. Clone the bouquet, and use this Xtra to get a group of flowers that may be more abstract or random than you could have created on your own. Every time you click it, the colors go off in another direction.

    • Saturate — Increase the intensity of colors; — move away from gray.

    • Sort Color List by Name — Alphabetical colors, why not? Doesn't make much sense if the name is 30r 24g 65b, though; name the colors first.

  • Create — Includes the following three controls:

    • Blend — Blends compound paths just as Modify blends normal paths.

    • Emboss — Makes crude embossing effect by cloning, offsetting, and modifying colors of an object.

    • Trap — Used when light and dark colors abut each other in a print job. The press can go out of register minutely, causing the paper to show between the abutting colors. Trapping eliminates any show-through caused by press misregistration.

  • Delete — Includes the following two controls:

    • Empty Text Blocks — Discards text blocks in document that contain no data.

    • Unused Named Colors — Discards colors that have been dragged into the Swatches panel without being named.

  • Distort — Includes the following two choices:

    • Add Points — Places a point between every two points on a path.

    • Fractalize — Makes abstract, geometric patterns.

  • Other: File Info — Used by newspapers and magazines to keep track of copyright, author/artist, date, and other information.

  • Path Operations — Includes eight of my favorite tools, each requiring one object on top of another:

    • Crop — Top object removes anything belonging to the lower object that lies outside the top object's borders.

    • Divide — Makes separate elements obtained by overlaps.

    • Expand Stroke — Makes a closed and filled path of constant width centered on original path.

    • Inset Path — Makes a concentric path inside (positive numbers) or outside (negative numbers) a selected path.

    • Intersect — Retains only areas that overlap; discards other areas.

    • Punch — Takes a "bite" out of lower object.

    • Transparency — Gives appearance of transparency by making a mix of top and bottom object colors.

    • Union — Combines both objects into one single object with a single outline.


Summary

This chapter covered the tools that make FreeHand work. It started with a definition of vector art and went on to explain each of the tools in the Tools panel and Main toolbar. Finally, the chapter covered the specifics of using FreeHand Xtras.


Chapter 6: Drawing with FreeHand MX

This chapter explains how to work with FreeHand's key tools and features. Understanding these tasks and processes will help you work efficiently and with less stress.

Working with Paths

If you're going to make FreeHand work for you, you must learn to control paths. This section explains how to draw and manipulate those paths to suit your purpose.

The tools

One way to manipulate paths is through the use of tools. Freehand offers a wide variety of tools for you to use.

The Pen tool

The Pen tool is the primary drawing tool in FreeHand MX. Select the Pen tool and click the document. Move to another location and click again. You now have a straight path connecting the two points. Move to a third location and click and drag a short distance. This point has control handles that enable you to adjust the curvature of the path between the two points. Visualizing what is happening helps if you think of the path as a flexible steel strap, similar to a long metal ruler. Each point controls the previous and next sections of the path — including the first point you place. A single mouse click with the Pen tool places a Corner point on the page. If you simply click the mouse elsewhere on the page, you get a straight path between the points. However, if you make a click-and-drag movement, you apply a curve to the path that becomes apparent when you make the next mouse click. Depending on the location of the second point, you get something between a straight line and a severe curve.

When you have the Pen tool selected and it's not on a selected path, the smart cursor shows an "X," as shown in Figure 6.1 (a). This indicates that you will be starting a new path when you place the next point. After the first point, the cursor is the normal pen point, as shown in Figure 6.1 (b) until you approach the first point to close the path. At that time, the cursor gains a small open circle, as shown in Figure 6.1 (c). If you want your path to complete a circuit and become what is called a closed path, make your last click when the circle appears. Another way to close a path is to go to the Object inspector and check the Closed box; the beginning and end points connect, with the path section reflecting any curves you applied on those points.

Click To expand
Figure 6.1: The Pen tool with the smart cursor.

If you have View ® Snap to Objects on and you move the cursor over an existing path, the cursor creates a large circle on the path itself, indicating that you will be placing the point exactly on top of the existing path.

Cross - Reference

You'll find more information about drawing with the Pen tool in Chapter 15.

The Bezigon tool

To use the Bezigon tool, first select it from the Pen tool fly-out. Then click in the document at the place you want your drawing to begin. When you click the Bezigon tool on the page, you get a Corner point, just as with the Pen tool. However, a click-and-drag operation moves the point around the page instead of adjusting the point's handles.

The Line tool

The Line tool places a starting point and an end point with a straight path between the points. The line can be at any angle or length you choose, but it doesn't curve unless you go back with another tool (Pen or Bezigon) and change the starting or ending points. You can constrain the angle of the stroke to 45-degree increments automatically if the Auto Constrain option is turned on, or you can hold down the Shift key. You can also change the constraint angle to any angle you want by going to File ® Document Settings ® Constrain and entering an angle in the field. This is useful for drawing ellipses and moving elements at precise angles, as well as making straight lines.

To get more out of a straight line, just switch to the Pen, Bezigon, or Pencil tool. Then select the end point you want to extend and continue drawing.

The Variable Stroke Pen and Calligraphic Pen tools

Drawing with any of these tools is drawing freehand. As long as the mouse button is depressed or the pen is pressed to the tablet, the path continues. Lift the button or the pen and the line stops. Beziér points are automatically added to maintain the shape of the path as drawn.

Double-click any tool to bring up the Options dialog box. To speed up the drawing/redraw process on the monitor, you can have the program draw a dashed line as the temporary path. Another option that you can use to your benefit is the amount of precision. Use the slider to choose a low number for loose, flowing lines with few points, or move to a higher number for a more precise rendering of the path you've drawn. The higher the number you choose, the more points FreeHand places on the path.

The Variable Stroke Pen and the Calligraphic Pen Options dialog boxes enable you to set a limit on the minimum and maximum line weights. There's another option in the dialog box that deals with overlapping strokes. If you select Auto Remove Overlap, the program converts the finished stroke into a compound path. (Compound paths are dealt with in the projects later in this book.)

Adjusting a path and/or points with tools

There are many ways to adjust a path between two points. You can use many of the tools (Pointer, Subselect, Pen, Freeform, Knife, Eraser, and so on) and even the Object panel. Many of the functions in the Object panel have moved from the Object inspector in older versions of FreeHand.

The Pen tool

After a path is drawn, modifying it is incredibly easy with the smart cursor. Select the path; then let the Pen hover over an existing path, and the smart cursor will show a small plus sign, shown in Figure 6.2 (a), indicating that you will add a point if you click that spot. By default, you will add a curve point. Let it hover over a point, and different things happen depending on the status of the point.

Click To expand
Figure 6.2: The Pen tool positioned to make adjustments to the path.

  • If the point is a corner point, the smart cursor shows a small minus sign, as shown in Figure 6.2 (b). Clicking that point deletes it. Click and drag changes the point into a curve point.

  • If the point is a curve point or a connector point, the smart cursor shows an open arrowhead, as shown in Figure 6.2 (c). Clicking that point changes it into a corner point. The smart cursor changes to a minus sign, indicating that the point will be deleted if you click again.

Object panel

To use the Object panel to adjust a path or points, first select the path. The path display shown in Figure 6.3 (a) tells you the number of points in the path and whether the path is closed. The Even/Odd Fill check box is used with compound paths, which are discussed later in this chapter. The Flatness adjustment is generally used to print paths on printers with little memory.

Click To expand
Figure 6.3: (a)The Object panel with a closed path selected. (b) The Object panel with a point selected.

The figure shows a closed path. Unchecking the check box opens the path by deleting the last segment. Vice versa if you have an open path and check Closed, FreeHand MX generates a segment from the last point you placed to the first point to close the path.

When you select one point on a path using the Pointer tool or the Subselection tool, the point information is displayed as shown in Figure 6.3 (b). Here you can change the location of the point and the type of the point, and you can retract a handle. (If you select multiple points, the Location coordinates aren't shown.)

  • To change the location of a point, type the new coordinates in the x and y coordinates text boxes.

  • To change the type of point, click the appropriate icon — connector, corner, or curved.

  • Click the left or right handle box to retract the handle and leave a straight path to the point.

The Freeform tool

The Freeform tool adds or subtracts points on the path as you use the tool to modify the shape. It operates in two ways: Push/Pull and Reshape Area.

Double-click the Freeform tool to activate the Options dialog box (see Figure 6.4). The cursor changes depending on which method you choose and the location of the cursor in relation to the path itself. Use the Pressure settings if you have a digital tablet.

Click To expand
Figure 6.4: The Freeform tool settings are different for Push/Pull and Reshape Area.
Push/Pull

When you move the cursor around a path, notice how it changes. A small "o" next to the arrow means you are in the Push mode. The Push mode works by moving the shape of the path according to the size and precision values you enter. You enter the Size value in pixels from 1 to 1,000. A low number in the Precision setting adds fewer points to the changed path. When you click and hold the mouse button, a large circular cursor appears, showing the area you are distorting. To increase the size of the push pointer without reopening the Options box, press the right arrow key or right bracket (]) key; to decrease the pointer, press the left arrow key or left bracket ([) key.

If the cursor has a small "s" next to it, you're going to pull the path. The Pull setting enables you to choose a Bend option: By Length or Between Points. By Length enables you to set the length of the segment (in pixels) that is affected. Between Points bends the path from the spot where the cursor touches the path and affects the control handles of the point on either side of the path segment if they're within the length setting.

You can constrain the pointer movement by holding down the Shift key. If you want to switch between the By Length and Between Points methods as you draw, hold down the Alt/Option key, then drag the mouse. If you start dragging and then hold down the Alt/Option key, you clone the path.

Reshape Area

When you clock the Reshape Area radio button in the Freeform tool Options dialog box, the icon in the Tools panel changes to the Reshape icon. Use the Reshape Area tool to draw little pointy things. Just as with the Push/Pull option, you can set the size of the pointer from 1 to 1,000 pixels, and set the precision from 1 to 10 — 10 being the highest precision and adding many points to the path. The Reshape Area tool also has a Strength setting. The higher the number you enter, the greater the distortion you make in the path.

When you are near a selected path and depress the mouse button, the cursor turns into a three-tiered circle. The innermost circle is small and shows where on the path the reshape action will begin. The middle circle varies with the strength setting. The outer circle varies with the size setting. Use the same keys as the Push/Pull tool to increase or decrease the size of the pointer. Use the up arrow key to increase the strength of the distortion, and the down arrow key to decrease distortion. The changes you make with the keys show up immediately in the size of the cursor.

Figure 6.5 shows the different types of drawings you can make with the Freeform tool. Both drawings started out as a vertical rectangle. The left side of the drawing was done completely with the Push/Pull tool. The tree form on the right side of the figure was done entirely with the Reshape Area tool.

Click To expand
Figure 6.5: The Freeform tool has two different ways of working: Push/Pull and Reshape Area.

The Eraser tool

The Eraser tool is new in FreeHand MX. When you pass the Eraser over a selected vector object, it cuts the path in two places and heals the cuts, retaining the fill and stroke attributes. Double-click the tool to open the Eraser tool Options dialog box. Here you set the minimum and maximum width that the tool will use. This tool works really well with a graphic tablet — increased pressure widens the stroke. If you don't have a tablet, press the left arrow key to decrease the stroke and the right arrow key to widen it.

Figure 6.6 shows three ways the Eraser tool can be used with a rectangle as the selected object:

Figure 6.6: The Eraser tool is versatile. From left to right, it created a single closed path, a pair of closed paths, and a composite path.

  • Starting outside the object and cutting into the object makes a simple closed path. The dark area is now one closed path. (By holding down the Alt/Option key, you can constrain the tool to a straight path.)

  • Cutting all the way through the object makes two separate objects.

  • Cutting a hole inside the object builds a compound path. If you choose Modify ® Split, you will have three separate shapes in this example.

The Eraser works only on vector paths (open or closed), however, so if you want to apply some special effects on text, you have to convert it to paths first.

The Knife tool

You can use the Knife tool to split paths in a couple of ways. Double-click the Knife Tool icon to open its Options box, and select either Freehand or Straight.

The Freehand Knife tool works just like the Pencil tool: It draws a free-form cutting line wherever you drag the mouse. If you draw it across a selected path, the path is cut where the knife intersected it. Because all open paths must have an anchor point at each end, two points are created at the intersection. If you want to remove a section of the path, make another cut and deselect the path. Then select the section you want to remove, and cut or delete it. You have the option of creating a cut of a definite width, which is like using a paintbrush to wipe out a section of a path. All you have to do is adjust the slider in the dialog box to determine the cut's width. Another option is to leave the path cut or Close Cut Paths. If you choose to close the paths, the path is where you want it, but an additional point (or points) is placed to one side of the path. When you have chosen a specific width to the cut, closing the cut path makes the path look as if you've taken a bite out of it. The tool places a point on each side of the width of the cut and continues pushing the path away from the cut, but in the shape of the cursor (which is a circle the diameter of the cut you selected). The last option you have is to have a Tight Fit to the cut. This option tries to maintain the location of the cut points on the path. Remember that you are cutting a Beziér curve, and that curve might not fall exactly where a point can be placed according to the program's math. So when you cut the path, the two end points may move slightly. If you're after precision, select both points and use the Align panel to center the points on each other vertically and horizontally.

On the CD-ROM

On the CD in the Movies folder is a movie named Knife tool.mov.

The Straight knife action lets you make a perfectly straight line instead of drawing a wiggly line around your page. This facilitates placing the cut exactly where you want it. By its nature the Straight knife goes only from one side of an object to another, but if the object's path winds around (think of a dollar sign), the knife cuts the path every time it crosses the object. The Freehand knife can cut a path many times, even if you backtrack on the path. Holding down the Shift key while using the Straight knife constrains the cutting path direction to 45-degree increments.

Using Xtras to adjust a path

Xtras are another way to adjust and manipulate paths. The following sections give you a general idea of how these Xtras work.

Add Points

When you need more points on a path, simply choose Xtras ® Distort ® Add Points. FreeHand places a point between every two points in the path. These points are placed equidistantly between existing points. You can add more points by repeating the action.

Expand Stroke

The Expand Stroke Xtra is useful in quite a few instances for both boilerplate drawing and line/style techniques. Select the Expand Stroke icon from the Xtra Operations toolbar, or click Xtras ® Path Operations ® Expand Stroke. Use the Status toolbar to choose a unit of measurement that you're comfortable with before you open this Xtra, because you can't make a change after the dialog box is open.

Tip

There is an easy workaround to the units-of-measurement situation in virtually any of FreeHand's value-input text fields. Just type the desired units, such as 0p4 or 4pt to get a 4-point line. If you want a quarter-inch measurement and the units are set to millimeters, type .25in; if you want metric measurements, use mm or cm as a suffix to the number.

Select a path and double-click the Expand Stroke icon to open the dialog box shown in Figure 6.7. The stroke width of your selected path will be in the dialog box. If you want to, you can leave this value, or you can move the slider or enter a new number in the text field. Choose the type of cap and join, and enter a miter limit before clicking the OK button.

Figure 6.7: The Expand Stroke dialog box converts a path into a compound path.

The result of your Expand Stroke depends on the condition of the stroke and fill attributes you have previously set. That is, if you happen to have a red fill and a 4-point green stroke set as your default, the new compound path also has those attributes. That may be exactly what you had in mind. If not, just make the appropriate changes.

Inset Path

This is a dual-purpose tool. Even though it's called Inset Path, you can also "outset" a path. By default, this Xtra is designed to move the path inward on itself by the distance you enter in the text field or determine by using the slider, as shown in Figure 6.8. Note that the path itself is going to change — if you want to see the original path and the results of your Inset Path activity, you must first clone the original path.

Figure 6.8: The Inset Path dialog box.

The Steps field in the dialog box determines the number of iterations of the object that will be inset. Six steps were used for the example in Figure 6.9. The left group of boxes was set for a Uniform inset, the middle group is Farther, and the right group is Nearer.

Click To expand
Figure 6.9: Inset Paths, left to right: Uniform, Farther, and Nearer.

To outset an object, put a minus sign (–) in front of the number in the Inset field. In this manner, you can put round corners on a square box or triangle, as shown in Figure 6.10. The gray objects in the centers of these examples were modified with a negative amount in the Inset Path dialog box. The square was made with a multiple of 2, was set to Farther, and was given rounded joins. The star was made with a multiple of 3, was set to Nearer and was given rounded joins. The triangle was given a beveled join. The result of an Inset Path operation is a compound path, giving you many options pertaining to fills, strokes, and transformations.

Click To expand
Figure 6.10: Inset Paths was applied to each of the gray objects (the objects were turned gray after Inset Paths was applied).


Composite Paths

A composite path is simply the combining of two or more paths into one single path. A longer definition would include an explanation about using the Join, Split, Union, Divide, Intersect, Punch, Crop, and Transparency commands and the conversion of text to paths. A few preferences can also affect the outcome of a composite path.

Using Join/Split

Paths have a set direction. Rectangle, Polygon, and Ellipse tools all draw in a clockwise direction. The direction in which you draw or place points sets the direction of the path when you use the Line, Pen, and Bezigon tools. This concept must be foremost in your mind when you make composite paths, but it's most important when making composite paths from multiple closed paths. The best way to provide for a possible compound path is to draw in a clockwise direction on the outside of objects, and counterclockwise on the holes. As a rule, type fonts are built this way to create a natural compound path if the type is converted to paths.

Note

To be confident that everything will work as you've planned, you can use the Correct Direction Xtra. It is found in the Xtras ® Cleanup menu. It's also found in the Modify ® Alter Path menu. This tool changes the direction of paths if necessary in order to make a compound path.

You have two ways to combine two or more open paths into a single path. You can continue drawing one path, and place a point on an existing end point on another path. You can also connect the two paths by choosing Modify ® Join. This command does one of two things, depending on the physical relationship of the paths to each other: It connects the two end points that are nearest each other; or if the four end points are equidistant, it connects the end points (not the beginning points) of both lines. In the latter instance, changing the direction of a line changes the connecting points, because the end points on the path are reversed. In real life, if you want two specific points to connect, you'll save a lot of time by continuing one path and connecting to the other path.

Working with closed paths expands the possibilities even more. Figure 6.11 begins on the left with a grouping of herons and egrets of different colors and fills. In the Object panel, an option named Even/Odd Fill utilizes the direction of the paths. The center illustration shows what happens when the four objects are selected and Modify ® Join is used with Even/Odd Fill turned on (default). Notice how overlapping objects change color to transparent and the bottom object's color (black here). If you rearrange the colors of the objects, the final result will have a different color as well. On the left side of the figure, the Great Blue Heron at the rear has been given a light gray tone, and the Cattle Egret (smallest bird here) was given a black fill. The group was joined, and Even/Odd Fill was turned off.

Click To expand
Figure 6.11: The effect of Join with Even/Odd Fill turned on (middle) and off (right).

The opposite of Join is Split. If you select a single point on a path and choose Modify ® Split, the point turns into two disconnected points, and the path becomes two paths. If you have a compound path, such as the birds in Figure 6.11, each shape becomes a separate entity and all the shapes gain the same fill and stroke attributes of the bottom object — in this example everything turns black. The overall effect is the same as choosing the Union command, except there are the four original shapes with the same fill. The Union command presents a single shape.

The Combine commands

These commands are accessed through the Modify ® Combine menu. They work only on closed paths. Figure 6.12 gives an example of each command. Here's how they work. The Path Operations Consume Original Paths option in Preferences enables you to either delete the original paths or keep them. Holding down the Shift key as you select the various commands achieves the same effect without the trip to the Preferences menu and only affects the present operation.

Click To expand
Figure 6.12: Six examples of compound path construction.

Union

Union combines all selected overlapping objects into one single element, as shown in the upper left corner of Figure 6.12. If the objects do not overlap, a compound path is created that enables you to apply gradient fills to the various objects as a whole (this concept is explained later in the chapter). The new object contains the fill and stroke of the bottom object. If you hold down the Shift key as you select the command from the Modify ® Alter Path menu or the button in the menu, you'll think you've been tricked, because the unionized object appears. Move the new object, and you'll find the original group of objects lying below it. This is a good way to apply a solid fill — usually white — to the objects so the drawing appears to have a clipping path when it's placed on other backgrounds. Just select the whole drawing, click Union (while holding down the Shift key), and send the new shape to the back. Then give it the stroke and fill you want.

Divide

An example of Divide is shown in the top right of Figure 6.12 (shapes in the example have been moved for clarity). This command makes a new object wherever objects overlap. Two long rectangles at right angles to each other in a cross formation would result in five separate objects. Each of the objects retains its fill and stroke. The new objects can be removed or moved around as you see fit. This command is the basis for the Transparency command, and if you experiment with it a bit, you'll find all kinds of uses for it.

Punch

The Punch tool is the topmost element in your group. It takes a bite out of the element immediately beneath it. Sadly, it doesn't go all the way through a grouping. To accomplish that, you must continue clicking the Punch button. In Figure 6.12, the middle left example used Punch for the top two birds, and the bottom two birds were selected and punched again. You can get some very striking effects in your artwork with this tool.

Intersect

The same group of birds was attacked with the Intersect command, and it left what you see in Figure 6.12 (middle right). This command is really only useful on objects that overlap. If all of the objects do not overlap in one place or another, the entire mass disappears (unless Path Operations Consume Original Paths has been deselected). In this example, only a portion of the smallest bird happens to overlap all the other birds. The result of Intersect has the stroke and fill of the bottom object.

Crop

Crop is opposite of Punch in that anything under it will be captured inside the topmost shape. The top shape loses its fill and stroke, but the other objects retain theirs.

Transparency

The Transparency command (see Figure 6.12 lower right) changes the opacity of various objects. Transparency is similar to Punch in that it goes only one level deep at a time. In this example, Transparency was applied to the bottom two birds, followed by the top two birds. When you invoke this command, a dialog box opens to enable you to change the level of transparency. Here, the levels were set at 25 percent both times. If you tear the final results apart, you'll find that the original birds are intact, but a new object inside the topmost object appears to be transparent. In reality, it's a combination of the bottom element impacted by a percentage of the top element.

Text composite paths

The counters in letterforms — the holes in letters and numbers, such as a, o, e, g, 8, and so on — become a special problem when you convert text to paths. Simple letterforms such as an L or J are converted to simple closed paths. Letters with counters must be converted to compound paths, however, and they are created with counter-directional paths for that purpose.

You can't have a gradient fill in text. Instead, you must convert the text to paths. At that point, you can do pretty much what you want with the text (except edit it). It has become a graphic element in the form of a compound path.

This brings up some interesting situations. Fonts are built within invisible guidelines; the top of the letter won't go above the ascent, and the bottom won't drop below the descent. This rule seems to be broken on many fonts, where ascenders, such as the vertical paths on an h, b, or l, rise above the height of a capital letter. However, that serves only to move the ascent to the height of the lowercase letters' ascender. Descenders on p, g, swash f, and so on go to various depths according to the font's design. All this causes a confusing mix of tones if you want to place a gradient fill inside the letters, as shown at the top of Figure 6.13. The bold gray line shows the midpoint of the gradient, and the text has been given a stroke for clarity. Notice how much the midpoint of the gradient varies up and down from one letter to another. It's obvious that all letters aren't of equal size. It also creates a cacophony of color in the text.

Click To expand
Figure 6.13: The effects of gradient fills in text that has been converted to compound paths.

To get around the seemingly haphazard gradient balance, use Modify ® Join to make all the letters in the text group into a compound path. (Yes, the counters are now compound-compound paths.) In this way, the gradient goes from the absolute bottom of the group to the absolute top, and the tonal effect is even. The letters at the bottom of Figure 6.13 have been joined, but the gradient fill is exactly the same fill as the example above it. The text now has a homogenous appearance.

Fills and gradients in compound paths

The same logic holds true with "normal" compound paths, as shown in Figure 6.14. The flock on the left side is individual shapes with equally individual gradient fills, but the right flock has been joined, making a compound path that employs a single gradient. Sometimes you want the effect shown on the left, and at other times you want the effect shown on the right; it all depends on the job, your mood, and creativity.

Click To expand
Figure 6.14: Normal compound paths.


Lens Fill

A lens fill can be applied only to open or closed paths. To clarify that statement, there is an option to Show Fill for New Open Paths in the Preferences menu that causes a fill to appear as soon as you draw the third point in a path. If you have it turned on, you can have any type of fill you want, including another lens fill.

Access the lens fill through the Object panel as shown in Figure 6.15.

Click To expand
Figure 6.15: The lens fill option in the Object panel.

The lens fill is capable of doing many things. An object can be covered with lens fill effects up to eight deep. The ninth lens fill negates the bottom fill in the drawing stack. These fills are usually placed above other objects in your drawing or layout because they affect anything beneath themselves. All lens fills convert spot colors to CMYK values for printing. This isn't a concern if you're working for the Web, but it's a good thing to remember if you're printing a map or brochure. Keep in mind that this is a very memory-intensive operation, and you can choke the best printer if you have too many effects going at the same time. You're better off thinking the project out a little and being efficient in your drawing. A lens fill can create any and all of the following effects:

  • Transparency — Using this fill gives the appearance of taking a sheet of colored cellophane or plastic and placing it over the other objects in your layout. You can choose any color you want, and adjust the amount of transparency — 0 shows no effect at all, 100 percent is opaque color.

  • Magnify — This lens is great for enlarging areas of a drawing or map for clarity. You magnify objects under the lens by entering a number from 1 to 100 in the text field, or moving the slider. The results of a high enlargement will amaze you (see Figure 6.16).

    Figure 6.16: The text above the heron's head on the right was 1.5-point before converting to paths. Notice how well it enlarges (700 percent) with the Magnify lens fill.

  • Invert — If you ever need to invert the colors of part of your drawing, choose this type of lens fill. It turns blue into yellow and red into green — it simply changes colors to their complementary colors on the color wheel. Remember, this will be CMYK.

  • Lighten — You can use this lens as a device to create depth, brightness from an external light source, or in text that has been converted to paths and placed over elements in an illustration. A setting of 0 creates no change; 100 percent creates a totally white overlay.

  • Darken — This lens adds black to colors (including the background color or white), darkening everything beneath the lens by the percentage you choose.

  • Monochrome — The Monochrome lens fill changes everything under the lens to varying shades of the color you've chosen. A multicolored drawing will appear as if it were done in black and white and printed in your chosen color.

A lens fill cannot be applied to everything. You cannot get a lens fill effect on an EPS file, or on a clipping path. You won't see any difference if you apply a lens fill to live text. However, if you convert the text to paths, its fill can be a lens fill. Remember to keep a live version of the text somewhere safe on another page or on the pasteboard in case you need to make changes or adjustments in fonts later.

In the Lens Fill panel, you have the following three options to check:

  • Centerpoint is a fairly easy concept to follow. When you choose a lens fill, you can decide to have the fill apply to objects immediately beneath the fill, or you can select an object elsewhere on the document as the subject of the fill. The first fill method uses the fill just as you would any other fill, but the second method requires the Centerpoint. Click this check box, and a small diamond cluster (identical to the Paste Inside centerpoint) appears in the middle of the object that is being filled. Use the Pointer tool to move the centerpoint over another area of the document, and that area appears in your lens-filled object — with the adjustments dictated by the type of lens you've chosen. After you apply a lens fill to an object using Centerpoint, you can move the object anywhere in the document and the centerpoint remains fixed; the image in the lens fill continues showing the image around the centerpoint.

  • Snapshot is a neat feature, but it requires caution because changes to the original elements affected by the lens will not change in the lens fill — that's why it's called a snapshot. For example, consider that you are designing three boxes of wine, and the company wants to use vector art instead of photography. You could draw the first comprehensive layout (comp) with Chablis in the dynamically tilted wineglass, and place a lens fill on another page that will be printed for the client to discuss. When you use the Centerpoint option to align the graphics and Snapshot, the wine in the lens fill remains Chablis as you make changes for the Rosé and Burgundy versions. Consequently, you could make changes in the name and color in the original comp and have all three boxes (as snapshots) lined up for review. If you made a change in the comp — such as the client's new Blue Blush wine that will replace Rosé — just clicking the Snapshot option off, to deselect it, turns the lens back into a live lens.

  • Objects Only is a little tougher to explain, but easy to see. When this option is selected, only objects within the lens outline are affected — empty areas are transparent. A solid-colored background is considered an object; the document background is not. When it is deselected, the lens effect fills the entire lens area without regard to elements beneath the lens, as demonstrated in Figure 6.17. The birds at the top of the figure are printed at 85 percent black, and the text (converted to paths) is solid black. The rectangle at the bottom of the figure contains several elements. At the bottom of everything is a rectangle with a 20 percent black tone. The rounded-corner rectangle was drawn and divided into eight separate sections, with each section receiving a different lens fill combination. All have Centerpoint turned on to place the images correctly within the lens.

    Click To expand
    Figure 6.17: The effects of lens fill options.

Figure 6.17 shows the effects of the lens fills options. The top lenses are set with Objects Only selected, and you can plainly see the 20 percent tone in the background. This shows that only the objects in the area under the centerpoint have been used in the lens. The page's background appears transparent. The bottom lenses were built with Objects Only deselected. Here, you can see that the background area, as well as the objects, has been treated with the lens effect.

Orphaned lens fill

You do stand the chance of ending up with an orphaned lens fill. That's when you have a document containing a lens fill, but the elements that make up the lens are not to be found. You can't ungroup it or split it, and a Cut Contents command does absolutely nothing. You can tell that there's a Paste Inside going on by the Centerpoint icon, but nothing seems to work. At that point, check the Fill panel and hope for a lens fill. Keep in mind that FreeHand enables you to export documents in older versions of FreeHand — even versions that didn't have lens fills.

Just export the orphaned lens as an older FreeHand file. Don't try to change the type of fill it is, or attempt to remove it — just choose File ® Export ® FreeHand 7. Because there were no lens fills at that time, the document works with what it has, which happens to end up being a simple clipping path. Open the new FreeHand 7 file in FreeHand MX, select the lens, and choose Edit ® Cut Contents. You get more than you bargained for — any element that was under the lens appears in this new document, and it is in its full, uncropped state. If the Magnify lens was used, the elements are enlarged to the extent the lens was set.


FreeHand Layers

You can imagine the layers concept as a drawing done on several sheets of clear acetate. Each layer is transparent and can contain any number and kind of elements. An extremely complicated layout or illustration can be accomplished on a single layer, but placing groups of related objects on their own layer is usually more efficient.

The Layers panel

You can accomplish many things in your illustration through the Layers panel, shown in Figure 6.18. By default, new documents contain a Guides, a Foreground, and a Background layer. To create a new layer, go to the Layers Option pop-up menu triangle in the top right corner of the panel and choose New Layer. A new layer appears at the top of the layers list and is named Layer-1, Layer-2, and so on. Double-click the name and type a distinctive name for your new layer. To select a layer, click it to highlight it, as the Logo/drwgs layer is in the figure. When you select anything in the document, that object's layer is automatically highlighted.

Figure 6.18: The all-important Layers panel.

You'll notice four icons to the left of the name. A single mouse click on any of the icons switches the function off or on. The check mark indicates visibility (the Lines layer has been turned off, and any elements on it are not visible). The circle tells you whether a layer is shown in Preview or Keyline views (the Middle layer's objects are in Keyline view). The padlock icon indicates whether a layer is locked. When the padlock icon is open, objects can be placed on that layer and modified. If the padlock is closed, as the Top layer is here, nothing on that layer can be selected or moved, and items cannot be placed on that layer. Drag a color to the square icon, and elements use that color as the bounding box and other selection indicators for that layer. This is a great aid if you're trying to select something that's in a mass of layers; Alt/Option+clicking the mouse takes you down a layer at a time, and you can watch the colors change to find the layer you want. The last element in the Layers panel is the separator bar between the Background layer and the rest. Any layer below the separator bar doesn't print and is grayed-out onscreen. You can either move the separator bar above layers, or move a layer below the separator bar, the result is the same.

Assigning objects to layers

Refer to Figure 6.18. If you draw another object that you want to place on the Lines layer, keep the new object selected and click the Lines layer. The object disappears so you have to click the blank spot to bring back the check mark and the new object's visibility. Then you realize that the lines are being blocked by something in the Top layer. Correct this by clicking and holding the mouse on the layer's name and dragging it to the new location. Locked layers can be moved up and down in the list, even though you can't modify elements on them.

Selecting objects on layers

When you need to select an object, it's a matter of clicking it with the Pointer tool. But what if you want to select all the elements on a layer (for instance, if you want to change the stroke width, or font style)? Just hold down the Alt/Option key as you click the layer's name in the Layers panel, and all the elements on the layer are selected at the same time.


Summary

This chapter gave you information on working with drawing elements in FreeHand. You learned the ins and outs of lens fills. Creation and modification of composite paths were explained, including the Union, Divide, Crop, Transparency, Punch, and Intersect commands. Then you discovered several features that make new objects out of old objects, such as the Inset Path and Expand Stroke Xtras. Finally, you found out how easy it is to organize a project by efficient use of layers.


Chapter 7: Using FreeHand MX Symbols and Styles

Overview

This chapter shows you how to streamline your work processes by using symbols and styles. You also get a handle on the Graphic Hose tool to make some truly creative drawings.

Symbols are graphic objects, text items, and master pages placed in a library for convenient retrieval at any time. For example, you might create a symbol for a company logo. Another purpose for a symbol is an address line or "text slug" that you use frequently, such as on brochures, flyers, or Web pages. The basic need for a symbol is anything that will be used more than once in a document or in several documents.

Styles, on the other hand, are divided into two types: graphic and text. If you do a lot of drawings with a 1-point green stroke and a magenta fill, you can create a style for that setup. Next time you need that combination, make the drawing in any tool you choose, and simply click the appropriate style to give the selected graphic the style's attributes. Text styles are great if you are making a brochure, manual, or Web page and have items such as headlines, subheads, body copy, indented text, or other formatting situations. Just make a style, insert the Text tool cursor into a block of text, and click the style.


Symbol Management

You may be used to importing files, such as logos, when you need them. That's worked for years, but it takes a couple steps — first you have to save (just in case the computer picks this time to crash on you); then you go to the File menu and select Import or Open, or you click a button in your Main toolbar. Then you have the fun of trying to remember where you've filed the document you need. If you decided to open the document instead of importing it, you have to select everything and copy it. Finally, you place the graphic on your page.

Clicking a symbol in the Library and dragging it to the document is much quicker.

A distinct advantage to working with a symbol is that you can make global changes in a document quickly by editing the symbol. In that way, you can change every instance of an outdated logo in one edit. If a company phone number changes and you have the phone number as part of a symbol, change the number in the symbol, and all the instances of the number are corrected.

Understanding symbols

When an element is in the Library, it's called a symbol. Drag the symbol onto the page and it becomes an instance. Choose Modify®Symbol®Remove Instance, and the element is a grouped object. After you've used Remove Instance on a symbol, it will not be affected by any changes you make to the symbol from which it came. The original symbol will not be affected by this command. Ungroup the object and you are back to the original element — provided you haven't changed the symbol.

Creating symbols

Making a symbol is really pretty simple, and you have a couple ways to accomplish the task. To do it by the book, select whatever it is you want to symbolize, and go to the Modify®Symbol menu. Choose to make the symbol by copying or converting the object. As previously mentioned, if you choose to use Copy to Symbol, the original remains editable on the page. This is good if you might want to make slight modifications — such as in the beginning stages of a project — or if you know you want different variations of this object to use as other symbols. Conversely, if you know you're not going to be changing the object in the foreseeable future, choose Convert to Symbol. That leaves the object in place on the page, and there's no original to move or throw away.

Either method places a thumbnail image of the new symbol in the Library. It is also listed with a generic name: Graphic-01, Graphic-02, and so on — even if the graphic is a block of text. Double-click the generic name to retype a new name for the symbol.

You can also create a symbol by dragging the object into the Library list window. This alternative uses the Convert to Symbol method to make the symbol. Or you can select the object and click the plus sign in the lower left corner of the Library panel to convert the object into a symbol.

Symbols are stored in the Library in alphanumeric order, so it's handy to add leading numbers to the symbol's name to push it up or down the list. You can store symbols in groups of your own choosing. Groups are also sorted alphanumerically within the Library, but you have the option of opening or collapsing groups to conserve room in the Library. One way to organize your Library is to use a group for each client, and subgroups within those groups for text and graphic symbols.

One of the greatest attributes of a symbol — or a style or master page, for that matter — is that it can be exported. Symbols and master pages end up in the Symbols folder in the FreeHand ® English folder, and styles appear in the Styles folder inside the English folder. After exporting a symbol, you can import that same symbol into a new FreeHand MX document for use. In addition, Fireworks MX 2004 and Flash MX 2004 share FreeHand MX symbol libraries.

Using symbols

In the default configuration, the Library panel is part of the Assets panel group. FreeHand MX comes with a number of symbol libraries that are installed with the product. To see what is available, and to import a symbol library, click the Library panel Options menu and choose Import. Navigate to the Symbols folder, as shown in Figure 7.1. Select a symbol library and click Open. A panel showing all of the symbols in the Library opens for you to choose which ones to import. Click the first symbol, and then Shift+click the last symbol to import all of them.

Click To expand
Figure 7.1: The symbol libraries that come with FreeHand MX.

Now you have a library full of useful symbols (see Figure 7.2). To use them, just click through the symbol name list in the Library. Each time you select a symbol, its thumbnail appears in the preview window. When you find the one you want, drag the thumbnail or the symbol name onto your document. When you release the mouse, the symbol is selected, and you can start modifying its location and size, as needed.

Figure 7.2: This library is filled with nature symbols.

Editing symbols

Double-click a symbol name or its thumbnail, or click the Library Options pop-up menu at the top right corner of the panel and select Edit from the menu to open a new window with the symbol in it. You are free to do any modification, including deleting the object and replacing it with something else. When your modifications are complete, just close the window — there's no Save or OK button to worry about in this process. You return to the document window, and all instances of the symbol have the changes you just made to the original. If you used Remove Instance on any symbols, those objects are unaffected.

Remember that if you decide to edit a symbol, the changes occur only in that particular document. For instance, consider that you created a symbol, and dragged an instance of it onto another document. In the original document, you double-click the symbol to enter the Edit Symbol window, and you make changes to the symbol. Auto-update is selected by default and will cause the symbol to be updated as soon as you close the Edit Symbol window. But the symbol in the second document will remain in its original unedited state. If you choose to edit a symbol from its location in the English ® Symbols folder, the changes are reflected in any future instances, but do not affect existing instances. Any instances remain in place in their original state.


Style Management

The consistent use of styles can be a blessing in developing efficient work habits. You can set up styles for particular types of jobs. Each company, package type, or product line has distinct fonts, colors, and other graphic attributes that can be made into styles and imported as needed. These styles can also be part of your templates or master pages, so they're constantly available.

Think about setting up a package line that involves four or five different-sized packages but has the same look as far as fonts, graphic elements, and instructional drawings. By making a separate style for the product's name, descriptive subhead, bullet point text, and body copy for the first project, you have one-click attribute settings for the next three packages. By using a style, you cut down on the chances of making a mistake by setting the wrong leading, or using the wrong color fill. Styles mean consistency.

Creating styles

Creating a text style is simple. Set any text attributes, including leading, paragraph alignment, color, baseline shift, and so on, the way you want them to be. Leave the text cursor active in the text, and click the Styles Options pop-up menu. (The Styles panel is also part of the Assets panel group.) The first item in the pop-up menu is New. Select New to add the style to the bottom of the Styles panel list with the name Style-01, Style-02, and so on. Double-click the name to rename it something meaningful. Text styles are preceded with the Paragraph Symbol icon.

Stroke and fill styles are just as easy. Draw an object with a closed or open path. Then set up the various attributes, such as stroke weight and color, fill type and color, arrowheads, dashes, and anything else that is necessary. Choose New from the Styles Option pop-up menu. Stroke and fill styles have the same numerical listing as the text styles, but a square icon appears in front of the name. Again, double-click the name to change it to your liking.

You can apply a style before you start working on something, or do the work (set text, draw an object) and then click the appropriate style from the list in the Styles menu, as shown in Figure 7.3. You can also select several objects and apply a style to them all at the same time. You can even apply a graphic style to a text object. Actually, it applies the style to the text block, not to the text itself. So you can place text in a stroked box with a solid fill. If you make the text style with the appropriate leading or baseline shift, and you have the proper insets or paragraph attributes, you can easily mix text and graphic styles for decorative effects in layouts.

Figure 7.3: The Styles panel can save time and prevent errors.

Editing styles

Inevitably, as soon as you get everything to work, someone will make a change that louses up everything. For a text style edit, select the appropriate style, and choose Edit Style Behavior in the Styles Options pop-up menu. The Edit Style Behavior menu appears, as shown in Figure 7.4. In this window, you can do just about anything required of a text selection, including changing the following:

  • Font

  • Size

  • Leading

  • Spacing

  • Alignment

  • Tabs

  • Paragraph rules

Click To expand
Figure 7.4: The Edit Style Behavior dialog box for text styles.

Make your changes and click OK to change all instances of the style immediately. This is a huge time-saver.

To edit a graphic style by changing its stroke, fill, color, or effect attributes, use the Object panel. Select a style when no objects are selected in the document and you'll see its properties in the Object panel (see Figure 7.5). Select a property and modify it in the bottom half of the Object panel. The style's name now has a plus sign in front of it in the Styles panel to show that it has been modified.

Figure 7.5: A style in the Object panel Properties list window.


Graphic Hose Tool

A further use of symbols lies in the Graphic Hose tool. With this feature, you can place multiple instances of a graphic element on the page, make each instance a different size, rotate each a little or a lot, and adjust the spacing from tight overlapping to wide gaps. Or the instances can be scattered along the path just as a custom brush would do — it's all up to you.

Working with the Graphic Hose involves two different phases of its dialog box. Open the dialog box by double-clicking the Graphic Hose icon in the Tools toolbar. Hose, shown in Figure 7.6, is the first window you should work in. If it's not open, click the Hose radio button in the Graphic Hose dialog box.

Figure 7.6: Choose groups to spray, or place graphics in the Hose window.

To make a new Graphic Hose group, do the following:

  1. Open the Hose window if it isn't already open. Click the arrow next to the group name text box and select New. Then type a name for your new group and click Save. The preview window will be empty.

  2. Click the Paste In button. Your graphic appears in the preview window and a new item named Object 1 is added to the Contents menu at the bottom of the dialog box.

  3. Select and copy other elements that you want to add to this group, and use the Paste In button to get them into your Graphic Hose. (If you decide at any time that you want to remove an object from the hose, find it in the Contents menu and click Delete. If you want to use an object but you don't want it to be associated with the Graphic Hose, simply choose it and use the Copy Out button. Then paste the item on your page.)

Now you have to decide how the Graphic Hose will spray objects on the page. Click the Options button to open that dialog box. Refer to Figure 7.7 to see the available options.

Figure 7.7: The Options dialog box enables you to change many attributes of sprayed objects.

  • Order — Dictates the order in which the objects are sprayed; the variables are Loop, Random, and Back and Forth.

  • Spacing — Modifies the spacing of the objects. Choose from Grid, Random, and Variable. Use the slider or enter a number to program the distance between objects.

  • Scale — Adjusts the size of sprayed objects from Uniform to Random. Again, use the slider to input the amount of change you desire. Regardless of the settings here, you can use the up/down or left/right arrow keys on your keyboard to enlarge or reduce the size of the objects as you're spraying them on the page.

  • Rotate — Change the orientation of the objects. Zero places objects in the same attitude as they were placed in the hose, but you can enter a number or use the wheel to set the angle of rotation within Uniform, Random, and Incremental variables.

You should test and experiment with the Graphic Hose. Each type of graphic you place in the hose necessitates a different group of Options settings, according to what you're trying to accomplish.

After you've filled the hose with objects and set the options, it's time to put the hose to work. Check to see that you're still in the Graphic Hose tool — it's an arrowhead without a shaft. Then click and drag. Depending on how fast you move the cursor, and the direction you drag, you'll get different results. Overlapping is permitted — you can drag the tool across an area as many times as you need. Figure 7.8 shows the grass hose that was made using seven freeform grass shapes. You could do this by drawing each of the elements individually, but without a graphics tablet, each stroke must be carefully placed, and the random effect is lost completely.

Figure 7.8: The effects of a simple Graphic Hose swamp as used in the Habitat Alert logo.

If you make a spray pattern and decide that it's close but needs a little work, choose the Pointer tool (or hold down the Ctrl/Command key to temporarily invoke the Pointer tool) to move or delete individual objects. The object that has been sprayed is a simple grouped object, so you can change colors, stroke widths, and fills just as you would with any other regular object.

FreeHand MX lets you to have as many as ten objects in any single hose. You can export your hoses and import hoses from other artists or other computers. All you need to do is copy the hose into the English ® Settings ® Graphic Hose folder. Any hoses that you no longer need can be deleted in the normal way.


Summary

This short chapter taught you the powerful uses of symbols and styles and explained how their utilization can save you time and increase your efficiency. You also learned how to easily make random graphic effects by working with the Graphic Hose tool.


Chapter 8: Understanding FreeHand MX Typography

One of FreeHand's strongest selling points is its type-handling capabilities. With just a few preparations, you can work through the heaviest jobs in no time at all. Beyond general typesetting, FreeHand MX offers numerous effective graphic possibilities.

Word Processing in FreeHand

You can use several different methods to do word processing in FreeHand. The following section clues you into the options that Macromedia offers you.

The Text tool

Setting text in FreeHand MX is simple enough. Just click the Text tool (type a T if you're in any other tool) and the cursor turns into a text input icon. The Text tool works only with text. You can start typing in a couple different ways. You can simply click the Text tool where you want the text in the document and start typing. On the other hand, you can drag a text block of a specific size and shape, just as you would if you were drawing a rectangle. As you begin to type, your words fill the text block, depending on the various attributes and preferences you have set for the program.

The text block is like a miniature word processor, with many of the same characteristics. Figure 8.1 shows a text block with the tab types, tab locations, and the text ruler visible. To turn the text ruler on and off, use View ® Text Ruler: The text block can be fixed — the size stays the same no matter how much text is entered, or auto-expanding — growing to contain all of the text that is entered. Auto-expanding can be set for the width, the height or both. A text block can also be switched from fixed to auto-expanding and vice versa.

Click To expand
Figure 8.1: A selected text block showing the text ruler and the type overflow indicator.

Anytime you click outside the text block, the cursor becomes the Pointer tool. When you click a text block with the Pointer, the text block is treated as an object, meaning you can change its attributes, such as font or color, but you can't change the text or select individual letters. If you click in a text block with the Text tool or double-click the text block with the Pointer tool, the selection is treated as text, meaning that you can change letters, type more, or select and apply text effects to individual letters

If you type a few characters and decide that you want a different font, you must select the entire block of copy before you change the font. If no text is selected and you change a font (and its attributes), text from that point on is in the new font, but previous text remains unchanged. If you select a text block with the Pointer tool, however, you can change attributes to all of the text in the block through the Object panel.

Text and block properties

Most of the tools you need to enter and edit text are contained in the various dialog boxes in the Object inspector. Alternatives to the Object inspector are the Text toolbar (shown in Chapter 4) or the Text menu. Using the Object panel this way is new in FreeHand MX. All text attributes are readily accessible in one place.

Text block

Highlighting the text block line brings up the Text Block properties, as shown in Figure 8.2. Here you can set the x and y coordinates of the text block, change its size, and change the block from fixed to auto-expanding and vice versa. You can also define an inset (space between the text and the edge of the block) for any or all of the four dimensions.

Figure 8.2: The Object panel showing the text block properties. Here the width is fixed and the height is auto-expanding.

Text properties

Highlighting the text line in the Properties list opens the Text Properties box (see Figure 8.3). The five buttons down the left side control the text attributes.

Click To expand
Figure 8.3: Text properties in the Object panel.

FreeHand MX provides typesetting controls that rival many specialized programs. The details are beyond the scope of this book. Refer to the FreeHand MX manual and the Macromedia Web site (www.macromedia.com) for more information.

Checking your spelling

FreeHand is just like a word processing program when it comes to performing a spelling check. Just place the text cursor in a text block and choose Text ® Spelling. You can click the Setup button in the Spelling dialog box to open the FreeHand Preferences window and turn on or off several conditions. When the Spelling Checker finds a word that is not in the dictionary, you can add it to your custom dictionary by clicking Add, along with the Exactly as Typed or All Lowercase buttons.

Finding and replacing text

It happens. You type warm fuzzy feeling throughout the instruction manual because "fuzzy worm feeling" just doesn't sound right to you. Then you find out that you're making a package for a stuffed worm . . . now what? Just select Edit ® Find & Replace ® Text. When the dialog box opens, you can type in words you are searching for and words to replace them. You can also find and replace several text features, as shown in Figure 8.4. You can choose to replace all instances at once by clicking Change All, or find and replace individual instances by using the Find Next and Change buttons. To make the search more specific, options are available for Whole Word, Match Case, or Show Selection. (You can click any or all of those buttons.) When you want to select (or select and change) all text that happens to be a particular font, use the Find Graphics button in the Main menu, and choose Font from the drop-down menu.

Figure 8.4: This Find Text dialog box looks for paragraph marks in the selected text.


A FreeHand Table Project

Here's a little project so you can get your feet wet in the typing pool:

  1. Open a new FreeHand document. Choose File ® Import, and navigate to the CD-ROM to find the file named BirdTable.rtf: in the Chapter 8 folder. The default font is Times; if you are greeted with a message stating that you don't have the correct font, dismiss it by clicking the OK button. The file will be placed with a generic font. The file should look similar to Figure 8.5.

    Click To expand
    Figure 8.5: The text imported from BirdTable.rtf into FreeHand MX.

  2. Click anywhere in the body of the text with the Text tool, and choose Select All (Ctrl/Command+A).

  3. In the Object panel change the font to Verdana (a sans serif font displays better on the Web). Triple-click the cursor on the top line of the table and change the font to a boldface.

  4. Select all again. Now you'll set tabs to format the table. Drag a wrapping tab by clicking on the symbol and dragging it to the desired position on the upper part of the text ruler. Do the same for two left tabs and another wrapping tab to the approximate locations shown in Figure 8.6. Note that as you drag the tab, a blue guideline shows where the tab will be placed in relation to the text.

    Click To expand
    Figure 8.6: Raw tablature text and its initial alignment.

  5. At this point, everything lines up, but a little more work will improve its aesthetics. Start by centering the word "BIRD" above the first column. Place the text cursor in front of the word and press the Tab key. Then drag a center tab out onto the text ruler so the word is centered above the column. Be aware that because the insertion point is in the top line of text, that line is being adjusted, but other lines in the table are ignored. Change all the tabs in the header row of text to center tabs (delete the wrapping and left tabs by dragging them off the bar) and adjust the new tabs to center the header text above each column. Save the document as BirdTable.FH11.

To make the table more reader-friendly, separate the birds with some space between the paragraphs.

  1. Select All again and click the Paragraph type attribute button in the Object panel.

  2. In the Space after Paragraph field (as shown in Figure 8.7), enter 0p6 to place 6 points of leading between paragraphs.

    Figure 8.7: Adding space to the table.

  3. Click outside the text block to deselect it, and use the Pointer tool to select it again (as an object this time). Highlight Text Block in the Properties list of the Object panel, and add a stroke. Click the Display Border option. This should put a stroke around the entire table.

  4. But now the text abuts right against the border. Select the Text Block in the Properties list and add 6 points of space around the top and sides of the text by typing 6 in the Inset l, t, and r boxes.

  5. To dress the table up a bit, make a dark header bar and reverse the text. Use the Rectangle tool to draw a rectangle the same width as the table, and tall enough to make the header row of text comfortable. Give it a fill of black. This rectangle will be on top of the text, so send it to the back (Modify ® Arrange ® Send to Back). Then choose the Text tool, triple-click the header row of text, and change its color to white.

  6. Vertical bars would make the table easier on the eyes, so select the Line tool and draw a vertical line from the top of the header bar to the bottom paragraph rule between the first two columns. Clone (Edit ® Clone) the line and move it between the next two columns, and so on until all the columns are delineated. The final result should look similar to Figure 8.8.

    Click To expand
    Figure 8.8: A FreeHand table.


Text on a Path Project

Let's do a little experimentation with text for a logo design. This is for Habitat Alert, an organization dedicated to providing a protective environment for several types of flora and fauna, including four species of birds. One of the more prominent birds is the Great Blue Heron. A silhouette of the bird should appear somehow in the logo, perhaps incorporated into a water theme.

  1. Habitat Alert site Start with a new FreeHand document, and save it as HeronLogo.FH11. Import the GreatBlue.FH11 file from the Chapter 8 folder. The silhouette has a gradient blend of light and dark blue-grays.

  2. Select the Text tool and type HABITAT ALERT somewhere on the page — its exact location is not important.

  3. Select the text and choose a heavy, bold font. The example uses 24-point Gill Sans Ultra Bold. Expand the text's width to 200 percent in the Spacing category in the Text panel.

  4. Double-click the Spiral tool and change the settings Draw by: Rotations, Number of Rotations: 3, Draw from: Edge, and Direction: Clockwise.

  5. Using the Spiral tool, drag a spiral approximately an inch and a half in diameter, similar to the right side of Figure 8.9. Even though the spiral's path seems to be drawn from the outside in, it actually begins at the center. You don't want the text to come from the center in this instance, so go to Xtras ® Cleanup ® Reverse Direction. With the spiral still selected, Shift+select the line of text, and go to Text ® Attach to Path. If luck is with you, the text will begin on the bottom or middle left and wrap around to fit tightly inside itself, as shown on the right side of Figure 8.9. Click Save.

    Click To expand
    Figure 8.9: A spiral path on the left, with text attached to the path on the right.

  6. How about making the text look like a ripple in the water? To do that, you must flatten the ellipse/spiral the text is in. The 3D Rotation tool is perfect for accomplishing this, but it doesn't work with live text. So, select the text on a path, and choose Text ® Convert to Paths. Then select the 3D Rotation tool. Click the mouse in the center of the spiral and drag upward, holding down the Shift key to maintain a vertical constraint on the distortion.

  7. To beef up the illusion more, you can add a gradient fill to the text. If you just select a gradient fill, each of the letters in the text will have its own individual gradient. So create a compound path from the text by selecting Modify ® Join. Then change the fill to Gradient in the Object panel. The gradient affects the text as a single unit. Make the gradient dark in the front (bottom), and lighter in the rear (top). In the Gradient properties, set the Handle to 90 degrees. Then select the type and position the handle vertically to get the gradient shading to look similar to Figure 8.10.

    Figure 8.10: A Habitat Alert logo concept using text on a path.

  8. All that's left is to place the Great Blue Heron in the center of his rippled logotype and send the logo to the back. (Modify ® Arrange ® Send to Back). You're finished. Save the document. The finished logo should look similar to that shown in Figure 8.10.


Graphics and Text

Text doesn't have to be centered or have exact margins. Feel free to think outside the (text) box. It's easy to place text inside graphic shapes to force a little life into your artwork. However, getting the text to work inside the graphic requires some planning.

Placing text inside a graphic

So you want to get a little creative and make your graphics more than just pretty. You want them informational too. To add text inside of a graphic, follow these steps:

  1. Open the file Herons.FH11 from the Chapter 8 folder on the CD. Open a new document and name it CattleEgret.

  2. Import the CattleEgret.rtf file from the same folder and place it on the new document.

  3. Style the text with the font and size of your choice.

  4. Copy the Cattle Egret silhouette from the Herons.FH11 file to the CattleEgret document. This bird is very small, not large enough to contain the text. So use the Transform panel to scale it about 300 percent. Ungroup it and change the fill to a light color.

  5. To flow text inside this closed graphic shape, use the Pointer tool to select the text block and the graphic. Go to Text ® Flow Inside Path. You can align text just as you would a regular text block — justified, flush left or right, or centered.

Figure 8.11 shows the text inside a graphic. The text on the right has been converted to paths. Notice that the toned background has disappeared. If you want the background, just clone one and place it behind the converted text.

Click To expand
Figure 8.11: Text flowing inside a path can be effective in a layout.

Text runarounds

Text running around a graphic can add some flavor to your artwork. The rules are simple: The graphic must not be a group or blend, and the graphic must be above (in front of) the text block. The example shown in Figure 8.12 is easy to accomplish by following these steps.

Click To expand
Figure 8.12: Text runarounds in action.

  1. Open Herons.FH11 from the Chapter 8 folder on the book's accompanying CD. Open a new document and save it as Runaround.

  2. Import the BlackHeron.rtf file from the same folder, and place it on the new document.

  3. Style the text with the font and size of your choice.

  4. Copy the Black Crested Night Heron from the Herons document to this document. While holding the Shift key down to constrain proportions, scale it to fit and ungroup it.

  5. Choose Modify ® Arrange ® Bring to Front, and Shift+click the text block. Go to Text ® Flow around Selection. In the Flow around Selection dialog box, click the Standoff icon and enter 1 in each of the Standoff boxes.

  6. Click OK, and the text reflows around the graphic.

  7. Select just the Heron and use keyboard arrows or the mouse to move the graphic around so text flows the way you want.

Depending on word lengths and other factors, the effect will either work or it won't. You can resize the graphic, or change the shape of the text block, and the runaround continues to work. Move the text to the front, however, and it runs over the graphic.

The text does not run around a group. If the shape is simple to begin with, just ungroup it. When you come across a situation where an ungrouped mass could possibly cause mass confusion, draw a simple shape that's roughly the same as your grouped object. Give it a stroke and fill of None. It's then a matter of selecting the new object and the text and applying the runaround.


Basic Text Styles

You have many effects in the Object panel at your disposal. These effects work with live text, so if you must convert the text to paths, those attributes will be lost. So it's a good idea to know how you are going to use your text. If the text is going to stay text — for example, in a document that is going to be printed — you're fine. The Live Effects will work beautifully. However, if you need to convert the text to paths to apply a filter or a special fill or another reason, you'll lose these effects. At that point, you must attempt to come up with a way to modify the text to reflect the effect you had applied.

Create shadow effects

To create drop shadows in Fireworks, Illustrator, or Photoshop, you can run a filter or two and the job is done. However, that's a bitmap project, and we're in a vector world. You can choose Shadow in the Text ® Effect menu, but the shadow will disappear if you convert the text to paths. Plus you don't have a lot of control over the shadow. You'll see a couple of ways to create a drop shadow for an object. You're going to use a Text object, but these methods work for any object.

  1. Start with a new document and type the word SHADOW a word in a bold font (Gill Sans Ultra Bold works well). Provide some extra range kerning to accommodate the shadow you are going to make by entering 5 in the Range Kerning box in the Character category of the Text properties in the Object panel.

  2. Convert the text to paths. Ungroup the object, but leave the individual letters selected. Then join the paths (Modify ® Join) to create a composite path.

Using the Shadow tool

  1. Duplicate the composite path and drag the duplicate away from the original. You'll use this to build a drop shadow with the Shadow tool.

  2. Double-click the Shadow tool to open its dialog box, and change the settings to match the dialog box in Figure 8.13. Click Apply to see what the result will be. If you like what you see, click OK. Otherwise, adjust the settings and click Apply again until you get it right.

    Figure 8.13: The settings for a soft edge shadow.

The Smudge tool

You can get many different shadow effects using the Smudge tool.

  1. Select the original composite path and duplicate it again. Drag the duplicate away from the original.

  2. Double-click the Smudge tool to open the Tool Options. Select a medium gray for the file and white for the stroke. Click OK.

  3. The Smudge tool point looks like a hand with two fingers extended. Click the word and drag a little bit down and to the right. You should get a shadow that looks similar to Figure 8.14.

    Figure 8.14: A shadow created with the Smudge tool.

You can repeat the smudge and extend the shadow if you want.

The Extrude tool

New to FreeHand MX, the Extrude tool is similar to a very smooth blend of one object with lighting, rotation and perspective added. It can be used with any FreeHand shape, including live text. To begin, click the Extrude tool and, using it, click the object you want to extrude. A bounding box with three circular controls encloses the object. The three small circles will be very close together, so drag one away from the box so you can see all three (see Figure 8.15). Clicking and dragging any of the circles reshapes the extrusion.

Click To expand
Figure 8.15: Live text at the beginning of an extrusion.

You can get exact control of the extrusion through the Object panel, as shown in Figure 8.16. It has controls for the vanishing point, the three axes' rotation coordinates, object placement, and length of the extrusion. Each of the three buttons in the left side opens a set of attributes:

Click To expand
Figure 8.16: The three parts of the Object panel that control extrusions.

  • Object or Extrude — The length, vanishing point, and position can also be controlled by clicking and dragging on one of the small circles. Figure 8.17 shows the extrusion rotated by 5 degrees in each direction.

    Click To expand
    Figure 8.17: Live text rotated 5 degrees on each axis.

  • Surface — There are five kinds of surfaces for an extrusion: flat, shaded, wireframe, mesh, and hidden mesh. The number of steps refers to the amount of detail that makes up the extrusion. This should be the smallest number that gives the desired result. The light source options are only available with the Shaded surface. Ambient refers to the lightness or darkness of the object. Use the Direction and Intensity boxes to focus the lighting.

  • Profile — The profile can be any open path. The default is a straight line, as seen in Figure 8.18. To change this, select any open path and copy it to the Clipboard (Edit ® Copy or Ctrl/Command+C). Then select the extruded object and click the Profile button. The profile type can be None, Bevel, or Static. To change the path, choose either Bevel or Static. Then click the Paste In button at the bottom of the panel. Other options are Steps, Angle, and Twist. Play with each to see what happens.

    Click To expand
    Figure 8.18: Changing the extrusion profile.

After the extrusion is complete, double-click in the center of the object to bring up an encompassing circle, as shown in Figure 8.19. The circle has a small triangle shape that indicates the zero degree point. When you click and drag outside the circle, the object rotates around the z-axis, the one from the object's center to the vanishing point. Click inside the circle and drag to cause the object to tumble around the x and y axes.

Figure 8.19: The 3D Rotation circle.

More actions with extruded objects can be found in the Modify ® Extrude submenu. Here you can do the following:

  • Release Extrude — Break up the selected extruded object into its various parts. Note that these parts are often small objects that build the mesh or the shading.

  • Remove Extrude — Return the selected object to its state before the extrusion.

  • Reset Extrude — Return the selected object to its original settings.

  • Share Vanishing Point — Extrude more than one object based on the same vanishing point. Use the Pointer tool to select two or more objects. Then click the Extrude tool and go to the Modify ® Extrude menu. Click Share Vanishing Points.

  • Rotate Extrude — Open the 3D Rotation circle a different way.

Using Paste Inside

For the last projects in this chapter, you place an image inside a block of text and use a block of text as a lens fill. This graphic effect doesn't work too well unless you have heavy blocks of text — the heavier the better.

First, put an image inside a letterform. Usually, this would be a headline, but in this case, use the Habitat Alert logo. Because of font issues, the text has been set for you, converted to paths (Text ® Convert to Paths), and each word was turned into a compound path (Modify ® Join).

  1. Start by opening the TextInGraphic.FH11 file found in the Chapter 8 folder on the book's accompanying CD. When it opens, you'll see the final result of the project and the elements you need to do it yourself. You build the logo itself in a project in Chapter 10.

  2. Select the black version of "HABITAT" and notice in the Object inspector that this is a composite path.

  3. Import TobyhannaFerns.tif from this chapter's folder on the CD. Place it so that it covers the text, and cut it to the Clipboard (Ctrl/Command+X).

  4. Select the text, and go to Edit ® Paste Inside. (If you want to experiment a bit, hold down Alt/Option and click in one of the letters. This clicks "through" the compound path and to the object that is pasted inside. Now you can use the mouse or keyboard arrows to move the image around inside the text.)

  5. You have "greenery" for the top word; how about "water" for the bottom? Import PoconoRipples.tif from this chapter's folder. Repeat the preceding steps with the word "ALERT" and you're done. Group the letterforms to make alignment easier in the future. It should look similar to the image shown in Figure 8.20.

    Click To expand
    Figure 8.20: An image inside a text block.

Let's try another technique. In this project, you use text as a lens fill to modify a graphic. The graphic can be a photographic bitmap or a piece of vector art; the technique doesn't know the difference.

  1. Move to page two of TextInGraphic.FH10 to see the finished image used for Figure 8.21. Below that is a block of text that has been converted to paths and made into a compound path. If you want to try this with another typeface, you can import any of the text files found in this chapter's folder on the CD. Import one of the images from the CD, or just clone the image at the top of the FreeHand page. Place it behind the text block, and adjust (scale) the text or the image to fit comfortably. To be more precise with this technique, you should be working with live text until everything fits, and then convert the text to paths (or a copy of the text to be safe).

    Click To expand
    Figure 8.21: Text with a Darken lens fill applied to make a shadow.

  2. This time, you don't want a compound path, because they don't work with lens fills. So select the text group, go to the Fills inspector, and select Lens from the menu. At this point, you are encouraged to experiment with the various types of lens fills and what they do to the underlying image. Some images work best with a Lighten, others with a Darken, or Transparency. In Figure 8.19, a clone of the text was placed above a Darken lens fill and moved up and to the left a few points to make the lens fill appear as a shadow. In the top third of the text, there is no lens fill; in the middle white text is shadowed with the lens fill; at the bottom there's only the lens fill. Exploration and experimentation are key when you're working with this type of graphic effect.


Summary

Typography is controllable and fun to work with in FreeHand MX, and the ability to manipulate type is one of the program's most powerful elements. The chapter began by explaining how to get text into a layout and outline some basic word processing tasks. Tabs and tables were discussed, and you built a table with wrapping tabs. Separate projects taught you about basic text styles and techniques for inline text and shadows. Finally, you learned how to place graphics in the copy itself as an inline graphic, as well as how to use text to fill graphic shapes, how to put images into text, and how to use text as a lens fill.


Project Summary

Several items produced in this chapter could be used in the Habitat Alert site, such as the bird table, the logo with text in it, the text on a path logo, and the text in the graphic. But none of these specific examples were used in the site.


Chapter 9: FreeHand MX and Web Graphics

Download CD Content

FreeHand can get you well on your way to designing for the World Wide Web even if you have minimal knowledge of HTML programming. The program makes it easy for you to design the basic graphic look and function of a site in such a way that there's little left to do but apply finishing touches in Fireworks MX 2004 and Dreamweaver MX 2004.

Turning a FreeHand Page into an HTML Page

It's easy to get started building a Web page in FreeHand MX. There is a default Web page in the Document panel pop-up menu that is preset to 550 pixels wide by 400 pixels tall — a page size that fits in a browser in an 800 × 600 window. If you have another size in mind, feel free to adjust it. For instance, you may be designing a banner ad or just the navigation system for a site.

To make your design time and ultimate production as worry-free as possible, you should start by making a master page (or a custom template) that contains all the graphics, colors, fonts, and styles that will be common throughout your site. Continuing with your goal of workflow efficiency, you should also think about using FreeHand to generate a comprehensive layout for the site. You've probably made a sketch of how the site will flow, and therefore you know approximately how many pages will be involved. Start your document with at least that many pages. Then transfer your sketchy ideas onto the pages.

Tip

With the Page tool, it's easy to lay the pages out on the pasteboard in a logical order, similar to a flowchart. By doing this, you can track your ideas better and decide what kind of navigational aids or graphics will make the site more user-friendly. To move the pages around the pasteboard, click the Zoom tool and zoom to a viewing range that enables you to see all or most of your pages. Then turn on the Snap to Grid feature in the View menu. Select the Page tool, and arrange the pages to suit the flow of the site. It's a good idea to move your first page up to the upper left corner of the pasteboard so you don't run out of room later.

In the following pages, you see how easy it is to publish to the Web through FreeHand.


Graphic Considerations

You've read it all before, but here are the basics. Different file types are available for different end uses of the file. When it comes to working on the Web, there are four basic file types that work efficiently in one instance or another Each has a specific use, sort of like a doctor specializing in feet, lungs, or eyes. They are as follows:

  • GIF — Pronounced "jiff" or "giff," for Graphic Interchange Format, this format is good for large blocks of solid color. These blocks shouldn't have gradients or soft variations in color or tone. If they do, banding occurs, because of the number of colors involved in the 8-bit color file. Think of a block of red next to a block of yellow. If you create a 25-step gradient between them, you will get various shades of orange in a smooth, blended gradient. But if you have only two steps, the jump between red and yellow is pretty severe, with only two shades of orange. This creates steps between the colors called banding. You can decide to have a few colors or as many as 256 colors depending on the type of artwork or project you're working on.

  • JPEG or JPEG (Joint Photographic Experts Group) — Pronounced "jay peg," this format is best suited for continuous tone images. This file compression type is faithful to smooth gradients, but it leaves unsightly artifacts or blotches in large blocks of solid color — especially noticeable in reds. This type of compression results from a user-defined degradation of the image. It is the most efficient method of compression for continuous tone images, but it does so at the expense of data that is discarded.

  • PNG (Portable Network Graphics) — Pronounced "ping," this is the cream of the bitmap crop, giving up to 32-bit images and alpha channel support for transparency. But it's not supported on all browsers. Microsoft Internet Explorer 5.0 supports PNG, as does Netscape Navigator 6.0, but it has a small audience right now.

  • SWF (ShockWave Flash) — Pronounced "swiff," this format is for saving vector art, especially for placement in Flash pages. Exporting a FreeHand file in SWF format maintains the sharpness and smoothness of vector art at any size, allowing the art-work to be magnified or reduced without image degradation — and it happens on the fly. Animations are an excellent use of SWF file export. Because you're working with vector files in the first place, SWF compression is extremely efficient, and files are quite small.

To be honest, FreeHand MX does a very poor job of exporting GIF and JPEG files. These are bitmapped files and definitely not FreeHand MX's forté. However, FreeHand MX works very nicely with Fireworks MX . . . and Fireworks MX does an excellent job of building GIF and JPEG graphics. At the end of this chapter, you'll see how Dreamweaver MX 2004 and Fireworks MX 2004 "play nice" with FreeHand MX.


Export as HTML

The basic premise to HTML conversion is simple: Make a page, choose File ® Publish as HTML, select some parameters, and view your page in a browser. But some additional work will result in a more polished Web page. To begin, open the FreeHand HTML Output Layers folder and take a look at a completed Web page layout, which was constructed completely within FreeHand MX. Inside that folder, you'll find three Web-page-prep00x.html pages. Double-click the 001 file's icon to open it in your default browser.

These pages are just an example of different ways to make buttons or links work. Later in this section, you can make changes to the pages and publish your own HTML page. For the moment, experiment with the three word links on the right side of the page. Text was input in FreeHand and then converted to paths. Each word was then given a link as described in the instructions that follow. This makes for a quick and easy way to maintain a particular font and size, but a user must touch the graphics with the cursor to activate the links. White space (or whatever the background color is) doesn't count; you must put the cursor directly over the graphic, and that approach is too tough on the viewer.

Click the Act button to go to page 2. Not much changes other than color and the appearance of the links. If you have the Lithos Bold font installed on your computer, you can view the text as it was designed. If not, you view whatever your browser sees fit. The underscore indicates a hyperlink, and the cursor changes immediately when you pass it over the text.

Clicking the Support link takes you to page 3, where again the text is converted to paths, but to make the button easier to hit, a filled rectangle was placed behind the text. Then the text and rectangle were grouped and set as a link. With this combination of objects, the link is easy to hit, and the integrity of the font is maintained. It's important to note that if you stroke an object, give it a fill of None, and apply a link to that object, the cursor is active only over the stroke itself.

Navigation panel

Unless you have a single-page Web site, you need links or buttons on your Web pages. Those links are easy to apply through the Navigation panel (Windows ® Navigation), as shown in Figure 9.1. This panel is briefly described in Chapter 4, but you actually use the panel in this chapter. Select any object on your page and open the Navigation panel, which provides a Name field for naming the object. By naming a linked object, you can search and select that object in the Find Graphics dialog box. The Search feature is case-sensitive, so keep your naming conventions consistent.

Figure 9.1: The Navigation panel links objects on your page to the entire Web.

Beneath the Name field is the Link field, where you can make a link to another page in the FreeHand site, or you can type a URL address to take the viewer anywhere on the Web. If you are entering your first link, the drop-down menu is empty, but each link you add is automatically added to the menu. This feature can save you a lot of typing and head-scratching when you are creating several pages that need common links. To the right of the text field is a binocular icon. Choose a link from the drop-down menu, and click the binoculars to perform a search of the entire document for items with that link. All will be selected; you can use this feature to assure yourself that each page has the correct number of links or to make a global change to the links themselves.

Building links between pages

Open the Web page prep.FH11 file, and save it to your hard drive. Give it a new name. For this project, add a fourth page and make some changes. Go to page 3, and choose Duplicate from the Document panel Options menu. The FreeHand page indicator in the Status toolbar tells you that you're on page 4, but you're really on page 3. Click the cursor anywhere on the page. (The page indicator changes to reflect your actual page view.) Then move to page 4.

This page is identical in every way to page 3, but you want to know that you've actually moved to another page in your project, so follow these steps to change the color of the major elements:

  1. Build a blue color in the Color Mixer panel (see Chapter 4 for help if you need it), and add that color to the Swatches panel by dragging a swatch of it into the Swatches panel body.

  2. Click Ctrl/Command+A, or choose Edit ® Select ® All; then Shift+click the text block to deselect it.

  3. Select Edit ® Find and Replace ® Graphics, and click the Find & Replace tab. Then, select Fills and Strokes in the Apply to box, and check Include Tints (see Figure 9.2).

    Figure 9.2: The Find & Replace dialog box setting that changes the color from black to blue.

  4. Choose Color from the Attribute menu, and select Black from the available colors under From.

  5. Choose Selection from the Change In drop-down menu, and select the blue color you just made from the available colors under To.

  6. Click Change and close the Find & Replace dialog box.

All of your graphics are now blue. To be able to navigate to this new page, though, you must put links on the other pages. Surprisingly, that doesn't take much time, but the following steps allow you to experiment along the way:

  1. Select Fit All from the magnification pop-up menu in the Status toolbar so that you can see all the pages in the document. Select the bottom piece of the circle graphic on page 1, and give it a fill — any color will do.

  2. Select the same graphic on page 2, and give it a different colored fill, but delete the stroke.

  3. Now select the bottom circle graphic on all four pages. Open the Navigation panel.

  4. Type Page 4 button in the Name field, and choose page 4 from the pop-up menu in the Link field. This links all four graphics to page 4 of this site.

  5. Click the cursor on an element on page 4, and choose View ® Fit to Page. Double-click the cursor in the text block that begins "Page 3," and when the cursor changes to the text tool, change the number 3 to 4.

  6. Select the rest of the text in that text block and type the words Back to the beginning on a substring. Note that this replaces selected text in the document.

  7. Select Back to the Beginning, and open the Navigation panel if it's not still open. Choose Page 1 from the Link menu and Get URL from the Action pop-up menu. Notice that the selected text is now entered in the Substring field.

Publish as HTML

Now you're ready to make the HTML page. This part can seem intimidating if you've never had anything to do with Web page construction before, but only because the terminology is a little strange. If you are in this category, you can have the wizard (Windows) or assistant (Mac) help you through the process. The following steps do that first; then they go through it manually:

  1. Choose File ® Publish as HTML. The HTML Output dialog box opens, as shown in Figure 9.3. The first time you open this window, you'll only have the Default choice for an HTML setting. If you save your setups, you can name them and choose them for later projects.

    Click To expand
    Figure 9.3: The HTML Output dialog box has basic settings for your Web page.

  2. Select Pages: All; check Show Output Warnings, and check View in browser or HTML editor. Select your preferred browser from the drop-down menu, or click the Browse button to find the browser you want.

  3. Click the Wizard or Assistant button (depending on the computer's operating system). The first window is an introduction to the process. After reading it, move to the next page.

  4. Page 2 lets you decide whether to set up your page using layers or tables. Layers are not supported on 4.0 version browsers, and that may prevent some viewers from seeing your site as you designed it. Tables work on all browsers, but they don't support overlapping objects and slicing may occur. The choice is yours, though. For the purposes of this exercise, choose Layers and move to the next page.

    Note

    The HTML that FreeHand MX generates has problems with both methods. Some of the graphics are lost when using layers; the links are lost when using tables. If you are going to output to layers, eliminate as many overlapping graphics as you can. (In pages 1 and 2, the two top graphics and the two partial circles on the left side were joined. The graphics in page 3 were left as separate objects so that you could see the difference.)

The original document was also published using tables in the folder FreeHand HTML Output Tables. Take a look at these pages to see the differences.

Fortunately, Dreamweaver MX and Fireworks MX work together with FreeHand MX to solve these problems.

  18. This page dictates how your vector art will be converted when the HTML page is generated. You have a choice of SWF, GIF, JPEG, or PNG. You are encouraged to experiment with these settings. Trial and error showed that PNG worked best. SWF actually lost button functionality, and GIF and JPEG both lost entire chunks of the graphics. Choose PNG, and continue to the next page.

  19. You only have bitmaps for the credit cards, but you must choose a method for reproducing them. The choices are the same as with vector art, but in this instance, use JPEG. Click the arrow for the next page.

  20. Page 5 tells you where FreeHand wants to place the HTML files. Because you'll probably make changes and adjustments in your pages, it's a good idea to place the folder where it can easily access it. FreeHand creates a folder called FreeHand HTML Output and places all the necessary files inside. Move to the next page.

  21. This page enables you to save your settings with a name that you can access from the menu on the first page of the HTML Output window. Name this setting MX Bible PNG and click the Next arrow.

  22. Page 7 is a wrap-up page explaining what you've done so far and what you can still do. Read it and click the Finish button. Hold tight until you're through with the manual HTML Output setup. Or if you're interested only in the automatic functions, you can skip to Step 18.

If you've made Web pages before, you can make your decisions on file types and so on without using the wizard or assistant. Instead, click the Setup button to open the HTML Setup dialog box, as shown in Figure 9.4.

Figure 9.4: Use the HTML Setup window to choose page attributes manually.

  23. There is a Setting Plus and Minus button at the top of the window. For first-time visitors, the menu reads Default, and the buttons are basically dead. Click the Minus button to delete a setting, and Plus to add a setting that you make in this window. For now, ignore the buttons.

  24. Immediately beneath the buttons is the Document Root field, which was filled out by the program. Make a mental (or written) note of the folder's location, or select the Browse button to put the folder where you want it.

  25. In the Layout menu, choose whether to use layers or tables to make your page.

  26. In the Encoding menu, you can choose a language for the HTML encoding. For North American and British English, choose Western (Latin1). There are 17 other language choices.

  27. Under Export Defaults, select the file type you want for vector art and bitmap images from their respective menus.

  28. Click Apply.

  29. If you want to save the settings, click the Plus button to open a dialog box in which you name the settings. Name these settings MX Bible PNG, and click OK.

  30. Click OK to close the HTML Setup dialog box and return to the HTML Output dialog box.

  31. Click the Save as HTML button.

  32. Now Freehand creates a new untitled document and selects objects on the pages without any intervention from you. Page 1 opens in the browser you selected.

It should look and react the same as the sample file on the CD, with the exception of the changes you made and the additional page. Experiment with the different types of buttons you created to go to page 4. Note how the cursor works on page 3, where the button is actually the stroke. Test the subscript link you built on page 4. If things have gone awry, double-check your HTML output settings in the FreeHand document and export the pages again.

Open the FreeHand HTML Output folder and look inside to see what FreeHand MX generated. You'll find another folder named Images, and four pages named with a sequential number.

If you checked the Show Output Warnings option in the HTML Output dialog box, a dialog box appears after the HTML output process is complete. This window notes every possible thing that can go wrong in your site. Most times the notes concern version 3 and/or 4 browser problems. You should review any of the errors it lists to make an error-free site. You can correct most errors more easily in Dreamweaver than in FreeHand.

Caution

You cannot change the names of any of the files inside the FreeHand HTML Output folder and expect the site to function. It won't. It's cast in stone. Code has been written that includes filenames. To make a change in a filename, you also have to go into each page and adjust link names. It's really not worth the trouble.

This short project gave you a chance to see how parts of the Navigation panel and HTML Output windows work. More important, you learned that you can make a quick, rough page to test basic ideas and the flow of your site before launching full-bore into Web production.


Integrating FreeHand MX Files with Fireworks MX 2004

Fireworks MX What FreeHand MX lacks in the graphic bells and whistles you see on the Web today, Fireworks makes up in a big way. FreeHand MX doesn't include a lot of features that make a Web page look alive. That's the job of Fireworks, and it's quite adept at it. Each of the programs in the Studio MX 2004 is suited to a particular job and works hand in glove with the other four programs.

Any graphics that you develop in FreeHand can be dragged and dropped, copied and pasted, exported and imported, or even opened directly in Fireworks. If you want to have airbrushed strokes, soft drop shadows, and colorful textures, you can't get them from FreeHand, but you can do the heavy lifting there, and apply the fun stuff in Fireworks. FreeHand has a larger vector-based drawing toolset that is specifically designed for illustration. Think of it as using the right tool for the job. When your illustration or layout is complete, move it into Fireworks to make textured panels, 3D buttons, and rollovers with ease.

Fireworks can import native FreeHand files, EPS (Encapsulated PostScript), JPEG, TIFF, GIF, PNG, and BMP file types, but vector art should be copied/pasted from FreeHand for the best results. If your FreeHand file contains 0.5-point (hairline) strokes, they are imported into Fireworks as a 1-point line. Although this may seem like a bug, the thinnest line a monitor can reproduce is 1-pixel, or 1-point. Anything smaller either appears at 1-point or disappears completely. Another caveat with the direct import of FreeHand files is that strokes automatically take on a round cap. The only way to maintain sharp corners on strokes is to export the files as GIF, JPEG, PNG, EPS, or BMP. Those formats provide sharp corners, but you lose the live vector editing capability available in a FreeHand copy/paste, drag and drop, or file import.

Because Fireworks is a Web-based program, it projects color in RGB. Therefore, any graphics you make in FreeHand in CMYK or grayscale are converted to RGB.

You can take a multipage document in FreeHand and import it in Fireworks as layers or as single pages. The layers you set up in FreeHand can be imported as one flattened layer if you prefer. Conversely, you can convert the layers into separate frames to make an animation. Finally, you can maintain the layer stacking order as Fireworks layers.

Other options for importing FreeHand files are the inclusion of invisible layers (layers you've turned off) and importing the background layer with the page. If you don't choose either of these options (the default), invisible and background layers are ignored in the Fireworks import.

Another option is Render as Images. This has the benefit (or hazard) of turning everything into a single bitmap. All groups, blends, or tiled fills are reduced to a bitmap object. There's a text input field where you can enter the number of objects that must be in a group, blend, or tiled fill before Fireworks rasterizes the file. If the vector you are importing has the specified number of objects or steps, it will be rasterized as a bitmap image instead of as a vector. If you don't want this to happen, remove the number from the field.

Simple button shapes are a snap in Fireworks. If you want something more complicated, you may want to set up the basics in FreeHand first, then add the bevels, highlights, shadows, and so on in Fireworks.

Another time-saver is the creation of a symbol in FreeHand that you can export into Fireworks, where you can modify it — as a symbol. All instances reflect your modifications.


Integrating FreeHand Files with Dreamweaver MX 2004

Dreamweaver MX Problems or errors in the HTML output can be handled more efficiently in Dreamweaver, because Dreamweaver is a Web page development program, whereas FreeHand is an illustration program.

In the HTML Output window, you have the option of choosing Dreamweaver MX as the browser or HTML editor to view the final output. Select this option. After all, you have arguably the strongest Web page development program right there on your machine — why not use it? Dreamweaver offers everything you could want to fine-tune your pages. Do another Publish to HTML using Dreamweaver MX as the editor. First, export the pages using tables for positioning; then publish the site again using layers. After each export, examine the site in Dreamweaver. You'll notice some features that are good and others that are bad. For instance, using tables chops the page into four or five chunks, and all the button/link work is useless. However, layers bring everything to the page as advertised. If you export and open the pages only in a browser, you'll only see that things didn't work — not why.

FreeHand MX is most useful as a design platform and test bed for HTML output in general — unless you're doing an extremely simple page layout.

To illustrate:

  1. Publish to HTML using Dreamweaver in the View in browser or HTML editor box. Dreamweaver MX 2004 opens with page 1 displayed.

  2. Click the Habitat Alert logo to select it. It is a PNG file, which won't display in all browsers. So let's use Fireworks MX 2004 to convert the graphic to a GIF. In the Dreamweaver Property inspector, click the Optimize in Fireworks icon (see Figure 9.5) to open Fireworks. In the Fireworks dialog box that opens, click Use This File.

    Click To expand
    Figure 9.5: The Dreamweaver MX 2004 Property inspector.

  3. The Fireworks Optimize window opens. (You'll learn more about optimizing with Fireworks in Chapter 21.) Change the Format to GIF, the Palette to Adaptive, and the number of colors to 16. Select Index Transparency (see Figure 9.6); then click Update.

    Click To expand
    Figure 9.6: The Fireworks MX 2004 Optimize dialog box.

  4. This returns you to Dreamweaver MX 2004. The new GIF image has replaced the PNG, and Dreamweaver has changed the HTML code for you. Repeat this for the other graphics to build a Web page that is viewable in all browsers.

Now that the images have been converted to GIFs (except the credit card image, which still is a JPEG), the HTML file in Dreamweaver is no longer the same as the FreeHand MX document that initially created it. If you go back to FreeHand MX and publish to HTML again, the old images will be back in the HTML code. To avoid this, you can import your new images into the FreeHand MX document, replacing the original objects.

  5. In FreeHand MX select the Habitat Alert logo and delete it. Choose File ® Import, navigate to the Web-page-prep folder, and select the Image01011.gif file. Click Open.

  6. The FreeHand MX cursor changes to half a square (see Figure 9.7). Click to place the GIF file.

    Figure 9.7: The FreeHand MX cursor becomes a half square. It is positioned to import the GIF file containing the Habitat Alert logo.

The next time you publish this FreeHand MX document to HTML, the Image01011.gif file will stay the same. This technique may seem a little confusing now, but as you go through the chapters on Dreamweaver and Fireworks, you'll see what a powerful tool this turnaround editing can be.


Integrating FreeHand Files with Flash MX

Fiash MX The same reasons to prepare your artwork in FreeHand before using it in Fireworks apply to the graphics you need in Flash. An added bonus is the ability to create preliminary animations in FreeHand and test the ideas before fully developing them in Flash. The FreeHand layout consists of the storyboard for a Flash movie, which you can export as scenes or frames in Flash. That simple feature can save you hours. The same document can be printed as a brochure or series of fliers, which can cut your production time drastically.

Another reason to use FreeHand to develop a Flash movie is your ability to maintain transparent lens fills when the file is imported to Flash. The fills become alpha color transparencies in Flash.

Symbols are becoming more powerful in the Macromedia arsenal of programs. FreeHand's symbols can be imported into Flash, providing extended editing in your movies. If you used symbols in one program, you won't lose any time working with them in the other program. The procedure couldn't be much easier. When you import or copy a FreeHand document, all the symbols from the FreeHand Library are imported or pasted at the same time, and placed in the Flash document's Library. The bonus is that multiple use of the same element (symbol) doesn't add any overhead to the Flash file.

FreeHand's text-handling capabilities will certainly come into play when you're designing your site. You can make styles for various text blocks in the layout and quickly change fonts, colors, and sizes to embellish ideas and concepts. The graphic search and replace can also help you make rapid modifications to your site's storyboard. When you're done, you can test the storyboard as a Flash movie with links you applied through the Navigation panel. You can print individual pages of the storyboard at high resolution to show the client, and you can e-mail the file as a Flash file for approvals or conceptual discussions. After the site is approved, it doesn't take that much more work to prepare the storyboards for printing as a multipage brochure, folder, or set of individual sell-sheets. Conversely, a group of similarly designed fliers or sell-sheets created in FreeHand can be used as the basis for storyboards.

Chapters 10 and 11 provide examples of how to develop Flash movies using FreeHand MX animations.


Summary

In this chapter, you learned how to make a series of pages in FreeHand MX as a storyboard for a Web site. You used the Navigation panel to apply links to text and graphic elements that allow the viewer to move from one page to another. Then you used FreeHand MX to publish the file as HTML so that you could view it on your browser or open it in Dreamweaver MX 2004 for further work. FreeHand MX files work freely with Fireworks and Flash, and you explored how to export files to those programs. In a project, you added a page to an existing layout and made links on other pages to be able to access the new page. Then you tested your HTML handiwork in your browser.


Chapter 10: Basic FreeHand MX Animation

Download CD Content

In this chapter, you learn how to make a simple animation you can embellish in Flash or use as is on your Dreamweaver Web site. You work with envelopes to get a taste of some fun things you can do in FreeHand and then move on to a more traditional approach to animation.

All about Envelopes

An envelope is a path placed around an object or group of objects. Envelopes are not magic, but you can do things with an envelope that are impossible without a lot of work any other way. FreeHand MX provides 21 predefined shapes — from hearts to diamonds and tombstone shapes. The basic rectangle looks like you drew a rectangle around your objects and added a point to the center of each side of the rectangle. But that's where the similarity ends. As you move the envelope's points, or modify the point control handles, the entire contents of the envelope distort as though made from a sheet of flexible rubber.

Envelope toolbar

The Envelope toolbar is shown in Figure 10.1. Open the Envelope toolbar by choosing Window ® Toolbars ® Envelope. If you click the icon on the left, the envelope listed in the text box is applied to the object you selected in the document. The pop-up menu contains the 21 presets and any other envelopes you add. The Add Preset button saves the envelope shape you are defining. Click this button to name and add that envelope as a preset that you can choose during another work session. The grayed-out icon with the minus sign is the Delete Preset button. Select an envelope preset from the menu, click this button, and that preset is history. The Copy as Path button copies an envelope as a simple path. The Paste as Envelope button is used to paste a previously copied path as an envelope around a selected object.

Click To expand
Figure 10.1: The Envelope toolbar can float free or be attached to the Main toolbar.

The next two buttons are the Release and Remove envelope buttons, respectively. Clicking the Release button deletes the envelope but leaves the distortion it provided. The Remove button deletes the envelope and returns the object to its original shape. Clicking the Show Map button applies a grid to the envelope so you can see the distortion that is taking place.

Use an envelope for a logo treatment

Habitat Alert site In this short project, you use an envelope to create the Habitat Alert logo with a watery wave effect. Start by opening LogoEnvelope.fh11 in the chapter10_exercise folder on the CD-ROM. Save the document to your hard drive. At the top of the page, you'll find the finished logo. "Alert" is supposed to look like a shadow of "Habitat." The shadow falls on water that happens to be the habitat for the herons this organization is attempting to protect. Beneath the finished logo is the starting point — the text. Everything was converted to paths and some extreme kerning was applied. You'll make some changes to the word "Alert."

  1. Make "Alert" as wide as "Habitat," and give it the appearance of perspective. You could use the perspective grid for this, but in this particular case, using the grid would be too extreme. The 3D Rotation tool is easier. Begin by selecting the "Alert" group and moving it so that the top corner of the "A" is under the "H" in "Habitat."

  2. If rulers are not visible, go to View ® Page Rulers ® Show, and drag a vertical ruler out to the right edge of the "T" in "HABITAT." Place a horizontal guideline at the bottom of the word, "ALERT."

  3. Select the "ALERT" group, and drag the bottom right selection handle all the way to the right guideline. If you have Snap to Guides selected (View menu), the cursor will more or less "slide" along the guideline and maintain the baseline of the text object. Do not deselect the group.

  4. Select the 3D Rotation tool (from the Perspective tool group on the Toolbar). Double-click it and adjust the dialog box to match Figure 10.2.

    Figure 10.2: The 3D Rotation dialog box.

  5. Place the cursor near the upper-left corner of the "E" in ALERT (see Figure 10.3). Click and hold down the Shift key (to constrain the drag to a straight line), and drag the mouse up. Watch the distortion. Stop when you think it's correct. Feel free to be creative and make the distortion as extreme as you wish. Don't worry if the word gets too thin from top to bottom, or too wide from left to right. You adjust that next. Select the Pointer tool and save your document.

    Figure 10.3: The 3D Rotation cursor on top of the "E" in "ALERT".

Now you use an envelope to make waves. Open the Envelope toolbar (if it's not open already) by going to Window ® Toolbars ® Envelope.

  1. Select the "ALERT" group, if it's been deselected.

  2. Choose Rectangle from the Envelope pop-up menu, and click the Create button. This applies a simple rectangular outline with eight control points. All of the points in corners are corner points; curve points occupy the middle locations.

  3. Just to see what's going to happen, select the upper middle point, and drag one of the control handles up or down. Pretty dramatic, huh? Choose Undo to revert to the original envelope.

  4. You want to have several waves in this design, but you can't make all those waves with a single point. So, choose Xtras ® Distort ® Add Points. The Xtra places a point midway between any two existing points. Choose Xtras ® Repeat Add Points two more times to make a total of 15 points across the bottom and top (there are an equal number of points on each side).

  5. Use the Subselection tool. Beginning with the second point on the horizontal path, drag and select the top and bottom points. (Zoom in to see better.) Then skip to the fourth set of points and Shift+drag and select that set. Continue with every other set of points on the envelope. You end up with eight points on the top and bottom selected.

  6. Press the down arrow key twice. Assuming you haven't changed the preferences for this key, you move the points down a distance of two points.

  7. You want to move the bottom eight points farther down. So deselect and reselect the "ALERT" group and, using Shift+subselect, select the same eight points on the bottom.

  8. Press the down arrow key two more times. The result should look similar to Figure 10.4.

    Click To expand
    Figure 10.4: The finished distortion.

  9. If you want to see how the envelope is doing its job, click the Map button. You should have a view similar to that in Figure 10.5.

    Click To expand
    Figure 10.5: The Map view of the envelope.

  10. Click the Add Preset button, and name this envelope Wave 1. Save your document.

Animating the logo

This could be the end of the project if you're working only for print. But why not spice it up a bit for the Web? Let's use what you've got already and make an animation:

  1. Habitat Alert site Open a new document and drag and drop the "HABITAT ALERT" words onto the new document. (Don't bring the finished artwork from the top of the page.) Close the original document and save the new document. Name it LogoEnvelope2.

  2. Select the "ALERT" group again and clone it (Edit ® Clone). Move the clone above or below the original, far enough away to give you some room to work. Hold down the Shift key to constrain your movements vertically.

  3. Use the Shift key with the Pointer tool to select all the points you previously selected and moved (every other point on the horizontal path sections).

  4. Press the up arrow key four times.

  5. Deselect all the points on the top row, and press the up arrow key four more times.

  6. Click the Add Preset button and name this envelope Wave 2. Save your document.

  7. With the cloned wavy text still selected, release the Envelope by clicking the Release button in the Envelope toolbar. (Don't click the Remove button. It restores the text to its original format.) Then click Modify ® Join.

  8. Select the original wavy text and release the envelope. Join it as well. (Do not join the two sets of wavy text together!)

  9. Select an appropriate color for water; a light blue-green, for instance, and apply it to one copy of ALERT. (Make it the Fill color.)

  10. Darken the color and apply it to the second copy.

  11. Align the two copies of ALERT. Shift+select both copies, choose Align top for the horizontal alignment in the Align and Transform panel, and click Apply.

  12. Deselect the bottom word. Clone the top word, and send it to the back. (Modify ® Arrange ® Send to Back)

  13. Drag a selection box around all three copies, and choose Modify ® Combine ® Blend.

  14. In the Object panel, change the number of steps in the blend to 10.

  15. Select Xtras ® Animate ® Release to Layers. In the Release to Layers dialog box, select Sequence and leave the other options unchecked. Click OK.

  16. Change the color of the word HABITAT to a dark sky blue.

  17. Move the word HABITAT to its correct location directly above the wavy words, and place it on the Background layer. To do this, select HABITAT. Double-click the word Background in the Layers panel. Then deselect HABITAT. It will appear gray, but its color hasn't changed. This action allows HABITAT to appear on all frames of the animation.

  18. Turn off the Guide, and Foreground layers. The only visible layers should be the Background layer and layers containing the words "New Layer," as shown in Figure 10.6.

    Figure 10.6: The Layers panel with the visibility of the Guides and Foreground layers turned off.

  19. Open the Movie panel (Window ® Movie ® Test). Test the movie by clicking the control buttons at the bottom of the panel.

  20. To save the file as a movie, it must be exported. First, click the Settings icon at the bottom of the Movie panel. Make sure that Autoplay is checked, and click OK. Then click the Export icon at the bottom of the Movie panel, and choose Macromedia Flash SWF. Give your animation a name and click Save.

Notes on animations

In this project, three versions of the wavy word were used so that the movie will loop. If you have only Up and Down states, so to speak, the animation goes up, stops suddenly, and starts at the bottom again, only to repeat itself in a herky-jerky motion. In some instances, that could be exactly what you want to do. In this example, however, you want a smooth — fluid, if you will — motion without beginning or end.

The number of layers must be maintained between all the animated elements. If you make your initial animation with 25 steps, and then draw something else that FreeHand blends into 18 steps, you'll have 7 steps in which the second element doesn't appear on the Stage at all. Keep in mind that the number of blend steps you apply in the Object inspector must be added to the initial objects that make up the blend.

You can make this animation much more colorful if you want to give the words a gradient fill. Just remember to give all the words the same number of colors in the fill. The colors can be as different as black and white, but they must number the same.

On the CD-ROM

A copy of the logo and animation is in the chapter10_exercise folder. The filenames are LogoEnvelope.fh11 and habitatwave.swf.

Sealing the envelope discussion

During the project, you saved two envelopes. Those can be chosen at any time to be applied to any graphic you choose. You can click the Copy as Path button to copy the envelope to the Clipboard. When you paste it, you have a normal path to work with. You could use it to outline the enveloped graphic, or as a basis for a blended fill or contour gradient fill. Many uses will occur to you as you work with envelopes. Lastly, you can delete them by clicking the Remove Preset button if you know you won't need the envelope in the future.


Basic Animation

The previous animation project got its muscle from a distortion envelope, blends, and the Animate Xtra. In this animation, you rely on drawn objects instead of envelopes. Obviously, this takes a bit more time and drawing skill. This animation will be basic in and of itself, but it will take on life when you add to it in Flash.

This project (shown in Figure 10.7) is found in the Chapter10_exercise folder on the CD-ROM. Open Flying Heron Animation.fh11 file to begin, and save it to your hard drive. The jumble of gray shapes is actually three separate birds (see Figure 10.8). As in the previous animation, you want it to loop seamlessly, so the first and last states are identical, and the middle state has moved. The birds are broken down into three parts each: front wing, body, and back wing. Both wings are made in a sandwich style, with the high wing making the front and back, and the lowered state of the wing in the middle. The body could have stayed in a static location, but a bird's body rises just a bit as the wing flaps down. Besides that, it looks neater. To preview the finished movie, double-click HighHeron.swf on the CD-ROM.

Click To expand
Figure 10.7: The great blue heron in flight.

You may want to work on several layers as you're building an animation of this sort, because of the multiple elements you have to deal with. But it's very important that you have all the final elements (the blends) on a single layer when you use the Animate Xtra. If you don't, the animation will not work properly. This document has all nine elements on the same layer — three copies of the bird, one on top of the other.

Click To expand
Figure 10.8: The three versions that make up the animation, separated and viewed in Keyline mode.

  1. Begin by switching to Keyline view (View ® Keyline or use the pop-up menu at the bottom of the document window). Then select the two top wings and hide them (View ® Hide Selection). You might think that something went wrong, because the wings appear to be there still, but you're looking at the end state of the animation. Select those wings and hide them as well.

  2. Select the bottom two wings (see Figure 10.9) and hide them. There are only two to hide.

    Figure 10.9: The bottom two wings selected.

  3. Drag a selection around the bodies of the three birds. Look in the Object inspector. It should say that you have three objects selected.

  4. Choose Modify ® Combine ® Blend. In the Object inspector, change the number of steps in the blend to 12. Save.

  5. Select View ® how All; then select the body blend and hide it.

  6. Select and hide the two top front wings and the bottom front wing. You should have just two wings left on the screen.

  7. Drag a selection box around the two wings that are left, and blend them as you did previously. Change the blend steps to 12. Save.

  8. Select View ® Show All again, and this time hide both the body blend and the blended wing.

  9. Repeat the blend and blend steps operation on the wings on the birds' left side.

  10. Select View ® Show All. In Keyline view, the document should look like Figure 10.10. Save the document.

    Click To expand
    Figure 10.10: Three separate sets of blends make up the animation.

  11. Now for the fun part. Drag a selection box around all three blended groups or, easier, use Edit ® Select ® All in Document. Choose Xtras ® Animate ® Release to Layers. In the dialog box, select Sequence, and leave the options unselected.

  12. Nothing much changes on the screen. The Layers panel has several new layers. Choose Window ® Toolbar ® Controller to test and export your movie.

  13. Click the Export icon and select Macromedia Flash SWF for the file format. Name the file HighHeron. (FreeHand appends the .swf extension to the filename.) You use this file later in the Flash section.

When you watch the animation, you'll see that the wings aren't perfect. To create a more precise animation, you can make intermediate steps in the animation instead of views at the extremes of movement. You'll make that decision based on accuracy versus time, money, drawing ability, and how important the image is to the overall effect of the site.

Waving Reeds project

This project is a short one, because most of it has been completed in the file named Reeds.fh11 in the Chapter10_exercise. Open that file and save it to your hard drive. The point of this animation is to give the appearance of a lot of action, when in fact not much is really happening. If you want to view the completed animation, double-click the Reeds.swf file on the CD-ROM.

If you want something to remain on the Stage throughout the animation, you must place it on the Background layer. The Background layer in this document contains four bird silhouettes, a lot of reeds, and some text. Four other groups of reeds have been placed on the Waving Grass layer, and three of them have been set up for you.

A selection box was dragged over the bottom edge of small areas of grass in the original logo concept. The selection was cut and pasted into the document, where it was converted into a compound path (Modify ® Join). To make a looping animation, make a clone from the compound path and modify it for the midpoint of the animation. Skew it left or right — a little or a lot for a random look — and shorten it to make the reeds appear as if they are bending in the breeze. That takes care of the first three groups of reeds. You can do the next one now:

  1. Select the group of reeds on the far right, and assure yourself that it is a composite path by looking in the Object inspector. Clone the reeds.

  2. Choose the Skew tool and place the cursor at the bottom of the lowest reed. Hold down the Shift key to constrain the skewing, and move the cursor the way you want the wind to blow.

  3. It will look as if the reeds have stretched instead of bent. Press the Ctrl/Command key to switch to the Pointer tool temporarily, and grasp a top corner of the grouped reeds. Drag that corner down until the reeds look about the same length they would be if they'd been bent as far as you skewed them.

  4. Select the original reed group again, and clone it. By default, the clone rises to the top of the stacking order. Bring it to the front just in case (Modify ® Arrange ® Bring to Front). You need an original in the back and the front, with the distortion in the middle of the animation sandwich.

  5. Drag a selection box around the three groups of reeds that you've been working with. If you accidentally selected an adjacent group of reeds, hold down the Shift key and deselect it. Choose Modify ® Combine ® Blend.

  6. In the Object inspector, change the number of steps in the blend to 6 and press the Return or Enter key. Save your document. It should look similar to Figure 10.11.

    Figure 10.11: Four groups of reeds prepared to animate.

  7. Select all sets of reeds that will be animated. Go to Xtras ® Animate ® Release to Layers.

  8. When the Xtra is through, go to Window ® Movie ® Test. As before, if a section of your animation moves and snaps back into a starting position, the stacking order of the graphic elements that make up that section are out of order. Stop the animation by closing the window, then choose Edit ® Undo and make the necessary changes.

  9. To prepare this animation for the Web, go to File ® Export, and choose Macromedia Flash SWF as the file format. FreeHand appends .swf to the file's name. The file can be placed in an HTML page or imported into Flash for further animating.


Use of Symbols and the Library

If you plan on doing animation that involves talking heads, walking and running characters, and moving scenery, you would be wise to develop those objects in FreeHand and make them symbols. When a FreeHand animation is imported into Flash, all the symbols related to the project ride along and can be found in the Library. As you probably know, this can save you valuable disk space and loading time, and improve the overall performance of the movie.

FreeHand symbols work seamlessly in Flash. Once there, you can turn them into anything that Flash can use. You can make symbols into buttons, Movie Clips, and graphics. See the Flash section of this book for more information.

The scope of this book does not allow a discussion of traditional animation techniques. Constructing the drawing for animated characters and props is a project meant for FreeHand, and the storyboard and general conceptual work can be done there to speed up your workflow.


Summary

This chapter consists of mostly animation projects. First, you learned how to work with FreeHand's Envelope feature and the 3D Rotation Xtra to make a distortion. The resulting distortions ended up in a logo that appears to be floating on water. Then you taught a bird how to fly with a slightly different kind of animation that can easily be turned into a Movie Clip in Flash for some really neat effects. And last, you made the wind blow through a bog of reeds. Not bad for a drawing program!


Project Summary

Habitat Alert site Let's take a look at what you've done in this chapter that will be used in the Habitat Alert Web site. Some of the images need additional work in another section; some are ready to use in another application.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
HabitatWave.swf | You made a simple animation that makes the reflection of the logo look wavy. | This file will be used in a Flash animation for an e-card.
Reeds.fh10 | Using various distortions, you made a few bundles of reeds appear to be an entire field of waving reeds. | This file will be used in a Flash animation for an e-card.
Flying heron animation.fh10 | You made a simple animation involving three objects–a body, and two wings–that make the bird appear to be flying. | This file will be used in a Flash animation for an e-card.


Chapter 11: FreeHand MX Animation Techniques

Overview

Chapter 10 used FreeHand's envelopes and layer-based animations to develop movie files. This chapter explains more elaborate animations and shows how to work with the Navigation panel to enrich the user's experience. The chapter works through an entire project to understand the concepts better. The completed project plus an additional example are on the CD that accompanies this book.


FreeHand MX Animation

After spending considerable time and effort on your concept, you can make your FreeHand animations in several different ways. After you decide on a method, it's a matter of producing the artwork and exporting the document as a SWF file. You can place the SWF file on a Web site or a CD. Or you can send it as an e-mail attachment. (The file is viewed with Flash Player.) You can, and should, save the file as a FreeHand file (.FH11) as well.

New Feature

Tighter integration with Flash is an important new feature in FreeHand MX. SWF files can be directly imported, placed, previewed, and re-exported in a FreeHand MX document. SWFs that are generated from a FLA file and placed in a FreeHand MX document can be edited in Macromedia Flash MX — just click the Object panel. A FreeHand document can be imported directly into Flash. In Flash, each page becomes a scene or a frame, depending on how you set the attributes in the Movie Settings dialog box. With that in mind, you can build a FreeHand document that can be utilized to set up the skeletal structure of a Flash movie.

Note

The controls you apply through the Movie Settings panel remain in effect until you change them, either during a session or between separate movies. If you output an animation using Flatten Layers in the Movie Settings panel and then export a movie that was built a week ago using Animate Layers — without changing the settings — the movie will not export correctly. You must always open the Movie Settings panel, make the choices for the particular movie, and then test or export the movie.

Flash action concepts

You can use Flash actions in a FreeHand movie. You apply these actions from the Action pop-up menu in the Navigation panel (see Figure 11.1).

Click To expand
Figure 11.1: The Navigation panel with the Actions pop-up menu.

To apply an action, select an object or group of objects in the FreeHand document, click the Action arrow, and choose the desired action from the menu. Some of the actions, such as Go To, Print, Load/Unload Movie, and Tell Target, require additional parameters such as page and layer information, events, and other actions. These parameters appear in the Navigation panel when applicable. If you're a Flash user, most of the Flash actions will be familiar. If you're new to Flash, the following is a list of some of the actions:

  • Go To and Stop — Takes the viewer to a particular page and layer (frame or scene) in your movie and stops.

  • Go To and Play — Takes the viewer to a particular page and layer (frame or scene) in your movie and continues to play from there.

  • Play — Plays the movie.

  • Stop — Stops the movie.

  • Get URL — Retrieves the URL listed in the Link section of the Navigation panel.

  • Print — Tells which frames may be printed. There's an additional section in the Movie Setup dialog box that enables you to set the quality of print output.

  • Full Screen — It's polite to let the viewer see your movie at the size you make it, but if you want to take over the entire monitor, you can use this to put the movie into full-screen mode. No menu bars or controls are visible; the viewer must press the Escape key to stop the animation and return the use of the monitor to normal.

  • Start/Stop Drag — Lets the viewer drag (or stop dragging) a specific Movie Clip around the movie's window.

  • Load/Unload Movie — If you have a document that contains two or more pages, you can load additional movies into RAM while the current movie is playing. This can prevent unwanted delays while the movie is spooling up. Unload Movie dumps the movie from the computer's RAM.

  • Tell Target — If you load another movie or Movie Clip while your current movie is playing, Tell Target controls them. FreeHand allows only one level of loaded movies, so you can only load one movie at a time.

    Note

    The actions Load Movie, Unload Movie, and Tell Target are available only if the document has multiple pages.

The Movie Settings dialog box

Movie Settings are really the export options and determine how FreeHand MX objects are translated into Flash Movie Clips. The graphic on the upper right of the Movie Settings dialog box, shown in Figure 11.2, illustrates your choices.

Figure 11.2: The Movie Settings dialog box sets the export options.

Layers and pages

The Movie and Layers selections of the Movie Settings dialog box work together to determine how the document will be translated into a movie.

The Movie options include the following:

  • Single — Uses all of the pages in the document to build one single movie. You will probably use this choice most often.

  • Multiple — Makes a separate movie from each page of the FreeHand MX document.

The Layers options include the following:

  • Animate — The usual choice here. Each layer in a page becomes a separate movie frame.

  • Flatten — Translates all of the layers in a page to a single movie frame.

Each page and layer becomes a movie frame when the choices are Single and Animate. If you have multiple pages, each with multiple frames, you could choose Multiple and Animate (see Figure 11.3). This would export as many movies as there are pages in the document. Each movie will consist of as many frames as there are layers in the page.

Figure 11.3: The Layers and Pages options illustrated.

  • Page Range — You can either export all pages or select a range of pages from the FreeHand MX document.

Movie properties

  • Autoplay — Select this option if you want the movie to play from beginning to end when it starts. Otherwise, the movie goes to Frame 1 and stops. You would deselect Autoplay if you were using Flash actions to control the movie, for example.

  • Full Screen Playback — Forces the movie to play in full-screen mode when played in the Flash Player. The viewer has to press Escape to stop the playback. (Web browsers are affected by this choice. The browser window determines the playback size.)

  • Frame Rate — The default, 12 frames per second, provides a smooth animation in most cases. However, you can choose a frame rate from .01 fps to 120 fps.

  • Background Color — Specifies a background color for the movie by selecting a color from the pop-up color palette.

  • Allow Printing — Allows the Flash player to print each frame of the movie. When deselected, the file prints using the browser resolution.

  • Protect from Import — Prevents a SWF file exported from FreeHand MX from being imported by other users.

  • Size to Match Contents — Determines the size used for movie playback. Checking this uses the dimensions of the animation for playback; deselecting it uses the FreeHand MX.

Optimization

  • Optimize for File Size — Automatically sets the parameters to build a smaller movie file.

  • Optimize for Quality — Produces a higher-quality movie file but results in a larger file size.

  • Advanced — Supports manual control of the Optimization settings that include the following:

    • Path Compression — There are seven choices, from None (no compression) to Maximum (fewest points), to control how FreeHand MX paths are converted to Flash paths. Maximum is lowest quality.

    • Trace Dashed Strokes — If checked, dashed lines are converted to multiple Flash objects.

    • Image Compression — Bitmap images in a movie are converted to JPEG format. This controls the amount of compression applied, from None (highest quality) to Maximum (highest compression).

    • Text — There are three choices controlling text export:

    • Maintain Blocks — Keeps the text together as a block and allows it to be edited in Flash.

    • Convert to Paths — Gives the same results as the Text ® Convert to Paths option in FreeHand MX. The result is no longer editable as text.

    • None — Omits the text from the exported file.

  • Compress Movie — Reduces the final file size of the movie.


The Bird Facts 101 Project

The concept of this animation is simple and silly, as shown in Figure 11.4. You can see the completed movie (BirdFacts101.swf) on the CD-ROM. Double-click the file's icon to start Flash Player and run the movie. There are five labeled eggs at the bottom of the screen. When the cursor moves over four of the eggs (a mouse-over event), the Go to Flash action moves the movie to a particular page. The last egg requires the viewer to click the mouse (an on-press event) that takes the movie to a page with a frame event that causes six layers to play in succession. Whenever the mouse moves off an egg, the movie returns to page 1.

Figure 11.4: The page 1 layout for the Bird Facts 101 movie.

It sounds complicated, but if everything is done correctly, the movie works. One little mistake, however, and nothing happens. Working with actions follows high-school physics laws: For every action, there is an equal but opposite reaction. With a FreeHand movie, you have to apply an action to get something to happen, and apply another action to get it to stop or change. Working out the original concept is probably the toughest part. For that, start by making a simplistic movie design, based on pencil-and-paper sketches of the concept. Just use shapes for the graphics (buttons, etc). Don't bother typing in the text. Then, make the buttons, layers, pages, and actions work in this dummy document. When it functions the way it's suppose to, use this document as the blueprint for the final work. Building the dummy keeps the work to a minimum, and as a bonus, you have a skeleton.

Creating the artwork

To make the project go quickly, the artwork has been converted to symbols and is on the CD-ROM in the chapter11_exercise folder.

  1. Open the CD and copy the BirdFacts101Symbols.FH11 file. Paste this document into your FreeHand English/Settings/Symbols (or equivalent depending on your operating system) folder. To make things easy, all text in the document has been converted to paths. This solves the problem of missing fonts, but it also negates some of the choices in the Movie Settings panel.

  2. Open FreeHand MX and start a new document.

  3. In the Document inspector, change the page size to Web size (550 pixels wide by 400 pixels high).

Obtaining symbols

You learned how to create symbols in Chapter 7. For this exercise, you'll use some symbols that have already been created.

  1. In the Assets panel, click the Library tab or select Window ® Library.

  2. Select Import from the Options pop-up menu on the Library panel.

  3. The window should open to the Settings folder. Navigate to the Symbols folder, and double-click BirdFacts101Symbols.FH11.

  4. The Import Symbols window opens, showing a dozen or so symbols. Select the upper left symbol. Hold down the Shift key and click the last symbol in the window to select all the symbols. (If you only want to import two or three noncontiguous symbols, use the Ctrl/Command key.) Click the Import button.

The Library should look like Figure 11.5.

Figure 11.5: The Bird Facts 101 Library contains all the elements for the movie.

Layering the art

Remember that symbols are more or less "dumb" when you place them in a document. Any actions you applied to them before they were made into a symbol will not work, and of course, you can't modify them other than normal transformations — no color or attribute changes. To make an instance of a symbol functional, it must be released from its symbol status (you have to break the link between the artwork in your document and the artwork in the Library). At that point, actions work and you can modify the artwork any way you want. Because you released the instance, any changes you make to the symbol itself don't affect the art you just placed and released, and changes to the artwork in the document don't affect the symbol.

Now you can begin to put the page together:

  1. Start by placing an instance of the background graphic onto the document. Click on Background Graphic in the Name column in the Library panel. Then click and drag either the icon next to the name or the graphic in the Library window to the document. Fit it to the page by setting its x and y coordinates in the Object panel to 0.

  2. Go to Modify ® Symbol ® Release Instance, to return the symbol to simple artwork. Then ungroup the objects (Modify ® Ungroup).

  3. This background graphic consists of three objects, two of which are important to the movie. The mechanics of Flash actions require an event to take the viewer back to a given page. In this animation, you want the viewer to return to page 1 whenever the cursor is not on an egg. Note that there are two rectangles defined: the yellow-to-blue gradient that covers most of the background and the tan-and-brown gradient on the bottom. These are used as mouse-over areas that return the viewer to page 1. An action needs to be assigned to both background rectangles to accomplish this return. Click on the pasteboard to deselect everything, and then select the upper rectangle.

  4. Open the Navigation panel (Window ® Navigation). Fill in the text boxes as shown in Figure 11.6.

    Figure 11.6: The Navigation Panel settings for the large rectangle in the background graphic.

  5. Select the bottom rectangle and fill in the Navigation panel as shown, but with two differences: Name: Bottom Turnaround and Notes: This button returns the viewer to page 1.

  6. Select all of the background graphic (Ctrl/Command+A, or Edit ® Select ® All), and group the background (Modify ® Group).

  7. Drag the Harry Heron, Page1Text, and Egg Text symbols onto the page, and locate as shown back in Figure 11.4.

  8. Drag instances of Great Blue Egg, Great Egret Egg, Black-Crowned Egg, Cattle Egret Egg, and Goose Egg into position on the page. Each egg should hover over the shadow above its name. Release each instance (Modify ® Symbol ® Release Instance). Save the document.

Setting the navigation

Each egg will provide a link to another page that has information specific to that bird. An argument could be made that the viewer should click each egg to start the event, but I liked the idea of a mouse-over for the first four eggs, then a mouse click to drive the animation attached to the Goose Egg. (You'll add this animation later in the chapter.)

There are two ways to set up these actions in FreeHand MX: Use the Navigation panel or use the Action tool. You'll continue to use the Navigation panel in this exercise. The Action tool requires that both parts of an action exist (the trigger and the result). Only the trigger is on page 1, but many of the parameters governing an action can be set up at this point using the Navigation panel. As you'll see in the next section, you're going to build the animation by duplicating this page. The actions you set up now will be copied into the other pages as the duplicates are made.

  1. Click the Great Blue Egg, and fill in the Navigation panel as follows:

    • Name: Great Blue

    • Link: Page 2

    • Action: Go to and Stop

    • Event: on(over)

    • Notes: Go to page 2 to view the Great Blue Heron data

  2. Do the same for each of the other eggs, changing the Name, Link, and Notes appropriately. For page 6 (the Goose Egg), change the event to on(press).

Now you need five more pages to fill out the movie. To do so, follow these steps:

  1. Create a single duplicate page by choosing Duplicate from the Document panel Options pop-up menu.

    Note

    Don't use the Add Page icon at the bottom of the document window; otherwise, you will have to re-create all of the objects on the page.

  2. Go to page 2, and drag the Great Blue INFO symbol onto the page. (Use the Status toolbar at the bottom of the document window to move between the pages.) Place it on the Foreground layer in the upper right of the document. Set its x and y coordinates in the Object panel to x = 285 and y = 110.

  3. Make four duplicate copies of page 2.

  4. Go to page 3. Delete the Great Blue INFO, and drag the Great Egret INFO onto the page. In the Object panel, set its x and y coordinates to match those of the Great Blue — 285 and 110.

  5. Repeat this process for pages 4 and 5. On page 4, drag the Black-Crowned INFO symbol; on page 5, drag the Cattle Egret INFO symbol. Set the x and y coordinates. Each of the INFO instances should be on the Foreground layer of its appropriate page.

  6. Go to page 6 and delete the Harry Heron and the Page1Text instance. Drag the YeeHaaHoo symbol onto the page. Place it so that the "Take me to the Habitat!" words are over the Goose Egg. Release the instance.

  7. You have to update the navigation. When you set the links, pages 2 to 6 didn't exist, so the parameters of these links defaulted to Next Frame. The Parameter field has to be updated to reflect the actual page. You can do this from any page in the animation. Select a single egg and click the binocular icon to the right of the Link field in the Navigation panel. This action selects all objects in the document that are linked to that particular page, so you should see six objects selected in the Object panel.

  8. Set the Parameters to the same page as Link by clicking the small arrow and making the selection. Nothing else should change: the Links field has the page you want to jump to; the Action should be Go To and Stop; and Foreground should be in the box under the Parameters box. The Event should be on(over), except for page 6, where it should be on(press).

    Note

    To see the effect on all pages, you can change the magnification selection in the Status toolbar to Fit All. Then all six pages will be visible as thumbnails. Light blue lines connecting the pages illustrate the links.

  9. Save the document.

Now test the movie:

  1. Open the Controller toolbar if it isn't open already (Window ® Toolbars ® Controller). Open the Movie Settings and set them as shown in Figure 11.7. Make sure that Autoplay is turned off. Click OK.

    Figure 11.7: The Movie Settings panel for this movie.

  2. Select Test. FreeHand MX collects all the information, and after a few seconds, the movie starts. It should remain static until you run the cursor over one of the eggs. As soon as the cursor is over an egg, the movie should move to the appropriate page and stop until you move the cursor over the background area again, returning the movie to page 1. When you've had just about enough excitement, close the Flash Player window to return to your FreeHand MX document. Correct anything that may have been wrong. You can check things out in the original FreeHand MX document BirdFacts101.FH11 in the chapter11_exercises folder on the CD.

  3. Export the document as a SWF file. Choose File ® Export and select Macromedia Flash (SWF) in Save as Type. Click Save.

  4. Save the FreeHand MX document.

Final animation

If you want to have a simple static page, you can place the Swoosh Marks and Legs Only symbols on the page with the YeeHaaHoo text graphic and leave it at that. But you probably noticed that the finished movie on the CD has another animation on page 6. All the elements you need to add it are in the Library. Now you are going to animate the YeeHaaHoo graphic using frames. If you want to make a slightly more complicated animation, make copies of the legs and place them on the same layers as the YeeHaaHoo. Don't forget to release each instance after you drag it from the Library.

  1. To prepare page 6 for the animation, select the YeeHaaHoo group and hide it (View ® Hide Selection).

  2. Select everything on page 6 and click Background in the Layers panel to move everything that is left. Anything that is on the Background layer will appear in every frame. The page will appear grayed out. Click off the page to deselect everything.

  3. Choose View ® Show All. Select the YeeHaaHoo graphic and animate it by clicking Xtras ® Animate ® Release to Frames. The YeeHaaHoo symbol was built in several smaller chunks and grouped. Release to Frames places each piece on a separate frame.

  4. The Goose Egg action needs to be changed to reflect the additional animation. Select the Goose Egg. In the Navigation panel, click the binoculars by the Link text box to get all six eggs. Change the Action to Go To and Play.

  5. To continue the animation, select the Yee part and set the Action to Play and the Event to Next Frame.

  6. Test your movie. Now is a good time to experiment with ways of developing the frames. For example, the animation as currently set up ends up with just the OO showing. To end up with the whole shout, the various elements have to be copied onto the appropriate frames.

  7. Export the movie and save your document.

Printing the movie

At times, you want to let your viewer print scenes from your movie. You can continue working with the movie you've built, or use the FreeHand artwork (BirdFacts101.fh11) on the CD-ROM.

To add printability, you make a few modifications. First, you'll require that the viewer click the background to return to page 1, by changing the action in the Navigation panel from on(over) to on(press). That's not asking too much, and it solves a major problem: how to get from an egg to another object without going back to page 1. To make the discussion simple, you'll work on page 2 only and follow these steps:

  1. Go to page 2 and select the background rectangle.

  2. Open the Navigation panel (Window ® Navigation) if it's not already open and change the Event to on(press).

  3. Repeat for the lower, small rectangle.

Getting past page 1 is the easy part. But how does the user select a page to print? You'll provide a place for the user to click. There are a couple of obvious choices — the egg that the viewer chose to get to the page or the bird silhouette. To simplify your decision-making process, think about where the user has her or his cursor on the page.

  41. Using the Text tool, type the word PRINT on top of the Great Blue Heron egg. Use a font face and size that you like. You can format the word any way you like — for example, use an envelope as in Figure 11.8.

    Figure 11.8: Page 2 is set up so that it can be printed.

  42. Select the egg, go to the Navigation panel, and choose Print from the Action menu.

  43. For the Event, choose on(press). Select Page 2 from the pop up-menu in the first text box under Parameters. Then select (All) from the pop-up menu in the second text box. The All selection prints the background and all visible layers. If you want to only print a particular layer, you could select it here. BirdFacts101p.FH11 has the Print selection on page 2.

Repeat these steps for each page that you want to make printable.

Testing the movie

Test the movie as before, with the Test Movie command. When you get to the Goose Egg, you should see an animation (if you made one), and clicking an egg prints that page. Clicking the background takes you to page 1.

Moving outside the movie

Now that you're an accomplished movie producer, how do you get out of the movie business and into the real world? Simple. More actions. This time, go to page 6 — the Goose page.

Select the Goose Egg and open the Navigation panel. Type a Web address in the Links field (remember the http:// part of the address). When the linked Goose Egg is clicked, the computer starts your browser and you go to the Web page in the link. You can go to other movies or HTML pages if you place them within the same folder as the current movie.


The Hungry Heron Diner

An additional example of using FreeHand MX to build animations is on the CD-ROM. The idea behind this movie is to have several animations going at once, and use actions and sleight of (Free)hand to make a simple game-type movie (shown in Figure 11.9). The concept is that herons and egrets have interesting eating habits and don't necessarily like broccoli. Clicking various menu items causes the heron to eat what has been clicked.

Click To expand
Figure 11.9: The Hungry Heron Diner movie.


Oddball Movie Tricks

You've seen several ways to make FreeHand MX movies, but there are other little tricks that you can use to add some quick and cheap effects to your presentation. Remember, you can always edit the FreeHand MX file in Flash, where you can add sound and ActionScripts.

Here's an easy way to make an animation. FreeHand's text blocks and animation work together very well. If you set a line of text and use Release to Layers, the letters that make up the text you typed appear on the screen as though you were typing them. Type Animation is cool! in a 72-point font. With the text block selected, choose Xtras ® Animation ® Release to Layers. Choose the Build option. Turn Autoplay on the Movie Settings dialog box. Now test the movie. The letters appear on the screen one at a time, disappear, and start over.

That was pretty neat, but now choose the Spiral tool and draw a spiral about 4 or 5 inches wide. While it's still selected, choose Xtras ® Distort ® Add Points. Drag a selection box around the entire spiral in order to select all the points in the path. Select Modify ® Split; then cut the spiral to the Clipboard. Draw a text block (larger than the spiral). Paste the spiral into the text block. Keep the text block selected, apply it to the top layer (click the Foreground layer in the Layers panel) of your previous "Animation is cool!" animation, and use Release to Layers. Keep the option set to Build, and deselect Use Existing Layers. Test the movie. The words appear as before, but as the exclamation point is placed, the spiral begins to appear on the page. This trick comes to you thanks to Ian Kelleigh (www.FreeHandSource.com).

Now you think you have it made — between FreeHand and Flash there's not much you can't do. But wait; there's more. Type Whee with a couple dozen e's after it. Draw a path like a roller coaster course. Attach the text to the path. Release to layers and test the movie. You can almost hear the kids screaming.

Draw a simple graphic, such as a rectangle and two circles that could be construed as a roller coaster car, and copy it to the Clipboard. Create a text block, and paste the little car in the text block as an inline graphic. Paste several more — as many as you like. Draw another roller coaster path, and attach the text to the path (Text ® Attach to Path), and release to layers, with the option set to Sequence. Test the movie. Now the little car travels along the path you've drawn. The only thing holding you back is the opportunity to put this to work.


Summary

This chapter showed you how to make FreeHand MX animations into movies. You can use these techniques to test an idea that can be used in its own right, to gain client approval, or to show other team members how your idea will work. Or the movie can be exported as a SWF file as the final project. Naturally, it can be imported into Flash and embellished there. Finally, you learned a few tricks with text blocks and animations.


Project Summary

Habitat Alert site Let's take a look at what you've done in this chapter that will be used in the Habitat Alert Web site. Some of the images need additional work in another section; others are ready to use in another application.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
birdFacts101.fh11 (and .swf) | Mouse-over events to make an informational site | You'll add sound to this file in Chapter 27.
 |  | It will also interact with a database using ColdFusion in Chapter 46.


Chapter 12: Outputting FreeHand MX Documents

Overview

Is FreeHand a drawing program, a page layout program, or a Web development program? The argument will probably be going on for years to come. All people who work with FreeHand on a daily basis will have their own point of view, and they'll all be correct to one degree or another. FreeHand MX can hold its own against other drawing programs when it comes to page layout features. In fact, it can hold its own against some page layout programs. In this chapter, you'll learn how to output FreeHand MX documents — to a printer, to other programs, or to a file.


The Basics of Printing

Arguments aside, FreeHand MX can print with the best of them. Whether your job is destined for a slick full-color brochure, a black-and-white newspaper ad, or a T-shirt, FreeHand MX makes it easy for you to get the optimal output you need for the printer to do the job as you have designed it. There are considerations that must be resolved before getting the job underway, though. FreeHand MX can set up for printing in black and white, full color (CMYK), Hexachrome (six color), or spot color. Your printer or service bureau will provide guidance for your output file preparation. Make sure to discuss your job thoroughly with them.

FreeHand MX can output to many types of devices. The basics include desktop ink-jet and laser printers, high-end ink-jet and laser printers, and raster image processor-equipped (RIP) film and paper processors. A RIP is used to interpret the data from the computer file and convert it into data that the printing device can utilize to get an image on a substrate. It stands to reason that you get better quality the higher up the print chain you go. Desktop printers are great for proofing jobs and making comprehensive layouts for client approval, but unless the final output will be nailed to a telephone pole or tacked to a corkboard at the supermarket, the image quality is less than optimal. Higher-end ink-jet and laser printers produce images that are absolutely stunning but are used mostly for display purposes. Most of the printing from FreeHand MX goes through a RIP at a service bureau or printing plant.

PostScript output

If you are going to reproduce your FreeHand MX document through printing, you should have a PostScript-enabled device. Inexpensive ink-jet printers do a super job when printing photos or proofs, but they aren't good at printing hundreds or thousands of copies. Plus, the printing company usually needs a PostScript file to input to its RIP. Although you can output a PostScript file without printing it, you won't know what it looks like unless you have a PostScript printer. PostScript printers can be several hundred dollars more expensive than a device without PostScript, but they are worth every penny in peace of mind.

PostScript is a page-description language developed and owned by Adobe. The PostScript-enabled printer receives your file after conversion by the printer driver. The driver converts your document into PostScript and transfers that data to the printer, which generates a series of dots on the printer's imaging surface. Those dots are ultimately used to put the image on the substrate — the substance on which you are printing, usually paper.

PostScript is device-independent and resolution-independent, meaning that a PostScript file prints the same information from one printer to the other. Naturally, settings on individual printers will vary the output, but images from properly calibrated equipment should be virtually identical. The resolution of PostScript imagesetters reaches up to 5,000 dpi, creating extremely sharp images on substrates.

PDF output

Portable Document Format (PDF) is another process invented by those creative folks at Adobe. The most prominent PDF program is Adobe Acrobat. This format is extremely versatile and can make a page that is viewable on the Web. You can then import it into page layout programs and print it. To view a PDF file, you can download the free Acrobat Reader software (www.adobe.com/products/acrobat), but to gain the full power of PDF, you'll need the entire product.

Sadly, FreeHand doesn't always make the best PDFs. There can be problems with fonts and images. You should export a few PDF files to see if there are problems, or if the conversion works to your expectations. If you do find problems, print the file to disk as a PostScript file, then use Adobe Acrobat or one of the other programs dedicated to building PDF files to create the actual PDF. To print a file to disk, choose File ® Print, and in the Print dialog box, choose Output Options from the drop-down menu. Then select Save as File (placement of the Save as File option varies among platforms and operating systems, but it's not difficult to find). Save it as a PostScript file, which will receive a .ps extension.

The Print dialog box

When your layout has been completed, it's time to print. Go to File ® Print, and you'll be faced with the powerful Print dialog box, as shown in Figure 12.1. It provides the following options:

Click To expand
Figure 12.1: he FreeHand Print dialog box for a typical PostScript printer.

  • Print Range — Allows you to select how much of the document to print.

    • Area — Prints only the preselected Output Area.

    • Selected objects — You may have multiple objects on a page but be interested in printing only one or a group of them. Just select them and check this box. Only the selected objects will print. You can still tile, change the scale, or make any other adjustments to the printed sheet.

  • Output:

    • Copies — Allows you to select the number of copies.

    • Composite/Separations — Take your pick. Override this setting in the Printer Setup dialog box if you decide to use a different printer. Normally you will use Composite — that is, print all colors on a single page. Choosing Separations outputs one page for each color (C, M, Y, and K) in the document.

  • Print setting — This option lets you assign predefined settings to your output. The default choices are Normal, Draft, Hyphen, and Quality PS Level 2. These settings provide preset conditions for printing. Most of the setting differences are located on the Imaging tab. Select a document to print, and in the Print dialog box, click the Advanced button and then the Imaging tab. Then change the Print setting at the top of the window. Notice the variations that are created by switching from one to another. Draft produces the lowest-quality output, and Quality PS Level 2 provides the highest-quality output. Even after you make a selection, you can change any of the individual attributes.

  • Color Management — The fine art or black science of color management is a toughie. It's beyond the scope of this book. Unless you have your scanner, monitor, and printer all correctly color-managed, leave this selection set to None. You will have fewer surprises when printing if you do. (Conversely, if you are serious about your work, take the time to create profiles for all your devices, and use color management to your benefit.) In this dialog box, you have the options of choosing Adjust Display Colors, where you adjust your monitor by calibrating it with the Display Color Setup, shown in Figure 12.2; Color Tables; Kodak Digital Science; or Apple ColorSync (on a Macintosh only).

    Figure 12.2: The Display Color Setup window.

  • Use PPD — The PPD is the PostScript Printer Description file that provides intimate information about your printer to the computer. It is provided by the printer manufacturer and is generally installed when you install your PostScript printer. This file tells your computer what kind of resolution, page sizes, line screen rulings, and screen angles the printer uses when outputting a file. Checking this option opens a navigation box for you to find the PPD for the printer you want to use. The name of the printer will then be displayed in the space after the Use PPD buttons. You can change the PPD in the Settings dialog box.

  • Scale % — You have three choices of the size you want your image printed. Uniform prints the document at whatever size you type in the field. The aspect ratio of the page is maintained. Variable enables you to stretch or squeeze one dimension or the other. Type the scale percentage of the width and height in the appropriate fields. This distorts the image. The last choice is Fit on Page. If you choose this option, FreeHand automatically scales the document proportionately so that it fits comfortably on the page size you have selected. This is suitable for documents that are larger than the paper you can print. Crop marks and other printer marks are included in the reduced print, if you elect to have them print at all.

  • Tile — If you are printing a document that is larger than your printer can accommodate on a single sheet of paper, you can choose to tile the document. You have additional choices of Automatic or Manual tile. If you choose Automatic tiling, FreeHand decides the best way to cut up the document and then prints as many pages as necessary to complete the image. Each edge of the page has small registration marks to which you can trim to ensure perfect registration. It becomes a matter of taping or gluing the pieces together at that point. If you tile a document, you can tell FreeHand how much of an overlap you would like to have on the pages.

    Manual tiling is just a bit different. For this option, you move the zero point to where you want the bottom-left corner of the printed sheet to be. You must manually move the zero point for the next print, and so on. This can be useful if you want to print a particular area of a large page, although the Print Area tool does the same job from the desktop, and it isn't confined to a particular page size or shape.

Advanced printing

The Advanced Print Setup window offers more choices and decisions for you. You see a thumbnail preview of the printed page, among other things. You arrange many printing attributes in this dialog box. To begin with, you can change the print setting and PPD at this point (and change it again back in the Print dialog box if you're really unsure of yourself or if you change your mind). You can choose UserPrep files — files that are workaround files that stretch the limits of some high-end PostScript devices. There are several UserPrep files included with FreeHand that provide PostScript code to print tiled, pattern, or gradient fills. These files are not effective on most desktop or Printer Control Language (PCL) printers.

At the bottom of the preview, you can change the page currently showing as a thumbnail. You can also change the view to your choice of Preview, X-Box, or Keyline. The right side of the Setup window is divided among several attributes under three tabs.

On the right-hand side of this dialog box, there are three tabs: Separations, Imaging, and Paper Setup. Explanation of each of the options is beyond the scope of this book. Consult with your printer or service bureau for help. Also, refer to one of the many books on printing including the FreeHand MX Bible.


Printing Project

Habitat Alert site If you want to put all your eggs in one basket, it's easy enough to do in FreeHand. That's what you'll do with this project. The Habitat Alert letterhead, envelope, postcard, and business card will all be in one document. Obviously, you could (and maybe should) have each of these pieces in separate documents, but this is easier for the exercise. Begin by going to the chapter12exercise folder on the CD-ROM. Drag the Chapter12Symbols.FH11 document into the Symbols folder on your hard drive. The symbols enable you to build these individual projects in short order.

  1. Open a new document and save it as HabitatCollaterals.

  2. Import the symbols into the library by opening the Assets panel (Window ® Assets) and selecting the Library tab. Open the Library Options menu, choose Import, navigate to the Chapter12Symbols file, and select it.

  3. Choose all of the symbols and click Import. The Library should be filled with symbols.

Letterhead

The default page size in FreeHand is a letter-sized page, so start with the letterhead.

  1. Select View ® Page Rulers ® Show.

  2. Set the units of measure to inches at the bottom of the FreeHand MX window; then drag a horizontal guideline to the 10.75-inch mark (just a quarter inch beneath the top edge of the page. (Double-click on the line to open the Guides positioning window if you need it.)

  3. Place another horizontal guideline 0.75 inches from the bottom.

  4. Drag the Habitat Alert Logo symbol onto the page, aligning the top of it to the guideline.

  5. Open the Align panel (Windows ® Align), and set the horizontal menu to No Change, and the vertical menu to Align Center. Put a check in the Align to Page box, and click Apply (Align).

  6. Click the Text tool on the page and type 108 LAS PALMAS, OXNARD, CALIFORNIA 93035 205-884-7335 in a sans serif font such as Arial Black. Use all uppercase letters. Press Alt/Option+0149/8. For Windows, press Alt +0149 on the numeric keyboard, and for the Mac, press Option +8 to insert a bullet between the street and city and between the zip code and the telephone number. To ensure that the text will be on one line, use an auto-expanding text block (explained in Chapter 8), and click the Center Align icon in the Object panel.

  7. Select the text (it should still be selected) and change the font size to 9. In the field near the "A" with the arrows above and beneath it, type 30 to stretch out the text.

  8. Repeat step 5 to center the text block on the page.

  9. The address line lacks color. It should match the color in the word HABITAT, which is a PANTONE color. Open the Swatches panel. From the Swatches Options menu, and choose PANTONE pastels uncoated.

  10. Choose PANTONE 9503. Close the window.

  11. Choose PANTONE 9503 as the fill for the address line. The top of the letterhead should look similar to Figure 12.3.

    Click To expand
    Figure 12.3: The two-color letterhead design.

Envelope

You can't have a letterhead without an envelope, so click the Add Page icon in the Status toolbar to add a new page, and then follow these steps to create an envelope:

  1. Click the current page; then click the next-page triangle at the bottom-left of the document window (or choose Page 2 from the pop-up triangle).

  2. In the Document panel, click the Landscape button. Change the page size from Letter to Custom, and enter 9.5 inches wide (x parameter) by 4.125 inches tall (standard #10 envelope size). Press Enter/Return.

  3. Choose View ® Fit to Page, or select Fit Page from the magnification pop-up menu in the Status toolbar.

  4. Drag a horizontal guideline to a quarter inch below the top of the envelope, and drag a vertical guideline a quarter inch from the left side. Place a second vertical guideline at the 3-inch mark, and another horizontal guideline a quarter inch above the bottom.

  5. Drag the Habitat Alert logo from the Library onto the envelope page. Place it in the top left intersection of the guidelines. Release the instance.

  6. Hold down the Shift key and use the Pointer tool to select the bottom right corner point of the logo. Drag up and to the left until the logo meets the 3-inch guideline. Save the document.

  7. Drag an instance of Great Blue Heron from the Library onto the page, and place it in the bottom left intersection of the guidelines.

  8. Release the instance of the bird, and ungroup it twice.

  9. Apply a gradient fill using the two pastel colors in the Swatches panel. Open both the Swatches panel and the Object panel. In the Object panel, change the Fill to Gradient. Click on the PANTONE 9503 Color box in the Swatches panel, and drag it to the first box of the gradient. Drag the PANTONE 9441 color swatch onto the Gradient second box. Use the Gradient bar to align the gradient vertically.

  10. Go to the page 1, select the address line, and copy it.

  11. Return to page 2 and paste the address line.

  12. Change the text paragraph alignment to flush left. Abbreviate California as CA, and delete the bullet and phone number. Save. The artwork should look similar to Figure 12.4.

    Click To expand
    Figure 12.4: The finished envelope.

Business card

If the company requires only a single business card, it's a simple procedure to create a single business-card-sized page. However, the usual routine is to have multiple business cards for a company. You don't want to spend a lot of time and energy creating a unique card for each person in the company, so it's a good time to let FreeHand MX go to work for you. For this project, you make a business card layout that prints ten cards on a letter-sized page.

There are more than a couple ways to accomplish the multiple-card layout. You could develop each card. You could arrange the key, nonchanging elements, and do a step-and-repeat method to fill the page. You could make a single card and turn it into a symbol that could be placed into a quick grid. You could make one business card and use a lens fill to make the multiple layout. And you could set up a master page from the last couple choices that could be used for each new group of names.

In this instance, it makes the most sense to make a single card and use a lens fill to create the layout. You can then make the layout into a master page.

  1. Add page 3 to the document and display it. In the Document panel, change the dimensions to 2 inches wide by 3.5 inches tall. Check that the page orientation is Portrait.

  2. Open the View menu or the magnification pop-up in the Status toolbar and choose Fit to Page. Open the Library if it's closed.

  3. Drag guidelines to 3/16 inch from all four sides.

  4. Using the method you prefer — drag a symbol, or copy or clone elements from the other pages — place and scale the various elements on the page as shown in Figure 12.5.

    Figure 12.5: The finished business card layout.

  5. Change the expanded width of the address text to 25 in the Object panel. Then adjust the leading for the address to 8 points. Put 3 additional points of leading (or 11-point leading) between the address and phone number.

  6. Add a text block underneath the bird and type in a name. Then give the person a title and reduce the title text to 8 points. Change the name to bold. Save.

  7. Select the Rectangle tool and drag a rectangle around the entire card. Make the rectangle the exact same size, using the Object panel if you like. Set both the stroke and fill to None. This rectangle defines the size of the card and will be very useful in the next exercise.

  8. Drag a selection box around the entire card layout and group it. Save.

Building the print page

Now you have a single card and a symbol of the card. Let's get to the business of multiple imaging. Start by adding a page 4 to your document, and follow these steps:

  1. In the Document panel, change the page size to Letter and the orientation to Landscape, and choose the Fit to Page view.

  2. Drag vertical guidelines in to one-half inch from left and right sides of the page, and a horizontal guideline at the 4-inch mark. Double-click on one of the guidelines to open the Guideline dialog box if you need to check the locations.

  3. Make a copy of the business card from page 3 and paste it onto page 4. Nestle it at the intersection of the left and top horizontal guidelines.

  4. Clone the card, hold down the Shift key, and drag the cloned card beneath the top card. If you have Snap to Guides selected, the card locks into place when it hits the guidelines.

  5. Select both cards and open the Transform panel. Select Move. Type 2 inches in the X field and 0 in the Y field. Type 4 in the Copies field. Select both the Contents and Fills check boxes. Click Move. This puts eight more business cards in perfect registration onto your page, as shown in Figure 12.6.

    Click To expand
    Figure 12.6: Set up ten business cards in minutes.

  6. Click Save; then select all the cards on the page and remove their instance. Ungroup twice. Save again.

  7. Now it's a matter of changing the names and titles on the cards. You can drag guidelines down to mark the top of the name text block, and other guidelines to separate the cards, but it's really not necessary.

Printing the documents

Each of the jobs you've done in this project has different printing requirements. Size and orientation of the different pages is the main concern. The letterhead, envelope, and business card jobs are spot color, and each will require a different paper. You will be better off providing separate files for each job.

Before printing to your laser printer or ink-jet, select an object on the page you want to print, and take note of the page you're on in the Status toolbar. Then choose that page in the Print dialog box. Except for approvals or proofing purposes, there's no need to print the single business card.

To prevent wasting a lot of paper and time, you must check the orientation of the letterhead, envelope, and mass business card before printing. If you are going to print on Avery preperforated business card stock, keep in mind that its orientation is portrait and not the landscape orientation you used as you created the layout. You can either change the orientation of the actual layout to a vertical page, or you can be careful to make the change in the Print dialog box.


Preparation for Output

Whether you will be taking the job to a printer in a strip mall, to a large commercial printer, or to a magazine, those companies have certain requirements. The most common comment you'll find with smaller companies is that they don't have a current version of FreeHand, or don't have the program at all. They'll ask you to put it in some other format. Macromedia has bent over backwards to accommodate nearly everyone in this respect.

If you are making anything other than a PostScript or PDF file, it's a good idea to convert all the text to paths before exporting. Then make all the exports, and choose Undo to put the live text back into the FreeHand MX document.

Output Area tool

The Output Area tool is new in FreeHand MX and provides one more tool to aid you in printing specific parts of a document. Either way, the cursor turns into a crosshair that you drag across the document to select what you wish to print. It becomes an object, so you can adjust the size if necessary in the Object panel. Anything within the Output Area selection will print. It's perfect to show thumbnails of a multipage job. Arrange the pages with the Page tool, and drag a Print Area selection box. Then print with Fit on Page enabled. All umpteen pages, complete with notes or labels you've placed on the pasteboard, print on the same sheet of paper.

What the service bureau needs

Nearly every service bureau and professional print shop works with either PostScript files or PDF files.

PostScript file

If you're providing a PostScript file, the onus is on you to have everything just right. When this file is output, no one does anything to it but make sure it comes out the other end of the machine. If you've chosen spot colors but really wanted CMYK, you're out of luck, and you'll pay for it. This is one instance where proofing the job on your desktop printer is absolutely necessary. The PostScript file contains all the fonts in the job.

To make a PostScript file, choose File ® Print and make sure that Print to File is checked in the Print dialog box. Set all of the other choices just as you would if you were printing to a printer. Consult with your service bureau or printer to make sure you are providing the options needed. Click OK, and the Print to File dialog box opens. Navigate to the location you want to put the file, and click Save.

Exporting to PDF

FreeHand has a PDF export, but there are occasionally problems with the resulting files. Missing clipping paths from Photoshop TIFFs and font issues are some of the problems. Common advice is to create a PostScript file and then use Adobe Acrobat Distiller to create the actual PDF file. That requires an additional program, but it's bulletproof. Whichever method you choose, it's safest if you convert the text to paths.

Collect for output

When you want to gather fonts and graphics together to bundle for the printer, FreeHand offers a one-click solution (well, almost one-click). Choose File ® Collect for Output, and you'll be prompted to Save; then a dialog box appears, enabling you to choose the information to be saved in a document information page. A dialog box opens that lets you name the document information file and choose where to save it. It's best to create a new folder. When you click Save, the program pulls all the fonts and graphics used in the document, makes a copy of the live file, and places all that data in the location you set. All that's left for you to do is to put the data on a suitable media and deliver it to the service bureau or the printer.


Summary

This chapter helped you learn the ins and outs of printing from FreeHand. In the project, you learned how to make a multipage document that contains a letterhead, an envelope, and a business card. These documents utilize symbols to streamline the layout process. Then you learned what the service bureau or printer needs to finish the job for you, and you learned a little about various export options.


Project Summary

Habitat Alert site

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
Chap12project.fh11 | A two-color letterhead design where you added and formatted text | The printer
 | An envelope with the logo and address added |
 | A business card that was used for a multiple card layout |


Part III: Mastering the Power of Macromedia Fireworks MX 2004

In This Part

Chapter 13: Getting Around in Fireworks
Chapter 14: Applying Color
Chapter 15: Drawing Like a Pro
Chapter 16: Designing Spectacular Text Effects
Chapter 17: Working with Bitmap Images
Chapter 18: Designing Navigational Elements
Chapter 19: Automating Your Workflow
Chapter 20: Designing Animations
Chapter 21: Slicing and Optimizing


Chapter 13: Getting Around in Fireworks

Download CD Content

Overview

Fireworks is an integral part of the Macromedia Studio MX 2004 Web development workflow. Fireworks is an image editor that you use to work with images and create new ones. In Fireworks, you can design spectacular text effects as editable vectors, or you can utilize its powerful bitmap (pixel-based) functions. This new version has added powerful Auto Shapes, new effects such as noise and new blur options, document tabs to easily move between open documents, a Red Eye Removal tool, and many more enhancements. For a full list of new features, check out Chapter 2.

Working with bitmaps and vectors (paths) together is a huge advantage in Fireworks. You can have vector shapes filled with bitmap images, or you can place vectors over a bitmap and integrate them. The possibilities are endless.

In Macromedia Studio MX 2004, Fireworks helps you design, optimize, slice, and export all the images you need for any project — all while playing very nicely with its companion programs — FreeHand MX, Dreamweaver MX 2004, Flash MX 2004, and ColdFusion MX.


Working with the Document Window

The Canvas — the area in which you work — is located inside the document window. Figure 13.1 shows a new document open on a Windows system.

Click To expand
Figure 13.1: The Fireworks workspace with a new document open in a Windows PC environment.

To open a new document, follow these steps:

  1. Click File ® New to open the New Document dialog box.

  2. Type the desired height and width of your Canvas. The default resolution is 72 dots per inch (dpi), which is appropriate for using on the Web. You can adjust this number if you are designing for something other than the Web.

  3. Choose whether you want a transparent (depicted by a grid of gray and white squares) or white Canvas, or choose a custom color (see Figure 13.2).

    Click To expand
    Figure 13.2: The New Document dialog box.

  4. Click OK when you've completed all the options.

To modify the Canvas after the document window is open, do the following:

  1. Click Modify ® Canvas to open the Canvas submenu, and choose one of the available options:

    • Image Size adjusts the selected image.

    • Canvas Size adjusts the Canvas size without changing the size of any of the document's elements.

    • Canvas Color allows you to change the Canvas color from white to transparent to a custom value.

    • Trim Canvas is used like a cropping tool to remove extra space around the content of the document.

    • Fit Canvas adjusts the Canvas to fit around all content in the document window, including images that overlap or are outside the Canvas area. The Canvas expands or contracts to fit the content.

    • Rotate 180%.

    • Rotate 90% CW (clockwise).

    • Rotate 90% CCW (counterclockwise).

    Note

    You can also use the Canvas submenu for Canvas Size, Image Size, and so on from the Property inspector if nothing is selected in the open document.

Unsaved documents

If you look at the title bar across the top of Fireworks, you'll see the title name. By default, the page will be titled, for example, untitled-1.png 100% (or whatever percentage). If you've made changes to the document since you've last saved, there will be an asterisk at the end.

Document tabs

New Feature

This feature is new to Fireworks MX 2004 and is one of my favorites. When you have your document maximized, you'll see a tab with the document name. When you have multiple files open, you can switch between files by clicking on the appropriate tab.

Preview options

When you click on Preview you'll see a preview of your document or selected image. How it previews depends on your settings in the Optimization panel.

Cross - Reference

You'll learn more about comparing and using optimization settings in Chapter 21.

The 2-Up option has the original and an optimized view. The 4-Up preview has the original and three others. You can use three different optimization settings to preview each.


Working with the Panel Layout

The docked panels are locked into the interface for Windows users and are free-floating on a Mac. Also added is a one-click button to the left of the panel groups to close the panels. There are also some new terms to learn, some missing panels to discover, and some new panels to explore. The most notable addition in MX 2004 is the addition of the Shapes panel in the Assets panel group.

Figure 13.3 shows the areas common to many panels. Clicking the panel name opens or activates the panel.

Figure 13.3: The Layers panel with a few common features labeled.

Customizing the panel layout

The docked panel area contains panel groups and panels. When expanded, the panel groups display a tab and a text name. These are the panels within the panel group. The active panel has a tab; the inactive panels show just the text name.

You can dock, undock, close, or rearrange panels within a group any way you want. To move a specific panel into a different panel group, follow these steps:

  1. Click the Options menu of the panel you want to move.

  2. Click Group (panel's name) With, and select the panel group you want to move it to.

To make a new panel group, follow these steps:

  1. Click the Options menu of the panel for which you want to make a new group.

  2. Hover your mouse over Group (panel's name) With and then click New Panel Group.

    Note

    The New Panel Group option effectively undocks a specified panel. You may reposition or close the panel as desired.

To rename a panel group, follow these steps:

Note

You can only rename a panel group, not a panel. If there is only one panel, the Rename option is grayed out.

  1. Click the Options menu of the panel you want to rename.

  2. Click Rename Panel Group and then enter a new name.

To dock a panel, follow these steps:

  1. Select the desired panel from the Windows menu. The new panel opens below all current panels.

  2. Click and drag the Gripper (little dots on top left side), and drag the panel into position.

  3. Release the mouse when the solid blue line indicates the location where you want the panel to be docked. In Figure 13.4, the solid thick line below the Frames and History panel indicates the location the Files panel will be docked in.

    Click To expand
    Figure 13.4: The solid line indicates where the panel will be docked.

  4. To close a panel group, click its Options menu and then select Close Panel Group. The panel group remains closed unless you open it again using the Window menu. If you want the panel docked, you have to dock it again.

    Tip

    If you want to rearrange the order of panels within a group, simply regroup it with the same group using the same method used to move a panel to a new group. This action has the effect of placing that panel last in the group. With a little forethought, it is easy to arrange your panels in your preferred order.

Features common to most panels

You need to be familiar with some of the features in the various panels (see Figure 13.3). You'll work with specific panels throughout the Fireworks section as you learn how to use the wide array of tools.

There's an Options pop-up menu for each panel, which you access by clicking the little icon in the top right corner of the panel. This menu contains additional options relative to that panel.

Slider controls are present in many panels. When a number is required for a percentage or size, you can click the down arrow and then click and drag the slider to select the number. You can also type the amount. If you choose to type a number, you need to press Enter/Return to accept the setting.

A Color box is present whenever a color option is available. When you see a Color box (a square with a color in it) and you want to change a color, simply click the Color box and choose a color from the Swatches panel with the Eyedropper tool. Alternatively, you can use the Eyedropper to select a color from anywhere in the workspace (Windows users can select from anywhere on the screen). If you know the hexadecimal number you want to use, type it into the color panel that opens when you click the Color box. If you type the hexadecimal number, press the Enter/Return key. You may also access the System Color Picker by clicking the color wheel; you can choose to remove all color by clicking the square with the red slash mark.


Examining the Menu Bar

The menu bar is located below the title bar (top of the application). The menu bar contains ten different categories, which you'll see shortly. Most of the categories are pretty common to many of Macromedia's applications.

File menu

The File menu contains options to open, close, save, import, and export files. The most notable change in the File menu is the Send to Email addition. You can choose to mail as a PNG or JPEG, or export to e-mail using the settings you have in the Optimize panel.

Edit menu

The Edit menu contains options you'd expect, such as Cut, Copy, or Paste, to Crop and Replace. Other options, such as to Build or Add Buttons and Other Graphics, are hidden as submenus beneath the Insert and Libraries options. This is also where you find the Preferences and Keyboards shortcut windows.

View menu

This menu offers the options for different view magnifications, rulers, guides, and grids. If you want to use guides, the rulers must be visible. After the rulers are visible, click and drag in the top ruler and pull down for horizontal guides, or drag from the side ruler for vertical guides. With the guide visible, you can double-click on the guide to open the Move Guide dialog box, where you can set a specific coordinate.

Select menu

The Select menu has options for making selections and manipulating those selections, such as contracting, expanding, and inversing. You can save one selection per document.

Note

If you are a Photoshop user, you understand that a selection can be saved. In Fireworks the selection does not get saved to a separate channel or location that you can see. Unlike Photoshop, where you may save many selections that generate separate, modifiable channels, Fireworks can only save one selection, which is not readily accessible, except through the Restore Selection option.

Modify menu

The Modify menu contains several options to modify your Canvas and objects, including alignment and transformation functions. All options pertaining to the Canvas are grouped under the Canvas submenu.

Pop-up menus are accessed via the Modify menu. Pop-up menus are a quick way to make cascading-type menus using a wizard. Merge Down causes the selected objects to be flattened into the bitmap object that is below the lowest selected object.

Flatten Selection converts the selected objects into bitmaps. Merge Down works on bitmaps, not layers. It will merge bitmap selections into one layer, and/or merge Live Effects and the selected bitmaps. Flatten Layers merges all the layers into the bottom layer, but it doesn't convert to bitmap.

The animation options are also accessed through this menu. You'll be using the options in this menu frequently throughout the Fireworks portion of this book.

Text menu

The Text menu contains options for working with text, from setting character formatting to attaching text to paths to converting to outlines. It also has commands for working with paths, including attaching text to a path and converting text to a path. You'll use these functions in Chapter 16. There is even a spell checker.

Although Fireworks text is typed on-screen and edited with the Property inspector, you can still access the Text Editor from the Text menu. Alternatively, you can access the Text Editor by right-/Control-clicking any text in your document to access a contextual menu.

Commands menu

The Commands menu contains the following powerful options for managing and using Fireworks:

  • The Manage Saved Commands option lets you organize commands you made in the History panel.

    Cross - Reference

    You'll make commands in Chapter 19.

  • Flash MX Manage Saved Commands opens the Manage Saved Commands dialog box, where you can rename or delete a command you've saved.

  • The Manage Extensions option lets you work with extensions. Fireworks MX 2004 includes extensions that you can download and install. You can also use Flash to design Fireworks panels and functions. For example, the Align panel was made using Flash.

  • Run Script enables you to write custom JavaScript commands and run them from here. Click the Extending Fireworks link in the Start page to go to Macromedia for information on using your own scripts.

  • The Creative category has a nice selection of useful tools, such as the Arrowhead command that makes it easy to add a variety of arrow shapes to one or both ends of a path. Also included is a Fade command. It performs masking in one step. Or you can automatically add a variety of picture frames using the Add Picture Frame command.

  • The Data-Driven Graphics Wizard works together with XML to add additional functionality for calling images.

  • The Document options enable you to distribute all the objects in a document to separate layers. This and the Reverse Frames option both come in handy when you are designing animations. You can also hide or lock layers.

  • The Panel Layout Sets are commonly used arrangements of windows and panels based on monitor resolutions. You can also customize and save your own layouts, if desired. Panel layouts are powered by JavaScript.

  • The Reset Warnings dialog box resets all the Don't Show Again warning dialog boxes so that they appear when needed. This is useful when you turn off warnings but decide you want them back.

  • Resize Selected Objects does just what it says: It opens an easy-to-use interface that enables you to resize objects visually. If you press Shift and select multiple objects, the objects will be resized.

  • The Web option enables you to create a shared palette that makes a custom color palette from a folder of images. You can set the maximum number of colors you want. This is a fast way to develop a custom palette of indexed colors. You can also choose to select or set blank Alt tags.

Filters menu

The top portion of the Filters menu contains various filters you can apply to an image. Most of these filters (and more) can also be found in the Effects menu in the Property inspector. You can apply filters and effects to vectors and bitmaps, but when a filter is applied to a vector object via the Filters menu, it converts the vector to a bitmap. Once added, filter effects are not editable as a Live Effect. The same adjustments applied through the Effects menu is a Live Effect and is always editable, even after you save, close, and reopen the document.

Cross - Reference

You use Live Effects in Chapter 14.

Fireworks MX 2004 ships with Eye Candy 4000 LE and Alien Skin Splat LE. These two plug-ins don't expire and contain a sampling of the filters that ship with the full versions. The rest of your third-party demos appear at the bottom of the list. You may add to the list by importing filters and effects via Preferences. In Preferences you tell Fireworks where to find the folder in which you have your plug-ins installed. You can put all your plug-ins into one filter.

Caution

If you own Photoshop 6 and above, do not install your plug-ins into the Photoshop Plugin folder. Fireworks MX 2004 will ignore everything in that folder. Fireworks can't use the Photoshop 6 and above native filter, but it can use third-party filters. If you install to a plug-in folder outside of Photoshop, you can set up both Photoshop and Fireworks to access your plug-ins from the separate folder.

Window menu

The Window menu gives you access to all the panels in Fireworks. Some of the most frequently used panels are already docked in the panel group area of your workspace. For example, the Styles, URL, and Library panels are all in the Assets panel group set. You can customize your panel groups to fit your work style.

Help menu

The Help menu contains quick links to the Fireworks Help system and a What's New document in the Help system. There are six different links that take you directly to Macromedia for tutorials, tips, and other news.


Using Fireworks Toolbars

Fireworks has two toolbars: the Main toolbar and the Modify toolbar, neither of which open by default. The toolbars provide instant access to numerous functions.

The Main toolbar

The Main toolbar displays the most commonly accessed menu functions, such as New File, Save, and so on. To open the Main toolbar, choose Window ® Toolbars ® Main. When the toolbar opens, it docks below the Menu bar for easy access. Figure 13.5 shows the Main toolbar and its icons.

Click To expand
Figure 13.5: The Main toolbar open and docked below the Menu bar.

The Modify toolbar, shown in Figure 13.6, gives you a quick way to group, arrange, align, and rotate objects. You open this toolbar by choosing Window ® Toolbars ® Modify. It is docked just above the Property inspector as the default, although you can move it to a different location by clicking and dragging the vertical bar on the left side.

Click To expand
Figure 13.6: The Modify toolbar.


Tools Panel

All Fireworks drawing and editing tools can be accessed from the Tools panel. Figure 13.7 shows the many tools available. The Bitmap and Vector tools are grouped together. There is also a section showing the tools that can be used with both bitmaps and vectors

Click To expand
Figure 13.7: The Tools panel.
Note

You can now access fill and stroke option menus by clicking the Color boxes in the Tools panel. These options can also be accessed in the Property inspector. The way you access these properties depends on the object you selected.


The Property Inspector

The Property inspector in Fireworks, shown in Figure 13.8, is similar to the Property inspector in Dreamweaver. The Property inspector is located below the document window, and you can click the expander arrow (or the name) to open and close it. The Property inspector is context-sensitive, meaning that its contents change based on which object you select in the Document window. Select any tool and look in the Property inspector. Click another tool and notice the change.

Click To expand
Figure 13.8: The Property inspector.
New Feature

The texture and stroke options (accessible by clicking the down arrow to open the pop-up menus) now have visual representations.

The Property inspector enables you to change settings by adding a value in text boxes, such as the size of a font, or by using a slider. If you use a slider, you can see immediate changes on-screen. If you type in values, press Enter/Return to accept the settings and update the Canvas.

You use specific tool options throughout the Fireworks section of this book. You will discover the many options and functions available via the Property inspector as you use the various tools.


The Status Bar

The status bar, which shows information about the Canvas size and magnification (with a list of quick magnification options to choose from, as shown in Figure 13.9), appears at the bottom of every document. The status bar also contains VCR-like controls that help you navigate through frames and play animations.

Click To expand
Figure 13.9: The Status bar showing the magnification options.


Working with Layers

A layer is a powerful organizational tool. You can arrange objects (bitmap or vector) on separate layers for easier management. Figure 13.10 shows many of the features of the Layers panel. Notice the icon representations of objects, paths, and images.

Figure 13.10: The Layers panel.

Most graphic applications use layers, but Fireworks works with them in a unique manner. Because Fireworks contains bitmap and vector objects, each object is given its own list layer. Object list layers are placed in layers that are similar to layer sets in Photoshop. It's easy to move objects from one layer to another and to add, name, and arrange as many layers as desired.

Notice the Frame 10 button in Figure 13.10 that shows you which frame your objects are on. If you are making rollovers, creating animations, or storing additional files, place objects in different frames. It's a great way to keep track of what is in which frame.

Cross - Reference

The Frames panel and the use of frames are discussed in Chapter 20.

The Web layer

The Web layer is a special layer in Fireworks and remains at the top of the layers list. You cannot delete, move, or rename it, and there's only one. It has a very unique function: This layer stores only information about slices and hot spots.

Slices and hot spots are Web objects. The primary function of a slice is to name, optimize, and define separate graphics from an entire document. A slice may also contain references to a JavaScripted behavior.

Fireworks, by default, names slices using a seemingly cryptic naming scheme. You can customize the automatic naming by editing the HTML Settings (File ® HTML Settings). Better yet, give your slices specific names. You can double-click the slice for any slice or hot spot directly in the Web layer and then name it, or select it and use the Property inspector. The name will be used on export. Keep in mind that Web files can't contain spaces or special characters in their names. Fireworks supplies the file extension based on your optimization choices.

Cross - Reference

Chapter 21 shows you how to hide specific slices and why it's a great time-saver to do so.

Adding layers

A new layer is an empty layer with no content. Layers are added above the layer that is currently selected. Layers are used to organize your content. There are several ways to add new layers. Choose one of the following methods:

  • Click the New/Duplicate Layer icon located at the bottom of the Layers panel.

  • Click Insert ® Layer.

  • Click the Layers Options menu, and then choose New Layer.

Duplicating layers

A duplicate layer contains the same content as the selected layer you duplicated. To duplicate a layer, select the layer, click the Layers Options menu, and select Duplicate Layer. When the Duplicate Layer dialog box opens, choose where you'd like the layer to be inserted (see Figure 13.11). You can also change the number of duplicate layers you want to add.

Click To expand
Figure 13.11: The Duplicate Layer dialog box.
Tip

You can duplicate a layer, hide the original, make changes to color or whatever, and use as two versions of a client mockup. You can do the same thing using frames.

Deleting a layer

If you have a layer you decide you no longer need, you can delete a layer by using one of these methods:

  • Select the layer you want to delete, and then press the Delete key on the keyboard.

  • Click and drag the layer on top of the trash can icon.

  • Select the layer, and then click the trash can icon. To select multiple layers or objects, press Shift+click.

Opacity settings in layers

Near the top-left corner of Figure 13.9, notice an icon with gray and white checks and the number 100 grayed out. This is the opacity setting: 100 percent is totally opaque and 0 is invisible. You can adjust the opacity for each individual layer and for each individual object on a layer. To change the opacity, select the layer (or object), and type in the opacity number you want or use the slider to adjust the opacity amount.

Showing/hiding layers

To show or hide whole layers or objects, click the eye icon of any layer or object. If the eye is on, the layer or object is visible in your document. If you click it again, it toggles off the visibility. Showing and hiding layers is helpful to focus on one part of your design. It's also useful for trying out different options. You can use it to store unused objects in your document as well.

Locking layers

To lock a layer, click the box to the left of the layer's name. A Lock icon indicates the layer is locked. After a layer is locked, you can't alter anything in that layer. You can't even select it. To lock or unlock all the layers, open the Layers Option menu and choose the appropriate action.

Naming layers

Giving your layers meaningful names is a good habit to get into. It helps you identify what is on each layer. You'll appreciate this when you have a file with a ton of objects in it. To name a layer or an object, double-click the layer or object name and rename it in the New Layer dialog box that opens. If you use the Layers Options menu to add a new layer, a dialog box opens where you name the layer at the time of insertion. But if you use the New/Duplicate Layer icon at the bottom of the Layers panel, the New Layer dialog box does not open.

Single-layer editing

Single-layer editing enables you to work on only one layer without affecting other layers. To use Single Layer Editing mode, open the Layers Options menu, and select Single Layer Editing; then select or edit objects on the current layer. This option is handy if you don't want to lock all the other layers to protect them while you edit just a single layer. Because you can easily select objects in the document window, it is easy to be in the wrong layer.

Sharing a selected layer

When you develop an animation, you might want some of the same images in every frame. The Share a Selected Layer option can be a real time-saver. If you have repeating elements on a layer that you want on all layers, all you have to do is to select the layer, open the Layers Options menu, and choose Share This Layer.


Setting Preferences

Fireworks offers many preferences you can set or change. Open the Preference dialog box by clicking Edit ® Preferences. Table 13-1 lists the different preference categories and options. From opening documents to adding effects and filters, it pays to set up your preferences! For example, click the Editing tab and note the option for Precise Cursors. This makes your cursor a crosshair. The Folders tab is where you tell Fireworks to find your plug-ins, texture, and patterns folders. The Import tab tells Fireworks how you want to handle Photoshop file conversions.

Table 13-1: Preferences
Category | Preference Options | Functions
General | Undo Steps | Enter the number of undos you want.
 | Color Defaults | Contains Fill, Stroke, and Highlight color options.
 | Interpolation | The method used to change pixel values when an image size is changed.
 | Launch Options | Determines whether or not to show the Start page on Launch.
Editing | Precise Cursors | Check if you want Precise Cursors.
 | Delete Objects When Cropping | If selected, cropped objects get deleted
 | Brush Size Painting Cursors |
Editing — Bitmap options | Turn Off Hide Edges | When unchecked, the marquee is not visible.
Editing — Pen tool options | Show Pen Preview | Shows a preview of the next path segment.
 | Show Solid Points | When checked, the point of a selected object is hollow and an unselected object's points are solid.
Editing — Pointer Tool Options | Mouse Highlight |
 | Preview Drag |
 | Show Fill Handles |
 | Pick Distance | Determines how close the pointer is to an object to select it.
 | Snap Distance | Determines how close an object needs to be to snap to a grid.
Launch and Edit | When Editing from External Application | When external Macromedia applications can't locate the source PNG file, Fireworks will use the preferences you set here to determine how to handle locating the PNG file.
 | When Optimizing from External Application | You set up your preferred editor to optimize images. Fireworks is set up by default when you install the Macromedia Studio MX 2004.
Folder | Photoshop Plug-ins | Browse to locate the folder in which you keep your Photoshop compatible plug-ins.
 | Textures | Choose a folder with texture images.
 | Patterns | Choose a folder with pattern images.
Import — Photoshop File Conversion | Layers | Choose whether to convert layers as objects or new frames and whether you want to share layers between frames.
 | Text | You have the option of maintaining text appearance, which changes the text to a bitmap (uneditable) image. Or you can choose to keep the text editable. This option loses any effects applied that are not compatible with Fireworks.
. | Use flat composite image | You can choose to flatten all the layers and import as a single-object bitmap image.


Keyboard Shortcuts

Using keyboard combinations to perform certain functions can many times access an option faster then a menu. For example, you'll probably use copy and paste a lot. It's much faster to select an object and press Ctrl/Command +C on the keyboard to copy. Five sets of keyboard shortcuts are available. The Macromedia Standard is on by default. You can customize Fireworks with your own shortcuts. A custom shortcut is added to (or changed in) one of the existing sets.

Follow these steps to customize your keyboard shortcuts:

  1. Choose Edit ® Keyboard Shortcuts; then choose the set of shortcuts you want to customize from the Current Set drop-down menu.

  2. Click the Duplicate Set icon.

  3. Name the new set.

  4. Select an item to change. Type a new key combination in the Press Key field. For PC users, the key combination must contain the Ctrl key; for Macintosh users, it must contain the Command key. Many combinations are already assigned, but you can override an existing shortcut.

  5. Click Change.

    Note

    If you enter a keyboard shortcut that is already in use, a warning box lets you know that this shortcut is already assigned to another shortcut. You can choose to override it, or choose another key combination.

Customizing your keyboard shortcuts to accommodate the way you work can be a fantastic time-saver.


Summary

In this chapter, you explored the Fireworks workspace. You learned how to use the new panel groups, as well as the new Property inspector. This chapter also discussed how to create your own custom keyboard shortcuts so you can make Fireworks work the way you want it to.


Chapter 14: Applying Color

Download CD Content

Overview

Fireworks MX 2004 is built specifically to output images to view on a monitor screen. Fireworks is a Web graphics program; you will not find print-related topics (color separation, halftone, and so on) because they aren't used on the Web. For print applications, use FreeHand MX from the Macromedia Studio MX 2004 package.

Cross - Reference

Refer to Chapters 4 to 12 for using FreeHand.

But with Web graphics there are still variables involved that affect the way your images are viewed by others. The viewer's monitor, video card, and settings determine how many colors can be viewed. In the not so distant past, the average monitor displayed 256 — indexed — colors. Statistics now show that most monitors can view thousands, if not millions, of colors. In countries outside the United States, this may not be the case, so you should check the statistics for the country for which you design a site.

Windows and Macintosh systems have different gamma settings, used to adjust white-point settings and keep midtones from appearing too dark. The Windows system uses a white-point setting of 2.2, which is also standard for television. Macintosh systems default to a setting of 1.8. Images appear lighter on Mac systems and darker and more saturated on PCs.

Tip

Choose View ® Macintosh Gamma or View ® Windows Gamma to see how your images will appear on a computer with the other operating system.

Browsers can also affect the quality of your images.

Tip

AOL browsers are notorious for recompressing your images. As of July 21, 2002, the AOL site has a statement that says they are caching system send images through a compression manager. AOL users can disable this caching compression, but it's on by default. This means that AOL recompresses your carefully compressed images. Oftentimes, this results in very bad looking images.

Start Sidebar
Understanding Web Color

It's important to understand that monitors represent color as RGB — red, green, and blue. The hexadecimal system is the standard way to specify RGB color for use in HTML documents. Hexadecimal values use base 16 mathematics, not the standard base 10 counting system. The 16 values used are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. A color is defined using three sets of two-digit numbers. You won't have to know how to convert RGB into hexadecimal unless you want to; however, you should understand the difference in the numbers when you see them. You'll begin to see how the hexadecimal coding system works as you learn more about using Web-safe colors.

End Sidebar


Choosing Color in Fireworks MX 2004

Color is an important decision when you are designing a Web site. Color conveys different messages, invokes different feelings, and has different meanings in different cultures. Colors can be used to determine the psychological effect on viewers. You may want to search the Internet for articles on the use of colors, what the various colors represent, and how they affect the viewer. Or you can check out a book called Color for Websites: Digital Media Design by Molly Holzschlag (Rotovision 2001).

To choose a color, click one of the many Color boxes in the Property inspector or the Tools panel. A Color box is available for any feature that has a color choice (such as canvas color) and for characteristics such as fills and strokes. A color pop-up window opens (see Figure 14.1). Move the cursor to a color and click. The color window uses a preset swatch group called Color Cubes by default. You may change, add, and delete colors from the color window.

Click To expand
Figure 14.1: Clicking a Color box opens a color pop-up window. Additional options are available in the Options menu.
Tip

You can sample a color anywhere in the Fireworks environment or from anywhere on your desktop by simply passing the Eyedropper tool over a color and then clicking.

To use custom colors, click the System Color Picker icon (the red, green, and blue circle). The Color dialog box in Figure 14.2 opens. You may enter RGB (red, green, blue) or HSL (hue, saturation, lightness) values, add a color to the palette, or select a color from the color field. Notice that if you click a color, the sliding bar shows variations of the color you selected. This is a great way to choose a lighter or darker version of a color.

Click To expand
Figure 14.2: The Color dialog box opens when you click the System Color Picker icon.
Note

System Pickers vary for the Macintosh platform, but the methods are similar.

Click the color palette's Options menu to access the following:

  • Swatches panel — The panel you have set up or customized in the Swatches panel (Window ® Swatches).

  • Color Cubes — The default swatches, which are Web-safe.

  • Continuous Tone — The color swatches, arranged by tone.

  • Windows OS — The color swatches for the Windows OS.

  • Mac OS — The color swatches for the Mac OS.

  • Grayscale — The 256 grayscale swatches.

  • Snap to Web Safe — If this option is selected, any color you sample is snapped to the nearest Web-safe color.

    Caution

    If you use the Eyedropper tool to sample a color from an object but you notice the color shifts and you want to use the actual non-Web-safe color, be sure that Snap to Web Safe is unchecked.
    Cross - Reference

    Chapter 23 shows how to optimize image colors precisely and export the color palette as a custom swatch set.

Customizing the Swatches panel

The Color Cubes display you see in the color pop-up window is the default found in the Swatches panel (Window ® Swatches). It uses 216 Web-safe colors defined in hexadecimal notation. You can add to the Swatches panel by mixing your own custom colors in the Color Mixer (Window ® Color Mixer) or by using the Eyedropper tool to sample a color.

To add a color to the Swatches panel, follow these steps:

  1. Select the Eyedropper tool from the Tools panel.

  2. In the Property selector make a selection from the Sample drop-down menu. The options are 1 pixel, 3x3 Average, or 5x5 Average. If you use one of the Average selections, Fireworks determines the sample color based on all the pixel colors in the 3x3 or 5x5 pixel area.

  3. Click in the area you want to use as the new color.

  4. In the Swatches panel, move the cursor to the open space after the last swatch in the panel and click. The eyedropper cursor changes to a Paint Bucket tool just before you click.

    Note

    If you have the Snap to Web Safe option selected in the Color Pickers options pop-up menu, your color will shift to the closest Web-safe color.

Loading saved color palettes

If you have a custom color palette you would like to add, be sure it is a GIF or Active Color Table (ACT) file. Adobe Color Swatch (ACO) files can be loaded as well (refer to the following Tip). To load a saved palette, follow these steps:

  1. In the Swatches panel, open the Swatches Options menu, and choose Add Swatches.

  2. Select the appropriate file (a saved ACT or GIF file), and click OK.

Adding swatches extends the existing palette. If you want to use only a saved palette, you need to choose Replace Swatches; when you choose Add Swatches, the swatches are added to the bottom of the current panel.

Tip

You can force Fireworks to use Photoshop ACO files, too. Use the Swatches panel options to choose, add, or replace Swatches. In the dialog box, locate the folder where you know a Photoshop ACO file resides. In the File box, type *.aco and then press Enter/Return. You should see your ACO files. Choose the file you want, and click Open. Be aware that the palette may not be organized and displayed the same as it is in Photoshop.

Exporting the current export palette

Fireworks MX 2004 makes it easy to save a palette of the colors in the file you have open, which is a valuable tool when multiple designers are working on the same site design. By using a custom palette of colors, everyone involved in the design and development of the Web site can use the approved colors.

If you have a GIF image open and open the Optimize panel, the Color table displays the colors of that image. If you don't see the colors, click the Rebuild button.

To export a palette, follow these steps:

  1. Open any file.

  2. Be sure the Export File Format is set to GIF in the Optimize panel. If you don't see the colors, click the Rebuild button.

    Cross - Reference

    The Optimize panel is covered in Chapter 21.

  3. Open the Swatches panel, if necessary; then open the Swatches Options menu and select Current Export Palette. You'll see the current colors in the Swatches panel.

  4. Click the Swatches Options menu, and select Save Swatches. Save anywhere you'd like. Fireworks saves in the ACT format.

    Note

    If the Current Export Palette option is grayed out and you have an Export File format of GIF or Animated GIF, WBMP, PNG 8, TIFF8, or BMP8, click the Rebuild button to show the colors in your image. The Current Export Palette option becomes available.


Web-Safe Colors

When the majority of monitors could display only 256 colors, designers generally used a Web-safe color palette when adding color to flat color images, such as backgrounds, text, logos, buttons, and hand-drawn vectors. The Web-safe palette of 216 colors (the 216 that are compatible across platforms and browsers) displays in the major browsers without dithering and displays the way you designed it. Dithering means combining colors to produce alternative colors (not to be confused with the Web dithering option in Fireworks MX 2004, which dithers Web-safe colors). You can recognize Web-safe colors by their hexadecimal numbers, which contain three sets of 00, 33, 66, 99, CC, or FF. To make it easy to use Web-safe colors, Firework's default Color Picker in every Color box uses the Web-safe palette.

When designing a Web site for the masses, you want it to look its best for the widest audience possible. This is where the 216 Web-safe color palette comes into play. These 216 colors don't degrade on a monitor that can display only 256 colors. Many designers today are not as concerned about this problem as they were a few years ago because more and more people are upgrading to better system monitors with better video cards that support millions of colors. However, good monitors are less expensive and more available in the United States than in many other countries that are online, so this reasoning does not necessarily apply to the global audience on the Web. The choice to use Web-safe colors is up to you, but keep in mind that a lot of new consumers are buying computers mainly to get online. Many of these new users can barely use their mouse, much less check and change their monitor settings.

Tip

If you want to sample a color and automatically convert it into a Web-safe color, hold the Shift key as you sample.

Also, if you click in a Color box and decide you don't want to change a color, you can press the Esc key to close the color palette.

Finding non-Web216 colors

To search for Web-safe colors within Fireworks by using the Find and Replace feature. follow these steps:

  1. Open the Find and Replace panel shown in Figure 14.3 by choosing Edit ® Find and Replace (Ctrl/Command+F).

    Figure 14.3: The Find and Replace panel.

  2. Choose Search Files and locate a file you want to check for Web-safe colors.

  3. In the Find area, choose Non-Web216.

  4. More options appear. In the Apply To: area, you have the choice of applying the color change to only the Fill, Strokes, or Effects, to all the Fills and Strokes, or to All Properties. Click All Properties.

  5. Click the Find button. The document you chose opens, and the first area with a non-Web-safe color is highlighted. Click Replace if you want to change the highlighted color to Web-safe, or click Find to leave that color alone and find the next occurrence. Click Replace All to automatically accept all the changes instead of accepting one at a time.

This tool is quite a time-saver if you need to convert a Web site to Web-safe colors.

Using the Color Mixer

Fireworks offers several color models from which you can choose. You can change color models by accessing the Color Mixer (Window ® Color Mixer), opening the Color Mixer Options menu, and choosing another color model. Table 14-1 shows the available color models.

Table 14-1: Color Models
Color Model | Description
RGB | Includes up to 16.7 million 24-bit colors. Each RGB component has a value from 0 to 255, where 255-255-255 is white.
Hexadecimal | RGB hexadecimal values; uses a hexadecimal value from 00 to FF, where 00-00-00 is black and FF-FF-FF is white.
CMY | Print designers may be more comfortable using a CMY (cyan, magenta, yellow) model. It's similar to CMYK but doesn't have the additional black component.
HSB | Hue, saturation, and brightness. Hue has a range of degrees of 0 to 360. Saturation uses a percentage of 0 to 100 percent, where 100 percent is pure white. Brightness has a range of 0 to –100, with 0 being black.
Grayscale | 256 tones from absolute white to absolute black.


Working with Strokes

Strokes are easy to add to vector objects. If you used a version of Fireworks prior to Fireworks MX and Fireworks MX 2004, you would have accessed the various stroke options in the Stroke panel. That panel has been removed. You can access the functions by using the Property inspector or the Tools panel. Figure 14.4 shows the Stroke area in the Property inspector.

Click To expand
Figure 14.4: The Stroke panel.

You can add a stroke to any vector object you've drawn or to any path, and you can see the change in your document. The current stroke setting in the Property inspector is used on the object or path you have selected or are drawing. If you change the properties, you can see the change on-screen. In Fireworks, if you type in a property, press Enter/Return or click in a blank area to activate the change; if you use a slider control to change a property, the change is automatic.

New Feature

Take a look at the various stroke categories. Go to the Property inspector and click the down arrow to access the various stroke categories (see Figure 14.5). As you pass your cursor over each stroke name, additional options for each stroke type are displayed.

Figure 14.5: The Stroke categories showing the various stroke options.

The various options are visible only when you select an object (not a bitmap image) or when you select one of the Vector tools. To add a stroke, follow these steps:

  1. Open a new document (File ® New).

  2. Select the Rectangle tool and draw a rectangle on your canvas.

  3. Select a stroke from the Stroke category, or select None if you want no stroke at all. Choose Basic, Hard Line.

    Note

    If you want to remove a stroke, click the Color box next to the Pencil icon and then click the white square with the diagonal red line. Alternatively, you can choose the no-stroke symbol from the Tools panel. In the Tools panel just below the Fill area are three icons. The middle icon, the white square with a red diagonal line, turns off the highlighted element (Stroke or Fill). Highlight Stroke and click the icon.

  4. Use the slider control to adjust the Edge Softness setting: 0 is a hard edge and 100 is a soft edge.

  5. Click the Color box to select the color you want to use.

  6. Adjust the Tip size by using the slider or by typing in a number. Remember, if you type in a number, you must press the Enter/Return key to accept the change.

There are many other stroke properties you can alter. Accessing all the properties for strokes is an exercise in drilling down through all the various menus.

Stroke options

You can access the stroke options by using one of these methods:

  • In the Property inspector, open the Stroke Category menu and then select a stroke type.

  • In the Tools panel, click the Stroke Options button, which is visible when you click the Stroke Color box.

Figure 14.6 shows the pop-up window for the stroke options as seen from the Tools panel. You can change the category here, as well as the tip size. You can also add texture. The Centered on Path (default) option offers the additional choice of having the stroke on the inside or the outside of a path. The last option is Fill over Stroke, which draws the fill over the stroke. If your object has an opaque fill, the part of the stroke that is inside the path is blocked. If the object has a fill with any transparency, the stroke may blend with the fill edges inside the path.

Figure 14.6: The Stroke Options pop-up window as seen in the Tools panel.

As you can see in Figure 14.6, there is an Advanced button at the bottom of the Stroke Options window. This opens the Advanced pop-up menu, which has three tabs: Options, Shape, and Sensitivity. The best way to discover the power of the advanced settings is to experiment. As an example, the Advanced panel is used to make custom strokes. In previous versions of Fireworks, this is the panel that you needed to use to make a dashed or dotted line, but thankfully the dotted lines are now part of the preset strokes in the Strokes pop-up menu.

Options category

Figure 14.7 shows the Options tab of the Edit Stroke dialog box. This is where you set the Ink Amount, the Spacing, the Flow Rate, and the Texture options. If you change the number of tips to more than one, the variations and spacing options become available. You can preview the changes at the bottom of the dialog box.

Click To expand
Figure 14.7: The Edit Stroke Options category.

Shape category

Figure 14.8 shows the contents of the Shape tab. Here you have of the Size, Edge, Aspect, and Angle options. When you get the shape just right, click Apply and then click OK.

Figure 14.8: The Shape category options.

Sensitivity category

Figure 14.9 shows the Sensitivity tab. The Stroke Property drop-down menu lets you choose from Size, Ink Amount, or Saturation. In the Affected By options, choose the degree to which sensitivity data affects your current stroke. To preview your changes, click Apply; click OK when you are satisfied.

Figure 14.9: The Sensitivity tab options.

Saving strokes as styles

After you start experimenting with strokes, you'll probably come up with some you want to save and reuse. You can save a stroke as a style, which you can then add to and access from the Styles panel. You learn how to add to and change the Styles panel later in this chapter.

To save a stroke as a style, follow these steps:

  1. Open the Styles panel (docked in the Asset panel group). Choose New Style from the Styles Options menu.

  2. Check the features you want to save for the style. For example, you may not want to save the font style when you're working with text, so uncheck that option. If the Font option is not checked, only the stroke, fill, and effects are applied to any text or object. If you check the Font option when you apply the style, the style uses the font information.

    Note

    When you choose to save the font information, the style works on computers that don't have the font installed. This applies for textures and patterns as well. If you use a custom texture or pattern in a style and you want to share your style, you don't have to send a separate texture or pattern file. The information is embedded in the style.

  3. Enter a name for your custom style and then click OK.

That's all there is to it. The new style is added to the bottom of your Styles panel for use on any object.


Adding Fills

The Fill area in the Property inspector (or Tools panel) works similarly to the Stroke area. You can select the type of fill, color, type of edge, and texture. Figure 14.10 shows the Fill area of the Property inspector.

Click To expand
Figure 14.10: The Fill area of the Property inspector.

You can add fills several ways. You can choose to use any of these methods or a combination of them:

  • Fills are added automatically to a closed path unless you have no fill selected (box with red diagonal line).

  • You can add fills by using the Fill box in the Tools panel.

  • You can add fills by using the Fill box in the Property inspector.

  • You can add fills by using the Paint Bucket tool.

  • You can add a gradient fill by using the Gradient tool (in the Paint Bucket tool fly-out menu).

    Note

    Everything in the Property inspector is context-sensitive. You need to have a vector object or a vector tool selected for the Fill options to be visible.

To fill an object, text, or path, follow these steps:

You can practice using the Fill tool by making part of the top background graphic for the Habitat Alert site. Follow these steps:

  1. Habitat Alert site Open a new document (File ® New) that is 800x500 with a white canvas.

  2. Select the Rectangle tool, and draw a rectangle that is 800 pixels wide and 100 pixels high.

    Tip

    You can draw a rectangle any size, enter the desired height and width into the Property inspector, and press the Enter/Return key to activate the change.

  3. Access the Fill Category Options menu (in the Property inspector or Tools panel) and select Solid.

  4. Click the Color box to change the color. Choose #999933 from the custom swatches. If you can't locate the color, you can simply type in the number, including the # symbol, and press Enter/Return.

  5. In the Edge area of the Property inspector, click the drop-down arrow and select Hard. The options are as follows:

    • Anti-Alias (default) — Smooths the edges.

    • Hard — Gives a sharp edge but will be jagged on any curves.

    • Feather — Softens the edges depending on the amount of feather you use. When the Feather option is selected, the Amount of Feather option becomes available.

  6. If you want a texture, click the arrow to access the Textures pop-up menu and then choose a texture from the list. For the Habitat Alert background, click Line-Horiz 4 and move the Amount of Texture slider to 25%.

  7. Save your file. A copy was saved for you named ha.png in the habitat_alert/designfiles/fireworks folder. To find all the Habitat Alert source files, navigate to the habitat_alert folder on the CD-ROM (or your hard drive if you've copied the files there).

Notice the Other option, which is discussed in the "Filling with patterns" section coming up in the chapter. If you select a texture, you have to increase the opacity so you can see the texture. When you increase the texture amount, a Transparent option becomes available. If you click Transparent to select it, the objects or image beneath (assuming there is something beneath your object) show through.

Note

A word on transparency: This is not a true transparency; it appears transparent only over the object you are using in Fireworks. In other words, you can't export the object alone and expect it to be transparent in the browser. At this time, only a PNG32 file will do this; unfortunately, all browsers do not support this format.

None

There will be times when you don't want a fill for a shape — for instance, if your shape is going to be used as a mask for an image, you don't need the fill. There are two different ways to use no fill. The Tools panel contains a white square with a red slash mark. When you pass your cursor over the square with a red slash mark, you'll see a ToolTip of No Stroke or Fill. Make sure that the Fill area is highlighted, and then click it to remove the fill from a selected object. You can also click the Fill Color box in the Tools panel or Property inspector, and click the white box with a red slash, which appears near the top right of the Color pop-up window. The ToolTip for this one is Transparent Button.

Solid

The Solid Fill category fills your object with a solid color. The default is a 100 fill, but you can alter the percentage in the Property inspector by changing the Opacity (to the left of the Blend mode).

Web dithering

Web dithering expands your Web-safe color palette. Dithering was originally used when only the GIF format was available, and photographs with millions of colors were being used for the Web and viewed with monitors using 256 colors. As mentioned earlier in the chapter, dithering involves taking two or more pixels of different colors and positioning them to produce a pattern. This pattern tricks the eye into seeing a different color. This technique works well with GIFs, but you lose a lot of detail when many colors blend in photographs. The best path to take is to use the JPEG format for photographs and the GIF format for vectors and images containing few colors.

In Fireworks, the technique of combining two or more colors to produce a new, hybrid-safe color is called Web Dither. Web Dither contains two Web-safe colors in an alternating 2-pixel-x-2-pixel pattern, thus producing a third color. With this technique, you have 46,656 Web-safe "designer" colors. Don't worry: Fireworks provides you with a simple-to-use interface. To use the Web Dither feature, follow these steps:

  1. In the Property inspector, open the Fill Category menu and choose Web Dither. Click the Color box to see the Web Dither menu shown in Figure 14.11.

    Figure 14.11: The Web Dither pop-up menu.

  2. For more options, click the Color box from the Fill area in the Tools panel and then click the Fill Options button. Figure 14.12 shows the Fill Options window. Notice that Edge options are now available. These are already available in the Property inspector, so an extra click isn't needed to access the Edge options.

    Figure 14.12: The Fill options pop-up menu that opens when the Fill Options button is clicked.

  3. The first color well on the top is the current fill color. Click the color well to choose a non-Web-safe color, type a hexadecimal number, or select a color with the Eyedropper tool.

    Note

    The color you see in the large color area will be applied to your object. Fireworks automatically selects the best Web-safe colors to mix to obtain the closest color to the one you choose. You can, however, click in either Color box on the right and choose a different color.

You can see the two different colors side by side that Fireworks has chosen to pattern (the first two colors below the original color well), along with the reverse of these colors just below it. To see the hexadecimal numbers, move your mouse over the color, and the number appears. This is the pattern being used to produce the best match possible, which can be seen in the large color area. The selected area is automatically filled with the new color.

You don't have to use the color that Fireworks has chosen to blend; you can choose your own colors to mix, if you are feeling adventurous. Fireworks does a great job of automatically finding the best possible match to the Web-safe color you want. If you move your mouse over the fill color from the Info palette, you see two different RGB settings — one for each Web-safe color used to achieve a new Web-safe color.

Using patterns and textures as a fill

Patterns and textures make great fills for text and images you create, and many images can be used as a pattern or a texture. As long as an image is a 32-bit image in a BMP, PNG, GIF, JPEG, TIFF, or PICT (for the Macintosh) file format, you can have an instant pattern. You are limited only by what you can hold on your hard drive or CD-ROMs. You see later in this section how to utilize this almost limitless resource.

Filling with patterns

The use of a pattern in a path object increases the range of options you have as a designer, and it makes flat, uninteresting objects come alive. Although many preset patterns are available in Fireworks, the Other option in the Fill Options menu opens the door to limitless patterns. To use a pattern, follow these steps:

  1. Select the object you want to fill.

  2. In the Property inspector, choose Pattern from the Fill category.

  3. Click in the Fill Color box, and access the Pattern Name list.

  4. Choose any pattern you want. If you want to use a pattern from an image on your hard drive or CD-ROM, scroll to the bottom of the list and select Other.

  5. If you choose Other, browse to an image file, select it, and click Open.

    Note

    If you want a pattern to be permanently added to the Pattern Name drop-down list, place the image file in the Fireworks MX 2004\Configurations\Patterns folder (the location may vary slightly depending on your operating system). The path name may vary depending on the OS you are using, so look around for the Patterns folder.

Editing patterns or gradients

After you apply a pattern or gradient, you can move, rotate, skew, and change the width of a pattern. When an object that has a pattern or gradient fill is selected, you see handles. As you pass your cursor over a handle (not the point), you see the rotation icon (see Figure 14.13). You can click and drag to rotate, or click the circle in the center and drag to a new location. By clicking and dragging on the solid point, you can adjust the handles.

Click To expand
Figure 14.13: A pattern-filled object, selected to reveal the adjustment bars.

Adding textures

Textures can be added to any fill, modifying the brightness of the fill but not the hue. You can use any PNG, GIF, JPEG, BMP, TIFF, or PICT file as a texture. When an image is used as a texture fill, its grayscale value is used. To add texture, follow these steps:

  1. Select any object containing any fill, gradient, or pattern.

  2. In the Property inspector, click the Texture Name down arrow to access the Texture Name list. Choose one of the included texture files or click Other to select a file of your own. The texture you added is shown in the Texture list and is available only for this document — it's not a permanent addition.

    Note

    If you want a texture to be permanently added to the Texture Name list, place the image file in the Fireworks MX2004\Settings\Textures folder.

  3. Adjust the percentage of opacity, which determines the amount of the texture that is applied.

    Cross - Reference

    Refer to the "Setting Preferences" section in Chapter 13. If you have a folder full of textures you frequently use, you can tell Fireworks where to find that folder.

Using gradient fills

A gradient is a blend of two or more colors. Gradients are often used to produce lighting effects, to give the illusion of depth, and to provide an interesting blend of colors. They are also used as terrific backgrounds and fills for transparency masks when you are working with bitmaps (see Chapter 17). In this section, you learn how to use and edit gradient fills to suit your needs.

Tip

Gradients are best used in images that you plan to export as JPEG files. Many colors are needed to make a nice smooth transition of colors. Gradients often appear banded — that is, show noticeable lines — in a GIF image.

Fireworks MX ships with 12 types of gradients and 13 preset gradient color patterns; however, the number of alterations and variations is almost endless. The best way to describe the 11 types of gradients is to show you a small sample of each. Figure 14.14 shows a representation of Linear, Radial, Rectangle, Cone, Contour, Satin, Starburst, Folds, Ellipse, Bars, Ripples, and Waves.

Click To expand
Figure 14.14: A representation of the gradient options.
New Feature

The Contour gradient is new to Fireworks MX 2004. It's great for adding gradients to curved objects.

To add a gradient, follow these steps:

  1. Click the Fill Category arrow in the Property inspector to access the visual gradient list.

  2. Place your cursor on the word Gradient.

  3. Select the gradient style you want from the list of images. After you choose the type of gradient you want, you can change the preset colors, add additional colors, and even add transparency. Click the Fill Color box to access the Edit Gradient dialog box (see Figure 14.15).

    Click To expand
    Figure 14.15: Edit Gradient window.

  4. To edit the gradient, click inside the color fill box. The Gradient Editor opens, as shown in Figure 14.15.

  5. Choose the color combination you like from the Preset gradient color sets, or use the gradient that is the default.

    Note

    The default gradient fill color is a combination of the current color of your stroke and the color of the Fill tool.

If your object is selected, it is automatically filled with the gradient. Test each of the presets and all the different gradient types to get an idea of how each one looks and performs.

Tip

If you are using a gradient fill in a GIF image, you may see banding. To help minimize this effect, add a small blur to the fill.

Altering a gradient's position

The ability to alter a gradient position is where the real power of the Gradient tool becomes evident. You can customize gradients by adjusting the center, width, and skew of a pattern. To alter a gradient's position, follow these steps:

  1. Follow the preceding steps for filling with a gradient. To alter the gradient's position, click the object to make it active; the gradient handles appear.

  2. To change the position of the gradient, drag the circular handle to adjust the starting point of the gradient.

  3. Move the cursor over the control handles until you see the rotate cursor. You can now drag the handles to a new location.

    Tip

    Because a gradient is small, it's sometimes difficult to adjust. For example, if you want a vertical gradient, the gradient handles need to be perfectly straight. Holding the Shift key doesn't help. What does do the trick is to adjust the handles larger than needed and then shorten them. Another way to fill vertically is to use the Gradient tool from the Tools panel and then click and drag while pressing the Shift key to apply the fill.

Editing gradient colors

Existing colors in a gradient preset can be changed, deleted, or moved, and new colors can be added with ease by following these steps:

  1. Draw a rectangle and fill it with a gradient style you prefer.

  2. Click the Fill Color box to access the Gradient Edit window.

    Note

    If you access the gradient fill by clicking the Fill Color box in the Tools panel, you need to click the Edit button to access the Gradient Edit window.

  3. To change any of the colors, click the color swatch and choose another color.

  4. To add another color, place your cursor anywhere below the color ramp where you want another color added and click to position a new color swatch. Then click the swatch to choose another color if you want.

  5. To move the position of any of the colors, click and drag the color swatch to the new location.

  6. To delete a color, click and drag the swatch toward the bottom of the panel.

You have plenty of control when it comes to gradient colors. You can sample colors from other images with the Eyedropper tool — just as you can when selecting solid fills — to produce some interesting color combinations. If you have an image where you really like the combination of colors, you can make a custom gradient using the colors from that image. It's a great way to build a Web site's color around a core image.

Adding transparency

You can also make part of your gradient transparent. For instance, you may want the colors to start at only 50 percent opacity; then fill to 100 percent from there, or it can end at 0.

To add transparency to a gradient, follow these steps:

  1. Fill an object with a gradient of any color and style.

  2. Click the Fill Color box in the Property inspector to open the Gradient Editor.

  3. Click one of the transparency swatches (see Figure 14.15) and move the slider to the opacity you want. You can adjust both the swatches as well as add additional ones in the same way you added color swatches.

    Tip

    The transparency can be seen only if the object containing the gradient is placed above something else in your design. When you export the image, it has to include the object that you are viewing beneath the transparent object. You can't export just the object with the transparency applied to it; it won't appear to be transparent. Refer to Chapter 21 to learn how to slice, optimize, and export your images.

Saving gradient colors

After you have meticulously produced a new gradient, you may want to use it again later. Unfortunately, your custom gradient is good for only your current document.

You can save the gradient type and colors as a style. Any repositioning you may have done won't be saved. To save as a style, follow these steps:

  1. Open the Styles panel (Assets Panel group or Windows ® Styles).

  2. From the Styles option menu, choose New Style to open the New Style dialog box. Name the gradient, choose which properties to save as a style, and click OK. Your new gradient style is added to the bottom of your Styles panel.


Using the Fireworks Styles Panel

Macromedia Fireworks ships with a number of styles. You can apply preset styles to an object with the click of a button. You can also edit preset styles, or you can make your own styles. The Style panel is shown in Figure 14.16.

Figure 14.16: The Styles panel.

To apply a style to an object, follow these steps:

  1. Select the object to receive the style.

  2. Open the Styles panel (Window ® Styles).

  3. Scroll the list of styles and click one.

Modifying styles

You might want to change a style after you apply it. If you open a previously saved object with a style applied, you can change it. To modify or edit a style, follow these steps:

  1. Select the object with a style applied.

    Note

    In the Property inspector you can see whether the object has any effects. (Many styles contain effects.) Any Live Effects applied show up in the Effects list. If you want to see what the object would look like without a particular effect, you can turn off the view by clicking the check mark next to the effect. The view is turned off, but the effect is still there. To turn the effect back on, click the red x, which will turn back into the check mark. If you want to delete an effect, select it and then click the minus sign.

  2. Any fills applied are shown in the Property inspector. Click in the Fill Color box to edit the fill.

  3. Any strokes settings are also shown in the Property inspector. Edit them just as you would edit any other stroke.

Saving styles

If you have an object to which you have applied a custom fill and special effects that you want to keep and reuse again on another object, you can save it as a style. You can use styles you save, as well as those in the Style panel for the pop-up menus that Fireworks can make. To save a style, follow these steps:

  1. Select the object for which you want to save the effects as a style.

  2. Open the Styles Options menu and choose New Style. Name your style.

  3. Select the options you want to save as a style. Remember, if the style is attached to a font, you don't have to choose Font. If you do choose Font, the same font is applied when you apply the style. If you don't choose Font, the style effects are added to whatever text you have typed.

    Note

    The nice part about making a style out of text and saving the font is that the font is embedded and can be used on any machine.

  4. Click OK.

    Cross - Reference

    See Chapter 18 for more on making instant pop-up menus.

Importing and exporting styles

When you create new styles, you can export one, or make several and export them as a set. To import or export styles, follow these steps:

  1. Open the Styles panel (Window ® Styles).

  2. Open the Styles Options menu, and choose either Import Styles or Export Styles.

  3. The Open dialog box appears. Here you can locate and choose the file to import or choose where to save the export.

    Tip

    Quite a few additional styles are in the Fireworks folder of the Macromedia Studio MX installation disc.

  4. Click Open or Save.


Effects versus Filters

If you compare the Filters menu to the Effects panel menus, you'll notice that most options are available in both menus. The main difference between effects and filters is that after you use the Filters menu to apply a filter, it is permanent. If you use the Effects menu, it remains editable. Basically, the Filters menu is for bitmap images (pixel-based images) and the Effects menu is for vectors (mathematically rendered) images. But the Effects menu is really much more. Effects are actually Live Effects, which means that you can edit or remove the effect. You can even use most of the Live Effects on a bitmap image; however, if you try to use the Filters menu on a vector object, it converts the vector to a bitmap and then applies the filter. Whenever possible, use the Effects menu, which gives you the choice of editing.

Cross - Reference

You work with the Filters menu in Chapter 17.

Changing an image's color using Live Effects

Using Effects to change colors sounds unusual, but it's quite powerful and offers a lot of flexibility. The logo for this example, design.jpg, is from www.graphic-design.com. If you have a logo like this on a Web site and decide to change the color of the ampersand or the text itself, it could be a huge pain to redo, especially if the logo is more ornate than this one. Another roadblock could be that you are doing a redesign, you don't have access to the original file, and a custom font was used. With the following techniques, problems such as these don't matter. You'll be able to change the colors quickly and easily by following these steps:

  1. In the Open dialog box change the Files of Type to All Files. Select design.jpg from the chapter14_exercise folder on the CD-ROM and open it.

  2. Using the Pointer tool, select the bitmap and click the plus sign in the Property inspector to open the Effects list.

  3. Click Adjust Color ® Color Fill.

  4. Click the Color box and choose a bright blue. In the same window, choose a Blend mode of Hue. Notice how only the ampersand changes.

  5. Click the Edit and Arrange Effect icon to access the Color Fill options; then change the Blend mode to Screen to colorize with variations of the blue you choose.

Converting a color image to grayscale

Some circumstances might require that you use a grayscale image. It's easy to convert a color image into grayscale; you just need to know where to find the function. To convert a color image into a grayscale one, follow these steps:

  1. Open coloredflowers.jpg from the chapter14_exercise folder. Alternatively, use any image you'd like.

  2. Choose Commands ® Creative ® Convert to Grayscale.

    Note

    Notice there is also a command to convert to a sepia tone image.

  3. You can now export this image as a JPEG image. The image is ready to colorize in the following section.

    Cross - Reference

    You learn all about exporting in Chapter 21.

Colorizing a grayscale image using Live Effects

You now see how easy it is to obtain the extremely popular effect of one-color images. They are one color with many tones. To colorize an image in this fashion, follow these steps:

  1. If necessary, open the flowers.jpg image from the chapter14_exercise folder.

    Tip

    When you applied the grayscale (or sepia) effect, Fireworks generated a Hue/Saturation Live Effect. If the file hasn't been closed, you can click the Edit and Arrange Effects icon and make changes, or add a second Hue/Saturation effect.

  2. Select the image.

  3. Click the plus sign in the Effects area of the Property inspector.

  4. Click Adjust Color ® Hue and Saturation.

  5. Move the sliders to get the color you want.

  6. Experiment with lowering the opacity.

  7. Change the Blend modes and see the interesting effects you can achieve.

    Tip

    You can also use the Adjust Color ® Color Fill to select a specific color and then adjust the opacity to suit.


Using Scans or Digital Photos in Fireworks

You can use a scanner to scan images and send them to Fireworks. The scanner just needs to be TWAIN-compliant for Windows users or support Photoshop Acquire plug-ins for the Macintosh. This applies to digital camera image transfers as well.

To access a scanned image or digital photo from a camera, you use the Import function of Fireworks. This function opens the image as a new document. If you are on a Macintosh, you need to be sure that the Acquire plug-ins are in the Fireworks folder, or you can change your preferences (Edit ® Preferences) to point to the location of the plug-in. To import an image, follow these steps:

  1. Follow the scanner manufacturer's instructions, connect it to your computer, and be sure it's plugged in.

  2. If you haven't installed the drivers for your scanner, do so now.

  3. If this is the first time you are using the scanner, click File ® Scan ® Twain Select, select your scanner from the list, and click OK; otherwise, select Twain Acquire. Your scanner software opens. You can now apply your settings and scan.

  4. The imported image opens as a new Macromedia Fireworks document.

Removing artifacts from a black-and-white scan

A common annoyance people run into when they scan a line drawing is a lot of gray noise or trash (called artifacts) in their image. This problem is easy to correct in Fireworks. A scan of a drawing done by Ron Rockwell (see his bio in Appendix B) is included in the chapter14_exercise folder. You can practice on the drawing.

  1. Open tonyline.tif from the chapter14_exercise folder.

  2. Zoom in to the right side of the steak, or anywhere you see a lot of gray particles (artifacts).

  3. Select the image, and choose Filters ® Adjust Color ® Levels to open the Levels dialog box.

  4. In the Levels dialog box, click the Select Highlight Color Eyedropper tool (on the right).

  5. Click an artifact in the document.

  6. Click OK to close the Levels dialog box. The spots disappear.

    Tip

    You can also darken some of the black lines using the Levels dialog box. Zoom into the curve of the apron below the elbow that is holding the steak. Notice the lighter spots of color, which are caused because the drawing was made with a felt pen. Select one of the lighter squares by using the Select Shadow Color Eyedropper tool, and then click OK.

  7. Export the image when you are satisfied.


Summary

In this chapter, you learned about using the color functions in Fireworks. You learned how to use fills and strokes, as well as how to make customized strokes and effects and save them as styles. You learned how you can use custom swatches, which become important in a shared work environment. You also learned how to import scanned images into Fireworks and how to remove artifacts from a scan. You saw firsthand how powerful Live Effects can be in colorizing an image.


Project Summary

Habitat Alert site In this section, you take a look at incorporating what you've done in this chapter in the Habitat Alert Web site.

Files Prepared for the Habitat Alert Web Site
Images | Where to Now
ha1.png | This is the beginning of the layout for our Habitat Alert site. You use it again as you add shapes and images prior to exporting.


Chapter 15: Drawing Like a Pro

Overview

In this chapter, you master the vector tools used to draw complex and simple shapes, add borders, and create rounded corners and triangles. You also learn how to edit and customize your shapes.

A great deal of Firework's power lies in its capability to produce a wide range of vector objects — or rather, the ability you have using the vector tools to produce practically anything you'd like. The following section gives you more insight into the benefits of using vector objects versus bitmap images.

Using vector tools can be intimidating. This is especially true when you are using the Pen tool and manipulating handles that alter the shape of an object. If you find yourself getting frustrated while learning the tools, take it in small chunks. To help you master the vector tools, several movie tutorials are included on the CD-ROM so that you can see how to use them in addition to reading about them. You'll get plenty of practice along the way. You will be making many different shapes in this chapter and learning how to edit what you've drawn.


Understanding Paths

Vector images consist of paths. Every path has at least two points to yield a line segment. A path can be open (a line) or closed (lines connecting). In Fireworks, an object is also a path — a vector path. Where bitmap images use pixels, a series of little squares with color to depict the image, similar to a mosaic, vectors use mathematical calculations. A path starts at X, Y and ends at A, B. Because of the mathematical nature of vectors, they are very flexible. A vector object can be stretched to a larger height and width and still maintain its image integrity. As the object increases or decreases in size, Fireworks recalculates the math necessary to render a great-looking image. This quality makes vector objects popular for use in animations and Web page graphics. The ability to scale a vector drawing is also beneficial if you design a logo that you want to print. The logo can be scaled down for Web use and scaled up for print.


Vector Tools

To use the vector tools in Fireworks, you simply need to select the tool you want. As soon as you choose a vector tool, you are automatically in Vector mode. Figure 15.1 shows the area of the Tools panel that contains the vector tools and a detailed listing for each of these tools.

Click To expand
Figure 15.1: The Tools panel showing the Vector tools area.
Note

The Eyedropper tool and the Fill tool can be used in both bitmap and vector drawing modes; they are placed in the Tools panel between the bitmap and vector areas.

The vector tools include the Line tool, vector drawing tools (Pen, Vector Path, and Redraw Path), and the shape tools (Rectangle, Ellipse, Polygon, and the various Auto Shapes).

New to Fireworks MX 2004 is the addition of Auto Shapes. The first three shapes are normal shapes. But below this are the Auto Shapes, which have various control points that you can use to drastically alter the shapes.

In the Vector category of the Tools panel, you'll also find the Text tool; the Freeform, Reshape Area, and Path Scrubber tools; and the Knife tool.

New Feature

You can add various properties to a vector object when it's selected, including strokes, fills, or effects from the Effects menu.

Using the vector shape tools

The vector shape tools are easy to use. For example, you'll use the Rectangle and other simple shape tools on a regular basis for making buttons.

Every object you draw with a vector shape tool contains a starting and ending point to plot the path of a line. With the vector shape tools, shown in Figure 15.2, those points are automatically placed. You can edit the points for vector shapes at any time, although you may be prompted to ungroup a shape first. Holding down the Shift key while adding the shape constrains it to a perfect square or circle; holding down Shift and pressing the Alt/Option key starts the shape from the center point out.

Figure 15.2: The Shape Tools pop-up menu in the Tools panel.

Rectangle tool

The Rectangle tool is often used to build buttons and shapes. When you select the Rectangle tool, you have many options available in the Property inspector, as shown in Figure 15.3.

Click To expand
Figure 15.3: The options available in the Property inspector when the Rectangle tool is selected.
Note

Select any of the tools in the Tools panel, and check the Property inspector for its properties. You may need to set the property of a tool prior to using it.

After you draw a rectangle, you have more options available in the Property inspector to alter the width and height, the x and y coordinates, and the ability to add effects. You may also add fills and strokes.

Note

In Fireworks, rectangles are grouped objects. This becomes important to know when you want to use certain tools that require an ungrouped path.

No stroke is the default if you are starting with a new document, as shown in Figure 15.3. The red line through the circle next to the icon with the pencil image indicates no stroke. But if you've used any tool with a stroke in the same document, the default stroke is the last one you used, except with the Pencil tool. In Fireworks, there are many ways to accomplish the same task. For example, one method of drawing a triangle is with the Rectangle tool. To do so, follow these steps:

  1. Select the Rectangle tool and draw a rectangle in your document. Press the Shift key while you draw to create a perfect square.

  2. With the Subselection tool (white arrow), select the rectangle. The warning in Figure 15.4 opens. Click OK. A rectangle has to be ungrouped prior to editing.

    Click To expand
    Figure 15.4: The warning that opens when you use the Subselection tool to select the rectangle.

  3. Click one of the lower corner points to select it; then press the Delete key. Figure 15.5 shows the resulting triangle.

    Figure 15.5: A point deleted resulting in a triangle.

  4. You can reposition the triangle by using any of the Transform functions that give you the Rotate option, as shown in Figure 15.6. For example, you can select the Scale icon from the Tools panel.

    Figure 15.6: The triangle being rotated using the Scale tool.

Ellipse tool

The Ellipse tool has the same options available as the Rectangle tool. If you want a perfect circle, press the Shift key as you draw your ellipse.

Polygon tool

In Fireworks, you can draw equilateral polygons ranging from a triangle with three sides to a polygon with 360 sides. The Polygon tool always draws from the center out. If you want to constrain the shape to a 45-degree angle, hold down the Shift key and drag the shape.

The Polygon tool does have a few options that the other shape tools don't have. When you select the Polygon tool, the Property inspector, shown in Figure 15.7, includes the Polygon or Star shape options. You can choose the number of sides and the angle you want, or you can leave the Auto option checked. With Auto, the angle is decided for you. If you draw the polygon first, however, these options are not available. You must choose the shape, sides, and angle prior to drawing the shape.

Click To expand
Figure 15.7: The options of the Polygon tool prior to drawing the shape.

Auto Shapes

The best description of Auto Shapes is that they are interactive clip art. Because of the added control points, you can manipulate the various shapes by following the instructions in the ToolTips as you pass your mouse over the yellow control point.

Auto Shapes can be used one of two ways. You can select the desired shape and then click on the document. A default sized shape will appear. Or you can click and drag the size you want.

Because the Auto Shapes can be designed and distributed by third parties, this feature adds a lot of extensibility to Fireworks. In fact, some of them shipped with Fireworks MX 2004. In the Assets panel group is a new tab called Shapes (Window ® Auto Shapes). The shapes are shown in Figure 15.8.

Click To expand
Figure 15.8: The additional Auto Shapes that ship with Fireworks MX 2004 found in the Shapes panel.

If you'd like to make your own shapes, refer to the documentation at http://www.macromedia.com/support/fireworks/extensibility.html/Arrow Auto Shape.

Select the Arrow from the Shape Tools list and drag to draw one on the document (or click to place it). Pass your cursor over the yellow control points to see specific instructions of how to manipulate this shape. For instance, click the upper-left corner control point (roundness) and drag to get a rounded corner. Experiment with all the points so you get a feel for each function.

Beveled and Camfer Rectangle

The Beveled Rectangle and the Camfer Rectangle shape tools both work the same way. Once you've drawn the shape, click on the upper left corner or lower right control points to change the shape. The control point cycles through two additional shapes for a total of three, as shown in Figure 15.9. You can change individual corners by pressing Alt/Option and dragging. This includes the corners that say Click to Switch Corners. This is a great feature if you want to have some square corners mixed with rounded corners. For a square corner, click Alt/Option and drag toward the edge of the shape to remove any curve.

Click To expand
Figure 15.9: Clicking the lower-right control point cycles through these three shapes.

Connector Line

Connector lines are good to use when you make maps and need lines with curves. To use the Connector Line shape tool, select the Connector Line shape and click in the document. Pass your mouse over each point. The center control point rotates the line. Figure 15.10 shows the default connector line and some variations.

Click To expand
Figure 15.10: The Connector Line shape.

There are five control points on a connector line. These build three line segments. Click and drag one of the two end points to change the size of the connector line. Click on the middle point to rotate the entire shape 90 degrees. Click and drag the middle point to change this segment's relation to the first and third segments. The points at the inner corners of the connector line are used to change the corners from square to curved. Click and drag either inner point toward the outer (end) one to round both corners evenly. You can round just one corner by holding down the Alt key while you click and drag.

Donut shape

Select the Donut shape tool, draw a donut, and pass your cursor over each control point. The one to the right of the center adjusts the size of the inner opening. The center point says Click to Reset. Click it to remove the hole. Click and drag the control point at the top of the circle to change the donut shape into one segment. Hold down the Alt key and click and drag this point to add segment lines to the donut. Figure 15.11 shows the center radius made larger and a line segment added. If you want to change the color of the new segment, select the Subselection tool, select the segment, and change the fill color.

Click To expand
Figure 15.11: The center hole made larger.

L shape

The L shape is extremely popular for Web page mastheads and links. Select the L shape tool, draw an L shape onto your document, and start manipulating the control points. You can make rounded corners and adjust the width and height of the shape. Figure 15.12 shows the default shape and an altered one.

Click To expand
Figure 15.12: The L shape on the left and the top corner adjusted on the right.

Pie shape

Select the Pie shape tool and click in the document. You can add segments by Alt/Option+dragging the control points.

If you want to add a different color to each segment, use the Subselection tool, select the segment, click in the Fill Color box, and select the desired color.

If you really want to have some fun, use the Subselection tool to move one of the segments. When you move the shape, you'll get a warning that the shape may not function properly after making the alteration. Click OK.

You can also add effects such as a bevel or drop shadow. The effect will be applied to all pieces unless you ungroup the shape, as shown in Figure 15.13.

Click To expand
Figure 15.13: A Pie shape with a couple of segments recolored, one segment moved, and some effects added.
Caution

After you ungroup a Smart Shape, you lose the control points and the functionality as a Smart Shape.

Smart Polygon and Smart Rounded Corner

There are two Polygon shapes in the Shape tool menu. The one at the top that appears with the Rectangle and Ellipse is a regular shape. The Smart Polygon shape tool is the one with the special control points to manipulate your shape. The rounded rectangle is the same as the Beveled and Camfer shape tools; it's the third shape in the rotation when you click on the "change shape" control point.

But the biggest advantage of an Auto Shape over a regular shape is that you can manipulate one corner at a time. A common shape is a rectangle that is rounded on one or two corners only. To make a rectangle with rounded corners on the top, follow these steps:

  1. Select the Rounded Rectangle Smart Shape.

  2. Click to place the shape in your document.

  3. Select the top right control point.

  4. Press the Alt/Option key and drag the control point to the right.

  5. Repeat for the top-left control point, except drag to the left. Figure 15.14 shows the result.

    Click To expand
    Figure 15.14: A rectangle with two rounded corners and two square corners.

Spiral shape

Experiment with the Spiral shape tool. If you click in the center, you open and close the shape. Click and drag the top control point to adjust the amount of spirals. If you drag up, the spirals increase; if you drag down, they decrease. Figure 15.15 shows some examples.

Click To expand
Figure 15.15: The Spiral tool in action.

Star shape

You can get some fantastic star effects with this shape. Click and drag all the points, and experiment until you learn how each control point will affect your star. You can adjust the roundness, size, and amount of points. Have fun. Make two stars, put them together, and rotate one, as shown in Figure 15.16. Try adding some fun effects such as a motion blur.

Click To expand
Figure 15.16: A shape made by adjusting the roundness, point numbers, and size. The second shape is two stars with one rotated.

Line tool

The Line tool draws only a straight line with two points. If you want to constrain the line in 45-degree angle increments, hold down the Shift key and drag the shape. You can choose the stroke type, size, color, and texture prior to drawing. All the options in the Property inspector become available after you draw a line or lines. Practice using the Line tool by drawing a zigzag line:

  1. Select the Line tool. Be sure you have color for the stroke different from the Canvas color.

  2. Press the Shift key to constrain the line to 45-degree increments, as shown in Figure 15.17.

    Figure 15.17: The first line drawn.

  3. Press the Shift key and draw another line, as shown in Figure 15.18. Pull out a guideline to help position and size your lines (View ® Rulers); then drag a guide from the ruler.

    Figure 15.18: The second line drawn.

  4. Place the lines together to form an upside down V. With the Pointer tool, draw a selection around the two top points (or choose Select ® Select All) and choose Modify ® Combine Paths ® Join, as shown in Figure 15.19.

    Figure 15.19: The lines joined together.

  5. To continue with the zigzag line, choose Edit ® Clone (or Alt/Option and drag a copy), and then use the arrow keys to move into position. Repeat until the line is the size you want.

  6. When your line is as long as you'd like, choose Select ® Select All; then choose Modify ® Combine Paths ® Join to make it one object, as shown in Figure 15.20.

    Figure 15.20: The completed zigzag line.

    Tip

    Another easy way to make a zigzag line is to use the Text tool. Choose an M in a font with pointed peaks, such as Lithograph. Adjust the kerning and you'll have a line. Because it's the Text tool, you can also attach this to a path and use it as a border.

Vector path drawing tools

As mentioned, vector images consist of paths, which can be defined as lines with at least two points. Vector objects (called objects in Fireworks) are fully scalable because they are made up of a series of lines. This is the real power in Fireworks. You can make a vector shape and scale it without loss of quality. You can use this feature for making logos that can be used in print and on the Web. Your vector art can also be used in Flash. When made into a Flash symbol, the same art can be scaled and attributes such as color and opacity changed, and the symbol will remain the same.

Fireworks has a great arsenal of drawing tools that enable you to draw any shape you want.

Tip

If you have a digital drawing tablet, now would be the time to use it. It's much easier to draw free-form lines with a drawing pen than it is with a mouse.

Pen tool

There are three tools on the Pen tool fly-out — the Pen tool, the Vector Path tool, and the Redraw Path tool.

You don't actually draw a line with the Pen tool; you plot the points as you would when drawing a dot-to-dot picture. Each click places a new point, and a line segment is added between each point.

The Pen tool has two kinds of points: a corner point, which has at least one straight segment, and a curve point, which has at least one curved segment. To see the difference between these two types of points, follow these steps:

  1. Open a new document (File ® New) and use a size of 300 pixels by 300 pixels. Ensure the line has a color assigned to it. In the Tools panel near the bottom in the Color section, click the color well next to the pencil icon and choose a color.

  2. Select the Pen tool and click the Canvas; go straight across the page a few inches and then click again. A line connects the two points you added. Continue clicking anywhere on the Canvas. No matter where you click, the lines keep connecting the dots.

  3. Close your first practice document without saving it, and open a new one (File ® New); any size is fine, but 200 pixels by 200 pixels gives you a little room in which to practice. Select the Pen tool and click the Canvas; click again a few inches away, and then go down the page a bit and click and drag. See what happens as you drag? The line is curved, as shown in Figure 15.21. It takes practice to get used to working with a curved line.

    Figure 15.21: A curved line using the Pen tool.

    Cross - Reference

    See Part II of this book on FreeHand for even more Pen tool practice. There are also some movies and tutorials on the CD-ROM for more practice.

When you draw with the Pen tool and drag to form curved points, Bézier control handles are added to the path. Control handles control the shape of the object.

Note

Originally developed by Pierre Bézier in the 1970s, a Bézier curve, in its most common form, is a simple cubic equation. Curves and surfaces are defined by a set of control points that can be moved interactively. If you've ever used FreeHand or Illustrator, you've probably used Bézier curves before.

Shapes form closed paths; a line that does not make an enclosure is considered an open path. To end an open path, double-click the last point or choose Edit ® Deselect. To form a closed path, click the starting point. As you move your cursor to the starting point, look for a small circle to appear beside the arrow. The circle indicates that clicking completes a closed path. Most tasks with the Pen tool have these small indicators to let you know how clicking will affect a point.

Vector Path tool

The Vector Path tool is similar to the Brush tool (see Chapter 17); it draws like a paintbrush. With the Brush tool, the shape drawn is composed of pixels, but with the Vector Path tool, the shape is a path containing points. A path with a stroke applied can be edited like any other path, which makes this tool more powerful than the Brush tool. This is not to say that the Vector Path tool is always the best choice. For instance, if you want to "paint" a shape in a bitmap image (a photo or another flattened image), you may prefer the Brush tool.


Bezier Curves

Team LiB

Bézier Curves

A Bézier curve (pronounced bezz-ey-aye) is based on mathematical calculations. The name comes from Pierre Bézier, who, in the 1970s, formulated the principles on which most vector objects are now based. The theory is that all shapes are composed of segments and points. A segment can be straight, curved, or a combination of both straight and curved. A combination of two or more points joined by a line or a curve is referred to as a path.

A straight line joins two points using the shortest possible distance. You change the straight line to a curve by moving the control handles. Figure 15.22 shows two paths with the same position of points; notice how different the same path can be made when the control handles are manipulated.

Figure 15.22: A path with straight segments and one with Bézier curves added.

No limit exists to what you can do to a Bézier curve by adding, deleting, moving, and manipulating the points of a path.

Drawing a Bézier curve

To draw a Bézier curve, follow these steps:

  1. Open a new document (File ® New). Select the Pen tool and click anywhere on your Canvas to set the beginning point of the path.

  2. Move your cursor and click somewhere else on the Canvas to set the second point of the path. Notice how a straight line automatically connects the points.

  3. Move the cursor again and click to set another point, only this time hold the mouse button down and drag a bit in any direction. As you drag, a curve forms. You can click anywhere to place another point.

  4. Double-click to end the path. Notice that a control handle is attached to the curve you formed, as shown in Figure 15.23.

    Figure 15.23: A curve with the control handles visible.

Using the control handles of a Bézier curve

After you've drawn a Bézier curve, you can manipulate either control handle to affect the line segment. Pulling on a handle increases the tension for that line segment. To make adjustments with the control handles, use the Subselection tool and click a point on the path. When the cursor is near a point, it changes to a white arrowhead, which indicates the point can be selected. When you click a point, the solid square turns into a hollow square. Bézier handles are usually visible when you select a point that is a Bézier curve. To practice manipulating Bézier curves using Bézier control handles, follow these steps:

  1. Select the Pen tool, click to place three points in a row, and double-click the ending point of the path (see Figure 15.24).

    Figure 15.24: A straight line with three points drawn.

    Note

    The squares will be hollow when you first draw the line, unless you've changed the default in Preferences (EditÍPreferencesÍEditing). You don't need to make any changes. Just be aware that the screenshots in this book have solid squares.

  2. Select the Subselection tool. Click the middle point; it will turn into a hollow square. If no handles appear (and they won't on this straight line), press the Alt/Option key and drag the middle point down. When you release the mouse button, a control handle is visible. Figure 15.25 shows what your curve should look like.

    Figure 15.25: A curve added to the straight line.

    Tip

    Press the Alt/Option key first; then click and drag. It's a tricky method.

  3. Press the Alt/Option key on the same point and drag straight up. Figure 15.26 shows the results.

    Figure 15.26: Another curve added by dragging the other control handle.

When you are working with Bézier curves, it takes practice to get a feel for what direction to pull and turn to get the desired shape. Practice by clicking and dragging the top control handle to the right and down. You can move it up, down, and all around.

On the CD-ROM

Be sure to watch the movie tutorial in the Movies folder on the CD-ROM called bezier.mov. The movie has the Fireworks MX interface, but it works the same way in Fireworks MX 2004.


Editing with the Pen Tool

So far in this chapter, you have learned how to draw paths and connect beginning and ending points. You might need to join multiple paths that you have drawn, or you may want to break apart a path. You use the Pen tool to join multiple paths, close a path, and continue a path you have drawn.

Closing a path

If you try to fill a path object and nothing happens, or the fill doesn't go just inside the path and produces strange results, your path is probably not closed. If this happens, you need to join the path, or join multiple paths to close the path. Follow these steps:

  1. With the Pointer tool, select the path you want to close.

  2. Select the Pen tool (a little x will appear in the lower-right corner of the cursor).

  3. Move your cursor over one of the end points of the path. As it approaches the end point, the lower right changes to an open arrowhead, which indicates that you can add the point.

  4. As the pen cursor approaches the closing point, the indicator changes to a hollow circle. You can click as soon as this circle appears to close the path.

Continuing a path

Adding to a previous path is similar to closing a path, except you don't have to close a path to add on to it. If you want to add on to a previous path, follow these steps:

  1. With the Pointer tool, select the path you want to add on to.

  2. Select the Pen tool, and move your cursor over one of the end points of the path. When the x changes to an open arrowhead, click the end point once. If you want the next line segment to be curved, click and drag.

  3. Move your cursor to the next location in which you want to add a point, and then click once. Continue clicking to add points until you have the path you want.

Joining paths

After you draw multiple paths, you can join them together using the Pen tool. This may sound similar to closing paths, and it is almost the same procedure; the difference is that you don't have to close the joined paths. To join paths together, follow these steps:

  1. With the Pointer tool, select the path you want to join.

  2. Select the Pen tool, move your cursor over one of the end points of the path, and click the end point once.

  3. Move your cursor to the end point of the other path you are connecting to, and click once. You can combine as many paths as you like in this way.

    Caution

    If you are connecting two open paths this way, Fireworks automatically wants to continue the path. So after the two selected points are joined, the opposite end point (the one that wasn't joined) of the path selected last is ready to be continued.

Adding and deleting points

If you want a path to change direction, you may need to add at least one point. Follow these steps to use the Pen tool to add points to an existing path:

  1. Select the path using the Pointer tool.

  2. Click once on the line segment using the Pen tool to add a corner point. To add a smooth curve point, click and drag to pull out the curve control handles.

With the Vector Path tool, you can add more points than necessary for the shape desired. Extra points can make a shape or path look choppy or not as smooth as you might want. To remove points, follow these steps:

  1. Select the path you want to edit with the Pointer tool.

  2. Select the Pen tool. Move to the point that you want to delete. When the minus sign appears beside the cursor, click once on the point.

  3. Another way to remove unwanted points is to choose Modify ® Alter Path ® Simplify, and then type the number of points you want removed and click OK. Although this option doesn't give you precise control, it is a fast way to make simple changes.

Using the Pen tool to edit a shape

Habitat Alert site The shapes used in the Habitat Alert site are complex and use Pen tool techniques and the Path Combine features shown in the following section.

Adding guides

Before altering a shape, you need to set up some guides. To set the guides, follow these steps:

  1. Navigate to the habitat_alert\designfiles\Fireworks folder and open the ha1.png file.

  2. Enable rulers by choosing View ® Rulers. To place a guide, click in the horizontal ruler area and drag into the document to place a guide, which is green by default.

  3. To position the guide precisely, double-click the guide to open the Move Guide dialog box. Type 24 for the Position and click OK. Set the following guides:

    • Horizontal — One at 74 and one at 100

    • Vertical — One at 231 and one at 160

Editing a shape

You need to add a curve to the left side of the blue rectangle for the Habitat Alert site. To alter the shape of the rectangle, follow these steps:

  1. Select the blue rectangle and ungroup it (Modify ® Ungroup or Ctrl/Command+Shift+G).

  2. Select the rectangle with the Subselection tool.

  3. Click the Pen tool to select it. Place your cursor over the guide at 160 and the bottom horizontal guide at 100; then click to place another point (see Figure 15.27). Add one at the 231 intersection as well.

    Click To expand
    Figure 15.27: A point being added to the intersection of the guide at 160 and 100.

  4. Using the Subselection tool, select the lower left point, as well as the point at the 160 guide. Using the keyboard up arrow, press Shift and then press the up arrow two times. Release the Shift key and press the up arrow five more times. You moved only two points up to the guide at the position of 74, as shown in Figure 15.28.

    Click To expand
    Figure 15.28: The two lower-left points moved up 25 pixels.

    Note

    Pressing the Shift key as you press the arrow keys moves in increments of 10 pixels. The method used in the previous step moved in 1-pixel increments.

  5. You want to add a bit of a curve to the straight diagonal line. Deselect then select the Subselection tool. Press the Alt/Option key, then click and drag the control handle of the point on the 160 guide and move it toward the 231 guide. Press Alt/Option, click the lower point, and drag the control handle toward the 160 guide a tiny bit. Refer to Figure 15.29 to see where the handles are dragged out to for the proper shape.

    Click To expand
    Figure 15.29: The curve added by using the Alt/Option key and dragging the handles to form the curve shape.

    Tip

    It can be difficult to pull the correct handle, especially when you are using the Alt/Option+drag method to pull a handle from an existing corner point. Use the Pen tool instead. As you move the Pen tool over the point, the indicator changes to either the open arrowhead (if point is not selected) or to the minus sign (if the point is already selected). Click and drag a short distance to pull out control handles, following the exact direction of the line; then press the Alt/Option key while editing a handle with the Subselection tool to form the desired curved line segment.

  6. Save this in the habitat_alert_start\designfile\Fireworks folder as myha2.png.


Reshaping Paths Using Path Operations

Join, Split, Union, Intersect, Punch, and Crop are all operations that you can use to create interesting and complex paths — both closed and open. Choose Modify ® Combine Paths to access these options. To use the Combine Paths operations, you must select one or more paths.

Union

You use the Union option when you want to merge two or more paths. This operation combines selected paths into a single path, removing overlapping points. The Union operation helps you work smarter, not harder; when creating the desired graphic would require complex use of the Pen tool, use simple shapes with the Union operation instead. For example, to build a shape shown in Figure 15.30, use a rectangle and circle, combining their paths together with Union.

Figure 15.30: Two shapes joined by using the Union command.

To use the Union operation, follow these steps:

  1. Shift+select one or more object with the Pointer tool.

  2. Choose Modify ® Combine Paths ® Union.

Join

The Join operation isn't the same as connecting paths into one continuous path using the join techniques with the Pen tool. When you use Join, overlapping areas are joined into one path. Use this option when you want to add shapes to an existing option. For example, when making a puzzle piece, start out with a rectangle. Then draw an oval and distort it. Make a few shapes like this, positioning them where you want them to be. Then Shift+select all shapes, and choose Modify ® Combine Paths ® Join. One shape is formed that uses the outside outline of all the shapes.

Intersect

The Intersect operation works the opposite of the way Union works. Whereas Union throws away the overlapping area, Intersect keeps it and throws away the rest.

Crop

The results of using the Crop operation look the same as the results of using the Intersect operation. Use Crop to delete portions of a selection of objects outside of a specific region. For example, Figure 15.31 shows three circles that overlap. Using Crop, you would use the top circle as the cropping area (region) and keep only those parts of the lower two circles that fall within the region. The cropped object disappears.

Click To expand
Figure 15.31: Intersect (the image on the left) keeps only the area common to the intersection (crop is on the right).

Punch

Use Punch to build complex, compound shapes. Punch uses the top object to remove a portion of the bottom object. In the Punch process, the top object disappears.

To use the Punch operation, follow these steps:

  1. Select both objects with the Pointer tool. The punching object must be above the object to be punched.

  2. Choose Modify ® Combine Paths ® Punch.

Building the layout interface

Habitat Alert site The interface used in the project layout uses Combine Paths operations to form complex shapes. When the shapes are completed, effects are added to create depth and visual interest. To build the interface, follow these steps:

  1. Open the ha3.png file from the habitat_alert_final\designfiles\Fireworks folder (or open your copy of ha3.png if you saved one).

    Note

    This file includes shapes you can use in the Combine Paths operations. The large, green, rounded rectangle was made using Union to form a single shape.

  2. In the Layers panel, click the green rounded rectangle and copy it (Ctrl/Command+C). Click the eye icon to turn off its visibility.

  3. Click the blue shape and paste (Ctrl/Command+V). This places the copy above the blue shape. If it doesn't, drag the green shape above the blue shape in the Layers panel.

  4. Shift+select both objects and choose Modify ® Combine Paths ® Intersect. The results are shown in Figure 15.32. This operation adds a curve to the top of the blue rectangle.

    Click To expand
    Figure 15.32: A curve added to a rectangle by using the Intersect command.

  5. Make a copy of the blue shape (the Intersect command changed the name to Path) and paste it. Double-click the bottom one and rename it blueshadow. Rename the top path blueshape.

  6. Select the blueshadow and remove the texture by moving the slider to 0% in the Property inspector.

  7. In the Property inspector, click the plus sign to open the Effects menu, and choose Shadow and Glow ® Drop Shadow using these values:

    • Distance — 5

    • Opacity — 85%

    • Softness — 6

    • Angle — 323

  8. Draw another rectangle and use these values:

    • Height — 45

    • Width — 800

    • x — (minus)-35

    • y — 74

    • Fill — White

    • Stroke — None

  9. Copy and paste the blueshape. In the Layers panel, move the white rectangle below the top blueshape. Shift+select the top blue shape and the white rectangle, and choose Modify ® Combine Paths ® Punch.

    Tip

    Keep in mind that the punch object disappears in the operation. If you need to keep the shape you plan to use as a punch, make a copy.

    Figure 15.33 shows the result of the punch. The shape is named white shape to identify it. Notice that it sits above the original blue shape.

    Click To expand
    Figure 15.33: The result of punching the white rectangle. The Layers panel shows the shapes and layers you should have at this point.

  10. Select the Line tool and use a color of #003366. Press the Shift key and drag a line across the entire document. Use the Property inspector to set its y coordinate to 120. Check all the coordinates; they should be W=800, H=1, x=0, y=120.

  11. Select the white shape object and apply the effect Shadow and Glow ® Drop Shadow using these values:

    • Distance — 3

    • Opacity — 65 percent

    • Softness — 2

    • Angle — 315

  12. Copy the original circle in the Layers panel.

  13. Click the top path object and paste. You can turn off the visibility of the original circle. You need to cut off the top and right sides of the circle for the design.

  14. Draw a rectangle to cover the top of the circle down to the dark blue line you drew earlier (see Figure 15.34). In the Property inspector, enter these values and press Enter/Return:

    Click To expand
    Figure 15.34: A rectangle drawn over the top portion of the circle.

    • Width — 414

    • Height — 126

    • x — (minus) -13

    • y — (minus) -5

    Tip

    Change the fill color of the rectangle to make it easier to see what it covers.

  15. Shift+select the rectangle and the circle and choose Modify ® Combine Paths ® Punch.

  16. Draw another rectangle over the right side of the circle, up to the guide at 231. Be sure it is large enough to cover all of the circle to the right of the guide. Shift+select the rectangle and circle, and choose Modify ® Combine Paths ® Punch.

    To finish the interface:

  17. Select the blue shape and copy. Select the circle shape and choose Edit ® Paste Attributes to apply the textured fill to the circle shape.

  18. Add a new layer. Name it circlepics. Move the circle shape to the new layer.

  19. Copy and paste the circle shape. Select the bottom copy; from the Effects menu, add a Shadow and Glow ® Inner Shadow effect using these values:

    • Distance — 1

    • Opacity — 100 percent

    • Softness — 4

    • Angle — 315

    • Knockout — Checked

  20. Copy and paste the object to make the effect darker. Shift+select both inner shadow objects and group (Ctrl/Command +G). Name the newly grouped object inner shadow. The results so far are shown in Figure 15.35.

    Click To expand
    Figure 15.35: The interface shape with the curved circle added.

  21. In the habitat_alert_start\designfiles\Fireworks folder you created on your hard drive, save your file as myha4.png.


Summary

In this chapter, you learned how to use vector drawing tools. You also designed unique shapes using Combine Paths operations. Using these new skills, you completed the interface for the Habitat Alert page layout.


Project Summary

Habitat Alert site You built the base interface for the Habitat Alert site.

Files Prepared for Habitat Alert Web Site
Images | What Was done | Where to Now
Ha4.png | You made the shapes for the sites layout design. | The layout is now ready for the rest of the site images to be added to it.


Chapter 16: Designing Spectacular Text Effects

Download CD Content

Overview

Macromedia Fireworks MX 2004 makes it possible to design spectacular text graphics. You can control the fill and stroke of the path, apply Live Effects, and even make the text follow a specified path. You can even use your text object as a mask to build text from bitmap images!

In this chapter, you explore the text tools and use the Property inspector to control the appearance of the text.


Working with the Text Tools

Macromedia Fireworks MX 2004 enables you to work with text. Text is handled on the Canvas, and the text properties, which include many options, are applied via the Property inspector.

Use the Property inspector to set the font, size, color, leading (space between lines), kerning (space between letters), and alignment of your text. You may also choose text orientation and paragraph options, such as paragraph spacing and indentation (see Figure 16.1).

Click To expand
Figure 16.1: The Property inspector contains tools for controlling text and paragraph properties.

The Text menu contains many of the options available from the Property inspector. It also provides access to the Text Editor, if you prefer to use it. You must first create a text box to access the Text Editor, as you'll see shortly.

The Text menu also contains a few special text-handling techniques, including tools to attach and control text along a path. Fireworks includes a spell checker in the Text menu.

Adding text to a document

To add text to your document, select the Text tool and click the Canvas. By default, the text box expands to fit the text you type. Click and drag if you want to designate a specific-size text box that constrains the width of the text block, and then type to add the desired text. You may select your font, font size, and other values prior to typing or wait until after you add the text. To set text properties after you've added text, select the text using the Pointer tool and adjust the settings in the Property inspector. Use the Pointer tool to move and position your text. To edit an existing text block, double-click with the Pointer tool inside the text block. The Pointer tool changes to the Text tool, inserted into the text block at the point you clicked.

Controlling text spacing

After you select the Text tool or some text, you'll see the various options available in the Property inspector. Some are common options such as alignment and paragraph indents that you've probably used before, but there are also several space-controlling options, presented in the following sections, with which you may not be familiar.

Kerning

Kerning determines how close one letter is to another. Kerning enables you to add more or less space between two characters. Place your cursor between the characters you want to adjust and move the slider to set your spacing. You can go from 1 to 100 or -1 to -99.

Range Kerning

Range kerning (also known as tracking) sets the amount of space between each letter of a group. To use Range Kerning, select the letters or text that you want to change. Entering a new value affects all the text selected.

Leading

Leading is used when you have multiple lines of text and want to control the space between the lines. The percentage of leading you choose is based on a percentage of the text size. If you choose 100%, you get a single-spaced line. Choosing 200% creates a double-spaced line.

Baseline Shift

Bottoms of most text are normally aligned. But what happens when you want to add a trademark symbol, subscript, superscript, or footnote? You can place letters above or below the default baseline. A negative value places the word or letter below, and a positive value places it above.

Horizontal Scale

If you want to distort the text and expand it horizontally, use the Horizontal Scale option. This option stretches or shrinks the selected text. Move the slider up or down to adjust the scale. The default is 100%.

Enhancing text

Text in Fireworks is flexible. By default, text contains a solid fill and no stroke, but you can add a stroke just like you can to other vector objects. Select the text and choose the stroke size, type, color, and texture. Strokes are outlines, and textures are added to fills. You can also alter the stroke orientation. To access the stroke orientation, click in the Color box for stroke in either the Tools panel or the Property inspector. Click the arrow next to Center in Path to access the other options, shown in Figure 16.2.You have the choice of putting the stroke outside the path, inside the path, or centered on the path. There is also a Fill over Stroke option that draws the fill over the stroke.

Click To expand
Figure 16.2: The stroke orientation options.

You can scale, skew, and distort text by selecting the text and then using one of the Transform tools. The text remains editable even after transforming it. You can highlight one letter to make it larger or change its color, baseline, or stroke to produce some interesting effects. Figure 16.3 shows text using the techniques discussed in this section.

Figure 16.3: From top to bottom, text with a stroke applied, kerned and scaled text, rotated text, and distorted text.

Using text as a placeholder

Many times a designer will design a layout in Fireworks to present as a mockup to the client. To simulate how the text will look on a Web site, you can use a text block for the mockup that shows a sample of what will be seen in a browser. It's a good idea to use the same font that you'll use in Dreamweaver, such as Verdana or Helvetica. Set the edge of the text to Alias because that's the way HTML text is formatted. You'll want to simulate the real look as much as possible. If you use anti-alias text, or text that has been stylized or otherwise manipulated, the clients will be disappointed when they see the HTML text because it won't look like the mockup.

Converting text to a path

Text in Fireworks is editable at all times, whether it is grouped or transformed, or has applied effects. Editable text is powerful, but at times you'll need to convert editable vector text objects to vector paths. You want to convert text to a path for two reasons:

  • You are giving a file to someone and they may not have the fonts used in the file.

  • You want to edit the appearance of the text in a way that requires manipulation of one or more letterforms.

Text may be scaled, skewed, distorted, or rotated using the Transform tools, but you cannot make any changes to the individual letters themselves. To modify a letter in the font, you must first convert the text to paths using Text ® Convert to Paths. Words converted to paths are grouped to make it easier to keep the letters together. To access individual letterforms, select the text and choose Modify ® Ungroup (see Figure 16.4). To edit a letterform, select a letter with the Subselection tool.

Figure 16.4: Converting normal text to paths enables you to modify the text outlines. Here, the letter X is selected with the Subselection tool to reveal its points and line segments.

Using text as a punch

Use Modify ® Combine Paths ® Union to convert several text letterforms to a single path. This saves time and effort when you want to cut text from another image or object.

Cross - Reference

To learn more about a punch, see Chapter 17. When the text paths are converted to a single path, it may be used like a cookie cutter to punch out of another shape. To use text as a cookie cutter, follow these steps:

  1. Open a new document 500x300 with a white background.

  2. Draw a rectangle to fill the Canvas. Add a fill using a color different from that of the Canvas.

  3. Type some text to use as a cookie cutter. A thick font such as Arial Black works best.

  4. Select the text and choose Text ® Convert to Paths. Each letter now is a path. Select the grouped letters with the Pointer tool and choose Modify ® Ungroup.

  5. Shift+select each letter with the Subselection tool and choose Modify ® Ungroup. To form a single path from all the letters, choose Modify ® Combine Paths ® Join.

  6. Shift+select the text and the rectangle with the Pointer tool, and choose Modify ® Combine Paths ® Punch.

  7. The punched object is a compound path. You may add effects or manipulate the points of the object, if desired.


Setting Type on a Path

Fireworks contains options to place text on an open or closed path. To place text on any path, select the text and the path. Choose Text ® Attach to Path. The alignment properties of the text will affect where the text attaches to the path, relative to the path's points.

  • When the text is left-aligned, attaching to a closed path places the text to the right of the leftmost point. Attaching to an open path places the text after the first point.

  • When the text is right-aligned, attaching to a closed path places the text to the right of the leftmost point. Attaching to an open path places the text before the last point.

  • When the text is center-aligned, attaching to a closed path distributes the text over the rightmost point. Attaching to an open path distributes the text over the centermost point.

  • When text is stretched or justified, the leftmost point is the starting point.

In the following exercise, you place text along the top and bottom of a circle in two independent operations. To do this, the circular path must be cut in half to form two arcs and the direction of the bottom type will be reversed.

  1. Open the shelllogo.png file from the chapter16exercise folder on the CD-ROM.

  2. Select the Ellipse tool and draw an ellipse around the image. Use a fill of None and a 1-pixel black stroke. Position the ellipse around the image.

  3. Create a text object by typing the word Shell. This exercise uses the following settings; however, you may use any font you prefer:

    • Center-aligned

    • Font: Tarzan

    • Point Size: 62

    • Color: Black

    • Edge: Smooth Anti-Alias

  4. Add another text object by typing the word Seekers, and move the text to the bottom of the circle. The position really doesn't matter yet (see Figure 16.5).

    Click To expand
    Figure 16.5: An ellipse around the image and the text in place for the logo.

  5. Using the Pointer tool, select the ellipse and then use the Knife tool to cut a straight line, holding the Shift key as you slice horizontally. In Figure 16.6 the arc is moved down a bit so you can see the cut, but it will be moved back into position.

    Click To expand
    Figure 16.6: Paths prepared for the text.

    Note

    To move one of the paths, Shift+click (with the Pointer tool) on the path that will remain in place to deselect it, leaving only one path selected. Use the arrow keys to nudge the path, or move it using the Pointer tool.

  6. Shift+select the top text and ellipse, and choose Text ® Attach to Path.

  7. You may edit text attached to a path, just as you can edit any text object. Select the text and change its leading to 20 (see Figure 16.7).

    Click To expand
    Figure 16.7: The top text attached to a path.

  8. Repeat Step 7 for the bottom text (see Figure 16.8).

    Figure 16.8: The text is upside down on the bottom half.

  9. The bottom object's text is upside down. Choose Text ® Reverse Direction (see Figure 16.9). Now the text runs above the path of the arc, creating a crowded look.

    Click To expand
    Figure 16.9: The text is too high on the arc.

    Note

    Knowing that the text is going to be placed upside down, you could select the bottom path and flip it to reverse the direction of the path before attaching the text. To flip, first select the path; then choose Modify ® Transform ® Flip Vertical.

  10. Use Baseline to adjust the text on the path. To get access to the Baseline option, the text must first be selected with the Text tool. Set the baseline to -30 and modify the leading to 20 in the Property inspector (see Figure 16.10).

    Click To expand
    Figure 16.10: The bottom text is altered and in position.


Filling Text with an Image

This effect is useful and isn't difficult to do. The text itself won't remain editable, but any of the effects applied to it will be. To fill text with an image, follow these steps:

  1. Open an image file. Use flower.tif from the chapter16_exercise folder if you don't have an existing image file.

  2. Type a word using all caps. Use a solid or thick font.

  3. Move the text over the part of the image you want to show inside the text.

  4. Select the image and cut (Ctrl/Command+X).

  5. Select the text object and choose Edit ® Paste Inside, or use the shortcut Ctrl/Command+Shift+V.

    Pasting an image inside text is the same as using an image as a mask. A mask is one or more objects that are grouped in a special way.

    Cross - Reference

    This technique works for any vector object, not just text. See Chapter 17 for more information about masking.

Figure 16.11 shows the flower image inside the text. All masked images display a "cloverleaf" set of four dots in the center of their group. Grab the cloverleaf to position the image within the text.

Click To expand
Figure 16.11: The image is inside the text and can be repositioned by moving the cloverleaf symbol.


Adding Special Symbols

To add special symbols to your text such as a copyright, trademark, or an em dash, you must use key combinations for the computer platform you are using. On a PC you type the key code into the numeric keypad of your keyboard.

Table 16-1 shows the key combinations for commonly used characters.

Table 16-1: Character Key Combinations
Character | Windows | Macintosh
Copyright | Alt+0169 | Option+G
Em dash | Alt+0151 | Shift+Option+Dash
Trademark | Alt+0153 | Option+2
Degrees | Alt+0176 | Option+0
Cent | Alt+0162 | Option+4
Pound (currency) | Alt+0163 | Option+3
Euro | Alt+0128 | Shift+Option+2
Registered mark | Alt+0174 | Option+R
Greater than |  | Option+. (Period)
Less than |  | Option+, (Comma)
Divided by |  | Option+/


Altering Paths

Here are two techniques you can use to achieve effects that you can get only with bitmap objects in other image editing programs. You'll see some great effects you can achieve by converting text to paths, expanding those paths, and then joining them. You'll use a combi-nation of techniques yielding various results. If you were to make this text in other graphic editors, most of the effects would not be editable. Using these techniques, you'll be able to edit everything except change the text letters.

This exercise shows you how to use the Alter Paths functions:

  1. Open a new document that is 450 pixels wide by 150 pixels tall. Set the Canvas color to blue.

  2. Add some large-sized text and style it. This example uses size 88-point Futura Book, filled with a linear Spectrum gradient.

  3. Make a clone of the text object (Edit ® Clone). Figure 16.12 shows the text and the Layers panel with the two text objects.

    Click To expand
    Figure 16.12: The text has a linear gradient fill. The bottom text object has its visibility turned off, which is evidenced by no eye icon.

  4. Select the top text from the Layers panel and choose Text ® Convert to Paths.

  5. Choose Modify ® Ungroup; then choose Modify ® Combine Paths ® Join. Now choose Modify ® Alter Path ® Expand Stroke. Enter 3 for the Width and click OK.

  6. Add a drop shadow using the default settings. Figure 16.13 shows the result.

    Click To expand
    Figure 16.13: The Expand operation applied to the text.

  7. Click the eye icon in the Layers panel to hide this text (top), and click the eye area again to turn on the second copy (bottom). You are hiding this only so you can continue on and see another option.

  8. Select the text, make a copy, and paste. Select the bottom text and change the fill to black.

  9. Now with the black text selected, choose Text ® Convert to Paths; then choose Modify ® Ungroup, and choose Modify ® Combine Paths ® Join.

    Cross - Reference

    See Chapter 17 for a better understanding of Combine operations, if needed.

  10. Choose Modify ® Alter Paths ® Inset Path. The Inset Path dialog box opens. Click Outside for the direction and enter 3 for the width. Click OK.

  11. Be sure the black text is below the other text object. Add a drop shadow to the black text object (see Figure 16.14).

    Click To expand
    Figure 16.14: The text size is increased using the Inset Path command.

You expanded the size of the text by a pixel amount, without increasing the spaces around the letterforms. Scaling or adjusting the text size also increases the amount of space between the letterforms. This technique is a great way to add custom bevels and effects to your text or objects. A copy of this exercise is in your Chapter 16 images folder. Try turning off the visibility of the Inset Path text and turn on the Expand Path text to see yet another effect.

Start Sidebar

Power Text Mask by Japi Honoo

I have spent a lot of time developing a process of making a futuristic skin to apply to a shape. It's done totally as a vector and remains editable. You'll be able to change the object's properties, such as color, texture, and effects.

There is a bit of masking being done in this tutorial. If you need to know more about masking, refer to Chapter 17.

To learn how to do some amazing things in Fireworks, follow these steps:

  1. Open a new document (File ® New) and use a width of 560 and a height of 200 with a white Canvas color.

  2. Select the Text tool and use an appropriate font and size. I used the following values:

    • Font — Garamond Bold

    • Size — 230 (The text size slider only goes to 99, but you can type in a number and press the Enter/Return key.)

    • Color — #36524F

  3. Type the word bible in lowercase letters.

  4. With the text selected, choose Text ® Convert to Paths.

  5. In the Property inspector access the Effects menu and choose Bevel and Emboss ® Inner Bevel and use these values:

    • Bevel Edge Shape — Smooth

    • Width — 35

    • Opacity — 100%

    • Softness — 10

    • Angle — 135

    • Button Preset — Raised

  6. From the Effects menu (Property inspector) choose Adjust Color ® Curves and enter 43 for input and 25 for the output. Notice the point added to the curve. Click OK.

    Click To expand
    The Curve dialog box with the input and output settings adjusted.

    It's important to use the Effects menu and not the Filters menu. Curves used from the Filter menu convert your vector object into a bitmap.

  7. Access the Effects menu and choose Adjust Color ® Brightness/Contrast. Type 9 for Brightness and 29 for Contrast.

  8. Add the Brightness and Contrast effect one more time using the same values.

    Click To expand
    The text converted to paths, an inner bevel effect, and the brightness and contrast effect added twice.

  9. Access the Layer Options menu and click Duplicate Layer. Enter 2 for the Number, and click the After Current Layer option to select it. Click OK to close the dialog box.

  10. Rename the layers, name the top layer Text1, the next Text2, and the bottom one Text3.

  11. Select the Text3 layer and ungroup the object (Ctrl/Command+Shift+G). Notice how the effects are removed after you ungroup the object.

  12. Chose Modify ® Alter Path ® Inset Path. In the Inset Path dialog box, enter these values:

    • Direction — Inside

    • Width — 2

    • Corners — the icon on the right

    • Miter Limit — 10

    • Click OK.

  13. While the object is still selected, group it (Ctrl/Command+G).

  14. Repeat steps 5 to 8 to add the bevel, curve, and brightness effects back to this copy of the text.

Adding the gold skin

To add gold skin to the text, follow these steps:

  1. Click the eye icon in the Layers panel next to the Text3 and the Text1 layers to hide them.

  2. Click the Text2 layer to select the object.

  3. Click a Fill Color box and change the color to #9F8146.

  4. To add guides to the document, be sure your rulers are visible, then drag out four horizontal guides. Double-click each guide and set these locations:

    • 35

    • 98

    • 134

    • 161

  5. Draw two rectangles between the top two guides and the bottom two guides as shown here. Fill both rectangles with white.

    Click To expand
    Two rectangles drawn over the text and filled with white for use as a mask.

  6. Shift+select the rectangles and copy (Ctrl/Command+C) and paste into the Text1 layer.

  7. Back in the Text2 layer, group the two rectangles and then Shift+select the text object.

  8. Choose Modify ® Mask ® Group as Mask.

    The rectangles are above the text object prior to applying the mask.

  9. Add a drop shadow by accessing the Effects menu and choosing Shadow and Glow ® Drop Shadow using these values:

    • Distance — 2

    • Opacity — 80%

    • Softness — 3

    • Angle — 300

  10. Turn the visibility back on for the Text3 shapes.

    Click To expand
    The text object with the gold skin applied using a mask.

Applying the gray skin

To add the gray skin over the text, follow these steps:

  1. Hide the visibility of Text2 and Text3 layers.

  2. Select the grouped text object in the Text1 layer, and change the color fill to #000000 (black).

  3. In the Property inspector, select a texture of Metal; move the percentage slide to 50%.

  4. You don't need the two brightness and contrast effects for this layer. In the Effects list, you can select the effect name and then click the minus sign to delete it, or, preferably, you can click the check mark, and an x that disables the effect appears. That way, it's still there if you decide to use it.

    Click To expand
    The Property inspector showing the metal texture added and two effects disabled.

  5. Select the top rectangle. In the Property inspector, make the rectangle 4 pixels shorter (about 59 pixels high). Press the down arrow key twice.

  6. Select the bottom rectangle. In the Property inspector, make the rectangle 4 pixels shorter (about 23 pixels high). Press the down arrow key twice.

  7. Group the two rectangles.

  8. Shift+select the rectangles that are on top of the text and the text. Choose Modify ® Mask ® Group as Mask.

  9. Make all the layers visible and you have some pretty snazzy text.

  10. Select the Text3 layer and add a drop shadow using a color of #333333 and the default settings.

  11. If you want a background, draw a rectangle over the document in Text3 layer and drag it below the text. Fill with a pattern. A used a marble image. This file is saved as bible.png in the Chapter 16 images folder.

    Click To expand
    The futuristic text on a background.

End Sidebar


Summary

In this chapter, you learned to use the Text tool, setting text values using the Property inspector. You also learned how and why to convert text to paths. Adding to your skills with text, you experimented with text on a path and saw how to add special symbols to your Fireworks documents. You also learned how to paste an image inside paths created with text. Finally, you explored altering paths using a converted text object.


Chapter 17: Working with Bitmap Images

Download CD Content

Overview

Photographs are composed of pixels, the smallest component parts of a bitmapped image (also known as a raster image in some programs). Pixels are little squares of color resembling a mosaic composition. Editing pixels involves adding, removing, or coloring individual pixels. Fireworks MX devotes a whole section of tools just for working with bitmap images.

Pixels distinguish a bitmapped image from a vector image Vector images consists of paths, which can be defined as a line with at least two points. Vector objects (called objects in Fireworks) are fully scalable because they are made up of a series of lines. Pixel images lose detail as they are scaled up because each image contains a set number of pixels. When you scale a bitmapped image up, Fireworks has to guess which pixels need to be resampled to "fake" the detail in the increased space. This stretching of pixels results in what is known as a "pixilated image." You can identify pixilated images by the obvious squares that can be seen or by the blurring of detail. The bigger the image is stretched, the worse it will look.

Figure 17.1 shows the new Tools panel. A thin line just below the bitmap tools divides the section with the Eyedropper and Paint Bucket/Gradient tools. You can use these two tools with both bitmap and vector objects.

Click To expand
Figure 17.1: The Tools panel showing the placement of the Bitmap tools. The Rubber Stamp is selected, showing the other tools contained in that category.


Opening Bitmap Images

The bitmap images you use will probably come from your scanner, digital camera, or other applications. If you already have images that you want to open, you can open them directly using the File ® Open command or you can import them into an open document by choosing File ® Import. When you import an image, you'll see an icon that looks like a corner. You can simply click your Canvas to place the image, or you can click and drag to conform the imported image to a specific size.

You can scan directly into Fireworks or open images from a digital camera directly in Fireworks by following these steps:

  1. Connect the digital camera or scanner to your computer.

  2. Install the software drivers that come with your camera or scanner.

    Note

    The scanner and camera need to be TWAIN-compliant for Windows or need to support Photoshop Acquire plug-ins for Macintosh. Fireworks looks for the Photoshop Acquire plug-in in the Fireworks plug-ins folder for the Macintosh. You do not need to own Photoshop to use the Photoshop Acquire plug-in.

  3. The first time you use the camera or the scanner you'll need to choose File ® Scan ® Twain Select and choose your scanner.

  4. Now choose File ® Scan ® Twain Acquire to open your scanner application.

To create your own bitmap image, you can select and draw with the Brush tool or the Pencil tool in the Bitmap section of the Tools panel. You can also add bitmap drawings to a vector object.

Send to Email

New Feature

Send to Email is a new option for Fireworks MX 2004. If you want to e-mail an image, choose File ® Send to Email; then select one of the following options:

  • Fireworks PNG — Your open document will be attached to a new e-mail message and your e-mail client will open.

  • JPG Compressed — Your open document will be attached after it is compressed to JPEG. This option uses the Better Quality optimization.

  • Use Export Settings — The open document will attach in the format and optimization settings you have defined in the Optimize panel. This option offers the best control of file size and picture quality.


Using the Selection Tools

The selection tools are the real power behind working with bitmap images. Selections enable you to edit particular areas of an image. The selection tools include the Marquee, Oval, Lasso, Polygon, and the Magic Wand tools. These tools are available only when you are editing bitmap images. Selections are made to isolate problem areas or to select a specific portion of an image. If you are editing, only what is contained inside of the selection is affected. A selection also enables you to copy or cut only what is contained in a selection. You can apply effects and filters to specific selections. By defining a selection, you protect the rest of the image from change.

Note

If you've made a complex selection or any selection that you may want to use again in your image, you can save it (as you'll see later in this section). You can also make a selection in one layer and then copy and paste the selection into another layer.


Using Marquee Tools to Make Selections

The Marquee tools are used to make a specific selection in an image. Selections are useful for copying specific areas, but more importantly, you can use them to make alterations to an image. Making a selection constrains any changes to the selection area only. To make a selection, follow these steps:

  1. Open any bitmap image (a JPEG, GIF, or TIFF, for instance).

  2. Select the Marquee tool. (Click the little arrow to access the Oval Marquee, if you like.)

  3. Choose the properties you want in the Property inspector. For practice, change the Edge to Feather and enter 10 for the Amount of Feather. Leave the Style as Normal (see Figure 17.2).

    Click To expand
    Figure 17.2: The Property inspector showing the Marquee properties.

    Caution

    You must set the properties prior to drawing the selection. After it's drawn you can't change any of the properties except for Feather, which can be done using the Select ® Feather.

  4. Click and drag to make your selection.

  5. Select the Paint Bucket tool and fill the selection.

  6. Press Ctrl/Command+D to turn off the selection.

    Caution

    The Marquee tool properties you set remain unchanged the next time you use the tools, so be sure you change them prior to drawing your selection.

Adding to and subtracting from a selection

You can make more than one selection in your document, or you can add to the current selection. To add on to the selection, put your cursor just inside the selected area, press the Shift key, and drag with one of the selection tools to enclose the new area, ending inside the current selection. To add a totally new selection in a different area, simply press the Shift key and make the selection. You can use the Marquee tools or the Lasso tools to define the area or areas you want to add to the selection.

Subtracting from a selection is just as easy as adding to a selection. The difference is you press the Alt/Option key as your drag to define the area you want to subtract.

Moving selections

You can move a marquee by using one of these methods:

  • Press the arrow keys of your keyboard to nudge the selection 1 pixel at a time, or press the Shift key and nudge it 10 pixels at a time.

  • With the Marquee tool selected, you can place your cursor in the selection and click and drag to a new location.

    Caution

    When moving a marquee selection, be sure that a selection tool is selected. If you try to move a selection with the Pointer tool selected, you will move the selected portion of the image (i.e., cut). Also, make sure you click and hold as you move the selection. A simple click will deselect.

Saving and restoring selections

Some selections are complex, and you may want to save them. When working with some special effects, you may want to call up your selection again. To save and restore a selection, follow these steps:

  1. Choose Select ® Save Bitmap Selection.

  2. To restore the selection, choose Select ® Restore Bitmap Selection.

    Note

    It's easy to save and restore a selection, but there is a caveat. You can save only one selection per document. If you save a second one, it overwrites the first one.

Floating selections

So far you've seen how to make selections and move the selection itself. To build composite images many times, you need the ability to alter a part of an image and copy it, move it, and so on. To move the selection and its contents, follow these steps:

  1. Make a selection.

  2. Select the Pointer tool (or press Ctrl/Option) and drag to a new location. This moves the selection and its contents and also removes the selected pixels from the original image.

  3. To leave the pixels in place and move a copy only, you need to copy and paste and then use the Pointer tool (or any Marquee tool) to move the selection.

Using the Magic Wand

The Magic Wand tool works differently than all the other selection tools. The Magic Wand tool makes selections based on color. You determine the range of color in the selection by setting the tolerance. To set the tolerance of the Magic Wand tool, select the Magic Wand, then adjust the tolerance value in the Property inspector. The higher the value, the more colors will be added to the selection. The Magic Wand works well for large areas of similar color.

Polygon

You use the Polygon Lasso tool by placing points around a selection area. Each time you click, the points are connected. Place points very close together in curved areas. After you define your selection area, double-click to close at the starting point.


Selection Commands

You have several options for altering the edges of your selection. From the Select menu, you can choose to feather, contract, expand, smooth the edges, or add a border. In each case, you enter the value in pixels that you want to affect in the dialog box that opens with each selection.

An option you may use frequently is Select Inverse. For example, if you have a colorful background you want to eliminate, but the object to remain has a lot of similar colors, it may be easier to select the object (see Figure 17.3) and then choose Select ® Inverse. This selects the area around the original selection.

Click To expand
Figure 17.3: The focal point is selected.

You can then delete the background area or blur it out of focus (see Figure 17.4).

Click To expand
Figure 17.4: The selection is inversed, and a Gaussian blur is added only to the background.


Blur Tool Group

In the bitmap portion of the Tools panel, you'll see what looks like a water drop. This group of tools includes Blur, Sharpen, Dodge, Smudge, and Burn. These tools work well for smaller areas that need repair or a quick, focused touch-up.

Blur

After you select the Blur tool, you have a good bit of control in the Property inspector. You can adjust the softness of the edge, choose the size and shape (round or square), and determine the intensity or the amount of blurring that is applied. The Blur tool is great for smaller areas that you need to blend into a composite image, to help blend pattern changes, or even to blur out sensitive parts of an image.

Note

For large areas needing to be blurred, such as a background, the Gaussian Blur filter found in the Filters or Effects menu does a more efficient job than the Blur tool does.

Sharpen

The Sharpen tool helps bring detail out in an image. It can't make a truly bad photo clear, however. It can reduce blurring if you blurred a bit too much, or it can add detail back to the edges of a blurred area. It's great for bringing focus back to things like eyes, hair, and other details of an image. Once you select the Selection tool, you have the same properties available as the Blur tool. Practice with the Intensity setting to get a feel for what setting you need. You'll know you sharpened too much when you begin to see odd colors showing through.

Dodge

The Dodge tool is new to Fireworks MX. If you use the Dodge tool carefully, you can gently lighten or desaturate an area. Figure 17.5 shows the properties available for the Dodge tool. Notice the Range pop-up menu. You can adjust the Shadows, Midtones, or the Highlights settings. Try each to see its effect.

Click To expand
Figure 17.5: The properties available for the Dodge tool after the tool is selected.

Burn

The Burn tool works the opposite of Dodge — that is, it adds darkness. The Burn tool has the same properties as the Dodge tool.

Smudge

The Smudge tool smears paint and can be useful for those coming to Fireworks from a traditional paint background. You can make your strokes more organic looking. Following are the properties for the Smudge tool:

  • Size, Shape, and Edge are the same as they are for the Blur tool.

  • The Pressure setting determines the intensity of smudging.


The Rubber Stamp Tool Group

There are two other icons in the same category as the rubber stamp — the Replace Color tool and the Red Eye Removal tool. They all are used to alter the pixels in a photograph. Each of these tools behaves similarly to a paintbrush.

Using the Rubber Stamp

If you do a lot of image repair, you'll use this tool often. The Rubber Stamp tool copies one area of an image onto another area. It's frequently used to remove unwanted portions of an image (such as an old boyfriend/girlfriend or utility wires), to remove scratches and blemishes, and so much more. Anywhere you need to make a touch-up, the Rubber Stamp can probably do the job. It does take some practice to get the hang of it so that you don't produce noticeable patterns. You'll find that textured areas are the toughest to repair because of distinct patterns.

Nevertheless, the Rubber Stamp tool is indispensable for those of you who work often with bitmap images. To get a feel for how the Rubber Stamp works, do the following:

  1. Open any bitmap image.

  2. Select the Rubber Stamp tool from the Tools panel.

    Note

    If the Rubber Stamp isn't visible, click the arrow next to either the Color Replacer icon or the Red Eye Removal icon. The last one used will be visible.

  3. When you determine the size of the stamp, keep in mind that it is the sampling area as well as the area you are repairing. If the size is too large, you may copy more than you want.

  4. Also adjust the edge softness. The higher the setting, the softer the edge.

  5. If you want to sample pixels from the composite image — in other words, objects that overlap each other and/or on different layers — select the Use Entire Document option.

  6. Now that you finished the settings for the sampling area, you need to set the sampling point. To do this, press the Alt (Option) key and click in the area you want to sample.

  7. Before you begin to stamp, you need to choose either Source Aligned or Fixed. Set the Opacity slider to control the amount of paint you are copying. This is especially important when you are working on textures or patterned areas. You'll get a better blend of textures if you paint in a building process.

    Note

    The Aligned option means that the sampling spot is aligned with the Rubber Stamp tool and will move horizontally and vertically. No matter where you move your cursor, the sampling point stays in the same alignment with the cursor. If you uncheck Source Aligned, the sampling point is taken from one spot as you click. You can click anywhere and copy from the same spot. But if you drag, the sample source moves horizontally or vertically in relation to the sample point.

  8. Click the area you want to cover with the sampling area. You can also click and drag, but be careful of making a distinct pattern. For this reason, you should click frequently when making repairs to a smaller problem area.

Using the Red Eye Removal tool

New Feature

If your subject has red eyes — whether it is a human or a pet — the Red Eye Removal tool can help you out. It works by replacing the red with grays and blacks. How much red is removed depends on the settings you use.

To remove red eye, follow these steps:

  1. In the Tools panel select Red Eye Removal tool (in the Rubber Stamp group).

  2. Select the size and shape brush you want to use. This tool acts similar to a paintbrush except it removes red.

  3. Set the Tolerance: 0 replaces only red and 255 replaces all hues containing red. You may need to practice with this setting until you get a feel for the results.

  4. Set the Strength. The amount of strength determines how dark the grays will be that replaces the red colors.

  5. Once your settings are made, drag to cover the red area in your photograph.

Using the Replace Color tool

New Feature

The Replace Color tool is simple to use. You can easily change one color to another by following these steps:

  1. Open an image with which you want to practice.

  2. Select the Color Replace tool from the Tools panel (in the Rubberstamp group fly-out menu).

  3. In the Property inspector click the Change Color box. (To Color box, Fill Color box, Canvas Color box). Pass your cursor over the color you want to change.

  4. Click in the To Color box and select the color you want to use to replace the first selection.

  5. Set the Shape and Size of the brush.

  6. Set the Tolerance for the range of colors you want to replace: 0 changes only the specific color you select, and 255 selects all colors that are similar to the selected color. Type any number in the range from 0 to 255.

  7. Set the desired Strength for the Change color.

  8. Select Colorize if you want to replace the Change color with the To color you selected. If you leave it deselected, the Change color will be tinted with the To color, not the true color you selected.

  9. Click and drag your cursor over the area you want to color. This is pretty powerful. It's like coloring in the lines. Your brush will only affect the color selected.


Masking Images

How to fade one image into another is one of the most asked questions in the Macromedia Fireworks forum, and it's one of the easiest things to do. If you make collages, montages, or image compositions, you'll use the masking features of Fireworks frequently. A mask masks off portions of an image, thereby determining which areas are opaque and which areas are transparent. Masks are used to blend one image into another or to isolate an area to be removed from an image.

Note

Bitmap masks in Fireworks are similar to layer masks in Photoshop. And Photoshop layer clipping paths are similar to Fireworks vector masks.

In Fireworks, a mask object is what you use to apply transparency. The mask object resides above the image to be masked; a mask isn't applied directly to the image. A mask object contains a fill, which affects the pixels of the image or object that is being masked. The fill color or texture determines how much of an image shows through the mask. In the areas of a mask that are white, the underlying area is totally visible. In solid black areas, the image is totally invisible. The varying degrees of gray determine the amount of transparency.

Fading an image into a background

To fade an image into a background texture, follow these steps:

  1. Open a new 800x400 Canvas.

  2. Draw a rectangle to cover the Canvas and fill with #BACBF9. Add a texture of Line-Horiz3 at 30%.

  3. Navigate to the chapter19_exercise folder and import (File ® Import) the Black_Caped_Poster_Boy1.jpg image.

  4. Place the cursor in the top left corner, and drag to fill the rectangle by about two-thirds its size

  5. To blend the image into the background, draw a rectangle to cover only the image.

  6. Choose a Fill category of Gradient ® Linear (in the Property inspector). Move the Texture slider to 0.

  7. Click the Fill Color box for the gradient options. From the Preset list choose White, Black.

  8. In the Layers panel press Shift while you select the rectangle and the image.

  9. Choose Modify ® Mask ® Group as Mask. Notice how the white areas of the rectangle are opaque and the black area is transparent. This image is a bit too transparent, so you'll want to edit it.

  10. In the Layers panel click the little pen icon of the mask to make the gradient handles visible (or use the Pointer tool to select).

  11. Drag the circle handle to the right, and drag the square handle near the edge of the picture (see Figure 17.6). If you drag the square handle out too far, it shows the edge of the image. You can close the document or save it.

    Click To expand
    Figure 17.6: The gradient handles adjusted, making a nice fade into the background texture.

    Note

    You can use any kind of gradient you want for this type of mask. You can rotate the gradient as well. You can even use another image as the mask object. This technique is flexible and has a lot of possibilities.

Superfast mask shortcut

Now that you know the basics of applying your own mask, you are ready for a shortcut. Fireworks MX 2004 contains a command called Fade Image that offers a variety of instant masks. To make a quick mask, follow these steps:

  1. Open (not import) the Black_Caped_Poster_Boy1.jpg image from the chapter19_exercise folder.

  2. Deselect the image, and in the Property inspector, click the Canvas Color box. Sample the blue color from the image background to make the Canvas blue.

  3. Select the image.

  4. Choose Commands ® Creative ® Fade Image. Figure 17.7 shows the dialog box that opens. Notice the different fade options available.

    Click To expand
    Figure 17.7: The various fade options available in the Fade Image dialog box.

  5. To compare this to the technique you used previously, choose the second one from the left in the top row. This option fades to the right.

  6. Now you can adjust the gradient handles to get the fade you want. Figure 17.8 shows that you achieved the same effect as doing it yourself by drawing and filling the rectangle and applying the mask.

    Click To expand
    Figure 17.8: The left-to-right fade image option from the Fade Image command applied to the image.

Cutting an image out of a background (vector mask)

Another common use of a mask is to cut an image out of its background. Fireworks provides two ways to do this — a bitmap mask or a vector mask. Using a vector mask offers the most flexibility. Because the mask is a vector object, it has points, which you can manipulate into a perfect fit. Plus, if you make a mistake, you don't loose all of your selection as you would with a Selection tool. Follow these steps to make a vector mask to cut an image from its background:

  1. Open the Black_Caped_Poster_Boy1.jpg image again from the chapter19_exercise folder.

    Tip

    If you still have your image open from the previous exercise, you can choose File ® Revert and continue with step 2.

  2. Select the Pen tool and set the fill to None for now. To see your path, set the stroke to 1-pixel soft and give is a red color.

  3. With the Pen tool, click around the bird and cut through the chest above the branch (see Figure 17.9). Click and drag to form the curves, and adjust the Bézier handles as needed.

    Click To expand
    Figure 17.9: The bird image with a path around the area to remain.

    Cross - Reference

    See Chapter 15 for more details on using the Pen tool and Bézier curves.

  4. Change the stroke to None and the fill to white. Set the fill edge to Feather and give it a value of 3 pixels.

  5. Press Shift while you select the vector path and the image.

  6. Choose Modify ® Mask ® Group as Mask (see Figure 17.10).

    Click To expand
    Figure 17.10: The vector mask applied to the bird with the background removed.

  7. You can still edit this mask to make adjustments. In my sample the bottom line is rough and uneven. To edit the mask, click the little pen icon in the mask in the Layers panel. You'll notice yellow points.

  8. Select the Subselection tool and move the points to where you want.

  9. Save now if you'd like to keep this image; otherwise, leave it open for the next exercise.

Using Paste Inside (vector mask)

You can also use any vector shape and paste an image into it. Because this is the technique used for the Habitat Alert site, you'll learn how to do it here. You can practice using the site files. The bird you've been practicing on is the bird for the home page. But this time you'll access the image from the root folder.

Note

If you haven't copied the habitatalert folder from the chapters folder on the CD-ROM onto your hard drive, do that now.

Habitat Alert site To get the bird image into the circle shape of our home page, follow these steps:

  1. You'll need to open the ha4.png file. You can get a copy from the habitat_alert_final\designfiles\Fireworks folder.

  2. Open the Layers panel. In the circlepics layer, select the circle and copy and paste it two times. This produces three copies of the circle object.

  3. Pull a horizontal guide (choose View ® Rulers if you don't have them on), double-click on the guide, and set it to 289.

  4. Draw a rectangle to cover the top of the circle shape to the bottom guide, and cover the entire circle horizontally (see Figure 17.11). You will be removing the top portion for this copy of the circle

    Click To expand
    Figure 17.11: A rectangle drawn to cover the top of the circle.

    Note

    To make drawing to a guide easier, be sure the Snap to Guides option is on. (FileÍSnap to Guides).

  5. Shift+select the rectangle and the top shape in the Layers panel.

  6. Choose Modify ® Combine Paths ® Intersect. If you turn off the view of all the objects in the circlepics layer except the top image you just intersected, you will see you have only the top part of the shape. This is the shape that the bird image is going to go into.

  7. Choose File ® Import, navigate to the habitat_alert_start\designfiles\Fireworks folder, and open the same image you've been practicing on, Black_Caped_Poster_Boy1.jpg.

  8. Place your cursor in the upper left corner of the circle shape, drag past the shape by about 50 percent, as shown in Figure 17.12, and click.

    Click To expand
    Figure 17.12: The image imported and placed above the circle shape.

  9. Select the Scale tool, and drag the bottom-right corner up to fit to the guide placed at the bottom of the shape (see Figure 17.13).

    Click To expand
    Figure 17.13: The image scaled to fit horizontally.

  10. Select the image and cut it (Ctrl/Command+X).

  11. Select the adjusted shape (it has a layer name of Path) and choose Edit ® Paste Inside.

  12. Draw a rectangle over the bottom portion of the other copy of the circle shape as shown in Figure 17.14.

    Click To expand
    Figure 17.14: The rectangle drawn over the bottom of the circle shape to use as an intersect command.

  13. Shift+select the rectangle and the circle shape, and choose Modify ® Combine Paths ® Intersect.

  14. Double-click the new shape in the Layers panel, and name it circle bottom.

  15. Drag the inner shadow to the top of the stack of objects; then drag the circle bottom below it. Finally, drag the masked image, and below that, drag the shape containing the background. The Layers panel should look like Figure 17.15.

    Figure 17.15: The stacking order in the Layers panel.

  16. Select the masked image, and from the Effects menu, choose Adjust Color ® Auto Levels. A copy of this file up to this point is saved in the habitatalertfinal\designfiles\Fireworks folder as ha5.png. You can save your copy as myha5.png into the habitatalertstart/designfiles/Fireworks folder.


Using a Bitmap Mask

Users of other image editing software may have a tendency to use bitmap masking first because that is how other applications handle masks. Because you do use bitmap masking at times, this section demonstrates its use, but vector masks are much more flexible after you learn to use the Pen tool. Whereas bitmap masks throw away or delete pixels forever, a vector mask masks only the pixels, and you can regain them at any time. However, bitmap masks can offer a fast solution in some cases and might be the only solution if you can't handle Bézier curves to make precise selections.

For a quick vignette (an image with a feathered edge), follow these steps:

  1. Open the Black_Caped_Poster_Boy1.jpg image again from the chapter17_exercise folder.

  2. Select the Oval Marquee tool, and in the Property inspector, set the Edge to Feather and give it a value of 40 pixels.

  3. Draw an ellipse around the bird.

  4. To remove the background, choose Select ® Inverse.

  5. Press the Delete key and choose Modify ® Canvas ® Canvas Color, and make the Canvas white. Figure 17.16 shows the result.

    Click To expand
    Figure 17.16: A vignette made from the bird image.

    Note

    You can achieve this same effect by using the vector Oval tool (for a vector mask) with the edge set to Feather and with a value of 40 pixels. Drag around the bird, fill with white, Shift+select the oval and the bird, and group them as a mask.

Painting a mask

The more useful purpose of a bitmap mask is the ability to paint the mask on, which comes in handy for the Pen-tool-challenged users. To paint the mask, follow these steps:

  1. Open the bird again. You can choose File ® Open Recent (or File ® Revert if your document is still open) and choose the image from there.

  2. Select the bitmap image and in the Layers panel, click the Add Mask icon on the bottom of the panel to the right of the New/Duplicate Layer icon.

  3. Zoom in close to the head area of the bird.

  4. Select the bitmap Brush tool. Set the stroke to black. Set the size to 1000, set the stroke to Air Brush, and set the Edge to 0.

  5. Use the large brush to erase the background area, staying away from the edges, as shown in Figure 17.17.

    Click To expand
    Figure 17.17: The background removed with a large brush.

  6. Set the brush size to 10 and set the edge to 50. Paint in as close as you can to the head without erasing detail.

  7. Set the brush to size 5 and lower to paint in the fine detail (see Figure 17.18). For detail, a digital tablet would be easier than a mouse. If no tablet is available, however, you might find it easier to use a Pen tool.

    Click To expand
    Figure 17.18: The fine detail is painted in with a white Canvas added.

  8. Leave this image open for the next exercise.

Saving a mask

If this were a precise or custom mask that you spent a lot of time making, you might want to save the mask for use in other images. The method presented here removes your mask, so if it's an image you want to keep, be sure you save it prior to doing this exercise. Follow these steps to save this mask:

  1. Using the bird image you masked the background out of, click the Mask icon in the Layers panel (black and white) and drag it below the image (or another layer). As you drag, when you see a slight flicker at the edge of the layer, release the mouse button. Figure 17.19 shows the mask removed from the bird and now as a separate object.

    Figure 17.19: The mask separated from the image as a separate object in the Layers panel.

  2. To save just the mask, delete the image object. Now only the mask is left. Save this with a different filename. Figure 17.20 shows what just the mask looks like.

    Click To expand
    Figure 17.20: The mask ready to be saved for later use.

    Note

    You can import Photoshop images with masks, and they are fully usable and editable in Fireworks.


Working with the Filters Menu

The options in the Filters menu are applied to bitmap images. If you try to use an effect from the Filters menu on a vector object, the vector is converted to a bitmap object prior to using the filter. The difference between using the Filters menu and the Effects menu is that the Effects menu uses Live Effects. Live Effects remain editable, whereas the Filters menu converts everything to a bitmap that is not editable. For instance, for the Habitat Alert site, we added a drop shadow to the banner rectangle using the Effects menu. Because this is a Live Effect, it can be edited. Most of the Live Effects can be applied to a bitmap and still remain editable. But as soon as you use the Filters menu, there is no editability other than Undo. You'll use Live Effects in the Expert Tutorial in this chapter.

Using the Blur filters

The Blur and More Blur tools are good for cleaning up an image. It'll erase small dust and scratches, and then you can sharpen the image again. With the Gaussian Blur, resharpening doesn't work very well. Keep in mind, however, that the Blur and More Blur filters give you no control at all over the amount of blurring. You get what they are preset to and that's it. You might find the Gaussian Blur filter to be the most useful Blur filter for larger areas or more intense blurring. You can set how much blur to add. If you use the slider to adjust the amount, you see the effect in your document. If you type in an amount, you'll have to accept the changes, press Enter/Return, or click the slider to preview it.

New Feature

Motion Blur, Radial Blur, and Zoom Blur are all new to Fireworks MX 2004. When selected, each option presents a dialog box into which you can enter the parameters. Similar to the Gaussian Blur, you'll be able to see the effect in your document before accepting (clicking OK).

Adding Noise

New Feature

You can now add noise (speckles) to a selection by choosing Filters ® Noise. Enter the Amount of noise. Select Color if you want colorful noise, or leave it deselected for black-and-white noise. Select the Preview option to see the results in the document. When you are satisfied, click OK.
Note

If you use black-and-white noise and add a bit of motion blur, you can make a very nice aluminum texture.

Using the Sharpen filters

Similar to the Blur filters, the Sharpen and the Sharpen More filters are automatic adjustments with no choices available; even the Sharpen tool in the Tools panel gives you intensity options and more. What the sharpening filters do, especially the Unsharp Mask filter, is increase the sharpness of an image by working with contrast. The contrast is emphasized in an image based on the selections you make in the Unsharp Mask dialog box. The following options are available:

  • Sharpen Amount specifies the intensity, determining the effect neighboring pixels have on one another. The Sharpen Amount is affected by the Radius and Threshold amount as well, so you may have to adjust those settings. The best settings for the Sharpen Amount are between 50% and 100%.

  • Pixel Radius is similar to a feather effect and determines how many pixels are evaluated. The larger the number you select, the more pronounced the contrast. The Pixel Radius settings range should be .5% to 1.5% of the dpi of the image.

  • Threshold determines which pixels are affected, based on the number of levels of difference in the surrounding pixels. If the number of levels is greater than the threshold, sharpening is applied based on the settings for Radius and the Sharpen Amount. The higher the Threshold number, the fewer pixels affected.

Adjusting color

This section looks briefly at each option for adjusting color, and gives instructions for some of the easier options. You use these various tools from the Filters menu or the Effects menu throughout the Fireworks section. You work with bitmaps in this section, but you can use these following functions from the Filters menu (bitmap only) or from the Effects menu (bitmap and vector).

Auto Levels

Levels adjust the tonal range of an image. If detail isn't visible, levels can often bring it out. Auto Levels is similar to most automatic tools; you have no control.

Brightness and Contrast

The Brightness and Contrast option is a quick way to adjust an image's appearance. After you choose Brightness and Contrast, the Brightness and Contrast dialog box opens. If you move the sliders to the left or right, you can view the changes in real time on the Canvas. When you get it the way you want, click OK.

Curves

Curves adjust tonal values like levels do, but in a different visual way. You can select a specific channel and adjust the Input and Output values just like you can in Levels. Some people prefer one method over the other. Levels show you a histogram, whereas Curves show you the curve.

Hue and Saturation

Hue and Saturation is a great way to change the color of an image. Let's say you have a button you really like and would like to use it, but it's red and you need teal. All you need to do is select the object, choose Filters ® Adjust Color ® Hue and Saturation. As you move the sliders, the color changes. You can add contrast, lightness, or color. If you click the Colorize option, you can change an RGB image to a two-tone image or add color to a grayscale image. Be sure to check the Preview option so you can see the effect on the Canvas as you move the sliders. When you get the color you want, click OK.

Invert

The Invert filter changes each color in an object or image to its inverse on the color wheel. For example, applying Invert to a black image placed over a red image changes the color to light blue. To use the Invert filter, select an object, choose Filters ® Adjust Color ® Invert. The color of the invert will depend on the color of the underlying objects color. For instance if the bottom object is white and the top object is red and you invert the red, it will turn to black (the inverse of white).

Levels

Levels are used to make tonal corrections in images. The Auto Levels option isn't a bad one to try until you learn how use the shadow points and histogram of levels.

Plug-ins

Plug-ins are third-party filters that you can use to achieve all kinds of great effects. Some of my favorites are made by Alien Skin (www.alienskin.com), which ship two lite versions with Fireworks. Another great company is Auto FX Software (www.autofx.com) who makes Dream Suite, Mystical Lighting, and a lot more. Andromeda Software, Inc. (www.andromeda.com) has a great collection as well. To find more, just type photoshop plugins into a search engine and you'll find a ton. But be careful; some of the free ones don't always perform well. For an inexpensive alternative, Flaming Pear Software's products (www.flamingpear.com) are fantastic.

On the CD-ROM

You'll find demos of some of the plug ins on the CD-ROM. Space didn't allow for all of them.
Start Sidebar

Expert Image Composition by Japi Hanoo

In this tutorial you learn to combine various unrelated images to form a composition. You see how to combine bitmap and vector images in the same composition. You use a variety of techniques, such as Blend modes, Curves, drawing tools, multiple effects, and more. When you are finished you will have a stunning work of art. This project teaches the following skills:

  • Preparing the main image subject

  • Adding a second image

  • Adding a vector drawing

  • Adding texture

  • Adding text on a path

When designing Web pages, writing articles, or simply trying to convey a concept, you will probably turn to imaging to fully communicate your topic. The theme of the artwork in this exercise is "New Economy Assault." It fuses an image representing an assault with an image of a motherboard. In keeping with this theme, you add a vector drawing of blood, which you blend into the composition. You also add special text effects and blending modes to really change the look of the composition.

The end results of the project in this tutorial are twofold. First, it helps you learn how to take bitmap images and blend them together to present a theme. Second, it helps you learn to apply various, multiple Live Effects. The following image shows how your image will look when you are finished.

The completed project sample.

Preparing the main image subject

Many Web sites use imaging to evoke emotions. When I found this image taken by Olaf Starorypinski (www.orsphoto.com), I was inspired to make this composition. In this exercise I show how easy this composition was to create, but don't forget to use your imagination!

  1. Open jon.png from the chapter19exercise folder. You can use any image you like — just find one that inspires you. The size and subject is not important, but the feelings it invokes are. This image sample is black and white, but if you have a colored image, convert it by choosing Command ® Creative ® Convert to Grayscale.

    Brightness and contrast added to the image.

  2. In the Layers panel, double-click Background and rename it Photo. Double-click the bitmap and name it Jon.

  3. The first thing you will do to the image is to add brightness.You are shown two different methods, and you can choose the one you prefer. Or you can try both and see the final results and then decide.

    Although this is a bitmap image, you can still use the Effects list instead of the Filters menu. By using the Effects list, you can use multiple effects and turn off one or more to try different options. After you decide what you like best, you can delete the one you don't like or leave it turned off.

    Click the plus sign in the Property inspector to access the Effects list, then choose Adjust Color ® Brightness/Contrast. Use these settings:

    • Brightness — 20

    • Contrast — 33

    This adds stronger light to the body, particularly in the center, as shown in the following image.

  4. In the Property inspector, uncheck Brightness/Contrast.

  5. Click the plus sign in the Property inspector to access the Effects list. Choose Adjust Color ® Curves. The following figures shows the shape of the curve and the results of adjusting the curve for the image. Apply the following settings:

    • Input — 92

    • Output — 168

    • The lightening effect is less subtle; use the curves and leave more detail.

      Click To expand
      The shape of the adjusted curve.

      The results of adjusting the curve for the image.

  6. In the Property inspector, uncheck Curves, and click to check Brightness/Contrast. Try this option first and toggle back and forth as you progress. You can leave both effects for now.

Adding the second image

The second image you add is a photo of a motherboard; the color isn't important. This image was chosen for its line detail. When you are looking for images to use in a composite, look for ones that add interest, detail, and texture to your final piece. Things like the color aren't important because it is so easy to alter them.

  1. In the Layers panel, click the yellow folder to add a new layer. Double-click it and name it Motherboard. Lock the Photo layer (click to the right of the eye icon).

  2. Choose File ® Import and navigate to the chapter19exerciseimages folder. Select motherboard.jpg and open it. Click the top left corner of the Canvas to place the image.

  3. In the Layers panel, change the Blend mode to Multiply and lower the Opacity to 78%.

    The Layers panel showing the Opacity and Blend mode settings.

    The image with the Blend mode changed to Multiply and Opacity lowered a bit.

  4. To brighten the motherboard, access the Effects list in the Property inspector and choose Adjust Color ® Brightness/Contrast, and use these settings:

    • Brightness — (minus) -35

    • Contrast — 45

  5. To make the motherboard black and white, access the Effects list in the Property inspector and choose Adjust Color ® Hue/Saturation with these values:

    • Hue — 0

    • Saturation — (minus)--100

  6. Next, you need to define the lines of the motherboard more to make it more closely resemble a drawing. To do this you need to alter the curve. From the Effects list, choose Adjust Color ® Curves.

    You need to add two additional points to this curve. (It currently has a beginning and end in the corners.) Click two times on the line; the location doesn't matter. Leave the bottom left point alone; then click the second point on the line and add the Input and Output values in the following list. Repeat for the third and fourth points.

    • Second Point (from bottom left) — Input: 81; Output: 250

    • Third Point — Input: 118; Output: 78

    • Fourth Point (top right) — Input: 211; Output: 246

    Click To expand
    The Curve dialog box showing the new curve with three points.

    The image with the contrast/brightness and the adjusted curves.

  7. Lock the Motherboard layer and turn the visibility off for both the Photo layer and the Motherboard layer.

Adding a vector drawing

Since the theme of this composition is "New Economy Assault," I thought adding bit of blood would be appropriate for this design. Don't get squeamish now — it's only vectors.

  1. In the Layers panel, add a new layer and name it Blood.

  2. If you are pretty good with the Pen tool, make a shape you like here.

    If you need some assistance in making the drawing, you can use a tracing image. Choose File ® Import and select tracing.jpg from the chapter19exercise folder. Lock this image.

    The shape of the blood spots.

  3. Lower the opacity of the shape, and with the Pen tool (be sure to have a stroke), begin to click around the shape. Click and drag for the curve areas. Deselect after the first shape, and then draw the second shape.

    The shapes traced.

  4. Unlock the blood image tracing image and delete it. Your two paths should be in the Blood layer.

  5. Select one of the paths. In the Property inspector, in the Stroke category, select Pencil, 1 Pixel Soft. Click in the color well, and in the Swatches box, type Hex #FF6600. (Or you can select it. It's a shade of orange.)

  6. From the Fill Category pop-up menu, select Satin. Click the color well to access the Gradient Edit window. Click the first color chip, type the Hex number #E52700, and press Enter/Return. Click the color chip on the right, type #FF6500, and press Enter/Return.

  7. From the Effects list, select Blur ® Gaussian Blur, enter a value of 4.1, and click OK.

  8. To apply the same settings to the second shape, here's a shortcut. Select the object that is colored, choose Edit ® Copy (Ctrl/Command +C). Select the second shape and choose Edit ® Paste Attributes.

  9. To get a look at what you now have, turn the visibility back on the Photo and Motherboard layers. Select the Blood layer and change the Blend mode to Color.

    The blood shape with the Blend mode of Color applied.

  10. Lock the Blood layer. If you want to check your progress so far, you can compare your file to the Layers panel shown here.

    The Layers panel up through Step 10.

Adding texture to the composition

Texture images always add depth and character to a composition.

  1. Add a new layer and name it Texture. Turn the visibility off of the other layers.

  2. Choose File ® Import, navigate to the chapter19exercise folder, select texture.jpg file, and open it. Click the top left corner of the Canvas to place the image.

  3. To make the texture black and white, access the Effects list in the Property inspector and select Adjust Color ® Hue/Saturation. Use the following settings:

    • Select the Colorize check box

    • Hue — 0

    • Saturation — 0

  4. To define the edges a bit more, access the Effects list again. Choose Adjust Color ® Brightness/Contrast and enter these values:

    • Brightness — -(minus)-75

    • Contrast — 55

    A dramatic reduction in brightness.

  5. In the Layers panel, lower the opacity of the Texture layer to 80%, and change the Blend mode to Lighten. Turn the visibility back on for all layers.

    The composition with all the image layers complete.

Adding the title

You now add a title, which is curved to the right side of the composition.

  1. Add a new layer and name it Text.

  2. Select the Ellipse tool and draw an oval. In the Property inspector, change the Width to 177 and the Height to 200. The color isn't important.

  3. Select the Text tool. In the Property inspector, apply the following settings:

    • Font — Impact (Arial will do as well)

    • Size — 20 and Bold

    • Color — White

    • Kerning — 5%

    • Center Alignment

    • Type the words New Economy Assault

    The text so far.

  4. Access the Effect list, choose Blur ® Gaussian Blur, and enter a value of 1. Click OK.

  5. Go to the Effect list again and choose Shadow and Glow ® Glow. Enter the following settings:

    • Color — White

    • Width — 4

    • Opacity — 53%

    • Softness — 9

    • Offset — 0

  6. Select the text and Shift+select the oval. Choose Text ® Attach to Path. (I chose to curve the text to emulate a shield.)

    The text attached to the path.

  7. With the text selected, choose Edit ® Clone and use the right arrow key on the keyboard to move the duplicate text as shown in the following figure.

    The cloned text moved.

  8. Choose Text ® Convert to Paths (Ctrl/Command+Shift+P).

  9. Choose Modify ® Transform ® Distort so it looks like the following image. Double-click to accept the transformation.

    The text distorted.

  10. From the Effects list, choose Blur ® Gaussian Blur, enter a value of 2.8, and click OK. Then from the Effects list choose Sharpen ® Unsharp Mask and use these settings:

    • Sharpen Amount — 58

    • Pixel Radius — 4.1

    • Threshold — 0

  11. Change the Layer Blend mode to Luminosity

That's all there is to this image. Now you can see how versatile the Live Effects are and the great effects you can get using the different Blend modes and masking effects.

End Sidebar


Summary

In this chapter, you learned how to make selections and use the various bitmap editing and painting tools. You also learned how to mask an image. Although the most powerful and flexible masking is done using vector masks, here you masked a bitmap image. You also saw that bitmap masking may come in handy now and then. You also learned how to make a composite image.


Project Summary

Habitat Alert site Let's take a look at the skills you performed in this chapter that you will also use in the Habitat Alert Web site.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
ha4.png | You edited the circle shape and added the bird image using masking techniques and Combine Paths commands. |
ha5.png | This is the saved copy of the page that you edited in this chapter. | It is now ready for the buttons to be added, and then the design can be sliced. The logo has also been inserted into this document. The logo was made in FreeHand and enhanced in Fireworks.


Chapter 18: Designing Navigational Elements

Download CD Content

This chapter provides descriptions of several of the Web page navigation solutions that Macromedia Fireworks MX 2004 offers: the extremely popular pop-up menus (which are easier to use than ever), navigation bars, and disjoint rollovers.

Understanding Navigation Solutions

Enabling users to navigate your Web site easily is of utmost importance when designing a site. Users get frustrated when they arrive at a page and can't figure out how to get to where they want to go. Fireworks MX offers many navigational solutions — you simply choose the best method for your Web site.

Simple rollovers can be described as buttons with Up and Over states (described in more detail later) and are the most widely used type of JavaScript buttons on the Internet. Fireworks gives you several methods to create rollovers, including using frames or symbols.

A disjoint rollover, sometimes called a remote rollover or a multiple-event rollover, is similar to a simple rollover but is designed to trigger an image swap in a location other than the button itself. Each button can change this area to provide additional information to the user.

A navigation bar is a cohesive group of buttons with three or more states that are tracked. The tracked states of the buttons help users understand where they are in the site. Navigation bars are especially useful in frames-based sites, where a single navigation page can be used in one frame to change the content in another frame.

A more sophisticated navigation system uses pop-up menus. Pop-up menus, which are all the rage these days, can be made quite easily with the Fireworks MX 2004 Pop-Up Menu Wizard. However, pop-up menus involve a few technical considerations. The pop-up menu tutorial in this chapter digs into the issues and offers solutions.


Using Buttons

The following are the four different states of a button:

  • Up — The default appearance of the button as first seen by the user.

  • Over — The way the button looks when the user passes the mouse pointer over it. The Over state alerts users that this button is "hot," meaning that it leads to another location when clicked.

  • Down — The appearance of the button after it has been clicked, which often appears as if the button has been pressed down. In Macromedia Fireworks, you can set the Down state to be active on the page the user is clicking to and designate the button as the current page (it's the default setting).

  • Over while Down — The appearance of the Down state button when the mouse pointer moves over it.

The quick and easy way to add multiple states to a button is to use the Button Editor (which is described in the next section). The Button Editor is designed to help you make up to four different states of the same button in one location. Using it is the easiest, fastest, and most efficient way to make multiple-state buttons.

Most Web navigation buttons use JavaScript to power their interactivity. Using the Button Editor, you can build these buttons without any knowledge of JavaScript. Fireworks MX 2004 generates the necessary JavaScript code for you automatically. You can choose to produce from two to four states for a button, and easily change the appearance of each state. Any button produced with the Button Editor is automatically a symbol. When you want more than one of a button, simply drag another instance onto the canvas from the Library.

Another important feature of the Button Editor is that when you alter the text on the Up state button, the text is automatically updated for the other states as well, eliminating the need to change the text on all four buttons.

Using the Button Editor

When you make a button using the Button Editor, the behaviors for the different states of the buttons are automatically added according to the choices you make. The JavaScript for the buttons is exported with the button.

The following are the steps involved in creating and modifying a button with the Button Editor:

  1. Habitat Alert site Open a new document that is 200x200 with a white background.

  2. Choose Edit ® Insert ® New Symbol.

  3. Type the name Quiz, and select the Button type, as shown in Figure 18.1.

    Click To expand
    Figure 18.1: The New Symbol dialog box.

  4. Choose File ® Import, navigate to the chapter18_exercise folder on the CD-ROM, select the btn_quiz.png file, and open it. Click in the Button Editor to place the button.

  5. Choose Window ® Align. Select the To Canvas option (turns orange); then click horizontal center and vertical center (center icons in the top row), as shown in Figure 18.2.

    Click To expand
    Figure 18.2: The Align panel centering the button in the Button Editor.

  6. Choose Insert ® New Symbol. The Button Editor opens. Figure 18.3 shows your button in the Button Editor.

    Click To expand
    Figure 18.3: The instance of the button symbol opened for editing in the Button Editor.

    The Button Editor has several different tabs. When you click one, Fireworks gives you a description of what the corresponding state does. The Up state tab should be the active one; if it isn't, click it to open it.

    Note

    Click Import a Button to open the Import Symbols: Buttons dialog box, shown in Figure 18.4. This dialog box shows the buttons found in the Button Library that ships with Fireworks MX 2004. You can also access these symbols by choosing Edit ® Libraries ® Buttons. It is possible to add your own buttons into the Button Library. You'll see how later in this chapter. Close the Import Symbols: Buttons dialog box by clicking Cancel. You don't need these symbols right now.

    Click To expand
    Figure 18.4: The Import Symbols dialog box for buttons.

    Notice the button is centered under the cross (+) symbol. Buttons have registration points that are the center of the button for alignment purposes. The cross serves as the button registration point — the point where each state of the button will be aligned.

    Note

    When you are in the Button Editor, open the Frames panel (Frames and History panel group) and notice that four frames are present — one for each available state of your button. Now look in the Layers panel. Notice that a slice has been added to the Web layer. All this happened automatically.

To add text in the Up state of the button, follow these steps:

  1. Select the Text tool and type HOME. Use any font and size that looks good on your button. This example uses 14-point Lithos Regular.

  2. Use the Align panel to center the text horizontally and vertically. If it isn't quite where you want it, use the keyboard arrow keys to position it.

  3. After you have the text box placed where you want it, click the Center Align icon in the Property inspector. This aligns the text to the text box.

Follow these steps to alter the Over state of the button:

  1. Click the Over tab next to the Up tab at the top of the Button Editor.

  2. Click the Copy Up Graphic button to put a copy of the Up state in the Over state's editing box.

    Tip

    For any of the button states, you can import a button, draw a unique button, or drag a button from another document instead of using the Copy Graphic Up/Over/Down button. Be sure to keep the images the same size and centered for a smooth rollover.

  3. Select the button and ungroup it. To do so, use either the Ungroup icon in the Modify toolbar if you have it open or press Shift/Command+Ctrl/Control+G. You can now make a change for the Over state.

    Note

    To open the Modify toolbar, choose WindowÍToolbarsÍModify. It will dock by default below the document window, but you can drag it to another location if you prefer.

  4. You won't change the text for this rollover state for this button — you'll change just the star in the square. Click the star to select it, and change the Stroke to a color of #CC0000. Select the entire button again (Ctrl/Command+A), and regroup the button.

    Note

    A common rollover effect is to add a stroke, a glow, or a Live Effect. Be sure the button, or text if you have any, is selected so that the effects are added. The great part is that when you change the text on the symbol later, the effects are automatically applied to the new text!

To alter the Down state, follow these steps:

  1. Click the Down tab.

  2. Click the Copy over Graphic button.

  3. Make any changes to the appearance you require. For the quiz button, ungroup the button and change the following values: Choose a color of #B08B00 for the stroke of the star; change the fill of the small rectangle to #CC0000. Regroup the button.

  4. Leave the Include Nav Bar Down State option checked.

    If you want to assign an Over while Down state to the button (which isn't as widely used as the other three states), click the Over while Down tab, click the Copy Down Graphic button, and make your changes. No changes were made for the quiz button.

  5. Click the Active Area tab to see a slice added to your document automatically. The Active Area is set to Automatic by default and generates a slice large enough to cover all the button states. There is one slice for all four-button states; you can change the size of the slice by dragging the slice points.

  6. Click the Done button when you are finished with all the states of the button. An instance of the button is automatically placed in your document, indicated by the little arrow in the corner.

  7. Save this file as btn_quiz_done.png.

To add more buttons to your document, drag them from the Library panel (in the Asset panel group) by clicking and dragging either the button symbol or the name of the symbol onto your document. Alternatively, you can Alt/Option+click and drag a new copy of the instance. Figure 18.5 shows the symbol in the Library panel.

Figure 18.5: The button symbol added to the Library panel.

You can easily preview your new button by clicking the Preview tab in your document window, passing your mouse over the button, and clicking the button to see the different states. Figure 18.6 shows the Preview tab selected and the rollover effect.

Figure 18.6: The rollover state of the image as seen in the Preview tab.

Flash MX This button's PNG file can be imported into Flash where the text can be changed. It will maintain its texture and the rollover effects in Flash.

Using symbols, instances, and libraries

Symbols are automatically generated when you use the Button Editor. A button symbol encapsulates up to four different button states and moves as a unit. You can convert any object into a symbol. If you have a custom button designed, you can make it into a symbol to use more than once, as you'll see later in this chapter. There are three types of symbols in Fireworks.

  • Graphic symbols — Any object you'd like to use multiple times.

  • Button symbols — Graphics intended for use as a button with two or more states. Button symbols are generated in the Button Editor, which also automatically applies a slice.

  • Animation symbols — Contain all the frames and timing of an animation. A completed animation including links is contained in the symbol.

You made a button symbol using the Button Editor in the previous exercise. Symbols are editable. When you make a symbol, it is referenced in the Library panel (in the Assets panel group) and an instance is placed on the canvas. An instance is a copy of a symbol.

After you have a library of symbols, you can drag additional instances of them from the Library panel (Window ® Library) onto your canvas. The "child" instance maintains a link to the "parent" symbol. An instance is marked with a dotted box and corner arrow.

In most cases, double-clicking an instance opens the appropriate editor, and changes are made globally to all instances; however, there are techniques you can apply to an individual instance that do not affect the symbol. You can use the Transform tools or alter the opacity on individual instances. You can also add effects on an instance-to-instance basis.

There are two types of libraries: the default library and an imported library. The default library is generated when you first convert an object into a symbol. This library includes the symbols and is saved with the document. When you reopen the document, the library is available for that document only. You can easily export a set of symbols from the library for use in other documents, or even save them into the libraries that are accessible in any document in Fireworks by importing them.

Use the following steps to export symbols from the library:

  1. Open the Library panel.

  2. Click the down arrow to access the Library Options menu. Choose Export Symbols.

  3. Select the symbols you want to export. If you want them all, choose Select All. If you want several in a row, Shift+click and choose the symbols you want. For noncontiguous selections, press Ctrl/Option+click on the desired symbols. When you are done, click the Export button.

  4. Name your library and choose where to save it; then click Save.

    Tip

    For libraries you think you may use often, save or move the library files to the Fireworks Library folder, Macromedia\FireworksMX2004\Configurations\Libraries. (For Windows 2000 and Windows XP users, your location may vary.) By placing your file here, you can access it by choosing the Edit ® Libraries submenu. Any new libraries you export into the Fireworks Library folder will be available the next time you start Fireworks.

To import a library:

  1. Open the Library panel.

  2. Access the Library Options menu and choose Import Symbols.

  3. Locate the saved library and choose Open.

  4. The Import Symbols dialog box opens with the list of symbols in the library. Choose one or more, and then click the Import button.

Start Sidebar
Button Facts

Buttons have some common characteristics and capabilities. The following is a handy list of button features:

  • You can make a graphic or text object into a button.

  • You can convert a graphic or a text object into a button.

  • You can import buttons from the Button library.

  • You can make one button symbol and drag instances of that symbol from the Library.

  • To edit a symbol, simply double-click an instance on the canvas or Library to open the Button Editor. You can also change its properties in the Property inspector.

  • You can edit the text on a button without affecting other instances of the same symbol. This also does not break the link to the original symbol. Symbol color, effects, and so on can all be edited and filtered down through all instances.

  • You can edit the URL and target without affecting other instances of the symbol.

End Sidebar

Making a button symbol

It's easy to make a button directly in the Button Editor, or convert an existing button into a button symbol and edit it in the Button Editor. As stated earlier in this chapter, a button symbol encapsulates up to four different button states and moves as a unit. Instead of spending time reproducing similar buttons, you simply have to place a symbol onto your canvas and edit the text and link.

Follow these steps to convert a button graphic into a button symbol.

On the CD-ROM

The starting and finished buttons (quiz.png, btnquiz.png) are in the chapter18_exercise folder on the CD-ROM.

  1. Navigate to the CD ROM chapter18_exercise folder and open the quiz.png file.

  2. To convert this graphic into a symbol:

    • Choose Select ® Select All.

      Caution

      If you don't select all the objects, only the part that is selected will be converted to a symbol.

    • Click Modify ® Symbol ® Convert to Symbol.

    • In the Symbol Properties dialog box, name the button and select Button as the type and then click OK.

      Note

      As soon as your button is converted to a symbol, it is accessible in the Library (Assets panel group).

Editing button symbols

It's simple to edit the buttons you make. To edit the multiple parts of a button, perform the following steps.

To edit the text:

  1. Select the text you want to edit.

  2. Use the Property inspector to change the text, add a link, and enter the Alternative text.

    Note

    This works only if the button symbol has text on it.

To change the button characteristic:

  1. Double-click the name or the graphic of a button symbol in the Library panel to open the Button Editor.

  2. Click the tab for the state or states you'd like to alter; then make your changes.

  3. Close the Button Editor when you are done.

    Note

    When you edit an original symbol that's been used in other documents, you can update all instances simultaneously by choosing Update from the Library pop-up menu (F11). If you try to edit an imported symbol, a warning opens telling you that an edit will break the link to the original symbol.

When you edit an instance of a button, it breaks the link with the original object, allowing you to make changes in the new document without affecting any documents containing the original symbol. To update an imported button, open the Library pop-up menu in the Library panel and choose Update.

In Fireworks MX 2004, you can edit the active area, which is the slice directly in the document window. This alters the slice of that instance only. Be sure the Show Slices and Hotspots view is turned on. You can drag the red lines to the size you need.

Cross - Reference

Slicing is covered in more detail in Chapter 21.

You can edit the Active Area via the Symbol Editor if you want to change the slice for all instances of the button.

Tip

To change the slice of individual instances, you need to make a copy of the symbol. In the Library panel click the Library Options pop-up menu and then click Duplicate. You can now change the slice or any other part of the new symbol; however, it's no longer attached to the original.

Adding a button to the Button Library

As promised, you will now learn how to add your own special buttons to the Button Library that ships with Fireworks MX 2004. You can even make your own custom-named libraries if you'd like.

  1. Open btn_quiz_donepng from the chapter18_exercise folder on the CD-ROM, or use your own button.

  2. Open the file that contains the library of button symbols that is included in Fireworks. The location of the file depends on your operating system. Locate your Macromedia Fireworks MX 2004 program files and locate the Libraries folder (it's in FireworksMX2004 ® Configurations ® Libraries in Windows 2000).

    • In this folder, find, select, and open Buttons.png.

    • The Replace Fonts dialog box may open, asking you to change fonts or maintain appearance. Click Maintain Appearance.

    In the Layers panel, notice how each button in the library is its own object but all the buttons are in one document (see Figure 18.7). Don't be intimidated by all the slices you see. You can click the Hide Hotspots and Slices icon in the Tools panel to hide them.

    Click To expand
    Figure 18.7: The Button Library as seen in your document and the Layers panel.

  3. Select the btn_quiz_done name to activate it, and copy the button symbol. Select the Button.png window again, and paste (Ctrl/Command+V) the btn_quiz_done graphic.

  4. Center the button using the Align panel.

    You'll see your button added in the Library panel (see Figure 18.8).

    Figure 18.8: The new button added to the Button Library.

  5. To give the button a descriptive name, double-click the button name in the Library panel and change it.

  6. Save the file and close.


Creating Interactive Images

You can add a variety of behaviors to an image to make it interactive. Rollovers are one of the most popular behaviors. JavaScript rollovers all work the same way: When a cursor passes over one graphic, a trigger is activated (signifying that an event has occurred). A number of behaviors or actions can be assigned to this trigger, such as replacing the current image with another or displaying a graphic or text in another location of the Web page. The trigger is always a hot spot or a slice. There are other behaviors, such as disjoint rollovers, pop-up menus, and navigation bar behaviors, that all perform different functions.

Making a rollover image

A simple rollover is one behavior that consists of replacing one image with one other image whenever a mouse rollover occurs. It's easy to build a rollover in Fireworks using the Behaviors panel. A simple rollover has an image in Frame 1 that is swapped for an image in Frame 2. In Fireworks, the button states are always on specific frames: the Up, Over, Down, and Over-Down states are Frames 1 through 4, respectively. This section covers adding simple rollover and other behaviors using the Behavior panel instead of the Button Editor. Some prefer using the Button Editor for button rollovers; others prefer to use the following method.

Designing the Up and Over states of a button

This tutorial shows how to make one of the buttons for the Habitat Alert Web site. You'll build both the Up and the Over state of the button. The remaining buttons are made using the same method but altering the button size where needed.

  1. Habitat Alert site Open the ha6.png file from the chapter18_exercise folder on the CD-ROM.

  2. Select the Text tool and type the word LEARN (refer to Figure 18.9 for placement). Use a font that will fit the area. The image in Figure 18.9 uses the following:

    Click To expand
    Figure 18.9: The first button text added to the site interface.

    • Font — Lithos Regular (an Adobe font)

    • Size — 12

    • Color — #666600

    • Range Kerning — 7

    • Anti-Aliasing Level — Smooth Anti-Alias

    Click again to place another word. The words ACT, SUPPORT, and FIND were each added as individual text boxes. The remaining text that will be used as links and positioning is shown in Figure 18.10.

    Click To expand
    Figure 18.10: The rest of the main navigation text added to the layout.

  3. In the Layers panel, double-click the framework layer and select the Share across Frames option.

  4. Open the Frames panel from the Options pop-up menu, and select Add Frames. Enter 1 and select After Current. Click OK. Select Frame 2. This is where you will make the Over state of the text navigation.

  5. Draw a rectangle anywhere below the navigation and set its size to 60x20.

  6. Set the fill to None and use a Basic, 1-pixel Hard Line stroke using #003366 for the color.

  7. You want a three-sided rectangle without a bottom for the rollover. To cut the bottom off the rectangle, do the following:

    • With the rectangle selected, use the Knife tool to drag horizontally across the bottom of the rectangle. Cut off approximately 3 pixels (see Figure 18.11).

      Click To expand
      Figure 18.11: The Knife tool after it has sliced the bottom of the rectangle.

    • Click the canvas to deselect.

    • Use the Pointer tool and select the bottom portion you sliced; then delete it.

      Note

      The sliced portion won't be a separate object until you deselect and then reselect. Alternatively, you can use the Pointer tool and Shift+click on the portion you want to keep (this deselects it); then press the Delete key to remove the unwanted portion.

    • Use the Subselection tool and Shift+click both of the bottom points of the sides. Use the up or down arrow keys until the height is 17.

  8. Place the three-sided rectangle over the LEARN text as shown in Figure 18.12.

    Click To expand
    Figure 18.12: The three-sided rectangle placed over the LEARN text.

  9. Copy the blue line and paste. Move it over the ACT word. In the Property inspector, change the width to 50. Line up the left side to cover the right side of the LEARN button as shown in Figure 18.13.

    Click To expand
    Figure 18.13: The three-sided rectangle placed over the ACT text.

  10. Repeat for SUPPORT, making it 93 pixels wide. Then repeat for FIND, making it 52 pixels wide.

  11. Shift+select each word, click the Fill Color box in the Property inspector, and change the color to #003366, the same as the blue rectangle, as shown in Figure 18.14.

    Click To expand
    Figure 18.14: The rollover state completed for all the text links.

Adding the Swap Image behavior

You need to have a slice or a hot spot to attach a behavior. For this exercise, you use slices.

  1. In the Frames panel, you should still be in Frame 2.

  2. Select the three-sided rectangle around the LEARN button and click Edit ® Insert ® Slice.

  3. Add a slice to each text link as shown in Figure 18.15.

    Click To expand
    Figure 18.15: Slices added to each text link.

  4. It's a good idea to give your slices unique names. To name the slice:

    • Select the slice over the LEARN button.

    • Type btn_learn in the Slice area of the Property inspector (see Figure 18.16). When you are naming files for export, keep in mind that certain characters are not allowed, such as special characters and spaces. Use the underscore instead of the space.

      Click To expand
      Figure 18.16: The LEARN slice is selected and given a unique name in the Property inspector.

    Dreamweaver MX Name all the buttons with btn in the front so they will be easy to locate in a list of images, as you'll see in Dreamweaver.

    Note

    If you don't assign your own names for slices, Macromedia Fireworks will do it; however, its naming system is a bit cryptic. You can set up your own naming system in the HTML Setup, Document Specific dialog box (FileÍHTML Setup).

  5. Open the Behaviors panel (Window ® Behaviors or Shift+F3) and click the plus (+) sign.

  6. Click Simple Rollover.

  7. In the Behaviors panel you'll notice the onMouseOver event is added. Double-click it. The dialog box shown in Figure 18.17 opens, explaining that the Over state uses whatever you have in Frame 2.

    Click To expand
    Figure 18.17: The Simple Rollover dialog box.

  8. Click Preview in the document window, and pass your mouse over the link to test it. When you mouse over, you'll see the blue lines around the top and sides of the button, and the text color will be blue as well.

    Cross - Reference

    You will optimize this image and add a few more slices for a special menu that will be made in Dreamweaver in Chapter 23. You will also learn a couple of different ways to export the text navigation and the benefits of each method.

Making a disjoint rollover image

A disjoint or remote rollover allows you to trigger image replacement in one or more locations — the swapped image need not be the same as the triggering image. With a disjoint rollover, a user moves the mouse pointer over a graphic (usually a button) and may trigger a rollover in the graphic but also in a different, remote location. A group of buttons can trigger different images in the remote location. This is useful because a single area may display lots of different information depending upon which button is active. Disjoint rollovers are typically onMouseOver events. To produce the disjoint rollover, follow these steps:

  1. Open the disjointstarter.png file from the chapter18_exercise folder on this book's CD-ROM (see Figure 18.18).

    Click To expand
    Figure 18.18: The images used in this exercise.

  2. Select the Product button, which will be used to trigger the remote image swap.

  3. This button is a symbol. Symbols automatically apply button behavior and include a slice. This button already has an Over and an Over while Down state added to it.

    Note

    If you are using a static button or have built your button using the document frames, add a slice now. To add a slice, select the button's graphics (be sure to get all of them), and choose EditÍInsertÍSlice.

    After you add the remote rollover, two things will happen. As the user passes the cursor over the Products button, the button graphics change for the Over state and an image appears above the button.

  4. To set up this behavior:

    • a. Open the Frames panel in the History and Frames panel group.

    • b. Click the Frames Option pop-up menu and select Duplicate Frame. Add one frame after the current frame.

  5. With Frame 2 selected, go to the Layers panel and click the eye icon for the Layer 2 bitmap image. Because the image is hidden in Frame 1, it is only visible in Frame 2. Figure 18.19 show the image added to the second frame.

    Click To expand
    Figure 18.19: An image added to Frame 2 for the swap image behavior.

    Cross - Reference

    Exporting the image as a GIF is discussed in Chapter 10.

  6. Select the Slice tool and draw a slice to cover the area. You can see in Figure 18.20 that the slice is larger than needed.

    Click To expand
    Figure 18.20: A slice added to cover the new content for Frame 2.

    Note

    If you have several different buttons that use the same swap area, you need only a single slice. Be sure to make the slice large enough to encompass the largest image for the area.

    If you click Frame 1, you will see the empty frame; if you click Frame 2, you will see the image added.

  7. Add the behavior to make it work — it's easy to use a drag-and-drop method:

    • With slices visible, click Frame 1. Slices may be toggled on and off from the toolbar or in the Web layer.

    • Select the Products button. You should see a small circle in the center and a pointing hand when the cursor is above the circle. This hand turns into a fist when you click and hold.

    • Click, hold, and drag with the fist, moving to the slice area above the remote graphics. A line is added showing the link (see Figure 18.21).

      Click To expand
      Figure 18.21: The drag-and-drop method being used to add the Swap Image behavior.

    • The Swap Image dialog box opens, which should default to Frame 2. To select a different image, click the More Options button, select a different image file, and click OK.

    • It's possible to use an external file as well. For example, if you have graphics that have been previously exported, you may select them by browsing to their location. This is a method often used when the remote area includes animation.

    • The Restore Image onMouseOut option is checked by default. It's used to undo the swap when the mouse cursor moves away. If it isn't checked, check it now.

    • To see that the behavior has been added, open the Behaviors panel (Window ® Behaviors). Figure 18.22 shows the Swap Image behavior added.

      Figure 18.22: The Swap Image behavior added.

  8. To view your new disjoint rollover, click the Preview tab to enter the preview workspace. Move your mouse pointer over the button graphic. You can toggle the slices to hide them to get a better view of the graphics.

Multiple buttons using the same remote area

This is a variation of the disjoint rollover you just did. The sample design is using three separate button images. You could just as easily use buttons with rollover effects if you'd like. Below the buttons is one large slice for the remote or disjoint rollover. A starter file is provided for you.

  1. Open the disjoint_multiple.png file from the chapter20_exercise folder on the CD-ROM. Notice the buttons already have slices and there is a large empty slice below the buttons.

  2. Open the Frames panel Options menu and click Duplicate Frames. Type or scroll to three frames after the current one.

  3. Select Frame 2 and type some text below the HOME button, as shown in Figure 18.23.

    Click To expand
    Figure 18.23: Text added below the HOME button in Frame 2. This text will be visible only when the mouse cursor rolls over the HOME button.

  4. Repeat Step 3 for the remaining two buttons, but add a new frame for each.

  5. To add the behavior:

    • Click the first button slice to select it. Using the Drag-and-Drop icon, drag to the remote slice and release the mouse button.

    • When the Swap Image dialog box opens, choose Frame 2 if it isn't already selected.

    • Repeat Step 5 for the second button, but use Frame 3 (see Figure 18.24).

      Click To expand
      Figure 18.24: Frame 3 being used for the second button rollover

    • Repeat Step 5 for the third button, but use Frame 4.

  6. Click the Preview tab and mouse over the links.

Table 18-1 shows a list of behaviors and what they do. The behaviors all are applied in a similar manner as the rollovers.

Dreamweaver MX Fireworks behaviors are compatible with Dreamweaver.

Table 18-1: Behaviors and Descriptions
Behavior | Description
Simple Rollover | This behavior swaps an image on Frame 1with an image on Frame 2.
Swap Image Restore | This behavior restores a swap image on another frame back to its default appearance in the relevant frame (usually Frame 1). You can change the event that triggers the behavior by specifying a mouse event.
Set Nav Bar Image | This behavior has several other behaviors associated with it. You can choose to use Nav Bar Down, Nav Bar Over, and/or Nav Bar Restore. You can choose to add these behaviors individually or add all at once using the Set Nav Bar Image behavior.
Set Pop-Up Menu | This behavior presents you with dialog boxes that allow you to automatically build a pop-up menu. You attach the behavior to a slice or hot spot.
Set Text of Status Bar | This behavior is used to add text to the status bar of a browser window.


Making an Image Map

An image map is often used when it is inconvenient or difficult to slice a graphic into individual elements. By default, only one link can be placed on an image. With an image map, you can designate several clickable hot spots in a single image, allowing more than one link to be added to the image. You can even add behaviors to the hot spots. Hot spots are defined with drawing tools that build rectangles, ellipses, or polygon coordinates. An image map is easy to create in Macromedia Fireworks and can be copied or exported for use in HTML pages.

A common use for an image map is a navigational line across a page. Figure 18.25 shows the bar to which you will add hot spots.

Click To expand
Figure 18.25: A navigational line that will get hot spots added to it.

Use the following steps to create an image map in Macromedia Fireworks MX 2004:

  1. Open imagemap.png file from the chapter18_exercise folder (see Figure 18.25).

  2. Select the Rectangle Hotspot tool. If you click and hold on the corner of the tool icon, you'll see that there is a Circle and a Polygon shape available as well.

    Note

    When you make a polygon shape, the shape area is the hot spot, although it will still be sliced as a rectangle.

  3. Draw a rectangle over the word Home, as shown in Figure 18.26. It will have a blue overlay when the hot spot is drawn.

    Click To expand
    Figure 18.26: A hot spot is added to the word Home.

  4. In the Property inspector, add the link name (such as index.htm) and the Alt text, such as Home, as shown in Figure 18.27.

    Click To expand
    Figure 18.27: The Property inspector showing the link and the Alt tag added.

  5. Repeat Steps 4 and 5 for the remaining text links. Use the appropriate URL for each link name and corresponding alternative text.

Start Sidebar

Foolproof Pop-up Menus by Kim Cavanaugh

First introduced in version 4 of Fireworks, the pop-up menu feature has been one of the most popular, and troubling, additions to Fireworks. Although pop-up menus have been greatly improved in Fireworks MX and Fireworks MX 2004, they can still present quite a challenge. Much like making a soufflé, it's easy enough to mix the ingredients together. However, after things get popped into the oven, or in this case, into your Web site, things can go wrong in a hurry if you don't have good understanding of the rules for the implementation of pop-up menus.

Before beginning to use pop-up menus, take a look at the components that compose them. You'll have much more success if you have a good understanding of the separate components that need to work together to make these dynamic objects function correctly.

The first component of the menu system is the graphical object where all the JavaScript behaviors are attached. Designed in Fireworks, the images are the easiest part of the recipe to put together. Simply decide on the appearance that you want and design away. After you're ready to put the menu into the page, Fireworks will use an HTML table to hold all the pieces of the image together and provide the code to attach the triggers to each image.

The second part of the pop-up menu is contained in the <head> of each document that uses the menu. This JavaScript can be quite large and will often add 25 to 30K of file weight to your page. The JavaScript in the head controls the function of the pop-up menus and accounts for browser issues so that the menus will function in as many browsers as possible.

The third part of the menus is a small bit of script that resides in the <body> of the document and is responsible for calling, or causing, an external script to function.

Finally, Fireworks will generate an external script that loads the layers themselves into the page and controls their appearance. This file, named mm_menu.js, is the key to the appearance of your menus.

When all four of these objects are working in concert, pop-up menus function exactly as expected. Most problems with the menus result from a failure to keep these objects working in the proper relationship or when changes are made with one part of the system without taking into account the effect the change has on the other components. In this tutorial you'll see one method for ensuring that your menus function correctly every time and how you can plan ahead so the inevitable changes you'll need to make later on don't cause the entire menu system to fall flat.

In this tutorial you design a menu system for a fictional chamber of commerce for the equally fictional town of Poinciana Key, Florida. As with any navigation system, you'll want to consider the structure of your Web site before you begin building the pages and how the different sections of the site will be linked together. When using pop-up menus in particular, you need to keep the relationship of your files and folders in mind as you build the objects. While you can use relative links to the pages in your site, as will be done here, absolute links often work much better if you want to create multiple subfolders and employ templates to control the appearance of the individual pages.

With all of that in mind, let's get started:

  1. In the chapter18_exercise folder on the CD-ROM, locate the file called menu_sample.png. This simple sample file has been designed to take a little of the work out of the setup of the menus and contains five buttons with slices applied to them.

    The process of building the menu objects themselves is really quite easy. Fireworks MX provides a dialog box with four tabs that allow you to set the content, appearance, advanced properties, and location of the menus.

  2. To begin building your menus, select the slice over the Lodging button on the far left of the canvas and then click the Behavior handle (little circle) that appears in the center of the slice. From the available options that appear, select Add Pop-up Menu.

  3. After you've made this selection, the Pop-up Menu Editor launches. The editor has four tabs at the top to allow you to set the properties of the menu objects. By default, the first tab that will be active is the Content tab. This is where the text that will appear in the menu is set, along with the link to the page that will open when the menu object is selected.

  4. For this tutorial, set the text area and links as listed in the following. Click twice in the text area to open a text box. You can tab from one entry to the next after the text box is opened. Press Enter/Return to exit the text box. You can also refer to the illustration that follows to see how they have been applied. (Don't worry about the Target entry; this is used primarily for frames.)

    • Abel's Motor Lodge — abels.htm

    • Baker's Family Motel — bakers.htm

    • The Green Turtle Inn — greenturtle.htm

    Click To expand
    The Pop-up Menu Editor with the first three entries

  5. At the bottom of the editor, locate the Next button and click it to move to the next tab, where you'll set the appearance of the menus.

    Examine the contents of the Appearance tab to orient yourself to the features found. As you can see, there are a number of ways to set the appearance of your menu objects. The first choice to make is whether to use HTML elements in the menus or to use images. Generally speaking, because HTML produces slightly faster page load times, that type of menu is preferred. Remember that the JavaScript alone requires at least 25K of file weight, and to get your pages to load as quickly as possible, you'll want to be conservative with your menus. However, feel free to experiment with the various settings that can be changed to affect the way your menus appear. As you make each change, note that Fireworks provides a preview of how the menu will look when the menu first appears (Up state) and how it will appear when the mouse passes over it (Over state). For the illustrations that you'll see as this tutorial progresses, the menu styles have been set to HTML.

    Tip

    The styles that are used in the Image option for the menus are the same ones that appear in the Assets panel. A great way to customize the appearance of your menus is to create and save a custom style. After the style is saved, it will become available as an option in the Pop-up Menu Editor.

  6. After you've set the appearance of your menus, click the Next button again to move to the Advanced tab. You can leave these settings at their defaults for now or experiment with the ways they affect your menus.

    Notice the features, such as the ability to modify the amount of time that the menu appears (Menu Delay), the amount of space that surrounds your text in an HTML cell (Cell Padding), and options for setting the borders and shadows for HTML elements of a menu. Note that there are fewer options available if you choose the Image setting for your menus.

    Caution

    Setting the Menu Delay at settings smaller than 500 often causes menus to fail in some older versions of the Netscape browser.

    Click To expand
    The Appearance tab where you set the font attributes, type of menu, and cell colors.

  7. The final tab controls the location of your menus and gives you the option to fine-tune where they will appear in relation to the slice they are attached to. For this exercise click the second button from the left so the menu will appear directly below the button and aligned to the right. Note that Fireworks MX also allows you to provide precise pixel-level control of the menus by specifying exact x and y coordinates as well.

  8. With all of your settings complete, click the Done button and save your file. Time to see how this first object appears in a live browser.

  9. Select File ® Preview in Browser (or press F12) for a preview of the navigation bar with its first menu attached.

  10. If you find that you're not happy with the look of your menu, simply select the slice again and choose Edit Pop-up Menu from the menu that appears when the behavior target is clicked.

    Tip

    Getting the menu looking the way you want with the first set of menus will save you a great deal of time later on. Because Fireworks remembers all the settings you apply as you move on to the next slice, setting your menu appearance now lets you zip through the rest of the tutorial.

Adding a menu to the additional buttons

With the first menu set, it's time to move on to the additional slices and apply the menus. Because Fireworks remembers the appearance and advanced settings you've applied, you need only enter the text and links and set the menu's position for the remaining items.

Follow the guide for setting the text and links for the additional buttons in your menu:

Restaurants |
The Greenhouse | greenhouse.htm
Marker 98 | marker98.htm
Angelo's Ristorante | angelos.htm
Boating |
Glass Bottom Tours | glbottom.htm
Sunset Sailing | sunset.htm
Mullins' Boat Rentals | mullins.htm
Fishing |
Back Country Charters | backcountry.htm
Deep Sea Adventures | deepsea.htm
Lazy Day Sportfishing | lazyday.htm
Diving |
Diver Down Dive Shop | diverdown.htm
Lady Luck Dive Boat | ladyluck.htm
Coral Seas Diving | coralseas.htm
Tip

Remember to save as you work and to preview your menus often in a browser.

Now that the appearance of all the menus and the content that is to appear in each is set, it's time to move on to the actual export of the menu.

  1. Before you export the file, one additional change needs to be made. Select File ® HTML Setup.

  2. In the HTML Setup dialog box that appears, check the box labeled Include HTML Comments on the General tab. You'll see in a few minutes why this is helpful for implementing your menus.

    You'll need to create a new folder on your computer as the root folder for the Web site, along with one subfolder to place the images in.

  3. Choose File ® Export to open the Export dialog box. Navigate to the location you want to use for this Web site, and click the Create New Folder icon. Name this folder pksite for our fictional town of Poinciana Key. Open that folder, click the Create New Folder icon, and name the new subfolder menu_images.

  4. Fill in the boxes in the Export dialog box to match the figure. Change the name of the file to pkmenu in the File Name field. Be sure that you check the option to put the images in a subfolder and select the folder called menuimages as the location for all of the images.

    Click To expand
    The Export dialog box.

    Note

    While this simple menu will not create a great number of images, it's best to always use the images subfolder option when creating pop-up menus.

  5. Match your settings to those in the figure, and click the Save button to export all of your files.

  6. At this point you can save your file and exit Fireworks. You will move on to Dreamweaver to complete the project.

End Sidebar


Summary

In this chapter, you learned how to utilize the power of symbols, instances, and libraries, including how to add your buttons to a library and even make your own custom libraries. You discovered the great Button Editor that automatically adds frames, slices, and codes to your buttons. On top of all this, you saw how to make several different types of navigational elements by using Macromedia Fireworks behaviors. In brief, this chapter covered the following:

  • Symbols, instances, and libraries

  • Using the Button Editor

  • Making custom libraries

  • Making a simple rollover and disjoint rollover

  • Making a navigation bar


Project Summary

The following table outlines what you've done in this chapter that will be used in the Habitat Alert Web site. Some of the images need further work in another section or are ready to use in another application.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
quiz_btn | You learned how to make the different states of a button using the Button Editor. | This button is ready to use in Dreamweaver or Flash. It will be imported into Flash for use in a quiz interface.
btn_learn btn_act btn_support btn_find | You added these text images including an Over state. | These will be optimized and exported in Chapter 23. They will be inserted in Dreamweaver a couple of different ways


Chapter 19: Automating Your Workflow

Download CD Content

Overview

Designers spend many hours developing the graphics and layout of a Web site. Whether you are building the entire site in Fireworks as a mockup or just the graphics, you'll love the automation features. All Web sites at some time must be updated, whether it's a change to the color, text, or links. You'll find that what could be a very time-consuming task can be done easily in Fireworks primarily because of the editability features of Fireworks. You'll find several ways in which to make repetitious jobs easier and quicker by using a batch process or making commands out of frequently used steps. You can also speed up tedious jobs such as changing text, colors, or links by using the Find and Replace feature.


Using Find and Replace

The Find and Replace feature in Fireworks can save you from a lot repetitious tasks when you need to make changes to an image, document, or even a file. To access the Find and Replace panel, choose Edit ® Find (see Figure 19.1). You don't have to have a document open to access this feature.

Figure 19.1: The Find and Replace panel.

In the first field you choose what to search. You have the following options:

  • Search Document

  • Search Selection

  • Search Frame

  • Search Files

The second field drop-down menu contains the options for the type of searches you can make. Each option lists additional choices to narrow down the specific search. The options are as follows:

  • Find Text

  • Find Font

  • Find Color

  • Find URL

  • Find Non-Web216


Using Fireworks Commands

Commands are recordings of what you do in your Canvas. You may be more familiar with macros or actions — commands are similar. It's a way to quickly repeat a series of steps. One of my favorite commands is one to add a thin black border to an image. I do it once and save the steps I took as a command. Then all I do is click on the command name, and the steps are performed automatically. Commands can include other commands, too. For example, you can run a command, perform a few more actions, and save all the steps, including running the command, as a new command.

These actions or steps are recorded in the History panel, which is in the Assets panel group. To make your own commands, follow these steps:

  1. Perform the steps involved in a task that you think you might want to repeat again in another document or to another object.

  2. Open the History panel.

  3. Select the last action in the History list. (This step contains all the previous steps up to and through the last action.)

  4. Click the down arrow to access the History options pop-up menu, choose Save as Command, and name your new command.

    Note

    Sometimes the last step in the History doesn't work as a command. If you save it as a command and it doesn't work, try again by Shift+selecting all the steps and saving again. Be sure to test your command.

That is all there is to making a simple command in Fireworks. The History panel shows the steps or actions you've taken; if anything is below the line in the History panel, it probably will not record properly. You may need to repeat some steps or perform an action in a different way to be able to record it and save it as a command.

Creating a Command to Add a Border to Bitmapped Images

In this section, you make a command that adds a 2-pixel border around bitmap images. These images are full documents and have to have extra Canvas to accommodate a border. To make this command, follow these steps:

  1. Open flowers1.tiff from the chapter21_exercise folder.

  2. From the Effects menu in the Property inspector, choose Shadow and Glow ® Glow.

  3. Use these settings:

    • Width — 2

    • Color — Black

    • Opacity — 100%

    • Softness — 0

    • Offset — 0

  4. Choose Modify ® Canvas ® Fit Canvas, which expands the Canvas by 2 extra pixels all the way around.

  5. Open the History panel in the Frames and History panel group (see Figure 19.2).

    Figure 19.2: The actions performed on this document. The Fit Canvas command is actually a crop action.

  6. In the History panel, Shift+select both actions.

  7. From the History Options pop-up menu, choose Save as Command.

  8. Name the command 2pxborder and click OK. The command is instantly available in the Commands menu. You use this command in a batch process later in this chapter.

  9. Close the image without saving it.

Extending Fireworks with JavaScript Commands

You can also make commands by writing your own JavaScript. The major functions in Fireworks are JavaScript-based; therefore, they can be changed according to the way you work if you can write JavaScript code. This topic is beyond the scope of this book, but you can find out more about writing your own JavaScript commands at the Macromedia Web site (www.macromedia.com/support/fireworks/extensibility.html).

Support for extending Fireworks has been sparse up until now. Fireworks MX 2004 enables developers to use a SWF interface for Fireworks extensibility. You'll see several of the new commands made with this method in the Commands folder. The Arrowheads, Image Fader, and Nav Bar Builder are just a few. Also, the Align panel is made this way. If you are interested in writing extensions for Fireworks, go to www.macromedia.com/support/fireworks/extensibility.html.


Using a Batch Process

A lot of tasks required to develop a Web site are repetitious and tedious. You can automate some of those tasks using a batch process. You can use a batch process for setting optimization settings, for sizing or resizing images, and even for running commands in conjunction with other batch functions.

To run a batch process, follow these steps:

  1. Select File ® Batch Process. You do not need to have a document open to use batch process.

  2. The Batch dialog box opens. Navigate to the batch folder inside the Chapter19_exercisefolder.

  3. Figure 19.3 shows the Batch dialog box. For this example you need all the images, so click Add All. If you only want a few of the images, you'd select the ones you wanted and click the Add button. Notice the selected filenames are all in the blank white area under the file types. You can also choose to add files from a project log or ones that are open as well.

    Click To expand
    Figure 19.3: The Batch dialog box.

  4. Click the Next button. Figure 19.4 shows the Batch options available.

    Click To expand
    Figure 19.4: The available Batch options.

  5. Select Export and click the Add button. The Export Settings field becomes available. Choose JPEG Smaller File. If you want to customize the settings, click the Edit button.

  6. You aren't going to scale in this example, but if you wanted to, you'd add Scale. After doing so a drop-down menu would appear with options to scale to a specific size, area, or percentage.

  7. To run the command for the 2-pixel border in the batch process, click the plus sign next to commands and select 2pxborder. (It's available only if you created it in the exercise earlier in this chapter.)

  8. Click the Add button.

  9. After you finish setting the batch options, click Next.

  10. This last Export Options dialog box lets you pick how and where to save the processed files. The options are as follows:

    • Save in the same location as the originals. (If you do, a new folder is generated.)

    • Choose Custom Location; you can then browse to select the location.

    • Backups, if selected, give you the options of overwriting existing backups or making incremental ones.

    • Save Script enables you to save the batch configuration you just set up.

  11. If you copied the files from the CD to your hard drive, you can choose the same location; otherwise, browse to a new folder. When your selections are made, click Batch. You'll see a progress window. When it's complete, click OK.

  12. Check out your changes by opening one of your batched images from the location in which you saved it. The images now have black borders.

Start Sidebar

Creating Commands in Fireworks by Stephen Grosvenor

With the release of Fireworks MX and now MX 2004, and with the plethora of new features within Flash MX and MX 2004, extensibility is has become a hot topic within the Fireworks community.

Because of the ability to write commands in Fireworks, users of all skill levels can share time-saving scripts, interesting effects, and tricks with the rest of the community. This tutorial shows you how to get your ideas in motion, plan the process flow of your command, design, and create Fireworks MX 2004 commands.

What's the main work involved in designing interface, layouts, Web sites, or just interesting designs? Pure and simple, it's the repetition of mundane or step-orientated tasks. These tasks suppress creative flow and take a lot of the time away from the design process. Many tasks in Fireworks MX consist of three or more steps. These tasks can be easily converted to commands that help relieve the monotony of those procedures and free up more of your time for creative design. Fireworks MX 2004, with the help of Macromedia Flash MX 2004, makes this possible.

This tutorial guides you through the basic process of creating a user-based command. The command created here is a SWF file, exported from Macromedia Flash MX 2004. The steps to design a command — create the script, design the interface in Macromedia Flash MX, test for bugs, install in Fireworks MX 2004 — may involve some investment of time, but the long-term rewards will make the effort worthwhile.

Understanding Fireworks MX 2004 commands

A command in Fireworks MX is essentially a script that tells Fireworks MX 2004 to carry out a particular action or series of actions. Flash-based Fireworks MX commands are essentially these scripts wrapped in a Flash file for ease of use or when user input is required.

Nearly every action you take in Fireworks MX 2004 — from moving an object on the Canvas to creating button symbols — is powered by Fireworks MX 2004 scripting. You have access to this script, and it can be manipulated in Macromedia Flash MX to design forms for receiving user input and creating instructions for Fireworks MX to carry out. While creating the architecture and designing the commands, you are simply harnessing the scripting capabilities of Fireworks MX 2004 and the scripts that it produces as you work.

The ability to create these kinds of commands comes under the general heading of extensibility. More background information about extensibility in Fireworks MX can be found in "Extending Fireworks MX 2004," available in PDF format from Macromedia (www.macromedia.com/support/fireworks/extensibility.html). This documentation can help you understand the scripting concept and the Fireworks MX application program interface (API) routines, as well as guide you in the development of more complex commands.

Creating the command: Back to basics

Now you can turn to the basic steps involved in the command creation process. Similar to most process-based activities, creating a Fireworks MX 2004 SWF file command requires careful planning and investigation prior to starting to draft the command, interface, and code requirements.

Defining the purpose of the command

All user input commands start with a goal and then go through an initial planning stage. This is actually the most important part of the process, and after you finish with that, you're practically finished.

One of the most important parts of creating a user input command for Fireworks MX 2004 is to distill in your mind the purpose of the command. Most of the goals for commands I create are usually spawned from a direct requirement to carry out a task, which would fall into the following categories:

  • The process takes a long time to complete manually.

  • The process consists of many tedious steps.

More often than not, you can consolidate several laborious steps into one simple command; if those steps are actions you perform on a daily basis, you end up saving a considerable amount of time.

In this tutorial, the command's goal is to take a single object on the Canvas and duplicate it many times in a random fashion within your active Canvas. This command would be useful if you needed to bring an unordered and random factor into your design. Having to place copies 20 or 30 times manually into the Canvas by copying, pasting, and creating a random placement of your objects would take a long time. Therefore, this command fits into the "tedious" category: It carries out a mundane task quickly and effectively, enabling you to get on with other parts of the design

The following figure shows a glimpse of the command and what you end up with after you have created it.

The interface of the command that you will create with this tutorial.
Note

For a sneak preview, locate the randomizer.mxp file in the chapter21_exercise folder on the CD-ROM. Double-click the file to launch the Extension Manager, and follow the instructions for Fireworks MX installation. To test it, open a document in Fireworks, place and select an object on the Canvas, and choose Commands ® Randomizer. Click the button with a check mark. You see the object that you selected on the Canvas duplicated many times within the Canvas. Reapplying the command a subsequent time on the same object yields differing results, as the command is set to use random values.

Process flow for developing your first command

After you know specifically what you want your command to accomplish, you create a process –flow, or requirements list. You'll want to identify the goal, the interface components within the command (such as menus, buttons, sliders, dials, text areas, and so forth), and the scripts that the command needs to communicate with Fireworks MX 2004. Because a picture is worth a thousand words, the following figure shows a process diagram for the implementation of this command.

Click To expand
Process flow for creating the Randomizer command.

The following table shows the steps involved for a command and then the implementation.

Steps for Command | Implementation for This Command
Set goal. | Place a selected object onto the Canvas multiple times in random positions.
Determine user interface components needed (some may be created in Flash MX, others in Fireworks MX and imported into Flash MX) | General background Apply button Cancel button
Identify script and language needed to carry out task in Fireworks MX. | Apply command to execute code and duplicate selected object multiple times within the active document. Cancel to end command and return to Fireworks MX 2004.

Following the review of the process flow for your command, you may need to reconsider certain aspects of the command, such as the interface, number of controls required, code requirements, or other facets required for a successful and usable command.

Important points for Fireworks MX 2004 command creation

Never underestimate the power of the interface and how it can affect the user's experience when using your command. The larger the group of people you intend to distribute the command to, the greater the degree of usability testing required and the more thought required in the planning phases of the command's life cycle. On the other hand, if you are distributing to a small team of internal graphic designers, and the command doesn't go outside of the company, less stringent usability testing is required.

The following simple rules will help you when creating commands for distribution to groups of users:

  • Keep it simple — Don't confuse users with a barrage of hidden or cryptic menus. Present them with the options they will need to execute the command. successfully.

  • Keep it clean — Don't clutter the interface with several complicated menus. This will confuse users. If you have suboptions that can be used for your command, place them in an options-type menu that can be accessed when and if the optional items are needed. A clean interface invites the users' curiosity, and they'll be more likely to explore its possibilities and have a better user experience.

  • Keep it focused — Make the command easy to use, as well as useful.

Prior to embarking on getting your hands dirty with the code and testing functionality within Fireworks MX 2004, you should create a composition of how the interface will look. Include all the options that you need displayed and available to the user. If you place too many options on the screen and it looks too busy, attempt to tuck these options away in easily accessible option menus.

The Fireworks MX 2004 History panel

While you are actively carrying out functions in Fireworks MX 2004, Fireworks MX 2004 is tracking your actions and recording them in the History panel.

These actions that are recorded in the History panel are scripts or series of nested scripts telling Fireworks MX what it is supposed to be doing. You can use these recorded actions as the building blocks for creating your commands.

Using the History panel effectively

If you're wondering where you will get ideas for your command's scripts, the History panel is the best place to start.

While you are carrying out actions within Fireworks MX 2004, try to watch the History panel. We will be using the History panel within this tutorial to review scripts involved in placing objects into the Canvas and moving them around.

Follow these steps to access the scripts within the History panel for the actions you are about to carry out:

  1. Create a new document.

  2. Create a vector object (either a rectangle or a circle) within your active Canvas. Move the object to another point on the Canvas.

    Examining the History panel, you can see that it has two entries: The Rectangle tool and Move entry will form the building blocks for the command you create (see the following figure).

    Examining the History panel for building blocks for your command.

    Even though you have just created a vector object on the Canvas, you are not interested in this entry within the History panel, because the command you will create is involved in moving objects around the Canvas in a random fashion.

  3. Select the Move entry on the History panel. Then click the Options pop-up menu at the top of the panel. In the pop-up menu, select Copy Steps (see the following figure).

    Copying a step from the History panel.

  4. Now you can paste the Fireworks scripts and API calls into a text editor. After pasting the step into Notepad (Windows) or BBEdit (Macintosh), you see the nude script that is used to interface with Fireworks MX 2004.

  5. Save this file and name it randomizer_basic.txt.

    Tip

    Keep an eye on the History panel for potential useful commands. Copy the steps and keep the text files in a library or series of libraries. You'll always be able to see the complete steps traced out in Fireworks MX 2004.

Getting down and dirty with the exported scripts

Examining the script yields important information about its function, and how it can be modified to create a useful command within Flash MX 2004.

For example, the following script is moving your selection by specific x and y coordinates across the Canvas. If you were to just use this script on an object on your Canvas, it would move it to x:32 and y:1. You obviously don't want to do this, because you want to introduce a random factor into the equation.

fw.getDocumentDOM().moveSelectionBy({x:32, y:1}, false, false);

Also, you need to be able to copy the selection, paste it, and apply random movement to it. With this in mind, you need to return to Fireworks MX 2004 and return to the vector object you just created and moved on the Canvas in previous steps. Then you need another snippet of script:

  1. Select the vector object previously created within the active document.

  2. Press Ctrl/Option+X to cut the object from the Canvas. Press Ctrl/Option+V to paste it back to the Canvas.

  3. Within the History panel, select the cut–and-paste steps, and repeat Steps 3 and 4 from the previous exercise (see the following figure).

  4. Save the file as randomizer_additional.txt.

    Copying additional copy-and-paste steps from the History panel.

This may seem like a pointless exercise, but it is actually cutting and pasting the object and propa-gating the History panel with the necessary scripts to aid in your command creation process.

Armed with this script analysis, you can move on to the next stage in the design of your SWF command: Macromedia Flash MX 2004. There you create the interface and assign the scripts.

What you now have are the building blocks to your command: the scripts exported from the Fireworks MX History panel. You need to create a functional script that will run from within a Flash MX command.

Cross - Reference

Chapter 22 begins the Flash portion of this book. If you are unfamiliar with using Flash, you may want to get comfortable with it before continuing the next portion of this tutorial.

Stitching the command together in Flash MX 2004

You assembled the necessary scripts from Fireworks MX and created a process flow for the command. Now you need to create the Flash MX command using your building blocks.

Creating the interface within Flash MX 2004

To start, launch Macromedia Flash MX 2004. Then open the Randomizer_Start.fla file (located in the FLA folder in the downloadable tutorial files).

The premade items in this tutorial file act as the basis for creating the command. Of course, when you create your own custom commands, you will have your own images, buttons, and resources already created for the command.

Setting the scene in Flash MX

Within the file you just opened, you will see a blank Canvas with only the noninteractive elements of the command (the logo). You need to build the interface, adding design and functional elements. After the user interaction elements are added, you can assign the scripts to those elements (see the following figure).

The empty interface of randomizer_start.fla within Flash MX 2004.

Setting up the Apply button

At this point in the creation process, the only things that you need to add to the interface are the Apply and Cancel buttons. To further enhance the command, you could add sliders, dials, and other interface components:

  1. In the main Timeline, select the Elements layer.

  2. The Apply and Cancel buttons are within the Library. Choose Window ® Library to open the Library panel.

  3. Double-click the Buttons folder in the Library to open it. Drag the button named Apply onto the Sage, and place to your liking (see the following figure).

    Click To expand
    Adding the Apply button from the Library panel in Flash MX to the active stage.

  4. Click the Apply button to select it.

  5. In the Instance Name text box on the Property inspector, name the instance of the button apply.

    Note

    To preserve the original tutorial file, rename this FLA file as working_copy and save your file to another folder.

  6. Press F9 to open the Actions panel.

  7. As you are using a button, you need to add triggers to capture the execution of the command. The event handler in this instance is the release of the mouse button. On the Actions panel, click the View Options pop-up menu. Add the following code in the Actions panel:

on (release) {

}

This code forms the basis for the button trigger, and your specific code goes in between the two curly brackets to create the behavior for the command (see the following figure). You carry out the same function later in the tutorial for the Cancel button.

Click To expand
Adding the ActionScript to the Apply button.

Adding Fireworks MX 2004 functionality to the button

To add functionality to the button, you need to add Fireworks MX API routines into the ActionScript, including all necessary parameters. As an example of this, the Fireworks MX 2004 API call is the following:

moveSelectionBy({x:100, y:100}, false, false);

This script tells Fireworks to move the currently selected item by 100 pixels along the x-axis and 100 pixels along the y-axis. You can replace these numbers with parameters to suit your needs. To produce a truly random effect, these need to be replaced by random values. What you are now going to do is to add certain API calls to your Flash MX 2004 movie.

To make this a dynamic effect, you need to be able to apply the effect across the whole of the Canvas, whatever the width and height of the Canvas. To do this, you need to retrieve the width and height of the current document. In the Actions panel, you can add a Fireworks MX 2004 API call to retrieve that information. This particular API call cannot be retrieved via the History panel, but it is available from the Extending Fireworks MX 2004 documentation available from the Macromedia Web site. The first line of the following code is a JavaScript-compliant comment that contains information about what the lines of code below it are created to do. Always try to comment your code so you can quickly understand what its doing when you may come back to it.

  // Get the width and height of the current document
     docWidth = MMExecute("fw.getDocumentDOM().width;");
     docHeight = MMExecute("fw.getDocumentDOM().height;");

The second and third lines are Fireworks MX API calls. These are nested within a container, which is then passed to Fireworks MX 2004 for execution.

You could translate this code to read like this:

MMExecute("...Fireworks MX API routine and parameters...");

The nested API call is as follows

fw.getDocumentDOM().height;

This retrieves the height (in this example) of the current document, whereas the previous line retrieves the width of the document. Both are assigned to variables within the Apply button for later use.

You now need to create a number of iterations of the selected object on the Canvas that you want to apply the effect. The following code snippet sits below the code you just entered within the Actions panel:

//The two Parameters below are used to create an array of objects
     //X Iterations
     xNumber = num=Math.ceil(Math.random()*15);
     //Y Iterations
     yNumber = num=Math.ceil(Math.random()*15);

This produces a random number (rounded up) between 1 and 15 for both variables xNumber and yNumber, so it will produce a random number of duplicates across and down within the active Canvas. Using the hard-coded value of 15 here produces between 2 and 225 random objects on the Canvas later in the tutorial. The number here does not have to be 15; it is used to illustrate the command within Fireworks MX. The following figure shows the code in the Actions panel.

Note

You have hard-coded the values here to produce a random number of objects. You could also have user input controls, such as text boxes, dials, or sliders, to control these values.

Click To expand
Adding the ActionScript to the Apply button to get the document height and width and to assign random values to variables.

So far, you have retrieved the active document's width and height, assigned these to variables, and assigned two random numbers between 1 and 15 for the number of times the command is to be repeated.

You now need to begin the process of duplicating the selected object on the Canvas and moving to a new position. This can be simplified in the following steps:

  1. Cut the selected object from the Canvas.

  2. Start a loop based on number of y iterations and create random values for x and y placement of objects based on document width and height.

  3. Start a loop based on number of x iterations. Create random values for x and y placement of objects based on document width and height.

  4. Paste your selection.

  5. Move your selection to a random position.

  6. Close the x loop.

  7. Close the y loop.

  8. Write an End command and return focus to Fireworks MX.

  9. With the Apply button still selected, paste the following line of code that you exported earlier from the History panel below your last line of code within the on (release) event trigger to cut the selected object from the Canvas, noting how you encapsulate it within the container MMExecute(""); to pass the information to the Fireworks API.

//Cut the selected object
     MMExecute("fw.getDocumentDOM().clipCut();");

Next, you need to create a nested loop that takes the variables assigned earlier and creates between 1 and 15 objects on the x-axis and between 1 and 15 objects on the y-axis.

First create the y loop. With the Apply button selected, and beneath the last line of code added in step 4 within the Actions panel, add the following code:

for (y=0; y<yNumber; y++) {

}

This code tells what is encapsulated between the curly brackets {} to be executed while y is less than yNumber (the random number you created earlier). Every time you step through the loop, the variable y is incremented by 1 by the command y++.

Now add the following code into the mix, to create the x loop within the existing y loop (see the following figure):

for (x=0; x<xNumber; x++) {

}

You should end up with the following nested loop:

for (y=0; y<yNumber; y++) {
for (x=0; x<xNumber; x++) {

}
}
Click To expand
Adding the ActionScript to the Apply button to create a nested loop based on random variables.

Now that the basics of the loop are constructed, you need to create variables to hold the position of the object and to define where to place it on the Canvas. To do this, you assign a random value based on the document width and height to work out the relative x and y positions for the object. The setting of these random values needs to be recreated every time the loop is parsed so that they are unique values.

Within the first curly bracket of the y loop, add the following code:

//Create random placement within Y loop for X and Y co-ordinates to place objects
     xPlacement = num=Math.ceil(Math.random()*docWidth);
     yPlacement = num=Math.ceil(Math.random()*docHeight);

This code creates a value from 1 to your maximum document height or width for x and y values. Later you use these new variables (xPlacement, yPlacement) to randomly move your object on the Canvas.

Repeat adding this code within the opening curly bracket of the x loop, renaming the comment accordingly to reflect which loop it is for (see the following figure).

Click To expand
Adding the ActionScript to the Apply button to dynamically assign random values to the variables xPlacement and yPlacement.

Add the following line to the Actions panel just below the code you added earlier for the x loop. This code pastes your object to the active Canvas:

MMExecute("fw.getDocumentDOM().clipPaste('ask user', 'vector');");

Now that you have pasted the object to the Canvas, you need to move it based on the random x and y parameters you create within the x and y loops. Add the following code below the line you added previously:

MMExecute("fw.getDocumentDOM().moveSelectionBy({x:"+(xPlacement)+", y:"+(yPlacement)+"}, false, false);");

This is essentially the script that you exported from the History panel earlier, but with the random values from the x and y loops.

Your command is nearly complete. All that remains is for the Apply button to insert and close the command, as follows:

// End command and release system resources
FWEndCommand(true, "");

This line of code occurs at the end of the code stream and returns the user to the active document after executing the command. The following figure shows the final ActionScript for the Randomizer command.

Note

There is an alternative option for this code, which is changing the true value to false. This option means that the user stays within the command. The double quotes that you see at the end can contain a string of text or a variable, and they are useful for feeding alerts to the user.

Click To expand
Final ActionScript for the Randomizer command within the Actions panel of Flash MX 2004.

Creating the Cancel button

Finally, you add the Cancel button. After establishing the event handler, you need to add only a single line of code. This API call carries out the task of exiting the command and returning focus to the main Fireworks MX environment.

  1. Select the elements layer.

  2. Open the Buttons folder in the Library, and drag an instance of the Cancel button onto the Stage. Give this Cancel button an instance name of cancel in the Instance Name text box on the Property inspector.

  3. Select the Cancel button on the Stage. Press F9 to open the Actions panel. Switch to Expert mode.

  4. Add the on (release) code as you did in Step 7 of the Apply button section.

  5. Add the following code to the Actions panel:

    // End command and release system resources
FWEndCommand(true, "");

Now that you have isolated the requirements for the command, isolated code from the History panel, and created a hybrid ActionScript/Fireworks MX 2004 API code routine within Flash MX 2004, its time to test your command.

Adding error checking

Not every command you create will need error checking within it. However, for this particular command, you need to check that two conditions exist for the interface to appear:

  • There is an open document within Fireworks MX 2004.

  • There is an active selection within that document.

With the first frame of the movie selected, press F9 to open the Actions panel and switch to Expert mode. Add the following code:

//Error Checking Functions
//Steven Grosvenor (c) 2002 www.phireworx.com
//Check for Active Document
function documentchecker() {
     anyDoc = MMExecute("fw.documents.length;");
     if (anyDoc == 0) {
          FWEndCommand(false, "Sorry, you need an open document to run this command");
     }
}
//Check for Active Selection
function selectionchecker() {
     previewinfo = MMExecute("fw.documents.length;");
     if (anydoc>0) {
          var previewnumber = MMExecute("fw.selection.length");
          if (previewnumber == 0) {
               FWEndCommand(false, "Sorry, you must have an active selection to run this command");
          }
     }
}
documentchecker();
selectionchecker();

These two functions (documentchecker and selectionchecker) check for an active document and an active selection within that document and are called when the command is selected from the Commands menu within Fireworks MX. These two functions use the following built-in Fireworks API routines:

fw.documents.length;
fw.selection.length

The results of these API routines are fed back into the function to create conditional checks for the correct conditions to carry on and present the interface to the user. If the conditions are not met, the user is presented with an alert created by the FWEndCommand within Fireworks MX. The alert informs users that they need an active document or an active selection. The following figure shows the final error checking added to the command.

Click To expand
Final error checking added to the command for completion of user experience.

Exporting your command and testing in Fireworks MX 2004

After creating the code for the command, it's time to test your creation by exporting the command as a SWF file directly to Fireworks MX's command folder:

  1. In Macromedia Flash MX 2004, save your working copy FLA file. Then choose File ® Export Movie.

  2. In the Export Movie dialog box, navigate to and select the Configuration ® Commands folder in the Fireworks MX application folder.

  3. Name the file Randomizer.swf. Click Save.

  4. In the Export Flash Player dialog box, use the default settings, making sure to select Flash 6 for the version (see the following figure).

    Click To expand
    Exporting your Flash MX 2004 command into the Fireworks MX 2004 command folder.

  5. Click OK. The SWF file is now located in within the Fireworks MX 2004 application.

Testing your command

You are now ready to take you newly created Randomizer command for a test run within Fireworks MX 2004.

  1. Launch Fireworks MX 2004. Create a new 400-x-400-pixel document (with default settings).

  2. Create a new vector object on the Canvas, and with the object selected, choose Commands ® Randomizer. The Randomizer interface should now appear.

  3. Click the Apply button. Your selected object is duplicated and thrown around the Canvas in a truly random manner (see the following figure).

    Click To expand
    The Randomizer command in action within Fireworks MX 2004.

If you appear to be having problems, or your command isn't working, check your code and the settings for the text input boxes against the code and settings in the Randomizer_final.fla file (located in the source file's FLA folder).

Resources

You should become familiar with the Extending Fireworks MX documentation before creating commands for public distribution. A good, solid understanding of JavaScript and Flash MX 2004 ActionScript will stand you in good stead for creating appealing and useful commands.

For help with packaging a command as an MXP file for the Macromedia Extension Manager, see "Creating and Submitting New Extension" in the Extension Manager's Help menu.

Enhancements to this command

Using the following ideas, the History panel, and a little perseverance, you can create exciting and useful commands within Fireworks MX 2004:

  • Input for x and y iterations (text input, dials, sliders and so on)

  • Random scaling

  • Random rotation

End Sidebar


Summary

In this chapter, you learned several different techniques to automate your workload in Fireworks. You learned how to use the Find and Replace panel for things such as text, fonts, and colors. You also saw how easy it is to create a command by making one yourself. The command you created was then used as part of a batch process that automated a couple of tasks into a process that you applied to an entire folder of images with the click of a button. The tutorial also introduced you to making extensions for Fireworks.


Chapter 20: Designing Animations

Download CD Content

Overview

Animations are often used to communicate an idea; unfortunately, they are sometimes used for no practical purpose and end up only annoying users. The challenge you face when producing animations is to get the illusion of motion in as few frames as possible to keep the file size to a minimum. If an animation takes too long to download, it can take away from its intended purpose.

You probably remember using a flipbook as a child — a book containing many images that appeared to move as you flipped the pages with your thumb. That's the basic foundation of GIF animations: many images shown in sequence to give the illusion of motion, minus the thumb.

The decision to use a GIF animation or another technology such as Flash is a decision you have to make. Some of the determining factors will be your audience and the intended purpose of the animation, along with your budget and the frequency in which you produce animations. One of the major benefits of using Fireworks to produce GIF animations is the cost factor — no additional purchase is required for specialized software. If you produce only a limited number of animations or only short or small ones, Fireworks MX 2004 is more than suitable for the job. Another benefit to using GIF animations is that no additional plug-in is required to view the animations, and the learning curve for creating them is extremely short. Incorporating a GIF animation into an HTML Web page doesn't require any special coding; you simply insert them just as you would any other image. Some of the drawbacks include a limited color palette of 256 colors; making GIF animations unsuitable for gradients, 3D, or photographic animations; larger file size; and no streaming capabilities. Because all the frames of the animation need to be downloaded in the browser before it plays properly, the animation may appear jerky the first time it runs.


Working with Symbols and Instances

Understanding symbols and instances in Fireworks is the foundation of producing animations. Symbols represent an object, a group, or a text block. A symbol may contain many objects, layers, and frames. A symbol can be a graphic, an animation, or a button; each of these symbols is discussed in this section. When you convert an object into a symbol, you access the original symbol from the Library panel. Symbols are extremely useful when you want to reuse the same elements. In Fireworks symbols are necessary, not optional, for producing GIF animations. Symbols are similar to what other programs, such as Director, call "sprites." They animate independently and can be used multiple times throughout an animation.

Instances are copies of a symbol. After an object is converted into a symbol, the object in the document is replaced with an instance. The original symbol is stored in the library and accessible through the Library panel (Assets panel group). When you drag a symbol from the Library into your document, it's actually an instance of the original symbol. If you edit the original symbol, every instance is automatically changed to the edited version, streamlining your workflow.

Types of symbols

There are three kinds of symbols:

  • Graphic — This option is used for objects that appear multiple times in your animation.

  • Animation — An animation symbol can play an animation independent of another animation.

  • Button — Button symbols contain different states, such as Up, Over, Down, and Over while Down.

Creating a new symbol

To make a new symbol, follow these steps:

  1. Choose Edit ® Insert ® New Symbol, or press Ctrl/Command+F8).

  2. The Symbol Properties dialog box, shown in Figure 20.1, opens. Type a name for your symbol, choose the type you want, and click OK.

    Click To expand
    Figure 20.1: The Symbol Properties dialog box.

  3. The Symbol Editor window opens. This is where you can draw, import, or drag in either a vector object or a bitmap object. Draw a rectangle of any color for use in the following exercises. Close the Symbol Editor when you are done.

You now have an instance of the rectangle on your document, which is indicated by the little arrow in the lower-left corner. The actual symbol now resides in the library of this file.

Converting an existing object to a symbol

To convert an existing object to a symbol, follow these steps:

  1. Select an object.

  2. Choose Modify ® Symbol ® Convert to Symbol, or press F8.

  3. The Symbol Properties dialog box opens. Name your symbol, choose the Animation as the Type, and click OK.

Adding animation selections

Now that you have a symbol, you are ready to animate it. To do this, choose Modify ® Animation ® Animation Settings to open the Animate dialog box, as shown in Figure 20.2.

Figure 20.2: The Animate dialog box.

The following options are available:

  • Frames — Type the number of frames you'd like in the animation. The slider only goes to 250, but you can type in any number you want; the default frame amount is 5.

  • Move — Move determines the amount of movement in pixels that each object will move. The value range is from 0 to 250 pixels; the default is 72.

  • Direction — The amount in degrees that the object will move. The value range is 0 to 360 degrees.

  • Scaling — The percent change from the beginning to the end of the animation. The default is 100 percent scaling, which keeps the animation at its original size, up to 250 percent of the original size.

  • Opacity — The percentage of the opacity from the beginning of the animation to the ending opacity of the animation. Use this to do the fade-in and -out effects.

  • Rotation — The amount in degrees that the symbol rotates from the beginning to the end. The values range from 0 to 360 degrees; the default is 0. You also have the option of having the animation rotate CW (clockwise) or CCW (counterclockwise).

Click OK and accept the default settings. Notice the motion path (the blue line with green, blue, and red dot) added to your animation. You see how to adjust that later in this chapter.

Editing symbol properties

After you add the animation properties, you have access to them in the Property inspector. You can also access the Animate dialog box by choosing Modify ® Animation ® Settings. If you want to edit the appearance of the symbol, double-click it and open the Symbol Editor.

Editing symbol motion paths

An animated symbol when selected shows a bounding box and a motion path, which is attached to it. This path indicates the direction in which the symbol will move. The green dot indicates the starting point, and the red dot indicates the ending point. The blue dots in between represent the frames within the path. You can change the Move and Direction values by dragging the handles in the bounding box in your document. You can move the green handle to change the beginning point and the red one to change the ending point. To constrain the movement to 45-degree increments, hold down the Shift key as you drag. See Figure 20.3 to view a symbol with a motion path.

Click To expand
Figure 20.3: A motion path of a symbol.
Tip

You can preview an animation in the Fireworks workspace without having to open a browser. There are VCR-like controls on the bottom of the document window. Click the white right-pointing arrow to play. To preview an animation in Preview mode, click the Preview tab in the document window and then click the Play button.


Working with Frames

The Frames panel is where most of the action is when you are producing animations. What is on each frame determines how the animation plays. By default, the Frames panel is docked with the History panel in the docked area. The Frames panel is the control center for your animation production. From the Frames panel you can add, delete, move, and duplicate, as well as use Onion Skinning and set the looping options. Figure 20.4 shows the Frames panel.

Click To expand
Figure 20.4: The Frames panel with labeled icons.

Adding and deleting frames

To add frames, you can add one at time or enter a specified number of frames. If you have too many frames or if you decide you don't like or need a particular frame, you can delete one.

To add one frame, click the New/Duplicate Frame icon. To add multiple layers, access the Frames Options pop-up menu, shown in Figure 20.4, and choose Add Frames.

When deleting a frame, you delete all its content, with the exception of a frame that has been distributed to Frames. The deleted frame containing a shared frame doesn't affect other frames that are using the shared frame. To delete a frame or frames, select it by clicking the frame or Shift+clicking multiple frames and using any of the following options:

  • After the selection is made, click the trash can icon to delete.

  • Click and drag the frame/frames on top of the trash can icon.

  • Choose Delete Frame from the Frame Options pop-up menu by clicking the down-pointing arrow in the Frames panel.

Moving and duplicating frames

Moving frames works the same way as moving layers; you click and drag the frame to the desired position. If you double-click the frame name, you can rename it. In Fireworks MX 2004, you can give your frames unique names. Moving the frames does not change the names or the numbers assigned.

Duplicating frames is a good way to save time. With a duplicate, you have to alter only the elements that change in each frame. To duplicate a frame, select the frame you want from the Frames Options pop-up menu; then choose Duplicate Frame. Figure 20.5 shows the positioning options. Choose where you want to place the duplicate frame.

Figure 20.5: The Duplicate Frame dialog box.
Note

You can actually duplicate multiple frames by Shift+selecting and then using the Duplicate Frame option from the Frames Options pop-up menu. This saves a lot of time when you want to reverse your animation. The only thing is, the last frame isn't duplicated, but duplicating that one extra frame when you've got a lot of frames is still a time-saver.

Reversing the order of duplicated frames

If you have an animation that, for instance, moves to the right and you want it to slide back to the left, you can reverse the order of frames. Make duplicate frames of the range of frames you want to reverse, and then choose Commands ® Document ® Reverse Frame Range. A dialog box opens asking for the first frame you want to reverse. Enter the number and click OK. Another window opens, and you enter the last frame you want to reverse and click OK.

Sharing layers across frames

The ability to share layers across frames is an important one. When you have a repeating element, such as a background image, it is very inefficient and time-consuming to have to insert it into every frame. Sharing layers across frames automatically places the contents of the selected layer onto every frame present and to all frames added. There is one caveat, though: It is an all-or-nothing proposition.

Note

If you have an animation where at some point you don't want the layer shared, you'll need to draw a rectangle over the shared part to cover it and then add your new content.

To share a layer across all frames, follow these steps:

  1. In the Layers panel, select the layer you want to share.

  2. Access the Frames Options pop-up menu and select Share This Layer.

  3. Repeat for any other layer you want to share.

    Tip

    You can also double-click on the layer name and check the Share across Frames option.

Distributing to frames

You can distribute multiple objects on one layer to individual frames. A good use of this command is to animate text. You can break your text apart, then place each letter in a separate frame to animate. Shift+select all objects in the Frames Options pop-up menu and choose Distribute to Frames. Each object is placed on a separate frame.

Onion Skinning

The Onion Skinning option comes in handy when you need to place an object in one frame in alignment with an object on another frame, or if you need to add to or subtract from an object appearing on another frame. Using Onion Skinning is like placing tracing paper over the individual frames: You can see through to the other frames. One advantage of using the Onion Skinning feature is that you can select the faded objects on frames other than the selected one and edit them. To use Onion Skinning, follow these steps:

  1. Set up a quick file to use just to experiment with Onion Skinning.

    • Draw a shape in your document.

    • In the Frames Options pop-up menu, select Add Frames, type 2, and select At the End.

    • Select Frame 2 and add another shape.

    • Select Frame 3 and add another shape.

    • Select Frame 1 again.

  2. Click the Onion Skinning icon. Figure 20.6 shows the Onion Skinning options.

    Figure 20.6: The Onion Skinning options.

  3. Choose Before and After. In Figure 20.7 you see an icon that resembles an elongated hourglass, indicating which frames are using Onion Skinning. If the No Onion Skinning option was selected, this icon is collapsed and looks closed on the selected frame. To try it, click the Onion Skinning icon and choose No Onion Skinning.

    Figure 20.7: The elongated hourglass shows which frames are affected by Onion Skinning.

  4. If you tried the No Onion Skinning option, go back and change it to the Before and After option again. In the Frames panel click the gray square to the left of Frame 3. Notice how the icon expands to include this frame as well. If you click the Onion Skinning icon, the option automatically changes to Custom.

  5. Click any of the objects. You can edit any of the frames, not just the object in the active frame. The frames made visible because of Onion Skinning are faded.

Looping

Looping sets the amount of times your animation will repeat. You can have it play over and over again indefinitely, choose a specific number of times to loop, or have it not loop at all. No looping simply means the animation plays one time and stops. To set the looping options, click the GIF animation looping icon (see Figure 20.4) next to the Onion Skinning icon, and select No Looping, a number, or Forever. No Looping is the default.

Note

When you preview an animation in the browser, the looping you set doesn't take effect until you export the animation.

Frame delay

The Frame Delay setting determines how long each frame is visible before the next frame appears. The delay settings are specified in hundredths of a second. A setting of 10 means 10 one-hundredths of a second. A setting of 100 means a 1-second delay before the next frame appears. To set the delay settings, double-click the last column in the Frames panel where you see a number. Enter the delay time you want, and click outside of the dialog box to close it. You can also Shift +select multiple frames and from the Options pop-up menu choose Properties to change the delay time. Be sure to check the Include When Exporting option to have the delay change take effect.

Tip

To avoid jittery animations, try setting the first frame a bit longer than normal, which allows extra time for the rest of the animation to load. The biggest drawback to this trick is that when the animation loops, there is a longer delay than normal each time. This isn't a problem in some animations.


Tweening

At first glance, tweening looks the same as the motion paths you saw in the "Working with Symbols and Instances" section at the beginning of this chapter. Tweening is a traditional term indicating a starting point and an ending point that you produce; the computer generates the steps in between, hence the term.

Tweening in Fireworks is performed on two or more instances of the same symbol. The same symbol is a key factor, but you can trick it, as you discover in the second exercise.

Note

The types of tweening available in Fireworks are position, opacity, scale, rotation, and effects. You cannot do shape tweening, which is a gradual changing of one shape into another, where your starting point is one graphic and the ending point another. You can achieve a type of shape tween by using the Transform option and altering a shape by choosing Modify ® Transform ® Skew.

Applying a multiple tween

In this exercise, you do a fade effect by applying a tween with opacity, position, and scale by following these steps:

  1. Open a new document (File ® New). A size of 300 pixels by 300 pixels will work.

  2. Select any one of the drawing tools and draw an object: a circle, star, or something similar.

  3. With the object selected, choose Edit ® Insert ® Convert to Symbol (F8) and choose Graphic symbol. The symbol is added to the library and an instance is in your document, which is indicated by the little arrow in the corner.

  4. For the second symbol, select the Pointer tool. Press the Alt/Option key, and click and drag a copy to the desired location to produce a duplicate instance and the ending point of the tween.

  5. Select only the ending point instance of the symbol, choose Modify ® Transform ® Scale, and drag one of the corners to increase the size.

  6. To change the opacity, select the starting instance, and in the Layers panel move the opacity slider to 0. This makes the beginning instance invisible and gradually increases to 100 percent at the ending instance.

  7. Shift+select the beginning and ending symbol instances, then choose Modify ® Symbol ® Tween Instances, and check Distribute to Frames. In Figure 20.8, you see the Tween Instances dialog box showing the default frames of 10. You can change this. Be sure to check the Distribute to Frames option, which places each in-between instance on its own frame. If you neglect to check this option, all the in-between instances will be in the same frame.

    Figure 20.8: The Tween Instances dialog box.

    Note

    This exact same effect can be achieved using only one symbol by converting an object to a symbol (F8) and choosing Animation. In the Animate dialog box, set the Opacity to 0-100, alter the scale, and set the direction. You can adjust the direction by adjusting the motion path if you need visual help in setting the direction.

Tweening Live Effects

Tweening Live Effects is a method that cannot be produced using the Animated Symbol dialog box. To tween Live Effects, follow these steps:

  1. Open a new document (File ® New). A size of 300 pixels by 300 pixels will work.

  2. Select any one of the drawing tools and draw an object: a circle, star, or something similar.

  3. Convert to a symbol (F8) and drag out another instance of the symbol.

  4. Here is where things start to change. Select the beginning instance and click the + sign in the Property inspector to access the Effects menu. Choose Adjust Color ® Color Fill. Select a color you like, but be sure it is different from the ending symbol.

    Note

    You may be wondering at this point how this can be done, that is, creating tween symbols that are different. You may recall that tweening can only be performed on two instances of the "same" symbol. If you were to try and tween these two instances right now, it would not work. To make the two instances the same, the same effect has to be applied to both or all symbols that will be tweened.

  5. Select the ending instance from the Effects menu. Choose Adjust Color ® Color Fill. This is where you fool the symbol into thinking it is the same. The same effect is added; move the opacity slider to 0, and no "visible" effect is applied.

  6. Shift+select the beginning and ending symbol instances, and choose Modify ® Symbol ® Tween Instances. Accept the default frames, check the Distribute to Frames option, and click OK. Play your animation to see the gradual color change.

    Note

    You can use more than two instances of a symbol when tweening. If you place instances in other locations, the tween follows a path according to the stacking order. The closest to the Canvas is the beginning point of the tween. Just remember that when you tween Live Effects, you must apply the effects whether they are invisible or not to every instance. You can make transformations such as width, height, skew, opacity, and blending modes separately to individual instances.

Start Sidebar
Using Numeric Transform

Transforming the size of an object can produce interesting effects. You can use the Numeric Transform option to change the size of an object frame-by-frame or to distort the shape. All you have to do to access the Numeric Transform dialog box is select the object you want to transform and choose Modify ® Transform ® Numeric Transform and enter in the parameters you want.

End Sidebar


Importing and Exporting Animated GIF Images

Getting the image ready to export is pretty easy. The main thing you'll want to concentrate on is optimizing the images so you get the smallest file size possible. Chapter 21 discusses the many optimization options. And importing an animated GIF image is the same as importing any other image.

Importing

You can import GIF animations from other programs or users into Fireworks, where they can be edited or deconstructed for learning purposes. If you import an existing GIF animation into a current document, it loses its Frame Delay settlings and it becomes a symbol of the current document. If you want to retain the delay settings of the original GIF animation, open it instead of importing it.

To import a GIF animation, follow these steps:

  1. Choose File ® Import.

  2. Locate the file and click Open. You can navigate to the chapter20exercise folder and import the chesire.gif if you'd like.

  3. A dialog box opens asking to add the required frames for the animation. Click OK. Any additional necessary frames are added.

Exporting

To export your animation with motion, you need to be sure that you have set it as an Animated GIF. Open the Optimize panel and choose Animated GIF. The Optimize panel is also the place to reduce your colors as much as possible to reduce the file size. Chapter 21 discusses how to optimize in more detail. To export as a GIF animation, follow these steps:

  1. Choose Animated GIF in the Optimize panel.

  2. Choose File ® Export.

  3. In the Export dialog box, name the animation, choose where you want to export, and click Save.

Your animation can be used in Flash and further edited there. To export as a Flash SWF file, follow these steps:

  1. Choose File ® Export.

  2. Choose where you want to save the file.

  3. Type in the name of your animation.

  4. Click the down arrow under Save as Type, and select Macromedia Flash SWF.

  5. Click the Options button, choose the options you want, and click OK.

  6. Click Save.

Start Sidebar

Animating Images for the Web, by David C. Nicholls

We're all familiar with the myriad of animated GIF banners that populate many Web sites. Most of them look the same because it's difficult to think up a novel animated GIF. Designers simply blink text on and off or move image objects about, often because they're working within a limited file size for the average animated page banner specification. But it's not necessary to follow the usual routine. In fact, it's a good idea not to do so, because most Web site visitors ignore the usual animated banners in the same way they ignore many TV commercials. Thinking up a way to attract the viewer's attention is important but not easy.

By completing this tutorial, you learn skills associated with the following tasks:

  • Creating a series of layers with graduated fades

  • Distributing these layers to frames and building the animation

  • Optimizing and saving the animated GIF

You will also see how to do these same things in earlier versions of Fireworks, which lack the transparent gradient fill capability.

Some designers resort to Flash to produce complex moving images. However, not all visitors have Flash players installed in their browser, and it's hard to resist the temptation to create really intricate animations, resulting in large files and slow downloads. This section demonstrates that you can create an interesting animation by using the simple animated GIF, which works in all browsers and doesn't have too large a file size.

In this tutorial, you are shown how to draw a cat and are given plenty of practice with the Pen tool and manipulating curves. You also learn how to use masks and utilize the new gradient transparency to enhance your animation. You then add the frames and settings to make the cat fade in and out and still maintain a reasonable file size for a fast-loading animation.

Designing the animation

The designing of the animation usually consumes more time than the actual animating does. Thought and preparation are required to produce a good-quality and effective animation.

The concept

This is the hard part — thinking up an animation that's interesting and at the same time avoiding a large file size. The trick is to think outside the nine dots. In this example, I have no particular client in mind, just the intent to do something different. I've chosen the Cheshire Cat that appears (and disappears) in the book Alice's Adventures in Wonderland by Lewis Carroll.

A bit of background. In her adventures in Wonderland, Alice meets a host of strange characters. One of these is a talking cat — the Cheshire Cat. As it talks to Alice, it disconcertingly starts to disappear, leaving only its grin. You're going to animate this disappearing act.

Preparing the vector drawing for animation

You have been supplied with a vector copy of a cat, but you'll first need to convert it to a bitmap. This may seem odd, but there's a reason. One of the possible animation options is to have the cat disappear to a background pattern. For this, the components of the cat need to be filled with a solid color, so that it initially covers the background pattern. However, as some of the cat body parts aren't completely closed vector shapes, the fill process doesn't fill the whole animal, and bits of background show through. It would be possible to join all the vector shapes into a single closed vector object and fill the result. But this would involve more fiddling than just turning the cat back into a bitmap requires.

  1. Open the vecto_rcat.png image (chapter20_exercise folder).

  2. In the Optimize panel, change the export file format to TIFF24.

  3. Choose Modify ® Canvas ® Canvas Color, and make the Canvas white if it isn't already.

  4. Choose Export, name your file, and save it. A copy is in the Chapter 20 image folder named cat.tif. You have not made changes to the original vector file, since you saved it with a new name.

  5. Now open your saved image (or use cat.tif). Then open the saved vector file again (vector_cat.png) if you've closed it.

  6. In the vectorcat.png file, select the grin group, and convert it to a bitmap by choosing Modify ® Flatten Selection.

  7. Copy the flattened selection and paste the grin over the cat bitmap (the cat.tif you opened). Position the copied grin over the bitmapped one.

  8. The cat has two grins now, because you need one to remain as the rest of the cat fades away. For the moment, hide the second grin. (Click the appropriate eye icon in the Layers panel.)

  9. Select the Magic Wand tool, and in the Property inspector, apply the following settings:

    • Tolerance — 32

    • Edge — Anti-alias

  10. In the Layers panel, select the bitmap layer. Using the Magic Wand tool, select the area outside the cat's body.

  11. Delete the selection using the Delete key, and change the Canvas color (Modify ® Canvas ® Canvas Color) to transparent. Now you have a solid cat on a transparent background.

  12. To set the cat on a textured background, deselect the current selection (Ctrl/Command+D), use the (vector) Rectangle tool, and draw a rectangle that covers the entire Canvas.

  13. In the Property inspector, set these values:

    • Stroke — None

    • Fill — Solid, mid-gray (#666666)

    • Texture — Hatch 5 and the percentage to 40%

  14. In the Layers panel, drag the new filled vector rectangle below the cat image. The cat should now appear against a patterned background, as in the following image.

You can use any other sort of background — for example, a bitmap image — but this texture is a simple way to demonstrate a cat fading to a background. This choice of background pattern also turned out, by trial and error, to be quite efficient when converted to a GIF.

Bitmap cat with background.

Fading the cat

You want to make the cat slowly fade, starting at its hind end, with the fade gradually covering the whole animal, moving toward the head, and finally leaving only the grin.

There are three main ways to do this. One, which works in Fireworks 4, Fireworks MX, and Fireworks MX 2004 is to use a Mask group. The second, which works in MX and MX 2004 only, is to overlay the cat with a white-to-white radial transparent gradient. You can apply the latter to an outline of the cat and overlay only the cat, or to a rectangle covering the whole Canvas.

The third way, and by far the most interesting, is possible only in Fireworks MX and MX 2004. First you select parts of a bitmap according to transparency information in a gradient fill vector object. Put another way, you create a vector object, fill it with a suitable gradient with variable transparency, and use that transparency information to selectively etch away a specific bitmap (the cat) while leaving everything else (the background) unchanged. Using this method, you can make the fading bitmap images very quickly and easily, and it this method the tutorial explores in detail.

Because the third method actually uses the same techniques as the first two, you'll be shown those options as well and then build upon each one. This way, you learn to do all three at once.

Fireworks MX 2004 with instructions for Fireworks 4, Mask Group Method

Fireworks enables you to create a vector object with a black-to-white gradient fill (linear, radial, ellipse, and so on) and apply it as a mask to the image you want to fade. A simple approach is to draw a rectangular vector object that covers the entire window, set the fill to radial, and set the colors of the gradient to black and white. Then you select the rectangle and the cat beneath it and apply as mask (Modify ® Mask ® Group as Mask). The cat pixels remain where the mask gradient was white and fade completely where the mask was black. You have to adjust only the location of the black and white parts of the mask rectangle to suit the intended fade. (In Fireworks 4, black areas are visible and white are transparent. It's the opposite in Fireworks MX 2004.) You start with a background, but you won't be using it in the end.

  1. Open the TIFF image of the cat with a background (bitmap_cat.tif).

  2. Using the Rectangle (vector) tool, draw a rectangle that exactly covers the cat image frame. If the fill was already set to solid, the cat disappears beneath a rectangle, which appears in the color you set the fill to (most likely white, but it will be whatever you left it at last).

  3. Next you set the Fill to Radial, and edit the fill (click the Fill Color box) so that the right end of the fill spectrum is black and the other is white. You want the rectangle to be white in the center and black at the edges. (Note: The reverse is true for Fireworks 4.) Accept the settings shown in the following image.

    Setting the gradient colors.

  4. Select with the Pointer tool. The fill handles appear on the black bull's-eye. Drag the circular handle about halfway up toward the upper left corner, and the square handle down to the lower-right corner, as shown in the following figure.

    The gradient mask with the circular handle moved.

  5. Now for the masking. In the Layers panel, select both the rectangle object and the cat (Shift+click in the Layers panel). Group them as a mask by choosing Modify ® Mask ® Group as Mask.

    Part of the cat reappears where the white parts of the rectangle were. But it's not centered where you want it.

  6. Using the Pointer tool, in the Layers panel, select the vector mask with a pen icon on the right in the grouped objects. A yellow line appears around it when selected. When you do this, the fill handles reappear over the cat.

  7. Drag the circular handle over the cat's grin and the square handle in from the lower right corner. As you move the square handle, you see the effect of the mask change. Play with the location of the square handle to make different parts of the cat fade out. You'll immediately see how you can create a gradual fade by progressively moving the square handle from the lower-right corner in a counterclockwise spiral inward toward the cat's grin.

That's all that is necessary to build the various animation frames using the Group as Mask process. Next you look briefly at the transparent gradient overlay process.

Transparent gradient overlay method

The previous method of masking works, but if you have Fireworks MX 2004, the method demonstrated in this section utilizes gradient transparency. It is the method you would use if you were using a background image.

  1. Instead of creating a black-to-white radial gradient, fill in the rectangle as you did previously, and then set both color chips in the Gradient pop-up menu to white.

  2. Click the opacity chip on the left and set the opacity to 0 (transparent), leaving the opacity on the right end at its default 100%. This action fills the vector rectangle with a radial white fill with varying transparency. Sitting over the top of the cat bitmap, it partly fades it to white. The only problem is that it also hides part of the background pattern, as shown in the following figure.

    Transparent gradient overlay.

If you were building an animation of a cat fading to a plain white background, the background being partially faded wouldn't be a worry, and the technique would be fully effective. Which leads you to the third way to fade the bitmap: You use the transparency information in the white rectangle as a means of etching away the bitmap.

Etch-away-the-bitmap method

Now you use the transparency information to selectively etch away a specific bitmap (the cat) while leaving everything else (the background) unchanged. This is actually very easy to do.

  1. In the Layers panel, select the cat bitmap.

  2. Press and hold the Ctrl/Command key. Click the white rectangle in the Layers panel (on the actual thumbnail). As you do this, a small rectangular cursor appears. This action selects part of the bitmap, which shows as a selection border on the bitmap image. In fact, the pixels are not all selected equally, but according to how transparent the same location is in the white rectangle, as shown in the following figure.

    Click To expand
    Selection marquee.

  3. Hide the white rectangle layer (use the eye icon in the Layers panel). Repeat Step 2 and press the Delete key; then press Ctrl/Command+D to deselect. As if by magic, the bitmap fades into the background exactly as you need, as shown in the following figure.

    The cat faded to background.

The location and extent of the fade effect in the bitmap is controlled by the transparency gradient in the white rectangle. This is an effective way to fade images, and you should work through it carefully to master it.

Creating the animation

So let's get down to the task of creating the animation. The first thing you need to do is to work out the number of frames you want. Some animations use a lot of common content between frames, which means a small file size for a given number of frames. Animations where most of the details change from one frame to the next will have a large file size for the same number of frames. This animation is a fade, so it's an intermediate case.

The compromise that's necessary is to strike a balance between a smooth fade and a small file size. You can experiment with this, but set the first target at 12 frames and see how large the animation is.

You also start with a white background to minimize detail in the GIF and, thus, file size. (The textured background adds significantly to file size, even though it looks good.)

  1. You start with the bitmap cat PNG file, which should have the following layers, from the top: the second grin (hidden, but now make it visible again); the white rectangle with the transparent gradient fill; the bitmap cat image; and the background texture rectangle (hidden, and keep it hidden). The Layers panel should appear as shown in the following image.

    The Layers panel.

  2. Turn off the visibility of the background pattern rectangle, and make sure the Canvas color is set to white (Modify ® Canvas ® Canvas Color).

The process from here on in is purely mechanical — to create a series of bitmap cat images that fade progressively in toward the cat's nose. The first frame is the model for the subsequent frames. Here's the sequence:

  1. Select and duplicate the cat bitmap image (Ctrl/Command+Shift_D or Edit ® Duplicate). Hide the duplicate image in the Layers panel: This is your reference cat image, which you use as the source for all the fading frames.

  2. Enlarge the window to about twice its default size. Select the white rectangle, and using the Pointer tool, drag the square fill handle down and to the right, off the Canvas, for a distance of about twice the length of the cat.

  3. Select the visible cat bitmap image. Hold down the Ctrl/Command key (see image), and click the white rectangle thumbnail in the Layers panel, as before.

    Click To expand
    The bitmap cat selected.

  4. Press the Delete key and deselect the image. Rename the modified bitmap frame 2, and temporarily hide it.

  5. Repeat the process, duplicating the original bitmap again. Select the white rectangle and drag in the square fill handle inward toward the cat's nose, and a little upward. Then repeat the "etching" process, naming the modified bitmap frame 3, and so on.

    You might have noticed that this process uses only one layer (the white rectangle) to create all the frames and that you adjust it step-by-step as you go. You use copies of the original cat bitmap as source material for the frame.

    Keep this process going until you have moved the white rectangle fill handle through a succession of shorter lengths, in a slow counterclockwise arc, fading each successive duplicate of the original cat bitmap, until the fill handle is close to the cat's eyes. Adjust the change in the fill handle length and position so that you finish up with ten, progressively faded bitmaps.

  6. When you have Frames 2 through 11 done, save a safe copy of the file; then delete the white rectangle, which has served it purpose. (Select it and press the Delete key.)

    The original, unfaded bitmap, the ten, progressively faded bitmaps, named Frames 2 through 11, and the grin, are the raw material of the animation. One is the basis of each frame. Every frame also needs a copy of the spare grin, because you don't want that to fade with the rest of the cat. The final frame will be the grin by itself.

What you must do next is distribute the bitmaps to different frames. Fireworks animates an image by swapping from one frame to the next in a specified time. You can view the different frames using the Frames panel. Initially, there is only 1 frame, the one you have been working in, and you need 12 for the complete animation. These are created automatically when the layers are distributed to frames.

  1. You start with the Layers panel open, showing the grin at the top layer, followed by layers named frame 10, frame 9, and so on, with the original unfaded bitmap cat on the bottom layer. These should all be visible (the eye icon showing). If not, make them so. If the background texture rectangle is present as the bottom layer, hide it. Next, select all the layers (except the background rectangle) by clicking on each in sequence while holding down the Shift key.

  2. The next step is to distribute these 12 layers each to a separate frame. Open the Frames panel, and with the 12 objects still selected, click the Distribute to Frames button (arrow and filmstrip icon, lower right). Each layer has been moved to its own frame.

  3. In the Frames panel, select Frame 12. The grin layer is the only image visible in the frame. Click the grin image to select it. Then, in the Frames panel, click the panel Options pop-up menu (top right), and select Copy to Frames. In the pop-up box that opens, accept the default to copy to all frames. This action sends a copy of the grin to every other frame.

  4. The main part of the animation is done. Under the main image window, you will see the animation controls. Click the forward arrow and watch the animation preview. The frame duration defaults to 7/100 second, but it performs better if you set the delays on the first and last frames longer. In the Frames panel, select Frame 1, double-click the 7 in the second column, and set it to 50. Set the delay for Frame 12 to 100 in the same manner. Now preview the animation again. This gives quite a nice animated vanishing cat. If you had created more frames — to make the fade more gradual — the effect would be smoother, but at the cost of a larger file size — which brings us to exporting.

Exporting the animation

You now export the animation.

  1. First you must decide whether the animation is going to cycle through once, more than once, or indefinitely. For trial purposes, it is probably best to select Forever. To change this, in the Frames panel, click the Loop icon at the bottom left of the panel. This opens a pop-up menu to set the animation repetition.

  2. With this chosen, you export the animation as an animated GIF. In the Optimize panel, select Animated GIF in the Export File Format drop-down list. Use the following settings:

    • Web Snap Adaptive

    • No Dither

    • No Loss

    • No Transparency

    • 128 colors

  3. Export the file as normal (File ® Export) and save with an appropriate name. The resulting file size is about 55K for Web Snap Adaptive and 128 colors, and 27K if you want to export as Web 216.

  4. These are both too large for practical use as a Web animation, but there is a way to reduce the file size. You have a very large cat! The image you've been working on is around 300x250 pixels, which is much larger than needed on a Web page. If you reduce the size to 150x125 pixels (Modify ® Canvas ® Image Size), the file sizes reduce to 10K for the two options. This is much more acceptable.

  5. As a final step, it's worthwhile to preview the animation in a browser to see exactly what it looks like and to check the timing and looping. Choose File ® Preview in Browser and select the browser you prefer.

And there you have it — a vanishing Cheshire Cat. There's only one more problem: Where do you use a vanishing Cheshire Cat, except on an Alice in Wonderland Web site?

Note for the Alice in Wonderland purists: The Cheshire Cat that Alice meets actually disappears completely after a while. If you want to follow the cat's behavior to the letter, add a final completely blank animation frame after the grin-only frame.

Modification

If you want to use the background texture, select Frame 1 in the Frames panel, make it visible, and select the background texture rectangle. Then in the Frames panel, using the Panel Options button, copy to frames as before. This copies the background rectangle to each frame, but as it is copied to the top layer in each frame, it is necessary to select each frame in turn in the Frames panel, and in the Layers panel, to drag the background rectangle layer to the bottom.

If you were to export now, the file size would be about 68K. If you change the Optimization parameters to Web 216, with a dither of 100%, the file would be around 61K. If you reduce the cat, as in step 4 in the previous section, the file will be about 22K.

End Sidebar
Start Sidebar

Animated Banner, by Japi Honoo

In this tutorial, you make a frame-by-frame animation with a couple of animated symbols. This banner is for the Habitat Alert organization for promotional purposes.

  1. Choose File ® New and use a size 264x60 and a background color of #003366. Click OK.

  2. In the Layers panel, double-click the name, type heron, and check the Share Across Layers option.

  3. Choose File ® Import, navigate to the chapter20_exercise folder, and select blueheron.png. Click the document to place it in the center.

  4. Choose File ® Import, select goldheron.png from the chapter20exercise folder, and click in the document. Move the gold herons off the Canvas and to the left of the document. You won't be able to see the images, but you'll see the colored squares of the group. Line up the colored squares that are on the right side of the goldherons selection box, just beyond the left side of the blue Canvas.

  5. Select the blue herons and note the y coordinate. Click the gold herons and place them at the same y coordinate. While the gold herons are still selected, press F8 to convert them into a symbol. In the Symbol properties dialog box, choose a Type of Animation, name it gold, and click OK.

  6. In the Animate dialog box, change the Frames to 10, the Move setting to 185, and click OK.

  7. From the Library panel, drag a copy of the gold symbol and place it to the right just off the edge of the document at the same y coordinate as the other herons. Choose Modify ® Animation Settings, and change the Direction setting to 180. Use the settings shown in Step 6.

  8. Select Frame 10 to see how the herons line up. They should cover the blue, and the gold should be on top. If they aren't, make a slight adjustment by moving the end red circle of each of the symbols until they line up.

    I selected both animated symbols to demonstrate the location and how they should look in the following image.

    Click To expand
    The motion guide is adjusted.

  9. In the Optimize panel, change the File format to Animated GIF, and test your movie in a browser. Notice that it's moving much too quickly.

  10. In the Frames panel, Shift+select Frames 1 to 9 and double-click the number. Enter 25 and check Include when Exporting. Do the same for Frame 10, except change its delay to 50.

  11. Save your file.

Now add text to the banner.

  1. Add a new layer and name it text.

  2. From the Frames Options pop-up menu, choose Duplicate Frame and Select after Current Frame (the new frame is Frame 11). Click the Add a New Frame icon (plus sign on bottom). This is Frame 12. Change its delay to 50 as well.

  3. Select the Text tool and change the font to Arial Black with a size of 36, a color of #A8B6C2, a stroke color of #003366, and Smooth Anti-Alias. Type save it and change the Horizontal Scale setting to 127.

  4. Click the Effects plus sign and choose Shadow and Glow ® Inner Shadow with the settings of Distance 1, Softness 4, Opacity 655, and color of black. Center the text.

  5. Add three Duplicate frames after the current one, changing the delay for each to 20. Select Frame 13 and change the Opacity to 80%.

  6. Select Frame 14 and change the Opacity to 40%.

  7. Select Frame 15 and change the Opacity to %. Also add the word or. Use the same font settings as you did for the save it text, except change the color to #B2B625. Don't forget to add the stroke and the inner shadow. Place it in the center over the save it text and change the Opacity to 40% (Frame 15).

  8. Add four duplicate frames:

    Select Frame 16, delete the save it text, and change the opacity to 80%.

    Select Frame 17, delete save it and change the opacity of or to 100%.

    Select Frame 18, delete save it, and change the opacity of or to 80%.

    Select Frame 19, and delete all text.

  9. Add a new frame and type the words lose it with the same font settings as the word or. Change the opacity to 40%.

  10. Add five duplicate frames with these settings:

    • Frame 21 — Opacity 80%

    • Frame 22 — Opacity 100%

    • Frame 23 — Opacity 80%

    • Frame 24 — Opacity 40%

    • Frame 25 — Opacity 20 %; type the word forever in gold with the same font settings, and change its opacity to 40%.

  11. Add four duplicate frames and make these changes:

    • Frame 26 — Opacity 80%; delete the text lose it.

    • Frame 27 — Opacity 100%; change the delay to 60 and delete the text lose it.

    • Frame 28 — Change the delay to 25; delete the text lose it.

    • Frame 29 — Delete the text lose it. Copy and paste the text two times; then move one copy up about 13 pixels (press the arrow key 13 times and then down 13 for the second copy. Change the opacity of the copies to 40%.

    Placement of the forever text.

  12. Add a duplicate frame for Frame 30. Delete the center dark word forever, and move the other two copies almost to the edge, as shown in the following.

    New placement of the forever text.

  13. Test your animation.

  14. To use as a banner that will connect to a Web site when clicked, add a hot spot over the banner; then add the URL in the Property inspector.

  15. Save the file and export as an Animated GIF.

On the CD-ROM

A copy of the source file for this tutorial is in the chapter20_exercise folder and is named banner.png.
End Sidebar


Summary

In this chapter, you learned how to use the animation tools in Fireworks. You explored the Frames panel and made symbols, used instances, and accessed the Libraries panel. You also learned how to edit the animation, add tweening effects, and use Live Effects.


Chapter 21: Slicing and Optimizing

Overview

This chapter explores how to slice (divide) your designs and apply optimization settings. Slicing an image or document is one of the most important things you will do in Fireworks. The decisions about whether to slice your document, where to slice your document, and how to slice your document all contribute to how, and sometimes whether, users view your Web pages. Slicing when needed allows for better and specialized optimization to decrease file size. Using slicing techniques, which ultimately reduce the file size, is vital to the final display of your project if you have an image that fits the profile of images needing slicing.

After your slices are defined, you learn how to optimize them. Optimization, or getting your image to the smallest possible size while retaining an acceptable quality, is one of the most important factors in determining how fast your Web page loads. Not only can you export with GIF and JPEG images in the same document, but you can actually apply different settings to specific areas of a JPEG image.

After the images are sliced and optimized, you will discover the many methods and options available in Fireworks for exporting your images or entire Web pages.


Working in the Web Layer

The Web layer is the special layer that contains all the hot spot coordinates and slices that you've made in your document. Everything on this layer is shared across all layers, meaning that if a slice or hot spot encloses elements that are actually on different layers, the slice or hot spot is active on each layer. The slice or hot spot activates the behavior you have assigned to it. You can't delete the Web layer, and you can't add another one.


To Slice or Not to Slice

Before beginning to slice your images, you need to understand why it needs to be sliced or whether it needs to be sliced at all. Many people mistakenly believe that slicing increases loading speeds. This usually isn't so. In most cases, the page actually takes longer to load; because every slice is being requested from the server, there are more hits to the server. Slicing does make the page appear to load faster, because the user can see parts of the image before the whole thing loads.

Many reasons exist to slice an image:

  • If an image is over 20K, it needs to be sliced to form the perception that it's loading faster.

  • If you need to export some slices as JPEGs and some as GIFs, or GIF animations within the same image, slicing is the best way to go; that way some of the slices can be a different format to suit your needs.

  • If you want to attach behaviors, such as rollovers, to an area, it has to be a slice or hot spot object.

  • Slices help the loading of your Web pages when you have a logo or other repeating elements in the Web site if you place the same slice on every page using the repeating element.

    Note

    When you have a logo or element that is repeated often within your site, be sure that the element or slice is linked to the same image file. That way, after the server retrieves it one time, it is in the browser's cache. If you use the same image and put it in different folders, the server has to fetch it each time.

Another wonderful advantage of slices is that if you need to update one section or slice, you don't have to redo the whole image. For instance, suppose you have a complicated sliced image that you have optimized, sliced, exported, and incorporated into every page on a large site. You then discover that one of the major slices contains a misspelled word. You can simply fix a copy of the one sliced image, optimize it, export it, and upload it to replace the image with the error.


Slicing Tools

The slicing tools are the Rectangle, Circle, and Polygon Hotspot tools. The Rectangle Slice tool works the same way as the other Rectangle and Circle Hotspot tools in Fireworks; click and drag over the area you want to define. The Polygon Slice tool also works the same way as the other Polygon tools in Fireworks; click a starting point and click to add points to define a shape.

You can define a polygonal shape with the Polygon Slice tool, but the polygonal shape cannot be exported as a polygon shape. All slices are rectangular, without exception. Fireworks automatically adds as many rectangles as necessary to maintain your defined polygon shape. These rectangles fit together with the polygon shape enclosed.

Using the guides

Before you actually begin to slice an image, you need to set up a few aids for yourself. Using guides is an efficient way of defining your slices. Before placing your guides, you need to know how you plan to use the images in your layout. For the Habitat Alert site, I know I want the logo as a separate image; the buttons will be exported as a whole, the bird area as an image, the entire circle area as an image, the home button as an image, and the top left corner of the curve as an image. The area behind the logo will be used as a tiling background.

Guides not only provide a visual aid but also aid your selection if you have the Snap to Guides option checked, allowing selections within a set amount of pixels (determined by you) to snap to the guide automatically.

Note

In the Dreamweaver section, you define a site and add folders for the site's structure. On the CD is a site folder you can use for the exercises in this chapter. Save the habitatalert site to your hard drive; then continue. We've had to set up these different folders, since this book is not necessarily read in a linear fashion.

To set up guides, follow these steps:

  1. Habitat Alert site Open ha6.png file from the habitat_alert\designfiles\Fireworks folder. To enable the guides, the rulers have to be visible. From the menu bar, choose ViewÍRulers.

  2. Choose View ® Guides ® Snap to Guides.

    Note

    You can set your own preferences regarding how the Snap to Guides function responds. Choose Edit ® Preferences and click the Editing tab. In the Snap Distance dialog box, enter the number of pixels from the guide your object needs to be before it snaps to the guide. To change the color of the guideline, choose ViewÍGuidesÍEdit Guides, and change the color.

  3. To place guides, click in the vertical ruler area and drag a guide into your document. The guide will not be visible until you begin to pull it onto your document, at which point you will see a green line, which is the default color. In this document you will also see red lines, but disregard them for now. They are slicing guides generated because of the button slices made using the Button Editor.

    Note

    If you pull a guide onto your Canvas and you don't see it, it is probably because you pulled off the Canvas. Be sure that you drag into the Canvas area, not above or below it.

  4. Double-click the vertical guide you just pulled into the document. In the Move Guide dialog box, type in a position of 210 and click OK. Repeat, except position the second vertical guide at 498. Figure 21.1 shows the guides in place. They've been bolded for illustrative purposes to distinguish them from the red slice guides.

    Click To expand
    Figure 21.1: Four guides placed to aid in slicing the document.

  5. To set precise positioning of the horizontal guide, double-click it and type 74. Repeat for a second guide except change its position to 117. This places the guide at the top of the dark line and shadow of the header area.

  6. Save. A copy is saved in the designfiles\Fireworks folder and is named ha_guides.png.

Defining the slices

Slices are needed to export specific images or parts of images in a document. A slice (or hot spot) is also needed when you want to add a behavior. One of the biggest advantages of defining a slice is that you can individually optimize each slice. This means that you can have JPEG and GIF images in the same document. You can also use different compression settings for each image if desired.

To begin slicing the Habit Alert layout, follow these steps:

  1. Habitat Alert site To begin slicing, select the Rectangle Slice tool (to the right of the Hotspot tool) from the Tools panel.

  2. Place your cursor in the top-left corner, and drag a rectangle to the first horizontal and first vertical guide.

    Note

    A green overlay appears when a slice is drawn. You can toggle this view on and off by using the icons in the toolbar located at the bottom section, labeled View.

  3. In the Property inspector in the Slice field, replace the name that is automatically placed and use banner_left. The size should be 210x74.

    Note

    Fireworks automatically names a slice according to the row and column that it's in. You can change the naming convention by choosing FileÍHTML Setup, the Document Specific tab. Or you can give your slice unique names via the Property inspector.

  4. Draw another slice below the one you just made. This one is 210x45. Name the slice location.

  5. Draw a slice to cover the entire bird area to the bottom of the blue circle. The size is 210x265. Name the slice circle_btm. Do you notice that all the slices on the left have been 210 pixels wide? This is because they will all be placed in a column in Dreamweaver that is 210 pixels wide.

  6. For the logo slice, draw from the top of the blue area to the second vertical guide, but go below the horizontal guide to get the entire logo and blue area. The size should be 267x78 and the name should be logo.

  7. Draw a new slice over the bird (which is also over the circle_btm slice) starting at the guide set at a position of 117. The size should be 210x170. Name it circlepic0.

  8. Select the image just below the buttons. Right-/Control+click and choose Insert ® Slice, and name it sm_top_learn. Repeat for the image below it.

  9. Save your file.

Every time you define a slice, Fireworks automatically places red lines where additional slices could be to slice the whole page. As you make additional slices, the red lines change. You could stop slicing after a few slices and allow Fireworks to use its own guides (the red lines) to slice the rest of the image. In the Exporting section, you see an option called Include Areas without Slices, which slices your document according to the areas defined within the red lines.

Background image slice

Now you need to make a slice for the tiling background image behind the logo. I usually draw it a bit wide and adjust the width in the Property inspector. Follow these steps to make the slice for the background:

  1. Near the top right side, draw a thin vertical slice from the top of the banner to a bit below the dark line under the buttons.

  2. In the Property inspector set the size to 10x127.

  3. Name this slice banner_bg. Figure 21.2 shows all the slices you made.

    Click To expand
    Figure 21.2: The Habitat Alert document with the slices visible.

Exporting various images using one slice

The top slice under the buttons is the top of a menu that will be made in Dreamweaver. Each button has the white arrow below it. These images will be placed in a separate frame to be exported as separate images in the exporting section.

  1. Select the sm_top_learn image (the one with the white arrow) and note its x and y coordinates.

  2. Open the Frames panel and add a new frame.

  3. Choose File ® Import and navigate to the habitat_alert\designfiles\Fireworks folder. Select the sm_top_act file and click Open.

  4. Click in the sm_top area. To position the image exactly, enter the coordinates in the Property inspector (x: 377, y: 119).

  5. From the Frames Option pop-up menu, select Add Frames. Enter 2 and use the After Current Frame option. Click OK.

  6. Repeat steps 3 and 4 for Frames 3 and 4, inserting the sm_top_support image in Frame 3 and the sm_top_find image in Frame 4.

  7. Save your file. A copy of this file is saved as hasliced in the designfiles/Fireworks folder.

Adding URLs and Alt tags to sliced images

Many designers believe that every image with a link should contain an Alt tag. You should include alternate text on logo images with or without a link, so that while the image is loading, the users can see what is coming, or if they have images turned off, they can read a description of what is there. The text you put in the alternate text area is what the user sees before the image loads or when the mouse is placed over the image. This text might expedite browsing, because the users might find a link they want via the Alt tag and click it before the page is finished loading.

Note

Alternate text also makes your site more user-friendly for those using text readers. Some search engines also place importance on the content of the Alt tag. Plus, using alt tags is part of the accessibility guidelines. You can find out more about accessibility at www.w3.org.

To add alternative text or URLs to your images, follow these steps:

  1. Habitat Alert site Open the ha_sliced document from the designfiles/Fireworks folder or use the file from the last exercise. Select the slice named logo.

  2. In the Property inspector you will see the Link and Alt fields. Type http://www.habitat-alert.org for the link and Take me Home for the Alt (see Figure 21.3). You can use a link such as [image] index.html if you know your site structure.

    Click To expand
    Figure 21.3: The link and alt information added in the Property inspector for the location slice.

    Note

    You can add alternate text in the Alternate Image Description box (FileÍHTML Settings, the Document Specific tab). This alternate text applies to the entire image, not just a slice. Use this option when there are no slices. To add alternate text to slices, or hot spots, enter it in the Property inspector for the individual slices.

  3. You use targets if you are developing a framed site. You can choose from the following targets choices:

    • blank — Loads the linked document in a new, unnamed browser window.

    • parent — Loads the lined document in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked document loads into the full browser window.

    • self — Loads the linked document in the same frame or window as the link. This target is implied, so you usually don't need to specify it.

    • top — Loads the linked document in the full browser window, thereby removing all frames.

  4. None of the other slices need a link because the buttons will be linked in Dreamweaver. Save your file if you like. A copy is in the designfiles/Fireworks folder named ha_sliced_done.png.

HTML text slices

When you have an image selected, the field named Type in the Property inspector offers two choices: Image and HTML. The purpose of HTML slices (formerly called Text slices) is to have a slice area in which you can enter HTML text. You can type HTML text from within Fireworks or in your HTML editor. To define an HTML slice, follow these steps:

  1. Select the slice you want to reserve for text.

  2. In the Property inspector, choose HTML from the Type pop-up menu. If you want to add HTML text from within Fireworks, click the Edit button. The Edit HTML Slice dialog box opens so you can type the text to enter.

You can also add the text in an HTML editor. That's all there is to it. The slice color turns a darker green and a label of HTML slice replaces the Slice label.

Note

Text boxes have no borders, cell padding, or cell spacing, which places your text against the edge of the area. If there is a bordering image or background, it will be unsightly. To solve this spacing problem, insert blank text images before and after the text box, or insert slices before and after the text box. The extra text boxes or slices can then be filled with the background color or background image in Dreamweaver or the editor of your choice.


Optimizing Images

The technology for high-speed Internet connections is improving every day, but the majority of Internet users still use modem connections. Users in most U.S. urban areas enjoy all kinds of options for high-speed connections, but most rural areas don't yet have that option, nor do a lot of other countries. When you get used to using high-speed connections, it can be really easy to forget that you are privileged and that many users don't have such access. Maybe sometime in the near future file size won't be a concern, but for now it is. You should keep in mind that the larger the file or combination of files on a Web page, the longer it takes to load. The connection speeds determine how long each file takes to load.

Optimization, or getting your image to the smallest possible size while retaining an acceptable quality, is one of the most important factors in determining how quickly your Web page loads. Not only can you export with GIF and JPEG images in the same document, you can also apply different settings to specific areas of a JPEG image.

Note

The file types currently available for the Web include the PNG format, but all browsers do not yet support this format, so you may want to hold off using that one just yet.


Previewing Images

Previewing an image's optimization settings is vital, and Fireworks makes it easy. You can view one setting or up to four different optimization settings, including different file formats. You can see the changes each setting will make on the file size and the appearance of the image.

The Preview tab

The preview displays your image as it will look in a browser. The Preview tab in your document window shows only the current view (a selected slice or the entire document if there isn't a selection) with the current optimization settings applied.

The 2-Up and 4-Up tabs

The 2-Up and the 4-Up tabs are used for viewing the effects of the optimization you are applying to an image or slice. The 2-Up tab shows you the original image and another one alongside it with optimization settings you have selected. This is a good way to determine how far you can go in optimizing and still have an image that looks acceptable.

Note

Which view you see in your preview depends on whether or not a slice is selected. A selected slice shows in preview as it will display in a browser; the other areas will be dimmed. If no slice is selected, there will be no dimmed areas.

The 4-Up tab offers the most flexibility. You can view the original image and three other settings as well. To change the optimization, select the pane you want to change. In the Optimize panel, change the setting; do this for each of the three views. You can mix the file formats as well so you can compare JPEG and GIF settings. You will be able to see the results in each view panel. If you look at the bottom of each view, you can see the file type, quality (or dither and colors for GIF), file size, and approximate time required to load the image in a browser (see Figure 21.4). Since this is a photo, it is best optimized as a JPEG. Take note that the GIF file is considerably larger.

Click To expand
Figure 21.4: The 4-Up view showing a GIF and two different JPEG optimization settings.

The Export Preview dialog box

In Figure 21.5 you can see the Export Preview dialog box (File ® Export Preview). The settings available are the same as those in the Optimize panel and include a few from the Optimize Options pop-up menu.

Click To expand
Figure 21.5: The Export Preview dialog box.

You'll notice that there are a few other options, such as the File tab, which enables you to scale your image, and the Animation tab, which enables you to make a few changes to the timing and looping of an animation. Figure 21.6 shows an arrow pointing to the Optimize to Size icon and the Optimize to Size dialog box open. You can type a maximum file size you want your image to be, and it will be optimized accordingly.

Figure 21.6: The Optimize to Size dialog box open.


Optimizing GIF Images

Quite a few different settings are available in optimizing a GIF image. You can select which indexed palette to use, the number of colors, and more. Figure 21.7 shows the Optimize panel with a file format of GIF selected. The bottom row of icons is used to change or lock specific color swatches you choose to alter.

Figure 21.7: The Optimize panel with a file format of GIF.

The indexed palette

GIF images are limited to 256 colors; the indexed palette you choose determines which of the 256 colors are included. You can lock a specific color before you reduce colors if you want to ensure that it doesn't get removed by selecting the color and clicking the Lock icon at the bottom of the Optimization panel.

The Indexed Palette drop-down menu contains nine preset indexed palettes plus a Custom option. Each palette makes a different palette of colors available. You can customize each palette and save it with a unique name. The following list shows a few of the most used palettes:

  • WebSnap Adaptive palette is the default palette for indexed color in Fireworks. Any color that is not Web-safe is automatically evaluated and snapped to the closed Web-safe color, plus or minus seven values. It doesn't guarantee that all the colors will be Web-safe, but it's close.

    Note

    If using only Web-safe colors is important to you, you can use the Find and Replace feature to locate any color that is not Web-safe and change it.

  • Adaptive palette finds a maximum of 256 colors. It's not a preset color set, but the best 256 colors for your image. This technique may contain a mixture of Web-safe and non-Web-safe colors.

  • Web 216 converts all colors in the image to the nearest Web-safe color.

The Matte option

The Matte option is available for all the file formats. On the right side of the Optimize panel, you see the label of Matte. Notice the Color box; gray and white checks indicate that it is set to Transparent. The Matte option enables you to export your image slice as though it has a background color — without changing the Canvas background color. This option is particularly important when you want to use the exported image in an environment different than the one it was designed in or when you are planning to use the image on a variety of different-colored backgrounds.

There is no transparency in a JPEG image, so there will always be a background color. Click in the Matte Color box and use the Eyedropper tool to select a color. You can select a color from the image itself. For GIF images with transparent backgrounds, you'll want to use a matte color that closely matches the background on which the image will appear. Images that have an anti-alias edge (most do) will blend in with the background color. No doubt you've seen "halos" or color around images. This is caused by an image exported from one colored background and placed on top of another. If you always keep your source PNG file, fixing this problem is a matter of resetting the matte color and exporting a new image.

Reducing colors

You can reduce the size of your image file by reducing the number of colors used. Choose a number from the Maximum Number of Colors pop-up menu. You can also reduce colors from the Color Table. If you choose a color amount from the Maximum Number of Colors pop-up menu and the number is less than the number actually present in your image, Fireworks deletes colors based on the least-used colors in the image.

The color table area of the Optimize panel displays the color swatches of the colors in your image. If you don't see the swatches or if you make a change to the optimizations settings, click the Rebuild button in the lower right corner. An updated table of colors is displayed. (The Rebuild button is visible only if the colors in the color table don't reflect the most current settings you've chosen.)

Using the color table gives you greater control over which colors get eliminated. You can lock specific colors so they don't change, you can have colors automatically shifted to Web-safe colors, or you can change the color. To make alterations to the colors, click a color to select or Ctrl/Command+click to select multiple colors and then change the color, delete, snap to Web-safe, or lock. Figure 21.8 shows the labeled icons that enable you to make these changes, as well as the swatch feedback showing the status of each color.

Figure 21.8: The color swatches showing the various feedback icons.

Setting transparency

Transparency is available for GIF and PNG files. The choices for transparency are Index Transparency and Alpha Transparency. The difference is often confusing. To see the difference firsthand, follow these steps:

  1. Open a new document that's 300x300 with a white background.

  2. Select the Rectangle drawing tool, and draw a square filled with black.

  3. Draw another square in the center of the white one and fill it with white.

  4. From the Optimize panel, be sure Matte is set to None, and choose Index Transparency.

  5. Click the Preview tab so you can see the results (see Figure 21.9). The Index Transparency setting removes the background color. However, this option removes not only the background but also any other areas that contain this color. Notice that the white box in the center is also gone.

    Figure 21.9: The white background and white center are both removed using index transparency.

    Note

    Only one color can be used for the matte or background color automatically. You can, however, add or subtract additional colors to the Index or Alpha Transparency by using the various eyedroppers in the lower-left corner of the Optimize panel. Click the appropriate eyedropper; then click the color. You'll need to reselect the eyedropper each time you want to add or remove a color to the transparency.

  6. Because the removal of color from other areas isn't usually acceptable, another option exists: Alpha Transparency, which removes only the background colors, as shown in Figure 21.10.

    Figure 21.10: When you want to remove the background color only and not the same color from the image, use the Alpha Transparency option.

    Note

    When you choose Alpha Transparency, the view may not always show properly. Try clicking No Transparency first and then reselecting Alpha Transparency.

Dithering

Dithering gives the illusion of new colors by varying the pattern of dots of color. The downside is that it increases the number of color changes in a horizontal row, which also increases the file size. You apply any percentage of dither you feel is needed to help a GIF image look better. If you have an image that is best suited as a JPEG but you need transparency, dithering may help make the image look better. It can also help in an image with a gradient fill for which you need transparency. Dithering can also be used when you reduce the color palette below what is actually in the image. By adding dithering, you can smooth out the colors. To determine the best options, use the Preview mode and experiment with the settings. Try adding more colors and no dither or fewer colors and more dither, and compare image quality versus file size.

Loss

Loss is the amount of compression used. GIF images normally have no loss of image detail as long as the image has less than 256 colors and/or you don't remove colors because they use lossless compression. But you do have the option of using compression even in a GIF image; it produces some distortions in your image, however. The higher the loss setting, the higher the distortion.

Interlacing

Interlacing is an option for GIF files you are exporting for use on the Web. You can access this option only in the Export Preview (File ® Export Preview) or from the Optimize Options pop-up menu in the Optimize panel. When a file is interlaced it appears blocky or blurry, until it loads, enabling the user to see a blurred copy while the image is loading. The alternative is to not use the Interlacing option, in which case the user sees nothing until the entire image loads. The drawback to using interlacing is that the image needs to load fully before it becomes clear.

Habitat Alert site Optimize the Habitat Alert logo and other GIF slices with the following steps:

  1. Open the ha_sliced_done.png file from the designfiles/Fireworks folder and select the logo slice.

  2. Select the 2-Up tab.

  3. In the Optimize panel, choose the GIF file format.

  4. Choose Alpha Transparency.

  5. Select the Add Color to Transparency eyedropper and click in the background area of the logo slice. Because the striped background will be a background image, you don't need the stripes and blue area in this image. Every little bit helps when reducing image file size.

  6. A stripe will still be present after you add the first color to the transparency. Using the Add Color to Transparency eyedropper again, click the remaining stripe color to remove it. Continue adding colors until most of the stripe is gone. Click the plus sign after each addition and prior to clicking again.

  7. Change the Matte color to #003366. The logo will look like Figure 21.11.

    Click To expand
    Figure 21.11: The Habit Alert logo seen in Preview mode after the optimization settings are made.

  8. Shift+select all the slices except the bird image, the logo, and the buttons; then click the Preview tab.

  9. In the Optimize panel, set the following settings:

    • File Format — GIF

    • Indexed Palette — Web Adaptive

    • Colors — 64

    • Matte — None

    • Transparency — No Transparency.

  10. Shift+select each button and use these settings:

    • File Format — GIF

    • Indexed Palette — Web Adaptive

    • Colors — 16

    • Matte — None

    • Transparency — Index Transparency

  11. Shift+select the two slices below the buttons using these settings:

    • File Format — GIF

    • Indexed Palette — Web Adaptive

    • Colors — 4

    • Matte — None

    • Transparency — No Transparency

  12. Save as ha_gif.png.


Optimizing JPEG Images

There aren't many choices to make when optimizing JPEG images, but there is still a lot of flexibility. Selective JPEG compression is a special feature available only for JPEG images. It's used to set higher optimization to selected areas of an image. Following is a brief explanation of each option for JPEG images. Figure 21.12 shows the Optimize panel for JPEG images.

Figure 21.12: The Optimize panel with a Export File Format of JPEG chosen.
Caution

Don't JPEG a JPEG image; it loses information each time and gets considerably worse after the second time. JPEG is good for 24-bit color depth, no less.

Quality

The Quality setting determines how much compression is applied to the image. Be sure you check in the Preview mode. It's a good idea to zoom in a bit to see the artifact effect on your image. Go as low as you can and still have an acceptable-looking image.

Smoothing

When you lower the quality setting, you may see visible artifacts depending on how low you went. The Smooth option adds a bit of blur to blend the image. You lose some image sharpness, but it may be a compromise you are willing to make when a small file size is a must. The Smooth setting ranges from 0 to 8, with 8 being a higher degree of blur. You can then apply an Unsharp filter if you'd like, using either Effects menu or the Filters menu.

Sharpen JPEG edges

The JPEG compression works best on photographs, gradients, and drop shadows. But you may have incorporated areas of text or perhaps used some smoothing. To bring back the edge detail, open the Optimize Options pop-up menu and select Sharpen JPEG Edges. This, however, adds to the file size.

Progressive JPEG

The Progressive option is similar to GIF interlacing. The image appears blocky and gradually clears. The drawback is that it is not supported by older browsers (before Netscape 2 and IE 3) and shows a broken image.

Selective JPEG compression

You can optimize the background of a JPEG image at a lower-quality setting to emphasize the foreground image. Or you can use a lower setting for most of a document and select the areas that appear a bit blocky and blurry, which occurs when a JPEG image has been compressed too much and optimized at a different setting. To use selective JPEG compression, follow these steps:

  1. Open selectivejpeg.png from the chapter21_exercise folder. This image doesn't need to be sliced, but it could use some Selective JPEG compression.

  2. Click on the 2-Up preview tab and choose JPEG from the Export File Format pop-up menu. Zoom in to see the effects of the JPEG artifacts better.

  3. Click the bitmap image to make it active. If you are in the habit of locking background layers, be sure that you remember to unlock it. Click the Preview tab in the Document window so you can see the results of lowering the JPEG compression.

  4. In the Optimize panel, lower the Quality setting all the way to 40. The text and shadow look horrible, as shown in Figure 21.13; you fix that in a moment. The gradient, however, still looks good.

    Click To expand
    Figure 21.13: The image with the JPEG quality lowered to 40.

  5. Click the Lasso tool (or you can use the Marquee tool) and draw around the area you want to compress at a higher-quality setting. To use the Lasso tool, you have to return to the Original tab, so you'll have to remember where you want to outline. If there is more than one area, press Shift and make your next selection.

    Note

    If you have more than one area to use selective compression on, they must all be selected now or you will have to start over and make your selections again, including all the areas that need the Selective JPEG compression applied. These selections are going to become a JPEG mask, and there can be only one per document.

  6. Select Modify ® Selective JPEG ® Save Selection as JPEG Mask. As a default, the mask will be a pink color.

  7. You can set the Selective settings from the menu bar by choosing one of these methods:

    • Modify ® Selective JPEG ® Settings.

    • Click the pencil icon in the Optimize panel to the right of the Selective Quality field.

  8. Check Enable Selective Quality, and enter a quality value in the Selective Quality field. You can change the overlay color. Since there is text, I checked the Preserve Text Quality option (see Figure 21.14).

    Figure 21.14: The Selective JPEG Settings dialog box.

  9. A Quality of 90 looks about perfect (see Figure 21.15). You could compromise and go to 80 or 85. You can't really see the JPEG artifacts when it is zoomed out. Only you can determine whether the trade-off of quality and file size is worth it.

    Click To expand
    Figure 21.15: The image with the quality setting of 90 percent and zoomed in to 200 percent.

    Note

    The figures you see here are zoomed in at 200 percent. Even using a quality of 80, it looks good at 100 percent.

  10. To edit the JPEG mask, you can delete and start over by choosing Modify ® Selective JPEG ® Remove JPEG Mask, or if you want to add to or subtract from the current mask, go to Modify ® Selective JPEG ® Restore JPEG Mask as Selection. With the selection active, you can use the Shift key and draw another area or add on. If you want to delete a portion, hold down the Alt/Option key and draw around the area to remove.

  11. Save the mask by choosing Modify ® Selective JPEG ® Save Selection as JPEG Mask.

Much of the optimization process is trial and error; choose your settings, preview, and repeat until you get an acceptable image.


Understanding Exporting

Before you begin exporting, it's important to have your site structure set up. Setting up your folders locally in the same way that they will be uploaded saves you many headaches. If you are using Dreamweaver and save your site files in one folder and then move the file to another folder, all the links to your images are broken, so it's better to save in the same folder that the file will ultimately be in.

When you choose to export images as well as the HTML of a Fireworks document, the images and the HTML file (containing a table that places all the image slices back together) are generated.

If you export from Fireworks and expect to insert the Fireworks code into a Dreamweaver document, the HTML file and the images must be saved in the same folder as the file into which you will insert the Fireworks code. Otherwise, all your image links will be broken. For example, a simple site structure might be a site folder called Bookstore with a subfolder of images and another subfolder called assets. If your site's HTML/HTM files are kept in the Bookstore folder, you would want to export your Fireworks document containing the HTML document into the Bookstore folder and designate that the images be exported to the images folder.

Export Wizard

The Export Wizard is especially helpful to new users who are not familiar with optimizing images. The wizard can help you decide which format to use and help you decide on the settings to use. To use the Export Wizard, follow these steps:

  1. Open an image to export and choose File ® Export Wizard. Figure 21.16 shows the opening dialog box for the Export Wizard. If you had a file size limit, you could select the Target Export file size option and enter a number.

    Click To expand
    Figure 21.16: The Export Wizard opening dialog box.

  2. Select the Select an Export Format option, and click Continue. The next dialog box asks how to handle frames if there are any. The choices are as follows:

    • Animated GIF

    • JavaScript Rollover

    • Single Image File

  3. Choose the appropriate option if you have any frames, then click Continue. The next dialog box asks what the destination of your image will be. The options are as follows:

    • The Web

    • An image editing application

    • A desktop publishing application

    • Dreamweaver

  4. Select The Web, and click Continue.

  5. The Analysis Report dialog box opens with recommendations for your selected image. If there is more than one option, such as JPEG and GIF, click Exit.

  6. The Export Preview window opens, showing you both GIF and JPEG. The first image shown is the smallest. You can decide which one looks best. You can change the optimization settings in this dialog box. You can also click the File tab and alter the scale size or the crop size if a crop selection is made. The Animation tab enables you to alter some of the animation settings.

  7. When your image is ready to export, click the Export button.

Continue with the export. The next section details how to complete the export.

General exporting options

The Export dialog box is present each time you export an image no matter which exporting method you choose. This section looks at the various options for exporting (see Figure 21.17).

Click To expand
Figure 21.17: The Export dialog box.

To export, follow these steps:

  1. Select an image and use one of these methods to open the Export dialog box:

    • Choose File ® Export.

    • Click the Quick Export icon (the round Fireworks icon with an arrow in the top right of the document window), and choose the appropriate application to export to.

    • Choose File ® Export Preview; optimize and click the Export button.

    • Right-/Control+click an image and choose Export Selected Slice.

    • Use the Export Wizard and click the Export button from the Export Preview dialog box.

  2. Navigate to the folder you want to export to. If you are developing a site, it's a good idea to export into the root folder of the Web site.

  3. Name your file.

  4. Select the type of file from the selections in the drop-down menu. The options are as follows:

    • HTML and Images — Exports the image, JavaScript, and the code necessary to place everything into a table.

    • Images only — Exports only an image or selected images with no HTML or JavaScript code.

    • Dreamweaver Library (.lbi) — A Library folder is necessary to export into. The HTML and images will be exported as a Dreamweaver library Item.

    • CSS Layers (.htm) — Exports images, layers, and frames as CSS layers that can then be used in Dreamweaver.

    • Director (.htm) — Exports buttons and rollovers as Director cast members.

    • ayers to Files — Exports each layer as a separate file.

    • Frames to Files — Exports each frame as a separate file.

    • Lotus Domino Designer — Exports rollovers and buttons as image wells.

    • Macromedia Flash SWF — Exports animations or maintains vectors.

    • Illustrator 7 — Exports as a vector image but may lose effects applied depending on the application in which it is opened.

    • Photoshop PSD — A native Photoshop format. You can choose to maintain editability or appearance.

  5. If the HTML field is active, choose to export the HTML file or to copy it to the Clipboard.

  6. The bottom portion of the dialog box has several important options spelled out here:

    • Selected Slices Only — When selected, only the slices you have selected will be exported.

    • Include Areas without Slices — When selected, the areas of the image that are not specifically defined by a slice are also exported. They are sliced according the automatic slicing guides (red lines).

    • Current Frame Only — If selected, an image with multiple frames exports only the current frame. If unselected, all frames are exported and the filenames end with f2, f3, and so on.

    • Put Images in Subfolder — If selected, the Browse button is active so you can browse to a subfolder or make one to store the images in.

    • Option button opens the HTML setup dialog box, which is detailed in the next section.

  7. Click Save when you are finished.

HTML setup

You can access the HTML Setup dialog box by choosing File ® HTML Setup or by clicking the Options button in the Export dialog box.

The General tab

The Export panel includes an Options button with more options. Click it to open the HTML Setup dialog box. The General tab is where you choose the application you will be using the code in, the extension of your choice, whether to add comments, and whether you want everything in lowercase.

The Table tab

The Table tab, shown in Figure 21.18, has some important options. The Space With options include 1-Pixel Transparent Spacer, which is probably the most often used option because it generates a transparent image as a space holder. When you export, you will notice one file called spacer.gif when you look in the folder to which you exported. This is a 1-pixel-by-1-pixel transparent file that is used as a spacer to keep a table's structural integrity. This spacer is known by several names and is frequently called a shim or a transparency.gif.

Click To expand
Figure 21.18: Table options tab.

You can also choose to export using a nested table, which places one table into another table. This sort of table layout does not require spacers. Or, you can choose to export only a table with no spacers at all. It will probably be fine in Internet Explorer, but Netscape Navigator often does not hold the table's integrity if empty cells exist. To help prevent the presence of an empty cell, you could also choose Non-breaking Space instead of Spacer Image for the Contents option.

Note

In Netscape if a nonbreaking space is used instead of a transparent image, the table doesn't show any background image or colors.

If your table has an image in every cell, Single Table–No Spacers works just fine.

Document Specific tab

This tab enables you to set the naming conventions to use for automatically naming exported images. This is also where you make the selection necessary if you are exporting a navigation bar with multiple pages.

Exporting HTML and images

Use the HTML and Images option when you want to export an entire document as a Web page or when you want to export an image that has a behavior attached. To export an image as a generic HTML and Images file, follow these steps:

  1. Open the ha_sliced_done.png image from the chapter21_exercise folder. This is a sliced and optimized file. This isn't the way you are going to export for the Habitat Alert site, but you can practice on it.

  2. Choose File ® Export. In the Save In box, choose a place on your hard drive to save this exercise.

  3. In the Save as Type field, choose HTML and Images.

  4. In the HTML field, choose Export HTML File.

  5. In the Slices field, choose Export Slices.

  6. Check Include Areas without Slices.

  7. Check Put Images in Subfolder. Don't browse for a folder; a new folder named images will be automatically added.

  8. Click Save.

Exporting images only

You can export one slice or you can Shift+select multiple slices to export by following these steps:

  1. Select a slice or slices.

  2. Choose File ® Export.

  3. Navigate to the location to which you want to export.

  4. Name your file.

  5. In the Save as Type box, choose Images Only.

  6. In the Slices box, choose Slices Only; uncheck the Include Areas without slices option.

  7. Click Save.

Exporting the Habitat Alert layout

Habitat Alert site Most of the slices in our Habitat Alert layout are exported using slices only. You also export the navigation later in the chapter using another method.

Note

In the Dreamweaver section, you define a site and add folders for the site's structure. On the CD is a site folder you can use for this exercise. Copy the chapter21_exercise folder onto your hard drive.

To export the slices, follow these steps:

  1. Open the site_layout.png file from the habitat_alert_export\designfiles\Fireworks folder (inside the chapter21_exercise folder).

    Note

    You are using the site folder setup you'll find in the Dreamweaver section. When exporting to your root folder, Fireworks adds notes that tell Dreamweaver where to find the source file. If you move the source files, you can still use them; you'll just have to navigate to locate them.

  2. Right-/Control+click on the bird image only. (Be sure the slice name is circle0 and not circle_btm.) Choose Export Selected Slice.

  3. The Export dialog box opens. Export into the habitatalert folder you saved to your hard drive. The path is habitat_alert_export\html\sharedimages\circlebirds.

  4. This option automatically has the Selected Slices Only option checked.

  5. The Frames option is active because there are other bird images being stored on other frames. They will be getting a random script applied to them in Dreamweaver. Uncheck the Current Frame Only option because you want to export all the images.

  6. Click Save.

    Note

    Open the circlebirds folder and notice the naming of each image. The images in the frames each have a frame number after them. You may want to change the names. We changed ours to circlepic1, and so on.

  7. Repeat for the Location slice (Home) and save in the habitat_alert_export\htmlsharedimages\locations folder.

  8. Repeat for the main navigation buttons and the gold boxes below them. When selecting small slices, zoom in so you can select them. Export to the sharedimages\mainnavs folder. Again, you may want to rename the images in the frames. The images in the frames will be used in Dreamweaver as rollovers.

    Note

    Because you exported including all the frames, a few blank images will be generated where the frame is empty. Just delete these.

  9. Zoom in and select the banner_bg slice. It's the long thin one on the top right. This is your background slice. Repeat steps 2 through 6, except check the Current Frame Only option.

  10. Select the circle0 slice and cut it (Control/Command+X). Then export the slice under it named circle_btm into the backgrounds folder. Paste the circle0 back into the document.

    Note

    When a slice overlaps another, you need to move it to export the entire slice below it. Turning off the top slice in the Web layer doesn't do the trick. By cutting and pasting the top slice, you ensure that it's replaced in the same location.

  11. Shift+select the logo and the banner_left slice and export to the sharedimages folder.

Exporting with the Export Area tool

The Export Area tool is located on the pop-up menu of the Crop tool. This tool is similar to the Crop tool in the way it defines an area, but it doesn't affect the original image. To export using the Export Area tool, follow these steps:

  1. Habitat Alert site Open the site_layout.png file from the habitat_alert_export\designfiles\Fireworks folder you saved to your hard drive.

  2. Select the Export Area tool, and drag around the main navigation buttons only. Use the handles to adjust the size. Don't get the gold slices below or the line with shadow.

  3. Double-click when the area is defined to open the Export Preview.

  4. Choose Export.

  5. Navigate to the navbuttons folder in your root folder and open it.

  6. Name the file navigation_buttons_fw.htm.

  7. In the Save as Type box, choose HTML and Images. In the HTML box, choose Export HTML File.

    Note

    You can use any export option you'd like, depending on the type of image you are exporting. Since you have JavaScript attached, you are using the HTML and Images.

  8. If you want the images put in a separate folder, check that option and click the Save button.

Exporting as a Library Item

If you want to use your image as a Library Item in Dreamweaver, follow these steps:

  1. Select a slice or area. (See Export area.)

  2. Choose File ® Export.

  3. In the Save as Type box, choose Dreamweaver Library. A message opens telling you to have a Library folder in the root. Click OK.

  4. In the new window that opens, if you don't have a Library folder, click the Create New Folder icon (the solid yellow folder) and name it library. Click Open. Otherwise, navigate to your Library folder.

  5. In the Slices field, choose Export Slices and check the Put Images in Subfolder box.

  6. Export into the Library folder.

Exporting to Macromedia Flash SWF

Flash MX It seems like only yesterday that GIF animation was the option of choice for animations, but Flash has quickly become the favorite choice for full-featured animation. Based on a recent survey, which revealed that 96.4 percent of all Web users already have the Flash player, many more Web sites are featuring Flash animations instead of GIF. One of SWF or Flash animation's greatest appeals is the small file sizes.

You can export Fireworks images as Flash SWF files, or you can use a native Fireworks PNG file and import it into Flash. For instance, if you apply a gradient transparency in Fireworks, you have to export the transparent object over the area you want to appear transparent. But the same image imported into Flash has true transparency and can be placed on top of any object.

To export as Flash SWF, follow these steps:

  1. Open the document you want to export, and make the appropriate selections.

  2. Choose File ® Export.

  3. In the Save as Type box, select Macromedia Flash SWF.

  4. Click the Options button to set your export options. Figure 21.19 shows the Macromedia Flash SWF Export Options dialog box.

    Figure 21.19: The Macromedia Flash SWF Export Options dialog box.

  5. The following object and text options are available; select the ones you want:

    • Objects: Maintain Paths converts paths into editable Flash paths.

    • Objects: Maintain Appearance converts paths into bitmapped images.

    • Text: Maintain Editabiltiy converts Fireworks text into text that is editable in Flash.

    • Text: Convert to Path converts the text into a bitmap.

  6. If you are exporting a JPEG image, select the quality setting you want.

  7. Select All Frames or only the frames you want to export.

  8. Set the Frame Rate per Second.

  9. When you are done with your selections, choose OK and then, in the Export dialog box, choose Save.

SWF exports from Fireworks can be used as they are for Web viewing or inserted into Dreamweaver or another layout editor without even using Flash. But the real purpose of the ability to export as a Macromedia Flash SWF file is to reuse the artwork you made in Fireworks in Flash.

Vector content remains vector in Flash if you choose the Maintain Paths and Maintain Editability options. But many actions you can take in Fireworks are lost when exported for use in Flash. Some of the things that are not compatible with Flash include Live Effects, opacity (objects with opacity become symbols with an alpha channel), and blending modes. Masks, slice objects, image maps, and behaviors, such as rollovers, are lost as well. Other features lost are things such as feathering, layers, and some text formatting. In addition, anti-aliasing isn't maintained on export, but this isn't a problem because Flash automatically applies it to documents itself. If you keep in mind that the main reason to use a SWF export from Fireworks is to reuse the art, then you will do fine.

Exporting to PSD

PSD is the native file format of Adobe Photoshop. If you want to open your Fireworks PNG files in Photoshop or share your files with someone who will use Photoshop, you can export a Fireworks file as a PSD file. When you export as a PSD, you have the option of exporting with better editability over appearance or better appearance over editability. But keep in mind that Fireworks paths are always converted to bitmap images. To export for Photoshop, follow these steps:

  1. Select an image to export and choose File ® Export.

  2. From the Save as Type box, select Photoshop PSD.

  3. In the Settings area, you have four options:

    • Maintain Editability over Appearance places each object on a separate layer, and the effects remain editable. It converts text into editable text. Effects that don't have an equivalent in Photoshop are discarded.

    • Maintain Fireworks Appearance converts objects into layers and renders the effects and text into images.

    • Smaller Photoshop File flattens all the objects and layers into one layer, producing a smaller file size.

    • Custom enables you to select separate setting options for objects, effects, and text.

  4. When you are done making your selections, click Save.

Exporting as vectors

You can use Fireworks vectors as paths in FreeHand, Illustrator, or Flash. You maintain only the path, a solid fill, and stroke. Any effects will be lost. To export a vector shape for FreeHand, Illustrator, or Flash, follow these steps:

  1. Select an image and choose File ® Export.

  2. In the Save as Type box, choose Illustrator 7.

  3. Click the Options button. The Illustrator Export Options dialog box, shown in Figure 21.20, appears.

    Figure 21.20: The Illustrator Export Options dialog box.

  4. If you want to keep the elements on individual layers, select Export Current Frame Only. If you want each frame on a separate layer, select Convert Frames to Layers.

  5. To make the export completely for FreeHand, choose FreeHand Compatible.

  6. Click OK.

  7. Click Save to complete the export.

Exporting to CSS layers

You can export Fireworks object and images, layers, and frames as CSS layers. By using CSS layers in Dreamweaver, you can overlap and stack layers on top of one another, make them visible or invisible, or even move them, which you can't do with normal Fireworks HTML output. To export to CSS layers, follow these steps:

  1. Select the object or images you want to export and choose File ® Export.

  2. In the Save as Type box, choose CSS Layers.

  3. In the Source area, choose from the Fireworks options: Fireworks Slices, Fireworks Layers, or Fireworks Frames.

  4. The Trim Images box, which trims any excess Canvas around objects you are exporting, is checked by default.

  5. If you want the exported images in a subfolder, check the Put Images in Subfolder option.

  6. Click Save to export.

Exporting layers or frames as separate files

You can export all the layers or all the frames of a Fireworks document as separate files. To export layers or frames as separate images, follow these steps:

  1. Open the image you want to export and choose File ® Export.

  2. From the Save as Type box, choose Layers to Files or the Frames to Files.

  3. Leave the Trim Images option checked if you want to automatically trim the images to fit the objects on each layer (or frame).

  4. Click Save.


Summary

In this chapter, you learned how to slice an image or document. You also discovered how to optimize your images. You learned which images are better suited to GIF and which ones are best suited to JPEG. After your images were sliced and optimized, you moved on to the many options available for exporting the images. You discovered how to export for compatibility in a variety of other formats, such as Flash SWF and Dreamweaver Library Items.


Project Summary

The following tables outline what you've done in this chapter that will be used in the Habitat Alert Web site. Some of the images need further work in another section; others are ready to use in another application.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
site_layout.png | This is the source file used to export the images needed in the site. It has the guides in place and the images sliced and optimized. | These images will all be placed into the layout in Dreamweaver
Additional Site Assets from Techniques in This Chapter
Additional Images | Techniques Used |
storethings.gif cards.gif printme.gif | These images are used on the home page of the site, a link for the store, credit card image, and a print image The slices for these images use the Insert ® Slice method. | These will be added with the final site a design in Dreamweaver.
location_learn location_act | Images for the location slice were added to the Frames panel. During export the Current Frame Only option was toggled off. | Inserted into a Dreamweaver template.
location_support location_find |  |


Part IV: Unleashing the Power of Macromedia Flash MX 2004

Chapter List

Chapter 22: Navigating through Flash MX 2004
Chapter 23: Designing Visual Content
Chapter 24: Symbols and Libraries
Chapter 25: Animating a Movie
Chapter 26: Working with Sound
Chapter 27: Flash Components and Behaviors
Chapter 28: Publishing Your Flash Movies
Chapter 29: Using ColdFusion MX and Flash Remoting


Chapter 22: Navigating through Flash MX 2004

Download CD Content

Overview

The Flash MX 2004 workspace is similar to Fireworks MX 2004 and Dreamweaver MX 2004. So if you are new to Flash MX 2004 but familiar with one of the other applications, you will get acclimated quickly. The work area in Flash is called the Stage, whereas it is called the Canvas in Fireworks and the document window in Dreamweaver. Even if you are new to using the Macromedia Studio MX 2004 applications, the new interface is intuitive and easy to use. You'll be zipping around the panels and tools in no time at all. In this chapter, you explore the main interface features and where to find the tools you'll need.


Using the Flash MX 2004 Interface

When you first open Flash, you'll notice the panel groups. In Windows, they are docked to the right of the interface. On a Mac, they float as a group on the right. Windows users can undock the panels if they like. Both platforms enable you to rearrange the grouping of panels and determine which panels are open in the interface by opening the various panel Options pop-up menus and choosing where to move them or to close them. To undock a panel or panel group, drag it by its gripper and rearrange. Drag back to the panel area until you see a highlighted line, and release the mouse button to dock a panel. You can also access panels by using keyboard shortcuts. In addition, after you arrange the panels the way you want them, you can save the configuration by choosing Window ® Save Panel Layout. You then have to give it a name. Figure 22.1 shows the Flash MX 2004 interface.

Click To expand
Figure 22.1: The Flash MX 2004 interface.
Note

Windows has two toolbars available that the Mac doesn't: the Main toolbar, which contains icons for commonly used Toolbar items and panel options, and the Controller bar, which are VCR-like controls. These are off by default because many of the items are redundant. But the tool descriptions and icons may be helpful to new users.


The Property Inspector

The Property inspector is the most-used panel in Flash. As you select a tool or object on the Stage (the large white area that you work in), the Property inspector changes to reflect that item's properties (see Figure 22.2). You can leave it docked at the bottom (or floating in Mac) or close it and access it as needed by choosing Window ® Properties. However, it's used so frequently, you'll probably want to click the Expander arrow (or its name) to close it when it's not in use.

Click To expand
Figure 22.2: The Property inspector when the Pen tool is selected.
Tip

The expander opens and closes a panel, but you can actually click anywhere on the header bar to open and close a panel.


The Toolbar

The Toolbar is organized into four main sections. At the top are 16 Flash tools; the second category is the View tools, the third is the Color area, and the fourth is the Options area, which displays tool-specific modifiers. Figure 22.3 shows the Toolbar.

Click To expand
Figure 22.3: The Toolbar.
Tip

When using the tools in the Toolbar, always check the Options area (bottom of the Toolbar) and the Property inspector for modifiers. You'll find that there are different options in each area depending on the tool selected.


The Document Window

New Feature

When you start up Flash, as well as the rest of the MX 2004 programs, you now get an opening screen that allows you to do a range of tasks, from starting a new Flash movie to opening an existing one to getting third-party programs called extensions. You can also open additional documents by choosing File ® New. After you have selected File ® New, you can either just select a Flash Document from the General tab or go to the Templates tab, as shown in Figure 22.4. This shows that there are eight categories of templates and each one contains Category Items. These are great starter templates for a variety of projects.
Click To expand
Figure 22.4: The template documents that ship with Flash.

The View menu contains options that control various functions within the Document window. Table 22-1 shows a listing of the options and their functions.

Table 22-1: The View Menu Options
Option | Description
Goto | Allows you to access a submenu of scenes in the current movie. You can also access this menu from the Edit Scene icon in the Document window.
Zoom In | Increases the scale of the Stage by 50 percent.
Zoom Out | Decreases the scale of the Stage by 50 percent.
Magnification | Presents various view size options.
Preview | Allows for various preview modes, such as Outline, Full Preview, Anti-Alias, and so on. Anti-aliasing modes are turned off to speed up the display. This option does not affect how your movie exports, only how you view it.
Work Area | When this option is turned on, allows you to use the gray area around the Stage.
Rulers | Toggles the ruler's visibility on and off. If you are going to use guides, rulers have to be turned on.
Grid | Allows you to show the grid (which doesn't export), to snap to grid, or to edit grid. When you choose the Snap to Grid option, items snap to it even if it's invisible.
Guides | Rulers need to be turned on for guides. Drag a horizontal or vertical guide from the rulers. Submenu options are Show Guides, Lock Guides, Snap to Guides, and Edit Guides.
Snapping | Aligns items to the nearest x and y coordinates in whole-pixel increments. A 1-pixel grid appears when the Stage is magnified to 400 percent or higher. There are submenus that decide what type of snapping you want. As an example, you use Snap to Objects when you move an item from its origin point; the item snaps into alignment with items already on the Stage.
Hide Edges | Hides the selection pattern without affecting the selection.
Show Shape Hints | Shape Hints are used when you are tweening shapes.


Change Document Properties

To change the properties of your Flash document, choose Modify ® Document. The Document Properties dialog box opens, as shown in Figure 22.5. You can alter the size by typing specific dimensions or by clicking the Print button or Contents button to match the size of either. You also change the background color, frame rate, and ruler units from this dialog box. Many of these properties can also be changed right in the Property inspector.

Click To expand
Figure 22.5: The Document Properties dialog box.


Active Window Focus

Focus is the active part of the application active. In Flash MX 2004, you can have more than one window/panel active. To make a specific panel or window active, click it. Then when you return to the Stage to edit an item, you need to click it to return the focus to it.


Keyboard Shortcuts

Flash MX 2004 ships with keyboard shortcuts that were designed for it. But you can also choose to use a set of shortcuts for applications, such as Fireworks, Photoshop, and others. You can also make your own custom set. To customize your own shortcuts, follow these steps:

  1. Choose Edit ® Keyboard Shortcuts.

  2. You can use the current set or choose one from the Current Set drop-down menu.

  3. Click the Duplicate Set icon (the first one to the right of the Current Set field), enter a new name, and click OK. By making a duplicate, you prevent overwriting the original shortcut file.

  4. Choose one of the categories listed in the Command area. Click the plus sign (+) to expand the category to its associated commands. Choose the command you want to add or change.

  5. In the Shortcuts area, click the minus sign to remove a shortcut (it will be grayed out unless there is a command already associated with it) or click the plus sign to add a new shortcut.

  6. When you are adding a new shortcut or changing a current one, the Press Key field is active. Enter the key combination you want to use for the shortcut by pressing the keys on your keyboard. Press the Ctrl/Command key and a letter or number. If it's already used or if you press an invalid selection, you see a warning message.

  7. Click the Change button; then click OK.


Understanding Layer/Folder Basics

In this section, you'll be looking at just the layer portion of the Timeline (where you time your animations). You need to understand the basic concept of layers for most everything you do in Flash. Layers help you separate and organize pieces of your content and actions. The way you use layers depends on your own workflow and work habits. It's a good idea to separate different parts of your movies onto separate layers; otherwise, you'll be amazed at how quickly you can lose things. This section shows you how to name layers and gives you some organizing tips.

Adding layers and/or layer folders

You can add a new layer in Flash several ways:

  • Select Insert ® Timeline ® Layer or Insert ® Timeline ® Layer Folder from the main menu.

  • On the lower left corner of the Timeline, click the icon with the plus (+) on top of the document for a new layer or the icon with the plus (+) on top of the folder for a new layer folder.

  • Right-/Control+click the layer name, and choose Insert Layer or Insert Folder from the context menu.

All new layers/folders are added to the top of the selected layer/folder.

Deleting layers or layer folders

To delete layers or folders, select the layer or layer folder you want to delete, and click the Delete Layer (Layer Folder) icon, which is the trash can, or right-/Control+click and select Delete Layer or Delete Folder from the context menu.

Moving layers/folders

To rearrange a layer or folder, click and drag it to the new location. Objects on the top layer hide objects on the layer below it. Not all objects are obscured — only those directly below what's on the layer above it. This doesn't affect the way your movie plays. The Timeline and frames you use control what appears in your movie and when it appears.

Visibility

You can turn off the visibility of each individual layer by clicking the dot in the column below the eye icon. If you want to hide or show all the layers, click the eye icon. A red X in the layer indicates the layer's visibility is turned off. The visibility of the layers does not affect the way the movie plays.

Locking layers/folders

You can lock a layer, layers, or folders to prevent editing. This is particularly handy when you are tracing items. You can lock the layer you want to trace so you don't accidentally alter it. To lock all layers, click the Lock icon. To lock individual layers, click the dot in the column below the Lock icon.

Naming layers/folders

It's a good idea to get in the habit of naming layers and folders. To name a layer or folder, double-click the layer or folder name and type the new name.

Selecting layers/folders

Layers and folders are selected in several different ways. You can select a layer by clicking the layer name. If you select a frame, the layer it is on is automatically selected. If you select an action, the layer it is on is selected. Also, if you select an object on the Stage, the layer it is on is automatically selected.


Organizing with Layers and Layer Folders

If you are an experienced Flash user, you probably already organize your layers. It's a good idea to get in the habit of placing certain kinds of content and actions on separate layers. The following sections explain some of the most commonly used Flash layer names and functions. You'll develop your own naming system, which best suits the way you work.

Content layers and layer folders

Content layers are layers or layers in folders that hold your art and things such as buttons, text, or sound. As you work through this Flash section, you'll see that the authors put almost everything on its own separate layer. For example, a background image is on one layer, buttons on another, actions on another, and so on.

Actions

Actions are bits of ActionScript code similar to JavaScript that add functionality to your movies. You'll discover that actions are the power behind Flash; they allow you to communicate to different parts of your movies. If you keep all of your actions on a layer named Actions, you'll be able to locate them easily.

Cross - Reference

There's an entire Bible on just Flash ActionScript! Check out Macromedia Flash 2004 MX ActionScript Bible (Wiley) if you are serious about digging into ActionScript. The topic is far too involved for the focus of this book.

Guide layer

If you right-/Control+click the layer name, you see the Guide option. This is a layer where you can keep any guide you want to use. For example, you can set up guidelines for your movie and store them on this layer. You can also use shapes, such as a rectangle, that you want to arrange other objects around or maybe a bitmap image of a mockup to use as a guide. Content you put on the guide layer does not export with the movie.

Motion guide

In Chapter 25, you learn how to make motion tweens using a motion guide. In short, when you select a tween object and right-/Control+click and choose Motion Guide, the object is added above the layer the tween is on. When it's added, it is added as a Guide layer. The name will be Guide plus the name of the layer for which it's a guide. An arch icon appears before the guide name indicating that it's a motion guide. You draw the path you want the motion to follow in the Guide layer. This layer doesn't export with your movie.


Importing Files into Flash

Flash is compatible with virtually all of the popular image file formats. Table 22-2 shows some of the files you can easily import. Chapter 23 discusses how to directly import assets into your movies Library.

Table 22-2: Image Formats for Flash Import
File Type | Extension | Description
Adobe Illustrator | .ai, .eps | These files import as vector graphics unless they contain bitmap images.
Bitmap images | .bmp, .jpg, .gif, . pct, .pict, .tiff | These are flattened images without layer or transparency information.
PNG | .png | This format supports alpha channels. PNG files imported from Fireworks into Flash maintain layers, vectors, and transparency.
PSD | .psd | These are Photoshop native files. Effects that are not compatible will not import properly, but you can choose to maintain layers and editability.
QuickTime Movie | .mov | This is a video format by Apple computers.
FreeHand | .fh7, .fh8, .fh9, . fh10, .fh11 | This is a vector-based format that maintains editability and many effects in Flash.
Toon Boom Studio | .tbp | These vector files preserve layers, scenes, sound, and more. There is a trial version on the CD-ROM.


Summary

In this chapter, you learned how to navigate through the Flash environment and how to find the various tools and panels. You learned how you can customize your own keyboard shortcuts. You also learned layer basics and saw a general list of file formats that you can import into Flash MX 2004.


Chapter 23: Designing Visual Content

Download CD Content

Overview

Visual content is the most important part of your Flash movie; it conveys your thoughts, concepts, ideas, and company image. ActionScripting can add the magic. The drawing tools in Flash MX 2004 are robust, and you'll be looking at some of them in this chapter. Some of the tools are so similar to FreeHand or Fireworks tools that this chapter doesn't repeat information, but it does include cross-references so you know where to look for details that have already been covered. You'll be looking at a tool called the Free Transform tool and the Envelope Modifier, which warps and distorts shapes. You can create three types of text boxes in Flash, and you'll look at each one of them. As you'll see in this chapter, there are many ways to work with, manipulate, and arrange objects with Flash.


The Drawing Tools

The drawing tools are located in the top portion of the Toolbar. Most shapes you draw will probably have a fill and a stroke. After you draw a shape, you can then select the fill and the stroke separately.

Fill and stroke basics

You start by drawing geometric shapes using the Rectangle or Oval tools (the instructions work for either Oval or Rectangle tools).

  1. Select the Rectangle tool from the Toolbar, or press R. Notice the Property inspector shown in Figure 23.1.

    Click To expand
    Figure 23.1: The Property inspector showing the properties for the Rectangle tool.

  2. In the Property inspector, click the Stroke Color box to select a color for the stroke. Select a number (pixels) for the stroke width. If you want a custom stroke, such as a dotted line, click the Custom button. You'll notice a lot of different options for the stroke's appearance.

  3. Click the Fill Color box to change the color of the fill. You can also choose one of the preset gradients at the bottom of the Swatch panel that opens. Later in this chapter, you learn about using gradients and bitmap fills.

  4. Select the Rectangle tool and drag out a rectangle just to see how it works.

  5. To edit a shape, select the Arrow tool and then click the rectangle's center. A dotted pattern indicates that the fill is selected. You can now change the fill or even delete it.

  6. With the Arrow tool, click the edge of the rectangle, and notice that a portion of the stroke is selected. There are four strokes on a rectangle. If you want to change them all, you need to Shift+select all four.

  7. If you want to select the entire object, including fill and strokes, double-click the object. You can group the object to edit or move it as one item by choosing Modify ® Group, or Ctrl/Command+G.

    Note

    You can also change fills and enter an RGB number in the Color Mixer (Window ® Color Mixer). This panel opens by default when you first install Flash.

Firoworks MX In FreeHand and in Fireworks, when you place one object on top of the other, each object remains separate. One covers or obscures the other, but both objects exist in their entirety. In Flash, if you place an object without a stroke on top of another object of the same color, they become one object when you deselect. If the objects are two different colors, the one you place on top cuts out the portion of the object below it, acting similar to a cookie cutter.

Rounded rectangles

Rounded rectangles are great for buttons and other interface objects, and they are easy to make. But you need to set the options prior to drawing the shape. Select the Rectangle tool, and in the Options area of the Toolbar, click the Round Rectangle Radius option. In the dialog box that opens, type the amount of the radius. Entering 100 makes a pill shape, and entering 30 makes a slightly curved corner.

Using the Pencil tool

The Pencil tool works much like a traditional pencil, making a free-form line. But with the Pencil tool, using a few tricks can make your drawing smoother or sharper. Select the Pencil tool and notice the Options area of the Toolbar. You can choose one of three options (Straighten, Smooth, Ink) prior to drawing. Or you can select the line and then apply one of the following options:

  • Straighten straightens all the curves in a line.

  • Smooth smoothes out angles, but you have no control over how much smoothing occurs. Practice with each setting to see how they respond.

  • Ink leaves the line just as you drew it.

You can also select a line and change the stroke properties in the Property inspector.

Using the Brush tool

The Brush tool is similar to the Pencil tool in that it's free-form. The line you draw with the Brush tool is a stroke, and as a stroke, you can apply the different stroke attributes, such as dotted lines and so on, from the Property inspector.

To modify an object already drawn, you need to select the object before using the Brush tool. When you select the Brush tool in the Options area, you see the top icon for Paint modes, which leads to the following options:

  • Paint Normal — No selection is required, and you use the Brush tool like a paintbrush.

  • Paint Fill — Applies the stroke to all areas of the selected fill.

  • Paint Behind — Draws the stroke behind the selected object.

  • Paint Selection — Applies the stroke to only the selected fill area.

  • Paint Inside — Doesn't paint over an existing object's border but remain inside the fill area.

The differences are shown in Figure 23.2.

Click To expand
Figure 23.2: The different Brush tool options.

The next icon in the Options area of the Toolbar is the Brush size; the last one is Brush Shape. You can also adjust the size by entering a pixel amount into the Property inspector.

Using the Pen tool

The Pen tool is what many consider the main drawing tool in Flash. It gives you the greatest control and flexibility. The Pen tool in Flash works like the one in FreeHand and in Fireworks. You place points, and they are connected by line segments. You can then alter or curve these line segments by adding and manipulating Beziér or tangent handles. For detailed instructions on using the Pen tool, refer to Chapters 6 and 15.

On the CD-ROM

In the Movie folder on the CD is a tutorial called Beziér Curves, which shows you how to use the Pen tool and manipulate the curves. It's made using the Fireworks Pen tool, but it works the same way in Flash.

Using the Ink Bottle tool

The Ink Bottle tool affects only a stroke's color, width, and style. To use the Ink Bottle tool, follow these steps:

  1. Draw a stroke.

  2. Make sure nothing is selected on the Stage; then select the Ink Bottle tool from the Toolbar.

  3. In the Property inspector, click the Stroke Color box and choose a new color. Change the stroke height and/or style.

  4. Click over any stroke.

Using the Paint Bucket tool to fill an object

You saw a little bit about editing fills in the "Fill and Stroke Basics" section earlier in this chapter. In this section, you learn how to use and edit gradient and bit fills. To use the Paint Bucket tool, follow these steps:

  1. Draw a rectangle. It fills with the currently selected color. It will have a stroke only if you currently have a stroke selected.

  2. To change the fill, deselect the rectangle by clicking anywhere on the blank part of the Stage.

  3. Select the Paintbrush tool from the Toolbar.

  4. Click the area to fill.

    Tip

    You can also change the fill and stroke of a solid fill (not gradient or bitmap) in the Property inspector after you select the object.

Using gradient fills

A gradient fill changes from one color to another gradually. You can have two or more colors and you can adjust the position of the colors. You mix gradients in the Color Mixer panel (Window ® Design Panel ® Color Mixer or press Shift+F9). To use a gradient fill, follow these steps:

  1. Click the expander arrow to open the Color Mixer (Window ® Color Mixer).

  2. Select an object to which to add the gradient fill.

  3. In the Color Mixer, open the Fill Style drop-down menu, and choose Linear or Radial. Figure 23.3 shows the Color Mixer with Linear selected. Notice the color ramp that appears with two color markers. By default, the one on the left is white and the one on the right is black.

    Figure 23.3: The Color Mixer with Linear fill style being selected.

  4. The default gradient of white to black is added. You can easily change the color by clicking either of the color markers. When you select one, the Color Proxy icon below the Color box is activated. You click the Color box to choose a new color for the selected marker.

    Tip

    If you don't want to make a new gradient but want to use one in the Swatches panel, instead of using the Color Mixer, you can choose any preset gradient or one you've saved from the Fill Color box on the Toolbar.

  5. To add another color, place your cursor below the ramp and you'll see a plus (+) sign near your cursor. Click to add another marker. Choose your color and add as many markers as you want. Move the markers around by dragging them.

    Tip

    If you choose the gradient fill prior to drawing your shape, it will be filled automatically with the gradient you selected.

  6. To save a custom gradient to the Swatches panel, click the Color Mixer Options pop-up menu and choose Add Swatch. Now you can choose this gradient directly from any Fill Color box when the Swatches panel opens.

  7. A feature unique to Flash is the ability to lock the gradient fill. This means you can have multiple objects filled with a continuous gradient. To fill continuous objects with a gradient, follow these steps:

    • Choose a gradient or make your own.

    • Select the Paint Bucket tool.

    • In the Toolbar, click the Lock Fill icon in the Options area of the Toolbar.

    • Fill one object, then the next. Notice how the gradient continues into the second object (see Figure 23.4).

      Click To expand
      Figure 23.4: The gradient is filled in the left rectangle and continues into the right rectangle.

    Fireworks MX Fireworks MX 2004 has an additional ramp in the Gradient Editor for transparency. In Fireworks you see the transparency only if the object is exported over the object it sits above. But you can import the Fireworks PNG into Flash and the transparency is true. In other words, you can move the object with Fireworks transparency settings around your Stage and see through to underlying objects.

Filling with bitmap

In the Fill Style drop-down menu of the Color Mixer, along with the Linear and Radial options for the Gradient, there is a Bitmap option. This option enables you to fill with an image. To fill with an image, follow these steps:

  1. Select an object.

  2. Choose Bitmap from the Fill Style drop-down menu in the Color Mixer.

  3. Navigate to the location of the image you want saved. Select it and open it. This image is added to your Library and shows up in the Color Mixers Bitmap Fill window. You can select any image from this window to use as a fill. To get additional images into your Library, use the File ® Import to Library method of adding images to use as fills.

    Fireworks MX It's a good idea to optimize your images in Fireworks prior to using them in Flash. Flash applies optimization, but Fireworks is more robust and offers you much more control.

  4. With a bitmap selected from the Bitmap Fill window, you can use the Paint Bucket tool to fill.

  5. To edit the fill's appearance, you can use the Fill Transform tool, which you learn about in the next section of this chapter.

    Cross - Reference

    For more information about using Web-safe colors and a more detailed description of using the Swatches panel, refer to Chapter 14.

Using the Fill Transform tool

The Fill Transform tool is used to adjust the position and size of gradients and bitmap fills. To use the Fill Transform tool, follow these steps:

  1. Select the Fill Transform tool.

  2. Click an object with a gradient or bitmap fill. After you click the object, you see a bounding box. Figure 23.5 shows a bitmap, linear, and radial fill with the various Fill Transform handles. As you pass your cursor over each square around the box, cursor tips indicate the function. You can perform any of the following functions:

    Click To expand
    Figure 23.5: Different Fill transform options.

    • Rotate the fill

    • Adjust the fill's width

    • Adjust the fill's height

    • Skewing the image

    • Scale proportionately

    • Enlarge or make smaller a linear gradient by dragging the square handle in the center

    • Change a radial gradient's position by dragging the first circular handle just below the square one

Using the Eraser tool

Using the Eraser tool is easy enough; you select the tool and drag it over the areas you want to erase. Several options control how the eraser performs. When you select the Eraser tool from the Toolbar, these additional options are available in the Options portion of the Toolbar:

  • The Eraser Mode drop-down menu includes the following:

    • Erase Normal — Erases any fill or style

    • Erase Fills — Erases only fills

    • Erase Lines — Erases only strokes and lines

    • Erase Inside — Erases within a shape

    • Erase Selected Fills — Erases only fills selected first

  • Faucet deletes any fill and/or stroke selected.

  • Eraser Shapes offers shapes and sizes from which to choose.


Utilizing the Text Tool

In Flash, you can use Type 1 PostScript fonts, TrueType fonts, and bitmap fonts (Mac only). You'll find that for PCs the TrueType fonts are most reliable and that the PostScript fonts can be problematic for both the Windows and Mac platforms. Be sure to test all fonts on your machine and also from a server, preferably on a computer that may not have the same fonts installed to test in real-world situations. If the user doesn't have the font and you haven't taken that into consideration, your design could fall apart. Later in this chapter, you learn how to ensure that everyone sees your movie exactly the way you want it to look.

To use the Text tool, follow these steps:

  1. Select the Text tool.

  2. Start typing on the Stage. Notice the text box that the text is in. There are three types of text boxes available:

    • Extending — The default. This box extends as you type.

    • Fixed — A fixed text box does not extend horizontally. To make a fixed text box, use the Text tool and click and drag until the outline shows the size you want. Text in a fixed text box automatically wraps vertically.

    Tip

    You can also adjust the width by pixels in the Property inspector after you've made the fixed text box. Select it and change the Width property.

    • Input — This text box is used for user input or for dynamically generated text from a database. To add an input text box, you change any text box's property in the Property inspector, as shown in Figure 23.6.

      Click To expand
      Figure 23.6: A selected text box being changed to an input text box.

    Note

    An input text box is used for the Flash interface for the Habit Alert site, and a dynamic text box is used on each e-card to accept the user input for the cards.

Setting text properties using the Property inspector

The text properties are similar to the rest of the Studio MX 2004 applications, but there are some exceptions. You take a look at each of the Property inspectors for static text, dynamic text, and input text. Figure 23.7 shows the Property inspector when you use the default of Static text.

Click To expand
Figure 23.7: The Property inspector for static text.

Some of the fields include the following:

  • Character Spacing, also known as kerning. This option enables you to add or delete space between characters.

  • Character Position, also known as baseline shift. This option determines where the bottom of the text sits.

  • Change Direction of Text changes the text's orientation horizontally and vertically.

  • Rotate Text.

  • URL field.

  • Selectable button is used when you want the user to be able to select, copy, and paste your text.

  • Use Device Fonts allows Flash to use an appropriate font from the user's system.

  • Format button, when clicked, presents a dialog box where you can enter line spacing and margin information.

Dynamic text properties

Dynamic text is pulled from a database and changes depending on user input. Figure 23.8 shows the Property inspector when Dynamic Text is selected. The first thing to notice is that there is an Instance Name field. You name the instance in the Property inspector. By naming it, you can reference it when you begin to add ActionScript.

Click To expand
Figure 23.8: The Property inspector as it appears when Dynamic Text is selected.

The other changes to the Property inspector include the following:

  • Line Type — You can choose whether you want single, multiple lines, or multiple lines without a wrap. The definitions for these options are as follows:

    • Single line — One line of text without any wrapping

    • Multiline — Multiple lines of text that wrap

    • Multiline No Wrap — Multiple lines that don't wrap unless the Enter/Return key is pressed

  • Variable — An additional field to enter a unique name so you can code the dynamic text to go to the right text box.

  • Render Text as HTML Button — You can retain certain HTML tags, such as bold, italic, underline, font, color, paragraph, and font size.

  • Show Border Around Text — This adds a border around the text box.

    Note

    When you choose to show a border, you'll see it in Flash, but if you choose not to, you'll see a dotted border around the text box in Flash, but it doesn't export with your movie.

  • Character button — This is used to enter information about font embedding.

    Caution

    The more characters you embed, the larger the file size will be.

Inputting text properties

The Input Text properties are similar to the dynamic text properties. The difference is that input text goes from the user's browser into a database and dynamic text goes from the database on a server to the user's browser. There are two additional options in the Property inspector when you choose Input Text (see Figure 23.9).

Click To expand
Figure 23.9: The Property inspector when Input Text is selected.

  • Password — In the Line Type drop-down menu there is an additional option of Password. This option displays the on-screen text as asterisks for security. You need to add the ActionScript to pass the information, however. This option only affects the on-screen view of the entered text.

  • Maximum Character field — In this field, you can limit the number of characters users can enter into the input text box.

Breaking text apart

Breaking text apart into individual letters can be useful. By breaking them apart, you can edit the individual letters, but more important, you can animate the letters.

Caution

After text is broken apart, it is no longer editable as text and the file size is larger.

To break text apart, follow these steps:

  1. Select a block of text.

  2. Choose Modify ® Break Apart. Each letter can be manipulated separately.

  3. If you want to alter the individual letters, select one and choose Modify ® Break Apart again.

  4. Select the Subselection tool, and select the letter you broke apart again. You'll see each point of the letter, which you can alter.


Using the Align Panel

The Align panel is shown in Figure 23.10. From this panel, you align objects to each other and the Stage. To access the Align panel, choose Window ® Design Panel ® Align (Ctrl/Command+K). The panel contains the following sections:

Figure 23.10: The Align panel.

  • Align — On the left you have the horizontal alignment with the options of Align Left Edge, Align Horizontal Center, and Align Right Edge. The button on the right shows the vertical options: Align Top Edge, Align Vertical Center, and Align Bottom Edge.

  • Distribute — The left set of options are Distribute Top Edge, Distribute Vertical Center, and Distribute Bottom Edge. The set on the right side includes Distribute Left Edge, Distribute Horizontal Center, and Distribute Right Edge.

  • Match Size — The options are Match Width, Match Height, Match Width, and Height.

  • Space — The options are Space Evenly Vertically and Space Evenly Horizontally.

  • To Stage — The option is Align/Distribute to Stage.


Using an Object's Envelope

Envelopes are used to warp ungrouped objects. They don't work on grouped objects, symbols, gradients, text, or bitmaps. But if you Shift+select multiple objects, envelopes work. To use an object's envelope, follow these steps:

  1. Select an object or objects (don't group them).

    Cross - Reference

    To use an envelope for text refer to the "Breaking text apart" section to make the text into a shape first. Then Shift+select each letter before going on to Step 2.

  2. Choose Modify ® Transform ® Envelope.

  3. You'll see two kinds of handles: square and circular (see Figure 23.11). You can manipulate the points using the square handles. The circular handles are tangent (Beziér).

    Click To expand
    Figure 23.11: The envelope with the handles manipulated.

  4. If you decide to remove the envelope effect, select it and choose Modify ® Transform ® Remove.


Editing Bitmap Images

In Flash you can draw only vector images, but you can work with bitmaps by importing them from other applications. For a discussion of bitmap and vector images refer to Chapters 6 and 17. You can optimize in Flash, but you have many more optimizing features in Fireworks. It's a good idea to optimize prior to importing into Flash.

To import bitmap images, choose File ® Import to place the image on the Stage and in the Library. Or choose File ® Import ® Import to Library to place it in your movies library.

To edit an imported bitmap, choose one of these options:

  • Right-/Control+click it and choose Edit with Fireworks.

  • In the Library panel right-/Control+click the name. You also have an option named Edit With, which enables you to navigate to a different editing application.

  • Click the Edit button in the Property inspector.


Converting a Bitmap into a Vector

If you want to convert a bitmap image in Flash to a vector, you can do this by tracing it with the Trace Bitmap command. You can get some pretty good traces; however, the better the trace, the larger the file. But it's a great way to produce a quick vector image from a bitmap.

Cross - Reference

You can find more information on vector images in Chapter 6 for FreeHand and Chapter 15 for Fireworks.

To trace a bitmap, select it and then choose Modify ® Bitmap ® Trace Bitmap. The Trace Bitmap dialog box opens and displays the following options:

  • Color Threshold — Specifies the number of colors that will be used. Flash averages the colors to limit the number. The lower the number, the more colors used and the larger the file size.

  • Minimum Area — Specifies the radius that Color Threshold uses to describe adjacent pixels. The smaller the number, the more detail.

  • Curve Fit — Determines how smooth the curves are. If the bitmap has smooth curves, select Very Smooth; if there are a lot of angles, choose Very Tight.

  • Corner Threshold — Similar to the Curve Fit except it refers to only the corners.

    Caution

    When you import a JPEG file, it has already been compressed. When you export your Flash movie, Flash compresses this image again. JPEGs that are compressed multiple times frequently result in artifacts. To avoid this, select the image and open the Library (F11). From the Library Options pop-up menu, choose Properties. The Bitmap Properties dialog box opens; choose Lossless from the Compression drop-down menu, and click OK.

Traces often have far more curves than you need for an acceptable image. To reduce the number of curves in the trace, choose Modify ® Shape ® Optimize. From the Optimize Curves dialog box, choose the amount of smoothing you'd like and click OK. A window opens telling you how many curves you started with, how many you have now, and the percentage of reduction.


Summary

In this chapter, you learned what the Flash tools do and how some of the Flash drawing features differ from FreeHand and Fireworks drawing tools. Various types of fills and strokes and editing methods were discussed. You saw how to work with bitmaps in Flash and how to convert one into a vector image.


Chapter 24: Symbols and Libraries

Download CD Content

Overview

Symbols are the main reason that file sizes in Flash can be kept to a minimum. Symbols are usable elements stored in the Library with other assets, such as sound and video. When a symbol is produced, it is automatically added to the Movies Library. You can drag an instance (a copy) of the symbol into your movie as many times as you'd like. Libraries can be shared between movies and even be made available to all movies.


Understanding the Library

The Library contains all the symbols for your movie. When you make a Movie Clip, button symbol, or graphic symbol, they all are automatically added to the Library. You can also import bitmaps, sound, and video files. Every Flash movie has its own library, but you can drag a symbol or other asset from one open Flash movie into another. To open the Library, press F11. Figure 24.1 shows the Library with various assets. Notice the different icons that represent the type of asset in the Library. The icon appears first, then the name of the item, then the type. You can change a name by opening the Library Options pop-up menu and selecting Rename.

Click To expand
Figure 24.1: The Library showing various icons, names, and types.

Importing into a library

You can import any graphic, image, sound, or video file into your current movie's library by choosing File ® Import to Library. The asset is added to the Library. You can then add it to your movie as many times as you want. You can also access items, such as sound, from the Library without placing them on the Timeline by using ActionScript.

Cross - Reference

You learn how to access sound from the Library using ActionScript without placing it in the Timeline in Chapter 26.

Using libraries

Your symbols or other assets are automatically added to the movie's Library when you produce them or when you drag one from another Library. To add sound, bitmaps, vectors, or QuickTime to the Library, you import them into your movie.

To use a symbol or other asset from the Library, you simply drag an instance (a copy) of the symbol or asset to the Stage.

You can add folders to your Library to help organize content. The folders in no way change the path to your symbols. For large movies you may have several scenes and many assets, making the Library difficult to navigate. Putting your assets in folders by scene, by topic or however it makes sense to you, will aid you in quickly finding an asset.

Sharing libraries among movies

If you have more than one movie open, you can drag assets from one to another. But if you don't have other files open and don't need them open, you can still borrow the assets of another movie by opening its Library. Choose File ® Import ® Open External Library, navigate to the file that has the library you want, select it, and click Open. Only the Library opens, not the whole file. This is similar to the way common libraries work, except it's more a use-as-you-need method rather than having the library permanently available.

Common libraries

There is another type of library — a common library. If you choose Window ® Other Panels ® Common Libraries, there are three options: Buttons, Classes, and Learning Interactions. Simply drag an asset from a Common Library onto the Stage. These libraries are available to all movies.

If you have a Library in a movie that you want to make into a Common Library, save your Flash file with a descriptive name and place into the Libraries folder of the Flash program on your hard drive. You can delete this file anytime you decide you don't want it any longer. As soon as you drop the file into the Libraries folder, it is available in Flash. You don't have to close and reopen the program.


Using Symbols

There are three types of symbols: Movie Clips, buttons, and graphics. When you make a symbol, it is automatically stored in the movie's Library. To insert the object into the movie, you drag instances of it onto the Stage from the Library. When an instance of a symbol is placed on the Stage, there is little to no increase in the file size.

You can alter these instances to appear differently when in fact they are still an instance only of the original symbol. The movie has to call the symbol only once; then Flash stores information about any size, color, or transparency changes you've made.

Symbols also save you a great deal of time if you have to edit them. When you edit the original symbol, all instances are changed automatically. You'll love this if you've ever had to change an element in a large Web site without symbols.

After you start making symbols, you should develop your own (or a company) naming convention. The symbols must be named so you can reference them when adding ActionScript. Because symbols are stored in the Library, it's vital that you understand how to use the Library.

You can convert an existing object on the Stage into a symbol by choosing Insert ® Convert to Symbol. When the Convert to Symbol dialog box opens, shown in Figure 24.2, name your symbol and select the type you want.

Click To expand
Figure 24.2: The Convert to Symbol dialog box.

If you want to add a new symbol, choose Insert ® New Symbol, and the same dialog box opens. Name it, choose the type, and click OK. The symbol is now in the Movies Library. You can drag the symbol onto the Stage.

Movie Clip symbols

Each Movie Clip symbol has its own Timeline and layers. Movie Clip movies can be used in a single frame on the main Timeline. One of the best advantages of Movie Clips is that they play independently of the main Timeline. Because you can add actions to Movie Clips, there are infinite possibilities. You can generate dynamic animation, such as an object that moves during playback when the user presses keys on the keyboard.

Flash predefines the Movie Clip object. Movie Clips can be instances, but they can also be objects. As an object they have characteristics you can access and control. Some of the properties you have control over govern appearance — for example, transparency, visible or not or you can set a color, size, and position.

To convert an object into a Movie Clip, choose Insert ® Convert to Symbol, name it, and select the Movie Clip option. To convert a movie on your Stage into a Movie Clip, follow these steps:

  1. Select any frame (of the movie you want to make into a Movie Clip) that doesn't contain a keyframe and choose Edit ® Copy Frames (Ctrl/Command+Alt/Option+C). Alternatively, you can right-/Control+click and select Copy Frames.

  2. Choose Insert ® New Symbol (Ctrl/Command+F9/F8) to convert the movie into a symbol. The Symbol Properties dialog box opens.

  3. In the Symbol Properties dialog box, choose Movie Clip.

  4. After Step 3 the Stage is empty, because you are in Symbol Editing mode. In the upper left corner, you see Scene 1, but the name of your movie is in white, indicating you are in the Symbol Editing mode. The sStage and Timeline you see are both for the current symbol. Select the first frame of the Timeline and choose Edit ® Paste Frames (Ctrl/Command+Alt/Option+V).

  5. Double-click the Layer 1 name and give it an appropriate name.

The Movie Clip is now in the Library ready to be inserted in the main Timeline of a movie.

Empty Movie Clips

You can use an empty Movie Clip when you don't want graphics. Empty Movie Clips can still have actions attached to them. They are similar to invisible buttons (later in this chapter). Empty Movie Clips can have instance names, so you can control them with ActionScript. To make an empty Movie Clip, follow these steps:

  1. Choose Insert ® New Symbol (F8).

  2. Give the symbol a name.

  3. Choose the Movie Clip behavior and click OK.

  4. Return to the main scene.

  5. Drag an instance of the Movie Clip from the Library to the Stage. A white dot on the Stage represents the empty Movie Clip.

Button symbols

Button symbols are popular and useful for navigation buttons. You can add sound, animation, and actions to button symbols. To make a button symbol, follow these steps:

  1. With a new Flash movie open, choose Insert ® New Symbol (F8). In the Symbol Properties dialog box, choose the Button behavior, and click OK.

  2. You are now in Button Edit mode. Take a moment to look at the Timeline (see Figure 24.3). Notice the Up, Over, Down, and Hit tabs. Up is the default. Draw a button, drag on a button graphic, or import one.

    Click To expand
    Figure 24.3: The Button Symbol editor.

  3. Select the frame under the Over tab, and choose Insert ® Keyframe (F6). Change the button's appearance for the Over state.

  4. Repeat step 3 for the Down state.

  5. Select the frame under the Hit state, and choose Insert ® Keyframe (F6). The user can't see what you draw here. Draw a rectangle large enough to cover the button; otherwise, only the text will be the "hit" area. The hit area is the area in which the action assigned will be triggered when the mouse passes over it. In this case, it's a rollover.

  6. Notice your button is a symbol in the Library. If you didn't name your button in the Symbol Properties dialog box, you can do it now by double-clicking the symbol name and giving it a suitable name. Click Scene 1 to return to the main movie. To use your button, drag an instance from the Library to the Stage.

    Note

    You can test your button by choosing Control ® Enable Simple Buttons.

Invisible button symbols

Invisible buttons are not a separate or different kind of symbol. Because they are used so frequently as "hit" areas, they need to be mentioned. An invisible button is a hot spot to which you can assign actions. You put them over other objects. Because they are a transparent blue color, you can position them easily.

To make an invisible button, follow these steps:

  1. With a new movie open (or your current movie) choose Insert ® New Symbol. In the Symbol Properties dialog box, choose Button behavior and click OK.

  2. Select the frame below the Hit tab and choose Insert ® Keyframe (F6).

  3. Draw the shape of your invisible button. The color of the fill makes no difference, and a stroke or no stroke makes no difference. It is added to the Library.

  4. Click Scene 1 to return to your main movie. You can drag the invisible button from the Library onto the Stage.

  5. Click on the Control menu and check to see that the Enable Simple Buttons option is unchecked.

  6. The invisible symbol is invisible in the Library, so drag the name onto the Stage. But once on the Stage it isn't invisible to you, so you can easily position it.

Graphic symbols

Graphic symbols have the least capabilities in Flash. They are great for repeating static elements or for simple animations. You cannot add actions or attach sound to a graphic symbol. To make a graphic symbol, follow these steps:

  1. With a movie open, choose Insert ® New Symbol. In the Symbol Properties dialog box, choose the Graphic Behavior and click OK.

  2. You are now in Symbol Editing mode. You can draw, drag, or import the content for the symbol. It will be added to the Library.

  3. To return to the main Timeline, click Scene 1. Drag an instance of the graphic symbol onto the Stage wherever you want it, and as many times as you want to.

Editing symbols

To edit a symbol, do one of the following:

  • Double-click the Symbol instance on the Stage.

  • Double-click the Symbol icon to the left of the symbol's name in the Library.

  • Click the arrow for the Edit Symbols icon on the Stage and Symbol bar, and select the symbol you want to edit from the list.

Above the Stage is the Scene and Symbol bar. Notice that after you double-click a symbol or choose it from the Symbol list, you'll see the symbol name on the bar, as shown in Figure 24.4.

Click To expand
Figure 24.4: The bar above the Stage showing the scene and symbols in the Edit mode.


Summary

In this chapter, you learned how to make and add symbols to your movies and to the movie's Library. You also learned how to use a Library from another movie and how to import additional assets into your current Library.


Chapter 25: Animating a Movie

Download CD Content

Overview

Animation is the appearance of movement. The effect of movement or changes made over time make your images appear to move. Using Flash for animation is much like making traditional animations, where each movement or change is drawn. But Flash offers even the traditional animator some fantastic time-savers, such as being able to "tween" images. By drawing only the starting and ending image, you can have Flash produce all the in-between images for you.

Beginners and experienced animators alike are using Flash every day to produce some visually stunning animations. In this chapter, you learn the basics of how to add movement to your images.


Working with the Timeline

The Timeline controls all the timing, which determines how long your movie plays, when it plays, what plays, and basically everything involved in producing your Flash movie. What the viewer sees from the time the movie starts to when it stops is determined by where you place the content on the Timeline.

The Timeline sits on top of the Stage area of your movie. Figure 25.1 shows the Timeline, which sits on the top of the Stage by default.

Click To expand
Figure 25.1: The Timeline.

You can reposition the Timeline by clicking and dragging the gripper. It comes in handy to be able to move the Timeline when you have two monitors; then you can move the Timeline off the Stage altogether onto a separate monitor. It's a great way to view all the layers at the same time.


Frames and Keyframes

To make an animation, you use the Timeline to control the timing of your images. When a series of images varies slightly from page to page, these images will to move as you "flip" the pages. Images are placed in frames, and each time a major change occurs in the animation, an image is placed in a keyframe, as you'll see in some of this chapter's exercises.

When you begin to build an animation, the first frame is automatically an empty keyframe. This is designated by the small empty circle you see in Frame 1 (see Figure 25.1). After you place content into this empty keyframe, it becomes a keyframe and is indicated by a solid black circle. The remaining frames are all placeholders containing the same content as the keyframe until you add another keyframe. Whenever you want to make a major change in position, shape, or color, you need a keyframe. Think of keyframes as denoting that "I need another sheet of paper" to draw the next position.

For a simple demonstration of keyframes and frames, follow these steps:

  1. Select Frame 1 in the Timeline.

  2. Draw anything on the Stage. Move the red playhead and notice that whatever you have on the Stage is in all the frames.

  3. Click in Frame 10.

  4. Choose Insert ® Blank Keyframe (F7).

    Note

    You could also choose Insert ® Keyframe (F6). Which action you need to perform depends on what you are going to do. If you are adding to or moving the current keyframe's content and want its content to remain, choose Keyframe. But if you want to remove the content of the current frame totally, choose Blank Keyframe.

  5. Draw a new shape. Now as you move the playhead, you see your first shape in Frames 1 to 9 and the new shape in Frame 10 (see Figure 25.2).

    Click To expand
    Figure 25.2: New content added to the Stage in Frame 10.

Of course, this isn't an animation yet, but understanding the difference between frames and keyframes is vital.


Frame-by-Frame Animation

Frame-by-frame animation is the traditional way of making animations such as cartoons. Every frame has a slightly different image on it to produce the appearance of movement. This is a long and tedious process but at times the only way to achieve the desired results. For a frame-by-frame animation, every frame is a keyframe and the image changes slightly in each frame. To get a better feel for a frame-by-frame animation, follow these steps:

  1. Open a new document.

  2. Choose File ® Import ® Import to Stage, and from the Chapter 25 folder, select HighHeron.swf. Click the Stage to place it. This is an animation that was created in FreeHand.

  3. Click Frame 1 and notice the content (see Figure 25.3). Move the playhead to Frame 2, Frame 3, and so on. The position of the bird and wings changes in every frame, thus the need for a keyframe. You'll also notice that every frame has a solid black dot indicating that it is a keyframe.

    Click To expand
    Figure 25.3: A frame-by-frame animation showing the Timeline with keyframes for each movement change.

Frame-by-frame animations produce larger file sizes because each frame contains different content. In the following sections, you learn about tweening, which reduces the file size because it uses symbols altered to achieve movement. Because of the use of symbols, there are fewer actual objects for the browser to download. This reusable content makes Flash so powerful.

Onion Skinning

The Onion Skinning feature is a great way to see the "pages" of your animation. It's used to assist you in placement of objects in your keyframes. You can see a faint image or just the outline of the other frames.

To turn the Onion Skinning option on, click the icon at the bottom of the Timeline. In Figure 25.4, you can see the Onion Skinning option is turned on, but for this bird it would be difficult to use it for placement.

Click To expand
Figure 25.4: Frame 10 is selected and the Onion Skinning option is turned on.

If you use the Outline option (click the Onion Skinning Outlines icon as shown in Figure 25.5). The position of the bird is much easier to see. If you want to see the frames after the selected keyframe, click and drag the little hollow circle near the selected frame.

Click To expand
Figure 25.5: Frame 10 is selected and the Onion Skinning Outline option is turned on.

Frames per second

The frames-per-second setting determines how many frames play in a second's time. If you make it too low, the animation is choppy when it plays. If you make it too fast, it may begin to drop frames on slower machines, producing a choppy movie. For the Web, it's a good idea not to go over 15 fps. The default in Flash is 12 fps, which is compatible with older computers with low processing speeds.

If you want to slow down an animation, you would add more frames. To speed it up, use fewer frames. You can change the fps settings using one of these options:

  • In the Timeline, double-click the FPS box to open the Document Properties dialog box. Change the fps setting and click OK.

  • Choose Modify ® Document to open the Document Properties dialog box. Change the fps setting and click OK.

  • Press Ctrl/Command+J to open the Document Properties dialog box. Change the fps setting and click OK.

Adding frames

If you need to add more frames, choose one of the following methods:

  • Insert your cursor where you want to add a frame and choose Insert ® Timeline ® Frame.

  • Insert your cursor where you want to add a frame, right-/Control+click, and choose Insert Frames.

  • Insert your cursor where you want to add a frame, and press F5.

  • To add multiple frames Shift+select and press F5 (or one of the other methods for inserting frames).

Deleting frames

If you want to speed up a portion of your animation or delete unnecessary frames for optimization purposes, choose one of the following methods:

  • Select a frame or Shift+select multiple frames, and choose Edit ® Timeline ® Remove Frames.

  • Select a frame or Shift+select multiple frames, right-/Control+click, and choose Remove Frames.

  • Select a frame or Shift+select multiple frames, and press Shift+F5.

Reversing frames

Reversing frames comes in handy if you want to change the direction of an animation. To accomplish this, follow these steps:

  1. Select the frames (Shift+select) you want to reverse.

  2. Choose Edit ® Timeline ® Copy Frames.

  3. Select the frame you want to put the reverse animation into and choose Edit ® Timeline ® Paste Frames.

  4. To reverse the order, Shift+select the pasted frames and choose Modify ® Timeline ® Reverse Frames.

Labeling a keyframe

When you want to add ActionScript, you'll need to reference your keyframe. You could just use the frame number, but it's much more difficult to remember. You can name only keyframes, not frames. To label a keyframe, follow these steps:

  1. Select the keyframe you want to label.

  2. In the Property inspector, enter the name in the Frame field on the left.

  3. Look in the Timeline and notice a little red flag over the keyframe you added a label to.

    Note

    Flash enables you to label a frame in the Property inspector, but it's deceiving. If you do this and check the Timeline, the label is applied to the previous keyframe, not the selected frame.

Table 25-1 shows some frame and keyframe shortcuts.

Table 25-1: Frame and Keyframe Shortcuts
Command | Shortcut
F5 | Add static frames
F6 | Add a keyframe
Shift+F5 | Delete frames
Shift+F6 | Delete keyframes
F7 | Add a blank keyframe

Changing the pivot point

If you want to give your animation an anchor point other than the center, you need to change the pivot point. To do this, follow these steps:

  1. Open the head.fla file from the Chapter 25 folder. This object has already been converted into a symbol.

  2. Select Frame 2 and add a keyframe (F6).

  3. Select the symbol on the Sage (head object); then select the Free Transform tool. Notice the hollow circle in the center. This is the pivot point. To see how the object would rotate as it is now, place your cursor outside the object until you see the curved line with two arrows, and then drag to rotate. Notice in Figure 25.6 that the object rotates from the center point.

    Click To expand
    Figure 25.6: The pivot point in the center and rotated to the right.

  4. Choose Edit ® Undo.

  5. To move anchor or pivot point, simply drag the hollow circle to a new location. For this exercise, drag it to the bottom center. Now rotate toward the left, and notice the difference (see Figure 25.7).

    Click To expand
    Figure 25.7: The pivot point moved to the bottom center and rotated to the left.

  6. Select Frame 3 and add a keyframe. Select the Free Transform tool and rotate to the right. Press Enter/Return to play the simple animation. Figure 25.8 shows the animation with Onion Skinning option turned on.

    Click To expand
    Figure 25.8: The object rotated to the right with the Onion Skinning option turned on to show the rotated movement.


Motion Tweening

Motion tweening is movement between two symbols. Motion tweening uses a beginning and an ending symbol. Flash fills in the steps in between for you. The shapes between the two symbols are based on changes, such as location, size, rotation, color, and transparency, you make to the symbols. The two symbols have to be the same, but you can change characteristics. Because there are only two keyframes and two symbols involved, you save on file size.

The basic steps to make a motion tween are simple:

  1. Open the head.fla file from the chapter25_exercises folder or revert to the saved version (File ® Revert). It's a symbol that is in Frame 1.

  2. Select Frame 20, add a keyframe (F6), and move the symbol to a different location.

  3. Select Frame 1, and in the Property inspector, choose Motion from the Tween drop-down menu. Notice the line with an arrow in the Timeline from Frame 1 to Frame 20. This indicates the motion has been added. A dotted line indicates an improperly working tween.

Move the playhead over the frames and notice all the intermediate shapes Flash added. It's really that easy to add motion to two instances of a symbol. After you select a tween type, the Property inspector changes and offers several more options, as shown in Figure 25.9.

Click To expand
Figure 25.9: The properties available for a motion tween.

Notice that you can set Rotate and Ease options, which determine the acceleration and deceleration of the tween. The Ease setting determines whether the object moves slower or faster. A setting of 0 is a constant rate of movement; a negative value eases into the animation slowly at the beginning and faster at the end. Just how slow or fast depends on the amount you enter. A positive value is just the opposite; the animation begins fast and slows down at the end.


Timeline Effects

Flash MX 2004 has some great effects with a very user-friendly interface you can apply to your images. Each dialog box is pretty self-explanatory and shows a preview of the effect.

Assistants

The Timeline Effects are located in the Insert menu. Choose Insert ® Timeline Effects ® Assistants to check out the first category of effects. The first one is to Copy to Grid, as shown in Figure 25.10.

Click To expand
Figure 25.10: The Copy to Grid Timeline Effect.

Notice in the Copy to Grid dialog box that you can enter the number of rows and columns, and the spacing between them. If you make changes, click on the Update Preview button to see the results. Click OK when you are finished.

The next effect in the Assistants category is Distributed Duplicate (Insert ® Timeline Effects ® Assistants ® Distributive Duplicate). You first decide how many duplicates you want; then you have quite a few options for position, rotation, scaling, and even opacity, as shown in Figure 25.11.

Click To expand
Figure 25.11: The Distributive Duplicate dialog box.

Effects

The Effects category of the Timeline Effects contains effects such as Blur, Drop Shadow, Expand, and Explode. Experiment with the different settings in the dialog boxes, and use the Update Preview button to see the changes before you commit to the effect.

Transform/Transition

The Transform/Transition category contains Timeline Effect for transformations and for transitions. Choose Insert ® Timeline Effects ® Transform/Transition ® Transform. The dialog box in Figure 25.12 appears.

Click To expand
Figure 25.12: The Transform dialog box.

Notice how many transformations you can control in this one dialog box. You set the number of frames for the duration, position, size, rotation. You can even put a spin to it and change the color and the opacity from start to finish. The option at the bottom is Motion Ease. This determines the speed of the effect at the beginning or end of the animation.

The last effect is Transition. With this effect, you can fade and wipe an image. There isn't a lot of control with this one, other than the direction, the duration, and the speed.

Making an e-card using motion tweening

Habitat Alert site We used motion tweening extensively for one of the e-cards for the Habitat Alert site so you can learn how to use motion tweening by making a simple e-card. This is based on a small, animated banner that Japi Honoo made in Chapter 20.

FreeHand MX & Fireworks MX Because the banner made in Fireworks used vector graphics (made in FreeHand), they were easily resized for use in Flash.

  1. Click Flash Document in the Create New column in the Welcome window to open a new document.

  2. Click the Size button in the Property inspector, change the Width to 600x400, and click OK.

    Note

    If you can't see the document properties, click on the Stage.

  3. Choose File ® Import ® Import to Stage, navigate to the chapter25_exercise folder, and select ecard1_bk.gif and open it.

  4. Double-click the layer name and name it background (see Figure 25.13).

    Click To expand
    Figure 25.13: The background image in place and the layer renamed.

  5. Add a new layer and name it goldleft. You are going to add some gold herons that move from the left of the Stage and stop when they are on top of the blue herons; then repeat for the right side.

  6. Choose File ® Import ® Import to Library, navigate to the chapter25_exercise folder, and select goldheron.png. The Fireworks PNG Import Settings dialog box opens. Choose to import to a new layer and to keep paths and text editable, and click OK (see Figure 25.14).

    Click To expand
    Figure 25.14: The Fireworks PNG Import Settings dialog box with the settings used.

  7. When you import the Fireworks file as a Library item, it is automatically made into a symbol. Choose Windows ® Library (F11) to open the Library panel.

    Note

    If you use the keyboard shortcuts to open a panel such as F11 for the Library, it will toggle. So if your Library is already open and you press F11, it will collapse.

  8. Drag a copy of the goldheron symbol onto the Stage from the Library. Notice that the keyframe on this layer has a solid black dot because you added content. Make sure the goldleft layer is selected before dragging.

  9. Position the gold heron directly on top of the blue herons, and note the y coordinate of 142.3 in the Property inspector. Use your left arrow key to move the birds off of the Stage to the left, as shown in Figure 25.15.

    Click To expand
    Figure 25.15: The gold herons added to the second layer and moved off the Stage.

  10. Select Frame 25 and insert a keyframe (F6). You no longer see the background. You need to extend the Timeline for your background image. In the background layer right-/Control+click the first frame and choose Insert frame (or press F5). Now drag the little hollow white rectangle to Frame 25. The gray line extends to Frame 25.

  11. Back in the goldleft layer with Frame 25 selected, drag the goldheron symbol from the left of the Stage, and position it exactly on top of the blue herons (x: 98.5, y: 142.3). You now have one symbol in Frame 1 and one in Frame 25. Now all you need to do is add the tween.

  12. Select the first keyframe of the goldleft layer, and in the Property inspector, select Motion from the Tween drop-down menu. Press Enter/Return to see your animation. Lock the goldleft layer.

  13. Add a new layer and name it goldright.

  14. You want this animation to play at the same time as the left heron layer, so select Frame 1 and place a goldheron symbol from the Library off to the right of the Stage with a y coordinate of 142.3.

  15. Select Frame 25 and press F6 to insert a keyframe. Place the symbol from the right side on top of the blue herons (x: 98.5, y: 142.3). Select Frame 1 and add the motion tween (Insert ® Create Motion Tween). Press Enter/Return to play the animation. Figure 25.16 shows the Timeline so far.

    Click To expand
    Figure 25.16: The Timeline showing both motion tweens added.

    Note

    Only one motion tween can be on a layer.

  16. Save the animation. A copy is saved for you in the chapter25_exercise folder named ecard1_gold.fla.

Adding opacity settings to a motion tween

Motion tweens are good for more than simple motion. You can also change the symbol's properties, such as color and opacity, as well as transformations. The Habitat Alert e-card uses a simple text animation that moves and fades in and out. You add the first bit of text here; then you can inspect the finished file to see how the same techniques were used to finish the animation.

  1. Open ecard1_gold.fla if you closed it.

  2. Click in the background layer and insert (F5) 14 frames to extend the background to Frame 40.

  3. Add a new layer and name it saveit. Lock the goldright layer.

  4. On the saveit layer, select Frame 26, and add a keyframe (F6). You want the text animation to begin playing after the gold herons have moved into position.

  5. Choose Insert ® New Symbol. Name it saveit, choose Graphic, and click OK. The Symbol Editor opens.

  6. Select the Text tool. Click on the page to open the text attributes in the Property inspector, and change the font to Arial Black with a size of 96. Click the Color box and type a hex number of 7A9ABA. Using lowercase letters, type the words save it into the Symbol editor.

  7. Because you want a stroke on the text, you have to break the text apart. With the text selected, choose Modify ® Break Apart. Repeat one more time; you'll see little dots in the text.

  8. Select the Ink Bottle tool, and set the stroke color to black and the width to 1 pixel. Click at the edge of each letter to give it a black stroke (see Figure 25.17).

    Click To expand
    Figure 25.17: The stroke being added to the text

  9. Return to Scene 1 (click the words Scene 1 at the top left) and drag a copy of the symbol of saveit from the Library onto the Stage. Position at x: 126, y: 240.

  10. Select Frame 40 and insert a keyframe (F6), which has a copy of the text in it. Since you want to fade the text to almost invisible, select the text. In the Property inspector in the Color drop-down list, choose Alpha. After you choose alpha, the opacity field becomes available. Change it to 20%.

  11. Select Frame 26 and choose Insert ® Create Motion Tween (or select Motion from the Tween menu in the Property inspector). Move the playhead and notice how the text fades.

  12. The next word starts from a fade on the same frame as the words "save it" and goes to full opacity. Add three more frames to the background layer. In the saveit layer, select Frame 41 and insert a new keyframe.

  13. Choose Insert ® New Symbol and use the same font type, except change the color to 999933. Type the word or. Break it apart and give it a black stroke. Return to the Stage and drag a copy to the center of the "save it" text.

  14. Select or and change the color to Alpha and 20%. Select or: and choose Edit ® Copy.

  15. Add a new layer and name it or. Select Frame 41 and add a keyframe. Choose Edit ® Paste in Place. This pastes "or" in the same position as the previous layer. The text is now ready for you to add another symbol to it and apply a motion tween. The rest of this animation uses the same techniques used in this exercise. You can find the finished file, named ecard1.fla, in the chapter25_exercise folder which you can use for reference.


Tweening along a Path

Flash has a special layer called Motion Guide. This layer is used as a guide path for your animation to follow and is not exported with your animation. You can make the path using any of the drawing tools, or you can import an EPS or AI file format to use. If you choose to import a file, you'll need to ungroup the object first.

To add a Motion Guide layer that contains a path for your symbol to move along, follow these steps:

  1. Make a simple motion tweened animation. In Frame 1, draw a circle and press F8 to convert to a symbol. Select the graphic, name it if you want, and click OK. Add a keyframe (F6) to Frame 10. Select Frame 1 and choose Insert ® Motion tween.

  2. Click the Add Motion Guide icon in the Layers area. This action places a guide layer above the animation layer. The name is Guide Layer; it is placed above the layer it is going to be used as a guide for.

  3. Select Frame 1 of the Motion Guide layer, and use any drawing tool to draw a path. Figure 25.18 shows the animation so far.

    Click To expand
    Figure 25.18: A Motion Guide layer added above the tweened animation and a guide drawn.

  4. To attach the animation to the path, select Frame 1 of the animation. Choose View ® Snapping and be sure Snap Align has a check by it. If not, select it.

  5. Select your object and drag, placing the registration point (circle) at the beginning of your path, as shown in Figure 25.19.

    Click To expand
    Figure 25.19: The object placed with its registration point at the beginning of the Motion Guide.

  6. Select the last keyframe. Click and drag to place the registration on the end of the path.

    Note

    If the registration point doesn't appear, click the circle with crosshairs and click and hold for a second or two; then drag it to position.

  7. Press Enter/Return to play the animation.


Shape Tweening

Shape tweening follows the same steps as motion tweening with a few exceptions. You can't shape tween a bitmap, a grouped object, Movie Clips, or text blocks unless you break them apart first. If you are going to tween more than two objects, they all have to be on the same layer. If the shapes are complex, you can control the resulting tween by using shape hints.

  1. Open shape.fla. Select Frame 20 and add a keyframe (F6).

  2. Add a new layer.

  3. Select the Pen tool, and in the Property inspector, change the fill color to black and the size to 4.

  4. Click the head image, where the center of a smile would be, and draw a short line. If you press Shift while you click the second point, you get a straight line, as shown in Figure 25.20.

    Click To expand
    Figure 25.20: A dot added to Frame 1 for the beginning of a shape tween.

  5. Select Frame 20 and add a keyframe. Select View ® Rulers and pull a guide down on top of the line you drew for the mouth. You can use this to position the full smile. Delete the short line.

  6. Draw a full smile. The easiest way to draw a smile is to click the first point for the top of the left side of the smile, click the upper-right side, and drag to form the mouth curve, as shown in Figure 25.21. Be sure the smile is on top of the guide.

    Click To expand
    Figure 25.21: The mouth drawn using the Pen tool.

  7. To add the shape tween, select Frame 1 and go to the Property inspector and choose Shape from the Tween drop-down menu. For this exercise, you don't need any other options, but take note of the following options available for a shape tween:

    • Easing — Positive values of 1 to 100 ease out the tween. Changes occur quickly at the beginning and ease out toward the end. To ease in, you choose a negative value.

    • Distributive Mode — This is an option in the Blend drop-down menu. Use this option when you don't want to preserve any of the straight lines or curves.

    • Angular Mode — This is an option in Blend drop-down menu. Angular mode preserves the corners and straight lines in the in-between shapes.

  8. Press Enter/Return to play the animation.

Start Sidebar

Flash MX Masking Effects, by Charles E. Brown

This section presents an interesting project employing techniques I use to introduce a Flash site. You use some text and masking effects. I have purposely set this up using only basic techniques. There are, of course, more sophisticated ways to do some of what you do here. You learn some fundamental principles using the techniques I show in this exercise.

Setup

You start by laying out some groundwork for this small project. You will probably find these steps useful for other projects.

  1. Create a new movie and use the Property inspector, or choose Modify ® Document (see the following figure). For this example, the following settings are used:

    • Canvas Size — 600 pixels wide and 400 pixels high

    • Background Color — #0000FF

    Click To expand

  2. Select the Text tool and use the Property inspector to set the text characteristics. As an example:

    • Font — Arial Black

    • Size — 35 points

    • Color — Black

  3. Type the text Macromedia Studio MX 2004 (or any text you choose).

    Press Esc.

  4. Using the Align panel (Window ® Design Panels ® Align), center the text on the Stage.

Flash animations can become pretty complex. You should properly label all layers and objects.

  13. Double-click the Layer 1 label at the beginning of the Timeline. Name it Introduction Text.

Creating the mask

Creating a mask is like taking a piece of cardboard, cutting a hole in it, and putting it in front of your text. The hole can be any shape and size. Flash gives you the ability to move the cutout. The example used here to illustrate this principle is simple:

  1. Create a new layer above the text and call it Mask (see figure).

  2. Draw a white circle, with no stroke, and make it 60 pixels high and 60 pixels wide. Make sure it is off the left side of the Stage and that its center point is approximately centered with the text.

  3. Press F8 to convert to a symbol, and select Graphic.

  4. Create a keyframe for both layers at Frame 40 (see figure). Select Frame 40 and press F6 for each layer.

  5. Make sure you are in Frame 40. Shift+click to keep the movement straight, while you drag the circle to Stage right (see figure).

    Click To expand

  6. Select Frame 1 of the Mask layer and add a motion tween. When you test it, it will look like a white circle going across the text.

  7. Right-/Control+click the Mask layer and select Mask. Several things should happen: The text and circle looks like it has disappeared, and the Text layer indents under the Mask layer. The indented layer is the masked layer. In addition, the layers are locked. Locking the layer is essential for the mask to work properly.

  8. Try running the animation. You should see the text appear in the circle cutout as it moves across the Stage.

Editing the mask

Now that you have the basics set up, you'll do a little editing to make more happen.

  1. To edit your mask, unlock the layers.

  2. Place a keyframe in Frame 60 for both layers (see the following figure).

    Click To expand

  3. Select Frame 60 of the Mask layer and move the circle to the center of the text.

    Click To expand

  4. Select Frame 40 of the Mask layer and add a motion tween.

  5. Lock your layers, and test the animation again.

  6. If all is working well, unlock the layers again.

  7. Place keyframes for both layers in Frame 80.

  8. With Frame 80 of the Mask layer selected, select the circle graphic and then select the Free Transform tool.

  9. Using the graphic handles, enlarge the circle so that the dimensions are approximately 600 pixels wide by about 400 pixels high. This size fills most of the Stage, leaving rounded corners (see the following figure).

    Click To expand

  10. Select Frame 60 and add a motion tween.

  11. Lock your layers and test your movie again. You should see the mask move from left to right, back to the center, and then enlarge to reveal the entire text.

More text animations

Now that the text is introduced, you create some additional text animations. First, move the existing text up:

  1. Unlock the layers and hide the Mask layer (click the eye icon column to hide the layer's visibility) so you can get to the text easily.

  2. On the introductory text's layer, create a keyframe at Frame 90. I am not going to extend the Mask layer any longer, because you will not be using it again. If, later on, you want to use the mask again, you need to expand that also.

  3. Select the text box, and press the Shift and the up arrow key to move your text up 10 pixels.

  4. Select Frame 80 and create a motion tween.

  5. Before you test your movie, make sure you relock your layers and unhide the mask. Next you'll bring additional text into play.

  6. Create a new layer called Dreamweaver MX 2004 and place it below the introductory text layer by dragging it down. Notice that it is indented below the masked layer. This will not hurt anything, but if you want to create a normal indentation, choose Modify ® Layer. Select Normal. Notice that you can change several layer properties using this dialog box. Click OK.

  7. Make sure the new Dreamweaver MX 2004 layer is selected. Press F6 to make Frame 90 a keyframe.

  8. Select the Text tool, type Dreamweaver MX 2004 below the Macromedia studio MX text, and center it. Make the text size 20 points. You can use the Align panel to center the new text against the original text.

  9. To create a fade-in effect, convert your new text into a graphic symbol (F8). Call your new symbol Dreamweaver.

  10. Making sure the Dreamweaver symbol is selected, open the Color drop-down list in the Property inspector and select Alpha.

  11. Extend both text layers to Frame 100 by adding a keyframe (F6).

  12. Return to the Frame 90 in the Dreamweaver layer and select the text symbol.

  13. Set the Alpha to 0%.

  14. Go to Frame 110, select the symbol, and set the Alpha to 100%.

  15. Select Frame 90 and add a motion tween to the Dreamweaver layer.

  16. Make sure all layers are locked and turned on. Play your movie. You should see the words "Dreamweaver MX" fade in.

  17. Unlock the layers and create a new layer called Fireworks MX 2004. Place it below the Dreamweaver MX layer.

  18. Insert a keyframe at Frame 110. Type the words Fireworks MX 2004 below the Dreamweaver text. Use the Align panel to center the new text with the Dreamweaver text.

  19. Extend the three text layers by putting keyframes in Frame 130.

  20. Create a motion tween in the Fireworks layer at Frame 110.

  21. In the Property inspector, select the Rotate Property. Select CW for clockwise rotation, and set the number of rotations to 3.

    Click To expand

  22. Just setting a rotation is interesting. However, it is not a very graceful way to bring in the text. Make certain you are still on the keyframe of Frame 110 of the Fireworks layer.

  23. Open the Transform panel (Window ® Transform). Set the dimensions to 0.0% If you have Constrain checked, both settings should be set to near 0; 1.0 is fine.

  24. Click Frame 130. The Transform panel should show 100. Leave it at that.

  25. Test your movie again. You should see the last text rotate in.

  26. Create a new layer at the bottom and call it Flash MX 2004.

  27. Insert a keyframe at Frame 130.

  28. Select the Fireworks MX text box, and click Copy.

  29. Select the Flash keyframe at Frame 130.

  30. Select Edit ® Paste in Place. Theoretically, you have the same text on two locations in the exact spot.

  31. Extend each of the four text layers by extending the Timeline to 150. Add a keyframe at 150.

  32. Select Frame 150 on the new Flash layer, press the Shift, and press the down arrow key three times to move the text down 30 pixels.

  33. Create a motion tween at Frame 130 of the Flash layer. You should now have Fireworks MX in two places (see figure).

    Click To expand

  34. Create keyframes for the text layers at Frame 170.

  35. Select Frame 150 in the Flash layer. To create some text effects, you sometimes need to break the text to its root level.

  36. Place another keyframe at Frame 151 to distinguish animations.

  37. Go to Frame 170 in the Flash layer. Doulble-click the text, change it to Flash MX 2004, and align it horizontally.

  38. Choose Modify ® Break Apart twice. The text will be small dots.

  39. Return to Frame 151 and choose Modify ® Break Apart twice to break this text apart also.

  40. Using the Property inspector, create a shape tween between Frames 151 and 170. Shape tweens should be used when you are changing a shape or color. Shape tweens do require a bit more computing power and should be used sparingly.

  41. Test your new movie now.

Finishing touches

You now need to add one finishing touch to the movie. You have one problem yet. Your movie will just continue moving. Here is a quick technique for stopping the movie, using an ActionScript:

  1. Create a new layer at the top and call it ActionScript.

  2. Select Frame 170 and place a keyframe there.

  3. Choose Window ® Actions, or Press F9.

  4. Your panel should say Actions–Frame and ActionScript:170, identifying the keyframe you will add ActionScript to.

    Click To expand

  5. Open the Global Functions ® Timeline Controls folder in the Actions panel (left side). Double-click Stop. Close the Actions panel. Notice that a lowercase "a" appears in the keyframe.

    Click To expand

  6. Now export the movie, using File ® Export ® Export Movie. Choose a name and a location and click Save. You can now play your movie using the Flash Player.

You just learned some simple techniques for creating stunning effects. And you barely used any programming whatsoever. Try experimenting with some variations of these techniques.

On the CD-ROM

A copy of the finished file is in the chapter25exercise folder and is named mask.fla.
End Sidebar


Summary

In this chapter, you learned the differences between frames and keyframes, as well as how to use and edit them. You then discovered how easy it is to make a motion tween and saw some of the variations you could make, such as following a path or tweening opacity. Making shape tweens was just as easy and powerful.


Project Summary

Habitat Alert site Let's take a look at what you've done in this chapter that will be used in the Habitat Alert Web site. Some of the images need additional work in another section; others are ready to use in another application.

Files Prepared for Habitat Alert Web Site
Images | What Was Done | Where to Now
ecard1.fla | You made the beginnings of a simple e-card using motion tweens. | You add ActionScript to this file in Chapter 26 when you add some sound. It will also interact with a database using ColdFusion in Chapter 29.


Chapter 26: Working with Sound

Overview

Adding sound to your Flash movies can certainly enhance them, but if used improperly, the sound can irritate and even chase away visitors. When sound is used judiciously, however, it can convey your message in a way that is memorable. Using sound effectively also means understanding that you need to edit the sound files to make them as small as possible and still maintain the sound's integrity. Sound files can add a tremendous amount of download time to a file. Flash MX 2004 enables you to do some minor sound editing, but if you use sound frequently, you'll want to get a sound editor to do the job. A few recommendations are made in the "Editing Sound Files" section of this chapter.


Sound Files

The type of sound files you can import depends on your operating system. For instance, Windows supports WAV files and Macintosh supports AIFF, but Windows and Macintosh both support MP3. There are additional sound types that may be compatible with your operating system.

When working with sound, you will see some terms frequently, and it's important to understand what they are.

  • Sample rate — In a digital recording, the computer examines the sound wave and takes snapshots of its amplitude. The snapshots are called samples, and the speed at which they are taken is the sample rate. In most consumers' digital audio, the sample rate is 44.1kHz or 44,100 samples per second. The sample rate is used to describe sound along the x-axis.

  • Bit depth — Bit depth measures sound along the y-axis. Bit depth is either 8- or 16-bit for digital audio. 16-bit offers more clarity and truer sound.

  • Panning — You can assign left and right channel information for stereo sound. Stereo is played through two simultaneous channels, and each channel has a unique position. Mono is a single channel and is best used for dialog or sound effects.

Importing sound files

You need to get the sound files into the Library of your movie; to do this, follow these steps:

  1. Habitat Alert site Navigate to the chapter26_exercise folder and open ecard1.fla.

  2. Choose File ® Import ® Import to Library.

  3. Navigate to the location of your sound files. Select one or multiple files, and open. To practice, navigate to the chapter26_exercise files and select Heron's Song.mpe.

  4. Press F11 to open the Library panel. You can see that your sound file is now added. Leave this file open for the next exercise.

Adding sound to the Timeline

It's a good idea to add a new layer for your sound, because it makes it easier to identify. Plus, if you have multiple sounds in your movie, you'll need to put each one on its own layer. You can practice adding sound to the Timeline on one of the e-cards for the Habitat Alert site. To add sound to the Timeline, follow these steps:

  1. Habitat Alert site Using ecard1.fla from the previous exercise, select the forever3 layer and add a new layer. Name this layer sound.

  2. Select Frame 1 of the sound layer.

  3. In the Property inspector on the far right is a Sound field. Click the drop-down menu and you will see the Heron's Song.mp3 file you imported. Select it.

  4. The Effects menu and Edit button in the Property inspector are activated. You won't be adding effects now, but be aware that they are here and available. You'll be using the Edit button in the next section of this chapter.

  5. In the Sync field, click the arrow to open the menu, and choose Event. The options are as follows:

    • Event — This is the default selection and is best used with shorter sounds.

    • Start — Similar to Event, the Start option starts the sound and plays it entirely. If this option is used on a button, the sound plays only once, and only one instance of the sound can play at a time. This means that if you happen to mouse over another button while the sound is playing, another instance will not begin to play at the same time.

    • Stop — This stops sounds that were cued using the Event or Start options. For streaming sync, you need to determine how many frames you want to have no sound in and then remove the appropriate number of frames (Shift+F5) for the part of the animation you want silence in.

    • Stream — This option locks the movie's frame rate to the playback of the sound. This is not recommended for looping sound but is great for scored music, lip sync, multitract, and component audio.

  6. In the Property inspector, enter the number of times you want your sound to loop.

  7. Save your file. A copy of this file is saved in the habitat_alert_final_designfiles/Flash folder as ecard1_sound.fla in the final site file folder. Leave this file open for the next exercise.


Editing Sound Files

In Flash, you can edit where a sound begins and ends, as well as adjust volume and create fade-ins and fade-outs, by following these steps:

  1. For practice you can use the file from the previous session or navigate to the habitat_alert_final folder and the designfiles\Flash folder and open the ecard1_sound.fla file.

  2. Select Frame 1 of the Sounds layer to activate the appropriate properties in the Property inspector.

  3. Click the Edit button. Figure 26.1 shows the Edit Envelope dialog box.

    Click To expand
    Figure 26.1: The Edit Envelope dialog box.

  4. Drag the Time In control for the start point and the Time Out control for the end point.

  5. Use the envelop handles to adjust the volume for fade-ins and fade-outs. You can also choose a preset from the Effects menu.

  6. Choose a loop.

  7. Click Play to test.

  8. Click OK.

For further editing, you'll need to use a sound-editing program. You can use a command called Normalize to boost the sound (use a setting between 96 and 98), which you can then adjust the volume in Flash. Prior to using a sound file, you'll need to check for any dead space at the beginning and end of the file and remove it. The dead space adds a pause before the sound plays, plus it adds to the weight of the file. If you want or need pauses, it's better to program them in rather than leave dead space in your file. Of course, there are a lot of other reasons to edit your file. The actual editing of files is beyond the scope of this book.

Note

A great sound editing program is Sound Forge (www.sonicfoundry.com/). Another one is Cool Edit (www.syntrillium.com/cooledit/).


Adding Sound to a Button

You can enhance the effect of a button with an appropriate sound. When the user mouses over or clicks the button, he or she hears the sound you attached. To add a sound to a button, follow these steps:

  1. Import the sound file into the Library (File ® Import ® Import as Library).

  2. Select the button symbol.

    Cross - Reference

    Making button symbols is covered in Chapter 24.

  3. Click the Edit button in the Library panel, and notice the Timeline change. You can now see the Up, Over, Down, and Hit states of the button (see Figure 26.2).

    Click To expand
    Figure 26.2: The Timeline for the button symbol.

  4. Add a new layer and name it sound.

  5. Select the Overstate and add a keyframe (F6).

  6. In the Property inspector, select the name of your sound file from the Sound drop-down menu.

  7. Select the type of sync you want.

  8. Choose an effect if you want.

  9. Return to the main scene and test the button by choosing Control ® Enable Simple Buttons. Pass your mouse over the button to hear the sound.


Stopping Sounds

A sound plays until the frames run out or until the looping option you set runs out. But you can program a sound to stop at other times by following these steps:

  1. Select the frame in the Sound layer where you want to stop the sound.

  2. Add a keyframe (F6).

  3. Select the sound filename from the Sound field drop-down list in the Property inspector.

  4. From the Sync menu, click on the Stop option. Now when the new keyframe is reached, the sound will stop.


Stopping All Sounds

To stop all sounds in a button or frame, follow these steps:

  1. Select the button frame or another frame with sounds.

  2. Open the Actions panel (F9).

  3. Click the Actions folder; then open the Global Functions ® Timeline Control category.

  4. Double-click the stopAllSounds action to add it to the script window. Or you can use Expert mode and type stopAllSounds();.


Exporting and Compressing Sound Files

If you have more than one sound file per movie, you'll want to set the compression for each individual file because you may be able to compress some more than others. Sound files can add a tremendous weight to your movie, so you need to compress and edit carefully for the best effect and impact. If the movie takes too long to load, many people on modem connections simply won't wait. To set the compression settings for a sound file, follow these steps:

  1. Open the Library panel (F11).

  2. Select a sound file.

  3. Right-/Control+click and select Properties. Figure 26.3 shows the Sound Properties dialog box.

    Click To expand
    Figure 26.3: The Sound Properties dialog box.

  4. Click the Update button if you edited the file outside of Flash. Click the Test button to hear any changes you've made.

  5. From the Compression drop-down list, choose a compression type. The options are as follows:

    • Default — This applies the settings you have set in the Publish Settings dialog box. You can change the Publish Settings to change the default.

    Cross - Reference

    Publish Settings is covered in more detail in Chapter 28.

    • ADPCM (adaptive differential pulse code modulation) — This is normally used for short sounds.

    • MP3 — CD or near-CD quality. Used for music, dialog, and long sounds. A quality setting of 20 or above gives you the option of stereo channels or mono. The quality setting of Fast is the best compression, but the worst quality. Medium is better than the fast compression. Best is the least compression, but it gives you the best quality for music or sounds that are important.

    • Raw — This option applies no compression at all.

    • Speech — This is new in Flash MX and is meant for human speech. If you select this option but export for Flash 5, it will be converted to ADPCM.

  6. Click the Test button to hear the sounds.

  7. Click OK when you are done.


Using Sound Objects

So far you've attached sound to the Timeline. By using Sound objects, you can use ActionScript to access the sound even if it isn't in the Timeline. A Sound object is a predefined ActionScript object, which contains the information about the movies sounds and its properties. Objects have properties, which are variables that contain data. By attaching a Sound object to a sound, you can pass information from it to the sound. The Sound object has methods (which can be applied to unique instances of the object) that send and retrieve information about your movie and its objects. The Sound object has methods that set and check values, panning, play, and stop actions. Sound objects can control the following:

  • All sounds loaded in the current movie

  • All sounds currently available in the Flash Player

  • Sounds in a specific Movie Clip

  • A specific sound to which the object is attached

The generic constructor for a Sound object is as follows:

SoundObjectName=new Sound("targetInstance");

In Chapter 24, you learned about Movie Clip objects. The Sound objects (as well as the Color and Date objects) are a bit less forgiving than the others and require formal rules. The Sound object needs to be instantiated using a constructor function such as the following one:

newObject(); for sound it's newSound();

Using newSound() doesn't really do anything. You need to store the object in a variable. By using mySound=newSound(), you create a new instance of the Sound object and place it into the variable mySound. mySound can be referred to by its properties or by using a method (mySound.someProperty or mySound.someMethod()). The thing to remember is that you need to instantiate an object and place it in a variable before you can do anything with it.


Attaching the Sound to the Sound Object

By using ActionScript, you can access the sound from the Library, but sounds in the Library won't export by default with the movie unless they have been placed onto the Stage. You can override this by setting the Linkage properties. The sound then loads with the movie. To set the linkage and attach the sound, follow these steps:

  1. Habitat Alert site Open the ecard3.fla file from the chapter26_exercise folder.

  2. Import the Baby Heron Song.mp3 file to the Library (in the chapter26_ exercise folder).

  3. Select the sound in the Library panel.

  4. Right-/Control+click and select Linkage.

  5. Select the Export for ActionScript check box.

  6. In the Linkage Properties dialog box, shown in Figure 26.4, give it a unique identifier. (We used soundID.)

    Click To expand
    Figure 26.4: The Linkage dialog box.

  7. Click Ok and leave the file open.

    Now you are ready to attach the sound to a Sound object. An object can only have one sound attached. Use the attachSound method to attach.

  8. Select the top layer and add a new layer. Double-click to rename it, and name it sound.

  9. Select the first keyframe of the Sound layer, and open the Actions panel (F9). In the script pane, type the following code:

    heron=new Sound();@
heron.attachSound("soundID");
heron.start(0)

This creates a new instance of the Sound object named heron and attaches the sound using the identifier you added in the Linkage dialog box. (We used soundID.) Then you tell the sound to start.


Summary

In this chapter, you experimented with adding sound. You saw how to get sound into your movie's library, how to add it to a Timeline, and how to add effects. You also saw that you could do minor editing of sounds within Flash itself. Sound objects were introduced, and by using ActionScript, you were able to control the sound in a movie. You added the sounds to the e-cards for the Habitat Alert site.


Project Summary

No Habitat Alert pages were created or modified in this chapter, but you will use many of the extensions in other chapters to create features for the site. You could also build object tools for items used repeatedly for the site.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
ecard1.fla | You added a sound to the Timeline. | You will program this to use ColdFusion and access a database.
ecard2_squawk.fla | You added a squawk sound event to Frame 6. | You will program this to use ColdFusion and access a database.
ecard3.fla | You added a Sound object and attached the sound. | You will program this to use ColdFusion and access a database.
Ecard4.fla | A Sound layer was added to the Timeline and a fade-out effect used for the sound. | You will program this to use ColdFusion and access a database.


Chapter 27: Flash Components and Behaviors

Overview

Components in Flash make many tasks much easier. Components allow you to reuse complicated elements, such as user interfaces, charting, access to search engines, and many more, without having to rewrite them. Plus, if you use the ones that ship with Flash or from other third parties, you don't have to know how to write ActionScript.

Components are Movie Clips with parameters defined while being authored. They are containers that can hold many assets, all of which work together to produce the desired effect. For instance, you can drag the Button component onto the Stage; then you can change the text of the button or even the rollover color.

You can purchase components as well as find free ones, all of which greatly add to the flexibility of Flash.


Components

An entire collection of interface components ships with Flash MX 2004, and even more components ship with Flash MX Professional 2004. In this section you'll get a brief look at the components that ship with Flash MX 2004. You'll also see where to get more components and how to install them. Components are containers made up of assets and are powered using ActionScript 2. Each component has properties and parameters that you can edit to customize for your own use. To use a component, you simply drag a component from the Components panel onto the Stage. When you open the Library panel, you'll see a new folder containing the graphics and ActionScript of that component.

Components panel

To view the components that ship with Flash, open the Components panel by pressing F7, or choose Windows ® Components. The components that ship with Flash will be visible in this panel, as shown in Figure 27.1. All of the components that ship with Flash will be in the UI Components folder.

Figure 27.1: The Components panel showing the components that ship with Flash MX 2004.

Third-party components will be in their own folders below the UI Components folder, as shown in Figure 27.2.

Click To expand
Figure 27.2: The Ultimate Scroller component by Flashloaded (www.flashloaded.com) is listed in the Components panel.

Library

After you drag a component to the Stage, the component will be added to the Library. To open the Library, press F11 or choose Windows ® Library. You'll see the component name, the kind, link, and date, as shown in Figure 27.3.

Click To expand
Figure 27.3: The Library showing all components on the Stage. Use the scroll bar at the bottom of the panel to see the various component attributes.

Component inspector

You can edit the parameters of the component in the Component inspector. Open it by pressing Alt/Option+F7 or choosing Windows ® Development Panels ® Component Inspector. Figure 27.4 shows the Component inspector with the Window component selected.

Figure 27.4: The Component inspector showing the Window component parameters.

Notice all the different parameters you can set. There is also a yellow icon in the upper right corner that accesses help wizards if any are available. None of the components that ship with Flash MX 2004 currently have wizards available; however, you can easily find help for each component by clicking the Options menu and selecting Help on Component (see Figure 27.5). The Help menu with the appropriate page will load.

Figure 27.5: The Component inspector Options menu.
Cross - Reference

You can only edit the parameters you see in the Component inspector for the components that ship with Flash MX 2004. See the section "Compiled Components" coming up in the chapter.

Property inspector

Select a component on the Stage and edit its properties in the Property inspector. If you right-/Control+click on a component in the Library or the Components panel and select Properties, a dialog box opens telling you to use the Property inspector. You can also click the Parameters tab and enter a few of the parameters here, but you will normally have many more param-eters that can be edited in the Component inspector.

In the Property inspector you can also click the blue man icon on the right side of the inspector to access the accessibility options (see Figure 27.6). The question mark icon allows you to easily access help for the specific component you are working on. Of course, you can also name your component in the Component field.

Click To expand
Figure 27.6: The Property inspector showing the properties of the Button component.

Some third-party components allow you to alter the color; this option is available via the Property inspector. The choices available are Tint, Alpha Brightness, or Advanced. When you select Advanced, a Settings button appears; click it for additional editing options such as RGB (red, green, blue) colors and the Alpha Transparency.

ActionScript

You can add ActionScript to control some of a component's properties. Drag a component onto the Stage, and set its parameters; then, in the Actions panel, add an on() handler such as OnClick to the component to handle component events. You can also change the style colors, as shown in the following example.

To change the rollover and onClick color of the Button component, follow these steps:

  1. Drag the Button component to the Stage.

  2. In the Property inspector, name the button button1.

  3. Select Frame 1 in Scene 1.

  4. Open the Actions panel by pressing F9.

  5. Type the following:

    Button1.setStyle("themeColor", "red");
Button1.setStyle("property", value);

Compiled components

A compiled Movie Clip will display and publish faster than regular Movie Clips, but you can't edit a compiled Movie Clip. You can adjust some of the parameters, as shown in previous sections, and add some ActionScript to control them, but you can't edit every aspect as you could with an FLA file.

You can compile your own Movie Clip by selecting it in the Library, right-/Control+clicking, and selecting Convert to Compiled Clip. You can compile complex symbols with a lot of ActionScript code that doesn't change frequently so the symbols test and publish faster. For distribution see the following section on exporting as an SWC file.

Exporting an SWC file

The components that ship with Flash MX 2004 and Flash MX Professional 2004 are SWC files, not FLA files. The SWC format is what Macromedia uses for a Movie Clip that is intended for distribution. The creation of custom components is beyond the scope of this book, so refer to Flash MX 2004 Bible or Flash MX 2004 ActionScript Bible for more information on component creation. After you have a component, you can export it as an SWC file by right-/Control+clicking on your Movie Clip in the Library and selecting Export SWC File.


Adding Components

To add a component to your movie, follow these steps:

  1. Open the Components panel by pressing F7 or choosing Windows ® Components.

  2. Drag a component to the Stage to add an instance of the component. Alternatively, you can double-click a component and it will be centered on the Stage.

  3. Modify the parameters, properties, and graphics in the various panels, in the Library, in the ActionScript, or on the Timeline.

    Note

    Before you export your Flash file using the new components, be sure to change the Publish Settings to ActionScript 2.


Components that Ship with Flash MX 2004

Open the Components panel to view the components that ship with Flash MX 2004. They include the following:

  • Button component — A resizable button that can be customized with a custom icon

  • CheckBox component — Allows users to make a true or false choice

  • ComboBox component — Allows users to select one option from a scrolling list

  • Label component — A single-line text field

  • List component — Allows users to select one or more options from a scrolling list

  • Loader component — A container that holds a loaded SWF or JPEG file

  • NumericStepper component — Clickable arrows that raise and lower the value of a number

  • ProgressBar component — Displays the progress of loading

  • RadioButton component — Allows users to select one option

  • ScrollPane component — Displays movies, bitmaps, and SWF files using automatic scroll bars

  • TextArea component — A multiline text field with which you can copy text from a text editor and paste it directly into the text field in the Component inspector

  • TextInput component — A single-line text input field

  • Window component — A draggable window with a title bar, caption, border, and Close button that displays content

Getting and installing more components and extensions

You can download more components by visiting Macromedia Exchange (http://www.macromedia.com/cfusion/exchange/). You'll need to register if you haven't already, but that's all that is required. You'll find exchanges for most of Macromedia products, as well as some quick links to the most popular downloads.

To install an extension, you can simply double-click on the extension filename to open the Extension Manager. Accept any licensing agreements, and check in the Extension Manager to see that the extension is being installed for the proper program, such as Flash MX 2004 and not Dreamweaver.

To install SWC or FLA components, follow these steps:

  1. Close Flash.

  2. Put the downloaded SWC or FLA file into one of the following folders:

    • \Program Files\Macromedia\Flash MX 2004\<language>\FirstRun\Components (Windows)

    • HD/Applications/Macromedia Flash MX 2004/First Run/Components (Macintosh)

  3. Open Flash and then open the Components panel. You should see the new components. If not, open the Options menu and select Reload.

    Note

    The terms component and extensions are used inconsistently. Some components have the .mxp extension. You'll most likely be seeing more SWC components before long at the Macromedia Exchange as developers make them available.


Behaviors

Behaviors are prewritten ActionScript scripts that you add to an object to control some aspect of that object. Behaviors enable you to add the power, control, and flexibility of ActionScript coding to your document without having to create the ActionScript code yourself. You can use behaviors to control Movie Clips, video, and sound files. Figure 27.7 shows the Behaviors panel.

Figure 27.7: The Behaviors panel.

Using behaviors

You can add behaviors to objects without writing any ActionScript code. To use one of the Behaviors in the Behaviors panel, follow these steps:

  1. Select the object (such as a button) to use to trigger the behavior.

  2. Open the Behaviors panel by pressing Shift+F3 or choosing Windows ® Development Panels ® Behaviors.

  3. Click the Add (+) button and select the behavior you want to add.

  4. Fill in any information needed for the various dialog boxes that will open depending on the behavior you are adding.

  5. Set other parameters in the Property inspector.

  6. Default event and actions for the behavior appear in the Behaviors panel. If you want to change them, click the arrow near Event in the Behaviors panel and select another.

Embedded video behaviors

There are many behaviors that ship with Flash MX 2004, but let's take a look at one category — embedded video behaviors let you play, stop, pause, rewind, fast-forward, show, and hide a video clip. To control a video clip using a behavior, follow these steps:

  1. Select a trigger object and apply the behavior.

  2. Specify an event to trigger the behavior.

  3. Select the target object (the video).

  4. Add any behavior-specific settings.

The following behaviors are packaged with Flash MX 2004 and Flash MX Professional 2004 and are used to control embedded video:

  • Play Video — Plays a video in the current document

  • Stop Video — Stops the video

  • Pause Video — Pauses the video

  • Rewind Video — Rewinds the video a certain number of frames (you specify)

  • Fast Forward Video — Fast-forwards the specified number of frames

  • Hide Video — Hides the video

  • Show Video — Shows the video


History Panel

If you've used either Fireworks or Dreamweaver before, you've probably seen the History panel. But this panel is new to Flash MX 2004. The History panel records steps in the order that you perform them. You can use this panel to undo multiple or select steps. The History panel only shows the steps you've performed in the current open document. After you close the document, the steps are lost. To open the History panel, choose Windows ® Other ® History, or press F10.

One of the most useful uses of the History panel is the capability to repeat certain steps and apply them to another object. You can also record steps and save as a command to reuse in different documents. Figure 27.8 shows the History panel.

Figure 27.8: The History panel showing a few steps taken.


Commands

If you need to perform the same set of steps frequently, you can create a command to do it automatically. The steps will be replayed in the order they are recorded. To make a command, follow these steps:

  1. Select or Shift+select multiple items or Ctrl/Command+select to select noncontiguous steps in the History panel.

  2. Open the History Options menu and select Save as Command.

  3. Name the Command in the Save As Command dialog box.

  4. Select the object on which you want to run a command.

  5. Choose Commands. The bottom of the menu shows the names of any custom commands you've recorded. Select a specific command, and it will be applied.


Summary

In this chapter, you looked at the components that ship with Flash MX 2004, as well as how to edit them using the Component inspector and the Property inspector. You then learned how to use behaviors and the History panel, and how to make and save a command.


Chapter 28: Publishing Your Flash Movies

Overview

You are probably ready at this point to get some of your newly generated movies onto your Web server. The first thing you need to do is consider the size of your SWF movie file and its performance. In this chapter, you'll learn how to check your syntax and use the Debugger to help you locate any errors in your movie.

You learn a series of tips and tricks to optimize your images. It is beyond the scope of this book to teach you all the finer points of optimization, but the tips should help point you in the right direction so you know what areas to check. It should also show you where you need to brush up on your skills and where you need more specific information.


Optimizing Flash Movies

Carefully optimizing the individual elements in your movie and following some of the tips listed here will help you reduce the size of your SWF movie.

Bitmaps

It's a good idea to use large bitmaps as static background images only. It's not a good idea to use large bitmaps in an animation, because of the large size of the files. You can, however, use small bitmaps sparingly and animate them with a motion tween.

Cross - Reference

Refer to Chapter 17 for working with bitmaps and Chapter 25 for working with Flash tweens.

You get better results if you optimize your bitmaps in Fireworks before you place them into Flash. The difference in file size may not be much, but every little bit helps; plus, you have more control and optimization options in Fireworks. For instance, with the new Selective JPEG Compression feature, you can optimize portions of an image at a higher setting and optimize less important areas at a lower setting.

Keep in mind that when you export your Flash movie, Flash compresses your image again. JPEGs that are compressed multiple times frequently result in artifacts. To avoid this, select the image from the Library list (before you make it a symbol). From the Options pop-up menu, choose Properties. The Bitmap Properties dialog box opens. Choose Lossless from the Compression drop-down menu, and click OK.

Traced bitmaps

If you trace complex images, the file sizes may be considerably larger than the original bitmap version because of the complex curves. You can simplify the curves to make it less complex. Always check the file size to determine whether you need to redraw portions of the traced bitmap or even perhaps use the bitmap itself depending on the use of the image.

Animations

When you are making animations, it's best to use symbols as much as possible and then use tweens on the symbols. If you animate frame-by-frame, each keyframe has to load. If you animate using a motion tween or a guided motion tween, only the symbols have to load.

Cross - Reference

Refer to Chapter 25 for more information on building animations in Flash.

Symbols

You get small file sizes if you tween symbols instead of using large groups of objects. If you ungroup your elements, there are fewer paths involved for Flash. Plus, in a symbol, if there are no groups, any effects you apply are applied to the symbol as a whole instead of to groups within the symbol.

Paths

When you make vector images in FreeHand or other vector programs, simplify the paths as much as possible while maintaining the integrity of the paths. Vectors you make in Flash should have the paths optimized as well (Modify ® Shape ® Optimize).

Fonts

Fonts are embedded and the outlines are exported with your Flash movie; however, Flash does not necessarily support all fonts. It's easy to do a quick test to see if the fonts you want to use are acceptable. Choose View ® Preview Mode ® Antialias Text. If the text appears jaggy, it isn't compatible. If the text you need isn't design-critical, you can use device fonts: _sans, which is similar to Arial and Helvetica, _serif, which is similar to Times Roman, and _typewriter, which is similar to Courier. These fonts are the top three in the font drop-down list of the Character panel. You reduce the file size by using device fonts because they use the closest font match from the user's system, so there is no embedding of fonts in the movie.

Gradients

Solid fills add the smallest amount to your file size. Gradients should be used sparingly. Flash can do gradients up to eight colors; after that, the additional colors are broken up into separate shapes, which increases your file size.

Alpha versus Tint

When you add an Alpha effect to a symbol, it increases the file size. Use a tint if it'll do the trick for you. It's smaller. Try to limit the number of Alpha effects you have in the same symbol.

Layers and folders

Layers and folders are a great way to keep your movies organized: images on a layer, buttons on a layer, actions, and so on. Use all the layers and folders you want or need. They do not add to the finished SWF movie file size.

Sound

You should optimize each sound separately, as discussed in Chapter 26. Edit your sound to the absolute minimum to get the best sound at the lowest file size. Remember to edit out any dead space. If you use sound frequently, you may want to invest in a good sound-editing program.

If you want streaming sound, place it in the main movie Timeline and not in a Movie Clip. In the main Timeline, the sound begins at the appropriate frame and plays immediately. If it's in a Movie Clip, the entire file has to load before play begins.

On the Flash tab of the Publish Settings dialog box, you can compress audio streams and audio events separately so you can have a higher quality for music and lower quality for sounds that go with buttons.

Cross - Reference

Chapter 26 shows you how to add sound to your movies.


Debugging

The most frustrating part of making a Flash movie is when you choose Control ® Test Movie and it doesn't work. The most common error is incorrect spelling. When writing your ActionScript, you need to take extra care to spell things correctly each time you use them or reference an instance or a Movie Clip. It's important to check your movies frequently so you don't get to the end of a large project and discover it isn't working. It's a good practice to check and debug after each Stage of your movie.

Fortunately, Flash provides some tools for tracking down additional problems. It's easy to forget to select a frame in an action's layer and attach a button action to a frame that doesn't contain a button; this, of course, will return an error when you test your movie.

Following is a short list of troubleshooting tips to be aware of as you develop and test your movies:

  • Check your syntax often. In the Actions panel, use the Check Syntax button.

  • Use capitalization where needed. For instance, gotoandplay() won't work, because it needs to be gotoAndPlay(). Capitalization is important.

  • Include semicolons at the end of statements.

  • Use curly braces to enclose the statements of handlers and loops.

  • Be sure your target path is correct.

  • Be sure all Movie Clips and buttons are instances and have unique instance names.

  • Be sure all variables and functions have unique names.

Debugger panel

In the Debugger panel, you can monitor Movie Clip instances, variables, and properties. The Flash Debug Player is automatically installed. This player opens the Debugger. To use the Debugger, press Shift+F4 or choose Window ® Development Panels ® Debugger. To activate the Debugger, choose Control ® Debug Movie. Figure 28.1 shows that you can see the contents of the movie and that it is paused by default. Click the green Control button in the Code View menu to continue.

Click To expand
Figure 28.1: The Debugger panel.

The top portion of the Debugger panel is the Display list with the absolute path and nesting of all the current Timelines, including all Movie Clips. You can also access properties and variables from their respective tabs. The Watch tab lets you monitor specific variables on any Timeline.

Debugging from a browser

You can now access the Debugger panel to debug your movie from a Web browser. If you choose Debugging Permitted in the Publish Settings Default tab options, you can access the Debugger panel from the Debug Movie environment or from a browser that has the Flash plug-in. (You need to install the Flash Debug Player plug-in or ActiveX control. You can find it in the Players folder of your Flash MX application folder.) You should also require a password so others can't access the Debugger.


Remote Debugging

You can debug your movie while it's live on the server. You can debug movie variables, which communicate to and from a server, to ensure that the information is being exchanged properly. To use this feature, you need to enable remote debugging and then activate it from a remote location. To enable remote debugging, follow these steps:

  1. In Flash, choose File ® Publish Settings.

  2. Click the Flash tab (see Figure 28.2).

    Click To expand
    Figure 28.2: The Flash tab of the Publish Settings dialog box.

  3. Check the Debugging Permitted option.

  4. Enter password information if you want users to have to enter a password to use this feature.

  5. Click the Publish button. This produces a file with an .swd extension. This file is needed to perform remote debugging.

  6. When you are done, click OK.

  7. Upload the SWD file, SWF file or files, and HTML to your server. The SWD and SWF files need to be in the same directory.

  8. Before debugging, open Flash and press Shift+F4 to open the Debugger.

  9. From the Debugging Options pop-up menu, select Enable Remote Debugging.

To activate remote debugging, follow these steps:

  1. Use a browser or the standalone Flash player to open your movie from the remote location by entering its URL.

  2. In the Remote Debugging dialog box, choose one of the following:

    • Select Localhost — if the debug player and Flash MX are on the same machine.

    • Select Other Machine — if the debug player and Flash MX are on different machines. Enter the IP address of the machine running Flash MX.

  3. Click OK.

  4. Enter password information if needed.

  5. Click OK. The Debugger is activated.


Using Breakpoints

This feature enables you to pause a script to examine each line and its effect in your movie. Once paused, you may see additional bits of data. The line of code will be in the right side of the Debugger panel. If the line of code is in a function, you see variables, which are specific to the paused function, listed under the Local tab.

To set or remove breakpoints in the Debugger panel, follow these steps:

  1. In the Code View box (the large area on the right showing the code), select the line of code in which you want to set or remove a breakpoint.

  2. Choose one of the following options:

    • Click the Toggle Breakpoint icon above the Code View pane.

    • Right-/Control+click the line of code and select Set/Remove Breakpoint.

  3. You can now move through each line of the movie by using the following buttons located above the Code View pane:

    • Step Out — When the line of code is inside a function, this command steps outside of the currently enclosed function.

    • Step In — This advances to the next line of code.

    • Step Over — This skips a line within the function.


Output Window

When you test your movie, the Output window automatically opens and lists any errors. Whenever you test your movie, even if there are no errors, a menu item is added to the menu bar, as shown in Figure 28.3. Debug is added with additional menu options.

Click To expand
Figure 28.3: The Test Movie command with a new menu bar with the Debug menu in it.

The other options in the new menu are as follows:

  • List Objects — You can use List Objects in Test Movie or in Debut Movie modes to obtain a list of every element present on the Stage. This can be extremely helpful in checking target names.

  • List Variables — Again, if you are in Test Movie or Debug Movie mode, you can access a list of all variables in your movie and see their locations and values.


Using a Trace Action

Use a trace action to get a report about specific parts of your movie. Your queries are answered in the Output window. You can track things such as dead handlers, Movie Clip parameters, target paths, and so on. You can add a trace action to send the value of an expression to the Output window during Test Movie or Debug Movie modes. Select an object or frame in the Timeline, and open the Actions panel. You enter the trace action into the Actions panel like any other action. For instance, let's say you have an instance of a circle on Stage with properties of color and an X position and you want to check the properties; you would type the following into the Actions panel:

mycircle = new circle (0x660000, 40);
trace (mycircle.color); //the trace return in the Output window would be 660000
trace (mycircle.xPosition);  //the trace return would be 40

If you don't get a return, you know to check for errors.


Bandwidth Profiler

With the Bandwidth Profiler, you can simulate how long it will take a user to see your movie using different modem or cable speeds. To use the Bandwidth Profiler, follow these steps:

  1. Open the ecard2_squawk.fla file from the chapter28_exercise folder.

  2. Choose Control ® Test Movie.

  3. Choose View ® Bandwidth Profiler (see Figure 28.4).

    Click To expand
    Figure 28.4: The Bandwidth Profiler.

  4. From the Debug menu, choose the modem speed or custom speed you defined to simulate.

  5. Go to View ® Show Streaming. You see a simulation of the time it will take for your movie to load.


Publish Settings

You can access Publish Settings by choosing File ® Publish Settings. After your settings are all done, you can click the Publish button in the HTML tab if you want your movie in an HTML page or you can choose File ® Export for an SWF movie. The following options are available:

  • Format tab — The default tab that opens is Format. The Flash (.swf) and HTML (.html) are checked by default. SWF is the only format that maintains full functionality of your movie and ActionScript.

  • GIF — GIF is used primarily for images with a lot of flat color and when you want a transparent background. Its main limitation is the fact that it supports only 256 colors. When you check the GIF option, a GIF tab is added to the Publish Settings dialog box.

    Cross - Reference

    You can learn a lot more about GIF images in Chapter 21.

    The options in this tab enable you to format your Flash movie into a static GIF image or a GIF animation, which can be used if a user doesn't have a Flash player installed.

  • JPEG — JPEG is best used on images with more than 256 colors, such as photographs. Although gradients don't have that many colors, they also look better as JPEGs. Gradients in a GIF usually have banding, but as JPEGs they look great.

    Cross - Reference

    Full details of the JPEG options are covered in Chapter 21.

    JPEG images are compressed and then decompressed when they are opened. This means that although the file size is small, more memory is needed to decompress the image in the browser than for a GIF image.

    When you select the JPEG option, a JPEG tab is added to the Publish Settings dialog box. From this tab you can make some adjustments to the image. For example, you can change height and width, the quality, and whether you want to use the Progressive option.

    Note

    The JPEG options in the Publish Settings area do not override the settings you chose for the individual image in the Library under Properties. These settings are for static JPEG images you may want to export to the Flash movie.

  • PNG — PNG (Portable Network Graphics) was developed as an improvement over GIF and JPEG, which it is, if all the browsers actually supported its wonderful features. Its biggest advantage is that you can have transparency and lossless compression. Unfortunately, until these features are fully supported in the major browsers, the PNG format will not be used widely on the Internet. The PNG settings in this tab also apply to exporting a static image of your Flash movie.

  • Windows Projector — Choose this option if you want to export your movie as a stand- alone projector for use in Windows.

  • Macintosh Projector — Choose this option if you want to export your movie as a stand- alone projector for use on a Macintosh.

  • QuickTime — Starting with QuickTime 4, there has been built-in support for Flash SWF files, as well as something called a Flash track. Flash can import QuickTime movies, add Flash content, and then export the whole movie as a QuickTime movie. If you want to publish your Flash movie as a QuickTime movie, check the QuickTime option in the Format tab and make the appropriate selections.

    Note

    Real Player was supported in Flash 4 but not in Flash MX.

  • Flash tab — The Flash tab offers a lot of control over your movie settings. The following list looks at each option separately:

    • Version — Choose the version of Flash Player you want your movie to be compatible with. Be aware that new features of a version will not be compatible with older Flash Players. The new features in Flash MX will not be present in the Flash 5 Player.

    • Load Order — If you check this option, you can determine how your frames load. Bottom Up, which is the default, loads in ascending order: The lowest layer displays first, then the second, and so on. If you select Top, the frames load in a descending order.

    • ActionScript Version — You can choose between ActionScript 1 or 2. When you select version 2, the Settings button becomes available.

    • Generate Size Report — The size report can be quite useful in determining problem areas in bandwidth concerns. If you check this option, the Publish command exports a Simple Text (Mac) or TXT file (PC).

    • Omit Trace Actions — If you used trace actions while you were developing your movie, check this option. The Flash player ignores any trace actions used in ActionScripting. The trace actions open the Flash Output window for debugging purposes.

    • Protect from Import — If you check this option, it protects your Flash SWF file from being downloaded and imported into Flash. But Macromedia Director can import and use even protected SWF files. Some hacker utilities can get at a protected file as well. SWF files can be read in Notepad to see variables' names and values. Because of this, you should never include sensitive information, such as passwords, in your source file. The bottom line is that protecting your movies helps discourage the general audience from using your movies. Those who know how and are determined to steal your work can do so.

    • Debugging Permitted — With this option checked, you could access the Debugger panel from the Debug Movie environment or from a browser, which has the Flash plug-in. (You'll need to install the Flash Debug Player plug-in or ActiveX control. You can find it in the Players folder of your Flash MX application folder.)

    • Compress Movie — The move is compressed to reduce file size and download time. This new option to Flash MX works only in the Flash 6 player.

    • Optimize for Flash Player 6 r65 — The movie will be compatible with the Flash Player 6 r65 version.

    • Password — If you checked Allow Debugging, which can be accessed from an Internet browser, you should check this option so that the Debug Movie panel can only be accessed with a password.

    • JPEG Quality — The slider from 0 to 100 determines the JPEG compression applied to bitmap images. The higher the value you choose, the less compression applied. This setting doesn't override the choices made in the Library.

    • Audio Stream — The display you see listed is the current audio compression scheme for Audio Stream. If you click the Set button, you can alter the compression scheme. Like bitmap properties, the Audio Stream settings do not override the compression value if any compression other than the default is applied in the Sound Properties dialog box in the Flash Library.

    • Audio Event — The display listed is the current scheme for Audio Event. The Set button enables you to alter the settings. Audio Event works very much like Audio Stream.

    • Override Sound Settings — This option enables you to override any settings you made to the Sound properties in the Flash Library.

  • HTML tab — The settings in this tab control the way Flash publishes its movie to an HTML page. A lot of the options in this tab are self-explanatory if you understand how HTML works.

    The first option, Template, gives you options to choose from such as Flash Only for Pocket PC or Image Map. Make a selection; then click the Info button, which gives a description of the option and a bit of instruction. It would be a good idea if you haven't done so yet to check out the Info buttons on each option to familiarize yourself with everything you can do.

Make any other size, playback, quality, or alignment changes you want, and click OK when you are done.


Exporting Your File

After you have optimized your movie, debugged it, checked the download speeds in the Bandwidth Profiler, and set your Publish Settings, you are ready for the export.

After you set your Publish Settings, the export is one step: File ® Export. This exports your movie as a SWF file. If you want your movie to automatically be an HTML page, choose File ® Publish. The HTML file with your Flash movie embedded is generated automatically.

If you also selected other options, such as QuickTime, on the Format tab of the Publish Settings, these formats will be generated when you choose File ® Export Movie or File ® Export Image.


Summary

In this chapter, you learned how to optimize your Flash movies to reduce the file sizes as much as possible so your movies load faster in the user's browser. You explored many of the settings available and the export options you can use.


Project Summary

Only one of the e-cards was demonstrated in this chapter, but the techniques taught were used for each of the e-cards for the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
ecard2_squawk.fla | Debugged and Bandwidth Profile done, as well as published for the Flash 7 player | Ready to use in the e-card interface (Chapter 29)


Chapter 29: Using ColdFusion MX with Flash Remoting

Overview

Although Flash has traditionally been considered a designers' tool and ColdFusion a programmers' tool, the release of Macromedia Studio MX 2004 has done much to bring the two worlds together. Using a series of tools collectively called Flash Remoting, developers who are used to working in either program can now create integrated applications that share data between a Flash MX 2004 interface and ColdFusion MX programming logic. In this chapter, you learn how the two programs communicate, and you construct a basic e-card application to illustrate the basic concepts of Flash Remoting.

Note

To follow along with the Flash Remoting application presented later in this chapter, please install the Flash Remoting components that you can download from Macromedia's Web site at this URL: http://www.macromedia.com/software/flashremoting/downloads/components/.
Note

This chapter is aimed at the experienced Flash user.


Understanding the Link between Flash MX 2004 and ColdFusion MX

Prior to the merger of Macromedia and the Allaire Corporation (the creators of ColdFusion), there was no easy means of exchanging data between a Flash movie and a ColdFusion application. Still, developers recognized the inherent power in using the two programs together and came up with their own methods for doing so. These included elaborate ActionScript procedures, using XML documents as "translators," and other techniques that, while functional, were time-consuming to create and maintain.

But starting with the release of Macromedia Studio MX 2004, the two programs communicate with one another with a series of tools collectively called Flash Remoting. Using Flash Remoting, Flash MX 2004 movies can display the output of a ColdFusion MX query, for example, and they can also send complex data back to a ColdFusion MX application for processing. This union gives Flash designers the ability to work with dynamic data and ColdFusion MX developers the ability to create user interfaces that go far beyond the capabilities of standard HTML.

In general, applications that employ both Flash MX 2004 and ColdFusion MX are often considered in terms of display elements and logic elements. Display elements display information to a user and are usually constructed in Flash MX 2004. Logic elements are the parts of the application that perform computations, retrieve data from a database, and so on, and these are usually constructed in ColdFusion MX. Although there are no hard-and-fast definitions for either, it's good practice to design your integrated applications with a clear understanding of which program handles each of your application's various functions.

If you've worked with variables in previous versions of Flash, you know that it has the capability of reading a text file containing simple variable values:

first_name=Matt&last_name=Hogan

A Flash movie can then use those variables as part of its display, for example, to show a "detail" page for a single user. But what about a list of users that changes daily? In this case, there is more than one defined pair of first_name and last_name variables, and the Flash movie must be prepared to display anywhere from one to possibly thousands of first name/last name combinations.

The solution lies in complex-variable types. Remember that some special types of variables can hold more than a simple numeric or string value. Flash Remoting can use even more powerful variable types to pass complex data between ColdFusion and Flash. These may include structures, arrays, queries, scalars, and components. You learn more about some of these types as you proceed through this chapter.

In ColdFusion, the variable types most often used when communicating with Flash are structures and arrays. When a ColdFusion structure is passed to Flash, Flash treats it as an object or an associative array.

ColdFusion's structure variables can hold more than one value, but they go a step further by giving each value a key to identify it. Array variables are even more powerful, because they allow for multiple dimensions, meaning that there can be more than one value for, say, first_name or last_name within a single array variable. You find more information on structures and arrays in the two sidebars accompanying this chapter.

Start Sidebar
Understanding ColdFusion MX Structures

Structures are special ColdFusion variables that can hold multiple values. They employ a key to refer to an item by a name. The following code defines a structure called user within a ColdFusion template:

<!---create a new structure called "user"--->
<cfset user=StructNew()>

<!---define some keys and values--->
<cfset user.first_name="Don">
<cfset user.last_name="VanVliet">
<cfset user.street_address="12 Mojo Lane">
<cfset user.city="Los Angeles">
<cfset user.state="CA">

After the structure is defined, you can create any name-value pairs you like, as long as you use the structure's name as a scope when you define each variable. In the preceding example, the key names are first_name, last_name, street_address, city, and state.

To display the value of an item, you call it by its structure name and key:

<cfoutput>#user.last_name#</cfoutput>

The preceding snippet displays the value VanVliet.

An alternative way to display the same value is to use associative array syntax, which accepts the name of a structure and the name of key:

<cfoutput>#user[lastname]#</cfoutput>

That may seem like a more complicated way of displaying a simple value, but it's a useful tool when you want to display the complete contents of a structure as part of a loop. For example, to display all of the elements of the user structure defined in the preceding code, you could use <cfloop> in "collection" mode, like this:

<cfloop collection=#user# item="key">
     <cfoutput>
          #key#: #StructFind(user,key)#<br>
     </cfoutput>
</cfloop>

This special kind of loop enables you to quickly "unpack" the contents of a structure without having to refer to each key by its specific name. It displays output like the following:

first_name: Don
last_name: VanVliet
street_address: 12 Mojo Lane
city: Los Angeles
state: CA

Note that you don't have to include the value of the key in your output. It's only used here to show you how <cfloop> loops through the collection, one key at a time. Later in this chapter, you learn how to use a similar <cfloop> to unpack the contents of a special structure called flash, which contains the information sent from a Flash MX 2004 movie to a ColdFusion MX template.

End Sidebar


Understanding How ColdFusion MX and Flash MX 2004 Communicate

Before you begin to build your first Flash Remoting application, take a quick look at the steps that make integration possible.

Any Flash movie that will communicate with a ColdFusion template must include the special class NetServices.as. After it's included in a movie's ActionScript, that movie can call upon a ColdFusion template as an ActionScript function.

The called ColdFusion template can perform any number of queries, computations, and so on, as long as it saves the desired result as an object named flash.result. The Flash movie can then use that special object variable as input. The flash.result data may contain a simple variable, such as a name, or it may contain a more complex group of data, such as a set of records returned by a ColdFusion query.

Conversely, for a Flash movie to pass data to a ColdFusion MX template, the movie's ActionScript must call the ColdFusion template as a function and pass any necessary data as function arguments. When a ColdFusion template is called this way, the data passed by Flash is available as a special variable called flash.params, which may be used as input for further operations in the ColdFusion template. You gain a greater understanding of this process as you build a sample Flash Remoting application in the next section.


Creating an E-card Application with Flash Remoting

To get a feel for Flash Remoting, you start by constructing an e-card application for the Habitat Alert site. The entire card selection and viewing interface was built in Flash MX 2004, rather than in standard HTML.

Caution

Flash Remoting requires that your users have Flash Player 6 or greater.

The application uses a Flash interface, enabling a user to select from thumbnail images of picture "postcards." After selecting a card, the user sees a full-sized version of the card as an animated Flash movie. The movie displays for a few seconds, and then a Next button appears. After the user clicks the button, the movie advances to the next frame that has a form that allows the user to specify a greeting and the e-mail address of another user to whom the card will be mailed. The recipient will get an e-mail announcing the card and containing a link to view the card and custom greeting.

As you may have guessed, this application draws much of its information from a database. The titles, thumbnail paths, and Flash movie names for each postcard are stored in a table named cards. The users' custom greetings and e-mail addresses are inserted into a table named greetings. You'll find the Microsoft Access database titled ha.mdb on the CD-ROM accompanying this book. Note that if you've worked the examples for the Habitat Alert site in the previous chapters, you'll already have the database installed as a data source and may skip the next section.

Note

Why store the card information in a database? Why not just hard-code the titles and thumbnail images into the Flash movie? The reason is that you're creating an e-card application that will be scalable, so that if Habitat Alert wants to add new cards or modify data on existing cards, they can do so simply by editing text information in the e-cards database, rather than having to redesign a Flash movie.

Setting up the data source

If you completed the newsletter application in Chapter 46, you should already have the data source ha defined in ColdFusion administrator, and you can move on to the next section. If you didn't, start by copying the database ha.mdb from the CD-ROM to a folder within your ColdFusion MX Web root. If you're using ColdFusion's built-in Web server, a good path is c:\cfusionmx\db.

Next, open the Habitat Alert site in Dreamweaver and define a new data source. In ColdFusion administrator's data source panel, name the data source ha; then navigate to the location of the database.

Creating the ColdFusion summary function

When users visit the e-card section of Habitat Alert, the first page they'll see is a Flash MX 2004 interface showing the current list of card titles and thumbnail images stored in the database. We'll call this the summary page. You'll use ColdFusion to retrieve this list with a <cfquery> and then pass the results to Flash for display.

Note

When you are using Flash Remoting, it's important to pay close attention to the folder and filenames you use for your ColdFusion MX templates, because when you call a ColdFusion template from Flash, the folder in which the template is stored becomes the name of the ActionScript service, and the template filename becomes the ActionScript function. You learn more about this in the next section.

Using Dreamweaver's Files pane, create a new folder within the Habitat Alert site titled ecards. Within it, create a new ColdFusion document titled get_all_cards.cfm. Listing 29-1 shows the entire contents of the page. Note that because Flash MX 2004 will be handling the display of data, this ColdFusion page doesn't need the standard HTML headers automatically inserted by Dreamweaver when a new page is created. You can simply delete them.

Listing 29-1: get_all_cards.cfm
Start example
<cfquery name="flash.result" datasource="ha">
     select id, card_title, card_thumbnail, card_movie from cards
</cfquery>
End example
Start Sidebar
Understanding ColdFusion Arrays

The structure in the previous section contains information about only one user. What if you want a single variable object that contains similar data about several users? Enter the array variable, which — among many uses — may be used to store data for more than one user.

To illustrate this concept, consider a ColdFusion query that returns just one user record from a database. That's similar to a structure, because it contains only one first_name column, one last_name column, and so on. However, if the same query returned information for several users, there would be more than one value for first_name, last_name, and so on. That's more like an array. To put it another way, a structure contains data much like a single database record, whereas an array is capable of containing multiple records and thus can be used more like an entire database table.

In fact, it's helpful to think of arrays like database tables that are stored in memory — as variables — rather than in a file. Though you never work with arrays in a graphic interface, they store information much the same way as a table.

Unlike structures, arrays are typically used with numbers rather than key names. For example, to define a two-dimensional array (you learn more about dimensions in a moment) called users that holds data on three users, you use code like this:

<!---create a new, two-dimensional array called "user"--->
<cfset users=ArrayNew(2)>

<!---define the first user as array row "1"--->
<cfset users[1][1]="McKinley">
<cfset users[1][2]="Morganfield">
<cfset users[1][3]="15 Park Place">
<cfset users[1][4]="Clarksdale">
<cfset users[1][5]="MS">

<!---define the second user as array row "2"--->
<cfset users[2][1]="Ellas">
<cfset users[2][2]="McDaniel">
<cfset users[2][3]="1241 Gretsch Drive">
<cfset users[2][4]="McComb">
<cfset users[2][5]="MS">

<!---define the third user as array row "3"--->
<cfset users[3][1]="Eugene">
<cfset users[3][2]="Klein">
<cfset users[3][3]="12 Witz Avenue">
<cfset users[3][4]="Newark">
<cfset users[3][5]="NJ">

In a two-dimensional array, each array element is referenced by a pair of numbers, each in brackets. To use the database-table analogy, the first number refers to a row, while the second refers to a column.

To display a specific element of an array, you use the same syntax, referring to it by its "row" and "column":

<cfoutput>#users[3][2]#</cfoutput>

This snippet returns the value Klein, or the second column in the third row of the array users.

End Sidebar

Listing 29-1 contains a basic ColdFusion MX query that retrieves the ID, title, and thumbnail columns for all records found in the cards table. There is one unique element though: Notice that the query name is flash.result. This is the special variable name used to pass information between ColdFusion and Flash. In the next section, you learn how this query object becomes available to your Flash display page.

Using Flash Remoting to link ColdFusion with Flash

A Flash movie is the logical choice as a user interface for choosing the e-card and entering the e-card greeting and other data. Flash Remoting makes it possible for a Flash movie to interact with ColdFusion files and retrieve information from a database. You could hard-code the Flash movie with the names of the e-cards and their titles, and load the thumbnail images from the document library. However, this method requires you to update the Flash movie every time the client adds or deletes an e-card from the queue, or modifies an existing e-card. Updating the database is the easier and more elegant solution.

The Flash Remoting service is standard with ColdFusion MX. However, you have to add the necessary components to create remoting applications with Flash MX 2004. You can download these components from Macromedia's Web site at this URL: http://www.macromedia.com/software/flashremoting/downloads/components/. If you purchased Macromedia Flash Remoting MX, you already have the components installed. Figure 29.1 shows the Remoting objects that are added to the Flash MX 2004 Actions panel after you download the remoting components from Macromedia's Web site. Note that the Actions Panel has been enlarged in this screenshot so that all of the Remoting additions are visible.

Click To expand
Figure 29.1: Flash Remoting adds several objects to the Flash MX 2004 Actions panel.

The Flash Remoting objects, as with other ActionScript objects, are organized in their own book. The objects in the Remoting book have their own methods and make it possible for you to create a connection with the gateway to NetServices.

About the E-card Flash movie

The source file for the Flash movie (eCard.fla) for this exercise can be found in the chapter29_exercise\Flash folder on the CD ROM that accompanies this book. The movie is composed of three frames. In the first frame, ActionScript calls the ColdFusion file to retrieve the information from the database. The information is stored in four arrays. After the arrays are populated, the loadMovie action is used to load a thumbnail image into a target window. Users can preview available e-cards by clicking the forward and back arrows shown in Figure 29.2. The images could have been loaded into smaller windows, much like a table in an HTML image gallery. However, this would limit the number of e-cards that could be displayed in the interface. Loading individual images into the window allows for future expansion should Habitat Alert decide to increase the number of e-cards they make available to users.

Click To expand
Figure 29.2: The first frame of the Flash movie enables users to preview available e-cards.

After the viewer chooses an e-card, the e-card is loaded into Level 1 of the e-card movie. Frame 2 of the movie uses a timer component to pause the movie for a few seconds, allowing the viewer to look at the e-card. Then the movie advances to Frame 3. The ActionScript on Frame 3 loads a Next button, which when clicked, unloads the e-card movie. After the movie unloads, the viewer sees the form that can be filled in and submitted to send the e-card and a personalized greeting to a friend or colleague.

Flash MX 2004 has several components that can be used for applications of this sort; for example, you can use the list box, or combo box components, and use a function to populate either component with the results of the ColdFusion query. However, this is only advisable when you have a small number of objects to display from the database. When you create an application for an application with multiple items in a database, using a list box component or combo box component limits you to the number of records you can use from the database. By using an associative array, as is the case with this e-card application, you have access to multiple records from a database and room for future expansion.

Users can select an e-card by clicking the button below the text to the left of the image window. After the user clicks the button, the movie advances to the next frame and the SWF file corresponding to the image is loaded into Level 1. A timer pauses the movie on the second frame and then advances the movie to the third frame. An additional SWF movie is loaded into Level 2. This movie has one object, a Next button, that when clicked unloads the e-card movie and reveals the form used to input the recipient's data and a greeting, as shown in Figure 29.3.

Click To expand
Figure 29.3: The third frame of the movie provides users with a form for entering data.

After users enter data, they send the e-card by clicking the Submit button. Clicking this button sends the greeting information to the database. At this point, ColdFusion files take over the process.

Creating the Flash summary frame

For an e-card application, you can create a Flash movie with animation and sound. You can also create a more elegant user interface than is possible with standard HTML. For this tutorial, an interface has been created and populated with a target window, plus there is an animation of a bird to keep viewers entertained while selecting an e-card. To follow along with upcoming sections, copy the eCard.fla file from the chapter29exercise\Flash folder on the CD-ROM that accompanies this book, launch Flash MX 2004, and open the file.

The ActionScript in the first frame of this application connects the Flash movie remotely to NetServices. After the remote connection is made, the ColdFusion file in Listing 29-1 is summoned as a service. The results of the file are loaded into arrays.

Creating the remote connection

When you create your own Flash Remoting applications, the first order of business is to create the ActionScript to remotely connect the Flash movie with Net Services. You accomplish this by including the NetServices.as object to your script. You'll find this object by opening the Actions panel and navigating to the Remoting book that was added when you downloaded the Remoting components from Macromedia's Web site. You can add the NetServices.as object to your script by double-clicking its title or by selecting and then dragging and dropping it into the Script pane. The following code shows the format for adding this object to your script:

#include "NetServices.as"

Creating a gateway connection

After enabling net services, you must supply the URL where the NetServices can be accessed by the Flash movie. You need to create a gateway connection as well. You achieve both of these tasks by adding methods of the NetServices object. When you are initially creating your Flash application, the URL for the gateway to flashservices will be your local host, which ColdFusion MX defines as http://localhost:8500/flashservices/gateway.

Next you create the code that sets the gateway connection. This involves adding setDefaultGatewayURL to the script and defining the default gateway. The default gateway you set when testing the application with the ColdFusion MX is the local host on your system. The URL to the default host on your local computer is http://localhost:8500/flashservices/gateway. You have to change the URL to the directory where flashservices reside on your Web hosting service before uploading the application. The next step is to add the createGatewayConnection method of the Net Services object to your script, which connects your application to the Flash Remoting service on your application's server. In the case of the e-card application, you'll be connecting to a ColdFusion server; hence, it makes sense to give the object the name of CFServer. You can do this by creating a named variable and setting it equal to the createGatewayConnection method of the NetServices object, or by entering the code in the Actions pane. When you create your own Flash Remoting applications after you define the URL for Flash services and create the gateway connection, your code should be similar to Listing 29-2.

Listing 29-2: Creating a Gateway Connection
Start example
#include "NetServices.as"
NetServices.setDefaultGatewayURL("http://localhost:8500/flashservices/gateway");
CFServer = NetServices.createGatewayConnection();
End example

Accessing NetServices

For a Flash application to communicate with ColdFusion files, you use the getService method of the NetConnection object, which is located in the Remoting book in the Actions panel. For the e-card application, you need to unpack the information from the database as defined by the query in the ColdFusion file get_all_cards.cfm. When you call a NetService, the service is defined by the server directory where the function is located. In the case of the e-card application, the ColdFusion file is located in the server's e-card directory; hence, the service is e-card. You need to name the service object. You can do this by creating a new variable or by hard-coding the script in the Actions pane. For the e-card application, you'll be getting the information about each e-card from the database. One of the items you'll be using will be the title of each e-card; therefore, you can name the service object svcTitles. After you define the service, you add the ColdFusion function to your ActionScript. The ColdFusion file get_all_cards.cfm queries the database for the information needed in your Flash movie. You add that information to the service as a function. To add the service to your script, insert the ActionScript code shown in Listing 29-3.

Listing 29-3: Accessing a Remote Service
Start example
svcTitles = CFServer.getService("habitat_alert.ecards", this);
svcTitles.get_all_cards();
End example

Creating the function

After you call the remote service, you create ActionScript that interprets the results into a format that you can utilize in your application. For the e-card application, you'll need the following fields from the cards table of e-card database: ID, card_title, card_thumbnail, and card_movie. After your application remotely calls the NetService, the data from the get_all_cards.cfm file is returned as a result. The result of the remote service contains the items from the database queried by the ColdFusion function.

To create the function that interpolates the data, you begin by creating a new array for each item queried. You populate the arrays with items from each database field using a for loop. The number of items in the database fluctuates; therefore, your loop executes until the number of items (length) of the database is exhausted. The final duty your function performs is to load the first e-card thumbnail into a target window instance, which has been labeled eCardTarget and resides on the root Timeline. To finalize the code for the first frame of the e-card application, enter the code shown in Listing 29-4.

Listing 29-4: Creating the Result Function
Start example
function get_all_cards_Result(result) {
    card_id = new Array();
    titles = new Array();
    thumbnails = new Array();
    movies = new Array();
    for (var i = 0; i<result.items.length; ++i) {
        card_id[i] = result.items[i].ID;
        titles[i] = result.items[i].card_title;
        thumbnails[i] = result.items[i].cardthumbnail;
        movies[i] = result.items[i].card_movie;
    }
    loadMovie("images/" + thumbnails[0],
"_root.EcardTarget");
    _root.eCardTitle.text = titles[0];
    k = 0;
}
End example

No doubt you noticed the addition of a new variable, k, as the final line of code. This initializes a counter for the buttons that load the e-card images. Your code for the first frame of the e-card application should read as shown in Listing 29-5, which includes a stop() action at the start of the script. This action prevents the movie from going to the second frame until the user selects an e-card.

Listing 29-5: ActionScript for the Application's First Frame
Start example
stop();
#include "NetServices.as"
#include "NetDebug.as"
NetServices.setDefaultGatewayURL("http://localhost:8500/flashservices/gateway");
CFServer = NetServices.createGatewayConnection();
svcTitles = CFServer.getService("habitat_alert.html.site.ecards", this);
svcTitles.get_all_cards();
function get_all_cardsResult(result) {
     titles = new Array();
     card_id = new Array();
     thumbnails = new Array();
     movies = new Array();
     for (var i = 0; i<result.items.length; ++i) {
          titles[i] = result.items[i].card_title;
          thumbnails[i] = result.items[i].card_thumbnail;
          movies[i] = result.items[i].card_movie;
          card_id[i] = result.items[i].ID;
          NetDebug.trace(card_id[i]);
          NetDebug.trace(titles[i]);
          NetDebug.trace(thumbnails[i]);
          NetDebug.trace(movies[i]);
     }
     loadMovie("images/" + thumbnails[0],
"_root.EcardTarget");
     root.eCardTitle.text = titles[0];
     k = 0;
End example

Coding the buttons

Users click the buttons at the bottom of the target window to view images of the e-cards. When the user clicks a button clicked, a new image loads and the title of the image updates as well. As previously mentioned, the image loads into a target window with the instance name of EcardTarget. A dynamic text box below the target window with the instance name of EcardTitle displays the name of each e-card. The counter you initialized in the get all cards Result function increments by 1 when the user clicks the Forward button and decre-ments by 1 when the user clicks the Back button. The Forward button's code has a conditional statement that prevents the variable from exceeding the number of elements in the array, and the Back button's code has a conditional statement that prevents the variable from having a value less than 0. Listing 29-6 shows the code for the Forward button. Listing 29-7 shows the code for the Back button.

Listing 29-6: ActionScript for the Forward Button
Start example
on (release) {
     ++k;
     if (k>titles.length-1) {
          k = titles.length-1;
     }
     loadMovie("images/" + thumbnails[k],
"_root.EcardTarget");
     root.eCardTitle.text = titles[k];
}
End example
Listing 29-7: ActionScript for the Back Button
Start example
on (release) {
--k;
     if (k<0) {
          k = 0;
     }
     loadMovie("images/" + thumbnails[k],
"_root.EcardTarget");
     root.eCardTitle.text = titles[k];
}
End example

After viewers decide which e-card to send, they can select it by clicking the Select E Card button. The ActionScript for this button, shown in Listing 29-8, is fairly straightforward. It advances the movie to the next frame and loads the e-card SWF file into Level 1 of the movie.

Listing 29-8: Coding the Select E Card Button
Start example
on (release) {
     gotoAndStop(2);
     loadMovieNum("site/ecards/" + movies[k], 1);
}
End example

Notice that the code that loads the movie is an expression. It concatenates the directory (e-cards) where the e-cards reside on the server with an element from the array movies. The element corresponds to the counter variable.

Coding the second and third keyframes

The ActionScript for the second and third keyframes of the movie are fairly simple. In the second frame of the movie, add a stop() action. If you examine the second frame of the movie closely, you'll notice a registration point outside the boundaries of the Stage. This is a timer component, which pauses the movie for a period of four seconds before advances to the third frame.

Tip

The timer component pauses a movie on a frame for the time period you specify in the Parameters tab of the Property inspector. To use the timer in another movie, choose File ® Open as Library. Navigate to the directory where the FLA file for this exercise is stored. Drag the timer component into the current document library, and add it to the movie keyframe where you want to pause the production.

The third keyframe loads another movie into Level 2. The movie has one object, a Next button, that when clicked unloads the e-card movie, as well as the Next button movie. The code for the third keyframe is shown in Listing 29-9.

Listing 29-9: ActionScript for the Third Keyframe
Start example
loadMovieNum("next.swf", 2);
stop();
End example

Creating the Flash detail frame and form

The third frame of the e-card movie contains input text boxes where users enter their names and e-mail addresses, as well as the recipient's name and e-mail address. There is also an input text box in which the user can compose a greeting, as shown in Figure 29.4. The Submit button at the bottom of the Stage compiles the information and forwards it the ColdFusion page detailed in the next section.

Click To expand
Figure 29.4: Users enter information and send the e-card from Frame 3 of the movie.

Each input text box has been given a unique instance name. When users click the Submit button, the data is compiled and forwarded to the send_card.cfm page. To finalize the code for the project, select the Submit button, and open the Actions panel. Create a variable for each field in the greeting table of the e-cards database and set its value equal to the text data in each input text box. You use the getUrl action to send the information to the send_card.cfm page. The POST method is used to send the variables to the ColdFusion page. The complete code for the Submit button in the e-card application is shown in Listing 29-10.

Listing 29-10: ActionScript for the Submit Button
Start example
on (release) {card_id = card_id[k];
    sender_email = _root.senderemail.email3.text;
    sender_name = _root.sendername.email4.text;
    recipient_email = _root.friendsemail.email1.text;
    recipient_name = _root.friendsname.email2.text;
    greeting = _root.yourMessage.message.text;
getURL("http://localhost:8500/habit_atalert/html/site/ecards/send_card.cfm", "_self",
}
End example
Start Sidebar
Using the NetConnection Debugger

When you're creating an application that uses Flash Remoting, it's difficult to tell whether you've received the queried information from the remote service. You can enable the NetConnection Debugger by adding one line of code to your ActionScript: #include "NetDebug.as". After you add this line of code to your script, you can then use the trace method of the NetDebug object in the same manner as you'd use a trace in a nonremote Flash application. The following is the code for Frame 1 of the e-card application with the trace method being used to check array contents:

stop();
#include "NetServices.as"
#include "NetDebug.as"
NetServices.setDefaultGatewayURL("http://localhost:8500/flashservices/gateway");
CFServer = NetServices.createGatewayConnection();
svcTitles = CFServer.getService("habitat_alert.html.site.ecards", this);
svcTitles.get_all_cards();
function get_all_cardsResult(result) {
     titles = new Array();
     card_id = new Array();
     thumbnails = new Array();
     movies = new Array();
     for (var i = 0; i<result.items.length; ++i) {
          titles[i] = result.items[i].card_title;
          thumbnails[i] = result.items[i].card_thumbnail;
          movies[i] = result.items[i].card_movie;
          card_id[i] = result.items[i].ID;
          NetDebug.trace(card_id[i]);
          NetDebug.trace(titles[i]);
          NetDebug.trace(thumbnails[i]);
          NetDebug.trace(movies[i]);
     }
     loadMovie("images/" + thumbnails[0], "_root.EcardTarget");
     root.eCardTitle.text = titles[0];
     k = 0;
}

You open the NetConnection Debugger by choosing Window ® NetConnection Debugger prior to testing your movie.

End Sidebar

Creating the ColdFusion action page

After the user has selected a card and supplied details, such as the recipient name, e-mail address, and so on, the Flash movie sends the form data to ColdFusion MX for processing. In this final step, the user leaves the Flash interface and is taken to a ColdFusion template that performs three actions:

  1. Saves the data that the user enters in the "greetings" table

  2. Sends an e-mail to the recipient announcing the e-card

  3. Displays a confirmation to the user that the announcement has been sent

The action page uses neither flash.params nor flash.result, because the Flash movie will simply be passing along standard form data.

Create a new ColdFusion MX document in the ecards folder titled send_card.cfm. Listing 29-11 contains the basic code, although you can customize the e-mail announcement and sender confirmation text to your liking.

Listing 29-11: send_card.cfm
Start example
<!---insert the greeting data into the database--->

<cftransaction>

     <cfquery datasource="ha">
          insert into greetings
          (card_id,sender_email,sender_name,
          recipient_email,recipient_name,
          greeting)
          values
          (#card_id#,'#sender_email#',
          '#sender_name#','#recipient_email#',
          '#recipient_name#','#greeting#')
     </cfquery>

     <!---get the greetingid number of the greeting just inserted--->

     <cfquery name="get_last" datasource="ha">
          select max(greeting_id) as [new_id]
          from greetings
     </cfquery>

</cftransaction>

<!---send mail to the card recipient--->

<cfmail to="#recipient_email#" from="webmaster@habitatalert.com"
subject="Someone Has Sent You an E-Card">
  Dear User;

  A member of our Website has sent you an e-card. To retrieve it, please visit this URL:

  http://localhost:8500/habitat_alert/html/site/ecards/view_card.
cfm?greetingid=#get_last.new_id#
</cfmail>

<!---display a confirmation to the sender--->

<html>
<head>
<title>Card Sent</title>
<meta http-equiv="Content-Type" content="text/html; charset=
iso-8859-1">
</head>

<body>

<h2>Card Sent</h2>

Your card information has been stored, and an announcement has been
sent to <cfoutput>#recipient_name# at #recipient_email#</cfoutput>.
</body>
</html>
End example

In Listing 29-11, the first <cfquery> tag inputs the sender's greeting data into the greetings table using SQL's INSERT command. Next, the second <cfquery> section uses the SQL aggregate function max() to retrieve the greatest ID number present in the greetings table. In this case, this number will be the one Microsoft Access autogenerated when <cfinsert> inserted the sender's data. This number is important, because it uniquely identifies the current greeting.

Notice that the two queries are enclosed in a pair of <cftransaction> tags. The function of this tag is to group multiple queries so that ColdFusion treats them as one event. In this case, it performs the insert and retrieves the maximum greeting_id in one step. Why? Consider a very busy Web site in which two unique users submit the e-card form at the same time. If ColdFusion processed the queries separately, it's possible that it might insert one user's data first and then report the wrong maximum greeting id to the other user's page. By using <cftransaction>, you can ensure that the maximum greeting_id returned to the user is the one created by the insert of that person's distinct information.

Next, an e-mail is sent to the card recipient via the <cfmail> tag. The body of the mail includes the full URL path to a page called view_card.cfm and a query string containing the greeting ID of the new greeting inserted by this template.

Caution

Remember that the "from" value in any <cfmail> tag needs to be an address that's acceptable to the SMTP server through which the mail will be sent.

Finally, a confirmation is displayed to the sender, showing that mail has been sent. For verification, the recipient's name and e-mail address are also displayed.

Creating the ColdFusion view page

When a recipient receives an e-mail announcement, it contains some text like this:

From: website@habitatalert.com
To: someuser@somedomain.com
Subject: Someone Has Sent You an E-Card

Dear User;

A member of our Website has sent you an e-card. To retrieve it, please visit this URL:

http://localhost:8500/habitat_alert/html/site/ecards/view_card.cfm?greeting_id=5

You now need to construct view_card.cfm, the page that displays the card and greeting to the recipient. In essence, this page functions much like a detail page where an item ID is passed in the URL, a query is performed using the passed ID as input, and the resulting item details are displayed to the user.

The greeting_id passed in the recipient's URL enables you to query for the greeting details, but you also need a second query to get the details on the card itself — the title and the Flash movie, for example. Take a look at Listing 29-12.

Listing 29-12: view_card.cfm
Start example
<!---get greeting details based on greeting_id passed in URL--->
<cfquery name="get_greeting" datasource="ha">
     select recipient_name, sender_name,
     sender_email, greeting, card_id
     from greetings
     where greeting_id = #URL.greeting_id#
</cfquery>

<!---get card details based on the card_id retrieved by the previous query--->
<cfquery name="get_card" datasource="ha">
     select card_title, card_movie
     from cards
     where id = #get_greeting.card_id#
</cfquery>

<html>

<head>

<!---begin cfoutput section--->
<cfoutput>

<!---show recipient name in page title--->
<title>A Greeting Card for #get_greeting.recipient_name#</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<!---show recipient name in header--->
     <h2>A Greeting Card for #get_greeting.recipient_name#</h2>
     <!---embed flash movie based on the card_movie value retrieved in
the "get_card" query--->
<div align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-
96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab##version=6,0,0,0"
 WIDTH="550" HEIGHT="400" id="Interface" ALIGN="">
 <param NAME=movie VALUE="#get_card.card_movie#"> <param NAME=quality
VALUE=high> <param NAME=bgcolor VALUE=##000033> <embed
src="#get_card.card_movie#" quality=high bgcolor=##000033  WIDTH="550"
HEIGHT="400" NAME="#get_card.card_movie#" ALIGN=""
 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></embed>
</object></div>
     <p align="center">#get_greeting.greeting#</p>
     <p align="center">This card has been sent to you by
<ahref="mailto:#get_greeting.sender_email#">#getgreeting.sendername#</a>,
courtesy of Habitat Alert</p>
<p align="center">To send your own greeting card, click
<a href="http://localhost:8500/habitat_alert/html/ecard.html">
here</a></p>
<!---end cfoutput section--->
</cfoutput>

</body>
</html>
End example

The first query retrieves the greeting details; the second gets the card details based on the card_id retrieved by the first query.

Listing 29-12 also uses <cfoutput> a little differently from previous examples. Usually, when <cfoutput> is used to display the results of a query, it's used in conjunction with a query attribute, such as the following:

<cfoutput query="some_query_name">

But in this case, your template contains two queries and your display needs to draw information from both of them. The solution is to use a generic <cfoutput> and then supply the name of a query as a qualifier, each time you reference a variable, as in the following snippet, which references the title returned by the get_card query and the greeting returned by the get_greeting query:

<cfoutput>
#get_card.title#<br>
#get_greeting.greeting#<br>
</cfoutput>

Listing 29-12 also embeds the relevant Flash MX 2004 movie, based on the filename stored in the card_movie field. Finally, it displays the sender's greeting and name, and provides a link to the main e-card page to enable the recipient to send his or her own e-card.

Start Sidebar

ColdFusion Components, by Samuel Neff

Components are as notable an enhancement to ColdFusion MX as user-defined functions were to ColdFusion 5. With ColdFusion components, developers not only have a new mechanism for code reuse, but they are introduced to a programming concept long held as the cornerstone of advanced software design. Components bring the power of object-oriented programming but keep the tradition of simplicity that has made ColdFusion the ideal development platform for the Web.

A ColdFusion component (CFC) is a collection of properties and functions used to encapsulate related functionality. To demonstrate, look at an example from a survey question application. The following skeleton code outlines a component for a list of survey questions.

<cfcomponent>

  <cffunction
    name="getQuestionIdList"
    returnType="string"
    access="remote">

  </cffunction>

  <cffunction
     name="getQuestionText"
     returnType="string"
    access="remote">

    <cfargument
      name="questionId"
      type="numeric"
      required="true">

  </cffunction>

  <cffunction
    name="setAnswerText"
    access="remote">

    <cfargument
      name="questionId"
      type="numeric"
      required="true">

    <cfargument
      name="answerText"
      type="string"
      required="true">

  </cffunction>

</cfcomponent>

Creating a Component

All code within the CFC must be contained within cfcomponent tags. Only comments can be placed outside these tags. Within the component, you're defining three functions with the cffunction tags. The only required attribute is name. The returnType attribute defines the type of value being returned from the function. String indicates any text value, and void indicates the function does not return anything.

Two of the functions require arguments. To define a function's arguments, use the cfargument tag. This tag accepts a name and type and validates on each call that the value passed matches the type specified. You can also optionally specify that the argument is required, and in cases where it is not, you can specify a default value.

Dreamweaver MX can be helpful in creating CFCs; it provides a graphical user interface for creating the component structure. To create the above component using Dreamweaver MX's interface, follow these steps:

  1. If the Application panel is not visible, click Window and then Components.

  2. If the Application panel is already visible but collapsed, click the arrow next to Application to expand it.

  3. Click the Components tab inside the Application panel.

  4. If you haven't already defined a site, click the Site hyperlink to define a site. See Chapter 31 for information on defining a site.

  5. If you haven't already identified the document type for the site, click the Document Type hyperlink to specify the server model as ColdFusion.

  6. If you haven't already specified the testing server information, click the Testing Server hyperlink to specify the testing server details.

  7. If you haven't already specified the RDS login, click the RDS hyperlink to enter the RDS password.

  8. If CF Component is not selected in the drop-down box, select it.

  9. Click the plus (+) sign next to the drop-down box to display the Create Component interface.

  10. Under Name, enter questionAnswer.

  11. Under Component Directory, specify a directory under your wwwroot to store the component.

  12. In the Sections list box, click Functions.

  13. Click the plus (+) sign to add a new function.

  14. Under Name, enter getQuestionIdList.

  15. Under Access, enter remote.

  16. Under Return Type, enter string.

  17. Repeat Steps 13 through 16 for each of the functions in the previous listing.

  18. In the Sections list box, click Arguments.

  19. Select getQuestionText from the drop-down list box.

  20. Click the plus (+) sign to add an argument.

  21. Enter questionId for the name.

  22. Enter numeric for the type.

  23. Click the Required check box to specify the argument as required.

  24. Repeat steps 18 through 22 to add the arguments for setAnswerText.

  25. Click OK.

  26. Dreamweaver MX displays a new CFC with the functions and arguments you specified.

    Click To expand
    Using Dreamweaver MX to create a component outline.

In the questionnaire example, you run database queries within each of the functions to provide the desired functionality:

<cffunction
  name="getQuestionIdList"
  returnType="string"
  access="remote">

  <cfquery name="questionIdQuery" datasource="StudioMXBible">
    SELECT QuestionID
    FROM Questions
  </cfquery>

  <cfset idList=ValueList(questionIdQuery.QuestionID)>
  <cfreturn idList>

</cffunction>

<cffunction
  name="getQuestionText"
  returnType="string"
  access="remote">

  <cfargument
    name="questionId"
    type="numeric"
    required="true">

  <cfquery name="questionQuery" datasource="StudioMXBible">
    SELECT QuestionText
    FROM Questions
    WHERE QuestionID=#Arguments.questionId#
  </cfquery>

  <cfreturn questionQuery.QuestionText>

</cffunction>

<cffunction
  name="setAnswerText"
  access="remote">

  <cfargument
    name="questionId"
    type="numeric"
    required="true">

  <cfargument
    name="answerText"
    type="string"
    required="true">

  <cfquery name="questionQuery" datasource="StudioMXBible">
    UPDATE Answers
    SET AnswerText=
      <cfqueryparam
        cfsqltype="cf_sql_varchar"
        value="#Arguments.answerText#">
    WHERE QuestionID=#Arguments.questionId#
</cfquery>

</cffunction>

Notice that the functions, getQuestionIdList and getQuestionText, which return a value do so through the cfreturn tag. This tag accepts an expression and returns the expression to the caller as the function result. When your component is completed, you're ready to begin using it in your application.

Save this file to a new folder within your wwwroot and call it questionAnswer.cfc.

Using a Component from a ColdFusion Template

To begin with, you need to create a simple HTML form that displays the questions and an input block for users to provide an answer. Enter the following code into a blank ColdFusion template and save it as survey.cfm in the same directory as questionAnswer.cfc.

<cfoutput>
  <form action="action.cfm" method="post">
    <cfset qaCFC=CreateObject("component","questionAnswer")>
    <cfloop index="questionId" list="#qaCFC.getQuestionIdList()#">
      <h3>#qaCFC.getQuestionText(questionId)#</h3>
      <textarea name="Answer_#questionId#" cols="60" rows="5"></textarea>
    </cfloop>
    <br/>
    <input type="Submit" value="Submit">
  </form>
</cfoutput>

ColdFusion MX includes three mechanisms to create a CFC from local CFML code: cfobject, cfinvoke, and CreateObject. Besides structure, the primary difference between these methods is component life. When used independently, cfinvoke creates the component, calls the method, and then releases the component. With cfobject and CreateObject, the programmer is in complete control of the component life, which is important when calling multiple functions of the same component within a request.

Because your component simply encapsulates functionality and does not store any of its own data, you can store the component in the default Variables scope and allow it to be released at the end of the request. When components are used to store data and encapsulate functionality, they can be stored in the Server, Application, Session, and Request scopes.

With you form page created, you can move on to the action page and use the same component for storing data back to the database:

<cfset qaCFC=CreateObject("component","questionAnswer")>

<cfloop index="varName" list="#Form.fieldNames#">
  <cfif ListGetAt(varName,1,"_") IS "Answer">
    <cfset questionId=ListGetAt(varName,2,"_")>
    <cfif Len(Form[varName])>
      <cfset qaCFC.setAnswerText(questionId,Form[varName])>
    </cfif>
  </cfif>
</cfloop>

<h3>Answers updated</h3>

When you review the code in the ColdFusion templates and ColdFusion component, compare them with the equivalent code using traditional methods. Traditionally a form template would include a query to retrieve the data and populate the form from the query results. The action template reads the form data and creates queries to update the database. This traditional development style intertwines the database access and form display code, which hampers maintenance. With the survey questionnaire example, all code regarding the database interaction is entirely encapsulated within the component. The form templates concentrate on form display and leave all database interaction to the component. The result is a clear separation between business logic and display code. This simplifies development and maintenance.

Save this last file as action.cfm, and test it by starting with the surven.cfm form, answering the questions, and clicking Submit.

Using a Component from Flash MX 2004

To understand upon why this separation is beneficial, take your example to the next step. The HTML form is functional, but you want the application to be more appealing. To accomplish this, you move the client code to Flash MX 2004. From within Flash, you build a form and call your component through Flash Remoting.

Click To expand
Flash MX 2004 application that provides the question-and-answer form for your component.

To begin working with the Flash MX 2004 example, download and install the Flash Remoting components from Macromedia's Web site, as explained earlier in this chapter. Then create a new movie with two dynamic text fields named question_txt and answer_txt and a push button named next_pbtn. The push button should be labeled Next and should have a click handler of nextQuestion. With this layout complete, add the following ActionScript to the first frame:

#include "NetServices.as"

if (inited==null) {
  inited=true;
  NetServices.setDefaultGatewayURL("http://127.0.0.1/flashservices/gateway");
  var gate = NetServices.createGatewayConnection();
  var qaCFC = gate.getService("StudioMXBible.Components.questionAnswer",this);
  qaCFC.getQuestionIdList();
}

This code sets up a connection to the Flash gateway on the local host. Then it retrieves the questionAnswer component. The fully qualified component name is a modified version of the component's path. In this case, the component is stored as /StudioMXBible/Components/ questionAnswer.cfc. Change the path to the component to reference the component you created earlier in this tutorial, relative to the wwwroot and using dots instead of slashes.

After you have a connection to your component, you can call the getQuestionIdList method to retrieve a list of question IDs. Notice that even though the function returns a value, you do not set a variable equal to the returned value, because all calls to CFCs are asynchronous. Flash initiates the call and immediately returns execution to your Flash application. When the CFC is done processing and returns the value, it calls a function within your Flash application that has a name identical to the component method with the suffix_Result.

var idArray=new Array();
var questCounter=-1;

function getQuestionIdList_Result(idList) {
  idArray=idList.split(",");
  nextQuestion();
}

As you can see, the value returned from the component method is passed to the Result function as an argument. Because it is a list, use the String object's split() method to create an array for easier manipulation:

function nextQuestion() {

  if (questCounter>-1) {
    qaCFC.setAnswerText(idArray[questCounter],answer_txt.text);
  }

  questCounter++;
  if (questCounter < idArray.length) {
    qaCFC.getQuestionText(idArray[questCounter]);
    question_txt.text="Retrieving next question..."
    answer_txt.text="";
  } else {
    question_txt.text="The survey is complete. Thank you.";
    answer_txt.text="";
    nex_tpbtn.setLabel("Close");
  }
}

function getQuestionText_Result(questionText) {
  question_txt.text=questionText;
  answer_txt.text='';
}

Because you've initialized the question counter to -1, you use that to determine whether you have an answer to save. If you do, call the component function to save the current answer. Then increment the counter. If there are still questions remaining, call the component to retrieve the next question. Then update the application user interface to inform the user that you're retrieving the next question. If you're already on the last question, tell the user that the questionnaire is complete.

The listing also includes another result function for retrieving question text. Upon receipt, you update the two text fields. Notice, however, that there is no result function for the setAnswerText function, because this function does not return a value.

That small bit of ActionScript is all that is required to create a database-driven Flash application. Compare this to using LoadVariables and XML in previous versions of Flash, and you'll see that using CFCs is not only simpler but provides for code that is easier to understand and maintain.

Components can and should revolutionize the way you program in ColdFusion. They add structure and facilitate the encapsulation of data and business logic. Using components leads you to developing applications in a multi-tiered approach, which improves maintainability and flexibility. While there may be a small adjustment in programming style to use components, you will find the change beneficial.

End Sidebar
Start Sidebar

ColdFusion MX XML Support, by Samuel Neff

Extensible Markup Language (XML) is a structured data format ideal for serialization and data exchange. Converting data to an XML format encapsulates the data itself and descriptors about the data, referred to as meta data. This encapsulation greatly simplifies automated communications and collaboration.

ColdFusion developers have long had the ability to convert any data to XML through Web Distributed Data Exchange (WDDX), an XML grammar developed by Allaire for this specific purpose. With ColdFusion MX, developers now have the ability to work with any XML data using native ColdFusion tags and functions.

Creating an XML Document Object

ColdFusion MX provides three mechanisms for creating an XML document object, including one new tag and two new functions. The cfxml tag enables you to embed XML text within your ColdFusion template and create an XML document object from that text, as in the following code:

<cfxml variable="MyXML" caseSensitive=">
  <classroom roomNumber="210">
    <teacher>
      <firstName>John</firstName>
      <lastName>Smith</lastName>
    </teacher>
    <students>
      <student>
        <firstName>Jim</firstName>
        <lastName>Johnson</lastName>
      </student>
      <student>
        <firstName>Jane</firstName>
        <lastName>Davis</lastName>
      </student>
    </students>
  </classroom>
</cfxml>

As you can see, you wrap the XML content inside the cfxml tag, which takes two attributes. variable is required and provides a name for the new XML document object. caseSensitive is optional and specifies whether ColdFusion should enforce the case of the elements and attributes during lookups. Even with caseSensitive set to no, the default, ColdFusion preserves the case of XML elements and attributes, and leaving it at no enables you to use the simpler-structure dot notation, discussed later in this tutorial.

To examine how ColdFusion MX stores an XML document object internally, note the cfdump tag, introduced in ColdFusion 5:

<cfdump var="#MyXML#" label="MyXML">

XML Document Object Explained

At the very top, MyXML is an XML document object (see the following figure) that contains one immediate child, classroom, also referred to as the root element. classroom is an XML element node that is treated internally much like a structure. The XmlText key provides the text contained within the element but not in any child elements, which in this case is none. The XmlAttributes key provides a substructure with key-value pairs associated with each attribute. In this case, it contains the roomNumber attribute and the value 210.

In addition to these two built-in keys, classroom also has two child elements, teacher and students, as structure keys. Each of these is also an XML element node with keys for XmlText and the child elements. This implementation of using structure-type objects internally makes using XML within ColdFusion much simpler when compared to DOM-compliant object models. For example, if you want the classroom teacher's first name, you simply reference it as follows:

<cfoutput>#MyXML.classroom.teacher.firstName.XmlText#</cfoutput>
Click To expand
ColdFusion MX's internal representation of your XML document object.

The first variation arises when you look at the students element and its child elements, student. Because there are two student elements within students, student is stored as an array. To reference any of the student values, use array notation after the student element reference. For example, if you want the first student's first name, reference it as follows:

<cfoutput>
#MyXML.classroom.students.student[1].firstName.XmlText#
</cfoutput>

Modifying an XML Document Object

This structure- and array-based implementation also means you can use all of ColdFusion MX's structure and array functions to modify an XML document object. You combine these functions with the new XmlElemNew function to add new students to your classroom.

To add another student, you need to create a new student element and then add the student as a child of the students element. However, you can't directly add the student to the student array; you have to use the special XML element key XmlChildren, which lists all child elements of a parent element:

<cfscript>
  newStudent=XmlElemNew(MyXML,"student");
  ArrayAppend(MyXML.classroom.students.XmlChildren, newStudent);
</cfscript>

With the new student added, you can specify the student's information via the firstName and lastName elements using the same functions:

<cfscript>
  firstName=XmlElemNew(MyXML,"firstName");
  firstName.XmlText="Jill";

  lastName=XmlElemNew(MyXML,"lastName");
  lastName.XmlText="Jones";

  ArrayAppend(MyXML.classroom.students.student[3].XmlChildren,firstName);
  ArrayAppend(MyXML.classroom.students.student[3].XmlChildren,lastName);
</cfscript>

Searching an XML Document Object

ColdFusion MX also supports complex searches on an XML document object using the W3C standard language called XPath. XPath is used to specify a set of XML nodes based on certain criteria. To fully understand the power of XPath, you enlarge the classroom example to include a small school.

<cfxml variable="MyXML">
  <school>
    <classroom roomNumber="210">
      <teacher>
        <firstName>John</firstName>
        <lastName>Smith</lastName>
      </teacher>
      <students>
        <student>
          <firstName>Jim</firstName>
          <lastName>Johnson</lastName>
        </student>
        <student>
          <firstName>Jane</firstName>
          <lastName>Davis</lastName>
        </student>
      </students>
    </classroom>
    <classroom roomNumber="305">
      <teacher>
        <firstName>Julie</firstName>
        <lastName>Robbins</lastName>
      </teacher>
      <students>
        <student>
          <firstName>Jodi</firstName>
          <lastName>Katz</lastName>
        </student>
        <student>
          <firstName>Kelly</firstName>
          <lastName>Davis</lastName>
        </student>
      </students>
    </classroom>
  </school>
</cfxml>

An XPath expression is a path structure to a specified XML element node. You start all your XPath examples with the document root, '/', and drill down from there. The following example returns all students in the school (see the image that follows):

<cfset studentNodes=XmlSearch(MyXML, "/school/classroom/students/student")>

<cfdump var="#studentNodes#" label="/school/classroom/students/student">
Click To expand
The elements returned by a call to XmlSearch().

By using XPath, you listed all students in the school, regardless of which classroom they are in. XPath also provides for filtering the returned list using square brackets. For example, the following XPath expression returns all students with the last name Davis:

<cfset studentNodes=XmlSearch(MyXML, "/school/classroom/students
/student[lastName='Davis']")>

The filtering expression can even use any valid XPath selector. For a more complicated example, use the following XPath expression to return all students whose teacher's last name is Smith:

<cfset studentNodes=XmlSearch(MyXml, "/school/classroom/students/
student[../../teacher/lastName='Smith']")>

As you can see, XmlSearch is a powerful tool for finding and listing XML elements within a ColdFusion MX XML document object. Another equally powerful function new to ColdFusion MX is XmlTransform, which performs XSLT transformations on an XML document object.

Transforming an XML Document Object

XSLT is a style sheet language for transforming one XML document into a different XML document. This is commonly used when sharing data between programs that use a different XML grammar or for creating a standard-compliant document out of custom XML. Although XSLT is far beyond the scope of this book or tutorial, you review a couple of simple examples.

For your first XSLT demonstration, create a new ColdFusion template that includes the code from Listing 29-1, the simple classroom example. Then add the following code:

<cfsavecontent variable="classroomToSchoolXSLT">
  <xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output
       method="xml"
       indent="yes"/>

    <xsl:template match="/">

      <school>
        <xsl:apply-templates/>
      </school>
    </xsl:template>

    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>

  </xsl:stylesheet>
</cfsavecontent>

<cfset school=XmlTransform(MyXML, classroomToSchoolXSLT)>

First notice that you used the cfsavecontent tag instead of the cfxml tag. ColdFusion MX always uses a plain string for the XSLT and not an XML document object. After you have your XSLT stored as a string in a variable, use the XmlTransform function to create a new XML document object by applying the XSLT transformation to the classroom example.

Let's examine the components of your XSLT. It starts with a style sheet element within the XSLT 1.0 namespace http://www.w3.org/1999/XSL/Transform and specifies that this is a version 1.0 style sheet. Then you specify what type of output you want to return from the transformation with the output element. Options are xml, html, or text. output also has an indent attribute, which enables creation of pretty-printed XML documents.

Next you have two template elements, which provide a match pattern and replacement content. The match attribute is an XPath expression that returns a set of nodes in the source document. ColdFusion MX replaces each of the nodes returned by the expression with the content within the template element.

The first match pattern returns the root of the document. This is not the root element, but the root of the document itself. The content of this match indicates that you want to enclose the entire docu-ment inside a school element. Then you use the apply-templates element to continue matching source elements against patterns in the XSLT.

The second match pattern is actually two patterns. The pipe character (|) is a union operator that matches both sets of expressions. The node function returns any node other than the document node and attributes. The @* expression matches all attributes. For each node you find, you use the copy element to copy the source node forward.

Because all this transformation does is wrap the source inside a school element, it is not a useful example but is simply a demonstration of the technology. For a more practical example, use XSLT to create an XHTML document out of your school example, as follows:

<cfsavecontent variable="schoolToXHTML">
  <xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html"/>

    <xsl:template match="school">

      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <title>Our School</title>
        </head>

        <body>
          <xsl:apply-templates/>
        </body>
      </html>

    </xsl:template>

    <xsl:template match="classroom">
      <table
        border="1"
        bgcolor="blue"
        bordercolor="blue"
        cellpadding="3"
        cellspacing="2">

        <tr>
          <td colspan="2" style="color:white;font-weight:bold">
            Classroom
            <xsl:value-of select="@roomNumber" />
          </td>
        </tr>
        <xsl:apply-templates/>
      </table>
      <br/>
    </xsl:template>

    <xsl:template match="teacher">
      <tr>
        <td bgcolor="lightblue">Teacher</td>
        <td bgcolor="white">
          <xsl:value-of select="firstName"/>
          <xsl:text> </xsl:text>
          <xsl:value-of select="lastName"/>
        </td>
      </tr>
    </xsl:template>

    <xsl:template match="students">
      <tr>
        <td valign="top" bgcolor="lightblue">Students</td>
        <td bgcolor="white">
          <xsl:apply-templates/>
        </td>
      </tr>
    </xsl:template>

    <xsl:template match="student">
      <xsl:value-of select="firstName"/>
      <xsl:text> </xsl:text>
      <xsl:value-of select="lastName"/>
      <br/>
    </xsl:template>

  </xsl:stylesheet>
</cfsavecontent>

<cfset xhtml=XmlTransform(MyXML,schoolToXHTML)>

<cfoutput>#xhtml#</cfoutput>

This longer example matches each of the XML elements in the source document and replaces them with snippets of XHTML, resulting in a complete XHTML document to display each classroom within a separate table (see figure).

An XHTML representation of our school data after applying an XSLT transformation.

As you can see, ColdFusion MX has gone far beyond basic support of XML. It includes a simple-to-use object model for creating, modifying, and reading XML document objects, as well as functions for advanced searches and transformations of XML. These tools will greatly simplify the implementation of XML technologies in your applications and automated communications.

End Sidebar


Summary

In this chapter, you learned about Flash Remoting and how by including the NetServices as a class in your Flash movie's ActionScript, you can transfer variable data between Flash movies and ColdFusion templates. You learned about structures and arrays, two complex variable types that are used by Flash Remoting to package data. To illustrate these concepts, you constructed a scalable e-card application that benefits from the sophistication of a Flash MX 2004 interface, but that relies on ColdFusion MX to handle the more programming-oriented tasks, such as retrieving information from a database and automatically sending e-mail.


Part V: Developing in Macromedia Dreamweaver MX 2004

Chapter List

Chapter 30: Understanding the Dreamweaver Environment
Chapter 31: Starting a Web Site with Dreamweaver
Chapter 32: Building a Simple Page
Chapter 33: Using Tables for Complex Layouts
Chapter 34: Building Basic Navigation Links
Chapter 35: Using Cascading Style Sheets
Chapter 36: Working with Libraries and Templates
Chapter 37: Tapping into the Power of Forms
Chapter 38: Building a Framed Site
Chapter 39: Building Navigation with Behaviors
Chapter 40: Inserting Media Elements
Chapter 41: Working with Behaviors, Custom Scripts, and Snippets
Chapter 42: Extending Your Dreamweaver
Chapter 43: Building a Dynamic Site with DHTML
Chapter 44: Publishing Your Site


Chapter 30: Understanding the Dreamweaver Environment

Download CD Content

Overview

Dreamweaver MX 2004 is a feature-rich, professional Web design and development program. Its tightly integrated environment enables you to design, build, and manage Web sites and Internet applications with easy-to-use visual design tools and a customizable coding environment that supports current and next-generation technologies for static Web sites or server-based Web applications. Dreamweaver's features and tools are supported by panels that you can group and dock as needed. Design and Code view options enable you to work in a comfortable environment, and a single-click option lets you change views at any time. Contextual menus and panel options provide convenient access to tools and may be supported with custom keyboard shortcuts. Program preferences enable you to select specific settings for your workflow, from opening new documents to previewing work in progress. Dreamweaver is also extensible, which means you can add new objects, behaviors, and commands to add new tools, features, and functions to your application.

In this chapter you'll become familiar with the Dreamweaver MX workspace, which is the basis for using all the tools available in Dreamweaver MX.


Choosing a Workspace Layout

The first thing you'll see when you open Dreamweaver for the first time is the Workspace Setup dialog box (see Figure 30.1). Here you select which workspace you want to work in. The Dreamweaver MX 2004 workspace is selected by default, but if you'd rather work in an environment more like HomeSite, you can choose the Coder option.

Click To expand
Figure 30.1: The Workspace Setup dialog box.
Note

If you ever want to change the Workspace layout later, choose Edit ® references and in the General category you'll see the very large Change Workspace button.


Using the Start Page

When you open Dreamweaver MX 2004, you'll see the Start Page as shown in Figure 30.2.

Click To expand
Figure 30.2: Dreamweaver MX 2004 Start Page.

The Start Page gives you quick access to your files and to new file types. The options are split up into different categories:

  • Open a Recent Item — Shows a list of recently opened files, as well as an option to open a file that is not on the list. These are the same options available in the File menu.

  • Create New — Shows the nine file types that Dreamweaver supports directly so that you can choose the basic format of the new page you are creating. You can also create a new site definition from here. The More option opens the New Document dialog box.

  • Create from Samples — Opens the New Document dialog box with the sample type you select already selected. These samples are different types of starter files.

  • Extend — A quick link to the Dreamweaver Exchange.

  • Don't Show Again — Choose not to have the Start Page display on launch.

    Note

    The Start Page is accessible only if no other files are open.


Toolbars, Windows, Inspectors, and Panels

The Dreamweaver Document window is where you design, code, and edit your Web pages. You use the toolbars, inspectors, and panels surrounding it to add, modify, and manipulate your pages and the elements they contain.

Dreamweaver MX 2004 Application menu

Standard program and application menus, as shown in Figure 30.3, provide access to Dreamweaver MX 2004's tools, features, and functions. Each menu offers a related set of options, as discussed in list that follows.

Click To expand
Figure 30.3: The application menus.

  • File and Edit menus give you options to create, save, preview, and edit pages and page elements.

  • The View menu offers items that are also on the Document toolbar (see the section "The Document toolbar," later in this chapter) and can be used to view and edit rulers and grids.

  • The Insert menu mirrors the Insert toolbar, with options that match the toolsets.

  • The Modify menu is used to edit page properties or elements, including table structures.

  • The Commands menu contains tools with special functions; you can download and install new commands or build your own with the History panel.

  • The Text menu contains formatting options.

  • The Site menu contains management and publishing options.

  • The Window menu provides access to and help for organizing all the panels in Dreamweaver MX. It also lists all open documents.

  • The Help menu offers access to resources for using Dreamweaver MX, including tutorials, help files, and support links.

Bars and inspectors in Dreamweaver MX 2004 provide access to tools, functions, and properties used for developing Web pages.

The Insert toolbar

Located below the application menus, the Insert bar, shown in Figure 30.4, is a panel of different toolsets ranging from a common set containing basic editing functions to specialized sets such as frames, forms, and special characters. On the right is a drop-down list of the different categories. The Insert bar gives you quick access to frequently used objects. The objects can be accessed from the application menus as well, but you'll probably find it's quicker to make a selection using the Insert bar. If you find you'd rather not have it open, choose View ® Toolbars and deselect Insert.

Click To expand
Figure 30.4: The Insert bar.
New Feature

The best part of the Insert bar is the category named Favorites. You can add your most frequently used items into your own customized category. To add to the Favorites category, simply right-/Control+click any icon in the Insert bar and select Customize Favorites. The Customize Favorite Options dialog box opens, shown in Figure 30.5. Scroll through the list (choose your list from the drop-down) and select the object you use a lot. Then click the >> button to add it to the right side. When you are done, click OK. The icons are now added to your Favorites category.
Click To expand
Figure 30.5: Adding objects to your Favorites category.

If you prefer to have tabs instead of the category list, from the category list, select Show as Tabs. As shown in Figure 30.6, the tabs take up more space. If you want to return to the default Insert bar, right-/Control+click the Insert name and select Show as Menu.

Click To expand
Figure 30.6: The Insert bar with tabs.

The Document toolbar

Along the top edge of the document window, the Document bar, shown in Figure 30.7, contains tabs to navigate between open documents. Just below the tabs are buttons for accessing and controlling views. In Dreamweaver, you can build your pages in a visual Design view, in Code view, or in a Split view environment. Each view offers its own advantages depending upon your preferred method of working. To select a view, click its button. Views also include a Live Data view, which you use when building Web applications connected to a data source.

Click To expand
Figure 30.7: The Document bar provides access to all views.

On the right side of the Document toolbar is an icon for Browser Check, which notifies you of things that may be incompatible with the browsers you select to test in. The File Management icon gives access to your remote server. The Preview/Debug in Browser icon has a menu of browsers you can select from and the ability to edit your browser list. The View Options icon offers a way to hide or display elements in your pages, based on your view choice. When Design view is selected, the View menu options include Table, Frame, Layer Borders, and an option for displaying icons for invisible elements. Grayed-out options are not available. In Code view, Word Wrap and Line Numbers are some of your choices. These choices also include code indent and syntax coloring. Split view offers Design and Code view options.

New Feature

In the View Options menu, the option of Table Widths is new. When selected, Table Widths shows a green bar with dimensions and menus on tables when you insert them. The green doesn't preview, but it can be distracting in your visual layout. Deselect this option to turn it off.

The Document window

Depending on your workspace layout and computer platform, your documents open in an application window (Windows, integrated layout) or as floating, separate windows. By default, Dreamweaver opens the Start Page each time you start the program, but you can disable this option by selecting the Don't Show Again option on the Start Page. To open it again, choose Edit ® Preferences; then choose the General category. Select the first preference of Show Start Page. This takes effect when you reopen Dreamweaver or if you close all documents.

The status bar

Along the bottom of the Document window, the status bar contains the Tag selector, Window Size selector, and Download Speed indicator (see Figure 30.8). Although you will barely notice the selector at first, as you build your development skills, you will come to rely on this feature's powerful functions.

Click To expand
Figure 30.8: The status bar showing the Tag selector, Window Size selector, and Download Speed indicator.

You can select any tag that is part of the display by clicking it in the Tag selector. In complex table structures, this makes tag selection and editing a snap.

Tip

Selecting the <body> tag selects everything on your page.

Use the Window Size selector to mimic the browser window size to ensure that your pages fit your planned target dimensions. The Download Speed indicator gives you a rough estimate of how long it will take to download the page code and graphics, based on your modem configuration and connection speed. You can modify these settings in the program Preferences menu (Edit ® Preferences). To modify a setting quickly, click the black arrow on the Window Size selector to display the Window Size menu, shown in Figure 30.9.

Click To expand
Figure 30.9: Edit window size options and download speeds.

The Property inspector

Use the Property inspector, shown in Figure 30.10, to work with each HTML tag's attributes. By default, the Property inspector is docked along the bottom of the document window. The panel name actually says Properties. The inspector is contextual, meaning that its contents change based on the currently selected tag. If you cannot find the Property inspector, you can access it via the Window menu or press Ctrl/Command+F3.

Click To expand
Figure 30.10: The fields in the contextual Property inspector change with the page element selected.

The Property inspector is your primary tool for setting element attributes. Be sure to click the small white arrow at the lower right edge of the inspector to fully expand the panel. Depending upon the element selected, you can enter values, choose from menus populated with options, and browse or point to specific files in the Files panel (window in the floating layout). Press Tab to move forward through fields.

Tip

After entering values for tag properties, press the Enter/Return key. This action updates the document and ensures that the value is accepted. But be careful if you have your cursor inserted and active in the document. Pressing Enter/Return adds a break.


Using Docked and Grouped Panels

You access most of Dreamweaver MX 2004's functionality through panels that are grouped and docked (for Windows users or floating for Mac users) along the right or left edge of the application window. You can enable all panels from the Window menu, but many are on and visible by default. To view the panels in a group, expand the group with the expander arrow (the little black triangle on the upper left side), or easier yet, click the panel group name. Click again to minimize the group and hide the panels.

You can hide or show panel groups as you want. To hide all groups temporarily, choose View ® Hide Panels or press F4. To bring the panels back, toggle by pressing F4 again. Disable the Hide Panels option to bring the panels back.

Tip

PC users can click the button incorporated into the border between the document window and the panel groups. This slides the dock to the right or left (depending on the workspace) to allow expansion of documents. To slide it back into place, click the button again. Dragging this border widens or narrows the dock's width. There is a slide above the Property inspector as well.

Grouping the panels makes sense because there are so many of them, but don't feel locked in by the default arrangement. You can group individual panels and reposition, close, or create new groups to contain your panels. Additionally, you can float one or more panels. To regroup any panel, use its Panel Options menu located at the upper right of the panel's title bar, as shown in Figure 30.11. Choose Group Site with [panel name], and select one of the 12 listed panels. The repositioned panel joins the group of the selected panel.

Click To expand
Figure 30.11: Use the Panel Options menu to regroup a panel within a group or to rename, close, or maximize the current group.
Note

The panels in the Tag Inspector panel group cannot be moved or regrouped.

Tip

To arrange the panels within a group, select and group a panel with the same group until the panels are repositioned as needed.

You can make your own panel group by selecting New Panel Group from the Options menu. When your group is done, select Rename and give it a name.

To close a group of panels, use the Panel Options menu to choose Close Panel Group.

You can also use the Gripper (the textured area at the left side of each group's title bar except for the Tag Inspector panel) to pull the panel away from the dock. You see a blue highlighted area as you move the group around. To create a separate, floating panel, wait until you don't see the highlight and then release. This forms a floating panel.

Other options for modifying the default grouped panels include the following:

  • Renaming groups — Use the Panel Options menu to choose Rename Panel Group.

  • Repositioning Groups within the Dock — Use the Gripper to drag and move the group until the highlight appears in the desired location; then release.

  • Help — Click this option to trigger the Using Dreamweaver Help files, opened to the proper directions for the panel in question.

Reference panel

You'll find the Reference panel in the Code panel group (Window ® Reference or Shift+F1) The Reference panel is a great way to expand your Web development knowledge. If you want to know more about a specific tag, select it in a document and then click the Reference button in the Document bar to open the Reference panel. The panel contains concise guides to different technologies, including Cascading Style Sheets (CSS), ColdFusion (CFML), HTML, JavaScript, Active Server Pages (ASP), Java Server Pages (JSP), Sitespring, and Accessibility. Other ways to access the Reference guide for a specific tag include choosing Help ® Reference or pressing Shift+F1 with a tag selected in Code view or in the Tag selector.

The Files Panel Group

The Files panel group contains two of the most important panels — Assets and Files. These panels are covered in depth in Chapter 31, but it's important to note here that this group should not be closed. You'll be using both panels extensively.

Cross - Reference

The Files panel for the PC is the same as the Files window on the Macintosh. This panel is covered extensively in Chapters 31 and 44.


Modifying Preferences and Keyboard Shortcuts

You can increase your productivity in Dreamweaver MX 2004 by setting program preferences and creating keyboard shortcuts. Preferences provide a way to determine default behavior for the way Dreamweaver opens, codes, and publishes your pages.

Keyboard shortcuts are a great way to speed up page development. The default shortcut set used is the Macromedia Standard Set, but using the Keyboard Shortcut Editor (Figure 30.12), you can choose from a HomeSite (PC) or BBEdit (Macintosh) set or a Dreamweaver 3 set, or you can opt to create your own custom set, starting with one of the first three as a base set. You can modify most of the menu options, including Code Editing, Document Editing, as well as menus on the Files panel (PC) and the Files window.

Click To expand
Figure 30.12: The Keyboard Shortcut Editor.

To use the Keyboard Shortcut Editor, follow these steps:

  1. Choose Edit ® Keyboard Shortcuts. (Be patient, it may take a while to load the shortcuts.)

  2. When the dialog box appears, choose from an existing set.

  3. Duplicate the set by clicking the first of the four buttons to the right of the Current Set menu.

    Note

    The default sets cannot be edited, and you will be prompted to make this custom set if you try to do so without first duplicating it.

  4. Name the set and click OK; then wait for the custom set to load.

  5. Select the location of the menu command you want to edit by choosing it from the Commands menu.

  6. Expand the appropriate menu and select an existing menu option.

  7. In the Press Key field, add your new key combination.

    Note

    For the PC, the key combination must include the Ctrl key; for the Macintosh, it must include the Command key.

  8. To accept the new combination, click the Change button.

    Tip

    To avoid endless attempts to find a combination that hasn't been used, print the preferred keyboard set. Click the Export Set as HTML button (the third of the four buttons), and save the page as HTML. In a browser, open and print the page to list all the existing keyboard shortcuts.


Summary

In this chapter, you learned the different ways to customize your Dreamweaver layout, from modifying panel groups to creating your own custom keyboard shortcuts. In the chapters that follow, look for cross-referenced notes to show you even more options for improving your workflow by altering the Dreamweaver workspace.


Chapter 31: Starting a Web Site with Dreamweaver

Download CD Content

Overview

The basic approach to building a Web site is to build pages on your local computer's hard drive and then transfer a folder with all the site's content to a Web server to make it publicly available. Dreamweaver MX 2004 includes features to help you in this process, from structuring the files and folders to publishing static or dynamic Web content.

It all starts with defining a site. In this chapter, you tell Dreamweaver where you want to store your Web files and folders and learn to manage them using the Files panel.


Defining a Site

Defining a site gives Dreamweaver information about a project's root folder. A root folder is the outermost folder that contains all the elements of a Web site. There are two kinds of root folders — local and remote. The local root folder lives on your computer's hard drive. The remote root folder lives on a Web server — usually on a different computer — connected to the Internet or a local network. You may have more than one remote folder set up: one where you test and another for publishing.

There are two important steps to defining a static site in Dreamweaver MX 2004:

  • Locate the local root folder that stores all the site elements.

  • Enter the Web server access information for the remote site.

A third step is required for defining dynamic (data-driven) sites:

  • Specify an application server model.

Additionally, you may set up different testing servers used in dynamic development prior to publishing. Next you define the site for the Habitat Alert Web site. In the ColdFusion portion of this book, you set up the testing server.

Local info

Habitat Alert site Copy the habitat_alert folder from this book's CD-ROM (Chapters folder) to your hard drive. Be sure to unlock the files.

Note

Because you might not use this book in a linear fashion, you will be provided the site folder for each chapter of the Dreamweaver section where needed. You'll need to define a new site (or edit the path for the local root folder) for each chapter.

To add local information, name your site; then show Dreamweaver where the root folder is located on your computer's hard drive by following these steps to define your site:

Tip

There are two modes you can use to set up your site — Advanced and Basic. Use Advanced if all you want to do is begin to build a site and worry about publishing later.

  1. From the application menu, choose Site ® Manage Sites. Click New, then Site, and then the Advanced tab.

  2. Click the Local Info category if it isn't already selected (blue highlight). Enter Habitat Alert for your site's name in the Site field.

  3. Click the Browse for Folder icon beside the next field (see Figure 31.1). Locate the folder where your site files are contained.

    Click To expand
    Figure 31.1: Name your site and select a root folder.

    Note

    If you are starting a site from scratch, create a new folder where you plan to place all your Web files, folders, and other assets.

  4. Leave everything else default and leave it open for the next section.

Remote info

Building a site presumes that somewhere, somehow someone will see the site. There are many different ways to publish a site, from uploading to a Web server connected to the Internet to burning the site to a CD for local browsing.

Click the Remote Info category in the Site Definition dialog box. Figure 31.2 shows where remote information is added. You need not add any information about how you plan to publish your site to start building it.

Click To expand
Figure 31.2: Information about the Web server is added in the Remote Info category.
Cross - Reference

More detail about the publishing portion of Site setup can be found in Chapter 44. If you are building a dynamic site, see Chapter 46 to learn how to set up your site with ColdFusion server application information.

Click OK to close the Site Definition window; in the Manage Sites window, click Done.

Start Sidebar
Basic Site Setup Wizard

Dreamweaver MX 2004 features the Site Setup Wizard that you may find helpful. Basic mode asks simple questions to elicit the right information for your site.

  1. Choose Site ® Manage Sites. Click New and then choose the Basic tab.

  2. Enter your site's name. This is a name you can use later to select a site from the Files panel's File menu. Try to keep your site names short. Also, some characters are not allowed, such as /, |, \, :, ?, *, <, and >.

  3. Click the Next button.

    Click To expand
    Basic Site Setup mode

  4. If you are building a static site, select the first option: No, I Do Not Want to Use a Server Technology, in Editing Files, Part 2. When building a dynamic site, use the second option. Click Next.

  5. Select the first option: Edit Locally; then upload to a server when ready in Editing Files, Part 3.

    Click To expand
    Select where you will store files locally.

  6. Click the Browse for Folder icon; then locate and select the local root folder of your site. Click the Next button.

  7. Choose None from the menu on the Sharing Files screen. This is equivalent to Server Access in Advanced mode, Remote Info. To add remote information, choose your method of transferring files to a remote Web server or local, networked Web server. This chapter presumes you will leave this set at None. Click Next.

  8. The Summary page shows you the information you supplied. Click Done. Then click Done again to close the Manage Sites dialog box

End Sidebar


Working with the Files Panel

After you define your site, use the Files panel to add files, assets, and even new folders to the root folder. Press F8 to open the Files panel in the Files panel group.

Note

Mac users don't have a Files panel. They have a Files window.

Figure 31.3 is the expanded version of the Files panel, which shows both the local and remote view. (Return to the standard version by clicking the Expand/Collapse button.) The docked (collapsed) Files panel displays a single view controlled by the View menu. The View pop-up menu choices are as follows:

Click To expand
Figure 31.3: Click the Expand/Collapse icon to view local and remote folders together.
New Feature

The Files panel was formerly called the Site panel. All the menus that used to be in the Site panel are now accessed from the Files Options pop-up menu.

  • Local View displays the root folder and all its contents, all local and networked hard drives, and any mounted media, such as floppies or CD-ROMs.

  • Remote View shows the root folder structure on the remote Web server.

  • Testing Server shows the root folder on a separate testing server when defined.

  • Map View displays the local root folder as a flowchart of folders and files, based on how pages are linked together.

When expanded, the Files panel has its own menus. The icons at the left side (below the menus) are the button equivalents of the View menu when the panel is docked. The Site menu offers access to all defined sites.

Start Sidebar
The Files Window

Macintosh users have a Files window that contains the same features as the Files panel. To expand or collapse the window, click the small white arrow at the bottom edge of the window.

Click To expand
The biggest difference in Dreamweaver on the Mac is found in the Files window.
End Sidebar

Navigating the root folder

Use the Expand/Collapse buttons (arrows for Macintosh) to open and close folders. To open a file, double-click its icon.

Fireworks MX If the icon represents an image, double-clicking it launches Macromedia Fireworks. If double-clicking does not launch Macromedia Fireworks, use the File Types/Editors category in your Preferences (Edit ® Preferences) to set Macromedia Fireworks MX 2004 as the primary editor for PNG, GIF, and JPEG file types. You can also right-/Control+click a graphic's icon, choose Open With, and locate the Macromedia Fireworks MX 2004 program.

To move a file or folder, select and drag its icon. When you move files or folders with relationships to other files in the site, Dreamweaver prompts you to preserve the links and update the site.

Creating new files

There are different ways to create new files for your site, such as using the File menu of the Application toolbar or the Files panel Options pop-up menu. You look at each method in this section. All site files must be saved within the root folder or its subfolders.

To add a new page to a defined site using the Application toolbar File menu, follow these steps:

  1. Choose File ® New. This launches the New Document dialog box of prebuilt files of all types (see Figure 31.4).

    Click To expand
    Figure 31.4: The New Document dialog box.

    Cross - Reference

    See more about the New Document dialog box in Chapter 32.

  2. Choose Basic Page; then click the Create button.

  3. Save the new file as index.htm in the site folder you are working on.

Contextual menus

Another, easier method of creating new files and folders in your site root bypasses the Gallery and uses a contextual menu. Dreamweaver is full of easy-to-use context menus accessed with a right-/Control+click.

  1. Habitat Alert site Right-/Control+click the root folder (Site-Habitat Alert) of the Habit Alert site in the Files panel.

  2. From the context menu, choose New Folder. Name the folder html and then press Enter/Return.

  3. Right-click the html folder, and choose New Folder. This places the new folder within the html folder. Name the new folder site and press Enter/Return.

  4. To add a new file, right-/Control+click and choose New File. Name the new file index.htm and press Enter/Return. This method is easier than using the File menu because you create and save the file at the same time. Because it is critical to have all your site's files inside the root folder, this method prevents accidentally saving a file to the wrong location.

Start Sidebar
About the Index File

Web servers are configured to recognize certain extensions (mime types) and automatically load a file if it is named correctly. Have you ever navigated to a folder using a Web browser and seen a listing of all the files and folders in that directory? The listing is a dynamically generated page, or index, of the folder's contents. If the directory lives on a Web server, you wouldn't want the general public to see its contents. After all, designing a Web site is about controlling how users access your content. Name your page index.ext (or, in some cases, default.ext) to supercede the dynamic index.

The extension used with index or default (shown above as .ext) depends on the type of site you are building and the requirements of your Web server. It may be .htm, .html, .asp, and so on.

End Sidebar

Accessing files other than defined sites

In the Files panel from the first drop-down list, you can select your defined sites or any other folder on your hard drive or CD-ROM. In previous versions of Dreamweaver, you could access your computer files in the defined site window and drag files into your defined site. You can no longer do that.

New Feature

Accessing files outside of your defined site is now accessed from the same menu you select your defined sites from. This enables you to open and work on files without defining a site. For a site, it isn't recommended, but when you have a page or two that you are working on and don't need a specific site setup, it's ideal.


Setting Target Browsers

To view your work in progress, you preview pages locally in a Web browser. When you planned your site, you set browser targets — now set Dreamweaver to use those target browsers to preview your pages. To add a Preview browser, follow these steps:

  1. Choose File ® Preview in Browser ® Edit Browser List, or Edit ® Preferences; then select the Preview in Browser category. Both methods take you to the Preview category in the Preferences dialog box.

  2. If you want to add a browser, click the Add (+) button for Browsers.

  3. Browse to locate and select the browser that you determined the majority of your visitors will be using. PC users should find browsers in their Program files. Mac users may have them in the Applications folder.

    Tip

    Ideally, you will have, locally or on another machine, a copy of the target browsers running so that you can test your pages during development. The more complex and mission-critical your site, the more important it is to test early and often.

  4. The Name field is autopopulated, but you can alter the name to something more meaningful to you.

  5. Set this browser as the Primary Browser; then click OK.

  6. Repeat the process to add a secondary browser.

    Note

    PC users can run only one version of the Internet Explorer browser but can have multiple versions of other browsers. Mac users can run multiple versions of all browsers.

To preview a Web page in your primary browser, highlight it in the Files panel (window) and press F12. Ctrl/Command+F12 previews the selected page in the secondary browser. These shortcuts are automatically set up when you define the primary and secondary browsers. Using the keyboard shortcuts also previews the open document. You can also click the globe (Preview/Debug) icon above the document and select the browser in which you want to preview.

Cross - Reference

You may add as many browsers as necessary for your site. See Chapter 30 to find out how to add a shortcut.

To access other browsers without a shortcut, choose File ® Preview in Browser and select the browser, or use the same option in the contextual menu, which you access by right-/Control+clicking a file in the Files panel /window.

Habitat Alert site Select Internet Explorer 6+ for your primary browser. Add Netscape 4.79 or above for a secondary browser. Add Netscape 7+ as a third browser target.


Summary

In this chapter, you learned about site planning and how to set up your site in Dreamweaver by defining a local root folder. You learned to work with the Files panel to manage files and folders. Finally, you set up Dreamweaver to preview your pages in progress using your target browsers.


Project Summary

The following table describes what you accomplished in this chapter in the creation of the Habitat Alert Web site.

Files Prepared for the Habitat Alert Web Site
Images/Folders/Pages | Where to Now
html folder | This is your domain's default folder that all files go into. You use the same file structure locally, so all your links work when uploaded.
site folder | The site folder will contain the other folders of this site; it will be used throughout the Dreamweaver section.
index.htm | This is the home page and will be used to insert graphics and the home page layout into. The next step is to add a background image for the top banner area.


Chapter 32: Building a Simple Page

Download CD Content

Overview

In Chapter 31, you learned how to create and open a new document. Here you see how to add and format content to control how that content appears in the page. This chapter covers the basics of simple page layouts, from page properties to HTML structural markup. Text and images are easily added and formatted using the Property inspector and Tag Editors, which enable you to insert empty tags or wrap selected tags around your content and control dimensions, colors, and alignment of page elements with a few clicks. You can even edit and optimize your images in Macromedia Fireworks directly from Macromedia Dreamweaver.


Setting Page Properties

Setting the Document Title and other page properties will control how a user views your page in a browser. If you don't set these properties, browser and platform-specific values are used by default. Use the Page Properties dialog box to apply the settings used by the entire document.

To access the Page Properties dialog box, shown in Figure 32.1, click the Page Properties button in the Property inspector or choose Modify ® Page Properties (Ctrl/Command+J). When you have selected values, click OK to close the dialog box. You can choose not to accept the new values by clicking the Cancel button. Clicking the Apply button forces the page to update while the dialog box is still open. Keep in mind that Apply presumes you accepted the values. Canceling after applying does not revert the properties to default settings.

Click To expand
Figure 32.1: The Page Properties dialog box with the Appearance category selected.
Tip

You can always use Edit ® Undo or the History panel to back step. Dreamweaver remembers 50 history steps. You can control the number of steps Macromedia Dreamweaver remembers in the General category in your preferences (Edit ® Preferences). Be aware that the more history steps you set, the more memory (computer, not yours) it will take.
New Feature

There are now several category options in the Page Properties dialog box, including Appearance, Links, Headings, Title/Encoding, and Tracing Image. The biggest change, however, is that the code written is no longer HTML but rather CSS styles.

After you've made your choices, switch to Code view (Code ® View), and you'll see that the code written is actually CSS styles and is added to the head of your document. This is considered embedded CSS styles.

The document title

The document title appears in the title bar of the Dreamweaver Document window and most browser windows. In Dreamweaver, unlike many programs, the filename used when you save a page and the document title are not one and the same. Setting a document title is not required but is highly recommended, because most search engines search the Web catalog titles and display them in search results. Effective titling of your pages can improve a user's chance of finding your site.

Dreamweaver adds "Untitled Document" between the <title></title> tags in the head of the page when it is saved. Add a new title in the Title field of the Title/Encoding category of the Page Properties dialog box.

Tip

The Title field is also always available in the Document toolbar.

Adding a background image

You can make your pages more visually interesting with the use of a background image — a special type of image that is displayed beneath the content of your page. Background images tile or repeat horizontally or vertically based on the dimensions of the image and the current width and height of the document window.

Fireworks MX See Chapter 21 to learn how to make your page background image. Background images can also be used in table cells, as covered in Chapter 32.

Note

Because you may not be working through the chapters in chronological order, we will not provide instructions on adding files to the root folder you created in Chapter 31. Instead, you'll need to define a new site for each site folder in the chapterXXexercise folder or copy each chapter's exercise folder into the root you have set up — overwriting what's in it.

Habitat Alert site Before doing this exercise, copy the Habitat Alert folder (in the chapter32_exercise folder) onto your hard drive; then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31). Be sure to unlock the files you copy from the CD-ROM.

Tip

If you already have another Habitat Alert site defined, then choose the Manage Site option in the Files panel of the Site Definition drop-down menu and click the Edit button. You can then simply change the path to the local root folder.

To add a background image to the index page of the Habitat Alert site, follow these steps:

  1. In the Files panel, double-click the index.htm page to open it (html\site\index.htm).

  2. In the Title: text box in the Document toolbar, highlight Untitled Document and delete it. Then type Habitat Alert for the title.

  3. Choose Modify ® Page Properties (or click the Page Properties button in the Property inspector).

  4. Select the Appearance category, click the Browse button for Background Image, navigate to site\sharedimages\backgrounds\banner_bg_4html.gif, and select it. Click OK.

  5. Click in the Background Color box and choose white.

    Background refers to the page background color, although a background image may supply the actual color or colors displayed.

    Caution

    You should always set a background color for your page, especially if you use a background image that is dark with light or white text. Choose a color that is close to the background image's color. If your image is not found, the page color ensures that the text is still readable.

  6. Leave the Text and Link fields blank. You will be adding these using the CSS Styles panel in Chapter 35.

    By default, browsers display all text in black. Links also have default color settings. If the user has not visited the link's destination, the link is displayed in a vivid blue. Visited links default to purple, and when the user clicks a link, most browsers change the link color to red while the mouse is being clicked.

  7. Set all the margins to 0. Blank does not mean it is zero. The different browsers have default margins.

    Margins cause page elements to be offset from the edges of the browser window. To control the margin offsets of your page, add specific values to override the default browser settings.

  8. Click the OK button to close the Page Properties dialog box.

  9. Save and close the file.

Start Sidebar
Choosing Color in Dreamweaver MX

The Color button is used throughout Macromedia's MX programs. In Dreamweaver, click the button to access the Color Picker. Click any of the 216 colors in the default Color Cube palette to select a color. You may also type a specific hexadecimal value in the field next to the current color swatch. To remove a color, remove the hex value or, easier, click the Default Color (no color) button. To choose colors other than those shown, click the Color Wheel button to access your system's Color Picker. You may also sample color from anywhere in the program.

To sample color outside of the program on the PC, first click the Color button with the pointer tool; then click again and keep the mouse pressed. Move the cursor outside of the application window and release when over the desired color. This presumes that you are not working in maximized mode. Macs may sample colors outside of the program without the extra step.

The color button opens a color palette.

The Color palette's panel options offer other color palettes and controls whether Macromedia Dreamweaver snaps your sampled color to the nearest Web-safe value.

End Sidebar

Creating the mission statement page

Habitat Alert site This is a simple page that you later learn to control with JavaScript behaviors. Before doing this exercise, copy the Habitat Alert folder (in the chapter32_exercise folder) onto your hard drive if you haven't done so yet. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31).

Tip

If you already have another Habitat Alert site defined, choose the Manage Site option in the Files panel of the Site Definition drop-down menu, and click the Edit button. You can then simply change the path to the local root folder.

  1. In the Files panel, click the plus (+) sign to open the Find folder. Double-click mission_statement.htm to open it (habitat_alert\html\site\find\mission_statement.htm; or, if you are using the Chapter exercise folder, chapter32_exercise\Habitat Alert32\html\site\find\mission_statement.htm).

  2. In the Title: text box in the Document toolbar, highlight Untitled Document and delete it. Then type Mission Statement for the title.

  3. Press Ctrl/Command+J to open Page Properties.

  4. Set the properties using the values listed in Table 32-1. Don't worry about the font settings; you'll do that in Chapter 35 using the CSS Styles panel.

  5. Click OK to accept the values and close the dialog box.

  6. Save the file.

    Table 32-1: Habitat Alert Page Properties

    Category

    Property

    Value

    Appearance

    Background Image

    find/images/vert_stripe.gif

    Appearance

    Color

    #FFFFFF (white)

    Appearance

    Text

    #003366 (blue)

    Appearance

    Left margin, Right Margin

    100, 100

    Appearance

    Top margin, Bottom Margin

    0, 0

    Links

    Links

    #666600

    Links

    Visited links

    #666633

    Links

    Active links

    #006699


Inserting Images

Images are an important, though not required, part of your site. They set a mood and provide clarity to your content. The basic Web image file formats are GIF and JPEG, although other file formats are viewable in newer browsers. It is safest to stick with GIF and JPEG. You may add images to your page via the Insert toolbar's Common category, the Insert ® Image menu option, or by using the Assets panel.

Fireworks MX See Chapter 21 for more information about Web image file formats.

Use the Property inspector to modify an image's attributes. Add Alt Text to your images to provide additional information and to aid accessibility.

Tip

If you accidentally distort an image by clicking it or dragging one of its handles (the small black dots that display when an image is selected), don't worry. The W (Width) and H (Height) fields display the current image size. If the value is bold, the image has been distorted. Click W or V once to restore the value.

The Assets panel

Images are site assets. The Assets panel provides access to all the site's images without you having to open folders. Because folders are a great way to organize your site, the Assets panel can save you lots of time looking for a specific image — it displays images in alphabetical order without listing the folder structure. Dreamweaver tracks any image inserted and adds the correct path structure. You may notice some images listed more than once in the Assets panel. If you have the same image (or image with the same name) in different folders, each one will be listed in the Assets panel.

The Assets panel is located in the Files panel group. Click the Assets tab to activate the panel and click (if necessary) the Images icon to view all image assets (see Figure 32.2). To insert an image into your page, place your cursor in the page where you want the image. Then highlight the correct image from the Assets panel. Right-/Control+click and choose Insert, or use the Insert button at the bottom of the panel.

Figure 32.2: Right-/Control+click to insert an image.

Fireworks MX Double-clicking an image in the Assets panel opens Fireworks MX 2004. This is good if you want to edit the image, but it can be annoying if you accidentally double-click when you really wanted to insert.

Adding images to the mission statement page

Habitat Alert site Before doing this exercise, copy the Habitat Alert folder (in the chapter32_exercise folder) onto your hard drive if you haven't done so yet. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31).

Tip

If you already have another Habitat Alert site defined, choose the Manage Site option in the Files panel of the Site Definition drop-down menu, and click the Edit button. You can then simply change the path to the local root folder.

To add images to the mission statement page of the Habitat Alert defined site, follow these steps:

  1. Open mission_statement.htm from the Find folder if you've closed it. Place your cursor into the page just before the text content; then open the Assets panel to Image assets.

  2. Select logo_white_top.jpg, right-/Control+click and select Insert (or click the Insert button in the Assets panel). If the Accessibility check feature is turned on (Accessibility category of the Preferences panel), enter Habitat Alert logo into the Alternate text box of the Image Tag Accessibility Attributes dialog box and click OK. Click back into the image and press the right arrow key to deselect the image and move to the right of it.

  3. Locate and insert nav_map.gif. Enter Navigation Map into the Alternate text box and click OK. Click back into the image.

  4. Press the right arrow key to deselect the image; then press the Enter/Return key two times to add two paragraph spaces.

    Tip

    Press Shift+Enter/Return to add a single space or line break. To view line breaks in Design view, edit the Invisible Elements category of your Preferences. Check the Line Breaks box, and click OK to close the dialog box. Then, in Design view, access the Document toolbar's View OptionsÍVisual Aids and make sure that Invisible Elements is checked. If not, click its line. This forces Macromedia Dreamweaver MX to use an icon to represent the line break. Don't worry that it disturbs the layout, as that is only temporary and will not occur in a browser.

  5. Insert mission_statement.gif.

  6. Save the page and preview it. Keep it open for later. Figure 32.3 shows the results so far in Internet Explorer.

    Click To expand
    Figure 32.3: Images added to the mission statement page as seen in a browser (F12).

Editing images with Fireworks MX

Use the integration between Macromedia Dreamweaver and Macromedia Fireworks to edit an image.

Before doing this exercise, copy the Habitat Alert folder (in the chapter32exercise folder) onto your hard drive if you haven't done it yet. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31).

Tip

If you already have another Habitat Alert site defined, choose the Manage Site option in the Files panel of the Site Definition drop-down menu, and click the Edit button. You can then simply change the path to the local root folder.

You can easily perform simple edits to the width or height of an image with the current Web file with the following steps:

  1. Habitat Alert site Open the mission_statement.htm if you closed it from the previous section.

  2. Select mission_statement.gif image. This image is a bit large, so make it smaller.

  3. In the Property inspector, click the gold Edit button. A dialog box asks if you want to use the GIF or a PNG file. Select the Use This Image option.

  4. Fireworks opens.

  5. Select the image and choose Modify ® Canvas ® Image Size.

  6. Type 166 into the top width field. The height changes automatically because the Constrain Proportions option is checked. Click OK.

  7. Click the Done button to be returned to Dreamweaver (see Figure 32.4). The image is saved automatically and overwrites the original image.

    Figure 32.4: The Dreamweaver icon and Done button seen in Fireworks when editing is initiated from Dreamweaver.

  8. Now you could have optimized the image while you were in Fireworks, but I want to show you how to optimize from Dreamweaver if that's all you need to do. To optimize the image — that is, edit its palette, format, or transparency — select the image in Dreamweaver; then choose Commands ® Optimize Image in Fireworks. This places you in the Fireworks Export Preview window (see Figure 32.5). You can close the window without making any changes.

    Click To expand
    Figure 32.5: Dreamweaver to Fireworks, at your command.

    Fireworks MX See Chapter 21 to learn more about editing and optimizing images.

Editing the background image

Habitat Alert site Before doing this exercise, copy the Habitat Alert folder (in the chapter32_exercise folder) onto your hard drive. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31).

Hint: If you already have another Habitat Alert site defined, choose the Manage Site option in the Files panel of the Site Definition drop-down menu, and click the Edit button. You can then simply change the path to the local root folder.

The background image, vert_stripe.gif, repeats along the right edge of the page if the browser window is expanded because the image's width is only 700 pixels. To avoid this, add extra space to the right edge of the image in Fireworks. Because you cannot select and edit a background image from the Property inspector, follow these steps:

  1. Select vert_stripe.gif in the Assets panel. Right-click the image name and select Edit from the contextual pop-up menu. (This opens Fireworks.)

  2. In Macromedia Fireworks MX 2004, choose Modify ® Canvas ® Canvas Size.

  3. Click the top left anchor button, shown in Figure 32.6, and change the Width value to 1600. Click OK.

    Click To expand
    Figure 32.6: Select the top left anchor to add additional space to the right of the Canvas only.

  4. Choose Modify ® Canvas ® Canvas Color, and set the color to White. Click OK and click Done.

  5. Choose File ® Save.

    New Feature

    New to Fireworks MX 2004 is the ability to save as the original bitmap instead of having to re-export the image.

  6. Close the File and Fireworks.

  7. Back in Dreamweaver, save the mission_statement.htm page in Dreamweaver, and preview it (see Figure 32.7). With the wider image, the browser window must wider than 1,600 pixels for you to see the stripe repeat.

    Click To expand
    Figure 32.7: No stripe along the right edge, even with the browser wide open.

    Note

    What you just did was a trick to change the original GIF background image in the mission_statement.htm page. That's why you didn't need to save the new HTML page.


Adding Text Content

Much of your site's content will likely be text. It's easy to add text to your pages by typing. Dreamweaver adds the underlying HTML code. You can format the text using the Insert toolbar, Text menu, Property inspector, or a Tag Editor.

Text selections

You can swipe through a word or paragraph to select text, but Dreamweaver offers the following easier options:

  • Double-click to select a single word.

  • Triple-click to select an entire paragraph.

  • Place your cursor where you want the selection to start and press Shift to extend your selection. Click where you want the selection to end.

  • To select a single line of text, move your cursor to the left edge of the text block. When the cursor changes from the I-beam text cursor to a white arrow, click Shift+click another line to select it and all lines between the first and last line.

Copy and paste functions

If you have existing content, you may want to copy and paste it into your Dreamweaver page. There are several ways to do this. The one you should use depends upon where your copied text comes from — Word documents, a browser window, or another HTML or text document opened with Dreamweaver.

Fireworks MX To use text from a Fireworks file, copy it from the Text Editor (Text ® Editor). Text copied directly on the screen will not paste into Dreamweaver.

Use the Edit menu to access basic Copy and Paste functions. Depending upon the source of the copied text and the view in which you are working, you may also opt to use the Copy HTML and Paste HTML functions. For example, if you copy text from a browser window or another Dreamweaver document, in Design view choose Paste HTML to remove any formatting applied to the text.

Tip

Here's a quick way to move text from one opened Macromedia Dreamweaver document to the other: Make your selection; then drag and drop into the desired location on the target page.

Using Word documents

If your content exists as Word documents, use Dreamweaver's Import Word and Clean Up Word HTML functions to speed up page development. To use Word content, choose File ® Import ® Word Document. When importing, Dreamweaver automatically uses Clean Up Word HTML to let you modify and remove Word's proprietary markup, reducing the amount of code in the page. When opening a Word document, you access Clean Up Word HTML from the Commands menu.

You don't have to do this anymore. Just use File ® Import ® Word Document.


Using Block Formatting

The most basic HTML tags control the layout of text (and images) in the page. Macromedia Dreamweaver offers different options for adding markup to format your content into blocks. The Text menu, Property inspector, Insert toolbar/Text category, and Quick Tag Editor give you options to apply formatting, such as paragraphs, headings, lists, and more.

The Quick Tag Editor

To access the Quick Tag Editor, press Ctrl/Command+T until Wrap Tag <> is displayed (see Figure 32.8). To create a paragraph, type p between the brackets; then press Enter/Return.

Click To expand
Figure 32.8: Wrap tags around a selection with the Quick Tag Editor.

The Quick Tag Editor can edit, wrap, or insert HTML. To cycle through these options, press Ctrl/Command+T until the desired function appears. If you are not sure which tag you want to add with the Quick Tag Editor, wait briefly and a list of HTML tags is displayed. Choose a tag and press Enter/Return. More Tag Hints may be displayed to add attributes to the selected tag. Press Enter/Return again to close the editor.

Tip

To prevent images from separating when the browser window is sized smaller, use the Quick Tag Editor to wrap <nobr></nobr> around the line of images.

Formatting the mission statement page

Habitat Alert site Before doing this exercise, copy the Habitat Alert folder (in the chapter32_exercise folder) onto your hard drive. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 31).

Tip

If you already have another Habitat Alert site defined, choose the Manage Site option in the Files panel of the Site Definition drop-down menu, and click the Edit button. You can then simply change the path to the local root folder.

This exercise gives you a chance to use many of Dreamweaver's basic tools.

  1. Skip over the first block of text.

  2. The next six text blocks should form a bulleted list. Select all six paragraphs and click the Unordered List button on the Property inspector (see Figure 32.9). You could also select the Text category in the Insert toolbar and choose ul.

    Click To expand
    Figure 32.9: Six paragraphs formatted using an unordered list.

  3. Place your cursor into the line with Government Agencies. In the Property inspector, click the down arrow for the Format field and select Heading 4.

  4. Select the next six blocks and format them as an unordered list (bullets).

  5. Format Non-Profits as Heading 4.

  6. Select the next 13 items and format them as an unordered list.

  7. Save the page, preview it, and keep open for additional exercises.

Horizontal rules

Add a horizontal line between page elements to separate them visually. Follow these steps to insert a horizontal rule into the mission statement page:

  1. Place your cursor at the end of the first paragraph, and choose Insert ® HTML ® Horizontal Rule.

    The Property inspector offers control over width, thickness, shading, and alignment, but you can access other attributes through the Tag Editor.

  2. In the Property inspector, set the Width to 400 pixels and the Height to 1, and uncheck the Shading box; then save and preview the page (see Figure 32.10).

    Click To expand
    Figure 32.10: Formatted paragraph and lists, separated by a horizontal rule, as seen in a browser.


Block alignment

By default, the text in all paragraphs, lists, and other block elements aligns horizontally to the left, as do images. You can alter that value by placing your cursor into a block and using the Alignment buttons on the Property inspector, or by choosing Text ® Align. The options are Left, Center, and Right.

Tip

To align all the text in the entire page of paragraphs and other block elements, choose the <body> tag; then click the desired alignment icon.

Floating images in a text block

Habitat Alert site To wrap the text in a paragraph around an image inside the same block follow these steps:

  1. In the mission_statement.htm file, select the Mission Statement image.

  2. In the Property inspector, click the arrow for the Align menu and select Right. Table 32-2 shows the results of each align option.

The Align menu floats the selected image, adjusting the remaining content to the selected image, and places an align="value" inside the <img> tag.

Table 32-2: Float Image Options
Menu Option | Result
Default (Baseline) | The bottom of the image is aligned with the baseline of the current line of text or the bottom of any other image in the block.
Baseline | See previous entry.
Top | The top of the image is aligned with the top of the tallest object in the current line, whether text or image.
Middle | The middle of the image is aligned with the current line, and any other text is pushed below the image.
Bottom | Same as Baseline.
Text Top | The top of the image is aligned with the tallest character in the current line.
Absolute Middle | The middle of the image is aligned with the middle of the text or object in the current line.
Absolute Bottom | The bottom of the image is aligned with the descenders that fall below the current line.
Left | The image is aligned to the left edge of the current block and aligned to the top of the current line. All remaining text flows along the right side of the image and wraps below the image.
Right | The same as Left, except the image floats to the right edge of the block and content flows along the left side of the image.
Cross - Reference

See Chapter 33 to understand how to create more complex image layouts and text layouts. Using the Align menu to float an image may not offer a solution for the layout you desire.


Summary

In this chapter, you learned the basic tools in Dreamweaver for adding text and images to your pages. You learned how to use the Insert bar and menu, Property inspector, and Tag Editors to apply block formatting, including line breaks, paragraphs, headings, and lists. You learned how to align your content and to float an image in a text block.


Project Summary

Let's look at what you did in this chapter that will be used in the Habitat Alert Web site.

Files Prepared for the Habitat Alert Web Site
Files | What was done | Where to Now
Mission_statement.htm | You inserted images and added bulleted lists and a horizontal line. | This page is later used as a pop-up window.


Chapter 33: Using Tables for Complex Layouts

Download CD Content

Overview

Simple block formatting is often not enough to display your content properly. HTML tables offer a greater degree of control for placement of text and images through the use of rows and columns in fixed and relative widths. Tables are especially important when it comes to displaying dynamic data in Web applications.

Web pages have grown increasingly complex, and the HTML table has become the tool of choice for the Web designer/developer. Although originally intended only for the display of raw data, tables offer other options; however, such table tricks come with more than a few caveats — not all browsers render tables as suggested by the World Wide Web Consortium's (W3C) HTML 4.0 specifications.

In this chapter, you see how to work with Dreamweaver MX table tools and learn solutions to the most common browser issues to build complex, but consistently rendered, pages. You also see how to modify the table structures used in Fireworks HTML exports.


Understanding Table Basics

A table is a grid that uses rows and columns to form cells — the intersection of a row and column. The cell expands to hold content and certain rules guide that expansion. You can set a fixed, specific width in pixels, or use a relative, percentage-based width that expands or collapses with the width of the HTML document in the browser window. Figure 33.1 shows a table inserted with the Table Widths view on, which is the default. The Table Width view adds the blue bar at the bottom.

Click To expand
Figure 33.1: A table inserted and the Table width view turned on.
Note

You can turn the Table Width off by choosing View ® Visual Aids and deselecting Table Widths. They'll be left on for discussions to come in this chapter — then turned off.

A typical table uses the <table><tr> and <td> tags, sometimes incorporating the <th> to indicate a table heading cell. Each tag has its own properties, controlled in Dreamweaver MX 2004 through the contextual Property inspector. Browsers, notably Netscape 4x, have specific requirements for rendering a table, and the property values you supply to the browser may or may not display consistently between different versions and on different platforms. Learning to build cross-platform, cross-browser tables is the key to developing complex page layouts.


Table Types

There are four table types, defined by the way that each behaves when viewed in a browser:

  • Fixed-width tables control the width of text content, to provide multicolumn text or to force images together. A fixed-width table uses a pixel-based width. Text content within the cells of this table type wraps to maintain the table's width. However, if you place "hard" content with a total width wider than that set to the containing table, the cells and table expand to accommodate it. A fixed-width table forces a horizontal scroll bar to appear along the bottom edge of the browser window when that window is smaller than the width of the table. This scroll bar enables the user to see all the table content by scrolling. And, if the total height of the content expands the table vertically, a vertical scroll bar appears.

  • Relative/percentage-width tables display content that adjusts to the width of the browser window. Use a relative table to display content that adjusts to the width of the browser window. A table with a percentage value for its width is said to be relative because its size adjusts according to the document's size within the browser's window. When the browser window is expanded, the table expands and vice versa. A relative table doesn't force a horizontal scroll bar unless the percentage value is set to greater than 100 percent. An exception to this rule occurs when the total width of the table's hard content, such as images, media, or other tables, is greater than the width of the browser window.

  • Fit-to-data tables do not use a table width. Use this table to have the table collapse around the content, whatever its size. Different browsers render this table type in different ways. Be sure to test your page in your target browsers to see whether this table behaves as expected. Fit-to-data is most often used for dynamic content or when you are using the Insert Tabular Data tool in Macromedia Dreamweaver.

  • Hybrid tables are percentage-based tables with at least one fixed-width column. This table is also known as an AutoStretch, stretchy, or fluid table because the table and one or more of its columns stretch to fit the browser window while the remaining columns remain set to a specific width. This table type has the advantage of relative sizing with the control of fixed-width columns, but beware: Its development and consistent rendering can be tricky.

  • Nested tables, while not specifically a table type, enable you to place tables inside the cell of another table. Avoid excessive nesting of tables because they slow down the rendering of your page in browsers. An occasional nested table is fine, but using multiple tables for modular page construction or through the use of Cascading Style Sheets (CSS) often works better.


Inserting a Table

You can insert a table into your page using one of these methods:

  • Click the Insert Table tool from the Insert bar's Common toolset.

  • Choose Insert ® Table

  • Press Ctrl/Command+Alt/Option+T.

This opens the Table dialog box, shown in Figure 33.2, where you can choose the number of rows and columns and set the table's width, border, and other properties.

Click To expand
Figure 33.2: The Table dialog box.
New Feature

New to Dreamweaver MX 2004 are the Accessibility options at the bottom of the Insert Table dialog box.

You can work with your table in Design or Code views. Most of the tools used for tables are the same in both views.

The nsbp; seen in the code in Figure 33.3 represents a nonbreaking space. Macromedia Dreamweaver places these in each cell of the inserted table to prevent the cells from collapsing. Many browsers require some sort of content in a cell to display certain cell properties. Figure 33.3 shows the code as seen in Code view.

Click To expand
Figure 33.3: In Code view, the nonbreaking spaces in each cell in the code hold the cells open in Design view.
Tip

It's a good idea to view the table code often if you are not familiar with HTML code, as this will increase your coding skills greatly.


Selecting Table Structures

To work with tables, you need to select the different components of the table with the Tag selector and edit the tag's properties. A selected table, row, column, or cell is highlighted. To select the table, first click anywhere inside of the table structure; then select the <table> tag (see Figure 33.4). Optionally, when you have the Table Width view on, you can click the arrow in the bottom row under the table to select the table (or under columns to select the column).

Click To expand
Figure 33.4: Selecting the <table> tag selects the entire table. The selection is indicated by the thick black border.

To select a row or column, you have several options:

  • Move your cursor to the left or top edge of the row or column, wait until an arrow cursor appears, and click.

  • Click into the first cell (of a row or column); then Shift+click again into the last cell (of the row or column).

  • Select a row (but not a column) by clicking into a cell within the row and clicking the <tr> tag displayed in the Tag selector. There is no column table tag to select using this method.

Select a column (but not a row) by clicking the down arrow of the Table Width *** bar below the desired column, and select the option you want (see Figure 33.5).

Click To expand
Figure 33.5: Selecting using the Table Width *** bar.

It's easy to move around in tables. Use the Tab key to move from left to right and top to bottom, and to jump from cell to cell and row to row. Press Shift+Tab to move in the opposite direction. Pressing the arrow keys also moves you through the cells, but content within cells may make it necessary to use a key more than once to get to the desired location.


Modifying a Table Structure

You can modify the number of rows and columns or adjust the width, height, border, and other properties for a table in the Property inspector or, in some cases, the Modify ® Table menu options or from the Table Width *** bar. The Property inspector has icons for quick editing of the height and width of columns and rows, as shown in Figure 33.6.

Click To expand
Figure 33.6: The table icons that are seen in the Property inspector when a table is selected.

Select the <table> tag; then enter new values in the Rows and Columns fields to add or remove rows and columns. You can also modify the table tag and properties by hand in Code view or by using the Tag Editor. Add new rows or columns by clicking Modify ® Table ® Insert Rows, or in the Columns dialog box. To remove a row or column, select it; then press Delete, or use the Modify ® Table ® Delete options.

Setting table width and height

To control the width of a table from the Property inspector, select the table tag, enter a value into the Width field (W), and choose the table type from the drop-down menu. Table heights are seldom used because actual content in the table's cells determines the total height of the overall table.

Caution

Although Dreamweaver contains a feature to drag the borders of a table for sizing the table, rows, or columns, its use is not recommended. This feature does a lot more than is obvious while you are using it, such as setting values in unexpected places that will later interfere with your layout.

Modifying rows and columns

Because each part of the table controls specific properties, you must select the proper tag to access the properties of the tag using the Property inspector. Use the Property inspector to set widths, heights, and horizontal and vertical alignment for rows or cells. Some properties, such as horizontal or vertical alignments, are shared by the row and cell tag. When the values are the same, you should set the values using the <tr> row rather than the <td> cell. This writes the values to the row so you don't have to write them in each cell, reducing excessive coding to create a smaller download. That being said, you can set a row's properties and then override them in a single cell by setting different properties to that tag. Simply select the specific cell by clicking into it; then set new properties.

Start Sidebar
When to Use a Table Structure

In some cases, you'll use a table to display data, either in static form or dynamically from a data source; however, the majority of your tables will be used as solutions for placement of content. For example, you cannot place two small images directly to the side of a larger image without using a table.

Click To expand
Tables make tricky layout possible.

Of course, it is possible (even easy) to overuse tables and to build overly complex table structures. Your goal should be to build the simplest table structures possible. The following good rules to follow are covered in-depth later in this chapter:

  • Avoid nesting too many tables — placing a table inside of another table and so on.

  • Build modular tables to avoid overly complex row and column spanning.

  • Don't attempt to build one big table that holds everything.

  • If you can position elements without a table, you can put the same elements in a single table cell.

  • Do the math; be sure that column widths add up to match the table's width.

  • Provide every column's width; this is the secret to getting Netscape 4x browsers to behave!

Finally, keep in mind that you are the logic behind the tools, whether working in Dreamweaver or any other Studio MX 2004 program.

End Sidebar

Fixed-width tables use pixels values for column widths. By default, the value you add in the Cell Width field is in pixels, and it is not necessary to specify it. Percentage-based tables generally use percentage values for column widths. To set a cell's width to a percentage value, type the percentage sign after the value without adding any space between the number and sign (see Figure 33.7).

Click To expand
Figure 33.7: A cell selected makes the cell properties available in the Property inspector (notice the table icon in the left corner showing the approximate location of the selected cell).
Note

You can also set these properties using the Table Width *** bar, but this interferes with your visual design in Dreamweaver, and personally I never leave it turned on. However, you have the option to decide which workflow works best for you.


Working with Fireworks HTML

Fireworks MX With few exceptions, pages exported from Fireworks MX 2004 use table structures for layout. User-defined slices build complex rows and columns exported as one big table by default. To keep the complex structure from falling apart, an extra row is added along the top of the layout, and spacer GIFs — formed from a 1x1 transparent pixel image — are stretched to the column's required width.

Fireworks MX See Chapter 21 for options and more information about how Fireworks MX 2004 exports HTML.

Because Fireworks cannot export all types of tables, it's likely you will want to modify the table structure and add HTML text content, links, and other elements inside of Dreamweaver. You can open and modify Macromedia Fireworks MX 2004 pages in Macromedia Dreamweaver MX. The simpler your layout in the Fireworks page, the easier this is to do in Dreamweaver. When your design's slices are too complex, it is often easier to rebuild the page layout in Macromedia Dreamweaver rather than try to modify it.

No graphic application's HTML features match those found in Dreamweaver. For professional, fine-tuned, and modular pages, it is always better to build the HTML in Dreamweaver rather than rely on Fireworks to export the entire page. Later in this chapter, you see how to rebuild a page layout and bring in carefully planned exported HTML from Macromedia Fireworks MX 2004.

Opening a Fireworks page

To use Fireworks pages in Dreamweaver, export the page and images (from Fireworks) into your site folder. Figure 33.8 shows the Habitat Alert page as exported from Macromedia Fireworks and viewed in Macromedia Dreamweaver.

Click To expand
Figure 33.8: Basic page and complicated table structure exported from Fireworks MX.

Modifying a Fireworks table

The table structure of the page illustrated in Figure 33.8 is actually far more complicated than the final page structure used for the Habitat Alert site, because Macromedia Fireworks creates a separate cell for each slice. Because cells form the grid of rows and columns and Macromedia Fireworks (by default) uses one table to contain everything, the table is very complex and contains 11 rows and 11 columns, as marked by the dotted lines in Figure 33.8. The code is long and complex, with many spans. A span is formed by merging cells and should be avoided unless absolutely necessary. Unfortunately, Macromedia Fireworks tables make excessive use of spans.

Editing a Fireworks-generated HTML page will give you all sorts of problems. For example, if you want to add content to the Fireworks HTML, you'll need to remove the spacer.gif image that Fireworks added. Click in a cell and delete the spacer. If you can't find it to select, switch to Split view and locate the code that will be similar to this:

<img src="images/spacer.gif" width="1" height="24" border="0" alt="">

Delete it. Now add text. Figure 33.9 shows how the overly complicated table structure might react to additional content.

Click To expand
Figure 33.9: The table falls apart when HTML text is added.

It is possible to edit the table structure to simplify its layout prior to adding text and other content to prevent problems such as the one in Figure 33.9. The idea is to simplify the content area, as shown in Figure 33.10, by merging rows and columns. This will again create a span — which isn't the preferred method, but it's a workaround if you want to use a Fireworks HTML page.

Click To expand
Figure 33.10: Merging all of these cells forms an easier-to-edit space.

Images are first deleted; then a logical selection of cells are selected and merged to form a single, main content cell. Choose Modify ® Table ® Merge Cells, or use the Property inspector's Merge Cells icon, shown in Figure 33.11.

Figure 33.11: The Property inspector's Merge Cell and Split Cell icons.

Content is replaced inside the newly merged cells, as shown in Figure 33.10.

Controlling the alignment of content within table cells is a key factor to having your design lay out properly. Click a cell (or row) and use the Property inspector to vertically align the images and text (content) within a cell (or row). The default horizontal alignment for table cell content is Left. The default vertical alignment is Middle. When two cells sit in the same row, uneven amounts of content can cause the other cell's content to realign. Setting the vertical alignment of the cell or row to Top in the Vert menu forces each cell's content to start at the top of the cell.

You still need to title and modify page properties to get this page close to finished, but it is at least able to accept text and other HTML content within some of its cells without falling apart. Adjusting the margin offsets in the page properties (set all to zeros) places the design in the upper left corner. You could create a background image tile to place behind the design to continue the blue and gold stripes to the right.

So many edits to this page are necessary that it would be better to build the page from scratch in Dreamweaver MX 2004.

Removing extra rows and columns

Frequently, in a file exported from Fireworks, you'll have a table with extra columns, rows, and spacer images. For example, I frequently do my design layout in Fireworks and code all the rollovers for the navigation in Fireworks. I then export just the navigation area including images and code. In Dreamweaver, you can then insert the navigation with all the images and code in tact. But Fireworks generates a table with extra rows and columns, which you may want to clean up a bit prior to inserting into a Dreamweaver layout.

Figure 33.12 shows navigation exported from Fireworks and opened in Dreamweaver. As you can see, it's pretty difficult to see what the table elements are. If you select the table and check the Property inspector, you'll see that there are 20 rows and 4 columns. You certainly don't need all those columns.

Figure 33.12: A navigation HTML file generated by Fireworks and opened in Dreamweaver.

New to Dreamweaver MX 2004 is a feature that makes seeing the table structure much easier. Choose View ® Table Mode ® Expanded Table View. A dialog box opens telling you that this is visual only and does not affect your page. Figure 33.13 shows the expanded view.

Figure 33.13: The Expanded table view.

Normally you find this a difficult way to work, since the expanded view will throw off how my design looks in Dreamweaver. But in an instance like this, it makes cleaning up the table a ton easier. Now you can see the extra row at the top and the column to the left that you can now select easily and remove (right-/Control+click and delete the row/column). Figure 33.14 shows the top row and left column removed. Now there are only 11 rows and 1 column — a much cleaner table with little effort.

Click To expand
Figure 33.14: The Fireworks table cleaned up.

To return to the Standard mode, click the Exit text that appeared in the blue bar added to the top of your document when you changed views.


Building a Modular Layout

Using multiple tables to lay out your content is superior to using a single, complex table structure. The table code is less complex, and it is easier to modify your page regions without disturbing every section of the page. Plus, the page will begin to load faster. When you have one large table, nothing will display until the browser has read the last table tag. So by using smaller tables, they will load one at a time and appear to load faster.

Figure 33.15 shows a more desirable table layout for the Habitat Alert site. The site specifications call for a hybrid table behavior that incorporates both fixed-width columns and fluid columns behavior to fit more target monitor widths. Hybrid table structures are stacked to create a modular design.

Click To expand
Figure 33.15: Modular tables make this page layout easier to build and modify. The table border is for demonstration purposes only.

Building a hybrid table

There's nothing hard about building a fluid table that renders consistently in all browsers — when you know the secrets. In the Habitat Alert layout, you build three tables.

On the CD-ROM

Save the Habitat Alert33 folder from the chapter33_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, choose the Manage Sites option in the Files panel of the Site Definition drop-down menu and select your defined site and the Edit button. You can then change the path to the local root folder.

  1. Habitat Alert site Open the Files panel (F8 opens the Files panel if it's not already open), and open the html folder and the site folder. Then double-click the index.htm file to open it.

    Cross - Reference

    All the margins have been set in Page Properties to zero, and the background image was added in Chapter 32.

  2. Insert your cursor into the page and add a table with the Insert Table tool. Set the table to use 1 row, 3 columns, and a width of 100 percent. Set Border, Cell Padding, and Cell Spacing to zero (see Figure 33.16). Type Layout summary (see figure) in the Summary section, and click OK.

    Click To expand
    Figure 33.16: The Table dialog box with the settings for the first table in the index page of the Habitat Alert site.

  3. Place your cursor into the first cell and use the Property inspector to set its width to 230. This is a pixel value by default. Click in the document or press Enter/Return for the change to stick.

  4. Select the <tr> from the Tag selector, and set the vertical alignment for the row to Top using the Vert menu options (Property inspector). Click in the first cell.

  5. Use the Assets panel to insert banner_left.gif. Click the image to select it.

  6. Press the right arrow to move to the right of the image and then insert location_home.gif. Total the height of both images. You'll see that together they are 119 pixels. (Don't worry if the table cells jump around and change sizes. You fix that shortly.) Press Tab to move into the next cell.

  7. Insert logo.gif and note its dimensions (208x47). Figure 33.17 shows the table and images so far.

    Click To expand
    Figure 33.17: The first table added with the logo and left side images added.

  8. Press Tab to move to the next cell.

    Note

    If you are using Windows 2000 or XP, you may have to reselect the image to place the keyboard's focus back in the document.

  9. Insert spacer.gif, go to the Property inspector, and set the spacer's width to 300 pixels and its height to 102 pixels.

  10. Move to the right of the image by pressing the right arrow, and add a line break (Shift+Enter/Return).

  11. Add spacer.gif and set its dimensions to 20x17. The spacer will keep the buttons off the right edge of the browser window when you align the cell's content to the right.

  12. With your cursor still in the last cell (or select the <td> tag), go to the Property inspector and change the Horz setting to Right. Do not use the paragraph alignment buttons to set alignment!

  13. Set the last cell's width to 400 pixels.

    So far, you have set the width of two columns using fixed pixel values, but earlier you learned that percentage-based tables generally use percentage values. When pixel values are used for column widths in a relative table, that makes it a hybrid table; therefore, at least one column must use a percentage value to allow for stretch in the table. Because you cannot know what the fixed width would need to be in the user's browser window, it makes sense to use a value that will take up all of the remaining space available. That value is 100 percent.

  14. Select the <td> tag for the middle cell. A good way to do this is to select the logo. You'll then see the <td> tag for that cell in the Tag Selector. In the Property inspector, set the middle column's width to 100 percent, manually adding the percentage sign. Figure 33.18 shows the Web page so far.

    Click To expand
    Figure 33.18: The first table with the cells set, spacers added, and the logo inserted.

  15. Save and preview your page.

The logo isn't positioned properly. To force the logo to align properly, follow these steps:

  1. Select the logo and press the left arrow to move in front of the image.

  2. Add a line break; then press the up arrow to move to the new line that is now above the logo.

  3. Add another spacer image, setting its dimensions to 228x33.

  4. Select the logo image, and in the Property inspector, add 10 to its Hspace value. It looks much better now, as shown in Figure 33.19.

    Click To expand
    Figure 33.19: The logo in a better position.

  5. Save and preview in both target browsers.

    Note

    H space (horizontal space) places white space before and after an image. V space (vertical space) does the same, but it places the space above and below.

Stacking tables

By default, tables will stack. You do not have to place line breaks or paragraph returns between tables to place one table below another. In fact, adding a line break may actually cause unwanted space between your table structures.

Habitat Alert site You'll now add the table that holds the bird image and the main content in the Habitat Alert layout.

  1. To build the next table, click the page below the existing table, and click the Insert Table icon to add another table.

  2. Give the table 1 row, 2 columns, and set its width to 100 percent. Set border, padding, and spacing to zero.

Now you can see the advantage to using modular, stacked tables. If you had to build a single table to hold three columns for the top portion and two columns for the remaining structure, you would be forced to span columns by merging two columns into one. Although this would work, it offers less flexibility in the long run because it is unnecessarily complex. Two tables are simpler, and they load faster. Keep it simple with stacked, modular tables.

Using a table cell background image

Almost all major browsers except Netscape 4x recognize the use of background images in table cells. The Habitat Alert layout uses a graphic in the background to form the bottom of the circle below the heron image. The heron image is inserted into the cell and sits at the top of the cell, over the background image. This forms a more flexible layout that you can use in other pages, replacing the heron image with a form or other HTML content.

Cross - Reference

Although it's possible to apply a background image to the table, Netscape 4x browsers will not render it. In fact, Netscape 4x browsers have several documented problems with background images, covered more in depth in Chapter 35.

Habitat Alert site To set the background for the second table's first cell in the Habitat Alert home page, follow these steps:

  1. Place your cursor into the first cell, and click the Browse for Folder icon next to the Bg field in the Property inspector.

  2. Locate circle_btm_plus.gif in the sharedimages\backgrounds folder of your site and click OK. Don't worry about what you see on-screen; you're not finished!

  3. The image appears to tile horizontally because you haven't yet set a width for the table cell. Set the cell's width to 230 pixels.

  4. Use the Asset panel to insert circlepic0.jpg.

  5. Tab to move to the next cell. Set this cell's width to 100% to create the stretchy cell for this hybrid table. This prevents the horizontal tiling of the background image in the first cell.

    Tip

    Without the heron image, the fixed-width cell would collapse because the 100 percent width set to the second cell is very powerful. When working with hybrid tables where you do not have a foreground image to force the fixed cell to remain open, use a spacer GIF, setting the width to the desired column size.

Using a minimum cell height

You can't set the maximum height of a table. The same is true of table cells and rows. You can, however, set the minimum height, and a spacer is not necessary to hold it open.

Habitat Alert site Although you fixed the tiling problem, the background image's bottom portion is not visible because the cell isn't tall enough to display it. Follow these steps to correct the problem:

  1. Select the heron image; then use the Tag selector to select the cell (<td>).

  2. Set the height of the cell to 300 pixels.

  3. last:Select the <tr> row and set the vertical alignment to Top, using the Vert menu options. Save and preview. Figure 33.20 shows the page as seen in a browser so far.

    Click To expand
    Figure 33.20: The second table added with a background image and foreground image.

    Tip

    Before you apply a background image to a table cell, be sure you set up the image to behave properly. Remember, background images tile, repeating horizontally and vertically unless controlled by CSS (see Chapter 35). The circle graphic used here has lots of white space added to the bottom — roughly 2,800 pixels to prevent vertical tiling — similar to the edit made to the mission statement's page background image in the previous chapter.

Coloring a table cell

This trick can be used horizontally or vertically, but the example shown from the Habitat Alert layout uses a cell in a table row to form a colored line that stretches as the document widens in the browser window. Not all browsers support coloring horizontal rules, and it would be nearly impossible to get the rule to align properly.

Habitat Alert site In this set of steps, you use a background color in a table cell to create a 1-pixel line that stretches with the right column of the page.

  1. To place some quick content, open the content.htm file and copy it all; then close the document and paste into the right column of the second table in the index.htm file.

  2. Insert your cursor below the second table in the Habitat Alert home page. If you cannot easily place your cursor below the page content, click in the last cell, and select the <table> tag, using the Tag selector. Press the right arrow to move outside of the table.

  3. Insert a new table. Give this table two rows and two columns, and set the width to 98%. Set the border, padding, and spacing to zero.

  4. Click the second cell of the top row; then scroll to see the top of the page. Use the Bg Color Picker to sample the darker gold color (or type in #999933) from the banner area (or the bird's belly). Be sure to use the Bg Color Picker found below the Bg field. If you hover over the Color Picker, a ToolTip should say Background Color.

  5. Click the first cell of the top row. Set this cell's width to 230 pixels and add a spacer GIF, setting its width also to 230 pixels. Leave the spacer's height set to 1 pixel.

  6. Click the second cell again and set its width to 100%. Although this table's width is 98%, you still use a 100% value for the stretchy column. Remember, relative values are relative to their container. The 98% value set for the table takes up 98 percent of the document. The 100% value in the stretchy column takes up 100 percent of the remaining width in the table.

  7. Add a spacer GIF to the gold cell. Click the <table> tag in the Tag selector to force the page to update; then save and preview the page. Figure 33.21 shows the nice, single-pixel line that sits along the bottom of the main content area and stretches to the right when the browser window is expanded.

    Click To expand
    Figure 33.21: A line added to the bottom of the content area.

  8. Place your cursor in the second cell of the second row and set the Horz setting to Center.

  9. In the same cell, type home | learn | act | support | find.

  10. Save and preview your page.

    Tip

    Create the vertical divider between the words using the pipe character. To add one of these cross-platform characters, type a backslash while pressing Shift.


Inserting Fireworks HTML

To finish the Habitat Alert home page layout, you make use of another integration feature between Dreamweaver and Fireworks. The Insert Fireworks HTML option enables you to take an exported Fireworks page and insert its table structure into an existing page. To use this feature wisely, crop Fireworks files down to a specific structure, save the file as a component of the design, and export the page and images as you would any other file, saving them into the defined Dreamweaver site.

Fireworks MX The steps described previously were covered in Chapter 21, where you exported the rollover navigation buttons for the Habitat Alert layout.

You can even edit the Fireworks HTML page in Macromedia Dreamweaver prior to using the Insert Fireworks HTML button!

Tip

Because Macromedia Fireworks creates a separate cell for each image, the button table for the Habitat Alert layout is overly complex — separate table cells are not needed to have buttons sit side by side. In fact, no table is needed at all. In this example, inserting the Macromedia Fireworks HTML creates a nested table, not necessary and, again, overly complex. Remember, your goal should be to build the simplest structures possible for your layout. You'll clean up the Fireworks file now.

  1. Open the page navigation_buttons_fw.htm from the site folder. This is the page exported from the cropped button file in Chapter 21. Code in the head of the page tells Dreamweaver that this is a page created in Fireworks:

    <html>
<head>
<title>navigationbuttons.gif</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks MX Dreamweaver MX target. Created Sat Jul 27 21:04:42 GMT-0700 2002-->
</head>

  2. To remove the table in this page, drag each button from its cell and drop it below the table. Now delete the empty table. Another fast way is to use the Clean Up HTML command to remove specific tags: <table>, <tr>, and <td>.

  3. Save the page as navigation_buttons.htm and close it.

  4. Now, select the second, smaller spacer image located in the last cell of the top table in the home page. Press the left arrow to move the insertion point to the beginning of that image.

  5. From the Common toolset in the Insert bar, click the arrow next to the Images icon and select Fireworks HTML.

  6. In the Insert dialog box click the Browse button and navigate to the navigation_buttons.htm page you edited just a few steps ago. Select the Delete File after Insertion option and click OK. Save and test your page. Figure 33.22 shows the buttons in place. These buttons don't contain any rollover code, but if they did, the code would also have been inserted into the Macromedia Dreamweaver page.

    Click To expand
    Figure 33.22: The buttons from the exported Fireworks HTML page are inserted into the layout.

    Note

    The inserted buttons may not look lined up in Dreamweaver's view, but when you view in a browser, you'll see that it looks great.

    Cross - Reference

    You'll add interactivity to these buttons in Chapter 39.

This is an extremely useful way to work with Macromedia Fireworks and Macromedia Dreamweaver. A cropped component file is easier to edit, and you just saw how easy it was to modify and insert.


Using Great Table Tricks

You've probably seen table tricks in action — outlines that stretch to rounded-corner tables. Have you ever wondered how it was done? Every designer/developer should build an arsenal of table tricks to use in their layouts to add a new level of sophistication to a page. Here are just a few of my favorites.

Creating great table borders

The problem with table borders is that they are kind of clunky. Of course, table borders can make content easier to read by helping the eye understand the relationship of a row or column of text. Although all browsers allow control over the presence and width of table borders, not all browsers render borders equally. Some browsers bevel the border, adding a 3D effect with a light source from the top and left of the page. Others allow more control through the use of color and shading. No browser actually renders a single-pixel border. Borders are a table property; you cannot turn off the border for some cells and leave it for others.

Using cell padding and cell spacing

You can use cell padding and spacing to add white space to tables. Padding places space on all four sides of all the table cells in the table, so content placed in the cell doesn't touch the cell's edges. Where two cells meet, the space between them is doubled. Spacing adds room between the cells. The amount of space between cells is not doubled but rather is shared.

The following is a handy border trick to give you the control you want. This trick requires a nested table, so use it sparingly.

  1. Create a new basic page. Add a one-row, one-column table set to 400 pixels. Give the table zero border and spacing, but set the padding to 1 pixel. You can use any width for your page, but work with this one for now.

  2. Click the table cell and select it. Set the cell's background color to a color of your choice. Be sure you are setting the cell's color, not the table's.

  3. With your cursor still in the cell, add a new table, setting the width to 400 pixels, with three rows and three columns. Give your new table a zero border, 1 pixel spacing, and 5 pixels padding.

  4. Select all the cells in the second and third rows by Shift+clicking from the first cell in the second row to the last cell in the third row. Color these cells white.

  5. Save and preview. As you can see, the spacing between the cells of the nested, inner table lets the color of the outer table's cell show through. The white of the nested table's cells blocks the color, forming 1-pixel outlines.

  6. Select all the cells in the top row. Merge them and set this cell to a table heading by checking the Header box in the Property inspector. Headings are automatically centered and bolded. Type a heading into the table; then save and preview.

    Tip

    You can merge cells and set different colors to control your border. You can even make the spacing wider to create a wider outline or change the color of the outlines. To make the outline wider, select the outer <table> tag and increase the cell pad (the border) value in the Property inspector. To change the color of the table borders, click the table and select the <td> that appears just before the second <table> tag.

Creating a rounded-corner table

This trick uses graphics to give a table a unique look by getting rid of the hard, boxy, rectangular shape.

Fireworks MX The next exercise uses files exported from Chapter 21, which is the Fireworks optimizing and exporting chapter.

A simple, fixed-width version

  1. In Dreamweaver, use the Files panel to open corners.htm from the rounded_tables folder. This page was exported from Fireworks and contains comments — hidden notes in the code — to maintain a relationship between the Fireworks source file and the page.

  2. Each cell contains a graphic. The gold graphics form the outlines and rounded corners for the table. Delete the center cell's image and type put content here. The side graphics keep this cell open, but they also make the table bigger than you want it.

  3. You can set the center cell to Top Align (Vert) and sample the corner graphics to set the center cell's background color. With the center cell colored, as shown in Figure 33.23, the text no longer appears to be against an edge.

    Click To expand
    Figure 33.23: The center of the rounded table set to Top vertical alignment with the background color the same as the borders.

  4. Save and preview.

A relative-width (more complex) version

The simple fixed-width table was easy because Fireworks sets the width of each cell. Because the graphics in the cells match the width of the cells, all browsers render the table accurately. But making a relative table with rounded corners is similar to building a hybrid table; it's trickier to get all browsers to render it properly.

  1. Using the same corners.htm file, select the <table> tag and set the table's width to 50%, replacing the 400-pixel width.

  2. Save and preview your page in your target browsers. Open the browser to full window, and don't be surprised to see the table fall apart — creating gaps beside all the corners — when you expand the browser window. Remember, this is a hybrid table.

  3. To fix the table, set the top, center cell's width to 100%. (Press the right arrow to get into the cell or select the <td> tag and test again.) You should still see gaps, but only beside the right corners. The gaps are caused because the graphic in the top and the bottom-center cells is too short to fill in the entire cell.

  4. Click the top-center cell and select the <td> tag. Set the Bg image for this cell to the same graphic used in the foreground. Browse to locate the rounded_tables folder. Inside, you will find an images folder containing all the graphics for this page. Select bg_top. gif.

  5. Save and preview.

  6. Repeat the previous step for each of the outer cells, including the left and right side cells. Using these images:

    • bg_btm.gif for the bottom row background

    • bg_left.gif for the left side

    • bg_right.gif for the right side

    As you add content to the center cell, you would experience the same gaps you saw when you expanded the table. By placing background images in all four cells, the outline seems to magically expand, whatever the size of the table!

  7. Replace the foreground images in the four sides and four corners with spacer GIFs. Leave the spacers set to 1x1 to allow the table to shrink horizontally and vertically in response to sizing the browser window and reduced cell content.

    Tip

    Here's a fast way to add the spacers: Double-click the first image and select spacer.gif. Select the second foreground side image. Press Ctrl/Command+Y to repeat the last step. Because you are using the same image, Macromedia Dreamweaver sets this image source to spacer.gif. (This may not work for Windows XP systems.) Repeat until all four images are replaced.

  8. Set the center cell's height to a minimum of 100 pixels. Save and test the page. As you add content to the center cell, it expands vertically. But it only expands horizontally as you widen the browser window.

    Tip

    Keep in mind that the 50 percent width of this table reacts to the browser window because that is its container; if the same table were nested in a fixed-width table cell, it would not expand horizontally at all.

Round-trip editing between Fireworks and Dreamweaver

There are several options for editing your corner graphics. You could simply go to Fireworks, reopen the source file, and re-export only the graphics into the image folder. That is a valid way to work. But the integration between Dreamweaver and Fireworks makes it possible to edit the table with a single click:

  1. Select the table.

  2. Click the Edit button. This launches Fireworks MX 2004, opening the source file for the page. Because you moved this file into the Chapter 33 folder, Dreamweaver may not be able to find the source file. Navigate to the rounded tables folder and select it.

    The code in the top of the table and the Macromedia Fireworks Src path in the Property inspector tell Macromedia Dreamweaver where to find the source file.

    <!-- fwtable fwsrc="corners.png" fwbase="corners.gif"
fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->

  3. In the Fireworks toolbar, toggle the slice visibility by clicking the Hide Slices and Hotspots button. Make sure that the graphic is selected, then click the Swap Strokes and Fill button below the Stroke and Fill Color Pickers. This changes the table to a blue table with gold outlines.

  4. Click the Done button at the top of the Document to close Fireworks and return to Dreamweaver. To finish the alterations, you have to change the background cell color for the center cell.

Fireworks respects the changes made to the table in Macromedia Dreamweaver and does not try to return the table to its original state. The spacers in the sides are still in place as well. Although complex tables may not always be so easy to update, if you use Fireworks HTML, be sure to check out this handy integration feature.


Summary

Dreamweaver MX 2004 builds clean table code with very little effort. In this chapter, you learned about tables and Macromedia Dreamweaver table tools. You learned just how hard it can be to use a single table for a layout when you edited a Fireworks HTML table. Using hybrid tables, you built the Habitat Alert page, tapping into the power of Studio MX 2004 integration to insert a Macromedia Fireworks component to add navigation buttons to the site. Finally, you tossed a few great table tricks into your developer's bag, learning to build fancy table borders and rounded-corner tables.


Project Summary

Let's look at what you did that will be used in the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site

Files

What Was Done

Where to Now

index.htm

You added the tables and images for the home page layout of the Habitat Alert site.

You added a table that became a horizontal line and navigation.

Links still need to be added in Dreamweaver. You use similar pages in the rest of the site, learning to build a template to speed up the development process.

Additionally, you add complex navigation scripting to the buttons you inserted with the Insert Macromedia Fireworks HTML tool.


Chapter 34: Building Basic Navigation Links

Download CD Content

Hypertext links are the mainstay of the Internet. In this chapter, you discover the different ways you can browse, point, or drag to build all kinds of links by using text and images.

Understanding URLs and Links

Links, of course, are what the user clicks to be taken from one page to another or to somewhere different within a page. There are many ways to build links between one spot in your site and another: Some links move from page to page; others move you around in a page, but however they act or look, most links involve creating a path from one point to another. There are three different types of paths you can use to build a link:

  • An absolute path (URL)

  • Document-relative path

  • Site root-relative path

Absolute URLs

A URL, or Uniform Resource Locator, is a method of accessing an Internet address that starts from a specific point. The starting point for most standard Web pages is the Internet or World Wide Web. Most URLs include the protocol (http://) plus the server's name (www.studiomxbible.com), as well as the path to the page from the site's root (/index.htm).

HTTP stands for Hypertext Transfer Protocol, which is the standard for delivering HTML pages. Another protocol is File Transfer Protocol (FTP), which is used for transferring files. HTTPS is the protocol for secured servers. Between each portion of the URL, forward slashes indicate new directories. So, the example given in the previous paragraph would read www.studiomxbible.com/index.htm when used as a path in a link. Absolute URLs are used in Dreamweaver MX 2004 when the targeted page is outside of the defined site.

Note

Windows users will see that backslashes are used instead of forward slashes — it means the same thing.

External link assets

When you create a link by typing the absolute URL to a target that is outside of the defined site, an asset is created as well. Dreamweaver tracks many things you do or have in your root folder as an asset, such as images, URLs, colors, and so on. The Assets panel, shown in Figure 34.1, keeps track of all external links. To reuse the same URL, select the text or image to use as the link; then open the Assets panel (press F11) and click the Link icon. Select the correct URL, and drag and drop it over the selected text or image.

Figure 34.1: Absolute URLs for the Habitat Alert site are stored as link assets.
Note

When keyboard shortcut alternatives are given to open panels, be aware that if they are already open, the command (such as F11) will toggle the panel closed.

Document-relative paths

Most of the time, links built within a site are document-relative (document to document), and the paths used are measured from the document that contains the link. Relative paths omit the part of the absolute URL that would be the same for all pages within the site (such as the http://www.yoursite.com part). The path is written in the href (hypertext reference) as href="path.".

For example, the Habitat Alert site contains four major sections, and each of the four sections' pages is contained within folders named for the sections. A link from the home page to the Learn section's starting page would read learn/index.htm, taking the user down into the learn folder to locate the starting page. A link from that page back to the home page would read ../index.htm. Two dots and a forward slash indicate movement up out of a directory. These are all document-relative links and are easily configured using Dreamweaver. They are the most appropriate type of links to use when you are not sure where your site will be located on a server.

Root-relative paths

A root-relative link is a bit like an absolute URL in that it starts from a set point, but the set point is a folder (the site root) on a Web server. Paths that are root-relative start with a forward slash, measured from the root folder. The choice to use root-relative linking is made when selecting a file to link to. The Relative To menu, shown in Figure 34.2, defaults to Document; for root-relative links, select Site Root from the menu.

Click To expand
Figure 34.2: Choosing the site root from the Relative To menu.

Root-relative links require a Web server for interpretation. Opening a page with root-relative links in a browser without using Preview in Browser doesn't work. Any images will display as broken links and linked pages will not be found because your local browser doesn't understand where the root folder is. Using Preview in Browser allows Dreamweaver to convert the links temporarily (image and page paths) to document-relative links. However, any page called will not have root-relative links converted and will therefore render improperly.

Windows users can preview root-relative pages via their local server using Internet Information Services (IIS) or Personal Web Server (PWS) if they set up a testing environment and choose Preview Using Local Server in the Preview in Browser category of their Preferences.

About HTML links

The HTML tag used to create a hypertext link is the anchor tag, written as a pair of opening and closing <a></a> tags. When linking to other pages, the anchor tag includes an href attribute to contain the path to the target page, resulting in code that looks like the following:

<a href="learn/index.htm">link</a>

Other links can be made to link within a page or to send e-mail. Some links are null links, or placeholder links that indicate no path but do provide a way to apply JavaScript or other scripted behavior.


Building Text Links

Most Web pages contain hypertext links, sometimes as main or secondary navigation, inline in the body of text content, or as footer-style navigation at the bottoms of pages. By default, text links appear underlined, first as blue text. Later, after the target page has been visited, the visited text link appears purple. When the user clicks a text link (in the browser), the link might temporarily turn red or some other color. This is an active link. You can reset the default color of links through the use of HTML in the Page Properties settings. Alternatively, you can control the appearance of links, including the underline decoration, using Cascading Style Sheets.

Cross - Reference

See Chapter 35 for information about using CSS style sheets to control link appearance.

The two main methods for building text links are Browse for File and Point to File.

Browse for File link method

To build a link using Browse for File, select the text or image that serves as the link. Click the Folder icon found next to the Link field in the Property inspector. Navigate to the targeted file and select it.

The Select File dialog box provides the Document or Site Root-relative linking options. The path structure is given in full. Feedback about whether the select object (image or page) is within the currently defined site is shown at the bottom, as shown in Figure 34.3.

Click To expand
Figure 34.3: Dreamweaver indicates when the target page is outside of the site.

Point to File link method

To build a link using Point to File, select your text or image link; then press and drag away from the small, targetlike icon to the right of the Link field in the Property inspector. Drag to the desired file listed in the Site Files panel and release.

Alternatively, when working with text links only, you can access the Point to File icon directly from the page. After selecting the text, press Shift; then click and drag away from the text selection (see Figure 34.4). The same target icon on its tether appears, and you can release it over a page in the site file.

Click To expand
Figure 34.4: The Point to File tool works with text and image links.

Link History

As you build text links, a history that you can access with the Link Field pull-down menu in the Property inspector is created. Link History is built only with text-based links and remains only as long as the current Dreamweaver session lasts. Because Dreamweaver maintains the proper relationship of one page to another, you can choose links from the menu, and the program adjusts paths, if needed.

Caution

Because Link History is session-based, it is possible to see history for more than one site if you work on more than one site while the program is open.


Building Image Links

To make a link from an image, select the image and browse or point to the target file. Images cannot access Link History, nor do they build it. Image links appear outlined in blue rather than underlined unless the border attribute for the image is set to zero. Dreamweaver automatically sets the zero value for images used as links.

Cross - Reference

More complex uses of images as links are covered in Chapter 39.

Creating an image map

Generally, only one href may be added per image. When you are designing graphics to be used for a site, you slice a layout into separate images that are exported from Fireworks. Sometimes it isn't practical or convenient to create separate images for each button or link needed, and an image map is used instead.

An image map uses one or more sets of coordinates called hot spots that are measured from the upper left edge of the image. The coordinates are defined in <area> tags, and you can assign an href and/or other attributes. The <area> tags are listed between the opening and closing <map></map> tags. You make references to the specific map inside the <img> tag.

Map-drawing tools

You draw image map coordinates with the map tools located in the Property inspector. To access the tools, you must first select an image. Image maps require a reference name to the map, which determines which map coordinates are applied for the image.

On the CD-ROM

Save the Habitat Alert34 folder from the chapter34_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, choose the Edit Site option in the Files panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site Let's build an image map using the Mission Statement page from the Habitat Alert site.

  1. Open mission_statement.htm from the find folder.

  2. Select the graphic navmap.gif using the pointer tool. It's the image with the site links and the byline below them.

  3. Name your map navmap in the field supplied in the lower left corner of the Property inspector.

  4. In the Alt field type Navigation for Home, Learn, Act, Support and Find as shown in Figure 34.5.

    Click To expand
    Figure 34.5: Name your map and build hot spots with the map drawing tools.

  5. Use the rectangular drawing tool (blue rectangle below the Map name) to create a rectangle over the HOME button text. This map's shapes are easily created as rectangles. Other maps may require you to use the Ellipse or Polygon tool to draw hot spots.

  6. With the home hot spot selected, notice the change in the Property inspector. Leave the placeholder null link (#) in the Link field and the Target field blank. In the Alt Text field, type Click to close this window and return to the home page.

  7. Draw a rectangle hot spot for each section, adding the Alt text from Table 34-1. Figure 34.6 shows the map.

    Click To expand
    Figure 34.6: The hot spots and Alt text added to make the image map.

  8. Save and close the page.

    Table 34-1: Image Map Settings

    Text

    Alt Text

    HOME

    Click to close this window and return to the home page.

    LEARN

    Click to close this window and Learn More.

    ACT

    Click to close this window and Act Now!

    SUPPORT

    Click to close this window and Support Habitat Alert.

    FIND

    Click to close this window and Find More Resources.
The Polygon tool

The Polygon tool is a bit trickier than the rectangular or elliptical hot spot tools. The Polygon tool works like a pen tool in drawing programs in a connect-the-dots fashion. Use it to create irregular hot spots. First, click to create a starting point. Move to the next logical point and click again. Don't try to put too many points in your hot spot because they generally are not necessary. The idea is to add enough points to roughly outline the desired shape.

As you begin to return to the starting point, a see-through bluish fill appears inside the hot spot you are drawing. Occasionally, the fill appears to be outside the shape, but this is only temporary; don't let it influence your outline, as it will correct itself when you continue to close your finished hot spot. Take the outline all the way back to the starting point to finish the hot spot.

Note

To start a new polygon shape with the tool, deselect the current shape by switching to the Pointer tool and clicking the image outside of any hot spot shape; then reselect the Polygon tool and begin your new polygon hot spot.

To adjust the points of your polygon hot spots, use the Pointer tool to select a point and move it. To adjust the location of any hot spot, use the Pointer tool to select the hot spot shape, and drag the hot spot to a new location. Select a hot spot with the Pointer tool to update its link, target, or Alt text.

Fireworks MX You can build an image map in Fireworks, too, for use in pages exported from that program and opened in Dreamweaver MX. Or crop it to the map slice and export it using the new Quick Export feature in Fireworks. See Chapter 21 for more detail.


Using Null Links

A null link is a placeholder href that is most often added so you can attach JavaScript behaviors to a page element. To write a null link, you may use a hash mark (#) or type javascript:; in the Link field for a text or image. In most cases, the second method is preferable, but either works. In some Netscape browsers, the hash mark might trigger an hourglass or spinning cursor when clicked.

Habitat Alert site Let's build a null link in the Habitat Alert home page and save it as a command. These steps presume you are working through the project exercises and have defined the project site. You can use the same in any page:

  1. Open index.htm from the site folder. This should be your current project home page, which contains a set of text links along the bottom of the page.

  2. Select Home from the footer text.

  3. In the Link field, type javascript:;.

  4. Open the History panel by choosing Window ® History (Shift+F10). Select the step that says Make Hyperlink: javascript:;.

  5. From the panel Options menu, choose Save as Command.

  6. Name the command Make Null Link and then click OK.

  7. Select Learn from the footer text. Choose Commands ® Make Null Link. Repeat for each of the footer text selections; then save your page and close it.

  8. Repeat for the footer links in the missionstatement.htm file in the Find folder; then save and close it.

Start Sidebar
Building a Command from the History Panel

One of the many panels contained in Dreamweaver MX 2004 is the History panel. You can open the History panel by choosing Window ® History or Shift+F10. The panel's main purpose is to represent visually the steps taken in an opened document. By default, the History panel can show up to 50 steps. To increase (or decrease) the number of steps recorded, use the programs preferences (Edit ® Preferences ® General category) to set another value. Keep in mind that more steps increases the amount of memory used by the application. To erase all the history steps in the panel, from the panel Options menu, select Clear History.

The slider to the left of the recorded steps is used to move back and forth within the history of the document, as shown in the following figure. To restart earlier in the document's history, set the slider back to that point and begin working in the document.

The slider moves back and forth in the page history.

You can also select one or more steps and replay them in the current document or choose to copy the steps and play them in another document. Another powerful alternative is to select one or more steps and create a Command (click Save as Command in the History Options panel). A command is a powerful macro that can remember and run a series of saved steps. Not all the steps recorded by the History panel can be saved or replayed. As shown in the following figure, the listed steps that display red Xs may not be part of the command.

Click To expand
The red X means a step cannot be part of a saved command.
End Sidebar


Building Anchor Links

Anchor links are used to move to a specific point in a page. The point may be in the current page or any other page. The target point is first set up with a named anchor — an empty set of tags that add a reference name to a specific point. To set up the named anchor, place your cursor at the desired spot and choose Insert ® Named Anchor, or click the Anchor icon in the Insert bar's Common toolset. In the Named Anchor dialog box, name the anchor and click OK.

To see a named anchor, you must have Invisibles enabled. Click the View Options menu in the Document bar and choose Visual Aids ® Invisibles. An anchor icon displays in Design view, as shown in Figure 34.7.

Click To expand
Figure 34.7: The Named Anchor icon.

To link to the named anchor, select the text or image that serves as the link, drag the Point to File icon to the named anchor icon, and release it. This is fairly easy when both items are in the current page. If your named anchor is above or below the visible area of the page, drag the Point to File icon to the top or bottom edge of the document, wait for scrolling to begin, and release the anchor. The Link field displays a hash mark and the anchor's name.

To link to a named anchor in another page, it may be faster to append a page link: With the text or image selected, drag the Point to File icon to the correct page in the Files panel and release it. When done, go to the Link field for the current link and type a hash mark (#) plus the name of your anchor after the current page link.


Setting Up E-mail Links

You can use text or an image to set up an e-mail link. An e-mail link uses an href that begins with mailto:

<a href=mailto:Joyce@JoyceJEvans.com>send email</a>

Keep in mind that using this method exposes you to unscrupulous users that search the Web to locate valid e-mail addresses for junk mail targeting (spam). Because your e-mail address is right there in the code, it is easy to find by setting up a spider — a robot or 'bot program — to look for and collect addresses with the @ symbol.

Tip

Check out www.manastungare.com/asp/preventspam.asp, at the site of Manas Tungare, a developer from India, living in Atlanta, Georgia. This nifty page encodes the letters in your e-mail address with special characters that are not easily read by e-mail 'bots. An e-mail address such as the one for studiomxbible becomes

<A HREF= "mailto:%69%6E%66%6F%40%73%74%75%64%69%6F%6D%78%62%69
%62%6C%65%2E%63%6F%6D">Send Email</A>

Enter your e-mail address into the Email field and click the Obfuscate button. To use the newly encoded address, copy and paste it into your Link field in Dreamweaver.

You can also add an e-mail link using Insert ® Email Link, as shown in Figure 34.8. The Email Link dialog box opens where you enter the text of the link and the e-mail address.

Click To expand
Figure 34.8: Insert Email Link window.


Summary

In this chapter, you used text and images to build links to pages, name anchors, and to open and send e-mail messages. You learned how to show a hidden named anchor and how to make the document window scroll up or down with the Point to File icon. Using the History panel, you created a command for later use in your program.


Project Summary

Let's look at what you did that will be used in the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
mission_statement.htm | You built an image map. | This will be used to control a parent window with JavaScript.
index.htm | Null links were placed in the footer text. |


Chapter 35: Using Cascading Style Sheets

Download CD Content

Overview

As a specification set forth by the World Wide Web Consortium (W3C), Cascading Style Sheets (CSS) is a standard designed to separate the visual presentation of content from the actual structural markup — a language used to render structured documents, such as HTML and XML, on screen, on paper, and verbally in speech.

What does this mean for you as a developer? It means that you no longer need to wrap a font tag around every block element to get the look you want. It means you can put the control of the way your page appears into a single location. It means that suddenly, your life just got easier!

Dreamweaver contains a CSS Styles panel and improvements to the Property inspector, Page Properties dialog box, and a new Panel called the Tag inspector that contains new CSS panels.


The Advantages of CSS

The most important argument for using CSS is that it removes all the extraneous markup that controls how the content appears, leaving the HTML structural markup as it was originally intended to be — a set of selectors that are applied so that any user agent (browser, reader, printer, and so on) can interpret the content structurally and present it as needed. After all, a printer has different needs than a Web browser has; the reader used by a sight-impaired user definitely doesn't need <font> information. Block element selectors in HTML have meaning. With CSS, the HTML can return to a purer form, uncluttered by unnecessary markup.

The biggest advantage of using CSS comes with how and where rules are defined. Instead of controlling the appearance of text, for example, at the block level, a single rule may be written in a separate page and applied to all pages within a site. When you want to change the information in a rule, only one edit is needed. That is a definite time-saver. It also means that pages tend to be more consistently styled, because all pages share the same rules, more or less.


Understanding CSS

Most modern browsers (version 4 and up) support the use of Cascading Style Sheets to control the appearance of content marked up with HTML or XML tags. The exception to this is Netscape 4x, whose support for inheritance and certain properties is quirky at best and downright buggy in practice. The way styles render in different browsers depends entirely on how that browser supports the CSS specification. Before you begin to use Cascading Style Sheets, you need an understanding about what CSS is and how it works.

Cascading Style Sheets is a specification that uses its own syntax to write rules that control the appearance of content in a Web page. These rules are called styles, which together are collectively known as a style sheet. Style rules are governed by the Cascade, which in turn uses the principles of Inheritance, Specificity, and Importance to determine which rules apply where conflicting rules exist.

Selectors and declarations

Style rules are made up of two parts: selectors and declarations. A selector is most often an HTML tag. A declaration is a set of properties and values written in a specific syntax. Dreamweaver knows how to write declarations, so you don't have to learn the syntax at all, but you do need to understand the principles to help you decide how to use the CSS tools and features in the program.

Selectors

There are many kinds of selectors. The simplest selector is generally an HTML tag, but it might also be a custom tag defined in Extensible Markup Language (XML). For simple selectors, the tag itself is redefined to incorporate specific properties and values that will be used every time that tag appears in the page. If you redefine the <p> tag to use Verdana text, size 14 point in green, all paragraph text will be green, 14-point Verdana.

Classes and IDs

Class or ID selectors are tags that use the attribute of Class or ID. A Class rule is independent of any selector and can be applied to different selectors in a page. The way the selector appears when a class is applied depends upon the selector and the rule's properties. The name given to a class always starts with a period, and you may not use spaces or odd characters in the name.

IDs are like classes, except they are applied only once in the page. ID rules always start with a hash mark (#) symbol. Both classes and IDs are applied, meaning that the page author picks selectors and sets them to use a class or ID:

<p class=".maincontent"> or  <p ID="#firstparagraph">

Pseudo-classes and Pseudo-elements

Rules written to govern the appearance of pseudo-classes and pseudo-elements are not controlled by the structure of the document but rather by a predictable state of the element or document.

The best example would be the anchor tag's predictable states: visited, hover, and active. None of these is a selector, but instead is a state. When a link appears in a page, it may display using a defined set of property values; when the state changes, as in the users move their cursors over it, click, or visit the target page, the values for those properties change. The rule written to govern how the properties change is not applied within the page but instead depends on the state of the page to change and automatically engage the new values.

Contextual selectors

Contextual selectors combine a class with one or more selectors to create a selective and power-ful rule. Applying a basic class rule to a containing element creates context. Additional rules can be set up to declare property values that apply only when the specific selector occurs within the container of that class.

Inheritance

All HTML pages are governed by their structure, which is a key part of the basic markup. For example, you cannot put the body tag into the table tag; a paragraph can't contain a table, but table cells can contain paragraphs. These basic structural rules create parent–child relationships between the elements in the page. Almost every element is either a parent or child, or both. This parent–child or ancestor–descendent relationship governs the way CSS rules are applied to the page; it's not surprising that the major principle at play in these relationships is called inheritance. Inheritance is the mechanism for determining how style rules are applied — not only for the specific element, but for its descendents, too.

For example, if the body of a page is set to use a specific text color, all text in all elements should inherit that text color unless specifically set otherwise. This is the theory and should be the case, but there are exceptions: some due to special settings, and some due to the vagaries of inconsistent browser support. Additionally, not all properties are inherited. Text color and size are inherited; border and box margin and padding properties are not. Experience through practice and careful attention to reference resources will help you gain insight into this guiding principle of CSS.

Specificity and importance

Two more guiding principles of CSS are specificity and importance. Specificity describes the relative weights of style rules. IDs have a relative weight of 100. Classes weigh in at 10, and simple selectors have a specificity of 1. This is important because it is entirely possible, even likely, that you may have rules and apply them in ways that set up conflict. For example, say you define a rule for all paragraphs <p> that sets them to use red text. You also define a custom class called mainparagraph that uses green text. When you apply the custom class to a paragraph, you end up with the following:

<p class="mainparagraph">  text content here </p>

The text cannot be both red and green; which will it be? This is where specificity applies. Because classes have a greater specificity, it overrides the simple selector's rule, and so this paragraph will sport green text. This is a simple example; specificity is almost always more complex than this. To further complicate matters, inherited values lose their specificity. Any explicit rule overrides an inherited rule. Following is an example:

body {color:blue}
p {color: red}

If you type words into the body of the page, they appear in blue text. Make those words a paragraph and their color changes to red. Why? Specificity. Although the blue is inherited, the text within the paragraph is controlled by the properties of the explicitly defined paragraph style.

!important

!important is a declaration that can be used to override specificity; adding this to the correct position in your declaration gives the value precedence. Dreamweaver doesn't really have a mechanism to add !important to your rules, but with easy access to the defined rules, you can add it by hand. !important must always be added just before the ending semicolon of a property declaration:

p {color: #003366 !important; background: #CCCC99;}

Each property that is important would have its own !important declaration.

The ever-useful cascade

Style rules may originate in an external page or be embedded within the head of a specific page; style rules may even be defined at the block level or inline, although this practically defeats the advantages of using CSS. External style sheets are linked or imported in a page, but that page may also have embedded and inline rules. It can even have more than one externally linked or imported sheet.

The cascade also determines what happens when properties for a specific selector conflict; the general rule is that the "closest" rule's property value wins, although there can be exceptions. Given the same selector and property, an inline value overrides an embedded value, which in turn overrides an external value. If the declarations are in one or more linked or imported sheets, the style value in the last sheet read has precedence. This same principle means that the author's styles override default values provided by the browser (user-agent).

CSS versus HTML formatting

If the closest value wins, what happens if you use font tags (or set a table cell's bgcolor) in a page that also contains CSS styles? Many new users of CSS try to cover their bases by including both styles and HTML markup. This defeats the purpose of CSS because the same rules that apply to CSS styles also apply to font and other HTML formatting. Cascade applies, and for the most part, the HTML formatting is always closer.

Tip

Use the Clean Up HTML Command (Commands ® Clean Up HTML) to remove existing font tags by enabling the Specific Tags option and typing in font, b, I, and any other possible HTML formatting markup.

When developing your page HTML, don't set properties using HTML methods. For example, if you plan to have all table structures, use a header row with a background color, and set that value using CSS. That way, if you decide to change the color later, you can simply edit the style.

New Feature

The default setting for text and styles set in the Property inspector is now CSS. An embedded style is added to the head of your document when you use either the Property inspector or the Page Properties dialog box. You can still use HTML by changing the CSS preferences in the Preference dialog box — but it isn't recommended.

CSS properties

Many properties are definable using CSS, including text, block, border, box, list, and more. Each category of property contains attributes, such as color, size, and other definable values. Many resources list which properties are acceptable for specific elements, from the W3C specification (www.w3c.org) to books and online development forums. Rather than list properties, we'll approach creating styles with properties using the tools in Dreamweaver.


CSS Style Tools and Features

With a bit of knowledge of how CSS works, you're ready to incorporate CSS into your site, using the powerful tools and features available in Dreamweaver. The most obvious place to start is the CSS Styles panel.

The CSS Styles panel is part of the Design panel group by default. If you changed your default panel groups, you can always open the panel by choosing Window ® CSS Styles or by pressing Shift+F11. The panel displays style rules for the active open document only.

The Tag Inspector is new to Dreamweaver MX 2004, and it is open by default. You can't move any of the panels within the Tag Inspector panel group. The panels may change depending on what you have selected, as you'll see shortly.

CSS Styles panel

This panel, shown in Figure 35.1, offers a quick and easy way to attach a style sheet and to define and edit styles. Press Shift+F11 to activate the CSS Styles panel. At the bottom of the panel you'll see icons. The one on the far left is used to attach a style sheet you may have done already. The icon with the plus (+) sign is to add a new style, and the one with the pencil is used to edit a style. You'll see more on how to use these tools later as you progress through this chapter.

Figure 35.1: The CSS Styles panel.

Editing styles

There are several new ways to edit styles in Dreamweaver MX. You can still edit a style in the CSS panel, but now you can also edit via the Tag inspector panel group. You can also edit the style sheet directly. Be sure to save the style sheet every time you actually open it and make changes to it.

Editing styles using the CSS Styles panel

Editing styles in the CSS Styles panel has changed slightly in Dreamweaver MX 2004. In Dreamweaver MX, the Style Definition dialog box would open if you double-clicked a style name. If you've been using Dreamweaver MX, this change will take some getting used to. Now the style sheet will open if you double-click. To edit the style, select the style name and click the Edit button — the Style Definition dialog box will open. Make your changes and click OK to exit.

New Feature

When you click a style in the CSS Styles panel, the Tag inspector changes to the Rule panel (see Figure 35.2). You'll be able to see the rules you have set for the selected style. You can also edit in the Rule panel by clicking to the right of the property and entering what you want. Some properties present you with a drop-down list to select from.
Click To expand
Figure 35.2: The Rule panel opens automatically when you select a style in the CSS Styles panel.

Editing styles using the Tag Inspector panel

Press F9 to activate the Tag inspector. You'll notice three panels that are present by default: Attributes, Behaviors, and Relevant CSS. You can edit using the Attributes panel and the Relevant CSS panels.

In the Tag Inspector panel group, select the Relevant CSS panel to make it active. This panel shows the properties relevant to your page, as shown in Figure 35.3. You can select any of the style or tag names and see the properties for that style. You can view all the properties in List view or use Category view. To edit a style, simply click to the right of the property and enter the parameters you desire. You may also see a style with a red line through it. Pass your cursor over the name and you'll see a message describing a potential browser conflict. What you see here depends on the settings you made for browser checks (Browser Check icon in the Document bar).

Click To expand
Figure 35.3: The Relevant CSS panel in List view.

To edit specific attributes, select the Attributes panel. You can choose to display by clicking on the Show Category View or the Show List View icons. You can select any attribute and edit its properties, as shown in Figure 35.4.

Figure 35.4: The Attributes panel in Category view.

Formatting text from the Property inspector

Properties you enter from the Property inspector are now CSS styles, rather than HTML styles as in earlier versions of Dreamweaver. This is great news because HTML formatting adds deprecated <font> tags. Although it's better to use CSS styles, doing it via the Property inspector (or Page Properties) is not the ideal method. Font information and formatting adds <span> tags inline, and the style is written automatically and embedded to the head of your document.

The best way to add styles to your text is to set the format for Headings, then use the CSS Styles panel to add a new style and save it in an external style sheet. However, the occasional embedded style on a specific page isn't all that bad.


Defining Style Rules

Defining style rules for selectors, classes, IDs, and contextual selectors begins with options chosen in the New CSS Style dialog box, shown in Figure 35.5. To open it, add a new style by clicking the Add (+) button at the bottom of the CSS Styles panel. Choosing a type of style and selecting either an external or embedded origin is required for every new style.

Click To expand
Figure 35.5: The New CSS Style dialog box and options.

Type of style

Earlier in this chapter, you learned about the different kinds or types of selectors for which style rules can be defined. You use the Type options to determine the nature of the rule you are creating:

  • Use Class (can apply to any tag) to define classes.

  • Choose Tag (redefines the look of a specific tag) to create style rules for simple selectors.

  • Select Advanced (IDs, contextual selectors, and so on) for defining ID styles, working with pseudo-classes or -elements, or building contextual selectors.

Style sheet origin

The second required step to creating a new style is setting the origin of the style rules. In this case, you are choosing whether the rules are saved in an external file or are written to the head of the current document.

  • To create an external style sheet, choose Define In: New Style Sheet File.

  • To embed a style rule, choose Define In: This Document Only.

On the CD-ROM

Save the Habitat Alert35 folder from the chapter35exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site In this section, you build a style by creating an external style sheet to redefine the <body> tag used in the project home page layout. This sample site has an embedded style in it. In Chapter 32, page properties for the background were added so they were embedded in the page. In this exercise you remove the embedded style, make a new style sheet, and attach it to your page. To do this, follow these steps:

  1. Open the home page (site/index.htm) and click Code view. Navigate to the head of the document and locate this code:

    <style type="text/css">
<!--
body {
       background-image:
url(sharedimages/backgrounds/banner_bg_4html.gif);
       background-color: #FFFFFF;
       margin-left: 0px;
       margin-top: 0px;
       margin-right: 0px;
       margin-bottom: 0px;
}
-->
</style>

  2. Select the code and cut it (Ctrl/Command+X).

  3. Choose File ® New ® Basic ® CSS, and click Create. A new page ready for a CSS style sheet opens.

  4. Paste the code into the new CSS page.

  5. Delete everything except the code for the style. Your final page should contain only the following:

    body {
  background-image: url(sharedimages/backgrounds/banner_bg_4html.gif);
  background-color: #FFFFFF;

}
    Note

    You removed the margin information because you'll get better code by adding it in the Site Definition dialog box in the Redefine HTML Tag section.

  6. Choose File ® Save As, navigate to your html/site folder, and add a new folder called stylesheets. Navigate to that folder, type main.css into the File Name box, and click OK. Close the file.

  7. In the CSS Style panel, click the Attach Style Sheet button. The Attach External Style Sheet dialog box, shown in Figure 35.6, opens. Browse to the stylesheets folder you added, and select main.

    Click To expand
    Figure 35.6: The Attach External Style Sheet dialog box filled in for the index page.

    Note

    Notice in the CSS Styles panel that the background style no longer shows up.

    When you save an external style sheet, a document-relative path is created that must be maintained when the site is published. Later you see that code is placed in the head of the document that references the path to the page. This is what the code looks like:

    <link href="stylesheets/main.css" rel="stylesheet" type="text/css">

  8. Select the Link option and click OK.

  9. Add a new style by clicking the Add (+) button at the bottom of the CSS Styles panel (in the Design panel group).

  10. Save your page but leave it open and proceed to the next section.

Redefining HTML tags

The CSS Style Definition for body in main.css dialog box opens. Notice the title given to the Style Definition window when developing a style, shown in Figure 35.7. The labeled window makes it clear which style you are developing and where that rule is saved. This title changes depending on the style you are creating.

Click To expand
Figure 35.7: Style Definition for body in main.css.

When defining properties for a selector, realize that not all properties need to be set. The goal when setting up your styles should be to let inheritance and specificity play as large a role as possible while still addressing the site's needs and any browser inconsistencies that might exist for your target browsers. Since the Habitat Alert site targets Netscape 4.79+ browsers in addition to the newer Internet Explorer 5+ and Netscape 6+ browsers, this is a demanding task that you address as you develop styles for the site.

Habitat Alert site For the project site, all pages make use of the Verdana, Arial, Helvetica sans serif font list. Adding this information to the body declarations doesn't hurt and ensures that any text in the pages uses one of these font families:

  1. In the Type category (the category list is on the left side), add the Verdana, Arial, Helvetica, sans serif font family list. CSS is powerful, but the users must still have a font in their machine for that font to be used. Also add a default type size and color just to be safe.

  2. Click to the Background category. Notice that the background color is already set. This is what you pasted into the new style sheet.

  3. There is a background image already present, but you want to change it. Each page uses a background image that tiles along the top of the document to create the gold and blue textured area with the dark stripe along the bottom. Click the Browse button for the Background Image, and navigate to the shared images and backgrounds folders, to locate banner_bg.gif. This adds a document-relative path (../sharedimages/backgrounds/banner_bg.gif) in the Background Image field. Note the ../ that indicates that the image will be found outside the stylesheets folder, in the sharedimages/backgrounds folders.

  4. If you click the Apply button at this point, you see the properties in your page because the <body> tag already exists in the document. The page turns white and the background image tiles and repeats horizontally and vertically. To prevent the vertical tiling, set the Repeat menu to use repeat-x.

  5. Select the Box category. Enter 0 into both the Padding and Margin fields. This will take care of the margin settings for both Internet Explorer and Netscape.

  6. Click OK; then click Save. Preview the page in all the target browsers.

Start Sidebar
About Background-Image (URL)

When you are defining styles that include Background-Image, a URL is needed to locate the required image. According to the W3C specification, this URL may be either absolute or relative to where the style is defined. All CSS-capable browsers, except Netscape 4x, get this path right. Netscape Navigator 4x browsers incorrectly interpret this type of URL, looking for the image relative to where the style is used. This is a big difference, resulting in the image failing to load.

End Sidebar

Habitat Alert site To overcome this Netscape 4x browser issue, define Background-Image (URL) in the document where the style will be used. This exercise assumes you've done the previous exercise in this chapter. The following steps show you how to adjust the project body style to address the problem in Netscape 4x:

  1. Select the body style listed in the CSS Styles panel, and click the Edit button. When the Style Definition dialog box opens, click the Background category and remove the path in the Background Image field. Click OK to accept the change.

  2. Now add a new style. Select Tag (redefines the look of a specific tag), choose the body tag, and select Define In: This Document Only. Click OK.

  3. Click to the Background category and Browse to locate the same background image file. Do you notice that the path created is different? No ../ is present. This style is measured from the current document, and all browsers correctly interpret this URL.

  4. Click OK. Notice in the CSS styles panel that there are now two styles. One is for the index page specifically, and one is in the style sheet.

  5. Save and preview the page in Netscape Navigator 4x to be sure that the new URL works correctly. Test in the other target browsers, too, to be sure that no problems exist there either.

As shown in Figure 35.8, the image tiles along the only x-axis, because the repeat-x value in the main.css external page still applies. It is not in conflict and therefore accumulates as one of the properties of the body style. The same is true of the white background page color.

Click To expand
Figure 35.8: The page with its tiling background image and white page color.
Start Sidebar
Using Color in CSS Styles

The standard HTML specification for colors exists in the CSS standards, too. You could choose a named color, selecting from the 16 cross-platform options listed in the following table, but Dreamweaver uses its standard Color Picker. This results in a hexadecimal value — the other HTML option. The same is true in Dreamweaver's CSS interface, but you can edit any style sheet rule by hand and use a named value. Other options include RGB (red, green, blue) specified in percentage values, but again, Dreamweaver doesn't use this in the Style Definition interface. You may, however, opt to use it by hand-editing. Refer to the W3C.org specification to better understand how RGB is implemented.

White | Navy | Olive | Purple
Yellow | Gray | Green | Lime
Silver | Maroon | Black | Aqua
Teal | Blue | Fuchsia | Red
End Sidebar

Grouping selectors

When one or more selectors share the same set of rules, it makes sense to define them by grouping the selectors. Defining styles for grouped selectors is the same as with any other style, except you must use the Advanced (IDs, contextual selectors, etc.) option in the CSS Styles panel.

Habitat Alert site In the following steps, you add a pair of grouped selectors to the project site's external style sheet:

  1. In the CSS Styles panel, add a new style and choose Advanced (IDs, contextual selectors, etc.) in the New CSS Styles dialog box. Be sure that the main.css style sheet file is selected in the Define In: menu.

  2. Type p, td. When text appears in paragraphs or table cells, you want it to use the same size and color text. Click OK.

  3. Choose #333333 (dark gray) in the Color Picker; then type 11 into the Size field. Click OK. Notice how the text in your document has now changed.

    Dreamweaver defaults the Size Unit menu to select pixels as a unit of measurement for the font size. Many other options are available, however.

  4. Save your file.

About length units

Many CSS properties, such as font size, margins, padding, and other box properties, depend on lengths. Length measurements can be expressed as positive or negative values followed by a length unit, such as pixels, points, and so on. Some properties, such as font size, accept only positive values. You can choose from two types of length units: absolute and relative. When you select a value (or type a value) in the field, you are opting to set lengths.

Absolute length units

Absolute units are probably the easiest units to understand, since you use these units on a daily basis. There are five different absolute length units:

  • Inches (in) — This is an American standard unit of measurement.

  • Centimeters (cm) — There are 2.54 cm in an inch; 1 centimeter equals 0.394 inches.

  • Millimeters (mm) — There are 10 mm to every cm; 1 millimeter equals 0.0394 inches.

  • Points (pt) — This familiar unit is used by most word processing applications. By definition, there are 72 points to an inch, but Windows-based machines and even some Macintosh browsers render points using a 96-dpi (dots per inch) value.

  • Picas (pc) — This is a basic typographical unit of measure; 1 pica is equal to 12 points, and there are 6 picas per inch.

Absolute lengths are the least attractive option in CSS, because they have no relationship to real values but instead are totally dependent upon the settings of the monitor or printer that displays or prints the page. It is not likely that you could hold a ruler up to your monitor and find that text set to use a 12-point size would be exactly 1 inch tall.

Relative lengths

Relative lengths are called so because their actual measurement change based on the user-agent (browser, printer, and so on) and user preferences. Additionally, some of these lengths are relative to their containers or ancestor/parent selectors. There are four relative lengths:

  • Pixels (px) — A pixel is a dot or small box that makes up the visual or printed display, as in points per inch (ppi) or dots per inch (dpi). Pixels are useful because images are consistently displayed on computer monitors at 72 dpi. Because Macintosh and PC platforms use 72 dpi when describing pixel measurements, it is generally assumed that choosing pixel values for font size (and other CSS properties) solves the inconsistencies of text sizing between platforms. Although this is not entirely true, there are advantages to using pixel lengths because text sized this way maintains a better relative relationship to images used in the page.

    Caution

    Netscape 4x browsers sometimes display pixels smaller than normal, and printers may misinterpret the pixel values relative to their printing resolutions — equating pixels to ppi, resulting in very tiny text!

  • Em-height (em) — Generally used in font measurements, the em-height is equivalent to the height of the character box for a font — typically a capital M (hence the association). In CSS, a setting of 0.5 em depends on the default font and font size set by a browser and would be 50 percent of that value. Or, if font family and font size values exist for the container that holds the text styled with a 0.5 em length, the value of 0.5 em would be equivalent to 50 percent of whatever those measurements were. Although em-height seems complicated, it is a useful length.

  • X-height (ex) — The x-height for any font describes the height of any lowercase letter without ascenders or descenders, as in x, but not g or h. Most browsers assume that 1 ex is one-half or 50 percent of 1em, but this is not true in all cases.

  • Percentage (%) — Percentages are almost always computed relative to another value set for the containing element. For example, if the default size for text in a page is 12 points, a heading set to 150 percent would use 18-point text.

Larger, smaller, and XXS through XXL

Additional options for setting font size include larger, smaller, and XXS through XXL. Larger and smaller increase or decrease font size based on the containing element. XXS through XXL relates directly to sizes 1 to 7 in HTML font formatting, and these values depend upon the browser's default settings.


Adding a Custom Class

Sometimes it isn't practical to redefine a specific selector to set up a style. Remember, properties set for a selector apply every time that selector is used in the page. When you want to use a style selectively and independently of a selector, define a custom class and apply it as needed. To build a custom class in Dreamweaver, add a new style and choose the Class (can apply to any tag) option. Always begin the name of the class with a period. You cannot use spaces or special characters in the name, not even an underscore.

Habitat Alert site In this section, you use the project site to build a custom class that sets the background element in the circle area of the page. Currently this page sets that element using the cell's background image property. The downfall of using HTML to set background image is that steps must be taken with the image to prevent unwanted tiling. In the case of the circle's background image, thousands of white pixels were added to the bottom of the image so that it would not repeat vertically. This results in a larger-than-necessary image. With CSS, you can avoid this trick and build the image without the extra white space at the bottom, and use no-repeat in the style. Follow these steps:

  1. Still working in the home page (site/index.htm), place your cursor in the cell containing the circle image. Select the <td> using the Tag selector, and remove the value found in its Bg image field.

  2. Add a new style and choose Class (can apply to any tag). Name this new style .circlebg. Be sure that you select Define in This Document Only. Remember, you are setting the URL for the background image property.

  3. Click the Background category and set the cell's background color to #FFFFFF (white). Then navigate to the sharedimages/backgrounds folder and locate circlebtm.gif.

  4. Choose no-repeat from the Repeat menu. Click OK.

  5. You need to apply the circlebg style to the cell. Right-/Control+click the <td> tag and choose Set Class circlebg.

  6. Save your page and preview it. Keep this page open for additional style exercises.


Building Link Styles

When you want to develop styles that control the appearance of your page links, you have several options. With HTML formatting, you can set the link, visited link, and active link values, adding the properties to the <body> tag in the page. With CSS, you get a fourth option (not in Netscape 4x) to set a value for hover — in effect, a mouse-over style.

You can set a single value to be used for all these properties by redefining the anchor <a> tag. To set one value for all, simply redefine the HTML tag <a> and choose your properties.

You can define separate values for one or more of the pseudo-selectors associated with the anchor <a> tag. Pseudo-selectors are equivalent to subsets of the tag. To use pseudo-selectors, you must select the Use CSS Selectors option in the New CSS Styles dialog box. Additionally, these styles must be set in a specific order:

a:link

a:visited

a:hover

a:active

Netscape 4x browsers do not support the hover property and ignore it. Although not supported by Netscape 4x when set using HTML formatting, the Active state is broken when set via CSS. As usual, Netscape 4x support for CSS is quirky.

Applying link styles

Links occur in your pages whenever the anchor tag (<a>) is wrapped around text or images. When you opt to use link styles, you do not need to apply them; they are automatically applied when the page renders.

Start Sidebar
The Tao of Link

In less than a decade, even the most casual Web surfer has learned that blue underlined text is clickable. Be careful when you choose to alter the default properties for your links; your visitor might not know to click it!

Setting Link Properties

HTML formatting of link properties allows only color selection. This is generally all you will use when creating your link styles via CSS, too. You may opt to set other options, but you do not know where links might appear. When setting colors, be aware that the color may need to be used over many different background colors or images. Using other properties, such as font weights (as in bolding) or font sizes (as in changing size), can cause a reflow of text that can be annoying to visitors.

Text decoration

Text links are underlined because their Decoration is, by default, underlined. To remove the underline, set the Decoration property to None, or use one of several options available in the Type category of the Style Definition dialog box.

End Sidebar

Habitat Alert site Follow these steps to add basic link styles to the project site style sheet:

  1. In the CSS Styles panel, add a new style in the external style sheet (main.css). Select Advanced (IDs, contextual selectors, and so on), and select a:link from the menu (see Figure 35.9). Define In should be set to main.css. Click OK.

    Click To expand
    Figure 35.9: The New CSS Style dialog box showing a: link selected.

  2. In the Style Definition dialog box, set the color value for all links to #666600, a dark olive green. Click OK.

  3. For the project site, the link and visited link colors will be the same. Rather than build a new visited style, take advantage of the Duplicate feature in Dreamweaver to save time. Select the new a:link style and choose Duplicate from the panel Options menu.

  4. When the Duplicate dialog box opens, be sure that your duplicated style is defined in the external main.css style sheet and select a:visited from the Use CSS Selectors menu. Click OK.

  5. To define a hover style, select and duplicate the visited style, using the same process described in step 4, but choose a:hover from the menu.

  6. When you've closed the dialog box, select the hover style and click the Edit button to open for editing. Because hover is a mouse-over effect, you want the property values to change. Choose #006699, a medium bright blue. Click OK.

  7. Repeat the duplication process or add a new style to the external style sheet, selecting a:active from the menu and setting its color value to #999933, a light olive-gold green. Click OK. Save and test the page in your target browsers. Mouse over the text links at the bottom of the page. Keep the page open for additional CSS style exercises.


Using Contextual Styles

When used correctly, CSS offers incredible options for visual formatting just not possible with HTML. One of these options is the use of contextual styles — rules that apply only when a selector occurs in the context of a specific class of container. Using contextual styles requires a bit of forethought and planning to incorporate classes to create containers that serve as regions.

For example, the Habitat Alert site places the main content for each page into a large white area below the navigation buttons. Content added to this area is jammed up against the circle image to the left. You cannot add cell padding or spacing to the table, because it would affect the entire table. The only HTML solution is to alter the table structure to add a "spacer" or "gutter" column between the circle cell and the content cell. However, deciding to change the width of the gutter column would mean changing every page structurally.

Habitat Alert site Leaving the table structure as is, you can use the CSS to set white space around the main content in the table cell. By creating a class to apply to the cell, you can define a new style for the size 4 heading and paragraph tags, used only when size 4 headings or paragraphs occur within any cell set to use the .maincontent class. Follow these steps:

  1. Add a new style to the main.css external style sheet.

  2. Choose Class (can apply to any tag) and name the new class .maincontent. Click OK.

  3. In the Style Definition dialog box you don't really need to change anything, but you have to set something in order for Dreamweaver to accept the style. Set the Background color to white and click OK.

    Note

    You are simply adding a style to add a class name to the maincontent cell so that you can use it to apply a custom contextual style.

  4. Click in the main content blank area (be sure your cursor is not in the text), and apply the new class. The easiest and most precise method of applying styles is to right-/Control+click the <td> tag in the Tag selector and choose Set Class ® .maincontent. You won't see any changes.

  5. Now add a new style, this time choosing the Advanced (IDs, contextual selectors, etc.) option to create a new style in the external style sheet (main.css). Type .maincontent h4 in the Selector field and click OK. Leave the Style Definition dialog box open and continue with the next section.

Setting box margins

In Dreamweaver, the margin property is located in the Box category. Of the several ways to add white space around page elements, the most supported method to use is a margin. Every element has a margin. With Cascading Style Sheets, you can control the top, right, bottom, and left margins separately. Netscape 4x browsers offer limited support for the margin property for some elements. To set the margins, follow these steps:

  1. In the Style Definition dialog box, set the Type properties for maincontent size 4 headings as follows:

    Size — 12 pixels

    Weight — Bold

    Color — #999900, a light-golden green

  2. Click the Box category and uncheck the Use Same for All option over the Margin settings. Add the following margins; then click OK.

    Top — 0

    Right — 20 pixels

    Bottom — 0

    Left — 20 pixels

  3. Click OK to close the dialog box. Figure 35.10 shows the settings used in the Box category. Your headings move away from the left edge of the table cell (see Figure 35.11).

    Click To expand
    Figure 35.10: The settings used in the Box category.

    Click To expand
    Figure 35.11: The properties for the head 4 titles applied to the maincontent style 35.

  4. Use the same approach to control the margins of maincontent paragraphs. Add a new style, using the Advanced (IDs, contextual selectors, and so on) option. Type .maincontent p in the Selector field.

  5. Set the font size to 11 pixels; then click the Box category and set the margins as follows:

    Top — 0

    Right — 20 pixels

    Bottom — 10 pixels

    Left — 20 pixels

  6. Click OK and save your page. Preview it in your target browsers to see how the styles affect the presentation of the main content. With room around the content, it is much easier to read, as shown in Figure 35.12. And because you used CSS to control the margins, simple edits to these two contextual selectors reset values for every page using this style sheet.

    Click To expand
    Figure 35.12: Margin around the content in the maincontent cell makes the page easier to read.


Contextual Link Styles

Use the same concept to add more than one set of link styles to your pages, something not possible using HTML formatting. Remember, the formula for a contextual style is .class plus a space plus the selector. For link styles, the selectors are pseudo-selectors, so your contextual link style would read .class a:link or .class a:visited, and so forth.

To define an additional, contextual set of link styles in a document, follow these steps:

  1. Open the page more_link_styles.htm from the linkstyles folder.

    This page has a set of default link styles that work well on the lighter-colored areas. If you click the different cells of the layout, you should notice that each cell is of a specific class; they all have a context. The default link colors don't work well in the footer cell because the color of the cell background and the color of the link are similar. Also, the main navigation links would be better if they were not underlined. In this exercise, you build two more sets of link styles specifically for each of these areas.

  2. Add a new style to the external style sheet linkstyles.css.

  3. Choose Advanced (IDs, contextual selectors, and so on) and type .footer a:link.

  4. Set the font color to #FFFFFF (White). Click OK.

  5. Select and duplicate the new style, adding .footer a:visited to the Selector field. You won't change any values, so click OK to close the Definition dialog box.

  6. Select and duplicate the style again, naming this one .footer a:hover. Click OK. Then double-click the style in Edit mode of the CSS Styles panel to edit it. Change its font color to #000000 (Black).

  7. Null footer links are set in the document. Save and preview in an Internet Explorer browser to see the hover effects when you move your cursor over the links in the footer region.

  8. Add another new style, again using the Advanced (IDs, contextual selectors, etc.) option. Type .navigation a:link and click OK.

  9. Set the color to #FFFFFF (White) and the text-decoration to None. Click OK.

  10. Duplicate this style, typing .navigation a:visited in the Selectors field.

  11. Duplicate again, typing .navigation a:hover in the Selectors field. Click OK. Now select the listed style, click the Edit button to open it, and change the text color to #000033 (Dark Blue). Click OK.

  12. Save the page and test it in a browser.

The page now uses three sets of link styles, making it much easier to read links on the different backgrounds. Using contextual link styles also enables you to explore different decoration options without committing all your links to them.


CSS and Browser Issues/Solutions

Developing for the Netscape 4x browser is difficult at best, given its quirky support for CSS. Netscape 4x is, however, still a well-used browser, and as long as you are required to support it as a target browser, you need to know how to deal with its issues.

Create multiple style sheets when you simply cannot get your styles to work for both Netscape 4x- and CSS-compliant browsers. Start by developing your initial style sheet using Netscape 4x-supported styles. Don't worry about inconsistent margins and simple differences between platforms. When you have your styles completed, be sure to add comments to the style sheet to indicate each style's purpose.

Opening and commenting an external style sheet

Comments are notes written to explain or clarify the purpose of a block of code. They are hidden from the browser by special starting and ending symbols. An HTML comment is written as follows:

<!-- comment here -->

CSS comments use a different markup:

/* this is a comment */

Adding comments makes it easier for you (and those who come after you) to understand why certain methods or settings were used. When you plan to use multiple style sheets, add comments to clarify which styles use different settings or to indicate which styles are present in only one style sheet. To open an existing style sheet to add comments, locate the file in the Files panel (window) and double-click it. Or simply double-click any style name in the CSS Styles panel. A .css file opens in Dreamweaver in Code view. To try this, open the style sheet used in the previous exercise, and follow these steps:

  1. Navigate to the linkstyles folder and double-click linkstyles.css to open it.

  2. Place your cursor in front of the body listing.

  3. Add (a forward slash plus an asterisk) to form/*.

  4. Type These are the styles used in both style sheets.

  5. Type (an asterisk followed by a forward slash) to form / to close the comment.

  6. Save the page.

Duplicating the style sheet

The easiest method to create a copy of the style sheet is to use Save As from the first style sheet. Don't forget that style sheets use the .css extension. To duplicate a style sheet, follow these steps:

  1. With linkstyles.css (from the linkstyles defined site) open and saved, choose File ® Save As. Navigate to the linkstyles folder you copied to your hard drive, and save the second style sheet as w3c_linkstyles.css.

  2. Close the open style sheet.

Attaching an external style sheet

When you have an existing style sheet and want to use it in another page of the site, you need to attach it to the new page. To attach a style sheet, open the page and click the Attach Style Sheet button at the bottom of the CSS Styles panel. The same option is also available from the panel's Options menu.

In the dialog box that opens, navigate to select the desired style sheet. Figure 35.13 shows the two options — Link and Import — available for attaching a style sheet. Use Link unless you specifically want to exclude the Netscape 4x browser. Import uses the @Import directive — a method not understood by Netscape Navigator 4X.

Click To expand
Figure 35.13: Attachment options in the Link External Style Sheet dialog box.

Using @import with multiple style sheets

Use multiple style sheets when settings for a style's properties will not work in both Netscape 4x- and CSS-compliant browsers. You can use scripting to detect which browser is used and dynamically set the style sheet to use, which is not a simple process. Instead, use the @import directive to prevent Netscape 4x browsers from reading alternate settings for your styles. Only the CSS-compliant browsers read and use the new (and last declared) settings.

To use two different browser-specific style sheets in the same document, import the second style sheet (this assumes you made one in an earlier exercise), as follows:

  1. Open more_link_styles.htm.

  2. Click the Attach Style Sheet button at the bottom of the CSS Styles panel, locate the second style sheet, and choose the Import option. Click OK. Save your HTML page.

  3. Choose View ® Head Content. Figure 35.14 shows the style icon for embedded styles. Change to Split view and click the Embedded Styles icon to highlight these styles.

    Click To expand
    Figure 35.14: The Style icon (with the S).

Dreamweaver places the @import between style tags. If you have existing embedded styles defined, it adds @import at the beginning of the existing styles, which may cause problems in the way the browser determines specificity and cascade. To prevent this, place your cursor below the existing style tags and press Ctrl/Command+T to access the Quick Tag Editor. Type style and press the Enter/Return key to exit the editor. Dreamweaver balances the tags by adding the ending </style> tag. Select the @import code and drag it to its new location between the new style tags.

You can see the newly imported style sheet listed in the CSS Styles panel when in Edit mode.

Using alternate style properties and settings

Trying to adjust style properties to work in all your target browsers is a tough job. Because Netscape 4x doesn't follow the W3C specification, settings that work in Netscape 4x mess up the page in compliant browsers. For example, if you want to reduce the gap between headings and paragraphs, you have to use two style sheets.

To follow along, continue using the more_link_styles.htm page used in the previous exercises. To resolve this issue, follow these steps:

  1. Select the imported style sheet in the CSS Styles panel. Use the panel options or the icons to temporarily remove the attached style sheet.

  2. Double-click the <p> tag style to edit it. Click the Box category and add a zero to the top margin field. Because Same for All may be checked, all margins use this zero value. Click OK.

  3. Now edit .maincontent p. Its box margins use left, right, and bottom margins. Remove all the settings except the bottom margin, which is set to 10 pixels.

  4. Preview the page in a compliant browser. As shown in Figure 35.15, you should see space between the two adjacent paragraphs, but no extra space between the heading and the paragraph below it. The .maincontent h4 style has its top and bottom margins set to zero. Zero space occurs between the heading and paragraph. Ten pixels of space occur between the paragraphs.

    Click To expand
    Figure 35.15: As seen in Internet Explorer 6.

  5. Now preview the same page in Netscape 4x. Figure 35.16 shows how Netscape 4x renders lots of space below the heading but none between the two adjacent paragraphs.

    Click To expand
    Figure 35.16: As seen in Netscape 4.4.

The W3C specification says that vertical adjacent margins for block elements should "collapse" in favor of the largest value. Netscape is inconsistent (at best) in how it follows this rule. What you see in Dreamweaver is definitely not what you get. The .maincontent h4 style already has its top and bottom margins set to zero, so what else can you do? You might try a negative value for the paragraph as shown in these steps:

  1. Select the .maincontent p style and click the Edit button. Set the top margin to –.8 em. Ems are especially useful for margins because their value is computed from the font size, so adjusting the font size automatically adjusts the spacing (or lack thereof) caused by the em value. A setting of 0.8 ems equals 80 percent of the current font size.

  2. Click OK and test this page in Netscape Navigator 4x.

The heading and paragraph are spaced nicely, but look at the overlap created in between the paragraphs. If you preview in the compliant browser, you'll see that the heading and paragraph have the problem, but the paragraphs are fine. Rather than use a negative value that affects all your paragraphs, try this approach:

  1. Select .mainparagraph p and click the Edit button. In the Box category remove the top margin value. Click OK.

  2. Add a new custom class named .firstpara.

  3. Add a –.8 em margin and close the dialog box. Right-/Control+click the first paragraph below the heading, and apply the .firstpara style. Save and preview in NN4x.

  4. Now that you've isolated the negative margin to the first paragraph, edit the <p> style. Uncheck the Same for All option, and add 1 em to the top margin. Click OK.

    Looks great, doesn't it? Or better, at least. But what happens in the compliant browsers? Take a look. These browsers do exactly as asked, and the result is a nasty overlap between the heading and first paragraph. Now you're ready to use a second style sheet.

  5. Because you altered the first style sheet so much, duplicate the .linkstyles.css sheet again, overwriting the w3c_linkstyles.css sheet.

  6. Attach the new version of the w3c_linkstyle sheet.

  7. Locate the .firstpara style in the w3c style sheet and double-click to edit. Set the top margin to zero. The rest of the margin fields should be empty. Click OK and save the page. Test in both browsers.

The results should be fairly consistent between all browsers. What you've done is to create a conflict between the values used by the .firstpara style. The compliant browsers, which can read the imported style sheet, use zero instead of the negative –.8 em. Netscape 4x reads the negative value only.

To finish this section, delete any style in the second style sheet that isn't different from the first. Most browsers read both style sheets, and many style values from the first style sheet are the same in the second. This step can speed up the processing the user's computer must perform.


Summary

This chapter covered using Cascading Style Sheets to control the appearance of Web pages. You learned to use embedded and external styles to set properties and values for HTML tags, classes, links, and contextual classes. You encountered browser issues and learned solutions to overcome them. Through the use of the @import directive, you learned how to use multiple style sheets to build more consistent styles.


Project Summary

Let's look at what you did that will be used in the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
site\index.htm | You added an external style sheet to the site and developed styles to add background images and to control the appearance of the page's text. You alsoadded default and contextual link styles to set different properties for links in specific areas. | This page will be made into a template.


Chapter 36: Working with Libraries and Templates

Download CD Content

Overview

When you are developing or maintaining a Web site, it makes sense to work as efficiently and effortlessly as possible. In Dreamweaver, Library Items and Dreamweaver templates can lock down, modify, and update specific elements or entire pages in your site.

In this chapter, you see how to use Library Items to build page elements that are easily updated, allowing Dreamweaver to do all the grunt work of maintaining accurate paths to images and files. Build a Library Item by selecting page elements and clicking New Library Item. Drag Library Items from the Assets panel to your pages. When you need to modify an item, open, edit, and update. Dreamweaver does the rest of the work.

You also learn how to work with Dreamweaver templates to add more pages to a site, while maintaining a consistent, yet editable layout. Templates are like Library Items at the page level; you can use them to lock or modify multiple elements. New template features in Dreamweaver MX 2004 include editable Head regions, optional editable areas, editing of tag attributes, and even nested templates.


Using Library Items

Library Items are useful whenever you have page elements that appear in many pages. It can be a time-consuming task to locate, open, and edit every page with a specific element when changes are required; making a Library Item of the elements enables you to open a single, original source, make your edits, save, and update every occurrence of the item in all site pages. Any path structures, such as src paths to images or relative links to pages, are maintained and adjusted by Dreamweaver.

Library Items are assets and as such are accessed via the Assets panel. Press F11 to open the Assets panel, which is found in the Files panel group. To view library assets, click the small book icon located in the stack of icons on the left side of the panel (see Figure 36.1). Like all assets, Library Item functions can be triggered with the contextual icons found along the bottom of the Assets panel or through the panel's Options menu.

Figure 36.1: Library assets live in the Assets panel.

How Library Items work

A Library Item is stored code. To build a Library Item, you first make a selection in a page. The code selected is copied to a new text file. The selection may contain any kind of code that exists in the body of a Web page, including graphics, text, and form objects. You are required to name each Library Item.

When you add a Library Item to a site, Dreamweaver creates a special folder named Library at the root level; Dreamweaver also creates a text file to hold the item code and stores it, using your chosen name, within the Library folder. Library Item files use an .lbi extension. Special markup containing the name and path to the item file is placed around the Library Item code in the HTML page. The markup allows Dreamweaver to identify and update all instances of a specific Library Item in the site when changes are made to the original .lbi file. To push the changes to the published site, all updated pages must be uploaded to the Web server. However, all code for an item is contained in each page where the item is added; the Library folder need not be present on the server for the item to function. The code that Dreamweaver adds looks like this:

<!-- #BeginLibraryItem "/Library/bottom ads.lbi" --> elements
here<!-- #EndLibraryItem -->

Library Items are locked. Clicking to select an element within a Library Item selects the entire item, which is marked in the Tag selector as <mm:libitem>. To edit a Library Item, access the original .lbi file, make changes, and save. Dreamweaver asks whether you want to update any instances of the item. You are not required to update items. Options for updating later are available. If you choose to update, Dreamweaver looks through every page in the site to find markup for that item. The code between the items is replaced with the new code in the original file, and Dreamweaver again adjusts and maintains proper paths. Any updated page that is not open is automatically saved. Open documents are modified but not saved; if you close an updated page, you will be asked to save it.

Building a new Library Item

To add a Library Item to the Assets panel, make a selection in your page in Design or Code view. The following exercise adds a Library Item to the basic page layout of the Habitat Alert site.

On the CD-ROM

Save the Habitat Alert36 folder from the chapter36_exercise folder to your hard drive. Define a new site. Be sure you define it at the html level (don't open it where the site folder is).

Habitat Alert site Using a Library Item for the bottom ad banners makes sense because many pages show the same ads. To change the ads, you need to change them only in the Library Item .lbi file and update the entire site. To make a Library Item, follow these steps:

  1. Open site/index.htm.

  2. This page contains three ad banners along the bottom of the page, as shown in Figure 36.2. Place your cursor in front of the text "Please support our sponsors:" and make a selection by clicking to the right of the last ad placeholder while pressing Shift.

    Click To expand
    Figure 36.2: The bottom ad banners are placeholders. Making a Library Item will allow easy updating of the element when the site is completed.

    Tip

    When you make your selection for the Library Item, be sure to include any HTML tags that provide alignment for the element, such as <p>, <div>, and so on, using Code view. In this example, the beginning <h4> wasn't selected automatically.

  3. In the Assets panel, click the book icon to open the Library Assets panel. Click the Add button at the bottom of the panel.

    Note

    When saving a Library Item that uses a class style, Dreamweaver alerts you that the Item might not appear as designed when used. This is true if the destination page doesn't have the class defined as a style rule; in the example used in this chapter, the destination pages will be linked to the style sheet.

  4. Always name your new Library Item before doing anything else. Name this item bottom ads. It is permissible to use spaces in item names.

The home page now contains an instance of the Library Item. If you try to select any part of the element, it is all selected. The Property inspector displays options for editing the items, as shown in Figure 36.3. You can also detach the item, which removes its link to the Library Item, or select Recreate, which re-creates a missing or deleted Library Item.

Click To expand
Figure 36.3: The Property inspector also provides access to the original item.

Adding an existing Library Item

You can use the following methods to add an existing Library Item to your pages:

  • Insert your cursor in your HTML page where you want the item to be located and right-/Control+click the desired item in the Assets panel; then select Insert.

  • Insert your cursor into your HTML page, and select the Library Item. Click the Insert button at the bottom of the Assets panel to add the item.

  • Drag the Library Item's icon from the Assets panel and drop it in your HTML page where you want the item added.

Modifying a Library Item

Making changes are what Library Items are all about. Simply open the original .lbi file (double-click its name in the Library panel) and make your changes. When you save, Dreamweaver prompts you to update pages that use the item.

Updating Library Items

When prompted to update all pages that use a modified Library Item, Dreamweaver looks through the entire site to find markup that matches the specific item. The page code is replaced with the new code from the .lbi file. You are not required to update pages that use an item; you can opt to delay an update by choosing Don't Update. When you are ready to update the pages, choose Update Site from the Library Assets panel options. The Update Site dialog box offers a couple of options.

Choose to look in the Entire Site if you have open documents that may contain Library Items. Changes made to all Library Items will be updated throughout the site. To initiate the update, click the Start button.

When updating, you can choose the Files That Use [item name] option. This choice looks only for pages that use a specific Library Item — the one shown in the menu to the left of the Start button. This option doesn't update any currently opened, unsaved pages that use the item.

You may also choose to Update Current Page from the Library Assets panel options. No matter which method you choose, a useful log of all actions taken is displayed to tell you how many pages were examined, updated, or not updated.

Detaching a Library Item

The ability to push modifications is not the only useful function for Library Items. Dreamweaver manages the path structure of any link that occurs in a Library Item — and sometimes this alone is what makes the Library Item useful. At times you will want to be able to edit a portion of a Library Item. Because a Library Item is locked, you cannot individualize an instance of the item in one or more pages. To unlock the code of an item, select it and use the Detach button to remove the library markup. This leaves only the code of the item in the page, and you lose the option to update from the original Library Item.


Working with Dreamweaver Templates

When two or more pages in a site use a common layout, it makes sense to create a master document — or template — that contains the shared elements to use as the basis of pages you build for a site. Dreamweaver templates take this concept much further with features for managing path structures and updating pages, plus a whole range of options for designating both locked and editable elements in pages based on the template.

How templates work

Dreamweaver builds a special folder to hold template assets, as it does with Library Items. Templates are saved as DWT files into a Templates folder that the program adds at the root level of the site. Special markup in HTML pages based on a Dreamweaver template allows the program to locate and update parts of pages when modifications are made in the template file.

Dreamweaver templates are like Library Items on a page level. But whereas a Library Item is completely locked down, a template contains both locked and editable regions. Locked template regions can't be edited in pages based on the template — only specially designated editable regions may be individualized on a page-to-page basis. Optional and repeating areas may also be specified, if needed, to accommodate data-driven, dynamic pages based on a template.

Locked and editable regions affect only the pages based on the template; everything in a template file is editable. However, only changes made in locked regions of the template are updated in the related pages. This makes perfect sense when you think about it: Editable regions are not updated by the template, because each page's editable regions probably contain page-specific content. Similar to Library Items, the code for pages based on a template is contained solely in the HTML page; the original template and Templates folder are not required on the Web server. When you update pages based on a template, all modified pages must be saved and uploaded to the Web server for your published site to reflect changes you made.

Building a template from scratch

To begin a template from scratch, click the New Template button at the bottom of the Template Assets panel, which you can get to by clicking the page icon above the Library Assets book icon. You can also choose New Template from the Template Assets panel options.

Similar to Library Items, the first thing to do when you start a template is to name it. When the DWT file opens, you can work within it as you would any HTML page, adding representative content and using any structure desired. As you build the page, keep in mind that you will be selecting areas, called regions, that will be editable. Conversely, some regions will be locked. Ultimately, it is far easier to choose these regions when your page is designed modularly.

Cross - Reference

See Chapter 33 for more information about building modular layouts.

Building a template from an existing page

You may also create a template from an existing HTML document. To do this, open your document and choose File ® Save as Template in the dialog box that opens; then give the template a name.

With both methods, a templates folder is created at the root level of the site and the name of the template is used to name the DWT file saved there.

Habitat Alert site Most of the pages in the Habitat Alert site share the common interface found in the home page. The following steps show you how to build a template from it. As usual, be sure you have the site defined and are using the files from Chapter 36 before doing the exercise.

  1. Open the site/index.htm home page.

  2. Choose File ® Save as Template and name the Template Basic Page (see Figure 36.4). The site name will vary depending on how you have named your defined site.

    Click To expand
    Figure 36.4: The Save As Template dialog box.

  3. Click OK to save the template.

  4. Click Yes to update any pages that link to this page.

    Caution

    The original page closes when the page is saved as a template. Be sure that you have saved the original page before this step, or changes made to the page will be lost.


Defining Template Regions

Templates require editable regions — areas that may be modified in pages based on the template. This makes sense because your content will vary from page to page, even if the interface remains the same. By default, all portions of the template are locked; to add an editable region to your template, choose a containing element (table, cell, multiple cells) or make a selection; then choose Insert ® Template Objects ® Editable Region or press Ctrl/Command+Alt/Option+V. You can also work with the Templates toolset in the Insert bar (Common category) and create the new region by clicking the small button with the Pencil tool, as shown in Figure 36.5.

Figure 36.5: The Templates toolset in the Insert bar contains all the functions found in the Template Objects of the Insert menu.

There are four types of regions in templates:

  • Editable — This is an unlocked area in the template and in pages based on a template. All templates should contain at least one editable region to be useful. Changes made to the editable region in the template will not result in updates to these regions in pages based on the template. However, they affect any subsequent pages created from the template.

  • Repeating — This is a portion of the page that is set to repeat to accommodate additional content, as needed. For example, many data-driven pages have content that varies based on the current state of a data source (database) where the content is added server-side. A repeating region isn't editable in the document unless you specifically add editable regions within the repeating region.

  • Optional — An optional region is just that — optional. This is a portion of the page, such as a sidebar area, an image, or even a navigational element, used on some pages but not others. Optional regions are controlled by conditional statements and may be set so that the region is editable or not.

  • Editable tag attributes — Setting editable tag attributes allows certain properties of tags, such as alignment, background color, width, and so forth, to be editable even though the tag or element itself can't be removed. An example of this would be a table cell that contains an image. The cell itself can be locked (along with the image inside), but giving the cell editable attributes allows the properties of the cell to change in pages based on the template.

Adding an editable region

A successful template depends on careful and logical selection of editable regions. To add an editable region, select an HTML tag or make a selection in your content. Using a container selector allows additional selectors to be added in the container. Using content selections limits editing of the region to the replacement of the current content. For example, if you choose a table cell as the editable region, you can add HTML tags within the structure of the table; choosing the text within the cell allows only that text to be replaced.

Habitat Alert site In this section you, define regions in the Habitat Alert Basic Page template. You should still have the Basic Page.dwt template open; if you don't, open the template from Template Assets by double-clicking it, or locate and double-click the file in the Templates folder through the Files panel.

Because the page still needs scripting, much of it will be left locked so that later update of pages based on the Template is possible.

  1. Place your cursor into the main content area. This area changes in every page, so it should be an editable region.

  2. Select the <td.maincontent> tag for this area using the Tag selector. Click the small arrow next to the Templates icon in the Insert bar to activate the Templates list, and click the Editable Region button.

  3. Name the new region Main Content and click OK, as shown in Figure 36.6.

    Click To expand
    Figure 36.6: You may use spaces but not special characters when naming the new editable region.

  4. Click the cell with the ad banners. This cell contains a Library Item. Regions containing Library Items should not be locked. Make this cell an editable region, too. Name the region Bottom Ad. Save but don't close the file yet; this exercise continues in the next section.

Setting editable tag attributes

Another awesome feature of Dreamweaver templates is the option to set only the tag attributes for an element to be editable. For example, you may require that an image of a specific width and height be present in a set location but allow for different images to be used.

Habitat Alert site The following steps set up some editable tag attributes for the image that displays the current section. In the Habitat Alert template, this image currently reads HOME.

  1. Select the location_home.gif image. Choose Modify ® Templates ® Make Attribute Editable.

  2. In the Editable Tag Attributes dialog box, choose SRC from the Attribute menu and enable the Make Attribute Editable option, as shown in Figure 36.7.

    Click To expand
    Figure 36.7: The Editable Tag Attribute dialog box.

  3. Label the attribute locationsrc. From the Type menu, choose URL. Click OK. The HOME image now shows as a broken image.

    Tip

    Attributes present in the current tag will be displayed in the Attributes panel in the Tag Inspector panel group. While in the Editable Tag Attributes dialog box, use the Add button and type add any additional attribute needed. One amazing option would be to add a usemap# attribute so that you can use different image maps. To access the Attribute menu select Modify ® Templates ® Make Attribute Editable. To determine the attributes of any tag, use the Tag inspector in the Code panel group. When you select a tag, its attributes display at the bottom of the panel.

    Dreamweaver replaces the file source (SRC) for this image with @@(locationsrc)@@ to mark it as an editable attribute of an otherwise locked region. To modify an attribute in a page based on the template, use Modify ® Template Properties.

    Caution

    To remove an editable tag attribute from a template, reapply the attribute (Modify ® Templates ® Make Attribute Editable) and uncheck the Make Attribute Editable option. However, the code placed in the head of the page above the <body> tag is not removed; you must remove it by hand from Code view.

Adding an optional region

Optional regions allow the template developer to include elements (with or without scripting) in the template that might be needed in pages based on the template.

Habitat Alert site The circle area of the layout will be scripted as a slide show that displays in many of the site's main pages, but not in all. DHTML scripting will be added later, so it makes sense to include it in the template so that you can update it in all pages later. But not all pages need the slide show, so making this an optional region is the perfect solution. Follow these steps:

  1. Select the heron image in the circle area (sidebar) and choose Insert ® Template Objects ® Optional Region or use the Optional Region button found in the Templates toolset of the Insert bar.

  2. Name this new optional region Sidebar Image. Leave the Show by Default option checked. Click OK.

    In Code view, special markup, as follows, is placed around the optional region:

    <!-- TemplateBeginIf cond="sidebarImage" --><!--
TemplateBeginEditable name="EditRegion5" --><!-- TemplateEndEditable
--><!-- TemplateEndIf -->

In the head of the document, this code is inserted:

<!-- TemplateParam name="Sidebar Image" type="boolean" value="true" -->

Editing to show or hide an optional region is done from Code view in a document based on the basic Template.

Adding editable optional regions

When an optional region is disabled or hidden in documents based on a template, other elements can replace it. The content may vary, so an editable region is needed. It's useful to develop potential content in the template so that any scripts needed are included in all pages based on the template. Setting an editable optional region is the best solution.

Tip

You can define an optional region and later insert an editable region between the optional region markup.

Habitat Alert site So you can use different jump menus (menu lists with an arrow to select options) as needed in pages built from the template, the following steps show you how to add an editable optional region to the circle area above the What's New jump menu:

  1. Select the What's New jump menu in Design view and use the Tag selector to select the <form> tag. Press the left arrow to move the cursor in front of the form code.

  2. Choose Insert ® Template Objects ® Editable Optional Region. In the dialog box that opens, name the new region Other Jump Menus. Uncheck the Show by Default option. Click OK. The following code is placed into the page where the cursor is located:

    <!-- TemplateBeginIf cond="document['Other Jump Menus']" -->
<!-- TemplateBeginEditable name="EditRegion5" --><!--
TemplateEndEditable --><!-- TemplateEndIf -->

    In the head of the page just above the <body> tag, an additional reference to the optional area is added:

    <!-- TemplateParam name="Other Jump Menus" type="boolean"
value="false" -->

  3. To finalize this area, select the form for the What's New jump menu and make it an optional region named What's New. Leave it showing by default. Figure 36.8 shows the labeled regions.

    Click To expand
    Figure 36.8: The regions showing their labels.

  4. Save the template and close it.


Building Template-Based Pages

With a template, you can easily add new pages to the site. Because key areas are left as locked regions, you can always go back to the template and add elements to push to all the pages. There are several ways to build new site pages from an existing template.

Adding a page based on a template

To add a page based on your template, select the template in the Template Assets panel and right-/Control+click to choose New from Template. (You can also use the panel Options menu.)

Habitat Alert site To add the main page for the Act section of the site using the New From Template method, follow these steps:

  1. Select the Basic Page template in the Template Assets panel (Template category).

  2. Right-/Control+click and choose New from Template.

  3. When the new page appears, it is important to save the document before you make changes to it. Save this document as index.htm in the act folder of your defined site. Close the page. You edit it later.

New from Template

When you create a template, it is added to the templates accessible from the New from Template dialog box. The New from Template dialog box is an assortment of different page types and layouts that you can use to build site pages. You can access your templates by choosing File ® New and clicking the Templates tab, as shown in Figure 36.9.

Click To expand
Figure 36.9: The Habitat Alert Template in the New from Template dialog box.

Habitat Alert site Build the main pages for the Find, Learn, and Support sections of the Habitat Alert site using the Document Gallery:

  1. Choose File ® New, or press Ctrl/Command+N to open the Document Gallery.

    Tip

    It is possible to disable the automatic opening of the Document Gallery. Click the Preferences button at the bottom of the Template tab to access the application preferences, and remove the check from the Show New Document or press Ctrl/Command+N to open a new page.

  2. Select the template in the right column, and click the Create button.

  3. As usual, save the file before editing. Save this page as index.htm in the find folder. Close the page. You edit it later.

  4. Repeat steps 1 to 3 to add two more new pages to the site. Name each index.htm, but place them in the learn and support folders. Close each page after saving.


Editing Pages Based on a Template

Editing pages that are template-based is straightforward. You will not be able to edit locked regions, and a red circle with a slash lets you know it. You can modify editable, as set up by the selectors you chose when you added the region in the template. Optional regions are controlled from Code view.

Habitat Alert site Follow these steps to edit the four new pages based on the Habitat Alert template:

  1. In the Files panel, select each of the index pages in the act, find, learn, and support folders.

    Tip

    Shift+clicking noncontiguous files results in selecting unwanted files. Use Ctrl/Command+ click instead.

  2. Right-/Control+click and choose Open, or choose File ® Open. All four documents open.

    The way the documents are arranged depends on your workspace preferences. All open documents will be listed and are accessible in the Window menu. Because all the documents are named index.htm, it might seem hard to tell which page you are editing; you can tell which document you are working on by looking at the path structure at the top of the document.

  3. Choose the act/index.htm page. The most obvious edit needed is the location image. Choose Modify ® Template Properties.

  4. In the Template Properties dialog box, select the locationsrc attribute. Browse to select the correct image. The path will be: ../sharedimages/locations/location_act.gif (change home to act); then click OK.

  5. Save and preview the page. The new image is displayed.

  6. Repeat the process (Steps 3 through 5) for each of the section pages. The paths are the same for each, except that the ending matches the sections, as shown in the following table.

    Section/Page

    locationsrc path

    act/index.htm

    ../sharedimages/locations/location_act.gif

    find/index.htm

    ../sharedimages/locations/location_find.gif

    learn/index.htm

    ../sharedimages/locations/location_learn.gif

    support/index.htm

    ../sharedimages/locations/location_support.gif

  7. In the find/index.htm page, choose Modify ® Template Properties, and select Sidebar Image. Uncheck Show Sidebar Image. Select Other Jump Menus and check the Show Other Jump Menus box.

  8. Click the What's New listing and uncheck its Show box. Click OK.

  9. The circle area in your page has probably collapsed in Dreamweaver view. Preview in a browser and you'll see that all is well. It will look similar to Figure 36.10. Don't worry; you'll fix that now. If it is totally collapsed, place your cursor into the Main Content area and select its <td> tag. Switch to Code view. Click the <td> tag again. Now look above this cell's code to the cell that used to display the circle sidebar image, which is no longer there!

    Click To expand
    Figure 36.10: The image is no longer visible, but the background of the circle is.

    Note

    The need to click twice is a bug in the program that will likely be fixed for future releases. Meanwhile, clicking twice is a good workaround.

  10. Scroll in Code view and place your cursor between the editable region tags (where "place cursor here" is typed). Type the following:

     <!-- InstanceBeginEditable name="EditRegion5" -->place cursor
here<!-- InstanceEndEditable

    Then return to Design view.

  11. Use the Image Assets to add a spacer image, setting its width to 231 pixels. Leave the height at 1 pixel. Press Enter/Return to update and save the page. Figure 36.11 shows the new, empty blue circle area. Save this page. In the next chapter, you edit it to add more form content.

    Click To expand
    Figure 36.11: Look! No picture! The blue-circle area is created by the background image for this cell.


Modifying the Template and Updating Pages

Using a template makes it possible to build all your pages without worrying about whether every element is complete. In fact, without having pages, it is extremely difficult to build navigation. Build your pages first, leaving incomplete areas locked; then revisit the template, add the navigation links, and update all your site pages.

All areas of your template are editable, but only the locked regions will be updated. To push changes to pages, save your template after modification. As with a Library Item, an Update Template Files dialog box opens to show all pages based on the template and to allow you to choose whether to update at this time; you may update later if desired.

Click Update to push the changes to the pages. A log that lists all activity displays the number of pages examined and updated. If changes to the template were only in editable regions, the log may indicate that no changes were made to the pages. In some cases, Dreamweaver may indicate that some pages could not be updated.

Habitat Alert site Follow these steps to link the main navigation buttons to the pages that have been built with the template:

  1. Open the Basic Page template file either from the Template Assets panel (double-click) or from the Templates folder in the Files panel.

  2. Select the LEARN navigation button. Use the Point to File icon in the Property inspector to link to the learn/index.htm page in the Files panel.

  3. Repeat for the remaining buttons, each time selecting the appropriate index page in that button's folder.

  4. Save the Template. When prompted to update, click the Update button.

You are not required to update every time you save a template file. You may opt not to update at this time by clicking Don't Update. To push changes when you are ready to update, use the Template panel's Options menu to select Update Site and click the Start button to begin the update process.


Applying a Template to an Existing Page

When you build a template from an existing page, the page used has no relationship to the template. Because you want this page to be updated when the template is modified, you must build a relationship between the page and the template. In some cases, you might have developed a template that must be applied to existing pages that may already be marked up with previous template regions. You have two options:

  • You can create a page using any of the methods discussed earlier and overwrite the existing page. This may be your simplest option as long as you haven't spent a great deal of time adding specific content to the page after the template was created.

  • You can apply the template to the page. In the open document, choose Modify ® Templates ® Apply Template to Page or use the Template Assets to select your template and right-/Control+click to choose Apply.


Dealing with Inconsistent Region Names

The difficulty of applying a template to a page lies in resolving inconsistent region names. The template contains region names; the page may not have any regions or may be based on earlier templates. In any case, inconsistencies exist, and Dreamweaver wants you to tell it what to do about them. Where should the current content go?

Figure 36.12 shows the dialog box that offers a means of placing the current content of the page within the structure of the regions created in the template. If the page is based on a different (perhaps earlier) template, Dreamweaver attempts to correlate the regions. Where it cannot, you have to select the content and choose a region from the Move Content to New Region menu.

Click To expand
Figure 36.12: Resolving inconsistent regions.

It is sometimes difficult to get this to work perfectly. It may be better to simply build a new template-based page and paste the proper content.

When the page is the document used to build the template and you opt to apply the template to the page, choose the first item listed, and choose Nowhere from the menu. Click the Use for All button to set the second item to use Nowhere, too (see Figure 36.13). Save the page, and you are good to go.

Click To expand
Figure 36.13: Selecting the Nowhere option.

Habitat Alert site Use the easiest method to link the template to the home page: Make a new page from the template and save as index.htm in the site folder. This overwrites the old version.

Start Sidebar

Converting Templates in Dreamweaver, by Brad Halstead and Murray R. Summers

So, you've purchased Macromedia Dreamweaver MX 2004 or Studio MX 2004), installed it on your machine, and started to play with Dreamweaver MX 2004 templates. One of the first tasks on your mind is to enhance your Dreamweaver/UltraDev 4 (Dreamweaver 4) templates to incorporate some of the advanced new template features found in Dreamweaver MX 2004. You may be thinking that Dreamweaver/UltraDev 4 template markup is different from Dreamweaver MX2004 template markup. You may be wondering how those differences will impact you while you are modifying the template in Dreamweaver MX 2004.

The official line says Dreamweaver MX 2004 can read and use Dreamweaver 4 template markup without issue. However, during testing, we found that Dreamweaver 4 template markup does not always play well with the improved Dreamweaver MX 2004 template engine. For example, Dreamweaver 4 doesn't enable you to position editable regions inside block-level elements of your page, such as <p>. Dreamweaver MX 2004 advises against this practice because you could end up with possible errors when using Dreamweaver MX 2004 to manage and modify your existing Dreamweaver 4 site. Your experience may differ depending on how your Dreamweaver 4 template markup wraps your HTML code. The only thing that we can say with certainty is that the new template engine in Dreamweaver MX 2004 is much stricter than its predecessor in Dreamweaver 4.

Note

Although Dreamweaver MX 2004 does enable you to place an editable region inside block-level elements (with a warning popping up), it is advisable to not do this for one very good reason: The person entering content into the editable region might press the Enter/Return key, thereby creating another block-level element. If that happens, Dreamweaver MX 2004 will complain.

For maximum performance and minimum difficulty with Dreamweaver MX 2004, we recommend that you convert the document from Dreamweaver 4 template markup to Dreamweaver MX 2004 template markup, update your pages, upload the changes to the server, and enjoy Dreamweaver MX 2004 templates.

This tutorial details the manual conversion of Dreamweaver 4 templates to the new Dreamweaver MX 2004 template format. There is no automated tool currently available to do the job for you. We've listed the dos and don'ts, and outlined the process in its entirety, providing working source files, code listings, and screenshots for you to follow along.

The code differences

As is the case with many development software packages, the code generated and recognized is typically different from version to version, and although backward compatibility is almost always a concern for the software vendor, it typically is the case that the older version's code is recognized and used by the newer version of the software. However, the newer generation code is not backward-compatible with the older version of the software.

Dreamweaver MX 2004 is no different in this regard. It attempts optimal recognition of Dreamweaver 4 template markup but is not always 100 percent successful. Conversely, the code that Dreamweaver MX 2004 generates for template markup is not recognized at all by Dreamweaver 4 (including UltraDev 4 and previous versions). Dreamweaver MX introduced a whole new syntax and methodology for template markup, and the template engine (the template markup interpreter) is much more advanced and strict with respect to the markup on the page.

As you may already know, Dreamweaver 4 allowed two template markup types: editable and non-editable regions. Dreamweaver MX 2004 allows the aforementioned regions as well as a host of new region types (Optional regions, MultipleIf Conditional regions, Repeating regions, Repeating Table regions, and Editable Tag attributes). It offers additional template markup (parameters, expressions) that enables some dynamic manipulation of these regions. Dreamweaver MX 2004 also introduces a much stricter and more robust template engine (template markup interpreter), as well as the power to create Nested Templates, and it gives you the ability to lock dynamic server code that you position above/below the opening/closing <html>, </html> tag, respectively.

This tutorial deals with the differences between the common template markup of Dreamweaver 4 and Dreamweaver MX and MX 2004, specifically, the base template markup as well as Editable region markup.

The following code shows the markup for a base Dreamweaver 4-generated template. This code is recognized and usable by Dreamweaver MX and MX 2004.

<html>
<head>
<!-- #BeginEditable "doctitle" -->
<title>Untitled Document</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>
Markup (Opening): <!-- #BeginEditable "doctitle" -->
Markup (Closing): <!-- #EndEditable -->

The following code shows the markup for a base Dreamweaver MX 2004-generated template. Dreamweaver 4 doesn't recognize any of the editable regions and considers them standard HTML comments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
</body>
</html>

  Markup (Opening): <!-- TemplateBeginEditable name="doctitle" -->
  Markup (Closing): <!-- TemplateEndEditable -->

You might ask, "What's the difference between these two listings?"

You've already seen the opening and closing markup as related to each version of Dreamweaver as shown in the first listing and the second one.

For ease of explanation, look at the region ending code (Editable region closing tag):

  • Dreamweaver 4 version — <!-- #EndEditable -->

  • Dreamweaver MX 2004 version — <!-- TemplateEndEditable -->

The difference here is the syntax of the template markup (proprietary HTML comment). Simply stated, the # in the Dreamweaver 4 markup has been replaced with the word Template in the Dreamweaver MX 2004 markup (this replacement is more than cosmetic, as it enables you to easily determine whether the code is in a template or a child page).

The differences between the region opening code (Editable region opening tag) are more robust:

  • Dreamweaver 4 version — <!-- #BeginEditable "doctitle" -->

  • Dreamweaver MX 2004 version — <!-- TemplateBeginEditable name=
    "doctitle" -->

As with the ending code (shown previously), the # has been replaced by Template. In addition, Dreamweaver MX 2004 gives the region a labeled and valued attribute (name="regionname"), whereas Dreamweaver 4 only uses the defined attribute value ("regionname").

Unlike Dreamweaver 4, Dreamweaver MX 2004 automatically inserts a region named head on saving a page as a template. This region is useful, because when you have custom scripts in a child page, they are automatically added to the child page's head region and aren't updated when you update the template. Along with scripts, custom CSS and meta tags can be added to give each child page some unique quality. If you wanted this region in Dreamweaver 4, you had to add it manually.

Caution

After you modify a Dreamweaver 4 template by adding any new Dreamweaver MX 2004 region type, the template no longer functions properly in Dreamweaver 4. You can, however, freely insert Dreamweaver MX 2004 standard editable regions, and the template will continue to function as expected in Dreamweaver 4 as long as you do not perform this conversion process. With this in mind, ensure that you and your coworkers are absolutely finished with this site in Dreamweaver 4 prior to performing the template conversion.

The conversion process

Now that you know what the differences in template markup are, it's time to start the conversion process from a Dreamweaver 4 template to a Dreamweaver MX 2004 template. The information from the "The code differences" section appears here in table format (see the following table) for easy reference. What you need to do is convert all the editable region's start and end code to the new format. You also want to add the default editable region named head into the Dreamweaver 4 template document during the conversion process.

Template Code Differences
Markup Type | DW4 | DMX04
Editable region start code | #BeginEditable | TemplateBeginEditable name=
Editable region end code | #EndEditable | TemplateEndEditable
New editable region | <!-- TemplateBegin Editable name="head" --> | <!-- TemplateEndEditable -->

To make it easier on you, we have made three Dreamweaver MX 2004 find-and-replace (F/R) query files that you can find in the chapter36_exercise folder. This archive is named ConvertQueries.zip and contains three files (which, when extracted, still retains the folder information and will be housed in a folder named Queries). These files are associated with the three operations you need to perform (see the following table). Don't worry about how to reference them; that will be covered in Exercise 36-1 to 36-4 All you have to remember is where you have saved these three files on your hard drive (C:\ so the extracted location would convert to C:\Queries).

F/R Queries
Script | Function
ERStart.dwr | Converts ALL Dreamweaver 4 editable region start code to Dreamweaver MX 2004 start code
EREnd.dwr | Converts ALL Dreamweaver 4 editable region end code to Dreamweaver MX 2004 end code
ERHead.dwr | Adds the head editable region into the template document, but doesn't check whether it already exists on the page
Caution

These queries must be run on only Dreamweaver 4 template files from within the Dreamweaver MX 2004 find-and-replace interface. Running them on child pages, Dreamweaver MX 2004–generated templates, or from within the Dreamweaver 4 find-and-replace interface may produce undesirable results.

Setting up the site

To begin, copy the sample files from the chapter36_exercise folder and create a Dreamweaver MX 2004 site definition. This archive is named ConvertSource and contains the sample site source files.

Exercise 1.1: Setting up your site definition

Before you can do anything to the Dreamweaver 4-generated template and site, you have to define the site in Dreamweaver MX 2004. (This applies only if this was a site that did not exist any longer in Dreamweaver 4 or if when you installed Dreamweaver MX 2004, it did not pick up the site definitions from Dreamweaver 4 properly.)

  1. Start Dreamweaver MX 2004.

  2. Select Site ® New Site..., and in the dialog box that opens, select the Advanced tab.

  3. Select Local Info Category, and in the text box beside Site Name, type Convert Source. In the text box beside Local Root Folder:, click the Browse button to locate the folder ConvertSource. Your site definition should look similar to the following figure.

    Click To expand
    Completed Local Info category.

  4. Select Testing Server in the Category pane. Make sure to select None from the choices presented in the Server Model drop-down list, as shown in the following figure.

    Click To expand
    Completed Testing Server category.

  5. Click OK to close the dialog box, create the site, and open the site in the Files panel.

  6. If the site is collapsed, expand the site so that you see all folders expanded as shown in the following figure.

    Expanded Site tab.

  7. Leave Dreamweaver MX 2004 open for the next exercise.

That's all there is to setting up the site definition. No additional items need to be configured for this demonstration. However, before you can actually complete the conversion, you must tackle a couple more preliminary steps.

Backing up

Before you start changing any code, you should perform a preventative maintenance backup. (This step could save your bacon and should be part of your normal routine prior to modifying any site.) You should perform two kinds of backups: First, make a duplicate copy of your site file and folder structure somewhere on your hard drive outside of the currently defined site structure; second, make a duplicate copy of your template file.

"What I do for my site backup is use my file manager software (Windows Explorer), navigate to my site root folder, select the folder, and make a zip of the entire tree (saving folder structure) using WinZip." — Brad Halstead

You may opt to perform your backup differently.

Perform the steps outlined in the Exercise 1.2 to make a pseudo-backup of the template file prior to any conversion processes.

Exercise 1.2: Backing up the template file

Performing these steps ensures that your template file is backed up in the same defined site so that it can be restored with ease:

  1. If it isn't already running, start Dreamweaver MX 2004.

  2. Open the defined site that you want to modify. In this case, open the site defined as Convert Source in Exercise 1.1.

  3. Expand the Templates folder, if it isn't already.

  4. Open the DW4Base.dwt template by double-clicking it.

  5. Select File ® Save As; in the dialog box that opens, type the same template name but add a –bu preceding the .dwt. Your name should look like this: DW4Base-bu.dwt.

  6. Close the renamed template. Your Templates folder should have two templates now (see the following figure), and no documents should be open at this point.

    The Site tab after template backup.

  7. Leave Dreamweaver MX 2004 open for the next exercise.

Because you have made this backup, the template, links, and image references all stay intact, and if you accidentally changed the original template, you can easily overwrite the changed one with your backed up copy by renaming the backup template to the original filename.

Checking template syntax

Dreamweaver 4 does not include any method of manually initiating a template syntax check. You can happily go about editing your template in Dreamweaver 4 without having to worry about anything until you save the template. At that point, the template engine performs its duties by updating the pages associated with it or tells you that there is an error and roughly where the error occurred. You must find and clean up the problem manually.

Dreamweaver MX 2004 includes a handy tool for manually verifying that your template syntax is correct prior to saving it or updating the associated files. Exercise 1.3 takes you through the steps required to verify that your Dreamweaver 4 template syntax is correct. Keep in mind, however, that, as in Dreamweaver 4, you are required to manually fix any errors that are encountered until the template passes the syntax check.

Exercise 1.3: Verifying the DW4 template is syntactically correct

This step must not be skipped and should be performed on your Dreamweaver 4-created template prior to performing any additional steps. If errors are detected, they must be repaired prior to performing the conversion or data loss might occur.

  1. If it isn't already running, start Dreamweaver MX 2004.

  2. Open the defined site you want to modify. In this case, open the site you defined as Convert Source in Exercise 1.1.

  3. Expand the Templates folder, if it isn't already.

  4. Open the DW4Base.dwt template by double-clicking it.

  5. Select Modify ® Templates ® Check Template Syntax.

    One of two dialog boxes opens: The Template Syntax Is Correct dialog box or the Error dialog box, shown in the following figures.

    Syntax Check OK dialog box.

    Click To expand
    Syntax Check showing an error dialog box.

    If you see the Template Syntax Is Correct dialog box, move on to the next step. If you get an error message, it's time for some troubleshooting. You should see the Template Syntax Is correct dialog box with this template.

  6. Click OK to close the dialog box.

  7. Leave the template and Dreamweaver MX 2004 open for the next exercise.

Performing the conversion

As you've seen so far, a lot of preliminary work that must be done to avoid poor results. If you work through this tutorial step-by-step, you will get reliable results each and every time with your template conversion.

Exercise 1.4: Running the F/R Queries to convert the template.

It's time to perform the base conversion of the Dreamweaver 4 template into a Dreamweaver MX 2004 template. The easiest way to do this is to use Dreamweaver MX 2004's built-in Find and Replace command. Thanks to the forward thinking of the Macromedia engineers, you can save find-and-replace queries to a file and recall them later using the Load option in the Find and Replace dialog box:

  1. If it isn't already running, start Dreamweaver MX 2004.

  2. Open the defined site you want to modify. In this case, use the site you defined as Convert Source in Exercise 1.1.

  3. Expand the Templates folder, if it isn't already.

  4. Open the DW4Base.dwt template by double-clicking it, if it isn't open already.

  5. Select Edit ® Find and Replace to open Find and Replace dialog box shown in the following figure.

    Click To expand
    Blank Find and Replace dialog box.

  6. Click the Load Query button (the small folder icon near the Close button), navigate to the chapter36_exercise\queries folder, and select the saved query named ERStart.dwr. All the fields should populate as shown in the following figure.

    Click To expand
    Completed Find and Replace dialog box source code.

  7. Be sure the Find In field of the Find and Replace dialog box is set to Current Document. If it is not, change it using the drop-down list beside the field.

  8. Click the Replace All button to perform the document find and replace. After the command performs its magic, a report dialog box should provide you with the results or the query.

  9. Click OK to close the results.

  10. Repeat Steps 5 through 9 twice more (prior to saving the changes made!), first selecting the saved query named EREnd.dwt and again selecting the saved query named ERHead.dwr. Be aware that what you see in the two previous figures will differ depending on the saved query you are accessing.

  11. Choose File ® Save. When prompted with the Update Template Files dialog box (see the following figure), click the Don't Update button.

    Click To expand
    Update Template Files dialog box.

    You don't update the child pages, because the template code conversion doesn't affect child pages built from the Dreamweaver 4 version of the template unless you are adding/removing regions or updating uneditable content of the Dreamweaver MX 2004 converted template. The converted template will work as expected for all new pages created from it.

  12. Select any uneditable area (position your cursor just before the closing </body> tag) and select Insert ® Template Objects ® Optional Region. In the dialog box that opens, click the Basic tab, leave the Name field at its default, and ensure that the Show by Default: check box is cleared (as shown in the following figure). Click OK to close the dialog box and add the region to your page.

    Click To expand
    Optional Region dialog box.

    When you insert an optional region, you force the child pages to update to the new template format.

  13. Choose File ® Save. When prompted to update the site by the Update Template Files dialog box, click the Update button.

    The Update Pages dialog box shows a report of the files updated by the modified template. Click Close.

    Click To expand
    Update Pages dialog box — completed.

  14. Open any of the .htm pages to verify that the changes discussed indeed took effect.

  15. Close all open files and close Dreamweaver. You're done with the conversion.

When you are satisfied that your local copy of the converted site is functioning as expected, the last thing you must do is upload the changed files to the server that hosts you site. You can do this using the Dreamweaver MX 2004 FTP engine, or you can use your favorite FTP program. Remember to update the whole site, not only the root documents, or you may run into problems.

Server language template considerations

The instructions provided previously apply to templates made for child pages based on static (HTML) or server-oriented languages (CFML, ASP, JSP, .NET, or PHP). However, if your pages are for server-oriented language site, you must perform one additional step.

Suppose that your template contains your Web site's login information so that a database can be accessed. This in itself is good coding practice and minimizes the number of keystrokes and mouse clicks required to build the site. Suppose also that you upload the template to the server because you build the site collaboratively with a remote designer. Suppose someone accesses your site's Template folder and views your template file.

DWT files can be opened by Internet Explorer without issues in most cases. Because the file is not recognized by the server, it is not parsed and served to the browser, but instead it is delivered as-is to the browser.

This means that anyone who knows how Dreamweaver templates work can hack your site, grab your database, or do a multitude of things that you won't even know about.

There is one very simple thing that you can do to protect your data: Use Dreamweaver's Site Manager or Files panel to rename the template.

For example, say you have a template that contains all the ColdFusion database connection data and the filename is cfsample.dwt. If you rename this template, using the Files panel or Site Manager, to cfsample.dwt.cfm and update the child pages when prompted, in effect you have told the server that this template file must be processed and served to the browser, thereby hiding your connectivity information. The following table provides a complete breakdown of recognized template extensions that Dreamweaver MX 2004 can use.

Template Extension Listing
Language | Template Extension
CFML | .dwt.cfm
ASP | .dwt.asp
JSP | .dwt.jsp
.NET | .dwt.aspx
PHP | .dwt.php
HTML | .dwt

This security issue is present only if you are updating a dynamic template from Dreamweaver 4 or UltraDev 4. If you check your site definition and ensure that your server model is selected, future templates will not require this to be manually configured for this site definition. The server model can be configured through Site ® Edit Sites. Select the desired site and click the Edit button. Choose the Advanced tab and then the Testing Server category. Choose your server model by selecting it in the Server Model drop-down list.

Caution

The server model is a little strange: For Studio MX 2004, ColdFusion is automatically used, but for the standalone version of Dreamweaver MX 2004, None is the default. Ensure that you set the desired server model at the same time that you originally define the site, or you will have issues with server-side includes (if you use them).

Don't forget to delete the DWT file from the server Templates folder.

Conclusion

Congratulations! You just completed your first Dreamweaver 4-to-Dreamweaver MX 2004 template conversion. Remember the steps, because they are important. To recap: Back up the site. Back up the template. Check your template syntax. Use the three provided find-and-replace queries. Add an optional region. Save the template, and update the site. Along with the exercises, this chapter provided some common cautions and notes as they apply to the template conversion process.

End Sidebar


Summary

In this chapter, you learned the basics of working with Dreamweaver productivity features, including Library Items and Dreamweaver templates. You built a Library Item so that you could modify its content later. You learned that Library Items are element-based locked code, whereas templates work at the page level. You added a template based on an existing page and defined regions for the template. You learned to set optional regions and to include editable tag attributes, which you edited in pages you built from the template. You also modified the template to include links between the pages and passed those changes to your pages.


Project Summary

In this chapter, you created a template for the Habitat Alert site and built the main pages for all four sections of the site.

Files Prepared for the Habitat Alert Web Site
Files | Techniques Used
site\index.htm | You added a Library Item for the bottom ad banners that may be present on pages of the site. When ad banners for this area need to change, you can update the Library Item and push those changes to any page that contains the item.
Templates\Basic Page.dwt | You built this template from the index.htm page.
act\index.htm find\index.htm learn\index.htm support\index.htm | You built these pages from your template and modified the editable tag attributes for their location graphics.
find\index.htm | You chose options to hide or display content in optional regions and added a spacer image to an editable optional region to keep the circle area table cell open.
site\index.htm | You applied the template to the home page to build a relationship between it and the template, so that later modifications of the template would be reflected in the home page.


Chapter 37: Tapping into the Power of Forms

Download CD Content

Overview

HTML forms are powerful page elements that you can use to collect data or interact with site visitors. How you use a form is based on its purpose and the type of technology available to you. Dreamweaver can help you build and power your forms to collect data, generate dynamic content, or store information gathered in a database.

Cross - Reference

Refer to Chapter 47 for using forms with ColdFusion.


Understanding How Forms Work

Forms are widely used to gather information from the user. Good examples are registration forms. They are also used to gather search information or to add information to a database. Forms are created with HTML tags. The <form></form> pair surround other form object tags, such as <input>, <select>, and <submit>, to name a few. Form objects are used to collect, and sometimes to display, information. You give each form object a unique name when you use it in a form so that the combination of the form object's name and the information supplied by the user (value) results in a name-value pair.

Name-value pairs are useful. They can be delivered in an e-mail, stored as data for a field column (where name = field, value = column), or remembered as a scripted variable by the visitor's computer. The way name-value pairs are used depends upon the type of technology used to handle or process the form.

Form technologies

Dreamweaver contains easy-to-use tools for building forms, but a form by itself really has no power. A client or server technology is required to tap into the values of the form objects. The first step to using a form is to define its purpose, which you accomplish by choosing and using an appropriate technology.

Cross - Reference

See Chapters 46 and 47, in which ColdFusion technologies power forms that collect, store, pass, and display data.

Mailto:

The simplest method of using form name-value pairs collected from a form is to e-mail them to an individual who then transfers the data to some type of paper or digital storage. All that's required is that you place the e-mail address in the form of mailto: in the Action field of the form tag, as shown in Figure 37.1. This is generally not a secure method of transfer, and most browsers inform you of this fact when you submit the form. This technology is appropriate for only the most casual of information, and data delivered this way isn't formatted for easy reading.

Click To expand
Figure 37.1: A simple but insecure form. Place the mailto: e-mail address in the Action field of the form tag.
Cross - Reference

See Chapter 34 for more on creating mailto links.

Cookies

Some form of data is collected for use on the Web and stored using client-side scripting as a "cookie" on the visitor's computer hard drive. Client-side means that processing is done on the visitor's computer. Cookies are tiny bits of information that are stored for a set time period in a special location on the visitor's computer, and JavaScript is generally the power behind this type of form handling. A typical example of cookie usage would be to collect a visitor's name and preferences. The information is stored and then accessed via additional scripting during the current or subsequent site visits. The downside of cookies is that many users block them from being written to their computer by changing their browser preferences.

Server-side processing

A more powerful use of forms taps into server-side solutions. Server-side means that processing occurs on a remote (Web or application) server, not the visitor's computer. Scripts that live on the Web server parse (process) the data and do one or any combination of three functions with it:

  • Send the information somewhere, usually by e-mail.

  • Reuse the information in dynamically generated content.

  • Store the information in a data source, either a database or text file on the Web server, for later use.

Server-side solutions are especially useful for retaining data. You cannot collect and store data from a form without some kind of server-side logic.

FormMail and other CGI scripts

Sometimes your form's purpose is to collect data and send it to someone. Most Web hosting companies have a standard CGI FormMail script that can e-mail form data to one or more recipients and even returns a thank-you page after the form is submitted. This type of script uses Common Gateway Interface (CGI) protocol to control the way processed information is passed from the script or program back to the Web server and/or the user's browser. A CGI script enables a visitor to run or execute the script on the server. In the case of FormMail, an e-mail program on the Web server sends the collected and formatted data to the supplied recipient address.

Most form data is collected via visible input fields or through menus, lists, radio buttons, or check boxes. Typically, a FormMail script includes one or more hidden fields that are contained in the source code but don't display in the browser. Visible form data values are most often supplied by the user; hidden field data is generally supplied by the Web page author.

To use a FormMail or any other CGI program, you must make sure the script is present on the Web server, generally in a cgi-bin folder, and you must set specific permissions to allow execution of the script. The path to a script is placed into the action field of the form tag. Generally, the type of path used is root-relative so that only Web pages on the same server may execute the script, which makes handling the URL easier for you as the developer. Some CGI scripts can also write data to a server, generally in the form of text files.

Web applications

Your form's purpose may be more complex than sending data via e-mail. The most powerful forms write and retrieve information to and from a data source that is stored on a remote server. In some cases, the information is reused as dynamic content in subsequent pages. This type of form requires handling by an application server — special software and drivers designed to interact and translate information to and from the database.

Typically, the form is placed into an HTML page that uses a special extension such as .asp, .cfm, .shtml, and so forth to tell the Web server that the page must be processed before giving it to the visitor's browser. The scripting is processed as required, information is sent to the data source, and/or the HTML page is returned (minus the scripting) to the visitor. With Macromedia UltraDev now folded into Dreamweaver, you can select from several supported technologies to power your forms.

GoldFusion MX You can use Dreamweaver to add server-side logic to your forms. See Chapter 47 and the entire ColdFusion section in Part VI for more information about how to set up and script the form examples, including the forms set up in this chapter.

Working with forms

After you have defined your purpose and the information you need from a form, it's time to build the form in an HTML page. If you choose to use application logic such as ASP or CFM with your forms, you need to use the correct extension for your HTML page. However, you can build the form in a normal HTML page and change the extension later.


Using Dreamweaver Form Tools

Dreamweaver makes adding form elements easy. You don't have to remember required properties because Dreamweaver displays all available properties for a form element in the Property inspector. To add form elements (tags) to your page, use the Insert menu or bar. Figure 37.2 shows the Insert bar's Form tools. Click the Forms category to open the correct panel in the bar.

Click To expand
Figure 37.2: The Insert bar contains all the Form tools.

Following is a list of the form elements shown in Figure 37.2. You can also access these options from the Insert menu using Insert ® Form or Insert ® Form Objects:

  • Form — Places opening and closing <form></form> tags in the document.

  • Text Field — Adds a text field. Text fields accept input in the form of letters or numbers. Different types of text fields include single line, multiple line, and password fields.

  • Hidden Field — Places the input tag in the code that is invisible to users in their browsers, unless they view source code. Hidden fields provide a place for the developer to store values that you might use during processing.

  • Text Field — A text field. You can set text wrapping (automatically wraps to the next line) here. Wrap Virtual hides unsightly horizontal scroll bars.

  • Check Box — Inserts a check box in a form. Check boxes imply that more than one choice is acceptable in a single group of options.

  • Radio Button — Inserts a radio button, generally as one in a group. The buttons are mutually exclusive. Selecting one button within a group deselects the others within a radio group.

  • Radio Group — Contains one or more radio buttons that share the same form object name.

  • List/Menus — Displays selection options. Lists display option values as a scrolling list; users may select multiple choices or options. Menus display choices on a pop-up (drop-down) menu; users can select only a single option.

  • Jump Menu — Inserts a list or pop-up menu, used for navigation options, that is powered by a native Dreamweaver JavaScript behavior.

  • Image Field — Inserts an image via the Browse function. Image fields are sometimes used as graphical replacements for submit buttons. Image fields require additional scripting to be effective.

  • File Field — Allows selection of a file for upload to the Web server. It inserts a blank text field and a Browse button in a document.

  • Button — Inserts a text button within a form. Buttons submit or reset form data, depending upon the properties set. The appearance of form buttons is controlled primarily by the browser on the user's computer. This is why you may want to use an image field (your own button) instead of relying on the browser's default style.


Adding a Form

All form objects must be contained within form tags to display properly in all browsers. Add a form tag before adding your form objects. If you plan to use a table to format the layout of your form, place the table between the form tags.

To add a form tag, use the Insert bar Form tools or choose Insert ® Form. Because the form tag itself is not a visible object, enable View Options. Choose View ® Visual Aids ® Invisible Elements to see the form tags visually represented as red lines. To modify properties of the form tag, place your cursor inside the form and use the Tag selector to select <form>.

On the CD-ROM

Save the HabitatAlert37 folder from the chapter37_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, choose the Edit Site option in the Files panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site In this section, you add a form for the options in the Find page. This exercise requires a defined site using the chapter37_exercise folder and files.

  1. Open find/index.htm. This page was created from the Basic Page template. The circle area has some optional regions settings. Sidebar Image is turned off and the What's New menu is off, but the Other jump menu's region is enabled. This is an editable region, and a spacer image set to 231 pixel by 1 pixel and formatted as a paragraph holds open the table cell containing the circle graphic.

  2. Place your cursor into the blue circle cell. Select the <p> tag and press the right arrow to move past this code.

  3. Type Quick Search. Choose Insert ® HTML ® Special Characters ® Other to open the Character Map dialog box. Click the tenth item from the top row, which should produce &not;, as shown in Figure 37.3. Close the dialog box.

    Click To expand
    Figure 37.3: Use special characters for cross-platform consistency.

  4. With your cursor in the new text, use the Format menu to set it to Heading 4. Select <h4> using the Tag selector, and press the right arrow to move to the right of the closing tag.

  5. Choose Insert ® Form.

    If your invisible elements are enabled, you'll see two red lines. You don't need to place a line break or paragraph return before adding the form because forms (similar to tables) automatically form their own block.

  6. Save your page and keep it open for the next exercise.


Adding Form Objects

Dreamweaver includes many form objects such as text fields, menus, buttons, radio buttons, and so on that you can quickly add to your pages. To add form objects to your form, place your cursor in the form and click the desired form object button in the Form tools of the Insert bar. You can also use Insert ® Form Objects ® and choose the type of tag appropriate for the information you want to display or collect.

Tip

If you have a form object with specific values that you use often, consider building your own Form Object Tool button or saving the code as a snippet. Creating tools and snippets is covered in Chapter 41.

Choosing the correct form object

Certain form tags are conventionally used for specific tasks. For example, radio buttons imply mutual exclusivity; if you want to offer a group of choices from which the visitor can select more than one option, use a check box. When space is an issue and you want the visitor to choose only one option from a group of options, use a pop-up or drop-down menu, instead of several radio buttons.

Labeling form objects

Provide a label or call to action for each form object. For example, clearly identify each text box or each radio button in a group. If a value is required for a form object, mark that label with an asterisk and explain the meaning of the asterisk in a paragraph above the form.

Habitat Alert site The first form added is a search function that could be powered by any server-side technology, such as ASP or ColdFusion. A label for the form function has been added already. A search function requires a text field and a form button at the minimum:

  1. With your cursor in the form, choose Insert ® Form ® Text Field.

  2. Press the right arrow and use the Insert bar Form tools to add a button to the area (see Figure 37.4).

    Figure 37.4: The text field and button added to the form field.

  3. Save the page and keep it open for the next exercise.


Setting Form and Form Object Properties

All form tags require certain properties. Use the contextual Property inspector to select and add properties for your form tags. To access any existing form tag's properties, first select it in your page.

The Property inspector makes form building a breeze because all the properties are right there — no digging around in a book looking up what properties are expected. If you prefer to hand-code, tag hints and code-balancing features in Dreamweaver speed up the process.

Naming form objects

Every form and form object is given a name by Dreamweaver. Naming the form or form object makes it possible to reference or control it through scripting. You can change the name using the Name field in the Property inspector. Some FormMail CGI scripts require specific names for specific tags to work properly. Logical names are easier to read when name-value pairs are sent via e-mail.

Form properties

Specify a path to the script or dynamic page (application) that will process the form data in the Action field. Use the Browse button to locate the script or page, but often these are not contained within your site and must be handwritten. Add a method for transmitting the data to the server, if needed. The following form methods are available:

  • POST — Embeds the form data in the HTTP request.

  • GET — Adds or appends values to the URL requesting a dynamic page. This method is limited to a total of 8,192 characters. If the amount of data sent using the GET method is too great, it will be truncated, resulting in errors. Because values are readily visible in URLs, it is unwise to send sensitive user data using the GET method.

  • DEFAULT — Uses the browser's preferred or default method. Typically, this is the GET method.

Choosing an Enctype sets a MIME type for the data you submit for processing. The default coding for all forms according the W3C standards is application/x-www-form-urlencode and is generally used with the POST method. For uploads of files, use the multipart/form data MIME type. Also, Dreamweaver now offers a target option to specify the destination window to be used by returned data.

Cross - Reference

More information about window targets is located in Chapters 38 and 40.

Form object properties

You use the Property inspector to set certain required and optional properties for form tags. Some form objects have more requirements than others:

  • Text Fields — Choose single, multiple, or password. Specifying display size and the maximum number of characters the user can enter is optional. Text entered via the browser into a password text field displays as bullets, Xs, or asterisks, depending upon the user's system and browser.

  • Radio Buttons — Radio groups must share a common name. You specify a value for each button. When the user chooses a button, the result is name=value chosen. You may opt to have one button preselected.

  • Check Boxes — These objects have unique names. You set a value for each box. Generally, the value implied is yes if chosen and no if not. For example, the label next to a check box might read, "Would you like a brochure?" The name of the check box might be sendbrochure, and its value, if checked, should be set to Yes.

  • Menus and Lists — This form object defaults to menu; to add a list, select that option. Menu and list options are added by clicking the List Values button. In the dialog box, as shown in Figure 37.5, the left column is what the user sees. The right column is the value passed via the form submission.

    Click To expand
    Figure 37.5: The List Values dialog box is where you add list or menu items.

    Habitat Alert site In the following steps, you use the Property inspector to add some properties to the form elements:

  1. Click the form. Use the Property inspector to name this form quicksearch in the Form Name field.

    Tip

    Check to verify that you are really in the form by looking at the Tag selector. Do you see the <form> tag? If not, you are not really in the form. Go to Code view if necessary to place your cursor inside the form tags.

  2. Select the form's text field. Set the object's name to item and set its Char Width value to 12. Select the <input> tag in the Tag selector and right-/Control+click to apply the .formbox style.

    At this point in the development cycle, additional style rules have been formulated and two style sheets are being used.

  3. Select the form button and use the Property inspector to change the Label from Submit to Go (see Figure 37.6).

    Figure 37.6: The text field with a Char Width value of 12 and a Go button.

  4. Save your page and keep it open for the later exercise.


Using a Table to Format a Form

Habitat Alert site When your form requires many form objects, using a table helps you create a nicer-looking layout through alignment and spacing options.

Caution

Remember to add the form tags first; then place your table inside them. A form can become dysfunctional if the opening and closing form tags are incorrectly placed.

In this exercise, you'll build a form to allow the site visitor to subscribe to the Habitat Alert newsletter from the Act section of the site.

  1. Open act/register.htm from the Files panel.

  2. Place your cursor into the main content area, just below the introductory text.

  3. Choose Insert ® Form Be sure to enable viewing of Invisible Elements in the View Options to see the red lines that indicate the beginning and ending form tags.

  4. Add a table with one row, and two columns at 90 width. Set padding and border to 0 and spacing to 5 pixel.

  5. Click into the first cell and use the Tag selector to right-/Control+click the <td> tag and set its class to formheadings, which will set the cell's horizontal alignment to right and format the text you add. Now type Last Name: in this cell. Tab to move to the next cell.

  6. Choose Insert ® Form ® Text Field. Alternatively, you can click the Form category in the Insert bar and use the Text Field object button.

  7. With the text field selected, use the Property inspector to set its name to LastName. Set its Char Width to 20. Char Width controls the width of the form object but doesn't restrict the number of characters that can be added.

    Note

    The width of form objects depends upon the browser and the computer platform and system of the user. Typically, Netscape text fields are wider than those of Internet Explorer. Be sure to test if width is an issue in your design.

  8. Tab to create a new row. Type First Name: and tab to the next cell. Add another text field, set its Char Width to 20, and name it FirstName.

    Tip

    By setting the CSS formatting for the first row's label cell, you are ensuring that any subsequent rows added include the same formatting. That's why it's best to create only one row at first.

  9. Tab to add a new row. Add the label Email:, then tab and add a text field named Email, set to 20 characters.

  10. Tab to add a new row. Add the label Street Address:, then tab and add a text field named StreetAddress, set to 20 characters.

  11. Tab to add a new row. Add the label State/Province:, then tab and add a list/menu form object named StateorProvince.

    Tip

    In this case, you can either build the required drop-down menu with all the states and provinces required or you can use the Macromedia Dreamweaver Exchange to download and install an extension that adds this type of menu to the Insert menu. We recommend U.S. State Codes by Rabi Sunder Raj. You can find it at the exchange (http://macromedia.com/exchange/dreamweaver) by typing state into the search field. You must be a registered member to download from the exchange.
    Cross - Reference

    See Chapter 42 for more about using extensions in Dreamweaver MX.

  12. Tab to add a new row. Add the label Zip/Postal Code:; then tab and add a text field named ZiporPostalCode, set to 11 characters.

  13. Tab to add a new row. Add the label Country:; then tab and add a text field named Country, set to 20 characters.

    Finally, it's time to add the all-important form submit button. A form needs a button to trigger the action field. A reset button is useful, too.

  14. Tab to add a new row. In the first cell, add a form button and label it Register. Don't worry about naming this form object, as it is not required.

  15. Tab to the next cell and add another button. Click the Reset option; then relabel the button Clear Form.

  16. Save your page.

    Cross - Reference

    A form requires an action and method to work with a server-side technology. Setting the Method is discussed more in Chapter 47.


Adding a Jump Menu

Jump menus are a popular way to add a lot of links in a small amount of space. You've seen menus where you click an arrow to open a drop-down list of links — these are jump menus. The jump menu in Dreamweaver is an easy-to-use form object that's often used for navigation; the menu lists different options, and a JavaScript behavior powers the options to switch pages on demand. Some jump menus use a Go button, but most visitors expect to have the page switch when they choose an item.

Jump menus are added in the same fashion as any other form object, but they have their own dialog box to allow easy development. To edit a jump menu, select the menu object and use the Behaviors panel to double-click the jump menu listing.

Habitat Alert site Here you'll build a Resource Menu to allow visitors to select from a dynamically generated list of resources, sorted by category. Go back to using the find/index.htm page.

Cross - Reference

See the exercise dynamic_form_menus.pdf in the Bonus Tutorials/ColdFusion folder on the CD-ROM for more information about setting up dynamically generated form drop-down menus. While the exercise uses ASP Server technology, a similar process could be used with ColdFusion.

  1. Click the form you added (quicksearch) and select the <form#quicksearch> tag using the Tag selector. Press the right arrow to move past the form code.

  2. Type Resource Menu and add another &not; special character. Format this as Heading 4 and select the <h4> tag using the Tag selector.

  3. Press the right arrow to move past the heading and Insert ® Form ® Jump Menu.

    You won't need to add a form first because the Jump Menu tool adds it for you if needed. You may opt to add the form first if you prefer .

  4. In the Text field, type Find a Resource.

    Tip

    It is advisable to make the first item in a jump menu a call to action. Jump menus use a JavaScript function that works with the event onChange, meaning that the script is called only when an item is changed. Because the first item is already chosen, there's no way to choose it.

  5. Add a new menu item by clicking the Add (+) button. In the Text field, type Gov't Agencies for this item and place a hash mark (#) into the When Selected, Go to URL field. Figure 37.7 shows the Jump Menu dialog box.

    Click To expand
    Figure 37.7: The Jump Menu dialog box.

  6. Add these items, each time using a hash mark instead of a URL:

    • State Agencies

    • Groups

    • Habitat Alert Links

  7. Click OK. Select the jump menu's <form> tag and name this form resources.

  8. To finish this page, add some class to your form objects by setting style rules. Styles have already been created for this purpose. Select one of the items (from the first form) and right-/Control+click to set its class to .formbox. Select the form button (<input> in the Tag selector) and set it to .formbtn. Select the jump menu (select) and set its class to .formbox, too. Save your page and preview.

    Note

    Form styles are not well supported in Netscape 4x and have no effect there, but they jazz up your form objects in W3C-compliant browsers. Be careful about which properties you use if developing form styles, and always set these style rules in an imported style sheet to hide them from Netscape Navigator 4x.

Figure 37.8 shows the page in Netscape 4x.

Click To expand
Figure 37.8: The main Find page in Netscape 4x.

Figure 37.9 shows Internet Explorer 6.0. The styles used to format this page are contained in two style sheets, with some adjustment to make Netscape 4x happier.

Click To expand
Figure 37.9: The main Find page as viewed in Internet Explorer 6.0.


Summary

In this chapter, you learned to add form tags using the Insert menu and bar. You named and set properties for form tags using the Property inspector. When you needed a special character, you learned to add it via the Insert ® Special Characters ® Other menu option. You explored using a jump menu to build a section-specific navigation method. Finally, you styled your form objects using rules defined in an imported style sheet.


Project Summary

In this section, you created two forms for the main page in the Find section of the Habitat Alert site. This page can later be the basis of a nested template (if needed) to build more pages for the resources listed in the jump menu. The forms in this page will later be powered by ColdFusion. Pages that display search results or resources will be saved using the .cfm or .cfml extension.

Files Prepared for the Habitat Alert Web Site

Files

What Was Done

Where to Now

find\index.htm

act\register.htm

You developed forms that can later be powered by the server-side technology of your choice.

You added a form to use as a search engine.

You added a form to collect registration data from visitors that want to receive an e-mail version of the newsletter.

You added another form as a jump menu that can be static or set up to be dynamically populated.

Setting up forms ahead of time allows them to be approved and then later developed as part of a Web application to speed up workflow and site development.

A form requires an action and method to work with a server-side technology. In this case, you'll set these in Chapter 47 to reference a ColdFusion template.


Chapter 38: Building a Framed Site

Overview

Building a framed Web site is a complex and sometimes controversial issue. Although frames offer the advantage of displaying more than just one page at a time, the disadvantages of using frames are legendary. You wouldn't need to look far to find the Top Ten list of things not to do when building a site, which includes the use of frames. But, used appropriately, a framed site can provide a means to navigate and display content in a way that no other option provides.

Dreamweaver makes building a framed site fairly easy. When you want navigation that remains fixed and present at all times, using frames is the way to go. Despite issues with bookmarking and printing site pages, framed sites are still in demand. In this chapter, you learn to use Dreamweaver's frames features to build simple, complex framed layouts, and you explore how targeting is the key to successful navigation for framed sites.


Understanding How Frames Work

By default, a Web browser displays a single page at a time. To display more than one page in a single browser window, you need to tell the browser application how to divide the window into frames, and then you need to specify which HTML pages to display within each frame. The document that tells the browser how to divide the window is the frameset document. Figure 38.1 shows a frameset page in Dreamweaver. The dark borders are not what you see, they were added for illustrative purposes. The thick line surrounding the document is the frameset, which consists of three frames in this example.

Click To expand
Figure 38.1: A page with three frames within the frameset.

The <frameset> tag includes information about the number, size, and orientation of all frames, plus the options to enable or disable frame borders.

<frameset>
<frame>
<frame>
</frameset>

Each <frame> tag contains information about the page to display within the frame, margin settings, how scrolling will occur when the content of the page is greater than the size of the frame, and whether the user can resize the individual frame areas.

Building a framed site means that you will be working with three or more pages, where previously you worked with only one. The most common use of frames is to isolate the navigation from the content.

Within each frame, standard HTML pages are displayed and work exactly as they would within a normal browser window, except that links target a specific frame. Targeting a frame means to tell the browser where to load the requested page. Generally, this means telling the browser the name of the frame where the page should load.

The advantages of using frames

There are distinct advantages to using frames. A frequent use of frames is to display a site's navigation (buttons, text). When navigation is displayed in a separate frame, it can be accessible at all times. The navigation frame normally stays the same, and as a user clicks a link, a new page loads in another area of the page. This also means that the navigation doesn't reload when a new page is called.

Frames are popular for extremely large Web sites or intranet sites that have many groups, departments, or divisions, because frames allow compartmentalization of the page. One frame can hold the main navigation, which remains constant. Another frame might display different navigation, depending upon which group, department, or division is entered. A third frame might display content selected from the secondary navigation. With so much going on at one time, it's nice that the main and secondary navigation don't reload with every page call.

The disadvantages of using frames

The disadvantages of using frames are many and well touted. Much of the dislike of frames comes from the frustration of visiting poorly designed sites that use frames improperly. Framed sites generally require more work because you are handling more pages; they also require specific linking methods. When done incorrectly, the pages don't work — and that can make for a negative user experience.

Perhaps the two most notorious drawbacks to frames are the bookmarking and printing of framed pages. When the user finds a desired page and tries to create a bookmark, the frameset document is marked, not the specific page that appears in any frame. The browser remembers only the frameset document, not any page that was subsequently called into a specific frame. To print from a Netscape browser you have to select each individual frame and print it. In Internet Explorer you can print each frame or all as they appear in the browser.

Additionally, some search engines are not optimized to follow links across frames. However, each of these disadvantages may be overcome through scripting. When you are planning a framed site to meet stringent accessibility guidelines, it is imperative to use the built-in accessibility features provided to make it possible for aural readers to understand how to process and read the site.


Building a Simple Frameset

When building your framed site, you can start from scratch if you have no existing pages, or build a frameset to house existing pages. Dreamweaver enables you to work within the frameset so you can see how the pages will appear within the browser window. To work with framesets and frames, use the Document window, the Property inspector, and the Frames panel. To try the exercises given in this chapter, you need to define a new site. Name the site Chapter 38 and add the files from the chapter38_exercise folder.

Start Sidebar
Rows or columns?

The first thing to decide when building a framed site is the orientation of the frames used. A simple frameset can contain as many frames as you'd like, but all must share a common orientation of rows or columns. Rows divide the browser window horizontally; columns divide it vertically. Figure 38.2 shows the most common frameset options to use all rows, all columns, or a mix of both. When you opt to use rows and columns together, the frames are read by the browser from top to bottom, left to right. It's also possible to combine rows and columns in only one of the frames; this is called a nested frameset, which is covered later in the chapter.

Click To expand
Figure 38.2: Simple framesets include rows only, columns only, or a shared row/column layout. Nested framesets are used when you want to vary the total rows and columns between frames.
End Sidebar

To start a frameset document, follow these steps:

  1. Choose File ® New ® Framesets. Choose a frameset from the right column, and click Create. Don't save the page yet.

    Note

    You can also access the new frameset options in the Layout category of the Insert bar.

  2. Click View Options ® Visual Aids ® Frame Borders. Turn on the visibility of Frame Borders if you don't see a check mark.

  3. Click the border of a frame and check the Property inspector. If it's a row, you'll see a visual graphic that you can click in to select rows. Change the row's height in the Row Value field. If it's a column, you'll see the Column Value field. Refer to Figure 38.3.

    Click To expand
    Figure 38.3: The Layout category of the Insert bar.

    Cross - Reference

    You'll learn more about the various frame values and selections later in this chapter.

  4. You can also add columns or rows using the Layout category of the Insert bar, as shown in Figure 38.3.

  5. To undo adding a frame, select Edit ® Undo, or press Ctrl/Command+Z.

  6. You can also view the frames in the Frames panel (Shift+F2).

Navigating the documents in a framed site

When building a framed site, you work with multiple documents in the Dreamweaver application window and need to access different documents to set up the properties of those pages. To work successfully and efficiently, you must understand how to select the correct document within the frameset. Open the Frames panel (Window ® Frames). The Frames panel shows current frame's layout.

To set frameset properties, you must first make the frameset tag active. To access the frameset, you can

  • Click the outer border in the document window.

  • Click the outer border simulation in the Frames panel.

  • Click a frame displayed in the Frames panel, and select the <frameset> tag shown in the Tag selector.

Dreamweaver provides a visual clue that the frameset is currently selected by outlining the entire frameset in the Document window with a dotted line and by outlining the Frames panel simulation with a solid dark line.

To work with a frame, click and select the desired frame in the Frames panel to make it active. A dotted line outlines the active frame to let you know which frame is selected. The Property inspector displays the properties of the active frame.

To work with a document displayed inside a frame, use the document window to select the desired page. Click the frame that contains the document page. The document's <body> tag displays in the Tag selector. Working with an HTML page inside a frame is like working with a page outside of a frame; you have access to all the standard tags, techniques, and methods you would normally use.

Setting frameset properties

After you've set up the layout of your rows, columns, or both, you can set values that determine the dimensions of the frames and whether there is a visible division or border between each frame. Some of these properties may be set at the frameset level or the frame level; others are strictly controlled by the frameset tag. Properties controlled at the frameset level affect all frames. If your frames will not share properties but have individual values for each setting, you may opt to determine those values at the frame level. Borders can be set at either level. Use the Property inspector to set the various values.

Borders

By default, borders outline individual frames; because frames share common sides, they also share border properties. Borders can be useful when you use many frames, but most developers prefer to turn off border visibility and let their page design mark the various regions of the site.

Follow these steps to turn off borders for all frames:

  1. Be sure you have the frameset active by clicking the outer border of the document window or Frames panel. The <frameset> tag is bolded or highlighted in the Tag selector.

  2. Use the Property inspector to choose No from the Borders menu.

  3. Add a zero in the Border Width field. This is required to explicitly remove all borders.

To set a shared border value for all frames, follow these steps:

  1. Choose Yes from the Border menu.

  2. Add the desired value to the Border Width field.

  3. Choose a border color, if desired, by clicking the Color box to access the standard Dreamweaver color palette. Click a color sample from other documents, or click the System Picker icon to access those options to choose a color.

Setting frame dimensions

One of the trickier tasks involved when building a frameset is determining the dimensions of each frame. The size of all frames is controlled at the frameset level, using the mini version of your frame layout shown in the Property inspector (see Figure 38.4).

Click To expand
Figure 38.4: The mini layout lets you select which frame to size.

Frames can use a specific pixel dimension or a percentage dimension, or they can be set to take up any available remaining space. This last option is called relative, although technically, a percentage dimension is also relative. The relative setting is similar to a wildcard setting; it really means "whatever is left" after the set values are displayed.

Because the overall width of the user's browser window is not known, using only pixel values is impractical. Generally, you use a combination of set pixel values with at least one relative value or you use percentage values exclusively. The layouts shown in Figure 38.2 use pixel values in combination with the relative (*) setting. This allows the frame or frames with specific values to be rendered first, then gives any remaining space in the browser window to the relative frame. The relative frame is "stretchy" and expands or collapses as the browser window is resized, leaving the fixed-pixel widths of the other frames untouched.

When you are using percentage values for frame sizes, it is best to use them for all frames and to make the total settings add up to 100 percent.

Follow these steps to set frame sizes:

  1. Select the frameset tag to bring up the frameset properties in the Property inspector.

  2. Click one of the frames displayed in the mini version of your current frames layout in the Property inspector.

  3. Choose Pixels, Percentage, or Relative from the Units menu.

  4. If choosing Pixels or Percentage, add a value in the Value field. If you choose Relative, a number is displayed in the Value field. You don't need to set it or change it, because the real value that will be added is the asterisk (*) sign to indicate that this frame is to use any available space.

  5. Click into the next frame and set its values.

Saving a frameset

Saving your work as you build a framed site is tricky, and the way you do it depends upon whether you are starting from scratch (with no existing pages) or are using existing pages within your newly created frames. In all cases, you must first save the frameset.

To save a frameset, follow these steps:

  1. Make the frameset tag active.

  2. Choose File ® Save Frameset As. If the frameset is not active, you will not see this option.

  3. Navigate to your site root folder and save the frameset page. Because the frameset docu-ment must load first, it is common to name this document using index or default so that it autoloads.

Dreamweaver must know where the frameset is saved to be able to build a relationship to the pages that display within the frameset's frames. With the frameset saved, you can work with framed pages without fear of losing any work.


Working with Frames

Now you are ready to develop your frames. The <frame> tag controls which page appears in the frame and whether the frame scrolls or resizes. You can also set border properties at this level or control the page margins for a page used within the frame. To work with a frame, click the frame in the Frames panel.

Naming your frames

When building a framed site, you must name the frames you create to be able to target them later when building links in the pages. Like any other HTML object, the reference name makes it possible to specifically address that object in the browser window.

To name a frame, select it in the Frames panel. Use the Property inspector to type a name for the frame, as shown in Figure 38.5. There are two schools of thought for naming your frames, both of which use descriptive naming. The first naming convention describes where the frame is, as in TopFrame or LeftFrame. The second convention is also descriptive but describes the function of the frame, as in NavFrame or MainContent. You can use any convention you desire, but you can't use spaces or special characters in the name.

Click To expand
Figure 38.5: Add a name for each frame using the Property inspector.

Saving or setting the frame source

If you think of the framed site as a window (the browser window), you can think of each frame as a separate pane in the window. The view (page) for each pane can change on demand. However, when the frameset document opens, a set view (page) must load for each frame; this is the frame source (src). If you have existing pages you want to display in your frames, you may set a frame's source to use them.

Follow these steps to set the frame source if the page is within the root of the current site:

  1. Click the frame for which you plan to set the page source.

  2. Use the browse-for-folder or point-to-file methods to select the correct page from the Files panel (window) of the current site.

Follow these steps to set the src if the page is not local:

  1. Select the correct frame.

  2. In the Src field of the Property inspector, type the full (absolute) URL to the desired page.

If you don't have existing pages but plan to build them as you develop your site, you need only save the temporary pages that Dreamweaver supplied when you created your frames. To save the temporary page in a frame, click the frame in the document window and choose File ® Save Frame As. Navigate to your root folder to name and save the HTML page. Repeat the process for each frame.

Note

You aren't really saving the frame; you are saving the unsaved, temporary document that Dreamweaver added to be able to display the frame in Design view.

Using Save All

The Save All option for saving a frameset and framed pages is useful but tricky. If your frameset and frames have never been saved, choosing File ® Save All triggers a dialog box for saving any and all opened, unsaved documents. The Save As dialog box automatically appears for each document to be saved, and it is up to you (the developer) to spot the visual clue (dotted line) to understand which document is being saved at the time.

Tip

If you have other unsaved documents open, the dialog box appears for those documents as well, and you might not see any visual clue or might misunderstand what document you are being asked to save. For that reason, it's easier to develop your framed site with no other documents open at the time.

Using Save All is common when you have made changes to a page, frame, or the frameset, and it is not quite so tricky after the initial saves have been made.

With frames, you have the option to provide scroll bars. You can also determine whether a user can resize the frame dimensions and set the margins of the pages a specific frame uses. Careful setting of these and other frame properties is important because you may not know exactly how your pages will display in a user's browser. Ideally, you want to give the user as much control as possible without compromising your design.

Setting scrolling

By default, your frames have vertical and horizontal scroll bars unless you opt to control the way they appear. Your options include Yes, No, and Auto. Unless you know that your content will never need a scroll bar regardless of what the user's browser preferences are, choose Auto. However, if a frame uses only images that remain fixed whatever the user's preferences are, you may opt to not allow scrolling.

Resizing options

Frames can be resized by a user in his or her browser window unless you specifically set this option to No Resize. When borders are turned off, resizing a frame is much more difficult but still possible for the patient user.

Setting page margins

You already know how to change page margins for an HTML page by setting the page properties or using Cascading Style Sheets. You can control a page's margins at the frame level, too, for your convenience. To remove the default offsets for HTML pages, set the Margin Width and Margin Height fields to zero, just as you would at the page property level.


Working with Framed Documents

To work with pages within a set of frames, click into the document you want to develop. At that point, you have access to Page Properties and any other developmental tools available in Dreamweaver. It's best to work on your individual pages in the frameset because the Design view gives you an idea of how your pages will look in the browser. Of course, you should still preview the pages, because Design view doesn't show you how your pages appear in all browsers.

To preview a frameset and its framed pages, press F12 to access your primary browser, Ctrl/Command+F12 to access the secondary browser, or choose File ® Preview in Browser, and choose the target browser to use. If your pages have unsaved changes, Dreamweaver prompts you to save the frameset and pages before viewing. If you set up your application preferences to view the actual document (not a temporary document), you may be required to save before continuing the preview process.

Setting a title for the framed page

Because only one title can be displayed by the browser, the title for your framed pages must be set in the frameset document. To set a title for display by the browser, select the frameset and enter the title in the Title field in the Document bar above the page.

Tip

It's useful to set titles for all your framed pages even though only the title for the frameset document displays in the browser. Search engines give a high level of importance to page titles when cataloging sites.

Setting page background colors and images

Setting page colors for pages within frames is the same as setting page color for any HTML document. The code is contained within the <body> tag and is accessed in Dreamweaver via Page Properties.

You can also set a background color for the frameset document. The <body> tag for the frameset document is contained inside the <noframes></noframes> region. The <noframes> region is used to display content for browsers that cannot understand frames. More about <noframes> is covered a bit later in this chapter.

Tip

Set a page color for your frameset document to match the color your pages use to avoid the flash-of-color changes as your framed documents load.

Setting a background image for your framed pages is a simple process, but you must take special care when planning to have images that line up across frames. This is most apparent when background images use curves that intersect frames and must line up. Netscape 4x and earlier browsers render frames with extra margins along the bottom and right edges, even when margin width and height are set to zero. Try to avoid using close fits between frames, and be sure to test in all target browsers on all computer platform targets. If you plan to allow 10 pixels of space between frames and avoid curved intersections, you shouldn't have problems.


Linking to Framed Documents

The most common mistake made when developing framed sites is improper links targeting. By default, any clicked link (whether text or graphic button) calls a new page, which replaces the page that holds the link. This is standard link behavior but is not the ideal behavior for links in a framed site. If you have your navigation in one frame and want the pages to appear in a separate frame, you must target that frame.

Cross - Reference

Refer to Chapter 34 for more information on adding links to your pages.

About targets

The target attribute of a link specifies the frame or window in which the linked content opens. Dreamweaver generally offers four target options in the Target menu of the Property inspector: _blank, _top, _parent, and _self. The default target for all links is _self. A new window is launched with _blank. Both _parent and _top are often used with frames. When you are working within a frameset document, Dreamweaver adds your frame names to this list.

Setting link targets

Building a link in framed pages is the same as in non-framed HTML pages but may require target changes. Here are some possible target scenarios:

  • If the link you create should replace the current page that contains the link, you need not specify a target for the link. The default, _self, will be used.

  • If your link needs to load a page in a different frame, use the Target menu to specify the desired frame. Your frame names should be listed in the menu.

  • If you need a page to load and replace all the current frames, choose _top. Using _top overwrites all current frames and pages with the called page.

The _parent option is intended for replacing one frameset with another when the replaced frameset is the source page for an existing frame, as shown in Figure 38.6 If you are an experienced HTML coder, you may have used this target, but Dreamweaver doesn't generally build framesets in a way that accomodates its intended use. The proper setup of this kind of frameset is covered in the next section of this chapter.

Click To expand
Figure 38.6: You may target the frame or use _parent when your configured framed site doesn't use the standard Dreamweaver nested frames approach.


Building Complex Framesets

When you decide to use mixed row and column layouts, Dreamweaver assumes that you want to build nested framesets (a frame inside another frame). Figure 38.7 shows a standard nested layout. This is a pretty common layout for frames sites. You'd use the nested frame on the top to span across the column on the left.

Click To expand
Figure 38.7: A common nested frameset layout that places two columns in the bottom frame of a two-row frameset.

There are many options for complex nested framesets, but keep in mind that the more frames and the more complex the structure, the more difficult it is to manage the site. Targeting links becomes more complex.

Using Go To URL

When you use nested framesets, you cannot call a new frameset in to replace only two frames as described in the previous example because there's no existing parent/child relationship. So how can you change two frames with a single click? The answer is through JavaScript and the Go To URL behavior included in Dreamweaver's Behaviors panel.

To change two frames with a single click, follow these steps:

  1. If you haven't defined a new site for the chapter38_exercise folder, do so now. Open the Go2 folder and open the index.htm page. This layout uses nested framesets to build a left MainNavs frame, a SectionBanner for each site section, and a MainContent frame for each section's content. The links in the MainNavs frame are the main navigation for the site, with each section having its own banner and content.

  2. To change the banner and content frame with a single link, place your cursor into the About link text. Notice in the Property inspector that there is a null link added. A null link is required here to apply a behavior.

  3. Open your Behaviors panel and add Go To URL.

  4. In the dialog box that opens, select the frame SectionBanner. Click the Browse button, and locate aboutbanner.htm in the Go2 folder. Don't close this dialog box yet.

  5. Now select the MainContent frame and use the Browse button to locate and select aboutcontent.htm from the Go2 folder. You should now have an asterisk by two of the frames, as shown in Figure 38.8.

    Click To expand
    Figure 38.8: You can change multiple pages using the Go To URL method. Just select the frame and locate a page.

  6. Click OK to close the dialog box. Save and test the page. Clicking the About link should swap out the banner and content frames.

  7. Repeat the Go To URL method for the Home link, choosing the same frames but using the homebanner.htm and homecontent.htm pages.

Start Sidebar
Why Add No Frames Content?

Dreamweaver MX lets you specify content for older graphical browsers and aural or text-based browsers through the use of the <noframes> tag. If your site is simple, you may be able to build a single large page that incorporates all your content. Use anchor links to move the visitor up and down the single page into each section of the site. If your site is quite large, you may need to provide an alternative site that is not frames-based. In both cases, avoid simply providing a link to update the visitor's browser; many users have good reason to use a browser that does not support frames.

To access the <noframes> tag, choose Modify ® Frameset ® Edit NoFrames Content. The Design view is cleared, and you can add text and other content as desired.

End Sidebar


The New Document Framesets

The Dreamweaver New Document dialog box contains many useful frameset configurations all prebuilt and ready to roll. Their frames are sized and named, but you still have to save each page or use preexisting pages for frame sources.

To use one of the framed layouts, choose File ® New or press Ctrl/Command+N to open the Document Gallery. As shown in Figure 38.9, clicking the Framesets category offers many different configurations of simple and nested framesets. To see an example and explanation of each, select a frameset. To choose a specific frameset, select it; then click the Create button.

Click To expand
Figure 38.9: The New Document dialog box offers many frameset layouts.

When you have a frameset chosen, you can save the frameset and then its pages or use the Save All method described earlier in the chapter.


Summary

This chapter showed you how to build and save a frameset. You learned several methods to save your framesets and pages and explored the target attribute of links in your framed pages. You also learned how to build more complex framed layouts through the use of nested frames and without nested frames. To set links that work in complex frames, you learned how to use the Go To URL behavior and how to set up a parent/child framed layout that uses the _parent target. Several options for providing content to browsers that do not support frames were discussed.


Chapter 39: Building Navigation with Behaviors

Overview

To make your site really sizzle, why not add interactive navigation to your pages? Fireworks and Dreamweaver offer a totally integrated solution for building rollovers, navigation bars, and pop-up menus with a few simple clicks.

Powered by JavaScript, rollovers are graphic buttons that change their imagery — to indicate that the button is a clickable link — when users move their cursor over the button. Navigation bars are rollovers with a third (and sometimes fourth) graphic to indicate a selected or Down state. Pop-up menus are different from rollovers or navigation bars. They use DHTML or Dynamic HTML — JavaScript combined with Cascading Style Sheets — to generate submenus that appear on demand as visitors move their mouse over or click a text or graphic link. DHTML is covered in depth in Chapter 44, but the Show Pop-Up Menu behavior is covered here because it is an easy-to-use navigational system applied with the Behaviors panel.

The JavaScript that powers rollovers, navigation bars, and pop-up menus are functions that are native to Fireworks and Dreamweaver. This tight integration means that you can build your graphic elements in Fireworks and export them in a variety of ways for use in Dreamweaver. Or, as many developers do, you can export graphics only from Fireworks and build your navigation in Dreamweaver. However you prefer to work, both applications are maximized to make your workflow smooth and efficient.


Understanding Dreamweaver Behaviors

Dreamweaver uses JavaScript to power the interactive operations of rollover buttons, navigation bars, and pop-up menus and all other Dreamweaver MX behaviors. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then, if needed, specifying an event that triggers that action. The action is a JavaScript function — an orderly declaration of specific variables and methods that allow the Web browser to track and manipulate various page objects. Dreamweaver behavior code is client-side JavaScript code; it is written to execute in the browser on the user's computer.

Behaviors can be attached to the document (the <body> tag) or to images, links, form objects, or other HTML elements.

About events

Events are messages generated by the browser when the Web visitor does something, such as click a link, load a Web page, or move the cursor over a rollover button. When the event for an object that has one or more behaviors attached occurs in the user's browser, the behavior's JavaScript function is called and the action is executed. Many possible events can be set to trigger Dreamweaver behaviors. Figure 39.1 shows the different browser options available from the Show Events For submenu accessed by pressing the Add (+) button in the Behaviors panel. The second option — 4.0 and Later Browsers — is the most versatile and ensures that your page is viewable in a large range of browsers.

Click To expand
Figure 39.1: For greater browser compatibility, choose Show Events For ® 4.0 and Later Browsers.

When you apply a behavior, a default event is chosen. The type of event depends on the nature of the behavior and the object selected in the page. For example, when an image is selected, the event will read (onMouseOver). The parentheses surrounding the event lets you know that this behavior is attached to an image's anchor href. You can change the event associated with the behavior by selecting the behavior attached to the object. When the downward arrow appears, click it to select a new event from the menu that appears.

Dreamweaver behavior functions

Dreamweaver behavior functions are written in the head of the HTML document, surrounded by script tags and comments, as follows:

<script language="JavaScript">
<!--
(behavior functions here)
//-->
</script>

The script tag tells the browser to use JavaScript. The comments hide the JavaScript from browsers that do not support it.


Building Rollover Buttons

Rollover is the term used to describe the swapping of one image source (src) for another when the user moves (rolls) the cursor (mouse) over a graphic that has a JavaScript function attached to its link. The swapping occurs onMouseOver, and the second image is known as the Over state of the button. Rollovers are a great way to introduce additional information into a small space. You can even make one or both of your button states from animated GIFs.

Cross - Reference

See Chapter 20 for information about creating animated GIFs in Fireworks. Chapter 11 covers animation in FreeHand.

Inserting Fireworks rollovers

Fireworks MX Use Insert Fireworks HTML (Insert ® Interactive Images ® Fireworks HTML) to place rollover buttons created in Fireworks into Dreamweaver pages. If you designed your rollover buttons within a complete page design, export only the navigational elements as a separate Web page with graphics for use in Dreamweaver.

Cross - Reference

Use the Export Area tool in Fireworks MX to build a secondary file with your navigation rollover buttons and export both HTML and Images into your defined Dreamweaver site. See Chapter 21 for details on how to use this method.

To insert the Fireworks HTML rollovers, follow these steps:

  1. Place your cursor into your existing Dreamweaver page at the point where the buttons should be located.

  2. In the Common category of the Insert bar, click the Images icon and select Fireworks HTML. Or choose Insert ® Image Objects ® Fireworks HTML and use the Browse button to locate the exported Fireworks page.

  3. Click OK.

The code Fireworks generated to control rollover buttons is written in JavaScript. It's also compatible with Dreamweaver behaviors. To edit the behaviors attached to the buttons in Fireworks, follow these steps:

  1. Select the graphic to edit.

  2. Open the Behaviors panel and double-click the attached behavior.

Using the Swap Image behavior

Although using the Insert Fireworks HTML button is useful, it is often easier and faster to simply export your graphics from Fireworks and build your rollovers in Dreamweaver using the Swap Image behavior.

On the CD-ROM

Save the Habitat Alert39 folder from the chapter39_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, choose the Edit Site option in the Files panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site In the following steps, you use the project site to see how to apply the Swap Image behavior in Dreamweaver.

  1. Open the template (basic page.dwt) for the site pages from the Templates folder. This page contains graphics used as buttons, but they do not have any behavior attached.

  2. Select the first of the buttons (LEARN). Use the Property inspector to give this graphic a "name" that is used to reference the object in the browser. Name this image btn_learn. Name each of your button graphics using the same convention, starting with btn_ and using the text of the button. Names should be simple and contain no spaces or odd characters. You may use an underscore or hyphen. Names may not start with numbers.

    • btn_learn

    • btn_act

    • btn_support

    • btn_find

  3. Reselect the LEARN button and open the Behaviors panel (in the Tag Inspector panel group). Click Add (+) and select the Swap Image behavior.

    Naming your images is a smart thing to do. The Swap Image dialog box lists all images present in your page. If the images do not have names, they are listed as unnamed <img>, which makes them pretty hard to recognize!

    In the Swap Image dialog box, notice that the btn_learn image is preselected in the list of images. Dreamweaver assumes you are going to swap this image with another. In this case, Dreamweaver is correct.

  4. Click the Browse button to locate the Over state for the LEARN (btn_learn) button. Navigate to the chapter39_exercise\Habitat Alert39 folder that you saved to your hard drive and to the html\site\sharedimages\mainnavs folder. Select btn_learn_f2.gif and then click the OK button.

    Fireworks MXFireworks uses two frames to create the two states of a rollover button. Unless you set it otherwise, Fireworks exports the second frame's graphics (the Over state of the buttons), appending _f2 to the slice name, as explained in Chapter 21.

    The Preload Images and Restore Images on MouseOut (preselected options) add two more functions that are almost always required for a typical rollover. The first (Preload Images) ensures that the Over states of your buttons are downloaded and in browser cache, ready to be called by user events. The second (Restore Images on MouseOut) function keeps track of the original image and restores it when the user moves away from the button.

    Tip

    Uncheck the preload function when developing rollovers that use animated GIFs. If your animations preload in the background, the browser may start the animation on the frame that is currently loading rather than from the beginning.

  5. Click OK to set the rollover. Repeat Steps 2 to 5 for each button, selecting the appropriate Over state from the mainnavs folder.

  6. Save your page. Because this is a template, you are asked to update all pages that use the template. Click Update. Preview the updated pages in a browser to test the rollovers for each button.

Editing a Swap Image behavior

If you make a mistake and select the incorrect graphic or want to change the Over state of your graphic, it's easy to edit the behavior and choose a different image. First, select the graphic to edit. In the Behaviors panel, double-click the Swap Image behavior listed for that graphic. Use the Browse button to select the correct graphic.

Rollover links

These buttons have links preset in the exercise files, but it is possible that when you build rollovers you may not have pages to link to. Because a link is required to attach a behavior to an image, Dreamweaver adds a null link to your image when a link is not present.

When you are ready to change the null link to a real path to a page, select the button and use the point-to-file method to select the target page.

Removing the Swap Image behavior

To remove an attached behavior, first select the object to which the behavior is applied. In the Behaviors panel, highlight the selected behavior and click the Minus (–) button or press Delete to remove it.


Building Remote Rollovers

Remote rollovers — also known as disjoint rollovers or multiple-event rollovers — are graphics that use the Swap Image behavior to trigger an image swap for a graphic rather than the triggering button graphic. Remote rollovers are useful because they allow more than one image to display in a single location — triggered by users moving their cursors over different button graphics.

To incorporate remote rollovers into your pages, use the Swap Image behavior. You can set up a remote rollover to work in conjunction with existing rollover buttons or as a separate interactive element.

Adding remote rollovers to existing rollover buttons

The key to adding a remote rollover when you already have rollover buttons set up in your page is to add to the existing Swap Image behavior rather than add a new Swap Image function. To do this, you edit the existing attached behavior for each button.

Habitat Alert site In the following steps, you add remote rollovers to the Habitat Alert page provided for this exercise. This page contains existing rollover buttons as added in the previous rollover buttons exercise. In this exercise, you use the image in the circle as a region to add a remote rollover:

  1. In your Chapter 39 defined site, open the Basic Page.dwt template file.

  2. Select the circle image (the bird) and name it remoteinfo using the Property inspector.

  3. Now select the LEARN button (btn_learn) and go to the Behaviors panel to edit the attached Swap Image behavior. Double-click the Swap Image behavior to open it.

  4. Click the image list to locate and select remoteinfo.

    Tip

    When you try to select a new image from the list of images in the Swap Image dialog box, a small bug in the program pops the list back up to the preselected button image. To work around this, click into the list anywhere, locate the desired image, and select it. While annoying, this bug is not serious.

  5. Click the Browse button and navigate to remoteimages folder inside the sharedimages folder. Locate and select the learn.jpg image.

  6. Notice that two of the images listed have asterisks beside them. The asterisks indicate that an image swap will occur for this image. Click OK.

  7. Repeat Steps 3 through 6 for each button, each time opening the existing rollover's Swap Image behavior and selecting remoteinfo in the list before clicking the Browse button to choose the correct image from the remoteimages folder.

  8. Save and test this page. Move your cursor over the buttons to view the remote rollovers. Figure 39.2 shows the image that swaps into the circle when you move the cursor over the LEARN button. The Home location image won't show because you are viewing the template.

    Click To expand
    Figure 39.2: The circle image swaps as you move your cursor over the buttons.

    Tip

    The more thought put into your remote rollovers during the design process, the more useful they'll be to your site visitor. If you chose an image that conveys what will be found in a site's section, your remote rollover provides clarity for the user. You can even incorporate graphic text into images to explicitly state what might be found in the section.

    Every image increases the overall download time for your page. The clarity those graphics provide isn't useful if the user gets tired of waiting for the download to end.

Other remote rollover options

Existing rollover buttons are not required to set up a remote rollover. You can trigger an image swap for any image on your page by moving your cursor over any link, image, or text. Two things are required:

  • An image, named and surrounded by an <anchor> tag, must already be present in the page.

  • A remote link, text, or graphic must be selected to add the Swap Image behavior.

You cannot use the Swap Image behavior to make an image appear where no image already exists; this behavior swaps only the image src. But any link can be used to trigger the remote rollover.

To set up a remote rollover in this fashion, place your cursor into the triggering link, add the Swap Image behavior, and select the named image that should be swapped. Click the Browse button to locate the correct image and click OK.

Also, be sure that all the images used for the swap have the same dimensions as the original image. Only the src swaps; width, height, and all other attributes remain the same. This is true for rollover buttons as well.


Building Navigation Bars

A navigation bar differs from a set of rollover buttons because it keeps track of which button is clicked or selected. Navigation bar elements (buttons) can have more than two states. The common states are the Up and the Over states, but you can add a third state of Down and, sometimes, even a fourth state of Over while Down. Only the Up state is required. Whether you opt to build the navigation bar in Fireworks or export the images and build the bar in Dreamweaver, the Set Nav Bar Image behavior powers the navigation bar's interactive elements.

Caution

The Navigation Bar Object and the Set Nav Bar Image behavior contain several wicked bugs at the time this book was written. Macromedia may have released an updated version that addresses these bugs. Check at www.macromedia.com/support/dreamweaver. If there isn't an update or it doesn't fix the bugs, be sure to look for Caution notes about the bugs in the following paragraphs.

Adding Fireworks navigation buttons to a Dreamweaver page

Fireworks MX If you've built and coded your navigation buttons in Fireworks and exported them, you can add the buttons with the rollover code in tact into a Dreamweaver layout. Refer to Chapter 21 to learn how to export an area if you want to use just the navigation area of a site you designed in Fireworks. In Dreamweaver, place your cursor where you want to insert the navigation you built in Fireworks. Choose Insert ® Interactive Images ® Fireworks HTML. Navigate to the HTM file that you exported; then select and open it. It'll be placed into your layout.

Building a navigation bar in Dreamweaver

Most professional developers prefer to export only the images for the button states from Fireworks and build their navigation bars in Dreamweaver. There are two options for adding a navigation bar, the Set Nav Bar behavior or the Navigation Bar object. The Navigation Bar object, located in the Common toolset of the Insert bar, provides a simple, one-screen interface for adding the different button states for each button in the navigation bar.

Click To expand
Figure 39.3: Name your button elements and select their button states. Add alternate text and locate the page for each button link. Click the Add (+) button to move to the next element of the navigation bar.

The Insert Navigation Bar dialog box, shown in Figure 39.3, provides fields for naming your bar elements and Browse buttons to locate the various states for each button. You can also add alternate text and a URL link and set a target frame for navigation bar buttons used in a framed site. Use the Show Down Image Initially option to display the Down state of the button for the current page. For example, if you have a set of four buttons plus a home button, you would set the home button to be down initially on the home page only. Click the Add (+) button to move to the next element of your bar, and repeat the process of naming the button and adding the buttons states, URL, and alternate text. When you build the navigation bar in a section page, set that section's button to be down initially, too.

At the bottom of the dialog box, you can indicate whether your navigation bar is to be inserted horizontally or vertically and can also choose to add it within a table structure. When you click OK, the navigation bar is inserted into the page.

Using navigation bars in framed sites

Navigation bars are especially useful in framed sites because a single page can be used to indicate where the user is within the site. JavaScript maintains the button states, eliminating the need for multiple pages to display down buttons when in a site section. In a framed site, be sure to choose the target frame when setting the When Clicked, Go to URL link. The menu to the right of this field should display your named frames.

Tip

If the frame you want to target doesn't appear in the menu to the right of the URL field, close the Insert Navigation Bar dialog box and name your frames.

Using the Set Nav Bar Image behavior

When your pages already contain the buttons you want to use for a navigation bar, use the Set Nav Bar Image behavior to add navigation bar functionality. Instead of adding the buttons as elements in a single dialog box, select a button and use the Behaviors panel to add the Set Nav Bar Image behavior. Any names, alternate text, or targets already existing for the selected button populate the appropriate field in the Set Nav Bar Image dialog box.

Caution

If your buttons already contain links, adding the Set Nav Bar Image behavior may actually create a nested anchor tag. This is invalid HTML and should be fixed. To work around this, remove your page links before adding the behaviors to the buttons.

To add navigation bar functionality using the Set Nav Bar Image behavior, follow these steps:

  1. Select a button element.

  2. Use the Behaviors panel to add the Set Nav Bar Image behavior.

  3. In the Basic screen of the dialog box, use the Browse button to locate the various states for this button.

  4. Add alternate text, a URL, and a target, as desired.

  5. If working in the page that is the URL for this button, add a check in the box to set this button to Show Down Image Initially.

  6. Click OK.

  7. Repeat Steps 1 through 4 for each button. Perform Step 5 for a button only when building the navigation bar in the page that is the target of the button.

    Tip

    To avoid having to rebuild the navigation bar in all your pages, try building the bar as a library Item; then add the item to the site pages. You won't be able to set the initial Down state for buttons until you detach the library Item, of course.

Navigation bars and templates

Using a navigation bar in a template (DWT) file is problematic; ideally, you want the region to remain locked until you have the pages for the site built from the template. But, if the region is locked, you cannot change the initial Down state for the various buttons on their pages.

Although there may be complex, code-intensive methods to accomplish setting an initial Down state for a navigation bar in a template, it is easier to fake the navigation bar appearance and not use the behavior at all.

Habitat Alert site Here's a workaround to mimic a navigation bar in the Habitat Alert site using editable attributes and building nested templates for each section:

  1. In the Chapter 39 defined site, open basic page.dwt from the Templates folder.

  2. Select the LEARN button (btn_learn) and choose Modify ® Templates ® Make Attribute Editable.

  3. The SRC attribute should be selected, but if not, choose it from the Attribute menu. Check the Make Attribute Editable box. Name this editable attribute learn button src.

  4. From the Type menu, choose URL because an image src requires a path. The path given is correct, and you don't have to modify it. Click OK to close this dialog box and be prepared to see your button image become a placeholder image. This is as intended because the previous path is replaced by a parameter, written as @@(_document['learnt button src'])@@.

  5. Repeat the process for the remaining three buttons, using the same naming convention with each button: act button src, support button src, and find button src.

  6. Save the template and update the pages when prompted.

  7. Open the instance pages and choose Modify ® Template Properties. Select the appropriate Editable Attribute for the page, and change the path by appending _f2 just before the extension.

    Fireworks outputs the Over state as _f2; you know that this is all you need to make the proper path to the image used for the Over and Down states. In Chapter 43, you want the selected button graphic to remain selected as a DHTML menu appears below it.

    The resulting pages use the second graphic when they load, letting the users know that they are in that section, while maintaining a locked set of navigation buttons in the template. Figure 39.4 shows the main page from the Act section of the Habitat Alert site after the Editable attribute is set up.

    Click To expand
    Figure 39.4: The Down state of the button reinforces the current location in the site.

    Cross - Reference

    The next step would be to build nested templates from the instance pages, as described in Chapter 36, so that all pages built for a specific section would have that section's navigation button in the Down state.


Building Pop-Up Menus

A pop-up menu is a set of links created on the fly or on demand when the user moves the mouse over or clicks a link. The pop-up menu is stored as a JavaScript array — an ordered collection of one or more pieces of data — and is powered by a complex set of functions stored in an external JavaScript (.js) file. The external file is named mmmenu.js. You can use Fireworks, and Dreamweaver can be used to build a pop-up menu, but Fireworks can build one that uses a graphic background image stored as a CSS style. Dreamweaver can build only text-based pop-up menus.

Pop-up menus have advantages. One major advantage is that the menus (and submenus) don't take up screen real estate until the user requests the menu by moving the mouse over or clicking a link. Another distinct advantage comes from the use of submenus; your navigation system can drill down into your site, giving users one-click navigation to the page of their choice, right from the home page of the site.

On the down side, pop-up menus use advanced JavaScript and Cascading Styles Sheets, so only version 4+ browsers may be used to view the menu. Not all browsers render CSS faithfully — as in the case of Netscape 4x (both Macintosh and Windows platforms) and Internet Explorer 5 (Macintosh platform).

If you decide to use a pop-up menu, take heart: Building these complex creatures is a lot easier in both applications, and the JavaScript functions — Show and Hide Pop-Up Menu — are native to Dreamweaver, making editing your menu a snap.

There are three possible methods for creating a pop-up menu using the native Pop-Up Menu behaviors:

  • You can build your pop-up menu entirely in Fireworks, export HTML and images, and use the page in a Dreamweaver site.

  • You can build a menu in Fireworks, crop to the menu buttons, and export the HTML and images for later insertion in Dreamweaver MX using the Insert Fireworks HTML object.

  • You can build the entire menu in Dreamweaver. With this option, you are limited to text-only menus and cannot add a background image to the buttons of the menus or submenus.

Using a Fireworks pop-up menu

Fireworks MX If you design and export the entire pop-up menu from a Fireworks file, you can open the page in a Dreamweaver site and edit the menu. Fireworks pop-up menus have the option to use a background image for each table cell of the menu arrays. Dreamweaver doesn't offer this option because it cannot create images as Fireworks can: To edit the images used in a Fireworks pop-up menu, you have to edit in Fireworks. Fortunately, the integration between the two programs is tight and you can trigger the edit from Dreamweaver

Editing the image-based pop-up menu

Fireworks MX An image-based menu uses a background image in the CSS for the button arrays. This image can only be edited in Fireworks. Select the menu button graphic you want to edit, and click the gold Edit button (Fireworks icon) in the Property inspector. This opens Fireworks, where you can make your changes. Click the Done button. The image is saved and you are returned to Dreamweaver. You can edit other properties of the pop-up menu in Dreamweaver. These properties are covered in the following paragraphs. Figure 39.5 shows the four screens you use within Fireworks to edit your menu.

Click To expand
Figure 39.5: The Contents, Appearance, Advanced, and Position screens in the Fireworks Pop-Up Menu Editor are used to modify the menu items.
Caution

You must have Fireworks installed to edit a Fireworks-based pop-up menu.

Dreamweaver asks whether you want to edit the source file for the image or just modify the current GIF or JPEG file. Because you want to rework the images used in the menu, choose to open the entire file.

Cross - Reference

See Chapter 18 for details about creating, modifying, and exporting a Fireworks pop-up menu.

When you've located the source file, Dreamweaver launches the Fireworks application in Edit from Dreamweaver mode.

Note

You must have Fireworks selected as the primary editor for images in your Dreamweaver preferences in order for the editing process to work. To set this up, choose Edit ® Preferences and select the File Types/Editors category. The PNG, GIF, and JPEG file types should all have Fireworks as the primary editor. If you installed all the programs from the Studio MX 2004 CD, this is probably already set up.

Inserting a Fireworks MX pop-up menu into an existing Dreamweaver page

Most developers will tell you that the main reason to build and export your pop-up menu from Fireworks is to be able to use the Images option, but you need not use the entire page. Similar to any other Fireworks-created elements, you can crop to only the elements you want to use and export them as a separate page with graphics. Using the Insert Fireworks HTML object (button), you can insert the pop-up menu into your existing Dreamweaver pages.

Habitat Alert site In this section you add a pop-up menu to a sample Habitat Alert page to learn to add the Fireworks-based menu to your Dreamweaver page:

  1. Open the page popup_test.htm from the Habitat Alert39\html\site\ folder.

  2. Insert your cursor into the table cell where the navigation buttons are normally found in the site pages.

  3. Click the Fireworks HTML from the Images icon in the Common category of the Insert bar, or choose Insert ® Interactive Images ® Fireworks HTML; then click Browse in the dialog box that opens to locate Chapter 39\html\site\popup_menus\popup.htm. Leave the Delete option unchecked.

    When the dialog box closes, check out your new pop-up menu by previewing it in a browser. This menu's links aren't set up and won't work, but you should be able to trigger the menu and submenus by rolling your cursor over the site menu button.

  4. Close the browser and return to Dreamweaver. To insert the menu into another page, repeat the process.

    Tip

    When building your pop-up menu in Fireworks, don't add the URLs to pages. It isn't likely that you know the correct paths anyway, and it is far easier to select the proper pages in Dreamweaver. In any case, the paths are contained within the arrays in the head of each page using the menu. The path structures added in Fireworks would not be correct unless every Dreamweaver page using the menu is at the level within the site's directory structure.

Editing a Fireworks-based pop-up menu in Dreamweaver

Fireworks MX To edit everything except the images used in an image-based pop-up menu or to edit a text-based menu made in Fireworks, use the Show Pop-Up Menu behavior attached to the menu's button(s). Select the button for the pop-up menu and double-click the Show Pop-Up Menu behavior (in the Behaviors panel). The resulting dialog box is similar to the Pop-Up Menu Editor in Fireworks but does not contain the option to use images.

To edit the text for the menu choices, edit in the Contents screen, as shown in Figure 39.6. To edit an item, select the item, and change its text in the Text field. To change the location of an item, select the line and press the up/down arrows to reposition the item. This is different than the method used in the Fireworks Pop-Up Menu Editor, where you simply select the item and drag it up or down in the menu.

Click To expand
Figure 39.6: The Contents screen is where you edit menu items, including their URLs.

Changing the URL link

Another difference you'll see when editing a Fireworks pop-up menu in Dreamweaver comes when changing the URLs for your menu items. In Fireworks, you must hand-code the path structure or have a URL library available to select the path from the menu given. In Dreamweaver, you edit the URL by selecting the item in the Contents screen and clicking the small folder icon (Browse for Folder button) next to the Link field.

You can also hand-edit the code to change the link for any of your pop-up menu's items. The URLs are contained in the arrays used to generate the dynamic menus and are found in the head of the page containing the pop-up menu. Figure 39.7 shows where to look for the URLs for your main items; the URLs for the submenu items are easy to spot.

Click To expand
Figure 39.7: The arrays contain the URL for each menu item, among other properties.

If your menu is used in pages that are at different levels in your site, you will have to edit each menu to have the correct path structures.

Using an inserted menu in a template

Because template operations rely on document-relative path structures, using a pop-up menu in a Dreamweaver template is a difficult and limited process. However, it is possible if you understand the restrictions:

  • Fireworks pop-up menu elements (the HTML page, images, and external mm_menu.js file) should all be exported to the root level of your site.

  • The template file in which you insert the pop-up menu using the Insert Fireworks HTML object does not display the pop-up menu properly. However, pages based on the template, which must all be saved in the same folder as the original exported Fireworks page and external .js file, should behave as expected.

Building a pop-up menu in Dreamweaver

If you don't plan to use an image as the background for your pop-up menu items, building the pop-up menu in Dreamweaver MX 2004 is easy. You use the Show Pop-Up Menu behavior. A text or graphic button is used to trigger the pop-up menu.

To build a pop-up menu, follow these steps:

  1. Click the Trigger button.

  2. Click Add (+) in the Behaviors panel to add the Show Pop-Up Menu behavior.

  3. In the dialog box, add the items you need for your main menu and any submenus, as shown in Figure 39.8. To create a main menu item, type the item's text into the Text field. Add the next item by clicking the Add (+) button. To make an item part of a submenu for a main item, use the Indent button. To outdent an item, use the Outdent button.

    Click To expand
    Figure 39.8: The Contents screen in the Show Pop-Up Menu dialog box lets you enter the text and format your main menu and submenu items.

  4. To move an item's location, select it, and press the up/down arrows. Submenu items associated with a main menu item move when the main menu item is moved.

  5. To select the page called when the user clicks a menu item, click the Browse for Folder icon located to the right of the Link field.

  6. To change the text, link, or target of an item, select the item and make the changes. Tabbing or clicking another menu item forces the update in the list of menu items.

  7. When your menu items are set, click the Appearance tab to enter the Appearance dialog box, where you set the formatting of your pop-up menu, choosing font, size, alignment, and color options. You also have the option to create a vertical or horizontal menu. An approximate preview helps you decide how to format the menu.

  8. Click the Advanced tab when you are satisfied with the appearance of your pop-up menus. This dialog box offers a wide range of controls for your pop-up menu. You can let the size of your menus be automatically set (default) or set the width and height in pixel values. You can also determine cell padding or spacing, control the indent and timing of the menus, and set border properties.

  9. Click the Position tab when you are finished setting the advanced menu properties. You set the menu positions by clicking one of the four position buttons. Although it's not entirely clear, the blue-green element in the examples displayed represents the pop-up menu, and the boxy element is the button. You can also position the menus by entering x,y values.

  10. Click OK when the menu(s) are positioned.

  11. Save and test your menu in a browser.


Summary

In this chapter, you learned to build and edit the most common types of navigation elements using Dreamweaver behaviors. You learned how to do basic rollover buttons, as well as disjoint rollovers. How to insert navigation buttons that were exported from Fireworks was discussed. You also learned how to add the Nav Bar behavior to the Fireworks buttons. Not only did you see how to use Fireworks buttons, but you learned how to use the Nav Bar behavior in Dreamweaver. The chapter wrapped up with adding Fireworks and Dreamweaver pop-up menus.


Project Summary

The exercises in this chapter modified the navigation for the Habitat Alert Web site, adding rollovers to the original basic page template. You set editable attributes for the main navigation buttons. When the pages based on the template were updated, modifying the template properties let you set a Down state for the button of the current page.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done
Templates\basic page.dwt | Rollover buttons were added to the template, and updating the template added them to the pages based on the template. Editable attributes were set for the buttons to allow editing of the button graphic src.
index.htm | Rollovers added.
learn\index.htm act\index.htm support\index.htm find\index.htm | Rollovers added and each button's image src was set (in the page for that button) to the _f2 graphic to give the appearance of the button being selected
Templates\act page.dwt Templates\learn page.dwt Templates\support page.dwt Templates\find page.dwt | Though not specifically done in this chapter, building nested templates from the updated index pages in the act, learn, find, and support folders is a logical next step.


Chapter 40: Inserting Media Elements

Overview

Adding audio and video files, Flash buttons, and scrolling text can spice up your Web sites. Add a Java applet to create scrolling text. Although sound and movie files can add to your page's download time, giving your site's visitors access to multimedia can enrich and enliven their experience. With careful design and optional links, the user can choose to view or listen to your files — or not.

Flash buttons and text can be added to your pages right in Dreamweaver. These scalable, easy-to-use Flash elements make button building without using a graphics program possible. Adding Flash movies that can contain sounds and interactivity, and even connect to a database increases the value of your site. Dreamweaver MX 2004 makes it easy to insert a Java applet into your site as well. Java applets can provide amazing functionality that just isn't an option any other way. New to Dreamweaver MX 2004 are Flash elements. An Image Viewer ships with Dreamweaver, and you'll see how easy it is to make a Flash slide show right in Dreamweaver!

Media objects require a browser to use plug-ins or helper applications — programs that are recognized automatically by the browser. In this chapter, you look at inserting media objects that require the use of plug-ins — Flash and QuickTime — as well as media presented through ActiveX and Java.


Working with Flash Buttons, Text, and Flash Elements

Macromedia Flash MX 2004 delivers vector-based graphics and animation powered by complex client-side and server-side logic. But you don't need Flash MX 2004 to do this; you can tap into some Flash content right in Dreamweaver MX 2004. There are three different types of Flash files:

  • Flash Authoring File (FLA) — The source file for a Flash project, this is created using Macromedia Flash. As a source file, it cannot be used by Dreamweaver and will not display in a browser.

  • Flash Movie File (SWF) — The compressed output of the FLA source file. Optimized for viewing online, an SWF file can be previewed in Dreamweaver and in a browser. This file cannot be edited in Flash; however, because the source information is removed when the SWF movie is created. Flash buttons and text placed into HTML pages with Dreamweaver are SWF files.

  • Flash Component File (SWC) — New to Flash MX 2004 is the SWC format, which is for compiled components. One is included with the shipping version of Dreamweaver; it's in the Flash Element category of the Insert bar and in the Flash Image Viewer.

Inserting Flash buttons

If you want a Flash button in your design without the fuss of making a Flash movie, the Flash Button component is the answer. Through the Insert bar's Media tab, you can choose, modify, and insert Flash buttons into your saved HTML page. Flash buttons are scalable. As vector graphics, changing the width and height of the button causes the output of the button to be re-rendered, without any resulting degradation of the graphic. You can insert a Flash button object in Design or Code views.

To insert a Flash button, you have two options:

  • You can choose Insert ® Media ® Flash Button.

  • You can use the Media toolset icon in the Common category of the Insert bar. Click the Flash Button object.

Both methods open the Insert Flash Button dialog box, where you can review, select, modify, and insert a Flash button.

Flash button options

The Sample field displays the button options available to you by default in Dreamweaver MX 2004. To review the available buttons, highlight a button style by selecting it in the Style list. After you click the Styles list, you can use your up and down arrow keys to move through the items. Move your cursor over and/or click the sample button display to see or hear any animation and/or sound associated with the button. Set a font choice, font size, and other options, as shown in Figure 40.1. Set the URL link and Target (if you are using frames or want your button to open a file in a new window), and choose a background color to match the color in the HTML document. You can opt to keep the default name automatically suggested by Dreamweaver or give the file a different name, but button SWFs must be saved in the same directory as the current file to maintain the document-relative links.

Click To expand
Figure 40.1: The Insert Flash Button dialog box options.

When your Flash button is selected and customized, click OK to close the dialog box and insert your button.

Tip

You may add more Flash button choices by clicking the Get More Styles button within the Insert Flash Button dialog box, which will take you to the Macromedia Exchange Site, where more buttons styles are available for download.

Flash text

Flash text objects function like Flash buttons. They, too, are scalable vector files and are quite versatile because, unlike a GIF or JPEG graphic file with set dimensions, you can resize a Flash text object in the actual HTML file without destroying the quality of the graphic. The options for Flash text are shown in Figure 40.2.

Click To expand
Figure 40.2: Flash text options.

To create a Flash text object, choose Insert ® Media ® Flash Text. Choose a font and text size (in points), and set the text color. Additional options — Style and Align — are available for formatting your Flash text object. You can also choose a rollover color. Set the background color to match the area of the page where you are placing the text object by clicking the color swatch and sampling the open document. Click Apply to see your formatting selections in the document prior to clicking OK to insert the object.

Browse to set a link URL. Although a Browse button is available to locate a directory in which to save the object, Flash buttons and text should always be saved to the same directory as the file in which they are used. Site root-relative links are not accepted because browsers don't recognize them within Flash movies.

Flash elements

New Feature

In the Insert bar, the Flash Element category is new to Dreamweaver MX 2004. Dreamweaver ships with just the Image Viewer. Be sure to check out the Dreamweaver Exchange for other elements developed by third parties. As you'll see, this new feature opens many doors for creating Flash elements right from within Dreamweaver. The basic component is made, but you can edit the properties and attributes in Dreamweaver.

To create an Image Viewer, have a folder of images available or have a database with images in it that you'd like to make a slide show with. To add the Image Viewer to your document, follow these steps:

  1. Insert your cursor where you'd like to insert the Flash Image Viewer.

  2. Select the Flash Elements category in the Insert bar.

  3. Click the Image Viewer icon.

  4. Navigate to the location where you want to save the SWF movie you'll be creating. Name it and save.

  5. You'll see a gray placeholder in the document. It should be selected, but if it isn't, select it.

  6. Look in the Tag inspector. You'll see all the attributes you can change, as shown in Figure 40.3.

    Click To expand
    Figure 40.3: The Flash Image Viewer added to a new page.

  7. For instance, click the Color box to the right of bgcolor. Select a color for the background. Repeat for all the other attributes.

    Note

    If you have a database with images and captions in it, you can use dynamic data to access the images and captions from your database. Refer to Chapter 46 for information on dynamic data.

  8. Save your HTML file.

  9. Preview by clicking the Play button in the Property inspector. Also note that you can change the dimensions and quality here as well.

  10. Upload the HTML file and the SWF movie you created.


Using Sound in Your Site

If a picture is worth a thousand words, what's a sound worth? It can be worth a lot, enriching the visitor experience greatly. But adding sound to your site pages presents a list of issues related to file types, plug-ins, and helper applications that vary from browser to browser and from platform to platform.

A Web browser needs information about the type of content it is expected to render. Multipurpose Internet Mail Extension types, or MIME types, form a standard way of classifying file types on the Internet. Web servers and browsers all have a list of MIME types, so that they can transfer files of the same type in the same way, no matter what operating system (platform) they are working from. A properly configured browser opens the file in the browser (for example, HTML), plug-in (such as QuickTime or Flash), or helper application (such as Adobe Acrobat or Windows Media Player).

The developer's reality is that different browsers support different media types, and unfortunately, no browser supports every type of media available. Therefore, browsers make use of plug-ins and helper applications. Plug-ins are software programs that extend the capabilities of browsers in a specific way, giving you, for example, the ability to play audio samples or view video movies from within your browser. Internet Explorer browsers also use Active X technology (controls) to support different media and file types. Helper applications are programs that are assigned to handle multimedia file formats (audio, video, images, and so on) that a Web browser itself does not understand.

Many plug-ins begin their existence as helper applications but evolve to the plug-in method to provide a more seamless Web experience. Helper applications and plug-ins enhance the functionality of a browser, but helper applications are separate programs. The disadvantages of helper applications are as follows:

  • The user may need to wait for the application to load.

  • The user might not have enough memory to run a helper program.

  • In some browsers, helper applications or plug-ins may open in a separate window.

Additionally, sound files can be quite large and slow to download unless you use a specific compression format that optimizes the file for the Web. Compare, for example, an audio track (Acoustic Alchemy) created by Jason Leroy Finnern (SonicMint.com), found in the Chapter 40 CD files in the sound folder. The track is a folk-style guitar loop with one file in the WAV format and the other in MP3. The WAV file is 1.37MB (1,442,988 bytes), far too large to expect the average Web visitor to download. By the time the file is completely downloaded, the user would have moved on to a different page. But the same loop in the MP3 format is surprisingly small — only 128KB (131,690 bytes) — and can be used quite easily as a background sound because the MP3 format streams. Streaming is when a file can begin to play before all its content is downloaded, a useful feature for Web content because connection speeds can vary so widely across a target audience. Finally, it may be even better to add your sound file to a Flash movie and to insert that into your pages. Flash media is handled exceptionally well by most browsers and the same WAV file inserted into Flash MX, then exported as an SWF file that compresses the sound using MP3 technology results in the file being only 16.6KB (17,027 bytes), small enough to be easily downloaded, even by site visitors with slow dial-up connections.

Start Sidebar
Sound File Formats

WAV (Waveform Extension) is the default Windows system sound file format. WAV files are supported by most modern browsers but can be quite large, even with a short sound. They do not require a plug-in but are handled by a helper application.

AIF/AIFF (Audio Interchange File Format) is the default Macintosh system sound format. It has good quality and can be played by many browsers. AIFFs also are handled by a helper application and don't require the use of a plug-in. However, the relatively large file size of AIFF sound files limits their use in Web pages.

MID/MIDI (Musical Instrument Digital Interface) is a musical instrument file that is basically a set of instructions to your computer to use specific instruments to create digital music. MIDI files are surprisingly small for their relatively long sounds and do not require the use of a plug-in.

MP3 (Motion Picture Experts Group Audio or MPEG-Audio-Layer 3) is a specially compressed file format that was created specifically for Web use. The sound quality is superb for its super-small file size, and MP3 files stream — playback of the sound can begin before the entire sound is downloaded. However, a helper application or plug-in, such as Windows Media Player, QuickTime, or Real Player, must be installed and used to play back the file in the browser.

RA/RAM/RPM (Real Audio) files, like MP3 files, are highly compressed and result in very small file sizes, but their quality is nowhere near that of an MP3 file. A helper application or plug-in is required for use in Web pages.

AU/SND (or Sun or Java format) is similar to WAV and AIFF formats, only AU compression is more flexible. The AU format is used primarily within Java applets and is popular with Sun/Unix platforms.

End Sidebar

Linking to an audio file

Linking to an audio file is the easiest way to incorporate a sound file into your Web page and has the added benefit of letting the user opt to listen to the sound. An even better reason to link to the file is that it doesn't load with your page — slowing it down — but loads only when clicked on. To link to an audio file, select a text or button link; then use the Property inspector to locate the file with the link's Browse for File button. It is generally considered good form to let the Web visitors know the file download size so that they may make an informed decision about clicking the link that plays the file.

Embedding an audio file

To use a sound file as a background sound that loads automatically when the page does, you need to embed it. The <embed> tag references the audio file and a means of playing it, generally a plug-in or helper application. Commonly used plug-ins or helper applications are Windows Media Player, QuickTime Player, and the RealOne Player.

To embed an audio file, work in Design view and use one of these methods:

  • Use the Insert bar's Media toolset and click the Plug-in object button.

  • Choose Insert ® Media ® Plug-in; then navigate to locate your sound file.

Embedding the file includes setting certain properties the browser needs to control the appearance of the controller for the plug-in. For example, Width and Height, Align, Vspace and Hspace, and Border all affect the controller used by the plug-in. The Src field lists the path to the sound file. Add a URL to the Plg Url to set a location where the browser looks for the plug-in if the user does not have it installed. You can also click the Play button to view (listen to) the file in the Dreamweaver document.

Downloading sound-related plug-ins

Here's an exercise to embed a sound loop into your HTML page. Be sure to define a site and copy the Chapter 40_exercise files from the CD into your root folder before attempting the exercise.

Note

PC users take note that when you define a site and copy a file from a CD to the root folder, those files will be locked and read-only. To enable editing of HTML files copied to your site, select the root folder and choose File ® Turn Off Read Only from the File menu at the top of the Files panel.

This exercise uses the audio track "Acoustic Alchemy" created by Jason Leroy Finnern, at SonicMint.com:

  1. Open the page sound/index.htm from the Files panel (window). Click the page.

  2. Choose Insert ® Media ® Plug-in, and in the dialog box that opens, navigate to the Sound folder and select AcousticAlchemy.mp3. The path structure should be set to document-relative. Click OK. You should see an icon that looks like a puzzle piece, which represents the embedded object.

  3. With the object still selected, look at your Property inspector. In Figure 40.4, the values you see are modifiable; for example, the 32x32 W and H are the default settings for the width and height of the controller. If you want the controller fully visible, increase the settings to something like 144x60; then view your page in Internet Explorer and Netscape.

    Click To expand
    Figure 40.4: The sound file and plug-in properties.

    Most users like to be able to control the sound for a page, so giving them the controller is suggested, but if you don't want the user to have it, there are methods for hiding the controller. For example, you might try setting the W and H values to zero, but be sure to test the page in your target browsers to be sure that they accept zero values.

  4. If the visitor doesn't have a plug-in that can handle the embedded sound, the browser uses the URL you provide in the Plg Url field to download the appropriate plug-in.

    Here are the URLs for some of the more popular plug-ins:

    • Shockwave — www.macromedia.com/software/shockwaveplayer/index.html

    • Flash Player — www.macromedia.com/software/flash/

    • QuickTime Player — www.apple.com/quicktime/

    • RealPlayer — www.real.com

    • Beatnik — www.headspace.com/beatnik/

    • VivoActive Player — www.vivo.com/products/playfree/vaplayer.html

  5. Set the Border property to 0.

  6. Now save this page and keep it open for the next exercise.

Setting parameters for embedded audio

Parameters are attribute settings passed to the browser. Width and height are parameters, too, but Dreamweaver MX 2004 lets you edit those from the fields in the Property inspector. Other parameters are typed into the dialog box you can access by clicking the Parameters button. For example, to have your background sound file play over and over, you would add the paramether LOOP and set its value to true. Different plug-ins respond to different parameters. For example, the VOLUME=10% parameter is honored by Netscape 4x but not Internet Explorer 6x, because it uses the Windows Media Player to play the sound file.

Following are some commonly used parameters:

  • AUTOSTART=TRUE — This starts the sound playing as soon as it loads. Most plug-ins have built-in keyboard shortcuts, and those could be explained to the site visitor, if needed, so that the user can still stop/start the sound file.

  • LOOP=INFINITE or LOOP=TRUE — Add this parameter if you want the sound to repeat continuously as long as the visitor has the Web page open.

  • HIDDEN=TRUE — When set to true, this hides the Control Panel for the audio file. It is generally a good idea to give your visitors the Control Panel so they can control the sounds on your Web page. If you want the Control Panel to appear on-screen, don't add the hidden attribute. The default setting is false.

  • VOLUME=n — Use a value between 1 and 100.

Start Sidebar
Where to Find Sound Files

Like images, movies, and other online files, sound files are intellectual property and, if not public domain, are likely to be owned by someone. But many sites online offer great sound files for your personal and even commercial use for free. Some good sites include the following:

  • Flash Kit — www.flashkit.com

  • http://dmoz.org/Arts/Music/Sound_Files/Samples_and_Loops/

  • Sonic Mint — www.sonicmint.com

End Sidebar


Using Video in Your Site

The limited bandwidth of the Internet is the restraining hand when it comes to adding video files to your Web pages; video clips should be small in download size or visitors should be offered the option to choose to view a video file.

Tip

As you would with audio files, give your site visitors the total file size for a video clip so they can make an informed decision.

Video is a great way to entertain and educate your audience. You may add AVI or MOV files to your pages by linking to the file with a standard anchor tag using the Property inspector or by embedding the file just as you would an audio file.

Start Sidebar
Common Video Formats and Plug-in Options

Common Video Formats

AVI (Audio Video Interleave) is the current standard for Internet video and is supported by the Windows platform. AVI files don't require any special hardware but cannot be used for full-screen motion pictures because of frame size limitations.

ASF (Advanced Streaming Format) may soon replace the AVI format and is also supported by newer versions of Windows. It uses streaming media technology to provide live video over low- and high-bandwidth connections.

MPEG (Moving Pictures Expert Group) requires an MPEG player to view the videos that have .mpg or .mpeg extensions.

MOV/QT (QuickTime) is supported by most browsers. The latest QuickTime formats use MPEG-4 technology.

RA (RealVideo) uses streaming media technology to provide live video over low- and high-bandwidth connections.

Typical Browser Plug-in Implementations

QuickTime Player

The QuickTime Player plug-in is supported by all Macintosh and earlier Windows platforms and can play MPEG video on Windows. This powerful and well-designed plug-in supports MPEG video and audio, plus many other formats (MOV, QTVR, AVI, AIFF, WAV, AU, MIDI, and so on), and it fits seamlessly into the visitor's Web experience. You can download this software from www.apple.com/quicktime/download.

QuickTime pros:

  • It supports most file formats.

  • It offers a well-designed controller interface.

  • It uses smart streaming based on current downloading speed.

  • It's powered by an efficient MPEG playback engine.

  • The basic player is free.

QuickTime cons:

  • It doesn't use the standard Windows user interface look and feel.

  • It's not supported by the newest Internet Explorer browsers on the Windows platform (IE 5.5 and 6.0).

  • It costs $30 U.S. to enable professional features for editing video files.

Windows Media Player

Streaming playback of embedded video and audio is directly integrated into recent versions of Internet Explorer on the Windows platform. Although older versions of Internet Explorer browsers try to use the installed-on-demand ActiveX control called ActiveMovie, newer browsers typically use Windows Media Player, which is also available for the Macintosh platform but is not generally preinstalled in browsers on that platform. Download the latest Windows Media Player plug-in at www.microsoft.com/windows/ windowsmedia/players.asp.

Windows Media Player pros:

  • It is a standard part of Windows.

  • It supports many file formats.

  • It has a simple user interface.

  • It uses an efficient MPEG playback engine.

  • It uses hardware acceleration, for example MMX, if available.

  • It's suitable for playing local files as well as files on Web sites.

Windows Media Player cons:

  • It's not typically installed on the Macintosh platform and must be downloaded.

  • It might require manual configuration of a Web browser.

RealPlayer

Another plug-in used to play Web video is the RealPlayer — a free plug-in that is available for all platforms. With streaming audio/video support and handy subscription and channel features, RealPlayer is capable of handling most file types but is not installed by default. You may download the RealPlayer from www.real.com/realoneplayer.html.

RealPlayer pros:

  • It's cross-platform.

  • It includes a free player.

  • It can handle most media types.

RealPlayer cons:

  • It's not typically preinstalled.

  • It often plays media in a separate window instead of inline.

End Sidebar

Adding video to your pages

To link to a video file, build a link in your page and use the Property inspector to select the video file. If the user's computer understands the file type and has a helper application or plug-in to handle the file, the browser plays the file. If not, a dialog box opens so users can select a playback application for the file to their hard drive.

To embed a video into your page, you can use the <embed> or <object> methods. Using <embed> works only with plug-ins. Using <object> is designed to work with ActiveX components. ActiveX controls are reusable components (like miniature applications) that act like browser plug-ins. The ActiveX object in Dreamweaver lets you enter the appropriate classid, codebase, and parameters necessary for the user's browser to properly display the object. ActiveX is not supported on the Macintosh platform or in Netscape browsers. When using ActiveX components, you must supply a classid to identify the ActiveX control to be used. A classid supplies a long string of numbers and letters that indicate the Registry status of the object. The codebase supplies a URL for downloading the control object if the user's computer doesn't have it available. To learn more about ActiveX technology, visit the Microsoft site (www.microsoft.com) and type active classid into the Search field.

Internet Explorer and the QuickTime Player plug-in

Until recently, the plug-in installed as part of QuickTime worked for Netscape browsers and Microsoft Internet Explorer on Windows and Macintosh. Now Windows users who try to play a QuickTime movie in Internet Explorer version 5.5 (SP2 or later) or Internet 6.0 will encounter a broken plug-in icon until they install the new QuickTime ActiveX control from Apple in addition to the QuickTime plug-in. Users of other browsers on Windows or Macintosh are unaffected; they may use the plug-in installed with QuickTime and do not need to get the new QuickTime ActiveX control.

QuickTime uses a plug-in mechanism to display movies from your Web page in the user's browser. If you follow the Dreamweaver MX 2004 Help instructions for inserting video into your Web pages, you would use an <embed> element to display QuickTime content within the browser; however, to overcome the problem for newer IE browsers on the Windows platform, you should wrap the <embed> code within the <object></object> tags to make the new ActiveX control for QuickTime available to the browser, as in the following code example:

<object
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplug-in.cab"
width="360" height="228"
id="movie1">
<param name="SRC" value="Birdy_Flight.mov">
<embed
src="Birdy_Flight.mov"
plug-inspage="http://www.apple.com/quicktime/download/"
width="360" height="228"
name="movie1">
</embed>
</object>

When using this method for QuickTime movies (.mov) the classid must always equal clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B. The codebase must always equal www.apple.com/qtactivex/qtplug-in.cab, and the plug-ins page must always equal www.apple.com/quicktime/download/.

Habitat Alert site Let's use an MOV file from the Habitat Alert project site to set up the ActiveX and plug-in methods for viewing the movie in a Web page.

  1. Open the file quicktime_movie\index.htm from the Files panel (window). This file is set up to accept a video file and has buttons that you use later to control the movie through JavaScript.

  2. Place your cursor into the table cell <td> just above the Play and Stop buttons. Choose Insert ® Media ® ActiveX.

  3. With the object selected in the document window, go to the Property inspector and set the following values, as shown in Figure 40.5:

    Click To expand
    Figure 40.5: Enter settings required using the Property inspector.

    • W — 360.

    • H — 228.

    • ClassID — clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B.

    • Embed — Enable by checking the box.

    • Src — Birdy_Flight.mov. (You will have to click the Browse button, then Show All Files in the Files of Type menu for the Select file dialog box.)

    • Base — http://www.apple.com/qtactivex/qtplugin.cab. (Dreamweaver actually codes this as codebase=http://www.apple.com/qtactivex/qtplugin.cab.)

    • ID — movie1. (Dreamweaver adds this to the object code only.)

  4. Save and try your page in an Internet Explorer browser. You won't see your movie yet because IE doesn't know the source for the movie file. If you look in your existing code, you should see that no src information appears in the <object> code, only in the <embed> code. To rectify this, you must add the parameter SRC=.

  5. Click the Parameters button. Click the Add (+) button and type SRC into the Parameters field. Tab twice to get to the Value field (the first tab only selects the Dynamic Data icon), and enter the path to your movie. The path you would use is Birdy_Flight.mov.

    Tip

    You can copy the src path from the Property inspector's Src field before you click the Parameters button, which is a good idea when the path is more complicated than the one used in this example!

  6. Tab twice to add a new parameter or click the Add (+) button again. This time you add a parameter that keeps the controller from showing, as you will be using JavaScript to control your movie. Add CONTROLLER=FALSE, putting CONTROLLER into the Parameters and FALSE into the Values, as you did with SRC. Click OK.

  7. Save and test your movie in Internet Explorer and in Netscape Navigator 4x. The movie should load but not play. You can press the spacebar to see the movie play; the spacebar is the keyboard shortcut enabled in QuickTime to toggle start/stop movie. Keep this page open for the next exercise.

    Tip

    You can find a complete list of the parameters available for QuickTime movies at www.apple.com/quicktime/ authoring/embed.html.

Using JavaScript to control a QuickTime movie

With the exception of Internet Explorer 5 for the Mac OS platform, you can use JavaScript to control the play of your QuickTime movie in most modern Netscape and Internet Explorer browsers. To allow the use of JavaScript to control the movie, you must pass a parameter to the plug-in that says that JavaScript is enabled.

  1. Habitat Alert site Select the movie object in the file quicktime_movies\index.htm, and click the Parameters button.

  2. Click Add (+) to add a new parameter and type ENABLEJAVASCRIPT into the first field, tab twice, and type TRUE into the value field.

  3. Click OK to close the dialog box. Save your file.

    At this point, only the <object> has a reference name for the movie file (movie1), which is written as id="movie1" in the tag. However, you also need a reference name in the <embed> tag so that JavaScript can control the file. Normally, you would add a name by typing it into the field at the top left corner of the Property inspector when you have the object selected. However, at the time that this exercise was written, if you add a name there, it is written as name="movie1" (which is correct), but it is placed in the <object> and <embed> tags. Having name="" in the <object> tag causes JavaScript control of the QuickTime movie in Netscape 6x browsers to fail.

  4. To work around the bug, add movie1 into the field, but then switch to Code view and delete name= "movie1" from the object tag.

  5. Save your file and keep it open for the next exercise.

Scripting the movie control buttons

To control your movie using JavaScript, you enabled the use of JavaScript via a parameter. Now you need to use JavaScript to pass play, stop, and other functions to the QuickTime movie. To do this, you add some JavaScript to the hrefs of the buttons already in place in your file.

Habitat Alert site To control your movie, add JavaScript to the links for the buttons in the file. The script will reference the movie1 object.

  1. Select the Play button in the quicktime_movies\index.htm file.

  2. Type javascript:document.movie1.Play(); in the Link field and press Enter/Return to be sure that the value is accepted. The punctuation marks are required.

  3. Select the Stop button and type javascript:document.movie1.Stop(); and press Enter/Return.

  4. Select the SoundOn button and type javascript:document.movie1.SetVolume(100);.

  5. Select the SoundOn button and type javascript:document.movie1.SetVolume(0);.

  6. Save your file and preview in Internet Explorer 6, Netscape 4x, and Netscape 6x browsers to be sure that the buttons work.

Start Sidebar
Setting Width and Height Values for Movies

Two very important settings required to properly display your movie are width and height. To determine the dimensions of your movie, press F11 to open the Assets panel, and click the Movies icon. Select your movie listed in Movies Assets. If your movie is not displayed, try clicking the Refresh icon to update your movie assets. When you have the movie selected, right-/Control+click the movie and choose Edit. This should open the QuickTime Player. Under the Movie menu item, choose Get Movie Properties. The first menu in the dialog box that opens lets you choose the video (Movie) or audio tracks, and the second gives you the choices for different properties of the tracks. Choose Movie in the first menu and Size in the second. Note the width and height and use the values in Dreamweaver.

For the controller to appear properly, add 16 pixels to the height of a movie. Never set height or width to less than 2, even if the movie is hidden. To hide the movie controls, set the HIDDEN parameter equal to true.

End Sidebar

The most common JavaScript functions include the following:

  • Play(); — Starts the movie.

  • Stop(); — Stops the movie.

  • Rewind(); — This causes your movie to rewind to the beginning.

  • Step(1); — This steps the movie frame-by-frame in a forward direction.

  • Step(-1); — This steps the movie frame-by-frame in a backward direction.

  • SetVolume (n); — Sets the volume of the audio track with n being a value between 1 and 100.

To read more about controlling movie and track properties of a QuickTime movie through JavaScript, see http://developer.apple.com/ techpubs/quicktime.


Adding Flash SWF Movies to Your Pages

You can add a whole new world of interactivity to your pages through the addition of Macromedia Flash SWF movies. Whether simply entertaining your site visitors with a quick-to-load animation for visual interest, providing truly interactive content, or using Flash to provide sound to your site, Flash movies are easy to place in your pages by choosing Insert ® Media ® Flash. Dreamweaver uses the <object> and <embed> methods when inserting a Flash movie to get the best results in all browsers.

Your movie files will play using the Flash Player plug-in in Netscape browsers and with an ActiveX control in Microsoft Internet Explorer (on the PC). Flash Players are incorporated in the latest versions of Netscape Navigator, Microsoft Internet Explorer, and America Online.

Flash movies are assets and are viewable and playable from the Assets panel. To view your Flash assets, press F11 to open the Assets panel and click the Flash Assets icon. Select a SWF file. The Preview space above the list of assets can be expanded for better viewing. To play your Flash asset, click the arrow in the Preview space, as shown in Figure 40.6.

Figure 40.6: Flash Assets can be played in the Assets panel or in the document after a SWF is inserted.

Habitat Alert site In this section you add an interactive Flash movie (SWF) to a page in the Habitat Alert site. This movie features rollovers that provide information about the different kinds of herons that have endangered habitats:

  1. Use the Files panel to locate the flash_movies folder and open index.htm form. Click to change to Design view.

  2. Place your cursor into the page, and choose Insert ® Media ® Flash. In the dialog box, navigate to the flash_movies folder and select heronFreestyleMovie.swf. Click OK.

    You can also use the Media toolset in the Insert bar by clicking the Media tab. Click the Flash button or drag it to your page and drop it in the desired location. In either case, the Insert Flash Movie dialog box opens to enable you to select the Flash movie.

    Another method for inserting a Flash file uses the Assets panel. Select a Flash asset in the Assets panel, and click the Insert button located at the bottom of the panel or right-/Control+click.

    Like audio and video files, a placeholder is put into the page. With Flash movies, the width and height are preset for you because Dreamweaver can get the information from the file; however, because Flash is vector-based, you can scale the movie as you desire.

    Tip

    To maintain proportional width and height, hold down the Shift key and drag the bottom right corner to scale your movie smaller or larger. A Reset Size button is available in the Property inspector if you want return the movie to its original dimensions.

  3. Click below or beside the newly inserted movie. In this step, you add another Flash movie to provide a background sound in the page. This file contains only a sound and is only 1x1. Add the movie Heron_sound.swf from the sounds folder. Set the W and H of the file equal to zero and turn off the Loop option using the Property inspector.

  4. You can press F12 to preview your Flash content in a browser, but one fabulous new feature of Dreamweaver MX 2004 is the ability to interact with your Flash media in Design view. With the placeholder selected, click the Play button in the Property inspector. Move your cursor over the eggs to see the interactivity. Click the goose egg to see what happens. To stop movie, click the Stop button.

    Tip

    You can preview all Flash content in a page by pressing Control/Command+Alt/Option+ Shift+P to set ll Flash objects and movies to play.

  5. Save your page and preview it in a browser.

As shown in Figure 40.7, some properties of your inserted Flash movie are preset by Dreamweaver.

Click To expand
Figure 40.7: Use the Property inspector to modify Flash movie properties or to add parameters.

The properties in the Property inspector are as follows:

  • Name — Provide a name to identify the movie for scripting in the unlabeled field at the top left side of the Property inspector, just below where it says "Flash" and gives the file size.

  • W and H — Specify the width and height of the movie in pixels. You may also use picas (pc), points (pt), inches (in), millimeters (mm), centimeters (cm), or percentage of parent container (%). The abbreviations must follow the value without a space (for example, 400px or 50%).

  • File — The path to the Flash or Shockwave movie file. Click the Browse for Folder icon to locate a file, or type the correct path.

  • Src — Displays only when Design Notes are being maintained and the SWF file was exported to the Dreamweaver site. The Src is the path to the original authoring file (FLA) for the Flash movie selected.

  • Edit — Lets you launch Macromedia Flash MX to update an FLA file, but it is disabled if you do not have Macromedia Flash MX installed on your computer.

  • Reset Size — Returns the movie to its original size. To size a movie, enter new W and H values or drag the bottom right corner of the movie. Hold the Shift key to maintain proportional W and H.

  • Loop — Use to set a movie to play continuously. Uncheck it to have the movie play once and stop.

  • Autoplay — When checked, automatically plays the movie when the page loads.

  • V Space and H Space — Specifies the number of pixels of white space above and below and/or to the left and right of the movie. Use this to provide a margin around the movie when text or other content is contained in the same block.

  • Quality — Controls anti-aliasing in playback of a movie. A movie looks better with a high setting but requires the user to have a faster processor to work well. Low emphasizes speed over appearance. High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance where and when it's possible. Auto High emphasizes speed and appearance, but favors speed over appearance if playback suffers.

  • Scale — Determines how a movie fits into the dimensions set in the width and height fields.

    • Default displays the entire movie.

    • No Border fits the movie into the set dimensions so that no borders show and the original aspect ratio is maintained.

    • Exact Fit scales the movie to the set dimensions, regardless of the aspect ratio.

  • Align — Floats the movie in the same way you might float or align an image relative to other content in the block.

  • Bg — Sets a background color for the movie area, which also appears during loading and after playing, when the movie is not playing.

  • Parameters — Opens a dialog box for entering parameters to pass to a movie. Your Flash movie must have been designed to receive additional parameters.

Editing a Flash movie

You can edit the original Flash file (FLA) from within Dreamweaver MX 2004, just as you can edit the original source file for any Fireworks image. To initiate editing from Dreamweaver, select your Flash SWF file and click the Edit button in the Property inspector. You must have Flash MX installed on your computer. The Edit button isn't available if you do not. You must also have Design Notes enabled for the site so that when you export your movie (SWF) from the authoring file (FLA), a note is placed in the site.

When you click Edit, Dreamweaver launches Flash MX, and Flash MX attempts to locate the original source file from information stored in a Design Note (MNO). This information is present only if you exported your SWF from Flash into a Dreamweaver site and if Design Notes are enabled.

Note

Some SWF files may be created using Macromedia FreeHand 10. When this is the case, Dreamweaver displays the Edit button and launches Flash MX, but you will not be able to select the FreeHand file to open it because its extension is .fh.

Editing links for Flash SWF movies

You can update links used in your SWF files from Site Map view in your Dreamweaver site. To view a site map and edit your links, you must define a home page for the site and display dependent files. To switch to Site Map view in the Files panel (window), click the Expand button in the docked Files panel, as shown in Figure 40.8. For Mac OS, use the small white expander arrow located at the bottom of the Files window to view the Local and Remote sides of the Files window. Click the site Files and Map icon to enter Map view.

Figure 40.8: Expand the Files panel (window) to enter Site Map view.

Select the link to update, which appears beneath the SWF file. You may opt to change the link for just one occurance or change it sitewide:

  • To change the link for just this instance, right-click the link; then choose Change Link. Type the new URL (path) in the dialog box that opens.

  • To update all instances of a link, choose Site ® Change Link Sitewide. There are two steps to the process. First, browse to or type the path of the link you are changing in the Change All Links To field; then browse to or type the new URL in the Into Links To field.

When the paths are set, click OK and collapse the Files panel with the Expand/Collapse toggle button (Windows) or the white expander arrow (Mac).


Adding a Java Applet

Java is a programming language that is used to create executable applications that can run in a Web page. Unlike JavaScript, a client-side scripting language, Java must be compiled — made into a class file — and stored in the same directory or a subdirectory of the page that loads the class. Parameters can be used to pass specific information in the applet if it is designed to accept it.

Inserting an applet works the same as audio, video, or Flash. You have three options:

  • You can choose Insert ® Media ® Applet.

  • You can click the Applet icon from the Media tools found in the Insert bar.

  • You can drag the Applet icon from the Insert bar to the document.

In all cases, a dialog box to locate the class file opens. After selecting the class file, you can use the Property inspector to size the applet, add a codebase where the appropriate files are located if the user needs them, and add parameters by clicking the Parameters button.

Habitat Alert site In this section you add a Java applet to the home page of the Habitat Alert site. The StringWalk applet (created by Bryan Harianto — www.geocities.com/bharianto/StringWalk/StringWalk.html) runs a scrolling news ticker that you can customize to include your own messages, complete with targeted links. It contains parameters where you may add as many messages as you like by using the parameter captionn. For example, caption0 may display the message "Visit our new Habitat Alert store..." Other parameters that this applet accepts are urln and targetn, as in url0 and target0, which would be set to www.habitat-alert.org/store/ and _self. The common number (caption0, url0, and target0) let the applet know that these things are associated, and the caption text becomes a link when the user mouses over the text. When the link is clicked, the page loads into the current browser window because the link target is _self.

To add a Java applet to the Habitat Alert home page, follow these steps:

  1. Use the Files panel (window) to locate the java_applets folder, and open the file index.htm. This is the Habitat Alert home page.

  2. Place your cursor beside the "Give a gift that shows you care..." text and add a paragraph return.

  3. Choose Insert ® Media ® Applet, and navigate to the java_applets folder in the dialog box that opens. Locate StringWalk.class and select it. Click OK to insert. Change the width to 300 and the height to 25.

    This applet already has the necessary parameters to contain several captions, URLs, and targets. You can modify how fast the text will move on the screen (right to left); set the color of the background, text, links; and more. A complete list of the parameters follows this exercise.

  4. To set the speed of the scrolling text, select the applet and click the Parameters button in the Property inspector. Add Delay. Press Tab to move to the Value field and add the value 25. A lower number speeds up the scroll effect, whereas a higher number slows it down.

  5. Add a new caption (caption3) by clicking the Add (+) button. Name the parameter caption3. Press Tab twice to reach the Value field, and type Show your support!

  6. Add another parameter named url3 and press Tab twice. Add the value http://www.habitat-alert.org/store/.

  7. Press Tab twice to add another parameter. Name this target3. Press Tab twice for the value and type _self.

  8. Click OK to close the Parameters dialog box, save your file, and preview by pressing F12.

As shown in Figure 40.9, your captions scroll across the page, and moving your cursor over the text displays the underline to let the site visitor know that this is a clickable link.

Click To expand
Figure 40.9: The parameter accolor sets the color for the link and makes the text look clickable.

StringWalk parameters include the following:

  • delay — Sets the speed of the scrolling text. Text scrolls from right to left.

  • fontface — Sets the font family used to display the text.

  • fontstyle — Lets you set plain, bold, or italic text styles.

  • fontsize — Sets the size of the text.

  • bgcolor — Sets the color used behind the text. Uses R, G, and B values.

  • fgcolor — Sets the color used by the text captions.

  • accolor — Sets the color of the link when users move their cursors over a caption.

  • bdcolor — Sets the color of the border around the applet.

  • captionn — Adds the text to scroll across the applet space. Change n to next sequential integer (for example, if caption3 already exists in the parameters, use caption4). The number must be placed directly after the word without spaces.

  • urln — Adds the URL (absolute) to be used when the visitor clicks a caption. Set the number to match that of the caption for this URL.

  • targetn — Adds a target for the called page. _self opens the file in the current document. _blank opens a new browser window for the file. _frame, _parent, and _top work with frame-based sites. The number used (n) should match the caption and URL for the page.


Summary

In this chapter, you explored the options for adding multimedia to your Web pages. You learned to use Flash buttons and text in Dreamweaver. Using the <object> and <embed> tags, you learned how to insert, modify, edit, and set parameters for each type of media, including audio, video, Flash, and Java. Additionally, you learned about browser issues related to displaying multimedia elements and discovered the need to accommodate the Windows and Macintosh platforms and browser versions.


Project Summary

In this chapter, you created a page to display an e-card created in Flash MX and added a Java Applet to scroll text across the home page for the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site

Files

Where to Now

java_applet\index.htm

You added the StringWalk scrolling text applet to the Habitat Alert site, setting properties and adding parameters to customize its use for this site.

You could insert the same applet into different sections of the site, changing the parameters appropriately.

flash_movies\index.htm

You added an e-card to a page that could be configured to pop up from another location.


Chapter 41: Working with Behaviors, Custom Scripts, and Snippets

Dreamweaver contains an array of JavaScript functions that add functionality to your site pages, including pop-up windows, form validation, and customized scripts. Dreamweaver also includes a snippets panel that enables you to store code for later use in all your sites. Snippets can either be complex functions or text bits you use on a regular basis.

Introducing Dreamweaver's Built-in Behaviors

Dreamweaver behaviors place JavaScript code in a document to let visitors interact with Web page elements through events. Events are user-actions, such as clicking (onClick), rolling the cursor over a page element (onMouseOver), or loading a page (onLoad), among many others. A behavior is a combination of an event with an action triggered by that event. Actions are Dreamweaver's name for JavaScript functions. Functions set up client-side logic that is called when a specified event occurs. In the Behaviors panel, you add a behavior to a page by selecting it from the Behaviors panel. You may then specify the event that triggers the selected action.

You've already explored some of the built-in behaviors found in Dreamweaver when you designed and scripted your navigation elements using Swap Image, Set Nav Bar Image, and Show Pop-Up Menu. But there are many more behaviors that you can tap into to add increased functionality to your site, as shown in Figure 41.1. Some behaviors are grayed out depending upon the selected object in the current document. The list of events you may select from changes depending upon what your target browsers are. You may change the list of events available by choosing Show Events For. This doesn't change the list of behaviors — only the events that may trigger the actions, but events and the JavaScript functions (actions) may be affected by the user's browser. Browsers, like any other program, evolve and more modern browsers understand and use a richer, more complex version of JavaScript, which makes use of more events than earlier versions did.

Click To expand
Figure 41.1: Dreamweaver's behaviors. Which behaviors are available depends on what object or link is selected in the current document.
Cross - Reference

The entry for Studio VII shown in Figure 41.1 was added through extensions created by Project Seven. You'll read more about Extending Dreamweaver in Chapter 42.

If all this talk of JavaScript functions and user events is overwhelming, don't worry. Using Dreamweaver doesn't require that you know which code to modify. You use the Behaviors panel to select a new event, and Dreamweaver makes the changes for you. With years of testing and much input from a vast team of engineers and beta testers, you can be sure that the code produced will work in your target browsers, too. That said, if you are a coder by nature, rejoice! Dreamweaver MX 2004, like the versions before it, provides easy access to the JavaScript behind the behaviors. Whether you prefer Design view or Code view, you will appreciate the time-saving, easy-to-apply functionality of Dreamweaver behaviors.

Using Dreamweaver's built-in behaviors

Dreamweaver MX 2004 contains many useful built-in behaviors, some of which have already been used in previous chapters. Here are some simple exercises designed to help you understand how some of the behaviors may be used. In some cases, the behavior has already been explained and used in another chapter — or will be used in a later chapter — so look for the cross-references.

Call JavaScript

Use Call JavaScript to call a custom function or line of JavaScript code that should be executed when an event occurs. When adding this behavior, type your own script or use code that is easily and freely available online.

On the CD-ROM

Save the chapter41_exercise folder to your hard drive. Define a new site.

Here's a simple example of a back button created using this behavior:

  1. Locate and open_exercisechapter41\behaviors\showdate.htm. This page contains a custom dynamic date function (mydate) written in the head of the page.

  2. Place your cursor into the write date link.

  3. Click the Add (+) button to add Call JavaScript.

  4. In the dialog box, type the following call to the mydate function: mydate().

  5. Close the dialog box and set the Event to onClick, if it is not already set.

  6. Save the page and preview it in a browser. Click the write date link to see the dynamic date.

Change Property

Use the Change Property behavior to change the value of an object's properties in the current document through the use of CSS. Which properties you may affect depends upon the user's browser — more properties may be changed in newer browsers (those with more support for dynamic CSS), and some browsers may not allow this method at all. Use this action only if you are familiar with HTML and your target browsers' capabilities. Here's an example exercise using the Change Property behavior to create a rollover effect in a layer with a text link inserted into a table cell:

  1. From the chapter41_exercise defined site, open the file change_property.htm from the chapter41_exercise\behaviors folder in the Files panel.

  2. Place your cursor anywhere in the text. The text is a single link that has a CSS style set to control the color and Text Decoration of the link. It is inside a table cell that is contained within a layer named popad. The layer has a background color property set to #CCCC99.

    Cross - Reference

    For more about CSS links, see Chapter 35. For more about layers and DHTML (Dynamic HTML), see Chapter 43.

  3. Use the Behaviors panel to Add (+) the Change Property behavior.

  4. In the dialog box that opens, shown in Figure 41.2, you must first choose the type of object to populate the Named Object field.

    Click To expand
    Figure 41.2: The Change Property dialog box.

    Note

    You cannot "choose" LAYER if it is already the chosen type of object. First select a different type of object; then switch back to LAYER. This triggers the Named Object field to load the available layers. (There's only one named popad.)

  5. Select the popad Named Object. Choose Select from the Property options, choose style.backgroundColor from the first menu, and leave the second menu set to IE4. Internet Explorer 4+ and Netscape 6+ browsers recognize more properties. Other browsers simply ignore the attempt to change the properties.

  6. Enter a New Value of #999966. Close the dialog box and set the Event to onMouseOver.

  7. With your cursor still in the Button link, add the behavior again, repeating the same options but adding a New Value of #CCCC99. After closing the dialog box, set this event to onMouseOut, which restores the original background color to the color first used.

  8. Save and test the page. When you move your cursor over the link, the layer background color should mimic the rollover effect normally possible only with images.

Check Browser/Check Plugin

The Check Browser is used to verify the user's browser brand and version and is especially useful when the site pages incorporate functionality that may otherwise be unavailable when the user's browser brand or version doesn't support it. This behavior is most often attached to the <body> tag to occur onLoad. You may also send the user to an alternate page that contains explanation and links to update their browser.

  1. Open the page check_browser.htm from the behaviors folder in the Chapter 41 site.

  2. Select the <body> tag and Add (+) the behavior Check Browser.

  3. Browse to set the URL to index.htm in the behaviors folder.

  4. Set the Alt URL to get_new.htm in the behaviors folder.

  5. As shown in Figure 41.3, set the Netscape Navigation 4.0 options to Go to URL and set Otherwise, to Go to Alt URL. Do the same for Internet Explorer 4.0 options. Set Other Browsers to Alt URL.

    Click To expand
    Figure 41.3: The Check Browser dialog box.

    If the browser is 4.0 or newer, it should understand JavaScript and be sent to the URL page (the home page) or otherwise be sent to the Alt URL (get_new.htm), which provides details and possibly download links.

  6. Save and test your page (check_browser.htm) to see what happens. Assuming you have a relatively new browser, you should be sent to the home page.

    Caution

    If the user's browser is set to disable the use of JavaScript, the detection of the browser will not occur, since it uses JavaScript to do the detection!

  7. In some browsers, it is possible to disable JavaScript. To see this in action, disable your scripting options by using a Netscape browser and choosing Edit ® Preferences, as shown in Figure 41.4 (Netscape 4x) or Figure 41.5 (Netscape 6x).

    Click To expand
    Figure 41.4: In Netscape 4x, turn off JavaScript by unchecking the option.

    Click To expand
    Figure 41.5: Turn off scripting in Netscape 6x here.

  8. Now test the check_browser.htm page in Netscape. Because JavaScript is disabled, the Check Browser function never occurs.

    To get around this problem, you must resort to a non-JavaScript method.

  9. In check_browser.htm, choose View Head Content and click the Head Content bar that opens above the document.

  10. From the Insert bars HTML category and the Head drop-down menu, select Refresh to add a meta refresh to this page, as shown in Figure 41.6. Set the Delay to 5 seconds and browse to set the URL to get_new.htm. After a set time (5 seconds), the page takes the user to the get_new.htm (Alt URL) without the use of JavaScript.

    Click To expand
    Figure 41.6: A meta refresh doesn't require JavaScript to function.

  11. Save and test the page in Netscape. You will find yourself at get_new.htm after 5 seconds. If you enable scripting for Netscape and retest the page, you will be taken to the home page.

You can use Check Plugin to verify the presence of a plug-in — a program designed to handle a specific file type that the browser itself may not be able to handle. You can't detect specific plug-ins in Internet Explorer using JavaScript. However, selecting Flash or Director adds the appropriate VBScript code to your page to detect those plug-ins in IE for the Windows platform. Plug-in detection is not possible in Internet Explorer for the Macintosh platform.

Control Shockwave or Flash

Use the Control Shockwave or Flash behavior to play, stop, rewind, or go to a frame in a Shockwave or Flash movie. To use this behavior, your movie must be named. You may add a movie name by selecting it and adding the name to the top left field in the Property inspector. When done, follow these steps:

  1. Select the object used to control the movie, and add the behavior.

  2. Select a Shockwave or Flash movie from the menu of those movies in the current page.

  3. Choose Play, Stop, Rewind, or Go to Frame, as shown in Figure 41.7. If you choose Go to Frame, specify a frame number.

    Click To expand
    Figure 41.7: Select the type of action needed to control your named Shockwave or Flash movie.

  4. After you close the dialog box, choose the desired event.

Drag Layer

Drag Layer is a behavior designed to allow layers — page objects created through CSS positioning and the <div> tag — to be moved on the page. The layers may be moved freely or be constrained. Because the objects associated with use of this behavior require CSS, this behavior is restricted to version 4+ browsers that support advanced JavaScript and style sheets.

Cross - Reference

See Chapter 43 for an exercise using this behavior.

Go to URL

The Go to URL behavior is a JavaScript method of sending the user to a new document, either within the site or external to the site. It is often used with framed sites to facilitate the loading of pages within two or more frames.

Cross - Reference

See Chapter 39 to find out more about this behavior.

Hide Pop-Up Menu/Show Pop-Up Menu

The Show/Hide Pop-Up Menu behaviors are used to build, show, and hide complex arrays of navigational elements. This behavior may also be used to modify/edit a pop-up menu created in Fireworks.

Cross - Reference

See Chapter 39 for example exercises using the Show Pop-Up Menu behavior.

Jump Menu/Jump Menu Go

Jump menus are forms-based menu objects that contain selectable items and URLs. The script is triggered by choosing (changing) the <option> item in the drop-down menu. Jump Menu Go is the same, except it provides a Go button that triggers the page change.

Cross - Reference

See Chapter 37 to read more about Jump menus.

Open Browser Window

Use the Open Browser Window behavior to add a pop-up window to your site either when a page loads (onLoad) or when a user clicks a link (onClick).

Habitat Alert site To promote the option to send a Flash-based e-card relating to preserving wildlife habitat, a pop-up window will announce the e-card feature. The pop-up window occurs when the home page loads, so its event is onLoad:

  1. Use the Files panel (window) to open the behaviors folder and open index.htm.

  2. Select the <body> tag using the Property inspector and use the Behaviors panel to Add (+) the Open Browser Window behavior.

  3. In the dialog box that opens click the Browse button to locate behaviors\change_property.htm (see Figure 41.8). This page has an announcement of the e-card site feature.

    Click To expand
    Figure 41.8: Use the Open Browser Window dialog box to set up your pop-up window.

  4. Set the desired width and height for the new window. Keep in mind your target monitor resolutions when selecting the values used. This window is set to open at 350 pixels by 150 pixels.

  5. Use the check boxes to provide browser window options — sometimes called "chrome." It is generally a good idea to allow scroll bars and resizing because the size of HTML text may vary so widely from user to user. You may also name the new window to be able to control it with JavaScript, but it is not required.

  6. Click OK to close the dialog box. Save your page and preview in your target browsers.

    Tip

    Setting any attribute for the window automatically disables those not explicitly set. For example, setting scroll bars and resizing means only that your window will not have menu buttons, status bar, or any other options.

Play Sound

The Play Sound behavior lets you set a sound file to play when a specific user event occurs. Because sound files are handled in so many different ways, this behavior may or may not work for all users because of the way their browsers are set to handle specific sound file types. The example given here uses a short .wav file.

  1. Open the page playsound.htm from the Chapter41\behaviors folder.

  2. Place your cursor in the Play link, and use the Behaviors panel to Add (+) the Play Sound behavior.

  3. Browse to locate heron.wav in the behaviors\sounds folder. Select the sound and close the dialog box.

  4. Set the event to onMouseOver. Save and test the page in both IE and NN browsers.

    Cross - Reference

    See Chapter 40 for more about the use of sound in your pages.

Popup Message

Provide information to the user with a JavaScript alert window created with the Popup Message behavior. You may embed a valid JavaScript function call, property, global variable, or other expression in the text by placing it inside curly braces ({}). If you need to display curly braces in your message rather than use them in your script, place a backslash before the brace (\{).

  1. Open popmessage.htm from the Chapter41\behaviors folder.

  2. Place your cursor in the Play button link.

  3. Use the Behaviors panel to Add (+) the Popup Message behavior.

  4. Add the following text: This is the sound of the Black-Crowned Night Heron; click OK.

  5. Save the page and test it in several browsers to see how the alert is handled.

Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore

These behaviors are most often used when creating rollovers, remote rollovers, and navigation bars that require the preloading, swapping, and restoring of images.

Cross - Reference

See Chapter 39 for exercises that use these behaviors.

Set Text (of Frame, of Layer, of Text Field, of Status Bar)

The Set Text behavior is used to change dynamically the content and formatting of frames, layers, and form text fields. Set Text ® Set Text of Status Bar is used to add a text message to the browser's status bar. For the first three options, you may use any valid HTML and/or embed JavaScript function calls, variables, properties, or expressions.

Note

Any HTML content entered in the text box provided in the Set Text dialog box is coded using special characters. For example, adding the HTML <br> to create a line break results in %3Cbr%3. %3C=<, br=br, and %3=>. This can be daunting to users who seldom work in Code view.
Cross - Reference

See Chapter 43 for example exercises using the Set Text ® Set Text of Layer and Set Text ® Set Text of Status Bar behaviors.

Show-Hide Layers

Show-Hide Layers lets you set the visibility of CSS layers. This behavior is perfect for creating a slide show of images or complex navigation menus.

Cross - Reference

See Chapter 43 for an example of using Show-Hide Layers.

Validate Form

The Validate Form behavior may be used to verify that content is added to a form field and to ensure that the correct type of content is added. For example, you may use the behavior to require that an e-mail address is given. Figure 41.9 shows the options you have with the Validate Form behavior. For this example, check the Required box and select the Email Address option. The most likely events used with the Validate Form behavior are onBlur and onSubmit.

Click To expand
Figure 41.9: The Validate Form dialog box lets you choose a form element, specify whether content is required, and check the type of data provided.
Cross - Reference

See Chapter 47 for an exercise that validates form content.

Show Events For

This behavior option lets you set what events are available in the Events menu. Earlier browsers understand fewer events. Newer browsers, particularly IE browsers, understand many different events. For greatest compatibility combined with a fairly large range of events, choose Show Events For ® 4.0 and Later Browsers.

Get More Behaviors

The Get More Behaviors option opens your primary browser and takes you to the Macromedia Exchange where you can download new behaviors for your application.

Cross - Reference

See Chapter 42 to learn more about extensions, including adding new behaviors to your Dreamweaver program.


Using Custom Scripts

Although Dreamweaver provides many built-in behaviors to add JavaScript functionality to your site, you are not limited to using only those scripts provided. You can use several methods to add your own scripts, either by linking to an external file or by embedding the script code into the document. How you choose to incorporate your scripts may depend upon how often your site's pages access the script.

For example, if you have a script that displays the current day, date, and year that you want to display on your home page, you may use the Insert menu to embed (place inline) the code into your document. However, if you plan to have the same date script on all of your site's pages, it makes sense to build an external JavaScript file (.js) and link all the site pages to that file. The external page is then requested from the Web server and its contents are placed in the browser's cache. This is an efficient method for reducing the overall download required by your site.

You can also build a script link to create a function call by typing into the Link field in the Property inspector. However you choose to incorporate your custom scripts, Dreamweaver provides an easy-to-use interface.

Embedding a custom script

Use the Insert ® Script Object ® Script menu option to place custom JavaScript into your document. This opens the Insert Script dialog box. Alternatively, you can use the Insert bar's Script toolset and click the Script object button to open the Insert Script dialog box.

Habitat Alert site In the following steps, you add a dynamic date script to the Habitat Alert home page by embedding the custom code into the HTML document:

  1. Use the Files panel to open index.htm from the root level of the Chapter 41 site. Also locate and open scripts\datescript.js.

  2. Select all of the content in datescript.js and copy. Close the file.

  3. Place your cursor into the space just above the first paragraph in the home page (index.htm) and choose Insert ® HTML ® Script Object ® Script to open the Insert Script dialog box, shown in Figure 41.10.

    Click To expand
    Figure 41.10: Paste a script or type it (if you're hand-coding) into the Content field.

  4. Paste the copied code. This script doesn't contain the opening and closing <script> tags, but they will be added by the Insert function. Click OK to close the Insert window and save your page. Preview in a browser to see the dynamic date in action. As shown in Figure 41.11, the date is displayed as Today is Wednesday, 24 September, 2003.

    Click To expand
    Figure 41.11: The dynamic date displays in the browser.

An embedded script is not visible in Design view unless Invisible Elements are enabled, in which case a small yellow icon marks the script code. To remove the embedded script, select the icon and delete, or use Code view to locate and remove the code.

Linking to an external JavaScript file

If you plan to use a script in many of your site's pages, create an external file and link the pages to it using the Assets panel. External script files are saved with the .js extension and are recognized as assets.

Habitat Alert site In the following steps, you add the dynamic date script to the home page using an external file:

  1. Reopen index.htm from the root level of the Chapter 41 site. Enable Invisible Elements (View ® Visual Aids ® Invisible Elements), select the icon representing the embedded date script (if you added it in the previous exercise), and delete it. Save the page.

  2. With your cursor inserted just above the first paragraph of copy, press F11 to open the Assets panel. Look for the Script icon (third icon from the bottom) and click it to bring up your script assets.

  3. Select datescript.js and press the Insert button at the bottom of the panel. Alternatively, you could right-/Control+click and choose Insert.

  4. Save your page and preview the dynamic date in a browser.

The datescript.js file uses a fairly standard method of calling Date functions. If you are even a bit familiar with JavaScript, you can easily modify the script to present the date in many different formats. (You can always get another copy of the datescript.js file from the CD.) The date is dynamically written using the document.write method.

The script also makes use of a class style (.date) that can be added to your site's style sheet to control the appearance of the date content. In the preceding example, no date class exists in the style sheet used by the page (Chapter41\behaviors\stylesheets\main.css), so it inherits the properties of the redefined .maincontent H4 style instead.


Working with Snippets

One of the best features added to Dreamweaver MX is the Snippets panel, located in the Code panel group (see Figure 41.12). A snippet is a stored block of code saved via the Snippets panel into the Configuration\Snippets directory inside your Dreamweaver program files. Through the Snippets panel, you can create and insert codeblocks of HTML and JavaScript, as well as other scripting types (ASP, CFML, and so on). Your saved snippets are available to you in all your Dreamweaver sites because their code becomes part of the Dreamweaver program.

Figure 41.12: The Snippets panel comes with many predefined code snippets.

Inserting a code snippet

Dreamweaver ships with many built-in, predefined snippets that you can use in your site pages. These snippets are organized in folders (within the Configuration\Snippets directory in the Dreamweaver program files) that are arranged in the Snippets panel. To open the Snippets panel, press Shift+F9 or open the Code panel group and click the Snippets tab.

To review the available snippets:

  1. Locate a folder that interests you, and select a snippet.

  2. Place the insertion point in the desired position in the document; to insert a code snippet around a selection, make the selection in the document.

  3. In the Snippets panel (Window ® Snippets), double-click the snippet.

    You can also right-/Control+click the snippet and choose Insert from the pop-up menu.

Creating a code snippet

When creating a snippet, you can decide whether you want the code to wrap around a selection or to be inserted as a block of code. For example, you can take the date script used in the example for the embedded JavaScript and build a snippet for use in any site. To make the snippet more user-friendly, be sure to add comments that explain the code. To create a code snippet from the script:

  1. Open the datescript.js file from either the Assets (Scripts) panel or from the scripts folder found at the root level of the Chapter 41 site.

  2. Choose Edit ® Select All or press Ctrl/Command+A and copy the code. Close the file.

  3. Open the Snippets panel and open the JavaScript folder. Locate and open the date folder so that when you create the new snippet, it is saved into this folder. (You could also simply create your new snippet anywhere and later drag it to a folder so that it is easier to locate later.)

  4. Click the New Snippet icon at the bottom of the panel. When the Snippet dialog box opens, name the snippet and provide a description so that others will understand what this code will do (see Figure 41.13).

    Click To expand
    Figure 41.13: The Snippet dialog box.

  5. Choose Insert Block and paste the copied date script code into the Insert Code field. You may choose between the Design or Code Preview type, but in this case, it will not matter much; the rendering of the script can be done only in the browser.

    Normally, the Preview type lets you set which view is triggered when inserting a snippet. If Design view is set as the preview type, the code is rendered there. Since the date script is processed client-side in the browser, you will not see the dynamic date in Design view.

  6. Click OK to close the dialog box. Now when you need the date script, you can simply embed it via the Snippets panel.

If your snippet is code that should wrap around other content or tags, use the Wrap Selection option and place the first portion of the code in the Insert Before field. Place the last portion in the Insert After field.

Editing or deleting a code snippet

Snippets are easy to edit or delete. To edit, simply select the snippet and either right-/Control+ click and choose Edit or select and use the Edit button at the bottom of the Snippets panel.

To delete a snippet, select it and use or click the Delete icon at the bottom of the Snippets panel.

Sharing your snippets

One of the things that make snippets so useful is that you can share them with others who use Dreamweaver. Predefined snippets are stored as files in the Dreamweaver program, but custom snippets (and snippet folders) are saved within user-specific configuration folders. To share a snippet, follow these steps:

  1. Locate and copy the snippet file (or folder of files).

  2. Give the file to other members of your team.

  3. Let them know that they can place the file or folder inside their own user-specific configuration folder or within the Program Files (Applications)\Dreamweaver MX 2004\Configuration\Snippets folder.

Start Sidebar
Where to Look for User-Specific Configuration Folders

Windows XP and Windows 2000

c:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX 2004\Configuration

In Windows XP, this folder may be inside a hidden folder. To locate the folder, run a search that incorporates hidden files and folders and look for Application Data. When the Application Data folder (username) is found, right-/Control+click and choose Properties. Uncheck the Hidden option. Another dialog box will ask whether you want this to include subfolders and files. Choose that option.

Windows NT

c:\WinNT\Profiles\username\Application Data\Macromedia\Dreamweaver MX 2004\Configuration\

Macintosh OS X

Hard disk:Users:username:Library:Application Support:Macromedia:Dreamweaver MX 2004: Configuration

End Sidebar


Summary

In this chapter, you looked at ways to use predefined behaviors that ship with Dreamweaver. You learned to use the behaviors and how to use custom JavaScript by embedding the code or linking to an external file that contains the code. You also learned how valuable snippets can be by creating your own snippet to store a dynamic date script.


Project Summary

In this section, you added a dynamic date to the home page of the Habitat Alert site.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
behaviors\index.htm | Added a dynamic date script to display the current day of the week, date, month, and year. |
behaviors\index.htm | Added a pop-up window to display a link to the new e-card feature for the Habitat Alert site. | This window can be used for puzzles or e-cards that are made in Flash. One of the puzzles is made in Dreamweaver
change_property.htm | Set up a rollover effect for the e-card link without the use of images! |


Chapter 42: Extending Your Dreamweaver

Overview

Dreamweaver is extensible, meaning it has the capability to add new features, functions, and capacity to your application through the use of extensions. An extension is an addition to the Dreamweaver program. It can be as simple as a command that builds a null link, an object button in the Insert bar that quickly builds a commonly used HTML table, or a behavior added that helps show and hide layers; or it can be as complex as a series of objects, behaviors, and commands all in one extension that builds a fantastic (and powerful) array of navigational elements.

For years, scripting gurus have been modifying their copies of Dreamweaver to include functionality not provided in the retail package and, quite often, giving away these modifications (with or without directions) to the general public for free. With Dreamweaver 4, Macromedia joined hands with these visionary coders and put together the Macromedia Exchange — an online repository of objects, behaviors, commands, and other assorted functions. In Dreamweaver MX, the legend continues, and the scope and power of extensions freely available on the Web is yours as a gift. Now there's no need to reinvent the wheel; chances are that someone has already packaged whatever you need as an extension, and all you need to do is find it, download it, and install it.


Discovering the Power of Extensions

Extensions are packages that install code files (most often HTML and JavaScript) into the Dreamweaver application to create new functionality by adding new objects, behaviors, and commands to the program's menus and panels. Objects insert a string of code into a user's document and appears in a tab in the Insert bar and in the Insert menu when its file is stored in a subfolder of the Configuration\Objects directory. Behaviors add interactivity to a Web page by adding JavaScript in the form of functions (actions) that are called through an event. Behaviors are accessed via the Behaviors panel. Commands are used to edit a user's current document, other open documents, or HTML documents on a local drive. They insert, remove, or rearrange HTML tags and attributes, comments, and text, and are accessed via the Commands menu.

Cross - Reference

Refer to Chapter 41 for working with behaviors and snippets of code.

Where to find extensions

You can find extensions at many Web sites, but the main source is the Macromedia Exchange (http://macromedia.com/ exchange/dreamweaver). The fastest way to get to the Exchange is from Dreamweaver:

  • Choose Insert ® Get More Objects.

  • Open the Behaviors panel and click Add (+) to choose Get More Behaviors.

  • Choose Commands ® Get More Commands.

You may also go there via your browser. After you get to the site, you can review the available extensions by category or keyword or do an advanced search to locate extensions by function, date, or author.

To download extensions, you must sign up as a member of Macromedia.com. Membership is free, it comes with other benefits, and — assuming you pay attention when filling out forms — your privacy is respected. Use your membership ID and password to log in and download extensions.

When you locate an extension at the Exchange, click the appropriate download icon to begin the download. You have two options: You may run the installer from the site or download the package to your hard drive.

Tip

Downloading extensions means you already have them should you need to reinstall. For efficiency, create a folder called DW_Extensions somewhere on your computer and download extensions there.

Other locations to download great extensions are

  • Project Seven — www.projectseven.com

  • MassimoCorner — www.massimocorner.com

  • Yaromat — www.yaromat.com

  • Web Assist — www.webassist.com

  • Rabi — www.dreamweaver-extensions.com

  • DMXZone — www.dmxzone.com

Installing extensions

To install an extension, use the Extension Manager, which is installed on your computer at the time you install the Studio or Dreamweaver program. You access the Manager by choosing Commands ® Manage Extensions or by locating the Extension Manager in your Macromedia program or application files.

There are two approaches to installing an extension:

  • Double-click the .mxp package to launch the Extension Manager, if it is not already open.

  • Make sure that the Extension Manager's Program menu is set to the Dreamweaver MX program; then choose File ® Install Extension from the Extension Manager.

The Extension Manager takes you through a series of disclaimers and agreements, after which the extension's files are placed into Dreamweaver. In most cases, you will be prompted to restart the Dreamweaver application.

In the Extension Manager's interface, you can also review all your installed extensions, as shown in Figure 42.1. By selecting an extension, you may review any notes or directions associated with it. You can easily uninstall an extension as well by unchecking the On box.

Click To expand
Figure 42.1: Notes associated with an extension provide quick-start information about the extension.
Start Sidebar
Some Popular Extensions

Here are some really useful extensions you should check out. Where indicated, these extensions are used in chapter exercises.

The following extensions are from the Macromedia Exchange:

  • Set Permissions — by Jay London. Use this extension to set file permissions on most Web servers. After installing, you can access this extension from the Remote portion of the Files panel by right-/Control+clicking a file. See Chapter 45 for more information about Set Permissions.

  • 508 Accessibility Suite — UsableNet.Inc. An extension to help you make your pages more accessible. Identify potential accessibility problems and repair them with FixWizard for tables and images and more. A must-have if your site must meet accessibility standards.

  • fiXMovie — by Jonathan Krop. This extension makes inserting a QuickTime movie pretty easy by adding the proper class ID and codebase information that allows newer IE browsers (PC) to download the ActiveX QuickTime control and plug-in. It also embeds the plug-in for browsers that use plug-in technology. Access this function from the Insert menu or bar. See Chapter 40 for more information about using QuickTime issues.

What can we say? Al Sparber and Gerry Jacobsen are the gurus of DHTML, and their extensions rock! Access these extensions from the Behaviors panel under the Studio VII ® listing. See Chapter 43 for exercises using many of the PVII extensions listed here. The following extensions are from Project Seven.

  • Snap Layers — Used in conjunction with Auto Layers, this extension makes it possible to implement sophisticated cross-browser/cross-platform drop-down menus that can be relatively positioned. You can use this to build menus or even a ToolTip or two.

  • Auto Layers — No more Show-Hide Layers, thanks. Why waste time setting the visibility of each layer when you can let this little gem batch handle your layers? Use it with Snap Layers to build drop-down menus or with AniMagic to build slideshows.

  • V Scroller and H Scroller — With either of the scroller extensions, you can build "frame-like" windows for your content without using frames.

  • Layout Designer 2 — Wow. CSS-P without the headache. This extension helps you use layers that you can position relative to another layer or to the browser window.

  • AniMagic — An amazing extension that makes animating layers as easy as 1-2-3. Use this to create slideshows, build sliding menu systems, or just to animate a layer across your page.

  • Style Sheet Loader — Not a behavior, but a command. This extension helps you use multiple style sheets for CSS-compliant browsers and noncompliant browsers. Access the extension from the Commands menu.

The following extension is from Web Assist:

  • PayPal E-Commerce Toolkit — Pay Pal is an inexpensive e-commerce solution that is safe, secure, and free (well, cheap, anyway), and this extension makes it easy to implement Pay Pal for a single item or many.

End Sidebar


Building a Command with the History Panel

Dreamweaver uses commands to modify your documents, from cleaning up buggy Microsoft Word HTML to formatting and sorting tables. You can tap into the power of Dreamweaver's extensibility and build your own commands from steps recorded as you complete them in your document. To build a command this way, you need to use the History panel.

About the History panel

The History panel records steps you make in the current (active) document. By default, it can record up to 50 steps. History is kept only as long as the document is open. Once closed, the history is purged. The panel does not record history across frames.

Tip

To set a higher number of history steps, choose Edit ® Preferences and click the General tab. Set the Maximum Number of History Steps to a new value. More history steps require more memory usage.

The History panel is a visual representation of the steps you take and can be used to step back and forth through the steps by sliding the small thumb up and down. This is a great alternative to using Ctrl/Command+Z to undo and Ctrl/Command+Y to redo, mainly because it is easier to see the steps and control how many steps (back or forward) you take. When you've made a step and want to proceed from that point, simply continue to work on the document, and the "future" steps are overwritten. You can also clear the entire history by using the panel options.

You can also use the History steps to repeat tasks you perform often. There are three methods you can use:

  • You can record steps as you take them. Recording limits you in what you can do, specifically preventing steps that may not be recorded, such as making a selection with the cursor. Recording is saved only as long as you do not make another recording and only for as long as the active document is open. While recording, Dreamweaver won't record steps taken if you switch from the active document to another.

  • You can select steps listed in the History panel and make a new selection and replay the steps. In a similar vein, you can copy the steps and replay them in another document. Copied steps are saved only as long as the maximum number of steps is not surpassed and as long as you do not copy again.

  • You can make a selection of steps in the History panel and save them as a command. This is the most versatile method of reusing History steps because the command is saved to the program and is available in the current document, any other open document, and in later Dreamweaver sessions after the site or the program has been closed.

Some limitations to what steps can be replayed exist, be it by replaying or by making a command. As you create steps in the History panel, you may see black lines separating some steps but not others — some mouse movements, such as making selections in the document window (by clicking or dragging), can't be played back or saved as part of a command. Try to avoid movements that can't be played back by using the arrow keys instead of the mouse to move the insertion point within the document window. If you need to make or extend a selection, hold down the Shift key while pressing an arrow key. You may find, too, that dragging an element from one location to another on the page causes a step with a red x to appear in the History list. Such steps are not repeatable in a replay or command.


Creating Your Own Insert Bar Objects

You can work more efficiently in Dreamweaver by creating your own custom objects (tools) for Dreamweaver's Insert bar. Objects are designed to insert a specific string of code into a user's document. Objects appear in one of the tabbed panels of the Insert bar (and in the Insert menu) when the object's file is stored in a subfolder within the Configuration\Objects folder. In most cases, if you add a new object to the Insert bar, you must add a new subfolder for it within the Configuration\Objects folder and also edit the insertbar.xml file. With simple objects, you place the files associated with the object into any of the existing directories within the Objects folder.

About objects

All objects are HTML files. In more complex objects, the <body> of its file can contain an HTML form that accepts parameters for the object (the number of rows and columns to insert in a table). In many cases, the <head> of the object's file contains JavaScript functions that process form input from the <body> and control what is added to the user's document. In some cases, a link to an external JavaScript file also adds to how the parameters for an object are handled. As a result, complex objects that allow the user to modify object parameters may have three related components:

  • The object file that defines what is inserted in your document

  • An 18¥18-pixel image that appears on the Insert bar

  • The insertbar.xml file that defines where the object appears on the Insert bar

But the simplest objects contain only HTML to insert, without a <body> and <head> tag, and you really don't need to be a JavaScript whiz to build one for yourself.

Start Sidebar
Where to Find Your User Data Files

When customizing your Dreamweaver application on a multiuser system, you'll need to know where to look for files that Dreamweaver created when it was installed. This is where you'll save any files you modify or add while extending — or customizing — your Dreamweaver.

In older operating systems like Windows 98, Windows ME, and Mac OS 9x, a single set of Dreamweaver Configuration files is shared by all users, even if the operating system is configured to support multiple users. For newer systems, like Windows NT, 2000, XP, or Mac OS X, a separate set of user files is created as follows:

  • Windows NT — C:\WinNT\profiles\username\Application Data\Macromedia\Dreamweaver MX\Configuration

  • Windows 2000 and XP — C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\Configuration

  • Mac OS X — Hard Disk/Users/username/Library/Application Support/Macromedia/Dreamweaver MX/Configuration

In some instances (Windows XP) the files may be hidden. To change the hidden state of the user files, do a search on your system that includes hidden files and folders. Search for the appropriate Application Data (or Library) file and right-click the folder (in the search results) to choose Properties or select it and press Command+I to get info.

End Sidebar

Building the Table object

A simple object is an HTML file without <head> or <body> tags. To build a custom table object, you would first build a regular HTML page, add the table desired, and then remove the disallowed code or copy the desired code and create a new text page with it. In the exercise that follows, you use a table premade for you. Be sure that you've defined a Chapter 42 site and have added the CD exercise files for Chapter 42:

  1. In the Files panel, open the Objects folder. Open sidebar_table.htm. Place your cursor into the table and select the table tag using the Tag selector. This 100 percent wide table has 1 row, 2 columns with a padding of 5 pixels, no spacing, and no border. The first column is set to 200 pixels wide and uses a background color in the cell. The second column is set to 100 percent wide because this is a hybrid table.

    Cross - Reference

    For more detail about hybrid tables, see Chapter 33.

    Inside the table, there are two placeholder images. The first holds open the fixed-width column against the push of the 100 percent value of the second column. Regular spacer GIFs are not used because Dreamweaver objects can't use a relative path; therefore, a placeholder is used. Note that the Alt text for each placeholder gives the user directions to replace the image. When the sidebar_table becomes a sidebar_table object and is used to insert this table into a page, the image could be selected and edited using the Fireworks Edit button.

  2. Click to Code view. Your selection is still selected. Copy. Now select all (Edit ® Select All) again. You want all the head and HTML code to be gone; then press Delete.

  3. Now paste the code back into the page. Switch back to Design view and choose File ® Save As.

    Now comes the tricky part — getting this file into the correct location.

  4. Navigate to the Objects folder within your username Configuration folder (be sure to read the sidebar about multiuser systems). Save sidebar_tables.htm into the HTML folder.

  5. From your desktop, locate your Chapter 42 site folder. Open it and Alt/Option+drag or copy the sidebar_table.gif file to the HTML folder.

The idea is to have the file and the gif in the same folder. Because both share the same name, they have an association. This is enough to make Dreamweaver pay attention to the new file. Notice in Figure 42.2, the new icon now shows up.

Click To expand
Figure 42.2: The icon made for the custom table now shows up in the HTML category.
Caution

When adding custom objects to existing Objects folders, take extreme care not to overwrite existing files by using the same filenames.


Customizing the Favorites Category

New to Dreamweaver MX 2004, you now have the ability to customize your own Favorites category in the Insert bar. And it couldn't be easier. You can add custom objects as seen in the previous exercise, but it's extremely easy to choose your favorite functions and keep them all in the Favorites panel.

  1. Right-/Control+click on any icon in the Insert bar.

  2. Select Customize Favorites. The Customize Favorite Objects dialog box opens (see Figure 42.3).

    Click To expand
    Figure 42.3: The Favorite Objects dialog box.

  3. Select any object from the left side.

  4. Click the >> button to add to the right side. All objects on the right side will be added to the Favorites category.

  5. If you decide to remove an object, select it and click the trash can icon.

  6. Use the up and down arrows to arrange the objects.

  7. Add a separator if you desire one. Separators are great to group the icons by topic or theme.

  8. Click OK when you are finished.


Summary

In this chapter, you looked at ways to extend Dreamweaver through the use of prepackaged extensions you download from the Macromedia Exchange or from many different developer sites. You learned how to install an extension and how to use the History panel to build a command. You added new tools to your program by creating new objects and learned how to modify the Insert bar to include a new panel for the tool.


Project Summary

No Habitat Alert pages were created or modified in this chapter, but you will use many of the extensions in other chapters to create features for the site. You could also build object tools for items used repeatedly for the site.


Chapter 43: Building a Dynamic Site with DHTML

Overview

Dynamic Hypertext Markup Language (DHTML) is a combination of HTML with a scripting language that enables you to change style or positioning properties of HTML elements. In this chapter, you learn about layers and explore many of Dreamweaver's built-in behaviors (and several extensions) that enable you to create some snazzy DHTML elements, such as drop-down and pop-up animated elements. You'll work through the exercises to create a draggable jigsaw puzzle and several navigation menus. All the elements in the exercise are cross-platform and work in most modern browsers, even Netscape 4x.


Understanding Layer Basics

To build DHTML elements, it's important to understand some key layer basics. A layer is a container similar to a table — it holds content. But it can be moved independently and arranged in your workspace wherever you like. Layers can be positioned using Cascading Style Sheets (CSS) and can become a powerful tool in your design arsenal. You can add behaviors to layers such as Drag Layer, which allows the user to move the layer and it's content on the screen. Layers can be hidden and made visible when the user performs an action. This is used to hide menus until the user mouses over the trigger or button. The following sections explore these features in more detail.

Understanding layers

Using layers doesn't mean you'll use a <layer> tag. The <layer> tag was a Netscape 4x tag that even Netscape doesn't support anymore. When working with layers in Dreamweaver, you will be working with a positioned <div> tag. A <div> is an empty HTML element. You can place it around other HTML elements. By itself, a <div> is ordinary; but when you use CSS to position it, it becomes magical — and it becomes a layer. Lest you worry that you need to brush up on your CSS, relax; Dreamweaver contains a special Layers panel and Layer object that help you build CSS-positioned <div>s without ever opening the CSS Styles panel. Working with the Layers panel, object, and the Property inspector, you can build layers by drawing or inserting them (see Figure 43.1).

Click To expand
Figure 43.1: Layer tools include the Layers panel, the Draw Layer object, and the Property inspector.

Because layers are created with CSS, only version 4.0+ browsers recognize them. Similar to other CSS elements, a browser that doesn't understand CSS ignores it. But this doesn't mean your layer won't exist. It does, but only as a <div> with other HTML elements within it. The <div> is rendered inline where it occurs in the code rather than positioned with x, y, and z values.

Special layer properties

Layers have special properties that no other page elements have, and the Z-index is one of those properties. Besides the usual x and y coordinates that all elements have (relative to the top left corner of the current HTML document), layers have a third z coordinate that indicates the layer's position in the z-index or stack. Layers exist in the document and can overlap each other, much like stacking sheets of different-sized paper. To keep track of which layer is on top or below, the z-index is used. The lower the value, the lower the layer is in the stack. The new document's default z-index is zero.

Layers also have a visibility property. A layer may be visible or hidden, or it can inherit either state from another layer. By default, layers are visible. There are many other special properties for layers that you will discover in the exercises given in this chapter. All layer properties may be edited with the Property inspector:

  • Layer ID lets you specify a name to identify the layer in the Layers panel and in JavaScript code. Every layer must have a unique name — layer styles (CSS) are applied as IDs rather than as classes. Names may use only standard alphanumeric characters. No special characters, such as spaces, hyphens, slashes, or periods, are allowed.

  • L and T (left and top) specify the position of the layer's top left corner relative to the top left corner of the page, or of the parent layer if nested.

  • W and H specify the width and height of the layer. Measurements (lengths) are pixels (px) by default but other units (mm, cm, in, pc, pt, and %) may be used. The unit must follow the value without any space between. Neither value is required, and layers will "stretch" to accommodate content if the Overflow property is set to Visible. In many cases, it is best not to specify a height.

  • Z-Index determines the z-index, or stacking order, of the layer. In a browser, higher-numbered layers appear in front of lower-numbered layers.

  • Vis specifies whether the layer is initially visible. The default value is visible but may be set to Hidden or Inherit, which is derived from a parent layer. Hidden hides the layer contents, regardless of the parent's value. Visibility can be (and often is) controlled through JavaScript Behaviors.

  • Bg Image specifies a background image for the layer. Click the Folder icon to browse to and select an image file.

  • Bg Color specifies a background color for the layer. Leave this option blank to specify a transparent background.

  • Class allows you to easily add a defined class to a layer.

  • Tag specifies the HTML tag used to define the layer. Generally (for cross-platform, cross-browser compatibility) use <div>.

  • Overflow controls the way layers (created with <div> and <span> only) appear in a browser when the content exceeds the layer's specified size.

    • Visible — Extra content appears in the layer, and the layer stretches to accommodate.

    • Hidden — Extra content is not displayed in the browser.

    • Scroll — The browser should add scroll bars to the layer whether needed or not.

    • Auto — The browser displays scroll bars for the layer only when content exceeds the layer's boundaries.

    Caution

    The Overflow option has uneven support across browsers.

  • Clip defines the visible area of a layer. Left, top, right, and bottom coordinates define a rectangle in the containing layer (from the top left corner of the layer). The layer is "clipped" so that only the specified rectangle is visible, like a view port.

  • Src enables you to display another HTML document within the layer. Click the Folder icon to browse to and select the document.

    Note

    Dreamweaver does not display the other document in the layer.

Drawing versus inserting layers

The two main methods of adding layers to a page are to draw them with the Draw Layer object in the Common toolset or the Layout toolset of the Insert toolbar or to use the Insert menu to choose Insert ® Layer. There are dramatic differences in the way your layers are rendered and behave in a browser based on how you created the layer.

Draw Layer places the <div> code above all other HTML content and below the <body> tag, which is the preferred placement. Insert Layer places the <div> code in the document wherever your cursor is located. Where layer code is placed in the rest of the HTML code is important. For the most part, it should always be separate of the other (ordinary) HTML elements. After all, it's CSS that specifies where the layer appears in the page, not where the code is in the document. But the fact is, placing positioned <div> tags in other block elements (such as a table cell) can cause dramatic problems with your page. Different browsers render layers in different ways. Some browsers always measure from the top left of the document; others look at the parent container, be it the document or a table cell. For these reasons, Drawing layers will yield better results.

Many developers believe that layer code should be placed below all other HTML elements, just above the closing </body> tag. Why? It's quite possible that a browser may have Styles disabled. Because positioned <div> tags require CSS, the positioning fails and the <div> renders inline. Would you rather have the mess be above your other content or below? It's up to you, but thankfully, you can easily move the <div></div> layers anywhere you want in Code view.

Tip

You can select code in Code view and drag it to a new position.

Because layers and the tools used in Dreamweaver are so complex, this chapter contains many exercises to show the finer points of DHTML in addition to explanations.


Building a Drag Layer Puzzle

Drag Layer is a Dreamweaver behavior that enables the dragging of layers in an HTML page. The function also includes options to constrain the drag direction and amount, snap the layer when within a specified distance to a target, and you will have the option to add alerts if the user incorrectly positions the layer. You can use Drag Layer to build movable interface elements or, as shown in Figure 43.2, a jigsaw-style puzzle. Figure 43.2 shows the puzzle as it will appear when you finish the following exercise.

Click To expand
Figure 43.2: The completed puzzle for the Habitat Alert site.
On the CD-ROM

Save the Habitat 43Alert43 folder from the 43chapter43exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, choose the Edit Site option in the Files panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site Let's use the Drag Layer behavior to build the Habitat Alert card puzzle. For this exercise, the layers necessary were created during export from Fireworks.

  1. Use the Files panel to locate and select puzzle\puzzle_card_done.htm, and press F12 to preview it in a browser. The puzzle pieces are stacked to one side. Drag pieces to put the puzzle back together. Some of the pieces pop up an alert when you successfully place them in the correct position.

  2. Close the finished example and open puzzle\puzzle_card.htm. The Drag Layer behavior requires layers; in this case, the puzzle tray and all its pieces were created in Fireworks using masking and the CSS Layers export option. Click to select the first puzzle piece image (images are exported as rectangles), and delete its name in the Property inspector. Repeat for all puzzle piece images. (You don't have to rename the images.) See the Caution note for explanation. Save your page.

    Caution

    Export CSS Layers from Frames in Fireworks uses the frame names for the image files, as the image name, and for the layer names. Because layers must have unique IDs, the Drag Layer behavior will fail unless you either remove or rename the images.
    Cross - Reference

    For more information about masking in Fireworks, see Chapter 17.

  3. The Drag Layer function must be called before the user can drag any layer, so it is best to attach the behavior to the <body> tag using the onLoad event. Select the <body> tag using the Tag selector.

  4. Use the Behaviors panel. Click Add (+) to add the Drag Layer behavior. The Layer menu lists all the layers in the active document. Select layer p1. Click the Get Current Position button. All of these layers are already in their final Drop Target positions because that's how they were created in Fireworks. The behavior uses the coordinates to know when the user moves the draggable layer to the correct location. Before you finish the exercise, you move all the layers (except for the puzzle tray) to new positions so that the puzzle is ready to use. Set the Snap if Within field to 10 pixels to make the puzzle a bit harder, as shown in Figure 43.3. Because the user may need to move the puzzle pieces in all directions, leave the movement of the pieces unconstrained.

    Click To expand
    Figure 43.3: The Drag Layer basic options

    Tip

    Use Constrained (limited) movement when creating moveable interface elements, such as slider controls or a sliding menu.

  5. Click the Advanced tab of the Drag Layer dialog box. Leave the default settings (Figure 43.4), but add alert('way to go!'); in the When Dropped, Call JavaScript field. This creates a pop-up alert window with the text as indicated. The Call JavaScript field can also accept similar expressions or function calls but executes whether or not the user drops the layer successfully.

    Click To expand
    Figure 43.4: The Advanced Drag Layer options include adding JavaScript alerts.

  6. Close the dialog box.

  7. Repeat step 5 for each layer except the puzzletray, each time selecting the correct layer, getting the current location, and setting the target zone.

  8. After all pieces are draggable, randomly reopen the Drag Layer behaviors for some of the pieces and set an alert, as you did in Step 6, changing the message between the single quotes.

    Tip

    When done, save the page and preview in a browser to be sure that all pieces are draggable. It's easy to accidentally forget a layer or use the same layer twice, and you want to be sure that all layers are draggable before you move the layers from their original positions in Dreamweaver.

  9. After you have tested and are sure that every piece is draggable in a browser, return to Dreamweaver and move all the layers to the right of the puzzle tray. Click an image and select its layer. When layers are at the top of the document, you can't grab the layer handle; use the Tag selector to select the <div> instead.

    Tip

    Grabbing the image to move the layer drags only the image out of the layer. Always grab the layer handle or select the <div> and use the arrow keys. Hold the Shift key down to move in 10-pixel increments.

  10. You can now test in a browser and solve the puzzle!


Using Set Text of Layer to Create Submenus

Set Text of Layer is a behavior that dynamically writes HTML to an existing layer. The existing layer is visible in the HTML document, but it is empty and therefore appears hidden, because layers are see-through unless a background color or image is set or other visible HTML content is placed within.

Caution

An empty layer whose <div> code is above other HTML structures may cause the HTML structures (tables, images, text, and so on) to displace in IE 5 for Mac OS. To avoid this, place a nonbreaking space <&nbsp;> inside the "empty" layer.

You can use Set Text of Layer to create submenus for navigation buttons. A single layer is used, and the Set Text of Layer behavior writes each submenu's links on demand — onMouseOver. The Set Text of Layer behavior is used to both dynamically write the desired menu items into the layer (onMouseOver the button) and to dynamically write "nothing" (as in no text at all) into the layer (onMouseOut) It is hiding nothing; instead, it is writing back the nonbreaking space, which cannot be seen.

  1. Select and preview set_text_done.htm from the set_text folder. Move your mouse over each button to see its submenu. Move your mouse off a button and wait. After ten seconds, the submenu disappears because the timer writes back the empty layer.

  2. Open index.htm from the set_text folder, and draw a layer that is 300x30 and is positioned at L=460 and T=125. Name the layer submenu.

  3. Open links.htm from the settext folder. Select all (Edit ® Select All) and copy. Close the file.

  4. Select the first button (Learn) and click Add (+) to add the Set Text ® Set Text of Layer behavior. In the dialog box that opens (see Figure 43.5), paste.

    Click To expand
    Figure 43.5: The Set Text of Layer dialog box.

    Tip

    Always create your submenu content in another file and copy its code. Note that the file you copied from had no <head> or <body> tags and therefore was in Code view by default. Always copy the code from Code view when pasting into a Set Text of Layer window.

  5. Change the text of the links (and even the null links) to make this button's submenu items. Organizing the links on separate lines makes the code easier to read. To add more links, paste more times. Delete unwanted links.

  6. Repeat for each button, changing the link content and paths as needed.

  7. Select the (empty) layer. Right-/Control+click the <div> tag using the Tag selector, and set its class to .subs. Because your submenus are in paragraphs, a CSS style sets properties to add margin, font family, and more to style the submenu.

  8. Save and preview to see the submenus.


Animating a Sliding Menu Bar

Habitat Alert site Some very cool menus are easy to build when you use the AniMagic by PVII extension, shown in Figure 43.6, freely available on the Project Seven Web site (www.projectseven.com). You need to download and install this extension to do the exercise in this section.

Click To expand
Figure 43.6: A sliding What's New menu.
Cross - Reference

Chapter 42 discussed how to download and install extensions.

With AniMagic by PVII, you build the layer, add a table and the tab graphic, use a few CSS styles to control the appearance of the layer's and the menu's text links, and add the AniMagic action. We'll be using this menu system for the Habitat Alerts administration pages. Here's how it works:

  1. You must have the AniMagic extension installed. Select and preview slidemenu\index_done.htm in the chapter43 folder. When you mouse over the What's New tab, a layer animates and moves to the right 200 pixels to display What's New links. Click the What's New tab to close the menu.

  2. Open slidemenu\index.htm. This page contains a layer that is ready to use. It contains a table, the tab graphic, and some applied styles. The menu's background element is created with a Y-repeat (tiles vertically only of a background image applied to the layer itself. The layer is already in the closed position, and the goal is to animate it to open when the users move their cursor over the tab and animate it to close when users click the tab. Using two different events makes this a much easier task.

  3. Select the tab graphic and use the Behaviors panel to click Add (+) StudioVII ® AniMagic by PVII.

  4. Select the layer to animate (whatsnewLayer) from the Layer Name menu (see Figure 43.7). Set the Slide to Target Positions. The layer is currently at L=-200px and T=0px. The negative (-200) value means that the majority of the layer is off-screen to the left. When users move their cursor over the tab, you want the layer to open. Set L=0 (it should already be at zero anyway) and leave T=0. You don't need any vertical movement in this case. All Slide to Target Position settings are measured from the top-left corner of the document.

    Click To expand
    Figure 43.7: Add settings to open the menu in the AniMagic by PVII dialog box.

    FrameRate and Delay affect the animation of the layer. Lower FrameRates produce slower animations; higher FrameRates result in faster animations. The FrameRate determines the number of pixels the layer moves per frame. The Delay time affects how many milliseconds elapse between frames. Another way to think about this is you are setting the frames per second for your animation.

  5. Set the FrameRate to 5 and the Delay to 10. The remaining settings don't apply for this exercise. Click OK to close the dialog box and set the event to onMouseOver.

  6. With the tab still selected, click Add (+) to add the same AniMagic behavior again. Select your layer (whatsnewLayer), and this time, set L=-200 and leave Top at zero.

  7. Set FrameRate to 5 and the Delay to 10. Click OK. Set the event to onClick.

  8. Save your page and preview. Move your mouse over the tab to see the menu, and click it to close.


Snapping Menus

A Snap menu is a thing of beauty. Using the Snap Layer and AutoLayers extensions — freely available from the Project Seven Web site (www.projectseven.com) — you can build menus that appear on demand and hide just as easily. In fact, the functionality of the example you'll see is triggered entirely onMouseOver. Preview chapter43_exercise\snapmenus \snaps_done.htm and move your cursor over the rollover buttons. Figure 43.8 shows the Snap menus for the Learn button. Each button has its own submenu.

Click To expand
Figure 43.8: Snappy menus are a "snap" to build.

Understanding the menu

This menu system functions using the onMouseOver event. There are four menu layers (MenuLearn, MenuAct, MenuSupport, and MenuFind) and one layer named MenuCloser. The main menu layers contain an image at the top to create the small down-pointing arrow; each menu uses a different graphic so that the arrow is below the button. Below the graphic, a table is added. The table uses one column and is set to 266 pixels wide. Each menu item has its own row. Below the table another single-celled table (at 266 pixels) is added, and a graphic to create the menu bottom is added. All menus use the same bottom graphic. All the menu layers are hidden.

Tip

Edit your Tag Library (Edit ® Tag Library), and change the settings used for the <table> tag to Line breaks after Tag Only. The line break before the table tag causes a gap between the menu's top and the table in some browsers. Putting the <img> and <table> tags on the same line fixes the problem.

There are lots of ways to design your menus. This menu design has all the submenus set at the same width, and they all line up flush to the left edge of the Learn button. You can use a similar method to create menus that line up under different buttons; the design and logic is up to you.

The MenuCloser layer is larger than the largest of the menus. Its width is 300x200. A spacer GIF has been inserted into the layer, and its dimensions are also 300x200. The MenuCloser will be used to "hide" any open menu. The MenuCloser has a z-index of 1, and all the menus have a higher z-index value; this is critical because the MenuCloser must be below any menu. A behavior to hide all menu layers is applied to the spacer. The hide occurs onMouseOver.

The buttons have two behaviors applied to them: Snap Layers positions a menu relative to the Learn button's left and top edge, using offsets to give pixel-perfect placement. The same Snap event also moves the MenuCloser layer to nearly the same position, except the offsets place it just to the left of the button so that a portion of the MenuCloser layer and spacer GIF are exposed to the left, right, and bottom of the snapped menu. Both layers (Menu and MenuCloser) are made visible with the AutoLayers behavior (onMouseOver) applied to the button.

With the button's menu visible and the (invisible) MenuCloser below it, the user can select any item from the menu. But when the user moves to the left, right, or below the menu, the cursor encounters the MenuCloser's spacer with its AutoLayers functions set to hide any open menu (and the MenuCloser itself, as well). The same AutoLayers function is set to spacers that surround the buttons, too, just in case the user escapes the buttons to the left, right, or above.

Building the menu

Habitat Alert site The snapmenus\snaps.htm file contains all the necessary layers. Here's what you do:

  1. Open snapmenus\snaps.htm from your Chapter 43 site folder that you've defined. You must have the Snap Layer and AutoLayers extensions downloaded and installed.

  2. Open the Layers panel to check the layers. All the layers are hidden, but if you select a layer, you can temporarily see it in the document without making it visible. All the layers are in different locations. Use the Layers panel to Shift+click all the layers to select them. In the Property inspector set the multiple-layers position to T=0 and L=0, then press the Enter/Return key to update the document (see Figure 43.9).

    Click To expand
    Figure 43.9: Use the Property inspector to position multiple layers.

    Select a menu layer in the Layers panel. Note that the layers do not have a height setting; it's often better to avoid setting a height for layers unless you have a good reason to have one. The content of the layer expands the height; setting a height could result in problems if the overflow of content isn't set to be visible.

  3. Select the MenuCloser using the Layers panel. When visible, click to select the spacer inside the layer. Click Add (+) to add the behavior StudioVII ® AutoLayers (see Figure 43.10). When the dialog box opens, choose Set Two from the Set menu. Don't select anything in the Layers list; it may look like something is selected, but it isn't. Click OK to close the dialog box. Those actions tell the browser that the list of layers is Set Two and to hide all these layers.

    Click To expand
    Figure 43.10: If no layers are selected, all layers will be hidden. The Set to Use menu is useful when you have other layers that are not part of the menu.

    Tip

    Note the event for the behavior. Chances are that it isn't onMouseOver. Because all functions for this exercise use the onMouseOver event, you can simplify the steps by clicking the event to choose Show Events ForÍVersion 3.0 and Later Browsers. This doesn't affect the actions but does limit the event to the one you need.

  4. Select the Learn button. Click Add (+) to add the behavior StudioVII ® Snap Layers. As shown in Figure 43.11, choose btn_learn from the Anchor Object menu. Choose MenuLearn from the Layer to Snap. Each of the menu buttons are 17 pixels tall. Leave the Left offset at zero, but set the Top offset to 17 so that the menu won't be over the button.

    Click To expand
    Figure 43.11: The Snap Layers dialog box with two Snap actions: one for the button's menu and the other for the MenuCloser.

  5. Add a new snap action by clicking the (+) button at the top left of the dialog box. Leave the Anchor Object set to btn_learn, but change the Layer to Snap to MenuCloser. Set the Left offset to -20. The menus are 266 pixels wide. The MenuCloser layer is 300 pixels wide. By setting the MenuCloser back about 20 pixels from the left edge of the Learn button, the spacer extends beyond the area of the menu on all sides except the top. Leave the Top offset at 17.

    Caution

    Never offset the MenuCloser so that it covers the button or weird flickering occurs as the button is covered by the MenuCloser.

  6. Close the Snap Layers dialog box. Click Add (+) to add the behavior AutoLayers (StudioVII ® AutoLayers) and show both the MenuCloser and the MenuLearn layers (see Figure 43.12). Choose Set Two from the Set to Use menu. Click OK. Because you have the Behavior events to use v3.0 events, the event is already set to onMouseOver.

    Click To expand
    Figure 43.12: Showing the MenuCloser and MenuLearn layers in Set Two.

  7. Repeat Steps 5 and 6 for each button. Because of the design of the menus (aligning with the Learn button), the Anchor object is always btn_learn, although the Layer to Snap changes with each button. And don't forget: Every button snaps the MenuCloser. Use the values in Table 43-1 for each button.

    Table 43-1: Snap Layers and AutoLayers Values

    Button

    First Apply Snap Layers

    AutoLayers

    Event

    Learn

    Action #1:
    Anchor Object=btn_learn
    Layer to Snap=MenuLearn
    Left=0
    Top=17

    Action #2:
    Anchor Object=btn_learn
    Layer to Snap=MenuCloser
    Left=-20
    Top=17

    Select Set Two

    Show MenuCloser

    Show MenuLearn

    onMouseOver

    Act

    Action #1:
    Anchor Object=btn_learn
    Layer to Snap=MenuAct
    Left=0
    Top=17

    Action #2:
    Anchor Object=btn_learn
    Layer to Snap=MenuCloser
    Left=-20
    Top=17

    Select Set Two

    Show MenuCloser

    Show MenuAct

    onMouseOver

    Support

    Action #1:
    Anchor Object=btnlearn
    Layer to Snap=MenuSupport
    Left=0
    Top=17

    Action #2:
    Anchor Object=btn_learn
    Layer to Snap=MenuCloser
    Left=-20
    Top=17

    Select Set Two

    Show MenuCloser

    Show MenuSupport

    onMouseOver

    Find

    Action #1:
    Anchor Object=btn_learn
    Layer to Snap=MenuFind
    Left=0
    Top=17

    Action #2:
    Anchor Object=btn_learn
    Layer to Snap=MenuCloser
    Left=-20
    Top=17

    Select Set Two

    Show MenuCloser

    Show MenuFind

    onMouseOver

  8. Save and preview your page. Try every menu. Try moving away from a button by moving upward; this leaves the menu displayed and is a problem because there's no MenuCloser to trigger the hiding of the menu layers.

  9. To the left of the Learn button, to the right of the Find button, and above all the buttons are spacer GIFs. Apply the AutoLayers behavior (onMouseOver) to each spacer, choosing Set Two and leaving all layers unselected to give these spacers the same functionality as the MenuCloser. Save and preview again to see how this fixes the problem of capturing the user's mouse exits from the buttons.


Summary

In this chapter, you created animated DHTML elements using layers. Taking advantage of several must-have extensions, you tapped into Dreamweaver's extensibility to make your tasks easier. You learned to use Dreamweaver's Drag Layer, Set Text ® Set Text of Layer functions. Using the Project Seven extensions AniMagic by PVII, Snap Layers, and AutoLayers, you explored how you might use DHTML to build different menu systems.


Project Summary

In this section, you added several menu options to the project site. You also added a draggable jigsaw puzzle.

Files Prepared for the Habitat Alert Web Site
Files | What Was Done | Where to Now
puzzle\puzzle_card.htm | You added an interactive puzzle. The source files and development concepts were used to create online puzzles for the Habitat Kids section of the project site. | Will be added to the site design.
snapmenus\snaps.htm | You used an extension to snap the menus. | The snap menus you built in the example page could be added to the project site by building them in the template. By keeping the template region locked, you can push the menus to all the site's pages and update the menus after the site is complete to make the menu links active.


Chapter 44: Publishing Your Site

Overview

You're finally ready to get that page or site online — you've developed the site, added navigation, and placed the images, and you've even put a little zip in the pages with some interactive media or DHTML elements. So now what? Getting your site published — generally through file transfer (FTP) to a Web server — involves moving the site files from your local computer to a remote location on a Web server. In Dreamweaver MX 2004, this is done with the Files panel, with a Web server solution, and by connecting through your ISP.

But where do you publish? Many Internet Service Providers (ISPs) offer free Web server space with an account. You may also "rent" Web server space through hosting companies. Some ISPs also offer hosting, sometimes called virtual servers, at reasonable prices. But how do you know whom to choose? And, after you have Web server access, how do you get the files from your computer to theirs?

Macromedia Dreamweaver includes software that lets you connect your computer to a remote Web server through FTP or a Local Area Network (LAN). Options for secure connections and versioning control are also available. However you connect, Dreamweaver's publishing client makes it easy to upload your site, download from any existing site, and manage your site's pages in both locations.


Getting Ready to Publish

Before you move your site to a Web server, there are some useful features in Dreamweaver that you should use to ensure that the site is really ready to publish. These features include spell checking, link verification, and testing for target browsers. Of course, there's no reason to wait until the last moment to use any of these features, but definitely use them before you publish. Additionally, adding meta tag information to your site ensures that potential visitors can find your site easily.

Checking spelling

Choose Text ® Check Spelling to check the spelling in the current (active) document. The Check Spelling command ignores HTML tags and attribute values. The spell checker uses an English (U.S.) spelling dictionary by default. To change the dictionary, choose Edit ® Preferences ® General or Dreamweaver ® Preferences ® General (Mac OS X) and select the dictionary you want to use from the menu of dictionary options. You can download more dictionaries from the Dreamweaver Support Center (www.macromedia.com/support/ dreamweaver).

To check and correct spelling, choose Text ® Check Spelling or press Shift+F7. The Check Spelling dialog box opens when an unrecognized word is found. In the Check Spelling dialog box, shown in Figure 44.1, choose from the following options:

Click To expand
Figure 44.1: Check Spelling suggests changes for misspelled or unrecognized words.

  • Add to Personal — Adds the unrecognized word to your personal dictionary

  • Ignore — Ignores this instance of the unrecognized word

  • Ignore All — Ignores all instances of the unrecognized word

  • Change — Replaces this instance of the unrecognized word with text that you type in the Change To text box or with the selection in the Suggestions list

  • Change All — Replaces all instances of the unrecognized word in the same manner

Unfortunately, there's no sitewide spell check option, so every document must be opened, checked, and saved. A Check Spelling on Save extension (by Public Domain, Ltd.) is available at the Macromedia Exchange. To enable it, install the extension and then choose Edit ® Check Spelling on Save. The Check Spelling on Save function will be invoked for every saved document, and the dialog box used is the standard Check Spelling dialog box.

Checking links

Before you publish, it is critical to check the validity of every link in your site. Broken links (pages that produce 404 error messages in the browser) and orphaned pages (unreferenced pages in the site file, not accessible from any site page) are a problem. Broken links frustrate your site visitors, and orphaned files may cause missing content and otherwise waste server space. When a site may contain hundreds (or even thousands) of pages, checking link validity can be a time-consuming process.

The Check Links feature can search for broken links and unreferenced files in a single (open) file, a folder (portion) of a local site, or an entire local site. Dreamweaver can validate internal links within the current site; a list of external links that appear in the selected document or documents is compiled but not verified. The Link Checker panel, shown in Figure 44.2, is opened after Dreamweaver checks the links to display the results. The Link Checker is located in the Results panel group.

Click To expand
Figure 44.2: The Results panel houses the Link Checker.

You can use the following methods to check links:

  • To check links for the current file, open a file from the root folder. Choose File ® Check Page ® Check Links. A Results report appears in the Link Checker panel. Save the report by clicking the Save Report button.

  • To check links for files or folders in a local site, select the files or folders to check in the Files panel. Start the check by right-/Control+clicking a file and choosing Check Links ® Selected Files/Folders from the context menu. Again, a results report appears in the Link Checker panel. In the Link Checker panel, select a specific link report from the Show pop-up menu to view another report. Your choices are Broken Links and External Links. You can save the report.

  • To check links in an entire site, use the Files panel to choose a site; then choose Site ® Check Links Sitewide. A report appears in the Link Checker panel. View the Broken Links, External Links, or Orphaned Files reports by clicking any of these options in the Link Checker panel. Orphaned files may be deleted directly from the report list.

Fixing broken links

You can fix broken links and image references in the Link Checker panel, or you may open files from the list and fix links using the Property inspector:

  • To fix links in the Link Checker panel, first run a link check report. Select a broken link. Click the Folder icon that appears next to the link to browse to the target file or type the correct path and filename. Press Tab or Enter/Return to accept the URL change. A dialog box may appear to prompt you to fix the references in other files with the same link. Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver update the current reference only.

  • To fix links in the Property inspector, double-click an entry in the File column of the Link Checker. Dreamweaver opens the document. Select the broken image or link, and highlight the path and filename in the Property inspector. Use standard methods (Browse for File or Point to File) to fix the link or type a new URL.

Checking target browsers

Technically, it is best to perform browser checks long before you are ready to publish for efficiency's sake. Dreamweaver can test your page code against specific browsers and report on whether your tags and elements are supported by the browser chosen. There is an icon right on the Document toolbar to the right of the Title that alerts you to browser errors (see Figure 44.3).

Figure 44.3: A new icon added to the Document toolbar for easy access and notification of browser errors.

Check Target Browser does not change the page in any way. Text files called browser profiles are used to determine which tags are supported. The following browser profiles are included:

  • Microsoft IE for Macintosh versions 5.2

  • Microsoft Internet Explorer versions 3 to 6

  • Mozilla version 1

  • Netscape Navigator versions 3 to 7

  • Opera versions 2.1 to 7

  • Safari version 1

You can select which browsers to check by clicking on the Browser Check icon and selecting Settings (see Figure 44.4).

Click To expand
Figure 44.4: The Settings dialog box, where you can choose which browsers to check.

You can also run a target browser check on a document, on a directory, or on an entire site by clicking the green arrow in the Check Target Browser panel, as shown in Figure 44.5.

Click To expand
Figure 44.5: Check target browsers for a page, files or folders, or the entire site. Save the results by clicking the Save Report icon at the left side of the panel. If you don't save it, the report is lost.

  • For the current document, first save. Dreamweaver performs checks on the last saved version of the file and does not include unsaved changes.

  • For a folder or site, use the Files panel to select a site. Dreamweaver performs the target browser check on all HTML files in this folder, and any subfolders. Target browser checks may be performed on local files only.

    Note

    Script files are not checked.

If you want to edit the actual XML, you can select the Edit Ignored Error list. You can edit the list to prevent certain errors from being displayed.

Adding meta tags

A meta tag is a <head> element that supplies information about the current document. Some meta tags include character encoding, author, copyright, keywords, and descriptions. You can use other meta tags to supply information to the server, such as an expiration date or refresh interval and URL.The following meta tags are available:

  • Attribute — Specifies whether the <meta> tag contains descriptive information about the page or HTTP header information.

  • Value — Specifies the type of information for the tag. For example, type="description" or type="keywords".

  • Content — The actual information for the tag. An example is Meta Keywords, where the content is a list of keywords separated by commas.

Meta keywords and descriptions

Keywords and descriptions provide valuable information about your site to spiders and robots (software programs specifically designed to "harvest" site information on the Internet) that use them to categorize sites. When you do a search at a portal, such as Yahoo or Google, the information returned by the query displays meta information gleaned from keyword lists and descriptions, among other items.

To add keywords to your current document, follow these steps:

  1. Choose Insert ® HTML ® Head Tags ® Keywords. Or open the HTML category of the Insert bar and select the Head icon (second from the left).

  2. In the dialog box that opens, list your words, separating them by commas. Close the dialog box.

  3. To re-access the list of keywords for editing, choose View ® Head Content. Click the key icon and look in the Property inspector.

  4. To add a page description, choose Insert ® HTML ® Head Tags ® Description, type your descriptive sentence into the dialog box, and close it. Access description meta tags from the Head Content bar (View ® Head Content), and modify them using the Property inspector.

    Tip

    You may copy meta tags from one document to another by selecting the meta tag icon and copying. Switch to a new document, view its head content, and paste.
    Cross - Reference

    See Chapter 41 for more about Meta Refresh.


Setting Up Web Server Access

A Web server is a special computer connected to the Internet that contains software to serve — send — Web pages upon request. A Web server is required to publish or "make public" your site's pages. Where your site is located depends upon how you aquire Web server access. Whether you use space at an ISP, have hosted space, or run your own Web server, moving your files to the Web server requires server access. You provide the access method and information to Dreamweaver using the Site Setup options:

  • You may use the Site Definition Wizard (Basic site setup) and provide the information in the screen, as shown in Figure 44.6. Choose Site ® Manage Site. Select your site and then click the Edit button for an existing defined site, or choose Site ® Manage Sites and click the New ® Sites button when starting from scratch.

    Click To expand
    Figure 44.6: Questions in the Site Definition Wizard are designed to elicit the proper information about how you connect to your Web server and where the server is located.

  • You may click the Advanced tab, choose the Remote Info category, and enter the information there, as shown in Figure 44.7.

    Click To expand
    Figure 44.7: The Remote Info category is accessed in the Site Definition's Advanced screens.

In both cases, after you select the proper Server Access method and provide the information about the server, you can test the connection with the Web server by clicking the Test Connection button. A successful connection message occurs if Dreamweaver can connect using the information, as shown in Figure 44.8.

Click To expand
Figure 44.8: A successful connection test.
Start Sidebar
Domains and Server Solutions

If you are using space provided by your ISP, chances are that your site lives in your account's directory, and the URL to get to your site may start with the ISP's domain name. A domain is an "alias" for a set of Internet Protocol (IP) numbers that represent a computer on the Internet. Anyone may purchase a domain name, and many online companies provide a service that lets you do this. The alias must be unique and is actually "rented" for a year or more at various prices. Common domains are .com, .org, and .net, among others. Some domains are reserved for government or educational institutions. A bevy of newer domain types relate to countries other than the United States.

A virtual Web server — generally a "hosted" solution where a company specializing in Web server access rents you server space for your domain — contains many sites. The actual location of your site's folder (its physical path on the computer) is different from the URL for your domain. For example, the site for Habitat Alert has a URL of www.habitat-alert.org, but it lives on a server at Nexpoint (www.nexpoint.com).

End Sidebar

Server access options

No matter how you choose to set up your remote server access — using Basic or Advanced site setup — certain information is required. You must choose from the following methods of accessing the Web server:

  • (LAN) Local Access Network — To access a Web server that is part of a local network or Internet Information Services (IIS) or Personal Web Server (PWS) folders on a computer in the network.

  • (FTP) File Transfer Protocol — To move files to a remote Web server using specific protocols for handling the various files as binary or text files.

  • (RDS) Remote Development Services — Remote HTTP-based access to files and databases for Web servers that support ColdFusion.

  • (VSS) SourceSafe Database — Connect to your Web server using a SourceSafe Database. SourceSafe Database support is only available for the Windows platform when Microsoft Visual SourceSafe Client version 6 is installed.

  • (WebDAV) Web-based Distributed Authoring and Versioning — Connect to a Web server using WebDAV protocol. For this access method, you must have a server that supports the protocol, such as Microsoft Internet Information Server (IIS) 5.0 or Apache Web server.

The vast majority of sites are uploaded via FTP. Besides the FTP server access option, you must provide a minimum of information in your site definition.

  • FTP Host — This varies depending upon how you aquire Web server access. For a domain, it might be www.mydomain.com or simply mydomain.com. It may be the actual IP numbers (as in 121.23.983.4) or, as most ISPs require, may start with ftp://

  • Host Directory — This is the top-level folder to which you have access if nothing is added to the field. To specify a subfolder, add its path here.

  • Login — Your username or ID to access the Web server.

  • Password — The password used to verify your username. Adding the password in the Site Definition saves it. If you choose not to add it here, you will be prompted for it when connecting to the Web server.

Optional information

Other information is optional or required only for specific servers that are protected by a firewall — hardware or software that prevents unauthorized access to the server. Add firewall information by enabling the Firewall option and clicking the Firewall Settings button. Passive FTP and SSH — encrypted secure logon — are server-specific options.

Uploading design notes

Design notes are files saved into a special _notes folder in the site. Information about source files (as in Fireworks or Flash design files) or added status files that contain information about the state of a site file are saved as .mno files. By default, design notes are uploaded with the rest of the site. To disable uploading or to disable the keeping of design notes, click the Design Notes category of the Advanced Site Definition. Use the check boxes to disable or enable.


Using FTP

When you've added your Web server information to your site definition, you may connect to your Web server and transfer files from your local root folder on your computer to a remote root folder on the Web server. The Host Directory field provides the path to the remote root folder.

A mirrored structure between the local and remote folders is ideal and makes the most of Dreamweaver's FTP features. Mirroring means setting up a structure that compares folder to folder. For example, let's say that your Web files must live in a folder named wwwroot on your Web server. An index page placed in that folder would be your home page. To mirror the local and remote folders, your local root folder would be equal to wwwroot. If you have more than one site, you can place different sites in different folders. In that case, the host directory path provided in a site's definition would reflect the matching root folder to be found on your Web server, as shown in Figure 44.9.

Click To expand
Figure 44.9: The host directory indicates the remote root folder, which ideally should mirror the structure of the local root folder.
Tip

You cannot specify a folder in the host cirectory path that doesn't exist on the Web server. This often perplexes new FTP users; how do you connect, if you cannot specify the folder? The trick is to build a site that you will use to administer your Web server access at the top or root level. Connect and use the same right-/Control+click method used to add new folders to your local site to add new folders to your remote directory. Then change the host directory path for your site definition to include the new folders.

Connecting to the Web server

Because Windows and Macintosh versions of Dreamweaver's Files panel (window) are different, using the FTP client varies a bit, too. There are several ways to work with the Files panel when uploading or downloading files:

  • For the integrated workspace (Windows only), click the Expand/Collapse button at the top right of the Files panel, shown in Figure 44.10, to expand the docked panel so that it reveals the Remote and Local sides.

    Figure 44.10: Expand the Files panel.

  • For the floating workspace or for Macintosh systems, click the small white arrow found at the bottom left of the File window to expand and reveal the Remote and Local sides of the window.

Click the Connect icon to access the Remote server for OS or workspace. Figure 44.11 shows a connected site and the list of remote files and folders on the Web server. These root folders are mirrored.

Click To expand
Figure 44.11: Connecting to the Web server reveals the mirrored Web files and folders.

Putting and getting files or folders

When you move a file or folder from the local root to the remote Web server, you are putting the file or folder. When the direction is the opposite, you are getting files or folders. There are several ways to put or get files:

  • You may use the Put and Get arrow icons from the expanded or collapsed Files panel (window). First select a file, folder, or the entire site (root folder); then click Put to move the files to the Web server.

  • You may put or get the current document by clicking the File Management icon in the Document bar to access menu options, as shown in Figure 44.12.

    Figure 44.12: File Management Put and Get options.

  • You may choose Site ® Put (or Get) to upload the current active document, as shown in Figure 44.13.

    Click To expand
    Figure 44.13: Put or get the current document using the Files panel Options ® Site menu.

When you put a file that is contained within a subfolder of the local root folder, Dreamweaver builds the matching structure to maintain the relative location of the file within the site.

Tip

You can also drag a file, a folder, or a selection of files and folders to any folder accessible to you on the Web server. A small + icon appears next to the cursor when you drag your selection to a remote folder.

Synchronizing site files

A Sychronize option is available in the Site menu. You can use this option to move newer iles in either direction (put and get). It works by comparing the modification dates for files on the Web (remote) server and the local computer. Your options, shown in Figure 44.14, are as follows:

Click To expand
Figure 44.14: Synchronize dialog box.

  • Synchronize — Selected Local Files or Entire Site

  • Direction — Put Newer Files to Remote; Get Newer Files From Remote; or Get and Put Newer Files (both directions)

When you click Preview to start the synchronization process, you see a log of files that Dreamweaver will put or get, depending on the choices you made (see Figure 44.15). You may uncheck any file and click OK to start the put or get or both.

Figure 44.15: A preview of the proposed synchronization.
Caution

Some Web server software prevents Dreamweaver from getting the actual time, in which case Dreamweaver may either disable the Synchronization feature (grayed out in the Site menu options) or actually give false information about the status of a file. Servers using Serve-U FTP software will not work with Dreamweaver's synchronization unless the host disables the option to use all lowercase for files and directories in the setup.


Summary

In this chapter, you learned how to check spelling and links and to test your code against browser profiles. You also learned how to provide information to Dreamweaver about the Web server to which you will publish your site, by modifying the site definition to include FTP settings. Finally, you learned the basics of moving your files and folders from your computer to a Web server and back, by putting, getting, and synchronizing a site.


Part VI: Using ColdFusion MX in Dreamweaver MX 2004

Chapter List

Chapter 45: The Role of ColdFusion in Your Web Sites
Chapter 46: Creating a ColdFusion Application in Dreamweaver
Chapter 47: Working with Forms and ColdFusion MX


Chapter 45: The Role of ColdFusion in Your Web Sites

Overview

When Macromedia merged with the Allaire Corporation in 2001, it added an extremely powerful tool to its arsenal of design applications: ColdFusion. ColdFusion gives Flash developers and Dreamweaver designers the ability to create technically sophisticated Web and Intranet applications, and — unlike many programming languages — ColdFusion makes it easier and more intuitive for nonprogrammers to do so.

In fact, the relationship between ColdFusion and other Macromedia Studio products is now so closely integrated that it's possible you may have already been using ColdFusion features in your Flash movies or Dreamweaver sites without realizing it. Dreamweaver, in particular, makes it easy to create basic ColdFusion applications without having to know much about ColdFusion Markup Language (CFML) or how ColdFusion Server works.

All of the chapters in Part VI are designed to take you beyond the basics — to help you understand what goes on in a ColdFusion application, how it works with other Macromedia tools, and how you can use it to add functionality to the Web sites you build. Some of the examples will be shown in the context of the Dreamweaver interface, but most will be displayed as plaintext to help you understand how ColdFusion's programming language works behind the scenes in your application.

If you've come to ColdFusion by way of a design background, don't worry. Although ColdFusion is a different tool from Dreamweaver, Flash, or Fireworks, it has still been designed with simplicity and ease of use in mind. Let's begin by looking at some of the basic concepts you'll need to understand before you move into the hands-on examples in the following chapters.


ColdFusion MX and the Client - Server Relationship

Team LiB

ColdFusion MX and the Client–Server Relationship

If you installed the special development edition of ColdFusion along with the other Macromedia Studio products, you probably noted that, unlike Flash or Dreamweaver, ColdFusion doesn't have its own dedicated graphic interface. That is, ColdFusion isn't a traditional development application in which you open a GUI and start creating pages. Instead, it's a program that runs in conjunction with your Web server (or a Web server on a remote host). When ColdFusion is present on a Web server, it gives designers and developers the ability to create applications — Web sites that do much more than look nice.

Note

If you didn't install ColdFusion with the other Studio products, don't worry. You learn more about installation and configuration in the next chapter.

To understand how ColdFusion works as a server, start by considering a typical Web page. When a user types a URL into his or her browser (the client) and clicks the Go button, the browser sends a request for a page to a Web server somewhere on the Internet (the server). The server accepts the request and returns the requested HTML page.

However, if you've ever worked with a basic CGI program, such as a "mailto" form processor, you know that URLs don't always have to call plain HTML pages. They can also call programs, such as CGI applications or applets written in Perl, C, or Java. These programs are designed to perform a series of actions and then, typically, return the results of those actions to the user as HTML that's visible in a browser.

For example, consider that basic mailto CGI program: It takes the user's input from a form, formats it into an e-mail, and then sends the mail off to a predesignated address. Now imagine you're working for a client who asks you to expand the basic mailto function so that a registrant's name and e-mail address are archived in a system database at the time the form is submitted. It's likely that the original mailto program is written in Perl or C, both of which are powerful languages, but which make it difficult to customize even a basic program like mailto unless you happen to have programming knowledge to match your designer's skills.

Enter ColdFusion, which is designed to give nonprogrammers the ability to build basic programs such as mailto, as well as more sophisticated programs that can drive entire Web sites — all without the developer having to learn a complex programming language. ColdFusion accomplishes this by installing itself as a companion program to your Web server software. When your server receives a request for a plain HTML page, ColdFusion does nothing. However, when it gets a request for a page ending with the extension .CFM (known as a template in ColdFusion jargon), it processes the program instructions on the page and returns the results to the user, usually as HTML visible in his or her browser.


Understanding the Different ColdFusion Versions

The version of ColdFusion that ships with Macromedia Studio is a special developers' edition designed to let you preview your ColdFusion pages and applications on a local server. In most cases, this is all you need to get started working with the program, because it's likely you'll be developing and testing your pages locally and then transferring them to a live environment that also supports ColdFusion. But it's also important to understand that there are two different versions of ColdFusion Server and many different options available among them.

Version 1: Macromedia ColdFusion Server

This is the most common version of ColdFusion Server, and the one you're most likely to find deployed in hosted environments. It includes all of the infrastructure needed to run ColdFusion applications, and an embedded Java server based on Macromedia's JRun. It comes in two varieties: Professional, which is the standard, and Enterprise, which includes additional security and performance features designed for large-scale Web applications.

Version 2: Macromedia ColdFusion for J2EE application servers

This special version of the program is designed to Java 2 Platform, Enterprise Edition, or as it's more commonly known, J2EE. With this version, ColdFusion MX runs on top of an existing J2EE application server, such as IBM's WebSphere. This version is most often found in environments where ColdFusion pages will be used in conjunction with J2EE applications.


Introducing ColdFusion Markup Language

When you open the source of a CGI program, such as mailto, in a text editor, you see a lot of programming code that's likely to be unfamiliar. Even diehard Perl programmers admit that their language is one of the least intuitive for non-techies to understand. In contrast, when you open the source of a ColdFusion template in a text editor (or Dreamweaver's code view), you see code that looks like a standard HTML page containing familiar elements, such as HTML tags, and additional elements similar to those shown in Listing 45-1.

Listing 45-1: A Sample ColdFusion Template Containing HTML and CFML Tags
Start example
<cfmail from="admin@somedomain.com" to="jim@anotherdomain.com"
subject="User Info Request">
     Hi Jim;

     A user has requested information from the Web site:

     Name: #form.firstname# #form.lastname#
     Email: #form.email#
</cfmail>

<html>
<head>
     <title>Your Form Has Been Submitted</title>
</head>

<body>
<h1>Your Form Has Been Submitted</h1>
<cfoutput>
     <p>Thanks, #form.firstname# #form.lastname# for requesting more
information. Mail has been sent to our site administrator announcing
your interest. You will be contacted shortly at the e-mail address you
supplied, #form.email#.</p>
</cfoutput>

<cfif form.registerdrawing is 'yes'>
     <p>In addition, you have been entered in our site drawing.</p>
<cfelse>
     <p>You have chosen not to register for our drawing. Thanks for
visiting our site.</p>
</cfif>

</body>
</html>
End example

CFML is a tag-based language, which is why even nonprogrammers usually take to it quickly. Like HTML tags, most CFML tags have an opening tag, such as <cfoutput>, and a closing tag, such as </cfoutput>. Text or other elements appearing within a set of tags inherit properties assigned to the tag. Even without prior knowledge of programming or ColdFusion, you can open a template like Listing 45-1 and quickly get an idea of what's going on. That's one of the main attractions of ColdFusion and one of the features nonprogramming designers find most endearing.


Understanding Dynamic Page Content

ColdFusion enables you to add dynamic content to your Web pages and Flash MX 2004 movies. In this case, "dynamic" isn't a measure of quality, but rather denotes that some or all of a page's content may be inserted into the page at the time a user's browser requests it.

Note

The opposite of dynamic content is static content: plain HTML pages or Flash movies in which images, text, and so on are fixed and can't be changed without editing the files.

Consider a basic shopping cart application. As you move through the store selecting products, the contents of your cart change with each item you select for purchase. Obviously, there's no designer sitting at the store's headquarters frantically creating new HTML pages or Flash movies each time you select a product; the store application is generating dynamic content behind the scenes.

One of the reasons ColdFusion is an ideal tool for producing dynamic content is that it enables developers to quickly and easily connect their Web pages to databases. As the contents of your databases change, so do your Web pages — in real time and without any additional design on your part.

Start Sidebar
Understanding the ColdFusion Administrator

ColdFusion is unique among the Macromedia Studio tools in that it doesn't have a formal interface. Rather, it is administered from a special Web URL, and only through a Web browser. Macromedia recommends Microsoft's Internet Explorer, because some of the administrator's features may not be supported in other browsers.

If you installed the program in the default folder, point your browser to http://localhost/cfide/administrator to access the ColdFusion Administrator.

If you're using the Web server that comes with ColdFusion rather than your own stand-alone server, you need to append port 8500 to the server name: http://localhost:8500/cfide/administrator.

You'll be asked to log in using the password you supplied when you installed ColdFusion. After you're in, you'll see settings allowing you to change the way ColdFusion runs, displays error messages, connects to databases, and much more. If it seems like unfamiliar territory, don't worry. The examples in this section introduce you to the administrator's features you need to know.

End Sidebar


How ColdFusion Works with Databases

ColdFusion can connect to a variety of common database formats, including Microsoft Access and MS SQL Server, Oracle, MySQL, and more. It does so via software called Java Database Connectivity (JDBC) and ODBC (Object Database Connectivity), which provide a relatively common ground so that the program code you build to access the contents of one brand of database is portable to another database product with a minimum of modifications.

When you begin building templates in ColdFusion, you'll set up data sources (DSNs), which are essentially JDBC pipelines to your database files or server. Data sources enable you to bring information in and out of your databases using the Web as a gateway. For example, a Microsoft Access database of products and customers can be displayed as a Web page or series of Web pages with only a few minutes' work in a ColdFusion template. In addition, developers can quickly create simple Web forms allowing the same database to be used as a repository for user data.


How ColdFusion Works with Other Macromedia Studio Products

With the release of Studio MX and MX 2004, Macromedia has created new systems of integration among its products. ColdFusion's closest allies are Dreamweaver and Flash.

Integration with Dreamweaver

Because ColdFusion doesn't have a design interface of its own, most developers turn to Dreamweaver as the tool of choice. Within the Dreamweaver GUI, Macromedia has added several wizard-like functions that automate otherwise tedious ColdFusion tasks. For example, with the click of a Dreamweaver button or two, you can generate ColdFusion SQL queries, insert code to send e-mail from a template page, display the contents of a database, or build a basic form to input data into a table.

Because Dreamweaver supports both design and code views, it's ideal as a ColdFusion development tool. Those who come to ColdFusion from a designer's background can take advantage of Dreamweaver's time-saving functions within a graphic interface; veteran ColdFusion developers will find all the features to which they may have grown accustomed in ColdFusion Studio.

Integration with Flash

Savvy Web developers have been using Flash and ColdFusion together for several years. The combination of Flash's ability to create sophisticated Web interfaces and ColdFusion's ability to handle complex programmatic tasks make it possible for individuals and small teams to quickly design sites that would take months or years with other tools. With the introduction of Studio, developers have a new set of tools that allow Flash and ColdFusion to talk to each other and exchange data. For example, using Flash Remoting Services, the contents of a complex ColdFusion query can easily be sent to a Flash movie, where they can be displayed dynamically. Variables generated by a ColdFusion template can be passed off to Flash ActionScript for processing in real time.

In addition, Studio has introduced the concept of the ColdFusion component, essentially a chunk of program code in which both input and output can be shared between ColdFusion templates and Flash movies.

Habitat Alert site In this section of the book there are instructions for the Habitat Alert administration site. The exercises pertaining to this site will be prefaced with Admin 1, and so on. All these admin exercises can be used with other server technologies as well as ColdFusion, but ColdFusion is used in all the exercises.

Start Sidebar

Admin 01 Powering an Administration Web Site

Before you get started building the data-driven intranet site, it's important to understand a few things. The intranet or administrative site is completely separate from the Internet or public site.

On the CD-ROM

In the chapter45 admin_CFM folder there is a copy of the habitat_alert_admin folder, so you need to copy it to your hard drive and define a new site for it before following these exercises using ColdFusion.

About the pages

To work through these project exercises, you'll be provided with "blank" pages to which you add server-side logic designed to facilitate the completion of one or more tasks. The "blank" pages are not truly blank; they contain the HTML elements that build the design or layout of the pages, which can save you time and allow you to focus your energies toward learning to use Dreamweaver's Web application tools. The administrative site is a separate site from the public site. As you work through these exercises, you may typically be working in one page but accessing the page via another, because the logic used in the pages requires specific information to be present in the server's memory so you can test the functionality of the logic you're building. If this all seems overwhelming, don't worry. The exercises are designed step-by-step, and you will be instructed when it is necessary to test your pages.

About the database

The database used is the same database used in the Habitat Alert main site. A copy is also provided in the admin_CFM folder. All databases used in this book are Microsoft Access 2000 databases.

Typically, you would use only one database because you want only one verified source for your content. If two databases exist, both need to be synchronized, which means that both need to be modified every time a user is added, deleted, or has authorization level or other details changed. This is not practical.

Of course, you could use the database provided for the main Habitat Alert section of the book and vice versa, assuming that either contains the appropriate table structures. For the exercises given here, an additional AuthLevel column is required, and that is the major reason why a different database was used: to show you how you can separate records based on one field's value.

Understanding permissions

Certain permissions to access and interact with Web server directories and files must be configured properly for your Web application to function as intended. For security reasons, you should keep your database file in a directory that has different permission settings than those provided for your publicly viewable Web site. In the typical remotely hosted Windows site, the database directory is given Write permissions but is not viewable to the anonymous "guest" accessing your Web pages. Your Web site is a different story — the user must be able to read the pages and execute your Web application's scripts.

If you encounter errors when testing your Web application scripts and pages, you might need to adjust the permissions for the database folder (and its contents). By default, installing IIS on your computer creates settings for the subfolders of the wwwroot directory of your local Web server. To view the settings, you can right-click your site folder. To change the permissions for your database folder, use the Sharing, Security, and Web Sharing tabs to enable or disable specific permissions. When working locally, set permissions for a database folder to Write only. Your site folder should have Read and Execute permissions.

If you are using IIS, refer to the help documentation prior to modifying the permissions when developing your Web application locally. For a remotely hosted solution, consult the technical support or administrator for the Web server account.

For more information about anonymous authentication and Web server permissions, read the following technical notes at the Macromedia Web site:

http://www.macromedia.com/support/ultradev/ts/documents/ anonymous_
authentication.htm
http://www.macromedia.com/support/ultradev/ts/documents/ web_server_
permissions.htm
Caution

Setting incorrect directory permissions could allow malicious users to access and modify your files. Always carefully read and understand documentation prior to modifying security settings in a publicly accessed directory. On Windows XP Pro systems, you might want to restrict the permissions allowed for "everyone" in your site to "read" and "execute scripts" only and set the database folder to have only "write" permissions.

Using a separate administration site

Because all users need access to their subscriber information to change their e-mail address, add or remove options to receive a newsletter by e-mail, or simply change an address or phone value, they must be given access to the database. This is always a dangerous thing. Although the average user changes profile records, a malicious person might attempt to change other records simply for the challenge. Separating the two sites makes it less likely that average users would stumble over pages that allow modification to the database (other than their own profiles).

About the exercises

The exercises for the Habitat Alert administration site are indicated by Admin 1, and so on in front of the exercise name. It is difficult to present exercises in a linear fashion. Web application development is not generally linear; for example, you might build task functions to add, delete, or modify users and after verifying the success of those goals, come back to all pages to add restrictions for accessing pages. Otherwise, you might find yourself required to log in to test your pages. For best results, follow the exercises as listed numerically or in the following order:

01 Powering an Administration Web Site

02 Define a Local Site

03 Define a Remote Site

04 RDS Login

05 Add a Recordset

06 Bind Data

07 Add a Dynamic Attribute

08 Add a Repeat Region

09 Add a User

10 Delete a User

11 Modify a User

12 Go To a Detail Page

13 Login

Where to go now

When you've determined where your testing server is located (local or remote), go to the Admin 02 Define a Local site or Admin 03 Define a Remote Site exercises in Chapter 46.

End Sidebar


Summary

In this chapter, you learned about the basic concepts that make ColdFusion work, as well as how it is often employed in Web applications. You learned that ColdFusion is a server-side application that works in conjunction with your existing Web server, and that when it's present on a server you can quickly build template pages your site's users can access in the same way they view a standard HTML file. You also learned about ColdFusion Markup Language (CFML) and the concept of dynamic data, which may be used to build truly interactive sites. Finally, you learned how ColdFusion MX works closely with all major brands of database software, along with other products in the Macromedia Studio collection.


Chapter 46: Creating a ColdFusion Application in Dreamweaver

Overview

Now that you've learned about the basic concepts behind ColdFusion, it's time to take your knowledge into a hands-on environment and begin constructing some basic templates. In this chapter you return to the Habitat Alert Web site to create a couple of templates that perform two common Web tasks: displaying the contents of a database containing names and addresses, and inserting form data into a database. When you complete the chapter, you'll know enough about basic ColdFusion tags to adapt the templates for your own projects. With a little tinkering, the two templates you build in the following examples can be customized to become a simple guestbook, a user registration system, or a technical support request interface.

Note

The tutorials in this and subsequent chapters require that you have ColdFusion installed and running. If you don't, please see Appendix C for instructions.
On the CD-ROM

In the Chapters folder on the CD, you will find a database folder containing three sample databases. There is also a copy in the habitat_alert_start folder. Database files sometimes get corrupted, so a couple of copies have been provided on the CD.


Creating a Page to Display Newsletter Subscribers

You begin by building a simple template that displays the names and addresses of users who've subscribed to the Habitat Alert newsletter. This template uses ColdFusion to pull dynamically the subscriber information from a Microsoft Access database and display it to the user as an HTML page. This type of page might be used by the Habitat Alert Site administrator to monitor the list of current subscribers.

Because you don't yet have any subscribers, you need to start with a sample database populated with some usernames, located in the chapter46_exercise folder on the CD-ROM accompanying this book. The Microsoft Access database ha.mdb contains a table called subscribers, which in turn contains several fields, or columns, all defined as the text data type, except for SubscriberID, which is a numeric, "long integer" data type, as shown in Figure 46.1.

Click To expand
Figure 46.1: The subscriber database table shown in Microsoft Access' Design view.

When you change Microsoft Access to show the Datasheet view (View ® Datasheet View), you see the sample users currently stored in the table, as shown in Figure 46.2. Each row in the view is called a record and contains the information for a unique subscriber.

Click To expand
Figure 46.2: The subscriber database table shown in Microsoft Access' Datasheet view.

Setting up a testing server and data source

Place a copy of the HabitatAlert46 folder (inside the chapter46exercise folder) on the CD into the www.root folder of either CFusionMX or Inetpub (IIS); then define the site in Dreamweaver.

Tip

It's a good security measure to keep databases that will be used as ColdFusion data sources out of the publicly available folders on your Web site. That's why you placed ha.mdb in a folder at the same level as "html" (a publicly readable folder) rather than within it.

Before beginning the ColdFusion template, you need to give Dreamweaver a few details about your site:

  1. Habitat Alert site With the HabitatAlert46 site open in Dreamweaver, create a new file. In the Welcome Window, select ColdFusion in Create New column or choose File ® New. When prompted for a file type, choose the category Dynamic Page and the document type ColdFusion. Click the Create button. In the Title field, name the page Subscribers and save it as show_subscribers.cfm in the Act folder.

    Note

    To preview ColdFusion templates, they must reside within a folder available to your standalone Web server or the built-in Web server that comes with ColdFusion (usually c:\cfusionmx\wwwroot).

  2. Choose Modify ® Templates ® Apply Template to Page. Select Basic Page and click Select. Delete all the content in the Main Content region. You'll use this page to display the subscribers in the database.

  3. Open the Application panel at the right of the screen. Click the Database tab. The first two items should already be checked off, assuming you've opened the Habitat Alert site and have specified a new ColdFusion document. Click the third option: Set Up the Site's Testing Server.

  4. Follow the Setup Wizard, and supply it with your server details. If you installed ColdFusion on your local machine, your home URL is usually http://localhost/. If you're using ColdFusion's built-in Web server rather than a stand-alone server (such as Microsoft IIS), your URL needs to include port 8500, or http://localhost:8500/, as shown in Figure 46.3. If you're unsure about your home URL, use the Test URL button to verify it.

    Click To expand
    Figure 46.3: In Advanced view, your Testing server dialog box should look similar to this using the standalone version of ColdFusion.

    Cross - Reference

    Refer to Appendix C for installing ColdFusion.

  5. When your testing server is set up and verified, return to the Database tab under the Applications panel and choose Specify RDS Login Information. Supply the password you entered for Remote Development Services (RDS) when you installed ColdFusion and click OK.

  6. Now you'll need to create a ColdFusion data source. Click the Modify Data Sources button in the Database panel (top right next to Refresh). Dreamweaver attempts to open your default Web browser and load the ColdFusion data source setup panel. Remember that if you're using the built-in Web server that comes with ColdFusion, you need to modify the URL to include :8500 after localhost.

    Tip

    If your computer is on a network you may need to use the computers name instead of localhost.

  7. Log in to the ColdFusion administrator using the password you supplied when you installed ColdFusion. This opens the ColdFusion Administrator's Data Source panel, as shown in Figure 46.4.

    Click To expand
    Figure 46.4: ColdFusion MX Administrator's Data Source panel.

  8. In the Data Source Name box enter ha; then choose the Microsoft Access driver to signify that you're setting up an Access Database. Click Add to see an expanded dialog box. Click the Browse Server button next to the Database File form box. A selection box opens, allowing you to navigate to the location of your sample database, ha.mdb. When the database has been selected, click Apply, and then Submit. You should see your database in the list of data sources, with an "ok" in the right column.

  9. If you don't see the ha database added to the Database panel, close and restart Dreamweaver. You'll need to reopen the show_subscriptions.cfm page again.

    Note

    If you're working with Windows 98, the process of setting up a data source is slightly different. You'll need to first set up a Windows ODBC data source using the ODBC Data Sources icon in your Windows Control Panel. Then return to ColdFusion Administrator's Data Source page, supply a data source name, and choose ODBC Socket as the driver type. When you submit this information, you'll see a list of all your Windows ODBC data sources, from which you can pick the one you set up in the previous step. For more information on this, refer to the tutorials in the Bonus\CFM folder on the CD.

Dreamweaver builds a Connections folder at the root level and stores the string information in an CFM page within, using the Connection name as the filename. In each page where you need access to your database, you will query the database via the connection, using a recordset to "bind" data to your page. Figure 46.5 shows the newly created Connections folder at the root level in the Files panel and displays the now available subscribers table from the admin.mdb database that is accessed via the new connection.

Click To expand
Figure 46.5: With your connection in place, you can view fields for the tables available in your database.
Start Sidebar

Admin 02 Defining the Local Intranet Site

Defining the Administrative Intranet site is no different than defining any Dreamweaver site, except that you provide more information than is typically required for a static site, including a choice of server technology and the path to an application server. This exercise assumes the use of ColdFusion (CFM), so your choice will be ColdFusion. You use the standalone version of ColdFusion on your Windows-based computer.

Defining the local information

Be sure to copy the admin_CFM folder to the ColdFusionMX\wwwroot folder on your hard drive. Typically on a PC, when you copy files from a CD to your hard drive, they are read-only, and you won't be able to edit the pages.

  1. Choose Site ® New Site.

  2. Click the Advanced tab if you are in Basic (Site Definition Wizard) mode.

  3. Name the new site ha admin.

  4. Click the Browse for Folder icon and navigate to the admin_CFM files you copied in the ColdFusionMX\wwwroot folders. Locate and open the admin_CFM folder.

  5. Click the Select button.

Defining the remote information

Because you placed the project files into the ColdFusionMX\wwwroot directories, you don't need to set up access to a remote root folder on a Web server. ColdFusion serves as both the Web server and the application server. Typically, your pages must be uploaded to the Web server before you can preview them locally or remotely when using an application server. When the local and remote roots are the same location, you can skip the Remote Info category.

Defining the testing server

You need to tell Dreamweaver MX 2004 which server technology you will use and provide the path and access method to the application server (see the following figure).

  1. Select the Testing Server category.

  2. From the Server Model menu, choose ColdFusion.

    Caution

    Because this is a new site and will contain only pages created using Dreamweaver MX 2004, you can leave the next menu at the default of Dreamweaver MX 2004 Pages Only. If you're adding Web application logic to an existing site where pages built with earlier versions of Dreamweaver exist, you need to indicate that, because certain functions, such as templates and Web application logic, are configured differently.

  3. Choose Local/Network from the Access menu.

  4. Click the Browse for Folder icon next to the Testing Server Folder field and navigate to c:\ColdFusionMX\wwwroot\. Open admin_CFM and click the Select button.

    Click To expand
    The Testing Server category filled in for ColdFusion.

  5. Check to be sure that the URL prefix reads c://localhost:8500/admin_CFM.

    Note

    Dreamweaver understands how to build a URL prefix for your server configuration. However, when your setup is different, Dreamweaver can add an incorrect URL with too many folders listed in the path. The logic here is that this is the path to which you would browse to reach your site using a Web browser. For example, the real path to the site is c:\ColdFusionMX\wwwroot\admin_CFM. But only the wwwroot folder is public; it is the top-level directory to which the public has Web server access. A domain, such as www.mydomain.com, is typically hosted using a specialized company's Web server that might host thousands of sites. The real location might be:

    d:\mydomain.com\wwwroot\

    but the URL prefix would be:

    http://www.mydomain.com
    Note

    To test your connection, click the Basic tab. Click Next if you don't see the Test URL button. Click the Test URL button. When you are done, click the Advanced tab again.

  6. Click OK to close the Site Definition dialog box; then click Done.

  7. In the Files panel, right-click the root folder and select Turn Off Read Only, or choose File ® Turn Off Read Only. This removes the read-only restriction on all the pages in the site folder.

  8. Using Windows Explorer, to set the database folder permissions to Write, right-click the database folder (in Inetpub\wwwroot\admin_ASP folder) and select Sharing and Security. In the Sharing dialog box, enable sharing of the folder. In the Web Sharing dialog box, select the Share This Folder option. When the Edit Alias dialog box opens, uncheck the default Read and Scripts permissions inherited by the directory via the permissions allocated to the site folder, and enable Write permissions only. Rename the database alias admindb; then click OK.

    Click To expand
    The database folder and contents need Write permission only.

Where to go now

If you were beginning a brand-new site without the help of this book, you might spend some time building a layout for your pages. However, pages are already provided for you. They are located in the admin_pages folder in your new site.

If you are a Macintosh user, use remote_hosted.pdf to complete the tasks outlined in this document.

For Windows users who have completed the tasks outlined in this document, go to the "Admin 03 Defining a Remote Intranet Site exercise.

End Sidebar
Start Sidebar

Admin 03 Defining a Remote Intranet Site

Defining the Administrative Intranet site is no different than defining any Dreamweaver site, except that you will provide more information than is typically required for a static site, including a choice of server technology and the path to an application server. This exercise presumes using ColdFusion (CFM), so your choice will be ColdFusion. This document outlines how to use this configuration with a remotely hosted Web and application server that supports the use of an Access database with ColdFusion.

Verify that your hosting company supports ColdFusion with Access, and ask whether your account provides such functionality. If it does, ask if they require your database to be placed in a specific directory or whether you may simply upload it and ask for the proper permissions/sharing to be set.

If your hosting company requires that a data source name (DSN) be used rather than a connection string (which is not likely), let them know that you will be asking for such after you have moved the site files on to their Web server.

The steps given here for defining the remote site reflect a typical Windows server setup, where multiple users are given accounts on a Web server. Typically, the public folder for such an account would be located at d:\accountname\wwwroot. If you had more than one site, additional folders would be added to separate one site from others, as in d:\accountname\wwwroot\habitat.

You would also have a username and password that allow you access to the remote Web server. You will need these to complete the exercises for this chapter.

Defining the local Info

Be sure to copy the admin_CFM folder (Bonus Tutorials/CFM/admin_CFM) to your computer and rename it habitat. The steps that follow presume the desktop as a location for the local root folder. Typically on a PC, when you copy files from a CD to your hard drive, they will be read-only, meaning you will not be able to edit the pages. Mac OS 9x users will not have this issue.

  1. Choose Site ® Manage Site ® Select New/Site.

  2. Click the Advanced tab if you are in Basic (Site Definition Wizard) mode.

  3. Name the new site HA Admin.

  4. Click the Browse for Folder icon and navigate to the habitat folder you copied to your desktop. Locate and open the folder.

  5. PC users should click the Open button, and then click the Select button. Macintosh users will simply highlight the habitat folder and click the Choose button.

Defining the Remote Info

As stated earlier, the steps given here presume a very typical setup for remotely hosted sites. If your hosting solution is different, you will need to determine that information and make substitutions in paths where necessary.

  1. Select the Remote Info category.

  2. Choose FTP from the Access menu. This adds new fields to the screen where you will add the information necessary to access your Web server. Presuming the typical setup given earlier, you would add the following:

    Host — mydomain.com

    Host Directory — wwwroot

    Username — yourusername (we'll use fred)

    Password — We're not telling! Add your password here if this is your computer.

    Caution

    You cannot actually choose the habitat folder yet because it doesn't exist on the Web server. So you have set up the host directory to use the next level up. Your first action will be to upload or create a new folder in the wwwroot directory; then modify your site definition to add the habitat folder to the host directory path.

  3. Make sure that you are online, and click the Test button to verify that Dreamweaver can reach your Web server.

  4. Click OK to close the Site Definition dialog box.

  5. Connect to the server. You must be online to do this. For PC users, click the Expand/Collapse button to view both sides of the Files panel. For Mac users, click the small white arrow to expand and view both sides.

  6. Right-/Control+click on the wwwroot folder in the remote Web server files. Add a New Folder, naming it habitat.

  7. In the Site drop-down list in the Files panel, choose Manage Sites/Select HA Admin and click Edit/Site.

  8. Click to the Remote Info category and add habitat to the host directory path, which should now be wwwroot\habitat. The settings should be:

    Host — mydomain.com

    Host Directory — wwwroot\habitat

    Username — fred

    Password — ******

Defining the Testing Server

Now you need to tell Dreamweaver MX 2004 what server technology you will use and then provide the path and access method to the application server.

  1. Select the Testing Server category.

  2. From the Server Model menu, choose ColdFusion.

  3. Choose FTP from the Access menu.

  4. Since you cannot browse to the remotely hosted testing server, you must add the correct information about the server. This should be the same information used in the Remote Info category.

  5. Dreamweaver uses the information you give to build what it thinks should be the proper URL Prefix. In this case, the prefix is incorrect for the reasons listed in the note that follows.

    Note

    The wwwroot folder is the top-level directory that permits public access. It is your domain as far as the Web-browsing public knows. mydomain.com and wwwroot are equivalent. The URL prefix used for mydomain.com would be http://www.mydomain.com. However, you are building a new site at one level deeper; therefore, you must add the new folder to the URL prefix. Note, however, that there's still no wwwroot in the path because www.mydomain.com and wwwroot are the same.

  6. Be sure to click the Test button to see if Dreamweaver can successfully connect to your remote testing server. If it can, click OK to close the Site Definition dialog box.

    If you cannot connect to the testing server, first be sure that you have provided the correct information. Be sure that your hosting company does support ColdFusion. Verify with your hosting company's support technicians that the host directory path you are using is correct — chances are that you would never be able to even connect to your account if it were not. Make sure that the technicians know that you want to develop a ColdFusion site.

  7. PC users must select the root folder of the new site in the Files panel. From the Files panel Options menu, choose File ® Turn Off Read Only. This removes the read-only restriction on all the pages in the site folder.

Uploading the site pages

When you are using a remote solution, all the pertinent pages, images, and such need to be on the remote Web server in order for you to test your pages in a Web browser, whether locally or remotely.

Select everything in the habitat folder in the expanded Files panel (window) and upload it to the remote Web server.

Where to go now

If you were beginning a brand-new site without the help of this book, you might spend some time building a layout for your pages. However, pages are already provided for you. They are located in the admin_pages folder in your new site.

Go to the "Admin 04 RDS Login for the ColdFusion Server" exercise to continue the exercises for the administration site.

End Sidebar
Start Sidebar

Admin 04 RDS Login for the ColdFusion Server

RDS stands for Remote Development Services, and you need to configure this prior to setting up the data source. Once you've set up your testing server, follow these steps:

  1. Open the view_users.cfm page from the Files panel.

  2. Open the Database tab under the Applications panel and choose Specify RDS Login Information. Supply the password you entered for Remote Development Services (RDS) when you installed ColdFusion, and click OK.

Adding a ColdFusion Data Source

You'll now create a DSN, or data source name, by following these steps:

  1. Click the Modify Data Sources button in the Database panel (top right next to Refresh). Dreamweaver attempts to open your default Web browser and load the ColdFusion data source setup panel. Remember that if you're using the built-in Web server that comes with ColdFusion, you need to modify the URL to include :8500 after localhost.

  2. Log in to the ColdFusion administrator using the password you supplied when you installed ColdFusion. This opens the ColdFusion Administrator's Data Source panel.

  3. In the Data Source Name box enter admin; then choose the Microsoft Access driver to signify that you're setting up an Access Database. Click Add to see an expanded dialog box.

  4. Click the Browse Server button next to the Database File form box. A selection box opens, allowing you to navigate to the location of your sample database, admin.mdb. When the database has been selected, click Apply.

  5. Click Submit. You should see your database in the list of data sources, with an "ok" in the right column.

  6. If you don't see the admin database added to the Database panel, click the Refresh icon in the top right corner.

    Click To expand
    ColdFusion MX Administrator's Data Source panel.

    Click To expand
    Selecting the database file.

Where to go now

Go to the "Admin 05 Add a Recordset" exercise to continue the exercises for admin_CFM.

End Sidebar


Binding Data

The purpose of your dynamic page is to allow partially undefined content to be defined on the fly by pulling selected content from a data source. In the case of a database, you must first create a recordset that includes any columns you need access to via the Applications panel group Bindings panel.

Creating a database query (Adding a Recordset)

You set up your database as a ColdFusion data source and are ready to begin creating a template that draws information from the database in real time and displays it to your users as a Web page. Your template will begin with a query section, which uses Structured Query Language (SQL) to access your data source and retrieve the names and addresses of newsletter subscribers stored in the database. SQL is a powerful language used by many programs to communicate with databases and select one or more records.

Follow these steps to create a database query:

  1. Habitat Alert site Open the show_subscribers.cfm page if you've closed it. Click the Bindings tab in the Applications panel.

  2. Click the plus sign in the upper left, and choose Recordset (Query) to add a new recordset.

  3. Title your recordset rsGetSubscribers, and select your data source (ha). From the Table menu, select Subscribers.

    Tip

    Typically, developers start connection string names with conn, as in connHabitats or connSitename. That way, when you see connSitename anywhere in your code, you may be sure that it refers to the connection string.

  4. Select a database from the Data Source pop-up menu (select ha for this example).

  5. Select a table (subscribers) from the Table menu, which is populated by all the tables in your database. (Remember that the data source string points to this database.)

  6. Choose whether you need access to all the table columns or just a selected set. If you choose a selected set, remove the unwanted columns by highlighting them and deleting. Figure 46.6 shows the Recordset dialog box with all data columns to be available.

    Click To expand
    Figure 46.6: Making all data columns available to the page.

    Tip

    You may select multiple contiguous columns by Shift+clicking or noncontiguous columns by Ctrl/Command+clicking.

  7. If you need to, you may filter or sort records.

    Filtering chooses records based on a specific column that is compared to another column from a URL parameter, form, session, or application variable or an entered value. A typical example might be filtering the data for records that match a zip code entered by the user, as you might to display only records that contain that specific zip code, or show only prices for a region that includes that zip code.

    Sorting allows the data to be selectively displayed by one specific column in a chosen order, as in LastName, Ascending.

  8. Leave all parameters at the default settings. Click OK when you are finished.

    A look behind the scenes can give you a better idea of how ColdFusion and Dreamweaver work together. Click OK to add the new recordset; then click the Code View button to see the code Dreamweaver MX 2004 has inserted. At the top of the standard HTML <head> and <body> tags, you should see something similar to this:

    <cfquery name="GetSubscribers" datasource="ha">
SELECT * FROM subscribers
</cfquery>

    Dreamweaver autogenerated a ColdFusion query tag, <cfquery>. The opening tag includes two tag attributes: name and datasource. In many cases these are the only attributes your queries require. The name is thus far unimportant; you could use any name as long as it's intuitive and you use the same name later in your <cfoutput> code. The data source is ha, the name you used when you set up your database as a ColdFusion data source in the previous section.

    The code within the <cfquery> tags is a SQL statement. In this case, you're using a basic query that says "retrieve the contents of all the fields in all the records in the subscribers table." In SQL, an asterisk (*) denotes "everything" or "all fields."

Advanced queries

More complex, advanced queries can be built in the Advanced screen of the Recordset dialog box. When the dialog box opens, click the Advanced button, add a name, and select a connection. If you are familiar with using SQL to build queries, the SELECT, WHERE, and ORDER BY buttons can be used to build complex data sets. Figure 46.7 shows an advanced query that requests only records where the data field AuthLevel is equal to the value Admin. Advanced queries cannot be created in the Simple panel, and after they are created, you cannot view the recordset in the Simple panel.

Click To expand
Figure 46.7: Complex queries built in the Advanced panel cannot be displayed with the Simple panel.

After you close the Recordset dialog box, you may view your data columns in the Bindings panel by clicking the Expand button next to the listed recordset. To copy a recordset from one page to another, first select the recordset in the Bindings panel or in the Server Behaviors panel. Right-/Control+click the recordset and choose Copy. In the destination page, open either the Binding or Server Behaviors panel, right-/Control+click and choose Paste. To remove a recordset, select it in the Bindings panel and use the Minus (-) button.

Start Sidebar

Admin 05 Adding a Recordset

This exercise begins the process to build a page that will display all the records of the subscribers table in the admin.mdb database. It uses the CFM page view_users.cfm located in the admin_pages folder in the Administrative Intranet site.

Because you have a connection defined, you can view the table structures of the database from the Databases panel in the Application panel. However, to work with the columns (fields) of the table, the first step to take is to build a recordset from the subscriber's table:

  1. Open the file view_users.asp.

  2. Open the Application panel and click the Bindings panel.

  3. Click the Add (+) button to add a Recordset.

  4. Name the new recordset rsViewUsers.

  5. Select the connHabitatAdmin connection.

  6. If your database has many tables, choose the subscribers table. Be sure that subscribers displays in the table menu.

  7. Enable all columns. You can click the Test button to see all the records in the database.

    Note

    Remotely hosted sites must have all files uploaded to the remote Web server for testing. You should have already uploaded the admin_pages and database folders. Now upload the Connections folder. This is not necessary for local solutions where the local and remote roots are one and the same, located in the Inetpub\wwwroot folder.

  8. Use the Sort menus to choose the LastName column and Ascending. Users are easier to locate when in alphabetical order (A-Z).

  9. Save the view_users.asp page, and keep it open for the next exercise.

You can see the data columns listed by expanding the recordset in the Bindings panel. Later, you'll use the columns to bind data to your page elements.

Where to go now

If you are beginning a brand-new site without the help of this book, you might spend some time building a layout for your pages. However, pages are already provided for you. They are located in the admin_pages folder in your new site.

Go to the "Admin 06 Bind Data" exercise to continue the exercises for the Habitat Alert administration site.

End Sidebar

Binding data to the page

After you add a recordset by building a query or through passing a form or URL parameter, you can "bind" data in several ways by replacing static content, attributes, or form elements with one or more recordset columns or variables. Dreamweaver offers several methods to accomplish this, through the use of the Bindings panel. Typically, each involves selecting a content source and setting a dynamic attribute:

  • You may drag the data from the Bindings panel and drop it either in the page or onto a selected bit of text or form object (Design view), or into specific areas in the HTML code (Code view).

  • You may place your cursor where you want dynamic data to appear and select the data from the Bindings panel. Click the Insert button to add the dynamic data to the page.

  • You may select a page element, such as an image or form object, and highlight (by selecting) the data field in the Bindings panel. Use the Bind To menu of attributes to select which part of the tag will use the dynamic data. Click the Bind button to add the dynamic data attribute.

    Cross - Reference

    See "Creating Dynamic Output" later in this section.
    On the CD-ROM

    For an additional exercise, see the 06_dynamic_attribute.pdf file in the Bonus/CFM folder on the CD. The exercise shows binding the e-mail address data column to the mailto: href for users listed in the view_users.asp page in the Administrative Intranet project site.

Dynamic text

You can replace regular text in your pages or insert a data source reference where you want the dynamic text to appear. Dynamic text can be formatted with HTML or CSS typographic styles.

Dynamic images

In Design view, place your cursor into the page where you want an image to appear. Choose Insert ® Image. Click the Data Sources option (PC) or Data Source button (Mac), and select a content source from the list that appears. The source should be a path to the image you want. The path may be absolute, root-relative, or document-relative.

Note

Dreamweaver does not support binary images stored in a database.

Another method for adding dynamic images is to insert a placeholder image into the page. Select the image; then use the Bindings panel to select the data column of a recordset (or form or URL parameter) and use the Bind To menu to choose img.src. Click the Bind button.

HTML page attributes

You can use the Bindings panel to set dynamic sources for your HTML page elements, too. For example, say you want to allow users to set the page background color for the duration of their site visit. In a Start page, you might ask the user to select the page color by offering a form menu with the color choices. When the user selects a color and clicks the Choose Color button, that information is passed as a URL parameter that is stored in temporary server memory.

In the page requested, a variable is set up that takes the parameter. You can then select the <body> tag using the Tag inspector and locate its bgcolor attribute and use the Dynamic Data button (the lightening bolt) to choose the request variable. When the user's browser loads the new page, it uses the bgcolor passed by the prior page.

The Tag inspector

There are several methods for binding data to page elements, but the Tag inspector is probably the easiest to use. This feature of Dreamweaver makes it possible to access every attribute of any element in your page. Simply open the Tag Inspector panel group and click the Tag inspector tab. Scroll through the various page elements; the panel displays <head> and <body> tags. When you select a tag, use the bottom window of the panel to view the tag's attributes. If you cannot see the attributes, be sure to expand the panel by dragging on its borders, as shown in Figure 46.8.

Figure 46.8: The Tag inspector is a valuable tool when you are working with dynamic page attributes. Be sure to expand the panel fully to view the attributes.

Creating dynamic output

After you've added a query to your page, you need to add some code to display the results of the query, or the actual names and addresses that reside in the database. For now, we'll just ask for the first name, last name, and e-mail address. You'll be able to do this all in Dreamweaver without writing any ColdFusion code.

  1. Habitat Alert site Open show_subscribers.cfm from the Act folder. In the Content area, delete the current content, and type Show Subscribers and set its formatting to H1. Press Enter/Return to add a paragraph space. In Design view add a table with 1 row, 3 columns, 400 pixels, zero padding and border, and 10-pixel cell spacing.

  2. Click in the first cell on the left and expand the Recordset in the Bindings panel to expose the data columns available. Select FirstName and click the Insert button.

  3. Repeat Step 2 for the last name (center column) and e-mail in the right column. Switch to code view and note the code added:

    <table width="400" border="0" cellspacing="10">
  <tr>
    <td><cfoutput>#GetSubscribers.FirstName#</cfoutput></td>
    <td><cfoutput>#GetSubscribers.LastName#</cfoutput></td>
    <td><cfoutput>#GetSubscribers.Email#</cfoutput></td>
  </tr>
</table>
    Tip

    Standard HTML tags can be used anywhere within <cfoutput> tags to format the results of a query.

  4. In Design view, you'll see the server code in blue, as shown in Figure 46.9.

    Click To expand
    Figure 46.9: Using the Bindings panel to add the needed ColdFusion code to pull content from the database dynamically.

  5. Save the file and test in a browser. You'll see only one entry. What you'll need to do next is make the row in the table repeat as many times as needed to display additional entries.

  6. Insert your cursor in the table and select the <tr> tag from the Tag selector. Open the Server Behaviors panel (Ctrl/Command+F9). You'll see the behaviors that you've already added. Dreamweaver did all this behind the scenes when you inserted the code via the Bindings panel into your table.

  7. Click the Add (+) symbol and select Repeat Region.

  8. Type in a number of records or select All Records (see Figure 46.10). Click OK to close the dialog box.

    Click To expand
    Figure 46.10: The Repeat Region dialog box.

  9. Save and test the file. You'll now see a certain number of entries or all of them, depending on what you selected (see Figure 46.11).

    Click To expand
    Figure 46.11: All the subscriber records in the current database are returned.

Start Sidebar

Admin 06 Binding Data

Now you're ready to insert data into your page to display all the user records. Dreamweaver offers many ways to do the same thing, but you would likely use a table to contain the records, because a table offers more options for formatting your dynamic data, as it does for static content. A table that has three columns to hold the last name, first name, and e-mail address for each user has already been supplied. One row provides title headings for the columns. A top row has its columns merged, and text to indicate the user's location in the site was added to the cell. A CSS-controlled background was used for visual interest.

Some paragraphs at the top of the page are used in a later exercise, so simply ignore them for now.

  1. Open the view_users.cfm page, open the Bindings panel, and expand the recordset to view all columns.

  2. Place your cursor into the first empty column (bottom row). Using the Bindings panel, locate and highlight the column LastName, and click the Insert button at the bottom of the panel.

  3. To add the FirstName column to the second cell, grab FirstName from the recordset in the Bindings panel, drag it to the second cell in the last row, and release (you could use the Insert button; this is just another way).

  4. Click in the third cell of the last row and type Send. Double-click the text Send to select it. Use the Property inspector to type mailto: into the Link field. Later, you make the e-mail link dynamic.

    Click To expand
    The last name and first name are formatted and the e-mail Send link has been added.

  5. Save the page. Using the Document bar, click the Live Data view button. This should display the first record of the database. Because you want to display all records, you have to add logic to tell Dreamweaver (and the application server) to do so.

    Click To expand
    Dynamic text is displayed within brackets in Dreamweaver. When you click the Live Data button, the bracketed references are replaced by data from the database.

Where to go now

Dynamic text references a specific data field of a table record. You can use the Insert button or drag-and-drop the recordset field on the page. The data replaces the reference when the page is processed by the server. In some cases, you want to make an attribute of an HTML element dynamic. For example, you want the Send link for each user to use the correct e-mail address for each user automatically. If you insert the EmailAddress column into the cell, the correct e-mail address displays, but the href would not have the actual address for sending an e-mail. That is what you set up in the next exercise.

Continue to the "Admin 07 Adding a Dynamic Attribute" exercises for the administration site.

End Sidebar
Start Sidebar

Admin 07 Adding a Dynamic Attribute

Because you want each Send link to use the correct e-mail address for the record displayed automatically, you need to set up a dynamically generated href for the mailto: link. This is pretty simple in Dreamweaver MX 2004:

  1. Open view_users.cfm, open the Bindings panel, and expand the recordset to view all columns.

  2. Place your cursor on the Send link. Use the Tag selector (at the bottom of the document) to select the <a> tag for this link.

  3. Open the Tag inspector. The Tag inspector makes it easy to view every attribute of all the tags in the current page. Select Attributes.

  4. Click to the right of the target attribute. A lightening bolt (dynamic data) icon appears, as shown in the following figure. Click it.

    Click To expand
    Selecting target and clicking the lightning bolt.

  5. As shown in the Dynamic Data dialog box, locate the EmailAddress column and select it. Click OK to close the dialog box.

  6. Save your page and keep it open for the next exercise.

    The code for the link now contains server-side logic to allow the e-mail address to be generated by the database, as shown in the following figures.

    Click To expand
    The Code field contains the code needed to generate the e-mail address.

    Click To expand
    The e-mail code as seen in Code view.

Where to go now

Now that all your data references are in place, you want to let the server know to repeat the information for as many records as contained in the database. This process involves using the server behavior repeat region, which is what you set up in the next exercise.

Go to Chapter 47 and continue with "Admin 08 Repeat Region" to continue the exercises for the administration site.

End Sidebar


Application Objects and Server Behaviors

What makes Dreamweaver so attractive as a Web development tool is that it ships with most of the functionality you'll ever need to display, add, delete, and modify data sources. It contains complex server-side logic (server behaviors) that helps control page access, authenticate users, show content when specific conditions are met or not — in short, you need not ever write a line of code to build complex page functionality. Dreamweaver also ships with Application Objects — HTML elements that incorporate server behaviors — to save you time and effort when developing page functions.

Start Sidebar
Testing Your ColdFusion Templates

As you build ColdFusion templates in Dreamweaver, you'll most likely test them by selecting File ® Preview In Browser, or by pressing F12. This is by far the easiest way to preview your work during development, but what happens if you click a CFM file from outside Dreamweaver, say, from Windows Explorer?

You may have already found that you don't get the response you'd expect. That's because CFM files can't stand alone as can HTML documents or Flash movies. They require that you view them through your Web browser and a Web server, using the full URL path to the file, usually http://localhost/SomeFolder/SomeFile.cfm.

Error messages

As you work the examples in this section, it's inevitable that you'll encounter some errors as the result of a typo, a misplaced tag, and so on. Fortunately, ColdFusion displays a detailed error report in your browser window, showing which tag failed and on which line the error occurred. In addition, where applicable, it provides a suggestion about how to correct the problem.

Debugging

When the standard error messages don't give you enough information to fix a problem, you can turn to ColdFusion's debugging option. Access the Debugging Settings page in ColdFusion Administrator and check Enable Debugging. This causes some additional information to display at the bottom of every ColdFusion page you load. Remember that in a live environment, debugging options should be restricted to your local computer's IP address so that your site's users don't see the extra data.

End Sidebar

Access Application Objects via the Insert ® Application Objects menu, as shown in Figure 46.12.

Click To expand
Figure 46.12: Insert Application Objects that build HTML elements with server behaviors already incorporated.

Add server behavior logic to an existing HTML element or page via the Server Behaviors panel, as shown in Figure 46.13.

Figure 46.13: The Server Behaviors menu options.

Here is just some of the functionality that can be incorporated into your page through the use of the Server Behaviors panel or through the Insert ® Application Objects bar or menu options:

  • Recordset — Defines a recordset from an existing database. The recordset you define is stored in the Bindings panel.

  • Repeat Region — Repeats a selected region (as in table row) to display multiple records on a single page. You select an entire table or individual cells or rows that contain dynamic content, and specify the number of records to display on each page view.

  • Dynamic Table — Used to create and insert a dynamic table into a page to show database table records. Useful for quickly building a table that contains the exact number of columns contained in the database table. Options include limiting the number of records displayed or displaying all records. Limited table formatting is included, but you may change the format of the table through the Property inspector or by applying CSS to the table elements. When you choose to limit the number of records displayed, you must also add recordset navigation behavior.

  • Dynamic Text — Used to insert a dynamic text object from a data source into a page.

  • Recordset Navigation — Used to insert a record navigation bar for navigating through database records. Creates links that enable a user to view previous and next records from a database record.

  • Recordset Navigation Status — Adds a record counter to help users keep track of how many records were returned, and where they are in the returned result.

  • Master Detail Page Set — A combination of behaviors that selects a number of records to display in a page and adds functionality to enable one field to link to a detail page that displays a specified set of data for that record. Dreamweaver inserts records, a recordset navigation bar, and a recordset navigation status bar into the current page and adds a table into the destination page to display specified fields for the selected record.

  • Insert Record — Builds a form based on the fields available in the recordset that allows modification of the database by inserting a new record.

  • Record Update Form — Adds a form for the selected recordset and displays a single record from the database. A user can modify the data displayed and change the database record. Adds navigation objects for selecting specific records.

  • Delete Record — Removes an existing record from a database.

  • Show/Hide Regions — Displays or hides an HTML element and its content when specific conditions are met.

  • User Authentication — A set of behaviors that compares user information against a data source to allow or restrict access to pages in the site.

Adding server behaviors to a page

Depending upon your level of expertise with the server-side technology of your choice, you have several methods available to incorporate server behaviors into your pages:

  • If you are new to dynamic pages, use the Insert ® Application Objects menu to insert the appropriate HTML element and server behavior functions into your page.

  • If you're an experienced developer, build your own HTML elements and use the Server Behaviors panel to apply specific functionality.

Removing server behaviors from a page

The best method of removing server behaviors from a page is to select the behavior in the Server Behaviors panel and use the Minus (– button to remove it. If you simply select the element on your page that has the behavior attached, you may be prompted by Dreamweaver to undo the step and use the panel instead. Deleting the page element doesn't remove all the associated server behavior code.

Start Sidebar

Web Services: Revolutionizing Application Integration, by Samuel Neff

Web services are the latest technology that allow one application to remotely call and utilize the functionality and data of another application. The development of SOAP-based Web services enables more than simply integrating functionality but provides the ability to describe that functionality and the programmatic interfaces. In this tutorial, I describe how to use ColdFusion MX to create and consume Web.

Creating a Web service

To create a Web service in ColdFusion MX, start by creating a component. If you're not familiar with ColdFusion components, refer to the components Epert tutorial in Chapter 47. With a completed component, change the access level for the function you want to expose to remote consumption. For example, review the following code, which demonstrates a weather forecasting service:

<cfcomponent>

  <cffunction
    name="getWeatherForecast"
    returnType="string"
    access="remote">

    <cfargument name="zip" type="string">

    <cfscript>
      switch (RandRange(1,5)) {
        case 1:
          forecast="Sunny";
          break;
        case 2:
          forecast="Partly cloudy";
          break;
        case 3:
          forecast="Rain";
          break;
        case 4:
          forecast="Hail";
          break;
        case 5:
          forecast="Thunderstorm";
          break;
      }
    </cfscript>

    <cfreturn forecast>

  </cffunction>

</cfcomponent>

Simply by adding access="remote" to your component function, you can expose it to the world as a Web service. This function can be called from ColdFusion applications on another server, as well as Java, ASP, VB, Perl, and any other client that supports SOAP or WDDX.

Web service descriptions

There are many standards for creating Web services. The most popular standard is Simple Object Access Protocol (SOAP), and all major companies in the field have current or planned support for SOAP-based Web services. One of the major advantages that SOAP has over other standards is its related technologies. Web Services Description Languages (WSDL) is one of these technologies. WSDL provides a standardized way to describe the programmatic interface to a Web service.

ColdFusion MX automatically generates WSDL files for Web services by appending ?wsdl" to the end of a URL. The following URL generates the WSDL for a weather-forecasting service: http://127.0.0.1/StudioMX2004Bible/WebServices/Listing01.cfc?wsdl.

When entered into a browser, this displays the WSDL file in the following figure.

Click To expand
WSDL file for the weather forecast service

Luckily, the WSDL file is not meant to be read by a person. As you'll see later, the WSDL file allows for simplified consumption of Web services.

Complex Web services

The weather forecast service is a simple Web service. It accepts a single argument, the zio code, and returns a description of the weather in that area. Two options can expand the Web service to return more information.

The first option is to return a structure from the function. Review the following code, which returns a more detailed weather forecast in a structure:

<cffunction
  name="getWeatherForecastDetailed"
  returnType="struct"
  access="remote">

  <cfargument name="zip" type="string">

  <cfscript>
    detail=StructNew();
    detail.temperature=86;
    detail.sunrise=CreateTime(6,48,0);
    detail.sunset=CreateTime(7,46,0);
    detail.description=This.getWeatherForecast(Arguments.zip);
  </cfscript>

  <cfreturn detail>
</cffunction>
If you look at the WSDL file for this service, you'll see the following
description for the returned value shown in the following code:
<complexType name="Map">
  <sequence>
    <element name="item" minOccurs="0" maxOccurs="unbounded">
      <complexType>
        <all>
          <element name="key" type="xsd:anyType" />
          <element name="value" type="xsd:anyType" />
        </all>
      </complexType>
    </element>
  </sequence>
</complexType>

The preceding fragment of the WSDL describes the data returned from our Web service. This tells the calling application that our service is providing a set of key-value pairs. Both the keys and the values can be of any type. The problem with this is twofold. First, the calling application has no way to know what the expected keys are and the types of values being returned. Second, this key-value pair definition is specific to ColdFusion MX and is not usable from all Web service clients, including .NET and MSSOAP.

To provide greater information to the calling application, ColdFusion MX allows a function to return another component. By using the cfproperty tag within the component being returned (as seen in the following code), you are telling ColdFusion what type of data to expect, and this information can then be relayed to clients through the WSDL.

<cfcomponent>
  <cfproperty name="temperature" type="numeric" />
  <cfproperty name="sunrise" type="date" />
  <cfproperty name="sunset" type="date" />
  <cfproperty name="description" type="string" />
</cfcomponent>

The component is simple. It's sole purpose is to define the structure for your new detailed weather forecasting service, shown in the following code:

<cffunction
  name="getWeatherForecastDetailed"
  returnType="WeatherForecastDetail"
  access="remote">

  <cfargument name="zip" type="string">

  <cfscript>
    detail=CreateObject("component","WeatherForecastDetail");
    detail.temperature=86;
    detail.sunrise=CreateTime(6,48,0);
    detail.sunset=CreateTime(7,46,0);
    detail.description=This.getWeatherForecast(Arguments.zip);
  </cfscript>

  <cfreturn detail>
</cffunction>

Only two lines have been changed. Instead of returning a structure, you have specified returnType="WeatherForecastDetail", which indicates you're returning an instance of the component WeatherForecastDetail. Next, you have changed the StructNew() function call with a call to CreateObject(), which instantiates your return component. Otherwise, the functions are identical.

The WSDL for your new function closely matches the return component, as shown in the following code. This detailed WSDL file enables non-ColdFusion clients to consume your Web service and also gives all consumers greater detail about the information you're returning:

<complexType name="weatherforecastdetail">
  <sequence>
    <element name="Description" nillable="true" type="xsd:string" />
    <element name="Sunrise" nillable="true" type="xsd:dateTime" />
    <element name="Sunset" nillable="true" type="xsd:dateTime" />
    <element name="Temperature" nillable="true" type="SOAP-ENC:double" />
  </sequence>
</complexType>

Now that you know how to create both simple and complex Web services and the corresponding WSDL descriptors, the next section discusses how to consume Web services within ColdFusion.

Using Dreamweaver MX 2004 to consume Web services

Dreamweaver MX 2004 greatly simplifies the process of consuming Web services within ColdFusion MX. To list the functions provided by a Web service within Dreamweaver MX 2004, follow these steps, as demonstrated in the following figure.

  1. Expand the Application panel.

  2. Click the Components tab.

  3. Choose Web Services from the drop-down list.

  4. Click the plus (+) sign.

  5. Enter the URL to the WSDL file.

  6. Choose ColdFusion MX as the proxy generator.

  7. Click OK.

Click To expand
Using Dreamweaver MX 2004 to parse a WSDL file for a Web service.

After you specify a Web service, Dreamweaver MX 2004 provides a list of the functions provided, including the return type and arguments, as shown in the following figure. The Web service shown here is a currency converter provided by xmethods.net:

http://www.xmethods.net/sd/2001/CurrencyExchangeService.wsdl

Dreamweaver MX 2004 displays a list of functions provided by the Web service.

To generate the ColdFusion MX code to consume the Web service, drag the function name to the code window. Doing this generates the following code:

<cfinvoke
 webservice="http://www.xmethods.net/sd/2001/CurrencyExchangeService.wsdl"
 method="getRate"
 returnvariable="aRate">
  <cfinvokeargument name="country1" value="entervaluehere"/>
  <cfinvokeargument name="country2" value="entervaluehere"/>
</cfinvoke>

As you can see, Dreamweaver MX 2004 leaves identifiers for the argument values. Change the values to usa and uk to return the exchange rate between the U.S. dollar and British pound.

Consuming a Web service

As you can see from the earlier example, ColdFusion MX uses two new tags to consume Web services. Use cfinvoke to identify the Web service being consumed, the method to call, and the variable name for the returned value. Use cfinvokeargument to specify the value for all arguments to the Web service method. An alternative to cfinvokeargument is to use the argumentcollection attribute of cfinvoke to specify a structure that has key-value pairs corresponding to the method's arguments.

ColdFusion MX also provides a second method for consuming a Web service. You can create a Web service proxy object through the CreateObject() function by specifying the object type as webservice and the URL to the Web service. Then, calls to the Web service are made by calling the methods as functions of the proxy object, as shown in the following code.

<cfscript>
  currencyExchange=CreateObject("webservice","http://www.xmethods.net/sd/2001
/CurrencyExchangeService.wsdl");
  aRate=currencyExchange.getRate("usa","uk");
</cfscript>

This code has the same effect as that in the preceding code listing. The advantage of using CreateObject() over cfinvoke becomes obvious when calling multiple methods of the same Web service. Although performance is the same for both methods, programming multiple calls to a Web service is simpler with CreateObject().

Both publishing and consuming Web services is very simple in ColdFusion MX. Including Web services in your application allows you to expand the possible uses beyond the HTML forms you create to any client application with which you want to integrate. By consuming Web services within your application, you can provide your users with greater functionality that otherwise would not be possible.

End Sidebar


Summary

In this chapter, you constructed your first templates using two of the most powerful tags in ColdFusion's arsenal: <cfquery> and <cfoutput>. You learned how to set up a ColdFusion testing server and data source, and how to use ColdFusion's debugging data to troubleshoot your work. In addition, you learned how to display the contents of a database table as a Web page.


Project Summary

The following table outlines what you've done in this chapter that will be used in the Habitat Alert Web site.

Files Prepared for Habitat Alert Web Site
Files | Where to Now
show_subscribers.cfm | Ready for deployment in Dreamweaver
Setup the Habitat Alert Administration Web site | Ready to upload to a server
view_users.cfm | Added a recordset and bind data, and made a dynamic region


Chapter 47: Working with Forms and ColdFusion MX

Overview

Now that you've learned about the basic concepts behind ColdFusion, it's time to take your knowledge into a hands-on environment and begin constructing some basic templates. In Chapter 46 you created a template to display the contents of a database. In this chapter you return to the Habitat Alert Web site to create a template that inserts form data into a database. When you complete the chapter, you'll know enough about basic ColdFusion tags to adapt the templates for your own projects. With a little tinkering, the templates you've built can be customized to become a simple guestbook, a user registration system, or a technical support request interface.

Note

The tutorials in this and subsequent chapters require that you have ColdFusion installed and running. If you don't, see Appendix C for instructions.
On the CD-ROM

Place a copy of the HabitatAlert47 folder (inside the chapter47_exercise folder) on the CD into the wwwroot folder of either CFusionMX or Inetpub (IIS); then define the site in Dreamweaver. This isn't necessary if you did the exercises in Chapter 46.


Form and URL Parameters

Forms play a huge role in dynamic pages, enabling you to interact with or gather information from a site visitor. You can gather information from users and store it in the server's memory by submitting the form using either the POST or GET methods. A form sends the information either as form parameters or as URL parameters. If you set the form's method to POST, the browser includes the form's values in the body of the message sent to the server. If you set the form's method attribute to GET, the browser appends the form values to the URL specified in the action attribute and sends the information to the server when requesting the page.

Cross - Reference

See Chapter 37 if you are unfamiliar with building a form.

You can also send data to be stored in the server's memory by clicking a hypertext link. This creates a URL parameter.

How form and URL parameters work

Because each form object is named, form parameters pass data as objectname=enteredvalue. When a precise value is required, it is best to use a form object that does not allow the user to "decide" how to write the value. For example, if you need to have the two-letter "official" state postal abbreviation, don't let your visitor type it; provide a drop-down form menu object with a list of values that pass the exact (correct) value.

A URL parameter works by appending the name-value pair(s) to the URL of a requested page, taking the form of name=value. The parameter begins with a question mark (?), and each parameter is separated by an ampersand (&). Thus, a typical URL parameter might appear as follows:

http://server/path/document?firstname=firstvalue&secondname=secondvalue

You can use URL or form parameters in processing the requested page. For example, a cellular phone company might have users that want to see new plans offered on the Web site. If the company is national, it might offer different plans (with different phones and rates) depending upon where the user is located. The user's location can be determined with a zip code. The zip code parameter is passed containing the name-value (zipcode=value), which is stored (temporarily) in the server's memory. Processing of the requested "plans" page uses the URL parameter to choose and dynamically display plans (with the appropriate phones and rates) for the region that includes that zip code. A similar scenario can use form parameters to store a login name and password when a user accesses a restricted page.

Creating URL parameters

A URL parameter is created from form object values by using the GET method when submitting the form. Create your form, name your form objects, and set the form method to GET. In the Action field of the form, add the URL for the page that will use the URL parameters.

You can create a URL parameter from hypertext links by using the href attribute of the anchor tag. Add the URL parameters using the method given earlier, appending the URL with a question mark followed by a name=value parameter, as follows:

<a href="http://server/page.cfm?name1=value1">choice1</a>
<a href="http://server/page.cfm?name2=value2">choice2</a>
<a href="http://server/page.cfm?name3=value3">choice3</a>

You can build the URL parameters in Code view or use the Property inspector to type the parameters.

Retrieving parameters

When you've stored the parameter, you can retrieve it on demand by defining variables. You must be sure that you have submitted the name-value pairs via the parameter.

To define a parameter for use in your page, open the Bindings panel and follow these steps:

  1. Click the Add (+) button and choose one of the options available in the menu. For an ASP page, you would choose Request Variable ® Request.Form. For ColdFusion or PHP pages, Form Variable is used. A JSP page uses Request Variable.

  2. The Form Variable box opens. Enter the name of the form variable and click OK. This is generally the name of the form object (field, and so on) used in the form that passed the parameter.

  3. The Form Parameter appears in the Bindings panel, much as a recordset does. Use the Form Parameter as you would a database column to build dynamic content.

Session variables

In fact, you can store information from parameters as a session variable that is "remembered" as long as the user remains in the site or until the session is explicitly destroyed. Session variables make the stored parameters available to all the site's pages throughout the user's session and persist as the user moves from page to page. Session variables may be used to insert values into HTML page code, to assign a value to a local variable, or to provide a value to evaluate a conditional expression.

Before creating a session variable, you must first collect the data, as in creating a form or URL parameter and request a page. The server-side logic and the Web server you use affect the code you'll need to create to store and access the data as a session variable. For ASP and ASP.Net, you would use <% Session("variable_name") = value %>, but for a ColdFusion site, you would use <CFSET session.variable_name = value>, where the value expression is generally a server expression, such as Request.form("FormObjectName") or Request.QueryString("FormObjectName"). Actually, there are many other expressions you might use, depending upon the server type and server logic used.

When you've stored a value in a session variable, you can use Dreamweaver to retrieve the value and use it in your Web application or insert it (as a value) into an HTML page. For the example of a session variable that stores the user's login name and password, you could prevent or enable access to restricted site pages by checking the user against a list of authorized users and/or insert the user's login name into text written dynamically in the page.

Application variables

When using ASP or ColdFusion, you may use application variables for data storage and display. Application variables are maintained for the life of the application or until the Web server is stopped. Because of this longer-term persistence, they are ideal for maintaining information for all users, such as a date, a currency exchange rate, or other non-user-specific information.

To define an application variable when using ColdFusion, follow these steps:

  1. Open your cfm page.

  2. Open the Bindings panel in the Applications panel group.

  3. Click the Add (+) button and select Application Variable from the menu.

  4. Type the name of the variable as defined in the application's source code.

  5. Click OK. The variable appears in the Bindings panel.

To remove an application variable, expand the application variable in the Bindings panel, select the named variable and click the minus (–) button.

Server variables

Server variables are useful for storing information gathered from a variety of sources, such as form and URL parameters, session and application variables, cookies, browser states, and more. Server variable syntax varies depending upon your choice of server technology.

For ColdFusion, you may use the following server variables as a source of dynamic content:

  • URL Variable

  • Session Variable

  • Client Variable

  • Application Variable

  • Cookie Variable

  • CGI Variable

  • Server Variable

  • Local Variable

  • Data Source Name Variable

To define a server variable for a ColdFusion page, follow these steps:

  1. Open the Bindings panel from the Applications panel group and click the Add (+) button.

  2. Select the server variable from the menu.

  3. Enter a name for the variable.

  4. Click OK. The variable is added to the Bindings panel.


Processing Data Sent by a Form

In Chapter 46 you made a template that creates a page to display subscribers. Before that template can be useful, you'll need to create the mechanism to get subscriber data into the database. You made the show_subscriber template first because you needed to be introduced to some concepts before moving on. You set things right in this section by creating a ColdFusion template that accepts subscriber data from a form and inputs it into a database.

Recall that in Chapter 37 you created a basic form page in Dreamweaver MX 2004, saved as register.htm. In the Files panel, open the Act folder and double-click register.htm to open it. Switch to Code view and take a closer look at the form's source; you'll see that the variable names you used to collect data correspond exactly to the field names used in the subscribers table. This isn't absolutely necessary, but it's good programming practice and it saves lots of time, particularly on larger projects.

When a user fills out and submits this form, doing so sends the data to an action page (in this case, the ColdFusion template you're about to create).

Inserting a new record into a database table

Adding a recordset

Habitat Alert site Before you can equate form fields to data columns and insert a new record, you must build a recordset that contains the proper fields to accomplish all required tasks.

Follow these steps:

  1. Open register.htm from the Files panel and save it as register.cfm. This is the form you built in Chapter 37.

  2. Using the Bindings panel, add (+) a new recordset.

  3. Name the new recordset rsRegister.

  4. Choose the ha data source, and select the subscribers table.

  5. Select All Columns, as shown in Figure 47.1.

    Click To expand
    Figure 47.1: The Recordset for the Habitat Alert form.

  6. Click OK to add the recordset.

Using the Insert Record server behavior

With the recordset in place to provide a data set, the next step is to add code to the page to instruct the database to build a new record. This requires the Insert Record server behavior. To add the behavior, follow these steps:

  1. Click in the register.cfm page. The form didn't get named when it was created, so select the form, and in the Property inspector in the Form Name area, name it RegisterForm.

    Tip

    It's always a good idea to name your forms when working with dynamic pages. When more than one form is present in a page, you need to identify the form data you want to use by the form name. We suggest using RegisterForm because it makes it very clear that the object is a form.

  2. Using the Server Behaviors panel, click the Add (+) button and select Insert Record, as shown in Figure 47.2.

    Click To expand
    Figure 47.2: The Insert Record dialog box.

  3. If you don't see RegisterForm in the Submit Values From field, select it from the drop-down list.

  4. In the Insert Record dialog box, choose the ha data source and the subscribers table.

  5. In the After Inserting, Go To field, use the Browse button to locate register_success.htm in the act folder. Click OK to close the dialog box and to add the behavior to the register page. Figure 47.3 shows the page after the behavior is added.

    Click To expand
    Figure 47.3: The register page and Bindings panel after the behavior has been added.

  6. Look at the Property inspector (see Figure 47.4). When this form was built in Chapter 37, there was no action specified. Notice the Action field now. The Insert Record behavior has filled it in.

    Click To expand
    Figure 47.4: The Action field in the Property inspector.

  7. Save the page and test it. Fill in the form and click the Submit button. You'll see the page declaring you've successfully registered.

  8. To verify you actually got added to the database, open the show_subsribers.cfm page and test it. Your name will be added.

Start Sidebar

Admin 08 Using the Repeat Region Server Behavior

Now you are ready to add a server behavior that tells the server to repeat the table row containing the data for as many records as exist in the subscribers table. The Repeat Region server behavior enables you to choose to display all the records or just some of the records. In this exercise, you display all the records.

  1. Open view_users.cfm and click into any of the table cells with dynamic data.

  2. Use the Tag selector to select the table row (<tr>).

  3. Open the Server Behaviors panel by clicking its tab in the Application panel.

  4. Click the Add (+) button and choose Repeat Region, as shown in the following figure.

    Click To expand
    The Repeat Region dialog box filled in.

  5. In the Repeat Region dialog box, select the rsViewUsers recordset.

  6. Choose the All Records option, as shown in the Repeat Region figure that follows. Click OK to close the dialog box and save your page.

  7. Click the Live Data view icon to see that multiple records are now added.

  8. Select the table and change the cell space to 15 so the names are better spaced. Preview, save, and close the page.

Dreamweaver MX 2004 adds the code shown in the following figure to your pages to tell the server to repeat the table row for all records in the subscribers table.

Where to go now

For remote solutions, upload the saved view_users.cfm page and use your browser to preview the results. For local solutions, press F12 to see the users listed in your page. You don't have to upload anything because you are working in the Web server.

From here, you build pages that can add, modify, and delete users. Additionally, you could build a page that lists only the users that have administrative-level access (Administrative site and public site) as opposed to user-level access (public site only).

Go to "Admin 09 Add User" to continue the exercises for the administration site.

End Sidebar
Start Sidebar

Admin 09 Adding a User (New Record)

Viewing database records does not give you full control over the database. Certainly you can use the program that creates the database to modify, add, or delete records, but a key function of the type of Web application being created for the intranet site is to fully administer the database. This includes the ability to create new users. The project used in this book deals with public and administrative functions. The ability to create a new public subscriber is necessary for the public site. Each new subscriber from the public site is automatically given the AuthLevel (authorization level) of User. With this setting, users may access their profiles to modify their details, such as addresses, phone numbers, and login names or passwords.

However, from the administrative site, a new user can be created with either User or Admin-level authorization. To set this up, a page is created to insert a new record (user) into the database, providing a minimum amount of information:

  • Last Name

  • First Name

  • E-mail Address

  • Login Name

  • Password

  • AuthLevel

A page (add_users.cfm) is provided for this exercise, which requires the following tasks to be complete:

  • A form must be created with the previously listed fields.

  • The form fields and data columns must be bound.

  • Code instructions to insert a new record must be added to the page.

  • A redirect page must be indicated to display a successful conclusion to the insert record task.

  • The form must be validated to ensure that all fields are completed and that the e-mail address field contains an e-mail address with the @ symbol.

  • A function must be added to check the newly selected username (LoginName) against the current usernames in the database, and where duplicate, a redirect must occur to tell the user to select a new username.

About the new record form

The form to be used in this exercise has already been created in the add_user.cfm page. Each form field is named. Although it is not required that the form objects share the same names as the columns of the database, it is useful to set the fields up this way because Dreamweaver MX 2004 recognizes and relates form fields to data columns when the names are the same. However, a dialog box enables you to set a form field to data column manually.

Adding the recordset

Before you can equate form fields to data columns and insert a new record, you must build a recordset that contains the proper fields to accomplish all required tasks:

  1. Open add_user.cfm from the admin_pages folder in the Files panel.

  2. Select and review the form object names for each form field in the existing form.

  3. Add (+) a new recordset using the Bindings panel.

  4. Name the new recordset rsNewUser.

  5. Choose the admin connection, and select the subscribers table.

  6. Select All Columns.

  7. Click OK to add the recordset.

Using the Insert Record server behavior

With the recordset in place to provide a data set, the next step is to add code to the page to instruct the database to build a new record. This requires the Insert Record server behavior:

  1. Click the page. You do not need to be inside the form or have any element of the page selected. The form is named FormNewUser.

    Tip

    It's always a good idea to name your forms when working with dynamic pages. When more than one form is present in a page, you need to identify the form data you want to use by the form name. We suggest using FormFormName because it makes it very clear that the object is a form.

  2. Using the Server Behaviors panel, click the Add (+) button and select Insert Record, as shown in the following figure.

  3. In the Insert Record dialog box, choose the admin connection and the subscribers table.

  4. In the After Inserting, Go To field, use the Browse button to locate newuser_success.htm in the admin_pages folder.

    Click To expand
    The Recordset dialog box.

  5. Be sure that the Get Values From field reads FormNewUser.

  6. Look through the listed form elements. Dreamweaver does not know how the form field and database columns relate if a form element has Does Not Get a Value beside it.

  7. Select the LoginName field in the Columns list.

  8. In the Value field select LoginName from the menu. In the Sumit As menu, select Text.

    Click To expand
    Changing the value of LoginName.

  9. Save the page and test it.

    If using a remotely hosted testing server, you must first upload the saved add_user.cfm page. The other page (newuser_success.htm) should be present on the remote server because you uploaded the admin_pages folder in an earlier exercise.

    If using a local testing server with a single root folder in the ColdFusionMX\wwwroot directory, you do not need to move any pages to test.

  10. Add a new user in the page previewed in your browser. Use your own name and set your AuthLevel to Admin. Submit the new record.

  11. When you reach the success page, move your mouse over the Admin Menu tab to open it, and click the View Users link to see yourself listed as a new user. Because the list is alphabetically sorted, you should find your name listed in order by last name.

Where to go now

If you add users, chances are you will also want to delete users. The next exercises take you through selecting a user to delete that user's database record.

Go to "Admin 10 Deleting Database Records" to continue the exercises for the administration site.

End Sidebar
Start Sidebar

Admin 10 Deleting Database Records.

When an Insert Record function is needed, often a Delete Record function is desirable. The process of deleting a record from a database is more complex because you must first select the record to delete. There are many methods for selecting records. In some cases, you will want to build a search function and pass the selected result on to the delete page, a complex process involving advanced SQL queries. For the purpose of showing you how to use the Delete Record server behavior, you keep it simple and navigate through the subscribers table to locate a record.

The exercises in this document take you through the process of viewing and deleting a record by adding Record Navigation Bar and Navigation Status Application Objects and using the Delete Record server behavior.

Using Application Objects

Macromedia Dreamweaver MX 2004 contains many useful Application Objects that build HTML elements and add server behaviors. In all cases, you could build your own HTML elements and add the proper server behavior yourself. In some cases, though, using the built-in object is fastest. You may modify Application Objects to format their content or layout as long as you are careful to pay attention to any messages Dreamweaver MX 2004 gives you.

Adding the Recordset

To add a new recordset named rsDeleteUser, follow these steps:

  1. Open delete_user.cfm from the admin_pages folder in the Files panel.

  2. Add a new recordset.

  3. Name the recordset rsDeleteUser, and choose the admin connection.

  4. Be sure that the subscribers table is displayed in the Table menu.

  5. Select the All Columns option.

  6. Sort the results by LastName. You can click the Test button and see the results sorted, if desired.

    Click To expand
    The Recordset dialog box.

  7. Click OK to close the dialog box.

Inserting a record navigation bar

Now you are ready to add the record navigation bar object. You could do this later, but to display the navigation links and status elements below the line created by the Delete User graphic, you do it now.

  1. Place your cursor below the table with the Delete Users graphic. This should place you within a <div> that is aligned to the right.

  2. Choose Insert ® Application Objects ® Recordset Paging ® Recordset Navigation Bar.

  3. In the Recordset Navigation Bar dialog box that opens, choose the Text option. You can build bars that use Macromedia's default arrow images, but these are placed at the level of the page (in the site files) and can't be moved without considerable headache. Fewer images also means a faster page.

  4. Click OK to insert the text-based navigation bar.

  5. Select the table created when the bar is inserted. The easiest method to do this is to click inside one of the links. Use the Tag selector to select the closest table tag to the left.

  6. In the Property inspector, use the Align menu to change the Center setting to Default. Because there is a <div> surrounding the table, it aligns to the right using the <div align="right"> value. Avoid using floating tables where possible!

    Tip

    You may be familiar with the concept of "floating" an image in a paragraph to cause the image to appear to the left or right of all other content in the paragraph. You can do the same thing with a table by selecting the table and using the Align menu to choose Left (Default), Center, or Right. This is one method to place tables side by side. However, table float often results in strangely positioned content due to overlap of tables in small browser windows.

Adding a Record Navigation status object

Now you add an object to display which record you are viewing. The Record Navigation Status object defaults to Records # to # of #. However, you are not required to use all of this dynamic information. For this page, you view only one record at a time because you ultimately want only one record when you opt to delete.

Additionally, to maintain the design, you place the status object to the right of the navigation bar. To accomplish this, you must add a couple of columns to its table:

  1. Insert your cursor into the last cell of the Record Navigation Bar table.

  2. Choose Modify ® Table ® Insert Rows or Columns.

  3. Select Columns, enter the value of 2, and choose After Current Column.

  4. Click OK to add the new columns.

  5. Your cursor should be located in the first of the new columns. Add a space (spacebar) and press Shift+backslash to create a vertical pipe character. Add another space.

  6. Press Tab to move to the next column.

  7. Choose Insert ® Application Objects ® Display Record Count ® Record Navigation Status.

  8. Click OK to insert the elements.

  9. Insert your cursor after Records and backspace to delete the s from Records.

  10. Delete to {EndRow_rsDeleteUser}.

  11. Save and preview your page.

Building the record display form

Now you need to display the user data. You can opt to display all the data or only data relevant to making a decision about deleting the user. In this exercise, you display the last name, first name of the user. You use a table to make formatting of the data easier, although this is not a requirement.

The Delete Record server behavior uses a Submit button from a form. Therefore, you build a form to hold a form button. In this case, you add the form first; then you insert the table with the dynamic user data and Submit button:

  1. Click in the delete_user.cfm page just below the navigation elements table.

  2. Choose Insert ® Form. Select the <form> tag, and name the form FormDeleteUser.

  3. Use the Common toolset on the Insert bar to add a new table. Set the table to be 50. wide, with 1 row, 2 columns, and 5 pixels of cell spacing. Set the border and padding to zero.

  4. Click in the first cell and type Last Name; then add a nonbreaking space by choosing Insert ® HTML ® Special Characters ® Non-Breaking Space.

  5. Tab to the next cell. Type First Name.

  6. Press Tab to create a new row; then tab twice more to create another row. You should now have three rows.

  7. In the first cell of the last row, add a form button. Rename the Submit button to use Delete User. Tab to the next cell and type Caution!!. Add a line break and type This Action is NOT reversible!. Select the Caution!! text and apply a bold style to it.

  8. Use the Bindings panel to drag LastName from the panel and drop it into the first cell of the second row. Select it and press the right arrow key to move to the right of the dynamic data. Add a comma and another nonbreaking space.

  9. Tab to the second cell and select FirstName from the Bindings panel. Click the Insert button.

  10. Select the dynamic LastName reference. Use the Property inspector to set it to Bold. Do the same with the FirstName data reference.

  11. Save your page and preview.

    You should see the first record of the subscribers table. The Record Navigation bar displays only the Previous and Next links, and the Status element should state the record number of a total number of records. The record number has nothing to do with the order of the records in the database because your query sorts the records for this recordset. Thus, the record whose last name uses a letter in the alphabet that is earlier than all other is the first record.

Adding the Delete Record server behavior

Now you are ready to add the server behavior that will delete the record from the database:

  1. Click in the page. You may select the Form button, but this is not required.

  2. From the Server Behaviors panel, choose Delete Record.

  3. In the Delete Record dialog box, choose the Admin Connection. Dreamweaver sets most of the options for you.

  4. In the Table field, choose Subscribers.

  5. Primary Key Column should say SubscriberID, and enable Numeric.

  6. Set the "After deleting, go to" field to user_deleted.htm. You use the Browse button to locate user_deleted.htm in the adminpages folder.

  7. Click OK to close the dialog box. Save and test.

    There are "nonsense users" listed in the database that you can delete, or you may add new users to test your delete user function via the add_user.cfm page. To browse through user records, use the links in your navigation bar. To return to the delete page to delete another user, open the Admin menu in the user_deleted.htm page and click the Delete User link.

Where to go now

If you add and delete users, chances are you will also want to modify user data. The next exercises take you through the steps of selecting a user to modify data.

Go to "Admin 11 Modifying Database Records" to continue the exercises for the administration site.

End Sidebar
Start Sidebar

Admin 11 Modifying Database Records

To ensure the integrity of your content in your database and to provide useful functionality, you want the database to accurately reflect the latest data for each user. Some fields won't change, but others quite commonly will. In the public and private (admin) sites, certain fields, such as e-mail addresses and other contact information, need updating. Even passwords should be modifiable, especially if access granted by them warrants the practice of regularly changing its value.

In this exercise, you create a page to modify user details. You can take several approaches to accomplish this. You could build a setup similar to the one used with the delete user functions, or build a page similar to the view user page and make each record link to a details page where the modify function is available.

Because you have already learned the first method, this exercise uses the second approach. You learn how the Master/Detail Page Set can make this a fairly simple process.

Copying Dynamic Pages

To speed up development and get a taste of how copying dynamic pages can work, you copy the view_user.cfm page as a starting point for the page set you are creating. You remove the existing server behaviors and recordset and replace them with ones better suited to the page function.

  1. Open the page view_users.cfm from the adminpages of the Files panel.

  2. Choose File ® Save As, and name the new file modify_user.cfm. Save it in the adminpages folder.

  3. Open the Server Behaviors panel.

  4. Starting with the bottom behavior, select and delete it using the Minus (–) button. Repeat until all behaviors are gone. When you delete the Recordset behavior, it disappears also from the Bindings panel.

    Caution

    Never delete dynamic elements in the page. Doing so does not always delete the code associated with the element, and Dreamweaver warns you to undo the action and use the Server Behaviors panel to remove code instead.

  5. Select the last two rows of the table in the page. Delete them.

  6. Save your page.

  7. Choose File ® Save As. Name the new page mod_user_detail.cfm, and save it in the adminpages folder. Close the new page and reopen modify_user.cfm.

Using Master Detail Pages

To speed up the process of selecting the user and then changing the user's details in the second page, you use an Application Object to insert prebuilt tables and forms with the server behaviors already in place.

Adding the recordset

Of course, the first thing you must do is insert a recordset. The recordset must contain all the columns needed by both pages. Add a new recordset named rsModifyUsers with all data columns.

Adding the object

Now you are ready to insert the Master Detail Page object. Because you choose a user and view all the user details, you don't need to see all the data columns in the page on which you choose a user. However, you will likely want to see more than one column to make a more informed choice of user. In this case, the first page displays the last and first names, the login name, and the authorization level of the user. The detail page displays everything except the SubscriberID. Although, you need the SubscriberID primary key in the process, under no circumstances would you allow that field to be modified: To add the Master Detail Page object, follow these steps:

  1. Place your cursor below the existing table.

  2. Choose Insert ® Application Objects ® Master Detail Page Set to open the Insert Master Detail Page Set dialog box.

  3. Use the Minus (–) key above the Master Page Fields list to delete selected fields from the list. Select and delete all except LastName, FirstName, Login, and AuthLevel.

  4. Set Link to Detail From to LastName.

  5. Set Pass Unique Key to SubscriberID.

  6. Set Show to All Records.

    Tip

    As an alternate design function, you could opt to show only some records (rather than All Records) and use a Recordset Navigation Bar combined with a Recordset Navigation Bar Status Object as you did in the delete_user.cfm page in order to step through records.

  7. Click the Browse button to set the Detail Page Name field and locate the mod_user_detail.cfm page in the admin_pages folder.

  8. Remove the SubscriberID and SubscribeState field from the Detail Page Field.

  9. Click OK to close the dialog box.

Dreamweaver adds the repeating table to your page and creates a link to the detail page, which now contains a recordset and data references. The detail page serves as a dynamic "template" waiting to receive parameters to display the proper record chosen. Dreamweaver MX 2004 opens the modify_user_detail.cfm page and adds all the required code, leaving it opened until you save it. You may need to undo adding the object if you get incorrect results. After the detail page is saved and closed, undoing changes is more difficult.

Should you not get the results you desire in the master page, undo the actions by choosing Edit ® Undo or using the keyboard equivalent. Close the detail page without saving to put it back to its untouched state.

  99. Save both pages. Close the detail page.

Additional formatting

You can format how the dynamic data looks so that the page is easier to read. The following steps describe the steps used to make these changes:

  1. Click in the table cell that displays the View Users graphic. Right-/Control+click the <td> tag in the Tag selector to set the class to ptbgModUsers.

  2. Select the dynamic table added by Dreamweaver to display user data. Use the Property inspector to change the Align menu from Center to Default. The <div> wrapped around this table causes the table to align to the right. Select the <table> tag and choose Modify ® Table ® Clear Cell Widths. These actions remove the default percentages and the table-width setting, making this a fit-to-data-style table.

  3. Select the LastName dynamic data reference and bold it. Align its cell to the right and place a comma and a nonbreaking space after it, as you've done with other tables that display the last and first names.

  4. Select the FirstName data reference and bold it, too.

  5. Select the Login, AuthLevel cells in row one and set their cells to align to the center. Repeat the same alignment for the dynamic Login and AuthLevel cells.

  6. Save your page and preview. When you click a last name, you're sure to be shocked by the seemingly blank state of the detail page.

About the detail page

When you use an existing page for a detail page, Dreamweaver MX 2004 inserts the detail table below all other HTML content in the page. That is why, when you clicked a master page link and went to the detail page, you didn't see the table. It is below everything else, and you have to scroll to see it.

In this section, you place the table appropriately and apply formatting. You'll change the page "title" graphic's table cell to use the ptbgModUsers class, as done with the master page:

  1. In the mod_user_detail.cfm page, insert your cursor in the page title graphic's table cell. Use the Tag selector to reset the class to ptbgModUsers, which resets the image used in the background.

  2. Save the page.

  3. Scroll your page and click into the table at the bottom.

  4. Select the <table> tag and cut the table using Edit ® Cut or the keyboard equivalent.

  5. Click in the page just below the page title graphic's table, and press Enter/Return and Paste.

  6. Select the pasted <table> tag using the Tag selector. Set the table's border to zero, padding to zero, and spacing to 5 pixels, and use the Align menu to reset to Default.

  7. Select the left column and set the style to bold. Add spaces for the LastName, and so on.

  8. Save your page.

Using the Update Record server behavior

You have to make one serious modification to this page before it can be used as an update record page. When Dreamweaver MX 2004 built the detail page, it did not "know" that you wanted to use the detail page as a page to update a database record. Because the Update Record server behavior requires that the selected record information be in a form, you have to replace the data references in the table cells with form objects. Obviously, this means that your table needs to be part of a form.

In this exercise, you delete the data references and replace them with a form containing form objects, a submit button, and the Update Record server behavior:

  1. In the modify_user_detail.cfm page, go through the dynamic data table and delete each data reference, selecting the reference and pressing Delete. Unlike with complex server behaviors, you can eliminate a data reference by deleting it in the page as long as no server behavior requires it. You will replace the dynamic references with form fields that are associated with the recordset fields.

  2. Select your table and press Ctrl/Command+T twice to open the Wrap Tag Quick Tag Editor.

  3. Type form and press the Enter/Return key twice to close the dialog box.

  4. Select the <form> tag and name the form FormModUser.

  5. Click in each table cell of the right column, and add a form text field. Name the text fields appropriately, using the guidelines from Table 47-1. Set each text field's size to 12.

    Table 47-1: ModUsers Form Fields

    Type

    Name

    Size

    Dynamic Field to Use

    Textfield

    LastName

    12

    LastName

    Textfield

    FirstName

    12

    FirstName

    Textfield

    EmailAddress

    12

    EmailAddress

    Textfield

    StreetAddress1

    12

    StreetAddress1

    Textfield

    StreetAddress2

    12

    StreetAddress2

    Textfield

    City

    12

    City

    Textfield

    State

    12

    State

    Textfield

    Region

    12

    Region

    Textfield

    Country

    12

    Country

    Textfield

    ZipPostal

    12

    ZipPostal

    Textfield

    Login

    12

    Login

    Textfield

    Password

    12

    Password

    Textfield

    AuthLevel

    12

    AuthLevel

  6. When completed, save your page.

Binding data to the form objects

You use the Property inspector to choose the correct data field:

  1. Select the first form object (LastName), and use the Property inspector to click the bind dynamic data icon (lightening bolt).

  2. In the Dynamic Data dialog box, select LastName and click OK to close the dialog box.

  3. Repeat for each form field, selecting the matching data source.

  4. You can put spaces between the names in the left column and add some cell spacing to make the table look and read better.

  5. Save your page when done.

Inserting the Update Record server behavior

You need a button for your form to submit modifications to the user's record:

  1. Click in the last table cell and press Tab to add another row.

  2. Tab again to move into the last cell.

  3. Add a form button and name it Update Record.

  4. Use the Server Behaviors panel to add Update Record.

  5. In the Update Record dialog box, choose the admin connection and subscribers table, and select the record from the rsModifyUser recordset.

  6. After updating, go to user_modified.htm. Click the Browse button to locate user_modified.htm in the admin_pages folder.

  7. Set Submit Values From to FormModUser.

  8. Verify that all elements have matching data sources. If an <ignore> appears, select that form element, and choose an appropriate data field.

  9. Click OK to insert the server behavior.

  10. Save your page and close it.

  11. Use the Files panel to select modify_user.cfm, and press F12 to preview it.

  12. Choose a user by clicking a link.

  13. In the detail page, add or modify existing detail; then press Update Record.

  14. Use the Admin menu to get back to the Modify User page and select the same user. This opens the detail page again, and you can see your new values.

End Sidebar
Start Sidebar

ColdFusion Components, by Samuel Neff

Components are as notable an enhancement to ColdFusion MX as user-defined functions were to ColdFusion 5. With ColdFusion components, developers not only have a new mechanism for code reuse, but they are introduced to a programming concept long held as the cornerstone of advanced software design. Components bring the power of object-oriented programming but keep the tradition of simplicity that has made ColdFusion the ideal development platform for the Web.

A ColdFusion component (CFC) is a collection of properties and functions used to encapsulate related functionality. To demonstrate, look at an example from a survey question application. The following skeleton code outlines a component for a list of survey questions:

<cfcomponent>

  <cffunction
    name="getQuestionIdList"
    returnType="string"
    access="remote">

  </cffunction>

  <cffunction
     name="getQuestionText"
     returnType="string"
    access="remote">

    <cfargument
      name="questionId"
      type="numeric"
      required="true">

  </cffunction>

  <cffunction
    name="setAnswerText"
    access="remote">

    <cfargument
      name="questionId"
      type="numeric"
      required="true">

    <cfargument
      name="answerText"
      type="string"
      required="true">

  </cffunction>

</cfcomponent>

Creating a Component

All code within the CFC must be contained within cfcomponent tags. Only comments can be placed outside these tags. Within the component, you're defining three functions with the cffunction tags. The only required attribute is name. The returnType attribute defines the type of value being returned from the function. String indicates any text value, and void indicates the function does not return anything.

Two of the functions require arguments. To define a function's arguments, use the cfargument tag. This tag accepts a name and type and validates on each call that the value passed matches the type specified. You can also optionally specify that the argument is required, and in cases where it is not, you can specify a default value.

Dreamweaver MX 2004 can be helpful in creating CFCs; it provides a graphical user interface for creating the component structure. To create the preceding component using Dreamweaver MX's interface, follow these steps.

  1. If the Application panel is not visible, click Window and then Components.

  2. If the Application panel is already visible but collapsed, click the arrow next to Application to expand it.

  3. Click the Components tab inside the Application panel.

  4. If you haven't already defined a site, click the Site hyperlink to define a site. See Chapter 31 for information on defining a site.

  5. If you haven't already identified the document type for the site, click the Document Type hyperlink to specify the server model as ColdFusion.

  6. If you haven't already specified the testing server information, click the Testing Server hyperlink to specify the testing server details.

  7. If you haven't already specified the RDS login, click the RDS hyperlink to enter the RDS password.

  8. If CF Component is not selected in the drop-down box, select it.

  9. Click the plus (+) sign next to the drop-down box to display the Create Component interface.

  10. Under Name enter questionAnswer.

  11. Under Component Directory specify a directory under your wwwroot in which to store the component.

  12. In the Sections list box, click Functions.

  13. Click the plus (+) sign to add a new function.

  14. Under Name enter getQuestionIdList.

  15. Under Access enter remote.

  16. Under Return Type enter string.

  17. Repeat Steps 13 through 16 for each of the functions in the preceding listing.

  18. In the Sections list box, click Arguments.

  19. Select getQuestionText from the drop-down list box.

  20. Click the plus (+) sign to add an argument.

  21. Enter questionId for the name.

  22. Enter numeric for the type.

  23. Click the Required check box to specify the argument as required.

  24. Repeat Steps 18 through 22 to add the arguments for setAnswerText.

  25. Click OK. The filled in dialog box is seen below.

  26. Dreamweaver MX 2004 displays a new CFC with the functions and arguments you specified.

    Click To expand
    Using Dreamweaver MX 2004 to create a component outline.

In the questionnaire example, you run database queries within each of the functions to provide the desired functionality:

<cffunction
  name="getQuestionIdList"
  returnType="string"
  access="remote">

  <cfquery name="questionIdQuery" datasource="StudioMX2004Bible">
    SELECT QuestionID
    FROM Questions
  </cfquery>

  <cfset idList=ValueList(questionIdQuery.QuestionID)>
  <cfreturn idList>

</cffunction>

<cffunction
  name="getQuestionText"
  returnType="string"
  access="remote">

  <cfargument
    name="questionId"
    type="numeric"
    required="true">

  <cfquery name="questionQuery" datasource="StudioMX2004Bible">
    SELECT QuestionText
    FROM Questions
    WHERE QuestionID=#Arguments.questionId#
  </cfquery>

  <cfreturn questionQuery.QuestionText>

</cffunction>

<cffunction
  name="setAnswerText"
  access="remote">

  <cfargument
    name="questionId"
    type="numeric"
    required="true">

  <cfargument
    name="answerText"
    type="string"
    required="true">

  <cfquery name="questionQuery" datasource="StudioMX2004Bible">
    UPDATE Answers
    SET AnswerText=
      <cfqueryparam
        cfsqltype="cfsqlvarchar"
        value="#Arguments.answerText#">
    WHERE QuestionID=#Arguments.questionId#
</cfquery>

</cffunction>

Notice that the functions, getQuestionIdList and getQuestionText, which return a value do so through the cfreturn tag. This tag accepts an expression and returns the expression to the caller as the function result. With your component completed, you're ready to begin using it in your application.

Save this file to a new folder within your wwwroot and call it questionAnswer.cfc.

Using a Component from a ColdFusion Template

To begin with, you create a simple HTML form that displays the questions and an input block for users to provide an answer. Enter the following code into a blank ColdFusion template and save it as survey.cfm in the same directory as questionAnswer.cfc:

<cfoutput>
  <form action="action.cfm" method="post">
    <cfset qaCFC=CreateObject("component","questionAnswer")>
    <cfloop index="questionId" list="#qaCFC.getQuestionIdList()#">
      <h3>#qaCFC.getQuestionText(questionId)#</h3>
      <textarea name="Answer#questionId#" cols="60" rows="5"></textarea>
    </cfloop>
    <br/>
    <input type="Submit" value="Submit">
  </form>
</cfoutput>

ColdFusion MX includes three mechanisms to create a CFC from local CFML code: cfobject, cfinvoke, and CreateObject. Besides structure, the primary difference between these methods is component life. When used independently, cfinvoke creates the component, calls the method, and then releases the component. With cfobject and CreateObject, the programmer is in complete control of the component life, which is important when calling multiple functions of the same component within a request.

Because your component simply encapsulates functionality and does not store any of its own data, you can store the component in the default Variables scope and allow it to be released at the end of the request. When components are used to store data and encapsulate functionality, they can be stored in the Server, Application, Session, and Request scopes.

With the form page you created, you can move on to the action page and use the same component for storing data back to the database:

<cfset qaCFC=CreateObject("component","questionAnswer")>

<cfloop index="varName" list="#Form.fieldNames#">
  <cfif ListGetAt(varName,1,"_") IS "Answer">
    <cfset questionId=ListGetAt(varName,2,"_")>
    <cfif Len(Form[varName])>
      <cfset qaCFC.setAnswerText(questionId,Form[varName])>
    </cfif>
  </cfif>
</cfloop>

Answers updated

When you review the code in the ColdFusion templates and ColdFusion component, compare them with the equivalent code using traditional methods. Traditionally, a form template would include a query to retrieve the data and populate the form from the query results. The action template reads the form data and creates queries to update the database. This traditional development style intertwines the database access and form display code, which hampers maintenance. With the survey questionnaire example, all code regarding the database interaction is entirely encapsulated within the component. The form templates concentrate on form display and leave all database interaction to the component. The result is a clear separation between business logic and display code. This simplifies development and maintenance.

Save this last file as action.cfm, and test it by starting with the surven.cfm form, answering the questions, and clicking Submit.

Using a Component from Flash MX 2004

To understand upon why this separation is beneficial, take your example to the next step. The HTML form is functional, but you want the application to be more appealing. To accomplish this, you move the client code to Flash MX 2004. From within Flash, you build a form (see figure) and then call your component through Flash Remoting.

Click To expand
Flash MX 2004 application that provides the question and answer form for your component.

To begin working with the Flash MX 2004 example, download and install the Flash Remoting components from Macromedia's Web site, as explained earlier in this chapter. Then create a new movie with two dynamic text fields named question_txt and answer_txt and a push button named next_pbtn. The push button should be labeled Next and should have a click handler of nextQuestion. With this layout complete, add the following ActionScript to the first frame:

#include "NetServices.as"

if (inited==null) {
  inited=true;
  NetServices.setDefaultGatewayURL("http://127.0.0.1/flashservices/gateway");
  var gate = NetServices.createGatewayConnection();
  var qaCFC = gate.getService("StudioMX2004Bible.Components.questionAnswer",this);
  qaCFC.getQuestionIdList();
}

This code sets up a connection to the Flash gateway on the local host. Then it retrieves the questionAnswer component. The fully qualified component name is a modified version of the component's path. In this case, the component is stored as /StudioMX2004Bible/Components/ questionAnswer.cfc. Change the path to the component to reference the component you created earlier in this tutorial, relative to the wwwroot and using dots instead of slashes.

After you have a connection to your component, you can call the getQuestionIdList method to retrieve a list of question IDs. Notice that even though the function returns a value, you do not set variable equal to the returned value, because all calls to CFCs are asynchronous. Flash initiates the call and immediately returns execution to your Flash application. When the CFC is done processing and returns the value, it calls a function within your Flash application that has a name identical to the component method with the suffix _Result.

var idArray=new Array();
var questCounter=-1;

function getQuestionIdList_Result(idList) {
  idArray=idList.split(",");
  nextQuestion();
}

As you can see, the value returned from the component method is passed to the Result function as an argument. Because it is a list, use the String object's split() method to create an array for easier manipulation:

function nextQuestion() {

  if (questCounter>-1) {
    qaCFC.setAnswerText(idArray[questCounter],answer_txt.text);
  }

  questCounter++;
  if (questCounter < idArray.length) {
    qaCFC.getQuestionText(idArray[questCounter]);
    question_txt.text="Retrieving next question..."
    answer_txt.text="";
  } else {
    question_txt.text="The survey is complete. Thank you.";
    answer_txt.text="";
    next_pbtn.setLabel("Close");
  }
}

function getQuestionText_Result(questionText) {
  question_txt.text=questionText;
  answer_txt.text='';
}

Because you've initialized the question counter to -1, you use that to determine whether you have an answer to save. If you do, call the component function to save the current answer. Then increment the counter. If there are still questions remaining, call the component to retrieve the next question. Then update the application user interface to inform the user that you're retrieving the next question. If you're already on the last question, tell the user that the questionnaire is complete.

The listing also includes another result function for retrieving question text. Upon receipt, you update the two text fields. Notice, however, that there is no result function for the setAnswerText function, because this function does not return a value.

That small bit of ActionScript is all that is required to create a database-driven Flash application. Compare this to using LoadVariables and XML in previous versions of Flash and you'll see that using CFCs is not only simpler but provides for code that is easier to understand and maintain.

Components can and should revolutionize the way you program in ColdFusion. They add structure and facilitate the encapsulation of data and business logic. Using components leads you to developing applications in a multitiered approach, which improves maintainability and flexibility. While there may be a small adjustment in programming style to use components, you will find the change beneficial.

End Sidebar
Start Sidebar

ColdFusion MX XML Support, by Samuel Neff

Extensible Markup Language (XML) is a structured data format ideal for serialization and data exchange. Converting data to an XML format encapsulates the data itself and descriptors about the data, referred to as meta data. This encapsulation greatly simplifies automated communications and collaboration.

ColdFusion developers have long had the ability to convert any data to XML through Web Distributed Data Exchange (WDDX), an XML grammar developed by Allaire for this specific purpose. With ColdFusion MX, developers now have the ability to work with any XML data, using native ColdFusion tags and functions.

Creating an XML Document Object

ColdFusion MX provides three mechanisms for creating an XML document object including one new tag and two new functions. The cfxml tag enables you to embed XML text within your ColdFusion template and create an XML document object from that text, as in the following code.

<cfxml variable="MyXML" caseSensitive=">

  <classroom roomNumber="210">
    <teacher>
      <firstName>John</firstName>
      <lastName>Smith</lastName>
    </teacher>
    <students>
      <student>
        <firstName>Jim</firstName>
        <lastName>Johnson</lastName>
      </student>
      <student>
        <firstName>Jane</firstName>
        <lastName>Davis</lastName>
      </student>
    </students>
  </classroom>
</cfxml>

As you can see, you wrap the XML content inside the cfxml tag, which takes two attributes. variable is required and provides a name for the new XML document object. caseSensitive is optional and specifies whether ColdFusion should enforce the case of the elements and attributes during lookups. Even with caseSensitive set to no, the default, ColdFusion preserves the case of XML elements and attributes, and leaving it at no enables you to use the simpler structure dot notation, discussed later in this tutorial.

To examine how ColdFusion MX stores an XML document object internally, note the cfdump tag introduced in ColdFusion 5:

<cfdump var="#MyXML#" label="MyXML">

XML Document Object Explained

At the very top, MyXML is an XML document object (see the following figure) that contains one immediate child, classroom, also referred to as the root element. classroom is an XML element node that is treated internally much like a structure. The XmlText key provides the text contained within the element but not in any child elements, which in this case is none. The XmlAttributes key provides a substructure with key-value pairs associated with each attribute. In this case, it contains the roomNumber attribute and the value 210.

Click To expand
ColdFusion MX's internal representation of your XML document object.

In addition to these two built-in keys, classroom also has two child elements, teacher and students, as structure keys. Each of these is also an XML element node with keys for XmlText and the child elements. This implementation of using structure type objects internally makes using XML within ColdFusion much simpler when compared to DOM-compliant object models. For example, if you want the classroom teacher's first name, you simply reference it as follows.

<cfoutput>#MyXML.classroom.teacher.firstName.XmlText#</cfoutput>

The first variation arises when you look at the students element and its child elements, student. Because there are two student elements within students, student is stored as an array. To reference any of the student values, use array notation after the student element reference. For example, if you want the first student's first name, reference it as follows:

<cfoutput>
#MyXML.classroom.students.student[1].firstName.XmlText#
</cfoutput>

Modifying an XML Document Object

This structure- and array-based implementation also means you can use all of ColdFusion MX's structure and array functions to modify an XML document object. You combine these functions with the new XmlElemNew function to add new students to your classroom.

To add another student, you need to create a new student element and then add the student as a child of the students element. However, you can't directly add the student to the student array; you have to use the special XML element key XmlChildren, which lists all child elements of a parent element:

<cfscript>
  newStudent=XmlElemNew(MyXML,"student");
  ArrayAppend(MyXML.classroom.students.XmlChildren, newStudent);
</cfscript>

With the new student added, you can specify the student's information via the firstName and lastName elements using the same functions:

<cfscript>
  firstName=XmlElemNew(MyXML,"firstName");
  firstName.XmlText="Jill";

  lastName=XmlElemNew(MyXML,"lastName");
  lastName.XmlText="Jones";

  ArrayAppend(MyXML.classroom.students.student[3].XmlChildren,firstName);
  ArrayAppend(MyXML.classroom.students.student[3].XmlChildren,lastName);
</cfscript>

Searching an XML Document Object

ColdFusion MX also supports complex searches on an XML document object using the W3C standard language called XPath. XPath is used to specify a set of XML nodes based on certain criteria. To fully understand the power of XPath, you enlarge the classroom example to include a small school.

<cfxml variable="MyXML">
  <school>
    <classroom roomNumber="210">
      <teacher>
        <firstName>John</firstName>
        <lastName>Smith</lastName>
      </teacher>
      <students>
        <student>
          <firstName>Jim</firstName>
          <lastName>Johnson</lastName>
        </student>
        <student>
          <firstName>Jane</firstName>
          <lastName>Davis</lastName>
        </student>
      </students>
    </classroom>
    <classroom roomNumber="305">
      <teacher>
        <firstName>Julie</firstName>
        <lastName>Robbins</lastName>
      </teacher>
      <students>
        <student>
          <firstName>Jodi</firstName>
          <lastName>Katz</lastName>
        </student>
        <student>
          <firstName>Kelly</firstName>
          <lastName>Davis</lastName>
        </student>
      </students>
    </classroom>
  </school>
</cfxml>

An XPath expression is a path structure to a specified XML element node. You start all your XPath examples with the document root, '/', and drill down from there. The following example returns all students in the school (see figure):

<cfset studentNodes=XmlSearch(MyXML, "/school/classroom/students/student")>

<cfdump var="#studentNodes#" label="/school/classroom/students/student">

By using XPath, you listed all students in the school, regardless of which classroom they are in. XPath also provides for filtering the returned list using square brackets. For example, the following XPath expression returns all students with the last name Davis:

<cfset studentNodes=XmlSearch(MyXML,
"/school/classroom/students/student[lastName='Davis']")>

The filtering expression can even use any valid XPath selector. For a more complicated example, use the following XPath expression to return all students whose teacher's last name is Smith.

<cfset studentNodes=XmlSearch(MyXml,
"/school/classroom/students/student[../../teacher/lastName='Smith']")>

As you can see, XmlSearch is a powerful tool for finding and listing XML elements within a ColdFusion MX XML document object. Another equally powerful function new to ColdFusion MX is XmlTransform, which performs XSLT transformations on an XML document object.

Click To expand
The elements returned by a call to XmlSearch().

Transforming an XML Document Object

XSLT (Extensible Stylesheet Language Transformations) is a style sheet language for transforming one XML document into a different XML document. This is commonly used when sharing data between programs that use a different XML grammar or for creating a standard-compliant document out of custom XML. Altough XSLT is far beyond the scope of this book or tutorial, you review a couple of simple examples.

For your first XSLT demonstration, create a new ColdFusion template that includes the code from the listing from the simple classroom example. Then add the following code:

<cfsavecontent variable="classroomToSchoolXSLT">
  <xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output
       method="xml"
       indent="yes"/>

    <xsl:template match="/">

      <school>
        <xsl:apply-templates/>
      </school>
    </xsl:template>

    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>

  </xsl:stylesheet>
</cfsavecontent>

<cfset school=XmlTransform(MyXML, classroomToSchoolXSLT)>

First notice that you used the cfsavecontent tag instead of the cfxml tag. ColdFusion MX always uses a plain string for the XSLT and not an XML document object. After you have your XSLT stored as a string in a variable, use the XmlTransform function to create a new XML document object by applying the XSLT transformation to the classroom example.

Let's examine the components of your XSLT. It starts with a style sheet element within the XSLT 1.0 namespace, http://www.w3.org/ 1999/XSL/Transform and specifies that this is a version 1.0 style sheet. Then you specify what type of output you want to return from the transformation with the output element. Options are xml, html, or text. output also has an indent attribute, which enables creation of pretty-printed XML documents.

Next, you have two template elements, which provide a match pattern and replacement content. The match attribute is an XPath expression that returns a set of nodes in the source document. ColdFusion MX replaces each of the nodes returned by the expression with the content within the template element.

The first match pattern returns the root of the document. This is not the root element, but the root of the document itself. The content of this match indicates that you want to enclose the entire document inside a school element. Then you use the apply-templates element to continue matching source elements against patterns in the XSLT.

The second match pattern is actually two patterns. The pipe character (|) is a union operator that matches both sets of expressions. The node function returns any node other than the document node and attributes. The @* expression matches all attributes. For each node you find, you use the copy element to copy the source node forward.

Because all this transformation does is wrap the source inside a school element, it is not a useful example but is simply a demonstration of the technology. For a more practical example, use XSLT to create an XHTML document out of your school example, as follows.

<cfsavecontent variable="schoolToXHTML">
  <xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html"/>

    <xsl:template match="school">

      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <title>Our School</title>
        </head>

        <body>
          <xsl:apply-templates/>
        </body>
      </html>

    </xsl:template>

    <xsl:template match="classroom">
      <table
        border="1"
        bgcolor="blue"
        bordercolor="blue"
        cellpadding="3"
        cellspacing="2">

        <tr>
          <td colspan="2" style="color:white;font-weight:bold">
            Classroom
            <xsl:value-of select="@roomNumber" />
          </td>
        </tr>
        <xsl:apply-templates/>
      </table>
      <br/>
    </xsl:template>

    <xsl:template match="teacher">
      <tr>
        <td bgcolor="lightblue">Teacher</td>
        <td bgcolor="white">
          <xsl:value-of select="firstName"/>
          <xsl:text> </xsl:text>
          <xsl:value-of select="lastName"/>
        </td>
      </tr>
    </xsl:template>

    <xsl:template match="students">
      <tr>
        <td valign="top" bgcolor="lightblue">Students</td>
        <td bgcolor="white">
          <xsl:apply-templates/>
        </td>
      </tr>
    </xsl:template>

    <xsl:template match="student">
      <xsl:value-of select="firstName"/>
      <xsl:text> </xsl:text>
      <xsl:value-of select="lastName"/>
      <br/>
    </xsl:template>

  </xsl:stylesheet>
</cfsavecontent>

<cfset xhtml=XmlTransform(MyXML,schoolToXHTML)>

<cfoutput>#xhtml#</cfoutput>

This longer example matches each of the XML elements in the source document and replaces them with snippets of XHTML, resulting in a complete XHTML document to display each classroom within a separate table (see figure).

An XHTML representation of our school data after applying an XSLT transformation.

As you can see, ColdFusion MX has gone far beyond basic support of XML. It includes a simple-to-use object model for creating, modifying, and reading XML document objects as well as functions for advanced searches and transformations of XML. These tools will greatly simplify the implementation of XML technologies in your applications and automated communications.

End Sidebar


Summary

In this chapter, you learned about form and URL parameters, as well as session, application, and server variables. You then learned how to enter data collected from a form directly into a database, and then direct users to a page that tells them they successfully registered.


Project Summary

The following table outlines what you've done in this chapter that will be used in the Habitat Alert Web site.

Files Prepared for Habitat Alert Web Site
Files | Where to Now
register.cfm | Ready for deployment in Dreamweaver
view_users.cfm add_users.cfm delete_user.cfm modify_user.cfm modify_user_detail.cfm | Ready to upload to a server


Appendix A: What's on the CD-ROM

Overview

This appendix provides you with information on the contents of the CD that accompanies this book. For the latest and greatest information, refer to the ReadMe file located at the root of the CD. Here is what you will find:

  • System requirements

  • Using the CD with Windows and Macintosh

  • CD-ROM contents

  • Troubleshooting


System Requirements for the CD

Make sure that your computer meets the minimum system requirements listed in this section. If your computer doesn't match up to most of these requirements, you may have a problem using the contents of the CD.

For Windows 98 SE (4.10.2222A), Windows 2000, or Windows XP:

  • PC with a Pentium III processor running at 600 MHz or faster

  • At least 256 MB of total RAM installed on your computer; for best performance, we recommend at least 512 MB

  • Ethernet network interface card (NIC) or modem with a speed of at least 56,000 bps

  • A CD-ROM drive

For Macintosh:

  • A 500 MHz PowerPC G3 Processor running Mac OS X 10.2.6 and later, 10.3

  • At least 256MB of total RAM installed on your computer; for best performance, we recommend at least 512 MB


Using the CD with Windows

To install the items from the CD to your hard drive, follow these steps:

  1. Insert the CD into your computer's CD-ROM drive.

  2. The interface will launch. If you have autorun disabled, cilck Start ® Run. In the dialog box that appears, type D:\setup.exe. Replace D with the proper letter if your CD-ROM drive uses a different letter. (If you do not know the letter, see how your CD-ROM drive is listed under My Computer.) Click OK.

  3. A license agreement appears. Read through the license agreement, and then click the Accept button if you want to use the CD. After you click Accept, you will never be bothered by the License Agreement window again.

  4. Choose from the options on the left side of the screen to navigate the contents of the CD-ROM.

    Note

    Copy the exercise files and the habitat_alert files and folders to your hard drive. The files will be locked, so you'll need to Shift+select them all. Right-click and choose Properties. Remove the check from Read-Only (you won't have to do this if you used the Install button). You can also unlock files from within Dreamweaver in the Files panel.


Using the CD with the Mac OS

To install the items from the CD to your hard drive, follow these steps:

  1. Insert the CD into your CD-ROM drive.

  2. Double-click the icon for the CD after it appears on the desktop.

  3. Most programs come with installers; for those, open the program's folder on the CD and double-click the Install or Installer icon. (To install some programs, drag the program's folder from the CD window and drop it on your Hard Drive icon.)


CD-ROM Contents

The following sections provide a summary of the software and other materials you'll find on the CD.

Author-created materials

All author-created material from the book, including code listings and exercise files, are on the CD in folder names that match the corresponding chapter number. The Bonus Tutorial folder contains several Fireworks and Flash project tutorials.

Applications

The following applications are on the CD:

Dreamweaver MX 2004, by Macromedia

Dreamweaver MX 2004 is a professional layout editor that you'll use to assemble your Web site. A 30-day fully functional trial version is included on the book's companion CD-ROM, along with installation instructions.

For more information go to www.macromedia.com.

Flash MX 2004, by Macromedia

Macromedia Flash MX 2004 is used to integrate video, text, audio, and graphics into for interactive presentations, e-learning, and application user interfaces.

For more information go to www.macromedia.com.

ColdFusion MX, by Macromedia

ColdFusion MX is used to build and deploy web applications and web services without a steep learning curve. ColdFusion is used to build dynamic applications.

For more information go to www.macromedia.com.

Acrobat Reader 5.0

A freeware version of Acrobat Reader is included to view PDF files.

Image Doctor, by Alien Skin Software

A demo version of Image Doctor for PC and Mac platforms is in the Alien Skin folder on the CD-ROM. In this demo version of Image Doctor, all the filters will be fully functional for 30 days from installation. After 30 days, Image Doctor previews only filters' effects.

Image Doctor has image-correction filters for performing tasks such as removing blemishes, repairing over-compressed JPEGs, and replacing unwanted details and objects. It's compatible with Photoshop, Fireworks, and paint Shop Pro as well as other editors.

For more information, go to www.alienskin.com/.

WebSpice Animation Sampler

Includes high-quality 3D animated objects, words, buttons, and arrows. Each GIF animation is provided in a variety of styles, colors, and motions. Buttons come in sets with common Web Page navigational words like Links, Home, Back, and Order. Typical image size is less than 10k for easy downloading. All animations come with a choice of black, white, or transparent backgrounds.

For more information, go to www.indexstock.com/default.asp.

WebSpice Objects

A nifty program that contains 3,000 high-quality buttons, labels, borders, and other art to give the professional look to your Web pages.

For more information, go to www.indexstock.com/default.asp.

Wild FX Pro by Wildform Inc

The Wild FX Flash Text Animator is a fully functioning demo. The demo does not allow you to save your files, and the preview contains a watermark. You can easily make Flash text, including over 400 effects and over 40 customizable effects.

For more information, go to www.wildform.com.

Xenofex 2 by Alien Skin Software

Xenofex 2 is OS X-compatible and delivers 14 phenomenal effects. You can simulate natural phenomena such as lightning and clouds, and create distortions such as Flag, Television, and Rip Open. You can transform your photos into jigsaw puzzles, constellations, and intricate mosaics with a single click. The hundreds of presets make adding effects very quick and easy.

For more information, go to www.alienskin.com.

WA PayPal eCommerce Toolkit, WebAssist

Web Assist provides a free plug-in that adds a PayPal shopping cart to your Web site. Web Assist also has a much more robust version with many more features available for sale. I use this plug-in for a quick shopping cart solution.

For more information, go to www.webassist.com.

Shareware programs are fully functional, trial versions of copyrighted programs. If you like particular programs, register with their authors for a nominal fee, and receive licenses, enhanced versions, and technical support. Freeware programs are copyrighted games, applications, and utilities that are free for personal use. Unlike shareware, these programs do not require a fee or provide technical support. GNU software is governed by its own license, which is included inside the folder of the GNU product. See the GNU license for more details.

Trial, demo, or evaluation versions are usually limited either by time or functionality (such as being unable to save projects). Some trial versions are sensitive to system date changes. If you alter your computer's date, the programs will time out and no longer be functional.


Troubleshooting

If you have difficulty installing or using any of the materials on the companion CD, try the following solutions:

  • Turn off any antivirus software that you may have running — Installers sometimes mimic virus activity and can make your computer incorrectly believe that it is being infected by a virus. (Be sure to turn the antivirus software back on later.)

  • Close all running programs — The more programs you're running, the less memory is available to other programs. Installers also typically update files and programs; if you keep other programs running, installation may not work properly.

  • Reference the ReadMe — Refer to the ReadMe file located at the root of the CD-ROM for the latest product information at the time of publication.

If you still have trouble with the CD, call the Wiley Customer Care phone number: (800) 762-2974. Outside the United States, call 1 (317) 572-3994. You can also contact Wiley Customer Service online at www.wiley.com/techsupport. Wiley will provide technical support only for installation and other general quality control items; for technical support on the applications themselves, consult the program's vendor or author.

To place additional orders or to request information about other Wiley products, please call (800) 255-5945.


Appendix B: About Our Guest Experts

Overview

Mary Rich served as technical editor for most of this book and did the update to the FreeHand MX section. Once upon a time, when dinosaurs still roamed the earth, Mary Rich was working claims for an insurance agency. One day, she saw an ad in the newspaper for programmer trainees, so she made the switch, found out what programmers did, and fell in love. The affair continued through mainframes and mid-range systems and peaked when the first IBM-PCs arrived: a real computer, with 64K memory, two 320K floppy disk drives, a CPM emulation card, and a monitor — all of this on a desk at home! More toys followed, and she finally got involved with various graphics programs, then Web sites. A believer in Macromedia products, she found Dreamweaver and Fireworks to be an answer to a prayer for productivity. Mary provides consulting and training in many different areas to organizations in the Los Angeles, CA, and, via the Internet, to the world. She has a B.A. from Brown University and is pursuing a certificate in Computer Graphics from University of California, Los Angeles. Mary's cat, Friday, allows her to live with him in El Segundo, CA.

Ron Rockwell wrote the FreeHand section of the first version of this book but did not do the rewrite for this version (much of his material remains). Ron has been employed as a graphic designer for a manufacturing company in Nevada for several years, but he is a compulsive worker and has many freelance accounts, reaching from California to Massachusetts (and very little free time). He is a member of the National Association of Photoshop Professionals and the Graphic Artists Guild. In 1999, he won the People's Choice Award for Infographics at Macromedia's UCON '99 in San Francisco. In 2001, Ron wrote FreeHand 10 f/x & Design, and in 2002, he coauthored the Digital Photography Bible with Ken Milburn.

Doug Sahlin is an author, graphic designer, and Web site designer living in central Florida. He is the author of ten books on graphic design, including How to Do Everything with Adobe 5.0, Flash MX ActionScript for Designers, Flash MX ActionScript For Dummies, and Fireworks MX Complete Reference. Doug created an online Flash 4 course for DigitalThink. His articles and product reviews have appeared in national publications, such as 3D, Computer Graphics World, Video Systems, and Corel Magazine. His tutorials have been featured at numerous Web sites devoted to graphic design.

Japi Honoo resides in Venice, Italy, and designs Web sites and organizes the Italian Fireworks Web site www.escogitando.it. Before taking the plunge into Web design, Japi worked as a bookkeeper. A job in a software house, however, allowed Japi to free her creativity and turn her energies toward digital art. She has since dedicated her life to encouraging the appreciation of Fireworks (that's a slight exaggeration — but not much!). Her diversions include intense music, oriental culture, films, and a love of emoticons.

Kim Cavanaugh is the author of Fireworks MX: A Beginner's Guide and Dreamweaver 4/Fireworks 4 Studio: A Beginner's Guide. Kim began his adventures in the world of Web and graphic design in 1997, when he began developing a curriculum for a course in Web design for students at Congress Middle School of Math, Science, and Technology in Boynton Beach, Florida, where he teaches Dreamweaver, Fireworks, Flash, and Freehand and is the school technology coordinator. Kim is currently a Team Macromedia volunteer for Fireworks. Additional tutorials for Dreamweaver and Fireworks can be found at Kim's site: www.dw-fw-beginners.com.

Steven Grosvenor is cofounder of www.phireworx.com, a Fireworks resource site. He is a contributing author of Fireworks MX Magic, Special Edition Using Fireworks MX, and Fireworks MX Fundamentals. Grosvenor is senior systems architect for a managed Internet security company in the United Kingdom. His background is in cross-platform systems integration, interface design, and interaction and architecture design. Demand from users for a customized, interactive experience led him to develop and create many time-saving and creative commands and behaviors for Dreamweaver and Fireworks, vastly reducing deployment time for corporate sites and increasing their portability and scalability. His drive to increase team productivity led him to develop extensibility add-ons for other products in the Macromedia Web suite, including Dreamweaver MX, Fireworks MX, and Flash MX. One of the new breeds of commands for Fireworks MX, "Twist and Fade 3.0," created by Grosvenor, had the accolade of shipping with Fireworks MX. His other publications include several Fireworks MX and Dreamweaver MX tutorials, which you can find at www.macromedia.com.

David C. Nicholls is a Web developer, physicist, writer, photographer, and a recognized authority on graphics compression software, antique golf clubs, and regional fern species. He is coauthor of the book Playing with Fire — Tapping the Power of Macromedia Firework 4 with Linda Rathgeber. He has contributed articles to numerous publications, including PC magazines, hi-fi magazines and amateur radio journals, computer instruction manuals, book reviews in newspaper literary columns, scientific journals, and government reports. David lives in Canberra, Australia, with his wife Trish and assorted computers named Grunter, Xerxes, Darius, Perseus, and Wally. He can be reached at www.dcnicholls.com and www.home.aone.net.au/byzantium/.

Charles E. Brown transferred his creative skills from music (he has a doctorate in music and studied with Igor Stravinsky) to computers in 1981. Charles does Web designs for major corporations, is a busy trainer conducting nearly 100 workshops per year, and is a frequent speaker at conferences.

Brad Halstead (www.prettylady2.net) is a computer software engineering technologist by training but deviated from that dream to join the Canadian military as an air weapons systems technician. In that role, he learned all about various computerized aircraft weapons systems, as well as loading the munitions. Brad has dabbled in the Web in various capacities since 1989 and left the military to become a full-time computer technician. He tries to play an active roll in the support forums for Dreamweaver and Project Seven as time permits him to. He is HTML 4.01 certified and has contributed to Dreamweaver MX Magic and Inside Dreamweaver MX, in addition to being a technical editor for both publications. Recently, Brad and Murray Summers have written Dreamweaver MX Templates. He lives in London, Ontario, with his cherished partner Brenda and their 8-year-old daughter Megan, 13-year-old daughter Amanda, 12-year-old son Aaron, two Yorkshire Terriers, and a cat.

Murray Summers is a biochemist by training, but has spent the last 20 years working in the computer industry. In 1998, Murray started his own Web site production company, Great Web Sights (www.great-web-sites.com). As a Team Macromedia Volunteer, he also participates in the sponsored newsgroups for Dreamweaver and other Macromedia products. He lives in rural Philadelphia with Suzanne, his lovely wife, their teenage daughter Carly, a Golden Retriever, an Eskipoo, and some goldfish. Murray is a Macromedia certified Web site developer and Dreamweaver developer and has contributed chapters to Dreamweaver 4 Magic by Al Sparber and Dreamweaver 4: The Missing Manual by David Sawyer McFarland, in addition to serving as technical editor on the latter publication. He has managed to embarrass himself several times as an invited speaker at TODCON and will most likely do so again at TODCON II.

Samuel Neff is a senior software engineer with B-Line Express in the Washington, D.C., metro area. Sam is Advanced ColdFusion 5.0 Certified and a Team Macromedia volunteer for ColdFusion. He contributes to professional journals on programming topics, including ColdFusion and Visual Basic and speaks at ColdFusion user group meetings. He can be contacted at sam@blinex.com.


CD Photo Credits

These individuals and companies donated images for use in a couple of the Bonus Tutorials on the CD:

Todd McPhetridge (www.CobaltGraphics.com). Todd has been a photographer for more than 11 years and has more than 5 years' experience in search engine placement, Web design, and the graphic arts. Todd is a consultant for major corporations, as well as small, family-owned businesses. Todd's photographs and designs have appeared in numerous publications, including Integrating Flash, Fireworks & FreeHand f/x & Design, authored by Joyce J. Evans, and the periodicals Manufacturing Engineering, Purchasing Today, Design News, Desktop Engineering, and Macworld. You can reach him by phone at 770-684-2688 or send e-mail to todd@cobaltgraphics.com.

Habitat Alert, Trevor Smith, Calvin Woods (Co-Directors, Habitat Alert) and Rod Watkins donated the photographs used in the Web site.

Eyeland Studio: Photoshop Foundry (www.eyeland.com) is a membership area that contains a large variety of Web interfaces and buttons that you are free to customize for use in your own Web projects. These Web interfaces are stylized navigation systems for your Web site, with buttons, graphical widgets, space for your logo, an area reserved for a banner ad, and so on.

Olaf Starorypinski was born in London, England, in 1964, the son of Polish immigrants. Olaf has always been fascinated with light, and he developed an interest in photography and lighting during his high school years. He has been involved in both photography and lighting design for nearly 20 years, including design companies both in the United Kingdom and the United States. Olaf moved to the Lehigh Valley, Pennsylvania, in 1990.

Olaf's experience and knowledge of light is the primary influence in his photographic work. Using light to sculpt subjects, he creates images from a unique perspective. Critics have described his photographs as "dynamic and sculptural," and as works of "subtlety and power," and "visual intrigue."

Olaf resides in Emmaus, Pennsylvania, with his wife and daughter.


Sounds and Applet

Jason Leroy contributed the audio track "Acoustic Alchemy" at SonicMint.com.

Bryan Harianto contributed the StringWalk applet www.geocities.com/bharianto/StringWalk/StringWalk.html.

Yvonne Rockwell began playing the piano at age eight. She has been writing and recording music for several years; she has composed background music for self-help audio programs and the musical score for a children's book that contains a spoken version of the story on a CD-ROM. It was an honor for Yvonne to contribute to Macromedia Studio MX 2004 Bible in the production of music for the Habitat Alert Web site. You can hear more of her music at www.nidus-corp.com/music.html.


Appendix C: Installing Macromedia Studio MX

Overview

The Macromedia Studio MX 2004 disc contains an integrated suite of development tools for building professional Web sites and Rich Internet applications. The suite also supports emerging standards and Web technologies. The applications included in the Macromedia Studio MX 2004 suite include FreeHand MX, Fireworks MX 2004, Flash MX 2004 (or Professional 2004), Dreamweaver MX 2004, and, optionally, ColdFusion MX Developer Edition. All the applications have a common interface, cutting the learning curve considerably.


System Requirements

Before installing the Macromedia Studio MX 2004, ensure that you have all the system requirements as listed in Table C-1.

Table C-1: The Windows and Macintosh System Requirements
Windows | Macintosh
600 MHz Intel Pentium III processor or better | 500 MHz PowerPC G3 processor
Windows 98 SE, 98 SE (4.10.2222 A), Windows 2000, or Windows XP | Mac OS X 10.2.6 and later, 10.3
256MB of free available system RAM to open one application (128MB recommended) | 256MB of free available system RAM to open one application (128MB recommended)
Additional RAM required to open multiple applications simultaneously | Additional RAM required to open multiple applications simultaneously
1,024x768, 16-bit color monitor resolution (thousands of colors) or better | 1,024x768, 16-bit color monitor resolution (thousands of colors) or better
800MB of available hard disk space to install all applications | 500MB of available hard disk space to install all applications
Adobe Type Manager Version 4 or later for use with Type 1 fonts | Adobe Type Manager Version 4 or later for use with Type 1 fonts (OS 9.x)
CD-ROM drive | CD-ROM drive
For Adobe PostScript printing: PostScript Level 2 or PostScript 3 | For Adobe PostScript printing: PostScript Level 2 or PostScript 3
Netscape Navigator 4.0 or Internet Explorer 4.0 or greater | Netscape Navigator 4.0 or Internet Explorer 4.0 or greater

This product must be activated over the Internet or phone prior to use. Visit the Product Activation Center to learn more about activation.


Installing Studio MX

The installation process is quite simple. If you don't yet own Macromedia Studio MX 2004, you may download trial versions from www.macromedia.com/downloads/. The following instructions are for the Macromedia Studio MX 2004 application disc. The following screenshots are for a Windows XP installation. To install, follow these steps:

  1. Insert the Macromedia Studio MX 2004 disc into your CD-ROM. The install interface opens automatically, as shown in Figure C.1.

    Click To expand
    Figure C.1: The Macromedia Flash Player 7 opens to display the install screen.

  2. Click the Install button to install the entire studio except for HomeSite and ColdFusion. The InstallShield Wizard appears, shown in Figure C.2. Click Next.

    Click To expand
    Figure C.2: The InstallShield Wizard.

  3. Click Yes to accept the License Agreement, shown in Figure C.3, after you've read it.

    Click To expand
    Figure C.3: The License Agreement.

  4. Click the Browse button if you want to select a new location for the install, and click Next (see Figure C.4).

    Click To expand
    Figure C.4: The file location for the install dialog box.

  5. In the next screen, shown in Figure C.5, select your browsers from the list to install the Flash Player for them and click Next.

    Click To expand
    Figure C.5: Selecting your browsers for the Flash Player.

  6. The applications now install, starting with Fireworks, then FreeHand, Dreamweaver, and Flash. Don't worry about which version of Flash yet; that is determined later when you enter the serial number.

  7. When the install is done, the screen in Figure C.6 appears. Click Finish.

    Click To expand
    Figure C.6: The installation is completed.

  8. Open any of your applications and you are asked to enter your serial number. Your serial determines if you have Flash MX 2004 or the Pro version. You need to be online to activate the product (see Figure C.7). When activation is done, a Completed screen appears, along with a registration form. You have to do the activation only once for the entire Studio.

    Click To expand
    Figure C.7: The completion and registration dialog box.


Installing Additional Software

In the Additional Software area of the opening installation screen, shown in Figure C.1, you see links to install HomeSite, ColdFusion, and the Flash Video Exporter.

Installing ColdFusion MX 2004 for Windows

ColdFusion MX Developer Edition does not automatically install with the rest of the studio. To install, follow these steps:

Note

Mac users can also use ColdFusion but must have JRun 4 installed first. I don't own a Mac, so you'll need to check the tech support files at www.macromedia.com/support/coldfusion for full instructions.

  1. If the Macromedia Studio MX 2004 CD is not in your CD drive, insert it now. Click the Macromedia ColdFusion MX Developer Edition link in the Additional Software area. After the loading screen, the Install Wizard appears (see Figure C.8). Click Next.

    Click To expand
    Figure C.8: The ColdFusion Developer Edition Install Wizard.

  2. Click "I accept the terms of the License Agreement" after you've read it; then click the Next button (see Figure C.9).

    Click To expand
    Figure C.9: License Agreement for ColdFusion MX.

  3. The Install Type dialog box opens (see Figure C.10). If this is a new install, select Install New Version of ColdFusion MX and leave the Developer Edition checked. Leave the serial number area blank unless you've purchased the full version. Click Next.

    Click To expand
    Figure C.10: The Install Type dialog box.

  4. The Install Configuration dialog box opens. Windows users select Server Configuration and click Next, as shown in Figure C.11.

    Click To expand
    Figure C.11: The Server Configuration options.

    Note

    Mac users can select one of the other options, but you must have JRun or Tomcat installed prior to the ColdFusion install.

  5. Choose the directory you want to install into and click Next.

  6. In the next screen, shown in Figure C.12, select your Web server and click Next.

    Click To expand
    Figure C.12: The Web Server Selection dialog box.

  7. In the dialog box shown in Figure C.13, enter a password that you will remember. This is so you can access the ColdFusion Administrator. Click Next.

    Click To expand
    Figure C.13: The Administrator Password dialog box.

  8. In the dialog box that appears, shown in Figure C.14, click the Install button after you confirm your installation specifications.

    Click To expand
    Figure C.14: The Installation Confirmation dialog box.

  9. An install confirmation appears when you are finished.

Installing HomeSite+

HomeSite is a code-only editor for Web development. You can create and modify HTML, CFML, JSP, and XHTML tags, as well as validate. Homesite 5.5+includes additional functionality for application development.

  1. In the opening installation screen, shown in Figure C.1, select HomeSite+ from the Additional Software area. Click Next in the Welcome screen to begin the install.

  2. Click Yes to accept the License Agreement and click Next.

  3. Click Next on the Configuration screen, shown in Figure C.15.

    Click To expand
    Figure C.15: The Configuration Wizard.

  4. Follow the instructions on the Debug screen and click Next, as shown in Figure C.16.

    Click To expand
    Figure C.16: The Debug Settings.

  5. Follow the instructions for Debug Mappings and click Next, as shown in Figure C.17.

    Click To expand
    Figure C.17: The Debug Mappings screen.

  6. Choose your development style and click Next, as shown in Figure C.18.

    Click To expand
    Figure C.18: The Development Style options.

  7. Click Finish on the Configuration Progress window, shown in Figure C.19, and your installation is complete.

    Click To expand
    Figure C.19: Installation complete.

Installing Flash Video Exporter

You can now export video directly to Macromedia Flash from within video-editing and encoding tools such as Avid Xpress/Media Composer, Apple Final Cut Pro, Discreet Cleaner, and Anystream Agility. The Flash Video Exporter provides FLV video export capabilities to all applications on the desktop simultaneously.

  1. Click Flash Video Exporter in the Additional Applications area of the Studio Install screen (see Figure C.1).

  2. Accept the license agreement.

  3. Click Next to begin the installation (see Figure C.20). When it's completed, your install is finished.

    Click To expand
    Figure C.20: The Ready To Install screen.


Index

Symbols and Numbers

& (ampersand), 820
{} (curly braces), 471
# (hash mark), 588, 594
? (question mark), 820
; (semicolons), 471
3D Rotation transformation tool, 78–79
508 Accessibility Suite extension, 739


Index_A

Team LiB

Index

A

absolute URLs, 581
acceleration, tweening, 430–431
Access (Microsoft), 787–791
Accessibility reference guides, finding, 526
accessibility support, Flash, 18
accessing
bitmap images, 261–262
files other than defined Web sites, 537
ACO (Adobe Color Swatch) files, 198
Acrobat Reader 5.0 (Adobe), 855
ACT (Active Color Table) file, 198
action page, ColdFusion, 496–498
actions
Dreamweaver behaviors, 679, 721
Flash layers/folders, 400
ActionScript. See also behaviors
components, 18, 462–463
Flash movie
ColdFusion integration, 483–484
connecting to Net Services, 490
interpreting results to use in application, 491–493
input text box, creating, 494–495
keyframes, referencing, 428
sound, accessing on or off Timeline, 454–455
Active Color Table. See ACT file
Active Server Pages reference guides, finding. See ASP reference guides, finding
active window, Flash, 397
ActiveX video, embedding in pages, 707
adding
animation frames, 342–343, 427
to bitmap images, 262
components, Flash, 463
Dreamweaver templates to existing page, 634
existing Library items, 622
layers/folders, Flash, 398
points, 233
sound to Timeline, 450–451
text animations, 443–446
Admin 05 database query (adding recordset), 801–802
Admin 06 binding data, ColdFusion application, 806–807
Administration Web site example
database, 785
exercises, 786
pages, 784
permissions, 785
separate administration site, 785
administrator, ColdFusion
data source panel, 798
described, 783
logging onto, 790
Adobe Acrobat Reader 5.0, 855
Adobe Color Swatch files. See ACO files
Adobe Illustrator, importing into Flash, 400
Adobe Photoshop. See Photoshop (Adobe)
advanced database query (adding recordset) binding data, 801
Advanced Streaming Format video format. See ASF video format
AIF/AIFF (Audio Interchange File Format), 702
aliasing text, 245
Alien Skin Software
Image Doctor, 855
Xenofex 2, 856
aligning
FreeHand panels, 52
HTML table cell contents, 564, 570
movie, adjusting, 714
objects, 413
Web page
block, 552
images, 553
Alpha effects, 471
Alt tags, slicing designs, 366–367
alternate style properties and settings, 615–618
aluminum texture, 277
America Online. See AOL
ampersand (&), 820
anchor
HTML tags, 583
navigation links, 590–591
point other than center in animation, 428–430
AniMagic extension, 740, 754–756
animation
banner, sample, 357–359
Bird Facts 101 sample, 158
extension, recommended, 740, 754–756
frames
adding and deleting, 342–343
distributing to, 344
Frame Delay, 345–346
keyframes and, 424–425
layers, sharing across, 344
looping, 345
moving and duplicating, 343
Onion Skinning, 344–345
reversing order of duplicated, 343–344
FreeHand
described, 35, 149
Flash actions, 150–151
MovieClips, transforming into, 151–153
symbols and library, 147–148
GIF images
exporting, 348–349
Flash versus, 339
importing, 348
Hungry Heron Diner sample project, 160
instances, 340
keyframes, 424–425
layers, releasing, 84
logo with envelopes, 142–144
masking effects sample
adding text animations, 443–446
creating, 441–442
editing, 442–443
finishing touches, 447
setup, 440–441
sliding menu bar, DHTML layers, 754–755
symbols
buttons, 296
creating, 340
defined, 339–340
existing object, converting to, 341
motion paths, editing, 342
movement between, 430–431
properties, editing, 342
selections, adding, 341
timeline effects
Assistants, 431
Blur, Drop Shadow, Expand, and Explode, 431
described, 423
opacity settings, adding to motion tween, 436–437
path, tweening along, 437–438
shape tweening, 439–440
symbols, movement between, 433–435
transformations and transitions, 432–433
traditional frame by frame
adding frames, 427
deleting frames, 427
frames-per-second setting, 426–427
labeling keyframe, 428
Onion Skinning, 426
pivot point, changing, 428–430
reversing frames, 428
steps, 425
tweening
Live Effects, 347
motion between symbols, 430–431
multiple, applying, 346–347
numeric transform, 348
Web sample
conceptualizing, 349
creating, 354–356
designing, 349
etch-away-the-bitmap method, 353–354
exporting, 356–357
fading the cat, 351
Mask Group method, 351–352
modifying, 357
transparent gradient overlay method, 353
vector drawing, preparing, 350–351
animator, trial Flash text, 855
Answers, FreeHand panels, 55
answers updated, 842
anti-aliasing
fills, 206
Fireworks, 16
FreeHand, 14
movie, setting, 714
when not to use, 245
AOL (America Online)
browser, 711
images, recompressing, 195
applet
creators, 860
sound file format, 702
video elements, 716–718
Application menu, Dreamweaver, 521–522
application server, 651
applications
CD, back-of-the-book
Acrobat Reader 5.0 (Adobe), 855
ColdFusion (Macromedia), 855
Dreamweaver (Macromedia), 855
Flash (Macromedia), 855
Image Doctor (Alien Skin Software), 855
WA PayPal eCommerce Toolkit (WebAssist), 856
Wild FX Pro (Wildform inc), 855
Xenofex 2 (Alien Skin Software), 856
ColdFusion, creating in Dreamweaver
Admin 06 binding data, 806–807
data, binding, 799–801
dynamic attribute, adding, 807–809
dynamic output, creating, 804–805
local intranet site, defining, 792–794
newsletter subscriber page, 787–791
objects and server behaviors, 809–817
page, binding data to, 802–804
RDS login, 797–799
recordset, adding, 801–802
remote intranet site, defining, 794–797
templates, testing, 809
database records, deleting, 829
form variables, 821
Apply button, setting up
commands, Fireworks, 327–328
Fireworks, 327–328
Arc drawing tool, 66
area Reshape button, 74
arrays
ColdFusion, 485–486
Flash and ColdFusion, 482
art, FreeHand
selection tools, 64–65
tools panel, 63
vectors and bitmaps, 62
artifacts
JPEGs compressed multiple times, 469–470
removing from black-and-white scan, 215–216
artwork
creating for Bird Facts 101 project, 154
multipage projects, 34
ASF (Advanced Streaming Format) video format, 705
ASP (Active Server Pages) reference guides, finding, 526
ASP.NET form control objects, 24
Assets panel
Flash video files, viewing, 712
FreeHand panels, 46–48
Library Items, 619–622
Web page images, inserting, 543–544
Assistants, timeline effects, 431
associative array, 482, 483
attaching
external style sheet, 614
objects to grid, 75
Audio Interchange File Format. See AIF/AIFF
Audio Video Interleave video format. See AVI video format
AU/SND sound format, 703
authentication, information about, 785
author-created materials, back-of-the-book CD, 854
Auto Layers extension, 740, 756–760
Auto Levels color bitmap images, adjusting, 277
Auto Shapes, Fireworks
accessing, 218, 221–222
Beveled Rectangle, 222
Camfer Rectangle, 222
Connector Line, 222–223
described, 15–16
Donut, 224
L Shape, 224
Pie, 225
smart polygon and smart rounded corner, 225–226
Spiral, 226
Star, 227
autoplay movie, setting, 714
AVI (Audio Video Interleave) video format, 705


Index_B

Team LiB

Index

B

back button, creating with JavaScript, 723
background
animation sample project, 146
bitmap image
fading, 267–268
reason to use as, 469
cell image, 571–572
cutting image out of (vector mask), 269–271
image
CSS styles, 604
slicing designs, 365
Web page properties, setting, 540–541
layer, moving, 52
movie color, setting, 715
page colors and images, 674
removing object from colorful, 263–264
sharing across frames, 344
Web page images, editing, 547–548
backing up, converting Dreamweaver templates, 641–642
banding, color in GIF files, 128
Bandwidth Profiler for Flash movies, 476
bar, navigation. See navigation bar
bars gradient, 209
baseline shift, Fireworks, 245
basic animation, 144–146
batch processes, Fireworks, 320–321
behaviors. See also navigation behaviors
button
listed, 309
setting, 292–296
Dreamweaver, built-in
Call JavaScript, 723
Change Property, 723–724
Check Browser, 724–727
Control Shockwave or Flash, 727
described, 721–722
Drag Layer, 727
Get More Behaviors, 731
Go to URL, 727
Hide Pop-Up Menu/Show Pop-Up Menu, 728
Jump Menu/Jump Menu Go, 728
Open Browser Window, 728–729
Play Sound, 729
Popup Message, 729
Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore, 729
Set Text (of Frame, of Layer, of Text Field, of Status Bar), 730
Show Events For, 731
Show-Hide Layers, 730
Validate Form, 730
Flash
described, 17, 465
using, 465
video, embedded, 466
gradient fills, 11
server
adding to page, 811
Insert Record, 823–825
inserting new record, 823–825
objects and, 809–817
PHP, 24
removing from page, 812
Beveled Rectangle, 222
Bézier curve
control handles, 231–232
defined, 229
drawing, 230–231
Bezigon drawing tool, 63, 66, 88
binding data
Admin 06, 806–807
ColdFusion application, creating in Dreamweaver, 799–801
database query
admin 05, 801–802
advanced, 801
described, 799–800
dynamic images, 803
dynamic text, 803
to form objects, 836
HTML page attributes, 803
to page, 802–804
Tag inspector, 803–804
dynamic attribute, 807–809
dynamic output, 804–805
Bird Facts 101 project
creating artwork, 154
described, 153–154
final animation, 158
layering art, 155–156
moving outside movie, 159–160
navigation, setting, 156–158
printing, 158–159
symbols, obtaining, 154
testing movie, 159
bit depth sound measurement, 449
bitmap fills drawing tool, 408
bitmap fonts, 410
bitmap image
converting
to JPEG format, 153
to vector, 415
defined, 62
editing, 12, 414
expert composition, sample
described, 279
second image, adding, 281–283
subject, preparing main, 280–281
texture, adding, 286–287
title, adding, 287–290
vector drawing, adding, 284–285
Fireworks
Blur filters, 276–277
border, adding, 318–319
color, adjusting, 277–278
described, 259–260
emailing, 261
noise, adding, 277
opening, 260
selection commands, 263–264
selection tools, 261
Sharpen filters, 277
FreeHand art, 62
importing into Flash, 400
objects, converting selected, 183
Web format, 128
bitmap masks, 267
black, adding to color, 101
blending colors, 85. See also gradient fills
block alignment, Web page
described, 552
floating images in text block, 552–553
block formatting, Web page
horizontal rules, 551–552
mission statement page, 550–551
Quick Tag Editor, 550
Blur filter
bitmap image tool, 264
Fireworks filter, 276–277
timeline effects, 431
blurring GIF interlacing, 374–376
body, Web page, 620
bookmarking framed pages, 667
books, recommended reading
Color for Websites: Digital Media Design (Holzschlag), 196
Macromedia Flash MX ActionScript Bible (Wiley), 400
border
adding to bitmap images, 318–319
around text box, 412
framed Web site
building, 669–670
resizing by user, 673
tables, creating, 576
box margins, CSS, 610–612
boxes
designing, 34
drawing four-sided, 69
breaking apart text, 413
breakpoints, Flash movies, 474
brightness
bitmap images, adjusting, 278
from external light source, creating illusion of, 100
fill, adding texture, 209
broken links
finding, 764
fixing, 765
Brown, Charles E. (guest expert)
background, 858
masking effects
adding text animations, 443–446
creating mask, 441–442
editing mask, 442–443
finishing touches, 447
setup, 440–441
Browse for File method, navigation links, 584
browser
Check Browser behavior, 724–727
cross-browser validation, Dreamweaver, 22
CSS issues/solutions
alternate style properties and settings, 615–618
attaching external style sheet, 614
duplicating style sheet, 614
external style sheet, opening and commenting, 613–614
using @import with multiple style sheets, 615
Dreamweaver compatibility, checking, 523
file formats to avoid, 128
Flash Debugger, accessing, 472
framed Web site widths, adjusting, 670–671
image quality and, 195
JavaScript
disabling, 725–726
functions, 722
layers, recognizing, 748, 749
media objects, recognizing, 697
Open Browser Window behavior, 728–729
pop-up menus, 690
previewing Web frameset and pages, 373
setting target, Dreamweaver Web site, 537–538
target, checking, 765–766
Brush tool, 405
Burn tool, bitmap images, 265
business card, printing sample project, 169–171
button
back, creating with JavaScript, 723
described, 419
Fireworks
Apply, setting up, 327–328
behaviors, setting with Button Editor, 292–296
Cancel, creating, 333
creating symbol, 298
editing symbol, 298–299
functionality, adding, 328–332
library, adding to, 299–300
menu, adding, 314–315
states, 292
symbols, instances, and libraries, 296–297
Flash
media options, 698–699
summary frame coding, 493–494
forms, adding, 652, 656
rollover and onClick color, changing, 462–463
sound, adding to, 452–453
symbols, 420–421


Index_C

Team LiB

Index

C

cable movie, simulating viewing, 476
Call JavaScript behavior, 723
Calligraphic pen drawing tool, 68, 88–89
Camfer Rectangle shape, 222
Cancel button, creating
commands, Fireworks, 333
Fireworks, 333
Canvas (Fireworks)
activities, recording as commands
Apply button, setting up, 327–328
assembling, 326
border to bitmap images, 318–319
Cancel button, creating, 333
defining purpose, 322–323
enhancements, 337
error checking, adding, 334–335
exporting and testing, 335–336
functionality, adding to button, 328–332
History panel, 324–326
interface, creating in Flash, 327
JavaScript, 319
process flow, 323–324
purpose, defining, 322–323
resources, 337
scene, setting in Flash, 327
scripts, exported, 326
testing command, 336–337
writing, 321–322
described, 177–179
guides, dragging onto, 363
magnification, viewing, 188
modifying, 183
capitalization, importance in Flash movies, 471
cartography. See maps
Cascading Style Sheets. See CSS
cat, fading animation for Web, 351
Cavanaugh, Kim (guest expert)
background, 858
pop-up menus, sample, 310–313
CD, back-of-the-book
applications, 855–856
author-created materials, 854
Mac OS, using with, 854
system requirements, 853
troubleshooting, 856
Windows, using with, 854
CD, files copied from, 703
cell, table
background image, 571–572
coloring, 573–574
minimum height, 572
padding and spacing, 576–577
center, scaling from, 16
Centerpoint lens fill option, 101
centimeters, 606
CFCs (Cold Fusion Components), 25
CFML (ColdFusion Markup Language) tags
editing, 870–872
reference guides, finding, 526
CGI (Common Gateway Interface) scripts
applications, 780
server-side forms processing, 651, 655
Change Property behavior, 723–724
character-based language support, 25
characters, obscuring e-mail address with, 591
charting
ColdFusion, 25
creating, 84
check box, HTML form, 652, 656
Check Browser behavior, 724–727
circles. See Ellipse tool
circuit, path completing, 88
class selectors, CSS, 594
cleanup controls, Xtras, 84
client-server relationship, Web site, 780
client-side scripting
described, 650
functions, 721
clip art, interactive Fireworks. See Auto Shapes, Fireworks
closed path, 88
CMYK colors (cyan, magenta, yellow, and black)
colors, importing FreeHand, 134
mixing for commercial printing, 48
mixing in Fireworks, 200
code differences, converting Dreamweaver templates, 636–638
code-only editor. See HomeSite+
Cold Fusion Components. See CFCs
ColdFusion
action page, creating for e-card application, 496–498
Administration Web site example
database, 785
exercises, 786
pages, 784
permissions, 785
separate administration site, 785
application, creating in Dreamweaver
Admin 06 binding data, 806–807
binding data, 799–801
binding data to page, 802–804
dynamic attribute, adding, 807–809
dynamic output, creating, 804–805
local intranet site, defining, 792–794
newsletter subscriber page, 787–791
objects and server behaviors, 809–817
ColdFusion, application, creating in Dreamweaver
RDS login, 797–799
recordset, adding, 801–802
remote intranet site, defining, 794–797
templates, testing, 809
arrays, 485–486
CD, back-of-the-book, 855
components
answers updated, 842
creating, 502–505, 838–841
data processing forms, 837–844
described, 501–502, 837–838
from Flash, 506–508, 842–844
from template, 505–506, 841–842
described, 8
Dreamweaver integration, 783–784
e-card application, 487–488
Flash integration, 784
with Flash Remoting
communications, 483–484
link explained, 481–482
forms and URL parameters, 819–822
installing in Windows, 866–870
new features
CFCs, 25
character-based language support, 25
Dreamweaver integration, 25
graphing and charting, 25
Java integration, 24
Macromedia Flash remoting, 24
XML support, 25
structures, described, 482–483
support design, 508
templates, debugging, 809
view page, creating for e-card application, 499–501
Web site role
administrator, 783
client-server relationship, 780
database interaction, 783
described, 779
dynamic page content, 782
markup language, 781–782
software versions, 780–781
XML document object
creating, 508–509
described, 509–510
modifying, 510–511
searching, 511–513
transforming, 513–516
ColdFusion Markup Language tags. See CFML tags
collect for output, FreeHand, 173
color. See also Swatches panel; Trace tool
animation
basic, 144
motion tweens, adjusting, 436–437
background
Dreamweaver pages, setting, 541
movie, setting, 715
banding in GIF files, 128
bitmap images, adjusting
Auto Levels, 277
Brightness and Contrast, 278
Curves, 278
Hue and Saturation, 278
Invert filter, 278
plug-ins, 278
tonal corrections (Levels), 278
button onClick, changing, 462–463
changing drawing to shades of same, 101
CSS styles, 604
Fireworks
choosing, 196–197
described, 195
panel features, 182
preferences, setting, 192
strokes, 200–204
Swatches panel, customizing, 197–198
Web issues, 196
FreeHand
managing, 82
Stroke and Fill boxes, 83
view options, setting, 59
gradient transparency, 211
inverting in part of drawing, 100
movie background, 152
page background, framed Web site, 674
printer settings, 165–166
reducing to optimize GIF images, 371–372
selections based on, 263
video components, tinting, 462
Web pages
major elements, changing, 130–131
properties, choosing, 542
Web safe
finding, 199–200
mixing, 200
Xtras, 85
color fills
editing patterns or gradients, 208
patterns, 208
solid, 206
textures, 209
Web dithering, 206–207
Color for Websites: Digital Media Design (Holzschlag), 196
Color Mixer
FreeHand panels, 48–50
Web safe, 200
colored, underlined text. See hyperlinks
coloring cells, 573–574
colorizing grayscale image with Live Effects, 215
columns
database query, accessing, 799–800
framed Web site, building, 667, 668
HTML table
modifying, 560–561
removing extra, 565–567
selecting, 559
Combine commands, FreeHand
Crop, 97
Divide, 97
Intersect, 97
Punch, 97
Transparency, 97
Union, 96
command
Dreamweaver, 740–741
Fireworks
Apply button, setting up, 327–328
assembling, 326
border to bitmap images, 318–319
Cancel button, creating, 333
defining purpose, 322–323
enhancements, 337
error checking, adding, 334–335
exporting and testing, 335–336
functionality, adding to button, 328–332
History panel, 324–326
interface, creating in Flash, 327
JavaScript, 319
process flow, 323–324
purpose, defining, 322–323
resources, 337
scene, setting in Flash, 327
scripts, exported, 326
testing, 336–337
testing command, 336–337
writing, 321–322
Flash, 327, 467
navigation link, building from History panel, 589–590
retracing with History panel, 19
Commands menu, Fireworks, 184
comments
external style sheet, 613–614
table containing, 577
commercial printing, color mixing, 48
Common Gateway Interface scripts. See CGI scripts
communications, Flash Remoting with ColdFusion, 483–484
compiled Flash components, 463
components
ColdFusion
answers updated, 842
creating, 838–841
described, 784, 837–838
from Flash, 842–844
from template, 841–842
Flash, compiled, 463
composite paths, FreeHand
Combine commands, 96–98
fills and gradients, 99
joint/split, 95–96
text, 98–99
compression
AU/SND files, 703
GIF images, 374
JPEG images, 377–379
sound files, 453–454
concave arc, 66
conceptualizing animation for Web, 349
cone gradient, 209
connection string names, conventional start to, 799
Connector Line, Fireworks, 222–223
container selector, Dreamweaver template, 626
content
Dreamweaver template selections, 626
Flash layers/folders, 400
HTML form, validating, 730
contextual menu, Dreamweaver Web site, 536
contextual selectors, 595
contextual styles, CSS (Cascading Style Sheets)
box margins, setting, 610–612
described, 609–610
links, 612–613
contour gradient fill, 15, 209
contrast, adjusting in bitmap images, 278
Control Flash behavior, 727
control handles
adding to each point in an object, 74–75
Bézier curves, 231–232
Control Shockwave or Flash behavior, 727
Controller toolbar, FreeHand, 39
converting
data to XML, 844
Dreamweaver templates
backing up, 641–642
code differences, 636–638
conversion process, 638
described, 635–636
F/R queries, running, 643–646
performing conversion, 643
server language and, 646–647
site, setting up, 639–641
syntax, checking, 642–643
Fireworks text to path, 247
cookies, 650
copy and paste functions
Microsoft Word and Excel, 23
Web page text content, 549
copying
dynamic page database records, 833
frames, 343
meta tags between documents, 767
multiple grounded of single object
bitmap images, 265
FreeHand, 80
text shadow effects, 122
style sheet browser issues/solutions, 614
corner point, 89
creating
animation for Web, 354–356
mask, 441–442
crop
Export Area tool, 385
paths, reshaping, 236
cross-browser validation, Dreamweaver, 22
CSS (Cascading Style Sheets)
advantages of using, 7, 593
browser issues/solutions
alternate style properties and settings, 615–618
attaching external style sheet, 614
duplicating style sheet, 614
external style sheet, opening and commenting, 613–614
using @import with multiple style sheets, 615
cascade, 596
code hints, 22
contextual styles
box margins, setting, 610–612
described, 609–610
links, 612–613
custom class, adding, 607
described, 593
Dreamweaver
code, viewing, 540
Layout visualization, 21
page properties, 21
panel, 21
Rule Inspector, 20
text in Property Inspector, 21
editing with Styles panel, 598
extension, recommended, 740
HTML formatting versus, 596–597
inheritance, 595
layers
exporting, 381, 388–389
moving on page, 727
length units
absolute, 606
larger, smaller, and XXS, 607
relative, 606–607
link styles
applying, 608–609
described, 608
properties, 608
text decoration, 608
object properties, changing in current document, 723–724
properties, 597
reference guides, finding, 526
selectors and declarations
class or ID selectors, 594
contextual selectors, 595
defined, 594
pseudo-classes and pseudo-elements, 594–595
specificity and importance, 595–596
styles
background-image (URL), 604
color, 604
editing, 598–599
formatting text from Property inspector, 599–600
HTML tags, redefining, 602–605
length units, 605–607
selectors, grouping, 605
sheet origin, 601–602
type, 600–601
styles panel
described, 597
editing styles, 598
curly braces ({}), 471, 729
current palette, exporting, 198
cursor options, setting, 58
curve point, cursor view, 89
curves
bitmap images, adjusting, 278
drawing in Fireworks, 229
lines with, 222–223
making out of straight line, 88
straightening, 404
cutting image out of background (vector mask), 269–271


Index_D

Team LiB

Index

D

darken lens, 101
darkening
area of photo in Fireworks, 264–265
colors in FreeHand, 85
dashed line, 88
data processing forms
adding user, 826–829
ColdFusion components, 837–844
database table, inserting new record into, 822–825
deleting database records, 829–832
described, 822
modifying database records, 833–837
Repeat Region Server Behavior, 825–826
XML support, ColdFusion, 844–851
data source
e-card application, 484–485
RDS Login for ColdFusion server, 797–799
database
Administration Web site example, 785
binding data
admin 05, 801–802
advanced, 801
dynamic images, 803
dynamic text, 803
HTML page attributes, 803
to page, 802–804
Tag inspector, 803–804
ColdFusion arrays, 485–486
images and captions, accessing, 700
interaction, ColdFusion, 783
new record, adding, 826–827
newsletter subscribers, pulling names, 787–791
query, 799–800
row, repeating for as many records as are in table, 825
database records
binding data to form objects, 836
detail page, 835
dynamic pages, copying, 833
formatting, additional, 834–835
master detail pages, 833
object, adding, 834
recordset, adding, 833
Update Record server behavior, 835–837
database table
adding user
described, 826–827
Insert Record server behavior, 827–829
new record form, 827
deleting records
application objects, 829
described, 829
display form, building, 831–832
navigation bar, inserting, 830–831
navigation status object, 831
recordset, adding, 830
server behavior, adding, 832
inserting new record
adding recordset, 822–823
server behavior, 823–825
debugging
ColdFusion templates, 809
Flash movies, publishing, 471–472
HomeSite+ settings, 871–872
remote Flash movies, publishing, 473–474
deceleration, tweening, 430–431
declarations, CSS (Cascading Style Sheets)
class or ID selectors, 594
contextual selectors, 595
defined, 594
pseudo-classes and pseudo-elements, 594–595
defining slices, 364–366
deleting
animation frames, 342–343, 427
database records, 829–832
Dreamweaver snippets (stored code block), 735
editable tag attribute from Dreamweaver template, 627
everything on selected branch, 43
Flash layers/folders, 399
individual objects placed by Graphic Hose, 112
points, 233
portions of objects outside specified region
Export Area tool, 385
paths, reshaping, 236
demo versions, software, 855
deploying Habitat Alert Web site sample design, 29
depth, creating illusion of, 100
descriptions, meta tags, 767
design elements, saving from page to page. See master pages, FreeHand
design notes, uploading in Web site publishing, 771
designing animation for Web, 349
detaching Library items, 623
detail page, database records, 835
detail, restoring to blurred areas, 264
DHTML (Dynamic Hypertext Markup Language)
layers
described, 747–748
Drag Layer puzzle, building, 750–752
drawing versus inserting, 749–750
Set Text of Layer to create submenus, 753–754
sliding menu bar, animating, 754–755
special properties, 748–749
pop-up menus, 679
scripting, adding to Dreamweaver template, 627–628
snapping menus
building, 757–760
described, 756–757
dialog box, optimizing JPEG images, 376
digital photos
Fireworks, 215–216
importing, 260
digital tablets, 68
dimensions
framed Web site, building, 670–671
object, changing, 76
direction of animation, changing, 428
Director, exporting files as, 381
directory permissions, incorrect, 785
disjoint rollover. See remote rollover
display elements, Flash and ColdFusion, 482
display form, building, 831–832
displaying record in view, 831
distorting object. See Fisheye Lens transformation tool
distortion
correcting, 543
Fireworks text, 245
distributing
to frames, 344
objects, 52
dithering GIF images, 374
docked panels
Dreamweaver
described, 525–526
Files panel group, 526–527
Reference panel, 526
Fireworks, 180
docking
FreeHand panels, 42
toolbars, 37
document object, XML (Extensible Markup Language)
creating, 508–509, 844–845
described, 509–510
mechanics, 845–846
modifying, 510–511, 846
searching, 511–513, 846–848
transforming, 513–516, 848–851
Document panel, 45–46
Document Specific tab, HTML setup, 383
document window
Dreamweaver, 523
Fireworks, 179
Flash, 396–397
workspace, FreeHand, 36
documents
adding text to Fireworks, 244
color, dragging, 50
exporting entire as Web page, 383–384
framed Web site, building, 673–674
navigating framed Web site, 669
properties, changing Flash, 397
relative paths, URLs, 582
switching among
Fireworks, 15
Flash, 18
view options, setting, 59
Dodge bitmap image tool, 264–265
domain name, 770
domains, Web site publishing, 770
Donut object, 224
dotted line stroke, 15
downloading
shapes from third party providers, 16
sound plug-ins, 703–704
trial version of Studio, 862
Drag Layer behavior, 727
Drag Layer puzzle, building, 750–752
drawing
DHTML layers, inserting versus, 749–750
Fireworks
Auto Shapes, 221–227
Bézier curves, 230–231
paths, 217
vector path, 228–230
vector tools, 217–218
FreeHand
Arc, 66
Bezigon, 66
Calligraphic Pen, 68
Ellipse, 68–69
Line, 66
Pen, 65–66
Pencil, 68
Polygon, 70–71
Rectangle, 69–70
Spiral, 67–68
Text, 66
Variable Stroke Pen, 68
visual content design
bitmap fills, 408
Brush tool, 405
Eraser tool, 409–410
Fill Transform tool, 409
fills and strokes, 403–404
gradient fills, 406–408
Ink Bottle tool, 406
Paint Bucket tool to fill objects, 406
Pen tool, 405–406
Pencil tool, 404
rounded rectangles, 404
drawing program. See FreeHand
Dreamweaver
Application menu, 521–522
behaviors, built-in
Call JavaScript, 723
Dreamweaver, behaviors, built-in
Change Property, 723–724
Check Browser, 724–727
Control Shockwave or Flash, 727
described, 721–722
Drag Layer, 727
Get More Behaviors, 731
Go to URL, 727
Hide Pop-Up Menu/Show Pop-Up Menu, 728
Jump Menu/Jump Menu Go, 728
Open Browser Window, 728–729
Play Sound, 729
Popup Message, 729
Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore, 729
Set Text (of Frame, of Layer, of Text Field, of Status Bar), 730
Show Events For, 731
Show-Hide Layers, 730
Validate Form, 730
CD, back-of-the-book, 855
ColdFusion application, creating
Admin 06 binding data, 806–807
binding data, 799–801
dynamic attribute, adding, 807–809
dynamic output, creating, 804–805
local intranet site, defining, 792–794
newsletter subscriber page, 787–791
objects and server behaviors, 809–817
page, binding data to, 802–804
RDS login, 797–799
recordset, adding, 801–802
remote intranet site, defining, 794–797
templates, testing, 809
ColdFusion integration, 25, 783–784
command, building with History panel, 740–741
cross-browser validation, 22
described, 7–8
docked and grouped panels
described, 525–526
Files panel group, 526–527
Reference panel, 526
Document toolbar, 523
Document window, 523
enhanced performance, 22
extensions
described, 737
finding, 738
installing, 738–739
popular, 739–740
Favorites category, customizing, 744
Fireworks buttons, adding to page, 686
Fireworks tables, editing round-trip, 579
form tools, 652
HTML page, integrating, 135–136
Insert Bar objects
described, 742
Table object, building, 743
user data files, finding, 742
Insert toolbar, 522–523
library, exporting, 381
MX HTML Elements, 23
navigation bar, building, 686–687
navigation behaviors
behavior functions, 681
described, 679–680
events, 680–681
new features
ASP.NET form control objects, 24
built-in graphics editor, 23
cross-browser validation, 22
CSS code hints, 22
CSS Layout visualization, 21
CSS panel, 21
CSS Rule Inspector, 20
CSS text in Property Inspector, 21
CSS-based page properties, 21
enhanced performance, 22
Find and Replace, 23
Flash Elements, 23
Insert bar, 20
integrated tag inspector, 22
Microsoft Word and Excel copy and paste, 23
MX HTML Elements, 23
PHP server behaviors, 24
prebuilt CSS-P templates, 22
reference content, 23
secure FTP, 23
siteless file editing, 22
Start page, 20, 21
Table-Editing Visual feedback, 22
Tag Library Editor, 22
Unicode support, 24
XML namespace support, 24
pop-up menus, building, 694–696
preferences and keyboard shortcuts, modifying, 527–528
Property inspector, 524–525
scripts, custom
embedding, 731–733
linking to external JavaScript file, 733
snippets
creating, 734–735
described, 733
editing or deleting, 735
inserting, 734
sharing, 735
Start Page, 520–521
status bar, 524
Table-Editing Visual feedback, 22
user-specific configuration folders, 736
Web services integration example, 816–817
Web site
accessing files other than defined sites, 537
browsers, setting target, 537–538
contextual menu, 536
creating new files, 535–536
defining, 529–531
files panel, 533–537
index file, 537
root folder, navigating, 535
site setup wizard, 532–533
workspace layout, choosing, 519–520
Dreamweaver templates
adding to existing page, 634
building, 624–625
converting
backing up, 641–642
code differences, 636–638
conversion process, 638
described, 635–636
F/R queries, running, 643–646
performing conversion, 643
server language and, 646–647
site, setting up, 639–641
syntax, checking, 642–643
inconsistent region names, handling, 634–635
mechanics of, 623–624
modifying, updating pages and, 633–634
newsletter subscribers, viewing, 787–791
pages
adding, 629–630
editing, 631–633
new, 630
regions
defining, 625
editable, adding, 626
optional, adding, 627–628
optional editable, adding, 628–629
tag attributes, 626–627
Drop Shadow timeline effect, 431
duplicating
frames, 343
style sheet browser issues/solutions, 614
dust, removing from photo. See Blur filter
dynamic attribute
binding data, 807–809
ColdFusion application, creating in Dreamweaver, 807–809
Dynamic Hypertext Markup Language. See DHTML
dynamic images, database query, 803
dynamic output
binding data, 804–805
ColdFusion application, creating in Dreamweaver, 804–805
dynamic pages
ColdFusion content, 782
database records, copying, 833
dynamic text, binding data, 803
dynamic Web sites, 529


Index_E

Team LiB

Index

E

e-card
Flash Remoting
ColdFusion action page, creating, 496–498
ColdFusion view page, creating, 499–501
e-card, Flash Remoting
data source, setting up, 484–485
described, 484
detail frame and form, creating, 494–495
linking ColdFusion, 487–488
movie, 488–489
NetConnection debugger, 496
summary frame, creating, 490–494
summary function, creating, 485, 486
motion tweening, 433–435
Edit menu, Fireworks, 182
editable region, Dreamweaver template
adding, 626, 628–629
attributes, 626–627
described, 625
editing
background Web page images, 547–548
bitmap images, 261, 414
color fill patterns, 208
color gradient fills, 211
CSS
properties, 21
styles with Styles panel, 598
styles with Tag Inspector panel, 599
Dreamweaver
file, siteless, 22
pop-up menus, 692–694
snippets (stored code block), 735
tables, 579
template pages, 631–633
Fireworks
button symbol, 298–299
image-based pop-up menus, 690–691
pop-up menus, 692–694
preferences, setting, 192–193
shape guides, adding, 233–234
tables, 579
Web page images, 546–547
Flash
layers or folders, preventing, 399
SWF movies, adding, 715
FreeHand styles, 109–110
gradient color fills, 208
Library items, 620
mask, 442–443
shapes, 233–235
sound, 451–452, 703
Swap Image behavior, 683
symbols, 107, 342, 422
text, converting to path, 247
video components, 461–462
editor
button behaviors, setting, 292–296
graphics, built-in Dreamweaver, 23
Tag Library, 22
effect attributes, FreeHand, 11
effects versus filters
changing image color using Live Effects, 214
color image, converting to grayscale, 214
grayscale image, colorizing with Live Effects, 215
elements, sound, 701–702
ellipse gradient, 209
Ellipse tool
Fireworks, 221
FreeHand, 68–69
email
bitmap images, sending, 261
form data, collecting and sending to multiple recipients, 651
navigation links, setting up, 591–592
send as, Fireworks, 16
embedding
Dreamweaver scripts, custom, 731–733
Flash video behaviors, 466
JavaScript expressions in text, 729
sound files, 703, 704
video in pages, 707
embossing objects, 85
em-height relative length measurement, 606
empty areas, adding to transparency, 102
empty Movie Clips, 420
enhancements, Fireworks text effects, 245–246
envelope
animation, 139–144
FreeHand toolbars, 40, 41
logo, animating, 142–144
for logo treatment, 140–142
printing sample project, 168–169
toolbar, 139–140
warping, 414
Eraser tool
drawing tools, 409–410
FreeHand, 75, 92
error checking, Fireworks, 334–335
error messages
ColdFusion templates, 809
Flash movie Output window, 474–475
etch-away-the-bitmap Web animation method, 353–354
evaluation versions, software, 855
event sound option, 450, 479
events
Dreamweaver navigation behaviors, 679, 680–681, 721
Show Events For behavior, 731
Excel (Microsoft), copy and paste from, 23
existing page
adding Dreamweaver templates, 634
Dreamweaver templates, building from, 624–625
Fireworks pop-up menus, inserting into, 692
Expand Stroke Xtras path adjustment, 93–94
Expand timeline effect, 431
Explode timeline effect, 431
Export Area tool, 385
Export Wizard, 379–380
exporting
animation for Web, 356–357
to CSS layers, 388–389
current palette, 198
with Export Area tool, 385
Export Wizard, 379–380
files
Flash movies, publishing, 479
sound, 453–454
Fireworks command, 335–336
general options, 380–382
GIF images, 348–349
Habitat Alert layout, 384–385
HTML
building links between pages, 130–131
described, 128–129
Document Specific tab, 383
General tab, 382
and images, 383
Navigation panel, 129–130
publish as HTML, 131–134
Table tab, 382–383
images slices only, 383–384
layers or frames as separate files, 389
as a Library item, 385–386
to Macromedia Flash SWF, 386–387
preparations for, 379
to PSD, 387–388
styles, 213
SWC file, 463
various images on one design, 365–366
as vectors, 388
Extensible Markup Language. See XML
Extensible Stylesheet Language Transformation. See XSLT
extensions
Dreamweaver
described, 737
finding, 738
installing, 738–739
popular, 739–740
Flash, getting and installing more, 464–465
Web servers, recognizing files by, 537
external assets, URLs, 582
external style sheet
attaching, 614
opening and commenting, 613–614
Extrude tool
controlling, 122–123
described, 80
text shadow effects, 123–124
Eyedropper selection tool
Fireworks
adding color to Swatches panel, 197–198
modes used in, 218
sampling, 196, 197
FreeHand, 65
Eyeland Studio (photographer), 859


Index_F

Team LiB

Index

F

fading
animation images, 433
bitmap images into background, 267–268
Cheshire cat Web animation, 351
faint image of other frames, viewing. See Onion Skinning
Favorites category, Dreamweaver, 744
feathering edges, fill, 206
file
Dreamweaver
accessing other than defined sites, 537
creating new Web site, 535–536
list of recently opened, 520
exporting
layers or frames as separate, 389
to PDF, 172
sound, 453–454
FTP, putting and getting, 773–774
importing into Flash, 400–401
information, tracking, 85
size, reducing, 425
sound
exporting and compressing, 453–454
formats, 449, 702
File Management button, Fireworks, 15
File menu, Fireworks, 182
file permissions, extension setting, 739
File Transfer Protocol. See FTP
files panel, 526–527, 533–537
fill
bitmap drawing tools, 408
drawing tools, 403–404
Fireworks
described, 15, 205–206
editing patterns or gradients, 208
gradient, 209–212
none, 206
options, accessing, 186
patterns, 208
preferences, setting, 192
removing, 201
solid, 206
textures, 209
Web dithering, 206–207
Flash, optimizing, 470
FreeHand
attributes, 11
composite paths, 99
gradient drawing tools, 406–408
style, creating, 108
won't work on path object, 232
Fill boxes, 83
Fill Transform tool, 409
filling
image with text effects, 251
objects with Paint Bucket tool, 406
filtering database records, 800
filters
effects versus, 214–215
image-correction, 855
Filters menu, Fireworks, 185
Find and Replace feature
Dreamweaver, 23
Fireworks, 317–318
Flash, 18
FreeHand word processing, 115–116
finding
Dreamweaver extensions, 738
sound files, 705
Fireworks
anti-aliasing, 16
Auto Shapes, 15–16
Bézier curves
control handles, 231–232
drawing, 230–231
bitmap images
Blur filters, 276–277
Blur Tool group, 264–265
color, adjusting, 277–278
described, 259–260
emailing, 261
expert image composition, 279–290
marquee tools, selecting with, 261–263
masking, 267–273
noise, adding, 277
opening, 260
Rubber Stamp Tool group, 265–267
selection commands, 263–264
selection tools, 261
Sharpen filters, 277
buttons
adding to Dreamweaver page, 686
behaviors, setting with Button Editor, 292–296
creating symbol, 298
editing symbol, 298–299
library, adding to, 299–300
states, 292
symbols, instances, and libraries, 296–297
color
choosing, 196–197
described, 195
fills, 205–212
strokes, 200–204
Swatches panel, customizing, 197–198
Web issues, 196, 199–200
contour gradient fill, 15
described, 5–6
Document Window, 177–179
dotted line stroke, 15
drawing
Auto Shapes, 221–227
paths, 217
vector tools, 217–221
editing
shapes, 233–234
Web page images, 546–547
effects versus filters
changing image color using Live Effects, 214
color image, converting to grayscale, 214
grayscale image, colorizing with Live Effects, 215
e-mail, send as, 16
error checking, adding, 334–335
File Management button, 15
FreeHand multipage document, importing, 134
Hide/Show panels, 16
HTML
page, integrating, 134–135
tables, inserting, 574–576
keyboard shortcuts, customizing, 194
layers
adding, 190
deleting, 191
described, 189–190
duplicating, 190–191
editing single, 192
locking, 191
naming, 192
opacity settings, 191
sharing selected, 192
showing/hiding, 191
Web, 190
Line tool, 227–228
Live Effects, 16
Main toolbar, 185–186
menu bar
Commands menu, 184
Edit menu, 182
File menu, 182
Filters menu, 185
Help menu, 185
Modify menu, 183
Select menu, 183
Text menu, 183
View menu, 183
Window menu, 185
navigational elements
buttons, 292–300
disjoint rollovers, 291
image map, 309–310
interactive images, 300–309
menu, adding to buttons, 314–315
navigation bar, 291
pop-up menus, 291, 310–313
simple rollovers, 291
new features
anti-aliasing, 16
Auto Shapes, 15–16
contour gradient fill, 15
documents, switching among, 15
dotted line stroke, 15
e-mail, send as, 16
File Management button, 15
format, save in original, 15
Hide/Show panels, 16
interface, 14
Live Effects, 16
Red Eye Removal tool, 16
Fireworks, new features
Replace color tool, 16
scaling from center, 16
server-side support, 16
Start page, 14
strokes, fills, and font menu buttons, 15
Unicode support, 16
Panel Layout
common features, 182
customizing, 180–182
paths, reshaping
crop, 236
intersect, 236
join, 236
layout interface, building, 237–240
punch, 236
union, 235–236
Pen tool
adding and deleting points, 233
closing path, 232
continuing path, 232–233
editing shapes, 233–235
joining path, 233
pop-up menus
described, 690
editing in Dreamweaver, 692–694
image-based, editing, 690–691
inserted menu, using in template, 693–694
inserting into existing Dreamweaver page, 692
URL link, changing, 693
preferences, setting, 192–193
Property inspector, 187–188
Red Eye Removal tool, 16
Replace color tool, 16
resources, 337
rollover image
buttons, inserting, 681–682
defined, 300
disjoint, making, 305–307
multiple buttons using same remote area, 307–309
Swap Image behavior, adding, 303–305
Up and Over button states, designing, 300–303
scaling from center, 16
scans or digital photos, 215–216
server-side support, 16
status bar, 188–189
strokes, fills, and font menu buttons, 15
styles
importing and exporting, 213
modifying, 212–213
panel, using, 212
saving, 213
tables
described, 562
modifying, 562–565
opening page, 562
removing extra rows and columns, 565–567
round-trip editing to Dreamweaver, 579
text effects
adding text to document, 244
converting text to path, 247
described, 243–244
enhancements, 245–246
image, filling with, 251
path, setting type on, 248–250
paths, altering, 252–258
placeholder, using as, 246
punch, using as, 247–248
spacing, controlling, 244–245
symbols, 251–252
text spacing
baseline shift, 245
horizontal scale, 245
kerning, 245
leading, 245
range kerning, 245
Tools panel, 186–187
vector path drawing tools, 228–230
Vector shape tools
accessing, 218–219
Ellipse tool, 221
Polygon tool, 221
Rectangle tool, 219–220
workflow, automating
add border to bitmap images, 318–319
Apply button, setting up, 327–328
assembling command, 326
batch processes, 320–321
Cancel button, creating, 333
command enhancements, 337
defining purpose of commands, 322–323
error checking, adding, 334–335
exporting and testing command, 335–336
functionality, adding to button, 328–332
History panel, 324–326
interface, creating in Flash, 327
JavaScript commands, 319
process flow, 323–324
repetitive tasks, reducing with Find and Replace feature, 317–318
resources, 337
scene, setting in Flash, 327
scripts, exported, 326
testing commands, 336–337
writing commands, 321–322
Fireworks PNG Importer, 12–13, 55
Fisheye Lens transformation tool, 79
fit-to-data tables, 556
508 Accessibility Suite extension, 739
fixed-width tables, 556
fiXMovie extension, 740
FLA (Flash Authoring File), 697
Flash
animation actions, FreeHand, 150–151
behaviors
described, 465
using, 465
video, embedded, 466
CD, back-of-the-book, 855
ColdFusion components, 842–844
ColdFusion integration, 784
commands, 467
components
ActionScript, 462–463
adding, 463
compiled, 463
described, 459
getting and installing more, 464–465
inspector, 461–462
library, 461
panel, 459–460
pre-installed, 463–464
property inspector, 462
SWC file, exporting, 463
using with ColdFusion, 506–508
Control Shockwave or Flash behavior, 727
described, 6–7
Document properties, changing, 397
Document Window, 396–397
editing, 55
extensions, getting and installing more, 464–465
focus, active window, 397
GIF or, choosing, 339
History panel, 466
HTML page, integrating, 137
importing files into, 400–401
interface
creating for Fireworks, 327
described, 393–394
keyboard shortcuts, 398
launching, 55
layers/folders
actions, 400
adding, 398
content layers and layer folders, 400
deleting, 399
guide layer, 400
hiding and showing, 399
locking, 399
motion guide, 400
moving, 399
naming, 399
organizing, 399–400
selecting, 399
movies, publishing
Bandwidth Profiler, 476
breakpoints, 474
debugging, 471–472
exporting files, 479
optimizing, 469–471
Output Window, 474–475
Publish Settings, 477–479
remote debugging, 473–474
Trace Action, 475–476
movies, toolbar for working with in FreeHand, 39
Flash
new features
accessibility support, 18
ActionScript 2, 18
documents, switching between, 18
Find and Replace, 18
Flash Player, detecting, 19
globalization and Unicode support, 20
Help system, integrated, 18
History panel, 19
interactivity, adding, 17
interface, 17
publishing, 19
runtime performance, 19
security, 19
small font size rendering, 19
spell checking, 18
Start page, 18, 19
Strings panel, 20
templates, 18
Timeline effects, 17
Video Import Wizard, 19
Property inspector, 394–395
scene, setting for Fireworks, 327
SWF
described, 711–715
editing, 715
exporting to, 386–387
links, 715–716
Toolbar, 395
Flash Authoring File. See FLA
Flash Component File. See SWC
Flash Elements, 23
Flash Movie File. See SWM
Flash Player, detecting, 19
Flash Remoting
ColdFusion with, 24, 483–484
e-card application
action page, 496–498
data source, setting up, 484–485
described, 484
detail frame and form, 494–495
linking ColdFusion, 487–488
movie, 488–489
NetConnection debugger, 496
summary frame, 490–494
summary function, 485, 486
view page, 499–501
Flash Video Exporter, installing, 873
flipped arc, 66
floating
bitmap images, 263
images in text block, 552–553
flowcharts, Web site design, 28
focus, Flash active window, 397
folder
ColdFusion templates, previewing, 789
Dreamweaver
templates, 623–624
user-specific configuration, 736
Fireworks preferences, setting, 193
Flash
actions, 400
adding, 398
content layers and layer folders, 400
deleting, 399
guide layer, 400
hiding and showing, 399
locking, 399
motion guide, 400
moving, 399
naming, 399
organizing, 399–400
selecting, 399
FTP, 771, 773–774
root, navigating, 535
set point, root-relative path, 583
symbols, location of, 106
Web site, described, 529
folds gradient, 209
fonts
Flash
embedding, 412
optimizing, 470
types, 410
gathering for output, 173
individual letters, modifying, 247
larger, smaller, XXS through XXL, 607
length measurements, 606–607
limiting for Web pages, 603
menu buttons, Fireworks, 15
saving as style for computers without specific loaded, 204
text block, 114
footnotes, 245
foreground layer, moving, 52
form
adding, 653–654
application variables, 821
ASP.NET control objects, 24
data processing
adding user, 826–829
ColdFusion components, 837–844
database table, inserting new record into, 822–825
deleting database records, 829–832
described, 822
modifying database records, 833–837
Repeat Region Server Behavior, 825–826
XML support, ColdFusion, 844–851
described, 649
detail, e-card application, 494–495
Dreamweaver tools, 652
e-mail, 650
formatting with table, 658–659
Habitat Alert Web site, 662–663
mechanics
cookies, 650
described, 649
Mailto:, 650
name and e-mail addresses, submitting, 494–495
objects
binding data to, 836
choosing correct, 654
described, 654
labeling, 654–655
naming, 655
properties, 656–658
properties, 656
server variables, 821–822
server-side processing
described, 650
FormMail and other CGI scripts, 651
Web applications, 651
session variables, 821
and URL parameters
creating, 820
described, 819
mechanics, 820
retrieving, 820
Validate Form behavior, 730
format
graphics, importing, 134
image files, exporting, 6, 132
save in original, 15
video, 705–707
Web graphic files, listed, 128
formatting
database records, 834–835
forms with table, 658–659
text in Property inspector, 599–600
FormMail server-side processing, 651, 655
F/R queries, running, 643–646
frame
buttons, displaying, 294
detail, e-card application, 494–495
exporting as separate files, 389
frame, animation
adding and deleting, 342–343
distributing to, 344
exporting, 382
files, exporting as, 381
Frame Delay, 345–346
layers, sharing across, 344
looping, 345
movies, 424–425
moving and duplicating, 343
Onion Skinning, 344–345
reversing order of duplicated, 343–344
setting number, 341
frame-by-frame animation
adding frames, 427
deleting frames, 427
frames-per-second setting, 426–427
labeling keyframe, 428
Onion Skinning, 426
pivot point, changing, 428–430
reversing frames, 428
steps, 425
Frame Delay, 345–346
frame rate, animation, 152
framed documents
link targets, setting, 675
targets, 674–675
framed Web sites
advantages of using, 666–667
borders, 669–670
dimensions, 670–671
disadvantages of using, 665, 667
documents, 673–674
linking to framed documents, 674–675
mechanics, 665–666
naming frames, 671–672
navigating, 669, 687
page background colors and images, 674
page margins, 673
properties, setting, 669–671
resizing options, 673
rows or columns, 667
Save All frameset option, 672–673
saving frameset, 671
scrolling, 673
simple frameset, 667–671
source, saving or setting, 672
title, setting, 674
frameset, 667–671
frames-per-second setting, 426–427
Freeform tool
activating, 90
FreeHand, 73–74, 90–92
Push/Pull mode, 73, 90–91
Reshape Area button, 74, 91–92
FreeHand
animation
basic, 35, 144–146
Bird Facts 101 project, 153–160
described, 149
envelopes, 139–144
Flash actions, 150–151
Hungry Heron Diner sample project, 160
MovieClips, transforming into, 151–153
oddball tricks, 160–161
symbols and library, 147–148
Waving Reeds project, 146–147
art
selection tools, 64–65
tools panel, 63
vectors and bitmaps, 62
Bird Facts 101 project
creating artwork, 154
described, 153–154
final animation, 158
layering art, 155–156
moving outside movie, 159–160
navigation, setting, 156–158
printing movie, 158–159
symbols, obtaining, 154
testing movie, 159
Color tools
managing, 82
Stroke and Fill boxes, 83
Combine commands
Crop, 97
Divide, 97
Intersect, 97
Punch, 97
Transparency, 97
Union, 96
composite paths
Combine commands, 96–98
fills and gradients, 99
joint/split, 95–96
text, 98–99
described, 4–5
drawing tools
Arc, 66
Bezigon, 66
Calligraphic Pen, 68
Ellipse, 68–69
Line, 66
Pen, 65–66
Pencil, 68
Polygon, 70–71
Rectangle, 69–70
Spiral, 67–68
Text, 66
Variable Stroke Pen, 68
files, importing into Flash, 401
Graphic Hose tool, 110–112
graphics and text
placing text inside graphic, 119–120
runarounds, 120–121
HTML page
Dreamweaver, integrating, 135–136
exporting, 128–134
Fireworks, integrating, 134–135
Flash, integrating, 137
graphics, understanding, 128
producing, 127
Layers panel, 102–104
lens fills, 100–102
maps, 34
MovieClips, transforming animation into
layers and pages, 151–152
movie properties, 152
optimizing, 152–153
new features
anti-alias view, 14
Fireworks PNG Importer, 12–13
gradient fills, 11
JPEG thumbnail preview, 14
navigation actions, creating, 12
object and test properties, changing, 11
panels, 10
relationship between elements, showing, 12
shapes, 11
stroke, fill, and effect attributes, 11
SWF files, embedding, 11
Toolbox, 10
Vector Live Effects, 11
vector shape, extruding, 12
output, preparing
collect for output, 173
Output Area tool, 172
PDF, exporting to, 172
PostScript file, 172
service bureau needs, 172
package design, 34
page layout, 33–34
panels
Align, 52
Answers, 55
Assets panel, 46–48
Color Mixer, 48–50
Document panel, 45–46
Halftones, 54
Layers, 50–52
Library panel, 48
managing, 42
Mixers and Tints group, 48–50
Navigation, 54
Object panel, 43–45
Properties group, 42–46
Styles panel, 46–47
Swatches panel, 47–48
Tints, 50
Transform, 53–54
paths
adjusting, 89–94
tools, 87–89
printing
basics, 163
business card sample project, 169–171
envelope sample project, 168–169
letterhead sample project, 167–168
PDF output, 164
PostScript output, 164
Print dialog box, 164–166
selection tools
Eyedropper, 65
Lasso, 65
Output Area, 65
Page, 65
Pointer, 64
Subselection, 64
SNAP icons, 83–84
styles
creating, 108
editing, 109–110
symbols
editing, 107
managing, 105–107
Table project, sample, 116–117
technical illustration, 34
Text on a Path project, sample, 118–119
FreeHand
text shadow effects
Extrude tool, 123–124
Paste Inside, 124–126
Shadow tool, 121
Smudge tool, 122
toolbars
Controller, 39
Envelope, 40, 41
Info, 39
Main, 38
managing, 36–37
Status, 37–38
Text, 40
Xtra Operations, 40, 41
Xtra Tools, 40, 41
tools
Bezigon, 88
Calligraphic pen, 88–89
Line, 88
paths, adjusting, 89–93
Pen, 87–88
Variable Stroke pen, 88
transformation tools
Bend, 74–75
Eraser, 75
Extrude, 80
Fisheye Lens, 79
Freeform, 73–74
Knife, 75
managing, 71–72
Perspective, 75–78
Reflect, 73
Rotate, 72–73
Roughen, 74
Scale, 72
Shadow, 80
Skew, 73
Smudge, 80
3D Rotation, 78–79
Trace, 80–82
Transparency, 97
View tools
Hand/Grabber, 82
Zoom, 82
Web graphics, 35
word processing
finding and replacing text, 115–116
spell checking, 115
Text Block properties, 114
Text properties, 115
Text tool, 113–114
workspace
document window and pasteboard, 36
illustrated, 35
panels, 42–55
preferences, 57–59
shortcuts, 59–61
toolbars, 36–41, 61
Xtras
menu, 84–86
paths, adjusting, 93–94
freeware programs, 855
FTP (File Transfer Protocol)
described, 581, 770
secure, 23
Web site publishing
connecting to Web server, 772–773
described, 763, 771–772
files and folders, putting and getting, 773–774
site files, synchronizing, 774–775
function
argument, creating, 838
Dreamweaver navigation behaviors, 679, 681, 721
Flash summary frame, 491–493
functionality, adding to button, 328–332
futuristic skin, applying to shape. See power text mask


Index_G

Team LiB

Index

G

gamma settings, Windows versus Macintosh computers, 195
gateway connection, Flash summary frame, 490–491
General tab, HTML setup, 382
Get More Behaviors, 731
getting
files and folders from FTP site, 773–774
Flash components, 464–465
GIF (Graphics Interchange Format)
animation
benefits of using, 339
exporting, 348–349
importing, 348
compressing, 374
described, 128
Flash publish setting, 477
interlacing, 374–376
optimizing images
colors, reducing, 371–372
dithering, 374
indexed palette, 370–371
interlacing, 374–376
loss (compression), 374
Matte option, 371
transparency, setting, 372–374
saved color palette, 198
spacer, 562, 743
transparency, 372–374
globalization, Flash support, 20
GNU software, 855
Go to URL behavior, 727
gold skin, power text mask, 256–257
gradient fills
color, editing, 208
composite paths, FreeHand, 99
drawing tools, 406–408
file format to avoid, 128
Fireworks
described, 209–210
editing, 211
position, altering, 210–211
saving, 212
transparency, adding, 211
Flash, optimizing, 470
FreeHand
attributes, 11
text on a path sample project, 118–119
in text object paths, 99
Graphic Hose tool, 110–112
graphic style, 105
graphical user interface, creating component structure. See GUI, creating component structure
graphics
FreeHand
placing text inside graphic, 119–120
runarounds, 120–121
gathering for output, 173
HTML page, understanding, 128
importing into movie library, 418
symbols, 422
text, placing inside, 119–120
graphics editor. See Fireworks
graphics interactivity, adding. See behaviors
Graphics Interchange Format. See GIF
graphing, 25
gray skin, applying to power text mask, 257–258
grayscale
converting to color, 85, 214
Fireworks images, 197
importing, FreeHand, 134
mixing color in Fireworks, 200
greeting data, sending, 498
grid
attaching, 75
enabling, Perspective tool, 75
mirroring objects on, 76
moving things around on, 76
removing objects, 76
Grosvenor, Steven (guest expert)
background, 858
commands
Apply button, setting up, 327–328
assembling, 326
Cancel button, creating, 333
defining purpose, 322–323
enhancements, 337
error checking, adding, 334–335
exporting and testing, 335–336
functionality, adding to button, 328–332
History panel, 324–326
interface, creating in Flash, 327
process flow, 323–324
resources, 337
scene, setting in Flash, 327
scripts, exported, 326
testing command, 336–337
grouped panels, Dreamweaver
described, 525–526
Files panel group, 526–527
Reference panel, 526
groups
CSS selectors, 605
punching all the way through, 98
rectangles in Fireworks, 219
text, running around, 121
guest experts, descriptions of
Charles E. Brown, 858
Kim Cavanaugh, 858
Steven Grosvenor, 858
Brad Halstead, 858
Japi Honoo, 858
Samuel Neff, 859
David C. Nicholls, 858
Mary Rich, 857
Ron Rockwell, 857
Doug Sahlin, 857
Murray Summers, 859
GUI (graphical user interface), creating component structure, 838–841
guide layer, 400
guides
shapes, adding to, 233–234
slicing tools, 363–364


Index_H

Team LiB

Index

H

H Scroller extension, 740
Habitat Alert Web site
bitmap image files, 290
CSS files, 618
dynamic content files, 818, 852
dynamic date files, 736
files prepared, 216
forms, 662–663
image files, 389
layout, exporting, 384–385
media elements, 718
mockup, 28–29
motion tween e-card, 448
movies, publishing, 480
navigation files, 316, 696
navigation links, 592
output, preparing, 173
planning, 27–28
sound files, 456–457
templates, 648
testing and deploying, 29
Web site folders, 538
workflow overview, 29
halftones, 54
Halstead, Brad (guest expert)
background, 858
Dreamweaver templates, converting
backing up, 641–642
code differences, 636–638
conversion process, 638
described, 635–636
F/R queries, running, 643–646
performing conversion, 643
server language and, 646–647
site, setting up, 639–641
syntax, checking, 642–643
Hand/Grabber View tool, 82
handle size, FreeHand, 58
handlers, syntax errors, 471
Harianto, Bryan (sound and applet creator), 860
hash mark (#), 588, 594
height
layers, 749
minimum cell, 572
movie, setting, 714
table structures, 560
values, video, 711
help
Dreamweaver, 526
Fireworks menu, 185
Flash integrated, 18
linking to Macromedia Web site, 55
helper applications, 701–702
hexadecimal color model, 200
hidden field, HTML form, 652
Hide Pop-Up Menu/Show Pop-Up Menu behavior, 728
Hide/Show panels, Fireworks, 16
hiding layers/folders, Flash, 399
highlight preferences, setting, 192
highlighting paths, 58
History panel
actions or steps, recording, 314
command navigation link, building, 589–590
Dreamweaver
back stepping, 539
command, building, 740–741
Fireworks, 324–326
Flash, 19, 466
Holzschlag, Molly (Color for Websites: Digital Media Design), 196
HomeSite+, 870–872
Honoo, Japi (guest expert)
animation banner, 357–359
background, 858
Fireworks bitmap image composition, 279–290
power text mask, 254–258
horizontal rules, Web page block, 551–552
horizontal scale, Fireworks, 245
hot spot. See also invisible button symbols
described, 190
image map, 586
points, adjusting, 588
HSB color, mixing in Fireworks, 200
HSL (hue, saturation, and lightness), 48
HTML (Hypertext Markup Language). See also snippets
Application Objects, 809–811
code, viewing in text editor, 781
content, entering in text box, 730
CSS versus, 593, 596–597
Dreamweaver
horizontal rule, adding to page, 551–552
tag attributes, handling, 524–525
text content, adding, 549
Elements, 23
exporting, 379, 383
Fireworks
inserting tables, 574–576
slices, naming, 190
Flash publishing settings, 477, 479
formatting, 596–597
layers
described, 747–750
submenus, creating, 753–754
navigation links, 583
output errors, 135
reference guides, finding, 526
selector, 594
setup, exporting
Document Specific tab, 383
General tab, 382
Table tab, 382–383
spell checker ignoring, 763
tags
editing, 870–872
redefining with CSS styles, 602–605
text
rendering as button, 412
simulating, 246
slicing designs, 367
HTML (Hypertext Markup Language) form
content, validating, 730
described, 649
Dreamweaver tools, 652
formatting with table, 658–659
Habitat Alert Web site, 662–663
HTML page extension, 651
jump menu, adding, 659–662
HTML (Hypertext Markup Language) page
attributes binding data, 803
displaying newsletter subscribers, 787–791
exporting, 128–134
forms, 651
framed sites
advantages of using, 666–667
background colors and images, 674
borders, 669–670
dimensions, 670–671
disadvantages of using, 665, 667
documents, 673–674
linking to framed documents, 674–675
margins, 673
mechanics, 665–666
naming frames, 671–672
navigating, 669, 687
properties, setting, 669–671
resizing options, 673
rows or columns, 667
HTML (Hypertext Markup Language) page, framed sites
Save All frameset option, 672–673
saving frameset, 671
scrolling, 673
simple frameset, 667–671
source, saving or setting, 672
title, setting, 674
graphics, understanding, 128
producing, 127
HTML (Hypertext Markup Language) table
building, 743
described, 555–556
height and width, 560
inserting, 557–558
reasons to use, 561
rows and columns, 560–562
selecting, 558–559
types, listed, 556–557
HTTP (Hypertext Transfer Protocol)
described, 581
form data, transmitting, 656
Hue and Saturation, adjusting bitmap images, 278
Hungry Heron Diner sample animation project, 160
hybrid table, building, 568–571
hyperlinks
Browse for File method, 584
data, sending to server for storage, 819
decorating, 608
described, 584
Link History, 585–586
Point to File method, 585
properties, setting, 608
Hypertext Markup Language. See HTML
Hypertext Transfer Protocol. See HTTP


Index_I

Team LiB

Index

I

ID layer, 748
ID selectors, 594
Illustrator 7, exporting files as, 381
image. See also rollover image
alpha channel support, 13
exporting
JPEG, 379
slices only, 383
various on one sliced design, 365–366
floating in paragraph, 831
HTML forms, 652
importing into movie library, 418
navigation
behaviors, 687–688
interactive elements, 300–309
map-drawing tools, 586–588
Polygon tool, 588
page background, 674
Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore behaviors, 729
slices, exporting only, 383–384
Swap Image behavior, rollover buttons, 682–683
text effects, filling with, 251
Web page, inserting
Assets panel, 543–544
background, editing, 547–548
described, 543
editing with Fireworks, 546–547
mission statement page, 544–545
Image Doctor (Alien Skin Software), 855
image map
Dreamweaver template, 627
Fireworks, 309–310
importing
buttons, 294
files into Flash, 400–401
GIF images, 348
graphics format files, 134
Library symbols, 297, 418
movies, protecting, 152
sound files, 450
styles, 213
inches, 606
index, Web file content, 537
indexed colors, displaying, 195
indexed palette, GIF images, 370–371
Info toolbar, FreeHand, 39
information
linking to Macromedia Web site, 55
local intranet site, defining, 792
inheritance, 595
Ink Bottle tool, 406
input text box, creating, 494–495
Insert Bar objects, Dreamweaver
described, 20, 742
Table object, building, 743
user data files, finding, 742
Insert Record server behavior, 823–825, 827–829
Insert toolbar, Dreamweaver, 522–523
inserted menu, using in template, 693–694
inserting
drawing versus, DHTML layers, 749–750
Dreamweaver snippets (stored code block), 734
Fireworks pop-up menus into existing Dreamweaver page, 692
navigation bar, 830–831
new database record, 822–823
new record into database table, 822–825
tables, 557–558
Web page images, 543
Inset Path, Xtras adjustment, 94–95
installing
Dreamweaver extensions, 738–739
Flash components, 464–465
Macromedia Studio
ColdFusion for Windows, 866–870
Flash Video Exporter, 873
HomeSite+, 870–872
steps, 862–866
system requirements, 861–862
instances
animation, 340
buttons, 296–297
defined, 106
editing, 107
Flash movies, avoiding problems with, 472
integration example, Web services
complex, 814–815
consuming, 817
creating, 812–813
description, 813
Dreamweaver to consume, 816–817
intensity, color, 85
interactivity
Fireworks navigational elements, 300–309
Flash, adding, 17
FreeHand panels, 55
interface
Fireworks, 14
Flash, 17, 327, 393–394
layout, building, 237–240
interlacing GIF images, 374–376
Internet Explorer
Flash SWF movies, adding to pages, 711
form styles, 661–662
framed Web sites, printing, 667
video plug-ins, 707–709
Internet Service Providers. See ISPs
Internet technology, optimizing images and, 367–368
intersect paths, reshaping, 236
intranet site
local
information, defining, 792
next steps, 794
remote information, defining, 792
testing server, defining, 792–794
remote
described, 794
local info, defining, 795
next steps, 797
remote info, defining, 795–796
site pages, uploading, 796–797
testing server, defining, 796
Invert filter, bitmap images, 278
inverting colors in part of drawing, 100
invisible button symbols, 421
ISPs (Internet Service Providers)
domain name, 770
Web server space, renting, 763
items, Library
adding existing, 622
building, 621–622
described, 619–620
detaching, 623
modifying, 622
operations, 620
updating, 622–623


Index_J

Team LiB

Index

J

jagged or wavy path. See Roughen tool
Java, 24
Java applet
sound file format, 702
video elements, 716–718
Java Database Connectivity. See JDBC
JavaScript. See also snippets
alert window, creating with Popup Message behavior, 729
arrays, storing pop-up menus as, 689–690
behaviors, 679–680
Call JavaScript behavior, 723
commands in Fireworks, 319
to control QuickTime video, 710
cookies, 650
external, linking Dreamweaver script to, 733
interactive Web buttons, 292
reference guides, finding, 526
rollover button, 679
JDBC (Java Database Connectivity), 783
join path, 233, 236
joint/split composite paths, 95–96
JPEG/JPG (Joint Photographic Experts Group) file
bitmap images, converting, 153
described, 128
Flash publish settings, 477, 479
gradient fills, advantages of using with, 209
importing and then exporting with Flash, 415
optimizing images
dialog box, 376
multiple compression, problem arising with, 469–470
progressive, 377
Quality setting, 376
selective compression, 377–379
sharpening edges, 377
smoothing, 376
send to Email, 261
thumbnail preview, 13, 14
jump menu
behavior, 728
HTML forms, 652, 659–662
optional editable region, adding, 628–629


Index_K

Team LiB

Index

K

kerning, 245
key, Flash and ColdFusion, 482
keyboard shortcuts, setting in Dreamweaver, 527–528
keyframe
animating movies, 424–425
labeling movies, 428
second and third, coding, 494
Keyline mode
drawing in FreeHand, 38
viewing sample animation, 145
keywords, Web site publishing, 767
Knife tools, 75, 92–93


Index_L

Team LiB

Index

L

L Shape tool, 224
labeling
form objects, 654–655
keyframe, 428
LAN (Local Access Network), 770
Lasso selection tool, 65
layer
art for Bird Facts 101 project, 155–156
DHTML
described, 747–748
Drag Layer puzzle, building, 750–752
drawing versus inserting, 749–750
Set Text of Layer to create submenus, 753–754
sliding menu bar, animating, 754–755
special properties, 748–749
Drag Layer behavior, 727
exporting as separate files, 389
Flash
actions, 400
adding, 398
content layers and layer folders, 400
deleting, 399
guide layer, 400
hiding and showing, 399
locking, 399
motion guide, 400
movies, optimizing, 471
moving, 399
naming, 399
organizing, 399–400
selecting, 399
frames, sharing across, 344
FreeHand
Layers panel, 102–104
multipage document, integrating into Fireworks, 134
options, setting, 58
panels, 50–52
view options, setting, 59
maintaining between animated elements, 143
MovieClips, transforming animation into, 151–152
output limitations, 132
Show-Hide Layers behavior, 730
Layers panel
Button Library, viewing, 299
FreeHand, 102–104
Layout Designer 2 extension, 740
layout interface, building, 237–240
layout, modular
coloring cells, 573–574
described, 567–568
hybrid table, building, 568–571
minimum cell height, 572
stacking tables, 571
table cell background image, 571–572
leading, 245
length
CSS units
absolute, 606
larger, smaller, and XXS, 607
relative, 606–607
extruded text, 122
lens fills, 100–102
Leroy, Jason (sound and applet creator), 860
letterhead, printing, 167–168
libraries
animation, FreeHand, 147–148
buttons, 296–297, 299–300
Flash components, 461
Freehand panel, 48
items
adding existing, 622
building, 621–622
described, 619–620
detaching, 623
modifying, 622
operations, 620
updating, 622–623
items, exporting, 385–386
symbols
common, 418
defined, 105
described, 417
importing into, 418
sharing among movies, 418
using, 418
License Agreement
ColdFusion, 867
Studio, 864
light
brightness from external, creating illusion of, 100
and dark colors, registering in print job, 85
photo, adding to area, 264
lighting
blended object
controlling, 122–123
described, 80
text shadow effects, 123–124
in part of drawing, 100
Line drawing tool
Fireworks, 227–228
FreeHand, 63, 66, 88
linear gradient, 209
lines, noticeable in GIF image, 209
lines of text, space between. See leading
link
building between HTML pages, 130–131
CSS styles
applying, 608–609
contextual, 612–613
described, 608
properties, 608
text decoration, 608
link
Flash Remoting with ColdFusion, 481–482
Flash SWF movies, editing, 715–716
Web site, checking, 764–765
Link History, 585–586
linking
Dreamweaver scripts, custom to external JavaScript file, 733
framed documents, 674–675
framed Web site, building, 674–675
sound, 703
lists, form, 652, 656
Live Effects
colorizing grayscale image, 215
filters versus, 185
Fireworks, 16
image color, changing, 214
tweening, 347
loading
saved palettes, 198
sound with movie, 455–456
Local Access Network. See LAN
local info
defining, remote intranet site, 795
Dreamweaver Web site, 530
local intranet site, 792–794
local root folder, 529
local variables, 821
locked regions, Dreamweaver template
described, 631
updating, 633–634
locking, layers/folders, Flash, 399
logic elements, Flash and ColdFusion, 482
logo
Envelopes
animating, 142–144
treatment, 140–142
images, slicing, 364–366
scaling, 217
symbols, working with, 105
text on a path sample project, 118–119
using in multiple projects, 34
loops
animation, 146–147
avoiding syntax errors, 471
Flash and ColdFusion, 483
frames, 345
movie, setting, 714
MP3 audio format, 702
loss (compression), GIF images, 374
Lotus Domino Designer, 381


Index_M

Team LiB

Index

M

Mac OS X
data file location, 742
previewing JPEG or BMP thumbnails, 14
user-specific configuration folders, 736
Macintosh
Apple Color Picker, 4
audio format, 702
browsers, maximum number off, 538
color gamma settings, 195
Flash toolbars, 393
FTP client, 772
installing back-of-the-book CD, 853, 854
special character key combinations, 252
Studio MX requirements, 862
video plug-ins, 706
Macintosh Projector Flash publish setting, 477
Macromedia Exchange Web site, 464
Macromedia Flash MX ActionScript Bible (Wiley), 400
Macromedia Studio installation
ColdFusion for Windows, 866–870
Flash Video Exporter, 873
HomeSite+, 870–872
steps, 862–866
system requirements, 861–862
Magic Wand bitmap images, 263
magnifying drawing or map area with lens fill, 100
Mailto:
basic application, 780
forms, 650
Main toolbar
Fireworks, 185–186
FreeHand, 38
maps
curves, lines with, 222–223
drawing tools, 586–588
FreeHand, 34
margins
box, 610–612
page, framed Web site, building, 673
markup language, ColdFusion, 781–782
marquee tools
accessing, 261–262
adding to or subtracting from, 262
floating, 263
Magic Wand, 263
moving selections, 262
Polygon, 263
saving and restoring, 262
Mask Group animation method, 351–352
masking bitmap images
cutting image out of background (vector mask), 269–271
fading into background, 267–268
painting, 274–275
paste inside (vector mask), 271–273
pros and cons, 273
saving, 275–276
shortcut, 268–269
masking effects
adding text animations, 443–446
creating mask, 441–442
editing mask, 442–443
finishing touches, 447
setup, 440–441
master detail pages, database records, 833
master pages, FreeHand
developing and selecting, 46
support, 34
Matte option, GIF images, 371
McPhetridge, Todd (photographer), 859
measurements
layer height and width, 749
text height and width, 46
media elements
Flash files
button options, 698–699
elements, 700–701
text objects, 699–700
types, 697–698
sound
described, 701–702
downloading plug-ins, 703–704
embedding, 703
file formats, 702
files, finding, 705
linking, 703
parameters for embedded, 704
video
adding to pages, 707
Flash SWF movies, adding, 711–716
formats and plug-in options, 705–707
Internet Explorer and QuickTime Player plug-ins, 707–709
Java applet, 716–718
JavaScript to control QuickTime, 710
scripting movie control buttons, 710–711
width and height values, 711
menu
adding to buttons, 314–315
contextual, 536
Hide Pop-Up Menu/Show Pop-Up Menu behavior, 728
HTML forms, 652, 656
jump, adding, 659–662
Jump Menu/Jump Menu Go behavior, 728
snapping, 756–760
menu bar
animating DHTML layers, 754–755
Fireworks
Commands menu, 184
Edit menu, 182
File menu, 182
Filters menu, 185
Help menu, 185
Modify menu, 183
Select menu, 183
Text menu, 183
View menu, 183
Window menu, 185
merging
HTML table rows and columns, 563, 565
two or more paths, 235–236
meta tags, 766–767
Microsoft Access, 787–791
Microsoft Excel, copy and paste from, 23
Microsoft Windows. See Windows (Microsoft)
Microsoft Word
copy and paste into Dreamweaver, 23
documents as Web page text content, 549
MID/MIDI (Musical Instrument Digital Interface) audio format, 702
MIME (Multipurpose Internet Mail Extension)
classification, 701
form data, transmitting, 656
minimum cell height, 572
mirrored structure, FTP (File Transfer Protocol), 771
mirroring objects on grid, 76
mission statement page
block formatting, 550–551
images, inserting, 544–545
properties, setting, 542–543
Mixers and Tints FreeHand group, 48–50
mockup design sample, 28–29
modem, simulating viewing movie via, 476
Modify menu, Fireworks, 183
modifying
animation for Web, 357
database records, form, 833–837
Fireworks tables, 562–565
Library items, 622
styles, 212–213
updating pages and Dreamweaver templates, 633–634
XML document object, 846
modular table layout
coloring cells, 573–574
described, 567–568
hybrid table, building, 568–571
minimum cell height, 572
stacking tables, 571
table cell background image, 571–572
monitors
color mixing method, 48
Web safe colors
Color Mixer, 200
Find and Replace, 371
finding unsafe, 199–200
snapping to, 197
mono sound, 449
monochrome lens, 101
motion guide, Flash layers/folders, 400, 437–438
motion paths, editing symbols, 342
Motion Picture Experts Group Audio or MPEG-Audio-Layer 3. See MP3.
motion tweening
animating movies, 430–431
opacity settings, 436–437
timeline effects, 433–435
mouse
menus, snapping, 756–760
Variable Stroke Pen tool, 68
movement between symbols
animating movies, 430–431
timeline effects, 433–435
movie
e-card application, 488–489
properties, transforming animation, 152
publishing
Bandwidth Profiler, 476
breakpoints, 474
debugging, 471–472
exporting files, 479
optimizing, 469–471
Output Window, 474–475
Publish Settings, 477–479
remote debugging, 473–474
Trace Action, 475–476
Movie Clip. See also components
described, 419
empty, 420
symbols, 419–420
transforming into animation, FreeHand, 151–153
Movie Settings dialog box, 12–13
moving
bitmap image selections, 262
frames, 343
in HTML tables, 559
individual objects placed by Graphic Hose, 112
layers from foreground to background, 52
layers/folders, Flash, 399
objects with transformation handles, 72
outside Bird Facts 101 movie, 159–160
text path, 248
things around on grid, 76
Moving Pictures Expert Group video format. See MPEG video format
MOV/QT (QuickTime) video format, 705
MP3 (Motion Picture Experts Group Audio or MPEG-Audio-Layer 3)
file format, 702
sound compression, 454
MPEG (Moving Pictures Expert Group) video format, 705
multiline Flash, 412
multimedia helper applications, 701
multimedia interactivity, adding. See behaviors
multiple buttons using same remote area, 307–309
multiple graphic images, placing on page. See Graphic Hose tool
multiple style sheets, using @import with, 615
multiple-event rollovers. See remote rollovers
multiple-page documents
FreeHand, importing in Fireworks, 134
moving around in, 38
support in FreeHand, 33–34
Multipurpose Internet Mail Extension. See MIME
musical instrument audio format, 702
Musical Instrument Digital Interface. See MID/MIDI audio format


Index_N

Team LiB

Index

N

name
movies, identifying, 714
region, handling inconsistent in Dreamweaver templates, 634–635
slices, automatic, 364
naming
buttons, 304
exported images, 383
form objects, 655
forms with dynamic pages, 823
layers/folders, Flash, 399
variables and functions in Flash movies, 472
Web servers, recognizing files by extensions, 537
Web site frames, 671–672
navigation
actions, creating (Action tool), 12
button submenus, creating, 753–754
Fireworks elements
buttons, 292–300
disjoint rollovers, 291
image map, 309–310
interactive images, 300–309
menu, adding to buttons, 314–315
navigation bar, 291
pop-up menu, 291, 310–313
simple rollovers, 291
Flash movie, 150–151
framed Web site
advantages of, 665, 666–667
documents, 669
FreeHand panels, 54
setting for Bird Facts 101 project, 156–158
status object, 831
navigation bar
behaviors, 679, 688–689
building in Dreamweaver, 686–687
defined, 291
Fireworks, 291
functionality, adding, 687–688
inserting, 830–831
Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore behaviors, 729
rollover buttons versus, 686
in templates, 688–689
using in framed Web sites, 687
navigation behaviors
bars and templates, 688–689
described, 679
Dreamweaver
bar, building, 686–687
behavior functions, 681
described, 679–680
events, 680–681
pop-up menus, building, 694–696
Fireworks pop-up menus
described, 689–690, 690
editing in Dreamweaver, 692–694
image-based, editing, 690–691
inserted menu, using in template, 693–694
inserting into existing Dreamweaver page, 692
URL link, changing, 693
navigation behaviors
framed sites, using bars in, 687
images (Set Nav Bar), 687–688
rollover buttons
described, 681
Fireworks, inserting, 681–682
remote, adding to existing, 684–685
remote options, 685–686
Swap Image behavior, 682–683
navigation links
anchor, 590–591
command, building from History panel, 589–590
e-mail, setting up, 591–592
HTML, 583
image
map-drawing tools, 586–588
Polygon tool, 588
null, 588–589
text
Browse for File method, 584
described, 584
Link History, 585–586
Point to File method, 585
URLs
absolute, 581
document-relative paths, 582
external assets, 582
root-relative paths, 583
Navigation panel, exporting HTML, 129–130
Neff, Samuel (guest expert)
background, 859
ColdFusion components, 501–508, 837–844
ColdFusion support, 508–516
Web services integration example
complex, 814–815
consuming, 817
creating, 812–813
description, 813
Dreamweaver to consume, 816–817
XML support, 844–851
nested frameset
creating with Go to URL, 676–677
reasons to use, 667, 668
nested table
described, 557
exporting, 383
Net Services, 490–491
NetConnection Debugger, 496
Netscape browsers
background image problem, 571, 604
external style sheets, attaching, 614–617
Flash SWF movies, adding to pages, 711
form styles, 661
framed Web sites, printing, 667
link styles, viewing, 608
tables, viewing, 383
NetServices, accessing, 491
New Page button, Fireworks PNG Importer, 13
new record form, database table, 827
news ticker, scrolling, 716–718
newsletter subscriber page
ColdFusion application, creating in Dreamweaver, 787–791
described, 787–788
testing server and data source, setting up, 789–791
Nicholls, David (guest expert)
animation for Web
conceptualizing, 349
creating, 354–356
designing, 349
etch-away-the-bitmap method, 353–354
exporting, 356–357
fading the cat, 351
Mask Group method, 351–352
modifying, 357
transparent gradient overlay method, 353
vector drawing, preparing, 350–351
background, 858
noise, adding to Fireworks, 277
null navigation links, 588–589
numeric transform, tweening, 348


Index_O

Team LiB

Index

O

object
aligning, 413
attaching sound to, 455–456
behaviors, creating in Dreamweaver, 809–817
behind others, selecting, 64
converting to Movie Clip, 420
database records, adding, 834
existing, converting to symbol, 341
Fireworks effects, viewing, 213
Flash
and ColdFusion, 482
movie, listing, 475
forms
choosing correct, 654
described, 654
labeling, 654–655
naming, 655
properties, 656–658
FreeHand
layers, selecting and assigning, 104
properties, changing (Object panel), 11
snap to, 83–84
sound, 454–455
swapping for symbols, Fireworks PNG Importer, 13
warping ungrouped, 414
Object Database Connectivity. See ODBC
Object panel
FreeHand panels, 43–45
tools, FreeHand, 89–90
ODBC (Object Database Connectivity), 783
Onion Skinning
animating movies, 426
frames, 344–345
opacity
animation
motion tweens, adjusting, 436–437
setting, 341
color gradient, 211
open arc, 66
Open Browser Window behavior, 728–729
Open documents, Fireworks PNG Importer, 13
opening
bitmap images, Fireworks, 260
documents, 36
external style sheet, browser issues/solutions, 613–614
files, existing, 36
page, Fireworks tables, 562
optimizing
animation, 427
Flash movies, 6, 469–471
MovieClips, transforming animation into, 152–153
optimizing images
described, 6
GIF
colors, reducing, 371–372
dithering, 374
indexed palette, 370–371
interlacing, 374–376
loss (compression), 374
Matte option, 371
transparency, setting, 372–374
Internet technology and, 367–368
JPEG
dialog box, 376
progressive, 377
Quality setting, 376
selective compression, 377–379
sharpening edges, 377
smoothing, 376
previewing
Export Preview dialog box, 369–370
Preview tab, 368
2-Up and 4-Up tabs, 368–369
order
duplicated frames, reversing, 343–344
multiple elements on page, 111
organizing layers/folders, Flash, 399–400
orientation
framed Web sites, 667
multiple objects on page, 111
orphan lens fills, 102
orphaned pages, 764, 765
OS X. See Mac OS X
outline of other frames, viewing. See Onion Skinning
outline text, modifying, 247
Output Area selection tool, 65, 172
output, FreeHand
collect for output, 173
Output Area tool, 172
PDF, exporting to, 172
PostScript file, 172
service bureau needs, 172
Output Window, Flash movies, 474–475
outsetting object paths, 95
Oval tool, 403–404
ovals. See Ellipse tool
overlapping objects, combining, 235–236


Index_P

Team LiB

Index

P

package designing, 34
padding, table cells, 576–577
page
Administration Web site example, 784
background, 674
binding data, 802–804
Dreamweaver templates
adding, 629–630
building from existing, 624–625
editing, 631–633
new, 630
dynamic content, ColdFusion, 782
layout, FreeHand, 33–34
margins, 673
MovieClips, transforming animation into, 151–152
opening Fireworks tables, 562
server behaviors, 811–812
video, adding to, 707
Page selection tools, FreeHand, 65
Paint Bucket tool, 406
painting bitmap images, 274–275
panel
Dreamweaver docked and grouped
described, 525–526
Files panel group, 526–527
Reference panel, 526
Flash components, 459–460
FreeHand
Align, 52
Answers, 55
Assets panel, 46–48
Color Mixer, 48–50
described, 10
Document panel, 45–46
Halftones, 54
Layers, 50–52
Library panel, 48
Mixers and Tints group, 48–50
Navigation, 54
Object panel, 43–45
Properties group, 42–46
Styles panel, 46–47
Swatches panel, 47–48
Tints, 50
Transform, 53–54
view options, setting, 59
FreeHand workspace, 42–55
styles, using, 212
Panel Layout, Fireworks
common features, 182
customizing, 180–182
panels group, Flash interface, 393
panning sound channels, 449
Pantone libraries, Fireworks PNG Importer, 13
parsing, Web server, 650
paste inside
masking bitmap images, 271–273
text shadow effects, 124–126
paste, Microsoft Word and Excel content, 23
pasteboard
FreeHand, 36
Web page, laying out, 127
path
continuing, 232–233
document-relative URLs, 582
Fireworks
altering, 252–258
closing, 232
converting text to, 247
crop, 236
drawing, 217
intersect, 236
join, 236
layout interface, building, 237–240
punch, 236
union, 235–236
FreeHand
adjusting, 89–94
highlighting options, setting, 58
text on a sample project, 118–119
tools, 87–89
joining, 233
root-relative URLs, 583
setting type on, 248–250
simple roller coaster animation, 161
tweening along, 437–438
Xtras
Expand Stroke, 93–94
Inset Path, 94–95
points, adding, 93
path connecting two points. See vector path
pattern color fills, 208
PayPal eCommerce Toolkit (WebAssist), 740, 856
PDF (Portable Document Format)
exporting to, 172
FreeHand documents, exporting with annotations, 54
printing, 164
Pen tool
drawing with, 63, 405–406
Fireworks
closing path, 232
continuing path, 232–233
editing shapes, 233–235
joining path, 233
points, adding and deleting, 233
FreeHand, 65–66, 87–88, 89
Pencil tool, 68, 404
percentage relative length measurement, 607
performance, Dreamweaver, 22
permissions, Administration Web site example, 785
perspective blended object. See Extrude tool
Perspective tool
attaching objects to grid, 75
common situations, 77–78
dimensions, changing object, 76
FreeHand, 75–78
grid, enabling, 75
mirroring objects on grid, 76
moving things around on grid, 76
removing objects from grid, 76
vanishing points, adding more, 76
photographers
Eyeland Studio, 859
Habitat Alert, Trevor Smith, Calvin Woods, 859
Olaf Starorypinski, 859
Todd McPhetridge, 859
Photoshop (Adobe)
exporting files to, 381, 387–388
file conversion, setting in Fireworks, 193
files, importing into Flash, 401
layer masks, equivalent in Fireworks, 267
plug-in filters, handling in Fireworks, 185
selections, handling Fireworks, 183
PHP server behaviors, Dreamweaver, 24
picas, 606
Pick Distance options, setting, 58
Pie, 225
pivot point, 428–430
pixel
animation, setting number, 341
bitmapped versus vector images, 259
described, 62, 217
Flash font width, adjusting, 410
framed Web sites, 670
radius, setting, 277
relative length, 606
placeholder
Library Items, 621
text effects, using as, 246
Play Sound behavior, 729
playing animation speed, setting frames per second, 426
playing movie, 150
plug-ins
bitmap image color, adjusting, 278
described, 701
sound, downloading, 703–704
video options, 705–707
PNG (Portable Network Graphics) file
described, 128
Flash publish setting, 477
importing into Flash, 401
send to Email, 261
transparency, 372–374
Point to File navigation method, 585
Pointer
adding text to documents in Fireworks, 244
selection tools, FreeHand, 64
points
adding
and deleting, 233
Xtras path adjustment, 93
FreeHand
appearance, 66
options, setting, 58
within objects, aligning, 52
relative length, 606
selecting several, 65
selections based on
bitmap images, 263
drawing tools, FreeHand, 70–71
Fireworks, 221
image navigation links, 588
slice tool, 362
Polygon tool
bitmap images, 263
drawing tools, FreeHand, 70–71
Fireworks, 221
image navigation links, 588
slice tool, 362
popular Dreamweaver extensions, 739–740
pop-up menu
button behavior, 309
defined, 291
described, 679, 689–690
Fireworks
described, 183, 291
sample, 310–313
Hide Pop-Up Menu/Show Pop-Up Menu behavior, 728
Popup Message behavior, 729
Portable Document Format. See PDF
Portable Network Graphics file. See PNG file
position
color gradient fills, altering, 210–211
extruded text, setting, 122
layer coordinates, 749
PostScript
fonts, 410
output, 164, 172
printer halftone settings, 54
power text mask
gold skin, adding, 256–257
gray skin, applying, 257–258
starting, 254–256
prebuilt CSS-P templates, 22
precedence, declarations, 596
preferences
Dreamweaver, modifying, 527–528
FreeHand workspace, customizing, 57–59
pre-installed Flash components, 463–464
Preload Images behavior, 729
preview
mode, drawing in FreeHand, 38
options, Document Window, 179
SWF movie clip, 12
Web frameset and pages, 373
Print dialog box, 164–166
printer resolution and bleed, changing, 46
printing
Bird Facts 101 movie, 158–159
framed pages, 667
FreeHand
basics, 163
business card sample project, 169–171
custom settings, 61
envelope sample project, 168–169
letterhead sample project, 167–168
PDF output, 164
PostScript output, 164
Print dialog box, 164–166
light and dark colors, keeping separate, 85
movie, enabling, 152
PostScript output, 164
process flow
commands, Fireworks, 323–324
Fireworks, 323–324
producing HTML page, 127
profile, extrusions, 123
programming code, viewing in text editor, 781
programs. See applications
progressive JPEG images, optimizing, 377
properties
alternate, 615–618
Change Property behavior, 723–724
CSS, 597, 608
DHTML layers, 748–749
Flash Document, changing, 397
form objects, 656–658
forms, 656
framed Web site, building, 669–671
object and text, changing from one location, 11
symbols, editing, 342
text, setting, 411–412
Web page
background image, 540–541
color, choosing, 542
described, 539–540
document title, 540
mission statement page, 542–543
Properties group, 42–46
Property inspector
CSS text in, 21
Dreamweaver, 524–525
Fireworks
described, 187–188
effects, choosing, 27–238
object effects, viewing, 213
Flash
components, 462
described, 394–395
text, formatting, 599–600
PSD files. See Photoshop (Adobe)
pseudo-classes, 594–595
pseudo-elements, 594–595
pseudo-selectors, 608
Publish Settings, Flash movies, 477–479
publishing
as HTML, 131–134
Web site
link checking, 764–765
meta tags, adding, 766–767
spell checking, 763–764
target browser, checking, 765–766
publishing movies
Bandwidth Profiler, 476
breakpoints, 474
debugging, 471–472
exporting files, 479
Flash, 19
optimizing, 469–471
Output Window, 474–475
Publish Settings, 477–479
remote debugging, 473–474
Trace Action, 475–476
punch
object, using, 238
paths, reshaping, 236
text effects, using as, 247–248
Push/Pull tool, 73, 90–91
putting files and folders from FTP site, 773–774


Index_Q

Team LiB

Index

Q

Quality setting
JPEG images, optimizing, 376
movie, setting, 714
queries
database, 799–800
sender data, finding, 498
question mark (?), 820
Quick Tag Editor, 550
QuickTime movie
Flash publish setting, 478
importing into Flash, 401
video format, described, 705
QuickTime Player plug-ins, 706, 707–709


Index_R

Team LiB

Index

R

RA (RealVideo) video format, 705
radial gradient, 209
radio button, forms, 652, 656
range kerning, 245
RA/RAM/RPM (Real Audio) file format, 703
raster image, 62
raster image processor-equipped film and paper processor. See RIP film and paper processor
raw sound, 454
RDS (Remote Development Services)
described, 770
Login for ColdFusion server, 797–799
Real Audio file format. See RA/RAM/RPM file format
RealPlayer video plug-in, 707
RealVideo video format. See RA video format
record-adding form, 826–829
records, deleting
application objects, 829
described, 829
display form, building, 831–832
navigation bar, inserting, 830–831
navigation status object, 831
recordset, adding, 830
server behavior, adding, 832
recordset
adding database records, 833
ColdFusion application, creating in Dreamweaver, 801–802
deleting database records, 830
inserting new, 822–823
rectangle gradient, 209
rectangle, rounded corner, 11
Rectangle tool
Fireworks, 219–220
Flash, 403–404
FreeHand, 69–70
Red Eye Removal tool, 16, 266
reference, animation keyframe, 428
reference content, Dreamweaver, 23
Reference panel, Dreamweaver, 526
Reflect transformation tool, FreeHand, 73
region, Dreamweaver template
defining, 625
editable optional, adding, 628–629
editable region, adding, 626
editable tag attributes, 626–627
names, handling inconsistent, 634–635
optional, adding, 627–628
relationship between elements, showing (Connector Lines tool), 12
relative values, framed Web sites, 670
relative/percentage-width tables, 556
relative-width tables, 578–579
remote area, multiple buttons using same, 307–309
remote connection, Flash summary frame, 490
remote debugging, Flash movies, 473–474
Remote Development Services. See RDS
remote information
Dreamweaver Web site, 530–531
local intranet site, defining, 792
remote intranet site
described, 794
local info, defining, 795
next steps, 797
remote info, defining, 795–796
testing server, defining, 796
uploading site pages, 796–797
remote rollover, 291, 305–307
remote root folder, 529
remote Web server, 772
removing
extra rows and columns from Fireworks tables, 565–567
object from colorful background, 263–264
objects from grid, 76
server behaviors from page, 812
strokes, 201
Swap Image behavior, 683
Repeat Region Server Behavior form, 825–826
repetitive tasks, reducing with Find and Replace feature, 317–318
Replace Color tool, 16, 266–267
requirements list, commands, 323–324
Reshape Area tool, 74, 91–92
resizing framed Web site, building, 673
restoring bitmap images, 262
retrieving forms and URL parameters, 820
reversing
animation frames, 428
Fireworks text, 250
order of duplicated frames, 343–344
RGB color (red, green, and blue)
color mixing method, 48
CSS style, 604
Fireworks mixing, 200
FreeHand
converting, 85
importing, 134
monitors and, 196
Rich, Mary (guest expert), 857
RIP (raster image processor-equipped) film and paper processor, 163
ripple, FreeHand text on a path sample project, 118
ripples gradient, 209
robots, meta keywords and descriptions, 767
Rockwell, Ron (guest expert), 857
Rockwell, Yvonne (sound and applet creator), 860
rollover button
component, changing, 462–463
disjoint, 291
navigation
described, 679, 681
Fireworks, inserting, 681–682
Swap Image behavior, 682–683
remote, adding to existing, 684–685
remote options, 685–686
Swap Image behavior, 683
rollover image
defined, 300
disjoint, making, 305–307
multiple buttons using same remote area, 307–309
Swap Image behavior, adding, 303–305
Up and Over button states, designing, 300–303
root folder
database connection, 791
FTP, connecting, 772
navigating Web site, Dreamweaver, 535
Web site, defining, 529
root-relative paths, 583
Rotate tool, 72–73
rotating
animation, setting, 341
blended object
controlling, 122–123
described, 80
text shadow effects, 123–124
extruded text, 122–123, 124
multiple objects on page, 111
Roughen tool, 74
rounded rectangle drawing tools, 404
rounded-corner tables, 577
rows
forms, setting, 658–659
framed Web site, building, 667, 668
HTML table
modifying, 560
removing extra, 565–567
selecting, 559
repeating for as many records as are in table, 825
Rubber Stamp, 260, 265–266
ruler, text, 114
rules, horizontal in Web page block, 551–552
runaround, text, 120–121
runtime performance, Flash, 19


Index_S

Team LiB

Index

S

Sahlin, Doug (guest expert), 857
sample rate, digital audio, 449
satin gradient, 209
Saturation bitmap images, 278
Save All frameset option, 672–673
saved palettes, loading, 198
saving
bitmap images, 262, 275–276
color gradient fills, 212
color strokes as styles, 204
frameset, building Web site, 671
in original format, Fireworks, 15
source framed Web site, building, 672
styles, 213
scalable application, 484
scale
images, printing, 166
movie, adjusting, 712, 714
Scale tool, FreeHand, 72
scaling
animation, setting, 341
Fireworks
from center, 16
horizontal, 245
vector objects, 259
multiple elements on page, 111
vector drawing, 217
scans
artifacts, removing from black-and-white scan, 215–216
importing images from, 260
scene, setting in Flash for Fireworks, 327
scratches, removing small from photo. See Blur filter
scripting movie control buttons, 710–711
scripts
embedding, 731–733
exported commands, Fireworks, 326
linking to external JavaScript file, 733
pausing to examine each line, 474
scroll bars, framed Web sites, 673
search engines
attracting with meta keywords and descriptions, 767
framed Web sites, following, 667
searching XML document object, 511–513, 846–848
security, Flash, 19
Select menu, Fireworks, 183
selecting
commands, bitmap images, 263–264
Flash layers/folders, Flash, 399
FreeHand objects, 64
symbols, adding, 341
table structures, 558–559
Web page text content, 549
selection tools
Fireworks bitmap images, 261
FreeHand
Eyedropper, 65
Lasso, 65
Output Area, 65
Page, 65
Pointer, 64
Subselection, 64
selective compression, JPEG images, 377–379
selectors, CSS (Cascading Style Sheets)
class or ID selectors, 594
contextual selectors, 595
defined, 594
grouping, 605
pseudo-classes and pseudo-elements, 594–595
semicolons (;), 471
send as e-mail, Fireworks, 16
sensitivity category, color strokes, 204
server
behavior
adding database records, 832
adding to page, 811
ColdFusion application, creating in Dreamweaver, 809–817
Insert Record, 823–825
removing from page, 812
Update Record, 835–837
data, sending for storage, 819
form variables, 821–822
language, converting Dreamweaver templates, 646–647
local intranet site, defining, 792–794
remote Flash movie debugging, 473–474
root-relative pages, previewing via, 583
Studio installation configuration, 868
testing, defining for remote intranet site, 796
Web site access
described, 768–769
design notes, uploading, 771
domains and solutions, 770
options, 770–771
renting, 763
server-side forms processing
described, 650
FormMail and other CGI scripts, 651
objects, labeling, 654–655
Web applications, 651
service bureau, 172
session form variables, 821
Set Nav Bar behaviors, 309, 687–688, 729
Set Permissions extension, 739
Set Text (of Frame, of Layer, of Text Field, of Status Bar) behavior, 730
Set Text of Layer to create submenus, 753–754
shadow text effects, 121–124
Shadow transformation tool, 80
shape
editing, 233–235
FreeHand, 11
objects, transforming into different, 40, 41
strokes, color, 202–203
tweening, timeline effects, 439–440
shareware programs, 855
sharing
Dreamweaver snippets (stored code block), 735
Library symbols among movies, 418
Sharpen filter, 277
Sharpen tool, 264
sharpening edges, JPEG images, 377
sheet origin, CSS styles, 601–602
Shockwave
Control Shockwave or Flash behavior, 727
Fireworks PNG Importer, 12
FreeHand files, embedding, 11
ShockWave Flash file. See SWF
Show Events For behavior, 731
Show-Hide Layers behavior, 730
Simple Object Access Protocol. See SOAP
simple rollovers, 291, 309
single line, Flash, 412
site files, synchronizing FTP, 774–775
site setup wizard, 532–533
siteless file editing, Dreamweaver, 22
Sitespring reference guide, 526
skew Fireworks text, 245
Skew transformation tool, 73
slices
button, adding, 299, 302
button behavior, attaching, 303–304, 307
described, 190
exporting, 382
swap area, encompassing, 306
slicing designs
background image, 365
described, 361
exporting various images on one, 365–366
HTML text, 367
pros and cons of, 361–362
tools
defining slices, 364–366
guides, 363–364
listed, 362
URLs and Alt tags, adding, 366–367
Web layer, 361
sliding menu bar, animating, 754–755
small font size rendering, 19
smart cursor
curve points, 89
FreeHand, 65–66
smart polygon, 225–226
smart quotes, 59
smart rounded corner, 225–226
Smith, Trevor (photographer), 859
smoothing
angles in line, 404
JPEG images, optimizing, 376
Smudge tool
bitmap images, 265
FreeHand, 80
text shadow effects, 122
Snap Distance option, setting, 58
Snap Layers extension, 740, 756–760
Snap to Object icon, 83–84
snapping menus, DHTML
building, 757–760
described, 756–757
Snapshot lens fill option, 101
snippets (stored code block)
creating, 734–735
described, 733
editing or deleting, 735
inserting, 734
sharing, 735
SOAP (Simple Object Access Protocol), 813
software. See applications
solid color fills, 206
solid fill, applying to objects, 96
sorting database records from query, 800
sound
adding to Timeline, 450–451
button, adding to, 452–453
compression setting, 479
downloading plug-ins, 703–704
editing, 451–452
elements, described, 701–702
sound
embedding, 703
exporting and compressing files, 453–454
file formats, 702
file types, 449
finding files, 705
Flash movies, optimizing, 471
importing files, 450
linking, 703
movie library, 418
objects, 454–456
parameters for embedded, 704
Play Sound behavior, 729
stopping, 453
sound and applet creators
Bryan Harianto, 860
Jason Leroy, 860
Yvonne Rockwell, 860
source, framed Web site, 672
SourceSafe Database. See VSS
spacing
between characters, 245
multiple elements on page, 111
table cells, 576–577
text
Fireworks, 244–245
Flash, 413
spans, HTML table, 562–563
specificity, CSS (Cascading Style Sheets), 595–596
speckles, adding, 277
speech sound compression, 454
speed
animation
deleting frames, 427
frames per second, setting, 426
sliced images and, 361–362
Speedball pen, writing like. See Calligraphic pen drawing tool
spell checking
Flash, 18
Web site publishing, 763–764
word processing, FreeHand, 115
spiders, meta keywords and descriptions, 767
Spiral tool
Fireworks, 226
FreeHand
animation, 160
described, 67–68
text on a path sample project, 118
stacking order, layer. See Z-index layer property
stacking tables, 571
Stage (Flash work area), 393
star cluster tool. See Scale tool
Star, Fireworks, 227
Star Points, 70
starburst gradient, 209
Starorypinski, Olaf (photographer), 859
Start page
Dreamweaver, 20, 21, 520–521
Fireworks, 14, 192
Flash, 18, 19
Start sound, 450
state, button, 292
statements, syntax errors, 471
static site, 529
status bar
Dreamweaver, 524
Fireworks, 188–189
FreeHand, 37–38
text, adding, 309
status object, deleting database records, 831
stereo sound, 449
stopping sound, 450, 453
storyboards, 137
streaming
sound, 450, 471
video format, 705
Web content, 702
Strings panel, Flash, 20
stroke
color
described, 200–201
options, 202
saving as styles, 204
sensitivity category, 204
shape category, 202–203
drawing tools, 403–404
Fireworks
default, 219–220
listed, 15
options, accessing, 188
preferences, setting, 192
smudging, 265
text, 245
FreeHand
attributes, 11
Color tools, 83
style, creating, 108
Structured Query Language. See database, query
structures
Flash and ColdFusion, 482
tables
height and width, 560
reasons to use, 561
rows and columns, 560–562
selecting, 558–559
style
class, Library Item using, 622
color strokes, saving as, 204
defined, 105
Fireworks
importing and exporting, 213
modifying, 212–213
panel, using, 212
saving, 213
form, 661
FreeHand
creating, 108
editing, 109–110
Style Sheet Loader extension, 740
Styles panel
CSS
described, 597
editing, 598
FreeHand, 46–47
subfolder, placing exported images in, 382
subject, preparing main, 280–281
submenus, DHTML layers, 753–754
submitting name and e-mail addresses, 494–495
subscript, 245
Subselection selection tool, 64
subtracting from bitmap images, 262
summary frame
e-card application, 490–494
Flash
buttons, coding, 493–494
described, 490
function, creating, 491–493
gateway connection, 490–491
NetServices, accessing, 491
remote connection, 490
second and third keyframes, coding, 494
summary function, e-card application, 485, 486
Summers, Murray (guest expert), 859
superscript, 245
surface extrusions, 123
Swap Image behavior
adding to rollover image, 303–305
described, 682–683
editing, 683
removing, 683
rollover buttons, 682–683
Swap Image Restore behavior, 309, 729
Swatches panel
customizing
described, 197–198
exporting current palette, 198
loading saved palettes, 198
FreeHand panels, 47–48
SWC (Flash Component File)
described, 5, 698
exporting, 463
import, protecting from, 152
importing and exporting, 11
SWF (ShockWave Flash) file, 128
switching among documents
Document Window, 179
Flash, 18
new features, 15
SWM (Flash Movie File), 698
symbol
Alpha effects, 471
animation
benefits of using, 470
creating, 340
symbol
defined, 339–340
existing object, converting to, 341
FreeHand, 147–148
motion paths, editing, 342
properties, editing, 342
selections, adding, 341
button
described, 420–421
editing, 298–299
Fireworks, 296–297, 298
importing, 294
defined, 105
described, 417, 419
editing
button, 298–299
described, 422
FreeHand, 107
empty Movie Clips, 420
Fireworks, 251–252
FreeHand
editing, 107
managing, 105–107
graphic, 422
Library
common, 418
described, 417
importing into, 418
sharing among movies, 418
using, 418
movement between (motion tweening)
animating movies, 430–431
timeline effects, 433–435
Movie Clip, 419–420
objects, swapping, 13
obtaining for Bird Facts 101 project, 154
symmetrical objects, drawing, 73
synchronizing Web site files, 774–775
syntax, checking converting Dreamweaver templates, 642–643
system requirements
CD, back-of-the-book, 853
Macromedia Studio, 861–862


Index_T

Team LiB

Index

T

table
borders, creating, 576
cells
background image, 571–572
coloring, 573–574
padding and cell spacing, 576–577
described, 555–556
Dreamweaver dimensions and menus, setting, 523
Fireworks
described, 562
HTML, inserting, 574–576
modifying, 562–565
opening page, 562
removing extra rows and columns, 565–567
round-trip editing to Dreamweaver, 579
forms, formatting, 658–659
FreeHand project, sample, 116–117
Insert Bar objects, 743
inserting, 557–558
modular layout
coloring cells, 573–574
described, 567–568
hybrid table, building, 568–571
minimum cell height, 572
stacking tables, 571
table cell background image, 571–572
rounded-corner, creating, 577
structures
height and width, 560
reasons to use, 561
rows and columns, 560–562
selecting, 558–559
types, listed, 556–557
Table tab, 382–383
Table-Editing Visual feedback, 22
tag
attributes
ColdFusion query, 800
editable, Dreamweaver templates, 625, 626–627
Dreamweaver, 524
HTML
forms, viewing, 657
redefining, CSS styles, 602–605
tag inspector
CSS styles, editing, 599
database query, 803–804
integrated Dreamweaver, 22
Tag Library Editor, 22
target browser
setting, 537–538
Web site publishing, 765–766
targets, linking framed documents, 674–675
technical illustration, FreeHand, 34
template. See also Dreamweaver templates
ColdFusion
components, 505–506, 841–842
debugging, 809
described, 780
error messages, 809
previewing, 789
testing, 809
Flash, 18
inserted pop-up menu, using, 693–694
navigation behaviors, 688–689
prebuilt CSS-P, Dreamweaver, 22
testing
Bird Facts 101 movie, 159
buttons, 421
commands, Fireworks, 336–337
Habitat Alert Web site sample design, 29
local intranet site server, defining, 792–794
newsletter subscriber page server and data source, 789–791
properties, changing (Object panel), 11
templates, 809
text
adding animations, 443–446
background color, 541
decoration, CSS link styles, 608
Fireworks effects
adding text to document, 244
converting text to path, 247
described, 243–244
enhancements, 245–246
image, filling with, 251
path, setting type on, 248–250
paths, altering, 252–258
placeholder, using as, 246
punch, using as, 247–248
spacing, controlling, 244–245
symbols, 251–252
Fireworks-based pop-up menu, 692
Flash media elements, 699–700
formatting from Property inspector, 599–600
FreeHand
composite paths, 98–99
options, setting, 59
placing text inside graphic, 119–120
runarounds, 120–121
shadow effects, 121–124
toolbars, 40
HTML form
adding, 656
field, 652
interactive Web buttons, 292
JPEG edge detail, restoring, 377
navigation links
Browse for File method, 584
described, 584
Link History, 585–586
Point to File method, 585
placing inside graphic, 119–120
properties, word processing, FreeHand, 115
Set Text (of Frame, of Layer, of Text Field, of Status Bar) behavior, 730
sliced images, previewing with, 366–367
spacing, controlling
baseline shift, 245
horizontal scale, 245
kerning, 245
leading, 245
range kerning, 245
status bar, adding, 309
style, creating, 108
Unicode support, 16
Web page content
copy and paste functions, 549
selections, 549
Word documents, 549
text block
animating, 160
border, adding, 412
dimensions and coordinates, determining, 43
Fireworks settings, changing, 188
floating images in, 552–553
image, placing inside, 124–126
word processing, 114
Text inspector, 44
Text menu, Fireworks, 183
Text on a Path project, sample, 118–119
text ruler, 114
text style, 105
Text tool
breaking text apart, 413
described, 410
FreeHand, 66
text properties, setting, 411–412
word processing, FreeHand, 113–114
texture
adding to bitmap images, 286–287
color fills, 209
Fireworks options, accessing, 188
thin paths, reducing drawings to appearance of. See Keyline mode
third-party software. See also Xtras
components, folder location, 460
Flash elements, 700
3D Rotation transformation tool, 78–79
threshold, adjusting pixels, 277
tile images, 166
Timeline
adding sound to, 450–451
animating movies
Assistants, 431
Blur, Drop Shadow, Expand, and Explode, 431
effects, 423
opacity settings, adding to motion tween, 436–437
path, tweening along, 437–438
shape tweening, 439–440
symbols, movement between, 433–435
transformations and transitions, 432–433
described, 17
tints, FreeHand color, 50
title
adding to bitmap image, 287–290
framed Web site, building, 674
tonal corrections (Levels), bitmap images, 278
toolbar
Envelopes, 139–140
Flash, 395
FreeHand workspace, customizing, 61
workspace, FreeHand, 36–41
Toolbox, FreeHand, 10
tools
changing any tool to Pointer, 64
FreeHand
Bezigon, 88
Calligraphic pen, 88–89
Eraser, 92
Freeform, 90–92
Knife, 92–93
Line, 88
Object panel, 89–90
paths, adjusting, 89–93
Pen, 87–88, 89
Variable Stroke pen, 88
map-drawing, 586–588
slicing designs
defining slices, 364–366
guides, 363–364
listed, 362
Tools panel
Fireworks, 186–187
FreeHand, 63
ToolTips view options, setting, 59
Toon Boom Studio files, 401
trace Action, Flash movies, 475–476
Trace tool, 80–82
trackball, 68
tracking. See range kerning
trademark symbol, adding, 245, 252
traditional animation method. See frame-by-frame animation
transformation
timeline effects, 432–433
XML document object, 513–516, 848–851
transformation tools
Bend, 74–75
Eraser, 75
Extrude, 80
Fisheye Lens, 79
Freeform, 73–74
FreeHand panels, 53–54
Knife, 75
managing, 71–72
Perspective, 75–78
Reflect, 73
Rotate, 72–73
Roughen, 74
Scale, 72
Shadow, 80
Skew, 73
Smudge, 80
3D Rotation, 78–79
Trace, 80–82
transition timeline effect, 432–433
transparency
color gradient fills, adding, 211
GIF images, optimizing, 372–374
gradient fills, 210
gradient overlay Web animation method, 353
lens fill, 100
transparent lens fill, 137
trial versions, software, 855
triangle, 220
troubleshooting back-of-the-book CD, 856
TrueType fonts, 410
tutorials, Fireworks and Flash, 854
tweening
along path, timeline effect, 437–438
animation
Live Effects, 347
multiple, applying, 346–347
numeric transform, 348
file size, reducing, 425
shape, 439–440
type, 90. See also fonts
type overflow indicator, 114


Index_U

Team LiB

Index

U

UIs (user interfaces), 23
underlined text. See hyperlinks
Undo
Dreamweaver maximum number, 539
Fireworks options, 192
FreeHand options, 58
ungrouped objects (envelopes), warping, 414
Unicode support
Dreamweaver, 24
Fireworks, 16
Flash, 20
Uniform Resource Locator. See URL
union, reshaping paths, 235–236
unsaved documents, 179
Up and Over button states, designing
defined, 292
navigation bar elements, 686
rollover image, 300–303
Update Record server behavior, 835–836
updating
Library items, 622–623
logos, advantage of using symbols, 105
pages, modifying and, 633–634
uploading remote intranet site pages, 796–797
URL (Uniform Resource Locator)
adding to sliced designs, 366–367
Background-Image, 604
CSS styles, 604
Flash movie
connecting to Net Services, 490–491
retrieving, 150
form data, transmitting, 656
Go to URL behavior, 727
link
adding to object, 54
Fireworks pop-up menus, changing, 693
navigation links
absolute, 581
document-relative paths, 582
external assets, 582
root-relative paths, 583
URL (Uniform Resource Locator)
parameters, forms and
creating, 820
described, 819
mechanics, 820
retrieving, 820
user
data files, finding, 742
database table, adding
described, 826–827
Insert Record server behavior, 827–829
new record form, 827
Dreamweaver configuration folders for specific, 736
name and e-mail addresses, entering, 494–495
record-adding form, 826–829
simulate time to view movie with different modem or cable speeds, 476
sound, allowing to opt out, 703
user event, playing sound for, 729
user interfaces. See UIs
using @import with multiple style sheets, 615


Index_V

Team LiB

Index

V

V Scroller extension, 740
Validate Form behavior, 730
validating tags. See HomeSite+
vanishing point
adding more, 76
extruded text, setting, 122, 124
Variable Stroke pen, 68, 88
variables
Flash and ColdFusion, 482
Flash movie, listing, 475
vector images. See also FreeHand
adding to bitmap image, 284–285
bitmap, converting to, 415
exporting as, 388
extruding, 12
FreeHand art, 62
optimizing, 470
strokes, adding, 200–204
Web animation, preparing, 350–351
Vector Live Effects, 11
vector mask, 269–273
vector object, filling with another image, 251
vector path, 217, 228–230
vector shape tools, Fireworks
accessing, 218–219
drawing, 217–218
Ellipse tool, 221
Polygon tool, 221
Rectangle tool, 219–220
video
adding to pages, 707
file, importing into movie library, 418
Flash
described, 711–715
editing links, 715–716
embedded behaviors, 466
formats and plug-in options, 705–707
Internet Explorer and QuickTime Player plug-ins, 707–709
Java applet media elements, 716–718
JavaScript to control QuickTime, 710
scripting movie control buttons, 710–711
width and height values, 711
Video Import Wizard, 19
view full screen without panels, 10
View menu, Fireworks, 183
view page, ColdFusion, 499–501
View tools, FreeHand
Hand/Grabber, 82
Zoom, 82
visibility, layer, 748
visual content design
bitmap
converting to vector, 415
images, editing, 414
drawing tools
bitmap fills, 408
Brush tool, 405
Eraser tool, 409–410
Fill Transform tool, 409
fills and strokes, 403–404
gradient fills, 406–408
Ink Bottle tool, 406
Paint Bucket tool to fill objects, 406
Pen tool, 405–406
Pencil tool, 404
rounded rectangles, 404
objects, aligning, 413
Text Tool
breaking text apart, 413
described, 410
text properties, setting, 411–412
warping ungrouped objects (envelopes), 414
VSS (SourceSafe Database), 770


Index_W

Team LiB

Index

W

warping ungrouped objects (envelopes), 414
WAV (Waveform Extension) audio format, 702
waves gradient, 209
waves, using envelope to make, 141–142
Waving Reeds animation project, 146–147
WDDX (Web Distributed Data Exchange), 844
weather forecast sample service, 813–815
Web
applications, server-side forms processing, 651
color issues, Fireworks, 196
color mixing method, best, 48
dithering, color fills, 206–207
graphics, FreeHand, 35
layer, slicing designs, 361
safe colors
Color Mixer, 200
Find and Replace, 371
finding unsafe, 199–200
snapping to, 197
Web design and development program. See Dreamweaver
Web Distributed Data Exchange. See WDDX
Web movie software. See Flash
Web page
block alignment
described, 552
floating images in text block, 552–553
block formatting
horizontal rules, 551–552
mission statement page, 550–551
Quick Tag Editor, 550
images, inserting
Assets panel, 543–544
background, editing, 547–548
described, 543
editing with Fireworks, 546–547
mission statement page, 544–545
properties, setting
background image, 540–541
color, choosing, 542
described, 539–540
document title, 540
mission statement page, 542–543
text content
copy and paste functions, 549
selections, 549
Word documents, 549
Web server
connecting to, 772–773
permissions, information about, 785
Web Services Description Language. See WSDL
Web services integration example
complex, 814–815
consuming, 817
creating, 812–813
description, 813
Dreamweaver to consume, 816–817
Web site
ColdFusion role
administrator, 783
client-server relationship, 780
database interaction, 783
described, 779
dynamic page content, 782
markup language, 781–782
software versions, 780–781
Dreamweaver
accessing files other than defined sites, 537
browsers, setting target, 537–538
contextual menu, 536
creating new files, 535–536
defining, 529–531
files panel, 533–537
index file, 537
root folder, navigating, 535
site setup wizard, 532–533
Web site
framed, building
advantages of using, 666–667
borders, 669–670
content, 677
dimensions, 670–671
disadvantages of using, 667
documents, 673–674
Go to URL complex frameset, 676–677
linking to framed documents, 674–675
mechanics, 665–666
naming frames, 671–672
navigating documents, 669
New Document frameset, 678
page background colors and images, 674
page margins, 673
properties, setting, 669–671
resizing options, 673
rows or columns, 667
Save All frameset option, 672–673
saving frameset, 671
scrolling, 673
simple frameset, 667–671
source, saving or setting, 672
title, setting, 674
set up, 639–641
Web site publishing
FTP
connecting to Web server, 772–773
described, 771–772
files and folders, putting and getting, 773–774
site files, synchronizing, 774–775
link checking, 764–765
meta tags, adding, 766–767
server access
described, 768–769
design notes, uploading, 771
domains and solutions, 770
optional information, 771
options, 770–771
spell checking, 763–764
target browser, checking, 765–766
WebAssist PayPal eCommerce Toolkit, 856
WebDAV (Web-based Distributed Authoring and Versioning), 770
weight, style rules, 595–596
white space
HTML table cells, 576–577
movie, setting, 714
width
form objects, 658
HTML table
specifying, 560–561
turning off, 555
layers, 749
movie, setting, 714
relative-width tables, 578–579
video values, 711
Wild FX Pro (Wildform inc), 855
Wildform inc Wild FX Pro, 855
Window menu, Fireworks, 185
Windows Media Player, 706
Windows (Microsoft)
audio format, 702
browsers, maximum number off, 538
color gamma settings, 195
data file location, 742
Flash toolbars, 393
FTP client, 772
special character key combinations, 252
Studio MX requirements, 862
System Color Picker, 4
user-specific configuration folders, 736
using back-of-the-book CD, 853, 854
video plug-ins, 706
Windows Projector Flash publish setting, 477
wiping animation images, 433
Woods, Calvin (photographer), 859
Word (Microsoft)
copy and paste into Dreamweaver, 23
documents as Web page text content, 549
word processing, FreeHand
finding and replacing text, 115–116
spell checking, 115
Text Block properties, 114
Text properties, 115
Text tool, 113–114
workflow, automating Fireworks
Apply button, setting up, 327–328
batch processes, 320–321
Cancel button, creating, 333
commands
assembling, 326
creating to add border to bitmap images, 318–319
defining purpose, 322–323
enhancements, 337
exporting and testing, 335–336
JavaScript, 319
testing, 336–337
writing, 321–322
error checking, adding, 334–335
functionality, adding to button, 328–332
History panel, 324–326
interface, creating in Flash, 327
process flow, 323–324
repetitive tasks, reducing with Find and Replace feature, 317–318
resources, 337
scene, setting in Flash, 327
scripts, exported, 326
workflow, Habitat Alert Web site sample design, 29
workspace
Dreamweaver layout, choosing, 519–520
FreeHand
document window and pasteboard, 36
illustrated, 35
panels, 42–55
preferences, 57–59
shortcuts, 59–61
toolbars, 36–41, 61
WSDL (Web Services Description Language), 813


Index_X

Team LiB

Index

X

x and y coordinates
object, showing, 45
text block, setting, 114
transformations, 53
Xenofex 2 (Alien Skin Software), 856
x-height relative length measurement, 606
XHTML tags, editing. See HomeSite+
XML (Extensible Markup Language)
ColdFusion support, 25
document object
creating, 508–509, 844–845
described, 509–510
mechanics, 845–846
modifying, 510–511, 846
searching, 511–513, 846–848
transforming, 513–516, 848–851
Dreamweaver namespace support, 24
editing, 766
selector tag, 594
XSLT (Extensible Stylesheet Language Transformation), 848–849
Xtra Operations FreeHand toolbar, 40, 41
Xtra Tools FreeHand toolbar, 40, 41
Xtras
menu, 84–86
path adjustment
Expand Stroke, 93–94
Inset Path, 94–95
points, adding, 93


Index_Y

Team LiB

Index

Y

y coordinates
object, showing, 45
text block, setting, 114
transformations, 53


Index_Z

Team LiB

Index

Z

Z-index layer property, 748, 749
Zoom tool. FreeHand, 82


List of Figures

Chapter 1: What Is Macromedia Studio MX 2004?

Figure 1.1: This image was totally created in FreeHand, including both graphics and animation.
Figure 1.2: A Fireworks-created image composition.
Figure 1.3: The e-card interface.
Figure 1.4: The book's sample site built in Dreamweaver.

Chapter 2: What's New in Macromedia Studio MX 2004

Figure 2.1: The Macromedia FreeHand MX workspace.
Figure 2.2: The new Movie Settings dialog box.
Figure 2.3: The new Fireworks MX 2004 interface.
Figure 2.4: The Auto Shapes accessed from the Tools panel.
Figure 2.5: The Flash MX 2004 interface.
Figure 2.6: The Start page.
Figure 2.7: Dreamweaver interface and Start page.

Chapter 3: Designing the Habitat Alert Web Site

Figure 3.1: The site mockup (design comp) as seen in Fireworks.

Chapter 4: Introducing Macromedia FreeHand MX

Figure 4.1: The FreeHand MX Workspace in Windows showing the Welcome screen.
Figure 4.2: The FreeHand MX Toolbar menu showing the Main toolbar and the Status toolbar checked.
Figure 4.3: The Tools panel and the Main toolbar floating outside the FreeHand MX window.
Figure 4.4: The Status toolbar docked at the bottom of the window.
Figure 4.5: Positioning the Status toolbar at the bottom of the window. Note the outlined rectangle showing where the toolbar will be placed.
Figure 4.6: The Main toolbar.
Figure 4.7: The Controller toolbar supports the creation and testing of Flash movies.
Figure 4.8: The Info toolbar shows information about the selection and about actions taken on the selection.
Figure 4.9: The Text toolbar.
Figure 4.10: In the Xtra Operations toolbar, similar features are grouped together.
Figure 4.11: The Xtra Tools toolbar extends FreeHand's capabilities.
Figure 4.12: The Envelope toolbar.
Figure 4.13: The Panel group header.
Figure 4.14: The Panel group Options pop-up menu with the Group option selected.
Figure 4.15: The Object panel with the Stroke item selected.
Figure 4.16: The Object panel with a rectangle object selected.
Figure 4.17: The Object panel with a text block selected.
Figure 4.18: The Object panel with text selected.
Figure 4.19: The Object panel with a bitmap selected.
Figure 4.20: The Document panel.
Figure 4.21: The Document panel options.
Figure 4.22: The Styles panel can save you hours of needless work. Notice the Options pop-up menu.
Figure 4.23: The Swatches panel makes selecting stroke and fill colors easy. Part of the Options pop-up menu is on the right.
Figure 4.24: Using the Library can save you both time and file size.
Figure 4.25: The Color Mixer panel and the color mode icons for both operating systems.
Figure 4.26: The Tints panel showing the pop-up Swatches menu.
Figure 4.27: The Layers panel showing the Options pop-up menu.
Figure 4.28: The Align panel and the pop-up menu showing the vertical alignment and distribution choices.
Figure 4.29: The five versions of the Transform panel.
Figure 4.30: The Transformation bounding box.
Figure 4.31: The Navigation panel.
Figure 4.32: The Halftones panel.
Figure 4.33: The Answers panel.

Chapter 5: FreeHand MX Art in a Nutshell

Figure 5.1: The FreeHand MX Preferences with the General tab selected.
Figure 5.2: The Customize dialog box with the Shortcuts tab selected.
Figure 5.3: Assigning a new shortcut to Font Style BoldItalic in the Customize Shortcuts dialog box.
Figure 5.4: The Customize Toolbars dialog box showing the Hide Panels icon selected.
Figure 5.5: The Hide All Panels button about to be inserted into the Main toolbar.
Figure 5.6: Notice the differences between vector and bitmapped artwork at various enlargements.
Figure 5.7: The Tools panel in vertical orientation.
Figure 5.8: The Pen tool showing the expander arrows.
Figure 5.9: The Pointer Tool options dialog box.
Figure 5.10: The three kinds of arcs.
Figure 5.11: Spiral dialog boxes differ according to the type of spiral that you select.
Figure 5.12: The development of a spiral.
Figure 5.13: Select the rectangle in the Object panel to see the corner options.
Figure 5.14: Uncheck the Uniform button to work with individual corners.
Figure 5.15: Rounded corners are really a snap in FreeHand MX.
Figure 5.16: Change any of the polygon parameters in the Object panel to create interesting shapes.
Figure 5.17: The transformation handles allow you to scale, skew, and rotate everything within the selection.
Figure 5.18: A circle that has been roughened.
Figure 5.19: A circle distorted by both bending and bloating.
Figure 5.20: The Bend tool can be effective for making a splash.
Figure 5.21: This illustration uses two sets of perspective grids; only one is visible.
Figure 5.22: The 3D Rotation tool and a rounded rectangle.
Figure 5.23: The Fisheye Lens tool distorts according to the grid. Use the sliders to make the distortion more concave or convex.
Figure 5.24: The object on the left has a linear smudge. The object on the right was smudged around its entire border.
Figure 5.25: The faucet on the left is a 16-color trace to grayscale; the center drawing is the same trace without fills; the right drawing was done with the Pen tool.
Figure 5.26: Trace tool options include the Uniform option. The original image is at the top, Uniform is selected in the middle, and at the bottom Uniform has been deselected.
Figure 5.27: Fly-out Stroke and Fill color menu.
Figure 5.28: A star object snapped to a point on a rectangle's rounded corner.

Chapter 6: Drawing with FreeHand MX

Figure 6.1: The Pen tool with the smart cursor.
Figure 6.2: The Pen tool positioned to make adjustments to the path.
Figure 6.3: (a)The Object panel with a closed path selected. (b) The Object panel with a point selected.
Figure 6.4: The Freeform tool settings are different for Push/Pull and Reshape Area.
Figure 6.5: The Freeform tool has two different ways of working: Push/Pull and Reshape Area.
Figure 6.6: The Eraser tool is versatile. From left to right, it created a single closed path, a pair of closed paths, and a composite path.
Figure 6.7: The Expand Stroke dialog box converts a path into a compound path.
Figure 6.8: The Inset Path dialog box.
Figure 6.9: Inset Paths, left to right: Uniform, Farther, and Nearer.
Figure 6.10: Inset Paths was applied to each of the gray objects (the objects were turned gray after Inset Paths was applied).
Figure 6.11: The effect of Join with Even/Odd Fill turned on (middle) and off (right).
Figure 6.12: Six examples of compound path construction.
Figure 6.13: The effects of gradient fills in text that has been converted to compound paths.
Figure 6.14: Normal compound paths.
Figure 6.15: The lens fill option in the Object panel.
Figure 6.16: The text above the heron's head on the right was 1.5-point before converting to paths. Notice how well it enlarges (700 percent) with the Magnify lens fill.
Figure 6.17: The effects of lens fill options.
Figure 6.18: The all-important Layers panel.

Chapter 7: Using FreeHand MX Symbols and Styles

Figure 7.1: The symbol libraries that come with FreeHand MX.
Figure 7.2: This library is filled with nature symbols.
Figure 7.3: The Styles panel can save time and prevent errors.
Figure 7.4: The Edit Style Behavior dialog box for text styles.
Figure 7.5: A style in the Object panel Properties list window.
Figure 7.6: Choose groups to spray, or place graphics in the Hose window.
Figure 7.7: The Options dialog box enables you to change many attributes of sprayed objects.
Figure 7.8: The effects of a simple Graphic Hose swamp as used in the Habitat Alert logo.

Chapter 8: Understanding FreeHand MX Typography

Figure 8.1: A selected text block showing the text ruler and the type overflow indicator.
Figure 8.2: The Object panel showing the text block properties. Here the width is fixed and the height is auto-expanding.
Figure 8.3: Text properties in the Object panel.
Figure 8.4: This Find Text dialog box looks for paragraph marks in the selected text.
Figure 8.5: The text imported from BirdTable.rtf into FreeHand MX.
Figure 8.6: Raw tablature text and its initial alignment.
Figure 8.7: Adding space to the table.
Figure 8.8: A FreeHand table.
Figure 8.9: A spiral path on the left, with text attached to the path on the right.
Figure 8.10: A Habitat Alert logo concept using text on a path.
Figure 8.11: Text flowing inside a path can be effective in a layout.
Figure 8.12: Text runarounds in action.
Figure 8.13: The settings for a soft edge shadow.
Figure 8.14: A shadow created with the Smudge tool.
Figure 8.15: Live text at the beginning of an extrusion.
Figure 8.16: The three parts of the Object panel that control extrusions.
Figure 8.17: Live text rotated 5 degrees on each axis.
Figure 8.18: Changing the extrusion profile.
Figure 8.19: The 3D Rotation circle.
Figure 8.20: An image inside a text block.
Figure 8.21: Text with a Darken lens fill applied to make a shadow.

Chapter 9: FreeHand MX and Web Graphics

Figure 9.1: The Navigation panel links objects on your page to the entire Web.
Figure 9.2: The Find & Replace dialog box setting that changes the color from black to blue.
Figure 9.3: The HTML Output dialog box has basic settings for your Web page.
Figure 9.4: Use the HTML Setup window to choose page attributes manually.
Figure 9.5: The Dreamweaver MX 2004 Property inspector.
Figure 9.6: The Fireworks MX 2004 Optimize dialog box.
Figure 9.7: The FreeHand MX cursor becomes a half square. It is positioned to import the GIF file containing the Habitat Alert logo.

Chapter 10: Basic FreeHand MX Animation

Figure 10.1: The Envelope toolbar can float free or be attached to the Main toolbar.
Figure 10.2: The 3D Rotation dialog box.
Figure 10.3: The 3D Rotation cursor on top of the "E" in "ALERT".
Figure 10.4: The finished distortion.
Figure 10.5: The Map view of the envelope.
Figure 10.6: The Layers panel with the visibility of the Guides and Foreground layers turned off.
Figure 10.7: The great blue heron in flight.
Figure 10.8: The three versions that make up the animation, separated and viewed in Keyline mode.
Figure 10.9: The bottom two wings selected.
Figure 10.10: Three separate sets of blends make up the animation.
Figure 10.11: Four groups of reeds prepared to animate.

Chapter 11: FreeHand MX Animation Techniques

Figure 11.1: The Navigation panel with the Actions pop-up menu.
Figure 11.2: The Movie Settings dialog box sets the export options.
Figure 11.3: The Layers and Pages options illustrated.
Figure 11.4: The page 1 layout for the Bird Facts 101 movie.
Figure 11.5: The Bird Facts 101 Library contains all the elements for the movie.
Figure 11.6: The Navigation Panel settings for the large rectangle in the background graphic.
Figure 11.7: The Movie Settings panel for this movie.
Figure 11.8: Page 2 is set up so that it can be printed.
Figure 11.9: The Hungry Heron Diner movie.

Chapter 12: Outputting FreeHand MX Documents

Figure 12.1: he FreeHand Print dialog box for a typical PostScript printer.
Figure 12.2: The Display Color Setup window.
Figure 12.3: The two-color letterhead design.
Figure 12.4: The finished envelope.
Figure 12.5: The finished business card layout.
Figure 12.6: Set up ten business cards in minutes.

Chapter 13: Getting Around in Fireworks

Figure 13.1: The Fireworks workspace with a new document open in a Windows PC environment.
Figure 13.2: The New Document dialog box.
Figure 13.3: The Layers panel with a few common features labeled.
Figure 13.4: The solid line indicates where the panel will be docked.
Figure 13.5: The Main toolbar open and docked below the Menu bar.
Figure 13.6: The Modify toolbar.
Figure 13.7: The Tools panel.
Figure 13.8: The Property inspector.
Figure 13.9: The Status bar showing the magnification options.
Figure 13.10: The Layers panel.
Figure 13.11: The Duplicate Layer dialog box.

Chapter 14: Applying Color

Figure 14.1: Clicking a Color box opens a color pop-up window. Additional options are available in the Options menu.
Figure 14.2: The Color dialog box opens when you click the System Color Picker icon.
Figure 14.3: The Find and Replace panel.
Figure 14.4: The Stroke panel.
Figure 14.5: The Stroke categories showing the various stroke options.
Figure 14.6: The Stroke Options pop-up window as seen in the Tools panel.
Figure 14.7: The Edit Stroke Options category.
Figure 14.8: The Shape category options.
Figure 14.9: The Sensitivity tab options.
Figure 14.10: The Fill area of the Property inspector.
Figure 14.11: The Web Dither pop-up menu.
Figure 14.12: The Fill options pop-up menu that opens when the Fill Options button is clicked.
Figure 14.13: A pattern-filled object, selected to reveal the adjustment bars.
Figure 14.14: A representation of the gradient options.
Figure 14.15: Edit Gradient window.
Figure 14.16: The Styles panel.

Chapter 15: Drawing Like a Pro

Figure 15.1: The Tools panel showing the Vector tools area.
Figure 15.2: The Shape Tools pop-up menu in the Tools panel.
Figure 15.3: The options available in the Property inspector when the Rectangle tool is selected.
Figure 15.4: The warning that opens when you use the Subselection tool to select the rectangle.
Figure 15.5: A point deleted resulting in a triangle.
Figure 15.6: The triangle being rotated using the Scale tool.
Figure 15.7: The options of the Polygon tool prior to drawing the shape.
Figure 15.8: The additional Auto Shapes that ship with Fireworks MX 2004 found in the Shapes panel.
Figure 15.9: Clicking the lower-right control point cycles through these three shapes.
Figure 15.10: The Connector Line shape.
Figure 15.11: The center hole made larger.
Figure 15.12: The L shape on the left and the top corner adjusted on the right.
Figure 15.13: A Pie shape with a couple of segments recolored, one segment moved, and some effects added.
Figure 15.14: A rectangle with two rounded corners and two square corners.
Figure 15.15: The Spiral tool in action.
Figure 15.16: A shape made by adjusting the roundness, point numbers, and size. The second shape is two stars with one rotated.
Figure 15.17: The first line drawn.
Figure 15.18: The second line drawn.
Figure 15.19: The lines joined together.
Figure 15.20: The completed zigzag line.
Figure 15.21: A curved line using the Pen tool.
Figure 15.22: A path with straight segments and one with Bézier curves added.
Figure 15.23: A curve with the control handles visible.
Figure 15.24: A straight line with three points drawn.
Figure 15.25: A curve added to the straight line.
Figure 15.26: Another curve added by dragging the other control handle.
Figure 15.27: A point being added to the intersection of the guide at 160 and 100.
Figure 15.28: The two lower-left points moved up 25 pixels.
Figure 15.29: The curve added by using the Alt/Option key and dragging the handles to form the curve shape.
Figure 15.30: Two shapes joined by using the Union command.
Figure 15.31: Intersect (the image on the left) keeps only the area common to the intersection (crop is on the right).
Figure 15.32: A curve added to a rectangle by using the Intersect command.
Figure 15.33: The result of punching the white rectangle. The Layers panel shows the shapes and layers you should have at this point.
Figure 15.34: A rectangle drawn over the top portion of the circle.
Figure 15.35: The interface shape with the curved circle added.

Chapter 16: Designing Spectacular Text Effects

Figure 16.1: The Property inspector contains tools for controlling text and paragraph properties.
Figure 16.2: The stroke orientation options.
Figure 16.3: From top to bottom, text with a stroke applied, kerned and scaled text, rotated text, and distorted text.
Figure 16.4: Converting normal text to paths enables you to modify the text outlines. Here, the letter X is selected with the Subselection tool to reveal its points and line segments.
Figure 16.5: An ellipse around the image and the text in place for the logo.
Figure 16.6: Paths prepared for the text.
Figure 16.7: The top text attached to a path.
Figure 16.8: The text is upside down on the bottom half.
Figure 16.9: The text is too high on the arc.
Figure 16.10: The bottom text is altered and in position.
Figure 16.11: The image is inside the text and can be repositioned by moving the cloverleaf symbol.
Figure 16.12: The text has a linear gradient fill. The bottom text object has its visibility turned off, which is evidenced by no eye icon.
Figure 16.13: The Expand operation applied to the text.
Figure 16.14: The text size is increased using the Inset Path command.
The Curve dialog box with the input and output settings adjusted.
The text converted to paths, an inner bevel effect, and the brightness and contrast effect added twice.
Two rectangles drawn over the text and filled with white for use as a mask.
The text object with the gold skin applied using a mask.
The Property inspector showing the metal texture added and two effects disabled.
The futuristic text on a background.

Chapter 17: Working with Bitmap Images

Figure 17.1: The Tools panel showing the placement of the Bitmap tools. The Rubber Stamp is selected, showing the other tools contained in that category.
Figure 17.2: The Property inspector showing the Marquee properties.
Figure 17.3: The focal point is selected.
Figure 17.4: The selection is inversed, and a Gaussian blur is added only to the background.
Figure 17.5: The properties available for the Dodge tool after the tool is selected.
Figure 17.6: The gradient handles adjusted, making a nice fade into the background texture.
Figure 17.7: The various fade options available in the Fade Image dialog box.
Figure 17.8: The left-to-right fade image option from the Fade Image command applied to the image.
Figure 17.9: The bird image with a path around the area to remain.
Figure 17.10: The vector mask applied to the bird with the background removed.
Figure 17.11: A rectangle drawn to cover the top of the circle.
Figure 17.12: The image imported and placed above the circle shape.
Figure 17.13: The image scaled to fit horizontally.
Figure 17.14: The rectangle drawn over the bottom of the circle shape to use as an intersect command.
Figure 17.15: The stacking order in the Layers panel.
Figure 17.16: A vignette made from the bird image.
Figure 17.17: The background removed with a large brush.
Figure 17.18: The fine detail is painted in with a white Canvas added.
Figure 17.19: The mask separated from the image as a separate object in the Layers panel.
Figure 17.20: The mask ready to be saved for later use.
The completed project sample.
Brightness and contrast added to the image.
The shape of the adjusted curve.
The results of adjusting the curve for the image.
The Layers panel showing the Opacity and Blend mode settings.
The image with the Blend mode changed to Multiply and Opacity lowered a bit.
The Curve dialog box showing the new curve with three points.
The image with the contrast/brightness and the adjusted curves.
The shape of the blood spots.
The shapes traced.
The blood shape with the Blend mode of Color applied.
The Layers panel up through Step 10.
A dramatic reduction in brightness.
The composition with all the image layers complete.
The text so far.
The text attached to the path.
The cloned text moved.
The text distorted.

Chapter 18: Designing Navigational Elements

Figure 18.1: The New Symbol dialog box.
Figure 18.2: The Align panel centering the button in the Button Editor.
Figure 18.3: The instance of the button symbol opened for editing in the Button Editor.
Figure 18.4: The Import Symbols dialog box for buttons.
Figure 18.5: The button symbol added to the Library panel.
Figure 18.6: The rollover state of the image as seen in the Preview tab.
Figure 18.7: The Button Library as seen in your document and the Layers panel.
Figure 18.8: The new button added to the Button Library.
Figure 18.9: The first button text added to the site interface.
Figure 18.10: The rest of the main navigation text added to the layout.
Figure 18.11: The Knife tool after it has sliced the bottom of the rectangle.
Figure 18.12: The three-sided rectangle placed over the LEARN text.
Figure 18.13: The three-sided rectangle placed over the ACT text.
Figure 18.14: The rollover state completed for all the text links.
Figure 18.15: Slices added to each text link.
Figure 18.16: The LEARN slice is selected and given a unique name in the Property inspector.
Figure 18.17: The Simple Rollover dialog box.
Figure 18.18: The images used in this exercise.
Figure 18.19: An image added to Frame 2 for the swap image behavior.
Figure 18.20: A slice added to cover the new content for Frame 2.
Figure 18.21: The drag-and-drop method being used to add the Swap Image behavior.
Figure 18.22: The Swap Image behavior added.
Figure 18.23: Text added below the HOME button in Frame 2. This text will be visible only when the mouse cursor rolls over the HOME button.
Figure 18.24: Frame 3 being used for the second button rollover
Figure 18.25: A navigational line that will get hot spots added to it.
Figure 18.26: A hot spot is added to the word Home.
Figure 18.27: The Property inspector showing the link and the Alt tag added.
The Pop-up Menu Editor with the first three entries
The Appearance tab where you set the font attributes, type of menu, and cell colors.
The Export dialog box.

Chapter 19: Automating Your Workflow

Figure 19.1: The Find and Replace panel.
Figure 19.2: The actions performed on this document. The Fit Canvas command is actually a crop action.
Figure 19.3: The Batch dialog box.
Figure 19.4: The available Batch options.
The interface of the command that you will create with this tutorial.
Process flow for creating the Randomizer command.
Examining the History panel for building blocks for your command.
Copying a step from the History panel.
Copying additional copy-and-paste steps from the History panel.
The empty interface of randomizer_start.fla within Flash MX 2004.
Adding the Apply button from the Library panel in Flash MX to the active stage.
Adding the ActionScript to the Apply button.
Adding the ActionScript to the Apply button to get the document height and width and to assign random values to variables.
Adding the ActionScript to the Apply button to create a nested loop based on random variables.
Adding the ActionScript to the Apply button to dynamically assign random values to the variables xPlacement and yPlacement.
Final ActionScript for the Randomizer command within the Actions panel of Flash MX 2004.
Final error checking added to the command for completion of user experience.
Exporting your Flash MX 2004 command into the Fireworks MX 2004 command folder.
The Randomizer command in action within Fireworks MX 2004.

Chapter 20: Designing Animations

Figure 20.1: The Symbol Properties dialog box.
Figure 20.2: The Animate dialog box.
Figure 20.3: A motion path of a symbol.
Figure 20.4: The Frames panel with labeled icons.
Figure 20.5: The Duplicate Frame dialog box.
Figure 20.6: The Onion Skinning options.
Figure 20.7: The elongated hourglass shows which frames are affected by Onion Skinning.
Figure 20.8: The Tween Instances dialog box.
Bitmap cat with background.
Setting the gradient colors.
The gradient mask with the circular handle moved.
Transparent gradient overlay.
Selection marquee.
The cat faded to background.
The Layers panel.
The bitmap cat selected.
The motion guide is adjusted.
Placement of the forever text.
New placement of the forever text.

Chapter 21: Slicing and Optimizing

Figure 21.1: Four guides placed to aid in slicing the document.
Figure 21.2: The Habitat Alert document with the slices visible.
Figure 21.3: The link and alt information added in the Property inspector for the location slice.
Figure 21.4: The 4-Up view showing a GIF and two different JPEG optimization settings.
Figure 21.5: The Export Preview dialog box.
Figure 21.6: The Optimize to Size dialog box open.
Figure 21.7: The Optimize panel with a file format of GIF.
Figure 21.8: The color swatches showing the various feedback icons.
Figure 21.9: The white background and white center are both removed using index transparency.
Figure 21.10: When you want to remove the background color only and not the same color from the image, use the Alpha Transparency option.
Figure 21.11: The Habit Alert logo seen in Preview mode after the optimization settings are made.
Figure 21.12: The Optimize panel with a Export File Format of JPEG chosen.
Figure 21.13: The image with the JPEG quality lowered to 40.
Figure 21.14: The Selective JPEG Settings dialog box.
Figure 21.15: The image with the quality setting of 90 percent and zoomed in to 200 percent.
Figure 21.16: The Export Wizard opening dialog box.
Figure 21.17: The Export dialog box.
Figure 21.18: Table options tab.
Figure 21.19: The Macromedia Flash SWF Export Options dialog box.
Figure 21.20: The Illustrator Export Options dialog box.

Chapter 22: Navigating through Flash MX 2004

Figure 22.1: The Flash MX 2004 interface.
Figure 22.2: The Property inspector when the Pen tool is selected.
Figure 22.3: The Toolbar.
Figure 22.4: The template documents that ship with Flash.
Figure 22.5: The Document Properties dialog box.

Chapter 23: Designing Visual Content

Figure 23.1: The Property inspector showing the properties for the Rectangle tool.
Figure 23.2: The different Brush tool options.
Figure 23.3: The Color Mixer with Linear fill style being selected.
Figure 23.4: The gradient is filled in the left rectangle and continues into the right rectangle.
Figure 23.5: Different Fill transform options.
Figure 23.6: A selected text box being changed to an input text box.
Figure 23.7: The Property inspector for static text.
Figure 23.8: The Property inspector as it appears when Dynamic Text is selected.
Figure 23.9: The Property inspector when Input Text is selected.
Figure 23.10: The Align panel.
Figure 23.11: The envelope with the handles manipulated.

Chapter 24: Symbols and Libraries

Figure 24.1: The Library showing various icons, names, and types.
Figure 24.2: The Convert to Symbol dialog box.
Figure 24.3: The Button Symbol editor.
Figure 24.4: The bar above the Stage showing the scene and symbols in the Edit mode.

Chapter 25: Animating a Movie

Figure 25.1: The Timeline.
Figure 25.2: New content added to the Stage in Frame 10.
Figure 25.3: A frame-by-frame animation showing the Timeline with keyframes for each movement change.
Figure 25.4: Frame 10 is selected and the Onion Skinning option is turned on.
Figure 25.5: Frame 10 is selected and the Onion Skinning Outline option is turned on.
Figure 25.6: The pivot point in the center and rotated to the right.
Figure 25.7: The pivot point moved to the bottom center and rotated to the left.
Figure 25.8: The object rotated to the right with the Onion Skinning option turned on to show the rotated movement.
Figure 25.9: The properties available for a motion tween.
Figure 25.10: The Copy to Grid Timeline Effect.
Figure 25.11: The Distributive Duplicate dialog box.
Figure 25.12: The Transform dialog box.
Figure 25.13: The background image in place and the layer renamed.
Figure 25.14: The Fireworks PNG Import Settings dialog box with the settings used.
Figure 25.15: The gold herons added to the second layer and moved off the Stage.
Figure 25.16: The Timeline showing both motion tweens added.
Figure 25.17: The stroke being added to the text
Figure 25.18: A Motion Guide layer added above the tweened animation and a guide drawn.
Figure 25.19: The object placed with its registration point at the beginning of the Motion Guide.
Figure 25.20: A dot added to Frame 1 for the beginning of a shape tween.
Figure 25.21: The mouth drawn using the Pen tool.

Chapter 26: Working with Sound

Figure 26.1: The Edit Envelope dialog box.
Figure 26.2: The Timeline for the button symbol.
Figure 26.3: The Sound Properties dialog box.
Figure 26.4: The Linkage dialog box.

Chapter 27: Flash Components and Behaviors

Figure 27.1: The Components panel showing the components that ship with Flash MX 2004.
Figure 27.2: The Ultimate Scroller component by Flashloaded (www.flashloaded.com) is listed in the Components panel.
Figure 27.3: The Library showing all components on the Stage. Use the scroll bar at the bottom of the panel to see the various component attributes.
Figure 27.4: The Component inspector showing the Window component parameters.
Figure 27.5: The Component inspector Options menu.
Figure 27.6: The Property inspector showing the properties of the Button component.
Figure 27.7: The Behaviors panel.
Figure 27.8: The History panel showing a few steps taken.

Chapter 28: Publishing Your Flash Movies

Figure 28.1: The Debugger panel.
Figure 28.2: The Flash tab of the Publish Settings dialog box.
Figure 28.3: The Test Movie command with a new menu bar with the Debug menu in it.
Figure 28.4: The Bandwidth Profiler.

Chapter 29: Using ColdFusion MX with Flash Remoting

Figure 29.1: Flash Remoting adds several objects to the Flash MX 2004 Actions panel.
Figure 29.2: The first frame of the Flash movie enables users to preview available e-cards.
Figure 29.3: The third frame of the movie provides users with a form for entering data.
Figure 29.4: Users enter information and send the e-card from Frame 3 of the movie.
Using Dreamweaver MX to create a component outline.
Flash MX 2004 application that provides the question-and-answer form for your component.
ColdFusion MX's internal representation of your XML document object.
The elements returned by a call to XmlSearch().
An XHTML representation of our school data after applying an XSLT transformation.

Chapter 30: Understanding the Dreamweaver Environment

Figure 30.1: The Workspace Setup dialog box.
Figure 30.2: Dreamweaver MX 2004 Start Page.
Figure 30.3: The application menus.
Figure 30.4: The Insert bar.
Figure 30.5: Adding objects to your Favorites category.
Figure 30.6: The Insert bar with tabs.
Figure 30.7: The Document bar provides access to all views.
Figure 30.8: The status bar showing the Tag selector, Window Size selector, and Download Speed indicator.
Figure 30.9: Edit window size options and download speeds.
Figure 30.10: The fields in the contextual Property inspector change with the page element selected.
Figure 30.11: Use the Panel Options menu to regroup a panel within a group or to rename, close, or maximize the current group.
Figure 30.12: The Keyboard Shortcut Editor.

Chapter 31: Starting a Web Site with Dreamweaver

Figure 31.1: Name your site and select a root folder.
Figure 31.2: Information about the Web server is added in the Remote Info category.
Basic Site Setup mode
Select where you will store files locally.
Figure 31.3: Click the Expand/Collapse icon to view local and remote folders together.
The biggest difference in Dreamweaver on the Mac is found in the Files window.
Figure 31.4: The New Document dialog box.

Chapter 32: Building a Simple Page

Figure 32.1: The Page Properties dialog box with the Appearance category selected.
The color button opens a color palette.
Figure 32.2: Right-/Control+click to insert an image.
Figure 32.3: Images added to the mission statement page as seen in a browser (F12).
Figure 32.4: The Dreamweaver icon and Done button seen in Fireworks when editing is initiated from Dreamweaver.
Figure 32.5: Dreamweaver to Fireworks, at your command.
Figure 32.6: Select the top left anchor to add additional space to the right of the Canvas only.
Figure 32.7: No stripe along the right edge, even with the browser wide open.
Figure 32.8: Wrap tags around a selection with the Quick Tag Editor.
Figure 32.9: Six paragraphs formatted using an unordered list.
Figure 32.10: Formatted paragraph and lists, separated by a horizontal rule, as seen in a browser.

Chapter 33: Using Tables for Complex Layouts

Figure 33.1: A table inserted and the Table width view turned on.
Figure 33.2: The Table dialog box.
Figure 33.3: In Code view, the nonbreaking spaces in each cell in the code hold the cells open in Design view.
Figure 33.4: Selecting the <table> tag selects the entire table. The selection is indicated by the thick black border.
Figure 33.5: Selecting using the Table Width *** bar.
Figure 33.6: The table icons that are seen in the Property inspector when a table is selected.
Tables make tricky layout possible.
Figure 33.7: A cell selected makes the cell properties available in the Property inspector (notice the table icon in the left corner showing the approximate location of the selected cell).
Figure 33.8: Basic page and complicated table structure exported from Fireworks MX.
Figure 33.9: The table falls apart when HTML text is added.
Figure 33.10: Merging all of these cells forms an easier-to-edit space.
Figure 33.11: The Property inspector's Merge Cell and Split Cell icons.
Figure 33.12: A navigation HTML file generated by Fireworks and opened in Dreamweaver.
Figure 33.13: The Expanded table view.
Figure 33.14: The Fireworks table cleaned up.
Figure 33.15: Modular tables make this page layout easier to build and modify. The table border is for demonstration purposes only.
Figure 33.16: The Table dialog box with the settings for the first table in the index page of the Habitat Alert site.
Figure 33.17: The first table added with the logo and left side images added.
Figure 33.18: The first table with the cells set, spacers added, and the logo inserted.
Figure 33.19: The logo in a better position.
Figure 33.20: The second table added with a background image and foreground image.
Figure 33.21: A line added to the bottom of the content area.
Figure 33.22: The buttons from the exported Fireworks HTML page are inserted into the layout.
Figure 33.23: The center of the rounded table set to Top vertical alignment with the background color the same as the borders.

Chapter 34: Building Basic Navigation Links

Figure 34.1: Absolute URLs for the Habitat Alert site are stored as link assets.
Figure 34.2: Choosing the site root from the Relative To menu.
Figure 34.3: Dreamweaver indicates when the target page is outside of the site.
Figure 34.4: The Point to File tool works with text and image links.
Figure 34.5: Name your map and build hot spots with the map drawing tools.
Figure 34.6: The hot spots and Alt text added to make the image map.
The slider moves back and forth in the page history.
The red X means a step cannot be part of a saved command.
Figure 34.7: The Named Anchor icon.
Figure 34.8: Insert Email Link window.

Chapter 35: Using Cascading Style Sheets

Figure 35.1: The CSS Styles panel.
Figure 35.2: The Rule panel opens automatically when you select a style in the CSS Styles panel.
Figure 35.3: The Relevant CSS panel in List view.
Figure 35.4: The Attributes panel in Category view.
Figure 35.5: The New CSS Style dialog box and options.
Figure 35.6: The Attach External Style Sheet dialog box filled in for the index page.
Figure 35.7: Style Definition for body in main.css.
Figure 35.8: The page with its tiling background image and white page color.
Figure 35.9: The New CSS Style dialog box showing a: link selected.
Figure 35.10: The settings used in the Box category.
Figure 35.11: The properties for the head 4 titles applied to the maincontent style 35.
Figure 35.12: Margin around the content in the maincontent cell makes the page easier to read.
Figure 35.13: Attachment options in the Link External Style Sheet dialog box.
Figure 35.14: The Style icon (with the S).
Figure 35.15: As seen in Internet Explorer 6.
Figure 35.16: As seen in Netscape 4.4.

Chapter 36: Working with Libraries and Templates

Figure 36.1: Library assets live in the Assets panel.
Figure 36.2: The bottom ad banners are placeholders. Making a Library Item will allow easy updating of the element when the site is completed.
Figure 36.3: The Property inspector also provides access to the original item.
Figure 36.4: The Save As Template dialog box.
Figure 36.5: The Templates toolset in the Insert bar contains all the functions found in the Template Objects of the Insert menu.
Figure 36.6: You may use spaces but not special characters when naming the new editable region.
Figure 36.7: The Editable Tag Attribute dialog box.
Figure 36.8: The regions showing their labels.
Figure 36.9: The Habitat Alert Template in the New from Template dialog box.
Figure 36.10: The image is no longer visible, but the background of the circle is.
Figure 36.11: Look! No picture! The blue-circle area is created by the background image for this cell.
Figure 36.12: Resolving inconsistent regions.
Figure 36.13: Selecting the Nowhere option.
Completed Local Info category.
Completed Testing Server category.
Expanded Site tab.
The Site tab after template backup.
Syntax Check OK dialog box.
Syntax Check showing an error dialog box.
Blank Find and Replace dialog box.
Completed Find and Replace dialog box source code.
Update Template Files dialog box.
Optional Region dialog box.
Update Pages dialog box — completed.

Chapter 37: Tapping into the Power of Forms

Figure 37.1: A simple but insecure form. Place the mailto: e-mail address in the Action field of the form tag.
Figure 37.2: The Insert bar contains all the Form tools.
Figure 37.3: Use special characters for cross-platform consistency.
Figure 37.4: The text field and button added to the form field.
Figure 37.5: The List Values dialog box is where you add list or menu items.
Figure 37.6: The text field with a Char Width value of 12 and a Go button.
Figure 37.7: The Jump Menu dialog box.
Figure 37.8: The main Find page in Netscape 4x.
Figure 37.9: The main Find page as viewed in Internet Explorer 6.0.

Chapter 38: Building a Framed Site

Figure 38.1: A page with three frames within the frameset.
Figure 38.2: Simple framesets include rows only, columns only, or a shared row/column layout. Nested framesets are used when you want to vary the total rows and columns between frames.
Figure 38.3: The Layout category of the Insert bar.
Figure 38.4: The mini layout lets you select which frame to size.
Figure 38.5: Add a name for each frame using the Property inspector.
Figure 38.6: You may target the frame or use _parent when your configured framed site doesn't use the standard Dreamweaver nested frames approach.
Figure 38.7: A common nested frameset layout that places two columns in the bottom frame of a two-row frameset.
Figure 38.8: You can change multiple pages using the Go To URL method. Just select the frame and locate a page.
Figure 38.9: The New Document dialog box offers many frameset layouts.

Chapter 39: Building Navigation with Behaviors

Figure 39.1: For greater browser compatibility, choose Show Events For ® 4.0 and Later Browsers.
Figure 39.2: The circle image swaps as you move your cursor over the buttons.
Figure 39.3: Name your button elements and select their button states. Add alternate text and locate the page for each button link. Click the Add (+) button to move to the next element of the navigation bar.
Figure 39.4: The Down state of the button reinforces the current location in the site.
Figure 39.5: The Contents, Appearance, Advanced, and Position screens in the Fireworks Pop-Up Menu Editor are used to modify the menu items.
Figure 39.6: The Contents screen is where you edit menu items, including their URLs.
Figure 39.7: The arrays contain the URL for each menu item, among other properties.
Figure 39.8: The Contents screen in the Show Pop-Up Menu dialog box lets you enter the text and format your main menu and submenu items.

Chapter 40: Inserting Media Elements

Figure 40.1: The Insert Flash Button dialog box options.
Figure 40.2: Flash text options.
Figure 40.3: The Flash Image Viewer added to a new page.
Figure 40.4: The sound file and plug-in properties.
Figure 40.5: Enter settings required using the Property inspector.
Figure 40.6: Flash Assets can be played in the Assets panel or in the document after a SWF is inserted.
Figure 40.7: Use the Property inspector to modify Flash movie properties or to add parameters.
Figure 40.8: Expand the Files panel (window) to enter Site Map view.
Figure 40.9: The parameter accolor sets the color for the link and makes the text look clickable.

Chapter 41: Working with Behaviors, Custom Scripts, and Snippets

Figure 41.1: Dreamweaver's behaviors. Which behaviors are available depends on what object or link is selected in the current document.
Figure 41.2: The Change Property dialog box.
Figure 41.3: The Check Browser dialog box.
Figure 41.4: In Netscape 4x, turn off JavaScript by unchecking the option.
Figure 41.5: Turn off scripting in Netscape 6x here.
Figure 41.6: A meta refresh doesn't require JavaScript to function.
Figure 41.7: Select the type of action needed to control your named Shockwave or Flash movie.
Figure 41.8: Use the Open Browser Window dialog box to set up your pop-up window.
Figure 41.9: The Validate Form dialog box lets you choose a form element, specify whether content is required, and check the type of data provided.
Figure 41.10: Paste a script or type it (if you're hand-coding) into the Content field.
Figure 41.11: The dynamic date displays in the browser.
Figure 41.12: The Snippets panel comes with many predefined code snippets.
Figure 41.13: The Snippet dialog box.

Chapter 42: Extending Your Dreamweaver

Figure 42.1: Notes associated with an extension provide quick-start information about the extension.
Figure 42.2: The icon made for the custom table now shows up in the HTML category.
Figure 42.3: The Favorite Objects dialog box.

Chapter 43: Building a Dynamic Site with DHTML

Figure 43.1: Layer tools include the Layers panel, the Draw Layer object, and the Property inspector.
Figure 43.2: The completed puzzle for the Habitat Alert site.
Figure 43.3: The Drag Layer basic options
Figure 43.4: The Advanced Drag Layer options include adding JavaScript alerts.
Figure 43.5: The Set Text of Layer dialog box.
Figure 43.6: A sliding What's New menu.
Figure 43.7: Add settings to open the menu in the AniMagic by PVII dialog box.
Figure 43.8: Snappy menus are a "snap" to build.
Figure 43.9: Use the Property inspector to position multiple layers.
Figure 43.10: If no layers are selected, all layers will be hidden. The Set to Use menu is useful when you have other layers that are not part of the menu.
Figure 43.11: The Snap Layers dialog box with two Snap actions: one for the button's menu and the other for the MenuCloser.
Figure 43.12: Showing the MenuCloser and MenuLearn layers in Set Two.

Chapter 44: Publishing Your Site

Figure 44.1: Check Spelling suggests changes for misspelled or unrecognized words.
Figure 44.2: The Results panel houses the Link Checker.
Figure 44.3: A new icon added to the Document toolbar for easy access and notification of browser errors.
Figure 44.4: The Settings dialog box, where you can choose which browsers to check.
Figure 44.5: Check target browsers for a page, files or folders, or the entire site. Save the results by clicking the Save Report icon at the left side of the panel. If you don't save it, the report is lost.
Figure 44.6: Questions in the Site Definition Wizard are designed to elicit the proper information about how you connect to your Web server and where the server is located.
Figure 44.7: The Remote Info category is accessed in the Site Definition's Advanced screens.
Figure 44.8: A successful connection test.
Figure 44.9: The host directory indicates the remote root folder, which ideally should mirror the structure of the local root folder.
Figure 44.10: Expand the Files panel.
Figure 44.11: Connecting to the Web server reveals the mirrored Web files and folders.
Figure 44.12: File Management Put and Get options.
Figure 44.13: Put or get the current document using the Files panel Options ® Site menu.
Figure 44.14: Synchronize dialog box.
Figure 44.15: A preview of the proposed synchronization.

Chapter 46: Creating a ColdFusion Application in Dreamweaver

Figure 46.1: The subscriber database table shown in Microsoft Access' Design view.
Figure 46.2: The subscriber database table shown in Microsoft Access' Datasheet view.
Figure 46.3: In Advanced view, your Testing server dialog box should look similar to this using the standalone version of ColdFusion.
Figure 46.4: ColdFusion MX Administrator's Data Source panel.
Figure 46.5: With your connection in place, you can view fields for the tables available in your database.
The Testing Server category filled in for ColdFusion.
The database folder and contents need Write permission only.
ColdFusion MX Administrator's Data Source panel.
Selecting the database file.
Figure 46.6: Making all data columns available to the page.
Figure 46.7: Complex queries built in the Advanced panel cannot be displayed with the Simple panel.
Figure 46.8: The Tag inspector is a valuable tool when you are working with dynamic page attributes. Be sure to expand the panel fully to view the attributes.
Figure 46.9: Using the Bindings panel to add the needed ColdFusion code to pull content from the database dynamically.
Figure 46.10: The Repeat Region dialog box.
Figure 46.11: All the subscriber records in the current database are returned.
The last name and first name are formatted and the e-mail Send link has been added.
Dynamic text is displayed within brackets in Dreamweaver. When you click the Live Data button, the bracketed references are replaced by data from the database.
Selecting target and clicking the lightning bolt.
The Code field contains the code needed to generate the e-mail address.
The e-mail code as seen in Code view.
Figure 46.12: Insert Application Objects that build HTML elements with server behaviors already incorporated.
Figure 46.13: The Server Behaviors menu options.
WSDL file for the weather forecast service
Using Dreamweaver MX 2004 to parse a WSDL file for a Web service.
Dreamweaver MX 2004 displays a list of functions provided by the Web service.

Chapter 47: Working with Forms and ColdFusion MX

Figure 47.1: The Recordset for the Habitat Alert form.
Figure 47.2: The Insert Record dialog box.
Figure 47.3: The register page and Bindings panel after the behavior has been added.
Figure 47.4: The Action field in the Property inspector.
The Repeat Region dialog box filled in.
The Recordset dialog box.
Changing the value of LoginName.
The Recordset dialog box.
Using Dreamweaver MX 2004 to create a component outline.
Flash MX 2004 application that provides the question and answer form for your component.
ColdFusion MX's internal representation of your XML document object.
The elements returned by a call to XmlSearch().
An XHTML representation of our school data after applying an XSLT transformation.

Appendix C: Installing Macromedia Studio MX

Figure C.1: The Macromedia Flash Player 7 opens to display the install screen.
Figure C.2: The InstallShield Wizard.
Figure C.3: The License Agreement.
Figure C.4: The file location for the install dialog box.
Figure C.5: Selecting your browsers for the Flash Player.
Figure C.6: The installation is completed.
Figure C.7: The completion and registration dialog box.
Figure C.8: The ColdFusion Developer Edition Install Wizard.
Figure C.9: License Agreement for ColdFusion MX.
Figure C.10: The Install Type dialog box.
Figure C.11: The Server Configuration options.
Figure C.12: The Web Server Selection dialog box.
Figure C.13: The Administrator Password dialog box.
Figure C.14: The Installation Confirmation dialog box.
Figure C.15: The Configuration Wizard.
Figure C.16: The Debug Settings.
Figure C.17: The Debug Mappings screen.
Figure C.18: The Development Style options.
Figure C.19: Installation complete.
Figure C.20: The Ready To Install screen.


List of Tables

Chapter 5: FreeHand MX Art in a Nutshell

Table 5-1: FreeHand MX Preferences
Table 5-2: Common Perspective Grid Situations and Solutions

Chapter 10: Basic FreeHand MX Animation

Files Prepared for Habitat Alert Web Site

Chapter 11: FreeHand MX Animation Techniques

Files Prepared for Habitat Alert Web Site

Chapter 12: Outputting FreeHand MX Documents

Files Prepared for the Habitat Alert Web Site

Chapter 13: Getting Around in Fireworks

Table 13-1: Preferences

Chapter 14: Applying Color

Table 14-1: Color Models
Files Prepared for the Habitat Alert Web Site

Chapter 15: Drawing Like a Pro

Files Prepared for Habitat Alert Web Site

Chapter 16: Designing Spectacular Text Effects

Table 16-1: Character Key Combinations

Chapter 17: Working with Bitmap Images

Files Prepared for Habitat Alert Web Site

Chapter 18: Designing Navigational Elements

Table 18-1: Behaviors and Descriptions
Files Prepared for Habitat Alert Web Site

Chapter 21: Slicing and Optimizing

Files Prepared for Habitat Alert Web Site
Additional Site Assets from Techniques in This Chapter

Chapter 22: Navigating through Flash MX 2004

Table 22-1: The View Menu Options
Table 22-2: Image Formats for Flash Import

Chapter 25: Animating a Movie

Table 25-1: Frame and Keyframe Shortcuts
Files Prepared for Habitat Alert Web Site

Chapter 26: Working with Sound

Files Prepared for the Habitat Alert Web Site

Chapter 28: Publishing Your Flash Movies

Files Prepared for the Habitat Alert Web Site

Chapter 31: Starting a Web Site with Dreamweaver

Files Prepared for the Habitat Alert Web Site

Chapter 32: Building a Simple Page

Table 32-1: Habitat Alert Page Properties
Table 32-2: Float Image Options
Files Prepared for the Habitat Alert Web Site

Chapter 33: Using Tables for Complex Layouts

Files Prepared for the Habitat Alert Web Site

Chapter 34: Building Basic Navigation Links

Table 34-1: Image Map Settings
Files Prepared for the Habitat Alert Web Site

Chapter 35: Using Cascading Style Sheets

Files Prepared for the Habitat Alert Web Site

Chapter 36: Working with Libraries and Templates

Template Code Differences
F/R Queries
Template Extension Listing
Files Prepared for the Habitat Alert Web Site

Chapter 37: Tapping into the Power of Forms

Files Prepared for the Habitat Alert Web Site

Chapter 39: Building Navigation with Behaviors

Files Prepared for the Habitat Alert Web Site

Chapter 40: Inserting Media Elements

Files Prepared for the Habitat Alert Web Site

Chapter 41: Working with Behaviors, Custom Scripts, and Snippets

Files Prepared for the Habitat Alert Web Site

Chapter 43: Building a Dynamic Site with DHTML

Table 43-1: Snap Layers and AutoLayers Values
Files Prepared for the Habitat Alert Web Site

Chapter 46: Creating a ColdFusion Application in Dreamweaver

Files Prepared for Habitat Alert Web Site

Chapter 47: Working with Forms and ColdFusion MX

Table 47-1: ModUsers Form Fields
Files Prepared for Habitat Alert Web Site

Appendix C: Installing Macromedia Studio MX

Table C-1: The Windows and Macintosh System Requirements


List of Code Examples

Chapter 29: Using ColdFusion MX with Flash Remoting

Listing 29-1: get_all_cards.cfm
Listing 29-2: Creating a Gateway Connection
Listing 29-3: Accessing a Remote Service
Listing 29-4: Creating the Result Function
Listing 29-5: ActionScript for the Application's First Frame
Listing 29-6: ActionScript for the Forward Button
Listing 29-7: ActionScript for the Back Button
Listing 29-8: Coding the Select E Card Button
Listing 29-9: ActionScript for the Third Keyframe
Listing 29-10: ActionScript for the Submit Button
Listing 29-11: send_card.cfm
Listing 29-12: view_card.cfm

Chapter 45: The Role of ColdFusion in Your Web Sites

Listing 45-1: A Sample ColdFusion Template Containing HTML and CFML Tags


List of Sidebars

Chapter 14: Applying Color

Understanding Web Color

Chapter 18: Designing Navigational Elements

Button Facts

Chapter 20: Designing Animations

Using Numeric Transform

Chapter 29: Using ColdFusion MX with Flash Remoting

Understanding ColdFusion MX Structures
Understanding ColdFusion Arrays
Using the NetConnection Debugger

Chapter 31: Starting a Web Site with Dreamweaver

Basic Site Setup Wizard
The Files Window
About the Index File

Chapter 32: Building a Simple Page

Choosing Color in Dreamweaver MX

Chapter 33: Using Tables for Complex Layouts

When to Use a Table Structure

Chapter 34: Building Basic Navigation Links

Building a Command from the History Panel

Chapter 35: Using Cascading Style Sheets

About Background-Image (URL)
Using Color in CSS Styles
The Tao of Link

Chapter 38: Building a Framed Site

Rows or columns?
Why Add No Frames Content?

Chapter 40: Inserting Media Elements

Sound File Formats
Where to Find Sound Files
Common Video Formats and Plug-in Options
Setting Width and Height Values for Movies

Chapter 41: Working with Behaviors, Custom Scripts, and Snippets

Where to Look for User-Specific Configuration Folders

Chapter 42: Extending Your Dreamweaver

Some Popular Extensions
Where to Find Your User Data Files

Chapter 44: Publishing Your Site

Domains and Server Solutions

Chapter 45: The Role of ColdFusion in Your Web Sites

Understanding the ColdFusion Administrator

Chapter 46: Creating a ColdFusion Application in Dreamweaver

Testing Your ColdFusion Templates


CD Content

Team LiB
Previous Section

CD Content CD Content

Following are select files from this book's Companion CD-ROM. These files are copyright protected by the publisher, author, and/or other third parties. Unauthorized use, reproduction, or distribution is strictly prohibited.

File | Description | Size
All CD Content | Macromedia Studio MX 2004 Bible | 71,291,783
Chapter 3: | Designing the Habitat Alert Web Site | 43,877
Chapter 9: | FreeHand MX and Web Graphics | 2,216,057
Chapter 10: | Basic FreeHand MX Animation | 590,797
Chapter 13: | Getting Around in Fireworks | 7,613
Chapter 14: | Applying Color | 5,028
Chapter 16: | Designing Spectacular Text Effects | 256,507
Chapter 17: | Working with Bitmap Images | 39,304
Chapter 18: | Designing Navigational Elements | 604,108
Chapter 19: | Automating Your Workflow | 3,744,937
Chapter 20: | Designing Animations | 1,313,919
Chapter 22: | Navigating through Flash MX 2004 | 1,165,676
Chapter 23: | Designing Visual Content | 39,992,565
Chapter 24: | Symbols and Libraries | 10,816,523
Chapter 25: | Animating a Movie | 9,484
Chapter 30: | Understanding the Dreamweaver Environment | 161,451
Chapter 31: | Starting a Web Site with Dreamweaver | 200,103
Chapter 32: | Building a Simple Page | 1,235
Chapter 33: | Using Tables for Complex Layouts | 4,174,715
Chapter 34: | Building Basic Navigation Links | 2,597,951
Chapter 35: | Using Cascading Style Sheets | 2,267,881
Chapter 36: | Working with Libraries and Templates | 767,088
Chapter 37: | Tapping into the Power of Forms | 4,470
Bonus tutorials |  | 103,693

Team LiB
Previous Section