Manual

Finde hier Antworten auf deine Fragen.
Nutze die Suchen-Funktion deines Browsers (z.B. cmd+F) zum Finden von Schlagworten.

Was ist neu in TigerCreate 2.0?

Allgemeines

TigerCreate 2.0 bringt eine große Zahl an Neuerungen mit sich; dazu viele, viele kleine Verbesserungen im Detail, deren Auflistung hier den Rahmen sprengen würde. Daher haben wir in der Folge neben den neuen Instrumenten und Möglichkeiten nur die wichtigsten Veränderungen zur früheren Version erwähnt.

Back To Top

Interface

  • Zahlreiche Verbesserungen und Erweiterungen der Benutzeroberfläche, unter anderem gibt es nun Object Inspector, Animations Inspector und Scene Inspector, um gezielt Eigenschaften für Objekte, einzelne Animationen oder die ganze Szene zu editieren.
  • Hilfetexte innerhalb der Benutzeroberfläche verbessern die Orientierung insbesondere für Neueinsteiger.
  • Individuell anpassbare Steuerelemente (Weiter- und Zurück-Buttons, Text Blade, …) per Skinning.

 

Back To Top

Auflösung

  • Die Bühnengröße beträgt nunmehr grundsätzlich 2048 x 1536 Pixel (Hochformat entsprechend umgekehrt).

Back To Top

Interaktivität

  • Assets können nun beliebig tief verschachtelt werden
  • Ein neuer Objekt-Typ Node ersetzt die bisherigen Buttons sowie eventuelle Hilfs-Assets
  • Einfacher Austausch von Assets in einer Szene bei Übernahme aller Animationen mithilfe der Base Image-Eigenschaft
  • Übertragung kompletter Animationsabläufe auf andere Assets mittels Copy & Paste-Buttons
  • Erweiterte Bézierkurven-Funktionen
  • Free Drag erlaubt ein freies Verschieben und Skalieren von Objekten innerhalb definierbarer Grenzen
  • Erstellung von Mini Games (Quiz etc.), die gezielt mittels Touch Events aufgerufen werden können, ohne die aktuelle Szene zu verlassen
  • Die Erstellung des Puzzle-Spiels wurde stark vereinfacht

Back To Top

Animationen

Zahlreiche Verbesserungen in der Erstellung und Verwaltung von Animationen:

  • Ein Objekt kann nun mehrere Animationen mit je eigener Zeitleiste haben.
  • Objekte können in verschiedenen Animationstypen (Start-Animation/Button-Animation) verwendet werden.
  • Verbesserte Steuerungsmöglichkeiten: Verzögern beim Abspielen einer Animation (Delay), Beschleunigen und Abbremsen von Bewegungen (Easing).
  • TouchEvents erlauben unterschiedliche Aktionen für Animationen (Start, Stop, Toggle Start/Stop, Pause, Weiter nach Pause, … )
  • Verbesserte Sprite Sheet Animations; diese werden nun innerhalb der Timeline angelegt.
  • Keine festgelegte (Gesamt)Geschwindigkeit mehr, jede Animation hat ihre eigene Geschwindigkeit.
  • Zusammenfassen von Animationen zu Gruppen mittels Pinning.
  • 3D-Unterstützung erlaubt räumliche Tiefe in Szenen
  • Augmented Reality (AR)-Unterstützung erweckt die Umgebung zum Leben.

Back To Top

Sounds

  • Sounds können innerhalb von TigerCreate getrimmt und gesteuert werden.

Back To Top

Text

  • WYSIWYG-Editor (WYSIWYG = „What You See Is What You Get“)
  • Umfangreiche Textoptionen. Alle Fonts können verwendet werden, dazu verschiedene Schnitte, Einrückungen etc.
  • Verbesserte Word Highlighting-Bearbeitung
  • Word Highlighting klappt nun auch mit mehreren Textboxen mit je eigenem Sprechersound.
  • Textboxen können nun auch animiert oder als Buttons verwendet werden.

Back To Top

Testoptionen

  • Effekte wie ‚Scratchable’ können nun auch im Preview Modus getestet werden.
  • TigerCreate hat einen zusätzlichen Simulator (Quick Test), der ein noch schnelleres Testen einzelner Szenen erlaubt.

Back To Top

Einführung - Übersicht - Erste Schritte

Einführung

Was ist TigerCreate?

TigerCreate ermöglicht das Erstellen interaktiver Geschichten und Projekte, die als E-Books oder eigenständige Apps über alle wichtigen Plattformen vertrieben werden können. So werden zum Beispiel aus illustrierten Stories, Sales- oder Imagefoldern oder Annual Reports digitale Titel zum interaktiven Erleben.

TigerCreate eröffnet vielfältige Gestaltungsmöglichkeiten: Ob Animationen, Sounds oder Hintergrundinformationen – zahlreiche interaktive Elemente sowie zusätzliche Lernspiele oder Augmented Reality lassen sich einfach in die Produkte integrieren. Selbst mehrsprachige E-Books sind mit TigerCreate ohne großen Aufwand möglich. TigerCreate unterstützt Sie bei allen Schritten.

Mit einer Lizenz von TigerCreate haben Sie die volle Flexibilität, um Titel nach Ihren eigenen Wünschen und Bedürfnissen zu gestalten. Sie bestimmen, auf welchen Plattformen Sie mit Ihren E-Books präsent sein möchten.

TigerCreate ist ein Produkt der Tiger Media International GmbH, deren Entwickler über jahrelange Expertise im Bereich digitaler Medien verfügen.
TigerCreate wird in enger Zusammenarbeit mit den wichtigsten Plattformen weiterentwickelt. Dabei sind alle Nutzungsvarianten vor allem auf die Bedürfnisse der Kinder- und Jugendbuchbranche ausgerichtet.

Systemvoraussetzungen

TigerCreate 2.0 läuft nur auf Apple Computern und setzt mindestens System macOS 10.12.x Sierra voraus. Ihr Rechner benötigt 8 GB Arbeitsspeicher und ca. 900 MB Platz auf der Festplatte.

Exportformate

Mithilfe von TigerCreate können Inhalte ohne großen Aufwand für unterschiedliche Plattformen bereitgestellt werden. Derzeit exportierbare Formate sind:

  • TigerBooks 2.0 (für die TigerBooks-Plattform)
  • Apple iBooks Store-Format
  • Apple App Store Application (für iOS-Geräte)
  • Google Play Store Application (für Android-Geräte)
  • Amazon Appstore Application
  • Amazon Kindle KF8
  • Webbrowser

In Planung sind weitere Formate, die andere Plattformen bedienen.

Die Größe Ihrer E-Books hängt im Wesentlichen von der Anzahl und Größe verwendeter Grafiken und Sounds ab sowie von der Szenenanzahl. Größen zwischen ca. 20 und 70 MB für ein E-Book im ePub-Format sind üblich.

 

Back To Top

Überblick

Von außen nach innen: E-Book – Szenen – Animationen – Assets

Mit TigerCreate erstellen Sie interaktive E-Books in speziellen Formaten, zum Beispiel im TigerFormat, als iBook oder als eigenständige App für unterschiedliche Plattformen. Ein E-Book besteht aus einzelnen Szenen, das sind interaktive Seiten; jede Szene entspricht während der Produktion einer TigerCreate-Datei. In den einzelnen Szenen tauchen in der Regel Texte, Töne (Sounds) und Bilder auf, die zum Teil bewegt (animiert) werden oder sogar auf Berührung reagieren (interaktiv sind).

Animationen  erstellen Sie aus Bildern, die Sie möglicherweise mit Sounds kombinieren (ein bewegtes Auto und ein Fahrgeräusch…). Bilder und Sounds, sogenannte Assets, liegen als externe Dateien in Ihrem Projektordner. Jedes E-Book, das Sie neu erstellen, erhält einen eigenen Projektordner mit diversen Unterordnern. Bilder und Sounds, die Sie in einer Szene verwenden wollen, werden in die Szene importiert und mit dieser verknüpft – bearbeiten Sie nachträglich ein Bild, verändert sich dieses auch innerhalb anderer Szenen, in denen es verwendet wird.

Um Assets zu erstellen und zu bearbeiten, benötigen Sie ein Bildbearbeitungsprogramm, das die Formate PNG und JPG erzeugen kann, sowie ein Programm zur Bearbeitung von Sounds und den Export von MP3-Dateien.

Darüber hinaus benötigen Sie folgende Software:

  • Xcode* (für Apple iOS-Einzel-App-Export)
  • Android SDK (für Android-Einzel-App-Export)
  • iBooks (für iBook Previews auf dem Mac, ist Bestandteil von macOS)

*Die Entwicklungsumgebung Xcode, die im Apple App Store kostenlos zur Verfügung steht, benötigen Sie für den Export der E-Books.

Im Gegensatz zu Bildern und Sounds werden Texte direkt in den einzelnen Szenen erstellt und verwaltet. Dort erzeugen Sie eine sogenannte Textbox und schreiben oder kopieren Text hinein.

Back To Top

Erste Schritte

Um die Arbeit mit TigerCreate kennenzulernen, erstellen wir in der Folge gemeinsam ein erstes kleines Projekt mit nur einer Szene. Dabei lernen Sie die Arbeitsumgebung von TigerCreate kennen und erstellen erste Animationen.

 

  •  Assets vorbereiten

 Ehe Sie ein neues E-Book anlegen, bereiten Sie die Assets vor. Alle Bilder, die Sie verwenden wollen, kommen später in den Images-Ordner und alle Sounds entsprechend in den Sounds-Ordner (s.u.).

 

  • Bilder

Bilder werden unterschieden nach Hintergrundbildern und animierten Grafiken, die den Vordergrund bilden. Alle Hintergrundbilder legen Sie bitte im JPG- oder PNG-Format ohne Transparenzen an, maximal in der Größe der Bühne (2048 x 1536 Pixel bei Querformat bzw. 1536 x 2048 Pixel bei Hochformat).

Alle Bilder, die Sie über dem Hintergrund, sprich im Vordergrund einer Szene platzieren wollen, egal ob animiert oder nicht, werden ebenfalls als PNG-Grafik angelegt, ggf. mit transparentem Hintergrund. Insgesamt sollte niemals ein Bild mit Maßen größer als 2048 x 1940 Pixel bei querformatigen Projekten (bzw. 1940 x 2048 bei hochformatigen Projekten) verwendet werden, da diese sonst nicht von iBooks interpretiert werden können.

Sinnvoll und empfehlenswert ist es aus (speicher-)technischen Gründen, Bilder so anzulegen, dass sowohl ihre Breite als auch ihre Höhe durch 4 teilbar ist. Ein ‚gutes‘ Format wäre also 48 x 32 Pixel, ein ‚schlechtes‘ 47 x 30 Pixel. Dies gilt insbesondere für Bilder, die in TigerCreate – z.B. während einer Animation – stark vergrößert werden, da hier sonst ungewollte Fragmente oder Verschiebungen entstehen können. TigerCreate unterstützt Sie im Scene Navigator und während des Exportvorgangs mit Warnhinweisen bei ‚schlechten‘ Größen.

 

 

Es empfiehlt sich, Bilddaten möglichst klein zu rechnen, um die Ladezeiten für Szenen gering zu halten. Beschneiden Sie Grafiken so, dass um das eigentliche Bild kein überflüssiger Leerraum entsteht. Mit Tools wie z.B. pnggauntlet.com oder tinypng.com können insbesondere PNG-Grafiken stark verkleinert werden, ohne dass sie deutlich an Qualität verlieren. Aufgrund der Größe der Hintergrundbilder ist dies unbedingt empfehlenswert.
Bei Bildern, die wenige Details enthalten, können Sie den verwendeten Grafikspeicher außerdem gering halten, indem sie das Bild z. B. nur in der Hälfte seiner benötigten Größe anlegen und dann in TigerCreate auf 200% großskalieren. Das funktioniert auch bei Hintergrundbildern (TigerCreate skaliert diese automatisch). Darüber hinaus haben Sie vor dem Veröffentlichen im Export-Dialog die Möglichkeit, für jede Szene die Option „Compress Images“ (Bildkomprimierung) zu aktivieren (siehe dazu auch Testen und Veröffentlichen).

 

  • Sounds

Sounds lassen sich unterscheiden nach atmosphärischen Hintergrundgeräuschen (Meeresrauschen, Straßenverkehr, …), Event-Sounds (ein Gegenstand fällt herab, eine Katze miaut bei Berührung, …) sowie Sprechersounds, wenn der Text vorgelesen wird. Sounds werden im MP3-Format angelegt, egal ob es sich um Musik, Geräusche oder Sprecheraufnahmen handelt.

_____

Achtung: Achten Sie bitte darauf nur Sounds mit konstanter Bitrate zu verwenden, sogenannte CBR(Constant-Bit-Rate)-Sounds. Andere mit variabler Bitrate (VBR) sind nicht erlaubt.

_____

Bitte beachten Sie folgende Konventionen für Dateinamen:

Vermeiden Sie Sonderzeichen und Umlaute.

Erlaubt sind „A“ bis „Z“, „a“ bis „z“, „0“ bis „9“.

Benennen Sie Ihre Assets gleich so, dass man erkennt, in welcher Szene sie verwendet werden.

„Ein Bild mit dem Namen „S03_Junge_ Arm_links.png“ ist eindeutiger identifizierbar als „Arm_1.png“, der Sound „S13_Sprecher.mp3“ lässt sich leichter einer Szene zuordnen als „Gute Nacht mein Kleines.mp3“.“

Weder der Buchtitel  noch der Projektname darf Sonderzeichen beinhalten, auch keine „(“ und „)“.

Für unser Beispielprojekt nehmen wir einen eher simplen Hintergrund und als zu animierendes Objekt einen Ball.

 

Erstellen eines neuen E-Book-Projekts

Nachdem Sie TigerCreate installiert und registriert haben, klicken Sie im Startdialog auf „New TigerCreate 2 Book“. Wählen Sie im darauf erscheinenden Fenster mindestens eine Sprache aus und füllen Sie für jede gewählte Sprache die Felder Book Name und Copyright aus (bei letzterem können Sie auch erst einmal eine beliebige Zeichenfolge eingeben).

 

     

 

Bestätigen Sie mit ENTER und klicken Sie den nun aktiven Button Create. Daraufhin erscheint ein Sichern-Dialog, mit dem Sie den Ort für Ihren neuen Projektordner festlegen.

 

 

Der Name des Projektordners entspricht dem Titel, den Sie im Feld Book Name angegeben haben. Im Projektordner liegen weitere Ordner, die weitestgehend leer sind, und eine Projektdatei. Die beiden zunächst wichtigsten Ordner sind Images und Sounds. Wie oben erwähnt, kommen alle Ihre Bilder (im PNG-Format) in den Images-Ordner, Audiodateien in den Ordner Sounds.

 

Erstellen einer Szene 

Nachdem TigerCreate den Projektordner erzeugt hat, wird automatisch eine erste, noch leere Szene geöffnet.

 

Im oberen Bereich finden Sie unter anderem Einstellungsmöglichkeiten für die Arbeitsumgebung. In der Mitte liegt die eigentliche Arbeitsfläche – ein weißes Rechteck (die Bühne), umgeben von einem grauen Raster. Links finden Sie die Ordnerstruktur, die TigerCreate im Projektordner angelegt hat, im sogenannten Project Navigator, rechts einen noch leeren Bereich, der je nach Auswahl zahlreiche Einstellungen für den Aufbau und Ablauf der Szene ermöglicht.

 

Nach dem Öffnen befindet sich eine Szene automatisch im Edit-Modus, hier kann sie bearbeitet werden. Oberhalb der Arbeitsfläche gibt es links zwei Schaltflächen Edit und Preview, mit denen zwischen beiden Modi gewechselt werden kann. Die meiste Zeit werden Sie im Edit-Modus arbeiten, Preview dient nur zur gelegentlichen Kontrolle, um Animationsabläufe und Interaktionen zu testen.

Suchen Sie den Projektordner im Finder und kopieren Sie die bereits erstellten Bilder und Sounds in die entsprechenden Unterordner Images und Sounds. Nach wenigen Sekunden können Sie die Bilder auch in der Arbeitsumgebung von TigerCreate im Project Navigator wiederfinden und nutzen: Ziehen Sie aus dem Ordner Images eins ihrer Bilder auf die Bühne; es wird von einem Rechteck, einem blauen Kreis und weiteren Linien umgeben, am rechten Rand erscheinen zahlreiche Anzeige- und Einstellungsmöglichkeiten – u.a. die Position auf der Bühne (X- und Y-Position), berechnet von der oberen linken Ecke aus. Verschieben Sie das Bild innerhalb der Bühne, um eine Änderung der Positionswerte zu sehen.

 

     

 

Ziehen Sie weitere Bilder auf die Bühne.

Die Ansicht am rechten Rand heißt Object Inspector – sie zeigt immer dann, wenn ein Objekt auf der Bühne aktiv/markiert ist, dessen Eigenschaften an. Einige dieser Eigenschaften – Position, Größe, Rotation (Angle) etc. – lassen sich sowohl direkt auf der Bühne mithilfe der verschiedenen Anfasser um das Objekt manipulieren wie auch innerhalb der Felder des Object Inspectors zum Beispiel durch Eingabe von Zahlenwerten oder Verschieben von Reglern.

Klicken Sie rechts oben auf das kleine Dokument-Symbol: Diese Ansicht heißt Scene Inspector, weil Sie hier Einstellungen für die gesamte Szene vornehmen können. Wenn Sie bereits ein Hintergrundbild (als PNG, s.o.) vorbereitet haben, klicken Sie mit der rechten Maustaste in das Bildfeld bei Background Image und wählen Sie über den folgenden Dialog ein Hintergrundbild aus. Dieses wird unmittelbar mit der Szene verknüpft und füllt den Bühnenhintergrund. Alternativ können Sie über das Feld Background Color eine durchgehende Farbe für den Hintergrund wählen.

 

          

 

Sichern Sie Ihre Szene über das Menü File / Save… – nennen Sie sie zum Beispiel „Szene01“ – in den Ordner Scenes Ihres Projektordners.

Um Ihre Szene mit einer durchgängigen Geräuschkulisse zu unterlegen, ziehen Sie aus dem Project Navigator – die Ordnerstruktur am linken Rand mit u.a. Images und Sounds – einen Sound in das Feld neben Ambient Sound. Ihr Sound sollte ca. 30 sec lang sein und nicht zu abrupt enden, damit bei (Endlos-)Wiederholung kein Bruch zu hören ist.

 

 

Klicken Sie in der linken Spalte oben auf das Symbol für Scene Navigator, dort finden Sie eine verkleinerte Ansicht der zuvor in die Szene importierten Bilder. Hier im Scene Navigator tauchen fast alle der Assets auf, die in einer Szene Verwendung finden (das Hintergrundbild wird nicht aufgelistet, ebenso werden Sounds nicht angezeigt). Klicken Sie innerhalb des Scene Navigators oben auf das + Symbol und wählen Sie aus dem aufspringenden Menü Text – eine Textbox erscheint auf der Bühne.

 

 

Klicken Sie hinein, verschieben Sie sie und skalieren Sie sie auf eine komfortable Größe. Klicken Sie anschließend oben links über der Textbox in das kleinere Quadrat, das daraufhin einen Stift anzeigt; Sie haben nun den Edit Modus für die Textbox aktiviert und können Text hineinschreiben oder hineinkopieren.

 

 

Um das Aussehen des Textes zu formatieren, klicken Sie in der rechten Leiste oben auf das Objekt-Symbol, um den Object Inspector erneut aufzurufen, und scrollen Sie dort mit der Maus weiter nach unten … bis die Text Properties angezeigt werden. Hier können Sie zahlreiche Einstellungen für den jeweils markierten Textbereich vornehmen: Schriftart, Größe, Ausrichtung, …

 

 

So, nun haben wir eine Szene mit einem Hintergrundbild, Objekten im Vordergrund, einer durchgehenden Geräuschkulisse und einem Text. Was fehlt, um mehr als ein starres Bild zu haben, sind Animationen.

 

Erstellen von Animationen

Wir animieren hier beispielhaft einen Ball und versehen ihn mit zwei unterschiedlichen Animationen: Zu Beginn der Szene soll der Ball in das Bild hineinrollen. Tippt man ihn an, soll er auf der Stelle ein paar Mal hüpfen.

  • Zu Beginn ziehen wir den Ball an den rechten Rand der Bühne, von wo er hineinrollen soll bis etwa in die Mitte des Bildes.

 

 

  • Oben rechts wird über das mittlere Symbol der Animations Inspector aktiviert.

 

 

  • Über das + Symbol erstellen wir eine neue Animation, die automatisch dem auf der Arbeitsfläche markierten Ball zugeordnet wird. Diese Animation bekommt den Namen „Ball-Rolling“.
  • In den Feldern darunter stellen wir bei Number of Frames 60, dazu bei Loop Time 3 ein; weiter unten wird uns als Total Time 3.00 Sekunden angezeigt.

 

 

  • Wir beginnen mit der eigentlichen Animation im Animator, indem am linken Rand des Animators der blaue Punkt geklickt wird. Dieser wandelt sich in einen roten und signalisiert damit den Animationsmodus.

 

 

  • In der Zeile für Position ist der erste Frame der Timeline ausgewählt, markiert durch einen transparenten roten Balken. Ein Klick in die Zeile für Position erzeugt einen Key und macht diesen Frame zu einem Keyframe. Wir scrollen an das Ende der Timeline zu Frame 60 und klicken oben in die Zeitleiste, (wo die Zahl 60 steht) um den transparenten Slider auf diesen Frame zu bewegen (alternativ kann er gezogen werden).

 

 

  • Frame 60 ist markiert, also erzeugen wir auch hier einen Key für Position, denn an dieser Stelle soll die Animation beendet seinund der Ball in der Mitte des Bildes liegen.
  • Ziehen wir nun also den Ball auf Frame 60 an die Stelle auf der Bühne, die er am Ende einnehmen soll.

 

 

  • Beachten Sie, dass im unteren Teil der Zeile Position eine Linie die beiden Keyframes auf Bild 1 und 60 verbindet. Mit einem Klick auf diesen Bereich erscheint ein PopUp-Menü, aus dem wir statt ‚ Linear‘ ‚EaseOut‘ wählen. Dadurch wird der Ball gegen Ende der Bewegung langsamer, er rollt sozusagen aus.

 

 

  • Damit wir diese Bewegung testen können, ist noch eine Kleinigkeit nötig: Im Animations Inspector (rechts) aktivieren wir oben links neben dem Symbol für die Ball-Animation die Checkbox unter ‚Start‘. Der Haken signalisiert, dass diese Animation nun eine Startanimation ist, die also beim Öffnen der Szene selbstständig startet.

 

 

  • Schauen wir die Szene probehalber über die Preview-Funktion an (die Schaltfläche links oberhalb der Timeline), so wird gleich ein Manko deutlich – der Ball bewegt sich, aber er rollt nicht, sondern gleitet. Daher führen wir zusätzlich ein paar Rotationen durch.
  • Der Ball soll von rechts nach links ins Bild rollen, muss sich dabei also permanent (weiter)drehen. Auf Frame 1 der Animation erzeugen wir in der Zeile Rotation einen Key, außerdem auf den Frames 10, 20, usw. bis 60.
  • Wir verschieben den Slider von Keyframe zu Keyframe, also von 1 nach 10, nach 20 usw., und rotieren den Ball jeweils um ca. eine halbe Umdrehung weiter. Auf den letzten beiden Keyframes 50 und 60, wo die Bewegung deutlich langsamer wird, soll auch die Rotation geringer ausfallen.

 

 

  • Ein Test mittels Preview-Funktion zeigt, dass die erste Animation fertig ist. In diesem Vorschau-Modus können Sie Animationen und Interaktionen testen. Er ersetzt aber nicht das gezielte Testen eines E-Books auf unterschiedlichen Endgeräten.
  • Die zweite Animation – das Hochspringen des Balls – soll per Klick ausgelöst werden, nachdem der Ball zur Ruhe gekommen ist. Dazu kopieren wir mit der rechten Maustaste auf Frame 60 den Key für Position. Diese Position soll Ausgangspunkt für die zweite Animation werden.

 

 

  • Im Animations Inspector erzeugt ein erneuter Klick auf das + Symbol eine weitere Animation für den Ball. Diese bekommt den Namen „Ball-Jump“, eine Länge von 70 Frames (Number Of Frames) bei ebenfalls 3 Sekunden (Loop Time). Da dies keine Startanimation sein soll, sparen wir uns den Haken bei der ‚Start’-Checkbox.
  • Mit ausgewählter ‚Jump‘-Animation fügen wir in Frame 1 der Timeline per Rechtsklick die zuvor kopierte Endposition der ‚Rolling‘-Animation ein. Das gewährleistet, dass die Animation dort startet, wo der Ball nach dem Rollen zum Liegen kam.

 

     

 

  • In der Zeile Position erzeugen wir weitere Keys auf den Frames 15, 25, 35, 42, 49, 56, 60, 63, 65, 67, 68 und 69. Auf all diesen Frames hat der Ball nun zunächst dieselbe Position unten am Boden.
  • Der Ball soll auf Antippen hochspringen, unten landen, wieder hochspringen, runterfallen usw., dabei aber jedes Mal einen kleineren Hüpfer machen bis er auf Frame 69 zum Stillstand kommt. Deshalb verschieben wir den Ball auf jedem zweiten Keyframe (also auf 15, 35, 49, 60, 65, 68) senkrecht nach oben, anfangs mit einem großen Wert, der von Keyframe zu Keyframe kleiner wird.

Zum Verschieben gibt es zwei Möglichkeiten:

  1. a) von Hand; dies ist aber ungenau. Sie könnten ungewollt seitlich abweichen und müssen jedes Mal vergleichen, wie hoch der Ball beim letzten Keyframe war.
  2. b) per Zahleneingabe. Dazu wechseln wir rechts bei den Inspektoren die Ansicht von Animations Inspector (mittleres Symbol) auf Object Inspector (linkes Symbol). Im Feld für Position Y ist der aktuelle Wert für die Höhe des Balls angegeben. Da der Wert von der oberen linken Ecke der Bühne aus berechnet wird, ist er vermutlich relativ hoch. Um den Ball höher zu schieben, muss der Wert verringert werden. In unserem Beispiel verringern wir den Position Y-Wert beim ersten Hochspringen (also auf Frame 15) um ca. 650 Pixel, dann sukzessive um einen geringeren Wert; bei Frame 68 nur noch um maximal 50 Pixel.

 

 

  • Um diese Animation auszulösen, muss ein auslösendes Objekt definiert werden. Das kann der Ball selbst sein, es könnte aber auch ein anderes Objekt sein. Hier im Beispiel wollen wir der Einfachheit halber, dass der Ball selbst angetippt wird*: Innerhalb des Object Inspector finden Sie weiter unten die Kategorie Touch Properties mit der einzigen Option Has Touch Event.

– – – –

* Es hat sich als gute Praxis erwiesen, alle Touch Events, also Klicks zum Starten einer Animation, auf sogenannte Nodes – unsichtbare skalierbare Objekte – zu legen, die über das Objekt selbst platziert werden. Insbesondere bei komplexen Szenen mit vielen Objekten und Animationen behalten Sie so den Überblick. Hier im Beispiel wurde absichtlich vereinfacht.

– – – –

  • Nach dem Setzen des Hakens wählen wir über das + Symbol aus der aufpoppenden Liste unseren Ball und aus dessen Untermenü die gewünschte Animation: ‚Ball-Jump’. Damit ist das Objekt ‚Ball‘ per Klick mit der Animation ‚Ball-Jump‘ verknüpft.

 

 

  • Ein Blick auf die bisherige Animation im Preview-Modus zeigt, dass das Ergebnis noch ein wenig zu wünschen übrig lässt – der Ball hüpft recht mechanisch auf und ab, was daran liegt, dass alle Bewegungen gleichmäßig schnell ablaufen.

Um dies ein wenig dynamischer und damit realistischer zu machen, schalten wir zurück in den Edit-Modus und schauen erneut in die Timeline für die Animation ‚Ball-Jump‘.

  • Im unteren Teil der Zeile für Position wird wieder die Bewegung zwischen je zwei Keyframes durch eine Linie dargestellt. Erinnern Sie sich an unsere erste Animation: Bewegungen lassen sich beschleunigen und abbremsen. Jedes Mal wenn der Ball hochspringt, wählen wir als Bewegungsform zwischen den Keyframes ‚Ease Out‘, jedes Mal wenn er herabfällt ‚Ease In‘.

Im Preview-Modus läuft die Animation nun deutlich dynamischer ab, das Ergebnis kann sich schon sehen lassen, auch wenn man zum Beispiel über Stauchen und Dehnen (Zeile Scale) beim Aufprall das Ganze noch verfeinern könnte.

Aber einen kleinen Schönheitsfehler sollten wir noch ausbügeln: Momentan wird die Animation immer dann gestartet, wenn der Ball angetippt wird, also auch wenn er gerade in Bewegung ist … das kann zu unschönen Sprüngen im Ablauf führen. Schlimmstenfalls tippt ein User bereits auf den Ball, während er gerade hereinrollt, dann würde der Ball sofort mit der Animation ‚Ball-Jump‘ starten. Um dies zu vermeiden nehmen wir eine letzte kleine, aber effektive Korrektur vor.

  • Im Object Inspector, wo wir u.a. die Verknüpfung mit der Animation vorgenommen haben, ändern wir bei den Touch Properties unter Animations den Modus (Mode) – wir schalten über das PopUp-Menü von ‚Start’ auf die unterste Option um, ‚Start If No Active Animations‘. Dies stellt sicher, dass alle verknüpften Animationen (hier ist das nur ‚Ball-Jump‘) nur ausgelöst werden können, wenn die beteiligten Objekte (hier der Ball) gerade keine Animation ausführen!

 

 

  • Wird nun die Szene im Preview-Modus gestartet, kann die Animation erst ausgelöst werden, wenn der Ball tatsächlich ruht.

Um einen etwas weitergehenden Test unserer Szene vorzunehmen, werden wir die neue Funktion Quick Test nutzen, die Sie ganz oben links finden. Sie startet einen eigenen Player und zeigt die Szene so, wie sie später auch im E-Book aussehen würde. Ehe wir das nutzen können, müssen wir unsere Szene vervollständigen.

 

 

  • Öffnen Sie den Scene Inspector über das Dokument-Symbol oben rechts bei den Inspektoren. Dort hatten wir bereits den Hintergrund der Szene verändert. Weiter unten in dieser Leiste finden Sie Scene Screenshot Properties und darin den Hinweis, dass noch kein Screenshot für diese Szene (und die eingestellte Sprache) existiert. Über die Schaltfläche Create From View erzeugen Sie einen Screenshot von der aktuellen Ansicht der Szene (sollten Sie mehr als eine Sprache nutzen, muss dies für jede Sprache separat geschehen).

 

     

 

  • Sichern Sie Ihre Szene und starten Sie Quick Test. (Eventuell muss die Anwendung erst noch heruntergeladen werden, was auf Klick aber automatisch und zügig geschieht.) Gestartet wird die App TigerSimulator und darin die aktuelle Szene. Über die Menüs am oberen Bildschirmrand können Sie unter anderem die Ansicht auf verschiedenen Endgeräten testen.

 

 

  • Gleichzeitig öffnet sich ein weiteres Fenster ‚Publish Info‘, das Ihnen einen Überblick  gibt über die exportierten Szenen und den Speicherbedarf der darin enthaltenen Grafiken.

     

 

Back To Top

Interface

Allgemeines

Die Programmoberfläche von TigerCreate lässt sich im Wesentlichen in die folgenden Bereiche unterteilen:

  • Oben in der Toolbar nehmen sie projekt- und szenenbezogene Einstellungen vor
  • Im linken Bereich verwalten Sie alle Assets, die zu Ihrem Projekt gehören
  • Am rechten Rand finden Sie Szenen- und Assetinspektoren für zahlreiche Einstellungen
  • In der Mitte liegt die eigentliche Arbeitsfläche mit der Bühne

 

Back To Top

Toolbar

Oben links finden Sie drei Schaltflächen zum Testen und Veröffentlichen Ihres E-Books – Quick Test, Test Build, Publish – ganz rechts die generellen Project Settings, darunter eine Leiste mit Schaltflächen, die die Ansicht der aktuellen Szene betreffen.

 

 

Die Funktionen zum Testen und Veröffentlichen werden an anderer Stelle ausführlich besprochen, daher hier nur kurz:

  • Quick Test exportiert nur die aktuelle Szene und öffnet sie im TigerSimulator.
  • Test Build exportiert das komplette Projekt oder Teile daraus in einem der unterstützten Formate und startet ggf. den TigerSimulator.
  • Publish dient zum Veröffentlichen Ihres Projekts in einem der unterstützen Formate, nachdem Sie ausgiebig in verschiedenen Umgebungen getestet haben.

Back To Top

Projektbezogene Einstellungen

Die projektbezogenen Einstellungen werden Ihnen bekannt vorkommen – zumindest der erste Bereich Options ist Ihnen bereits beim Erstellen eines neuen Projektes angezeigt worden:

  • Options lässt Sie Namen, Format und unterstützte Sprachen auswählen
    • Orientation: Wählen Sie zwischen Landscape (Querformat) und Portrait (Hochformat).
    • Author: Geben Sie Ihren Namen oder den des/der Autoren ein.
    • Supported Languages: Wählen Sie mindestens eine Sprache (zurzeit unterstützt TigerCreate 20 Sprachen, darunter auch asiatische).
    • Book Name: Vergeben Sie für jede zuvor ausgewählte Sprache einen Buchtitel. Der Titel der zuerst gewählten Sprache ist zugleich Name des angelegten Projektordners.
    • Copyright: Tragen Sie auch hier für jede unterstützte Sprache den jeweiligen Rechteinhaber ein.

 

 

  • Skinning & Navigation bietet Möglichkeiten das Aussehen von Navigationselementen projektweit zu beeinflussen. Achtung: Sie können darüberhinaus in jeder Szene einzelne Elemente beeinflussen (siehe dazu Scene Inspector)
    • Show Previous Scene Navigation Button: Mit dieser und der darunterliegenden Checkbox können Sie bestimmen, ob standardmäßig Möglichkeiten zum Vor- und Rückblättern als feste Elemente angezeigt werden sollen. Hinweis: Sie können das Blättern/Springen zu einer anderen Szene auch über andere Buttons innerhalb einer Szene steuern (siehe Object Inspector/Touch Event).
    • Transition: Diese Option wird nur angezeigt, wenn die oben beschriebene Checkbox markiert ist. In diesem Fall können Sie über ein PopUp-Menü bestimmen, wie der Übergang zwischen zwei Szenen abläuft. Move schiebt die eine Szene hinaus, die andere hinein. Fade sorgt für ein Aus- und Einblenden. Page Curl simuliert das Umblättern von einer Seite zur nächsten.
    • Show Next Scene Navigation Button: siehe oben
    • Navigation und Text Blade: Angezeigt werden die Standardelemente zur Navigation – Zurück-Button, Vorwärts-Button, Menü-Button. Diese können Sie einzeln ersetzen – entweder per Drag & Drop oder indem Sie mit der rechten Maustaste auf ein Element klicken und per „Select File…“-Kommando ein neues Bild aus dem Projektordner UIAssets laden. Wie der darunter stehende Text erklärt, wird jeweils ein Bild (PNG mit Transparenz) in einer Größe von 160 x 160 bis 256 x 256 Pixel benötigt.

 

 

  • Default Text Options erlauben übergreifende Einstellungen für die Standard-Darstellung von Text.
    • Use Automatic Font Scaling for Text Objects/ for Text Blade: Mit diesen Checkboxen sorgen Sie dafür, dass Text in Textboxen automatisch skaliert wird, wenn das E-Book auf einem Gerät mit kleinem Display angeschaut wird. Je nach Bildschirmgröße wird der Text um den Faktor 1,5 oder 2 hochskaliert und bleibt dadurch lesbar. Dies beeinflusst den Zeilenumbruch; Texte, die dadurch nicht mehr in die vorhandene Textbox passen, werden zu Scrolltexten.
    • Use Text Options per Language: Bei Aktivierung dieser Checkbox gelten die nachfolgenden Texteinstellungen immer nur für die jeweilige Sprache. Sie können also für unterschiedliche Sprachen ein unterschiedliches Schriftbild festlegen.
    • Default Text Options: Hier legen Sie u.a. die Standardschriftart, -schriftgröße und -farbe, den Zeilenabstand und die Textausrichtung fest.
    • Scrollbar Color, Opacity & Size: Stellen Sie das Aussehen für einen senkrechten Textschiebebalken ein. (Dieser erscheint automatisch, wenn mehr Text in einer Textbox ist als angezeigt werden kann.)

 

 

  • Hints sind blinkende Hinweis-Symbole, die standardmäßig alle paar Sekunden eingeblendet werden und signalisieren, wo es etwas anzutippen gibt. Berücksichtigen Sie dabei, dass alle interaktiven Elemente mit Hints in einem Zyklus durchlaufen werden, auch solche, die vielleicht zu Beginn noch außerhalb des sichtbaren Bühnenbereichs liegen. Bei einer großen Anzahl interaktiver Elemente kann es also einige Sekunden dauern, ehe das Hint-Icon an einer bestimmten Stelle blinkt.
    • Über die Checkbox Active, die standardmäßig aktiviert ist, können Sie die Hint-Funktion gegebenenfalls für das gesamte Projekt abschalten. Es blinken dann überhaupt keine Hint-Symbole.*
    • Hint Icon: Das Standard-Symbol ist ein halbtransparenter, weißer Kreis. Diesen können Sie austauschen – entweder per Drag & Drop oder indem Sie mit der rechten Maustaste auf das Icon klicken und per „Select File…“-Befehl eine andere Grafik (z.B. 138 x 138 Pixel im PNG-Format mit Transparenz) aus Ihrem Projektordner wählen.
    • In den darunter angeordneten Feldern (Initial Wait, Duration, Delay…) können Sie das Verhalten des Hint-Icons beeinflussen – ob es zu Beginn mit einer Verzögerung auftaucht, wie lange und wie oft es über einem Button blinkt, wie lang die Pause sein soll, ehe ein neuer Zyklus mit Blinken beginnt.
    • Mithilfe zweier weiterer Checkboxen können Sie bestimmen, wie das Hint-Icon sich während des Blinkens verhält (Ein-Ausblenden, Skalierung).

 

 

