Author: Brian Judy
Date: October 9, 2006
Level: Beginner

Since image and sound assets are downloaded separately from the Cartoon Builder SWF file you can make changes to the animation character images, backgrounds and sounds without using Flash. You tell Cartoon Builder which files to download with XML files, which are located in the same folder as the Cartoon Builder SWF.

• XML
• Graphics editing
• Text editing

• Web browser with Flash plugin version 8 or higher
• Graphics editor
• Text editor

• cartoonbuilder.swf — the main Flash file
• animations.xml — lists the animation image files and their location
• backgrounds.xml — lists the background image files and thumbnails and they're location
• animations — folder containing animation character images and thumbnails
• backgrounds — folder containing background images and thumbnails

This software is licensed to the public under the CC-GNU GPL.

For each animation character frame you will need to change 2 image files that are the same except for their size. One is the full size image to be displayed on the Stage, the other is a smaller copy which will appear as a thumbnail, the user can drag. A similar technique to this can be used to modify background images and matching thumbnails. Backgrounds don't need to have a transparent background.

1. Navigate to the folder where Cartoon Builder is located and open the animations folder.
2. Open an image file in an image editor such as the free gimp program or Photoshop. If it is very small you've opened the thumbnail. Close this and open a larger one. It should be sized 180 pixels across and 180 pixels down, also measured as 180x180.
3. Use the image editor tools to modify the image.
4. Make sure you save the image as a GIF with a transparent background, otherwise background images won't show through in Cartoon Builder.
5. After you save it, resize the image to 35x35 and save it again in the same animations folder, but make sure you rename it as the corresponding thumbnail.

File Example
For the clown animation character the 5th frame is named bigclown5.gif and the matching thumbnail is named clown5.gif

To add a new background for Cartoon Builder you will need to create the image and it's matching thumbnail, and update backgrounds.xml

1. Create a new image in an image editor such as the free gimp program or Photoshop. It should be sized 180 pixels across and 180 pixels down, also measured as 180x180.
2. Use any image editor paint and drawing tool to create the background.
3. Save the image as a GIF or JPG.
4. Resize the image to 35x35 and save it again in the same backgrounds folder, but make sure you rename it as the corresponding thumbnail.

File Example
This background file name is bigbg5.gif and the matching thumbnail is named bg5.gif.

Cartoon Builder uses the backgrounds.xml file to determine which files to download for background images and thumbnails. You will need to modify this XML file to tell Cartoon Builder to download your new background.

1. Open backgrounds.xml with any text editor such as Microsoft Notepad.
2. Copy and paste one of the existing lines starting with <background to create a new line.
   
   

   <background thumb="bg5.gif" image="bigbg5.gif"></background>

3. Change the thumb attribute to the file name of the new thumbnail you created above and the image attribute to the name of the new image file. Don't forget the quotes!
4. Save backgrounds.xml overwriting the same file in the folder where cartoonbuilder.swf is.
5. Test by starting Cartoon Builder. If you don't see any images then check the XML file again to see if you left off a quote or some other typing error.