Sei sulla pagina 1di 68

Adobe Edge Animate

classroom in a book
The official training workbook from Adobe Systems
CD-ROM Included for Windows and Mac OS

Adobe Edge Animate Classroom in a Book 2013 Adobe Systems Incorporated and its licensors. All rights reserved. If this guide is distributed with software that includes an end user license agreement, this guide, 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. Except as permitted by any such license, no part of this guide 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 note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. 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 files are for demonstration purposes only and are not intended to refer to any actual organization. Adobe, the Adobe logo, and Classroom in a Book are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Apple, Mac OS, Macintosh, and Safari are trademarks of Apple, registered in the U.S. and other countries. Microsoft, Windows, and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All other trademarks are the property of their respective owners. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110-2704, USA 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. Adobe Press books are published by Peachpit, a division of Pearson Education located in San Francisco, California. For the latest on Adobe Press books, go to www.adobepress.com. To report errors, please send a note to errata@ peachpit.com. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. Acquisitions Editor: Rebecca Gulick Writer: Russell Chun Development and Copy Editor: Stephen Nathans-Kelly Production Coordinator: Myrna Vladic Compositor: David Van Ness Technical Reviewer: Joseph Labrecque Keystroker: H. Paul Robertson Proofreader: Patricia Pane Indexer: Rebecca Plunkett Cover Designer: Eddie Yuen Interior Designer: Mimi Heft Printed and bound in the United States of America ISBN-13: 978-0-321-84260-2 ISBN-10: 0-321-84260-X 987654321

Whats on the DISC


Here is an overview of the contents of the Classroom in a Book disc
The Adobe Edge Animate Classroom in a Book disc includes the lesson files that youll need to complete the exercises in this book, as well as other content to help you learn more about Adobe Edge Animate and use it with greater efficiency and ease. The diagram below represents the contents of the disc, which should help you locate the files you need.
Peachpit Universal Mask updated 3/11/2011 116 mm print area, 23 mm center hole; fits these manufacturers specs: CDI JVC and all previous vendors Color Instructions 2-color: Pantone 272 C (purple) Pantone 485 C (red) White flood: Yes

.a

nd

ot

he

pple

WINDOWS/MAC OS

, reg

re i s te

Adobe Edge Animate

CLASSROOM IN A BOOK

d in

the

U. S

Ad o b e

, the

Ad o

be l

,a o go

nd

Cl a

s sr

oo

in

aB

032184260X_AEdgeAnimateCIB_Disc.indd 1

ok

ar

et

ra

de

ISBN-13: 978-0-321-84260-2 ISBN-10: 0-321-84260-X 11/12

ma

rk s

of

Ad

2013 Adobe Systems Incorporated All rights reserved. Made in the USA.

obe

Sy s

te m

s Inc

orpor

ated . Macin

tosh i s a tradema

r k of A

Adobe Press
Find information about other Adobe Press titles, covering the full spectrum of Adobe products, in the Online Resources file.

ou

rc

nt ri

es

.W

ind

ws is

eit

her

a re

gis t

ered

tradem

ar k or a trademar k of Micros o f

Co r p

orat

ion

in t

he

U. S

. an

d/o

ro

th

er

co

un

tri

es

Lesson files
Each lesson has its own folder inside the Lessons folder. You will need to copy these lesson folders to your hard drive before you can begin each lesson.

10/10/12 2:35 PM

Online resources
Links to Adobe Community Help, product Help and Support pages, Adobe Press, Adobe certification programs, Adobe TV, and other useful online resources can be found in a handy HTML file. Just open it in your web browser and click the links, including a special link to this books product page where you can access updates and bonus material.

Contents
Whats on the DISC iii

Introduction 1 Why Adobe Edge Animate?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Adobe family. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 About Classroom in a Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Installing Edge Animate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Copying the lesson files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 How to use the lessons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Additional resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Adobe certification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1 Getting Started 8

Starting Edge Animate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Getting to know the workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Working with elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Understanding the Element and Timeline panels . . . . . . . . . . . 26 Adding motion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Previewing the motion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Continuing and modifying the motion . . . . . . . . . . . . . . . . . . . . . 34 Next steps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 2 Creating Graphics and Importing Art 40

Understanding graphic formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Working with bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Working with vector graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Creating HTML elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Modifying rectangles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Working with Rulers and Guides. . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

iv

Contents

Creating text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Embedding custom fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Tidying up your elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Organizing your elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Adding special effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Making rotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 3 Designing Animation 80

Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 About animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Understanding the project file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Animating position with the Pin. . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Changing pacing and timing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Turning the display on and off. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Animating scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Creating fades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Timeline panel options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Copying and pasting animations. . . . . . . . . . . . . . . . . . . . . . . . . . 109 Adding easing to refine motion . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Editing overall timing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 4 Refining Animation and Adding Complexity 120

Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 About symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Creating nested animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Animating symbols on the Stage. . . . . . . . . . . . . . . . . . . . . . . . . . 128 Creating a looping animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Symbol instances. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Playback commands. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Editing symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Adding the characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Clipping animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Animating shadows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Working with advanced eases. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Adobe Edge Animate Classroom in a Book

Adding Basic Interactivity

156

Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 About interactive compositions. . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Understanding JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Timeline triggers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Minding your syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Events and actions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Creating the buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Navigating the Code panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Creating labels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Adding visual feedback. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Customizing the mouse cursor. . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Controlling animated elements . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 6 Embedding Media and Advanced Interactivity 200

Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Embedding media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Showing embedded media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Removing media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Adding hyperlinks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Adding HTML content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Keyboard events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Handling logic with conditionals. . . . . . . . . . . . . . . . . . . . . . . . . . 225 Using variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Coding the interactive slideshow. . . . . . . . . . . . . . . . . . . . . . . . . . 233 Final edits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 7 Publishing and Responsive Design 240

Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Publishing your composition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Down-level Stage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Preloaders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Embedding your composition into HTML. . . . . . . . . . . . . . . . . . 255 About responsive design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Edge Animate resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Index 273
vi

Contents

Introduction
Adobe Edge Animate is a new tool that provides a comprehensive authoring environment for creating animated, interactive, and media-rich content for the Web. Based on open, modern browser standards using HTML5, CSS3, and JavaScript, your Edge Animate creations run seamlessly across desktops, smartphones, and tablets. There is no need for the Flash Player, Silverlight, QuickTime, or downloading of any apps. Use Edge Animate to build animated banner ads, dynamic websites, and even interactive games with the full capabilities of JavaScript. Veteran Flash Professional users and animators will feel at home with a familiar interface consisting of a Timeline, Stage, and Library panel. Theyll add motion to images and HTML elements such as text and simple shapes with property-based keyframing, easing, and nested animations. Coders at all levels of experience can add interactivity with the built-in code snippets or with JavaScript. With sophisticated, yet intuitive controls for development, and platform-independent content, Adobe Edge Animate will be sure to expand your creative reach.

Why Adobe Edge Animate?


Adobe Edge Animate represents the next step in the evolution of interactive and animated Web content development. With the growing adoption of HTML5 standards, modern browsers are now able to display rich media without the need for plug-ins, such as the Flash Player. In conjunction with CSS3 and JavaScript, Edge Animate enables users to integrate animation and complex interactivity for stunning visuals and engaging user experiences. Unfortunately, the rapid rise in the popularity of HTML5, CSS3, and JavaScript has not coincided with the emergence of tools specifically for creative professionals. Coding motion graphics and interactive content by hand has been the usual course, but that approach takes time and effort, and for designers and animators who are more accustomed to graphical user interfaces, its more difficult. Adobe Edge Animate opens the door to designers and animators by providing an intuitive interface and a familiar toolbox: tools for creating shapes, options for styling, transformations, precision layout, and typography,
Adobe Edge Animate Classroom in a Book

and a timeline with keyframe controls for motion graphics. Rather than spend time on coding, designers and animators can spend their energies on what they do best: designing and animating.

The Adobe family


How does Adobe Edge Animate differ from other Adobe tools for the Web? Although there are overlaps in capabilities, each application has its own strengths and support different technologies. Edge Animate shines particularly when it comes to creating motion graphics and interactive sites with HTML5, CSS3, and JavaScript. Adobe Dreamweaver, another application that creates Web content with HTML5 and CSS3, is intended more for overall site design and navigation. For example, you would create an animated banner ad in Edge Animate, and use Dreamweaver to integrate the banner ad within the larger site. Adobe Flash Professional and Flash Builder are two other tools for creating animated and interactive content. However, both rely on the ActionScript programming language rather than HTML, CSS3, and JavaScript for interactivity. They both require the Flash Player or Adobe AIR to play Flash content. The Flash Player, although pervasive (it comes pre-installed with Googles Chrome browser), is not supported in all devices, and is not an open standard. However, the benefits of using the Flash Player or AIR are a uniform experience across all browsers, and the delivery of robust controlfor example, with controlling your webcam or saving files to your desktop.

About Classroom in a Book


Adobe Edge Animate Classroom in a Book is part of the official training series for Adobe graphics and publishing software developed with the support of Adobe product experts. The lessons are designed so you can learn at your own pace. Youll learn the fundamental concepts and features youll need to use the program. Classroom in a Book also teaches many advanced features, including tips and techniques that will help you get the most out of Adobe Edge Animate.

Prerequisites
Before you begin using Adobe Edge Animate Classroom in a Book, make sure your system is set up correctly and that youve installed the required software. You should have a working knowledge of your computer and operating system. You should know how to use the mouse and standard menus and commands, and also

Introduction

how to open, save, and close files. If you need to review these techniques, see the printed or online documentation included with your Microsoft Windows or Apple Mac OS software.

Installing Edge Animate


You must purchase the Adobe Edge Animate software as a download from Adobe Creative Cloud. The following specifications are the minimum required system configurations:

Windows
Intel Pentium 4 or AMD Athlon 64 processor Windows 7 or Windows Vista (Windows XP is NOT supported) 1 GB of RAM 200 MB of available hard-disk space for installation 1280x800 display with 16-bit video card Broadband Internet connection for online services and to validate Subscription
Edition (if applicable) on an ongoing basis.

Mac OS
Multicore Intel processor Mac OS X v10.6 and v10.7 (Mac OS X 10.5 is NOT supported) 1 GB of RAM 200 MB of available hard-disk space for installation 1280x800 display with 16-bit video card Broadband Internet connection for online services and to validate Subscription
Edition (if applicable) on an ongoing basis. For updates on system requirements and complete instructions on installing the software, visit http://adobe.com/edge.

Copying the lesson files


The lessons in Adobe Edge Animate Classroom in a Book use specific source files, such as image files created in Adobe Photoshop and prepared Edge Animate documents. To complete the lessons in this book, you must copy these files from the

Adobe Edge Animate Classroom in a Book

Adobe Edge Animate Classroom in a Book CD-ROM to your hard drive. Follow these steps to copy the lesson files: 1 On your hard drive, create a new folder in a convenient location and name it Edge_Animate_CIB, following the standard procedure for your operating system:

