Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
LIGHTWELL | LESSONS
Guide #3Layers & Ambient Motion
CREATING YOUR FIRST SCENE
Open up your web browser and grab any image
from the web. We downloaded this cute cat photo.
STEP 1
LIGHTWELL 1
WHAT IS A SCENE? !
LAYEREDITING A
A “Scene” in Lightwell
represents an individual
screen in your app.
You can create as many
Scenes as you like. Add new
Scenes by clicking on the
+New Scene button.
Animations
Open up a New Lightwell Project. Double
Click Scene 1. !
Find the picture you just downloaded. !
Click and drag that picture into your Lightwell Layers Panel.
STEP 2
That’s it! You just created your first Layer! "
LIGHTWELL 2
Animations
WHAT IS A LAYER? #
LAYEREDITING A
Layers in Lightwell hold things like images, videos or sprites.
When you drag any of these assets to your Layers Panel on the left hand side of the interface, it will appear on the Canvas in the center of your screen.
Layers are positioned on the Canvas relative to their order in the Layers Panel. This means that you can put one Layer behind another to give depth to your project. This “layering” is how Layers got it’s name.
Drag Me!
Let’s start by changing a few simple Layer
Properties:
First, change the Width or Height to “2”. STEP 3
LIGHTWELL 3
LAYER PROPERTIES
Layer Properties allow us to
manipulate our Layers in
various ways. Want to make
a layer larger or smaller?
Maybe you’d like to rotate it
90 degrees on it’s side or
make it slightly transparent.
All of these things can be
accomplished within the
Layer Properties Panel.
Scale, the property we’re
changing in this step alters
the size of your layer. Here,
we’re doubling it in size.
Layer Properties !
LAYEREDITING A
before...
after…
Size: 1.0
Size: 2.0
Now, enter “180” under the rotate property.STEP 4
LIGHTWELL 4
LAYER PROPERTIES
LAYEREDITING A
Rotating a layer does just
what it sounds like… it
rotates it!
Here, we’re rotating our
photo 180 degrees, flipping
it upside down. before... !
"after…
Rotation: 0
Rotation: 180
Layer Properties #
Give your Layer an Opacity of “50%”STEP 5
LIGHTWELL 5
OPACITY
LAYEREDITING A
What is Opacity? Simply put,
it’s how transparent
something is. By default,
images are set to 100%
Opacity, meaning they are
completely opaque. You
can’t see through them.
Give a layer an Opacity less
than 100% however, and
you’ll gradually start to see
through it more as you
reach 0%, where it isn’t
visible at all!
before...
after…
Opacity: 100%
Opacity: 50%
Layer Properties !
Open up the Ambient Motion Panel under
Layer Controls.
Set the “Duration” to 1s.⏱
STEP 6
STEP 7
LIGHTWELL 6
WHAT IS AMBIENTMOTION?
Ambient Motion let’s you
add a simple animation to a
layer that loops forever.
But first thing’s first: you
need to set a Duration. A
Duration is how long it takes
to complete just one of
those animation loops.
A shorter Duration = a faster
Animation. "
A longer Duration = a slower
Animation. #
Ambient Motion$
before...
after…
LAYEREDITING A
STEP 9
Under “Scale,” set both the Width and
Height to “0.4” and see what happens.
STEP 8
Your layer should now be moving all on it’s own! Try messing around with some
of the settings even further. If you have multiple layers, you can copy + paste
Ambient Motion from one layer to another!
LIGHTWELL 7
WHAT IS TIMING?
Under Ambient Motion,
you’ll see a section labeled
“Timing.”
The Timing shows the the
pace of the animation with
an actual curve.
If you animate a ball falling
and choose linear timing, it
will move at the same pace
from beginning to end.
If you animate a ball falling
and choose ease-in timing,
it will start slow and
accelerate at the end.!
LAYEREDITING A
Ambient Motion"
0.4
1.0
20°
Set the “Rotation” to 20°.
LIGHTWELL 8
GLOSSARYDURATION
Ambient Motion is an animation that loops forever. The time it takes for one loop to complete is called Duration.
Setting a shorter time results in a faster-looking animaiton while a longer time results in a slower one!
SCALE
By default, Layers are imported into Lightwell with a Scale of “1.0” or, 100%.
Under the Ambient Motion Panel, if you set the Scale to “1.2”, your layer will animate the di!erence automatically.
MOVEMENT
Just like in Math Class, Lightwell uses an X and Y axis to determine movement.
Give X a value greater or less than 0 and watch your layer animate along a horizontal line. Give it a Y value to animate it along a vertical one.
ROTATION
Want your layer to animate by rotating along a point? Give this a value between -90 and 90 and start experimenting!
TIMING
When an object moves in real life, it doesn’t start and stop instantly. Think about when you open a refridgerator door— when you first tug on it, you pull it open quickly and then slow down as it fully opens.
Timing an animation works very much the same way. They define the change in an animation’s speed over time.