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!
Top Related