Skip to content

Please update your browser

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

Choose an Add-On
play_circle_filled
Sea Sounds
Add sound effects to your story.
arrow_forward
play_circle_filled
Sun Ray Animation
Draw and animate a sun sprite.
arrow_forward
play_circle_filled
Sink the Ship
Program a sinking ship in your story.
arrow_forward
play_circle_filled
Second Scene
Program a Second Scene for your Story.
arrow_forward
play_circle_filled
Clouds
Draw and program clouds that move.
arrow_forward
play_circle_filled
Gamify
Program one or more sprites to move when keys on the keyboard are pressed.
arrow_forward
  • 1. High Seas Introduction
  • 2. Create a Scratch Account and Sign In
  • 3. Animate a Wave
  • 4. Smooth Wave
  • 5. Tell a Story
  • 6. Add-Ons
  • 7. Wrap-up: Adventure on the High Seas
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

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.

Instructions
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!