Animations in Storyline

I was wondering how to create animations like the one in #4: Math Course.

https://community.articulate.com/articles/7-beautiful-e-learning-title-slides?utm_source=epiphanies&utm_medium=email&utm_campaign=100615-Epiphanies-4&mkt_tok=3RkMMJWWfF9wsRolva3LZKXonjHpfsX87%2BoqUaexlMI%2F0ER3fOvrPUfGjI4CTsdgI%2BSLDwEYGJlv6SgFT7jGMblo27gPWxA%3D

I like how when the user clicks the "begin" button, a bar comes out from the button, and transitions into the next slide in one fluid motion.

Anyone know how this was done?

Sean

14 Replies
Daniel Sposato (Philly)

This is pretty easy. I attached a simple example for you to look at. The options for the animations are explained in the following images:

Then set your "Effect Options" drop down to the direction you want:

That's it! The animation will start from one side of your line and play at the speed you set in time until it completes the length you made it.

 

Sean McAlary

Hi Daniel, 

Thanks for your example! It is very helpful, but doesn't fully answer my questions about this interaction. In your example the animation starts playing as soon as the timeline starts, but in the example I was referring to the animation only happens when the "begin" button is clicked. 

It's also the fluid transition into the next slide that I'd really like to learn how to do. I tried using an "Uncover" transition but I'm not getting the same effect as the one in the example I'm referring to.

If you would be able to post your same example but with a transition to another slide, I think I could learn how to do this animation! No rush though, I know it's almost the weekend. Thanks so much!

Sean

Daniel Sposato (Philly)

It's not too difficult to put together with a button and transfer to another slide:

Pause the timeline when the slide starts and put your button on the stage with a trigger to tell it to play when clicked. Make the animation as I showed you with the line and add a motion path to a title or whatever other object you want to move to the left as it did going off screen to the left. Then start the look of your next slide off stage on the right and motion path it in to the position you want it to stop at on stage.

Brian Allen

One thing that I find interesting is that the entrance animation applied to the "begin" button doesn't seem to start until the state of the button is changed to normal, even though the begin button is on the timeline from the beginning of the timeline.  Have you found this to be pretty much default behavior?

Phil Mayor

Hi Brian changing an object from hidden to normal means you can time the entrance animation without using the timeline. You could also drag the end point back to be o.25 seconds and then control the exit animation whenever you set it to hidden. I may over complicate it doing it this way but I find it gives me much more control than using the timeline.

Sent from my iPhone

Brian Allen
Phil Mayor

changing an object from hidden to normal means you can time the entrance animation without using the timeline

Very, very cool, and something I would've had to stumble on to figure out myself because I would have never thought about doing it.

I'm amazed at how long I've been using this tool and STILL learning new stuff, pretty awesome.

Daniel Sposato (Philly)
Brian Allen
Phil Mayor

changing an object from hidden to normal means you can time the entrance animation without using the timeline

Very, very cool, and something I would've had to stumble on to figure out myself because I would have never thought about doing it.

I'm amazed at how long I've been using this tool and STILL learning new stuff, pretty awesome.

I agree. There are a lot of different ways to go about using SL2 to achieve the same result. It has a good bit of the flexibility I loved using in Flash!

Another great thing in relation to timing the entrance of animations, is through the use of slide layers.  They can be used similar to the way you use labels in movieclips in Flash. You can make individual animations on slide layers and then hide or show then at any time with triggers. This in effect can work as a way to allow the user to rewind sections of your slide, if you structure it correctly.

I couldn't do this in Captivate all in one slide and it drove me crazy!

Daniel Sposato (Philly)
Brian Allen

You're going to make me feel old now if we start talking about using Flash, it gives away our age, hahaha :)

Haha.... Flash is great! I have yet to see anything that let's me do the kind of detailed 2D animation it did and still does in the CC version. I still create HTML5 games and animations with it! All these whipper snappers don't know what they're missing!