Share
Questo suggerimento rapido spiega come utilizzare un'immagine come sfondo di un sito Web e ridimensionarla proporzionalmente alle dimensioni dello stage. È fantastico quando usi un SWF a tutta altezza e a tutta larghezza in una pagina web.
icona iMac di bobbyperux.
Dai un'occhiata a ciò su cui lavoreremo. Ridimensiona la finestra del browser e fai clic sul file SWF per ridimensionare automaticamente l'immagine.
Iniziamo creando un nuovo file Actionscript 3.0. Salvalo come resize.fla dove vuoi - presumo C: \ ridimensionamento \ resize.fla
Creiamo le cartelle di cui abbiamo bisogno per questo tutorial. Se si ha familiarità con i percorsi di classe e si dispone del proprio percorso di classe, creare la cartella \ Org \ Display \ al suo interno (supponendo che non ne abbiate già uno con lo stesso nome).
Altrimenti, crea la cartella \ Org \ Display nella stessa cartella del documento resize.fla (ad esempio: C: \ ridimensionare \ org \ Display).
Importa un'immagine nella libreria del FLA in modo che possiamo usarla per testare l'effetto. Fai clic su File> Importa> "Importa nella libreria".
Nella finestra di dialogo che si apre, trova il file che desideri utilizzare. L'immagine del cielo che ho scelto è disponibile nel download Source nella parte superiore della pagina.
Ora esporteremo la nostra immagine per ActionScript, in modo che possiamo fare riferimento ad essa nel nostro codice.
Per prima cosa apri la tua libreria (se non riesci a vederla, fai clic su Finestra> Libreria), fai clic con il pulsante destro del mouse sull'immagine e fai clic su Proprietà.
Cambia il suo nome in "Sky".
Se le opzioni avanzate non sono visibili, fai clic su Avanzate nell'angolo in basso a destra della finestra Proprietà. Controlla le opzioni, "Esporta per ActionScript" e "Esporta nel fotogramma 1", utilizzando il nome Cielo per la classe e flash.display.BitmapData per la classe base. Assicurati anche che l'opzione "Consenti livellamento" sia spuntata; questa opzione garantirà il mantenimento di una buona qualità dell'immagine durante il ridimensionamento dell'immagine.
Fare clic su OK per chiudere il pannello Proprietà. Quindi, ora abbiamo configurato tutto nel nostro FLA, puoi salvarlo.
Ora creiamo un nuovo documento ActionScript e lo salviamo all'interno del nostro \ Org \ Display \ cartella come OffsetResize.as (ad esempio: C: \ ridimensionare \ org \ Display \ OffsetResize.as), o all'interno del \ Org \ Display \ cartella nel percorso di classe.
Successivo: codice. Dai un'occhiata ai commenti.
package org.display // Importa le classi necessarie per questo oggetto import flash.display.Sprite; import flash.display.DisplayObject; import flash.events.Event; // Creazione di una nuova classe che estende la classe Sprite public class OffsetResize estende Sprite // Crea le costanti statiche per il massimo e il minimo // Lo useremo per la proprietà offsetType public static const MAX: String = "max"; public static const MIN: String = "min"; // Il tipo di ridimensionamento - se l'immagine è più grande o più piccola della fase private var _offsetType: String; // La funzione di costruzione public function OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // The offsetType; se nessun valore è impostato, il valore "max" verrà automaticamente assunto _offsetType = $ offsetType; // Aggiungi qui il bambino, qualsiasi tipo di DisplayObject addChild ($ child); // Controlla se questo oggetto è sul palco. in tal caso, chiama la funzione init () if (stage) init (); // Se non è sul palco ascolterà quando viene aggiunto allo stage e quindi chiama la funzione init () else addEventListener (Event.ADDED_TO_STAGE, init); // Questo controllerà quando questo oggetto viene rimosso dallo stage e chiama la funzione end () addEventListener (Event.REMOVED_FROM_STAGE, end); // La funzione init () (chiamata quando l'oggetto è nello stage) // Il parametro Event = null è perché abbiamo usato init () senza alcun parametro nel costruttore // e perché è anche usato come listener di eventi (ADDED_TO_STAGE) funzione privata init (e: Event = null): void // Rileva quando lo stage viene ridimensionato e chiama la funzione stageResize () stage.addEventListener (Event.RESIZE, stageResize); // Chiama ora la funzione stageResize (), anche stageResize (); // La funzione stageResize () verrà chiamata ogni volta che lo stage viene ridimensionato // Il parametro e: Event = null è perché abbiamo chiamato la funzione stageResize () senza un parametro private function stageResize (e: Event = null): void // Calcola il rapporto di larghezza dividendo la larghezza dello stage in base alla larghezza dell'oggetto var px: Number = stage.stageWidth / width; // Calcola il rapporto altezza dividendo l'altezza dello stage per l'altezza dell'oggetto var py: Number = stage.stageHeight / height; / * Questo è l'operatore ternario; in una riga controlla se _offsetType è "max". In tal caso, imposta la variabile div come valore massimo tra il rapporto della larghezza e il rapporto dell'altezza. In caso contrario, imposta la variabile div come il valore minimo tra il rapporto della larghezza e il rapporto dell'altezza. Quindi, questa linea è responsabile se l'immagine è più grande o più piccola dello stadio. * / var div: Number = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Queste due linee ridimensionano questo oggetto in base al rapporto di divisione. // Se usiamo scaleX o scaleY qui non funzionerà come ne abbiamo bisogno. larghezza * = div; altezza * = div; // Queste due linee sono responsabili del centraggio di questo oggetto sul palco. x = (stage.stageWidth / 2) - (larghezza / 2); y = (stage.stageHeight / 2) - (altezza / 2); // Questa funzione viene chiamata quando questo oggetto viene rimosso dallo stage, in quanto non abbiamo bisogno della funzione stageResize () più funzione privata end (e: Event): void // Rimuovi il listener RESIZE dallo stage stage. removeEventListener (Event.RESIZE, stageResize); / * Qui creiamo il parametro offsetType, così possiamo cambiare il modo in cui l'oggetto si ridimensiona dinamicamente * / public function set offsetType (type: String): void _offsetType = type; // Dopo aver cambiato il tipo, richiamiamo la funzione stageResize per aggiornare if (stage) stageResize (); // Solo per se vogliamo sapere qual'è l'offsetType funzione pubblica get offsetType (): String return _offsetType;
Ora puoi salvare il file OffsetResize.as. Puoi chiuderlo se vuoi; d'ora in poi, non lo modificheremo più, semplicemente usandolo all'interno di altre classi.
Ora torna al FLA e assegniamo una classe di documenti. (Non hai familiarità con le classi di documenti? Leggi questa breve introduzione.)
Aprire il pannello Proprietà del FLA facendo clic in qualsiasi spazio vuoto sullo stage (senza oggetti selezionati), quindi facendo clic su Finestra> Proprietà.
Nel pannello che si apre, digita "Main" per Class (o Document Class, in Flash CS3).
Salva di nuovo l'FLA ma non chiuderlo.
Potremmo scrivere il nostro codice direttamente nella timeline, ma non è una buona abitudine; lo scopo della classe del documento è eliminare la programmazione della timeline.
Quindi, crea un nuovo file ActionScript e salvalo come "Main.as" nella stessa cartella del FLA (ad esempio: C: \ ridimensionamento \ Main.as).
Cerchiamo di codificarlo ora (guarda i commenti nel codice):
pacchetto // Importa le classi necessarie import org.display.OffsetResize; import flash.display.Sprite; import flash.display.Bitmap; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; // Stiamo estendendo la classe Sprite, piuttosto che MovieClip, dato che qui non useremo alcuna animazione della timeline public class Main extends Sprite // Questa sarà l'istanza del nostro oggetto personalizzato OffsetResize private var _bg: OffsetResize; // La funzione public constructor Main (): void / * Potremmo usare direttamente la proprietà stage, ma sto assumendo che molte persone creino un documento come "base.swf" che carica "main.swf" file - nel qual caso il nostro main.swf non avrebbe la proprietà stage. Ma controlla se c'è una proprietà stage. Possiamo usare questo swf che creeremo con o senza base.swf; in questo caso lo useremo senza base.swf, ma è pronto per l'uso con quest'ultimo se lo vogliamo. Quindi questa linea controllerà se il nostro SWF è sul palco e, in tal caso, chiama init (). * / if (stage) init (); // Se non sullo stage chiamerà la funzione init () solo quando viene aggiunta allo stage else addEventListener (Event.ADDED_TO_STAGE, init); // La funzione init è chiamata solo quando l'oggetto è nello stage // È stato spiegato prima che stiamo usando questo nella funzione di costruzione funzione privata init (e: Event = null): void // Impostazione di come lo stage scala (non scala) e il suo allineamento (angolo superiore sinistro) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Ricorda l'immagine nella libreria? Bene, questo è il motivo per cui l'abbiamo esportato per AS. // Creiamo un oggetto Bitmap con quell'immagine: var picture: Bitmap = new Bitmap (new Sky (0,0)); // Ora creiamo un'istanza della classe OffsetResize che abbiamo codificato prima. // Il secondo parametro è facoltativo e può essere lasciato vuoto; il suo valore può essere OffsetResize.MAX o OffsetResize.MIN. _bg = new OffsetResize (picture, OffsetResize.MIN); // aggiungi l'istanza di OffsetResize allo stage sull'indice figlio 0, quindi sarà dietro a tutto (è uno sfondo) stage.addChildAt (_bg, 0); // Il codice finora è sufficiente per farlo funzionare, ma mostrerò come modificare l'offsetType in modo dinamico. // Quindi aggiungiamo un evento MOUSE_DOWN, che chiamerà la funzione mouseDown () quando clicchiamo sul palco. stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown); // Questa funzione viene chiamata ogni volta che si fa clic sulla funzione privata stage mouseDown (e: MouseEvent): void / * Questo è l'operatore ternario, è una versione compatta di questa istruzione long if: if (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN; else _bg.offsetType = OffsetResize.MAX; * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX;
Controlla se va bene.
Se tutti questi requisiti sono soddisfatti, puoi testarlo ora!
Abbiamo creato una classe personalizzata chiamata "OffsetResize", che ridimensiona un oggetto specificato in base alle dimensioni dello stage. Se lo hai creato nel classpath, puoi utilizzarlo dove vuoi: tutto ciò che devi fare è importare l'oggetto OffsetResize e usarlo; è estensibile e riutilizzabile. Ma ricorda è da utilizzare con contenuti scalabili, ad esempio un SWF in HTML che occupa il 100% della larghezza e dell'altezza.
Grazie per aver letto! Pubblica qualsiasi domanda nei commenti.
Accentsconagua