Foundation Adobe Edge Animate · for HTML5, CSS3, and JavaScript Development by Green, Tom -- Read -- Imperial Library of Trantor

Index

Coverpage Titlepage Copyright Dedication Contents at a Glance Contents About the Authors About the Technical Reviewer(s) About the Cover Image Designer Acknowledgments Foreword Introduction

Book Structure and Flow Layout Conventions

Chapter 1: Learning the Edge Animate Interface

Getting Started

Creating a New Edge Animate Document Managing Your Workspace The Tools Panel The Edge Animate Properties Panel Document Layers and the Elements Panel Importing Content into Edge Animate The Edge Animate Menus Your Turn: Building an Edge Animate Presentation Changing the Order of Layers Putting Elements in Motion Browser Testing Your Project

You Have Learned

Chapter 2: Creating Timeline Animations: Part 1

Auto-Keyframing

Manually Adding Keyframes Adding Extra Keyframes

Adding Transitions to an Element Creating Anticipation Animating with the Pin Clipping Elements in Edge Animate Using Transitions to Swap Images

Animating Multiple Properties

Swapping Assets “Recycling” Edge Animate Transitions Animating with Eases

Your Turn: Animating Web Page Elements with Eases

Curved Paths in Edge Animate

Your Turn: More Anvil Dropping

You Have Learned

Chapter 3: Creating Timeline Animations: Part 2

Shape Tweens Shadows and Gradients

Using Drop Shadow Parameters to Create Gradients

Nesting Elements Symbols in Edge Animate

Editing Symbols Exporting and Importing Symbols Nesting Symbols Your Turn: Animate a PNG Sequence You Have Learned

Chapter 4: Creating Graphics for Edge Animate

Understanding Graphic Formats Choosing the Right Format Adobe Edge Animate and Photoshop

Floating a Balloon Creating a PNG File in Photoshop From Photoshop to Adobe Edge Animate

Creating Graphics in Illustrator

Cruising the Original Banner Ad Removing the Hidden Layers from Our SVG File

From Illustrator to Adobe Edge Animate Fireworks and Adobe Edge Animate

Resizing and Optimizing Images Preparing Fireworks Images for Export to Edge Animate Batch Processing Images for Adobe Edge Animate

Preparing Flash Animations for Use in Edge Animate

Creating a PNG Sequence in Flash Professional CS6

Creating a Sprite Sheet in Flash Professional CS6

Creating Sprite Animations in Edge Animate You Have Learned

Chapter 5: Working with Type in Edge Animate

Fonts and Typefaces

Adding Text Text Shadows Clipping Text

Meet Your New Best Friend: Web Fonts

Adding Typekit Web Fonts to an Edge Animate Project Using Adobe Edge Web Fonts in Animate

You Have Learned

Chapter 6: Adding Interactivity in Edge Animate

Edge Animate and Code The Fundamentals of JavaScript Understanding the Document Object Model

Making Selections Through jQuery The Code Panel The Actions Panel Using Labels and Triggers Using Snippets to Manage Symbol Playback Creating Buttons Making Text Interactive Your Turn: Pulling It Together You Have Learned

Chapter 7: Edge Animate and the Web

Edge Animate’s Web Publishing Options

Choosing a Target Web Publishing Edge Animate Deployment Package iBooks/OS X Publishing Publishing Our Edge Animate Content

The Purpose of the Files Edge Animate Creates

The .an File The HTML File The .edgePreload.js File The .edge.js File The .edgeActions.js File The .edge_includes Folder The Images Folder

Edge Animate Compositions and Dreamweaver CS6

Inserting the Edge Animate Composition into Dreamweaver Inserting Edge Animate Content Using an iFrame

Adding Edge Animate Compositions to Adobe Muse Preparing Content for Older Browsers

Testing a Down-Level Stage

Adding Preloaders to Edge Animate Compositions

Designing Our Own Preloader

Edge Animate and HTML/CSS Overflow

Further Exploration of Overflow

Beyond the DIV Tag

Your Turn: Loading External Content into Edge Animate

You Have Learned

Chapter 8: Adding a Bit of “Wow”

Project 1: Falling Letters

The Fireworks Approach

Project 2: Attracted to Detail

Create the Assets in Illustrator Assembling the Project in Edge Animate

Project 3: Create a Starfield

Creating the Starfield

Project 4: Create a Flash Preloader Project 5: Creating a Pop-Down Menu in Edge Animate You Have Learned

Chapter 9: Edge Animate and Digital Publications

Understanding Print vs. Screen Models and Resolution

CMYK Subtractive Color Model RGB Additive Color Model Resolution

Digital Publication Formats

The EPUB Format The iBooks Format The Folio Format

Edge Animate’s Formats for Digital Publishing

Adding Animate Content with iBooks Author Previewing Our iBooks Author Document

Adding Edge Animate Content with Adobe InDesign

Creating Multistate Objects Wiring Up Our Multistate Objects Placing an Edge Animate OAM File in InDesign Previewing Our Folio with InDesign

Using Folio Builder to Create a Simple Folio

Creating Articles Creating a Folio and Adding Articles

You Have Learned

Chapter 10: Edge Animate Goes Mobile

The Modern Mobile Web Phones, Tablets, and Phablets

Smartphones Tablets Phablets

Creating a Mobile App with Edge Animate and PhoneGap

Logging In and Setting Up PhoneGap Build More Configuration and Customization Downloading and Testing Your PhoneGap App

Using Edge Inspect with Edge Animate

Setting Up Your Edge Inspect Environment Configuring Edge Animate to Preview in Edge Inspect Using Edge Inspect with Edge Animate Swiping Power from Edge Inspect and Edge Animate

Responsive Design with Edge Animate

Adding the Finishing Touches to Our Responsive Design Utilizing Responsive Design for PhoneGap Build

You Have Learned

Index

← Prev
Back
Next →

← Prev
Back
Next →