Adobe Edge Quickstart Guide电子书

Adobe Edge Quickstart Guide

Table of Contents

Adobe Edge Quickstart Guide

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Introduction to Adobe Edge

Why we need Adobe Edge

Flash Player restrictions

The relationship between Adobe Edge and Adobe Flash Professional

Comparisons with Adobe Flash Professional

Stage

Timeline

Keyframes

Symbols

Library

Actions

HTML technology maturity

Mobile deployment

What Adobe Edge can be used for

Web animation

Interactive content

The history of Adobe Edge

The inner workings of Edge

HTML, CSS, and JavaScript

HTML

CSS

JavaScript

How jQuery is used in Edge

JSON

The Adobe Edge Runtime

Getting started

Installing Adobe Edge

The Adobe Edge welcome screen

Creating a new Edge Project

Save

Save As…

Edge project file structure

Summary

2. The Edge Application Interface

Application interface overview

The application window

Customizing the Edge panel layout

Managing workspaces

The Edge menu system

File

Edit

View

Modify

Timeline

Window

Help

The Edge Toolbar

Selection tool

Transform tool

Rectangle tool

Rounded Rectangle tool

Text tool

Background Color and Border Color

The Stage

The Edge Timeline

Panels in Edge

Elements panel

Library panel

Properties panel

Actions panel

Summary

3. Working with Edge Tools and Managing Assets

Using the drawing tools

The Rectangle tool

Using the Rectangle tool

The Rounded Rectangle tool

Using the Rounded Rectangle tool

The Text tool

Using the Text tool

Using web fonts

The Selection and Transform tools

Using the Selection tool

Properties shared by all element types

ID

Tag

Element Display

Location

Size

Opacity

Transform Origin

Rotate

Skew

Scale

Clip

Properties unique to rectangle elements

Overflow

Background Color

Border Color

Border Thickness

Border Style

Border Radius

Properties unique to text elements

Font Name

Font Size

Font Size Units

Text Color

Bold

Italic

Underline

Align Left

Align Center

Align Right

Properties unique to image elements

Source

Position

Properties unique to symbol elements

Playback Actions

Scrub

Properties available with the Stage

Composition ID

Document Title

Overflow

Autoplay

Background Color

Width

Height

Color tools

Importing external assets

What is SVG?

Importing SVG images

What is a bitmap?

Importing bitmap Images

Working with imported assets

Converting assets into symbols

Create a Symbol

Summary

4. Creating Motion with Edge

Animation within Edge

The Edge Timeline

Playback controls

Time

Search

Timeline options

Timeline controls

The Playhead

The Mark

Zoom controls

Keyframes

Creating motion

Animating with the Playhead

Animating with the Mark

Editing Transition

Duration

Delay

End

Easing

Example: Animating a website header

Project setup, asset import, and general layout

Animating elements

Animating the background

Animating the cover art (do this for each cover art image)

Animating the title text

Summary

5. Adding Interactivity to an Edge Composition

Working with Actions

The Timeline Actions layer

Working with Triggers

Working with Labels

Applying Actions to the Stage

Applying Actions to individual elements

Overview: The Adobe Edge Runtime APIs

Document Object Model events

Mouse events

Touch events

Virtual mouse events

Timeline events

Example: Adding interactivity to a website header

Creating the Text element

Adding interactivity to the Title

Adding interactivity to the album art

Completing the final website header composition

Summary

6. Additional Resources

Using an Edge composition within an existing website

Online resources

About the forthcoming book: Learning Adobe Edge

Learning Adobe Edge

Robust motion and interactivity through web standards

What you will learn

Index