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

Quick and Dirty Guide for Developers:

Adobe Edge Preview 3 in 4 Hours

Samir Dash

www.patterngraphic.com

Smashwords Edition

Quick and Dirty Guide for Developers: 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.

PG2011B4

ISBN: 978-1-4660-7972-4

Table of Contents

Before We Start!

What is Adobe Edge?

What to Expect from this Book

Hour 1: Overview of Edge Runtime

Edge Composition

Edge Symbol

Edge Action

Events

HTML page DOM specific Events

Edge Elements DOM specific Events

Element level Touch Interaction specific

Triggers

Hour 2: Adding Basic Actions to Your Animation - Playing with Triggers

Where to Add Triggers in the Edge IDE ?

Different Type of Triggers

Earth – An Example for Basic Playback Control

Day and Night – An Example for Changing the content of an Element in Runtime

Where all Triggers are Saved When We Type into the Edge Code Editor?

Reference to different Elements and their properties while writing Triggers

Using Lookup Elements (Lookup Selectors) and jQuery API

Using Some Other Useful Edge Runtime APIs

Progress Bar Example – Using what we have learned about referencing Elements

Hour 3: Edge Touch API and Gestures for iPhones, iPads and Android devices - Thinking Beyond Desktop & Mouse

Touch Events supported on iPhones, iPads and Android devices

Difference Between Touch and Mouse Events

The WebKit Event Object for Touch Events

Note: Setup Environment to Test HTML Pages on Your Devices

Gestures

Adobe Edge and jQuery Mobile Events

Using Touch Events in Edge Compositions

Adding Touch Events to Edge Element’s Action

Adding Touch Events to the DOM Elements Associated with Edge Element

Adding Gesture Events to Compositions in Edge IDE

Making Edge Compositions Compatible for Both Mouse and Touch Events

Example: Cross-platform Slider

Prevent Scrolling

Prevent Default HTML Resize

Hour 4: Complex Interactions between Multiple Compositions and Development and Usage of Reusable Compositions

Wheel: Example of a nested Element Animation

Adding Interaction to Control the Animation of the Nested Element

Benefits of Nested Animation

Reusability Approach of Development in Edge

Example: Building a Reusable Slider Component

Example: Product Selector – How to Use of the Reusable Edge Composition Multiple Times in another Edge Composition with Different Configurations

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 Edge that provides an IDE/tool and a runtime API to add Java Script(jQuery) specific codes to create rich interactive.

The user interface of Adobe Edge is familiar to anyone who's used Flash or After Effects. It has a timeline allowing scrubbing and jumping to any point in an animation, properties panels to adjust different properties of elements, and a panel to