Präsentationen mit Sozi

Mithilfe von Sozi und InkScape kann man leicht Präsentationen erzeugen, die sofort ins Auge stechen, weil sie nicht wie die üblichen ‚Powerpoints‘ langweilig Folie nach Folie anzeigen sondern den Zuschauer eher auf einen Drohnenflug über ein Poster mitnehmen. Spektakuläre Flugmanöver sind dabei inbegriffen. (Wenn Ihnen jetzt der Begriff ›Prezi‹ in den Sinn kommt, liegen Sie gar nicht so verkehrt.)

Sozi und InkScape sind kostenlos und die Präsentationen können in jedem aktuellen Internetbrowser angezeigt werden.

Beide laufen unter Windows, MacOS und Linux. Vom Sozi-Autor wurde mittlerweile die offizielle Version 20.05 freigegeben. Ältere (oft auch aktuellere) Zwischenversionen finden sich in der Google-Cloud .

Die Hinweise auf dieser Seite sind das Ergebnis einer sehr langen Recherche im Netz, ergänzt durch viele Versuche und Irrtümer. Reihenfolge und Gliederung sind dabei zunächst wild gewachsen, wandeln sich aber mehr und mehr in eine Art ›Tutorial‹ um.

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) ohne Beeinträchtigung des restlichen Systems ausprobiert werden kann, können (und sollten) Sie es bedenkenlos testen! Wenn das Programm Ihnen nicht zusagt, entfernen Sie den Ordner LW:\Sozi-20.05.09-1589035558-windows-ia32 und alle Spuren sind beseitigt.
Das Ausprobieren ist für Sie kostenlos - Sie bezahlen noch nicht einmal mit Ihren Daten!

Ich gehe bei der nachfolgenden Anleitung 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).
    InkScape und die Datei bleiben weiterhin geöffnet.

  • Laden Sie die aktuelle Version von Sozi und entpacken Sie die ZIP-Datei auf einem beliebigen Laufwerk (auch USB-Stick). 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 Präsentation ist bereits fertig - auch wenn sie bisher nur einen leeren Bildschirm präsentiert!
    Sozi hat sie automatisch im gleichen Ordner gespeichert.

  • Starten Sie Firefox, Opera oder Chrome und laden Sie (Strg-O) die von Sozi automatisch erzeugte Datei ›praesi01.sozi.html‹.
    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. Für einen kurzen Augenblick tauchen unten rechts am Bildschirm zwei kleine blaue Hinweisfenster auf.

  • 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 (gespeicherten) Änderung sofort aktiv oder sobald man in Windows die Fensterverwaltung nutzt.)

  • Fügen Sie in Sozi mit ›+‹ (links unten) einige neue Frames zur Timeline hinzu.

  • Klicken Sie nacheinander auf jeden Frame und verändern Sie die Ansicht - einfach direkt 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äsentation ›ü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.)

Zusammenfassung

Sozi konvertiert eine InkScape-Datei in eine HTML-Datei und ergänzt sie dabei mit zusätzlichen Informationen, über die die Anzeige im Browser detailiert gesteuert werden kann. Aktualisierungen in der SVG-Datei müssen gespeichert werden, damit Sozi sie in seine Html-Datei übernehmen kann.




l24/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 direkt neben dem Seitenverhältnis vier Buttons, über die man die Vorschau

  • verschieben,

  • zoomen,

  • drehen und

  • beschneiden kann.

Ich empfehle, das Icon ›Ausgewählte Ebenen Verschieben‹ (Kreuz) direkt rechts neben dem Seitenverhältnis dauerhaft 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.


Timeline

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.

Die einzelnen Frames bilden wie bei einem Video-Schnitt-Programm eine Timeline und werden bei der Präsentation im Browser nacheinander (von links nach rechts) 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 oder der Entf-Taste einfach 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, Ebene 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 der Taste ›t‹ oder Klick mit dem Mausrad aufrufen kann.

Die Frame-Übersicht lässt sich strukturieren, indem man den Schieberegler in Title level in frame list für jeden Frame entsprechend verschiebt.

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.

Ebene (Layer)

