Computergraphik

1 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Seminarsitzung Nr. 6

Computergrafik

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

Gruppe:Gregor Kuhnert, Adrian Pfahlsberger, Uwe Schollän, Peter Welter , Julian Zemke

2 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Wie entsteht Graphik im Computer?

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

3 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Definition

„… Dichte der Wiedergabe auf einem technischen Bildträger, die Fähigkeit eines (optischen) Geräts, sehr feine Details zu unterscheiden.“STRAUSS (1992)

Auflösung

4 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Analoges Bild aus der Realwelt

Darstellung von Bildern auf dem Computermonitor oder beim Ausdruck nicht durch ein analoges Signal,sondern durch einzelne Bildpunkte die in so genannten Bitmaps angeordnet sind

Pixelorientierte Programme können gespeicherte

Bildpunkte 1:1 auf dem Monitor abbilden.

Objektorientierte Programme müssen dagegen

gespeicherte Funktionen (Objekte) für die Darstellung am

Monitor optimal in Bitmaps umrechnen

Auflösung

5 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Analoges Bild aus der Realwelt

Abb. 1: Helligkeitsverteilung einer Zeile eines Fotos

Auflösung

6 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Analoges Bild aus der Realwelt

Da im Computer Bilder jedoch in diskreten

digitalen Werten repräsentiert werden müssen,

wird die Bildzeile in gleichmäßige Abschnitte

unterteilt und an den jeweiligen Punkten

gemessen

Diese Unterteilung nennt man Auflösung des Bildes.

Auflösung

7 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung Abb. 2: Auflösung des Bildes

Auflösung

8 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Je höher die Auflösung,

desto genauer kann das analoge Bildsignal erfasst werden

+desto höher ist die Qualität des gescannten Bildes

Auflösung

Abb 3: verschiedene Auflösungen eines Kreises

9 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung Abb. 4: Siemensstern

Auflösung

10 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Auswirkungen

• Die Höhe der Auflösung bestimmt wesentlich die Schärfe des Bildes und die Kontrastmöglichkeiten beim Ausdruck

Auflösung

Abb. 5: Huhn mit Küken in 72 dpi / 36dpi / 10 dpi

11 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Auswirkungen

• Die Höhe der Auflösung bestimmt wesentlich die Schärfe des Bildes und die Kontrastmöglichkeiten beim Ausdruck

• Das Schlüsselelement bleibt jedoch das Ausgabegerät !!!

Auflösung

12 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Auflösung

Typ Bezeichnung Max. Auflösung

MDA Monochrome Display Adapter

25 Zeilen x 80 Zeichen

CGA Color Graphic Adapter

640x200 / 2 Farben 320x200 / 4 Farben

MCGA Multi Color Graphic Adapter

320x200 / 256 Farben

EGA Enhanced Graphic Adapter

640x350 / 16 Farben

VGA Video Graphics Array

640x480 / 256 Farben

XGA Extended Graphic Array

1024x768 / 256 Farben

Tabelle 1: Typenüberblick der traditionellen Grafikkartentypen

13 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Auflösung

Auflösung Farbanzahl Min. RAM 640x480 16 256 KB

640x480 256 512 KB

800x600 65536 1024 KB

1024x768 16,7 Millionen 2560 KB

1280x1024 65536 3072 KB

1280x1024 16,7 Millionen 4096 KB

Tabelle 2: Auflösung und Speicherbedarf (Auswahl)

14 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spektralbereich

Farbtiefe

Quelle: weblab.uni-lueneburg.de

- Farbwahrnehmung ist subjektiv

- 3 Arten von Zapfen

15 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

RGB Modell

- 3 Grundfarben

- Jede Farbe über Anteil definiert 0-255

- 16,7 Mio. Farben darstellbar (256x256x256)

- Geeignet für Geräte die Licht aussenden

- Besondere Kompatibilität mit Röhren Monitoren