Windows: In Explorer, select the folder or drive in which you want to create
the new folder and choose File > New > Folder. Then type the new name. drag the folder to the location you want to use.

Mac OS: In the Finder, choose File > New Folder. Type the new name and
2 Drag the Lessons folder (which contains folders named Lesson01, Lesson02, and so on) from the Adobe Edge Animate Classroom in a Book disc onto yourhard drive to your new Edge_Animate_CIB folder. When you begin each lesson, navigate to the folder with that lesson number to access all the graphics, images, and other project files you need to complete the lesson. If you have limited storage space on your computer, you can copy each lesson folder as you need it, and then delete it after youve completed the lesson if desired. Some lessons build on preceding lessons. In those cases, a starting project file is provided for you for the second lesson or project. You do not have to save any finished project if you dont want to or if you have limited hard-drive space.

Copying the sample projects


You will create and publish HTML files and related JavaScript files in the lessons in this book. The files in the End folders (01End, 02End, and so on) within the lesson folders are samples of completed projects for each lesson. Use these files for reference if you want to compare your work in progress with the project files used to generate the sample movies. The end project files vary in size, so you can either copy them all now if you have ample storage space or copy just the end project file for each lesson as needed. Then you can delete it when you finish that lesson.

How to use the lessons


Each lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Some lessons build on projects created in preceding lessons; most stand alone. All the lessons build on each other in terms of concepts and skills, so the best way to learn from this book is to proceed through the lessons in sequential order. In this book, some techniques and processes are explained and described in detail only the first few times you performthem.

Introduction

The organization of the lessons is also project-oriented rather than feature- oriented. That means, for example, that youll work with symbols on real-world design projects over several lessons rather than in just one chapter.

##Note: Many aspects


of the Edge Animate application can be controlled by multiple techniques, such as a menu command, a button, dragging, and a keyboard shortcut. Only one or two of the methods are described in any given procedure so that you can learn different ways of working, even when thetask is one youve done before.

Additional resources
Adobe Edge Animate Classroom in a Book is not meant to replace documentation that comes with the program or to be a comprehensive reference for every feature. Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features and tutorials, please refer to these resources: Adobe Community Help: Community Help brings together active Adobe product users, Adobe product team members, authors, and experts to give you the most useful, relevant, and up-to-date information about Adobe products. To access Community Help: To invoke Help, press F1 or choose Help > Edge Animate Help. Adobe content is updated based on community feedback and contributions. You can add comments to both content or forumsincluding links to web content, publish your own content using Community Publishing, or contribute Cookbook Recipes. Find out how to contribute at www.adobe.com/community/publishing/ download.html. See http://community.adobe.com/help/profile/faq.html for answers to frequently asked questions about Community Help. Adobe Edge Animate Help and Support: http://helpx.adobe.com/edge-animate/ topics.html, where you can find and browse Help and Support content on adobe.com. Adobe Forums: http://forums.adobe.com lets you tap into peer-to-peer discussions, questions, and answers on Adobe products. Adobe TV: http://tv.adobe.com is an online video resource for expert instruction and inspiration about Adobe products, including a How To channel to get you started with your product. Adobe Design Center: http://www.adobe.com/designcenter offers thoughtful articles on design and design issues, a gallery showcasing the work of top-notch designers, tutorials, and more. Adobe Developer Connection: http://www.adobe.com/devnet is your source for technical articles, code samples, and how-to videos that cover Adobe developer products and technologies. Resources for educators: http://www.adobe.com/education includes three free curriculums that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Associate exams.

Adobe Edge Animate Classroom in a Book

Also check out these useful links: Adobe Marketplace & Exchange: https://www.adobeexchange.com/ is a central resource for finding tools, services, extensions, code samples, and more to supplement and extend your Adobe products. Adobe Edge Animate product home page: http://html.adobe.com/edge/animate/. Adobe Labs: http://labs.adobe.com gives you access to early builds of cutting-edge technology, as well as forums where you can interact with both the Adobe development teams building that technology and other like-minded members of the community.

Adobe certification
The Adobe training and certification programs are designed to help Adobe customers improve and promote their product-proficiency skills. There are four levels of certification:

Adobe Certified Associate (ACA) Adobe Certified Expert (ACE) Adobe Certified Instructor (ACI) Adobe Authorized Training Center (AATC)
The Adobe Certified Associate (ACA) credential certifies that individuals have the entry-level skills to plan, design, build, and maintain effective communications using different forms of digital media. The Adobe Certified Expert program is a way for expert users to upgrade their credentials. You can use Adobe certification as a catalyst for getting a raise, finding a job, or promoting your expertise. If you are an ACE-level instructor, the Adobe Certified Instructor program takes your skills to the next level and gives you access to a wide range of Adobe resources. Adobe Authorized Training Centers offer instructor-led courses and training on Adobe products, employing only Adobe Certified Instructors. A directory of AATCs is available at http://partners.adobe.com. For information on the Adobe Certified programs, visit http://www.adobe.com/ support/certification/main.html.

Introduction

This page intentionally left blank

Adding Basic Interactivity


Lesson overview
In this lesson, youll learn how to do the following:

Understand interactivity Work with the syntax of JavaScript Recognize the relationship between JavaScript, jQuery, and the
Edge Animate API

Differentiate triggers, events, and actions Add triggers to the Timeline Insert labels Create actions to respond to events Control the behavior of the Timeline playhead View and edit script with the Code panel Use comments to annotate code Hide and show elements to incorporate visual feedback
forbuttons

Control animated elements Customize the mouse cursor


This lesson will take approximately two hours to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson05 folder onto it.

156

Let your viewers explore your composition and become active participants. Use Adobe Edge Animates built-in code snippets and intuitive panels to add actions to create engaging, userdriven, interactive experiences.

157

Getting started
To begin, view the travel guide that youll create as you learn to make interactive projects in Adobe Edge Animate. 1 Double-click the 05End.html file in the Lesson05/05End folder to play the composition in a browser.

The project is an interactive photo gallery showing images from Myanmar. Viewers can watch the short slideshow automatically play and loop back to the beginning. Or, viewers can click any thumbnail image on the left side of the Stage to go directly to a particular image. Move your mouse over the triangular button at the top to see a caption unravel. In this lesson, youll create interactive buttons with rollover highlights and learn to incorporate the proper code that tells Edge Animate where to move the playhead on the Timeline to display the particular animation or image there. 2 Close the 05End.html file and quit your browser.

158

Lesson 5 Adding Basic Interactivity

3 Double-click the 05Start Edge Animate file in the Lesson05/05Start folder to open the initial project file in Edge Animate.

The file includes all the assets already placed on the Stage and the transitions between each image on the Timeline. The Stage has already been sized properly. In this lesson, youll make this linear animation interactive. 4 Choose File > Save As. Name the file 05_workingcopy and save it in the 05Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Adobe Edge Animate Classroom in a Book

159

About interactive compositions


Interactive compositions change based on the viewers actions. For example, when the viewer clicks a button, a different graphic with more information could appear. Interactivity can be simple, such as the click of a button, or it can be more complex, involving different kinds of interactions with the same elementfor example, moving your mouse cursor over a button, clicking the button, and moving your mouse cursor off the button are three unique events that could each result in different visual changes on the Stage. In Edge Animate, you use JavaScript to achieve interactivity. JavaScript is a popular and standard script for Web browsers. JavaScript runs on browsers for desktops as well as on devices such as tablets and mobile phones. If you have no idea what JavaScript is, or how to write codedont panic! Adobe Edge Animate provides an easy interface to add JavaScript to your compositions and integrate common interactive functions. When you get more comfortable with the syntax of the script, you can begin to delve deeper and customize the interactivity. In this lesson, youll learn to create nonlinear navigation, meaning the animation doesnt have to play straight from the beginning to the end, and stop there. Youll add code that gets triggered when the playhead reaches a certain point in time. Youll also add code that moves the playhead to different parts of the Timeline to display particular elements. Youll also learn to make elements on the Stage respond to different interactions with the mouse cursor.

Understanding JavaScript
JavaScript is the scripting language that adds additional functionality to a Web page. Many of the common interface elements on websites, such as pull-down menus, check boxes, or search boxes, are created with JavaScript. Edge Animate also uses JavaScript to power its interactivity, as well as the animations and othereffects.

Where the JavaScript lives


Even without adding any interactivity to your composition, your project depends on JavaScript. The JavaScript code is contained in several separate text documents that have the file extension .js. Look at the files associated with your Edge Animate composition, 05_workingcopy. There are four JavaScript files within the folder called edge_includes:

160

Lesson 5 Adding Basic Interactivity

edge.1.0.0.min.js jquery-1.7.1.min.js jquery.easing.1.3.js json2_min.js


These files contain the basic code required for any Edge Animate composition. There are also additional JavaScript files, which are unique to your project. Those files are located outside the edge_includes folder, and are automatically named with your Edge Animate filename. Your files are named as follows:

05_workingcopy_edge.js 05_workingcopy_edgeActions.js 05_workingcopy_edgePreload.js


When your Web browser first launches your Edge Animate project, it loads the JavaScript code so all the functionality is available when your project plays. All the code is organized as functions, which group commands together. Since each function has a unique name, you can trigger the commands simply by referencing the name of the function. Programmers say that a function is called, or that the browser calls a function.

jQuery and the Edge Animate API


While JavaScript is useful, its meant to control all the details of a Web page, which is powerful but often clumsy and complicated. Thats where jQuery and the Edge Animate API come in handy. jQuery is an open-source JavaScript library that provides an easy way to select, control, and animate elements in a browser. jQuery is not another language, but simply a set of well-written JavaScript functions. If you look again at the JavaScript files in the edge_includes folder, youll see that two of those files are, in fact, files for jQuery. Along with jQuery, Edge Animate provides additional functions it has built for you. The library of JavaScript functions that Edge Animate has built for your use constitute the Edge Animate API (Application Programming Interface). You can think of JavaScript, jQuery, and the Edge Animate API as different layers of control. The Edge Animate API is the top, most superficial layer of control, jQuery is the middle, and the core JavaScript is the deepest layer. A useful analogy is the control of an automobile. The Edge Animate API would represent the controls you see in the drivers seatthe steering wheel, the parking brake, or the gas pedal. They allow you to drive the car without needing to know much about its inner workings. Theyre created from a combination of levers, dials, and shafts to make

Adobe Edge Animate Classroom in a Book

161

controlling your vehicle simple and easy. Those levers, dials, and shafts represent the jQuery level of control. At the most granular level, you have JavaScript, represented by the individual nuts and bolts and gears. Just as it is so much easier to drive a car using the steering wheel and gas pedal, so it is to control your Edge Animate composition with the Edge Animate API. But in both cases, theres no reason why you couldnt tinker with the deeper-level controls for a more customized experience. You can start coding in jQuery and JavaScript to make your own interactivity. You just need to be sure youre a competent mechanic, or know your way around JavaScript! In this lesson, youll first learn to add interactivity with the Edge Animate API. Later, as you gain more confidence and comfort, youll delve a little deeper and insert some jQuery for more sophisticated effects.

