Cum se creează anunțuri HTML5 în Adobe Animate pentru DoubleClick pentru editori (DFP)

ADS-HTML5-Adobe-Animate -DFP

A doua zi a explicat cum să introduceți clicktag pe bannere HTML5. Cu toate acestea, am promis că ați creat un post pentru a vă spune cum să obțineți animațiile proiectate în Adobe Animate Fiți compatibil cu DoubleClick pentru editori (DFP).

Înainte de a începe, vă voi spune, că, deși ca și cum ar fi Un designer pe care îl preferi Adobe încurajează înainte de Google Web Designer, dacă sarcina dvs. obișnuită este centrată pe designul bannerului, va fi mult mai ușor pentru dvs. dacă sunteți decantat pentru al doilea. Compatibilitatea cu DFP și AdWords este mult mai mare, ceea ce va însemna să vă salveze o mulțime de timp de lucru.

Deoarece uneori alegerea instrumentului nu depinde de noi, ci despre compania pentru care lucrăm, este Nu de la mai multe știți cum să vă creați fișierele în cel mai mare număr de platforme posibile. Deși Adobe a lansat o versiune îmbunătățită a Flash sub numele de animare cu doar câteva luni în urmă, el dedică multe resurse dezvoltării sale și sunt sigur că va câștiga putere.

Apel

Am luat multe săptămâni de lucru pentru a găsi soluția la problema pe care o propun în acest articol și după ce am petrecut ore și ore în căutarea unor forumuri legate de Adobe, cu DFP, cu AdWords, cu GWD … am a realizat că industria publicității este foarte pierdută în ceea ce privește bannerele din HTML5.

Ne confruntăm cu o panoramă complicată și este chiar acum sarcina de proiectare trebuie să meargă pentru o noțiune de bază de cod și programare. Când profilul dvs. este 100% creativ, acest lucru poate deveni oarecum enervant, dar … nu aveți de ales decât să vă reinventați. Acest lucru înseamnă timp și bani, dar și mai multe cunoștințe (care nu doare niciodată).

Cu toate acestea, dacă dorim lanțul de producție să vă urmeze cursul, cred că este esențial să căutați o soluție mai simplă decât unul pe care-l propun aici. Este atât de complicat faptul că platformele de proiectare se simt cu diferiții adversari și caută o modalitate de ao realiza?

Sper așa și că, de asemenea, nu iau prea mult … 😛

Ce cerințe trebuie să-mi îndeplinești bannerele HTML5 pentru a lucra în dubluClick pentru editori (DFP)?

  1. DFP suportă doar anunțuri care conțin toate fișierele din același dosar, adică, adică Nu puteți utiliza subfoldere de tip / imagini / o / js /.
  2. rutele imaginilor din DFP sunt înlocuite cu variabile, prin urmare, trebuie să fie bine definite în cod.
  3. Documentul HTML nu poate conține legături către fișiere sau biblioteci externe.
  4. Este necesar să se implementeze Clicktag pentru măsurarea clicurilor.
  5. Trebuie să definim ad.size proprietate în cadrul HTML.

Ce schimbări trebuie să fac înainte de a posta proiectul meu în Adobe Animate?

în această secțiune vă voi arăta cum să vă arătați Personalizați configurația de publicare n „În Adobe Animate, astfel încât fișierele de care obțineți mai ușor de modificat un posteriori.

1. Mergeți la „Fișier” → „Publicați setări” și în fila „Basic” Verificați dacă „combinați în coloana sprite” este deselectată, care în „Imaginea de resurse de export” Dosarul se numește „imagini /” și că în „Resurse de export din CREATEJS „Dosarul este numit” libs / ºiconfiguracion-publicacion-animate-dfpSetări-Publication-Animate-DFP

2. Acum mergeți la fila „Advanced” și deselectați „biblioteci găzduite”.

Setări-Publicație-Animate-DFP-avansat

3. Odată ce ați făcut toate modificările, faceți clic pe „Publish” și veți obține ceva similar cu acesta:

Adobe-Animați-Fișiere generate

Ce schimbări trebuie să fac în fișierul meu HTML5 după ce a postat-o cu animație pentru a fi compatibil cu DFP?

1. În primul rând trebuie să mutați fișierele conținute în „Imagini „Și” libs „la directorul principal, în cazul meu, aș fi după cum urmează:

Fișiere-Animați-Directory-Main

2. O continuare Trebuie să editați fișierul HTML și să includeți în „Cap”:

  • Variabila Clicktag
  • Ad.Size Proprietatea, aceasta din urmă va variază în funcție de mărimea dimensiunii anunțului dvs., în cazul meu „300 × 250”.
  • așa cum am eliminat subfolderele, acum fișierul „createjs-2015.11.26.min.js” este În directorul principal, prin urmare, trebuie să ștergeți „libs” în fața „CreateJs-2015.11.26.min.js”

Aici vă arăt cum modifică Cado My HTML:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>clicktag-animate</title><meta name="ad.size" content="width=300,height=250"><script> var clickTag = "%%CLICK_URL_UNESC%%%%DEST_URL%%";</script><script src="createjs-2015.11.26.min.js"></script><script src="clicktag-animate.js"></script>

3. În același document trebuie să comentați linia „loader.loadmanifest” și să efectuați un apel la „Gândiți-vă ()”.Ar fi în felul următor (uitați la ultimele două linii):

