Adobe® Edge Animate CC For Dummies®

Published by
John Wiley & Sons, Inc.
111 River Street
Hoboken, NJ 07030-5774

www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, the Wiley logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. Adobe is a registered trademark of Adobe Systems Incorporated. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.

For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2013933947

ISBN 978-1-118-33592-5 (pbk); ISBN 978-1-118-46204-1 (ebk); ISBN 978-1-118-64411-9 (ebk); ISBN 978-1-118-64415-7 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

About the Author

Michael Rohde (San Francisco, California) has worked as a web development professional and writer for 19 years. His experience ranges from marketing collateral to technical writing to website content. Mr. Rohde wrote a series of freelance articles for HTMLgoodies.com on the topics of CSS3, HTML5, and other trends in website development. This includes a series of articles on working with Joomla! as well as Adobe Edge Animate CC. His skills include Joomla!, SEO, content development, HTML, JavaScript, CSS, CMS, writing, page design, and web development. Michael is the Founder, Publisher, Editor, and Writer for his own site, GoozerNation.com, which won first prize in Amazon’s Domino Project Associates Contest. Mr. Rohde currently lives in the Bay Area of Northern California with his wife and two children and works as the Senior Editor for Freeman, Sullivan & Co.

Dedication

This book is dedicated to my family. Much gratitude goes out to my parents; without them, I probably would have never earned my technical writing stripes. And to my wife and kids who sacrificed evenings and more than one weekend to allow me the time to write, rewrite, take screenshots, retake screenshots, and drone on and on over writing this book, which took a year to complete. To their credit, they encourage me to keep on writing. I love you all.

Author’s Acknowledgments

This book would not have been possible without the encouragement, recommendations, and guidance that I received from many people across several different organizations. It all began with Brad Jones, currently of QuinStreet, who referred me to Wiley when I asked him how to get started writing books. Brad introduced me to Mary Bednarek, who then introduced me to Katie Feltman, who became my Acquisitions Editor. Later, I connected with Pat O’Brien, whose editing skills turned the book into what you see today. I want to thank them all for taking a chance on me as a first-time book author.

I also want to thank the good folks at Adobe, in particular Josh Hatwich, who invited me to join the Customer Advisory Board for Adobe Edge Animate. My participation on the board provided much of the content that I wrote for this book. In addition, I want to acknowledge Corrinna Rainwater of Adobe for providing her technical edits. Her contributions provided the extra details that helped me look like I knew what I was doing.

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments at http://dummies.custhelp.com. For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.

Some of the people who helped bring this book to market include the following:

Acquisitions, Editorial, and Vertical Websites

Project Editor: Pat O’Brien

Senior Copy Editor: Barry Childs-Helton

Technical Editor: Corrinna Rainwater

Editorial Manager: Kevin Kirschner

Editorial Assistant: Annie Sullivan

Sr. Editorial Assistant: Cherie Case

Cover Photo: © iStockphoto.com/Cary Westfall

Composition Services

Project Coordinator: Katie Crocker

Layout and Graphics: Jennifer Creasey, Joyce Haughey

Proofreader: Toni Settle

Indexer: Potomac Indexing, LLC

Publishing and Editorial for Technology Dummies

Richard Swadley, Vice President and Executive Group Publisher

Andy Cummings, Vice President and Publisher

Mary Bednarek, Executive Acquisitions Director

Mary C. Corder, Editorial Director

Publishing for Consumer Dummies

Kathleen Nebenhaus, Vice President and Executive Publisher

Composition Services

Debbie Stailey, Director of Composition Services

Adobe® Edge Animate CC For Dummies®

Visit www.dummies.com/cheatsheet/adobeedgeanimatecc to view this book's cheat sheet.

Table of Contents

Introduction

Foolish Assumptions

How This Book Is Organized

Part I: Getting Started with Edge Animate

Part II: Adopting Tools and Techniques

Part III: Formatting and Animating

Part IV: Putting Your Animation to Use

Part V: Creating Sample Projects

Part VI: The Part of Tens

Icons Used in This Book

Where to Go From Here

Part I: Getting Started with Adobe Edge Animate

Chapter 1: Introducing Adobe Edge Animate CC

Adobe Wants You to Create the Web

Introducing the Edge suite

Your tools are in the cloud

Creating animated web content

Collaborating with other publishing tools

Highlighting the Critical Features

Maintaining Browser Compatibility

