NOGGIMATION2 : Design Document

Design Document

Alan Watts July 31, 2001

Contents

Overview
Features
User Experience

Overview

Noggimation2 enhances the original Noggimation Station by upgrading and expanding existing features, giving kids new tools to express themselves through movie-making. The new Noggimation Station provides all the technologies for kids to create their own short films entirely on-line, be showcased on the web and perhaps shown on t.v.

[view flowchart]

Utilizing a client-side Shockwave application and a WebObject's back-end, Noggimation2 promises to be as successful and friendly as its predecessor. The look and feel of the site will be much like the original but will provide a richer filmmaking environment.
This document is intended to provide a brief overview of the feature set in Noggimation2. Refer to the technical document for in-depth specifications and step-by-step explanations of these features.

(Illustrations are for reference only)

Features

Noggimation2 combines the easy-to-use tools of version 1.0 with the latest shockwave technology to provide the following features:

Noggimation Animation Tool (purple means new to noggimation2)

pencil: freehand drawing

eraser: freehand erasing

fill: fill a section with a color or pattern

line: draw lines

circle: draw outlined or solid circles

rectangle: draw outlined or solid rectangles

text : insert type into movies for credits and titles

select: hilite a region of the frame to manipulate

move: move a selected region

rotate: spin a selection any angle - not just 45 degrees

scale : resize a selection - make it bigger or smaller

copy/paste/clear: edit the selected region

brush sizes : adjust the thickness of the drawing tool

faster drawing algorithms : optimized shape drawing

picture library : access uploaded pictures and the Noggin library

frame delays : adjust individual frame speeds

adjustable frames : add or remove frames - up to 100

preview frame : select the still frame to show in the theater
patterns : fill with a texture from the pattern library

help: toggle help pop-ups

sound: add music and effects to movies

Noggimation Viewer

movie controls: play, stop, rewind or fast forward the movie

volume control: mute or adjust
fullscreen mode : resize the movie to fill the browser window

bookmark : add the movie to your list of favorites

print : make a flipbook of the movie

rate : give a movie 3 stars! Dont like it? Give it no stars!

email : send the movie to a friend!
director info : go to director's homepage, view their favorites, or view all their movies

Picture Manager

import picture: access it in Noggimation using the library window

thumbnails : small image of images already stored

quota : status bar of available storage

delete : erase one of your pictures

User Movie Database

"now showing": completed movies

"in production" : movies saved to work on at a later date

favorites : bookmarked movies

User Experience

[ Entering Noggimation 2 | Watching a Movie | Making a Movie | Movie Manager | Picture Import | Sound ]

Entering Noggimation2

The front page of Noggimation2 will look similar to version 1.0, but will include new elements to utilize the enhancements and new features. Instead of a grid of animations, the user will be shown the single-frame preview image of the nine most recently submitted movies. Rolling over this image will display the movie's information - title, director, length, number of frames and star rating:

Also available on the front page page is a search field in which a user can find their favorite director, a long-lost movie, or a movie about a specific subject. Maybe the kid wants to see the longest movie? Or the highest rated movie? Or the lowest? The longest? The "sort by" option handles this. Browse buttons allow the user to navigate through the preview pages if the current display method results in more than nine movies. [ UE top ]

Watching a Movie

When the user decides to watch a movie, they click on its preview frame. This spawns a new browser window and loads up the Noggimation Viewer:

The movie preloads and begins playing. At any point during viewing, the user can stop the movie, fast forward, rewind or go to a specific point and view it frame by frame. If they don't want the distraction of graphics and buttons, they can switch to full screen mode which minimizes the control elements and enlarges the movie to fill the browser window. If they are especially fond of the movie, they can bookmark it, adding it to their "favorites" or email it to a friend. Maybe they want a more tangible memory? They can select "print" and create a flipbook of the movie. If they wish, the user can submit their own star rating for the movie - giving it between 0 and 5 stars. They can also jump to the director's homepage at noggin.com, show all the movies by the director or view the director's favorite movies and get a sense of their inspiration. [ UE top ]

Making a Movie

Allowing for greater flexibility of animating a movie only requires a few changes to the user experience from the original Noggimation. All of the drawing tools are still around with a few new additions: text, scale, line width and patterns. Enhanced frame controls gives the user a way to edit pauses on a frame, increasing or decreasing total frames and selecting the frame to use as the preview image. A help button will toggle pop-up windows of how-to's, hints and shortcuts:

If the user uploaded an image beforehand (see below) or wants to access the Noggin clip art library (1.0 compatible), they will click on the "picture library" button. A window will appear allowing the kid to browse through each library. After selecting "use", the window closes and the image appears in the frame, selected and ready to be animated:

Since animations can take a long time, Noggimation2 provides the ability for a kid to postpone works-in-progress and resume them at a later date. By clicking on the "Save" button, a window will appear allowing them to name the movie. From this dialog box, they will also be able to delete saved movies

.

Once the user has created the ultimate blockbuster, they can submit it to Noggin for approval and inclusion in the theater. After the animation is sent to the server and its processing is complete, a window pops up allowing the kid to title the movie, enter their name, age and keywords. If they are a registered Noggin member, the personal information will already be filled out. (This might be a better place for the director to select their preview frame too):

[ UE top ]

Movie Manager

When a kid logs into his homepage at Noggin.com, they will be able to access their Noggimation2 Movie Manager. This small utility will allow the user to view and delete movies that are in-production, being reviewed, now showing in the theater or bookmarked as favorites:

[ UE top ]

Picture Import

Noggimation2 will give kids two ways to import pictures into an animation.

By uploading

In Noggimation2, kids have the option of uploading images to use in the current animation session. With a small allotment of space, kids will be able to upload a small collection of pictures. The pictures then become accessible from the "Library" button in the Noggimation application under the "my pictures" category. Before starting an animation, the user will be provided a Picture Manager, where they can add new images, delete unused ones and view their current storage availability. Once they have the pictures uploaded, they click animate and enter Noggimation2:

By URL

