Editing New Frames in the Animation Tab

I have students wanting to add new frames to an animation. I like when animations are preloaded that you all do (like in U3 L20 with the fly), but I can’t find any documentation on how to help a student create those frames. Specifically, I guess, I don’t know which tools to tell them to use from the animation tab to modify the first picture to make a second frame. I hope this question makes sense. I am not great with editing picture tools in general! I’ve looked at the generic documentation with the animation tab and none of those are about adding frames and editing the picture to create the new frame.

What actually happens: [replace with a detailed description of what actually happens when the code runs including any errors or unexpected behavior]
What I’ve tried: [replace with a detailed description of what you’ve already tried to do to solve the problem]

Hello @hhook,
I’m not 100% sure if I’m answering your specific question correctly, but here goes. It sounds to me that your students want to be able to add their own images to the flip-book style animation. This would require a number of images for them to animate together to give the impression of animation. Take a look at this video: https://www.youtube.com/watch?v=DQPruYTJ0Fk and maybe read through this documentation to see if either of them help. I’d still love to hear some of the ideas others have from their students’ experiences with adding their own, personalized animations.

Thanks Elizabeth!
Those are the resources I’ve already reviewed. I think my issue is more of a graphic artist/design question as I am not sure how to instruct to modify the picture once it’s upload into the animation tab. I understand to make the animation I need to have multiple copies of the same picture to add to the frame. So once I have those pictures into the frames, how do I edit them so it looks real? The best example I can give is how did the code.org folks edit the fly in U3 L20 (the fly has 2 frames in the animation) and the flyer in U3 L23 (the flyer has 2 frames in the animation to make his feet move).


This communication originated from North Montgomery Community School Corp. and is for the sole use of the intended recipient(s). The information contained in this message and any attachments may be considered confidential, privileged, or otherwise exempt from disclosure under applicable law. If you are not the intended recipient(s), you are hereby notified that the dissemination, distribution, or copying of this message is strictly prohibited. If you have received this communication in error, please notify the sender immediately and delete all copies of the original communication.



I can’t say how they edited the fly and the flyer as there are a number of tools such as Photoshop where that kind of editing can take place. However, the animation tab has rudimentary tools as well. I have found that my students are very good at exploring and editing on their own and they often are very creative in doing so.

They typically start with the basic image and duplicate it (bottom right hand corner of the thumbnail sketch has a duplication icon). Then, they use the eraser tool (to erase pixels), the pen tool (to add pixels) and the eyedropper tool (to get colors from the existing image before they add pixels with the pen tool).

Another helpful tool is the move tool (hand icon) as you can use it to move the entire drawing (ie up one pixel to imitate a jump, for example).

The paint bucket tools can be used to change colors (color changing animations), etc.

I found if I show the students a few things and encourage them to explore the various tools, they will get the hang of it quickly and will come up with stuff more imaginative than you would imagine… (They have more patience than I do with these kinds of things … I can’t focus on a project like that for as long as some of them will do it).

hope this gives you some ideas.