Präsentationen mit Sozi

Sicherlich sind Sie schon einmal über eine auffällige Präsentation gestolpert, die nicht wie bei Powerpoint langweilig Folie nach Folie anzeigt sondern mehr einem Flug über ein Poster entspricht, das man dabei mit einem zoomfähigen Fernglas aus unterschiedlichen Blickwinkeln betrachtet.
Wahrscheinlich wurde diese Präsentation mit Prezi erstellt.
Leider gibt es bei Prezi einige Einschränkungen, die auf das Geschäftsmodell zurückzuführen sind.

Mit der Freeware Sozi gibt es seit einigen Jahren eine sehr interessante Alternative, bei der die Datenhoheit über erzeugte Präsentationen immer beim User liegt.

Mithilfe von Sozi kann man in Kombination mit dem ebenfalls kostenlosen InkScape leicht prezi-ähnliche Präsentationen erzeugen, die zudem in jedem aktuellen Internetbrowser angezeigt werden können.

Sozi läuft unter Windows, MacOS und Linux. Vom Autor wurde mittlerweile die offizielle Version 18.04 freigegeben. Ältere (manchmal auch aktuellere) Zwischenversionen finden sich hier .
Achtung! Der Link führt direkt in die Google-Cloud! Sie sollten ihn also nur anklicken, wenn Sie sich darüber im Klaren sind, was dann mit Ihren Daten geschieht.

Die Hinweise auf dieser Seite sind das Ergebnis einer langen Recherche im Netz, ergänzt durch Versuch und Irrtum. Reihenfolge und Gliederung sind dabei im Laufe des letzten Jahres zunächst wild gewachsen und sollen nach und nach soll in eine Art ›Tutorial‹ umgewandelt werden.

Mein bisheriges Fazit: sehr lohnenswert!


Quick&Dirty Zugang (Windows)

Da Sozi wie InkScape ein eigenständiges Programm ist und (portable, d.h. einfach durch Auspacken eines Archivs) kostenlos und ohne Beeinträchtigung des restlichen Systems ausprobiert werden kann, sollten Sie es einfach mal testen! Ich gehe bei der nachfolgenden Beschreibung davon aus, dass InkScape bereits auf dem Test-Rechner läuft.

So erstellen Sie in wenigen Schritten Ihre erste (einfache) Sozi-Präsentation:

  • Starten Sie InkScape und erzeugen Sie eine neue SVG-Datei (Datei → Neu).
  • Speichern Sie diese Datei unter dem Namen ›praesi01.svg‹ (vorzugsweise in einem neuen Ordner).
  • Laden Sie die aktuelle Version von Sozi und packen Sie die ZIP-Datei auf einem beliebigen Laufwerk (auch USB-Stick) aus. Die Verzeichnisstruktur des Archivs muss beim Entpacken erhalten bleiben.
  • Starten Sie die Datei Sozi.exe (›oberster‹ Ordner) durch Doppelklick.
  • Öffnen Sie in Sozi die soeben erzeugte Datei ›praesi01.svg‹. Die Datei ist damit jetzt in InkScape und Sozi gleichzeitig geöffnet und Ihre (bisher allerdings noch leere) Präsentation ist bereits fertig!
  • Starten Sie Firefox, Opera oder Chrome und laden Sie (Strg-O) die von Sozi automatisch erzeugte Datei ›praesi01.sozi.html‹. Sie finden sie im gleichen Ordner wie die SVG-Datei. Angezeigt wird wie in der Sozi-Vorschau ein leerer Bildschirm.

Nachdem das Präsentationsgerüst nun fertig ist, können Sie es mit Inhalt füllen:

  • Schalten Sie um zum InkScape-Fenster, erzeugen Sie dort einige Objekte und speichern(!) Sie die Datei.
  • Wenn Sie zurück nach Sozi schalten, sollten Ihre Objekte im Vorschau-Fenster bereits angezeigt werden.
    (Sozi überwacht die InkScape-Datei und wird bei jeder Änderung sofort aktiv, sobald man in Windows die Fensterverwaltung nutzt.)
  • Fügen Sie in Sozi mit ›+‹ (links unten) einige Frames zur Timeline hinzu.
  • Verändern Sie in jedem Frame die Ansicht - einfach den Frame in der Timeline anklicken und dann im Vorschaufenster mit der Maus verschieben. Wenn Sie dabei die Tasten Strg, Alt oder Shift drücken, wird der Ausschnitt in der Bewegung horizontal/vertikal eingeschränkt, gezoomt bzw. rotiert.
  • Schalten Sie zurück zu Ihrem Browser und laden Sie die HTML-Datei neu (Klick auf den kreisförmigen Pfeil).|br| (Im Gegensatz zu Sozi muss der Browser nach jeder Änderung erst zum Neuladen der geänderten Präsi ›überredet‹ werden.)
  • Blättern Sie mit den Cursortasten oder mithilfe der Maus durch Ihre Präsentation.
  • Wiederholen Sie die letzten fünf Schritte.

  • Hier ein mögliches Ergebnis .
    (Ich empfehle, den Link mit Rechtsklick in einem neuen Tab oder Fenster zu öffnen, denn die von Sozi generierte Datei erzeugt bei jedem Ansichtswechsel einen neuen Eintrag in der Browser-History.
    Nach Betrachten der Präsentation kommt man durch einfaches Schließen des neuen Tabs zurück auf die aufrufende Seite.)
r07/boerse.pic/sozi_01.jpg




Die Sozi-Oberfläche

