Forum Discussion
Making an item spin on a central axis
Good afternoon everyone, I'm currently working on a course where I'm trying to make a circular diagram spin on a central axis. It needs to rotate 90° after click on a trigger, four times until it's back into it's original position.
Anyone have any idea how I could do this? I guess the answer will be motion path, however I can't seem to figure out how to make the rotate rather than move in a circle.
Ant,
You can't add an animation to an object already in a state. However, you can copy and paste an item (that already has an animation added) to a state and the animation will run.
So the basic gist in the example above....
1. Add the object to the slide and then add the quarter turn spin animation.
2. Copy object.
3. Create a new state "Stop 1" and then paste the object to that state (deleting original object).
4. Duplicate Stop 1 to Create Stop 2 and rotate the object 90 degrees.
5. Repeat step 4 as necessary
6. Remove the animation on the original object on the base layer.
I hope this helps!
Mike
PS. I used the basic spin animation (quarter turn) and not a motion path.
The windmill has states, each state has a quarter spin animation.
Hi Ant. Sounds like you're trying to build something pretty cool! I've been noodling this one with Mike Enders and we're not sure you can get the effect you're looking for with motion paths since they aren't 3D. Mike shared with me the attached example he created for a DevLearn session showing how you can get a 2D continuous rotation effect—although I'm not sure that's what you're looking for.
I also found a previous discussion highlighting some ideas for achieving a 3D rotation effect. Some of the ideas involved using PPT to animate the effect, while other folks suggested using Javascript.
Keep us posted on what solution(s) you ultimately employ to bring your design to life.Here is a quick variation of Mike's file that allows for continued rotation and starting/stopping. The 'starting/stopping' part is still rough but the mechanism works.
You are using an object (off the slide so it is not visible) on a motion path to "time" the spinning of the windmill, if I understand correctly?
Yes, have a look at the source file I had attached to one of my comments. Here is another example that uses the same technique.
Michael, I have been noodling around with your version of Mike Enders' spinning wheel demo and have also viewed your gears example. Thanks for both, they have been enormously helpful to me as I've been tinkering with a course idea that involves spinning gears. I think I understand the general programming logic you used, but am stumped about the "SpinCount" variable. ...how does SL know what a SpinCount is? It looks like you created that variable name (vs. it being a built-in command) but somehow SL knows it means "to spin". I greatly appreciate you generously sharing your wisdom!
A real fantastic solution! Thank you!
Hello..
After some experiments based on the methods shown by Mike, Trina & Michael, I came up with this method to simply it further. Hope this helps.Basic is same - A shape with 3 sec spin. It has 2 more states - S1 & S2 with 3 sec spin each. Now instead of the box & motion path, I have used JavaScript to change the variables at 3 sec intervals and added trigger to change states when the variables change.
Do you know how to make the spin go longer than the three seconds?
I know this is an old thread but I picked up a useful tip at an Articular webinar this week, and thought I add this as one more option. You can also spin an object by adding a circular motion path, set its dimensions to 1 px for height and width, turn off any easy options and select the Orient Shape to path option. This option requires no states or offstage animations. See attached a quick example and here is the published version.
In my example, the SpinCount variable is a custom variable that is 'driven' by an offstage object (see screenshot). This offstage object has a looped motion path animation. Everytime this animation completes, the variable is increased and based on that, the state of the spinning windmill is changed.
I've very quickly (<5min) created a clock example for how I've achieved this sort of thing in the past. Essentially I use an offset image and use the 'spin' animation.
Example: http://divers1fy.com/as_forums/clock/story.html(Please excuse the rough offset... rushed it! :) ).
Hope that helps.
Tim
Tim Danes
I've very quickly (<5min) created a clock example for how I've achieved this sort of thing in the past. Essentially I use an offset image and use the 'spin' animation.
Example: http://divers1fy.com/as_forums/clock/story.html(Please excuse the rough offset... rushed it! :) ).
Hope that helps.
Tim
Just to add to the 'clock theme, here is another example.
Actually Trina, that windmill is the exact motion I am trying to achieve, so not that complicated after all!! It is the 2D effect that I'm looking for rather than 3D...
Although I can't see the animation you/Mike used to achieve that effect?
Glad to hear that's the effect you're looking for. That .story file was all Mike Enders' doing. I was only instigating behind the scenes. ;-)
Mike says the key to this effect is having an object that is designed in a manner so that there is a true center point. Otherwise you get a wobble. He created the windmill blades in PowerPoint, using a 4th blade that is hidden (to create a true center) and then he exported it as a .png and imported it into Storyline.
The effect is achieved by the blades having multiple states and each stop state has a "spin" animation effect applied. The buttons trigger the state change thus animating the blades.
Super cool, right?
Let us know if you need any more help with this one!
When you say each stop state has a spin animation applied, is this a Motion Path? Because I'm clicking on each of the Windmills in the Storyline file and none of them seems to have any animations applied... bit confused!
