Introduction: 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 some 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 our guide overview 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
- Download the free trial version of Animator and install it.
- 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.
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 rectangles, rounded rectangels, text, images, video and iframe embeds, 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 rectangles to a project
- Click the Rectangle icon in the Tools Panel.
- 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
- Double-click the text
New Rectangleand type in any name you want to rename the rectangle.
- Select the Rectangle icon again and position the cursor over a different spot in the Stage.
- Click and drag to both create and size a rectangle. Name the second rectangle, too.
Exercise: Add an image to a project
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.
In the Properties Panel, under General Properties, click the box with the ellipsis
[…]to the right of the Image field. Make sure you are selcting the base state of the object (The selection color should be purple), if not double click the object on the Stage to select its base state.
- 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 Imagein the Object Tree and rename the image.
Exercise: Add an image to a project by drag and drop
- Drag an image file from your filesystem and drop it on the Stage in Animator.
- Adjust position and name the image as needed in Animator.
Timeline and Object Tree
Use the Timeline to set keyframes within a scene's timelines — 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. Notice that the selection color is blue when a keyframe is selected.
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 top 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 upper 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 on the stage. 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
- In the Timeline select any object by clicking its name.
- Double-click anywhere along the Timeline twice at two different points. Two blue diamonds appear, representing the beginning and ending keyframes for a transition.
- 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.
- Set another keyframe and its Time property.
- 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.
Understanding different selection modes is critical to working well with Animator. There are two main selection modes:
- Base state (purple) - This edits the base of the object, e.g. a state that is persistent across all keyframes.
- Keyframe state (blue)
- With keyframe selected - This edits the object at a certain point in time. Properties set on a keyframe will typically override or be added on top of properties defined in the base state.
- With object selected - This shows you the object at a point in time, but not on top of a keyframe. If recording mode is on, editing the object will create a keyframe at that time. This can also be called "the potential keyframe state".
Selections can be toggled between the different types by utilizing the navigation in the top right of the Properties panel when an object or keyframe is selectede.
For more info check Object Selection States.
Menu Bar (not shown)
Use the Animator menu bar to open, save, preview, and export projects. It also contains high-level control over project elements, including duplicating scenes and timelines; duplicating, removing, and positioning objects within a project; deleting keyframes and setting keyframe time.
Exercise: Save a project
- In the Menu bar, select Edit, then Save Project.
- Give the project a name and save it to a location that will be easy to remember.
Use clock to step through animations or to set precise time.
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.
Control the position, size, rotation, 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
- Select the pointer in the Tools Panel.
- Select the image in the Stage and hit Command/Control-C on the keyboard to copy the image.
- Hit Command/Control-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.
- Drag the new image to a new location and rename it in the Timeline.
Exercise: Zoom the Project
- Click the "+" sign once to zoom in the Stage. Click it a few more times.
- Click the "-" sign until the Stage returns to its default 100% zoom level.
Add, duplicate, delete, and reorder scenes and timelines, and navigate between them using the Scenes Panel. New scenes are added by clicking the "New Scene" button in the lower center of the Scenes Panel. Scenes and timelines are duplicated using commands from the Menu Bar. Delete scenes and timelines by clicking the "×" next to them. Reorder scenes and timelines by dragging them forward or backward in the panel. Navigate by clicking the scene or timelines in the Scene Panel. The contents of the scene and timeline will appear in the Stage so you can edit it.
Exercise: Add a scene and rename it
- Click the "New Scene" button in the lower center corner of the Scenes Panel.
- Rename it by double-clicking the text
Scene 2that appears below the new scene in the panel and typing in a new name.
Exercise: Add a timeline and rename it
- Click the "New Timeline" button in the lower center of a Scene.
- Rename it by double-clicking the text
Timeline 2that appears below the new scene in the panel and typing in a new name.
Exercise: Duplicate a scene and rename it
Scene 1in the Scene Panel.
- Click Duplicate Scene in the Edit menu.
- Rename the scene by double-clicking the text
Scene 2that appears below the new scene in the panel and typing a new name.
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. For complete instructions on how to use the Properties Panel, use Properties Index as a reference; they are too extensive to introduce here.
Exercise: Expose the different parts of the Properties Panel
- In the example project created during this tour, select any scene. The Scene controls will be visible.
- Select an object to see the Object Properties in the Properties Panel, then a keyframe to see Keyframe Properties.
- 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.
In the Project Panel you can set project properties.
In the Export Panel you can set export properties.
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.