Benutzerhandbuch Abbrechen

HTML-Veröffentlichungsvorlagen

  1. Adobe Animate-Benutzerhandbuch
  2. Einführung in Animate
    1. Neue Funktionen in Animate
    2. Visuelles Glossar
    3. Systemanforderungen für Animate
    4. Tastaturbefehle für Animate
    5. Arbeiten mit verschiedenen Dateitypen in Animate
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. Arbeiten mit klassischen Tween-Animationen in Animate
    5. Pinselwerkzeug
    6. Bewegungsführung
    7. Bewegungs-Tweens und ActionScript 3.0
    8. Bewegungs-Tween-Animationen
    9. Bewegungs-Tween-Animationen
    10. Erstellen von Bewegungs-Tween-Animationen
    11. Verwenden von Eigenschaftenschlüsselbildern
    12. Animieren der Position mithilfe eines Tweens
    13. So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
    14. Bearbeiten des Bewegungspfades einer Tween-Animation
    15. Manipulieren von Bewegungs-Tweens
    16. Hinzufügen von benutzerdefinierten Beschleunigungen
    17. Erstellen und Anwenden von Bewegungsvoreinstellungen
    18. Einrichten von Animations-Tween-Bereichen
    19. Arbeiten mit als XML-Dateien gespeicherten Bewegungs-Tweens
    20. Vergleich von Bewegungs-Tweens und klassischen Tweens
    21. Form-Tweening
    22. Verwenden von Animation mit dem Bone-Werkzeug in Animate
    23. Arbeiten mit Figuren-Rigging in Animate
    24. So verwenden Sie Maskenebenen in Adobe Animate
    25. So arbeiten Sie in Animate mit Szenen
  4. Interaktivität
    1. So erstellen Sie in Animate Schaltflächen
    2. Konvertieren von Animate-Projekten in andere Dokumenttypen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Interaktivität mit Codefragmenten in Animate hinzufügen
    5. Erstellen benutzerdefinierter HTML5-Komponenten
    6. Verwenden von Komponenten in HTML5 Canvas
    7. Erstellen von benutzerdefinierten Komponenten: Beispiele
    8. Codefragmente für benutzerdefinierte Komponenten
    9. Empfohlene Verfahren – Anzeigen mit Animate
    10. Authoring und Veröffentlichen für VR
  5. Arbeitsbereich und Arbeitsablauf
    1. Erstellen und Verwalten von Pinseln
    2. Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
    3. Verwenden von Creative Cloud Libraries in Adobe Animate
    4. Bühne und Bedienfeld „Werkzeuge“ in Animate verwenden
    5. Arbeitsablauf und Arbeitsbereich in Animate
    6. Verwenden von Webschriftarten in HTML5 Canvas-Dokumenten
    7. Zeitleisten und ActionScript
    8. Arbeiten mit mehreren Zeitleisten
    9. Festlegen von Voreinstellungen
    10. Verwenden der Animate-Authoring-Bedienfelder
    11. Zeitleisten-Ebenen in Animate erstellen
    12. Exportieren von Animationen für Apps und Game-Engines
    13. Verschieben und Kopieren von Objekten
    14. Vorlagen
    15. Suchen und Ersetzen in Animate
    16. Rückgängigmachen, Wiederholen und das Bedienfeld „Protokoll“
    17. Tastaturbefehle
    18. So verwenden Sie die Zeitleiste in Animate
    19. Erstellen von HTML-Erweiterungen
    20. Optimierungsoptionen für Bilder und animierte GIF-Dateien
    21. Exporteinstellungen für Bilder und GIF-Dateien
    22. Bedienfeld „Elemente“ in Animate
  6. Multimedia und Video
    1. Transformieren und Kombinieren von Grafikobjekten in Animate
    2. Erstellen von und Arbeiten mit Symbolinstanzen in Animate
    3. Bildnachzeichner
    4. So verwenden Sie Sound in Adobe Animate
    5. Exportieren von SVG-Dateien
    6. Erstellen von Videodateien zur Verwendung in Animate
    7. So fügen Sie in Animate ein Video hinzu
    8. Objekte in Animate zeichnen und erstellen
    9. Umformen von Linien und Formen
    10. Striche, Füllungen und Farbverläufe in Animate CC
    11. Adobe Premiere Pro und After Effects
    12. Farb-Bedienfelder in Animate CC
    13. Öffnen von Flash CS6-Dateien mit Animate
    14. In Animate mit klassischem Text arbeiten
    15. Platzieren von Bildern in Animate
    16. Importierte Bitmaps in Animate
    17. 3D-Grafiken
    18. Arbeiten mit Symbolen in Animate
    19. Zeichnen von Linien und Formen mit Adobe Animate
    20. Mit Bibliotheken in Animate arbeiten
    21. Exportieren von Sounds
    22. Auswählen von Objekten in Animate CC
    23. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    24. Anwenden von Mischmodi
    25. Anordnen von Objekten
    26. Automatisieren von Aufgaben mit dem Menü „Befehle“
    27. Mehrsprachiger Text
    28. Verwenden der Kamera in Animate
    29. Grafikfilter
    30. Sounds und ActionScript
    31. Zeichnungsvoreinstellungen
    32. Zeichnen mit dem Stiftwerkzeug
  7. Plattformen
    1. Konvertieren von Animate-Projekten in andere Dokumenttypen
    2. Unterstützung benutzerdefinierter Plattformen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Erstellen und Veröffentlichen eines WebGL-Dokuments
    5. So packen Sie Apps für AIR for iOS:
    6. Veröffentlichen von Apps für AIR for Android
    7. Veröffentlichen für Adobe AIR für den Desktop
    8. ActionScript-Veröffentlichungseinstellungen
    9. Empfohlene Verfahren – Organisieren von ActionScript in einer Anwendung
    10. So verwenden Sie ActionScript mit Animate
    11. Eingabehilfen für den Animate-Arbeitsbereich
    12. Schreiben und Verwalten von Skripts
    13. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    14. Unterstützung benutzerdefinierter Plattformen – Übersicht
    15. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    16. Debuggen von ActionScript 3.0
    17. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
  8. Exportieren und Veröffentlichen
    1. So exportieren Sie Dateien aus Animate CC
    2. OAM-Veröffentlichung
    3. Exportieren von SVG-Dateien
    4. Exportieren von Grafiken und Videos mit Animate
    5. Veröffentlichen von AS3-Dokumenten
    6. Exportieren von Animationen für Apps und Game-Engines
    7. Exportieren von Sounds
    8. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    9. Empfohlene Verfahren – Videokonventionen
    10. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    11. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    12. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    13. ActionScript-Veröffentlichungseinstellungen
    14. Veröffentlichungseinstellungen für Animate festlegen
    15. Exportieren von Projektor-Dateien
    16. Exportieren von Bildern und animierten GIF-Dateien
    17. HTML-Veröffentlichungsvorlagen
    18. Adobe Premiere Pro und After Effects
    19. Schnelles Teilen und Veröffentlichen Ihrer Animationen
  9. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

