1.2.4 Automatisierung mithilfe von Connectoren

Sie verwenden jetzt die vordefinierten Connectoren in Workfront Fusion für Photoshop und verbinden die Firefly Text-2-Image-Anforderung und die Photoshop-Anforderungen in einem Szenario.

1.2.4.1 Variablen aktualisieren

Bevor Sie mit der Connector-Einrichtung fortfahren, müssen die folgenden Variablen zum Modul Initialize Constants hinzugefügt werden.

Gehen Sie zurück zu Ihrem ersten Knoten, wählen Sie Konstanten initialisieren und wählen Sie dann Element hinzufügen für jede dieser Variablen aus.

Sie können Ihre Variablen finden, indem Sie zurück zu Postman gehen und Ihre Umgebungsvariablen öffnen.

Kopieren Sie diese Werte nach Workfront Fusion und fügen Sie für jede dieser vier Variablen ein neues Element hinzu.

Ihr Bildschirm sollte wie folgt aussehen. Klicken Sie OK.

1.2.4.2 Aktivieren Ihres Szenarios mithilfe eines Webhooks

Bisher haben Sie Ihr Szenario zum Testen manuell ausgeführt. Aktualisieren wir nun Ihr Szenario mit einem Webhook, damit es von einer externen Umgebung aus aktiviert werden kann.

Wählen Sie + aus, suchen Sie nach Webhook und wählen Sie dann Webhooks aus.

Wählen Sie Benutzerdefinierter Webhook aus.

Ziehen Sie das Benutzerdefinierter Webhook-Modul an den Anfang Ihres Szenarios. Wählen Sie als Nächstes das Uhr-Symbol aus und ziehen Sie es auf das Modul Benutzerdefinierter Webhook.

Sie sollten das dann sehen. Ziehen Sie als Nächstes den roten Punkt auf dem ersten Modul in Richtung des lilafarbenen Punkts auf dem zweiten Modul.

Sie sollten das dann sehen. Klicken Sie anschließend auf das Modul Benutzerdefinierter Webhook.

Klicken Sie auf Hinzufügen.

Legen Sie den Webhook-Namen auf --aepUserLdap-- - Firefly + Photoshop Webhook fest. Klicken Sie auf Speichern.

Ihre Webhook-URL ist jetzt verfügbar. Klicken Sie auf Adresse in Zwischenablage kopieren, um die URL zu kopieren.

Öffnen Sie Postman und fügen Sie einen neuen Ordner in der Sammlung FF - Firefly Services Tech Insiders hinzu.

Benennen Sie den Ordner --aepUserLdap-- - Workfront Fusion.

Wählen Sie in dem soeben erstellten Ordner die 3 Punkte … und dann Anfrage hinzufügen.

Legen Sie den Methodentyp auf POST fest und fügen Sie die URL Ihres Webhooks in die Adressleiste ein.

Sie müssen einen benutzerdefinierten Hauptteil senden, damit die Variablenelemente von einer externen Quelle für Ihr Workfront Fusion-Szenario bereitgestellt werden können.

Wechseln Sie zu Textkörper und wählen Sie Roh aus.

Fügen Sie den folgenden Text in den Textkörper Ihrer Anfrage ein. Wählen Sie Senden aus.

{
    "psdTemplate": "citisignal-fiber.psd",
    "xlsFile": "placeholder",
    "prompt":"misty meadows",
    "cta": "Buy this now!",
    "button": "Click here to buy!"
}

Zurück in Workfront Fusion wird eine Meldung auf Ihrem benutzerdefinierten Webhook angezeigt, die lautet: Erfolgreich ermittelt.

Adobe Firefly-Connector 1.2.4.3

Klicken Sie auf das Symbol + , um ein neues Modul hinzuzufügen.

Geben Sie den Suchbegriff Adobe Firefly ein und wählen Sie dann Adobe Firefly.

Wählen Sie Bild erstellen aus.

Klicken Sie auf das Adobe Firefly-Modul, um es zu öffnen, und klicken Sie dann auf Hinzufügen, um eine neue Verbindung zu erstellen.

Füllen Sie die folgenden Felder aus:

Die Client-ID und Client-Geheimnis Ihres Adobe I/O-Projekts finden Sie hier.

