Animator 1.3 Sencha Docs

Sencha Animator Guided Tour

To make effective use of Sencha Animator, it’s important to learn the major parts of the interface and feature groupings. This guided tour of Animator provides a brief introduction to Animator functionality and suggests exercises to help you learn your way around the tool.

More detail about using each part of Animator is provided in the Animator Reference. Start with Animator Reference: Introduction and TOC and then look for the section of the reference that corresponds to the part of Animator you want to use.

<Exercise: Download and launch Animator

  1. Download the free trial version of Animator and install it. Animator supports Windows, OS X, Linux 32-bit, and Linux 64-bit. You should have a fast processor and at least 1.5 GB RAM and 100 MB of storage memory to make best use of Animator.
  2. Launch Animator to open the main application window, shown just below, and follow along with the tour by following the directions after each Exercise title.

Animator interface

Menu bar

Use the Animator menu bar to open, save, preview, and export projects. It also contains high-level control over project elements, including duplicating scenes; duplicating, removing, and positioning objects within a project; deleting keyframes and setting keyframe time.

Exercise: Save a project

  1. In the Menu bar, select File, then Save Project.
  2. Give the project a name and save it to a location that will be easy to remember.

Timeline and Object Tree

Use the Timeline to set keyframes within scenes — the points in an animation where transformations begin and end. Set a keyframe by selecting the object in the Timeline and double-clicking under the time you want to use for the keyframe.

When a keyframe is set, its effects and attributes, including the precise time for the keyframe, can be defined under Keyframe in the Properties panel. You can return to the keyframe any time to change its properties, and set as many keyframes for an object as you need to create an effective animation.

Use the Object Tree to move an object toward the front or back of a scene and for nesting objects. To move an object to the front or back of a scene, drag it higher in the Object Tree to move it to the front, lower to move it to the back, dropping it on a line in the Object Tree, not on top of another object. To nest objects, drop an object on top of another object; the second object becomes a child of the first parent object and inherits the parent’s properties.

Other controls accessed in or near the Timeline:

  • Use the playhead at the top of the Timeline to step through a scene, dragging it forward to watch the progress of the scene in the Stage.
  • The player controls at the bottom of the Timeline enable viewing of a scene using the arrow button, or pause, fast forward, or rewind the scene.
  • Dragging the slider next to the magnifying glass at the lower right of the Timeline zooms the Timeline in or out, enabling you to set keyframes at very small or large intervals.
  • Clicking the small box underneath the lock next to an object name locks that object so that it cannot be edited. Clicking the box underneath the blind eye icon makes the object disappear from the Stage to make it easier to focus on editing other objects in a project.

Exercise: Set keyframes and edit their Time properties

  1. In the Timeline select any object by clicking its name.
  2. Double-click anywhere along the Timeline twice at two different points. Two blue diamonds appear, representing the beginning and ending keyframes for a transition.
  3. Keyframe properties will be visible in the Properties panel. Notice the time of the keyframe under General in the Time field. Click the Time field, and enter a precise time to the thousandth of a second.
  4. Set another keyframe and its Time property.
  5. Click on the blue diamond for any of the keyframes and note that you can continue to edit its properties.

Exercise: Move an object to the front of a scene

Drag an object from the bottom of the Object Tree and drop it on the solid line above the object at the top of the tree. The name of the object will be at the top of the Object Tree, and that object will now appear at the front of the scene.

Exercise: Nest one object inside another

Drag an object in the Object Tree and drop it on the name of another object. The dragged object’s name will now appear underneath and slightly to the right of the parent object, which will now appear with a disclosure triangle to the left of its name so its child objects can be hidden or viewed.

Tools panel

Select from different types of objects to add to a project using the tool panel or select the pointer to edit elements already in the project. Choose from squares, circles, text, images, and video, then single click an icon to select the kind you want to add. Clicking the Stage adds the object to the project. Clicking and dragging lets you add and size the object. Objects appear in the Stage and are listed in the Object Tree. After adding an object, the Tools panel reverts to the pointer, so you can click an object and edit it.

Note that after adding image and video object types to a project, the specific image or video has to be imported from an external source.

Exercise: Add and size two squares to a project

  1. Click the Square icon in the Tools panel.
  2. Position the cursor anywhere over the Stage and click it once. A square appears where you positioned the cursor, and the element is listed in the Object Tree with the name New Square.
  3. Double-click the text New Square and type in any name you want to rename the square.
  4. Select the Square icon again and position the cursor over a different spot in the Stage.
  5. Click and drag to both create and size a square. Name the second square, too.

Exercise: Add an image to a project

  1. Click the image icon, then position the cursor over the Project panel and click it once. The Stage displays a default mountain image, shown below, until you import the image you want to use. For the purposes of learning, it’s easiest to use a small image, like one used in a social network profile.

    Animator default image

  2. In the Properties panel, under General Properties, click the box with the ellipsis […] to the right of the Image field.

  3. Navigate to an image on your local file system and double-click it. That image will now appear in the box just placed on the Stage. Double-click New Image in the Object Tree and rename the image.

