| Developed For: |
Multimedia Programming Class |
|
Completed In: |
1 week |
| Technologies: |
Javascript, Photoshop |
|
Website Link: |
click here |
This project was assigned to show us that we can animate still frames by using Javascript.
We first had to create all the pictures by hand using Adobe Photoshop and then write the code that
allows Javascript to loop through all the pictures. Our teacher compared it to one of those flip books that animators
use.
The assignment only called for 20 to 30 pictures that would be used for the entire animation; however I wanted
to go above and beyond this requirement. I wasn't going for an exact number of pictures but I wanted it to be
a smooth animation so I made the objects in the frames move in short increments because I knew that the Javascript
would be able to speed up or slow down the transistion from frame to frame. I spent a good 4 hours over 3 days moving
all my objects and saving each frame as a separate picture and in the end, I had over 500 pictures.
My animation consisted of a plane taking off, flying in the sky, dropping a bomb over some mountains, the bomb exploding,
and then the scene fading to a night scene.
The next part was to write the Javascript to put all of these pictures together. The teacher just asked for a small dot
representing each frame and when the user would hover over the dot, the new picture would be displayed (basically an image swap).
An example of what the teacher wanted is shown below.
So in the end, if you followed the teacher's code (which by the way he handed out to everyone), you would have to use your mouse and
go back and forth on all the dots to see the animation. Of course, I wanted to be different and wanted a way of watching the
animation without having to work - plus I had 500+ images so I wasn't going to make 500 dots to hover over.
A simple example of what the teacher wanted
|
 |
|
| Move your mouse over the blue rectangles |
In order to get what I wanted, I ended up studying the code behind lots of Javascript slideshows that I found on the web and used
pieces to create my final Javascript animation. It allows the user to set the time between each frame so one can control how fast/slow
the animation plays, and once the speed is set, all you have to do is hit the play button.
When it came time for everyone to show their animation in class, everyone was blown away by mine because it was so long, allowed
the user to control the speed of the animation, and they realized how much work I had put into it. The teacher's comment was
"You must not have a life" since he knew how much time it took to make 500+ images.
In the end, I was satisfied with the final product even though I put 10x the time into it than anyone else did. The only problem is
that all the images must be preloaded onto the user's machine in order to make the animation run smoothly. Therefore, I created a
preload page which shows all the images in the animation. Just be patient as loading 500+ images take some time.
Enjoy the show!
|
