Science Oxford Logo

CCC - Firecracking Coders

Resources for the 'Firecracking Coders' Creative Computing Club.

During this workshop, you will use Scratch and a BBC micro:bit to make and control and animated fireworks display.

This page recaps what we discussed as a group.

screenshot of the Scratch editor screen with microbit extension

Getting started

To use a BBC micro:bit with Scratch, you need to follow the instructions here.

Open a new Scratch project, your screen should look like this:

screenshot of the Scratch editor screen with microbit extension

If this is your first time using Scratch, try out the official tutorials to learn the basics first, before setting up your micro:bit!


To make our firework program look cool, we need a good backdrop.

Click the Change Backdrop button on the bottom right.

screenshot of the Scratch editor screen, zoomed in on the choose backdrop button

Either choose a built in background, or create your own.

The Scratch cat (or a different character sprite!) is going to watch your fireworks display - decide where they are going to stand, and give them some starting instructions. For example:

screenshot of Scratch code. when green flag clicked; go to x:-181 y:-112

Using a micro:bit

Click the micro:bit extension menu, you are going to try out a few of the blocks to see how they work.

Inputs - control Scratch with your micro:bit

when A button pressed - use this as a Scratch event, instead of clicking the green flag.

Can you get the Scratch cat to do something interesting when you press A on the micro:bit?

screenshot of Scratch code. when A button pressed; glide 1 secs to random position; say Hi for 2 seconds

There are three other micro:bit event blocks, try them out and see what they do!


Outputs - control your micro:bit from Scratch

How could you add the micro:bit's display into your Scratch program?

How will you use this in your Scratch program?

screenshot of Scratch code. when A button pressed; glide 1 secs to random position; say Hi for 2 seconds; display Hi

Creating a firework

Now it's time to combine all of these things to create your firework display.

To make an animated firework, you can create 3 or 4 different costumes for a firework Sprite. By timing when the costumes change, you can make a cool display.

Start by making a new Sprite, and designing your first costume.

screenshot of the Scratch editor screen, zoomed in on the new sprite option

Designing your animation needs trial and error. Combine switch costume blocks and movement blocks to get the effect you want.

Once you have designed your animation, you can 'set off' the firework with your micro:bit!

For example:

screenshot of Scratch code. when A button pressed; display heart; go to x:-210 y:-159; switch costume to costume1; show; glide 1 secs to x:-24 y:-4, switch costume to costume2; wait 0.5 seconds; switch costume to costume3; wait 0.5 seconds; switch costume to costume4; wait 0.5 seconds; switch costume to costume5; wait 0.5 seconds; switch costume to costume6; wait 0.5 seconds; hide

What next?

Get creative and add different features to your display. Some ideas...