Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours

By Samir Dash

A quick 4 hours guide for designers and beginners to learn using Adobe Edge Preview 3 to develop web animations.
The book covers the following topics:

What is Adobe Edge?
What to Expect from this Book
Getting Ready : Download and Setup Adobe Edge on your System
Hour 1: Quick Tour of the Adobe Edge IDE
Default Layout : Welcome to Adobe Edge!
“Get Started..” Panel
Stage
Toolbars
Elements panel
Timeline panel
Properties panel
Menu bar
Editor
Hour 2: Drawing and Animating Shapes
Creating your First Animation
Changing Color through Animation
Shape Morphing Animation
Animating Background Color of the Stage
Example: Creating a Flip Book animation
Hour 3: Editing Webpages Not Created With Edge
Animate Existing Webpage
Adding Animation to HTML Forms
Feedback Form Animation – Example of Animation to HTML Forms Elements
Hour 4: Adding Basic Actions to Your Animation through Triggers
Where to Add Triggers in the Edge IDE ?
Different Type of Triggers
“Earth” – An Example for Basic Playback Control
Going Forward
Next Steps

• Language: English
• Publisher: patternGraphic DigiBooks
• Release date: Dec 15, 2011
• ISBN: 9781465844255

Samir Dash

Samir Dash is a techie and an entrepreneur from Rourkela, Orissa. Samir authored a number of books on critical theory and usability, namely "Beginners Guide To Modern Critical Theory" and "UX Simplified".

Book preview

Quick and Dirty Guide for Designers:

Adobe Edge Preview 3 in 4 Hours

Samir Dash

www.patterngraphic.com

Smashwords Edition

Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours

By Samir Dash

Visit author’s homepage at samirshomepage.wordpress.com

Copyright © Samir Dash, 2011

All rights reserved.

Digital Editions rights owned by patternGraphic, India.

http://patterngraphic.com

First Edition : 2011

Current Samshwords Edition: 2011

Smashwords Edition, License Notes

This ebook is licensed for your personal enjoyment only. This ebook may not be re-sold or given away to other people. If you would like to share this book with another person, please purchase an additional copy for each recipient. If you’re reading this book and did not purchase it, or it was not purchased for your use only, then please return to Smashwords.com or the publisher of this book at patternGraphic.com and purchase your own copy. Thank you for respecting the hard work of this author.

PG2011B3

ISBN: 978-1-4658-4425-5

Table of Contents

Before We Start!

What is Adobe Edge?

What to Expect from this Book

Getting Ready : Download and Setup Adobe Edge on your System

Hour 1: Quick Tour of the Adobe Edge IDE

Default Layout : Welcome to Adobe Edge!

Get Started.. Panel

Stage

Toolbars

Elements panel

Timeline panel

Properties panel

Menu bar

Editor

Hour 2: Drawing and Animating Shapes

Creating your First Animation

Changing Color through Animation

Shape Morphing Animation

Animating Background Color of the Stage

Example: Creating a Flip Book animation

Hour 3: Editing Webpages Not Created With Edge

Animate Existing Webpage

Adding Animation to HTML Forms

Feedback Form Animation – Example of Animation to HTML Forms Elements

Hour 4: Adding Basic Actions to Your Animation through Triggers

Where to Add Triggers in the Edge IDE ?

Different Type of Triggers

Earth – An Example for Basic Playback Control

Going Forward

Next Steps

Source Files for this Book

Before We Start!

What is Adobe Edge?

Everyone is almost sure today that HTML5 along with CSS3 and javaScript is the future of web animation and interactivity. Almost the generic view has been established that this is the ultimate Flash killer technology which will replace all Flash animation and interactive on the web in coming time. Howebver, for many designers and early developers the main road block to use HTML5 with JavaScript and CSS3 lies in the fact that as of today there is no IDE(Integrated Development Environment) or Design and animation tool as good as Adobe Flash Professional that is designer friendly enough to allow designers to create animations in a high level environment with timelines, drawing tools and relatively easy control of animation effects. Most of the HTML5 developers today are working directly with Java Script, SVG, CSS and other technologies and for such reason it is not easy for any designer to immediately start with HTML5 based web animation as it requires for them a long learning curve for different technology which is not typically expected in a designer's domain. To bridge this gap between the developer-designer centric approach to web animation using HTML5 , CSS3 and JavaScript, Adobe is currently working on a new revolutionary tool called "Adobe