Dierk's page
 
 

Home
Anicursor
Köln
Fotos
Dierk-Cam
Personalien
Awards
Excel-Tools
Anigifs


Zu Favoriten
Gästebuch

Suchformulare


Suche in Seite
Suche in Site
Suche im Web

 
English
English
Tutorial Deutsche Version
Deutsch

Herstellung animierter Cursor - Teil 1

Inhalt
- Vorwort
- Der Cursor-Editor
- Die Größe des Cursors
- Funktionsweise des Cursors          
- Import-/Exportfunktion
- Farbtiefe
- Hotspot
- Transparenz
- Negativ-Farbe
- Opazität
- Mal-Werkzeuge
- Jiffy - Zeitrechnung für Cursor    
- Preview
- Autorenangabe
- Speicherung
- Installation des Cursors
- Schlußwort

VORWORT:     to top
In den vergangenen Jahren ist immer wieder die Frage an mich herangetragen worden, ob und wie man einen animierten Cursor selber herstellen kann. In diesem kleinen Tutorial möchte ich nun eine ausführliche Antwort auf diese Frage geben und gleichzeitig zur Erstellung eigener Cursor ermutigen. Das Erstellen eines eigenen Cursors ist nämlich garnicht so schwer, wie es auf den ersten Blick erscheinen mag und vielleicht schlummert ja auch in Dir ein kreativer Cursor-Künstler ...

DER CURSOR-EDITOR:     to top
Für die Herstellung eines Cursors brauchst Du zunächst einmal einen sogenannten Cursor-Editor, das ist ein Programm, mit dem Du - einfach formuliert - einen Cursor malen bzw. zeichnen kannst. Die meisten Editoren bestehen aus einer Mal-Fläche, auf der der Cursor entworfen wird und verschiedenen Werkzeugen zum Malen und Zeichnen - genau wie in einem normalen Grafik- bzw. Malprogramm. Es gibt ganz vereinzelt auch Cursor-Editoren, die kein eigenes Mal-Modul beinhalten sondern lediglich die in anderen Programmen erstellten Zeichnungen importieren und zu einem Cursor zusammensetzen - aber das sind eher Ausnahmen und an dieser Stelle hier lassen wir derartige Editoren auch einmal ganz außen vor.

Die aktuell am Markt verfügbaren Cursor-Editoren werden übrigens auf meiner Download-Seite kurz vorgestellt und können über die dort verlinkten Hersteller-Homepages auch downgeloadet werden. Bei den meisten Editoren handelt es sich um Shareware, die für einige Zeit kostenlos getestet werden kann, bevor man sich entscheiden muß, ob man die Software kaufen möchte.

Hier geht es zur Download-Seite

DIE GRÖßE DES CURSORS:     to top
Steigen wir nun in die Tiefen der "Cursor-Wissenschaft" ein.

Ein Cursor hat immer eine bestimmte Größe. Die Standardgröße besteht aus einer Fläche von 32 x 32 Bildpunkten bzw. Pixel, dies entspricht einer Summe von 1.024 einzelnen Bildpunkten, die Du "bemalen" kannst,
Jedes Quadrat = 1 Pixel
Malfläche eines Cursor-Editors
Die Malfläche des Cursor-Editors mit 32 x 32 Bildpunkten
auf dieser Fläche mußt Du den Cursor "unterbringen". Dies ist z.B. bei einem normalen Pfeil kein Problem. Sofern es aber komplexe Gegenstände sind, die dargestellt werden sollen, kann es schon etwas schwieriger werden, diese auf der doch recht kleinen Fläche unter zu bringen ... Der gezeichnete Cursor kann natürlich auch kleiner sein als die zur Verfügung stehende Grundfläche von 32 x 32 Bildpunkten, es sollte bei der Konzeption des Cursors dann nur darauf geachtet werden, daß je nach Monitorgröße und eingestellter Bildschirmauflösung der Cursor beim späteren Gebrauch mitunter recht klein aussehen kann.