Triggers, events, and actions


Edge Animate uses actions, triggers, and events to incorporate JavaScript in your composition. Actions are the things that Edge Animate can do, which, given the full JavaScript language at its disposal, is quite a lot. Actions can range from loading a hyperlink, to changing a particular visual property of an element on the Stage, to storing a piece of information in a variable for later retrieval. Triggers are actions that are placed along the Timeline. When the playhead reaches the trigger, the actions are executed. Use triggers when you want code to be synchronized by your animation, and not by user control. Events are things that happen in a composition that Edge Animate can respond to with an action. Typically, events are user-generated, such as the click of a mouse button, the pressing down of a key, or the tilting of a mobile device. However, events can also happen automatically. For example, the point when the composition is ready (when all the assets and code libraries have been downloaded) is an event. Events are always paired with actions. When an event happens, an action or set of actionsis executed.

Timeline triggers
Triggers are the simplest way to add code to your Edge Animate composition. Triggers are executed automatically when the playhead reaches them on the Timeline. You can have multiple triggers along the Timeline. The minimum time interval between triggers is 1/1000th of a second, but practically, youd never need or want actions to be executed so close together.

162

Lesson 5 Adding Basic Interactivity

Creating a loop
For this slideshow of Myanmar, youll insert a trigger at the end of the Timeline to make the playhead automatically return to the beginning, creating a loop. 1 Click the Zoom Timeline to Fit button at the bottom of the Timeline. The entire slideshow animation appears in the available space in the Timelinepanel. 2 Move the playhead to the very end of the slideshow, at 0:10 seconds.

3 In the Timeline panel, click the Insert Trigger button on the top Actions row. You can also choose Timeline > Insert Trigger or press Ctrl+T (Windows) or Command+T (Mac OS).

An icon that appears as a diamond enclosed by curly braces appears on the Timeline at 0:10 seconds. The icon represents a trigger.

Adobe Edge Animate Classroom in a Book

163

A panel appears with a large white text-entry field and a column of code snippet options on the right side. The panel is titled Trigger@10000ms, referring to the triggers position at 10,000 milliseconds, or 10 seconds. 4 View the content of the current script. The current script, //insert code here, is known as a comment. Comments always begin with two backslash characters, and are descriptions of the code. Comments are non-functional, and dont significantly add to the file size of your composition. 5 From the menu of code snippets on the right-hand side of the panel, select the Play from option.

New code appears in the panel after the existing comment. The new code comeswith its own comments that describe its function. The code, sym.play(1000);, moves the playhead to a particular point in time on the Timeline and begins playing.
in between the parentheses of the play( ) command is called the argument. It gives the command additional information to make it more specific. In this case, it tells the command at what millisecond point in time to start playing. Commands can have multiple arguments, which are separated by commas. As you learn more commands, you also learn what arguments they require.

P Note: The number

6 Replace the 1000 within the parentheses in the code with 0.

The number in between the parentheses of the play( ) command represents the time to which the playhead will move. Since you want the playhead to move to the beginning of the Timeline at 0:00 seconds, enter 0 in the parentheses of the play() command. 7 Close the panel and preview your project in a browser by pressing Ctrl+Enter (Windows) or Command+Return (Mac OS). The slideshow plays through and repeats when it reaches the end at 10 seconds.

164

Lesson 5 Adding Basic Interactivity

Editing triggers
Editing the script for your triggers is simple and easy. The panel that appeared when you added the trigger is always available for modifications, additions, or deletions.

To edit a trigger, double-click the trigger icon on the Timeline.


The script panel opens to display the trigger, and you can modify the argument, delete the code, or add new code from the snippet options on the right side of the panel.

To move a trigger, click and drag the trigger icon on the Timeline to a new
position. The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.

To delete a trigger, select the trigger on the Timeline and press the Delete key.
The trigger is removed from the Timeline.

Script panel viewing options


The script panel that opens when you add a trigger has several options to help you make viewing the code easier. The top-right options menu has three choices that control whats displayed.

Show Line Numbers displays sequential numbers next to each line of code so you and other developers who share the script can pinpoint code. Font Size controls the display size (Small, Medium, or Large) of the text in the script. The default option is Small. Include Snippet Comments automatically adds comments to the code that you add from the snippet options on the right side of the panel.

In addition to these display options, you can click the vertical border that divides the white script area with the menu of code snippets to collapse the menu to make more room for your code. Click the divider again to expand the menu.

Adobe Edge Animate Classroom in a Book

165

Minding your syntax


Lets examine the code that you added in the trigger more closely to learn about JavaScript syntax, or the way words and punctuation work together. Syntax is the grammar of a programming language. If youre unfamiliar with program code or scripting, the JavaScript code that Edge Animate inserts may be challenging to decipher. However, once you understand the basic syntax, youll find it easier to follow a script. The code that is in your trigger at 10000 milliseconds appears as follows:
sym.play(0);

The first word in the statement is sym. When the statement is on the main

Timeline, the word sym represents the whole Edge Animate composition. Edge Animate is organized around the concept of symbols, and the root, or base-level symbol, is the Edge Animate Stage. This root symbol contains all the elements and animations in your Edge Animate compositioneverything on the Stage or Timeline. In JavaScript, when we want to do something, you first identify the object that you want to control. In this case, since you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the script is sym. that youve identified (in this case, sym). Objects can be animations, text, or abstract concepts such as the date or particular data. Objects have properties, which describe them, and methods, which are the things that they can do. In your trigger, the method for the sym object is play( ). The dot, or period, separates the object and its method.

The dot operator (.) provides a way to access different commands for the object

As in English, every open parenthesis must have a corresponding close

parenthesis, and the same is true for JavaScript. If you open something, you must close it. All methods have parentheses. You method, play( ), has an open and close parenthesis. provide additional information. The play() method requires a single argument, which tells Edge Animate at what point in time (in milliseconds) to begin playing. Methods can have multiple arguments, which are separated by commas.

Each method can have different arguments in between the parentheses, which

Some arguments require a number, some may need a name, and others may need
the words true or false. Whenever youre entering the name of a file or a URL, use single or double quotation marks. Quotation marks distinguish a String value, which represent a sequence of characters, with other kinds of values. with different parts of the script. To add a comment for a single line, start it

You can add comments to remind you or others of what you are accomplishing

166

Lesson 5 Adding Basic Interactivity

with two slashes ( // ). To type a multiline comment, start it with /* and end it with */. Comments are ignored by JavaScript and wont affect your code at all.

The semicolon at the end of the line tells JavaScript that it has reached the end of
a complete statement and the end of a line of code. A semicolon is like a period in a sentence. Thats a lot of information packed into a single line of code! But getting comfortable with the syntax is your first step in getting out from behind thesteering wheel and looking under the hood of your car.

Events and actions


So far, youve seen how Edge Animate uses triggers to automatically execute JavaScript when the playhead reaches a certain point on the Timeline. You added a trigger at the end of the animation to create a loop. The other two ways with which Edge Animate adds JavaScript is with events and actions. Events are occurrences that happen in Edge Animate that it can detect and respond to. When an event is detected, you provide actions as a response. Its useful to think of interactions in terms of events and actions. When you click on a menu button (event), more options may expand (actions). When you roll over a button (event), a triangular play icon may appear on it (actions). In the next section, youll add thumbnail images to the Stage. When the user clicks on each thumbnail (event), the playhead will move to a new position on the Timeline (actions) to show a particular image from the travel slideshow.

Creating the buttons


A button is a basic visual indicator of what the user can interact with. The user usually clicks a button, but many other types of interactions are possible. For example, rollovers, double-clicks, and rollouts are all possible. Edge Animate also provides events unique to mobile devices, such as touches. Youll start with the simplest, and most common event, which is the single-click.

Adding the thumbnails


Small, cropped versions of the larger Myanmar images are provided for you in the images folder. 1 In the Library panel, expand the images folder within the Assets folder. 2 Drag the file called button1_gray.jpg from the Library panel to the Stage.

Adobe Edge Animate Classroom in a Book

167

A grayscale thumbnail of a fisherman appears on the Stage, Timeline, and Elements panel. 3 Position the thumbnail so that its top-left corner is at the top-left corner of the Stage. The coordinates should be at X=0, Y=0.

4 Drag the file called button2_gray.jpg from the Library panel to the Stage, and position it just below the first thumbnail. You can use the smart guides to help automatically snap the images in place. The coordinates should be at X=0, Y=80.

Two grayscale thumbnails are at the left side of the Stage, one above the other.

168

Lesson 5 Adding Basic Interactivity

5 Drag the remaining three grayscale thumbnails from the Library panel onto the Stage, positioning each successive one below the previous one. There should be a total of five thumbnail images vertically stacked on the left side of the Stage.

Adding the events


Each element on the Stage can have its own events and actions. Insert code for individual elements from the far-left column of the Timeline or Elements panel. TheOpen Actions button is indicated by a set of curly braces. 1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.

The script panel for button1_gray opens.

Adobe Edge Animate Classroom in a Book

169

A menu of options automatically opens, displaying the events that are possible for the button1_gray element.

P Note: As you

add more events to the same element, additional tabs appear at the top of the script panel.

2 Select the first option: click. Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.

P Note: To delete an

event (and any code associated with it), select the particular tab for the event and click the Minus button at the top-left corner of the script panel.

170

Lesson 5 Adding Basic Interactivity

Adding the actions


Each event must have an accompanying action, or a response, to the event. 1 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option.

Edge Animate adds the code to stop the playhead at a particular position on theTimeline.

2 In between the parentheses of the stop() method, replace the 1000 numberwith 0.

Adobe Edge Animate Classroom in a Book

171

The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop. Since this first grayscale thumbnail is of the fisherman, you want the playhead to stopat 0:00 seconds, the point at which we see the full image of the fishermen on theStage. P Note: You can actually use any number between 0 and 1500 for the stop() method for button1_
gray, since the image of the fishermen remains on the Timeline until 1.5 seconds, but its simpler and easier to be consistent to pick the time when the image first appears.

3 Close the script panel. The Open Actions icon for the button1_gray element becomes filled in, indicating that there is currently script attached to that element.

4 Preview your Edge Animate composition in a browser by selecting File > Preview in browser, or pressing Ctrl+Enter (Windows)/Command+Return (MacOS). 5 At any point during the slideshow, click the first grayscale thumbnail. The slideshow stops and shows the image of the fishermen.

Completing the interactivity


Now that youve completed the interactivity for the first button, add the same functionality to the remainder. 1 In the Timeline or the Elements panel, click the Open Actions button for the second thumbnail element, button2_gray.

The script panel for button2_gray opens. 2 Click on the Plus button on the upper-left corner. A menu of options opens, displaying the events that are possible for the button2_gray element.

172

Lesson 5 Adding Basic Interactivity

3 Select the first option: click. Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right. 4 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option. Edge Animate adds the JavaScript code to stop the playhead at a particular position on the Timeline. 5 In between the parentheses of the stop() method, replace the 1000 number with 2000.

The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop. Since the second grayscale thumbnail is of the statues, you want the playhead to stop at 0:02 seconds, thepoint at which we see the full image of the statues on the Stage. 6 Add similar click events to all the other grayscale thumbnail images, with the Stop at option. Be sure to change the arguments for each stop( ) method as follows, so the playhead stops at different times to display a unique larger image on the Stage:

The stop() method for button1_gray should go to 0 milliseconds. The stop() method for button2_gray should go to 2000 milliseconds. The stop() method for button3_gray should go to 4000 milliseconds. The stop() method for button4_gray should go to 6000 milliseconds. The stop() method for button5_gray should go to 8000 milliseconds.

Adobe Edge Animate Classroom in a Book

173

Navigating the Code panel


Your travel slideshow is now interactive, where users can click to see any of the images. But your code appears to be scattered among many different elements. How can you view all the code for your Edge Animate composition together? The answer is in the Code panel, which you can open by choosing Window > Code, or pressing Ctrl+E (Windows) or Command+E (Mac OS).

Viewing your code


The Code panel displays all the code in your Edge Animate compositionboth the code that is automatically generated for every project, and the code that you insert yourself. 1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS). The Code panel opens. The Code panel is similar to the other script panels for triggers, events, and actions.
List of triggers and events Toggle display of code snippets Toggle display of full code

