Moving Pictures

I managed to kill 2 birds with one stone today and built a quick little demo that both demonstrates some motion paths in SL2 (which I wanted to do on the blog this week) and completes this week’s ELH Challenge!

This week’s challenge was to create create some pictograms for a specific industry or topic.  I am about to embark on a project that will have lots of images of kids, so that was my inspiration.


Creating the characters

All of these characters and their accessories were created in SL2 using the built in shapes.  I think the components are pretty easy to see, but feel free to download and dissect the file if you are unsure about how a shape was created.

Adding motion paths

Each character or their object moves when the character clicked. Here’s how each motion was created (from left to right):

2014-10-08_15-57-05Character 1 – The truck zooms away from the boy on one click, and then back to him on the next. Each motion is it’s own motion path. The first path is freeform, the second is a simple line. I changed the state of the truck image so that it would “point” in the direction it was moving. In order to trigger the correct motion path on a click, I used a T/F variable. It is toggled each time a motion path completes.

Character 2 – The doll moves between the arms of the girl. This was accomplished just like with character 1, but arc motion paths were used for both directions.

Character 3 – Her arm moves along a small circle path each time you click.


Character 4 – The ball is thrown up in the air… then falls back down to his hand. This is 2 connected motions, each a simple line. The trick is that I used a relative start point for the second path so it would be one smooth motion. (Relative start points were also used for characters 1 & 2).

Character 5 – Her books opens and glasses appear. This is just a simple state change!

The new motion paths in SL2 really open up a world of possibilities – this is just scratching the surface. If you are unsure where to start, you can check out this blog post by Mike Enders or some of these videos from Arlyn Asch. There is also a great practice activity in the community tutorials.

Most of all, have fun!

Slider Encore

Somehow, magically, I was ahead of the game last week.

Not long after I published my Sliding Along with Storyline 2 post, David posted that this week’s ELH Challenge would be to create something using the new sliders feature! Imagine my surprise and delight when my post was featured on the challenge page.

I could have taken this as a free pass for the week – and almost did! – but decided instead to have a little more fun.

So, here is yet another slider demo for you to play around with.


This demo uses four different sliders.  3 of them just change the states for elements on the screen (main walls, accent wall, and floor). The fourth slider is the one I love. Take a look:

Do you spot that fourth slider? Yep, it’s the wall! Here’s a look at it partially down:


And if you pull the thumb on the slider all the way down:


How’d I do it?  Easy!

This is actually a built in slider, nothing fancy. I just made it REALLY big. Most of the built in thumbs have texture, but there is one that doesn’t (though it does have that funny little shadow that shows up as a white line).

If you’d like to see more “behind the scenes” on this project, please feel free to download the source file and have at it. (I also sneak in a use of the motion paths feature, which I’ll talk about next week!)

Be sure to check out the other fabulous entries from this week’s challenge. There is some great inspiration in there!

Have a slider-iffic day!

Welcome to My (Flat) World

This week’s eLearning Heroes Challenge was to create a flat office or desktop theme based on your own work space. I love the visual design challenges so I jumped into to this one wholeheartedly!

What is flat design?

For the visual design newbies out there, flat design is a style that focuses on making images look simple, rather than realistic.  It’s 2D rather than 3D with minimal shadows and shading and is very clean and modern. It is also really easy to create flat images using just some basic shapes!

My inspiration

photoHere is a picture of my work space.  It’s cluttered (though not as cluttered as it was yesterday!).
Because of that, I decided to use it as inspiration rather than create an exact replica.  I actually tried making a close replica at first and boy was it
terrible.  Perhaps this means I need to simplify my office set up?

Well, that’s a question for another day.

My design

I ended up cutting out some of the desk shelving and moving the cork boards over to that area instead. I also cut out all the stacks of papers and magazines and flies as well as 4 of my 5 pencil cups.  I don’t know why I have so many pencil cups but I’m sure it is someone else’s fault.

2014-09-16_11-43-53I decided to keep my most fun element, a panda shaped pencil sharpener and mini shredder (you turn its tail to make either action happen), along with my yellow walls. I also added in my cat on top of the printer as that is her favorite napping spot when I’m in the office.

Adding some interactivity

In theory, this would be used as a setting for an interaction.  I think it would be a little crowded to use as a simple background. So I went ahead and added some interactive elements into it. You can drag the pencil to the panda to sharpen it, view “videos” by clicking on the webcam or first monitor, read an excerpt from one of the books, or view documents in the inbox, on the cork board, and from the printer.

Click on the image above to check it out and let me know what you think!  You can also download the source file to use or pick apart at your leisure.

Postscript: While my office has a PC desktop setup, I actually created this on my brand new Macbook Pro while sitting on the sofa in my living room… Just another person prodding Articulate for a native Mac version of Storyline. (Yes, I have put in a feature request!)

A Challenging Challenge

If you stopped by my home page today you might have noticed something new – a video!  I created it as part of this week’s eLearning Heroes Challenge. I have to say, I was really nervous about this one. I like creating eLearning precisely because I am not front and center!  Plus I don’t have a great webcam or a nice looking space in which to record.

But I told David I would participate in this challenge so I couldn’t very well back out. Plus, I think this challenge was really about embracing low-end solutions to create a quality product. And you know what?  I think I did just that.

Just in case you also want to incorporate some webcam video into your website or trainings, here’s a quick recap of my tools and process. Be sure to click over to the home page or read till the end to check out the finished product.


The webcam I have on my desktop computer is a Logitech HD webcam. I have previously only used it for Skype but found that it had a pretty good video and audio quality for this project.

Recording studio

My super professional set up was, well, not so super professional.

