Animate Kompaktkurs

Animierte Werbebanner, interaktive Flyer, das Erzählen kleiner Geschichten für Social-Media, einfache, visuelle Gebrauchsanweisungen, interaktive Slideshows und Pop-Ups erstellen Sie heute mit dem neuen Tool von Adobe: Animate. Die einmal erstellten Inhalte lassen sich vielfältig integrieren in Websites, elektronische Publikationen, etc.

Ob als code-resistenter Designer, oder als hardcore-Webprogrammierer – Animate ist das ultimative Tool, um schnell Inhalte aus anderen Programmen der AdobeCreativeSuite mit Interaktivität zu versehen und zu animieren und damit ansprechende Inhalte für Web, Digital Publishing und Mobiles zu generieren.

Nutzen Sie die Zeitleiste in Animate zum Animieren fertiger Layouts aus Illustrator oder Photoshop, erstellen Sie Übergänge - und setzen Sie dazu auf die neuen Standards HTML 5, CSS3 und JavaScript.
Übrigens: Die ideale Ergänzung zu Animate bietet Muse – damit erstellen Sie komplette Websites und bauen Ihre Animate Inhalte gleich professionell in Ihre Sites ein – unter Nutzung flexibler Layouts für mobile Endgeräte.

Zielgruppe

(Web)Designer, die schnell animierte Webinhalte wie Werbebanner, Werbefilme, interaktive Flyer und Produktbeschreibungen erstellen wollen.

Voraussetzungen

Sicherer Umgang mit dem PC oder Mac, Maus und Tastatur. Das betrifft vor allem die Dateiverwaltung: das Anlegen von Ordnern und Verzeichnissen, das Öffnen, Speichern und Verschieben von Dateien.
Entweder solide Grundkenntnisse in CSS/HTML/Javascript, da Animate darauf aufbaut.
Oder solide Grundkenntnisse in einem der folgenden Adobe-Programme: Photoshop, Illustrator, Fireworks, Flash oder AfterEffects.

Trainingsinhalte

1. Arbeitsoberfläche, Werkzeuge, Menustruktur und Bedienfelder:

Im Vergleich zu anderen Boliden wie Photoshop oder AfterEffects gestaltet sich die Arbeitsoberfläche von Animate sehr übersichtlich und ausgesprochen spartanisch, was den Umfang von Werkzeugen und Bedienfeldern betrifft. Auch die Menus sind relativ kurz und die Einträge oft selbsterklärend. In dieser Sequenz legen Sie sich ein eigenes Layout für die Arbeitsoberfläche an und die Bedienfelder Eigenschaften und Zeitleiste – als Dreh- und Angelpunkt von Animate – werden ausführlich erklärt.

2. Grafikformate - Erstellung von einfachen Formen und Grafikimport:

Animate ist kein Zeichenprogramm; es stellt nur die Tools bereit, um importierte Inhalte zu animieren. Mit Ausnahme von einfachen Formen wie Rechteck und Ellipse müssen die Inhalte für Ihre Komposition in einem Bildbearbeitungs-, Grafik-, Animations- oder Videoprogramm erstellt und dort in einem entsprechenden Format exportiert werden. Animate kann folgende Grafikformate verarbeiten: GIF, JPG, PNG, and SVG.
Sie lernen einfache Grundformen in Animate zu erstellen, anzupassen und zu transformieren. Zudem werden Sie Inhalte aus Photoshop, Illustrator und Fireworks korrekt exportieren und in Animate importieren.

3. Arbeiten mit Text – Textwerkzeug und Webfonts:

Animate besitzt ein eigenes Textwerkzeug mit den entsprechenden Möglichkeiten der Textformatierung. Allerdings stehen originär nur die aus Webeditoren bekannten Schriftsammlungen zur Verfügung. Will man die volle Freiheit ansprechender typographischer Gestaltung auch für seine Animate Inhalte nutzen, geht dies nur über die Nutzung eines Hosters, der Schriften über das Web bereitstellt. Hier zeigen wir Ihnen die Einbindung von Schriften über Typekit, GoogleFonts und webFonts.

