🛰️ ❓ 🧑🏿‍🤝‍🧑🏾 Ein Monat mit Animate CC 💓 📇 ↔️

Eine Beschreibung meiner Erfahrungen beim Wechsel von Flash zu Animate CC und beim Erstellen von Bannern im allmächtigen HTML5-Format. Viele Bilder unter dem Schnitt

Ein bisschen historischer Ausflug und Begriffe

Persönlich bin ich selbst seit mehr als 10 Jahren mit Flash vertraut und habe eine kleine Vorstellung davon, wie diese Technologie „von innen“ funktioniert.

Seit ungefähr der gleichen Anzahl von Jahren erstelle ich Websites, auch in der "modernen" HTML5-Sprache, die, wie sie sagen, alles kann. Nein, wirklich, manchmal haben hartnäckige Designer solche Schnittstellen gesendet, die es in der Natur nicht gab. Sie mussten erfunden werden und sich hinter dem Satz "Sie können alles in HTML5 schreiben!" Verstecken.

Ich gebe nicht vor, den besonderen künstlerischen Wert meiner Kreationen zu haben, aber die Anzahl der Banner, die ich gezeichnet habe, hat tausend überschritten, und ich zeichne sie fast jeden Tag weiter.

In den letzten 5 Jahren hat Flash nicht nur die Faulen getreten und das Problem nicht wirklich verstanden. Persönlich habe ich noch nie Bremsen oder Löcher gesehen und sogar über die allererste Aussage von Steve Jobs, dass "Flash nicht mit dem Finger geschärft wird" - das ist völlig lächerlich. Der offensichtlichste Grund, warum Apple Flash auf iPhones ablehnt, liegt an der Oberfläche, aber darum geht es jetzt nicht.

Wir nähern uns der Auflösung der Terminologie. HTML ist eine Auszeichnungssprache für Text und das Layout von Elementen auf einer Seite. Er weiß nicht, wie er selbst Handlungen ausführen soll. Anstelle von Flash bedeuten sie normalerweise „HTML5-Innovationen“: Abspielen von Videos ohne Flash, Animationen ohne Flash, Mehrfachladen von Dateien ohne Flash und einige andere Dinge.

Trotz des überall klingenden Lobes ist bisher kein vernünftiger Animationseditor auf dem "allmächtigen" HTML5 erschienen, während Adobe Flash CC nicht in Animate CC konvertiert und tatsächlich nur in HTML5 exportiert hat.

Schnittstelle

Die Animate CC-Oberfläche selbst unterscheidet sich nicht von Flash, im Gegensatz zu Edge Animate, das äußerst ungewöhnlich war. Es gibt nicht viel mehr zu sagen, und ich habe den Unterschied zu CS6, das ich lange verwendet habe, nicht bemerkt. Für Banner wird AS3 nicht benötigt, und dies war die neueste Version, die AS2 unterstützt. Der von Google hergestellte Swiffy-Konverter war nur mit AS2 befreundet.

* AS2,3 ist die in Flash integrierte Action Script-Programmiersprache, mit der Sie die gesamte Nicht-Animationskomponente des Films erstellen können. Dadurch werden die Schaltflächen gedrückt, der Film wird in den richtigen Frames angehalten, damit Informationen gelesen und interaktive Skripte für die Interaktion mit dem Film gestartet werden können. Tatsächlich ist dies eine ziemlich mächtige Sprache, und ich verwende nur 0,000001% ihrer Funktionalität.

Motor rendern

Natürlich können sich die Objekte selbst nicht in der Walze bewegen. Dazu muss sich ein Motor bewegen, ein- und ausblenden. Animate CC verwendet CreateJS für Projekte im HTML5-Canvas-Stil, das jedes neue Projekt mit einer wunderbaren Warnung begrüßt. Es ist schön, gewarnt zu werden. Anscheinend ist dies eine unrealistische Aufgabe - eine nach der anderen aus dem Rahmen zu nehmen, zu dem Sie gehen möchten.

:
EaselJS 0, 1. , gotoAndStop gotoAndPlay.

Zeitleiste und Arbeitsbereich

Weil Die Benutzeroberfläche hat für mich keine Änderungen erfahren. Hier ist alles absolut Standard. Es gibt keinen Unterschied. Da das System auf Russisch konfiguriert ist, wurde die russische Version des Pakets heruntergeladen. Das stört mich nicht sehr, weil ich Hotkeys benutze, obwohl ich manchmal an dem festhalte, was ich aus dem Menü auswählen muss.

Kommen wir nun zu dem, was ich ständig benutze:

Standardfilter in Flash

Filter sind eine der häufigsten Komponenten von Bannern. Sie ermöglichen es Ihnen, schnell das gewünschte Ergebnis zu erzielen. Ich werde 3 Filter betrachten, die ich früher sehr oft verwendet habe. In Flash gehören Filter zum Standard, und in meiner Arbeit hatten sie keinen Einfluss auf die Leistung und konnten dies im Prinzip nicht. Im Folgenden werde ich den Export nach GIF verwenden, um den Unterschied zu verstehen

Schatten

Schatten ist eine der einfachsten Optionen, um Teile des Banners zu vergrößern und sich auf die richtigen Blöcke zu konzentrieren. Natürlich habe ich einen zu starken Schatten genommen, um den Unterschied zu veranschaulichen.
Vergleiche:

Flash	Createjs

Ja, eine Schattenanimation ist nicht möglich. Wenn das Video länger ist als das, was ich für den Test eingereicht habe, wird der Schatten zu einer unbekannten Sache.
Erwähnenswert ist hier auch, dass im Editor und im fertigen HTML5 die Schatten (und tatsächlich alle Effekte) sehr unterschiedlich aussehen.

Der Herausgeber	Ergebnis

Beim Exportieren in eine Spur sehen Sie die folgende Inschrift:
, , . (4)
Nun, danke zumindest für die Warnung ... Die

Leistung des Banners mit Schatten lässt zu wünschen übrig, aber sie warnten. Ich löschte die Schatten von diesen Substraten und reduzierte die Last auf 40%. Flash hat das alles natürlich mit 23% der Last zusammen mit den Schatten gemalt

Glühen

Eine der einfachsten Möglichkeiten, Text auf einem bunten Hintergrund hervorzuheben, besteht darin, ihm einen Strich hinzuzufügen. Dies geschieht einfach mit einem Glühen mit einem hohen Prozentsatz an Intensität.

Flash	Createjs

Gleichzeitig ist der Editor immer noch derselbe: "Sichtbarkeit ist Null, ich gehe auf Geräten":

Es gibt eine mögliche Lösung für dieses Problem. Falls erforderlich, werde ich sie teilen. Briefsubstrate werden sehr oft verwendet und es ist einfach nicht möglich, ohne sie zu leben.

Darüber hinaus ist das Leuchten nicht nur ein Buchstabenstrich, sondern das Ergebnis deutet darauf hin, dass dies nicht der Fall sein wird

Flash	Createjs	Im Editor

Unschärfe

Keine Kommentare. Unschärfe ist nur für statische Objekte verfügbar, daher ist es unmöglich, diesen Filter für das Erscheinungsbild von Texten zu verwenden.

Flash	Createjs

Wie die oben genannten Störungen bei der weit verbreiteten Durchdringung derselben SVG-Filter und Filter in CSS auftreten können - kann ich mir nicht vorstellen.

Export- und Verpackungsprobleme

Jeder ist daran gewöhnt, dass der Clip im Flash eine in sich geschlossene Datei ist. Der HTML5-Export generiert eine Reihe von Dateien anstelle einer. Das Swiffy-Projekt, das von Google zur Konvertierung von SWF in HTML entwickelt wurde, hat alles in eine HTML-Datei gepackt. Anscheinend war diese Aufgabe eine überwältigende Belastung für die Entwickler von Animate CC. Hier können Sie einen ausführlichen Artikel über das Einfügen von „allem“ in eine einzelne Datei für Doubleclick lesen . Ich habe meinen Konverter im laufenden Betrieb hergestellt und die Konstruktion eines Funktionspaars in PHP blockiert, aber es ist alles andere als ideal, selbst ein Entwurf. Löst meine Aufgaben - und okay.

Gummibanner

Standardmäßig scheint Animate die „Gummiigkeit“ von Bannern zu unterstützen, aber normalerweise bedeuten Gummibanner solche, die sich horizontal und nicht proportional entlang beider Achsen erstrecken. Dies wird in der Exportvorlage als reaktionsschnelle Skalierung bezeichnet. Bei Bannern, die sich nur entlang der X-Achse erstrecken, führte dies zu lustigen Störungen, bis ich sie aus der Vorlage herausschnitt

Im Allgemeinen können Sie die Idee des Streckens des Banners vollständig aufgeben, indem Sie einfach die maximale Größe des Bannerplatzes nehmen und die Breite des Clips gleich der minimalen Größe des Bannerplatzes und des Zuschneideteils mithilfe von Überlauf angeben: ausgeblendet, dann das CANVAS-Element zentrieren (wobei seine Breite der maximalen Größe des Bannerplatzes entspricht) Die horizontale Linie innerhalb des Links, die 100% der Breite einnimmt, ist hier sogar etwas einfacher als in FLASH und erfordert keine zusätzlichen Skripte innerhalb des Videos, sondern nur CSS.

Insgesamt

Sie können leben, Sie können verwenden, Sie können die Bremsen nicht ertragen. Für meinen Hauptkunden wurde durch die Vergabe von Unteraufträgen eine Einschränkung eingeführt - nicht mehr als 5 Szenen pro Banner, da sonst auf einer großen Nachrichtenseite mit einer Reihe von Bannerpunkten alles langsam langsamer wird. Flash wurde sehr lange und extrem schnell von einer Grafikkarte jeglicher Art gezeichnet, und der Heilige Gral in Form magischer Abkürzungen HTML5 und CSS3 wurde bisher in Bezug auf Animation und interaktive Elemente aus Pappmaché hergestellt. Einschließlich auf Mobilgeräten, für die Flash angeblich begraben ist, wirft die Leistung solcher Videos ernsthafte Zweifel auf. Kein einziger Standard wird zerrissen, bis der Blitz endgültig vergraben ist.

Ein Monat mit Animate CC