Share
Flash-bannerontwikkeling wordt vaak geplaagd door meerdere bestanden, gefragmenteerde code en rommelige tijdlijnen. Deze tutorial laat je zien hoe je een projectsjabloon kunt maken die als een solide basis dient om snel krachtige flash-banners te ontwikkelen, zodat je je kunt concentreren op het tot leven brengen van het creatieve idee.
Bij het bouwen van meerdere flash-banners is een goed bestandsbeheer essentieel om uw workflow efficiënt te houden. Start uw banner-projectsjabloon door de hieronder getoonde mappenstructuur te maken:
Nu gaan we een reeks Photoshop-sjablonen maken die kunnen worden gebruikt bij het ontwerpen van een flashbannercampagne. (Maak je geen zorgen als je geen Photoshop hebt, ga door naar stap 5). Het Interactive Advertising Bureau onderhoudt richtlijnen voor advertentieblokken met de gemeenschappelijke dimensies van advertentieblokken (banners). Voor deze tutorial gaan we de drie meest voorkomende maken:
Laten we beginnen met het maken van de sjabloon voor The Wide Skyscraper. Open Photoshop en selecteer Bestand> Nieuw. Configureer de eigenschappen voor uw nieuwe Photoshop-document, zoals hieronder weergegeven:
Om de lagen in uw Photoshop-bestand net zo gestructureerd te houden als uw projectmappen wanneer het tijd is om een bannerontwerp te maken, gaan we Lagengroepen toevoegen aan het sjabloonbestand om kernontwerpelementen op te slaan.
Gebruik de nieuwe groep in het menu in de rechterbovenhoek van het deelvenster Lagen om de structuur van de laaggroep aan te maken die hieronder wordt weergegeven:
De lagengroep 'Achtergrond' bevat te allen tijde ontwerpelementen die zich op de achtergrond van uw banner bevinden, bijvoorbeeld een kleur of een textuur.
De 'Voorgrond'-laaggroep bevat te allen tijde ontwerpelementen die zich op de voorgrond van uw banner bevinden, zoals een bedrijfslogo.
De 'Frame'-laaggroepen bevatten ontwerpelementen van de belangrijkste momenten in uw reeks of interactie met de bannervlag. Dit kan sleutelberichten, kritieke punten van een animatie of gebruikersinterfaces omvatten.
Uw sjabloon is nu klaar om op te slaan. Ga naar Bestand> Opslaan als en navigeer naar de map 'ontwerp' in de structuur van uw projectmap. Geef het bestand een naam volgens de afmetingen, in dit geval '160x600' en zorg ervoor dat het in Photoshop-indeling is, met de lagen aangevinkt.
Dat is je eerste fantastische flash-bannersjabloon gemaakt! Herhaal deze stappen voor The Medium Rectangle (300px wide x 250px tall) en The Leaderboard (728px x 90px tall). Met deze Photoshop-sjablonen voltooid, zijn we klaar om naar Flash te gaan.
Laten we beginnen met het maken van een Flash-project, zodat u kunt navigeren in uw bestandsstructuur in Flash IDE. Open Flash CS4 (het proces lijkt sterk op Flash CS3, hoewel de Flash-interface anders is) en ga naar Venster> Andere panelen> Project. Klik in het paneel Project op de vervolgkeuzelijst Projecten en selecteer Nieuw project. Specificeer de projectnaam als 'BannerTemplate'.
Ga voor de hoofdmap naar de map / banner_template / development / map die u in stap 1 hebt gemaakt met behulp van het mappictogram. Zorg ervoor dat de ActionScript-versie is ingesteld op ActionScript 3.0 en klik op Project maken.
Nu gaan we de Flash Project-eigenschappen instellen om Flash te helpen het werk uit te voeren door onze lessen voor ons uit te zetten. Klik op de vervolgkeuzelijst met het tandwielpictogram in de rechterbovenhoek van het projectvenster en selecteer Projecteigenschappen. Zoek in het veld 'Save classes in' naar de map / as / die u in stap 1 hebt gemaakt en klik op OK.
Als u de laatste stap correct hebt uitgevoerd, ziet u dat er nu weinig codehaakjes op uw / as / mappictogram staan. We gaan nu een map maken voor alle klassen die specifiek zijn voor onze bannersjablonen. Selecteer de map / as / en klik op het pictogram van de nieuwe map onder in het deelvenster. Typ in het dialoogvenster dat verschijnt de naam van uw map 'banner' en klik op OK.
Nu (eindelijk!) Bent u klaar om uw bannerbasisdocumentklasse te maken. Als u niet vertrouwd bent met het gebruik van documentklassen (of klassen in het algemeen), is het een goed idee om eerst deze snelle tip te lezen.
Klik met de / as / banner / map geselecteerd op het pictogram Create Class onder in het paneel. Voeg in het veld Klasse de klassenaam 'Banner' toe achter de naam van het pakket 'banner'. en klik op Klasse maken.
Nu moeten we dit klassenstub nemen en het wijzigen in een functionele basisdocumentklasse. Voeg aan ActionScript toe om de onderstaande code weer te geven:
Accentsconagua
pakketbanner import flash.display.MovieClip; public class Banner breidt MovieClip uit // Constanten: // Openbare eigenschappen: // Privé-eigenschappen: privé var-configuratie: Object; // Initialisatie: public function Banner (config: Object = null): void // Public Methods: public function init (): void trace ("Banner class initialized"); // Beschermde methoden: Laten we snel de wijzigingen dekken die we hebben aangebracht in de bannerklasse:
Op dit moment doet dit niet veel, maar het belangrijkste hier is om een klassenstructuur te bouwen die ons in staat stelt bannerlogica te centraliseren en herhaling van code te verminderen. Vanaf hier kunnen we de Banner-klasse nu uitbreiden om onze afzonderlijke bannerdocumentklassen te maken.
Laten we beginnen met het klassenbestand voor The Wide Skyscraper. Maak een klasse "WideSkyscraper" in uw Flash-project / as / banner / map op dezelfde manier als voor de klasse "Banner". Neem de gegenereerde klasse-stubcode en voeg deze toe zodat het er zo uitziet:
pakketbanner public class WideSkyscraper breidt banner uit // Constanten: // Openbare eigenschappen: // Privé-eigenschappen: privé var-configuratie: Object; // Initialisatie: openbare functie WideSkyscraper () super (); // Public Methods: public override function init (): void trace ("WideSkyscraper class initialized"); super.init (); // Beschermde methoden: Laten we de wijzigingen bekijken die we hebben aangebracht in de klasse WideSkyscraper:
Herhaal nu deze stap om de bannerdocumentklassen voor de MediumRectangle en het Leaderboard te maken. Nu dit is voltooid, is onze documentklasse-structuur nu op zijn plaats.
Nu kunnen we beginnen met het maken van de .FLA-bestanden die we nodig hebben. Nogmaals, laten we beginnen met het maken van de sjabloon voor The Wide Skyscraper (160x600).
Open Flash CS4 en selecteer Bestand> Nieuw. Selecteer "Flash-bestand (ActionScript 3.0)" als Type en klik op OK. Bewerk de instellingen Publiceren en Eigenschappen in het deelvenster Eigenschappen zoals hieronder weergegeven:
Bewaar nu uw bestand als "160x600.fla" in de / ontwikkeling / map van uw project.
We gaan nu een relatief bronpad en een relatief publiceerpad instellen. Dit wordt belangrijk wanneer u een kopie van uw bannersjabloonproject wilt maken, de naam ervan wilt wijzigen en wilt gaan werken of wanneer u de sjabloon aan iemand anders wilt geven. Absolute paden kunnen een echte pijn zijn om te updaten (vooral over meerdere bestanden!) Elke keer dat je een project wilt starten.
Ga naar Bestand> Publicatie-instellingen en klik op het tabblad Flash om het bronpad in te stellen. Klik nu op de knop Instellingen naast de vervolgkeuzelijst Script om het venster Geavanceerde ActionScript 3.0-instellingen te openen. Zorg ervoor dat Bronpad het actieve tabblad is en klik op de '+' om het pad './as' toe te voegen. Nu kunt u de tekst 'banner.WideSkyscraper' toevoegen aan het veld Documentklasse. Uw venster zou er als volgt uit moeten zien:
Klik op OK en uw document is nu gekoppeld aan de klasse WideSkyscraper die u in stap 9 hebt gemaakt.
Als u het publicatiepad wilt instellen, gaat u naar Bestand> Publicatie-instellingen en klikt u op het tabblad Indelingen. We hebben het HTML-bestand niet nodig, dus schakel dit selectievakje uit. In het publicatiepad voor de SWF target u de / www / map in uw projectmap, zoals hieronder wordt weergegeven. Als alles er goed uitziet, klik je op OK. Uw gecompileerde swf wordt nu in de map / www / geplaatst wanneer u een voorbeeld bekijkt of publiceert.
Er is wat meer informatie hierover in deze Quick Tip-screencast.
Om een of andere reden vereisen sommige systemen voor advertentieweergave dat het eerste frame van uw film leeg is (Eyeblaster is hiervan een voorbeeld), of om hun klassen te importeren / hun ActionScript op het eerste frame op te nemen. Vaak zullen de Flash-extensies die u voor deze advertentieweergavesystemen kunt installeren, weigeren uw bestand te verpakken als u zich niet aan deze voorwaarde houdt.
Dit is waar de init () -functie die u in uw documentklasse hebt gecreëerd eerder binnenkomt. Om ervoor te zorgen dat onze sjabloon in deze situatie kan worden gebruikt, gaan we een tijdlijn met twee frames maken met het eerste frame leeg, het tweede met een stop actie en een aanroep van de init () functie zoals hieronder getoond:
Als je dit bestand nu compileert, zou je het volgende moeten krijgen in je Output-paneel, dat bevestigt dat je WideSkyscraper-documentklasse en de bannerbasisdocumentklasse werken:
WideSkyscraper klasse geïnitialiseerd Banner klasse geïnitialiseerd
Nu gaan we een bibliotheeksymbool maken om de banneradvertentie vast te houden, of het nu een animatie of een interface is. Ga naar Insert> New Symbol en geef het de naam "creative", vink Exporteren voor ActionScript aan en geef het de klasse "Creative". Controleer of het type filmclip is en klik op OK.
Voeg nu wat tijdelijke tekst toe op het podium, zoals hieronder weergegeven, zodat je iets kunt zien wanneer je het later toevoegt aan je stage in code:
En dat is alles wat we nodig hebben van het .FLA-bestand! Ga je gang en maak de andere FLA's voor The Medium Rectangle (300 breed x 250 hoog) en The Leaderboard (728 breed x 90 hoog). Als dit is gelukt, kunnen we onze Banner-documentklasse opnieuw bekijken en beginnen met het toevoegen van kernfunctionaliteit aan al deze banners.
Bijna alle bannerrichtlijnen adviseren u om een degelijke achtergrondkleur in uw Flash-bestand te plaatsen, omdat de achtergrondkleur van het werkgebied kan worden overschreven wanneer het Flash-object is ingesloten in een HTML-pagina. In plaats van elke FLA in te gaan en een vorm op het podium te tekenen, kunnen we deze taak in de code centraliseren. Open uw bannerklasse en werk het bestand bij met de onderstaande code:
pakketbanner import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Graphics; public class Banner verlengt MovieClip // Constanten: private const BG_COLOR: Number = 0x0E0E0E; // Public Properties: // Private Properties: private var config: Object; // Initialisatie: public function Banner (config: Object = null): void // Public Methods: public function init (): void trace ("Banner class initialized"); // Maak achtergrond var bg: Sprite = nieuwe Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, Stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Beschermde methoden: Laten we de wijzigingen die we hebben aangebracht in de Banner-klasse herhalen:
Nu hoeft u alleen de BG_COLOR-waarde te wijzigen om de juiste kleurenachtergrond in al uw banners te krijgen.
Nu moeten we het Creative-symbool dat we in stap 14 hebben gemaakt toevoegen aan de weergavelijst, omdat dit de container is voor de creatieve uitvoering. Dit is echt gemakkelijk om te doen, werk gewoon de init () functie bij:
// Public Methods: public function init (): void trace ("Banner class initialized"); // Maak achtergrond var bg: Sprite = nieuwe Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, Stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Creëren Creative var creative: Creative = new Creative (); addChild (creatieve); Een andere veel voorkomende eis is dat het klikbare gebied van de banner een nieuw venster opent op basis van een "clicktag" -variabele die is doorgegeven vanaf de HTML-pagina wanneer het Flash-object is ingesloten. Laten we een hulpprogramma maken om dit voor ons te regelen. Ga in het deelvenster Flash-project naar uw / as / banner / map en maak een nieuwe submap met de naam / util /. Maak hier een nieuwe klasse met de naam 'ClickArea' en codeer deze zoals hieronder getoond:
package 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 breidt Sprite uit // Private Properties: private var clickthroughURL: String; // Initialisatie: openbare functie ClickArea (loaderInfo: Object, stage: Stage) // Maak aanklikgebied this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, Stage.stageHeight); this.graphics.endFill (); // Bepaal de doorklik-URL (door bekende naamgevingsconventies te controleren) 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; // Knopgedrag toevoegen this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, false, 0, true); // Openbare methoden: // Beschermde methoden: privéfunctie mouseClickHandler (e: MouseEvent): void if (clickthroughURL! = Null) navigateToURL (nieuwe URLRequest (clickthroughURL), "_ blank"); else trace ("Clickthrough"); Laten we snel samenvatten wat de klasse ClickArea aan het doen is:
Open nu je bannerklasse opnieuw en voeg toe import banner.util.ClickArea onder uw lijst met Flash-klasseimports en werk de init () -functie bij om de ClickArea te instantiëren en toe te voegen aan de weergavelijst zoals hieronder getoond:
// Public Methods: public function init (): void trace ("Banner class initialized"); // Maak achtergrond var bg: Sprite = nieuwe Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, Stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Creëren Creative var creative: Creative = new Creative (); addChild (creatieve); // Maak klikbaar gebied var clickArea: ClickArea = new ClickArea (loaderInfo, stage); addChild (clickArea); We voegen de basisprincipes van bannerontwikkeling toe aan deze klasse, maar de echte waarde is dat we deze aan al onze banners toevoegen in één gecentraliseerde klasse. Alle gebruikelijke taken die u herhaaldelijk in banners aantreft, kunnen hier worden toegevoegd om uw tijd vrij te maken voor het maken van de unieke animatie of interactie die de banneradvertentie heeft.
Met al onze code goed georganiseerd, begint het openen van de individuele FLA's en publiceren ervan als een gedoe. Het goede nieuws is dat we dit ook kunnen automatiseren. Ga naar je Project-paneel en vink het vinkje naast elke banner-FLA-indeling aan (als je ze niet in deze lijst kunt zien, klik dan op de vervolgkeuzelijst met het tandwielpictogram en selecteer Vernieuwen) zoals hieronder wordt weergegeven:
Nu kun je al je banners publiceren naar de / www / map die je in stap 12 hebt geconfigureerd door op de vervolgkeuzelijst met het tandwielpictogram te klikken en Project publiceren te selecteren.
Het laatste element dat we moeten invullen om onze bannerprojectsjabloon te voltooien, is een HTML-pagina te maken om ze te presenteren zodat ze eenvoudig aan een klant kunnen worden getoond. Download SWFObject en plaats swfobject.js in de map / www / en maak vervolgens een HTML-bestand in de editor van uw keuze en schrijf de onderstaande code:
Banner signoff-sjabloon
U kunt meer lezen over het gebruik van SWFObject in de online documentatie, maar laten we snel de belangrijkste dingen bespreken die we hier doen:
Bewaar dit bestand nu als index.html in de / www / map. U kunt nu een voorbeeld van uw banners weergeven in een webbrowser of deze map ergens uploaden zodat uw klant het volgende kan bekijken:
Laten we afsluiten door onze structuur van de gevraagde map te bekijken en ervoor te zorgen dat alle bestanden zich op de juiste plaats bevinden:
U hebt nu een projectsjabloon met:
Deze tutorial is eigenlijk pas het begin. Identificeer terugkerende taken in uw bannerprojecten en pas uw projectsjabloon aan om deze aan te pakken, zodat uw workflow zo veel mogelijk wordt versneld. Breid je uit door je favoriete lichtgewicht frameworks op te nemen (TweenNano is geweldig voor scripted animation) en bibliotheken, zodat je favoriete tools binnen handbereik zijn wanneer je je volgende project start.
Als je Subversion of een ander soort bronbeheer gebruikt, zou dit een geweldig project zijn om in je repository op te nemen, zodat je het na verloop van tijd kunt verbeteren en de laatste revisie kunt bekijken voor elk bannerproject dat je start.
Hebt u ideeën over hoe dit kan worden verbeterd of kunt u opmerkingen maken over problemen die uw bannerontwikkeling belemmeren? Neem deel aan de onderstaande discussie!
