Learn. Show. Repeat.

Tag: sliders

Sliding Along with the Force

A few weeks ago I was delivering a Storyline 2 session in Brisbane and we were looking at the slider interaction and how you can use a slider to change the state of an object and also use it to show layers. In the change of state example we were looking at, you slide the thumb along the track and the colour of an image changes. One of the participants asked if it were possible to change the colour of the thumb to match the colour of the image and my response was “I’m not sure, I haven’t tried that before but let’s check it out and see if it can be done”.

So, I clicked on the slider and went to the states area and I was pleasantly surprised to see that sliders have ‘states’. As it turns out, you can add new slider states and then format the slider for your new states (in our class example, I could change the thumb colour to match the image colour). Cool! I was also happy that person asked this question or I may never have known about slider states!

Flashback to late 2015, and David Anderson created an ELH Challenge to coincide with the release of the new Star Wars movie, The Force Awakens. E-Learning Heroes Challenge #110 – Awaken Your E-Learning Force. The brief was to build a Star Wars-themed interaction, this week your challenge is.

Sometimes ideas for challenge demos come to me quickly but sometimes I need to percolate ideas in my subconscious for a while and this was one of those challenges. I did have some illustrated Star Wars characters that I wanted to use for the demo and an idea of a trivia type interaction, just no solid idea for bringing them together in a different way.

Jumping back to the present and after I discovered that sliders have states, I thought that’s it! I could create a slider state for each character (six in total) and I could also have a question for each character to correspond with the change in image.

So this is what I did:

I inserted a slider and in the Thumb Fill area, filled it with a picture of my first character. I had to play around with the sizing of the thumb so that it wasn’t too small. For the track, I chose no fill and no outline which made it transparent. Then I created a new state for each character and named each state to correspond with the character:

The thumb picture changes using a change of state trigger (one for each character):

Each of the questions is built on a layer:

I used shapes for my questions and feedback with 40% transparency and shapes for my answers choices too. As there was only one correct answer, I grouped the choices in a button set which only allows one answer to be selected at a time. The correct/incorrect feedback boxes are on this layer too and they both start as ‘hidden’ and change state to normal depending on which answer is chosen. This is what it looks like for the Stormtrooper layer:

To save some time, once I had the first layer working the way I wanted, I duplicated it and then changed the information and adjusted the triggers. A show layer trigger based on the slider position makes each layer show. So as you slide the thumb along, the picture changes to a different character and a question for that character is also shown along with some feedback (and where possible, I used a quote from that character from one of the movies).

You can try the demo yourself by clicking on the image below:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

March 7, 2016
Spinning Around with Storyline 2

A few years ago, before I was working with Articulate Storyline, I saw this cool interaction where you could spin a group of on screen images around in a circle. I later found out that this was referred to as a ‘carousel’.

While I liked the carousel when I first saw it, I haven’t see it around much – the closest I’ve come is where the images scroll from side to side. So I thought I’d try and build a circular carousel in Storyline 2. In my head, the way I saw the interaction working was by using a slider and as you move the slider along the images would rotate in a circle.

I was on the train on my way into work the other day and I started to sketch out my idea on paper. I always like to start this way no matter if it’s for a client project or a simple demo like this was going to be. I find that I can jot down ideas quickly and play with them on paper as I try to arrange and re-arrange my thoughts. So this is how it started:

Then once I have a bit of a clearer idea of where I’m going (it’s never usually finished or fully formed at this point) then I’ll start playing in the tool however I’m still experimenting at this point and I don’t actually know if my idea will work!

To start with I inserted a slider and four coloured rectangles onto a new slide just to get an idea of the layout. To help with the look of the interaction, I made the two rectangles behind the front one slightly smaller and the back one slightly smaller again to give the look of perspective – as the objects move around the carousel they’ll appear to move closer and then further away.

Initially, I thought I’d use a change of state and what would happen is that as you move the slider along, each rectangle would change its state and the new state would be the rectangle in the next position. I started with just two different coloured rectangles (so that I could keep track of which was which). Plus if I started with two and could get it to work, then I could add the other two. It turned out to be a good plan because using states proved to be unsuccessful.

The first two moves worked just fine:

But the next two didn’t:

The problem was that objects on a slide sit at different ‘levels’ depending on where they are in the timeline and in this case the blue rectangle is always going to be above the red one:

So it was back to the drawing board.

This time I thought I’d try it again but using separate layers for each position of the rectangle. That way I could control how the rectangles were arranged as each layer is shown. Thankfully, this way worked much better. Each time the slider moved a position, a different layer would show and because the rectangles are in a new position on each layer it gives the effect that they are moving in a circle:

