BBC micro:bit
Making Animations

Introduction

This page contains the executable file and source code for a very basic animation design tool written in Visual Basic. I used Visual Basic 2015 for this project.

The program allows you to design and preview an animation visually. You can generate the MicroPython code to view the animation on the micro:bit. The aim of the project was to make a tool that made it easy to create animations that could be used to add interest to other programs.

Downloads

We're talking Windows only with these.

application.exe - Executable file. Right mouse click on the hyperlink and choose Save Target As.

animation.zip - Visual Basic 2015 source code.

Using The Program

The main program window looks like this,

Animation Program

Frame Tools

The grid of squares in the top left of the window represent the LEDs of the micro:bit matrix. Clicking on them turns them 'on' or 'off' indivudally. Click with the right mouse buttons for options that can be applied to rows and columns of LEDs.

One picture in an animation is called a frame. The tools for editing a frame are directly beneath the grid. The buttons in this first strip have the following functions,

Animation Program

  1. Move all of the pixels of the image up one row.
  2. Move all of the pixels of the image down one row.
  3. Move all of the pixels of the image left one column.
  4. Move all of the pixels of the image right one column.
  5. Invert all pixels - turn the on pixels off and the off pixels on.
  6. Clear the frame.

Timeline Tools

The large rectangular list box that shows Frame 0 when you start the program is the timeline of the animation. This is a list of the frames in the order in which they are shown. You get a live preview of each frame. The currently selected frame is shown on the grid of pixels. The buttons to the right of the application window, allow you to make changes to the timeline of the animation as a whole.

Animation Program

  1. Insert a new blank frame before the currently selected frame.
  2. Create a copy of the current selected frame.
  3. Move the selected frame up one spot in the timeline.
  4. Move the selected frame down one spot in the timeline.
  5. Delete the selected frame (permanent - no undo).
  6. Delete all frames (permanent - no undo).

Export & Preview Tools

The last set of buttons, at the bottom left of the application window, have the following functions,

Animation Program

  1. Open an animation file (that has previously been saved using this program).
  2. Save an animation file.
  3. Generate the MicroPython code for the animation.
  4. Preview the animation.
  5. Set the delay for the animation that will be used for previewing and code generation.

Generated Code

When you have finished your animation, click on the code button to generate the MicroPython code for the animation. The code will pop up in a window like this.

Animation Program

Click on the copy button. Paste the code into your editor (the online MicroPython editor or Mu) and then download or flash the program to the micro:bit.

This is an example of a program generated from an animation created in the application.

from microbit import *

imgs = [
    Image('00000:00000:00000:00000:00000:'),
    Image('90000:00000:00000:00000:00000:'),
    Image('00000:00000:00000:00000:00000:'),
    Image('90000:00000:00000:00000:00000:'),
    Image('00000:00000:00000:00000:00000:'),
    Image('90000:00000:00000:00000:00000:'),
    Image('99000:00000:00000:00000:00000:'),
    Image('99900:00000:00000:00000:00000:'),
    Image('99990:00000:00000:00000:00000:'),
    Image('99999:00000:00000:00000:00000:'),
    Image('99999:00009:00000:00000:00000:'),
    Image('99999:00009:00009:00000:00000:'),
    Image('99999:00009:00009:00009:00000:'),
    Image('99999:00009:00009:00009:00009:'),
    Image('99999:00009:00009:00009:00099:'),
    Image('99999:00009:00009:00009:00999:'),
    Image('99999:00009:00009:00009:09999:'),
    Image('99999:00009:00009:00009:99999:'),
    Image('99999:00009:00009:90009:99999:'),
    Image('99999:00009:90009:90009:99999:'),
    Image('99999:90009:90009:90009:99999:'),
    Image('99999:99009:90009:90009:99999:'),
    Image('99999:99909:90009:90009:99999:'),
    Image('99999:99999:90009:90009:99999:'),
    Image('99999:99999:90099:90009:99999:'),
    Image('99999:99999:90099:90099:99999:'),
    Image('99999:99999:90099:90999:99999:'),
    Image('99999:99999:90099:99999:99999:'),
    Image('99999:99999:99099:99999:99999:'),
    Image('99999:99999:99999:99999:99999:'),
    Image('00000:00000:00000:00000:00000:'),
    Image('99999:99999:99999:99999:99999:'),
    Image('00000:00000:00000:00000:00000:')
]
display.show(imgs, delay=100, loop=True)