- Kein negativer Farbanteil

Farbtiefe

16 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

RGB Modell

Farbtiefe

Farbe RGB Wert

Name Farbton Rot Grün Blau

Rot 255 0 0

Blau 0 0 255

Grün 0 255 0

Cyan 0 255 255

Gelb 255 255 0

Magenta 255 0 255Quelle:Bender, 2006

http://www.prismaprint.ch/farben/farbenlehre.htm

17 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

HSL Farbmodell

Farbtiefe

Farbton

Farbsättigung

Intensität

Quelle:www.prismaprint.ch

18 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

CMYK

Farbtiefe

-Keine Lichter die Strahlen

-Verluste bei mehrmaligen Umwandeln von CMYK / RGB

-Negativer Farbanteil möglich

Quelle:Bender, 2006

19 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Lab-Farbmodell

Farbtiefe

Helligkeit

2 Farbkanäle

•Farbraumkombination von RGB / CMYK

•Internes Farbformat von Photoshop

Quelle:www.tu-dresden.de

20 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Farbtiefe

•1 Pixel = 1 Bit

•Schwarz / Weiß Darstellung

21 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

1 Bit / 2 Farben

Farbtiefe

22 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Farbtiefe

• 1 Pixel = 8 Bit

• Jeder Pixel kann eine von 256 (2 hoch 8) Farben annehmen

• Max. 256 verschiedene Displayfarben

23 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

8 Bit / 256 Farben

Farbtiefe

24 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Farbtiefe

• 1 Pixel = 24 Bit

• 2 hoch 24 = 16,7 Mio. Farben

25 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

24 Bit / True Color

Farbtiefe

26 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Grafik- Dateiformate

27 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Grafik- DateiformateGrafikformate: ImageMagick (1)

• 8BIM Photoshop resource format• AFM TrueType font• APP1 Photoshop resource format• ART PF1: 1st Publisher• AVI Audio/Visual Interleaved• AVS AVS X image• BIE Joint Bi-level Image experts Group interchange format• BMP Microsoft Windows bitmap image• CAPTION Caption (requires separate size info)• CMYK Raw cyan, magenta, yellow, and black samples

(8 or 16 bits, depending on the image depth)• CMYKA Raw cyan, magenta, yellow, black, and matte

samples(8 or 16 bits, depending on the image depth)

• CUT DR Halo• DCM Digital Imaging and Communications in Medicine image

28 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Grafik- DateiformateGrafikformate: ImageMagick (2)

• DCX ZSoft IBM PC multi -page Paintbrush• DIB Microsoft Windows bitmap image• DPS Display PostScript• DPX Digital Moving Picture Exchange• EPDF Encapsulated Portable Document Format• EPI Adobe Encapsulated PostScript Interchange format• EPS Adobe Encapsulated PostScript• EPS2 Adobe Level II Encapsulated PostScript• EPS3 Adobe Level III Encapsulated PostScript• EPSF Adobe Encapsulated PostScript• EPSI Adobe Encapsulated PostScript Interchange

format• EPT Adobe Encapsulated PostScript with TIFF preview• FAX Group 3 FAX

29 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Grafik- DateiformateGrafikformate: ImageMagick (3)

• FILE Uniform Resource Locator• FITS Flexible Image Transport System• FPX FlashPix Format• FTP Uniform Resource Locator• G3 Group 3 FAX• GIF CompuServe graphics interchange format• GIF87 CompuServe graphics interchange format

(version 87a)• GRADIENT Gradual passing from one shade to another• GRANITE Granite texture• GRAY Raw gray samples (8 or 16 bits, depending on

the image depth )

ABCDEFGHIJ K L M N O P Q R S T U V W X Y Zhttp://www.imagemagick.org/script/index.php

30 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Grafik- Dateiformate

• bestehen aus einer

festen Anzahl von

gitterförmig

angeordneten

Bildpunkten (Pixel,

Picture Elements)

Computergrafik