Sobald in der Präsentation irgendetwas animiert werden soll, kommt man an der Benutzung von Ebenen nicht mehr vorbei.
Die hier aufgeführten Optionen 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 einer (aus einer Liste ausgewählten) Ebene den in der Timeline markierten Ebenen 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 Hilfe 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 (Objekt auswählen, größtmöglicher Zoom, Alt-Pfeil).
Die ID des gewählten Elements lässt sich in das Feld direkt eintragen, wenn der Button ›Element automatisch auswählen‹ deaktiviert ist. Ist er aktiviert, bestimmt Sozi das SVG-Element automatisch.

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.
(Sie können die Bezeichnung selbst anpassen, wenn Sie in der Datei resources\app\js\locales.js die Begriffe austauschen und Sozi neu starten.)
Wenn Sie eine Ebene einblenden möchten, müssen Sie sie (spätestens im Frame) vorher ausgeblendet haben.

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 möglichst gut ausfüllt. Damit das funktioniert, muss das gewählte Outline-Element in einer der ausgewählten Ebenen enthalten sein.


Übergang

Bei jedem einzelnen Frame lässt sich 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 der SVG-Datei. Wichtig ist hier, dass es sich bei dem gewählten Objekt wirklich um einen Pfad handelt! Vielecke, Kreise, Spiralen etc. funktionieren nicht bzw. erst, wenn Sie in einen Pfad umgewandelt wurden.
Bei animierten Elementen wird die Bewegung durch eine Bewegung entlang des gewählten Pfads überlagert. Die Stärke des Effekts hängt dabei von der Größe des Pfades ab, die Geschwindigkeit von der Länge.


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 (oder Klick mit dem 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.
Solange man an die Genauigkeit der Animation keine allzugroßen Ansprüche stellt, besteht der Mehraufwand gegenüber den weiter oben beschriebenen einfachen Präsentationen darin, dass man vor der Manipulation eines Frames zunächst die Ebene(n) auswählt, in der die Verschiebe/Dreh-/Zoom-Aktion stattfinden soll.

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 DVD finden Sie im gleichen Ordner auch die InkScape- und Sozi-Dateien und können selbst damit experimentieren.

Um eine einzelne Ebene innerhalb eines Frames auszuwählen, klickt man einfach mit der Maus auf den entsprechenden Button. Wichtig ist dabei, das nur die gewünschte Ebene links in der Auflistung ebenfalls ausgewählt ist. Ausgewählte Ebenen sind blau hinterlegt, nicht ausgewählte schwarz.
Möchte man zwei oder mehrere Ebenen auswählen, klickt man einfach mit gedrückter-Strg-Taste auf die entsprechenden Buttons des Frames.

Beispiel-1 (Mit Klick 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  in neuem Fenster 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 wie im Abschnitt zuvor beschrieben ganz gut, komplexere Bewegungsabläufe führen aber leider oft zu Problemen. Vor allem, wenn man noch Änderungen an der SVG-Datei durchführt, nachdem man schon einen Teil der Animation fertig hat, geraten die Ebenen in Sozi gern durcheinander.

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

Abhilfe schaffen so genannte Outline-Elemente, mit deren Hilfe einzelne Ebenen gegeneinander ausgerichtet werden können.

Beispiel-3  in neuem Fenster anschauen.   bearbeiten
Auf den beiden Ebenen ›plane‹ und ›background‹ befinden sich ein Hubschrauber und eine Skyline. Diesmal besteht die Animation wieder 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 (d.h. die zugehörige Ebene) wird dabei mit verschoben, skaliert und gedreht.).

  • Frame-2 enthält die gleichen Inhalte, allerdings wurde der Blick durch das Rechteck mit der Kennung ›Blick_02‹ auf den Hubschrauber in Ebene ›plane‹ festgelegt.
    Das Rechteck wurde so verschoben, dass der Hubschrauber genau auf dem Förderturm steht, nachdem der Framewechsel abgeschlossen ist.
    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.

In der Präsentation startet der Hubschrauber nach dem Mausklick und sinkt immer langsamer auf den Landeplatz zu. Dabei dreht er sich 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 erzeugen, würde man wahrscheinlich daran scheitern, dass die Manipulationen im Vorschaufenster einfach nicht feinfühlig genug sind.
Die Rechtecke, die als Outline-Elemente herangezogen werden, lassen sich hingegen in InkScape nahezu beliebig genau positionieren!

Diese Animation mithilfe der beiden Rechtecke eignet sich auch ganz gut zur besseren Erklärung, wie der Animationseffekt überhaupt zustande kommt und hilft bei der Planung weiterer Animationen.
Denken Sie sich bitte den Hintergrund auf einer und den Hubschrauber auf einer zweiten Klarsichtfolie. Beide Folien liegen so aufeinander, dass wenn der Blick auf das erste Rechteck gerichtet ist, man den Hubschrauber rechts oben sieht.
Wird jetzt die Hubschrauberfolie so verschoben, dass sich anschließend beide Rechtecke decken, bewegt sich der Hubschrauber dabei tatsächlich so durch das erste Rechteck, wie unsere Animation es anzeigt.
Ersetzen Sie nun bitte den Begriff ›Folie‹ durch ›Ebene‹, dann sollte Ihnen ein Licht aufgehen.
Sozi schiebt die gesamte Ebene ›plane‹ und dreht/vergrößert/verkleinert sie dabei so, dass anschließend das Rechteck mit der Kennung ›Blick_02‹ genau in die Anzeige passt. Alle Inhalte der Ebene werden dabei ebenfalls manipuliert (mitverschoben/-vergrößert/-gedreht).
Achtung! Nach jeder Änderung an einem solchen Outline-Element in InkScape muss die entsprechende Darstellung in Sozi neu an die Größe bzw. Position angepasst werden (Klick auf das Icon).

Beispiel-4  in neuem Fenster 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 etwas 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 er sauber auf dem Turm landet.

Beispiel-5  in neuem Fenster 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-1‹ bis ›heli-4‹ 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  in neuem Fenster 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.

Beispiel-7  in neuem Fenster 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.

Beispiel-8  in neuem Fenster 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 leicht 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.

Beispiel-9  in neuem Fenster anschauen.  bearbeiten
Diese Animation soll den Einfluss eines Pfades verdeutlichen, der mit dem Framewechsel verknüpft ist. Der Heli bewegt sich insgesamt sechsmal von links nach rechts. Beim ersten ›Flug‹ ist kein Pfad verknüpft, bei den nächsten fünf Bewegungen werden die Zickzacklinien oben im Bild nacheinander mit dem Übergang verknüpft.

  • Ohne Verknüpfung
    lässt Sozi den Blick auf den Hubschrauber einfach von rechts (rotes Rechteck) nach links (blaues Rechteck) wandern,
    d.h. der Hubschrauber bewegt sich beim Wechsel von Frame 1 nach Frame 2 gleichmäßig nach rechts.

  • Zickzacklinie-1 (runter-rauf)
    lässt den Blick auf den Hubschrauber zusätzlich zum Linksschwenk runter-rauf abweichen.
    In der Folge bewegt sich der Heli rauf-runter, während er gleichmäßig nach rechts fliegt.

  • Die nächsten beiden Pfade haben jeweils mehr Zacken, sind aber jeweils weniger hoch als der Vorgänger. Der Heli fliegt daher bei jedem weiteren Flug öfter rauf-runter, aber nicht mehr so stark. Dafür wirkt die vertikale Bewegung jedesmal heftiger, weil sie in gleicher Zeit öfter stattfindet, und daher schneller erfolgt.

  • Die vierte Zickzacklinie wurde mit einem Pfadeffekt perspektivisch verzerrt, so dass die Amplitude von links nach rechts abnimmt, während die Frequenz zunimmt.

  • Die fünfte Zickzacklinie entspricht der dritten, wurde aber um 90 Grad gedreht. Da die Richtungsänderungen in der gleichen Richtung erfolgen wie die ursprüngliche Bewegung, bewirken sie eine Änderung der Geschwindigkeit.


Komplexe Präsentationen

Ich beschreibe im Folgenden einen Weg, der sich bei der Erstellung komplexerer Präsentationen sehr bewährt hat.

Warum einfach, wenn …

Kern dieser Vorgehensweise ist der komplette Verzicht auf händische Manipulationen im Sozi-Vorschaufenster! Dafür wird reichlich Gebrauch gemacht von speziellen Rahmen, die jeweils als ›Outline Element‹ dienen und durch ihre Lage und Größe den angezeigten Ausschnitt der SVG-Datei festlegen.

Durch diesen Verzicht wird die Gestaltung der Präsentation zwar um einiges aufwändiger, bietet dafür aber erheblich bessere Steuermöglichkeiten, da der Ausschnitt in InkScape extrem genau festgelegt werden kann.
Mit ein wenig Übung geht die anfangs scheinbar umständliche Arbeitsweise auch sehr schnell von der Hand und liefert genau reproduzierbare Ergebnisse!

Vor allem bei nachträglichen Änderungen an der SVG-Datei gerät eine sorgsam ausgeknobelte Choreographie, die gerade noch funktioniert hat, in Sozi plötzlich komplett aus dem Ruder. Wenn man dann alle Manipulationen händisch korrigieren muss …

… es auch kompliziert geht

Und zwar mithilfe von Referenzrahmen.

  • 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 später benutztem 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 rechteckiger Pfad würde spätestens bei Drehungen 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 Rechtsklick, Objekteigenschaften im Feld ›Kennung‹) einen eindeutigen Namen zugewiesen, z.B. ›Blick_01_G‹, (›G‹ für Grundebene, Klick auf ›Setzen‹ nicht vergessen).
    Ein Duplikat des Originalrahmens würde übrigens gleich gut funktionieren. Die Klon-Methode hat aber den Vorteil, dass man jederzeit das Original unsichtbar stellen kann - und alle Klone sind dann ebenfalls nicht mehr sichtbar.
    Sozi kann zwar jedes Referenzelement ausblenden, aber bei mir funktionierte das leider nicht immer zuverlässig und plötzlich auftauchende und sich bewegende Rechtecke stören bei der Präsenation doch sehr.

  • In Sozi wird der eindeutige Name des Klons beim ersten Frame im Feld ›Outline Element ID‹ eingetragen, nachdem die Schaltfläche ›Element automatisch auswählen‹ deaktiviert wurde.
    Alternativ kann man die Automatik auch aktiviert lassen und das Vorschaufenster mit der Maus so lange manipulieren, bis es vom Klon des Rechtecks beinahe ausgefüllt wird - die SVG-Kennung des Rechtecks sollte dann automatisch im Feld ›Outline Element ID‹ auftauchen.

  • 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 dabei (in diesem speziellen Sozi-Frame) automatisch so verschoben, gedreht und gezoomt, dass sie exakt in den Anzeigerahmen passt.
    Achtung: Hier noch einmal der Hinweis, das Drehen dabei nur funktioniert, wenn das Outline-Element ein Rechteck ist - Pfade funktionieren zwar beim Verschieben und Zoomen - aber nicht beim Drehen!
    Sobald Sie an dem Rahmen irgendetwas ändern (Lage/Größe), müssen Sie in Sozi noch einmal auf das Icon ›An SVG-Element anpassen‹ klicken! Hinweis
    Wenn sich das Icon ›An SVG-Element anpassen‹ partout nicht aktivieren lässt, liegt das wahrscheinlich daran, dass es in einer Ebene liegt, die nicht zur Auswahl der Ebenen gehört, die gerade bearbeitet werden sollen.

  • 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.
    Diese Option kann wichtig werden, wenn die Präsentation auf Anzeigen mit anderen Seitenverhältnissen ablaufen soll.

  • Der Rahmen ›Blick_01_G‹ kann nun dupliziert und das Duplikat mit einer neuen Kennung versehen werden (wieder über Rechtsklick, Objekteigenschaften im Feld ›Kennung‹) - und schon ist der Referenzrahmen für den nächsten Frame bereit zur genauen Positionierung.
    Nachdem im zweiten Frame die neue Kennung als ID eingetragen bzw. erkannt wurde, müssen Sie nur wieder auf das Icon ›An SVG-Element anpassen‹ klicken, und schon ist die neue Ansicht fertig.

  • Versuchen Sie doch mal, den zweiten Referenzrahmen zu vergrößern, verkleinern und/oder zu drehen. Vergessen Sie dabei aber nicht, nach jeder Änderung auf den ›Anpassen-Button‹ zu klicken.
    Verkleinerung des neuen Rahmens bewirkt ein Reinzoomen, Vergrößerung zoomt heraus. Größenänderungen sollten natürlich mit gedrückter STRG-Taste vorgenommen werden, damit das Seitenverhältnis erhalten bleibt.

