Creating an animation viewer

Testing and Initializing the Animation

A very simple script to run and test the animations wraps the forever block around the next costume block. Depending on the performance of your Pi, you might need to adjust the timing by adding the wait (1) secs block and adjusting the number of seconds to wait. For example, in a non-Pi instance of Scratch, I find that a 0.01-second delay creates a nice animation. When I'm working on my Pi, no delay is necessary, and when I log in to my Pi session via VNC, the animation is very slow.

If your environment makes the animation too slow to watch, you can modify this project to work with non-animated collections of images. Here, I'll continue to refer to the sprites as animations.

The newly imported sprites are important, but they're going to be in the way as you construct the rest of the project, and you will need them to be hidden at the start. The script that begins with the when <green flag> clicked block in Figure 2 shows the script that initializes the starting position of each of the sprites. Just copy the script to each sprite you've imported. The go to x: (0) y: (0) will position all the sprites on top of each other in the center of the stage.

Figure 2: Initializing the starting position.

Selecting Animations

This won't be an average slideshow in which you start at slide 1 and advance forward and backward. Instead, the user will have some control over the order in which the animations are viewed. To enable that control, you need to add thumbnail navigation to the top of the stage, as seen in Figure  1. The thumbnail images will be created as new sprites, and for that, I'll use another Scratch shortcut.

The thumbnails can be any costume you think represents the animation well. Fortunately, Scratch provides a way to turn any costume into a new sprite. Simply find the costume you like and right-click it. Select the turn into new sprite option to add a new sprite automatically. You'll note that the new sprite has exactly one costume, which is fine. Repeat this process so that each animation has a corresponding sprite to represent its thumbnail.

At this point, you should take time to change the names of your Scratch sprites so you can identify them easily. For example, I renamed one of my sprites running and the corresponding thumbnail is running thumb. The name of the selected sprite is displayed at the top of the middle pane in the Scratch editor. By default, Scratch names new sprites according to the beautifully ambiguous convention of sprite1, sprite2, and so on.

Figure 3 shows the two scripts that will be used for each of the thumbnail sprites. Finding the appropriate size is a relatively easy trial and error process. However, finding the x, y coordinates of the sprite could be a bit more tedious.

Figure 3: Scripts for thumbnails.

To help find the starting coordinates of the thumbnail sprites, you can drag the resized sprite where you want it to display. In this case, it will be above the area where the animation plays. After you position the sprite, look at the go to x:() y:() block in the Motion palette, and you will notice that the block is populated with the current position of the sprite. Drag that block to the initialization script for each of the thumbnail sprites, and then you can fine-tune the values from there.

Remember that Scratch calculates the location based on the center point of the sprite. The slideshow won't move the thumbnails around, but the script will set their position in case they are accidentally moved by the user.

The second stack in Figure 3 starts with the when running thumb clicked block. Its main job is to signal the start of the animation by broadcasting a message.

The set () to () block is using a global (for all sprites) variable named animation playing. When the thumbnail sprite is clicked, it assigns a value of running, which is the name of the animation I want to play. To see how that variable is used, the next step is to play the animation.