Adobe Live Motion 2.0 Classroom in a Book

Classroom in a Book

®

www.adobe.com/adobepress

LM_02.book Page 1 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


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 Work Area

Lesson 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

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 iii Thursday, May 23, 2002 10:05 AM

CONTENTS

iv

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 iv Thursday, May 23, 2002 10:05 AM

v

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

Exporting the finished composition . . . . . . . . . . . . . . . . . . . 111

Animating Object Properties

Lesson 7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

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 Advanced Rollovers

Lesson 9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

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 Interactivity

Lesson 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

LM_02.book Page v Thursday, May 23, 2002 10:05 AM

CONTENTS

vi

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 Composition

Lesson 11

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Opening the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Adding a streaming sound . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Adding a looping city sound . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Adding a volume controller . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Exporting the composition to SWF format . . . . . . . . . . . . . 220

Working with Dynamic Data

Lesson 12

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

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:The Game

Lesson 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

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 vi Thursday, May 23, 2002 10:05 AM

vii

Writing Automation Scripts and Live Tabs

Lesson 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

The JavaScript connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Working with automation scripts . . . . . . . . . . . . . . . . . . . . . 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 vii Thursday, May 23, 2002 10:05 AM

LM_02.book Page viii Thursday, May 23, 2002 10:05 AM

1

ADOBE LIVEMOTION 2.0

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


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


3


Classroom in a Book

Copying the Classroom in a Book files

The Classroom in a Book CD includes folders containing all the electronic files for the

lessons. Each lesson has its own folder, and you must copy the folders to your hard drive

to do the lessons. To save room on your drive, you can install only the necessary folder for

each lesson as you need it, and remove it when you’re done.

To install the Classroom in a Book files:

1

Insert the


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


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


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.


LESSON 1

8


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.


9


Classroom in a Book

Opening a file

Now you’ve opened LiveMotion, but you do not yet have a file to work with. Next you’ll

open a file and save it to your desktop. This is the file you’ll use for the rest of the lesson.

Choose File > Open and open the 01Start.liv file from the Lessons/Lesson01 folder.

As you work on this lesson, you’ll overwrite the start file. If you need to restore the start

file, copy it from the


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.


LESSON 1

10


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.

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.

Layer offset (O)

Rounded rectangle (R)

Polygon (N)

Pen selection (S)

Transform (E)

Eyedropper (I)

(U) Drag selection

Subgroup selection (A) (V) Selection

(M) Rectangle

(L) Ellipse

(P) Pen

Text field (Y)(T) Type

(C) Crop

(K) Paint bucket

Zoom (Z)(H) Hand

Preview mode (Q)Edit mode

Current fill colorDocument background color

Color scheme

Tools


11ADOBE LIVEMOTION 2.0Classroom 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 compositionThere 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.


LESSON 112Getting to Know the Work Area

3 Make the window bigger and notice that a gray area appears around the canvas.

The canvas becomes the visible area of your composition when it is exported. You can

draw and store objects in the gray area outside the canvas, although they will not be visible

until they are on the canvas. This is useful if you want to bring objects in from off-screen

during animations, or keep them to the side for later use.

To see objects that are positioned outside the edge of the canvas, choose View > Objects

Off Canvas. This option shows just the outlines of objects.

4 Choose View > Zoom In, and notice how the Composition window changes. The title

bar of the Composition menu displays the current magnification level, changing from

01Start.liv @ 100% to 01Start.liv @ 200%.

5 Choose View > Zoom Out to return to the original composition size.

6 In the toolbox, select the zoom tool ( ). Click in the Composition window twice

to expand the view to 300%.



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



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



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.



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



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



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.



Previewing in LiveMotionYou 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.



Previewing in a browserNow 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 HelpAn 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.


LESSON 224Drawing Basic Shapes

Getting startedIn this lesson, you’ll learn how to do the following:

• Create shapes and layers.

• Create text objects.

• Add effects and textures to shapes.

• Change the size, color, and opacity of shapes.

• Use various combine commands.


If needed, remove the previous lesson folder from your hard drive and copy the Lesson02

folder onto it.

Note: Windows users need to unlock the lesson files before using them. For more information,


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.