HTML-Veröffentlichungsvorlagen

Bei einer HTML-Vorlage in Animate handelt es sich um eine Textdatei, die sowohl statischen HTML-Code als auch flexiblen Vorlagencode bestehend aus einer speziellen Art von Variablen enthält (die sich von ActionScript-Variablen unterscheiden). Wenn Sie eine SWF-Datei veröffentlichen, ersetzt Animate die Variablen mit den über das Dialogfeld „Einstellungen für Veröffentlichungen“ auf der Registerkarte „HTML“ ausgewählten Werten und generiert eine HTML-Seite, in die Ihre SWF-Datei eingebettet ist.

Animate wird mit verschiedenen Vorlagen geliefert, die die meisten Benutzeranforderungen erfüllen. Sie brauchen also keine HTML-Seiten mehr von Hand zu erstellen, um die SWF-Datei anzuzeigen. So ist etwa die Vorlage „Nur Animate“ sehr nützlich, um die Dateien in einem Browser zu testen. Die SWF-Datei wird in die HTML-Seite eingefügt, damit sie in einem Webbrowser abgespielt werden kann, wenn Flash Player installiert ist.

Sie können dieselbe Vorlage benutzen, die Einstellungen ändern und dann eine neue HTML-Seite veröffentlichen. Mit einem beliebigen HTML-Editor können Sie eigene Vorlagen erstellen. Vorlagen werden wie normale HTML-Seiten erstellt. Bestimmte Werte, die sich auf die SWF-Datei beziehen, werden jedoch durch Variablen ersetzt, die mit einem Dollarzeichen ($) beginnen.

