Lektionen zum Arbeiten in Adobe Edge Animate CC. Danil Fimuschkin. Lektionen zum Erstellen von Animationen in Adobe Edge

Für Menschen, die sich ständig verbessern, etwas lernen und ständig etwas Neues lernen möchten, haben wir diese Kategorie speziell erstellt. Es enthält ausschließlich lehrreiche, nützliche Inhalte, die Ihnen sicherlich gefallen werden. Eine große Anzahl an Videos kann vielleicht sogar mit der Ausbildung, die wir in der Schule, am College oder an der Universität erhalten, mithalten. Das Wichtigste an Schulungsvideos ist, dass sie versuchen, die neuesten und relevantesten Informationen zu vermitteln. Die Welt um uns herum verändert sich im Zeitalter der Technologie ständig und gedruckte Bildungspublikationen haben einfach keine Zeit, die neuesten Informationen bereitzustellen.

Unter den Videos finden Sie auch Lehrvideos für Kinder im Vorschulalter. Dort werden Ihrem Kind Buchstaben, Zahlen, Zählen, Lesen usw. beigebracht. Stimmen Sie zu, es ist eine sehr gute Alternative zu Cartoons. Für Grundschüler gibt es auch Englischkurse und Hilfe beim Erlernen von Schulfächern. Für ältere Schüler wurden Lehrvideos erstellt, die Ihnen bei der Vorbereitung auf Prüfungen und Prüfungen oder einfach bei der Vertiefung Ihres Wissens in einem bestimmten Fach helfen. Das erworbene Wissen kann sich qualitativ auf Ihr geistiges Potenzial auswirken und Sie mit hervorragenden Noten erfreuen.

Für junge Menschen, die bereits einen Schulabschluss haben, studieren oder nicht studieren, gibt es viele spannende Lehrvideos. Sie können ihnen helfen, ihr Wissen über den Beruf, den sie studieren, zu vertiefen. Oder erlernen Sie einen Beruf, z. B. als Programmierer, Webdesigner, SEO-Optimierer usw. Dieser Beruf wird noch nicht an Universitäten gelehrt, sodass Sie nur durch Selbstbildung zum Spezialisten in diesem fortgeschrittenen und relevanten Bereich werden können. Wir versuchen dabei zu helfen, indem wir die nützlichsten Videos sammeln.

Auch für Erwachsene ist dieses Thema relevant, da es oft vorkommt, dass man nach jahrelanger Tätigkeit in einem Beruf zu der Einsicht kommt, dass das nicht das Richtige für ihn ist und man etwas lernen möchte, das für sich selbst besser geeignet und gleichzeitig gewinnbringender ist. Auch in dieser Kategorie von Menschen gibt es häufig Videos über die Art der Selbstverbesserung, Zeit- und Geldersparnis, Optimierung ihres Lebens, in denen sie Wege finden, ein viel besseres und glücklicheres Leben zu führen. Auch für Erwachsene ist das Thema Gründung und Entwicklung eines eigenen Unternehmens sehr gut geeignet.

Unter den Lehrvideos gibt es auch Videos mit allgemeinem Schwerpunkt, die für fast jedes Alter geeignet sind. In ihnen erfahren Sie, wie das Leben begann, welche Evolutionstheorien es gibt, Fakten aus der Geschichte usw. Sie erweitern den Horizont eines Menschen perfekt und machen ihn zu einem viel gebildeteren und angenehmeren intellektuellen Gesprächspartner. Solche Lehrvideos sind in der Tat ausnahmslos für jedermann nützlich, denn Wissen ist Macht. Wir wünschen Ihnen eine angenehme und nützliche Besichtigung!

Heutzutage ist es einfach notwendig, das zu sein, was man „auf der Welle“ nennt. Damit sind nicht nur Nachrichten gemeint, sondern auch die Entwicklung des eigenen Geistes. Wenn Sie sich weiterentwickeln, die Welt erkunden, in der Gesellschaft gefragt und interessant sein möchten, dann ist dieser Abschnitt genau das Richtige für Sie.

UPD 6. Dezember 2015:
Der Produktmanager für Flash Runtime und Adobe AIR sagte, dass sie habe keine Pläne die Arbeit an Flash Runtime und AIR einzustellen und Umbenennen eines Produkts zur Inhaltserstellung auf keinen Fall hat nichts mit dem Schicksal des Flash Players zu tun und damit verbundenes Ökosystem.

