Using Animated GIFs in Digital Resources
Bring your digital resources to a whole new level with animated GIFs!
Using animated GIFs can bring your digital resources to a whole new level! They make the content much more exciting and engaging for students.
Animated GIFs:
Most of the time, GIFs are designed to run on a continuous loop – in other words, the animation repeats over and over indefinitely.
They are generally not difficult to use. They are simply a different type of image file – and you can normally just add them to your resource in the same way that you would with any other image.
Once-off animated GIFs:
Some GIFs are not continuous. I call them Once-off GIFs.
These once-off GIFs can add a whole new dimension to your resources.
For example, you can have a dice that rolls and then lands on a particular number, a spinner that lands on a certain section, or a timer that shows a set amount of time running out. There are so many possibilities!
Using once-off animated GIFs:
Once-off GIFs can be tricky to use if you do not know how to make them work properly. The fact that their animations finish can cause problems if you do not know how to make sure that the animations happen when they are supposed to.
I have spent a lot of time playing around and trying to find ways to overcome obstacles that have arisen while using these GIFs – particularly when creating Boom™ Cards. I wish to save you the time so that you can rather put your time and energy into creating more amazing resources!
In this guide I aim to help you to know how to make these Once-off GIFs work when making Boom Cards.
I will also show you how you can convert GIFs to MP4 videos to insert into Google Slides™ resources etc (some clipartists require this in our Terms of Use).
I have also added a guide to using GIFs to create animated backgrounds that you can secure into the background of resources you create with Google Slides or Microsoft PowerPoint.
You can use the menu below to navigate to all the sections in this guide.
Please note:
All the tips in this guide are based on my own experimentations and observations.
They are solutions that I have figured out that seem to work.
However, I am not basing these tips on any knowledge of the programming of the different platforms.
I do not claim to be an expert on the platforms or to have any control over how they work.
I have simply found ways around obstacles that have presented themselves on these platforms.
Use the animated GIFs in these FREEBIES to try out the tips in this guide:
Using Once-off Animated GIFs in Boom Cards
Images in Boom Cards
The first thing you need to know about using Once-off GIFs in Boom Cards is that every image you upload has its own identity – it automatically gets assigned its own unique number. This is important, because it affects how Once-Off GIFs work in Boom Cards.
Once-off animated GIFs in Boom Cards
If you use each GIF only once in your deck, you’ll be fine. The GIFs will work as you want and expect them to. As soon as the card a particular GIF is on appears, the animation will start, run its course and then finish.
However, if you reuse the same GIF on another card, then Boom sees it as the same image that already finished its animation (Booms recognizes it as an image that has already appeared). The second copy of the image will also be finished with its animation!
Overcoming this problem:
What you can do to overcome this problem is to upload the image again. Even though it is really the same image, Boom doesn’t know that. Remember, each image you upload gets assigned its own unique number. So, the new copy of the GIF will have a different number to the first one. Boom will now see it as a new image – and the animation will start from the beginning.
Any time you wish to reuse the same GIF in your deck, you need to upload a new copy of the image. This way, all the GIFs will be properly animated.
Previewing your deck:
It is important to know that when you are editing your deck and click on “PREVIEW” the page doesn’t reload.
This means that the GIFs that already finished their animations while you were editing the deck will still be finished when you go to preview it. All you need to do to see the animations properly is to reload the page after entering the preview.
This will not be a problem for people using your deck. When they open the deck for the first time, it will be in its fresh state – they will not need to reload the page.
Reusing animated GIFs in multiple decks:
If you plan to use the same Once-off GIFs in multiple decks, I recommend uploading new copies of the GIFs for each deck.
This way you can avoid a problem ever arising where somebody uses two different decks after each other without reloading the page, and the GIFs in the second deck already having been triggered in the first deck.
“PLAY AGAIN”:
When the “Play Again” button is used at the end of a deck, the page doesn’t reload – so the GIFs will not start again.
If the student is using the deck on a browser, this is easily fixed. They simply need to reload the page, and the GIFs will all work properly.
If the student is using the Boom Cards App, it is a little more complicated. It seems that they need to close the App and reopen it to play the deck again. I don’t mean minimize the App – they actually need to close it completely.
I recommend warning any users about this, so that they are prepared and know what to do if necessary.
I use the warning below in my deck descriptions. You are welcome to copy it and use it if you wish.
PLEASE NOTE:
This deck contains Once-off GIFs (GIFs that finish their animations and then remain static).
If you wish to play the deck again after completing it, using the “Play Again” button will not reload the GIFs, so their animations will still be finished.
If you are using a BROWSER, you can simply RELOAD THE PAGE, and the GIFs should work again.
If you are using the BOOM CARDS APP, you need to EXIT COMPLETELY (not just minimize) AND THEN REOPEN THE APP in order to reload the GIFs.
Use the animated GIFs in these FREEBIES to try out the tips in this guide:
Using Once-off Animated GIFs in Boom Cards with Flow Magic
All the tips above still apply when you are using Flow Magic – but you may still have problems, even though you use the tips I have given you. Some GIFs may work properly, while others simply don’t!
It took me a long time to find what seems to cause the problem, but I think I have finally figured it out!
Triggering animated GIFs early
I think the first thing you need to know is that a GIF will be triggered as soon as it appears on the screen – no matter how brief its appearance is.
When you use Flow Magic, any time you jump to a particular card in the deck, the card just before that card (in the direction you are jumping) will flash past very quickly. If there are any Once-off GIFs on the card that flashes past, they will be triggered. Then, when you land on a card that has already flashed past, the GIFs will already be underway, or even finished.
Overcoming this problem:
I figured out two possible ways to overcome this – depending on the structure of your deck.
First, if your deck is designed such that the whole point is for students to be jumping around in the deck constantly, then you need to prevent your GIFs from being triggered prematurely.
You can do this by making sure that any cards with Once-off GIFs are always placed between cards with no Once-off GIFs. These could be cards from your actual deck, or just extra blank cards that will not feature in your deck, but just be there to prevent your GIFs from flashing past. If you put in blank cards, you would not have any cards in the deck linking to them, so students would not actually see them at all – they would be there for the sole purpose of flashing past instead of cards with Once-off GIFs.
The second method will work if you have sections of your deck in which you can place the cards sequentially. For example, if you have a home card linking to different activities. You may be able to have the cards within each activity in the correct order. The only real jumping around that would happen would be to and from the home card. If the first card in the activity directly after the home card has Once-off GIFs, you may need to put in an extra blank card directly after the home card. This way, when you jump back to the home card, the first card of the first activity doesn’t flash past and trigger the GIFs.
Please note:
When you return to a card with a Once-off GIF, the animation will not start again.
So, if you intend for students to return to any particular cards in the deck (such as a home card), you should not put Once-off GIFs on these cards.
Use the animated GIFs in these FREEBIES to try out the tips in this guide:
Converting Animated GIFs to MP4s to use in Google Slides etc.
Using an online file conversion platform
There are a number of different platforms available that you can use to convert GIFs to MP4s. The one I use in my video (Convertio) is simply my preference. You may find a different platform that you prefer. I just like it because it is simple, and you can use it for free if you are only doing a small amount of converting per day.
Using a platform like this is probably the simplest method of converting GIFs to MP4, but it has drawbacks.
Drawbacks of using an online file conversion platform
When you convert a GIF to an MP4, it loses its transparency.
Also, I have found that when the MP4 finishes playing, it jumps back to its thumbnail image.
These things may not be a problem for you, depending on the GIF you are using.
However, there may be times when you need something to be visible behind the GIF, or you may need it to remain static at the end of its animation (if it is a Once-off GIF), and not jump back to the beginning or some frame in the middle of the video.
Using Microsoft PowerPoint:
If the issues described above are a problem for you, I would recommend rather using Microsoft PowerPoint to create your MP4 video.
This way, you can incorporate anything you want into the video, including anything you need to be visible behind the GIF. You can also put in any background you wish and change the slide size to whatever you need.
Also, you can set the length of the video by changing the transition time of the PowerPoint slide. This is useful if you are using a Once-off GIF. This means that you can make sure the GIF remains static at the end of its animation for as long as necessary.
You can test out what the video will look like by viewing the slideshow.
Once you are happy with it, you can simply save it as an MP4 video.
Use the animated GIFs in these FREEBIES to try out the tips in this guide:
Using GIFs to create animated backgrounds for Google Slides or Microsoft PowerPoint
You can view this video to see the tips below visually.
I have discovered that if a GIF is inserted into Google Slides or Microsoft PowerPoint as the background, it cannot be extracted again as a GIF.
For this reason, I have chosen to change my GIF Terms of Use to allow this!
This means that you can use my GIFs in Slides or PowerPoint without needing to change them to MP4s first!
Please note: If you wish to use this method with GIFs from other artists, you need to make sure they allow it in their TOU.
You are welcome to refer them to this guide so that they know what you are asking about and can make their own informed decision.
The condition on which I allow you to do this with my GIFs is that the GIFs must be secured in the background of your slides.
I will teach you now how you can accomplish this task using PowerPoint.
I believe this is possible with Keynote as well, however I will not be including instructions as I have never used Keynote myself. As far as I can tell from Googling, however, it seems that the process should be relatively similar as on PowerPoint.
How to create an animated background using PowerPoint
First, you need to open a new PowerPoint presentation and clear the existing text boxes (unless you will be using them).
Next, design your background in the same way that you would with any printable resource. Insert your images, including any GIFs you may wish to use, and your text etc.
Once you are happy with your background, you are going to save it – as an animated GIF!
There are two ways you can do this.
Method 1
You can simply go to “Save As” and select Animated GIF from the drop-down list of file extension options. However, this method does not give you very much control over the GIF saved.
Method 2
Go to “File” and then “Export”. You will see an option “Create an Animated GIF”. Click on this option and you will be able to customize your GIF to a small degree.
First, you can choose from a few quality options. The default is “Medium”. I recommend changing this to “Extra Large” otherwise the quality of the GIFs you are using in the background will be quite severely degraded.
You can also change the length of time for a slide. The default is 1s. If you are using GIFs that already have animations that last longer than 1s, you will probably want to increase this time.
Once you have made the changes you wish, click “Create GIF”.
Check your animated GIF:
Once you have created your GIF, view it to make sure you are happy with it. You may need to go back and change the time again and resave it until you are happy.
Once you are happy with the GIF, it is time to insert it as the background in you slide show…
Inserting your animated GIF as a background in Microsoft PowerPoint:
If you are using PowerPoint, open a new presentation and delete the text boxes unless you will want to use them.
Now go to the “Design” tab and click on “Format Background”.
Next, select “Picture or texture fill”, click on “Insert” and select “From a File”.
Now navigate to the folder you saved the GIF to, select the GIF and insert it!
The GIF is now secured in the background.
You will find that you are unable to select and move the GIF around.
If you right click on the slide, you will see an option to “Save background”. If you select this option, you will find that, while you can save the background image, you cannot save it as a GIF, so if anybody tried to save the background, it would lose its animation.
Please note: a background GIF will only be animated in PowerPoint in Presentation Mode.
Inserting your animated GIF as a background in Google Slides:
If you are using Slides, open a new presentation and delete the text boxes unless you will want to use them.
Now right click on the slide and select “Change background” from the menu that appears.
Next, select “Choose image” and then “Browse”.
Now navigate to the folder you saved the GIF to, select the GIF and insert it!
(You can also drag the GIF file from your computer and drop it onto this screen if you wish.)
Select “Done”.
The GIF is now secured in the background.
You will find that you are unable to select and move the GIF around.
If you right click on the slide, you will not be able to do anything with the background apart from changing it again. There is no way of copying or saving it.
Once-off animated GIFs:
If you wish to use this method with Once-Off GIFs, it will only work properly in PowerPoint.
Once-off GIFs do not work properly in Slides. You would still need to use the MP4 method for Once-Off GIFs in Slides.
In order to use Once-Off GIFs effectively in a background in PowerPoint, you need to ensure that the GIF doesn’t restart its animation while a student would still be on a particular slide.
To do this, you can simply change the time when you create the GIF. You can make the time as long as you want to a maximum of 16 minutes and 40 seconds. The length of the time you choose will not affect the size of the GIF. The GIF will still loop, but it will remain static for a long time on the last frame before it loops back to the beginning again – and hopefully students would be done with the slide by this time.
Use the animated GIFs in these FREEBIES to try out the tips in this guide:
Microsoft and PowerPoint are trademarks of the Microsoft group of companies.
Boom™ is the trademark of Boom Learning. Used with permission.