A bedre måte å bygge Flash bannere
Del
Del
3
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Flash banner utvikling er ofte plaget av flere filer, fragmentert kode og rotete tidslinjer. Denne veiledningen vil vise deg hvordan du kan lage et prosjekt mal for å tjene som en solid base som vil hjelpe deg å utvikle robuste flash bannere raskt, frigjør deg opp til å fokusere på å bringe den kreative ideen til livet.
Trinn 1: Klar Prosjekt mappestruktur
Når du bygger flere flash bannere, er viktig å holde arbeidsflyten effektiv god filbehandling. Start banner prosjektmalen ved å opprette mappestrukturen vist nedenfor:
Trinn 2: Opprette en Photoshop Mal
Nå har vi tenkt å lage et sett med Photoshop maler å bruke når du starter å utforme en flash banner kampanje. (Hvis du ikke har Photoshop ikke bekymre deg, kan du gå videre til trinn 5). Interactive Advertising Bureau opprett annonse Unit retningslinjer som lister de vanligste dimensjonene av annonseenhetene (bannere). Ved anvendelsen av denne opplæringen, skal vi skape de tre vanligste:
Bred skyskraper (160px bred x 600px høye)
Mellomstort rektangel (300px bred x 250px høye)
The Leaderboard (728px x 90px høy)
La oss begynne med å lage malen for The bred skyskraper. Åpne Photoshop og velg Fil > Ny. Konfigurere egenskapene for den nye Photoshop-dokument som vist nedenfor:
Trinn 3: Legge Layer Grupper
For å holde lagene i Photoshop fil som strukturert som prosjektmapper når det er på tide å produsere en banner design, vi kommer til å legge Layer grupper i malen filen til å holde kjernedesignelementer.
Ved hjelp Ny gruppe fra menyen øverst til høyre i lagpanelet skape Layer-konsernet strukturen vist nedenfor.
"Bakgrunn" lag gruppen vil holde designelementer som er i bakgrunnen på banneret til alle tider, for eksempel en farge eller en tekstur
'Forgrunn' laggruppe vil holde designelementer som er i forgrunnen av banneret til alle tider, for eksempel en firmalogo.
"Frame" lag grupper vil holde designelementer av de viktigste øyeblikkene i din flash banner sekvens eller interaksjon. Dette kan inkludere viktige meldinger, kritiske punkter i en animasjon, eller brukergrensesnitt
Trinn 4:. Lagre
Nå malen er klar til å redde. Gå til Fil > Lagre som og naviger til "design" mappen i prosjektmappestrukturen. Gi navn til filen i henhold til sine dimensjoner, i dette tilfelle "160x600" og sikre at det er i Photoshop-format, med Layers sjekket.
Det er din første fantastiske flash banner mal opprettet! Gjenta disse trinnene for Medium rektangel (300px bred x 250px høy) og The Leaderboard (728px x 90px høy). Med disse Photoshop maler ferdig, er vi klare til å flytte inn i Flash
Trinn 5:. Oppretting av Flash Prosjekt
La oss begynne med å lage en Flash-prosjektet, slik at du kan navigere filen struktur i Flash IDE. Åpne Flash CS4 (prosessen er svært like i Flash CS3 selv om Flash-grensesnittet vil være forskjellig) og gå til Vindu > Andre Paneler > Prosjekt. I prosjektpanelet, klikk på Prosjekter nedtrekksmenyen og velg New Project. Spesifiser Prosjektnavn som "BannerTemplate '.
For rotmappen, naviger til /banner_template /utvikling /mappen du opprettet i trinn 1 ved hjelp av mappeikonet. Sørg for Actionscript-versjonen er satt til Actionscript 3.0 og klikk Opprett prosjekt
Trinn 6:. Flash Prosjekt Classes Folder
Nå skal vi sette egenskapene Flash prosjekt for å hjelpe Flash gjøre arbeidet med stubbing ut våre klasser for oss. Klikk på rullegardin med på tannhjulikonet øverst til høyre i prosjektpanelet, og velg Prosjekt Egenskaper. For den "Lagre klasser i feltet, naviger til /som /mappen du opprettet i trinn 1 og klikk OK
Trinn 7:. Banner Package Folder
Hvis du utførte siste trinnet riktig, bør du se små kode parentes er nå på /as /mappeikonet. Vi skal nå lage en mappe for alle klasser som er spesifikke for våre banner maler. Velg /as /mappe og klikk den nye mappeikonet i bunnen av panelet. I dialogboksen som vises navngi mappen "banner" og klikk OK
Trinn 8:. Banner Base Dokument Class
Nå (! Endelig) er du klar til å lage din banner basisdokumentet klasse. Hvis du ikke er kjent med bruk av dokument klasser (eller klasser generelt), er det en god idé å lese denne rask spiss først.
Med /as /banner /mappe er valgt, klikker du på Opprett Class-ikonet i bunnen av panelet. I Klasse feltet legge klassenavnet "Banner" etter pakken navnet 'banner. og klikk på Opprett Class.
Nå må vi ta denne klassen stub og endre den til en funksjonell basisdokument klasse. Legg til Actionscript for å reflektere koden vist nedenfor:
pakke banner {import flash.display.MovieClip; public class Banner strekker MovieClip {//Konstanter: //Offentlige Egenskaper: //Privat Egenskaper: privat Var config: Object; //Initialisering: offentlig funksjon Banner (config: Object = null): void {} //offentlige metoder: offentlig funksjon init (): void {trace ("Banner klasse initialisert"); } //Beskyttede Metoder:}}
La oss raskt dekke de endringene vi har gjort i Banner klasse:
Importerte den MovieClip klasse
Made klassen Banner forlenge. MovieClip (slik at den kan brukes som et dokument klasse).
Gjort Banner dokumentet initialisering funksjon motta en valgfri config Objekt som vi kan bruke til å passere i parametre.
Har laget en offentlig init ( ) funksjon som sender ut et spor når den kalles. Grunnen til at dette er nyttig vil bli forklart når vi begynner å lage banner .FLAs.
Akkurat nå er dette ikke gjør mye, men det viktigste her er å bygge en klassestruktur som gjør at oss å sentral banner logikk, redusere kode repetisjon. Herfra kan vi nå utvide Banner klassen til å lage våre individuelle banner dokument klasser
Trinn 9:. Bannerdokument Classes
La oss starte med klassen filen for bred skyskraper. Lag en "WideSkyscraper" class i Flash prosjekt /as /banner /mappe akkurat som du gjorde for "Banner" class. Ta den genererte klassen spire kode og legge til det så det ser ut som dette:
pakken banner {public class WideSkyscraper strekker Banner {//Konstanter: //Offentlige Egenskaper: //Privat Egenskaper: privat Var config: Object; //Initialisering: offentlig funksjon WideSkyscraper () {super (); } //Offentlige Metoder: offentlige styringsfunksjon init (): void {trace ("WideSkyscraper klassen initialisert"); super.init (); } //Beskyttede Metoder:}}
La oss gå over de endringene vi har gjort i WideSkyscraper Klasse:
Gjort WideSkyscraper klassen forlenge Banner
Kalt basen. Banner klasse dokument funksjon med super () i WideSkyscraper dokumentere funksjon.
Overstyrt basen Banner klassen init () -funksjonen med en tilpasset init () funksjon som sender ut et spor når kalt, kaller deretter Banner klassen init ( ) funksjon.
Nå gjentar dette trinnet for å lage banner dokument klasser for MediumRectangle og Leaderboard. Med dette gjort, er vår dokumentklassestrukturen nå på plass
Trinn 10:. Lage banner .FLAs
Nå kan vi begynne å lage FLA-filer vi trenger. Igjen, la oss begynne med å lage malen for det brede skyskraper (160x600)
Åpne Flash CS4 og velg Fil >.; Ny. Velg "Flash File (Actionscript 3.0)" som type og klikk på OK. I panelet Egenskaper, redigere Publiser og Properties innstillinger som vist nedenfor:
Nå lagre filen som "160x600.fla" i /utvikling /mappe på prosjektet
. Trinn 11: Sette en relativ Kilde Sti
Vi overvåker nå kommer til å sette en relativ kildebane og en relativ publisere bane. Dette blir viktig når du ønsker å lage en kopi av din banner mal prosjektet, endre navn på den og begynne å jobbe, eller når du ønsker å gi malen til noen andre. (! Spesielt på tvers av flere filer). Absolutte stier kan være en reell smerte å oppdatere hver gang du ønsker å starte et prosjekt
Hvis du vil angi kildebanen gå til Fil > Publish Innstillinger og klikk på kategorien Flash. Nå klikker du på knappen Innstillinger ved siden av Script dropdown for å åpne Avansert Actionscript 3.0 innstillinger. Sørg for at kildebane er den aktive fanen og klikk på "+" for å legge til './as' bane. Nå kan du legge til teksten "banner.WideSkyscraper" i Dokument Class-feltet. Din vindu skal se slik ut:
Klikk på OK, og dokumentet er nå knyttet til WideSkyscraper klassen du opprettet i trinn 9.
Trinn 12: Sette en relativ Publish Sti
Hvis du vil angi publisere banen, gå til Fil > Publish Innstillinger og klikk på kategorien formater. Vi trenger ikke HTML-filen, så fjerner merket i denne boksen. I publisere banen for SWF, målrette /www /mappe i prosjektmappen som vist nedenfor. Hvis alt ser riktig ut, klikker du på OK. Kompilert swf vil nå bli satt i /www /mappen når du forhåndsviser eller publiserer det.
Det er litt mer info om dette i denne Quick Tips screencast.
Trinn 13 : hovedtidslinjens
For noen grunn, noen annonse betjener systemer krever det første bildet av filmen for å være blank (Eyeblaster er et eksempel på dette), eller å importere sine klasser /inkludere deres Action på det første bildet . Ofte Flash utvidelser du kan installere for disse annonsevisning systemer vil nekte å pakke filen hvis du ikke overholder denne bestemmelsen.
Det er der init () -funksjonen du opprettet i dokumentet klassen tidligere kommer . i å sikre vår mal kan brukes i denne situasjonen, har vi tenkt å lage en to ramme tidslinje med den første rammen blank, den andre inneholder en stop action og et kall til init () -funksjonen som vist nedenfor:
Hvis du kompilere denne filen nå skal du få følgende i utdatapanelet som bekrefter din WideSkyscraper dokumentet klasse og Banner basisdokumentet klassen arbeider:
WideSkyscraper klasse initializedBanner klassen initialisert
Trinn 14: Opprette et bibliotek Symbol Class
Nå skal vi lage et bibliotek symbol for å holde banneret kreative, enten det er en animasjon eller et grensesnitt. Gå til Sett > New Symbol og gi den navnet "kreative", sjekk Export for Actionscript og gi den klassen "Creative". Kontroller at typen er Movie Clip og klikk OK
Nå kan du legge noen eksempelteksten på scenen som vist nedenfor, slik at du kan se noe når du legger den til scenen i koden senere.
Og det er alt vi trenger fra FLA fil! Gå videre og skape de andre .FLAs for The Medium rektangel (300 bred x 250 høy) og The Leaderboard (728 bred x 90 tall). Med dette på plass, kan vi besøker vår Banner dokument klasse og begynne å legge kjernefunksjonalitet på tvers av alle disse bannere
Trinn 15:. Legge til en bakgrunns Sprite
Nesten alle retningslinjer banner råde deg å plassere en solid bakgrunnsfarge i Flash-fil som Stage bakgrunnsfarge kan overskrives når Flash objektet er innebygd i en HTML-side. Snarere enn å gå inn i hver FLA og tegne en figur på scenen, kan vi sentralisere denne oppgaven i kode. Åpne opp din Banner klasse og oppdatere filen for å reflektere koden vist nedenfor:
pakke banner {import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Graphics; public class Banner strekker MovieClip {//Konstanter: privat konst BG_COLOR: Number = 0x0E0E0E; //Offentlige Egenskaper: //private eiendommer: privat Var config: Object; //Initialisering: offentlig funksjon Banner (config: Object = null): void {} //offentlige metoder: offentlig funksjon init (): void {trace ("Banner klasse initialisert"); //Opprett bakgrunn Var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); } //Beskyttede Metoder:}}
La oss oppsummere de endringene vi har gjort i Banner klassen.
Lagt til en konstant BG_COLOR og tildelt en heksadesimal verdi.
Har laget en bg sprite og tegnet et rektangel med et fyll av BG_COLOR som dekker hele scenen.
Lagt bg til listevisning.
Nå er alt du trenger å gjøre er å endre BG_COLOR verdi for å få riktig farge bakgrunn i alle dine bannere
Trinn 16:. Legge til Vis liste
Nå må vi legge Creative symbol som vi opprettet i trinn 14 til listevisning som dette vil være den beholder for kreativ utførelse. Dette er veldig enkelt å gjøre, bare oppdatere init () -funksjonen til dette:
//Offentlige Metoder: offentlig funksjon init (): void {trace ("Banner klasse initialisert"); //Opprett bakgrunn Var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); //Legg Creative Var kreativ: Creative = new Creative (); addChild (kreative);}
Trinn 17: Legge til en klikkbar området
En annen vanlig kravet er for banneret er klikkbare området for å åpne et nytt vindu basert på en "clickTAG" variable gått fra HTML-side når Flash objektet er innebygd. La oss lage et verktøy klasse for å håndtere dette for oss. I Flash prosjektpanelet navigere til /as /banner /mappe og opprette en ny undermappe kalt /util /. Opprett en ny klasse i her kalt 'ClickArea' og kode dette som vist nedenfor:
pakke banner.util {import flash.display.Sprite; import flash.display.Graphics; import flash.display.Stage; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; public class ClickArea strekker Sprite {//private eiendommer: privat Var clickthroughURL: String; //Initialisering: offentlig funksjon ClickArea (loaderInfo: Object, scene: Stage) {//Lag klikkbare området this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); this.graphics.endFill (); //Bestem klikk URL (ved å sjekke kjente navnekonvensjoner) if (loaderInfo.parameters.clicktag = null) {clickthroughURL = loaderInfo.parameters.clicktag; } Else if (loaderInfo.parameters.clickTag = null) {clickthroughURL = loaderInfo.parameters.clickTag; } Else if (loaderInfo.parameters.clickTAG = null) {clickthroughURL = loaderInfo.parameters.clickTAG; } //Legg knappen oppførsel this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, falsk, 0, true); } //Offentlige Metoder: //Beskyttede Metoder: privat funksjon mouseClickHandler (e: MouseEvent): void {if (! ClickthroughURL = null) {navigateToURL (ny URLRequest (clickthroughURL), "_ blank"); } Else {trace ("Klikk"); }}}}
La oss raskt oppsummere hva ClickArea klassen gjør.:.
Er basert på Sprite klasse
ClickArea konstruktør funksjonen krever to variabler, den loaderInfo Object og Stage. Vi vil passere disse i fra vår Banner dokumentet klasse.
Legger oppførsel på museklikk som lanserer en clickthroughURL i et nytt vindu eller sender ut et spor hvis ingen URL er tilgjengelig. Dette er nyttig når du tester i Flash IDE.
Nå åpner opp Banner klasse igjen og legge import banner.util.ClickArea Vi legger grunnleggende av banner utvikling i denne klassen, men den virkelige verdien her er at vi legger disse til alle våre bannere i en sentralisert klasse. Noen vanlige oppgaver du finne deg selv gjør gjentatte ganger i bannere kan legges inn her for å frigjøre tid til å lage den unike animasjon eller samhandling banneret kreative har Med all vår kode pent organisert, åpne de enkelte .FLAs og publisere dem begynner å føle seg som en problemfri. Den gode nyheten er at vi kan automatisere dette også. Gå til prosjektpanelet og sjekk tickbox ved siden av hver banner FLA-format (hvis du ikke kan se dem i denne listen, klikk på rullegardin med Gear-ikonet og velg Oppdater) som vist nedenfor: Nå du kan publisere alle dine bannere til /www /mappe du konfigurerte i trinn 12 ved å klikke på nedtrekksmenyen med Gear-ikonet og velge Publish Prosjekt Det siste elementet vi trenger for å fullføre for å fullføre vår banner prosjektmal er å skape en HTML-side til å presentere dem på slik at de kan vises til en klient enkelt. Last ned SWFObject og sted swfobject.js i /www /mappe, og deretter opprette en HTML-fil i editoren du ønsker og skrive koden vist nedenfor: Du kan lese mer om hvordan du bruke SWFObject i den elektroniske dokumentasjonen, men la oss raskt dekke de viktigste tingene vi gjør her. Nå lagre denne filen som index.html i /www /mappe. Du kan nå forhåndsvise bannere i en nettleser eller laste opp denne mappen et sted for din klient å se: La oss avslutte med å gjennomgå vår befolket mappestrukturen og sikre alle filene er på riktig sted: Du har nå et prosjekt mal med. Denne opplæringen er egentlig bare starten. Identifisere gjentakende oppgaver i banner prosjekter og skreddersy din prosjektmalen for å løse dem å gjøre det fart på arbeidsflyten så mye som mulig. Utvide på det ved å inkludere dine favoritt lette rammer (TweenNano er flott for manus animasjon) og biblioteker så favorittverktøyene er på fingertuppene når du starter din neste prosjekt. Hvis du bruker Subversion eller noen annen form for kilde kontroll, vil dette være et stort prosjekt for å inkludere i depotet ditt, slik at du kan forbedre på det over tid og sjekk ut den siste revisjonen for hver banner prosjekt du starter. Fikk ideer om hvordan dette kan forbedres eller kommentarer om problemer som hemmer din banner utvikling? Bli med i diskusjonen under! Anmeldelser
under liste av Flash-klasse import og oppdatere init () -funksjonen på å bruke ClickArea og legge den til i listen skjerm som vist nedenfor:
//Public Metoder: offentlig funksjon init (): void {trace ("Banner klasse initialisert"); //Opprett bakgrunn Var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); //Legg Creative Var kreativ: Creative = new Creative (); addChild (kreative); //Opprett klikkbare området Var clickArea: ClickArea = new ClickArea (loaderInfo, scene); addChild (clickArea);}
Trinn 18:. Publisere .FLAs
Trinn 19:. HTML Presentasjon Page
<! DOCTYPE html PUBLIC "- //W3C //DTD XHTML! 1.0 Transitional //EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml "> < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > Banner signoff Mal < /title > < style type = "text /css" media = "screen" > body {padding: 60px; } .banner {Padding: 0 40px 40px 0; float: left; display: block; } ≪ /style > < script src = "swfobject.js" type = "text /javascript" > < /script > < script type = "text /javascript" > Var FlashVars = {clickTag: "http://www.hornergraphic.com/"} swfobject.embedSWF ("160x600.swf", "wide_skyscraper", "160", "600", "9", falske, FlashVars); swfobject.embedSWF ("300x250.swf", "utstillingsvindu", "300", "250", "9", falske, FlashVars); swfobject.embedSWF ("728x90.swf", "Leaderboard", "728", "90", "9", falske, FlashVars); < /script > < /head > < body > < div class = "banner" > < div id = "wide_skyscraper" > < /div > < /div > < div class = "banner" > < div id = "showcase" > < /div > < /div > < div class = "banner" > < div id = "topplisten" > < /div > < /div > < /body > < /html >
Erklærte to css stiler for å skape litt plass rundt på siden og de enkelte bannere
Inkludert swfobject.js, skaper en test clickTag å passere på våre bannere og skrive SWFObject embed uttalelser.
Definere en div struktur og tildele en unik id til en div for SWFObject å dynamisk erstatte med våre SWF-fil .
Trinn 20: omtale Ditt Prosjekt filstruktur
Et sett med Photoshop maler for å produsere kunstverk i
< li> Et sett av Flash maler til å importere bibliotek eiendeler inn og lage tidslinjeanimasjoner i.
Et dokument klassestrukturen som lar deg implementere funksjonalitet i en eller alle bannerformater.
En måte å kompilere alle dine bannere på en gang.
En HTML-side for å vise alle bannerne sammen for deg selv og din klient.
Konklusjon