Alles wäre in Ordnung, bis auf eine Nuance, die die Bedeutung stark verändert – technischer Analphabetismus und allgemeines Kopieren und Einfügen. Veröffentlichungen drucken sich gegenseitig nach und fügen immer mehr „Fakten“ hinzu, die nicht im Original enthalten sind. Mit einem Wort: ein beschädigtes Telefon.

Der Originalartikel http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html berichtet, dass Adobe Flash Professional in Animate CC umbenennt. Darüber hinaus berichten sie, dass Kunden mehr unterstützte Plattformen usw. wünschen.

Und es überraschte mich nicht, dass viele Leute den Unterschied zwischen Flash und Flash Professional nicht erkennen. Auf Nachrichtenseiten tauchten verschiedene Gags auf, in denen andere Quellen zitiert wurden, die weiter unten in der Kette verlinkt waren. Und nicht immer das Original.

Heutzutage wird das Wort Flash als Plugin für Browser wahrgenommen. Technisch gesehen ist es Flash Player. Es gibt jedoch ein Tool zur Inhaltserstellung – Flash Professional. Wenn Microsoft Word in TextMachine umbenennen würde, würden die Leute dann rufen: „Microsoft hat die Entwicklung von Word eingestellt?“ Auch wenn schwarz auf weiß geschrieben steht, dass die Erstellung von Inhalten unterstützt wird und Daten bearbeitet werden können?

Anhand meiner eigenen Beispiele kann ich ein anschauliches Bild vermitteln. Lokale Kunden fragen mich, womit wir Animationen für eine Präsentation für iOS erstellen werden. Ich bin stolz, das in Flash Professional sagen zu können. Und der Kunde ist in einer Benommenheit. Nach einem Moment sagt er:

„Aber auf dem Hub steht, dass der Flash tot ist und auf dem Tablet nicht funktioniert.“

Und dann falle ich in eine Benommenheit. Der technische Analphabetismus von Kunden und Autoren von Artikeln über Flash führt dazu, dass Menschen vom gewünschten Ergebnis abweichen. Glücklicherweise ließ sich der Kunde überzeugen und war mit dem Ergebnis zufrieden.

Kehren wir zum Originalartikel zurück. Sie berichten, dass HTML5 ausgereift ist und bereits die meisten Funktionen von Flash unterstützt. Wenn wir nach unten gehen, sehen wir, dass Adobe selbst Flash als ein wichtiges Mittel zur Bereitstellung von Premium-Inhalten ansieht – Webspiele und Premium-Videos. Aber kein Wort darüber, dass sie die Unterstützung für Flash eingestellt haben.

Darüber hinaus... Sie geben deutlich an, dass sie mit Microsoft und Google zusammenarbeiten, um die Kompatibilität und Sicherheit von Flash Player zu verbessern. Und sie haben nicht vergessen hinzuzufügen, dass sie eng mit Facebook zusammenarbeiten, um die Zuverlässigkeit und Sicherheit von Spielen im Flash Player zu verbessern. Wo gibt es also Hinweise darauf, dass sie Flash aufgeben?

Wenn wir über die Entwicklung von Flash im Allgemeinen sprechen, ja, sie hat schon vor langer Zeit aufgehört. Es werden nur geringfügige (aber wesentliche) Verbesserungen vorgenommen und Sicherheitslücken behoben. Aber ist es wirklich so schlimm? Aus meiner Sicht hat Flash alles, was es braucht. Natürlich hätte ich gerne mehr. Aber warum?

Für mehr sollten Sie sich für das Standalone-Spielformat entscheiden. Und es gibt Adobe AIR (wenn wir Flash berücksichtigen). Die Unterstützung von Adobe AIR ist nicht veraltet. Ich habe Informationen über Pläne für 2016. Aber wird Browser-Flash sterben? Sicherlich. Aber definitiv nicht morgen.

Und für diejenigen, die gerne in Klischees sagen, dass Flash den Akku entlädt, zeigen Sie mir, wie Canvas ihn auflädt.