The next step was to replace the shapes with images and see how it looks. I also decided to add a couple of extra pictures – meaning two extra layers. I wanted to make the front picture stand out so I increased the brightness of the front image and changed the back images to black and white and decreased their brightness. I did this on one image and then used format painter to apply the changes to the other images. I also adjusted the layout and sizing of the images slightly and in the end it turned out like this:

Click the image to view the working demo.

While it isn’t exactly how I envisaged it originally (in my head I wanted the movement from position to position to be much smoother but would be much more complex to create given the objects change size as they move) this method does give a revolving effect and I was happy with the end result. Maybe I could try using motion paths next time…

I reckon the slide could be used for images or videos or even as a different type of menu where you could click on the front image and jump to a topic. You can download the source file from here.

Note: I also want to develop more of a habit of working out loud so I tweeted my progress as I went. It’s the first time I’ve done that as I went along and not just at the end. It’s my habit in progress.

Like this:
Like Loading…

July 19, 2015
Showing My Work #10

Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #52 – Using Interactive Sliders in E-Learning. The brief: This week your challenge is to show creative ways to use sliders in online learning. You can focus your slider on functionality or visual design.

I enjoy watching cooking competition shows on TV like MasterChef and My Kitchen Rules. Often on these programs the contestants are given the same ‘core’ ingredient and they need to create a meal that hightlights this ingredient. In a way, this is similar to the weekly challenges in that you create a demo based on a core theme or Storyline feature.

On the shows there’s always at least one or two people who don’t achieve desired outcome or as they say on TV ‘fail to make the core ingredient shine’. In other words, the core ingredient doesn’t stand out and gets lost among all the other ingredients in the dish. On reflection, this happened to me with this challenge and I’ll show you what I mean.

In this challenge the ‘core ingredient’ were sliders (not the tasty little burgers) a new feature for adding interactivity in Storyline 2:

In an eLearning project, a slider allows learners to reveal information, pictures etc. as the thumb is dragged along the track. When a slider is inserted into a project, you can customise it for your needs via the ‘Slider Tools’ tab:

In the above example, the slider is divided into 10 ‘steps’ which are the number of movements the thumb makes along the track.

I was struggling for an idea for my demo but I happened to see a tweet where a guy called Nick Barclay had recreated movie posters using circles and colour. So I thought that I could do something where movies were represented with colour and as you drag the thumb the colour changed. Then you need to guess the name of the movie.

I came up with four movies and I used state changes to change the colour of a rectangle as you drag the thumb along the track. I added triggers for each step on the slider:

Then, because the demo was about movies I thought it needed to be themed and set in a cinema. So I found an image of a movie screen, resized the rectangle to fit the screen, made the track transparent and changed the thumb to a popcorn image:

Then, because there were four movies it needed a ‘home’ screen to start from. Plus this would allow people to choose the order in which they completed the demo. I added a screen with four movie poster frames and some instructions and each movie branches from the home screen. Here’s how it looks in Storyline:

Each time you go into a ‘theatre’ you come back to the home screen until all four are completed. After each cinema was visited, I used a change of state on each movie poster along with some true/false variables to darken the colour of the poster which indicates that it has been completed.

Then, because I wanted people to enter their guesses for each movie into the demo I needed something that allowed for this, so I used a text entry variable. These are cool because you can type information into one part of a module and it can be used in another part (and this can be done more than once if needed). I jazzed it up so that it fitted in with the overall theme:

Then, if people were typing in their guesses, they needed to see if they were correct so I needed another screen that showed their answer (using the text variable again) compared to the correct response. I came up with the idea that you were playing for ‘free movie tickets’ for each correct response and I found a ticket image and duplicated it four times:

Then, to tie it all together I added some intro and closing screens along with some music to help set the scene!

Can you see what happened?

I started out using sliders but kept adding a little bit more, then a bit more and by the time the demo was finished I had variables, changes of state, branching and some sliders in there too. At the time, I was satisfied with how it had turned out but I didn’t realise how diluted the sliders demo had become until a few days after I finished it and I went back and looked at some other entries. By adding more and more to the demo, I’d lost sight as to what it was supposed to be about in the first place. So while I didn’t really make the slider interaction shine, I did learn a valuable lesson and that is to stay focused on the reason why you’re creating something in the first place.

I still think it’s a good demo but unfortunately it doesn’t really meet the brief and showcase the use of sliders. To see for yourself, click on the below image to view the demo:

Let me know what you think. You can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

March 26, 2015