# Resizing the animation

**URL:** <https://forum.code.org/t/resizing-the-animation/11653>\
**Category:** Unit and Lesson Discussion\
**Tags:** csd-unit-3, csd-unit-3-lesson-16\
**Created:** [November 2, 2017, 4:29pm UTC](https://forum.code.org/t/resizing-the-animation/11653 "2017-11-02T16:29:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashisharchna](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@ashisharchna](https://forum.code.org/u/ashisharchna)\
**Post date:** [November 2, 2017, 4:29pm UTC](https://forum.code.org/t/resizing-the-animation/11653/1 "2017-11-02T16:29:57Z")

</div>

How do I resize the animation for puzzle 8 in lesson 16?

---

<div class="post-metadata">

**Author:** ![karenma](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/karenma/32/4924_2.png) [@karenma](https://forum.code.org/u/karenma)\
**Post date:** [November 3, 2017, 5:11am UTC](https://forum.code.org/t/resizing-the-animation/11653/2 "2017-11-03T05:11:15Z")

</div>

The animation can be resized by using sprite.scale= .05. etc. Here is the link to how to do it: [https://studio.code.org/s/csd3/stage/6/puzzle/11](https://studio.code.org/s/csd3/stage/6/puzzle/11)

---

<div class="post-metadata">

**Author:** ![michelle\_johnson](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@michelle\_johnson](https://forum.code.org/u/michelle_johnson)\
**Post date:** [November 3, 2017, 3:02pm UTC](https://forum.code.org/t/resizing-the-animation/11653/3 "2017-11-03T15:02:02Z")

</div>

You can also resize in the Animation tab by clicking on the Resize drawer on the right side of the screen.

---

<div class="post-metadata">

**Author:** ![campbells](https://avatars.discourse-cdn.com/v4/letter/c/c6cbf5/32.png) [@campbells](https://forum.code.org/u/campbells)\
**Post date:** [November 13, 2017, 10:13pm UTC](https://forum.code.org/t/resizing-the-animation/11653/4 "2017-11-13T22:13:44Z")

</div>

Can you explain the resize drawer? In Lesson 15: I want to make the size of the sprite canvas smaller without making the actual drawing smaller. I don’t think I really understand the resize tool well.

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [November 14, 2017, 4:25pm UTC](https://forum.code.org/t/resizing-the-animation/11653/5 "2017-11-14T16:25:19Z")

</div>

Here’s steps that should work

1. Open animation tab and go to the animation
2. Open resize drawer.
3. Check “Maintain aspect ratio”
4. Uncheck “Resize canvas content”
5. Set the “Anchor” to the middle square
6. Choose a slightly smaller width (e.g. if it’s 100 right now make it 90). The “height” should change as well
7. Hit “Resize”

If everything worked correctly the drawing content itself will not have changed size but the canvas will have shrunk to the new size you chose.

Hope that helps!

---

<div class="post-metadata">

**Author:** ![asalas](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@asalas](https://forum.code.org/u/asalas)\
**Post date:** [December 14, 2017, 5:58am UTC](https://forum.code.org/t/resizing-the-animation/11653/6 "2017-12-14T05:58:07Z")

</div>

Hi GT, Just wondering if I missed an explanation in another lesson on how to use the resize drawer. It’s not intuitive and I would never expect the kids to figure it out on their own. I played with it for a while (before reading this post) and couldn’t figure it out. Is there a lesson you can direct me to or any other resource for how to use all the Animation tab’s features in Game Lab? Thanks!

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [December 14, 2017, 5:27pm UTC](https://forum.code.org/t/resizing-the-animation/11653/7 "2017-12-14T17:27:13Z")

</div>

@asalas using the Resize Drawer is not covered in curriculum, in part because we know it’s a feature that we need to make more intuitive. We do teach students to use the `sprite.scale` property in Lesson 6 ([link](https://studio.code.org/s/csd3/stage/6/puzzle/11)) which hopefully is a little more intuitive.

We don’t currently have documentation for the Animation Tab so there’s no easy one-stop-shop to learn how it works. It’s something we’ve discussed making and plan to make eventually. One way you could do some low-risk experimentation with the tool right now is by creating a new blank project in Stand-alone Game Lab and try out the different drawing and resizing tools there. FWIW the CSD team agrees that Resize Drawer in particular needs some work, but I think with a bit of experimentation at least the drawing tools on the left can be figured out.

Sorry not to have a more straightforward answer but I hope that helps you get started. If you have more specific questions please don’t hesitate to ask!

---

<div class="post-metadata">

**Author:** ![joeyp](https://avatars.discourse-cdn.com/v4/letter/j/b5a626/32.png) [@joeyp](https://forum.code.org/u/joeyp)\
**Post date:** [January 17, 2018, 1:42am UTC](https://forum.code.org/t/resizing-the-animation/11653/8 "2018-01-17T01:42:27Z")

</div>

I am also wondering if there is a way to reduce the amount of blank space around the balloon. I understand how to make the balloon smaller, but it does not really fix the issue of it “popping” the balloon before it actually touches it. Any suggestions? :0)

---

<div class="post-metadata">

**Author:** ![joeyp](https://avatars.discourse-cdn.com/v4/letter/j/b5a626/32.png) [@joeyp](https://forum.code.org/u/joeyp)\
**Post date:** [January 17, 2018, 1:45am UTC](https://forum.code.org/t/resizing-the-animation/11653/9 "2018-01-17T01:45:24Z")

</div>

I did it again. It worked a little better, not completely, but I think that is what you mean when you say you are working on the Animation Tab. Thanks.

---

<div class="post-metadata">

**Author:** ![koliner](https://avatars.discourse-cdn.com/v4/letter/k/f04885/32.png) [@koliner](https://forum.code.org/u/koliner)\
**Post date:** [March 17, 2018, 4:30pm UTC](https://forum.code.org/t/resizing-the-animation/11653/10 "2018-03-17T16:30:37Z")

</div>

A student tried clicking on Crop and that made the balloon fill the entire canvas so that it’s “debugging square” matched the size of the balloon and so the tack hit it at the right time.  
He and I were both kind of surprised that it worked.

---

<div class="post-metadata">

**Author:** ![bradleywellsashley](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bradleywellsashley/32/522_2.png) [@bradleywellsashley](https://forum.code.org/u/bradleywellsashley)\
**Post date:** [March 18, 2018, 5:56pm UTC](https://forum.code.org/t/resizing-the-animation/11653/11 "2018-03-18T17:56:12Z")

</div>

Kristen,

Great! I would try to see if in any condition it doesn’t work because that’s a great situation in which you can discuss how you can solve comp sci problems multiple ways but based on conditions they might not always work OR there might be a more efficient way. Glad to hear the student is thinking outside the box!

Brad

---

<div class="post-metadata">

**Author:** ![koliner](https://avatars.discourse-cdn.com/v4/letter/k/f04885/32.png) [@koliner](https://forum.code.org/u/koliner)\
**Post date:** [September 13, 2021, 2:26pm UTC](https://forum.code.org/t/resizing-the-animation/11653/12 "2021-09-13T14:26:43Z")

</div>

Hi [Code.org](http://Code.org) ~ Is there any more documentation/help for students to learn about using the Drawing Tools in the Animation Tab to Draw Sprites?

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [September 13, 2021, 3:51pm UTC](https://forum.code.org/t/resizing-the-animation/11653/13 "2021-09-13T15:51:38Z")

</div>

@koliner,

Thanks for your message! Have you seen the information at the links below?

[https://studio.code.org/docs/concepts/game-lab/animation-tab/](https://studio.code.org/docs/concepts/game-lab/animation-tab/)  
[https://studio.code.org/docs/concepts/game-lab/animation-tab/editing-images/](https://studio.code.org/docs/concepts/game-lab/animation-tab/editing-images/)  
[https://studio.code.org/docs/concepts/game-lab/animation-tab/multi-frame-animations/](https://studio.code.org/docs/concepts/game-lab/animation-tab/multi-frame-animations/)

I believe that the animate tool is based on piskelapp (a standalone website) and there may be more detailed instructions out there, but the links above are the official [code.org](http://code.org) documentation. Does this help?

Mike
