#FREEBIE: Minimalistic Storyline player menu and navigation controls

Hey everyone,

I’ve been playing around with a new menu with navigation controls.

Check out the YouTube video right here

The template contains

  • the menu plus nav controls on the left and right side of the screen
  • Dark and light grey versions for left hand section
  • Dark and light grey, blue, red, green and yellow versions for the right hand side

Everything is put on a Master slide so you can adapt anything you want right there. If you have any questions or comments drop me a line in the comments or contact me directly.

Play with it here  |  Download the Storyline2 source file here

Enjoy!
Jeff

 

This post appeared first at community.articulate.com

Creating a Switch/Toggle button – Motion Paths vs. Object States

motion-vs-state

This week I was working on Articulate community e-learning challenge #97: Toggle, Switch, and Slide Your Way to More Creative E-Learning Buttons. I contemplated various ideas and built a quick prototype. I was pretty happy with it and moved on to the design of the interaction. Building a toggle button/switch is a game of ‘states’. You’ve got an on state and an off state. Pretty simple right. All you have to do is choose what you want for your overall look and feel so I googled for ‘switch button design’ and was presented with a ton of possibilities. Some very trendy, some very cool, some rather boring. I did a similar search on Pinterest.

switch
Plenty of design options when creating a switch/toggle button.

To be thorough I even added ‘CSS’ to my search which added in a couple of nice animated buttons (example1 | example2| example3) and that set me to created animated switch buttons.

The first thing I did was rebuild Kevin Thorn’s example. It has a sweet, smooth motion path sliding the button back and forth. It’s a real beauty. It took me about 10 minutes to setup, test if I added all the triggers and conditions correctly and to see if the motion paths are properly aligned and basically do what I expect them to do. As usual I had to do a little tweaking with the order of the triggers to make sure the up and down movement was working properly but after 15 minutes I had myself a schwéééét animated switch button. I started to create a second button and started to copy and adapt it, making sure the new variables, motion paths etc were set-up correctly. Once testing it I noticed I missed something (again) and fixed it. I was quickly getting annoyed with all this tweaking. I was spending a lot of time with just a couple of @#$%^&! buttons.

I started thinking about time spent and effectiveness and the added value of the animation on the button. I thought, how long would it take me to build a regular button with a ‘normal’ state and a default ‘selected’ state. 2 minutes later I had an identical, yet non-animated, button. It worked perfectly, it required no variables or triggers to change states and and play various entrance and exit animations. It just worked. Making a copy was even quicker as I didn’t have to make any changes to any triggers, variables, motion paths and conditions. And the end result looked pretty good.

So, what to do? Should I go with the animated switch buttons or should I go with the effective ‘default’ button? Let’s put them together and decide…

 

Powered by elearningfreak.com

So there you have it.

It’s a bit like comparing a Ferrari with a Volkswagen. The animated button is a thing of beauty. When looking at them together I instinctively know I want it. The default button is just so… default. However… although the animated button is awesome it is, like a Ferrari, a costly thing. It takes more time to build, test and work to get it going as well as doing maintenance to it, then it does to create 20 regular buttons that are still pretty nice and get the job done. Is the additional time spend really adding value to your project?

So what would you do? Would you spend the time or save the dime? Would your client and users love you or hate you for your choice?

Love to hear your thoughts in the comments below!

 

Create a highlight effect for your software simulations in Articulate Storyline

Are you creating a lot of software training simulations or interactions? Then this might be a great tutorial for you.

I started out creating a lot of software training using Adobe Captivate. The recording feature in Articulate Storyline is one of my favorite features. It allows us to create super cool software simulations very fast and very easy. Another thing I find really cool is that Storyline allows us to add our own interactions to those software simulations once they’ve been recorded.

The other day I was watching a lynda.com tutorial and the presenter used in really simple, but cool highlight feature. Unfortunately such a feature is not default in Articulate Storyline but… we can easily create it ourselves.

Take a look at the video above and see how you can create your own highlight effect using Articulate Storyline.

Custom Feedback Master Slides for Quizmaker and Storyline.

Mike Enders shared a post called Create E-Learning Courses With Custom Learner Feedback in which he shared how we can change the default Storyline quiz feedback popups.

In this post he shared the wellness course feedback and I decided to template that one for Storyline 2 and Quizmaker’13 because it’s just awesome!

Since most Storyline projects I do are wide-screen I’ve opted for a 16:9 resolution. The Quiz-maker file is set in the traditional 4:3 format.

FeedbackMasterLayouts

You can simply change the color scheme in the Feedback Master slide. If you want to change the default texts for the Correct/Incorrect/Try again titles and the Continue button you can do that via the Player > Text labels.