*Wollen Sie hingegen nur für einzelne Objekte die Hint-Funktionalität abschalten, können Sie dies über die Checkbox ‚Show Hint‘ tun, die Sie bei den Touch Properties im Object Inspector finden.

Back To Top

Szenenbezogene Einstellungen

Oberhalb der Arbeitsfläche gibt es verschiedene Schaltflächen, die die Ansicht der jeweiligen Szene beeinflussen.

 

 

Von links nach rechts sind dies

  • Edit: Diesen Editor- oder Bearbeitungszustand sehen Sie standardmäßig nach dem Öffnen einer Szene. In dieser Ansicht erstellen Sie Ihre Szene, importieren oder erstellen Assets, erstellen Animationen, verknüpfen sie mit Sound etc.
  • Preview: In dieser Ansicht können Sie nichts an der Szene verändern, aber Sie können den gesamten Ablauf der Szene testen, Tempo von Animationen und insbesondere Interaktionen überprüfen. Der Preview-Modus ersetzt nicht das umfangreiche Testen auf verschiedenen Endgeräten und Plattformen, vermittelt aber einen ersten Eindruck.
  • Language: Hier ist bereits eine Sprache ausgewählt, in der die Szene aktuell abläuft. Da mehrsprachige Projekte unterschiedliche Texte, Sounds und sogar Bilder und Animationen ermöglichen, können Sie über die Language Choice zu jedem Zeitpunkt die Szene in verschiedenen Sprachen ausprobieren. (Hinweis: Ob ein Projekt mehrere Sprachen unterstützt und welche dies sind, stellen Sie bereits bei der Anlage eines neuen Projekts ein. Sie können aber über die Project Settings auch nachträglich Änderungen daran vornehmen.)
  • 2D/3D: Mit diesen beiden Schaltflächen wechseln Sie zwischen 2D und 3D-Modus, vorausgesetzt Sie haben im Scene Inspector 3D angehakt. Zunächst einmal ändert sich durch Umschalten in 3D nichts. Das Entscheidende steht klein am unteren Rand der Arbeitsfläche: Durch die Kombination ALT/Option-Taste + linke Maustaste können Sie die Kameraperspektive ändern! (Mehr zu 3D erfahren Sie hier)
  • Local/Global: Dies bezieht sich auf die Koordinaten der verwendeten Objekte einer Szene. Im Wesentlichen geht es dabei um die unterschiedlichen Koordinaten-Bezugspunkte bei verschachtelten (Parent-Child-)Objekten. Näheres dazu finden Sie dort sowie bei der Beschreibung des Object Inspector.
  • Animator: Öffnet das Animationstool mit der sogenannten Timeline – einer Zeitleiste zur Bearbeitung von Animationen. Ist gerade kein Objekt bzw. keine Animation ausgewählt, ist die Timeline leer bis auf einen Hinweistext.

 

 

Ist aber eine Animation ausgewählt, wird sie mit ihren Keyframes (Schlüsselbildern) dargestellt. Um eine Animation zu bearbeiten – Setzen neuer Keys oder Änderung von Werten (Position, Rotation, …) auf Keyframes –, klicken Sie auf die kleine, blaue Schaltfläche ganz links in der Timeline (Toggle Animation Recording Button), damit starten Sie den Record Mode. Solange der Button blau angezeigt wird, werden Änderungen an einzelnen Keyframes einer Animation nicht übernommen. Erst im Record Mode – erkennbar dadurch, dass der Button und der senkrechte transparente Balken (Slider) in der Timeline rot eingefärbt sind – kann eine Animation bearbeitet werden.

 

 

Welche Eigenschaften eines Objekts über die Timeline verändert/animiert werden können, hängt von der Art des Objekts ab. In der Regel lassen sich Position, Rotation, Skalierung und Deckkraft (Opacity) einstellen, bei Bildern gibt es zusätzlich die Zeile Image zum Austauschen des angezeigten Bildes innerhalb einer Animation (siehe Sprite Sheet Animation). Ist ein Sound mit einer Animation verknüpft, wird zusätzlich die Zeile Audio eingeblendet und der Sound als Hüllkurve dargestellt.

Rechts neben diesen Eigenschaften ist ein kleines Schloss-Symbol; durch Klicken auf das Symbol, schließt sich das Schloss – dadurch schützen Sie einzelne Eigenschaften vor einer versehentlichen Änderung.

Jede Eigenschaft, die in der Timeline editiert werden kann, wird durch eine unterteilte Zeile dargestellt: In der oberen Hälfte werden die Keys gesetzt, darunter wird die Verbindung zwischen den Keys durch eine Verbindungslinie dargestellt – das sogenannte Easing. Dies zeigt den Verlauf der interpolierten Wertänderung zwischen Keyframe A und Keyframe B an. Bei Klick erscheint ein PopUp-Menü zur Auswahl anderer Verlaufsformen, so können Sie einen Animationsvorgang (Bewegung, Rotation, …) zum Beispiel beschleunigen oder abbremsen. Dies ermöglicht Ihnen Bewegungsabläufe realistischer erscheinen zu lassen.

 

 

An Form und Farbe der Linien zwischen Keyframes lassen sich die eingestellten Veränderungen leicht erkennen. Standardmäßig verläuft eine Veränderung linear; wird nichts anderes ausgewählt, ist ‚linear‘ der Default-Zustand. Die folgende Abbildung zeigt verschiedene Möglichkeiten (von links nach rechts): Linear, Ease In, Ease Out, Ease In Ease Out, Ease In (ohne tatsächliche Veränderung), None. Beachtenswert sind vor allem die letzen beiden. Beim vorletzten Abschnitt ist Ease In eingestellt, wie die Kurve zeigt; da aber zwischen den beiden Keyframes tatsächlich keine Werteänderung stattfindet, kann auch keine Beschleunigung des Ablaufs stattfinden – daher ist die Kurve grau unterlegt.

Der letzte Abschnitt hingegen wird rot angezeigt, weil keine Interpolation stattfinden soll – None. Das bedeutet, dass zwischen dem vorletzten und dem letzten Keyframe zunächst keine Veränderung stattfindet; erst beim letzten Keyframe wird die dort eingestellte Wertänderung ‚ruckartig‘, also ohne Übergang, umgesetzt.

 

 

Oberhalb der Timeline liegt links eine Leiste mit Buttons zur Steuerung der Animation(en); von links nach rechts sind dies Zurück zum Anfang, Zurück zum vorherigen Keyframe, Play/Pause, Vor zum nächsten Keyframe. Beachten Sie, dass sich die Steuerelemente immer nur auf die aktuelle Timeline beziehen. Drücken Sie auf Play, wird nur die Animation dieser Timeline gestartet, nicht die ganze Szene mit weiteren Animationen.

In der Zeile darunter werden Informationen zur Animation angezeigt: Ein Symbol des animierten Objekts, der Name des Objekts, darüber der Name der Animation und eine eventuelle Zugehörigkeit zu einer Gruppe. Links vom Objekt-Icon ermöglicht ein Dreieck-Button das Aus- bzw. Einklappen der editierbaren Eigenschaften. Ein Icon in Form einer Pin-Nadel ist gleichzeitig Anzeiger und Button: Wird das Icon gefüllt dargestellt, ist die Animation ‚gepinnt’ und wird permanent angezeigt (und ausgeführt), auch wenn eine andere Animation markiert wird. Ist das Icon nur als Outline zu sehen, können Sie die Animation durch einen Klick ‚pinnen‘.

Rechts neben der Steuerleiste bietet die Schalfläche Pinning Actions die Möglichkeit aus einem PopUp-Menü eine oder mehrere Gruppen von Animationen (Pinning Groups) auszuwählen, die dann gleichzeitig untereinander in der Timeline angezeigt werden. Aktive Gruppen werden immer angezeigt (und ausgeführt), auch wenn keine Animation bzw. kein Objekt markiert ist.

(Mehr über Pinning Groups und das Erstellen und Bearbeiten von Animationen hier).

 

 

Am unteren Rand des vergrößerbaren Animator-Fensters befindet sich links eine Skalierungs-Anzeige: Mit einem Schieberegler lässt sich der Maßstab der Timeline verändern. Je weiter nach rechts, umso mehr Frames (Bilder) der Timeline werden im sichtbaren Ausschnitt angezeigt. Bereits vorhandene Keys sind in jeder Darstellung sichtbar. Rechts von dieser Skala sehen Sie den aktuellen Zeitpunkt innerhalb der Timeline, der durch einen verschiebbaren, transparenten, senkrechten Balken (Slider) angezeigt wird.

  • Options: Bezieht sich auf die Ansicht der Arbeitsfläche und Bühne. Sie können z.B. das Hintergrundraster (Grid) ausschalten oder seine Größe und Farbe einstellen. Außerdem gibt es verschiedene Optionen für die Ansicht im Edit- bzw. im Preview Mode – u.a. können Sie zur besseren Unterscheidung alle interaktiven Objekte mit ihrer Umrandung anzeigen lassen.

 

Back To Top

Assetverwaltung

Am linken Rand der Benutzeroberfläche befinden sich Project Navigator und Scene Navigator.

Der Project Navigator bildet die Struktur Ihres Projekt-Ordners ab. Sie haben darüber Zugriff auf sämtliche Assets und können z.B. einzelne Bilder auf die Bühne ziehen, um sie in einer Szene zu verwenden.

 

 