Die Programmoberfläche kann man grob in die drei Bereiche Vorschau, Timeline und Einstellungen einteilen. Die Größe der einzelnen Bereiche lässt sich wie bei Windows üblich mit der Maus verändern.

Vorschau

Der große Bereich links oben zeigt immer den Inhalt des Frames an, der unten in der Timeline gerade ausgewählt ist. Im Bild oben ist das Frame-8, zu erkennen daran, dass dieser in der Timeline blau hinterlegt ist.

Das Seitenverhältnis der Vorschau sollte gleich beim Start einer neuen Präsentation einmalig auf die Gegebenheiten des später benutzten Beamers eingestellt werden.

Die Vorschau ist gleichzeitig auch der Arbeitsbereich, denn man kann mit der Maus den angezeigten Teil der Präsentation verändern. Dabei bietet Sozi eine Reihe von Optionen, die sich schon nach kurzer Einarbeitungszeit sehr intuitiv nutzen lassen. Ich empfehle, das Icon (Kreuz) direkt rechts neben dem Seitenverhältnis (Ausgewählte Ebenen verschieben) zu aktivieren:

  • Hält man beim Verschieben die Strg-Taste gedrückt, wird die Bewegung horizontal oder vertikal eingeschränkt. (InkScape-Usern wird das sicherlich bekannt vorkommen ...)
  • Hält man beim Verschieben die Umschalt-Taste gedrückt, wird die Anzeige gedreht.
    Das Drehen lässt sich auch (besser) durch die Kombination Umschalt-Taste - Mausrad erreichen.
  • Hält man beim Verschieben die Alt-Taste gedrückt, wird die Anzeige vergrößert bzw. verkleinert (Zoom).
    Auch hier ist das Mausrad m.E. die bessere Alternative. Die Alt-Taste wird beim Zoomen mit dem Mausrad nicht benötigt.

Alle Manipulationen (d.h. ihr Endzustand) werden im gerade aktiven Frame gespeichert.
Mit [Strg-Z] oder Klick auf das entsprechende Icon kann man wie bei vielen Windows-Anwendungen die letzten Aktionen rückgängig machen.

Timeline

Die einzelnen Frames werden wie bei einem Video-Schnitt-Programm zu einer Timeline zusammengefasst und bei der Präsentation im Browser von links nach rechts nacheinander angezeigt.

Neue Frames werden mit dem [+]-Button erzeugt. Jeder neue Frame verlängert die Timeline und wird hinter dem gerade ausgewählten Frame eingefügt - genau genommen wird der letzte ausgewählte Frame verdoppelt.

Zumindest bei komplexeren Präsentationen macht es Sinn, jedem Frame einen sprechenden Namen zu geben, denn über diesen kann er während der Präsentation jederzeit aus einer Übersicht heraus angesprungen werden.

Überflüssige Frames können mit dem [Trash]-Button gelöscht werden.

