Adobe Live Motion 2.0 Classroom in A Book

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 respon-
sibility 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Installing the program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
Installing the Classroom in a Book fonts . . . . . . . . . . . . . . . . . .2
Copying the Classroom in a Book files . . . . . . . . . . . . . . . . . . . .3
Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Adobe Certification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Getting to Know the Lesson 1 ................................................ 7

Work Area
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Using the tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Viewing the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Editing composition settings . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Using the rulers, grid, and guides . . . . . . . . . . . . . . . . . . . . . . . 14
Working with palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Previewing in LiveMotion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Previewing in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Using online Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Drawing Basic Shapes Lesson 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Starting a new file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Creating a shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Saving to the Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Exporting the finished composition . . . . . . . . . . . . . . . . . . . . 39
Working with Type Lesson 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Working with the Pen Tool Lesson 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Opening the file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Modifying shapes with the pen tool . . . . . . . . . . . . . . . . . . . . 61
Creating a freeform shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Review Project A: Creating Objects . . . . . . . . . . . . . . . . . . . . . 73
Animating Position Lesson 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Creating the file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Creating an object to animate . . . . . . . . . . . . . . . . . . . . . . . . . 82
Viewing the timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Animating position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Playing animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Editing keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Animating rotation and scale . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Replacing an object in an animation . . . . . . . . . . . . . . . . . . . 92
Time-stretching an animation . . . . . . . . . . . . . . . . . . . . . . . . . 93
Editing Keyframes Lesson 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Opening the file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Animating the plane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
LM_02.book Page v Thursday, May 23, 2002 10:05 AM
Reversing keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Exporting the finished composition . . . . . . . . . . . . . . . . . . . 111
Animating Object Lesson 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Properties
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Opening the file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Animating an ellipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Animating a gradient highlight . . . . . . . . . . . . . . . . . . . . . . . 122
Animating type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Adding sound to the Animation . . . . . . . . . . . . . . . . . . . . . . 130
Review Project B: Basic Animation . . . . . . . . . . . . . . . . . . . . . 135
Creating Basic Rollovers Lesson 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Building multiple rollovers simultaneously . . . . . . . . . . . . . 141
Creating layered effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Creating rollover states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Labeling the rollover buttons . . . . . . . . . . . . . . . . . . . . . . . . . 150
Linking rollovers to URL addresses . . . . . . . . . . . . . . . . . . . . 151
Exporting the rollover buttons . . . . . . . . . . . . . . . . . . . . . . . . 152
Movie Clips and Lesson 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Advanced Rollovers
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Building the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Making a movie clip group button . . . . . . . . . . . . . . . . . . . . 158
Animating rollover states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Creating a masked movie clip button . . . . . . . . . . . . . . . . . . 164
Using Illustrator artwork as an animated movie clip . . . . 173
Targeting remote rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Basic Player Script Lesson 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Interactivity
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 . . . . . . . . . . . . . . . . . . . . . 186
Using the Script Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Creating looping landscapes . . . . . . . . . . . . . . . . . . . . . . . . . 194
Targeting the inner_door states . . . . . . . . . . . . . . . . . . . . . . 197
Creating a preloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Adding Sounds to Your Lesson 11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Composition
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 . . . . . . . . . . . . . 220
Working with Lesson 12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Dynamic Data
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Building the name/password input screen . . . . . . . . . . . . . 228
Building the game data input screen . . . . . . . . . . . . . . . . . . 234
Dynamic text fields are for output, too . . . . . . . . . . . . . . . . . 239
Review Project C: Movie Clip Groups . . . . . . . . . . . . . . . . . . . 247
Advanced Interactivity: Lesson 13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

The Game
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Opening the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Getting started with game design . . . . . . . . . . . . . . . . . . . . 255
Race car game mechanics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Modifying the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
LM_02.book Page vii Thursday, May 23, 2002 10:05 AM
vii
Writing Automation Lesson 14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Scripts and Live Tabs
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
The JavaScript connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Working with automation scripts . . . . . . . . . . . . . . . . . . . . . 273
Writing an automation script . . . . . . . . . . . . . . . . . . . . . . . . . 276
Creating Live Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Meet the ButtonMaker Live Tab . . . . . . . . . . . . . . . . . . . . . . . 281
The bits and pieces of ButtonMaker . . . . . . . . . . . . . . . . . . . 282
Writing the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Building the doIt function . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Design, create, automate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Exporting Lesson 15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Exploring export formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Preparing for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
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 multi-
character 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.
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.

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.
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.
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.
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.

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.
10 LESSON 1
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 Subgroup selection (A)

