Creating a Walking GIF for Articulate Storyline using GIMP - Part 1

Hello eLearning Newbie and welcome to my first blog post! As I am still learning and trying to figure out the many capabilities of Articulate Storyline and eLearning in general, I really hope to post more things as time comes and hopefully will be a great way to me to really master the program (and hopefully others can pick up a thing or two from these posts). So let me know what you guys think and would appreciate any feedback. Anyways please enjoy!

Click here to view course

I recently watched a video from the eLearning Locker that was posted a while back (https://www.youtube.com/watch?v=9HIA38oAtT4) and does a splendid job at giving a tutorial on how to create a scrolling background in Articule Storyline and was able to use this as reference for a recent E-Learning hero challenge (Meet the Team and Interactive Org Charts in E-Learning - #244) where I created a sort of side scrolling game where you move a character all the way to the right and meet some of the Universal monsters.

The only part that it didn't cover much in detail was how to create the GIF of the moving character - which I thought was the most engaging part of the demo 😉.

But to fill my curiosity void I've figured out a way to do this and hopefully this helps others who are trying to do the same thing as well!

First off, you will need to download GIMP (which is basically an open source version of Photoshop - download from this link here). This is the software that will allow you to create the actual GIF to import onto Articulate Storyline. I am pretty sure you can do this in Photoshop as mentioned in the video for a guy who needs to work on a budget GIMP is fine (whatever works  😊).

For the actual animation, I created the actual poses for the walking character in PowerPoint. Below are the actual sprite sheets that I've created.

At stand still 

and right walking poses

Left walking poses

Now here comes the tedious part of having to copy each pose into different layers of GIMP 😓

Go to File → New → on the pop up window go to Advanced Options and for the Fill with: option select Transparency so you can work with a transparent background and easily insert the GIF into Storyline so that it can interact more naturally with other content.



Now go to the layers panel to the right of the screen and click on the "Create a Duplicate
Layer" button (the button with the overlapping papers). Now create a layer for whatever number of poses you have for your GIF (I've also labelled each layer as well but you can name and organize however suites your work flow).

Now copy and paste time! Make sure before you paste each pose that you have the correct layer selected (believe me, I've had to get used to this...). Please also note that the GIF animation will play each layer starting from the bottom then going up so make sure to put the starting pose in the bottom layer then working your way up.

Copy and paste each pose onto each layer with the first pose starting at the bottom layer 

Once you paste all the poses on each layer and you make sure that they are in the correct sequence, you will test out the actual GIF animation by going to Filters → Animation → Playback.

A new window will open up where you can adjust the parameters of the animation, but the only thing I really adjust on this window is to play One frame per layer (replace) - this makes the animation play each frame one at a time instead all at once.

If all looks good, go to File → Export As, then update the file extension as .gif







On the pop up, check off As animation → Loop forever → select the delay time between frames to your preference → choose One frame per layer (replace) → check off both Use delay entered above for all frames and Use disposal entered above for all frames  → then select Export.






And voila! The GIF file should come out to what you see below.





















Tune in for Part 2 to see how I utilized this GIF in Storyline. Same bat time, same bat channel ............. sorry - same bat blog 😀