User's Manual
|
|
At the present, photo animation consists of two basic steps.
To build the animation, you will need the
Firefox Browser
, but the animation will run in most browsers.
Step One: Build animation objects
|
|
|
|
Flow: |
You need objects
that you can animate. You can borrow them from other
animations, or you can build them from photos.
After you have the objects that you need for your animation,
load them all on to the same screen and save the the screen
to a file. Let's cover that in more detail.
|
|
|
Browser: |
At the moment, you must use a
recent version (last 6 months) of Firefox. Since the updates are
automatic, most users will have the latest version.
|
|
|
Reset: |
When you feel the need,
press "Ctrl"+'r' to reset or click the refresh button on your browser
which is sometimes called "reload" when you hover over it. This will rescue you
from whatever you are doing, but you will begin life all over.
|
|
|
|
Load Files
|
|
Upload:
|
"Upload" and "Load"
are your first options. Upload loads a file from you computer.
You would usually upload pictures that are in either a JPG or
PNG raster format, but you can upload SVG files that you previously
downloaded. Let's consider the raster files first.
|
|
Load:
|
"Load" fetches a SVG file from the cloud. The cloud doesn't have
raster files. Loading a file from the cloud isn't much different
than uploading a SVG from your computer. In either case, you
bring the SVG files to the screen immediately before animation.
When the "Load" button is clicked, a listing of
the files in the cloud are shown. You can load the
file by clicking on the file name.
You can also enter the first part of the file name
into the text box on the left which will help you
find the file that you want.
|
|
Save:
|
When a file is loaded, the "Save", "Delete", and
"Animate" buttons appear.
When "Save" is clicked you are taken to a screen that
gives you three save options, "Save", "Save As",
and "Download".
|
|
Delete:
|
When a file is loaded, the "Save", "Delete", and
"Animate" buttons appear.
When "Delete" is clicked you will erase from the
cloud the last file that was loaded from the cloud
after you confirm that you want it deleted. The
image of the file will be removed from the screen.
|
|
Animate:
|
When a file is loaded, the "Save", "Delete", and
"Animate" buttons appear.
Before you click "Animate", you want to have everything
on the screen that you intend to have in your animation.
You do this by building and saving each object. Then
you load everthing that will be in the animation.
It doesn't matter if some objects cover up other
objects.
When the "Animate" button is clicked you will be
prompted to save the screen to a file. If you haven't
already saved it, you will want to save it, because
it will save you the trouble from rebuilding it.
After the prompt, you will be taken to the animation
screen.
|
|
|
Saving Files
|
|
Save:
|
When the "Save" button is clicked, the file is written
to the cloud with its current file name. When the
current file name is already used in the cloud, you
will be prompted as to whether you want to overwrite
the old file that is in the cloud.
When a file is saved, you will be taken back to
the panel that has the "Upload" and "Load" buttons.
If you want to build more objects before you animate,
you can erase object (that was just saved) from the
screen by refreshing the browser
(button or "Ctrl" + 'r').
|
|
Save As:
|
When the "Save As" button is clicked, the file is written
to the cloud with the file name that you create. If
that file name is already used in the cloud, you
will be prompted as to whether you want to overwrite
the old file that is in the cloud.
When a file is saved, you will be taken back to
the panel that has the "Upload" and "Load" buttons.
If you want to build more objects before you animate,
you can erase object (that was just saved) from the
screen by refreshing the browser
(button or "Ctrl" + 'r').
|
|
Download:
|
When the "Download" button is clicked, the file is written
to your computer.
When a file is saved, you will be taken back to
the panel that has the "Upload" and "Load" buttons.
If you want to build more objects before you animate,
you can erase object (that was just saved) from the
screen by refreshing the browser
(button or "Ctrl" + 'r').
|
|
|
Handling Raster Images
|
|
Convert:
|
After you have loaded the raster picture, you can either convert it
to SVG, save it as a background, or crop to a smaller size. You
must convert to SVG, if you want to animate it later.
The convert features a setting that can be set from 1 to 127 with
a default of 4. Higher settings run faster but are more coarse.
This
page has a number of settings for the same picture to give
you a feel for the setting.
The image that you convert needs to be less than 490,000
pixels. The program will take you to the crop area, if the picture
is too large. Large files don't make good animations.
Convert comes back 4 times larger than the orginal, so it is easier
to select. At 4 times larger, the image will not look as good, but
when you take it back to normal size (in a few steps), it will look
fine (most of the time).
|
|
Background:
|
Most animations combine several photos. It is better looking, more
interesting, and easier. You usually want to have one or more photos
as a backgound. Backgrounds do not need to selected or animated.
They are ready to go, so you can simply save them by clicking
the "Save As Background" button.
It's a good idea to give yourself a hint that the the image
in the cloud is a background, because raster background can not
be animated. A good hint is to begin the name with "bg". For
example, "file_nam" could be saved as "bg_file_nam".
|
|
Crop:
|
Cameras produce pictures that are too large for computer screens,
and animations even need more room. The cropping tool allows you
to only use the best part of the picture.
To crop, you start at the upper left corner of
what you want cropped. Hold the mouse key down, and
move the mouse to the lower right corner of the cropped
selection. Then click "Crop".
|
|
|
Selecting Animation Objects
|
|
Polygon Select:
|
After you convert the image to SVG, the screen will
come back with options that allow you to edit what
you want to animate. The option on the left, "Polygon",
allows you to cut your selection. For example, if you
converted a picture of a car, you could cut everything
out of the picture except the car with the polygon
select.
Polygon will also give you the option to delete everything
except what you have selected. In the example just given,
you could delete only the car from the picture.
|
|
Color Select:
|
If you want to select something dark on a light background
or vice-versa, it might be faster and easier to select
with color. Color will select all the colors that are
above a color that you can set. You can also choose
to select the colors below the threshold.
|
|
Blob Delete:
|
After you have made a polygon or color selection, you
can trim the edges with blob delete which allows you
to eliminate specific blobs.
A blob is a group of pixels that are next to each and
have the same color. Blobs can be about any size.
|
|
Finish Selection:
|
When the selection is completed, you will given a chance
to save it when you click "Done".
You want to save each selection individually which gives
you the ability to animate the selection in the current
and future animations.
Saving is free.
|
|
|
Selecting With Polygons
|
|
Polygon Selection:
|
When you click "Polygon" you are taken to a panel that
only has 2 buttons, "Done" and "Help", but the buttons,
"Select" and "Delete" will appear when you place your
first dot by clicking on the edge of what you want to
select.
When you click on the selection edge, the application
will place a dot in the image. The dot is only a tool
and it will not be in the image after the selection is
made. Trace most the way around selection by placing
more dots. You make the selection by clicking the
"Select" button.
|
|
Polygon Deletion:
|
The polygon deletion is nearly the same as the polygon
selection which was just described. The difference, of
course, is the the selected area will be deleted from
the image.
You are probably used to working with pixels which are
smaller. When a pixel deletion is made the deletion will
look a little smoother, but actual image artifacts are
destroyed in the process. By deleting blobs, the integrity
of the picture is maintained, and the final animation
will be more realistic. You can compensate for the rougher
edges by using more pixels in your images.
|
|
Finish Polygon Selection:
|
When the polygon selection is completed, you can click
the "Done" button that will take you back to the screen
that allows more editing.
In other words, "Done" takes you back to the "Polygon",
"Color", and "Blob" buttons.
|
|
|
Selecting With Color
|
|
View Color Selection:
|
When you click on the "Color" button, you are taken to
a screen that allows you to select or delete color based
on a threshold that you can set. For example, you can
eliminate all the white hair in an image.
The screen has 2 color settings.
The three text boxes allow you to set the color. A
setting of 0, 0, and 0 is black. The "Color" box shows
you the current color that other will be measured
against.
If the ">" radio button is clicked, all the colors
that are lighter than the set color will be chosen.
If the "<" radio button is clicked, all the colors
that are darker than the set color will be chosen.
You can then click, "View" to see what you selection
looks like. At this point, the selection is not
permanent.
|
|
Finish Color Selection:
|
When the color selection is completed, you can click
the "Done" button that will take you back to the screen
that allows more editing.
In other words, "Done" takes you back to the "Polygon",
"Color", and "Blob" buttons.
|
|
Keep Color Selection:
|
When you click the "View" button, you are taken to a
screen that shows your selection. If you click the
"Keep" button, the changes will be made permanent, but
changes are not saved to the cloud. You will have the
option to do that later.
"Keep" will also eliminate the "Undo" and "Keep" buttons,
and redisplay the "View" and "Done" buttons.
|
|
Undo Color Selection:
|
By clicking the "Undo" button, you will restore the
image to what it was before you hit the "View" button.
"Undo" will also eliminate the "Undo" and "Keep" buttons,
and redisplay the "View" and "Done" buttons.
|
|
|
|
Deleting Blobs
|
|
Blob Delete:
|
When you click on the "Blob" button you are taken to
a screen that allows you to delete the blobs one by one
which is useful if you need to cleanup the edge.
The blob is deleted by simply clicking on it. The
blob that is selected will begin to blink. You can
delete the blinking blob by clicking "Delete". The
"Delete" is permanent.
|
|
Undo Blob Selection:
|
When you click on the blob it will start blinking
to show you which blob is selected.
If you selected the wrong blob, you can save it from
deletion by clicking the "Undo" button.
|
|
Finish Blob Deletion:
|
When the blob deletion is completed, you can click
the "Done" button that will take you back to the screen
that allows more editing.
In other words, "Done" takes you back to the "Polygon",
"Color", and "Blob" buttons.
|
|
|
Step Two: Animate your sprites
|
|
|
Animation
|
|
|
Animation Imagination:
|
At the present time,
your object can scale (change size) and move. Your screen
should have all the objects that you intend to include in
any of the animation.
After you have an animation in mind, you need to break it
down to settings by determining the following three things.
|
1.
|
Frames: The first step is determine
how many frames you need. Certain events dictate when you need a new
frame.
Different Objects: If
an object is added or subtracted from the view, a new frame
is required.
For example, let's suppose that in your animation two cars
are approaching each other as in a head on collision. When
the cars collide a huge explosion occurs and the two cars
disappear. The addition of the explosion and subtraction
of the two cars requires a new frame.
Object Order: If
an object is in front of another object, but then needs
to go behind it, a new frame is required.
For example, let's suppose that in your animation moon is in front
of the earth. If a little later the moon goes behind the earth,
a new frame will be needed for that.
Scaling Direction: If
an object is scaled in one direction (e.g., smaller to larger),
but then needs to scale in the opposite direction
(e.g., larger to smaller), a new frame is required.
For example, let's suppose your animation has a boy staring
at a girl. The boy's heart is throbbing (growing larger
than smaller). The boy's heart can go from small to large
in one frame and then from large to small in the next frame.
|
|
2.
|
Order: At this point,
you probably have a good idea of what objects should be
in each frame, but you also should determine which objects
are in front of other objects.
|
|
3.
|
Times: Try to imagine
about how long each frame should be.
|
|
|
Setting What's in Front:
|
You are now ready to click the "Layers" button, and
set the viewing order (e.g., what objects are in the
front verses those in the back). If your animation
only has one frame and the order that you see on
the screen is correct, you can skip this step.
Click the layers button on the left for more help
with the layers panel.
|
|
Frame Times:
|
The frame times need to be set before you move or
scale (assuming that you don't want to simply use
the default times) in the area that is labeled "Timing".
You can set the frame with either the arrows or simply
by entering a number into the box. The times are set
by entering numbers into the "Begin" and "End" text
boxes.
|
|
Changing the Size:
|
You can go to the panel that changes the sizes of
the objects by clicking on the "Scale" button. The
scale panel also has the settings which allows the
objects to change size during animation.
Click the scale button on the left for more help
with the scale panel.
|
|
Making Things Move:
|
You can position an object on the screen by simply
dragging (hold left mouse key down, move the mouse, and
let the mouse key up - drop) the object to the desire place.
Don't click the move
button when positioning, because that will animate
the object when the animation is run.
Click "Move", and drag and drop which will cause a straight
line movement during animation. The application is limited
to straight lines, but but you can have 100 line movements
per frame. Drag and drop the sprite as many times as
you need (up to 100) to get the movement that you want.
Be sure to let the mouse key all the way up to ensure the
drop. Then click "Move" to finish the movement for this
object.
Repeat this exercise for all the objects that you want to
move in this frame.
|
|
Run the Animation:
|
When the "Move" and "Scale" are set for all the
objects that you want in the current frame, cycle
through the remaining frame while setting the "Move"
and "Scale". When everything is set, click the "Run"
button to start the animation.
|
|
Save Your Animation:
|
When you click "Run", the controls disappear, and
a single button, "Download", is presented. You can
save the animation by clicking "Download".
During the saving process you will be given a chance
to set the size of your animation in pixels. Of course,
you can also accept the default size.
|
|
|
Moving Objects to the Front or Back
|
|
Using Layers:
|
When the layer panel becomes visible, the screen will
show all the objects of the current frame. When the
"One" button is clicked, the "Layer" button will
become visible. Click to the sprite that you want to
set by using the blue arrows below "Sprites".
Sprites that have lower layers will be in back of
Sprites that higher layers. You can make an object
disappear by setting the sprite layer to 0, but you
have to click the "All" to see what you have. In
other words, you use the "One" mode to set the
sprite one at a time, and you use the "All" mode to
see what have on the screen (sort of like a dress
rehersal).
Cycle through the frames and set the order for each
frame.
|
|
Leaving Layers:
|
When all the layers have been selected, you can click
the "Done" button that will take you back to the
animation panel.
In other words, "Done" takes you back to the "Layers",
"Scale", and "Move" buttons.
|
|
|
|
Setting and Animating Size
|
|
Setting the Size:
|
You can scale an object by clicking on the object
that you want to scale. Then click the "Beginning"
radio button, and set the scale with either the text
box or scale bar. Click the "Ending" radio button
and set the ending scale the same as the beginning
scale.
|
|
Animating the Size:
|
The size of an object can be animated in the same
way it was set in the last paragraph, but make the
beginning and ending a different number.
When you set the scale animation for one frame at a
time. The frame that is display on the screen is the
frame that is being set.
You can scale more than object in a frame.
|
|
Leaving Scale:
|
When all the sizes have been set, you can click
the "Done" button that will take you back to the
animation panel.
In other words, "Done" takes you back to the "Layers",
"Scale", and "Move" buttons.
|
|