Über einen Schieberegler am unteren Rand lässt sich die Größe der Bild-Icons ändern. Bei Bildern stehen unterhalb des Namens die Größenabmessungen (Pixel Breite und Höhe). Bei Sounds finden Sie Angaben zur Länge und haben die Möglichkeit einzelne Sounds anzuhören. (Hinweis: Sounds werden anders als Bilder nicht direkt auf die Bühne importiert, sondern gezielt mit einzelnen Objekten bzw. Animationen verknüpft. Mehr dazu hier.

Am oberen Rand des Project Navigators finden Sie folgende Optionen:

  • Suchfunktion: Eine Texteingabe in dieses Fenster beschränkt die Ansicht innerhalb der Projektordner auf Assets, die Ihrem Suchtext entsprechen. Geben Sie z.B. „Blume“ ein, um alle Assets zu sehen, deren Name diese Zeichenkette beinhaltet.
  • Filter File List: Darüber lässt sich einstellen, welche Daten aus dem Projektordner im Navigator angezeigt werden. Insbesondere wenn Sie viele Bilder verwenden und häufig darauf zugreifen, kann es angenehm sein die übrigen Medien auszublenden.
  • Über das + Zeichen können Sie kleine Spiele erstellen, sogenannte Mini Games. Im Gegensatz zu den drei Haupt-Spieletypen Doodle, Memory und Puzzle können diese Spiele gezielt innerhalb einer Szene über ein Touch Event aufgerufen werden, ohne die Szene zu verlassen.

Es stehen folgende Spieletypen zur Auswahl

  • QuestGame    // Finde 1-5 Gegenstände im Bild und tippe drauf.
  • QuizGame       // Beantworte eine Frage zur Story (Multiple Choice).
  • RhymesGame    // Finde aus 6 Wörtern die heraus, die sich auf ein vorgegebenes reimen.
  • SpellGame      // Bilde aus den Buchstaben ein Wort, das im Bild zu sehen ist.
  • SpotGame      // Finde 5 Unterschiede zwischen den beiden Bildern.
  • SpotGameAR // Finde 5 Unterschiede zwischen diesem Bild und dem Bild in deinem Buch.

Alle Spiele lassen sich mit eigenen Bildern, Hintergründen und Sounds konfigurieren. Eine genauere Beschreibung der Bearbeitung finden Sie hier.

 

 

Der Scene Navigator listet alle Objekte auf, die in einer Szene vorkommen. Dies können verknüpfte Bilder sein oder in der Szene erstellte Text, Nodes oder Bézierkurven. Lediglich Hintergrundbilder sowie Sounds, die mit einer Szene verknüpft sind, tauchen nicht im Scene Navigator auf; Sounds werden als Verknüpfungen im Object Inspector oder im Animations Inspector angezeigt, Hintergrundbilder im Scene Inspector. Jedes Objekt wird durch ein viereckiges Icon symbolisiert.

Unterhalb des Objektnamens steht, um welche Art Objekt es sich handelt, auf welcher Hierarchieebene (Local Order, s.u.) es sich befindet und welche Ausmaße das Objekt im Grundzustand besitzt (Breite x Höhe in Pixel).

Links von jedem Objekt befinden sich zwei Symbole, die die Darstellung im Editor beeinflussen:

  • Klicken Sie auf das geöffnete Schloss-Symbol, um ein Objekt vor versehentlicher Auswahl und Bearbeitung auf der Bühne zu schützen. Das ist insbesondere dann sinnvoll, wenn mehrere Objekte auf dichtem Raum zusammenliegen und einander überlappen.
  • Klicken Sie auf das Auge-Symbol, um ein Objekt vorübergehend auszublenden – auch dies ist u.a. hilfreich, wenn sich mehrere Objekte auf engem Raum befinden, man aber nur bestimmte editieren will.

Am oberen Rand des Scene Navigators befindet sich ein Eingabefeld, das Ihnen hilft aus allen im Scene Navigator gelisteten Objekte bestimmte herauszufiltern. Über Filter List And Selection direkt unter dem Eingabefeld können die angezeigten Ergebnisse weiter eingeschränkt werden.

 

 

Über den + Button oben rechts im Scene Navigator können Sie weitere Objekte erzeugen, die nur in der aktuellen Szene verfügbar sind. Es handelt sich dabei um folgende Objekttypen:

  • Node
  • Bézier
  • Text
  • Text Blade

 

 

Node

Ein Node ist eine Art Leercontainer. Es wird ein ca. 400 x 400 Pixel großes transparentes Quadrat erzeugt, das per default „UntitledNode“ heißt. Sie können diesen Node genau wie andere Objekte skalieren, rotieren, verschieben, animieren etc. Das Besondere ist, dass ein Node im späteren E-Book (und bereits im Preview-Modus) unsichtbar ist. Sie können einen Node daher zum Beispiel als eine Art Button verwenden, den Sie entweder einfach über einen Teil des Hintergrundbildes platzieren (zum Beispiel weil dort ein Auto zu sehen ist, das sich auf Klick zwar nicht bewegen aber Geräusche machen soll) oder den Sie als eine Art unsichtbarer Sammelcontainer für andere Objekte verwenden – Stichwort Parent-Child-Objekte (siehe dazu weiter unten auf dieser Seite und hier).

 

Bézier

Bézierkurven sind ebenso wie Nodes im fertigen E-Book nicht zu sehen. Sie stellen unsichtbare Pfade dar, an denen sich andere Objekte ausrichten. Eine Bézierkurve kann beispielsweise als Flugbahn für einen Vogel dienen oder eine Linie/Kurve darstellen, an der ein User ein anderes Objekt entlangschieben kann. Im Gegensatz zu Bildern, Nodes und Textboxen können Bézierkurven keine eigenen Animationen haben. Sie können sie aber skalieren, rotieren und platzieren, wie und wo immer Sie sie benötigen. Oben links von der erzeugten Bézierkurve gibt es ein kleines Rechteck mit einer Pfeilspitze – diese zeigt an, dass sich die Bézierkurve im Transformations-Modus befindet. In dieser Ansicht können Sie die Bézierkurve als Ganzes skalieren, rotieren, verschieben. Klicken Sie in das Rechteck um in den Edit-Modus für die Bézierkurve zu wechseln – die Pfeilspitze ändert sich zu einem Stift und die Bézierkurve selbst erhält diverse Anfasspunkte, mit denen sie editiert werden kann. Mehr zur Verwendung von Bézierkurven hier.

 

Text

Über Text erzeugen Sie eine Textbox, die als quadratisches Rechteck in der Bühnenmitte erscheint und abhängig von der eingestellten Sprache einen Dummytext enthält. Wie bei Bézierkurven gibt es einen Transformations-Modus – erkennbar an dem kleinen Rechteck mit der Pfeilspitze –, in dem die Textbox platziert, rotiert, skaliert und auch animiert werden kann. Beim Skalieren gilt es folgende Unterscheidung zu beachten: einfaches Ziehen an den Eck- und Seitenpunkten verändert die Größe des Textbereiches, hat eventuell Einfluss auf den Textumbruch, lässt aber die Schriftgröße unberührt. Ziehen mit gedrückter Control-Taste skaliert hingegen auch den Text. Eine Textbox kann wie die meisten anderen Objekte eine oder mehrere Animationen haben; beispielsweise könnte der Text als Startanimation langsam eingeblendet werden und auf Klick ausgeblendet oder hinausgeschoben werden.

Im Edit-Modus, den Sie durch einen Klick in das kleine Quadrat oben links über der Textbox aufrufen, können Sie den Inhalt der Textbox bearbeiten. Geben Sie Text über die Tastatur ein oder über die Zwischenablage. Im Object Inspector finden Sie zahlreiche Einstellungsmöglichkeiten für Schriftart, -größe, -farbe etc. Mehr dazu unter Arbeiten mit Text.

 

Text Blade

Die Text Blade erzeugt ein großes Feld über die gesamte Bühnenbreite, das am unteren Rand erscheint. Innerhalb dieser Fläche liegt eine konfigurierbare Textbox. Im späteren E-Book erscheint die Text Blade zunächst nur als eine Art Lasche am unteren Bildrand (gleichzeitig ‚Open‘- und ‚Close‘-Button) und schiebt sich bei Antippen ins Bild. Ebenso wie bei normalen Textboxen (s.o.) gibt es einen Transformations- und einen Edit-Modus. Ersterer dient nur zur Skalierung der Text Blade und damit des Textfeldes (nach unten); im Edit-Modus hingegen geben Sie Text per Tastatur ein oder über die Zwischenablage. Der Edit-Modus bietet die gleichen Text Properties wie bei Textfeldern; zusätzlich gibt es im Object Inspector noch Text Blade Properties. Dort lässt sich einstellen,

  • wie hoch die Text Blade relativ zur Bühnenhöhe sein soll (Blade Height; Bereich zwischen 20 und 70%); dieser Wert korrespondiert mit dem Anfasser am unteren Text Blade-Rand,
  • um wieviel Prozent die Bühne bei Auftauchen des Textfeldes nach oben verschoben wird (Scene Movement). Bei einem Wert 0 würde das Textfeld den unteren Bereich der Bühne einfach überdecken; da dies in der Regel nicht gewollt ist, kann prozentual eingestellt werden, wie weit sich das Bühnenbild nach oben hinausschiebt.
  • wie nah das eigentliche Textfeld am seitlichen bzw. oberen Rand der Text Blade liegt (Fill Unit Width und Fill Unit Height).

Eine Text Blade kann nicht animiert werden, hat aber im Animations Inspector bereits eine Animation (Text Blade Audio), die sich auf einen verknüpften Sprechersound bzw. importierte Daten zum Word Highlighting bezieht (Genaueres siehe unter Word Highlighting).

Das konkrete Aussehen einer Text Blade können Sie (wie auch weitere Navigationselemente) über den Scene Inspector beeinflussen (siehe auch Scene Skinning Properties).

Mithilfe des Buttons oben rechts neben dem + können Sie ein ausgewähltes Objekt aus der Szene und damit aus dem Scene Navigator entfernen. (Alternativ verwenden Sie die Backspace-Taste oder Rechtsklick + Delete)

Am unteren Ende des Scene Navigators finden Sie einen Schieberegler, mit dem die Voransicht-Icons der Bilder vergrößert bzw. verkleinert werden können.

 

Hierarchie im Scene Navigator

Die Reihenfolge im Scene Navigator bildet die Schichtung der Objekte auf der Bühne ab. Je weiter unten ein Objekt gelistet ist, desto weiter oben liegt es auf der Bühne. Ziehen Sie nacheinander zum Beispiel zehn Bilder aus dem Project Navigator auf die Bühne, wird TigerCreate die Reihenfolge im Scene Navigator zunächst alphabetisch sortieren – das Objekt „Arm“ wird also im Scene Navigator weiter oben stehen als das Objekt „Kopf“, auf der Bühne wird es aber hinter bzw. unter diesem liegen. um diese Reihenfolge zu verändern, könnten Sie nun hingehen und den in der Szene verwendeten Objektnamen so ändern, dass aus „Arm“ „RechterArm“ wird und das Objekt in der Hierarchie nach oben (bühnenbezogen) rutscht. [Achtung: Die Neusortierung im Scene Navigator erfolgt nicht unmittelbar nach einer Namensänderung, sondern ein Update findet zeitversetzt statt!]. Da dies reichlich unpraktisch wäre, gibt es eine einfache Möglichkeit die Anordnung zu beeinflussen – die sogenannte Local Order. Sie kann für jedes Objekt der Szene im Object Inspector eingestellt werden. in der Grundeinstellung besitzt jedes importierte oder in der Szene erzeugte Objekt die Local Order = 0 und liegt damit auf der untersten Ebene quasi direkt über dem Hintergrundbild. Durch Erhöhen des Local Order-Wertes holen Sie ein Objekt auf eine höhere Ebene. Innerhalb einer Local Order-oder auch Z-Ebene (stellen Sie sich auch bei 2D-Szenen die Anordnung der Objekte räumlich auf der Z-Achse vor) gilt wie oben ausgeführt die alphabetische Anordnung.

Möchten Sie also das Objekt „Arm“ weiter nach ‚oben‘ bringen, so dass es vor bzw. über den anderen Objekte liegt, erhöhen Sie im Object Inspector seine Local Order. (Hinweis: Local Order-Werte können auch negativ sein, um ein Objekt hinter anderen anzuordnen. Ein Objekt mit negativem Local Order-Wert wird aber trotzdem immer über dem Hintergrund angezeigt.)

 

Parent-Child-Objekte

Der Scene Navigator hilft Ihnen auch dabei Objekte zu komplexen, untereinander abhängigen Objekten – sogenannten Parent-Child-Objekten – zusammenzufassen. Stellen Sie sich einen Schmetterling vor, der aus einem schmalen Körper mit Kopf sowie zwei Flügeln besteht. Um ein halbwegs realistisches Verhalten zu erzeugen, müssen einerseits die Flügel bewegt werden, andererseits muss sich der Schmetterling als Ganzes durch die Szene bewegen. In diesem Fall bietet es sich an die einzelnen Flügel mit dem Schmetterlingskörper zu einem Parent-Child-Objekt zusammenzufassen, sodass im Endergebnis die Schmetterlingsflügel munter vor sich hinflattern und wie angeheftet dem Schmetterlingskörper folgen, dabei ggf. automatisch mitskaliert und -rotiert werden.

Um aus mehreren Objekten ein Parent-Child-Objekt zu machen, überlegen Sie zunächst, welches Objekt das Übergeordnete (also das Parent-Object) sein soll. Im Fall des Schmetterlings sollte dies eindeutig der Schmetterlingskörper sein, an dem die Flügel rechts und links dranhängen. Ziehen Sie nun im Scene Navigator das zukünftige Child Object (im Beispiel ein Flügel) auf das Parent Object (Schmetterlingskörper). Das Child Object verschwindet scheinbar, dafür bekommt das Parent Object zusätzlich zum Schloss- und Auge-Icon ein kleines Dreieck. Tippen Sie dieses an, klappt das Parent Object nach unten aus und zeigt – eingerückt nach rechts – alle Child Objekte an. Die Child Objekte sind nun dem Parent Objekt untergeordnet. In der Darstellung auf der Bühne ändert sich nichts (*Ausnahme: s.u.); verschieben Sie jedoch das Parent Object, werden die Child Objekte automatisch mit verschoben, rotiert, skaliert oder was auch immer. Mehr zu Parent-Child-Objekten und den Einfluss auf Animationen der einzelnen Teile finden Sie hier: Animationen von verschachtelten Objekten.

 

 

*Bezüglich der Reihenfolge bzw. Hierarchie werden die Child Objekte ebenfalls dem Parent Objekt untergeordnet. Selbst wenn einem Child Object eine eigene Local Order zugeordnet wurde, wird es die Hierarchieebene des Parent Objects übernehmen. Innerhalb des komplexen Parent-Child-Objektes sieht die Hierarchiereihenfolge und damit auch die Darstellung auf der Bühne wie folgt aus:

  • Das Parent Object liegt an unterster Stelle, liegt damit sichtbar also hinter(!) seinen Child Objekten.
  • Alle Child-Objekte untereinander werden wie zuvor entweder alphabetisch sortiert oder abhängig von einer eventuell eingestellten Local Order, sind aber dennoch dem Parent Object untergeordnet.

Beispiel: Ein Parent Child-Object besteht aus Schmetterlingskörper und zwei Flügeln. Zunächst war für beide Flügel jeweils Local Order = 2, für den Körper Local Order = 0 eingestellt. Nach der Zusammenfassung zu einem komplexen Objekt besitzen die Flügel zwar immer noch Local Order = 2, sind aber als Child Objekte der Local Order ihres Parent untergeordnet, welche nach wie vor 0 ist. Dadurch würde ein anderes Objekt, sagen wir eine Biene, mit Local Order = 1 sowohl den Schmetterling als auch die beiden Flügel überdecken. Die Local Order der Child-Objekte bleibt erhalten, gilt aber nur noch innerhalb ihres Parent Objects!

Back To Top

Inspektoren

Am rechten Rand der Benutzeroberfläche gibt es die sogenannte Inspector-Leiste mit Object Inspector, Animations Inspector und Scene Inspector.

Wie die Namen schon sagen, können Sie im Object Inspector Einstellungen eines ausgewählten Objekts verändern:

  • Generic Properties
  • Default Transformation Properties
  • Touch Properties
  • Bézier Properties
  • Text Properties
  • Text Blade Properties

Der Object Inspector bietet u.a. detaillierte Einstellungsmöglichkeiten bezüglich Position, Rotation, Skalierung, Transparenz sowie der räumlichen Anordnung (Z-Achse). Darüberhinaus verknüpfen Sie im Object Inspector Objekte mit Animationen und Sounds und machen sie zu interaktiven Objekten.

Wählen Sie ein Objekt aus, um seine aktuellen Einstellungen auf der Bühne zu sehen. Alle Werte können auch direkt eingegeben werden; wollen Sie beispielsweise mehrere Objekte auf genau dieselbe Position setzen, markieren Sie alle Objekte und geben die gewünschten gemeinsamen Koordinaten für X Position und Y Position ein.

 

Generic Properties

Im Bereich Generic Properties sehen Sie aktuelle Statusinformationen eines Objekts.

Das beginnt mit dem Namen (Unique Name), der zunächst dem Dateinamen entspricht. Wird ein Objekt mehr als einmal in einer Szene verwendet, wird dem Namen automatisch eine Zahl (1, 2, …) angehängt. Sie können diesen Namen aber jederzeit verändern, um beispielsweise aus einem Objekt „S01_Butterfly_WingLeft“ ein kürzeres „Flügel links“ zu machen.

Die beiden Checkboxen Locked und Visible unter Editor States entsprechen den beiden Icons Schloss und Auge im Scene Navigator – geben also an, ob ein Objekt gesperrt bzw. sichtbar ist.

 

    

 

Base Image verweist auf das verknüpfte Originalbild im Project Ordner. Rechts neben Symbol und Name des aktuellen Assets liegt eine Art Kettenglied-Symbol. Diese Schaltfläche – Image Pointer – dient dazu das Originalbild neu zuzuweisen bzw. ein anderes Bild im Project Navigator zu verknüpfen, indem Sie es mit gedrückter (linker) Maustaste auf ein Bild im Project Navigator ziehen. Name und Eigenschaften mit allen Animationen bleiben erhalten, es ändert sich nur das Bild.

Alternativ kann man auch über Drag & Drop aus dem Bilderordner des Project Navigator ein neues Asset in das Base Image-Feld ziehen.

Local Order bestimmt die räumliche Lage eines Objekts bezogen auf den Hintergrund, also die Schichtung übereinander. Zu Beginn hat jedes Objekt, das Sie aus dem Project Navigator in eine Szene importieren, den Wert Order = 0, damit liegen sie alle auf derselben Ebene. In diesem Zustand gilt die alphabetische Sortierung; ein Objekt mit dem Namen „Baum“ wird hinter einem Objekt „Hund“ liegen, aber vor einem Objekt „Axt“. Um eine gezielte Anordnung ‚weiter vorne‘ – ‚weiter hinten‘ vorzunehmen, erhöhen Sie gezielt den Local Order-Wert. Je höher die Local Order, desto weiter vorne liegt ein Objekt. Prinzipiell können Local Order-Werte auch negativ sein, um ein Objekt weiter hinten anzuordnen (Ein Objekt mit negativem Local Order-Wert wird aber trotzdem immer über dem Hintergrund angezeigt.).

Outline Color (debug) ruft eine Farbauswahl auf. Die Farbe, die Sie dort einstellen, gilt nur für das aktuelle Objekt. Sie steht im Zusammenhang mit den Einstellungen unter der Schaltfläche Options in der Toolbar oberhalb der Bühne. In den Options können Sie beispielsweise festlegen, dass alle Objekte mit einem Touch Event (also klickbare Objekte) mit einem farbigen Rahmen (Outline) umgeben werden. Gerade in komplexen Szenen ist das während der Produktion sehr praktisch, um den Überblick zu behalten. Um zu unterscheiden, welche Objekte zwar ein Touch Event aber vielleicht noch keine Animation haben, könnten Sie diese z. B. durch eine eigene Outlinefarbe kennzeichnen.

 

     

 

Default Transformation Properties

Die Default Transformation Properties spiegeln die Grundeinstellungen eines Objekts wider, wenn keine dem Objekt zugehörige Animation (im Animations Inspector) aktiviert ist. Besitzt ein Objekt eine oder mehrere Animationen und ist eine von diesen gerade ausgewählt, ändert sich auch die Überschrift dieser Sektion zu Key Transformation Properties (mehr dazu finden Sie im Bereich Animationen).

Die Transformation Properties beziehen sich – von oben nach unten – auf

  • die Position des Objekts (Position xy). Da die Koordinaten von der oberen linken Bühnenecke aus gerechnet werden, bedeuten negative Werte, dass sich das Objekt außerhalb des Bühnenbereichs befindet (ebenso wenn Sie Werte X > 2048 oder Y > 1536 verwenden, was dem rechten bzw. unteren Bühnenrand entspricht).
  • Angle z steht für die Rotation des Objekts. Sie wird in Gradzahlen berechnet, also von 0 bis 360 Grad, was einer vollständigen Umdrehung entspräche. Wie weiter unten beschrieben ist der (verschiebbare) Ankerpunkt relevant für die Rotation eines Objekts, weil es sich um diesen Punkt dreht. Der Name Angle Z drückt bereits aus, dass es sich um die räumliche Z-Achse handelt; während X- und Y-Achse die Position in der Ebene beschreiben, ist Angle der Winkel, um den das Objekt um die (nach hinten in die räumliche Tiefe weggehende) Z-Achse rotiert wird.
  • Scale xy, die Skalierung des Objekts. Ein Wert von X=1 und Y=1 oder (1/1) entspricht der Originalgröße eines Objekts; bei X=2 und Y=1, also (2/1) wäre das Objekt doppelt so lang wie im Original, aber genau so hoch. Werte von (.5/.5) würden das Objekt auf ein Viertel seiner Größe schrumpfen lassen. Negative Werte, also z.B. Scale X = -1, spiegeln das Objekt horizontal und oder vertikal (Scale Y = -1).

Auch bei einer Skalierung, insbesondere im Rahmen einer Animation, spielt der Ankerpunkt (s.o.) des Objekts eine Rolle, weil die Skalierung von diesem Punkt ausgehend berechnet wird.

  • Anchor xy, den Ankerpunkt des Objekts. Standardmäßig hat jedes Objekt, das aus dem Project Navigator auf die Bühne gezogen wird, seinen Ankerpunkt – ein dickes, weißes x – genau mittig, was den Werten ‚.5’ oder (‚0.5‘) entspricht. Der Ankerpunkt ist insbesondere wichtig bei Transformationen wie Rotation oder Skalierung, weil sich die Transformationen auf diesen Punkt beziehen. Ein aktives Objekt wird ja mit einem umgebenden Rechteck mit Anfassern sowie einem Kreis angezeigt. Der Ankerpunkt lässt sich beliebig verschieben, dabei entspricht die obere linke Ecke des Rechtecks den Werten (0/0), die rechte untere Ecke entspricht (1/1). Der Ankerpunkt kann auch außerhalb des Objektrechtecks liegen. Anschaulich werden die Auswirkungen, wenn Sie den Ankerpunkt eines Objekts einmal deutlich außerhalb verlagern und das Objekt dann rotieren.

Klicken Sie auf die kleinen Punkte des Gitterkreuzes im Object Inspector, um den Ankerpunkt genau in den Ecken oder in der Mitte des Objektrechtecks zu platzieren.

  • die Transparenz bzw. Deckkraft des Objekts (Opacity). Auf einer Skala von 0 bis 100 lässt sich die Deckkraft von 0 = völlig transparent bis 100 = völlig deckend einstellen.

 

 

Die Werte Rotation und Deckkraft (Angle Z und Opacity) sind jeweils mit dem Zusatz (Local) versehen! Das bezieht sich auf die Unterscheidung zwischen lokalen und globalen Werten (siehe auch die Schaltflächen Local und Global oberhalb der Arbeitsfläche). Im Wesentlichen geht es um die unterschiedlichen Koordinaten-Bezugspunkte bei verschachtelten Objekten (Parent-Child-Objekte). Nehmen wir das Beispiel von dem Schmetterling, dessen Einzelteile – Körper und zwei einzelne Flügel – zu einem komplexen Parent-Child-Objekt verschachtelt werden. Ehe Sie die Verschachtelung vornehmen, platzieren Sie die Flügel rechts und links vom Körper. Jedes der Teile hat dann eigene Transformationswerte (Position, Skalierung, Rotation). In dem Moment, wo die Teile miteinander verschachtelt werden, ändern sich bei den Child-Objekten die angezeigten Werte. Sie werden zu lokalen Werten in Bezug auf den Mittelpunkt des übergeordneten Parent-Objekts, der als Nullpunkt dient. Wollen Sie die ursprünglichen Werte (also ohne Verschachtelung) sehen, schalten Sie am oberen Rand der Arbeitsfläche die Anzeige von Local auf Global.
Die Werte für die Rotation (Angle Z) und die Deckkraft (Opacity) verändern sich dabei nicht, sie werden immer als lokale Werte angezeigt.

Alle Transformation Properties können Sie in einem kopieren und auf ein anderes Objekt übertragen. Nutzen Sie dazu das umrandete + Symbol rechts neben der Überschrift Transformation Properties. Klick auf das Symbol aktiviert die danebenstehende Schaltfläche (Pfeilsymbol), ebenso die Pfeilsymbole links neben den einzelnen Properties (Position, Scale, …). Wählen Sie nun ein anderes Objekt aus. Durch Klick auf die dort vorhandenen Pfeilsymbole übertragen Sie entweder alle zuvor kopierten Transformation Properties (Klick auf das Pfeilsymbol rechts neben der Überschrift) oder nur ganz bestimmte (zum Beispiel Klick auf das Pfeilsymbol links neben Z Angle).

Achtung: Haben Sie für eine Szene im Scene Inspector die Option 3D aktiviert, ändert sich auch die Ansicht für die Default Transformation Properties. Für Position, Scale und Angle gibt es jeweils X-, Y- und Z-Werte. Mehr dazu unter Einsatz von 3D.

 

Sonderfall Textbox:

Textboxen sind Objekte, die innerhalb einer Szene erstellt und bearbeitet werden. Es gibt dafür einen Editor-Modus zum Bearbeiten und Formatieren des Textes sowie einen Modus zur Positionierung, Ausrichtung und Skalierung der Textbox. In letzterem Modus erweitert sich die Anzeige der Default Transformation Properties um die Zeile Size (width, height), die Länge und Höhe der Textbox anzeigen.

 

 

Touch Properties

Der Abschnitt Touch Properties bietet zunächst genau eine Option – Has Touch Event. Indem Sie diese Checkbox markieren, machen Sie ein Objekt interaktiv.

Wird es in der Folge angetippt, können Sie …

  • mit diesem Objekt verbundene Animationen ansteuern
  • Animationen anderer Objekte ansteuern
  • Sounds abspielen
  • eine andere Szene ansteuern bzw. in eine andere Szene springen
  • eins der Mini-Games innerhalb der Szene starten
  • den AR-Modus für diese Szene starten
  • einen Hyperlink aufrufen

Genaueres zu diesen Optionen siehe unten. Die beiden Checkboxen Show Hint und Show Hint At Anchor geben Ihnen die Möglichkeit, das Verhalten des Hint-Symbols für dieses Objekt auszuschalten bzw. mit der zweiten Option genauer einzustellen.

Generell stellen Sie das Hint-Verhalten über die Project Settings (siehe dort) ein. Wollen Sie aber, dass für ein bestimmtes Objekt kein Hint aufblinkt, schalten Sie es hier ab. Show Hint At Anchor sorgt dafür, dass das Hint-Symbol genau über dem Ankerpunkt des Objekts blinkt.

 

 

Touch Properties ist unterteilt in drei Abschnitte – Animations, Sounds, Miscellaneous.

Unter Animations können Sie eine oder mehrere Animationen mit diesem Objekt verknüpfen. Dies können Animationen sein, die sich auf dieses Objekt selbst beziehen (Beispiel: Klick auf einen Frosch bringt diesen zum Hüpfen) oder die zu anderen Objekten gehören (Beispiel: Klick auf einen Baum lässt ein paar Vögel aus diesem auffliegen).

Um eine Animation zu verknüpfen haben Sie zwei Möglichkeiten:

  • Über das + Zeichen wird ein PopUp-Fenster aufgerufen, das alle Objekte mit Animationen auflistet. Neben jedem Objekt erscheint rechts ein kleines Dreieck; dahinter verbirgt sich eine weitere Liste mit allen Animationen dieses Objekts. Wählen Sie auf diese Art eine oder mehrere Animationen aus, diese werden mit weiteren Informationen untereinander aufgelistet.

Übrigens: Die Funktion Add All From Animator im PopUp-Fenster bezieht sich auf so genannte ‚gepinnte‘ Animationen, also Animationen, die über die Pinning-Option aktiv gehalten werden (siehe dazu Arbeiten mit Animationen). Mit dieser Funktion können gleich mehrere Animationen gleichzeitig in die Liste übernommen werden.

 

 

  • Die zweite Möglichkeit ist mindestens genauso komfortabel und bietet sich vor allem an, wenn viele Objekte in einer Szene sind, dazu noch mehrere Animationen haben und das Ganze etwas unübersichtlich wird. Ziehen Sie mit gedrückter Maus das kleine Verknüpfungs-Icon, den sogenannten Animation Pointer, rechts am unteren Rand der Animationsliste in den Bühnenbereich. Wo immer ein Objekt mit Animationen unter dem Mauszeiger liegt, erscheint eine Liste der dort vorhandenen Objekte. Daraus wählen Sie bequem die gewünschte Animation aus. Bereits zuvor ausgewählte Animationen werden gesondert gekennzeichnet.

 

 

Über die Option Mode bestimmen Sie, wie eine ausgewählte Animation abgespielt werden soll:

  • Start – startet alle (verknüpften) Animationen von ihrem Anfang,
  •  Start Once – spielt alle Animationen von Anfang bis Ende genau einmal ab
  •  Stop – stoppt die verknüpften laufenden Animationen und versetzt die Objekte in ihren Ausgangszustand
  •  Toggle Start/Stop – stoppt alle laufenden Animationen (s.o.) oder startet sie von vorne; das auslösende Objekt changiert also zwischen Start- und Stop-Button
  •  Pause – hält die laufenden (verknüpften) Animationen an und behält deren aktuellen Status bei
  •  Unpause – spielt zuvor angehaltene Animationen von ihrem derzeitigen Punkt weiter ab
  •  Toggle Resume/Pause – spielt angehaltene Animationen weiter ab bzw. hält laufende Animationen an; wechselt also zwischen Pause und Play
  •  Toggle Start/Pause – wechselt zwischen Pause und Start (von vorne); bereits laufende Animationen werden angehalten (Pause), pausierende werden von vorne gestartet (Start)
  •  Start If No Active Animations – startet die Animationen in der Liste nur, wenn keins der damit verbundenen Objekte gerade in einer Animation läuft.

 

 

Dazu ein Beispiel: Stellen Sie sich hierzu einen Ball vor, der zu mehreren Animationen gehört – ‚Ball rollt von links nach rechts‘, ‚Ball springt von rechts nach links‘. Beide Animationen sollen über unterschiedliche Buttons gesteuert werden, die links bzw. rechts auf der Bühne liegen. Um zu gewährleisten, dass ‚Ball rollt von links nach rechts‘ nicht ausgelöst wird, während er gerade von rechts nach links springt, werden die auslösenden Objekte (Buttons) mit dem Touch Event Start If No Active Animations versehen.

Die Checkbox Use Different Animations Per Language ermöglicht, dass Sie unterschiedliche Animationen für die verschiedenen Sprachen verwenden können. Dadurch haben Sie eine über die zuvor bereits mögliche sprachabhängige Verwendung von Grafiken und Sounds noch weiterreichende Kontrolle über Aufbau und Ablauf von Szenen in unterschiedlichen Sprachen. Achten Sie bei Verwendung dieses Features bitte darauf, dass Sie für jede unterstützten Sprache Animationen verknüpfen; anders als bei Grafiken und Sounds gibt es keine Default-Animation, die automatisch zum Einsatz kommt, wenn nichts anderes gewählt wurde. Mehr zur Unterstützung mehrerer Sprachen finden Sie hier.
Anders als bei Animationen verknüpfen Sie Sounds mit einem Objekt, indem Sie einen Sound entweder aus dem Project Navigator oder direkt aus dem Finder in die Soundliste der Touch Properties ziehen. Dort wird der Sound mit vollem Dateinamen und Einstellungen zum Abspielen angezeigt. Sobald ein Sound in dieser Liste ausgewählt wird, erscheinen unterhalb Einstellungsmöglichkeiten für Lautstärke (Volume), Verzögerung (Delay), Anzahl Wiederholungen (Loops) Start- und Endzeit. Sobald Start- und oder Endzeit von verändert wurden, wird dieses Trimmen in der darunter befindlichen Vorschaukurve des Sounds sichtbar, und Sie können die dann angezeigten Balken auch per Maus verschieben. Oberhalb der Einstellungen wird die Gesamtabspiellänge in Abhängigkeit der Einstellungen (also auch Anzahl Wiederholungen angezeigt); unterhalb die Länge des getrimmten Sounds unabhängig von Verzögerung und Wiederholungszahl.

 

 

Zum Abspielen von Sounds haben Sie ähnlich wie bei Animationen mehrere Steuermöglichkeiten:

  • Start – startet alle Sounds in der Liste von ihrem Anfang
  •  Start Once – spielt alle Sounds von Anfang bis Ende genau einmal ab
  •  Toggle Start/Stop – stoppt alle laufenden Sounds (s.o.) oder startet sie von vorne; das auslösende Objekt wechselt seine Funktion also zwischen Start- und Stop-Button
  •  Toggle Resume/Pause – spielt angehaltene Sounds weiter ab bzw. hält laufende Sounds an; wechselt zwischen Pause und Play
  •  Start If No Active Sounds – startet die Sounds in der Liste nur, wenn aktuell keiner der Sounds läuft.

 

 

Über das – Symbol unterhalb der Soundliste lässt sich ein ausgewählter Sound aus der Liste entfernen, über das umrandete + Symbol rechts lassen sich Sounds mit ihren Einstellungen kopieren und auf andere Objekte übertragen. Das funktioniert auch beim Wechsel der Szene, also szenenübergreifend.

Im untersten Abschnitt Miscellaneous können Sie Aktionen auswählen, durch die der User die aktuelle Szene verlässt oder vorübergehend in einen anderen Modus wechselt.

 

 

  • Mit Go to Scene können Sie eine andere Szene ansteuern bzw. in eine andere Szene springen. Nach Auswahl einer Szene aus dem PopUp-Menü erscheinen weitere Optionen (Delay und Transition), die Art und Dauer des Übergangs zur ausgewählten Szene beeinflussen. Zur Verfügung stehen Hinausschieben (Move) der aktuellen Szene, Aus- und Einblenden (Fade) sowie ein simuliertes Umblättern (Page Curl).

Möchten Sie zuerst eine oder mehrere Animationen starten und erst nach deren Ende den Sprung zu einer anderen Szene vollziehen, müssen Sie die Delay-Zeit für Go to Scene entsprechend hoch einstellen.

 

 

  • Start Game erweitert die Szene um eins der Mini-Games, die sich innerhalb der Szene öffnen. (Siehe dazu mehr unter Erstellen und Einbinden von Spielen).
  • Start AR Mode startet den AR-Modus für diese Szene; die interne Kamera wird aktiviert und die Szene erweitert und ‚belebt‘ das Kamerabild. Dazu muss im Scene Inspector im Bereich Scene Augmented Reality Properties die Option Use Augmented Reality aktiviert sein. Zudem muss eine AR-Szene vorbereitet worden sein und die zugehörige Buchvorlage – das Target Image – muss vorliegen. Mit dieser Funktionalität kann man eigene Szenen bauen, in denen der User zunächst empfangen und auf die AR-Funktionalität vorbereitet wird. Erst mit einem Klick auf zum Beispiel einen “START AR”-Button wird dann der Kamera-AR-Modus gestartet.
  • Open Link ruft einen Hyperlink auf, beispielsweise die Adresse einer Website oder eine Mailadresse mit Betreffzeile und Inhalt. Dazu wird ein Browser geöffnet, der die entsprechende Adresse aufruft. Über das Task-Menü bei Android oder über den neuen “zurück” Button links oben bei iOS kann anschließend wieder zurück zur E-Book-Story gewechselt werden.

– – – – –

Weitere Properties im Object Inspector

Während die bisher aufgezählten Eigenschaften (Properties) bei jeder Art Objekt angezeigt werden, erscheinen die folgenden nur nach Auswahl bestimmter Objekte:

Bézier Properties

Ist auf der Bühne eine Bézierkurve markiert, zeigt der Object Inspector zusätzlich spezielle Eigenschaften für Bézierkurven.

  • Closed – sorgt dafür, dass die Endpunkte der Bézierkurve miteinander verbunden werden, es entsteht eine geschlossene Kurve.
  • Reverse Points – vertauscht Anfangs- und Endpunkt der Bézierkurve, so dass sie umgekehrt (von rechts nach links) durchlaufen wird.
  • Convert to – bietet in einem PopUp-Menü verschiedene geometrische Figuren (Kreis, Viereck, …) sowie zuvor abgespeicherte Bézierkurven (s.u.) an, in die die aktuelle Kurve umgewandelt werden kann.
  • Export As Shape – exportiert die Bézierkurve unter einem frei wählbaren Namen. Die abgespeicherte Kurve kann so als Vorlage in anderen Szenen verwendet werden (s.o. Convert to)
  • Global Points – listet alle Punkte und Controller (Anfasser) der Bézierkurve auf. Befindet sich die Kurve im EditModus, können die Werte auch direkt innerhalb der Liste manipuliert werden. Mehr zu Bézierkurven hier.

 

 

Text Properties

Um den Inhalt einer Textbox als Ganzes oder auch nur Teile des Textes zu bearbeiten, bieten die Text Properties zahlreiche Möglichkeiten:

  • Block Transformations ermöglichen das horizontale und vertikale Verrücken eines ausgewählten Textabschnitts. Mit der Checkbox Impacts Following werden die Einrückungen von Wort zu Wort (des markierten Textes) übertragen.
  • Scrollbar settings bestimmen das Aussehen des Rollbalkens (dieser taucht automatisch auf, wenn die Textmenge die Ausmaße der Textbox übersteigt).

Es folgen die üblichen Einstellungsmöglichkeiten für Schriftart, -größe, -farbe, -ausrichtung, Zeilenhöhe usw. Diese Einstellungen können als Grundeinstellung gespeichert (Save As Defaults) oder durch die gespeicherten Grundeinstellungen ersetzt werden (Load Defaults). Auf diese Art können Sie einmal gemachte Formatierungen speichern und immer wieder auf andere Texte in anderen Szenen übertragen. Angewendet werden diese beiden Befehle aber immer nur auf markierte Textabschnitte!

 

 

Text Blade Properties

Wurde einer Szene eine Text Blade – also ein hineinschiebbares Textfeld – hinzugefügt, tauchen im Object Inspector zusätzlich zu den Text Properties noch Einstellungen für die Text Blade selbst auf:

  • Blade Height (Bereich zwischen 20 und 70%) – wie hoch soll die Text Blade relativ zur Bühnenhöhe sein; dieser Wert korrespondiert mit dem Anfasser am unteren Text Blade-Rand,
  • Scene Movement – um wieviel Prozent wird die Bühne bei Auftauchen des Textfeldes nach oben verschoben. Bei einem Wert 0 würde die Text Blade den unteren Bereich der Bühne einfach überdecken; wenn das nicht gewollt ist, kann prozentual eingestellt werden, wie weit sich das Bühnenbild nach oben hinausschiebt.
  • Fill Unit Width und Fill Unit Height – wie nah soll das eigentliche Textfeld am seitlichen bzw. oberen Rand der Text Blade liegen.

 

 

Im Animations Inspector verwalten und bearbeiten Sie die Animationen dieses Objekts.

Der Animations Inspector ist der Ort, an dem Animationen eines Objekts erzeugt, konfiguriert und verwaltet werden. Sind bereits Animationen für ein Objekt vorhanden, erscheinen diese am oberen Rand in einer Liste. Jede Animation wird mit einem Vorschau-Icon des Objekts, dem Namen der Animation, der Abspieldauer sowie dem Namen des Objekts angezeigt. Links neben dem Icon bietet eine Checkbox die Möglichkeit, die Animation zu einer Startanimation zu machen. Als solche läuft sie selbstständig ab, sobald die Szene startet; sie ist unabhängig von auslösenden Elementen (Buttons) und kann nicht angesteuert werden (Start, Stop, Pause, …). Darüberhinaus wird in einer weiteren Spalte der Pinning-Status der Animation in Form einer kleinen Pin-Nadel angezeigt bzw. kann dort geändert werden (s.u.).

 

 

In der Animations List werden außerdem neue Animationen definiert (+ Symbol), vorhandene bei Bedarf gelöscht (– Symbol) oder ganze Animationen kopiert und auf andere Objekte übertragen (umrandetes + Symbol rechts sowie das danebenstehende Pfeilsymbol). Letzteres funktioniert auch szenenübergreifend; Sie können also beispielsweise die Animation eines Balls (Herunterfallen, springen, rollen, …) aus Szene A auf einen Hut in Szene B kopieren, der dann genau die gleichen Bewegungsabläufe, Rotationen, Skalierungen etc. macht wie der Ball aus Szene A. Was dabei kopiert wird, sind im wesentlichen Werte für die Eigenschaften (Object Properties) zu festgelegten Zeitpunkten (Keyframes) sowie die Einstellungen für Dauer, Wiederholungen etc., die Sie im Animations Inspector vornehmen. Natürlich können beide Animationen nachträglich unabhängig voneinander verändert werden.

 

Einstellungen für eine Animation festlegen

Wird eine neue Animation erzeugt oder eine vorhandene markiert, öffnet sich im Bühnenbereich automatisch die zugehörige Zeitleiste (Timeline) und das Objekt wird im Startzustand der Animation angezeigt. Je nach Fenstergröße kann es sein, dass die Timeline nur als relativ schmaler Streifen angezeigt wird, sie lässt sich aber nach unten hin vergrößern. (Die Timeline kann auch unabhängig von Animationen eingeblendet werden, indem Sie oberhalb der Arbeitsfläche den Button Animator betätigen. Ist keine Animation ausgewählt, wird der Animator-Bereich leer angezeigt.)

Im Animator wird die eigentliche Animation des Objekts vorgenommen: Mittels Keys werden an festgelegten Punkten in der Timeline Einstellungen wie Position, Rotation, Skalierung und Deckkraft verändert, die Zwischenwerte errechnet TigerCreate. Genaueres zur Erstellung von Animationen finden Sie hier.

Im Animations Inspector werden dagegen die grundlegenden Einstellungen für eine Animation definiert.

Die Einstellungen im Einzelnen:

  • Name:

Um bei vielen Animationen den Überblick zu behalten, vergeben Sie für jede Animation gleich einen sinnvollen Namen – „Frosch hüpft“ ist unter vielen anderen Animationen leichter zu finden als „Untitled 3“.

  •  Pinning Group:

Animationen, die ‚gepinnt‘ sind – deren Pinning-Status aktiviert ist – werden im Editor-Modus abgespielt, wenn der Slider (Positionsanzeiger) in der Timeline bewegt wird. Normalerweise bezieht sich das Abspielen der Timeline nur auf die gerade aktive Animation. Indem Sie eine Animation ‚pinnen‘, wird sie in einen ‚aktiven‘ Status versetzt. Auf diese Weise ist es möglich, im Editor-Modus Animationen mehrerer Objekte gleichzeitig abzuspielen (Genaueres dazu siehe unter Timeline bzw. Arbeiten mit Animationen). Um bei vielen Animationen besser und einfacher zu agieren, können gepinnte Animationen zusammengefasst werden in einer sogenannten Pinning Group.

An dieser Stelle im Animations Inspector können Sie eine neue Pinning Group definieren, indem Sie auf das Zahnrad-Icon (links) klicken und im dann erscheinenden PopUp auf das + Zeichen. Existieren bereits Pinning Groups, können Sie über das Select-Menü für jede Animation eine Pinning Group zuordnen. Diese Animation wird dann im Editor-Modus immer gemeinsam mit den übrigen Animationen dieser Gruppe abgespielt.

 

 

  • Number Of Frames:

Über wie viele Frames (Bilder) soll die Animation laufen – je kleiner der Wert desto gröber können Änderungen wirken.

  • Loop Time:

Wie viele Sekunden soll die Animation dauern, wenn sie genau ein mal läuft?

__________

Achtung: Number Of Frames und Loop Time sind mit einem Schloss-Symbol miteinander verbunden. Dieses Schloss kann durch Klicken geschlossen und wieder geöffnet werden.

Im geöffneten Zustand sind die beiden Eigenschaften unabhängig voneinander einzustellen – erhöht man die Number Of Frames z.B. von 30 auf 60, ändert sich die Loop Time nicht; die Animation würde nun innerhalb der eingestellten Loop Time doppelt so viele Bilder durchlaufen, also schneller werden.

Bei geschlossenem Schloss sind beide Eigenschaften miteinander verknüpft – eine Verdopplung der Anzahl Frames bewirkt auch eine doppelt so lange Loop Time; die Geschwindigkeit bleibt dieselbe, die Animation dauert aber länger.

__________

  • Loops:

Wie oft soll sie wiederholt werden?

  • Ping Pong:

Soll die Animation nach Erreichen des Endpunkts rückwärts laufen (Ping Pong) oder von vorne starten? Achtung – dazu muss die Anzahl Loops > 1 sein!

  • Delay Time:

Soll die Animation unmittelbar starten (0) oder erst nach einer kurzen Pause (in Sekunden)?

  • Total Time:

Aus den vorherigen Einstellungen ergibt sich die Gesamtdauer der Animation – soll eine Animation über 30 Frames laufen, dafür je 2 Sekunden benötigen, aber 3 mal wiederholt werden, ergibt das eine Gesamtdauer von 2 x 3 = 6 Sekunden.

  • Follow Path:

Sie können eine Animation entlang einer Bézierkurve laufen lassen; der Flug eines Vogels oder Schmetterlings oder die Flugkurve bei einem Wurf sehen dadurch realistischer aus. Wählen Sie dazu aus dem PopUp-Menü eine Bézierkurve aus (angezeigt werden allerdings nur Bézierkurven, die sich in der aktuellen Szene befinden).

  • Drag Along:

In diesem Fall findet die Animation sukzessive in Abhängigkeit vom User statt. Das Objekt kann ‚angefasst’ und auf der als Animation definierten Strecke oder entlang eines Pfades vor und rück bewegt werden. Es bleibt auf der Stelle und unverändert, sobald es ‚losgelassen‘ wird. Rotation, Skalierung und Deckkraft verändern sich abhängig vom Fortschritt der Animation auf der Strecke genau wie bei einer selbstständig ablaufenden Animation. Die Geschwindigkeit der Bewegung ist bei Drag Along unabhängig von der eingestellten Loop Time (s.o.)., sie ist programmseitig festgelegt. Die Option Loops (Anzahl der Durchläufe, s.o.) ist in diesem Modus inaktiv.

 

 

__________

Achtung:

Drag Along setzt voraus, dass die Animation als Startanimation (s.o.) deklariert ist oder dass andernfalls das zu bewegende Objekt ein Touch Event hat! Das bedeutet, Sie müssen im Object Inspector Has Touch Event für das Objekt aktivieren und die entsprechende Animation damit verknüpfen.

Eine eventuell zuvor eingestellte Delay Time (s.o.) sollten Sie vor der Aktivierung von Drag Along auf 0 zurücksetzen!

__________

 

  •  Free Drag:

Dies setzt die per Timeline im Animator Modus erstellte Animation außer Kraft (die Timeline zeigt keine editierbaren Eigenschaften mehr). Stattdessen können Sie unter Limit Movement ein Rechteck oder einen Kreis definieren, innerhalb dessen sich das Objekt durch den User frei bewegen lässt.

Im Falle eines Rechtecks legen Sie fest, wie weit sich das Objekt vom Ausgangspunkt nach oben, rechts, unten und links bewegen lässt, im Extremfall also über die komplette Bühne. Bei einem Kreis bestimmen Sie den Radius desselben (Max Radius).

Mit Min Pinch Scale und Max Pinch Scale lassen sich Unter- und Obergrenzen für eine Skalierung des Objekts festlegen. Halten Sie im Preview Modus den Mauszeiger über das Objekt und scrollen Sie, um das Objekt mit einer Art Zoom zu skalieren.

Um Free Drag nutzen zu können, muss eine Animation als Startanimation (s.o.) deklariert sein. Setzen Sie auch hier Delay Time auf 0, ehe Sie Free Drag auswählen.

 

 

  • Is Scratchable:

Mit dieser Funktion lässt sich ein Objekt ‚radierbar‘ machen. Der User kann durch drüberrubbeln das Objekt Stück für Stück löschen. Dazu kann die Größe der Radierfläche eingestellt werden (Brush Size) sowie ein Schwellenwert, bei welchem Prozentsatz das Objekt als ‚ausradiert‘ gelten soll und verschwindet (Complete). Prinzipiell ist es zwar möglich, ein solches Objekt zusätzlich zu animieren – also z.B. als Startanimation langsam über die Bühne zu bewegen. In den meisten Fällen dürfte dies aber wenig sinnvoll sein.

Sinnvoll eingesetzt ist diese Scratch-Funktion zum Beispiel dann, wenn Sie etwas hinter einem Objekt verbergen und das vorne liegende Objekt durch Rubbeln entfernen wollen.

 

__________

Achtung: Während einer Scratch-Animation werden normale Touch Events ignoriert!

Ist eine Animation auf mehrere Durchläufe gestellt (Loops > 1), wird jedesmal zu Beginn der Animation das bereits Gelöschte wiederhergestellt.

__________

  •  Animation Sounds:

Dies ist eine weitere Möglichkeit eine Animation mit Sound zu verknüpfen, die andere ist die Verknüpfung über ein Touch Event. Während eine Animation theoretisch aber über mehrere Touch Events und entsprechend mit verschiedenen Sounds gestartet werden kann, wird ein Sound, den Sie über den Animations Inspector an eine Animation binden, immer abgespielt, wenn die Animation gestartet wird, auch wenn per Touch Event ein weiterer Sound eingebunden wird.

 

 

Ziehen Sie einen oder mehrere Sounds nacheinander aus dem Project Navigator oder direkt aus dem Finder in das Feld unterhalb von Animation Sounds. Werden mehrere Sounds verknüpft, werden diese gleichzeitig abgespielt, nicht nacheinander! Über das – Symbol am unteren Ende der Animation Sounds-Liste kann ein verknüpfter Sound aus der Liste entfernt und damit von der Animation gelöst werden. Mit dem umrandeten + Icon rechts lassen sich die verknüpften Sounds inklusive der Einstellungen kopieren und auf eine andere Animation übertragen.

Mithilfe der bei Auswahl eines Sounds erscheinenden Optionen können Sie jeden Sound konfigurieren:

  • Audio Delay Time setzt eine Verzögerungszeit (in Sekunden), ehe der Sound startet
  • Start Time bestimmt, ob der Sound selbst vom Beginn gestartet wird oder erst ab einem bestimmten Punkt mittendrin
  • End Time bestimmt entsprechend, ob der Sound bis zum Ende gespielt wird oder früher endet.
  • Trimmed Audio zeigt die Gesamtabspieldauer eines markierten Sounds sowie darunter eine visuelle Vorschau bzw. die Möglichkeit zum Probehören. (Achtung: Eine eingestellte Delay Time wird in der Trimmed Audio-Zeit nicht mitangezeigt!)

__________

Achtung: Ob ein Sound vollständig bis zum Ende abgespielt wird bzw. so lange, wie von Ihnen per Delay, Start und End Time konfiguriert, hängt auch vor allem von der oben angegebenen Loop Time der Animation ab, also der Zeit, die die Animation benötigt um einmal komplett abgespielt zu werden. Beträgt die Loop Time beispielsweise 4 sec, wird auch ein Sound nach spätestens 4 sec beendet. Ist unter Loops für die Animation eine höhere Anzahl von Wiederholungen eingestellt, wird der Sound bei jedem Loop-Beginn neu gestartet. Anders verhält es sich, wenn zusätzlich noch die Option Ping Pong aktiviert wurde, dann läuft der Sound so lange bis der Ausgangspunkt der Animation wieder erreicht wurde (also doppelt so lang wie bei einem einzelnen Durchlauf) und startet erst dann wieder neu.

__________

Einstellungen für Textboxen

Eine Besonderheit ergibt sich im Animations Inspector, wenn das ausgewählte Objekt eine Textbox ist. Nicht nur, dass Sie in TigerCreate 2 selbstverständlich auch Textboxen animieren können (bewegen, ein- ausblenden, etc.). Im Animations Inspector kann über eine Animation eine Textbox mit einem Sprecher-Sound und entsprechenden Wordhighligh-Daten verknüpft werden:

Egal ob Sie die Textbox tatsächlich noch animieren möchten – definieren Sie eine neue Animation. Im unteren Bereich des Animations Inspectors erscheinen folgende Optionen:

  • Speech Sound: Verknüpfen Sie hier einen Sprecher-Sound (also eine Sprecherstimme, die den Text vorliest) mit der Textbox, indem Sie aus dem Project Navigator oder aus dem Finder eine Sounddatei (MP3) in das Feld ziehen. In der dann aufklappenden Voransicht der Soundkurve können Sie die Lautstärke (Volume) einstellen und den Sound probehören.
  • Highlight Color: Wählen Sie hier die Farbe aus, in der das jeweils vorgelesene Wort in der Textbox hervorgehoben wird.
  • Next Speech: Verwenden Sie in einer Szene mehrere Textboxen und verwenden diese Sprechersound und Word Highlighting, dann kann zuerst der eine Sprechersound abgespielt werden, und über Next Speech wird der nächste verlinkt. Dieser wird abgespielt, wenn die erste Textbox fertig ist.
  • Import Highlight Data: Wählen Sie hierüber eine (Text-)Datei aus, die bereits die Daten für das Word Highlighting enthält und importieren Sie sie. Das ist zum Beispiel möglich, wenn in einer anderen Datei für diesen Text und den verknüpften Sound Highlight-Daten erstellt und exportiert wurden.
  • Export Highlight Data: Haben Sie in einer Szene Highlighting-Keys für einen Text und seinen verknüpften Sprechersound erstellt, können Sie diese Daten über diesen Button als Textdatei exportieren, zum Beispiel um sie in einer anderen Szene auf den gleichen Text anzuwenden. Zum Verfahren, wie Daten für das Word Highlighting erstellt werden, siehe Word Highlighting.

 

 

Im Scene Inspector hingegen nehmen Sie Einstellungen für die ganze Szene vor.

Der Scene Inspector ist unterteilt in 5 Abschnitte, die unterschiedliche Bereiche einer Szene beeinflussen.

Scene Generic Properties

 

 

Im obersten Abschnitt des Scene Inspectors legen Sie fest, …

  • ob die aktuelle Szene den 3D-Modus unterstützen soll. Dieser Modus erlaubt Ihnen weitere Möglichkeiten Objekte zu animieren und räumliche Tiefe zu nutzen. Weitere Informationen dazu finden Sie in einem eingeblendeten Text nach Aktivierung der Checkbox sowie hier.
  • ob die Szene ein Hintergrundbild hat oder eine Volltonfarbe. Um ein Hintergrundbild zu verwenden, ziehen Sie ein formatfüllendes Bild (Format PNG ohne Transparenz*) aus dem Project Navigator oder direkt aus dem Projektordner im Finder in das Feld neben Background Image. Alternativ klicken Sie mit der rechten Maustaste in das Feld und wählen Sie per „Select File“-Menü.

Nur wenn kein Hintergrundbild zugeordnet ist, wird ein Farbfeld Background Color für die Hintergrundfarbe angezeigt. Per Klick in das Feld haben Sie Zugriff auf verschiedene Farbauswahl-Systeme.

*Es empfiehlt sich, Bilddateien möglichst klein zu rechnen, um die Ladezeiten für Szenen gering zu halten. Mit Tools wie beispielsweise pnggauntlet.com oder tinypng.com können insbesondere PNG-Grafiken stark verkleinert werden, ohne dass sie an Qualität verlieren. Aufgrund der Größe der Hintergrundbilder ist dies unbedingt empfehlenswert.

 

Scene Screenshot Properties

Jede Szene benötigt eine Voransicht, die die Szene repräsentiert, zum Beispiel einen Screenshot. Es kann sich um den Ausgangszustand der Szene handeln oder um einen bestimmten Punkt im Ablauf der Szene. Für jede Sprachversion muss ein eigener Screenshot existieren.

Sie haben folgende Möglichkeiten:

  • Ziehen Sie aus dem Project Navigator oder direkt aus dem Projektordner im Finder ein Bild (Format JPG) in das Screenshot-Feld; beachten Sie dabei bitte die unterschiedlichen Namen für sprachabhängige Dateien.
  • Erstellen Sie mit dem Button Create From View einen Screenshot vom aktuellen Zustand der Szene.

Schalten Sie anschließend innerhalb der Szene um auf eine andere Sprache und wiederholen Sie den Vorgang für jede Sprache. Im Scene Inspector wird Ihnen angezeigt, wenn für eine Sprache noch kein Bild angelegt wurde.

Sie haben die Möglichkeit das erstellte Screenshot-Bild nachzubearbeiten und erneut zu laden. Ziehen Sie dazu das entstandene Bild (ein JPG von 510 x 384 Pixel) auf den Finder und editieren Sie es in einem Bildbearbeitungsprogramm.

Über die Checkbox Display in Thumbnail bar können Sie beeinflussen, ob das Vorabbild einer Szene später in der Navigationsleiste des E-Books angezeigt wird, um die Szene direkt ansteuern zu können. Standardmäßig ist dies der Fall, möglicherweise gibt es aber einen guten Grund, einzelne Szenen nicht dort anzuzeigen.

 

 

Scene Sounds Properties

Legen Sie hier fest, welcher Sound als Hintergrundgeräuschkulisse ablaufen soll (Ambient Sound). Ziehen Sie dazu eine Sound-Datei aus dem Project Navigator in das längliche Feld.

Anschließend sehen Sie eine Voransicht der Soundkurve, haben die Möglichkeit ihn probezuhören und können die Lautstärke für diesen Sound gesondert festlegen. Günstigerweise wählen Sie als Hintergrundgeräusch einen mindestens 30-sekündigen Sound, der so endet, dass kein Bruch zu hören ist, wenn der Sound endlos wiederholt wird.

 

 

Die Funktion See All Sounds zeigt ein Übersichts-Fenster mit allen in der Szene verwendeten Sounds. Angezeigt wird der Name des Sounds, wie er im Finder angelegt ist, dazu das Objekt, mit dem er verknüpft ist, sowie die Art der Verknüpfung – also als Animations-Sound oder als Touch Event-Sound.

 

 

Scene Start Animations Properties

Mit der einzigen Option Use Different Animations per Language haben Sie hier die Möglichkeit unterschiedlichen Sprachversionen einer Szene unterschiedliche Animationen zuzuordnen. Das erweitert das Spektrum sprachrelevanter Unterscheidungen noch einmal. Ohnehin besteht ja die Möglichkeit sprachabhängig unterschiedliche Texte, Sounds (Sprecher wie Geräusche) und Bilder (z.B. die Schrift auf einem Schild oder das Aussehen eines Polizeiautos etc.) zu verwenden(siehe Mehrsprachige Projekte). Nun können Sie darüberhinaus auch verschiedene Startanimationen verwenden:

Beim Öffnen des Scene Inspectors werden alle vorhandenen Startanimationen (also Animationen, die selbstständig – ohne ein Touch Event – starten) in Form einer Liste angezeigt. Nach Aktivierung der Checkbox wird diese Liste zunächst geleert, alle Animationen bleiben aber erhalten! Es wird lediglich der Zustand für die gerade aktive Sprache angezeigt und der ist per default zunächst leer. Wählen Sie über das + Symbol eine oder mehrere Startanimationen für die gerade eingestellte Sprache aus. Wechseln Sie anschließend die Sprache und ordnen Sie nun erneut Startanimationen zu.

Es ist möglich ein und dieselbe Animation mehreren Sprachen zuzuordnen; vielleicht verwenden Sie in der Szene insgesamt drei Startanimationen, von denen eine aber in jeder Sprache gleich sein soll. Ordnen Sie diese dann auch jeder Sprache zu.

 

 

Achtung: Über das + Symbol erhalten Sie Zugriff auf alle(!) Animationen der Szene, also auch auf abhängige Animationen. Nehmen Sie eine abhängige Animation in die Liste der Startanimationen einer Sprache auf, wird diese Animation zusätzlich auch zur Startanimation (für die jeweilige Sprache) gemacht, ein zugeordnetes Touch Event bleibt aber erhalten. Beim Start der Szene wird also auch diese Animation automatisch abgespielt mit den Einstellungen aus dem Animations Inspector; anschließend kann man sie über die zuvor definierten Touch Events erneut starten.

Diesen kleinen ‚Trick‘ können Sie nutzen, wenn Sie zwei unterschiedliche Animationen desselben Objekts verschiedenen Sprachen zuordnen wollen (Beispiel: in Sprache A soll ein Frosch nach links aus dem Bild hüpfen, in Sprache B nach rechts): Legen Sie die eine als Startanimation an, die zweite als normale Animation. Durch die Zuordnung zu verschiedenen Sprachen werden beide zu Startanimationen in der jeweiligen Sprachversion.

 

Scene Augmented Reality Properties

Im diesem Bereich gibt es nur eine einzige Option, die die Nutzung von Augmented Reality in der aktuellen Szene erlaubt. Augmented Reality, also eine „erweiterte Realität“, ermöglicht es – vereinfacht gesagt –, durch eine Kombination aus E-Book und Kamera die Umgebung (z.B. das Originalbuch) ‚zum Leben zu erwecken‘.

Der hinter dem Fragezeichen-Symbol aufpoppende Text weist auf die benötigten AR-Daten hin, die im „ar“-Ordner im Projektordner abgelegt werden müssen.

 

 

Wenn Sie die Checkbox aktivieren, erklärt ein weiterer Text das genauere Vorgehen, um AR in einer Szene nutzen zu können: Sie benötigen ein sogenanntes Target, also ein definiertes Ziel, über dem die Szene räumlich animiert wird. Dieses Target Image muss in einem vorgegebenen Format angelegt und letztlich innerhalb einer Datenbank (Vuforia) verwaltet werden. Genaueres dazu hier.

Nach Aktivierung der AR-Option erscheinen Hinweise auf die noch fehlenden AR-Daten im Projektordner sowie ein Feld, in dem Sie per Drag & Drop oder über die rechte Maustaste („Select File“) das erwähnte Target Image zuweisen können.

 

 

Scene Navigation Properties

An dieser Stelle können Sie die generellen Einstellungen, die in den Project Settings gemacht oder bestätigt wurden, für eine einzelne Szene ändern. Das kann zum Beispiel sinnvoll sein, wenn die Szene nicht Teil eines linearen Erzählstrangs mit Vor- und Zurückblättern ist, sondern Ausgangspunkt für mehrere, unterschiedliche Erzählstränge. Die Navigation zu anderen Szenen könnte dann eventuell über Touch Events auf einzelnen Objekten erfolgen.

Voreingestellt ist Use Project Navigation Options, damit erscheinen die Navigationselemente so, wie sie in den Project Settings festgelegt wurden. Deaktivieren Sie diese Checkbox, um einzeln zu entscheiden, ob Buttons für das Zurück- bzw. Vorblättern angezeigt werden sollen (Show Previous Scene Navig. Button) und mit welcher Art Übergang (Transition) der Sprung zur vorherigen bzw. nächsten Szene erfolgen soll. Beim Übergangseffekt wählen Sie zwischen No Value (ohne Effekt), Move (Heraus- bzw. Hereinschieben) Fade (Ausblenden, Einblenden) und Page Curl (Umblättern). Entscheiden Sie sich für einen Effekt, erscheinen weitere Optionen, z.B. die Dauer des Übergangs in Sekunden.

 

 

Scene Skinning Properties

Hier können Sie das Aussehen der Navigationselemente unabhängig von den generellen Einstellungen (Project Settings) für die aktuelle Szene ändern.

 

 

Navigation Buttons Skinning

Hier werden die aktuell eingestellten Symbole für die Navigationselemente angezeigt. Wollen Sie eigene Icons verwenden, legen Sie diese im Ordner UIAssets im Projektordner ab. Um ein Symbol zu ändern, klicken Sie entweder mit der rechten Maustaste hinein und wählen Sie „Select File…“ oder ziehen Sie ein passendes Bild direkt aus dem Project Navigator/UIAssets oder aus Projektordner/UIAssets im Finder auf das Feld. Das Bildsymbol sollte zwischen 160 x 160 und 256 x 256 Pixel groß sein und als transparentes PNG vorliegen.

Die Änderungen, die Sie hier vornehmen, gelten nur für diese Szene. Wollen Sie ein geändertes Symbolbild aber auf alle Szenen anwenden, klicken Sie auf Make Default. Damit überschreiben Sie die vorhandenen Einstellungen in den Project Settings, das getauschte Symbol taucht nun in allen Szenen auf, die keine individuellen Einstellungen haben.

Eigene Bilder, die Sie so als Navigationselemente verwenden, werden mit der jeweiligen Szene verknüpft. Ändern oder überschreiben Sie also das externe Bild, ändert es sich automatisch auch in allen Szenen, mit denen es verknüpft ist.

 

Text Blade Skinning

Hier gilt dasselbe Prinzip wie für die Navigation Buttons (s.o.); aber hier beeinflussen Sie das Aussehen des Text Blade-Feldes, das bezieht sich auf die ‚Lasche‘, die permanent am unteren Rand der Szene auftaucht (also ‚Open‘ und ‚Close‘-Button), und auf den Hintergrund, auf dem die (transparente) Textbox angezeigt wird. Beachten Sie bei Änderung des Hintergrunds, dass ggf. die Schriftfarbe in der Textbox angepasst werden sollte.

Über Make Default lassen sich auch diese Änderungen auf alle Standardszenen übertragen, die Project Settings werden dadurch aktualisiert.

Back To Top

Bühne und Arbeitsfläche

Alles Sichtbare in einer Szene spielt sich auf der Bühne ab – dem Raum, den die Szene im fertigen E-Book einnimmt. Die Größe bzw. Ausrichtung der Bühne wird für alle Szenen gemeinsam in den Project Settings (s.o.) eingestellt. Unterscheiden Sie bitte einerseits die Bühne als das Rechteck, das im fertigen E-Book zu sehen ist und vom Hintergrundbild eingenommen wird. Andererseits gibt es während des Produktionsprozesses noch die Arbeitsfläche, die über die Bühne hinausgeht und durch den grauen Hintergrund und das Raster gekennzeichnet ist. Alles was sich dort befindet, ist zwar auf der Bühne (noch) nicht zu sehen, befindet sich aber in der Szene – nur außerhalb des sichtbaren (Bühnen-)Bereichs. Das wird dann wichtig, wenn ein Objekt erst zeitlich verzögert in einer Szene erscheint (z.B. ein Auto fährt hinein) oder irgendwann die Szene verlässt (Auto fährt hinaus).

 

 

Mit Hilfe der Maus (Scrollen bzw. Schieben) zoomen Sie die Bühnenansicht größer oder kleiner. Die gedrückte rechte Maustaste erlaubt ein Verschieben des sichtbaren Ausschnitts. Über den Button Options (s.o.) oberhalb der Arbeitsfläche können Sie das Hintergrundraster in Größe und Darstellung, sowie das Verhalten von Objekten am Raster (Ausrichtung) beeinflussen.

Ein Teil der Bühnenfläche wird von einem verschiebbaren türkisfarbenen Rechteck umrandet. Während die Bühne im 4:3-Format angelegt ist, repräsentiert das kleinere Rechteck den sichtbaren Bereich auf 16:9 Geräten. Durch Verschieben des kleineren Rechtecks lässt sich in jeder Szene festlegen, welcher Teil garantiert zu sehen ist (Safety Zone).

Der Rand der Bühne wird in der Editor-Ansicht zusätzlich durch eine dünne graue Linie markiert, die über allen Objekten liegt, sodass jederzeit auch bei größeren Bildern, die nur zum Teil im Bühnenbereich liegen, erkennbar ist, welcher Teil sich tatsächlich innerhalb der Bühne befindet.

 

 

Vorne und hinten auf der Bühne

Grundsätzlich besteht eine Szene immer aus Hintergrund und Vordergrund. Der Hintergrund wird durch ein Bild im PNG-Format dargestellt, das über den Scene Inspector ausgewählt wird und ausgetauscht werden kann. Dieses Hintergrundbild liegt auf der Bühne fest, kann also nicht verschoben, skaliert oder rotiert werden.

Alle anderen Objekte, die Sie in einer Szene verwenden, liegen ‚über’ bzw. ‚vor‘ dem Hintergrundbild, bilden somit den Vordergrund. Der Vordergrund besteht aus unterschiedlichen Ebenen der Anordnung – es gibt ein „weiter vorne“ und ein „weiter hinten“.

Ziehen Sie nacheinander mehrere Objekte in eine Szene, sortiert TigerCreate die Objekte zunächst alphabetisch. Das bedeutet, sowohl im Scene Navigator (linke Leiste) als auch auf der Bühne liegt ein Objekt mit dem Namen „Ball“ hinter einem Objekt mit dem Namen „Stein“, egal was zuerst platziert wurde. Diese Reihenfolge ändert sich auch nicht, wenn sie dem Objekt „Ball“ nachträglich einen anderen Namen geben (Unique Name im Object Inspector).

Die gängige Methode zur Bestimmung der räumlichen Anordnung vorne–hinten ist die sogenannte Local Order, die Sie für jedes Objekt im Bereich Generic Properties des Object Inspectors einstellen können. Über die Höhe des Local Order-Wertes bestimmen Sie, was auf der Bühne weiter vorne liegt (höherer Wert) und was weiter hinten. Beim Import von Objekten ist zunächst Local Order = 0, deshalb gilt die alphabetische Reihenfolge. Ändern Sie den Local Order-Wert eines Objekts, so verändert sich automatisch auch seine Position innerhalb des Scene Navigators: Je weiter unten ein Asset dort angezeigt wird, desto ‚höher‘ liegt es auf der Bühne. Bei Objekten mit dem gleichen Local Order-Wert bestimmt die alphabetische Reihenfolge innerhalb des Scene Navigators, welches Objekt weiter vorne liegt.

Ausnahmen bilden Text Blades, für die sich kein Local Order-Wert einstellen lässt; sie liegen sinnvollerweise immer oberhalb anderer Objekte.

 

 

Objekte, die auf der Bühne liegen, können Sie verschieben, rotieren, in der Deckkraft verändern und skalieren. Diese Veränderungen können entweder über Eingabefelder im Bereich Default bzw. Key Transformation Properties des Object Inspectors stattfinden oder direkt am Objekt auf der Bühne vorgenommen werden (mit Ausnahme der Deckkraft). Um ein Objekt auf der Bühne proportional zu skalieren, halten Sie die SHIFT-Taste gedrückt, während Sie an einem der Anfasser des Rechtecks, das die Objektbegrenzungen anzeigt, ziehen.

Back To Top

Arbeiten mit TigerCreate 2.0

Arbeiten mit Animationen

Im Lateinischen bedeutet animare unter anderem „beseelen“ im Sinne von Leben einhauchen, beleben. Ganz so weit wollen wir hier nicht gehen, aber die Richtung stimmt schon. Einigen wir uns auf bewegen.

Mit Animation ist also zunächst eine Art von Bewegung gemeint:

  • Das kann eine lineare Bewegung zwischen zwei oder mehr Punkten sein, also eine Strecke, die von einem Asset (in der Regel ein Bild) zurückgelegt wird.
  • Diese Strecke könnte auch mit unterschiedlichem Tempo beginnen und enden, sodass entweder eine Beschleunigung oder ein Abbremsen stattfindet.
  • Wählt man nicht den direkten, kürzesten Weg von A nach B, sondern einen kurvigen, gewundenen, sprechen wir von einer Pfadanimation – ein Asset bewegt sich entlang eines Pfades.
  • Bleibt das Asset die ganze Zeit auf dem Ausgangspunkt, dreht es sich möglicherweise um die eigene Achse – sprechen wir von Rotation.
  • Auch die Änderung der Größe eines Assets, eine Skalierung, ist Animation. Verläuft die Skalierung nicht proportional, sprechen wir auch von Verzerrung.
  • Abgesehen von diesen Bewegungen könnte ein Asset auch nach und nach verblassen und schließlich ganz unsichtbar werden; umgekehrt könnte es langsam sichtbar werden. Beides entspricht letztlich nur einer Änderung der Deckkraft.

Was all diese Möglichkeiten gemeinsam haben, ist eine sichtbare Veränderung

Animationen sind immer an Objekte einer Szene gebunden, daher tauchen sie auch nicht als eigenständige Assets im Scene Navigator auf, sondern werden im Animations Inspector angelegt und verwaltet. Der Animations Inspector, den Sie in der rechten Seitenleiste finden, zeigt bei Auswahl bzw. Markierung eines Objekts entweder auf der Bühne oder im Scene Navigator alle Animationen, an denen das betreffende Objekt beteiligt ist.

 

 

Einfache Animationen

Im Prinzip läuft eine Animation nach folgendem Schema ab:

Objekt in die Szene importieren – im Animations Inspector eine neue Animation erzeugen – Länge, Geschwindigkeit und weitere Faktoren angeben – in der Timeline den Anfangszustand festlegen (Keyframe) – auf weiteren Keyframes Änderungen an Position, Rotation, Größe oder Deckkraft des Objekts vornehmen.
Das Ganze lässt sich an einem Beispiel und Schritt für Schritt besser betrachten. Hier soll ein Blatt von einem Baum herunterfallen.

  • Sowohl der Baum als auch das Blatt werden als Assets in die Szene importiert, das Blatt zunächst in die Baumkrone platziert.

 

 

  • Damit das Blatt weiter vorne liegt als der Baum, wird seine Local Order erhöht von 0 auf 1. Dies geschieht im oberen Bereich des Object Inspector. Der Wert für Local Order bestimmt, wie weit ein Objekt vor dem Hintergrund liegt. Je höher der Wert, desto weiter liegt es vorne. Beim Import von Assets ist Local Order = 0.

 

 

  • Das Blatt wird markiert, der Animations Inspector (rechte Leiste, mittleres Symbol) geöffnet und darin eine neue Animation erzeugt, die hier den Namen ‚FallingLeaf‘ bekommt.
  • Das Herunterfallen soll 4 sec dauern und dabei 100 Bilder (also 25 Bilder/sec) einnehmen.

 

 

___________

Achtung: Number Of Frames und Loop Time sind mit einem Schloss-Symbol miteinander verbunden. Dieses Schloss kann durch Klicken geschlossen und wieder geöffnet werden.

Im geöffneten Zustand sind die beiden Eigenschaften unabhängig voneinander einzustellen – erhöht man die Number Of Frames z.B. von 30 auf 60, ändert sich die Loop Time nicht; die Animation würde nun innerhalb der eingestellten Loop Time doppelt so viele Bilder durchlaufen, also schneller werden.

Bei geschlossenem Schloss sind beide Eigenschaften miteinander verknüpft – eine Verdopplung der Anzahl Frames bewirkt auch eine doppelt so lange Loop Time; die Geschwindigkeit bleibt dieselbe, die Animation dauert aber länger.

Wollen Sie also nachträglich die Dauer einer Animation verlängern, gilt es zu unterscheiden:

  • Erhöhen Sie nur die Number Of Frames, ohne die Loop Time zu verändern, dauert die Animation genauso lange wie zuvor, es werden aber mehr Frames abgespielt, sie wird also schneller.
  • Erhöhen Sie nur die Loop Time, dauert die Animation zwar länger, es werden aber nicht mehr Frames abgespielt. Die vorhandene Bewegung/Animation wird also nur langsamer.
  • Um die Dauer der Animation bei gleichbleibender Geschwindigkeit zu verlängern, weil Sie z.B. noch eine weitere Bewegung dranhängen wollen, verändern Sie also beides – Number of Frames und Loop Time – und dies am einfachsten, indem Sie das Schlosssymbol schließen und beide Werte aneinander koppeln.

___________

  • Sollte die Timeline noch nicht geöffnet sein, hilft ein Klick auf Animator (oberhalb der Arbeitsfläche). Ganz links aktiviert ein Klick auf den runden blauen Button den Record-Modus für die Timeline. Erst im Record-Modus können Sie Keys setzen und Veränderungen an Animationen vornehmen. Am unteren Ende des Animator-Fensters lässt sich per Scale Timeline die Ansicht so verändern, dass die ganze Animationslänge zu sehen ist.

 

  • Auf dem aktuellen Bild/Frame 1 (der transparente, rote Balken – Slider – zeigt die Position) werden sogenannte Keys für Position und Rotation gesetzt, um den aktuellen Zustand festzuhalten.
  • Weitere Keys werden auf Frame 100, also an das Ende der Animation gesetzt. In der Timeline zeigt eine Verbindungslinie zwischen den Keys auf Frame 1 und 100, dass dort eine Animation stattfinden könnte. Momentan würde sich bei Abspielen der Animation aber nichts tun, weil Anfangs- und Endzustand identisch sind.

 

 

  • Der Slider wird auf Frame 100 gesetzt (Klick in die Frame-Skala am oberen Rand), anschließend wird das Blatt in seine Endposition am Boden gebracht. Dazu gibt es mehrere Möglichkeiten:
  1. a) Direktes Verschieben auf der Bühne mithilfe der Maus
  2. b) Verschieben über die Tastatur mithilfe der Pfeiltasten, ggf. in größeren Schritten mit gedrückter Umschalt-Taste. Das ist in unserem Beispiel aber viel zu langwierig.
  3. c) Ändern der Werte über den Object Inspector: Im Bereich Key Transformation Properties sehen Sie für Position X- und Y-Werte. Da hier in erster Linie vertikal nach unten verschoben werden soll, ändern wir den Y-Wert um ca. 1.000 und schieben eventuell noch per Maus ein wenig nach.

 

 

  • Solange die Animation ‚FallingLeaf‘ markiert ist, lässt sich die bisherige Animation einfach testen, indem sie per Leertaste gestartet wird.
  • Um die Animation ein wenig lebendiger wirken zu lassen, werden zwischen Anfangs- und Endpunkt einige Keyframes erzeugt, auf denen sich das Blatt mehrfach seitlich bewegt und dabei um die eigene Achse rotiert. Dazu wird der Slider, also der rote Balken in der Timeline, per Klick in die Skala am oberen Rand jeweils 15 Frames weiter platziert, also auf die Frames 15, 30, 45, etc. Dort wird per Klick in die Zeilen für Position und Rotation jeweils ein weiterer Key gesetzt.

 

 

  • Nachdem alle Keys gesetzt sind, werden auf den einzelnen Keyframes (15, 30, 45 etc.) die Werte für Position und Rotation verändert – entweder von Hand, also per Maus, oder durch Änderung der Werte für Position (x) und Angle (z) im Object Inspector.

 

 