Die Vorteile dieser kompliziert klingenden Vorgehensweise gegenüber händischem Einpassen werden spätestens dann ersichtlich, wenn man wirklich komplexe 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.

  • Wenn durch viele Klone des Rechtecks die Sache droht unübersichtlich zu werden, lassen sich die Referenzrahmen 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.

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 mehr herum.

  • Jedes Element, das sich unanhängig vom Rest der Zeichnung bewegen soll, wird 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.

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

Ändert man nach (bzw. während) der Erstellung der Präsentation etwas an der SVG-Vorlage, geraten verschobene Ebenen leider sehr leicht ›aus dem Takt‹, das heißt, sie sind plötzlich anders verschoben als Sie das mal geplant hatten.
Mit Hilfe der Referenzelemente kann man die Ordnung sehr schnell wieder herstellen, ohne sie ist eine Korrektur fast unmöglich.

Die hier gezeigte Präsentation ist mir trotz großer Sorgfalt und 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.)

Ein komplexes Beispiel

Um die Möglichkeiten und Grenzen der zuvor beschriebenen Methode mal auszutesten, habe ich eine animierten Lernscheibe konstruiert.

Bei der echten Lernscheibe erscheint die Lösung einer angezeigten Aufgabe immer auf der Rückseite und ist daher zunächst nicht zu sehen.
Bei der Animation werden Vor- und Rückseite auf zwei gegenläufig rotierenden Scheiben angezeigt. Die Lösung wird beim ›Eindrehen‹ jeweils ausgeblendet und wird erst nach einem weiteren Klick wieder sichtbar.

