Building the Transition Function
The next thing we’ll set up is the fading transition itself. This will be a function that is called during the Area Change event block.
So, we’ll add a function into our event sheet (remember this tutorial is using the updated function system, so there is no additional plugin needed.) The function will be named Transition, and we need to add two parameters, state and tag. This function uses manual opacity settings, but you could always use the Fade behavior instead.
The first action in the function will destroy the Transition object that we have already on FirstLayout. This just keeps things tidy and makes sure we don’t have any excess objects hanging around. Plus, if you’re using an Object Bank layout, then this will destroy the existing instance, before creating a new one on your current layout.
The remaining actions are:
Transition ▶︎ Create Object ‘Transition’ on layer Layer 1 at (0,0)
Transition ▶︎ Set State to state
Transition ▶︎ Set Tag to tag
Transition ▶︎ Set opacity to Self.State = “Out” ? 0:100
Now we need to define what happens when different States are assigned. This transition will have two states: Out and In.
When the State is set to Out, the following events will run:
Condition: Transition ▶︎ State = Out
Action: Transition ▶︎ Set Opacity to Self.Opacity + 240 x dt
Sub-event Condition: Transition ▶︎ Opacity is greater than/equal to 100
System ▶︎ Trigger Once
Sub-event Action: System ▶︎ Wait 0.2 seconds
System ▶︎ Signal Transition.Tag
When the state is set to In:
Condition: Transition ▶︎ State = In
Action: Transition ▶︎ Set Opacity to Self.Opacity - 240 x dt
Sub-event Condition: Transition ▶︎ Opacity ▶︎ 0
Sub-event Action: Transition ▶︎ Destroy
So, your completed function should look like this:
We don't technically need the In event block right now, but it's good to have a couple of states defined should you want a slightly different transition.
Now we have a function ready to call whenever we need a transition effect. All that’s left to do is put in the code to do the actual layout change.