ALPHA Offen zum Testen

Das Werbemittel zu bauen ist der kleine Teil der Arbeit.

Eine Anwendung statt der Kette Animate → After Effects → Ordner. Sie animieren darin, verwalten Assets, behalten das Gewicht im Blick, liefern HTML5, Statics und Video aus und wickeln die Kundenfreigabe aus derselben Datei ab. Sie liest und schreibt die Formate, die Sie bereits nutzen, sodass nichts, was Sie gemacht haben, unerreichbar wird. Jedes Panel ist pixelgenau und jedes Icon von Hand gezeichnet.

Editor ansehen
ADIMATE-Editor: Artboards-Panel, Timeline, Bibliothek und Texteigenschaften
Production_Plan.adi · Artboards, Timeline, Bibliothek, an das Copy Deck gebundene Texteigenschaften
20%
eigentliche Produktion
beschleunigt
50%
Kundenkorrekturen
entfällt
30%
Dateien verschieben, Versionen abgleichen
entfällt
01 / Das Problem

Eine Animation. Dreimal gebaut, in drei Programmen.

HTML5

animiert in Animate, einem Tool, das sich seit Jahren nicht weiterentwickelt, 27-mal veröffentlicht

VIDEO

dieselbe Bewegung in After Effects von Hand nachgebaut, sodass sie nie ganz zum Banner passt

STATICS

der Endframe in Photoshop nachgebaut, 34-mal, einmal pro Größe

Drei Animations-Engines für eine Idee. Jede Änderung ist drei Jobs, und die drei Ergebnisse driften auseinander. ADIMATE baut es einmal und exportiert alle drei aus derselben Datei. Wie Texte und Assets in der ganzen Kampagne synchron bleiben, ist Aufgabe von A.D.I..

02 / Editor

Eine echte Timeline, nach der Konvention, die Sie schon kennen.

Keyframes, Tweens, Easing-Kurven, Keys ziehen, Bereichsauswahl, Führungsebenen. Wenn Sie von Animate kommen, müssen Sie hier nichts neu lernen.

Production_Plan.adi · 1 : 1 Ziehen zum Umsehen
ADIMATE-Editor in Originalgröße: Timeline, Artboards, Bibliothek und Eigenschaften

Animations-Presets

Fade, Slide, Pop, Spin mit einem Klick, oder Ihre eigene Kurve.

Movieclips

Verschachtelte Symbole mit eigener Timeline.

Neun-Punkt-Anker

Der Registrierungspunkt, wo Sie ihn erwarten, jedes Mal.

Ausrichten und verteilen

Raster, Hilfslinien, Einrasten.

Ebenentypen

Text, Formen, Bilder und Video als vollwertige Ebenen.

Easing-Editor

Kurven, die Sie ziehen, wiederverwenden und benennen können.

02b / Handwerk

Pixelgenau. Jedes Icon von Hand gezeichnet.

Ein Tool, auf das man acht Stunden am Tag schaut, muss ruhig sein. Die Oberfläche von ADIMATE basiert auf einem 28-px-Raster aus einem Styleguide: fünf Farbfamilien, zwei Schriftstile, ein Blau. Die 330 Icons stammen nicht aus einer Bibliothek; jedes wurde für seine 16-px-Box gezeichnet, mit deaktiviertem, aktiviertem und aktivem Zustand, damit sich eine Toolbar auf einen Blick lesen lässt und zwischen den Panels nichts wackelt.

Live-Panels aus dem Styleguide von ADIMATE. Hovern und klicken: Das sind die echten Komponenten, keine Bilder davon.

Werkzeuge

Auswählen, transformieren, Text, Formen, Füllung, Pipette. Das Panel reagiert selbst auf den Zeiger: eine Spalte, zwei Zustände pro Werkzeug, keine Beschriftungen zum Lesen.

Text und Eigenschaften

Die Textquelle ist ein Deck, kein String: Kunde, Frame, Sprache. Die Eigenschaften folgen der Reihe Position, Transformation, Deckkraft, Inhalt, Layout, jeder Abschnitt einklappbar. Gleiche Abstände, gleiches Eingabefeld, gleiches Blau.

Artboards und Bibliothek

