Learn. Show. Repeat.

Category: Storyline

Template Facelift

A few months ago I created a demo for ELH Challenge #18 which was called ‘Using Characters in eLearning’ (you can see a recap here). For this one I did a ‘meet the team’ style interaction that was based on something I’d seen a few years ago. The idea is that you have some people and some questions and you pick a person and a question you’d like to ask them, then their response is shown. You can try the demo by clicking on this image:

I was happy with it originally and it works fine but I’ve felt for a while that the design could be improved because the screen is quite full and there’s not a lot of flexibility in the layout. What I mean is, say I wanted to add another person to ask a question of, I’d need to make the other four people smaller or totally move things around to fit it all in. Also, the response area is quite large and the person giving the answer is shown twice which is unnecessary. So I set about playing with some ideas as to how I could overcome these problems.

For the people on the slide, I wanted to be able to have as many or as few as needed. I figured that using one image that had a number of states (which would be images of different people) would be a good way to achieve this. I just had to make sure each image of a person was placed in a similar position and was about the same size (there was some trial and error getting that right):

Next I needed to work out a way of moving through the people. I thought of using buttons – one to go forward through the people and another to go back but then the whole interaction would be clicking. So then I thought a slider might be worth a shot. I inserted a slider, kept the design simple and added change of state triggers e.g. change the state of ‘Person’ to state ‘Person 2’ when the slider moves and equals 1 (and so on for the others states). I tried it out and it worked great. So I now could have two people or 20 and they all fit in the same space on-screen.

Now for the questions. I left the number of questions to three as I reckon that you wouldn’t need any more than three (you’d probably use less). In the original, the space for the question was just a rectangle with a glow to indicate when it’s selected. It looked more like a button, so this time I used a caption and changed the selected state to a black solid fill:

Tip: I created a button set with my questions which only allows one question to be selected at a time. Doing this creates a selected state so I could then change this state to what I described above.

As in the original demo, the responses by each person to each question are placed on layers. But this time it was a combination of one question being selected and the slider being in one of 6 positions:

I repeated this trigger for all the combinations, the ‘copy and paste trigger’ buttons came in very handy!

The space where the responses are shown is still a good size and I made use of this space on the slide (base layer) by using it to hold the instructions which aren’t visible when each layer is showing:

For the responses themselves, I again used a caption-style shape (it’s actually a combination of a rounded rectangular caption and a triangle) and because I placed this near to the image of the person I didn’t need to show the person twice on-screen.

The last thing I did was to apply some colour coding to each person and layer so that there was a visual indication as to which answer belongs to which person:

Tip: You could use videos on the layers of the person giving the answers or add audio if you didn’t want to use text responses.

If you’d like to see a published version of the updated interaction, click on the image below:

If you like to download the source file and use it yourself, just click here.

Overall, I’m happy with the improvements and I was able to try a few things and experiment. The new version is more customisable too. But best of all, going back to something I’d already created meant that I didn’t have to start from scratch. I could apply some things that I’ve learned since the original was created and I learned a few new things while working on the update allowing me to continue building skills.

This template is one of a few that I have on my new Downloads page.

Like this:
Like Loading…

November 23, 2015
Pushing My Buttons
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 #89 – Creative Button Styles and Effects. The brief: This week, your challenge is to have fun with buttons! 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.

In this challenge from a few months ago, we had to design some buttons. I came a little late to the party with this challenge and lots of great ideas had already been shared so I thought I’d try something a little different. I was on the train on my way back to Newcastle from Sydney so, with some time to kill I played around with some ideas. The brief was straightforward, our buttons had to have at least three states:
- Normal (how it appears on-screen)
- Hover (how it looks when you hover your mouse over)
- Selected (how it looks when it’s been clicked or pressed)
As usual I sketched my initial ideas on paper:

I had an idea (from the imaged used in the challenge that week) that maybe the buttons could react to each other based on what was happening at the time i.e. being hovered over and being selected. The illustrated characters in Storyline have in-built expressions and I thought that I could use these for the different states for each character.

So I opened up my laptop and began to experiment with my ideas in Storyline 2.

The design itself is pretty simple – a plain background, a headshot of my three characters (to do this I inserted each character and cropped them) and a rounded rectangle shape with a light fill and a thick border.

