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:
Draw a rectangle for the button.
Insert Text as a separate box. Place it directly under the rectangle box.
Create an L-Shape and place it UNDER the rectangle box.
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.
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.
Select the L-shape and change the state to hidden.
Add animation. This step we will be using the animation menu.
- Select the text layer.
- Click on Add Motion Path.
- Select Basic lines then change it from Down to Left.
- 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.
- Repeat steps 1-3 to make the second one.
- 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.
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.
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.
- 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.
Select the rectangle and add the following triggers:
- Change the state of Getting Started Arrow – “L-Shape” to Normal When the user hovers the mouse over.
- Checkmark the Restore on mouse leave.
- Set eLB_GetStartedBtnHover equal to True When the state of Rectangle 1 Is: Hover
- Set eLB_GetStartedBtnHover equal to False When the state of Rectangle 1 Is: not Hover
- Set eLB_GetStartedBtnHover equal to True When the user clicks
- Jump to next slide (or whatever action you need it to do) when clicked
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.
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!