FUNKTIONSWEISE DES CURSORS:     to top
Ein animierter Cursor wird wie ein Zeichentrickfilm hergestellt. Er besteht sozusagen aus der Aneinanderreihung von einzelnen Bildern, die zur Animation des Cursors führen. Damit der Cursor animiert ist, mußt Du also für jeden Bewegungsablauf eine entsprechende Anzahl von Bildern malen bzw. zeichnen. Diese einzelnen Bilder nennt man im Fachjargon übrigens "Frames". Viele verschieden Frames ergeben dann also einen animierten Cursor. Umfangreich animierte Cursor können aus dutzenden von Frames bestehen. Je mehr Frames für einen Bewegungsablauf verwendet werden, umso flüssiger und weicher sieht die Animation des Cursors später aus.
Bilder wie beim Zeichentrick
Sieht wie ein Zeichentrickfilm aus - Die IconForge-Frame-Übersicht
Damit der fertige Cursor ständig animiert bleibt, werden die für den animierten Cursor erstellten Frames immer in einer Endlosschleife abgespielt, nach dem Abspielen des letzten Frames der Animationssequenz wird wieder mit dem ersten Frame gestartet usw..
Beispielcursor
Fertig!
Bei der Erstellung eines animierten Cursors muß also immer darauf geachtet, daß das letzte Frame der Animationssequenz so gezeichnet wird, daß es harmonisch zum ersten Frame der Animation überleiten kann.

Wird nur ein einziges Frame benutzt, handelt es sich um einen sogenannten statischen Cursor. Ein statischer Cursor wird normalerweise unter der Dateiendung *.cur abgespeichert, während animierte Cursor als *.ani-Dateien abgespeichert werden.

Wenn Du nun also für einen animierten Cursor ein erstes Frame mit dem gezeichneten Cursor erstellt hast, mußt Du die Zeichnung für den nächsten Frame einer Animationskette nicht komplett neu erstellen.
Neues Frame anfügen
Neues Frame hinzufügen
Die meisten Cursor-Editoren haben eine Funktion, die beim Hinzufügen eines weiteren Frames zur Animationskette die Inhalte des vorherigen Frames gleich mit übernimmt. Dann brauchst Du nur noch den Teil der Zeichnung zu verändern, der sich im Rahmen der Cursoranimation verändern soll. Wenn z.B. in einem sonst sich nicht verändernden Gesicht nur die Augen rollen sollen, kopierst bzw. übernimmst Du das erste erstellte Frame mit dem Gesicht und änderst im zweiten Frame nur die Augenstellung. Dieses zweite Frame kannst Du dann wieder für das dritte Frame übernehmen und änderst dort wiederum die Augenstellung. Dies kannst Du dann bei weiteren Frames immer wieder so wiederholen, bis Du das gewünschte Animationsziel erreicht hast.

Auge Cursor
Ein kleiner Hinweis für gleichförmige Animationen wie z.B. einem hin und her schauenden Auge: Du kannst sehr viele Frames gleich zweimal
Animations Sequenz
Du kannst viele Frames zweimal benutzen
nutzen und so doppelte Arbeit ersparen. Wenn Du nämlich die Frames für den ersten Blick von rechts nach links gezeichnet hast, kannst Du alle Frames außer den beiden äußeren Augenpositionen auch für die andere Richtung benutzen. Du mußt die Frames halt nur in umgekehrter Reihenfolge hinter die erste Sequenz hängen. Im gezeigten Beispiel brauchst Du also nur 7 verschiedene Augenstellungen zu zeichnen und sparst Dir so die Erstellung von 5 weiteren Frames durch doppelte Verwendung.