Der Produktionsplan als Liste: jede Größe, jede Sprache, ihr Status. Die Bibliothek enthält die Assets mit ihrem Gewicht, einen integrierten Kompressor und eine Suche, die im ganzen Plan ersetzt.

03 / Artboards und Resizes

Viele Artboards in einem Projekt. Der Typ bestimmt, was exportiert wird.

Jedes Artboard ist HTML5, Video oder Static. Inhalte skalieren mit dem Board, Responsive-Modus inklusive. Den Master bauen, in den Rest des Plans duplizieren.

97
Assets in der Kampagne
17
einzigartige Layouts

Die anderen 80 sind Größen und Sprachen von etwas, das Sie schon gemacht haben.

300×250HTML5
728×90HTML5
160×600HTML5
1080×1080MP4
04 / Bibliothek und Gewicht

Keine Dateiliste. Asset-Management.

Ordner, Sortierung, Spalten, Suchen und Ersetzen. Wählen Sie eine Ebene, und die Bibliothek hebt die Datei hervor, aus der sie stammt.

Integrierte PNG- und JPG-Kompression
Kein externer Dienst, kein API-Schlüssel. Palettenreduktion, denn Banner-Artwork hat ein paar hundert Farben, nicht Millionen. Im Batch und auf die ganze Bibliothek auf einmal angewendet.
Video-Handling
Container wechseln, auf eine Zielgröße in MB transkodieren, Vorschau mit Audio-Wellenform.
Gewicht · liveLimit 150 KB
138.4KB→ 104,7 KB nach Kompression
Code
35.9 KB
png
57.2 KB
jpg
34.8 KB
Spielraum
11.6 KB
05 / Es kennt die Specs

Die Regeln stecken im Tool, nicht in einem PDF, das jemand vergessen hat zu lesen.

Google / DCM AdForm Lokale Netzwerke

clickTag

So geschrieben, wie jedes Netzwerk es erwartet, pro Artboard.

150 KB

Während der Arbeit durchgesetzt, nicht erst bei der Auslieferung entdeckt.

Backup-Static

Aus dem letzten Frame generiert, kein separater Exportschritt.

Schriften

Eingebettet, oder Text in Pfade umgewandelt, damit die Typografie auch auf einem Rechner ohne Ihre Schrift erhalten bleibt.

06 / Rein und raus, in beide Richtungen

Es arbeitet mit dem, was Sie schon haben.

Rein
.fla
auch beschädigte Dateien, die Animate nicht öffnen will
.psd
Artboards, editierbare Textebenen, Transparenz
After Effects
über Lottie oder das ADIMATE-Skript
Figma
über das Plugin
.adi
Raus
HTML5
nach Netzwerk-Spec, gezippt, clickTag verdrahtet
PNG / JPG
Statics und Backups aus jedem Frame
MP4
aus dem Banner selbst gerendert
.fla
als HTML5-Canvas-Dokument
After Effects
ein Projekt, das After Effects selbst gebaut hat

Nicht „ersetzt Animate“. Liest Ihre Dateien, gibt sie zurück.

.adi
Ein neues Dateiformat

ADIMATE speichert .adi. A.D.I. liest es als Template.

Eine Datei enthält die ganze Produktion: jedes Artboard und jede Größe, die Timeline, die Bibliothek, die an das Copy Deck gebundenen Textebenen, die Sprachen. Öffnen Sie sie in ADIMATE und animieren Sie weiter. Ziehen Sie sie in A.D.I., und sie wird zum Template: A.D.I. speist sie mit Deck, Marke und Assets, und jede Größe und Sprache kommt aus derselben Datei, geprüft und bereit für die Preview.

Die .adi-Datei wird zusammen mit ihren Assets in A.D.I. gehostet. Eine Textänderung, ein neues Packshot oder ein frischer Export passiert auf dem Server, aus dem Browser, sodass niemand im Team ADIMATE installiert haben muss, damit die Kampagne weiterläuft. Wer die Datei gebaut hat, ist nicht mehr der Einzige, der sie ändern kann.

ArtboardsTimelineBibliothekText an das Deck gebundenSprachenTemplate für A.D.I.mit seinen Assets gehostetbearbeiten und exportieren ohne ADIMATE
07 / Video

