This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
800 East 96th St., Indianapolis, Indiana, 46240 USA
00 0672323125 FM
4/22/02
12:25 PM
Page ii
Sams Teach Yourself Adobe® LiveMotion™ 2 in 24 Hours
ACQUISITIONS EDITORS
Copyright 2002 by Sams Publishing
DEVELOPMENT EDITOR
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 2002100940 Library of Congress Catalog Card Number: 0-672-32312-5 Printed in the United States of America
04
03
02
Heather Goodell
MANAGING EDITOR Charlotte Clapp
PROJECT EDITOR Anthony Lawrence Wesley Reitz III Elizabeth Finney
COPY EDITOR Cheri Clark
INDEXER Sandy Henselmeier
TECHNICAL EDITOR
First Printing: May 2002 05
Betsy Brown Jennifer Kost-Barker
4
3
2
1
Craig Harris
TEAM COORDINATOR
Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Adobe and LiveMotion are trademarks of Adobe Systems Incorporated.
Amy Patton
INTERIOR DESIGNER Gary Adair
COVER DESIGNER Aren Howell
PAGE LAYOUT Susan Geiselman
Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.
00 0672323125 FM
4/22/02
12:25 PM
Page iii
Contents at a Glance Introduction
PART I Creating LiveMotion Objects
1
3
1
Creating Simple Objects
2
Importing Photos and Artwork as Objects
27
3
Setting Type with LiveMotion
47
PART II Modifying Objects
5
67
4
Combining, Grouping, and Editing Objects
69
5
Selecting and Transforming Objects
93
6
Working with Object Layers
PART III Color, Shape and Style
109
125
7
Using LiveMotion’s Color Tools
127
8
Working with the Library Palette
143
9
Applying LiveMotion Styles
159
10
Textures, Gradients, Distortion, and Effects
175
11
Matting and Masks
189
PART IV Creating Images for the Web
203
12
Designing Static Web Graphics
205
13
Image Mapping and Rollover Techniques
219
14
Creating Remote Rollovers
233
PART V Flash SWF Animation and Multimedia
245
15
Exploring the Timeline
247
16
Designing Animations
259
17
Working with Movie Clips
269
18
Adding LiveMotion Audio
283
19
Creating a Multimedia Presentation
293
00 0672323125 FM
4/22/02
12:25 PM
Page iv
PART VI Designing and Optimizing Advanced Web Presentations
305
20
Professional Applications of LiveMotion
307
21
Optimizing and Exporting LiveMotion Files
319
PART VII Advanced Techniques: Scripting
331
22
Scripting and LiveMotion
333
23
Adding Scripts
345
24
Scripting Project
359
Appendixes A
Learning LiveMotion Features
369
B
Setting Preferences and Working with the Composition Area
393
C
Understanding Web Graphics
403
Index
421
00 0672323125 FM
4/22/02
12:25 PM
Page v
Contents Introduction
1
Who Should Read This Book ................................................................................1 Conventions Used in This Book ............................................................................2 Part I Creating LiveMotion Objects Hour 1 Creating Simple Objects
3 5
Exploring Objects in LiveMotion ..........................................................................6 Drawing an Object—A Simple Rectangle ............................................................7 Deleting an Object ..................................................................................................9 Modifying an Object ..............................................................................................9 Changing Object Fill and Outline ....................................................................9 Making Object Transformations ......................................................................11 Changing the Object’s Color ..........................................................................16 Creating a Rounded Rectangle ............................................................................17 Using the Ellipse Tool ..........................................................................................19 Working with Polygons ........................................................................................20 Creating a Four-Sided Polygon Object ..........................................................21 Adding Sides to a Polygon Object ..................................................................22 Drawing Free-Form Objects Using the Pen Tool ................................................23 Summary ..............................................................................................................24 Q&A ......................................................................................................................25 Quiz ......................................................................................................................25 Quiz Answers ........................................................................................................25 Activities ..............................................................................................................25 Hour 2 Importing Photos and Artwork as Objects
27
Understanding Image Objects ..............................................................................28 Vector Objects in LiveMotion ........................................................................28 Raster Graphics as Objects ..............................................................................29 Getting the Graphic Goods ..................................................................................30 Finding Sources for Stock Art and Photos ......................................................31 Scanning Art, Photos, and Organic Objects ....................................................33 Importing Your Art ................................................................................................35 Placing Graphic Files ............................................................................................36 Working with Placed Vector Graphics ............................................................38 Working with Placed Raster Graphics ............................................................38 Pasting External Graphics ....................................................................................40 Dragging and Dropping Art ..................................................................................41 Summary ..............................................................................................................43
00 0672323125 FM
vi
4/22/02
12:25 PM
Page vi
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Q&A ......................................................................................................................44 Quiz ......................................................................................................................44 Quiz Answers ........................................................................................................45 Activities ..............................................................................................................45 Hour 3 Setting Type with LiveMotion
47
Basic Typographic Principles ..............................................................................48 Type Categories ..............................................................................................49 Type Width, Weight, Posture, Direction, and Alignment ................................53 Type Size, Tracking, and Leading ..................................................................55 Combining Type Styles and Faces ..................................................................55 Creating Text Objects ..........................................................................................56 Setting a Font ........................................................................................................57 Sizing Type ..........................................................................................................59 Tracking Type ......................................................................................................59 Controlling Leading ..............................................................................................60 Aligning Type ......................................................................................................61 Summary ..............................................................................................................63 Q&A ......................................................................................................................64 Quiz ......................................................................................................................65 Quiz Answers ........................................................................................................65 Activities ..............................................................................................................65 Part II Modifying Objects Hour 4 Combining, Grouping, and Editing Objects
67 69
Understanding Group and Combine ....................................................................70 Grouping Objects ..................................................................................................71 Changing Stacking Order ................................................................................73 Combining Objects ..............................................................................................75 Uniting Objects ................................................................................................75 Uniting Objects with Color ............................................................................76 Creating Shapes Using the Minus Front Feature ............................................76 Working with the Intersect Command ..................................................................77 The Exclude Command ..................................................................................78 Editing Objects ....................................................................................................80 Duplicating Objects ........................................................................................81 Making an Alias ..............................................................................................82 Copying Objects ..............................................................................................83 Cutting Objects ................................................................................................83 Pasting to the Canvas ......................................................................................84 Pasting Special ................................................................................................85 Deleting Objects ..............................................................................................85
00 0672323125 FM
4/22/02
12:25 PM
Page vii
Contents
vii
Undoing What You’ve Done ................................................................................86 Alignment and Distribution ..................................................................................87 Aligning Objects ..............................................................................................88 Distributing Objects ........................................................................................89 Summary ..............................................................................................................90 Q&A ......................................................................................................................91 Quiz ......................................................................................................................91 Quiz Answers ........................................................................................................91 Activities ..............................................................................................................91 Hour 5 Selecting and Transforming Objects
93
Selecting and Deselecting Objects with LiveMotion Tools ................................94 Working with the Selection Tool ....................................................................94 Using the Subgroup Selection Tool ................................................................96 Working with the Drag Selection Tool ............................................................98 Deselecting Objects ........................................................................................99 Moving Objects ....................................................................................................99 Moving an Object with the Drag Method ......................................................99 Using the Arrow Keys ..................................................................................101 Object Positioning with the Transform Palette ............................................102 Resizing Objects ................................................................................................104 Resizing by Dragging ....................................................................................105 Summary ............................................................................................................106 Q&A ....................................................................................................................107 Quiz ....................................................................................................................107 Quiz Answers ......................................................................................................107 Activities ............................................................................................................108 Hour 6 Working with Object Layers
109
All About Layers ................................................................................................110 Using the Object Layers Palette ........................................................................111 Creating Object Layers ..................................................................................112 Selecting and Naming Layers ......................................................................113 Displaying and Hiding Layers ......................................................................115 Duplicating Layers ........................................................................................116 Deleting Layers ............................................................................................117 Arranging Layers ................................................................................................118 Modifying Object Layers with the Layer Palette ..............................................119 Creating Layer Fills ......................................................................................119 Offsetting Layers ..........................................................................................120 Modifying the Width of a Layer ..................................................................121 Adjusting Layer Softness ..............................................................................122 Summary ............................................................................................................123
00 0672323125 FM
viii
4/22/02
12:25 PM
Page viii
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Q&A ....................................................................................................................123 Quiz ....................................................................................................................124 Quiz Answers ......................................................................................................124 Activities ............................................................................................................124 Part III Color, Shape, and Style
125
Hour 7 Using LiveMotion’s Color Tools
127
All About Web Color ..........................................................................................128 General Color Tools and Techniques ..................................................................130 Choosing Foreground and Background Color ..............................................130 Working with the Eyedropper Tool ..............................................................131 Using the Paint Bucket ..................................................................................132 Working with the Color Palette ..........................................................................132 Color Views ..................................................................................................133 Coloring Compositions ..................................................................................134 Tapping into the Power of Color Schemes ........................................................138 Summary ............................................................................................................141 Q&A ....................................................................................................................141 Quiz ....................................................................................................................142 Quiz Answers ......................................................................................................142 Activities ............................................................................................................142 Hour 8 Working with the Library Palette
143
The Importance of Shape ....................................................................................144 Using LiveMotion’s Library Palette ..................................................................145 Applying a Preset Shape ..............................................................................146 Modifying Shapes ..........................................................................................147 Cropping and Replacing Objects with Shape ..............................................151 Adding Custom Shapes to the Library ..............................................................153 Adding an Object Using the New Object Icon ............................................154 Dragging and Dropping an Object to the Library ........................................154 Placing an Object into the Library Folder ....................................................155 Deleting LiveMotion Library Files ....................................................................155 Summary ............................................................................................................156 Q&A ....................................................................................................................157 Quiz ....................................................................................................................157 Quiz Answers ......................................................................................................157 Activities ............................................................................................................157
00 0672323125 FM
4/22/02
12:25 PM
Page ix
Contents
Hour 9 Applying LiveMotion Styles
ix
159
All About LiveMotion Styles ............................................................................160 Exploring the Styles Palette ................................................................................161 Applying Styles to Geometric Objects ..........................................................162 Applying Styles to Text Objects ....................................................................164 Adding Styles to an Image Object ................................................................166 Combining Library Objects and Style ..........................................................167 Combining Numerous Objects and Styles ....................................................167 Adding a Preset Animation ..........................................................................169 Customizing Preset Styles ..................................................................................169 Adding Styles to the Style Palette ......................................................................170 Removing Styles from the Palette ......................................................................172 Summary ............................................................................................................172 Q&A ....................................................................................................................172 Quiz ....................................................................................................................173 Quiz Answers ......................................................................................................173 Activities ............................................................................................................173 Hour 10 Textures, Gradients, Distortion, and Effects
175
Using the Textures Palette ..................................................................................176 Adding Preset Texture ..................................................................................176 Adding New Textures to the Library ............................................................178 Replacing and Deleting Textures ..................................................................179 Applying Gradients ............................................................................................180 Distorting Objects ..............................................................................................182 Working with 3D Effects ....................................................................................184 Using the Adjust Palette ....................................................................................185 Q&A ....................................................................................................................187 Quiz ....................................................................................................................187 Quiz Answers ......................................................................................................187 Activities ............................................................................................................187 Hour 11 Matting and Masks
189
Understanding Mattes ........................................................................................189 Channels and Masks ..........................................................................................190 Alpha Channels in LiveMotion ....................................................................191 Building and Designing with an Alpha Channel ..........................................193 Applying the Active Matte ............................................................................196 Cropping Images ................................................................................................198 Summary ............................................................................................................200 Q&A ....................................................................................................................200 Quiz ....................................................................................................................200
00 0672323125 FM
x
4/22/02
12:25 PM
Page x
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Quiz Answers ......................................................................................................201 Activities ............................................................................................................201 Part IV Creating Images for the Web
203
Hour 12 Designing Static Web Graphics
205
Building Backgrounds ........................................................................................206 Background Wallpaper ..................................................................................206 Margin Backgrounds ....................................................................................208 Watermarks ....................................................................................................210 Working with Logos ..........................................................................................211 Creating Headers ................................................................................................212 Designing Rules ..................................................................................................213 Navigation Buttons ............................................................................................213 Working with Spot Art ........................................................................................215 Summary ............................................................................................................216 Q&A ....................................................................................................................216 Quiz ....................................................................................................................217 Quiz Answers ......................................................................................................217 Activities ............................................................................................................217 Hour 13 Image Mapping and Rollover Techniques
About Remote Objects ........................................................................................234 Designing a Simple Remote Rollover ................................................................235 Creating the Trigger Object ..........................................................................235 Creating the Remote Object ..........................................................................237 Building the Relationship Between Trigger and Remote Objects ................239 Designing a Complex Remote Rollover ............................................................240 Summary ............................................................................................................243 Q&A ....................................................................................................................243 Quiz ....................................................................................................................244
00 0672323125 FM
4/22/02
12:25 PM
Page xi
Contents
xi
Quiz Answers ......................................................................................................244 Activities ............................................................................................................244 Part V Flash SWF Animation and Multimedia Hour 15 Exploring the Timeline
245 247
Animation Fundamentals ....................................................................................247 Exploring the LiveMotion Timeline ..................................................................248 Viewing and Managing Objects and Properties in the Timeline ..................250 Creating and Changing the Duration of Objects ..........................................251 Using Keyframes ..........................................................................................253 Summary ............................................................................................................257 Q&A ....................................................................................................................257 Quiz ....................................................................................................................258 Quiz Answers ......................................................................................................258 Activities ............................................................................................................258 Hour 16 Designing Animations
259
Designing Basic and Looping Animations ........................................................260 Follow the Bouncing Ball ............................................................................260 Star with Effect ..............................................................................................261 Looped Advertising Banner ..........................................................................263 Cell-Based Sequential Animation ......................................................................263 Importing and Sequencing Photoshop Layers ....................................................265 Summary ............................................................................................................267 Q&A ....................................................................................................................267 Quiz ....................................................................................................................268 Quiz Answers ......................................................................................................268 Activities ..........................................................................................................2687 Hour 17 Working with Movie Clips
269
About Movie Clips ............................................................................................270 Making Objects into Movie Clips ................................................................270 Navigating Nested Timelines ........................................................................272 About Movie Clip Groups ..................................................................................274 Grouping Movie Clips ..................................................................................275 Movie Clips and LiveMotion Animation ............................................................276 Adding Animation to Movie Clips ................................................................276 Summary ............................................................................................................281 Q&A ....................................................................................................................281 Quiz ....................................................................................................................282 Quiz Answers ......................................................................................................282 Activities ............................................................................................................282
00 0672323125 FM
xii
4/22/02
12:25 PM
Page xii
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Hour 18 Adding LiveMotion Audio
283
Understanding Audio ..........................................................................................284 Common Audio Formats for Web and Related Use ......................................284 Where to Get Audio ............................................................................................285 Working with Audio in LiveMotion ..................................................................286 Adding Sound to an Object State ..................................................................287 Adding Sound to an Animation ....................................................................288 Adding Audio to the Sounds Palette ..................................................................289 Dragging a File to the Palette ........................................................................289 Adding a File Using the New Sounds Icon ..................................................290 Placing a File in the Sounds Folder ..............................................................290 Deleting Sounds ............................................................................................291 Summary ............................................................................................................291 Q&A ....................................................................................................................291 Quiz ....................................................................................................................292 Quiz Answers ......................................................................................................292 Activities ............................................................................................................292 Hour 19 Creating a Multimedia Presentation
293
About Multimedia ..............................................................................................294 A Concept, a Plan, a Script ................................................................................295 Goal and Vision ............................................................................................295 The Big Picture ..............................................................................................296 Line by Line ..................................................................................................296 Designing Presentation Components ..................................................................299 Production Tips ..................................................................................................300 Summary ............................................................................................................302 Q&A ....................................................................................................................302 Quiz ....................................................................................................................303 Quiz Answers ......................................................................................................303 Activities ............................................................................................................303 Part VI Designing and Optimizing Advanced Web Presentations Hour 20 Professional Applications of LiveMotion
305 307
Planning the Site ................................................................................................308 Web Architecture ..........................................................................................309 The Stuff Sites Are Made Of ........................................................................310 Deconstructing a LiveMotion Web Site ..............................................................311 Designing the Splash Page ............................................................................312 Adding Pages ................................................................................................314 Adding Text Content to Your Pages ..............................................................315 Summary ............................................................................................................317
Export Features and Formats ..............................................................................320 Previewing and Optimizing Your Work ..............................................................321 Exporting Your Designs ......................................................................................323 Exporting a Single Image and Image Map ..................................................323 Exporting Rollovers ......................................................................................325 Exporting Animations and Multimedia ........................................................325 Exporting Complete Web Pages ....................................................................326 Working with LiveMotion’s Generated Code ....................................................327 Summary ............................................................................................................328 Q&A ....................................................................................................................328 Quiz ....................................................................................................................329 Quiz Answers ......................................................................................................329 Activity ..............................................................................................................329 Part VII Advanced Techniques: Scripting Hour 22 Scripting and LiveMotion
331 333
About JavaScript ................................................................................................334 About ActionScript ............................................................................................335 About Automation Scripts and Live Tabs ..........................................................336 Premade Automation Scripts and Live Tabs ................................................337 LiveMotion Scripting Tools Overview ..............................................................340 Script Editor ..................................................................................................340 Script Debugger ............................................................................................341 Preview Tool ..................................................................................................342 Summary ............................................................................................................342 Q&A ....................................................................................................................343 Quiz ....................................................................................................................343 Quiz Answers ......................................................................................................343 Activities ............................................................................................................343 Hour 23 Adding Scripts
345
About the Script Editor ......................................................................................346 Understanding Labels ........................................................................................348 Creating and Modifying Labels ....................................................................348 Understanding Script Keyframes ........................................................................352 Adding and Modifying Script Keyframes in the Timeline ..........................352
00 0672323125 FM
xiv
4/22/02
12:25 PM
Page xiv
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Understanding Event Handlers ..........................................................................355 Working with Event Handlers ......................................................................355 Learning About State Scripts ..............................................................................356 Working with State Scripts ............................................................................356 Summary ............................................................................................................357 Q&A ....................................................................................................................358 Quiz ....................................................................................................................358 Quiz Answers ......................................................................................................358 Activities ............................................................................................................358 Hour 24 Scripting Project
359
Planning and Organizing Your Project ..............................................................360 Preparing the Stage ........................................................................................360 Beginning the Animation ....................................................................................361 Adding and Animating the Title and Background ........................................361 Adding Audio ......................................................................................................364 Selecting and Adding an Audio File ............................................................364 Animating Objects Along a Specified Route ....................................................365 Adding and Animating the Objects ..............................................................365 Adding a Scripted Component ..........................................................................366 The Script ......................................................................................................366 Summary ............................................................................................................367 Q&A ....................................................................................................................368 Quiz ....................................................................................................................368 Quiz Answers ......................................................................................................368 Exercises ............................................................................................................368 Appendix A Learning LiveMotion Features
369
Getting Familiar with LiveMotion Menus ..........................................................369 The Main Menu Bar and Standard Toolbar ..................................................370 The Status Bar ..............................................................................................370 Exploring the Toolbox ........................................................................................371 Working with Palettes ........................................................................................374 The Properties Palette ....................................................................................374 The Transform Palette ..................................................................................378 The Web Palette ............................................................................................378 The Color Palette ..........................................................................................380 The Opacity Palette ......................................................................................381 The Distort Palette ........................................................................................381 The Layer Palette ..........................................................................................382 The Gradient Palette ......................................................................................382 The 3D Palette ..............................................................................................384 The Object Layers Palette ............................................................................384
00 0672323125 FM
4/22/02
12:25 PM
Page xv
Contents
xv
The States Palette ..........................................................................................384 The Styles Palette ..........................................................................................385 The Textures Palette ......................................................................................387 The Library Palette ........................................................................................387 The Sounds Palette ........................................................................................388 The Color Scheme Palette ............................................................................388 The Export Palette ........................................................................................389 Using Context Menus in Windows ....................................................................390 Working with Script Tools ..................................................................................390 The Script Editor ..........................................................................................390 The Script Debugger ....................................................................................391 Appendix B Setting Preferences and Working with the Composition Area
393
Calibrating Your Monitor ....................................................................................394 Setting LiveMotion Preferences ........................................................................396 Opening an Existing File ....................................................................................398 Creating a New File ............................................................................................399 Modifying the Composition Area ......................................................................400 Saving Files to Default LiveMotion Settings ....................................................401 Summary ............................................................................................................402 Appendix C Understanding Web Graphics
403
About Computer Graphics ..................................................................................403 Vector Art ......................................................................................................404 Raster Art ......................................................................................................407 Exploring Common File Types ..........................................................................409 Suitable Web File Formats ..................................................................................410 Graphic Interchange Format (GIF) ....................................................................411 Understanding GIF Compression ..................................................................411 Color Depth ..................................................................................................413 Types of GIFs ................................................................................................414 Joint Experts Photographic Group (JPEG) ........................................................416 JPEG Compression ........................................................................................416 Progressive JPEGs ........................................................................................419 Portable Network Graphics (PNG) ....................................................................419
00 0672323125 FM
4/22/02
12:25 PM
Page xvi
About the Author Coined “one of the greatest digerati” and deemed one of the Top 25 Most Influential Women on the Web, MOLLY E. HOLZSCHLAG leaves little doubt that in the world of Web design and development, she is one of the most vibrant and influential people around. With more than 20 Web development book titles to her credit, Molly is also a popular columnist and feature writer for such diverse publications as Macworld, PCMagazine, IBM developerWorks, WebReview.com and Builder.com. She is an engaging speaker and teacher, appearing regularly at such conferences as Comdex, Internet World, CMP’s WEB shows, and Web Builder. As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. Currently, she is serving as the Associate Editor for Digital Web Magazine. Molly also acts as an advisory board committee member to numerous organizations, including the World Organization of Webmasters. In more academic arenas, Molly teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column “Integrated Design” for Web Techniques Magazine for the last three years of its publication, and she spent a year as Executive Editor of WebReview.com.
00 0672323125 FM
4/22/02
12:25 PM
Page xvii
Dedication To Claire for helping me through.
Acknowledgments There are many people who contributed to this book in significant ways, and so many people who keep me healthy and able. I’d like to thank at least some of them here. From Adobe: Michael Ninness, for being there from the start. Joe Bowden, for always answering my questions no matter how busy he got. From the first edition: Eric Hess, Debbie D’Andrea, Norman Straton. From Sams Publishing: Jennifer Kost, Betsy Brown, Heather Goodell all kept me moving along. Very special thanks to Craig Harris for serving as technical editor on the book. I especially thank Mark Taber for his kindness, trust, and ongoing support. From Waterside Productions: To my wonderful agent and friend David Fugate. Thanks also to the entire enthusiastic Waterside team. Immeasurable thanks to Michael Forkan for helping me edit and update this book from its previous edition. Julie Sullivan provided detailed assistance with book updates and for her input I am grateful. The cartoons and hand-drawn animations in this book were contributed by illustrator, artist, and cartoonist Joe Forkan. For his support and friendship I am grateful. I encourage you to visit him at www.joeforkan.com/. Jenn Kettell provided research and logistical assistance for the first edition. A very special thanks to all of the readers of the first edition of this book who wrote with their support!
00 0672323125 FM
4/22/02
12:25 PM
Page xviii
Tell Us What You Think! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can e-mail or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books better. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and author as well as your name, e-mail address, and phone number. I will carefully review your comments and share them with the author and editors who worked on the book. E-Mail:
Mark Taber Associate Publisher Sams Publishing 800 East 96th Street Indianapolis, IN 46240 USA
Reader Services For more information about this book or another Sams Publishing title, visit our Web site at www.samspublishing.com. Type the ISBN (excluding hyphens) or the title of a book in the Search field to find the page you’re looking for.
01 0672323125 Intro
4/22/02
12:25 PM
Page 1
Introduction LiveMotion 2.0 is an exciting and vibrant Web graphic and animation design product from Adobe. LiveMotion allows designers to work with vector and raster graphics in an easy-to-use environment. Its interface is extremely intuitive, familiar to those who have used related products such as Adobe Illustrator or Photoshop, and makes designing Web graphics and animations not only easy, but a whole lot of fun. Whether you want to create a single graphic, a full Web page, a Flash animation with advanced ActionScript, or complete multimedia presentations, it’s all here in understandable, approachable terms. LiveMotion lets you design once and play anywhere! Offering a wide range of drawing tools, preset textures, styles, and shapes, helpful color management tools, and amazing scripting power, LiveMotion is an excellent choice for both the entry-level and the more advanced designer seeking to streamline workflow and increase productivity. The main goal of this book is to give readers a very strong base from which to build great Web graphics and Flash animations. You’ll learn how LiveMotion works, and how you can use its tools to create attractive, dynamic designs. Along with the lessons in each hour, I’ve provided helpful exercises for you to expand your horizons, as well as a quiz so that you can check how well you’ve absorbed the material. Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours is the perfect starting point for you to get familiar with the product, how it works, and how you can make it work for you.
Who Should Read This Book This book is specifically for first-time users interested in learning LiveMotion. It is a beginning-level book, meaning that you will be guided step-by-step through tasks that teach you what you need to know to become proficient with the many rich tools within LiveMotion 2.0, including the new scripting tools that this exciting program offers. Of course, many people new to a software program are not necessarily new to the concepts which that program embraces. To that end, advanced designers who are accustomed to using Adobe After Effects or similar products, or who have worked extensively with JavaScript and other forms of scripting, may find that this book is better used by them to learn the features rather than the in-depth, more advanced topics surrounding professional animation and scripting techniques.
01 0672323125 Intro
2
4/22/02
12:25 PM
Page 2
Sams Teach Yourself Adobe LiveMotion 2 in 24 Hours
Conventions Used in This Book A Note presents interesting pieces of information related to the surrounding discussion.
A Tip offers advice or teaches an easier way to do something.
A Caution advises you about potential problems and helps you steer clear of disaster.
NEW TERM New Term icons provide clear definitions of new, essential terms. The new term
appears in italic.
You’ll find that each chapter has a series of tasks, with numbered steps that walk you through mastering a feature of LiveMotion. Sometimes the best way to learn is learn by doing, so have fun with the tasks!
02 0672323125 PART 01
4/22/02
12:25 PM
Page 3
PART I Creating LiveMotion Objects Hour 1 Creating Simple Objects 2 Importing Photos and Artwork as Objects 3 Setting Type with LiveMotion
02 0672323125 PART 01
4/22/02
12:25 PM
Page 4
03 0672323125 CH01
4/22/02
12:26 PM
HOUR
Page 5
1
Creating Simple Objects Objet d’art. Object of my affection. Object of desire. Objects are admired and coveted for numerous reasons. You want your LiveMotion objects to be desirable, and to do so, you have to learn what they are, how they are created, and how to enhance them to make them alluring. Objects in LiveMotion are the building blocks of design and composition. They are the individual pieces that you create, import, set, and ultimately alter and enhance to achieve your vision. In this hour, you’ll learn about the following: • Geometric, image, and typographic objects • Drawing and modifying a rectangle • Rounding the corners of a rectangle • Using the Ellipse tool to create a circle • Working with polygons of four sides and more • Using the Pen tool to draw freeform objects Whether you want to create Web graphics that are artistic, personable, or entertaining, the success of your graphics can be only as strong as the
03 0672323125 CH01
4/22/02
12:26 PM
6
Page 6
Hour 1
foundations on which they are built. This hour, you’ll roll up your sleeves and begin working on building that foundation, creating basic objects, and making some simple modifications to the object properties.
Exploring Objects in LiveMotion From a technical point of view, LiveMotion objects are the plotted points of binary information that create a digital image. Objects, in the context of LiveMotion, can be of three types: geometric, typographic, and image. Let’s take a closer look: • Geometric objects—A geometric object is any object created using the drawing tools in LiveMotion. In this hour, you’ll focus on working with geometric objects (see Figure 1.1). • Image objects—Objects in this category are either imported images or a combination of objects created with LiveMotion’s Combine tools (see Figure 1.2). Image objects are raster objects (see Appendix C, “About Web Graphics,” for more information on raster and vector graphics), and they do not have the same modification properties as vector objects, such as geometric and typographic objects created in LiveMotion. • Typographic objects—Also known as text objects, these are any objects created with LiveMotion’s own Type tool (see Figure 1.3). As you draw, set type, select shapes, and import images into LiveMotion, the breadth and scope of your objects’ complexity is compounded to create your final designs. FIGURE 1.1 Basic geometric objects drawn using LiveMotion.
For more information on creating typographic objects, see Hour 3, “Setting Type with LiveMotion.” Image objects are covered in Hour 2, “Importing Photos and Artwork as Objects.” To learn how to combine objects, visit Hour 4, “Combining, Grouping, and Editing Objects.”
03 0672323125 CH01
4/22/02
12:26 PM
Page 7
Creating Simple Objects
FIGURE 1.2 Image objects include graphics imported into LiveMotion.
7
1
FIGURE 1.3 A typographic object sample.
Remember your geometry lessons? You’ll get to revisit them in this hour, because drawn objects in LiveMotion are all geometric. To begin creating geometric objects in LiveMotion, you’ll want to get comfortable using the drawing tools on the toolbox (see Figure 1.4). FIGURE 1.4 A close-up look at the toolbox tools used in this hour. Rectangle Tool Ellipse Tool
Rounded Rectangle Tool Polygon Tool
Drawing an Object—A Simple Rectangle Let’s begin with the Rectangle tool. A rectangle is a four-sided polygon, with each angle at 90 degrees (see Table 1.1, later in this hour).
03 0672323125 CH01
4/22/02
12:26 PM
Page 8
8
Hour 1
You can read more about the Rectangle tool in Appendix A, “Learning LiveMotion Features.”
Task: Drawing a Simple Rectangle To draw a simple rectangle, follow these steps: 1. Create a canvas upon which to work (choose File, New Composition and set your canvas size). I made my canvas 400×400 pixels. 2. Click the Rectangle tool to select it. It appears as though the tool’s button is pressed. 3. Move to the canvas. Click and hold down your mouse button at the upper-left corner of where you want your rectangle to appear. 4. Still holding down the mouse button, drag the cursor until you’re satisfied with the rectangle. 5. Release the mouse button.
If at any time you’d like to change your original canvas size, you can do so by selecting Edit, Composition Settings and resetting the sizing to any size you like.
Your rectangle is now a bona fide LiveMotion object (see Figure 1.5). FIGURE 1.5 I created this rectangle object using the Rectangle tool. Note the anchor points.
Your rectangle will have several small blue boxes around its perimeter. These are anchor points. They can be used to move and alter the shape of the rectangle, which is discussed in the following sections.
03 0672323125 CH01
4/22/02
12:26 PM
Page 9
Creating Simple Objects
Deleting an Object If you’re drawing an object and decide that you want to change your approach, you’ll need to know how to delete the object. Doing so is easy! Simply follow these steps: 1. Click the Selection tool in the toolbox to activate it. 2. Click on the unwanted object to select it. 3. Select Edit, Clear or press the Delete key on your keyboard. The undesirable object disappears.
If you’d rather place the object on the Clipboard than delete it entirely, select Edit, Cut or click Ctrl+X (Windows) or Cmmd+X (Mac). The image is shifted to the Clipboard. You can then paste it into another canvas if you so desire.
Modifying an Object Many modifications can be made to the rectangle, or any other object discussed in this hour. In this section, we’ll look at some immediate ways in which you’ll want to alter your rectangle object; we’ll save the more advanced techniques for later lessons. The options for modification include the following: • Selecting and modifying fill or outline • Transforming location, angle, width, height, and skew factor • Changing the object’s color Each of these options can be performed using palettes, which are a mainstay of the LiveMotion interface. You can learn more about palettes in Appendix A.
Changing Object Fill and Outline By default, a new rectangle created in LiveMotion is filled with the selected foreground color, which you set by selecting Window, Color, and choosing the color you’d like to use. You can choose to keep the fill or change it to an outline. This is done using the Properties palette (Window, Properties).
9
1
03 0672323125 CH01
4/22/02
12:26 PM
10
Page 10
Hour 1
Task: Changing the Fill to Outline To change a filled object to an outlined object, follow these steps: 1. Be sure the rectangle is selected. If you can see the anchor points, it is in fact selected. If not, choose the Selection tool from the toolbox by clicking it, then click on the rectangle or object you are working with. 2. Go to the Properties palette. If you closed it, you’ll need to open it by selecting Window, Properties. 3. The Properties palette is preset to the shape you drew (in this case, a rectangle). You’ll see that the Fill radio button is selected. To switch to an outline, click the Outline radio button (see Figure 1.6). Your rectangle fill updates to an outline (see Figure 1.7). 4. To change the width of the outline, use the Width slider until you like the width of the outline, or enter a number (measured in .25-pixel increments) into the box. Press Enter (Windows) or Return (Mac). The outline width changes to the numeric value of your choice (see Figure 1.8).
Computer monitors don’t display anything below 1 pixel. So you won’t see any increment that is less than 1 full pixel. However, LiveMotion uses this measurement to properly antialias (blur the lines of) your object, resulting in a smooth line.
FIGURE 1.6 The Properties palette, where you can change a shape from filled to outlined.
FIGURE 1.7 The outlined rectangle object.
You can return to the fill at any time by simply clicking the Fill radio button. If you want to save this file for future modification, do so by selecting File, Save to save in native LiveMotion format. For more details on how to save files in other formats, see Hour 21, “Optimizing and Exporting LiveMotion Files.”
03 0672323125 CH01
4/22/02
12:26 PM
Page 11
Creating Simple Objects
FIGURE 1.8 Here, I’ve modified the outline to a thickness of 25.
11
1
If the rectangle is not selected, the Properties palette will not be correctly set to the Rectangle option. To properly select an object, use a selection tool and position it carefully over a visible portion of the object until a gray arrow appears. When that arrow appears, click to select the object. When you have multiple objects, it can be difficult to ensure that you’re selecting the correct object. The trick is to be very careful in the positioning of the selection tool before clicking your mouse.
Making Object Transformations If you want to change the position, size, rotation, and skew factor of your rectangle, you can easily do so using the Transform palette (see Figure 1.9). FIGURE 1.9 The Transform palette, where you can change the location, size, rotation, and skew of a shape on the canvas.
Task: Transforming the Object Position To transform the position of your object, follow these steps: 1. Make sure that your object is selected. Then make sure that the Transform palette is available. If it is not, select Window, Transform. The palette appears. 2. In the X box, use the spin-box arrows to increase or decrease the x-axis location (to the right or to the left). An increase in the number moves the rectangle up the horizontal line (to the right), whereas a decrease shifts it down the horizontal line (to the left). You can also enter a numeric value into the box yourself and then press Enter (Windows) or Return (Mac). The rectangle moves to your desired location (see Figure 1.10). 3. In the Y box, use the spin-box arrows to increase or decrease the y-axis location (up or down). An increase in the number moves the rectangle down the vertical
03 0672323125 CH01
4/22/02
12:26 PM
12
Page 12
Hour 1
line (up), whereas a decrease shifts it up the vertical line (down). Similarly, moving the arrows down moves the object back up along the vertical path. Using a numerical value works similarly—the higher the value, the lower down along the path the object moves, and vice versa (see Figure 1.11).
The 0,0 point in a LiveMotion composition is the upper-left corner. You can see this in action by setting both your X and Y positions to 0. The object will move to the 0,0 point. This is why you increase numbers to move an object down along the vertical path, and decrease numbers to move the object back up along the path.
FIGURE 1.10 Moving the object along the horizon.
FIGURE 1.11 I’ve increased the value of the Y position, which has dropped the object down along the vertical path.
03 0672323125 CH01
4/22/02
12:26 PM
Page 13
Creating Simple Objects
You can continue making transformations to your object. I recommend that you first return your rectangle to a more central location on the canvas so that you have plenty of room to observe the transformations as they occur.
All transformations to drawn objects in LiveMotion occur around the center anchor point. You can always move the center point by clicking and dragging it.
Task: Changing the Width and Height To change the width and height of your rectangle using the Transform palette, perform these steps: 1. Make sure that the object is selected and you can see the anchor points. If the Transform palette is unavailable, select Window, Transform, and it appears. 2. In the Width box, increase the width of the object by pressing the up spin-box arrow. Decrease the width by using the down spin-box arrow. You can also enter a numeric width directly into the box and press Enter (Windows) or Return (Mac), and the modification occurs. 3. In the Height box, increase the height of the rectangle using the up spin-box arrow, and decrease the height using the down spin-box arrow. Or enter a numeric height into the box. Remember to press Enter (Windows) or Return (Mac) to ensure that the height transformation is applied to the object (see Figure 1.12). FIGURE 1.12 The object’s width and height have been increased using the Transform palette.
13
1
03 0672323125 CH01
4/22/02
12:26 PM
14
Page 14
Hour 1
Task: Changing the Rotation Rotation allows you to rotate the entire object along a 360-degree circle. This circle begins at 0 (zero). To rotate the object using the spin-box arrows, follow these steps: 1. Make sure that the object is selected and the Transform palette is in view. 2. Move to the rotation box. You’ll find that if you use the down spin-box arrow, the object rotates to the right. If you use the up spin-box arrow, the object rotates to the left. 3. Enter a numeric value into the box. A negative numeric value rotates the object to the right, whereas a positive value rotates the object to the left.
Task: Using the Rotation Wheel You can also use the rotation wheel. To do so, select your object and perform the following steps: 1. Click and hold down the radius handle within the wheel. 2. To rotate the object to the left, move the handle up. 3. To rotate the object to the right, move the handle down. Figure 1.13 shows a rotated rectangle. FIGURE 1.13 I rotated this rectangle object using the rotation wheel.
Skewing allows you to modify the rectangle along the horizontal or vertical path. Skewing technically changes the rectangle to another type of polygon, such as a parallelogram or trapezoid—or if the rectangle is a square before skewing, it becomes a rhombus.
03 0672323125 CH01
4/22/02
12:26 PM
Page 15
Creating Simple Objects
You can’t skew in two directions. If you skew along the horizontal path, you cannot then skew along the vertical path. If you try to do this, the object resolves to its original position before the new skew path is applied.
Task: Changing the Skew To skew your object with the Transform palette, follow these steps: 1. Make sure that the object is selected and the Transform palette is in view. 2. If you want to apply a horizontal skew, use the spin-box arrows or type a numeric value into the horizontal skew box. If you enter a positive value, say +50, the top of the object shifts to the right, and the bottom shifts to the left. A negative value creates the reverse: the top shifts to the left, and the bottom to the right (see Figure 1.14). 3. To apply a vertical skew, use the spin-box arrow method or enter a number into the vertical skew box. In this case, a positive value skews the right side of the object up along the vertical path, and the left side of the object down the path (see Figure 1.15). A negative value does the opposite, shifting the right side of the object down along the vertical path, and the left side up the path. FIGURE 1.14 Here, I’ve taken a rectangle and changed it geometrically using the horizontal skew.
As you can easily see by working through these exercises, even simple modifications can significantly alter the appearance of your object.
15
1
03 0672323125 CH01
4/22/02
12:26 PM
16
Page 16
Hour 1
To undo a transformation, select Edit, Undo or use the keystroke combination of Ctrl+Z (Windows) or Cmmd+Z (Mac).
FIGURE 1.15 Vertical skewing applied to a rectangle object.
Using the Transformation Tool Although the Transform palette offers precision transformations, for quick application of the same transformations you can use the Transform tool found in the toolbox. To do so, simply select the object to be transformed, then click on the tool to activate it. To rotate the object, grab the upper-right corner and drag to the desired rotation. Adjust height by choosing the bottom center handle, or adjust width by selecting one of the center vertical handles. Resize by clicking on any corner object other than the top right, and move by clicking on the object’s center point.
Changing the Object’s Color Color is a big subject for Web designers, and Hour 7, “Using LiveMotion’s Color Tools,” takes a more exhaustive look at how color works. For now, you’ll at least want to be able to change the color as you practice creating objects. To do this, you use the Color palette (see Figure 1.16). FIGURE 1.16 Use the Color palette to change the object’s color.
03 0672323125 CH01
4/22/02
12:26 PM
Page 17
Creating Simple Objects
17
Task: Changing the Foreground Color To change the object’s color using the Color palette, perform the following steps: 1. Make sure that the object is selected and the Color palette is available. If it’s not, choose Window, Color. The palette appears with the default RGB view. 2. Click the foreground swatch to make sure that it is active. 3. Pass your cursor over the color field at the bottom of the RGB view. The cursor changes to an Eyedropper tool. You can now select the color you like by clicking your mouse to fill the object. 4. You can use the RGB sliders to refine your color selection. Figure 1.17 shows the object after I’ve selected a new color fill. FIGURE 1.17 Filling the object with a new color using the Color palette.
While in the Color palette, if you hold down the mouse button while filling the Eyedropper with color, you can move the mouse around to try out various colors. The Eyedropper picks whatever color it passes over and instantly updates the object’s fill color. You may also change color views by clicking the palette’s selection arrow (found at the upper-right corner of the palette).
Creating a Rounded Rectangle If you’re anything like me, you can enjoy sharp edges and corners for only so long! One way to soften rigid lines in a design is to use a rounded rectangle. LiveMotion offers a Rounded Rectangle tool (refer to Figure 1.4) to do just this.
1
03 0672323125 CH01
4/22/02
12:26 PM
18
Page 18
Hour 1
Mathematically speaking, there’s no such thing as a rounded rectangle! After all, the true definition of a rectangle states that the angles must all be 90 degrees. However, because LiveMotion calls this shape a rounded rectangle, we will too.
Task: Creating a Rounded Rectangle To create a rounded rectangle, follow these steps: 1. Begin with a fresh canvas. Once again, I decided to create one with the dimensions of 400×400 pixels. 2. Select the Rounded Rectangle tool from the toolbox. To do this, simply click the tool. 3. Move to the canvas. Click and hold down your mouse button at the point where you want to begin your new object. 4. Drag the cursor until you’ve created a rounded rectangle that you like (see Figure 1.18). FIGURE 1.18 Creating a rounded rectangle using the Rounded Rectangle tool.
Task: Changing the Rounded Edge You’ll be interested to know that you have the additional option of increasing or decreasing the radius of the rounded edge of your object. To do so, follow these steps: 1. With your rounded rectangle object selected, activate the Properties palette. 2. Below the Width slider, there now appears a Radius slider and associated numericvalue spin box. 3. To modify the edge radius with the slider, simply move the slider handle to the right to increase the radius, and to the left to decrease it. 4. You can also increase the curve by clicking the up arrow in the radius spin box, and decrease the curve by clicking the down arrow, until you are satisfied with the results. 5. To change the depth numerically, enter the number into the box. A value of 0 creates a hard edge; each number above that increases the curve. Be sure to press
03 0672323125 CH01
4/22/02
12:26 PM
Page 19
Creating Simple Objects
Enter (Windows) or Return (Mac) to ensure that the changes are applied to your object. Figure 1.19 shows two rounded rectangle objects. The one on the left has a slight radius modification, whereas the one on the right has a more dramatic radius. FIGURE 1.19 Two rounded rectangle objects. The example on the left has a lower numeric radius than the one on the right.
If you want to modify your object’s color or transform its position, width, height, rotation, or skew factor, you can do so using the same basic options covered earlier in this hour.
Using the Ellipse Tool Ellipse is a term used to describe circles and ovals—any collection of points in a plane that are gathered in a closed curve formation around a central point. In LiveMotion, you create ellipses using the Ellipse tool (refer to Figure 1.4).
Task: Drawing a Circle As with the rectangle and rounded rectangle, drawing a circular object involves a few simple steps, as detailed here: 1. Begin working on a new canvas. Set the size to 400×400 pixels. 2. Choose the Ellipse tool from the toolbox by clicking its icon. 3. Click and hold down your mouse button on the starting point of the circle. 4. Drag the mouse in any direction until you have the circle that suits your tastes (see Figure 1.20).
Want to make a perfect circle? Press the Shift key and hold it down while drawing the circle. This keeps the dimensions of the circle even. This trick works with the Rectangle and Rounded Rectangle tools as well!
19
1
03 0672323125 CH01
4/22/02
12:26 PM
20
Page 20
Hour 1
FIGURE 1.20 I made this circle using the Ellipse tool. I held down the Shift key as I drew the circle to keep it perfectly rounded.
Your circle is now ready to be modified using any of the techniques covered so far.
Working with Polygons People are like polygons—they’re really many sided. People have a personal side, a professional side, a formal side, and a relaxed side. Some have more sides than others! This diversity can make for interesting personalities indeed. Technically, a polygon is a closed figure made up of line segments that join together. This means that polygons have multiple sides, are made up of straight lines, and join at the termination of the line segments (this joining is known as the vertex). No intersecting lines can be between the segments (see Figure 1.21).
NEW TERM
FIGURE 1.21 On the right is a polygon; on the left is a shape that is not a polygon because the intersection occurs in the middle of a line segment.
There are two primary types of polygons: regular and irregular. A regular polygon is made up of line segments that are all the same length, whereas an irregular polygon has at least one line segment that is of a different length than the others in it. A polygon contains at least 3 line segments and as many as 10. Table 1.1 shows the names and descriptions of a selection of polygon types.
03 0672323125 CH01
4/22/02
12:26 PM
Page 21
Creating Simple Objects
TABLE 1.1
21
Basic Polygon Types and Their Descriptions
Name of Polygon
Description
Triangle
A 3-sided polygon (has numerous subtypes including equilateral, isosceles, and right)
Quadrilateral
A 4-sided polygon (has a range of subtypes including rectangles and squares)
Pentagon
A 5-sided polygon
Hexagon
A 6-sided polygon
Heptagon
A 7-sided polygon
Octagon
An 8-sided polygon
Nonagon
A 9-sided polygon
Decagon
A 10-sided polygon
I like polygons because they are interesting shapes. They depart from the rigidity of the rectangle and the predictability of the circle. LiveMotion allows you to draw all kinds of polygons.
LiveMotion polygons with an odd number of sides are irregular polygons.
Creating a Four-Sided Polygon Object Let’s begin by creating a diamond shape. You do this using the Polygon tool, which by default is set to four sides (a quadrangle).
Task: Creating a Four-Sided Object To create a four-sided object, follow these steps: 1. As usual, begin with a clean slate. Create a new 400×400 pixel canvas on which to create your object. 2. Click the Polygon tool (refer to Figure 1.4) to select it. 3. Move to your composition area. Click and hold down your mouse button at the point where you want to begin drawing. 4. Drag the mouse until you have a diamond shape that you like. Figure 1.22 shows my polygon within the composite area.
1
03 0672323125 CH01
4/22/02
12:26 PM
22
Page 22
Hour 1
FIGURE 1.22 Diamonds are a girl’s best friend! I drew mine using the Polygon tool.
Adding Sides to a Polygon Object Let’s create a few more polygon shapes, this time changing the number of sides the polygon has.
Task: Altering the Number of Sides The number of sides of a polygon can be modified using the Properties palette, as shown here: 1. With the diamond-shape object you created in the preceding exercise open and selected, move to the Properties palette. 2. The palette has the Polygon selected from the drop-down menu. At the bottom of the palette, you’ll see the Sides slider. 3. To change the number of sides using the slider, grab the handle of the Sides slider and move it to the right until your polygon has a total of seven sides (a heptagon). If you prefer to use the arrows or type the numeric value into the Side spin box, you may do so by clicking the up arrow or entering the number 7 into the box and pressing the Enter (Windows) or Return (Mac) key. You now have a seven-sided shape (see Figure 1.23). 4. To change the number again, use the slider or the spin-box arrows, or type in a numeric value. This time, set it to 10, making a decagon (see Figure 1.23). Your many-sided geometric object is now available for additional changes and modifications.
To keep your basic objects available for future exercises, save them using the Save As option described in Appendix B, “Setting Preferences and Working with the Composition Area.” I like to keep my exercises in a single location, usually on a ZIP disk or CD for easy access and organization, and to ensure that I have an archive of my progress.
03 0672323125 CH01
4/22/02
12:26 PM
Page 23
Creating Simple Objects
FIGURE 1.23 Here are samples of 7and 10-sided polygons made by modifying a polygon object using the Transform palette.
1
Drawing Free-Form Objects Using the Pen Tool The Pen tool can be used to draw free-form objects including straight lines and curves. The Pen tool works by using anchor points, direction lines, and direction points (see Figure 1.24). Drawing with vector pens can take practice! FIGURE 1.24 Using the Pen tool to draw a free-form shape.
23
Direction line
Anchor point
Direction point
The following exercises will help you with the basics. To draw a straight line, follow these steps: 1. Create a new canvas and select the Pen tool. 2. Find the point on the canvas where you’d like the line to begin. Click your mouse. This creates an anchor point. 3. Find the point where you’d like your line to end. Click your mouse.
03 0672323125 CH01
4/22/02
12:26 PM
24
Page 24
Hour 1
LiveMotion fills the line between the two points. You can complete the line (referred to as a path) by clicking on the Pen tool or selecting another tool, or you can continue adding line segments.
Shift+click to constrain the tool to segments to 45-degree angles.
To create a curved path, do the following: 1. Select the Pen tool, and position it where you’d like to begin your path. 2. Hold the mouse down and drag in the direction of the curve you’d like to create. You’ll notice that two direction points begin to appear, pulling in opposite directions. Release the mouse. 3. Find the point where you’d like the curve to resolve. Click the mouse. 4. LiveMotion fills in the curve. Click the Pen tool or select another tool to complete the path.
To change the curve of the path, click the Pen Selection tool from the toolbox. Click and drag on a direction or anchor point to make your desired modifications to the path.
Summary Believe it or not, you’ve done a lot of important groundwork in this hour! Not only have you learned what objects are and what kinds of objects are available to you in LiveMotion, but you’ve also learned how to draw the three basic shapes (rectangle, ellipse, and polygon) available within the application. As if that weren’t enough to help you quickly gain some skills using the application, you’ve also learned to work with the Properties, Transform, and Color palettes to make common modifications to your shapes. You’ve learned to alter position, rotation, width, and skew; change color; and modify individual shape appearances. The skills you’ve gained here will be used in upcoming hours to create and manipulate objects within a composition. Naturally, your work will become more detailed in action and design, but the foundations have been firmly put into place.
03 0672323125 CH01
4/22/02
12:26 PM
Page 25
Creating Simple Objects
Q&A Q When I go to work on my object in a palette, the options are all grayed out. What’s wrong? A If the options on a given palette are not available, it’s likely that you have forgotten to select the object. Q Can’t I change the width and height of my object by pulling on the anchor points? A Absolutely! This is covered in detail in Hour 5, “Selecting and Transforming Objects.” However, you have more precise control when you use the Transform palette. Q How can I easily create a shape that has a specific size? A The Width and Height options in the Transform palette allow you to enter specific measurements of your object, in pixels. Another alternative is to be sure that your rulers are turned on (see Appendix B) and use the snap-to grid system when drawing your shape.
Quiz 1. How is a rectangle different from a rounded rectangle? 2. If you wanted to make a triangle, which tool would you use? 3. What’s the smallest number of sides available in a polygon? The largest number?
Quiz Answers 1. A rectangle has 90-degree corners, whereas a rounded rectangle has curved edges. 2. You can use the Polygon tool and set it to three sides. This creates a triangle. You can then modify the triangle type using the Properties and Transform palettes. 3. A triangle is made up of 3 sides. A decagon is made up of 10. LiveMotion allows you to create all polygon types within this numeric range.
Activities Use the following activities to strengthen your basic drawing techniques: 1. Create an oval shape with an orange fill. Skew the shape and center it within your composition area.
25
1
03 0672323125 CH01
26
4/22/02
12:26 PM
Page 26
Hour 1
2. Select a green color and then create a triangle. Make the triangle an outline, not a fill. 3. Create a nine-sided polygon with a black outline set to 20 pixels (remember that the outline is measured in .25 pixels!).
04 0672323125 CH02
4/22/02
12:27 PM
HOUR
Page 27
2
Importing Photos and Artwork as Objects Photos, illustrations, and clip art bring designs to life. On the Web, these kinds of images add personality and dimension to design. Using them well ensures that your visual presentation is interesting, unique, and pleasing to the eye. In Hour 1, “Creating Simple Objects,” you learned about the three types of objects in LiveMotion—geometric, typographic, and image. You also learned how to create and modify geometric objects within LiveMotion. The lessons you learned in Hour 1 will help you understand many of the concepts and work through the lessons in this hour. The digital data in an image object is different and demands a bit more study than geometric objects, but the fact remains that you are working with an object, albeit a different type. Instead of creating objects within the LiveMotion arena, you’ll now focus on bringing art into LiveMotion from the outside. This includes photos or elements you have scanned, hand drawings, and stock art.
04 0672323125 CH02
4/22/02
12:27 PM
Page 28
28
Hour 2
In this hour, you’ll learn about the following: • What image objects are and how to get them • Scanning photos, art, and organic objects to use in LiveMotion • Placing graphic files • Cutting, copying, and pasting from other programs • Dragging and dropping art By the end of this hour, you’ll have learned what image objects are. You’ll have learned also how to find them, ensure that they are scan-ready, and bring them into the LiveMotion program to integrate them into your compositions.
Understanding Image Objects In this hour, you’ll examine how vector and raster graphics differ in terms of the way they can be modified in LiveMotion. I’ll also provide an overview as to how photos, illustrations, and clip art can be generated, and where they can be found. As you progress through the hour, you’ll learn to work with these objects in greater detail.
To learn more about Web graphic formats and technology, see Appendix C, “About Web Graphics.”
Vector Objects in LiveMotion First, knowing the difference between vector and raster graphics is paramount to understanding how art will behave after you bring it into LiveMotion. Because vector art is based on mathematical logic, it retains its object-oriented information. LiveMotion is an object-oriented program, which means that it can interpret the mathematical data retained in any vector graphic. So if you bring a graphic with all its vector data into LiveMotion, you can then take advantage of the way vectors are calculated and recalculated. In turn, this means that a vector design can be modified in some way—made larger, for example—without loss of quality. The vectors are simply recalculated to manage the change in size and contain the modified amount of digital information necessary to retain the integrity of the illustration (see Figure 2.1).
04 0672323125 CH02
4/22/02
12:27 PM
Page 29
Importing Photos and Artwork as Objects
FIGURE 2.1 The illustration on the left was created in Adobe Illustrator and saved to native format, vectors intact. On the right, I enlarged it in LiveMotion. Because of the vector data, the image integrity remained intact.
29
2
Vector graphics are created and saved in an object-oriented illustration program. Two common examples of vector illustration programs are Adobe Illustrator and Macromedia Freehand. Many other object-oriented drawing programs are available, including LiveMotion itself.
To retain vector information, illustrations created in an object-oriented drawing application such as Adobe Illustrator must be saved to EPS or native Illustrator (AI) format. If you export to another graphic format (such as GIF or JPEG), you are discarding the vector data. The end result is a raster, not a vector, graphic.
Later in this hour (see “Working with Placed Vector Graphics”), you’ll work step-by-step to bring vector graphics into LiveMotion as objects.
Raster Graphics as Objects Raster graphics are bitmapped. This means that their digital information is mapped to specific dots, or pixels, within a specific area. Raster graphics are extremely important in design, and specifically in Web design. They are the building blocks of most static Web graphics and of many dynamic or animated graphics as well (although some animations, as you’ll learn in later hours, are vectorbased). Because vector graphics can be created only in specialty illustration programs, anything you scan and paint will be a raster graphic. Furthermore, most stock clip art and photos are saved to raster formats such as GIF, JPEG, or TIFF.
04 0672323125 CH02
4/22/02
12:27 PM
30
Page 30
Hour 2
Some professional stock art companies offer stock clips in vector format. See “Finding Sources for Stock Art and Photos,” later in this hour, for more information.
Because most art that you create or obtain will be in raster format, you’ll have less opportunity to modify the shape and dimension of that art. This is especially true when you attempt to increase a raster graphic from its original size (see Figure 2.2). FIGURE 2.2 A raster image loses its integrity when resized.
Knowing the format you are working with and keeping its strengths and limitations in mind will help you ensure that your Web images look their best.
Getting the Graphic Goods Image objects can be obtained for use in LiveMotion in two primary ways: They can be collected or purchased from a stock (commercial) source, or they can be created or imported from an original source. Stock art and photography are illustrations (commonly referred to as “clip” art) and photos that you obtain from some common source. You can find many resources for stock art and photography, especially on the Web. Original material refers to any photo, illustration, or digital artwork that you yourself create or scan. This can include photos you took on vacation, or those specifically taken for the purpose of a given design. Or perhaps you are an artist, or know an artist, and have hand-drawn art to scan and incorporate into a composition. If you are a professional graphic designer or an avid digital design hobbyist, you’ve probably used illustration software to create designs. The details on scanning and importing original materials are discussed in just a bit. First, let’s take a closer look at resources for stock art and photos.
04 0672323125 CH02
4/22/02
12:27 PM
Page 31
Importing Photos and Artwork as Objects
31
Finding Sources for Stock Art and Photos The Web is rich with resources for obtaining stock art and photos for use in your designs. Some art can be obtained free, some you can get for a modest fee, and some art—especially high-end, specialty art and photography—can be expensive.
Royalty-Based and Royalty-Free Art There are several classes of stock art, including royalty-based and royalty-free. Royalty-based art must be paid for on a per-use basis. So if you print, circulate, or broadcast to 100 people using that art, you have to pay a price for each of the individual 100 uses. Royalty-free art is paid for once to be used for one specific purpose. In this case, you pay one time to use an image on your Web site, no matter how many people visit. However, if you use the image for a different purpose, you’ll probably have to pay for it again.
Be sure to read your user license for details about how you can legally use any stock art you’ve obtained through commercial channels.
Some of my favorite sources for stock art are listed here: •
www.arttoday.com—ArtToday
is a great source for clip art, photos, and fonts with a strong emphasis on Web-related products. The quality is average-to-good, but the selection is extremely wide. From free art to a subscription-based price for a full year of downloads, joining ArtToday is a great way to get a lot of art for your compositions.
•
www.clipart.com—Clipart.com
•
www.desktoppublishing.com—desktopPublishing.com is a site I absolutely love. It’s sort of a portal to a range of graphic and Web design resources with many links to clip art and photos.
•
www.eyewire.com—EyeWire
•
www.gettyimages.com—This
is a portal-style resource of free and low-cost clip art and Web graphics from all around the Web.
is a fun and often trend-making professional site for clip art and photos at professional pricing. Note that you can get vector clip art here. EyeWire also publishes a great print magazine that helps keep you apprised of what’s new (see Figure 2.3).
is the ultimate stock photography site for professionals. It offers excellent quality and huge selection.
2
04 0672323125 CH02
4/22/02
12:27 PM
Page 32
32
Hour 2
•
www.tonystone.com—Tony
Stone Images is a high-end stock photo resource offering stunning work by noted contemporary photographers. Average price per photo is about $495 (U.S.). This site is geared toward the serious designer.
FIGURE 2.3 EyeWire is a fantastic source for stock art and photos.
If you’re just starting out with LiveMotion, it’s probably a good idea to stick with free or moderately priced art. You can graduate to the higher-ticket items when producing professional output. Of course, many readers will already be working to achieve expert results. You will likely want to select from those companies offering the highest quality stock goods and services.
You may also want to check out clip art and photo galleries that are available at a low cost at local stores such as Office Depot and Sam’s Club. These are typically lower in quality but inexpensive, allowing you to use images on a royalty-free basis. It’s a great way to practice and in some cases create good compositions using image objects in LiveMotion.
It has often been said that the tools don’t make the artist. Although I believe this to be true, I also believe in the familiar acronym “GIGO,” or Garbage In, Garbage Out. This
04 0672323125 CH02
4/22/02
12:27 PM
Page 33
Importing Photos and Artwork as Objects
33
is a not-so-nice way of saying that if you begin with low quality, you’ll end up with low quality. Certainly, the lower quality images will demand more of your skill and attention for professional results. Ultimately, the choices you make should be driven by what your client, audience, and pocketbook dictate.
Scanning Art, Photos, and Organic Objects Let’s shift the focus from stock art and photography to original art. Scanners and digital devices such as digital still and video cameras are an excellent way of getting original art. Any art or photography that has been created in hard copy will need to be transferred to digital form, and this normally happens by use of a scanner in combination with Photoshop or another image editing program. Whereas LiveMotion 1.0 allowed users to scan directly into the application, LiveMotion 2.0 does not support importing via a scanner.
Refer to your user manuals for information on how to transfer digital images to your computer using a scanner or digital device. Then see the “Placing Graphic Files” section, later this hour, to learn how to bring these images into LiveMotion.
NEW TERM Source material refers to the items you’re attempting to scan.
Your source materials typically will be of the following types: • Art—This is drawn art and illustrations (see Figure 2.4). • Photos—Any photograph can be scanned into Photoshop and then placed into LiveMotion as an image object (see Figure 2.5). Or you can use a digital device such as a digital camera. • Organic objects—This is a fancy way of saying “real stuff.” In other words, you can scan real-life elements, such as a flower, bottle, or book (see Figure 2.6).
You can check out more of Joe Forkan’s illustrations in Hour 16, “Designing Animations.” Visit his Web site at www.joeforkan.com.
2
04 0672323125 CH02
4/22/02
12:27 PM
34
Page 34
Hour 2
FIGURE 2.4 This cartoon figure was drawn by artist Joe Forkan and scanned into LiveMotion.
FIGURE 2.5 Here’s a photograph of fellow author and Web designer Matt Straznitskas and me, which I scanned using Photoshop’s TWAIN interface. FIGURE 2.6 What’s on your desk? Here’s some of what’s on mine, scanned into LiveMotion.
Be creative with your organic designs. Look around the real world and use objects to inspire your LiveMotion compositions. This can make for refreshing and unusual designs.
Photos should be clear, clean, and of the highest quality possible. Hand-drawn or printed materials should also be very clean—look carefully for specks of dust. You should clean up anything that you can before you scan. You can clean off elements that will be
04 0672323125 CH02
4/22/02
12:27 PM
Page 35
Importing Photos and Artwork as Objects
35
scanned using compressed air, available at any computer or art supply store. Also, be certain that your scanner surface is clean. Follow the directions supplied by your scanner manufacturer to ensure that your scanner bed is free of dust and debris.
Importing Your Art After you’ve prepped your art or photos, or found objects for scanning, you’ll want to scan them into an image program such as Photoshop, using the Import feature. Alternatively, you can use your scanner’s imaging software (or other software) to capture your image. Your scanner must offer a Photoshop-compatible plug-in or TWAIN-compatible interfaces to make use of Photoshop’s Import feature. (TWAIN is a cross-platform interface used to manage digital image captures from scanners, cameras, and other devices.) Otherwise, you’ll need to scan the element, save it using your scanner’s own software, and then place it into LiveMotion using the Place command (see “Placing Graphic Files,” later in this hour).
Not every reader will have Photoshop installed, or will have a scanner or digital device such as a digital camera. The following information is useful to those who do. If you have a scanner but don’t yet have Photoshop, perhaps you have another imaging program available, such as Paint Shop Pro. If so, the basic principles described here apply.
Task: Scanning for the First Time To set up Photoshop to scan an object for the first time, follow these steps: 1. Select File, Import to view the submenu. 2. Choose Select TWAIN_32 Source (Windows) or TWAIN-Select Source (Mac). A dialog with available TWAIN interfaces appears. If no options appear in the box, you do not have your scanner and related software set up. You’ll need to check with the scanner documentation to ensure that you’ve installed all related hardware and software properly. 3. Highlight the option and click Select. The scanner is entered into the list. You need to go through this setup process only the first time you use your scanner with Photoshop. If you have more than one scanning interface installed and you want to switch from one available interface to another, use this sequence to switch interfaces.
2
04 0672323125 CH02
4/22/02
12:27 PM
Page 36
36
Hour 2
Task: Importing the Elements After you’ve set up your scanning device, you can import the elements by following these steps: 1. Select File, Import. 2. Choose File, TWAIN_32 from the Import submenu. 3. The TWAIN interface appears. Follow the directions in the interface (they vary.) to modify the way in which your object is scanned. 4. The object is scanned, and it appears on a canvas within the program. 5. Modify the image as you see fit, and then save it to your preferred file format. You can save your scan in virtually any format supported by LiveMotion so that when you’re ready to place the image into LiveMotion, it will be a correct file type.
Scanning Resolution Graphics for the Web should always end up at 72 dpi (dots per inch; see Appendix C). This is low resolution, but remember that you don’t need high resolution to make an image look great on a computer screen. Whether you choose to scan at 72 dpi or scan at a higher resolution, such as 300 dpi, and then reduce to 72 dpi is really a personal call. I’ve noticed that it’s sometimes possible to get better results by scanning at 300 dpi and then reducing to 72 dpi later. On other occasions, this doesn’t hold true. The difference in quality is slight—the type of difference that normally won’t be seen when a figure is optimized for the Web. The one advantage to scanning at a higher resolution is that you have a larger file with more data, offering you a broader range of sizes (remember, these are raster graphics.). Ultimately, you will have to develop your own eye and determine what works best with your scanner and material. No matter what resolution you start with, the end resolution when you finally export your graphic for the Web (see Hour 21, “Optimizing and Exporting LiveMotion Files”) should be 72 dpi.
Placing Graphic Files Bringing external files into LiveMotion is not difficult. To do so, you use the Place command, as you’ll see in a moment. But what is more at issue is working with the file type after it is placed into the LiveMotion composition area.
04 0672323125 CH02
4/22/02
12:27 PM
Page 37
Importing Photos and Artwork as Objects
37
Task: Placing a File To place a file, follow these steps: 1. Create a canvas of any size. I usually like to make sure that the canvas is larger than the image I’m placing so that I have room to work. I usually find my image’s original dimensions by looking in my photo editing program. In Photoshop, you can find this information by selecting Image, Size. 2. Select File, Place. You can also use the keystroke combination of Ctrl+I (Windows) or Cmmd+I (Mac). The Place dialog appears (see Figure 2.7). 3. Locate the file you want to place and select it. Supported formats include AI, BMP, EPS, GIF, JPEG, PICT, PCX, PNG, PSD, and TIFF (see Appendix C for details on these file types). 4. Click Open (Windows). The file loads into LiveMotion (see Figure 2.8). The file is placed onto a LiveMotion canvas as an object. You are now ready to make modifications to the file. FIGURE 2.7 Use the Place dialog to place a file in LiveMotion.
FIGURE 2.8 Placing a file into LiveMotion’s composition area.
2
04 0672323125 CH02
38
4/22/02
12:27 PM
Page 38
Hour 2
Notice that the file has retained its dimensions. In other words, if the file you imported was 50×50 pixels when it was saved, it is placed onto the canvas with those dimensions intact. The canvas, however, is the size you chose when starting the Place process.
Understanding the difference between vector and raster graphics is imperative at this stage of the game because vector and raster graphics behave differently after they have been placed in LiveMotion.
If you’re still unclear about how vector and raster graphics differ, refer to Appendix C.
Working with Placed Vector Graphics If you’ve placed a vector graphic into LiveMotion as an object, it retains its vector qualities. This means that you can make some modifications to it and retain the integrity of the design.
Task: Modifying a Placed Vector Graphic To see how this works, follow these steps: 1. Create a free-form drawing in a vector-based program and save to vector format, such as EPS. If you don’t have a vector drawing program other than LiveMotion, draw a geometric object in LiveMotion (see Hour 1, “Creating Simple Objects”) and save it in native LiveMotion format. 2. In LiveMotion, select File, Place. 3. Choose the file you just created. It is placed into LiveMotion. 4. Select the Transform palette and significantly increase the size of the object (see Figure 2.9). If you examine the object closely, you’ll see that its lines are smooth and the size increase has been rendered without difficulty.
Working with Placed Raster Graphics Raster graphics do not retain the mathematical information that vector graphics do. So if you’re placing a rasterized graphic as an object into LiveMotion, you are more limited in terms of what you can do with it.
04 0672323125 CH02
4/22/02
12:27 PM
Page 39
Importing Photos and Artwork as Objects
39
FIGURE 2.9 I’ve resized this vector graphic. Note how it has retained its quality.
2 Task: Modifying a Placed Raster Graphic Try another experiment: 1. Find or create a raster graphic. I saved the vector drawing I did as a GIF. 2. In LiveMotion, select File, Place. 3. Find the raster file and place it onto the canvas. 4. Select the Transform palette and increase the size of the object (see Figure 2.10). See how the object has significantly degraded in quality? This is due to the bitmapped nature of the raster graphic. FIGURE 2.10 The raster graphic has lost its integrity when resized. Note the increase in jagged edges.
Does this mean that you cannot modify raster graphics? Not at all. You can apply any kind of special effects to them and manipulate them in LiveMotion as you see fit. Raster graphics are wonderful for photos, blurs, soft-edged shadows, textures, and special effects. However, bear in mind that if you try to scale or resize a raster graphic in any way, you will lose the integrity of the graphic.
04 0672323125 CH02
4/22/02
12:27 PM
Page 40
40
Hour 2
Pasting External Graphics Another handy method of bringing external graphics into LiveMotion is to simply copy (or cut) and paste them. This makes life easy, particularly if you like to multitask and use a number of graphic programs as you create your designs. Say that you’re working on color correcting a photograph in Photoshop. You then want to bring it into LiveMotion to add a special effect. You can do this by simply cutting or copying and then pasting the file into LiveMotion.
Task: Pasting a Graphic To copy (or cut) and paste, follow these steps: 1. In the other program (Photoshop, for example), select what you want to copy (or cut) to LiveMotion (see Figure 2.11). 2. Choose Edit, Copy,or use the keystroke Ctrl+C (Windows) or Cmmd+C (Mac). Alternatively, choose Edit, Cut or use the keystroke combination Ctrl+X (Windows) or Cmmd+X (Mac) to cut the object. This puts the selection on the Clipboard. 3. Switch to LiveMotion. With the canvas where you want to paste the image open, select Edit, Paste, or use the keystroke combination Ctrl+V (Windows) or Cmmd+V (Mac). Your image is now pasted into LiveMotion, where you can integrate it into your composition and make modifications to it.
Copy (or Cut) and Paste is not limited to graphic files. You can use this process to import text as an object. Try copying and pasting from a Rich Text Format (RTF) file or an ASCII (plain text) file. Figure 2.12 shows the results.
Cutting a selection removes that selection from the original file if you save the changes to the file. If you want to keep the source file intact, use the copy method, or be absolutely certain that you do not save the changes to the file on exiting the source program.
04 0672323125 CH02
4/22/02
12:27 PM
Page 41
Importing Photos and Artwork as Objects
41
FIGURE 2.11 Copying a photo in Photoshop.
2
FIGURE 2.12 This text was copied from Windows Notepad and pasted into LiveMotion.
Dragging and Dropping Art Many people like dragging and dropping files to and from other applications, to and from the desktop, or to and from compositions within LiveMotion itself. With LiveMotion, you can perform all these tasks.
04 0672323125 CH02
4/22/02
12:27 PM
Page 42
42
Hour 2
Task: Moving Between Applications Say that you want to take an image object you’ve been working on in LiveMotion and move it to Photoshop for color correction. With both applications open, and a new canvas at the ready in the receiving application, follow these steps: 1. Choose the Selection tool from the LiveMotion toolbox (It looks like a black mouse pointer arrow). 2. Click and hold down your mouse button on the image object. 3. Drag the image to another application (in this example, Photoshop). 4. Drop the image. The image is now ready for manipulation in Photoshop. When you’re finished working in the outside application and want to move the changed image back to LiveMotion, you can do so using drag and drop. Just follow these steps: 1. Select the image you want to move back to LiveMotion (be sure you’re selecting from the appropriate document layer in Photoshop or Illustrator). 2. Click and hold down your mouse button over the image. 3. Drag the image to LiveMotion. 4. Drop the image into the application workspace. You’re now ready to get back to work in LiveMotion.
Task: Moving Within LiveMotion Often, you will want to take an object and move it to another composition window. Whether this is simply to remove the object from the composition but keep it accessible as you work, or to determine whether you want to keep it and use it for another composition, knowing how to drag and drop between composition windows is helpful. To drag an object from one composition window to another, follow these steps: 1. With the composition containing the object open in LiveMotion, create a new canvas. 2. Select the object to be transferred, and while holding down your mouse button, drag it to the new canvas. 3. Drop the object onto the new canvas (see Figure 2.13).
04 0672323125 CH02
4/22/02
12:27 PM
Page 43
Importing Photos and Artwork as Objects
43
To undo this, or any action, click Ctrl+Z (Windows) or Cmmd+Z (Mac).
To move the object back, reverse the process. FIGURE 2.13 The dragged and dropped object open in a new canvas.
2
Save the new composition to ensure that you won’t lose your work.
Summary In this hour, you’ve studied image objects in detail. You’ve explored what kinds of image objects exist, as well as how to import original work using a scanner. You’ve also been supplied with some great Web sites where you can find downloadable clip art and photography. The remainder of the hour was spent working with bringing images into and out of LiveMotion and determining the ways in which vector and raster graphics can be modified.
04 0672323125 CH02
4/22/02
44
12:27 PM
Page 44
Hour 2
At this point, you not only have covered the foundations of LiveMotion but also have learned how to work with two of the main components necessary to create great designs: geometric objects and image objects. In the following hour, you’ll learn about the third main component in LiveMotion: the typographic object.
Q&A Q I downloaded a photo in GIF format and brought it into LiveMotion. I want to make it larger, but it keeps getting blurry. How can I fix this? A Unless you can get an uncompressed or larger version of the file, you won’t be able to make it larger without this loss in quality. GIF files are bitmapped (raster) graphics and do not contain the mathematical information that enables you to make them larger without loss of integrity. Q I’m trying to place a graphic into LiveMotion, but I keep getting an error saying that this file format is unsupported. What can I do to bring this file into LiveMotion? A Find an application that allows you to open the format. You can then attempt to copy and paste or drag and drop the graphic into LiveMotion. If that doesn’t work, try saving the file in a familiar format (see Appendix C) and then placing the file. This should do the trick. Q I’ve scanned a photo, but the scan has lots of flecks and speckles that I don’t see in the photo itself. What’s wrong? A You’ve probably got some dust on the photo or the scanner bed that’s being picked up in the process. Use compressed air (available at most office and art supply stores) to clean the photo, and follow your scanner manufacturer’s cleaning instructions to ensure that the scanner bed is free of dust. Scan again for better results.
Quiz 1. True or False: An image object includes any raster or vector image brought into LiveMotion. 2. What is considered the standard resolution in dots per inch (dpi) for Web graphics? 3. Can you copy and paste or drag and drop a file object from another application into LiveMotion, and vice versa? 4. Name some application types that allow copy and paste or drag and drop with LiveMotion.
04 0672323125 CH02
4/22/02
12:27 PM
Page 45
Importing Photos and Artwork as Objects
45
Quiz Answers 1. True. You can import raster and vector images as objects in LiveMotion. 2. The standard resolution for Web graphics is 72 dpi. 3. Absolutely, if that application is compatible with LiveMotion. 4. Most vector and raster graphics and illustration programs, and programs that output Rich Text Format (RTF) and ASCII (plain text) files.
Activities To help you gain a better understanding of how image objects behave in LiveMotion, try the following activities: 1. If you haven’t already done so, visit the stock art Web sites mentioned in this hour. Here they are again: www.arttoday.com www.clipart.com www.desktoppublishing.com www.eyewire.com www.gettyimages.com www.tonystone.com
Explore them to get a feel for the various kinds of photos, illustrations, and clip art available. Also, try searching for the terms “clip art” or “stock art” on your favorite search engines. 2. Find a photo or piece of clip art either from a Web source or from a CD or other stock source. Practice placing the file into LiveMotion. Also, try copying and pasting and dragging and dropping the file between available programs and within LiveMotion composition areas.
2
04 0672323125 CH02
4/22/02
12:27 PM
Page 46
05 0672323125 CH03
4/22/02
12:27 PM
HOUR
Page 47
3
Setting Type with LiveMotion Type is much more than words on a page. Type can make your designs communicate a feeling. Whether your goal is to be sincere, playful, warm, scary, conservative, or avant-garde, type can help you create compositions that visually as well as semantically convey that goal (see Figure 3.1). In this hour, you’ll learn about the following: • The basics of typography • How to create text objects • Sizing type • Tracking type • Setting type leading • Aligning type Enabling you to set graphic type is one of LiveMotion’s strongest suits. With a good understanding of basic typographic principles, and a workout using
05 0672323125 CH03
4/22/02
48
12:27 PM
Page 48
Hour 3
LiveMotion’s typesetting tools, you’ll have your designs expressing themselves in no time. FIGURE 3.1 Type expresses emotion.
Basic Typographic Principles The use of type can make or break a design. So having a strong understanding of the basic principles of typography enables you to create attractive and original type compositions. To ensure that you get off to the best start using LiveMotion to set type and work with text objects, you’ll learn about typography before working through the ways LiveMotion allows you to set and modify type. The principles covered in this section include the following: • Categories of type—There are numerous categories of type, and within each category families of typefaces exist. This section provides an overview of the five type categories relevant to Web and multimedia design and looks at several families and faces within these categories. • Style, weight, direction, and alignment—There are various ways to modify type to increase its visual impact. • Type size, tracking, and leading—The sizing and relationship of individual letters, words, and sentences can be controlled using a range of techniques. This section covers the ones you’ll need to effectively modify type in LiveMotion. • Combining type—A savvy designer often uses more than one typeface or style to create his or her message. But combining type takes a bit of skill. You’ll learn how to successfully combine typefaces in a fashion appropriate for your audience and intent. Essentially, you can consider this portion of your hour as time spent in design school. I promise it will be time well spent, and what’s more, it’s a subject I particularly enjoy. I’m confident you’ll enjoy it too.
05 0672323125 CH03
4/22/02
12:27 PM
Page 49
Setting Type with LiveMotion
49
Type Categories Type is defined first by category. A type category describes the general features of the type rather than its more specific elements. You’ll also look at subcategories of type, including families and faces. Families share similar characteristics within a category, and faces can be thought of as the individual personalities within a given family. Let’s look first at the five common categories relevant to working with LiveMotion (see Figure 3.2): • Serif—This category includes all type families and faces whose letterforms have little strokes, referred to as serifs. • Sans serif—Type in this category tends to be more rounded, with clean lines and no flourish strokes. • Monospaced—Remember the typewriter? This ancient piece of machinery outputs type in which each letter and space was the same size. This means that the letter “I,” which is slim, and the letter “W,” which is wide, take up the same amount of space. • Script—Anything that resembles handwriting is referred to as script. • Decorative—Artistic type can really add spice to a page. Decorative type is any type that has been made interesting by the type designer’s addition of shapes or designs to the individual letters.
Another kind of font you’ll want to make note of is Dingbat. This category is filled with pictographic faces. Dingbats can be useful in creating borders, edges, and fun visuals.
FIGURE 3.2 Examples of type from each of the five categories mentioned.
Serif Sans Serif Monospaced
Script
Decorative
3
05 0672323125 CH03
4/22/02
12:27 PM
Page 50
50
Hour 3
Typically, serif and sans serif faces are used for body text, although some designers enjoy using monospaced type for a trendy look. Script and decorative type are reserved for headers and stylized areas of a design. Although you can use serif and sans serif type successfully in headers, you will almost always want to avoid script or decorative type for use as body text.
The term font describes the letters, numbers, and symbols
NEW TERM included with a given electronic typeface. Type families are found within categories and are named sets of typefaces and fonts with unique characteristics.
Now let’s look at some individual families found within categories.
Exploring Serif Type As mentioned, serif type is stroked type often used in body text. The thought is that the strokes help guide the eye along the lines of text. This is particularly true in the context of print, although there is some debate as to how best to use serif type on the Web. Although serif typefaces are the default for many Web browsers, many Web designers feel that sans serif fonts are better for the screen. Whether you decide to use serif or sans serif faces for body text, you need to know a bit about the common families and faces within the serif category. Common serif families include Times, Bookman, and Garamond (see Figure 3.3). FIGURE 3.3 Common serif type.
Working with Sans Serif Because the letterforms of sans serif type tend to be wider and rounded, their use within screen elements is popular. Serif type is difficult to accurately represent with monitor pixels and is therefore often clearer in print. Sans serif type also seems to have a more contemporary look than serif faces. Common sans serif typefaces include Arial, Helvetica, Franklin Gothic, Gill Sans, Trebuchet, and Verdana (see Figure 3.4).
05 0672323125 CH03
4/22/02
12:27 PM
Page 51
Setting Type with LiveMotion
51
FIGURE 3.4 Popular sans serif type examples.
Trebuchet and Verdana are fonts that were created specifically by Microsoft. They are commonly used by Web designers geared toward the Windows platform. They’ll look fine on the Mac too, as long as they are installed on the individual machine.
Along with body text, sans serif type is an excellent choice for headers because the type is clear and easy to read.
Sans serif faces tend to be clean and readable. Therefore, you can feel confident using them for almost any audience.
Monospaced Type If you’re going for a “grunge” look, you can use monospaced type as both header and body text. You can stick with traditional monospaced fonts including Courier and Courier New or use one of the newer fonts in this category (see Figure 3.5). FIGURE 3.5 Courier and Courier New are two common examples of monospaced type.
For a while, many faces were created using monospaced style. These faces, which are part of the “Schmutz” family, can create a clever look (see Figure 3.6).
3
05 0672323125 CH03
4/22/02
12:27 PM
Page 52
52
Hour 3
FIGURE 3.6 Monospaced type became popular, and several trendy spinoffs of the style have been created.
Think carefully about your product and audience before employing monospaced type. Although readability of these faces is okay, there are better choices. Be sure to avoid using a face just because it’s “cool.” Does it really work with your content? If you are certain that it does, go for it.
Using Script Script faces are usually reserved for specific reasons (see Figure 3.7). The features of script faces tend to include slants, curls, and loops. Although these features can make for an attractive face, they can also make the script difficult to read. FIGURE 3.7 The use of script in this design helps evoke a sense of refinement.
Because script faces can be difficult to read, they are best used for headers and decorative page elements.
Fun with Decorative Type Decorative faces tend to be the most expressive and fun. These faces have purposely been designed to break out of the practical and help you as a designer create a mood. Figure 3.8 shows several of my favorite decorative faces.
05 0672323125 CH03
4/22/02
12:27 PM
Page 53
Setting Type with LiveMotion
53
FIGURE 3.8 Decorative faces are fun and expressive.
Choose decorative faces for headers and other design elements. Avoid them for body text. Your main goal with a decorative face should be to use the type to help express your message via visual means to your audience.
Type Width, Weight, Posture, Direction, and Alignment Type can be modified within its family in various ways, including the following: • Type width—Width refers to how much visual room a face takes up within a limited portion of space. Common widths include condensed and expanded (see Figure 3.9). Condensed means the individual letterforms are very close together and their strokes are compressed, whereas expanded forms tend to be wider in both stroke and spacing. • Type weight—Referring to how visually “heavy” a face appears, weight may be light or heavy, bold or normal (see Figure 3.9). • Type posture—Which way does your handwriting lean? Type posture is the angle at which a given typeface is set. Italic posture serves to emphasize text. Oblique posture is much like italic but is more rigid and is typically found in sans serif faces. It was created after the advent of electronic forms of typesetting became available (see Figure 3.9). • Type direction—The direction type flows can help create a feeling about the design. Horizontal type is straightforward and conservative, whereas vertical type can be used for impact (see Figure 3.10). • Type alignment—The alignment of type is also referred to as justification. Type can be aligned to the left, center, or right (see Figure 3.11). It can also be justified. Justified type has been modified to create clean lines on both the left and right margins (see Figure 3.12).
3
05 0672323125 CH03
4/22/02
12:27 PM
54
Page 54
Hour 3
FIGURE 3.9 Width, weight, and posture.
FIGURE 3.10 Type direction.
FIGURE 3.11 Aligning type to the left, center, and right.
FIGURE 3.12 Justification smoothes out both the left and right margins of text.
05 0672323125 CH03
4/22/02
12:27 PM
Page 55
Setting Type with LiveMotion
55
Type Size, Tracking, and Leading So many type features to study. It won’t come as a surprise to you that certain designers focus their entire work and study on typography. It’s one of the reasons type is so powerful—a lot of thought and care has gone into the creation and design of type. Features of important note include the following: • Size and proportion—The size of a given portion of type is relevant to the message that size sends. Type that takes up much visual space is going to dominate the space, whereas small type is less noticeable. Furthermore, when you’re using more than one type size in a design, the proportion—the relationship of one type size to another—has a lot to do with the balance of the overall design. • Tracking—This is the distribution of space between letters (see Figure 3.13). • Leading— Also referred to as line height, leading is the spacing between lines of text (see Figure 3.14). FIGURE 3.13 Tracking allows you to control the distribution of space between letters. FIGURE 3.14 Adjust leading for different looks.
Combining Type Styles and Faces Effective design often involves the use of type combinations—whether they are as simple as choosing one type for a header and a different type for the body text or as involved as combining type styles and faces within a single word or phrase (see Figure 3.15). FIGURE 3.15 Combining type can create a memorable look.
3
05 0672323125 CH03
56
4/22/02
12:27 PM
Page 56
Hour 3
Type combining is used to lay out pages, create distinctive headers and logos, and, in the case of contemporary type artists, create entire visual designs. Try your hand at setting different kinds of type in creative ways. But keep in mind that in most cases balance is everything. Too few typefaces can leave a design looking average and even bland (of course, this may be appropriate for your needs). Too many typefaces in a design may confuse your audience and distract them from the important content.
If you want to set combinations of type, type styles, and other type variations in LiveMotion, you have to set each individual style as a separate object. For example, in Figure 3.15, I set the first word and then the second word. They are two separate objects.
Effectively working with type takes study and practice. You’ll get to do that in upcoming sections, using LiveMotion to create and modify text objects.
Creating Text Objects Okay, it’s time to get down to the nitty-gritty of using LiveMotion to set type. The first thing to remember is that type is treated as an object. In other words, it has all the elements that any other object created in LiveMotion has. This primarily means that type that is set in LiveMotion and saved in native format is vector-based. It can therefore be resized and manipulated in various ways.
Task: Creating a Text Object To create a simple text object, follow these steps: 1. Select File, New to create a canvas. Adjust the canvas size to your liking. 2. Click the Type tool found in the toolbox and click on the canvas (see Figure 3.16). 3. Type the text you want to set as an object. Don’t worry about size or other properties right now; we’ll get to that in a moment. Compare your results to mine in Figure 3.17. Yours will probably look different depending on the canvas and type size. You may have to adjust the type size to fit it onto the canvas, or vice versa.
05 0672323125 CH03
4/22/02
12:27 PM
Page 57
Setting Type with LiveMotion
57
FIGURE 3.16 The Type tool, selected.
Type Tool
3 FIGURE 3.17 My text object is set.
Make sure that the canvas size is appropriate to the type you’re trying to set, or you may end up having to modify the type size. It’s easier to create a larger canvas and crop down than to try to scrunch the type to fit your small canvas. If the canvas is large enough, the object’s corner handles will be completely visible when the object is selected.
Setting a Font As you are aware by now, the font you choose will have a profound influence on the look and success of your final design. Each computer comes with fonts installed, and many software programs (such as Adobe Illustrator) also contain fonts that are added to your computer’s font collection. You can also find many free fonts or purchase professional fonts both online and via commercial CD-ROMs.
For various places to find type resources, see the list of stock art Web sites provided in Hour 2, “Importing Photos and Artwork as Objects.” Many of these sites offer fonts and links to font resources on the Web.
05 0672323125 CH03
4/22/02
12:27 PM
Page 58
58
Hour 3
Task: Selecting a Font To select a font and set it in LiveMotion, perform the following steps: 1. With a fresh canvas ready, click the Type tool and click on the canvas. 2. If the Properties palette isn’t available, select Window, Properties. You’ll see the Font drop-down menu in the Properties palette. Choose a font from this menu. I’ve chosen Times New Roman, a common serif font. 3. On your canvas, type your text.
Task: Setting the Font’s Style and Direction The font you’ve chosen appears on your canvas. You can also set the font’s style and direction, if available to the font. Different fonts have different available styles, and sometimes only select styles are installed. To set style and direction, perform these steps: 1. Create a new canvas, click the Type tool, and click on the canvas. Make sure that the Properties palette is available. 2. Determine your font by selecting it from the Font drop-down menu in the Properties palette. In this case, I’ve continued to use Times New Roman. 3. Next to the Font drop-down menu, you’ll see the Style drop-down menu. Depending on the font you choose, you may have many available styles, or only one. Choose the style you want. I’ve chosen Italic. Your type and type style are now set. Figure 3.18 shows my font and type style on the canvas. FIGURE 3.18 I’ve set my font to Times New Roman and italicized it using the Type tool and Properties palette.
If you want to change the style of type you’ve already set, select the type, then select Window, Properties and use the Properties palette to make type style changes or other modifications.
05 0672323125 CH03
4/22/02
12:27 PM
Page 59
Setting Type with LiveMotion
59
Sizing Type The size of your type depends largely on what its purpose is. LiveMotion sets type in points. The default type size is 18 points. You can easily modify this size using the Type tool and Properties palette.
Task: Changing the Type Size To change your type size, follow these steps: 1. Click the Type tool and click on the canvas. 2. Set your font from the drop-down menu in the Properties palette. 3. Use the Size text box to type the size, in points, of the text you want; or use the up arrow to increase the size, and the down arrow to decrease the type’s size. Your type is sized according to your specifications.
Because LiveMotion is vector-based, you can cleanly modify the size of type by dragging anchor points to enlarge the type or make it smaller. To retain proportion, hold the Shift key down while dragging. For greater precision, however, I recommend setting type to the point size you really need.
Tracking Type LiveMotion is sophisticated in that it allows you to make adjustments to your type that are usually reserved for high-end typesetting programs such as Adobe Illustrator. The Tracking option allows you to change the distributed spacing between letters.
Task: Tracking Type To track type in LiveMotion, perform the following steps: 1. Create a new canvas for the exercise. 2. Select the Type tool from the toolbox and click on the canvas. 3. Choose your font by selecting it from the drop-down menu in the Properties palette. 4. Set a size in points using the Size text box. 5. Set the style of your choice. 6. In the Tracking text box, enter a numeric value. To add space between letters, use a higher value. To reduce space between letters, use a lower value.
3
05 0672323125 CH03
4/22/02
12:28 PM
Page 60
60
Hour 3
Figure 3.19 shows normal tracking, tracking set to 40, and tracking set to -10. FIGURE 3.19 Three tracking values: normal, positive, and negative.
You can use negative values to set the letter spacing below the font’s default, which is 0.
Controlling Leading NEW TERM Leading (also referred to as line height) is the amount of space between lines of
text. Add more leading to gain whitespace, and reduce leading to get a tighter look. Depending on the design of your composition, you may well want to incorporate leading techniques to create additional visual intrigue in your design.
Task: Modifying Leading To modify leading while setting type in LiveMotion, follow these steps: 1. Create a new canvas that is 400×200 pixels. 2. Click the Type tool and click on the canvas. 3. Choose your font from the drop-down menu in the Properties palette. 4. Select a font style from the drop-down Style menu. 5. Set the point size in the Size text box. 6. Choose your tracking value, if any. 7. In the Leading text box, enter a value. If you choose a low value, you decrease the amount of space between lines of type. Conversely, any increase in the number value increases the amount of space. 8. Type several lines of text in the text area. Your type is set with the features you’ve just selected.
05 0672323125 CH03
4/22/02
12:28 PM
Page 61
Setting Type with LiveMotion
61
Leading is measured as a percentage of the selected point size.
Figure 3.14, found earlier in the chapter, shows three examples of leading.
Aligning Type The way type is aligned adds visual design features. Left alignment is typically used for body text, centering can be used for header text or any text that needs to be set apart from other text, and right alignment is used for aesthetic, decorative elements.
Center or right-align text only when necessary and almost never for the purposes of body text. Although the negative space created by these options is indeed interesting, longer portions of text using these alignment options can be difficult to read.
In this section, you’ll align type on both the horizontal and the vertical axes. First, align type to the horizontal options available in LiveMotion.
Task: Aligning Type Left To align type to the left, perform these steps: 1. Create a new canvas. Click the Type tool, then the canvas. Choose a font and any desired font attributes. 2. Select Window, Properties to ensure that the Properties palette is available. 3. In the Properties palette, click the Left Align button (see Figure 3.20). Your type aligns to the left. FIGURE 3.20 Alignment options in the Properties palette. Justify Left Alignment
Right Alignment
Center Alignment
3
05 0672323125 CH03
4/22/02
12:28 PM
Page 62
62
Hour 3
Your type is now set with left alignment. Keep your work active because you’ll use it to try out other alignment types.
Task: Aligning Type Center To align the current type to the center, follow these steps: 1. Be sure to select the text object you created by clicking the Selection tool and clicking on the text once. If it is selected, it has a box with anchor points surrounding the type. 2. Make sure that the Properties palette is available. If it is not, select Window, Properties. 3. Click the Center Align button. Your type is now center-aligned.
Task: Aligning Type Right To right-align the type, perform these steps: 1. Select the text object. 2. Ensure that the Properties palette is open by selecting Window, Properties. 3. Click the Right Align button. You’ve now set your type to the right. To justify your type, simply go through the same steps in these preceding three examples and use the Justify button in the Properties palette.
Whenever your type is selected and the Properties palette is active, you can make modifications to other options such as your font, font style, and size.
Task: Aligning Type Vertical—Left to Right Now, let’s work on setting alignment for vertical type. To set type vertically, follow these steps: 1. Create a canvas that is 400×500 pixels. 2. Be sure that the Properties palette is available. 3. Make choices regarding font, style, and other features you want to include in your work.
05 0672323125 CH03
4/22/02
12:28 PM
Page 63
Setting Type with LiveMotion
63
4. From the Properties palette, make the type vertical by choosing the Vertical icon. This causes your type to run vertically instead of horizontally. 5. Choose a vertical alignment from the icon selection. Your options are Top, Middle, Bottom, and Justify. I used Top, Middle, and Bottom options, respectively (see Figure 3.21). Check your work against mine, found in Figure 3.22. FIGURE 3.21 Left, center, right, and justify alignment options. Justify Left Alignment
3
Right Alignment
Center Alignment
FIGURE 3.22 Vertical alignment. On the left, I’ve aligned my type to the top; the center sample is aligned to the middle; and the sample on the right is aligned to the bottom.
Bottom Alignment
Top Alignment
Middle Alignment
Summary Type is a huge subject, and we’ve really covered only the tip of the iceberg here. As I’ve mentioned, some people spend their entire careers focused on the creation and use of typography.
05 0672323125 CH03
4/22/02
64
12:28 PM
Page 64
Hour 3
For those of you new to the subject, I hope your creativity has been stimulated by the information and exercises in this hour. And those of you who have ample experience with type should feel confident that setting type in LiveMotion is quick, easy, and sophisticated. As you wrap up this hour, you have a strong grasp of how objects are created, imported, and manipulated in LiveMotion. The next couple of hours will be dedicated to helping you combine and group objects, as well as use object layers to gain greater control over your creations. In later hours, you’ll get a chance to apply color, texture, and various effects to type as well as other objects within LiveMotion. Upcoming hours will provide much more detail and plenty of fun.
Q&A Q I have created a section of body text and centered it. I think it looks great! Why do you say I shouldn’t use centering for body text? A The instinct to center body text is a good one. It comes about because you are looking for ways to break up the negative, or “white,” space available. This makes your design more visually interesting. However, body text that is centered can be hard to read because there’s no continual flow to the text. Instead of centering the text, think about margins, layout, floating the text around an image, and other design options that give your design a more interesting look. Reserve centering for use in headers or short bursts of text. Q I’ve created a design with only one font. I want to keep it clean and simple, but I still want to make the design somehow more interesting. What can I do to subtly spruce up my composition? A Try playing with weight. Say, for example, that you have a headline that reads “Shop Online!”. Try placing the “On” in boldface and keeping the rest of the text normal weight. The contrast in weight gives you just the right amount of subtle punch without deviating from the simple look you’re after. Q I’m having trouble selecting text after I’ve typed it in. What can I do? A Click on the selection tool. Your text object is then selected, and you can make any adjustments or changes you’d like using the Properties palette.
05 0672323125 CH03
4/22/02
12:28 PM
Page 65
Setting Type with LiveMotion
65
Quiz 1. What kind of typeface has flourishing strokes? 2. What category of type uses the same amount of space for each letter? 3. True or false: Type in LiveMotion is created using bitmapped information. 4. Can you control the space between letters with LiveMotion?
Quiz Answers 1. Type with flourishing strokes is referred to as serif type. 2. Monospaced type uses the same amount of space for each letter. 3. False. Type in LiveMotion is created with vectors. However, you must export to bitmap format to make a composition Web-ready, unless you are exporting to Flash. 4. Yes. Use the Tracking feature to reduce or expand the amount of space between letters.
Activities Use the following activities to help you solidify your knowledge of type design: 1. Open LiveMotion, create a canvas, and set type using the Properties palette. Cruise the menu of fonts. Randomly choose a font and determine which category it fits into. 2. Consider that you are designing headers for a Web site. The client is a rock-androll band. The goal is to create a great-looking page that expresses energy and dynamic movement. Choose several fonts from your collection that you might use on this page. 3. Suppose that instead of a rock-and-roll band, your Web-site client is a classical quartet. Which typefaces will you choose for this design? How do they differ from the ones you chose in the preceding exercise? 4. Create a typographic logo with your name that expresses your personality. Combine type where appropriate to convey your dominant features: warmth, enthusiasm, shyness, and so forth.
3
05 0672323125 CH03
4/22/02
12:28 PM
Page 66
06 0672323125 PART 02
4/22/02
12:28 PM
Page 67
PART II Modifying Objects Hour 4 Combining, Grouping, and Editing Objects 5 Selecting and Transforming Objects 6 Working with Layers
06 0672323125 PART 02
4/22/02
12:28 PM
Page 68
07 0672323125 CH04
4/22/02
12:28 PM
HOUR
Page 69
4
Combining, Grouping, and Editing Objects As you gain a better understanding of how objects work within LiveMotion, you’ll want to begin creating compositions of greater complexity. One step along the road to doing just that is to apply Combine and Group commands to numerous objects. In this hour, you’ll learn about the following: • Placing objects in groups • Object combination • How to edit objects • Aligning objects • Undoing your actions The work you’ll do in this hour is largely hands-on because combining and grouping are techniques that demand skilled use of tools within the LiveMotion environment. Although not as creative as earlier hours, the
07 0672323125 CH04
4/22/02
12:28 PM
Page 70
70
Hour 4
lessons will be practical bases on which to set up complex objects for use in advanced designs and animations.
Understanding Group and Combine To group means to join two or more objects so that they are treated as a single object. After the objects are grouped into a single object, you can move, resize, or add effects to the object and have the changes affect all the individual parts. For example, you can make all the objects’ style the same or increase all the objects’ size proportionately. Grouped objects can be • Grouped with other objects or other groups to form complex object groups. • Stacked together in order of creation or by personal preference. • Edited as a single object, or individual objects within the group can be selected and edited.
Stacking is the order in which LiveMotion positions multiple objects that are created or placed onto a canvas. The order of objects in a group or combination is important because the stacking order determines what can be modified within the combination. Stacking order can be modified, which you’ll examine in the next section, “Grouping Objects.”
Combining objects is a bit more complicated than grouping them. Using Combine, you join objects just as you would group them. However, Combine has specific features that enable you to work with more precision. These are the five Combine options: • Unite—Let’s say that you have two objects and you combine them with the Unite option. The features of both objects take on the style of the object that is in the back position. When you unite objects, this command treats all selected objects as a single object. • Unite with Color—If you want to retain the individual style and color of each separate object but get the same kind of effect as Unite, use this command. • Minus Front—This removes any portion of the front object that intersects with the back object. The result is that the intersecting front portions maintain their shape but appear transparent.
07 0672323125 CH04
4/22/02
12:28 PM
Page 71
Combining, Grouping, and Editing Objects
71
• Intersect—Combining by intersection traces the outline of all the overlapping shapes in the selection. Whatever doesn’t overlap won’t be included in the combination. • Exclude—If you want to create a “knockout” area, simply use this option. Any overlapping areas of the objects have the color of the bottommost object applied to them. If one section of the object is a text object, you can continue to edit that text. A combined object becomes a raster object—even if its original components were vector—and should be treated as such. Grouped vector objects retain their vector characteristics, making them more flexible.
If you want to access any individual object within a combined object, you can uncombine the object and make your modifications. Uncombined objects revert to their last uncombined state. See “Combining Objects,” later in this hour, for details.
Grouping Objects If you want to move objects around easily, edit objects as a single unit, or add effects and styles to objects together, grouping is a great choice to assist you in these goals.
Task: Grouping Two Objects To group two objects, follow these steps: 1. Draw, place, or set the type for two objects. I drew a circle and then set my name in type. 2. Select the objects by choosing Edit, Select All, by using the keystroke combination of Ctrl+A (Windows) or Cmmd+A (Mac), or by dragging the selection tool across all the objects. You can also choose the Selection tool and Ctrl+click or Cmmd+click to select each object. Figure 4.1 shows the individual, selected objects. 3. Group the objects by selecting Object, Group, or using the keystroke combination of Ctrl+G (Windows) or Cmmd+G (Mac). You’ll notice that a new bounding box encompassing all grouped objects appears, but only the center point for the topmost object is retained.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 72
72
Hour 4
FIGURE 4.1 Two objects prepped and ready to group.
The objects are now grouped as one object, as shown in Figure 4.2. FIGURE 4.2 My two objects are now grouped as one.
You can change properties, transform, move, select, or alter the object in any other way. The changes you make at this point affect the entire object as if it were one.
You will learn advanced object selection techniques in Hour 5, “Selecting and Transforming Objects.”
Task: Grouping More Than Two Objects To group more than two objects, perform these steps: 1. Make sure that all your objects are open together on a canvas. 2. Choose Edit, Select All to select all the objects, or use the various selection tools and techniques to select only the individual objects you want to group. 3. Choose Object, Group. All the selected objects are now treated as a single object (see Figure 4.3).
07 0672323125 CH04
4/22/02
12:28 PM
Page 73
Combining, Grouping, and Editing Objects
73
FIGURE 4.3 This single object is really six grouped objects.
Changing Stacking Order While working with numerous objects, you might need to bring a given object to the top, or send one to the back. You can do this before you’ve grouped or combined objects, or after you’ve ungrouped or uncombined them. This action changes the stacking order so that you can get the kinds of effects you want.
Task: Bringing an Object to the Front To bring an object to the front of a stack, use these steps: 1. Choose the Selection tool from the toolbox (see Figure 4.4). 2. Select the object you want to move. 3. From the main menu, choose Object, Arrange, Bring to Front.
Task: Moving an Object to the Back You can also move an object to the back of the stack. To do so, follow these steps: 1. Click the Selection tool. 2. Click the object you want to move to select it. 3. Choose Object, Arrange, Send to Back. Your object is now placed at the back of the stack. You can also modify the position of any object in a stack to another position directly forward or behind that object.
Task: Bringing an Object Forward One Position If you want to bring an object one position forward in the stack, follow these steps: 1. Choose the Selection tool. 2. Click the object you want to move. 3. Select Object, Arrange, Bring Forward.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 74
74
Hour 4
Your object is now one step forward within the stack. FIGURE 4.4 The selected object can now be brought to the front.
The object is now brought to the front of the stack.
Task: Moving an Object Backward One Position Follow these steps if you want to move the object one position backward in the stack: 1. Click the Selection tool. 2. Select the object you want to send backward. 3. Choose Object, Arrange, Send Backward. Your object is now one step backward within the stack (see Figure 4.5). FIGURE 4.5 A drawn object moved to the back.
07 0672323125 CH04
4/22/02
12:28 PM
Page 75
Combining, Grouping, and Editing Objects
75
If you have many objects on a canvas, it might be difficult to see them all. You can see all the individual objects by choosing Edit, Select All. Then, deselect objects you don’t want in the group by using Ctrl+click or Cmmd+click on each of the undesired objects. You can then stack the remaining objects as you see fit.
Combining Objects Combining objects is especially handy when you want to create drawings with unusual shapes not immediately accessible to you with LiveMotion’s standard drawing tools. The Combine options introduced earlier will help you do this in various clever ways. The following sections review each of these options individually so that you can practice each Combine method.
Uniting Objects Let’s create a unique shape using the Combine Unite option. I’m going to start off simply, but naturally you can try more complex combinations as you feel ready to do so.
Task: Uniting Objects To unite objects, perform these steps: 1. Create a circle shape using the Ellipse tool. 2. Draw a diamond over the shape, using a different color. 3. Choose Edit, Select All to select both objects. 4. Select Object, Combine, Unite. Figure 4.6 shows my results. Notice that when you use the Unite option, the object color to the back of the stack is applied to the completed, single object. FIGURE 4.6 My combined object is a new shape, made up of two shapes united using the Combine command.
4
07 0672323125 CH04
4/22/02
12:28 PM
76
Page 76
Hour 4
Uniting Objects with Color If you have two objects with different features, such as two different colors or styles, and you want each object to retain its original style as it’s combined, use the Unite with Color command.
Task: Creating a Single Object by Uniting Two Objects To create a single object by uniting two objects with different colors or styles, use these steps: 1. Draw a shape using any of the drawing tools. I drew a circle. 2. Now select a different color from the Color palette (see Appendix A, “Learning LiveMotion Features”) and draw a diamond using the Polygon tool. 3. Select both objects by choosing Edit, Select All. 4. Select Object, Combine, Unite with Color. The two objects are now combined into one single object, but the individual colors are retained (see Figure 4.7). FIGURE 4.7 Uniting two objects but retaining distinct color using the Unite with Color command.
The object you draw first is placed at the back of the stack. Use the Arrange command to modify the position of the object in the stack.
Creating Shapes Using the Minus Front Feature Using the subtraction actions within the Minus Front feature enables you to create various otherwise unattainable effects including transparency-like designs.
07 0672323125 CH04
4/22/02
12:28 PM
Page 77
Combining, Grouping, and Editing Objects
77
Task: Using the Minus Front Feature Follow these steps to see how the Minus Front feature works: 1. Choose a dark color from the Color palette. 2. Draw a circle using the Ellipse tool. Hold down the Shift key while drawing the circle to keep its dimensions even. 3. Click the Type tool. Type in the letter “T” in any font you like. You can keep the font color the same, or make it any color you like using the Properties palette. 4. Choose Edit, Select All to see both objects because they’ll both be of the same color. Adjust the position of either object by using the Transform palette. 5. With both objects in place and selected, choose Object, Combine, Minus Front. Compare your work with my results shown in Figure 4.8. They should be similar. What a terrific way to create shapes! 4.8 The Minus Front command enabled me to create the “burnout” style letter in this image.
URE
Working with the Intersect Command This unusual command works by determining the area defined by the intersecting parts of numerous objects. Then, it throws away all the objects and leaves the intersection only. Most designers probably won’t reach for this method to create shapes or effects, but it’s worth tucking into your personal toolkit so that you know what the process can do.
Task: Using the Intersect Command To see the Intersect command in action, follow these steps: 1. Draw a geometric object. I chose a rectangle. 2. Draw another geometric object. I drew an oval this time. Make sure that the two objects overlap at some point. 3. Try to envision the area where the two objects overlap (see Figure 4.9).
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 78
78
Hour 4
4. Choose Edit, Select All to select all the objects. 5. Choose Object, Combine, Intersect. Figure 4.10 shows how the Intersect command chooses only that portion of the foremost object within the intersection and removes all the other object information. FIGURE 4.9 Two objects at the ready.
This area is where the objects intersect
FIGURE 4.10 When the Intersect command is applied, everything but the intersecting portions is removed.
The Exclude Command The Exclude command works similarly to the Minus Front and Intersect commands in that wherever one object intersects with another, the top object is subtracted. However, unlike the Minus Front command, the area of visual data that does not intersect remains intact.
Task: Using Exclude To see how Exclude works, follow these steps: 1. Create a geometric object. I used a circle. 2. Now, create a text object, but be sure that only a portion of the text intersects with the first object. 3. Choose Edit, Select All to ensure that both objects are selected. If you have more than two objects, select only those objects of interest to you using the various selection options available. 4. Choose Object, Combine, Exclude. You’ll notice that the portion of the text that intersects with the geometric object is now transparent, showing the background color (white), but the non-intersecting portion of the text remains intact (see Figure 4.11).
07 0672323125 CH04
4/22/02
12:28 PM
Page 79
Combining, Grouping, and Editing Objects
79
FIGURE 4.11 Using the Exclude command.
If you use two different colors or styles to create your objects and then use the Exclude feature, you’ll see that this feature removes all style and color except for that used for the object at the back of the stack. This is the normal function of the Exclude feature.
Combining Combinations What happens if you want to combine combination techniques? You can do so, but you have to be sure to create individual objects and apply the combination that makes sense. For example, if you want to use red for the object in the preceding exercise and blue for the non-excluded text, you would have to create three, not two, objects.
Task: Combining Combination Techniques Try this exercise: 1. Draw a circle. 2. Using the Type tool, set the first portion of text: “Ex.” Make this a different color from the circle. 3. Set the second portion of text: “clude.” 4. Using the Selection tool, select the circle object and the second portion of text only (see Figure 4.12). 5. Choose Object, Combine, Minus Front. The object combines using the Minus Front technique. You now have two objects—the remaining text object and the newly combined object. 6. Choose Edit, Select All. 7. Select the two objects and choose Object, Combine, Unite with Color to create a single object (see Figure 4.13). Using combination sequences requires significant creativity! See the “Activities” section later in this hour for some additional exercises to help you work with various combination techniques.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 80
80
Hour 4
FIGURE 4.12 Selecting two of the three objects.
FIGURE 4.13 Using a sequence of combinations to create a single combination.
Want to break up a combined object? Select Object, Uncombine.
Editing Objects There are several ways to edit objects that you’ll want to be familiar with as you work to combine and create more detailed compositions. LiveMotion allows you to modify objects in several ways: • Duplicating—If you want to create an exact duplicate of an object, you can use this feature to do so. • Making an alias—This feature creates a duplicate but links it to the original so that if you make a change to either object, the change updates both objects. • Copying—You can copy an object to the Clipboard to later paste it as a copy into your current composition, into another composition, or into another application completely. • Cutting—Cutting allows you to remove an object to the Clipboard, where it can later be returned to the current composition, to another composition, or to a composition in another application. • Pasting—Use the Paste command whenever you want to take what’s on the Clipboard and paste it into any available composition.
07 0672323125 CH04
4/22/02
12:28 PM
Page 81
Combining, Grouping, and Editing Objects
81
• Using Paste Special—This powerful command lets you paste specific aspects of an object in specific ways, including image, texture, active matte, layer, transformations, fill, effects, and properties.
Duplicates appear on the canvas directly on top of the original. You’ll need to move the top object to see both objects clearly.
Each of these editing processes is useful throughout the LiveMotion design process. You’ll return to these commands again and again because they are fast, simple ways to manage objects within LiveMotion and between related applications.
Duplicating Objects If you want to create another object exactly like one you’ve already created, you can do so using the Duplicate command. Duplicating makes an exact copy of the original object, but it creates an object that acts as a separate entity. This means that you can treat the duplicate as a completely new object and modify it separately from the original.
Task: Duplicating an Object To duplicate an object, follow these steps: 1. Draw, place, or typeset an object in LiveMotion. 2. Select the object you want to duplicate with the Selection tool. 3. Choose Edit, Duplicate. You can use the keystroke command if you prefer, which is Ctrl+D (Windows) or Cmmd+D (Mac). A duplicate of the original object appears on the canvas, ready for further editing (see Figure 4.14). FIGURE 4.14 Duplicating an object.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 82
82
Hour 4
Making an Alias At first glance, an alias looks much like a duplicate. However, when you attempt to modify an alias, you’ll find that it is linked to the original and that any modification you make to the alias occurs on the original, and vice versa.
Task: Creating an Alias Follow these steps to create an alias: 1. Create an object. 2. Select the object by using the Selection tool or by choosing Edit, Select All. 3. Choose Edit, Make Alias. You now have an alias of the original.
Task: Using an Alias To see just how an alias works, try this experiment: 1. Select the alias you just created. 2. Choose Window, Transform to bring up the Transform palette. 3. In the Transform palette, grab the rotate handle and rotate the alias. You’ll notice that the alias and the original both rotate. 4. Choose Edit, Deselect All. 5. Now use the Selection tool to select the original. 6. Apply another rotation. Both the original and the alias rotate (see Figure 4.15). FIGURE 4.15 What you do to the original is done to its alias, and vice versa.
You can unlink an alias by selecting one of the objects and choosing Edit, Break Alias. The two objects are now considered completely separate entities by LiveMotion. You can also create multiple aliases for a single object.
07 0672323125 CH04
4/22/02
12:28 PM
Page 83
Combining, Grouping, and Editing Objects
83
Copying Objects As with so many applications, the act of copying information to the Clipboard can be helpful as you work through various tasks. This reserves the copy for later use, no matter what you decide to do with it. Be aware that whatever you copy to the Clipboard remains available until you copy something else to the Clipboard, at which point the original data is overwritten.
Task: Copying an Object To copy an object to the Clipboard, follow these steps: 1. Click the Selection tool. 2. Select the object to be copied. 3. Choose Edit, Copy. The object is now copied to the Clipboard. You can decide to leave it there for a while, paste it to the canvas as a copy of the original, paste it into another application, or discard it if you’ve determined that it’s no longer needed.
Cutting Objects As with copying, cutting an object makes it available on the Clipboard. The primary difference is that a cut object is removed from the composition.
Task: Cutting an Object Follow these steps to cut an object: 1. Choose the Selection tool from the toolbox. 2. Click on the object to be cut to select it. 3. Choose Edit, Cut. You also can use Ctrl+X (Windows) or Cmmd+X (Mac). The object disappears from the composition and is placed on the Clipboard. As with copying, you can leave the object on the Clipboard indefinitely, paste it back into the open composition, paste it into another application, or get rid of it if you don’t want to use it anymore.
Anytime you copy or cut an object, it’s placed on the Clipboard. However, as soon as you copy or cut another object from this or any other program, it overwrites the Clipboard. If you want to save a copy of your object, create a new canvas and save the file. This way, it will be available should you want to use it again.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 84
84
Hour 4
Pasting to the Canvas After you’ve copied or cut your object, you can paste it back into LiveMotion or another supporting application. Let’s take a closer look.
Task: Pasting to the Original Canvas To paste an object back into the original canvas, perform these steps: 1. Open the original canvas. 2. Choose Edit, Paste or use the keystroke combination Ctrl+V (Windows) or Cmmd+V (Mac). The object appears on the canvas, and you can modify it as you see fit.
Task: Pasting to a New Canvas To paste an object into a new canvas, perform these steps: 1. Create a new canvas by selecting File, New. 2. Size the canvas by choosing Edit, Canvas and entering the dimensions you want into the Width and Height fields. 3. Select Edit, Paste, or use the appropriate keystroke combination. Your object appears on the new canvas. You can modify this in any way, or save it for later use. If you want to bring the object into another application, first determine whether the software is compatible with LiveMotion. Just about any Adobe product is fine, as are many other applications. In this case, I’ll use Photoshop as an example.
Task: Pasting into Photoshop To paste an object into Photoshop, follow these steps: 1. Create a new file in Photoshop. Select File, New, and use the New dialog to create a canvas suitable for the object to be imported. 2. From Photoshop’s main menu, choose Edit, Paste, or use the proper keystroke combination. Remember that Photoshop is a raster application, so increasing an object’s size causes degradation in quality. Your object now appears on the Photoshop canvas (see Figure 4.16). You can use Photoshop’s tools to work with the object.
07 0672323125 CH04
4/22/02
12:28 PM
Page 85
Combining, Grouping, and Editing Objects
85
FIGURE 4.16 Pasting a LiveMotion object from the Clipboard into Photoshop.
4 To find out the dimensions of an object in LiveMotion, select that object and look into the Transform palette for width and height information.
Pasting Special A powerful method of pasting information from the Clipboard in various ways is by using the Paste Special option from the Edit menu. Select Edit, Paste Special, and you’ll see a list of options including Image, Texture, Active Matte, Layer, Transformations, Fill, Effects, and Properties. Selecting Image applies the Clipboard data as an image object. If you choose Texture, the Clipboard data is applied as a background. The remaining options are available depending on the quality of what’s been added to the Clipboard. If you’ve copied an object with any one of the features described, you can paste just that feature, such as the object’s matte, to the canvas.
Deleting Objects What happens when you simply want to get rid of an object? Easy! You delete it.
07 0672323125 CH04
4/22/02
12:28 PM
Page 86
86
Hour 4
Task: Deleting an Object To make an object or multiple objects go away, follow these steps: 1. Click the Selection tool. 2. Select the offending object(s). 3. Choose Edit, Clear, or press the Delete key on your keyboard. Windows users can press the Backspace key instead, if they prefer. The object disappears. Uh-oh! You say that you’ve changed your mind? You didn’t really want to delete the object? Good news, you can get it back. Just see the next section, “Undoing What You’ve Done.”
Undoing What You’ve Done Whenever you make a change to an object, LiveMotion lets you go back and undo that change. Whether the change is an action such as grouping or combining, altering a color, or adding a style—even deleting an object completely—you can undo the doing.
Task: Undoing a Change To undo a change, follow these steps: 1. Be sure that your file is still open and active. 2. Choose Edit, Undo. Or use the History option for a list of all of your last commands to appear (see Figure 4.17). If you simply want to undo the last action, you can use the keystroke combination of Ctrl+Z (Windows) or Cmmd+Z (Mac). 3. Choose the command you want to undo. It shall be undone! FIGURE 4.17 The History menu with Undo options.
07 0672323125 CH04
4/22/02
12:28 PM
Page 87
Combining, Grouping, and Editing Objects
87
To redo what you undo, select Edit, Redo, or use the keystroke combination Ctrl+Shift+Z (Windows) or Cmmd+Shift+Z (Mac).
You can undo or redo changes to the entire composition by selecting all the objects and using the undo or redo techniques described here.
Another option, if you’ve been saving your file periodically (and you should be), is to go back to the last saved version of the file. This is known as revert. This is especially useful if you’ve been experimenting with a file and you want to return to the saved original.
NEW TERM
Task: Reverting to a Saved File Follow these steps to revert to the previously saved file: 1. Be sure that your file is open and active. 2. Choose File, Revert. The file returns to its previously saved state.
Reverting to a saved file causes you to lose all the edits you’ve made to the file since the previous save.
Alignment and Distribution Alignment is the act of positioning more than one object so that it is properly lined up against a particular axis. You can align objects along the vertical or horizontal axis, and you can also align the objects along specific points on each individual axis.
NEW TERM
Distributing objects is the act of adding an even amount of space between all objects along an axis. So let’s say that you have three objects lined up next to one another. Distributing them positions them so that they are exactly the same amount of space apart from each other.
NEW TERM
Alignment and distribution are easy operations to perform in LiveMotion. Let’s take a closer look.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 88
88
Hour 4
Aligning Objects You can align objects along the vertical or horizontal axis. You have seven total align options, as shown here: • Left—This option aligns the left side of your objects with the object farthest to the left. This is best used for left-aligning multiple objects along the vertical axis (see Figure 4.18). • Right—The rightmost object takes the lead here, with the other objects on the vertical axis aligning to the right (see Figure 4.18). • Top—Objects will line up to the topmost edge of the highest object (see Figure 4.19). • Bottom—This option aligns objects to the bottommost edge of the lowest object (see Figure 4.19). • Horizontal Centers—All objects are aligned to their collective center point. This option is best suited for use with vertically arranged objects (see Figure 4.20). • Vertical Centers—Use this to align objects situated along the horizontal axis. The objects align to their collective vertical center points (see Figure 4.20). • Centers—This option aligns all objects to the collective center point of all the objects being aligned (see Figure 4.20). FIGURE 4.18 The top, selected rectangle provided the left alignment for the other rectangles. Similarly, the top, selected circle provided the right alignment for the circles.
Task: Aligning a Group of Objects To align a group of objects, follow these steps: 1. Select all the objects by clicking and dragging with a selection tool, or using the keystroke combinations Ctrl+A (Windows) or Cmmd+A (Mac). Or you may prefer to select only a number of objects, which you can do by using a selection tool and
07 0672323125 CH04
4/22/02
12:28 PM
Page 89
Combining, Grouping, and Editing Objects
89
pressing Ctrl+click (Windows) or Cmmd+click (Mac) on each object you want in the group. 2. Choose Object, Align from the menu. The Align submenu appears. 3. Click the alignment option you want to apply to the objects. The objects align according to your selection.
FIGURE 4.19 The selected rectangle on the left provided the top alignment for the circle and other rectangle. The center diamond provided the bottom alignment for the other two diamonds.
You can now continue editing your objects. If you want to distribute objects evenly, see the next section for how to do just that. FIGURE 4.20 Center alignment options.
Vertical centers align along the horizontal axis
Horizontal centers align along the vertical axis
All centers align to center
Distributing Objects Balance in design is important. The distribution of space and objects within that space creates an integrated whole that ideally expresses itself as an effective graphic design. Distribution enables you to accurately balance space and objects.
4
07 0672323125 CH04
4/22/02
12:28 PM
Page 90
90
Hour 4
Two choices are available for distribution in LiveMotion: horizontal and vertical.
Task: Distributing Objects To distribute objects, follow these steps: 1. Select the objects to be distributed. 2. Choose Object, Distribute. The Distribute submenu appears. 3. Choose Horizontal or Vertical. You can apply both, which will first initiate all objects selected to distribute to the horizon line, moving the objects out and over. Then, all the objects can be distributed along the vertical, which will move them up or down. The objects are now evenly distributed along the vertical or horizontal axis (see Figure 4.21). FIGURE 4.21 The upper row of objects is random, and the lower row has been distributed vertically and horizontally for even spacing.
Summary The object of this hour (if you’ll pardon the obvious pun) was to teach you to combine, unite, and edit the various object types you are working with. You can now integrate various object types and combination techniques to better modify portions of your composition. You can also use unite options to create effects and designs that are more complex and unique. Working with edit options undoubtedly has expanded your overall technique, enabling you to work faster—and better—in the LiveMotion environment.
07 0672323125 CH04
4/22/02
12:28 PM
Page 91
Combining, Grouping, and Editing Objects
91
Q&A Q I have four objects. I want to group two, and then combine them. Can I do this? A Sure! Remember, you can group any number of objects, and it will be perceived as a single object. Then you can combine an object using any of the Combine commands to achieve a given look. Q I’ve created a duplicate, but I want to have my changes update to both objects. What do I do? A Instead of duplicating the file, make it an alias. Delete the duplicate, select the original, and then select Edit, Make Alias. Now, any change you make to one object is immediately applied to both objects.
Quiz 1. Which Combine feature removes all the information but that which contains overlapped object data? 2. True or false: After you’ve grouped an object, it will always be seen as a single object. 3. What process allows you to return to the previously saved edition of a given file?
Quiz Answers 1. This feature is referred to as Combine Intersect. 2. False. You can always undo a combination by selecting Object, Ungroup. 3. The process of returning to the last saved version of a file is called reverting.
Activities To help you practice your combine, group, and edit skills, try the following activities: 1. We used a lot of geometric shapes and text objects in this hour. Try some combinations using image objects along with text and shape objects. 2. Practice your create, paste, delete, and undo skills by creating a text object and copying it onto another LiveMotion canvas. Delete the original instance of the object, then undo your delete action.
4
07 0672323125 CH04
92
4/22/02
12:29 PM
Page 92
Hour 4
3. Visit ArtToday (http://www.arttoday.com/) or review the stock clip art and image sources in Hour 2, “Importing Photos and Artwork as Objects.” Download a clip art image or a photograph. Place the art or photograph onto a LiveMotion canvas, add text, and try out various combination techniques on the objects.
08 0672323125 CH05
4/22/02
12:29 PM
HOUR
Page 93
5
Selecting and Transforming Objects Throughout the first hours, you’ve used some of the techniques I’ll be covering in this hour. You already know how to use the Selection tool to select an object, and you’re familiar with using the Transform palette to move and resize objects. This time around, the goal is to get you using all the various tools and methods to select, move, and resize objects. I wanted you to have a good grasp of what objects are; how they are created; and how to perform grouping, combination, and edits on them before going into great detail as to how to use the techniques you’ll find in this hour. In this hour, you’ll learn about the following: • Using LiveMotion’s selection tools • How to move objects • Altering an object’s size
08 0672323125 CH05
4/22/02
12:29 PM
Page 94
94
Hour 5
These techniques help you manage individual, grouped, and combined objects within LiveMotion. As your designs become more complex, you’ll want to have all these techniques fit snugly into your tool belt.
Selecting and Deselecting Objects with LiveMotion Tools LiveMotion offers several tools to help you select objects. Each tool performs a slightly different function, helping your operations be more flexible and precise. Selection tools in LiveMotion include the following: • Selection—You’ve used this tool before to click an object, which selects the complete object. • Subgroup Selection—Any time an object is grouped, you can use this tool to select individual objects within the group. • Drag Selection—Use this tool to select and drag hidden objects.
Working with the Selection Tool Using the Selection tool is straightforward and something you’ve already done. Let’s review the process now.
A library of objects is available within LiveMotion. If the Library palette is not visible, you can access the Library by selecting Window, Library, and the Library palette will appear.
Task: Selecting an Object To select an object using the Selection tool, perform these steps: 1. Click the Selection tool to activate it. 2. Pass your mouse over the object you want to select. An arrow appears (see Figure 5.1). 3. Click your mouse to select the object.
08 0672323125 CH05
4/22/02
12:29 PM
Page 95
Selecting and Transforming Objects
95
FIGURE 5.1 An arrow appears to indicate that the object has been recognized by the Selection tool.
Another way to select an object is to follow these steps: 1. Activate the Selection tool. 2. Click the canvas and hold down your mouse. 3. Drag your mouse over the entire object to be selected. You see a marquee as you drag (see Figure 5.2). When the object’s bounding box appears, it is selected. After the object is selected, you can perform any number of editing tasks and other modifications on it. FIGURE 5.2 As you drag the tool, a marquee appears to help guide you.
5 If you’re trying to perform an editing operation, you must first select the object to be edited. Otherwise, you may begin to edit the incorrect object! Also, if you fail to select an object, the editing options likely will be unavailable on menus and palettes.
Task: Selecting Multiple Objects If you want to select more than one object, follow these steps: 1. Choose the Selection tool. 2. Click the first object to select it. Move to the second object.
08 0672323125 CH05
4/22/02
12:29 PM
Page 96
96
Hour 5
3. Hold down the Ctrl or Shift key (Windows) or the Shift key (Mac) and click the next object (see Figure 5.3). 4. Repeat the process until all the objects are selected. FIGURE 5.3 Two of three objects selected on a canvas.
Or try this technique to select multiple objects: 1. Activate the Selection tool. 2. Click the canvas and hold down your mouse button. 3. Drag the marquee until it surrounds all the objects on the page. All the objects on a canvas are now selected. You can proceed to edit, group, combine, or perform any object operation you want.
You can also select all objects by choosing Edit, Select All from the menu, or by using the keystroke combination Ctrl+A (Windows) or Cmmd+A (Mac).
Using the Subgroup Selection Tool In Hour 4, “Combining, Grouping, and Editing Objects,” you worked with grouping objects. After an object is grouped, you can move and modify it as a singular entity. But what happens if you want to have the advantage of grouped objects but still be able to work on a single object within the group? You can perform operations on individual objects within a group without affecting the other objects within the same group.
08 0672323125 CH05
4/22/02
12:29 PM
Page 97
Selecting and Transforming Objects
97
Task: Selecting a Single Subgroup Object For this task, you’ll use the Subgroup Selection tool: 1. Begin by creating a group of objects. I’m going to use three objects: a piece of clip art, a geometric shape, and a text object (see Figure 5.4). 2. After the objects are grouped, choose the Subgroup Selection tool by clicking it. 3. Click the object in the group that you want to modify (see Figure 5.5). The object is now selected as a subgroup. FIGURE 5.4 Three objects ready for group selection.
5.5 Selecting a single object to create a subgroup selection.
IGURE
Task: Selecting Multiple Subgroup Objects If you want to make the same modifications to more than one object within the group but leave other objects unaffected, follow these steps to create a subgroup containing more than one object: 1. Click the Subgroup Selection tool to activate it. 2. Click the first object you want to modify. 3. Hold down the Ctrl or Shift key (Windows) or the Shift key (Mac) and click the second object you want to make a part of the subgroup (see Figure 5.6). 4. Continue selecting objects until you’re happy with the subgroup.
Remember that when you create a subgroup, all objects within that group are affected by a given operation. If you don’t want an object to be edited along with the subgroup, be sure to leave it unselected.
5
08 0672323125 CH05
4/22/02
12:29 PM
Page 98
98
Hour 5
FIGURE 5.6 Choosing several objects to create a subgroup.
You can now edit or modify the selected objects.
Working with the Drag Selection Tool Hour 4 discusses how objects are created in stacks. Sometimes, an object gets hidden in the stack, and you’ll want to unhide it to perform additional operations.
Task: Unhiding an Object To unhide an object using the Drag Selection tool, follow these steps: 1. Activate the Drag Selection tool by clicking it. 2. Click and hold down your mouse button. Drag the marquee over the area of the canvas where you believe the object to be. 3. When the object is found, its bounding box appears. It’s now selected (see Figure 5.7). You can now click the object and move it to unhide it. FIGURE 5.7 Using the Drag Selection tool to find hidden objects.
If more than one object is hidden, you can select both objects by dragging the marquee across the canvas until they are selected.
08 0672323125 CH05
4/22/02
12:29 PM
Page 99
Selecting and Transforming Objects
99
Deselecting Objects No matter how an object is selected, there are going to be times when you’ll want to deselect it. This task is easy and can be accomplished using any of the selection tools. To deselect by clicking, simply choose a selection tool, select the object, and with the Shift key pressed down, click the object to deselect it. Of course, you may want to deselect all your selected objects. If this is your intent, you can deselect all by choosing Edit, Deselect All or by clicking a part of the canvas that has no object. The entire selection is deselected.
Moving Objects One thing you can do with selected objects is move them. Whether the movement is to help arrange objects on a page or to precisely position an object within a composition, LiveMotion offers tools to get the job done. The following ways are effective methods of moving objects in LiveMotion: • Select and drag the object using any selection tool. • Use the arrow keys on the keyboard. • Use the Transform palette. Let’s take a closer look at these options.
Moving an Object with the Drag Method Moving an object from one location to another is easy using the drag method. Although this method is not particularly precise, it is effective to shift objects around in a composition. You can move an object on the canvas from one location to another by selecting the object and dragging it to its new position. You can then deselect the object and move another, or keep the object selected and make edits and modifications to it. Interestingly, you can use this method to drag an object to another canvas or another application.
Task: Moving Objects to Another Canvas To move an object from one LiveMotion canvas to another LiveMotion canvas, perform the following steps: 1. Be sure both canvases are open. Select Window, Tile to arrange the canvases. 2. Click a selection tool to activate it.
5
08 0672323125 CH05
4/22/02
12:29 PM
Page 100
100
Hour 5
3. Select the object to be moved. 4. Click the object and, holding down the mouse button, drag the object to the new canvas. 5. Drop the object. Your object now appears on the second canvas (see Figure 5.8). FIGURE 5.8 Using the drag method to move an object to another canvas.
When you use this method, the original object remains on the first canvas. In essence, this operation is like a copy operation but uses the drag method. If you want to get rid of the object in the original document, select it and delete it by pressing the Delete key.
As many of you might have guessed by now, you can also use the drag method to move objects from a canvas in LiveMotion to a canvas in another application such as Photoshop or Adobe Illustrator.
Task: Moving a Canvas to Another Application Canvas Follow these steps to move a LiveMotion canvas to another application canvas: 1. Be sure that both programs are open and that a new canvas has been created in the receiving application.
08 0672323125 CH05
4/22/02
12:29 PM
Page 101
Selecting and Transforming Objects
101
2. In LiveMotion, click a selection tool. 3. Click the object to be moved to the new application. 4. Holding down your mouse button, drag the object to the new application canvas. 5. Drop the object into the receiving application (see Figure 5.9). As with canvas-to-canvas operations in LiveMotion, the original stays put in LiveMotion. You can keep it there or delete it, depending on your needs. FIGURE 5.9 I dragged the object into Photoshop, where I can now modify it further.
5 If you have more than one object on a canvas and want to move several objects in unison, you can select each of those objects. All selected objects move when you move any one of the selected objects.
Using the Arrow Keys Another means of moving LiveMotion objects is to use the four arrow keys found on your keyboard: left, right, up, and down.
08 0672323125 CH05
4/22/02
12:29 PM
Page 102
102
Hour 5
Task: Moving an Object with the Arrow Keys To move an object using the arrow keys, follow these steps: 1. Select the object. 2. Press the arrow key of your choice. You can switch keys to go in a different direction, too. For example, if you want to move the object up and left, first press the up arrow key and then the left arrow key. 3. Continue pressing the keys until the object is moved to its new location.
Each time you press the arrow key, the selected object moves one pixel in the direction you’ve chosen.
To move objects more quickly with the arrow key, hold down the Shift key when you press the arrow. This moves the object 10 pixels instead of only 1.
Object Positioning with the Transform Palette Another way of moving objects in LiveMotion is to use the Transform palette. You had some practice transforming objects in Hour 1, “Creating Simple Objects.” Here, you’ll learn how to position multiple objects using the same basic principles learned there. The Transform palette can be used to precisely move an object you’ve created in or imported into LiveMotion. You can move the object along the x (horizontal) or y (vertical) axes.
For more information about the Transform palette, see Appendix A, “Learning LiveMotion Features.”
Task: Positioning Multiple Objects Horizontally To position two (or more) objects along the horizon, follow these steps: 1. Make sure that the Transform palette is available. 2. Choose a selection tool. 3. Click the first object to select it.
08 0672323125 CH05
4/22/02
12:29 PM
Page 103
Selecting and Transforming Objects
103
4. Hold down the Shift key. 5. Click the second object. Both objects should now be selected. 6. In the Transform palette, enter the numeric value for the position, along the |horizon line, for both objects. The objects move to the correct position (see Figure 5.10). FIGURE 5.10 The objects have been moved to the same point on the horizon line.
Choose Object, Align, Horizontal Centers as a quick method of aligning objects along the horizon.
Of course, you can take two or more objects situated on the horizon (see Figure 5.11) and place them along the vertical axis as well. FIGURE 5.11 Objects positioned on the horizon.
Task: Positioning Multiple Objects Vertically Follow these steps to place two or more objects along the vertical axis: 1. With the Transform palette available, choose a selection tool. 2. Select the first object. 3. Hold down the Shift key.
5
08 0672323125 CH05
4/22/02
12:29 PM
Page 104
104
Hour 5
4. Select the second object. Both objects are now selected. 5. In the Transform palette, enter the numeric value for the position, along the y axis, for all objects. The objects move into position (see Figure 5.12). FIGURE 5.12 The objects have now been moved to the same point along the vertical axis.
Choose Object, Align, Vertical Centers as a quick method of aligning objects along the vertical axis.
Of course, if you attempt to move objects to the same vertical and horizontal positions, they will overlap one another. Although you can certainly do this if you want, make sure that it is in fact what you want to do, or you will have to undo the object positioning.
Resizing Objects There will be many times when you’ll want to alter the size of an object. This is one of the benefits of vector art—the capability to smoothly alter an object’s dimensions without losing quality. So if you’ve drawn an object using LiveMotion or another compatible vector drawing program, or you’ve created a vector-based text object, you can modify the size of this object using various methods available within LiveMotion.
08 0672323125 CH05
4/22/02
12:29 PM
Page 105
Selecting and Transforming Objects
105
Nonvector objects, such as images that have been imported or placed, lose integrity when their size is altered. Typically, you can make such objects smaller without noticeable loss, but if you try to enlarge them, they become blurry.
You can resize objects in LiveMotion by selecting and dragging on one of the object’s corner handles, or by using the Transform palette to manage a more precise resizing operation. You can also resize more than one object at the same time by selecting all the objects you want to resize and using the Transform palette or resizing manually.
Resizing by Dragging You can resize objects in LiveMotion using a corner handle. This is a special handle that appears when you pass your mouse across a corner of a selected object’s bounding box—with the exception of the upper-right corner (see Figure 5.13). FIGURE 5.13 The corner handle is used to drag and resize LiveMotion objects. Corner Handle
5 The upper-right corner is reserved for the rotation tool. For resizing, select one of the other corners of the bounding box.
Task: Resizing an Object Follow these steps to resize an object without constraining the object’s proportions: 1. Choose any selection tool and select the object. 2. When the bounding box appears, pass your mouse over the corner. When the corner handle appears, click and hold down your mouse button. 3. Drag the handle. The object follows your direction, maintaining its anchor at the center point but adapting to your modifications as you go. 4. When you are satisfied with the size change, release the mouse button.
08 0672323125 CH05
4/22/02
12:29 PM
Page 106
106
Hour 5
You can now save your file and continue modifying as you see fit.
Task: Constraining an Object’s Proportion During Resize If you want to resize an object but want it to resize evenly, with the proportions of the object kept constrained (the width and height change equally), you can do so by following these steps: 1. Click a selection tool. 2. Click the object you want to resize to select it. The bounding box appears. 3. Press and hold down the Shift key. 4. Pass your mouse over a corner of the bounding box. When the corner handle appears, click and hold down your mouse button, retaining your hold on the Shift key. 5. Drag the corner. The object resizes proportionately. 6. When you’re happy with the size, release the mouse button first, and then release the Shift key.
If you want to change just the height of an object, drag only the top or bottom middle handle, not a corner handle. Similarly, drag the left or right middle handle to change the width but not the height of the object. This process does not allow for proportional resize.
You can resize an object by using the Transform palette. This allows for finer control over the precise size of the object. You can resize multiple objects by selecting both objects and then using the Transform palette to update the objects’ size. Both objects update to the same size. Similarly, you can resize objects manually by selecting all the objects you’d like to resize, and dragging the corner handle of any of the objects.
Summary You’ve spent this hour learning to manipulate any object on a page. If you want to select, move, resize, align, or distribute the individual building blocks of your designs, you now have the tools and the know-how to do so.
08 0672323125 CH05
4/22/02
12:29 PM
Page 107
Selecting and Transforming Objects
107
Next up? You’ll learn how to work with object layers to gain even more control over their position and behavior.
Q&A Q I want to perform numerous selection operations. Do I have to keep switching between selection tools? A It depends on what you’re trying to do. If you want to select an object within a group, use the subgroup selection tool. If you want to select a hidden object, use the drag-selection too. For most other tasks, you can use the standard selection tool to perform selection operations. Q I want precise control over the placement of my objects on the canvas. How can I get this kind of control? A First, make sure that your rulers and grid are turned on (see Appendix B, “Setting Preferences and Working with the Composition Area”). Check the Snap to Grid option. Then, use the Transform palette to size and position objects along the grid, using your rulers and the numeric positioning available with the Transform palette to gain precise control over your objects.
Quiz 1. True or False: The Selection tool can be used to move objects. 2. You have three objects but want to select only two of them. Describe how to do this. 3. True or False: You can resize an image by selecting and grabbing the upper-right corner of the bounding box.
Quiz Answers 1. True! Choose the Selection tool, click on your object, hold down the mouse button, and drag the object to the new position. 2. To select two of three objects, choose a selection tool, click the first object to select it, and then Shift+click the second object. Leave the third object unselected. 3. False. The upper-right corner is used for rotation, not resizing.
5
08 0672323125 CH05
4/22/02
12:29 PM
108
Page 108
Hour 5
Activities To solidify your understanding of how to select, move, and resize objects, try out these activities: 1. Create a composition using multiple objects: geometric, image, and text. Position the objects vertically. 2. Using the same composition, undo the preceding operation. Now, position the objects horizontally. 3. Resize all the objects independently.
09 0672323125 CH06
4/22/02
12:30 PM
HOUR
Page 109
6
Working with Object Layers As your LiveMotion skills become more advanced, you’ll need more flexibility to experiment and create complicated compositions. Object layers are a powerful method that enables you to do just that. In this hour, you’ll learn about the following: • What object layers are, and how they work • How to use the Object Layers palette • Changing object layer order • Using the Layer palette to modify individual object layers Whether you want to apply effects, create numerous versions, or simply experiment with your composition while keeping certain elements intact, object layers are one way to expand your LiveMotion horizons.
09 0672323125 CH06
4/22/02
12:30 PM
Page 110
110
Hour 6
All About Layers When I was a kid, I liked to bake crazy cakes. Part of the fun was trying to create as many layers of rich chocolate cake as I could, with each independent layer containing as many different flavors of frosting as I could add. Object layers in LiveMotion are similar. The idea is to have a number of copies of your object stacked on top of one another. Unless you hide the object layers, you can see each object layer’s attributes in the final composition. What’s more, you can make changes to each object layer independently, so although the individual object layers are made of the same stuff, the “frosting” on each object layer is a different flavor.
An Object layer is a copy of the object only. This is distinctly different from Photoshop layers, which are document-wide.
Let’s say that you create a text object in blue. Then, you want to add a shadow to it. You can create another object layer and apply the shadow to that layer. Now you have two object layers: the first one with the object in blue (no shadow), and the second one with the object and a shadow (see Figure 6.1). FIGURE 6.1 An object created using two LiveMotion layers: the top layer is blue and the bottom layer includes the shadow.
You can then continue adding object layers and various components of what will make up a final composition. With object layers, you can then keep all the individual components of that object, save any number including only one or all of the object layers to a separate file, and modify any individual object layer as you see fit.
Using the Library, Styles, Properties, and Transform palette options affects all the selected object’s layers, whereas the Layer, Color, Opacity, Filters, Distort, 3-D, Gradient, and Textures palette options influence only the individual, selected object layer. Be sure that you use the correct approach to get the results you want!
09 0672323125 CH06
4/22/02
12:30 PM
Page 111
Working with Object Layers
111
Another scenario would be if you wanted to create an object and store it with various colors or style variations intact. This would be especially helpful if you had a Web site on which you wanted to change the graphic regularly, each time altering its color or style. You could create the composition with each variation stored on a layer, and then save it to native LiveMotion format. Then, you’d simply open that file and modify the specific object layer or layers that you wanted to update.
LiveMotion allows you to have 99 layers per object, and as many objects as your system can accommodate. If you have limited RAM or processing power, the more objects and object layers you have in a composition, the slower the editing process becomes.
These are just two examples of how object layers can work to your advantage. As you work through the exercises in this hour, you’ll undoubtedly find other ways of using them that make your graphic production work easier and, ultimately, more pleasurable.
Be sure to check out Part III of this book, “Color, Shape, and Style.” The hour lessons in that section will teach you how to work with color, make modifications to shapes, and use the powerful design options available in LiveMotion styles.
Using the Object Layers Palette The main control center for object layers is the Object Layers palette. You’ll use this palette to create and control each individual object layer. If you don’t see the Object Layers palette on the desktop, select Window, Object Layers, and the palette appears (see Figure 6.2). FIGURE 6.2 The Object Layers palette.
Delete layer Duplicate layer
New layer
6
09 0672323125 CH06
4/22/02
12:30 PM
Page 112
112
Hour 6
Figure 6.2 shows the Object Layers palette. I’ve created two layers so that you can see how the layers are displayed. Note also the New Layer, Duplicate Layer, and Delete Layer icon options. Let’s put the palette to work!
Creating Object Layers In this section, you’ll learn to create a new object layer. Let’s begin with a clean canvas and build from there.
If you’re used to working in Photoshop, remember that Photoshop layers are document-wide, whereas object layers in LiveMotion are simply the individual objects stacked on one another.
Task: Creating Object Layers To create a new object layer, complete the following steps: 1. Create a new file by selecting File, New. Modify the canvas size as you want and click OK. 2. Draw, place, or add a typographic object to the canvas. I’m going to use a text object. 3. Bring up the Object Layers palette by selecting Window, Object Layers (though it may already be open). 4. Click the New Layer icon (refer to Figure 6.2). A new layer appears (see Figure 6.3) . Alternatively, you can use a standard menu option to add a new object layer. If you prefer to work this way, here’s what to do: 1. Select File, New, and size your canvas. Click OK when finished. 2. Draw, place, or set a type object on the canvas. 3. Choose Layer, New Layer from the main menu. The new object layer is created. You can now continue adding layers as you see fit.
To add a layer using keystrokes, press Ctrl+L (Windows) or Cmmd+L (Mac).
09 0672323125 CH06
4/22/02
12:30 PM
Page 113
Working with Object Layers
113
FIGURE 6.3 Creating a new layer.
Each new object layer appears in the Object Layer palette with a numeric value (Layer 1, Layer 2, and so on) and a preview pane showing a small image of the layer and what it contains. This preview is referred to as a thumbnail. You can modify the way your object layers are presented by choosing from four available views.
NEW TERM
Don’t like what you see on your object layer? You can clear all attributes by selecting the offensive object layer in the Object Layers palette and then choosing Layer, Clear Layer Attributes from the main menu. This returns the object layer to its state prior to any modifications.
Selecting and Naming Layers Choosing the right object layer with which to work is an important step. If you fail to select the correct layer, you’ll find yourself undoing your hard work. Giving a layer a custom name enables you to easily identify individual layers by their specific features. If you have more than one object layer and you want to modify a specific layer, you need to select it first.
6
09 0672323125 CH06
4/22/02
12:30 PM
114
Page 114
Hour 6
Task: Selecting Object Layers To select a layer, complete the following steps: 1. Open a LiveMotion composition that contains a layered object, and select the object. 2. Select Window, Object Layers to bring up the Object Layers palette. 3. Click once on the object layer you want to select. When the layer has been selected, you’ll notice that it is highlighted in the palette. You can now make modifications to this object layer. You can also select an object layer using the Layer menu. Simply follow these steps: 1. Select your object, then choose Layer, Select Layer from the main menu. A new menu appears with the each of the layers listed. 2. Highlight the object layer you want to select. The individual object layer is highlighted in the Object Layers palette, reflecting that it is in fact selected. After you have several layers, it becomes difficult to quickly select them without some identifying feature. Naming layers helps you describe your layers and makes the process of identification and selection easy.
Task: Naming Object Layers To name a layer, complete the following steps: 1. Make sure that your composition is open and you have selected the specific layered object. 2. Bring up the Object Layers palette if it’s not already visible. 3. Double-click the object layer you want to name. The Name dialog appears (see Figure 6.4). 4. Enter a descriptive name into the text box. When you’re finished, click OK. FIGURE 6.4 The Name dialog allows you to enter your layer’s descriptive name.
At this point, you can choose to name all your object layers. This enables you to keep track of which layers contain which information (see Figure 6.5). This is especially
09 0672323125 CH06
4/22/02
12:30 PM
Page 115
Working with Object Layers
115
helpful when you’re saving a file for later use—no need to spend extra time reviewing which effects are stored on each individual layer. FIGURE 6.5 The Object Layers palette with a named sequence of layers.
Keep layer names simple and to the point. If you have a drop shadow on an object layer, name it “drop shadow.” Cryptic layer names will only serve to confuse.
Displaying and Hiding Layers To see how your composition looks with or without the influence of one or several layers, you can choose to display or hide the object layer or layers in question.
Task: Hiding an Object Layer Let’s begin by hiding an object layer using the Object Layers palette: 1. Bring up the Object Layers palette. 2. Locate the object layer you want to hide. Next to the layer name, along the left, you’ll see the image of an eye. 3. Click the eye once. It disappears, as do the details of the corresponding layer. The layer is now hidden (see Figure 6.6). Fear not—the information on it is still there; it’s just not visible! You can hide as many layers as you want to get a sense of how the object looks with different layers applied, and others not applied.
Task: Displaying an Object Layer To display a layer that’s been hidden, follow these steps: 1. Select Window, Object Layers to bring up the palette. 2. Find the layer you want to display. Where the eye once was, there is now an empty box.
6
09 0672323125 CH06
4/22/02
12:30 PM
Page 116
116
Hour 6
Top layer
FIGURE 6.6 The top layer in this composition is hidden.
3. Click the box once. The eye reappears, and the hidden layer is revealed again (see Figure 6.7). FIGURE 6.7 Revealing the hidden layer.
If you want to hide all layers but one, Alt+click (Windows) or Option+click (Mac) the eye icon for the layer you want to remain. The other layers are immediately hidden. To have the other layers reappear, simply Alt+click or Option+click the eye icon again.
You can hide and unhide layers as often as you want. If you save a file to native LiveMotion format, hidden layers remain hidden with the data intact. You can unhide them after you open the LiveMotion file.
Duplicating Layers To make a copy of a layer, use the Object Layer palette’s Duplicate Layer icon. This is a fast and easy way to create a copy of a given layer.
09 0672323125 CH06
4/22/02
12:30 PM
Page 117
Working with Object Layers
117
Task: Duplicating an Object Layer To make a duplicate of an object layer, complete the following steps: 1. Open the Object Layer palette by choosing Window, Object Layer. 2. Select the object layer you want to duplicate by clicking it once. 3. Click the Duplicate Layer icon at the bottom of the palette (refer to Figure 6.2). The new layer appears in the Object Layer palette with the same name as the layer it was copied from (see Figure 6.8). Make any changes you want to this layer and then rename it so that it has a distinct identity within the layer stack. FIGURE 6.8 Creating a duplicate layer.
You can also duplicate the layer from the main menu. To do so, select Layer, Duplicate Layer. The copy appears in the Object Layer palette, ready for further modifications.
Deleting Layers When you are sure that you have absolutely no further use for a given layer, you can delete it. But because LiveMotion allows you to hide layers and save them, if you think you might want to use a given layer in the future, don’t delete it!
Task: Deleting an Object Layer If you really want to get rid of a layer, here’s how: 1. Open the Object Layer palette. 2. Select the unwanted layer. 3. Click the Trash icon at the bottom of the palette (refer to Figure 6.2). Your layer is now deleted. If you want to restore it, you can do so by immediately selecting Edit, Undo Delete Layer, or using the keystroke combination Ctrl+Z (Windows) or Cmmd+Z (Mac).
6
09 0672323125 CH06
4/22/02
12:30 PM
Page 118
118
Hour 6
You can also delete a layer by selecting the layer in the Object Layer palette and then choosing Layer, Delete Layer from the main menu.
Arranging Layers Because layers are stacked like so many pancakes, they fall into a specific stacking order. If you made three pancakes—blueberry, strawberry, and plain—you could conceivably decide that you wanted the pancakes to be stacked in some particular order. Because more often than not you’ll create layers as you go rather than in a specific order, you may ultimately want to reorder your stack. Furthermore, let’s say that you want to bring a specific layer to the forefront, or move another to the back. You can achieve all this from the Layer menu. You have four possible arrangements, as shown here: • Bring to Front—This option brings the selected layer all the way to the front (or top) of the stack. • Bring Forward—Choosing this option moves the selected layer one position up in the stack. • Send Backward—If you want to move a layer one step back, choose this option. • Send to Back—When you want to position a layer at the bottom of the stack, make this selection.
Task: Arranging an Object Layer To arrange an object layer, complete the following steps: 1. Select the layer to be arranged in the Object Layer palette by clicking it once. 2. From the main menu, choose Layer, Arrange. This opens a submenu. 3. Now choose one of the four possible layer arrangement options. The layer repositions itself accordingly. After the layer has been repositioned, the new position is reflected in the Object Layer palette.
For quick arrangement, you can drag the layer of choice to the new position. In the Object Layer palette, click your mouse and hold it down over the layer to be moved. Drag it up or down to another position in the stack, and drop the layer. It is now rearranged in the stack.
09 0672323125 CH06
4/22/02
12:30 PM
Page 119
Working with Object Layers
119
Modifying Object Layers with the Layer Palette You’ve spent most of your time thus far concentrating on the tools available from the Object Layers palette. However, there’s also a Layer palette (see Figure 6.9), which you can use to control the fill, position, width, and softness of individual object layers. Fill menu
FIGURE 6.9 The Layer palette. X Offset slider and text box Y Offset slider and text box Width slider and text box Softness slider and text box
These are the options available via the Layer palette: • Fill—Use this to allow a color, background, texture, or image to be applied to only the selected object layer. • X and Y Offset—These options enable you to offset an object layer horizontally and vertically from other layers within the composition. • Width—You can make a given layer wider or narrower in relation to other object layers using this option. • Softness—Thisoption adds a soft blur (referred to as a Gaussian blur) to the selected object layer. The following sections will help you learn in detail how to use these options.
Creating Layer Fills To control precisely which layer a texture, color, background color, or image affects, you can work with layer fills.
Task: Filling an Object Layer To fill an object layer, follow these steps: 1. Open or create a composition that contains an object made up of several object layers. 2. With the Object Layers palette open, find the specific object layer for which you want to modify one of the fill options.
6
09 0672323125 CH06
4/22/02
12:30 PM
Page 120
120
Hour 6
3. Bring up the Layer palette by choosing Window, Layer. 4. From the Fill menu on the palette, choose the type of fill you want. Options include Color, Image, Background, and Textures. 5. Make the modification using the appropriate LiveMotion tools. After you are finished modifying the layer, the changes are reflected within the composition (see Figure 6.10). FIGURE 6.10 I added a texture to my top layers.
Offsetting Layers This seemingly easy but powerful method can be used to create edges and other interesting effects. The idea is to offset one layer horizontally, vertically, or both.
Task: Offsetting Object Layers Horizontally To offset a layer horizontally, perform these steps: 1. Select the layer to be offset in the Object Layer palette. 2. Move to the Layer palette. 3. Use the X Offset slider or enter a negative or positive number to offset the layer to the left or right, respectively. Your layer is now offset!
09 0672323125 CH06
4/22/02
12:30 PM
Page 121
Working with Object Layers
121
Task: Offsetting Object Layers Vertically If you want to offset a layer vertically, follow these steps: 1. Choose the layer to be vertically offset. 2. Move to the Layer palette. 3. Use the Y Offset slider or enter a negative or positive number (from –50 to +50) to offset the layer to the top or bottom, respectively. Of course, if you want to offset both horizontally and vertically, simply select the same layer for the X and Y offset steps. Figure 6.11 shows an example of a moon shape created using two layers and offsetting one layer.
You can offset a layer by dragging it. To do so, select the Layer Offset tool from the toolbox. Then select the layer. Use the tool to drag the layer until you’re happy with its position. Another option is to simply press Ctrl (Windows) or Cmmd (Mac). When you do this and pass your mouse over the selected layer, the Layer Offset tool immediately comes up, and you can then drag the layer to the location where you want it to reside.
FIGURE 6.11 I created this crescent moon by creating two layers, each a circle. I used a color fill for the bottom layer and chose Fill With, Background in the Layer palette for the top layer.
6
Modifying the Width of a Layer Although it sounds as if this tool only makes a layer wider, it actually makes the layer both wider and taller. This can be helpful in creating various effects.
09 0672323125 CH06
4/22/02
12:30 PM
Page 122
122
Hour 6
Task: Modifying an Object Layer’s Width To modify a layer’s width, follow these steps: 1. In the Object Layer palette, select the layer to be widened. 2. Make sure that the Layer palette is open. If it’s not, choose Window, Layer. 3. Use the Width slider or enter a number in the text box (–10 through +10). A negative value makes the layer narrower, and a positive value makes it wider. Figure 6.12 shows an effect created by using two layers, each with a different color, and then making the back layer wider than the front layer. This creates a border, or “stroke,” effect. FIGURE 6.12 This stroke was created using the Width option in the Layer palette.
Adjusting Layer Softness Softening a layer is simply a matter of blurring the layer’s content. As with other Layer palette options, this technique enables you to create a range of effects.
Task: Softening an Object Layer To soften a layer, use these steps: 1. In the Object Layer palette, choose the layer you want to soften. 2. If necessary, select Window, Layer to bring up the Layer palette. 3. Drag the Softness slider to the right to increase the softness, or enter a value 0–10 in the text box. The higher the value, the more diffuse the blur. Figure 6.13 shows a drop shadow created using layers. I did this by first offsetting the back layer to a value of 3 on both the X and Y axes. Then, I softened the back layer to achieve a professional shadow effect.
09 0672323125 CH06
4/22/02
12:30 PM
Page 123
Working with Object Layers
123
FIGURE 6.13 A drop shadow effect created using layer offset and softness.
Summary Object layers are the rich cake of which so many LiveMotion object designs are made. You now understand not only what they are but also how to use them in myriad ways to maximize your workflow, work experimentally, and create sophisticated design elements. By becoming familiar with the Object Layer palette and the Layer palette, you are also now able to make strategic decisions as to how to approach a composition, from each of its independent elements to its final look and feel. In the next hour, you’ll take a closer look at using color to make your designs more energetic and vibrant.
Q&A Q I want to rename my layer. How do I do this? A Renaming layers is achieved in the same way as naming a layer. In the Object Layer palette, double-click the layer. The Name dialog appears. Now, enter the new name, and voila! You’ve renamed your layer. Q My composition has five object layers. Three are hidden. I want to export exactly what I see on the canvas to a Web file type but save all the data. What do I do? A When you go to export the composition to a Web format (see Hour 21, “Optimizing and Exporting LiveMotion Files”), anything that is hidden will not export with the file. Furthermore, only visible layers will be printed. However, if you save to the native LiveMotion file format, you will save all the data, including everything on the hidden layers.
6
09 0672323125 CH06
4/22/02
12:30 PM
Page 124
124
Hour 6
Quiz 1. How do you create a new layer? 2. What steps do you take to clear a layer’s attributes? 3. How do you hide and unhide a layer?
Quiz Answers 1. Click the New Layer icon in the Object Layers palette or select Layer, New Layer from the menu. 2. Select the layer in the Object Layers palette. Then choose Layer, Clear Layer Attributes from the menu. 3. In the Object Layers palette, click the eye icon next to the layer you want to hide. To unhide the layer, click the empty box. The eye icon and the layer data reappear.
Activities To help solidify and build on your LiveMotion object layer skills, try these exercises: 1. Place an image on a fresh canvas. Now create several object layers for the placed image. Modify each layer using the options available in the Layer palette and see what clever designs you can come up with! 2. Try the same experiment with a text object. Set the text on a fresh canvas, make several layers, and modify each layer. Be sure to try adding fills and textures, and place an image onto one of the layers using the File, Place As Texture command sequence.
10 0672323125 PART 03
4/22/02
12:30 PM
Page 125
PART III Color, Shape, and Style Hour 7 Using LiveMotion’s Color Tools 8 Working with the Library Palette 9 Applying LiveMotion Styles 10 Textures, Gradients, Distortion, and Effects 11 Matting and Masks
10 0672323125 PART 03
4/22/02
12:30 PM
Page 126
11 0672323125 CH07
4/22/02
12:30 PM
HOUR
Page 127
7
Using LiveMotion’s Color Tools Color brings personality to your designs. Let’s say you want to create a Web site that expresses friendliness and compassion. You would choose colors such as warm oranges and yellows. Or perhaps you want a site to project sophisticated professionalism. Cool blues will help. If you want to express serenity, design the site with pastels. For energy and wildness, select neon colors. In this hour, you’ll learn about the following: • Web color concepts • Working with LiveMotion color tools • Using the Color palette • Creating Color Schemes in LiveMotion No matter what personality you want your designs to have, color will be a major part of it. LiveMotion offers various tools and techniques to enable you to use color creatively and with ease.
11 0672323125 CH07
4/22/02
12:30 PM
Page 128
128
Hour 7
All About Web Color The science of color is complex. Entire books have been written on the subject, and to really teach color concepts here would be impossible. So I’m going to provide the basic things you need to know about color for the Web, and then jump right into how to use LiveMotion to create Web-safe colors.
Check out the “Color Resources” sidebar, later in this section, for additional help in learning about color.
Color on computers is extremely variable. This is because digital color is expressed by a combination of hardware and software working together. Depending on the video graphics card, monitor type, and software operating system in use, color renders according to each person’s computer system and Web software settings. So despite your best efforts to create precise color, it’s difficult to control. NEW TERM Computer color displayed onscreen is based on a color theory referred to as
additive synthesis. This synthesis occurs when three colors—red, green, and blue—are used to create all colors. Graphic designers refer to this color mode as RGB. If there is a zero value for all three components, the result is black. The maximum number of colors available in any one of the RGB components is 255. If all three colors have a value of 255, the resulting mix is white. There are many variants in between, and this is how we get diverse colors for the computer screen. Web color affected by the reality that it is inherently both computer color and browser color together. You see, color has to be seen appropriately within browsers and on certain operating systems. As a result, Web color is severely limited if you want to create stable color across browsers and systems. The total number of Web colors available is 216. This restricted palette is referred to as the Web palette, or the Web-safe palette.
NEW TERM
To Web Color or Not to Web Color? Do you have to use Web color? No, but think carefully about your audience before making such a decision. For example, the statistics gathered at my Molly.Com Web site have found that on average about 86% of my audience has the color technology necessary to display standard RGB rather than Web color.
11 0672323125 CH07
4/22/02
12:30 PM
Page 129
Using LiveMotion’s Color Tools
129
But because I tend to be conservative and design for as many people as possible, I still work with Web-safe colors, especially insofar as any background and text is concerned. I’m a little more lenient in terms of the way I produce my graphics because, although they won’t look their best for the 14% whose computers can’t display standard RGB color, they will, in most cases, be readable. When it comes to Web color, knowledge of audience is paramount to how you design your sites.
Web-safe colors are still RGB colors, but they are a select group of RGB colors. Web color is represented as RGB using hexadecimal values in the HTML world. This is because a different numeric method (hexadecimal is base 16) must be used when browsers are asked to display colors. Hexadecimal conversion is an issue for developers working on their own with HTML, and I won’t be going into further detail about it here. Still, it’s an important issue about which you should be aware. Fortunately, LiveMotion makes all this easy for you! You won’t have to suffer through figuring out which colors are Web safe and which are not because LiveMotion contains options that allow you to work in standard RGB mode as well as Web-safe mode. You’ll learn this as you work through the “Working with the Color Palette” section, later in this hour.
Color Resources Some terrific color resources are available to help you gain a better understanding of color in general and Web color in particular. Here are some of my favorites: “Satisfying Customers with Color, Shape, and Type.” My November 1999 “Integrated Design” column in Web Techniques magazine has an excellent section on using color in design (www.webtechniques.com/archives/1999/11/desi/). J.L. Morton’s ColorMatters. Perhaps the most comprehensive Web resource on all things color—science, culture, gender, technology. A fascinating site with tons of resources, including an interactive community (www.colormatters.com/). J.L. Morton’s Color Voodoo. A separate site by color expert J.L. Morton, Color Voodoo features a range of electronic publications about color, including Color Logic for Web Site Design. These books are must-have resources for any designer interested in using color on the Web (www.colorvoodoo.com/). Visibone’s Webmaster’s Color Laboratory. A helpful site with color products specifically geared toward Web designers. I have a helpful poster with all the Web-safe colors, arranged by hue, hanging right above my desk. Check it out (www.visibone.com/colorlab/).
7
11 0672323125 CH07
4/22/02
12:30 PM
Page 130
130
Hour 7
General Color Tools and Techniques Before moving on to examine the palette-specific tools found in LiveMotion, let’s take a look at the general tools used when one is working with color. You’ll want to have these skills in place before using the more advanced palettes. The general tools used to apply color in LiveMotion include the toolbox (to select foreground and background color), and several tools within the box such as the Eyedropper and Paint Bucket tools (see Figure 7.1). FIGURE 7.1 The LiveMotion toolbox.
Paint Bucket Foreground Color
Eyedropper
Background Color
Choosing Foreground and Background Color The color in the foreground location is used to create any object drawn or set onto the canvas. For example, if you draw a rectangle, circle, or polygon, or set type, it appears in the color that is in the foreground. Similarly, the background color of the canvas matches the color of the background option. If you want to select colors for the foreground and background or change foreground and background colors already in use, you’ll have to change the colors in the appropriate toolbox locations.
Task: Changing the Foreground Color To change the foreground color, complete the following steps: 1. Click the foreground color location to make sure that it’s selected. 2. If the Color palette is not visible, select Window, Color. 3. Pass your mouse over the Color palette. The pointer turns into an Eyedropper tool, and you can pick a color. The color now fills the foreground location. Because you’ll likely want to change the background as well, follow this next series of steps.
Task: Selecting a Background Color To select a background color, perform these steps: 1. Click the background color location. A black square appears around it to indicate that it’s selected.
11 0672323125 CH07
4/22/02
12:30 PM
Page 131
Using LiveMotion’s Color Tools
131
2. Move to the Color palette. 3. Pick a color from the Color palette. The background fills with your chosen color. Your background and foreground colors are set. The background of the selected canvas changes to the color you’ve chosen, and any selected objects change to the foreground color. Also, if you create any new objects, they will have the chosen foreground color.
Refer to the “Working with the Color Palette” section, later in this hour, for more details on how to use the palette’s options and views.
Working with the Eyedropper Tool Let’s say that your composition includes an image object, and you want to choose a foreground or background color from that image. Perhaps you have an object in the composition you created earlier, and later changed the foreground or background color. Or maybe you have several compositions open and want to use a color from one of the compositions in another composition. You can quickly grab a color from within any open composition in LiveMotion using the Eyedropper tool.
Task: Selecting Color with the Eyedropper To select a color with the Eyedropper tool, follow these steps: 1. Click the foreground or background color location, depending on which you want to fill with the soon-to-be-selected color. 2. Click the Eyedropper tool on the toolbox (refer to Figure 7.1). The cursor changes to an eyedropper. 3. Move the Eyedropper over the color you want to grab and place into the foreground or background. 4. Click the Eyedropper once. The location color is now replaced with your selected color.
If you want to add the color to a specific object or several objects, select the objects and then follow the preceding steps. The objects fill with the chosen color.
7
11 0672323125 CH07
4/22/02
12:30 PM
Page 132
132
Hour 7
Using the Paint Bucket The Paint Bucket allows you to apply color to numerous objects and canvases with ease. If you have four canvases open and you want to change the background of all the canvases, you can do so using the Paint Bucket tool. The Paint Bucket tool also allows you to apply color to any selected objects.
Task: Applying Color with the Paint Bucket To apply color using the Paint Bucket tool, perform the following steps: 1. Select the foreground box in the toolbox and fill it with the desired color. 2. Select the object you want to color. 3. Click the Paint Bucket tool to select it. The cursor changes to an image of a small paint bucket. 4. Click once on any background or object to fill it with the selected color.
If you use the Paint Bucket tool on an object with multiple layers, it fills the top layer by default, unless that layer is a texture. If you want to fill additional layers, simply select one of the layers in question using the Object Layers palette (see Hour 6, “Working with Layers”) and click the Paint Bucket tool on the object. The layer fills with the foreground color. Continue filling any other layers, objects, or composition backgrounds as you deem appropriate.
Working with the Color Palette Now that you have the basic tool usage down, it’s time to look at the Color palette more carefully. The Color palette (see Figure 7.2), despite its small size, is quite powerful. It offers various options including Foreground and Background selections directly within the palette, six color views, and a method to switch from general color to the Web-safe palette. The Foreground and Background Color boxes work in harmony with those found in the toolbox. If you want to change the foreground color directly from the Color palette, click the Foreground box. Similarly, to change the background color, click the appropriate box in the Color palette. Then fill with the color of your choice. The change is reflected in the toolbox too.
11 0672323125 CH07
4/22/02
12:30 PM
Page 133
Using LiveMotion’s Color Tools
133
Foreground Color Background Color
FIGURE 7.2 The Color palette, Saturation view.
Slider to adjust color Cursor for color selection Color readout area
Web-safe colors cube
The colors within a given view are displayed in the color readout area. You’ll read more about views in just a bit. However, notice that in Figure 7.2 there’s a small cross over a color. This cross is a cursor-style indicator that shows you which color you’re choosing as you use the Color palette’s Eyedropper to select a color. You’ll also see a slider, which appears either vertically, as in Figure 7.2, or horizontally, as in other color views. Use the slider to change the colors available in the readout area. The Web Safe Color Cube is your quick-stop control for switching any color view to Web-safe color. Simply click the check box, and when the check appears, the colors become limited. You are now working in Web-safe mode, which allows cross-platform, cross-browser consistency between colors.
Color Views Depending on the kind of color work you’re doing, you may well benefit from working in one of the six available color views that LiveMotion offers.
Task: Changing Views To change from the current view to a different view, perform these steps: 1. Click and hold down your mouse over the Color palette’s upper-right arrow. A flyout menu appears, and you see six views. 2. Drag your mouse down until the view you want to choose is selected. 3. Release the mouse. The palette changes views. Let’s take a closer look at what the different view choices are and how they are used (see Figure 7.3): • Saturation view—Saturation refers to the strength of a color, beginning with its most saturated form and slowly adding gray to the color to change the hue until it turns to black. Saturation is also referred to as chroma.
7
11 0672323125 CH07
4/22/02
12:30 PM
Page 134
134
Hour 7
• Value view—Value describes how light or dark a given color is. • Hue view—This view shows the literal color as it relates to other, similar colors. • HSB view—HSB stands for hue, saturation, and brightness. This view gives you control over the color, its saturation, and how bright it is by providing three independent color sliders that you can use to adjust the selected color. • RGB view—This is the red, green, and blue view. It separates the values of each of these colors, which, as you are already aware, combine to make up colors for the computer screen. This view allows you to control the precise amount of each color to create a complete, single RGB color. • CIE L view—This unusual view shows all the colors that can be detected by color monitors. Any colors that cannot be seen are eliminated from the view. Saturation view
Value view
Hue view
RGB view
CIE L view
FIGURE 7.3 The Color palette, all views.
HSB view
So which view do you use? I prefer working in Hue or RGB view. I use Hue view when I’m looking for colors I might want to use in a new composition, and RGB view to set colors that I have used before and for which I have the specific RGB values at hand. Work with different views until you find the ones that best suit your tastes and needs.
Coloring Compositions Now that you know how to use the basic tools and Color palette, it’s easy to add color to your compositions. Let’s walk through a sequence of exercises that will get you accustomed to using both the tools and the Color palette in harmony. The idea of this exercise sequence is to start from scratch with a new composition, create several objects of different colors, and create layers of color within the object.
11 0672323125 CH07
4/22/02
12:30 PM
Page 135
Using LiveMotion’s Color Tools
135
Task: Adding Background Color To add a background color to a new composition, complete the following steps: 1. Create a new canvas by selecting File, New. When the Composition Settings dialog appears, enter the width and height—I set mine to 400×400 pixels—and click OK. 2. Make sure that you have the toolbox at the ready. If it’s not, select Window, Tools. You’ll also want to have the Color palette open (Window, Color), and the Object Layers palette (Window, Object Layers) as well. 3. In the Color palette, check the Web Safe Color Cube and set the view to RGB. 4. Click the Background Color box. 5. In the Red text box, enter 0. For Green, enter 102. The Blue value should be set to 153. This creates a medium blue. 6. Move to the toolbox and click the Paint Bucket tool to select it. 7. Click once on the canvas. Your canvas background now changes to cornflower blue. At this point, I recommend saving your file to the native LiveMotion format. To do this, select File, Save. Choose a location and give the file a name. I named mine color.liv.
Whenever I’m working on the Mac, I make a conscious effort to add the dot plus the appropriate three-letter suffix (in this case, .liv) to a file. Macs allow you to save a file without the extension. But the problem with this is that if you’re working between computer types or transferring the file to someone using a different kind of operating system, the file will be difficult to recognize. In general, it’s a good practice for Mac-specific designers to get familiar with strict naming conventions and use them to avoid cross-platform confusion. Note that Windows automatically adds the three-letter extension if you don’t type it when saving the file.
Let’s add some objects to color. First, I’m going to create a text object and then add a shape. But before I create my object, it’s a good idea to make sure that I have a color in the foreground that contrasts well with my background. Even if I decide to change the colors of my objects later, I need to be able to adequately see the objects against the background color.
7
11 0672323125 CH07
4/22/02
12:31 PM
Page 136
136
Hour 7
Task: Coloring Objects The first action of importance is to choose a foreground color and then create the object or objects you want to have in your composition: 1. Click the Foreground Color box in either the Color palette or the toolbox. 2. From the Color palette, choose a contrasting foreground color. I’m working with a warm yellow-orange Web-safe color. To get this color, make sure that the Web-safe cube is checked and then choose the RGB view. Enter 255 for the Red value, 204 for the Green value, and 0 for Blue. 3. Click the Ellipse tool and create an ellipse on your canvas (see Figure 7.4). The ellipse has the foreground color. Save the updates to your file by selecting File, Save or by clicking Ctrl+S (Windows) or Cmmd+S (Mac). FIGURE 7.4 Adding a shape object, in this case an ellipse, with a color that is in contrast to the background.
Task: Adding a Second Object on Top Add a second object on top of the ellipse. You’ll want to again use a contrasting color to see what you’re doing. As mentioned, you can change the colors later if you want. Complete the following steps: 1. Deselect the object by clicking elsewhere on the canvas or selecting Edit, Deselect All.
11 0672323125 CH07
4/22/02
12:31 PM
Page 137
Using LiveMotion’s Color Tools
137
2. Click the Foreground color to ready it for a new color selection. 3. In the Color palette, choose a color. I used a Web-safe color with a Red value of 153, a Green value of 0, and a Blue value of 102. The results are a reddish-purple. 4. Click the Type tool in the toolbox. 5. Click the canvas and select a typeface and style. 6. Enter a word. I’ve used my name. Click OK to set the text object. 7. Move the object to a suitable point in the design (see Figure 7.5). 8. Save the updates to the file by selecting File, Save. FIGURE 7.5 Adding a second object, this time a text object with a different color, to the composition.
You can quickly deselect objects using the keystroke combination Ctrl+Shift+A (Windows) or Cmmd+Shift+A (Mac).
To further work out your color muscles, create a layer on one of the objects and add color to it rather than the entire object itself.
Task: Coloring an Object Layer Follow these steps to create and color an object layer: 1. Select an object in the composition. I selected the text object. 2. Choose Layer, New Layer to create a new layer for the object. Name your layers to help identify them. I named the original layer “molly purple” and the new layer “molly white.” 3. In the Object Layer palette, select the new layer (in this case, “molly white”). 4. Click the Foreground color in either the Color palette or the toolbox. Set the color to white. You can do this by selecting white directly from any of the color views,
7
11 0672323125 CH07
4/22/02
12:31 PM
138
Page 138
Hour 7
or by entering the RGB values of 255, 255, and 255 into the respective text boxes within RGB view. Note that this method ensures that the color is exact. The color updates to the selected layer. 5. You can now use the Layer palette (select Window, Layer) to modify the layer itself. I set both the width and the softness to 10 to achieve the effect found in Figure 7.6. To update changes to the file, simply use the quick keystroke combination of Ctrl+S (Windows) or Cmmd+S (Mac). FIGURE 7.6 This composition is composed of two objects and a background and uses four distinct colors: light olive green, pink, purple, and white.
You’re well on your way to being a color expert! Let’s move to another LiveMotion feature that will provide you with even more color management options.
Tapping into the Power of Color Schemes LiveMotion has a unique feature that can inspire and assist designers by providing a range of color schemes. These schemes are based on the principles of analogous and complimentary color.
NEW TERM
Analogous colors are located next to one another on a standard color wheel. Complementary colors are found across from one another on the wheel. Using the Color Scheme palette (see Figure 7.7), LiveMotion gives you the opportunity to work from these principles to see various possibilities for your color work. If you are new to color or want to learn more about how to use color for impact, these schemes not only are useful in your design but also can expand your understanding of how colors can be successfully combined.
11 0672323125 CH07
4/22/02
12:31 PM
Page 139
Using LiveMotion’s Color Tools
139
Color Wheel
FIGURE 7.7 The Color Scheme palette, Honeycomb view.
Schemes
Numeric Menu Include Background Scheme Lock
Two views and six numeric combinations can be created using the Color Scheme palette. This gives you a wide range of options in terms of both how to create a scheme and how many colors are available in a scheme. The Color Scheme palette offers two views, including Triangles (refer to Figure 7.7) and Honeycomb (see Figure 7.8). Triangles view shows the color combinations using overlapping triangles, whereas Honeycomb view displays the colors in a honeycomb shape. Use the view you like best. You can toggle between the two views by using the arrow in the upper-right corner of the Color Scheme palette and selecting the view from the flyout menu. FIGURE 7.8 The Color Scheme palette, Honeycomb view.
You can combine the schemes with numeric values to come up with various color palettes, including the following: • Analogous—This scheme provides a view of the original (referred to as base) color plus any analogous colors. • Split Complementary—This scheme shows the base color, its complement, and its complement’s analogous colors. • Complementary Analogous—Using this scheme shows a base color, its analogous color, and the analogous color’s complements. • Triad—This is a base color and two equidistant colors.
7
11 0672323125 CH07
4/22/02
12:31 PM
140
Page 140
Hour 7
• Tetrad—This is a base color and three colors chosen at equal intervals along the color wheel. • Sextet—This is the base color plus five colors placed at equal distances from one another along the color wheel.
Task: Creating a Color Scheme To create a color scheme, complete the following steps: 1. Make sure that the Color Scheme palette is available by selecting Window, Color Scheme. Make sure that the Color Scheme palette lock is in the unlocked position. 2. Select a base color by selecting the Foreground Color box in either the toolbox or the Color palette and then choosing any color you like from any of the views within the Color palette. If you know the exact values of your desired base color, use the HSB or RGB view and enter the appropriate values. 3. Choose a number and scheme combination. There are numerous combinations, so experiment! 4. Click Include Background on the Color Scheme palette to see a preview of the colors as they’ll appear against the chosen background color. As you choose schemes, they appear in the Color Scheme section of the toolbox (see Figure 7.9). After you have a scheme that you want to use for the duration of your editing time, lock the scheme using the Scheme Lock icon. You can now use any color from within or without the scheme without changing the scheme. FIGURE 7.9 The selected color scheme colors appear in the Color Scheme section of the toolbox. Color schemes
If you don’t lock the scheme, every time you select a new color from the Color palette, the scheme interprets that new color as a base color and creates a new scheme.
11 0672323125 CH07
4/22/02
12:31 PM
Page 141
Using LiveMotion’s Color Tools
141
Summary This was a colorful hour indeed! You’ve learned some basic facts about computer and Web-based color, and you’ve learned to use LiveMotion’s color tools and palettes. Of specific interest is the capability to create and work with schemes. These schemes give you a wide range of color combination options based on color principles, offering diverse and interesting palettes from which to create your designs. In the next hour, you’ll learn to work with an even more powerful feature that LiveMotion offers—the Library palette. This is a palette of shapes you can use to create many interesting and complex designs. But before you move on to that, make sure that your color skills are well-honed by reviewing some frequently asked questions, taking a short quiz, and doing some additional exercises.
Q&A Q If I choose Web-safe color, does it mean that my final Web graphics will be displayed in all Web-safe color? A Nope! Although you are using Web-safe color on flat, controlled areas of a composition, whenever a gradient, texture, light source, or text object is introduced to the composition, unsafe colors will occur. This happens because to create more complex objects, variations of a color must occur. These variations result in unsafe color. Q So why use Web-safe color at all? A Well, it’s in your best interest when color-matching flat color and keeping colors as consistent and close to safe as possible. The closer to Web-safe a color is, the better the chance that the graphic color will be clear and consistent on browsers and systems with color limitations. Q Can I create Web-safe color schemes? A Absolutely! Just be sure that the Web Safe Colors check box is checked in the Color palette before moving to the Color Scheme palette. Then, after you begin working in the Color Scheme palette, the colors will be selected only from the Web-safe options.
7
11 0672323125 CH07
4/22/02
12:31 PM
Page 142
142
Hour 7
Quiz 1. What is the difference between the Eyedropper and the Paint Bucket tool? 2. How do you color a specific layer within a layered object? 3. What are analogous and complementary colors?
Quiz Answers 1. The Eyedropper tool allows you to pick a color; the Paint Bucket tool enables you to apply it. 2. Select the layer using the Object Layer palette, and then apply the color of your choice. 3. Analogous colors appear next to one another on the color wheel. Complementary colors appear across from one another on the wheel.
Activities To test and extend your color skills, try out these exercises: 1. Open the file you created in this hour, color.liv. Now, apply a different color to every portion of the file until the color attributes have been completely altered. Save the new version as color2.liv. 2. Create a color scheme using the Color Scheme palette, and apply the colors to one of the color exercises you’ve completed. Add objects and layers to see how the scheme can be used. Repeat this exercise as many times as you want, trying different schemes each time. This will get you used to working with analogous and complementary colors in numerous contrasts and variations.
12 0672323125 CH08
4/22/02
12:31 PM
HOUR
Page 143
8
Working with the Library Palette LiveMotion is an especially fun and useful program because it not only provides you with all the basics in terms of creating your own graphics and animations, but also has various preset images you can use and modify. In this hour, you’ll learn about the following: • Why shape matters • Working with the Library palette • Creating and storing custom shapes • Removing shapes from the library The LiveMotion library provides both the newcomer and the experienced designer with distinct advantages. The newcomer can use preset shapes from the library to create great-looking graphics, and the experienced designer can use more advanced techniques to create an entirely unique look from a preexisting shape. Furthermore, you can create custom shapes and add them to the library to be used at any time.
12 0672323125 CH08
4/22/02
12:31 PM
144
Page 144
Hour 8
Naturally, the more you work with the program, the better equipped you’ll be—no matter your experience level—to use LiveMotion’s library features to your advantage.
The Importance of Shape Before examining what LiveMotion shapes can do for your designs, you should understand the importance of shape in design. Shape is an important design concern and, sadly, an often-overlooked topic in Web design books. Shape plays a profound role in the way the human psyche responds to design. Table 8.1 describes the three most common shapes in design and the psychological responses they invoke. You can use this information as a guide to the way you design your compositions. TABLE 8.1
Shapes and Their Associated Psychological Responses
Shape
Psychological Response
Rectangle
Order, logic, containment, security. Suggests mass, volume, and solidity.
Ellipse
Connection, community, wholeness, endurance. Refers to the feminine: warmth, comfort, sensuality, and love.
Triangle
Energy, power, balance, law, science, religion. Refers to the masculine: strength, aggression, and dynamic movement.
Of course, there are other shapes, including polygons of different sizes. Typically, these shapes carry the representation of the common shape they most closely resemble. If a shape is more like a triangle than a rectangle, it contains some of the triangle’s impact. Similarly, if it is more akin to a rectangle (a pentagon, for example), it carries features of strength, order, and containment. When shapes combine, they can create fascinating and powerful designs. One look at the negative space found between the “E” and the “X” in the FedEx logo (see Figure 8.1) is enough to convince even the most skeptical reader. Look closely at the shape that appears in white when the E and X touch. The shape is a right arrow! And what makes a right arrow? A combination of a rectangle and a triangle. The combined meaning could be something like “secure and dynamic movement”—precisely what FedEx’s goals are. The idea that shape has power and is a significant part of design is undeniable. The basic shapes discussed here are important, but so are the pieces of shape that help allude to an
12 0672323125 CH08
4/22/02
12:31 PM
Page 145
Working with the Library Palette
emotion. Even more interesting and complex is to think about objects in nature (such as an apple, which in the Western world often signifies the sensuous and forbidden), which have their own as well as their shape’s archetypal significance. Note the arrow created by negative space
FIGURE 8.1 The FedEx Web site, www.fedex.com/. The FedEx logo is a perfect example of how shapes can be used to express specific ideas.
How you use shapes to tap into both their visual intrigue and their psychological expression remains in your creative hands. Now it’s time to learn about the tools LiveMotion has to make your creations come to shapely life.
Using LiveMotion’s Library Palette LiveMotion’s central shipping and receiving department for preset (and later, your custom-created) shapes is the Library palette (see Figure 8.2). You can open the Library palette by selecting Window, Library.
You must have a new composition open to access the Library palette.
145
8
12 0672323125 CH08
4/22/02
12:31 PM
146
Page 146
Hour 8
FIGURE 8.2 The Library palette, Swatches view.
View LiveMotion Objects
New Object Delete Object
View Vector Objects Place Object Make Active Matte View Image Objects Replace Object
From the Library palette, you can place, replace, matte, and delete library items. As mentioned, you can also create new items, which you’ll learn to do later in this hour—after you have general Library palette skills down. You can set up the Library palette to a view that works best for you. Choose from the following views, accessed by the fly-out menu found on the upper right of the palette: • Swatches—This view shows thumbnails of the library items. • Preview—This view shows both a large thumbnail and the shape’s name. • Name—This view shows a small thumbnail and the shape’s name. Now that you’re familiar with the palette, let’s get to work!
Applying a Preset Shape The first thing to do is get comfortable applying a preset shape to the canvas. This process is remarkably easy.
Task: Applying a Preset Shape To apply a preset shape, here’s what you do: 1. Create a new canvas by selecting File, New. The Composition Settings dialog appears, and you can set the canvas size here. I set my canvas to 600×400 pixels. Click OK. 2. If the Library palette is not open, select Window, Library. 3. Select a view, and then search the library for a shape with which you want to work. I chose the umbrella.
12 0672323125 CH08
4/22/02
12:31 PM
Page 147
Working with the Library Palette
147
4. Highlight the shape you want by clicking it. 5. Click the Place button. The shape appears as an object on your canvas (see Figure 8.3).
Want to change the color of your shape? Look in the Layers palette. At the top of the palette is a box that says Fill With. Select Color and your object changes to the selected foreground color.
Alternatively, you can drag and drop the shape to the canvas. To do so, follow these steps: 1. Click and hold your cursor over the shape you want to add to the canvas. 2. Drag the shape from the palette to a location on the canvas where you want the shape to appear. 3. Drop the shape onto the canvas. It now appears as an object (see Figure 8.3). FIGURE 8.3 Applying a shape to the canvas.
You’ll undoubtedly notice that the shape appears in the selected foreground color in a preset size. You can make a wide range of modifications to the shape, just as you could do with any other object.
Modifying Shapes If you want to resize, recolor, move, rotate, skew, or add other effects to your shape, simply use the tools familiar to you to do so. Let's take a closer look.
8
12 0672323125 CH08
4/22/02
12:31 PM
148
Page 148
Hour 8
Task: Resizing and Moving Shapes After a shape is applied, you’ll surely want to resize and move the shape. You can do this in several ways: 1. Make sure that the shape is selected. 2. Change the width of the shape by clicking one of the handles along the vertical axis. As you approach the handle, a double arrow appears to describe the available direction. Hold it down and drag it until you reach the width desired. or Change the height of the shape by grabbing a handle along the horizontal axis and dragging it to the new height. or Change both the width and the height by selecting either of the bottom corner handles or the top left handle and resizing the shape. Remember that the top right handle rotates the shape. or Bring up the Transform palette and use its Resize and Move options to modify your shape. 3. Move to the center of the object until the selection arrow appears—this can be tricky with text so be sure you see the selection arrow before clicking your mouse. Click and hold to grab the object. You can now move it to a new location. 4. Release the mouse button after your shape is moved (see Figure 8.4). FIGURE 8.4 I’ve resized and repositioned the shape.
If you need a refresher course on the Transform palette, see Hour 5, “Selecting and Transforming Objects,” and Hour 1, “Creating Simple Objects.”
In addition to resizing, you can quickly add appeal to your shape by rotating it. You can do this in two ways: use the object handle or use the Transform palette’s rotation tools.
12 0672323125 CH08
4/22/02
12:31 PM
Page 149
Working with the Library Palette
149
Task: Rotating Shapes To rotate the shape with the object handle, complete the following steps: 1. Select the shape. 2. To rotate the shape, pass your mouse over the upper-right handle of the object outline. This handle is the only handle not solid in color. When the rotation symbol appears, click and rotate. 3. Release the mouse button when you’ve achieved the rotation appropriate for your needs. Alternatively, you can rotate an object using the Transform palette. Here is how to do so: 1. Select the shape. 2. Bring up the Transform palette by selecting Window, Transform. 3. Apply the rotation using the rotation wheel, or by numerically altering the rotation position (see Figure 8.5). FIGURE 8.5 Adding rotation to the preset object.
Skewing is yet another modification that makes your overall design more interesting and appealing.
Task: Adding Skew To skew a shape, complete the following steps: 1. Select the shape. 2. Bring up the Transform palette. 3. Add the skew style and values of your choice (see Figure 8.6).
8
12 0672323125 CH08
4/22/02
12:31 PM
150
Page 150
Hour 8
FIGURE 8.6 Skewing the object.
Task: Working with Color and Effects As with any other object, you can add colors and layers to the object to create various effects. Let’s work through some layering steps, using a different object: 1. Begin by creating a palette with the Color Scheme palette. 2. Create a new canvas. Add a background color. 3. Select a foreground color and move to the Library palette. 4. Choose and apply a shape. I chose an envelope. 5. Modify the shape’s size, placement, rotation, or skew as you see fit. 6 With the object selected, create a new layer using Ctrl+L (Windows) or Cmmd+L (Mac). 7. Select the new layer, add a color, and modify the layer in some way using the Layer palette. I made my second layer black and offset it to a distance of 4 for both the X and Y Offsets. I then set the softness to 10. At this point, my composition includes color and shadow—a customized version of a preset library image (see Figure 8.7).
To add a LiveMotion style to a preset library image, see Hour 9, “Applying LiveMotion Styles.” For additional special effects, a visit to Hour 10, “Textures, Gradients, Distortions, and 3D Effects,” is in order.
12 0672323125 CH08
4/22/02
12:31 PM
Page 151
Working with the Library Palette
FIGURE 8.7 Adding color and effects to a preset image.
Cropping and Replacing Objects with Shape A truly creative and fun use of the library is cropping an object to a shape. This results in some terrific-looking graphics that really enhance your Web design work. I have a photo of my brother Linus. In the picture, he’s crossing the finish line after riding in the El Tour de Tucson bicycle event (see Figure 8.8). My goal is to put the photo onto my Web site. But I want to do something exciting! I don’t want a rigid photo. What to do? Well, here’s where object cropping comes in. FIGURE 8.8 The original image, prior to cropping.
151
8
12 0672323125 CH08
4/22/02
12:31 PM
152
Page 152
Hour 8
Task: Cropping Objects for Shape To use any object in the library to crop the image, complete the following steps: 1. Find a photo or design you want to crop. Place it on an appropriately sized and colored canvas by selecting File, Place. Make sure that the object is selected on the canvas. 2. Select the shape to which you want to crop the image by clicking that shape in the Library palette. 3. Apply the crop by clicking the Matte button in the Library palette. The image now is cropped to the shape (see Figure 8.9). You can proceed to add other effects if you want or export the file for Web use (see Hour 21, “Optimizing and Exporting LiveMotion Files”). FIGURE 8.9 The final image, after cropping with a shape.
You can also replace any object with a shape from the library. Let’s say that you’re working on a composition. You’ve created a rectangle, but you decide that you want to change to a more explicit shape.
Task: Replacing Objects with Shapes You can replace your original object easily; complete the following to do so: 1. Select the object on the canvas (see Figure 8.10). 2. Now, choose the shape you want to replace the current object with by clicking that shape in the Library palette. 3. Click the Replace button, found at the bottom of the Library palette. Your shape is replaced with the new shape (see Figure 8.11).
12 0672323125 CH08
4/22/02
12:31 PM
Page 153
Working with the Library Palette
FIGURE 8.10 A rectangle object with layers and layer attributes.
153
8
FIGURE 8.11 I have replaced the object with a library shape. Note that all the layers and attributes are updated to the new shape.
Using the Replace technique from the Library palette affects the object and all its layers. So if you have more than one layer in the original object, as I did in Figure 8.10, you’ll end up having the layer attributes applied along with the new shape, as you can see in Figure 8.11. Although this is actually a handy tool, it’s important to know that you can’t use it to apply shape to only one layer.
Adding Custom Shapes to the Library The LiveMotion library is not a static feature. As you’ll see with other, related palettes within the application, you can store your own designs in the library. This is particularly handy if you have objects of any kind that you use frequently. Storing them to the library means that they are immediately on hand—no searching necessary! You can store a shape object (ellipse, rectangle, rounded rectangle, or polygon), image object, or file. You can add a custom file to the library in three ways: • Select the New Object icon found in the Library palette. • Drag and drop an object from a canvas to the Library palette. • Place the file directly into the Library folder.
12 0672323125 CH08
4/22/02
12:31 PM
154
Page 154
Hour 8
Adding an Object Using the New Object Icon This approach to adding a new object to the Library palette first involves having the object available in an image file on a drive or disk connected to your computer.
Task: Adding the Object with the New Object Icon To add the object using the New Object method, follow these steps: 1. Click the New Object icon, found at the bottom of the Library palette. The Add Object dialog appears (see Figure 8.12). 2. Locate the image object file you want to add to the library and highlight it. You can use various file types, including EPS, PSD, and Illustrator (see Appendix C, “About Web Graphics”). 3. Click Open. 4. The Name dialog appears with the filename in the dialog. You may leave this as is, or highlight this text and replace it by typing the name you would like for this shape. 5. Click OK. The file is now added to the Library palette. FIGURE 8.12 The Add Object dialog.
Dragging and Dropping an Object to the Library If you have an object already open in LiveMotion, you can simply drag it into the library. This is a really nice feature because it allows you to quickly add useful items you create to the library, where they are stored for future access.
Task: Adding an Object to the Library To add an object to the library using drag and drop, follow these steps: 1. Click the object to be saved to the library, and hold down your mouse key. 2. Drag the object to the Library palette. When the object is positioned over the library, release your mouse button.
12 0672323125 CH08
4/22/02
12:31 PM
Page 155
Working with the Library Palette
155
3. The Name dialog appears (see Figure 8.13). Type the name of your shape. 4. Click OK. The shape is now stored in the library with the name you’ve specified. FIGURE 8.13 The Name dialog.
Whatever attributes the object has (color, rotation, layers) are saved to the library along with the object.
Placing an Object into the Library Folder This method works externally from LiveMotion. You’ll use Windows Explorer (Windows) or Finder (Mac) to name and copy a file. When you’ve completed the sequence, the file will be available from the Library palette.
Task: Placing an Object into the Library Folder To place an object directly into the Library folder, complete the following steps: 1. Open Explorer (Windows) or Finder (Mac). 2. Locate the file you want to place in the LiveMotion library. The file must be .eps, .ai, .psd, or .pdf, but it cannot be a LiveMotion file. For details on how to save a file other than LiveMotion’s default, see Chapter 21, “Optimizing and Exporting LiveMotion Files.” 3. Copy the file by selecting Edit, Copy. 4. Go to the LiveMotion Library folder on your hard drive. 5. Paste the file into the Library folder by selecting Edit, Paste. 6. If you want to give the file a more descriptive name, go ahead and do so now. You’ll need to quit out of LiveMotion to refresh the Library folder. The next time you open LiveMotion and the Library palette, you’ll see that the file’s thumbnail and filename are available.
Deleting LiveMotion Library Files The major concern regarding the deletion of library files is that this is a destructive act. In other words, you can’t undo the deletion. If you delete a file that you’ve added, you
8
12 0672323125 CH08
4/22/02
12:31 PM
156
Page 156
Hour 8
can re-add it later provided that you’ve kept a copy somewhere. If you delete a LiveMotion preset shape, you have to reinstall LiveMotion to get the shape back. So although the actual process of deleting a LiveMotion file is easy, the results can be damaging. If you still really, really want to delete a library file, go ahead and do it. Just don’t say that you weren’t forewarned!
Task: Deleting LiveMotion Library Files To delete files from the Library palette, complete the following steps: 1. Open the Library palette by selecting Window, Library. 2. Find the condemned shape and select it by clicking it once. 3. Stop and ask yourself, “Do I really want to do this?” If the answer is “No,” simply stop right here. However, if the answer is “Absolutely, yes,” then continue. 4. Click the Trash button. A warning dialog appears, asking whether you are absolutely certain that the deletion is something you want to do. 5. If deletion is what you want, click Yes. The file is now deleted from the LiveMotion library.
Summary As you’ve worked your way through the exercises in this hour, you’ve seen some of the ways that LiveMotion makes your work fun and creative. The library contains many options, and what’s more, if there’s something you want to add, you can simply create and add it! After a shape is in the library, it is easily applied to a canvas. You can modify the shape as you want, and you can even use the shape as a means of modifying other shapes using the Matte option. All these tools ensure that the Library palette is a feature you’ll be using a lot. In the upcoming hour, Hour 9, you’re going to look at another potent LiveMotion feature, the Styles palette. Before you go there, however, let’s run through some questions and answers, take a quiz, and do a little library workout.
12 0672323125 CH08
4/22/02
12:31 PM
Page 157
Working with the Library Palette
Q&A Q I added an object to the library myself. Every time I try to make it larger, it loses quality. What’s going on? A The object you added is probably a raster rather than vector graphic. Raster graphics distort when you try to modify them, especially when you attempt to make them larger. With raster objects, you’ll be limited in your modification choices by the file’s original dimensions. If you want to be able to have maximum control and visual clarity, create and/or add vector objects. Q I want to apply a shape to only one layer. How do I do this? A You can’t. Each time you apply a shape, LiveMotion automatically creates a new layer. If you use Replace, all the layers are replaced by the new shape. Q I have two objects in my composition. They are positioned perfectly! I want to save them as one object. What do I do? A Use the Combine feature (see Hour 4, “Combining, Grouping, and Editing Objects”) to combine the objects into a single object and then save it to the library. You can always undo this action after you’ve saved the object.
Quiz 1. What’s the primary difference between Place and Replace? 2. Can you add a shape to a specific object layer? 3. True or False: Deletion of a library object is destructive.
Quiz Answers 1. Place adds the object to the composition. Replace replaces a selected object completely, including all its layers and attributes. 2. No. But you knew that, I bet. Anytime you place a shape, a new object is created. 3. True. Don’t delete a library object unless you really are sure that it’s what you want to do.
Activities To test the skills you’ve learned in this hour, try out these activities: 1. Create the image shown in Figure 8.14 using only preset shapes.
157
8
12 0672323125 CH08
4/22/02
12:31 PM
158
Page 158
Hour 8
FIGURE 8.14 Your mission: to recreate this image using preset library objects.
2. Combine all the objects into a single object and save it as a new library object.
13 0672323125 CH09
4/22/02
12:32 PM
HOUR
Page 159
9
Applying LiveMotion Styles Style. It adds flair and interest to life. We achieve it in the way we dress, the way we move, the things we create. Style is partly the combination of color and feel—a special weave of fabric or the way paint is layered onto a canvas. Style is also distinctly our own—it’s not just substance, but perspective. In other words, the fabric and paint must also be infused with personality and vision uniquely our own. LiveMotion provides a complete library of styles from which to choose. Helping you learn to apply LiveMotion style is this lesson’s goal. In this hour, you’ll learn about the following: • LiveMotion styles • Working with the Styles palette • Adding custom styles • Deleting a style
13 0672323125 CH09
160
4/22/02
12:32 PM
Page 160
Hour 9
LiveMotion can help you add style to your designs by giving you the substance. It’s up to you to use your own creativity and learn how to apply the substance with style.
All About LiveMotion Styles In Hour 8, “Working with the Library Palette,” you had the opportunity to see the power of a single palette at work. LiveMotion styles work similarly to the library. There are preset options, as well as methods to add your own styles to the preset designs. Preset styles contain layer and attribute data that can be applied to an existing object of any kind (drawn, text, image, or library) within a composition. Applying a preset style to any of these objects changes the object’s attributes to those of the style. You’ll get to see exactly how this works in detail as you do the exercises in this hour. For now, it’s important to understand that preset styles already contain backgrounds, fills, textures, and dimensional effects. Therefore, you can achieve an effect—a drop shadow, for example— without having to create the layers and the attributes on your own. Of course, a preset style doesn’t allow you quite the same kind of control that building your own style does. For this reason, preset styles can be modified to suit your tastes and needs, and those changes can be saved to the Styles palette as new styles. Or in the course of your design work, any style you create entirely on your own can be saved to the Styles palette as well. It’s then available to be applied to any object in any LiveMotion composition. Imagine how powerful this is! Let’s say that you’re working on a site and you want all your graphic text headers in the site to contain a shadow of precise color, position, and blur. You need only create the style, save it to the Styles palette, and then apply it to each text header. Or perhaps you create a gradient fill and bevel for all the navigation buttons in a design. You save the fill and bevel to the Styles palette and, two months later, find you need another button for that design. Open the palette, create the button, and apply the style. The fill and bevel will instantly match the look and feel of a design you haven’t worked on in some time! What’s even more impressive about LiveMotion styles is that not only can you save object and layer attributes such as color, texture, fills, and so forth, but you also can save motion to a style. This means that not only will your static graphics gain visual interest and consistency across the boards, but any animation and audio-based design can be applied consistently to objects as well.
13 0672323125 CH09
4/22/02
12:32 PM
Page 161
Applying LiveMotion Styles
161
Read more about motion and styles in Part V of this book, “Flash SWF Animation and Multimedia.”
Exploring the Styles Palette The Styles palette contains a library of preset static and motion styles (see Figure 9.1). You’ll also use the palette to apply a style to objects, create a new style, and delete styles you don’t want. FIGURE 9.1 The Styles palette, Swatches view.
New style Delete style Apply style View styles with rollovers View styles with animation
View styles with scripts
View styles with object layers
Along with check boxes that limit the view to the type of style that can be applied, three views are available to help you choose from LiveMotion’s selection of styles. You can invoke the view menu by clicking the arrow on the upper right of the Styles palette. The Style views are as explained here: • Swatches —This view shows only a visual thumbnail of the style. • Preview—Use this view when you want to see both the style description and a large thumbnail of the style. • Name—This view features the style name, along with a small thumbnail of the style. Style swatches are helpful in giving you quick visual access to a given style. Preview, which is my favorite view, offers a combination of both a clear thumbnail and a description of each preset style—including a description of any motion or scripting that might be included in the style. Name view is helpful if you know the name of a style and want to access it quickly.
9
13 0672323125 CH09
4/22/02
12:32 PM
Page 162
162
Hour 9
A gray foreground in a thumbnail indicates that the style will be applied while the top layer of the selected object is kept intact. This way, you can add those styles to an image object or object with a specific color or design on the top layer without losing the data in that layer. However, any other layers in the selected object will be modified to accept the style’s layer information.
Applying Styles to Geometric Objects One of the best ways to gain a sense of how styles can be applied is to begin adding preset styles to geometric objects. In this section, you’ll work through a series of exercises in which you will draw geometric objects and apply specific styles to them.
LiveMotion comes with some preset styles, and you will also find styles available on the application CD. If you cannot find a style that I’m using in my examples, choose one that suits your tastes instead.
Let’s begin by creating a beveled rectangle, useful for navigation buttons.
Task: Creating an Embossed Rectangle To create an embossed rectangle, follow these steps: 1. Begin with a new canvas. 2. Select the Rectangle tool from the toolbox and be sure to choose a suitable foreground color. 3. Draw a rectangle on the canvas. 4. Open the Styles palette by selecting Window, Styles. 5. Using the Preview view, select the Emboss style. 6. Make sure that the rectangle is selected, and then click Apply in the Styles palette once. The Emboss style is now applied to your rectangular object (see Figure 9.2). This particular style allows you to keep the top layer, so the color you chose has been left intact. You can now add a text object to the button, or try out the exercise with another shape such as a rounded rectangle or an ellipse.
13 0672323125 CH09
4/22/02
12:32 PM
Page 163
Applying LiveMotion Styles
163
FIGURE 9.2 Creating an embossed button with the Styles palette.
Task: Creating a Button with a Preset Style To create a pill-shaped button and apply a preset style to the entire object, complete the following steps: 1. Start with a clean canvas and choose the Rounded Rectangle tool from the toolbox. 2. Draw a pill-shaped button in any color. 3. From the Styles palette, select the Blue Metal style. 4. With the button selected, click the Apply button in the Styles palette. The Blue Metal style is now applied to the object (see Figure 9.3). As you can see, the style has wiped out any original color, and the object has taken on all the preset style’s attributes. You can now make further modifications to your new and stylish object. FIGURE 9.3 A pill-shaped button created with the Blue Metal style.
Let’s try something a little different for the next geometric exercise.
Task: Creating and Framing a Polygon The following steps show you how to create a polygon with an outline and apply a style to it to create an interesting frame design: 1. On a clean canvas, draw a polygon with the Polygon tool. 2. Select Window, Properties. 3. In the Properties palette, check the Outline radio button. Set Width to 25 and Sides to 8. 4. Move to the Styles palette. Find the TriTexture style. 5. With the polygon selected, click the Apply button in the Styles palette, or simply double-click the style. Figure 9.4 shows the results. You are now free to place an image into the composition or modify the design in any way you want.
9
13 0672323125 CH09
4/22/02
12:32 PM
164
Page 164
Hour 9
FIGURE 9.4 Creating a frame effect using an outlined polygon and applied style.
If you want to undo any step, simply press Ctrl+Z (Windows) or Cmmd+Z (Mac).
Applying Styles to Text Objects Now turn your attention to text. Adding styles to text objects can add dimension, color, and fun to headers, subheads, or decorative page elements.
Task: Creating Styled Text on a Black Background In this exercise, we’re going to stretch our design muscles a bit by using style in combination with other techniques to achieve various effects. To create styled text on a black background, complete the following steps: 1. Begin with a clean canvas. Select the Background Color box from the Color palette. 2. Choose black for the background color. Now select the Foreground Color box and select white. (This is just so that you can work in a contrasting color; the color changes when you apply the style.) 3. Select the Type tool and click the canvas. When the Type Tool dialog appears, enter some type and choose a typeface, a type size, and any other type attributes you want (see Hour 3, “Setting Type with LiveMotion”). I chose 35-point Tahoma. If you don’t have this font, select any one you like, including common fonts such as Arial, Helvetica, and Verdana. Click OK. 4. Move to the Styles palette and find the Cutout Texture style.
13 0672323125 CH09
4/22/02
12:32 PM
Page 165
Applying LiveMotion Styles
165
5. Make sure that your type object is selected and then click Apply in the Styles palette. 6. Now find the Glow style and apply it. Figure 9.5 shows my results. The actual color is red against black, and the style has given the type dimension as well as a textured look.
9
FIGURE 9.5 Adding two styles to a type object.
Task: Creating White Text on a White Background To create white text on a white background using a style for an interesting look, complete the following steps: 1. Create a new canvas. Make the background white. 2. Choose white for the foreground color. 3. Select the Type tool and set a line of text. Use a thick sans serif typeface, such as Arial Black or Helvetica Bold. Set the type, keeping the object selected. 4. In the Styles palette, select the Drop Shadow style. 5. Apply the style. Figure 9.6 demonstrates the results.
You can create a similar effect using color. To do this, set the background color. Set the type using the same color as the background. Then apply a Drop Shadow style that leaves the top object layer intact (it will appear as gray in thumbnail form) to the type object. Another approach would be to create the shadow yourself by setting the type, making an additional object layer, coloring the layer black, and then offsetting and softening the layer.
13 0672323125 CH09
4/22/02
12:32 PM
166
Page 166
Hour 9
FIGURE 9.6 Creating a highimpact type effect using white on white and the Drop Shadow style.
Adding Styles to an Image Object Usually, adding dimension or light to a photo or piece of clip art adds depth and interest to the overall look of the page. You can add certain styles to image objects to achieve such effects.
Task: Adding Styles to an Image Object To add a style to an image object, follow these steps: 1. Place the image of your choice onto a canvas by selecting File, Place, and then locating the file you want to use. 2. Size and position the image to suitable dimensions. 3. Go to the Styles palette and find the Drop Shadow style. 4. If your image object is not selected, click it once now. Then click Apply in the Styles palette to apply the shadow. The drop shadow is applied to the image (see Figure 9.7). The end result is a professional, clean look. You can now add a text caption, or undo the style and try to apply other shadow styles to test out which one you like best for your image.
When applying styles to images, be sure to choose only those styles that keep the top layer intact. These kinds of styles appear in the Styles palette with a gray foreground.
13 0672323125 CH09
4/22/02
12:32 PM
Page 167
Applying LiveMotion Styles
167
FIGURE 9.7 Applying a dropshadow style to an image object.
9
Combining Library Objects and Style Because the preset shapes found in the Library palette are objects, you can apply styles to them. Combining the rich options found in both palettes gives you unparalleled design power.
Task: Creating a Stylish Arrow To create a stylish arrow using a preset shape and style, complete the following steps: 1. Create a new canvas. 2. Open the Library palette by choosing Window, Library. 3. Select the Arrow shape—called Arrow, Notched Stem if you are in Preview view. 4. Click the Place button to add it to the canvas. 5. Rotate the arrow so that it faces right, and modify its shape and size to your liking. 6. Open the Styles palette. Find the style named Blue Metal. 7. Select the arrow and apply the style. Figure 9.8 shows my results. Yours will vary depending on how you modified the shape and size of the arrow. FIGURE 9.8 Creating a stylized shape.
13 0672323125 CH09
4/22/02
12:32 PM
168
Page 168
Hour 9
Combining Numerous Objects and Styles In this section, the goal is to create a composition made up of several drawn objects, preset shapes, and styles.
Task: Combining Tools to Create Unique Designs To get a taste of the many ways you can combine LiveMotion’s tools to come up with unique designs, complete the following steps: 1. Begin with a new canvas. I made mine 400×400. 2. Add a background color. I used RGB values of 51, 204, and 204, respectively. 3. Draw a long, rounded rectangle. Apply this to the composition and move it to the top (look to the final piece shown in Figure 9.9 for guidance). 4. Select the Type tool and set a text object as a headline. I used RGB values of 204, 51, and 0. 5. Now select the Rectangle tool and draw a rectangle along the bottom of the composition. 6. Select the navigation bar and add the TriTexture style from the Styles palette. 7. Select the type header and add the Emboss style from the Styles palette. 8. Select the rectangle and apply the TriTexture style to it as well. Figure 9.9 shows my results. Imagine that in eight quick steps, I created an attractive page outline! FIGURE 9.9 Using combinations of objects and styles.
13 0672323125 CH09
4/22/02
12:32 PM
Page 169
Applying LiveMotion Styles
169
Adding a Preset Animation Despite the fact that you’ve not yet studied LiveMotion animation (see Hour 16, “Designing Animations”), I do want to show you how to work with preset animations. The process is exactly the same as applying a style to any object, except that you’ll have motion in the end result.
Task: Adding a Preset Animation To add a preset animation to an object, complete the following steps: 1. Begin with a new canvas and select both a background and a foreground color so that they’re at the ready. 2. Create an object—geometric, text, image, or one from the library. I set some text. 3. Select the object. 4. Bring up the Styles palette, choose Preview view, and select an animated preset. I chose Animated, SpeedFromLeft. The animation is now applied to the object. To test it, deselect the object and click the Preview Mode icon found at the bottom of the toolbox.
You can create animations and save them as styles. Learn more about this in Hour 16.
Customizing Preset Styles One way to create your own styles is to modify a preset style. This means getting to know the style’s various attributes.
Task: Deconstructing a Style We’ll begin with a deconstruction so that you can get familiar with what a style can contain: 1. Select File, New and create a 400×400-pixel canvas for your workspace. 2. Choose white for the canvas’s background color. 3. Create a rectangle of any color that is 335×335 pixels. 4. Make sure that the rectangle is selected. 5. From the Styles palette, apply the Tri Texture style. 6. Open the Object Layers palette. You’ll see that the style is built of five total layers.
9
13 0672323125 CH09
4/22/02
12:32 PM
Page 170
170
Hour 9
7. Starting with the top layer (Texture Tint), hide the layer. Study the resulting change. Continue to hide layers and examine the individual pieces that make up the whole of the design. 8. Unhide all the layers to restore the object to its original attributes. Now, you can go into any of the object layers and make modifications to color as well as any of the options available via the Layer palette. If you want to follow my steps, do this: 1. Select the Texture Tint object layer. 2. Change the color to a light gray. 3. Select the Texture object layer. 4. Change the color to teal. Make sure that the tint and texture blend well. 5. Move down and select the Plain object layer. I made this a light gold. 6. Select Gradient and change the color to rust. 7. Select the Plain layer at the bottom of the object. Color it brown. These results will be decidedly different from the original preset. Try your hand at modifying numerous preset styles and see what you come up with. Then, be sure to read the next section, “Adding Styles to the Styles Palette,” for details on how to save the modified style as a new style.
Although you can change certain object layer attributes, such as color, shadow, tint, and position, you can’t alter the attributes of textures that have been used from the Texture palette. You’ll read more on this in Hour 10, “Textures, Gradients, Distortion, and 3D Effects.”
Of course, you can create your own styles at any time by building them from an object. These can be styles you create from scratch, modifying each layer to your liking, or they can be combinations of preset objects and styles as well. The goal is to try different methods to get the results you need. For example, I have created several types of shadow styles. This helps me ensure that all the shadows on a given site remain consistent.
Adding Styles to the Style Palette Now that you’ve created your own style, you may want to save that style to the Styles palette. This stores the style to be applied later.
13 0672323125 CH09
4/22/02
12:32 PM
Page 171
Applying LiveMotion Styles
171
You can store styles in the Styles palette in two ways. The first method is to use the New Style icon found on the palette itself. The second is to add the style to the Styles folder.
Task: Saving the File with the New Style Icon To save a style using theNew Style icon, follow these steps: 1. Select the object with the style you’ve decided to save. 2. On the Styles palette, find and click the New Styles button once. 3. The Name dialog (see Figure 9.10) appears, with numerous options. Enter the name you want to give the style and then choose the attributes you want the saved style to have. 4. Click OK. Your style has now been saved to the Styles palette. FIGURE 9.10 The Name dialog for the Styles palette.
Task: Saving a File with the Styles Folder To save a file by placing it in the Styles folder, follow these steps: 1. Create an object. 2. Save it as a native LiveMotion file (use the extension .liv). Save the file directly to the Styles folder within the LiveMotion directory. 3. The next time you open LiveMotion, you’ll see the new style available in the Styles palette.
9
13 0672323125 CH09
4/22/02
12:32 PM
Page 172
172
Hour 9
Removing Styles from the Palette As with any of the preset options within LiveMotion, you need to think carefully before removing something from that group of options. The reason is that this is a destructive process. In other words, the file related to that style will be removed completely from your hard drive.
Task: Deleting a Style However, if you really want to delete a style, it’s easy to do so: 1. Select the style you want to banish from the palette by highlighting it. 2. Click the Trash (Delete Style) icon at the bottom of the palette. 3. A message pops up that asks whether you’re really sure about getting rid of this unfortunate style. If you are in fact really sure, click Yes. The style is now completely, totally, and permanently banished from the palette (and your hard drive).
Summary Despite the fact that you’ve done numerous exercises this hour and had a lot of fun in the process, I’m sure you’re aware that styles are limitless! This is especially true when you add them to preset shapes and use them to help create stylish compositions. Furthermore, the fact that motion can be saved to styles makes their use attractive, productive, and time-saving as you sit down to design your compositions. Next up is Hour 10, during which you’ll learn how to take your already diverse skills over the top by using LiveMotion special effects and filters. As usual, however, don’t get ahead of yourself. Look at some questions, take a quiz, and have some workshop fun first.
Q&A Q I saved a custom style to the palette. Then I improved it. Can I replace the old style with the updated, new style? A Sure! To do this, save the new style to the Styles folder with the same name as the old file. This overwrites the old file, and the new style is now available in its place.
13 0672323125 CH09
4/22/02
12:32 PM
Page 173
Applying LiveMotion Styles
173
Q How many layers can I apply to my style? A The total layer limit for styles reflects the limit for the original objects from which they are derived, which is anywhere from 1 to 99. Q I love the design on one of the preset styles’ object layer. I want to apply only that layer’s attributes to a new object. Can I do it? A You can if it’s a texture (see Hour 10). Make sure that the new object is open. Then select the object that contains the layer with the texture you like. In the Object Layers palette, select and drag that layer to your new object. The texture is now applied to the object.
Quiz 1. True or False: Styles can be composed of multilayered objects, each with a different attribute on each object. 2. Do all styles overwrite an object’s initial fill? 3. Can you apply a style to a single layer of an object?
Quiz Answers 1. True. 2. Not if the style has a gray foreground, representing the fact that it will ignore the top layer of the object to which it will be applied. 3. No. A style replaces all layers, with the exception of those that have the gray foreground, which leaves the top layer intact.
Activities To prove you’re the stylish kind, try out these exercises: 1. Create a style completely from scratch using the Color, Color Scheme, Layer, and Object Layer palettes. 2. Save the file to the Styles palette. 3. Design a text object and apply your custom style to it.
9
13 0672323125 CH09
4/22/02
12:32 PM
Page 174
14 0672323125 CH10
4/22/02
12:32 PM
HOUR
Page 175
10
Textures, Gradients, Distortion, and Effects As you’ve seen in recent lessons, working with color, shape, and style adds tremendous impact to otherwise flat and boring images. This hour, you’ll travel even further into the realm of LiveMotion’s offerings in terms of special effects. In this hour, you’ll learn about the following: • Working with texture • How to apply gradients • Creating distortion effects • Adding 3D to objects • Using filters The techniques you’ll use in this hour will help you combine LiveMotion and your own creativity to output fantastic Web graphics that will undoubtedly stand out from the crowd.
14 0672323125 CH10
4/22/02
12:32 PM
Page 176
176
Hour 10
Using the Textures Palette In the preceding hour, you got a glimpse of how texture can be applied to an object. Now you move to the main control center for creating your own textures—the Textures palette (see Figure 10.1). FIGURE 10.1 The Textures palette, Swatches view.
Delete texture New texture View big textures
Apply texture
View small textures
The Textures palette works just like the Library and Styles palettes. You use the palette to apply preset textures as well as add and manage your own textures. The Textures palette offers three views: • Swatches view—This view is a thumbnails-only way to choose a texture from the palette. • Preview view—Use this view when you want a large thumbnail and a description of each texture. • Name view—This view provides a small thumbnail and the name of the texture. I prefer Preview view because it gives me both a verbal description and a good visual preview. You can use any view you are most comfortable with, and can even switch between views as you work.
Click the upper-right arrow in a palette to access the fly-out menu for that palette.
Adding Preset Texture Whenever you want an object to stand out or to give a site terrific visual advantage, you can use texture. Adding a preset texture is a simple way to get exciting visual results. Preset textures ship with LiveMotion.
14 0672323125 CH10
4/22/02
12:32 PM
Page 177
Textures, Gradients, Distortion, and Effects
177
Textures can be applied to individual layers within a multilayered object, as well as to single-layer objects.
Task: Applying Preset Textures To add preset texture to an object, complete the following steps: 1. Begin with a new canvas. 2. Draw, set, place, or apply a preset object to the canvas. I chose the lamp from the Library palette. If the lamp isn’t available in your version of the software, try another object that you like. 3. If the Textures palette is not open, select Window, Textures to invoke the Textures palette. 4. Choose a texture from the palette. I liked Gsisland. Again, if you don’t have this texture available, use one that you like. 5. Make sure that your object is selected; then click the Apply button in the palette. Your texture now is applied to the object (see Figure 10.2). FIGURE 10.2 Applying texture to an object.
You can also add a texture by dragging and dropping. In the Textures palette, place your cursor over the texture you want to apply to the object. Click and hold down the mouse button; then drag the texture to the object. Drop the texture by releasing the mouse button. The object now takes on the texture attributes.
10
14 0672323125 CH10
178
4/22/02
12:32 PM
Page 178
Hour 10
You can also add textures to a specific layer. To do so, open the Object Layers palette and select the layer to which you want to apply the texture. Then double-click the texture, or click Apply from the Textures palette. Alternatively, you can drag and drop the texture directly from the Textures palette onto the layer within the Object Layers palette.
Adding New Textures to the Library You can create new textures by modifying existing ones using any number of palettes, filters, and effects, or by designing them yourself using drawing tools, color, and effects.
A texture is a bitmapped or vector image created by applying filters or effects to an object layer. Grouped or layered objects cannot be textures, because a texture—unlike a style—can be composed of only a single object layer.
Then you can add modified or new textures to the Textures palette. This expands your texture library, enabling you to create custom designs for full sites. So whenever you are creating graphics to add to or update that site, you have the texture saved. This adds consistency and workflow expedience to the design.
Consider creating a texture in another application, such as Photoshop, and then placing it into LiveMotion, where you save it as a texture.
You can add a texture to the Textures palette in several ways. Methods include dragging a texture directly from the canvas to the palette, dragging an image file from Explorer or Finder to the palette, using the New button, or putting the texture directly into the Textures folder on your hard drive.
Task: Adding a Texture from an Object to the Palette To add a texture from an open composition, complete the following steps: 1. Select the object containing the texture from the composition, or select a specific layer containing the texture from the Object Layers palette. 2. Click and hold down the mouse button; then drag the texture to the Textures palette.
14 0672323125 CH10
4/22/02
12:32 PM
Page 179
Textures, Gradients, Distortion, and Effects
179
3. Drop the texture into the palette. The Name dialog appears. 4. Enter a descriptive name for the texture. The palette updates to include the texture’s thumbnail preview and its name.
Task: Dragging a New Texture to the Palette To drag a file from your hard drive to the palette, complete the following steps: 1. Open Windows Explorer (Windows) or Finder (Mac). Make sure that LiveMotion also is open and actively available on the desktop. 2. Find the file you want (it should be a raster, not vector, graphic, such as a TIF, GIF, or JPEG). Click and hold down the mouse button. 3. Drag and drop the file over into LiveMotion and into the Textures palette, being sure to not place it directly over a preexisting texture. The Name dialog appears. 4. Enter a descriptive name for the texture. The texture now is saved to the palette.
Task: Adding a Texture Using the New Texture Button To add a texture from a file using the New Texture button, complete the following steps: 1. Click the New Texture button at the bottom of the Textures palette. 2. Navigate to the file you want—it can be a LiveMotion, Illustrator, Photoshop, or EPS file. Highlight the filename. 3. Click Open to add the texture. You can also put a file directly into the Textures folder. To do this, simply use Explorer or Finder to move or copy the file from one location to the Adobe LiveMotion Textures folder. You can find this by going to Program Files, Adobe, LiveMotion, Textures (Windows) or by clicking on the Textures folder in the LiveMotion folder (Mac). Name the file with a descriptive name.
Replacing and Deleting Textures If you’ve updated a texture and want to replace an old one in the library, you easily can do so. You also can delete any texture you want. To replace a texture, simply use one of the adding texture methods described in the preceding section. If you’re dragging and dropping the file, be sure to drop it on top of the old texture’s thumbnail. If you’re using another method, name the new file with the same name as the old file. If you decide you don’t want a file in the library any longer, you can remove the file.
10
14 0672323125 CH10
4/22/02
12:32 PM
Page 180
180
Hour 10
Task: Deleting a Texture To delete a texture, complete the following steps: 1. Select the texture by clicking it in the Textures palette. 2. Click the Delete Texture (Trash) icon. 3. A dialog appears, asking whether you’re certain that you want to make the deletion. If you aren’t, click No and back out of the process. If you are, click Yes. Your texture is now deleted.
Deleting a texture is a destructive process. Deletion removes the texture from the palette and, in the case of textures placed in the Textures folder by you, from your hard drive. So be sure you absolutely want to delete a texture before doing so.
Applying Gradients A gradient is a blend of colors that range from light to dark, or from color to color, in a defined pattern. Gradients can be most effectively controlled from the Gradient palette (see Figure 10.3).
NEW TERM
Relative check box Gradient style
FIGURE 10.3 The Gradient palette.
Gradient angle indicator Right color stop Gradient bar Left color stop
Four gradient styles are available to you in LiveMotion (see Figure 10.4) : • Linear—A linear gradient shades in a direct line from one point within a design to another. In the case of an object, a linear gradient shades from one end of the object to the other. • Burst—In this case, the gradient shades on either side of the center line.
14 0672323125 CH10
4/22/02
12:32 PM
Page 181
Textures, Gradients, Distortion, and Effects
181
• Double Burst—Two symmetrical gradients appear perpendicular to one another, moving away from the center toward the respective edges of the object. • Radial—This is a gradient that shades from the center of the object in a circle. There is also a No Gradient option. If you choose this option, you can remove a gradient you’ve applied.
FIGURE 10.4 LiveMotion gradients. Linear
Burst
Double Burst
Radial
10 Task: Applying an Object Gradient To apply a gradient to an object, complete the following steps: 1. Draw, set, place, or apply a preset object to the canvas. 2. Select the object. 3. Open the Gradient palette by selecting Window, Gradient. 4. Choose the type of gradient you want to apply to the object. 5. Click the left color stop (see Figure 10.3). 6. Select a color using the Color palette. The color fills the object. 7. Click the right color stop. 8. Select a color. 9. Use the color stops to modify the left and right blends until you are satisfied with the results. The gradient is applied to your object. You can now save the file—and you can also save the gradient as a style or texture for future use.
Gradients that fade between the foreground color and transparency can be created using the Opacity palette, used to modify how transparent an object layer is. Select Window, Opacity. Modify the opacity of the object layer and apply gradients using the same technique described previously.
14 0672323125 CH10
4/22/02
12:32 PM
Page 182
182
Hour 10
Task: Changing the Gradient Angle You can change the angle of a gradient by following these steps: 1. Apply a gradient to your object. 2. Select a gradient type from the drop-down menu in the Gradient palette. 3. In the Gradient palette, click and drag the rotation wheel, or enter a numeric value into the Angle text box until you have an angle that you like.
If you want to rotate your object and have the gradient rotate with the object, click the Relative check box in the Gradient palette.
Distorting Objects Some people have accused me of having a distorted vision of reality. If I do, it’s simply because things look so much more interesting that way! Distortion effects can be added to any object layer using the Distort palette (see Figure 10.5). Typically, you’ll add them to objects that have a lot of color, texture, gradients, and so forth. The idea is to make sure that you have variation to begin with, which makes the distortion all the more powerful. FIGURE 10.5 The Distort palette, Displace view. The view of the palette changes as you select one of the distortion options, giving you tools to fine-tune the distortion method.
Distortion effects include the following (see Figure 10.6): • Displace—This effect shifts the depth of the layer. Apply Displace to anything with shadows or 3D effects for best results. • Lens—This effect magnifies the layer. You can also shrink the look by decreasing the value. You can modify the angle using the rotation wheel. • Twirl—Turn your layer into a swirling, whirling vision with this effect. Positive numbers set the rotation clockwise; negative numbers twirl the image
14 0672323125 CH10
4/22/02
12:32 PM
Page 183
Textures, Gradients, Distortion, and Effects
183
counter-clockwise. Increase or decrease band size to make the twirl bands larger or smaller, respectively. • Spherize—Something fishy is going on here! Use this distortion to create a fish-eye lens effect. • Quantize—Quantizing a layer breaks it into tiles. Increase the size to get more tiles; decrease for fewer. • Radial Quantize—The same effect as Quantize, but the tiles appear in a circle, extending out from the center of the layer. Displace
Lens
Twirl
FIGURE 10.6 Distortion effects.
10
Spherize
Quantize
Radial Quantize
Task: Distorting Object Layers To distort an object layer, complete the following steps: 1. Select an object on the canvas, or an object layer within the Object Layer palette. 2. Open the Distort palette by selecting Window, Distortion. 3. Choose a distortion effect from the drop-down menu. The palette changes context to give you adjustment tools for that specific distortion effect. 4. Use the tools to set and fine-tune your distortion. Save your file for future reference and use. You can also save the file as a style or texture.
Image objects are particularly good to use for distortion because they typically have a lot of color and depth.
14 0672323125 CH10
4/22/02
12:32 PM
Page 184
184
Hour 10
Working with 3D Effects LiveMotion 3D effects are a series of four effects that add depth and dimension to object layers. The effects are created and managed in the 3D palette (see Figure 10.7). FIGURE 10.7 The 3D palette.
The four 3D effects available are as listed here (see Figure 10.8): • Cutout—This effect makes the object appear to be cut out from the background. • Emboss—Add a soft, rounded edge to your object using this effect. • Bevel—Bevels are angled edges applied to the sides of an object. • Ripple—This effect adds a series of waves from the center of the object to its outer edges. Although there are only four foundation effects, the tools within the palette make the variations potentially endless. Dept adds visual distance between the visual plane and the object. Softness applies various degrees of Gaussian blur. Lighting adds or takes away light to or from the object.
NEW TERM
FIGURE 10.8 3D effects.
Cutout
Emboss
Bevel
Task: Applying a 3D Effect To apply a 3D effect, complete the following steps: 1. Select the object. 2. Open the 3D Effects palette by selecting Window, 3D.
Ripple
14 0672323125 CH10
4/22/02
12:32 PM
Page 185
Textures, Gradients, Distortion, and Effects
185
3. Choose an effect from the palette’s drop-down menu. 4. Modify the effect using the palette tools. You can also modify effects with the Edge options, which add certain styles to the object. Light settings and angles help you qualify the kind of light source being used and from where that source originates. When you’re finished making modifications, save your file and add it to the Style library if you want to keep the full effect available for application to other elements.
Practice 3D effects and variations on a simple, flat-color object layer before graduating to more complicated objects. This gives you an idea of what the effects can do at their most basic level.
Using the Adjust Palette The Adjust palette (see Figure 10.9) provides several filters and filter tools you can use to modify the object or layer. FIGURE 10.9 The Adjust palette.
To use the Filter palette, open it by selecting Window, Adjust. Then select your object and use the palette tools to apply LiveMotion filtration to the object or layer. Adjustment options include the following: • Brightness—Darken or lighten a layer by using the slider or entering a numeric value. • Contrast—Decrease or increase the layer’s contrast by using the slider. Negative numeric values decrease the contrast; positive values increase the contrast. • Saturation—Slide to the left or enter a negative value to add more gray to the layer; slide to the right or enter a positive value to decrease the amount of gray.
10
14 0672323125 CH10
4/22/02
12:32 PM
186
Page 186
Hour 10
• Tint—This is available only for objects other than those filled with flat color. Tint blends a foreground color with the object layer fill. For example, if you have a black-and-white photo, you can tint it red by selecting red for the foreground and then using the Tint slider to increase or decrease the amount of visible red tint blended with the object. • Posterize—This filter restricts the number of colors in a layer. If you have a photograph, leaving this option on 0 keeps all the colors in that image intact. Any specific value, such as 1 or 30, limits the number of colors in the object to 1 or 30, respectively (see Figure 10.10). • Invert—This option inverts the colors in the layer. If you have only one color, it changes to the opposite color on the color wheel. If you have many colors, they all invert, creating a photo-negative effect (see Figure 10.11). Typically, you use the Adjust palette options on textured layers or image objects. Changing any of these options on a flat color simply changes the color. FIGURE 10.10 This interesting look was created using the Posterize filter.
FIGURE 10.11 Inverting an image object can create a photo-negative effect.
In the next hour, you’ll add remaining features, such as matting and cropping, to your ever-growing bag of LiveMotion tricks. Before you move on, let’s review some FAQs, take a quiz, and run through an exercise to help get—and keep—your special-effects skills on the level.
14 0672323125 CH10
4/22/02
12:32 PM
Page 187
Textures, Gradients, Distortion, and Effects
187
Q&A Q How do I apply a preset texture to an object? A Draw, Set, Place, or Apply a preset object to the canvas. Select Window, Textures to invoke the Textures palette. Choose a texture from the palette, be sure that the object is selected, and click the Apply button. Q How can I distort an object layer? A Select the Object layer within the Object layer palette, and open the Distort palette by selecting Windows, Distortion. Choose a distortion effect from the drop-down menu. Use the Distort palette tools to refine your composition. Q I’d like to change the angle of my gradient. How do I do it? A Apply a gradient to your object, and select a gradient type from the drop-down menu in the Gradient palette. In the Gradient palette, click and drag the rotation wheel or enter a numeric value into the Angle text box until you have an angle that you like.
Quiz 1. Which palette allows you to create graded blends? 2. Which distortion technique breaks the existing fill into small blocks? 3. Which palette allows you to add a light source to your object?
Quiz Answers 1. The Gradient palette. 2. The Quantize option in the Distortion palette achieves this effect. 3. The 3D Effect palette has various lighting options.
Activities To test and expand your LiveMotion effects skills, try the following exercises: 1. Create a new texture by using a combination of distortion techniques. 2. After you’ve created the texture, add it to the Textures palette.
10
14 0672323125 CH10
4/22/02
12:32 PM
Page 188
15 0672323125 CH11
4/22/02
12:33 PM
HOUR
Page 189
11
Matting and Masks Before wrapping up Part III, “Color, Shape, and Style,” I want to discuss two important techniques that you’ll use to enhance your designs: matting and cropping. In and of themselves, these are distinct techniques. Combined, they help you create interesting shapes and approaches to your compositions. In this hour, you’ll learn about the following: • Matte backgrounds • Channels and masks • Other cropping methods I’ll also put you through some paces with the results of your matting and cropping lessons and a range of LiveMotion effects and styles.
Understanding Mattes Animators and those of you with a background in video development will be familiar with the term matte. The matte is, essentially, the background.
NEW TERM
15 0672323125 CH11
4/22/02
12:33 PM
Page 190
190
Hour 11
NEW TERM The video term blue matte is a prime example of why and how mattes are impor-
tant in design. When you’re watching your favorite weather person on the nightly news tell you (mistakenly, naturally) what tomorrow’s weather holds in store, he or she appears to be standing in front of weather maps. You’ll see that these maps change depending on which part of the country the meteorologist is discussing, or to show different weather systems or data.
In reality, the weather person is not standing in front of a screen with the map images. Instead, he or she is standing in front of a blue screen, or blue matte. The different maps are projected onto other screens, and the video coordinators are blending the two together to come up with the single image you see. Think of an object as being the weather person, and the matte as being the blue screen background behind him. That background can be changed, but both the background and foreground objects maintain their respective integrity. They are in a sense both separate and the same. Matting comes into play in LiveMotion when you want to create shapes with textures or images and have them appear to exist as a floating shape on a background. This is done using some pretty advanced technology, as you’ll soon see.
Channels and Masks Some of you already are familiar with channels because you’ve used them in print or digital design. However, Web designers and design newcomers may know little about them. Although channels involve complex technology and the details could take up many a chapter, I’m going to introduce the concept here so that you can understand some of the method behind LiveMotion’s use of channels to create specific effects. Channels exist to store colors within sophisticated graphic design software applications such as Adobe Photoshop (see Figure 11.1). Depending on the kind of color in use, a different number of channels is defined. FIGURE 11.1 Channels as seen in Adobe Photoshop.
15 0672323125 CH11
4/22/02
12:33 PM
Page 191
Matting and Masks
191
As you already are aware, color for the computer screen is created using RGB color. When you create an RGB composition, the software separates that data into each of the individual colors used to create the color. An alpha channel provides a means to mask some of this data. As a result, the designer has access to the individual colors as well as the composite colors as a whole. In LiveMotion, you are specifically concerned with this one channel, the alpha channel. This is an additional channel used as a mask. Alpha channels are particularly important in object creation because within the alpha channel areas of full data from an image and areas of transparency can be defined. Transparency is, in this case, the property of allowing you to see through the mask to certain parts of the underlying channels.
NEW TERM
In human terms, this means that you can control the look of an object by modifying what happens with the alpha channel. You can create a mask, which is a method of excluding certain data. So if you want an image to appear as a particular shape, you can use your software to mask those portions of the image that you don’t want to see, allowing the background (or the matte) to show through.
NEW TERM
The result? An image that looks like a shape but is really a rectangle with portions of the image made invisible with the mask so that it appears as a shape (see Figure 11.2).
You need only draw any geometric shape to see that it is, in reality, set on a rectangular object.
FIGURE 11.2 This object gets its shape from the alpha channel used to mask the unseen parts of the object. Note that the background behind the object is still a rectangle.
Alpha Channels in LiveMotion In LiveMotion, a great deal of this process takes place behind the scenes, and you don’t really have to think about it. However, it’s good to know a bit about the concepts as you
4
15 0672323125 CH11
4/22/02
12:33 PM
192
Page 192
Hour 11
become more sophisticated not just in the creation of shapes but also in the eventual use of them in animation. You can tap into the power of the alpha channel in LiveMotion via the Properties palette (see Figure 11.3). Of course, you have to begin with an image object, such as a photo, or the Alpha Channel option does not appear. FIGURE 11.3 The Properties palette.
After you have your object, you’ll bring up the Properties palette, where you’ll find the following Alpha Channel options: • No Alpha—Use this when you want to extend images to their full dimensions with no transparent or matte sections in place. • Use Alpha Channel—If the image you import has an alpha channel, it is used as the matte when you select the Use Alpha Channel option. • Build Alpha from Image—This creates an alpha channel and basically removes the white background from an image object or shape. Any subsequent layers you add can then be modified, allowing you to change the integrity of the channel, as well as to use the channel as a means of creating effects. This is useful for creating masks with black-and-white line art. • Active Matte—A fun and powerful option, this can be used to shape any image object. So let’s say that you have a picture and you want to make it the shape of a lamp. You make the lamp shape the Active Matte, and the picture is then cropped to the matte’s shape. You can use several Alpha Channel options in the Properties palette to enhance and create your designs. In the next section, you’ll go through a series of exercises to see just how.
You’ve already seen mattes in action in Hour 8, “Working with the Library Palette.” The Library palette offers a Matte button, which you can use to quickly create a matte from one of the shapes in the library.
15 0672323125 CH11
4/22/02
12:33 PM
Page 193
Matting and Masks
193
Building and Designing with an Alpha Channel In this series of lessons, you’ll create an alpha channel and then work with it to design various filter-style effects. First, you’ll need an image object. I’ve chosen to use a photograph because photos lend themselves particularly well to this kind of process.
Task: Creating the Alpha Channel After you’ve chosen your image object, follow these steps to create the alpha channel: 1. Place the image object on a clean canvas. 2. Make sure that you have selected the image. 3. Bring up the Properties palette by selecting Window, Properties. 4. From the Alpha Channel menu, select Build Alpha from Image. At this point, you should notice that the background data is removed from the image (see Figure 11.4 and Figure 11.5). FIGURE 11.4 The clean, original image object.
FIGURE 11.5 Compare this image, which is the alpha channel of the original, to the original image shown in Figure 11.4. I’ve purposely colored the background so that you can notice the areas of transparency.
Save this original file; you’ll be performing a few experiments on it!
4
15 0672323125 CH11
4/22/02
12:33 PM
Page 194
194
Hour 11
By removing the background, you’ve already created an interesting effect because you now have the background color bleeding through the channel. However, you can get more inventive by adding layers and other effects.
Task: Creating a Monochromatic Image To create a single-color photo-negative–style image from your alpha channel, complete the following steps: 1. Select the newly created matte. 2. Choose the Object Layers palette by selecting Window, Object Layers. 3. In the Object Layers palette, click the New Layer button. 4. Bring up the Color palette and select any color you like for the layer. 5. Hide the original layer to preview the results (see Figure 11.6). FIGURE 11.6 Using the alpha channel to create a monochromatic effect.
If you’d like to create a photo-negative–style image, be sure to select a dark color for the background while working through the preceding steps.
You can now save your file with both layers intact, or you can delete the old layer and save the new file, with a new name.
Task: Adding a Texture Now let’s combine techniques by adding a texture to a layer behind the alpha channel layer. This will help you gain greater perspective on how mattes can be used to create interesting designs. 1. Unhide the original alpha channel file. 2. Create a new layer.
15 0672323125 CH11
4/22/02
12:33 PM
Page 195
Matting and Masks
195
3. Open the Textures palette by selecting Window, Textures. 4. Choose a texture; then drag and drop it onto the new layer within the Object Layer palette. 5. Bring up the Opacity palette. Modify the Object Layer opacity until you like the look of the effect (see Figure 11.7)
If you try to drag the texture onto the image itself, it will be applied to Object Layer 1, rather than the new Object Layer, unless Object Layer 1 is hidden.
You can modify your composition even further by using additional effects such as gradients, colors, and 3D effects. See Hour 10, “Textures, Gradients, Distortion, and Effects,” for more information.
Unless you want to modify the entire object, don’t use Photoshop filters in this case. Applying Photoshop filters affects the entire object, causing you to lose the individual layer effects.
FIGURE 11.7 Adding a tiled texture behind the alpha channel.
Task: Creating a Stylized Filter Effect To create a stylized filter effect, complete the following steps: 1. Select your newly created alpha channel object. Choose black for the background. 2. Create a duplicate layer using the Object Layers palette. 3. Select the duplicate layer by clicking it in the Object Layers palette.
4
15 0672323125 CH11
4/22/02
12:33 PM
196
Page 196
Hour 11
4. Using the Layers palette, offset the duplicate layer to a numeric value of 4 for both the X and Y offsets. 5. Set the width to a value of 9. Modify the softness. Compare your results to mine, shown in Figure 11.8. FIGURE 11.8 Using the alpha channel, a background color, and object layers, I created my own filter-style effect.
Applying the Active Matte Whenever you want to create a shape, you can use the Active Matte option to crop the shape with the matte. You have several options as to where to get your mattes: • The LiveMotion Library—You can use any LiveMotion Library palette object as an Active Matte. • A file on the desktop—Any shape saved to the desktop created in a compatible file format such as EPS, AI, or PSD (see Appendix C, “About Web Graphics”) can be applied as a matte. • A file elsewhere on the computer or network—Save a matte shape anywhere to an available drive for use as an Active Matte. The following exercises show you how to use these techniques in detail.
Task: Applying a Library Object as an Active Matte First, use an object from the LiveMotion library and apply it as an Active Matte using the Properties palette: 1. Select the image object to be cropped to the matte. 2. Choose a shape from the LiveMotion library. I chose a Whirlpool shape. Choose any shape that’s available to you. 3. Drag the thumbnail from the Library palette to the Properties palette, or click Make Active Matte at the bottom of the Library palette. 4. Drop the shape into the Active Matte field.
15 0672323125 CH11
4/22/02
12:33 PM
Page 197
Matting and Masks
197
The shape now shows up in the Active Matte window and is applied to the selected object (see Figure 11.9). FIGURE 11.9 This image was created using a matte.
Task: Creating the Shape Now, let’s create a shape and then save it to the desktop. Complete the following steps: 1. On a fresh canvas, create a geometric or text object. I used a text object with the word Hello! 2. Drag the text to the Library palette and drop it into the palette. 3. When the Name dialog comes up, give the object a name. 4. Select the newly created Library object and click the Matte icon in the Library palette. Your shape is now applied as an Active Matte (see Figure 11.10). FIGURE 11.10 Here, I created a word, saved it as a LiveMotion file, and then dragged it into the Properties palette as an Active Matte.
Similarly, you can create a file in LiveMotion or another application such as Adobe Illustrator and save it to the LiveMotion Library folder. It will then be available for use as a matte, as shown in Figure 11.11.
4
15 0672323125 CH11
4/22/02
12:33 PM
Page 198
198
Hour 11
FIGURE 11.11 I created this shape in Illustrator and then stored it in the LiveMotion Library to use as an Active Matte.
Cropping Images The matting process is in a sense a form of cropping, insofar as the matte visually crops the objects using channel technology. You can also use the Crop tool to achieve various cropping techniques. This section focuses on the Crop tool, found in the toolbox. You’ll first crop a single object and then crop several objects in a composition to create the appearance of a matte effect.
Task: Cropping an Image Object Begin by cropping an image object. Complete the following steps: 1. With the image object selected on the canvas, choose the Crop tool (see Figure 11.12). 2. Pass the tool over to one of the object handles. Selecting one of the side handles crops on that side. Selecting the top or bottom handle crops the top or bottom, respectively. A corner handle crops to the side and top or side and bottom, depending on which corner handle you choose. Hold the Shift key down if you want to crop proportionately. 3. When the crop symbol appears, click and hold. Then drag the handle in the direction you want to crop. The object is now cropped to your specifications (see Figure 11.13).
To crop two sides, choose the first side and then the other. You can crop all sides of the object individually and adjust the end look to your tastes.
Let’s say that you have two or more objects on a canvas. In my example, I have a geometric object and a text object, and I’m going to merge them.
15 0672323125 CH11
4/22/02
12:33 PM
Page 199
Matting and Masks
199
FIGURE 11.12 The original surfer image.
FIGURE 11.13 The cropped image object.
4
Task: Merging Multiple Objects To merge a geometric object and a text object into a single object with transparent areas, complete the following steps: 1. On a clean canvas, draw a geometric object. 2. Select the Type tool and set a word or two of type in a typeface that you like. 3. Position the objects and add transformations, rotations, or effects as you want. 4. Choose the Crop tool. Select the geometric shape by clicking it. 5. Use the Crop tool to modify the shape. You can now position the objects further until you get a look that you like. When finished, you can choose Combine, Unite or Combine, Unite with Color to create a single object out of the two. Figure 11.14 shows this crop technique.
15 0672323125 CH11
4/22/02
12:33 PM
200
Page 200
Hour 11
FIGURE 11.14 Using multiple objects and cropping to create a matte-style finish.
Summary The matting and cropping techniques you’ve learned in this hour give you detailed options. Not only can you now create custom mattes, but you also understand how the process occurs. Having this understanding gives you the upper hand when you’re setting out to create interesting Web graphics. Furthermore, instead of just being able to resize an object, you now know how to control it on a detailed level and can even use the Crop tool as a means to make a group of objects appear to be matted! At this point, you have an extensive range of techniques and a thorough understanding of LiveMotion’s drawing tools. Now, you’ll put that knowledge to work and create actual Web graphics. You’ll also move on to adding motion and interactivity to those objects.
Q&A Q What file types can I import into LiveMotion for use as mattes? A Any bitmapped or vector image saved to Illustrator, Photoshop, or EPS formats. Q How can I access individual channels and modify them? A LiveMotion isn’t set up for this, but Photoshop is an excellent choice for working with channels, particularly as they apply (naturally!) to photographic images. Q Can I uncrop a cropped image? A Yes! In fact, you can undo a crop even after the image has been closed. Simply reopen the image and use the Crop tool to adjust the crop.
Quiz 1. How many channels are there for an RGB image? 2. What information does the alpha channel contain? 3. True or False: You can create a shape in an external program and apply it as a LiveMotion matte.
15 0672323125 CH11
4/22/02
12:33 PM
Page 201
Matting and Masks
201
Quiz Answers 1. Three: red, green, and blue. 2. It contains the data that is used to mask areas of the underlying data. 3. True, as long as the shape is saved to a compatible file format, such as EPS, AI, or PSD.
Activities To strengthen your matte and crop knowledge and skills, try these exercises: 1. If you have Illustrator, draw a complex shape. Then save the shape as a separate file, add it to the LiveMotion Library, and use it to matte an image in LiveMotion. If you don’t have Illustrator, you can draw the shape using LiveMotion tools. 2. If you have Photoshop, take your final image and import it into Photoshop. Then bring up the Channels palette (choose Window, Channels) to view the RGB and alpha channels. Hide and unhide each channel to see how the information is stored. If you don’t have Photoshop, use LiveMotion’s Properties palette and choose among the various channel options to see how each displays a different view.
4
15 0672323125 CH11
4/22/02
12:33 PM
Page 202
16 0672323125 PART 04
4/22/02
12:33 PM
Page 203
PART IV Creating Images for the Web Hour 12 Designing Static Web Graphics 13 Image Mapping and Rollover Techniques 14 Creating Remote Rollovers
16 0672323125 PART 04
4/22/02
12:33 PM
Page 204
17 0672323125 CH12
4/22/02
12:33 PM
HOUR
Page 205
12
Designing Static Web Graphics So you’ve honed your LiveMotion skills. Now comes the real fun—using those skills to create actual static graphics that you’ll later export for use on the Web. In this hour, you’ll learn about the following: • Designing background graphics • Importing logos • Creating headers • Making stylish rules • Using navigation buttons • Adding spot art I know you’re itching to get down to it, so let’s get started right now!
17 0672323125 CH12
4/22/02
12:33 PM
Page 206
206
Hour 12
Building Backgrounds Web backgrounds not only add panache to a site, but also can pull a design together. It’s important to understand that all background graphics tile. In other words, whether you create a really small square or a long strip, browsers repeat the background graphic from the left to the right, from the top down, in a series of tiles until the entire available space is filled.
Using cascading style sheets (CSS) , Web developers can prevent their backgrounds from tiling for browsers that support the technology. However, when you fix the background, the foreground scrolls. This effect can be difficult on the eye, and I don’t recommend it.
This means that to properly prepare for the differences in screen sizes and resolutions, you have to design and size your background graphics accordingly. I’ll show you how to do that as you go through the process. It’s also important to realize that there are three kinds of backgrounds: • Background wallpaper • Margin backgrounds • Watermarks I’ll walk you through what these are, and how to create them, too.
Background Wallpaper A background wallpaper effect is achieved by creating a small, rectangular tile that holds the design. Just as you need to match a strip of real wallpaper to the strip beside it, you need to design your tile so that when it tiles into the browser, its sides are seamless.
NEW TERM
Task: Creating a Seamless Background To create a seamless background, complete the following steps: 1. Create a new canvas. Background tiles should be at least 50×50 pixels in size to work well with Web browsers. For this reason, I create the canvas larger than the design, say 200×200 pixels, so that I have plenty of room to work. You will modify your tile to size in just a bit.
17 0672323125 CH12
4/22/02
12:33 PM
Page 207
Designing Static Web Graphics
207
2. Draw a filled rectangle using the Rectangle tool. 3. Select the Transform palette and size your rectangle. I made mine 100×100 pixels. 4. Choose another color and use the Pen tool to draw a small geometric shape on top of the rectangle. I drew several small shapes, filling the rectangle area with a design (see Figure 12.1). 5. Select all the objects by pressing Ctrl+A (Windows) or Cmmd+A (Mac). 6. Choose Object, Combine, Unite with Color to combine the objects in your composition. When you’re satisfied with the results, save the file in native LiveMotion format.
Hold the Shift key down while drawing your rectangle. This creates a square tile.
FIGURE 12.1 A background wallpaper tile.
Task: Testing a Background Tile Simulation If you want to test the way your background tile looks in a simulation of Web space, follow these steps: 1. Create a canvas. I made mine 400×200. 2. Select File, Place as Texture. 3. Locate the background tile you saved. In the Place as Texture dialog, you might need to switch from All Formats to All Files to see the files you just saved. 4. Click Open. Your wallpaper tiles into the canvas as a background (see Figure 12.2).
See Hour 21, “Optimizing and Exporting LiveMotion Files,” to learn how to export selected objects in Web-ready format.
12
17 0672323125 CH12
4/22/02
12:33 PM
Page 208
208
Hour 12
FIGURE 12.2 Testing your background wallpaper.
Margin Backgrounds NEW TERM
A margin background is a long, thin background tile that contains flat fields of color, gradients, or textures and colors combined.
Margin tiles must be at least 1024 pixels in width. Some designers make theirs as wide as 1280 to accommodate the higher resolution monitors.
LiveMotion doesn’t support canvas widths greater than 1280 with a height of 1024, so if you want to exceed that width or height, you will have to create your design elements in LiveMotion and then add them to a larger canvas in Photoshop to create larger margin backgrounds.
Task: Creating a Margin Background To create a margin background, complete the following steps: 1. Start with a new canvas. Set the canvas to a width of 1024 and use a height of 200 (or more if you want plenty of room to work). 2. Pick a color for a left margin field. Using the Rectangle tool, draw a rectangle. 3. Select Window, Transform. In the Width and Height fields, enter 200 pixels and 100 pixels, respectively. 4. Position the rectangle at 0 for both the x- and y-axes. 5. Draw another rectangle, using another color. Using the Transform palette, set this rectangle to a size of 824×100 pixels. 6. Position this rectangle to 200 along the x-axis.
17 0672323125 CH12
4/22/02
12:33 PM
Page 209
Designing Static Web Graphics
209
You can now combine and unite these two objects with color and save the file in LiveMotion format. If you’d like to separate the objects later, select the combined object and choose Object, Uncombine. In Figure 12.3, I’ve placed my file as a texture (choose File, Place as Texture) into a canvas to get a preview of how the tile blends together. FIGURE 12.3 My background applied to a canvas.
You can add textures and blends, as well as change the color, size, and position of the margin objects. Use the wealth of skills, libraries, and palettes in LiveMotion to be creative. Figure 12.4 shows a design with a gradient fill, and Figure 12.5 shows a left margin design using texture from the Texture palette and a shadow effect. FIGURE 12.4 I created a gradient fill by adding a third rectangular object and then using the Gradient palette to blend the colors.
12
17 0672323125 CH12
4/22/02
12:34 PM
210
Page 210
Hour 12
FIGURE 12.5 I selected the left object and added a texture from the Textures palette. Then I created a new object layer in black, offset it several points along the x-axis, and softened the back layer with a blur.
Watermarks Another kind of background is known as a watermark. These are difficult to create because they are large, single images with a design set on them. Due to the tiling effect, these images have to be made large and must use flat areas of few colors to keep the final file sizes low.
NEW TERM
Task: Creating a Watermark To create a watermark, complete the following steps: 1. Create a new, large canvas. I made mine 1024×1024 pixels. Add the color you want for the background. 2. Turn on the grid and rulers by choosing View, Show Grid, Show Rulers. 3. Say that you want a crescent shape to run along the bottom and sides of the design. To gain the crescent shape, draw the shape using the Ellipse tool and layers, and then position and size it with the Transform palette so that it will appear within the 595×295 lowest available screen resolution. Turn off the grid lines to see your results (see Figure 12.6). 4. Save the file. When you export this file for the Web, it should be saved as a GIF with as few colors as possible to retain the visual integrity of the crescent. You probably can use as few as four colors, keeping the look clean and the file size—despite the large dimensions—low.
17 0672323125 CH12
4/22/02
12:34 PM
Page 211
Designing Static Web Graphics
211
FIGURE 12.6 A watermark background.
Working with Logos When you have a background, it’s time to add a logo to your page. If you’re designing for a client, it’s likely that he or she already has a logo, in which case you’ll need to scan and size the logo (see Hour 2, “Importing Photos and Artwork as Objects”). Then you can bring it in and add any number of effects to it. If you don’t have a logo, you’ll have to create one. You can do this using shapes and text in LiveMotion. Let’s say that you’re working for a fictitious client, Healthy Woman. The site is geared toward women seeking alternative and holistic options for health. Remember the discussion of how color and shape have psychological influence? Because of this, I would choose soft colors in the pastel range and use a circular pattern as well as an attractive typeface. You want to be soothing and project a sense of caring to this community.
Task: Creating a Logo To create the logo, complete the following steps: 1. Design a color scheme with the Color Scheme palette (see Hour 7, “Using LiveMotion’s Color Tools”). 2. On a fresh canvas, create an interesting shape using the Ellipse tool or a shape from the Library palette. Or you may prefer to work in Adobe Illustrator to take advantage of its sophisticated drawing tools. You can always bring what you create there into LiveMotion via the Library palette (see Hour 8, “Working with the Library Palette”). 3. Set type into the shape to create a stylish look. 4. Add a shadow or texture to the type. Figure 12.7 shows my results.
12
17 0672323125 CH12
4/22/02
12:34 PM
Page 212
212
Hour 12
FIGURE 12.7 Creating a logo using LiveMotion.
Of course, this is only one of countless potential examples. Be creative and match shape, color, and type styles to create effective logos for your pages.
Creating Headers Headers are similar to logos in that they should reflect the content and audience of the site. However, they tend to be less decorative, or at least more subtle in their presentation. Page headers identify a page within a site. For example, if you have areas such as About Us, Product Catalog, Community, Search the Site, and Get in Touch, you’ll probably want a graphic header for each of those pages.
Task: Creating an Internal Page Header Let’s create a header for an internal page of the fictitious Healthy Woman site. Follow these steps: 1. Create a new canvas. Usually, headers are longer and thinner than logos. My canvas is 400×200 pixels. 2. Set the background color to the background color you’d like for your image. Draw a rectangle for your header. I left my background white. 3. Select a foreground color, and set the header name in type. I added some verve by setting the capital “A” in About as a separate object and modifying its size. 4. Add a shadow, texture, or 3D effect until you have a design that works. You can see my header in Figure 12.8. FIGURE 12.8 An elegant header.
17 0672323125 CH12
4/22/02
12:34 PM
Page 213
Designing Static Web Graphics
213
It’s always to your advantage to include the name of the site in the header if you’re not using the logo nearby. This way, page visitors remain well oriented throughout their visit.
Designing Rules Decorative rules are stylish horizontal lines that are used between sections of text to denote breaks or changes in the content. You can easily create rules in LiveMotion either by using the drawing tools or by selecting a preset shape and applying color, texture, or style.
Task: Creating Rules To create a rule, complete the following steps: 1. Begin with a new canvas. I set mine to 500 pixels wide. 2. Draw a long, thin rectangle or rounded rectangle. 3. Size the shape accordingly. 4. Add a shadow, texture, style, or effect that works with the rest of your site’s design (see Figure 12.9). When you have a look you like, save your file. FIGURE 12.9 Various horizontal rules created using color, texture, style, and shape.
12
Keep rules shorter than the margins of your body text. This helps break up the space gently, not abruptly, enabling the page visitor to easily make the transition from one section to the next.
Navigation Buttons Navigation buttons are one of the more complex design concerns within a site. The reason is that there are not only many ways to design navigation but also many decorative options.
17 0672323125 CH12
4/22/02
12:34 PM
Page 214
214
Hour 12
I am dedicated to a simple approach in almost all cases. My reasoning is that it’s easier for people to find their way around when they aren’t bombarded with too many choices, too many colors, or too many effects. Does this mean that you shouldn’t take full advantage of LiveMotion’s wonderful tools? Of course not! My only concern is that you think carefully about your visitors because they will be using the site. It has to make sense to them. That said, let’s create various buttons, from the simple to the complex. I won’t spend time here creating an actual navigation system. You’ll learn more about that Hour 20, “Professional Applications of LiveMotion.”
Task: Creating a Button Series To create a series of buttons, complete the following steps: 1. Create a sizable canvas area on which you can comfortably experiment. 2. Draw several geometric shape objects and include a few shapes from the Library palette. 3. Add some relevant text objects to go with each of the shapes, choosing different typefaces as you see fit. 4. Use a combination of color texture, gradients, fills, and dimension effects on either the shape or text, or both, to practice creating various designs. Figure 12.10 shows my results.
When creating your buttons, you may choose to create one and then use Edit, Make Alias to make additional copies of the button. This way, when you make a design change to a button, the change will update to all the buttons on the page. You can always break the alias by selecting Edit, Break Alias.
FIGURE 12.10 Navigation button practice session. I’ve used a wide range of shapes, styles, colors, and effects to get these varied results.
17 0672323125 CH12
4/22/02
12:34 PM
Page 215
Designing Static Web Graphics
215
Working with Spot Art Spot art is any photographic, drawn, or other art used to enhance the content of the page. For example, if you’re doing a site about a zoo, you might have a photo of a giraffe to complement the written details.
NEW TERM
Art that you use on a page can be enhanced in some way, whether it’s just a simple shadow or cutout, or a more complex matte crop. The idea is to bring interest to the art.
Task: Using Spot Art Let’s use a photo and a preset matte and then add a shadow: 1. Begin by placing the image on a suitably sized canvas. 2. Size and position the image. 3. Select the Library palette by choosing Window, Library. 4. Choose a shape style that you feel lends itself to the photo and style of the page you’re designing. 5. Select the image; then drag the shape you want to the Active Matte area within the Properties palette. 6. Choose a preset shadow from the Style palette, or design a shadow of your own by creating a second object layer and modifying the layer attributes. 7. Set a caption on the photo and save the results (see Figure 12.11). You can also do the same thing with clip art or line drawings. Figure 12.12 shows several different treatments I created using various effects such as styles and textures in LiveMotion. FIGURE 12.11 Creating a sophisticated look for a photo, including the addition of a caption.
12
17 0672323125 CH12
4/22/02
12:34 PM
216
Page 216
Hour 12
FIGURE 12.12 Alternative approaches to enhancing spot art.
When choosing a look for your art, make sure that it’s integrated with the look of the rest of your page. You want to keep light sources, shadows, and other effects consistent and harmonious to provide a pleasant experience for your page visitors.
Summary This hour was spent creating actual graphics that can easily be incorporated into a Web page. At this point, you aren’t focusing on specific tools, but rather are using a range of techniques to achieve more advanced results. In the next hour, you’ll begin to use the motion in LiveMotion as you explore mapping and rollover techniques. Let’s first turn to some questions and answers to extend the topics covered in this hour.
Q&A Q I created a wallpaper background and added it to my Web page. But I can’t read the text that’s over it very well, no matter how many times I change the text color. A One of the major problems with backgrounds is that if you’re not careful, they will interfere with rather than enhance your design. Try adjusting the opacity or brightness of the wallpaper image. By making it lighter (or darker), you may well be able to find better contrast for your text.
17 0672323125 CH12
4/22/02
12:34 PM
Page 217
Designing Static Web Graphics
217
Q A client gave me a logo with colors standardized for their identity package. Can I match these in the Web-safe palette? A Color for print and color for the computer screen differ. The best you can do is match a color as closely as possible. You can also choose not to use Websafe colors if the safety palette is too limited. Q Do all spot art graphics require a treatment? A Not at all! My advice is to look at the entire design and see how the design is best served. Keeping things simple and clean is always a good choice for most personal and commercial sites. You can’t go wrong with that approach. The more experienced you get with both tools and design concepts, the more room you’ll have to get experimental.
Quiz 1. What is the smallest recommended size for a wallpaper tile? 2. What are recommended widths for margin backgrounds? 3. What is the maximum width available in LiveMotion?
Quiz Answers 1. 50×50 pixels. 2. 1024 pixels, although some designers recommend 1280 pixels when high-resolution computers will frequently be in use. 3. 1280 pixels.
Activities To work on your Web graphic techniques, try the following exercises: 1. Create a set of graphics for a page using a wallpaper style background, header, rule, and spot art. 2. Create a second set of graphics for a Web page, this time using a margin style background, logo, header, rule, buttons, and spot art. Each series should be a matching set, taking into account that a design must work as a complimentary whole rather than merely a sum of its parts.
12
17 0672323125 CH12
4/22/02
12:34 PM
Page 218
18 0672323125 CH13
4/22/02
12:34 PM
HOUR
Page 219
13
Image Mapping and Rollover Techniques In this hour, you’ll learn about how images can be linked to Web pages and how to add some visual interactivity to a linked image. Linked images and image mapping have been around on the Web for a long time. These techniques use standard HTML and have been available since around 1993, when the earliest of the visual browsers became available. Rollovers, also referred to as mouseovers, are a little more detailed because not only do they involve linking the images in question, but they also involve using script technologies—specifically JavaScript. In this hour, you’ll learn about the following: • Creating a linked image • Building an image map • Using the Web palette for advanced techniques • Designing a rollover effect
18 0672323125 CH13
4/22/02
12:34 PM
220
Page 220
Hour 13
One of LiveMotion’s coolest features is that it actually writes all the code for you. You don’t need to know how. You do need to know the techniques and understand the lay of the linking land, however, and that’s what you’re going to learn right now!
Linking Images to Web Pages Any object you create in LiveMotion can be attached to a Web address. So instead of a static Web graphic that is sitting pretty, your image suddenly becomes interactive. Page visitors can click that graphic and move to another page. The page can be either within the Web site or to another page on another site. Control of linking occurs in the Web palette (see Figure 13.1). The Web palette offers two views: Normal and Detail. I set my palette to Detail view for the best access to all the palette’s options. FIGURE 13.1 The Web palette, Detail view.
URL box Replace ALT text box Window text box File name text box
Each of the Web palette options offers functionality to the kind of link and link action you want LiveMotion to create for a given object. The options are as shown here: • URL—This stands for Uniform Resource Locator, and it’s the “Web address.” Use this box to type in the address of the specific Web page to which you want your object to be linked. • Replace—This mighty feature accesses a Web page’s code and replaces the code of your choice with an image. So if the page has text-based headers, you can rapidly update them to graphics using this feature. • ALT—This stands for alternative text. It is used to add a text-based description of the image. This is especially handy for people who have images turned off, or those who have poor vision or who are blind and are using special screen reader software. • Window—If your page uses frames, you’ll need to enter the target name of the page. • File Name—Name the file for the slice the selected object will become when exported to HTML.
18 0672323125 CH13
4/22/02
12:34 PM
Page 221
Image Mapping and Rollover Techniques
221
Task: Creating a Simple Link Let’s begin working with the Web palette by first creating a simple link: 1. Start with a fresh canvas. 2. Create a button using any of LiveMotion’s tools, palettes, and effects. Combine or group the object layers. 3. Select the completed object. 4. Bring up the Web palette by selecting Window, Web. 5. Enter the URL of the Web page to which you want to link. This is either a local page, which is one found on the same computer or Web server you’re using (such as index.html), or an external page (a file residing somewhere else on the Internet). If it’s an external page, you need to enter the full Web address (as in www.molly.com/). 6. Enter an alternative description of the image. For example, because my button says “Home,” I entered the description “Go to the Home Page.” When you export this file (see Hour 21, “Optimizing and Exporting LiveMotion Files”), it will be completely active as a link (see Figure 13.2). If someone passes the mouse over the button, the alternative text will appear as a ToolTip in a graphic browser. FIGURE 13.2 A live, linked image created in LiveMotion.
Make your ALT descriptions very clear. Remember, these help your users further understand the purpose of the linked image, especially if they don’t have graphics or have graphics turned off in a browser.
Saving your file to LiveMotion format keeps any link information you include intact.
13
18 0672323125 CH13
4/22/02
12:34 PM
Page 222
222
Hour 13
Instead of linking the image to a Web page, you can link it directly to a special file, such as a Word document, a zip file, an executable program, or an Adobe Acrobat PDF. This is helpful if you want to have the user download a file to his computer from your page.
If you’d like to learn more about linking Web files, visit www.zdnet.com/devhead/stories/articles/0,4413,1600357,00.html for a helpful article explaining directory structure and linking techniques.
Task: Linking to a File To link to a file, complete the following steps: 1. Create a new button, or select one you’ve already made for this purpose. 2. Combine the objects, or select the object that contains the area you want to have linked. 3. In the Web palette URL text box, enter the location and name of the file to which you want to link. 4. Type an alternative text description in the ALT text box (see Figure 13.3). 5. Save or export your file. Bring up the saved file and you can test your link. Figure 13.4 shows what happens when I click the linked image. My browser immediately loads the document into the window. Because different browsers behave differently, your results will vary, but the concept is basically the same from browser one to another. FIGURE 13.3 Entering an ALT description.
You can link to a wide array of file types, such as Word documents and PDF files. Just be certain to use the correct file type suffix (for example, .doc or .pdf). This is absolutely necessary for those files to be readable across platform types.
18 0672323125 CH13
4/22/02
12:34 PM
Page 223
Image Mapping and Rollover Techniques
223
FIGURE 13.4 Loading a PDF file into Internet Explorer.
Mapping Images Image mapping is the process of creating or importing an image and then applying several links to various portions of that image. This way, you have a single image but multiple links. This is helpful when creating navigation bars or using photos and clip art as maps. The trick is to remember that individual objects within a design are linked to a page or file. This means that you can create a composition with multiple objects and then assign an address or filename to each of those objects. When you finally export this file to Web format, the resulting single image is mapped with multiple links.
13 LiveMotion creates a type of map known as client-side. In easy terms, this means that the browser figures out the code and how to position the links. Almost all browsers in use today understand this code. However, it’s important to know that there’s another kind of map—a server-side map—that old browser versions require. You may want to look into this if you know that your site will be visited by people using old versions of Web browsers.
18 0672323125 CH13
4/22/02
12:34 PM
224
Page 224
Hour 13
Task: Creating a Map Using Geometric Objects To create a map using geometric objects, complete the following steps: 1. Draw a series of objects using geometric shapes. 2. Invoke the Web palette by selecting Window, Web. 3. Select the first object to be mapped. Enter the link location and a suitable ALT description into the appropriate fields in the Web palette. 4. Repeat the process until all your shapes are linked. Save the file in native LiveMotion format. Then you can export the file to Web format as described in Hour 21. Figure 13.5 shows the HTML code that LiveMotion generates to make the map work. Map name
File names
FIGURE 13.5 The HTML file controls the map. You can view HTML markup by opening the HTML file in SimpleText (Mac) or Notepad (Windows). Open the editor and then drag and drop the HTML file to see the markup.
Coordinates describing link location
Task: Creating a Map Using Object Combinations You can also create a map using a combination of drawn and typographic objects: 1. Begin with a navigation bar shape from the Library palette. 2. Set an individual object for each hot spot.
18 0672323125 CH13
4/22/02
12:34 PM
Page 225
Image Mapping and Rollover Techniques
225
3. Select the first text object to be mapped. Using the Web palette, add the link and description. 4. Continue selecting and adding links until the map is complete. Figure 13.6 shows my design. Each of the text areas is linked to different pages or files. FIGURE 13.6 My final map as seen in a Web browser.
Task: Mapping Locations on the Image Another approach is to take a photograph or clip art image and map locations on the image. Follow these steps: 1. Place the photo or clip art onto the canvas. 2. Create a geometric object for each desired hot spot (see Figure 13.7). 3. Add links and descriptions to each hot spot. 4. Arrange the photo or clip art object on top of the other objects by selecting Object, Arrange, Bring to Front. When you export the object, it appears seamless (see Figure 13.8). However, each of the areas you designated as a link is in fact active.
13
18 0672323125 CH13
4/22/02
12:34 PM
Page 226
226
Hour 13
FIGURE 13.7 Geometric objects laid over the image where I want the links to go.
FIGURE 13.8 The final map doesn’t show the objects but contains the mapped data.
Advanced Web Palette Techniques The Web palette offers some powerful and advanced techniques in relation to linking and images. If you are working on a site that has frames and you want to use an image or image map to load a file into a specific frame, you can do so using the Window text box. Another feature that the Web palette offers is the capability to create numerous images and replace them across a single page or series of pages in a Web site. Let’s take a closer look.
18 0672323125 CH13
4/22/02
12:34 PM
Page 227
Image Mapping and Rollover Techniques
227
Targeting Frames If you are working on a site with frames, you will run into situations in which you want to click a linked image and have it load the page in another frame. Framesets are a way in HTML to set up framed pages. They are marked up so that each frame has a unique name to identify it. These names in most instances are given to the frame by the person writing the code. So let’s say that you have a site with two frames, one to the left, and one to the right. If your navigation is in the left frame, which you’ve named navigation, and you want the actual Web page to load in the right frame, which you’ve named right, you’ll have to set up the target in the linked image for the page to load properly.
Task: Setting Up Targeted Frames Here’s how to set up targeted frames: 1. Create your navigation set and mapping objects. 2. Select the first object. In the URL text box add the filename to which you are linking. 3. Add the target name (in this case, right) to the Window text box (see Figure 13.9). 4. Repeat the process where necessary until all the pages you want to load into the remote frame are properly coded with the URL, ALT, and target data. Your file is ready for export. FIGURE 13.9 Adding a target to the link.
13 Earlier, I mentioned that most frames are named by the Web author. This is true except for a set of special names, known as magic target names. These names have been purposely set aside in HTML to perform specific functions.
NEW TERM
Two excellent examples of this are the _new and _top target names. The _new magic target forces a new browser window to load the desired file when a link is clicked (this works whether or not the link is part of a framed page). The _top magic target loads the new information over the current frameset.
18 0672323125 CH13
4/22/02
12:34 PM
Page 228
228
Hour 13
If you want to use these targets when writing HTML, simply add the one you want to the Window text box while setting up your link (see Figure 13.10). FIGURE 13.10 Invoking a magic target. This target causes the desired page to load the page in a completely new browser window.
Designing Rollovers While we’re on the subject of markup and linking, it’s natural to bring up the issue of rollover navigation. This is the familiar method of having an image change depending on the state of the mouse as it interacts with the button. Five states can be controlled: • Normal—This is the state in which the button is at rest—no action is taking place. • Over—When the mouse passes over a button, this is referred to as mouseover, rollover, or over state. • Down—When the mouse button is pressed over a button, this is considered the down (also referred to as mousedown) state. • Out—As the mouse is released and the mouse passes away from the button, this is referred to as the mouseout or out state. • Custom—The custom state is reserved for creating your own states. This is especially useful in remote rollover techniques (see Hour 14, “Creating Remote Rollovers”). When you design a rollover, you can design for any one state or any combination of these states. Rollover states are managed with the States palette (see Figure 13.11).
Task: Designing a Simple Over State Let’s begin with a simple over state. In this exercise, you’ll learn to affect the normal and over states only. Follow these steps: 1. Create a navigation element. I used a text object with a color and shadow. 2. Select the object. Bring up the Web palette and add any relevant links and descriptions.
18 0672323125 CH13
4/22/02
12:34 PM
Page 229
Image Mapping and Rollover Techniques
229
Edit Behaviors selector Object thumbnail
FIGURE 13.11 The States palette. State drop-down
State script Sound Replace Image
Delete State New State Duplicate State
3. Bring up the States palette. The selected object appears in the normal state. 4. Click the New State icon. A new rollover state named “Over” appears (see Figure 13.12). 5. Change the object attributes. I changed the color. Save your work to a LiveMotion file. Then preview the rollover you created. To do so, simply click the Preview Mode icon on the toolbox and pass your mouse over the image. You’ll see the change as the mouse passes over. FIGURE 13.12 The States palette with a normal and over state in use.
13 Various export options are available, including the Flash format, which contains all rollover states in a single file, and HTML, which creates a different graphic file for each image state.
Instead of changing color, try changing typeface or type direction in a given state. Make the type larger, or slant it.
18 0672323125 CH13
4/22/02
12:34 PM
Page 230
230
Hour 13
Task: Adding a Down State and an Out State In this exercise, you’ll add both a down state and an out state: 1. Create your navigation element. I used a graphic with a texture applied. 2. Using the Web palette, add link information to the image. 3. In the States palette, set the normal state and then the over state with modified attributes. 4. Click the New State icon. A third rollover state named “Down” appears. 5. Change the object attributes. 6. Click the New State icon again. Another rollover state named “Out” appears. Change your object’s attributes and save your file. Figure 13.13 shows the four states of my object: normal, mouseover, mousedown, and mouseout. FIGURE 13.13 My object with four states of rollover: normal, over, down, and out.
Summary This hour introduced code and scripting to the LiveMotion arena. You now know how to link a single image as well as create a complex image map. You also understand how to design graphics for rollover states. From this point forward, things are going to heat up! You’ll be looking next at some advanced rollover techniques before you delve deeper into LiveMotion’s animation options.
Q&A Q I looked at LiveMotion’s HTML markup for a single linked image. I notice that it treats the single image as a map, but with one area. Is this valid code? A Yes, it is valid and it will work, although as a code purist I will say that it is not the standard way of handling a single linked image. However, the trade-off made when
18 0672323125 CH13
4/22/02
12:34 PM
Page 231
Image Mapping and Rollover Techniques
231
dealing with a program such as LiveMotion is that the markup isn’t always going to be perfect, or it’s going to be a certain way to accommodate the limitations of the program. This shouldn’t stop you from using the program. If you prefer, you can change the markup later. Q I want my rollover to have only an over state and a down state active. How can I do this? A Create only over and down state options in the States palette. You don’t have to use every state. Delete the states you do not want to use. In fact, some of the most effective rollovers are those that are subtle rather than dramatic in the way they work. Q I really like the rollover style I created. Can I save it to the Library? A Naturally! Just drag and drop the animated rollover into the Styles palette.
Quiz 1. Why is the ALT attribute important? 2. What is a magic target? 3. What are the states in a standard rollover?
Quiz Answers 1. It helps provide additional information about a link and, more important, provides text alternatives to describe images for those who don’t have images turned on, or who have visual impairments. 2. This is a reserved target name in HTML that allows you to invoke a specific response from a browser when a link is activated. Names include _self, _parent, _new, and _top. 3. Normal, mouseover, mousedown, and mouseout. Custom states can also be used.
Activities To secure your linking and rollover knowledge, try the following exercises: 1. Create a complete, fully linked navigation set using at least five linked objects. 2. Design a series of at least five Web page navigation buttons that have the same rollover effect applied. Be sure to link each button appropriately!
13
18 0672323125 CH13
4/22/02
12:34 PM
Page 232
19 0672323125 CH14
4/22/02
12:35 PM
HOUR
Page 233
14
Creating Remote Rollovers Interactivity can make a Web site more compelling for the visitor. It can help create a relationship—a call-and-response interaction that leads to both intellectual and emotional involvement with the site’s content. In this hour, you’ll learn about the following: • What remote interactivity is • Creating a simple remote rollover • Designing a complex remote rollover Remote rollovers create a particularly intriguing type of call and response because they not only contain visually compelling elements within each component that they comprise, but also lead the eye from one portion of the composition to another, and back again.
19 0672323125 CH14
4/22/02
12:35 PM
Page 234
234
Hour 14
About Remote Objects Remote interactivityis, graphically speaking, a relationship between one portion of a design and another. However, the relationship begins with the initial object in the relationship. An object in the left portion of the design can have interactive attributes based on mouse behaviors of the type discussed in Hour 13, “Image Mapping and Rollover Techniques.” For example, you could have that object change color, position, shape, or style as the mouse passes over it, clicks down on it, or passes out of its range. A remote interaction happens when an action occurs to the originating object. So, let’s say that I pass my mouse over the trigger object to the left. Not only does it change, but, across the composition, another object appears (see Figure 14.1) as the remote object. In turn, that object has a set of attributes related to the action occurring on the original object. FIGURE 14.1 Remote rollovers are composed of and create an interactive relationship. When the mouse acts on the trigger object, the remote object responds.
Trigger object
Remote object
This is a complex relationship indeed. And, aside from the graphical interaction, the calland-response method can create powerful options for the interactive designer. This can be as simple as a bit of text appearing upon mouseover, or it can be as complex as a series of objects being displayed as the mouse interacts with navigation buttons. It’s easy to imagine how remote interactivity can enhance a Web site. In the upcoming exercises, you’ll learn two applications of remote rollovers: a simple rollover designed to
19 0672323125 CH14
4/22/02
12:35 PM
Page 235
Creating Remote Rollovers
235
enhance navigation in a Web site, and an interactive visual design geared to educate the visitor about contemporary Spanish art. Naturally, these exercises exist to inspire you. You’ll take the techniques to the next level—using them to effectively design page elements and interactive environments suited to your personal design goals and client needs.
Designing a Simple Remote Rollover In this section, you’ll learn to create a simple remote rollover using simple objects. My goal is to introduce you to the techniques involved and get you comfortable using and integrating multiple objects and palettes to create the design.
Creating the Trigger Object Start by creating the first object. I’m going to call this the trigger object because it is the object from which all remote behaviors are triggered. What happens to this object directly influences the remote object. This object can be as simple or as complex as you want it to be. I’m going to begin with a simple text object to keep the example straightforward. However, you can be more adventurous as you work, using the skills you’ve gathered throughout this book to give your trigger object texture, style, and dimension. Begin with a fresh canvas large enough to hold both the anchor and the remote objects. You can mimic a complete Web page, or you can work a bit smaller, depending on your needs.
See Hour 20, “Professional Applications of LiveMotion,” for more information on setting up full pages.
Task: Drawing or Setting the Trigger Object To create the trigger object, follow these steps: 1. Create a new canvas. I made mine 400 pixels wide by 250 pixels high. 2. Design the trigger object. I kept mine simple, setting a text object with the words “About the Company.” 3. Position the object at the upper-left corner of the canvas. For precision placement, use the Transform palette and set the x- and y- axes. 4. Choose File, Save to save the file to native LiveMotion format.
14
19 0672323125 CH14
4/22/02
12:35 PM
Page 236
236
Hour 14
You now have your basic trigger object (see Figure 14.2). FIGURE 14.2 Creating a basic trigger object.
At this point, you’ll want to add some linking and rollover actions to the trigger object. This gives the trigger object its own interactive actions and sets the trigger object up for a dynamic relationship with the remote object you’ll create in just a bit.
Task: Designing the Trigger Object’s Actions To add a link to the trigger object, complete the following steps: 1. Select the trigger object. 2. Bring up the Web palette by selecting Window, Web. 3. Enter the name of the local file or the address of the external Web site to which you want to link your object. 4. Add a description of the image to the ALT text box.
If you’re going to export your file to Flash format only, you won’t need the ALT attribute for the trigger image. The ALT option applies only to exported HTML files. However, for maximum flexibility, add the information now. It won’t hurt, and you will always be prepared no matter which export choice you go with (see Hour 21, “Optimizing and Exporting LiveMotion Files,” for more information).
Task: Adding a Rollover Effect to the Trigger Object To add a rollover effect to the trigger object, complete the following steps: 1. Click the object to select it. 2. Select Window, States to bring up the States palette. 3. Click the New State icon in the States palette. It defaults to over. 4. Make any changes to the object that you want to be applied in the over state. I changed the color and the text style (see Figure 14.3). 5. Click the New State icon again. A down state is created. Click again, and you’ll have an out state.
19 0672323125 CH14
4/22/02
12:35 PM
Page 237
Creating Remote Rollovers
237
6. Make the modifications to the design for every state within your Rollover effect. This can include changing color, size, or type style. 7. Select File, Save or press Ctrl+S (Windows) or Cmmd+S (Mac) to update the changes to your composition. FIGURE 14.3 Changes to this composition include color and text direction from normal to italic.
You now have a complete, interactive trigger object. Let’s move on and create the remote object.
Creating the Remote Object The remote object responds to the trigger object’s behaviors. A remote object can be made of text, shapes, images, or a combination of any of these. Remote objects can have a range of styles and effects applied to them as well. How you design your remote object should be driven by what you want to accomplish with the entire relationship you’re creating. Obviously, this changes from design to design, but thinking about your goals and what you’re trying to accomplish as a result is important. In my example, the goal is to have a site visitor pass her mouse over a link and get some more information about that link so that she can determine whether it’s an appropriate choice. In this portion of the exercise, you’re going to create a design for the remote object and then add actions to it.
Task: Drawing or Setting the Remote Object To create the remote object, complete the following steps: 1. Add the remote object to the composition. Once again, I kept mine simple, setting up a description of what site visitors will find should they choose to follow the About the Company link (see Figure 14.4). 2. Position the remote object along the lower-right section of the canvas. Use the Transform palette and set the x- and y-axes for precision placement. 3. Update your changes to the file by saving it.
14
19 0672323125 CH14
4/22/02
12:35 PM
Page 238
238
Hour 14
FIGURE 14.4 Creating the remote object.
Now add some actions to the remote objects. This process is different from the actions you added earlier, because you will need to add a custom state.
Task: Designing the Remote Object’s Actions To ensure that a remote object will behave the way you want it to rather than in the preset normal, down, over, and out states, you’ll need to create a custom state. Here’s what you need to do to add actions to remote objects: 1. Select the remote object. 2. In the Rollovers palette, click the New State icon. A new rollover state appears, defaulting to over. 3. In the drop-down State menu, select Custom State. The Custom State dialog appears (see Figure 14.5). 4. Give the custom state a descriptive name and click OK. I called mine “text remote.” 5. Go back to the States palette. Click the New State icon again. This time, determine which state you want to have applied. Because I want the next action to be the out action, I selected that. The States palette updates to reflect my changes (see Figure 14.6). 6. Modify the states as you want them to appear for each corresponding action applied to the trigger object. For example, I wanted my object to appear only when the visitor passed the mouse over the trigger object. To do this, I used the Object Layers palette to hide the object except in the remote state. This way, when you hook up the connecting routes between the objects, both the normal state and the out state show nothing, but the remote state shows the full object. 7. Update your changes to the file by selecting File, Save.
When you create a new state after having created a custom state, the states are rearranged in the States palette.
19 0672323125 CH14
4/22/02
12:35 PM
Page 239
Creating Remote Rollovers
239
FIGURE 14.5 The Custom State dialog.
FIGURE 14.6 Changes to the States palette. Note the custom state name.
Building the Relationship Between Trigger and Remote Objects Great! You have your trigger object and your remote object. Both contain features ready for making the final connection between the two. At this point, you should have the composition and the States palette available. For clarity, get rid of anything else on the desktop for the time being. Most of the action now occurs between the States palette and the composition objects.
Task: Connecting the Trigger and Remote Objects To connect the trigger and remote objects, complete the following steps: 1. Begin by selecting the trigger object. 2. In the States palette, highlight the first state where a remote action is to occur. In my example, that’s the over state (see Figure 14.7). 3. In the States palette, click the targeting button found to the immediate left of the Rollover thumbnail. Hold it down and drag from the palette to the remote object. When you see the bounding box of the remote object appear, drop the target. 4. You now see an arrow and the word “Changes” in the States palette next to the anchor’s action (see Figure 14.7). Be sure that the change reflects the state you want. If not, use the drop-down menu to choose the right state. Continue connecting each individual trigger state to the related state in the remote object by repeating the preceding steps. Save your file as you work so that updates are recorded regularly, ensuring that your hard work isn’t lost.
14
19 0672323125 CH14
4/22/02
12:35 PM
Page 240
240
Hour 14
FIGURE 14.7 To demonstrate the three separate remote rollovers, I shot the palette in each part of the process. This figure shows the palette as it appears the first time, second time, and third time during the design process.
Trigger object, first action
Remote object, corresponding action
Trigger object after incorporating remote action
If you make a mistake along the way, such as targeting the wrong state, simply select Edit, Undo or use the keystroke combination Ctrl+Z (Windows) or Cmmd+Z (Mac) to undo your actions.
Designing a Complex Remote Rollover In this exercise, you’ll take what you did in the first exercise and expand it in scope. This time, you’re going to use a combination of text and image objects, and you’re going to use numerous remote rollovers instead of only one.
Task: Using Multiple Remote Rollovers Follow these steps to design a complex remote rollover: 1. Create the trigger objects. I’ve created four. You’ll see that I also created a page header for the process (see Figure 14.8). 2. For each trigger object, add any links you want each of those objects to have. Because my four trigger objects are Dali, Gris, Miro, and Picasso, I selected each one in turn and linked it to the corresponding page (dali.html, gris.html, miro.html, and picasso.html). Then, I added mouseover and mouseout states to each of them, working on each one in turn. 3. Before moving on to the next step, pause and save your file so as not to lose your work. 4. Now, place the first remote object. I placed a graphic of Dali’s Persistencia de la Memoria (Persistence of Memory). Position the remote object precisely where you want it to be. 5. With the remote object selected, create the states you want it to have. I set my object to be hidden on the normal and out states, but on the custom state, which I
19 0672323125 CH14
4/22/02
12:35 PM
Page 241
Creating Remote Rollovers
241
called “Dali Remote,” I made the object fully visible. (See Hour 1, “Creating Simple Objects.”) 6. Test your work thus far by switching to Preview view (click on the Preview icon in the toolbox) and passing the mouse over the trigger object. If the responding action is not what you want it to be, switch back and make the appropriate corrections. If it is what you want it to be, move on to the next step. 7. Place the next object in the sequence. In this case, I placed a Gris painting. Then I positioned the object and added the normal, over, and out states. After that, I linked its states to its respective “Gris” trigger. 8. Continue to work object by object. You’ll repeat the anchor/target process and the creation of normal, over, and out states until all the objects are completely anchored and targeted, and contain the appropriate state information. Test your file as you see fit throughout the process. I also recommend constant saving— if you save a mistake you can always undo it, but if you don’t save your work, you will have to re-create it! FIGURE 14.8 My header and trigger objects set up on the canvas.
Figures 14.9 through 14.12 show the actions as I pass my mouse over each of the individual anchor buttons. When the mouse is in either a normal state or an out state, the art itself is all hidden, and the image looks exactly as shown in Figure 14.8.
You can see this sample in action by visiting www.webwithmolly.com/ livemotion/.
14
19 0672323125 CH14
4/22/02
12:35 PM
242
Page 242
Hour 14
FIGURE 14.9 As my mouse passes over the Dali anchor, Salvador Dali’s La Persistencia de la Memoria appears.
FIGURE 14.10 Passing my mouse over the Gris anchor, Juan Gris’s Portrait of Josette is revealed.
FIGURE 14.11 As I move to Joan Miro’s name, his painting Seated Woman I appears.
19 0672323125 CH14
4/22/02
12:35 PM
Page 243
Creating Remote Rollovers
243
FIGURE 14.12 Pablo Picasso’s Old Guitarist is seen when the mouse passes over his name.
When using art or photographs in the creation of interactive projects, work to keep your graphics down to size and optimized early in the game. This means that your resulting files will be smaller. See Hour 21.
Summary Remote interaction is at once complex and empowering. Not only can it be used to add depth and interest to your standard Web pages, but as you’ve seen in the second example, the technique can be used to create interactive experiences that transcend the business model. Whether you are motivated to use the techniques to build client Web pages, create personal slide shows, develop helpful and educational resources, or create beautiful art yourself is unimportant. Having the skills and insight to use these unique tools within LiveMotion gives you the technical power to make your inspired designs come to life. Up next is Hour 15, “Exploring the Timeline,” in which you’re going to delve deeper into LiveMotion’s world of animation and media. Before you do, turn your attention to some questions and answers.
Q&A Q What other effects can I add to my trigger object? A Any effect you want! Just bear in mind that the more effects and styles you add, the more data will be saved to the resulting file, meaning bloated file sizes.
14
19 0672323125 CH14
4/22/02
12:35 PM
Page 244
244
Hour 14
Keeping things simple, as I have in this hour, helps keep your file sizes down and the focus of your content crisp and clear. Q How about my object? Can I apply an animated style or other more complicated effect to it? A Absolutely! You’ll learn how to do this in Hour 19, “Creating a Flash Movie with Animation and Audio.” But again, think about the resulting file size. If your presentation is going on a Web site for immediate public consumption, keeping things streamlined is in order. However, if you are developing for CD-ROM or creating a site from which people can download your designs, do what you want to get the results you need.
Quiz 1. What is the trigger object’s role? 2. When a mouse affects the remote trigger, what will result? 3. Why do I recommend saving your file so frequently throughout the creation process?
Quiz Answers 1. The trigger object is the object that directs how the remote actions occur. 2. If a remote object has been associated with that specific effect, the remote object appears. 3. Losing your work costs you a lot of time, whereas saving it regularly—even if you save a mistake—makes your workflow much more streamlined.
Activities To get a handle on your remote objects, try the following exercises: 1. Create a remote rollover using only library objects for both the trigger and remote objects. This creates an abstract design based on shapes and any effects you choose to add, rather than logical relationships. This exercise gets you working creatively rather than logically. 2. Create a remote rollover using a combination of text and image objects, creating a more literal design.
20 0672323125 PART 05
4/22/02
12:35 PM
Page 245
PART V Flash SWF Animation and Multimedia Hour 15 Exploring The Timeline 16 Designing Animations 17 Working with Movie Clips 18 Adding LiveMotion Audio 19 Creating a Flash Movie with Animation and Audio
20 0672323125 PART 05
4/22/02
12:35 PM
Page 246
21 0672323125 CH15
4/22/02
12:35 PM
HOUR
Page 247
15
Exploring the Timeline LiveMotion is a wonderful tool for creating animations. It is—especially compared with other tools on the market—an accessible process. But before you can use LiveMotion to animate objects, it’s important to have an understanding of both animation theory and practice, as well as the main tools used to create animations. In this hour, you’ll learn about the following: • Animation concepts • Understanding the LiveMotion Timeline Learning animation concepts provides a foundation on which you can develop your animation ideas. Becoming familiar with the Timeline puts you in a position to work with the tools and techniques that help those ideas come to life.
Animation Fundamentals When I was a child, Saturday mornings were always fun and exciting. I’d get up early, sneak down to the den, turn on the television, and indulge in—
21 0672323125 CH15
4/22/02
248
12:35 PM
Page 248
Hour 15
you guessed it—cartoons! From Felix the Cat to El Kabong, Popeye and Olive Oyl to the Flintstones, my childhood was enriched by these wonderfully drawn and animated characters. Animation is an expression both useful and joyous. It can be used to entertain, promote (notice that most Web ads are animated), and draw attention to specific information on a page. Animations can be subtle, or they can be outrageous and detailed. No matter their content, animations are created using design tools. The goal is to change the way a composition looks, and to have that change occur in a specified period. The change can be in movement, color, size, texture, or visual style. LiveMotion animations can also have audio and interactivity such as links and rollovers connected to them. Before you create animations, it’s essential that you have an understanding of animation concepts. Some of the most important concepts are listed here: • Objects—Well, you already know what an object is! But in the context of an animation, an object is something that can have any animation feature applied to it. There can be one object, one group object, or multiple independent and independent grouped objects with motion connected to them within a LiveMotion animation. • Duration—This refers to the total amount of time the animation runs. • Object duration—For each individual object or grouped object, you must determine how long that object appears on the screen within the duration of the entire animation itself. An object’s duration is given the same duration as the animation duration by default—it’s up to you to make adjustments to each object’s duration. • Object properties—As with standard properties, attributes such as position, size, color, and rotation can all be modified within a LiveMotion animation. • Keyframes—Perhaps one of the most critical tools in the animator’s toolbox, a keyframe is a single point in time (placed by you at an interval or numerous intervals within the duration of the animation) at which something changes to the object in question. Learn these basic concepts well! You’ll need to understand what they mean as you examine the actual LiveMotion Timeline.
Exploring the LiveMotion Timeline NEW TERM
Also referred to as the Timeline/Composition window, this LiveMotion feature is dedicated to the creation and design of animations (see Figure 15.1).
21 0672323125 CH15
4/22/02
12:35 PM
Page 249
Exploring the Timeline
FIGURE 15.1 The LiveMotion Timeline/Composition window.
Playback controls Current time display
249
Duration bar
Current Time Marker (CTM)
Time interval markers
Timeline
Object properties Object Composition header
Loop Make Movie Clip Explicit/Implicit Make Group
Make Movie Zoom Clip Group controls
Let’s look at some of the Timeline/Composition window features: • Playback controls—The playback controls contain a time counter so that you can precisely position objects on the Timeline. You also have a Play button, Forward and Back controls, and a Volume control. • Current Time Marker—Known as the CTM for short, this marker is the primary time control for the overall composition and is used to mark intervals as you work. • Composition header—The composition header is added as soon as a new canvas is created. This is the home base for the composition as a whole. • Object and Object properties—Any time you add an object to the animation, it is added to the Timeline with an object track and tools to modify object attributes. • Make Movie Clip button—This changes the object into a movie clip. • Loop button—Makes the object repeat its animation. • Explicit/Implicit button—Allows you to switch between two types of duration for objects and the composition.
15
21 0672323125 CH15
250
4/22/02
12:35 PM
Page 250
Hour 15
• Make Group button Makes a selection a group. • Make Movie Clip Group button Changes your selection into a movie clip group. • Duration bars—A duration bar shows the duration of either the composition or an individual object. If the bar appears in the composition track, it controls the duration of the entire animation and is colored gray. All bars associated with objects refer to the duration of that individual object and are colored pink. Duration bars have left and right markers that can be grabbed and moved to extend or reduce the duration time. You’ll now learn some specific details about how to work with the editor and use certain tools as you design animations.
Along the status bar of the Timeline/Composition window you’ll find some helpful tools that manage the view of the editor. The slider helps you compress or expand the Timeline, as does the Zoom tool. You can use the scrollbar to move along the Timeline if it extends beyond the available window space, too.
Viewing and Managing Objects and Properties in the Timeline Any object you add to a canvas while creating an animation automatically appears in the Timeline, complete with its own subset of properties that can be animated. These properties are organized into three sections: • Transformations—Anything that can be transformed on the object, such as its position, opacity, rotation, skew, and size (scale) is managed in the individual tracks found by clicking the triangle to the immediate left of the Transformations header. • Object attributes—Replace, Resize, Anchor Points, Width of Outline, Shape, Number of Sides, Font Styles, and Faces are all attributes available for modification within the Object Attributes twist-down menu. The options in this menu depend on the kind of object in question. • Layers—Each layer the object contains is listed here along with whatever attributes that particular layer possesses. If you’ve named the layer, the layer name appears; otherwise, the layers are listed in numeric order. You can collapse or expand any header within the hierarchy by clicking its twist-down triangle. If the triangle is facing down, that level of the hierarchy is expanded; if the
21 0672323125 CH15
4/22/02
12:35 PM
Page 251
Exploring the Timeline
triangle is facing to the right, it is collapsed. Use the twist-downs to hone in on the areas of the animation you’re working on at a given time.
Creating and Changing the Duration of Objects The duration of the composition, and the objects within it, are key factors in how the animation is displayed. The composition duration controls how long the full composition runs, and the individual object duration bars control the life span of the object. All objects appear at the point their duration bar appears, and disappear when that bar disappears. Duration bars have several methods available by which to change the duration:
NEW TERM
• The left marker of a duration bar controls the start time of the object (or composition). • The right marker controls the stop time of the object (or composition). • Grab the middle of the bar to change the start and end times but maintain the object’s duration.
Task: Setting the Composition Duration To set the duration of the composition, complete the following steps: 1. In the Timeline, locate the composition behavior track. 2. Grab the right marker of the composition duration bar. 3. Drag the bar to the right until you’ve arrived at the desired duration of the animation (see Figure 15.2).
Task: Setting the Objects’ Duration To set the duration of objects in the composition, complete the following steps: 1. Open a composition and add an object. 2. If you’ve already set the composition duration, all the objects will have been automatically set to match that duration. Grab the marker of the object duration bar you want to modify. 3. Drag the marker to the point where you want the duration of the object to end. 4. Release the marker. Repeat the process for each object in your animation. You may need to use the left or center markers to position different objects at different points along the Timeline (see Figure 15.3).
251
15
21 0672323125 CH15
4/22/02
12:35 PM
Page 252
252
Hour 15
Object duration
Composition duration
FIGURE 15.2 Modifying composition and object duration in the Timeline.
You can always alter the composition’s duration during editing of the animation by using the composition duration bar at the top of the Timeline.
Move the CTM where you want to position an object on the Timeline; then move the duration bar to line up with the CTM. This gives you more precision when controlling object duration in the animation.
About Object Duration Types There are two types of object duration. The first is the standard duration you’ve been working with, known as implicit duration. Implicit duration matches the object duration to the composition’s duration, and you modify the object from within that context. The second type of duration is independent from the composition. This is known as explicit duration. You can make an object independent by selecting it and then choosing Timeline, Time Independent. You can also group several objects within the animation by using the Timeline, Make Independent Timeline Group option.
21 0672323125 CH15
4/22/02
12:35 PM
Page 253
Exploring the Timeline
The advantage of explicit duration is that you can apply looping. Looping is the process by which an animation repeats itself indefinitely. Explicit duration allows looping and other techniques to be applied to an object or object group while the dominant composition remains unaffected.
FIGURE 15.3 Setting object duration.
Using Keyframes Keyframes are a significant part of animation. Keyframes are points that you specify along the Timeline to manage the way objects are modified within the animation. LiveMotion allows you to perform the following keyframe functions: • Set—To set a keyframe simply means that you create a keyframe for an object on the object’s behavior track. • Move—If you don’t like the position of a keyframe you’ve set, you can easily move it to another position. • Delete—Any unwanted keyframe can be deleted. • Set transition—Five transition effects can be applied to an individual keyframe.
253
15
21 0672323125 CH15
254
4/22/02
12:35 PM
Page 254
Hour 15
In the following sections, you’ll take a closer look at each of these functions. Setting keyframes in LiveMotion is easy. You’ll use a combination of Timeline tools to set the keyframes necessary to your animation.
Task: Setting the First Keyframe Within a Timeline Let’s begin by creating a simple animation using keyframes. Complete the following steps: 1. Create a new canvas. I made mine 300×280 pixels. 2. Choose a shape from the Library and apply it to the canvas. Modify its size and color to your tastes. 3. Bring up the Timeline/Composition window by selecting Window, Timeline, or pressing Ctrl+T (Windows) or Cmmd+T (Mac). Arrange the composition and editor by selecting Window, Tile. 4. In the Timeline, you’ll notice that the composition and object tracks have been created. Go to the object track (mine’s named “lightbulb”) and click the triangle twistdown. This reveals the properties available. 5. Move to the CTM, and drag it to the right. I set mine at the 06f marker between 01s and 02s. 6. Drag the composition duration marker to the same point in the Timeline. This action automatically causes the object’s duration to match the composition. Leave this as is. 7. Move to the Transform property, and click the triangle twist-down to reveal the transformation options. 8. Drag the CTM back to the beginning of the Timeline and click the Stopwatch icon next to the Rotation transformation option (see Figure 15.4).
Task: Setting Additional Keyframes To continue setting keyframes, follow these steps: 1. Move the CTM to the first 06f, between 00s and 01s along the Timeline. 2. Select Timeline, New Keyframe, New Rotation Keyframe. 3. Modify the object’s rotation using the Transform palette. 4. Move the CTM to 01s, repeat step 2, and modify the rotation. This creates another keyframe and keyframe action. 5. Move to the next 06f marker (between 01s and 02s) and create another keyframe and action.
21 0672323125 CH15
4/22/02
12:35 PM
Page 255
Exploring the Timeline
FIGURE 15.4 Setting up a Timeline and the first keyframe.
255
15
Stopwatch icon
Keyframe
Save your file. Not only have you set a series of keyframes (see Figure 15.5), but you’ve just created an animation! You can preview it by dragging the CTM back to 00s and clicking the Play button in the Timeline. Or click the Preview tool and enjoy! As you work on your animations, you may well decide that you want to move a keyframe, or remove it entirely.
Task: Moving a Keyframe To move a keyframe from its original position, complete the following steps: 1. Pass your mouse over the keyframe you want to move. 2. When an arrow appears, the mouse has detected the keyframe. Press down on your mouse button. 3. Drag the keyframe to its new position. 4. Release the button when you’ve found the new position for the keyframe.
Just as you can use the CTM to better control the position of a duration marker, you can do the same thing with a keyframe. Set the CTM to where you want to move a given keyframe before moving the keyframe. The CTM now acts as a guide as you make the change.
21 0672323125 CH15
4/22/02
12:35 PM
Page 256
256
Hour 15
FIGURE 15.5 A series of keyframes within the Timeline. In this case, at each keyframe, a modification in rotation occurs.
Task: Deleting a Keyframe To delete a keyframe, complete the following steps: 1. Move your mouse over the keyframe you want to delete until the arrow appears. 2. Click the keyframe once to select it. 3. Press the Delete button on your keyboard. The keyframe is now deleted.
Make sure that you’re highlighting the keyframe only! If you accidentally highlight the object itself, you’ll delete the entire object. Fortunately, you can always use Edit, Undo to repair a mistake, but it saves you time and worry if you move about the Timeline with care.
Setting Keyframe Transitions You can use keyframe transitions to control the way an object behaves as it passes through a keyframe: • Hold Keyframe—There is no interpolation in Hold Keyframe. Instead, an abrupt change from one keyframe to the next occurs.
21 0672323125 CH15
4/22/02
12:35 PM
Page 257
Exploring the Timeline
• Linear—This transition changes property values equally from one keyframe to the next. For position-based transformations, linear keyframes create angled turns. For time-based transformations, linear keyframes produce sharp transitions. • Auto Bezier—This is the default transformation, and you can use it to create curved or smooth transitions from keyframe to keyframe. • Ease In—Using this option causes the object’s rate of approach to a keyframe to slow down. • Ease Out—This options slows the rate of the object as it moves out of the keyframe.
To apply the same transition to more than one keyframe in an animation, select the keyframes to which you want to apply the transition by using the Ctrl+click (Windows) or Cmmd+click (Mac) method until all the keyframes you want are selected. Then apply the transition type by clicking it.
Summary I don’t know about you, but I’m exhausted! Although LiveMotion makes animating Web objects easy, there sure is a lot to know about the entire process. This hour was spent learning key concepts about animation in general, as well as examining the Timeline/Composition window in detail. You now have enough awareness of the tools to create some really fun—and powerful—animations. In the next hour, you’ll do just that. But first let’s take this opportunity to use questions and answers, a quiz, and an exercise to review this hour’s lessons.
Q&A Q Can I have an object of different duration than the composition? A Because object animation occurs within the context of the composition, you’ll want to make your object duration the same or less than the composition’s duration. You can’t make your object duration longer than the composition, however. Q What kind of animations can I make using LiveMotion? A Any animation you create can be exported to Flash format or to an animated GIF. See Hour 21, “Optimizing and Exporting LiveMotion Files,” for details.
257
15
21 0672323125 CH15
4/22/02
12:35 PM
Page 258
258
Hour 15
Quiz 1. What is a behavior track? 2. What is a keyframe? 3. What keyframe transitions are available in LiveMotion?
Quiz Answers 1. The portion of the animation relating to a specific object’s actions. 2. A point in the Timeline at which a change occurs. Keyframes are used to control any transition for any object and object properties in an animation. 3. Auto Bezier, Hold Keyframe, Ease In, Ease Out, and Linear.
Activities To review and expand your knowledge of animation techniques and LiveMotion’s Timeline/Composition window, try the following exercise: 1. Your mission is to get into the Timeline/Composition window and play! Use objects, styles, and textures; add keyframes; make changes to color, rotation, and position—any property you can find and use, do it. The idea here is to become familiar with what the Timeline/Composition window can do and see just how many options you can combine to create cool effects.
22 0672323125 CH16
4/22/02
12:36 PM
HOUR
Page 259
16
Designing Animations In the preceding hour, you learned the lay of LiveMotion’s animation land. Animation in LiveMotion occurs primarily within the Timeline/Composition window, and as you work through this hour, you’ll begin to see just how critical the Timeline interface is to the animation process. In this hour, you’ll learn about the following: • Simple and loop animations • Sequential animations • Importing and sequencing Photoshop layers With familiarity of the Timeline in place, it’s time to get a good animation workout, stepping through various exercises to practice and extend animation skills.
22 0672323125 CH16
260
4/22/02
12:36 PM
Page 260
Hour 16
Designing Basic and Looping Animations The most commonly used animations for Web production are made up of simple changes to color, shape, position, and other object features. The less dramatic the change, and the more basic the animation, the smaller the resulting file size.
Animation timing is based on frame rate, which can be found in the Composition Settings dialog (Edit, Composition Settings). You can leave this at the default, or try any number of settings for your compositions to see which works best with your design and specific needs. Changing the frame rate will cause your animations to run slower or faster.
The following exercises are opportunities to create animations most appropriate to use within Web pages.
Follow the Bouncing Ball In this exercise, you’ll change only one aspect of a single object—motion. The objective is to stay simple, concise, and streamlined.
Task: Changing an Object’s Motion Follow these steps to change a single aspect of an object’s motion: 1. Start with a new canvas. Mine is set to 400×200 pixels. 2. Draw a round, orange ellipse and place it in the lower-left corner of the canvas. 3. Open the Timeline/Composition window and select Window, Tile to have both windows available to you. 4. Set the CTM at 00. Drag the composition duration bar to a suitable duration. I chose 9 total segments. 5. Click the triangle twist-down next to the Orange Ellipse object, and click the Transform twist-down. 6. Set the first keyframe at 00 by clicking the Stopwatch next to the Position track. 7. Move the CTM two segments forward. Position the object up and over to the right. A new keyframe appears at the point of change. 8. Add keyframes. Because I wanted my ball to bounce, I added several keyframes very close to one another in my Timeline. Continue adding motion until you’ve completed a position route for your object (see Figure 16.1). 9. Save your file in LiveMotion format.
22 0672323125 CH16
4/22/02
12:36 PM
Page 261
Designing Animations
261
You can now preview your animation by setting the CTM to 00 and clicking the Play button in the Timeline/Composition window, or by switching over to Preview mode. FIGURE 16.1 LiveMotion draws a path as you create your position keyframes.
Star with Effect In this example, you’ll create a more complex object using object layers and 3D effects. Instead of animating the object itself, you’ll animate a layer within the object. This means that part of the object will stay static, yet you can animate other parts to create an effect.
Task: Animating an Object Layer To animate a layer within the object, complete the following steps: 1. Set the frame rate of the animation. To do this, select Edit, Composition Settings. In the Composition Settings dialog, select your frame rate from the drop-down menu. I selected 12. 2. In a new canvas, draw a star-shaped object, or select one from the Library. I chose a star and colored it red. 3. Size and position the star to your tastes. Choose the 3D palette. Select the Ripple effect from the drop-down menu and set the options as follows: Depth, 1; Softness, 1; Lighting, 100; Rotation, 360; Edge, Straight; and Light, Dark Only. 4. Select the Type tool and set the word “New” in yellow in the center of the star.
16
22 0672323125 CH16
4/22/02
12:36 PM
262
Page 262
Hour 16
5. With the text object selected, open the Object Layer palette and create a new layer. Fill this layer with white. Set the width to 1, and the softness to 10, using the Layer palette. 6. Save the file in LiveMotion format. 7. Open the Timeline/Composition window and tile the windows so that you can easily move between the editor and the composition. 8. Select the star. Click the triangle twist-down next to the star’s Layer 1 track. 9. Drag the composition duration bar to a suitable duration point. I set mine to 6 seconds (6s in the Timeline). 10. Place the CTM at 00 and click the Stopwatch next to the Effect Angle track in Layer 1. In the 3D palette, set the rotation to 360. 11. Drag the CTM three segments to the right. Make another keyframe and, in the 3D palette, set the rotation to 90. 12. Move three more segments to the right, create a keyframe, and set the rotation to 360. 13. Set another keyframe three segments to the right, and make the rotation 90. 14. Set the final keyframe at the end of the composition duration, and make the rotation angle 360. Save the updates to the file and preview the resulting effects by clicking the Play button in the Timeline/Composition window or by switching to Preview mode (see Figure 16.2). FIGURE 16.2 Creating an animated effect in an object layer.
22 0672323125 CH16
4/22/02
12:36 PM
Page 263
Designing Animations
263
Looped Advertising Banner Looping means letting an animation run continuously. Often you’ll see this is in banner advertisements. In this exercise, you’ll create an animated banner that loops.
Task: Creating Looping Animations To create a banner with looping animations, complete the following steps: 1. Create a new canvas. Note that the most common banner ad size for the Web is 468×60 pixels. 2. Open the Timeline/Composition Window and select Window, Tile. 3. Set the Timeline duration. Using a longer duration to start with gives you plenty of working room. You can adjust later. 4. Add an object to the composition. I added an apple to the right. I also added a drop-shadow effect to the object using the Styles palette. 5. If you want the duration of the object to differ from the composition, set it using the duration bars now. I left mine at the default composition duration. 6. Add a text object. Mine reads “an apple a day,” and because I want this to be onscreen for only a part of the animation, I set the duration to four total segments, starting at 00. 7. Continue adding text objects, positioning each sequentially along the Timeline (see Figure 16.3). 8. Save and preview your animation. If you’re happy with the results, select all the objects. 9. To do so, select Timeline, Loop. 10. Preview your file using Preview mode to see the looping animation.
16
22 0672323125 CH16
4/22/02
12:36 PM
264
Page 264
Hour 16
FIGURE 16.3 Adding objects and altering duration along the Timeline.
Cell-Based Sequential Animation This exercise demonstrates an old-fashioned animation methodology used in the context of LiveMotion. Before computers took the animation world by storm, animations were crafted by drawing individual object cells or by setting up three-dimensional objects and then shooting film of individual cells and objects to composite them into a single animation. Cell-based animation is still in use today, although often the hand-drawn cells are imported into computer software and sequenced there. You can do this in LiveMotion. It’s one way to bring a more organic, less digitized look to your animations. For example, artist Joe Forkan created some terrific hand-drawn cells for a cartoon animation (see Figure 16.4). He then scanned them into Photoshop and saved each cell individually, providing me with a short (12-cell) and long (30-cell) version. I then took each cell and created a sequence in LiveMotion to achieve the final animation. The important thing to understand is that in this form of animation no action occurs to the individual object. In earlier examples, you moved the object, changed its color, or modified a layer within the object. In this case, you don’t do any of that. You create individual image objects and simply sequence them. The motion in the animation is already drawn into the cells by the artist.
22 0672323125 CH16
4/22/02
12:36 PM
Page 265
Designing Animations
Cell 1 of 30
Cell 5 of 30
265
Cell 21 of 30
Cell 25 of 30
FIGURE 16.4 A selection of Forkan’s hand-drawn cartoon cells.
16 Task: Sequencing the Cell-Based Animation After you’ve drawn, scanned, and saved your animation cells to a consistent and appropriate size, complete the following steps: 1. Create a canvas that matches the dimensions of your animation cells. 2. Open the Timeline/Composition window and set the composition duration. 3. Place the first file onto the canvas. 4. Set the file’s duration. 5. Repeat the process until all the files are set, in a sequence, with their individual time duration (see Figure 16.5). FIGURE 16.5 Sequencing the cellbased animation.
22 0672323125 CH16
266
4/22/02
12:36 PM
Page 266
Hour 16
There’s no need to use keyframes or adjust any individual tracks using this method. However, if you want to add effects, color, or audio, you can do so using any LiveMotion technique applicable to the animation.
Importing and Sequencing Photoshop Layers LiveMotion has been built to work in an integrated way with other Adobe products. One area where this is most evident is in using Photoshop layers to create animations and then importing that file into LiveMotion to create an animation. The Photoshop layers import and sequence activity is so simple as to almost be unbelievable! Designers are sure to appreciate this powerful and quick method of creating animations.
Task: Using Photoshop Layers Import and Sequence Activity To import Photoshop layers to create animations and in turn import those layers into LiveMotion, complete the following steps: 1. Begin with a layered Photoshop file (see Figure 16.6). Ideally, each layer contains a different action in the sequence, much like the cell approach discussed earlier. In fact, Joe Forkan created a color version of the animation seen earlier and, this time, saved it in multiple layers in a single Photoshop file. 2. In LiveMotion, create a canvas that is appropriate to the dimensions of your design. 3. Select File, Place and choose the layered Photoshop file. The file is placed on the canvas. 4. Select Object, Convert Layers Into, Sequence. Depending on the size of the file, this process might take a few moments. 5. After the file is separated into a sequence, open the Timeline. Preview the animation and you’ll see that LiveMotion has created the entire production! You can now make any adjustments and refinements you want using the Timeline (Figure 16.7).
22 0672323125 CH16
4/22/02
12:36 PM
Page 267
Designing Animations
267
FIGURE 16.6 A layered Photoshop file.
16
FIGURE 16.7 Cell 24 of the animation within the Timeline/Composition window.
Summary In this hour, you learned various animation approaches. You also learned how to create animations that will be useful to you in your Web work, such as attention-getting spots and standard advertising banners. You also learned how to use a more organic, hands-on approach to animation by importing hand-drawn items and sequencing them along the Timeline. Finally, you learned how
22 0672323125 CH16
4/22/02
12:36 PM
Page 268
268
Hour 16
to use LiveMotion to quickly convert Photoshop layers into animations that you could further modify within the Timeline/Composition window. Let’s do a brief review before moving on to Hour 17, “Working with Movie Clips.”
Q&A Q I see all kinds of sizes of banner ads. Which is the best to use? A Although the 468×60 banner ad style is the most common, there are numerous variations. Check with whomever you are designing the ads for—that individual can tell you the dimensions required. See Hour 20, “Professional Applications of LiveMotion,” for more details. Q I’d like to try my hand at hand-drawn animation. Should I use special paper and ink? A Use flat white, thick paper with a consistent weave and a black ink pen. You can always sketch in pencil and then ink the drawing. The goal is to get a high-quality scan using Photoshop, then place the drawings in LiveMotion. You can then modify the file after it’s digitized. See Appendix C, “Understanding Web Graphics,” and Hour 2, “Importing Photos and Artwork as Objects,” to learn more about imaging and scanning techniques.
Quiz 1. How do you create a looping animation? 2. How can you quickly apply a change to all objects in an animation? 3. What is the process for creating an animation from Photoshop layers?
Quiz Answers 1. Create the objects for the animation and then set to Loop. 2. Create a behavior. 3. Place the Photoshop file into LiveMotion; select Object, Convert Layers Into, Sequence. LiveMotion automatically sequences the layers.
Activities 1. Design and produce a looping animation. 2. Design a sequencing animation. You can do this using hand drawings or, if you prefer, still frames drawn in LiveMotion or another program such as Adobe Illustrator or Photoshop.
23 0672323125 CH17
4/22/02
12:36 PM
HOUR
Page 269
17
Working with Movie Clips To advance your skills in LiveMotion animation, you’ll want to know about how to create movie clips. Movie clips are a new method in LiveMotion 2.0 to help designers gain greater control over animated properties within a composition. In this hour, you’ll learn about the following: • Making an object a movie clip • Opening and closing movie clip timelines • Grouping movie clips for more efficient animation • Animating clips and groups • Looping movie clips Working with movie clips is essentially like working with any timelinebased animation, but with a few important conceptual differences.
23 0672323125 CH17
4/22/02
12:36 PM
Page 270
270
Hour 17
About Movie Clips In LiveMotion 2.0, movie clips replace the LiveMotion 1.0 concept of time-independent animation. The idea is to allow designers to have certain portions of a composition remain animated according to their own timeline, which is contained in some fashion within the main animation timeline but is not dependent on it in order to run. By creating movie clips, you are essentially nesting an animation into the primary animation. A movie clip can contain anything a primary animation can: states (such as with rollovers), interactivity, and scripts.
Making Objects into Movie Clips Making an object into a movie clip is a very easy process, but a very necessary task you need to be aware of. In fact, to add scripting to an animation (which you’ll do in Part VII of this book, “Advanced Techniques: Scripting”), you’ll have to make sure that you change an object into a movie clip. There are two ways to turn an object into a movie clip: using the standard menu, or using the Timeline.
Task: Making a Movie Clip Using the Menu To make a movie clip using the menu, follow these steps: 1. Create an object that you’d like to turn into a time-independent animation. 2. Select the object using one of the selection tools. 3. From the menu select Object, Movie Clip (see Figure 17.1). Your object is now considered a movie clip and can be further modified using the techniques found throughout this chapter.
Task: Making a Movie Clip Using the Timeline Let’s say you’re working in the Timeline, and you’d like to take an object and make it a movie clip so as to give it an independent timeline. To make an object into a movie clip using the Timeline, follow these steps: 1. Open the Timeline by selecting Timeline, Timeline/Composition Window. 2. Select the object you want to make into a movie clip in the Timeline. 3. Click the Make Movie Clip button (see Figure 17.2). Your object has been made into a movie clip. An icon appears next to the object within the Timeline, indicating the object’s status as a movie clip (see Figure 17.2).
23 0672323125 CH17
4/22/02
12:36 PM
Page 271
Working with Movie Clips
271
FIGURE 17.1 This object is now a movie clip.
17
Movie Clip icon indicator
FIGURE 17.2 Making a movie clip using the Timeline.
Make Movie Clip button
23 0672323125 CH17
272
4/22/02
12:36 PM
Page 272
Hour 17
If you’d like to change your movie clip back to a regular object, simply select the movie clip, then choose Object, Movie Clip. You should see the check mark next to Movie Clip disappear, indicating that the object is no longer a movie clip.
Navigating Nested Timelines After you’ve created a movie clip, you’ve essentially nested that object’s animated properties within the main timeline. Adobe LiveMotion provides a method by which you can navigate between the primary composition’s timeline and movie clip timelines. Instead of opening a new Timeline, the primary Timeline interface simply switches to the timeline of the object or composition as selected by you. This makes for very convenient and fast editing of nested movie clips.
Task: Switching to a Movie Clip’s Timeline If you’re in the primary composition Timeline and would like to switch to an object’s independent timeline, follow these steps: 1. Make sure that the object has in fact been made into a movie clip. This is indicated by the Movie Clip icon in the Timeline, or by the check mark next to Movie Clip on the main menu for any selected object. 2. Double-click the movie clip’s name within the Timeline window. The Timeline window switches to display the properties of the movie clip. 3. Edit the movie clip as you require. Figure 17.3 shows the Timeline window for the movie clip.
The object must be a movie clip for the Timeline switching to work. Regular objects do not have nested Timelines associated with them.
Task: Switching Between Timelines After you’re done with edits to your movie clip, you can return to the main Timeline, and even move to any other nested timelines for movie clips within your composition. To switch between Timelines, follow these steps: 1. Click the Step Out button (see Figure 17.4). The Timeline switches to the primary composition’s Timeline. 2. In the main Timeline, make any edits to the primary composition you’d like.
23 0672323125 CH17
4/22/02
12:36 PM
Page 273
Working with Movie Clips
273
FIGURE 17.3 The movie clip Timeline.
17
3. To go to another Timeline, simply double-click the movie clip’s name in the primary Timeline, and the Timeline switches to that Timeline. Step Out button
FIGURE 17.4 The Step Out button within the Timeline allows you to quickswitch from a movie clip to the primary composition.
23 0672323125 CH17
4/22/02
12:36 PM
Page 274
274
Hour 17
You can also use the Timeline pop-up menu to achieve the same results. To do so, follow these steps: 1. Click on the Timeline name and hold your mouse button down. The pop-up appears (see Figure 17.5). 2. Highlight the Timeline name you want. 3. Release the mouse button. The Timeline now switches to your desired option, and you can continue editing as required. FIGURE 17.5 Using the Timeline pop-up to switch between available Timelines.
About Movie Clip Groups Just as grouping objects makes them much easier to manage, grouping movie clips achieves the same goal. As you learned in Hour 4, “Combining, Grouping, and Editing Objects,” grouping links selected objects together so that any editing you do to one of the objects in a group is applied to all the objects in that group. Grouping a movie clip works in the same way, providing you with additional editing power when working with movie clips.
23 0672323125 CH17
4/22/02
12:36 PM
Page 275
Working with Movie Clips
275
Grouping Movie Clips There are a couple of routes to grouping and ungrouping movie clips. You can group from the main menu, and you can group from the Timeline. You can also make a group of objects into a group of movie clips.
You can make movie clip groups out of single or multiple objects. Because Transformations cannot be applied to a movie clip alone, you’ll want to change a single object movie clip into a grouped movie clip so that Transformation options become available to you.
Task: Using the Main Menu to Make a Movie Clip Group To make a movie clip group from a movie clip using the main menu, follow these steps: 1. Open the composition containing the clip or clips you’d like to group. 2. Choose a selection tool and select the movie clips (or single clip) you’d like to group by clicking the objects on the canvas. Hold down the Ctrl key (Win) or Shift key (Mac) to select more than one clip. 3. After all your clips are chosen, go to the main menu and select Object, Make Movie Clip Group. Your clips are now grouped and can be edited together.
Task: Using the Timeline to Make a Movie Clip Group You can create a movie clip group from within the Timeline. To do so, follow these steps: 1. With your composition at the ready, open the Timeline by selecting Timeline, Timeline/Composition Window. 2. In the composition, select those clips you’d like to make into a group. You’ll notice that as you select the objects, they are highlighted in the Timeline window. 3. Click the Make Movie Clip Group button in the Timeline window (see Figure 17.6). The clips are now grouped. Notice that they now appear as a single object in the main composition Timeline (see Figure 17.6). The group of clips can now be edited together.
17
23 0672323125 CH17
4/22/02
12:36 PM
276
Page 276
Hour 17
Grouped movie clips
FIGURE 17.6 Creating a movie clip group using the Timeline.
Make Movie Clip Group button
You can make a group of objects into a grouped movie clip simply by selecting the group and then choosing Object, Movie Clip on the main menu, or by clicking the Make Movie Clip button in the Timeline. Because the objects have been grouped first, the grouping will carry over when they are transformed as a group into a clip.
Movie Clips and LiveMotion Animation Now that you know how to make and group movie clips and navigate them using the Timeline, you’ll want to animate the clips. Remember, clips are especially useful anytime you want to animate something outside the settings of the main composition. This gives you many options in terms of how various objects within a composition behave.
Adding Animation to Movie Clips Animating a movie clip is almost exactly like animating any object in a primary composition. There is a primary technical difference, however, and that is that Transformation properties cannot be applied to a movie clip alone from within the movie clip’s Timeline.
23 0672323125 CH17
4/22/02
12:36 PM
Page 277
Working with Movie Clips
277
So, although you can animate any Object or Layer property within the movie clip itself, to apply Transformation properties, you need to access the clip from the main composition Timeline, or group the movie clip. To that end, you’ll first animate a standard movie clip from within its own Timeline. Then, you’ll try your hand at animating clips with Transformation properties. Finally, you’ll add looping to a movie clip.
Task: Animating a Standard Movie Clip To animate a standard movie clip, follow these steps: 1. With your composition at the ready, open the Timeline by selecting Timeline, Timeline/Composition Window. 2. Tile the Timeline and composition by selecting Window, Tile. 3. In the Timeline, double-click the movie clip you’d like to animate. The Timeline switches to the movie clip Timeline. 4. Use the duration bar to set the time length of the animation. 5. Select the Object or Layer attribute you’d like to modify. For this exercise, you’ll change the color of the object. To do this, click the arrow next to Layer 1. You’ll see the Color option. 6. Click the Stopwatch icon next to the Color option. This creates your first keyframe. 7. Move the Current Time Marker to the position where you’d like to change the color of the movie clip. 8. Click the keyframe check box to create a new keyframe. 9. Change the color of the movie clip. At this point, you can continue making any Object or Layer modifications to the movie clip object. To test your animation, simply move the Current Time Marker to the beginning of the animation, then click the Play button in the Current Time Display. Figure 17.7 shows my animated clip.
Task: Transforming a Movie Clip from the Main Composition To apply Transformation properties to a movie clip from the main composition, follow these steps: 1. With your composition at the ready, open the Timeline by selecting Timeline, Timeline/Composition Window. 2. Tile the Timeline and composition by selecting Window, Tile. 3. Select the movie clip to which you’d like to add Transformation properties by highlighting it in the composition’s primary Timeline. 4. Click the triangle next to the Transform option. The Transform properties drop down for display.
17
23 0672323125 CH17
4/22/02
12:36 PM
278
Page 278
Hour 17
FIGURE 17.7 Animating a standard movie clip.
5. Set the duration for the clip using the duration bar within the Timeline. 6. Set up your first keyframe by clicking the Stopwatch next to the Transform property you want to modify. I modified Position (see Figure 17.8). 7. Continue adding keyframes to modify the Transformation property, or make modifications to other Transformation properties.
In this case, the Transformation properties exist only within the composition timeline and are not independently timed. However, any other properties, such as Object and Layer properties, can be animated from within the movie clip’s Timeline, and these properties maintain independence.
Task: Transforming a Movie Clip for an Independent Sequence To add Transformation properties to a movie clip so that these properties will run independent of the primary composition, follow these steps: 1. With your composition at the ready, open the Timeline and tile the Timeline and composition to your needs. 2. In the Timeline, find the movie clip you’d like to animate with Transformation properties and select it.
23 0672323125 CH17
4/22/02
12:36 PM
Page 279
Working with Movie Clips
279
FIGURE 17.8 Modifying Transform properties via the composition Timeline.
17
3. Make the movie clip a movie clip group by selecting Object, Make Movie Clip Group from the main menu, or by clicking the Make Movie Clip Group button in the composition’s Timeline. 4. Double-click on the newly made group to switch to its independent Timeline. 5. Set the time duration for the movie clip. 6. Click the triangle next to the object name. This reveals the Transform properties. 7. Because you’ll be making two modifications to your object, Position and Rotation, first select Position and create the first keyframe by moving the Current Time Marker to the beginning of the clip’s Timeline and clicking on the Stopwatch next to Position. 8. Move the CTM to the place where the position should be modified, and modify the position. 9. Click the check box to make a keyframe. 10. Move to the next Transform property. To modify rotation from the beginning of the clip’s animation, move the CTM back to the beginning, then click on the Stopwatch next to Rotation to set your first keyframe. 11. Continue making modifications to the Transform property as you see fit. Figure 17.9 shows how I’ve used two Transform properties for this movie clip’s animation.
23 0672323125 CH17
4/22/02
12:36 PM
280
Page 280
Hour 17
You must make the movie clip a movie clip group if you want to add Transformations to the actual clip’s independent Timeline as opposed to the primary composition Timeline.
FIGURE 17.9 Transforming properties in a grouped movie clip.
Task: Looping a Movie Clip Animation Very often, you’ll want your movie clips to loop for durations beyond the main composition. Looped objects replay indefinitely. To create a looped movie clip animation, follow these steps: 1. Select the movie clip to which you’d like to apply looping. 2. Click the Loop button (see Figure 17.10) from the Timeline window. 3. Save your file in LiveMotion format for future editing and export options.
Animations that loop infinitely can be great—if they’re subtle! Large animations that continue looping can be very annoying. So loop only those elements for which looping can enhance your composition’s goals.
23 0672323125 CH17
4/22/02
12:36 PM
Page 281
Working with Movie Clips
281
FIGURE 17.10 Clicking the Loop button to create a looped movie clip.
17
Loop button
Summary This hour has taught you how to create independent animations within a composition. This powerful feature allows you to have much more control over the various components of a design. Although the techniques in this chapter are quite straightforward, there are a few quirks, which you’ve learned to manage. In the upcoming Hour 18, “Adding LiveMotion Audio,” you’ll learn to add audio to your LiveMotion compositions.
Q&A Q I’m double-clicking on an object. Why isn’t its Timeline opening? A This problem is occurring because you haven’t made the object in question into a movie clip. After you’ve done that, the Timeline for that movie clip will open.
23 0672323125 CH17
4/22/02
12:36 PM
Page 282
282
Hour 17
Q I applied Transformations to a movie clip from the composition Timeline. Why aren’t they showing up independently? A If you’d like Transformation properties to be available throughout the movie clip’s duration, you’ll need to first make that movie clip into a group, and then modify the Transformation properties of the group. Q I have two grouped objects and I’d like to make them a grouped movie clip. What’s the fastest way to do this? A With your group selected, choose Object, Movie Clip from the main menu, or click the Make Movie Clip button in the Timeline. Note that if the objects are first grouped, there is no need to step through the movie clip grouping process; simply make the group a movie clip, and it will be treated as a movie clip group.
Quiz 1. What are the two types of animation properties available in a standard movie clip? 2. Can you make a movie clip revert to a standard object? 3. If I loop a movie clip, will the entire composition be looped?
Quiz Answers 1. Object and Layer. 2. Yes. Select the movie clip, and then choose Object, Movie Clip. You should see the checked box disappear, indicating that your movie clip has been reverted to a standard object. 3. Remember, movie clips are independent of the primary Timeline. As a result, a loop applied within that independent Timeline applies only to that Timeline. So the answer is no. The movie clip will be looped, but the composition Timeline will play only once unless you loop the main Timeline as well.
Activities To test the skills you’ve learned in this hour, try out these exercises: 1. Create a composition with multiple movie clips. 2. Within a movie clip group, practice making various changes to the Transform properties.
24 0672323125 CH18
4/22/02
12:37 PM
HOUR
Page 283
18
Adding LiveMotion Audio Sound helps bring the “multi” into multimedia. In fact, multimedia is specifically about the use of multiple forms of media, with graphics, motion, and audio being primary foundations on which a multimedia presentation is built. In this hour, you’ll learn about the following: • Audio formats • Where to get audio files • Bringing audio into your LiveMotion compositions • Creating audio and adding it to the audio library Audio provides some unique concerns, especially insofar as design for the Web goes. Furthermore, numerous formats can be used. We’ll take a look at general audio concepts first and then move on to applying audio to your own compositions.
24 0672323125 CH18
4/22/02
12:37 PM
Page 284
284
Hour 18
Understanding Audio A major concern regarding audio for use in compact designs, such as those you’ll create with LiveMotion, is size. Digital audio files can take up a lot of space! Numerous compression approaches have been tried, and, although compression for audio is getting better all the time, the best quality still makes pretty weighty files, especially if the sound quality is high. And that’s just the audio files in and of themselves. Add to that the graphics and detailed animation within your LiveMotion compositions, and the resulting combined file weights are going to grow exponentially. Does this mean that you shouldn’t use audio? Heavens, no! But you should understand which formats are available and how to recognize what those formats are. But the most important issue, at least in my mind, is understanding that because most audio files are going to be relatively weighty, you should use them for Web-based designs with care.
If your audience is using a high-speed Internet connection, or you’ll be creating a presentation for use on CD-ROM, you can use larger audio files without ill effects.
Common Audio Formats for Web and Related Use Various common audio formats are used on the Web and in multimedia production. Each has advantages and disadvantages, naturally. Fortunately, you can usually edit sound files to fit the format that you feel best meets your needs. Table 18.1 lists several audio file types with which you’ll want to be familiar. LiveMotion supports most common sound formats. TABLE 18.1
Audio Files for Web and Multimedia Use
File Type
Description
AIFF
Audio Interchange File Format, used primarily by Macintosh. Easily converted to other formats for further compression. This is the format that LiveMotion library preset clips are shipped with.
AVI
This is the Audio/Video Interface used in Windows. It provides video as well as audio.
24 0672323125 CH18
4/22/02
12:37 PM
Page 285
Adding LiveMotion Audio
TABLE 18.1
285
continued
File Type
Description
WAV
This format is most common to Windows PCs and is really the audio portion of AVI.
MPEG
MP3s fit into this category, as well as earlier versions of the MPEG compression format. This is one of the strongest compression techniques for the Web because of the high-quality/low-size results.
If you’re interested in audio production, you’ll want to examine the various products available for working with audio.
Cool Edit is a popular product for editing audio (www.syntrillium.com/), as are Sonic Foundry (www.sonicfoundry.com/) and AudioTrack and WaveConvertPro (www.waves.com/). On the Mac side of the picture, check out BIAS Peak (www.bias-inc.com/), and Apple’s QuickTime Pro lets you work with audio, as well as multiple other media formats (quicktime.apple.com/).
Where to Get Audio You can get audio files for use on the Web in several ways. Each method has its own related concerns. The following are some good ways to acquire audio for use in your LiveMotion work: • Record it yourself—Recording your own audio may well be the best bet if you’re trying to create quick, simple recordings. Just be sure that you have a good microphone and sound recording software. All Macs and most computers using Windows 98 and above come with the necessary hardware to make recordings. You may have to purchase specialty hardware in some cases. • Find online archives—There are literally tons of online audio archives. These can be helpful when you’re creating sample designs. Tread lightly when looking for audio that you can use in professional work, however. Audio often carries a copyright, and it’s imperative that the professional respect those rights. If you have any questions, write to the owner of the copyright and ask permission for use, or use work that you are confident is not copyrighted or is in the public domain. • Purchase professional audio clips—As with photos and clip art, online catalogs for audio design are available.
18
24 0672323125 CH18
4/22/02
12:37 PM
Page 286
286
Hour 18
Although you might not opt for any of these choices and instead might rely on the preset clips made available in LiveMotion, it’s a good idea to know what’s out there.
Professional Audio Clips Check out the following audio sites for getting a start with digital sound. • SoundsOnline— Offers a wide range of downloadable and CD-ROM-based audio for multimedia: music, effects, and even some free sounds, at www.soundsonline.com/. • Rarefaction—Offers cutting-edge, sci-fi, and unusual audio sound effects, at www.rarefaction.com/.
Working with Audio in LiveMotion Whether you choose to use preset audio or custom sound, LiveMotion is at the ready with a host of tools to make your work easy. The Sounds palette is the main brain of sound management in LiveMotion (see Figure 18.1).
Sound swatches FIGURE 18.1 The Sounds palette, Name view.
Delete Sound icon New Sound icon Play button Apply button The Sounds palette offers three views: • Swatches—This view shows only the thumbnail of the sound. • Preview—This view gives you a close-up look at the thumbnail along with the sound’s name. • Name—This provides a small thumbnail with the name of the sound beside it. I like to use the Preview view (see Figure 18.2) because it gives me both a view of the sound and a description. I can quickly scroll through this view and find what I need.
24 0672323125 CH18
4/22/02
12:37 PM
Page 287
Adding LiveMotion Audio
287
FIGURE 18.2 The Sounds palette, Preview view.
As with the Library, Textures, and Styles palettes in LiveMotion, the Sounds palette lets you apply a sound to objects using the preset sounds or ones that you add.
See the section “Adding Audio to the Sounds Palette,” later in this hour, for details on how to add sounds to the Sounds palette.
Foreground sounds play when the object loads into the Web page or animation in which it is contained. Background sounds play when the page loads. To add a sound to the background, simply drag and drop the sound directly onto the background of your composition.
Adding Sound to an Object State One of the most popular uses of sound in LiveMotion is to add a click or similar audio event to an over or down state within a rollover. So as your mouse passes over, clicks down, or passes away from a button, sound is played.
You cannot add sound to the normal state, only the over, down, and out states. However, you can add different sounds to each of the available states.
This is a common technique in multimedia, and it’s easy to do using LiveMotion.
Task: Adding Object State Sound To add sound to an object state, complete the following steps: 1. Open the States palette. 2. Create an object and set the states you’d like the object to have. (See Hour 13, “Image Mapping and Rollover Techniques, and Hour 14, “Creating Remote Rollovers.”)
18
24 0672323125 CH18
4/22/02
12:37 PM
Page 288
288
Hour 18
3. Select the object state to which you want to add the sound. I added mine to the down state. 4. Open the Sounds palette. 5. Select the sound you want to apply. 6. Click Apply or drag and drop the sound onto the object in your composition. The sound now is applied to the object state. When I click the button shown in Figure 18.3, I hear a click. FIGURE 18.3 Adding sound to an object state.
Adding Sound to an Animation Animations are another natural place to add sound. As you add sounds to an animation, they will be given their own object headers (demarcations within the Timeline; see Hour 15, “Exploring the Timeline”) and related properties. You can then adjust these properties as you see fit, such as modifying the pan and the volume.
Sounds already have a predetermined duration. If you extend the sound’s duration bar beyond the sound’s recorded length, the sound simply repeats for the given duration. You also can use the Timeline to fade the sound or have it stop before its predetermined length.
Task: Adding Animation Sound To add a sound to an animation, complete the following steps: 1. Open the animation. 2. Select the point in the animation where you want the sound to go. For example, I clicked the final keyframe in an object rotation because I wanted the sound to play as the object appeared to fall. 3. Open the Timeline/Composition window by selecting Timeline, Timeline/Composition Window. Arrange both windows using Window, Tile.
24 0672323125 CH18
4/22/02
12:37 PM
Page 289
Adding LiveMotion Audio
289
4. Bring up the Sounds palette by selecting Window, Sounds. 5. Select the sound you want, and drag it to the Timeline/Composition window. 6. Drop the sound. The sound has now been added to the Timeline/Composition window, along with a duration and properties you can edit further (see Figure 18.4). FIGURE 18.4 Adding sound to the Timeline/Composition window.
18
As always, remember to save updates to your native files!
Adding Audio to the Sounds Palette Managing your sounds is easy and can be done in various ways. You can add a sound to the palette using drag and drop, you can drag a sound file from an external location directly to the palette, you can use the New Sound icon to browse through your system for sounds, or you can place a file in the proper directory.
Dragging a File to the Palette You can drag a sound file from anywhere on your computer or network to the Sounds palette. This procedure works only with compatible sound formats, mentioned earlier in the hour.
24 0672323125 CH18
4/22/02
12:37 PM
Page 290
290
Hour 18
Task: Dragging a File Perform the following steps to add a file to the palette: 1. Using Windows Explorer (Windows) or Finder (Mac), locate the sound file you want to add to the palette. 2. Select the file and drag and drop it onto the LiveMotion Sounds palette. The Name dialog appears. 3. Name the sound. 4. Click OK. Your sound automatically updates to the palette and is ready for you to use.
Adding a File Using the New Sounds Icon Another way to add sounds is to use the New Sounds icon on the Sounds palette.
Task: Using the New Sounds Icon To add a file using the New Sounds icon, follow these steps: 1. Click the New Sounds icon. 2. Find the sound file you want to add. 3. Click Open and then enter the name you want to give the sound. 4. Click OK. This method is fast and one that I use more frequently than the other methods.
Placing a File in the Sounds Folder No doubt, adding a custom design to a palette is a method that is familiar to you. The Sounds palette is no different; you can add sounds the same way you add shapes, textures, and styles.
Task: Adding a File Using Windows Explorer or Mac Finder If you want to add a sound to the Sounds palette using Explorer or Finder, do the following: 1. Find the sound in Windows Explorer (Windows) or Finder (Mac). 2. Copy the sound from its current location to the LiveMotion Sounds folder. 3. If necessary, rename the file to a short, descriptive name that helps you identify the sound within the palette.
24 0672323125 CH18
4/22/02
12:37 PM
Page 291
Adding LiveMotion Audio
291
Using this method, you may have to restart LiveMotion before the sound will be available in the Sounds palette.
Deleting Sounds As with other palettes, the deletion of sound is a destructive process. You can delete sounds, however, if you want. If those sounds are used in a composition that has not yet been exported as an SWF file, they will be lost.
Task: Deleting Sounds Permanently To delete a sound permanently from the Sounds palette, complete the following steps: 1. Highlight the sound in the palette. 2. Click the Delete Sound icon (Trash). 3. A dialog appears asking whether you really want to delete the file. If you do, select Yes. The file is now permanently deleted from the library.
Another means of deleting audio is to go into Windows Explorer or Mac Finder and delete the file from the Sounds folder.
Summary With a little knowledge about audio file types under your belt, you’re ready to begin imagining the kinds of audio you’ll want to apply to your objects, rollovers, and animations. What’s more, you know how to use and manage preset audio, as well as acquire your own and build your sounds library. Let’s review the lessons of this hour.
Q&A Q I tried to add an audio file to the palette, but it didn’t work. A Go over the directions carefully and consider trying another method. If that doesn’t work, it’s possible that the audio format you’re trying to add isn’t compatible with LiveMotion (see Table 18.1).
18
24 0672323125 CH18
4/22/02
12:37 PM
Page 292
292
Hour 18
Q Can I add large audio files to the library? A Yes, but bear in mind that every time LiveMotion loads that palette, it loads that file, which will slow down most computer systems. Q What about using lots of sounds in an animation? A I’ve mentioned this before because it’s important. Your audience and type of project are the key factors in helping you determine what kind of leeway you have in terms of file size. If you are designing strictly for the Web, keeping things small and concise is in your audience’s best interest. If you’re designing for broadband (fast connections), CD-ROM, or another media type only, you may have more latitude.
Quiz 1. What is the sound format used for LiveMotion library sounds? 2. Name three ways to get sound. 3. Why should you be careful when using downloaded sound?
Quiz Answers 1. AIFF, Audio Interchange File Format. 2. Record it yourself, download it from the Web, or purchase it from a professional audio stock company. 3. Many sounds are copyrighted. Violating copyright is a serious offense. If you’re using the sound for noncommercial practice, that’s one thing. But if you put it up on the Web live, or use it in a commercial context, you could find yourself in the midst of an unwanted legal battle! Better safe than sorry.
Activities To expand your sound horizons, try the following exercises: 1. Open one of the remote rollover exercises you created in Hour 14. Add sound to the state that invokes the remote action. 2. Open an animation that you created in Hour 16, “Designing Animations.” Add audio using the Timeline/Composition window.
25 0672323125 CH19
4/22/02
12:37 PM
HOUR
Page 293
19
Creating a Multimedia Presentation Multimedia is simply the use of multiple forms of media, grouped into a cohesive process along a timeline. After reading the chapters in this section, you should have no trouble seeing that, in LiveMotion, this means combining objects, rollovers, audio, and animation into a single package. In this hour, you’ll learn about the following: • What multimedia can do • Planning and scripting • Component design • Multimedia production techniques Creating multimedia with LiveMotion is an excellent way to orchestrate your learned skills into a bigger picture: one that moves, plays sound, and interacts with the viewer in a dynamic fashion.
25 0672323125 CH19
4/22/02
12:37 PM
Page 294
294
Hour 19
About Multimedia Most people are familiar with multimedia in its common forms, which can include the following: • Computer games • CD-ROM productions such as interactive encyclopedias and educational learning tools • Web sites • Information kiosks
A kiosk is a standalone structure containing a computer screen. Kiosks are often found in shopping malls, museums, and stores and are used to give passersby and customers information. Sophisticated kiosks have touch screens and allow the user to travel through a multimedia presentation.
What binds each of these media together is not only the fact that more than one media type is being used but also the fact that the human being must interact with the media for it to make sense. This is the essence of a multimedia presentation! The person using the presentation is an integral part of its behavior. Although you could say that turning a page in a book is interactive, multimedia presentations have a much more complex cause-and-response relationship. As you saw in Hour 14, “Creating Remote Rollovers,” for a rich experience to occur, the user has to act first. To see a Salvador Dali painting, you have to invoke that painting. In turn, that experience causes you to react again, and you either choose to pursue more information about Dali, move to the next artist, or leave the interactive experience. This responsive relationship is partly why multimedia, including Web sites, is so interesting. By nature, most human beings are curious. We want to see what will happen if. So we click the button and move into a deep relationship with the presentation. We become engaged in the game, in the learning, in the process. As a result, we become fully immersed in an entertaining, educational, or information environment.
Although Web pages in and of themselves are multimedia events, LiveMotion lets you create multimedia that includes and extends beyond the Web and into other delivery options such as downloadable, executable programs and programs that can run from CD-ROMs and disks.
25 0672323125 CH19
4/22/02
12:37 PM
Page 295
Creating a Multimedia Presentation
295
A Concept, a Plan, a Script So how is a rich experience of this nature executed? Because multimedia presentations can be complex, it is the designer’s responsibility to innovate, plan, and blueprint a presentation. I like to approach multimedia using three key ideas: concept, plan, and script.
Goal and Vision The concept is the combined goal and creative vision of the presentation. For the examples in this hour, I decided to create a small multimedia tribute to the Jazz musician Miles Davis (see Figure 19.1). My goal was to introduce basic facts about Davis—a compelling man, hugely influential musician, and talented visual artist. I was certain I would have enough diverse media with which to create my example.
NEW TERM
FIGURE 19.1 A still shot from my multimedia tribute to Jazz great Miles Davis.
Thinking about Davis and his art, I made some decisions about the look and feel of the presentation. I knew I wanted to use black as my background because Davis embodied elegance, mystery, and great sadness. My color scheme, which includes dusky gold, purple, green, and rose, expresses soft yet contrasting statements regarding the musical and artistic passion of Davis. I further decided that I wanted to integrate fluid movement as part of the initial experience, but then offer up a way for the individual to interact with the design. I felt this approach would address both my desire to metaphorically express Davis’s grace and the need for the user to unveil information in his or her own way.
As you work through your concept, take notes! This helps you refine your ideas. I also find myself looking back at my early concept notes to gain my bearings as I work through the production process.
19
25 0672323125 CH19
4/22/02
12:37 PM
Page 296
296
Hour 19
The Big Picture When the meeting of goal and vision are intact, it’s time to make a plan! The plan is taking a look at the presentation as a whole. To reach your concept, you need to see how the general pieces fit together. Typically, you’ll want a beginning, a middle, and an end to the presentation—just like a story. However, the challenge of multimedia is to include tangential information via links and, of course, offer an experience whereby the user can make decisions about which way to go.
NEW TERM
For my plan, I decided to have an animated opening sequence. In this sequence, the user is introduced visually to Davis and the presentation, but no real interactivity occurs. This allows me to set the stage. Then an interactive segment follows. Using elements from the opening sequence, this portion of the process involves the user interacting with the presentation to follow various avenues of information about Davis (see Figure 19.2). FIGURE 19.2 An interactive layout within the presentation.
Finally, I included a closing segment. However, I decided to let the user determine whether to use this segment by providing an exit option. This way, the user can choose to exit when she wants. In the meantime, she can stay in the interactive learning environment for as long as is desired.
Line by Line Although the plan is the comprehensive overview, you need something more detailed that actually outlines the components and activities within the presentation. This is the script. Scripting multimedia means looking at the plan and breaking it down into individual actions that occur along the timeline. A multimedia script is written much as a movie script is, with details as to timing, effects, and so forth. And, because multimedia timelines can be pretty long, scripting them takes a significant commitment of time. The critical thing to remember at this stage is that this use of the term “scripting” does not relate to code scripting, which is discussed later in the book.
NEW TERM
25 0672323125 CH19
4/22/02
12:37 PM
Page 297
Creating a Multimedia Presentation
297
When you begin working with LiveMotion, you may simply be too enthusiastic and be having too much fun with the program to spend time on the arduous task of writing a media script. This is fine, and I encourage you to jump right in and try your hand at the techniques first. A word to the wise, however: If you are sitting down to create a multimedia presentation for a client, or to represent yourself in some professional fashion, take the time to script your work.
Task: Scripting the Opening Sequence Here’s my opening sequence script: 1. Fade in audio, “So What.” 2. “M” and “D” fade in as “A Tribute” drops down from top. 3. “iles” and “avis” fade in as “A Tribute” moves to screen right (see Figure 19.3). 4. All letters change to green. 5. Fade in photo of Davis, screen left. 6. Pause, all. 7. Fade out audio. 8. Fade down full screen. 9. Fade in left navigation and exit buttons. 10. Pause for interactive components. FIGURE 19.3 A static shot of the opening sequence.
At this point in my presentation, any further action must be invoked by a user. I can continue scripting these sequences to have a roadmap when I get to production.
Task: Scripting the First Rollover For example, here’s the script for the first rollover sequence: 1. Rollover “The Man.” 2. Normal state, anchor gold, remote blank.
19
25 0672323125 CH19
4/22/02
12:37 PM
298
Page 298
Hour 19
3. Over state, anchor blue, remote with photo and biographical details (see Figure 19.4). 4. Out state, anchor gold, remote blank. FIGURE 19.4 The first rollover reveals biographical details and a photo of Miles Davis.
Each subsequent interactive component is scripted. For my presentation, I included a rollover for “The Music” (see Figure 19.5) and “The Art” (see Figure 19.6). I also added an “exit” rollover with attached audio, finalizing this short but engaging presentation. FIGURE 19.5 The second rollover shows a later photo of Davis and describes his role in contemporary Jazz.
FIGURE 19.6 The final rollover depicts a sample of Davis’s visual art.
25 0672323125 CH19
4/22/02
12:37 PM
Page 299
Creating a Multimedia Presentation
299
You can visit the book’s companion Web site to see this production demo in action: www.webwithmolly.com/livemotion/.
Designing Presentation Components After you have a concept, plan, and script in hand, it’s time to go to work. You’ll use the techniques you’ve learned thus far to create the design elements, choosing shapes, colors, photos, type, sound, and motion where the script calls for them. You can approach the design of individual elements in two basic ways: You can create them one by one within the context of the composition, or you can create the components in individual files and add them to the composition later. Each approach has advantages and disadvantages. The advantage to creating everything in one place is that the process is contained. You don’t have to keep track of multiple files and revisions, which can save time. A disadvantage to this approach is that it can cramp your style. Because your composition will have so many layers and effects, your desktop will become littered with palettes, and the composition itself will become packed with objects (see Figure 19.7). This can become a logistical nightmare and cause you to miss elements or include hidden or unwanted elements that you don’t want or need. FIGURE 19.7 Object overkill can cause confusion.
Approaching the components of the composition individually places a significant demand on you in terms of managing files. You’ll be saving multiple files instead of one big file, and this means knowing what’s in each file. You’ll want to keep your filenames very clear, and perhaps even create a specific folder or directory structure to manage individual components: photos, interactive/animated
19
25 0672323125 CH19
4/22/02
12:37 PM
Page 300
300
Hour 19
objects, audio. What’s more, you’ll need to keep the size, proportion, and element relationship in perspective—your photos must fit the end composition space in harmony with your animated text! Although the management aspects of working on components and then combining them into a final composition are more complex, the advantages to this process are persuasive. First, you have total control over individual components without worrying about littering the main composition with unwanted and unnecessary experiments or alternative approaches (see Figure 19.8). FIGURE 19.8 Working on a single component in a separate file.
If you want to work on a single object’s details, or simply move an object to another file, it’s important to remember that if you copy an object with Timeline attributes, those attributes will copy along with the object.
Then, you also have an archive of individual components that can be quickly accessed and modified at any point in the production process, after production, or even for a related presentation you work on down the road. No matter which approach you decide to use, it all comes together in the main composition—the production portion of the process.
Save styles, textures, sounds, and shapes to the appropriate LiveMotion libraries to maximize your workflow.
Production Tips When you’ve collected your components or created them within a single composition, it’s time to set them on the timeline. Production of multimedia is an extension of
25 0672323125 CH19
4/22/02
12:37 PM
Page 301
Creating a Multimedia Presentation
301
animation in that you’ll work using keyframes, duration, and behaviors to control the timing of your project. Here are some general tips for multimedia production in LiveMotion: • Specify the dimensions of your main composition to match your production needs. If you’re designing for a Web page, know the resolution to which you want to design (see Hour 20, “Professional Applications of LiveMotion.” If you’re creating a production for a CD-ROM, you have more leeway in terms of size. • Set your desktop to the highest resolution available for your computer (and comfortable for you!), giving yourself plenty of space in which to work. This becomes especially important as the timeline grows longer. • Use the Tab key to hide palettes as you’re working. When you need them, press the Tab key again. • Begin with a longer duration than you think you’ll really require. You can always scale back, and in the meantime, you have plenty of flexibility. • Keep in mind that each component you add to the composition adds weight (large file size) to the end presentation. For Web-based presentations, this means that you’ll have to keep things streamlined, optimizing graphics and audio before adding them to the mix. • Get into the habit of saving your file frequently. I actually save every minute or less. I’ve worked the Ctrl+S (Windows) or Cmmd+S (Mac) keystroke combination into a permanent rhythm when working. This is because losing something brilliant you’ve created will break your heart! Save early, save often, save yourself frustration and sorrow. • Select and edit audio files to suit your design. Audio adds serious heft to presentations, but for multimedia it really can enhance the experience. The Miles Davis example clearly demonstrates why—using tracks from the artist is an integral part of the learning experience. But this will bloat file sizes, particularly if you choose to use longer, higher quality cuts. Good compression and tasteful editing can help restrict bloat. See Hour 18, “Adding LiveMotion Audio,” for more details. • Preview your work regularly. You can do this using Preview mode, or by selecting the timeline play control. Either way, it helps to see your work in action so that you can make adjustments and refinements along the way. • Export your work to the appropriate format. This more than likely will be Flash. You can read more about exporting in Hour 21, “Optimizing and Exporting LiveMotion Files.” • Take breaks! This might sound like ancillary advice, but designing presentations can be an intensive process. The energy required to develop a presentation can
19
25 0672323125 CH19
4/22/02
12:37 PM
302
Page 302
Hour 19
deplete both your physical and your creative capacity. When you’re sure that your latest updates are saved, get up, stretch, relax, go outside, run around the block, or clean the office. You’ll feel better, and you may also find that problems or creative blocks are easily resolved when you return. The most important aspect of any project is that you enjoy what you do. Although some of you are using LiveMotion to be creative, and others are using it as a work-related productivity tool, the bottom line is that no project is quite as successful as one you truly enjoy.
Summary This hour has been spent pulling together skills and combining them to create an interactive presentation. Much of the information in this hour has been conceptual—allowing you to learn about multimedia design theory and see how to put your skills into practice. Using the ideas and guidelines in this hour, you are ready to create multimedia presentations that are well organized and inspired. Next up along our timeline is even more conceptual information on how to create full Web sites. But first, let’s review this hour’s lessons.
Q&A Q Can creating a script outline impede the creative process? A Yes, especially if you don’t give yourself ample time to use your imagination. Writing a preparatory script is a professional approach best used after you’ve enjoyed time conceptualizing and innovating. Much of this can be done by experimenting in LiveMotion, and some of it will be inspired by external things: music, nature, a conversation, and so on. Q I want to use a lot of high-quality audio and graphics in my presentation. Can I do so with confidence? A This entirely depends on whether you are producing the piece for the Web, and even then, who your audience is. Web presentations for general audiences are limited by size. However, if you know that your audience has high-speed access or is willing to download and then play the presentation, you have more flexibility in terms of image and audio quality.
25 0672323125 CH19
4/22/02
12:37 PM
Page 303
Creating a Multimedia Presentation
303
Q Where can I find images and audio for my presentations? A There are plenty of great resources online. See Hour 2, “Importing Photos and Artwork as Objects,” and Hour 18, “Adding LiveMotion Audio,” for specific suggestions.
Quiz 1. Describe the difference between a plan and a script. 2. When is scripting most desirable? 3. Why is taking a break important when you’re working on complex projects?
Quiz Answers 1. The multimedia plan is a general overview of the presentation’s sequencing, whereas the script is a line-by-line approach to each component and its inherent action(s). 2. Scripting is especially important in professional presentations. 3. Two reasons: it refreshes you physically and can clear away creative blocks.
Activities 1. Conceive, plan, and script a multimedia presentation. 2. Produce the presentation.
19
25 0672323125 CH19
4/22/02
12:37 PM
Page 304
26 0672323125 PART 06
4/22/02
12:38 PM
Page 305
PART VI Designing and Optimizing Advanced Web Presentations Hour 20 Professional Applications of LiveMotion 21 Optimizing and Exporting LiveMotion Files
26 0672323125 PART 06
4/22/02
12:38 PM
Page 306
27 0672323125 CH20
4/22/02
12:38 PM
HOUR
Page 307
20
Professional Applications of LiveMotion In the preceding hour, you learned what it takes to create a multimedia project. In this hour, you’ll plan and create a complete site, which can include rollovers and animations. I’ll provide you with the files you’ll need to work with, but this is a practice session to help you get a sense of how to go about the process of creating a Web site. In this hour, you’ll learn about the following: • Site planning • Splash pages • Building content
27 0672323125 CH20
4/22/02
12:38 PM
Page 308
308
Hour 20
Planning the Site Planning is one of the most overlooked issues in designing a site. The following concerns must be addressed before a site actually can be developed: • Understanding the site’s audience. Without a solid understanding of who you’re designing for, you are at a significant risk of missing the audience’s needs. If you are working for a client, ask a lot of questions about the intended audience. If you have a site already, look to your server statistics to determine technical details, such as the most popular screen resolutions, whether JavaScript is enabled in most of your audience’s browsers, and which Web browsers are commonly used. This information will be invaluable to you as you sit down to design the appropriate architecture and layout for your pages. • Knowing the intent of your site. Almost as important as knowing the audience is understanding the immediate goal of the site. Is it to inform? To entertain? To sell a product? Answering these questions right away helps you speak to your audience in a clear, concise, and correct fashion. • Designing appropriate site technology, visual design, and underlying architecture. After you understand who you’re designing for and what the intent of the site is, you’ll want to build a site that is both technically and visually accurate for the audience and that supports the intent of the site. With information about audience and intent in hand, you can address the technology, design, and architecture concerns much more adeptly. For example, if you understand that your audience is a young, intelligent, well-to-do group, and you know that the intent of your site is to sell popular books, magazines, and records, you’re ahead of the game! This audience likely will want some visual fun. They’re using computers and Web browsers with technology to support Flash and JavaScript, and they probably have no problems supporting diverse color. What’s more, they are likely to be browsing at a resolution of at least 800×600. All of this, in turn, tells you what parameters you’ll need to adhere to, and where you can flex.
Web design, HTML, and related technologies are not the primary focus of this book, but they all play a role in how you develop sites. Although LiveMotion takes a lot of the learning curve out of the process and helps you create designs that look great and work well, you need broader information to work more efficiently. Look through Sams’s wonderful catalog of books geared specifically to topics of interest to you (www.samspublishing.com/).
27 0672323125 CH20
4/22/02
12:38 PM
Page 309
Professional Applications of LiveMotion
309
Overlooking any one of these steps spells potential disaster! You must spend the time and get the necessary information. Even if you’re designing purely for yourself, this doesn’t mean that you shouldn’t seriously work through the issues discussed here.
Web Architecture Web architecture refers to the internal structure of the Web site. Different designers approach structure differently, but I perceive any Web site as having the following structural potentials:
NEW TERM
• Linear—A purely linear site would be one developed like a book. To get to the next bit of information, you’d have to click a link to go to the next page. You might be able to go forward and back, but never away from that basic structure. Usually, this has limited use for the Web, say in a guided tour. • Hierarchical—Hierarchies are basically linear structures, but they move up and down as well as backward and forward. Most of today’s basic Web sites are hierarchies, with a central page and then pages branching off from that point. Hierarchies make sense for most sites because they are easily understood by almost all people. • Nonlinear—A nonlinear site is completely random. For example, if I click a link in a nonlinear site, I may end up anywhere on the site, or even on another site entirely! Because nonlinear structures are unfamiliar to most Western and Eastern mindsets, they are usually good only for experimental-style sites. • Combination structure —The real challenge of the Web designer is to come up with some kind of structure that combines linear, hierarchical, and nonlinear features. This can be difficult, but it is doable, especially after study and practice. Usually, these kinds of sites are large, with many links both within the site and to external sites. Figure 20.1 shows a drawing of each of these concepts. Ideally, you will spend some time thinking about these structures before building your Web site, deciding how to best display your information. Navigation and other interface issues are built over this structure, and, naturally, the structure you choose should reflect the needs of your audience as well as the goals of your site. In this hour, you’ll build a simple site using a basic hierarchy, which is—as mentioned— a common and sensible approach.
20
27 0672323125 CH20
4/22/02
12:38 PM
Page 310
310
Hour 20
FIGURE 20.1 Web architecture options.
Linear
Nonlinear
Hierarchical Combination
The Stuff Sites Are Made Of Upon the structure of a site lie its pages. Pages in a site can be readily categorized and include the following: • Splash page— This is usually a graphical page used by some sites as a means of setting the visual tone of the site. Many designers like them; others don’t. I think they can be helpful in establishing a brand as well as setting up the site visitor to understand the basic navigation and other patterns available in the site. You’ll create one in this chapter, but of course it’s up to you whether you want one for your own site. • Home page—This can be the splash page, but if a designer chooses to forgo a purely visual introductory page, she will begin with the home page. This is the site’s introductory page, the one that loads when a visitor first enters the site. It’s typically used to discuss news and events and to introduce people to the site’s locations and topics. • Content pages—Whether your site contains three or three thousand, content pages are the heart and soul of your site. They are where the articles, information, interaction, and literal “stuff” of your site exist. Content can include catalogs, community pages, searches, and so on.
27 0672323125 CH20
4/22/02
12:38 PM
Page 311
Professional Applications of LiveMotion
311
• Contact and legal pages—Web sites generally have a “how to get in touch” page or a set of pages acting as a directory. Many commercial sites offer information about the copyright, trademarks, and other legally related information regarding the site. • Help pages—If you have a large site or a site that requires special technology, it may be in your audience’s best interest if you add pages that explain how to use the site and offer links and downloads for any special software. • Site map/table of contents—Another helpful page to offer on larger sites is a site map, alternatively referred to as a table of contents. This kind of page breaks down the various sections and pages on the site with direct links. This helps people find things quickly or reorient themselves should it be necessary. In the next section, we’ll analyze a small Web site to see how you can use LiveMotion to create a sensible site using the basic principles described here.
Deconstructing a LiveMotion Web Site Let’s begin by explaining our fictitious goals. First, our site: a Web audio company site. Our audience: Web designers and developers interested in using audio on the Web. Our primary goal: to position our company brand as being the resource for Web audio developers. Because our audience is made up of Web developers, we know several important things right off the bat: These are folks who want good design but want things really well organized. The site should not only look good but also get visitors where they want to go, and quickly. We also know that because our intent is to brand ourselves by providing good information, we need to have that information really close to the top. But we still want our brand to be in the primary position. Here’s how I approached the top-level architecture: • Splash page—This is used as a means of establishing the brand right up front. • News—This page provides developers with any related audio news, including news about the company. • Developer info—This is the doorway to the main content of the site, with links and resources leading off this entry. • Contact—This is a fast and easy way for visitors to get in touch with the company.
20
27 0672323125 CH20
4/22/02
12:38 PM
Page 312
312
Hour 20
My rationale behind this top-level structure was motivated both by the audience’s need to get quickly to developer information and by a primary concern that the company brand be the context in which that information is delivered.
Designing the Splash Page Figure 20.2 shows the splash page design for the fictitious company example. In it, you’ll note that I instantly establish the brand by using the logo and tagline. The tagline is animated, so it fades in. I also establish quick and easy navigation. I use rollovers and remote rollover techniques to help enhance the experience. FIGURE 20.2 A sample splash page.
Task: Creating a Logo To create the logo, complete the following steps: 1. Create a canvas suitable to the size of your desired Web page. I made mine 585×295. 2. Design a color scheme. I made mine dark red, deep green, and dark purple. I chose the dark red for my foreground color. 3. Open the Library palette and select a preset animation. Position the shape on the canvas. You may want to use the Timeline to bring it into view.
27 0672323125 CH20
4/22/02
12:38 PM
Page 313
Professional Applications of LiveMotion
313
4. Set the typeface (I chose Garamond) for the company name. Rotate and position the text. 5. Group the two objects together and then pull up the 3D palette. Apply the Ripple effect with a depth of 4. 6. Save your file as home.liv.
Task: Designing the Tagline To design the animated tagline, complete the following steps: 1. Choose dark green as your foreground color. 2. Set the type. I used Verdana, 24-point. 3. Position the type in relation to the page layout. 4. Select the tagline. Open the Styles palette and choose Animated Bounce in Right as the preset animation style. 5. Apply the animation. Press Ctrl+S (Windows) or Cmmd+S (Mac) to save the updates to your file.
Task: Creating the Text Navigation and Rollover States Now design the navigation scheme. First, create the text navigation and rollover states: 1. Keep the dark green color in your foreground. Set the first navigation text object. I used Verdana, 14-point, with a –10 tracking. Position the text. 2. Add the second and third text objects. 3. Select all the objects; then choose Object, Align, Right. 4. Distribute the objects by selecting Object, Distribute, Vertical. 5. Choose the first text object and, using the States palette, set the normal, over, and out states. I changed the type style (bold) and color (dark red) on the over state. 6. Pull up the Web palette and link the text object to its page of choice, in this case, news.html. 7. Repeat the rollover states and linking options for each remaining text object. 8. Save your updates.
Remember, you can always create your navigation style once, save it to the Style library, and then apply it to any other object to which you want to apply that same style. Note that URLs will not be saved with styles, but layers, attributes, and motion will.
20
27 0672323125 CH20
4/22/02
12:38 PM
Page 314
314
Hour 20
See Hour 13, “Image Mapping and Rollover Techniques,” and Hour 14, “Creating Remote Rollovers,” for detailed instructions on creating rollovers.
Task: Creating the Remote Rollovers To create the remote rollovers, complete the following steps: 1. Place the object to be the first remote rollover into the composition. 2. Create and modify the desired states. 3. Connect to the trigger each state you want to be affected by the target object. 4. Repeat the process for each desired remote rollover. After you have made any further modifications you want to the page, test the rollover techniques by switching to Preview mode (see Figure 20.3). When you’re satisfied with the results, save your work, as always! FIGURE 20.3 Previewing a remote rollover.
Adding Pages What’s really exciting about LiveMotion is how easy it is to add pages after you’ve created your basic objects. The ease of use comes from the fact that any object or style is moveable in its entirety. So if you want to create a new page with the same navigation, you simply copy the navigation, and the styles and rollovers come right along with it. What’s more, as long as you’re working with LiveMotion files, the vector format remains intact. This means that you can easily copy and paste something and then resize it to suit.
Task: Copying and Pasting Pages A good example of this is how I created the page headers for each additional page. Follow my lead:
27 0672323125 CH20
4/22/02
12:38 PM
Page 315
Professional Applications of LiveMotion
315
1. Create a new canvas of the same size as the original canvas. 2. Have both the original canvas and the new canvas open and tiled in the workspace (select Window, Tile). 3. Group the logo objects; then copy and paste them into the new canvas. 4. Position the grouped object; then resize it. 5. Set the name of the page (such as “news”) in the color, size, and typeface of your choice. 6. Position the type using the subgroup selection tool so that it works harmoniously with the resized logo. 7. Save your new file as news.liv. You are now ready to add other page options.
Task: Copying the Navigation Sequence To copy the navigation sequence, complete the following steps: 1. Select the navigation items from the original canvas. 2. Copy and paste them into the new canvas. 3. Position them accordingly.
Use the Transform palette along with a visible grid and rulers to position items carefully within a composition.
Adding Text Content to Your Pages Depending on whether you are going to export to HTML or Flash, you’ll want to choose a specific means of adding text. Text added with the Type tool will be processed as a graphic for both HTML and Flash files. For HTML-only pages, or pages where you are using both Flash and HTML, you’ll use the HTML tool to manage any HTML-based text.
Task: Adding Text for Graphics-Only Flash Output To add text for Flash output, complete the following steps: 1. Choose the Type tool from the toolbox. 2. Set the type content onto your page. 3. Position and size the content area accordingly (see Figure 20.4).
20
27 0672323125 CH20
4/22/02
12:38 PM
316
Page 316
Hour 20
For more information on exporting to HTML and Flash, see Hour 21, “Optimizing and Exporting LiveMotion Files.”
You can now create additional pages as you see fit, using HTML, Flash, or a combination of both. Figure 20.5 and Figure 20.6 show samples of other internal pages as viewed in the context of a Web browser. FIGURE 20.4 Positioning graphical text for Flash output.
FIGURE 20.5 The developer page uses a combination of Flash and HTML, seen here in Internet Explorer for Windows.
27 0672323125 CH20
4/22/02
12:38 PM
Page 317
Professional Applications of LiveMotion
317
FIGURE 20.6 The contact page uses an HTML form, which is an advanced technique.
Summary You’ve spent this hour confirming all the things you already knew, but putting them into a broader context of a combined, refined Web site. You also were introduced to some approaches to designing sites from both a visual and a structural perspective. After a brief review, you’ll be well equipped to move on to Hour 21.
Q&A Q I copied and pasted the navigation elements, but the animations and rollovers don’t work. What should I do? A Ungroup your objects and just select them by dragging the cursor across them. Then copy and paste. This should eliminate any problem. If you are still having trouble, try saving the navigation style to the Style library and then applying that style to fresh navigation.
20
27 0672323125 CH20
4/22/02
12:38 PM
Page 318
318
Hour 20
Q How can I create an interactive form for a contact page as shown in Figure 20.6? A You do this using HTML. You can either open the page that LiveMotion generates and edit it by hand, or add the code directly to the HTML dialog. You will need a good HTML reference, and you’ll also need to have information regarding your Web server’s method for handling form scripts. This information can be found through your Internet service provider (ISP) or systems administrator.
Quiz 1. What kind of site would be a good example of a linear site? 2. Why are wholly nonlinear sites difficult for visitors? 3. Why is it so easy to copy and paste LiveMotion graphics and resize them?
Quiz Answers 1. A page-by-page guided tour. 2. They are unorganized and random, without familiar structure. Purely nonlinear sites should be used only in experimental or artistic environments. 3. Because native LiveMotion files are saved to vector format, which allows you to resize any components that are vector-based without losing quality.
Activities To strengthen your site-building techniques, try the following exercises: 1. Create a linear site using a page-by-page navigation system. 2. Design a site with a splash page; then redesign the site with a functional home page.
28 0672323125 CH21
4/22/02
12:38 PM
HOUR
Page 319
21
Optimizing and Exporting LiveMotion Files Graphics and rollovers and animations, oh my! It’s time to take your work and export it to the format or formats most appropriate to your audience. In this hour, you’ll learn about the following: • LiveMotion export features • How to preview and optimize your designs • Export methods • Advanced export and code techniques I know you’re impatient to get your work ready for prime time, so let’s jump right in.
28 0672323125 CH21
4/22/02
12:38 PM
320
Page 320
Hour 21
Export Features and Formats LiveMotion provides many methods by which to set up, prepare, and export your files. You’ll do much of your export setup and prep work in the Export palette (see Figure 21.1). You can find this palette by selecting File, Export Settings. FIGURE 21.1 The Export Settings palette, Flash view. The view changes to accommodate the file type to which you are exporting.
The Export palette offers a special palette setup for each type of file format that you will be exporting to. These are the file formats available for export: • Photoshop—This option generates your design in Photoshop format. • GIF—You’ll use the GIF option frequently when exporting files for the Web, especially those with few, flat colors, or animated files. • JPEG—Another common format for the Web, this option is good when a composition contains many light gradients and changes, such as anything with photographic elements. • PNG Indexed—PNG is an excellent compression format but can be used only with a limited selection of Web browsers. This form of PNG works similarly to GIF, in that it restricts the number of colors in the palette. • PNG Truecolor—This form of PNG is more akin to JPEG compression, which doesn’t limit the color palette. As with PNG Indexed, its use for the Web is limited to supporting browsers. • Macromedia Flash—SWF is desirable for compositions that contain a lot of multimedia, animation, and so forth. Because it keeps the integrity of vector, the file sizes tend to be small but look great. Macromedia Flash is available inline in Internet Explorer browsers, but many other browsers require a Flash player plug-in. • QuickTime Video—You can export many animations to QuickTime Video. • Animated GIF—If you’d like to export a file as an animated GIF file, use this setting.
28 0672323125 CH21
4/22/02
12:38 PM
Page 321
Optimizing and Exporting LiveMotion Files
321
• Live Tab—Live Tab lets you create an interface for your own Live Tab creations (see Hour 22, “Scripting and LiveMotion,” for more details). • AutoLayout—To export files to HTML, LiveMotion will automatically slice your layouts. This setting should be limited to those compositions for which you’d like to have LiveMotion also write the HTML.
See Appendix C, “About Web Graphics,” for detailed information on graphics formats.
Previewing and Optimizing Your Work Optimization is the process of reducing file size while retaining the best visual results. This carefully balanced approach to Web graphics is made easy with the options available in LiveMotion. To preview the way your composition will look upon export, you will want to use the Preview Export Compression mode. To enter this mode, click the Preview Export Compression button in the Export dialog (see Figure 21.2) or press Ctrl+9 (Windows) or Cmmd+9 (Mac). FIGURE 21.2 The Export Settings dialog, with the Preview Export Compression mode activated.
Preview Export Compression button
You’ll notice a few changes when you switch to this mode. First, any selected object will have a red, rather than the normal blue, bounding box. You’ll also be able to see the original and compressed file sizes in the Export palette as you work to optimize your files. After you’ve set LiveMotion to preview the export, you’re ready to make decisions about optimization. The first question you have to ask yourself is this: “Which format and export options are the most appropriate for my needs?”
21
28 0672323125 CH21
4/22/02
12:38 PM
322
Page 322
Hour 21
When you have a clear idea of the format you want to use, review the following optimization and related features for each Web-related file type: • GIF—You’ll usually use GIFs for line art, plain text, and art with areas of flat, limited colors. Because GIFs work by limiting the number of colors, it’s in your best interest to set the number of colors you think will render the best results. You can do this by using the color slider and seeing how your design looks in a preview. Use the drop-down menu and choose from the various color palette types. If you’re attempting to stay true to Web colors, use the Web option, shown in the center drop down menu (see Figure 21.3). You’ll also want to set the transparency, interlace, and dither by clicking the related check boxes. FIGURE 21.3 Looking at options in the GIF interface of the Export palette.
Compress for Progressive Downloads Add Dither Pattern
Include Transparency
• JPEG—JPEGs are best used for photos, gradients, and dimensional designs. You’ll want to first set the quality of your JPEG by using the Quality slider or by entering a number into the text box. The higher the number, the higher the JPEG quality. Using Preview Export Compression, you can get a look at the way your JPEGs will appear when exported. You can also set your JPEG to be progressive (it appears sequentially rather than all at once), have reduced Chroma (this reduces the file size slightly), and be Optimized (this option can degrade files significantly). • PNG Indexed—This option works much as a GIF does, offering color limitation; drop-down color palette types; and transparency, interlace, and dither options. PNG Indexed is a good choice for line art, illustrations with flat color, and simple text. • PNG Truecolor— Unlike with JPEG, you can create transparency with PNG. You can also interlace the file to have it render progressively by clicking the Interlace check box. As with JPEGs, PNG Truecolor is a very good choice for photographs, gradient fills, and any design with a lot of light and dimension.
28 0672323125 CH21
4/22/02
12:38 PM
Page 323
Optimizing and Exporting LiveMotion Files
323
• Flash—When exporting to Flash, you can choose from JPEG or PNG options for file compression format. You’ll do this using the drop-down menu. You’ll also set the Color and Opacity resolutions. The Flash Export menu provides a means for controlling audio and animation frame rate, which you’ll use when exporting animations and multimedia presentations. You can increase or decrease the visual integrity of Flash files by using the Quality control in the palette.
Use transparency only when you want to have those portions of actively matted or alpha channel shapes appear seamless with a background. For best results, avoid interlacing or progressive options for graphics to be used as the background on a Web page.
Other than knowing which file types are generally more appropriate for a given compression format or presentation, file optimization is largely a trial-and-error process. This is one reason the Preview Export Compression is so helpful. You can work through several choices to find the best balance of compression and quality.
Exporting Your Designs In this section, you’ll walk through the export process for various designs. Hopefully, you’ve saved plenty of samples of your LiveMotion native files to use for this process. You’ll look at how to export a single image, an image map, rollovers, animations and multimedia, and complete Web pages.
Although you can export compositions to any file format you want at any given time in the composition process, I recommend saving first to LiveMotion format. This way, you have kept all the detail and can go back and make modifications with ease, including exporting to another format entirely.
Exporting a Single Image and Image Map You have already created a single, static image, such as a header, subhead, spot art, or button, and now you want to export it.
21
28 0672323125 CH21
4/22/02
12:38 PM
324
Page 324
Hour 21
Task: Exporting Static Images To export a single image and image map, complete the following steps: 1. With your composition open, bring up the Export palette by selecting File, Export Settings. 2. Click the Preview Export Compression button in the Export As palette. 3. Set the export to the appropriate format. It most likely will be GIF or JPEG for a single, noninteractive image. 4. Modify the settings to meet your needs. 5. In the Export dialog, check the Trim Composition on Export check box. If you want LiveMotion to create an HTML page for the image, check the Export HTML Page check box. You can also check Export HTML Report if you’d like additional information about the export process (see Figure 21.4). 6. Select File, Export. Find a suitable location for your file and name the file. 7. Click Save. Export HTML Page
FIGURE 21.4 The Export dialog with the check boxes set to create HTML and crop the composition.
Trim Composition on export
Export HTML Report
Your file has now been saved to your hard drive. If you chose to have LiveMotion generate an HTML page, it will be generated and saved as well. People who know HTML or use a WYSIWYG Web design program, such as Adobe GoLive, can simply save individual files and then use their program to lay out and design the individual pages.
Exporting an image map involves making sure that you create an HTML page along with the entire or trimmed composition. This way, LiveMotion automatically includes the map data. You can export image maps to all available graphics formats.
28 0672323125 CH21
4/22/02
12:38 PM
Page 325
Optimizing and Exporting LiveMotion Files
325
Exporting Rollovers Rollovers will have an HTML file generated along with the composition export.
Task: Exporting Standard or Remote Rollovers To export standard or remote rollovers, complete the following steps: 1. In the Export palette, set the export to the appropriate format. In the case of rollovers, choose Flash. 2. Determine the desired settings, weighing the look of the file with the output weight. 3. Check the Trim Composition on Export check box if you’d like the rollover to be trimmed to its exact size. 4. Export your file using File, Export. 5. Name and save your file.
Exporting Animations and Multimedia Animations typically offer two choices for export: Flash and GIF. Multimedia presentations will be exported to the SWF format.
Anytime you want to preview your composition within a Web browser, select File, Preview In. Select a browser from the list to preview your LiveMotion composition.
Task: Exporting Animations or Multimedia as a Flash File To export an animation or multimedia presentation as an SWF file, complete the following steps: 1. Bring up the Export palette by selecting File, Export Settings. 2. Choose Flash as your export option. 3. Set the frame rate by clicking the Frame Rate tab in the Export Settings palette. The higher the frame rate, the slower the speed of the overall presentation or animation. 4. If you’re using audio, you may want to modify the audio rate. You can do this in the Audio tab. The lower the number, the lower the quality of the audio.
21
28 0672323125 CH21
4/22/02
12:38 PM
Page 326
326
Hour 21
5. If you’d like to embed fonts in your composition, do so by clicking the Embed Fonts tab, and choosing the fonts you’d like to have embedded along with the composition. 6. If the Export HTML Page check box isn’t checked, check it now. 7. Select File, Export. 8. Name and save your file. Depending on the size of your animation or presentation, you may wait a few moments while the various components are created and saved.
Exporting Complete Web Pages Whenever you create a complete Web page or a series of pages, such as you did in Hour 20, “Professional Applications of LiveMotion,” you want an effective and fast way of exporting the site so that it’s Web-ready. You can do this effectively from your saved LiveMotion files or directly from a composition.
To preview the way LiveMotion will slice your composition, select View, AutoSlice Area.
Task: Exporting Your Site Web-Ready For an effective and fast way to export your site so that it’s Web-ready, complete the following steps: 1. Determine the format. For standard Web pages, you can use GIF or JPEG. For interactive pages, you can use GIF, JPEG, or Flash SWF. 2. Open the Export Settings dialog and select AutoLayout from the drop-down menu. 3. Select the file type. If you want your selection to apply to the entire document, make sure that the Document Export Settings button is pressed. To make selections based on each object in the composition, click the Object Export Settings button and set the attributes for each individual object. 4. Select File, Export; then name and save your file. 5. Repeat this process for each page in the site. If you select GIF or JPEG, LiveMotion creates an Images directory, names the files, and exports all the graphics files to that directory. It then places the HTML file in the directory containing the Images directory.
28 0672323125 CH21
4/22/02
12:38 PM
Page 327
Optimizing and Exporting LiveMotion Files
327
Be careful when moving HTML and non-native LiveMotion graphics files after they’ve been created by LiveMotion. Doing so can render parts or all of your page inactive.
Working with LiveMotion’s Generated Code As you create your LiveMotion compositions and generate code, you find yourself with several challenges. First, you can rely on LiveMotion to generate entire pages, as described earlier in the section “Exporting Complete Web Pages.” Or you can create your own HTML pages, adding the LiveMotion image map and the code that embeds Flash files into HTML by cutting and pasting that code. In most cases, Web pages require you to write the HTML or use a program such as GoLive to generate it. Even though LiveMotion writes usable code, skilled or more adventuresome readers may well want—and need—to make further modifications or add custom features to pages or sites. This means that you’ll likely want to take what LiveMotion has generated and copy it into the pages you’re creating. Let’s review how to do this for an image map and Flash file.
Task: Copying LiveMotion Image Map Code To copy LiveMotion image map code to another Web page, complete the following steps: 1. Open the LiveMotion HTML page in your HTML editor or software program. 2. Open the page into which you want to paste the code in the editor as well. 3. Copy the LiveMotion code from the image map’s tag origin through the complete map data. Here’s a sample: <Map Name=”map1”>
4. Paste the code into the body of the target page, and save that page.
Be sure to move any related pages or images to the proper folders or directories, or the map may not function properly.
21
28 0672323125 CH21
4/22/02
12:38 PM
328
Page 328
Hour 21
Try out your changes in a Web browser to ensure that everything is working properly.
Task: Copying a Flash Composition To copy a Flash composition to another Web page, complete the following steps: 1. Open both the LiveMotion and the target Web page in an HTML editor. 2. Copy the Flash code from the LiveMotion page. It will be contained within an opening and closing tag as shown here:
3. Paste the code, save the file, and test in your Web browser. Make any adjustments or changes to the code or related files as you find necessary.
Summary Well, you did it! You learned how to use LiveMotion to create everything from simple Web graphics to active animations to complex multimedia presentations. Let’s do a quick question-and-answer session, followed by a review. Then, you’ll venture into the fun world of LiveMotion scripting.
Q&A Q How can I get the smallest file sizes possible during optimization? A Optimization first and foremost requires you to select the right file type and compression. Whether you are choosing a graphics compression type or an audio
28 0672323125 CH21
4/22/02
12:38 PM
Page 329
Optimizing and Exporting LiveMotion Files
329
compression type, these choices will make a significant difference in the way your compositions will be optimized. Q I like the file size and quality I’m getting with PNGs. Can I just use those for most of my Web graphics? A Sadly, PNG support is limited. Use them only when you know that everyone accessing them has a supporting browser.
Quiz 1. What two important interface changes occur when LiveMotion is placed in Export Preview? 2. Why is it advised to not use Export Preview during production but use it only during the export and optimization process? 3. You’re creating complex Web sites using a product such as Adobe GoLive. What do you do to use LiveMotion’s production of image map and HTML code?
Quiz Answers 1. The object bounding box turns red, and composition and compression size boxes are actively available. 2. Export Preview Compression demands more resources from your computer, potentially slowing down its capabilities. 3. Copy and paste the relevant code into the pages you’re generating elsewhere.
Activity 1. Practice exporting various compositions using a range of export options. Then, modify the file sizes you get between each type of export. This exercise will help you refine your optimization skills.
21
28 0672323125 CH21
4/22/02
12:38 PM
Page 330
29 0672323125 PART 07
4/22/02
12:38 PM
Page 331
PART VII Advanced Techniques: Scripting Hour 22 Scripting and LiveMotion 23 Adding Scripts 24 Scripting Project A Learning LiveMotion Features B Setting Preferences and Working with the Composition Area C Understanding Web Graphics
29 0672323125 PART 07
4/22/02
12:38 PM
Page 332
30 0672323125 CH22
4/22/02
12:39 PM
HOUR
Page 333
22
Scripting and LiveMotion Scripting plays a growing part in the creation of dynamic Web design, and LiveMotion 2.0 offers powerful scripting features. If you’ll recall that LiveMotion is an object-oriented program, it’s easy to understand the power of scripting when it is described simply as a means to control objects in a composition using programming logic. In this hour, you’ll learn about the following: • JavaScript’s history • ActionScripts and their value in animation • Using Automation scripts and Live Tabs • Scripting tools Gaining insight into scripting is the first place for LiveMotion users to prepare their skills for a more intermediate to advanced use of the program. This hour will help provide you with a foundation for that goal.
30 0672323125 CH22
4/22/02
12:39 PM
Page 334
334
Hour 22
About JavaScript In 1995, the Web was only a few years old, and only a few years along as a visual interface. Some readers will remember that the Web was originally a text-only environment! In an effort to provide more interactive components for site visitors, Netscape and Sun formed an alliance. Sun had just released Java, a complete and powerful programming language that can be used for a wide variety of Web (and other) applications. One such application is the Java applet. An applet is a small program that can run in browsers as an object. Applets provided a powerful glimpse into the Web’s interactive potential by making it possible to do such things as animated navigation menus and visual flip-books. To effectively script applets for various behaviors, Netscape used its then in-development scripting language, LiveScript. Netscape and Sun decided to market both Java and JavaScript as a killer combo of Web power. Scripting for the browser, Java for applications. LiveScript was, to this end, renamed JavaScript. It was a confusing move, because people are not completely aware that Java and JavaScript are two very different things. Java is a complex programming language that can be compiled and executed, whereas JavaScript is simply a scripting language that must have an external program (in this case, a Web browser) to be interpreted. Over the years, JavaScript has grown and become more powerful, allowing Web designers to tap into that power and create interactive designs.
There is even a move to standardize how JavaScript is implemented in browsers and used by developers. This scripting is known as ECMAScript. The specification can be found at www.ecma.ch/ecma1/stand/ecma-262.htm.
JavaScript is often used for the following: • Mouseover image toggle effects • Browser detection and routing • Plug-in detection and routing • Forms validation and management Because of JavaScript’s usefulness and flexibility, Web designers use it a great deal, and many resources for freely distributed scripts are available today. What’s more, JavaScript has provided the basis for the scripting technology found in LiveMotion’s ActionScript.
30 0672323125 CH22
4/22/02
12:39 PM
Page 335
Scripting and LiveMotion
Although JavaScript is supported by most browsers developed since 1996, some users choose to turn it off. As a result, JavaScript itself cannot be relied on to work effectively for every site visitor.
About ActionScript Originally released in Macromedia Flash 4.0 and further developed for subsequent editions of the Macromedia product, ActionScript is the primary means of accessing an object within a composition and controlling it based on events. ActionScript is considered to be a form of object-oriented programming, which is a form of programming specifically geared toward manipulating objects rather than general data. This makes it perfect for such tasks as Web animation. Interestingly, ActionScript is also based on ECMAScript, which makes it very close to JavaScript and, as a result, highly accessible to Web designers familiar with scripting. Adobe LiveMotion 2.0 introduces its own brand of ActionScript, based on ECMA JavaScript as well. In LiveMotion 2.0, JavaScript is used to add scripting to compositions. Upon export, the JavaScript converts to ActionScript code. In doing this, it becomes less of a burden on designers, and this is another reason scripting in LiveMotion 2.0 is so accessible. Before ActionScript was added to LiveMotion, animations could be based on only a few events such as mouseover and mouseout. But complex user input via mouse or keyboard could not be accessed, and as a result, animations were limited to a more passive style. ActionScript in LiveMotion 2.0 opens the door for Web designers to really get interactive. ActionScript in LiveMotion 2.0 can be used in the creation of such features as these: • Interactive animations relying on user input • Chat rooms • Forms for e-commerce • Games ActionScript has widened the opportunity for Web designers to create very rich, interactive presentations for the Web—and beyond! ActionScript is interpreted in the Macromedia Flash Player, and therefore you can use LiveMotion ActionScripting to make presentations that will run on your computer. This can be useful in situations in which you are providing clients with demos, and so on.
335
22
30 0672323125 CH22
4/22/02
12:39 PM
Page 336
336
Hour 22
LiveMotion ActionScript exports properly only as an SWF file.
You’ll be working with ActionScript in a more hands-on fashion in Hour 23, “Adding Scripts.”
About Automation Scripts and Live Tabs Automation scripts are scripts that empower the Web designer by taking some of the hands-on detailed scripting tasks and automating the process. Some Automation scripts are premade; others can be written by you using ActionScript and saved for future use. These are some things Automation scripting can enable you to do: • Automate tasks that are repetitive, such as converting objects • Automate tasks that are difficult or complex • Gain control of any object within LiveMotion and make changes to it, such as breaking up text into individual letters
Any Automation scripts that you create are saved in the Scripts menu for easy access.
Live Tabs are custom graphical user interfaces (GUIs) for Automation scripts. In other words, you can take any Automation script you like and create a tool with it. These interfaces can be used to quickly create and edit new animation and other features. Live Tabs empower designers to do the following: • Add new features to LiveMotion • Add new tools • Provide others with an easy means of producing scripts (especially helpful for those who don’t know a great deal about scripting) • Run batch processing Live Tabs are essentially their own interface, created and saved in native LiveMotion .liv format. When you create one, you can then share it with friends or co-workers.
30 0672323125 CH22
4/22/02
12:39 PM
Page 337
Scripting and LiveMotion
337
Premade Automation Scripts and Live Tabs In this section, you’ll walk through some tasks that will help you become more familiar with LiveMotion’s existing Automation scripts and Live Tabs.
Task: Loading and Viewing Premade Scripts You’ll use the Animate on Path option, which is an Automation script that helps you to animate along a specific path. To load and view a premade Automation script in LiveMotion, follow these steps: 1. Choose File, Open. 2. Locate the LiveMotion 2.0 program folder. Double-click on the folder to get to its subfolders. 3. You’ll see a folder named Automation. Double-click on this folder, and you’ll see two folders. One is Scripts; the other, Live Tabs. For this exercise, highlight Scripts and click Open. 4. Choose a Script by highlighting it. I chose Animate on Path. 5. Click Open, and the script opens in the Script editor (see Figure 22.1). You can now explore the script and its syntax.
LiveMotion 2.0 provides very helpful information about various JavaScript syntax and script options. Examine various preexisting scripts to gain a better understanding of the kinds of things you can do with them.
FIGURE 22.1 Examining an Automation script in the Script Editor.
22
30 0672323125 CH22
4/22/02
12:39 PM
Page 338
338
Hour 22
Task: Exploring Live Tabs The process for opening and exploring existing Live Tabs is very similar to that described for Scripts. To do so, follow these steps: 1. Follow the steps in the preceding task until you reach step 3. 2. Instead of selecting the folder for scripts, select the Live Tab folder and click Open. 3. You’ll now see all the existing Live Tabs. Highlight one to select it. I chose the Web Safe Color Picker. Click Open. The Live Tab opens with its .liv-based interface and a Timeline editor at the ready (see Figure 22.2). FIGURE 22.2 Accessing Live Tabs.
Task: Adding Scripts To add a script to an object, follow these steps: 1. Open a composition or create a new object on the canvas. 2. Select the object (or objects) that will have the script applied. 3. Choose Automation, Scripts. All available scripts are shown in the menu. 4. Select a script. I chose Spiral Enter, which will animate my object to enter on a spiral path. The object receiving the script shows a path after the script is applied (see Figure 22.3). You can also see the script’s results within the timeline. You can test the script by selecting Preview mode.
Task: Using Live Tabs If you’d like to apply a Live Tab to your work, you can do so by following these steps: 1. With a composition at the ready, or a newly created object, select the object or objects to which you’d like to apply the Live Tab. 2. From the Automation menu, choose Live Tab. The Live Tab menu expands, showing you the available Live Tab options (see Figure 22.4).
30 0672323125 CH22
4/22/02
12:39 PM
Page 339
Scripting and LiveMotion
FIGURE 22.3 The object’s scripted path, and the Timeline attributes for the object that the script created.
3. Select the Live Tab option you want. I chose the Transform Tool. This opens the Live Tab. You can now use the Live Tab’s options to make Transformations to your object. FIGURE 22.4 The Live Tab menu.
Task: Adding Automation Scripts and Live Tabs to the Menu If you have created an Automation script or Live Tab and would like it to be available in the menu, follow these steps: 1. Using Windows Explorer (Windows) or Find (Mac), locate the script or Live Tab you’d like to have added to the menu. 2. Drag any script or scripts you want into the LiveMotion 2.0 Automation/Scripts folder.
339
22
30 0672323125 CH22
4/22/02
12:39 PM
Page 340
340
Hour 22
3. Drag any Live Tabs you want into the LiveMotion 2.0 Automation/Live Tabs folder. 4. Choose Automation, Refresh. Your scripts and Live Tabs are now available in the menu in alphabetical order.
If you do not see your added scripts or Live Tabs, close out of LiveMotion and restart.
LiveMotion Scripting Tools Overview You’ll work with various tools when writing your own scripts, including these: • The Script Editor • The Debugger • The Live Preview Tool Each of these tools will help you become efficient at managing scripts.
Script Editor LiveMotion’s Script Editor is a richly featured interface within LiveMotion 2.0 (see Figure 22.5). You will use the Script Editor to perform various scripting tasks, including those discussed in Hour 23, “Adding Scripts,” and Hour 24, “Scripting Project.” Some of the features that the Script Editor supports include the following: • It allows you to author ActionScripts and Automation scripts. • Scripts are organized by event handlers (see Hour 23) for easy access. • The editor provides descriptions of the scripting syntax, making it user-friendly. • Movie clips can be easily accessed without leaving the authoring environment. • Built-in tools such as color coding and search and replace make it very easy to navigate around the scripts quickly.
For a detailed view of the Script Editor’s features and functions, see Hour 23.
30 0672323125 CH22
4/22/02
12:39 PM
Page 341
Scripting and LiveMotion
FIGURE 22.5 The LiveMotion 2.0 Script Editor.
Script Debugger The Script Debugger is a rapid means of testing scripting for errors, and assisting you in making changes to the script. The debugger can do the following: • Go through code line-by-line to find errors • Set variables as they change (see Hour 23) • Help you write clean code Figure 22.6 shows the Script Debugger in action. FIGURE 22.6 The Script Debugger.
341
22
30 0672323125 CH22
4/22/02
12:39 PM
Page 342
342
Hour 22
Preview Tool The Preview tool has been in LiveMotion since its first iteration. However, some expanded functions have been added in terms of scripting. For example, if you are previewing a composition that contains scripting, and there is a problem with the script, LiveMotion 2.0 automatically opens the debugger so that you can fix the problem. This is helpful because all tasks are worked through within the LiveMotion interface, and additional, third-party tools are unnecessary. You can access the Preview tool in three ways: • By clicking the Preview Mode button on the toolbox (see Figure 22.7) • By choosing View, Preview Mode from the main menu • By using the keystroke combination Ctrl+Enter FIGURE 22.7 The Preview Mode button in the toolbox.
Preview Button
Summary In this hour, you’ve gotten a brief history of scripting and gained an understanding of why scripting has become so important to Web designers. This is especially true in the development of interactive or animated designs. LiveMotion 2.0 offers very easy-to-access and very powerful options and tools to help you achieve this level of design. In the upcoming Hour 23, you’ll learn more about what it takes to author ActionScript in Adobe LiveMotion.
30 0672323125 CH22
4/22/02
12:39 PM
Page 343
Scripting and LiveMotion
Q&A Q I don’t know anything about scripting. How can I make this work easily for me? A Both the preset animations and the related tools available in Adobe LiveMotion can get you up and scripting in no time. Q I tried to apply an animated script to an object, but nothing happened. What’s wrong? A Likely you did not first select the object to be animated. Q Can I apply scripts to more than one object at once? A Absolutely! You can simply select all the objects you’d like to have the script be applied to, or you can group objects you’d like to have scripted together.
Quiz 1. What is the standardized version of JavaScript that both Macromedia Flash and Adobe LiveMotion ActionScript are based on? 2. Can I use an Automation script that’s not in the Scripts folder? 3. Can I add more than one script to an object?
Quiz Answers 1. ECMAScript. 2. Yes. Select Automation, Run Automation Script. The Run Script dialog opens. Browse your computer until you find the script, and then select Open to open the script. 3. Absolutely, if it makes sense to use the two scripts together.
Activities To test the skills you’ve learned in this hour, try out these exercises: 1. Create a composition with multiple objects. 2. Animate and modify those objects using Automation scripting and Live Tab techniques.
343
22
30 0672323125 CH22
4/22/02
12:39 PM
Page 344
31 0672323125 CH23
4/22/02
12:39 PM
HOUR
Page 345
23
Adding Scripts To tap into the power of LiveMotion 2.0’s scripting features, you’ll want to learn more details about how scripts are labeled and attached to events within an animation. Although you’ll work through various steps in this hour, the major goal here is to provide you with the skills necessary to create a scripting project, which you’ll do in the next hour. In this hour, you’ll learn about the following: • Script Editor features • Labels • Script keyframes • Event handlers • Working with State scripts As you build toward the final hour, Hour 24, “Scripting Project,” the lessons learned in Hour 22, “Scripting and LiveMotion,” and this hour will ensure that you are able to create your own scripted project from start to finish.
31 0672323125 CH23
4/22/02
12:39 PM
Page 346
346
Hour 23
About the Script Editor As detailed in Hour 22, the Script Editor is where most scripting activities take place. You got a preliminary look at the Script Editor in that chapter. Let’s take a closer look here (see Figure 23.1). FIGURE 23.1 The Script Editor in detail.
Handler Scripts button
Keyframe Scripts button
State Scripts button
Go to Previous Script button
Drop-down List
Syntax Highlighting Button
Go to Next Script button Find button
Script Editor Main Window
Description Window
Composition Browser button Movie Clip Navigator button
LiveMotion Scripting offers the buttons and windows shown in Figure 23.1. They perform functions as described here: • Movie Clip Navigator—This button provides you with a listing of all the movie clips within the composition you’re working on (see Hour 17, “Working with Movie Clips”). • Scripting Syntax Helper—If you click this button, you’ll be provided with helpful information about various aspects of syntax help. To use the helper, simply click on the triangle next to the type of syntax you’d like to know more about. Then, highlight the specific code you’d like to know more about, and details will appear in the Description window. • Composition Browser—Click this button to see the current composition’s components at-a-glance. • Automation Syntax Helper—Click this button for more information about syntax specifically used in Automation scripts. • Go to Previous Script button—This button loads the previous script in the composition (if there is one). • Go to Next Script button—Use this button to load the next script in the composition. • Handler Scripts button—If you click this button, all the event handlers used in your script will load into the drop-down list for easy access. • State Scripts button—Clicking this button will load all states in the script into the drop-down. • Keyframe Scripts button—As with the Handler and State Scripts buttons, clicking this button will load the Keyframe scripts in the composition into the drop-down. • Drop-down list—This list is automatically updated to the available script components: events, states, and keyframes. • Find button—Use the Find button to search-and-find and search-and-replace script syntax. • Syntax Highlighting button—Use this button to turn syntax highlighting on and off. • Script Editor main window—This is the main window in which your scripts appear for editing. • Description window—This window automatically updates with information about the syntax or composition, depending on which panel view you’re in. Figure 23.2 shows the Script Editor window with a script loaded. Note the way the Scripting Syntax Helper allows me to load a definition of script code into the Description window.
23
31 0672323125 CH23
4/22/02
12:39 PM
Page 348
348
Hour 23
FIGURE 23.2 Viewing a script and script definitions using the Script Editor.
Using syntax highlighting is a very effective means of quickly navigating through your scripts, and defining errors when debugging. I recommend that you leave syntax highlighting on unless you are very familiar with scripting and prefer leaving it off.
Understanding Labels Scripts require some reference point to which they can be attached. Labels in LiveMotion help you do this. Basically, if you’d like to attach a script to a specific point within an animation, you can create a Label and associate it with a frame. Labels are very helpful in organizing your work. They act as a means by which to not only Label scripts, but other events within the Timeline. As such, you’ll want to learn how to use them, as doing so will save you time and keep your animations organized.
Creating and Modifying Labels LiveMotion allows you to work with Labels in various ways, including these: • Creating a Label and adding it to an animation • Duplicating a Label
31 0672323125 CH23
4/22/02
12:39 PM
Page 349
Adding Scripts
349
• Moving a Label • Renaming a Label • Deleting a Label The next tasks will help you get familiar with working with Labels.
Task: Creating a Label and Adding It to an Animation To create a Label and add it to an animation, follow these steps: 1. Open the animated composition to which you’d like to add a Label. 2. Move the CTM to the frame where the Label should go. 3. In the Timeline/Composition window, find the Labels button and click it. The Label Name dialog appears. 4. Enter a name (use something that refers to the action, for example, “stop” or “start” or “music”). Figure 23.3 shows the Label as it now appears within the Timeline at the point of insertion. FIGURE 23.3 The Label is now designated along the Timeline.
If you want to add a Label to a Movie Clip Timeline, simply access the Timeline in question (see Hour 17) and follow the same steps.
23
31 0672323125 CH23
4/22/02
12:39 PM
Page 350
350
Hour 23
Task: Duplicating a Label Let’s say you want to duplicate a Label later in the Timeline so that you can attach the same script to another frame. To duplicate a Label for later use, follow these steps: 1. Open a Timeline (or Movie Clip Timeline) and find the Label you’d like to duplicate. 2. Select the Label. 3. With your mouse button in a down state over the Label, hold down the Alt key (Windows) or the Option key (Mac) and drag the Label to the next point in the Timeline where you’d like it to go. 4. Release the mouse button. The Label is now duplicated. Now the frame is properly labeled so scripting can be attached to it.
You can duplicate more than one Label at a time. Simply Shift+click to select multiple Labels, and then drag and drop them accordingly.
Task: Moving a Label Sometimes, you’ll find that you’ve placed a Label in the wrong frame, or you’ll find that you want to move it to another location along the Timeline. To do so, follow these steps: 1. Find the Label you’d like to move within your composition and select it. 2. Holding your mouse button down, drag the Label to the new frame where you’d like it to appear. 3. Drop the Label at its new point along the Timeline. You can move a Label as many times as you require while working on your animation.
As with Label duplication, you can move more than one Label at a time. Use the Shift+click method to select the Labels you’d like to move. They will maintain their relative distance from one another so that when you drop them in the new location, the way you set up the original timing will not be disturbed.
31 0672323125 CH23
4/22/02
12:39 PM
Page 351
Adding Scripts
351
Task: Renaming a Label The naming of Labels is particularly important because it helps you (and anyone working with you) to identify what kind of action will be taking place at that point in the Timeline. Sometimes, you’ll find that you want to rename a Label to more accurately reflect what you’re doing. To rename a Label, follow these steps: 1. Locate the Label whose name you want to change within the Timeline. Doubleclick the Label. Alternatively, you can drag the CTM to the Label and click the Label icon. In either case, the Label Name dialog appears (see Figure 23.4). 2. Type a new name for the Label in the text box. 3. Click OK. The Label is now updated to your new name. FIGURE 23.4 Changing a Label’s name using the Label Name dialog within the Timeline.
Task: Deleting a Label If you find that you don’t want to have a Label you’ve created within your Timeline after all, you can delete it. To do so, follow these steps: 1. Open the composition or movie clip containing the unwanted Label. 2. Click the Label (Shift+click to delete multiple Labels). 3. Press the Delete key (Windows and Mac) or the Backspace key (Windows). Your unwanted Label has now been deleted.
23
31 0672323125 CH23
4/22/02
12:39 PM
Page 352
352
Hour 23
If you have scripts associated with a Label, those scripts will be inaccessible upon deletion of that Label.
Understanding Script Keyframes A script keyframe is a direct method by which to attach a script to any frame, and attach it to a Label within a composition. Script keyframes work very much like Labels, and you can use Labels in conjunction with script keyframes.
Adding and Modifying Script Keyframes in the Timeline As with Labels, there are several script keyframe tasks you’ll want to practice: • Adding a script keyframe to an Animation • Associating a script keyframe with a labeled frame • Duplicating a script keyframe • Moving a script keyframe • Deleting a script keyframe Let’s get started working on these tasks.
Task: Adding a Script Keyframe to an Animation To add a script keyframe, you’ll first require a script. This could be one you have written, or one that is provided for you by LiveMotion. To add a script keyframe, follow these steps: 1. Open the composition in which you’d like to place a script keyframe. 2. Slide the CTM over to the frame where the script keyframe will go. 3. In the Timeline/Composition window, find the Scripts button and click it. The Script Editor appears. 4. Enter (or copy and paste from an outside source) the script you’d like to attach to the script keyframe. Figure 23.5 shows the script keyframe as it appears within a composition.
You can add script keyframes to movie clips as well. Simply open the Movie Clip Timeline you want, and follow the steps outlined previously.
31 0672323125 CH23
4/22/02
12:39 PM
Page 353
Adding Scripts
353
FIGURE 23.5 A script keyframe within a composition Timeline. Notice the CTM and the Script icon on the Scripts line.
23
Task: Associating a Script Keyframe with a Labeled Frame In the preceding section, you learned to make a Label to which scripts could be attached. Using script keyframes, you can now attach a script to a Label by following these steps: 1. Open a composition containing a Labeled frame, or follow the steps in the task “Creating a Label and Adding It to an Animation,” earlier this hour, to create a Label within your composition. 2. Slide the CTM over to the frame where the script keyframe will go. 3. In the Timeline/Composition window, find the Scripts button and click it. The Script Editor appears. 4. Enter (or copy and paste from an outside source) the script you’d like to have attached to the script keyframe. Your script keyframe and Label are now associated together within the Timeline.
The technique of associating script keyframes with Labels is very powerful, because it makes the points along your Timeline where scripting occurs much more clear to identify and therefore debug and modify.
31 0672323125 CH23
4/22/02
12:39 PM
Page 354
354
Hour 23
Task: Duplicating a Script Keyframe To duplicate a script keyframe that you’ve already developed, follow these steps: 1. Select the script keyframe you’d like to duplicate by clicking on it. 2. With your mouse button pressed, press Alt (Windows) or Option (Mac) and drag to the next place in the Timeline where you’d like the script to go. 3. Release the mouse button and save your page. Your script keyframe is now duplicated.
As with Labels, you can duplicate multiple script keyframes at the same time by using the Shift+click selection method. They will retain their relational value within the Timeline.
Task: Moving a Script Keyframe If you’d like to move a script keyframe from one location on a Timeline to another, follow these steps: 1. Find the script keyframe you’d like to move and select it. 2. Holding your mouse button down, drag the script keyframe to the new frame where you’d like it to appear. 3. Drop the script keyframe at its new point along the Timeline. Interestingly, if you move the script keyframe beyond the duration of the animation, it will automatically extend to the point where you place the script keyframe.
Task: Deleting a Script Keyframe Don’t like the way a script works within your animation? You can delete script keyframes by following these steps: 1. Open the composition or movie clip containing the unwanted script keyframe. 2. Click the script keyframe (Shift+click to delete multiple script keyframes) to select it. 3. Press the Delete key (Windows and Mac) or the Backspace key (Windows). Bye-bye, unwanted script keyframe!
31 0672323125 CH23
4/22/02
12:39 PM
Page 355
Adding Scripts
355
Understanding Event Handlers Events handlers are a very important part of scripting. Event handlers manage specific responses from a person’s input via the mouse or keyboard. Event handlers are important not only for the way scripting is handled in LiveMotion, but also for scripting Web documents directly. In LiveMotion, event handlers are used in specific conjunction with movie clips.
Working with Event Handlers The idea is to take a script (such as an image swap for rollovers) and attach it to specific user input. In the case of LiveMotion there are various available event handlers. Table 23.1 shows a selected set of event handlers available and what their distinct input is. TABLE 23.1
Samples of LiveMotion Event Handlers and Their Associated Input
Event Handler
Associated Input
OnLoad
Refers to the first time a movie is loaded.
OnUnload
Refers to the end of the movie within a composition.
OnEnterFrame
Is the entry point to an animation’s frame, prior to the frame’s rendering.
OnMouseMove
Refers to any movement of the mouse while the movie is in anywhere within a composition.
OnMouseDown
Refers to any point a mouse button is pressed down while the movie is within a composition.
OnMouseUp
Refers to the release of the mouse button while the movie is within a composition.
OnKeyDown
Describes any time a key on the keyboard is pressed down.
OnKeyUp
Describes the point the key is released.
Event handlers give you direct access to authoring based on an event. Let’s say you want to create a game using LiveMotion. Having control of mouse or keyboard input via scripting allows you to script your composition to respond to very specific user input. To that end, understanding event handlers in LiveMotion is helpful if you are working with predefined scripts, and necessary if you plan on writing your own scripts.
Task: Attaching Scripts to an Event Handler Attaching scripts to an event handler is straightforward. Let’s say you want some action to occur as a user moves the mouse—as within a game, for example. To attach a script to an event handler, follow these steps:
23
31 0672323125 CH23
356
4/22/02
12:39 PM
Page 356
Hour 23
1. Open a composition with a movie clip in it, and select the clip. 2. Open the Script Editor by selecting Scripts, Script Editor, or by pressing Ctrl+J (Windows and Mac). 3. Click the Handler Scripts button (see Figure 23.1, earlier in this chapter). 4. From the drop-down menu, choose the event handler for which you’d like to write a script. 5. Write (or copy and paste from another source) the script information directly into the script editor. When you’re finished, be sure to save the updates to your file.
Learning About State Scripts The term state refers, in programming, to a particular point in a process. You’re already familiar with the idea of states—you learned about them in Hour 13, “Image Mapping and Rollover Techniques,” and Hour 14, “Creating Remote Rollovers,” when working with rollovers and remote rollovers. With rollovers, state refers to the points in time that an event takes place, such as with mouse input: normal, over, down, and out. There are also custom states, which you created in Hour 14 when designing remote rollovers.
The palette originally associated with rollovers in LiveMotion 1.0 was called “rollovers.” Now, it’s referred to as the States palette, clarifying the relationship between rollover techniques and State scripting available in LiveMotion 2.0.
When you want to add more functionality to your rollovers, you’ll want to use State scripting. For example, if you want to add an audio clip to a state, you can script it via State scripting.
Working with State Scripts To create a State script, you’ll attach the script to a specific state. The process of attaching a script is very similar to what you’ve been doing throughout the chapter with Labels and event handlers.
31 0672323125 CH23
4/22/02
12:39 PM
Page 357
Adding Scripts
357
Task: Attaching a Script to a State To attach a script to a State, follow these steps: 1. Open a composition that has a rollover in it, or create a rollover from scratch following the guidelines in Hour 13. 2. Select the object by clicking on it once. 3. Open the States palette by choosing Window, States. 4. In the palette, click on the state to which you’d like to add a script. 5. Click the Edit States Script button. This opens the Script Editor. 6. Add the script. Figure 23.6 shows a composition with a rollover, the States palette, and the Script Editor. Continue adding scripting to whatever states you like. When you’re finished, save your file to update the changes. FIGURE 23.6 Adding a State Script using the States palette.
Summary In this hour, you’ve prepared the way for the final hour, Hour 24. There, you’ll pull some of LiveMotion’s scripting technologies together to create a completely scripted animation.
23
31 0672323125 CH23
4/22/02
12:39 PM
Page 358
358
Hour 23
Q&A Q I understand how to use the tools now, but how do I write my own scripts? A Writing your own scripts in detail takes time to learn. If you are not a JavaScript coder, or don’t know any programming, you will likely need to read up on scripting. Also, there are many scripts being added to Adobe’s Exchange Web site, http://xchange.studio.adobe.com/. This is a growing resource for LiveMotion users who want to find scripts specific to LiveMotion. Q Is there any limit to how many scripts can be added to a given composition or movie clip? A Use as many scripts as are necessary to achieve your animation goals. Q Is there a way to test my script without exporting my file just yet? A Yes! Simply click on the Preview Mode button in the toolbox, or select View, RealTime Preview to see your animation in action, scripts included.
Quiz 1. What function does a Label fulfill? 2. What do you use to attach scripts to events? 3. What is the term for adding scripts to specific points of time in rollovers?
Quiz Answers 1. A Label designates a frame that has a script associated with it. 2. Event handlers. 3. The term is state.
Activities To test the skills you’ve learned in this hour, try out these exercises: 1. Design a new composition with various objects. 2. Animate the objects using Object, Layer, and Transform properties. 3. Attach a Script to a specific frame using an event handler or a script keyframe.
32 0672323125 CH24
4/22/02
12:40 PM
HOUR
Page 359
24
Scripting Project Now that you have an understanding of the various techniques necessary to create scripts, you’re going to combine your skills into one organized project. In this hour, you’ll do the following: • Prepare the composition • Sign up and use Adobe Exchange • Add an animated title to the composition • Create a looped, independent timeline within the main composition • Animate several objects along a path • Add audio using a label • Add an object and script it The essence of animated LiveMotion compositions is the capability to have multiple things going on at once—still objects, independently animated looped objects, and time-specific events.
32 0672323125 CH24
4/22/02
12:40 PM
Page 360
360
Hour 24
Planning and Organizing Your Project You’ll begin your project by performing some necessary tasks that will get you ready and organized. Although the idea is to take you through the production of an animation that has multiple events occurring, I want you to be as flexible with the types of events, objects, and audio as possible. In other words, use these steps as a guideline but feel free at this point to choose your own objects, color schemes, audio, scripts, and designs in place of my design.
Preparing the Stage In the following tasks, you’ll set up the basic components of the project, including composition size, behavior, and the scripting instructions and elements.
Task: Setting Up the Composition To set up the composition, follow these steps: 1. On your computer’s hard drive, set up a folder for all your project components. 2. In LiveMotion, begin a new composition and size it according to your needs. My design is 585×295. 3. Set up your design’s color scheme by choosing Window, Color Scheme, and selecting your project’s main colors. 4. Save your new file with the title scripting project.liv to the project folder. It will help streamline your project steps to keep the Color palette (Window, Color) and Toolbox (Window, Tools) open throughout the process.
Task: Using Adobe Xchange Adobe Xchange is a very helpful resource where enthusiasts of various Adobe products can get all kinds of helpful materials, including royalty-free art and tutorials. For LiveMotion users this resource is invaluable, and you’ll want to use it to find scripts and other materials that can help you make compelling compositions and animations. To use Adobe Exchange, follow these steps: 1. Open your favorite Web browser and go to http://xchange.studio.adobe.com/. 2. Follow the sign-up instructions. 3. Download the Studio Toolkit for faster exchanges. 4. Go to the LiveMotion section and download any scripts, objects, audio, or other items you might like for your project. Figure 24.1 shows the Adobe Xchange page for LiveMotion.
32 0672323125 CH24
4/22/02
12:40 PM
Page 361
Scripting Project
361
FIGURE 24.1 Adobe Xchange for LiveMotion is a great location to find resources and community support.
24
Adobe Xchange is a community resource! Not only can you find useful scripts and other resources there, but you can share your projects and ideas with other community members, too.
Beginning the Animation You’ll begin the animation by adding an animated title and an animated background.
Adding and Animating the Title and Background The composition that I designed for this project has an animated title, and a portion of the design has an independently looped, animated objects group.
Task: Adding and Animating the Title To add and animate the title, follow these steps: 1. Open the file, scripting project.liv, in LiveMotion. 2. Set the type for the title using the Type tool. 3. Position the type where you’d like it to end up. 4. Add the animated style SpeedFromLeft to the type object from the Style palette. This will animate your title automatically.
32 0672323125 CH24
4/22/02
12:40 PM
Page 362
362
Hour 24
Review the animated title by entering Preview mode, or by opening the Timeline and playing the animation. Make any adjustments you require and update your file by saving it. Figure 24.2 shows my progress. FIGURE 24.2 My animated title comes in from the left and stops animating at that point. This object is animated using a scripted style.
Task: Creating and Animating the Background Objects In my composition, I have a group of stars twinkling in a night sky. To achieve this effect, you can follow these steps: 1. Create the object. I used the star from the Library, sized it so that it was relatively small, and colored it yellow. 2. Duplicate the object as many times as necessary to achieve the look you’re after. I created 20 individual stars. 3. Place the individual objects where you like them. You can then group them for easier manageability if you’ll be moving them around. Figure 24.3 shows the stars and the Timeline.
Task: Animating the Stars Because I’d like the stars to blink in the sky, I’m going to create a movie clip so that this portion of the animation can run independently, and then modify the transform properties of individual stars to achieve the effect. To animate this portion of the project, follow these steps: 1. Select the group of objects and make it a movie clip. This will enable you to access the Transform properties of individual stars. 2. Open the Transform palette. 3. In the Timeline, double-click the group of objects to access the movie clip’s Timeline. 4. Select one of the objects and create a pattern of keyframes (see Figure 24.4) with each frame having a different opacity. 5. To make this portion of the animation loop, select the loop icon.
32 0672323125 CH24
4/22/02
12:40 PM
Page 363
Scripting Project
363
FIGURE 24.3 Working with the background stars.
24
Repeat step 4 for any of the objects that you’d like to have animated in this way, and save the updates to your project file. FIGURE 24.4 Modifying opacity within the Timeline to create a blinking effect for the stars.
32 0672323125 CH24
4/22/02
12:40 PM
Page 364
364
Hour 24
If you are following along but creating your own animations, you might want to use the Transform palette to modify and animate the objects with other Transform options.
Adding Audio Adding audio to an animation, as you are already aware, can be achieved in various ways. In this case, you’ll tap into the power of Labels to get your audio properly added to the composition.
Selecting and Adding an Audio File LiveMotion comes with a few preset files. You can also find audio clips at the Adobe Xchange. Be sure to add anything you want for your project to the Sounds palette by following the steps detailed in Hour 18, “Adding LiveMotion Audio.”
Make sure that the audio files you choose are royalty free to avoid any intellectual property concerns.
Task: Adding Audio using a Label To add audio using a Label, follow these steps: 1. Return to the main composition Timeline. 2. Determine a suitable point within your Timeline for your audio to begin, and move the CTM to that point. 3. Click on the Labels icon, and the Name dialog appears. Name the Label. I named mine “begin audio” (see Figure 24.5). 4. Open the Sounds palette (Window, Sounds) and find the sound you’d like to add. Select it and drop it, positioning it to begin at the point of the Label. You now have a labeled audio event.
I stretched the audio out from its starting point to the end of my animation. Start and begin your audio as required by your design.
32 0672323125 CH24
4/22/02
12:40 PM
Page 365
Scripting Project
365
FIGURE 24.5 A labeled audio event.
24
Animating Objects Along a Specified Route In this section, you’ll create several objects that will be animated along a specific route that you create for them. In my composition, I begin with a bird that flies through the composition, and then later I add another two birds to fly through alongside the first.
Adding and Animating the Objects There are three objects in my composition to animate along a trajectory. I began by creating one, animating it, and then doing the same for the remaining objects.
Task: Adding and Positioning the Objects To add the first object, follow these steps: 1. Draw the object, or add one from the Library. I created my object in Photoshop and then pasted it into the composition. 2. Because I wanted the bird to enter from the bottom corner but not be seen, I moved the object from the actual canvas to the stage. Select your object, and then determine in the Timeline where you want it to start and stop. 3. Create a keyframe at the starting point (your object should be there at this time) and stopping point of the object’s duration. 4. Modify the position of the object by moving it to where you want it to stop. In this case, I wanted the bird to fly off the stage, so I moved it to a point beyond the composition to achieve that effect (see Figure 24.6).
32 0672323125 CH24
4/22/02
12:40 PM
Page 366
366
Hour 24
Repeat these steps for any other objects you’d like to add, and modify their position and timing attributes within the Timeline. FIGURE 24.6 Positioning an object outside of the composition.
Adding a Scripted Component At this point, you should have quite a lot of animation going on, and some of it scripted, although you used Adobe tools other than the Script Editor to achieve the results. Now, it’s time to create a fun script to add some panache to your animation.
The Script The script I chose to use in the animation was found on Adobe Xchange and is called “Follow the Mouse.” This script has an object follow the movements of the user’s mouse.
Task: Adding the “Follow the Mouse” Script To add the script, follow these steps: 1. With your composition at the ready, create the object you’d like to have follow the mouse. In my example, it’s a bird. 2. Open the Timeline and select the object you just created. 3. Make the object a movie clip. 4. Double-click on the object’s title to bring up the movie clip’s Timeline.
32 0672323125 CH24
4/22/02
12:40 PM
Page 367
Scripting Project
367
5. Create a Label and name it. I named mine “bird.” 6. Move the CTM over to the Label. 7. Click the Scripts button in the Timeline. The Script Editor appears. 8. In the code window, enter the following code: this.gotoAndPlay(“repeat”);
9. Close the Script Editor, and move the CTM forward about three measurements. 10. Click the Scripts button again, and in the code window of the Scripts Editor, enter this: _parent.Dot._x = _parent._xmouse; _parent.Dot._y = _parent._ymouse;
11. Close the Script Editor and preview your work (see Figure 24.7). The script you’ve used sets up an action so that wherever I drag the mouse, the object will follow it. You can make any modifications to your work as needed; continue adding scripts or any other elements. When you’re finished, export your file to SWF format. See Hour 21, “Optimizing and Exporting LiveMotion Files,” for details. FIGURE 24.7 The scripted work.
Summary In this hour, you’ve combined script-related tasks such as working with movie clips, Labels, the Script Editor, and scripting itself. The project here provides only a taste of
24
32 0672323125 CH24
4/22/02
12:40 PM
Page 368
368
Hour 24
what can be achieved with the various scripting tools and techniques offered by LiveMotion; as you become more adept at using the program, so will your skills build. Using the Adobe Xchange is one great way to help bring the skills you’ve gained from having worked through this book into the next level of challenge.
Q&A Q Do I really need to sign up for Adobe Xchange? A Not really, no. But not doing so will limit your access to usable scripts and a growing collection of tutorials and additional features you can make great use of. Q How long should my animation be? A As long as you like. Just remember that everything you add to the file will make it that much slower when downloading.
Quiz 1. What is the advantage of having made the stars in the composition a movie clip? 2. Should I always label my scripts? 3. Can I rename my animated objects?
Quiz Answers 1. I wanted that portion of the composition to be time independent, so I turned it into a movie clip to be able to loop it. This way, the stars continue to blink even after the animated objects have completed their time-dependent animations. 2. Yes. Labeling your scripts helps make it very clear what is happening when. 3. Absolutely! Simply highlight the object in the Timeline and press Enter. The Name dialog appears and you can change or modify the object name.
Activities You can build on the exercise in this hour by doing these exercises: 1. Try adding scripts to compositions using Adobe Xchange as a script resource. 2. Add preset animations to the composition along with the existing movie clips, script styles, and scripting.
33 0672323125 APPA
4/22/02
2:25 PM
Page 369
APPENDIX
A
Learning LiveMotion Features This reference is a toolkit worthy of any master journeyman. You’ll understand how each tool is generally used to create great Web graphics and animations, and how to manage the tools within the LiveMotion work environment.
Getting Familiar with LiveMotion Menus Menus are the anchor of any software program, and LiveMotion is no exception. Those of you already familiar with Adobe software such as Photoshop or Illustrator will find LiveMotion’s toolbars and menus to be quite similar. Even if you’ve never used an Adobe application before, the basic setup of menus and toolbars within the program is basic, familiar, and intuitive.
33 0672323125 APPA
4/22/02
2:25 PM
Page 370
370
Appendix A
The Main Menu Bar and Standard Toolbar Along the top of the LiveMotion interface, you’ll find the main menu bar and the standard toolbar (see Figure A.1). The main menu bar is where you’ll find most everything necessary to work with the program, although, as you’ll soon see, LiveMotion also offers alternatives, such as floating palettes and a toolbox, to get to the tools you need. Each option on the main menu bar offers up submenus, which in turn often have additional submenu options. The standard toolbar, like the main menu, is a familiar feature common to many software applications. It can be turned on or off with a selection of View, Toolbars, Standard from the main menu. In LiveMotion, the standard toolbar is where you will find several icons that allow quickaccess to functions, including these: • New File—Use this option to create a new file. • Open File—To open an existing file, you can simply click the Open icon. The Open dialog appears. • Save File—You can quickly save a file by clicking this icon. • Cut, Copy, Paste—These icons can be used as alternatives to keystrokes or other menu options to perform these common editing functions. • Print—Send your work to your printer by using this icon. • About—Get quick info about the software program, including your registration information, by selecting this option. Main menu bar
FIGURE A.1 The main menu bar and standard toolbar in Windows.
Standard toolbar
The Status Bar Running along the bottom of the application interface is a status bar. Select View, Toolbars, Status Bar to turn the status bar on or off. I personally like having the bar available, because it is used for notes and additional information about various selection and task options within the program. For example, if you pass your mouse over a tool, the purpose of the tool is displayed within the status bar (see Figure A.2).
33 0672323125 APPA
4/22/02
2:25 PM
Page 371
Learning LiveMotion Features
371
FIGURE A.2 The status bar provides helpful information about various selections and tasks.
Exploring the Toolbox In most Adobe software, the toolbox (see Figure A.3) is the area where you select the tool you need to accomplish a given task. GURE A.3 The LiveMotion toolbox.
A
33 0672323125 APPA
372
4/22/02
2:25 PM
Page 372
Appendix A
You’ll use the toolbox a great deal, switching tools as you work through the creation of your graphics and animations. The toolbox includes the following tools: • Selection tool—This tool is used to select an object. In LiveMotion, an object is the basic piece of graphic information you are creating or modifying. An object can be something you draw with LiveMotion tools, type that you set using the Type tool (see the Type Tool entry, later in this list), or a photographic or other scanned item that you’ve imported into LiveMotion. Select the tool by clicking on its icon, and then select the object of your desire by clicking on it once. • Subgroup Selection tool—Use this tool to select subgroups within grouped objects. • Drag Selection tool—If you want to move an object that is underneath another object, you can use this tool to do so. • Layer Offset tool—When using layers, you’ll at times want to reposition the information on a given layer. The Layer Offset tool allows you to select and move the information on a specific layer, keeping the other layers of the design intact (see Hour 6, “Working with Layers”). • Rectangle tool—This tool allows you to draw hard-edged rectangles (see Figure A.4). • Rounded Rectangle tool—Sometimes you’ll want a rounded edge for rectangles, such as when creating stylish buttons (see Figure A.4). • Ellipse tool—Whenever you’d like to draw an oval or a circle, use this tool (see Figure A.4). • Polygon tool—This fun tool allows you to draw many-sided objects. I’ve created a diamond shape using this tool. • Type tool—The Type tool allows you to set type as an object. Figure A.5 shows type that was set with the Type tool (see Hour 3, “Setting Type with LiveMotion”). • Preview tool—This tool allows you to preview animations and mouseovers without having to leave the LiveMotion interface. • Crop tool—The Crop tool allows you to crop objects and images within the work area. • Rotate tool—To rotate an object, select this tool, then the object. Use the handles to rotate the object to the position of your choice. • Skew tool—To distort an object, select this tool, then the object, and use the handles to create the desired effect. • Paint Bucket tool—Use the paint bucket to fill an object with a selected color. • Eyedropper tool—If you’d like to pull a color from an object, use the Eyedropper to do so. For example, if you have a photograph open in LiveMotion and want to
33 0672323125 APPA
4/22/02
2:25 PM
Page 373
Learning LiveMotion Features
373
create text using one of the colors found within the photo, select the Eyedropper, hold it over the color within the photo, and click. The color is then available for you to use. • Hand tool—The Hand tool allows you to reposition a composition in the composition area. • Zoom tool—Use this tool to zoom in or out of an area of your composition. To zoom in, click the tool, then the area of the composition you’d like to enlarge. Click again for a closer zoom view. To zoom out, hold down the Alt key (Windows) or Shift key (Mac) while clicking. • Foreground/Background Color—You can select a foreground and background color by clicking on the appropriate box and then filling it with a color of your choice. These colors will remain available to you as you work, until you choose to change them. • Active Color palette—Keep track of a color scheme by selecting the scheme of your choice. The scheme’s colors will appear in this palette, and you can change the foreground or background color to an available color within this palette by simply clicking on it. Occasionally, you may want to remove the toolbox from view. To do so, select Window, Tools, and deactivate the check mark. To bring the toolbox back into view, select Window, Tools, and activate the check mark.
An alternative shortcut to hide the toolbox is to simply press the Tab key. To have the toolbox reappear, press the Tab key again.
FIGURE A.4 Here I’ve used LiveMotion drawing tools to create shapes.
A
33 0672323125 APPA
4/22/02
2:25 PM
374
Page 374
Appendix A
FIGURE A.5 Using the Type tool, I’ve created a text object ready for additional manipulation.
Working with Palettes As with the toolbox, palettes are sets of tools that are available to you. Palettes tend to offer options that allow you to fine-tune your work or perform detailed tasks. For example, you can adjust a rotation or skew, add filter effects, and design advanced actions such as rollovers. For the sake of organization, palettes are grouped together in LiveMotion, although each group contains individual palettes that can be viewed separately. We’ll examine the palettes individually, becoming familiar with how they look and how to modify their location and appearance.
To view an individual palette only (referred to as “undocking”), click your mouse on the palette’s tab and hold it down. Drag the palette away from its group and drop it on an open area of the work environment. You can close the remaining palette group by selecting Window, then one of the palette names remaining in the group, leaving the individual palette available. To return the individual palette to its group, simply click, drag, and drop the palette on top of the group.
The Properties Palette After you’ve used any of the drawing tools to create objects such as shapes or type, or imported clip art or scanned materials into your workspace, you can use the Properties palette to modify that object. The Properties palette changes view depending on what type of object is selected— shape, type, or image. Within each view are several options to modify the object.
33 0672323125 APPA
4/22/02
2:25 PM
Page 375
Learning LiveMotion Features
375
Properties Palette: Shape View When a shape is selected, the shape view becomes available (see Figure A.6). You can now modify your shape object using the following options: • Shape—A drop-down menu allows you to convert a drawn shape by selecting from the Rectangle, Rounded Rectangle, Ellipse, and Polygon options. • Fill or Outline—To fill the shape with the selected foreground color, choose the Fill radio button. If you want the shape to have only an outline, select the Outline radio button. • Width—Control the width of an outline by using the slider or numeric controls. FIGURE A.6 The Properties palette in shape view.
A
The Width controls are not available for filled objects.
Properties Palette: Type View If you’re working with type, the Properties palette comes in handy as a means of modifying and altering the type to your needs. Select the type object, and various type options (see Figure A.7) become available via the Properties palette, including these: • Type Face—A drop-down menu allows you to change the face of the type. For example, if I create a type object using Times New Roman and want to change it
33 0672323125 APPA
376
4/22/02
2:25 PM
Page 376
Appendix A
to Helvetica, I can do so by using the drop-down menu and selecting Helvetica. The type object converts to the newly selected typeface. • Type Style—Modify the style of your type by selecting from the options available. Typically, options include Regular, Bold, and Italic, depending on what type styles are available for a given typeface. • Type Size—Select the size of your type in points from the drop-down menu, or type the value into the available box. • Type Outline—To use only the type outline, click the Outline button. You can then modify the width of the outline by selecting a number from the drop-down menu or by typing the desired value into the available box. • Leading—Also referred to as line height, leading is the space between each line of type. Modify the leading by selecting a numeric value from the drop-down menu, or by entering your desired leading into the text box. • Tracking—Graphic designers like control! Tracking allows you to increase or decrease the amount of space between individual letters within a word. To increase space from the default, select a positive value. To decrease the space, select a negative value. • Alignment—Align type horizontally, or if you choose, you can align it vertically and choose from vertical left-to-right, positioning letters to the left; or vertically right-to-left, positioning letters flush right, depending on your tastes and needs. You can also align type along the horizon by selecting from the left, center, or right choices.
Properties Palette: Image View If you’ve imported or placed an image into the composition area, you can modify that image using the Properties palette. When you select the image, the palette changes (see Figure A.8) to offer various tools to enable you to work with the image. You can use the following options to work with your image: • Alpha Channel—Use this channel to modify or create an alpha channel for your image. • Active Matte—This option shows the active matte. • Time—This applies only to objects that have time as an attribute. The only currently supported “time” object in LiveMotion 2 is an animated GIF. • Index—To specify the top layer of a multilayered object, use this option to move that layer to the top. Entering 0 displays all the layers; entering a specific number brings that numbered layer to the top.
33 0672323125 APPA
4/22/02
2:25 PM
Page 377
Learning LiveMotion Features
377
FIGURE A.7 Modifying type using the Properties palette.
• Parent button—This button, which faces up, allows you to move up one level in an object layer. • Child button—This button, which faces down, allows you to move down one level in an object layer. FIGURE A.8 Using the Properties palette to work with images.
A
33 0672323125 APPA
4/22/02
2:25 PM
Page 378
378
Appendix A
Understanding Channels For those of you new to the world of computer graphic design, it will be helpful to have a basic understanding of what a channel is. Adobe software uses channels to compose an image. There are four standard channels: Red, Green, Blue, and Master (or Composite). Because computer color is some combination of various amounts of Red, Green, and Blue (RGB), channels help you control your work by separating the color data into individual parts. You can then make modifications to the individual channels to control the final image. The master channel is the sum of those parts—and any modification you make to the individual channels. An Alpha channel is any additional channel you add to the composite to modify it. So if you want to create a mask allowing only a portion of the composite image to show through, you can do so by creating an alpha channel with that data on it. This will then modify the composite image.
The Transform Palette To transform any type of object including shape, type, or image, you can use the Transform palette. Transformation alters the visual appearance of an object based on points within the object. With shape and images, transformations occur based on the center point. Text transformations are applied to the text’s horizontal alignment. So if your text is justified to the left, the left baseline starting point is where the transform effect begins. These are the options available to you within this palette: • X/Y Axis—Move the object within the composition space horizontally (X) or vertically (Y). • Width and Height—Alter the width and height of your object numerically. • Rotation—Rotate objects numerically or by using the rotation dial. This option offers more specific control over rotation than the Rotate tool. • Skew—As with rotation, you can use the skew options within the Transform palette to get more refined control over skew. Figure A.9 shows the Transform palette in use.
The Web Palette As you become more proficient at working with LiveMotion, you will want to get more complex with the types of images you create for the Web. One very useful application of LiveMotion is the capability to attach Web addresses (URLs) to a portion or portions of a composition.
33 0672323125 APPA
4/22/02
2:25 PM
Page 379
Learning LiveMotion Features
379
FIGURE A.9 The Transform palette changes an object’s appearance based on points within the object.
The Web palette is one of the ways in which you can easily do this, by simply selecting the object and then typing, copying and pasting, or dragging and dropping the URL into the URL box (see Figure A.10). FIGURE A.10 The Web palette.
A
33 0672323125 APPA
4/22/02
2:25 PM
Page 380
380
Appendix A
The Web palette also enables you to rapidly replace headings in an HTML file with images. So if you have an HTML-based header that says “My Web Page” and you want to replace it with a fancy graphic header, you can have LiveMotion automatically update the page for you, using the Replace option.
The Color Palette The Color palette is extremely useful in that you will use it to select and adjust colors as you work on your designs. It offers various views, available from the fly-out menu found by clicking the triangle at the upper right of the palette. The palette, as shown in Figure A.11, is composed of several options. FIGURE A.11 Color palette, RGB view. I’ve checked the Web Safe Color check box, which now displays only those colors that are considered Web safe.
The two boxes in the upper-left corner are the foreground and background color selectors. You can switch between them by simply clicking the box you want to make active. To the right are the fields for red, green, and blue, respectively. Use the slider bar in the field to get the general hue you’d like to select color from to appear within the box, or use numeric values by entering them into the corresponding boxes. Alternatively, you can use the Eyedropper tool to select a color from the long bar along the bottom. As you pass your mouse over the color field, the Eyedropper automatically becomes active. Use this to pull the color of your choice from the field. The color then becomes active in the selected foreground or background box both within the palette and on the toolbar.
If you’d like to ensure that you are selecting only from Web safe colors, be sure that the Web Safe Colors check box is checked. For more information on Web safe color, see Hour 7, “Using LiveMotion’s Color Tools.”
33 0672323125 APPA
4/22/02
2:25 PM
Page 381
Learning LiveMotion Features
381
The Opacity Palette Opacity refers to how transparent, or “see-through” an object is. Opacity is used to achieve special effects in visual design, and you’ll find this palette to be particularly handy as you learn to add panache to your work. In Figure A.12, I’ve created some simple shapes with different opacity levels. You can see how the shapes can be seen through each other. I’ve included the Opacity palette in the figure, and as you can see, there are several options within the palette to help you work with opacity. FIGURE A.12 Opacity controls how transparent an object appears.
A
You can apply opacity to the entire object, or you can select a gradient that will make portions of the object more transparent than others. Using the various gradient tools on the palette, you can create any number of interesting visual effects (see Hour 10, “Textures, Gradients, Distortion, and 3D Effects”).
The Distort Palette When an object is distorted, it will change in appearance to mimic the type of distortion applied. The Distort palette (see Figure A.13) allows you to choose from Displace, Lens, Twirl, Spherize, Quantize, and Radial Quantize to achieve various effects.
33 0672323125 APPA
4/22/02
2:25 PM
Page 382
382
Appendix A
FIGURE A.13 The Distort palette and its available options.
The Layer Palette Think about a freshly baked, delicious cake. I’m thinking of a moist chocolate layer cake with a combination of dark and white chocolate icing. LiveMotion layers, though not as tasty, are certainly as magical as a layer cake! Each layer contains individual bits and bytes, placed one on top of the other to create a tasty end product. In the case of a graphic, you might want to create the illusion of dimension. To do this, you can create your image, and then create another layer with the same image but in a different flavor well, color. Then you can modify the new layer further by making it thicker, offsetting it from the other image, and so forth. The Layer palette (see Figure A.14) gives you control over the fill, position, width, and softness of the chosen object’s layers. Because Layers are so important in the creation of graphics and animations within LiveMotion, I’ve dedicated an entire hour to them. Check out Hour 6 to learn how to tap into the rich options layers have to offer.
The Gradient Palette I introduced the concept of a gradient a few minutes ago when showing you the Opacity palette. The Gradient palette (see Figure A.15) works by allowing you to add and
33 0672323125 APPA
4/22/02
2:25 PM
Page 383
Learning LiveMotion Features
383
fine-tune a gradient fill within your object. However, in this case, the gradient is not concerned with how transparent (opaque) the object is. Rather, the focus is on distributing the gradient style on the solid object. FIGURE A.14 The Layer palette with a chosen fill, position, width, and softness.
A
FIGURE A.15 Reminiscent of options available within the Opacity palette, the Gradient palette options home in on creating gradients for solid objects.
33 0672323125 APPA
4/22/02
2:25 PM
Page 384
384
Appendix A
The 3D Palette Adding dimension to an object can often help emphasize an important visual aspect of the entire composition. Dimension also helps you break away from the general flatness of the Web. The 3D palette gives you the power to make your objects appear to be three-dimensional, and therefore more realistic, touchable, and lifelike. You can select from Cutout, Emboss, Bevel, and Ripple styles, and then modify their depth, softness, lighting, edge, position, and light position (see Figure A.16). FIGURE A.16 The 3D palette.
The Object Layers Palette The Object Layers palette separates each individual layer that you use to make up the composite design. In Figure A.17 you can see the Object Layers palette with two layers shown. You can duplicate a layer, create a new layer, or discard a layer by using the buttons found at the bottom of the palette.
The States Palette One of the most wonderful aspects of the LiveMotion program is its capability to help you create rollover effects for the Web. For those of you unfamiliar with rollovers (also known as mouseovers), they enable you to add dynamic action to an image.
33 0672323125 APPA
4/22/02
2:25 PM
Page 385
Learning LiveMotion Features
385
FIGURE A.17 The Object Layers palette with an object’s layers made visible.
Rollovers can be subtle, such as a slight alteration of the type color or typeface as the mouse passes over a link, or they can be a little more bold, such as an image appearing as the mouse passes over a section of your design. LiveMotion helps you to create the graphics you’ll use in rollovers and control the way they behave, as well as generating the necessary code to manage the effects. The States palette is the control center for these actions (see Figure A.18).
The Styles Palette Another fantastic LiveMotion feature is the number and variety of styles it contains. This allows you to add designs, shadows, bevels, and other assorted effects to your objects. The Styles palette offers three views: • Swatches view—This view shows all the available styles within rectangular swatches (see Figure A.19). • Preview view—If you’d like to get a preview of how an effect will look, switch to this view, which names the style and shows how it will look when applied to an object. • Name view—Use this view to select your style by name. A small preview of the style is available within this view (see Figure A.20).
A
33 0672323125 APPA
4/22/02
2:25 PM
386
Page 386
Appendix A
FIGURE A.18 The States palette is your control center for the creation of rollover effects.
FIGURE A.19 The Styles palette, swatches view. Note the Application, Style, and Delete buttons along the bottom.
Each view allows you to apply the style, add a custom style, or discard a style using the buttons along the bottom of the palette.
33 0672323125 APPA
4/22/02
2:25 PM
Page 387
Learning LiveMotion Features
387
FIGURE A.20 The Styles palette, name view.
The Textures Palette Similar to styles, textures can be used to add a visual effect to your object. In this case, the effect is limited to a texture such as a grain, marble, or checker design. The Textures palette also allows for three views, including the swatches, preview, and name views available for the Styles palette (see the Styles palette section, immediately preceding). You can apply a texture, add a custom texture design, or delete textures from the palette by using the buttons along the palette’s bottom bar (see Figure A.21). FIGURE A.21 Add interesting textures to your work by using the Textures palette.
The Library Palette Creating mattes, edge effects, and familiar objects is easy using the Library palette. Simply select the shape of your choice from the palette and apply it to a composition.
A
33 0672323125 APPA
4/22/02
2:25 PM
Page 388
388
Appendix A
The Library palette also allows you to replace objects, place objects, create a matte, create a custom shape, and discard Library elements by using the buttons found along the bottom of the palette (see Figure A.22). FIGURE A.22 The Library palette allows you to choose from preexisting objects or add your own custom object.
As with the Styles and Textures palettes, the Library palette allows you to change views to suit your tastes and needs.
The Sounds Palette Because LiveMotion was developed to help you create multimedia presentations, audio has been included with the program. The Sounds palette is very similar to the Styles, Textures, and Library palettes in that it offers swatches, preview, and name views, as well as a way to apply the sound to your LiveMotion composition. The Sounds palette also allows you to play the sound by clicking on the Play button found in the lower-left corner of the palette (see Figure A.23).
The Color Scheme Palette A range of preset color schemes are available via the Color Scheme palette. You can select the view type, lock the scheme into place, and select how many colors (2–6) are available in the scheme (see Figure A.24).
33 0672323125 APPA
4/22/02
2:25 PM
Page 389
Learning LiveMotion Features
389
FIGURE A.23 Want to spice up your composition? Add sound via the Sounds palette.
FIGURE A.24 Color schemes provide you with preset color combinations.
When you select a scheme, it loads into the color palette at the bottom of the toolbox. You can then select from the palette on the toolbox, or from within the Color Scheme palette to apply colors from the scheme to your objects.
The Export Palette When you’ve created your compositions and want to export them, the Export palette provides you with numerous options to do just that. Whether you’re creating static graphics, animations, spliced graphics, or specialty graphic formats, this palette will enable you to get the job done. In Figure A.25, you can see this palette and its options. The drop-down menu offers various file formats, which are discussed in Appendix C, “About Web Graphics,” as well. You will also want to visit Hour 21, “Optimizing and Exporting LiveMotion Files,” when you become more proficient with your designs. FIGURE A.25 The Export palette.
A
33 0672323125 APPA
4/22/02
2:25 PM
Page 390
390
Appendix A
Using Context Menus in Windows Those of you using Windows will appreciate the context menus available to you while working within LiveMotion. Context menus are those menus that become available when you right-click on an object. Context menus give you fast and easy access to various actions and effects. Figure A.26 shows a context menu in Windows, where you can see all the options available. FIGURE A.26 A context menu in Windows.
Whenever you’re working on an object in Windows, try out the context menus as an alternative to palettes or toolbox choices. You might find that they’re helpful in getting the job done more quickly!
Working with Script Tools Adobe LiveMotion comes with several script tools that make scripting and the creation of scripts much easier.
The Script Editor A major power center of LiveMotion 2.0, the Script Editor can handle a wide range of script-related tasks. Figure A.27 shows the editor at the ready. To access the Script Editor, select Scripts, Script Editor.
33 0672323125 APPA
4/22/02
2:25 PM
Page 391
Learning LiveMotion Features
391
FIGURE A.27 The Script Editor.
The Script Debugger While you’re working on scripts, it becomes important to be able to debug that script, fixing errors to refine your projects. The Debugger appears when you run a script from the Script Editor and an error is found. Figure A.28 shows the Script Debugger. FIGURE A.28 The Script Debugger.
A
33 0672323125 APPA
392
4/22/02
2:25 PM
Page 392
Appendix A
Learn more about the Script Editor and Debugger in Part VII, “Advanced Techniques: Scripting.”
34 0672323125 APPB
4/22/02
1:53 PM
Page 393
APPENDIX
B
Setting Preferences and Working with the Composition Area Before professional graphic designers begin to work on a project, they like to take a few steps to ensure that the quality of color on their computer screens is as good as it can be. This means that any colors chosen for a design will look as similar as possible from one situation to the next. Of course, achieving consistency in color on the Web is especially difficult because no matter what you set your monitor to, someone else’s settings may be very different. However, this doesn’t mean that you shouldn’t take every step possible to strive for consistency! So one of the first things you’ll learn to do is to calibrate your monitor. After your LiveMotion software is open, you’ll want to set up preferences within the program so that your work environment is customized exactly as you like it to be. After your monitor is calibrated and preferences are set, you’ll move on to opening, creating, and saving new LiveMotion files.
34 0672323125 APPB
4/22/02
1:53 PM
Page 394
394
Appendix B
This appendix will help you familiarize yourself with the following tasks: • Working with your monitor • Customizing LiveMotion using preferences • How to open files • Creating a new file • Making changes to the composition area • Using the native LiveMotion file format The lessons learned here will set the stage so that no matter how complex your designs become, you are completely prepared to work in LiveMotion. Your methods will be consistent and organized, with the ultimate goal of ensuring that the designs you create are simply fabulous!
Calibrating Your Monitor Although calibration is not an imperative issue for Web designers, it can assist designers in certain work circumstances to achieve better results. Because computer monitors vary greatly in their range of display, achieving consistency within programs and from one monitor to another can be difficult. Calibrating the monitor first can help ensure that you produce expected results. Designers who might want to consider calibration will be working in the following environments: • A single designer working on multiple computers. • A number of designers in the same shop working on the same projects but on different computers. • Designers working together at a distance, using the Internet to transfer or preview files for accuracy. High-end print and design shops often use mechanical calibration tools. These tools are accurate but also costly. For your purposes, you can use software that you already have, or that you can afford should you find that you’re going to be doing a lot of work with LiveMotion and related Adobe applications, such as Illustrator and Photoshop.
Calibration does not affect the way users will see your work. My recommendation for calibrating monitors in these situations has to do with improving workflow and consistency within a design environment only. Please don’t go running out and spending money on calibration software if it’s something that doesn’t really apply to your situation!
34 0672323125 APPB
4/22/02
1:53 PM
Page 395
Setting Preferences and Working with the Composition Area
395
In fact, if you’ve purchased Photoshop recently, you likely already own calibration software. Adobe Gamma works to help you achieve consistent results by measuring the midtone (Gamma) contrast of your monitor. You can see whether you have Adobe Gamma loaded on your machine by visiting the Control Panel on both Macintosh and Windows computers (see Figure B.1). Adobe Gamma software is easy to use; it walks you through the calibration settings using a wizard. Advanced users can go directly to the Adobe Gamma Control Panel. The software helps you control brightness, contrast, gamma, and two calibration features known as white point and black point. FIGURE B.1 If you have Photoshop installed, you’ll find that Adobe Gamma has been installed, too.
B
Before calibration, let your monitor warm up for at least half an hour. Also, adjust the lighting in the room as you’d have it while working. Set your desktop to a mid-gray color so that you can achieve the best possible calibration. You can do this in Windows by right-clicking on the desktop and pulling up the Properties dialog, then going to the Appearance tab and choosing a gray background for your desktop. On the Mac, Ctrl+click on the desktop. Choose Change Desktop Background from the context menu, and adjust the desktop to gray.
34 0672323125 APPB
4/22/02
1:53 PM
396
Page 396
Appendix B
Task: Calibrating Your Monitor with Adobe Gamma If you have Adobe Gamma on your machine, you can begin calibrating your monitor as shown here: 1. Select Start, Settings, Control Panel. The Windows Control Panel appears (Windows). Or click the Apple and select Control Panels, Adobe Gamma (Mac). 2. Double-click the Adobe Gamma icon. The Adobe Gamma dialog appears. 3. Choose the Step By Step (Wizard) radio button (see Figure B.2). 4. Select Next. You’ll be asked to select an ICC profile. 5. Click the Load button and select the default Adobe Monitor profile (usually the first file in the list). 6. After this is loaded, select Next, and the wizard walks you through several activities to calibrate your monitor. 7. Save your calibration when the wizard prompts you to do so. FIGURE B.2 Choosing the Adobe Gamma Wizard.
Your monitor is now calibrated for your unique working environment.
Setting LiveMotion Preferences Preferences are what you use to set up an application so that it appears and acts the way you want. Not everyone likes to use the same setup. Try various preference settings to determine which ones work best for you. To set preferences, first create a new composition by selecting File, New Composition. Then, select Edit, Preferences. The Preferences dialog appears. This is where you’ll be able to control the look of your application within the context of the LiveMotion grid.
34 0672323125 APPB
4/22/02
1:53 PM
Page 397
Setting Preferences and Working with the Composition Area
397
The grid is an essential tool for designers. It’s used to position elements accurately within the canvas area. To set the grid to your preferences, slide the Gridline Every slider to the number of pixels apart you’d like your gridlines to be. Then, set the quantity of subdivisions using the Subdivisions slider. Many people prefer to keep the system’s defaults—it just depends on your personal choice (see Figure B.3). FIGURE B.3 You can set the grid to your preferences using the Grid portion of the Preferences dialog.
After making your changes, click OK and your preferences are set! Figure B.4 shows a LiveMotion canvas complete with grid and rulers in place.
You can change your grid preferences at any time by opening the Preferences dialog to Grid Settings and making the changes you want.
FIGURE B.4 A canvas with my customized grid preferences in place.
B
34 0672323125 APPB
4/22/02
1:53 PM
398
Page 398
Appendix B
Opening an Existing File Your monitor is calibrated, and your preferences are set. Now you are ready to begin working with LiveMotion files. LiveMotion opens two native file types—LiveMotion files and Adobe ImageStyler files. Adobe ImageStyler was the parent program to LiveMotion, so the application allows you to open ImageStyler files to ensure backward compatibility between the products.
ImageStyler files use the extension .ist in Windows.
The following method can be applied only to native LiveMotion formats. Other graphic file formats have to be placed rather than opened.
Task: Opening an Existing File To open an existing LiveMotion or ImageStyler file, follow these steps: 1. Select File, Open. The Open dialog appears (see Figure B.5). 2. Find the location of the file on your hard drive (or another drive) and highlight the file after you’ve found it. 3. Click Open. The file opens in LiveMotion, ready to be viewed or modified. FIGURE B.5 The Open dialog allows you to preview and open LiveMotion files.
You can also use keystroke combinations to open files. In Windows, press Ctrl+O. For Macintosh, Cmmd+O is the proper keystroke combination. The Open dialog appears. Follow steps 2 and 3 as described previously to complete the process of opening a file.
34 0672323125 APPB
4/22/02
1:53 PM
Page 399
Setting Preferences and Working with the Composition Area
399
If you receive an error pop-up, it’s likely that the file you’re trying to open is either incompatible with LiveMotion or corrupt. Bear in mind that many common file types, such as GIFs and JPEGs, cannot be directly opened by LiveMotion. See Hour 2, “Importing Photos and Artwork as Objects,” for more information on how to work with file types other than LiveMotion or ImageStyler files.
Creating a New File Anytime you’re ready to begin a new design, you start by creating a new file. LiveMotion makes this easy!
Task: Creating a New File All you need to do to create a new file is follow these steps: 1. Select File, New Composition. 2. The Composition Settings dialog appears. Here, add the width and height of your composition in pixels. 3. Click OK, and the canvas is created for you. Figure B.6 shows a new canvas within the LiveMotion environment. FIGURE B.6 A new canvas within the LiveMotion application.
B
34 0672323125 APPB
4/22/02
1:54 PM
400
Page 400
Appendix B
LiveMotion has set the default canvas size of new files to 550×500 pixels, so the first time you open the program, that’s the size your canvas will be. The background is always set to white. Furthermore, anytime you create a new file, it opens to the same canvas size as the last file you created. To adjust the dimensions of the canvas, follow the steps in the “Modifying the Composition Area” section, found immediately following this section. To use keystroke combinations to create a new file, select Ctrl+O (Windows) or Cmmd+O (Mac). The canvas automatically opens.
Modifying the Composition Area Whether you are opening an existing canvas or creating a new one, you may want to change the size of the composition area. Depending on whether you are creating a fullscreen composition or individual components such as a matted photograph, you’ll require different canvas sizes. You can have a small canvas (the smallest canvas size available is 1×1 pixel) or a large canvas (the largest size available is 1024×1024 pixels), or one somewhere in between. No matter the size, you can modify the canvas easily.
Task: Changing the Composition Size To change the size of a composition, follow these steps: 1. Select Edit, Composition Settings. The Composition Settings dialog appears (see Figure B.7). 2. In the Width text box, type the number, in pixels, of your desired canvas width. 3. In the Height text box, enter the number, in pixels, of the height of the canvas you are creating. 4. Click OK. The canvas now changes size to match your chosen dimensions. FIGURE B.7 The Composition Settings dialog.
If you are modifying an existing composition, be aware that if the dimensions are smaller than the original, clipping will occur. If the dimensions are larger, the canvas will expand to the right and bottom, leaving the original image justified to the upper left of the canvas.
34 0672323125 APPB
4/22/02
1:54 PM
Page 401
Setting Preferences and Working with the Composition Area
401
Saving Files to Default LiveMotion Settings Whenever you’re working on a new composition, it’s wise to save that composition to the native file format of the program. If you’re using Photoshop, for example, and want to take a coffee break, your best bet is to save to the Photoshop file format .psd. This process allows you to keep your original work, including layers, channels, filter settings, type choices, and effects, intact. When you return to your desk, all your work has been saved. Furthermore, you can archive the original files and return to them whenever you want to make updates to the compositions. Working in LiveMotion is no different! Because you want to be able to walk away from your work yet retain all the information so that you can make modifications at any time, you’ll want to keep copies of your designs saved to the native file format. This way, all the data stays intact.
Native file formats are for your use only, acting as a storage mechanism for your composition data. LiveMotion files themselves are not supported by Web browsers and are used by you to store detailed information about your compositions. This allows you make additions and changes to your original files, and later export them to appropriate Web formats.
Task: Saving as a LiveMotion File Format To save to LiveMotion’s native file format, follow these steps: 1. Select File, Save. The Save dialog appears (see Figure B.8). 2. Type your filename into the File Name text box. Mac users should be sure to include the three-letter extension .liv so that the files are easily transferred between Mac and Windows machines. This is especially helpful when you’re working collaboratively! 3. Click Save. Your file is saved in native LiveMotion format, with all independent data intact. To reopen a saved LiveMotion file, simply follow the steps described earlier in this hour, in the section “Opening an Existing File.”
Save early and save often! In fact, I like to save my composition in native format immediately after I’ve created a new one. Then, all I need to do is press Ctrl+S (Windows) or Cmmd+S (Mac) to update any additions to the file.
B
34 0672323125 APPB
4/22/02
1:54 PM
402
Page 402
Appendix B
FIGURE B.8 Saving files in native format, using the Save As dialog.
Summary Calibrating your monitor provides the extra edge when it comes to consistent design and color output. Setting your preferences helps you customize the work area within LiveMotion so that you are personally comfortable with the environment. Both steps are often overlooked or unknown to newcomers to graphic design software, but they make a big difference in the way you will use, and the degree to which you’ll enjoy using, the LiveMotion software. When you’re opening files, creating new files, or saving files, understanding the basic techniques and principles in the management of your canvas improves your end results. Especially important is making a habit of saving your compositions in native format, saving early, and saving often. You’ll have your work at hand with all the data intact, ready for your additions and changes.
35 0672323125 APPC
4/22/02
12:41 PM
Page 403
APPENDIX
C
Understanding Web Graphics When you look at some of the high-tech designs on the Web, it’s easy to become intimidated by the quality of the graphics used on various sites. The goal of this appendix is to help all readers, whether seasoned graphics or Web-graphics designers or complete newcomers, gain a broad-spectrum knowledge of what kinds of computer graphics exist, which types are appropriate for general use, which are used specifically for the Web, and how all this works in the context of LiveMotion.
About Computer Graphics Computer graphics can be categorized in two primary ways: vector images and raster images. Each kind of image has a distinctive look and feel, and each is edited and used in unique ways. By mastering the basics of both types of computer-generated art, and the software tools used to produce that art, you will have acquired a marketable skill that enables you to produce almost any graphics element imaginable.
35 0672323125 APPC
4/22/02
12:41 PM
404
Page 404
Appendix C
Vector Art Vector graphics are mathematically calculated images. Vector graphics consist of a series of lines and curves used to form different shapes. Each line and curve is generated using a mathematical instruction that provides the beginning, ending, and path of the line or curve.
NEW TERM
Vector graphics are also referred to as object-oriented graphics.
Vector graphics are easy to scale, or resize, because it is simply a process of altering the mathematical equations involved in the image. If you save a vector graphic in its native file format using a vector graphics program, such as Adobe Illustrator, you can later modify that file to make the graphic larger or smaller without losing quality or increasing file size.
The SWF format, used to export interactive animated compositions from LiveMotion (and the format used by Macromedia Flash) is a vector format.
Bezier Curves Vector art is composed of Bezier curves (see Figure C.1). Bezier curves define shapes or objects through the positioning of two anchor points, a segment, two direction lines, and two direction handles. Direction lines define the direction of a curve. It makes sense, therefore, that straight paths or sharp corners do not have direction lines. Bezier curves were first introduced to the European automobile industry in the 1960s for the purpose of maintaining the integrity of drawings during the design process. The mainstream drawing programs for computers at the time were pixel-based.
NEW TERM
Pixel-based programs produced results with stair-stepped pixelated lines and shapes. This can result in jagged edges (this is known by a very serious technical term: jaggies).
NEW TERM
Adobe Illustrator, released in 1988, was the first vector-based computer program to be made available to the general public. Illustrator allowed artists to draw hard-edged graphics on a computer and print an image composed of clean, sharp lines and edges.
35 0672323125 APPC
4/22/02
12:41 PM
Page 405
Understanding Web Graphics
405
FIGURE C.1 Example of Bezier curves in Adobe Illustrator.
This advance was valuable not only for illustrators but also for typographers. Type fonts could be rendered using the same technology, enabling typographers to design hundreds of new fonts with ease.
To learn more about type in LiveMotion, see Hour 3, “Setting Type with LiveMotion.”
Vector Image Tools To create vector illustration, special tools have been developed that can make the calculations and save the digital data to a vector file format. Several software products exist that emphasize vector graphics design, including the following: • Adobe Illustrator— This extremely popular drawing tool for Mac and Windows allows you to create vector art; it can be found at www.adobe.com/products/illustrator/main.html. • Macromedia Freehand—Also available for Mac and Windows, Freehand information can be found at www.macromedia.com/software/freehand/. • CorelDRAW—This drawing tool has historically been used on Windows-platform machines, although Mac versions are available, too. Visit www.corel.com to find out more.
C
35 0672323125 APPC
4/22/02
406
12:41 PM
Page 406
Appendix C
Vector applications are especially good for the creation of illustrations with many curves, hard-edged shapes, and smooth lines. Graphics designers usually use these programs to design logos and draw complex digital drawings. Vector applications are also used for technical drawings that can benefit from the sizing flexibility that vector formats offer. Vector software is also an excellent choice for the creation of special effects. LiveMotion allows for the creation of Bezier curves via the Pen tool. It also maintains the integrity of vector information within a design. You can also work in an integrated process with other software, using a product with even more precise drawing tools, such as Illustrator, alongside LiveMotion to get the most out of your designs.
Vector art does not appear on the Web in its original format. With the exception of Adobe Acrobat Portable Document Files (PDF) and Macromedia Flash and LiveMotion SWF files, all images that appear on the Web are pixelbased raster images. For a vector image to be positioned as a Web graphic, it must first be converted by being saved or exported to JPEG or GIF. You will learn about these file formats in detail later in this appendix, and you can read more about exporting files in Hour 21, “Optimizing and Exporting LiveMotion Files.”
An image created in a vector application can be exported as a raster file directly. Or it may be saved to the native vector file format or to the cross-platform, cross-program vector EPS format. You can then open the file in another application such as Photoshop or LiveMotion for image enhancement. If the other application is not object-oriented (as is the case with Photoshop), the image is automatically rasterized. This is the conversion of vector to bitmap information for editing in the raster environment. Any further changes to the image will affect file size and appearance. Keep this in mind before you decide to rasterize your vector images.
NEW TERM
Check out Hour 2, “Importing Photos and Artwork as Objects,” for a more in-depth discussion of how to work with vector and raster graphics in the LiveMotion environment.
35 0672323125 APPC
4/22/02
12:41 PM
Page 407
Understanding Web Graphics
407
Raster Art It’s likely you are already familiar with raster graphics types, which include the common Web file formats GIF and JPEG. To be viewable across multiple platforms and Web browsers, vector files must be rasterized to one of these common file formats.
Raster files are also referred to as bitmaps.
Pixel Grids Raster graphics use the x/y axis to create a predefined grid of information about each pixel of the image. Pixels are the basic physical unit of an image. They are individual tiles of colored light set up on a grid to form a mosaic (see Figure C.2). The pixels are so small that when the eye sees them, it blends them together to create a photographic image.
NEW TERM
FIGURE C.2 A bitmapped image magnified so that you can see the individually mapped pixels.
C Individual pixels– "bits" within the map
Each pixel in the grid is stored with color and other information. Because each pixel contains an identical number of bits, pixel-based images are limited in terms of how they can be modified. You can make an image smaller without losing quality. But as you
35 0672323125 APPC
4/22/02
12:41 PM
Page 408
408
Appendix C
increase the size of your image, the number of pixels increases, thereby increasing file size. Also, as you increase the size of your image, each additional pixel created is the software’s best guess, grabbing color from nearby pixels and making assumptions about the digital information used to make up the original image. As a result, the image becomes blurry and inaccurate.
Raster Image Tools Raster art is produced in raster programs. Raster programs manipulate bitmaps, which are a patterned mosaic of pixels containing digital information. Popular raster applications include the following: • Adobe Photoshop— This is the emperor of professional digital design software (see Figure C.3), available at www.adobe.com/products/photoshop/main.html. • Corel Photo-Paint—You can find Corel’s raster companion to Draw at www.corel.com/. • Jasc Paint Shop Pro—Extremely popular among enthusiasts, PSP is a cost-effective alternative to high-priced professional programs; it is available at www.jasc.com/.
You can export vector graphics created in vector programs to raster formats. For example, Adobe Illustrator allows you to export to GIF format, which results in a raster rather than vector graphic.
FIGURE C.3 Working on a raster graphic in Adobe Photoshop.
35 0672323125 APPC
4/22/02
12:41 PM
Page 409
Understanding Web Graphics
409
Now, designers can tap into the power of vector and the Web-ready flexibility of raster graphics. By creating vector-based art in LiveMotion, and saving it to LiveMotion format, a designer will always have access to that original document. He or she can then size, adjust, and change the vector data without disrupting the integrity of the graphic. When the time comes to export to raster art for use on the Web, the designer can use the vector data to generate the raster art in various modifications, such as small or large graphics, and so forth. This flexibility and integration, localized into a single program, makes for a significant improvement in the way Web graphics designers work.
Exploring Common File Types As you work with LiveMotion, you’ll be exposed to many file types. Some are specific to the Web, such as the aforementioned GIF format. I’ll cover Web-specific file formats in the next section, “Suitable Web File Formats.” In this section, Table C.1 lists the common graphics file types you’re likely to see as you work with LiveMotion. TABLE C.1
Common File Types
File Acronym
Filename
Description
AI
Adobe Illustrator file
Native vector format for Adobe Illustrator
BMP
Windows bitmap
Raster format for Windows
IST
ImageStyler file
Native format for Adobe ImageStyler
EPS
Encapsulated Postscript
Uncompressed vector and raster format
LIV
LiveMotion file
Native format for Adobe LiveMotion
PICT
Macintosh Picture file
Vector and raster file
PCX
PC Paintbrush file
Raster format for Windows
PDF
Portable Document Format
Vector format, read by Adobe Acrobat
PSD
Photoshop Document
Raster format that allows the retention of layers
TIFF
Tagged Image File Format
Widely used raster format
As you work, you’ll find the need to bring various file types into the LiveMotion application so that you can use them to create compositions. See Hour 2 for details on how this is accomplished.
This isn’t a comprehensive list of computer graphics file types. I have chosen the ones I think you are most likely to encounter while working on LiveMotion compositions.
C
35 0672323125 APPC
4/22/02
12:42 PM
Page 410
410
Appendix C
Suitable Web File Formats Along with general computer graphics file types, there are many files specifically suited to the Web. You’ll examine each type in detail in upcoming sections. First, I want to discuss some of the general features of Web formats. The two most commonly used Web graphics formats are GIF (Graphical Interchange Format) and JPEG (Joint Experts Photographic Group) , although a great deal of interest has been placed in a relative newcomer to the Web scene, PNG (Portable Network Graphics). There are advantages and disadvantages to each format. Which format is best to save an image to depends on the nature of the image itself and what you intend to do with it. Making the right choice will greatly influence the quality of your final image and, as a result, your Web site as a whole. For your images to load quickly, they must be compressed. Compression is the act of minimizing a file’s size in terms of bytes (this is also referred to as file weight). Images contain a variety of color and other data, and all this information takes up space within the file. Compressing to reduce file size while retaining quality demands skill and a fine eye. Depending on the file format you use, compressing the file can compromise the quality of the final image. Ultimately, it’s up to you to determine where the best option lies. This is why it’s so important to understand which formats and features are available to you.
Understanding Resolution Before we discuss individual Web file formats, a brief explanation of resolution is in order. The resolution of an image determines the quality of that image when displayed onscreen or when output to a printer. Resolution is calculated by the number of dots (pixels) in a linear inch. This is referred to as dpi (also, ppi). When your target output is a Web page, the most common screen resolution is 72 dots per inch (dpi). LiveMotion is already set up to ensure that your Web graphics are generated to 72 dpi. However, many beginning Web graphics designers working in related programs such as Photoshop are not aware of this limitation, and create files set to a higher dpi. This, in turn, will affect the weight of the finished file considerably. So for those individuals working in an integrated environment, awareness of dpi is important! See Hour 2 for more information on dpi.
35 0672323125 APPC
4/22/02
12:42 PM
Page 411
Understanding Web Graphics
411
Graphic Interchange Format (GIF) GIF (pronounced either giff or jiff) is the Graphic Interchange Format. It was developed in the late 1980s for CompuServe, a proprietary online computer service. GIF is the oldest supported file format on the Web. GIFs are extremely popular because they are small and have considerable functionality, such as animation, interlacing, and transparency capabilities.
Understanding GIF Compression GIFs use a method of compression known as lossless. This means that after the file goes through the first round of compression, in which the color table is limited to 256 colors or less, the file can be repeatedly saved without reduction of quality. So even though the file is compressed, it ideally does not lose any quality in the resulting image. Although the file size of a compressed, lossless image is smaller than that of an uncompressed file, the data remains true to the original file. Of course, the only way to obtain lossless results using GIF is to make good decisions about which kinds of images are best suited to the format. The GIF file format supports only up to 256 colors. This is one disadvantage to using a GIF file to compress a photographic image. The thousands or millions of colors that compose a photograph are converted to a limited number of colors, and you will in fact lose quality. Therefore, the GIF format is recommended primarily for images that use fewer than 256 colors or can be readily limited to 256 colors or fewer. Good choices for compressing to GIF format include the following (see Figure C.4): • Any drawing with a few areas of flat color • Line drawings • Clip art Further compression occurs during GIF processing when unneeded colors are NEW TERM eliminated from an image. This is done by reducing the number of color channels in a process known as indexing color. This process creates a specialized palette based on the colors in your file. When converting to indexed color, a Color Lookup table (CLUT) is built, which stores the image’s colors. If a color in the original image does not appear in the table, the program chooses the closest one or simulates the color by combining (or dithering) CLUT colors.
C
35 0672323125 APPC
4/22/02
12:42 PM
412
Page 412
Appendix C
FIGURE C.4 Examples of art appropriate for the GIF format.
Few areas, flat color
Line drawing
Clip art
Whenever a designer is dealing with a limited color palette in a digital environment, he or she must be ready to accommodate dithering. This is the computer’s and software application’s method of taking colors within the palette and shifting them in an attempt to create colors that do not appear within that limited palette. Dithering can become a problem in GIFs, causing the quality of the image to degrade due to the loss and attempted recovery of color. If you are experiencing too much dithering at colors below your allotted 256, try increasing the number of colors. If you are still getting poor results, it’s time to consider another file format, such as JPEG.
There are many palettes within the indexing process. In LiveMotion, each indexing process creates a different type of CLUT:
35 0672323125 APPC
4/22/02
12:42 PM
Page 413
Understanding Web Graphics
413
• Perceptual—This palette creates a priority for colors that impact human vision most intensely. Using this palette keeps colors as bright and diverse as possible to maintain the precompression integrity. • Selective—As with the Perceptual palette, this option prioritizes colors in order of importance while attempting to adapt to the lowest number of colors possible. • Adaptive—This option creates a palette by sampling the colors appearing most commonly in the image. • Web—The Web CLUT uses the palette most often used by Web browsers to display 8-bit images. This method uses a subset of the Macintosh or Windows System palette. • Windows—The Windows CLUT is based on the default color palette available on Windows systems. • System (Macintosh OS)—This CLUT takes a uniform sample of RGB colors from the Macintosh system’s default 8-bit palette.
The Web color palette ensures that your images will be indexed to colors that are standard on both the Windows and the Mac platform. You can see a sample of the Web safe palette at www.visibone.com/swatches/. LiveMotion has a Web CLUT built right into it to ensure that your colors are Web safe. See Hour 7, “Using LiveMotion’s Color Tools,” for more information.
Color Depth The number of colors chosen for a GIF is referred to as bit or color depth. This term describes the number of bits of color information per pixel within an image. Bit depth describes the number of colors within a given GIF’s color table. For example, if you choose 4 bits per pixel, the image will be composed of 16 colors; 6 bits per pixel, 64 colors; 8 bits per pixel, 256 colors. With GIFs, you can use a specific value up to a total of 256. It’s important to select a bit depth that keeps your file weight low but retains the quality of the image (see Figure C.5).
NEW TERM
An image with bit depth that is too low will appear posterized. The trick is to get the lowest bit depth while retaining the highest image quality.
C
35 0672323125 APPC
4/22/02
12:42 PM
Page 414
414
Appendix C
FIGURE C.5 On the left, the image is saved with adequate bit depth for a quality look. On the right, the same image is saved at a very low bit depth, producing unacceptable results.
Types of GIFs A major advantage of the GIF format is that it offers three important options that you’ll want to use when exporting your LiveMotion graphics. Interlaced GIFs are a specific file type offering progressive rendering. Transparent GIFs allow portions of your graphics to be see-through. Animated GIFs enable you to create a moving image with a single GIF file.
Interlaced GIFs GIFs can be interlaced to appear progressively on the screen. The image first appears in a rudimentary manner, and details are filled in as the file continues to load (see Figure C.6). This allows visitors to get an idea of what is about to appear, and they can choose to continue navigating or to wait for the completed image.
NEW TERM
Interlaced GIFs are useful for design elements that are not critical to the use or readability of your site. Elements such as navigation bars should not be interlaced because visitors need to see the entire navigation bar to use your site. It is also not recommended that you interlace GIFs used for backgrounds. FIGURE C.6 An interlaced GIF loads progressively. The image first is blotchy (as shown on the left) and then gradually appears until rendering is complete (the figure on the right).
Mid-render
Completely rendered
35 0672323125 APPC
4/22/02
12:42 PM
Page 415
Understanding Web Graphics
415
Transparent GIFs Another important aspect of the GIF format is that areas of a given GIF can be made transparent. This means that you can make an illustration or object appear to be freeform against a background, blending with rather than being separated from the background design (see Figure C.7). FIGURE C.7 A GIF with transparency. The image has transparent areas, so the object appears to blend with the background field.
Animated GIFs Due to a looping mechanism within GIF technology, you can create multiple images and combine them into a single file. This results in the popular animated GIF (see Figure C.8). The site visitor sees the first instance of text, then the second, then the third. What’s more, the GIF can be set to loop constantly so that the entire process will repeat. Animated GIFs tend to be fast loading, yet they offer movement to otherwise static Web pages. You can make animated GIFs using LiveMotion. More information is available in Hour 16, “Designing Animations,” and Hour 21, “Optimizing and Exporting LiveMotion Files.”
C
35 0672323125 APPC
4/22/02
12:42 PM
Page 416
416
Appendix C
FIGURE C.8 Three phases of an animated GIF. Each individual cell is contained within a single file and will loop according to the commands I include when creating the file.
Cell one
Cell two
Cell three
Joint Experts Photographic Group (JPEG) The acronym JPEG (pronounced jay-peg) stands for Joint Experts Photographic Group, the name of the organization that originally wrote the compression algorithm for this file type. JPEGs are extremely efficient at compressing a variety of designs.
JPEG Compression Unlike GIF, which uses lossless compression and a limited color palette, JPEG uses lossy compression and 24-bit color (millions of colors). JPEG compression removes what it considers irrelevant data from the file to compress the data. Although this loss in data is sometimes invisible to the naked eye, there are instances when the
NEW TERM
35 0672323125 APPC
4/22/02
12:42 PM
Page 417
Understanding Web Graphics
417
compression is noticeable. As with GIFs, your understanding of which images are suitable for optimization with the JPEG format helps ensure the end quality of the graphics you save to this format. Art that is suitable for JPEG compression includes the following: • Photographs—Any photograph is suitable for the JPEG format. This is especially true of photographs with natural gradations of color, such as is found in sunsets, sky views, and views of water. • Gradient designs—If you’re using a color gradient, the JPEG option can help you keep the subtle changes in color intact. Often, GIF format causes these colors to break up, creating an effect referred to as banding (see Figure C.9). • Illustrations with many colors—If you have a detailed illustration with colors and shadows, JPEG offers better compression than GIF (see Figure C.10). • Complex designs—Any design that has a combination of gradient, light source, colors, and any other digital data is likely to be well-suited for the JPEG format. FIGURE C.9 The top gradient sample was saved as a JPEG, so it is smooth. Below it, you can see the banding that occurred when it was saved as a GIF.
C NEW TERM JPEGs produce a generalized calculation of how the image should appear.
JPEG files can produce extraordinary compression, but the more you compress the file, the more data is removed from the calculations. This can cause areas of the image to appear blocky or leave trace halos (called artifacts) around portions of the image (see Figure C.11). It is important, therefore, to compress your image carefully and balance the loss of quality against the decreased file size.
35 0672323125 APPC
4/22/02
12:42 PM
418
Page 418
Appendix C
FIGURE C.10 Even though this drawing is in black and white, the soft edge quality of shadow and light makes it more suitable to JPEG compression.
FIGURE C.11 Artifacts occur when a JPEG is compressed too much.
Artifacts
You can control the quality of a JPEG image from medium to high based on numeric quality. The quality control affects the amount of compression. Higher qualities yield lower compression but retain more of the original quality of the image.
35 0672323125 APPC
4/22/02
12:42 PM
Page 419
Understanding Web Graphics
419
Progressive JPEGs Interestingly, JPEGs can render progressively (the appearance of the entire image in phases of clarity rather than scrolling from top to bottom), although they use a different technology than is found in GIF. I’ve always said that progressive JPEGs look as though they’ve got Vaseline smeared on them. The initial images are blurry, but after several passes, the image becomes clear (see Figure C.12). FIGURE C.12 Progressive JPEGs first appear blurry (on the left) and then clarify (on the right) as the data is received and interpreted by the browser.
Portable Network Graphics (PNG) The Portable Network Graphics (PNG) format was introduced as an alternative to the GIF format. PNG supports 24-bit images and has transparency capabilities as well as antialiasing features, which allow for smooth lines. Its compression methodology makes the resulting files much smaller than GIF files.
NEW TERM
As with GIF, PNG is a lossless compression method, meaning that quality should not suffer as the image is compressed. Unlike GIF or JPEG, however, PNG supports many different bit depths and storage methods. This makes PNG extremely flexible. PNG can support RGB and grayscale images with one alpha channel—a channel of combined color data that can be used to create masks (see Hour 11, “Matting and Masks”)—as a transparency mask. PNG can also support bitmap and indexed-color modes without alpha channels. PNG uses the saved alpha channel to define transparency in the file.
C
35 0672323125 APPC
420
4/22/02
12:42 PM
Page 420
Appendix C
The PNG saving options in LiveMotion are as shown here: • Indexed—Indexed PNG uses the same kind of approach to compression that GIF does, limiting the color table and producing 8-bit files. • Truecolor—This option supports the true RGB color without indexing the files. As with JPEGs, Truecolor PNGs produce 24-bit files.
PNG is supported only by Internet Explorer and Netscape Navigator 4.0 and above. However, neither browser supports the alpha transparency feature in PNG. This makes it a risky choice for Web use right now. Many Web experts consider PNG to hold considerable promise for the future, however, so it is worth study.
36 0672323125 Index
4/22/02
12:42 PM
Page 421
INDEX Numbers 3D command (Window menu), 184 effects, object layers, 184-185 palette, 384 99 layers per object, memory, 111 216 Web colors, 128 255 colors (RGB), 128
A About icon (standard toolbar), 370 About the Company link, 237-238
accessing flyout menus for palettes, 176 Library palette, 145 Live Tabs, 338 actions of remote objects, designing, 238 of trigger objects, designing, 236 undoing, 43 ActionScript, 335-336 Active Color palette, 373 Active Matte, 192, 196-197, 376 Adaptive palette (CLUT), 413 Add Object dialog box, 154 adding audio to Sounds palette, 289 Automation scripts and Live Tabs to menus, 339-340
labels to animations, 349 objects to animations, 365-366 with New Object icon, 154 in Timeline, 264 preset animations to objects, 169 rollover effects to trigger objects, 236-237 script keyframes, 352 scripts to animations, 366 to objects, 338 sounds, to animations, 287-289 styles to Styles palette, 170-171 targets to links, 227 text for graphics-only Flash output, 315-317 textures from objects to Textures palette, 178-179 Web pages, 314
<Map Name=”map1”> 
