Issue 5
Froot Ninja
Learn how to create moving shapes in Articulate Storyline that can be triggered to form other animation pathways.
Multilayer Animation Ninja Masterclass
Be a Storyline Ninja and make your course animations Kickass!
This tutorial will show you how to utilise the animation systems of the Storyline authoring tool, to create moving shapes that can be triggered to form other animation pathways. We will also showcase the entrance and exit animations, and put them together to make interactive multilayered animation objects!
This explainer walkthrough highlights the potential provided by the available inbuilt animation tools of Storyline360, so you know exactly what tools you have under your animation toolbelt.
First, we need to create a blank project.
I make my projects 1280px x 720px as it gives the best web functionality.
Before we begin, let’s create the variables we plan to use in the project first. We can make them at any point using the variable menu, but in this project, I am using two number variables. One is used to generate random numbers and another is used to record passage of time. We will be explaining these in more depth later in the walkthrough…
On a new layer, let's add the images we plan to use in our project. For this project, I will be animating fruits to fly across the screen and asking the user to slice them with a mouse click. You could use any images you want, but the rest of this walkthrough will assume you are creating a similar project..
Note - You should build these interactions on their own slide layer, or you may have to recreate some of the animation paths later…
The first animation we will add is an entrance animation. These play as soon as the object is set to appear in the timeline (at the bottom of screen under the tab timeline). Let’s add a Spin animation so our fruit will appear to spin as they fly through the screen, we can also set the duration of this animation so it matches our needs…
Note - The same principles apply for exit animations which will instead play before the object is set to leave on the timeline, set to last the entire duration.
BONUS - Added in a recent update, is the Emphasis animation. These are special animations that can be used to emphasise certain elements. We will not be using them in this project, but they are set like entrance and exit animations, and they are animated using the Trigger Wizard, so they can begin when the timeline starts, reaches a certain point, users click it, etc. Any way you can specify within the Trigger Wizard.
The last animation we will use for our project is the motion path. These are animations that once triggered move objects across a designated motion pathway. We need to add a motion path to each slice of fruit, to move it off the screen.
We will modify the duration of the animations so the users have enough time to select the moving fruit. I have specified my animation durations to last 6 seconds…
BONUS - Each animation type has extra effect options that can be useful to know. We will be using the defaults in this activity, but you can see some of the options in these screenshots, we will explore this further in future posts but the default selection will work for our purposes.
As we only want the slices to appear after the fruit is selected, we will specify their state to be set to the default state of ‘Hidden’. This will keep them invisible until we tell the activity to display them, alongside their motion paths…
BONUS - If you want to wow your users, an additional animation depicting a slash would really impress! I have added these slash marks with a wipe animation. They are set to be hidden once the entrance animation completes using the Trigger Wizard… Yep, we can use the completion of animations to Trigger other actions… this will ensure they do not overstay their welcome.
Let’s add a new state to the main fruit now, for when it has been sliced. Removing the fruit image from this slide will make it appear as if it has disappeared, allowing us to give the illusion it has changed to a sliced variant. We will do this by using a trigger to change the state of our slices to visible when a user clicks the main fruit…
Here you can see we have used the state change to trigger the motion paths defined earlier. This completes the illusion that the fruit has transformed from a whole, to slices using our Ninja’s Katana… The order of the triggers can be important so try to copy my order to ensure functionality.
Now, we are going to select all our images and put them into a group, this is important for our next steps, so make sure you complete the prior ones first as it's hard to change them from within a group! Just make sure they are all close together so the animations work appropriately for our next steps.
Note - You can use the alignment tool to help you align the images into one block under Format > Arrange and Align…
Now we can give our new group a motion path of its own, and this motion path will be applied to the entire group of objects… Due to our image states and triggers set earlier, we can have two animations occur at the same time, which will give the illusion our fruit has changed mid-motion as we sliced them…
Note - You can not cancel an animation once it starts in Storyline, it must complete itself. So when two animations run together, both movements will occur simultaneously… Keep this in mind!
Lastly, we want to ensure our layer is set in its Timeline to only last the duration of our motionpath. After this, let's specify it reset on a revisit. This means we can reuse the layer over and over again which will be useful for our future steps.
Note - Layers have a separate timeline each, so you can adjust one without adjusting another…
Add a trigger to make the layer hide itself when the timeline ends, so it will be able to restart itself…
Now our slide should be ready to go, we can now clone this slide layer, so we can get a varied number of possible fruits, all running their own animations pathways. Make sure to modify the animations and images afterwards so they can all remain varied. I went and adjusted the groups animation paths so the end user could not so easily predict the movement, as well as changed the image for the fruit…
Note - You can change the image by right clicking it, this will retain your animation settings.
With all layers in place, we want to have this layer appear randomly on the main slide, so users can click them. I achieve this by using a motion path set on an object hidden off-screen. When this path completes, a trigger is set to generate a random number, which is a value between 1 and the total number of available fruit slides…
Don’t forget to set the motion path to begin again after it completes! This will keep it in perpetual motion, and ensure a new random number is generated each time.
We then need to create a Trigger to show the layer that corresponds to the number that was drawn… i.e. Show Fruit Layer 1 when var_random changes IF var_random is equal to 1… This will ensure the fruit will fly in, each time the motion path completes, and will select the layer that corresponds to its number, to display. So the duration is important for specifying the frequency.
We can use these same techniques, to create a timer that will keep track of how long the user has been playing. If we set the motion path to last a short 1 second and then set the Trigger Wizard to add a single digit to the var_time variable. This will have it build up every time the animation completes…
Note - We should make sure to have a trigger when this slide begins to set var_time to 0, incase we allow the user to restart the page…
We are now at the final polishing steps of our activity… any good game needs a fail state. Let’s create a new layer to tell the player it is Game Over…
We will add a restart button to this slide, which is set to jump to this very slide. This will have the slide refresh itself (as long as it has been set in the slide settings in the bottom right, similar to how you change the layer setting, but on the Base layer).
We can then add a trigger to each of our fruit layer, set to show our new Game Over slide when the motion path completes IF the image state of the fruit IS NOT sliced…
Repeat any steps above if you wish to expand upon your own game. For instance, I added some additional motion paths for hidden shapes, set to begin their motion paths after 15 seconds… 30 seconds… 45 seconds etc… so as the game goes on, more fruit will fly across the screen in increasing regularity, to keep the difficulty increasing.
Now check out the demo below!