Zur Hauptseite der Uni Mainz Zur Hauptseite des

Fachbereiches Zur Hauptseite der CAFL Zur

Hauptseite der Vorlesung Telekommunikation

Anhang D2: Hilfsmittel für das Editieren von WWW-Seiten (Mac)

Frank Krüger, M.A.
Fachbereich 23, Johannes Gutenberg-Universität Mainz
Sprechstunde: Donnerstags 11-12 Uhr
e-mail: krueger@nfask2.fask.uni-mainz.de


  1. Bearbeiten von Graphiken und interaktiven Karten
  2. Adobe Acrobat Produkte - Elektronische Verbreitung druckfertiger Seiten
  3. Hilfsmittel zur Bearbeitung von Audio- und Videodateien

siehe auch:

Aus Zeitgründen sind hier zunächst im wesentlichen Kurzbeschreibungen bzw. die originial Bedienungsanleitungen der Programme wiedergegeben, um eine Orientierung über die allgemeinen Möglichkeiten zu geben.

1 Bearbeitung von Graphiken

1.1 Grafikkonverter

1.2 Interaktive Karten mit Webmap

Orig. Beschreibung:

1.2.1 Resizing:

Modifier Key(s)

= Command

= Command-Control

Left Arrow

Shrinks Horizontally 1 Pixel

Shrinks Horizontally 10 Pixels

Up Arrow

Shrinks Vertically 1 Pixel

Shrinks Vertically 10 Pixels

Right Arrow

Grows Horizontally 1 Pixel

Grows Horizontally 10 Pixels

Down Arrow

Grows Vertically 1 Pixel

Grows Vertically 10 Pixels

1.2.2 Moving:

Modifier Key(s)

= None

= Control

Left Arrow

Moves Left 1 Pixel

Moves Left 10 Pixels

Up Arrow

Moves Up 1 Pixel

Moves Up 10 Pixels

Right Arrow

Moves Right 1 Pixel

Moves Right 10 Pixels

Down Arrow

Moves Down 1 Pixel

Moves Down 10 Pixels

*NOTE: At this time, you cannot resize or reshape polygons. If the polygon is not drawn right, you must delete it and draw it again. Sorry about that, but it may change in the future.

Rowland Smith, City
627 NE 18th, #2, Portland, OR 97232

1.3 Animierte Graphiken mit GifBuilder

Orig. Dokumentation des Programmes (gekürzt!):

GifBuilder 0.3.2 Documentation

GifBuilder is a scriptable utility for creating animated GIF files. Its input is an existing animated GIF, a bunch of PICT, GIF and/or TIFF files or a QuickTime movie, and its output is a GIF89a file with multiple images.

Options include pixel depth, color palette, interlacing, transparency, interframe delay, disposal method, frame offset, looping and dithering.

GifBuilder should ultimately be placed onto many ftp archives, including Info-Mac (in gst/grf), Umich (in graphics/graphicsutil) and their mirrors.

Please read this document carefully if you want to get the best of GifBuilder. There are several shortcuts which can make your work much easier.

