Share
Dezvoltarea bannerului Flash este adesea afectată de mai multe fișiere, de coduri fragmentate și de timbre incorecte. Acest tutorial vă va arăta cum puteți crea un șablon de proiect pentru a servi ca o bază solidă care vă va ajuta să vă dezvoltați rapid bannerele flash robuste, eliberându-vă să vă concentrați pe aducerea ideii creative.
Atunci când construiți mai multe bannere flash, o bună gestionare a fișierelor este esențială pentru a menține fluxul de lucru eficient. Porniți șablonul de proiect pentru bannere creând structura de directoare prezentată mai jos:
Acum vom crea un set de șabloane Photoshop pe care să le folosim atunci când începem să proiectăm o campanie banner flash. (Dacă nu aveți Photoshop nu vă faceți griji, puteți trece peste pasul 5). Biroul de publicitate interactivă menține Regulile unităților de anunțuri care enumeră dimensiunile comune ale unităților de anunțuri (bannere). În scopul acestui tutorial, vom crea cele trei cele mai frecvente:
Să începem prin crearea șablonului pentru Zgârie-nori. Deschideți Photoshop și selectați Fișier> Nou. Configurați proprietățile pentru noul dvs. document Photoshop după cum se arată mai jos:
Pentru a păstra straturile în fișierul Photoshop structurate ca dosarele de proiect atunci când este timpul să realizăm un design de bannere, vom adăuga grupuri de straturi în fișierul șablon pentru a ține elemente de design de bază.
Utilizarea noului grup din meniul din colțul din dreapta sus al panoului Straturi creează structura Grupului de straturi prezentată mai jos:
Grupul de strat "Fundal" va conține în permanență elemente de design care se află în fundalul bannerului dvs., de exemplu o culoare sau o textură.
Grupul de straturi "Fundament" va conține în permanență elemente de design care se află în prim-planul banner-ului dvs., cum ar fi logo-ul unei companii.
Grupurile de strat "Frame" vor conține elementele de design ale momentelor cheie din secvența sau interacțiunea banner-ului dvs. flash. Aceasta ar putea include mesaje cheie, puncte critice ale unei animații sau interfețe utilizator.
Șablonul dvs. este gata să salveze. Mergeți la File> Save As și navigați la folderul "design" din structura folderului proiectului. Denumiți fișierul în funcție de dimensiunile sale, în acest caz '160x600' și asigurați-vă că este în format Photoshop, cu Straturile verificate.
Acesta este primul dvs. fantastic flash banner șablon creat! Repetați acești pași pentru Medium Rectangle (înălțime 300px x 250px) și Leaderboard (728px x 90px înălțime). Cu aceste șabloane Photoshop completate, suntem gata să ne mutăm în Flash.
Să începem prin crearea unui proiect Flash pentru a vă putea naviga structura de fișiere în Flash IDE. Deschideți Flash CS4 (procesul este foarte similar în Flash CS3, deși interfața Flash va fi diferită) și accesați fereastra> Alte panouri> Proiect. În panoul Proiect, dați clic pe meniul derulant Proiecte și selectați Proiect nou. Specificați numele proiectului ca "BannerTemplate".
Pentru folderul rădăcină, navigați la folderul / banner_template / development / creat în pasul 1 utilizând pictograma dosarului. Asigurați-vă că versiunea ActionScript este setată la ActionScript 3.0 și faceți clic pe Creare proiect.
Acum vom seta proprietățile proiectului Flash pentru a ajuta Flash să facă munca de a ne stânjeni cursurile pentru noi. Faceți clic pe meniul derulant cu pictograma roată din colțul din dreapta sus al panoului Proiect și selectați Proprietăți proiect. Pentru câmpul "Salvați clasele în", navigați la dosarul / as / creat în Pasul 1 și faceți clic pe OK.
Dacă ați efectuat corect ultimul pas, ar trebui să vedeți paranteze mici de cod care se află acum pe pictograma / as / folder. Acum vom crea un dosar pentru toate clasele specifice șabloanelor noastre de bannere. Selectați directorul / as / și faceți clic pe pictograma dosarului nou din partea inferioară a panoului. În caseta de dialog care apare numele folderului dvs. "banner" și faceți clic pe OK.
Acum (în sfârșit!), Sunteți gata să creați clasa de documente banner bază. Dacă nu sunteți familiarizat cu utilizarea claselor de documente (sau clase în general), este o idee bună să citiți mai întâi acest sfat rapid.
Cu folderul / as / banner / selectat, faceți clic pe pictograma Creare clasă din partea de jos a panoului. În câmpul Class, adăugați numele de clasă "Banner" după numele pachetului "banner". și faceți clic pe Creare clasă.
Acum trebuie să luăm această clasă și să o modificăm într-o clasă de documente funcționale de bază. Adăugați la ActionScript pentru a reflecta codul afișat mai jos:
Accentsconagua
pachet banner import flash.display.MovieClip; Banner public de clasă extinde MovieClip // Constants: // Proprietăți publice: // Proprietăți private: private var config: Object; // Inițierea: funcția publică Banner (config: Object = null): void // Metode publice: funcția publică init (): void trace ("Banner class initialized"); // Metode protejate: Să acoperim repede schimbările pe care le-am făcut la clasa Banner:
Chiar acum acest lucru nu face prea mult, dar lucrul important aici este construirea unei structuri de clasă care să ne permită să centralizăm logica bannerului, reducând repetarea codului. De aici, putem extinde acum clasa Banner pentru a crea clasele individuale de documente banner.
Să începem cu fișierul de clasă pentru The Wide Skyscraper. Creați o clasă "WideSkyscraper" în proiectul Flash / as / banner / folder exact așa cum ați făcut pentru clasa "Banner". Luați codul stub generat de clasă și adăugați-l astfel încât să pară următoarele:
pachet banner public class WideSkyscraper extinde Banner // Constants: // Proprietăți publice: // Private Properties: private var config: Object; // Inițierea: funcția publică WideSkyscraper () super (); // Metode publice: funcția de override publică init (): void trace ("class WideSkyscraper initialized"); super.init (); // Metode protejate: Să trecem peste schimbările pe care le-am făcut la clasa WideSkyscraper:
Acum, repetați acest pas pentru a crea clasele de document banner pentru MediumRectangle și Leaderboard. Cu aceasta, structura noastră de clasă a documentelor este acum în vigoare.
Acum putem începe să creăm fișierele .FLA de care avem nevoie. Din nou, să începem prin crearea șablonului pentru The Skyscraper Wide (160x600).
Deschideți Flash CS4 și selectați Fișier> Nou. Selectați "File Flash (ActionScript 3.0)" ca tip și faceți clic pe OK. În panoul Proprietăți, modificați setările pentru publicare și proprietăți după cum se arată mai jos:
Acum salvați fișierul ca "160x600.fla" în folderul / development / folder al proiectului dvs..
Acum vom stabili o cale sursă relativă și o cale de publicare relativă. Acest lucru devine important atunci când doriți să faceți o copie a proiectului dvs. de șablon de banner, să îl redenumiți și să începeți să lucrați sau când doriți să dați șablon altcuiva. Căile absolute pot fi o adevărată durere de actualizare (în special în mai multe fișiere!) De fiecare dată când doriți să începeți un proiect.
Pentru a seta calea sursă, accesați File> Publish Settings și faceți clic pe fila Flash. Faceți clic pe butonul Setări de lângă meniul derulant Script pentru a deschide fereastra Setări avansate ActionScript 3.0. Asigurați-vă că Calea sursă este fila activă și faceți clic pe "+" pentru a adăuga calea "./as". Acum puteți adăuga textul "banner.WideSkyscraper" în câmpul Document Class. Fereastra dvs. ar trebui să arate astfel:
Faceți clic pe OK, iar documentul dvs. este acum legat de clasa WideSkyscraper creată în pasul 9.
Pentru a seta calea de publicare, accesați Fișier> Setări publicare și faceți clic pe fila Formate. Nu avem nevoie de fișierul HTML, debifați această casetă. În calea de publicare pentru SWF, vizați directorul / www / în folderul proiectului, după cum se arată mai jos. Dacă totul pare corect, faceți clic pe OK. SWF-ul dvs. compilat va fi acum pus în folderul / www / atunci când îl previzualizați sau îl publicați.
Există informații despre acest lucru în acest ecran rapid.
Din anumite motive, unele sisteme de difuzare a anunțurilor necesită ca primul cadru al filmului dvs. să fie necompletat (Eyeblaster este un exemplu de acest lucru) sau să importați clasele acestora / să includeți codul ActionScript pe primul cadru. Adesea extensiile Flash pe care le puteți instala pentru aceste sisteme de difuzare a anunțurilor vor refuza să vă împacheteze fișierul dacă nu respectați această prevedere.
Acesta este locul unde funcția init () creată în clasa de documente a apărut mai devreme. Pentru a ne asigura că șablonul nostru poate fi utilizat în această situație, vom crea o cronologie de două cadre cu primul cadru gol, al doilea conținând o oprire acțiune și un apel la funcția init () așa cum se arată mai jos:
Dacă compilați acest fișier acum, ar trebui să obțineți următoarele în panoul dvs. de ieșire care confirmă clasa de documente WideSkyscraper și clasa de bază de bannere care funcționează:
Clasa WineSkyscraper a inițializat clasa Banner inițializată
Acum vom crea un simbol al bibliotecii pentru a ține reclama bannerului, indiferent dacă este vorba despre o animație sau o interfață. Accesați Insert> New Symbol și dați-i numele "creative", bifați Export pentru ActionScript și dați-i clasa "Creative". Asigurați-vă că tipul este film clip și faceți clic pe OK.
Acum, adăugați un text de tip "substituent" pe scenă, după cum se arată mai jos, pentru a putea vedea ceva când îl adăugați mai târziu în scenă:
Și asta e tot ce avem nevoie de fișierul .FLA! Mergeți mai departe și creați celelalte .FLA-uri pentru Medium Rectangle (300 înălțime x 250 înălțime) și Leaderboard (728 lățime x 90 înălțime). Cu acest lucru, putem revizui clasa de documente Banner și putem începe să adăugăm funcții de bază în toate aceste bannere.
Aproape toate instrucțiunile de banner vă sfătuiește să plasați o culoare de fundal solidă în fișierul dvs. Flash, deoarece culoarea de fundal Stage poate fi suprascrisă atunci când obiectul Flash este încorporat într-o pagină HTML. Mai degrabă decât să intrăm în fiecare .FLA și să desenăm o formă pe scenă, putem centraliza această sarcină în cod. Deschideți clasa Banner și actualizați fișierul pentru a reflecta codul afișat mai jos:
pachet banner import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Graphics; Banner public de clasă extinde MovieClip // Constants: private const BG_COLOR: Number = 0x0E0E0E; // Proprietăți publice: // Proprietăți private: private var config: Object; // Inițierea: funcția publică Banner (config: Object = null): void // Metode publice: funcția publică init (): void trace ("Banner class initialized"); // Crearea fundalului var bg: Sprite = Sprite nou (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Metode protejate: Să recapitulăm modificările aduse clasei Banner:
Acum, tot ce trebuie să faceți este să modificați valoarea BG_COLOR pentru a obține fundalul corect de culoare în toate bannerele dvs..
Acum trebuie să adăugăm simbolul Creativ pe care l-am creat în Pasul 14 în lista de afișare, deoarece acesta va fi containerul pentru execuția creativă. Acest lucru este foarte ușor de făcut, doar actualizați funcția init () la aceasta:
// Metode publice: funcția publică init (): void trace ("Banner class initialized"); // Crearea fundalului var bg: Sprite = Sprite nou (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Adăugați reclama creativă var: Creativ = nou Creativ (); addChild (creative); O altă cerință comună este pentru zona clicabilă a bannerului să se deschidă o nouă fereastră pe baza unei variabile "clicktag" transmisă din pagina HTML atunci când obiectul Flash este încorporat. Să creăm o clasă de utilități care să se ocupe de asta pentru noi. În panoul Flash Project navigați la folderul / as / banner / și creați un nou subfolder numit / util /. Creați o nouă clasă aici numită "ClickArea" și codificați-o astfel:
pachet banner.util import flash.display.Sprite; import flash.display.Graphics; import flash.display.Stage; importul flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; clasa publica ClickArea extinde Sprite // Proprietăți private: var privat clickthroughURL: String; // Inițierea: funcția publică ClickArea (loaderInfo: Object, stage: Stage) // Crearea zonei clickable this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); this.graphics.endFill (); // determinați adresa URL de clic (prin verificarea convențiilor cunoscute de numire) dacă (loaderInfo.parameters.clicktag! = Null) clickthroughURL = loaderInfo.parameters.clicktag; altfel dacă (loaderInfo.parameters.clickTag! = null) clickthroughURL = loaderInfo.parameters.clickTag; altfel dacă (loaderInfo.parameters.clickTAG! = null) clickthroughURL = loaderInfo.parameters.clickTAG; // Adauga butonul de comportament this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, false, 0, true); // Metode publice: // Metode protejate: mouse-ul funcției privateClickHandler (e: MouseEvent): void if (clickthroughURL! = Null) navigateToURL (new URLRequest (clickthroughURL), "_ blank"); altceva trace ("clic"); Să rezumăm rapid ceea ce face clasa ClickArea:
Acum, deschideți din nou clasa Banner și adăugați import banner.util.ClickArea sub lista dvs. de importuri de clasă Flash și actualizați funcția init () pentru a instanția ClickArea și a adăuga-o în lista de afișare după cum se arată mai jos:
// Metode publice: funcția publică init (): void trace ("Banner class initialized"); // Crearea fundalului var bg: Sprite = Sprite nou (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Adăugați reclama creativă var: Creativ = nou Creativ (); addChild (creative); // Crearea zonei clickabile var clickArea: ClickArea = noua ClickArea (loaderInfo, etapa); addChild (clickArea); Adăugăm fundamentele fundamentale ale dezvoltării de bannere în această clasă, dar valoarea reală aici este faptul că le adăugăm la toate bannerele noastre într-o singură clasă centralizată. Orice sarcini obișnuite pe care le găsiți în mod repetat în bannere pot fi adăugate aici pentru a vă elibera timpul pentru a realiza animația unică sau interacțiunea pe care banner-ul creativ are.
Cu toate codul nostru bine organizat, deschiderea fișierelor individuale. Și publicarea acestora începe să se simtă ca un hassle. Vestea bună este că putem automatiza și asta. Mergeți la panoul Proiect și bifați căsuța de bifare de lângă fiecare banner. Formatul FLA (dacă nu îl puteți vedea în această listă, faceți clic pe meniul derulant cu pictograma Gear și selectați Actualizați) după cum se arată mai jos:
Acum, puteți să publicați toate bannerele în directorul / www / configurat la Pasul 12 făcând clic pe meniul derulant cu pictograma Gear și selectând Publish Project.
Ultimul element pe care trebuie să-l finalizăm pentru a finaliza șablonul proiectului de banner este crearea unei pagini HTML care să-i prezinte, astfel încât să poată fi afișată cu ușurință unui client. Descărcați SWFObject și plasați swfobject.js în directorul / www /, apoi creați un fișier HTML în editorul ales și scrieți codul de mai jos:
Banner Signoff Template
Puteți citi mai multe despre modul de utilizare a documentului SWFObject în documentația online, dar să acoperi rapid lucrurile cheie pe care le facem aici:
Acum salvați acest fișier ca index.html în directorul / www /. Acum puteți să previzualizați bannerele într-un browser web sau să încărcați acest director undeva pentru a vedea clientul dvs.:
Să terminăm prin examinarea structurii noastre de dosare populare și asigurându-vă că toate fișierele se află în locul potrivit:
Acum aveți un șablon de proiect cu:
Acest tutorial este într-adevăr doar începutul. Identificați sarcinile recurente în proiectele dvs. de bannere și personalizați șablonul de proiect pentru a le aborda pentru a vă accelera fluxul de lucru cât mai mult posibil. Extindeți-vă prin includerea cadrelor ușoare preferate (TweenNano este excelentă pentru animațiile scripted) și a bibliotecilor, astfel încât instrumentele dvs. preferate sunt la îndemână atunci când începeți următorul proiect.
Dacă utilizați Subversion sau alt tip de control al sursei, acesta ar fi un proiect excelent pentru a fi inclus în depozitul dvs. pentru a vă putea îmbunătăți în timp și pentru a verifica ultima revizie pentru fiecare proiect banner pe care îl începeți.
Aveți idei despre modul în care acest lucru ar putea fi îmbunătățit sau puteți comenta despre problemele care vă împiedică dezvoltarea bannerului? Alăturați-vă în discuția de mai jos!
