Rotating an Image using States

Sep 16, 2012

I have question regarding states:

I want to create a dial that rotates according to a variable value. I have the variable working well, but want to rotate the pointer using the states feature. When I edit states, then add a new state, I am unable to rotate the pointer object that I had created. I can get it move to different places on the slide, but the rotate option is grayed out. I also note that "free rotation" function I use in PowerPoint is also not supported.

Any suggestions?

20 Replies
Jeanette Brooks

Hi Doug! You should be able to do this with a little trickery. It's true that when you edit the state on the original object, Storyline doesn't provide a rotation option on that object. However, what you could do is insert or paste a duplicate of the same object, and rotate that (since any new object you add to a state does allow the rotation option). Once you've inserted/rotated the duplicate, you can delete the original from the state. Attached is a rough example. Keep in mind, though, that if you later want to modify the look of your object (such as resize it or change text/color/etc.) you'll need to make the change on each state, since Storyline will consider the objects separate. Hope this helps!

Jeanette Brooks

Hey Charles,

You could do something like the attached. I added some layers on your slide, and each layer shows the shapes in a different position on the circle. A trigger on the rotation arrow in the middle causes the appropriate layer to show. Preview the file in Storyline and click the rotation arrow in the center to move the shapes clockwise, one position at a time.

Michael Grady

Great thread!  I was just starting to play around with "3d rotation", hoping to be able use some "smoke 'n mirrors" to produce a rotation sequence.  Any ideas on how to create a swipe feature rather than having to click the arrows?  ( I know I'm encroaching on adobe AIR/Flash, but it would be a nice feature to have )

Michael Hinze

Michael, thanks for sharing your file. To get a really smooth rotation, this should probably be done in Flash or as a 3D rendered video from some3D software. But doing this in Storyline doesn't look too bad either. I updated your file to have the various rotation states for one of the models as custom states, rather than in separate layers and replaces the two arrow buttons with a slider, which (somewhat) mimics a 'swipe'. See attached file and here is the published version. Hope that gives you some ideas.

Rebecca Fleisch Cordeiro

Hey Michael,

I'd made a note last week that I wanted to take a look and see how you did this. Very cool! Took me a bit to see where the hotspots were placed in relation to each other, since they were totally transparent, so I made them somewhat green again (any reason you did that?).

Definitely putting this in my toolkit. Tx so much for sharing!

Michael Grady

Michael Hinze said:

Michael, thanks for sharing your file. To get a really smooth rotation, this should probably be done in Flash or as a 3D rendered video from some3D software. But doing this in Storyline doesn't look too bad either. I updated your file to have the various rotation states for one of the models as custom states, rather than in separate layers and replaces the two arrow buttons with a slider, which (somewhat) mimics a 'swipe'. See attached file and here is the published version. Hope that gives you some ideas.


Michael,

GREAT work!  My thought process was stuck on Layers; the use of States didn't even cross my mind!  Thanks for taking this to the next level!

Laura McCarthy
Michael Hinze

Michael, thanks for sharing your file. To get a really smooth rotation, this should probably be done in Flash or as a 3D rendered video from some3D software. But doing this in Storyline doesn't look too bad either. I updated your file to have the various rotation states for one of the models as custom states, rather than in separate layers and replaces the two arrow buttons with a slider, which (somewhat) mimics a 'swipe'. See attached file and here is the published version. Hope that gives you some ideas.

Hi everyone! This thread has been so helpful to me. I am trying to create something just like Michael's swipe effect using several states which correspond to a slider. I want to create a swipe effect and make an image look like it's rotating.

However, my issue actually lies in getting the images required to set these custom states. For example, my project requires a 3D cube to rotate on the slide. Each side of the cube will have a different pattern. I want the student to be able to use the slider bar to view all sides of the cube by creating a rotation effect. I figure I will need some 3D software to render out the images I need, i.e. several images of the 3D cube at different points in the rotation. I've heard that people have used Blender to render out a 3D shape at different points in the rotation but the software looks complicated and I'm not sure if I'll be able to learn how to use it in the project timeline. I don't have any experience in 3D software and seem to be hitting a wall on how to achieve this and get the images I need to make this interaction work.

Any advice or links greatly appreciated!

Laura

Robin King

Hi Jeanette,  Thank you for the above fix from 10 years ago.  It took me a while to figure out what you meant about duplicating, copying, and pasting the picture, rotating it, etc.  Surprised that after ten years, Storyline hasn't evolved to let you rotate an image on a state, and you still need to paste the picture. 

In my project, when I used the State panel and the image icon to create new states for an image, it kept putting some of the images in landscape instead of portrait.  That was very confusing because the original file had the image in portrait orientation.  Storyline kept flipping some of them sideways.  Completely annoying.   The really weird thing was it wasn't consistent.  Even though all my images were in portrait orientation, Storyline would flip only some of them to landscape.  Even more strange when I inserted each image as an actual picture into the Story, they came in in portrait orientation just like they are in the file and I didn't need to rotate.  Weird!

Just so everyone has the steps to rotate a picture for a state, if it doesn't appear correctly when you add the image to the state using the image icon on the states/timeline bar, these are the steps.

1.  Create the object (it needs to be an image for this to work) you want to change the states on.

2.  Choose "insert picture from file" on the main top toolbar.

3.  Paste it somewhere in your story.  I inserted the images onto extra temporary slides. 

4.  Rotate your image to the orientation you want for your new state.

5.  Copy (Ctrl + C) 

6.  Navigate back to your object.

7.  Select the object.

8.  Now, in the states panel, click edit states and then click create a new state.

9.  On your keyboard, just do the paste function (Ctrl + V)

10.  If you need to do any moving or size changes, the image has handles for that purpose.

11.  If you are finished, click Done.

Not positive, but I believe your image name and your state name need to be the same.