Creating Animated Images with Microsoft MakeCode Arcade

Whether you’re looking to liven up your digital holiday cards or add some zest to your slideshow, an animated .gif from Microsoft MakeCode Arcade can be just the thing!

Creating An Animation

To create an animation, you could simply run through your project while recording your screen…or you could make something a little more artistic using the MakeCode Arcade frame-by-frame animation tool.

Just like the old-time flip books, MakeCode Arcade lets you stack a series of images together and play them at your desired speed to get an animation-like effect.

Start by creating a new animation from the Assets tab.

That will take you into the animation editor, which lets you create a series of images.

Those images get sewn together into an animation once you use a block like this in your project:

When I’m creating a project just to save the .gif file, I like to write a program like this:

That way, I can easily control when the animation plays. You’ll see why in the next section.

Saving Your Animation

There are a couple of ways to end up with animated gifs when using MakeCode Arcade. The first is to record your creation using a desktop .gif creator like Screen2Gif or Gifox.

The second is to use the built-in .gif creator that pops up when you share your project. To use that feature, first you need to click on the share button in the upper right hand corner of the screen.

Next, click “Update project thumbnail”.

You’ll be taken to a window where you can select which part of your project you want to record. This is why I run my animation using the (A) button (or space bar)…so that I can trigger the series as soon as I hit record.

All that’s left is to right-click on the resulting .gif image and save it to your computer for future use. Easy peasy!

And here’s the result of that process!

What did you animate? Share your images here, or tag @KIKIvsIT and @MSMakeCode on Twitter.