Blog Post

Articles
3 MIN READ

How to Make Animated GIFs for Your Rise 360 Courses Using Storyline 360

AllisonLaMotte's avatar
7 years ago

Animated GIFs have made a big comeback in the past few years. Chances are most of you have come across them in your personal life; but in case you haven’t, an animated GIF is an image file that acts like a short video that loops endlessly. Most people use them much like they do emojis, to express emotions via text message or social media. But have you ever thought of using them in your e-learning? They’re super eye-catching, which makes them a great way to capture and hold your learners’ attention.

Better yet, GIFs are super-easy to incorporate into your Rise 360 courses! Anywhere you can insert images in Rise 360 you can insert animated GIFs and it just works.

But if you don’t have a motion designer on hand, you may be wondering how you can create your own GIFs without a lot of time and effort. Good news! With Storyline 360, making your own animated GIFs is easy. All you have to do is follow these four simple steps.

1. Create an Animation in Storyline

Any animation that you create in Storyline can be converted to a GIF. But before you GIF-ify all your animations, think about whether it makes sense. Would turning this animation into a GIF help engage learners or distract them? Would it help them better understand the material or simply serve as visual bling? It’s important that the GIFs support your learning objectives, not take away from them.

For the purposes of this tutorial, I made a simple animation of a watering can pouring water onto a plant that could be used in a course on gardening.

To create this example I inserted some Content Library illustrations, added motion paths to the water droplets, and timed the arrival of the objects on my timeline.

For more information on how to insert motion paths and work with the timeline, check out these articles:

2. Publish Your Project to Video

Once your animation is complete, select the Video tab from the Publish window and click Publish.

Note that, by default, Storyline will publish your entire project to video. If you only want to publish a single scene or slide, simply click on the Entire Project link and select the scene or slide in question in the pop-up window.

3. Convert to GIF

Finally, upload your video to one of the many free online video-to-GIF converters. The one I’ve been using lately is called EZGif.

On EZGif, you simply upload your video, select the frames you want to include, and click Convert to GIF!

From there you can download your GIF and use it however you’d like!

And you’re done! It’s as easy as that.

More Resources

Now that you know how to create your own animated GIFs, you may be wondering how to use them in meaningful ways in your e-learning courses. Well, you’re in luck! There’s an article for that: 5 Ways to Use Animated GIFs in Your E-Learning.

Strapped for time? We’ve got you. Here are a bunch of beautiful GIFs you can download for free:

And if you’re looking for other visual design tricks to help catch and keep your learners’ attention, check out these articles:

Want to try making GIFs in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.

Published 7 years ago
Version 1.0
    • FelixFranke's avatar
      FelixFranke
      Community Member
      Hi Taryn,
      yes you can use them. I have played with it before, it works almost the same as with Rise. What you can NOT do is publish to video in SL3, just saw that. So you need to generate your video in a different way.
      I played with external videos, and I found that the created GIF was a lot bigger in file size than a short video snippet, so I included the video instead. With clipart-like animation as demonstrated, GIF probably makes more sense because GIF is a picture format especially made for pictures with a reduced colour palette.
    • MattBell-4fce0c's avatar
      MattBell-4fce0c
      Community Member
      Yes you should be able to use a GIF in storyline 3. just import it in as an image.

      At first I was questioning why you would need a GIF in your storyline file, but I can see this as particularly helpful if you need a repeating image. I have only really used them in RISE.
  • Thank you for this post.

    Our gif flashes a black box a moment before the loop starts again. Very harsh on the eyes. Any thoughts appreciated. Happy to share the mp4 too.
    Thanks again ...
    • NicoleRalph-117's avatar
      NicoleRalph-117
      Community Member
      Please ignore as we were able to fix. Using video editor removed black area and beginning and end of mp4 piece. Thanks again
  • MichaelMarks's avatar
    MichaelMarks
    Community Member
    I'm thinking I should be able to do this with SL3, HOW ABOUT A BUTTON please on export!!
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Michael!
      I'm sorry you're frustrated that there's no publish to video option in Storyline 3. If you haven't yet, I'd encourage you to take Articulate 360 for a spin! You can try it for free for 60 days: https://articulate.com/360/trial
      • MichaelMarks's avatar
        MichaelMarks
        Community Member
        Why shouldn't it be in a update for Storyline 3?  Are Storyline 3 users being left in the dust and forced to shell out more funds for development needs? This is BS to Storyline 3 users!!!  (I hope search engines snatch that comment!) I'm not the only one that's frustrated with Articulate Storyline! Please spare me with the.... Please take a look at this other software what has one extra button, it's gonna cost'ya again... tho you can do that with a update with ease. Your not listing to the users still!  
  • Hi All, I've used this process before and it worked great as a small image in Rise. I am just trying it again with a simple character animation that I create in SL, then published, and converted to gif. Sadly now when I add this to Rise as a full-width image, it's blurry. I'm guessing it might have something to do with the dimensions before and/or after I convert/save it. Any tips on using these as full-width images in RIse?
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Mary,
      If it's blurry, it's likely because the image is being stretched. I would try updating the Story size to something that more closely matches the size you want in Rise 360 so the image isn't stretched.

      For example, if you're using a full-width image, try using a larger 16:9 Story size.

      I hope that helps!
  • SheviYuval1's avatar
    SheviYuval1
    Community Member
    Is there a way to stop the gif after the animation runs once? TNX
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Shevi,
      If it's a true GIF that you've inserted in Storyline, then I don't think so. If it's an animation you've created in Storyline to behave like a GIF, then yes you should be able to set that up with some triggers.
    • NicoleRalph-117's avatar
      NicoleRalph-117
      Community Member
      Hi Shevi,
      I note if you create a GIF in PhotoShop there is a check box to select forever loop or play once.
      HTH Nicole
  • I have this same question. I can add it as an interaction where you have to click "play", but how do you get it on the course so that it just pops up automatically and animates, without someone clicking on an arrow first?
  • HollyHook's avatar
    HollyHook
    Community Member
    I have a GIF created from Camtasia, but am having an issue figuring out HOW to embed it into a Rise360 lesson?
    • RebeccaCalnin-f's avatar
      RebeccaCalnin-f
      Community Member
      If you are able to save the GIF as an "animated GIF" file, it should go into any image with that file and show correctly.
      Rebecca Calnin pronouns: she / her / hers Training Officer - Senior, Division of Early Care and Education dcf.wisconsin.gov | p:608.720.0637 | [Twitter] [Facebook]
      [DCF Logo A Rectangle One Line close]
      • HollyHook's avatar
        HollyHook
        Community Member
        Thanks Rebecca. I was choosing a video option instead of an image. I got it to work once I chose an image!