Learn. Show. Repeat.

Tag: Storyline 2

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
Looking Closer at Images

E-Learning Heroes Challenge #114 – Interactive Video: Zooming and Magnifying Images in E-Learning. The brief: This week, your challenge is to share a solution to allow learners to zoom in or magnify parts of an image, graphic, document, or video.

This was one of those challenges that I wanted to have a go at because even though Storyline has built-in zooming (which is pretty cool) to make parts of an image larger or to get a close up of a section of a scene, I wanted to try to create a way of making parts of an image larger without using the zoom feature. I had this coffee machine image that I’d used for something else and I thought I could use it again this time to explore the different parts.

I kind of flipped the challenge idea on it’s head because rather than zoom in to look more closely at the parts, why not have the parts become larger so they can be seen along with a description. Because it’s a demo, I didn’t build out the interaction completely but just made a couple of the parts clickable – the control panel and the handle where the coffee goes.

Initially I tried to build all of the interactivity on the slide (base layer) but I ended up needing to use a couple of layers. I created my first layer for the control panel and copied my image and pasted it onto the layer (when you do this, the image is pasted in exactly the same position as it is on the base layer). Then, while still on the layer, I cropped the image so that only the panel section was visible. Next I added a motion path to the cropped image to make it move away from the complete image.

I decided to use a change of state to make the cropped image appear larger, so I created a new state for the control panel:

The great thing about motion paths is that you can add triggers to make other things happen once an object reaches the end of its motion path. In this demo, the image of the panel changes to the large state, the text box description changes state (from hidden to normal) and the whole coffee machine image also changes to a washout state – I added that later – when the motion path animation completes. I repeated this process on the second layer (the coffee handle).

It was a bit of trial and error to get the large versions of the cropped images to appear in the right place but it didn’t take too long to get it right. I also added a trigger to hide each of the layers when the timeline ends. This worked ok for the purpose of the demo but I’d probably add an object for someone to click on to hide the layer if I was going to use this in a project.

Then back on the base layer, I inserted two freeform hotspots that give the user something to click on to show their respective layers:

Interesting fact: Hotspots are 53% transparent!

That’s it, an interaction that makes part of an image larger without using the built in zoom. 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…

January 26, 2016
Looking Back at 2015

Well another year has just about come and gone and at this time of year like many folks who write blogs I like to look back and reflect on the posts I’ve written. Blog writing is a personal thing and everyone has their own style and approach which makes the diversity between writers and topics both interesting and thought-provoking. If I had to sum up where I’m at with my blogging and the style of posts I write in one word, it would be Practicality.

I read a lot of posts and tweets that are critical of eLearning modules (some for good reasons) and I often tell people that an eLearning module is a learning solution it’s not always the learning solution. But it does have a purpose, so instead of constantly bagging it out, my approach is: Why don’t we do something about improving the standard of eLearning?

So that’s why I like to share posts that explain how to do something and allow the reader to take something away and maybe use in their own course development. Sure, at the moment there’s a focus on using the tool which is important but I intend to expand this next year because eLearning is much more than knowing how to use an authoring tool.

I’m learning stuff all the time so why not share the knowledge and put it back into the community so here’s my posts from the year that was, grouped by topic area. Click on a title to view the post.

Storyline 2

These posts are about things I’ve learned about or discovered in Storyline 2:

More than One Way with Storyline 2 – How I updated a slider-based interaction to a button and number variable interaction.

Template Facelift – How I redesigned my ‘Meet the Team’ interaction.

Spinning Around with Storyline 2 – How I created a carousel-style interaction using a slider and layers.

3 Things I’ve Just Discovered in Storyline 2 – I’d just started a new job and my colleagues made me aware of these three handy features.

E-Learning Heroes Challenges

These posts take a behind-the-scenes look at how I created some of my challenge demos. I used to call them ‘Showing My Work #x’ but I didn’t think it was helpful to the reader plus it sounded a bit wanky so I started to give them a catchy name:

Pushing My Buttons – ELH Challenge #89: Creative Button Styles.

100 Not Out – Celebrating 100 ELH Challenges.

Bingo Time! – ELH Challenge #98: E-Learning Bingo Games.

Making Videos Interactive – ELH Challenge #94: Interactive Video.

Showing My Work #11 – ELH Challenge #18: Using Characters in E-Learning.

Showing My Work #10 – ELH Challenge #52: Using Interactive Sliders in E-Learning.

Showing My Work #9 – ELH Challenge #71: Teaching Math Concepts with E-Learning.

Theoretical

These posts delve into the area of information processing and cognitive load which are important areas to know about when creating eLearning:

Designing Effective Multimedia Lessons for Learning – a university essay I wrote about the Cognitive Theory of Multimedia Learning and research-based principles that will improve eLearning design.

The Human Memory System – a university essay I wrote about human cognitive architecture.

Reflective

Sometimes I just reflected and put down my thoughts and ideas. I’d like to do more of this next year:

Half-baked Ideas – a few random thoughts that may become posts of their own in the future.

Looking Behind the Façade – my thoughts on showing your work and working out loud.

Evolution – about how my career has changed for the better.

Practice and Sharing: The Keys to Success – an older post with my two takeaways from LearnX.

Flipped Networking – about how it’s becoming more common meet people online via social media before in person at a conference.

Thanks to everyone who has read or commented or liked or shared something from this site, I really appreciate it. I’d like to wish you all the best for the festive season and for the new year ahead.

Who knows what 2016 will hold…

Like this:
Like Loading…

December 13, 2015
More than One Way with Storyline 2

Sometimes I like to experiment with ideas for eLearning interactions and a few months ago one of these experiments led me to creating this carousel-style interaction (you can click the image to see a demo):

I wrote about it here but essentially it uses a slider to show layers with each image in a different position. I also posted the demo to an E-Learning Heroes Community forum and someone asked if the same effect could be created using buttons instead. The short answer is yes and here’s how I did it.

I started by making a duplicate of the current slider-based interaction as the layers and positions of the images are set up correctly. I deleted the slider and created a couple of buttons (one for left and one for right) using a square shape and an arrow image that I had on file.

Then I needed to figure out a way to make the layers show (creating the spin effect) depending on which arrow was being clicked. I wanted to make the images spin in the same direction as the arrow that was being clicked.

The solution I came up with was to use a number variable. Variables are great because they ‘remember’ information and the same variable can be used many times anywhere in your project. You can then use this information to make things happen. The slider interaction uses a number variable but it’s created when you insert the slider. For this interaction, I created my own number variable.

First, I added my variable via the ‘Manage project variables’ area…

…and called it ‘Count’.

Then I added two triggers (one for each button) the add 1 to Count if you click the right arrow or subtract 1 from Count if you click the left arrow.

Then I needed to do something with the Count information – instead of the layers showing when the slider was in a particular position, they’d now show when the variable Count had a certain value.

Remember, clicking the buttons changed the value and so a different layer would be shown each time.

Because you can’t keep spinning the images around and around, I added some change of state triggers on the arrow buttons that change their state when you go as far as you can in either direction. As a bonus, I also found that by using the buttons instead of the slider, it freed up some space in the middle of the slide that allowed me to add a small amount of text (if required).

Often there’s more than one way of building something in Storyline 2 and this is another example of this as well as the power that variables can bring to your project.

To view the updated interaction click the image below:

You can access the .story file from the Downloads page of this website.

Like this:
Like Loading…

December 6, 2015
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