Die InkScape-Datei enthält vier Ebenen (Aufgaben:linkes Rad/Vorderseite, Loesungen:rechtes Rad/Rückseite, Hülle links, Hülle rechts).
Die Animation ist folgendermaßen entstanden:

  • Zunächst wurden drei Hilfslinien erzeugt, deren Schnittpunkte die Mittelpunkte der beiden Kreisscheiben festlegen.
    (0;105), (80;0) und (217;0).

  • Dann wurden zwei gleich große Kreise so gezeichnet, dass ihre Mittelpunkte auf den Schnittpunkten der Hilfslinien lagen. Die Einrastfunktion half bei der genauen Positionierung.
    Da die Kreise in der Animation entgegengesetzt hinter der Hülle rotieren sollten, wurde jeder auf einer eigenen Ebene angelegt.
    Der Kreis für die Aufgaben kam auf die Ebene ›Aufgaben‹, der andere auf die Ebene ›Loesungen‹.

  • Auf der Ebene ›Aufgaben‹ wurden drei Einzelzeilen Text rechtsbündig auf der linken Scheibe positioniert und gruppiert. (Mehrzeiliger Text bringt bei der späteren Anzeige im Browser ggf. Probleme.)

  • Die Gruppe wurde vertikal zentriert am Kreis ausgerichtet (ca. 1 mm vom rechten Rand).

  • Mit dem Auswahltool wurde die Gruppe zweimal angeklickt, so dass neben den Anfassern auch das Rotationszentrum sichtbar wurde. Dieses wurde mit der Maus genau auf den Mittelpunkt des linken Kreises verschoben.

  • Mit <Umschalt-Strg-M> wurde das Transformationsfenster geöffnet, Reiter ›Drehen‹, Winkel 30 Grad.

  • Elfmaliges Duplizieren (<Strg-D>) und Klicken auf ›Anwenden‹ erzeugten die zwölf Platzhalter für die Aufgaben.

  • Die Platzhalter für die Lösungen wurden auf der rechten Scheibe (andere Ebene!) entsprechend erzeugt.

