Cartoon Builder
From WorldWideWorkshop-OLPC wiki
Latest Development Updates
Oct 31, 2007 (Ed): cartoon-builder-1.xo
- correctly build xo package
Oct 30, 2007 (Ed): Release Candidate 1.7
- new icons again
Oct 30, 2007 (Ed): Release Candidate 1.6
- mesh integration (had to make compromises here that may affect future versions because sending a lot of data over the mesh doesn't work at all)
- new icons again
Oct 24, 2007 (Ed): Release Candidate 1.4
- made whole interface bigger
- switched language chooser to a dropdown
- removed the save and open buttons
- removed the "My Character", "My Background", and "My Sound" buttons
- added journal integration (save to/restore from journal)
- added background toolbar (can insert picture from journal into background)
Oct 9, 2007 (Ed): Release Candidate 1.3
added svg icons
June 28, 2007 (Ed): Beta Version
Sound Working still need to:
- fix the color on the Language Dropdown
- fix the tilde over the n in Espanol
still need:
- Spanish lesson plans
June 22, 2007 (Ed): Beta Version
still need to:
- fix the color on the Language Dropdown
- make sound work
- make "My Sound" button work
June 18, 2007 (Ed): Beta Version
still need to:
- fix the color on the Language Dropdown
- make the Language Dropdown work
- make the Save button do something
- make the Open button do something
- make the side and top images bigger/ make the outer gray frame bigger?
June 14, 2007 (Ed): Beta Version
still need to:
- fix the color on the Language Dropdown
- make the Language Dropdown work
- make the lesson plan popup better
- make the top and side image frames square
June 11, 2007 (Ed): Beta Version
- getting there on making the UI like the design for the UI
- still need to get the character pose button and frame buttons the correct size
- still need to put the outer spacer frame in
Description & Goals
Summary
Frame that ‘Toon is a java application that allows children to produce cell animations. This document will describe the process involved in producing a similar application, "Cartoon Builder" that is specifically tailored to the OLPC Sugar environment.
Original Java Application:
In Frame that 'Toon there are six boxes along the top of the screen that represent the six frames of the animation. In order to create an animation, the child chooses what picture to use in each frame by dragging a picture from the left side of the screen to a frame on the top. There is a box in the middle of the screen that shows the current frame and will show the entire animation when the child chooses to play the animation (by clicking a button on the right of the screen). The background of the animation can be selected from a control on the right side of the screen. There are other controls on the right of the screen that allow the child to change the background, the speed of the animation, the selection of pictures to use in the animation, and sounds to play with the animation. There is a Save button which allows the child to save their animation and a Fun with 'toons button which instructs the child on how to send their saved animation to a friend.
Porting to Sugar:
Because Frame that 'Toon was written in Java, it won't directly run in the Sugar environment -- it will need to be re-written. Because Sugar is itself a pygtk application, it makes sense to make Cartoon Builder in pygtk also.
Goals
ALPHA (Basic application recreated in pygtk to run on XO)
Due: April 30, 2007
Description: In this process there are really two transitions being made. One from Java to pygtk, and the other from a web-hosted application to an application working on the OLPC. The first part of the process is to address the differences between Java and pygtk. The easiest way to do this is make a stripped down version of the application in pygtk. This pygtk app is about as simple as it can be and still resemble the Java app. All of the widgets are layed out with the default arguments to gtk. No buttons are styled except that the selected frame has is background changed to yellow. Every widget except for the drawing area where the animation is played scales as the window scales. The drawing area is a gtk.DrawingArea widget (sized to 200x200) and the rest of the widgets are gtk.Button widgets.
Functionality included in Alpha:
- Placing the character poses in the filmstrip. In the stripped down pygtk app, there is no drag-and-drop. You select the frame and then select the picture you want to go in it.
- Clear Frame (removes image from the currently selected cell in the filmstrip
- Clear All (removes images from all cells of the filmstrip)
- Background Selector (Scroll through background options using "Back" and "Forward" buttons. The one in view will be used in the cartoon.)
- Play (Clicking the "GO!" button starts the animation.)
BETA (Polished application with complete one-person feature set)
Due: May 23, 2007
Description: In this version the full functionality of the basic application form MaMaMedia.com is completed and the interface and graphic design elements are incorporated. A user can create a cartoon using provided assets and save it locally on their XO.
The following features will be added in Beta:
- Choosing from a provided set of different characters (each with 10+ poses)
- Choosing sounds from a provided set of choices
- Changing the animation speed
- Saving/loading animations (locally on the XO)
- Dynamic sizing of the character poses and background image (Alpha uses 50x50 pictures centered in a 200x200 frame, instead of dynamically sizing foreground and background.)
The following functionality from the basic version will be completed in Beta:
- "Back" and "Forward" buttons of the background selection should have the text removed
- "CLEAR FRAME", "CLEAR ALL", and "GO!" buttons – replace text with an icon.
- Change background color of a selected frame on click, instead of after the frame is clicked and the mouse is moved outside of it.
- Fine-tune widget packing to ensure everything looks correct when window is resized.
NOTE: Drag-and-drop was used to add character poses to the cartoon in the original Java applet. Drag and drop doesn’t make the application easier to use, so I propose not using it in this version.
GOLD (New “Make Your Own” functionality to leverage XO features)
Due: June 29, 2007
Description: This step will focus on integrating the application into the unique XO framework, and leveraging the XO’s feature set to allow students to create original cartoons and share them.
Creation and incorporation of original assets:
- Allow students to take drawings created with the XO painting tool and use them as foreground and background images in Cartoon Builder.
- Allow students to take photos with the XO camera and use the photo files as images in Cartoon Builder.
- Allow students to take sounds recorded with the XO microphone and use them in Cartoon Builder.
- Allow students to take sound effects and music composed in TamTam and use them in Cartoon Builder.
Mesh-based sharing of saved animations and original assets: Using the Mesh Network, users can find saved Cartoon Builder animations and asset files (images, sounds) on one another’s XO laptops or the school’s XO server, play them and use them in new animations.
Collaboration
Using the Mesh Network, users can share animations and assets.
Visual Design
- Based on the interface designed for the MyGLife.org version of FFT, called Cartoon Builder
- Need to incorporate buttons for "Add Character," "Add Background," "Add Sound," "Open" and "Save"
- Use three starter characters: Space Blob, Elephant (make it gray) and Turkey
Media
| Document | Description |
|---|---|
| Visual_Design_for_MMM_OLPC_Cartoon_Builder.doc history | A write-up with embedded mock up of the design needs for this version of Cartoon Builder. |
| CartoonMakerREVISED.zip history | Original .swf and .fla files from our Flash-based version of Cartoon Builder. For the XO, we prefer this interface over the original Frame that 'Toon activity on MMM.com. |
| New Cartoon Builder logo - PSD history | NEW .psd file for updated MaMaMedia logo and character (to be included on activity interface in upper left) |
| Cartoon characters and backgrounds history | Character poses (alien, elephant, turkey) and backgrounds |
| Cartoon sounds | Useful sounds... |
| Cartoon interface buttons and objects | Arrows, buttons, new logo and other interface elements |
Screenshots
 Activity screenshot |
 Interface mock up |
 Alpha Screenshot (no graphic interface) |
 "Frame That Toon" original interface |
Development
Feature Requests
Implementation Discussion
Version History
Source
use the links in the XO Packages to retrieve the source. All of the code is in python so there are no binaries in the packages.
XO Packages
Resources
- Frame that ‘Toon, a java application hosted at MaMaMedia.com.
- Cartoon Buildera Flash version of FTT created in 2006.
- OLPC Wiki
- OLPC Sugar Activities List
Lesson Plans
Downloadable Cartoon Builder Lessons Plans (in English)