Startanimationen – Abhängige Animationen

  • Bei Start der Preview-Funktion, also der einfachsten TigerCreate-internen Testmöglichkeit, würde sich das Blatt nicht bewegen, da bisher nicht festgelegt ist, ob die Animation von alleine starten soll (eine sogenannte Startanimation) oder erst durch Auslösen eines Klicks (abhängige Animation).

Wir probieren beides aus und rufen erneut den Animations Inspector auf, wo die Animation ‚FallingLeaf‘ erzeugt wurde und verwaltet wird. Links von der Animation ist eine Checkbox zu sehen, über der ‚Start‘ steht. Ist diese Checkbox markiert, bedeutet das, dass die Animation von alleine startet. Normalerweise tut sie das, sobald die Szene und das betreffende Objekt geladen sind. Um das zu vermeiden, wird weiter unten bei Delay Time ein Wert von 5 Sekunden eingestellt. Das bedeutet, dass im Preview-Modus wie im späteren E-Book die Animation ‚FallingLeaf‘ erst 5 Sekunden nach Laden der Szene automatisch gestartet wird und genau einmal abläuft.

 

 

  • Soll die Animation hingegen nicht von selbst starten, ist ein auslösendes Element nötig, ein sogenanntes Touch Event. Dies lässt sich über den Object Inspector zuordnen, vorher sollten wir jedoch unterscheiden: Es gibt drei Möglichkeiten die Animation per Touch Event zu starten
  1. a) Das Touch Event liegt auf dem Objekt selbst. Wird es angeklickt, startet die zugeordnete Animation. Das wäre im Fall des Blattes unpraktisch; es ist sehr klein und im Baum selbst kaum auszumachen.
  2. b) Ein anderes Objekt erhält das Touch Event; zum Beispiel könnte bei Klick auf den Baum die Animation ‚FallingLeaf‘ gestartet werden. Einen Schritt weiter könnte der Baum selbst noch eine Animation bekommen – bei Klick bewegt er sich zunächst in sich, ehe das Blatt fallen soll. Dazu müssten zwei Animationen – Baumwackeln und fallendes Blatt – mit einem Objekt verknüpft werden. Genau das machen wir auch – aber anders.
  3. c) Es hat sich als eine gute Praxis bewährt, Touch Events nicht mit den bewegten Objekten selbst, also mit Bildern zu verknüpfen. Stattdessen wird ein sogenannter Node erzeugt und dorthin platziert, wo die Animation ausgelöst werden soll. Nodes sind rechteckige, transparente Objekte, die im späteren E-Book unsichtbar sind. (Nodes übernehmen u.a. die Schaltflächenfunktion, die in TigerCreate 1 die sog. Buttons übernommen hatten.).

 

Arbeiten mit Nodes als Schaltflächen

Nodes als Schaltflächen für Animationen einzusetzen, hat mehrere Vorteile.

  • Bei komplexen Szenen mit vielen Objekten und vielen Animationen wird es schnell unübersichtlich, wenn nachträglich an einer Szene Änderungen vorgenommen werden sollen und man erst mal herausfinden muss, welches Objekt welche Animation steuert. Wenn Sie das Prinzip beibehalten „jede Animation wird durch einen Node gesteuert; der Node erhält einen eindeutigen Namen“, ist es deutlich leichter den Überblick zu behalten.
  • Wenn ein Bildobjekt eine Animation steuert, zählt immer dessen umgebendes Rechteck als Schaltfläche. Im Fall des sehr hohen Baumes wäre das sehr unpraktisch, weil nicht nur ein Klick auf die Baumkrone die Animation starten würde, sondern genauso ein Klick auf den Baumstamm oder links und rechts daneben.
  • Viele Animationen sollen nur genau einmal ausgelöst werden können. Denken Sie an einen Apfel, der vom Baum fällt. Liegt er einmal unten, soll er nicht erneut angeklickt werden und herunterfallen. In solchen Fällen ist es hilfreich, wenn nicht das Objekt (Apfel) selbst sondern ein Node die Animation auslöst und anschließend mit einer eigenen Animation selbst aus dem Bühnenbereich entfernt wird. Eine alternative und simplere Vorgehensweise für diesen Fall finden Sie weiter unten in diesem Text beschrieben.

Zurück zum Beispiel. Der Baum soll eine eigene Animation erhalten, in der er sich ein wenig hin- und herbewegt, ehe das Blatt herunterfällt. Die Bewegung soll über eine minimale Rotation geschehen.

Wird ein Objekt markiert, zeigt TigerCreate den sogenannten Ankerpunkt an, der bei Import automatisch in der Mitte des umgebenden Rechtecks liegt. Um den Punkt herum liegt ein blauer Kreis, der für die Rotation zuständig ist. Würden wir den Baum in seinem Ausgangszustand rotieren, würde dies um den Ankerpunkt herum geschehen, der Baumstamm würde entsprechend mitrotieren, das sähe recht komisch aus.

 

 

  • Den Ankerpunkt verschieben wir mit der Maus an das untere Ende des Stamms, wo der Baum den Boden berührt.

 

 

  • Im Animations Inspector wird zunächst nichts angezeigt, weil der Baum selbst ja noch keine Animation besitzt. Wir erzeugen eine neue Animation, nennen diese ‚Tree‘, setzen die Länge auf 40 Frames und 2 Sekunden (Loop Time) und erhöhen die Anzahl Loops auf 2; die Animation soll also zweimal direkt nacheinander ablaufen. Bei Total Time sehen Sie, dass eine Gesamtzeit von 2 * 2 = 4 Sekunden angezeigt wird.

 

  • Da nur eine Rotation stattfinden soll, wird in der Timeline nur in der Zeile Rotation ein Key auf Frame 1 gesetzt, ein weiterer auf Frame 40, im letzten Bild soll wieder der Ausgangszustand gezeigt werden. Die Frames 8, 20 und 32 erhalten ebenfalls Keys.

 

 

  • Im Object Inspector kann die Rotation per Zahleneingabe in das Feld Angle eingestellt werden. Da nur eine minimale Rotation stattfinden soll, ist dies der bessere Weg als mit der Maus den blauen Kreis um den Ankerpunkt zu bewegen. Der Slider in der Timeline wird über die obenliegende Frameskala jeweils auf 8, 20 und 32 positioniert, die Keys erhalten über den Object Inspector die Werte 1, 359 und wieder 1. Es findet also nur eine Rotation um je 1 Grad nach links und rechts statt.

 

 

  • Im Edit Modus lässt sich eine einzelne Animation über Drücken der Leertaste starten und stoppen.
  • Unser Blatt liegt momentan ja vor dem Baum, wackelt also nicht mit. Der Einfachheit halber ändern wir also wieder den Local Order-Wert des Blatts im Object Inspector auf 0, damit es hinter dem Baum verschwindet. (Alternativ hätte natürlich die Local Order des Baums heraufgesetzt werden können.).
  • Über das + Symbol im Scene Navigator (links) wird ein Node erzeugt. Dieser bekommt im Object Inspector den Namen „Button_Tree“ und wird dann so verschoben und skaliert, dass er den größeren Teil der Baumkrone bedeckt.

 

 

  • Weiter unten im Object Inspector wird die Checkbox Has Touch Event markiert. Diesem Node sollen nun beide Animationen – ‚Tree‘ und ‚FallingLeaf‘ – zugeordnet werden. Dazu wenden wir zwei Verfahren an:
  • Über das + Symbol unterhalb des weißen Feldes wird ein PopUp-Menü aufgerufen. Dort werden alle Objekte aufgelistet, die animiert sind. Fahren Sie mit der Maus über ein Objekt, werden die zugehörigen Animationen angezeigt. Auf diese Weise fügen wir die Animation ‚FallingLeaf‘ hinzu.

 

 

  • Am unteren Rand der Animationsliste rechts das kleine Kettenglied-Icon, der Animation Pointer, lässt sich mit gedrückter Maus ziehen. Wo immer ein Objekt mit Animationen unter dem Mauszeiger liegt, egal ob auf der Bühne oder im Scene Navigator, erscheint eine Liste der dort vorhandenen Objekte und ihrer Animationen. Auf diese Art ziehen wir über den Baum und wählen die Animation ‚Tree‘, die nun ebenfalls in der Liste verknüpfter Animationen erscheint.

 

  • Zwei Dinge müssen noch berücksichtigt werden:
    • Ein Blatt kann in der Regel nur einmal vom Baum fallen. Bei jedem weiteren Klick auf den Baumwipfel würde die Animation aber neu gestartet. Um dies zu verhindern, wird für den Node bei den Touch Properties unter Mode die Option Start Once eingestellt. Dadurch wird jede verknüpfte Animation nur genau einmal ausgelöst.*

 

 

*Weitere mögliche Mode-Optionen für Touch Properties finden Sie im Bereich Object Inspector/Touch Properties beschrieben.

  • Zum zweiten ist die Animation ‚FallingLeaf’ noch als Startanimation deklariert, sie würde also auch ohne Klick auf den Node-Button gestartet. Also muss im Animations Inspector der Haken bei Start weggenommen werden. Bei dieser Gelegenheit setzen wir die Delay Time für ‚FallingLeaf‘ noch auf 4 statt 5 Sekunden, sodass diese Animation startet, wenn die Animation ‚Tree‘ endet.

Geschafft – bei Klick in die Baumkrone wackelt der Baum ein paar Sekunden hin und her, danach fällt ein Blatt langsam zu Boden.

_____

Achtung: Wollen Sie ein verschachteltes, aus mehreren Objekten bestehendes, Parent-Child-Objekt (siehe dort) ansteuern, ist es wichtig, dass Sie alle Animationen der enthaltenen Objekte, die abgespielt werden sollen, über die Touch Event-Liste mit dem auslösenden Node verknüpfen!

_____

 

Sonderfall überlappende Nodes

Nach Möglichkeit sollten Sie vermeiden, dass sich mehrere Nodes, die ein Touch Event haben, berühren bzw. überlappen. Wenn dies aus irgendeinem Grund doch nicht anders zu machen ist – z.B. weil Nodes immer rechteckig sind, Sie aber mehrere nahe beieinander liegende runde Objekte mit Nodes abdecken – beachten Sie Folgendes:

  • In 2D-Szenen wird das Touch Event ausgeführt, das zu dem Node mit dem höchsten Local Order-Wert gehört. (siehe dazu Object Inspector/Generic Properties).
  • In 3D-Szenen ist es das Touch Event, das zu dem Node mit der höchsten Z-Position gehört. In 3D-Szenen hat die Z-Position einen höheren Stellenwert als die Local Order! Nur wenn sich zwei Nodes mit gleicher Z-Position überlappen, kommt die Local Order ins Spiel; dann zählt auch hier der höhere Wert. Mehr dazu unter Einsatz von 3D.

 

Objekte mit mehreren Animationen

Im vorigen Beispiel hatten wir zwei Objekte mit je einer Animation, die durch ein drittes Objekt (den Node) gesteuert wurden. Es ist aber auch möglich, dass ein Objekt mehrere Animationen ausführen kann, die zu unterschiedlichen Zeitpunkten bzw. von unterschiedlichen Objekten angesprochen werden. In TigerCreate 1 mussten dazu verschiedene Abschnitte ein und derselben Zeitleiste angesteuert werden, in TigerCreate 2 bekommt jede Animation ihre eigene Zeitleiste mit eigenen Parametern wie Länge, Geschwindigkeit und Wiederholungszahl.

Wir nehmen ein einfaches Beispiel: Unsere Szene besteht aus einer stilisierten Blumenwiese. Eine Biene fliegt in die Szene hinein und verharrt über den Blumen. Wir erstellen drei Animationen der Biene, in denen sie verschiedene Blumen anfliegt und anschließend zum Ausgangspunkt zurückkehrt. Diese drei Animationen steuern wir über Nodes, die unsichtbar über den Blumen liegen.

 

 

  • Damit die Biene hereinfliegen kann, schieben wir sie zunächst nach rechts außerhalb der Bühne; dort liegt der Startpunkt für eine erste Animation der Biene – das Hereinfliegen soll automatisch geschehen, also als Startanimation.

Nachdem die Biene markiert wurde, wird im Animations Inspector über das + Symbol eine neue Animation erzeugt: Wir nennen sie „Start-Bee“, markieren die Checkbox für Start, damit die Animation selbstständig starten kann, und geben ihr eine Länge von 80 Frames bei einer Dauer von 4 Sekunden.

 

 

  • Im geöffneten Animator wird der Record Mode aktiviert, (der entsprechende Button und der Balken in der Timeline werden rot). Die Startposition rechts außen wird auf Frame 1 mit einem Key festgesetzt.
  • Wir scrollen ans Ende der Timeline, schieben den Slider dorthin und setzen auf den letzten Frame ebenfalls einen Key, verschieben anschließend auf diesem Frame die Biene ungefähr in die Mitte der Bühne über den Blumen.

Damit das Hereinfliegen etwas dynamischer wirkt, rufen wir mit einem Klick auf die untere Hälfte der Zeile Position in der Timeline die Steuerungsmöglichkeiten auf und wählen Ease Out – dadurch fliegt die Biene zügig herein und bremst am Ende ab (vermutlich weil sie die Blumen entdeckt hat 😉 )

 

 

  • Der Endpunkt dieser Startanimation soll nun Ausgangs- und Endpunkt für die drei Fluganimationen zu den Blumen sein, damit es nicht zu Sprüngen kommt. Also wird die Endposition der Startanimation per rechtem Mausklick kopiert (‚Copy Key‘).
  • Im Animations Inspector wird nun die erste Flug-Animation erzeugt. Wir nennen sie ‚FlyToFlower_1‘ und geben ihr eine Länge von 140 Frames und 7 Sekunden. Die Biene soll zu der großen Blume am linken Rand fliegen, dort einen Moment bleiben und dann zügig zurückkehren.

 

 

  • Start- und Endpunkt der Animation sollen identisch sein mit dem Endpunkt der Startanimation, also fügen wir (rechte Maustaste in die Timeline) auf dem ersten und dem letzten Frame den zuvor kopierten Key für Position ein.
    Für den Hinweg zur Blume sollen 50 – 60 Frames benötigt werden, dann bleibt die Biene für ca. 30 Frames dort und legt den Rückweg etwas schneller zurück. Wir setzen einen Key (Position) auf Frame 55 und schieben die Biene dort zur Blume.

 

 

  • Wenn wir die Animation in diesem Zustand starten (über den Play-Button oberhalb der Timeline oder mittels SPACE-Taste), wird die Biene den Rückweg von der Blume rückwärts antreten. Wir benötigen daher weitere Keys in der Timeline für Scale: Auf dem ersten und letzten Frame soll die Biene bleiben wie sie ist, lediglich auf dem Rückweg, also von Frame 86 bis zum vorletzten Frame (139), soll sie spiegelverkehrt sein.
  • Wir setzen in der Timeline Keys in die Zeile Scale auf den Frames 1, 85, 86, 139 und 140. Auf 86 (erster Frame für den Rückflug) und 139 (vorletzter Frame des Rückflugs) muss die Biene gespiegelt werden. Dazu wird auf diesen Keyframes im Object Inspector bei Scale X der Wert von 1 auf -1 gesetzt, dadurch wird das Objekt gespiegelt.

 

 

  • Damit ist die erste Animation im Prinzip komplett. Sie kann nach Belieben verfeinert werden: Der Heranflug könnte wieder zu Beginn beschleunigt, am Ende abgebremst werden (Ease Out); auf der Blume könnte sie sich noch ein bisschen bewegen (Position, Rotation), Hin- und Rückflug könnten anstelle des direkten Wegs noch Umwege enthalten (weitere Keys für Position).

Wir erstellen zwei weitere Animationen der Biene nach dem gleichen Muster – ‚FlyToFlower_2‘ und ‚FlyToFlower_3‘ – zu zwei weiteren Blumen weiter rechts. Wichtig ist wieder dafür zu sorgen, dass die Biene nie rückwärts fliegt, also mittels Keys in der Zeile Scale gespiegelt wird wenn nötig.

  • Nachdem alle drei Animationen angelegt sind, erstellen wir nun über das + Symbol im Scene Navigator (links von der Arbeitsfläche) drei Nodes, die auf der Bühne als transparente Rechtecke erscheinen, in der späteren Szene aber nicht zu sehen sein werden. Diese benennen wir ‚NodeFlower_1‘, …2 und …3 und legen sie über die Blumen, zu denen die Biene fliegen soll. Dies sind die Steuerelemente für die Animationen.

 

  • Um die Nodes mit den einzelnen Animationen zu verknüpfen, wird der Object Inspector aufgerufen. ‚NodeFlower_1’ wird markiert, unter Touch Properties wird die Checkbox ‚Has Touch Event‘ aktiviert und mithilfe des + Symbols wird aus der Liste der Animationen die passende (‚FlyToFlower_1‘) herausgesucht.

 

 

  • Bei den beiden anderen Nodes verwenden wir anstelle des + Symbols den Animation Pointer, um durch Ziehen auf die Biene die gewünschte Animation zu verknüpfen.

 

 

––––––––––––––––

  • Achtung: Wundern Sie sich nicht, wenn Ihr Objekt bei solchen Aktionen scheinbar grundlos ‚verschwindet‘ bzw. an anderer Stelle auftaucht als Sie erwarten. Wir haben ein Objekt (hier: die Biene), aber mehrere Animationen; jede Animation hat ihren eigenen Start- und Endpunkt. Wechseln Sie nun im Animations Inspector zwischen den Animationen, springt ihr Objekt an die aktuelle Stelle in der Timeline der aktuellen Animation. Klicken Sie hingegen irgendwo auf die Arbeitsfläche, nimmt Ihr Objekt die Position ein, die es nach dem Platzieren auf der Bühne bekommen hatte, ehe Sie es für eine erste Animation eventuell verschoben haben.Jedes Objekt hat eine Grundposition, in der es sich befindet, wenn es nicht markiert/ausgewählt ist. Und für jede Animation gibt es eine Startposition, die nicht zwangsläufig identisch mit der Grundposition ist!

––––––––––––––––

  • Wenn alle drei Animationen mit den Nodes verknüpft sind, kann es losgehen: Im Preview-Modus lassen sich die Animationen nacheinander testen.Zwei kleine Schönheitsfehler gilt es noch auszubessern:
  • Zum einen kann es gut sein, dass die Biene hinter einer der Blumen verschwindet, weil diese auf der Bühne weiter vorne liegt. Bei der gelben Blume mag das durchaus gewünscht sein, aber spätestens bei der Blume am rechten Rand sollte die Biene weiter vorne sein als die Blume. Dazu wird im Object Inspector der Local Order-Wert der Biene erhöht auf 1 oder 2. Nun liegt die Biene weiter vorne und verschwindet nicht mehr hinter der Blume.

 

 

  • Außerdem kann es zu Sprüngen in der Animation kommen, wenn beispielsweise auf eine Blume geklickt wird, ehe die Biene vollständig wieder von einer anderen Blume zurückgekehrt ist. Um das zu verhindern, stellen wir im Object Inspector (Touch Properties) für alle drei Nodes den Animation Mode von ‚Start’ auf ‚Start If No Active Animations’. Das hat zur Folge, dass ein Klick auf eine der Blumen (bzw. der Nodes darüber) nur dann eine Animation startet, wenn gerade keine andere Animation der Biene ausgeführt wird.

 

 

Spezielle Animationen

  • Sprite Sheet-Animationen – Viele Bilder, wenig Bewegung

Bei allen Möglichkeiten, die Ihnen TigerCreate zum Animieren bietet, gibt es doch Situationen, in denen Effekte nur sehr aufwendig erzielt werden können.
Betrachten Sie beispielsweise diese Bildfolge:

 

 

Um dies sauber zu animieren, müsste das Flusspferd in mehrere Einzelteile zerlegt werden, mehrere unterschiedliche Wasser-Teile müssten je nach Zeitpunkt den unteren Teil des Flusspferds abdecken, ganz zu schweigen vom Aufwand, Schaumkronen und Wasserspritzer zu animieren. Wenn dann das Ganze nur für einen kurzen Effekt-Moment dient, ist es an der Zeit sich anderer Mittel zu bedienen. Das Zauberwort lautet Sprite Sheet Animation: Tatsächlich wird das Bild auf der Bühne innerhalb der Animationszeit mehrfach ausgetauscht gegen die nächste Bildphase. Mehr als die 6 abgebildeten Bilder gibt es nicht. Jedes Bild enthält nur den Teil des Bildes, der sich verändert, also das Flusspferd und die unmittelbaren Wasserringe drumherum, der Rest bleibt unverändert Bestandteil des Hintergrunds. Wichtig ist, dass alle Bilder dieselbe Breite und Höhe besitzen; hilfreich ist es, alle Bilder im Namen durchzunummerieren, um die einzelnen Bilder besser zuordnen zu können.

 

 

In die Szene wird zunächst nur das erste Bild, also der Ausgangszustand der Animation importiert. Im Animations Inspector wird eine Animation erzeugt, Frameanzahl und zeitliche Länge in Sekunden festgelegt. Im Animator setzen Sie dann in der Timeline einen Key auf den ersten Frame der obersten Zeile Image. Anschließend schieben Sie den Slider jeweils auf den Frame, auf dem die nächste Animationsphase sichtbar werden soll, und ziehen aus dem Project Navigator (Images-Ordner) die entsprechende nächste Animationsphase direkt auf den Frame. Das Bild auf der Bühne wird ausgetauscht, Ankerpunkt, Skalierung, Rotation etc. werden automatisch übernommen. In der Timeline ist ein Key eingefügt worden. Klicken Sie mit der linken Maustaste auf den Key, wird das dort eingefügte Bild angezeigt. So haben Sie auch nachträglich immer Kontrolle darüber, was auf welchem Frame geschieht.

 

 

Diese Methode – Sprite Sheet Animation – bietet sich vor allem dann an, wenn es um Bewegungsabläufe geht, die häufig wiederholt werden sollen – beispielsweise das Flackern einer Kerze oder eines Feuers, eine Lauf- oder Schwimmbewegung einer Figur auf der Stelle, während die Umgebung bewegt wird. Da bei einer solchen Animation sämtliche Bewegungsphasen im Speicher behalten werden (müssen), sollten Sie darauf achten möglichst wenige Bilder zu verwenden.

 

  • Animationen an einem Pfad (Follow Path) – Bézierkurven

Bézierkurven sind frei konfigurierbare Kurven, die als Pfad für eine Animation verwendet werden können. Sie bieten sich überall da an, wo eine Bewegung nicht nur geradlinig zwischen zwei oder mehr definierten Punkten (Keys) stattfinden soll – denken Sie an ein Oval, einen Kreis oder an eine geschwungene Linie.

In unserem vorigen Beispiel hatten wir eine Biene, die in die Szene hineinfliegt und dort in einzelnen Animationen zu je einer Blume und zurückfliegt. Dabei war jede Bewegung durch feste Punkte (Keys) in der Timeline definiert. Um die Flugbahnen lebendiger und zufälliger wirken zu lassen, werden wir sie mit einer Bézierkurve ‚weicher‘ machen.

Über das + Symbol im Scene Navigator erzeugen wir ein neues Objekt ‚Bézier‘, das daraufhin in der Mitte der Bühne in Form einer kleinen Sinuskurve mit Ankerpunkt und den üblichen Anfassern erscheint. Links oberhalb ist ein kleines Quadrat mit einem Cursor-Symbol zu sehen: Genau wie bei Textboxen gibt es zwei unterschiedliche Modi – zum Platzieren, Skalieren, Rotieren einerseits, zum Editieren der eigentlichen Bézierkurve andererseits. Mithilfe der kleinen Box oberhalb des Objekts schalten Sie zwischen den beiden Modi um.

Im Ausgangszustand hat eine Bézierkurve immer genau zwei Punkte, von denen der linke der Startpunkt, der rechte der Endpunkt ist. Weitere Punkte können im Edit Mode der Kurve hinzugefügt werden (s.u.). Wir vergrößern die Kurve und schieben sie soweit nach oben und rechts, dass der Endpunkt der Kurve (rechts) auf der Biene liegt, also etwas außerhalb der Bühne.

 

 

  • Im Object Inspector geben wir der Bézierkurve einen eindeutigen Namen – ‚Start-Path‘ – und wählen weiter unten bei den Bézier Properties die Schaltfläche Reverse Points, dadurch werden Anfangs- und Endpunkt vertauscht, die Kurve verläuft nun von rechts nach links und ist so besser geeignet für unsere Biene.
  • Durch Klicken auf die kleine Box über der Kurve wechseln wir in den Edit Modus, erkennbar an dem Stift-Symbol. Die Kurve verändert ihr Aussehen; ein kleiner Pfeil zeigt die Laufrichtung an, kleine Spitzen entlang der Kurve tauchen auf, Start- und Endpunkt bekommen Anfasser, um sie verschieben zu können, und zusätzliche Kontrollen, mit denen das Aussehen der Kurve zwischen den Punkten verändert werden kann.

_____

Achtung: Ist der Edit Modus einer Bézierkurve aktiviert, sind alle anderen Objekte und Animationen vorübergehend gesperrt. Sie können nicht markiert werden, bis der Edit Modus der Bézierkurve beendet ist.

_____

Der Einfachheit halber beschränken wir uns hier im Beispiel darauf Start- und Endpunkt zu verschieben und den Verlauf der Kurve etwas zu verändern. Ausführliche Informationen zum Arbeiten mit Bézierkurven finden Sie hier.

  • Wir beenden vorübergehend den Edit Modus, markieren die Biene und wählen im Animations Inspector die Startanimation ‚Start-Bee‘ aus. In der Timeline gehen wir ganz ans Ende der Animation – Biene in der Mitte der Bühne – und schauen im Object Inspector die Positionswerte für X und Y an. Diese Werte sollen beibehalten werden, das heißt auch wenn die Biene an der Kurve entlang fliegt, soll sie am Ende auf diesem Punkt landen. Wir verändern also die Kurve so, dass ihr Endpunkt dieselben Koordinaten bekommt: Dazu wird die Kurve wieder markiert und der Edit Modus wieder eingeschaltet. Im Object Inspector zeigen die Bézier Properties die Koordinaten aller Punkte der Kurve: Point 1 ist der Startpunkt, Point 2 Endpunkt. Im Edit Modus lassen sich diese Werte von Hand ändern, sodass genau die Koordinaten der Biene für den Endpunkt eingetragen werden können.

 

 

  • Der Rest ist schnell getan. Nach Beenden des Edit Modus wird die Startanimation der Biene wieder ausgewählt. Weiter ordnen wir bei Follow Path die erstellte Kurve ‚Start-Path‘ zu; dadurch verändert sich auch die Timeline: Die Zeile Position wird ersetzt durch Path Movement; dort kann wieder die Option Ease Out zum Beschleunigen und Abbremsen der Bewegung zugeordnet werden.Beim Abspielen im Preview Modus fliegt die Biene nun entlang des (nun unsichtbaren) Pfades in die Szene hinein.

 

