Creating and Adding Animated Gifs to Google Slides

This is an excerpt from one of the chapters in my book entitled Interactive Stories with Google Slides. The book uses the concept of creating interactive stories to teach students a variety of skills in Google Slides. Using Screencastify to add audio to slides is just one of those skills you will learn in this book.

An animated gif is a series of still images with slight movements from one to the next. Each image is called a frame in the animation. These images are played one right after the other to create an animation. There is a free app from the Chrome web store that we will use to create animated gifs.

AniCompanion Animation

Go to the Chrome web store by clicking the Web Store icon in the Chromebook Apps Launcher or in the Chrome browser Apps launcher. You can also go to the Chrome Web Store by typing https://chrome.google.com/webstore in the browser address bar.

Enter a search for “animation” in the search box.

 

The application we need will be found in the Apps section. This will be near the bottom of the search results page. The application is titled “Animation Companion Online”.

 

Click the “add to chrome” button.

 

The Animation Companion is an application so it will be placed in the applications launcher. The launcher should open to display the installed app. Click the application.

 

Click the OK button to dismiss the information box.

 

Notice that applications are not added to the Chrome extensions bar. This is because the application does not really on the Chrome browser for all of its functions.

Animated Wolf Gif

Before we begin our animation we will need to download a copy of the wolf image to the computer. Images used in the animation program need to be uploaded from a computer. Go back to the Google Slide and search for the image of the wolf using the “Insert Image” button. Click on the image to display the image link. Click the link to be taken to the image location on the Internet.

 

Most image links will take us to the image location and display the image. That is not so for this image. This image is located on Pixabay and the reference to the image isn’t direct. The link will take us to the page where we can find the image. Scroll down the page to find the image. Click the image to display the full-size version.

 

The image will open on a page of its own.

 

Pixabay provides a link so we can download the image. Click the “Free Download” button.

 

The download menu lists three different size options for the PNG image and one download option for the SVG version. PNG stands for Portable Network Graphics. This is a high-quality image format and is used to create JPEG quality images with transparent backgrounds. Most images on the Internet are in the JPEG format but an increasing number of images are available in the PNG format.

The image of the wolf has a transparent background. This makes it ideal because we don’t have to worry about a background color interfering with the way the image looks on our slide. This is one of the reasons I chose clipart instead of photos.

SVG stands for Scalable Vector Graphics and with the right software, it allows us to resize the image without losing image quality. Google Slides does not currently support this image format.

Use the selected size option for the image and click the download button.

 

A Captcha form will appear with a text prompt. Type the text displayed on the images and click the download button.

 

Return to the animation application to create the animation. Click the “Create new animation” button.

 

An animation canvas will be created and opened.

 

We need to upload our image so it can be placed on the canvas. Click the “add image” link at the bottom of the canvas page.

 

Click the “load from file” button.

 

Select the wolf image we downloaded earlier.

 

The image will be uploaded and placed on a list so we can add it to the canvas. Click the image to add it to the canvas as a layer.

 

The image will be placed in the top layer of the canvas. Click the “Done” button.

 

The image is very large and overlaps the canvas. The current canvas size is set to 500 by 500-pixels. We will keep this canvas size and resize the image to fit.

 

Click the image to get the resize handles. Use these handles to make the image smaller.

 

Resize the wolf so he fits within the 500 by 500 pixel borders. Make sure the image is large but not as large as the box. Leave some space between the top of the image and the box.

 

Animated Gifs are several images shown in sequence. Each image is slightly different. In the next few steps, we will be adding images to our animation and moving the wolf slightly so he appears to be jumping up and down in the animation.

There are several buttons below the animation timeline. The first three tools allow us to add, duplicate and delete images. Each image in our animation is called a frame. Click the button to duplicate the selected frame.

 

We will get an identical copy of the first frame. Click the duplicate button again.

 

Click once on the second frame and click the two circles that appear before the words “in between”. These two circles represent the “onion skin” option.

 

The onion skin option makes the image of the wolf slightly transparent. It also makes the image visible beneath the image in the next frame. Click the third frame in the animation timeline.

 

Click the image of the wolf in this frame and move it up slightly.

 

The image will look slightly blurry. This is because the onion skinned image from the previous frame is appearing below the image of the wolf in this frame. The onion skinned image is there as a reference image. We can use the image from the previous frame to help position the image in the current frame.

 

Move the image of the wolf in the current frame up slightly. Don’t move the image up too much. The goal is to make small movements from one frame to the next. This will give us a smoother animation.

 

Click the Duplicate button to make a copy of the third frame.

 

Click the third frame and click the onion skin button for the frame. Click the fourth frame.

 

Move the image of the wolf in the frame up a little. Use the onion skinned image of the third frame as a reference. We can see that the onion skinned image of the second frame is still visible. Each onion skinned image can help us visualize the animation. Each frame that has the onion skin applied appears in a light gray color in the animation timeline.

 

Click the second frame and click the onion skin button. This removes the onion skin option from the frame. Return to the fourth frame.

 

On the animation canvas, we can see that the onion skinned image from the second frame isn’t visible. Repeat the process of duplicating the last frame in the timeline and moving it slightly. Add and remove onion skins to help orient your animation frames.

 

Add enough frames so the wolf image moves toward the top of the frame but does not go outside the frame.

 

There is an animation preview panel in the lower right corner of the page. Click the play button to see the animation. The square below the play button stops the animation. Go back to individual frames to adjust the image if needed.

 

Click the animation title at the top of the page and provide a name for the animation.

 

Click the back arrow to exit the animation canvas.

 

We need to download the animation so it can be inserted into our slide. Click the selection box for the animation.

 

Click the “export animation” button at the top of the application.

 

Click the Export button.

 

Erase the default name and provide a name for the animated gif file.

 

Click the OK button to confirm the file name.

 

Click the export button again to begin the download process. The animated gif image will download automatically.

 

Return to the Google slide and click “Insert” in the menu to add an image to the slide. Use the Upload option.

 

Drop the animated image we created onto the upload box or click the “choose image” button to select the image from your computer. Downloads are usually saved in the download folder on your computer.

 

The animated gif will be placed on the slide and we will see the animation.

 

Reduce the animated gif size so it matches the size of the image on stage.

 

Click Insert in the menu and select animation while the animated gif is selected.

 

Select the option to fly in from the right after the previous animation. Set the speed to medium.

 

Click the animation for the non-animated static image of the wolf.

 

Change the animation options so the image “Appears” after the previous animation. Change the speed to fast.

 

Click and drag the animation for the animated gif and place it ahead of the other animations. The animated gif will move onto the stage followed by the static image of the wolf and then by the text bubble.

 

Click the play button to preview the animation. Everything works fine but the animated image is still bouncing on the stage. We need to remove the animated gif once it has completed its entrance onto the stage.

Click the animated gif and select Insert animation from the menu. Instruct the animation to disappear after previous and change the speed to fast.

 

The Gif will animate onto the stage, disappear and be followed by the static image. The text box will then appear. Click the Present button for the slide to see a full preview.

 

The images used in this animation came from Pixabay but there are several other sites out there that provide similar images. Each site has its own way for you to download the image. Download options are usually provided on these free image sharing sites.

Posted in Google Slides.