Die Auflistung der Frames
Frames-Liste AX-Cursors
Die verschiedenen Frames eines Cursors werden in den meisten Editoren sehr übersichtlich aufgelistet und können nachträglich immer noch beliebig verändert oder an eine andere Position verschoben werden. Natürlich können auch bereits existierende Cursor aus dem Internet heruntergeladen werden und in einem Cursor-Editor geöffnet und bearbeitet werden. Das kann dann sinnvoll sein, wenn man einen fremden Cursor den eigenen Anforderungen anpassen möchte. Bei Veränderung zum auschließlichen Eigengebrauch ist das auch nicht weiter problematisch. Wenn man den veränderten Cursor aber anschließend auch an Dritte weitergeben möchte, sollte man aber prüfen, ob nicht gegen bestehende Copyrights verstoßen wird.

IMPORT-/EXPORTFUNKTION:     to top
Die meisten Editoren verfügen auch über Import-Filter. Damit kannst Du z.B. Bilddateien wie *.bmp oder *.gif oder Animationsdateien wie z.B. *.avi oder animierte Gifs in den Editor importieren und zur Grundlage eines Cursors machen.
Hier muß nur bedacht werden, daß derartige Dateien meistens über eine größere Bildfläche als 32 x 32 Pixel verfügen dürften und meistens auch nicht gerade quadratisch zugeschnitten sind. Dann müssen sie in der Größe reduziert werden (was die entsprechenden Cursor-Editoren automatisch anbieten und durchführen), damit sie komplett auf die Cursorfläche passen. Die so reduzierten Bilder sehen aber möglicherweise nicht mehr ganz so toll aus wie das Original - ein Nachteil,
Größen-Reduzierung
AX-Cursors fragt nach den Verkleinerungs-Optionen
der sich bei einer so kleinen Cursor-Bildfläche leider nicht verhindern läßt. In der Regel fragt der Editor bei Bildern, die nicht genau quadratisch sind, beim Einfügen des Bildes in das Frame auch nach, ob das Bild auf die ganze Cursorfläche gedehnt bzw. gestreckt werden soll. Bei kleineren Abweichungen von der Quadrat-Struktur wird das in den meisten Fällen nicht problematisch sein. Sollte das Bild aber mehr rechteckig als quadratisch sein, wird dies voraussichtlich zu einer nicht mehr schönen Verzerrung des Bildes führen.

Leider leidet bei der Größenreduzierung eines importierten Bildes bei den meisten Cursor-Editoren etwas
normales Bild   Reduziertes Bild
Die Reduzierung auf 32 x 32 Pixel macht
das Bild nicht gerade schöner
die Qualität. In der Praxis hat sich zur Vermeidung dieser Qualitätsverluste folgende Methode bewährt. Danach sollte man die Größe eines Bildes nicht erst vom Editor reduzieren lassen sondern diese Arbeit möglichst schon vorher in einem guten Bildbearbeitungsprogramm durchführen. Jedes gängige Bildbearbeitungsprogramm verfügt über die Möglichkeit, die Maße eines Bildes zu verändern. Schon hier sollte also die längste Seite des betreffenden Bildes auf 32 Pixel reduziert werden. Nach dieser Reduzierung kann dann das Bild in ein Frame des neuen Cursors kopiert werden. Wunder sollte man aber nicht erwarten, wenn ein Bild mit einer Größe von vielleicht 400 x 400 Pixeln und somit 160.000 Bildpunkten auf 32 x 32 Pixel und somit 1.024 Bildpunkte reduziert wird, bleiben Details auch mit dem besten Bildbearbeitungsprogramm unweigerlich auf der Strecke.

Nicht zu vergessen ist auch die Export-Funktion einiger Cursor-Editoren. Statische Cursor oder einzelne Frames eines animierten Cursors lassen sich z.B. in ein Bitmap oder ein Gif-Bild umwandeln. Zudem können animierte Cursor in eine Animationsdatei verwandelt werden, etwa ein animiertes Gif oder eine *.avi-Videodatei. Animierte Gifs lassen sich dann sehr gut in eine Homepage einbauen.

Hier geht es zum 2. Teil des Tutorials

 
  © Dierk 1995-2017   -   optimiert für MSIE und 800x600px   -   zuletzt geändert: -