Tag: webkit

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

Ebook By Samir Dash
Published By patternGraphic DigiBooks 

Published: Dec. 16, 2011
Category: Non-Fiction » Computers and Internet » Programming
Category: Non-Fiction » Computers and Internet » Graphics and design
Words: 14341 (approximate)
Language: English

ISBN: 978-1-4660-7972-4

PG2011B4

Here is a discount coupon you can use to get 20% OFF :

Original Price: $4.00

Promotional price: $3.20
Coupon Code: LN68F
Expires: February 15, 2012

Available in following formats: Epub (Apple iPad/iBooks, Nook, Sony Reader, Kobo, and most e-reading apps including Stanza, Aldiko, Adobe Digital Editions, others), PDF, Mobi(kindle), and LRF.

https://www.smashwords.com/books/view/115038?ref=patternGraphic

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

This is a quick guide that will help you feel comfortable using the Adobe Edge Preview 3 in context of designing and animation.

If you are looking for the designing and animation using Adobe Edge instead of programming check “ Quick and Dirty Guide for Designers: Adobe Edge Preview 3 in 4 Hours” …that is available at https://www.smashwords.com/books/view/114683?ref=patternGraphic

 

 

Videos related to the book:

In hour 4 section of this book you will learn how to create reusable compositions which can be used in other Edge composition through configurable parameters. For source files and details check the book

This sample shown in this video is explained in the current book. In the video you can see there are 3 different Edge compositions the first one is a simple background, the second one is a rotating wheel and the third one is the combination of the two to render the final interactive. For source files refer to the book.

Here is an experiment from the current book, showing how a product selector can be built with Flash like user experience using HTML5, jQuery, CSS3 and of course Adobe Edge Preview 3 runtime. For source code refer to the book.