Animated Multi-State Object Transitions

[jeffreyp64846165]

Here is my first try at animating the state changes in an MSO: https://indd.adobe.com/view/6551ec10-0502-41f4-9959-12003e6b8e4b

It works well, but took an awful lot of steps and trying things. My question is, how would you create this effect?

Here's what I did:

1. Started with a 4-state MSO (the 4 locomotives).
2. Using copies of the images from the MSO, created 4 animations using Move Right, then masked them the same size as the MSO. Each animation is hidden before and after animating. Image 1 animates to image 2, 2 to 3, 3 to 4 and 4 to 1 for a total of 4 animations.
3. Created eight buttons--4 forward and 4 reverse. The forward button triggers the animation, changes the state, hides itself and triggers the next button. The reverse buttons do the same, except play the animation in reverse.
4. All of the animations, the buttons and the MSO are stacked on top of one another.

This was a lot of work for what is ultimately a simple effect. If it only animated forward, it could be done with just animations, but since each state can go either forward or backward you can't do it with the animation triggered by the state change. You could use fade in and fade out instead of move for a dissolve on change effect.

This would be easier if we could use the Overlays panel in ePub!

Jeff

[BobLevine]

Have you tried to simply animating the images in the MSO? Set the animation to fly in from right on state load.

[jeffreyp64846165]

Hi Bob!

That's what I tried first. It works fine, as long as you only go forward. I couldn't figure out a way to go backward (show previous state) as well.

[BobLevine]

Hmmm. The only way to reverse an animation is by using a button to do so. I wonder if you could put the nav buttons in the MSO and use them with a second action to animate the object backward.

That’s off the top of my head. You’d have to test that.