Jetzt kam der entscheidende Teil mit den Referenzrahmen!

  • Zunächst wurde auf einer beliebigen Ebene oben links in der Ecke ein Rechteck erzeugt (h=3cm;b=4cm). Liniendicke 0,1mmm Füllung keine. Dieses Rechteck sollte als Klonvorlage für alle anderen noch zu erzeugenden Referenzrahmen dienen.
    Indem man ihm die Umrandung ›raubt‹, werden alle Referenzrahmen der Präsentation unsichtbar.

  • Ein Klon (<Alt-D>) dieses Rechtecks wurde auf die Ebene ›Aufgaben‹ verschoben und unter Beibehaltung der Proportionen so vergrößert/positioniert, dass innerhalb des Klones eine komplette Aufgabe und die zugehörige Lösung sichtbar waren. Der Klon wurde dann noch an der linken Scheibe vertikal auf Mitte ausgerichtet.

  • Von dem Klon wurden elf Duplikate erzeugt und wie zuvor beim Aufgabentext beschrieben um das Zentrum der Kreisscheibe herum angeordnet (Rotationszentrum verschieben, duplizieren, drehen).

  • Die zwölf Referenzrahmen bekamen eine Kennung (a01 - a12), über die sie in Sozi als Outline-Element festgelegt werden können. Dazu wurde jeder Rahmen
    - angeklickt
    - aus dem Kontextmenü ›Objekteigenschaften‹ gewählt
    - die Kennung eingetragen (dann den Klick auf ›setzen‹ nicht vergessen)
    Der zuerst erzeugte Klon erhielt die Kennung ›a01‹, die anderen gegen den Uhrzeigersinn ›a02‹ bis ›a12‹.