How-to Video   Quizmaker'13 file   Storyline 2 file

 

If you like this post let me know in the comments!

 

This post appeared first in the Articulate e-Learning Heroes community.

Looping Animations in Articulate Storyline

Looping animations in Storyline, by default there is no such thing (wouldn’t that be nice). However during a recent Articulate e-learning challenge about button animation and effects, an idea popped into my mind that I wanted to share with you.

Back in the days of Articulate Studio’09 there used to be a next button in the default player that started pulsating when the timeline ended. This was a perfect way to indicate users that they should click that the content on that slide had played out and they should click the next button to continue.

When Storyline 1 came out with its new player as well as Studio’13, the pulsating button had vanished as a feature in the default menu. Now some years later I still see the question being asked from time-to-time how to enable the pulsating button.
looping animation

This is where looping animations come in. If I am able to change the appearance of a button with a fade-in and fade-out animation, two basic entrance and exit animations in Storyline, I could mimic such an effect. The fade effect should be really short and… it should loop until the user clicks that next button to jump to the next slide.

This is exactly what I made happen. Check the demo and tutorial video below to learn how. If you like you can download the Storyline 2 source file to see how I did it.

Play Demo   Watch Tutorial   Download file


Questions or remarks? Leave your comments below. Don’t forget to share!

Creating Animated Buttons in Storyline

Hey Everyone,

In this post I’ll share how you can add that little extra to your project by animating your buttons. In this weeks Articulate eLearning Challenge Community Manager David Anderson set the challenge to create creative buttons and he shared some awesome examples he found on the web.

Having seen these examples I set out to recreate some of those effects in Articulate Storyline 2… and it was easy!

Check out my demo and view the video tutorial to learn how to create these kick-*ss buttons! Feel free to download the Storyline 2 file to see how I put these buttons together.

View Demo    Video Tutorial    Download Source File

Note that HTML5 does not support all Storyline animations. Be sure to try out different animations before creating your buttons.

If you like this post or have some questions please leave me a comment below and feel free to share this post.

3 Tips to Optimize Your Screencasts!

Have you ever watched a screencast video where you where thinking “What the heck am I looking at?!”. The items on the screen where so small they were nearly unreadable and where did that mouse pointer jump off to this time?? These are common annoyances for anyone who has ever watches a video tutorial online. Luckily there are a couple of easy things you can do to make this a little better!

Increase Your Mouse Pointer Size

This might seem a little awkward in the beginning, dragging around a massive mouse pointer, but your viewers will love you for it. On your Windows PC go to the Control Panel > Hardware and Sound > Devices and Printers > Mouse.

Select the Pointers tab and check the Scheme section. You’ll find a range of possibilities and you want to select one of the ‘Extra Large’ schemes. As you can see below I’ve selected the Windows Aero (extra large) (system scheme).

mouse pointer

When I started using this trick I used to switch back and forth between regular and extra large scheme because I felt the uncomfortable with the large mouse pointer turned on all the time. After forgetting to increase the size for several screencasts and having to re-record them again I switched to the extra large scheme permanently and actually have come to love my large mouse pointer.

Whenever I get behind a computer now, the first thing I do is increase the mouse pointer size because it is so much clearer when doing my day to day stuff.

Give it a try, you just might like it!

Increase Your System Text (And Other Items)

Another way to increase the readability of what you are recording is to increase the size of system text. Go to your Control Panel > Appearance and Personalization > Display > Make text and other itmes larger or smaller. By default it is set to Smaller -100%. Now switch it to Medium – 125%. The system will ask you to log off and on to take this into effect.

Once you’ve logged on again everything will be slightly bigger and thus more readable for your viewers. It’s a slight difference but worth the effort wouldn’t you say?

textsize

Again this is something that takes a little getting used to and as the screen mentions ‘Some items may not fit on your screen if you choose this setting while your display is set to this resolution’. Be sure to check if your display shows what you want to record properly.

I’ve been using this for a short time and have not encountered any problems as of yet but it’s a good habit to check before encountering an issue halfway.

Add zoom regions to your screen (for Articulate Storyline Users)

If you are using Articulate Storyline to record your screencasts and use them as a single slide video you can add Zoom regions on your video to help the viewer focus on the area you’re discussing.

Zoom regionYou can add multiple zoom regions on a single slide by going to the Insert tab and selecting the Zoom Region button in the ribbon. You can spread your zoom regions over the time line to zoom into the various areas you want to highlight.

 

That’s it. If you have any questions or comments drop me a line in the comments area below. I love to read your feedback!