Nachdem Sie alle Felder ausgefüllt haben, klicken Sie auf Weiter. Ihre Verbindung wird dann automatisch validiert.

Wählen Sie als Nächstes die Variable Eingabeaufforderung aus, die dem Szenario vom eingehenden benutzerdefinierten Webhook“ bereitgestellt.

Setzen Sie Modellversion prompt auf image4 standard. Klicken Sie auf OK.

Klicken Sie auf Speichern, um Ihre Änderungen zu speichern, und klicken Sie dann auf Einmal ausführen, um Ihre Konfiguration zu testen.

Wechseln Sie zu Postman, überprüfen Sie die Eingabeaufforderung in Ihrer Anfrage und klicken Sie dann auf Senden.

Nachdem Sie auf Senden geklickt haben, gehen Sie zurück zu Workfront Fusion und klicken Sie auf das Blasensymbol im Modul Adobe Firefly, um die Details zu überprüfen.

Navigieren Sie AUSGABE zu Details > url, um die URL des von Adobe Firefly generierten Bildes finden.

Kopieren Sie die URL und fügen Sie sie in Ihren Browser ein. Jetzt sollte ein Bild angezeigt werden, das die von der Postman-Anfrage gesendete Eingabeaufforderung darstellt, in diesem Fall Misty Meadows.

1.2.4.2 Ändern des Hintergrunds der PSD-Datei

Sie aktualisieren Ihr Szenario jetzt, um es durch die Verwendung von mehr vorkonfigurierten Connectoren intelligenter zu gestalten. Sie werden auch die Ausgabe von Firefly mit Photoshop verbinden, damit sich das Hintergrundbild der PSD-Datei dynamisch ändert, indem Sie die Ausgabe der Aktion "Firefly-Bild generieren“ verwenden.

Sie sollten das dann sehen. Bewegen Sie als Nächstes den Mauszeiger über das Modul Adobe Firefly und klicken Sie auf das Symbol + .

Geben Sie im Suchmenü Photoshop ein und klicken Sie dann auf die Aktion Adobe Photoshop.

Wählen PSD-Bearbeitungen anwenden.

Sie sollten das dann sehen. Klicken Sie Hinzufügen, um eine neue Verbindung zu Adobe Photoshop hinzuzufügen.

Konfigurieren Sie Ihre Verbindung wie folgt:

Klicken Sie auf Fortfahren.

Um Ihre Client-ID und Ihr Client-Geheimnis zu finden, navigieren Sie zu https://developer.adobe.com/console/home und öffnen Sie Ihr Adobe I/O-Projekt mit dem Namen --aepUserLdap-- One Adobe tutorial. Wechseln Sie zu OAuth Server-zu-Server, um Ihre Client-ID und Ihr Client-Geheimnis zu finden. Kopieren Sie diese Werte und fügen Sie sie in die Verbindungseinrichtung in Workfront Fusion ein.

Nachdem Sie auf Weiter geklickt haben, wird ein Popup-Fenster angezeigt, während Ihre Anmeldeinformationen überprüft werden. Sobald Sie fertig sind, sollten Sie dies sehen.