Die Reihenfolge der Frames kann verändert werden, indem man einen oder mehrere (wie bei Windows-Explorer mit Strg & Shift) Frames auswählt und dann auf einen der beiden kleinen Pfeile des Zielframes klickt (Auswahl vor/hinter Frame Nr. ### einfügen). Die beiden Pfeile erscheinen erst, wenn der Mauscursor über einer Frame-Nr. schwebt, im Bild oben bei Frame-6.

Im Prinzip funktioniert die Änderung wie das Ausschneiden/Einfügen bei anderen Windows-Programmen, allerdings mithilfe einer sozi-internen Zwischenablage.

Dem Button [Ebene hinzufügen] sollten Sie bei Ihren ersten Übungen keine Beachtung schenken. Ihn benötigen Sie erst, wenn Sie sich mit animierten Elementen beschäftigen wollen


Einstellungen

Im rechten Bereich der Oberfläche kann man unter den Punkten Frame, Layer und Übergang einige Einstellungen vornehmen. Einige davon erschließen sich sofort, bei anderen sind Zweck und Einsatz nicht so offensichtlich.

Gerade bei den ersten Begegnungen mit Sozi übersieht man leicht, dass das Fenster ›Einstellungen‹ nicht komplett sichtbar ist, sondern weiter unten noch einige Optionen enthält, die erst durch Scrollen sichtbar werden.


Frame

Über zwei Icons kann festgelegt werden, ob der Titel des Frames in der Übersicht angezeigt werden soll und ob er eine Nummer erhält.

Der Titel entsteht mit einem neuen Frame automatisch und kann beliebig geändert werden. Der hier eingegebe Text erscheint ggf. in der Frame-Übersicht, die man während der Präsentation jederzeit mit ›t‹ oder Klick mit dem Mausrad aufrufen kann.

Die ID kann man benutzen, wenn man den linearen Ablauf der Präsentation durch Querverweise ergänzen möchte. Um den Frame mit einer bestimmten ID durch Klick anzusteuern, kann man ein beliebiges Element in einem anderen Frame damit verknüpfen.

Unter Timeout (Sekunden) kann eine automatische Weiterschaltung zum nächsten Frame eingestellt werden. Wenn das Häkchen im Bild oben wie bei Frame-8 blau markiert ist, schaltet die Präsentation nach der hier eingestellten Zeit automatisch zum nächsten Frame weiter.

Layer

Sobald in der Präsentation irgendetwas animiert werden soll, kommt man an der Benutzung von Ebenen (Layern) nicht vorbei.
Die hier aufgeführten Otionen lassen sich imho schlecht theoretisch erläutern. Bei den Beispielen finden Sie die passenden Erklärungen, soweit ich sie bisher ergründen konnte.

Copy layer* Ordnet die Eigenschaften eines Layers (aus einer Liste) den in der Timeline ausgewählten Layern zu. Diese Option kann dazu benutzt werden, um die Ebenen wieder gegeneinander auszurichten, wenn einzelne bewegt oder in ihrer Größe verändert worden sind und andere nicht.

Outline element id* legt fest, an welchem Element die ausgewählten Ebenen in diesem Frame ausgerichtet werden sollen. Mit dieser Option lassen sich Animationen geradezu unglaublich präzise steuern, da man das zur Ausrichtung gewählte Element in InkScape in extremer Genauigkeit platzieren kann (größtmöglicher Zoom, Alt-Pfeil).

Transparenz der Ebene kann benutzt werden, um bestimmte Elemente während der Präsentation ein- oder auszublenden. M.E. sollte die Bezeichnung dieses Schiebereglers besser ›Deckkraft der Ebene‹ heißen, denn die Inhalte werden ausgeblendet (d.h. zu 100% transparent), wenn der Regler auf 0 steht.

An SVG-Element anpassen (“Fit to element”) bewegt, zoomt und rotiert alle ausgewählten Ebenen so, dass das ausgewählte Element anschließend das Vorschaufenster ausfüllt. Damit das funktioniert, muss das gewählte Outline-Element in einer der ausgewählten Ebenen enthalten sein.


Übergang

Für die Präsentation lässt sich bei jedem einzelnen Frame festlegen, wie lange der Übergang vom letzten Frame dauern soll. Die zweite Option betrifft die Art des zeitlichen Verlaufs. Man hat die Wahl zwischen linear, parabel- und hyperbelförmig. Die Option Step end bewirkt eine einstellbare Verzögerung nach dem auslösenden Mausklick.

Relativer Zoom bewirkt ein Heranzoomen (positiver Wert) bzw. ein Herauszoomen (negativer Wert) während des Wechsels vom letzten Frame.
Ein größerer negativer Wert macht an dieser Stelle z.B. Sinn, wenn der Inhalt des letzten Frames weit vom aktuellen Frame entfernt liegt und der Blick ohne Zoom dicht über weite Bereiche der Präsentation hinwegrauschen würde. Mit Zoom fliegt man gleichsam in hohem Bogen vom Start zum Ziel.

Pfad-ID verknüft den Wechsel zum nächsten Frame mit einem beliebigen Pfad (bzw. seiner ID) der SVG-Datei. Sinn macht diese Option m.E. nur, wenn unterschiedliche Layer sich beim Übergang verschiedenartig bewegen und dadurch eine besondere Animation bewirken sollen.


Player

Ganz unten im Fenster ›Einstellungen‹ findet man einige Optionen, die sich auf die Eingreifmöglichkeiten während der Präsentation beziehen.

So lassen sich Maus- und Tastatursteuerung getrennt voneinander abschalten (für selbstablaufende Präsentationen) und die Anzeige selbst lässt sich auf die Vorgaben des Entwicklers einschränken. Ohne diese Einschränkungen lässt sich das Anzeigefenster verschieben, drehen und zoomen.




Steuerung der Präsentation

Tastaturbefehle

Während der Präsentation reagiert die von Sozi erzeugte HTML-Datei auf eine ganze Reihe von Tastaturbefehlen:

Pfeil-rechts, Pfeil-runter, Bild-runter, Leertaste Nächste Folie
Pfeil-links, Pfeil-rauf, Bild-rauf Vorherige Folie
Pos 1 Erste Folie
Ende Letzte Folie
r Folie entgegen dem Uhrzeigersinn drehen
Umschalt-r Folie im Uhrzeigersinn drehen
t Folienübersicht anzeigen/ausblenden
‘+’ & ‘-‘ Folie zoomen.
‘.’ (Punkt) die Präsentation ein- oder ausblenden.

Hält man die Shift-Taste gedrückt, erfolgt der Folienwechsel ohne Zeitverzögerung.

Maussteuerung

Auch mit der Maus lässt sich eine Präsentation sehr gut steuern:

Linksklick Nächste Folie
Rechtsklick Vorherige Folie
Mittelklick (Mausrad)     Folienübersicht anzeigen/ausblenden
Mausrad In die Präsentation herein- oder herauszoomen
Umschalt-Mausrad Die Präsentation drehen

Falls gewünscht, kann man einzelne Optionen in Sozi abschalten, indem man rechts unten bei den Einstellungen (Player) die blaue Markierung bei ihnen entfernt.



Ebenen & Animationen

Wer sich näher mit InkScape beschäftigt und komplexere Zeichnungen damit konstruiert, stößt irgendwann auf das Konzept ›Ebenen‹. Wenn es bei Ihnen jetzt nicht direkt klingelt, stellen Sie sich einfach mehrere transparente Folien vor, die jeweils einen Teil der Zeichnung enthalten. Aufeinander gelegt ergeben alle Folien die komplette Zeichnung.

Spätestens dann, wenn Teile einer Sozi-Präsentation animiert werden sollen, kommen diese Ebenen ins Spiel.

Der Animationseffekt entsteht nämlich einfach dadurch, dass man beim Übergang von einem Frame zum nächsten die einzelnen Ebenen unterschiedlich manipuliert. Dadurch scheinen sich bei der Präsentation die Ebenen bzw. die Objekte auf ihnen gegeneinander zu bewegen.

Dazu müssen die Ebenen der InkScape-Datei in Sozi zunächst einmal einzeln mit dem entsprechenden Button zur Timeline hinzugefügt werden. Die Namen der Ebenen werden übernommen, für jede Ebene bekommt jeder Frame einen eigenen Button.

Man kann einzelne Ebenen in der Timeline ausblenden (links unten temporär unsichtbar schalten). Dieses Ausblenden gilt allerdings nur im Sozi-Editor und hat keinerlei Auswirkungen auf die spätere Präsentation.

Einfache Animationen

Die Beispiele zeigen mehrere einfache Animationen. Auf der CD finden Sie im gleichen Ordner auch die InkScape- und Sozi-Dateien und können selbst damit experimentieren.

Um eine einzelne (oder mehrere) Ebene(n) innerhalb eines Frames auszuwählen, klickt man einfach mit der Maus auf den entsprechenden Button. Wichtig ist dabei, das nur die gewünschte(n) Ebene(n) links in der Auflistung ebenfalls ausgewählt ist (sind). Ausgewählte Ebenen sind blau hinterlegt, nicht ausgewählte schwarz.

Beispiel-1  anschauen (mit Mausklick starten)
Auf der Ebenen ›plane‹ befindet sich ein kleines Flugzeug, auf ›background‹ eine Skyline. Die ganze Animation besteht aus nur zwei Frames:

  • Frame-1 zeigt die Skyline und rechts daneben (außerhalb der Anzeige) das Flugzeug, so wie die Szene in InkScape erzeugt worden ist. Man kann das in Firefox leicht kontrollieren, indem man mit der Maus den Bildausschnit nach links verschiebt oder herauszoomt. (Wenn man einfach nur klickt, läuft die Präsentation ab.)
  • Frame-2 enthält die gleichen Inhalte, allerdings wurde (nur) die Ebene ›plane‹ so weit nach links verschoben, dass das Flugzeug schließlich links aus dem Sichtfeld verschwunden ist. (Ebene ›plane‹ in Frame-2 angeklickt, bevor verschoben wurde.) Als Dauer für den Wechsel nach Frame-2 wurden 6 Sekunden eingestellt.
    Auch den zweiten Frame kann man in Firefox durch Rauszoomen in der Gesamtheit sehen, nachdem das Flugzeug links verschwunden ist.

Beispiel-2  anschauen
Wieder befinden sich auf den beiden Ebenen ›plane‹ und ›background‹ ein kleines Flugzeug und eine Skyline. Diesmal besteht die Animation aus drei Frames:

  • Frame-1 zeigt das Flugzeug (größer als im Beispiel-1) über einem Teil (rechts) des Hintergrunds.
  • Frame-2 enthält die gleichen Inhalte, allerdings wurde (nur) die Ebene ›background‹ so weit nach rechts verschoben, dass das Flugzeug schließlich über dem linken Teil des Hintergrunds schwebt. Als Dauer für den Wechsel nach Frame-2 wurden 10 Sekunden eingestellt.
  • In Frame-3 schließlich wurde (nur) die Ebene ›plane‹ so weit nach links verschoben, dass das Flugzeug vollständig verschwindet. Damit Frame-3 automatisch im Anschluss nach Frame-2 aufgerufen wird, wurde in Frame-2 der Timeout aktiviert (nicht das Häkchen, sonder die blaue Einfärbung!), Als Dauer wurden 6 Sekunden festgelegt.
    Die Ebene wurde beim Verschieben nach links auch ein wenig nach unten verschoben.

In der Präsentation startet das Flugzeug nach dem ersten Mausklick und der Hintergrund gleitet unter dem Flieger nach rechts. Kurz bevor der Flieger den linken Rand der Skyline erreicht, bleibt diese stehen und der Flieger selbst bewegt sich aus dem Bild nach links heraus und scheint dabei zu landen.

Animationen mit Outline-Elementen

Einfache Animationen gelingen so noch ganz gut, komplexere Bewegungsabläufe führen aber schnell zu Problemen. Vor allem, wenn man während der Arbeit mit Sozi noch Änderungen an der SVG-Datei durchführt, geraten die Ebenen in Sozi gern durcheinander. Hat eine sorgsam ausgeknobelte Choreographie gerade noch funktioniert, kann nach einer nur kleinen Änderung an der SVG-Datei in Sozi plötzlich alles aus dem Ruder laufen.

Auch der Versuch, mehrere Ebenen gleichzeitig und unterschiedlich zu animieren, führt zu unbefriedigenden Ergebnissen, wenn erhöhte Ansprüche an die Präzision gestellt werden.

Die Lösung für diese Probleme sind so genannte Outline-Elemente, mit deren Hilfe einzelne Ebenen sehr genau ausgerichtet werden können.

Beispiel-3  anschauen
Auf den beiden Ebenen ›plane‹ und ›background‹ befinden sich ein Hubschrauber und eine Skyline. Diesmal besteht die Animation aus zwei Frames:

  • Frame-1 zeigt den Hubschrauber rechts oben im Bild. Der Blick auf die Szene wird durch das Rechteck mit der Kennung ›Blick_01‹ festgelegt (Sozi passt die Anzeige so an, dass das Rechteck genau in den sichtbaren Bereich passt. Die Zeichnung wird dabei mit verschoben, skaliert und gedreht.).
  • Frame-2 enthält die gleichen Inhalte, allerdings wurde der Blick auf den Hubschrauber in Ebene ›plane‹ durch das Rechteck mit der Kennung ›Blick_02‹ festgelegt. Das Rechteck wurde so verschoben, dass der Hubschrauber genau auf dem Förderturm steht. Zusätzlich wurde das Rechteck so gedreht, dass die Kufen des Hubschraubers etwa parallel zu seiner unteren Kante verlaufen. Als Dauer für den Wechsel nach Frame-2 wurden 6 Sekunden eingestellt mit der Option ›Ease out‹, was die Bewegung zum Ende hin verlangsamt.
    Der Animationseffekt entsteht dadurch, dass in Frame-2 nur für die Ebene ›plane‹ ein anderes Outline Element aktiviert wird.

In der Präsentation startet der Hubschrauber nach dem ersten Mausklick und sinkt immer langsamer auf den Landeplatz zu. Dabei dreht sich der Hubschrauber so, dass - zumindest die vordere - Kante sauber auf dem Turm landet.
Wenn man versuchen würde, die gleiche Animation nur durch Verschieben und Drehen des Vorschaufensters zu gestalten, würde man wahrscheinlich daran scheitern, dass die Manipulationen im Vorschaufenster nicht feinfühlig genug sind.
Die Rechtecke, die als Outline-Elemente herangezogen werden, lassen sich hingegen in InkScape nahezu beliebig genau positionieren.

Beispiel-4  anschauen
Entstanden aus Beispiel-3. Diesmal besteht die Animation wieder aus drei Frames:

  • Frame-1 zeigt wie zuvor den Hubschrauber rechts oben im Bild. Der Blick auf die Szene wird durch das Rechteck mit der Kennung ›Blick_01‹ festgelegt (Sozi passt die Anzeige so an, dass das Rechteck genau in den sichtbaren Bereich passt. Die Zeichnung wird dabei mit verschoben, skaliert und gedreht.).
  • Frame-2 aus Beispiel-3 wurde verdoppelt und es wurde ein neues Rechteck mit der Kennung ›Blick_01b‹ festgelegt. Das Rechteck wurde als Duplikat von ›Blick_02‹ erzeugt und so gedreht, dass es die gleiche Orientierung hat wie ›Blick_01‹ und den Hubschrauber kurz vor der Landung zeigt. Als Dauer für den Wechsel nach Frame-2 wurden wieder 6 Sekunden eingestellt.
  • Frame-3 enthält die gleichen Inhalte, allerdings wurde der Blick auf den Hubschrauber in Ebene ›plane‹ durch das Rechteck mit der Kennung ›Blick_02‹ festgelegt. Das Rechteck wurde so verschoben, dass der Hubschrauber genau auf dem Förderturm steht. Zusätzlich wurde das Rechteck so gedreht, dass die Kufen des Hubschraubers etwa parallel zu seiner unteren Kante verlaufen. Als Dauer für den Wechsel nach Frame-3 wurden 3 Sekunden eingestellt mit der Option ›Ease out‹, was die Bewegung zum Ende hin verlangsamt.

In der Präsentation startet der Hubschrauber nach dem ersten Mausklick und sinkt mit konstanter Geschwindigkeit auf den Landeplatz zu. Kurz vor der Landung verlangsamt sich die Geschwindigkeit und erst jetzt dreht sich der Hubschrauber so, dass - zumindest die vordere - Kante sauber auf dem Turm landet.

Beispiel-5  anschauen
Zwei Frames:

  • Frame-1 zeigt vier Hubschrauber auf vier Ebenen und den Landeplatz auf einer fünften Ebene. Der Blick auf die Szene wird durch das Rechteck mit der Kennung ›base‹ festgelegt (für alle fünf Ebenen).
  • Frame-2 enthält die gleichen Inhalte, allerdings wurde der Blick für jeden Hubschrauber in einer eigenen Ebene durch das Rechteck mit der Kennung ›heli-#‹ festgelegt. Alle vier Rechtecke wurden so verschoben, dass der zugehörige Hubschrauber dabei aus dem ›Blickfeld‹ verschwindet. Als Dauer für den Wechsel nach Frame-2 wurde eine Zeitspanne von 4 Sekunden eingestellt.

In der Präsentation starten alle Hubschrauber nach dem ersten Mausklick in verschiedene Richtungen und verschwinden aus dem Blickfeld.

Beispiel-6  anschauen
Wie Beispiel-5. Zusätzlich wurde die Größe der beiden Rechtecke mit der Kennung ›heli-1‹ und ›heli-4‹ verändert. ›heli-1‹ wurde stark vergrößert, ›heli-4‹ wurde verkleinert.

In der Präsentation starten wieder alle Hubschrauber nach dem ersten Mausklick in verschiedene Richtungen und verschwinden aus dem Blickfeld. Hubschrauber-1 scheint dabei nach hinten zu verschwinden und wird immer kleiner, während Hubschrauber-4 scheinbar auf die ›Kamera‹ zufliegt und immer größer wird.|b2|

Beispiel-7  anschauen
Wie Beispiel-6. Das Rechteck mit der Kennung ›heli-4‹ wurde noch einmal deutlich verkleinert. Zusätzlich wurde eine Spirale mit der Kennung ›schlange‹ unter ›Pfad-ID‹ für die Ebene ›heli-1‹ eingebaut.

In der Präsentation starten wieder alle Hubschrauber nach dem ersten Mausklick in verschiedene Richtungen und verschwinden aus dem Blickfeld. Hubschrauber-1 scheint sich wieder nach hinten zu bewegen, scheint aber Motorprobleme zu haben, während Hubschrauber-4 so nah kommt, dass man sich beinahe unwillkürlich ducken möchte.

Jede kleine Änderung an der Schlange hatte übrigens zur Folge, dass die Pfad-ID der Ebene ›heli-1‹ in Sozi gelöscht wurde! Auch das Outline Element ›heli-4‹ blieb zwar in Sozi erhalten, musste aber jedesmal ›neu aktiviert‹ werden.

Beispiel-8  anschauen
Die Zeichnung, deren Vorlage ich von der Seite openclipart.com entliehen habe, ist aus drei Ebenen aufgebaut, damit das Schiff (Ebene-2) hinter Tux (Ebene-1) am Horizont (Ebene-3) vorbeifahren kann. Im zweiten Frame der Präsentation wurde die Ebene ›Schiff‹ in Sozi (ohne Referenzrahmen) so weit nach rechts verschoben, dass das Schiff den Bildschirm rechts wieder verlässt. Die Transparenz (besser: Deckkraft) dieser Ebene wurde im zweiten Frame auf 0% eingestellt, was ein Verblassen des Schiffes beim Vorbeifahren bewirkt, bis es schließlich vollständig verschwindet.

Die Ebene mit Tux und der Takelage wurde mit einer Zickzacklinie verknüpft, deren Amplitude von links nach rechts abnimmt. Dadurch scheint das Schiff mit Tux in der Dünung zu schaukeln. Verstärkt wird dieser Eindruck durch einen relativen Zoom von 5% mit Ease-in-out. Dadurch scheinen sich Tux und Takelage nicht nur auf und ab sondern auch leicht nach vorn und hinten zu bewegen.
In InkScape hat die Zickzacklinie die Kennung ›wellen‹ bekommen (Linie auswählen, rechte Maustaste, Objekteigenschaften), die in Sozi unter Übergang - Pfad-ID eingetragen wurde.
Die Animation startet von selbst und wiederholt sich nach 15 Sekunden automatisch.



Komplexe Präsentationen

Ich beschreibe im Folgenden einen Weg, der bei der Erstellung komplexerer Präsentationen helfen kann, den Überblick zu bewahren und die Auswirkungen nachträglicher Änderungen an der SVG-Datei zu kompensieren.
Kern dieser Vorgehensweise ist der komplette Verzicht auf händische Manipulationen im Sozi-Vorschaufenster!

Dieser Verzicht macht die Gestaltung der Präsentation wesentlich aufwändiger, bietet aber durch die Verlagerung der Ausschnittsfestlegung nach InkScape deutlich bessere Genauigkeit.

  • Zunächst wird in Sozi ein festes Seitenverhältnis für die Präsentation festgelegt, z.B. 4:3, 5:3, 16:9 etc., je nach Beamer.
  • Dann wird in der SVG-Datei ein beliebig großes Rechteck mit genau diesem Seitenverhältnis erzeugt und an irgendeiner Ecke abgelegt (dünner schwarzer Rand, keine Füllung).
    Achtung: Das Rechteck muss wirklich ein Rechteck sein, ein Pfad würde hier nicht funktionieren!
  • Von dem Rechteck ›in der Ecke‹ wird ein Klon erzeugt und unter Beibehaltung des Seitenverhältnisses (d.h. mit gedrückter [Strg-Taste]) so vergrößert, dass er genau die Elemente der Zeichnung umfasst, die im ersten Frame erscheinen sollen.
  • Dann bekommt dieser Klon (über Objekteigenschaften im Feld ›Kennung‹) einen eindeutigen Namen zugewiesen, z.B. ›Blick_01_G‹, (›G‹ für Grundebene, Klick auf ›Setzen‹ nicht vergessen). Wenn Sie sich jetzt fragen, warum ein Klon und nicht ein Duplikat von dem Originalrahmen gemacht werden soll - es ist egal, beides funktioniert gleich gut. Die Klon-Methode hat aber den Vorteil, dass man jederzeit das Original unsichtbar stellen kann - und alle Klone sind dann ebenfalls nicht mehr sichtbar.
  • In Sozi wird dieser Name beim ersten Frame im Feld ›Outline Element ID‹ eingetragen, nachdem die Schaltfläche ›Element automatisch auswählen‹ deaktiviert wurde.
  • Wenn man nun auf das Icon ›An SVG-Element anpassen‹ klickt, wird im Anzeigefenster genau der Bildausschnitt angezeigt, der durch den Rahmen mit dem Namen ›Blick_01_G‹ abgedeckt wird. Die SVG-Datei wird (in Sozi) dabei automatisch so verschoben, gedreht und gezoomt, dass sie exakt in den Anzeigerahmen passt.
    Achtung: Drehen funktioniert dabei nur, wenn das Outline-Element ein Rechteck ist - Pfade funktionieren zwar beim Verschieben und Zoomen - aber nicht beim Drehen!
  • Wenn man jetzt noch für diesen Frame die Schaltfläche ›Element verstecken‹ aktiviert, passt alles perfekt und der Referenzrahmen ist nicht mehr sichtbar. (Wenn sich ein Referenzrahmen einfach nicht verstecken lassen will, kontrollieren Sie mal, ob nicht an gleicher Stelle noch ein weiterer Rahmen liegt ...)
  • Ein Klick auf den Button ›Nicht sichtbare Elemente entfernen‹ sorgt dann ggf. dafür, dass nur noch die Sachen angezeigt werden, die innerhalb des Referenzrahmens liegen.
  • Der Rahmen ›Blick_01_G‹ kann dupliziert und mit einer neuen Kennung versehen werden - und schon ist der Referenzrahmen für den nächsten Frame bereit zur genauen Positionierung.
    Verkleinerung des neuen Rahmens bewirkt ein Reinzoomen, Vergrößerung zoomt heraus.

Die Vorteile dieser kompliziert klingenden Vorgehensweise gegenüber händischem Einpassen werden erst ersichtlich, wenn man komplexere Präsentationen plant:

  • die Referenzrahmen sind Teil der SVG-Datei und werden mit ihr gespeichert,
  • die Referenzrahmen können mit (Alt-)Cursortasten bei entsprechender Vergrößerung wesentlich genauer positioniert und rotiert werden als der Bildausschnitt in Sozi,
  • die Lage der Rahmen relativ zur Zeichnung liegt fest (kann ggf. sogar in InkScape gesperrt und damit vor versehentlichem Ändern geschützt werden),
  • Falls die Referenzrahmen stören, ändert man einfach beim Original ›in der Ecke‹ Füllung und Kontur auf ›nichts‹ und schon sind auch alle Klone nicht mehr sichtbar.
  • Referenzrahmen lassen sich ggf. auch auf Unterebenen der gerade bearbeiteten Ebene anlegen. Diese Unterebenen tauchen in Sozi nicht auf, machen aber alle Aktionen mit, die man mit der jeweiligen Mutterebene veranstaltet. Die Unterebenen kann man in InkScape jederzeit einzeln aus- und wieder einblenden.

Spätestens bei der Erstellung einer Animation mit mehreren Elementen, die zudem auch noch genau gegeneinander ausgerichtet werden sollen, kommt man um die Nutzung von Referenzrahmen m.E. nicht herum.

  • Diese Elemente werden jeweils auf einer eigenen Ebene angeordnet.
  • Zusätzlich werden auf den gleichen Ebenen (bzw. auf Unterebenen dieser Ebenen) weitere Klone des o.a. Rechtecks mit der Kennung ›Blick_01_M‹, ›Blick_02_M‹ usw. so angeordnet, dass beim Einpassen des betreffenden Rahmens in das Anzeigefeld von Sozi der gewünschte Effekt eintritt.
    (Man blickt durch den jeweiligen Rahmen gezielt auf einen Bereich der ausgewählten Ebene und verliert dadurch Objekte aus dem Blick bzw. man betrachtet sie aus verschiedenen Blickwinkeln näher.)

Auf diese Weise ist es kein Problem, mehrere Objekte auf dem gleichen Hintergrund sich in unterschiedlichen Richtungen bewegen zu lassen und dabei auch noch ihre Größe zu verändern.

Ändert man nach (während) der Erstellung der Präsentation etwas an der SVG-Vorlage, geraten die Ebenen leider sehr leicht ›aus dem Takt‹, das heißt, sie sind manchmal mehr oder weniger gegeneinander verschoben. Mit Hilfe der Referenzelemente kann man die Ordnung aber sehr schnell wieder herstellen.

Die hier gezeigte Präsentation ist mir trotz mehrfacher Versuche nicht ohne die Nutzung von Outline-Elementen gelungen. Das händische Verschieben der Puzzleteile war einfach nicht genau genug. (Wenn Sie den Link in einem neuen Tab oder Fenster öffnen, kommen Sie leichter an diese Stelle zurück.)



Besonderheiten

Bei der Arbeit mit Sozi gilt es einige Besonderheiten zu beachten.

Start

Bis zur aktuellen (offiziellen) Versio 18.04 ist der Startbildschirm einer Sozi-Präsentation manchmal irgendwie undefiniert, d.h. man hat wenig Einfluss darauf, was beim Laden angezeigt wird.

Ab der inoffiziellen Version 18.05 wird ein weißer Bildschirm angezeigt, bis die Präsentation komplett geladen ist. Danach wird der erste Frame sanft eingeblendet.


Titel

Eine mit Sozi erstellte Präsentation trägt im Browserfenster zunächst immer den unschönen Titel ›untitled‹, wenn man die Voreinstellungen einfach so belässt.

Man kann den Titel in Sozi nicht ändern, denn das Programm übernimmt ihn direkt aus den Metadaten der InkScape-Datei. In InkScape finden Sie unter → DateiDokumenteinstellungen auf dem Reiter → Metadaten das Feld ›Titel‹. Nach dem Speichern ziert hier eingetragener Text ab dem nächsten Browser-Refresh das Sozi-Fenster.


Hintergrundfarbe

Bei Inkscape kann man die Hintergrundfarbe in den Dokumenteneinstellungen setzen. Leider ist diese Farbe nur in Inkscape selbst und in exportierten Grafiken sichtbar. Von Webbrowsern wird sie ignoriert.

Auf der Sozi-Seite findet man unter → CreateFrequently Asked Questions and Troubleshooting eine Anleitung, wie man das ändern kann (noch nicht erfolgreich getestet).
Man kann die Hintergrundfarbe aber auch einfach in InkScape festlegen, indem man ein entsprechend farbiges Rechteck hinterlegt.


Automatische Aktualisierung

Wenn Sozi im Hintergrund läuft, wird nach jedem Speichern der InkScape-Datei die Präsentation automatisch aktualisiert, sobald der Focus zwischen InkScape und dem Browser wechselt. Der Browser muss nach jeder Sozi-Aktualisierung die Seite neu laden, sonst bekommt er die aktuellen Änderungen nicht mit und zeigt weiterhin die letzte Version Ihrer Präsentation an.
Falls die automatische Aktualisierung mal nicht funktioniert, kann sie mit den entsprechenden Icons oder den Tastenkombinationen [Strg-S] (speichern) bzw. [F5] (SVG neu einlesen) auch händisch ausgelöst werden.


Dateien

Aus der Datei ›praesi01.svg‹ erzeugt Sozi - ohne sie zu verändern - die Dateien ›praesi01.sozi.json‹ und ›praesi01.sozi.html‹.
Erstere benutzt Sozi zum Speichern aller Frames und Einstellungen, die andere Datei ist die eigentliche Präsentation.
Falls man Pixeldateien importiert hat, muss man diese ggf. mitkopieren.


Audio & Video

Es gibt eine InkScape-Erweiterung ›Add Video or Audio‹, die im Ordner ...\Inkscape\share\extensions entpackt werden muss. Nach einem Neustart von InkScape findet man sie unter → Erweiterungen → Sozi Extras.
Wenn man einer Präsentation ein neues Audio- oder Video-Element hinzufügen möchte, muss man die folgenden Informationen zur Hand haben:

  • Media element: Video oder Audio.
  • Breite: in Pixeln.
  • Höhe: in Pixeln.
  • MIME type: Typ der Datei (z.B. video/mp4 or audio/ogg).
  • Dateiname oder URL: Wenn die Datei im gleichen Ordner wie die SVG-Datei liegt, reicht der Dateiname.
  • Play automatically in Sozi frame: Wenn hier ein Häkchen gesetzt ist, startet das Video automatisch, sobald der Frame mit der in der nächsten Zeile angegebenen ID angezeigt wird.
  • Start playing when entering frame (id): Hier muss die ID des Frames eingetragen werden, ab dem das Video starten soll.
  • Stop playing when entering frame (id): Hier muss die ID des Frames eingetragen werden, ab dem das Video stoppen soll. Scheinbar stoppt das Video erst, wenn es komplett durchgelaufen ist.

Die Anzeige des Videos ist browserabhängig. In Firefox klappt es problemlos wie bei der Anzeige anderer Elemente. Opera und Chrome (1/18) zeigen das Video in der linken oberen Ecke des Browserfensters an.


Text

Fließtext sollte in InkScape nicht benutzt werden, wenn eine spätere Anzeige in einem Browser geplant ist. Fließtext muss entweder in normalen Text oder in einen Pfad umgewandelt werden. Die letzte Option führt bei der Präsentation zu flüssigeren Abläufen und hat zudem den Vorteil, dass auch extravagante Schriften problemlos genutzt werden können.
Man muss dabei natürlich darauf achten, den Originaltext vor der Umwandlung zu sichern, um später mal Änderungen vornehmen zu können. Eine einfache Lösung ist, die Originale auf eine eigene (versteckte) Ebene zu verbannen, von der Sie bei Bedarf immer wieder zurückgeholt werden können.


Pixelbilder

Das Poster, über das hinweg der Sozi-Flug stattfindet, kann natürlich auch Pixelbilder wie Jpeg, Tiff oder PNG enthalten. Diese können entweder direkt in InkScape importiert oder per Link eingebunden werden.

Die erste Methode hat den Vorteil, dass die Präsentation aus einer Datei besteht, während die zweite Methode zu kleineren Html-Dateien führt. Wo Licht ist, ist auch Schatten, denn die Html-Datei mit integriertem Bild wird durch dieses deutlich größer, während man bei der zweiten Methode beim Kopieren der Präsentation immer darauf achten muss, dass man alle Bilder mitkopiert.
Bei umfangreichen Präsentationen sollte man die Größe bzw. Auflösung der benutzten Bilder im Fokus haben. Sind sie zu klein, ist die Anzeige pixelig bzw. unscharf. Ist die Auflösung sehr hoch, besteht die Gefahr, dass die Präsentation beim Laden stockt oder die Anzeige ruckelt

Animierte GIFs können ebenfalls in einer Präsentation genutzt werden, allerdings nur, wenn Sie als verlinktes Objekt eingefügt werden! Wenn man sie direkt einbettet, werden sie zwar angezeigt, laufen aber nicht.

Beispiel  anschauen (mit Mausklick starten)
Seite 31 aus Otto Multhaupts ›Die Moderne Elektrizität‹ aus 1901. Die Animation besteht aus 11 Frames und wurde in wenigen Minuten zusammengeschoben. Das Bild (8 MB) wurde durch Referenz eingebaut, was die erzeugte Htm-Datei erfreulich klein hält (~ 70 KByte).


Hardware-Voraussetzungen

Sozi benötigt für flüssiges Arbeiten ziemlich aktuelle Hardware und ausreichend Speicher. Die Erstellung einer eher technischen Präsentation mit ca. 100 Frames und ca. 1 MB Größe kam mit 4 GB Arbeitsspeicher häufig ins Stocken. So konnte es nach einer Änderung des Bildausschnitts in einem Sozi-Frame bis zu 30 Sekunden dauern, bevor sich die nächste Aktion starten ließ. Unter Windows-7(+10)-64Bit und mit 8 GB Arbeitsspeicher traten derartige Verzögerungen deutlich weniger und auch nur viel kürzer auf.
Bei den aktuelleren Versionen tritt dieses Problem scheinbar nicht mehr auf.

Hier noch ein Beispiel aus der Abteilung ›Interaktive Arbeitsblätter Mathematik‹ (Winkelmessung animiert).