25ADOBE LIVEMOTIONClassroom in a Book

Starting a new fileIn 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 shapeThe 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.



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.



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.



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.



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.



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.



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.

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.

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.



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.



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.




You’ve finished making the first part of the logo. Next, you’ll create the house shape that

completes it.

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

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.



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.



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.



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.




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.



Saving to the LibraryThe 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 compositionTo 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.


LESSON 344Working with Type


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



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



Using text as a maskA 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.



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.




Working with a styleNow 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.



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.



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.




Changing text alignmentUsually 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 textIn 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.



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.




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.



7 Choose Window > Color or click the palette’s tab to display the Color palette. Change

the circle from gray to black.

Using Edit OriginalThe 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.



Using the Adjust paletteNow 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.


Exporting the finished compositionIn 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.


LESSON 460Working with the Pen Tool


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

12

1

2

35

4

7

11

10

9

8

6



Opening the fileIn 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 toolOne 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.



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



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.



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.



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



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.

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.

12

1

2

3

11

12

1

2

3

11

12

1

2

3

11



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.

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.

35

4

7

11

10

35

4

7

11

10




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.

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.

54

7

10

9

8

6 54

7

10

9

8

6

12

1

2

3

11



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.

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.

12

1

2

3

11

12

1

2

3

11

12

1

2

3

11



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.


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






12

1

2

35

4

7

11

10

9

8

6


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.


LESSON 580Animating Position


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




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






Creating an object to animate1 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 ( ).



Viewing the timelineYou 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.



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.



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



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.



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 animationNow 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 ( ).



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



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.



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



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.



Replacing an object in an animationNow 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.



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


LESSON 698Editing Keyframes


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







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






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



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.




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.




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.



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




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.





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.




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



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.



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.



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.



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.


LESSON 7116Animating Object Properties


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







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.



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



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.



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.



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.



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



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.




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.



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



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.



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.




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.



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.



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 AnimationFinally, you’ll add a sound that plays when the pale yellow band appears.




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.


LESSON 8140Creating Basic Rollovers


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







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



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.



Creating layered effectsAdobe 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.



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.



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



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.



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.



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.




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.




Labeling the rollover buttonsYou 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.




Linking rollovers to URL addressesYou 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.



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 buttonsIn this final part of the lesson, you’ll export the LiveMotion composition you made and



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.


LESSON 9156Movie Clips and Advanced Rollovers


• 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 ( ).



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




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



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



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.



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.



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.




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.



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



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.



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.



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



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.



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



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.



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.



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.




Using Illustrator artwork as an animated movie clipAdobe 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).



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.



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.



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.



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



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.


LESSON 10182Basic Player Script Interactivity


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



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.





2 Choose File > Open, and open the start file 10Start.liv from the Lessons/Lesson10

folder.






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



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.




Using transitions between scenesAs 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.




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.



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



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.



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:



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.



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:



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




Creating looping landscapesThe 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.



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.



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.



Targeting the inner_door statesNow 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”);



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.





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



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




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.









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.


LESSON 11206Adding Sounds to Your Composition


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





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






Adding a streaming soundYou’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.

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




9 Chose File > Preview in > your browser of choice to watch the movie and hear the

streaming sound.

Adding a looping city soundSound 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.



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.



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.




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.




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.



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”)




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.



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.



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();



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.



Adding a volume controllerThrough 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.





10 Click each of the location buttons, listen to the music, and play with the

volume controller.

Exporting the composition to SWF formatYou’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.



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.


LESSON 12226Working with Dynamic Data


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





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



Building the name/password input screenThe 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.



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.



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.



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");

}



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.



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:



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



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.




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.



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.



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()





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, tooMost 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).



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.




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.



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.



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.

Exporting the composition to SWF formatYou’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.


LESSON 13254Advanced Interactivity: The Game


• Identify basic game components.

• Adjust game settings.

• Update an existing game.












Start your engines!



Opening the compositionThe start file for this lesson contains the complete working game.




2 Choose File > Open and open the start file 13Start.liv from the Lessons/Lesson13

folder.

Getting started with game designThis 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.



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.



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



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.



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;

}



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");

}



// 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;