Die gleiche Prozedur wurde auf der Ebene ›Loesungen‹ durchgeführt, hier wurden die Referenzrahmen von ›l01‹ bis ›l12‹ benannt, diesmal allerding im Uhrzeigersinn.
Der erste Rahmen entstand durch Kopieren und platzgenaues Wiedereinfügen von Rahmen ›a01‹ auf der Ebene Lösungen.

Zuletzt wurde der Ursprungsrahmen für die Referenz-Klone unsichtbar gesetzt und die Datei noch einmal gespeichert.

Wer die Ausführungen zu den Referenzrahmen aufmerksam gelesen und halbwegs verstanden hat, versteht jetzt wahrscheinlich auch schon, wie diese spezielle Animation funktioniert.
Indem die jeweils zusammengehörigen Referenzrahmen ›a01‹ und ›l01‹ bis ›a12‹ und ›l12‹ und mit ihnen die Inhalte der jeweiligen Ebene nacheinander ins sichtbare Fenster gelangen, entsteht der Eindruck von zwei gegenläufigen Rotationen.
Die Hüllen liegen auf eigenen Ebenen und machen daher die Rotation nicht mit.

In Sozi wurde vollkommen auf das Manipulieren im Vorschaufenster verzichtet! Hier die einzelnen Schritte:

  • Zunächst wurden alle Ebenen übernommen und ein erster Frame erzeugt (a01). (Ich habe für die Frames die gleichen Bezeichnungen benutzt wie für die Referenzrahmen.)

  • Für diesen Frame wurde die automatische Erkennung des Outline-Elements deaktiviert und ›a01‹ als Outline-Element eingetragen und der (ganze) Frame daran ausgerichtet.

  • Dann wurde nur die Ebene ›Loesungen‹ angewählt und ihre Deckkraft auf 0 gesetzt. Zusätzlich wurde ›l01‹ als Outline-Element für diese Ebene eingetragen und aktiviert.

  • Der Frame wurde dupliziert und das Duplikat in ›l01‹ umbenannt.

  • Die Ebene ›Loesungen‹ von Frame zwei erhielt die Deckkraft 100%.

  • Frame ›a01‹ wurde dupliziert und die Kopie hinter den letzten Frame verschoben und umbenannt in ›a02‹ (a03, a04,…).

  • Nur die Ebene ›Aufgaben‹ wurde an Outline-Element ›a02‹ (a03, a04,…) ausgerichtet.

  • Die Ebene ›Loesungen‹ wurde an Outline-Element ›l02‹ (l03, l04,…) ausgerichtet.

  • Der letzte Frame wurde verdoppelt und umbenannt in ›l02‹ (l03, l04,…) und die Ebene ›Loesungen‹ (der Kopie) erhielt die Deckkraft 100%.