Tools
(U) Drag selection Layer offset (O)
(M) Rectangle Rounded rectangle (R)

(L) Ellipse Polygon (N)
(P) Pen Pen selection (S)

(T) Type Text field (Y)
(C) Crop Transform (E)
(K) Paint bucket Eyedropper (I)

(H) Hand 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.

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.
12 LESSON 1
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%.

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.
14 LESSON 1
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.

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.
16 LESSON 1
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.

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.
18 LESSON 1
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.

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 ( ) in the toolbox.
2 Click the Edit mode button ( ) 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.
20 LESSON 1
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.
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.
24 LESSON 2
Drawing Basic Shapes
Getting started
• 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.
If needed, remove the previous lesson folder from your hard drive and copy the Lesson02
folder onto it.
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.

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.
26 LESSON 2
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.
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.
28 LESSON 2
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.
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.
30 LESSON 2
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.
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.
32 LESSON 2
1 Select the ellipse tool ( ) from the toolbox, and drag to create an ellipse.
2 In the Transform palette, enter 144 in the width ( ) and height ( ) text boxes to make
a circle of the same size as the globe.
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.
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.

34 LESSON 2
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 ( ).
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 counter-
clockwise 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.
36 LESSON 2
6 Select both objects, and choose Object > Combine > Unite. Just like the globe and the
circle, the two shapes are now a single shape.
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.
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.
38 LESSON 2
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.

You’ve now completed the logo.
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.
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.”
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.
44 LESSON 3
Working with Type
Getting started
• 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.
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.
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.

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.
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.
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.

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.

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 conve-
nient 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.

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.

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.


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.
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.


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 compo-
sition 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.
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.

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.

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.
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.
60 LESSON 4
Working with the Pen Tool
Getting started
• 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.
composition.
1 Start a Web browser, such as Netscape Communicator or Microsoft Internet Explorer.
The composition is a drawing of a bird, created with the pen tool.
2
1 3
4 6
5
12 7 8
10
11 9

Classroom in a Book
Opening the file

In this first part of the lesson, you’ll create a new file.
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.
Choose Path from the menu.
4 Select Outline, and enter 10 for the Width.
62 LESSON 4
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


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.
64 LESSON 4
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.

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.
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.
66 LESSON 4
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 2
1 3 1 3 1 3
12 12 12
11 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.

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 3
4 4
5 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.
68 LESSON 4
4 6 4 6
5 5
7 8 7 8
10 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
1 3
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.

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 2
1 3 1 3 1 3
12 12 12
11 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.
70 LESSON 4
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
1 3
4 6
5
12 7 8
10
11 9

You can use the Color palette to change the color of the bird.

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.
80 LESSON 5
Animating Position
Getting started
• 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
Web animation.
1 Start a Web browser that can display SWF file format files, such as Netscape Commu-
nicator or Microsoft Internet Explorer. (If the necessary plug-in is not installed,
animation will not be visible.)

Classroom in a Book
The animation consists of a flying saucer that zooms toward the bottom of the compo-
sition, 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.
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.
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.
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 ( ).

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.
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 repre-
sents 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.

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.
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.
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.

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.
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 ( ).
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 current-
time marker.

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.
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
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.

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

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.

12 Play the animation.
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.

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 compo-
sition. 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.

Classroom in a Book
5 Move the current-time marker to 06:00 and select the saucer.

6 Choose Object > Transform > Make Actual Size.
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.
To slow down My_Object’s animation, click and drag the duration bar to the right while
holding down Alt (Windows) or Option (Mac).

2 Open a Web browser; then locate and open the HTML file you just exported to preview
the finished file.
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.
98 LESSON 6
Editing Keyframes
Getting started
• 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.
Web animation.

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
Opening the file

In this first part of the lesson, you’ll open the start file and Timeline window.
2 Choose File > Open, and open the file 06Start.liv from the Lessons/Lesson06 folder.
100 LESSON 6
Editing Keyframes
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.

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.

102 LESSON 6
Editing Keyframes

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.

