Präsentationen mit Sozi

Mit der Freeware Sozi lassen sich aus SVG-Dateien interaktive und animierte Präsentationen erzeugen, die in jedem aktuellen Internetbrowser angezeigt werden können. Das Betriebssystem spielt dabei keine Rolle. Erstellt werden die SVG-Dateien z.B. mit InkScape, Sozi organisiert die Anzeige im Browser.
Die Präsentation blättert dabei nicht wie bei Powerpoint einfach durch einzelne Folien sondern entspricht mehr wie bei Prezi einem Poster, das man mit einem zoomfähigen Fernglas aus unterschiedlichen Blickwinkeln betrachtet.
Sozi läuft unter Windows, MacOS und Linux. Vom Autor wurde inzwischen die Version 18.01 freigegeben, man findet sie zurzeit noch als Zwischenversion 18.01.
Die Hinweise auf dieser Seite sind das Ergebnis einer langen Recherche im Netz, ergänzt durch Versuch und Irrtum. |b2| **Bisheriges Fazit: sehr lohnenswert!*



Quick&Dirty Zugang (Windows)

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

  • Laden Sie die aktuelle Version von Sozi und packen Sie die ZIP-Datei auf einem beliebigen Laufwerk (auch USB-Stick) aus. Sozi ist portable und muss nicht installiert werden.
  • Erzeugen Sie eine neue SVG-Datei (InkScape → Datei → Neu).
  • Speichern Sie diese Datei unter dem Namen ›praesi01.svg‹ in einem neuen Ordner.
  • Starten Sie Sozi.exe und öffnen Sie dort die Datei ›praesi01.svg‹. Die Datei ist 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 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 einige Objekte und speichern(!) Sie die Datei.
  • Wenn Sie zurück nach Sozi schalten, sollten Ihre Objekte dort bereits angezeigt werden.
  • Fügen Sie in Sozi (mit ›+‹ links unten) einige Frames zur Timeline hinzu und verändern Sie in jedem Frame die Ansicht - einfach mit der Maus verschieben, drehen oder zoomen. Wenn Sie dabei die Tasten Strg, Alt und Shift drücken, wird der Ausschnitt in der Bewegung horizontal/vertikal eingeschränkt, gezoomt oder rotiert.
  • Schalten Sie zurück zu Ihrem Browser und laden Sie die HTML-Datei neu.
  • Blättern Sie mit den Cursortasten 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 sehr viele Einträge in der Browser-History. Nach Betrachten der Präsentation kommt man durch einfaches Schließen des neuen Tabs zurück auf die aufrufende Seite.)
2018j/boerse.pic/sozi_01.jpg

Bedienung

Hier eine kurze Zusammenfassung der Oberfläche von Sozi, die man grob in drei Bereiche einteilen kann:

  • Vorschau
  • Timeline
  • Einstellungen

Vorschau

Der große Bereich links oben zeigt immer den Inhalt des Frames unten in der Timeline an, der gerade ausgewählt ist. Im Bild oben ist das Frame-8, zu erkennen daran, dass er in der Timeline blau hinterlegt ist. In der Anzeige kann man mit der Maus den angezeigten Bereich verschieben, mit dem Mausrad zoomen und die Anzeige mit Umschalt-Mausrad drehen. Alle Manipulationen werden im gerade aktiven Frame gespeichert.
Mit [Strg-Z] oder Klick auf das entsprechende Icon kann man 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. Zumindest bei komplexeren Präsentationen macht es Sinn, jedem Frame einen sprechenden Namen zu geben, denn über diesen kann er jederzeit aus einer Übersicht heraus angesprungen 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 Pfeile erscheinen, wenn der Mauscursor über einer Frame-Nr. schwebt, im Bild oben bei Frame-6. Im Prinzip funktioniert die Änderung wie Ausschneiden/Einfügen bei anderen Windows-Programmen, allerdings mithilfe einer sozi-internen Zwischenablage.
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.

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.


Frame