Die letzten vier Schritte mussten für die anderen zehn Aufgaben entsprechend wiederholt werden und schon war die Präsentation fertig ;-)

Nachtrag: Bei der ersten Version haben die beiden Kreisscheiben deutlich ›geeiert‹. Der Effekt kam dadurch zustande, dass Sozi beim Ausrichten einer Ebene an einem Outline-Element natürlich nichts von dem Drehpunkt der Lernscheibe weiß. Das neue Element wird um 30 Grad gedreht und dabei in den Focus verschoben. Wenn ein Kreis um etwas anderes gedreht wird als der Mittelpunkt eiert er eben.
Das kleine Problem ließ sich ganz leicht lösen, indem (nur) der Kreis jeder Scheibe auf die Ebene der jeweiligen Hülle verfrachtet wurde. Danach drehten sich nur noch die Textblöcke und bei denen fällt das Eiern nur auf, wenn man darum weiß ;-)



Effekte

Sozi bietet außer dem Ein- und Ausblenden keine weiteren Effekte beim Übergang zwischen Frames. Mit ein wenig Kreativität lassen sich aber leicht selbst welche herstellen!

Lochblende

Ein einfaches weißes Rechteck mit einem kleinen runden oder sternförmigen (unscharfen) Loch darin wird auf einer eigenen Ebene oberhalb eines Fotos platziert. Zoomt man jetzt kräftig in diese Ebene hinein, vergrößert sich das Rechteck und damit auch das Loch - das darunter liegende Foto wird mittels Lochblende sichtbar.
Die Ebene könnte sich beim Hereinzoomen drehen oder wegdriften …
Für ein flüssiges Ablaufen der Präsentation ist es u.U. günstiger, die Lochblende aus einer Pixelgrafik zu machen, die aus InkScape exportiert und als PNG-Datei reimportiert wird. Die Auflösung und damit Dateigröße der importierten Grafik kann sehr gering sein.
Achten Sie beim Kopieren einer solchen Präsentation darauf, dass das AnimGif ebenfalls kopiert wird, denn sonst zeigt Ihnen Sozi eine weiße Fläche, die aufgeblendet wird …

Beispiel  anschauen  bearbeiten




Besonderheiten

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

Start

Beim Start wird ein weißer Bildschirm angezeigt, bis die Präsentation komplett geladen ist. Danach wird der erste Frame sanft eingeblendet.

Titel

Der Titel kann nicht in Sozi eingestellt werden, er wird aus den Metadaten der InkScape-Datei übernommen (→ Datei → Dokumenteinstellungen, Reiter → Metadaten).
Nach dem Speichern ziert hier eingetragener Text ab dem nächsten Browser-Refresh das Sozi-Fenster an Stelle von ›untitled‹.
Falls Sie mit InkScape v48.5 arbeiten, finden Sie diesen Punkt unter → Datei → Dokument Metadaten.

Hintergrundfarbe

Bei Inkscape kann man die Hintergrundfarbe in den Dokumenteneinstellungen setzen. Hier vorgenommene Einstellungen werden von Webbrowsern ignoriert, wenn die SVG-Datei direkt geöffnet wird.
Sozi erkennt die Einstellung und erzeugt ein HTML-Dokument mit der gleichen Hintergrundfarbe.
Wichtig ist hier, dass die Deckkraft einen positiven Wert hat (Alphakanal > 0).

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 dagegen muss nach jeder Sozi-Aktualisierung die Seite neu laden, sonst bekommt er die aktuellen Änderungen nicht mit und zeigt weiterhin die zuletzt geladene 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.
Seit der Version 19 wird eine zusätzliche Datei praesi01-presenter.sozi.html erzeugt, deren Sinn sich mir bisher noch nicht erschlossen hat.
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 (03/19) zeigen das Video in der linken oberen Ecke des Browserfensters an. Transformationen (Drehen, Skalieren, Verschieben) bleiben in diesen beiden Browsern ohne Effekt.