Classroom in a Book
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.
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 simul-
taneously 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).

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.
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.

Classroom in a Book

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.
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.

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.
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.
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.

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.

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.

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.
116 LESSON 7
Animating Object Properties
Getting started
• Work with a file that contains animated objects.
• Animate multilayered objects.
• Change color, object opacity, and layer opacity over time.
• Work with sound.
Web animation.
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.

Classroom in a Book
Opening the file

2 Choose File > Open, and open the file 07Start.liv from the Lessons/Lesson07 folder.
The start file
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.
118 LESSON 7
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.

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
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.
120 LESSON 7
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.

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.
122 LESSON 7
9 Drag the current-time marker back to 00:00, and play the animation from the
beginning.
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.

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.
124 LESSON 7
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.
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.

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.
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.
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.
126 LESSON 7
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 55-
point, 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.

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.
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.
128 LESSON 7
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.

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.
130 LESSON 7
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.
17 In the Timeline window, click the Add Keyframe box ( ) to the right of Object
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.
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.

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.

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.
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.
140 LESSON 8
Creating Basic Rollovers
Getting started
• 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.
restore the start files, copy them from the Adobe LiveMotion Classroom 2.0 in a Book CD.
You’ll begin this lesson by viewing a copy of the finished rollover buttons.

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.
Building multiple rollovers simultaneously

Adobe LiveMotion includes a Make Alias feature that lets you create more than one multi-
state 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.
3 In the Composition Settings dialog box, enter 120 for the Width setting and 150 for the
Height setting, and click OK.
When you reset the palettes to their default properties, the fill color changes to black
(as indicated in the toolbox and the Color palette).
142 LESSON 8
5 Select the rounded-rectangle tool ( ) in the toolbox, and draw a black

rounded rectangle.
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.

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.
144 LESSON 8
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.


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.
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.
146 LESSON 8
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.

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 ( ) at the bottom of the toolbox when you’re done
previewing.
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.
148 LESSON 8
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 ( ) and then click the buttons in the Composition
window to preview the visual effect.
7 Click the Edit Mode button ( ) when you’re done previewing.

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.
150 LESSON 8
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 ( ) and click in the middle of the selected text to make
your changes.

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.
You’ve finished making basic rollover buttons.
152 LESSON 8
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

2 Open a Web browser; then locate and open the HTML file that you just exported, and
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.
156 LESSON 9
Movie Clips and Advanced Rollovers
Getting started
• 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.
You’ll begin this lesson by viewing an HTML file of the finished composition in your
Web browser.
3 Click the Preview Mode button ( ).

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.
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.
158 LESSON 9
2 Choose File > Open and open 09Start.liv from the Lessons/Lesson09 folder.
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.

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.
160 LESSON 9
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.

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.
162 LESSON 9
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 ( ) in the toolbox when you’re done previewing
the effects.

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 ( ) in the toolbox when you’re done previewing
the effects.
164 LESSON 9
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.
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.
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.
palette. Enter 240 in the Width ( ) setting and 40 in the Height ( ) setting.
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.

Classroom in a Book
10 In the Transform palette, enter 120 in the Width ( ) setting and 40 in the
Height ( ) setting.
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.
166 LESSON 9
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.

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.”
168 LESSON 9
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.

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).
170 LESSON 9
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.

Classroom in a Book
7 With the Current Time Indicator at 00s, select left-slider (ready_to_launch); then shift-
click 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.
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.
172 LESSON 9
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.
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.

Classroom in a Book
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).
174 LESSON 9
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.

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.
176 LESSON 9
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.
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.
17 In the Timeline, extend the masked_rocket (take-off) timeline to 09s.
18 Expand rocket (take-off) > Transform.

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 disap-
pearing 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.
Targeting remote rollovers

All that’s left now is to assign the remote rollovers. Adobe LiveMotion makes this a point-
and-shoot affair.
1 Select the Start Ignition button.
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.
178 LESSON 9
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.
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.

You’ve finished making an animated rollover and a pair of remote rollovers.

Open a Web browser; then locate and open the file 09Start.html that you just exported to
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.
182 LESSON 10
Basic Player Script Interactivity
Getting started
• 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.
Web animation.
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.

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.
Opening the file

2 Choose File > Open, and open the start file 10Start.liv from the Lessons/Lesson10
folder.
184 LESSON 10
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.


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.
186 LESSON 10
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.