Es ist auch erwähnenswert, dass das Adobe Edge Animate-Projekt nicht mehr aktiv weiterentwickelt wird. Aber weil Ich stehe kurz vor der Entwicklung von Flash Professional – ich versichere Ihnen, dass Edge Animate überhaupt nicht weiterentwickelt wird (außer bei kritischen Fehlern). Diese Entscheidung fiel zugunsten von Adobe Flash Professional (zukünftig Animate CC).

Adobe Edge Animate – Lektionen zum Erstellen von Animationen für eine Website

Animationen für eine Website sind seit langem eine gute und effektive Möglichkeit, die notwendigen Informationen darzustellen. Stimmen Sie zu, es ist viel angenehmer, eine schöne, bewegte Komposition zu betrachten, als ein statisches, bewegungsloses Bild wahrzunehmen. Und die Klickrate ist höher, und für das Design kann es ein gutes Plus sein, und die Preise für solche Arbeiten können völlig unterschiedlich sein. Die Vorteile der Animation liegen also auf der Hand. Jetzt müssen Sie nur noch lernen, wie man diese Animation macht.

Zuvor war das Wort Animation stark mit dem Konzept von Flash verbunden. Ein gutes Format, das viele Möglichkeiten bietet, sehr praktisch und einfach zu verwenden ist. Aber es ist einfach so, dass sich diese Technologie für moderne Geräte nicht durchgesetzt hat. Ja, viele Browser unterstützen es, aber Apple-Geräte haben nicht die nötige Software an Bord, um Flash anzuzeigen. Nun, die Jungs haben ihre Einflusssphären nicht aufgeteilt. Wenn ja, müssen Webmaster andere Methoden zum Erstellen von Animationen erlernen. Das Konzept der Anpassungsfähigkeit ist heute eine Grundvoraussetzung.

Daher ist eine neue Auszeichnungssprache namens HTML5 entstanden, die Entwicklern nahezu unbegrenzte Möglichkeiten für Kreativität bieten kann. Viele beherrschen es bereits, aber für eine vollständige und effektive Arbeit benötigen Sie wie immer ein Programm, das alle diese Funktionen in einem praktischen Format umsetzt. Das ist ein Programm.

Die Möglichkeiten von Adobe Edge sind recht umfangreich. Hier können Sie ein Banner mit beliebigen Animationseffekten erstellen. Sie können einen schönen Bildschirmschoner für die Hauptseite, Schaltflächen, Menüs, für eine Vielzahl von Kinder- und Spielressourcen erstellen – das Feld für Kreativität ist am weitesten. Ob Sie es wollen oder nicht, es ist also ratsam, das Programm zu beherrschen. Darüber hinaus ist die Benutzeroberfläche recht einfach und verständlich und es gibt keine besonderen Schwierigkeiten, sie zu beherrschen. Es würde einen Wunsch geben.

Wer nicht bereit ist, sofort eine ordentliche Summe für das Adobe Edge-Programm auszugeben, kann es mit der Testversion des Programms versuchen, die natürlich auf der Adobe-Website heruntergeladen werden kann. Während des Testzeitraums können Sie entscheiden, ob dieses Programm das Richtige für Sie ist. Wer noch nicht über ausreichende Mittel verfügt, kann problemlos eine gemeinsame Version dieses Programms finden. Unsere Handwerker arbeiten schnell und Sie können immer die neueste Version auf denselben Torrents finden. Jeder bestimmt selbst, was zu tun ist.

Das Beherrschen von Adobe Edge ist im Prinzip ein recht einfacher Vorgang. Jeder, der mit Adobe Flash gearbeitet hat, kann es leicht herausfinden. Aber auf jeden Fall werden einfache und klare Lektionen für die Arbeit mit diesem Programm nicht schaden. Nach ein wenig Suche habe ich mehrere Video-Lektionen gefunden, die es jedem ermöglichen, dieses Programm in kürzester Zeit zu meistern. Ich habe selbst eine Auswahl getroffen, aber wenn sie für irgendjemanden nützlich ist, freue ich mich wie immer sehr.

Lektionen zum Erstellen von Animationen in Adobe Edge

In diesem Tutorial erfahren Sie, wie Sie in Adobe Edge Animate ein neues Projekt erstellen und auf Ihrem Computer speichern. Welche Dateien generiert das Programm beim Erstellen eines neuen Projekts?