Text

InkScape unterscheidet normalen Text und Fließtext. Normalen Text erzeugt man, indem man einfach mit dem Textcursor irgendwo auf die Ebene klickt und losschreibt.
Fließtext entsteht, indem mit dem Textcursor ein Rechteck aufgezogen wird, in dem sich der Text automatisch ausrichtet.

Fließtext sollte in InkScape nicht benutzt werden, wenn eine spätere Anzeige in einem Browser geplant ist. Er 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) Unterebene zu verbannen, von der sie bei Bedarf immer wieder zurückgeholt werden können.

Wenn ich eine sehr textlastige Präsentation erzeugen will, nutze ich dazu sicherheitshalber die letzte Version 0.485 von InkScape. Bei späteren Versionen zeigen Textblöcke manchmal ziemlich eigenartiges Verhalten (Zeilen liegen plötzlich übereinander).
Wenn jemand Gründe oder besser noch Abhilfe für diese Fehler weiß, wäre ich an der Lösung sehr interessiert!

Pfad-ID

Die Bewegung beim Übergang von einem Bild zum nächsten muss nicht unbedingt linear erfolgen. Über die Verknüpfung mit einem speziell dafür angelegten Pfad kann sie sogar recht spektakulär ausfallen. Wie die ganze Sache funktioniert, lässt sich m.E. gut am Beispiel zeigen.
Wenn Sie eigene Experimente planen: Eine einfache gerade Linie mit zwei Stützpunkten bewirkt überhaupt nichts! Erst wenn der Pfad eine Richtungsänderung aufweist, macht er sich bei der Überlagerung bemerkbar.
Wenn Sie einen Pfad nicht mehr für einen Übergang nutzen wollen, scheint das Sozi (18.11.25) nicht zu interessieren. Selbst wenn der Pfad gelöscht wird, hinterlässt er Spuren. Wenn man den entsprechenden Frame aus der Timeline löscht und dann neu erstellt, ist der vorher verknüpfte Pfad nicht mehr aktiv.


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.
Während man bis zur Version 0.48.5 diese Entscheidung gleich beim Import treffen konnte, haben die Entwickler diesen Punkt in neueren Versionen m.E. unnötig verkompliziert:
Hier muss man ein Bild zunächst komplett einbetten und kann es anschließend extrahieren (Kontextmenü). Beim Extrahieren landet dann eine Kopie (Achtung beim Dateinamen) im User-Verzeichnis und diese Kopie ist verlinkt. Im Kontextmenü kann man schließlich unter Bildeigenschaften das Bild mit der ursprünglich importierten Datei verknüpfen.
Ich lege verlinkte Bilder i.d.R. im gleichen Ordner wie die SVG-Datei ab und lösche nach dem Extrahieren die Bildkopie im Userordner und trage unter Bildeigenschaften nur den Dateinamen der ursprünglich importierten Datei ein.

Der Direktimport hat den Vorteil, dass die Präsentation aus einer Datei besteht, während das Verlinken 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, die Animation läuft 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 aktuelleren Sozi-Versionen tritt dieses Problem scheinbar nicht mehr auf.

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

Sozi-Präsentationen im Netz

(Ich empfehle, die Links mit Rechtsklick in einem neuen Tab oder Fenster zu öffnen, denn die von Sozi generierten Dateien erzeugen 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.)

https://groups.google.com/forum/#!topic/sozi-users/2-igm9evoZk
https://matzjb.se/2014/04/26/sozi-versus-prezi-pdf/
http://sozi.baierouge.fr/community/
http://asso.parlemonde.org/le-voyage-de-pelico/
http://terradesentidos.org/wp-content/uploads/2016/03/memorial_sozi.sozi_.html#frame7895
http://terradesentidos.org/wp-content/uploads/2018/09/doutorado-marcelo.html#frame7777

Auf YouTube:
https://www.youtube.com/watch?v=lcBCVkYw0aA
https://www.youtube.com/watch?v=aABIgk_Lkkg