How to Make an Awesome Animated Button in Articulate Storyline 2

Articulate Storyline

A while back I saw a cool animated button online. This button was extra cool because the words animated to the left and an arrow appeared on the right. I thought, “I wish Articulate Storyline could do that.” It got me thinking, “Wait, can it?”

After experimenting a while, I developed something similar to what I saw. Check out the video below to see what I am talking about:

Here are 10 easy steps to make this awesome button:

Step 1:

Draw a rectangle for the button.

01_step1_edited

Step 2:

Insert Text as a separate box. Place it directly under the rectangle box.


Step 3:

Create an L-Shape and place it UNDER the rectangle box.

03_step3

Step 4:

Add a variable. We will be using it to help animate. I have named my file eLB_GetStartedBtnHover, you are free to name it whatever you want.

04_step4

Step 5:

Now that you have all the shapes for this button, it’s time to have some fun. Let’s start with the rectangle. Give it a hover state. Make the hover state a little bigger than the original state. This is important! If you don’t and you place your cursor right over the edge it hovers on and off. This is not pretty. So make it at least a little bigger to make sure this doesn’t happen. Make it big enough to add the L-shape later.

Step 6:

Select the L-shape and change the state to hidden.

06_step6

Step 7:

Add animation. This step we will be using the animation menu.

  1. Select the text layer.
  2. Click on Add Motion Path.
  3. Select Basic lines then change it from Down to Left.
    07_step7a 07_step7b
  4. Select Path Options and make it move left. Center it as close as you can to be on top of the original coordinates. Then Move it to the left 2 units by pressing left arrow twice on your keyboard.
  5. Repeat steps 1-3 to make the second one.
  6. Select Path Options and make it move right. Center it as close as you can to the original coordinates again. Then move it right two units by pressing the right arrow twice. Make sure it has a relative starting point. Select each line motion path, and on the duration change it from 2.00 to something faster, I chose .25 seconds.
    07_step7c 07_step7d

You may also have noticed I changed the triggers to click and right click in the video for testing purposes. I would suggest you spend more time here than you think you need to make sure you get it right.


Step 8:

Now that we have our first triggers let’s change how they should act. We are going to use the variable created earlier. Select the top trigger. It should say something like “Text Box 1 – Move Textbox 1 – ‘Let’s Go!’ on Line Motion Path 1 when timeline starts.” Change this to “Move Let’s Go!” on Line Motion Path 1. When eLB_GetStartedBtnHover changes if eLB_GetStartedBtnHover is equal to True.

  1. Select the next trigger. It should say something like “Text Box 1 – Move Textbox 1 – ‘Let’s Go!’ on Line Motion Path 2 when timeline starts.” Change this to “Move Let’s Go!” on Line Motion Path 2 When eLB_GetStartedBtnHover changes if eLB_GetStartedBtnHover is equal to False.

09_step9 08_step8b 08_step8

Step 9:

Select the rectangle and add the following triggers:

  1. Change the state of Getting Started Arrow – “L-Shape” to Normal When the user hovers the mouse over.
  2. Checkmark the Restore on mouse leave.
  3. Set eLB_GetStartedBtnHover equal to True When the state of Rectangle 1 Is: Hover
  4. Set eLB_GetStartedBtnHover equal to False When the state of Rectangle 1 Is: not Hover
  5. Set eLB_GetStartedBtnHover equal to True When the user clicks
  6. Jump to next slide (or whatever action you need it to do) when clicked

Step 10:

Debugging is a good practice. Before testing it out let’s add a trigger to the screen. Insert a text box, then click the reference link found in the Insert menu, select the trigger we are debugging. Now preview the slide.

If something went wrong, that is okay! Now you’ll have a variable to help you figure out what is going on. If the variable does work, and the triggers are correct, then the problem lies with the animation section. If the variable doesn’t work, make sure you check what it is in the trigger. Make sure it’s the rectangle and that the rectangle is on the top like I explained in steps 1-3.

10_step10

A Word of Caution:

I have tried to use a hotspot, rather than have the rectangle on top. But it doesn’t restore when you hover off. If your button has color, make a 2nd rectangle that is completely transparent and use that as a hotspot.

For some reason, creating a dynamic button like this doesn’t work inside a layer, or I haven’t had luck doing it in a layer. It has to be on the base layer.

Also, I have included the .story file so you can tweak it yourself. It has a few different slides you can deconstruct. Enjoy!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>