Übrigens – wenn Sie eine Bézierkurve als Animationspfad verwenden, können Sie dies auch mit der weiter unten beschriebenen Option Drag Along kombinieren, um so die Animation durch den User steuern zu lassen.

  • Hin und Zurück – Ping Pong

Unabhängig davon, ob sie eine Animation zwischen definierten festen Keys oder entlang eines Pfades bewegen, haben Sie mit der Option Ping Pong im Animations Inspector die Möglichkeit, eine Animation auf demselben Weg vorwärts und rückwärts laufen zu lassen. Wichtigste Voraussetzung dafür ist, dass der Wert für Loops, also die Anzahl Wiederholungen, größer als 1 ist. Bei geradem Wert endet die Animation schließlich wieder an ihrem Ausgangspunkt, bei ungeradem Wert endet sie am Endpunkt des Animationsweges.

Verwenden Sie Ping Pong, verlängert sich die Gesamtzeit der Animation um die Anzahl zusätzlicher Durchläufe. Bei einem Wert Loops = 4 vervierfacht sich die angezeigte Total Time also.

 

Erinnern Sie sich an unser obiges Beispiel mit der Biene, die in drei verschiedenen Animationen von einem Ausgangspunkt A zu unterschiedlichen Blumen und anschließend wieder zurück zu A fliegt. Im Prinzip hätten wir die Animationen verkürzen können, nur den Weg von A zur jeweiligen Blume animieren. Den Rückweg hätten wir über die Option Ping Pong automatisieren können. Der entscheidende Nachteil: Der Rückweg läuft genauso ab wie der Hinweg, nur genau umgekehrt, und man kann keinen Einfluss auf einzelne Parameter nehmen. Im Beispiel hätte das bedeutet, dass die Biene auf dem Rückweg rückwärts fliegt.

Der Einsatz der Option Ping Pong sollte also gut überlegt sein.

 

  • Folge mir! – Drag Along

Stellen Sie sich unsere Biene noch einmal vor, die über den Blumen schwebt. Anstatt eine der Blumen anzutippen, könnten Sie bei der Option Drag Along die Biene anfassen und Stück für Stück zur Blume hinführen … und wieder zurück.*

Mit der Option Drag Along im Animations Inspector findet eine Animation sukzessive in Abhängigkeit vom User statt. Das Objekt kann ‚angefasst’ und auf der als Animation definierten Strecke oder entlang eines Pfades (Bézierkurve) vor und rück bewegt werden. Es bleibt auf der Stelle und unverändert, sobald es ‚losgelassen‘ wird. Rotation, Skalierung und Deckkraft verändern sich abhängig vom Fortschritt der Animation auf der Strecke genau wie bei einer normal ablaufenden Animation. Die Geschwindigkeit der Bewegung ist bei Drag Along abhängig von der eingestellten Loop Time (s.o.), sie gibt die Minimalzeit vor mit der das Objekt über die gesamte Strecke bewegt werden kann. Die Option Loops ist in diesem Modus inaktiv.

 

 

Damit Drag Along funktioniert, muss die Animation als Startanimation deklariert sein. Im Falle unserer Biene geht das nicht, weil sie bereits eine andere Startanimation hat. Alternativ kann das zu bewegende Objekt (die Biene) ein Touch Event bekommen! Das bedeutet, im Object Inspector muss Has Touch Event für das Objekt aktiviert und die entsprechende Animation (Flug zur Blume) damit verknüpft werden.

* Es soll nicht verschwiegen werden, dass im konkreten Beispiel ein Problem aufträte. Da der Rückweg in den angelegten Animationen identisch war mit dem Hinweg, würde die Biene die Spiegelungen nicht ausführen und quasi rückwärts fliegen. Um das zu ändern, müsste der Rückweg sich eindeutig vom Hinweg unterscheiden, zum Beispiel durch einen weiteren anzufliegenden Punkt (Keyframe) oder indem anstelle fester Keys eine geschlossene Bézierkurve (z.B. ein Oval) die Flugbahn darstellt.

__________

Achtung: Eine eventuell zuvor eingestellte Delay Time sollten Sie vor der Aktivierung von Drag Along auf 0 zurücksetzen!

__________

 

  • Bewege mich! – Free Drag

Free Drag stellt einen Sonderfall unter den Animationen dar. Die Timeline zeigt in diesem Fall keine editierbaren Eigenschaften an. Stattdessen definieren Sie mit der Funktion Limit Movement ein Rechteck oder einen Kreis, innerhalb dessen sich das Objekt durch den User frei bewegen lässt.

Im Falle eines Rechtecks legen Sie fest, wie weit sich das Objekt vom Ausgangspunkt nach oben, rechts, unten und links bewegen lässt, im Extremfall also über die komplette Bühne. Bei einem Kreis bestimmen Sie den Radius desselben (Max Radius).

 

 

Angewendet auf unser obiges Beispiel könnten wir der Biene per Free Drag einen großen Flugraum über die Blumenwiese geben, innerhalb dessen sie vom User frei bewegt werden kann, während sich die einzelnen Blumen sanft hin und her bewegen (Startanimationen).

 

 

 

Mit Min Pinch Scale und Max Pinch Scale lassen sich Unter- und Obergrenzen für eine Skalierung des Objekts festlegen. Hält der User den Fokus auf dem Objekt, kann er es mit einer Art Zoom in den definierten Grenzen vergrößern oder verkleinern.

__________

Achtung: Um Free Drag nutzen zu können, muss eine Animation als Startanimation deklariert sein. Setzen Sie bei der Animation Delay Time auf 0, ehe Sie Free Drag auswählen.

__________

 

  • Mach das da weg – Scratchables

Mit der Funktion Is Scratchable lässt sich ein Objekt ‚radierbar‘ machen. Der User kann durch drüberrubbeln das Objekt Stück für Stück löschen. Es findet also keine Animation im Sinne von Bewegen statt, es handelt sich mehr um ein interaktives stückweises Ausblenden. Dazu kann in den Optionen die Größe der Radierfläche eingestellt werden (Brush Size) sowie ein Schwellenwert, bei welchem Prozentsatz das Objekt als ‚ausradiert‘ gelten soll und verschwindet (Complete).

 

 

Prinzipiell ist es zwar möglich, ein solches Objekt zusätzlich zu animieren – also z.B. als Startanimation langsam über die Bühne zu bewegen. In den meisten Fällen dürfte dies aber wenig sinnvoll sein. Sinnvoll eingesetzt ist die Scratch-Funktion zum Beispiel dann, wenn Sie etwas hinter einem Objekt verbergen und das vorneliegende Objekt durch Rubbeln entfernen wollen … wie in diesem Beispiel.

 

 

__________

Achtung: Während einer Scratch-Animation werden normale Touch Events ignoriert!

Ist bei einer Animation der Wert für Loops größer als 1 (also mehrere Durchläufe), wird jedesmal zu Beginn der Animation das bereits Gelöschte wiederhergestellt!

Die Funktion Scratchable lässt sich nur innerhalb von 2D-Szenen anwenden!

__________ 

 

Verwenden von Sounds in Animationen 

TigerCreate bietet zwei Arten Animationen mit Sound zu verknüpfen: Zu unterscheiden sind fest mit der Animation verknüpfte Animation Sounds und separat ausgelöste Event-Sounds.

Bei Animation Sounds verknüpfen Sie den Sound direkt mit der Animation (also im Animations Inspector). Er wird dann immer abgespielt, während die Animation läuft und endet spätestens mit dem Ende der Animation.

Event-Sounds verknüpfen Sie nicht mit der Animation sondern mit dem Objekt, das die Animation startet (in der Regel ein Node), also mit dem Touch Event (im Object Inspector); in diesem Fall können Sie den Sound nicht nur mit Start Time und End Time trimmen und eine Verzögerung (Delay) angeben; zusätzlich können Sie über Loops die Anzahl Wiederholungen unabhängig vom Ablauf der Animation selbst steuern sowie die Lautstärke des Sounds (Volume).

Wenn Sie Event-Sounds verwenden, könnten auch mehrere verschiedene auslösende Objekte unterschiedliche Sounds starten.

 

 (Animations Sound)

 (Event Sound)

 

Zu diesem Thema siehe auch ausführlich Sounds hinzufügen/Animations- und Eventssounds.

 

Animationen übertragen auf andere Objekte 

TigerCreate 2 bietet nun die Möglichkeit Animationen von einem Objekt auf ein anderes zu übertragen. Dies funktioniert auch szenenübergreifend und sogar projektübergreifend.

Nehmen wir an, Sie haben eine raffinierte Animation mit ausgeklügelten Parametern für Rotation, Skalierung etc. erstellt, über Ease In und Ease Out noch für interessante Beschleunigungs- und Abbremseffekte gesorgt und müssen nun mehrere ähnliche Animationen erstellen. Um sich Arbeit zu ersparen, können Sie die komplette Animation übernehmen – losgelöst vom Objekt! – und auf ein anderes Objekt übertragen. In Ansätzen funktionierte dies auch schon in TigerCreate 1 über das Kopieren von Keyframes, scheiterte aber häufig im Detail zum Beispiel bei szenenübergreifender Übertragung. Nun aber haben Sie im Animations Inspector simple Copy- und Paste-Funktionen:

  • Wählen Sie im Animations Inspector eine Animation aus und klicken Sie am unteren Rand der Animations List rechts auf das umrandete + Symbol. Damit kopieren Sie die ausgewählte Animation mit allen Parametern, aber ohne das zugehörige Objekt mitzukopieren.
  • Nun ist auch rechts neben dem + Symbol das umrandete Pfeilsymbol aktiv. Es steht für Einfügen (Paste).
  • Markieren Sie ein anderes Objekt auf der Bühne oder links im Scene Navigator oder wechseln Sie zu einer anderen Szene: Egal wo, das Symbol für das Einfügen der in der Zwischenablage befindlichen Animation wird überall in der Animations List aktiv angezeigt.
  • Klicken Sie auf das Symbol für Einfügen. In der Animations List erscheint die zuvor kopierte Animation mitsamt dem Namen und allen Parametern – allerdings mit dem Symbol des neuen, markierten Objekts.

 

 

__________

Achtung: Wollen Sie ein vorhandenes Objekt durch ein anderes ersetzen, ohne die Animationen zu verlieren, führt ein Weg über die Funktion Base Image im Object Inspector (Generic Properties). Dort wird das Originalbild des Objekts im Project Navigator angezeigt. Rechts daneben liegt ein Verknüpfungssymbol. Dieser Image Pointer dient dazu das Originalbild neu zuzuweisen bzw. ein anderes Bild im Project Navigator zu verknüpfen. Name und Eigenschaften mit allen Animationen bleiben erhalten, es ändert sich nur das Bild. Ein weiterer Weg zum Austausch des Bildes ist Drag & Drop – ziehen Sie dazu ein Bild aus dem Bilderordner des Project Navigator in das Verknüpfungsfeld bei Base Image.

 

 

__________

 

Neben dem Kopieren einzelner Animationen im Animations inspector haben Sie über den Object Inspector die Möglichkeit, die Animationen, die einem Objekt in den Touch Properties zugeordnet sind, zu kopieren und auf ein anderes Objekt zu übertragen. In der Animations List finden Sie am unteren Rand dieselben Symbole für Kopieren und Einfügen wie im Animations Inspector.

 

Animationen pinnen 

In TigerCreate wird normalerweise über die Steuerungselemente des Animators (oder bei Verschieben des Sliders in der Timeline) nur die aktuelle Animation abgespielt, während alle anderen animierten Objekte der Szene unverändert bleiben. Das ist meistens sinnvoll und erleichtert den Überblick. Es gibt aber Fälle, in denen genau das hinderlich ist – wenn entweder zwei oder mehr animierte Objekte sich aufeinander beziehen (Objekt A berührt Objekt B, das sich daraufhin ebenfalls bewegen soll) oder wenn Objekte zu einem komplexen Parent-Child-Objekt (siehe dort) miteinander verknüpft sind: Nehmen wir zum Beispiel eine Katze, die sich durch die Szene bewegt. Kopf, Körper, Beine, Schwanz könnten als einzelne Objekte animiert werden. Um aber das Zusammenspiel aller Körperteile zu bewerten, müssen auch alle zugehörigen Animationen gleichzeitig ablaufen.

Mit der „Pin“-Funktion können Sie gezielt Animationen im Animator behalten, auch wenn diese nicht mehr ausgewählt sind. Auf diese Weise werden bei Bewegen des Sliders in der Timeline alle ‚gepinnten‘ Animationen gleichzeitig bewegt.

Eine Animation pinnen Sie, indem Sie entweder im Animations Inspector oder im Animator neben der Animation das Symbol der Pin-Nadel aktivieren.

 

   

 

Eine gepinnte Animation bleibt auch sichtbar im Animator, wenn sie bzw. das animierte Objekt nicht mehr ausgewählt ist. Sind mehrere Animationen gepinnt, werden sie im Animator untereinander aufgelistet. Jeweils die oberste Animation ist die gerade aktive, nur diese kann bearbeitet werden. Wollen Sie eine andere gepinnte Animation bearbeiten, machen Sie sie aktiv, indem Sie im Animator rechts neben dem Objekt-Symbol auf den Namen-Button klicken; dadurch rutscht diese Animation nach ganz oben in der Liste.

 

 

__________

Achtung: Haben Sie mehrere Animationen gepinnt, können diese unterschiedliche Längen haben. Starten Sie die gepinnten Animationen über die Start/Pause-Taste im Animator, werden alle Animationen in voller Länge abgespielt. Verschieben Sie aber den Slider der Timeline per Hand, ist dies auf die Länge der obersten Timeline (also der gerade aktiven Animation) begrenzt! Machen Sie ggf. das Objekt mit der längsten Timeline aktiv, indem Sie im Animator den Button mit dem Namen der Animation anklicken; dadurch ‚rutscht‘ die entsprechende Animation ganz nach oben in der Liste.

 

 

__________

Achtung: Solange eine Animation gepinnt ist, kann im Animations Inspector keine andere Animation desselben Objekts ausgewählt und bearbeitet werden! Dazu muss erst der Pin deaktiviert bzw. bei einer anderen Animation aktiviert werden.

__________

 

  • Pinning groups

Nur scheinbar kompliziert wird die Sache, wenn ein komplexes Objekt (Parent-Child-Objekt) mehrere Animationen ausführen soll. Nehmen wir unsere Katze von eben – sie soll einerseits durch die Szene schleichen (Animation 1), andererseits soll sie an einer bestimmten Stelle hochspringen (Animation 2). Jedes Körperteil der Katze muss also mindestens zwei unterschiedliche Animationen ausführen. Um nicht jedesmal einen ganzen Schwung von Animationen zu pinnen und zu entpinnen, um mal an der einen, mal an der anderen Animation zu arbeiten, gibt es in TigerCreate 2 sogenannte Pinning Groups. Darin fassen Sie beispielsweise alle Animationen für das Schleichen zu einer Gruppe zusammen, alle Animationen für das Springen in einer zweiten. Beide Gruppen versehen Sie mit möglichst eindeutigen Namen und können im Animator über die Funktion Pinning Actions jederzeit zwischen den Gruppen wechseln.

Und nun Schritt für Schritt:

  • Für jedes zu bewegende Körperteil erzeugen wir zwei Animationen, je eine für Laufen und Springen. Diese können zunächst noch ‚leer‘ sein.
  • Bei einem der Teile wird im Animations Inspector die Animation für Laufen ausgewählt. Wir klicken weiter unten auf das kleine Zahnrad-Symbol bei Pinning Group. Daraufhin poppt ein neues Fenster auf – Animation Pinning Group Name.

 

 

In diesem Fenster erzeugen wir über das + Symbol eine neue Gruppe und nennen sie ‚Cat-Walk‘, weil sie alle Animationen für das Laufen beinhalten soll.

 

 

  • Anschließend wird jede Laufen-Animation der einzelnen Körperteile über Pinning Group der neu erzeugten Gruppe zugewiesen.

 

 

  • Im Animator liegt neben der Steuerleiste das DropDown-Menü Pinning Actions. Bei Auswahl unserer Gruppe ‚Cat-Walk’ werden automatisch alle zugehörigen Animationen gepinnt und untereinander aufgelistet.

 

 

  • Auf dem gleichen Weg erzeugt man eine weitere Gruppe ‚Cat-Jump‘, der alle Sprung-Animationen zugeordnet werden. Dann kann im Animator mit einem Klick die Pinning Group gewechselt werden.

 

 

In der folgenden Abbildung sind noch einmal alle Punkte zusammengefasst.

1 – Pin-Symbol zum Aktivieren/Deaktivieren der Pin-Funktion einer Animation

2 – Pin-Funktion im Animations Inspector

3 – Button zur Aktivierung einer bestimmten, gepinnten Animation. Diese Animation ‚rutscht’ nach oben, ihre Timeline ist nun die relevante und kann bearbeitet werden.

4 – Zahnrad-Symbol zum Aufruf des Fensters Animation Pinning Group Names.

5 – DropDown-Menü im Animations Inspector über das eine Animation einer Pinning Group zugeordnet werden kann.

6 – DropDown-Menü Pinning Actions im Animator über das Pinning Groups aktiviert oder deaktiviert werden können. Übrigens: Über die Funktionen Remove All Pinned Groups und Remove All Pinned Animations lassen sich alle aktivierten Gruppen und/oder Animationen einfach wieder deaktivieren.

 

 

Ein weiterer Vorteil von ‚gepinnten‘ Animationen bzw. von Pinning Groups liegt übrigens darin, dass Sie in den Touch Properties (siehe Object Inspector) ganz leicht alle gerade aktiven (weil gepinnten) Animationen auf einmal hinzufügen können. Sind zum Beispiel die Animationen einer Pinning Group ‚Biene‘ gerade über den Animator aktiviert, können diese mit einem einzigen Klick in die Animations List des auslösenden Objekts übernommen werden.

 

 

Prinzipiell werden alle Animationen einer Pinning Group im Animator aufgelistet, wenn diese aktiviert wird. Es ist aber möglich einzelne Animationen vorübergehend zu ‚entpinnen’, sodass sie zwar immer noch zur Pinning Group gehören aber momentan nicht im Animator angezeigt werden.

Im Pinning Actions-Menü stellt sich das folgendermaßen dar:

  • vollständig aktivierte Gruppen werden mit einem √ versehen
  • Gruppen, bei denen gerade nicht alle Animationen aktiv sind, erhalten ein – Zeichen
  • nicht aktivierte Gruppen erhalten kein Zeichen

 

 

Animationen von verschachtelten Objekten (Parent-Child Objekte)

In der Praxis wird es häufig vorkommen, dass Sie nicht nur einzelne Objekte isoliert animieren wollen, sondern Objekte, die sich aus mehreren Teil-Objekten zusammensetzen: Bei den Pinning Groups hatten wir das Beispiel mit der Katze, deren einzelne Körperteile zwar isoliert bewegt/animiert werden, die sich aber als Ganzes durch eine Szene bewegen soll. Zwar sind Pinning Groups bei der Animation hilfreich, noch wichtiger ist aber die Möglichkeit, Objekte zusammenzufassen zu verschachtelten Objekten (Parent-Child-Objekte). Dabei gibt es ein übergeordnetes Eltern-Objekt (Parent) und ein oder mehrere untergeordnete Kind-Objekte (Child). Im Falle einer Katze könnten die einzelnen Beine, Kopf und Schwanz ‚Kinder‘ des übergeordneten Objekts ‚Körper‘ sein – dazu werden die Objekte im Scene Navigator ineinander verschachtelt, die Child-Objekte werden einzeln animiert und sind durch die Verschachtelung an das Parent-Objekt ‚Katze’ gebunden. Wird das Parent-Objekt verschoben, rotiert, skaliert oder in der Deckkraft verändert, folgen die untergeordneten Child-Objekte dem automatisch. Stellen Sie sich der Anschaulichkeit halber eine Entenmutter vor, deren Küken ständig in ihrem Fahrwasser hinterher schwimmen. Sie brauchen nur die Entenmutter zu führen, die Küken werden automatisch folgen, auch wenn sie dabei ihre eigenen Bewegungen ausführen.

 

  • Verschachtelungen erzeugen

Verschachtelungen erzeugen Sie ganz einfach wie folgt:

  • Überlegen Sie zunächst, welches Objekt das übergeordnete (also das Parent-Objekt) sein soll, dem die anderen Objekte ggf. folgen.
  • Ziehen Sie nun im Scene Navigator das zukünftige Child-Objekt auf das zukünftige Parent-Objekt und halten Sie mit gedrückter Maustaste darüber, bis das Zielobjekt blau unterlegt ist.
  • Das Zielobjekt ist immer das übergeordnete Objekt, also das Parent-Objekt.
  • Das Child-Objekt verschwindet nach dem Loslassen scheinbar, dafür bekommt das Parent-Objekt zusätzlich zum Schloss- und Auge-Icon ein kleines Dreieck. Tippen Sie dieses an, klappt das Parent-Objekt nach unten aus und zeigt – eingerückt nach rechts – alle Child-Objekte an. Die Child-Objekte sind nun dem Parent-Objekt untergeordnet. In der Darstellung auf der Bühne ändert sich (fast) nichts; verschieben Sie jedoch das Parent-Objekt, werden die Child-Objekte automatisch mit verschoben, rotiert, skaliert oder was auch immer.

 

 

Was beim Blick auf den Object Inspector auffällt: Die Position-Werte (x, y) der Child-Objekte ändern sich, eventuell werden sie kleiner oder sogar negativ. Das liegt daran, dass Child-Objekte mehreren Koordinatensystemen gleichzeitig angehören: Einerseits haben sie eine Position innerhalb des Bühnenraums, also die x- und y-Werte von der oberen linken Ecke der Bühne aus gesehen – dies nennt man die globale Position. Andererseits besitzen sie durch die Abhängigkeit von ihrem Parent-Objekt lokale Positionswerte, die sich auf den Ankerpunkt des Parent-Objekts beziehen. Sie können oberhalb der Arbeitsfläche mit den Schaltflächen Local und Global zwischen diesen beiden Koordinatensystemen wechseln. Eine gute Nachricht noch dazu: Bei aller Komplexität, die in den Hierarchieebenen verschachtelter Objekte steckt, ist TigerCreate doch in der Lage, auch beim Kopieren verschachtelter Child-Objekte deren Koordinaten – lokal wie global – ‚sauber‘ zu kopieren und einzufügen.

Tipp: Dies funktioniert sowohl zwischen verschiedenen Objekten als auch zwischen den verschiedenen Koordinatensystemen: die lokalen Werte des einen Objektes können z. B. als globale Werte auf ein anderes Objekt übertragen werden. Dazu müssen Sie nur nach dem Kopieren der Werte von Local auf Global umschalten.

 

_______

Achtung: Bezüglich der Reihenfolge bzw. Hierarchie werden die Child-Objekte ebenfalls dem Parent-Objekt untergeordnet. Selbst wenn einem Child-Objekt eine eigene Local Order zugeordnet wurde, wird es die Hierarchieebene des Parent-Objekts übernehmen. Innerhalb des komplexen Parent-Child-Objektes sieht die Hierarchiereihenfolge und damit auch die Darstellung auf der Bühne wie folgt aus:

  • Das Parent-Objekt liegt an unterster Stelle, liegt damit sichtbar also hinter(!) seinen Child-Objekten.
  • Alle Child-Objekte untereinander werden wie zuvor entweder alphabetisch sortiert oder abhängig von einer eventuell eingestellten Local Order, sind aber dennoch dem Parent-Objekt untergeordnet.

Beispiel: Ein Parent-Child-Objekt besteht aus Schmetterlingskörper und zwei Flügeln. Zunächst war für beide Flügel jeweils Local Order = 2, für den Körper Local Order = 0 eingestellt. Nach dem Zusammenfassen zu einem komplexen Objekt besitzen die Flügel zwar immer noch Local Order = 2, sind aber als Child-Objekte der Local Order ihres Parent untergeordnet, welche nach wie vor 0 ist. Dadurch würde ein anderes Objekt, sagen wir eine Biene, mit Local Order = 1 sowohl den Schmetterling als auch die beiden Flügel überdecken. Die Local Order der Child-Objekte bleibt erhalten, gilt aber nur noch innerhalb ihres Parent-Objekts!

_______

Wir spielen das an einem einfachen Beispiel konkret durch:

Bei den ersten Animationen haben wir eine Biene verwendet, die der Einfachheit halber als ein Ganzes bewegt wurde, d.h. eine Bewegung der Flügel fand nicht statt. Da eine Biene recht klein ist, fällt das nicht so sehr auf; jetzt aber wollen wir eine Biene, deren Flügel sich im Flug permanent mitbewegen.

  • Wir importieren über den Project Navigator drei Objekte, eine Biene (ohne Flügel) und zwei einzelne Flügel.

 

 

  • Beim Zusammenschieben der Flügel an die Biene fällt auf, dass beide Flügel (aufgrund der alphabetischen Reihenfolge) zunächst vor der Biene liegen (Bild links). Um dies zu ändern bekommen die Biene und der linke Flügel über den Objekt Inspector höhere Local Order-Werte. Der rechte Flügel liegt nun weiter hinten (Bild Mitte). Anschließend wird bei beiden Flügeln der Ankerpunkt auf die untere Spitze verschoben, weil die Flügel um diesen Punkt rotiert werden sollen (Bild rechts).

 

 

  • Zunächst animieren wir die Flügel einzeln. Wir legen jeweils eine kurze Animation (‚RightWing’, LeftWing’) an, die nur 0,2 Sekunden dauern soll, damit die Flügel sich über die eingestellten 15 Frames schnell bewegen. In der Timeline des Animators legen wir mehrere Keyframes fest, auf denen der jeweilige Flügel nach außen und innen rotiert. Außerdem legen wir gleich eine Pinning Group ‚Bee‘ an, in die wir die einzelnen Animationen der Flügel aufnehmen.So kann man beobachten, wie sich beide Flügel synchron bewegen. Damit die Animation der Flügel automatisch startet, werden beide Animationen als Startanimationen definiert. Damit sich die Flügel permanent weiterbewegen, wird der Wert für Loops auf 0 gesetzt. Die Biene selbst benötigt keine Animation.

 

     

 

  • Wenn wir nun die einzelnen Objekte Biene plus zwei Flügel zu einem verschachtelten Parent-Child-Objekt zusammenfassen, ist die Biene das Parent-Objekt, die Flügel die Child-Objekte. Würden wir die Biene bewegen, folgten die Flügel automatisch und würden sich zudem bewegen.

Es gibt aber gute Gründe anders vorzugehen: zum einen ist da der Nachteil, dass ein Parent-Objekt immer – ungeachtet seiner Local Orderhinter den Child-Objekten liegt; die Biene würde also wieder hinter beiden Flügeln liegen. Bei unserem Beispiel könnte man darüber vielleicht noch hinwegsehen, aber wenn Sie sich eine Katze vorstellen, bei der alle vier Beine vor dem Körper liegen, … Ein weiterer Grund anders vorzugehen, heißt Übersicht. Unser Beispiel ist wirklich nicht sehr komplex und hat zudem nur eine Verschachtelungsebene. Sie können in TigerCreate Verschachtelungen beliebiger Tiefe anlegen und damit hochkomplexe Objekte erzeugen, bei denen Übersicht, was auf welcher Ebene wovon abhängt, sehr wertvoll sein kann.

  • Um also die genannten Nachteile zu vermeiden, kommen ein weiteres Mal Nodes ins Spiel. Verwenden Sie Nodes als übergeordnetes Parent-Objekt und bezeichnen Sie sie von Anfang an eindeutig. Wir erzeugen in unserem Beispiel über den Scene Navigator einen neuen Node, nennen ihn ‚BeeNode‘, skalieren ihn ungefähr auf die Größe der Biene und platzieren ihn genau dort.

 

 

  • Nun verschachteln wir alle vier Objekte. Im Scene Navigator ziehen wir Biene und Flügel auf das Symbol für BeeNode bis es blau unterlegt ist. Nach dem Loslassen befindet sich neben BeeNode ein kleines Dreieck, darunter erscheinen beim Ausklappen die Symbole der nun verschachtelten Biene.

 

 

  • Um die Biene zum Fliegen zu bringen, animieren wir nun das Parent-Objekt ‚BeeNode’. Wir erzeugen eine (Start)Animation ‚BeeFlying‘ und geben als Zeit 10 Sekunden vor bei 300 Frames, sodass die Biene über einen Zeitraum von 10 Sekunden die Szene durchquert. Indem Loops = 0 gesetzt wird, wird diese Animation endlos wiederholt.

Im Animator setzen wir zunächst nur auf den ersten und letzten Frame der Timeline einen Key und verschieben die Biene auf dem ersten Frame nach links außerhalb der Bühne, auf dem letzten nach rechts außerhalb der Bühne.

 

 

 

  • Damit das Ganze ein bisschen lebendiger wirkt, erzeugen wir weitere Keyframes auf denen die Biene mal bei der einen oder anderen Blume unterwegs ist, vielleicht auch mal für eine halbe Sekunde (hier: 15 Frames) bei einer Blume verweilt. Zwischen den Keyframes sorgen wir über Ease In oder Ease Out für Beschleunigung oder Abbremsen … und schauen uns das Ergebnis im Preview Modus an.

 

 

  • Als Alternative zu diesem durch Keys definierten Pfad versuchen wir es noch mit einem Pfad entlang einer Bézierkurve. Dazu verwenden wir eine ‚neue’ Biene, das heißt wir duplizieren per rechter Maustaste im Scene Navigator das Objekt ‚BeeNode‘, das daraufhin mitsamt seinen Child-Objekten und allen darin enthaltenen Animationen erneut im Scene Navigator (und auf der Bühne) erscheint; lediglich an die Namen der Objekte wird (zur Unterscheidung bzw. zur Einhaltung der Namenseindeutigkeit) eine ‚1‘ angehängt. Das macht aber gar nichts, denn wir nennen das duplizierte Parent-Objekt gleich um in ‚BeeNodePath‘.

 

 

  • Im nächsten Schritt erzeugen wir (im Scene Navigator) eine neue Bézierkurve, nennen sie ‚BeePath‘ und ziehen sie anschließend so groß auf, dass sie die ganze Bühne überquert. Anfangs- und Endpunkt sollen links bzw. rechts außerhalb der Bühne liegen; dazwischen darf die Kurve so verlaufen wie Sie sie haben wollen.

 

 

  • Schließlich ersetzen wir im Animations Inspector die bisherige Startanimation ‚BeeFlying‘ durch eine neue ‚BeeFlyingPath‘. Diese benötigt keine Keys außer Anfangs- und Endpunkt. Wir verwenden die gleiche Länge wie zuvor (also 10 Sekunden bei 300 Frames) und verknüpfen sie über Follow Path mit der Bézierkurve ‚BeePath‘. Dadurch springt der Node ‚BeeNodePath‘ automatisch an den Anfangspunkt der Bézierkurve.

 

 

Wenn wir nun den Preview Modus wählen oder die Funktion Quick Test (oben links), können wir beide Bienen synchron fliegen sehen, die eine fliegt geradewegs von Keyframe zu Keyframe, die andere folgt der Bézierkurve. Das Entscheidende aber – bei beiden bewegen sich die Flügel permanent mit.

Dies ist wie gesagt ein sehr simples Beispiel. Deutlich komplizierter, weil komplexer, ist zum Beispiel die Animation eines gehenden Menschen, dessen Körper Sie in viele Einzelteile zerlegen müssen – Rumpf, Kopf, Arme, Oberschenkel, Unterschenkel, Füße, … – um sie dann einzeln zu animieren, sinnvoll miteinander zu verschachteln und über Pinning Groups so zusammenfassen, dass Sie auch bei der Arbeit an einzelnen Animationen immer das Ganze mitbewegt sehen können.

Das könnte zum Beispiel so aussehen:

  • Auf der untersten Ebene befindet sich ein Fuß, der in sich animiert (v.a. rotiert) wird.
  • Dieser Fuß ist Child-Objekt für den dazugehörigen Unterschenkel; wird also der Unterschenkel bewegt, bewegt sich der Fuß entsprechend mit.
  • Der Unterschenkel wiederum ist Child-Objekt für den Oberschenkel.
  • Der Oberschenkel gehört als Child zu einem Parent-Objekt ‚Body‘, dem gesamten Rumpf.
  • Weitere Child-Objekte von ‚Body‘ sind das zweite Bein (in ihm sind der zweite Unterschenkel und darunter der zweite Fuß verschachtelt) sowie beide Arme (mit den Händen als weitere Child-Ebene) und der Kopf (damit dieser unabhängig vom Rumpf bewegt werden kann).
  • Auf der obersten Ebene ist ein Node das Parent-Objekt für ‚Body‘ mit all seinen mehrfach verschachtelten Gliedmaßen.

Sie sehen, es ist nicht ganz einfach dabei den Überblick zu behalten. Umso wichtiger sind eindeutige Bezeichnungen für Nodes und Assets.

 

  • Verschachtelte Objekte ‚pinnen’

Wollen Sie nun ein komplexes Objekt animieren, ist es sinnvoll alle Parent- und Child-Objekte darin zu einer Pinning Group (s.o.) zusammenzufassen. Auf diese Weise ist gewährleistet, dass sich alle verschachtelten Animationen innerhalb des Editor-Modus mitbewegen.

Bei sehr komplexen Objekten kann es unter Umständen sinnvoll sein, nur einige Teile eines Parent-Child-Objekts in Pinning Groups zusammenzufassen, beispielsweise Fuß, Unterschenkel und Oberschenkel einer Figur, die in einer Pinning Group ‚Bein_links‘ als Ganzes aber unabhängig vom restlichen Körper betrachtet und animiert werden können.

Über die Funktion Pinning Actions im Animator lässt sich ggf. schnell zwischen den jeweiligen Gruppen umschalten.

 

  • Verschachtelte Objekte ansteuern

Um alle Animationen eines verschachtelten Objekts gleichzeitig zum Laufen zu bringen, müssen Sie entweder alle Parent- und Child-Animationen als Startanimationen deklarieren. Oder Sie steuern die Animationen über ein Node, das Sie als auslösenden Button verwenden. In diesem Fall geben Sie dem Node wie üblich über den Object Inspector ein Touch Event (z.B. ‚Start‘) und verknüpfen alle gewünschten Animationen des verschachtelten Objekts damit. Es genügt also nicht, das Parent-Objekt zu verknüpfen und auf Klick zu starten. Zwar werden dann die einzelnen Child-Objekte auf allen Ebenen mit bewegt, deren eigene Animationen werden aber nur ausgeführt, wenn sie vom auslösenden Touch Event ebenfalls angesteuert werden.

 

  • Länge der einzelnen Animationen

Achten Sie bei verschachtelten Animationen darauf, dass entweder alle Animationen gleich lang sind – was nicht in jedem Fall sinnvoll ist – oder dass die Länge der einzelnen Animationen sich möglichst ganzzahlig durcheinander teilen lässt.

Dazu folgendes Beispiel: Angenommen die Biene im obigen Beispiel soll nicht permanent rein und raus fliegen sondern nur von Blume A zu Blume B und dort sitzen bleiben. Für den Flug der Biene setzen wir 4 Sekunden an. Nun ist wichtig, dass die Flügel ebenfalls möglichst genau 4 Sekunden schlagen. Da ein einzelner Flügelschlag aber nur sehr kurz ist (wir hatten 0,2 Sekunden eingestellt), muss die Anzahl Wiederholungen (Loops) entsprechend hoch eingestellt werden; in diesem Beispiel also 4 : 0,2 = 20 Wiederholungen. In diesem Fall ergibt sich kein Problem, weil die Flügel nicht nur während des gesamten Fluges bewegt werden, sondern am Ende auch wieder genau ihre Anfangsposition einnehmen.

Wäre die Flügelanimation stattdessen 0,3 Sekunden lang, hätten wir bei 4 : 0,3 = 13,3 einen krummen Wert. Bei 13 Wiederholungen würden die Flügel etwas zu früh aufhören, bei 14 Wiederholungen zu spät. Und bei genau 13,3 Wiederholungen blieben die Flügel am Ende in einer Zwischenposition stehen.

Es ist also wichtig darauf zu achten, dass Sie die Länge der einzelnen verschachtelten Parent- und Child-Animationen aufeinander abstimmen.

Back To Top

Arbeiten mit Text

In TigerCreate 2 haben Sie zwei Möglichkeiten Text zu verwenden: als Textbox frei auf der Bühne platziert oder als Text Blade, die sich von unten in die Szene schiebt (die dritte Möglichkeit, Text als reines Bild einzusetzen, sei an dieser Stelle vernachlässigt). In beiden Fällen können Sie Text in einer Art WYSIWIG-Editor setzen und formatieren, der Ihnen von vornherein zeigt, wie Ihr Text später aussehen wird. Dabei können Sie alle Fonts verwenden, die Ihr System unterstützt.

Sollten Sie einmal ein Projekt zugeschickt bekommen, an dem Sie weiterarbeiten sollen, wird Ihnen TigerCreate beim Öffnen gegebenenfalls Warnhinweise zu fehlenden Schriftarten geben. Sie können diese dann nachträglich installieren, und alles wird aussehen wie vorgesehen.


Arbeiten mit Textboxen

Eine Textbox können Sie frei auf der Bühne platzieren und in der Größe skalieren. Um eine Textbox zu verwenden, klicken Sie im Scene Navigator (linke Spalte) oben auf das umrandete + Symbol und wählen die Option Text; damit erzeugen Sie ein neues Textobjekt – eine Textbox.

 

     

 

