In diesem Artikel erfahren Sie mehr über die Verwendung von anpassbaren Komponenten.

Die Komponente stellt eine Funktion oder eine Gruppe zusammengehöriger wiederverwendbarer benutzerdefinierter Komponenten bereit, die die Produktivität von Gestaltern aus der Werbebranche verbessern. In Animate CC wurden bisher Flash-Komponenten unterstützt, die mit Flash-basierten Zielen verwendet wurden. Ab dieser Version unterstützt Animate HTML5 Canvas. 

  1. Wählen Sie Datei > Neu.

    Wählen Sie Erweitert aus den Registerkarten oben im Dialogfeld Neues Dokument und wählen Sie dann die Option HTML5 Canvas.

    Neues Dokument
    HTML5 Canvas
  2. Wählen Sie „Fenster“ > „Komponenten“ aus.

    Standardkomponenten
    Standardkomponenten

  3. Wählen Sie Komponenten > Video aus. Ziehen Sie die zugehörigen Komponenten per Drag-and-Drop auf die Leinwand. 

  4. Wählen Sie die Videokomponenteninstanz auf der Bühne aus; Sie können Parameter im Eigenschafteninspektor anzeigen und ändern. Mit dem Parameter Quelle kann eine Videodatei in einem lokalen Speicherort ausgewählt oder eine beliebige URL angegeben werden, um das Video abzuspielen (Formate mp4, ogg, ogv oder webm). 

    components_drag_drop
    Ziehen der Komponenten per Drag-and-Drop

  5. Wählen Sie „An Quelldimensionen anpassen“ aus, um den Videoplayer an die Größe des Eingabevideos anzupassen. Diese Funktion funktioniert nur bei mp4-Videos. Bei anderen Videotypen ändern Sie die Größe der Videoinstanz auf der Bühne manuell, damit das Seitenverhältnis gleich bleibt.

  6. Drücken Sie Strg + Eingabetaste (Befehl + Zeilenschalter bei Mac), um eine Vorschau des Films anzuzeigen. Das Video wird in Ihrem Standardbrowser wiedergegeben. Da die Steuerelemente standardmäßig sichtbar sind, können Sie sie anzeigen, wenn Sie die Maus über dem Video in einem Browser bewegen.

    Sie können auf dieselbe Weise vorgehen, um andere Komponenten zu verwenden.

    components_preview
    Vorschau der Komponentenausgabe

Hinweis:

Komponenten werden HTML-Dokumenten als DOM-Elementen hinzugefügt. Entsprechend haben Sie unter den Komponenten-Codefragmenten (Codefragmente > HTML5 Canvas > Komponenten) die Möglichkeit, Komponenten Interaktivität hinzuzufügen.

Hinzufügen von Interaktivität zu Komponenten mithilfe von Codefragmenten

  1. Wählen Sie „Fenster“ > „Komponenten“ aus.

  2. Um Interaktivität zu den Komponenten hinzuzufügen, wählen Sie „Fenster“ > Bedienfeld „Codefragmente“ aus. Sie können die Zuordnung der verschiedenen verfügbaren Komponentenverhaltensweisen anzeigen.

  3. Wählen Sie im Bildschirm „Codefragmente“ die Befehlsfolge „HTML5 Canvas“ > „Komponenten“ aus.

    component_snippets
    Standard-Codefragmente

  4. Doppelklicken Sie je nach ausgewählter Komponente auf das entsprechende Codefragment, um das Fragment im Bedienfeld „Aktionen“ anzuzeigen. Weitere Informationen zum Hinzufügen von Interaktivität zu Codefragmenten finden Sie unter Hinzufügen von Interaktivität mit Codefragmenten in Animate CC

Beispiel

