Importing animated GIFs

Is there an easier way to load all the costumes of an animated GIF in a Snap project I already created? I know direct import for animated GIFs doesn't work, so I tried different strategies:

  • importing the animated gif in Scratch and convert the project to Snap via Snapinator: it works, but when I import the project in my already existing project the converted project completely replaces the project I'm working on. This implies either 1) I should have all animated GIF sprites ready in advance, before starting coding, something that doesn't make this strategy very useful or 2) I must export all the sprites of the current project, one by one, and then import all of them in a new project where I opened the animated GIF converted to a Snap project via Snapinator. This can be VERY time consuming, as my projects have on average 80-100 sprites.
  • importing the animated gif in Scratch, then export the sprite. Unfortunately Scratch sprites cannot be converted via @djdolphin's Snapinator
  • importing the animated GIF in Scratch, save the project, open the project in BYOB then export the sprite. Unfortunately Snap cannot import BYOB sprites
  • create a Snap module: I couldn't find instructions on how to do that

Any suggestion is welcome :slight_smile:

Import it in Scratch, convert with Snapinator, open the resulting project, export the sprite that has the costumes, then import that into your other project.

I'm working on it :slight_smile:

Didn't I really think of these steps...? :flushed:

Thanks @bh :slight_smile:

I would convert the GIF to a folder of image files - I Googled this and there are lots of tools and online sites for doing so.

You can select all the image files and drag and drop them in one go into Snap!

I never tried this because I didn't trust the final order of the costumes. Would they keep the alphabetical order?

(Kaito here)
they keep the order in which you drag them into the costumes. So, the file on the top will be the first costume, then the second file will be the second costume and so on.
I hope that helps.

you can import the gif into scratch, export the sprite, and instead of using snapinator, change the .sprite3 extension to .zip, and then go into the zipped folder. There's all the costumes, but the names are not correct, so...

This is, a very rough, project to import animated GIF as sprite costumes https://snap.berkeley.edu/snap/snap.html#present:Username=dardoro&ProjectName=GIFImport
"GIFImport..."
Drop animated GIF
"Get frames" buttons
Frames of the GIF become the value of the "frames" global variable
Sprite costumes are created

I imported this gif
UnshelledKoopaGreenL
and got
frame1
fram2

(the first image is frame 1 and the second is frame 2)

This is so cool! I made a test importing this animated GIF. Maybe it is too large as when I drop it on the drop area it covers almost the whole screen and the "Get frames" buttons cannot be clicked.

I moved buttons to the top to not autoscale images and preserve resolution.

Chrome.86@Win10 works as expected for this image.

Try using Pen.I always do that (maybe because I program in Processing?) and I have on average 1 sprite in a project that draws everything -_-

Now it works perfectly! Thanks a lot! (BTW, for anyone having the "retina display support" option flagged when shift-clicking their option menu, disable it to correctly load the GIF frames).

Maybe @jens could embed this code in Snap?

Maybe you have the support for retina display enabled. You can disable the support (by shift-clicking the settings menu), import the GIF and the reenable it (if you don't want your GUI being slightly blurred).

Thanks for the suggestions :slight_smile:

I have choosen Snap as I teach in a very short course to non computer science majoring students, and sprites are a huge shortcut to them.

But I also taught computer science to first year engineering students, and after starting with Snap and sprites I moved to 1 sprite projects using the stamp block :wink:

yeah, I have retina display support, lol. I have it on because for me, without it on, all the text in snap looks blurry.

It is just like ctx.drawImage().

good

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.