animator1.md

Sencha Animator Learning Pathway

The following learning pathway will help get you started creating CSS3-based animations using Sencha Animator.

Prerequisites

• (Download) Download Sencha Animator — Sencha

Beginner

• (Blog) Introducing Sencha Animator: The CSS3 Alternative to Flash — Michael Mullany on October 26, 2010
  Today we're thrilled to announce the release of our developer preview of Sencha Animator, a new drag-and-drop tool that helps interactive designers create rich media animations for HTML5-capable devices.

• (Guide) Guided Tour — docs.sencha.com
  Introduce yourself to the main feature groups of Animator with this tour, including hands-on simple exercises.

• (Guide) Animator Quickstart — docs.sencha.com
  Build your first project in Animator and learn basic animation-building techniques.

• (Slides) Sencha Animator — Devshi Pindoria, Arne Bech, Luca Candela on November 2, 2011
  Sencha Animator is the industry's leading CSS3 animation tool. With powerful timeline capabilities, interactive editing, rich previews, and a slick interface, designers have never had it easier to build their mobile animations and applications. Animator’s exclusive use of CSS3 lets your imagination go wild with high performance, hardware-accelerated visuals that will dazzle your customers. Attendees in this session will learn how to use and design top-flight animations and walk away mobile animation experts.

• (Guide) Using Animator: Useful Techniques and Features — docs.sencha.com
  Learn these basic steps to get started fast with Animator.

• (Guide) Upgrade Guide: Moving from Animator 1.2 to Animator 1.3 — docs.sencha.com
  New functionality that changes the way you create animations.

• (Documentation) Sencha Animator 1.3 Documentation — docs.sencha.com

• (Guide) Reference: Introduction — docs.sencha.com
  A roadmap to the Animator Reference.

• (Guide) Properties Panel Overview — docs.sencha.com
  Learn about the Properties Panel, which provides fine-grained control over animation elements.

• (Guide) Scene Properties — docs.sencha.com
  How to set properties for scenes.

• (Guide) Visual Tools: Scenes Panel — docs.sencha.com
  Managing scenes through the Scenes Panel.

• (Guide) Animator Reference: Menus — docs.sencha.com
  Commands available through menus.

• (Guide) Animator Reference: Library and Project Panels — docs.sencha.com
  How to use the Library and Project Panels.

• (Guide) MRAID and ORMMA Support in Animator — docs.sencha.com
  An introduction to MRAID and ORMMA and how Animator supports the specifications.

• (Guide) Animator Keyboard shortcuts — docs.sencha.com
  Overview of in-app shortcuts

• (Guide) Object Selection States — docs.sencha.com
  Understanding selections

• (Guide) Custom JavaScript — docs.sencha.com
  Adding custom JavaScript to actions.

• (Guide) Object Properties: Introduction and General — docs.sencha.com
  Introduction to setting object properties.

• (Guide) Object Properties: Actions — docs.sencha.com
  Setting Actions properties for objects.

• (Guide) Object Properties: Dimensions — docs.sencha.com
  Setting Dimension and Position properties for objects.

• (Guide) Object Properties: Transforms — docs.sencha.com
  Setting Transforms properties for objects.

• (Guide) Object Properties: Background — docs.sencha.com
  Setting Background properties for objects.

• (Guide) Object Properties: Border and Corners — docs.sencha.com
  Setting Border and Corners properties for objects.

• (Guide) Object Properties: Type and Other — docs.sencha.com
  Setting Type and Other properties for objects.

• (Guide) Keyframe Properties: Introduction and General — docs.sencha.com
  Introduction to setting keyframe properties.

• (Guide) Keyframe Properties: Dimensions — docs.sencha.com
  Setting Dimension and Position properties for keyframes.

• (Guide) Keyframe Properties: Transforms — docs.sencha.com
  Setting Transforms properties for keyframes.

• (Guide) Keyframe Properties: Background — docs.sencha.com
  Setting Background properties for keyframes.

• (Guide) Keyframe Properties: Border and Corners — docs.sencha.com
  Setting Border and Corners properties for keyframes.

• (Guide) Keyframe Properties: Type and Other — docs.sencha.com
  Setting Type and Other properties for keyframes.

• (Guide) Visual Tools: Introduction and Tools Panel — docs.sencha.com
  Introducing visual elements of the interface, starting with the Tools Panel.

• (Guide) Visual Tools: Object Tree — docs.sencha.com
  Using the Animator Object Tree, which reflects the DOM structure.

• (Guide) Visual Tools: Timeline — docs.sencha.com
  Using the Animator Timeline, where you set keyframes for objects.

• (Blog) The new Animator timeline: a closer look — Katherine Chu on July 19, 2012
  As we developed Animator, our goal has always been to give designers full control of every animation ability available. If it’s possible to do it in CSS, you should be able to do it in Animator. It made sense that the first few releases were jam packed with new actions, transformations, and transitions, but as the product matured, it was time to re-evaluate what we had built for maximum usability as well as functionality. Let’s take a look at how we updated the Timeline in Sencha Animator 1.3.

• (Video) Animator 1.3 Timeline (0:41) — vimeo.com on June 30, 2012

• (Guide) Visual Tools: Stage — docs.sencha.com
  Using the Stage to manipulate and preview objects.

• (Blog) Rocking the Boat of Flash with CSS3 Animations — Arne Bech on June 20, 2011
  A brief tutorial on how to make an animated scene using CSS3 animations in Sencha Animator. For this demo, we found an Adobe Flash animation from a popular stock photography site, and replicated it perfectly with HTML5/CSS3 Animations using Sencha Animator.

• (Blog) How to Embed Interactive CSS3 Animations in an iBook — Luca Candela on January 19, 2012
  Like everybody else on the US west coast, this morning we woke up in a world where Apple is poised to transform the way we consume textbooks with the ability to easily publish interactive books through iBook Author. The Sencha team quickly found a way to do that using Animator, and so can you following a few easy steps!

• (Video) Animator 1.3 iBook Example (0:46) — vimeo.com on June 30, 2012

• (Video) Sencha Animator in an Apple iBook (0:27) — vimeo.com on January 19, 2012
  Here is a quick video of our Rocking Boat CSS3 animation running in iBook on an iPad. This CSS3 demo shows off basic interactivity by changing the background color. The animation was built with Sencha Animator.

• (Blog) Create a Small Interactive Application with Sencha Animator — Arne Bech on February 29, 2012
  This tutorial shows you how to build a full-screen interactive quiz for iPhone based on open web standards using Sencha Animator. In this tutorial we will cover how to use one of the advanced features of Sencha Animator, adding custom code to a project.

• (Forums) Sencha Animator Forums — www.sencha.com