Lernen Sie anhand des folgenden Beispiels, wie Codefragmente verwendet werden, in denen die Wiedergabe des Videos durch Code gesteuert wird.

  1. Wählen Sie die Videoinstanz auf der Bühne aus und deaktivieren Sie die Einstellung „Automatisch abspielen“ im Eigenschafteninspektor. 

  2. Doppelklicken Sie im Bedienfeld „Komponenten“ zweimal auf die Komponente „Schaltfläche“, um zwei Instanzen auf der Bühne zu erstellen und die Schaltflächen zu platzieren. Sie können sie auch per Drag & Drop direkt aus dem Bedienfeld „Komponenten“ auf der Bühne platzieren.

    Component_example_7
    Schaltflächen platzieren

  3. Wählen Sie die erste Schaltflächeninstanz aus und ändern Sie die Beschriftung in „Im PI abspielen“ und die Beschriftung der zweiten Schaltfläche in „Pause“. 

  4. Öffnen Sie das Bedienfeld „Codefragmente“, indem Sie auf „Fenster“ > „Codefragmente“ klicken. Navigieren Sie zu „HTML5 Canvas“ > „Komponenten“ und erweitern Sie den Abschnitt „User Interface“. 

  5. Wählen Sie die Schaltfläche „Abspielen“ auf der Bühne aus, doppelklicken Sie im Bedienfeld „Codefragmente“ auf das Klickereignis für Schaltfläche und klicken Sie auf „OK“. Animate CC weist der ausgewählten Schaltfläche einen Instanznamen zu. Sie können den neu hinzugefügten Code im Bedienfeld „Aktionen“ anzeigen.

    Component_example_4
    Codefragmente hinzufügen

  6. Wählen Sie das Video auf der Bühne aus und erweitern Sie den Videoabschnitt in den Codefragmenten. Doppelklicken Sie auf „Video abspielen“. Der für das Abspielen des Videos erforderliche Code wird dem Bedienfeld „Aktionen“ hinzugefügt.

    Component_example_5
    Code, der dem Bedienfeld „Aktionen“ hinzugefügt wurde

  7. Um das Video bei Anklicken der Schaltfläche abzuspielen, verschieben Sie den Code in den Abschnitt zwischen <Beginn des benutzerdefinierten Codes> und <Ende des benutzerdefinierten Codes>. 

    Component_example_6
    Den Code innerhalb der Tags verschieben

  8. Um einen Code zum Pausieren des Videos hinzuzufügen, wählen Sie die Schaltfläche „Pause“, weisen Sie die neue Klick-Prozedur zu und fügen Sie den Videocode für die Pause hinzu.

  9. Zeigen Sie eine Vorschau des Films an. Klicken Sie auf „Abspielen“, um das Video abzuspielen, und klicken Sie auf „Pause“, um das Video anzuhalten. 

Hinweis:

Sie können das className-Attribut für jede Komponente im Eigenschafteninspektor anzeigen. Verwenden Sie diese Klassennamen, um den Komponenten unter Verwendung eines CSS eine Skin zuzuweisen. Verwenden Sie die CSS-Komponente, um Ihr benutzerdefiniertes CSS zu laden. Die CSS-Komponente ermöglicht es Ihnen, eine beliebige lokale CSS-Datei auszuwählen, die im Film enthalten ist.

Installieren verteilter Komponenten

Designer oder Entwickler können in Animate die verteilte ZXP-Dateikomponente installieren, indem sie das Dienstprogramm Erweiterungen verwalten verwenden.

Voraussetzung

Dienstprogramm „Erweiterungen verwalten“. Informationen zum Download finden Sie unter Hilfe > Erweiterungen verwalten in Animate CC.

Installieren von Komponenten

Um verteilte Komponenten zu installieren, gehen Sie wie folgt vor: 

  1. Doppelklicken Sie auf die Datei ManageExtensions.exe. Das Dialogfeld Erweiterungen verwalten wird angezeigt.

    ManageExtensions
  2. Klicken Sie auf Installieren von Erweiterungen und wählen Sie die Erweiterung (.zxp-Datei), die Sie installieren möchten.

  3. Um die installierte Komponente in Animate CC anzuzeigen, klicken Sie auf Fenster > Komponente. Das Popup-Dialogfeld „Komponenten“ wird angezeigt.

  4. Klicken Sie auf das Hamburger-Symbol in der rechten oberen Ecke und anschließend auf Komponenten neu laden.

    reloading-components

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie