Animator 1.3 Sencha Docs

Animator Reference: Menus

Animator menus contain standard application controls. Following are descriptions of specialized Animator menus. Key command equivalents appear next to menu items in the menu bar.

New Project: Create a new project, choosing from following types/dimension sizes (in pixels):

  • Mobile - Leaderboard (320 x 50)
  • Mobile - Small Sqaure (200 x 200
  • Mobile - Square (250 X 250)
  • Mobile - Medium Rectangle (300 x 250)
  • Mobile - Fullscreen – Large (960 x 640)
  • Mobile - Fullscreen – Medium (640 x 480)
  • Mobile - Fullscreen – Small (480 x 280)
  • Custom Size: Size fields default to 0; reset to set custom size.

Support Options:

  • Android 2.x: Disables certain properties that can cause issues on the Android 2.x platform.
  • Firefox browsers: Enables CSS output prefixed with -moz or -webkit prefixes.

New Project from Template: Create a new project choosing from projects previously saved as templates, which are listed in the pull-down menu. Menu includes the following prebuilt templates:

  • Fading Text: Project with <div> elements containing text that fades in and out.
  • Moving Block: Project with <div> square that moves diagonally from top-left corner.
  • Sliding Text: Project with <div> elements containing text that slides horizontally from left side.

Open Project: Open previously saved Animator project.

Open Recent: Lists any recently opened Animator projects.

Save Project: Save project. Animator requires that projects be saved before export.

Save Project As…: Save previously saved project under a new name.

Save Project As Template: Save project for later reuse as template, either by you or another user. Open templates using New Project from Template (see above). In OS X, Animator stores templates in the following locations, depending on operating system:

  • OS X: yourUserFolder/Library/Application Support/Sencha, Inc./Sencha Animator/templates
  • Windows XP: C:\Documents and Settings\<username>\Local Settings\Application Data\Sencha, Inc\Sencha Animator\
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Sencha, Inc\Sencha Animator\
  • Linux: ~/.local/share/data/Sencha, Inc./Sencha Animator/ yourUserFolder/Library/Application Support/Sencha, Inc./Sencha Animator/templates

Go to that location and copy the template if you want to share it.

Preview Current Scene in Browser: Animator exports the current scene and opens it in the system default browser. Must set default browser to a browser supported by Animator.

Preview Project in Browser: Animator exports the current project and opens it in the system default browser. Animator opens default system browser and runs current project once. Must set default to a browser supported by Animator.

Export Project: Exports the project as HTML/CSS/JS.

  1. In the Save dialog name the export folder and click save.
  2. Animator exports index.html and supporting files into the export folder.

Export Current Scene: Exports the current scene as HTML/JS/CSS. Same procedure as for the Export Project option.

Select Scenes to Export: Export a set of scenes as HTML/JS/CSS.

  1. Select the scenes to export.
  2. Click export.
  3. Follow same procedure as for Export Project.

Export to iBooks widget: Exports projects to widget format compatible with iBooks Author for easy embedding into iBooks.

  1. Give widget a name.
  2. Select an image to use as a placeholder for the project. The image should have the same dimensions as the project for best results.
  3. Click export.

Export for Embedding: Exports the project with extra embedding files. In addition to the regular index.html and asset files, the export folder should contain an embed folder containing an embed SDK as well as two pages with embed examples using the current project as well as data.json file to use with inline embedding. See the exported examples for more information on how to properly embed a project.

Copy as CSS: Copies the selected object and it's keyframe (if any) as pure CSS to the clipboard. This can not be pasted back into Animator.

Duplicate Object: Duplicates selected object in the Stage. Copy of object is placed directly over original.

Group/Nest Objects: Creates nested group of selected objects. In Object Tree, selected objects are listed under Nested Group. Rename Nested Group by double-clicking Nested Group in Object Tree and entering new name.

Delete Selected: Delete selected object. When keyframe is selected, menu item becomes "Delete Keyframe."

Align Objects: Align selected objects vertically or horizontally , as follows:

  • Left: Align objects vertically along left-most side of left-most object.
  • Center vertically: Center objects vertically around point central to selected objects. Does not center objects vertically around center of the Stage.
  • Right: Align objects vertically along right-most side of right-most object.
  • Top: Align objects horizontally along top-most side of top-most object.
  • Center horizontally: Center objects horizontally around point central to selected objects. Does not center objects horizontally around center of the Stage.
  • Bottom: Align objects horizontally along bottom-most side of bottom-most object.

Distribute: Distribute selected objects, as follows:

  • Vertically. Distribute selected objects in Stage evenly around center of vertical space defined by the top-most and bottom-most objects. Top-most and bottom-most objects remain in place while objects closer to center are moved.Must select three or more objects.
  • Horizontally. Distribute selected objects in Stage evenly around center of vertical space defined by the left-most and right-most objects. Left-most and right-most objects remain in place while objects closer to center are moved. Must select three or more objects.

Refresh Images: Reload all images for a project (in case images have been edited outside of Animator and not been automatically updated).

Show Properties: Show Properties Panel.

Show Library: Show Library Panel.

Show Project: Show Project Panel.

Toggle Scenes: Toggle between hiding and showing Scene Panel.

Toggle Rulers: Toggle between hiding and showing rulers in the Animator Stage.

Add New: Adds new scene to Scene Panel and selects scene for editing.

Duplicate: Copies selected scene in Scene Panel and selects copy for editing.

Delete: Deletes selected scene from Scene Panel.

Play: Play scene from location of playhead in timeline to end.

Jump to Beginning: Playhead moves to beginning of scene.

Jump to End: Playhead moves to end of scene.

Add Keyframe at Playhead: Adds keyframe, as follows: Select object in Object Tree, move playhead to a location in Timeline, and select Add Keyframe at playhead to set keyframe at that location.

Delete Keyframe: Remove selected keyframe.

Enabled/Disable Snapping: Enables or disables snapping between keyframes that occurs when doing operations with the mouse on keyframes in the timeline.

Enabled/Disable Recording Mode: Enable or disable recording mode. Recording modes enables objects that are selected in keyframe mode (but not on a keyframe) to automatically create a keyframe if they are dragged in the Animator Stage.

Zoom In: Zoom in on Timeline.

Zoom Out: Zoom out on Timeline.

Zoom to Fit: Zoom to fit selected size of Timeline.