LIGHTWELL | LESSONS

Guide #5Interactions

TAPS, SWIPES AND SHAKES. OH MY!

Before we get into the lesson, let’s talk about the

four main types of Touch Interactions in Lightwell.

LIGHTWELL 1

WHAT IS AN INTERACTION?

INTERACTIONS

Touch Interactions !Interactions allow users of

your app to do things like

touch, swipe and drag

elements on the screen to

do any number of things.

For example, you could add

a Tap to Robo-cat to allow

him to do a flip! Maybe you

want the scene to change

when a character walks o!

screen or the background

music to change.

This is all possible with

Interactions.

Tap - Occurs when a user touches

down on the screen.

Press - Occurs when a user holds down

on the screen for a specified amount of

time.

Drag - Occurs when a user drags one

layer to another layer in a scene.

Swipe - Occurs when a user holds down

on the screen and quickly moving their

finger in a specified direction.

Let’s learn how to make something react to touch.

LIGHTWELL 2

DON’T FORGET...

INTERACTIONS

Touch Interactions ! You can always Group

Animations together.

When you group two

separate animations

together, they will play at

the same time! This is handy

as you build out animations

with lots of moving parts.

Open up the project from the previous

lesson (Guide #4: Animations). It should

contain the four Animations we set up.

STEP 1

Animations

Let’s learn how to make something react to touch.

LIGHTWELL 3

TYPES OF INTERACTIONS

INTERACTIONS

Touch Interactions ! There are three types of Interactions: Touch, Device and Event.

Touch: Requires a user to touch the screen in one of four ways

Device: Requires the user to either shake or tilt their device

Event: Triggers events to occur based on when an Animation/Video starts or ends or when a Scene starts.

Now, open the Interactions Panel.

Animations

STEP 2

Let’s learn how to make something react to touch.

LIGHTWELL 4

GROUPING INTERACTIONS

INTERACTIONS

Touch Interactions ! Just like with Layers and Animations, you can Group Interactions together in the same way but the way it works is a little di!erent.

When you group Interactions together, you can set it up so they will trigger sequentially or all at once.

Click and drag the “Tap” icon onto the Robo-Cat layer on your Canvas.

STEP 3

Drag Me!

Here’s what you’ll see under the Interactions

Panel once you add a Tap interaction to this

layer.

Let’s learn how to make something react to touch.

LIGHTWELL 5

EVENT INTERACTION:SCENE

INTERACTIONS

Touch Interactions ! Scene Interactions are super handy for when you want something to happen when a Scene loads in for the first time.

Now it’s time to set up the Interaction. Your Interaction Controls Panel on the right hand side should look like this:

This reads as: “When the Robo-Cat Layer is Tapped, Play _______”. We need to define the blank.

Tap the Dropdown and select “Animation”.

STEP 4

Let’s learn how to make something react to touch.

LIGHTWELL 6

SWIPE INTERACTION

INTERACTIONS

Touch Interactions ! Swipe Interactions are

unique because you can

specify a direction for the

swipe interaction to trigger.

To do this, just grab the

arrowhead and/or circle

handle and pull in the

direction you’d like.

You should see a new Dropdown appear. Go

ahead and select one of the Animations we

previously created.

Open up your project using the Lightwell Previewer app for iOS. Try tapping on

Robo-cat now!

You should see him respond to your taps.

STEP 5

STEP 6

Animation

Let’s learn how to make something react to touch.

LIGHTWELL 7

EVENT INTERACTION:ANIMATION

INTERACTIONS

Device Interactions !You can even have an Animation be an Interaction trigger. This lets you chain Animations together based on when one starts and ends. For example, you could trigger a Scene Change when a character has finished animating o! screen.

Another kind of Interaction is based on your physical Device Motion. Create a new Device Interaction by clicking on the “Motion” button in Lightwell.

You might notice that the Interaction Control Panel looks a little di!erent now.

STEP 7

STEP 8

Let’s learn how to make something react to touch.

LIGHTWELL 8

SHAKE INTERACTION

INTERACTIONS

Device Interactions ! The Shake Interaction is very similar to the Tilt Interaction but you don’t have to specify a direction to move your phone in.

Simply define what should happen when the phone shakes and you’re all set!

Select “Right” from the direction first dropdown and another previously set-up Animation in the second dropdown.

This reads as: “When I Tilt my phone to the right, play the cat-move Animation.”

Try opening up your project on Lightwell Previewer once more and tilt your device to the right. It should now trigger that Animation!

STEP 9

LIGHTWELL 9

GLOSSARYINTERACTIONInteractions allow users of your app to do things like touch, swipe and drag elements on the screen in order to trigger Actions/Animations, Music Changes, Scene Changes, Image Sequences, Video Playback or a Sound E!ect.

TOUCH INTERACTIONAn interaction requiring touch input

DEVICE INTERACTIONAn interaction requiring the user to shake or tilt their device

EVENT INTERACTIONTriggers events to occur based on when an Action/Video starts or ends or when a Scene starts.

GROUP INTERACTIONSAllows interactions to be played sequentially or all at once.

Let’s learn how to make something react to an

Event.

LIGHTWELL 9

SHAKE INTERACTION

INTERACTIONS

Event Interactions ⛓ The Shake Interaction is

very similar to the Tilt

Interaction but you don’t

have to specify a direction

to move your phone in.

Simply define what should

happen when the phone

shakes and you’re all set!

The last Interaction we’ll create today is

triggered upon the start or end of an event,

in this case an Animation.

STEP 10

Here we’ve set it up so that another Animation

plays when “cat-scale” ends. This is a really

easy way to chain Animations together to form

a fluid scene.

STEP 11

Animation

LIGHTWELL 10

GLOSSARYINTERACTIONInteractions allow users of your app to do things like touch, swipe and drag elements on the screen in order to trigger Animations, Music Changes, Scene Changes, Image Sequences, Video Playback or a Sound E!ect.

TOUCH INTERACTIONAn interaction requiring touch input

DEVICE INTERACTIONAn interaction requiring the user to shake or tilt their device

EVENT INTERACTIONTriggers events to occur based on when an Animation/Video starts or ends or when a Scene starts.

GROUP INTERACTIONSAllows interactions to be played sequentially or all at once.