Events

Watch tutorial

Events are one of the basic interactions in Drama. Every Layer or Scene can react to a click, tap, or key press and perform a transition to another Scene. Events can be created using an Event Button in the Workspace or using the Inspector. You can either click the Event Button or drag it to another scene to quickly create transitions. Every event needs a Cause, target Scene, and a transition style.

Inspector for EventInspector for EventEvent ButtonEvent Button

 

Causes

List of Causes for LayerList of Causes for LayerList of Causes for SceneList of Causes for Scene

Every Event requires a Cause – something that will trigger the transition. Typical cause is a mouse click or finger tap, but other types of causes are available:

Click

Triggers a transition when the user clicks with mouse this layer or taps it with a finger.

Double Click

Triggers a transition when the user double-clicks this layer or double-taps it with a finger.

Right Click

Triggers a transition when user invokes a right-click (or a secondary-click) action on computer. This cause is ignored on touch screens.

Mouse Down

Triggers a transition when mouse button is pressed while cursor is over this layer or when a finger is put down on a touch screen.

Mouse Up

Triggers a transition when mouse button is released while cursor is over this layer or when a finger is lifted up from a touch screen.

Mouse Enter

Triggers a transition when cursor moves over this layer. This cause is ignored on touch screens and is not available on Scenes.

Mouse Exit

Triggers a transition when cursor moves out of this layer. This cause is ignored on touch screens and is not available on Scenes.

Key Down

Triggers transition when a specific key (or a combination of keys) on computer keyboard is pressed. This cause is only available on Scenes and it is ignored in the Mirror App.

Automatic

Triggers a transition after a specified time without any user interaction. This cause is only available on Scenes.

 

Magic Drag

A special Event Cause which pairs nicely with Magic Move transition and makes it interactive. Layer with this cause becomes a draggable object in Simulator or in the Mirror App and dragging this layer will run Magic Move animations alongside your drag.

Watch tutorial
 

Transitions

List of TransitionsList of Transitions

Once you create an Event, you can customize the appearance its transition in the Inspector. To change transition type, select the cause layer, or its scene, or the arrow between two scenes. Transition type is set to Magic Move by default, but there are several transitions available:

Jump

No animations are performed and scene changes immediatelly.

Cross Fade

New scene fades in over the existing scene.

Push

Old scene moves out and new scene moves in from the opposite direction.

Slide

New scene moves in over the stationary old scene.

Magic Move

Special transition which animates each layer and attribute individually. See Magic Move page to learn more.