Tumult Hype Documentation Index

1. Overview
Tumult Hype for HTML5 User Interface Key Terms Element Types Arrangement, Distribution, and Sizing Grouping Hiding and Locking Z-Ordering HTML Representation Animation User Interface Keyframes Recording Easing / Animation Timing Functions Background Adding/Removing/Renaming/Duplicating Actions to Change Scenes Transitions Adding Timelines Removing Timelines Changing Timelines Behavior Generated HTML Export Options Embedding in other HTML documents Dropbox iBooks Widget API Functions API Constants Running from outside of Tumult Hype

2. Elements

3. Animations

4. Scenes

5. Timelines

6. Exporting

7. Javascript

8. Keyboard Shortcut Reference

Tumult Hype Documentation Overview

Tumult Hype is the HTML5 creation app for Mac OS X. Animations and interactive content made with Tumult Hype work on desktops, smartphones, and iPads. Wow your web visitors by making beautiful animated content with Tumult Hype!

Tumult Hype for HTML5

Tumult Hype is an HTML5 authoring tool. What is commonly referred to as "HTML5" is really a platform of technologies including the latest HTML tags, CSS styles, and improved JavaScript performance. HTML5's capabilities allow for stunning visual effects and smooth animations, but previously required difcult hand-coding. There were no designer-friendly tools for building animated HTML5 content... until Tumult Hype. Tumult Hype's powerful keyframe-based animations bring your content to life. Tumult Hype outputs state of the art HTML5 which works on all modern browsers and mobile devices like iPhones and iPads. No coding required. This user guide will walk you through the entire product and give in-depth details to its workings.

User Interface
Tumult Hype Document Window

Key Terms
There are only six key terms to learn for using Tumult Hype: Scenes, Elements, Properties, Timelines, Animations, and Keyframes. The remainder of the user guide will reference these terms, and by sticking with them you'll be uent when conversing with other Tumult Hype users. Scenes Each Tumult Hype document is composed of one or more scenes. Scenes are analogous to slides in a PowerPoint presentation or cards in HyperCard. You can setup actions (such as those triggered by buttons) to move between

scenes. Each scene contains a unique set of elements; elements are not shared across scenes. For example, when a scene is duplicated, the scene contains new copies of the elements from the old scene. Each scene also has at least one timeline to run animations. Elements Elements are the manipulatable objects in a scene. They can be text, images, video, boxes, or buttons. Properties Properties are the congurable units of elements, scenes, and documents. Style properties let you specify colors, fonts, borders, placements, and effects. Action properties are for determining what should happen on mouse events, keyboard events, or scene events. Document properties are for setting options affecting the entire document, such as the overall size or supported browsers. Timelines Timelines run animations. Each scene has the "Main Timeline," which is automatically played when the scene is shown. Other timelines for the scene can be added and play when triggered by actions. This capability lets you add interactivity -- mousing over an object could trigger a timeline to play which animates other objects in the scene. Animations Animations are contained on timelines and automatically created between two keyframes. For most style properties, Tumult Hype will smoothly transition from the starting keyframe to the ending keyframe. Animations can have different easing effects, such as ease-in, ease-out, ease-in-out, and linear. Keyframes A keyframe lets you specify a style property for an element at a given time on the timeline. By creating two keyframes at different times, an animation between the two properties will be created.

Hype Documentation Elements

Elements are the manipulatable objects in a scene. They can be text, images, video, boxes, or buttons.

Element Types
Text To add text to a scene, choose the 'Insert > Text' menu or use the "Insert Elements..." toolbar item.. The text will be start by being editable; to edit the text at a later point, simple double click the text to get back into editing mode. As you type, the text eld will automatically expand to t to size. If you manually resize the eld, then it will stay at that size specied. To modify the style, choose the 'Tools > Text Inspector' menu. This will allow you to change the font, size, style, color, shadow, and spacing. To smoothly animate these properties, select the entire element instead of a portion of the text when modifying keyframes.

Text Inspector

For even more styling control, you can directly edit the inner HTML for the text element. First go into edit mode by double clicking on the element, and then press the pencil icon that appears below. You can type any HTML into this eld and see the results live as you type.

Inner HTML Editor

