Get ready, we just made fading in and out a whole lot easier. Whether it’s for when your page starts, when you mouse over, or even click or tap, you can fade your objects in and out.
First set up your page. Add some images and text!
Let's first to add a fade in effect when the page starts! When the page loads, I want the tree to fade in from the left. To do this, first switch the "Event Graph" and then add the following blocks.
Now I want to fade in the text and the speech bubble together after the character fades in. To do this we will "cascade" the functions. This means that the "condition port" on the second Fade function should be connected to the output port of the first Fade function.
The code tells the book to first wait for the tree to fade in before starting the next Fade function.
You can use the fade function on any element (images, objects, animations, text, etc). You have control over fading your object in or out and the direction. By default the Fade block will fade in the same place. However, you can set the direct to fade in from the bottom, top, left, or right.
There is no need to set the initial state of the object. For example, you do not need to first hide the element before fading it in. We don’t see a point in that (because obviously the initial start of an object fading in should be hidden...).
Furthermore, you cannot trigger events on hidden objects. No awkward click events on objects that are hidden. :)
Like all functions, fade works for all events and after any function that has an output port.
1) Fades an object in or out
2) Takes care of hiding an object until it fades in
3) Removes all events while the object is hidden
This feature can give add a subtle but fresh feel to your story. If you have text, fade them in to create movement and engagement for your readers’ eyes.
You can also easily fade in hidden objects when you click on hot spot to create I Spy type of stories.
Always preview: Don’t get so excited you forget to check with the preview. Sometimes if you have multiple cascading functions, it’s easy to forget one fade in or fade out. Always be sure to preview your work before publishing. Previewing also saves your work ;)