In diesem Tutorial machen Sie sich mit dem Edge Animate-Arbeitsbereich vertraut und machen sich mit allen erforderlichen Bedienfeldern und Schaltflächen der Benutzeroberfläche vertraut.

Sehen Sie sich ein Video zu Adobe Edge Animate an

Teil eins eines Tutorials zum Erstellen Ihrer ersten Animation in Adobe Edge Animate. Der Autor der Lektion, Valery Medvedev, zeigt einfach, klar und ausführlich alle notwendigen Aktionen und die Bedeutung der Bedienfeldtasten.

Sehen Sie sich ein Video zu Adobe Edge Animate an

In diesem Tutorial werden wir die Erstellung unserer ersten Animation in Adobe Edge Animate abschließen. Das Ergebnis ist ein einfacher Clip, der es dennoch ermöglicht, sich mit den ersten notwendigen Techniken beim Erstellen von Animationen vertraut zu machen.

Sehen Sie sich ein Video zu Adobe Edge Animate an

In diesem Video erfahren Sie, wie Sie in Edge Animate erstellte Animationen in einem Webbrowser anzeigen. Ein paar Informationen zu HTML5.

Sehen Sie sich ein Video zu Adobe Edge Animate an

Ein interessantes Beispiel für eine Animation, wenn eine Rakete bei einem bestimmten Zählerwert abhebt.

Bereiter Code für den Trigger:

timerCount = 5; sym.$("counter_txt").html(timerCount); tCounter = setInterval(timer, 1000); Funktion timer() ( timerCount -= 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }

timerCount = 5 ;

tCounter = setInterval(timer, 1000);

Funktion timer()

timerCount -= 1 ;

if (timerCount< 1 )

sym. spielen("start");

clearInterval(tCounter);

zurückkehren ;

sym. $("counter_txt"). html(timerCount);

Sehen Sie sich ein Video zu Adobe Edge Animate an

So ändern Sie den Status einer Schaltfläche, wenn Sie mit der Maus darüber fahren. Erforderlicher Code für Mouseleave:

sym.getSymbol("goBtn").stop("normal");

Sehen Sie sich ein Video zu Adobe Edge Animate an

Sie können ganz einfach YouTube-Videos in unsere Animation einfügen. Wir werden uns in der Lektion ansehen, wie das geht. Erforderlicher Einbettungscode:

