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.
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.
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!
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.
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.
this is a crude way of doing it using the pie shape and 8 states. done in ASL1. Is this what you have in mind? can't see what the others did (no ASL2) so if it's the same then don't mind me.
I cheated in ASL1 with my See and Say template. It has a spinner in the middle that does more or less what you described but with more stops. I used powerpoint to do the animation (rotate) and saved them as videos (WMV). I then placed the videos in my SL file and triggered them to play based on some other action. I also used the movie completion as a trigger. Worked like charm. https://community.articulate.com/discussions/building-better-courses/see-and-say-course-template
But now that I have upgraded to SL2, I might go back and update the file to use the new animations that are available to me. So happy to have finally upgraded. Now if only I had some time to play....
Is your only option to animate it in SL? I usually use Flash or After Effects to create more complicated animations. I actually started completely animating the intros for my modules (with objectives) to give it a little more pow using After Effects.
Thanks for helping Jennifer out here, Michael! And Jennifer, please feel free to let us know if that is what you had in mind or if you would still like further assistance.
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.
Many thanks for sharing your example, Subhashis! I did want to note for anyone who may not be aware... should you decide to utilize JavaScript, unfortunately, that is an area for which we would not be able to provide support. Here is also our JS Best Practices sheet for those who many like to review it. :)
47 Replies
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.
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?
The windmill has states, each state has a quarter spin animation.
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!
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.
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.
I don't know about my object spinning... but my head certainly is!
Ok thanks very much for the step-by-step guidance Mike, and also for your input Michael. I will work through this and let you know how I go!
this is a crude way of doing it using the pie shape and 8 states. done in ASL1. Is this what you have in mind? can't see what the others did (no ASL2) so if it's the same then don't mind me.
https://dl.dropboxusercontent.com/u/33387236/site/spinner/story.html
I cheated in ASL1 with my See and Say template. It has a spinner in the middle that does more or less what you described but with more stops. I used powerpoint to do the animation (rotate) and saved them as videos (WMV). I then placed the videos in my SL file and triggered them to play based on some other action. I also used the movie completion as a trigger. Worked like charm.
https://community.articulate.com/discussions/building-better-courses/see-and-say-course-template
But now that I have upgraded to SL2, I might go back and update the file to use the new animations that are available to me. So happy to have finally upgraded. Now if only I had some time to play....
Is your only option to animate it in SL? I usually use Flash or After Effects to create more complicated animations. I actually started completely animating the intros for my modules (with objectives) to give it a little more pow using After Effects.
Thanks guys for the responses guys!
Here is one more option to spin objects with a description of the setup here.
Thanks so much for your contribution, Michael! :)
This is exactly what I'm trying to solve. How did you do this. I can't find your description cause the link is "broken"
Here is the direct link to my brief blog post: http://blog.keypointlearn.com/2015/09/17/rotating-objects-in-articulate-storyline-an-experiment/
Thanx!
I will try to figure out how you did this with the triggers and so on ...
Glad you got the help you needed Peter, let us know if you need anything else.
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.
Thanks for helping Jennifer out here, Michael! And Jennifer, please feel free to let us know if that is what you had in mind or if you would still like further assistance.
Yes, thanks, I was able to build something similar using a moving object that was the same color as the background so as not to distract.
Sounds like a great solution, Jennifer! We appreciate the update. :)
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.
Many thanks for sharing your example, Subhashis! I did want to note for anyone who may not be aware... should you decide to utilize JavaScript, unfortunately, that is an area for which we would not be able to provide support. Here is also our JS Best Practices sheet for those who many like to review it. :)