Über zwei Icons kann festgelegt werden, ob der Frame in der Übersicht angezeigt werden soll und ob er eine Nummer erhält. Der Titel* entsteht automatisch und kann beliebig geändert werden. Der hier eingegebe Text erscheint ggf. in der Ü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 eingestellten Zeit automatisch auf den nächsten Frame weiter.


Ü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.
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 Animation (s.w.u.) bewirken sollen.


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 Animationen weiter unten 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 geradezu unglaublich präzise Animationen erzeugen, da man das 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 eigentlich ›Deckkraft der Ebene‹ heißen, denn die Inhalte werden ausgeblendet (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.




Besonderheiten

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

Titel

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

Man kann den Titel leicht ändern, denn Sozi übernimmt ihn aus den Metadaten der InkScape-Datei. Unter → DateiDokumenteinstellungen finden Sie 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 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 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.


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 Videoelement 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 in InkScape 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 zusätzlich 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 dadurch deutlich größer, während man bei der zweiten Methode beim Kopieren der Präsentation darauf achten muss, dass man alle Bilder mitkopiert.

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.

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
  • Hält man die Shift-Taste gedrückt, erfolgt der Folienwechsel ohne Zeitverzögerung.
  • ›t‹: Folienübersicht anzeigen/ausblenden. Man kann Frames von dieser Übersicht ausschließen.
  • ›.‹: Mit dem Punkt kann man die Präsentation aus- und wieder einblenden.

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.
  • Shift-Mausrad: Die Präsentation drehen.

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



Ebenen & Animationen

Bis hierher ist der Umgang mit Sozi einfach und intuitiv und man kommt schnell zu ansprechenden Ergebnissen. Verzwickter wird die Sache, wenn Teile der Präsentation animiert werden sollen, denn dann kommen Ebenen ins Spiel. Der Animationseffekt entsteht einfach dadurch, dass man beim Übergang zum nächsten Frame ein(ig)e Ebene(n) aus einem anderen Blickwinkel betrachtet als (die) andere(n). Dadurch scheinen sich die Ebenen bzw. die Objekte auf ihnen gegeneinander zu bewegen.

Einfache Animationen

Wenn die SVG-Datei Ebenen enthält, müssen diese in der Timeline einzeln hinzugefügt werden. Links neben der Timeline gibt es dafür einen Button. Die Namen der Ebenen werden aus der InkScape-Datei übernommen, für jede Ebene bekommt jeder Frame einen eigenen Button. Über diese Buttons kann für jeden Frame festgelegt werden, welche Ebene von der beabsichtigten Manipulation betroffen ist und welche nicht.
Normalerweise sind alle Buttons des aktuellen Frames ausgewählt (aktiv), d.h. Einträge im Eigenschaftsbereich (rechts oben im Editor) gelten für alle Ebenen dieses Frames.
Bei Animationen wählt man (nur) die Ebene mit dem zu animierenden Element aus und verändert sie.

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.

Beispiel-1  anschauen (mit Mausklick starten)
Auf den beiden Ebenen ›plane‹ und ›background‹ befinden sich ein kleines Flugzeug und eine Skyline. Die ganze Animation besteht aus genau 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.
  • 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.

Beispiel-2  anschauen (mit Mausklick starten)
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. Die Lösung für dieses Problem 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.

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.

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.







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.

Das regelt man über die Deckkraft bzw. Transparenz (rechts oben im Eigenschaftsbereich). Ab Version 15 kann Sozi die Deckkraft/Transparenz jeder Ebene in jedem einzelnen Frame gezielt festlegen. Dadurch kann man z.B. eine Ebene ein- oder ausblenden oder auch einfach nur ein- oder ausschalten - je nach Dauer des Wechsels zwischen den beiden Frames.

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.

Ich habe bei der Erstellung komplexerer Präsentationen mit folgender Vorgehensweise Erfolg gehabt:

  • Zunächst habe ich 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 habe ich in der SVG-Datei ein Rechteck mit genau diesem Seitenverhältnis erzeugt und an irgendeiner Ecke abgelegt (dünner schwarzer Rand, keine Füllung).
  • Von dem Rechteck ›in der Ecke‹ wird ein Klon erzeugt und (unter Beibehaltung des Seitenverhältnisses) so vergrößert, dass er genau die Elemente umfasst, die im ersten Frame erscheinen sollen. Dann bekommt dieser Klon (über Objekteigenschaften im Feld ›Kennung‹) einen eindeutigen Namen zugewiesen, z.B. ›Blick_01G‹ (›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 muss - 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 von Sozi genau der Bildausschnitt angezeigt, der durch den Rahmen mit dem Namen ›Blick_01G‹ abgedeckt wird.

Die SVG-Datei wird (in Sozi) dabei automatisch so verschoben, gedreht und gezoomt, dass sie genauer in den Anzeigerahmen passt, als hätte man sie nach Augenmaß dort eingepasst.
Achtung: Das Drehen funktioniert 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. Die Form des Referenzelements spielt keine Rolle, wirksam wird immer das umschließende Rechteck.

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

  • der Referenzrahmen ist Teil der SVG-Datei und wird mit ihr gespeichert,
  • der Referenzrahmen kann mit (Alt-)Cursortasten bei entsprechender Vergrößerung wesentlich genauer positioniert werden als der Bildausschnitt in Sozi,
  • die Lage des Rahmens relativ zur Zeichnung liegt fest (kann ggf. sogar gesperrt werden),
  • weitere Referenzrahmen ‘Blick_02G’ etc. können leicht erzeugt und ebenfalls exakt ausgerichtet werden.
  • Falls die Referenzrahmen stören, ändert man einfach beim Original Füllung und Kontur auf ‘nichts’ und schon sind auch alle Klone temporär verschwunden.
  • Referenzrahmen lassen sich auch auf Unterebenen der gerade bearbeiteten Ebene anlegen. Die 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 aus- und wieder einblenden.

Der Hauptvorteil zeigt sich aber bei der Erstellung von Präsentationen mit animierten Elementen:

  • Diese Elemente werden auf eigenen Ebenen angeordnet.
  • Zusätzlich werden auf den gleichen Ebenen (bzw. auf Unterebenen dieser Ebenen) weitere Klone des o.a. Rechtecks mit der Kennung ›Blick_01M‹, ›Blick_02M‹ 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 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.

Hier ein etwas komplexeres Beispiel . (Wenn Sie den Link in einem neuen Tab oder Fenster öffnen, kommen Sie leichter an diese Stelle zurück.)

Es zeigt neun animierte Objekte. Klicken Sie mit der Maus, nutzen Sie die Pfeiltasten, ...

Bei komplexeren Animationen besteht die Gefahr, dass man die Übersicht über die Referenzrahmen verliert.

Abhilfe schaffen hier eine ausführliche Choreografie und die Verlagerung der Referenzrahmen auf passende Unterebenen.

Schwierig wird es, wenn man in einen Bereich reinzoomen will, in dem Ebenen bereits gegeneinander verschoben wurden.

Wenn man dazu einen einzelnen Referenzrahmen benutzt, verschieben sich leider die Ebenen gegeneinander und laufen nicht mehr synchron.

Es hilft, wenn man zum Reinzoomen für jede Ebene einen eigenen Referenzrahmen nimmt, wobei die ›Zoomrahmen‹ dabei natürlich die richtige Größe haben müssen, sonst passt die Größe nicht mehr zueinander.

Also: einfach einen Referenzrahmen für den gesamten Frame zuweisen und wie gewünscht ranzoomen. Dann von dem benutzten Referenzrahmen eine Kopie ziehen (Strg-D) und diese Kopie als neuen Referenzrahmen der Ebene zuweisen, die beim Ranzoomen aus der Flucht gelaufen ist und nachjustieren - fertig!

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

Referenzrahmen können nicht ausgeblendet werden, dann funktionieren sie nicht mehr.