Die HTML-Vorlagen von Animate haben folgende spezielle Eigenschaften:

  • Einen einzeiligen Titel, der im Dialogfeld „Einstellungen für Veröffentlichungen“ auf der Registerkarte „HTML“ im Popupmenü „Vorlage“ angezeigt wird.

  • Eine längere Beschreibung, die angezeigt wird, wenn Sie im Dialogfeld „Einstellungen für Veröffentlichungen“ auf der Registerkarte „HTML“ auf „Info“ klicken.

  • Vorlagenvariablen mit vorangestelltem Dollarzeichen ($), die angeben, an welcher Stelle Parameterwerte eingesetzt werden sollen, wenn Animate die Ausgabedatei erstellt.

    Hinweis: Mit einem umgekehrten Schrägstrich (Backslash) und einem Dollarzeichen (\ $) können Sie ein „$“ zu anderen Zwecken im Dokument einsetzen.

  • HTML-Tags object und embed, die die tagspezifischen Voraussetzungen von Microsoft Internet Explorer und Netscape® Communicator® bzw. Navigator® erfüllen. Damit eine SWF-Datei korrekt auf einer HTML-Seite angezeigt wird, sind bestimmte Konventionen in Verbindung mit diesen Tags zu beachten. In Internet Explorer wird eine SWF-Datei über das HTML-Tag object geöffnet; in Netscape hingegen über das Tag embed.

Anpassen von HTML-Veröffentlichungsvorlagen

Sie können HTML-Vorlagenvariablen ändern, um eine Imagemap, einen Textbericht oder einen URL-Bericht zu erstellen oder um eigene Werte für einige der gängigsten Animate-HTML-Tagparameter object und embed einzufügen (für Browser, die ActiveX-Steuerelemente und Plug-Ins verwenden).

Animate-Vorlagen können HTML-Code für den jeweiligen Anwendungszweck oder Code für spezielle Interpreter wie Cold Fusion und ASP enthalten.

  1. Öffnen Sie die Animate-HTML-Vorlage, die Sie ändern möchten, in einem HTML-Editor. Diese Vorlagen befinden sich in den folgenden Verzeichnissen:

    • Windows XP oder Vista: Startlaufwerk\Dokumente und Einstellungen\Benutzer\Lokale Einstellungen\Anwendungsdaten\Adobe\Flash CS5\Sprache\Configuration\HTML. Der Ordner mit den Anwendungsdaten ist normalerweise versteckt. Um ihn anzuzeigen, müssen Sie gegebenenfalls die Einstellungen für den Windows Explorer ändern.

    • Mac OS X 10.3 und höher: Macintosh HD/Applications/Adobe Flash CS5/language/First Run/HTML.

      Das Startlaufwerk ist das Laufwerk, von dem Windows gestartet wird (normalerweise C:). Der Benutzer ist der Benutzername der Person, die sich beim Betriebssystem Windows angemeldet hat. Die Sprache wird durch eine abgekürzte Sprachbezeichnung definiert. Beispiel: In Deutschland ist die Sprache „de” für Deutsch.

  2. Bearbeiten Sie die Vorlage.
  3. Speichern Sie die Vorlage in dem Ordner, aus dem Sie sie aufgerufen haben.
  4. Zum Anwenden der Vorlageneinstellungen auf Ihre SWF-Datei wählen Sie „Datei“ > „Einstellungen für Veröffentlichungen“, klicken auf „HTML“ und wählen die von Ihnen modifizierte Vorlage. Animate ändert lediglich die Variablen in der von Ihnen ausgewählten Vorlage.

  5. Wählen Sie die restlichen Veröffentlichungseinstellungen aus und klicken Sie auf „OK“.