In der Mitte der Bühne erscheint die Textbox mit einem Dummytext, der von der eingestellten Sprache abhängt. In der folgenden Abbildung sehen Sie die einzelnen Optionen.

  1. Das kleine Rechteck zeigt den Transformationsmodus an. In diesem können Sie die Textbox verschieben, skalieren, rotieren, animieren. Per Klick schalten Sie um in den Edit-Modus, um zu schreiben.
  2. Die Anfasser dienen dazu die Textbox zu skalieren; der Text selbst bleibt davon unberührt bis auf den Zeilenumbruch. Mit gedrückter SHIFT-Taste lässt sich die Textbox auch proportional skalieren, wenn die Skalierung von den Eckpunkten aus vorgenommen wird.
  3. Der blaue Kreis um den Ankerpunkt (siehe 4) dient zur Rotation der Textbox.
  4. Der Ankerpunkt ist verschiebbar; er bezeichnet den Punkt, um den die Textbox rotiert bzw. von dem aus sie skaliert wird.
  5. Mit diesem Anfasser skalieren Sie die Textbox mitsamt dem Text in der Vertikalen, d.h. auch die Schrift wird gestreckt oder gestaucht. (Mit gedrückter SHIFT-Taste skalieren Sie Box und Text proportional.)
  6. Mit diesem Anfasser skalieren Sie die Textbox mitsamt dem Text in der Horizontalen, d.h. auch die Schrift wird gedehnt oder gestaucht. (Mit gedrückter SHIFT-Taste skalieren Sie Box und Text proportional.)

Im Transformationsmodus können Sie eine Textbox animieren wie andere Objekte auch. Legen Sie dazu im Animations Inspector eine neue Animation an; daraufhin erscheint die Timeline, in der Sie für die üblichen Eigenschaften Position, Rotation, Scale, Opacity Keyframes erzeugen können (siehe dazu auch Arbeiten mit Animationen).

Im Animations Inspector gibt es grundsätzlich die Möglichkeit einen Sound mit einer Animation zu verknüpfen. Im Falle von Textboxen heißt die Option Speech Sound, weil TigerCreate davon ausgeht, dass ein Sprechersound mit der Textbox verknüpft wird, der den Text vorliest. Ist dies der Fall, wird in der Timeline zusätzlich die Eigenschaft Speech angezeigt, um Keyframes für das Word Highligting anzulegen (siehe dazu weiter unten: Word Highlighting).

Den Edit-Modus erhalten Sie nach Klick auf das kleine Rechteck oben links über der Textbox. Sie können nun Text eingeben oder über die Zwischenablage einfügen (Formatierungen gehen dabei i.d.R. aber verloren).

Im Object Inspector (rechte Spalte unten) stehen über die Text Properties zahlreiche Möglichkeiten zur Bearbeitung des Textes zur Verfügung:

  • Block Transformations ermöglichen das horizontale und vertikale Verrücken eines ausgewählten Textabschnitts. Mit der Checkbox Impacts Following werden die Einrückungen von Wort zu Wort (des markierten Textabschnitts) übertragen.
  • Scrollbar settings bestimmen das Aussehen des Rollbalkens (dieser taucht automatisch auf, wenn die Textmenge die Ausmaße der Textbox übersteigt)
  • Mit den Schaltflächen Save As Defaults bzw. Load Defaults lassen sich bestimmte verwendete Texteinstellungen abspeichern und zu gegebener Zeit wieder laden. Angewendet werden diese beiden Befehle aber immer nur auf markierte Textabschnitte!
  • Auto Font Scaling sorgt dafür, dass Text in Textboxen automatisch skaliert wird, wenn das E-Book auf einem Gerät mit kleinem Display angeschaut wird. Je nach Bildschirmgröße wird der Text um den Faktor 1,5 oder 2 hochskaliert und bleibt dadurch lesbar. Dies beeinflusst den Zeilenumbruch; Texte, die dadurch nicht mehr in die vorhandene Textbox passen, werden zu Scrolltexten.

Für diese Option ist wichtig, dass in den Project Settings unter Default Text Options ebenfalls die Option Use Automatic Font Scaling for Text Objects/ for Textblade aktiviert ist. (siehe auch: Interface/Project Settings)

Es folgen die üblichen Einstellungsmöglichkeiten für Schriftart, -größe, -farbe, -ausrichtung, Zeilenhöhe usw.

 

    

 

Die beiden Buttons Save As Defaults und Load Defaults haben mit der voreingestellten Formatierung von Textboxen zu tun. Diese wird normalerweise über die Project Settings vorgenommen – Sie stellen Schriftart, -größe, -farbe etc. ein, die standardmäßig jede neue Textbox übernimmt (siehe auch Default Text Options). Mit dem Button Save As Defaults können Sie die aktuelle Formatierung Ihrer Textbox zum Standard machen und damit die Default Text Options in den Project Settings überschreiben. Umgekehrt können Sie, falls Sie die Formatierung der aktuellen Textbox verändert haben, über den Button Load Defaults den Standard-Zustand wiederherstellen.

 

Arbeiten mit Text Blade

Eine Text Blade ist ein großes Feld über die gesamte Bühnenbreite, das am unteren Rand erscheint. Innerhalb dieser Fläche liegt eine konfigurierbare Textbox. Im späteren E-Book erscheint die Text Blade zunächst nur als eine Art Lasche (gleichzeitig ‚Open‘ und ‚Close‘-Button) am unteren Bildrand und schiebt sich bei Antippen ins Bild.

Um eine Text Blade zu erzeugen, klicken Sie im Scene Navigator (linke Spalte) oben auf das umrandete + Symbol und wählen die Option Text Blade.

 

 

Ebenso wie bei den Textboxen (s.o.) gibt es einen Transformations- und einen Edit-Modus. Ersterer dient nur zur Skalierung der Text Blade und damit der Textbox (nach unten); im Edit-Modus hingegen geben Sie Text in die Textbox ein und formatieren ihn. Der Edit-Modus bietet die gleichen Text Properties wie bei Textboxen; zusätzlich erscheinen im Object Inspector unterhalb der Text Properties noch Text Blade Properties. Dort lässt sich einstellen,

  • wie hoch die Text Blade relativ zur Bühnenhöhe sein soll (Blade Height; Bereich zwischen 20 und 70%); dieser Wert korrespondiert mit dem Anfasser am unteren Text Blade-Rand,
  • um wieviel Prozent die Bühne bei Auftauchen der Text Blade nach oben verschoben wird (Scene Movement). Bei einem Wert 0 würde die Text Blade den unteren Bereich der Bühne einfach überdecken; wenn dies nicht gewollt ist, kann prozentual eingestellt werden, wie weit sich das Bühnenbild nach oben hinausschiebt.
  • wie nah die eigentliche Textbox am seitlichen bzw. oberen Rand der Text Blade liegt (Fill Unit Width und Fill Unit Height).

 

     

 

Eine Text Blade kann nicht animiert werden, besitzt aber dennoch im Animations Inspector bereits eine Animation (Text Blade Audio), die sich auf einen verknüpften Sprechersound bzw. importierte Daten zum Word Highlighting bezieht (Genaueres siehe unten: Word Highlighting).

 

 

Das Aussehen einer Text Blade können Sie (wie auch weitere Navigationselemente) über den Scene Inspector beeinflussen (siehe auch Scene Skinning Properties). Konkret kann die ‚Lasche’, also ‚Open‘ und ‚Close‘-Button, ausgetauscht werden sowie der Hintergrund, auf dem die (transparente) Textbox angezeigt wird. Beachten Sie bei Änderung des Hintergrunds, dass ggf. die Schriftfarbe in der Textbox angepasst werden sollte.

Über Make Default lassen sich Änderungen des Aussehens auf alle Standardszenen übertragen, die Project Settings werden dadurch aktualisiert.

 

 

Word Highlighting

Word Highlighting nennt sich die Funktion, einzelne Wörter in einer Textbox (genau so Text Blade) während des Vorlesens hervorheben zu lassen. Dazu benötigt die Textbox eine verknüpfte Sprecherdatei sowie sogenannte Labeldaten. Dies sind Schlüsselbildpositionen (Keys), die ansteuern, an welcher Stelle der Sprecherdatei welches Wort im Text hervorgehoben wird. Labeldaten (auch Highlight Data genannt) können direkt in TigerCreate erstellt werden:

  • Markieren Sie die Textbox und rufen Sie in der Inspektorenleiste (rechts) den Animations Inspector auf.
  • Erzeugen Sie dort über das + Symbol eine neue Animation für die Textbox. Benennen Sie sie sinnvoll, z.B. „Highlighting“ und machen Sie sie zu einer Startanimation, indem Sie oben die Checkbox unter Start aktivieren. Letztlich ist das automatisch ablaufende Word Highlighting eine Startanimation.

Achtung: Handelt es sich um eine Textbox als Bestandteil einer Text Blade, ist dieser Schritt nicht nötig, es existiert bereits eine Animation „Text Blade Audio“.

  •  Verknüpfen Sie die Animation mit einer Sprecherdatei. Ziehen Sie dazu aus dem Sound-Ordner im Project Navigator (links) eine Audiodatei, die den gesprochenen Text enthält, in das leere Feld neben der Option Sound im Animations Inspector. Sie sehen dann eine verkleinerte Hüllkurve der Audiodatei, können über den Play-Button ▶ die Datei anhören und ggf. die Lautstärke verringern.
  • Beachten Sie, dass die Werte für Number Of Frames und Loop Time im Animations Inspector nun automatisch  an die Länge des Sprechersounds angepasst wurden.

 

 

  • In der Timeline der Animation wird unten eine zusätzliche Zeile Speech eingeblendet, dort wird die Sprecherdatei ebenfalls in Form einer Kurve dargestellt. Das hilft die einzelnen gesprochenen Wörter zu erkennen. Starten Sie den Record Modus, indem Sie links in der Timeline den runden blauen Button drücken, der daraufhin rot wird.
  • Erzeugen Sie ein erstes Schlüsselbild gleich auf Frame 1. Setzen Sie einen Key und bewegen Sie den Slider (den senkrechten roten Balken) in der Timeline, dann wird das erste Wort im Text eingefärbt. Die Farbe selbst können Sie über das Feld Highlight Color im Animations Inspector beeinflussen. Unterhalb der Hüllkurve bei Speech wird das erste Wort des Textes eingeblendet.

 

 

  • Nach weiteren Keyframes sehen Sie bei Verschieben des Sliders Wort für Wort eingefärbt. Eventuell müssen Sie einzelne Markierungen genauer platzieren. Verschieben Sie dazu ggf. die bereits erzeugten Keys in der Timeline. Sie können sowohl im Edit- als auch im Preview-Modus die Highlight-Funktion testen.

 

 

Über die Funktion Export Highlight Data im Animations Inspector können so erstellte Highlight-Daten (oder auch Labeldaten) als Textdatei exportiert und in anderen Szenen importiert werden. Dies erlaubt ein arbeitsteiliges Produzieren der Szenen; eine Person erstellt die Animationen, während eine zweite die Keys für das Word Highlighting setzt.

Gibt es mehr als eine Textbox in einer Szene und soll der Text vorgelesen werden, achten Sie auf die Reihenfolge. Die Textbox, die im Scene Navigator weiter oben liegt, wird zuerst vorgelesen! Nutzen beide Textboxen Word Highlighting, kann über Next Speech im Animations Inspector die nächste verlinkt werden – diese wird dann abgespielt, nachdem die erste Textbox fertig ist.

 

Text in mehrsprachigen Projekten

Verwenden Sie in Ihrem Projekt mehrere Sprachen, können Sie im Editor-Modus von TigerCreate über die Language-Taste (oberhalb der Arbeitsfläche) zwischen den einzelnen Sprachen wechseln. Alle Textboxen, die Sie in einer Sprache angelegt haben, existieren automatisch auch in allen anderen Sprachen. Sie haben dort dieselben Eigenschaften wie Name, Local Order, Position, Rotation sowie dieselben Ausmaße in Breite und Höhe. Was sie unterscheidet ist, dass die einzelnen Textboxen in anderen Sprachen noch ohne Textformatierung sind. Haben Sie also in der deutschen Version eine Textbox angelegt, mit Text gefüllt und diesen in Helvetica, 64 Punkt, rechtsbündig, hellgrün formatiert, wird die Textbox in anderen Sprachversionen zunächst nur Beispieltext in der voreingestellten Formatierung* zeigen, also zum Beispiel Times New Roman, 18 Punkt, linksbündig, schwarz. Der Vorteil liegt darin, dass Sie in jeder Sprache beliebig unterschiedliche Fonts und Formatierungen verwenden können.

*Die voreingestellte Formatierung finden Sie in den Project Settings/Default Text Options. Sie gilt für das gesamte Projekt und gibt vor, in welcher Weise ein Textfeld per Default formatiert ist.

Back To Top

Einbinden von Sounds

Sounds können durchgehende Hintergrundgeräusche, Musikstücke, einzelne Effektgeräusche oder Sprachdateien sein. Sie alle dienen dazu Szenen lebendiger zu machen. Fliegt ein Vogel durchs Bild, erwartet man ein Flattern oder Piepen. Fällt ein Gegenstand zu Boden, macht ein Aufprallgeräusch die Animation glaubwürdig. Ein Bild von einem Restaurant wird automatisch lebendig, wenn im Hintergrund Murmeln oder das Klappern von Geschirr zu hören ist.

In TigerCreate 2 binden Sie Hintergrundgeräusche (oder Ambient Sound) für eine komplette Szene im Scene Inspector ein. Oder Sie verknüpfen einzelne Sounds direkt mit einer Animation – entweder im Animations Inspector als festen Bestandteil der Animation oder im Object Inspector mit dem auslösenden Objekt. Gesprochenen Text, der den Text einer Textbox oder einer Text Blade vorliest, verknüpfen Sie über den Animations Inspector mit einer Animation der Textbox.

_____

Achtung: Achten Sie bitte darauf, nur Sounds mit konstanter Bitrate zu verwenden, sogenannte CBR(Constant-Bit-Rate)-Sounds. Andere mit variabler Bitrate (VBR) sind nicht erlaubt.

_____

Im Gegensatz zu Bildern und Texten werden Sounds, die Sie in einer Szene verwenden, nicht im Scene Navigator aufgelistet. Dafür haben Sie im Scene Inspector die Möglichkeit unter Scene Sounds Properties eine Übersicht aller Animation- und Event-Sounds zu sehen:

Die Funktion See All Sounds zeigt ein Übersichtsfenster mit allen in der Szene verwendeten Sounds. Angezeigt wird der Name des Sounds, wie er im Finder angelegt ist, dazu das Objekt, mit dem er verknüpft ist, sowie die Art der Verknüpfung – also als Animations-Sound oder als Touch Event-Sound. Sind noch keine Sounds mit der Szene verknüpft, bleibt die Liste entsprechend leer.

 

 

Hintergrundsound (Ambient Sound)

 Atmosphärische Geräusche als Untermalung einer Szene sind meist sehr wirkungsvoll. Da sie ständig wiederholt werden – also einen sogenannten Soundloop bilden –, sollten Sie sehr auffällige Einzelgeräusche wie ein Telefonklingeln zurückhaltend einsetzen. In der Regel benötigt ein Hintergrundsound nicht mehr als ca. 30 Sekunden Länge; er sollte nicht abrupt enden und möglichst übergangslos mit dem Beginn des Sounds zusammenpassen, um als Loop unauffällig zu laufen.

 

 

  • Öffnen Sie (links) den Project Navigator und dort den Ordner Sounds, in dem Ihr Hintergrundsound liegt.
  • Öffnen Sie den Scene Inspector (rechte Leiste) und ziehen Sie die ausgewählte Sounddatei auf das leere Feld neben Ambient Sound. Daraufhin erscheint der Sound als verkleinerte Darstellung, dazu können Sie die Lautstärke einstellen.
  • Klicken Sie den Play-Button ▶ , um den Sound anzuhören, klicken Sie auf das – Symbol bei Ambient Sound, um den Sound wieder aus der Szene zu entfernen.

Normalerweise startet ein Ambient Sound unmittelbar nachdem die Szene geladen ist. Möchten Sie aber, dass der Hintergrundsound mit einer Verzögerung startet (beispielsweise weil es Ihre Startszene ist, die zunächst nur den Titel zeigen soll), können Sie mit einem kleinen Trick arbeiten:

  • Binden Sie den Hintergrundsound nicht als Ambient Sound im Scene Inspector ein, sondern verknüpfen Sie ihn mit einer Animation, die Sie loopen lassen (Loop = 0, dann wird der Sound unendlich wiederholt). Dann kann diese Animation auch eine Verzögerung (Delay) haben.
  • Richten Sie die Animation als Start-Animation ein. Sobald der Delay vorbei ist, startet die Animation und damit auch der Sound, und ab da wird der Sound geloopt – ohne Delay.*

* Beachten Sie: Eine eingestellte Audio Delay Time dagegen würde bei einem Loop immer wieder neu beachtet.

 

Animation- und Event-Sounds

Animation-Sounds setzen Sie beim Abspielen von Animationen ein. Sounds lassen Bewegungen glaubwürdiger erscheinen, sie verstärken den Effekt, den die reine Bewegung erzielt. Denken Sie an ein hüpfendes Känguru; mit einem ‚Boing‘-Geräusch beim Absprung wirkt das Hüpfen anders.

Prinzipiell können Sie mehrere Sounds gleichzeitig mit einer Animation verknüpfen. Diese werden dann gleichzeitig abgespielt, nicht nacheinander! Das kann zum Beispiel sinnvoll sein, wenn mehrere Geräusche nicht durchgängig laufen sollen: Ein Apfel fällt vom Baum, begleitet von einem absteigenden Pfeifgeräusch; beim Aufprall ertönt ein dumpfes ‚Pock’. Entweder Sie machen sich die Mühe, beide Geräusche in einem Soundbearbeitungsprogramm zusammenzuschneiden. Oder Sie verknüpfen beide Sounds einzeln mit der Animation und sorgen in TigerCreate dafür, dass sie zur passenden Zeit abgespielt werden, denn TigerCreate 2 ermöglicht umfangreiche Manipulationen von eingebundenen Sounds. Zu unterscheiden sind reine Animation Sounds, die direkt mit einer Animation verknüpft werden und automatisch mit starten, und Event-Sounds, die mit dem die Animation (per Touch) auslösenden Objekt verknüpft sind.

 

Animation Sounds

  • Öffnen Sie (links) den Project Navigator und dort den Ordner Sounds.
  • Öffnen Sie den Animations Inspector (rechte Leiste) und wählen Sie eine Animation aus.

(Hinweis: Es werden immer nur Animationen angezeigt, wenn ein Objekt auf der Bühne ausgewählt ist, für das Animationen angelegt wurden.)

 

 

  • Ziehen Sie die ausgewählte Sounddatei auf das leere Feld unter Animation Sounds. Daraufhin erweitert sich das Feld nach unten und bietet folgende Optionen:
    • In der Soundliste wird der Sound mit Namen und Abspieldauer angezeigt.

(Hinweis: Die aktuelle Abspieldauer hängt u.a. auch von der Anzahl Loops der Animation ab. Wird die Animation zweimal abgespielt, wird auch der Sound zweimal gestartet, die Abspieldauer verlängert sich entsprechend. Es handelt sich also um die Gesamtabspieldauer des Sounds.)

  • Am unteren Ende der Liste ermöglicht das – Symbol links das Löschen eines ausgewählten Sounds aus der Liste. Das umrandete + Symbol rechts und das daneben befindliche umrandete Pfeilsymbol erlauben Kopieren von Sounds mitsamt den vorgenommenen Einstellungen und Einsetzen in andere Animationen.
  • Audio Delay Time: Normalerweise startet ein Sound automatisch synchron mit der Animation. Die Delay Time sorgt dafür, dass ein Sound nicht sofort startet, sondern verzögert. Geben Sie z.B. 2 Sec vor, startet die Animation normal, der Sound aber erst 2 Sekunden später. Denken Sie an das Beispiel des Apfels von oben; der Aufprall erfolgt erst verzögert. (Hinweis: Änderungen an der Delay Time verändern auch die angezeigte Abspieldauer des Sounds. Wird die Animation wiederholt (Loops > 1) startet auch der Sound neu, die Verzögerung wird ebenfalls berücksichtigt.).

 

 

  • Start Time: Möchten Sie, dass ein Sound nicht vollständig von Beginn an abgespielt wird, können Sie hier eine Zeit vorgeben. Das Ergebnis sehen Sie in der verkleinerten Hüllkurven-Darstellung des Sounds. Eine veränderte Start Time wird angezeigt, indem der nicht abgespielte Anfangspart hellgrau abgedimmt wird.

 

 

  • End Time: Möchten Sie, dass ein Sound nicht bis zum Ende abgespielt wird, können Sie hier eine Zeit vorgeben. Das Ergebnis sehen Sie in der verkleinerten Hüllkurven-Darstellung des Sounds. Eine veränderte End Time wird angezeigt, indem der nicht abgespielte Endpart hellgrau abgedimmt wird.

 

 

  • Trimmed Audio zeigt die (einmalige) Abspieldauer des Sounds nach Manipulation von Start oder End Time; Delay hingegen hat keinen Einfluss auf die Trimmed Audio-Zeit.

Achtung: Ob ein Sound vollständig bis zum Ende abgespielt wird bzw. so lange, wie von Ihnen per Delay, Start und End Time konfiguriert, hängt auch vor allem von der weiter oben eingestellten Loop Time der Animation ab, also der Zeit, die die Animation benötigt um einmal komplett abgespielt zu werden. Beträgt die Loop Time beispielsweise 4 sec, wird auch ein Sound nach spätestens 4 sec beendet! Ist unter Loops für die Animation eine höhere Anzahl von Wiederholungen eingestellt, wird der Sound bei jedem Loop-Beginn neu gestartet. Anders verhält es sich, wenn zusätzlich noch die Option Ping Pong aktiviert wurde (die Animation läuft quasi vor und wieder zurück), dann läuft der Sound so lange, bis der Anfangspunkt der Animation wieder erreicht wurde (also doppelt so lang wie bei einem einzelnen Durchlauf) und startet erst dann wieder neu!

Während Sie bei Ambient Sounds und Event-Sounds die Lautstärke direkt im Scene Inspector bzw. im Object Inspector einstellen können (s.u.), ist dies bei Animation Sounds nicht unmittelbar im Animations Inspector möglich. Der Grund ist der, dass wir Ihnen bei der Soundsteuerung von Animation Sounds noch mehr Möglichkeiten an die Hand geben:

  • Ein Sound, den Sie als Animation Sound an eine Animation anhängen, erhält in der Timeline des Animators eine eigene Zeile.

 

 

  • In dieser können Sie die Lautstärke zu unterschiedlichen Zeitpunkten durch Setzen von Keys beeinflussen. Wann immer Sie einen Key in die Zeile Audio setzen, springt das von Animationsübergängen (Ease In, Ease Out) bekannte PopUp auf. Dort können Sie die Lautstärke des Sounds für den jeweiligen Zeitpunkt mit einem Wert von 0 bis 100 festlegen und bestimmen, ob die Lautstärkeänderung zwischen zwei Keys kontinuierlich (linear) angepasst wird oder abrupt geschieht.

 

 

Event-Sounds

 Event-Sounds bieten eine weitere Möglichkeit, Sound zu einer Animation zu starten. Dabei wird der Sound nicht mit der Animation selbst verknüpft sondern mit dem Objekt, das die Animation per Touch auslöst/startet. Dies könnte auch das animierte Objekt selbst sein, meistens werden Sie aber Nodes als auslösende Schaltfläche verwenden.

Die Verknüpfung geschieht über das Touch Event im Object Inspector und ist zum Beispiel dann sinnvoll, wenn eine Animation durch unterschiedliche Events ausgelöst werden soll und ein bestimmter Sound an bestimmte Events gebunden sein soll.

Auch bei Event-Sounds haben Sie die gleichen Manipulationsmöglichkeiten für den Sound wie bei Animations-Sounds – Delay, Start Time, End Time. Zusätzlich können Sie hier die Lautstärke (Volume) für den Sound und die Anzahl Wiederholungen (die hier nicht an die Anzahl Loops der Animation gebunden ist!) einstellen.

 

 

Sprechersounds

 Gesprochene Sprache, zum Beispiel eine Erzählerstimme, die den vorhandenen Text vorliest, stellt eine Sonderkategorie von Audiodateien dar.

Fall a)

Handelt es sich um eine reine Offsprecherstimme ohne angezeigten Text, …

  • erzeugen Sie im Scene Navigator eine neue (leere) Textbox und platzieren Sie sie außerhalb der Bühnenfläche.
  • erzeugen Sie im Animations Inspector eine Startanimation für die Textbox, verknüpfen Sie den Sprechersound über die Funktion Speech Sound mit dieser Animation.

Die Sprecherstimme wird nun bei Start der Szene als Teil der (nicht sichtbaren) Textbox-Animation abgespielt.

Fall b)

Soll die Offsprecherstimme erst nach Klick auf ein Objekt auf der Bühne gestartet werden, verknüpfen Sie ihn als Event-Sound wie weiter oben beschrieben über den Object Inspector mit einem Objekt; dies kann ein Bildobjekt, eine Textbox (nun sichtbar und den Text enthaltend) oder ein (unsichtbarer) Node sein, der über einem markanten Bereich des Hintergrundbildes liegt. Nun muss keine Animation damit verknüpft sein, das Touch Event bezieht sich auf das Starten des Sounds.

Fall c)

Häufig werden Sie, insbesondere bei Geschichten für Kinder, die Funktion Word Highlighting nutzen wollen. Dabei wird die Sprecherdatei mit einer Textbox verknüpft, die Text enthält, und während des Vorlesens wird jedes einzelne Wort im Text farblich hervorgehoben – gehighlighted. Über eine Startanimation werden dazu in der Timeline gesonderte Keys gesetzt, die die einzelnen Worte trennen.

 

 

Da eine Erzählerstimme in der Regel die wichtigste Audioquelle ist, werden in diesem Fall alle anderen Sounds etwas leiser abgespielt. Genaueres zum Word Highlighting finden Sie unter Word Highlighting.

Back To Top

Bézierkurven

Bézierkurven sind Pfade mit mehreren Ankerpunkten, über die die Form des Pfades verändert werden kann. Sie tauchen im fertigen E-Book nicht sichtbar auf, denn ihre Funktion besteht darin, als Animationspfad für ein Objekt zu dienen. Ein Objekt, dessen Animation über den Animation Inspector mit einer Bézierkurve als Pfad verknüpft ist, bewegt sich an diesem Pfad entlang bzw. kann daran entlangbewegt werden.

Bézierkurven sind insbesondere dann hilfreich, wenn ein Objekt sich auf einer irgendwie gebogenen Linie bewegen soll. Denken Sie beispielsweise an den parabelförmigen Verlauf der Kurve bei einem Wurf.

Im Gegensatz zu Bildern, Nodes und Textboxen können Bézierkurven keine eigenen Animationen haben. Sie können sie aber skalieren, rotieren und platzieren, wie und wo immer Sie sie benötigen.

Eine neue Bézierkurve erstellen Sie, indem Sie im Scene Navigator am oberen Rand auf das + Symbol klicken und aus dem PopUp-Menü Bézier wählen. Im einfachsten Fall besteht eine Bézierkurve aus zwei Punkten, Anfangs- und Endpunkt.

 

 

Oben links von der erzeugten Bézierkurve gibt es ein kleines Rechteck mit einer Pfeilspitze – diese zeigt an, dass sich die Bézierkurve im Transformations-Modus befindet. In dieser Ansicht können Sie die Bézierkurve als Ganzes skalieren, rotieren, verschieben.

 

 

Klicken Sie in das Rechteck um in den Edit-Modus für die Bézierkurve zu wechseln die Pfeilspitze ändert sich zu einem Stift.

 

 

_____

Achtung: Ist der Edit-Modus einer Bézierkurve aktiviert, sind alle anderen Objekte und Animationen vorübergehend gesperrt. Sie können nicht markiert werden, bis der Edit-Modus der Bézierkurve beendet ist.

_____

 

Im Edit-Modus lassen sich Anfangs- und Endpunkt der Kurve manipulieren. Sie können sowohl die einzelnen Punkte (Points) verschieben als auch über deren Controller den Verlauf der Kurve entscheidend verändern.

 

 

Während Anfangs- und Endpunkt einer Kurve mit je einem Controller auskommen, besitzt jeder Punkt auf der Kurve zwei Controller, um den Verlauf (Krümmung) vor und nach dem Punkt zu beeinflussen. Ein ausgewählter, aktiver Controller ändert seine Farbe von Blau auf Rot. Bei Rechtsklick auf einen Controller lässt sich die sogenannte Mirror-Funktion aktivieren: Beide Controller eines Punktes liegen sich dann gespiegelt gegenüber; bewegt man den einen, wird der gegenüberliegende spiegelverkehrt mitbewegt.

 

 

Setzen Sie weitere Punkte zur Verlängerung der Kurve, indem Sie einfach irgendwohin klicken. Klicken Sie hingegen direkt auf die Kurvenlinie, fügen Sie dort einen weiteren Punkt ein.

Entfernen Sie Punkte über das PopUp-Menü (Delete Point) per Rechtsklick auf einen Punkt.

 

 

Verändern Sie die Kurve weiter, indem Sie Points hinzufügen, diese verschieben oder mittels ihrer Controller manipulieren. Zum Verschieben wählen Sie einen oder mehrere Punkte gleichzeitig durch Anklicken bzw. durch Aufziehen eines Auswahlrechtecks aus.

 

 

Klicken Sie oben links auf das Stift-Icon, um den Edit-Modus wieder zu verlassen und den Transformations-Modus zu aktivieren.

 

 

Möchten Sie eine Bézierkurve besonderer Form speichern, nutzen Sie den Button Export As Shape (s.u.).

 

 

Bézier Properties (Object inspector)

Der Object Inspector zeigt bei Auswahl einer Bézierkurve deren Eigenschaften. Dort können sie auch direkt verändert werden.

 

 

  • Closed – sorgt dafür, dass die Endpunkte der Bézierkurve miteinander verbunden werden, dadurch wird die Kurve geschlossen.
  • Reverse Points – vertauscht Anfangs- und Endpunkt der Bézierkurve, so dass sie umgekehrt (von rechts nach links) durchlaufen wird.
  • Convert to – bietet in einem PopUp-Menü verschiedene geometrische Figuren (Kreis, Viereck, …) sowie zuvor abgespeicherte Pfade (s.u.) an, in die die aktuelle Kurve umgewandelt werden kann.
  • Export As Shape – exportiert die Bézierkurve unter einem frei wählbaren Namen. Die abgespeicherte Kurve kann so als Vorlage in anderen Szenen verwendet werden (s.o. Convert to).
  • Global Points – listet tabellarisch alle Punkte und Controller der Bézierkurve auf. Befindet sich die Kurve im Edit-Modus, können die Werte auch direkt innerhalb der Liste manipuliert werden. Die Spalten X und Y geben die Position in der Ebene an, Z kommt hinzu, wenn die Kurve auch räumlich verzerrt wird (3D-Raum) – Z gibt dann die Tiefe im Raum an. Z = 0 bedeutet, dass der Point auf derselben Ebene liegt wie das Hintergrundbild; positive Werte liegen davor bzw. darüber, negative Werte lassen einen Point hinter der Hintergrundebene verschwinden.

 

Animationen mit Bézierkurven verknüpfen (Animations Inspector)

 Um ein Objekt auf einer Bézierkurve bewegen zu können, erzeugen Sie zunächst im Animations Inspector eine Animation.

 

 

Geben Sie eine nicht zu geringe Zahl bei Number of Frames ein und stellen Sie die Loop Time großzügig ein. Verknüpfen Sie die Animation anschließend mit einer Bézierkurve, indem Sie unter Follow Path eine Bézierkurve aus dem PopUp-Menü auswählen und als Pfad zuordnen (angezeigt werden nur Bézierkurven, die sich in der aktuellen Szene befinden).

 

 

Nun wird das betreffende Objekt die Animation entlang der gewählten Bézierkurve ausführen. Im einfachsten Fall findet eine bloße Positionsänderung entlang der Bézierkurve vom Start- zum Endpunkt der Kurve statt. In der Timeline des Animators wird die Zeile Position ersetzt durch Path Movement. Sie können weitere Änderungen über Rotation, Scale oder Opacity vornehmen. Außerdem können Sie in der Timeline des Animator die Easing-Funktion nutzen, um die Bewegung entlang der Kurve dynamischer zu gestalten (Tipp: Das Easing ist dabei unabhängig von der Länge der Controller).

 

 

Eine andere Art der Verknüpfung einer Animation mit einer Bézierkurve findet über Drag Along statt. Nun findet die Bewegung sukzessive in Abhängigkeit vom User statt. Das Objekt kann ‚angefasst’ und entlang des Pfades vor und zurück bewegt werden. Es bleibt auf der Stelle und unverändert, sobald es ‚losgelassen‘ wird. Rotation, Skalierung und Deckkraft verändern sich abhängig vom Fortschritt der Animation auf der Strecke genau wie bei einer selbstständig ablaufenden Animation. Die Geschwindigkeit der Bewegung ist bei Drag Along unabhängig von der eingestellten Loop Time, sie ist programmseitig festgelegt. Die Option Loops (Anzahl der Durchläufe) ist in diesem Modus inaktiv.

 

 

__________

Achtung:

Drag Along setzt voraus, dass die Animation als Startanimation deklariert ist oder dass andernfalls das zu bewegende Objekt ein Touch Event hat! Das bedeutet, Sie müssen im Object Inspector Has Touch Event für das Objekt aktivieren und die entsprechende Animation damit verknüpfen.

Eine eventuell zuvor eingestellte Delay Time sollten Sie vor der Aktivierung von Drag Along auf 0 zurücksetzen!

__________

Einsatz von Bézierkurven im 3D-Raum

Bézierkurven in 3D-Szenen sind eine gute Ergänzung, um Animationen mit räumlicher Tiefe noch realistischer erscheinen zu lassen. Dabei ist es wichtig, dass auch die Bézierkurve selbst eine räumliche Tiefe bekommt, indem die einzelnen Points auf unterschiedlichen Ebenen liegen. Das erreichen Sie durch unterschiedliche z-Position-Werte.

Anmerkung: Die folgenden Beispiele finden Sie auch im Abschnitt Einsatz von 3D in TigerCreate.

Im folgenden Beispiel lassen wir einen Ball von vorne nach hinten ins Bild kleiner werden. Dabei ist die Animation über Follow Path an eine Bézierkurve gekoppelt, die den Pfad vorgibt.

 

 

Dadurch dass die z-Position des Balls von 1000 zu Beginn auf 0 am Ende verändert wird, findet auch eine räumliche Bewegung von vorne nach hinten statt. In der 2D-Ansicht gibt es dabei kaum einen Unterschied zu einer klassischen 2D-Animation, bei der der Ball einfach kleiner skaliert wird. Erst in der gekippten 3D-Ansicht wird der Raumweg deutlicher.

 

 

Was aber auch zu sehen ist: Das Ganze funktioniert nur, weil auch der Pfad, also die Bézierkurve, räumlich angeordnet ist. Das heißt der Anfangspunkt der Kurve liegt deutlich weiter vorne als die beiden weiteren Points.

Im folgenden Bild sind rechts die Koordinatenwerte für alle Points und deren Controls zu sehen. In der dunkel unterlegten Spalte sehen Sie die z-Position-Werte der drei Punkte. Point 1 ist der Anfangspunkt und liegt wie der Ball auf z = 1000, also weit vor dem Hintergrund, Point 2 hat noch z = 200, während Point 3 bereits mit z = -1 im Hintergrund verschwindet.

 

 

Noch deutlicher wird dies, wenn wir die Bézierkurve von der Seite betrachten mit dem Hintergrund auf der rechten Seite.

 

 

Nun kann man einwenden, dass der Ball ja eh flach ist und der Aufwand für eine räumliche Animation kaum lohnt. Eindrucksvoller werden die Möglichkeiten aber, wenn es um verschachtelte Objekte – Parent-Child-Beziehungen – geht, in denen die Child-Objekte bewegt werden:

Nehmen wir einen Schmetterling, dessen Flügel sich permanent bewegen. Der Ankerpunkt jedes Flügels liegt am Rand (zum Körper des Schmetterlings hin), durch Rotation um die y-Achse findet die Bewegung jedes Flügels statt. Alle drei Teile – Flügel und Körper – sind Child-Objekte eines Nodes, der das Parent-Objekt darstellt. (Zur Verschachtelung von Objekten zu Parent-Child-Objekten siehe Abschnitt Animationen von verschachtelten Objekten).

 

 

