Tutorial: Moving Images

1. Video

To create video: capture material with a digital camera, digital video camera, or cell phone video camera. Many devices will allow you to save file types that can be directly uploaded to video sharing sites such as youtube or vimeo.

If your video needs editing, use an application such as iMovie (for mac) or Windows Movie Maker (for pc). These programs allow you to export your video to one of the many file types viewable online (such as .WMV, .AVI, .MOV, and .MPG).

Once you have video on an online video sharing site, you can embed that video on your own page. The video will not be saved on your server, but viewed on your page through a process of syndication. On YouTube, for instance, the code you will need to embed your video is in a little frame that looks like this



If you want to avoid using a site such as YouTube when displaying video, one of these tutorials will show you how to embed mov files directly. It's easy.

2. GIF Animations

GIFs allow for another form of moving image that is most like stop-motion animation. To make an animated GIF, assemble a sequence of images and then "play" them at a specified speed. A nice example is this one; I'm not sure who made it.


GIFs have several nice features:

  • they're small files
  • they can be viewed on just about any browser
  • you can control every element when making them
  • you don't need fancy gear to make an animated GIF
This tutorial covers how to make GIF animations using GIMP. We'll do this in class.

3. MouseOvers

Reading online is very different from reading a printed book. When we read online, we both like to see images and to interact with them. An image that does something when we mouse over it can express something; it can also signal that the image is a link.

This is perhaps the most basic example of how mouseovers work. Check out the code for this page ("view source") to see how the "onMouseOver" command works. We will cover the construction of mouseovers in class.

one two
one one


Some cool examples of mouseovers (and the mouseover effect) include

4. Moveable Images

And if you want to even more interactivity to your moving images, this tutorial describes how to incorporate moveable images like the tofu robot below into your page. Go ahead, move the little robot around.