HTML-Vorlagenvariablen

In der folgenden Tabelle sind die von Animate erkannten Vorlagenvariablen aufgelistet:

Attribut/Parameter

Vorlagenvariable

Vorlagentitel

$TT

Anfang der Vorlagenbeschreibung

$DS

Ende der Vorlagenbeschreibung

$DF

Animate-Titel (SWF-Datei)

$T1

Animate-Titel (SWF-Datei) für Suchmaschinen-Metadaten

$TL

Beschreibung für Suchmaschinen-Metadaten

$DC

Metadata-XML-String zur Verwendung in Suchmaschinen

$MD

Breite

$WT

Höhe

$HT

Film

$MO

HTML-Ausrichtung

$HA

Schleife

$LO

Parameter für object

$PO

Parameter für embed

$PE

Wiedergabe

$PL

Qualität

$QU

Skalierung

$SC

Ausrichtung bei Skalierung

$SA

Fenstermodus

$WM

Geräteschriftart

$DE

Hintergrundfarbe

$BG

Filmtext (Bereich zum Schreiben des Filmtexts)

$MT

Film-URL (Ort der SWF-Datei-URL)

$MU

Bildbreite (nicht spezifizierter Bildtyp)

$IW

Bildhöhe (nicht spezifizierter Bildtyp)

$IH

Bilddateiname (nicht spezifizierter Bildtyp)

$IS

Imagemap-Name

$IU

Imagemap-Tag-Position

$IM

QuickTime-Breite

$QW

QuickTime-Höhe

$QH

QuickTime-Dateiname

$QN

GIF-Breite

$GW

GIF-Höhe

$GH

GIF-Dateiname

$GN

JPEG-Breite

$JW

JPEG-Höhe

$JH

JPEG-Dateiname

$JN

PNG-Breite

$PW

PNG-Höhe

$PH

PNG-Dateiname

$PN

Verwenden von Vorlagenkurzvariablen

Die Vorlagenvariablen $PO (für object-Tags) und $PE (für embed-Tags) sind nützliche Kurzelemente. Alle Variablen bewirken, dass Animate für einige der geläufigsten Parameter für die Tags object und embed – darunter PLAY ($PL), QUALITY ($QU), SCALE ($SC), SALIGN ($SA), WMODE ($WM), DEVICEFONT ($DE) und BGCOLOR ($BG) – von den Vorgaben abweichende Werte in eine Vorlage einfügt.

HTML-Beispielvorlage

Die Vorlagendatei „Default.html“ in Animate enthält viele der gängigen Vorlagenvariablen:

$TTFlash Only 
$DS 
Display Adobe SWF file in HTML. 
$DF 
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> 
<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> 
<head> 
$CS 
<title>$TI</title> 
</head> 
<body bgcolor=&quot;$BG&quot;> 
<!--url's used in the movie--> 
$MU 
<!--text used in the movie--> 
$MT 
<object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; codebase=&quot;http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0&quot; width=&quot;$WI&quot; height=&quot;$HE&quot; id=&quot;$TI&quot; align=&quot;$HA&quot;> 
<param name=&quot;allowScriptAccess&quot; value=&quot;sameDomain&quot; /> 
$PO 
<embed $PEwidth=&quot;$WI&quot; height=&quot;$HE&quot; name=&quot;$TI&quot; align=&quot;$HA&quot; allowScriptAccess=&quot;sameDomain&quot; type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.adobe.com/go/getflashplayer&quot; /> 
</object> 
</body> 
</html>