Error display

Code window

174

Lesson 5 Adding Basic Interactivity

2 Click on the Full Code button on the far-right side of the panel to toggle between Full Code mode and non-Full Code mode. In Full Code mode, Edge Animate displays the entire code for the JavaScript file for the Edge Animate composition. Scroll down to see the script for all your thumbnail elements as well as the trigger. The code that this represents is contained in the file 05_workingcopy_edgeActions.js.

In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the left side of the panel. In addition, there is an option to see the code for the Preloader, which is currently disabled because you havent yet added one. In later lessons, youll learn about adding a Preloader.

Adobe Edge Animate Classroom in a Book

175

3 While in non-Full Code mode, click on the Plus button in line with the Stage element. A hierarchical menu appears that allows you to add an event to the Stage itself, an event to any of the elements on the Stage, or an event to the Timeline.

4 If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the list and select Delete Action.

5 In either Full Code or non-Full Code mode, when you make additions and edits to the script, and they are saved in the composition.

176

Lesson 5 Adding Basic Interactivity

Dealing with code errors


Using the provided code snippets makes adding code relatively easy because the script is already formatted correctly. All you have to do is replace key values. However, bugs and typos do invariably creep in, and dealing with code errors is a common struggle for any developer, whether a novice or an expert. Edge Animate immediately alerts you to code errors, which make finding and correcting them easy. When there is a mistake in syntax in any of the code, Edge Animate displays an error message at the bottom-left corner of the Code panel. For example, if you were to accidentally delete the closing parenthesis of the stop( ) method, the error display tells you where the error occurs. In addition, ared dot appears next to the line of code in question.

The error notification is also displayed at the bottom-left corner of the Stage.

Click on the arrow icon after the error description to jump directly to the source of the error in the Code panel so you can fix it. The All or Code options in the error display determines whether all errors are displayed (including warnings of feature incompatibilities with various devices, such as text shadows in IE9), or only code errors are displayed.

Adobe Edge Animate Classroom in a Book

177

Creating labels
When the user clicks each thumbnail, Edge Animate moves the playhead to a new time on the Timeline, according to the argument in the stop( ) method. However, imagine that the client who has commissioned you to develop this slideshow wants the whole sequence to run a little slower. Thats an easy task to do because you can select all of the elements on the Timeline and move all the keyframes and animations forward to lengthen the total amount of time. But doing so causes the times that each image appears on the Stage to change, which would require you to change all the millisecond values in the stop( ) methods. There is an alternate approach that would save you time and effort. Instead of using fixed-millisecond times in the stop( ) methods, you can use labels, which refer to points on the Timeline. Labels can move with your animation, so increasing or decreasing the length of your animation can move the labels proportionately.

Adding labels
Labels appear on the Timeline panel, below the time markers and just above the Actions layer. 1 Move the playhead to 0:00 seconds.

The image of the fishermen appears at 0:00 seconds. 2 Click the Insert Label button, or press Ctrl+L (Windows)/Command+L (MacOS). A label appears on the Timeline, named Label 1.

178

Lesson 5 Adding Basic Interactivity

3 Rename the label fisherman, and press Enter to exit the text editing of the label.

The label called fisherman is now associated with 0:00 seconds. 4 Add four more labels to the Timeline, each marking the starting point at which an image appears on the Stage.

Insert the label statues at 0:02 seconds. Insert the label houses at 0:04 seconds. Insert the label monk at 0:06 seconds. Insert the label women at 0:08 seconds.

Editing labels
There are several ways you can edit labels once youve inserted and named them:

To rename a label, double-click the label name on the Timeline. To move a label, click and drag the label on the Timeline to a new position. To delete a label, select the label on the Timeline so it is highlighted and press
the Delete key.

To cut, copy, or paste a label, right-click on a label and choose your desired

option, or use the standard keyboard commands for cut (Ctrl/Command+X), copy (Ctrl/Command+C), and paste (Ctrl/Command+V).

Adobe Edge Animate Classroom in a Book

179

Changing the references to the Timeline


Now that the Timeline contains labels, you can change the references in the JavaScript code. 1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS). The Code panel opens. 2 If it is not already selected, click the Full Code button to display the panel in FullCode mode. All the code for the thumbnail events and actions are displayed in the single script pane.

P Note: Make sure

that you are using straight quotation marks around your label names. The quotation marks are essential for JavaScript to identify the names as a String (and not a variable). Straight quotes and curly quotes (or smart quotes) are different characters in HTML and JavaScript and they are not interchangeable.

3 Replace all the millisecond times in the stop( ) methods with your labels. Thefollowing lines of code should be changed:

Change sym.stop(0); to sym.stop("fisherman"); Change sym.stop(2000); to sym.stop("statues"); Change sym.stop(4000); to sym.stop("houses"); Change sym.stop(6000); to sym.stop("monk"); Change sym.stop(8000); to sym.stop("women");
4 Preview your Edge Animate composition in a browser by choosing File > Preview in the browser, or pressing Ctrl+Enter (Windows)/ Command+Return (Mac OS).

180

Lesson 5 Adding Basic Interactivity

5 At any point during the slideshow, click the thumbnail images. The slideshow stops and shows the selected image. 6 Return to Edge Animate and select all the elements on the Timeline by choosing Select > All, or by pressing Ctrl+A (Windows)/Command+A (Mac OS). Make sure none of the elements are locked. 7 Click and drag the last keyframe of the last animated element on the Timeline. Drag the keyframe to the left to decrease the total amount of time of the slideshow. As you decrease the length of time for all the animated elements, the labels also move proportionally, preserving their identification of whats displayed on the Stage. Return the total time of the composition to 0:10 seconds.

Adding visual feedback


Most interactive elements on the Web feature visual feedback, which is important to provide clues to the reader that the particular item is interactive. For example, a simple hyperlink on a Web page often will change color when you move your mouse over it. A button will highlight when you move your mouse over it, and may appear depressed when you click on it. You can create these interactions with a combination of events and actions in Edge Animate. Youll add these events and actions to the thumbnails for visual feedbacknext.

Adding the mouseover thumbnails


The first question you should ask is, what visual effect do you want to see when a user moves their mouse over the thumbnail images? For this project, youll make the grayscale thumbnails become colorized and a highlight appear around the borders. The first step is to bring colorized versions of the thumbnails on to the Stage. 1 In the images folder in the Assets folder of the Library panel, youll find color versions of each of the five thumbnail images, indicated by the _color appended to the file name.

Adobe Edge Animate Classroom in a Book

181

2 Drag button1_color.jpg from the Library on to the Stage. 3 Use the Smart Guides to position the button1_color element at the upperleft corner, exactly on top of its grayscale version. Its location should be at X=0, Y=0.

4 Drag all four of the other colorized versions of the thumbnails to the Stage, positioning them exactly on top of their grayscale partners. All the colored thumbnails should be at the top of the Element panel stack.

The grayscale and colorized versions of the thumbnails are exactly the same dimensions.

182

Lesson 5 Adding Basic Interactivity

Hiding the mouseover thumbnails


Since you want to show the colorized version only when the mouse cursor moves over the thumbnail, you must first hide the colorized thumbnails. You can hide the elements by changing their Display property to Off. 1 Move the playhead to 0:00 seconds. 2 Hold down the Shift key and select all the colorized thumbnail elements. 3 In the Properties panel, change the Display property from Always On to Off.

Edge Animate inserts a new keyframe on the Timeline for all the selected elements at 0:00 seconds and the selected elements disappear from the Stage.

Inserting the mouseover event


Each grayscale thumbnail contains a click event. Youll have to edit each of those elements to incorporate a mouseover event. A mouseover event happens when the user moves their mouse cursor over the selected element. When the mouseover event happens, youll show the colorized thumbnails. 1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.

Adobe Edge Animate Classroom in a Book

183

The script panel for button1_gray opens. The current click event and actionsappear.

2 Click on the Plus button on the upper-left corner and choose mouseover.

Edge Animate adds a mouseover tab.

184

Lesson 5 Adding Basic Interactivity

3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Show Element option. Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display.

4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.

The full statement appears as follows:


sym.$("button1_color").show();

The dollar sign and parentheses is jQuery syntax, and it tells the browser what element to select. In this statement, the element called button1_color in the current Edge Animate composition is selected, and the method called show( ) is executed. 5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image. As soon as your mouse cursor moves over the grayscale thumbnail image, the colorized version appears. Since the colorized version is above the grayscale version, we see only the colorized image.

Adobe Edge Animate Classroom in a Book

185

6 Return to Edge Animate and insert the mouseover event with the Show Element action to the remaining four grayscale thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version of the thumbnail.

Inserting the mouseout event


When you preview the Edge Animate project, youll notice that the thumbnails become colorized when you move your mouse over them, but they remain in color even after you move your mouse off them. In order to make the thumbnails revert to their grayscale versions, you need to add one additional event: the mouseoutevent. The mouseout event happens when the cursor moves off an element. Youll add the mouseout event to the colorized thumbnails (not the grayscale thumbnails) and pair the event with a command that hides the colorized versions. The result: The colorized versions disappear, leaving the grayscale version visible again. 1 In the Timeline or the Elements panel, click the Open Actions button for the thumbnail element button1_color. The element is currently hidden on the Stage, but you can still add script to it. The script panel for button1_color opens.

186

Lesson 5 Adding Basic Interactivity

2 In the popup menu that appears, choose mouseout for the event. Edge Animate adds a mouseout tab.

3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Hide Element option.

Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display. 4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.

Adobe Edge Animate Classroom in a Book

187

The full statement appears as follows:


sym.$("button1_color").hide( );