_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



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) {



// 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();



This script is placed into the actions movie clip’s onEnterFrame handler:

_root.moveCar();

_root.newHazard();

_root.moveHazards();

Modifying the gameThe 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:




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.



Exporting the composition to SWF formatYou’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.


LESSON 14272Writing Automation Scripts and Live Tabs


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



Working with automation scriptsLiveMotion 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.



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.



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.



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



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.



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.



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.



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 TabsLive 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:



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



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



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



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.



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;



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 functionLimber 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;



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:



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.



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;



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);

}



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, automateThe controls built into the ButtonMaker Live Tab allow you to create a wide range of

custom, 3D-style buttons.



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.


LESSON 15296Exporting


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



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




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.



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.

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.

Export format setting

Additional exportformat setting



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.



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.



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



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.



Exporting as GIF1 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.



Optimizing SWF outputLiveMotion 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.



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



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.



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



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



Index

A

Actual Size command 13

Add Keyframe checkbox 86

adding links 298

adding URLs 298

Adjust palette 55

aliases 141, 307

Align command

Bottom 50, 53

Centers 28, 33

Left 142

Top 51

ALT text 298

animated rollovers 159

animated sequences 183

animation

Auto Bezier command 88

layer properties 85

lighting 120

Linear command 89

object attributes 85

opacity 122

opacity gradient angle 124

playing 87

playing frame-by-frame 88

position 85

rotation 90

scale 91

scrubbing 88

sounds 130

stacking order 109

time stretching 93

transform properties 85

Apply Sound button 149

Arrange command

Send Backward 111

Auto Bezier command 88

Automation scripts 271

B

Back One Frame button 88

background color box 18

Bezier curves 65

Break Apart Text command 53

ButtonMaker 280

C

canvas 10, 12

Color palette

RGB View 17

Combine command

Exclude 51

Minus Front 36, 53

Unite 36

Unite with Color 29, 34

combining objects 29

Composition Settings

command 13

dialog box 13

composition settings 301

editing 13

frame rate 14

Composition window

about 10

offscreen area 12

resizing 11

Console 274

constraining proportions 38

control points

adding 62

adjusting 69

converting 63

moving 63

removing 65

convert

Illustrator artwork 175

corner points 63, 67

current-time marker 84

D

Debugger 274

Deselect All command 11

direction lines 63, 64

direction points 63, 64

Distribute command

Horizontal 50

Vertical 142

drawing

paths 61

pen tool 61

shapes 25

Duplicate command 109

Duplicate Rollover State button 147

duration bars 83

dynamic data 225

E

Ease In command 106

Ease Out command 106

Edit mode 19

Edit Name command 160

Edit Original command 54

ellipse tool 32

Export commands 299

Export palette 299

Export report 303, 305

export settings

compositions 299, 301

individual objects 301

optimizing 302


INDEX312

Export Settings command 40

exporting compositions 39

eyedropper tool 18

F

file formats

Flash 1, 39, 296

GIF 297

JPEG 297

Photoshop 297

PNG-Indexed 297

PNG-Truecolor 297

files

new 25

opening 9

placing 28

previewing 19

size 19, 300

fill 31, 34

Flash file format 1, 39, 296

Forward One Frame button 88

frame rate 14, 307

G

game

elements 255

modification 265

GIF

file format 297

export 304

Go To URL behavior 151

Gradient palette 143

grid

about 14

settings 15

Group command 33

guides 14

H

hand tool 11

Help 20

Hold Keyframe command 104

I

Illustrator files

placing 28, 178

converting 175

J

Javascript 272, 302

JPEG file format 297

K

keyboard shortcuts 10

keyframes

adding 89

creating 86

dragging 104

Ease In 106

Ease Out 106

hold frames 103

reversing 107

L

Layer palette 29

layers

adding 31

creating 29

deleting 31

hiding 145

opacity 29

reordering 31

showing and hiding 145

width 29

Library

saving to 39

Library palette 35

Linear command 89

links

adding 298

adding to rollovers 151

ALT text 298

file names 299

targets 298

Live Tabs

creating 280

ButtonMaker 281

looping 194

M

Make Actual Size command 93

Make Alias command 141

