Jay 4 Ed Tech: Creating Stop Motion Animation w/ Google Slides

Google Slides has many great uses other than just for presentations. It can be used to create newsletters, for simple web pages, as a HyperDoc, etc. One use that I've found incredibly fun and useful is to create stop motion animation videos.

Stop motion animation is the technique of taking a still image and then manipulating the objects ever so slightly until it has an animated feel and look to it. It can be done with three dimensional objects like Legos or or paper. It is also often done with clay in the creation of claymation. With Google Slides the still images are replaced with slides that are put together to give the animated feel of stop motion animation. Here's how:
(NOTE: If you're already familiar with advanced image searching and finding backgrounds, you can skip to the Begin the Animation Process section.

Create Your Background

A majority of your time will be creating the first slide. This is where you will choose your background, characters, and objects that will be used in your animation. Start with a blank slide. Then find a background that you want to use. Whether it's under the sea, in space, at the beach, etc. you will want to find a larger image that will look clear and not pixelated. If you go to a Google Image Search you can select the size of the image to help with that.

Copy the URL to your image either by right clicking or clicking View Image and copying the URL.

Then go to your blank slide in Google Slides. Select Background and then next to Image click on Choose...

Select the tab By URL and then paste your image URL in the box. Click Select. Your background image will be saved as a background for all of your slides and won't be interfered with when you add and move other objects.

Your background is now set!

Choose Your Objects and Characters

When finding images for your characters or other objects that will be manipulated for your animation, you will want to make sure that you get images that don't have a white square around them or some other background. In other words you'll want objects with a transparent background.

Most of these would not make for good objects in a stop motion due to their backgrounds.

Here is the trick when doing this: Select images that are PNG files. This won't be 100%, but it will help with finding the right objects. You can do this by going to Settings and Advanced Search. Then go down to the second from the bottom item which is file type. Select PNG files and then click Advanced Search. You will now see only the images that are a PNG file type.

(NOTE: you can also have students select the usage rights to help reinforce proper digital citizenship although this can sometimes limit your results a lot. You can always just have students give an attribution of where they found the image.)

They key to look for is the white and gray checkered background (like in the image below. This indicates that what is around the object is transparent.

You will now insert your characters and object into your slides by clicking the Image icon and going to By URL or going to Insert>>>Image>>By URL. Go ahead and paste the URL of your image and click Insert.

You will notice that you don't see the white square or any other background around your image. This is important for making your stop motion look more realistic. You can click and drag on the corners to change the size of the images. Use the corners to keep the proper ratio and to avoid the image looking too skinny or fat.

Repeat this process until you have all of your objects and characters that you're going to use. You can store objects and characters that will come into the scene later on in the grey margins on the side of the slide. They won't be seen until they come onto the slide.

Begin the Animation Process

This part can be a bit tedious. Essentially you are going to continue to copy the previous slide and then move your characters or objects ever so slightly. Then repeat. Here are a few tips and tricks for making your stop motion animation:

Tips & Tricks for Animation

Use Ctrl + D This keyboard shortcut is to duplicate the previous slide. You will be doing this a lot.

Preview- You can preview what you've done so far and gauge whether or not you're moving your objects too far or too little by going into Presentation mode. Just go to the first slide and click "Present". Then just tap the space bar quickly to see it move.

Master Slides- If you have more than just your background image that you want to always keep in the background (in other words another object that is part of your scene that you won't be moving) you can add it by putting it on the Master Slides. To do this, go to View>>>Master. Then insert your image (you could put your background in there too).

Animation Tricks- You can add more of an animated feel by doing some little things to make it more realistic. One is making objects bigger or smaller to show

Moving towards/away from "camera". Have your objects get slightly larger as they move to look like they are coming towards you or vice versa to go away. Also, use the little blue circle on the top to rotate an object if you want

Text- When you finish and your video is playing, each slide will be one frame of your animation. This means that each slide will only be up for about 1/10 to 1/5 of a second. Note this if you are putting any text onto your slide. Depending on how much text you're including and how fast it's moving, you'll want to include it on 10-20 slides or so.

Number of Slides- One question I often get from students is "How many slides should I do?". Well, that all depends on how long you want it. If you're making an animation on the water cycle, it will probably be somewhere around 75-100 slides. If you're telling a story, it could be 200-1000 slides. Just think that each slide is about a tenth to two tenths of a second. That means 100 slides could only be a 10 second animation.

Publishing Your Animation

Once you've created all of your slides and are ready to finish up your stop motion animation you will first need to publish it to the web. This is where the true magic happens. First go to File>>>Publish to the web... This will open a window that has a few options.

In the window that comes up you have a few options. First, you can change how quickly the slides automatically advance. The lowest is every second which wouldn't make for a very good animation. That's OK, we'll fix that in a second (no pun intended). Next, you can check the box so that you're animation begins as soon as the page loads. Last, you can have your animation loop by checking the second box. If for any reason you don't want it to automatically load or loop, feel free to leave either or both boxes unchecked.

Go ahead and click Publish and then click OK to verify that you want this presentation published to the web. Once you do you will be given a URL that you can copy. Open a new tab and past the URL. You'll notice that at the end of the URL is delayms=1000". The "ms" stands for miliseconds. This is the hack. We will simply change that number from 1000 (every second) to somewhere between 100-200. You can play with that number and decide what's best for yours.

NOTE: You will want students to copy that URL when they've changed it BEFORE hitting enter. You don't want them submitting the URL with the 1000 because it will be very slow. You also don't want them to copy the URL AFTER they've hit enter because each slide then has it's own unique URL and it won't play the entire animation.

You may want to collect your animations from your class by using Google Classroom, a Google Form, Padlet, etc. Padlet or a shared Google Sheet are nice because then you can open them for the students to be able to see each others. Remind them to share the URL not with "1000" at the end. Also not once the animation has started playing.

I'd also love if you tweet them out using the hashtag #SlidesStopMotion and/or tag me @MrSorensen805.

An extension you can do to take it to the next level is to have students record a screencast over the animation. This allows them to record their voices and add music over their animation.