PhotonJam is an advanced online HTML5 animation tool allows you to create still images or animated GIF images using a combination of uploaded images, symbols and hand drawn art.
The PhotonJam app is very versatile and does many things so take some time and learn how to use it before trying to make anything to advanced.
PhotonJam acts similar to animation software for desktop computers where you add objects to a stage, manipulate them and compile them to a final result.
It's helpful to think of the app as a stop motion animation tool. Where you load in many images and play them in sequence for the final result.
The app makes use of frames and keyframes.
A frame is like an image snapshot of an event and a keyframe is a frame that marks when a change has occurred.
Your job as the animator is to create frames to be played in sequence.
Typical animation work flow
A typical work flow is as follows:
- You'll use drawing tools, images and symbols and add them to the stage. Items added to the stage are known as objects.
- You'll move these objects around or change them as you like.
- When the stage view is how you like, you take a "snapshot" of it by clicking the "Add Keyframe button" Add key frame.
- The newly created frame will be located in the timeline. (you can edit it if you like...more on that later)
- Repeat this process of making changes to the stage and adding frames to complete your animation.
OK that's it in a nutshell. You can try things out now by playing around with the various controls or continue reading for even more helpful instructions.
The Stage Mirror helps you to see what happened in the frame that is currently selected as active in the timeline and in relation objects you are currently moving around on the stage. It works kind of like an onion skin effect in other animation tools and lets you see where you have been when adding new changes.
Everything you add to the stage is considered an object. Text, images, drawings everything!
PhotonJam works on the last object manipulated model. Which means the last object you use is the "active" object.
All the controls impact the active object. The controls are multi-use which means their effects depend on how it is used by the active object. When in doubt as to what the active object currently is, use your mouse to slightly move the object you want to work on to ensure it is indeed active.
There are quite a few ways to make and move objects. The most obvious way to make changes to objects on the stage is to use a mouse. But you can also use a keyboard.
- Arrow keys and WASD keys to move objects left or right and up or down.
- Spacebar to add snapshot of current stage as keyframe (same as add keyframe button).
- Less than and greater than symbols to rotate objects. Rotating lines drawn with line tool doesn't work to well ...sorry:(
Frames and Keyframes
Keyframes are the individual events in your movie. A frame is a copy of the previous keyframe. You can insert frames after a keyframe to make that particular even last longer. So for example: a keyframe with a picture of a car on it with 6 frames after it will be visualized as an approximately one second long shot of a car as long as the next keyframe changes the position of that car. Adding frames after a keyframe essentially holds what is on the keyframe for a certain amount of time. A seconds worth of time is approximately 6 frames.
Drawing and Sketching
There are 2 ways you can add your own drawings to the stage.
- Upload drawings from your computer.
- Use the built in Sketch app to draw.
Which ever option you choose, you will be able to add your drawings to the stage. The sketch app also features the ability to draw on a transparent background. Thee transparent background combined with the ability to drag the app around the screen gives you a digital lightbox! Try dragging the Sketch app over the stage to trace things, It's super fun!
A neat trick you can do with the Sketch app is draw something then click the "send to stage" option. The click "Add keyframe" button. Each time you do this a snapshot of what you draw will be made into a keyframe.
See below for notes on uploading your own artwork.
Uploading your own artwork images and symbols
You can upload your own images by first clicking the "Upload Image" which opens the library. There, you should see a button named "Browse" that will allow you to select files from your computer.
All uploaded files go into the library. When you click a file in the library it is automatically added to the stage.
Generate a GIF
Once you are satisfied with your work press the Generate button to generate a GIF. You can always edit it again.
Saving a project
Saving a projects lets you save your work to a text file that you can upload later. In order to save a project you must add at least one keyframe.
Uploading a project
Upload a saved project to resume working on it.