Classroom in a Book

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.
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.
The opacity fade at the end of the transition is very subtle. You can see it more clearly by
scrubbing the current-time marker.
188 LESSON 10
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.
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.
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.
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.

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.
190 LESSON 10
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:

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-and-
click 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.
192 LESSON 10
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:

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.
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.
194 LESSON 10
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.

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”);
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.
4 Name the label mountain_start and then click OK.
196 LESSON 10
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.
6 Select LABEL in the Script Editor, and replace it with “mountain_start” so that the
line reads:
this.gotoAndPlay(“mountain start”);

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
12 Double-click double click Go to Label (and play) in the Scripting syntax helper listing.
13 Select LABEL in the Script Editor, and replace it with “city_start” so that the line reads:
this.gotoAndPlay(“city start”);

15 The city state is now set up to loop.

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

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”);
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”);
198 LESSON 10
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.
press Enter (Windows) or Return (Mac) to add a second line to the script.
_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.
press Enter (Windows) or Return (Mac) to add a second line to the script.

Classroom in a Book

_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.
_root.inner_door.lmSetCurrentState (“home”);

16 Select Preview Mode from the toolbox to preview the movie. Click on the beach,
mountains, city, and home buttons to see what happens.
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:
Composition level.
2 Set the current-time marker to 00:00 in the Timeline window. Click the Label button.
200 LESSON 10
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
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”.

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.
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.
202 LESSON 10

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.
206 LESSON 11
Adding Sounds to Your Composition
Getting started
• 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.
You’ll begin this lesson by viewing the final composition in a Web browser.
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.
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.

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.
2 Choose File > Open and open the start file 11Start.liv from the Lessons/Lesson11
folder.
208 LESSON 11
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.

Classroom in a Book

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.
210 LESSON 11
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.

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.
212 LESSON 11

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.

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 occur-
rences 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
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.
214 LESSON 11
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”)

Classroom in a Book

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
Building the beach loop

1 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go back
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.
6 Choose Object > Edit Name, enter beach_music, and click OK.
_root.beach_music_container.gotoAndStop(“stop”)

10 In the Timeline window, double-click beach_music to drill down into the movie clip
group’s timeline.
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.
216 LESSON 11
13 Select 11_Loop_Guitar (Event) in the Timeline window, and choose Solo Event
Building the mountain loop

1 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go back
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.
6 Choose Object > Edit Name, enter mountain_music, and click OK.
_root.mountain_music_container.gotoAndStop(“stop”)

10 In the Timeline window, double-click mountain_music to drill down into the movie
clip group’s timeline.
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
14 In the Timeline window, click the left arrow ( ) in the upper left corner twice to go
back to the Composition timeline.

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.
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();
218 LESSON 11
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:
_root.inner_door.lmSetCurrentState("mountain");
_root.city_music_container.city_music.gotoAndStop("start");
stopAllSounds();
_root.mountain_music_container.play();
beach_button from the list.
8 Edit the beach_button script onButtonPress script to read:
_root.inner_door.lmSetCurrentState("beach");
stopAllSounds();
_root.beach_music_container.play();
home_button from the list.
10 Edit the home_button script onButtonPress script to read:
_root.inner_door.lmSetCurrentState("home");
stopAllSounds();
_root.home_music_container.play();

13 Select File > Preview in > your browser of choice.

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.
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.

7 Use the Transform palette to position sound_controller with the approximate
coordinates: X 285 Y 245.
220 LESSON 11
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.

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.
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.
226 LESSON 12
Working with Dynamic Data
Getting started
• Assemble a multi-page form.
• Use variable data fields for input and output.
• Create a password field.
• Use checkboxes to store variables.
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,
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.

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 alphanu-
meric characters, i.e.: Joe Smith or 123 Main Street.
• Numbers — used to store numeric values.
• Booleans — true or false values.
228 LESSON 12
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.
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
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.

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.
230 LESSON 12
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.
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
current location of the keyframe script. Type:
stop()

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.

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.

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.
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");
}
232 LESSON 12
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.
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.
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.

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.
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:
234 LESSON 12
if (_root.coach_password == the_password) {
_root.play()
} else {
_root.gotoAndPlay("form_start");
_root.invalid_password.lmSetCurrentState("invalid");
}

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.
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 current-
time 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:.

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.
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.
236 LESSON 12
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.

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.

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.
238 LESSON 12
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
current location of the keyframe script. Type:
stop()