Once in the application, the user can enter the picture library, click on a button, and an entry field will be provided to paste in an image URL (http://www.myserver.com/kidpics/foof.gif). Noggimation2 will grab the image, scale it to the appropriate size, convert the colors and place it into the animation at the current frame.

[ UE top ]

Sound

An exciting new feature to Noggimation2 is the ability to add sounds to the movies. Users will be given 2 tracks of audio to insert music or sound effects into. An extensive library of clips will be easily browsable to allow kids to further enhance their movie-making experience.

[ UE top ]


Design Document
Alan Watts	July 31, 2001
Contents Overview Features User Experience
Overview
Noggimation2 enhances the original Noggimation Station by upgrading and expanding existing features, giving kids new tools to express themselves through movie-making. The new Noggimation Station provides all the technologies for kids to create their own short films entirely on-line, be showcased on the web and perhaps shown on t.v.
[view flowchart]	Utilizing a client-side Shockwave application and a WebObject's back-end, Noggimation2 promises to be as successful and friendly as its predecessor. The look and feel of the site will be much like the original but will provide a richer filmmaking environment. This document is intended to provide a brief overview of the feature set in Noggimation2. Refer to the technical document for in-depth specifications and step-by-step explanations of these features. (Illustrations are for reference only)
Features
Noggimation2 combines the easy-to-use tools of version 1.0 with the latest shockwave technology to provide the following features: Noggimation Animation Tool (purple means new to noggimation2) pencil: freehand drawing eraser: freehand erasing fill: fill a section with a color or pattern line: draw lines circle: draw outlined or solid circles rectangle: draw outlined or solid rectangles text : insert type into movies for credits and titles select: hilite a region of the frame to manipulate move: move a selected region rotate: spin a selection any angle - not just 45 degrees scale : resize a selection - make it bigger or smaller copy/paste/clear: edit the selected region brush sizes : adjust the thickness of the drawing tool faster drawing algorithms : optimized shape drawing picture library : access uploaded pictures and the Noggin library frame delays : adjust individual frame speeds adjustable frames : add or remove frames - up to 100 preview frame : select the still frame to show in the theater patterns : fill with a texture from the pattern library help: toggle help pop-ups sound: add music and effects to movies Noggimation Viewer movie controls: play, stop, rewind or fast forward the movie volume control: mute or adjust fullscreen mode : resize the movie to fill the browser window bookmark : add the movie to your list of favorites print : make a flipbook of the movie rate : give a movie 3 stars! Dont like it? Give it no stars! email : send the movie to a friend! director info : go to director's homepage, view their favorites, or view all their movies Picture Manager import picture: access it in Noggimation using the library window thumbnails : small image of images already stored quota : status bar of available storage delete : erase one of your pictures User Movie Database "now showing": completed movies "in production" : movies saved to work on at a later date favorites : bookmarked movies
User Experience
[ Entering Noggimation 2 \| Watching a Movie \| Making a Movie \| Movie Manager \| Picture Import \| Sound ] Entering Noggimation2 The front page of Noggimation2 will look similar to version 1.0, but will include new elements to utilize the enhancements and new features. Instead of a grid of animations, the user will be shown the single-frame preview image of the nine most recently submitted movies. Rolling over this image will display the movie's information - title, director, length, number of frames and star rating: Also available on the front page page is a search field in which a user can find their favorite director, a long-lost movie, or a movie about a specific subject. Maybe the kid wants to see the longest movie? Or the highest rated movie? Or the lowest? The longest? The "sort by" option handles this. Browse buttons allow the user to navigate through the preview pages if the current display method results in more than nine movies. [ UE top ] Watching a Movie When the user decides to watch a movie, they click on its preview frame. This spawns a new browser window and loads up the Noggimation Viewer: The movie preloads and begins playing. At any point during viewing, the user can stop the movie, fast forward, rewind or go to a specific point and view it frame by frame. If they don't want the distraction of graphics and buttons, they can switch to full screen mode which minimizes the control elements and enlarges the movie to fill the browser window. If they are especially fond of the movie, they can bookmark it, adding it to their "favorites" or email it to a friend. Maybe they want a more tangible memory? They can select "print" and create a flipbook of the movie. If they wish, the user can submit their own star rating for the movie - giving it between 0 and 5 stars. They can also jump to the director's homepage at noggin.com, show all the movies by the director or view the director's favorite movies and get a sense of their inspiration. [ UE top ] Making a Movie Allowing for greater flexibility of animating a movie only requires a few changes to the user experience from the original Noggimation. All of the drawing tools are still around with a few new additions: text, scale, line width and patterns. Enhanced frame controls gives the user a way to edit pauses on a frame, increasing or decreasing total frames and selecting the frame to use as the preview image. A help button will toggle pop-up windows of how-to's, hints and shortcuts: If the user uploaded an image beforehand (see below) or wants to access the Noggin clip art library (1.0 compatible), they will click on the "picture library" button. A window will appear allowing the kid to browse through each library. After selecting "use", the window closes and the image appears in the frame, selected and ready to be animated: Since animations can take a long time, Noggimation2 provides the ability for a kid to postpone works-in-progress and resume them at a later date. By clicking on the "Save" button, a window will appear allowing them to name the movie. From this dialog box, they will also be able to delete saved movies . Once the user has created the ultimate blockbuster, they can submit it to Noggin for approval and inclusion in the theater. After the animation is sent to the server and its processing is complete, a window pops up allowing the kid to title the movie, enter their name, age and keywords. If they are a registered Noggin member, the personal information will already be filled out. (This might be a better place for the director to select their preview frame too): [ UE top ] Movie Manager When a kid logs into his homepage at Noggin.com, they will be able to access their Noggimation2 Movie Manager. This small utility will allow the user to view and delete movies that are in-production, being reviewed, now showing in the theater or bookmarked as favorites: [ UE top ] Picture Import Noggimation2 will give kids two ways to import pictures into an animation. By uploading In Noggimation2, kids have the option of uploading images to use in the current animation session. With a small allotment of space, kids will be able to upload a small collection of pictures. The pictures then become accessible from the "Library" button in the Noggimation application under the "my pictures" category. Before starting an animation, the user will be provided a Picture Manager, where they can add new images, delete unused ones and view their current storage availability. Once they have the pictures uploaded, they click animate and enter Noggimation2: By URL Once in the application, the user can enter the picture library, click on a button, and an entry field will be provided to paste in an image URL (http://www.myserver.com/kidpics/foof.gif). Noggimation2 will grab the image, scale it to the appropriate size, convert the colors and place it into the animation at the current frame. [ UE top ] Sound An exciting new feature to Noggimation2 is the ability to add sounds to the movies. Users will be given 2 tracks of audio to insert music or sound effects into. An extensive library of clips will be easily browsable to allow kids to further enhance their movie-making experience. [ UE top ]