Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more


In this add-on, you’ll program a fading transition to change scenes in your story.

To start, make a new backdrop that will show between scenes. To do this, click on the stage, then click on the backdrops tab. Click “paint new backdrop” to create your transition message. It’s easier to work with your text or drawing if you use vector mode, so click the “Convert to vector” button.

Next, click the “Text” tool to type your message. This example types “Later that night…” to show that there is a time lapse between the beginning of the story and the next scene. Write a message that fits your story, like “The next day…,” “Two weeks later…,” or “Meanwhile…..” Next, create a transition in which the scene will fade out before the message shows and back in after it.. Click the scripts tab, and drag out a “change effect” block. Click the dropdown to change the effect to “ghost.”

When you click this block, the stage fades and disappears. To reset the stage, click the “clear graphic effects” block in the Looks menu.

To make a slower fading out effect, add a “wait” block to the “change effect” block, and add a “repeat” loop around this block stack. Tinker with the values inside the “change effect” and “wait” blocks to control how quickly the stage fades out.

This example uses 10 in the “change effect” block and 0.1 in the “wait” block.

Test it out. Great. When the block stack is clicked, the stage fades.

Next, make the stage fade back in after the transition message shows, so the next scene can begin. Duplicate the “repeat” loop, and change the value in the “change effect” block to a negative number, like negative 10. When you test this, the stage fades back in.

Program the different backdrops to appear at the right times in your story. The first backdrop will show, then fade out. The transition slide will fade in, then fade out. Finally, the new backdrop or setting will fade in. To make this happen, you could repeat the different “repeat” loop block stacks, but that would make your code really long.

To simplify this, make 2 new blocks - one for a fade out, and the other for a fade in.

Click the More blocks menu, and click “Make a block.”

Name the block something that makes sense for the fade out effect, like “fade out,” then add the new “define” block to the top of the “repeat loop” for the “change ghost effect” with the positive number. Great. Make another block called “fade in,” and place the “define” block at the top of the block stack for the positive “change effect” block.

Drag out a “fade out” block from the “more blocks” menu, and add a “switch backdrop” block from the looks menu. Change the backdrop to the transition message you created.

Next, add a “fade in” block to make the transition slide appear. Add another “fade out” block and a “switch backdrop” block to show the next scene, and finally, another “fade in” block to make the backdrop appear. Test your code.

Feel free to add a “wait” block between the “fade in” and “fade out” blocks to make sure the transition is on the stage long enough for viewers to read it. Prompt your transition effect using “broadcast” and “when I receive” blocks. Click back to your main character sprite, add a “broadcast” message before the sprite changes scenes, and name the message. This example uses “Opening Night.” Then, click back to the stage. Add a “when I receive” block, and change the message to the correct name. Finally, when the flag is clicked, the stage should be on the first scene or backdrop, so drag out a “when flag clicked,” event, and add a “switch backdrop” block to it. Change the dropdown to the backdrop for your story’s first scene.

This is a difficult problem! Keep trying to solve it, and don’t get discouraged if the first few solutions you try don’t work.

Great. You created a transition between the scenes in your story.

Now it’s your turn. Use a “repeat loop”, a “change ghost effect,” and a “wait” block to make a fading in, and fading out effect Make two new blocks to reuse the fade in and fade out code.

Finally, program the different backdrops to appear using the “broadcast”, “when I receive”, “fade out”, “fade in”, and “switch backdrop” blocks.

Scegli un’estensione
Fai scappare il personaggio dalla scena!
Dialogo dinamico
Apri una conversazione tra due personaggi della storia.
Tra le scene
Crea un effetto dissolvenza per cambiare scena!
Deus Ex Machina
Aggiungi un nuovo sprite che risolve il conflitto e conclude la premessa tematica della storia.
Chiudi la storia con un'animazione mozzafiato.
Entrata in scena spettacolare
Inserisci nel progetto un altro sprite.
arrow_backward Indietro
Avanti arrow_forward
  1. Seleziona i moduli che ti interessano!