Note the similarities between the actions for this mouseout event and the previous script for the mouseover event. 5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image. As soon as your mouse cursor moves over the grayscale thumbnail image, it becomes colorized. When you move your mouse cursor off the image, the button appears to revert back to grayscale. 6 Return to Edge Animate and insert the mouseout event with the Hide Element action to the remaining four colorized thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version of the thumbnail.

Editing the click event


One final fix is needed before all the events and actions work together. You may have noticed that clicking on the buttons doesnt move the playhead as you intend. The reason it no longer works is because the colorized thumbnails overlap their grayscale counterparts, which block the click events. Your final step is to remove the click event from the grayscale thumbnails and add them to the colorized thumbnails instead. 1 In the Timeline or the Elements panel, click the Open Actions button for each of the grayscale thumbnail elements. 2 Choose the click event tab on the script panel, and click the Minus button.

Edge Animate deletes the click event and all of its actions. 3 In the Timeline or the Elements panel, click the Open Actions button for each of the colorized thumbnail elements.

188

Lesson 5 Adding Basic Interactivity

4 Click on the Plus button on the upper-left corner and choose click for the event. Edge Animate adds a click event tab. 5 Choose the Stop at option, and as you did before, replace the millisecond argument with the corresponding label on the Timeline.

6 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). Your buttons are complete. When you move your mouse over them, they become colorized. When you move your mouse off them, they revert to grayscale, and when you click on them, Edge Animate displays the corresponding image from the slideshow. P Note: Use the Code
panel and choose the Full Code mode to make global edits to your script easier. You can save time and effort if youre careful about selecting and editingcode.

Customizing the mouse cursor


In addition to the visual feedback that you can provide by changing the appearance of the button when the user interacts with it, you can also change the appearance of the cursor itself. Often, the default arrow cursor on a desktop or laptop browser changes to a hand (known as the pointer cursor) when it hovers over an interactive element or hyperlink. You can choose to change the cursor to a pointer, or choose from among dozens of other cursor types.

Using the pointer


The Properties panel controls the cursor appearance and allows you to select acustom icon for each element. 1 In the Timeline panel, temporarily turn the Display property for the five colorized thumbnail elements to On. Turning on the Display property allows you to select them on the Stage.

Adobe Edge Animate Classroom in a Book

189

2 Select all five colorized thumbnail elements, button1_color through button5_color. 3 In the Properties panel, click the Cursor option and choose the pointer icon.

4 Turn the Display property for the five colorized thumbnail elements back to Off. The colorized thumbnail elements are hidden again. 5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). P Note: You can only
change the appearance of the cursor for each element, and not for every event of an element.

The pointer cursor appears whenever you move your mouse over or click on thebuttons.

190

Lesson 5 Adding Basic Interactivity

Controlling animated elements


So far, youve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular elements. You can also add code to control the playback of animated symbols. Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal animation. With JavaScript, you can control the symbol animations to create more sophisticated interactions. For example, you can create a button that controls a dramatic animated unfurling or closing of a map. Or, you can create a button that controls the animated expansion or collapse of a more info box. The map and the more info box would be symbols that behave independently on the main Timeline. For your interactive travel slideshow, youll add a button at the top of the Stage that, when rolled over, elegantly animates to reveal information about the images andMyanmar.

Adding the button and animated symbol


The button and the animated symbol have already been created for you, and are in the Library ready to use. 1 In the Library panel, expand the Symbols section, and drag the moreinfo symbol to the Stage. Position the moreinfo symbol at X=200, Y=0.

The moreinfo symbol appears in the Elements and Timeline panels. The short playback arrowheads on the Timeline show how long the animation within the symbol lasts (1 second long).

Adobe Edge Animate Classroom in a Book

191

2 In the Timeline, click the Playback options for the moreinfo element and chooseStop.

The playback of the internal symbol animation does not play on the main Timeline. 3 Double-click the moreinfo symbol on the Stage and press the spacebar to view the animation within the symbol. The symbol consists of two short animations. The long horizontal gray rectangle expands, and at the same time, the clipping box of some informational text expands to reveal it.

4 Click the Stage button at the top of the Stage to exit your symbol.

192

Lesson 5 Adding Basic Interactivity

5 Drag the triangle.png image from the Library Assets folder to the Stage. Position the triangle element at X=484, Y=3, or use the Smart Guides to center the element over the moreinfo element.

Play a symbol animation


The symbol is currently stopped at 0 seconds. Youll add a mouseover event to the triangle button that tells the symbol to begin playing. 1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element. The script panel for triangle opens.

2 Choose mouseover for the event. Edge Animate adds a mouseover event tab.

Adobe Edge Animate Classroom in a Book

193

3 Choose the Get Symbol option. Edge Animate adds the JavaScript code to select a particular symbol on the Stage. The highlighted portion of the code is the name of the symbol that you want to select.

4 Replace the highlighted code with moreinfo, to match the moreinfo element on the Stage. Make sure that the double straight quotation marks remain around your element name. The full statement appears as follows:
var mySymbolObject = sym.getSymbol("moreinfo");

The first part of this statement, var mySymbolObject, creates a variable for the reference to your symbol, so you can control it.

5 On the next line in the script panel, choose the Play option. Edge Animate adds a statement that plays the sym object, or the main Timeline. However, you want the symbol to play its animation, not the animation on the main Timeline.

194

Lesson 5 Adding Basic Interactivity

6 Replace sym with the variable, mySymbolObject, which refers to your symbol.

The next statement appears as follows:


mySymbolObject.play();

P Note: You can combine the two statements into one line as follows:
sym.getSymbol("moreinfo").play( );

Reset the symbol animation


Now, youll add a mouseout event for the triangle element to move its playhead back to 0 seconds to reset the animation. 1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element. The script panel for moreinfo button opens. 2 Click on the Plus button on the upper-left corner and choose mouseout for the event. Edge Animate adds a mouseout event tab.

3 Choose the Get Symbol option, and replace the highlighted code withmoreinfo.

Adobe Edge Animate Classroom in a Book

195

The full statement appears as follows:


var mySymbolObject = sym.getSymbol("moreinfo");

4 On the next line in the script panel, choose the Stop at option. Edge Animate adds a statement that stops the sym object, or the main Timeline. However, you want the symbol to stop its animation, not the animation on the main Timeline. 5 Replace sym with the variable, mySymbolObject, which refers to your symbol. Replace the 1000 default millisecond argument with 0.

The next statement appears as follows:


mySymbolObject.stop(0);

6 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/ Command+Return (Mac OS). When you roll over the triangular button at the top of the Stage, the moreinfo symbol plays its animation, which reveals the text box and text. When you roll off the button, the text box and text collapse.

196

Lesson 5 Adding Basic Interactivity

Using jQuery Effects


The Edge Animate API offers a nice balance of power, flexibility, and ease of use to incorporate interactivity to your designs and animations. Inserting script by simply clicking a button in the script panel is (mostly) idiot-proof. However, adding a bit of jQuery to your scripts can often make your job easier. As you learned earlier in this lesson, jQuery is a JavaScript library that was written specifically to make it simple to select elements on a Web page and creating animations and transitions. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or a slide-in and slide-out. Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you see fit. Lets examine one particular jQuery method, fadeToggle( ). The method fadeToggle( ) animates an elements transparency to fade up or fade down, depending on its current state. If the element is transparent, it will become opaque. If the element is opaque, it will become transparent.

1 In a new Edge Animate composition, add a small rectangle and an image on the Stage. Name the
rectangle Rectangle, and the image Image.

2 In the Timeline or the Elements panel, click the Open Actions button for the Rectangle element.
(continues on next page)

Adobe Edge Animate Classroom in a Book

197

Using jQuery Effects (continued)


3 Choose click for the event.

4 Add the following statement for the click event:


sym.$("Image").fadeToggle( );

5 Thats all! Preview your composition in a browser.


When you click on the rectangle, Edge Animate uses jQuery to select the image and executes the fadeToggle( ) method. The image fades in and out with alternate clicks. jQuery does all the work of creating two inverted animations without requiring you to manually create any symbols, keyframes, or mechanisms to remember the state of the image. jQuery is powerful and makes a good addition to your designer-developer toolkit. You can view the 05JQuery.an file in the 05End_JQuery folder to see the completed example.

198

Lesson 5 Adding Basic Interactivity

Review questions
1 Whats the difference between actions, triggers, and events, and how are they used to create interactivity in Adobe Edge Animate? 2 Whats the relationship between the Edge Animate API, jQuery, and JavaScript? 3 How do you create a button? 4 Why would you use a label, and where are they located? 5 What does the code sym mean in the Edge Animate API, and how do you use it?

Review answers
1 Actions, triggers, and events are all JavaScript code that you use to create interactivity in Edge Animate. Actions are commands that tell Edge Animate to do something, such as hide or display an element, or load a hyperlink. Triggers are actions that are placed on the Timeline so they are executed at a specific time. Events are things that happen in a composition that Edge Animate can respond to with actions. 2 Edge Animate uses JavaScript to power its animation and interactivity. JavaScript is the standard scripting language for Web browsers. jQuery is a library of well-written JavaScript functions that make it easier to select and animate elements on a Web page. The Edge Animate API provides additional functions (based on JavaScript and jQuery) to control elements in your composition. 3 A button is a visual indicator of what the user can interact with. You can create a button by creating an element on the Stage, then clicking the Open Actions button in the Timeline or Elements panel to add an event. In the event tab that opens, insert actions that you want triggered when the event happens. 4 Labels are located at the top of the Timeline. Labels identify specific points in time so that you can refer to label names, rather than fixed milliseconds, in your JavaScript code. 5 The word sym represents the whole Edge Animate composition, when the statement is on the main Timeline. Edge Animate is organized around the concept of symbols, and the root, or base-level symbol, is the Edge Animate Stage. This root symbol contains all the elements and animations in your Edge Animate composition everything on the Stage or Timeline. In JavaScript, when you want to do something, you first identify the object that you want to control. If you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the script is sym.

Adobe Edge Animate Classroom in a Book

199

Index
Symbols
" (double quotation mark), 166, 180 ' (single quotation mark), 166, 223 * (asterisk) next to filename, 12 using as multiplication operator, 230 ( ) (parentheses), 166 + (addition operator), 230 (subtraction) operator, 230 . (dot) operator, 166 / (division operator), 230 /* */ (multiline comments), 167 ; (semicolon), 167 < (less than operator), 226 == (equivalent operator), 226 > (greater than operator), 226 @font-face rule, 63 \\ (backslash characters), 134, 164, 167 { } (curly braces), 225 starting, 1011 undoing steps in, 38 using JavaScript in, 160161, 199 workspace for, 13 Adobe Edge Animate Classroom in a Book copying lesson files for, 34 prerequisite skills for, 23 Adobe InDesign CS6, 246 aligning elements with Smart Guides, 18 grouped elements with Distribute, 7172 alpha channel, 46 Alt/Option key, 61 .an files, 11 anchor <a> tag, 223, 239 animated banner ad. See banner ad animation. See also assets; designing animation; nested animation; symbols about, 83 adding to symbols, 128132 adjusting timing of, 3738, 94 animating leaf rotation, 78 changing element height and width, 99 copying, 109 copying, pasting, and editing symbol instances, 137139 defined, 28 easing motion in, 112114, 119 fade-in and fade-out effects, 102105 lengthening or shortening, 3637, 9293, 117118, 132135 looping, 132135 nested, 124128 pasting, 110111 reversing, 105 shadow, 149150 swapping assets in, 107 uses for clipping in, 147, 155 .ansym files, 144, 151 appending Google maps, 207210, 239 YouTube video, 211217, 239 appendTo( ) method appending YouTube video with, 211, 239 linking Google maps with, 207 Applied coordinates, 268, 272 Applied mode, 272 arguments defined, 164 method, 166

