Lab 7: Animation and Multimedia

Creating a Web Page for Multimedia

  1. Create a folder named weblab7 in your folder.
  2. Open Mozilla Composer.
  3. Click Format, Page Title and Properties. The page title should be Web Lab 7 by your name.
  4. Type Web Lab 7 by your name into the document and format it as Heading 1.
  5. Save your page into your weblab7 folder with file name weblab7.html.

Creating an Animated GIF

  1. In your page type Animated GIFs and format as Heading 2.
  2. Copy a small (less than 10 kb) image file such as open_office_org_logo.bmp into your weblab7 folder.
  3. Click the K menu, move to Multimedia, move to Graphics, and click the GIMP.
  4. Open the image file.
  5. If necessary, convert to RGB. Right-click the image, move to Image, Mode, and click RGB.
  6. If necessary, save the file as an .xcf file.
  7. Right-click the image, move to Script-Fu, Animators, and select Rippling, Spinning Globe or Waves.
  8. Click OK to create the animation frames.
  9. To view the frames produced, look in the Layers window.
    You could edit each frame to produce your own animation, but that is more time-consuming.
  10. Right-click the animation, click File, Save As, and type animate1.gif. (Determine File Type should be set to By Extension.)
  11. Click Save as Animation and click Export. Click OK.
  12. Close the animation image window.
  13. Open animate1.gif in a browser to test that it is animated.
  14. Insert animate1.gif as an image into your page. Provide an appropriate alt attribute. Test in your browser.

Creating a Second Animated GIF

  1. Right-click the original image, move to Script-Fu, move to Animators, and click Selection to AnimImage.
  2. Number of copies should be 10. Both check boxes should be selected. Click OK.
  3. Select plug-in-applylens. (Most other plug-ins have more complicated options.) Click Apply Varying.
  4. To set the beginning parameters, change Lens Refraction Index to 1.00. Click OK. Click Continue.
  5. To set the ending parameters, change Lens Refraction Index to 3.00. Click OK. Click Continue.
  6. Save as animate2.gif and test in a browser. Insert as an image into your page and test.

Linking and Embedding Sound Files

  1. In your page type Sounds and format as Heading 2.
  2. If your computer has speakers, switch them on.
  3. You should see a volume icon in the lower right corner of your screen.
  4. Click K, Multimedia, Sound, KMix to adjust volume and other audio hardware settings.
  5. Click the links to ringin.wav and cuckoo.au to test if you can hear them.
  6. Copy these or two other small (less than 10 KB each) sound files of different types into your weblab7 folder.
  7. In your page create links to these files as you would for any other file type.
  8. Edit the source of your page and add embed tags for each sound:
    <embed src="filename.ext" width="50" height="50" autostart="false">
  9. Test in different browsers.You may not hear both sounds if the appropriate plug-in is not installed.
  10. You may want to try opening these files using the X Multimedia System.
    Click K, Multimedia, Sound, XMMS. Press L and select a file to open. Click > to Play.
  11. If your computer has a microphone, you can record a sound using krecord. 

Linking and Embedding Video Files

  1. In your page type Videos and format as Heading 2.
  2. Linking and embedding video files is the same except the file type is different (.avi or .mpg).
  3. Add a link to file:/usr/share/xine/visuals/default.avi .
    Note: You should not copy this file into your folder, since it is rather large.
  4. Test your link in a browser.
    If asked for a program to open the file, click Multimedia, click Video and choose xine video player. 

Embedding a Java Applet

  1. In your page type Java Applets and format as Heading 2.
  2. Copy the NervousText.class file into your folder.
  3. Add the following HTML code to the source code of your file:
    <applet code="NervousText.class" width="534" height="50">
    <param name="text" value="Your Name">
    </applet>
  4. Test in a browser. If your name does not appear in nervous text, make sure Java is enabled in your browser.
  5. Go to the Java Tutorial and click Getting Started. The waving creature is a Java animation.
    View the page source to see the structure of the applet tag.
    View the folder /home/umu/JavaResources/tutorial/getStarted/example/ to see the .gif and .class files.
  6. For a JavaScript animation, view the student photos and click the Start button.
    View the page source and the imgbrows.js file to see the scripting language used.

Embedding Objects

  1. In HTML 4.0, images, sounds, videos and Java applets can all be treated as objects.
    Add the following HTML code to the appropriate sections of the source code of your file:
    <object data="animate1.gif" type="image/gif" width="200" height="100">Your Name</object>
    <object codetype="application/java" classid="NervousText.class" width="534" height="50">
    <param name="text" value="Your Name">
    </object>
  2. Test in a browser.

E-Mailing as an Attachment

  1. Use Ark to compress your weblab7 folder to weblab7.zip.
  2. Be sure that the total compressed size does not exceed 100 KB. It will probably be less than 50 KB.
  3. Send the weblab7.zip file as an e-mail attachment to gvogl@umu.ac.ug with subject line web lab 7.