arrow_back GIF for your Glitch

During “The Signal” episode, the characters experience a “glitch” as if they were stuck inside a television program with a poor broadcast signal.

Check it out.

<<sigh>> <<broadcaster reporting: "In other news..."

<<Wait, then why is it affecting -- >> In this video, you will upload a “lost signal” GIF and animate it to make your Gumball story go "off the air" To start, click “Lost Signal GIF” on this page to download the “lost signal” animation.

If you would like to use a different gif file, search for one that is available for free use.

To add the GIF file to your project, select the “upload sprite from file” icon.

Then, select your GIF file from the Downloads folder.

It may take a few seconds for the GIF to upload, and it might not look like the file is uploading until the GIF appears.

Once the GIF uploads, it appears in your Sprites list.

It also displays over your animation.

To resize the GIF so it fits your project, use the “grow” and “shrink” tools.

When you upload a GIF as a sprite, Scratch breaks it up into separate costumes, or frames.

To see what this looks like, click the Costumes tab, and click several costumes.

Next, animate these costumes into a moving image.

To switch costumes, click the “scripts tab,”and select the “looks” menu.

Click the “next costume” block a few times to cycle through the costumes.

Then, drag it out.

Right now, you have to click the block to make the costume change.

To make the costume change repeatedly, drag out a “repeat” block from the “control” menu, and place it around the “next costume” block.

Click the code to test.

Great, it works, but only the first few costumes show.

To make all the costumes show, change the value in the “repeat” block to a larger number.

Click on the “costumes tab,” then scroll to the bottom to see the total number of frames that make up the GIF.

Type that number into the “repeat” block.

Click the code to test.

The code worked, but the program cycles through the different costumes much faster than in the episode.

It’s too fast.

To slow it down, add a pause between costume changes.

From “control,” add a “wait” block under “next costume.”

Click your code to test.

Tinker with the values in the “wait” block to speed up or slow down the animation.

This example uses 0.2.

Test again by clicking the code.

Nice, it works, but the GIF doesn’t start on the first costume.

To set a starting costume, add a “switch costume to” block to the top of your block stack.

Then, select the first costume from the list.

Click it to try it out.

Great!

Next, show the GIF at the right time in your story.

This example programs the GIF animation to appear between scenes.

Choose a sprite to broadcast the glitch.

To “broadcast” means to send a message from one part of a program to another part by telling code to run.

This example uses “Carmen" to send the message.

You will use a “broadcast” block to send a message telling the code to run.

Select “Events.”

Add the “broadcast and wait” block to the spot in your story where you want to start your animation.

The “broadcast and wait” block will run all the code it triggers and wait until moving on to the next block.

In this example, the code will run before the backdrop switches.

Select the dropdown, and name the message “start GIF.”

Now that the message is broadcasted, set up your GIF sprite to receive it.

To start, select the GIF sprite.

Add a “when I receive” block to the top of the block stack.

Be sure the “start GIF” message is selected.

Click the flag to test.

Oh no!

The sprites are hidden behind the GIF.

To fix this, program the GIF to show only when it receives the broadcasted message.

From “Looks,” drag out a “Hide” block, and attach it to the end of the block stack, so the GIF hides after its code runs.

Then, add a “Show” block under the “When I receive” block, so the GIF shows when it receives the broadcasted message.

Next, program the GIF to hide at the beginning of the project.

To do this, drag out a “hide” block from the Looks menu and attach a “when flag clicked” block on top of it.

Click the flag to test again.

Awesome!

It works.

Now it’s your turn ….. Download the “sample” GIF and upload it as a new Sprite Use “Next Costume”, “wait”, and “Repeat” blocks to show the frames from the GIF in sequence.

Use a “Switch Costume to” block to start the GIF from the first frame.

Select a sprite who will trigger the animation, and add a “Broadcast and wait” block to that Sprite’s code.

Add a “When I Receive” block to the GIF sprite.

And finally, add “show”, “hide” and “when flag clicked” blocks to control when the GIF appears.