Overview
Between 1996-1997, at the
Zapa Digital Arts development center in Tel-Aviv, we have developed an
authoring tool with advanced animation features and a unique visual interface
that allowed novices to create mini movies for the Web.
I designed the product and
managed the team, that included programmers, graphic designers, content
designers and QA engineers. The animation tool included ‘unheard of’ features
at that time, such as: a non-linear motion path for media items (animation,
image, text) with editable points, an internal scripting language that
gave users the ability to create interactive events and a Java applet that
could play the animation in any browser (remember this was back at 1997).
Broderbund Inc., one of
the biggest educational software companies at that time, was impressed
by the concept and technology, and ordered an application from us – an
animated greeting card authoring tool, with email and web support so cards
can be send by email and played over the Internet. They named the application
- ‘The Print Shop LiveMail'.
|
Click
for greeting cards examples:
|
Fish
(good morning)
|
Hearts
(Valentine's day)
|
Snow
(Christmas)
|
Design
Issues
The design guidelines we
defined:
-
An easy-to-use Interface, so
users with no animation experience can use it.
-
Non-standard GUI components,
that fit specifically to our needs.
-
Advanced 2D animation and interaction
features, so users has the freedom to bring their ideas and stories to
life.
-
A library of pre made media
items and complete greeting cards, so users does not need to know how to
create a digital image, an animation item or a sound effect.
-
Support of a standard web run-time
format, so users can send the cards by email, and their recipients can
view it in their web browser (no heavy attachments).
The
Product
Broderbund released the
product in 1997. Here is a short tour of the finished product:
 |
The opening screen
When opening the software,
users can choose between:
-
ready-mades – a library of completed
cards, divided to categories.
-
My Cards – open a saved card.
-
Blank Card – ‘start from scratch’
and create a new card.
-
Guided Tour – a tour of the
application screens and features.
|
 |
The ready-mades Library
A library of 200 pre made
greeting cards, organized in categories and sub categories. The cards are
highly Interactive, build from several scenes and including animation,
images, text, sound, background images and borders. |
 |
The Studio
The main authoring area
is the Studio. Here users can add media items, create motion paths, add
interaction scripting, edit items properties, play the card and more.
-
The Stage – the stage
is the ‘canvas’ area, where the card is being formed, edited and played.
The stage allows real-time WYSIWYG editing of media items. Items are arranged
in ‘layers’ and users can move them ‘forward’ or ‘backward’ between the
layers. The stage has a background and border definition, and graphic items
can be inserted an automatically arranged and tiled as background or border.
-
Scenes – the card is
built from scenes. Users can add new scenes in order to create more complex
stories.
-
Media Items – Media items
are: Text, Image or Animation. Items are presented on the stage with a
bounding box and can be selected and dragged freely to every position in
the stage area.
|
 |
Media items properties can
be edited in real-time in the studio, using the sliders components. The
sliders allow users to edit item properties in a visual way by dragging
a graphic slider to the right or left.
-
Text Item – Properties
include: Motion path speed, Font, Size, Color, Style, Spacing and effect.
Text Effects are animated effects like ‘typewriter’ or ‘nervous’.
-
Image Item – Properties
include: Motion path speed.
-
Animation Item - Properties
include: Motion path speed and animation tempo (the frame rate of the animation
item).
|
|
Every item has 3 interaction
buttons attached to its bounding box – Add Motion Path, Add Click Event,
Add Timed Event.
-
Motion Path – every item
can be moved across the stage using a motion path. To create a path the
user clicks on the ‘motion path’ button and drag the items across the stage.
The path is automatically created, recording the exact curves the user
has made. The path has editing points that can manipulate the path at any
point. Points can be added or removed. When playing the card, the item
will move on its motion path. Users can edit the speed of the item and
the behavior at the end of the path (loop, reverse, stop).
-
Click Events – Users
can add an event that will occur when the card recipient clicks on a specific
item. The script is added through an extra easy interface. The user selects
the item he wants to assign the event to, then clicks on the ‘click event’
button (attached to the item), then selects the desired event from the
‘Events Window’ – that's it. The event is automatically scripted and assigned
to the selected item.
-
Timed Events – Users
can add an event that will occur at a specific point in time after the
card has started to play. To set a new timed event, the user play the card,
stop it exactly at the point he wants to add the event, then he selects
any visible item, clicks the ‘timed Event’ button (attached to the item)
and the select the desired event from the ‘Events Window’. The event is
automatically scripted and assigned to the selected frame.
|
 --
|
Events Window
Users can select any of
the following events:
-
Add text – adds a new text item
to the stage. The text window is opened so the user can create the new
text.
-
Add Image – adds a new image
item to the stage. The Image Library is opened so the user can select the
new image.
-
Add Animation – adds a new animation
item to the stage. The Animation Library is opened so the user can select
the new animation.
-
Play Sound – adds a new sound.
The Sound Library is opened so the user can select the new sound.
-
Stop Sound – stops a sound that
is supposed to be playing at that point. The ‘Active Sounds’ window is
opened so the user can select the sound to stop.
-
Replace Image – replaces the
bitmap of a specific image with a new image. The size does not matter.
The Image Library is opened so the user can select the new image.
-
Hide Item(s) – Hides a specific
item or items that suppose to be visible at that point. The ‘Visible Items’
window is opened so the user can select the items to hide.
-
Show Item(s) – Shows items that
were hidden before.
-
Freeze Animation – Freeze an
animation item, so it appears as an image.
-
Resume Animation – Resume playing
an animation after it was freeze.
-
Go To Scene – create a new scene
and connect it to the current scene, at the current event. The new scene
will be visible when exiting the ‘Events Window’.
-
Go To URL – when the card will
be played over the Internet, this event will open the Web Browser in the
desired URL.
-
Change Background Color – Change
the color of the stage (only for the current scene).
|
The
Output
The animated cards created
with LiveMail can be easily viewed on the Web.
In order to play the animated
cards over the Internet, we have developed a Java applet that played any
LiveMail card. Both Internet Explorer and Netscape navigator are supported.
To optimize the animation
performance in low bandwidth, all media items were uploaded to a dedicated
server and streamed from there, and the animation items were exported as
‘film strips’ and cut to frames only when the recipient views them.
Sending a card with the
'send by email' feature - The recipient receives an email from his sender,
with a URL. To view the card, the recipient clicks the URL and the card
starts to stream and play inside his Web browser. |
))
))
))
))
))