O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Lebendige Webseiten mit Adobe Edge Animate

Book Description

  • Einführung in Web-Motion-Design-Edge Animate und Werkzeuge wie Edge Code und Edge Commons- Eine Web-Animation mit Edge Animate komponieren- Bauen Sie Ihre Kompositionen mit APIs und jQuery aus- Erweitern Sie Ihre Kreativität- Deployment-Strategien für Web, Desktop und Mobile (Smartphones/Tablets)- Einbindung von Third-Party-Fonts

Table of Contents

  1. Cover
  2. Titel
  3. Impressum
  4. VORWORT
  5. Inhalt
  6. 1 Einführung
    1. 1.1 Worum es in diesem Buch geht
    2. 1.2 Moving Target: Offene Webstandards
    3. 1.3 Web-Animationen: Status quo
  7. 2 Das Autorenwerkzeug Adobe Edge Animate
    1. 2.1 Zielgruppen
      1. 2.1.1 (Web) Motion-Designer, Interface/Interaction-Designer, Webdesigner, ehemalige Flash-Designer
      2. 2.1.2 Grafik/Print-Designer, die ihr Leistungsspektrum auf das Web erweitern wollen
      3. 2.1.3 Producer von E-Publications
      4. 2.1.4 Webdesigner und -entwickler
    2. 2.2 Einsatzmöglichkeiten und Workflows
      1. 2.2.1 Edge-Animate-Banner
      2. 2.2.2 Edge Animate für Story Telling
      3. 2.2.3 Edge Animate auf mobilen Endgeräten
      4. 2.2.4 Edge Animate und DPS
      5. 2.2.5 Edge Animate in andere Seiten bzw. CMS einbetten
    3. 2.3 Download und Installation
    4. 2.4 Benutzeroberfläche
      1. 2.4.1 Begrüßungsscreen
      2. 2.4.2 Menüleiste
      3. 2.4.3 Bühne
      4. 2.4.4 Eigenschaftsinspektor
      5. 2.4.5 Elemente
      6. 2.4.6 Bibliothek
      7. 2.4.7 Zeitleiste
      8. 2.4.8 Arbeitsbereiche
      9. 2.4.9 Tastaturbefehle (Shortcuts)
    5. 2.5 Hello Edge Animate!
    6. 2.6 Edge Animate Runtime Basics
      1. 2.6.1 Systemvoraussetzungen
      2. 2.6.2 HTML & Co.
      3. 2.6.3 Ein solides Fundament: jQuery
      4. 2.6.4 Das Resultat und die Runtime
      5. 2.6.5 Das Code-Verhalten von Edge Animate
    7. 2.7 Ergänzende Werkzeuge
      1. 2.7.1 Gestaltungswerkzeuge und Bildmanipulation
      2. 2.7.2 Code-Editoren und Entwicklungsumgebungen
  8. 3 Kreation
    1. 3.1 From Scratch (leeres Dokument)
    2. 3.2 Elemente und Bibliothek
    3. 3.3 Ausgangspunkt HTML-Dokument
      1. 3.3.1 In Edge Animate animieren
    4. 3.4 Grundeigenschaften
      1. 3.4.1 Position, Größe und Deckkraft
      2. 3.4.2 Eigenschaften per Anfasser verändern
      3. 3.4.3 Anzeige (Sichtbarkeit)
      4. 3.4.4 Überlauf (Overflow)
      5. 3.4.5 Mauszeiger (Cursor)
      6. 3.4.6 Schatten
      7. 3.4.7 Beschneiden (Clipping)
    5. 3.5 Verschachteln und Symbole
    6. 3.6 Symbole exportieren und wiederverwenden
    7. 3.7 Erweiterte Eigenschaften
      1. 3.7.1 Kontext: Stage
      2. 3.7.2 Kontext: Primitive Form
      3. 3.7.3 Kontext: Text
      4. 3.7.4 Kontext: Bild
      5. 3.7.5 Kontext: Symbol
    8. 3.8 Benutzerdefinierte Fonts
      1. 3.8.1 Google Web Fonts
      2. 3.8.2 Adobe Typekit
      3. 3.8.3 Fonts in Edge Animate einbinden
    9. 3.9 Flexible Layouts
      1. 3.9.1 Relative Werte (Prozentangaben)
      2. 3.9.2 Minimale und maximale Breite
      3. 3.9.3 Elemente flexibel ausrichten
      4. 3.9.4 Vorgaben für flexible Layouts
    10. 3.10 Praxis
      1. 3.10.1 Flexibles Banner für verschiedene Auflösungen
      2. 3.10.2 Unabhängige Layouts für verschiedene Größen
  9. 4 Animation
    1. 4.1 Die Zeitleiste
      1. 4.1.1 Schlüsselbilder (Keyframes)
      2. 4.1.2 Zusatzfunktionen in der Zeitleiste
      3. 4.1.3 Abspielen
      4. 4.1.4 Animationssequenzen im Nachhinein verändern
    2. 4.2 Non-lineare Animationen (Easings)
    3. 4.3 Pfadanimationen
    4. 4.4 Symbole und ihre Zeitleisten
      1. 4.4.1 Symbole
      2. 4.4.2 Symbole wiederverwenden
      3. 4.4.3 Unabhängige Zeitleisten
      4. 4.4.4 Steuerung von Zeitleisten mit Wiedergabeaktionen
      5. 4.4.5 Steuerung von Zeitleisten mit Scriptanweisungen
    5. 4.5 Praxis
      1. 4.5.1 Banner-Animation
      2. 4.5.2 Asynchrone Animationen und Wiedergabeaktionen
      3. 4.5.3 Symbole und Steuerung per Script
      4. 4.5.4 Charakteranimationen mit Spritesheets
  10. 5 Interaktion und Scripting
    1. 5.1 Einfaches Logging
    2. 5.2 Ereignisse (Events)
      1. 5.2.1 Auf Ereignisse reagieren
      2. 5.2.2 Benutzer-Ereignisse
      3. 5.2.3 Kompositions-Ereignisse
      4. 5.2.4 Zeitleisten-Ereignisse
      5. 5.2.5 Symbol-Ereignisse
      6. 5.2.6 System-Ereignisse
    3. 5.3 Kontext von Ereignissen
    4. 5.4 Symbole und Elemente
    5. 5.5 Aktionen
      1. 5.5.1 Code-Vorlagen
      2. 5.5.2 Steuerung der Zeitleiste
      3. 5.5.3 URL aufrufen
      4. 5.5.4 Auf Symbole zugreifen
      5. 5.5.5 Auf Elemente zugreifen
      6. 5.5.6 Elemente modifizieren
      7. 5.5.7 Symbole dynamisch erzeugen und löschen
      8. 5.5.8 Mit Symbolvariablen arbeiten
      9. 5.5.9 Das sym-Argument
    6. 5.6 Code-Ansichten
    7. 5.7 Edge Code und Brackets
    8. 5.8 Praxis
      1. 5.8.1 Schaltflächen
      2. 5.8.2 Tweeting Edge
      3. 5.8.3 Intervall-Updates ohne Zeitleiste (Edge Clock)
  11. 6 Veröffentlichen
    1. 6.1 Vorbereitungen
      1. 6.1.1 Poster (Standbild)
      2. 6.1.2 Abwärtskompatible Bühne
      3. 6.1.3 Preloader
    2. 6.2 Export und Einstellungen
      1. 6.2.1 Profil »Web«
      2. 6.2.2 Profil »Animate-Bereitstellungspaket«
      3. 6.2.3 Profil »iBooks/OS X«
    3. 6.3 Praxis
      1. 6.3.1 Komposition mit FTP veröffentlichen
      2. 6.3.2 Komposition in eine HTML-Webseite einbinden
      3. 6.3.3 Edge Animate in WCMS-Umgebungen
      4. 6.3.4 InDesign (DPS)
  12. 7 Für Fortgeschrittene
    1. 7.1 Externe Komponenten
      1. 7.1.1 yepnope.js
      2. 7.1.2 Google Maps
      3. 7.1.3 Videos (YouTube)
      4. 7.1.4 jQuery-UI-Komponenten
    2. 7.2 Mehrere Kompositionen auf einer Seite verdrahten
    3. 7.3 Wiederverwendbare Komponenten
    4. 7.4 Edge Commons
      1. 7.4.1 Laden der Edge Commons
      2. 7.4.2 Logging
      3. 7.4.3 Spotlight Overlay (YouTube)
      4. 7.4.4 Parallax Scrolling
      5. 7.4.5 Composition Loader
      6. 7.4.6 Sound
      7. 7.4.7 Data Injection
    5. 7.5 Gaming
      1. 7.5.1 Edge-Animate-Projekt
      2. 7.5.2 Game Assets
      3. 7.5.3 Character-Steuerung
      4. 7.5.4 Hotspots
      5. 7.5.5 Spiellogik
      6. 7.5.6 Fazit
  13. Index