Film und Banner können nicht auseinanderdriften.

MP4 wird Frame für Frame aus demselben HTML gerendert wie das Banner. Es gibt keine zweite Animations-Engine, die synchron gehalten werden muss, weil es keine zweite Engine gibt. Video als Hintergrundebene unter dem Text, Zielgröße in MB festgelegt.

08 / Deck, eine Quelle für alle Texte

Der PM tippt. Die Banner ändern sich, während er tippt.

Texte werden einmal aus Excel eingefügt. ADIMATE, After Effects und Figma lesen über ihre Plugins alle dasselbe Deck. Im Video ist der Text in die Pixel eingebrannt, also sagt es das auch, statt still zu lügen.

Deck · Zeile 14
Headline
Gratisversand bis Sonntag
CTA
Jetzt shoppen
300×250 · 41 KBGratisversand bis Sonntaglive
160×600 · 38 KBGratisversand bis Sonntaglive
MP4 · 3,4 MBGratisversand diese WocheText geändert, noch nicht neu gebaut
campaign_plan_q4.xls → 97 Zeilen62 fertig · 35 offen
GRÖSSE
FORMAT
SERVER
LIMIT · DEADLINE
BACKUP
300×250
HTML5
DCM
150 KB · 02.09
ja
728×90
HTML5
AdForm
150 KB · 02.09
ja
1080×1080
MP4
Meta
4 MB · 05.09
nein
09 / Der Plan legt das Projekt an

XLS hineinziehen, und das Projekt weiß bereits, was entstehen muss.

Die .adi-Datei lebt mit diesem Plan und sagt Ihnen, wie viele Formate noch fehlen. Wählen Sie, wo die Kampagne liegt, auf der Festplatte, in ADI LINK, in Adpiler oder in Ihrem eigenen System, und das Artboards-Panel gleicht Ihre Boards damit ab: was noch gemacht werden muss, was wartet, was mit Feedback zurückkam.

10 / Ein Artboard, viele Sprachen

Sprache ist eine Dimension des Artboards, keine Kopie davon.

Zwanzig Dateien, die langsam auseinanderdriften, sind keine Lokalisierung. Fügen Sie so viele Sprachen hinzu, wie die Kampagne braucht, korrigieren Sie das Layout einmal, und jede Sprache hat es. Überschreiben Sie nur dort, wo eine Sprache wirklich ein anderes Layout braucht.

∞
Sprachen, so viele der Plan braucht
1
Artboard
EN DE IT PL ES + hinzufügen
HERBSTKOLLEKTION
Jedes Layout, jede Größe, eine Datei
Zur Kollektion
master_480x300.adiBasislayout
11b / Kommentare und Status

Das „Nein“ des Kunden landet in Ihrer Artboard-Liste, mit Begründung.

Status und Kommentare werden mit A.D.I. und ADI LINK geteilt, und die Agentur definiert ihr eigenes Set. Wenn ein Kunde eine Datei in der Preview ablehnt, sieht der Producer sie in derselben Sekunde im Artboards-Panel als abgelehnt, mit dem Kommentar an diesem Board. Korrigieren, aus der Zeile hochladen, Status geht weiter. Kein zweites Fenster, keine E-Mail, die man suchen muss.

zu erstellenfertigin Prüfungin Korrekturfreigegebenabgelehnt+ eigene
ADI LINK · Kundenansicht
[CAMPAIGN]_728x90_DE
ABGELEHNT
Kunde · 14:02
Datum ist falsch, sollte 30.06. sein.
ADIMATE · Artboards-Panel
728x90_DE
ABGELEHNT
Kunde · 14:02 · gleiche Sekunde
Datum ist falsch, sollte 30.06. sein.
12 / Roadmap
NOCH NICHT GEBAUT

Wohin es geht.

01

Templates

Animations-Templates und Deck-Templates.

02

Render-Maschine

Eine Deck-Änderung baut die Dateien neu, ohne dass ein Producer an der Tastatur sitzt.

03

Kunden-Edition

Template wählen, Text und Foto einfügen, herunterladen, ohne das Template zu verlassen.

Copy Check und Brand Check für eine ganze Auslieferung gibt es bereits. Sie leben in A.D.I. und, für Statics, in Vadilator.