var youtube = $("
Sehen Sie sich ein Video zu Adobe Edge Animate an

So starten Sie die Animation erst, nachdem der Benutzer die Seite an die gewünschte Stelle gescrollt hat. Lassen Sie uns dies anhand eines Beispielprojekts in Adobe Muse tun. Einrichten der Startposition für den Start.

Sehen Sie sich ein Video zu Adobe Edge Animate an

So drehen Sie ein Bild um 180 Grad um eine vertikale Achse, wenn Sie mit der Maus darüber fahren.

Sie können die erforderlichen Dateien und Codes herunterladen.

Sehen Sie sich ein Video zu Adobe Edge Animate an

Einen interessanten Effekt erzeugen wir, wenn sich beim Bewegen der Maus über das Video jedes Element unabhängig voneinander bewegt.

Sehen Sie sich ein Video zu Adobe Edge Animate an

So drehen Sie das gewünschte Logo um seine Achse. Leider stellte sich heraus, dass das Logo nicht anklickbar war.

Sehen Sie sich ein Video zu Adobe Edge Animate an

So fügen Sie beim Drücken einer Taste Ton hinzu.

Sehen Sie sich ein Video zu Adobe Edge Animate an

Wie Sie sehen, gibt es nichts Kompliziertes, alles ist einfach, verständlich, sozusagen intuitiv. Aber Sie können Ihren Websites spektakuläre und farbenfrohe Elemente hinzufügen, alles hängt nur von Ihrer Fantasie ab. Und Möglichkeiten einer Zuzahlung für solche modernen Elemente können Sie mit Kunden besprechen.

Viel Glück und kreativen Erfolg an alle!

Um HTML-Creatives für die Platzierung in ADFOX vorzubereiten, ist es wichtig, die Anforderungen zum Einfügen von Code einzuhalten, der einen Klick auf ein Banner verarbeitet und Ereignisse im Banner zählt.
Bei der Entwicklung von HTML-Code können Sie die Editoren verwenden, für die diese Anleitung geschrieben wurde:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Anforderungen an HTML-Code (für Code-Entwickler)

Bereiten Sie Ihr Projekt vor, indem Sie die folgenden Anforderungen erfüllen:

1. Die maximal zulässige Anzahl von Zeichen im HTML-Code beträgt 65.000;
2. Es ist vorzuziehen, JavaScript und CSS im HTML-Code des Banners zu platzieren;
Wenn der resultierende HTML-Code die maximal zulässige Anzahl von Zeichen überschreitet, müssen Sie den Code reduzieren, indem Sie JavaScript und CSS in separate Dateien verschieben:
- Speichern Sie den JS- und CSS-Code in separaten Dateien mit der Erweiterung .js oder .css;
3. Ein Projekt kann nur eine Datei mit der Erweiterung .html enthalten;
4. Die maximal zulässige Anzahl von Dateien in einem Projekt beträgt 50;
5. Zulässige Dateitypen im Projekt: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WebM, AVI, SWF, OTF, TTF, ABF, ACFM, GDR, Etx , eot, fnt, fon, mf, ttc, woff;
6. Maximale Größe jeder Datei (gilt auch für Dateien im Archiv):
- 300 KB;
- 1 MB für Videodateien.
7. Dateinamen dürfen nur Zahlen oder Buchstaben des englischen Alphabets und den Unterstrich enthalten. Es ist nicht erlaubt, im Dateinamen russische Buchstaben, Leerzeichen, Anführungszeichen und Sonderzeichen zu verwenden;
8. In den Namen von Variablen und Objekten dürfen keine russischen Buchstaben verwendet werden.
Die einzige Ausnahme bildet der Text auf dem Banner.
9. Format des fertigen Projekts - Reißverschluss Archiv.

Adobe Animate CC

1. Vorbereitung des Redakteurs.

Um ein neues Projekt in AdobeAnimate CC zu erstellen, wählen Sie das Projekt „HTML5 Canvas“ aus.

Der Code dieser Vorlage kann als Grundlage für die Erstellung von Creatives im Editor verwendet werden.

Um eine Vorlage auf ein Projekt anzuwenden, wählen Sie in den Veröffentlichungseinstellungen die Option aus „Erweiterte Veröffentlichungseinstellungen -> Neu importieren…“.

Vorlage enthält Skript adfox_HTML5.js

3. Klicken Sie auf Verarbeitung

Wenn Ihr Creative zyklische Animationen enthält, verwenden Sie Codes für Schaltflächen nur aus dem Abschnitt.

3.1 Um den gesamten Bannerbereich anklickbar zu machen und einen Link zu haben, zu dem Sie gelangen können, fügen Sie den folgenden Code im ersten Frame der Animation hinzu:

Canvas.style.cursor = "Zeiger"; canvas.addEventListener("click", function() ( window.callClick(); ));

3.2 Um mehrere Schaltflächen zum Bewegen mit unterschiedlichen Links hinzuzufügen, fügen Sie eine Hauptschaltfläche zum Klicken auf das Banner in der oberen Animationsebene hinzu, weisen Sie der Schaltfläche einen Instanznamen zu und schreiben Sie den Code auf die Schaltfläche:

This.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;

Fügen Sie weitere Schaltflächen hinzu, die den Benutzer beim Klicken auf verschiedene Seiten der beworbenen Website weiterleiten.
Platzieren Sie einige Schaltflächen auf der obersten Ebene über bestimmten Teilen der Animation, geben Sie den Schaltflächen einen Instanznamen und schreiben Sie Code für jede Schaltfläche:

This.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

Wo N

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));

Wo Mouseover- Javascript-Ereignis, N- Ereignisnummer von 1 bis 30, die ausgelöst werden soll.

Funktionen zum Erstellen von Schleifenanimationen

So implementieren Sie eine Schleifenanimation in einem Creative im Animate CC-Editor:
- Legen Sie die Option „Loop-Timeline“ in den Veröffentlichungseinstellungen fest;
- Verwenden Sie die Codes für Schaltflächen aus diesem Abschnitt, und die Codes für normale Schaltflächen aus den Absätzen 3.1 und 3.2 müssen entfernt werden.

