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 draw a sun, then program it to appear in your story.

To start, click the “paint new sprite” button.

Click the "i," or information, button on the sprite, and rename it “sun.”

Scratch has two image modes.

New sprites start in bitmap mode, but vector images are easier to edit, so click the “convert to vector” button at the bottom of the stage.

In vector mode, the editing tools are on the right side of the window.

Next, create the center of the sun drawing.

Click the ellipse tool, then select a border color.

This example uses white. Then, click and drag to draw an ellipse.

To create a circle, hold the shift key while dragging.

To redraw the shape, click the undo button, or select the shape then press the delete key on your keyboard, and try again.

Next, color the ellipse.

Select the fill tool and a color for the sun.

The gradient options may look nice for the center of the sun.

You can flip the gradient by clicking the color selector next to the palette.

Add some sun beams to make the sun look like it's shining.

Click the rectangle tool, and select the solid color option.

Draw a rectangle above the circle.

To make the beams look like they’re radiating out of the sun, reshape them.

Click the reshape tool and the rectangle.

Then, drag the points closest to the sun a little closer together.

Awesome, now that you have one beam, you can copy it to reuse over and over.

To do this, select the duplicate tool.

Click the shape, and drag the copy to a new position.

Rotate and move the shape until it fits around the sun in a way you like.

Repeat this until the sun has beams all the way around it.

The drawing process might be challenging at first, but remember that you can always use the undo button, and delete shapes to retry.

Making mistakes is an important part of the learning process.

Next, program the sun to go to the back of your animation, and to slowly appear.

Click looks and drag out a “go back layers” block.

The sun should be layered behind the other sprites, so set the value of this block to a large number, and click to run it.

This example uses a value of 10.

Click and drag to move it.

Program the sun to slowly appear using the ghost effect.

Find the “set effect” block, and change the value to “ghost.”

Click to run it.

The ghost effect is set to 0, so it doesn’t change the appearance of the sun.

Change the value to 100, and click to run it.

A ghost effect of 100 is completely transparent.

To make the sprite slowly appear, start with a ghost effect of 100, and gradually decrease the value until it reaches 0.

Drag out the “set ghost effect to 100” block.

To make the effect decrease so the sun gradually becomes visible, drag out a “change effect by” block, and select ghost.

The ghost effect will start at 100 and decrease repeatedly by one until it reaches 0, so change the value to -1.

To repeat this, add a “repeat” block.

To make the “repeat” block decrease the ghost effect until it reaches 0, change its value to 100.

Click to run the code. Great!

The sun slowly appears!

Finally, decide when to run this code.

Click the events menu. This example makes the sun appear when the flag is clicked, but you can choose any event you’d like.

Now, it’s your turn: Create a new sprite, and click “switch to vector mode.”

Use the ellipse, fill, rectangle, reshape, and duplicate tools to create a sun.

Program the sun to appear using “go back,” “set effect,” “repeat” and “change effect” blocks.

Erweiterung auswählen
Klangeffekte hinzufügen
Eure Geschichte durch Klangeffekte ergänzen
Sonnenstrahlen hinzufügen
Eine Sonne zeichnen und animieren
Das Boot sinken lassen
Ein sinkendes Boot in der Geschichte programmieren
arrow_backward Zurück
Weiter arrow_forward