Dieses Parent-Objekt wird anschließend wie zuvor der Ball mithilfe einer Bézierkurve animiert. Innerhalb der Bewegung rotiert der Schmetterling als Ganzes (also das Parent-Objekt – um alle drei Achsen x, y und z-Achse. Am Startpunkt hat der Schmetterling eine z-Position = 1000 (ebenso wie der Anfangspunkt der Bézierkurve), am Ende ist z = 100; da das verschachtelte Objekt auf dem Pfad auch räumlich gedreht wird, würde bei z = 0 ein Flügel hinter dem Hintergrundbild liegen und damit verschwinden.

Das Ergebnis sieht schon in der 2D-Ansicht gut aus.

 

 

Aber in der 3D-Ansicht (hier schräg gekippt) wird deutlich, das der Schmetterling durch die Flügelrotation auch Tiefe bekommt. In einer reinen 2D-Szene hätte man die Flügelbewegung durch Skalierung in der Ebene simuliert.

 

 

Die folgende Abbildung zeigt den Schmetterling mitsamt seines Bewegungspfades, dessen z-Positionswerte für Anfangs- und Endpunkt unterschiedlich sind (A: z = 1000, B: z = 100).

 

Back To Top

Einsatz von 3D

Einsatz von 3D in TigerCreate

Ab Version 2.0 unterstützt TigerCreate auch 3D. Mithilfe dieser Funktionen haben Sie zusätzliche Möglichkeiten Objekte zu animieren bzw. zu transformieren. Objekte können nun um alle drei Achsen (x, y, und z) rotiert werden. Alle Positionswerte werden nun mit den drei Koordinaten x, y, z angegeben, wobei z die räumliche Achse in die Tiefe darstellt. (Zur Erinnerung: In 2D-Szenen findet die Rotation eines Objekts um die z-Achse statt, während x und y horizontale und vertikale Positionswerte darstellen.)

Durch Rotationen im Raum lassen sich zum Beispiel mehrere 2D-Objekte zu einem 3D-Objekt kombinieren (im Beispiel links die 2D-Ansicht aus mehreren einfachen Teilen, Mitte und rechts in der gekippten 3D-Ansicht).

 

 

Um die 3D-Möglichkeiten zu nutzen, aktivieren Sie in den Scene Generic Properties (siehe Scene Inspector) die Option 3D.

 

 

In der Toolbar steht Ihnen außer den Buttons zum Wechsel zwischen 2D- und 3D-Ansicht auch das 3D-Tool zur Verfügung. Mit aktiviertem 3D-Tool bekommt ein ausgewähltes Objekt zusätzliche Optionen: Zu dem blauen Ring für Rotationen, den Sie aus der 2D-Ansicht kennen, kommen zwei weitere hinzu; ein roter für die Rotation um die x-Achse, ein grüner für die Rotation um die y-Achse. Zum Skalieren eines Objekts ziehen Sie an einem der Anfasser des umgebenden Rechtecks; bei gleichzeitig gedrückter SHIFT-Taste skaliert das Objekt proportional. Die folgende Abbildung zeigt drei verschiedene Phasen der Manipulation eines verschachtelten Objekts (Schmetterling) mit dem 3D-Tool.

 

 

Im Bild unten ist zu sehen, dass bei Rotation um eine der Achsen das Objekt teilweise verschwindet, da das Objekt im Beispiel auf der Hintergrundebene liegt – durch die Rotation liegt ein Teil des Objekts hinter dem Hintergrundbild; dazu weiter unten mehr.

 

 

Um die Gesamtansicht räumlich zu verändern – kippen oder rotieren – nutzen Sie in 3D-Szenen die Tastenkombination ALT + Linke Maustaste; der Betrachtungsmodus schaltet dann von 2D auf 3D. Damit steuern Sie nicht die Objekte selbst, sondern bewegen die Kamera und verändern so den Blickwinkel auf die Szene. Oben rechts im Arbeitsbereich erscheinen x- y- und z-Achse als Diagramm zur besseren Orientierung.

 

 

Besonderheiten

Folgende Besonderheiten gilt es in 3D-Szenen zu beachten:

  • Während in 2D-Szenen vorne und hinten (und damit räumliche Tiefe) über den Local Order-Wert bestimmt wird, hat in 3D-Szenen die z-Position eines Objekts Vorrang! Das bedeutet, dass ein Objekt, das einen hohen Local Order-Wert hat, möglicherweise dennoch hinter anderen Objekten liegt, weil deren z-Positionswert höher ist. Dabei steht ein Wert z-Position = 0 für eine Position unmittelbar auf der Hintergrundebene, positive Werte räumlich weiter vorne, negative Werte weiter hinten (also quasi auf der Rückseite).
  • Befinden sich mehrere Objekte auf der gleichen z-Positionsebene, kommt die Local Order wieder ins Spiel und entscheidet anhand des höheren Wertes darüber, welches Objekt weiter vorne liegt. Die Local Order der Objekte wird auch immer durch den Scene Navigator dargestellt. Objekte höherer Local Order liegen darin weiter unten. Die z-Position steht hingegen für die Lage des Objekts im Raum.

Bei einem semi-transparenten Objekt – wenn beispielsweise die Deckkraft herabgesetzt wurde, um andere, weiter hinten liegende Objekte sehen zu können – muss dieses Objekt also eine höhere Local Order haben als andere Objekte auf derselben räumlichen Ebene. Das Gleiche gilt, wenn Objekte ‚weiche’, also unscharfe Kanten haben.

Schwierig wird es bei Objekten mit weichen Kanten, die einander auf derselben z-Ebene durchdringen. Auch bei unterschiedlichen Local Order-Werten, die dafür sorgen, dass eins der Objekte weiter vorne liegt, kann es zu Problemen in der Darstellung der Ränder kommen, zumal durchscheinende – semi-transparente – Ränder ja sowohl andere Objekte dahinter als auch an anderen Stellen das eigentliche Hintergrundbild durchscheinen lassen.

Die folgende Grafik zeigt die Problematik anhand zweier Objekte auf derselben z-Ebene, die aufgrund von Rotation um die y-Achse einander durchdringen: Links im Bild mit harten Kanten (unproblematisch), mittig und rechts mit weichen Kanten.

 

 

Wenn Sie zu einem späteren Zeitpunkt die 3D-Option deaktivieren und die Szene wieder zu einer 2D-Szene machen, werden alle z-Position-Werte wieder auf 0 gesetzt, alle Rotationen um x- oder y-Achse werden rückgängig gemacht und die eingestellten Local Order-Werte entscheiden über die Anordnung und Schichtung der Objekte.

  • Skalierung: Auch wenn animierte Objekte 2D-Bilder sind, haben sie für alle drei Koordinaten x, y, z Skalierungswerte (scale). Zwar können 2D-Bilder nicht räumlich in die Tiefe verzerrt werden, aber bei Parent-Child-Beziehungen zwischen mehreren Objekten ist es wichtig für Rotationen. Führen Sie Skalierungen gegebenenfalls für alle drei Koordinaten mit den gleichen Werten aus, also beispielsweise x = 0.5, y = 0.5, z = 0.5. Geben Sie die Werte entweder direkt in die entsprechenden Felder der Default bzw. Key Transformation Properties ein oder ziehen Sie zum proportionalen Skalieren bei gleichzeitig gedrückter SHIFT-Taste an einem der Anfasser des Objekt umgebenden Rechtecks.
  • Kamera: In 3D-Szenen ist die Kameraansicht perspektivisch. Objekte, die näher zur Kamera (also auch näher zum Betrachter) liegen, scheinen daher ihre Position relativ zum Hintergrundbild zu verändern – ändern Sie beispielsweise den z-Position-Wert für ein Objekt von 0 auf 200, ohne die übrigen Werte zu verändern.

Was auf den ersten Blick ein Nachteil zu sein scheint, erweist sich beim Ausprobieren rasch als Vorteil:

Im folgenden Beispiel ist die Tür ein 2D-Objekt. Links ist zu sehen, dass der Ankerpunkt an den rechten Rand, wo die Scharniere sitzen, verschoben wurde. Im rechten Teil ist dann die Tür um 45 Grad um die Y-Achse gekippt/rotiert. Durch die Kameraperspektive (hier noch in der 2D-Ansicht) zeigt sich die Tür ohne weitere Manipulationen mit räumlicher Tiefe.

 

 

Noch deutlicher wird es in der gekippten 3D-Ansicht. Das Objekt ragt räumlich aus dem Bild hervor.

 

 

  • In 3D-Szenen ist die Option Scratchable für Animationen nicht einsetzbar!

 

Arbeiten in 3D

 Im folgenden Beispiel lassen wir einen Ball von vorne nach hinten ins Bild kleiner werden. Dabei ist die Animation an eine Bézierkurve gekoppelt (Follow Path), die den Pfad vorgibt.

 

Dadurch dass die z-Position des Balls von 1000 zu Beginn auf 0 am Ende verändert wird, findet auch eine räumliche Bewegung von vorne nach hinten statt. In der 2D-Ansicht gibt es dabei kaum einen Unterschied zu einer klassischen 2D-Animation, bei der der Ball einfach kleiner skaliert wird. Erst in der gekippten 3D-Ansicht wird der Raumweg deutlicher.

 

 

Was aber auch zu sehen ist: Das Ganze funktioniert nur, wenn auch der Pfad, also die Bézierkurve, räumlich angeordnet ist. Das heißt der Anfangspunkt der Bézierkurve liegt deutlich weiter vorne als die beiden weiteren Punkte. Dies ist machbar mit dem neuen Bézierkurvenwerkzeug von TigerCreate. Im folgenden Bild sind rechts die Koordinatenwerte für alle Punkte und deren Controller zu sehen. In der dunkel unterlegten Spalte sehen Sie die z-Position-Werte der drei Punkte. Point 1 ist der Anfangspunkt und liegt wie der Ball auf z = 1000, also weit vor dem Hintergrund, Point 2 hat noch z = 200, während Point 3 bereits mit z = -1 im Hintergrund verschwindet.

 

 

Noch deutlicher wird dies, wenn wir die Bézierkurve von der Seite betrachten mit dem Hintergrund auf der rechten Seite.

 

 

Nun kann man einwenden, dass der Ball ja eh flach ist und der Aufwand für eine räumliche Animation kaum lohnt. Eindrucksvoller werden die Möglichkeiten aber, wenn es um verschachtelte Objekte – Parent-Child-Beziehungen – geht, in denen die Child-Objekte bewegt werden:

Nehmen wir einen Schmetterling, dessen Flügel sich permanent bewegen. Der Ankerpunkt jedes Flügels liegt am Rand (zum Körper des Schmetterlings hin), durch Rotation um die y-Achse findet die Bewegung jedes Flügels statt. Alle drei Teile – Flügel und Körper – sind Child-Objekte eines Nodes, der das Parent-Objekt darstellt.

 

 

Dieses Parent-Objekt wird anschließend wie zuvor der Ball mithilfe einer Bézierkurve animiert. Innerhalb der Bewegung rotiert der Schmetterling als Ganzes (also das Parent-Objekt – um alle drei Achsen x, y und z-Achse. Am Startpunkt hat der Schmetterling eine z-Position = 1000 (ebenso wie der Anfangspunkt der Bézierkurve), am Ende ist z = 100; da das verschachtelte Objekt auf dem Pfad auch räumlich gedreht wird, würde bei z = 0 ein Flügel hinter dem Hintergrundbild liegen und damit verschwinden.

Das Ergebnis sieht schon in der 2D-Ansicht gut aus.

 

 

Aber in der 3D-Ansicht (hier schräg gekippt) wird erst deutlich, dass der Schmetterling durch die Flügelrotation auch Tiefe bekommt. In einer reinen 2D-Szene hätte man die Flügelbewegung durch Skalierung in der Ebene simuliert.

 

 

_____

Achtung: Es ist wichtig, dass gegebenenfalls bei einer Skalierung des gesamten Schmetterlings unbedingt auch der Wert für z-Scale angepasst wird (s.o. zum Thema Skalierung)! Dieser Wert ist entscheidend für die räumliche Tiefenausdehnung des gesamten Objekts, auch wenn dies in der 2D-Ansicht nicht sichtbar wird. Im nachfolgenden Bild sehen Sie links den Schmetterling mit gleichmäßiger Skalierung für x, y und z, rechts wurde nur x und y skaliert.

 

 

_____

Die folgende Abbildung zeigt den Schmetterling mitsamt seines Bewegungspfades, dessen z-Positionswerte wie im obigen Beispiel mit dem Ball für Anfangs- und Endpunkt unterschiedlich sind (A: z = 1000, B: z = 100).

 

 

Auf dem letzten Bild wird das Schmetterlingsobjekt in drei Phasen seiner Flugbahn mit dem 3D-Tool dargestellt. Anhand der farbigen Rotationsringe sind die Veränderungen der Lage im Raum erkennbar.

 

3D in AR-Szenen 

(Siehe zu diesem Thema vor allem auch Augmented Reality).

Unter Einsatz der 3D-Möglichkeiten von TigerCreate haben Sie zusätzliche Optionen, um Szenen im Augmented Reality (AR) Modus noch lebendiger wirken zu lassen. So können Sie räumliche Tiefe erzeugen, indem Sie Objekte kameraperspektivisch näher ran oder weiter weg anordnen (Stacking) oder Objekte räumlich so drehen, dass sie aus dem Target image hervorragen (PopUp).

Um die 3D-Funktionen nutzen zu können, müssen Sie im Scene Generic Properties die Option 3D einschalten.

 

 

  • Stacking

Beim sogenannten Stacking ordnen Sie die Objekte räumlich an, sodass bei Bewegung bzw. Kippung des Tablets/Smartphones ein räumlicher Tiefeneffekt entsteht. Über die z-Position stellen Sie für jedes Objekt ein, wie weit es über dem Hintergrundbild bzw. hier über dem Target image liegt. Ausgangswert ist 0, das entspricht der Hintergrundebene; ein Wert z = 100 wäre schon deutlich darüber bzw. davor, negative Werte lassen das Objekt hinter dem Target image verschwinden.

Im folgenden Beispiel wurde das Target image – ein Buchcover – komplett in Einzelteilen nachgebaut. Links das Cover als der Szene zugeordnetes Target image, rechts die bereits angeordneten Objekte für den Nachbau.

 

 

Der Nachbau kann zunächst in 2D erfolgen, um alle Objekte gut platzieren zu können. Für die Bäume links und rechts ist die Funktion Clip deaktiviert, sodass sie über die Ränder hinausragen.

 

 

Anschließend erfolgt in 3D das Stacking, indem die Objekte, die deutlich weiter vorne liegen sollen, beispielsweise der Rahmen, die Figuren und die Bäume, höhere Werte für die z-Position erhalten (der Rahmen hat z = 200, die Figuren ca. 100). So entsteht eine Art Guckkasten-Effekt.

 

 

Beim räumlichen Drehen in der Preview (mit gedrückter ALT-Taste) wird deutlich, dass Objekte wie Gras, Wiesen, Felder, Himmel, die genau auf die Breite des Target image angelegt wurden, ebenfalls hätten breiter sein dürfen.

Am Beispiel des Bären in der Bildmitte lässt sich der Einsatz der Billboard-Funktion (AR Properties bzw. siehe auch unten) demonstrieren. Im Normalfall ist sie für alle Objekte ausgeschaltet (No value), daher werden alle Assets bei einer räumlichen Bewegung über dem Target image gleichermaßen gekippt und gedreht. In der folgenden Abbildung ist (Mitte und rechts) für den Bären die Billboard-Funktion für alle Achsen aktiviert. Das führt dazu, dass im mittleren und rechten Bild der Bär seine aufrechte Ausgangsposition immer beibehält, egal wie die Umgebung gekippt oder gedreht wird. Auf diese Weise können einzelne Objekte quasi fest verankert und dadurch hervorgehoben werden.

 

 

  • PopUp

Schauen wir uns das folgende Beispiel mit dem Hippo an. Links ist das Target image wie im Buch, rechts daneben die Umsetzung:

 

 

Hier wurden Teile der Szene räumlich gekippt, sodass sie insbesondere bei Bewegen des Tablets wie in einem Popup-Buch aus der Ebene hochklappen. Auf dem folgenden Bild ist zu sehen, dass der Dschungel im Hintergrund eigentlich aus dem Bühnenbereich herausragt.

 

 

Tatsächlich wird er räumlich um die x-Achse gekippt, nachdem der Ankerpunkt an den unteren Rand des Bildes gesetzt wurde. Dieselbe Vorgehensweise wird beim Hippo angewendet. Dadurch treten beide Objekte aus dem Hintergrund hervor.

 

 

Im Normalfall werden diese Objekte feststehend mitbewegt. Das heißt bei Änderung des Betrachtungswinkels um die x-Achse kippen sie so, dass ein räumlicher Eindruck entsteht, bei Kippung um andere Achsen werden sie genauso mitgekippt wie alle anderen Objekte.

 

 

Mit der Funktion Billboard aus den AR Properties (im Object Inspector) lässt sich festlegen, dass ein Objekt auch bei Kippen des Tablets relativ zum Target image seine Ausrichtung beibehält – entweder bezogen auf alle Achsen (und damit auf jede Art von Kippen) oder nur auf bestimmte Achsen. Hier sichtbar in zwei Beispielen:

 

     

 

Back To Top

Augmented Reality

Augmented Reality (AR), also „erweiterte Realität“, ist eine Technologie zur intelligenten Erweiterung der menschlichen Realitätswahrnehmung. Dabei werden die mittels der Kamera eines mobilen Geräts erfassten realen Ansichten mit zusätzlichen digitalen Informationen – Text, Bild, Video oder Sound – angereichert, so dass auf dem Display eine neue, erweiterte Version der Realität sichtbar wird.

Bei TigerCreate bietet die AR-Technologie die Möglichkeit, auf einem mobilen Gerät zum Beispiel eine Verbindung zwischen Print- und Digitalmedium – also zwischen gedrucktem Buch und E-Book – herzustellen. Mit TigerCreate erzeugte interaktive E-Books und Apps bedürfen dazu keiner speziell konzipierten Bücher. Vielmehr ermöglicht es TigerCreate, beliebige bereits vorhandene Bücher mithilfe der AR-Technologie zu erweitern und auf verschiedensten Plattformen zu nutzen.

Der Nutzer richtet die Kamera seines Endgerätes – Smartphone oder Tablet – zum Beispiel auf eine gedruckte Buchseite. TigerCreate erkennt das Bild und zeigt dann automatisch diejenigen AR-Erweiterungen an, die nachträglich für das jeweilige Bild (Buchseite) erstellt wurden. Die gedruckte Buchseite wird durch das Zusammenspiel von Buch und App ‚lebendig‘! Unter Einsatz von  3D-Effekten ergeben sich räumliche Effekte beispielsweise wie bei einem PopUp-Buch. Bereits gedruckte Bücher erhalten so einen digitalen Mehrwert.

 

 

Die Kamera muss auch nicht ständig das Realbild genau anvisieren, in der TigerCreate App erscheint ein FREEZE-Button, der das aktuelle Kamerabild quasi einfriert, sodass das Endgerät auch bewegt werden kann.

 

Einsatz von AR in TigerCreate

Sie können AR für einzelne Szenen einsetzen oder ein komplettes E-Book mit AR-Optionen versehen. Dabei kann der AR-Modus innerhalb einer Szene von vornherein beim Laden der Szene eingeschaltet sein oder durch ein Touch Event, zum Beispiel Antippen eines Objekts innerhalb der Szene, ausgelöst werden.

Vorbereitungen

Um Augmented Reality in TigerCreate zu verwenden, sind mehrere Schritte notwendig:

  • Sie müssen ein sogenanntes target definieren, ein Zielobjekt in der realen Welt, das von der Kamera erfasst und erkannt werden kann und über das später die animierte Szene drübergelegt wird. Ein target kann zum Beispiel eine Illustration in einem Buch sein, eine Buchseite, oder ein Foto. Dieses wird als Target image, also als Bild, im Projektordner abgelegt. Es wird als Vergleichsbild für die Kamera benötigt, erscheint aber nicht selbst im exportierten Projekt.
  • Alle targets, die Sie für ein Projekt verwenden, müssen in einer Datenbank hinterlegt werden. Das heißt, Sie benötigen eine digitale Version ihrer Zielobjekte – eine digitalisierte Illustration oder ein digitales Foto – die sie aufbereiten:
  • Jedes Bild muss entsprechend der Größe Ihrer E-Book-Bühne 2048 Pixel an der längeren Seite betragen, beispielsweise also 2048 x 1400 Pixel für ein Querformat oder 1578 x 2048 Pixel für ein Hochformat.
  • Achten Sie darauf, dass Ihre Bilder im RGB-Modus (8-Bit pro Kanal) sind.
  • Die Bilder sollten von guter Qualität und ausreichendem Kontrast sein.
  • Exportieren Sie die Bilder z.B. aus Photoshop per Save for Web als JPEG bei 100%
  • Benennen Sie ihre Bilder am besten gleich so, dass aus dem Namen hervorgeht, dass sie für AR-Zwecke angelegt wurden. Hängen Sie beispielsweise das Kürzel „AR“ an.
  • Nutzen Sie für Namen nur Standardzeichen und Zahlen bzw. Unterstrich _, also z.B. „Scene03AR.jpg“.
  • Achten Sie darauf, dass die Bilder nicht zu groß werden (< 2,25 MB) oder reduzieren Sie ggf. die Qualität.
  • Verwenden Sie nicht mehr als 100 Target-Bilder pro Datenbank.
  • TigerCreate verwendet für die Darstellung von AR-Inhalten die Vuforia Engine*. Zum Verwalten der Targets Ihres E-Books ist darum die Verwendung des Vuforia Target Managers notwendig.

 

 

  • Registrieren Sie sich dort einmalig. Der Vorgang ist relativ simpel. Klicken Sie anschließend auf „Create Database“, vergeben Sie einen Namen und laden Sie ihre vorbereiteten target-Bilder einzeln hoch:
  • Klicken Sie dazu auf „Add Target“.
  • Geben Sie exakt den Dateinamen als Target Name für das Bild ein, aber ohne die Endung „.jpg“.
  • Setzen Sie den Target Type auf “Single Image“Target Dimension auf „10“.
  • Target Image File sollte dann exakt das Bild mit dem zuvor eingegebenen Namen sein.
  • Nach Klick auf „Add“ wird das Bild in die Datenbank übernommen.
  • Wiederholen Sie diese Schritte für jedes Bild.

 

 

  • Nachdem Sie alle Bilder hochgeladen haben, exportieren Sie die Datenbank.
  • Wählen Sie alle Bilder aus, die Sie als Targets für Ihr Projekt exportieren wollen, indem Sie einen Haken davor setzen.
  • Klicken Sie Download Database.
  • Wählen Sie als Development platform „Android Studio, Xcode or Visual Studio“ und klicken Sie Download.
  • Sie erhalten eine komprimierte Datei (.zip), die nach dem Auspacken Dateien mit den Endungen .dat und .xml enthält. Benennen Sie die Dateien ggf. um in „ar.dat“ und „ar.xml“ und kopieren Sie beide in den ar-Ordner Ihres Projekts, wo bereits Ihre Target-Bilder liegen. (Alle Target-images, die Sie in die Datenbank hochgeladen haben, müssen zusätzlich im ar-Ordner als JPEG-Dateien hinterlegt sein.)

_______

Achtung: Diesen Vorgang – Datenbank-Export und Zuordnung – müssen Sie wiederholen, wenn Sie weitere Bilder in die Datenbank hochladen oder vorhandene austauschen.

* Um Ihr Projekt zu exportieren, benötigen Sie einen Lizenzschlüssel (license key), den Sie zu Testzwecken kostenfrei (mit Vuforia-Wasserzeichen) bei Vuforia erhalten.

Wählen Sie hier die kostenlose „Development“-Option, solange Sie Ihr E-Book noch nicht veröffentlichen sondern lediglich testen wollen.

Falls Sie später AR-Szenen über die Publish-Funktion ausspielen, fallen Lizenzgebühren seitens Vuforia an. Sie müssen dann für jeden Titel, den sie über „Publish“ exportieren und der AR-Szenen enthält, eine Lizenz bei Vuforia erwerben. (Dies gilt nicht für Quick Test und Test Build, nur für das finale Exportieren mittels des „Publish“-Buttons.) Weitere Informationen zu den Lizenzen und den Gebühren finden Sie auf der Webseite von Vuforia.

_______

 

Aufbereiten einer AR-Szene

  •  Wenn Sie im Scene Inspector die Option Use Augmented Reality einschalten, erhalten Sie eventuell einen Warnhinweis, falls noch keine Datenbank-Dateien vorhanden sind.

 

 

  • Laden Sie das für diese Szene benötigte Target aus dem ar-Ordner in das Feld Target Image. Dabei muss es sich um eine Bilddatei handeln, die auch tatsächlich Bestandteil der Datenbank ist, sonst erfolgt ein Warnhinweis.
  • Hatten Sie vorher ein Hintergrundbild für die Szene geladen, wird dieses nun ersetzt durch das importierte Target-Bild. Dies hilft Ihnen bei Erstellung der Szene, die Objekte der Szene genau dort zu platzieren, wo sie über dem Targetbild erscheinen sollen.

 

 

Ob Sie ein Hintergrundbild benötigen, hängt davon ab, ob die AR-Funktion bei Laden der Szene bereits aktiviert wird. Wollen Sie die Szene zunächst ohne AR starten und erst nach einem Touch Event – der User tippt auf ein vorbereitetes Objekt innerhalb der Szene, dies startet den AR-Modus, schaltet die Kamera ein, … – dann ist ein Hintergrundbild sinnvoll und notwendig.

  • Möchten Sie dem Target image lediglich animierte Elemente hinzufügen, die im Original nicht vorhanden sind, ist der prinzipielle Ablauf wie folgt:
    • Aktivieren Sie die AR-Funktion und ordnen Sie das Target image für die Szene zu.
    • Animieren Sie innerhalb der Szene genau wie sonst auch: Importieren Sie Bilder, platzieren und animieren Sie sie.
    • Clipping: Entscheiden Sie für jedes Objekt, das in einer Animation die Ränder der Bühne überschreitet, ob es auch außerhalb der Bühne sichtbar sein soll – beispielsweise eine Wolke, die langsam im Hintergrund durch das Bild zieht und es schließlich verlässt. Soll die Bewegung am Bühnenrand enden bzw. außerhalb der Bühne nicht mehr sichtbar sein, aktivieren Sie im Object Inspector/AR Properties die Option Clip.

 

     

 

  • Möchten Sie darüber hinaus vorhandene Elemente des Target image animieren, ist es notwendig die entsprechenden Teile (oder sogar das gesamte Bild) mit retuschierten Teilen abzudecken.
  • Im Beispiel unten ist links das vollständige Target image zu sehen, rechts davon liegen Assets, um den relevanten Teil abzudecken und das Boot mit dem Bären zu animieren.

 

Im folgenden Beispiel steht ebenfalls links das Target image, wie es im Buch zu sehen ist. In der Mitte die aufgebaute Szene im Ausgangszustand und rechts nach Auslösen des Touch Events.

 

 

In diesem Beispiel ist die Szene komplett nachgebaut, der Dschungel im Hintergrund sowie das Flusspferd sind zudem räumlich gekippt und ragen wie in einem PopUp-Buch je nach Kippung des Tablets aus dem Bild heraus. Dazu weiter unten mehr.

Für erste Tests können Sie die Preview-Funktion nutzen oder die Funktion Quick Test, die jeweils nur die aktuelle Szene exportiert. Im Quick Test wird das Target image abgedimmt dargestellt, sodass sich vor allem die animierten Teile abheben.

 

 

Szenen mit AR-Funktionalität sollten Sie unbedingt ausgiebig auf verschiedenen Endgeräten testen!

 

3D in AR-Szenen

Unter Einsatz der 3D-Möglichkeiten von TigerCreate haben Sie weitere Optionen, um AR-Szenen noch lebendiger wirken zu lassen. So können Sie räumliche Tiefe erzeugen, indem Sie Objekte auf unterschiedlichen Ebenen anordnen (Stacking) oder Teile der Szene räumlich so drehen, dass sie aus dem Target image hervorragen (PopUp).

Um 3D-Funktionen nutzen zu können, müssen Sie zunächst im Scene Generic Properties die Option 3D einschalten; anschließend erscheint ein Hinweis zur Nutzung der 3D-Optionen (den Sie aber auch ausblenden können).

 

 

Nach der Umstellung auf 3D ändert sich auch die Ansicht im Object Inspector. Die Einstellungen für PositionAngle und Scale werden jeweils erweitert:

  • Bei Position gibt der z-Wert die räumliche Position über dem Hintergrund an (je größer der Wert, desto weiter vorne, negative Werte liegen jenseits des Hintergrundbildes).
  • Angle, die Rotation um eine Achse, ist nun für alle drei Richtungen x, y, z separat einstellbar.
  • Skalierung (Scale) ist nun ebenfalls auch für den z-Wert möglich, was einer räumlichen Ausdehnung in die Tiefe entspricht.

 

 

  • Stacking
  • Beim sogenannten Stacking ordnen Sie die Objekte räumlich an, sodass bei Bewegung bzw. Kippung des Tablets/Smartphones ein räumlicher Tiefeneffekt entsteht. Über die z-Position (Default Transformation Properties) stellen Sie für jedes Objekt ein wie weit es über dem Hintergrundbild bzw. hier über dem Target image liegt. Ausgangswert ist 0, das entspricht derselben Ebene wie der Hintergrund; ein Wert z = 100 wäre schon deutlich darüber bzw. davor, negative Werte lassen das Objekt hinter dem Target image verschwinden.
  • ______
  • Achtung: Bedenken Sie, dass bei 3D-Szenen die eingestellte Local Order der Objekte nachrangig ist. Vorrangig ist die räumliche Ebene über die z-Position. Nur wenn Objekte auf derselben räumlichen Ebene liegen (gleicher z-Wert), kommt zusätzlich die Local Order ins Spiel und bestimmt über vorne und hinten. Siehe dazu auch den Abschnitt Einsatz von 3D.
  • ______
  • Im folgenden Beispiel wurde das Target image – ein Buchcover – komplett in Einzelteilen nachgebaut. Links das Cover als der Szene zugeordnetes Target image, rechts die bereits angeordneten Objekte für den Nachbau.

 

Der Nachbau kann zunächst in 2D erfolgen, um alle Objekte gut platzieren zu können. Für die Bäume links und rechts ist die Funktion Clip deaktiviert (s.o.), sodass sie über die Ränder hinausragen.

 

 

Anschließend erfolgt in 3D das Stacking, indem die Objekte, die deutlich weiter vorne liegen sollen, beispielsweise der Rahmen, die Figuren und die Bäume, höhere Werte für die z-Position erhalten (der Rahmen hat z = 200, die Figuren ca. 100). So entsteht eine Art Guckkasten-Effekt.

 

 

Beim räumlichen Drehen in der Preview (mit gedrückter ALT-Taste) wird deutlich, dass Objekte wie Gras, Wiesen, Felder, Himmel, die genau auf die Breite des Target image angelegt wurden, ebenfalls hätten breiter sein dürfen.

Am Beispiel des Bären in der Bildmitte lässt sich der Einsatz der Billboard-Funktion (siehe AR Properties bzw. siehe auch unten) demonstrieren. Im Normalfall ist sie für alle Objekte ausgeschaltet (No value), daher werden alle Assets bei einer räumlichen Bewegung über dem Target image gleichermaßen gekippt und gedreht. In der folgenden Abbildung ist (Mitte und rechts) für den Bären die Billboard-Funktion für alle Achsen aktiviert. Das führt dazu, dass im mittleren und rechten Bild der Bär seine aufrechte Ausgangsposition immer beibehält, egal wie die Umgebung gekippt oder gedreht wird. Auf diese Weise können einzelne Objekte quasi fest verankert und dadurch hervorgehoben werden.

 

 

  • Pop-ups
    •          AR properties/Billboard function

Schauen wir uns noch einmal das bereits gezeigte Beispiel mit dem Hippo an. Links ist das Target image wie im Buch, rechts daneben die Umsetzung:

 

 

Hier wurden Teile der Szene räumlich gekippt, sodass sie insbesondere bei Bewegen des Tablets wie in einem Popup-Buch aus der Ebene hochklappen. Auf dem folgenden Bild ist zu sehen, dass der Dschungel im Hintergrund eigentlich aus dem Bildbereich herausragt.

 

 

Tatsächlich wird er räumlich um die x-Achse gekippt, nachdem der Ankerpunkt an den unteren Rand des Bildes gesetzt wurde. Dieselbe Vorgehensweise wird beim Hippo angewendet. Dadurch treten beide Objekte aus dem Hintergrund hervor.

 

 

Im Normalfall werden diese Objekte feststehend mitbewegt. Das heißt bei Änderung des Betrachtungswinkels um die x-Achse kippen sie so, dass ein räumlicher Eindruck entsteht, bei Kippung um andere Achsen werden sie genauso mitgekippt wie alle anderen Objekte.

 

 

Mit der Funktion Billboard aus den AR Properties (im Object Inspector) lässt sich festlegen, dass ein Objekt auch bei Kippen des Tablets relativ zum Target image seine Ausrichtung beibehält – entweder bezogen auf alle Achsen (und damit auf jede Art von Kippen) oder nur auf bestimmte Achsen. Hier sichtbar in zwei Beispielen:

 

     

 

Besonderheiten

  • Haben Sie ein Hintergrundbild für die Szene geladen, wird dieses bei Einschalten der AR-Funktion ersetzt durch das importierte Target-Bild. Dies gilt nur für die Arbeitsumgebung von TigerCreate; sobald das Projekt exportiert ist, ist das Target Image selbst nicht mehr sichtbar.
  • Anders als in ‚normalen‘ Szenen, benötigen Sie für AR-Szenen nicht unbedingt einen Screenshot. Wenn Sie dennoch einen anlegen, hat dies den Vorteil, dass Ihre Szene ein Thumbnail-Icon besitzt und dadurch leichter zu finden ist.

Back To Top

Mehrsprachige Projekte

Mehrsprachige E-Books erstellen

TigerCreate unterstützt mehrsprachige E-Books. Die Auswahl der Sprachen erfolgt in den generellen Projekteinstellungen (Project Settings), die Sie über die Schaltfläche am oberen rechten Rand aufrufen. Hier können Sie auch nachträglich Sprachen zu einem Projekt hinzufügen oder daraus entfernen. Während der Arbeit im Edit-Modus ändern Sie die jeweilige Sprache über den Sprachwahlschalter Language (oberhalb der Arbeitsfläche), die aktuelle Sprache wird dort angezeigt.

TigerCreate nimmt Ihnen viel Arbeit ab, da Sie jede Szene nur einmal erstellen müssen! Der große Vorteil liegt darin, dass Sie eventuelle Korrekturen an einzelnen Animationen auch nur einmal durchführen müssen und nicht für jede Sprachversion extra.

 

Assets für mehrere Sprachen vorbereiten

 Mehrsprachigkeit kann folgende Arten von Assets betreffen:

  • Texte in Textboxen oder Text Blade
  • Texte in Grafiken
  • Sounds, die gesprochenen Text beinhalten
  • Highlight Data für das Word Highlighting
  • Animationen können sprachabhängig eingesetzt werden (s.u.)
  • Screenshots einer Szene sind für jede Sprache zu erstellen (s.u.)

Um Asstes für verschiedene Sprachversionen voneinander zu unterscheiden, gleichzeitig aber über TigerCreate automatisch richtig zuzuordnen, erhält der Name eines Assets einen speziellen Anhang. Er besteht aus den Zeichen „_LC_“ (für Language Code) und einer länderspezifischen Kennung.

Also bei Sounddateien beispielsweise „S05_Voice_LC_DE.mp3“ für den deutschen Sprecher der Szene 05, „S05_Voice_LC_EN.mp3“ für den englischen Sprecher.*

Mit sprachspezifischen Grafiken verfahren Sie im Prinzip genauso. Entscheidend ist die Namensgleichheit inklusive der Unterscheidung am Namensende; z.B.:

„S01_Auto_LC_DE.png“

„S01_Auto_LC_EN. png“

„S01_Auto_LC_IT.png“

Ist diese Namensunterscheidung korrekt durchgeführt, nimmt Ihnen TigerCreate sehr viel Arbeit ab, denn es erkennt anhand der Endungen, welches Asset in welcher Sprachversion eingesetzt werden soll. Im Scene Navigator erscheint das Asset (im Bild unten ein Brief) ohne sprachspezifische Endung, dafür mit einem Zusatzsymbol, das die Mehrsprachigkeit anzeigt.

 

 

Sie können Multilanguage Assets verwenden wie andere auch. Wechselt der User die Sprache, sorgt TigerCreate dafür, dass automatisch das richtige Asset verwendet wird.

Arbeiten Sie in Ihren Szenen zunächst in einer Sprache. Erstellen Sie Textboxen und füllen Sie diese mit den Texten in der gewählten Sprache. Über den Animation Inspector werden ggf. Sprecherdateien mit den Textboxen verknüpft, in der Timeline des Animators erzeugen Sie Keys für das Word Highlighting (alternativ binden Sie externe, vorbereitete Labeldaten ein).

Wenn Sie Textboxen für mehrere Sprachen nutzen, bedenken Sie, dass Texte in unterschiedlichen Sprachen unterschiedlich lang ausfallen können. Testen Sie daher, ob in jeder verwendeten Sprache die Textbox den vollständigen Text anzeigt. Wird der Text in einer Sprache nicht vollständig angezeigt, wird auf dem Endgerät das Textfeld für diese Sprache automatisch zu einem rollbaren Scrollfeld.

Ist Ihre Szene zum Beispiel in Deutsch aufgebaut und gespeichert, probieren Sie aus, was geschieht, wenn Sie über den Sprachwahlschalter die Sprache wechseln (hier: Englisch):

  • Verwenden Sie mehrsprachige Grafiken in der Szene, werden diese automatisch ersetzt, wenn die Benennung entsprechend korrekt ist.
  • Anstelle der mit Text gefüllten Textbox finden Sie eine leere („English Text“), die bereits mit der entsprechenden englischen Sprachdatei verknüpft ist. Die Timeline der Textbox ist frei von Keys, da das Word Highlighting neu gesetzt werden muss.
  • Die Textbox hat dieselben Eigenschaften – wie Name, Local Order, Position, Rotation – sowie dieselben Ausmaße in Breite und Höhe.
  • Was sie unterscheidet, ist, dass Textboxen in anderen Sprachen noch ohne Textformatierung sind. Haben Sie also in der deutschen Version Text beispielsweise in Helvetica, 64 Punkt, rechtsbündig, hellgrün formatiert, wird die Textbox in anderen Sprachversionen zunächst nur den Beispieltext in der voreingestellten Formatierung* zeigen, also zum Beispiel Times New Roman, 18 Punkt, linksbündig, schwarz. Der Vorteil liegt darin, dass Sie in jeder Sprache beliebig unterschiedliche Fonts und Formatierungen verwenden können.
  • Setzen Sie nun den englischen Text in die Textbox, formatieren Sie ihn und legen Sie Keys für die englische Sprachversion an.
  • Speichern Sie und wechseln Sie über die Sprachauswahl wieder zurück zur deutschen Version.

Ja, genau – das ist alles.

*Die voreingestellte Formatierung finden Sie in den Default Text Options. Sie gilt für das gesamte Projekt und gibt vor, in welcher Weise ein Textfeld per Default formatiert ist. Mehr zu diesem Thema finden Sie unter Arbeiten mit Text.

Wenn Sie mit Grafiken arbeiten, die sprachabhängigen Inhalt haben, sind Sie nicht daran gebunden, genau das gleiche Größenformat zu verwenden – obwohl Sie damit auf der sicheren Seite sind. Haben Sie beispielsweise ein Schild mit dem quadratischen Logo eines Discounters, könnte es in einer anderen Sprache ein längliches Schild mit anderem Logo sein. Entscheidend ist, dass die Position des Ankerpunktes übernommen wird, gegebenenfalls müssten Sie also den Ankerpunkt entweder genau mittig oder eher oben links setzen, je nachdem wie das Schild sich in die Umgebung einfügen lässt. Bei unterschiedlichen Formaten für verschiedene Sprachen sollten Sie in jedem Fall noch genauer testen.

Alles andere macht TigerCreate für Sie. Und dadurch, dass in den Project Settings mehrere Sprachen eingestellt sind, erscheinen im E-Book automatisch die jeweiligen Sprachbuttons in Form kleiner länderspezifischer Icons.

* Um korrekte Endungen für die verschiedenen Sprachen zu verwenden, beziehen wir uns hauptsächlich (mit wenigen Abweichungen) auf ISO 639 Codes mit zwei Buchstaben. Die folgenden Sprachen werden bisher unterstützt:

Afrikaans AF

Akan AK

Albanian SQ

Amharic AM

Aragonese AN

Armenian HY

Azerbaijani AZ

Bambara BM

Basque EU

Belarusian BE

Bengali BN

Bosnian BS

Brazilian Portuguese BR

Bulgarian BG

Burmese MY

Catalan CA

Chechen CE

Croation HR

Czech CS

Danish DA

Dutch NL

English EN

Esperanto EO

Finnish FI

French FR

Georgian KA

German DE

Greek EL

Hindi HI

Hungarian HU

Indonesian ID

Italian IT

Japanese JA

Korean KO

Macedonian MK

Malay MS

Maltese MT

Nepali NE

Norwegian NO

Polish PL

Portuguese PT

Romanian RO

Russian RU

Simplified Chinese CN

Spanish ES

Swahili SW

Swedish SV

Tamil TA

Thai TH

Traditional Chinese ZH

Turkish TR

Ukrainian UK

Vietnamese VI

Besonderheiten und sprachspezifische Einstellungen

  • im Object Inspector:

Im Bereich Touch Event des Object Inspectors gibt es die Checkbox Use Different Animations Per Language. Diese ermöglicht, dass Sie unterschiedliche Animationen für verschiedene Sprachen verwenden können, wenn diese über ein Touch Event ausgelöst werden.

Lassen sie beispielsweise in der deutschen Fassung bei Klick auf eine Grafik „Ende“ Luftballons aufsteigen, in der englischen Version bei „End“ ein Feuerwerk abschießen, bei Klick auf „Fin“ in der französischen Version die Marseillaise zum Sonnenuntergang erklingen – einfach indem Sie ein und demselben TouchEvent für unterschiedliche Sprachen verschiedene Animationen zuweisen.

Dadurch haben Sie eine noch weiterreichende Kontrolle über Aufbau und Ablauf von Szenen in unterschiedlichen Sprachen. Achten Sie bei Verwendung dieses Features bitte darauf, dass Sie für jede unterstützte Sprache Animationen verknüpfen; es gibt keine Default-Animation, die automatisch zum Einsatz kommt, wenn nichts anderes gewählt wurde.

 

 

  • im Scene Inspector:

Bei den Start Animation Properties finden Sie die Option Use Different Animations per Language. Hier haben Sie ebenfalls die Möglichkeit den einzelnen Sprachversionen unterschiedliche Animationen zuzuordnen. An dieser Stelle geht es um unterschiedliche Startanimationen:

Beim Öffnen des Scene Inspectors werden alle vorhandenen Startanimationen (also Animationen, die selbstständig – ohne ein Touch Event – starten) in Form einer Liste angezeigt. Nach Aktivierung der Checkbox wird diese Liste zunächst geleert, alle Animationen bleiben aber erhalten! Es wird lediglich der Zustand für die gerade aktive Sprache angezeigt und der ist per Default zunächst leer. Wählen Sie über das + Symbol eine oder mehrere Startanimationen für die gerade eingestellte Sprache aus. Wechseln Sie anschließend die Sprache und ordnen Sie nun erneut Startanimationen zu. Im Falle von Animationen ist die Benennung im Prinzip unwichtig; hilfreich ist es aber allemal, wenn Sie dem Namen einer Animation ansehen können, dass es sich um eine Startanimation für eine bestimmte Version handelt.

Es ist möglich ein und dieselbe Animation mehreren Sprachen zuzuordnen; vielleicht verwenden Sie in der Szene insgesamt drei Startanimationen, von denen eine aber in jeder Sprache gleich sein soll. Ordnen Sie diese dann auch jeder Sprache zu.

 

 

_______

Achtung: Über das + Symbol erhalten Sie Zugriff auf alle(!) Animationen der Szene, also auch auf (Touch Event-)abhängige Animationen. Nehmen Sie eine abhängige Animation in die Liste der Startanimationen einer Sprache auf, wird diese Animation zusätzlich auch zur Startanimation (für diese Sprache) gemacht, ein zugeordnetes Touch Event bleibt aber erhalten. Beim Start der Szene in der gewählten Sprachversion wird also auch diese Animation automatisch abgespielt mit den Einstellungen aus dem Animations Inspector; anschließend kann man sie über die zuvor definierten Touch Events erneut starten.

Diesen kleinen ‚Trick‘ können Sie nutzen, wenn Sie zwei unterschiedliche Animationen desselben Objekts verschiedenen Sprachen als Startanimation zuordnen wollen (Beispiel: in Sprache A soll ein Frosch nach links aus dem Bild hüpfen, in Sprache B nach rechts): Legen Sie die eine als Startanimation an, die zweite als normale Animation. Durch die Zuordnung zu verschiedenen Sprachen werden beide zu Startanimationen in der jeweiligen Sprachversion.

_______

 

  • Sprachspezifische Screenshots

Jede Szene benötigt eine Voransicht, die die Szene repräsentiert, zum Beispiel einen Screenshot. Es kann sich um den Ausgangszustand der Szene handeln oder um einen bestimmten Punkt im Ablauf der Szene. Für jede Sprachversion muss ein eigener Screenshot existieren.

 

 

Bei den Screenshot Properties (im Scene Inspector) haben Sie folgende Möglichkeiten:

  • Ziehen Sie aus dem Project Navigator oder direkt aus dem Projektordner im Finder ein Bild (Format JPG) in das Screenshot-Feld; beachten Sie auch hierbei bitte die unterschiedlichen Namensendungen für sprachabhängige Dateien.
  • Erstellen Sie mit dem Button Create From View einen Screenshot vom aktuellen Zustand der Szene.

Schalten Sie anschließend innerhalb der Szene um auf eine andere Sprache und wiederholen Sie den Vorgang für jede Sprache. Im Scene Inspector wird Ihnen angezeigt, wenn für eine Sprache noch kein Bild angelegt wurde.

Sie haben die Möglichkeit das erstellte Screenshot-Bild nachzubearbeiten und erneut zu laden. Ziehen Sie dazu das entstandene Bild (ein JPG von 510 x 384 Pixel) auf den Finder und editieren Sie es in einem Bildbearbeitungsprogramm.

Back To Top

Erstellen und Einbinden von Spielen

Erstellen und Einbinden von Spielen als Bestandteil eines E-Books

Mit TigerCreate können Sie in Ihre E-Books Spiele integrieren, die die Geschichte erweitern und das E-Book bereichern. Zu unterscheiden sind einerseits szenenunabhägige, externe Spiele, die von jeder Stelle des E-Books über das Hauptmenü aufgerufen werden können und die eigentliche Geschichte damit unterbrechen. Andererseits gibt es szenenimmanente – interne – Spiele, die innerhalb einer Szene gestartet und gespielt werden können, ohne die Szene komplett zu verlassen.

 

Szenenunabhängige Spiele

 Bei den externen Spielen handelt es sich um drei Standardspiele, die Sie im Publishing Dialog auswählen können: ein Puzzle, ein Memo-Spiel sowie ein Doodle – ein Ausmalbild, bei dem die Konturen vorgegeben sind und farbig ausgemalt werden können. Für alle Spiele bietet es sich an, Motive aus dem jeweiligen E-Book zu verwenden.

Zurzeit ist es notwendig, die Spiele Memo und Doodle extern vorzubereiten (siehe unten) und die Dateien in die dafür vorgesehenen Unterordner memory und doodle des Games-Ordners zu legen. Für das Puzzle reicht es aus, pngs mit den korrekten Maßen und der richtigen Benennung in den Unterordner puzzle zu legen. Den Rest macht TigerCreate.

Wenn Sie Ihr E-Book veröffentlichen, wählen Sie im Publishing-Dialog unter der Rubrik Games aus, welche(s) Spiel(e) Sie integrieren möchten. Bei Doodle bestimmen Sie zusätzlich, ob die Linien der Vorlage immer im Vordergrund bleiben sollen (Background Order: Below) oder übermalt werden können (Background Order: Above).

 

     

 

Lesen Sie im Folgenden, wie die Spiele funktionieren und wie sie vorbereitet werden.

  • Puzzle

Das Spiel Puzzle gibt es in zwei Schwierigkeitsstufen, mit 12 und mit 24 Teilen. Die Puzzleteile liegen auf der Spielfläche verteilt und können beliebig verschoben werden. Ein Puzzlestein rastet ein, wenn er an der richtigen Position liegt (eine Toleranz von wenigen Pixeln ist vorgegeben). Ist das Puzzle komplett, ertönt ein Sound, das fertige Bild wird in der Mitte des Screens zentriert. Das Spiel kann jederzeit verlassen werden.

 

 

Um ein Puzzle zu erstellen legen Sie zwei pngs mit den Abmessungen von mindestens 1268 x 830 Pixeln (für Querformat) bzw. 830 x 1268 Pixeln (für Hochformat) in den Games-Unterordner puzzle. Benennen Sie ein png „Puzzle12.png“ (dieses wird für das 12-teilige Puzzle verwendet) und ein png „Puzzle24.png“ (dieses wird für das 24-teilige Puzzle verwendet). TigerCreate erzeugt dann automatisch die Puzzleteile für beide Schwierigkeitsstufen. Sie können auch Bilder mit größeren Abmessungen hinterlegen solange das Seitenverhältnis dasselbe bleibt.

Bei Bedarf legen Sie einen Sound mit dem Namen Puzzle.mp3 sowie einen Sound Finished.mp3 in den Ordner puzzle. Ersterer Sound wird abgespielt, wenn ein Puzzleteil einrastet, Finished.mp3 ertönt, wenn das Puzzle komplett ist. Diese Sounds sind optional.

  • Memo

Bei Memo geht es darum, aus verdeckt liegenden Karten je zwei mit demselben Motiv zu finden. In zwei Schwierigkeitsstufen gilt es, 8 bzw. 15 Paare aufzudecken.

 

 

Zur Vorbereitung müssen also 15 verschiedene Motive aus dem Bildmaterial herausgesucht werden, die nicht zu kleinteilig sein sollten, da die einzelnen Spielkarten mit 320 x 320 Pixeln (für die Spielvariante mit 8 Paaren) bzw. 258 x 258 Pixeln (bei 15 Paaren) nicht sehr viel Platz bieten. (Sie können auch Bilder mit größeren Abmessungen hinterlegen solange das Seitenverhältnis dasselbe bleibt.) Hier bietet es sich an, auf unsere Vorlage für Photoshop zurückzugreifen, die eine schwarze Umrandung und plastische Ebeneneffekte für die Spielkarten enthält. Sie können sie hier herunterladen. Daraus werden alle Karten im Format PNG exportiert. Um zu gewährleisten, dass die Karten korrekt platziert und zugeordnet werden, sind sie nach einem bestimmten Muster zu benennen:

card_4_4_1.png, card_4_4_2.png, … card_4_4_8.png für das Spiel mit 8 Paaren.

card_5_6_1.png, card_5_6_2.png, … card_5_6_15.png für das Spiel mit 15 Paaren.

Die Rückseite der Karten kann ebenfalls individuell bestimmt werden: card_back_4_4.png bzw. card_back_ 5_6.png. Befindet sich keine so benannte Datei im memo-Ordner, wird die standardmäßig eingestellte (blau mit weißen Punkten) verwendet.

  • Legen Sie bei Bedarf drei Sounds in den Ordner memory:

Click.mp3 wird abgespielt beim Umblättern einer Karte,

Memory.mp3 ertönt, wenn ein zusammengehörendes Paar umgedreht wurde,

Finished.mp3 wird gespielt, wenn alle Paare gefunden und das Spiel beendet ist. Diese Sounds sind optional.

 

  • Doodle

 Doodle ist ein Ausmalbild, dessen Konturen vorgezeichnet sind. Man wählt aus verschiedenen Werkzeugen und Farben um es auszumalen und kann geschlossene Formen auch direkt mit Farbe füllen.

 

 

  • Wählen Sie ein Motiv, das Sie auf das Maß 1586 x 1036 Pixel (für Querformat) bzw. 1036 x 1586 (für Hochformat) skalieren bzw. beschneiden (Sie können auch Bilder mit größeren Abmessungen hinterlegen solange das Seitenverhältnis dasselbe bleibt.).
  • Zeichnen Sie in einem (idealerweise vektorbasierten) Zeichenprogramm die relevanten Linien (am besten in schwarz) auf einer separaten Ebene nach (Der Rest des später exportieren Bildes muss transparent sein).
  • Achten Sie auf geschlossene Linien: Geschlossene Flächen können im Ausmalbild mit einer Art Farbeimer mit einem einzigen Klick gefüllt werden.
  • Arbeiten Sie nicht zu kleinteilig, letztlich muss man mit der Fingerspitze eine Fläche treffen können.
  • Das fertige Bild (nur die Konturen ohne die Vorlage) speichern Sie als PNG-Grafik mit Transparenz(!) ab, nennen sie „Doodle.png“ und kopieren sie in den Ordner Games/Doodle.
  • Bei diesem Spiel sind keine Sounds vorgesehen.

In Szenen integrierte Spiele – Mini Games

 Innerhalb einer Szene können Sie mithilfe von TigerCreate kleine Spiele erstellen, sogenannte Mini Games. Im Gegensatz zu den externen Spieletypen Doodle, Memo und Puzzle können diese Spiele innerhalb der Szene über ein Touch Event gestartet und gespielt werden, ohne die Geschichte zu unterbrechen. Stattdessen kann so die Szene erweitert werden.

Folgende Spieletypen stehen zur Auswahl.

  • QuestGame    // Finde 1-5 Gegenstände im Bild und tippe drauf.
  • QuizGame       // Beantworte eine Frage zur Story (Multiple Choice).
  • RhymesGame         // Finde aus 6 Wörtern die heraus, die sich auf ein Vorgegebenes reimen.
  • SpellGame      // Bilde aus den Buchstaben ein Wort, das im Bild zu sehen ist.
  • SpotGame      // Finde 5 Unterschiede zwischen den beiden Bildern.
  • SpotGameAR          // Finde 5 Unterschiede zwischen diesem Bild und dem Bild in deinem Buch.

Alle Spiele lassen sich mit eigenen Bildern, Hintergründen und Sounds konfigurieren.

Im Project Navigator wählen Sie am oberen Rand über das + Zeichen das jeweilige Spiel aus, das Sie konfigurieren wollen.

 

 

Der Aufbau der Spiele ist weitgehend selbsterklärend. Nach Aufruf eines Spieletyps erscheint eine Maske mit verschiedenen ‚Reitern‘, die für jeweils eine Ansicht des Spiels stehen. Für jede Seite setzen Sie zum Beispiel eine Hintergrundgrafik ein und konfigurieren das Spiel durch eigene Texte.

Am Beispiel des QuestGames sieht das so aus:

 

 

  • Legen Sie einen Namen für das Spiel fest.

 

 

  • Geben Sie erklärende Hilfetexte ein. Legen Sie fest, ob bereits beim Start die Hilfe angeboten werden soll und fügen Sie ggf. ein eigenes Hilfe-Icon ein, z.B. ‚?‘. Zusätzlich zu geschriebenen Texten haben Sie auch die Möglichkeit, eine Sprecherdatei einzubinden.

Fügen Sie außerdem noch einen Hintergrund hinzu (JPEG, 2048 x 1536 Pixel). Dieser erscheint bereits beim Start des Spiels.

–––––

Achtung: Benötigen Sie in einem Erklärtext eine Freizeile, darf diese nicht mit einem Leerzeichen umbrochen werden, sonst erscheint auf einigen Endgeräten ein Sonderzeichen.

Dies lässt sich nur vermeiden, indem man die Folgezeile nahtlos an den Punkt der ersten Zeile bringt, so dass kein Leerzeichen vorhanden ist, und dann einen Umbruch vornimmt.

–––––

 

 

  • Geben Sie einen auffordernden Text ein, der die Aufgabe beschreibt. Auch hier können Sie den geschriebenen Text durch eine Audiodatei verstärken.

Dazu kommt das eigentliche Spiel – ein Bild, das bis zu 5 Dinge enthält, die zu suchen und anzutippen sind (Format JPEG, 1946 x 627 Pixel), sowie ein Hintergrundbild.

 

 

  • In dem importierten Bild ziehen Sie innerhalb der Maske mit gedrückter Maus Rechtecke auf, mit denen Sie die zu findenden Dinge markieren.

 

 

  • In der letzten Maske „Results“ können Sie unterschiedliche Sounds und Rückmeldungen erstellen für ‚alles richtig‘, ‚teilweise richtig‘ oder ‚gar nichts richtig‘. Dazu kann jeweils ein eigener Hintergrund gewählt werden.

 In unserem Beispiel QuestGame kann das in der Preview in etwa so aussehen:

 

 

Egal in welcher Szene Sie das Spiel erstellt haben, Sie können es theoretisch in jeder Szene aufrufen. Dazu erstellen Sie wie üblich für Touch Events einen Node und legen ihn über ein Objekt oder einen Teil des Hintergrunds, der als Auslöser für das Spiel dienen soll. Im folgenden Beispiel ist es der Brief, der das Spiel aufrufen soll. Der zugehörige Node bekommt ein Touch Event (im Object Inspector).

 

 

Der Node kann über das Touch Event mit einer Animation und/oder einem Sound verknüpft werden, vor allem aber ruft er unter Miscellaneous per Start Game-Funktion das Spiel auf.

 

 

In der Preview oder auch im Quick Test wird dann das Spiel flächendeckend über der eigentlichen Szene erscheinen.

Nach dem gleichen Prinzip erstellen Sie auch die übrigen Spiele: Sie fügen in vorgegebenen Masken eigene Texte, eigene Töne und Bilder ein und konfigurieren so das Spiel.

Beim QuizGame beispielsweise konfigurieren Sie eine Frage und vier Antwortmöglichkeiten. Die Fragen dürfen maximal 140 Zeichen lang sein, die Antworten sind auf 9 Zeichen begrenzt oder müssen mit Bindestrich an einer Stelle getrennt werden.

 

 

Beim RhymesGame geben Sie ein Wort vor und bieten 6 mögliche weitere Worte an, die sich darauf reimen. Also im Prinzip „Welche Wörter reimen sich?“. Von 6 Antworten können 2, 3 oder 4 korrekte Reime sein. Das vorgegebene Wort können Sie zusätzlich durch ein Bild illustrieren.

 

 

Beim SpellGame geht es um korrektes Buchstabieren. Sie geben ein Wort vor (2 – 6 Buchstaben), das Sie möglichst durch ein Bild illustrieren. Im Spiel müssen die verstreut liegenden Buchstaben in der korrekten Reihenfolge angetippt werden.

 

 

Im SpotGame sind 5 Fehler zwischen zwei Bildern herauszufinden. Sie legen also zwei nahezu identische Grafiken an (Format JPEG, 830 x 710 Pixel), die sich durch 5 Details unterscheiden. Diese Unterschiede markieren Sie dann in der Maske, indem Sie genau wie beim QuestGame mit gedrückter Maustaste Rechtecke über den Fehlern aufziehen. Werden diese angetippt, gilt der Fehler als gefunden.

 

 

Das SpotGameAR ist eine Variante des SpotGames. Die AR-Funktion (Augmented Reality) arbeitet ja mit einer virtuellen Erweiterung eines vorliegenden Buchs. Dementsprechend wird in dieser Variante eine tatsächliche Buchseite, die über die AR-Funktion mit der Kamera aktiviert wird, mit einem ‚fehlerhaften’ Bild verglichen, in welchem wieder 5 eingebaute Fehler markiert werden.

Alle diese Spiele sollten Sie unbedingt testen!

Zunächst mit der ins Spiel eingebauten Preview-Funktion, dann eingebunden in eine Szene, aus der heraus Sie das Spiel aufrufen (siehe weiter oben am Beispiel für das QuestGame) und natürlich auch vor Veröffentlichung auf unterschiedlichen Endgeräten.

Back To Top

Testen und Veröffentlichen

Testen und Veröffentlichen

Nachdem Sie Ihre ersten Animationen erstellt haben, heißt es Testen, Testen, Testen.

Warten Sie nicht, bis alles fertig ist, sondern testen Sie bereits in einem frühen Stadium, ob Ihre Animationen auch auf der Endplattform so laufen, wie Sie sich das vorgestellt haben.

Einen allerersten Eindruck bekommen Sie über die Preview-Funktion. Sie dient insbesondere dazu, das Timing von Animationen und das Zusammenspiel mit Sounds zu testen. Außerdem können Sie unterschiedliche Seitenverhältnisse von Endgeräten und den darin sichtbaren Ausschnitt testen und bequem zwischen unterstützten Sprachen wechseln. Sie können sich außerdem auch hier den türkisfarbenen Rahmen für die 16:9 Safety Zone anzeigen lassen (rechts oben unter Options/Show Safety Zone in Preview Mode).

 

 

Der nächste Test-Schritt kann der Test der aktuellen Szene im Quick Test sein oder der Export einer oder mehrerer Szenen über die Funktion Test Build. Letzteres entspricht dem normalen Publish-Vorgang, ist aber kostenfrei möglich und dient vor allem dazu, das Projekt oder Teile daraus auf unterschiedlichen Endgeräten oder im TigerSimulator zu testen, der zum TigerCreate-Entwicklungspaket gehört.

 

 

Übrigens ist ein bisher unerwähnter großer Vorteil von TigerCreate, dass das Programm für Sie aufräumt! Beim Export werden überflüssige weil nicht genutzte Bilder und Sounds in Ihrem Projekt-Ordner einfach nicht berücksichtigt. Nicht gelöscht – Sie könnten sie ja noch benötigen – sondern ignoriert. Alles, was auf Ihrer Bühne oder Ihrer Arbeitsfläche liegt wird jedoch exportiert. Also lohnt es sich, innerhalb der Szenen etwas „Ordnung“ zu halten.

Um möglichst geringe Datenmengen in Ihren E-Books und Apps zu haben, sollten Sie versuchen Bilder mithilfe externer Tools wie ImageOptim, pnggauntlet.com oder tinypng.com etc. zu optimieren. Zusätzlich haben Sie im Exportdialog die Möglichkeit, bei jeder zu exportierenden Szene die Option Compress Image zu aktivieren.

Beim Export-Vorgang öffnet sich zusätzlich ein Fenster ‚Publish Info‘, das Ihnen einen Überblick  gibt über die exportierten Szenen und den Speicherbedarf der darin enthaltenen Grafiken (siehe auch „Other Options“ weiter unten).

 

Exportformate

TigerCreate erstellt unterschiedliche Exportformate für alle wichtigen Vertriebsplattformen. Das heißt, auf Wunsch wird ein ePub für Apple iBooks erzeugt, eine IPA-Datei für den Apple App Store oder eine Android APK-Datei für die verschiedenen App Stores. Und natürlich das TigerFormat für TigerBooks.

Für den Upload der Dateien auf die jeweiligen Plattformen ist der Content-Inhaber selbst verantwortlich: Er muss die Kunden- oder Entwicklerkonten bei Apple, Google, Amazon oder Samsung eröffnen und eine Vertriebsvereinbarung mit diesen Partnern treffen.

Derzeit unterstützte Formate sind

  • TigerBooks 2.0 (für die TigerBooks-Plattform)
  • Apple iBooks Store-Format
  • Apple App Store Application (für iOS-Geräte)
  • Google Play Store Application (für Android-Geräte)
  • Amazon Appstore Application
  • Amazon Kindle KF8

Wählen Sie TigerBooks als Exportformat, wird ein offenes ePub-Format erzeugt, das Ihnen zum Testen dient, sowie eine verschlüsselte und damit geschützte Version, die Sie auf der TigerBooks-Plattform veröffentlichen.

Die Größe Ihrer E-Books hängt im Wesentlichen von der Anzahl und Größe verwendeter Grafiken und Sounds ab. Größen zwischen ca. 20 und 70 MB für ein ePub sind üblich.

 

 

Der Publish-Dialog

Egal ob Sie Ihr E-Book im iOS-Simulator testen oder ein bereits getestetes E-Book veröffentlichen wollen, der Weg führt über den Publish-Dialog, der für beide Funktionen – Testen und Veröffentlichen – nahezu identisch ist.

Klicken Sie zum Testen eines E-Books oder einzelner Szenen auf die Schaltfläche Test Build (bzw. entsprechend auf Publish). Es öffnet sich das unten abgebildete Dialogfenster, das im ersten Schritt aus drei Reitern besteht. Im ersten wählen Sie die zu veröffentlichenden Szenen, im mittleren stellen Sie Optionen zum gewählten Exportformat ein, im rechten wählen Sie aus, welche Spiele Sie einbinden wollen. Übrigens können Sie dieses Fenster auch vergrößern, um lange Szenennamen vollständig lesen zu können.

 

 

_______

Achtung: Bei den Export-Formaten iBooks und Kinde KF8 werden diese Spiele nicht unterstützt, daher erscheint der Reiter Games bei diesen Formaten nicht!

_______

1 – Wählen Sie das Format, in dem Sie veröffentlichen wollen.

2 – Bei mehrsprachigen Titeln haben Sie unter Language Selection die Möglichkeit zum Beispiel für Testzwecke einzelne Sprachen abzuschalten.

 

 

3 – Je nachdem welches Export-Format Sie wählen, ergeben sich unterschiedliche Optionen. Diese finden Sie im mittleren Reiter (dazu weiter unten mehr). Im rechten Reiter wählen Sie aus, welche Spiele Sie einbinden wollen (siehe unten).

4 – Remember and Open Book to Last Opened Scene ist per Default ausgewählt und sorgt dafür, dass das exportierte E-Book nach erneutem Start die zuletzt geöffnete Szene öffnet. Mark All lässt Sie alle Szenen auf einmal auswählen; Compress All aktiviert für alle Szenen die Funktion Compress Images (Bildkomprimierung) (siehe auch weiter unten sowie Erste Schritte – Quick Start – Assets vorbereiten – Bilder). Uncompress All deaktiviert eine zuvor getroffene Auswahl zur Bildkomprimierung komplett.

5 – Reiter Scenes: Wählen Sie aus der Liste aller zu Ihrem Projekt gehörenden Szenen mindestens eine Szene aus, indem Sie die Checkbox davor (Haken) markieren. Die Reihenfolge der Szenen ist zunächst alphabetisch sortiert, in dieser Reihenfolge von oben nach unten werden sie abgespielt. Sie haben hier die Möglichkeit per Drag and Drop umzusortieren.

6 – Markieren Sie Compress Images, um möglichst Platz zu sparen. Alle Bilder einer Szene werden dann komprimiert.

7 – Der Button Next führt Sie zum nächsten Schritt des Publish-Dialogs. Ehe Sie ihn betätigen, bearbeiten Sie bitte erst die beiden Reiter für Options und Games.

 

Options

Je nachdem welches Export-Format Sie wählen, finden Sie im mittleren Reiter unterschiedliche Optionen.

 

Games

Über den Reiter Games integrieren Sie bis zu drei der Standardspiele Puzzle, Memo oder Doodle in Ihr E-Book. Diese müssen Sie gesondert erstellen (siehe dazu Erstellen und Einbinden von Spielen). Anders als die MiniGames, die Sie direkt innerhalb einer Szene aufrufen können, werden diese Spiele über das TigerCreate-Menü aufgerufen. Dabei wird die Szene verlassen und nach Beenden eines Spiels wieder neu geladen.

 

 

_______

Achtung: Bei den Export-Formaten iBooks und Kinde KF8 werden diese Spiele nicht unterstützt, daher erscheint der Reiter Games bei diesen Formaten nicht!

_______

 

Launch Options

Im nächsten Schritt führt Sie der Publish-Dialog zu den Launch Options. Hier wählen Sie die Zielumgebung aus unter der die exportierten Dateien laufen sollen. Im einfachsten Fall  – Export als TigerBooks-Format – ist dies der eigens entwickelte TigerSimulator. Haben Sie sich für das iBooks-Format entschieden, wird Ihnen hier die iBooks App angeboten. Schließen Sie ein externes Gerät, iPad, Smartphone o.ä. an, wird die Auswahlliste aktualisiert.

 

Other Options

Generate Publish Overview hilft Ihnen bei der Beurteilung der Speicherauslastung Ihres exportierten E-Books. Es zeigt die erzeugten Atlanten für alle Szenen und dazu den jeweils benötigten Speicher bzw. die GPU-Auslastung.

Ein Atlas sammelt so viele Bilder einer Szene wie möglich; die maximale Größe ist 4096 x 4096 Pixel*. Ein Atlas dieser Größe benötigt 64 MB der GPU; es wird daher dringend empfohlen pro Szene nicht mehr als einen Atlas für Bilder und einen für Text zu nutzen.

* Einige ältere Android-Geräte unterstützen die Größe 4096 x 4096 nicht. Auf diesen Geräten werden niedriger aufgelöste (SD-)Atlanten mit 2048 x 2048 Pixel verwendet.

Back To Top

Export für TigerBooks 2.0

Beim Format TigerBooks haben Sie die Möglichkeit für jede Sprache das Cover Ihres E-Books sowie eine Kurzbeschreibung hinzuzufügen, falls dies noch nicht zu Beginn im Dialog Create New Interactive Book geschehen ist. Gegebenenfalls steht dort ein Warnhinweis, dass diese Angaben unvollständig sind.

 

Back To Top

Export für Apple iBooks

Beim Format iBooks wählen Sie zunächst, ob der User das Standard iBooks-Interface zu sehen bekommt oder das TigerBooks-User Interface („TigerCreate-UI“). Dazu kommen Angaben über den Publisher (also Ihr Unternehmen bzw. der Inhalteanbieter) und gegebenenfalls die Versionsnummer.

Wählen Sie anschließend aus, welche Sprache beim Start vorrangig unterstützt werden soll und fügen Sie Informationen wie eine gültige ISBN-Nummer (diese wird auf Stimmigkeit überprüft), Cover, Kurzbeschreibung und einen Hinweistext für den Start (Wait Message) hinzu.

Auf fehlende Informationen werden Sie durch eingeblendete Warnhinweise aufmerksam gemacht.

 

Back To Top

Export als iOS App

TigerCreate kann iOS-Apps erstellen, die dann auf iPhone, iPod & iPad laufen.

Der Prozess ist insgesamt komplex, hier kann TigerCreate und auch der TigerCreate-Support keine Hilfe anbieten. TigerCreate erstellt als Tool die fertigen Dateien, die Zertifizierung der App, das App-Store-Management, der Vertrieb etc. liegt in diesem Fall in Ihrer Eigenverantwortung.

Um Apps über iTunes zu veröffentlichen, muss zuerst ein Entwickler-Konto bei Apple für die iOS-Entwicklung erstellt werden. Informationen dazu finden Sie auf der Apple-Website.

Infos über den gesamten Prozess für die Veröffentlichung von Apps auf iOS finden Sie ebenfalls auf der Website von Apple (auf English und sehr ausführlich) sowie im Internet. Sorgen Sie außerdem das Vorhandensein der Software Xcode auf Ihrem Rechner, sie ist kostenlos im App Store erhältlich.

 

 

Im Options-Dialog geben Sie Informationen zu Ihrer App ein: Name, Versionsnummer, Bundle Identifier.

Name ist der Name der App, der auf dem iOS-Gerät unter dem App-Icon erscheint. Zurzeit darf der Name keine Umlaute oder Sonderzeichen enthalten!

Die Versionsnummer muss der Versionsnummer der über iTunes-Connect angelegten App entsprechen, ansonsten kann die App nicht über den Application Loader zu iTunes Connect hochgeladen werden. Es dürfen nur Versionsnummern mit Ziffern und Punkten verwendet werden, z.B. „1.0“, „1.1“, „2.8.6“ etc.

Bei Bundle Identifier handelt es sich um die „App ID“, zum Beispiel „de.oetinger.polarbearinappen“. Handelt es sich um ein Wildcard-provisioning-profile (das für mehrere Apps gültig sein kann), tragen Sie hier nur ein „*“ ein.

Wählen Sie ein Provisioning Profile. Es kann im Apple „iOS Dev Center“ im Bereich „iOS Certificates, Identifiers & Profiles“ erzeugt und heruntergeladen werden. Nach dem Herunterladen wird es durch einen Doppelklick in Xcode installiert, anschließend taucht es in TigerCreate in dieser Liste auf.

Verknüpfen Sie (per Drag and Drop oder mit einem rechten Mausklick auf den Bildbereich) einerseits ein Icon (180 x 180 Pixel), andererseits einen Loading Screen (2048 x 1536 Pixel), der nach dem Start angezeigt wird. Bei mehrsprachigen Titeln legen Sie außerdem die Sprache fest, die voreingestellt sein soll.

Back To Top

Export als Android App

TigerCreate kann Apps für den Android-App-Store „Google Play“ erstellen. Dafür benötigen Sie ein Entwickler-Konto bei Google Play. Ausführliche Informationen darüber finden Sie im Internet.

Um dann mit TigerCreate Android-Apps zu exportieren, muss die „Android SDK“ installiert sein. TigerCreate funktioniert mit dem „ADT Bundle for Mac“. Haben Sie noch kein Android SDK auf Ihrem Computer, wählen Sie das Menü TigerCreate/Preferences. Dort finden Sie einen Download-Link, einen Link zu einem Tutorial-Video bei YouTube und die Möglichkeit den Pfad zum Android SDK auf Ihrem Computer zu setzen.

 

 

Geben Sie in der Android Options-Maske alle benötigten Informationen ein.

 

 

Als Application Name geben Sie den Namen der App ein, dieser erscheint unter dem App-Icon auf dem Android-Gerät. Zurzeit darf der Name keine Umlaute oder Sonderzeichen enthalten!

Der Versions-Name darf nur Ziffern und Punkte enthalten, z.B. „1.0“, „1.1“, „2.8.6“ etc.

Der Versions-Code darf nur ganze Zahlen enthalten, z.B. „1“, „2“, „5“, „17654“ etc., bei jedem Update muss dieser Code um mindestens 1 erhöht werden.

Unter Package Name tragen Sie den „package name“ für diese App ein. Er muss eindeutig sein, deshalb ist es üblich einen Domain-Namen in umgekehrter Form einzutragen und dann den Namen der App anzuhängen, zum Beispiel „de.meinedomain.apps.meinbuch“

Wählen Sie den Pfad zur Keystore-Datei. Diese muss nach folgender Anleitung erzeugt werden.

Bei der Erzeugung der Keystore-Datei müssen folgende Parameter gesetzt werden:

  • Key Password
  • Keystore Alias
  • Key Password

Speichern Sie diese Daten unbedingt ab und geben Sie sie hier in die dafür vorgesehenen Felder ein.

Public Key: Um zu verhindern, dass die App illegal kopiert und verbreitet wird, können Sie einen Lizenzschlüssel angeben. Nachdem die App in der „Google Play Developer Console“ angelegt wurde, kann der Lizenzschlüssel unter

Meine App –> Dienste & APIs –> MEIN LIZENZSCHLÜSSEL FÜR DIESE APP

herauskopiert werden. Es ist ein Base64-codierter, öffentlicher RSA-Schlüssel für Ihre Binärdatei. Bitte entfernen Sie sämtliche Leerzeichen, nachdem der Lizenzschlüssel in das Feld in TigerCreate kopiert wurde.

Setzen Sie über Loading Screen ein individuelles Ladebild (zum Beispiel eine PNG-Datei) mit 2048 x 1536 Pixeln ein. Dieses erscheint, sobald der Splash-Screen verschwindet.

Setzen Sie ein Icon für die App in der Größe 192 x192 Pixel per Drag and Drop oder Klick mit rechter Maustaste ein.

Back To Top

Export als Amazon Appstore Application

Für das Format Standalone Amazon Application gelten sehr ähnliche Voraussetzungen wie für das Android App-Format, deshalb vergleichen Sie bitte mit dem oberen Abschnitt. Auf einen Public Key (s.o.) können Sie bei diesem Format verzichten.

 

Back To Top

Export im Amazon Kindle Format KF 8

Für das Format Kindle KF8 benötigen Sie spezielle Export Tools; diese können Sie zum Beispiel über einen Link in den TigerCreate-Preferences (Menü TigerCreate/Preferences) herunterladen. Dort setzen Sie anschließend auch den Pfad zur benötigten KindleGen-Datei.

 

 

_________

Achtung: KF8 unterstützt keine Animationen, sondern benutzt die erstellten Szenen-Screenshots. Daher sollte bei diesem Format besonders darauf geachtet werden, dass die Screenshots die Geschichte gut wiedergeben.

_________

Back To Top

Export für Webbrowser

Beim Export für Web werden Ihnen insgesamt zwei Reiter mit Optionen angezeigt.

Im Reiter Scenes können Sie, wie bei allen anderen Exporten auch, auswählen, welche Szenen ausgespielt werden sollen. Ebenfalls gibt es noch den Reiter Menu Options. Hier können Sie festlegen, welche Menüicons im finalen Export angezeigt werden.

 

 

_________

Achtung:

  • Die Funktion Audiorekorder wird vom Webexport nicht unterstützt. Deshalb gibt es dafür auch kein Icon im Menü, das angezeigt werden kann.
  • Derzeit gibt es im Webexport noch keine Unterstützung für Games, weshalb der entsprechende Reiter hier fehlt.
  • Die Funktion AR wird im Webexport nicht unterstützt.

_________

Nach dem Export befindet sich im ausgespielten Ordner eine Readme File (einmal als .doc und einmal als .txt) mit ausführlichen Informationen zur Verwendung des Webexports.

 

 

In der Readme File finden sich Infos zum Offline Testing, Hosting und mehrere Wege, den Webplayer auf einer Website einzubinden. Ebenfalls finden sich Informationen darüber, welche Browser unterstützt werden und Lösungsvorschläge zu bekannten Problemen.

Wenn Sie die Readme-Datei schon einmal vorab ansehen möchten, können Sie sich hier ein entsprechendes PDF mit Stand von Januar 2018 herunterladen.

Back To Top