Quick and Dirty Guide for Developers

A quick 4 hours guide for developers, web designer and those having basic knowledge in HTML, CSS, Java Script and jQuery to learn using Adobe Edge Preview 3 to develop web interactive and web applications.

The book covers the following topics:

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