Share
Poiché ActionScript 3 diventa un linguaggio più popolare e le funzionalità di Flash Player diventano più avanzate e accessibili, è importante creare un flusso di lavoro comune all'interno dell'azienda in modo che i progetti possano diventare più agili e, soprattutto, essere consegnati in tempo. Uno dei principali problemi con ActionScript 2 era quello di colmare il divario tra il progettista e lo sviluppatore. Ciò ha spesso lasciato gli sviluppatori che si occupavano di FLAs che contenevano centinaia di elementi di librerie con nomi errati e a nessuno piaceva.
Con i progressi di ActionScript 3 e la possibilità di codificare lontano dalla timeline, gli SWC sono diventati elementi comunemente usati su progetti di grandi dimensioni, ma ci sono ancora molte persone là fuori che non sanno cosa sono o come crearli / usarli.
Iniziamo a vedere quali sono effettivamente i SWC. Un SWC [ShockWave Component l'acronimo dice:Sw ~ ick] :) è semplicemente un pacchetto compresso di file generati da Flash IDE. Contengono risorse visive (come MovieClip, pulsanti, grafica e caratteri) e codice. Gli SWC sono in circolazione da Flash MX 2004, ma sono davvero decollati da quando ActionScript 3 è venuto fuori perché prima, come ho detto, si poteva semplicemente tenere tutto nel FLA.
In questo tutorial, ti mostrerò come puoi incorporare e utilizzare risorse visive, caratteri e codice ActionScript.
C'è un argomento semplice e solido per l'utilizzo di SWC: separa il design dallo sviluppo. Flash ha la capacità di influenzare il design degli elementi visivi programmati attraverso i fogli di stile "CSS" (molto simile a Flex) ma la maggior parte dei progettisti del tempo (non tutti) sono scoraggiati dal codice, compreso il semplice CSS. Un altro punto è che i designer progettano. Di solito vengono dati dei frame di scrittura fittizi dai quali poi creano interfacce utente in programmi come Photoshop e Illustrator. Se poi dovessero codificare l'interfaccia, la creazione dei modelli in Photoshop potrebbe essere stata solo una perdita di tempo. Inoltre può richiedere molto tempo e fatica per codificare le interfacce che possono essere facilmente create in IDE visivi come Photoshop e Illustrator.
Tornando al mio punto principale, SWC consente ai progettisti di progettare l'interfaccia, tagliarla e quindi passare un SWC allo sviluppatore che lega tutto insieme, questo crea un flusso di lavoro semplice senza che le persone calpestino le dita degli altri per raggiungere il design corretto.
Diciamo che domani sarai informato su un nuovo progetto in base al quale lavorerai con un team di progettazione. Sarà responsabilità del team di progettazione costruire l'interfaccia includendo la creazione di tutte le piccole cose come gli stati del passaggio del mouse, le animazioni del caricatore, gli angoli arrotondati e le icone. È responsabilità del team di sviluppo quindi creare il progetto e associare anche tutti gli elementi dell'interfaccia utente. Il tempo di progettazione creerebbe tutti gli elementi di cui hanno bisogno, li metterà in un SWC e poi passerà il file al team di sviluppo. Il team di sviluppo può quindi codificare gli elementi dell'interfaccia utente senza doversi preoccupare di importare i font, giocare con i fogli di stile o stare seduti con il designer e programmare l'interfaccia.
Come sottolinea il fantastico articolo di Mario Santos, Adobe ha recentemente rilasciato Flash Catalyst, un IDE che consente di importare file PSD o AI e convertirli in oggetti vettoriali basati su XML, FXG. Questo è sicuramente un passo nella giusta direzione, ma è qualcosa solo implementato in Flash Player 10, di cui c'è solo un tasso di penetrazione del 75%. Ciò significa che quando si lavora su progetti live, è necessario utilizzare Flash Player 9, quindi fino a quando più persone adottano Flash Player 10, gli SWC sono un buon modo per affrontarlo.
Basta parlare, creiamo un SWC. Creerò alcuni elementi grafici in Photoshop e Illustrator e li inserirò nell'IDE di Flash dove li imposterò per la codifica di ActionScript tramite l'utilizzo di SWC. Parlerò anche di un concetto chiamato slicing "scala 9 griglia", quindi accendi il tuo editor di immagini preferito e crea un nuovo file:
Prendiamo alcune forme personalizzate predefinite fornite da Adobe e le incolliamo sulla lavagna:
Quindi, in modo da non avere solo bitmap di nero solido, aggiungiamo un po 'di colore a loro:
OK, quindi abbiamo alcune belle stelle, ora vogliamo portarle e inserirle nel nostro IDE Flash.
Avvia l'IDE Flash e crea un nuovo file ActionScript 3:
Ora, se sei un veterano dell'IDE Flash, ti ricorderai che sei stato in grado di importare i file PSD da CS3, hanno introdotto un'interfaccia davvero piacevole quando si trattava di importare file PSD che passavano attraverso i tuoi livelli anziché importazione di una grande bitmap. Quindi vai su File> Importa> Importa in libreria, vai al tuo PSD e fai clic su Importa in libreria. Verrà visualizzata una finestra simile a questa:
Nel mio caso, lascerò ogni cosa spuntata dallo sfondo perché è solo uno sfondo bianco. Ora abbiamo i nostri livelli PSD come elementi all'interno della nostra libreria, possiamo iniziare a renderli pronti per gli sviluppatori. Prendi una delle stelle dalla libreria e lasciala sul palco, in questo modo:
Prendiamo quindi la stella e la convertiamo in una MovieClip. Quando viene visualizzata la finestra, denominarla "BlueStarAsset", selezionare "Esporta per ActionScript". Vedrai che le due caselle di input qui sotto diventano modificabili. Non è necessario toccarli, ma ci consentono di specificare quale classe verrà denominata questa risorsa e quale tipo di classe verrà estesa, continueremo con "MovieClip":
Ora abbiamo una risorsa nella nostra libreria che siamo in grado di esportare in ActionScript. Prima di andare avanti, proviamo. Per prima cosa vai su File> Impostazioni pubblicazione. Fare clic sulla scheda "Flash", selezionare "Player" versione 9 e spuntare "Export SWC":
Hit "Ok". Ora siamo pronti per esportare il nostro SWC. Esegui il debug del FLA premendo CTRL / CMD + Return e vedrai un file SWF e SWC. Siero! Hai creato un SWC, ora usiamolo rapidamente. Accendi il tuo IDE di codifica preferito e crea un nuovo progetto ActionScript 3. Configura le impostazioni del compilatore per includere l'SWC appena creato nel percorso di generazione. Crea un nuovo file ActionScript 3 di base chiamato "App.as" e utilizza il seguente codice:
package import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] App classe pubblica estende Sprite funzione pubblica App () var star: MovieClip = new BlueStarAsset (); addChild (stella);
Vedrai qualcosa di simile a questo:
Questa è la nostra risorsa principale.
Parlerò rapidamente di un concetto chiamato "scala 9 griglia". Questo è semplicemente un metodo che ci consente di suddividere una risorsa visiva, quindi quando si tratta di ridimensionarla, le cose come gli angoli arrotondati possono rimanere proporzionati. Per esempio, se avessimo un rettangolo arrotondato come questo, se poi avessimo cambiato la sua larghezza, vedrai che gli angoli arrotondati non sono più proporzionati:
Per ovviare a questo, utilizziamo il metodo di affinamento della griglia in scala 9 per impostare un rettangolo sopra il nostro asset che verrà ridimensionato, quindi tutto al di fuori del rettangolo rimane in proporzione, ad esempio:
Il rettangolo rosso nel mezzo è quello che scala, ma il lato esterno non lo farà. Creiamo una griglia a 9 vie, la riga superiore ha 3, la metà 3 e la terza 3. Ecco come lo facciamo in senso pratico, torniamo all'IDE Flash e disegnamo semplicemente un semplice rettangolo arrotondato. Crea un nuovo Movie Clip da esso e assicurati di spuntare la casella "esporta per ActionScript" (ho chiamato il mio "SimpleRoundedRect") e spero che tu abbia qualcosa di simile a questo:
Ora prenderemo questo asset appena creato, riesportiamo l'SWC (eseguendo il debug del film) e torneremo al nostro IDE ActionScript 3 in cui aggiorneremo la nostra classe in questo modo:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] App classe pubblica estende Sprite funzione pubblica App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
Stiamo semplicemente aggiungendo il nostro rettangolo sul palco, ma prima stiamo disegnando un rettangolo che è x: 10, y: 10 ed è 20 pixel in meno in larghezza e altezza rispetto al nostro rettangolo arrotondato. Questo definirà il rettangolo centrale per il nostro affettamento di scala. Ora vedrai il rettangolo percorrere tutta la larghezza del palco senza che gli angoli diventino sproporzionati. Giusto per vedere la differenza, commenta la riga 15 (inizia con "rect.scale9Grid") e vedi come sono ora allungati gli angoli.
So esattamente cosa stai pensando "se il progettista è intenzionato a fare tutto il lavoro, allora perché lo sviluppatore deve impostare il rettangolo per l'affettatura?" Beh, lo sviluppatore non deve, come può fare il designer! Fare clic con il tasto destro del mouse sulla risorsa nella libreria e selezionare Proprietà. Quindi seleziona la casella "Abilita le guide per il ridimensionamento a 9 porzioni" e vedrai questo:
Ora il progettista può riposizionare quelle guide in modo che lo sviluppatore non debba preoccuparsi di creare un rettangolo per la griglia della scala 9. Se lasci la linea 15 commentata e riesportare questo SWC, vedrai che gli angoli ora sono ancora una volta proporzionati. Semplice eh?
Gli SWC possono contenere più di semplici risorse visive, indipendentemente dal fatto che si tratti di grafica piatta o di animazioni basate su timeline o script. Possono anche contenere librerie di codici complete. I SWC sono un ottimo modo per distribuire il tuo codice. È piuttosto complicato, ma non impossibile da decodificare SWC. Tuttavia, vuol dire che puoi pubblicare un SWC piuttosto che preoccuparti di molti file e directory. Sono anche più facili per l'utente. Io, per esempio, ho una cartella in cui scarico tutte le librerie di codice ActionScript che uso o creo, ma poi ho una cartella separata per gli SWC utili che ho imparato ad usare. Trovo più facile selezionare un SWC e legarlo al progetto piuttosto che includere l'intera cartella degli script condivisi - ed è anche più veloce!
Per creare SWC basati su codice, utilizzo Flash Builder: è possibile scaricare la versione beta da Adobe. All'interno di Flash Builder dovrai creare un nuovo "Flex Library Project" in questo modo:
Dagli un nome e assicurati di selezionare il compilatore Flex 3.4:
Fare clic su Avanti e quindi selezionare la casella accanto a "src", questo è dove metteremo le nostre classi:
Ora possiamo iniziare a scrivere il codice per la nostra libreria, quindi creare una nuova classe ActionScript, chiamarla "Test" e impostare il nome del pacchetto su "com.flashtuts.swc" e inserire il codice seguente:
pacchetto com.flashtuts.swc import flash.display.Sprite; public class Test estende Sprite public function Test () init (); funzione privata init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
Come puoi vedere, abbiamo appena creato una casella rossa, quindi prendiamola nel nostro progetto ActionScript 3.
Ora devi modificare il compilatore Flex in modo che possa raccogliere le nuove risorse SWC appena create. Dopo averlo fatto, puoi cambiare il codice dell'applicazione in modo che assomigli a questo:
package import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] App classe pubblica estende Sprite funzione pubblica App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = new Test (); addChild (redRect);
Lì vedrai il tuo rettangolo rosso! Semplice eh?
Ora molte persone potrebbero obiettare che i SWC non sono necessari, ma aiutano i progettisti e gli sviluppatori a lavorare in sincronia senza pestarsi l'un l'altro. Proteggono il tuo codice e sono un buon modo per condividere risorse visive come preloader e grafica. Mentre gli FXG sono molto meglio, fino a quando Flash Player 10 non riprende, gli SWC sono lo standard quando si tratta di creare siti Web di produzione che devono essere scalabili, sia in termini di tempistiche di progetto che di componenti visive.
Accentsconagua