Articulate Storyline Tips & Tricks

Tips For Pixel Perfect Motion Paths In Storyline 360

In today's video, I want to show you some tips and tricks, how you can create pixel-perfect motion path in your next Articulate Storyline 360 e-learning project.

Create an animation

So my first example, I want to create an animation that my rocket flies to a position on the upper right corner. Now, imagine it has to be a precise position on your slide. So how can you do this? The first thing I'm going to do is I'm going to insert a shape, a rectangular shape, and I give it the same dimensions as my rocket. So we'll see what this is, go to format. It is a width of 80 and a height of 140. So I'll give this also a width of 80 and a height of 140. I want that it has no fill and a one pixel outline so that's okay. So what I can do, I can drag it right here.

Create an motion path

Now we can create a motion path. So I'll select this one, go to animations, click a motion path. I choose a basic motion path. So this one, a line, and what you see here, there is a transparent image with the endpoint of my emotion path. So what I can do now is I can direct the transparent image to my rectangle and it fits exactly in rectangle. So I know I have the right position right now. There are also some keyboard shortcuts that you can use. If you press control-shift and you use the arrow keys for your endpoint, you can see it will move eight pixels in left to bottom, right or top. But if you want to do it more precisely, you can hold only your shift key, and it will move only one pixel to the upper left, right, or bottom. So this way you can really position your motion path pixel-perfect.

So in my second example, I have two objects. One circle here, and one circle here. Let's position them on the same width and height. Where is my...? This one is not... So I'll select them both, go to format. They are petitions on the same width and height. Now, let's check the animations path. They have both a motion path, and what you can do, or what storyline does for you, is if you want to, they go through the exact endpoint. You can drag this one, and it will snap to the endpoints of the other one. So it makes it easier to get them to the same end point. So if I preview right now, you will see that they're moving together and over each other.

So in my third and last example, I have now three circles, and I want that they come together in the middle here. I could do it by snapping, but there is also an easier way, and I want to show you right now. So I already created a motion path here, and what I want to do, I want to add the same motion path the other two circles. I can do it manually, but there is an easier way. So what I do now is, I double click the animation painter. Select this circle and this circle, and you'll see, they all have now the same motion path with the same path options. To make sure that they come together in the middle, what I'll do, I'll select the end point, hold my shift key, select the end point of the second motion path and also select the end point of my third motion path, and you'll see right now that the X filling field's empty. So I'll give a dimension right here for instance, 360, and you'll see that all the end points jump to the same end points. So to the 360 here.

I hope that these tips give you inspiration to make sure that your motion path are pixel perfect in your next Storyline 360 projects.


Do you have any questions about embedding your Articulate Storyline course in WordPress or about Articulate Storyline in common? Please comment below this video, and I promise to answer it. And if you want to create great, engaging e-learning in Articulate Storyline, make sure that you get my free step by step guide on how I grade e-learning in Articulate Storyline. I know for sure that will help you because it describes my whole process that I use for every e-learning module in Articulate Storyline that I've built. And was this video useful to you? Then hit the like button below and don't forget to hit the subscribe button and the bell notification icon so you won't miss any of my upcoming videos.

Do you have any questions about this video or Articulate Storyline in common? Then leave a comment below video and i’ll promise to answer it.

Thank you for watching.

FasterCourse Banner
Would you like to know more about Upward Online Learning and Articulate Storyline? 

🔔 Subscribe here for more free E-learning and Storyline tips

📕 Download the Ultimate process how to create e-learning with Articulate Storyline here

🎓 Want to learn more about Articulate Storyline? You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the sign-up and you’ll receive your discount directly!

🎓 Do you want to start your Storyline project with modern design elearning templates that are easy to use?

You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the checkout page and you’ll receive your discount directly!

► Master Articulate Storyline Variables [Like a pro!] see video


Buy books on Articulate Storyline on Amazon:

📕 Articulate Storyline 3 & 360: The Essentials

📕Articulate Storyline 3 & 360: Beyond the Essentials (Second Edition)

📕 E-Learning Uncovered: Articulate Storyline 360: 2nd Edition

1 thought on “Tips For Pixel Perfect Motion Paths In Storyline 360”

  1. Ηey theгe јust wanted to give you a bгief heads uρ and
    let you know a few of the pictures aren’t loading cоrгectly.

    I’m not sure why but I think its a linking issսe. I’νe tried it in two different internet browsers and both show the same results.


Leave a Comment