Skip to content

Please update your browser

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

arrow_back Drawing and Animating a Lightning Bolt

Choose an Add-On
Lightning Reaction
In this add-on, you’ll program the characters in your story to react when the lightning strikes.
Drawing and Animating a Lightning Bolt
In this add-on, you’ll draw and program a user-controlled lightning bolt that moves from the sky to the ground.
Sun Comes Out
In this add-on, you’ll program a second scene for your rainy day story.
Playing Thunder
In this add-on, you’ll play thunder and rain sounds in your story.
In this add-on, you’ll broadcast an earthquake to really shake up your story.
Code a Rainbow
Draw and program a rainbow to appear in your rainy day story!
  • 1. Introduction to Setting and Randomness
  • 2. Make it Rain
  • 3. Lightning Flash
  • 4. Random Lightning
  • 5. Making Your “Stormy Day” Setting into a Story
  • 6. Add-Ons
  • 7. Reflection
  • 8. Wrap-up: Setting
  • 9. Wrap-up: Share Your Project
  • 10. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward

In this add-on, you’ll draw and program a user-controlled lightning bolt that moves from the sky to the ground. To begin, you’ll need to draw a lightning bolt.

Click “Paint new sprite.” Select “vector mode," as it’s generally easier to edit vector images. Click the paint brush, and choose a color and line width for your lightning. Then, create a lightning bolt! Don’t worry if it isn’t perfect. You can always go back and edit it later.

If you make a mistake while drawing, you can click the “undo” button at the top of the paint editor. Once you’ve created a lightning bolt, program it to move from the sky to the ground. First, program a starting position for the sprite. Drag the lightning bolt to a starting position at the top of the stage, then drag out a “go to” block from the motion menu. The x and y coordinates in the block will match the lightning bolt’s current position. So, if you move the sprite then click the block, the bolt will return to that starting position.

Now, the lightning bolt should glide towards the ground.

Drag the lightning bolt to where you’d like it to glide to.

Then, drag out a “glide for 1 second block,” and attach it below the “go to” block.

Click this block stack to try it. Great! Now the lightning starts at the top of the screen and glides to the bottom. Tinker with the time value in the “glide” block to get the lightning moving at a speed you like.

Click "events," and find an event to run this code. This example will use “when space key pressed,” but you can use any event you’d like for your story. Try it out!

Great, when the space key is pressed, the lightning moves. There are a few things that you can do now to make this look a little more realistic. Consider hiding the lightning after it moves down and showing it immediately after your event. Then, the sprite will hide between strikes.

You might also want to create a second costume for the lightning sprite, so it changes its appearance after it glides to look like it struck the ground.

Now, it’s your turn: 1) Click “paint new sprite.” 2) Paint a lightning bolt.

3) Select a starting position with a “go to” block.

4) Program the sprite to glide to a position. 5) Start your code with an event.

Then: Consider hiding the sprite between strikes and creating a second costume for when the sprite glides to the ground.

  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!