[IAEP] Any ideas how to make an image with a transparent background inSugar?

[Bert Freudenberg]

It appears as if MaMaMedia Cartoon Builder always scales an image to  
fill the stage. I don't know if it is possible to tell it otherwise,  
or to resize it after importing. Presumably this is done to simplify.  
In case you don't want to switch to Etoys completely for your  
animation needs ;-) here is a workaround:

You need to supply "padding" around the character, that is, some empty  
space. When Cartoon Builder then scales this up, the actual character  
will appear smaller.

When you draw something in Etoys, it is cropped to the actual drawing  
extent:



To add padding, you need to embed the drawing into a larger,  
transparent object. The simplest for this is a "Playfield" you can  
find in the "Supplies" flap:



Get this and resize to a square of the size you need using its yellow  
halo handle. Drop the Sketch into it.



Then make the Playfield transparent, both the fill and the border,  
using its halo menu (click white halo handle):



(alternatively, shift-click the pink color halo handle to change fill  
and border at the same time). Finally, copy the (now invisible)  
Playfield with the embedded Sketch:



Note that Etoys by default uses a virtual display matching the XO  
screen size that is scaled to Sugar's actual screen size. So depending  
on your physical screen size, objects copied from Etoys and pasted  
elsewhere may appear larger or smaller. This can of course be turned  
off [*] but normally it's sufficient if you just draw everything a bit  
smaller or larger than intended.

Have fun!

- Bert -

[*] if your Etoys version shows the full-screen button , hold down on  
it. Otherwise, choose "display mode ..." from the world's halo menu.  
Either way, you get the "display mode" menu. Choose "no scaling":



On 03.10.2009, at 04:19, Caroline Meeks wrote:

> Thanks Alan and Bert!
>
> I have made progress. My next problem is that my caterpillar is too  
> big! Even when I resize cartoon builder still wants to make it full  
> sized.
>
> http://screencast.com/t/MH1XZmd27s
>
> On Fri, Oct 2, 2009 at 3:26 AM, Bert Freudenberg  
> <bert at freudenbergs.de> wrote:
> About how to get the drawing out of Etoys:
>
> Drag-and-drop it into the Sugar Frame's clipboard, or just press  
> Ctrl-C when its halo is showing.
>
> Then either insert into the activity you want directly by drag-and- 
> drop or Ctrl-V (if the activity supports that), or store the  
> clipping in the Journal via its Frame clipboard icon menu.
>
> - Bert -
>
> On 02.10.2009, at 04:30, Alan Kay wrote:
>
>> Hi Caroline
>>
>> I think what you want to do is to take that picture of the  
>> caterpillar and erase all but the caterpillar?
>>
>> To do that you want to "repaint" the picture (it is already an  
>> image).
>>
>> First get the "halos" (which every object in Etoys will show) by  
>> right clicking on the picture.
>>
>>                  There is balloon help on most things in Etoys, and  
>> each halo handle will say what it does.
>>
>>                        For example, to duplicate your picture, drag  
>> on the green button in the upper right corner. A duplicate copy  
>> will drag off.
>>
>>                        To put something in the trash, click on the  
>> "move to trash" handle in the upper left corner.
>>
>> --> To repaint, click on the "repaint" handle on the right side,  
>> mid height.
>>
>>                   There is help about most things in Etoys under  
>> the "?" on the Sugar menu bar.
>>
>> For doing your task, I like to choose "no color" in the paint  
>> palette (it's the bar over the color rainbow). Then I will choose  
>> various sizes of the circular brushes to do the work of removing  
>> the background. The "Undo" in the paint box will undo one whole  
>> stroke.
>>
>> When done, click on "Keep" in the paint box. If you want to start  
>> over, click on "Toss".
>>
>> You now have a picture of the caterpillar with transparent fill  
>> around it.
>>
>> The PNG format (a standard open source format) will allow the  
>> picture to be filed with the transparent fill preserved.
>>
>> I'm presuming that the reverse of the process you used to get the  
>> image into Etoys will get it back to where you want to use it.
>>
>> For a nice way to animate a wriggling caterpillar, you can also  
>> look at the example in Sdenka Salas' recent book of the XO in Peru.
>>
>> Don't hesitate to ask more questions.
>>
>> Best wishes,
>>
>> Alan
>>
>> From: Caroline Meeks <caroline at solutiongrove.com>
>> To: Alan Kay <alan.nemo at yahoo.com>
>> Cc: iaep <iaep at lists.sugarlabs.org>
>> Sent: Thursday, October 1, 2009 6:41:26 PM
>> Subject: Re: [IAEP] Any ideas how to make an image with a  
>> transparent background inSugar?
>>
>> Thanks Alan,
>>
>> Where should I look to figure out Etoys paint. I'm stuck and there  
>> is no kid here to teach me!
>>
>> http://screencast.com/t/4lvde8qWV2pD
>>
>> On Thu, Oct 1, 2009 at 9:32 PM, Alan Kay <alan.nemo at yahoo.com> wrote:
>> Paint it in Etoys, save as a .PNG picture
>>
>> Cheers,
>>
>> Alan
>>
>> From: Caroline Meeks <caroline at solutiongrove.com>
>> To: iaep <iaep at lists.sugarlabs.org>
>> Sent: Thursday, October 1, 2009 6:28:22 PM
>> Subject: [IAEP] Any ideas how to make an image with a transparent  
>> background inSugar?
>>
>> http://screencast.com/t/K0lH5L7tsBU
>>
>> I am trying to make a new character for cartoon builder. The video  
>> explains my goals.
>> Basically I want to take a picture and cut out just the caterpillar  
>> and have it be cropped/transparent background.
>>
>> thanks,
>> Caroline
>>
>> -- 
>> Caroline Meeks
>> Solution Grove
>> Caroline at SolutionGrove.com
>>
>> 617-500-3488 - Office
>> 505-213-3268 - Fax
>>
>>
>>
>>
>> -- 
>> Caroline Meeks
>> Solution Grove
>> Caroline at SolutionGrove.com
>>
>> 617-500-3488 - Office
>> 505-213-3268 - Fax
>>
>> _______________________________________________
>> IAEP -- It's An Education Project (not a laptop project!)
>> IAEP at lists.sugarlabs.org
>> http://lists.sugarlabs.org/listinfo/iaep



-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0001.htm 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-14.png
Type: image/png
Size: 7762 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0007.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-11.png
Type: image/png
Size: 3979 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0008.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-12.png
Type: image/png
Size: 4529 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0009.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-10.png
Type: image/png
Size: 18240 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0010.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-13.png
Type: image/png
Size: 9441 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0011.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-17.png
Type: image/png
Size: 3186 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0012.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-19.png
Type: image/png
Size: 13618 bytes
Desc: not available
Url : http://lists.sugarlabs.org/archive/iaep/attachments/20091004/88ffc12f/attachment-0013.png