Witzige Bildschirmanimationen mit Clippy

Bonzi,Clippy,F1,Genie,Genius,Links,Merlin,Peedy,Rocky,Rover Der eine oder andere etwas ältere Computerbesitzer mag sich noch an das Auftauchen von Merlin, Karl Klammer und Co erinnern, die von Microsoft erstmals in der Hilfe zu den Office 97 verwendet wurden. Doch so witzig die kleinen Charaktere mit ihren mehr oder weniger sinnigen Animationen zunächst wirkten, in den meisten Fällen wurde ihr Auftauchen in der Hilfe schnell deaktiviert.

Nun feiern diese animierten Grafiken ihrer Auferstehung in der kleinen JavaScript-Bibliothek Clippy.js. Anders als bei der Ursprungsvariante von Microsoft ist Clippy.js betriebssystemunabhängig und in jedem Browser lauffähig.

Es stehen insgesamt 10 Charaktere zur Verfügung:
  • Bonzi
  • Clippy
  • F1
  • Genie
  • Genius
  • Links
  • Merlin
  • Peedy
  • Rocky
  • Rover

Einbau von Clippy.js

Zunächst muss eine zip-Datei auf den PC geladen werden. Man findet diese Datei auf https://github.com/smore-inc/clippy.js. Dort wird auf den zip-Button geklickt und die Datei auf dem PC abgespeichert. Diese zip-Datei entpackt man auf dem PC. Die zip-Datei enthält eine ganze Menge Dateien. In diesem Fall werden nur die Dateien

  • clippy.css
  • clippy.min.js

benötigt. Diese muss auf den eigenen Webspace hochladen. Außerdem wird die jQuery-Bibliothek benötigt. Die findet man beispielsweise auf http://blog.jquery.com/2011/11/03/jquery-1-7-released/. Dort klickt man mit der rechten Maustaste auf die min-Version,speichert die Datei auf dem PC und lädt sie anschließend ebenfalls auf den eigenen Webspace hoch.

Damit Clippy oder eine andere Animation auf einer NPage-Textseite sichtbar ist, müssen einige kleine Codeschnippsel eingefügt werden. Im <head></head>-Bereich wird eingefügt:

<!-- Clippy-Stylesheet einbinden -->
<link rel="stylesheet" type="text/css" href="http://domainname.de/css/clippy.css" media="all">
<!-- jQuery einbinden -->
<script src="http://domainname.de/js/jquery-1.7.min.js"></script>
<!-- Clippy.js einbinden -->
<script src="http://domainname.de/js/clippy.min.js"></script>

Im <body></body>-Bereich wird eingefügt:

<!-- Initialisierung und Aufruf -->
<script type="text/javascript">
clippy.load('Merlin', function(agent) {
// Tu was
agent.show();
});
</script>

Ein minimalistisches Beispiel kann man bereits auf dieser Webseite sehen. Ich habe lediglich an Stelle des im Beispielcode verwendeten Charakters Merlin hier Bonzi eingebaut.

Bereits mit dem Beispielcode, in dem ein Clippy-Charakter initialisiert wird, erscheint dieser auf dem Bildschirm. Daneben gibt es aber weitere Aktionen, die die Bewegung eines Charakters im Browserfenster steuern. Ich habe eine Übersicht der Aktionen zusammengestellt und die einzelnen Aktionen kurz kommentiert.

Wie ich bereits geschrieben habe, gibt es 10 unterschiedliche Charaktere. Jeder dieser Charaktere kann bestimmte Gesten ausführen. Damit man den Überblick nicht verliert, habe ich eine Übersicht der Gesten zusammengestellt.