Jetzt müssen Sie den Dateispeicherort der PSD-Datei eingeben, mit der Fusion arbeiten soll. Wählen für Speicher die Option Azure und geben Sie für Dateispeicherort {{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/{{1.AZURE_STORAGE_SAS_READ}} ein. Platzieren Sie den Cursor neben die zweite /. Sehen Sie sich dann die verfügbaren Variablen an und scrollen Sie nach unten, um die Variable psdTemplate zu finden. Klicken Sie auf die Variable psdTemplate, um sie auszuwählen.

Sie sollten das dann sehen.

Scrollen Sie ganz nach unten, bis Sie „Ebenen sehen. Klicken Sie Element hinzufügen.

Sie sollten das dann sehen. Jetzt müssen Sie den Namen der Ebene in Ihrer Photoshop PSD-Vorlage eingeben, die für den Hintergrund der Datei verwendet wird.

In der Datei citsignal-fiber.psd finden Sie die Ebene, die für den Hintergrund verwendet wird. In diesem Beispiel erhält diese Ebene den Namen 2048x2048-background.

Fügen Sie den Namen 2048x2048-background in das Dialogfeld "Workfront Fusion“ ein.

Scrollen Sie nach unten, bis Sie "". Jetzt müssen Sie definieren, was in die Hintergrundebene eingefügt werden soll. In diesem Fall müssen Sie die Ausgabe des Moduls Adobe Firefly auswählen, das das dynamisch generierte Bild enthält.

Wählen für die Option Extern aus. Für Dateispeicherort müssen Sie die Variable {{XX.details[].url}} aus der Ausgabe des Adobe Firefly-Moduls kopieren und einfügen, aber Sie müssen XX in der Variablen durch die Sequenznummer des Adobe Firefly-Moduls ersetzen, die in diesem Beispiel 5 lautet.

Scrollen Sie dann nach unten, bis Sie Bearbeiten sehen. Legen Sie Bearbeiten auf Ja und Typ auf Layer fest. Klicken Sie auf Hinzufügen.

Sie sollten das dann sehen. Als Nächstes müssen Sie die Ausgabe der Aktion definieren. Klicken Sie Element hinzufügen unter Ausgaben.

Wählen Sie Azure für Storage aus, fügen Sie diesen {{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/citisignal-fiber-replacedbg.psd{{1.AZURE_STORAGE_SAS_WRITE}} unter File Location ein und wählen Sie vnd.adobe.photoshop unter Type. Klicken, um Erweiterte Einstellungen anzeigen zu aktivieren.

Wählen unter „Erweiterte" die Option Ja, um Dateien mit demselben Namen zu überschreiben.
Klicken Sie auf Hinzufügen.

Sie sollten dann diese haben. Klicken Sie auf OK.

Klicken Sie auf Speichern, um Ihre Änderungen zu speichern, und klicken Sie dann auf Einmal ausführen, um Ihre Konfiguration zu testen.

Wechseln Sie zu Postman, überprüfen Sie die Eingabeaufforderung in Ihrer Anfrage und klicken Sie dann auf Senden.

Sie sollten das dann sehen. Klicken Sie auf den Kreis im Modul Adobe Photoshop - PSD-Bearbeitungen anwenden.

Sie können jetzt sehen, dass erfolgreich eine neue PSD-Datei generiert und in Ihrem Microsoft Azure-Speicherkonto gespeichert wurde.

1.2.4.3 Ändern der Textebenen einer PSD-Datei

Bewegen Sie als Nächstes den Mauszeiger über das Modul Adobe Photoshop - PSD Bearbeitungen anwenden und klicken Sie auf das Symbol + .

Adobe Photoshop.

Wählen Sie Textebenen bearbeiten.

Sie sollten das dann sehen. Wählen Sie zunächst die zuvor bereits konfigurierte Adobe Photoshop-Verbindung aus, die --aepUserLdap-- Adobe I/O benannt werden soll.

Wählen Sie für Eingabedatei die Option Azure für Eingabedateispeicherung und stellen Sie sicher, dass Sie die Ausgabe aus der vorherigen Anforderung Adobe Photoshop - PSD-Bearbeitungen anwenden auswählen, die Sie wie folgt definieren können: {{XX.data[].`_links`.renditions[].href}} (ersetzen Sie XX durch die Sequenznummer des vorherigen Moduls Adobe Photoshop - PSD-Bearbeitungen anwenden).

Klicken Sie anschließend auf +Element hinzufügen unter Ebenen, um mit dem Hinzufügen der Textebenen zu beginnen, die aktualisiert werden müssen.

Es sind zwei Änderungen vorzunehmen. Der CTA-Text und der Schaltflächentext in der Datei Citisignal-fiber.psd müssen aktualisiert werden.

Um die Ebenennamen zu finden, öffnen Sie die Datei "-fiber.psd. In der Datei werden Sie feststellen, dass die Ebene, die die call to action enthält, 2048x2048-cta heißt.

In der Datei citsignal-fiber.psd werden Sie auch feststellen, dass die Ebene, die die call to action enthält, 2048x2048-button-text heißt.

Zunächst müssen Sie die Änderungen konfigurieren, die an der Ebene (2048x2048 cta) vorgenommen müssen. Geben Sie den Namen 2048x2048-cta unter Name im Dialogfeld ein.

Scrollen Sie nach unten, bis Text > Inhalt angezeigt wird. Wählen Sie die Variable cta aus der Webhook-Payload aus. Klicken Sie auf Hinzufügen.

Sie sollten das dann sehen. Klicken Sie auf +Element hinzufügen unter Ebenen, um mit dem Hinzufügen der nächsten Textebene zu beginnen, die aktualisiert werden muss.

Geben Sie den Namen 2048x2048-button-text unter Name im Dialogfeld ein.

Scrollen Sie nach unten, bis Text > Inhalt angezeigt wird. Wählen Sie die Variable Schaltfläche aus der Webhook-Payload aus. Klicken Sie auf Hinzufügen.

Sie sollten das dann sehen.

Scrollen Sie nach unten, bis Sie Ausgabe sehen. Wählen Sie Speicher die Option Azure aus. Geben Sie Dateispeicherort den folgenden Speicherort ein. Beachten Sie, dass dem Dateinamen die Variable {{timestamp}} hinzugefügt wurde. Dadurch wird sichergestellt, dass jede generierte Datei einen eindeutigen Namen hat. Legen Sie außerdem Type auf ".adobe.photoshop fest.

{{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/citisignal-fiber-changed-text-{{timestamp}}.psd{{1.AZURE_STORAGE_SAS_WRITE}}

Legen Sie Type auf vnd.adobe.photoshop fest. Klicken Sie auf OK.

Klicken Sie Speichern, um Ihre Änderungen zu speichern.

Webhook-Antwort 1.2.4.4

Nachdem Sie diese Änderungen auf Ihre Photoshop-Datei angewendet haben, müssen Sie jetzt eine „Webhook Antwort“ konfigurieren die an die Anwendung zurückgesendet wird, die dieses Szenario aktiviert hat.

Bewegen Sie den Mauszeiger über das Modul Adobe Photoshop - Textebenen bearbeiten klicken Sie auf das Symbol + .

Suchen Sie nach webhooks und wählen Sie Webhook.

Wählen Sie Webhook-Antwort aus.

Sie sollten das dann sehen. Fügen Sie die folgende Payload in "".

{
    "newPsdTemplate": ""
}

Kopieren Sie die Variable {{XX.data[]._links.renditions[].href}} und fügen Sie sie ein. Ersetzen XX durch die Sequenznummer des letzten Adobe Photoshop --Moduls, in diesem Fall 7.

Aktivieren Sie das Kontrollkästchen für Erweiterte Einstellungen anzeigen und klicken Sie dann auf Element hinzufügen.

Geben Sie im Feld Schlüssel Content-Type ein. Geben Sie im Feld Wert application/json ein. Klicken Sie auf Hinzufügen.

Sie sollten dann diese haben. Klicken Sie auf OK.

Klicken Sie Automatisch ausrichten.

Sie sollten das dann sehen. Klicken Sie auf Speichern, um Ihre Änderungen zu speichern, und klicken Sie dann auf Einmal ausführen, um Ihr Szenario zu testen.

Gehen Sie zurück zu Postman und klicken Sie auf Senden. Die hier verwendete Eingabeaufforderung lautet Misty Meadows.

Anschließend wird das Szenario aktiviert und nach einiger Zeit wird in Postman eine Antwort angezeigt, die die URL der neu erstellten PSD-Datei enthält.

Zur Erinnerung: Sobald das Szenario in Workfront Fusion ausgeführt wurde, können Sie Informationen zu den einzelnen Modulen anzeigen, indem Sie auf die Sprechblase über jedem Modul klicken.

Mit Azure Storage Explorer können Sie dann die neu erstellte PSD-Datei suchen und öffnen, indem Sie in Azure Storage Explorer darauf doppelklicken.

Ihre Datei sollte dann wie folgt aussehen, mit dem Hintergrund, der durch einen Hintergrund mit "Wiesen“ ersetzt.

Wenn Sie Ihr Szenario erneut ausführen und dann eine neue Anfrage aus Postman mit einer anderen Eingabeaufforderung senden, werden Sie sehen, wie einfach und wiederverwendbar Ihr Szenario geworden ist. In diesem Beispiel ist die neue Eingabeaufforderung (Sunny ).

Und ein paar Minuten später wurde eine neue PSD-Datei mit neuem Hintergrund erstellt.

Nächste Schritte

Navigieren Sie zu 1.2.3 Frame.io und Workfront Fusion

Zurück zur Creative-Workflow-Automatisierung mit Workfront Fusion

Zurück zu Alle Module