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.

35 Replies
Trina Rimmer

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.

Trina Rimmer

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!

 

Mike Enders

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.

Owen Holt

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....

Michael Hinze
Jennifer Sader

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.

Subhashis Pattadar

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. 

Christie Pollick

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. :)