A
<a> (anchor) tag, 223, 239 actions about, 199 adding to events, 171172 defined, 162 executing after events, 162, 167 triggers as, 162 using conditional statements to trigger or ignore, 239 Add Keyframe icon, 34 Add Web Font dialog box, 6466, 91 addition (+) operator, 230 Adobe information and resources from, 56, 271 training and certification programs by, 6 Web tools offered by, 2 Adobe Community Help, 5, 271 Adobe Edge Animate creating compositions in, 12 further resources on, 56, 271 Global and Applied modes for, 272 graphics compatible with, 17 installing, 3 jQuerys uses in, 161162, 197198, 199 overview of, 12 previewing Stage size changes in, 263 rendering HTML in, 223 responsive design in, 272

Adobe Edge Animate Classroom in a Book

273

arrow cursor, 189 arrow key navigation checking for which key pressed, 226227 checking value of counters in, 231233 keydown event for, 224225 tracking how many times key is pressed, 228230 assets. See also symbols about, 45 choosing for editing, 143 copying to embedded website, 258259 organizing, 79 swapping, 107 Assets folder, 45 asterisk (*) next to filename, 12 using as multiplication operator, 230 asymmetrical rounded rectangles, 53 @font-face rule, 63 attention focusing origin of image transformations, 99101, 119 heightening anticipation with scale, 9799 showing images abruptly on Stage, 9697, 119 Auto-Keyframe mode disabling, 102 enabled with Auto-Transition mode disabled, 119 Pins enabling of, 86 using, 2931, 39 Auto-Transition mode disabled when Auto-Keyframe mode enabled, 119 disabling, 102 enabling when Pin activated, 86 using, 2931

beginning keyframes creating with single edit, 84, 8688 illustrated, 83 bitmap graphics, 4347 importing, 4345, 4647 modifying opacity of, 46 border of graphic, 5556 Border Radii diagram, 53 Bounce ease, 114, 152154 bounding box appearing around selected element,49 constraining horizontal and vertical dimensions of, 98 origin of transformation in, 7677 Bring to Front option, 25 browsers controlling Stage display in, 247 Down-level stage in older, 248249,272 getting link to Google map from, 207 loading URL in new window, 221,223 previewing animation in, 11, 3233 publishing compositions for, 246247 using window.open( ) method to open specified URL, 220221 web font types supported by, 68 buttons adding mouseover thumbnails for, 181182 creating interactive, 167173, 199 hiding mouseover thumbnails for,183 home page, 220221 hyperlinks for home, 220221 linking events to, 169170 preparing for embedded media click event, 211, 213 revealing information with, 191193 Timeline playback control, 32

B
background images, 4345, 8486 backslash (\\)characters, 134, 164, 167 banner ad adding moving title to, 8890 adding web fonts for, 9192 animating fade-in effect, 104105 building from bottom up, 84 changing timing of, 94 easing change of scale in, 114115 easing out title, 113114 files for, 8283, 84 hiding Achilles in, 9596 lengthening animation, 93 shortening animation, 9293 showing image abruptly, 9697, 119 swapping assets in animation, 107108 using fade-out effects, 102103

C
Capture a Poster Image dialog box, 250, 252 Cascading Style Sheets. See CSS char codes, 226227, 239 circles, 129130 click events editing, 188189 showing YouTube video on Stage,217 clipping, 147149, 155 code errors, 177 code libraries for embedded website, 258259 Code panel dealing with code errors, 177 illustrated, 174 making global edits to scripts in, 189 viewing JavaScript in, 174176

code snippets compositionReady, 207 displaying, 174 Hide Element, 236 Open URL, 239 using, 177 collapsing elements on Timeline, 106107 color adding to text, 23 adjusting Stage, 16 changing graphics, 5556 checking text, 61 styling hyperlink, 223 Color picker, 16, 1718 colored band indicator for changes in scale, 99 gold-colored band, 103 indicating smooth fade-out effect,103 comments adding, 134, 164, 166167 multiline, 166167 comparison operators, 226 compositionReady event, 206207, 239 compositions. See also interactive compositions; publishing compositions creating and saving, 12 creating poster image for, 250252,272 embedding media in, 205 importing into InDesign CS6, 246 importing symbols into, 144 inserting into HTML websites, 255259, 272 interactive, 160 limiting number of fonts in, 67 naming, 16 publishing options for browsers, 246247 concatenating slides and captions, 233236 conditional statements defined, 239 imposing limits in, 231233 making comparisons, 225 syntax of, 225 constraining bounding box dimensions, 98 elements, 50 objects, 30 container for map element, 206 content adding HTML, 221222 using hyperlink tags within content,223 coordinate space picker, 268 copying animation, 109, 111 code libraries and assets to embedded website, 258259 elements with Alt/Option key, 61,111 <iframe> code to clipboard, 209

274

Index

<iframe> code to script panel, 209210 labels, 179 lessons files, 34 symbol instances, 137139 symbols, 144 text, 61 timing, 111 counters, 231233 cover element hiding, 212, 219 showing, 216217 Create Symbol dialog box, 125 crosshair icon, 7677 CSS (Cascading Style Sheets) styling hyperlink color with, 223 working with embedded fonts, 63 curly braces({ }), 225 cursor customizing mouse, 189190 double-headed arrow, 92 having elements respond to mouse,160 cutting labels, 179

D
deleting elements, 24 events, 170 groups, 73 image file from Stage, 45 keyframes and properties, 36 labels, 179 Playback command, 141 symbols from Library panel, 144 triggers, 165 design. See designing animation; responsive design designing animation, 81119 about animation, 83 adding moving title, 8890 adding time to animation, 93 animating fade-in effect, 104105 changing animation timing, 3738,94 copying animation, 109 easing motion, 112114, 119 Edge Animate features for, 12 importing background image, 4345, 8486 lesson files for, 82 modifying element scale, 9799 modifying total length, 115116 pasting animation, 110111 replacing images in animation, 107108 setting pace of animation, 3637, 9293 turning display on/off, 9497 using Pin tool, 8492 web fonts, 9192 zooming in/out of Timeline, 106