Vektorgrafik Pixel- /Rastergrafik

• alle Elemente die in

der Grafik

vorkommen werden

als geometrische

Figuren in ihrer

mathematischen

Beschreibung

gespeichert

31 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

1. Pixelgrafik

• Der Datenumfang errechnet sich aus:

1. der vertikalen und der horizontalen Auflösung

2. multipliziert mit der Quantisierung

Pixelgrafik

Dateigröße Vorteile Nachteile

• enorme Vielfalt an Farben und Texturen

• Fotorealistische Darstellungen möglich

• meist relativ hoher Speicher-verbrauch

• Alias-Effekt (Treppeneffekt)

• Bei der Vergrößerung kommt es zu einer „pixeligen“ oder unscharfen Darstellung

32 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

1. Pixelgrafik

Beispiel für die Dateigröße:

• Schwarz-Weiß-Grafik mit einer Auflösung von 640x480 Bildpunkten und einer Farbtiefe von 1 Bit

• Dateigröße von 38 KB

• Bei einer Auflösung von 2.048x1.536 bei QXGA und einer Farbtiefe von 24 Bit

• unkomprimierte Dateigröße von 9,5 MB

33 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

1. Pixelgrafik

Was kann man machen um die

Nachteile zu verringern?• Antialising

• Komprimierungsverfahren (Dateigröße)

34 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

1. Vektorgrafik

• ist von der mathematischen Komplexität der dazustellenden Objekte abhängig

Vektorgrafik

Dateigröße Vorteile Nachteile

• kann verlustfrei rekonstruiert und kompakt gespeichert werden

• Kann beliebig skaliert werden

• erreicht nicht die Vielfalt an Farben und Texturen wie Pixelgrafiken

35 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Vektor-Grafikformate

• SVG• Postskript • PDF• Adobe Flash• …

36 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

SVG-Format

• Scalable Vector Graphics (SVG, Skalierbare Vektorgrafiken)

• zweidimensionale Vektorgrafik in der XML-Syntax

• SVG wurde im September 2001 vom W3C als Empfehlung veröffentlicht

37 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

SVG- Format

38 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

PostScript- Format

• PostScript ist eine Seitenbeschreibungssprache

• unter diesem Namen seit 1984

von der Firma Adobe entwickelt

• PostScript hat sich über die Jahre zu einem Standard in der Druckindustrie entwickelt

• wird aber teilweise vom Portable Document Format (PDF) verdrängt

39 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

PDF-Format

• PDF ist eine vektorbasierte Seitenbeschreibungssprache

• basiert auf dem gleichen Grafikmodell wie

PostSkript

• PDF erlaubt gegenüber PostScript

zahlreiche zusätzliche Funktionen

• freie Skalierbarkeit der Darstellung

• beschreibt das Layout in einer vom Drucker und von Voreinstellungen unabhängigen Form

• weitgehend originalgetreu

• kann mit PlugIn direkt im Webbrowser angezeigt werden

40 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Flash- Format (SWF)

• auf Vektorgrafiken basierendes Grafik- und Animationsformat

• proprietäre integrierte Entwicklungsumgebung zur Erstellung multimedialer Inhalte

• Flash findet heutzutage auf vielen Webseiten Gebrauch

• als Werbebanner oder in Form kompletter Flash-Seiten

• Für vektorisierte, interaktive Animationen im Web ist Flash derzeit fast alternativlos

• Vergleich mit SVG

41 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Pixelgrafik- Dateiformate

Wie unterscheiden sich

Rastergrafik Formate?

• Auflösung• Farbtiefe

• Farbtabelle• (Kompression)

42 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Pixelgrafik- Dateiformate

• Bitmap• GIF• JPG• PNG• TIFF• …

43 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Bitmap- Dateiformat• Bitmap-Dateien können unkomprimiert oder mit

der verlustfreien Lauflängencodierung (RLE) komprimiert sein