Code für ein Creative mit einer Schaltfläche und sich wiederholender Animation:

Wenn mehrere Schaltflächen vorhanden sind, fügen Sie im Code zum Aufrufen von ADFOX-Ereignissen den folgenden Code hinzu:

If (typeof(this.stopCycle) == "undefiniert") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); )); this.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t. button = = 0) ( window.callClick(n); )); this.stopCycle = true;

Wo N- Ereignisnummer von 1 bis 30, die ausgelöst werden soll.

Verwendung transparenter Schaltflächen

Transparente Buttons können beispielsweise verwendet werden, wenn Sie den gesamten Bannerbereich oder nur einen Teil davon anklickbar machen möchten. Für sie muss, wie auch für normale Schaltflächen, ein Code zum Aufruf einer Transition oder eines Ereignisses hinzugefügt werden.

Schaltflächen in Animate sind Symbole, die vier Rahmen enthalten. Sie können die ersten drei leer lassen und nur den letzten „Hit“ füllen, indem Sie über Einfügen > Zeitleiste > Keyframe Inhalte (ein grafisches Element) hinzufügen.

Der Inhalt des Hit-Frames ist unsichtbar, definiert aber den Bereich der Schaltfläche, der auf einen Klick reagiert. Über „Einfügen“ > „Zeitleiste“ > „Keyframe“ können Sie diesem Frame Inhalte (ein grafisches Element) hinzufügen. Wenn die restlichen Frames leer oder unsichtbar bleiben, erscheint die Schaltfläche in der Bühne transparent blau und hat die Form des Inhalts im nächsten Hit-Frame. Wenn Sie Ihr Projekt veröffentlichen, ist der transparente blaue Bereich nicht sichtbar.

Merkmal der Implementierung eines dehnbaren (Gummi-)Banners

Damit sich das Banner über die Breite des Containers erstreckt, in dem es auf der Site platziert wird, nehmen Sie die folgenden Einstellungen vor: Wählen Sie Datei > Veröffentlichungseinstellungen.
In der Registerkarte Basic, wählen Responsiv machen > Breite, Höhe oder beides.
Wählen Skalieren, um den sichtbaren Bereich auszufüllen, um die Ausgabe im Vollbildmodus anzuzeigen.
Wenn Sie „An Ansicht anpassen“ auswählen, wird der Inhalt so skaliert, dass er den gesamten verfügbaren Platz auf dem Bildschirm ausfüllt und dabei das gleiche Seitenverhältnis beibehält. Wenn also die maximale Breite bereits erreicht ist, kann es sein, dass der Bereich entlang der Bildschirmhöhe unbefüllt bleibt und umgekehrt.

Wenn Sie mit den Programmeinstellungen nicht das gewünschte Ergebnis erzielen können, verwenden Sie Skripte.
Hier sind Beispiele für Codes:
Laden Sie den Code für die Skalierung des Seitenverhältnisses herunter.
Laden Sie den Code für die Skalierung ohne Seitenverhältnis herunter.
Laden Sie den Code zum Positionieren von Elementen herunter an0..an4 ist der Instanzname der Elemente.

Funktionen zum Erstellen eines Banners mit automatischem Blinken

Wenn Sie ein Banner im erweiterten Zustand anzeigen möchten, müssen Sie beim Hinzufügen eines Banners in der Benutzeroberfläche den Wert „Ja“ im Parameter „Immer automatisch erweitern“ oder „Bei Initialisierung erweitern“ angeben und den Code hinzufügen HTML-Creative:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. sichtbar = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.btnExpand.visible = true; window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this) ); window.global_exp_banner.btnCollapse.addEventListener("click", collapBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = wahr)

5. Veröffentlichung des Projekts.

Wichtig! Bei der Vorschau eines Projekts im Browser über (Strg-Eingabetaste | Befehlstaste-Eingabetaste) Zufällige Werte des Formulars werden an Links in Dateinamen in HTML angehängt ?1468231208369 . Solche Werte müssen beim Laden in ADFOX vom Projekt ausgeschlossen werden.
Dazu muss das finale Projekt im Editor über veröffentlicht werden Datei > Veröffentlichungseinstellungen > Veröffentlichen (Umschalt-Strg-F12 | Umschalt-Befehl-F12).

