Adding Video to Scratch

I love the power and simplicity of Scratch, but there seems to be one glaring area that it doesn’t support – video. Now some of my students may remember that it is possible to import an animated GIF if you can find one on the internet that suits your needs, but what if you want to record a video and then upload it into Scratch? How can we do that? Well the answer is:

Ok, the answer requires more than just a website, but essentially you can…

Edit and convert any video into an animated GIF then upload it into Scratch

Step 1 – Record your video

I assuming you have a device that can do this – they’re everywhere these days. Phones, tablets, watches, computers – most tech devices seem to have a camera that can record video. Each device will record using slightly different video formats, but EZGIF can work with most of them. In my example, I use my computer to record a Scratch Junior animation playing on my laptop screen. You also need to know where the video file is stored and the filename – sometimes they get weird filenames like MVI_0912.MP4 so you may have to preview them to make sure you have the right video.

Step 2 – Navigate to EZGIF.com

This should be the easy step. I added a link above on the EZGIF logo which goes directly to the video to GIF page. If you go to the home page of the site you will notice lots of options along the top. We are using the ‘Video to GIF’ option.

The EZGIF home page with all the options. We are describing the use of the ‘Video to GIF’ on this page.

Step 3 – Edit your Video

Now the secret to a great animated GIF is to make the transition between the end and the start of the video as smooth as possible. Animated GIFs automatically repeat when they are published on most platforms so if the start and end frames look very similar it will look really slick.

The ‘Video to GIF’ option has many tools to edit and convert your video

In my example I’m using the ‘Crop video’ tool to shorten my video.

I’m cropping my video so it’s about 10 seconds long – the original is nearly 16 seconds.

Once you set the start and end time of the video you click the ‘Cut video!’ button and wait …

Don’t forget to download your cut video by clicking ‘save’

You can preview the result and once you are happy with it click the ‘save’ button and it will download to your computer. The filename will probably be ‘ezgif.com-video-cutter.mp4’ or something like that.

Step 4 – Convert to GIF

Now that you have the edited video downloaded onto your computer you can use the ‘Video to GIF’ option to convert it into an animated GIF.

In this example, I’m uploading the video I downloaded after editing the longer video that I uploaded earlier… (phew)

There are a few options to experiment with but the most important is the ‘Frame Rate’. This affects the quality of the animation or how smooth it will be. Each frame is a still picture in your video. When the frames are displayed very quickly one after the other the pictures blur together to make it look fluid. This is how all video works. The ‘frame rate’ is the number of frames that are displayed every second. EZGIF places limits on the animated GIFs it creates so the higher the FPS the shorter your animation will be.

For simple cartoon like videos a lower frame rate will be fine. More complex videos should use a higher FPS.
You can ‘optimize the GIF’ to reduce the file size, but it may also reduce the quality of the animation.

When you click ‘save’ it will download to your computer with the name ‘ezgif.com-video-to-gif.gif’. Now we can upload it into Scratch.

Step 5 – Upload into Scratch

Because my example is 11.5 seconds long with a frame rate of 10 – there should be a total of about 115 frames. Each frame will be separate costume in Scratch. It does seem a bit weird to upload a video of Scratch Junior into Scratch, but this is just an example.

Select the Upload Sprite option in your project
Depending on the size of the GIF this could take a while…
Ok, my estimate was a bit out, but 102 costumes is still a lot. Pro tip: do not try to edit each costume if you have lots (duh)
Position your sprite in the preview area and use the size box to adjust to your liking

Ok, so now we have our sprite positioned and sized, but why doesn’t it animate when I click the green flag? Well, you didn’t program it to do that yet…

The basic code to animate would look a bit like this.

Now for some more maths… Remember my FPS for this example was 10. So if my GIF shows 10 frames per second that means I need to display 10 costumes each second. Which means I need to wait … seconds between costume. Well, you don’t have to – you could make it faster or slower – or maybe you only want to show costumes 1 – 50. It’s all up to you now.

0 Comments

Submit a Comment

Your email address will not be published.