A brief history of HTML

Concerns with HTML5 and older browsers

Desktop browser compatibility

What to do for Internet Explorer 8 and older versions

Compatibility with tablet and mobile browsers

Creating an Edge Animate Composition

Gathering your assets

Creating an outlined approach to your animation

Making symbols for frequently used elements

Animators, start your animating

Saving and exporting your animation

Finishing the process

Presenting Your Project Online

Chapter 2: Discovering Awesome Features and Tools

Meeting Your Most-Used Animation Tools

Putting a spotlight on the Stage

Engaging the intuitive, accurate, and flexible Timeline

Drawing with familiar tools

Exploiting Features That Interact and Adapt

Implementing interactivity intelligently

Using Symbols to make reusable objects

Incorporating responsive web design

Counting your multiple publishing options

Putting your best font forward

Working in your language of choice

Digging into the Code

Working in native HTML

Coding easily with the persistent code panel

Pulling in the JavaScript API

Chapter 3: Working with a New Composition

Starting a New Composition

Resizing the Stage

Importing HTML

Working with Templates

Drawing and Editing Elements, Importing Images, and Writing Text

Drawing rectangles

Creating rounded rectangles

Drawing ellipses

Editing the Corners of Elements

Importing images

Writing text

Part II: Adopting Tools and Techniques

Chapter 4: Using the Timeline for the First Time

Controlling the Timeline

Play, Rewind, and Fast Forward

Return to Last Play Position

Toggling the Timeline Modes

Keyframes modes

Auto-Transition mode

Toggling the Pin

Easing tool

The Playhead and the Pin

Working with Keyframes and Animation Sequences

Creating sequences

Animating with Motion Paths

Selecting sequences

Editing sequences

Copying and pasting keyframes and sequences

Finer Details of the Timeline and Stage Controls

Stage controls

Timeline controls

Chapter 5: Working with Triggers, Actions, Labels, and Cursors

Inserting Stage Triggers

Adding triggers to the Stage

Labeling Key Points

Creating labels

Associating labels with actions and triggers

Inserting Element Actions

Adding actions to elements

Using focus as an action

Adding Cursor Attributes

Cursor attribute types

Adding cursor attributes

Chapter 6: Embracing the Workspace

Clicking and Dragging the Panels

Creating a stacked view

Creating a tabbed view

Moving a panel back to its original position

Stacking panels side by side

Manipulating the Panels and Frames

Undocking panels

Undocking frames

Maximizing the frame

Saving a custom workspace view

Reverting to the default view

The Constantly Changing Properties Panel

Specific properties for the Stage

Consistent properties for all elements

Specific properties for specific elements

Part III: Formatting and Animating

Chapter 7: Animating with the Transform Tool and Properties Panel

Transforming with the Transform Tool and Properties Panel

Turning a selected element into a transform selection

Transform elements have their own properties

Understanding the Center Transform Origin

Positioning the center point

Animating with the center point

Creating Animations with the Transform Tool

Animating the border radius

Animating the location of an element

Spinning elements

Animating with the Transform Tool or the Properties Panel

Skewing elements

Scaling elements

Rotating elements

Chapter 8: Formatting Element Visibility, Positioning, and Sizing

Setting the Visibility of Elements

Element Visibility on the Stage

Animating the visibility of elements

Adding scroll bars, hidden, visible, or auto

Visible Overflow property

Scroll Overflow property

Auto Overflow property

Animating with Opacity

Configuring Positioning and Sizing

Setting the relative position

Global or Applied settings

Layout presets

Minimum and maximum sizing

Chapter 9: Animating Background Color, Borders, Corners, Shadows, and Clipping

Applying Color

Using the color graph

Using the color gradients

Choosing a border style

Rounding Corners

One, four, or eight different points

Animating rounded corners

Adding Shadows

Shadow properties

Animating shadows

Using Filters

Unveiling the Clipping Tool

Selecting the area

Adjusting the properties

Chapter 10: Animating and Formatting Text Boxes

Applying Text Properties

Basic text formatting

Using HTML tags

Advanced Text Formatting

Animating Text

Built-in animation properties

Other animation effects

Chapter 11: Using the Elements Panel

Operating in the Elements Panel

Managing Stage actions

Setting visibility

Locking elements

Nesting elements

Coordinating with the Timeline

Copying and pasting

Naming elements

Chapter 12: Using the Library Panel