Wählen Sie beim Veröffentlichen eines Projekts eine Vorlage aus AdobeAnimate_Adfox_.html.

.Reißverschluss

Google Webdesigner

Der Code dieses Banners kann als Grundlage für die Erstellung von Creatives im Editor verwendet werden.

Vorlage enthält Skript adfox_HTML5.js und eine Reihe von Parametern für den korrekten Betrieb von Übergängen und Ereigniszählung:
%reference%, %user1%, %eventN%, wobei N die Ereignisnummer von 1 bis 30 ist.

2. Klicken Sie auf Verarbeitung.

Alle Ereignisse werden über die Registerkarte „Ereignisse“ bestimmten Animationselementen zugewiesen.

Die Komponente „Interaktiver Bereich“ wird zum Aufrufen von Aktionen verwendet.
Fügen Sie es hinzu und wählen Sie ein Ereignis aus „Interaktiver Bereich“ – „Berühren/Klicken“(oder „Tap Area > Touch/Click“ in der englischen Version).

Geben Sie auf der Registerkarte „Benutzerdefinierter Code“ einen Aufruf der Klickfunktion an.

2.1

CallClick();

2.2

CallClick(n);

Wo N

2.3 Wenn Sie ein Ereignis aus einer Animation ohne Übergang auslösen müssen, verwenden Sie den folgenden Code:

CallEvent(n);

Wo N- Nummer des Ereignisses, das aufgerufen werden soll.

Damit sich das Banner über die gesamte Breite des Containers erstreckt, in dem es auf der Website auf dem Panel platziert wird Eigenschaften Geben Sie für Position und Abmessungen Prozentsätze anstelle von Pixeln an.

Nutzen Sie auch die Optionen „Am Container ausrichten“ Und „Gummi-Layout“ in der oberen Symbolleiste.
Wenn Sie Fluid Layout aktivieren, bevor Sie Ausrichtungswerkzeuge verwenden, werden bei der Größenänderung des übergeordneten Containers alle Elemente aneinander und an den Abmessungen des Containers ausgerichtet.
In diesem Fall können Sie gleichzeitig sowohl relative Größen von Elementen in Prozent als auch absolute Größen in Pixeln verwenden.

4. Veröffentlichung des Projekts.

Beim Hinzufügen eines Banners zu ADFOX muss der Manager die Entsprechung der Schaltflächen und Ereignisnummern kennen. Für jede Veranstaltung schreibt der Manager einen eigenen Link, zu dem er navigieren kann, der dann mithilfe einer Variablen an den Bannercode übergeben wird.

Archivieren Sie das Projekt nach der Veröffentlichung im Format .Reißverschluss. Ihr Creative kann nun auf das ADFOX-Banner hochgeladen werden.

Adobe Edge Animate CC

Führen Sie zunächst die Datei mit der Erweiterung aus .ein aus dem Archiv.

2. Klicken Sie auf Verarbeitung.

Alle Ereignisse werden über die Registerkarte „Code“ bestimmten Animationselementen zugewiesen.

Um durch das ausgewählte Element zu navigieren, müssen Sie ein Ereignis auswählen klicken und schreiben Sie einen Aufruf an die Click-Funktion.

Den Schaltflächen muss ein Instanzname zugewiesen werden, zum Beispiel: btnMain, btnRight.

2.1 Bei Verwendung einer Sprungtaste:

CallClick();

2.2 Wenn mehrere Übergangsschaltflächen vorhanden sind:

CallClick(n);

Wo N- Nummer des Ereignisses, das aufgerufen werden soll.

2.3 Wenn Sie ein Ereignis aus einer Animation ohne Übergang auslösen müssen, verwenden Sie den folgenden Code:

CallEvent(n);

Wo N- Nummer des Ereignisses, das aufgerufen werden soll.

Merkmal der Implementierung eines dehnbaren (Gummi-)Banners.

Damit sich das Banner über die Breite des Containers erstreckt, in dem es auf der Site platziert wird, müssen Sie bei der Vorbereitung des Banners im Editor im Eigenschaftenfenster Prozentsätze anstelle von Pixeln für Position und Größe angeben.