• Jedes einzelne Pixel, des in Spalten und Zeilen aufgelösten Bildes, hat seine eigenen RGB-Werte

44 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Bitmap- Dateiformat

Lauflängencodierung (RLE)• ist eine verlustfreie Kompression • Prinzip: eine Folge von gleichen Zahlen,

Zeichen oder Buchstaben wird durch ein einziges Symbol und die Angabe über die Anzahl der gleichen Symbole ersetzt

45 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

GIF- Dateiformat (graphics interchange format )

• Grafikdateiformat mit verlustfreier Kompression (LZW-Verfahren) für den Austausch von Bilddate

• Farbauflösung von 256 Farben

• wird von links oben nach rechts unten zeilenweise gespeichert

• Transparenz möglich

• 2D-Animationen können mit Animated GIF aus einer Sequenz von Einzelbildern erzeugt werden

• Stufenweiser Aufbau des Bildes (Interlacing)

46 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

GIF- Dateiformat (graphics interchange format )

LZW- Algorithmus• von Jacob Ziv, Abraham Lempel und Welsh 1984

entwickelt

• Annahme: in einer Datenfolge wiederholen sich bestimmte Datensequenzen

• beispielsweise bestimmte Farbmuster

• Daten werden in Abschnitte zerlegt und in eine Codetabelle eingetragen

• dazu wird ein Datenblock fester Länge abgetastet

• daraus werden Pointer gewonnen und ein Wörterbuch abgeleitet

• Den zu übertragenden Zeichen werden über eine Zuordnungstabelle LZW-Codes zugewiesen, die auch übertragen werden

• wesentlich höhere Datenreduktion als bei Lauflängencodierung (RLE)

47 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

GIF- Dateiformat (graphics interchange format )

LZW- Algorithmus

48 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

JPG- Dateiformat (joint photographics expert group)

• JPEG ist sowohl ein

• Standardisierungs-Gremium

• Datenkompressionsverfahren

• als auch ein grafisches Dateiformat

• verlustbehaftete Kompression zu Komprimierung von Farbbildern und Digitalfotos

• Anwender hat die Möglichkeit, reproduzierte Bilder in verschiedenen Qualitätsstufen darzustellen

• Weist keine Beschränkungen in Bezug auf die Bildgröße, Farbtiefe, Pixelformat oder Komplexität und Farbvielfalt auf

49 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

JPG-Dateiformat (joint photographics expert group) Die Stufen der JPEG-Kompression:

50 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

PNG- Dateiformat (portable network graphics )

• Das PNG-Dateiformat wurde vom W3C entwickelt und 1997 veröffentlicht

• Standardisierung erfolgt durch ISO/IEC

• lizenzfreie Format

• ist ähnlich dem GIF-Dateiformat und gilt als dessen Nachfolger

51 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

PNG- Dateiformat (portable network graphics )

• verlustfreie Kompression und wird von allen modernen Browsern unterstützt

• Die Dateien sind bedingt durch die hohe Auflösung und die verlustfreie Kompression nach dem LZ-Verfahren (LZ77) größer als die von JPEG

• Beim Laden einer Grafik erscheint diese zuerst in Grobstruktur, bevor sie detailliert aufgelöst wird

• PNG hat einen Alphakanal für transparente Darstellungen und kann zusätzlich zur Grafik Schlüsselwörter und Text speichern

52 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

PNG- Dateiformat (portable network graphics )

LZ-Verfahren (LZ77)

53 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Gliederung

Animationen• Was sind Animationen?

• Verfahren• Techniken• Animationsparameter

• Animationsformate

53 von XX Seiten

54 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Was sind Animationen?

• Einzelbilder, die in festgelegter Reihenfolge nacheinander ablaufen

• Eindruck einer kontinuierlichen Bewegung

54 von XX Seiten

55 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Verfahren

• Echtzeit-Verfahren

• Offline-Rendering-Verfahren