Classroom in a Book

5 Shorten the timelines of all of the current objects (except for the Soccer Score-O-Matic
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()
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).
240 LESSON 12
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.
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.
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.

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.
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.
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.
242 LESSON 12
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.
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()

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.

Classroom in a Book
7 In the submit_button’s onButtonPress handler, type:

_root.play()

9 In the Timeline window, extend the composition time to 01:02, and move the current-
time marker to 01:01.
10 Shorten the timelines of all of the objects (except for the Soccer Score-O-Matic
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.

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.
Adobe LiveMotion creates an HTML file and a SWF file of your final composition as well
Lessons/Lesson12 folder and open the HTML file of your composition.
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.
254 LESSON 13
Advanced Interactivity: The Game
Getting started
• Identify basic game components.
• Adjust game settings.
• Update an existing game.
Start your engines!
Opening the composition

The start file for this lesson contains the complete working game.

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.
256 LESSON 13
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 game-
over screen gives the player the opportunity to play the game again.

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 script-
only 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.
258 LESSON 13
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 multi-
frame 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.

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;
}
260 LESSON 13
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");
}

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;
262 LESSON 13
_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


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) {
264 LESSON 13
// 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();

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:
to:
Change:
to:
266 LESSON 13
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:
to:
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:
to:
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.

Classroom in a Book

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.
Adobe LiveMotion creates an HTML file and a SWF file of your final composition as well
Lessons/Lesson13 folder, and open the HTML file of your composition.
4 Click the start button. Good luck on your race!
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.
272 LESSON 14
Writing Automation Scripts and Live Tabs
Getting started
• 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.
You’ll begin this lesson by learning to use LiveMotion 2.0’s tools to write automation
scripts in the JavaScript language.
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.

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.
274 LESSON 14
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.

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.
276 LESSON 14
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.
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.

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.
278 LESSON 14
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.

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
{
}
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.
280 LESSON 14
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 impor-
tance 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:

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 under-
standing 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 specifi-
cally 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.
282 LESSON 14
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.

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 compo-
nents; 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.
284 LESSON 14
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.
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.


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;
286 LESSON 14
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;

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:
288 LESSON 14
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.

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.
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;
290 LESSON 14
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)
{
}
else
{
}
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.
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);
}

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 even-
more-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.
292 LESSON 14
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.
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.
296 LESSON 15
Exporting
Getting started
• 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.
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.

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.
298 LESSON 15
Exporting
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.

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.
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.

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.
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.

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.
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.

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.
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.

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 appro-
priate 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.
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).

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.

Classroom in a Book
Index
A Auto Bezier command 88 removing 65
Actual Size command 13 Automation scripts 271 convert
Add Keyframe checkbox 86 Illustrator artwork 175
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
Bottom 50, 53 ButtonMaker 280 Deselect All command 11
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 Horizontal 50
animated rollovers 159 RGB View 17 Vertical 142
animated sequences 183 Combine command drawing
animation 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 dynamic data 225
opacity gradient angle 124 dialog box 13
playing 87 composition settings 301 E
playing frame-by-frame 88 editing 13 Ease In command 106
position 85 frame rate 14 Ease Out command 106
rotation 90 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 export settings
Arrange command adjusting 69 compositions 299, 301
Send Backward 111 converting 63 individual objects 301
moving 63 optimizing 302
312 INDEX
Export Settings command 40 I Live Tabs

