Creating Animated GIFs
Creating the dancing "Click" that you saw on the previous page was rather easy, but then again we have the applications that make it so. The original graphic was created in Adobe Illustrator by putting a number of components (arrow, face, arms, legs) together. After Click was assembled, each item was brought into Adobe ImageReady and placed on a separate layer. Click was then reassembled. After Click appeared in one piece, a new frame was added, and all of the layers were duplicated. The layers that were visible in frame 1 were hidden, and each component was moved into a different position. Then a 3rd frame was created and once again all of the layers were duplicated, and the previous frames layers were hidden. We moved all the elements around again. Finally the interval between frames was set at .2 seconds, and the image was set to loop. Then we did a Save Optimized as a gif and viola! Dancing Click was born.
The movie was not difficult to create, but whenever you work with movies, realize that you will be making an invest in time. First the we shot video of our NOC room with the lights on and off. Then we shot video of the screen of one of our webservers. The last video clip was a clock that came on the multimedia CD included with Adobe Premiere. The audio clips were downloaded mp3 files that we converted to .wav files using SoundJam. The text in the movie is mostly titles created in Premiere, however there were two lines ("Check out . . .", and "all theses . . . "), as well as the beginning title that were created in Adobe Illustrator.
The beginning of the movie contains a clipped piece of the 2001 Space Odyssey theme as well as two video tracks. In one track we simply cut out a number of frames in various places that allowed the track below it to show through. Then as a transition from the NOC room to the webserver screen, we used a cross zoom transition. That transition corresponds to the beginning of the audio track "Higher" by Creed. That track was also sliced to begin playing the appropriate part of the song at the right time. Finally we flew in a few titles, faded in and then out a video track of the clock, and then faded the music out at the end before the end title appears.
Putting movies on your site can add something to interest your viewers, however, it can be a bit tricky to play the file size vs. movie quality game. That's why we are here to provide you with assistance. We will provide you some guidance using the clip described above (found on the previous page) as an example.
We decided to save the larger version as a .mov file because it was created on a Macintosh.
The first thing we did to limit the file size without sacrificing quality was to shrink the movie size to 160 pixels wide by 120 pixels high. Small changes in pixel size will cause large changes in the file size, so play with it until you find a size you are happy with.
Another consideration that will dramatically effect the file size is audio. Audio will increase the file size, but you have some control over how much. For instance, in the Quicktime version of the simplehosting.com promo above, we chose Mono for the channels, 16 for the bit rate, and 22kHz for the resolution. We could have reduced the file size by 500K by choosing a bit rate of 8 and a resolution of 8kHz as well. We found that unnecessary for this file.
Finally the you can adjust your file size by choosing a different number of frames per second, as well as choosing different video compressors. In the above file, we chose 15 frames per second, and the Sorenson Video compressor.
To create the smaller version (Real Player), we used Real Producer. We chose the "Corporate LAN" setting for the target audience because it gave us the quality/file size trade off that we found most acceptable. For the audio setting we chose "Music" since our movie contains music throughout the entire clip. Finally we chose "Normal Motion Video" for the video setting since there is some amount of motion throughout the entire clip.
Although we used the embedded player when we created the Real Player version web page, I would generally not use that version. The reason being that the embedded player is an ActiveX control which only works with Internet Explorer, and not Netscape. It would be a poor design to create a page that cannot be viewed using a particular browser.
Creating Flash Movies
Flash is a bit different than any other multimedia application covered on this web site thus far. The images used in our Flash movie came from an index stock cd that we purchased. The sound is a converted mp3 file that was downloaded with Macster. The mp3 was converted to a .wav, taken into Adobe Premiere and cut. It was then looped once it was placed in the Flash movie. The buttons were created the same way that all buttons are created in Flash. I suggest reading the lesson on creating the buttons for assistance.
The intro to the movie was created by taking a small version of a static image of a road, and blowing it up over many frames. This gives the appearance of full motion video with out the large file size. We then faded the photo out by changing the alpha of the photo to 0%. Next we brought in a text box and moved it around a bit before having it fade out using the same technique described above. Next we brought in some vertical bars from the side of the image area, and had them cross in front of each other. Then we brought the "simplehosting.com" text in numerous times from the bottom, and we created a small movie to animate the "." in ".com". Next, we shrunk a photo down, made its alpha 0% and then increased its size and alpha until it was visible. Finally we brought in a little more text from the bottom, and to make things a little more interesting, we gave it a little spin.
The results of all of this work was a file that appears to have full motion video with sound and a file size that is only 114K. Even on a 28.8 modem download time will be rather short for the type of content the user can view. While publishing we chose to display the JPEGs at a quality of 65. This appears to have resulted in good quality and file size. In comparison to other types of media, the Flash movie uses very little bandwidth. A similar movie saved as an .avi file would be several megabytes. Real Producer would create a full motion clip with the smallest file size, but even so, a similar Real Producer clip would be over 400% larger in file size.