photo 1     photo 4

I think part of what made this challenge interesting was the point that webcam video can be of decent quality and is a lot easier to incorporate than using more professional video tools. So, I moved a few things from the back of my office (I keep my bike there and didn’t want that in the shot) and amped up the lighting by adjusting my monitor brightness and turning on a lamp I don’t normally use.  I also had to close my window blinds as the glare from the window was extremely bright. And voila!  Instant recording studio.


I decided to give Articulate Replay a shot for this challenge.  It came free with my Storyline license but I had yet to open it up and try it out. While the editing capabilities are pretty limited, it was an easy way to add lower thirds and switch between different variations of webcam, screen share, and picture in picture formats.


First, I wrote a script.  Ok, actually first I tried a shot without a script. Then I realized that was a horrible mistake and immediately wrote a script.  So if you’re trying this out – write a script first. While I was writing the script, I also created a short PowerPoint presentation that I could use as some B roll footage.

I did a couple of short takes of the first few sentences, adjusting my lighting and webcam settings in between, until I found a set up that worked.

Then I did two or three takes with everything in place, just of me talking straight to the camera. (Along with my surprise guest!)

Then I recorded a screen share of my PowerPoint.  I decided to record these separately because I had a hard time remembering what I wanted to say while also operating the PowerPoint. I must be getting old. Luckily Replay makes this easy and it didn’t really matter when it came time for editing!2014-09-12_10-20-34


This was the easiest part!  Replay was a cinch. I just chose where I wanted to start and end each take, where to start my screen share, and where to put my transitions.  In addition I added a lower thirds caption to the beginning and the end which took about 30 seconds. The reason editing is so easy is that I just listed all of the editing possibilities in Replay.  It can’t do a lot but it makes simple video editing so easy my Grandma could do it.

And that’s it!

Meet the Storytellers – Free Template

The Articulate challenge this week was to create an interactive org chart. Since I am writing a series on storytelling with several guest bloggers, I created a “Meet the Storytellers” interaction.


It’s a fairly simple interaction with one little frill – when you click on a person to view more, the information slides in, and then slides out when you are done.  Also, the person’s image stays in front of the sliding information the entire time.  Click the image below to try it out.


This effect can be accomplished pretty easily using slide layers.  Below is a quick explanation, then a download of a template you can use to create a similar interaction.

  1. Create the layers that will appear for each option – these are your entrance layers.
  2. Give the objects in this layer the appropriate entrance animations.
  3. Duplicate these layers – the duplicates become your exit layers.
  4. Give the objects in the exit layers the appropriate exit animations and delete the entrance animations.
  5. Create an exit button on each entrance layer that navigates to the corresponding exit layer when clicked.
  6. Shorten the timeline for the exit layers to .75 seconds.
  7. Trigger the exit layers to hide when the timeline ends.

That’s it!

If you want an image, like the faces in this example, to stay in front of the information that slides in and out, just copy the image to each applicable slide layer and make sure it has no associated entrance or exit animations on those layers.

You can download the template by clicking on the image below.

2014-07-24_12-35-57Use the comment box to let me know if this template is helpful or if you have any questions on how to personalize it.

Creating Training On the Go

This week’s Articulate challenge was to create a training video using a mobile device.

I decided to make things a little harder for myself than they needed to be and did two very silly, but fun things:

  1. Make a video on origami
  2. Film, edit, post (and write this blog post! Don’t worry I’ll fix weird formatting tomorrow.) all from my tiny little iPhone

Set up

I used my floor, an ottoman, some Harry Potter books, and a cool little gadget meant to hold your phone upright. Oh and a pen.

A couple of different iterations of these items made for various camera angles. Since this was all done with my phone, I couldn’t take a picture of my phone in the set up. But, it was placed on the blue and white stand each time. (Edit: the 4th picture below I took with my iPad and added now that I am back at my desk.  The phone just sticks to the blue mat!)

20140717-222651-80811791.jpg   20140717-222652-80812145.jpg


20140717-222652-80812503.jpg    camera set up


I filmed this in my office which has a great window with natural light. That was it! It did create a few weird shadows but I hate fooling with lighting so didn’t care enough to fix that.

My helper

My cat, Roux, decided she wanted to help. Rather than shutting her out of the room or doing a bunch of takes, I just incorporated her into the video. Besides, cats are necessary for any video on the internet, right?

Speaking of takes, I only had a little video I wasn’t able to use on the first try due to me making folds in the wrong place.

Here are some cute pictures of Roux:

20140717-225626-82586501.jpg   20140717-225626-82586838.jpg

Editing & posting

I used iMovie to edit my clips and add titles since it’s what I had already installed on my phone. It wasn’t too tough to pick up since I had used the desktop version before. In fact, I managed to do most of the editing while sitting on the metro on my way to meet some friends for happy hour. iMovie even includes some free background music, which is much more pleasant to listen to than paper being folded.

Once everything was ready, I just uploaded it to YouTube straight from the iMovie app. Easier than folding an origami box!

So, check it out! My totally mobile-made how-to video.



A few editorial notes on this post, now that I am back at my desktop computer and tweaking the formatting.

I think this challenge really shows how easily and inexpensively smartphones and tablets can be used to create video for training.  In fact, several years ago when I was at the Girl Scouts, we created a short training video using a smartphone and posted it to YouTube.  It was quick, easy, and effective.  This won’t be the most high quality video, but sometimes that just doesn’t matter as long as there is ample lighting and a good script.

If I weren’t doing the editing on the go, I would have used voice over instead of captions for the directions.  I think that watching the folds is important and having to read the captions takes away from this.  It would also allow for slightly more detailed directions.