55 von XX Seiten

56 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Techniken

• Rastergrafik

• Vektorgrafik

• Kombination Raster- und Vektorgrafik

• Farbpalettenrotation56 von XX Seiten

57 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Die wichtigsten Animationsparameter

• Standort des Betrachters bleibt konstant und das Objekt wird bewegt

• Beobachter (und damit die Kamera) bewegt sich auf einer vorgegebenen Bahn

• Temporale Animation (Objekt und Kamera stehen still und das Objekt verändert seine Form oder Kamerastandpunkt und Objektform werden gemeinsam animiert)

• Animierung externer Parameter (z.B. Sonneneinstrahlung)

57 von XX Seiten

58 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Beispiele

58 von XX Seiten

• http://www.fh-muenchen.de/home/fb/fb08/sl/projekt/dgm/multimedia/multimedia_darst_frames.htm

59 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Animierte GIF‘s

• 1989 Veröffentlichung einer erweiterten GIF-Version

• „GIF89a“ genannt

• Speichern mehrerer Bilder in einer GIF-Datei

• Standbilder, die nacheinander in eine Datei eingebettet sind

• Einmalige, einige Male ablaufende oder ständig wiederholende Animationen

59 von XX Seiten

60 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Animierte GIF‘s

60 von XX Seiten

61 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Adobe Flash• auf Vektorgrafiken basierendes Grafik- und

Animationsformat

• Kombination von Animation und Programmierung

• Multimediale Möglichkeiten (Einsatz von Video- und Sounddateien)

• Flash-Player als Abspielprogramm nötig

• Für vektorisierte, interaktive Animationen im Web ist Flash fast alternativlos

• GIF-Ersatz (filmtauglich)

61 von XX Seiten

62 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Adobe Flash

• Flash-Dateiformate• .SPL FutureSplash-Dokument• .FLA Quelldateien • .AS ActionScript-Dateien• .SWF kompilierte Dateien (Small Web Format / Shockwave

Flash)• .FLV Flash Video-Dateien • .ASC Serverseitige ActionScript-Dateien (Flash

Communication Server) • .ASR Serverseitige ActionScript-Dateien (ActionScript

Remote / Flash Remoting) • .JSFL Flash-JavaScript-Dokument • .FLP Flash-Projekt-Dokument• .ASO ActionScript Objektcode• .SWD Flash-Debugger-Dokument • .SWC vorkompilierte Flash MX 2004 Komponenten-Dateien • .ASI ActionScript-Intrinsic-Dateien (seit Flash MX 2004

Komponenten) • .SOL Local Shared Object (Flash-Cookie) 62 von XX Seiten

63 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Adobe Flash

• Beispiel

• http://www.lgi.geographie.uni-kiel.de/module-pagesetter-main-tid-6.phtml

63 von XX Seiten

64 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Synchronized Multimedia Integration Language (SMIL)• XML-basierend

• textbasierend

• Einbindung und Steuerung von Multimedia-Elementen wie Audio, Video, Text und Grafik in Webseiten

• Verknüpfung mit Java-Applets und -Servlets oder CGI-Skripten möglich

• Erstellung mit jedem Texteditor möglich

64 von XX Seiten

65 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Synchronized Multimedia Integration Language (SMIL)

65 von XX Seiten

66 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Virtual Reality Modeling Language (VRML)• Beschreibungssprache für 3D-Szenen, deren Geometrien,

Ausleuchtungen, Animationen und Interaktionsmöglichkeiten

• ursprünglich als 3D-Standard für das Internet entwickelt

• Ergänzung zu HTML

• komplett interaktiv

• Echtzeitgenerierung

• Dateierweiterung „.wrl“ (world)

• Klartext (ASCII bzw. UTF-8)

• Erstellung in einem einfachen Texteditor

66 von XX Seiten

67 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Beispiel

67 von XX Seiten

68 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Xtensible 3D (X3D)• 3D-Modellierungssprache, die in der Syntax auf XML