Images Tumult Hype supports importing a wide variety of web image formats, including JPEG, GIF, PNG, and SVG. To import images, choose the 'Insert > Image...' menu or use the "Insert Elements..." toolbar item. You can also drag-and-drop images onto the scene or paste them. By default, new images will be set to preserve their aspect ratio when resizing. This can be disabled from the Metrics Inspector by unchecking "Constrain Proportions." The image can also be set back to its original size if you have changed its dimensions with the "Original Size" button.

Proportion and Sizing Options (Metrics Inspector)

If you need an image to repeat horizontally and/or vertically, you can choose this option from the Element Inspector's Background property.

Background Property (Element Inspector)

Compatibility note: While Internet Explorer 6-8 support the PNG le format, IE 6 will not display transparency in PNGs. IE 7 and 8 will display transparency, but do not re-composite the background, so it is likely the results will not appear as intended. Video Tumult Hype lets you embed HTML5 video. Choose the 'Insert > Video...' menu item, use the "Insert Elements..." toolbar item, or drag and drop video onto the scene. Tumult Hype supports importing mov, ogg, webm, mp4, and ogv extensions, though only mov and mp4 can be displayed from within Tumult Hype. Unfortunately, the current state of HTML5 video is fractured by browser. Safari and IE support .H264 (mp4), while Firefox supports Theora (ogv), and Chrome supports VP8 (webm) as well as Theora (ogv). Luckily, the video tag supports multiple sources for one element. In Tumult Hype, to add the different video sources, select a video element, and then add sources via the Element Inspector's Video property.

Video Sources (Element Inspector)

To convert videos into these formats, we recommend using the Miro Video converter. It is simple and effective. You can download this from: http:// www.mirovideoconverter.com/. There are instructions on how to use it at: http:// diveintohtml5.info/video.html. Box The box element is a basic element, added via the 'Insert > Box' menu or the "Insert Elements..." toolbar item. It can be repurposed to make horizontal or vertical lines, background shapes, and even circles with border rounding. Buttons Buttons are elements which have different appearances on mouse hover and pressed states. You can add a button via the 'Insert > Button' menu or "Insert Elements..." toolbar item. You can also convert any other element to a button via the 'Edit > Show Button Controls' menu item.

Button Items in the Edit Menu

When the element is selected, this will show a segmented control above letting you select the normal, hover, and pressed states. If you do not want the element to be a button anymore, you can choose 'Edit > Clear All Button States' and then 'Edit > Hide Button Controls.'

Button Controls

HTML Widget An HTML widget can be used to display embedded HTML in your scene or an iframe of a different web page. One use for this element is to embed a code snippet that requires its own Javascript. To add a Twitter widget, for example, you would click 'Edit Code Snippet..." and paste your code in the Inner HTML box shown:

An HTML widget containing Twitter Widget Code