Erstellen von Imagemaps als Ersatz einer SWF-Datei

Animate kann von jedem Bild eine Imagemap erstellen. Dabei bleibt die Funktion der Schaltflächen, die auf URLs verweisen, erhalten. Wenn eine HTML-Vorlage die Vorlagenvariable $IM enthält, wird der Imagemap-Code von Animate in die Vorlage eingefügt. Die Variable $IU gibt den Namen der GIF-, JPEG- oder PNG-Datei an.

  1. Wählen Sie im Dokument das gewünschte Schlüsselbild für die Imagemap aus und weisen Sie ihm im Bildeigenschafteninspektor („Fenster“ > „Eigenschaften“) die Bezeichnung #Map zu. Sie können jedes beliebige Schlüsselbild mit Schaltflächen verwenden, denen getURL-Aktionen mit ActionScript 1.0 oder ActionScript 2.0 zugewiesen wurden.

    Wenn Sie keine Bildbezeichnung angeben, erstellt Animate mithilfe der Schaltflächen eine Imagemap im letzten Bild der SWF-Datei. Diese Option erstellt eine eingebettete Imagemap, keine eingebettete SWF-Datei.

  2. So wählen Sie das Bild aus, um die Imagemap anzuzeigen:
    • PNG- oder GIF-Dateien: Definieren Sie das Bild, das zur Anzeige der Imagemap verwendet werden soll, als #Static.

    • JPEG-Dateien: Setzen Sie den Abspielkopf beim Veröffentlichen auf das Bild, das zur Anzeige der Imagemap verwendet werden soll.

  3. Öffnen Sie die zu ändernde HTML-Vorlage mit einem HTML-Editor.
  4. Speichern Sie die Vorlage.
  5. Wählen Sie „Datei“ > „Einstellungen für Veröffentlichungen“, klicken Sie auf die Registerkarte „Formate“ und wählen Sie dann ein Format für die Imagemap aus. Klicken Sie anschließend auf „OK“.

    Angenommen, Sie fügen den folgenden Code in eine Vorlage ein:

    $IM 
    <img src=$IS usemap=$IU width=$IW height=$IH BORDER=0>

    In diesem Fall wird in dem mit dem Befehl „Veröffentlichen“ generierten HTML-Dokument der folgende Code erzeugt:

    <map name=&quot;mymovie&quot;> 
    <area coords=&quot;130,116,214,182&quot; href=&quot;http://www.adobe.com&quot;> 
    </map> 
    <img src=&quot;mymovie.gif&quot; usemap=&quot;#mymovie&quot; width=550 height=400 border=0>

Erstellen von Text- und URL-Berichten

Die Vorlagenvariable $MT bewirkt, dass Animate den gesamten Text aus der aktuellen SWF-Datei als Kommentar in den HTML-Code einfügt. Dies ist besonders dann nützlich, wenn der Inhalt einer SWF-Datei indiziert und für Suchmaschinen sichtbar gemacht werden soll.

Die Vorlagenvariable $MU bewirkt, dass Animate eine Liste aller URLs erstellt, auf die durch Aktionen in der aktuellen SWF-Datei verwiesen wird, und diese als Kommentar an der betreffenden Stelle einfügt. Anschließend kann mithilfe von Linkverifizierungsprogrammen geprüft werden, ob die Links in der SWF-Datei korrekt sind.

Einbetten von Suchmetadaten

Die Vorlagenvariablen $TL (SWF-Dateititel) and $DC (Beschreibungsmetadaten) ermöglichen das Einschließen von Suchmetadaten in die HTML-Datei. Dadurch können die Auffindbarkeit der SWF-Datei für Suchmaschinen und die Qualität der Suchergebnisse verbessert werden. Mit der Vorlagenvariable $MD können Sie Suchmetaden als XML-String hinzufügen.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?