LM_02.book Page 1 Thursday, May 23, 2002 10:05 AM
Classroom in a Book
®
www.adobe.com/adobepress
LM_02.book Page 2 ...
14 downloads
563 Views
16MB Size
Report
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!
Report copyright / DMCA form
LM_02.book Page 1 Thursday, May 23, 2002 10:05 AM
Classroom in a Book
®
www.adobe.com/adobepress
LM_02.book Page 2 Thursday, May 23, 2002 10:05 AM
© 2002 Adobe Systems Incorporated. All rights reserved. Adobe® LiveMotion™ 2.0 Classroom in a Book® for Windows® and Macintosh This manual, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. The content of this manual is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in this documentation. Except as permitted by such license, no part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization. Adobe, the Adobe logo, Acrobat, Acrobat Reader, Adobe Type Manager, ATM, Classroom in a Book, Adobe Dimensions, FrameMaker, GoLive, Illustrator, ImageReady, LiveMotion, Minion, Myriad, Photoshop, PostScript, and Adobe Premiere are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple, Macintosh and QuickTime are trademarks of Apple Computer, Inc., registered in the United States and other countries. QuickTime is a trademark used under license. Macromedia and Flash are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. All other trademarks are the property of their respective owners. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. Adobe Press books are published by Peachpit Press, Berkeley, CA Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference in this Agreement.
Printed in the U.S.A. ISBN 0-201-75623-4
9 8 7 6 5 4 3 2 1
LM_02.book Page iii Thursday, May 23, 2002 10:05 AM
iii
Contents Getting Started
About Classroom in a Book Prerequisites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Installing the program
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
Installing the Classroom in a Book fonts Copying the Classroom in a Book files
Getting to Know the Work Area
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Adobe Certification
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Lesson 1
................................................ 7
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Using the tools
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Editing composition settings
. . . . . . . . . . . . . . . . . . . . . . . . . . 13
Using the rulers, grid, and guides Working with palettes Previewing in a browser Using online Help
Lesson 2
. . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Previewing in LiveMotion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Starting a new file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Creating a shape
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Saving to the Library
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Exporting the finished composition
Working with Type
. . . . . . . . . . . . . . . . . . . .3
Additional resources
Viewing the composition
Drawing Basic Shapes
. . . . . . . . . . . . . . . . . .2
Lesson 3
. . . . . . . . . . . . . . . . . . . . 39
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Opening the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Using text as a mask
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
LM_02.book Page iv Thursday, May 23, 2002 10:05 AM
iv CONTENTS
Working with a style
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Changing text alignment
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Combining shapes and text
. . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Breaking text apart
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Using Edit Original
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Using the Adjust palette
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Exporting the finished composition
Working with the Pen Tool
Lesson 4
. . . . . . . . . . . . . . . . . . . . 55
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Opening the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Modifying shapes with the pen tool Creating a freeform shape
. . . . . . . . . . . . . . . . . . . . 61
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Exporting the finished composition
. . . . . . . . . . . . . . . . . . . . 70
Review Project A: Creating Objects . . . . . . . . . . . . . . . . . . . . . 73 Animating Position
Lesson 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Creating the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Creating an object to animate Viewing the timeline
. . . . . . . . . . . . . . . . . . . . . . . . . 82
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Animating position
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Playing animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Editing keyframes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Animating rotation and scale
. . . . . . . . . . . . . . . . . . . . . . . . . . 90
Replacing an object in an animation Time-stretching an animation
Exporting the finished composition
Editing Keyframes
Lesson 6
. . . . . . . . . . . . . . . . . . . 92
. . . . . . . . . . . . . . . . . . . . . . . . . 93 . . . . . . . . . . . . . . . . . . . . 94
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Opening the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Animating the plane
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
LM_02.book Page v Thursday, May 23, 2002 10:05 AM
v
Reversing keyframes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Exporting the finished composition
Animating Object Properties
Lesson 7
. . . . . . . . . . . . . . . . . . . 111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Opening the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Animating an ellipse
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Animating a gradient highlight Animating type
. . . . . . . . . . . . . . . . . . . . . . . 122
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Adding sound to the Animation
. . . . . . . . . . . . . . . . . . . . . . 130
Exporting the finished composition
. . . . . . . . . . . . . . . . . . . 131
Review Project B: Basic Animation . . . . . . . . . . . . . . . . . . . . . 135 Creating Basic Rollovers
Lesson 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Building multiple rollovers simultaneously Creating layered effects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Creating rollover states
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Labeling the rollover buttons
. . . . . . . . . . . . . . . . . . . . . . . . . 150
Linking rollovers to URL addresses Exporting the rollover buttons
Movie Clips and Advanced Rollovers
. . . . . . . . . . . . . 141
Lesson 9
. . . . . . . . . . . . . . . . . . . . 151
. . . . . . . . . . . . . . . . . . . . . . . . 152
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Building the composition
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Making a movie clip group button Animating rollover states
. . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Creating a masked movie clip button
. . . . . . . . . . . . . . . . . . 164
Using Illustrator artwork as an animated movie clip Targeting remote rollovers
. . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Exporting the finished composition
Basic Player Script Interactivity
Lesson 10
. . . . 173
. . . . . . . . . . . . . . . . . . . 178
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
LM_02.book Page vi Thursday, May 23, 2002 10:05 AM
vi CONTENTS
Opening the file
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Building the composite movie
. . . . . . . . . . . . . . . . . . . . . . . . 184
Using transitions between scenes Using the Script Editor
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Creating looping landscapes
. . . . . . . . . . . . . . . . . . . . . . . . . 194
Targeting the inner_door states Creating a preloader
. . . . . . . . . . . . . . . . . . . . . 186
. . . . . . . . . . . . . . . . . . . . . . 197
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Exporting the finished composition
Adding Sounds to Your Composition
Lesson 11
. . . . . . . . . . . . . . . . . . . 202
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Opening the composition
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Adding a streaming sound
. . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Adding a looping city sound
. . . . . . . . . . . . . . . . . . . . . . . . . . 209
Adding a volume controller
. . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Exporting the composition to SWF format
Working with Dynamic Data
Lesson 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Getting started Variables
. . . . . . . . . . . . . 220
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Building the name/password input screen
. . . . . . . . . . . . . 228
Building the game data input screen
. . . . . . . . . . . . . . . . . . 234
Dynamic text fields are for output, too
. . . . . . . . . . . . . . . . . 239
Exporting the composition to SWF format
. . . . . . . . . . . . . 243
Review Project C: Movie Clip Groups . . . . . . . . . . . . . . . . . . . 247 Advanced Interactivity: The Game
Lesson 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Opening the composition
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Getting started with game design Race car game mechanics Modifying the game
. . . . . . . . . . . . . . . . . . . . 255
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Exporting the composition to SWF format
. . . . . . . . . . . . . 267
LM_02.book Page vii Thursday, May 23, 2002 10:05 AM
vii
Writing Automation Scripts and Live Tabs
Lesson 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
The JavaScript connection
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Working with automation scripts Writing an automation script Creating Live Tabs
. . . . . . . . . . . . . . . . . . . . . 273
. . . . . . . . . . . . . . . . . . . . . . . . . 276
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Meet the ButtonMaker Live Tab
. . . . . . . . . . . . . . . . . . . . . . . 281
The bits and pieces of ButtonMaker Writing the code
Exporting
. . . . . . . . . . . . . . . . . . . 282
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Building the doIt function
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Design, create, automate
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Lesson 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Getting started
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Exploring export formats Preparing for export
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Exporting as SWF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Exporting as GIF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Optimizing SWF output
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
LM_02.book Page viii Thursday, May 23, 2002 10:05 AM
LM_02.book Page 1 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 1 Classroom in a Book
Getting Started Welcome to Adobe® LiveMotion™ 2.0 — the future of animation and interactivity for the Web. LiveMotion is an extremely capable design and production tool that offers unparalleled precision, control, and seamless integration with Adobe’s professional Web applications, including Adobe Photoshop®, Adobe Illustrator®, and Adobe GoLive™. Import your layered Photoshop and Illustrator files as discreet objects, or as frames in your animations. LiveMotion lets you easily create rollovers, animated masks, and multicharacter compositions including sound and advanced interactivity. When you’re done, you can save your work in the Macromedia® Flash™ (SWF), QuickTime®, JPEG, animated GIF, and PNG formats. Then place your file in Adobe GoLive, and publish it on the Web.
About Classroom in a Book Adobe LiveMotion 2.0 Classroom in a Book® is part of the official training series for Adobe graphics and publishing software developed by experts at Adobe Systems. The lessons are designed to let you learn at your own pace. If you’re new to Adobe LiveMotion, you’ll learn the fundamental concepts and features you’ll need to master the program. If you’ve been using Adobe LiveMotion for a while, you’ll find Classroom in a Book teaches many advanced features, including tips and techniques for using this exciting Web design tool. Although each lesson provides step-by-step instructions for creating a specific project, there’s room for exploration and experimentation. You can follow the book from start to finish, or do only the lessons that correspond to your interests and needs. Special review lessons summarize what you’ve covered.
Prerequisites Before using Adobe LiveMotion 2.0 Classroom in a Book, you should have a working knowledge of your computer and its operating system. Make sure you know how to use the mouse and standard menus and commands, and also how to open, save, and close files. If you need to review these techniques, see the printed or online documentation included with your Windows® or Mac OS documentation.
LM_02.book Page 2 Thursday, May 23, 2002 10:05 AM
2 Getting Started
Installing the program You must purchase the Adobe LiveMotion software separately. For complete instructions on installing the software, see the Introduction to the Adobe LiveMotion 2.0 User Guide.
Installing the Classroom in a Book fonts To ensure that the lesson files appear on your system with the correct fonts, you may need to install the Classroom in a Book font files. These fonts are in the Fonts folder on the Adobe LiveMotion 2.0 Classroom in a Book CD. If you already have these on your system, you do not need to install them. If you have Adobe Type Manager® (ATM®), see its documentation on how to install fonts. If you do not have ATM, installing it from the Classroom in a Book CD automatically installs the fonts. Please read the instructions carefully because you do not need to install ATM if you are running Windows XP or Mac OS 10.1.
To install the Adobe LiveMotion 2.0 Classroom in a Book fonts 1 Insert the Adobe LiveMotion 2.0 Classroom in a Book CD into your CD ROM drive. 2 Install the font files using the procedure for the version of your operating system: • Windows (other than Windows XP). Open the ATM installer files on the CD, which are located in the Fonts/ATM folder. Double-click the installer file (Setup), and follow the on-screen instructions for installing ATM and the fonts.
Windows XP. Do not use the ATM font installer to install the fonts. Instead, simply drag the fonts from the Classroom in a Book CD to your hard disk and place them in your Adobe common fonts folder (typically in C:\Program Files\Common Files\Adobe\Fonts). •
Mac OS 9. Open the Fonts folder on the CD. Double-click the ATM 4.6.1 + Fonts Installer to install the fonts.
•
Mac OS 10.1. Open the Fonts/Fonts folder on the CD. Select all of the fonts in the Fonts folder and drag them into the Library/Fonts folder on your hard disk. You can select and drag multiple fonts to install them, but you cannot drag the entire folder to install the fonts.
LM_02.book Page 3 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 3 Classroom in a Book
Copying the Classroom in a Book files The Classroom in a Book CD includes folders containing all the electronic files for the lessons. Each lesson has its own folder, and you must copy the folders to your hard drive to do the lessons. To save room on your drive, you can install only the necessary folder for each lesson as you need it, and remove it when you’re done. To install the Classroom in a Book files: 1 Insert the Adobe LiveMotion 2.0 Classroom in a Book CD into your CD-ROM drive. 2 Create a folder named LM_CIB on your hard drive. 3 Copy the lessons you want to the hard drive: •
To copy all of the lessons, drag the Lessons folder from the CD into the LM_CIB folder.
To copy a single lesson, drag the individual lesson folder from the CD into the LM_CIB folder.
•
If you are installing the files in Windows, you need to unlock them before using them. You don’t need to unlock the files if you are installing them in Mac OS. 4 In Windows, unlock the files you copied:
If you copied all of the lessons, double-click the unlock.bat file in the LM_CIB/Lessons folder. •
• If you copied a single lesson, drag the unlock.bat file from the Lessons folder on the CD into the LM_CIB folder. Then double-click the unlock.bat file in the LM_CIB folder.
LM_02.book Page 4 Thursday, May 23, 2002 10:05 AM
4 Getting Started
Additional resources Adobe LiveMotion 2.0 Classroom in a Book is not meant to replace documentation that comes with the program. Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features, refer to these resources: The Adobe LiveMotion 2.0 User Guide. Included with the Adobe LiveMotion 2.0 software, this guide contains a complete description of all features.
•
The Adobe LiveMotion 2.0 Scripting Guide. Also included with the Adobe LiveMotion 2.0 software, this guide provides details on LiveMotion 2.0’s scripting capabilities.
•
•
The LiveMotion Video Quick Start Guide, available on the application CD.
Online Help, an online version of the User Guide, which you can view by choosing Help > Contents. (For more information, see Lesson 1, “Getting to Know the Work Area.”) •
The Adobe Web site (www.adobe.com), which you can view by choosing Help > Adobe Online if you have a connection to the World Wide Web. •
Adobe Certification The Adobe Training and Certification Programs are designed to help Adobe customers improve and promote their product proficiency skills. The Adobe Certified Expert (ACE) program is designed to recognize the high-level skills of expert users. Adobe Certified Training Providers (ACTP) use only Adobe Certified Experts to teach Adobe software classes. Available in either ACTP classrooms or on site, the ACE program is the best way to master Adobe products. For Adobe Certified Training Programs information, visit the Partnering with Adobe Web site at http://partners.adobe.com.
LM_02.book Page 7 Thursday, May 23, 2002 10:05 AM
1 Getting to Know the Work Area
Before you start creating compositions with Adobe LiveMotion, you need to become familiar with the work area. The work area includes everything you need to use LiveMotion, including the Composition window, palettes, and menus. In this lesson, you’ll practice the basics of using the work area. When you’re done, you’ll be ready to begin drawing, editing, and animating your own LiveMotion compositions.
LM_02.book Page 8 Thursday, May 23, 2002 10:05 AM
8 LESSON 1 Getting to Know the Work Area
Getting started In this lesson, you’ll learn how to do the following:
• Open and save a file. • Select objects. • Move objects. • Use and rearrange palettes. • Preview compositions. • Use online Help. This lesson takes approximately 30 minutes to complete. This lesson will get you started in LiveMotion by showing you around the work area. You’ll explore the menus and palettes, the viewing features, and the basics of getting a file started. Your very first tasks in LiveMotion will be to open LiveMotion, open a file, and reset the preferences.
Opening LiveMotion To get started exploring, you’ll open LiveMotion. 1 Navigate to the location where you’ve installed LiveMotion, and open the LiveMotion folder. 2 Choose Programs > Adobe LiveMotion from your system Start menu (Windows), or double-click the LiveMotion icon (Mac OS) to start the program.
LM_02.book Page 9 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 9 Classroom in a Book
Opening a file Now you’ve opened LiveMotion, but you do not yet have a file to work with. Next you’ll open a file and save it to your desktop. This is the file you’ll use for the rest of the lesson. Choose File > Open and open the 01Start.liv file from the Lessons/Lesson01 folder. As you work on this lesson, you’ll overwrite the start file. If you need to restore the start file, copy it from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3.
Resetting preferences Preferences help LiveMotion remember how you like the program to look and behave. When you install LiveMotion, some default preferences are included. As you work, the preferences change. You’ll remove these new preferences so that LiveMotion looks and acts exactly as described in this lesson. Choose Window > Reset To Defaults to restore all of the palettes to their default settings.
LM_02.book Page 10 Thursday, May 23, 2002 10:05 AM
10 LESSON 1 Getting to Know the Work Area
Using the tools The tools in the toolbox are essential to creating, editing, and viewing your LiveMotion compositions. The tools are “sticky.” Once you select a tool, LiveMotion stays in that tool mode until you select another one. It’s easy to switch between tools using their keyboard shortcuts.
(V) Selection (U) Drag selection (M) Rectangle (L) Ellipse (P) Pen
Tools
Subgroup selection (A) Layer offset (O) Rounded rectangle (R) Polygon (N) Pen selection (S)
(T) Type
Text field (Y)
(C) Crop
Transform (E)
(K) Paint bucket (H) Hand
Eyedropper (I) Zoom (Z)
Current fill color Document background color Color scheme Edit mode
Preview mode (Q)
The tools and their keyboard shortcuts
1 Select a tool by clicking on its icon in the toolbox. The selected tool icon is depressed in the toolbox. Notice that if you leave the pointer over a tool icon, a small box appears showing the name of the tool and its keyboard shortcut. 2 Select a new tool by pressing its keyboard shortcut. The Toolbox keyboard shortcuts use just the letter keys (without any modifiers, such as Alt, Command, Shift, or Option). Next you’ll use the selection tool to select an object. 3 Select the selection tool ( ) from the toolbox. The Composition window is the area within the main LiveMotion window that contains the white drawing area, or canvas.
LM_02.book Page 11 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 11 Classroom in a Book
4 In the Composition window, click various objects. You can see a blue outline appear around selected objects. To select more than one object at a time, hold the Shift key while you click.
Once an object is selected, you can resize, move, and edit it using the tools and palettes.
Viewing the composition There are several ways to view your composition in LiveMotion. You can zoom in and out of it, and use the hand tool to move to a new area. Now, you’ll practice working with view commands. 1 Click the background of the composition to make sure no objects are selected, or choose Edit > Deselect All to deselect all objects in the composition.
2 Now you’ll resize the Composition window.
• In Windows, position the pointer over one of the Composition window’s corners. The pointer turns into a double-headed arrow; drag to resize the window. • In the Mac OS, position the pointer over the lower right corner of the Composition window; drag to resize the window.
LM_02.book Page 12 Thursday, May 23, 2002 10:05 AM
12 LESSON 1 Getting to Know the Work Area
3 Make the window bigger and notice that a gray area appears around the canvas.
The canvas becomes the visible area of your composition when it is exported. You can draw and store objects in the gray area outside the canvas, although they will not be visible until they are on the canvas. This is useful if you want to bring objects in from off-screen during animations, or keep them to the side for later use. To see objects that are positioned outside the edge of the canvas, choose View > Objects Off Canvas. This option shows just the outlines of objects. 4 Choose View > Zoom In, and notice how the Composition window changes. The title bar of the Composition menu displays the current magnification level, changing from 01Start.liv @ 100% to 01Start.liv @ 200%. 5 Choose View > Zoom Out to return to the original composition size. 6 In the toolbox, select the zoom tool ( ). Click in the Composition window twice to expand the view to 300%.
LM_02.book Page 13 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 13 Classroom in a Book
7 Select the hand tool ( ) from the toolbox. Drag to move the composition in the Composition window.
8 Select the zoom tool again. 9 Press Alt (Windows) or Option (Mac OS) and notice that the plus sign inside the magnifying glass changes to a minus sign. The zoom tool can now be used to zoom out of the composition instead of into it. 10 With Alt/Option still pressed, click once in the Composition window to change the magnification level to 200%. 11 Choose View > Actual Size to return the composition to its normal size.
Editing composition settings When you open a new file in LiveMotion, the Composition Settings dialog box opens so you can set initial composition properties. You can also open the dialog box and change settings for files that are not new. Now, you will go to the dialog box and edit the Composition Settings. 1 Choose Edit > Composition Settings.
2 Enter 450 for Width and 200 for Height. This will change your canvas size to 450 pixels by 200 pixels.
LM_02.book Page 14 Thursday, May 23, 2002 10:05 AM
14 LESSON 1 Getting to Know the Work Area
3 Click the Frame Rate menu to see the frame rate options. This controls how quickly your animations play. You will not be animating anything in this lesson, so you can keep the default rate. 4 Click OK. You can see that your composition’s canvas has enlarged to show more of the composition.
Using the rulers, grid, and guides LiveMotion has rulers, a grid, and guides to help you place and arrange objects more exactly. By default, they are not visible. In this section, you’ll turn on all three features and use them to reposition an object. Rulers appear along the top and left sides of the Composition window. The rulers are divided into 100-pixel sections. 1 Choose View > Show Rulers. The grid is a set of lines that appears over your composition. Your objects can be created, moved, and edited below the grid. 2 Choose View > Show Grid.
3 Choose View > Snap to Grid. This feature ensures that your objects line up along the grid. 4 Select the selection tool ( ) and select one of the squares in the upper left of the composition.
LM_02.book Page 15 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 15 Classroom in a Book
5 Drag the square in the Composition window. Notice that the square jumps to the nearest grid line.
6 Choose View > Snap to Grid again to deselect it. Try moving the square again and notice how its behavior changes. The square will not jump to the nearest grid line. 7 Choose Edit > Preferences, and change the Grid settings. Enter 40 in the Gridlines every text box and 10 in the Subdivisions text box. Click OK and notice that the grid becomes larger.
8 Choose View > Show Grid again to hide the grid. You can use guides to position objects along lines that aren’t on the grid.
LM_02.book Page 16 Thursday, May 23, 2002 10:05 AM
16 LESSON 1 Getting to Know the Work Area
9 Choose View > Show Guides. 10 Position the pointer over the ruler at the top of the Composition window. Drag down to pull out a guide.
11 Drag from the ruler on the left-hand side of the Composition window to pull out a horizontal guide. 12 Drag the guides back off the sides of the Composition window to remove them.
Working with palettes Palettes help you monitor and modify artwork. By default, they appear in stacked groups. To show or hide a palette as you work, choose the appropriate palette name in the Window menu. If a palette’s name has a check mark next to it, the palette is displayed at the front of its group; if none of the palette names in a group are checked, the entire group is hidden. You can reorganize your work space in various ways. Try these techniques:
• To hide or display all open palettes and the toolbox, press Tab. To hide or display the palettes only, press Shift+Tab. • To make a palette appear at the front of its group, click the palette’s tab. • To move an entire palette group, drag its title bar.
LM_02.book Page 17 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 17 Classroom in a Book
• To rearrange or separate a palette group, drag a palette’s tab. Dragging a palette outside of an existing group creates a new group.
• To move a palette to another group, drag the palette’s tab to that group. • To display a palette menu, click the triangle in the upper right corner of the palette.
• Palettes that can be resized may have three ridges (Windows, except NT and 2000), or two rectangles (Mac OS), in their lower right corners. To change the height of a resizable palette, position the cursor over the palette’s lower right corner and drag.
Using the palettes Now you’ll practice changing a color by entering values into text boxes, dragging sliders, and selecting an option in the Color palette. To begin, you’ll enter values into text boxes. 1 Select the “LiveMotion” text. 2 Go to the Color palette and choose RGB View from the palette menu on the top right corner of the palette, if it is not already chosen.
LM_02.book Page 18 Thursday, May 23, 2002 10:05 AM
18 LESSON 1 Getting to Know the Work Area
3 Enter new values into the R, G, and B text boxes until you have a new color you like.
When you enter a value into a text box, you must press Enter (Windows) or Return (Mac OS), or select another text box, for the change to take effect. While following the lessons in this book, be sure to use one of these techniques to enter values when you are asked to enter a value into a text box. Next, you’ll change the color using the sliders. 4 Adjust that color by dragging the sliders underneath the color bars. Notice that the values in the text boxes change as you drag the sliders. 5 In the toolbox, select the background color box. 6 In the Color palette, position the pointer over the color bar at the bottom of the palette. Notice that the pointer turns into the eyedropper tool. 7 Click the eyedropper tool over a color. The composition background changes to the color. 8 In a different palette, you might use the pointer to move arrows up and down, or select options represented by a number of icons. Finally, you’ll use the pointer to select an option (in this case, a color) from the palette.
LM_02.book Page 19 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 19 Classroom in a Book
Previewing in LiveMotion You can preview your compositions within LiveMotion to get an idea of how they will look when exported, and what your file size will be. The Preview mode replicates the way your composition will look and act when it is exported; the palettes disappear, and you can see a cursor move and text appear. 1 Click the Preview mode button ( 2 Click the Edit mode button (
) in the toolbox.
) in the toolbox to leave Preview mode.
3 Choose View > Preview Export Compression. 4 Select the front saucer in the composition. Notice that the bounding box is red; this indicates that you are in Preview Export Compression mode. The status bar is located at the bottom left of the active window (or program window in Windows NT and 2000). The status bar displays important information about the objects in your composition, such as file size and object type. 5 Look at the status bar. The number on the left is the file size of your composition. The number on the right shows the size of the selected object.
The status bar shows to what format the saucer will be exported; in this case it is a bitmap object ( ). Objects can also be exported as vector objects ( ). If you have more than one object selected, the status bar will indicate if the objects will be exported as vectors, bitmaps, or a combination of both. 6 Choose View > Preview Export Compression to exit Preview Export Compression mode. Click anywhere in the background to deselect any selected objects.
LM_02.book Page 20 Thursday, May 23, 2002 10:05 AM
20 LESSON 1 Getting to Know the Work Area
Previewing in a browser Now you’ve tried the Preview mode, but there is another way to preview your work from LiveMotion. You can also look at your work in the browser of your choice. This shows you exactly how your composition will look when it is completed and viewed online. 1 Choose File > Preview In > Netscape Navigator / Internet Explorer. (Select a browser.) 2 View your composition in the browser. 3 Quit the browser.
Using online Help An extensive online Help system is included with LiveMotion. You can use online Help to look up a topic while working in a file. You can find a topic in Help by looking through the Contents, using the Index, or conducting a search. Here, you’ll use the Help system to look up the same topic three different ways. 1 Choose Help > LiveMotion Help to open the Help system. First, you’ll find the topic using the Contents. 2 In the left hand navigation bar, select Working with Objects. 3 From the list of contents to the right, select Cutting, copying, and pasting objects. Next, you’ll find the topic using the Index. 4 Choose Index from the navigation bar at the top of the page. 5 Select P from the list of letters. 6 Click the 1 next to Paste command in the list of topics. Finally, you’ll find the topic using the Search function. 7 Choose Search from the navigation bar at the top of the page. 8 Enter Paste Command in the text box and click Search. A list of related topics is displayed under the text box. 9 Quit the browser.
LM_02.book Page 23 Thursday, May 23, 2002 10:05 AM
2 Drawing Basic Shapes
You can create interesting compositions with LiveMotion using even the most basic shapes. In fact, mastering the tasks you can do with basic shapes is a great place to start exploring what you can do with any object. In this lesson, you’ll use simple shapes, and add layers and effects to create a complete logo.
LM_02.book Page 24 Thursday, May 23, 2002 10:05 AM
24 LESSON 2 Drawing Basic Shapes
Getting started In this lesson, you’ll learn how to do the following:
• Create shapes and layers. • Create text objects. • Add effects and textures to shapes. • Change the size, color, and opacity of shapes. • Use various combine commands. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson02 folder onto it. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using LiveMotion to view a copy of the finished composition. 1 In Adobe LiveMotion, choose File > Open and open the 02End.liv file from the Lessons/Lesson02 folder. A logo made of a globe and a house shape is displayed.
2 Choose File > Close.
LM_02.book Page 25 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 25 Classroom in a Book
Starting a new file In this first part of the lesson, you’ll begin a new file for your logo. 1 Choose File > New Composition, and click OK in the Composition Settings dialog box. 2 Choose File > Save As, name the file with the .liv extension, and click Save. You can open the file 02End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. It may be helpful to turn on the rulers and grid during this lesson, to be able to line up objects more easily.
Creating a shape The first part of the logo is a circle with a globe on top of it. To make the circle, you will create a simple shape, change it, and add color and different effects.
Drawing the basic shape Although the logo uses a circle, you’ll start the logo by making a square. You’ll then use the Properties palette to change the object’s shape. 1 Select the rectangle tool ( ) in the toolbox. In the Composition window, drag the pointer to draw a rectangle.
LM_02.book Page 26 Thursday, May 23, 2002 10:05 AM
26 LESSON 2 Drawing Basic Shapes
2 Select the selection tool ( ) in the toolbox. 3 Choose Window > Transform, or click the palette’s tab to display the Transform palette. In the palette, enter 144 in the width ( ) and height ( ) text boxes to make a square.
Using the Transform palette to resize the rectangle
4 Choose Window > Color, or click the palette’s tab to display the Color palette. You can choose a green for the square by selecting a color from the palette with the eyedropper tool, or by dragging the sliders. If you want to use the same color we’ve used in this example, choose RGB View from the Color palette menu, and enter an R value of 140, a G value of 245, and a B value of 80.
LM_02.book Page 27 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 27 Classroom in a Book
The 3D palette lets you apply 3D effects to your objects, and adjust the effects. 5 Choose Window > 3D, or click the palette’s tab to display the 3D palette. Choose Emboss from the menu to make your square look like it’s raised slightly from the canvas. Keep the default values of 1 for Depth and 1 for Softness.
You can add other interesting effects to your objects using the Distort palette. To open the Distort palette, choose Window > Distort. 6 Choose Window > Properties, or click the palette’s tab to display the Properties palette. 7 Choose Ellipse from the menu to turn the square into a circle. This feature is useful for modifying shapes even after you have made changes to them.
Now you have a green, embossed circle. 8 Choose File > Save to save your work.
LM_02.book Page 28 Thursday, May 23, 2002 10:05 AM
28 LESSON 2 Drawing Basic Shapes
Placing an object into the composition You’ll now use the Place command to add an Illustrator file to the logo. The Place command adds new files to your composition. It is especially useful for incorporating Adobe Photoshop and Illustrator files into your compositions; these files can be added and still retain all their original layers, as well as be edited in their original programs without having to be replaced in LiveMotion. 1 Choose File > Place. Navigate to the globe.ai file in the Lesson02 folder, and click Open. A blue globe is placed in the middle of the Composition window. 2 Shift-click the green circle to select it as well as the globe. 3 Choose Object > Align > Centers to line up the centers.
LM_02.book Page 29 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 29 Classroom in a Book
Adding layers and texture In this section, you’ll join the two objects into a single object, and then apply layers and texture. 1 With the globe and the green circle still selected, choose Object > Combine > Unite with Color. The two objects are combined into one object, but each retains its own color. 2 Choose Window > Object Layers, or click the palette’s tab to display the Object Layers palette. Click the New Layer button ( ) to create a second layer for the newly combined object.
3 Make sure the second layer is selected in the Object Layers palette; then go to the color palette and change the layer’s color to gray. The gray we used has R, G, and B values of 150.
4 Choose Window > Layer, or click the palette’s tab to display the Layer palette. Change the layer’s width to 6 using the slider or text box. You will see the edge of the second layer emerge from behind the first. Currently, both layers have 100% opacity, which means they are completely opaque.
LM_02.book Page 30 Thursday, May 23, 2002 10:05 AM
30 LESSON 2 Drawing Basic Shapes
5 Choose Window > Opacity, or click the palette’s tab to display the Opacity palette. Change the Object Layer Opacity to 75 to make the second layer more transparent.
6 Click the New Layer button in the Object Layers palette to add a third layer to the object. With Layer 3 still selected in the Object Layers palette, go to the Layer palette and enter 10 for the width of the third layer. 7 Choose Window > Textures or click the palette’s tab to display the Textures palette. Textures are repeated patterns that can be used in LiveMotion compositions as backgrounds or fills. The Textures palette provides a range of textures. In the next step, you will add a new texture (from the Lesson02 folder) to the palette. 8 Select New Texture from the bottom right of the Textures palette. In the Open dialog box, navigate to the Lesson02 folder. At Files of type, select GIF, then select realbadreception and click Open. At the Name dialog box, click OK. 9 Select Name View from the palette menu at the top right of the Textures palette. Click the realbadreception texture, and click the Apply Texture button to apply the texture to the third layer. You can also apply a texture by double-clicking the texture in the Texture palette.
LM_02.book Page 31 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 31 Classroom in a Book
10 Select Layer 1 in the Object Layers palette. 11 In the Opacity palette, change the Object Layer Opacity to 75. You can see the texture on the bottom layer showing faintly through the second layer. 12 Choose File > Save.
Object layers Layers in LiveMotion are parts of individual objects, not the entire composition. An object is made up of 1 to 99 layers, with each layer the shape of that object. When you first create an object, it has just a single layer. You can then add, delete, reorder, and offset object layers at any time. For example, a layer can be added to an object, and then offset to simulate a shadow for the object. Attributes can be applied to any layer individually. Attributes include color, opacity, gradients, and 3D and distortion effects. You can even apply an image to texturize a layer. By applying different attributes to each layer, you can create a variety of effects and create complex objects. For example, to create a button out of a simple geometric object, you might give it three layers, and apply different effects to each layer. You could emboss the top layer and fill it with a texture. You could make the second layer wider and fill it with a color to give the effect of an outline around the button. And you could offset the third layer, and fill it with semitransparent gray to simulate a shadow for the button. Object layers can also be animated just like any other object attribute. You can make layers grow, disappear, and change over time in an animation.
Adding an outline Any shape you make can have a fill or just an outline. A filled object is solid. It can be filled with a color, an image, or a texture. An outlined object is transparent, except for a strip of color, image, or texture that defines its shape. To emphasize the globe, you will add a simple black outline around it.
LM_02.book Page 32 Thursday, May 23, 2002 10:05 AM
32 LESSON 2 Drawing Basic Shapes
1 Select the ellipse tool (
) from the toolbox, and drag to create an ellipse.
2 In the Transform palette, enter 144 in the width ( a circle of the same size as the globe.
) and height ( ) text boxes to make
3 With the new circle still selected, select Outline in the Properties palette. 4 Enter 8 for the width of the outline. The width is measured in quarter-pixels to allow for very fine lines, so your line will be 2 pixels wide.
LM_02.book Page 33 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 33 Classroom in a Book
5 In the Color palette, change the outline’s color to black.
6 Select the selection tool ( ) from the toolbox. 7 Shift-click to select the globe and the outline, and choose Object > Align > Centers. The globe now has a thin black outline. 8 Choose Object > Group to group the globe and the outline.
9 Choose File > Save.
LM_02.book Page 34 Thursday, May 23, 2002 10:05 AM
34 LESSON 2 Drawing Basic Shapes
You’ve finished making the first part of the logo. Next, you’ll create the house shape that completes it.
Stroke and fill By adding a lower object layer that is wider than the top layer, you can create a stroke and fill effect similar to the Adobe Illustrator stroke and fill effect. LiveMotion provides three other ways to achieve this effect. You can create a solid object, and another that is the same size, and choose the Outline option in the Properties palette for the second object. Place the outline object over the solid one so that it looks like the stroke of the object. Then choose Object > Combine > Unite with Color to combine the two objects into one. You can also create a filled object that is the size you want the final object to be, then another one that is slightly smaller. Arrange the smaller object on top of the larger one so that it becomes the fill, then choose Object > Combine > Unite with Color to combine the two objects into one. Objects with more than one layer, and objects that are combined using a Combine command, are exported as bitmaps. You can create a stroke and fill effect but have your objects export as vector objects. To do this, create a solid object and an outline object, and choose Object > Group to create the stroke and fill effect.
Creating the house To make the circle, you drew a new shape and then added elements to it. To make the house, you will draw a new rectangle and a new triangle, combine the two new objects, and then save the modified shape to the Library. You will also use a different combine command to cut a window out of the house.
Making the house shape The house is formed from a rectangle and a triangle. In this section, you will create the house using the two new shapes. 1 Select the rectangle tool ( ), and draw a rectangle in the Composition window. Select the selection tool ( ).
LM_02.book Page 35 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 35 Classroom in a Book
2 In the Transform palette, enter a width ( ) of 125 and a height ( ) of 115 for the rectangle. In the Properties palette, select Fill to make the rectangle solid. 3 Select the polygon tool, and draw a triangle in the Composition window. Set the Sides to 3 with the Properties palette. Select the selection tool ( ). 4 Once the triangle is drawn, select Path from the dropdown menu in the Properties palette. This will convert the object from a polygon into a path, so that the object’s bounding box more accurately follows the object’s dimensions.
In the Transform palette, increase the size of the arrow to a width ( ) of 78 and a height ( ) of 190. Enter 90 into the Rotation field. This will rotate the arrow counterclockwise by 90 degrees. (Note that the width and height dimensions reflect the object’s original orientation.)
5 Drag the triangle on top of the rectangle so that it makes a roof above the rectangle.
LM_02.book Page 36 Thursday, May 23, 2002 10:05 AM
36 LESSON 2 Drawing Basic Shapes
6 Select both objects, and choose Object > Combine > Unite. Just like the globe and the circle, the two shapes are now a single shape.
7 Choose File > Save.
Add a window and effects Now you’ll create a window in the house. When the house is positioned later, the globe will show through the window. 1 Select the rectangle tool ( ), and draw a rectangle in the Composition window. 2 In the Transform palette, enter 40 for the width (
) and height ( ).
3 Choose a new color for the window from the Color palette, so you can see the window as you position it. 4 Select the selection tool ( ). Place the square in the upper left corner of the house. 5 Shift-click to select the square and the house, and choose Object > Combine > Minus Front.
LM_02.book Page 37 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 37 Classroom in a Book
This action combines the two objects into a new one and makes an empty space in the new object where the top object was. In this case, it creates a small open area where the square was, causing a window effect. You can see through this space to the area beneath.
Now you’ll practice a different way of selecting color while changing the color of the house. The eyedropper tool lets you select a color from anywhere in LiveMotion, and even on your screen outside of LiveMotion, and apply it to a selected object. 6 With the house still selected, select the eyedropper tool (
).
7 In the Composition window, click the globe’s gray border (second layer) with the eyedropper. The house will turn the same color gray as the layer.
8 In the 3D palette, choose Cutout from the menu. Enter 5 for Depth and 7 for Softness. 9 Choose File > Save.
LM_02.book Page 38 Thursday, May 23, 2002 10:05 AM
38 LESSON 2 Drawing Basic Shapes
Resize and align the house In the final steps of making the logo, you’ll make the house smaller and drag it into its final position. 1 Select the selection tool ( ). 2 Hold down the Shift key and drag the house inward toward its center until the width is 104 (you can see the width in the Transform palette). By holding the Shift key down as you drag, the house’s proportions stay the same. 3 Drag the house so that it overlaps the globe, and the left tip of the roof is just to the right of the middle of the globe.
4 Choose File > Save. You’ve now completed the logo.
LM_02.book Page 39 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 39 Classroom in a Book
Saving to the Library The Library provides you with shapes to use in your compositions; more importantly, it is a place to save objects that you want to use again. Because a logo is something that you will want to use often, you’ll save it to the Library so that it is readily available whenever you use LiveMotion. 1 Choose Edit > Select All to select the globe, outline, and house. 2 Choose Object > Group. 3 Drag the newly grouped logo to the Library. When the logo is positioned over the Library so it can be saved, two small boxes, one with a plus sign, will appear next to the pointer (Windows), or the Library palette will be highlighted with a blue outline (Mac OS).
4 In the Name dialog box, type Logo, and click OK.
Exporting the finished composition To view your composition in a Web browser, you need to export it to a Web file format. When you export the file, LiveMotion exports to a Web file format automatically. The format it uses depends on the composition you are exporting. Files with animation are exported to the Flash file format (SWF), but LiveMotion also generates an HTML file that plays the animation. You can also change the export settings to generate file formats other than SWF, such as GIF, Photoshop, or PNG. However, with formats other than SWF, you lose any sound effects and advanced interactivity in your composition. In this final part of the lesson, you’ll export the file you made and view it in a Web browser.
LM_02.book Page 40 Thursday, May 23, 2002 10:05 AM
1 Choose File > Export. 2 Specify a filename and navigate to the Lesson02 folder on your hard drive. 3 Click Save to save the file. 4 Open the HTML file in your Web browser to preview it. To change the export settings, choose File > Export Settings. For complete information about exporting your composition to Web file formats, see Lesson 15, “Exporting.”
LM_02.book Page 43 Thursday, May 23, 2002 10:05 AM
3 Working with Type
Type is an important element of your Web page. It adds information as text, and visual interest as part of the design. In Adobe LiveMotion, text can be manipulated like any other object. It can be edited at any time while retaining its attributes. In this lesson, you’ll explore the uses of type by creating and altering it in various ways.
LM_02.book Page 44 Thursday, May 23, 2002 10:05 AM
44 LESSON 3 Working with Type
Getting started In this lesson, you’ll learn how to do the following:
• Use the type tool. • Create, save, and apply a style. • Break apart text. • Create a group mask. • Edit text. • Change the alignment of text. • Use the Combine commands. • Use Edit Original. This lesson takes approximately 60 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson03 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished composition. 1 Start a Web browser, such as Netscape Communicator or Microsoft Internet Explorer. 2 Use the browser to open the file 03End.html from the Lessons/Lesson03 folder.
LM_02.book Page 45 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 45 Classroom in a Book
The end file shows what you will create in this lesson. It is a flyer for a club called WAREHOUSE. Both text and photographs are incorporated into its design.
3 Close the file.
Opening the file In this first part of the lesson, you’ll open the start file. 1 Start Adobe LiveMotion. 2 Choose File > Open, and open the 03Start.liv file from the Lessons/Lesson03 folder. You can open the file 03End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. The start file includes partial art for the flyer: two background photographs stacked on top of each other, and a smaller photograph in the upper right corner of the composition.
LM_02.book Page 46 Thursday, May 23, 2002 10:05 AM
46 LESSON 3 Working with Type
Using text as a mask A mask is a transparent object that lets you see other objects that are below it and within its boundaries. You’ll layer one object over another so the bottom object will be the background, and the top object is what will show through the mask when you are done. The mask itself is a third object above both of the other objects. The start file has two pictures of the warehouse with one picture sitting on top of the other. The bottom picture will be the background. The top picture will be the object that shows through the mask. (The top picture has been cropped to make it easier to manipulate.) You’ll create the mask from text. The Timeline lists all of the objects in a composition. Choose Timeline > Timeline/Composition Window to display the Timeline.
Creating the text Throughout this lesson, you will be using the type tool to add type to the composition. In this step, you will make the first text object, which will be used as the mask in the next step, and set the text’s properties. 1 Select the type tool (
) from the toolbox.
2 Set the insertion point at the far left of the composition by clicking the pointer. Wherever you begin typing with the type tool becomes the starting point for your text. You can always reposition text once it’s created. 3 Select a font that’s easy to read from the Properties palette (we used Myriad Bold), choose a font size of 60 from the Size menu, and type WAREHOUSE.
LM_02.book Page 47 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 47 Classroom in a Book
4 Choose the selection tool ( ), and move the text so that it is directly below the lighter colored warehouse picture on the right side of the composition.
Making the mask Now you’ll finish creating the mask by grouping the text and the top image, then using the Top Object Is Mask command. The text becomes the shape that you see the top image through, and the bottom image in the file becomes the background for the composition. 1 Select WAREHOUSE and then choose Object > Convert Into > Path to convert the text into a path object. 2 Hold down the Shift key and select the text you just created as well as the background image. 3 Choose Object > Group. 4 With the new group still selected, choose Object > Top Object Is Mask. Notice that the placed image now appears only within the boundaries of the WAREHOUSE text.
5 Click outside the composition area to deselect the group. 6 Choose File > Save to save your work.
LM_02.book Page 48 Thursday, May 23, 2002 10:05 AM
48 LESSON 3 Working with Type
Working with a style Now you’ll create, save, and apply a style for your text. LiveMotion styles provide a convenient way to create a comprehensive set of attributes for any object. A style is a set of layers, effects, animation, even scripts that can be applied to any object. The Styles palette comes with a group of premade styles that you can use. You can also create your own styles by modifying objects, and save your own styles by adding them to the Styles palette.
Creating a style You’ll add layers to the text and then modify those layers to create your new style. You’ll modify an object using several methods that you learned in the previous lessons, including changing color and opacity. 1 Select the type tool (
) and click in the bottom left corner of the composition.
Notice that Properties palette displays the specifications of the last text you typed. 2 Set the point size to 18 with the Properties palette, and type ambient. 3 Choose the selection tool ( ). With the text still selected, choose Window > Object Layers or click the palette’s tab to display the Object Layers palette. Click the New Layer button ( ) to add a new layer to the text object. 4 Choose Window > Layer or click the palette’s tab to display the Layer palette. Enter 2 for Width and 6 for Softness. 5 Choose Window > Opacity or click the palette’s tab to display the Opacity palette. Change the Object Layer Opacity to 33.
LM_02.book Page 49 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 49 Classroom in a Book
Saving the style You’ve added to your text and created a style for it. In the last part of this section, you’ll use this style for another object. When you create a style that you want to use for other objects, you can save it in the Styles palette so it will be handy when you’re ready to use it again. 1 Choose Window > Styles or click the palette’s tab to display the Styles palette. 2 Select the selection tool ( ). Click the New Style button ( ) in the Style palette. You can also save a style by selecting your text and dragging it onto the palette. When the text is positioned over the palette so it can be saved, two small boxes, one with a plus sign, will appear next to the pointer (Windows), or the Styles palette will be highlighted with a blue outline (Mac OS). 3 Name your style Type in the Name dialog box, then click OK. 4 Select Layers because you want to retain the layers that are part of the style. 5 Be sure Ignore color of first layer is selected. This means that whatever object you apply the style to will retain its original color. The rest of the boxes in the Name dialog box are grayed because your style does not contain animation, states, or scripts.
Dragging the style onto the Styles palette, choosing options for saving the style
6 Click OK to save the style.
LM_02.book Page 50 Thursday, May 23, 2002 10:05 AM
50 LESSON 3 Working with Type
Applying the style Now you’ll apply your style to new text. 1 Select the type tool ( ), click the bottom center of the composition, and type hip-hop. Click again, and type trance. Click once more, and type house. 2 Choose the selection tool from the toolbox. Select “hip-hop,” “trance,” and “house.” 3 In the Styles palette, choose Name View from the palette menu. 4 Select the Type style you created, and click the Apply Style button ( ).
5 Drag “ambient” to the bottom left corner of the composition. Drag “house” to the bottom right corner of the composition. 6 Select “ambient,” “hip-hop,” “trance,” and “house.” Choose Object > Align > Bottom. 7 With the objects still selected, choose Object > Distribute > Horizontal. They are spaced evenly along the bottom of the composition.
8 Choose File > Save.
LM_02.book Page 51 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 51 Classroom in a Book
Changing text alignment Usually your text reads from left to right across the page. But you can also change the alignment of your text so that it reads from top to bottom or bottom to top. 1 Select the type tool (
), and click at the top of the composition.
2 Click the Align text vertically and Top align text buttons in the Properties palette. Select the font (we used Myriad Roman), set the font size to 14, and type 18 Park Street. 3 Select the selection tool ( ). Drag “18 Park Street” so that it is over the light strip just to the left of the smaller warehouse picture. 4 Shift-click the smaller warehouse picture and choose Object > Align > Top to line up the text.
Combining shapes and text In the previous lesson, you combined multiple objects into single ones. You can do the same thing with text. Here you’ll create a logo for WAREHOUSE by combining a circle and a “w.” 1 Select the ellipse tool (
).
2 In the Composition window, drag to create an ellipse in the upper left of the composition. 3 Choose Window > Transform or click the palette’s tab to display the Transform palette. Enter 67 for the width ( ) and height ( ) to create a circle. Enter 14 for X, and 18 for Y to set the circle’s position. 4 Select the type tool ( ). In the Properties palette, set the font to Adobe Garamond Semibold Italic, the font size to 65, and the alignment to Horizontal. Click near the circle and type w. 5 Select the selection tool ( ), and select the “w” and the circle. 6 Choose Object > Combine > Exclude.
LM_02.book Page 52 Thursday, May 23, 2002 10:05 AM
52 LESSON 3 Working with Type
The Exclude command joins the two selected objects into one object, but any areas where the two original objects overlap are made transparent so that the background shows through.
7 Select the subgroup selection tool ( ), and click the “w.” Move the “w” so that it is in the center of the circle. You can see that the “w” is now transparent because of the Exclude command. Combining text with another object will result in a bitmap object upon SWF export. To avoid this, select the text, then choose Object > Convert Into > Path before combining. 8 Choose the selection tool, and select the circle. 9 In the Opacity palette, change the Object Opacity to 50.
10 Choose File > Save.
LM_02.book Page 53 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 53 Classroom in a Book
Breaking text apart The Break Apart Text command lets you create words, then separate them into their component letters. Each letter becomes a separate object that can be moved, edited, and animated on its own. This saves you the difficulty of creating and formatting independent characters when you have several letters that you want to use separately. 1 Select the type tool (
), and click in the Composition window.
2 In the Properties palette, set the font to Myriad and the font size to 18. Type friday into the text area. 3 Select the selection tool ( ). Choose Object > Convert Into > Objects. Each letter is now selected separately rather than as part of the entire word.
4 Now select the selection tool ( ), and move each letter onto one of the six gray circles to the left of the smaller warehouse picture. Arrange them so that they spell out “fri” on the top row, and “day” on the bottom row. Because the letters are small and close together, you may want to zoom into the composition to move them more easily. 5 Select the top row of letters and choose Object > Align > Bottom. Do the same with the bottom row of letters. 6 Select the “f ” and its circle. Choose Object > Combine > Minus Front to make the “f ” transparent.
LM_02.book Page 54 Thursday, May 23, 2002 10:05 AM
54 LESSON 3 Working with Type
7 Choose Window > Color or click the palette’s tab to display the Color palette. Change the circle from gray to black.
Using Edit Original The Edit Original command allows you to quickly edit imported artwork from Illustrator and Photoshop in its native application, without altering the original. Here, you’ll apply a Photoshop filter to the smaller warehouse picture to make it more abstract. 1 Select the smaller warehouse picture. (Be sure to select the picture itself and not the black rectangle behind it.) 2 Choose Edit > Edit Original. Photoshop launches a copy of the picture. 3 In Photoshop, choose Filter > Artistic > Palette Knife. 4 In the Palette Knife dialog box, enter 8 for Stroke Size and 3 for Stroke Detail. 5 Click OK to apply the filter. Choose File > Close to close the file in Photoshop, then click Save in the subsequent dialog box. The filtered image will appear in LiveMotion.
LM_02.book Page 55 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 55 Classroom in a Book
Using the Adjust palette Now you’ll adjust the look of the picture using the Adjust palette. The Adjust palette lets you modify the light effects of an object, such as its brightness and contrast. 1 With the smaller warehouse picture still selected, choose Window > Adjust or click the palette’s tab to display the Adjust palette. 2 Enter a Brightness value of -32, a Contrast value of 53, a Saturation value of 108, and a Tint value of 5.
3 Choose File > Save.
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson03 folder on your hard drive. 2 Open a Web browser; then locate and open the 03Start.html file you just exported to preview the finished file.
LM_02.book Page 59 Thursday, May 23, 2002 10:05 AM
4 Working with the Pen Tool
In previous lessons, you’ve learned how to draw simple shapes using the shape tools. For more complicated shapes, you can use the Adobe LiveMotion pen tool. The pen tool lets you draw straight lines, curves, and corners, which you can add to and edit while you draw. You’ll practice drawing with the pen tool first by transforming a rectangle, then by drawing a bird.
LM_02.book Page 60 Thursday, May 23, 2002 10:05 AM
60 LESSON 4 Working with the Pen Tool
Getting started In this lesson, you’ll learn how to do the following:
• Draw straight lines. • Draw curved lines. • Add and remove control points. • Convert smooth points to corner points and vice versa. • Change shapes to paths. • Create closed paths. • Adjust lines. • Use the fill and outline features. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson04 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished composition. 1 Start a Web browser, such as Netscape Communicator or Microsoft Internet Explorer. 2 Use the browser to open the file 04End.html from the Lessons/Lesson04 folder. The composition is a drawing of a bird, created with the pen tool.
2 3
1
4
5
6 8
7
12
10 11
9
LM_02.book Page 61 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 61 Classroom in a Book
Opening the file In this first part of the lesson, you’ll create a new file. 1 Start Adobe LiveMotion. 2 Choose File > New Composition to open a new untitled document. Click OK in the Composition Settings dialog box. 3 Choose File > Save As, name the file with the .liv extension, and click Save. 4 Choose Window > Reset To Defaults to restore the palettes to their default settings.
Modifying shapes with the pen tool One way to use the pen tool is to start with a simple geometric shape, and modify it into something new. You can turn any shape into a path, which is a series of lines strung together to create a shape. You can then use the pen tool to add and remove control points that shape the path. Here you’ll make a rectangle, and turn it into a star.
Changing a shape to a path When you first draw a shape using a shape tool, the shape is a single unit that can’t be modified. Changing the shape into a path transforms the shape into a group of lines that can be changed. 1 Select the rectangle tool ( ), and shift-drag in the Composition window to create a square. 2 Select the selection tool ( ), and select the square. 3 Choose Window > Properties, or click the palette’s tab to display the Properties palette. Choose Path from the menu. 4 Select Outline, and enter 10 for the Width.
LM_02.book Page 62 Thursday, May 23, 2002 10:05 AM
62 LESSON 4 Working with the Pen Tool
This step turns your shape into a thin line drawing. Fill creates a solid shape as you draw, and makes it more difficult to see the line segments. Outline width is measured in quarter-pixels, so your outline is 2.5 pixels wide.
Adding control points to the path Control points define the beginning and end of a line. They also let you add corners to your path. You’ll add control points along the path with the pen tool. 1 Select the pen tool ( ). 2 Position the pen tool over the middle of the top line in the path. The “x” next to the pen tool changes to a plus sign ( ) when it is over the path, indicating that you can add a control point. 3 Click the path to add a control point. Add one point to each of the other sides of the path. Notice that once you add a point, the plus sign turns into a minus sign ( ). Clicking the point again will erase it.
Adding control points to the path
LM_02.book Page 63 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 63 Classroom in a Book
Moving control points To dramatically alter a shape’s appearance, reposition its control points. 1 Select the pen selection tool ( ), or hold the Ctrl (Windows) or Command (Mac OS) key to temporarily switch from the pen tool ( ) to the pen selection tool ( ). 2 Position the pointer over one of the new control points. When the pointer is over a control point, it will change from a cross to a hollow arrow. 3 Click the point and drag it toward the center of the square to make a sharp corner. Repeat this with the three other new control points.
Positioning the pointer, and dragging the control points toward the center
Converting control points There are two types of points you can create with the pen tool: corner points and smooth points. Corner points are drawn as sharp angles, while smooth points are drawn as curves. You can have any combination of smooth and corner points in a shape, and they can even be next to each other on two adjacent lines. Right now your shape has only corner points. You’ll convert some of them into smooth points. 1 Position the pointer over one of the outside points of the shape. 2 Hold the Alt (Windows) or Option (Mac OS) key. The pointer changes into a hollow arrowhead, indicating that you can convert the control point. 3 Drag the point to convert it to a smooth point. The sharp corner turns into a curve. Direction lines appear on either side of the curve. The lines end in direction points.
LM_02.book Page 64 Thursday, May 23, 2002 10:05 AM
64 LESSON 4 Working with the Pen Tool
Currently you have the pointer over a direction point. You can drag the point in different directions to change the curve.
Converting the point, and dragging to change the curve
4 Change the other three outer points to smooth points.
Controlling direction lines independently Normally the two direction lines on either side of a smooth point move together. There are times when you’ll want to control direction lines separately to create a different type of point—one that looks like a corner point but can be controlled like a smooth point and connects two curved lines. You do this by dividing the direction lines at the control point and moving each individually. 1 Position the pointer over one of the smooth points and click. 2 Hold the Alt (Windows) or Option (Mac OS) key and click one of the point’s direction points. 3 Drag one of the direction points and notice how the control point, and the adjacent line, change.
LM_02.book Page 65 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 65 Classroom in a Book
Reconverting and removing points Now you’ll return your star to its original shape by reversing some of the steps you have performed. 1 Position the pointer over one of the smooth points. Hold the Alt (Windows) or Option (Mac OS) key and click the point to change it back into a corner point. Repeat this with the other smooth points. 2 Select the pen tool ( ), or hold the Ctrl (Windows) or Command (Mac OS) key to temporarily switch to the pen tool. 3 Click the inner control points to erase them. The shape has returned to the original rectangular path. 4 Choose File > Save to save your work, and close the file.
Creating a freeform shape Now that you’ve become familiar with the basics of using the pen and pen selection tools, you can start to draw freeform shapes with the tools. In this part of the lesson, you’ll trace over a template to get used to drawing straight and curved lines with the pen tool, and joining them into a complete shape. To get started with this portion of the lesson, open the template that you’ll trace. Choose File > Open and open the start file 04Start.liv file from the Lessons/Lesson04 folder. You can open the file 04End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. The start file consists of a template over which you will draw a bird.
Drawing a curved line You can use the pen tool to draw curves, called Bezier curves, as well as straight lines. To draw a curve, you set a control point at the beginning of the line segment and then drag to define the depth of the curve. It takes a while to get used to controlling the curves, but throughout this lesson you’ll draw curves of various shapes to master the technique. Here you’ll draw the initial curve of the bird’s head.
LM_02.book Page 66 Thursday, May 23, 2002 10:05 AM
66 LESSON 4 Working with the Pen Tool
1 Select the pen tool ( ). 2 In the Properties palette, make sure that Outline is selected. Enter 10 for the Width. 3 In the Composition window, click point 1. A minus sign appears next to the pen tool. When you are creating the first control point in a path, the minus sign means that you can end the path by clicking again, but the control point will remain. If you want to go back and start a path at that point later, you can do so by clicking on the control point with the pen tool, and continuing to draw control points from there. 4 Click at point 2, but don’t release the mouse. Start dragging down. 5 Drag the direction point over the direction point between points 2 and 3 on the template, and release the mouse. Notice how the amount of curve changes as you drag the direction point.
2
2 3
1
12
2 3
1
12
11
3
1
12
11
11
Drawing a straight line Drawing a straight line with the pen tool is similar to drawing a curved line, but you don’t drag after clicking the second point. Instead, you simply release the mouse button. You can draw straight lines that run at any angle, or you can constrain the lines to run along the x-y axis. You’ll draw two straight lines, one that is unconstrained and one that runs along the x axis. 1 Click point 3, then click point 4. 2 Position the pen tool over the point you just created, and click to erase the point. 3 Hold the Shift key and click slightly above point 4.
LM_02.book Page 67 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 67 Classroom in a Book
Notice that the control point is still created on point 4. By holding the Shift key, you are constraining the line to a right angle to the last point you created. 4 Hold the Shift key and click a ways below point 4. The new line forms a right angle with the last one. Now click this point again to erase it.
3
4
5
3
4
5
7
7
10
10
11
11
Unconstrained
Constrained
Drawing corner points In the first part of this lesson, you converted corner points to smooth points, and back again. Now you’ll create the two types of points from scratch. Corner points are created when you draw a straight line, as you did in the last step. Smooth points are created when you draw a curved line. You’ll draw corner points as you make the bird’s tail feathers. 1 Click point 5. 2 Click point 6. A sharp corner is created between points 4 and 6. 3 Make another corner point by clicking point 7.
Drawing smooth points You’ve just created some corner points for the bird’s tail. Next, you’ll practice creating some smooth points to complete the bird’s tail. 1 Click point 8, and drag the direction point to the dot below point 8. 2 Click point 9. 3 Click point 10, and drag the direction point to the dot. Notice the difference in the corner you have just created and the ones you created in the last step. 4 Continue creating smooth points with points 11 and 12.
LM_02.book Page 68 Thursday, May 23, 2002 10:05 AM
68 LESSON 4 Working with the Pen Tool
5 Choose File > Save.
4
5
6 8
7
10
4
5
6 8
7
10 9
9
Closing the path You can use the pen tool to create open or closed paths. An open path is not fully connected, so its end point does not meet its beginning point. A closed path is fully connected, with its beginning and end points joined. Right now the bird is an open path because all the lines are not joined up. You’ll close the path by connecting point 12 to point 1. 1 Position the pen tool ( ) over point 1. A small hollow circle ( ) appears when the pen tool is over the point, indicating that you can close the path. 2 Click point 1.
2 3
1
12
11
Now you’ve completed the basic shape of the bird, and developed a feel for how the pen tool works. To complete the lesson, you’ll edit and fill the shape.
LM_02.book Page 69 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 69 Classroom in a Book
Adjusting points Drawing with the pen tool is very flexible. You can go back and alter any lines you create as well as manipulate the direction points of a smooth point to change the shape of the curve. You’ll adjust the lines you’ve drawn to make the bird look more like the one in the end file. 1 Select the pen selection tool ( ), and click the bird. Notice that you can see all the control points you’ve made on the bird. 2 Position the pointer over point 2. The pointer changes to an arrow, indicating that you can adjust the point. 3 Click the point. Drag the direction point down to give the neck a deeper curve. 4 Click point 12. Drag the upper direction point up and to the left. Experiment with adjusting the other smooth points.
2
2 3
1
12
2 3
1
12
11
3
1
12
11
11
Changing points In the first part of this lesson, you converted smooth points to corner points and vice versa. Now you will continue practicing converting points with the bird’s tail feathers. 1 Hold the Alt (Windows) or Option (Mac OS) key. Position the pointer over point 4, and click-drag slightly to convert the point. 2 Convert point 9 the same way.
LM_02.book Page 70 Thursday, May 23, 2002 10:05 AM
70 LESSON 4 Working with the Pen Tool
Filling in the shape You’ve finished the bird’s shape in outline form. Now you’ll fill in the shape to complete the drawing. 1 Make sure that the bird is still selected in the Composition window. 2 In the Properties palette, select Fill. The outline becomes a solid shape.
2 3
1
4
5
6 8
7
12
10 11
9
3 Choose File > Save. You can use the Color palette to change the color of the bird.
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson04 folder on your hard drive. 2 Open a Web browser; then locate and open the 04Start.html file you just exported to preview the finished file.
LM_02.book Page 79 Thursday, May 23, 2002 10:05 AM
5 Animating Position
Adobe LiveMotion lets you animate your Web pages. You can add motion to objects, as well as change a variety of properties over time, using the Timeline window. As you’re working, LiveMotion enables you to play the animation from start to finish, or click through it one frame at a time. And at any time you can quickly display a preview of your work right in a Web browser.
LM_02.book Page 80 Thursday, May 23, 2002 10:05 AM
80 LESSON 5 Animating Position
Getting started In this lesson, you’ll learn how to do the following:
• Create an object to animate. • Name the object. • Display and work with the animation Timeline window. • Create and edit keyframes. • Animate an object’s position and other properties. • Create and edit motion paths. • Replace one object in an animation with another from a different file. • Time-stretch an animation. • Preview and export an animation. This lesson takes approximately 45 minutes to complete If needed, remove the previous lesson folder from your hard drive and copy the Lesson05 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished Web animation. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 05End.html from the Lessons/Lesson05 folder.
LM_02.book Page 81 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 81 Classroom in a Book
The animation consists of a flying saucer that zooms toward the bottom of the composition, turning and rotating as it comes closer.
Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Creating the file In this first part of the lesson, you’ll create a new file and set its composition settings. 1 Start Adobe LiveMotion. 2 Choose File > New Composition to begin a new composition. As mentioned in Lesson 1, the Composition Settings dialog box lets you specify the size of the composition canvas, as well as the frame rate (the number of frames per second) for the animation you want to make. You can change the frame rate settings later with the Composition Settings commands. For now, however, use the default settings. 3 Make sure the Width is 550 pixels, the Height is 500 pixels, and the Frame Rate is 12. Then click OK. You can open the file 05End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 4 Choose Window > Reset To Defaults to restore all of the palettes to their default settings.
LM_02.book Page 82 Thursday, May 23, 2002 10:05 AM
82 LESSON 5 Animating Position
Creating an object to animate 1 Select the rectangle tool ( ) from the toolbox, and draw a rectangle near the top left of the composition.
You’ll use this rectangle throughout the animation. At the end, you’ll replace it with a drawing of a flying saucer. You could start with the flying saucer, but by animating a simple rectangle until the very end, you simplify the process of animation and increase the speed of previewing it. 2 Choose Window > Transform or click the palette’s tab to display the Transform palette. Now you’ll use the Transform palette to make the rectangle the same size as the flying saucer drawing you’ll import later. 3 Enter 134 for the width (
) and 70 for the height ( ).
LM_02.book Page 83 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 83 Classroom in a Book
Viewing the timeline You animate objects using the Timeline window. The Timeline window displays timeline tracks for all objects in the composition and their properties, such as the size, position, or color. By changing the values of these properties over time, you create animation. 1 Choose Timeline > Timeline/Composition Window to open the Timeline window. Notice that in the Timeline window there are two duration bars: one for the composition and one for the object you just created. LiveMotion automatically provides a default name for the object, such as “Black Rectangle” in our example. Both duration bars currently have zero length.
Note: You can zoom into and out of the Timeline window using the Zoom In ( ) and Zoom Out ( ) buttons located on the bottom of the Timeline window. Because Windows and Mac OS have different default zoom levels, your timeline zoom level may not be the zoom level pictured in the illustrations.
LM_02.book Page 84 Thursday, May 23, 2002 10:05 AM
84 LESSON 5 Animating Position
2 Drag the current-time marker ( ) back and forth.
Notice that the counter at the top left corner of the Timeline window changes. This represents where you are in the animation. The digits represent hours, minutes, seconds, and frames. For example, 00:00:03:11 means 3 seconds and 11 frames into the animation. Our composition is animated at 12 frames per second, so the next frame would be 00:00:04:00. Because you’re not going to create an animation longer than several seconds, you’ll just use the last two numbers in our lessons. For example, we’ll use 02:05 to represent 2 seconds, 5 frames into the animation. 3 Drag the end marker of the duration bar for the composition to 06:00, which represents 6 seconds of animation. This duration bar defines how long the composition’s animation lasts.
LM_02.book Page 85 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 85 Classroom in a Book
Notice that dragging the end marker of the duration bar also lengthened the duration bar of your object. Each object in a composition has its own duration bar because the animation of an object can start and end at different times than the start and end of the composition. In this lesson, the timelines for the object and the composition will be the same. When dragging an object’s composition bar, be sure to stretch out the duration bar, and not just move the entire bar. Next, you’ll rename the object you’re animating. This helps you manage multiple objects in your composition. 4 Click the name of the object in the Timeline window and press the Enter key (Windows) or the Return key (Mac OS). In Name dialog box, enter the name you want to give the object (we used “My_Object”) and click OK to change the name. 5 Choose File > Save to save your work.
Animating position In this part of the lesson, you’ll animate the object’s position. Nearly every aspect of an object can be animated. Properties that can be animated are listed in the Timeline window. 1 Click the triangle next to “My Object” in the Timeline window. This displays the three basic properties you can animate for an object: transform, object attributes, and layer. 2 Now click the triangle next to Transform to expand the heading and display the most common kinds of transformations you can animate.
LM_02.book Page 86 Thursday, May 23, 2002 10:05 AM
86 LESSON 5 Animating Position
3 If the current-time marker is not at this frame, move it to 00:00 by dragging the current-time marker to the beginning. This indicates the beginning of the animation and the time at which you would like to set the initial properties of the object for the animation. Notice that each property listed under Transform has a stopwatch to its left of the name. To begin animating a property, click the stopwatch. This creates an initial keyframe for the property. A keyframe indicates the status of a property at a certain time in the animation. For example, a rectangle that changes from blue to red between 1 and 2 seconds in an animation has an initial color keyframe at 01:00 when the rectangle is blue, and another at 02:00 when it is red. Most properties that can be animated are listed in the timeline with a stopwatch. However, you can add other properties by changing that property, using the palettes or tools. The property will then be added to the timeline. 4 Click the Position stopwatch ( ) in the Timeline window. This specifies the initial position of the object and creates a keyframe.
Once you set keyframes at various frames in the animation, LiveMotion creates all the frames in between. After the first keyframe is set for any property, LiveMotion will create a new keyframe whenever that property is changed, without you clicking on the stopwatch again. If you want to create a keyframe that is the same as the last keyframe but at a different place in the timeline, click the Add Keyframe check box ( ) to the right of the property name.
LM_02.book Page 87 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 87 Classroom in a Book
5 Move the current-time marker to frame 03:00. This indicates the time at which you want a change to occur. 6 Choose the selection tool ( ) from the toolbox, and drag the rectangle to the middle of the composition.
The blue dots trailing from the rectangle represent its position at each frame in the animation. This is the Motion Path preview option and can be turned off by choosing View > Motion Path. It is turned on by default. When the dots are closer, the change is less and the object moves more slowly. For example, if there are 20 dots spaced closely together between two keyframes, it takes 20 frames of the animation for the change to occur between those two keyframes. 7 Choose File > Save.
Playing animation Now that you’ve animated the rectangle, you can play the animation in LiveMotion. 1 Select the timeline and drag the current-time marker to 00:00. Then click the Play button ( ) in the Timeline window. The animation plays from where the current-time marker is located. Dragging the marker to the beginning ensures that the animation plays from beginning to end. Instead of dragging the current-time marker, you can also click the First Frame button ( ).
LM_02.book Page 88 Thursday, May 23, 2002 10:05 AM
88 LESSON 5 Animating Position
Notice that when you play the animation, the blue dots disappear. This is because the dots would not appear in the actual animation; they are visible only for currently selected objects as you work in the Composition window. Notice, too, that the rectangle stops moving once the current-time marker in the Timeline window passes 03:00. This is because the change in position ended at the keyframe you created at 03:00. Now you’ll learn other ways to play the animation in LiveMotion. 2 Select the Timeline window and click the Go to the next frame button ( ) and Go to the previous frame button ( ) several times to play the animation one frame at a time. 3 Drag the current-time marker in the Timeline window to show the current state of the animation. This process is also known as “scrubbing.” 4 To create further motion, make sure the current-time marker is at 06:00 and then drag the rectangle down and to the left in the composition.
Editing keyframes Now you’ll learn how to edit existing keyframes. Keyframes have a number of options that affect how the animation plays. Over the next few lessons you’ll learn how to edit keyframes to create new effects. In this section, you’ll edit keyframes so that the saucer makes a sharp curve rather than a smooth one. Select the rectangle and look at the blue dots along its path again. Notice that the dots represent a smooth curve rather than a sharp angle. That’s because by default, LiveMotion assumes you’ll want a smooth motion as objects move. It applies the Auto Bezier command, which provides this kind of motion. 1 Play the animation, either with the Play button ( ) or by scrubbing with the currenttime marker.
LM_02.book Page 89 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 89 Classroom in a Book
The rectangle moves in a gentle curve. However, you can change this to a sharp angle by using the Linear command. 2 Select the Position keyframe to which you want to apply the Linear command; in this case, the keyframe at 03:00.
3 Choose Timeline > Linear. 4 Select the rectangle in the composition, and notice that it now moves in straight lines rather than curves. 5 Play the animation, and notice the difference in motion. The linear motion is useful if you are trying to create the effect of an object bouncing off of a hard surface, such as a ball bouncing off of a wall. Next, you’ll add another keyframe between two existing ones. 6 Select the Timeline window, and drag the current-time marker to 01:09.
LM_02.book Page 90 Thursday, May 23, 2002 10:05 AM
90 LESSON 5 Animating Position
7 Drag the rectangle to the left in the composition; then play the animation to view your changes.
Adding an intermediate keyframe
8 Choose File > Save.
Animating rotation and scale Although you can animate objects by changing them in the Composition window using the tools, you can also animate them by changing their properties in a palette. In this part of the lesson, you’ll learn how to make the rectangle rotate using a palette, and you’ll scale the rectangle using a tool. 1 Drag the current-time maker to 00:00 in the Timeline window. This represents the start of the animation. If you do not move the current-time marker to the start of an object’s duration bar when you begin to animate a property, the initial keyframe for that property will be set wherever the current-time marker is. 2 Click the Rotation stopwatch ( ) for My_Object. This sets the initial rotation of 0 for the rectangle. Now you’ll go to the end and rotate the rectangle so that it rotates throughout the animation. 3 Drag the current-time marker to 06:00. This is the end of the animation. You can rotate the rectangle by selecting it and dragging the rotation handle, or by using the Transform palette. Here, you’ll use the palette. 4 In the Transform palette, enter a value for the rotation by entering a number or dragging the angle control.
LM_02.book Page 91 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 91 Classroom in a Book
You can rotate more than 360° to make an object rotate multiple times during an animation. For example, we entered -380° to make the object rotate clockwise a little over one full rotation.
The rotation setting in the Transform palette
5 Choose File > Save. 6 Return the current-time marker to 00:00 and play the animation. Similar to rotation, you can scale an object using the object’s selection handle or the Transform palette. This time, we’ll use the selection handle. 7 Drag the current-time marker to 00:00 and click the Scale stopwatch to set the initial size of the rectangle. 8 Drag the current-time marker to 06:00. 9 Choose the selection tool ( ). 10 Shift-drag one of the rectangle’s solid corner handles (not the hollow handle, which is used for rotating) until the rectangle is about three times its original size. Holding down the Shift key while you resize keeps the original proportions of the object.
11 Choose File > Save. 12 Play the animation.
LM_02.book Page 92 Thursday, May 23, 2002 10:05 AM
92 LESSON 5 Animating Position
Replacing an object in an animation Now that you’ve animated the rectangle to do what you want, you’ll replace the rectangle with a drawing of a flying saucer, created in LiveMotion. 1 Drag the current-time marker to 00:00 and select the rectangle. 2 Choose File > Replace. 3 Select the file saucer.psd in the Lessons/Lesson05 folder, and click Open (Windows and Mac OS9) or Choose (Mac OSX). The flying saucer replaces the rectangle in the composition.
4 Play the animation. The flying saucer moves, rotates, and changes size exactly as the rectangle did. At the end of the animation, the saucer looks jagged. This is because it rasterized at the current pixel dimensions when it replaced the rectangle at the beginning of the composition. When the saucer was scaled up, it used the same rasterization as the small size, resulting in a loss of image quality. Because the source image has a higher resolution, we can rasterize it at the larger size.
LM_02.book Page 93 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 93 Classroom in a Book
5 Move the current-time marker to 06:00 and select the saucer. 6 Choose Object > Transform > Make Actual Size. 7 Choose File > Save. The saucer is now rasterized at the current size.
Time-stretching an animation To speed up or slow down an animation, you can either click and drag the individual keyframes or use a handy time-stretching technique to adjust all of the keyframes at once. These next steps demonstrate the time-stretching method. 1 Place the cursor over the end handle of My_Object’s duration bar. The cursor will change to a two-headed arrow. 2 Hold down Alt (Windows) or Option (Mac). A tiny stopwatch will appear under the two-headed arrow. Drag the duration bar end handle to the left.
Dragging the duration bar end handle to the left will shorten the animation. Watch the keyframes move closer to one another as you drag the handle to the left. The end result is that the animation runs much faster. 3 Play the animation.
LM_02.book Page 94 Thursday, May 23, 2002 10:05 AM
To slow down My_Object’s animation, click and drag the duration bar to the right while holding down Alt (Windows) or Option (Mac).
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson05 folder on your hard drive. 2 Open a Web browser; then locate and open the HTML file you just exported to preview the finished file.
LM_02.book Page 97 Thursday, May 23, 2002 10:05 AM
6 Editing Keyframes
Animating an object’s position is only one aspect of animation. LiveMotion allows you to create more realistic, complex movement by providing ways to alter keyframes and reposition objects.
LM_02.book Page 98 Thursday, May 23, 2002 10:05 AM
98 LESSON 6 Editing Keyframes
Getting started In this lesson, you’ll learn how to do the following:
• Work with a file that contains animated objects. • Create hold frames. • Ease in and ease out of frames. • Reverse animations by moving keyframes. • Change the stacking order of objects. This lesson takes approximately 30 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson06 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished Web animation. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 06End.html from the Lessons/Lesson06 folder.
LM_02.book Page 99 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 99 Classroom in a Book
The animation consists of a purple plane that flies to three different cities as a cloud drifts across the scene.
Viewing the final animation
Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Opening the file In this first part of the lesson, you’ll open the start file and Timeline window. 1 Start Adobe LiveMotion. 2 Choose File > Open, and open the file 06Start.liv from the Lessons/Lesson06 folder.
LM_02.book Page 100 Thursday, May 23, 2002 10:05 AM
100 LESSON 6 Editing Keyframes
You can open the file 06End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 4 Choose Timeline > Timeline /Composition Window to display the Timeline window. 5 In the Timeline window, make sure the current-time marker is at 00:00. The start file includes the plane, the map, and the cloud. Now, you’ll animate the plane and the cloud.
Animating the plane 1 Choose the selection tool ( ) from the toolbox, select the plane, and drag it to New York, the starting point on the map. This is the place from which the plane will take off.
2 In the Timeline window, expand Plane > Transform to display the Transform properties. Click the Position stopwatch to set a keyframe for the plane’s initial position. Now you’ll move the plane to Paris. 3 Drag the current-time marker to 02:00, the time in the animation at which the plane will arrive in Paris. When the Timeline window is active, you can press the left and right arrow keys to expand and collapse an object’s properties.
LM_02.book Page 101 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 101 Classroom in a Book
4 Drag the plane to the black dot at Paris. This creates a new position keyframe for the plane at this point in the animation.
Now you’ll create a new keyframe at a later time but leave the plane in the same position. This will represent the plane’s stopover for refueling in Paris. 5 Drag the current-time marker to 02:06. The plane will be stopped in Paris from 02:00 to 02:06. 6 Click the Add Keyframe box ( ) to the right of the plane’s Position stopwatch in the Timeline window. A new keyframe with the same position property as in 02:00 is created at 02:06.
Now it’s on to Rio de Janeiro.
LM_02.book Page 102 Thursday, May 23, 2002 10:05 AM
102 LESSON 6 Editing Keyframes
7 Drag the current-time marker to 04:00. 8 Drag the plane to the black dot at Rio de Janeiro, creating a position keyframe there at 04:00.
As in Paris, you’ll create another keyframe to represent a refueling in Rio de Janeiro. 9 Drag the current-time marker to 04:06; then click the Add Keyframe box to create another keyframe with the same position property. Finally, you’ll move the plane back to New York. 10 Drag the current-time marker to 09:00, the end of the animation; then drag the plane to the black dot in New York to create a position keyframe there.
11 Click the Go to the first frame button ( ) to return the current-time marker to the beginning; then click the Play button ( ) to play the animation.
LM_02.book Page 103 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 103 Classroom in a Book
12 Choose File > Save to save your work.
Creating hold frames Notice that when you played the animation, the plane made an odd looping motion at its stops in Paris and Rio de Janeiro. These were the places where you created two regular keyframes that were identical. This kept the plane in the same location but didn’t stop its motion. Now you’ll change two of those keyframes to Hold keyframes. Hold keyframes “freeze” a property so that it doesn’t change until the next keyframe, in this case, keeping the plane still until it moves to the next city. 1 In the Timeline window, click the first Paris Position keyframe (at 02:00) to select it and then shift-click the first Rio de Janeiro keyframe (at 04:00) to select it as well.
LM_02.book Page 104 Thursday, May 23, 2002 10:05 AM
104 LESSON 6 Editing Keyframes
2 Choose Timeline > Hold Keyframe. Notice that the keyframes change shape.
3 Play the animation, and notice that the plane holds its correct position while it’s stopped in Paris and Rio de Janeiro. The plane travels at different speeds between cities. You’ll fix this now by adjusting the location of the keyframes so that it takes the plane the same amount of time to travel between each city. 4 Select the plane, so you can see its motion path. 5 Shift-click to select the two keyframes for Paris (at 02:00 and 02:06). Drag them simultaneously so that the left keyframe is at 02:10 in the timeline, and the right keyframe is at 3:04. To make it easier to find a specific time for a keyframe on the timeline, you can drag the current-time marker to the specific time and then move a keyframe on top of the current-time marker. 6 Shift-click to select the two keyframes for Rio de Janeiro, and drag them together in the timeline. 7 Adjust the two keyframes until the plane’s motion path displays similar dot patterns, indicating similar velocities between each leg of the flight. We chose 06:05 for the left keyframe, and 6:11 for the right). 8 Choose File > Save.
LM_02.book Page 105 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 105 Classroom in a Book
Rotating the plane In this part of the lesson, you’ll rotate the plane so it is facing in the direction of travel as it flies from one city to another. 1 Click the Go to the first frame button ( ) or drag the current-time marker to 00:00. 2 With the plane selected, use either the rotation handle or the Transform palette to rotate the plane so that it points to Paris.
3 Click the Rotation stopwatch in the plane’s timeline. This creates a new rotation keyframe. 4 Drag the current-time marker to 03:01 and rotate the plane so that it points toward Rio de Janeiro. 5 Drag the current-time marker to 06:08 and then rotate the plane to point toward New York. 6 Play the animation, and notice that the plane rotates slowly as it flies from one city to another. To fix this, you’ll use the Hold Keyframe command to hold the rotation. 7 In the Timeline window, shift-click to select all of the Rotation keyframes in the plane’s timeline and then choose Timeline > Hold Keyframe. 8 Choose File > Save. 9 Play the animation.
LM_02.book Page 106 Thursday, May 23, 2002 10:05 AM
106 LESSON 6 Editing Keyframes
Ease In and Ease Out To finish the plane’s motion, you’ll use the Ease In and Ease Out commands. Currently when you play the animation, the plane’s velocity between the cities is constant. To create a more realistic motion in which the plane starts slowly as it leaves a city, builds up to a constant speed when flying between cities, and then slows down as it lands in the next city, you’ll use the Ease In and Ease Out commands. These commands smoothly increase and decrease the speed of an animation so that it mimics actual movement. 1 In the Timeline window, shift-click to select the first Position keyframes for Paris (at 02:10) and Rio de Janeiro (at 06:05), and the last Position keyframe (at 09:00) in the plane’s timeline. 2 Choose Timeline > Ease In. Notice that the shape of the keyframes changes to indicate that these are Ease In keyframes. The Ease In command decreases the motion as the plane approaches those keyframes/cities.
3 Shift-click to select the first Position keyframe in New York (at 00:00), and the second Position keyframes for Paris (at 03:04) and Rio de Janeiro (at 06:11) in the plane’s timeline. 4 Choose Timeline > Ease Out. The shape of the keyframes changes to indicate that these are Ease Out keyframes. The Ease Out command increases the motion as the plane leaves those keyframes/cities.
LM_02.book Page 107 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 107 Classroom in a Book
5 Choose File > Save. 6 Play the animation. The motion change is subtle. However, you can verify this change by looking at the blue motion dots that connect the cities. To see the motion dots, click the plane in the Composition window when the animation is done playing. You are finished animating the plane. 7 Close the plane’s properties to free up space in the Timeline window to animate the next object.
Reversing keyframes Now you’ll reverse the direction of an object by switching the position of keyframes. 1 Return the animation to 00:00. 2 Select the cloud in the composition. 3 Expand Cloud > Transform in the Timeline window, and click the Position stopwatch to create an initial keyframe for the cloud. 4 Drag the current-time marker to 09:00, the end of the animation. 5 Begin dragging the cloud to the right and then hold down the Shift key as you drag, making the cloud go straight across horizontally, and creating another Position keyframe at that frame.
6 Play the animation to view the cloud drifting slowly from left to right.
LM_02.book Page 108 Thursday, May 23, 2002 10:05 AM
108 LESSON 6 Editing Keyframes
But what if you want the cloud to move from right to left, instead? You could select the keyframes and move the cloud, making sure to move it to exactly the right spot in the composition to reverse the motion. An easier way is to simply reverse the keyframes. 7 Select the first Position keyframe for the cloud and drag it to the right, near the end of the cloud’s timeline. 8 Now select the second Position keyframe for the cloud and drag it to the beginning of the cloud’s timeline, crossing over the other keyframe in the process.
Reversing the positions of two keyframes
9 Adjust both keyframes in their new positions so they are at the beginning and end of the timeline. 10 Collapse the cloud’s properties in the Timeline window, and save the file. 11 Play the animation to view the cloud moving from right to left instead of left to right.
LM_02.book Page 109 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 109 Classroom in a Book
Changing the stacking order Notice that when the plane lands in New York at the end of the animation, it seems to land on top of the cloud. That’s because the plane was created after the cloud, placing it above the cloud in the composition. This positioning is called the stacking order. Each object you draw or add to a composition is above the other objects in the stacking order. You can change the stacking order by using the Arrange commands. In this part of the lesson, you will change the stacking order so that the plane first flies above the cloud and then lands under it at the end. You’ll do this by making a copy of the plane, including its entire timeline, with one copy flying above the clouds, and the other flying under it. You’ll then edit the timeline for each plane so that the top plane disappears and is seamlessly replaced by its duplicate, beneath the cloud. 1 Select the plane, and choose Edit > Duplicate to make a duplicate of the plane. A duplicate plane and duration bar are created and placed above the previous plane in the stacking order. You’ll rename this duplicate so you can tell it apart from the original.
2 In the Timeline window, select the name “Plane” of the duplicate you just created and press Return. 3 Type the name Lower Plane and then click OK. 4 Drag the current-time marker to a point after the plane has crossed over the cloud. We used 08:00.
LM_02.book Page 110 Thursday, May 23, 2002 10:05 AM
110 LESSON 6 Editing Keyframes
5 In the Timeline window, select Plane (the original plane) and drag the end of its duration bar (the out point) to 08:00. This is where the plane flying above the cloud will end.
6 Select Lower Plane (the duplicate) and drag the beginning of its duration bar (the in point) to 08:01 (one frame after the original plane’s animation ends). Moving the beginning of the duplicate plane’s animation so that it appears one frame after the original plane disappears causes the duplicate to take up where the original’s animation ends, replacing it. 7 Play the animation. At this point, it looks no different from when it was a single plane flying over the cloud. But in the next steps, you’ll move the lower plane below the cloud in the stacking order. 8 Drag the current-time marker to a point in the animation where the lower plane is flying. We used 08:05.
LM_02.book Page 111 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 111 Classroom in a Book
9 Select Lower Plane and choose Object > Arrange > Send Backward. Repeat this step until Lower Plane is below Cloud in the Timeline window. This means it is also below the cloud in the composition.
10 Save the file. 11 Play the animation. The plane now flies under the cloud as it lands in New York. You can also change an object’s stacking order by clicking and dragging it upwards or downwards in the Timeline.
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson06 folder on your hard drive. 2 Open a Web browser; then locate and open the 06Start.html file you just exported to preview the finished file.
LM_02.book Page 115 Thursday, May 23, 2002 10:05 AM
7 Animating Object Properties
Animation isn’t just about movement. With Adobe LiveMotion, you can animate nearly any aspect of an object. You can also make objects appear and disappear during an animation. By animating different properties of your objects, you can make the objects appear to react to each other and give your animations depth.
LM_02.book Page 116 Thursday, May 23, 2002 10:05 AM
116 LESSON 7 Animating Object Properties
Getting started In this lesson, you’ll learn how to do the following:
• Work with a file that contains animated objects. • Animate multilayered objects. • Change color, object opacity, and layer opacity over time. • Work with sound. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson07 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished Web animation. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 07End.html from the Lessons/Lesson07 folder. The animation shows a blue background with a blue stripe and a blue circle. Over time, a meteor, text, and a yellow band appear in the composition as a sound repeats in the background. The composition elements have shadowing and 3D effects that change as the meteor passes through the scene. Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
LM_02.book Page 117 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 117 Classroom in a Book
Opening the file In this first part of the lesson, you’ll open the start file and Timeline window. 1 Start Adobe LiveMotion. 2 Choose File > Open, and open the file 07Start.liv from the Lessons/Lesson07 folder.
The start file
You can open the file 07End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 4 Choose Timeline > Timeline/Composition Window to display the Timeline window. 5 In the Timeline window, make sure the current-time marker is at 00:00; then click the Play button ( ) to play the animation. The start file consists of a blue background, a rectangle that doesn’t change during the animation, and a white meteor that moves from right to left during the animation.
LM_02.book Page 118 Thursday, May 23, 2002 10:05 AM
118 LESSON 7 Animating Object Properties
In the Timeline window, notice that the meteor’s duration bar starts at 02:09 and ends at 08:06. The duration bar is not the length of the entire animation because the meteor appears partway through the animation of the composition as a whole, and disappears before the animation as a whole finishes.
The meteor’s duration bar, and the composition’s duration bar
Animating an ellipse In this part of the lesson, you’ll create an embossed circle that gradually rises from the background and whose highlight moves in relation to the meteor during the animation.
Creating the ellipse Here you’ll draw an ellipse, fill it with the background, and apply 3D effects. 1 Drag the current-time marker to 00:00 or click the First Frame button ( ) to set the current-time marker to the beginning of the animation. 2 Select the ellipse tool ( ), and shift-drag to draw a circle near the top left of the composition.
LM_02.book Page 119 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 119 Classroom in a Book
You’ll make this circle gradually rise out of the background and animate a highlight that moves in relation to the meteor crossing the composition.
The circle
3 Choose Window > Transform or click the palette’s tab to display the Transform palette. 4 Enter 90 for the Width (
) and Height ( ) of the circle.
Changing the width and height of the circle in the Transform palette
5 Choose Window > Layer or click the Layer tab to display the Layer palette. 6 With the circle still selected, choose Background from the Fill With menu in the Layer palette. The ellipse is invisible, but it is still there. It is just filled with what is behind it, which is the blue background of the composition. 7 Choose Window > 3D or click the palette’s tab to display the 3D palette.
LM_02.book Page 120 Thursday, May 23, 2002 10:05 AM
120 LESSON 7 Animating Object Properties
8 Choose Emboss from the menu. Notice that with the embossing added, you can see the circle again. 9 In the 3D palette, enter 5 for Depth, 10 for Softness, and 20 for Lighting.
Animating the ellipse’s properties Now that you’ve created the circle and set its initial properties, you’ll animate those properties so they change as the animation plays. Next, you’ll set the animation to make the circle appear over time. 1 In the Timeline window, expand Ellipse > Layer 1; then click the Effect Lighting stopwatch to create an initial keyframe at 00:00 for the circle’s lighting.
2 Drag the current-time marker to 03:00, and increase the Lighting setting to 80 in the 3D palette. LiveMotion automatically adds a new keyframe to the timeline.
LM_02.book Page 121 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 121 Classroom in a Book
3 Play the first part of the animation to watch the circle appear as the lighting increases. When you’re through, stop the animation and drag the current-time marker to 07:00, where you’ll create the next keyframe. 4 Click the Add Keyframe box ( ) to the right of Effect Lighting in the Timeline window to give the keyframe at 07:00 the same value as the previous keyframe. This maintains the lighting effect between these two frames in the animation.
5 Drag the current-time marker to 09:00. With the ellipse selected, decrease the Lighting setting in the 3D palette to 0. This makes the embossed circle disappear at the end of the animation. Now you’ll change the Effect Angle setting, so that the light on the embossed circle follows the light given off by the meteor. 6 Drag the current-time marker to 03:00, and change the Lighting Angle setting to -20. 7 Click the Effect Angle stopwatch to create an initial keyframe here. This makes the animation look as if the meteor is casting light on the embossed circle. 8 Drag the current-time marker to 09:00, and change the Lighting Angle setting to -99. This makes it look as if the lighting on the circle is caused by the light from the meteor when the animation is played. Although you can’t see the circle any longer at this point, the angle you just set ensures that the lighting is at the correct angle as the embossed circle fades away.
LM_02.book Page 122 Thursday, May 23, 2002 10:05 AM
122 LESSON 7 Animating Object Properties
9 Drag the current-time marker back to 00:00, and play the animation from the beginning. 10 Choose File > Save to save your work.
Making an object shy The Timeline window provides Hide, Shy, and Lock attributes for every object and group in a composition. While you’ll make use of Hide and Lock in a subsequent lesson, you’ll now make the Ellipse shy: 1 In the Timeline, click the Shy button to the right of Ellipse. This marks the object as shy. 2 Click the Hide Shy Objects button at the top of the Timeline window. The Ellipse appears to vanish from the Timeline. (Click the Hide Shy Objects button again to make the shy objects reappear.)
Selecting the Hide Shy Objects button saves space in the Timeline window by hiding all objects marked as shy.
Animating a gradient highlight Now you’ll create and animate a large yellow outline of a circle. Rather than having the circle remain from the start of the animation, you’ll create it so that it only appears several seconds into the animation.
Animating opacity You’ll begin by drawing a circular outline and adjusting its opacity over time. 1 Drag the current-time marker to 04:06. This is where the animation of the circle will begin.
LM_02.book Page 123 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 123 Classroom in a Book
2 Select the ellipse tool and then Shift-drag to draw a large circle in the center of the composition. In the Transform palette, make sure it has a width ( ) and height ( ) of 241.
Now you’ll color the circle yellow. 3 Choose Window > Color, or click the palette’s tab to display the Color palette. 4 Choose RGB View from the palette menu; then enter R (Red), G (Green), and B (Blue) values to create a pale yellow color. We chose 255 for R, 255 for G, and 130 for B.
LM_02.book Page 124 Thursday, May 23, 2002 10:05 AM
124 LESSON 7 Animating Object Properties
5 Choose Window > Properties, or click the palette’s tab to display the Properties palette. Select Outline to convert the solid circle to an outline, and enter 8 for Width. The width is measured in 1/4-pixels. This turns the solid circle into a pale yellow band 2 pixels wide.
6 In the Timeline window, expand Medium Yellow Outlined Ellipse > Transform to display the Transform properties. First you’ll set a keyframe for the entire object’s opacity. 7 Choose Window > Opacity, or click the palette’s tab to display the Opacity palette. 8 Set the Object Opacity (not the Object Layer Opacity) to 0 in the palette, and click the Object Opacity stopwatch in the Timeline window. This creates a keyframe for the entire object’s opacity at 04:06 and makes it invisible at this point in the animation. As with the previous circle you made, the yellow band will gradually appear over time. 9 Drag the current-time marker to 07:00, and set the Object Opacity to 100. This makes the yellow band gradually come into view by becoming more opaque over time. 10 Drag the current-time marker to 00:00, and play the animation. 11 Choose File > Save.
Animating a gradient angle Now you’ll animate the yellow circle’s opacity gradient angle. Rather than coming into view all at once, only part of the circle will fade in as the opacity increases. The visible part of the circle will appear to rotate as the gradient angle is changed. 1 Select Medium Yellow Outlined Ellipse in the Timeline window.
LM_02.book Page 125 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 125 Classroom in a Book
2 Drag the current-time marker to 04:06. This is the point in the animation where the yellow band first appears (the in point of the band). 3 In the Timeline window, expand Medium Yellow Outlined Ellipse > Layer 1 to display the Layer properties. Notice that there isn’t a property in the band’s timeline for Opacity Gradient Angle. By specifying this property, you’ll create a stopwatch for it in the Timeline window now. 4 In the Opacity palette, choose Linear from the menu to set the opacity gradient type. 5 Change the Opacity Gradient Angle setting slightly to create a stopwatch for this property in the Timeline window. We used -13.
Changing the Opacity Gradient Angle
Note: In addition to Opacity Gradient Angle, this creates additional properties, including Opacity Gradient Type, Opacity Gradient Start, Opacity Gradient End, and Color Ramp. 6 Click the Opacity Gradient Angle stopwatch to create a new keyframe with this angle. 7 Drag the current-time marker to 11:00. 8 In the Opacity palette, rotate the angle marker several times to make the gradient angle rotate within the circle that number of times. We rotated it three times, for a value of 750. 9 Drag the current-time marker to 00:00, and play the animation. 10 Choose File > Save. 11 In the Timeline window, click the Medium Yellow Outlined Ellipse Shy button.
Animating type Now you’ll add a multilayered type object to your animation. You’ll make the color of the top layer and the position of the shadow (second) layer change over time in response to the meteor’s movement. 1 Drag the current-time marker to 00:00. This is where the text will begin.
LM_02.book Page 126 Thursday, May 23, 2002 10:05 AM
126 LESSON 7 Animating Object Properties
2 Select the type tool (
), and click the rectangle in the composition.
3 Use the Properties palette to set the font and point size, such as Myriad Bold at 55point, then type Luna. 4 Choose the selection tool ( ) and drag the text onto the middle of the rectangle in the composition.
Select and drag the text.
Animating a color change Here you’ll change the color of the type as the meteor flies from right to left across the composition. 1 With the type still selected, use the Color palette to change the color to medium red. We used 255 for R, 127 for G, and 127 for B. 2 In the Timeline window, expand Medium Red “Luna” > Layer 1 to open the properties for the text.
LM_02.book Page 127 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 127 Classroom in a Book
3 Drag the current-time marker to 04:00, and click the Color stopwatch to create a keyframe for color. By having the color the same at 00:00 and 04:00, the color remains constant between frames 00:00 and 04:00.
4 Now drag the current-time marker to 05:06, and change the color to white by entering 255 for R, G, and B. This represents the color when the meteor is directly over the text, whitening it. 5 Finally, drag the current-time marker to 07:00, and change the color back to medium red. Again, we used 255 for R, 127 for G, and 127 for B. 6 Drag the current-time marker to the beginning, and play the animation to preview the animation so far. 7 Choose File > Save.
Animating a second layer At this point, you’re ready to animate a second layer of the text separately from the top layer. You’ll make a shadow for the text that moves in response to the meteor’s position. 1 Drag the current-time marker to 00:00.
LM_02.book Page 128 Thursday, May 23, 2002 10:05 AM
128 LESSON 7 Animating Object Properties
2 Click Medium Red Luna in the Timeline window to select the text. Clicking the name of an object in the Timeline window has the same effect as using the selection tool and clicking the object in the Composition window.
Selecting the text in the Timeline window
Now you’re ready to apply a multilayer style to the text. 3 Choose Window > Styles, or click the palette’s tab to display the Styles palette. 4 In the Styles palette, choose Name View from the palette menu; then choose 03_DropShadow and click the Apply Style button ( ) at the bottom of the palette. The text now has a second layer that is a drop shadow for the text. 5 In the Timeline window, expand “shadow” to open the properties for the shadow layer.
LM_02.book Page 129 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 129 Classroom in a Book
6 Select “shadow” in the Timeline window so that you can change its properties.
Selecting the second layer in the Timeline window
Selecting the layer in the Timeline window is the same as selecting the layer in the Object Layers palette. Now you’ll animate the second shadow layer, so that it moves in response to the meteor passing over the text. 7 Drag the current-time marker to 04:00. This represents where the meteor is when it’s to the right of the text. 8 Choose Window > Layer, or click the palette’s tab to display the Layer palette. 9 In the Layer palette, change the X Offset to -10. 10 In the Timeline window, click the Offset stopwatch under “shadow” to create a keyframe for the offset. 11 Drag the current-time marker to 07:00, and change the X Offset to 10. This represents what the drop shadow looks like when the meteor is to the left of the text. 12 With the shadow layer still selected, drag the current-time marker to 03:00. 13 In the Opacity palette, set Object Layer Opacity (not Object Opacity) to 0. This makes the shadow invisible at this point in the animation, without making the entire object (the text) invisible.
LM_02.book Page 130 Thursday, May 23, 2002 10:05 AM
130 LESSON 7 Animating Object Properties
14 In the Timeline window, click the Object Layer Opacity stopwatch under “shadow” to create a keyframe for the layer opacity. 15 Drag the current-time marker to 04:00 (the frame where the meteor is to the right of the text), and set the Object Layer Opacity to 70. 16 Drag the current-time marker to 07:00. ) to the right of Object 17 In the Timeline window, click the Add Keyframe box ( Layer Opacity to create a new keyframe with the same Object Layer Opacity value. This keeps the layer opacity of the shadow the same while the meteor is moving from right to left over the text.
18 Drag the current-time marker to 08:00, and set the Object Layer Opacity to 0. This makes the shadow disappear as the meteor leaves the left side of the composition. 19 Choose File > Save. 20 Drag the current-time marker to 00:00, and play the animation. 21 In the Timeline window, collapse Medium Red Luna.
Adding sound to the Animation Finally, you’ll add a sound that plays when the pale yellow band appears. 1 Drag the current-time marker to 04:02.
LM_02.book Page 131 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 131 Classroom in a Book
2 Choose Window > Sounds, or click the Sounds tab to display the palette. 3 In the Sounds palette, choose Name View from the palette menu. 4 Choose 17_Loop_Fantasy and click the Apply button ( ) at the bottom of the palette. Even though the sound is not an object you can see in the composition, Adobe LiveMotion inserts the sound in the Timeline window and creates a duration bar for it. 5 Choose File > Save. 6 Drag the current-time marker to 00:00, and play the animation.
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson07 folder on your hard drive. 2 Open a Web browser; then locate and open the 07Start.html file you just exported to preview the finished file. Note: The exported file will be large for a SWF, because this composition creates a number of bitmap objects upon export. You may want to revisit this composition after completing Lesson 15 (which covers export strategies and file optimization). A lightweight vector-only version of this animation will export in a fraction of the file size of the bitmap version.
LM_02.book Page 139 Thursday, May 23, 2002 10:05 AM
8 Creating Basic Rollovers
Rollovers are multi-state buttons that change their appearance or behavior when you roll the mouse pointer over them or click them. Adobe LiveMotion lets you create different effects for the normal, over, down, and out states of a rollover button.
LM_02.book Page 140 Thursday, May 23, 2002 10:05 AM
140 LESSON 8 Creating Basic Rollovers
Getting started In this lesson, you’ll learn how to do the following:
• Create multiple rollover buttons simultaneously. • Apply different layered effects to a button. • Create a rollover state for each layered effect. • Apply a sound effect to a rollover state. • Use a linked URL with a rollover state. • Add a label to each button. This lesson takes approximately 30 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson08 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion Classroom 2.0 in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by viewing a copy of the finished rollover buttons. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 08End.html from the Lessons/Lesson08 folder.
LM_02.book Page 141 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 141 Classroom in a Book
3 Roll the mouse pointer over the three buttons, and notice that a yellow glow appears around the edges. 4 Click the 2002 button. This button links to another page in a separate window. 5 Click the other buttons, and notice how the blue gradient changes. A clicking sound has been applied to the down rollover state of each button so that you hear the sound when you click the button. Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Building multiple rollovers simultaneously Adobe LiveMotion includes a Make Alias feature that lets you create more than one multistate rollover at the same time. As you create one button, apply various effects to it, and create rollover states for it, LiveMotion duplicates every step for the aliased objects that are linked to it. The Make Alias feature is useful when you’re creating a large number of rollover buttons for your Web pages.
Making aliases for the button You’ll create one object and then make two aliases to create three rollover buttons at the same time. 1 Start Adobe LiveMotion. 2 Choose File > New Composition to begin a new composition. You can open the file 08End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 In the Composition Settings dialog box, enter 120 for the Width setting and 150 for the Height setting, and click OK. 4 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. When you reset the palettes to their default properties, the fill color changes to black (as indicated in the toolbox and the Color palette).
LM_02.book Page 142 Thursday, May 23, 2002 10:05 AM
142 LESSON 8 Creating Basic Rollovers
5 Select the rounded-rectangle tool ( ) in the toolbox, and draw a black rounded rectangle. 6 Choose Window > Transform, or click the palette’s tab to display the Transform palette. Enter 100 in the Width ( ) setting and 30 in the Height ( ) setting. 7 Choose Edit > Make Alias. LiveMotion creates a duplicate copy of the rounded rectangle that is directly linked to the original object and is stacked on top of it. 8 Choose Edit > Make Alias again to create another aliased object. Three black rounded rectangles are now stacked on top of each other. You’ll separate the three objects and then position them evenly and precisely in the composition. 9 Choose the selection tool ( ), drag each object apart and line them up into a column in the composition. 10 Select the top object, and enter 10 in the X text box and 10 in the Y text box in the Transform palette. 11 Select the bottom object, and enter 10 in the X text box and 110 in the Y text box in the Transform palette. 12 Shift-click to select all three objects. Choose Object > Align > Left and then choose Object > Distribute > Vertical.
As you continue to build any one of these aliased buttons, the same changes are applied to the other two buttons. 13 Choose File > Save, name the file with the .liv extension, and click Save.
LM_02.book Page 143 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 143 Classroom in a Book
Creating layered effects Adobe LiveMotion lets you create duplicate layers of the same object and apply different attributes to each individual layer. You’ll create a layer for the black outline of the button, apply a blue color gradient to the first layer, and create a layer for a yellow glow around the button.
Creating an object layer First you’ll create a second object layer to use as the black outline of the button. 1 Select the top black rectangle. 2 Choose Window > Object Layers, or click the palette’s tab to display the Object Layers palette. 3 Click the New Layer button ( ) at the bottom of the palette to create a second layer with an exact copy of the black rounded rectangle.
Applying a gradient and bevel effect You’ll resize and apply a blue gradient effect to the frontmost layer of the button, and allow part of the black color on the background layer to appear at the edges of the button. You’ll then apply a bevel effect to both layers. 1 Select Layer 1 in the Object Layers palette. 2 Choose Window > Layer, or click the palette’s tab to display the Layer palette. Enter -3 in the Width setting. By reducing the width, part of the black rectangle behind this layer will show through. 3 Choose Window > Color, or click the palette’s tab to display the Color palette. 4 Choose Window > Gradient, or click the palette’s tab to display the Gradient palette. Separate the Gradient palette from the other palettes by dragging the Gradient tab to a new location on-screen.
LM_02.book Page 144 Thursday, May 23, 2002 10:05 AM
144 LESSON 8 Creating Basic Rollovers
5 In the Gradient palette, choose Linear from the pop-up menu. 6 Select the left end point on the gradient bar, and click the white color box in the lower right corner of the Color palette. 7 Select the right end point on the gradient bar, and click a light blue color in the Color palette or enter 0 for R, 51 for G, and 255 for B. For Web-safe colors, select the Web Safe Colors cube in the Color palette, or enter RGB color values that are multiples of 51. 8 In the Gradient palette, enter -50 for the Rotation Angle setting. This will rotate the gradient 50 degrees in a clockwise direction. Notice that the gradient effect is automatically applied to all three aliased buttons in the Composition window. 9 Choose Window > 3D, or click the palette’s tab to display the 3D palette. Choose Bevel from the pop-up menu. Enter 1 for the Depth setting, 1 for the Softness setting, 100 for the Lighting setting, and 125 for the Rotation Angle setting. 10 In the Object Layers palette, select Layer 2 and apply the same bevel effect in the 3D palette.
Creating a background glow effect You’ll create a yellow glow effect on a third layer of the button, and refer to this layer later when you create the Over rollover state for the button. 1 In the Object Layers palette, click the New Layer button ( ) to create a third layer. This new layer is a copy of the original black rectangle. 2 Double-click Layer 3, enter Glow for the new name, and click OK.
Name the new layer "Glow" for easy reference later.
LM_02.book Page 145 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 145 Classroom in a Book
3 In the Layer palette, enter -1 for the Width setting and 8 for the Softness setting. 4 In the Color palette, select a yellow color or enter 255 for R, 204 for G, and 0 for B. 5 Choose File > Save.
Creating rollover states Adobe LiveMotion lets you specify object layers and apply other effects to individual rollover states for a button. You’ll create an over state, a down state, and an out state; specify which object layers will appear for each rollover state (including the normal default state); and apply color gradient and sound effects to the down state.
Hiding a layer in the normal rollover state You’ll hide the background glow effect so that it won’t appear when the button is in its normal rollover state. 1 Choose Window > States, or click the palette’s tab to display the States palette. Notice in the States palette that the selected rectangle has a normal rollover state by default. 2 In the Object Layers palette, select the Glow layer and then click the Show/Hide button ( ) to hide the yellow glow effect. While multi-layer objects and special effects—such as 3D bevels and layer softness— cause objects to be exported as bitmap objects, this is not necessarily a bad thing. Following the methodology shown here, LiveMotion will automatically symbolize the bitmap button objects upon export, to minimize file sizes. This topic will be explored in depth in Chapter 15.
LM_02.book Page 146 Thursday, May 23, 2002 10:05 AM
146 LESSON 8 Creating Basic Rollovers
The yellow glow no longer appears around the buttons in the composition.
Hide the yellow glow effect when the button is in its normal state.
LM_02.book Page 147 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 147 Classroom in a Book
Creating an over rollover state For the over state of the button, you’ll show the Glow layer. 1 In the States palette, click the New State button ( ). By default, the second rollover state is the over state. 2 In the Object Layers palette, click the Show/Hide button ( ) to make the Glow layer reappear and show the yellow glow effect. Notice the over state in the States palette now has a Changes submenu that lists the changes to the state. 3 In the States palette, click the triangle to expand the Changes submenu and see the changes.
4 Click the Preview Mode button ( ) at the bottom of the toolbox, and move the mouse pointer over the buttons in the Composition window to preview the effect. 5 Click the Edit Mode button ( previewing.
) at the bottom of the toolbox when you’re done
6 Choose File > Save.
Creating a down rollover state The down state will also show the Glow layer of the button, so you’ll create it quickly by duplicating the over state. You’ll then apply a different gradient effect that will appear when you click the button or hold the mouse button down on it. 1 In the States palette, select the over state. 2 Click the Duplicate State ( ) button at the bottom of the palette.
LM_02.book Page 148 Thursday, May 23, 2002 10:05 AM
148 LESSON 8 Creating Basic Rollovers
By default, this third rollover state becomes the down state. Because it is a duplicate of the over state, it also has a Changes submenu.
3 In the Object Layers palette, select Layer 1. 4 In the Gradient palette, enter 130 in the Rotation Angle setting or drag the rotation wheel to rotate the gradient to 130 degrees. 5 In the 3D palette, enter -45 in the Rotation Angle setting or drag the rotation wheel to rotate the bevel to -45 degrees. Notice in the States palette that the Changes submenu now lists the changes to the gradient and 3D effects.
6 Click the Preview Mode button ( window to preview the visual effect. 7 Click the Edit Mode button ( 8 Choose File > Save.
) and then click the buttons in the Composition
) when you’re done previewing.
LM_02.book Page 149 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 149 Classroom in a Book
Applying a sound effect to the down state You’ll add an auditory clue that the button has been clicked by applying a sound effect to the down rollover state. 1 In the States palette, select the down state. 2 Choose Window > Sounds, or click the palette’s tab to display the Sounds palette. Choose Name View from the palette menu, and select the 02_Event_Button_Push sound; then click the Apply Sound button ( ) at the bottom of the palette. The new sound is listed in the down state’s Changes submenu in the States palette.
3 Click the Preview Mode button ( ) and then click the buttons in the Composition window to preview the sound effect. 4 Click the Edit Mode button (
) when you’re finished previewing.
To remove the sound effect, select the words “Audible of 02_Event Button_Push” in the States palette, and click the Delete State button ( ) at the bottom of the palette.
Creating an out rollover state To ensure that the buttons return to their normal state after they’ve been activated, you’ll create an out rollover state that is a duplicate of the normal state. 1 In the States palette, select the normal state. 2 Click the Duplicate State button ( ) at the bottom of the palette. By default, this fourth rollover state becomes the out state. 3 Choose File > Save.
LM_02.book Page 150 Thursday, May 23, 2002 10:05 AM
150 LESSON 8 Creating Basic Rollovers
Labeling the rollover buttons You can add text labels on top of rollover buttons without affecting their rollover behavior.
Creating text labels Text labels are not included as part of the button aliases, so you’ll create each label separately. 1 In the Composition window, click away from the objects to deselect them. 2 In the Color palette, click the black color box in the lower right corner to set a black fill color. 3 In the toolbox, select the type tool (
).
4 Click in the Composition window to set an insertion point. 5 In the Properties palette choose a font and type size (such as Myriad Italic 24 point); then enter 2002. 6 Choose the selection tool ( ) in the toolbox and move the text onto the button at the top of the composition. To change the size of the selected text, enter new settings in the Properties palette. 7 In the 3D palette, choose Bevel from the pop-up menu. (Note: This step will cause the text to output as a bitmap object.) 8 Hold down Alt (Windows) or Option (Mac OS), and drag the selected text to duplicate it for the second and third buttons.
Editing the text labels Adobe LiveMotion gives you several ways to edit the existing text. Now you’ll edit the text copies for the second and third buttons. 1 Double-click the text for the second button in the Composition window to instantly select it with the text tool. Change the text to the year 2003. 2 Double-click the text for the third button. Change the text to the year 2004. You can also select the type tool ( your changes. 3 Choose File > Save.
) and click in the middle of the selected text to make
LM_02.book Page 151 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 151 Classroom in a Book
Linking rollovers to URL addresses You can add URL links to the down states of rollover buttons that go to new Web pages when the buttons are clicked in a Web browser.
Linking a button to another page You’ll use the Web palette to link the down state of the 2002 rollover button to a Web page. 1 Select the 2002 button in the Composition window. (Make sure to select the button, and not the text label.) 2 Choose Window > Web, or click the palette’s tab to display the Web palette. Choose Detail View from the palette menu 3 In the Web palette, enter 2002.html in the URL field. (For external URLs, enter the entire address, such as http://www.adobe.com.) Using the Web palette to add an URL link on one object applies the link to the selected object(s) and does not affect other aliased objects.
4 Enter _blank in the Window field to make the page open in a new, separate browser window. You can also use other options for a URL that goes to a particular frame. 5 Choose File > Save. You’ve finished making basic rollover buttons.
LM_02.book Page 152 Thursday, May 23, 2002 10:05 AM
152 LESSON 8 Creating Basic Rollovers
Use the Web palette to build links for compositions that will be exported as sliced JavaScript rollovers. Compositions that will be exported in the SWF format can use either the Web palette or Scripting to assign URL links.
Exporting the rollover buttons In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson08 folder on your hard drive. 2 Open a Web browser; then locate and open the HTML file that you just exported, and preview the finished file.
LM_02.book Page 155 Thursday, May 23, 2002 10:05 AM
9 Movie Clips and Advanced Rollovers
Interactivity starts with movie clips. Movie clips enable you to animate multi-state rollover buttons so that they move when you click them. You can also set up custom rollover states and apply multiple conditions so that when one rollover is activated, another is activated remotely.
LM_02.book Page 156 Thursday, May 23, 2002 10:05 AM
156 LESSON 9 Movie Clips and Advanced Rollovers
Getting started In this lesson, you’ll learn how to do the following:
• Create movie clip groups. • Incorporate artwork from other LiveMotion files. • Animate a rollover button in different states. • Build masked groups. • Convert Illustrator artwork into a group of objects. • Set up conditions for secondary, remote rollovers. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson09 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by viewing an HTML file of the finished composition in your Web browser. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 09End.html from the Lessons/Lesson09 folder. 3 Click the Preview Mode button (
).
LM_02.book Page 157 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 157 Classroom in a Book
The Launch button and rocket ship are remote rollovers. The Launch button will become active when the Start Ignition button is clicked. The rocket ship will be launched when the Launch button is clicked.
4 Roll the mouse pointer over the Start Ignition button. Notice the pulsing animation. 5 Hold the mouse button down on the Start Ignition button. When the Start Ignition button is clicked, three things happen: the Start Ignition button takes on a depressed appearance, the Launch button is activated, and the rocket’s engine fires. When you release the mouse and when you move the pointer away from the button, the button returns to its original appearance. 6 Click the Launch button. The rocket ship launches into space. Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Building the composition The start file for this lesson contains the interface background objects. To continue building the composition, you’ll place the Start Ignition button and create the Launch button from scratch. 1 Start Adobe LiveMotion.
LM_02.book Page 158 Thursday, May 23, 2002 10:05 AM
158 LESSON 9 Movie Clips and Advanced Rollovers
2 Choose File > Open and open 09Start.liv from the Lessons/Lesson09 folder. You can open the file 09End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 4 Choose File > Place, select the file start_ignition.liv in the Lesson09 folder, and click Open to place the Start Ignition button into the composition. When you place a LiveMotion file into a composition, the placed artwork is grouped by default. The imported group’s center point will correspond to the X-0 Y-0 position of the original file. Before you go any further, you’ll ungroup and regroup the placed artwork to reset the center point. 5 Select the Start Ignition button, and choose Object > Ungroup; then reselect all of the Start Ignition button’s elements and choose Object > Group. 6 Drag the Start Ignition button group to the lower right side of the interface.
Making a movie clip group button By making the start ignition button into a movie clip group, you can animate and transform individual rollover states of the button on a timeline that’s separate from the composition’s timeline.
LM_02.book Page 159 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 159 Classroom in a Book
For an object to be interactive, the object must be made into a movie clip—groups of objects must be made into movie clip groups. Only movie clips or movie clip groups can be controlled by rollovers or scripts. All rollovers are either movie clips (single objects) or movie clip groups (multiple objects). When you start with a simple object or group, the act of creating a second state with the States palette will automatically turn the object or group into a movie clip or movie clip group. These attributes can be ascertained (as well as assigned) with the Object menu. While the buttons in the last lesson were simple movie clips, you’ll turn the Start Ignition button into a movie clip group. 1 Select the Start Ignition group and choose Timeline > Timeline/Composition Window to open the Timeline window. 2 Expand Group of 7 objects > Transform to see the individual elements of the Start Ignition button. Now you’ll make the group into a movie clip group in order to animate the attributes the individual elements of the Start Ignition button. Each element in a movie clip group can be animated over a timeline that’s separate from the composition’s timeline. Each rollover state provides a separate timeline.
Animating rollover states You’ll create three rollover states for the new Start Ignition Button group and apply animation and other effects to the states.
Creating rollover states for the start ignition button By default, every object has a normal rollover state. LiveMotion creates additional rollover states in this order: over, down, and then out. 1 Choose Window > States, or click the palette’s tab to display the States palette. 2 With the Start Ignition Button group selected in the Timeline window, click the New State button ( ) at the bottom of the States palette two times to create an over state and a down state for the Start Ignition button. An icon ( ) next to Group of 7 objects in the Timeline window indicates that the group is a movie clip group. This status is indicated on the object menu, as well.
LM_02.book Page 160 Thursday, May 23, 2002 10:05 AM
160 LESSON 9 Movie Clips and Advanced Rollovers
Notice that a small image of the red button in the States palette indicates that each rollover state is for the Start Ignition Button. 3 Select Group of 7 objects in the Timeline window, and choose Object > Edit Name. Enter Start_Ignition_Button in the Name dialog box and click OK.
Adding a looped pulsing effect to the over state Because each rollover state has its own individual timeline, you can create many different animated effects. Now, you’ll manipulate the gradient on the button surface while it’s in the over state, making the button appear to pulse. 1 In the Timeline window, double-click Start_Ignition_Button (down) to open the movie clip’s own timeline.
LM_02.book Page 161 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 161 Classroom in a Book
All of the objects in the movie clip group are listed. Each of the objects can be animated in this separate, time-independent timeline. With a movie clip displayed in the Timeline window, LiveMotion will gray out the elements in the Composition window, with the exception of the currently displayed movie clip.
2 Select the over state in the States palette. The name of the Start Ignition button changes in the Timeline window to Start_Ignition_Button (over). This is now a separate timeline for the over state of the Start Ignition button. 3 Stretch out the Start_Ignition_Button (over) timeline to 06f.
LM_02.book Page 162 Thursday, May 23, 2002 10:05 AM
162 LESSON 9 Movie Clips and Advanced Rollovers
4 Select red-button_surface (over) in the Timeline and expand its Layer 1 attributes. 5 In the Gradient palette, select Radial from the menu. 6 Click the stopwatch next to Color Gradient Start to add a keyframe at 00s seconds. Move the current-time marker to 03f. In the Gradient palette, click and drag the starting gradient color to the right.
7 Move the current-time marker to 06f in the Timeline. In the Gradient palette, click and drag the starting gradient color to the left. Scrub the current-time marker to observe the pulsing glow. 8 Select Start_Ignition_Button (over) at the top of the Timeline window, and then select the Loop movie clip ( )button at the bottom left of the Timeline. A loop icon is added to the movie clip name in the Timeline window.
9 Click the Preview Mode button ( ). Move the mouse pointer over the Start Ignition button and then move the pointer away from the button to see the changes. 10 Click the Edit Mode button ( the effects. 11 Choose File > Save.
) in the toolbox when you’re done previewing
LM_02.book Page 163 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 163 Classroom in a Book
Adding a pressed button effect to the down state You’ll now create a pressed button effect in Start Ignition button’s down state. Because the button is built from vector objects, this effect lends a realistic feeling to the artwork, without incurring any penalties in file size. 1 With the Start Ignition button selected, select the down state in the States palette. The name of the Start_Ignition_Button group changes in the Timeline window to Start_Ignition_Button (down). This is a separate timeline for the down state of the Start Ignition button. 2 In the Timeline window, select White START IGNITION (down) and then shift-click Dark Cyan START IGNITION (down). 3 Select the Composition window and then press the cursor down arrow twice. This will nudge the START IGNITION text downward by two pixels. (Alternately, you can use the Properties palette to reposition the text.) 4 In the Timeline window, select red-button_surface (down). 5 In the Transform palette, set the rotation to 180. 6 In the Timeline, select red-button_bevel (down). 7 In the Transform palette, set the rotation to 0. 8 Click the Preview Mode button ( ). Move the mouse pointer over the start ignition button, click it, and move the pointer away from the button to see the changes. There should now be three distinctly different states.
The techniques used to create this button yield a three-dimensional appearance without resorting to any effects (such as the 3D palette) that might cause the button to be exported as bitmapped objects. 9 Click the Edit Mode button ( the effects.
) in the toolbox when you’re done previewing
LM_02.book Page 164 Thursday, May 23, 2002 10:05 AM
164 LESSON 9 Movie Clips and Advanced Rollovers
10 Click the arrow at the top left of the Timeline window to step out of the movie clip group timeline and return to the composition timeline. 11 Choose File > Save.
Creating a masked movie clip button Now, you’ll create a masked and animated Launch button. Once you’ve built the Launch button, you’ll turn it into a remove rollover that will be activated by the Start Ignition button. The Launch button, in turn, will do as its name implies, launching the rocket via another remote rollover. You’ll create the launch button in a new LiveMotion Composition window, then drag and drop it into the first composition window. Working in this manner, you’ll start with a blank canvas to make it easier to assemble the components. This also allows you to save the component by itself, in case you want to use it in another composition—or make major changes to it—at a later date.
Creating the components In this section, you’ll create the six objects that will be used to build the launch button. 1 Choose File > New Composition to begin a new composition. 2 In the Composition Settings dialog box, enter 500 for the Width setting and 300 for the Height setting, and click OK. 3 Select the rounded-rectangle tool ( ), and draw a black rounded rectangle. 4 Choose Window > Transform, or click the palette’s tab to display the Transform palette. Enter 240 in the Width ( ) setting and 40 in the Height ( ) setting. 5 Choose Window > Properties, or click the palette’s tab to display the Properties palette. Set the Radius to 20. 6 With the 240 x 40 rectangle selected, choose Edit > Duplicate. Click and drag the duplicate rectangle above the first 240 x 40 rectangle. 7 Duplicate the 240 x 40 rectangle again and then drag it to the top of the composition. In the Properties palette, select Outline and set the Width to 8. 8 Select the rectangle tool ( ), and draw a rectangle. 9 In the Properties palette, select Fill.
LM_02.book Page 165 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 165 Classroom in a Book
10 In the Transform palette, enter 120 in the Width ( Height ( ) setting.
) setting and 40 in the
11 With the 120 x 40 rectangle selected, choose Edit > Duplicate. Click and drag the duplicate to the right of the first 120 x 40 rectangle. 12 Select the type tool (
).
13 In the Properties palette choose a font and type size (such as Myriad Bold 30 point). 14 Click in the Composition window to set an insertion point and then enter LAUNCH.
Copying color and style Adobe LiveMotion allows you to copy not just the color from one element to another, but the style, as well. In this section, you’ll copy colors and styles from the template in the first Composition window to the button in the other window. You’ll then rename each element and set the proper stacking order with the Timeline. 1 Arrange the Composition windows on your monitor so that you can see all of the button elements, and at least part of the template. 2 Select the outlined rounded rectangle. 3 Select the eyedropper tool ( ). Click in the button composition window, hold the mouse down, and drag into the template composition window. Move the cursor to a medium gray-cyan area of the template and release the mouse button. The outlined 240 x 40 rounded rectangle should now be colored medium gray-cyan.
LM_02.book Page 166 Thursday, May 23, 2002 10:05 AM
166 LESSON 9 Movie Clips and Advanced Rollovers
4 Choose the selection tool, then select the second filled 240 x 40 rounded rectangle. 5 Select the eyedropper tool in the toolbox. Click in the button composition window, hold the mouse down, and drag into the template composition window. Move the cursor to the start ignition button on the template, find a nice bright red, and release the mouse button. Now you’ll copy the gradient style—not just the color—from the template to the two 120 x 40 rectangles. While LiveMotion allows you to use the eyedropper tool with a keyboard modifier (Shift) to copy styles within a window, this does not work across windows. 6 Select the template composition window. 7 Select Timeline > Timeline/Composition Window to display the template’s Timeline window (if it’s not displayed). 8 In the Timeline window, select unit and choose Edit > Copy. This copies the unit object to the clipboard. 9 Select the button composition window.
LM_02.book Page 167 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 167 Classroom in a Book
10 Choose the selection tool, select both 120 x 40 rectangles, and choose Edit > Paste Style. The two 120 x 40 rectangles should now have a burst gradient fill.
Naming and reordering the components As your compositions become more complex, it’s important to take the time to name the elements in a descriptive manner. In this example, you’ll rename the objects that comprise the launch button and place them in the proper order, via the Timeline window. 1 In the Timeline window, select the first Rectangle (this should be the rectangle at the left side of the composition), and choose Object > Edit Name. Enter left-slider in the Name dialog box and click OK. 2 In the Timeline window, select the second Rectangle (this should be the rectangle at the right side of the composition), and choose Object > Edit Name. Enter right-slider in the Name dialog box and click OK. Select an object in the Timeline window and then press Enter (Windows) or Return (Mac OS) to access the Name dialog box. 3 Rename the remaining elements: “Medium Gray-Cyan Outlined Rectangle” becomes “bezel,” “Black Rounded Rectangle” becomes “mask,” and “Red Rounded Rectangle” becomes “red-lens.”
LM_02.book Page 168 Thursday, May 23, 2002 10:05 AM
168 LESSON 9 Movie Clips and Advanced Rollovers
Now, you’ll reorder the elements in the Timeline window, by clicking and dragging. 4 In the Timeline window, select Black LAUNCH, then click and drag it downwards, so that it is just above red-lens. Release the mouse button.
5 In the Timeline window, select mask, then click and drag it upwards, so that it is just above left-slider. Release the mouse button. 6 In the Timeline window, select bezel, then click and drag it upwards, so that it is above the mask. Release the mouse button.
LM_02.book Page 169 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 169 Classroom in a Book
The elements should now be in the proper stacking order.
Positioning, grouping, and masking the button You’ll now position the elements so that they’re precisely aligned upon each other, before grouping and masking the button. 1 Choose Edit > Select All to select all of the elements. 2 Choose Object > Align > Centers to center align all of the elements.
3 Choose Edit > Deselect All to deselect all of the elements. 4 Select mask in the Timeline window and then shift-click left-slider. 5 Choose Object > Align > Left to left align the two elements. 6 In the Timeline window, shift-click left-slider to deselect it, then shift-click right-slider. 7 Choose Object > Align > Right to right align the two elements.
8 Choose Edit > Select All to select all of the elements, then shift-click bezel to deselect it. 9 Choose Object > Group to group all of the objects (with the exception of the bezel).
LM_02.book Page 170 Thursday, May 23, 2002 10:05 AM
170 LESSON 9 Movie Clips and Advanced Rollovers
Group of 5 objects appears in the Timeline window. If you expand this group in the Timeline, you’ll see the five original elements. 10 Choose Object > Top Object is Mask. This makes the highest object (the one we’ve conveniently named “mask”) in the group into a mask.
11 In the Timeline window, select Masked Group of 5 objects and then choose Object > Edit Name. Enter launch_button in the Name dialog box, and click OK.
Creating movie clip states The masked group is ready to be turned into a movie clip with custom states. Adding a second state to a group will automatically turn the group into a movie clip group. You’ll animate the second state so the left and right sliders open in a curtain-like manner. (The sliders will be hidden by the mask when they slide outwards.) 1 Select launch_button in the Timeline window. 2 In the States palette, click the New State button to create a new state for the group. The new state will be over, by default. 3 Double-click on the over state in the States palette. Enter ready_to_launch in the Custom State dialog box, and click OK. 4 Double-click on launch_button (ready_to_launch) in the Timeline window to open the movie clip group. 5 Drag the launch_button (ready_to_launch) timeline to 06f. 6 Expand left-slider (ready_to_launch) and right-slider (ready_to_launch) so that the Transform attributes are shown.
LM_02.book Page 171 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 171 Classroom in a Book
7 With the Current Time Indicator at 00s, select left-slider (ready_to_launch); then shiftclick right-slider (ready_to_launch), and click the Position stopwatch. This will set Position keyframes for both objects. 8 Move the Current Time Indicator to 06f. 9 Shift-click right-slider (ready_to_launch) to deselect and select the composition window. Hold down shift, and press the left arrow 12 times. This will nudge the left-slider to the left by 120 pixels (12 nudges x 10 pixels). 10 Select right-slider (ready_to_launch) in the Timeline window, then select the Composition window. Hold down shift, and press the right arrow 12 times. This will nudge the right-slider to the right by 120 pixels.
11 Select the Play button in the Timeline window to preview the animation. 12 Choose File > Save.
Adding a down state Next, you’ll create a down state. 1 Click the arrow at the top left of the Timeline window to step out of the launch_button (current movie clip) timeline and return to the composition timeline.
LM_02.book Page 172 Thursday, May 23, 2002 10:05 AM
172 LESSON 9 Movie Clips and Advanced Rollovers
2 Select launch_button and then select the ready_to_launch state in the State palette. 3 Click the Duplicate State button. This creates an over state, by default. 4 In the States palette, select down from the over state menu. (There will be no over state.) 5 In the Timeline, double-click launch_button (down) to open the movie clip state’s own timeline. 6 Expand left-slider (down) and right-slider (down) so that the Transform attributes are shown. 7 Move the Current Time Indicator to 06f. 8 Select left-slider (down); then shift-click right-slider (down), and click the Position stopwatch. This will clear the Position keyframes for both objects, removing the animation, with the left and right slider objects remaining in their open position. 9 Click the arrow at the top left of the Timeline window to step out of the launch_button timeline and return to the composition timeline. 10 Test the states by selecting them with the States palette. 11 Choose File > Save.
Moving artwork between composition windows Copying artwork between Composition windows can be a drag. And that’s a good thing! You can simply click and drag objects and groups of objects from one Composition window to the next. 1 Choose Edit > Select All to select all of the Launch button elements. (Remember, the bezel is separate from the movie clip group.) 2 Click and drag the Launch button elements into the template Composition window.
LM_02.book Page 173 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 173 Classroom in a Book
3 Choose File > Save.
Using Illustrator artwork as an animated movie clip Adobe LiveMotion provides a high level of control over imported Adobe Illustrator artwork. Now, you’ll turn an imported rocket ship—originally created in Illustrator— into an animated, multi-state movie clip.
Placing and transforming the rocket You won’t have to look far for the rocket ship; it should be sitting in the Library palette. 1 Choose the selection tool. 2 Choose Window > Library, or click the palette’s tab to display the Library palette. 3 From the menu in the top right corner of the palette, choose Name View. 4 Click and drag 17_Rocket into the composition. Don’t select any of the existing objects in the composition when you drag; otherwise, the rocket will replace the selected object(s).
LM_02.book Page 174 Thursday, May 23, 2002 10:05 AM
174 LESSON 9 Movie Clips and Advanced Rollovers
5 Choose Object > Transform > Flip Horizontal. Notice that the rotation handle is now at the top left (after the horizontal flip). 6 Scale the rocket down so that it is roughly half the height of the viewport. Hold down Shift as you click and drag to constrain the proportions. 7 Click on the rocket’s rotation handle (now at the top left) to rotate by 30 degrees. Watch the Transform palette and hold down Shift to constrain the rotation to 15 degree increments.
LM_02.book Page 175 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 175 Classroom in a Book
Converting Illustrator artwork into a group of LiveMotion objects LiveMotion provides a number of ways to convert Illustrator and Photoshop artwork into LiveMotion elements. You can convert artwork into an Object, a Group of Objects, a Sequence, a Sequence with Background, or a Path. In this section, you’ll convert the rocket into a group of objects. 1 Select the rocket. 2 Choose Object > Convert Into > Group of Objects Notice that the rocket’s bounding box has been reset. 3 Choose Object > Edit Name; then enter rocket in the Name dialog box, and click OK. 4 In the Timeline window, expand rocket to see all of the named groups. (These can be further converted into individual elements.) 5 Click and drag Flame below Fuselage in the Timeline.
We want the rocket to appear to be flying past a viewport. This can be achieved by adding a mask to the rocket. 6 Select viewport in the Timeline. 7 Choose Edit > Duplicate to duplicate the viewport. 8 Shift-click rocket in the Timeline. 9 Choose Object > Group and then choose Object > Top Object is Mask.
LM_02.book Page 176 Thursday, May 23, 2002 10:05 AM
176 LESSON 9 Movie Clips and Advanced Rollovers
The rocket is now masked by the duplicate viewport. 10 Choose Object > Edit Name; then enter masked_rocket and click OK.
Creating multiple rocket states The masked rocket will have three states: normal, fired-up, and take-off. 1 Select the rocket. 2 In the States palette, click the New State button twice to create two new states for the rocket. The new states will be over and down, by default. 3 Select the normal state in the States palette. 4 In the Timeline, double-click masked_rocket to open its timeline. 5 Expand rocket and select Flame in the Timeline window. 6 In the Opacity palette, set the Object Opacity to 0. 7 Click the arrow at the top left of the Timeline window to return to the composition timeline. The masked_rocket should still be selected. 8 In the States palette, double-click the over state. Enter fired_up in the Custom State dialog box and click OK. 9 In the Timeline, double-click masked rocket (fired_up) to open the movie clip state’s own timeline. 10 Expand rocket (fired_up) and select Flame (fired_up) in the Timeline. 11 In the Opacity palette, set the Object Opacity to 100. 12 Click the arrow at the top left of the Timeline window to return to the composition timeline. The masked_rocket should still be selected. 13 In the States palette, double-click the down state. Enter take_off in the Custom State dialog box, and click OK. 14 In the Timeline, double-click masked rocket (take_off) to open the movie clip state’s own timeline. 15 Expand rocket (take_off) and select Flame (take_off) in the Timeline. 16 In the Opacity palette, set the Object Opacity to 100. 17 In the Timeline, extend the masked_rocket (take-off) timeline to 09s. 18 Expand rocket (take-off) > Transform.
LM_02.book Page 177 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 177 Classroom in a Book
19 With the current time indicator set to 00s, click the Position and Scale stopwatches to set keyframes. 20 Move the current time indicator to 09s. 21 Choose the selection tool and scale the rocket to fill the viewport; then use the X and Y coordinates in the Transform palette to position the rocket off the right side of the composition. This will make the rocket appear to fly towards the viewport before disappearing from sight. 22 Select the Play button in the Timeline window to preview the take-off animation. 23 Click the arrow at the top left of the Timeline window to return to the composition timeline. 24 Choose File > Save.
Targeting remote rollovers All that’s left now is to assign the remote rollovers. Adobe LiveMotion makes this a pointand-shoot affair. 1 Select the Start Ignition button. 2 In the States palette, select the down state. 3 Click and drag the target icon from the Start Ignition button’s down state in the States palette to the Launch button in the Composition window. Release the mouse button when the Launch button is selected. 4 Below the down state in the States palette, choose the ready_to_launch state from the secondary pop-up menu for the start ignition button.
LM_02.book Page 178 Thursday, May 23, 2002 10:05 AM
178 LESSON 9 Movie Clips and Advanced Rollovers
Pressing the Start Ignition button will now trigger the Launch button to go into the ready_to_launch state. Next, you’ll set up the Launch button to launch the rocket. 5 Select the Launch button. 6 In the States palette, select the down state. 7 Click and drag the target icon from the Launch button’s down state in the States palette to the masked rocket in the Composition window. Release the mouse button when the masked rocket is selected. 8 Below the down state in the States palette, choose the take_off state from the secondary pop-up menu for the masked rocket.
9 Select the Preview in the toolbox to preview the take-off animation. 10 Choose File > Save. You’ve finished making an animated rollover and a pair of remote rollovers.
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson09 folder on your hard drive. Open a Web browser; then locate and open the file 09Start.html that you just exported to preview the finished file.
LM_02.book Page 181 Thursday, May 23, 2002 10:05 AM
10 Basic Player Script Interactivity
Adobe LiveMotion’s scripting capability provides interactive control over the composition timeline as well as individual movie clip timelines. Complex compositions are often created as separate component files which are then placed into a final composition timeline. Once the components have been assembled, they can be wired together with scripts.
LM_02.book Page 182 Thursday, May 23, 2002 10:05 AM
182 LESSON 10 Basic Player Script Interactivity
Getting started In this lesson, you’ll learn how to do the following:
• Assemble multiple animations into one composition. • Create transitions between scenes. • Use labels in the composition and movie clip timelines. • Work with the Script Editor to add interactivity. • Create a Wait for Download behavior. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson10 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3. You’ll begin this lesson by using your Web browser to view a copy of the finished Web animation. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 10End.html from the Lessons/Lesson10 folder. 3 Click the word “play” to see the main composition. 4 Move the pointer over the four destination buttons on the inside car door, and click to see the different animations.
LM_02.book Page 183 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 183 Classroom in a Book
The animation consists of three sequences: an opening title sequence, followed by an animation of a hand reaching for a car door, followed by an interactive animation that allows the viewer to choose their destination from one of four locales.
The three segments of the animation.
Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Opening the file In this first part of the lesson, you’ll open the start file and Timeline window. 1 Start Adobe LiveMotion. 2 Choose File > Open, and open the start file 10Start.liv from the Lessons/Lesson10 folder.
You can open the file 10End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file.
LM_02.book Page 184 Thursday, May 23, 2002 10:05 AM
184 LESSON 10 Basic Player Script Interactivity
3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 4 Choose Timeline > Timeline/Composition Window to display the Timeline window. 5 In the Timeline window, make sure the current-time marker is at 00:00 and then click the Play button ( ) to play the animation. The start file includes the artwork for the opening (title) sequence, which lasts for five seconds. You’ll add three files to the composition to create the finished movie you saw in the browser: the outer door scene, the interactive animation of the road trip, and a window controller. The road trip uses looping landscapes, so the viewer can ride for as long as their heart desires.
Building the composite movie In the last lesson, you assembled the rocket controller by placing the Start Ignition button from a separate file. As your LiveMotion compositions become more complex, you’ll find that this technique will come in handy.
Placing the files 1 In the Timeline window, set the current-time marker to 05:00. By setting the current-time marker to a specific time (05:00), you’ll place the second scene precisely at that time. 2 Choose File > Place, and open outer_door_and_arm from the Lessons/Lesson10/ Source folder. When the second scene is added, the composition timeline is automatically extended.
3 Set the current-time marker to 07:00.
LM_02.book Page 185 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 185 Classroom in a Book
4 Choose File > Place, and open inner_door_group from the Lessons/Lesson10/ Source folder. 5 Choose File > Place, and open window_control from the Lessons/Lesson10/ Source folder.
Positioning the scenes Now that you have all of the elements in the composition, you’ll need to position each properly on the canvas. 1 In the Timeline window, select outer_door_and_arm; and then set X to 0 and Y to -14 with the Transform palette. 2 In the Timeline window, select inner_door_group; and then set X to -896 and Y to 0. 3 In the Timeline window, select window_control; and then set to 345 and Y to 242.
4 Move the current-time marker to 00:00, and play the animation to preview your work. 5 Choose File > Save.
LM_02.book Page 186 Thursday, May 23, 2002 10:05 AM
186 LESSON 10 Basic Player Script Interactivity
Using transitions between scenes As you previewed the movie in its current state, you may have noticed that the scenes cut abruptly. That’s fine in some cases. At other times, however, you may want to create fluid transitions between scenes. One way to do this is to animate a simple object that overlaps both scenes. In the following exercises, you’ll add two different variations of this technique.
Adding the first transition The first transition provides a segue between the title sequence and the scene in which the hand reaches for the door. A spinning yellow rectangle carries the playful opening title into the movie. 1 In the Timeline window, set the current-time marker to 04:06. 2 Select the rectangle tool ( ) in the toolbox. In the Composition window, create a rectangle, just a little smaller than the dot at the bottom of the question mark. About 19 pixels wide by 16 pixels high should do. 3 Select the selection tool ( ) in the toolbox, then click and drag the rectangle you just drew. Position the new rectangle on top of the dot at the bottom of the question mark. 4 Rotate the rectangle 33 degrees (approximately) with the Transform palette.
5 With the rectangle still selected, select the eyedropper tool ( ) in the toolbox. Click in the yellow text so that the rectangle takes on the same color as the text. 6 In the Timeline window, expand Yellow Rectangle > Transform; then, click its Position, Rotation, and Scale stopwatches to set keyframes.
LM_02.book Page 187 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 187 Classroom in a Book
7 Set the current-time marker to 05:00. 8 Set the Yellow Rectangle’s rotation to 360 degrees with the Transform palette; then, set its width to 420, height to 320, X to -10, and Y to -10. 9 Click the Yellow Rectangle’s Object Opacity stopwatch to set a keyframe. 10 Set the current-time marker to 05:02. 11 In the Opacity palette, set Object Opacity to 0. 12 Click and drag the Yellow Rectangle’s timeline so that it ends at 5:02.
13 Collapse the Yellow Rectangle’s attributes in the Timeline window. 14 Move the current-time marker to 00:00, and play the animation. 15 Choose File > Save. The opacity fade at the end of the transition is very subtle. You can see it more clearly by scrubbing the current-time marker.
LM_02.book Page 188 Thursday, May 23, 2002 10:05 AM
188 LESSON 10 Basic Player Script Interactivity
Adding the second transition The second transition falls between the hand reaching for the exterior door and the interior door scene. A simple sliding rectangle adds a slamming door effect. 1 Set the current-time marker to 06:09. 2 Select the rectangle tool ( ) in the toolbox. In the Composition window, create a black rectangle, 400 pixels wide by 300 pixels high. 3 In the Transform palette, set the Black Rectangle’s X to -400 and Y to 0. 4 In the Timeline window, expand Black Rectangle > Transform, and click its Position stopwatch to set a keyframe. 5 Set the current-time marker to 07:00. 6 In the Transform palette, set the Black Rectangle’s X to 0 and Y to 0. 7 Click and drag the Black Rectangle’s timeline so that it ends at 7:00. Scrub the current-time marker to get a feel for the transition.
The view at 06:11
8 Move the current-time marker to 00:00, and play the animation to preview your work. 9 Choose File > Save.
Using the Script Editor Now that all of the bits and pieces are in position, it’s time to wire them together with LiveMotion 2.0’s Script Editor. You’ll start out by wiring the window_control to the window itself. When you’re done, clicking the down arrow button will lower the window, while clicking the up arrow button will raise the window.
LM_02.book Page 189 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 189 Classroom in a Book
Check the window states 1 In the Timeline window, expand inner_door_group; then double-click the inner_door movie clip to drill down into its timeline. Within the inner_door movie clip, you’ll see all of the components of the door, along with the landscape images (mountains, city, beach, and home), and the window movie clip.
2 Double-click the window movie clip to drill down into its timeline. 3 Select the window movie clip in the Timeline window and then select the States palette. The window movie clip has three states: normal, roll_down, and roll_up. 4 Select the roll_down state in the States palette. 5 In the Timeline window, expand window_and_highlight (roll_down) > Transform
The position animation has been created for you. Scrub the current-time marker to see how the semi-transparent window_and_highlight group moves from a closed to an open position. A similar animation has been created for the roll_up state.
LM_02.book Page 190 Thursday, May 23, 2002 10:05 AM
190 LESSON 10 Basic Player Script Interactivity
Target the roll_up state All you need to do is target the window’s states with the appropriate buttons. 1 Click the arrow at the top left corner of the Timeline window twice, to return to the composition timeline. 2 Expand window_control in the Timeline window and then select the up_arrow movie clip. The up-arrow movie clip has three states: normal, over, and down. 3 Select the down state in the States palette and then click the Edit State Script button. This will summon the Script Editor.
4 In the Script Editor, select the Handler scripts button and then select onButtonPress from the drop-down menu.
When you switch to the onButtonPress event handler, you’ll notice that a line of code has already been added to the state:
LM_02.book Page 191 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 191 Classroom in a Book
this.lmSetCurrentState(“down”);
The line of code explains that on button press, the down state will be applied to this (the up-arrow) movie clip. You’re going to add another line of code that will wire this state to window movie clip’s roll_up state. 5 Place the cursor in the script window, just to the right of the semi-colon; then click and press Enter (Windows) or Return (Mac). This will add a second (blank) line to the script. 6 Select the Scripting syntax helper button at the top left corner of the Script Editor and then expand LM 1.0 Behaviors. 7 Double-click the Change State behavior. A second line of code will be added to the script: this.lmSetCurrentState(STATENAME);
You’ll need to edit this new line of code, so that it properly targets the window movie clip’s roll-up state. While you could do this by hand, the Script Editor allows you to point-andclick your way through the procedure. 8 Double-click this in the second line of code. 9 Select the Composition browser button at the top left corner of the Script Editor and then expand the Composition, if necessary. 10 Navigate through the elements in the Script Editor’s Composition browser listing; double-click the window movie clip.
LM_02.book Page 192 Thursday, May 23, 2002 10:05 AM
192 LESSON 10 Basic Player Script Interactivity
Notice that this has been changed to _parent.inner_door.window. The proper movie clip has been targeted. Now it’s time to set the state. 11 Double-click STATENAME in the second line of code. 12 Double-click roll_up in the Script Editor’s Composition browser listing. 13 Close the Script Editor. 14 Select Preview Mode from the toolbox to preview the movie. Click on the up_arrow to see what happens.
Fix the script Lo and behold, the Debugger window pops up! The Debugger tells us that roll_up is undefined. Lets fix that.
1 Close the Debugger window by clicking on the Kill button (the big red X). 2 Select Scripts > Script Editor. 3 Select the Movie Clip Navigator button at the top left corner of the Script Editor. Select up_arrow from the listing and then select onButtonPress from the drop-down menu. 4 Take a look at the two lines of code. What looks different? If the quote marks are missing from the roll_up state, you’ll need to add them for the script to be able to perform. Click between ( and roll_up; then add a quote mark. Next, add a quote mark between roll_up and ). The line of code should now read:
LM_02.book Page 193 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 193 Classroom in a Book
_parent.inner_door.window.lmSetCurrentState(“roll-up”);
5 Select Preview Mode from the toolbox to preview the movie. Click on the up_arrow to see what happens. The window should roll up each time the roll_up button is clicked. 6 Choose File > Save.
Scripting the down_arrow Now that the line of code is working for the up_arrow, you don’t have to write the down_arrow code from scratch. Instead, you can save time by copying the script from the up-arrow to the down_arrow. Just make a change to the targeted state and you’ll be good to go. 1 In the Script Editor, triple-click the second line of the up_arrow’s onButtonPress state. 2 Select Edit > Copy. 3 In the Script Editor, select down_arrow from the Movie Clip Navigator listing and select onButtonPress from the drop-down menu, if necessary. 4 Click in the script window, under the first line of code. 5 Select Edit > Paste. 6 Edit the line of pasted code, so that it targets the roll-down state. _parent.inner_door.window.lmSetCurrentState (“roll-down”);
7 Select Preview Mode from the toolbox to preview the movie. Click on both the down_arrow and the up_arrow to see what happens. 8 Choose File > Save.
LM_02.book Page 194 Thursday, May 23, 2002 10:05 AM
194 LESSON 10 Basic Player Script Interactivity
Creating looping landscapes The inner_door movie clip contains four states, each with a different panoramic Photoshop file. Three of those landscapes—the mountain, beach, and city scenes—have been prepared so as to create the illusion of a seamless looping background. In this next section, the position animation has once again been completed for you. All you’ll need to do is add labels and small scripts to create the three looping backgrounds.
Adding a label and script to the beach state You might think of labels as flags that can be placed in any timeline, whether it be in a composition, movie clip, or in this case, movie clip state. In the following steps, you’ll add a label to the beginning of the beach state’s timeline. You’ll then target the label with a script placed at the end of the beach state’s timeline. 1 In the Timeline window, click the arrow at the top left corner until it returns to the Composition level; then expand inner_door_group and double-click on the inner_door movie clip to drill down. 2 Select inner_door in the Timeline window and then select the beach state in the States palette. (It may take a few moments for the beach state’s timeline to be displayed.) 3 Expand beach_scene.psd (beach) > Transform in the Timeline window.
Note that the starting and ending Position keyframes have been preset. 4 With the current-time marker at 00:00 in the Timeline window, click the Label button. 5 Name the label beach_start and click OK.
LM_02.book Page 195 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 195 Classroom in a Book
6 Move the current-time marker to 02:00 in the Timeline window and then click the Script button. This will summon the Script Editor. The drop-down menu will show 02:00 as the current location of the keyframe script. 7 Select the Scripting syntax helper button at the top left corner of the Script Editor. 8 Expand LM 1.0 Behaviors in the Scripting syntax helper listing, if necessary, and double-click Go to Label (and play). A new line of code will be displayed in the Script Editor: this.gotoAndPlay(LABEL);
9 Select LABEL in the Script Editor, and replace it with “beach_start” so that the line reads: this.gotoAndPlay(“beach start”);
10 Close the Script Editor.
The beach state is now set up to loop.
Adding labels and scripts to the mountain and city states You’ll follow the same procedure to add labels and scripts to the mountain and city states. 1 With inner_door selected in the Timeline window, select the mountain state in the States palette. 2 Expand the_mountains_scene.psd (mountain) > Transform in the Timeline window to see the Position keyframes. 3 With the current-time marker at 00:00 in the Timeline window, click the Label button. 4 Name the label mountain_start and then click OK.
LM_02.book Page 196 Thursday, May 23, 2002 10:05 AM
196 LESSON 10 Basic Player Script Interactivity
Move the current-time marker to 01:06 in the Timeline window and then click the Script button. This will summon the Script Editor. The drop-down menu will show 01:06 as the current location of the keyframe script. 5 Double-click double click Go to Label (and play) in the Scripting syntax helper listing. A new line of code will be displayed in the Script Editor: this.gotoAndPlay(LABEL);
6 Select LABEL in the Script Editor, and replace it with “mountain_start” so that the line reads: this.gotoAndPlay(“mountain start”);
7 Close the Script Editor. The mountain state is now set up to loop. 8 With inner_door still selected in the Timeline window, select the city state in the States palette. 9 Expand the_city_scene.psd (city) > Transform in the Timeline window to see the Position keyframes. 10 With the current-time marker at 00:00 in the Timeline window, click the Label button. 11 Name the label city_start and then click OK. Move the current-time marker to 01:06 in the Timeline window and then click the Script button. This will summon the Script Editor. The drop-down menu will show 01:06 as the current location of the keyframe script. 12 Double-click double click Go to Label (and play) in the Scripting syntax helper listing. A new line of code will be displayed in the Script Editor: this.gotoAndPlay(LABEL);
13 Select LABEL in the Script Editor, and replace it with “city_start” so that the line reads: this.gotoAndPlay(“city start”);
14 Close the Script Editor. 15 The city state is now set up to loop.
LM_02.book Page 197 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 197 Classroom in a Book
Targeting the inner_door states Now that the beach, mountains, and city states are set up to loop, it’s time to target them with the trip_buttons.
Target the beach state 1 In the Timeline window, click the arrow at the top left corner until it returns to the Composition level, and then expand trip_buttons. 2 Select beach_button in the Timeline window, select the down state in the States palette. 3 Click the Edit State Script button in the States palette to summon the Script Editor. 4 Click the Handler scripts button at the top of the Script Editor. 5 Select onButtonPress from the drop-down menu. A line of code will be displayed in the Script Editor: 6
this.lmSetCurrentState(“down”);
7 Place the cursor in the script window, just to the right of the semi-colon; then click and press Enter (Windows) or Return (Mac). This will add a second (blank) line to the script. 8 Select the Scripting syntax helper button at the top left corner of the Script Editor and then expand LM 1.0 Behaviors. 9 Double-click the Change State behavior in the Scripting syntax helper listing. A second line of code will be added to the script: this.lmSetCurrentState(STATENAME);
10 Double-click this in the second line of code. 11 Select the Composition browser button at the top left corner of the Script Editor and then expand the Composition, if necessary. 12 Navigate through the elements in the Script Editor’s Composition browser listing. Double-click inner_door. Notice that this has been changed to _root.inner_door. The proper movie clip has been targeted. Now it’s time to set the state. 13 Double-click STATENAME in the second line of code. Replace STATENAME with “beach”. The second line should now read: _root.inner_door.lmSetCurrentState(“beach”);
LM_02.book Page 198 Thursday, May 23, 2002 10:05 AM
198 LESSON 10 Basic Player Script Interactivity
The beach_button should now be properly wired to the inner_door’s beach state.
Targeting the mountain, city, and home states Remember the copy and paste trick you used earlier for the down_arrow? Once again, you can save time by copying the script from the beach state to the other states. The only change you’ll need to make in each script is the targeted state. 1 In the Script Editor, triple-click the second line of the beach state’s onButtonPress event handler. 2 Select Edit > Copy. 3 In the Script Editor, select mountains_button from the Movie Clip Navigator listing. Select onButtonPress from the drop-down menu, if necessary. 4 Place the cursor in the script window, just to the right of the semi-colon; then click and press Enter (Windows) or Return (Mac) to add a second line to the script. 5 Select Edit > Paste. 6 Edit the line of pasted code, so that it targets the roll-down state. _root.inner_door.lmSetCurrentState (“mountain”);
That should take care of the mountain state. Let’s move on to the city state. 7 In the Script Editor, select city_button from the Movie Clip Navigator listing. Select onButtonPress from the drop-down menu, if necessary. 8 Place the cursor in the script window, just to the right of the semi-colon; then click and press Enter (Windows) or Return (Mac) to add a second line to the script.
LM_02.book Page 199 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 199 Classroom in a Book
9 Select Edit > Paste. 10 Edit the line of pasted code, so that it targets the roll-down state. _root.inner_door.lmSetCurrentState (“city”);
Now it’s on to the home (and final) state. 11 In the Script Editor, select home_button from the Movie Clip Navigator listing. Select onButtonPress from the drop-down menu, if necessary. 12 Place the cursor in the script window, just to the right of the semi-colon; then click and press Enter (Windows) or Return (Mac) to add a second line to the script. 13 Select Edit > Paste. 14 Edit the line of pasted code, so that it targets the roll-down state. _root.inner_door.lmSetCurrentState (“home”);
15 Close the Script Editor. 16 Select Preview Mode from the toolbox to preview the movie. Click on the beach, mountains, city, and home buttons to see what happens. 17 Choose File > Save.
Creating a preloader Composition preloaders tell the player to wait for a specified event before playing an animation. This helps to avoid stuttered playback, where the player stalls while waiting for content to download over the network. With the composition preloaded, the movie plays smoothly from the client browser’s cache. In the following section, you’ll create a simple preloader. You’ll start by adding two labels to the composition timeline. You’ll then use the Script Editor to add a wait for download behavior.
Adding labels to the composition timeline Let’s start by adding the two labels: 1 In the Timeline window, click the arrow at the top left corner until it returns to the Composition level. 2 Set the current-time marker to 00:00 in the Timeline window. Click the Label button.
LM_02.book Page 200 Thursday, May 23, 2002 10:05 AM
200 LESSON 10 Basic Player Script Interactivity
3 Name the label start and then click OK. 4 Set the current-time marker to 08:05 in the Timeline window. Click the Label button. 5 Name the label end and then click OK.
Adding the wait for download behavior to the timeline Now, you’ll add the wait for download script: 1 Set the current-time marker to 00:03 in the Timeline window and then click the Scripts button. This will summon the Script Editor. The drop-down menu will show 00:03 as the current location of the keyframe script. 2 Select the Scripting syntax helper button at the top left corner of the Script Editor. 3 Expand LM 1.0 Behaviors in the Scripting syntax helper listing, if necessary, and double-click Wait for Download. A new snippet of code will be displayed in the Script Editor.
4 Select FINISHLABEL in the Script Editor, and replace it with “end”. 5 Select REPEATLABEL in the Script Editor, and replace it with “start”. 6 Close the Script Editor.
LM_02.book Page 201 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 201 Classroom in a Book
Adding the “downloading” text With the preloader in place, you’ll want to add the word downloading to the beginning of the composition. The word will be displayed only while the browser waits for the movie to download. 1 Set the current-time marker to 00:00 in the Timeline window. 2 Select the type tool (
) in the toolbox.
3 In the Properties palette choose a font and type size (such as Myriad Bold 18 point). 4 Select white from the Color palette. 5 Click near the bottom right corner of the Composition window to set an insertion point and then enter downloading. 6 In the Timeline window, click and drag downloading’s ending time so that it ends at 00:03. 7 Choose File > Save. You’ve finished building the animation! It can be difficult to see the preloader in action when viewing the file from your computer’s hard drive. To get the full effect, you’ll want to upload the movie to a Web server and view it over the Internet.
LM_02.book Page 202 Thursday, May 23, 2002 10:05 AM
202 LESSON 10 Basic Player Script Interactivity
Exporting the finished composition In this final part of the lesson, you’ll export the LiveMotion composition you made and view it in a Web browser. For more information on exporting, see Lesson 15, “Exporting.” 1 Choose File > Export, and save the file in the Lesson10 folder on your hard drive. 2 Open a Web browser; then locate and open the 10Start.html file you just exported to preview the finished file.
LM_02.book Page 205 Thursday, May 23, 2002 10:05 AM
11 Adding Sounds to Your Composition
In the same way that you add image files, you can add sound files to a composition timeline or to movie clips within your composition. When you place a sound file, Adobe LiveMotion creates an object for it in the Timeline window. Adobe LiveMotion supports most common sound formats, including AIFF, WAV, and MP3.
LM_02.book Page 206 Thursday, May 23, 2002 10:05 AM
206 LESSON 11 Adding Sounds to Your Composition
Getting started In this lesson, you’ll learn how to do the following:
• Add streaming sound to a composition. • Add sound to a movie clip group. • Create a looping effect that makes a sound play continuously. • Use the Solo Event Sound property. • Create a controller to turn a looping sound on and off. • Add a sound volume controller. This lesson takes approximately 30 minutes to complete. You’ll begin this lesson by viewing the final composition in a Web browser. If needed, remove the previous lesson folder from your hard drive and copy the Lesson11 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For information, see “Copying the Classroom in a Book files” on page 3. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 11End.html from the Lessons/Lesson11 folder. 3 When the movie loads, you’ll hear the first music clip stream in the browser. Once you’re inside the car, click the four location buttons to see the different animations and hear the sounds. This lesson uses sound files from the Lessons/Lesson11 folder and LiveMotion 2.0 Library that you’ll add to the composition. You’ll place the first sound into the composition and make it into a streaming sound. You’ll then add four additional sounds and use a special technique to make each sound play continuously along with its animation. Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
LM_02.book Page 207 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 207 Classroom in a Book
Opening the composition The start file for this lesson contains a movie clip group with four state (destination) animations, along with four movie clip groups/rollover buttons for activating the animation. You’ll start by adding a streaming sound to the beginning of the composition. You’ll then add four sounds in their own movie clip groups and set the sounds up to play when the animations are triggered to play. 1 Start Adobe LiveMotion. 2 Choose File > Open and open the start file 11Start.liv from the Lessons/Lesson11 folder.
You can open the file 11End.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings.
LM_02.book Page 208 Thursday, May 23, 2002 10:05 AM
208 LESSON 11 Adding Sounds to Your Composition
Using MP3 compressed 16-bit sounds It makes sense to use 16-bit sounds rather than 8-bit sounds in your SWF animations. The sound quality of the 16-bit sounds is much better, and there are no gaps when you loop the animations. This does not mean that you have to double the size of your animations. Because Adobe LiveMotion compresses sound into MP3 format when you export your composition to SWF format, the file size difference is much less significant between 8-bit and 16-bit sounds.
Sound file
Sound file size
Exported SWF file size
16-bit
1.3 MB
84k
8-bit
684k
80k
Adding a streaming sound You’ll place a 16-bit sound file within the main composition timeline, and apply the Streaming property to the sound. 1 Choose Window > Timeline to open the Timeline window. 2 Move the current-time marker to 00:04. 3 Choose File > Place and open the file song.aif from the Lessons/Lesson11/folder. A Song (Event) object appears in the Timeline window for the sound file. 4 Choose Window > Properties or click the palette’s tab to display the Properties palette. 5 With the Song (Event) object selected in the Timeline window, choose Streaming Sound from the pop-up menu in the Properties palette. The sound should now appear as Song (Streaming) in the Timeline window. By placing the Song sound at 00:04, you’ve ensured that the sound will not play until the entire composition has loaded (see the preloader section of Lesson 10). 6 With the song (Streaming) object still selected in the Timeline window, choose Object > Make Movie Clip Group. 7 Select Group of 1 objects in the Timeline window, choose Object > Edit Name. Type intro_song and then click OK.
LM_02.book Page 209 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 209 Classroom in a Book
8 Choose File > Save to save your work. 9 Chose File > Preview in > your browser of choice to watch the movie and hear the streaming sound.
Adding a looping city sound Sound loops are a popular choice for SWF movies—by playing continuously, they provide a flexible sound track. You’ll place a 16-bit sound file within the main timeline and make it a movie clip group. You’ll then use a special technique to make the sound play continuously, and add a bit of script to stop the sound from playing unless called upon. 1 In the Timeline window, move the current-time marker to 07:00 2 At the Sounds palette, select 14_Loop_Percussion; then click the Apply Sound button. 3 In the Timeline window, select 14_Loop_Percussion (Event), and choose Object > Make Movie Clip Group. 4 With Group of 1 Objects selected in the Timeline window, choose Object > Edit Name, enter city_music, and click OK. 5 Choose Timeline > Loop. 6 Double-click on city_music in the Timeline window to drill down into the city_music movie clip group. 7 With the current-time marker at 00:00 in the Timeline window, click the Labels button.
LM_02.book Page 210 Thursday, May 23, 2002 10:05 AM
210 LESSON 11 Adding Sounds to Your Composition
8 Name the label start and click OK.
9 In the Timeline window, click the left arrow ( ) in the upper left corner to go back to the Composition timeline. 10 In the Timeline window, select city_music, and choose Object > Make Movie Clip Group. This will nest the city_music movie clip group into another (container) movie clip group. In the next step, you’ll name the container appropriately. 11 With Group of 1 Objects selected in the Timeline window, choose Object > Edit Name, enter city_music_container, and click OK. 12 Double-click on city_music_container in the Timeline window to drill down into the movie clip group. 13 Click and drag the city_music_container duration bar to extend it to 00:03. 14 Click and drag the starting time of city_music movie clip to 00:01. 15 With the current-time marker at 00:00 in the Timeline window, click the Labels button. 16 Name the label stop and then click OK.
LM_02.book Page 211 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 211 Classroom in a Book
17 Click the Scripts button. 18 In the Script Editor, click the Scripting Syntax Helper button and then expand ActionScript Syntax Helpers > ActionScript Globals > Methods. 19 Double-click stop().
Once you become proficient with scripting, you will find it far more expedient to simply type the script into the Script Editor window—especially in cases like this.
LM_02.book Page 212 Thursday, May 23, 2002 10:05 AM
212 LESSON 11 Adding Sounds to Your Composition
20 Close the Script Editor. 21 Move the current-time marker to 00:01 in the Timeline window. 22 Click the Scripts button. 23 In the Script Editor, (if necessary) click the Scripting Syntax Helper button, and then expand ActionScript Syntax Helpers > ActionScript Globals > Methods. 24 Double-click gotoAndStop(). 25 Click the Composition browser button in the Script Editor. 26 Click at the start of the editing window, just in front of gotoAndStop(label). 27 Double-click city_music_container in the Scripting Syntax Helper list. 28 Click between _root.city_music_container and gotoAndStop(label) in the editing window, and add a “.”. 29 Double-click label in the editing window. 30 Double-click the stop label below city_music_container in the Scripting Syntax Helper list.
This targets the stop label in the city_music_container movie clip group and completes the movie clip work for the first looping sound. Next, you’ll change the sound property. 31 Close the Script Editor.
LM_02.book Page 213 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 213 Classroom in a Book
Changing the property to a solo event sound Event Sound is the default property for sounds placed in a LiveMotion composition. Event sounds are downloaded completely before they play, and they’re stored in memory so they can be reused. Solo event sounds also contain a flag to stop playing other occurrences of the same sound. For example, if you have a sound that is triggered to play while an animation is playing continuously and the animation starts over before the sound has finished playing, the flag in a solo event sound will stop another occurrence of the sound from playing on top of the first one. Note: Overlapping occurrences of a sound is not noticeable in LiveMotion Preview Mode. To test the effect of the Solo Event Sound, you must preview the composition in a browser. To change the property to Solo Event Sound: 1 Choose Window > Properties or click the palette’s tab to display the Properties palette. 2 Drill down into the city_music movie clip group. 3 Select 14_Loop_Percussion (Event) in the Timeline window, and choose Solo Event Sound from the pop-up menu in the Properties palette.
4 Choose File > Save. You can also use the Properties palette to change the volume and pan (shifting a stereo signal from one channel to the other) of sounds over time. The first Volume or Pan keyframe must be at the first frame of the sound object, and you cannot add more than six keyframes per sound object.
LM_02.book Page 214 Thursday, May 23, 2002 10:05 AM
214 LESSON 11 Adding Sounds to Your Composition
Building the home loop Once you’ve built the first music and container movie clip groups, you’ll save time by duplicating the movie clip groups to create the three additional looping sounds. You’ll then modify the duplicates with new names and sound files, and make tweaks to the scripts. 1 In the Timeline window, click the left arrow ( )in the upper left corner twice to go back to the Composition timeline. 2 Select city_music_container in the Timeline window. 3 Select Edit > Duplicate. Do this twice more, to create a total of four city_music_container movie clip groups.
4 Select the first city_music_container in the Timeline window. 5 Choose Object > Edit Name, enter home_music_container, and click OK. 6 Double click home_music_container in the Timeline window to drill down into the movie clip group’s timeline. 7 Select city_music in the Timeline window. 8 Choose Object > Edit Name, enter home_music, and click OK. 9 Double-click the script at 00:01 to open the Script Editor. 10 Edit the line of code to read: _root.home_music_container.gotoAndStop(“stop”)
LM_02.book Page 215 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 215 Classroom in a Book
11 Close the Script Editor. 12 In the Timeline window, double-click home_music to drill down into the movie clip group’s timeline. 13 Select 14_Loop_Percussion (Solo Event) in the Timeline window and delete it. 14 At the Sounds palette, select 13_Loop_Acoustic, and then click the Apply Sound button. The 13_Loop_Acoustic sound file will be placed into the movie clip. Now you’ll need to change it’s property to Solo Event. 15 Select 13_Loop_Acoustic (Event) in the Timeline window, and choose Solo Event Sound from the pop-up menu in the Properties palette.
Building the beach loop 1 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go back to the Composition timeline. 2 Select the next city_music_container in the Timeline window. 3 Choose Object > Edit Name, enter beach_music_container, and click OK. 4 In the Timeline window, double-click beach_music_container to drill down into the movie clip group’s timeline. 5 Select city_music in the Timeline window. 6 Choose Object > Edit Name, enter beach_music, and click OK. 7 Double-click the script at 00:01 to open the Script Editor. 8 Edit the line of code to read: _root.beach_music_container.gotoAndStop(“stop”)
9 Close the Script Editor. 10 In the Timeline window, double-click beach_music to drill down into the movie clip group’s timeline. 11 Select 14_Loop_Percussion (Solo Event) in the Timeline window and delete it. 12 At the Sounds palette, select 11_Loop_Guitar, and then click the Apply Sound button. The 11_Loop_Guitar sound file will be placed into the movie clip. Now you’ll need to change its property to Solo Event.
LM_02.book Page 216 Thursday, May 23, 2002 10:05 AM
216 LESSON 11 Adding Sounds to Your Composition
13 Select 11_Loop_Guitar (Event) in the Timeline window, and choose Solo Event Sound from the pop-up menu in the Properties palette.
Building the mountain loop 1 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go back to the Composition timeline. 2 Select the next to last city_music_container in the Timeline window. 3 Choose Object > Edit Name, enter mountain_music_container, and click OK. 4 In the Timeline window, double-click mountain_music_container to drill down into the movie clip group’s timeline. 5 Select city_music in the Timeline window. 6 Choose Object > Edit Name, enter mountain_music, and click OK. 7 Double-click the script at 00:01 to open the Script Editor. 8 Edit the line of code to read: _root.mountain_music_container.gotoAndStop(“stop”)
9 Close the Script Editor. 10 In the Timeline window, double-click mountain_music to drill down into the movie clip group’s timeline. 11 Select 14_Loop_Percussion (Solo Event) in the Timeline window and delete it. 12 At the Sounds palette, select 15_Loop_RainyDay, and then click the Apply Sound button. The 15_Loop_RainyDay sound file will be placed into the movie clip. Now you’ll need to change its property to Solo Event. 13 Select 15_Loop_RainyDay (Event) in the Timeline window, and choose Solo Event Sound from the pop-up menu in the Properties palette. 14 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go back to the Composition timeline.
LM_02.book Page 217 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 217 Classroom in a Book
Wiring the location buttons to their looping sound tracks Now, you’ll wire each of the location buttons to their respective looping sound tracks. The script in each button’s onButtonPress event will halt the previous sound loop, before playing the current loop. 1 Select Scripts > Script Editor. 2 Click the Movie Clip Navigator button in the Script Editor, and then select city_button from the list. 3 Click the Handler scripts button in the Script Editor, and then select onButtonPress from the pop-up menu. 4 Edit the code to read: this.lmSetCurrentState("down"); _root.inner_door.lmSetCurrentState("city"); _root.mountain_music_container.mountain_music.gotoAndStop("start"); _root.beach_music_container.beach_music.gotoAndStop("start"); _root.home_music_container.home_music.gotoAndStop("start"); stopAllSounds(); _root.city_music_container.play();
LM_02.book Page 218 Thursday, May 23, 2002 10:05 AM
218 LESSON 11 Adding Sounds to Your Composition
5 Click the Movie Clip Navigator button in the Script Editor, and then select mountain_button from the list. 6 Edit the mountain_button script onButtonPress script to read: this.lmSetCurrentState("down"); _root.inner_door.lmSetCurrentState("mountain"); _root.city_music_container.city_music.gotoAndStop("start"); _root.beach_music_container.beach_music.gotoAndStop("start"); _root.home_music_container.home_music.gotoAndStop("start"); stopAllSounds(); _root.mountain_music_container.play();
7 Click the Movie Clip Navigator button in the Script Editor, and then select beach_button from the list. 8 Edit the beach_button script onButtonPress script to read: this.lmSetCurrentState("down"); _root.inner_door.lmSetCurrentState("beach"); _root.mountain_music_container.mountain_music.gotoAndStop("start"); _root.city_music_container.city_music.gotoAndStop("start"); _root.home_music_container.home_music.gotoAndStop("start"); stopAllSounds(); _root.beach_music_container.play();
9 Click the Movie Clip Navigator button in the Script Editor, and then select home_button from the list. 10 Edit the home_button script onButtonPress script to read: this.lmSetCurrentState("down"); _root.inner_door.lmSetCurrentState("home"); _root.mountain_music_container.mountain_music.gotoAndStop("start"); _root.beach_music_container.beach_music.gotoAndStop("start"); _root.city_music_container.city_music.gotoAndStop("start"); stopAllSounds(); _root.home_music_container.play();
11 Close the Script Editor. 12 Choose File > Save. 13 Select File > Preview in > your browser of choice.
LM_02.book Page 219 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 219 Classroom in a Book
Adding a volume controller Through scripting, you can provide your audience with the ability to adjust the sound level of your movies. We’ve preassembled a sound controller for you. All you’ll need to do is drop it into the movie. This modular volume controller contains a Stop All Sounds behavior, in addition to the volume controls; it can be reused and reworked for any LiveMotion composition. 1 In the Timeline window, move the current-time marker to 07:00 2 Choose File > Place, and open sound_controller from the Lessons/Lesson11/ Source folder. 3 Select Group of 1 objects in the Timeline window. 4 Choose Object > Edit Name, enter sound_ controller, and click OK. 5 Select sound_controller in the Timeline window. Click and drag it between window_control and inner_door_group.
6 Move the current-time marker to 07:01 in the Timeline window. 7 Use the Transform palette to position sound_controller with the approximate coordinates: X 285 Y 245. 8 Choose File > Save. 9 Select File > Preview in > your browser of choice.
LM_02.book Page 220 Thursday, May 23, 2002 10:05 AM
220 LESSON 11 Adding Sounds to Your Composition
10 Click each of the location buttons, listen to the music, and play with the volume controller.
Exporting the composition to SWF format You’ll export the composition to HTML and SWF formats, and then preview it in a browser. Note: Because of the amount of animation and sound in the composition, it will take LiveMotion a bit of time to render and export the file. 1 Choose File > Export Settings to open the Export palette. 2 In the Export palette, verify these settings: SWF, Export HTML Page, JPEG, 50 for Quality, 6 for Opacity Resolution. Click the Sound tab and select MP3: Auto Bit Rate and Convert To Mono. Click the last tab and select Frame Rate: Document Rate.
LM_02.book Page 221 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 221 Classroom in a Book
3 Choose File > Export As, name the file with the .swf extension, and click Save to save the file in the Lessons/Lesson11 folder. Adobe LiveMotion creates an HTML file and a SWF file of your final composition, as well as an HTML file that contains a report on the export settings. 4 Start a Web browser that can display SWF file format files, navigate to the Lessons/Lesson11 folder, and open the HTML file of your composition.
LM_02.book Page 225 Thursday, May 23, 2002 10:05 AM
12 Working with Dynamic Data
LiveMotion’s dynamic text fields allow your visitors to enter and retrieve customized information as variables. When you store data in variables, that data can be verified, manipulated, and submitted.
LM_02.book Page 226 Thursday, May 23, 2002 10:05 AM
226 LESSON 12 Working with Dynamic Data
Getting started In this lesson, you’ll learn how to do the following:
• Assemble a multi-page form. • Use variable data fields for input and output. • Create a password field. • Use checkboxes to store variables. This lesson takes approximately 45 minutes to complete. You’ll begin this lesson by viewing the final composition in a Web browser. If needed, remove the previous lesson folder from your hard drive and copy the Lesson12 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For information, see “Copying the Classroom in a Book files” on page 3. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 12End.html from the Lessons/Lesson12/End folder. 3 Enter a name and password (swordfish) in all lower case, and then click the enter button to explore the form. Fill in some form data on the next screen, and proceed through the form. Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
LM_02.book Page 227 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 227 Classroom in a Book
Variables Until this point, our scripting has been fairly basic. Compositions have reacted to OnButtonPress rollovers, and they’ve jumped around in the timeline. But we haven’t worked with user data. For that, you’ll need to use variables. Variables allow you to collect information from user input. Once that information is collected, it’s stored under specific names, so that the data can be called upon and manipulated. You might think of variables as cubby holes, or perhaps a wall of mailboxes in a post office. Each of those cubby holes has a specific name, so that the mail (data) gets stored in the right place until it is needed. The value of the data in each cubby hole can change at any time. There are three basic types of variable:
• Strings — most often used to store user input, strings contain a sequence of alphanumeric characters, i.e.: Joe Smith or 123 Main Street. • Numbers — used to store numeric values. • Booleans — true or false values.
LM_02.book Page 228 Thursday, May 23, 2002 10:05 AM
228 LESSON 12 Working with Dynamic Data
Building the name/password input screen The first part of the lesson will use string variables to build a form for submitting scores to a soccer club. You’ll use the dynamic text tool to create input fields and add a bit of scripting to perform a simple password check. 1 Start Adobe LiveMotion. 2 Choose File > Open and open the first start file 12Start_1.liv from the Lessons/ Lesson12/Start folder.
You can open the file 12End_main.liv at any time during the lesson to check your progress against the finished LiveMotion version of the file. 3 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 4 Choose Window > Timeline to open the Timeline window.
Creating the name field The first field you create will be a name field. 1 Select the text field tool ( ) in the toolbox. Click in the composition window next to the word Name, and drag to create a text field. 2 Choose the selection tool in the toolbox. The new text field should be approximately 175 pixels wide by 30 pixels high. Adjust the size as necessary via the Transform palette. 3 At the Properties palette, select the Allow user input in text field option.
LM_02.book Page 229 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 229 Classroom in a Book
4 Enter coach_name in the Properties palette’s Var field. Set the typeface to Myriad, the style to Roman, and the point size to 18.
5 Click the arrow at the top right of the Properties palette; then select Border and Background from the menu. 6 Click and drag the new text field so that it aligns with the word Name.
Creating the password field The next field you create will be a password field. Password fields differ from standard text fields; they obscure the user input so that the password is not visible. The password attribute is assigned via the Properties palette. In this next section, you’ll save time by duplicating the first text field. 1 Select the text field and then select Edit > Duplicate. 2 Click and drag the duplicate text field so that it aligns with the word Password. 3 Click the arrow at the top right of the Properties palette and then select Password from the menu. 4 Enter coach_password in the Properties palette’s Var field.
LM_02.book Page 230 Thursday, May 23, 2002 10:05 AM
230 LESSON 12 Working with Dynamic Data
Set a label and a stop in the timeline Now, you’ll add a start label to the beginning of the composition and a stop script to the third frame. These two landmarks will help to provide some traffic control. 1 With the current-time marker at 00:00 in the Timeline window, click the Label button. 2 Name the label form_start and then click OK. 3 Move the current-time marker to 00:03 in the Timeline window, and click the Script button. This will summon the Script Editor. The drop-down menu will show 00:03 as the current location of the keyframe script. Type: stop()
4 Close the Script Editor. This will stop the composition at 00:03. 5 Shorten the timelines of all of the objects (except for the Soccer Score-O-Matic headline) to 00:03 by clicking and dragging their end time markers to the left.
6 Move the current-time marker to 00:04 in the Timeline window. 7 Select the text tool from the toolbox, click in the composition, and type Password Verified. 8 Choose the selection tool from the toolbox, and select a light green color for the text from the Color palette. At the Properties palette, change the typeface to Myriad Bold; then, click and drag the Password Verified text to center it in the middle of the composition.
LM_02.book Page 231 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 231 Classroom in a Book
Scripting the password Now that you have a name and password fields, and some timeline control, you’ll need a way to validate the password. A simple way to do this is to perform the password checking with a movie clip. In this case, you’ll use the enter_button movie clip to check for a valid password. This can be accomplished by adding two snippets of code. 1 In the Timeline window, move the current time indicator to 00:03. 2 Select the enter_button movie clip. The enter_button movie clip has three states: normal, over, and down. 3 Select Scripts > Script Editor. 4 In the Script Editor, select the Handler scripts button and then select onLoad from the drop-down menu. Type: the_password = "swordfish"
This establishes the word swordfish as the_password variable. 5 Select onButtonPress from the drop-down menu in the Script Editor. Place the cursor at the end of the first line of script, and press Return (Mac) or Enter (Windows) to create a second line; then type: if (_root.coach_password == the_password) { _root.play() } else { _root.gotoAndPlay("form_start"); }
LM_02.book Page 232 Thursday, May 23, 2002 10:05 AM
232 LESSON 12 Working with Dynamic Data
This simple little script checks to see if the data entered in the _root.coach_password variable is equal to the variable you defined as the_password in the onLoad handler. If they are equal (in this case, the password swordfish), the composition plays and the words Password Verified are displayed in the browser. If the data entered in the field does not equal swordfish, the composition returns to the form_start label and then waits for more input. 6 Close the Script Editor. 7 Select preview mode from the toolbox. 8 Try entering a name and password to see what happens. If an error was made in typing the code snippets, LiveMotion’s Debugger window will show you the problem. 9 Select edit mode from the toolbox. 10 Choose File > Save. 11 Select File > Preview in > your browser of choice. It’s best to check interactive forms in a browser. (The text entered into the password field will not be obscured in LiveMotion’s internal preview mode.) When you preview the file in a browser, anything you enter in the Name field will appear, while anything you enter in the Password field will be replaced by asterisks. Try entering an incorrect password first, then try entering the correct password.
LM_02.book Page 233 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 233 Classroom in a Book
Adding a whoops! movie_clip Perhaps that’s a little too subtle for our coaches. Let’s add a little visual and audio cue to get them to enter a correct password. We’ve pre assembled an invalid_password movie clip. You can just drop it into the movie. 1 In the Timeline window, move the current-time marker to 00:00 2 Choose File > Place, and open invalid.liv from the Lessons/Lesson12/Source folder. 3 Select invalid_password in the Composition window. Click and drag it below the password text field.
The invalid_password movie clip has two states: normal and invalid. The text is visible in its invalid state, and invisible in the normal state.
4 Shorten the timelines of invalid_password movie clip to 00:03 by clicking and dragging its end time marker to the left.
5 Select the enter_button movie clip, then select Scripts > Script Editor to open the Script Editor. 6 Select onButtonPress from the drop-down menu in the Script Editor. Add one line to the script so that it reads:
LM_02.book Page 234 Thursday, May 23, 2002 10:05 AM
234 LESSON 12 Working with Dynamic Data
if (_root.coach_password == the_password) { _root.play() } else { _root.gotoAndPlay("form_start"); _root.invalid_password.lmSetCurrentState("invalid"); }
7 Close the Script Editor. This wires the enter_button to the invalid_password movie clip’s invalid state. If the user enters an invalid password (once again, anything other than swordfish) the composition will return to the form_start label and the invalid_password movie clip will change to the invalid state. 8 Choose File > Save. 9 Select File > Preview in > your browser of choice. Try entering an incorrect password.
Building the game data input screen Now that you’ve successfully set up the first screen of the form, you can move onto the second screen. In the second screen, you’ll collect the game information: game date, teams, scores, home or away, and the number of paid referees. To do this, you’ll use the text field tool to create five more text fields. In addition, you’ll place a pair of checkbox movie clips (to collect the home/away and referee data).
Add the static text In this section, you’ll create five separate chunks of static (not dynamic) text to identify the text fields. 1 In the Timeline window, extend the composition time to 01:00, and move the currenttime marker to 00:07 2 Shorten the Password Verified timeline to 00:06 by clicking and dragging its end time marker to the left. 3 Select black from the Color palette and then select the type tool from the toolbox. 4 Click the left side of the composition to set an insertion point. 5 Select Myriad Bold, a font size of 18, and right align from the Properties palette; then type Date:. 6 Set a new insertion point below the word Date: and then type Our Team:.
LM_02.book Page 235 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 235 Classroom in a Book
7 Set a new insertion point below the words Our Team: and then type Their Team:. 8 Set a new insertion point below the words Their Team: and then type # of Paid Refs:. 9 Set a new insertion point at the top right of the composition and then type Score:. 10 Choose the selection tool from the toolbox, and reposition the text as necessary. Use Object > Align to right align all of the text chunks (with the exception of Score:) on the left side of the composition. Place Score at the upper right side of the composition.
Add the dynamic text fields Now it’s time to add five more dynamic text fields. 1 Select the text field tool ( ). Click in the Composition window, next to the word Date:, and drag to create a text field. 2 Choose the selection tool in the toolbox. The new text field should be approximately 175 pixels wide by 30 pixels high. Adjust the size as necessary via the Transform palette. 3 At the Properties palette, select the allow user input in text field option and then enter game_date in the Properties palette’s Var field. Select left align. 4 Click the arrow at the top right of the Properties palette; then select Border and Background from the menu. 5 Click and drag the new text field so that it aligns with the word Date:. 6 Use this procedure (or Edit > Duplicate) to create four more dynamic text fields, for a total of five. Name each with the Properties palette’s Var field: our_team, their_team, our_score, their_score. (The our_score and their_score fields should be 60 pixels wide by 30 pixels high.) Align the fields as required.
LM_02.book Page 236 Thursday, May 23, 2002 10:05 AM
236 LESSON 12 Working with Dynamic Data
7 Choose File > Save.
Using checkbox movie clips to store variables There are lots of different ways to store variables. At the beginning of this lesson, you placed the coach_password variable into the enter_button movie clip. And you’ve just created a whole bunch of dynamic text fields to store the user’s variable information. Now, you’re going to allow the user to store variables with a checkbox movie clip. 1 Choose File > Place, and open home_or_away.liv from the Lessons/Lesson12/ Source folder. 2 Select the home_away_checkboxes movie clip group in the composition window. Click and drag the movie clip group to the bottom of the composition. 3 In the Timeline window, double-click home_away_checkboxes to open the movie clip group’s timeline. Notice that it contains two movie clip groups: home_checkbox and away_checkbox. 4 Select home_checkbox in the Timeline window and then take note of the States palette. The home_checkbox movie clip group contains three states: normal, down, and selected.
LM_02.book Page 237 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 237 Classroom in a Book
The home_checkbox and away_checkbox use simple little scripts to affect each other. When one checkbox is selected, it tells the other checkbox to change to its normal state. "Hey, I’m selected and you’re not!" In addition, the script stores the applicable variable information (in _root.home_away). With the home_checkbox selected, open up the Script Editor and take a look at the onButtonRelease state: this.lmSetCurrentState("selected"); // set other checkbox to normal state _parent.away_checkbox.lmSetCurrentState("normal"); // set variable _root.home_away = "1"
Now, select the Script Editor’s Movie Clip Navigator button, and select the away_checkbox in the list. The onButtonRelease script provides the flip side of the coin: this.lmSetCurrentState("selected"); // set other checkbox to normal state _parent.home_checkbox.lmSetCurrentState("normal"); // set variable _root.home_away = "2"
There’s one more checkbox movie clip group to place. 5 Close the Script Editor. 6 In the Timeline window, click the left arrow in the upper left corner to go back to the Composition timeline. 7 Choose File > Place, and open ref_checkboxes.liv from the Lessons/Lesson12/ Source folder. 8 Select ref_checkboxes movie clip group in the composition window. Click and drag it next to the # of Paid Refs text.
LM_02.book Page 238 Thursday, May 23, 2002 10:05 AM
238 LESSON 12 Working with Dynamic Data
The scripting has been completed in the ref_checkboxes movie clip group, as well. Using the same scheme as the Home/Away arrangement, the ref_checkboxes movie clip group stores its variable as _root.number_of_refs.
Add a button and set another stop in the timeline You need to add a button and set another stop script to the ninth frame to provide traffic control. With the current time indicator set to 00:07 in the Timeline window: 1 Choose File > Place, and open check_button.liv from the Lessons/Lesson12/ Source folder. 2 Select check_button movie clip group in the composition window. Click and drag it to the lower right corner of the composition.
3 Move the current-time marker to 00:09 in the Timeline window, and click the Script button. This will summon the Script Editor. The drop-down menu will show 00:09 as the current location of the keyframe script. Type: stop()
LM_02.book Page 239 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 239 Classroom in a Book
This will stop the composition at 00:09. 4 Close the Script Editor. 5 Shorten the timelines of all of the current objects (except for the Soccer Score-O-Matic headline) to 00:09 by clicking and dragging their end time markers to the left.
6 Select the check_button movie clip group and open the Script Editor. 7 Select the onButtonPress state, add a second line, and type: _root.play()
8 Close the Script Editor.
Dynamic text fields are for output, too Most of your work up until this point has been to store away the variable information. Now it’s time to create some output fields to display that information. Output fields are created in the same manner as input fields—you use the text field tool to draw the field and the Properties palette to define the attributes. If you want an output field to display the contents of a variable stored with an input field, you use the same variable name (leave the Properties palette’s Allow user input in text field button unchecked).
LM_02.book Page 240 Thursday, May 23, 2002 10:05 AM
240 LESSON 12 Working with Dynamic Data
If you want an output field to display the contents of a variable stored by other means, like the Home/Away or # of Refs checkbox movie clip groups, you enter the applicable variable name in the Properties palette. Again, you’ll leave the Properties palette’s Allow user input in text field button unchecked.
Adding the name and date output fields Let’s start by adding two output fields. 1 Move the current-time marker to 00:10 in the Timeline window. 2 Select black from the Color palette and then select the type tool from the toolbox. 3 Click the left side of the composition to set an insertion point. 4 Select Myriad Bold, a font size of 18, and right align from the Properties palette; then type Thank you,. 5 Set a new insertion point below the words Thank you, and type for reporting on your game of:. 6 Select the text field tool ( ). Click in the Composition window, next to the words Thank you, and drag to create a text field. 7 Choose the selection tool in the toolbox. 8 The new text field should be approximately 175 pixels wide by 30 pixels high. Adjust the size as necessary via the Transform palette.
9 Select the text field tool ( ), then click in the Composition window, next to the second line of text (for reporting on your game of), and drag to create a text field. 10 Choose the selection tool in the toolbox.
LM_02.book Page 241 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 241 Classroom in a Book
11 The new text field should be approximately 90 pixels wide by 30 pixels high. Adjust the size as necessary via the Transform palette. 12 At the Properties palette, enter game_date in the Properties palette’s Var field. 13 Choose File > Save. 14 Select File > Preview in > your browser of choice.
Add the results fields Now it’s time to add the results fields. Three of the movie clips in this group (outcome_output, refs_output, and home_away_output) look at the variables, and change states, dependent upon the value of each variable. 1 Make sure that the current-time marker is still at 00:10 in the Timeline window. 2 Choose File > Place, and open results.liv from the Lessons/Lesson12/Source folder. 3 Select the light green results box in the composition window. Click and drag it to the bottom of the composition.
4 The results box may have been placed as a movie clip group. If so, you’ll want to turn off the movie clip attribute. Select Object > Movie Clip. 5 Choose File > Save. 6 Select File > Preview in > your browser of choice. 7 In the Timeline window, expand Group of 14 objects. 8 Select outcome_output, then select Scripts > Script Editor. Take a look at the if else statement in the movie clips onLoad handler. The script has been written to determine whether your team won, lost, or tied the game.
LM_02.book Page 242 Thursday, May 23, 2002 10:05 AM
242 LESSON 12 Working with Dynamic Data
The refs_output and home_away_output movie clips use if else statements in their onLoad handlers, as well. Take a look at how their scripts work in the Script Editor by selecting them with in the Movie Clip Navigator. 9 Close the Script Editor.
Add the final pieces Let’s wrap this up by wiring in the back and submit buttons. This will give our coaches one last look at their game information before submission. 1 Move the current-time marker to 00:07 in the Timeline window, click the Label button. 2 Name the label screen2_start and then click OK. 3 Move the current-time marker to 01:00 in the Timeline window, and click the Script button. The Script Editor will show 01:00 as the current location of the keyframe script. Type: stop()
4 Close the Script Editor. This will stop the composition at 01:00. 5 Select the back_button in the Timeline window and then Select Scripts > Script Editor to open the Script Editor. In the onButtonPress handler, type: _root.gotoAndPlay("screen2_start");
6 Select the Movie Clip Navigator in the Script Editor and then select submit_button.
LM_02.book Page 243 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 243 Classroom in a Book
7 In the submit_button’s onButtonPress handler, type: _root.play()
8 Close the Script Editor. 9 In the Timeline window, extend the composition time to 01:02, and move the currenttime marker to 01:01. 10 Shorten the timelines of all of the objects (except for the Soccer Score-O-Matic headline) to 01:00 by clicking and dragging their end time markers to the left. 11 Select the text tool from the toolbox, click in the composition, and type Game Data Submitted. You’re done building your form. The only piece that remains is to submit the data to a Web server. This can be done through various methods, including HTTP or XML. While this is beyond the scope of this lesson, you’ll find details in the Adobe LiveMotion Scripting Guide.
Exporting the composition to SWF format You’ll export the composition to HTML and SWF formats and then preview it in a browser. 1 Choose File > Export Settings to open the Export palette. 2 In the Export palette, verify these settings: SWF, Export HTML Page. 3 Choose File > Export As, name the file with the .swf extension, and click Save to save the file in the Lessons/Lesson12 folder. Adobe LiveMotion creates an HTML file and a SWF file of your final composition as well as an HTML file that contains a report on the export settings. 4 Start a Web browser that can display SWF file format files, navigate to the Lessons/Lesson12 folder and open the HTML file of your composition.
LM_02.book Page 253 Thursday, May 23, 2002 10:05 AM
13 Advanced Interactivity: The Game
LiveMotion’s scripting capabilities allow you to create fun and exciting games— and it doesn’t even take a boatload of scripting savvy to produce an entertaining game. With a ready-made script on which to base your project, you can turn out a cool game without a major investment in time. By altering the graphics, you can quickly adapt an existing game to create an entirely different look and feel.
LM_02.book Page 254 Thursday, May 23, 2002 10:05 AM
254 LESSON 13 Advanced Interactivity: The Game
Getting started In this lesson, you’ll learn how to do the following:
• Identify basic game components. • Adjust game settings. • Update an existing game. This lesson takes approximately 60 minutes to complete. You’ll begin this lesson by viewing the final composition in a Web browser. If needed, remove the previous lesson folder from your hard drive and copy the Lesson13 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For information, see “Copying the Classroom in a Book files” on page 3. 1 Start a Web browser that can display SWF file format files, such as Netscape Communicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed, animation will not be visible.) 2 Use the browser to open the file 13End.html from the Lessons/Lesson13 folder. Start your engines! Note: If you do not have enough memory to run a browser and LiveMotion at the same time, quit the browser after viewing the animation.
Opening the composition The start file for this lesson contains the complete working game. 1 Start Adobe LiveMotion.
LM_02.book Page 255 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 255 Classroom in a Book
2 Choose File > Open and open the start file 13Start.liv from the Lessons/Lesson13 folder.
Getting started with game design This lesson gives you a working game to fiddle with. You can play the SWF file as a user, and tweak the LIV file as a designer. Game design is a huge subject—a topic too large to tackle fully in just one lesson. That’s why we’ve provided a complete working game, with all of the elements. Once you’ve completed this lesson, you can adapt the game to suit your needs. This basic race car game can become any one of a number of games. Replace the car with a rocket and the road hazards with asteroids and satellites, and you’ll have a fun space game. Or try using a fish and floating trash to create a pollution awareness game. The sky’s the limit.
Common game elements Most games contain a common group of components. When planning out your game, you’ll usually include an intro screen, a playing field, and a game-over screen.
LM_02.book Page 256 Thursday, May 23, 2002 10:05 AM
256 LESSON 13 Advanced Interactivity: The Game
The intro screen often uses three elements: a preloader, splash graphics, and game instructions. The preloader sets up the first frame so that the movie waits for the entire file to load. The splash graphics may use images from the game along with some fun typography. The instructions tell the player the basics of the game. Simple games can get away with one screen to cover all of these functions; more complex games may break these functions into individual screens.
Our race car game does not use a preloader, as it has a small file size. The game will merely sit and wait until the start button is clicked.
The playing field consists of backdrop graphics, over which the action takes place. The action ensues when the player takes control over the actors (movie clips). A score box (text field) tells the player how they’re doing. The game-over screen tells the player whether they’ve won or lost. In addition, the gameover screen gives the player the opportunity to play the game again.
LM_02.book Page 257 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 257 Classroom in a Book
Movie clips are your actors As you’ve learned in earlier lessons, only movie clips or movie clip groups can be controlled through user or script interaction. Movie clips can be controlled through mouse and keyboard input. In the case of our race car game, the user controls the car movie clip with the left and right arrow keys.
Race car game mechanics The race car game uses two actors–the car and hazard movie clip groups–and a scriptonly movie clip (actions) to spark things off. One large script in the composition’s onLoad handler provides all of the smarts; this script is initialized by the actions movie clip. The actions movie clip serves as a hidden trigger mechanism. The composition’s onLoad handler script sets up the conditions for both the car and hazards. The car and hazards are also hidden. The movie clip groups hide just off screen; the onLoad handler script moves them into view.
LM_02.book Page 258 Thursday, May 23, 2002 10:05 AM
258 LESSON 13 Advanced Interactivity: The Game
The car movie clip group The car movie clip group contains various views of the racer on labeled frames. This provides a straight-ahead view, in addition to left-turn and right-turn views, and a multiframe crash sequence. A stop script in frame 00:00:00 holds the car steady until the left or right arrow keys are pressed.
The race car’s left, still, and right views.
The race car’s spin sequence.
The hazard movie clip group The hazard movie clip group contains three objects: an orange pylon, a black and white striped construction barrier, and a black oil slick. A script on frame 00:00:00 sets up the variable to randomly generate one of the three hazards: var l = "haz" + Math.floor(Math.random()*3); this.gotoAndStop(l);
The hazards.
LM_02.book Page 259 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 259 Classroom in a Book
The composition onLoad script While there are basic comments in the composition’s onLoad script, let’s take a closer look at what’s happening in each section of the script. The initGame function gets the game off and running. To begin, the initGame function sets the range of hazard clips before it initializes the maximum number of crashes (5). InitGame then sets the number of hazards to pass (50) before it sets the road speed and time delay. Finally, initGame sets the car’s xy position in the movie (x = 275, y = 300). function initGame() { // the range of Hazard clips _root.firstHazard = 1; _root.lastHazard = 0;
// init the number of crashes _root.crashes = 0; _root.maxCrashes = 5; _root.spills = _root.crashes;
// set the number of hazards to pass _root.totalhazards = 50;
// initialize the road speed and time delay _root.timeSinceLastHazard = 0; _root.roadSpeed = 0;
// create the car so that it is on top of the hazards _root.the_car.swapDepths(9999); _root.the_car._x = 275; _root.the_car._y = 300; }
LM_02.book Page 260 Thursday, May 23, 2002 10:05 AM
260 LESSON 13 Advanced Interactivity: The Game
The moveCar function provides directional control over the race car, via the left and right arrow keys, using the Key.isDown commands. The function starts out by telling the script to ignore the arrow keys if the car is in the midst of a crash. MoveCar then checks for the total number of crashes, before it allows directional control. The car movie clip consists of a number of labeled frames. If the left arrow key is pressed, the car movie clip jumps to the left frame where the car appears to be veering to the left. Conversely, if the right arrow key is pressed, the car movie clip jumps to the right frame where the car appears to be veering to the right. The speed of the left and right movement is governed by the road speed, while the range of movement is limited to the area between 150 and 400 pixels. function moveCar() { if (_root.the_car._currentFrame > 4) { // if during a crash, don't look at keys dx = 0; if (_root.crashes <= _root.maxCrashes) { _root.the_car.gotoAndStop("still"); } } else if (Key.isDown(Key.RIGHT)) { // car moves right dx = _root.roadSpeed; _root.the_car.gotoAndStop("right"); } else if (Key.isDown(Key.LEFT)) { // car moves left dx = -_root.roadSpeed; _root.the_car.gotoAndStop("left"); } else { // no key dx = 0; _root.the_car.gotoAndStop("still"); }
LM_02.book Page 261 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 261 Classroom in a Book
// move the car and limit that movement _root.the_car._x += dx; if (_root.the_car._x < 150) _root.the_car._x = 150; if (_root.the_car._x > 400) _root.the_car._x = 400;
// go a little faster if (_root.roadSpeed < 20) _root.roadSpeed += .5; }
The newHazard function controls the creation of hazards. It checks for the time between hazards, starting only if the total number of hazards has not been exceeded. It then creates a new hazard with the duplicateMovieClip command and uses a bit of randomness to place the hazard. Finally, the newHazard function sets the time delay and checks to see if the hazard was struck before decreasing the time between hazards. function newHazard() { // only add a new hazard if it has been long enough if (_root.timeSinceLastHazard > 5) {
// only start if there are more hazards if
(_root.lastHazard < _root.totalhazards) {
// only add 10% of the time if (Math.random() < .1) {
// create next Hazard and set its location _root.lastHazard++; _root.Hazard.duplicateMovieClip("Hazard"+_root.lastHazard, _root.lastHazard); _root["Hazard"+_root.lastHazard]._x = Math.random()*250+150;
LM_02.book Page 262 Thursday, May 23, 2002 10:05 AM
262 LESSON 13 Advanced Interactivity: The Game
_root["Hazard"+_root.lastHazard]._y = -50;
// reset time delay for next Hazard _root.timeSinceLastHazard = 0;
// init whether Hazard was hit _root["Hazard"+i].hit = false; } } }
// even if no Hazard added, get closer to next Hazard _root.timeSinceLastHazard++; }
The moveHazards function gives the game its feeling of speed. Since the road doesn't actually move, the movement of hazards provides the illusion that the road is rushing by. Just as importantly, the hit conditions are set. If a hazard is struck, the car movie clip jumps to the crash frame–the car is spun and brought to a stop, before it heads back on its way. After that, the script checks to see if the maximum number of crashes has been met, thus ending the game. If the maximum number of crashes has not been met, the play resumes and the hazards continue to move. function moveHazards() { // loop through all existing Hazard clips for (i=_root.firstHazard;i<=_root.lastHazard;i++) {
// get Hazard location x = _root["Hazard"+i]._x; y = _root["Hazard"+i]._y + _root.roadSpeed; // see if Hazard reached past bottom
LM_02.book Page 263 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 263 Classroom in a Book
if (y > 450) _root.removeHazard(i); // to have a hit, Hazard must not have been hit before // and Hazard and car are close enough else if ((_root["Hazard"+i].hit == false)&&(Math.abs(y-_root.the_car._y) < 60)&&(Math.abs(x_root.the_car._x) < 25)) { _root.crashes += 1;
// note that Hazard was hit _root["Hazard"+i].hit = true; // spin racecar _root.the_car.gotoAndPlay("crash"); _root.spills = _root.crashes; // stop racecar _root.roadSpeed = 0;
// is game over? if (_root.crashes > _root.maxCrashes) { _root.removeAll(); _root.gotoAndPlay("lose"); }
} //continue to move Hazard _root["Hazard"+i]._y = y; } }
The removeHazard function removes Hazard movie clips at the end of their voyage from the top of the screen to the bottom. function removeHazard(n) {
LM_02.book Page 264 Thursday, May 23, 2002 10:05 AM
264 LESSON 13 Advanced Interactivity: The Game
// take away Hazard movie clip _root["Hazard"+n].removeMovieClip();
// reset range of hazards to move _root.firstHazard = n+1;
// see if this was the last Hazard if (n == _root.totalhazards) { _root.removeAll(); _root.gotoAndPlay("win"); } }
The removeAll function uses the removeMovieClip command at the end of the game to clean up any remaining hazards, in addition to the car. function removeAll() { // take away all remaining hazards for (i=_root.firstHazard;i<=_root.lastHazard;i++) { _root["Hazard"+i].removeMovieClip(); } _root.the_car.removeMovieClip(); }
Now, let’s take a look at the actions movie clip.
The actions movie clip To start the game, the actions movie clip calls four functions. One call is placed in the action movie clip group’s onLoad handler, while the other three calls are placed in the action movie clip group’s onEnterFrame handler. This script is placed into the actions movie clip’s onLoad handler: _root.initGame();
LM_02.book Page 265 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 265 Classroom in a Book
This script is placed into the actions movie clip’s onEnterFrame handler: _root.moveCar(); _root.newHazard(); _root.moveHazards();
Modifying the game The race car game can be easily modified. It only takes a smattering of keystrokes to change the duration or difficulty level of the game. A complete change of look and feel is as difficult as you want to make it; swap in some new graphics and you’ll have an entirely different gaming environment.
Make the game shorter To make the game shorter, reduce the number of crashes from 5 to 3, and total number of hazards from 50 to 25. Use the Script Editor to alter the following two settings in the composition’s onLoad handler. Change: _root.maxCrashes = 5;
to: _root.maxCrashes = 3;
Change: _root.totalhazards = 50;
to: _root.totalhazards = 25;
LM_02.book Page 266 Thursday, May 23, 2002 10:05 AM
266 LESSON 13 Advanced Interactivity: The Game
Make the game more difficult To make the game more difficult, slide the race car upwards in the playing field, using the_car’s y coordinate setting. This will reduce the amount of time the player has to react to the oncoming hazards. Use the Script Editor to alter the following line of code in the composition’s onLoad handler. Change: _root.the_car._y = 300;
to: _root.the_car._y = 200;
You may have noticed that the car’s hit area is overly generous; you really have to nail a hazard squarely to initiate the crash sequence. This characteristic can be altered by tweaking one line of code in the composition’s onLoad handler to expand the hit area to a more realistic proportion. Change: else if ((_root["Hazard"+i].hit == false)&&(Math.abs(y-_root.the_car._y) < 60)&&(Math.abs(x_root.the_car._x) < 25)) {
to: else if ((_root["Hazard"+i].hit == false)&&(Math.abs(y-_root.the_car._y) < 60)&&(Math.abs(x_root.the_car._x) < 60)) {
Altering the graphics The race car game was built with modification in mind. Just dive into those movie clip groups and get to work! With a handful of tweaks, you can alter the existing graphics to yield a more exciting environment. On your own, try adding a flashing light to the black and white construction barrier or some snappy speed lines to the race car. The crash sequence begs for improvement, as well.
LM_02.book Page 267 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 267 Classroom in a Book
Exporting the composition to SWF format You’ll export the composition to HTML and SWF formats, and then preview it in a browser. 1 Choose Window > Export to open the Export palette, and make sure that Export HTML Page is selected. 2 Choose File > Export As, name the file with the .swf extension, and click Save to save the file in the Lessons/Lesson13 folder. Adobe LiveMotion creates an HTML file and a SWF file of your final composition as well as an HTML file that contains a report on the export settings. 3 Start a Web browser that can display SWF file format files, navigate to the Lessons/Lesson13 folder, and open the HTML file of your composition. 4 Click the start button. Good luck on your race!
LM_02.book Page 271 Thursday, May 23, 2002 10:05 AM
14 Writing Automation Scripts and Live Tabs
LiveMotion 2.0’s new automation tools take the tedium out of performing the same operations over and over. The first of these tools is automation scripting, which leverages the power of JavaScript to control LiveMotion and carry out repetitive tasks. Secondly, Live Tabs take automation to the next level by allowing you to build custom interfaces that collect user input and feed the information to your automation scripts.
LM_02.book Page 272 Thursday, May 23, 2002 10:05 AM
272 LESSON 14 Writing Automation Scripts and Live Tabs
Getting started In this lesson, you’ll learn how to do the following:
• Use automation scripts to create new LiveMotion objects. • Use the Script Editor to edit and debug automation scripts. • Use the Automation menu to load automation scripts and Live Tabs. • Create a Live Tab that makes 3D-style buttons with customizable features. This lesson takes approximately 45 minutes to complete. You’ll begin this lesson by learning to use LiveMotion 2.0’s tools to write automation scripts in the JavaScript language. If needed, remove the previous lesson folder from your hard drive and copy the Lesson13 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For information, see “Copying the Classroom in a Book files” on page 3.
The JavaScript connection Automation script files are written in the JavaScript language, so it’s important that you become conversant with JavaScript. Don’t worry because the basics that you’ll need are easily learned. Bear in mind that not all JavaScript files — those saved with the extension.js — are useful to LiveMotion 2.0. Because the specific purpose of automation scripting is to control the LiveMotion application, an automation script will contain special statements that only LiveMotion can understand and carry out. The exercises in this lesson are designed to give you a glimpse at the potential of LiveMotion 2.0’s automation capabilities. To fully exploit these new tools, you will need to learn JavaScript and become familiar with the contents of the LiveMotion 2.0 Scripting Guide and the LiveMotion 2.0 Automation Scripting Guide. The Scripting Guide manual is included in the LiveMotion 2.0 package and also available in HTML format by selecting Scripting Guide from LiveMotion 2.0’s Help menu. The Automation Scripting Guide is part of the LiveMotion 2.0 SDK. The SDK and additional resources for learning about JavaScript can be found at http://www.adobe.com.
LM_02.book Page 273 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 273 Classroom in a Book
Working with automation scripts LiveMotion 2.0’s principal tool for working with scripts — the Script Editor — can be used to open and modify existing files, as well as create new script files. You’ll begin this lesson working in the Script Editor to open and run an existing.js file. You’ll then add code to the script to open the Console window and write a message in it. After that, you’ll save the file and access it from LiveMotion 2.0’s Automation menu. There are many useful automation scripts included with LiveMotion 2.0. To check them out, take a look in the Automation/Scripts and Script Resources/Samples/Automation Scripts folders on the drive where LiveMotion 2.0 is installed.
Opening an automation script 1 Start Adobe LiveMotion 2.0. 2 Choose File > Open, and open the 14CreateNewComposition.js file from the Lessons/Lesson14 folder. The Script Editor will open and display the contents of the automation script.
LM_02.book Page 274 Thursday, May 23, 2002 10:05 AM
274 LESSON 14 Writing Automation Scripts and Live Tabs
We’ll start with a short and easy script that performs only one task: It opens a new Composition window. The piece of code that does all the work is: var comp = application.newComposition();
This statement creates an new Composition window that can be referred to by LiveMotion using the variable named comp. Notice all the lines that contain forward slashes. In JavaScript parlance, these are known as comments. Comments are not acted on by the JavaScript interpreter, which is the brain that tells Live Motion what to do with the script code. There are two types of comments. The first four lines demonstrate the block comment. Anything between the /* and */ is ignored by the interpreter. The second type of comment is identified by the double forward slashes. Anything on a line that comes after the double slashes is also ignored. Comments are not only useful for describing the contents of the script, but also for temporarily turning lines of code off. 3 Click the Run script button at the top left of the Script Editor to create your new Composition window.
Controlling the Console window There are times when you will need to display information generated by your script and it’s interaction with LiveMotion. The Console window is the perfect tool for providing feedback about errors or other important information. 1 In the Script Editor window, click below the last line of code to start a new line. Type the following exactly as shown: Console.show(); console.write("A new composition has been created.\n");
If you typed the statements exactly as shown, execution of the script stops and the Debugger window appears. Look in the Variable window and you’ll see that the Debugger Message is: console is undefined. This error demonstrates how finicky the JavaScript interpreter can be. Because the word Console is a keyword, it needs to be spelled with a capital C. However, this sensitivity does not extend to other items contained in scripts, such as variables. Now you can see why investing time to learn more about JavaScript will be necessary if you want to write more advanced automation scripts.
LM_02.book Page 275 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 275 Classroom in a Book
2 Edit the last line of code to read: Console.write("A new composition has been created.\n");
3 Click the Run script button on the Script Editor. After the new Composition window is created, the Console window opens and displays the message contained between the quotes. The \n code tells the Console to start a new line after the message displays. This will help to keep your messages from running together.
Saving and retrieving your script Now that you’ve modified the automation script, you’ll want to save it so you can use it later. If you choose File > Save you will overwrite the original script file in the Lessons/Lesson14 folder. However, saving the file to a special folder will make it easy to find and use this automation script later.
LM_02.book Page 276 Thursday, May 23, 2002 10:05 AM
276 LESSON 14 Writing Automation Scripts and Live Tabs
1 Choose File > Save As, and navigate to the folder where LiveMotion 2.0 is installed. Inside this folder, go to the Automation/Scripts folder, type 14CreateNewComposition.js and then click OK. Any files with the .js extension saved in this folder will be shown on LiveMotion 2.0’s Automation > Scripts menu. 2 Close the Script Editor. 3 Select Automation > Scripts to view the menu of available automation scripts. Note that the file you just saved does not appear on the list. This is because LiveMotion needs to update the inventory of files in the Automation/Scripts folder. 4 Select Automation > Refresh Menu to have LiveMotion update the menu of automation scripts. 5 Select Automation > Scripts > 14CreateNewComposition and watch as the script sets up a new Composition window, complete with notification —via the Console window — that all went as expected. You can run the script again by selecting Automation > Run Last Automation. To run a script that is not in the Automation/Scripts folder, you’ll need to select Automation > Run Automation Script and then use the dialog box to navigate to the folder containing the script file.
Writing an automation script Now that you’re familiar with the basics of automation scripting, it’s time to create an automation script from scratch. The script that you create in the next exercise will demonstrate how to create text in an open Composition window. The text will be formatted with a particular font, type size, and color. A completed version of the script is contained in the file named 14textcolor.js in the Lessons/Lesson14/End folder.
Starting a new script 1 Start LiveMotion, and select File > New Script to open the Script Editor. 2 Select File > Save and then navigate to the LiveMotion/Automation/Scripts folder. Type 14textColor.js in the dialog box. Saving the file in this folder will make it available on LiveMotion 2.0’s Automation > Scripts menu.
LM_02.book Page 277 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 277 Classroom in a Book
Setting up variables Generally, the first step in writing a script is setting up variables. Variables can be compared to containers for objects, or specific aspects of the objects. After you’ve named the variable, the object that it contains can be manipulated by LiveMotion simply by prefacing a command with the variable name. 1 Click the cursor in the Script window and type the following: var comp = application.currentComposition; var textColor = "black"
These first line sets up a variable that allows the script to send commands to the currently selected composition; this composition is now known by the name comp. The second line creates a variable named textColor to contain the color of the text. It’s value has been assigned as the text string "black".
Creating a type object Using a script to create a piece of text is a snap. 1 On a new line, type the following in the Script window: var buttonText = comp.createObject(LMObjectType.pointText,50,50,0);
This piece of code creates an empty type object that can be addressed by the variable named buttonText. The portion of the statement on the right side of the equal sign is where the real magic happens; first, it tells LiveMotion to create the new object in the composition named comp. Next, the information inside the parentheses define the object to be Point Text (as opposed to Dynamic Text) and sets its left edge, baseline and z-order in the Composition window. 2 On a new line in the Script window, type the following: buttonText.text = "Test";
This line defines the actual word (or words) that will be displayed by the text object. Technically, it sets the text property of the buttonText object to whatever is typed between the quote marks. When this script is run, the word Test will appear in the composition; however, you can change this by substituting any text you like.
LM_02.book Page 278 Thursday, May 23, 2002 10:05 AM
278 LESSON 14 Writing Automation Scripts and Live Tabs
Formatting type Defining a Point Text object’s properties, such as font name, type style, and size via scripting is not as straightforward as using LiveMotion’s interface. Changing these properties programmatically requires much more explicit directions. 1 Start a new line, and enter the following lines of code: var txtLength = buttonText.text.length; var txtRun = buttonText.createTextRun(0,txtLength) txtRun.font ="Myriad Roman"; txtRun.textSize = 20;
The first line of code ascertains the number of characters in the type object by reading the length property of the buttonText object. The length property returns a number which is assigned to the variable txtLength. In our case, the value of txtLength would be 4; the amount of letters in the word Test. The second line sets up an object called a text run. A text run is a way of defining a selection. This is equivalent to a LiveMotion user clicking and dragging inside a text object to select a portion, or all, of the characters. In our script we want to set the properties of all of the characters in our text object. So, the starting position for our "selection" is set to 0 and the end to the fourth character. The particulars of our selection are assigned to the variable named txtRun. The next two lines actually set the font and type size. This is accomplished by setting the font and textSize properties of the characters defined in the variable txtRun. If you do not define a specific font, style, or size for your text object, LiveMotion 2.0 will create the object using default values. The defaults will vary according to each system and the resources available. This would also be the case if a script called for a font name or style that was not installed on the system.
Assigning color to an object As these final steps in our automation script demonstrate, setting an object’s color is pretty straightforward. We’ll take this opportunity to introduce a powerful JavaScript element called the if statement. Use the if statement (or its cousin, if...then...else) to allow your scripts to react to different choices that may be available.
LM_02.book Page 279 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 279 Classroom in a Book
1 On a new line, type the following: if (textColor == "black") { buttonText.layers[0].colorGradient.startColor.red = 0; buttonText.layers[0].colorGradient.startColor.green = 0; buttonText.layers[0].colorGradient.startColor.blue = 0; }
This is the first portion of the if statement. The first line checks to see if a particular condition is true. In our script, we are asking: is the variable textColor equal to the word "black"? If the answer is true, the script carries out any instruction enclosed in the first set of curly braces. In this case, it sets the color values (RGB) of our text object’s base layer (layer 0) to zeros. This is equivalent to setting the RGB color sliders on LiveMotion’s Color palette to all zeros. Running this script will create the word Test and always make it black because we explicitly set the variable textColor to the word "black" at the beginning of our script. But, let’s say that if the textColor variable is set to any value other than "black", we want the color of the word to be white (R255, G255, B255). To give our script this capability we need to add another section to the if statement. 2 Start a new line in the Script Editor and then enter the following lines: else { buttonText.layers[0].colorGradient.startColor.red = 255; buttonText.layers[0].colorGradient.startColor.green = 255; buttonText.layers[0].colorGradient.startColor.blue = 255; }
Now we have an alternative — black or white — for our type object’s color setting. The only way to see this alternative ending in action, however, is to change the textColor variable in our script. But first, let’s see if our script functions the way we expect.
Running a script from the Script Editor Because you saved this script in the LiveMotion/Automation/Scripts folder, you could save the script, update LiveMotion’s inventory of the Scripts folder and then select it from the Automation > Scripts menu. But it’s much easier, especially when you are debugging or testing out a script, to run it right from the Script Editor.
LM_02.book Page 280 Thursday, May 23, 2002 10:05 AM
280 LESSON 14 Writing Automation Scripts and Live Tabs
1 Make sure you have a composition open. 2 Press the Run script button on the Script Editor’s toolbar. If you typed everything correctly, you should see the word Test appear in the Composition window in 20 pt., Myriad. The text’s color should be black. If the Debugger opens, look for the red arrow in the left margin of the Source window. This indicates the line of code that is most likely to have a mistake in it. Check your typing, fix any typos, and try running the script again. After you get the script working properly, go to the next step to check out the alternative color setting you built into the script. 3 In the Script Editor, scroll up to the line that says: var textColor = "black"
Either comment out this line with a double forward slash (//) or change the word "black" to anything else. Don’t remove the quotes — the interpreter won’t like it! 4 Run the script again. The word Test should be white. If your composition’s background is white, change it so you are able to see the type.
Experiment with your automation script There are many areas in this basic script with which you can experiment. You could change the values of the RGB color settings. Or, you could specify a different type size, font, or type style. For instance, try changing the script line that says Myriad Roman to Myriad Bold. One important aspect that we didn’t include in this example is error checking. Try running the script without a composition open and you’ll see the importance of handling errors elegantly. Don’t fret: Many of these items are considered in the next exercise.
Creating Live Tabs Live Tabs are custom dialog boxes or palettes that you create to control your scripts, giving you the same level of interactivity that you experience in LiveMotion’s native palettes and dialog boxes. You’ll build on the skills and knowledge accumulated in the first two sections of this lesson to build your own Live Tab. This tutorial does not go into the same detail of each line of code as the previous tutorial. Neither does it venture into the specifics of creating each piece of the visual interface. There are several reason for this approach:
LM_02.book Page 281 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 281 Classroom in a Book
• The code for creating the Live Tab is much longer and more complicated — it would simply take too long to go into the specifics of each statement, function, or property. Open the ButtonMaker.liv file in the Lessons/Lesson14/End folder, and use the Script Editor to examine the script code. Many comments have been added to aid your understanding of each section of the code. • There are many, many ways to accomplish any specific task — it’s better to try and understand a program’s functionality first and then see how specific code fragments contribute to that functionality. • The real power of LiveMotion’s Live Tabs is your imagination — designing the look and feel of your visual interface and its components is the real fun. Have a blast and don’t get trapped into designing Live Tabs that look like someone else’s designs. In addition to the LiveMotion 2.0 Automation Scripting Guide, there are several Live Tabs found in the LiveMotion/Automation/Live Tabs folder that you should open and examine in the Script Editor. Seeing how others have handled specific issues is an invaluable learning resource.
Meet the ButtonMaker Live Tab The Live Tab that you will assemble is called ButtonMaker. It is a custom palette specifically designed to automate the process of creating objects that can serve as buttons. These buttons can be included in other LiveMotion compositions. The design goals call for the following functionality:
• Use an existing, linear, gradient-filled object and add a bezel to it to simulate a 3D look • Allow the size of the bezel to be set by the user. • Create custom text for the button. • Allow the button text to be either black or white. • Allow the size of the text to be set by the user. • create buttons that have a normal and down state that can be incorporated into other LiveMotion compositions easily. • Handle errors gracefully, informing the user of the problem via the Console window. Let’s take a look at the finished product.
LM_02.book Page 282 Thursday, May 23, 2002 10:05 AM
282 LESSON 14 Writing Automation Scripts and Live Tabs
1 Open LiveMotion 2.0, select File > New Composition, and then select Load Live Tab from the Automation menu. 2 Use the Open Live Tab dialog box to navigate to the Lessons/Lesson14/End folder, and select the ButtonMaker.liv file.
3 Try out the Live Tab to get feel for it’s functionality. Try to make it work on more than one object or on an object that is not filled with a linear gradient. Notice the error feedback in the Console window. See how the Live Tab works on text objects. When you’re satisfied that you understand how the Live Tab is supposed to work, move onto the next section to start building your own version of ButtonMaker.
The bits and pieces of ButtonMaker You will construct your version of ButtonMaker from pre-constructed objects found in the ButtonMakerParts.liv file. 1 In LiveMotion 2.0, select File > Open, and navigate to the Lessons/Lesson14 folder. 2 Select the ButtonMakerParts.liv file. You’ll notice that some of these components are simplified versions of the objects found in the completed ButtonMaker Live Tab that you just worked with. For instance, the text boxes do not have 3D beveled edges. These interface details are bells and whistles that have no bearing on the functionality of the Live Tab.
LM_02.book Page 283 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 283 Classroom in a Book
The main components of the ButtonMaker Live Tab are:
• user_labelText: A dynamic text object used to enter the label text for the button; it’s variable is set to value and the default is Click Me. • user_textSize: A dynamic text object used to enter the size of the button text; it’s variable is set to value and the default is 20. • user_bezelSize: A dynamic text object used to enter the size of the bezel; it’s variable is set to value and the default is 10. • background: This is a composite shape used as the background for the Live Tab components; it’s position is locked. • apply_button: A group made of a text object and a round rectangle object. The rectangle is a movie clip that has a normal and down state with varying effects applied to create a 3D look. • Radio_White: A movie clip group composed of two movie clip objects: dot and rim. The dot object is a movie clip with three states: normal, off, and on. Various effects have been applied to these states to give the object a 3D look. The rim object is also a movie clip and has three states: normal, down and off. Effects have been applied to these states to give the object a 3D look, as well. • Radio_Black: A movie clip group that is virtually identical to the Radio_White object. • Miscellaneous items: These include labels for the Live Tab title, button text, text size, text color, bezel size, and borders for option groups.
Writing the code Now that you are familiar with the components of the ButtonMaker Live Tab, it’s time to start adding the code to each object to make it work. There are some important steps, however, that need to be taken to assure that your Live Tab will work as expected. 1 Select File > Export Settings. On the Export palette select Live Tab from the drop-down list of export formats. 2 Select File > Save As, and navigate to Live Motion’s Automation/Live Tabs folder. Name the file ButtonMaker.liv and click Save. 3 Select Automation > Refresh Menu.
LM_02.book Page 284 Thursday, May 23, 2002 10:05 AM
284 LESSON 14 Writing Automation Scripts and Live Tabs
Exporting as a Live Tab is essential. This option tells LiveMotion that the .liv file can be loaded as a Live Tab. Saving the .liv file in the Automation/Live Tabs folder and issuing the Refresh Menu command makes the Live Tab available on LiveMotion’s Automation > Live Tabs menu. You can check this and see that ButtonMaker is one of the Live Tabs listed.
Hooking up the Apply button The first component to which you’ll add script code is the Apply button. It’s one of the simplest pieces of code you’ll enter. 1 Select Scripts > Script Editor. 2 In the Script Editor, select the Movie Clip Navigator button on the toolbar. 3 Select the button_applyRect object and then select the onButtonPress event handler from the drop-down list. 4 In the Script window, start a new line after the existing line and then add the following: _root.doIt()
This instructs the script to go to the composition’s root timeline and execute the doIt function. The doIt function does all the real work; we’ll get to that last. Don’t forget to periodically save your work. It’s good practice to save before you test or debug your scripts. You never know what kind of error you could run across that would make the program unstable and cause you to lose your work.
Setting up the radio buttons The radio buttons control whether the button text will be black or white. Because they work in tandem, the code for each is similar, but not identical. Also, each button is made up of two objects and several states. It’s important to enter the code exactly as shown. Let’s start with the Radio_White object. 1 In the Script Editor, select the dot object under Radio_White. 2 Select onLoad from the drop-down list of events, and type the following: this.lmSetCurrentState("off"); on = false; off = true;
3 Click the States script button from the toolbar.
LM_02.book Page 285 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 285 Classroom in a Book
4 Select on from the drop-down list of available states, and type the following into the Script window: this._alpha = 100; on = true; off = false;
5 Select the off state from the drop-down list, and type the following: this._alpha = 0; on = false; off = true;
6 Select the rim object under Radio_White, and click the State scripts button. Select down from the list of available states, and enter the following: _root.Radio_White.dot.lmSetCurrentState("on"); _root.Radio_Black.dot.lmSetCurrentState("off"); _root.Radio_Black.rim.lmSetCurrentState("off");
That’s it for the Radio_White object. The code in Step 1 turns the white radio button off. The next two lines set up variables that will be used to communicate the radio button’s on or off state to the doIt function. Steps 4 and 5 control the look of the button, depending on its state. Step 6 reacts when the user clicks the white button by turning off the black radio button. Now you’ll tackle the Radio_Black button code. 7 Select the dot object under Radio_Black, and click on the Handler scripts button. 8 Choose onLoad from the list of events, and enter the following code: on = true; off = false;
9 Click the State scripts button, choose on from the list of available states, and type the following into the Script window: this._alpha = 100; on = true; off = false;
10 Choose off from the list of states and enter the following: this._alpha = 0; on = false; off = true;
LM_02.book Page 286 Thursday, May 23, 2002 10:05 AM
286 LESSON 14 Writing Automation Scripts and Live Tabs
11 Select the rim object under Radio_Black, choose down from the list of states, and type the following into the Script window: _root.Radio_Black.dot.lmSetCurrentState("on"); _root.Radio_White.dot.lmSetCurrentState("off"); _root.Radio_White.rim.lmSetCurrentState("off");
Now you have a set of radio buttons that will work together and allow your Live Tab to make either a black or white button label. This would be a perfect time to save your file and test your work. 12 Select File > Save, and select View > Preview Mode. Click on the radio buttons and watch how the script code causes them to act in unison. If you press the Apply button, the Debugger window will appear with the message: MovieClip.doIt is not a function. Not to worry. Click the Kill button on the Debugger toolbar and then click OK in the dialog box informing you that Live Motion has shut down your Live Tab. Next, you’ll start working on the brains of ButtonMaker: the doIt function.
Building the doIt function Limber up your fingers because you will be entering lots of code in the next few steps. The doIt function will be entered into the onLoad event of the composition. This is called the root.
Setting up the environment The first portions of code set up variables, collect information from the dynamic text boxes, and check to make sure that the script will be able to successfully carry out it’s function. 1 Select Scripts > Script Editor, and select Composition in the Movie Clip Navigator. 2 Enter the following into the Script window: function doIt() { var buttonName = _root.user_labelText.value; var textSize = _root.user_textSize.value; var sizeDiff = parseInt(_root.user_bezelSize.value); var blackOn =_root.Radio_Black.dot.on;
LM_02.book Page 287 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 287 Classroom in a Book
if (!application.compositions.length) { Console.show(); Console.write("There is no active composition open.\n"); return; } var comp = application.currentComposition; var selLength = comp.selection.length if (!comp.selection.length) { Console.show(); Console.write("You must select something first.\n"); return; } else if (comp.selection.length >1) { Console.show(); Console.write("Select only one object.\n"); return; } beginUndoAction(comp);
The last line enables the Undo command in LiveMotion’s Edit menu. If you don’t explicitly include this code (along with the matching completeUndoAction that will be added to the end of your script) you won’t be able to undo the changes ButtonMaker makes to your original composition. 3 Save the file. At this point, you don’t have enough code to even test your Live Tab. But when you do, don’t use LiveMotion’s Preview mode. Instead, make sure you’ve saved the latest changes made to the script and then select Automation > Live Tabs > ButtonMaker.
Working with the button object The next sections of code begin the process of working on your selected object to make it into a 3D button. 1 Make sure that you are at the bottom of your doIt function script. 2 Start a new line and then enter the following:
LM_02.book Page 288 Thursday, May 23, 2002 10:05 AM
288 LESSON 14 Writing Automation Scripts and Live Tabs
var theObj = comp.selection; var currentObj = theObj[0]; var theName = currentObj.name var thePosX = currentObj.position.x var thePosY = currentObj.position.y var gradType = currentObj.layers[0].colorGradient.type if (gradType == "LMGradientType.none" || gradType != "LMGradientType.linear") { Console.show(); Console.write("Your object must have a linear gradient applied.\n"); return; } currentObj.name = "Top";
The preceding lines take the selected object and assign it to a variable name that will be easier to work with. After some information is gathered and stored in variables, a final check ensures that the selection is filled with a linear gradient. If everything checks out, the object’s name property is set to Top.
Making the bezel The bezel is simply a modified copy of the original object that gets named Bezel. The bezel’s size is made larger (determined by the value in the Bezel size text box), and the fill is changed to run in the opposite direction of the Top object. 1 In the Script window, move to the bottom of your doIt function script. 2 Start a new line and enter the following: copyObj = currentObj.duplicate(); copyObj.name = "Bezel"; copyObj.size.y += sizeDiff; copyObj.size.x += sizeDiff; copyObj.cornerRadius += (sizeDiff/2) copyObj.arrange(LMArrangeType.sendToBack); copyObj.layers[0].colorGradient.angle += 180;
The fifth line tweaks the corner radius of the selected object if it happens to be a round rectangle. This makes the bezel width look more uniform. The sixth line places the bezel behind the Top object.
LM_02.book Page 289 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 289 Classroom in a Book
Adding new states to the Top object The buttons created by ButtonMaker utilize states, similar to those in the radio buttons, to visually cue the user that the button has been pressed. These new states are not only created, but code is added to them by the script. 1 Once again, make sure that you are at the bottom of your doIt function script. 2 Start a new line and then enter the following: currentObj.addState(LMStateType.mouseDown); currentObj.currentState = LMStateType.mouseDown; currentObj.layers[0].colorGradient.angle += 180; copyObj.addState(LMStateType.mouseDown); copyObj.currentState = LMStateType.mouseDown; copyObj.layers[0].colorGradient.angle += 180; var scriptPress = currentObj.getHandlerScript(LMHandlerType.onButtonPress); scriptPress += '\n' + '_parent.Bezel.lmSetCurrentState("down");\n'; currentObj.setHandlerScript(LMHandlerType.onButtonPress, scriptPress); var scriptRelease = currentObj.getHandlerScript(LMHandlerType.onButtonRelease); scriptRelease += '\n' + '_parent.Bezel.lmSetCurrentState("normal");\n'; currentObj.setHandlerScript(LMHandlerType.onButtonRelease, scriptRelease); var scriptDrag = currentObj.getHandlerScript(LMHandlerType.onButtonDragOut); scriptDrag += '\n' + '_parent.Bezel.lmSetCurrentState("normal");\n'; currentObj.setHandlerScript(LMHandlerType.onButtonDragOut, scriptDrag);
The variable scriptPress is used to hold the code that currently exists in the various event handlers and then appends the additional code generated by our script. Now, clicking on a button will trigger a change in the state of the Bezel object.
Creating the button label Making the button’s text label is nearly identical to the second exercise you worked on earlier in this lesson. 1 If you haven’t already, move to the bottom of your doIt function script. 2 Start a new line and then type in the following: var buttonText = comp.createObject(LMObjectType.pointText,thePosX,thePosY,0); buttonText.text = buttonName;
LM_02.book Page 290 Thursday, May 23, 2002 10:05 AM
290 LESSON 14 Writing Automation Scripts and Live Tabs
var txtLength = buttonText.text.length; var txtRun = buttonText.createTextRun(0,txtLength); txtRun.font ="Myriad Roman"; txtRun.textSize = textSize; txtRun.justification = LMJustificationType.center; if (blackOn == true) { buttonText.layers[0].colorGradient.startColor.red = 0; buttonText.layers[0].colorGradient.startColor.green = 0; buttonText.layers[0].colorGradient.startColor.blue = 0; } else { buttonText.layers[0].colorGradient.startColor.red = 255; buttonText.layers[0].colorGradient.startColor.green = 255; buttonText.layers[0].colorGradient.startColor.blue = 255; }
This section demonstrates the beauty of scripting: Well-thought-out code can be easily copied and pasted into other scripts and Live Tabs.
The finishing touches The last section of code wraps all your button elements up into a nice, neat package. 1 One more time, move to the bottom of your doIt function script. 2 Start a new line and then enter the following: buttonText.rotation += 1; buttonText.rotation -= 1; tempObj = new Array(buttonText, copyObj, currentObj); comp.align(tempObj, LMAlignType.centers); var buttonGrp = comp.group(tempObj); buttonGrp.name = "Button_Group"; buttonGrp.isMovieClip = true; completeUndoAction(comp); }
LM_02.book Page 291 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 291 Classroom in a Book
After the text object is given a little nudge to help it align correctly later, all the objects are placed into an array. All the elements in the array are then aligned on centers, grouped, given a distinctive name, and finally made into a movie clip. The script finishes with the all-important completeUndoActon statement and the evenmore-important closing curly brace. If you leave off this last character, the debugger will rear it’s ugly head immediately.
Save and debug your Live Tab Now is the moment you’ve waited for. Save your file and then select Automation > Live Tabs > ButtonMaker. If the Debugger window appears right off the bat, you’ve typed something incorrectly. Go back and proofread your script. Debugging your Live Tab isn’t just proofreading code; it’s also testing your script under any and all conditions. So go ahead and see what happens if you don’t have a composition open, or the correct type and number of objects selected. Try to break the Live Tab. It’s nice to have everything work as intended, but if you do find a defect in the script’s design or logic that causes something wrong or bizarre to occur, you should find a way to prevent the situation. At the very least, inform the user through the Console window that the results may not be what they expect.
Design, create, automate The controls built into the ButtonMaker Live Tab allow you to create a wide range of custom, 3D-style buttons.
LM_02.book Page 292 Thursday, May 23, 2002 10:05 AM
292 LESSON 14 Writing Automation Scripts and Live Tabs
You may have already thought of other features that could be added to the ButtonMaker Live Tab that would enhance the look of your 3D buttons. For example, you could add a drop shadow to the button’s label. You might even allow the user to control the offset position and softness of the shadow. Now that you’ve gotten a taste of the power of automation scripting and the flexibility that Live Tabs offer, you’re probably already thinking of tons of projects where you can apply your new-found skills. The cool thing about Live Tabs is that you can put any visual interface you can think of onto a script. It’s a snap to put a different the look on the ButtonMaker Live Tab.
Open the ButtonMakerPurple.liv file in the Lessons/Lesson14/End folder to see a bold, new look for the Live Tab.
LM_02.book Page 295 Thursday, May 23, 2002 10:05 AM
15 Exporting
The final step in creating your compositions is converting them so that they can be viewed on the Web. Exporting in LiveMotion is extremely flexible, allowing you to export your files to any of the common Web formats. When preparing to export, you can choose settings to reduce file sizes, and increase resolution. As a result, your final files will load quickly and look crisp.
LM_02.book Page 296 Thursday, May 23, 2002 10:05 AM
296 LESSON 15 Exporting
Getting started In this lesson, you’ll learn how to do the following:
• Choose which export format best suits your composition. • Use the Export palette. • Adjust object settings for optimal size and quality. • Export to different formats. • Optimize SWF exports. This lesson takes approximately 45 minutes to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson15 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe LiveMotion 2.0 Classroom in a Book CD. Note: Windows users need to unlock the lesson files before using them. For more information, see “Copying the Classroom in a Book files” on page 3.
Exploring export formats LiveMotion provides a number of different file formats to which you can export your compositions. Which export format is best for your composition depends mostly on what your composition contains: animation, photographs, or line drawings. The list below will introduce you to the formats and their best uses. Later in this lesson you’ll learn more about other issues to consider when exporting, such as file size and compatibility.
• The Macromedia Flash (SWF) file format saves animations as vector images, which makes it a good choice for animations with solid areas of color and sharply-defined objects, such as animated drawings. Vector animations usually have small file sizes as well. • The AutoLayout format exports files as image-sliced HTML tables complete with Javascript rollover coding. • The Live Tab format exports files to be used as LiveMotion Live Tabs. • The Animated GIF format is useful for rendering small-scale animations, like spinning or pulsing buttons. • The QuickTime video format saves animations as video files, without interactivity. It allows for a variety of compression formats.
LM_02.book Page 297 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 297 Classroom in a Book
• The GIF format is a good choice for compositions with solid areas of color and sharp detail, such as line art, logos, or illustrations with type. • The JPEG file format is designed for use with raster images, and other continuous-tone graphics. It preserves the broad range and subtle variations in brightness and hue found in photographs. • The PNG-Indexed format is a good choice for compositions with solid areas of color and sharp detail, such as line art, logos, or illustrations with type. • The Photoshop file format exports a flattened image (an image without any layers) to the Adobe Photoshop format. Photoshop, Adobe ImageReady™, and Adobe Illustrator can open a LiveMotion composition that is exported to this format. • PNG-Truecolor preserves the broad color and tonal range of photographic images. The Truecolor format is good for small bitmaps; the JPEG format is better for large bitmaps (over 100 x 100 pixels).
Preparing for export Before you export your file, you’ll add links to your images. You’ll then experiment with different export settings and how they affect the file size. To get started, you’ll open the file and preview its animation. 1 Choose File > Open and open the 15Start.liv file from the Lessons/Lesson15 folder.
LM_02.book Page 298 Thursday, May 23, 2002 10:05 AM
298 LESSON 15 Exporting
2 Choose Window > Reset To Defaults to restore all of the palettes to their default settings. 3 In the toolbox, click the Preview Mode button ( ) to preview the file animation. Note the animation of the wheel at left and the rollover effects on the images at right. 4 Click the Edit Mode button (
) to return to Edit mode.
Using the Web palette You can use the Web palette to add links to your graphics. Links allow you to open a new Web page by clicking an image. In this lesson, we will add the URLs to other pages, but we will not create the pages themselves. 1 Select the selection tool ( ) in the toolbox. Select the photo of the two-person bicycle at the top right of the composition. 2 Choose Window > Web, or click the palette’s tab to display the Web palette. Choose Detail View from the palette menu.
3 In the URL text box, enter origins.html. This is the page to which this image will link. ALT text is text that displays if an image is not loaded, or, in some browsers, when the mouse is over the image. 4 In the ALT text box, enter origins. When you create a link from one Web page to another, you can choose how the new page will open. You can replace the original page in the browser window with the new one, or you can have the new page open in a separate browser window. In LiveMotion, you control this with the Window option. In this case, you will leave the Window text box blank, meaning the original page will be replaced in the browser window.
LM_02.book Page 299 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 299 Classroom in a Book
If you export your composition as AutoLayout, the composition becomes a set of files placed next to each other to recreate the look of the original composition. Each file is an object or group of objects. You can use the File Name option in the Web palette to name these individual files. 5 In the File Name text box, enter origins. 6 Select the image of the boy with a bicycle. In the same way you did for the previous image, enter icon.html in the URL text box, and icon in the ALT and File Name text boxes. 7 Select the image of the bicycling family. In the same way you did for two previous images, enter modern.html in the URL text box, and modern in the ALT and File Name text boxes. Note: Adding a URL link to an image has the same effect as adding a down state to the image which links to a URL. Because scripts are associated with .swf files, however, you must set links with the Web palette when exporting to any format besides .swf.
Choosing export settings The Export palette provides the primary means of control over export settings of the composition. (The Composition Settings dialog provides additional control over the frame rate.) 1 Choose Window > Export to display the Export palette.
Export format setting
Additional export format setting
The top drop-down menu is used for choosing the format to which your composition is exported. Selecting the Preview Export Compression button allows you to see how your composition will look with the current export settings. The second drop-down menu provides additional options for the chosen export format. You’ll experiment with different settings to see how they affect your composition.
LM_02.book Page 300 Thursday, May 23, 2002 10:05 AM
300 LESSON 15 Exporting
2 Choose JPEG as the current export format from the Export format setting menu, and select Preview Export Compression. Notice the file size in the status bar at the bottom of the Composition window. The left number is the file size ( ), and the right number is the size of any selected objects ( ). If nothing is selected, no number is shown to the right.
3 Enter 0 for the Quality setting. Notice the decrease in image quality, and in file size. Return the setting to its default of 100. 4 Change the current export format to Macromedia Flash (SWF). In .swf files, some objects are exported as vector objects and some as bitmap objects. You can choose the export format for any rasterized images in the second menu from the top. 5 In the Composition window, select the photo of the bicycling family. Notice the bitmap icon ( ) that appears to the right of the object size in the status bar. This indicates that the selected object is a bitmap object. 6 Now, select the black bicycle wheel in the Composition window. Notice the vector icon ( ) that appears to the right of the object size in the status bar. This indicates that the selected object is a vector object.
A selected bitmap image and the bitmap icon, and a selected vector drawing and the vector icon.
LM_02.book Page 301 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 301 Classroom in a Book
You can create settings for individual components as well as for the entire composition. Controlling the file format and quality for individual objects helps you determine file size. 7 With the current export option still set to SWF, select the image of the bicycling family in the Composition window. 8 In the Export palette, click the Create a new object setting button ( ). The button at the lower left of the Export palette indicates that the palette is in object setting mode, rather than document setting mode.
Creating object settings.
9 In the additional export format settings menu, choose JPEG. Enter 100 for Quality, and 8 for Opacity Resolution. 10 Select the Document export settings button at the lower left of the Export palette. Notice that the export settings for the document as a whole are unchanged. 11 Choose View > Preview Export Compression to turn off export compression preview.
Choosing composition settings The Export palette allows you to cut your composition into individual image slices to ensure smaller file sizes, and set animation rates. AutoLayout creates a table in an HTML file that reproduces the layout of the exported LiveMotion composition. 1 Choose AutoLayout from the drop-down menu, and click the Export HTML page check box if it is not already selected. When you export your composition, it will be exported as a table in an HTML file, and your animation will play at a rate of 12 frames per minute. Now you’ll select additional export settings.
LM_02.book Page 302 Thursday, May 23, 2002 10:05 AM
302 LESSON 15 Exporting
2 In the Export palette, choose GIF from the Export format setting bottom drop-down menu. 3 Choose File > Export. Choose a location to which the file will be exported, and click OK. 4 View the exported HTML page in a Web browser. Note: In your Web browser, choose the View Source Code option. Look at the source code of the page that is generated. Notice that the images that line the right side of the composition have been given the names you set in the Web palette. You can also see that Javascript is automatically generated to allow the functionality of the rollovers.
Export options A lot of factors determine the best way to export files. Each format has specific strengths. To get the best output, you will need to balance file size, file quality, and compatibility. For example, .swf files convert non-vector or multilayer objects to bitmaps, which can increase file size. If you have a lot of gradient or opacity animations within your file, your .swf file may be very large. Both SWF and PNG can require a plug-in, which limits the accessibility of these images to people without the plug-in installed. GIF and JPEG compositions that include rollover effects require a Javascript-enabled browser, which can also limit accessibility, but is more common than the .swf or PNG plug-ins. In this lesson, the two best options are to export the composition as a .swf file, or as an AutoLayout GIF HTML page. The .swf file is smaller, but less compatible. You can optimize file size by creating export settings for individual objects, as you did previously in this lesson. If you choose to export to .swf, the composition will be exported as a single file, and any non-.swf settings will be ignored. A sliced composition set as GIF or JPEG cannot render any slices as a SWF file.
Exporting as SWF LiveMotion exports SWF files with all of the bells and whistles. 1 In the Export palette, choose Macromedia Flash (SWF) from the export mode menu. 2 Choose View > Preview Export Compression. 3 In the Composition window, select the large black bicycle that fades out behind the images.
LM_02.book Page 303 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 303 Classroom in a Book
4 In the Export palette’s second menu, choose JPEG. Adjust the Opacity Resolution slider, and notice how the bicycle is affected. 5 Enter 6 for Opacity Resolution. 6 Choose File > Export to export the composition to the .swf format. 7 View the exported HTML page in a Web browser.
Export report When exporting to .swf format, LiveMotion automatically generates an export report, providing information about download times, possible lags in the streaming process, and export settings. The report is segmented into four sections: overview, download times, streaming, and resources. Overview gives the size, duration, and number of frames of the animation. Download times shows how long the animation will take to download on a 14.4, 28.8, or 56k modem (assuming transfer rates of 1.2 kBps for 14.4, 2.3 for 28.8, and 4.7 for 56k modems). The streaming table lets you find potential trouble spots in the streaming process. For each frame, it shows how many frames will be preloaded on any of the three modem speeds listed above. Any table cell that is red indicates that the specific modem speed will cause a pause in the animation to allow more frames to download before it can continue. This is a good method for determining how long an introductory “Wait for Download” animation should play. You can create a label past the last frame that shows the potential for pausing, and use that as your “Wait until” label in a Wait for Download loop. The resources section lists all bitmapped images, sprites (animated objects), and shapes in the animation at any particular frame. Information for each is given, including file size and name of the object, allowing you to see exactly how big each exported item is.
LM_02.book Page 304 Thursday, May 23, 2002 10:05 AM
304 LESSON 15 Exporting
Exporting as GIF 1 In the Export palette, choose AutoLayout and GIF from the top two drop-down menus, and make sure Active Preview mode is selected. 2 Select the image of the bicycling family. Because this image is a photograph, we should change its object settings to JPEG to produce a higher image quality. 3 Choose the Create a new object setting button at the bottom right of the Export palette. Choose JPEG for the object export setting, and enter 35 for the image quality. There is very little degradation in the quality of the image, but the file size is greatly reduced. You can do this for each of the image objects that appear on the right side of the composition. 4 Choose Edit > Composition Settings. 5 In the Export palette, select AutoLayout from the menu, and verify that Export HTML Page is selected. 6 Choose File > Export to export the composition. Note: LiveMotion creates an image for every rollover state of an exported slice, whether or not the image has changed. Having these other rollover states will create additional files per slice, with letters added to the filename to indicate which state the file represents. For example, the over state for the origins image will generate the file originsov. Each of these images is called in the Javascript in the generated HTML. If you are comfortable with Javascript, you can remove references to these extra images, and delete the images to save download time.
LM_02.book Page 305 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 305 Classroom in a Book
Optimizing SWF output LiveMotion allows for a wide-range of design and animation effects—some of which may cause an exported SWF file to grow in size. Minimizing the size of exported SWF files is a key step in the production process. It's important to see that LiveMotion's effects are used to their best advantage.
Watch the export report LiveMotion’s Export Report provides a comprehensive view of what’s happening in a movie and where any bottlenecks might occur. (Where are the bottlenecks? Just look for the bright red table cells.) It’s essential that you test your composition repeatedly and structure it to minimize these occurrences. To turn on the Export Report, select Export HTML Report in the Export palette.
Use bitmaps with care Applying certain effects will result in the creation of bit mapped objects. While bit mapped objects aren't necessarily a bad thing, you should be aware of how they are created and how to work with them to your best advantage. The following effects will create bitmaps:
• Multi-layer objects—adding a layer to an object will cause it to be exported as a bitmap. If you're aiming for pure vector output, you may want to try using multiple objects. • Layer width and softness—tweaking the a layer’s width and/or softness will result in bit mapped export. Layer width can be mimicked through scaling. Softness can be mimicked using multiple (scaled) iterations of an object, with varied opacity settings. • 3D effects—applying any of the 3D effects to an object will cause it to export as a bitmap. Some 3D effects can be mimicked with pure vectors, however. Lesson 14’s ButtonMaker Live Tab is one example of this approach. • Distortion Lenses—the distortion lenses look really cool, but unfortunately they create bit mapped objects upon export. To minimize the file size penalty, use LiveMotion's per object compression capabilities. You might also try using hold keyframes to cut down on the total number of bit mapped objects exported for each animated sequence.
LM_02.book Page 306 Thursday, May 23, 2002 10:05 AM
306 LESSON 15 Exporting
• Outlined objects with gradient fills—avoid using a gradient fill on an outlined object. Apply a gradient fill to a compound path object. When properly executed, this will look exactly the same (minus the petnapping). • Double-burst gradient fills—objects with a double-burst gradient fill will output as bitmaps. • Cropping an object—try using the Combine Minus Front function, rather than using the crop tool. It’s possible in many cases, nonetheless, to create complex effects with bitmaps that are smaller than a pure vector implementation. That’s why it’s important to experiment and repeatedly test your compositions. Try to set the composition bitmap export settings for the smallest possible file, without negatively impacting the overall quality. Deal with individual objects using per object compression settings as necessary.
Use native transformations For the smallest file sizes, stick to the transformations native to the SWF format: Position, Object Opacity, Rotation, Skew, and Scale. You'll find these native transformations listed underneath Transform in the Timeline window.
Set stopwatches for post-transforms One popular file size saving trick is to design a composition with many iterations of the same object. Set the appropriate transform stopwatches in the object’s timeline before duplicating the object. When you do so, LiveMotion will apply post-transform changes. You can then use native transformations on the duplicate objects to your heart’s content; LiveMotion will perform its auto-symbolization magic upon export.
LM_02.book Page 307 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 307 Classroom in a Book
Use movie clip groups You can obtain smaller file sizes by animating an entire movie clip group, as opposed to a plain vanilla group. When you animate the movement of a movie clip group, LiveMotion writes the transformation information for the movie clip group as a whole. When you animate the movement of a plain vanilla group, LiveMotion must write transformation information for each of the objects within the group. Duplicated movie clip groups can yield significant file size savings. (Remember to set the pertinant stopwatches before duplicating the movie clip group.)
Use a realistic frame rate Simply put, the more frames per second, the smoother the animation and the larger the file size. Less powerful computers may not be able to keep up with an assigned frame rate, however, so a higher frame rate does not always correlate with smoother animation. Use the lowest frame rate that gets the job done, perhaps 12 frames per second, and you'll end up with a smaller file that should run reliably across the range of clients.
Use aliases and duplicates LiveMotion’s SWF export engine has real smarts. It sorts through the output of your file, looking for instances when the same exact object is used more than once. When identical objects are found, LiveMotion exports the object as a shape only once, and references the shape as needed. If you’ve designed your composition to take advantage of this timesaving feature, it can cut down the size of the exported file by a considerable amount. Using this technique, you can construct a bountiful field of flowers, a sky full of stars, or a drawer jammed with marbles using just a handful of objects. Or more likely, you'll build a page with a set of identical buttons. The trick is that the objects must be exactly identical. Any change between certain object properties will cause the objects to export as separate objects. Remember to set the appropriate transform stopwatches. LiveMotion’s Alias function is merely an editing feature. Alias isn’t tied to the smart symbol export feature. That is, identical objects don’t have to be aliases (although they can be) to be automatically exported as smart symbols.
LM_02.book Page 308 Thursday, May 23, 2002 10:05 AM
308 LESSON 15 Exporting
Animate color changes sparingly LiveMotion exports a new object for each frame of a color change. One way to avoid this is to create two objects that fade into each other via opacity animation. Another approach is to turn the shape into a mask and then animate the color change of a rectangle beneath the mask.
Avoid animated gradients The SWF format doesn't allow for animated gradient angles and settings. If you animate an object’s gradient characteristics, LiveMotion will export a new object for each frame. Rather than animate the gradient itself, use the masked technique.
Simplify paths The fewer the control points in a path, the smaller the exported object. If you can describe an object with six control points, rather than three dozen, by all means do so.
Reduce the complexity of imported vector artwork The more complex the art you place, the weightier the exported SWF file. Minimize the complexity of imported artwork. Pay particular attention to gradients and text; avoid intricate gradients (which may export to bitmaps) and convert type into outlines prior to placing into LiveMotion.
Only load if needed The big idea here is to only give your visitors what they request. Deliver the container document, using Load Movie to bring in SWF files into layers, as requested. These are layers within the container movie—they have nothing to do with LiveMotion's object layers. It’s important to set up each of your component movies with the same dimensions as the container, positioning the elements at the location they will appear in the composite. Some things to keep in mind:
• Stacking order (z-order) is controlled by the order of the layers. The higher the layer number, the higher the layer is in the stack (and consequently, the lower the layer number, the lower the layer is in the stack).
LM_02.book Page 309 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 309 Classroom in a Book
• Movies can be unloaded from a layer with the Unload Movie behavior. This behavior does not target specific movies; it only targets the layers. You may also use the Replace option (as opposed to Append) to kick a movie out of a layer. • Load Movie cannot be previewed within LiveMotion, nor can they be previewed with the File > Preview In > Your Browser of Choice feature. You must export the SWF with the directory structure intact. (Make sure that you’re calling the movies from their actual locations.) Breaking up a large SWF site into separate components provides additional benefits. Once your site is up and running, you can determine the popularity of certain movies by analyzing the server logs. With separate components, it’s easy to spot what’s hot and what’s not. Over time, you can streamline your container document to preload the most frequently requested pieces.
Preload with prudence Preloading is essential with large SWF files. By preloading content, you allow it to play smoothly in the browser. Once the content has come down the pipe, it should run without a hitch (rather than pausing as it waits for the next elements to download). You don’t always wait for everything to download. When practical, you might consider setting up the composition so that it begins playing after a short download period. Use that introductory play time to stream the subsequent content, so that the viewer needn’t endure a seemingly endless “DOWNLOADING ...” screen.
Congratulations! You have completed the Adobe LiveMotion 2.0 Classroom in a Book. Now you’re ready to create your own animated Web compositions.
LM_02.book Page 311 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 311 Classroom in a Book
Index A
Auto Bezier command 88
Actual Size command 13
Automation scripts 271
removing 65 convert Illustrator artwork 175
Add Keyframe checkbox 86 adding links 298
B
corner points 63, 67
adding URLs 298
Back One Frame button 88
current-time marker 84
Adjust palette 55
background color box 18
aliases 141, 307
Bezier curves 65
D
Align command
Break Apart Text command 53
Debugger 274
ButtonMaker 280
Deselect All command 11
Bottom 50, 53 Centers 28, 33
direction lines 63, 64
Left 142
C
direction points 63, 64
Top 51
canvas 10, 12
Distribute command
ALT text 298
Color palette
animated rollovers 159 animated sequences 183 animation
Horizontal 50 Vertical 142
RGB View 17 Combine command
drawing
Exclude 51
paths 61
Auto Bezier command 88
Minus Front 36, 53
pen tool 61
layer properties 85
Unite 36
shapes 25
lighting 120
Unite with Color 29, 34
Duplicate command 109
Linear command 89
combining objects 29
Duplicate Rollover State button 147
object attributes 85
Composition Settings
duration bars 83
opacity 122
command 13
opacity gradient angle 124
dialog box 13
playing 87 playing frame-by-frame 88 position 85 rotation 90
composition settings 301
dynamic data 225
E
editing 13
Ease In command 106
frame rate 14
Ease Out command 106
Composition window
Edit mode 19
scale 91
about 10
Edit Name command 160
scrubbing 88
offscreen area 12
Edit Original command 54
sounds 130
resizing 11
ellipse tool 32
stacking order 109
Console 274
Export commands 299
time stretching 93
constraining proportions 38
Export palette 299
transform properties 85
control points
Export report 303, 305
Apply Sound button 149
adding 62
Arrange command
adjusting 69
compositions 299, 301
converting 63
individual objects 301
moving 63
optimizing 302
Send Backward 111
export settings
LM_02.book Page 312 Thursday, May 23, 2002 10:05 AM
312 INDEX
Export Settings command 40
I
exporting compositions 39
Illustrator files
eyedropper tool 18
Live Tabs creating 280 ButtonMaker 281
placing 28, 178 converting 175
looping 194
F J
M
Flash 1, 39, 296
Javascript 272, 302
Make Actual Size command 93
GIF 297
JPEG file format 297
Make Alias command 141
file formats
JPEG 297
masks
Photoshop 297
K
PNG-Indexed 297
keyboard shortcuts 10
motion paths 87
PNG-Truecolor 297
keyframes
movie clip groups
files
about 46
adding 89
advantage of animating 307
new 25
creating 86
checkboxes 236
opening 9
dragging 104
masked button 164
placing 28
Ease In 106
states 170
previewing 19
Ease Out 106
size 19, 300
hold frames 103
N
reversing 107
New command 25
fill 31, 34 Flash file format 1, 39, 296
New Rollover State button 147
Forward One Frame button 88
L
frame rate 14, 307
Layer palette 29
O
layers
object layers 31
G
adding 31
Object Layers palette 29
game
creating 29
objects
elements 255
deleting 31
modification 265
hiding 145
online Help 20
GIF
selecting 10
opacity 29
opacity 29
file format 297
reordering 31
Opacity Gradient Angle 125
export 304
showing and hiding 145
Opacity palette 29, 125
width 29
outlines
Go To URL behavior 151 Gradient palette 143 grid
Library
about 31
saving to 39
width 32
about 14
Library palette 35
settings 15
Linear command 89
P
links
palette menus 17
Group command 33 guides 14
adding 298
palettes
adding to rollovers 151
about 16
H
ALT text 298
displaying 16
hand tool 11
file names 299
hiding 16
Help 20
targets 298
moving 16
Hold Keyframe command 104
LM_02.book Page 313 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 313 Classroom in a Book
rearranging 17
Reset to Defaults command 9
subgroup selection tool 52
resizing 17
rollovers
SWF
password field 229
animating 159
file format 1, 39, 296
paths
Down state 147
export 303
closing 68
multiple rollovers 141
optimization 305
creating 61
Over state 147 remote 177
pen selection tool 63 pen tool 61 adjusting points 69
rounded-rectangle tool 142, 164 rulers 14
control points 62
T text creating 46 text alignment 51
corner points 67
S
text boxes 17
drawing a curved line 65
Save As command 25
text field tool 228
drawing a straight line 66
Script Editor 189, 279
textures 30
paths 61
scrubbing 88
Textures palette 30
smooth points 67
Select 50
3D palette 27
Select All command 39
time independent groups
Photoshop file format 297
selecting objects 10
files 28
selection tool 10
creating 158 Timeline window
Place command 28, 184
sequences 183
Add Keyframe checkbox 86
placing files 28
Show Grid command 14
Back One Frame button 88
Play button 87
Show Guides command 16
current-time marker 84
player script 181, 253
Show Rulers command 14
First Frame button 102
PNG-Indexed file format 297
Show/Hide button 145
Forward One Frame button 88
PNG-Truecolor file format 297
sliders 17
keyframes 86
post-transform 306
smooth points 63, 67
Play button 87
preferences
Snap to Grid command 14
stacking order 109
sounds
stopwatches 86
editing 15 grid settings 15
applying to rollovers 149
resetting 9
looping 130
preloader 199, 309 Preview export compression 19
solo event 213 streaming 208
viewing 83 zoom levels 83 toolbox about 10
Preview mode 19
Sounds palette 130
background color box 18
Preview Motion Path command 87
stacking order 109
Edit mode 19
previewing in a browser 20
status bar 19, 300
previewing in LiveMotion 19
stopwatches 86
tools. See individual tool.
Properties palette 25
stroke and fill 34
Top Object Is Mask command 47
properties, animating 85
styles
transformations
about 48
Preview mode 19
native 306
R
applying 50
transitions 186
radio buttons 284
creating 48
Transform palette 26
rectangle tool 25
saving 49
type tool 46, 234
Replace command 92
Styles palette 48
Type Tool dialog box 46, 234, 240
LM_02.book Page 314 Thursday, May 23, 2002 10:05 AM
314 INDEX
V variables 227, 277 viewing the Timeline window 83 volume controller 219
W wait for download 200 Web palette 298
Z Zoom In command 12 zoom levels 83 Zoom Out command 12 zoom tool 12 zooming 11
LM_02.book Page 315 Thursday, May 23, 2002 10:05 AM
Production Notes This book was created electronically using Adobe FrameMaker ®. Art was produced using Adobe Illustrator, Adobe ImageReady, Adobe LiveMotion, and Adobe Photoshop. The Minion® and Myriad families of typefaces are used throughout the book.
Photography Photographic images, video clips, and audio clips provided are intended for use with tutorials only. Auria™ CDs by Gira™ Sound: Lesson 11 audio clip (Song.aif). Lisa Milosevich: Lesson 3, photograph (Warehouse). National Archives and Records Administration: Lesson 15 photographs (4-Wheeled bicycle, Child on bicycle, Family with bicycles).
Adobe Typefaces Used Lesson 1: OCR-A, pkg. 058 Lesson 10 and Lesson 11: Banco® Roman, pkg. 149 The Adobe Type Library
LM_02.book Page 317 Thursday, May 23, 2002 10:05 AM
Adobe Certification Programs
What is an ACE?
What is an ACTP?
An Adobe Certified Expert (ACE) is an individual who has passed an Adobe Product Proficiency Exam for a specified Adobe software product. Adobe Certified Experts are eligible to promote themselves to clients or employers as highly skilled, expert level users of Adobe Software. ACE certification is a recognized standard for excellence in Adobe software knowledge.
An Adobe Certified Training Provider (ACTP) is a Training professional or organization that has met the ACTP program requirements. Adobe promotes ACTP’s to customers who need training on Adobe software.
ACE Benefits
• An ACTP program certificate
When you become an ACE, you enjoy these special benefits:
• Use of the Adobe Certified Training Provider program logo
• Professional recognition
• Listing in the Partner Finder on Adobe.com
• An ACE program certificate • Use of the Adobe Certified Expert program logo
ACTP Benefits • Professional recognition
• Access to beta software releases when available • Classroom in a Book in Adobe Acrobat PDF • Marketing materials • Co-marketing opportunities
For more information on the ACE and ACTP programs, go to partners.adobe.com, and look for these programs under the Join section.
LM_02.book Page 73 Thursday, May 23, 2002 10:05 AM
Review Project A: Creating Objects Creating effects Creating text Drawing shapes Using masks
In this review project, you’ll use the techniques you learned in Lessons 1 through 4 to create a greeting card. You’ll use the tools and palettes to create objects, modify them, and create effects. Then you’ll use masking to complete the project. Your greeting card doesn’t need to look just like ours; simply follow along and use your LiveMotion knowledge to complete the steps. The files you need are located in the Lessons/Review_A folder.
LM_02.book Page 74 Thursday, May 23, 2002 10:05 AM
74 REVIEW PROJECT A Tools and Palettes
Make a red heart 1 Use the pen tool to draw a heart shape. Resize it to within fit the orange rectangle, and color it red. 2 In the 3D palette, apply an emboss effect to the heart. Then, change the heart’s depth, softness, and lighting. 3 Add a second layer to the heart. Color the layer white. In the Layer palette, adjust its softness to blur it until it looks backlit.
Make a greeting 1 Use the text tool to create text. 2 Place the text in the gray rectangle.
Make a flower 1 Draw five circles, and arrange them in a circle to create the petals of a flower. Group the circles and send the group backwards. 2 Draw a smaller circle and place it on top of the petals. Group the circle and the petals, then combine them, minus the front. 3 Use the pen tool to draw a stem and leaves for the flower. 4 Group the petals, leaves, and stem. 5 Color the flower white, and place it in the black rectangle.
Duplicate and modify flowers 1 With the selection tool, Alt-drag (windows) or Option-drag (Mac OS) the flower several times to create duplicate flowers. 2 Arrange the flowers within the green rectangle. Resize, rotate, and change the opacity of the flowers. 3 Select the flowers and the rectangle, and group them.
LM_02.book Page 75 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 75 Classroom in a Book
Adjust a texture 1 Select the textured rectangle next to the leaf. 2 Change the Saturation setting in the Adjust palette to increase the texture’s color intensity.
Make masks 1 Draw a rectangle slightly larger than the green flowered rectangle. Drag it on top of the green rectangle. 2 Bring the new rectangle to the front. 3 Select both rectangles, group them, and make the top object a mask. 4 Draw a rectangle slightly larger than all the elements of the card. Drag it on top of the card. 5 Bring the rectangle to the front. 6 Select all the objects, group them, and make the top object a mask.
LM_02.book Page 135 Thursday, May 23, 2002 10:05 AM
Review Project B: Basic Animation Animating position Animating rotation Adding sound
In this review project, you’ll use the techniques you learned in Lessons 5 through 7 to create an animated winter scene. You’ll make elements of the animation move, rotate, and loop. You’ll also add a song that will play through the animation. Your scene doesn’t need to look just like ours; simply follow along and use your LiveMotion knowledge to complete the steps. The files you need are located in the Lessons/Review_B folder.
LM_02.book Page 136 Thursday, May 23, 2002 10:05 AM
136 REVIEW PROJECT B Basic Animation
Animate the snowman 1 Double-click Singing Snowman in the Timeline to open the movie clip group. Note: Some objects in the composition move independently of the main animation. These objects are called movie clip groups and have their own timelines, which behave just like the main timeline. To open the timeline of a movie clip group, double-click on its name in the main timeline. 2 Expand “SnowMan,” and select the “Stick” layer. 3 Add two keyframes to the “Stick” layer to animate its rotation. 4 Select the “Nose” layer. 5 Add two keyframes to the “Nose” layer to animate its rotation.
Animate the snowflakes 1 In the Composition timeline, double-click “Loop_rotate snowflake 1” to open its movie clip group. 2 Expand “Rotate_Snowflake_1,” and add three keyframes to animate the snowflake’s position. Set the first keyframe with the snowflake in the offscreen area above the canvas, the second keyframe with it in the middle of the sky, and the third keyframe with it on the ground. 3 Open the “Rotate_Snowflake_1” movie clip group. 4 Drag out the group duration bar to make it longer. Each loop is represented by a line in the duration bar. Make three loops. 5 Repeat these steps with the “Loop_rotate_snowflake_2” through “Loop_rotate_snowflake_9” movie clip groups. 6 Change the rotation speed for some of the snowflakes by adjusting the duration of the looped rotation animation. 7 In the Composition Timeline, stagger the snowflakes’ duration bars so they fall at different times.
Add music 1 Double-click “Audio” to open the movie clip group. 2 Drag Snowman.aif from the Lessons/LessonB folder onto the timeline. 3 Drag the “Snowman (Event)” duration bar so that the sound loops 20 times.
LM_02.book Page 247 Thursday, May 23, 2002 10:05 AM
Review Project C: Movie Clip Groups Animating movie clip groups Adding interactivity Creating animated and remote rollovers
In this review project, you’ll use the techniques you learned in lessons 8 through 11 to make a wire figure move in and out of the composition, and another figure move along a series of animated rectangles. You’ll do all this by creating movie clip groups. You’ll then create rollovers and add scripts to trigger the animations you created. Your animation doesn’t need to look just like ours; simply follow along and use your LiveMotion knowledge to complete the steps. The files you need are located in the Lessons/Review_C folder.
LM_02.book Page 248 Thursday, May 23, 2002 10:05 AM
248 REVIEW PROJECT C Time-Independent Groups
Animate the large wire man 1 Create a new composition and place Wireman big.psd into it. 2 Animate Wireman big.psd over three seconds so that it zooms into the center of the composition, stays there for a few moments, then moves off to the right. 3 With Wireman big.psd at the point where it has just moved to the center, use the ellipse and pen tools and the appropriate Combine command to draw a “thought balloon.” Then convert the thought balloon to an outline. 4 Duplicate the balloon and use the Layer palette to offset the duplicate and adjust its softness to create a shadow. 5 At the point where the thought balloon first appears, add a piece of text. Then add different pieces of text (setting text keyframes) for each keyframe that the thought balloon exists. 6 Select all of the objects you’ve created so far, and make them a movie clip group. Then name the group. 7 Open the movie clip group you just made, and move the duration bars so that all objects start at frame 00:01. 8 Add a label at 00:00. Then add a script at the end of the movie clip group’s animation that goes to the label at 00:00.
Animate the rectangles 1 Draw a tall, narrow rectangle and color it. 2 Move the rectangle’s anchor point to the bottom of the rectangle. 3 Animate the rectangle’s height so that it starts off short, then grows tall and shrinks back to its original height over two seconds. 4 Make nine duplicates of the rectangle and distribute them evenly, keeping their tops aligned. 5 Make each rectangle’s highest position occur at a different time than the one next to it, creating a wave motion. 6 Group the rectangles.
LM_02.book Page 249 Thursday, May 23, 2002 10:05 AM
ADOBE LIVEMOTION 2.0 249 Classroom in a Book
Animate the small wire man 1 Place Wireman small.psd into the composition. 2 Animate the figure so that it slides and rotates down the wave created by the rectangles. 3 Make the rectangle group and Wireman2.psd a single, movie clip group. Then name the group. 4 Set up script keyframes for this group as you did for the group in steps 7 and 8 for the large wireman group.
Create rollovers and scripts to trigger the animations 1 Place the files 1.psd and 2.psd as numbers onto the left side of the composition. Then place the file WiremanScript.psd as a title. 2 Apply a drop shadow from the styles palette to all three objects. 3 Add Over, Down, and Out states to the first number to turn it into a rollover. Make the Over and Down states look different than the Normal state. 4 Save the rollover as a style and apply it to the second number in the composition. 5 Add a script to the Down state of the first rollover, setting it to play the first movie clip group you created. Then do the same thing for the second rollover, setting it to play the second movie clip group. 6 Add a script to the main composition timeline at 00:00 that stops each of the groups you created. 7 Save the file, export it as HTML, and play the resulting HTML file in a Web browser.