In Storyline, ‘states’ allow you to the alter the appearance of an object – think the Incredible Hulk is the angry state of Dr Bruce Banner – and by default when you insert an object onto a slide in Storyline, how it looks is called its ‘normal’ state. So for my buttons, the normal state has each character with a neutral expression:

Note: I couldn’t group the character and the rounded rectangle shape together because grouped objects don’t have a state.

For my hover state, I changed the expression of my character to ‘thinking’ like it’s getting ready to be chosen. I also thought it would be fun to have the other two buttons react because the mouse wasn’t hovering over them, so I created a state where they have a ‘worried’ expression on their face and they also look towards the button being hovered. To cater for the different combinations, my first guy would need to look to the right, my middle guy would need to look left and right and my third guy would need to look towards the left. So I created a left and/or right state for my characters.
Because I added the in-built hover state to each character, no trigger was needed. But I needed to add triggers to the characters for their left/right states when one of the other characters was being hovered over. Here’s an example:

I also thought I’d like to change the colour of the border when the mouse is hovering over the character. I couldn’t use the in-built hover state here because I didn’t want the state to change when I hovered over the shape so I created a state for it called ‘roll over’ and added another trigger:

All I had left to do was the selected state and unexpectedly, this took this longest to figure out. The way I wanted the buttons to work was that once a button was selected, it stopped reacting with the other ones. I created a selected state where the character looked happy because he’d been chosen. It worked in that it changed state (to looking happy) but it also continued to react when it was hovered over or one of the other buttons was hovered over.

I tried adding disabled state with a happy expression on my character but that didn’t work.

I tried using a button set on the characters and that didn’t work either.

Finally I tried adding a layer with a new rounded rectangle (with a green frame) and a copy of my character with a happy expression and success! The only thing I had to then do go into the slide layer properties and untick the ‘Hide other slide layers box’.

Whilst I probably won’t ever use buttons like this in a project, this was yet another example of how participating in a weekly challenge can help build your skills in using Storyline. All up this demo was pretty much done on the two and a half hour trip home (it was probably closer to 90 mins). You can see it for yourself by clicking on the image below to launch the demo:

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

Like this:
Like Loading…
October 18, 2015
Bingo Time!

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 #98 – E-Learning Buzzword Bingo Games. The brief: This week your challenge is to create an e-learning buzzword bingo card or interaction.

My first idea for this challenge was to create a bingo card using the most overused words in learning, for example engagement or thought leader or wearable technology. But then I had another idea, instead of using words you might hear at a conference why not pictures of people you might see at a conference (so strictly speaking I did deviate from the brief a little with this one).

As DevLearn is coming up soon I figured that would give me a good list of folks who I could include and as it turned out, they’d be the ones whose sessions I would like to attend if I was going to the conference. The idea is that you mark them off if you see their session or see them around during the conference.

The first thing I did was make a list of people to include on my bingo ‘card’ and then locate an image of each. I inserted my first image into PowerPoint and used the cropping tool to make the image as close to a square as I could. Then as I wanted a round picture of each person I was able to use the ‘Crop to a Shape’ feature and select a circle:

Once I had my circle image, a quick right-click ‘Save as Picture’ and I was done. I then repeated this process for each image.

Next I jumped into Storyline and inserted a background image of stars in the night sky (from Shutterstock) because these folks were some of the stars of DevLearn! I placed each image on the slide and because it’s a game, I wanted to allocate points for each person you see. To do this, I used the ‘states’ area and I created a second state for my first image:

I used the disabled state (because then it could only be selected once) and I just darkened the image and placed a text box on it with their name and points value. Then when I was finished, I clicked ‘Done Editing States’. To save some time, I used ‘Format Painter’ to copy the formatting from my first picture to all my other pictures and all I needed to do was change the name of each person on their disabled state.

I then added a trigger to my first image to change the state to disabled when clicked:

Again, to save time I copy and pasted this trigger onto each image:

In order to keep score, I needed a number variable which I created and called ‘Points’ and then I added a trigger to add points to the variable:

I was also able to copy and paste this trigger onto all my other images saving me some more time. Finally I added a reference to this variable in the bottom left corner %Points% that changes each time an image is pressed.

The only thing left was to make something happen when all of the people were chosen so I simply added a layer with the following trigger:

As the challenges are a good place to practice using Storyline, I also thought I’d try something that I haven’t done before which was to add an image as a background to the published HTML output (behind the Storyline project). I reused the stars image and this tutorial from David Anderson explains how to do it.

All up the demo took less than two hours hours to put together. You can see it for yourself by clicking on the image below to launch the demo:

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

Like this:
Like Loading…

September 20, 2015
Making Videos Interactive

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 #94 – Interactive Video: Visual Interviews in Online Training. The brief: This week your challenge is to create an interactive video interview.

Every so often David Anderson posts a weekly challenge that I know I want to participate in (even if it’s not in the current week) and this was one of those challenges. I haven’t done a whole lot with shooting my own videos (apart from the Smartphone Video challenge) so I wanted to have a go and complete this one at some point. I noticed that for some reason, there weren’t as many entries for this challenge and I wondered if folks thought that it would take too long or that they didn’t have the right equipment. My demo was put together fairly quickly (using myself as the victim, I mean subject, also saved some time) and my equipment was not high tech. While the result was a simple looking entry it still does the job and here’s how I did it.

On a recent plane trip for work, I mapped out my ideas on paper (as I usually like to do):

I didn’t want to create anything too big or too complex, so my idea was to use four questions and I would be in the centre of the screen with the questions around me. When you click on a question, the video answer would play. I also had an idea to add an ‘introduction’ clip which give some instruction as to what to do – so I’d need five clips altogether.

Over the past few weeks, I seen David and other Community members who had used video make them look more interesting by placing a cover over the video so that it didn’t have the standard rectangular video on a slide look. I really liked the idea and I wanted to try to do something similar. Here’s the slide with the video sitting on it:

and the same slide after the cover is put on:

I used PowerPoint to create my cover and the first thing I did was to set up my PPT slide in the same aspect ratio as my Storyline project (4:3). Then I inserted a rectangle the same size as the slide and then inserted a circle shape (with no fill) and positioned it in the centre of the rectangle. Then by selecting both shapes, I was able to use PowerPoint’s ‘Merge Shapes’ feature and ‘Combine’ to create a rectangle with a circular hole in the middle.

I filled the shape with my chosen blue colour and saved it as a picture that I was able to then insert into my Storyline project. I now had a cover!

In Storyline, the video intro sits on the slide itself (also known as the base layer) and each of the video answers sit on their own layer, so I also put my cover image on each layer too so that the demo would look the same as each layer is shown. I kept my questions simple and in keeping with the circle theme, I added four circles with a question in each. The triggers would be a simple ‘Show Layer’ when a question was clicked.

Now the framework of the demo was set and all I needed to do was record the video introduction along with the answers to each question. I don’t have a proper video camera or equipment, so I used Storyline’s ‘Record Webcam’ from the insert video options and recorded each of my answers using my laptop. As you can see my set up was very basic:

Yes, that’s our spare room which has all our clean washing that we need to put away (everyone has a room like that don’t they?) and my laptop is sitting on the clothes dryer to get the right height but you can’t tell from the clips although the sound quality could be better.

It took a few takes to get my eyes looking straight ahead and for me not to make a mistake with my answers, so it probably took about half an hour all up to record.

As I was putting the demo together, I had an idea that instead of separate video clips, I could include a GIF image of myself that would create the effect of me waiting for the next question. For this it sliced a five second clip of myself from one of my questions and went to a website called http://makeagif.com/ where I uploaded the clip and it created a looping GIF image for me that I could add into my demo.

Unfortunately this idea didn’t turn out as good as I would have liked for a couple of reasons, one was that the quality of the GIF wasn’t the same as the clips so it looked different and secondly I really needed to start and end each clip with the same pose and expression, which I tried to do but it didn’t quite work.

Because of this extra clip, I needed to add an extra layer to my project and the triggers became show the ‘GIF Layer’ after the introduction and then for each layer, it was show the ‘GIF Layer’ when the media completes (i.e. after each video on the layer had finished). So essentially the demo jumps from an answer layer to the GIF layer.

When I placed my videos on the slide and each layer, all I had to do was make sure the cover sat in from to the video file and adjust the position of the video so that my face is roughly in the middle of the circle.

After some testing and adding some animations I was ready to go. All up it took about four hours to put together and while it’s a simple demo, I think it works but you can see for yourself by clicking on the image below to launch the demo:

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

Like this:
Like Loading…

August 25, 2015
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