Positioning Images

Adding images

Deleting and renaming images

Administering Symbols

Creating Symbols

Editing Symbols

Adding features

Exporting and importing Symbols

Managing Fonts

Selecting fonts

Adding Google web fonts

Part IV: Putting Your Animation to Use

Chapter 13: Creating a Project Structure

Understanding the Files Edge Animate Creates

Saving your composition

Image folders

Edge_includes folder

Creating Edge Animate Files for Use with Other Software Tools

Edge Animate package

iBooks folder

Web folder

Chapter 14: Preparing Your Animation for Publication

Guarding Against Internet Explorer 8 and Older

Using the poster

Using the down-level Stage

Using the Preloader

Choosing either the Immediate or Polite option

Choosing the preloader art

Using the Publishing Settings and Publish

Using the web options

Using the Edge Animate Deployment Package

Publishing as iBooks / OSX

Chapter 15: Putting Your Project on the Web

Posting Your Composition as a Standalone Page

Uploading your animation through your own hosted site

Uploading to your hosted site through FTP

Creating a new directory for your composition

Adding Your Project into an Existing Web Page

Putting Your Composition into a Joomla! Site

Part V: Creating Sample Projects

Chapter 16: Creating an Interactive Slideshow Animation

Overall Steps for Creating a Slideshow

Setting Up Images and the Stage

Animating the First Slide

Animating the Second Slide

Adding the Finishing Touches

Adding a loop

Adding Play and Stop buttons

Adding the Cursor attributes

Chapter 17: Synchronizing Elements in an Animation

Drawing Elements onto the Stage

Rotating an Element

Synchronizing More than One Element

Using Easing

Timing Some Text

Chapter 18: Building an Interactive Tutorial

Placing the Navigation Bar

Animating the First Step of the Tutorial

Using clipping for the callout lines

Create segments in the Timeline for each step

Using Stage triggers to stop the tutorial from advancing

Adding the Interactivity

Creating the forward and back arrows

Creating the quick tip

Chapter 19: Animating an Interactive Children’s Book

Overview Planning

Formatting the Text Boxes

Creating a different text box for each element

Using shadow on text appropriately

Creating a Segmented Timeline

Navigating the Story

Placing the next and back navigation

Building the table of contents

Chapter 20: Animating Navigation Menus

Creating a One-Page Website

Creating the top-level menu items

Creating the sub-level menu items

Navigating to new content

Navigating with Mouseovers and Open URL Actions

Placing the artwork and the text

Adding the mouseover text

Adding the mouseover and open URL actions

Adding text links

Chapter 21: Building a Responsive Web Design

Starting at the Stage

Setting the Layouts

Using the layout defaults for responsive design

Using the layout preferences for a responsive web design

Testing Your Animation’s Responsiveness

Part VI: The Part of Tens

Chapter 22: Ten Users of Edge Animate

Animating with Edge Animate

Designing with Edge Animate

Developing with Edge Animate

Learning from Edge Animate Projects

Working with Edge Animate as a Professional

Animating as a Hobby

Selling with Edge Animate

Specializing Your Content

Gaming with Edge Animate

Using the Responsive Web Design Tools

Chapter 23: Ten Online Resources

Adobe Links to the Creative Cloud

Online Font Resources

Referencing the APIs

The W3C

Adobe Fireworks

Browser Usage

FTP Recommendation

Web Hosts

Content Management Systems

Adobe Edge Animate CC For Dummies Online

Chapter 24: Ten Web Design Trends

More Imagery and Illustration

Horizontal Scrolling

Vertical Scrolling

Fixed Headers

Creative Navigation

Storytelling

Navigating within One Page

Moving Away from Flash

HTML5, CSS3, and JavaScript

Responsive Web Design

Cheat Sheet

Introduction

My interest in Edge Animate started when my editor at HTMLgoodies.com sent me an e-mail asking if I was interested in covering a couple of new software titles that Adobe was working on. The first title was Adobe Muse, a website creation tool aimed primarily at designers. The other title was Adobe Edge, which was later renamed as Adobe Edge Animate CC. As a person who prides himself on always wanting to learn new things, I took up my editor’s offer, and I downloaded a free preview of Edge. From there, I wrote several articles for HTMLgoodies on how to use Edge and what it could do. My interest became so deep that I wanted to pursue writing a book on the topic. Now, more than a year later, you’re holding that book in your hands.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!