Share
Lo sviluppo di banner Flash è spesso afflitto da più file, codice frammentato e timeline disordinati. Questo tutorial ti mostrerà come creare un modello di progetto per fungere da solida base che ti aiuterà a sviluppare rapidamente robusti banner flash, liberandoti e concentrandoti sulla realizzazione dell'idea creativa.
Quando si creano più banner flash, una buona gestione dei file è essenziale per mantenere efficiente il flusso di lavoro. Avvia il modello di progetto banner creando la struttura di cartelle mostrata di seguito:
Ora stiamo per creare un set di modelli Photoshop da utilizzare quando si inizia a progettare una campagna banner flash. (Se non hai Photoshop non preoccuparti, puoi saltare al passaggio 5). L'Interactive Advertising Bureau mantiene le linee guida delle unità pubblicitarie che elencano le dimensioni comuni delle unità pubblicitarie (banner). Ai fini di questo tutorial, creeremo i tre più comuni:
Iniziamo creando il modello per The Wide Skyscraper. Apri Photoshop e seleziona File> Nuovo. Configura le proprietà per il tuo nuovo documento di Photoshop come mostrato di seguito:
Per mantenere i livelli nel tuo file Photoshop strutturati come le cartelle del tuo progetto quando è il momento di creare un design per banner, aggiungeremo gruppi di livelli nel file del modello per conservare gli elementi di base del progetto.
Usando Nuovo gruppo dal menu nell'angolo in alto a destra del pannello Livelli crea la struttura del gruppo di livelli mostrata di seguito:
Il gruppo di livelli "Sfondo" conterrà elementi di design che sono sempre sullo sfondo del tuo banner, ad esempio un colore o una trama.
Il gruppo di livelli "Primo piano" conterrà elementi di progettazione sempre in primo piano sul tuo banner, ad esempio un logo aziendale.
I gruppi di livelli "Cornice" terranno gli elementi di progettazione dei momenti chiave della sequenza o interazione del banner Flash. Ciò potrebbe includere messaggi chiave, punti critici di un'animazione o interfacce utente.
Ora il tuo modello è pronto per il salvataggio. Vai su File> Salva con nome e vai alla cartella 'design' nella struttura delle cartelle del progetto. Assegna un nome al file in base alle sue dimensioni, in questo caso '160x600' e assicurati che sia in formato Photoshop, con i Livelli selezionati.
Questo è il tuo primo fantastico modello di banner flash creato! Ripeti questi passaggi per Il rettangolo medio (300 px di larghezza x 250 px di altezza) e La classifica (728 pixel x 90 px di altezza). Con questi modelli Photoshop completati, siamo pronti per passare a Flash.
Iniziamo creando un progetto Flash in modo da poter navigare nella struttura dei file in Flash IDE. Apri Flash CS4 (il processo è molto simile in Flash CS3 anche se l'interfaccia Flash è diversa) e vai a Finestra> Altri pannelli> Progetto. Nel pannello Progetto, fai clic sul menu a discesa Progetti e seleziona Nuovo progetto. Specificare il nome del progetto come "BannerTemplate".
Per la cartella principale, accedere alla cartella / banner_template / development / creata nel passaggio 1 utilizzando l'icona della cartella. Assicurati che la versione di ActionScript sia impostata su ActionScript 3.0 e fai clic su Crea progetto.
Ora imposteremo le proprietà del progetto Flash per consentire a Flash di eseguire il lavoro di soppressione delle classi per noi. Fai clic sul menu a discesa con l'icona a forma di ingranaggio nell'angolo in alto a destra del pannello Progetto e seleziona Proprietà progetto. Per il campo "Salva classi in", vai alla cartella / come / creata nel passaggio 1 e fai clic su OK.
Se hai eseguito correttamente l'ultimo passaggio, dovresti vedere alcune parentesi di codice ora sull'icona / come / cartella. Ora creeremo una cartella per tutte le classi specifiche per i nostri modelli di banner. Seleziona la cartella / come / e fai clic sull'icona della nuova cartella nella parte inferiore del pannello. Nella finestra di dialogo che appare nominare la cartella 'banner' e fare clic su OK.
Ora (finalmente!) Sei pronto per creare la tua classe di documento di base banner. Se non hai familiarità con l'utilizzo di classi di documenti (o classi in generale), è una buona idea leggere prima questo suggerimento.
Con la cartella / as / banner / selezionata, fare clic sull'icona Crea classe nella parte inferiore del pannello. Nel campo Classe aggiungi il nome della classe 'Banner' dopo il nome del pacchetto 'banner'. e fare clic su Crea classe.
Ora dobbiamo prendere questo stub di classe e modificarlo in una classe di documento base funzionale. Aggiungi a ActionScript per riflettere il codice mostrato di seguito:
Accentsconagua
pacchetto banner import flash.display.MovieClip; public class Banner estende MovieClip // Costanti: // Proprietà pubbliche: // Proprietà private: private var config: Object; // Inizializzazione: funzione pubblica Banner (config: Object = null): void // Metodi pubblici: public function init (): void trace ("Classe banner inizializzata"); // Protected Methods: Copriamo rapidamente le modifiche apportate alla classe Banner:
In questo momento non sta facendo molto, ma la cosa importante qui è costruire una struttura di classe che ci permetta di centralizzare la logica del banner, riducendo la ripetizione del codice. Da qui, ora possiamo estendere la classe Banner per creare le nostre singole classi di documenti banner.
Iniziamo con il file di classe per The Wide Skyscraper. Crea una classe "WideSkyscraper" nel tuo progetto Flash / come / banner / cartella proprio come hai fatto per la classe "Banner". Prendi il codice stub della classe generato e aggiungilo in modo che assomigli a questo:
banner pubblicitario public class WideSkyscraper estende Banner // Costanti: // Proprietà pubbliche: // Proprietà private: private var config: Object; // Inizializzazione: funzione pubblica WideSkyscraper () super (); // Metodi pubblici: funzione di override pubblica init (): void trace ("Classe WideSkyscraper inizializzata"); super.init (); // Protected Methods: Esaminiamo le modifiche apportate alla classe WideSkyscraper:
Ora ripeti questo passaggio per creare le classi del documento banner per MediumRectangle e Leaderboard. Fatto questo, la struttura della nostra classe di documenti è ora disponibile.
Ora possiamo iniziare a creare i file .FLA di cui abbiamo bisogno. Di nuovo, iniziamo creando il modello per The Wide Skyscraper (160x600).
Apri Flash CS4 e seleziona File> Nuovo. Seleziona "File Flash (ActionScript 3.0)" come Tipo e fai clic su OK. Nel pannello Proprietà, modifica le impostazioni Pubblica e Proprietà come mostrato di seguito:
Ora salva il tuo file come "160x600.fla" nella cartella / development / del tuo progetto.
Ora imposteremo un percorso di origine relativo e un percorso di pubblicazione relativo. Questo diventa importante quando vuoi fare una copia del tuo progetto di modello di banner, rinominarlo e iniziare a lavorare, o quando vuoi dare il modello a qualcun altro. I percorsi assoluti possono essere un vero problema da aggiornare (soprattutto su più file!) Ogni volta che si desidera avviare un progetto.
Per impostare il percorso di origine, vai su File> Impostazioni pubblicazione e fai clic sulla scheda Flash. Ora fai clic sul pulsante Impostazioni accanto al menu a discesa Script per aprire la finestra Impostazioni avanzate di ActionScript 3.0. Assicurati che il percorso di origine sia la scheda attiva e fai clic su "+" per aggiungere il percorso "./as". Ora puoi aggiungere il testo "banner.WideSkyscraper" nel campo Document Class. La tua finestra dovrebbe apparire così:
Fai clic su OK e il tuo documento è ora collegato alla classe WideSkyscraper creata nel passaggio 9.
Per impostare il percorso di pubblicazione, vai su File> Impostazioni pubblicazione e fai clic sulla scheda Formati. Non abbiamo bisogno del file HTML, quindi deseleziona questa casella. Nel percorso di pubblicazione per il file SWF, selezionare la cartella / www / nella cartella del progetto come mostrato di seguito. Se tutto sembra corretto, fare clic su OK. Il tuo swf compilato verrà ora inserito nella cartella / www / quando lo visualizzi in anteprima o lo pubblichi.
C'è un po 'più di informazioni su questo screencast di Quick Tip.
Per qualche motivo, alcuni sistemi di pubblicazione di annunci richiedono che il primo fotogramma del film sia vuoto (Eyeblaster ne è un esempio), o per importare le loro classi / includere il proprio ActionScript sul primo fotogramma. Spesso le estensioni Flash che puoi installare per questi sistemi di pubblicazione di annunci rifiutano di impacchettare il tuo file se non rispetti questa clausola.
È qui che entra in gioco la funzione init () creata nella classe del documento. Per garantire che il nostro modello possa essere utilizzato in questa situazione, creeremo una timeline di due fotogrammi con il primo fotogramma vuoto, il secondo contenente uno stop azione e una chiamata alla funzione init () come mostrato di seguito:
Se si compila questo file ora si dovrebbe ottenere quanto segue nel pannello Output che conferma la classe del documento WideSkyscraper e la classe del documento base banner funziona:
Classe WideSkyscraper inizializzata Classe banner inizializzata
Ora creeremo un simbolo di libreria per contenere la creatività del banner, che si tratti di un'animazione o di un'interfaccia. Vai a Inserisci> Nuovo simbolo e assegnagli il nome "creatività", seleziona Esporta per ActionScript e assegnagli la classe "Creatività". Assicurati che il tipo sia Movie Clip e fai clic su OK.
Ora aggiungi un testo segnaposto sullo stage come mostrato di seguito in modo da poter vedere qualcosa quando lo aggiungi al tuo stage in codice successivamente:
E questo è tutto ciò di cui abbiamo bisogno dal file .FLA! Vai avanti e crea gli altri .FLA per The Medium Rectangle (300 wide x 250 high) e The Leaderboard (728 wide x 90 tall). Con questo, possiamo rivisitare la nostra classe di documenti Banner e iniziare ad aggiungere funzionalità di base in tutti questi banner.
Quasi tutte le linee guida sullo striscione consigliano di inserire un colore di sfondo solido nel file Flash, in quanto il colore di sfondo dello stage può essere sovrascritto quando l'oggetto Flash è incorporato in una pagina HTML. Anziché accedere a tutti gli elementi .FLA e disegnare una forma sul palco, possiamo centralizzare questo compito nel codice. Apri la tua classe Banner e aggiorna il file per riflettere il codice mostrato di seguito:
pacchetto banner import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Graphics; la classe pubblica Banner estende MovieClip // Costanti: const privato BG_COLOR: Number = 0x0E0E0E; // Proprietà pubbliche: // Proprietà private: private var config: Object; // Inizializzazione: funzione pubblica Banner (config: Object = null): void // Metodi pubblici: public function init (): void trace ("Classe banner inizializzata"); // Crea background var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Protected Methods: Ricapitoliamo le modifiche apportate alla classe Banner:
Ora tutto ciò che devi fare è cambiare il valore di BG_COLOR per ottenere lo sfondo di colore giusto in tutti i tuoi banner.
Ora dobbiamo aggiungere il simbolo della creatività che abbiamo creato nel passaggio 14 all'elenco di visualizzazione poiché questo sarà il contenitore per l'esecuzione della creatività. Questo è veramente facile da fare, basta aggiornare la funzione init () a questo:
// Metodi pubblici: public function init (): void trace ("Classe banner inizializzata"); // Crea background var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Aggiungi creatività var creativa: Creatività = nuova creatività (); addChild (creativo); Un altro requisito comune è che l'area cliccabile del banner apra una nuova finestra basata su una variabile "clicktag" trasferita dalla pagina HTML quando l'oggetto Flash è incorporato. Creiamo una classe di utilità per gestire questo per noi. Nel pannello Progetto Flash, vai alla cartella / come / banner / e crea una nuova sottocartella chiamata / util /. Crea una nuova classe qui chiamata "ClickArea" e codificale come mostrato di seguito:
pacchetto 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 estende Sprite // Proprietà private: private var clickthroughURL: String; // Inizializzazione: public function ClickArea (loaderInfo: Object, stage: Stage) // Crea area cliccabile this.graphics.beginFill (0x00FF00,0); this.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); this.graphics.endFill (); // Determina l'URL di click-through (controllando le convenzioni di denominazione note) 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; // Compressione del pulsante Aggiungi this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, mouseClickHandler, false, 0, true); // Metodi pubblici: // Metodi protetti: private function mouseClickHandler (e: MouseEvent): void if (clickthroughURL! = Null) navigateToURL (new URLRequest (clickthroughURL), "_ blank"); else trace ("Click-through"); Riassumiamo rapidamente cosa sta facendo la classe ClickArea:
Ora apri di nuovo la tua classe Banner e aggiungi import banner.util.ClickArea sotto il tuo elenco di importazioni di classe Flash e aggiorna la funzione init () per creare un'istanza di ClickArea e aggiungerla all'elenco di visualizzazione come mostrato di seguito:
// Metodi pubblici: public function init (): void trace ("Classe banner inizializzata"); // Crea background var bg: Sprite = new Sprite (); bg.graphics.beginFill (BG_COLOR); bg.graphics.drawRect (0,0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); // Aggiungi creatività var creativa: Creatività = nuova creatività (); addChild (creativo); // Crea area cliccabile var clickArea: ClickArea = new ClickArea (loaderInfo, stage); addChild (clickArea); Stiamo aggiungendo i fondamenti di base dello sviluppo di banner in questa classe, ma il vero valore qui è che stiamo aggiungendo questi a tutti i nostri banner in una classe centralizzata. Qualsiasi attività comune che trovi ripetutamente nei banner può essere aggiunta qui per liberare il tuo tempo per creare l'animazione o l'interazione unica che la creatività del banner ha.
Con tutto il nostro codice ben organizzato, aprire i singoli file .LA e pubblicarli sta iniziando a sentirsi come una seccatura. La buona notizia è che possiamo automatizzare anche questo. Vai al pannello Progetto e seleziona la casella accanto a ciascun formato banner .FLOW (se non riesci a vederli in questo elenco, fai clic sul menu a discesa con l'icona a forma di ingranaggio e seleziona Aggiorna) come mostrato di seguito:
Ora puoi pubblicare tutti i tuoi banner nella cartella / www / che hai configurato nel passaggio 12 facendo clic sul menu a discesa con l'icona a forma di ingranaggio e selezionando Pubblica progetto.
L'ultimo elemento che dobbiamo completare per completare il nostro modello di progetto banner è creare una pagina HTML per presentarli in modo che possano essere visualizzati facilmente da un client. Scarica SWFObject e posiziona swfobject.js nella cartella / www /, quindi crea un file HTML nell'editor di tua scelta e scrivi il codice mostrato di seguito:
Banner Signoff Template
Puoi leggere ulteriori informazioni su come utilizzare SWFObject nella documentazione online, ma esaminiamo rapidamente le principali cose che stiamo facendo qui:
Ora salva questo file come index.html nella cartella / www /. Ora puoi visualizzare in anteprima i tuoi banner in un browser web o caricare questa cartella da qualche parte per il tuo cliente per visualizzare:
Terminiamo esaminando la nostra struttura di cartelle popolate e assicurandoci che tutti i file siano nella posizione appropriata:
Ora hai un modello di progetto con:
Questo tutorial è davvero solo l'inizio. Identifica attività ricorrenti nei progetti di banner e personalizza il modello di progetto per affrontarle al fine di velocizzare il tuo flusso di lavoro il più possibile. Prolungalo includendo i tuoi framework leggeri preferiti (TweenNano è ottimo per l'animazione con script) e le librerie in modo che i tuoi strumenti preferiti siano a portata di mano quando avvii il tuo prossimo progetto.
Se si utilizza Subversion o qualche altro tipo di controllo del codice sorgente, questo sarebbe un grande progetto da includere nel repository in modo da poterlo migliorare nel tempo e controllare l'ultima revisione per ogni progetto di banner che si avvia.
Hai idee su come questo potrebbe essere migliorato o commenti su problemi che ostacolano lo sviluppo del tuo banner? Partecipa alla discussione qui sotto!