Exercise: Add an image to a project by drag and drop

  1. Drag an image file from your filesystem and drop it on the Stage in Animator.
  2. Adjust position and name the image as needed in Animator.

Clock

Use clock to step through animations or to set precise time for keyframes.

Record button

Turns Recording mode off and on. Default position is on. With Recording mode on, move objects in Stage to create new keyframes and determine positions for animations.

Stage

Control the position, size, color, and other attributes of an object on the Stage. When you position the cursor over Stage, text is displayed at the bottom of the Animator window describing available controls. Select objects to edit their attributes, dragging to reposition and resize them. When an object is selected, its properties can be edited under Object in the Properties panel.

Zoom the Stage by clicking the "-" and "+" signs in the lower right corner of the Stage. Move to a different part of the Stage using the scroll bars at the bottom and left sides of the Stage. Recenter Stage by clicking 100% in between the "-" and "+" signs.

Objects can also be duplicated using the Stage using familiar copy-paste commands. Additionally, horizontal and vertical guidelines can be added to the Stage by dragging from the left and top borders. Eliminate guidelines by dragging them off the Stage.

Exercise: Copy an object

  1. Select the pointer in the Tools panel.
  2. Select the image in the Stage and hit Command-C on the keyboard to copy the image.
  3. Hit Command-V to paste a copy of the image into the Tool panel. You can also copy and object by clicking Duplicate Object in the Edit menu instead of using key commands.
  4. Drag the new image to a new location and rename it in the Timeline.

Exercise: Zoom the Project

  1. Click the "+" sign once to zoom in the Stage. Click it a few more times.
  2. Click the "-" sign until the Stage returns to its default 100% zoom level.

Scenes panel

Add, duplicate, delete, and reorder scenes and navigate between them using the Scenes Ppanel. New scenes are added by clicking the "+" sign in the upper right corner of the Scenes panel. Scenes are duplicated using commands from the Menu Bar. Delete scenes using the delete key on the keyboard. Reorder scenes by dragging them forward or backward in the panel. Navigate to a scene by clicking the scene in the Scene panel. The contents of the scene will appear in the Stage so you can edit it.

Exercise: Add a scene and rename it

  1. Click the "+" sign in the upper right corner of the Scenes panel.
  2. Rename it by double-clicking the text Scene 2 that appears below the new scene in the panel and typing in a new name.

Exercise: Duplicate a scene and rename it

  1. Select Scene 1 in the Scene panel.
  2. Click Duplicate Scene in the Edit menu.
  3. Rename the scene by double-clicking the text Scene 2 that appears below the new scene in the panel and typing a new name.

Keyframe/Base State toggle

Located at top of Properties panel. Click to view Base Object or Keyframe properties in Properties panel. Note that when Base Object properties are visible toggle lets you switch to Keyframe State, and when Keyframe properties are visible toggle lets you switch to Base Object.

Properties panel

Where the vast majority of Animator controls reside, the Properties panel contains three main parts. The Scene controls are used to set properties that apply to an entire scene. The Scene controls become visible when a scene is selected. Object controls sets base properties for an object that persist throughout the animation; select an object to view the Object controls. Keyframe controls are used to set the properties that transform an object during the animation; they become visible when a keyframe is selected.

Setting attributes in the Properties panel determines the appearance and behavior of the initial state of an object and any transformations it goes through during the animation. Detailed information about using the Properties panel appears in the Animator Reference, starting with Properties Panel Overview; they are too extensive to introduce here.

Exercise: Expose the different parts of the Properties panel

  1. In the example project created during this tour, select any scene. The Scene controls will be visible.
  2. Select an object to see the Object Properties in the Properties panel, then a keyframe to see Keyframe Properties.
  3. Prepare to use Animator by scrolling through all the properties you can set in each part of the Properties panel, opening the disclosure triangles to see the level of granular control available.

Additional exercises to introduce Properties panel usage appear in the Sencha Animator QuickStart.

Library panel

Use the Library panel to manager project assets and the library of reusable objects. The Pasteboard objects can be saved and shared between the projects. Images and videos imported to Animator can be saved to the Pasteboard along with any properties you give them.

Project panel

In the Project panel you can set export properties for the project.

What's next

Now that you've had the chance to look at the Animator interface and try out some of its features, you're ready to build something. The Sencha Animator QuickStart shows you how to build a simple, single-scene project so you can learn the basics of using Animator and get started using the tool.

Also, be sure to join the Sencha Animator community, where you can meet Sencha engineers, discuss the ins and outs of creating CSS-based animations with colleagues, and get answers to questions.