To display a webpage within the HTML widget, click the radio button for 'Specied URL' and enter the full URL (make sure to include http://).

Display a Web Page within an HTML widget

Arrangement, Distribution, and Sizing

The Arrange menu has several different ways to arrange, distribute, and resize: Arrange > Distribute > Horizontally Arrange > Distribute > Vertically Arrange > Align > Top Edges Arrange > Align > Bottom Edges Arrange > Align > Right Edges Arrange > Align > Left Edges Arrange > Align > Vertical Centers Arrange > Align > Horizontal Centers Arrange > Size > Make Same Width Arrange > Size > Make Same Height Arrange > Size > Make Same Size Elements can also be arranged, distributed, or resized in the context menu.

Grouping
Elements can be grouped by selecting one or more elements, then clicking 'Group' in the toolbar menu. Grouped items appear indented under their group name in the element list. Elements can also be grouped or ungrouped in the context menu. New groups are named 'Group', but can be renamed by double clicking on the name.

Grouping Toolbar Items

Elements can be dragged in or out of groups.

A Group in the Element List

Hiding and Locking Elements

Locked elements cannot be moved on the scene or selected, and hidden elements are invisible on the scene and not exported. Multiple elements can be locked or hidden at a time by selecting multiple elements, then clicking 'Lock' or 'Hide' in the context menu. Both elements and groups can be locked or hidden. Any adjustment to locking or visibility on a group affects the state of elements within it.

Hidden, Locked, and Unlocked + Visible elements.

Z-Ordering
The stack order of elements can be changed via the Arrange menu (Bring Forward, Bring to Front, Send Backward, Send to Back), toolbar buttons, or by dragging the elements in the element list near the timeline view.

Ordering Toolbar Items

HTML Representation
When output to HTML, elements are generally represented as divs. In some browsers, image elements will be converted to automatically to img tags. Each element is represented with an id, which can be found in the Identity inspector. You can also set alternate text for accessibility purposes.

Tumult Hype Documentation Animations

Tumult Hype uses a powerful keyframe-based animation system to give elements motion and transitions. Tumult Hype's recording functionality makes building animations a snap.

Animation User Interface

Animation User Interface

1.

Animation controls (left-to-right): Jump to Start, Previous Frame, Next Frame, Play/Pause, Loop 2. Current time indicator; matches time cursor 3. Record Button 4. Timeline Selector Popup Menu 5. Time cursor 6. Animatable Property Popup Menu 7. Timing Function Popup Menu 8. Add Keyframe Buttons 9. Time scale zoom slider 10. Timeline View with Animations

Keyframes
Keyframes are a way of specifying a value for a property at a specic point in time. In traditional hand-drawn animation creating frames is split between two groups of people: keyframe artists and inbetweeners. The keyframe artists would draw the most signicant frames, usually where shifts in action would occur. If they were animating a bouncing ball, they might draw two frames: the top of the bounce and when the ball hits the ground. The inbetweener would the do the more tedious work of drawing the intermediate frames to bring the ball to life. You are the keyframe artist when using Tumult Hype. You can specify keyframes for element properties on the timeline. Unlike traditional animation, Tumult Tumult Hype will automatically generate the inbetween frames for you. Adding Keyframes Keyframes operate on specic properties. An animation requires two keyframes - a starting keyframe and an ending keyframe. The inbetween frames are automatically formed and will smoothly transition the property value from the start to the end.

Animation Keyframes

To add the starting keyframe, rst select an element in the scene editor. This will also appear highlighted in the element list on the timeline. In the property list below the element, you can select a specic property that you want to animate. For example, if you wanted an object to fade in, you would select the opacity property. Next, you can move the time cursor to where you want the animation to begin. Press the Add Keyframe button. This will visibly place a keyframe on the timeline. At this point, you'll set the value of the property you want to animate. For the fade in, you would go to the Element Inspector and set the Opacity value to 0%.

To add the ending keyframe, move the time cursor to the point on the timeline you'd like the animation to end at. Click the Add Keyframe button again, this will create a second keyframe on the timeline. Finally, you'll want to set the property to its ending value. To complete the fade in, set the Opacity to 100%. A bar between the keyframes will appear; this indicates the property is animating. Setting Keyframes on Any Property By default, when you click on an element in the element list the only properties that are shown in the properties list are the opacity, origin, and size. These are the most likely properties you'll be manipulating, but Tumult Hype is capable of animating most properties you can set in the inspector. To add keyframes for these, you'll need to add them to the property list for the element. Simply click on the property dropdown, choose which property you'd like to animate. Now this property can be selected for adding keyframes.

Animation Keyframes

If you are recording (see below), this step is unnecessary as the properties will automatically be added for you. Modifying Properties

For manipulating properties with keyframes, there two rules to note: 1. If the time cursor is on a keyframe for a property and that property is manipulated through the inspector, the keyframe value itself will change.

Time Cursor on Keyframe

2. If the time cursor is not directly on a keyframe for a property that has keyframes, and the property is changed, then the keyframes will all be offset.

Time Cursor off Keyframe

This is best illustrated by looking at an example involving the Origin (Left) property. Let's say there are two keyframes to compose an animation: the starting keyframe is at 2s with a property of 10px, and the ending keyframe is at 3s with a property of 20px. In other words, the animation has a duration of one second and will move the object ten pixels to the left. If the time cursor is placed at the 2s mark, then it is directly on the rst keyframe. Setting the element to be at 15px will only manipulate the starting keyframe, so now the animation will only move the object by ve pixels, because the end keyframe is still at 20px. If the time cursor is not placed at the 2s or 3s keyframe marks, say it is at 1s and the element's left origin is now set to 15px, then the keyframes are simply offset. The starting keyframe will begin at 15px, and the ending keyframe will be at 25px, thus the distance of ten pixels is retained.

Manipulating Keyframes Keyframes support most standard manipulations; they can be dragged to move, multiply selected, copied, and pasted. While keyframes are represented by diamonds in the property area, the duration and span of animations are represented by the bars between keyframes. To the right of the elements are animation overview bars, which represent keyframes as white lines. These bars can be resized and dragged to adjust animations.

Animation Overview Bar and Keyframe indicators

Copying and Pasting Animations To duplicate an element and its animations, select the element, click 'Copy' in the Edit menu, then 'Paste with Animations' in the Edit menu. This function is also in the context menu. Keyframes and animations can also be copied directly from the animation area.

Recording
Recording is an intuitive way to automatically generate keyframes for creating animations. Simply hit the record button, move the timeline, and set the properties in the inspector you want to change.

Easing / Animation Timing Functions

By default, animations are set to ease-in-out until a new easing property is selected. Ease-in-out will smooth the beginning and end movements of an animation. To change the easing, select the bar between two keyframes, then select from the easing menu to the right of the timeline area. You can also double-click on the animation bar between two keyframes. Tumult Hype supports the following Easing / Animation timing functions: Instant - The element jumps to the property of the next keyframe Linear - Consistent speed Ease In - Accelerates to a steady speed Ease Out - Decelerates at the end Ease In Ease Out (Default) - Accelerates at the beginning, decelerates at the end Bounce - Movement

Animation Properties Menu and Pop-up

Tumult Hype Documentation Scenes

Scenes are a useful way to separate and organize content. They are similar to slides in a PowerPoint presentation or cards in HyperCard. Each scene contains a unique set of elements; elements are not shared across scenes. When a scene is duplicated, the scene contains new copies of the elements from the old scene.

Background
The background color of a scene can be selected by going to the Scene Inspector's Colors properties. If you want the scene background to be transparent, then go to the Document Inspector's Options category and uncheck "Draw Scene Backgrounds"

Background Color Property (Scene Inspector)

Adding/Removing/Renaming/Duplicating
Every Tumult Hype document starts with one scene. To add more, click on the "Show Scenes" toolbar item, then press the plus button to add a scene. Scenes can be removed by going to the action (gear) menu and choosing Delete Scene. To rename a scene, double-click on the title. Duplicating a scene can also be accomplished from the scene view's action menu or the Scene menu. If you are composing a scene with complicated animations, one useful item is "Duplicate Scene (without animations)" It will take the state of the scene where at the current time, and copy all elements into a new scene but without any animations.

Scene Controls

Scenes can be rearranged by dragging and dropping. The leftmost scene is always shown rst in exported documents.

Actions to Change Scenes

Actions drive scene changes. For example, if you wanted to change a scene on clicking a button, rst select the button. Then, in the Mouse Action Inspector, go to the On Mouse Click property and set it to "Jump to Scene..." From here, you can choose which scene to navigate to and the transition.

Setting a "Jump To Scene..." Action (Mouse Action Inspector)

Scene changes can be setup for any of the other Mouse Actions and also Scene actions. If you have created different scenes to represent states in what will appear to be a coherent animation, then you can setup the scene to change using the Scene Inspector's 'On Animation Complete' action property.

Transitions
Tumult Hype supports a different effects for transitioning between scenes: Instant - The scene changes immediately Crossfade - The scene dissolves into the next scene Swap - The scenes exchange places using a 3D effect Push - The scenes move simultaneously so one is shown and the other is hidden. Note: Crossfade, Swap, and Push transitions are only shown in WebKit-based browsers and Firefox.

Tumult Hype Documentation Timelines

A timeline runs animations. Each scene has at least one timeline, the "Main Timeline" which is run when the scene is rst shown. You can create other timelines which can be invoked via actions or the Javascript API. Because timelines occur within a scene, you can take the same elements and animate them on separate timelines. This behavior can be used to add interactivity.

Adding Timelines
There are three ways to create timelines: Timeline Selector Menu Timelines can be added via the Timeline Selector Menu, which is next to the Timeline Ruler. Simply choose 'New Timeline', give it a name, and hit create. The new timeline will automatically be selected.

Timeline Selector Menu

Animation Timelines in the Scene Inspector Open the Scene Inspector, and press the "+" button in the Animation Timelines section. You can rename timelines by double-clicking on the timeline name.

Animation Timelines Property (Scene Inspector)

Action Properties Timelines can be recreated when setting action properties (ex: On Mouse Click, On Mouse Over, On Key Down, etc.). After choosing to "Play Timeline...," select the "New Timeline..." from the Timeline menu. A sheet will ask for a name, and then the new timeline will automatically be selected.

Add via Action Properties

Removing Timelines
To remove timelines, reveal the Scene Inspector, and go to the Animation Timelines property. Select the timeline you want to remove and hit the "-" (minus) button.

Changing Timelines
To change timelines, open the Timeline Selector Menu (above the element list), and select a different timeline.

Behavior
Relative Keyframes The most important concept to understand with multiple timelines is that of relative keyframes. All animations have two keyframes, a starting keyframe and an ending keyframe. Typically, these contain specic values. For example, a box might be animating its left position from 10px to 20px. A relative keyframe does not dene a specic value; it represents whatever the current value for the element property happens to be at the time. Thus, in our previous example if starting keyframe is a relative keyframe, the left position could be 50px, and it will still end up at the 20px position. Or, the left position could be 20px, and it will not move at all for the duration of the animation.

With multiple timelines, the rst keyframe is always a relative keyframe.

Playing Timelines Because of the relative keyframe behavior, when running timelines, items will never jump to new locations, but animate smoothly. This also means that if a timeline changes the property of an element will not automatically change; the property will stay the same. If you need to move an element back to its original spot, you will need to create two keyframes - one is the relative keyframe, and the other will indicate that it needs to go back to its original position.

If the left/top are in different positions, they will actually animate in this timeline

Tumult Hype Documentation Exporting

Tumult Hype will export documents to HTML5. Exporting is a one-way process, Tumult Hype will not read back any modications made to the exported code.

Generated HTML
To generate HTML, choose the 'File > Export as HTML5 > Folder..." menu. By default, it will create a folder containing two items: 1. a .html document Open this in your browser to see your document in action. If you need to put your content into a different document, see "Embedding in other HTML documents" below. 2. a _Resources folder This folder contains all references images and videos, along with these les: HYPE.js - this le is the main runtime for executing Tumult Hype documents documentName_hype_generated_script.js - this contains the data (scenes, animations, etc.) for your document PIE.htc - this le is an HTML Component for Internet Explorer that extends its abilities to display gradients and rounded borders. See css3pie.com for more info.

Exported Folder Contents

Export Options
At export time, there are several different options you can choose:

Export Options

Also save .html le If this is checked, it will output the HTML le mentioned above. Unchecking this option is useful if you've made modications to the HTML le and do not want it to be overwritten, or if you have a different HTML le you are using instead. Create enclosing folder When this is checked, Tumult Hype will create a top-level folder which will hold the .html le and the _Resources folder. Uncheck this option if you want Tumult Hype to only write these in the specied folder. Show "Built with Hype" Tumult Hype documents will show a small "Built with Hype" watermark in the lower left corner. If you uncheck this, the watermark will not be shown.

Embedding in other HTML documents

A good starting point for embedding is to set the export option to save the HTML le. It HTML le is relatively bare-bones and contains three critical lines which will actually kick off the document:
<!-- copy these lines to your document: --> <div id="documentName_hype_container" style="position:relative;overflow:hidden;width:600px;height: 400px;"> ! <script type="text/javascript" src="documentName_Resources/ documentName_hype_generated_script.js?56206"></script> </div> <!-- end copy -->

These lines can be copied and pasted into other documents ("documentName" in this case would need to be changed). A div, script, and close div tag is all you need. They reference the _Resources folder, which also needs to be placed at the same level as the HTML le.

Dropbox
Dropbox allows you to sync your les online and across your computers automatically. To learn more or sign up for a Dropbox account, visit http:// www.dropbox.com. Tumult Hype will publish to your public Dropbox folder, so you can share your work easily with others. Dropbox must rst be setup in Tumult Hype's preferences. To export to Dropbox, choose the 'File > Export as HTML5 > Dropbox' menu. After uploading, Tumult Hype will let you view the page or copy the URL to share with others.

Exporting to iBooks Author as an HTML5 Widget

To export your Hype animation as an iBooks and Dashboard-compatible widget le, select File > Export > Dashboard/iBooks Author Widget. There are four predened document sizes in the Document Inspector to choose from.

Tumult Hype Documentation Javascript

Tumult Hype offers a JavaScript API to control various aspects of a document. The API methods can be called during user-generated events from within the Tumult Hype document, or by a script external to the Tumult Hype document.

API Functions
hypeDocument.documentName() Returns the name of the document. This value is can be used in the global HYPE.documents[documentName]. hypeDocument.sceneNames() Returns a list of all scenes in the document. Note: scene names are not enforced to be unique as they are specied by in the scene selector interface. If you are going to use the showSceneNamed() function, be sure that no two scenes have the same name! hypeDocument.currentSceneName() Returns the string value for the currently shown scene. hypeDocument.showSceneNamed(sceneName, optionalTransition) Changes to the specied scene. If the optionalTransition is not specied it will default to the instant transition. See below for a list of valid transition constants. hypeDocument.showNextScene(optionalTransition) Shows the next scene, based on the order in the scene selector interface. If the optionalTransition is not specied it will default to the instant transition. See below for a list of valid transition constants. hypeDocument.showPreviousScene(optionalTransition) Shows the previous scene, based on the order in the scene selector interface. If the optionalTransition is not specied it will default to the instant transition. See below for a list of valid transition constants.

hypeDocument.playTimelineNamed(timelineName) Plays the specied timeline for the current scene. Note: timelines are userdened, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in any scene have the same name! hypeDocument.getElementById(id) Searches the current document for the specied id (entered through the Identity inspector's "Unique Element ID") and returns the DOM HTML Element. This is similar to the typical 'document.getElementById', however the API version should be used instead as Tumult Hype may reassign ids in cases of collision.

API Constants
The only constants exposed are those for scene transitions: hypeDocument.kSceneTransitionInstant hypeDocument.kSceneTransitionCrossfade hypeDocument.kSceneTransitionSwap hypeDocument.kSceneTransitionPushLeftToRight hypeDocument.kSceneTransitionPushRightToLeft hypeDocument.kSceneTransitionPushBottomToTop hypeDocument.kSceneTransitionPushTopToBottom

Running from outside of Hype

To access the Tumult Hype API from a javascript outside of the embedded document, you can use the global Hype object:
HYPE.documents[documentName]

The document may not be an exact match for the lename. To gure out the value, you can look inside the exported Resources folder for the *_hype_generated_script.js le and nd the documentName there. You can also call the hypeDocument.documentName() function from within a javascript action to determine it. Note: the HYPE global may not be available immediately upon document load. Make no dependencies to this existing at the time it is called.

General
Action Export document as HTML5 Preview document in default browser Preview current scene in default browser Zoom In Zoom Out Show Javascripts Show Media Browser Show Help menu Show and hide the Inspector Show and hide the Colors window Show and hide the Toolbar Shortcut Command-Shift-E Command-Return Command-Option-Return Command-> Command-< Command-Shift-J Command-Shift-L Command-Shift-Question Mark (?) Click Inspector in the Toolbar or Command-Shift-I Click Colors in the Toolbar or Command-Shift-C Command-Option-T

Working with Elements

Action Move selected element by one pixel Move selected element by 10 pixels Add elements to (or remove them from) previously selected elements Add range to (or remove it from) previously selected range Resize element Resize element from center Constrain aspect ratio when resizing element Constrain aspect ratio when resizing element from center Turn off alignment guides Duplicate selected element Paste with Animations Send element to the back Send element one layer back Shortcut Arrow keys Shift-Arrow keys Shift-click or Command-click Shift-drag or Command-drag Drag handle Option-drag handle Shift-drag handle Option-Shift-drag handle Command-drag Hold down Option and drag Command-Option-V Shift-Command-B Option-Shift-Command-B

Bring element to the front Bring element one layer forward Group Ungroup

Shift-Command-F Option-Shift-Command-F Command-Option-G Command-Option-Shift-G

Working With Scenes

Action Create new scene Select next scene Select previous scene Delete selected scene Shortcut Command-Shift-N Command-Option-Right Arrow Command-Option-Left Arrow Show Scenes, click on desired scene, then press CommandShift-Delete

Editing Animations
Action Toggle recording Play or stop and restart animation Delete selected scene Next frame Previous frame Forward 1 Second Backward 1 Second Jump to Start Jump to End Restart animation Loop playback Shortcut Command-R Space Show Scenes, click on desired scene, then press Command-Shift-Delete Command-Right Arrow Command-Left Arrow Command-Shift-Right Arrow Command-Shift-Left Arrow Command-Option-ShiftRight-Arrow Command-Option-Shift-LeftArrow Home, or Function-Left Arrow Command-L

Using the Inspector

Action Show the Document Inspector Show the Scene Inspector Show the Element Inspector Show the Metrics Inspector Show the Text Inspector Show the Mouse Action Inspector Show the Identity Inspector Shortcut Command-1 Command-2 Command-3 Command-4 Command-5 or Command-T Command-6 Command-7

Additional questions?
If you have any additional questions not covered here, please visit the scenes support forum or ask us a question.