<script>var canvas, stage, exportRoot;function init() {// --- write your JS code here ---canvas = document.getElementById("canvas");images = images||{};var loader = new createjs.LoadQueue(false);loader.addEventListener("fileload", handleFileLoad);loader.addEventListener("complete", handleComplete);// loader.loadManifest(lib.properties.manifest);handleComplete()}

4. La sfârșitul documentului HTML din partea „corpului”, în loc să adăugați un atribut „OnLoad”, faceți un apel „Oninit”, după cum vedeți aici:

<body onload="init();" style="background-color:#D4D4D4;margin:0px;"><canvas width="300" height="250" style="background-color:#FFFFFF"></canvas> <script> init(); </script></body>

5 Deschide documentul JavaScript care generează Adobe Animate (în exemplul meu „Clicktag-Animate.js”). Apoi, ștergeți apelurile către imagini și înlocuiți-le prin datele de date (Identificator de resurse uniforme).

Să vedem mai detaliat:

• Cum să generați codul URI?

Există multe pagini de generare de URI, astfel încât să puteți alege cel care vă oferă cel mai furios. În cazul meu am folosit Colorza.org și am urmat acești pași:

  • Selectați fișierul meu
  • Generare date URI
  • Copiați codul

Generate-uri

* Va trebui să o faceți pentru fiecare dintre imaginile care vă conformează creativității

• Includeți codul URI

După ce ați generat, trebuie să le includeți sub „Manifest:};

apoi:

* Amintiți-vă că după „var Val1”, „var imagine2” etc. Trebuie să includeți întregul cod URI (nu o fac în exemplu, deoarece atunci când este prea lung, nu ar fi afișat bine).

(function (lib, img, cjs, ss) {var p; // shortcut to reference prototypeslib.webFontTxtFilters = {}; // library properties:lib.properties = {width: 300,height: 250,fps: 24,color: "#FFFFFF",webfonts: {},manifest: };var imagen1 = "data:image/png;base64,....";var imagen2 = "data:image/png;base64,...";

6. În același document .js, căutați partea în raport cu „simbolurile”. Aici trebuie să ștergeți linia „Acest.Initialize ()” și să modificați numele imaginilor care merg între paranteze după bitmap pentru variabilele dvs. (în imaginea casei mele și imaginea2).

Înainte: /p>

// symbols:(lib.blognaiarafernandez = function() {this.initialize(img.blognaiarafernandez);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,121,121);(lib.facebooknaiarafernandez = function() {this.initialize(img.facebooknaiarafernandez);}).prototype = p = new cjs.Bitmap();p.nominalBounds = new cjs.Rectangle(0,0,121,120);

apoi:

// symbols:(lib.blognaiarafernandez = function() {}).prototype = p = new cjs.Bitmap(imagen1);p.nominalBounds = new cjs.Rectangle(0,0,121,121);(lib.facebooknaiarafernandez = function() {}).prototype = p = new cjs.Bitmap(imagen2);p.nominalBounds = new cjs.Rectangle(0,0,121,120);

* Trebuie să faceți acest lucru pentru fiecare dintre imaginile dvs. Creativitate , devenind clar că atribuiți fiecare variabilă imaginii corecte

7. Acum șterge fișierele de imagine ale dosarului și de testare pentru a afișa fișierul HTML cu un browser. Dacă afișați bannerul corect, puteți Du-te. Dar verificați că ați făcut corect toate pașii de mai sus.

Previzualizare-HTML-Adobe-Animate

8. Totul funcționează, ce fac acum? Acesta este cel mai simplu pas. Comprimă dosarul care conține toate documentele și gata! Puteți încărca deja la DFP 😉

Doar în cazul în care există un pas pe care îl există nu este clar cu dvs. explicația, las acces la exemplul meu, astfel încât sau să vedeți mai mult.

iv id = „be4ccf1f5”

>

Concluzie

Am ajuns la prima, la al doilea sau al treilea, sunt sigur că veți da salturi de bucurie. Mai ales dacă ați primit feedback-ul traficantului (sau ați încărcat-le în DFP) și rezultatul a fost satisfăcător.

Nu vreau să spun la revedere fără a se referea mai întâi la cele două elemente care mi-au permis să creez Acest post, pe de o parte pe care Andrius Aggs de adguns, iar pe de altă parte, cel al lui David Wallin. Datorită combinației de ambele recomandări, am reușit să creez acest tutorial și mult mai bine, găsim o modalitate de a încărca bannerele HTML5 în DFP 🙂

Dacă apar îndoieli (sunt sigur că da, hehe) , Vă aștept în comentarii.

sursă imagine: 1

  • despre
  • Ultimele intrări

urmați-mă 😉

Designer grafic și web cu experiență excelentă în domeniul comunicării online. Scopul meu este de a ajuta profesioniștii și întreprinderile mici să-și creeze identitatea digitală.
Timpul meu offline Am trecut-o pe drumul spre un munte, imortalizând ceva timp cu camera mea, vizitând un loc oarecum recondit în lume sau doar se întâmplă timp bun Cu prietenii mei

iv id = „

urmați-mă 😉 /div>

Ultimele intrări Naiara Fernández (vezi toate)
  • Tutorial DFP SM: linii de comandă – Configuration – 10 august 2016
  • DFP SM Tutorial: linii de comandă – 27 iulie 2016
  • TUTORIAL DFP SM: linii de comandă și comandă – 13 iulie 2016

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *