trying out some cool effects
Guide #7 Tips and Tricks
TRYING OUT SOME COOL EFFECTS
LIGHTWELL | LESSONS
ANCHOR POINTS Imagine a pin being stuck in your layer. If you rotate your layer, it will spin around it’s center. What happens if you move that pin to the bottom left?
STEP Open up this project with Robo-Cat. If you navigate to the Animations Tab and press play 1 on “cat-spin”, you should notice Robo-Cat spin around his center.
STEP Now, open up the Layers Tab and select the Robo-Cat layer. In the Layer Control 2
LIGHTWELL
1
ANCHOR POINTS STEP 3
Select the Rotation panel and move the Anchor Point marker to the bottom left of the window.
ANCHOR POINT VS. REFERENCE POINT A Topic is a way to categorize and keep track of dialogue within Lightwell. To create a new Topic, just tap the Create a New Topic button in the Dialogue panel.
STEP 4
Go back into the Animations Tab and press the play button. How has Robo-Cat’s rotation changed?
NEXT: ANIMATION | Card Flip LIGHTWELL
2
ANIMATION 🃏 Card Flip
Have you ever wondered how to animate a card flip or something similar? Now we’re going to learn how! Follow along below. STEP Open up this project this coral colored rectangle. Directly behind it is a purple colored 1 one. Select that Layer in the Layers Tab and set it’s Opacity to 0% in the Layers Panel.
LIGHTWELL
3
ANIMATION 🃏 Card Flip
BREAKING IT DOWN
STEP 2
STEP 3
Open up the Animation Tab and create a new Scale Animation that affects the “Card Back” layer. Call it something like “back flip-1”.
This animation is split up into three overarching steps to make it appear like a card is flipping:
Set the Keyframe 2 time to 1s and change only the width value to -1.0 as shown.
1. Squish “Card Back” along it’s Width to make it look like it’s turning over 2. Lower “Card Back”’s opacity to make it disappear 3. Heighten “Card Front”’s opacity to make it appear 4. Expand “Card Front” along it’s Width to make it look like it’s turning over after the “Card Back” layer disappears
Hint: You will need to click the lock button to edit only the width value.
STEP 4
STEP 5
Keep this in mind as you’re going through each step!
Now create an Opacity Animation that also affects “Card Back”. Set Keyframe 1’s time to .97 and Keyframe 2’s time to 1.0.
Change Keyframe 2’s Opacity value to 0%.
LIGHTWELL
4
ANIMATION 🃏 Card Flip STEP 6
Now, Group these Animations together and Call it “Card Back Dissappear”.
STEP 7
Create a new Scale Animation called “front flip-1” that affects the “Card Front” layer.
STEP 8
Open up both keyframe panels to adjust their timing. Change Keyframe 1’s time to “1.0” and Keyframe 2’s time to “2.0”. In addition, set Keyframe 1’s Width to “-1.0” and Keyframe 2’s Width to “0.0”.
Hint: You will need to click the lock button to edit only the width value.
STEP 9
Create a new Opacity Animation titled “cardappear 1” and have it affect the Card Front layer. Change the keyframe times to reflect the below image.
LIGHTWELL
5
ANIMATION 🃏 Card Flip
WHY ALL THE GROUPS?
STEP 10
Just like we did with the two Card Back animations, it’s time to group the two Card Front Animations. Label it something like “Card Front Appear"
By grouping both the Cart Front Appear and Card Back Disappear, we ensure that they play as if they were one Animation. “Card Back Disappear” spans the length of time between 0s - 1s while “Card Front Appear” spans 1s - 2s.
STEP 7
Now we need to combine both Animation Groups into a singluar group so that they play as one. Select both, group them and name your new group “Card Flip“
LIGHTWELL
When grouped, we now have an animation that lasts 2 seconds.
6
ANIMATION 🃏 Card Flip STEP 8
Highlight the “Card Flip“ Animation Group and press play on the Animation Timeline. Your canvas should now animate a card flipping.
8 8
8 8 8
NEXT: Parallax LIGHTWELL
7
PARALLAX Adding parallax to a layer is used as an effect to make 2D environments look 3D. To create a parallax effect, you must give different layers different point depths. When layers have different point depths, tilting the device gives it a 3D effect.
BACK
MIDDLE FRONT
40
POINT DEPTH
0
Layers that appear closer should have a larger parallax point depth, while layers that appear farther should have a smaller parallax point depth.
LIGHTWELL
8
PARALLAX Try this out yourself by opening up a new project with assets like these. STEP Name your layers “front”, “middle” and “back” like below. 1
STEP 10
Now, select the “front” layer and open up the Parallax Tab within the Layer Control Panel. Give it a Point Depth of 20.
LIGHTWELL
9
PARALLAX STEP 7
Repeat this process for the “middle” and “back” layers, giving them Point Depths of “10” and “0” respectively.
STEP 8
Tap on the Parallax Preview Button on your canvas. Now, click and drag your mouse around on the Canvas. Notice anything different?
Try previewing it on your phone! If you preview this project, you’ll notice this parallax effect occuring when you tilt your phone around.
NEXT: IMAGE SEQUENCES LIGHTWELL
10
IMAGE SEQUENCES Sometimes referred to as “sprites”, Image Sequences are just as their name implies a sequence of images that makes up a layer. What’s interesting about them is what you’re able to do with them. But first...
How to Create an Image Sequence STEP 1
Open up a new file and hit the New Layer “+” button.
LIGHTWELL
11
IMAGE SEQUENCES STEP 2
An New Layer pop-up will appear. To create an Image Sequence, select the multiple images you’d like to be apart of your Sequence and drag them all at once into this overlay.
Drag
It should look something like this once you’ve dragged them in there:
LIGHTWELL
12
IMAGE SEQUENCES STEP 3
After hitting Create Layer, click on your new Image Sequence in your Layers Panel. You should see the Image Sequence Manager appear at the bottom of your window.
Hint: You might need to make this panel larger by clicking and dragging the top of the panel.
Animating an Image Sequence STEP 4
Making your new Image Sequence animate is simple. Click and drag the individual sprite images from the bottom tray to the top right where it says “Animation Order.” Drag Here!
LIGHTWELL
13
IMAGE SEQUENCES STEP 5
Now, click the “Play Sequence” button. You should notice a change on your canvas ;) Try playing around with some of the other settings like “Repeat Count” and “Frame Speed” to achieve your desired effect.
Tying an Interaction to an Image Sequence STEP 6
Open up the Interactions Tab and add a Tap Animation to your Image Sequence. Fill out the dropdowns as below:
Now, if you preview on your phone, you’ll notice the Image Sequence play when you tap on your layer!
LIGHTWELL
14
TRYING OUT SOME COOL EFFECTS
LIGHTWELL | LESSONS
ANCHOR POINTS Imagine a pin being stuck in your layer. If you rotate your layer, it will spin around it’s center. What happens if you move that pin to the bottom left?
STEP Open up this project with Robo-Cat. If you navigate to the Animations Tab and press play 1 on “cat-spin”, you should notice Robo-Cat spin around his center.
STEP Now, open up the Layers Tab and select the Robo-Cat layer. In the Layer Control 2
LIGHTWELL
1
ANCHOR POINTS STEP 3
Select the Rotation panel and move the Anchor Point marker to the bottom left of the window.
ANCHOR POINT VS. REFERENCE POINT A Topic is a way to categorize and keep track of dialogue within Lightwell. To create a new Topic, just tap the Create a New Topic button in the Dialogue panel.
STEP 4
Go back into the Animations Tab and press the play button. How has Robo-Cat’s rotation changed?
NEXT: ANIMATION | Card Flip LIGHTWELL
2
ANIMATION 🃏 Card Flip
Have you ever wondered how to animate a card flip or something similar? Now we’re going to learn how! Follow along below. STEP Open up this project this coral colored rectangle. Directly behind it is a purple colored 1 one. Select that Layer in the Layers Tab and set it’s Opacity to 0% in the Layers Panel.
LIGHTWELL
3
ANIMATION 🃏 Card Flip
BREAKING IT DOWN
STEP 2
STEP 3
Open up the Animation Tab and create a new Scale Animation that affects the “Card Back” layer. Call it something like “back flip-1”.
This animation is split up into three overarching steps to make it appear like a card is flipping:
Set the Keyframe 2 time to 1s and change only the width value to -1.0 as shown.
1. Squish “Card Back” along it’s Width to make it look like it’s turning over 2. Lower “Card Back”’s opacity to make it disappear 3. Heighten “Card Front”’s opacity to make it appear 4. Expand “Card Front” along it’s Width to make it look like it’s turning over after the “Card Back” layer disappears
Hint: You will need to click the lock button to edit only the width value.
STEP 4
STEP 5
Keep this in mind as you’re going through each step!
Now create an Opacity Animation that also affects “Card Back”. Set Keyframe 1’s time to .97 and Keyframe 2’s time to 1.0.
Change Keyframe 2’s Opacity value to 0%.
LIGHTWELL
4
ANIMATION 🃏 Card Flip STEP 6
Now, Group these Animations together and Call it “Card Back Dissappear”.
STEP 7
Create a new Scale Animation called “front flip-1” that affects the “Card Front” layer.
STEP 8
Open up both keyframe panels to adjust their timing. Change Keyframe 1’s time to “1.0” and Keyframe 2’s time to “2.0”. In addition, set Keyframe 1’s Width to “-1.0” and Keyframe 2’s Width to “0.0”.
Hint: You will need to click the lock button to edit only the width value.
STEP 9
Create a new Opacity Animation titled “cardappear 1” and have it affect the Card Front layer. Change the keyframe times to reflect the below image.
LIGHTWELL
5
ANIMATION 🃏 Card Flip
WHY ALL THE GROUPS?
STEP 10
Just like we did with the two Card Back animations, it’s time to group the two Card Front Animations. Label it something like “Card Front Appear"
By grouping both the Cart Front Appear and Card Back Disappear, we ensure that they play as if they were one Animation. “Card Back Disappear” spans the length of time between 0s - 1s while “Card Front Appear” spans 1s - 2s.
STEP 7
Now we need to combine both Animation Groups into a singluar group so that they play as one. Select both, group them and name your new group “Card Flip“
LIGHTWELL
When grouped, we now have an animation that lasts 2 seconds.
6
ANIMATION 🃏 Card Flip STEP 8
Highlight the “Card Flip“ Animation Group and press play on the Animation Timeline. Your canvas should now animate a card flipping.
8 8
8 8 8
NEXT: Parallax LIGHTWELL
7
PARALLAX Adding parallax to a layer is used as an effect to make 2D environments look 3D. To create a parallax effect, you must give different layers different point depths. When layers have different point depths, tilting the device gives it a 3D effect.
BACK
MIDDLE FRONT
40
POINT DEPTH
0
Layers that appear closer should have a larger parallax point depth, while layers that appear farther should have a smaller parallax point depth.
LIGHTWELL
8
PARALLAX Try this out yourself by opening up a new project with assets like these. STEP Name your layers “front”, “middle” and “back” like below. 1
STEP 10
Now, select the “front” layer and open up the Parallax Tab within the Layer Control Panel. Give it a Point Depth of 20.
LIGHTWELL
9
PARALLAX STEP 7
Repeat this process for the “middle” and “back” layers, giving them Point Depths of “10” and “0” respectively.
STEP 8
Tap on the Parallax Preview Button on your canvas. Now, click and drag your mouse around on the Canvas. Notice anything different?
Try previewing it on your phone! If you preview this project, you’ll notice this parallax effect occuring when you tilt your phone around.
NEXT: IMAGE SEQUENCES LIGHTWELL
10
IMAGE SEQUENCES Sometimes referred to as “sprites”, Image Sequences are just as their name implies a sequence of images that makes up a layer. What’s interesting about them is what you’re able to do with them. But first...
How to Create an Image Sequence STEP 1
Open up a new file and hit the New Layer “+” button.
LIGHTWELL
11
IMAGE SEQUENCES STEP 2
An New Layer pop-up will appear. To create an Image Sequence, select the multiple images you’d like to be apart of your Sequence and drag them all at once into this overlay.
Drag
It should look something like this once you’ve dragged them in there:
LIGHTWELL
12
IMAGE SEQUENCES STEP 3
After hitting Create Layer, click on your new Image Sequence in your Layers Panel. You should see the Image Sequence Manager appear at the bottom of your window.
Hint: You might need to make this panel larger by clicking and dragging the top of the panel.
Animating an Image Sequence STEP 4
Making your new Image Sequence animate is simple. Click and drag the individual sprite images from the bottom tray to the top right where it says “Animation Order.” Drag Here!
LIGHTWELL
13
IMAGE SEQUENCES STEP 5
Now, click the “Play Sequence” button. You should notice a change on your canvas ;) Try playing around with some of the other settings like “Repeat Count” and “Frame Speed” to achieve your desired effect.
Tying an Interaction to an Image Sequence STEP 6
Open up the Interactions Tab and add a Tap Animation to your Image Sequence. Fill out the dropdowns as below:
Now, if you preview on your phone, you’ll notice the Image Sequence play when you tap on your layer!
LIGHTWELL
14