Less = More: Customizing the Articulate Player

When you’re creating courses using Articulate Studio or Storyline you’ve got a very effective and highly customizable pre-built player available. It allows you to adapt the color scheme to your specific needs, to turn on and off every possible player feature from menu, to volume button, from glossary to previous and next button.  This allows you to create the exact look you need.

But what if you want to go that extra mile? What if you want to give your course that fully custom look? In that case you’ll need to make a few extra adjustments.

Turn off all Player features

The first thing you want to do is turn off all the player items. You’ll do this in the Features section of the Player Settings. Turn of everything, the menu, the title, the seekbar , all player tabs like glossary and notes… everything!

Make the Player fully transparent

As I just mentioned you can customize the color scheme of the player to create your own unique look and feel. You can do this by going into the Colors & Effects section of the Player settings. Here you’ll find the option Show advanced color editing. Next to selecting a specific color for every conceivable element of the player there is also a transparency setting. This is where you’ll do your magic.

colorediting

When you select the Show advanced color editing option the label will change into Hide advanced color editing as you can see in the image above.

When you select Edit item: a menu will fold out with all player elements, don’t worry you don’t have to set them all to 100% transparency. All you need to focus on is the Base section. The base section contains seven items and you need to set all of these to 100% transparency to make your player fully transparent.

That’s it for the player, it’s now fully transparent. To make it easy on yourself you’ll want to save this as a custom player setting. You can do that by selecting Current Player in the ribbon. This will open a pull down menu were you can save your adjustments. Select Save as… and save it. For easy reference I suggest you call it ‘Transparent’.

Remove the Previous / Next Button

So now you’ve made the player fully transparent there are still a couple of things to change. Unfortunately we cannot turn off the Previous and Next button in the player settings. This is a setting that needs to be adjusted at page level.

The easy way to do this is by selecting all slides in your scene when you are in Story view. Just select the first slide and press CTRL-A. Now uncheck the Prev and Next buttons in the Slide Properties section in the right-hand corner below the Triggers panel.

slideproperties

Note that when you turn off these navigation buttons it’s up to you make sure users can navigate from slide to slide.

So that’s really it for the Player… Well, almost.

Changing the Feedback Slide Master

One of last things that needs to get customized it the Feedback Slide Master. By default this has the standard design for the basic feedback windows that get shown when you use quiz slides. You can create a new generic look and feel that could match any of your projects or a specific one for this course. Either way, you’ll want to get rid of the default look.

feedbackmaster

And that’s it! Adjust these screens and you’re course will look as unique as it possibly can.

Note: There are some default screens we cannot alter that have that default feedback look. This applies for the popup that asks you if you want to continue where you left off and the screen that will popup when you haven’t selected an answer on a quiz slide. These popups are colored according the default color scheme and if you want to adjust these you need to go back into the advanced color editing section of the Player settings.

Like this post or have any questions or concerns? Let me know in the comments below. I love to read your feedback.

 

 

Using interactive charts and graphs in e-learning

View demo

In a recent Articulate e-learning challenge we were asked to create interactive charts, graphs and tables as these are easily the most overlooked assets in online training. For some reason clients prefer to keep the graphs, workflows or tables identical to the one that’s in their slide deck even if it means cropping and scaling the hell out of them making them virtually useless.

For this challenge I combined some Diversity and Inclusion related material I saw passing by in my twitter stream and remembered I had just seen the most gorgeous graph design on dribble that I had saved into my ‘inspiration’ folder.

In this example the user can explore the graph and add more information to it by clicking the legend at the right hand site. What I like about this approach is that it plays with my personal expectations of what the numbers will be like. Any surprises from my end when seeing the actual results will only embed the learning in a stronger way.

The demo was built in Storyline but could just as easily been put together in Articulate Studio.

So what do you think?

Animated Menu for Storyline 2 /w source file

View demoDownload SL2 fileHow it's done video

Hi folks,

I created a simple animated menu that a user can open via the ‘sandwich’ icon which you see more and more in responsive design these days. What I like about this interaction is that is frees up the player real-estate and allows the user to focus on the actual content while the menu is but a simple click away.

The menu:

  1. is based on a Slide master for easy maintenance
  2. has a smooth intro and exit animation
  3. features a Hover and Completed state
  4. is slightly transparent so any background image can subtly bleed through

 

You could expand some of the menu’s features by adding a help/more info, downloads/resources and contact icons at the bottom.

Check the Demo here and Download the Articulate Storyline 2 source file. If you want a closer look under the hood then check out this YouTube video on how I built the menu interaction.

Hope you like it, let me know in the comments!

Jeff