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