disabling Auto-Transition mode, 102, 119 Display property, 9497, 119 drop shadows, 74 ease, 119 Pin, 87 Smart Guides, 18 Timeline Snapping option, 30 Display property, 9497, 119 Distribute command distributing elements, 7172 using, 70 <div> element, 70 division (/) operator, 230 documents. See compositions dot (.) operator, 166 double-headed arrow cursor, 92 double quotation mark ("), 166, 180 Down-level Stage about, 248, 272 capturing poster image for, 250252 creating hyperlinks to elements on,252 using in older browser, 248249 downloading Edge Animate, 3 dragging image file onto Stage, 45 drop shadows animating, 149150 applying, 7374 considering current Clip boundaries for, 150 duplicating. See copying duration of animation, 9293

E
e variable, 227 easing applying to animations, 115 bounce, 114, 152154 change of scale, 114115 defined, 83, 112 disabling, 119 motion, 112114, 119 opacity changes, 115 Easing icon, 114 Edge Animate. See Adobe Edge Animate Edge Animate Symbol file, 144 edge_includes folder, 272 editing animation timing, 117118 click events, 188189 element name, 2021 groups, 73 guides, 58 Playback commands, 141 poster images, 252 symbol instances, 137139 symbols, 126128, 141143 text, 62 triggers, 165 Elastic option, 114 Element panel, 2627, 39

elements, 1725 about, 17 adding, 1718 aligning in graphics, 6970 appearing abruptly on Stage, 9697,119 center of rotation for, 7677 changing cursor appearance for, 190 Clip property of, 147149 collapsing on Timeline, 106107 constraining, 50 converting to symbol, 124126, 155 copying, 61 cropping area visible, 155 deleting, 24 displaying in browser, 27 distributing, 7172 events and actions added to, 169172 fixing current values with Pin, 86 Google map, 205206 grouping, 7071, 73 hiding in animation, 9596 hierarchies of, 70, 73 locking and hiding, 2627, 39 managing overlapping, 2425, 39 modifying scale of, 9799 naming, 21, 39 parent-child relationships for, 25 positioning, 19 removing child, 218219 renaming, 2021, 24 resizing graphic, 4950 rotating, 7576 Shadow property for, 149150 sizing, 1920 tags for forms and text, 18 transformations available for, 79 Elements panel illustrated, 13 managing overlapping elements, 2425, 39 ellipses, 56, 129130 Embed button (YouTube), 215 Embed Code field, 91 embedded compositions inserting runtime code and Stage for, 255258 revising, 259 embedded media removing, 218219 showing YouTube video, 211217,239 uses for, 205 Embedded Open Type (EOT) format, 68 embedding custom fonts, 6368 enabling Auto-Keyframe mode, 2931, 39, 86, 102 Display property, 9497, 119 drop shadows, 74 nested animation, 124 Smart Guides, 18 Timeline Snapping option, 30 End folders, 4

Adobe Edge Animate Classroom in a Book

275

end keyframes creating with beginning keyframes in one edit, 8688 creating with single edit, 84 illustrated, 83 Enter/Return key, 60 EOT (Embedded Open Type) format, 68 equivalent (==) operator, 226 errors notification of code, 177 reviewing syntax for appended Google map, 210 events about, 199 actions for, 171172 adding thumbnails for mouseover, 181182 compositionReady, 206207, 239 defined, 162, 167 deleting, 170 displayed in Code panel, 174 editing click, 188189 handling keyboard, 224225 hiding thumbnails for mouseover,183 keydown, 224225 linking to button, 169170 mouseout, 186188 mouseover, 183186 properties of e variable for, 227 triggering appendTo() method with click, 211 exporting symbols, 144 eye icon, 26

Flash Builder, Edge Animate vs., 2 Flash Professional, Edge Animate vs., 2 folders Assets, 45 created when publishing compositions, 272 edge_includes, 272 End, 4 images, 45, 79, 251, 272 organization of files in image, 84 publish, 272 setting up for lesson files, 4 web subfolder, 272 fonts. See also Web fonts about, 45 adding to Library panel, 6467 applying web, 67, 79 changing size of, 61 embedding custom, 6368 limiting number in composition, 67 listing fallback, 66, 91 refining text after applying, 68 selecting for text, 23 supported by browsers, 68 using Google, 63, 6465 for() loops, 236237 formatting, styling hyperlink color with CSS, 233 forms, HTML element tags for, 18 Full Code mode, 174175, 176

G
getting started, 839 adding motion, 2831 changing animation pacing, 3637, 9293 creating compositions, 12 deleting keyframes and properties, 36 inserting additional keyframes, 3435 learning to use Element and Timeline panels, 2627 naming compositions, 16 previewing motion, 3233 questions and answers for, 39 resizing Stage, 15 starting Edge Animate, 1011 undo mistakes, 38 using In-App Lessons, 10 working with elements, 1725 GIF files, about, 43 Global coordinates, 268, 272 Global mode, 272 gold-colored band, 103 Google Chrome Frame publishing option, 246 Google fonts, 63, 6465 Google maps appending, 207210, 239 creating element for, 205206 displaying on Stage, 206207, 239

F
fades animating fade-in effect, 104105 animating with jQuery method for, 197198 changing opacity for, 102 using fade-out effects, 102103 fallback fonts, listing, 66, 91 files. See also lesson files; PNG files; SVG files .an, 11 .ansym, 144, 151 asterisk next to name of, 12 compatible graphics formats, 43 copying lesson, 34 HTML, 12 importing images by dragging from desktop, 45 JPEG, 43, 79 .js, 12 .OAM, 246 opening Edge Animate by clicking on .an, 11 organization of image, 84 sample project, 4 saved along with source, 12, 244, 272 selecting multiple, 44 sharing symbols between, 144

graphics, 4179 adding labels, 60 aligning elements in, 6970 bitmap, 4347 changing color or border of, 5556 compatible file formats for, 43 compatible with Edge Animate, 17 controlling how much visible, 147149, 155 creating HTML, 5051 distributing elements on Stage, 7073 drop shadows, 7374 duplicating text, 61 editing text, 62 embedding custom fonts, 6368 loading lesson files for, 4243 making ellipses, 56, 129130 modifying opacity, 46, 5556 modifying symbols, 142143 preloader, 254, 255 questions and answers about, 79 rectangles, 5056 resizing elements, 4950 rotating elements of, 7576 rulers and guides for, 5659 setting width of text box, 6263 styling text, 6061 vector, 4759 greater than (>) operator, 226 groups about, 79 creating element, 7071 modifying and editing, 73 selecting before rotating, 75 unable to apply shadows to, 150 guides editing, 58 moving, 57 snapping elements to, 58 using, 56 using Smart, 18, 59

H
height adjusting Stage, 15 animating changes in element, 99 linking width and, 49 help, 5, 271 Hide Element code snippet, 236 hiding elements, 2627, 39, 9596 elements on Timeline, 106107 guides, 58 thumbnails for mouseover events, 183 YouTube video, 218, 219 hierarchies of elements, 70, 73 home page button, 220221 HTML adding HTML content, 221222 adding hyperlink tags within content,223

276

Index

creating rectangle, 5051 naming elements in, 21, 39 publishing compositions so visible in, 247 saving HTML file with source file, 12 straight vs. curly quotation marks in, 180 tags for forms and text elements in, 18 html() method, 239 adding HTML content with, 221222 rendering HTML with, 223 window.open() vs., 221 hyperlinks creating, 239 creating to elements on Down-level Stage, 252 CSS styling for color of, 223 defined, 220 making text into, 223

I
icons Add Keyframe, 34 crosshair, 7677 Easing, 114 eye, 26 Link Width and Height, 49 Open Actions, 172 Pin, 86 stopwatch, 29 <iframe> tag appending Google map with, 207 copying code to script panel, 209210 linking embedded code to script panel with, 207210 images. See also thumbnails capturing poster, 250252 changing opacity of, 46, 5556 dragging from Library panel to Stage,145 focusing origin of transformations, 99101, 119 hiding in animation, 9596 importing, 4345, 4647, 48 location for importing, 45 modifying scale of, 9799 replacing in animation, 107108 resizing with layout presets, 269270 rising from bottom of Stage, 145 scaling SVG, 50 showing abruptly, 9697, 119 storage of imported, 79 images folder, 79, 272 default for Edge Animate importing,45 default location for image assets, 79 published with composition, 272 saving poster image in, 251 <img> tags, 271 Immediate option for preloader, 255

Import dialog box, 44 Import Symbols from File dialog box,151 importing background image, 4345, 8486 compositions into InDesign CS6, 246 symbols, 144, 151 vector graphics, 48 In-App Lessons, 10 indented text, 61 InDesign CS6, 246 inheritance among elements, 70, 73 removing child elements, 218219 Insert Preloader Clip-Art pull-down menu, 254 Insert Time dialog box, 93 installing Edge Animate, 3 instances creating playback commands for symbol, 139, 155 default playback option for symbol, 139, 141 deleting symbol linked to, 144 placing on Stage, 135 shadows applied to, 150 symbols vs., 155 interactive compositions, 158199 about, 160 changing Timeline label references, 180181 colorizing thumbnails on mouseover, 181182 combining events and actions for, 181 creating interactive buttons, 167173, 199 Edge Animates capabilities for, 2 editing click events, 188189 events and actions in, 167 hiding colorized thumbnails, 183 inserting mouseover event to grayscale thumbnail, 183186 lesson files for, 158159 loops in, 163164 mouseout events added to colorized thumbnails, 186188 playing symbol animation with mouseover, 193195 using custom mouse cursor, 189190 interactive music festival guide adding hyperlink to home page, 220221 appending YouTube video, 213215, 239 coding interactive slideshow, 233237 embedding media in, 205 final edits on, 238 including YouTube video on, 211219, 239 lesson files for, 202204 navigating slideshow with arrow keys, 224225, 226238 providing Google map for, 205210

interactivity. See also interactive compositions adding with keydown events, 224225, 239 creating interactive buttons, 167173, 199 Edge Animates features for, 12

J
JavaScript adding hyperlinks with, 220 adding jQuery effects, 197198 changing Timeline label references in, 180181 comparison operators for, 226 creating variables, 228229 for( ) loops, 236237 handling logic with conditionals, 225 incorporating with triggers, events, and actions, 162 making global edits to scripts, 189 modifying variables, 229230 publishing compositions to hosted library in, 246247 relationship with Edge Animate API, 199 saved with source file, 12 straight vs. curly quotation marks in, 180 support for Edge Animate with, 160161 syntax for, 166167 using for interactivity, 160 viewing in Code panel, 174176 JPEG files, 43, 79 jQuery about, 161162 adding to scripts, 197198 appendTo( ) method for, 205, 207 relationship with Edge Animate API, 161162, 197198, 199 .js files, 12

K
key codes, 226227, 239 keydown events adding, 224225, 239 checking which key pressed in, 239 conditional statement added for, 225 key codes for, 226227, 239 keyframes adding, 3435 adjusting animation timing with, 3738 animating between, 83 Auto-Transition mode for, 2931, 86, 102 change pacing with, 3637, 9293

Adobe Edge Animate Classroom in a Book

277

keyframes (continued) creating beginning and end with Pin, 8688 defined, 28 deleting, 36 enabling Auto-Keyframe mode, 2931, 39, 86, 102 illustrated, 83 inserting beginning, 2829, 39 moving to change duration, 9293 rotate, 78 snapping playhead to, 30 turning off Display property, 9497,119 keys. See also arrow key navigation Alt/Option, 61 checking which key pressed, 226227 codes for, 226227, 239 Enter/Return, 60 previewing animation with spacebar,88 Shift, 44, 50 tracking how many times pressed, 228230

L
labels adding, 60, 178179 changing references to, 180181 editing, 179 uses for, 178, 199 layout presets, 269270 layouts default settings for, 271 image resizing using layout presets, 269270 sizing contents using percent-based, 264267 lengthening or shortening animations, 3637, 9293, 117118, 132135 less than (<) operator, 226 lesson files animated banner ad lesson, 8283,84 comparing work with sample project files, 4 copying, 34 graphics, 4243 how to use, 45 interactive music festival guide, 202204 interactive photo gallery, 158159 opening, 11 publishing Urban Gardener composition, 242244 techniques illustrating work in, 5 television series website, 122123 letter spacing, 61 Library panel adding image files to Stage from, 45 adding web font to, 6467 assets, symbols, and fonts on, 45 deleting symbols from, 144

dragging images to Stage from, 145 editing symbols in panel, 141143 illustrated, 13 storing symbols in, 155 Link Width and Height icon, 49 linking events to buttons, 169170 height and width, 49 iframe embedded code to script panel, 207210 <link> tag, 66 locking elements, 2627, 39 guides, 58 logic handling with conditional statements, 225 use by conditional statements and loops, 239 loops lengthening animations with, 132135, 155 logic used in, 239 showing only selected image with, 236237

multiple rounded rectangles, 5455 multiplication (*) operator, 230

N
naming compositions, 16 elements, 21, 39 nested animation changing behavior with playback commands, 139141 converting elements to symbols, 124126 creating, 124128 default playback option for symbol instances in, 139, 141 defined, 124 enabling, 124 looping to lengthen, 132135 playing, 140141 stopping, 139140 too short for main Timeline animation, 131132 using playback commands with, 159 non-Full Code mode, 175176 noncontiguous file selection, 44 nonlinear navigation, 160

M
media. See embedded media methods. See also appendTo( ) method; html() method about, 166 arguments for, 166 changing values with labels, 178179 window.open(), 220221 modifying variables, 229230 motion defined, 28 easing, 112114, 119 inserting keyframes to modify, 3435 position of keyframes and speed of, 3637 previewing, 3233 mouse cursor, 189190 mouseout events inserting, 186188 resetting symbol animation with, 195196 mouseover events adding thumbnails for, 181182 having elements respond to, 160 hiding thumbnails for, 183 inserting, 183186 playing symbol animation with, 193195 movies. See video moving labels, 179 Playback command, 141 triggers, 165 Mucho Gusto Cafe project. See graphics multiline comments, 166167 multiple file selection, 44

O
.OAM files, 246 objects aligning, 6970 relative positioning of, 267268 types of JavaScript, 166 opacity animating change in, 102103 changing graphics, 46, 5556 easing changes in, 115 Open Actions icon, 172 Open Type Font (OTF) format, 68 Open URL code snippet, 239 origin of transformation changing, 99101, 119 rotating elements around common, 130131 setting, 7677 OTF (Open Type Font) format, 68 Overflow property, 247 overlapping elements, 2425, 39

P
panels. See also specific panels working with, 13 parent elements, 218 parentheses ( ), 166 pasting animation, 110111 elements on Stage, 61 labels, 179 symbol instances, 137139 percent-based layouts, 264267

278

Index

photo gallery. See interactive compositions Pin tool, 8492 Auto-Keyframe and Auto-Transition modes enabled with, 86 creating keyframes with, 8688 creating motion with, 84 disabling, 87 reversing changes made with, 105 using with playhead, 119 placeholders creating for YouTube video, 211213 replacing placeholder text, 216 play () command, 134, 164 Playback commands about, 155 changing behavior of nested animation with, 139141 editing, 141 options for, 140 playing nested animations, 140141 stopping nested animations, 139140 playback controls for Timeline panel, 32 playhead adding action to stop, 171172 animating from Pin to, 86 coding length of looping animations,134 illustrated, 28 positioning when adding time, 93 scrubbing, 31 snapping to time markers and keyframes, 30 triggering looping animations, 155 using with Pin tool, 119 playing nested animations, 140141 symbol animation, 193195 PNG files about, 43 dragging to Stage, 145 importing, 4647 transparencies supported by PNG-24, 46 pointer cursor, 189190 Polite option for preloader, 255 Position panel, 49 positioning elements, 19 Global and Applied coordinates for, 268, 272 images with Smart Guides objects responsively, 267268 poster images capturing for Down-level Stage, 250252 creating, 272 revising, 252 saving composition on hard drive before creating, 251 preloaders, 253255 previewing animation with spacebar, 88

custom web fonts, 67 motion in browser, 3233 project in browser, 11 Stage size changes, 263 projects. See also lesson files comparing work with sample project files, 4 viewing final, 11 properties. See also Properties panel changing rotation values on, 76 deleting, 36 Display, 9497, 119 e variable, 227 editing graphic color, opacity, or border, 5556 elements Clip, 147149 modifying opacity of bitmap graphics, 46 modifying Origin X/Y values, 119 Stage, 14, 1516 turning on/off Display, 9597 using Overflow, 247 Properties panel adding keyframe from, 29, 39 applying drop shadows, 7374 Display option in, 27 illustrated, 13 positioning and sizing elements from, 1920 text options in, 61 publish folder, 272 Publish Settings dialog box, 246 publishing compositions, 240272 capturing poster image for Downlevel Stage, 250252 copying code libraries and assets to website, 258259 embedding composition in HTML site, 255259 files saved along with source, 12, 244, 272 folders and files created when, 272 lesson files for, 242244 making revisions, 259 options for, 246247 providing preloaders, 253255 revising poster images, 252 for websites, 245

Q
quotation marks double, 166, 180 single, 166, 223 straight vs. curly, 180

skewing, 5354 using Rounded Rectangle tool, 5455 redoing steps, 38 removing child elements, 218219 element from group, 73 guides, 58 time, 93 renaming elements, 2021, 24 grouped elements, 71 labels, 179 rendering HTML, 223 replacing images in animation, 107108 placeholder text, 216 text in text box, 221222 resetting symbol animation, 195196 resizing elements, 1920 graphic elements, 4950 restricting Stage dimensions when, 263264 Stage, 15 responsive design, 260271 about, 260, 272 layout presets for image resizing, 269270 previewing size changes, 263 relative positioning of objects in, 267268 restricting resized Stage dimensions, 263264 sizing contents using percent-based layouts, 264267 viewing example of, 260261 reversing animations, 105 revising poster images, 252 rotation adding to symbol, 126127 animating, 78 elements around common centerpoint, 130131 flipping symbol instance to change direction of, 136 rotating elements, 7576 selecting center of, 7677 rounded rectangles, 5152 rulers displaying, 263 using, 56, 57

S
saving compositions, 12 custom panel arrangements, 13 poster image, 251 scale adding ease-out to change of, 114115 adjusting angle of symbol with, 129130

R
Rectangle tool, 17 rectangles, 5056 asymmetrical rounded corners of, 53 creating in HTML, 5051 rounding corners of, 5152

Adobe Edge Animate Classroom in a Book

279

scale (continued) changing element, 9799 indicator for smooth animation for change, 101 making Stage scalable, 261262 script panel copying <iframe> code to, 209210 hiding video and cover elements from, 219 linking iframe embedded code to, 207210 selecting button elements from, 213214 slideshow counter concatenation in, 233, 236 viewing options for, 165 scripts adding comments in, 134, 164 adding jQuery effects in, 197198 making global edits to, 189 sym in, 166, 199 viewing code for, 165 scrubbing, 31 selecting all property lanes of elements, 109 center of rotation, 7677 element group, 71 multiple and noncontiguous files,44 text fonts, 23 semicolon (;), 167 Send to Back option, 25 Shadow property, 149150 shadows. See drop shadows Share button (YouTube), 214 Shift key constraining elements with, 50 selecting multiple files using, 44 shortening animations, 3637, 9293 single quotation mark ('), 166, 223 skewing rectangles, 5354 slideshow. See also interactive compositions concatenating slides and captions for, 233236 navigating with arrow keys, 224225, 226233 Smart Guides disabling, 18 positioning image on Stage with, 85 using, 59 snapping elements to guides, 58 playhead to keyframes, 30 spacebar, 88 stacking order of Down-level Stage, 249 Stage animating symbols on, 128132 attaching events to, 206207, 239 copying, pasting, and duplicating elements on, 61 deleting image file from, 45 dragging images from Library panel to, 145

entering Symbol editing mode for,126 exiting Symbol editing mode, 127128 having element appear abruptly on, 9697, 119 illustrated, 9, 13 images moving from bottom of, 145 making scalable, 261262 offering Down-level, 248249, 272 Overflow option controlling display on, 247 percent-based layouts for, 264267 placing multiple instances on, 135 poster images for, 250252, 272 relative positioning of objects on, 267268 removing YouTube video from, 218 responding to mouse cursor, 160 revising poster images, 252 setting properties for, 14, 1516 zooming in/out of, 14 starting. See also enabling Edge Animate, 1011 stopping. See also disabling nested animations, 139140 playhead at designated time, 171172 stopwatch icon, 29, 39 String names in JavaScript, 180 styling hyperlink color, 223 text, 6061 subtraction () operator, 230 SVG files about, 43 browsers supporting SVG fonts, 68 importing, 48 JPEG vs., 79 scaling images, 50 swapping, assets, 107 sym, 166, 199 symbol animation adding, 191193 playing, 193195 resetting, 195196 symbol instances. See instances symbols about, 17, 45, 124 animating, 128132 changing rotation direction of, 136 controlling animation in JavaScript,191 converting elements to, 124126,155 creating looping animations inside,155 deleting and duplicating, 144 editing in Library panel, 141143 editing mode for, 126, 127128 editing on Stage, 126128 enabling nested animation with, 124

importing, 144, 151 instances vs., 155 placing animations inside, 126127 Playback options for, 126, 139, 155 playing animation for, 193194 sharing between Edge Animate files,144 Stage as root symbol, 199 working with instances of, 135136 synchrony of symbol instances, 135 syntax coding JavaScript trigger, 166167 conditional statement, 225 reviewing errors in appended Google map, 210 system requirements for Edge Animate,3

T
tags <a>, 223, 239 <iframe>, 207210 <img>, 271 <link>, 66 television series website adding angle to roll of tape, 129130 adding characters to Stage, 145149 animating roll of tape across Stage, 128144 creating nested animation for, 124128 lesson files for, 122123 revising animation for, 154 rotating roll of tape, 126127 title banner for, 147148 text adding hyperlink tags within replaced, 223 adding moving title, 8890 animating, 2831 applying web fonts to, 67 color of, 61 creating, 2224 duplicating, 61 editing, 62 element tags for, 18 hyperlinking, 223 label, 60 moving in opposite direction from image, 8890 replacing content using html( ) method, 221 replacing placeholder, 216 setting width of text box, 6263 styling, 6061 thumbnails adding colorized button, 181182 hiding colorized, 183 inserting mouseover event to grayscale, 183186 mouseout events for colorized, 186188

280

Index

time. See also timing lengthening or shortening animation, 3637, 9293, 117118, 132135 removing, 93 time markers, 30 Timeline adding labels to, 178179 adding trigger to symbols, 133135,155 animating elements from Pin to playhead, 8688 changing label references in JavaScript, 180181 collapsing and hiding elements on, 106107 easing motion in, 112114, 119 inserting keyframes on, 3435 keyframes on, 83 locking and hiding elements on, 2627, 39 opening actions for YouTube button element, 213214 playback controls for, 32 snapping behavior for, 30 stopping playhead at designated time on, 171172 symbols using separate, 124 using triggers on, 162 zooming in/out of, 106 Timeline panel about, 26 illustrated, 9, 13 timing adjusting with keyframes, 3738 editing selected portions of animation, 117118 modifying total length, 115116 titles adding moving, 8890 easing in and out, 112114 Tools panel, 13 training and certification programs, 6 Transform tool, 5152, 79 transformations applying to all or single elements of group, 71 changing origin of scale, 99101,119 effects available on elements, 79 flipping instance to change rotation direction, 136 setting origin of rotations in, 7677 transitions inverting changes made with Pin tool, 105 pasting, 111 smooth, 83

transparencies, 46 triggers actions and events vs., 199 adding code to composition with, 162164 adding to symbol timeline, 133135,155 click events triggering appendTo( ) method, 211 coding syntax for, 166167 defined, 132133, 162 displayed in Code panel, 174 editing, removing, and deleting, 165 triggering looping animations, 155 TTF (True Type Font) format, 68 turning on/off. See enabling; disabling

W
warning messages, 144 web fonts adding to animation, 9192 adding to Library panel, 6467 applying, 67, 79 refining text after applying, 68 types supported by browsers, 68 using Google, 63, 6465 web subfolder, 272 websites. See also responsive design; television series website adding links to other, 220221 adding runtime code and Stage for embedded, 255258 embedding on your own site, 207 inserting compositions into existing,272 publishing compositions for, 245 width adjusting Stage, 15 animating changes in element, 99 linking height and, 49 window.open( ) method, 220221 wipes, 147, 155 word spacing, 51 workspace. See also Stage; Timeline; and specific panels illustrated, 13 saving custom panel arrangements,13 Stage, 14

U
Undo command, 38 ungrouping elements, 73 unsaved changes, 12 Urban Gardener project. See publishing compositions URLs (Uniform Resource Locator) adding link to home page, 220 opening in new browser window,223 using single quotes in href attribute,223

V
variable scope, 230 variables creating, 228229 creating dynamic references based on, 239 e, 227 imposing limits in conditional statements, 231233 limiting number of loops with, 237 modifying, 229230 using, 228 vector graphics, 4748 video appending YouTube, 213216, 239 removing YouTube, 218 unhiding video and cover, 216217 viewing on Stage, 14 visibility Display property and element, 9497, 119 displaying elements vs. managing Stage, 27

X
X/Y values, 19

Y
YouTube video, 211219 appending, 213216, 239 removing, 218 unhiding video and cover, 216217

Z
zooming in/out adjusting rotation center point with,77 of Stage, 14 of Timeline, 106

Adobe Edge Animate Classroom in a Book

281

Unlimited online access to all Peachpit, Adobe Press, Apple Training and New Riders videos and books, as well as content from other leading publishers including: OReilly Media, Focal Press, Sams, Que, Total Training, John Wiley & Sons, Course Technology PTR, Class on Demand, VTC and more.

No time commitment or contract required! Sign up for one month or a year. All for $19.99 a month

Sign up today

peachpit.com /creativeedge