1.3.1 Usage

  1. Draw each frame
    Use any drawing program able to save as PICT, GIF or TIFF. Save frames in a new folder to make their retrieval easier. If you name them in alphabetical order (e.g. 0001.tiff, 0002.tiff, etc.), you can easily sort them later.
  2. Collect frames in GifBuilder
    Launch GifBuilder, be sure that there aren't frames from a previous animation in the Frames window (if that's the case, choose New in the File menu), and drag the frames from the Finder into the Frames window. If you don't have the Drag Manager (standard since MacOS 7.5), you can add each frame by choosing Add Frame in the File menu. You can also copy a picture from another application, or drag it. Then, check that they're in the correct order and, if necessary, change their order by dragging frames. You can also remove the selected frame(s) by choosing Clear in the Edit menu or hitting Backspace, sort them and reverse their order. Double-clicking a frame will open it in its own application; if you modify it, save it and choose Reload Frames in the File menu to update your changes (the Save command always use the disk copy).
  3. Set the options
    Set the standard graphic options (pixel depth, color palette and dithering); the GIF options (size, interlacing, transparency); and the animation options (interframe delay, disposal method, frames position and looping). Some of these properties (transparency, interframe delay, disposal method and position) are attached to individual frames; select the frame or group of frames before changing them. If no frame is selected, the settings will apply to the default values used for images you import.
    You can save the default options by choosing Save Options in the Options menu.
    Tip: Most options displayed in the Frames window can be changed by clicking or double-clicking them.
  4. Check the animation
    Choose Run in the Animation menu. To display a specific frame, stop the animation and select it in the Frames window. You can also use the Home, End, Up and Down keys. To start from the first selected frame, choose Continue. In the Animation window, you can move a frame by dragging it, or select the transparent color by Shift-clicking it (you can do it even when the animation is running, but depending on the speed, you'd better stop it first!).
  5. Build the animation
    Choose Save As in the File menu.
  6. Add an image tag to your HTML page
    Choose Copy HTML Image Tag in the Edit menu, and paste the resulting IMG tag in your HTML page. IMG fields contain a relative URL with the current name of the animation as well as the width and height. Of course, you can edit the tag to change the path of the image or add optional fields like ALT and ALIGN.

1.3.2 Options

* Interlaced: With interlacing, a first rough image is loaded first, and then the vertical resolution improves in three additional passes. It isn't very useful for animations.
Colors and Depth: For cross-platform web animations, the 6x6x6 color table is recommended. The system (or grayscale) 1 bit/pixel table should be used for black and white images. Images created with other settings are likely to be dithered on color-table-based machines.

* Dithering: Dithering is a way to simulate intermediate color shades with clouds of points. It should be used with continuous-tone images. With dithering, the color table should be chosen so that the image isn't dithered a second time on the target machine (see above), and transparency should be off.

* Image Size: When Minimum Size is on, the size is calculated so that the animation's bottom right corner corresponds to the rightest lowest frame. Frames are always cropped to fit in the animation bounding box.

* Background Color: The Background Color is the color used to paint the animation bounding box where no frame is displayed. With some Web browsers, the page background is used instead.

* Loop: The Loop option specifies how many times the animation is repeated. Some browsers don't recognize this option, while others loop an unlimited number of times if the setting is more than 1.

* Transparent Background: All pixels wich have the color specified by the Transparent Background are left untouched when the frame is rendered.

* Frame Position: Each frame can be shifted by an arbitrary amount. The Frame Position specifies the horizontal and vertical distances between the top left animation corner and the top left frame corner. Positive values push the frame to the left and to the lower part. Negative values result in a cropped frame.

* Interframe Delay: The Interframe Delay is the delay between the current frame and the following frame renderings. It's specified in hundredths of seconds (i.e. 100 means 1 second).

Disposal Method: The Disposal Method specifies what each frame becomes once the interframe delay is elapsed. Use Unspecified when transparency is off and each frame covers the whole animation, Do Not Dispose when you want to add some bits of image to the previous animation state, Revert to Background for moving objects on a transparent background, and Revert to Previous for moving objects on a background you've drawn with an earlier large frame. Note that Revert to Background isn't supported by some browsers.

* Frame Optimization: The Frame Optimization option crops each frame (but the first one) to the part that has changed. This can result in tremendous file size savings. If some, but not all, of the frames have the Disposal Method set to Revert to Background, you are warned that this may give unexpected results.

1.3.3 Remarks

After asking you if you want to save your previous animation, New removes all the frames and reads the default settings from the Preference file.
You can open an existing animation, or append to the end of the current animation by holding down the Shift key and choosing Open in the File menu or typing Command-Shift-O.
Frames displayed in italic are loaded in memory, while those displayed in roman correspond to separate files.
You can convert a QuickTime movie directly to an animated GIF without opening it, by choosing Convert in the File menu. This saves a lot of memory.
Clear (in the Edit menu) or the Backspace key deletes the selected frames. To preserve the timing, hold down the Shift key and choose Special Clear or type Backspace. Example:<gestrichen>
Undo allows to return to the state just before the last operation which changed the frames or frame order.

1.3.4 Color palette

System Palette and Gray Shades are fixed palette. Best Palette is optimized for all the frames simultaneously. Load Palette allows to use a Photoshop-compatible palette file. Four such palettes are included with GifBuilder. The first one, named "6x6x6 Palette", is a subset of the System palette where each component takes the six values 0, 51, 102, 153, 204 and 255; it has 6x6x6 = 216 entries. It's the palette used by NetScape for Windows, so you might want to choose it to avoid additional dithering on both Macintosh and Windows machines. You can also use subsets: "Gray from 6x6x6 Palette" (six gray values of the 6x6x6 palette), "2x2x2 Palette" (eight basic colors where each component is 0 or 255), or "16 from 6x6x6 Palette", superset of the previous one with eight additional colors: (153,153,153), (0,153,255), (255,51,0), (51,153,0), (255,153,255), (153,204,255), (255,255,153) and (204,204,204) (see below). All of them should give good results on both the Mac and Windows.

Note that the 4-bits-per-pixel System palette has some intermediate colors and shouldn't be used if you're concerned about cross-platform issues.

To reuse the color palette of an existing GIF, open the GIF file with Open (in the File menu) and save the palette with Save Palette (in the Colors submenu of the Options menu). The GIF file doesn't have to contain multiple frames.

The format of palette files is 256 entries of three bytes which represent the red, green and blue values of the corresponding index. 0 is black, and 255 is the maximum intensity. For palettes of less than 256 colors, fill the unused entries with the last used one. The file type is '8BCT', and the file creator should be 'gfBr' (GifBuilder's) to have a nice icon. Note that in AppleScript, RGB values are in the range 0-65535; to convert them from a byte value, multiply them by 257.

When you load a palette, you can't choose the depth anymore. Choose a System, grayscale or best palette before changing the depth.

Scripting (gestrichen!)

1.3.5 Frequently Asked Questions About Animated GIF
Local animations are ok, but when I use an HTTP server, they don't loop and the end of the last frame is corrupted. What happens?
You probably corrupted the file when you uploaded it to the server. Be sure that you choose the binary mode (not MacBinary) for your file transfer.
Can I choose which frame is displayed by old browsers?
No. Some GIF decoders display only the first frame, while others render all the images but don't recognize the looping NetScape 2.0 extension.
Netscape doesn't display correctly transparent animations. Is there a trick?
Try to set the Disposal Method of all the frames to Revert to Background, and specify a background GIF to be tiled behind the HTML page with the <body> tag: <body background=tile.gif>.
Is it possible to have an animated background?
Not with the current versions of Netscape (2.0(x)).
Should I put the original images on my server?
No. Animated GIFs are completely self-contained. They don't contain any references to the original files.
How can I stop animations in NetScape 2.0 for the Mac?
You should hold down the Command key and hit the dot key exactly when NetScape reloads the image from its cache. About GifBuilder
I want to keep the color palette of my frames, which are GIF files. What should I do?
Open one of your frames in GifBuilder with Open, add the other frames and set their options, and save the result.
Why can't I choose a System Palette with a depth of 3, 5, 6 or 7 bits/pixel?
Because the Mac doesn't define such palettes.
Why is the transparency set to First Pixel even if I specify a color?
In GIF files, the transparency is always based on a color. When GifBuilder reads an animation, it looks at the first pixel to see if it's the transparent color, and if so reports that the transparency is based on it.
How can I choose the comment displayed by JPEGView and other utilities?
You can't. GifBuilder adds a fixed comment containing its and my names. This is deliberate.
I've found a GifBuilder bug! Revert to Previous doesn't work!
If your browser doesn't handle correctly a feature, this isn't necessarily a GifBuilder bug. This one, for instance, is most probably not.
Images are dithered even if I don't select it in GifBuilder! Why?
Images are usually dithered by the browser if its palette isn't the same as the GIF's. You'd better use the 6x6x6 palette provided with GifBuilder, which is used by several browsers on the Mac as well as on alien machines, and let GifBuilder do the dithering if you need to.
I don't use Windows 3.1 anymore. Are you working on a Windows NT version?
GifBuilder runs on the Mac. I don't intend to port it to any currently available operating system (I might have ideas about new ones, however).

1.3.6 Small Print

This document is Copyright 1995-1996, Yves Piguet. All rights reserved.
The author makes no warranty with respect to this document, its quality, accuracy, or fitness for a particular purpose. As a result, this document is provided "as is", and the user is assuming the entire risk as to its quality and accuracy.


Yves Piguet < piguet@ia.epfl.ch>
Av. de la Chablière 35
1004 Lausanne

2 Adobe Acrobat - Elektronische Verbreitung druckfertiger Seiten

2.1 Adobe Acrobat Distiller
2.2 Adobe Acrobat Exchange

3 Hilfsmitel zur Bearbeitung von Audio- und Videodateien

3.1 SoundEdit
3.2 Sparkle/MovieTrilogy

Zur Hauptseite der Uni

Mainz Zur Hauptseite des Fachbereiches Zur Hauptseite der

Computeranlagen Zur Hauptseite der Vorlesung

Telekommunikation Zur Inhaltsübersicht

Die URL-Adresse dieser Seite ist: http://www.fask.uni-mainz.de/cafl/kurse/komm/komm-d2m.html

Letzte Bearbeitung:

Erstellt und bearbeitet von F. Krüger (e-mail: krueger@nfask2.fask.uni-mainz.de) im Rahmen des Kommunikationskurses im Wintersemester 1996/97. .

[1]: Von diesem Dokument sind auch andere Dateiformate verfügbar!