exporting compositions 39 Illustrator files creating 280
eyedropper tool 18 placing 28, 178 ButtonMaker 281
converting 175 looping 194
F
file formats J M
Flash 1, 39, 296 Javascript 272, 302 Make Actual Size command 93
GIF 297 JPEG file format 297 Make Alias command 141
JPEG 297 masks
Photoshop 297 K about 46
PNG-Indexed 297 keyboard shortcuts 10 motion paths 87
PNG-Truecolor 297 keyframes movie clip groups
files 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
fill 31, 34 reversing 107 New command 25
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 selecting 10
modification 265 hiding 145 online Help 20
GIF opacity 29 opacity 29
file format 297 reordering 31 Opacity Gradient Angle 125
export 304 showing and hiding 145 Opacity palette 29, 125
Go To URL behavior 151 width 29 outlines
Gradient palette 143 Library about 31
grid saving to 39 width 32
about 14 Library palette 35
settings 15 Linear command 89 P
Group command 33 links palette menus 17
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

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
pen selection tool 63 remote 177 T
pen tool 61 rounded-rectangle tool 142, 164 text
adjusting points 69 rulers 14 creating 46
control points 62 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
Photoshop Select All command 39 time independent groups
file format 297 selecting objects 10 creating 158
files 28 selection tool 10 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
editing 15 sounds stopwatches 86
grid settings 15 applying to rollovers 149 viewing 83
resetting 9 looping 130 zoom levels 83
preloader 199, 309 solo event 213 toolbox
Preview export compression 19 streaming 208 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 Preview mode 19
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 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
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
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
Adobe Certification Programs
What is an ACE? What is an ACTP?

An Adobe Certified Expert (ACE) is an An Adobe Certified Training Provider
individual who has passed an Adobe (ACTP) is a Training professional or
Product Proficiency Exam for a specified organization that has met the ACTP
Adobe software product. Adobe Certified program requirements. Adobe promotes
Experts are eligible to promote themselves ACTP’s to customers who need training
to clients or employers as highly skilled, on Adobe software.
expert level users of Adobe Software. ACE
certification is a recognized standard for ACTP Benefits
excellence in Adobe software knowledge. • Professional recognition
ACE Benefits • An ACTP program certificate

When you become an ACE, you enjoy • Use of the Adobe Certified Training
these special benefits: Provider program logo
• Listing in the Partner Finder on
• Professional recognition
Adobe.com
• An ACE program certificate
• Access to beta software releases
• Use of the Adobe Certified Expert when available
program logo
• 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.
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.

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.

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.
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.

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.
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.

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.

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.

Adobe Live Motion 2.0 Classroom in A Book

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Adobe Live Motion 2.0 Classroom in A Book

Caricato da

Copyright:

Formati disponibili

LM_02.

book Page 1 Thursday, May 23, 2002 10:05 AM

© 2002 Adobe Systems Incorporated. All rights reserved.

Printed in the U.S.A.

Getting to Know the Lesson 1 ................................................ 7

Drawing Basic Shapes Lesson 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Working with Type Lesson 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Working with a style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Working with the Pen Tool Lesson 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Review Project A: Creating Objects . . . . . . . . . . . . . . . . . . . . . 73

Animating Position Lesson 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Editing Keyframes Lesson 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Reversing keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Animating Object Lesson 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Review Project B: Basic Animation . . . . . . . . . . . . . . . . . . . . . 135

Creating Basic Rollovers Lesson 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Movie Clips and Lesson 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Basic Player Script Lesson 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Opening the file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Adding Sounds to Your Lesson 11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Working with Lesson 12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Review Project C: Movie Clip Groups . . . . . . . . . . . . . . . . . . . 247

Advanced Interactivity: Lesson 13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Writing Automation Lesson 14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Exporting Lesson 15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

ADOBE LIVEMOTION 2.0 1

About Classroom in a Book

Installing the program

Installing the Classroom in a Book fonts

To install the Adobe LiveMotion 2.0 Classroom in a Book fonts

ADOBE LIVEMOTION 2.0 3

Copying the Classroom in a Book files

1 Getting to Know the

Before you start creating compositions

ADOBE LIVEMOTION 2.0 9

Using the tools

(V) Selection Subgroup selection (A)

(M) Rectangle Rounded rectangle (R)

(P) Pen Pen selection (S)

(K) Paint bucket Eyedropper (I)

Current fill color

Edit mode Preview mode (Q)

The tools and their keyboard shortcuts

ADOBE LIVEMOTION 2.0 11

Viewing the composition

2 Now you’ll resize the Composition window.

ADOBE LIVEMOTION 2.0 13

8 Select the zoom tool again.

Editing composition settings

Using the rulers, grid, and guides

ADOBE LIVEMOTION 2.0 15

8 Choose View > Show Grid again to hide the grid.

9 Choose View > Show Guides.

Working with palettes

ADOBE LIVEMOTION 2.0 17

Using the palettes

ADOBE LIVEMOTION 2.0 19

Using online Help

2 Drawing Basic Shapes

You can create interesting compositions

2 Choose File > Close.

Starting a new file