4. Einstieg in die Animation:

Zum animieren der Inhalte werden diese auf die Bühne gezogen. Die Inhalte erscheinen dann sowohl in der Elemente-Palette und der Zeitleiste. Sortiert und verschachtelt werden die Inhalte in der Elemente-Palette, in der Zeitleiste wird nur animiert.
Sie lernen das Setzen von Schlüsselbildern – sog. Keyframes – kennen, um einfache, lineare Animationen zu steuern. Das geniale PIN-Werkzeug hilft Ihnen, um schnelle Ergebnisse zu erzielen. Überblenden, Tweening, Kopieren von Animationseinstellungen, AutoKeyframing, Übergänge und Easing sind die Inhalte dieser Lernsequenz.
Animiert werden dabei Deckkraft, Position und Größe, Skalieren und Neigen, Drehen, Farben, Schatten, Ecken, Beschneiden von Elementen – alles CSS-gesteuerte Einstellungen in der Eigenschaften-Palette.

5. Arbeit mit Symbolen, Finetuning von Animationen:

Der Einsatz mit Symbolen und Instanzen erleichtert die Arbeit in Animate ungemein. Symbole sind Elemente mit einer unabhängigen Zeitleiste. Komplexe Animationen sind ohne Symbole nicht umsetzbar. Symbole werden einmal erstellt und sind als Instanz in einer Animation wiederholt einsetzbar. Sie lassen sich exportieren und stehen damit für andere Projekte zur Verfügung. Umgang und Einsatz von Symbolen, die Bearbeitung in der Symbol-Erstellungsumgebung sind Thema dieser Lernsequenz.
Sie erstellen Symbole für verschachtelte Animationen. Sie passen Playback-Einstellungen an. Sie fügen Beschriftungen – sogenannte Labels - ein, setzen Trigger – um Aktionen auszulösen und Loops zu generieren.

6. Interaktive Elemente – Code-Editor:

Interaktivität in Animate wird gesteuert über Javascript. Dabei bietet Animate verschiedene Möglichkeiten, Javascript-Code zu generieren: Sie können auf die vorgefertigten Code-Fragmente zugreifen und diese einsetzen und an Ihre Bedürfnisse anpassen. Oder Sie können im Code-Editor eigene Skripte schreiben. Es wird auch auf den Bezug zwischen Javascript, jQuery-Bibliothek und Animate API eingegangen und die Export-Dateien, die Animate generiert, kurz erläutert.
Sie erstellen Schaltflächen und versehen diese mit Events. Sie passen den Mouse-Cursor an und erstellen eine interaktive Slideshow, sowie visuelle Feedback-Elemente. Sie ändern Text via Javascript-Code.

7. Einbetten von Mulimedia:

Ohne GoogleMaps, Sound und Video kommt heute fast keine Website mehr aus. Das Einbetten und Verlinken von Multimedia ist Thema dieser Lerneinheit.

8. Export und Publizieren, Kompatibilität und flexible Layouts:

Export für Web, iBooks/OS X und für die Integration in In-Design für elektronische Publikationen, gestalten sich in Animate denkbar einfach. Die Integration in bestehende HTML-Seiten ist kein Hexenwerk und wird anhand Dreamweaver gezeigt.
Die Möglichkeit, mit flexiblen Layouts unterschiedlichen Ausgabegeräten und Browserfenstergrößen gerecht zu werden, lernen Sie kennen. Auch langen Ladezeiten läßt sich mit dem Einbau eines Preloaders die Spitze nehmen und mit der Abwärts kompatiblen Bühne lassen sich auch für ältere Browser spezielle Inhalte bereitstellen.

Seminarzeiten

• Dauer: 2 Tage
• 1. Tag: 9:00 Uhr bis 16:00 Uhr
• Letzter Tag: 9:00 Uhr bis 16:00 Uhr

Preis pro Person