Learn. Show. Repeat.

Tag: E-Learning Heroes

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
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
100 Not Out
In life, if someone reaches their 100th birthday it’s significant achievement. In cricket, to score 100 runs and still be batting is also a significant achievement. So when David Anderson announced the E-Learning Heroes Challenge #100, another significant milestone had been reached.

The challenges started back in 2013 and from a modest beginning, with just a few people sharing their demos, the number of people participating has grown significantly over time (to date over 2,300 demos have been shared). When I first came across them, I must admit that I thought they were a bit silly. They weren’t whole courses and while the examples were good, there was no way that many of the designs shared would be appropriate in my workplace. Plus, I was busy and didn’t really have the time anyway.

So I dismissed them without even trying to complete one myself.

In 2014, David and Tom Kuhlmann presented at a workshop in Sydney and they kept talking about practicing in order to develop your skills and that these challenges were a good way to do that. So I thought I’d give it a try (Visual Storytelling with Photo Collages #27 was my first challenge) and I realised that I was missing the point and I soon discovered how the challenges can be beneficial to you and your career. After all, if you want to be great at something you need to make the time to practice no matter how busy you are.

To celebrate 100 challenges, here are 100 reasons to give them a go:
1. There’s a new one every week
2. Participation isn’t compulsory
3. Be inspired by other designers
4. You can always complete older challenges
5. Gives you a chance to practice
6. Connect with other community members
7. Demos only need to be a slide or two
8. Showcase your skills
9. Work free of the usual constraints
10. You can suggest ideas for future challenges
11. Develops your creativity
12. Builds community
13. Helps you run faster*
14. Helps make you more visible in the eLearning space
15. They’re fun!
16. You can use PowerPoint to create your demo
17. Helps to build your portfolio
18. Get ideas from others
19. Learn new skills
20. Experiment with new ideas
21. Cures baldness*
22. Spend as much time developing a demo as you want
23. Break old design habits
24. Develops resourcefulness
25. There’s no right or wrong way
26. Give something back to the community
27. You get to promote yourself
28. Makes world peace possible*
29. You can see how you’ve improved over time
30. Develop friendships
31. See how others interpret the same brief
32. Try out new techniques
33. You’re in control of the whole demo
34. Helps you to lose weight*
35. They can still be a work in progress
36. There’s heaps of topics to choose from
37. It’s free professional development
38. You can make others happy
39. Opens your mind to new possibilities
40. Improves your IQ*
41. There’s a recap each week of all entries submitted
42. They only focus on a small part of a course
43. You can test yourself against yourself
44. Develops a show your work habit
45. Proves that eLearning doesn’t have to be boring
*Individual results may vary.

Ok, I could only get to 45, so please help me get to 100 by adding to the list via the comments below.

A big thanks to David for starting the challenges, growing them into what they’ve become and for positively supporting everyone who submits a demo. Well done also to everyone who has been brave enough to share their work in public as many more have benefitted from you doing this and from seeing just how many talented folks work in this field.

To see a list of all the challenges, click here.

Image source: Shutterstock

Like this:
Like Loading…
September 27, 2015