(XML-Encoding, Datei-Endung .x3d) oder auf VRML (Classic-Encoding, Datei-Endung .x3dv) aufbauen kann

• Realisierung von dreidimensionalen virtuelle Welten, Spiele, wissenschaftliche Visualisierungen und interaktive Lernanwendungen in Echtzeit

• mehr standardisierte Möglichkeiten und Schnittstellen als VRML

• offiziellen Nachfolger des VRML-Standard

• seit Dezember 2004 als ISO-Standard spezifiziert

68 von XX Seiten

69 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Xtensible 3D (X3D)

69 von XX Seiten

70 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

QuickTime VR

• Von Apple entwickelte Technik

• Benötigt QuickTime als Abspielprogramm

• Darstellung von Panoramabildern, in denen man navigieren kann (Zoomen, drehen etc.)

• Virtuelle Rundgänge70 von XX Seiten

71 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

QuickTime VR

• http://www.fh-muenchen.de/home/fb/fb08/sl/projekt/dgm/multimedia/multimedia_darst_frames.htm

71 von XX Seiten

72 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

Sinnvolle Kombinationsmöglichkeiten

der Formate & Scripte

73 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

Projekt:

Raumplan der Übungsräume

mit Dynamischem Kartenzugriff

und Foto-Overlay der Dozenten

74 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

1.) Raumplan des GIUB:

GIF-Datei auf der Homepage

75 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

1.) Raumplan des GIUB:

GIF-Datei auf der Homepage

76 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

77 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

78 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

79 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

<script type="text/javascript">var d = new Date()var time = d.getHours()var wochentag = d.getDay()</script>

80 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

Variablen für Tag und Datum werden gelesen

<script type="text/javascript">var d = new Date()var time = d.getHours()var wochentag = d.getDay()</script>

81 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

if (time >=8 && time < 10 && wochentag == 1){window.open ('mo810.html','_self');}

82 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

Einfache „Wenn... dann“ Struktur

if (time >=8 && time < 10 && wochentag == 1){window.open ('mo810.html','_self');}

83 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

Innerhalb des Raumplanes sollen Räume klickbar sein

84 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

2.) Dynamischer Kartenzugriff:

andere Raumbelegung je nach Tag und Zeit

möglich durch JavaScript

Innerhalb des Raumplanes sollen Räume klickbar sein

Möglich durch Kombination von JavaScript und CSS

<area shape="rect" coords="446,184,479,260" onClick="window.alert('Montag, 14 - 16 Uhr: Keine Veranstaltung')" alt="Übungsraum I" title="Übungsraum I">

85 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

3.) Foto-Overlay der Dozenten:

86 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

3.) Foto-Overlay der Dozenten:

aufgrund der besseren Farbunterstützung bietet sich PNG an

zusätzlich Vorteil von Transparenz

87 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

3.) Foto-Overlay der Dozenten:

aufgrund der besseren Farbunterstützung bietet sich PNG an

zusätzlich Vorteil von Transparenz

Einbindung durch CSS

<div style="position:absolute; top:0px; left:288px; z-index:1; border:0px"><img src="bilder/og.gif" width="550" height="434" border="0" alt="Karte" usemap="og"></div>

<div style="position:absolute; top:0px; left:288px; z-index:2; border:0px"><img src="bilder/mo1820/png_overlay.png" width="550" height="434" border="0" alt="Karte" usemap="og"></div>

88 von 88 Seiten

1. Technische

Einführung

2. Dateiformate

3. Animierte

Computergrafik

4. Kombination

von Formaten

5. Übung

Spezialseminar: Multimedia und Webkartographie

Dozent: Dr. Moeller

Aufgabenstellung:

Daten ab Mo, 21.05. im eCampus

Die Dozenten wollen früher nach Hause, und haben die Karte für Freitag Abend

verändert!

Programmiere die Raumbelegung neu!