Creating Animated Button Styles and Effects in E-Learning #285

Animated Buttons in E-Learning #285: Challenge | Recap

Animated button effects are one of the best ways to prompt learners to touch the screen. From animated submit buttons to the despised next button, there are countless designs, styles, and effects to choose from. You can pack a lot of engagement into three basic states:

How to Create Animated Button Effects in Storyline 360

By default, animations can’t be added to existing states. To enable animation effects, you first need to add an extra shape to the state you want to animate.

If this sounds confusing, don’t worry. I recorded a quick video to show you everything you need to know.

View the tutorial on YouTube

Animated Button Example and Practice Slide

Here’s a simple example to help get you started.

I included a practice slide with ready-made shapes that you can use to practice adding different animation styles.

View the example | Download the source

Using Animated Button Effects with Characters

Guess what? You’re not limited to using the animation effect on buttons.

The technique works really well when you want to create subtle or soft transitions between object or character states.

Here’s a good example of how animated states works with characters in Storyline 360.

View the example | Download the source

When you check out the source file, you’ll see the timeline example doesn’t use the animated states effect.

The animation effects are created by applying entrance and exit animations to multiple characters on the slide. This is a good example of where it’s easier to create and manage everything on the timeline rather than adding the animation to each state.

Challenge of the Week

This week, your challenge is to show one or more examples of animated button effects. Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work.

Using Storyline for this week’s challenge? Please consider sharing your .story files. Button graphics make popular giveaways and the source files will help a lot of users get up to speed with more advanced button concepts.

Not using Storyline? No problem! You can mock up your 3-state buttons designs in PowerPoint or any other tool. I'm mostly interested in seeing your creative button ideas.

How are Animated Button Effects Used in E-Learning?

Animated Button Effects #89: Challenge | Recap

Looking for more ideas and source files? Check out the creative examples shared in our first animated buttons challenge. The challenge is almost five years old but the examples are still amazing.

Resources

• The Ultimate Guide to Buttons in Storyline 2: Fantastic resource on using buttons in Storyline 2.
• Tips for Creating Great Buttons That Stand Out: Bookmark this article for tips on common button characteristics and ideas for creating engaging buttons.
• E-Learning Icons: Show and Share Your Favorite Styles #78: Icon challenge with some great tips and examples for creating your own graphics.
• In Defense of Eye Candy: Great article that makes the case for design and beauty in web interfaces. The same research applies to the types of graphics we build in e-learning.

Articulate Training Webinars

Tom recently hosted a training webinar that shows you everything you need to know about creating animated buttons in Storyline 360.

View the Articulate Training webinar recording

Share Your E-Learning Work

• Comments: Use the comments section below to share a link to your published example and blog post.
• Forums: Start  your own thread and share a link to your published example..
• Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
• Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you dive into this week’s animated button challenge, check out the interactive ADDIE examples your fellow challengers shared over the past week:

Using the ADDIE Model in E-Learning #284: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.