Creating an animation viewer

Playing the Animation

The script that begins with the when I receive() block in Figure 2 showing the script that receives the broadcast message when the user clicks on the thumbnail. The first thing the script does is select the first costume in the sprite, because this is the first frame in the imported animated GIF. Next, the script shows the sprite because it's hidden at startup; then the go to front block brings the sprite to the forefront.

The use of the go to front block let's me eliminate some additional programming that would normally be accomplished by explicitly hiding and showing the sprites. In this case, however, the user's selection always brings the sprite to the front so it's visible  – effectively hiding the other sprites. This works if your sprites are the same size. The

forever if ((animation playing)=(running))

control block runs the animation with the next costume block and an optional pause between frames.

The conditional control in the forever if block is important because it ensures this animation only plays when the user selects it. If the user selects the blow bubbles animation, the "running" animation will stop playing because the value assigned to the animation playing variable will no longer be equal to running.

As my examples illustrate, everything is named in a standard way, so I can easily associate the animation sprites, thumbnail sprites, broadcast messages, and variable values. After you have one animation successfully playing by clicking on the thumbnail, you can copy the scripts in Figures 2 and 3 to the remaining animation/thumbnail sprite combinations, changing the names as appropriate.

User Instructions

Figure 4 shows the initialized state of the project with a simple set of instructions. A convenient way to add instructions is to add a new background for the stage using the Paint Editor. Figure 5 shows the script assigned to the stage.

Figure 4: Initialized state of the project.

Figure 5: Script assigned to the stage.

Here, you can set a starting value of 0 for the animation playing variable to set a starting state. By checking to see when the animation playing variable is not equal to its initial value of 0, the stage determines when an animation is played (based on the user's click). When an animation plays, then, you want to hide the instructions by displaying a different background called White, which describes its color.

Note that the stage is not using a go to front block as I used for the sprites. That's because the backgrounds on the stage cannot be layered, and there is no go to front block available for the stage. The stage is always the back layer and there is only one stage.