masks

about 46

motion paths 87

movie clip groups

advantage of animating 307

checkboxes 236

masked button 164

states 170

N

New command 25

New Rollover State button 147

O

object layers 31

Object Layers palette 29

objects

selecting 10

online Help 20

opacity 29

Opacity Gradient Angle 125

Opacity palette 29, 125

outlines

about 31

width 32

P

palette menus 17

palettes

about 16

displaying 16

hiding 16

moving 16



rearranging 17

resizing 17

password field 229

paths

closing 68

creating 61

pen selection tool 63

pen tool 61

adjusting points 69

control points 62

corner points 67

drawing a curved line 65

drawing a straight line 66

paths 61

smooth points 67

Photoshop

file format 297

files 28

Place command 28, 184

placing files 28

Play button 87

player script 181, 253

PNG-Indexed file format 297

PNG-Truecolor file format 297

post-transform 306

preferences

editing 15

grid settings 15

resetting 9

preloader 199, 309

Preview export compression 19

Preview mode 19

Preview Motion Path command 87

previewing in a browser 20

previewing in LiveMotion 19

Properties palette 25

properties, animating 85

R

radio buttons 284

rectangle tool 25

Replace command 92

Reset to Defaults command 9

rollovers

animating 159

Down state 147

multiple rollovers 141

Over state 147

remote 177

rounded-rectangle tool 142, 164

rulers 14

S

Save As command 25

Script Editor 189, 279

scrubbing 88

Select 50

Select All command 39

selecting objects 10

selection tool 10

sequences 183

Show Grid command 14

Show Guides command 16

Show Rulers command 14

Show/Hide button 145

sliders 17

smooth points 63, 67

Snap to Grid command 14

sounds

applying to rollovers 149

looping 130

solo event 213

streaming 208

Sounds palette 130

stacking order 109

status bar 19, 300

stopwatches 86

stroke and fill 34

styles

about 48

applying 50

creating 48

saving 49

Styles palette 48

subgroup selection tool 52

SWF

file format 1, 39, 296

export 303

optimization 305

T

text

creating 46

text alignment 51

text boxes 17

text field tool 228

textures 30

Textures palette 30

3D palette 27

time independent groups

creating 158

Timeline window

Add Keyframe checkbox 86

Back One Frame button 88

current-time marker 84

First Frame button 102

Forward One Frame button 88

keyframes 86

Play button 87

stacking order 109

stopwatches 86

viewing 83

zoom levels 83

toolbox

about 10

background color box 18

Edit mode 19

Preview mode 19

tools. See individual tool.

Top Object Is Mask command 47

transformations

native 306

transitions 186

Transform palette 26

type tool 46, 234

Type Tool dialog box 46, 234, 240


INDEX314

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 NotesThis 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?An Adobe Certified Expert (ACE) is anindividual who has passed an AdobeProduct Proficiency Exam for a specified Adobe software product. Adobe Certified Experts are eligible to promote themselves to clients or employers as highly skilled, expert level users of Adobe Software. ACE certification is a recognized standard for excellence in Adobe software knowledge.

ACE BenefitsWhen you become an ACE, you enjoythese special benefits:

• Professional recognition

• An ACE program certificate

• Use of the Adobe Certified Expert program logo

What is an ACTP?

An Adobe Certified Training Provider(ACTP) is a Training professional ororganization that has met the ACTPprogram requirements. Adobe promotes ACTP’s to customers who need trainingon Adobe software.

ACTP Benefits

• Professional recognition

• An ACTP program certificate

• Use of the Adobe Certified Training

Provider program logo

• Listing in the Partner Finder on

Adobe.com

• Access to beta software releases

when available

• Classroom in a Book in Adobe

Acrobat PDF

• Marketing materials

• Co-marketing opportunities

For more information on the ACE and ACTP programs, go to partners.adobe.com, and look for these programs under the Join section.


Review Project A: Creating ObjectsCreating 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.


REVIEW PROJECT A74Tools 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.



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


REVIEW PROJECT B136Basic 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 GroupsAnimating 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.


REVIEW PROJECT C248Time-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.



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.


Documents

Adobe Live Motion 2.0 Classroom in a Book