I was working on a project recently, where the storyboard asked for a ‘get your brain in gear’ animation, something similar to this…
The gears didn’t have to be mechanically accurate, just good enough to convey the idea. My first thought was to create a video, but then I remembered having answered a related question in the eLearning Heroes community. So, how do you spin objects in Storyline around one axis? You can’t motion paths, because the object would simply travel, along the path (even if it is circular) but would not rotate.
There are two other options:
1. Create custom states for an object, with the object slightly turned in each state and then use triggers to switch between states.
2. Use a Spin Entry Animation and continuously hide/show the object so that the entry animation repeats.
Before committing to the client, I wanted to test out option #2 and set up my Storyline project like this:
Each Wheel is a .png with transparent background (For this test, I didn’t bother cleaning the edges of the bitmaps).
Each Wheel has a Quarter Spin Entrance animation, which depending on the wheel’s position of the chain either spins it clock wise or counterclock wise. So far so good. The problem is that this setup would only spin each wheel once.
So, I added an offstage object (rectangle) with a looped motion path. whenever the loop is complete, each wheel’s state is set to Hidden and immediately changed back to Normal. This way, the entrance animation is played again, adding another quarter spin, and another…
It only took a few triggers to make that work. Wit the problem solved I wanted to try one more thing: have the animation start and stop based on a button click.
Here is the end result of the my quick test.
This technique can be applied to any object and provides an easy way to add rotation to Storyline projects.
Edit 10/2016: Here is the .story file for download.
Edit 04/2017: I noticed that in SL360’s HTML5 output, the spin animations I used show some weird behaviour. The rotation will speed up uncontrollably. It’s actually cool to look at, but this bug makes the method I described unusable for HTML5 output.
Edit 06/2018: The issue with HTML5 output I had mentioned previously is now fixed in SL360. See here a republished file. The animation is still a bit jerky, but at least the spin doesn’t go into overdrive anymore.
i just did this kind of animation but on a layer achieved the same looping effect
Sure, a layer will work too in some cases. As always in Storyline, there is more than one way to achieve the same result!
Super cool! Thanks for sharing this process; my wheels are turning on how to apply it. (Pun intentional.)
You’re work is fantastic! Thanks for sharing.
Very clever!
Hey Michael…Really like what you did here. Trying to do something similar with the spin animation to repeat, but struggling with the triggers set up. Any way you might be willing to share your trigger panel to see how you set that up? I’ve tried the hide/show, but I’m missing something. Would really appreciate it!
I suggest you share your question and .story file in the eLearning heroes community (https://community.articulate.com/forums/articulate-storyline) and someone will help with your specicif trigger issue.
Hi,
This is such a great effect. I’m new to Storyline and I couldn’t figure out what you mean on this statement “So, I added an offstage object (rectangle) with a looped motion path. whenever the loop is complete, each wheel’s state is set to Hidden and immediately changed back to Normal. This way, the entrance animation is played again, adding another quarter spin, and another…”
Do you mind elaborating it? Probably a step by step procedure would help me understand better.
Many thanks,
Sav
Not sure whatelse to tell you. I added an object to the slide but moved it offstage (so that it is not visible). Then I added a motion path to this object and loop it. This provides the ‘pulse’ for the entire animation. The duration of the motion path is identical to the duration of the spin animations. Eveytime the motion path completes I restart the spin animations by hiding/showing the various gear objects. Hope that makes sense.
Thank you so much for sharing this. I needed to do exactly this – I had three cogs turning. And your solution worked perfectly and without too much strain on my brain!