Creating an animation viewer

One of my favorite introductory Scratch projects is the basic slideshow, because it allows the programmer to incorporate personal images immediately and provides some exposure to fundamental concepts, such as design and synchronization.

The project covered in this article will build a variation of the slideshow by creating a viewer to watch animations. In the process, I'll demonstrate some shortcuts and tips that help you create sprites, import animated GIFs, and navigate a scene-based slideshow.

Importing Animations

This slideshow will use a couple of scenes from Max Fleischer's 1922 animation, Bubbles. The files in my project are available from The Public Domain Review [1]. From this website, you can right-click and save each of the animations to your Pi so they can be imported into Scratch.

To begin, open a new Scratch project and import a sprite using the choose new sprite from file icon located between the stage and the sprite list. Use the New Sprite dialog box to browse for and select the animation you downloaded. If you have other animations, feel free to use them instead.

After the sprite is added to the sprite list, click on it, and then click on the Costumes tab in the center pane. There, select the Import button and then reselect the animation you downloaded. Depending on the number of frames in your GIF and the performance of your Pi, this import may a take a few extra seconds to complete.

When the frames of the animated GIFs are imported, they will all be listed in the Costumes tab. You can delete the first costume in the list, because it will be a duplicate of costume number two. As you've seen, importing the animated GIF as a sprite only adds the first frame to the costume, which is why you need to import the file as a costume.

Resizing Images in Scratch

In Figure 1, you will see a preview of what my slideshow viewer looks like. I'd like to draw your attention the size of the images. It happens that the animated GIFs I'm importing are not as big as the Scratch stage, so they're imported at actual size. If the imported image is bigger than the Scratch stage, then Scratch will automatically resize the image to fit the stage, which is 480x360 pixels.

Figure 1: Slideshow preview.

Images also can be resized in a third-party image editor, such as GIMP, before importing, or they can be resized via Scratch's Paint Editor or through the change size by () and set size to () blocks. Finding the right size for the images in your project takes a little experimentation to match your design style and needs.