Multiple events in a single slide
In this tutorial you can learn how to handle multiple events in the same slide to make some layers appearing when a button is clicked, and hide some other layers to the same event.
- 1
-
Preparations
For this tutorial, you will need multiple layers. I put down two of the following: button, text layer, and icon. I put the two buttons to a row with two columns. The text and icon layers were added to a similar row as well.
So before proceeding, create your layers, customize them and add your content!
- 2
-
Creating the IN and OUT animation
Now that the layers are set up, let's select a row, with has the text and icon layer. Add a new In animation, then add an Out animation. I'll pick Fade for both.
Turn on Repeatable.
Do the same with the other row as well.
- 3
-
Create events
Let's select our first row, that has a text and icon inside. Head to the Layer window → Animation tab → Events and create some events. The good thing about custom events is that you can name them anything, as long as you're using characters from the English alphabet. (You can also add numbers and _ sign.)
I selected row which is about dogs, so I'll use
dogin
anddogout
events.Let's select the other row (for me it's the one about cats) and create events for them as well. I'll use
catin
andcatout
. But I also want this row to fade out when the dog layer comes in. So I'll writedogin
to the Plays out when field after a single comma.Now head back to the Dog's row and put
catin
next todogout
. - 4
-
Trigger the animations
Now that the events are set up, let's trigger them. First select the Cat button and go to Layer window → Animations → Events. Scroll down to the bottom and find Click under Trigger custom event on. Write
catin
there to trigger this event.Select the dog layer and repeat the process with the
dogin
event.Now if you preview the slide, you can see that clicking on the Cat button shows the cat layer, while slicking on the dog button shows the dog layer, while hiding the cat layer.
- 5
-
Closing using the icon
Both the dog and cat row has a closing
x
icon, which currently does nothing. So let's configure that!Select the Dog closing icon and at Layer window → Animations tab → Events → under Trigger custom event on - Click write
dogout
. This will trigger the dog layer's out animation, without affecting the cat layer.Do the same with the cat closing icon, just using the
catout
event.