Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel luglio 2009.
Un layout web fluido utilizza il 100% di larghezza (e altezza) del browser, spostando tutti gli elementi contenuti in determinate posizioni. Questo è contrario al layout a larghezza fissa in cui i contenuti rimangono fissi indipendentemente dalla dimensione del browser.
Questa tecnica è popolare nei siti HTML / CSS, ma questo tut ti mostrerà come creare un simile effetto di layout fluido in Flash. Ogni elemento si riposiziona con facilità di animazione quando il browser ridimensiona.
Durante i seguenti passaggi creeremo classi ActionScript 3 che rendono fluido il nostro sito web flash. Tutti i nostri simboli di visualizzazione manterranno il loro allineamento quando il Flash viene ridimensionato.
Le classi ActionScript create in questo tutorial possono essere facilmente riutilizzate in diversi progetti.
Come mostrato nell'immagine qui sotto, tutti gli elementi che galleggiano in base alle dimensioni del browser verranno definiti "oggetti fluidi".
Ogni oggetto fluido conterrà i parametri di allineamento. I parametri memorizzano il valore x, y, x offset, y di offset dell'oggetto per indicare come si allinea.
Assegnando xey a 0, l'oggetto fluido si allinea all'angolo in alto a sinistra. Assegnando xey a 1, l'oggetto fluido si allinea all'angolo in basso a destra. Pertanto, assegnando il valore x e y tra 0 e 1, l'oggetto verrà spostato a una percentuale della larghezza e dell'altezza del browser.
L'offset X e Y sfalsano la posizione degli oggetti fluidi mentre si allineano. Offset utile quando si posiziona un oggetto il cui punto di allineamento non è al centro. L'offset è anche utile per creare margini sull'allineamento.
Creare una directory chiamata "FluidLayout" nella directory di lavoro. Questa directory memorizzerà tutte le classi che si riferiscono alle classi di layout fluido.
È buona abitudine mettere i file di classe ActionScript nelle directory per categoria. Ad esempio, le classi di layout fluido verranno posizionate nella cartella "FluidLayout" in questo caso.
Si noti che tutti i nomi delle directory, i nomi dei file e i codici sono case sensitive.
Aprire un nuovo file ActionScript denominato "FluidObject.as". Salvare questo file ActionScript nella directory "FluidLayout".
La classe FluidObject memorizzerà i parametri di allineamento dei simboli e riposizionerà i simboli quando il browser ridimensiona.
Iniziamo a codificare FluidObject.as ora.
pacchetto FluidLayout / * Aggiungi qui le classi di importazione * / public class FluidObject / * Dichiara qui le variabili di istanza * / / * Costruttore della classe * / public function FluidObject (target: DisplayObject, paramObj: Object) / * Funzione che riposiziona l'oggetto monitorato * / protected function reposition (): void / * Funzione chiamata quando viene attivato l'evento RESIZE * / protected function onStageResize (e): void
Aggiungi il seguente codice dove vedi: / * Aggiungi qui le classi di importazione * /
/ * classe necessaria per ridimensionare l'evento * / import flash.events.Event; / * classi necessarie per MovieClip e DisplayObject * / import flash.display. *;
Esistono tre variabili di istanza per questa classe:
C'è anche un setter per "_param" per abilitare la modifica dei parametri di allineamento. Aggiungi il seguente codice dove vedi: / * Dichiara variabili di istanza qui * /
/ * parametri di allineamento * / protected var _param: Object; / * oggetto target da monitorare * / protected var _target: DisplayObject; / * istanza di stage del documento flash * / protected var _stage: Stage; / * Setter per l'allineamento param * / public function set param (valore: Object): void _param = value; this.reposition ();
Il costruttore inizializzerà il simbolo monitorato target e memorizzerà i parametri di allineamento dati.
/ * Costruttore della classe * / funzione pubblica FluidObject (target: DisplayObject, paramObj: Object) / * Assegna le variabili di istanza * / _target = target; _param = paramObj; _stage = target.stage; / * Aggiungi gestore eventi per ridimensionamento stage * / _stage.addEventListener (Event.RESIZE, onStageResize); / * riposiziona l'oggetto con l'impostazione di allineamento applicata * / this.reposition ();
La funzione di riposizionamento è responsabile del calcolo della nuova posizione x / y dell'oggetto fluido monitorato.
/ * Funzione che riposiziona l'oggetto monitorato * / protected function reposition (): void / * ottiene la larghezza e l'altezza correnti del documento flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * aggiorna il valore xey dell'oggetto monitorato * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY;
La funzione onStageResize è un gestore di eventi che viene richiamato quando il browser viene ridimensionato.
/ * Funzione chiamata quando viene attivato l'evento RESIZE * / funzione protetta onStageResize (e): void / * riposiziona il target * / this.reposition ();
Il prodotto finito FluidObject è finito in questo passaggio.
pacchetto FluidLayout / * classe necessaria per ridimensionare Event * / import flash.events.Event; / * classi necessarie per MovieClip e DisplayObject * / import flash.display. *; classe pubblica FluidObject / * parametri di allineamento * / protected var _param: Object; / * oggetto target da monitorare * / protected var _target: DisplayObject; / * istanza di stage del documento flash * / protected var _stage: Stage; / * Setter per l'allineamento param * / public function set param (valore: Object): void _param = value; this.reposition (); / * Funzione di costruzione della classe * / funzione pubblica FluidObject (target: DisplayObject, paramObj: Object) / * Assegna le variabili di istanza * / _target = target; _param = paramObj; _stage = target.stage; / * Aggiungi gestore eventi per ridimensionamento stage * / _stage.addEventListener (Event.RESIZE, onStageResize); / * riposiziona l'oggetto con l'impostazione di allineamento applicata * / this.reposition (); / * Funzione che riposiziona l'oggetto monitorato * / protected function reposition (): void / * ottiene la larghezza e l'altezza correnti del documento flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * aggiorna il valore xey dell'oggetto monitorato * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY; / * Funzione chiamata quando viene attivato l'evento RESIZE * / funzione protetta onStageResize (e): void / * riposiziona il target * / this.reposition ();
Iniziare un nuovo documento Flash con ActionScript 3.0 supportato e chiamarlo "website.fla". Quindi imposta la classe Documento come "Sito web".
Se viene visualizzata una finestra di dialogo con il messaggio: "Impossibile trovare una definizione per la classe del documento nel classpath, ..." fai semplicemente clic su "OK" per aggirarlo. Creeremo quella classe dopo aver disegnato i simboli grafici.
L'immagine di sfondo sarà scura in questo tutorial (ho messo insieme la mia immagine spaziale usando Photoshop). Pertanto, il colore di sfondo del documento flash deve essere impostato su nero. Fare clic su Modifica> Documento per aprire la finestra di dialogo Proprietà documento e modificare il colore di sfondo.
Ci saranno 5 simboli flash sul palco:
Facciamo prima il titolo. Lo scopo di questo tutorial è di creare simboli fluttuanti nel layout fluido piuttosto che creare componenti del sito Web di fantasia. I simboli conterranno solo un campo di testo che indica solo lo scopo.
Per il simbolo del titolo, c'è uno sfondo semitrasparente. Per adattarsi a diverse larghezze del browser, la larghezza dello sfondo deve essere sufficientemente grande.
Dopo aver finito di disegnare il simbolo, fare clic su Modifica> Converti in simbolo (F8). Fare clic sul pulsante "Avanzate" per visualizzare le impostazioni dettagliate per il simbolo.
Fare clic su "Esporta per ActionScript" per consentire a ActionScript di accedere a questo simbolo. Quindi trova il campo "Classe" nella finestra di dialogo e imposta il valore su "Titolo" per il simbolo del titolo. Questo significa che abbiamo assegnato una nuova classe chiamata "Titolo" a questo simbolo. Possiamo usare questo simbolo più avanti in ActionScript.
Ricordarsi di denominare il simbolo per un facile riconoscimento prima di fare clic su OK. Se viene visualizzata una finestra di dialogo con il messaggio "Impossibile trovare una definizione per questa classe nel percorso di classe, ...", fare nuovamente clic su "OK" per ignorarlo. Dato che non aggiungeremo alcun comportamento al simbolo, lasceremo che Flash crei una classe vuota per noi.
Elimina l'istanza del simbolo "titolo" sullo stage perché verrà creata successivamente da ActionScript.
Useremo lo stesso metodo per disegnare "sfondo", "menu", "contenuto medio" e "piè di pagina". Il nome della classe di questi simboli sarà sfondo, Menu, mezzo e footer di conseguenza.
L'immagine di sfondo può essere scaricata dai file sorgente. Altri simboli sono solo campi di testo.
Creare un file ActionScript e denominato "Website.as"; questo file di classe deve essere salvato nella stessa directory del file website.fla.
Questa classe deve anche condividere lo stesso nome di quella impostata nella Document Class (fare riferimento al punto 12). Ad esempio, il "Sito Web" della Classe documento si riferisce a "Sito Web.as" nella stessa directory. Questa classe ActionScript verrà caricata subito dopo il caricamento del flash.
Ecco lo scheletro della Document Class:
pacchetto import flash.display. *; import FluidLayout. *; Il sito web della classe pubblica estende MovieClip Sito web della funzione pubblica ()
pacchetto import flash.display. *; import FluidLayout. *; sito web di classe pubblica estende MovieClip sito web di funzione pubblica () / * Imposta la modalità di scala di Stage * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Aggiungi i simboli allo stage * / var bg = new Background (); addChild (bg); var title = new Title (); addChild (titolo); var menu = new Menu (); addChild (menu); var middle = new Middle (); addChild (al centro); var footer = new Footer (); addChild (piè di pagina); / * Applica l'allineamento allo sfondo * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (bg, bgParam); / * Applica l'allineamento al titolo * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam); / * Applica l'allineamento al menu * / var menuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 new FluidObject (menu, menuParam); / * Applica l'allineamento al contenuto * / var middleParam = x: 0.5, y: 0.5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 new FluidObject (middle, middleParam); / * Applica l'allineamento al piè di pagina * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 new FluidObject (footer, footerParam);
Apri website.fla in Flash e ricontrolla prima di inviare un SMS al film.
Non è necessario posizionare i simboli sul palco perché il sito Web. Crea istanze di simboli dalla libreria usando i loro nomi di classe. I nomi delle classi di collegamento dei simboli devono essere corretti affinché lo script li usi. Il nome della classe di collegamento può essere controllato nel pannello della libreria.
Fai clic su Controllo> Text Movie o Ctrl (Cmd) + Invio per testare il sito Web di Flash.
Prova a ridimensionare la finestra e controlla se tutti gli oggetti stanno riposizionando sull'allineamento corretto.
Ogni FluidObject ora deve avere valori di proprietà x, y, offsetX e offsetY specifici. Nei prossimi passi verrà creata una nuova classe per semplificare il codice futuro quando si aggiungono nuovi oggetti fluidi.
Aprire un nuovo file ActionScript denominato "SimpleFluidObject.as". Salva questo file all'interno della directory "FluidLayout" perché fa parte del pacchetto FluidLayout.
Questo file estende la classe FluidObject in modo che fornisca un allineamento semplice utilizzando nomi come TOP, MIDDLE, BOTTOM_RIGHT invece di specificare le proprietà x, y.
Ecco lo scheletro della classe:
package FluidLayout import flash.events.Event; import flash.display. *; public class SimpleFluidObject estende FluidObject public function SimpleFluidObject (target: DisplayObject, paramObj: Object)
package FluidLayout import flash.events.Event; import flash.display. *; public class SimpleFluidObject estende FluidObject public function SimpleFluidObject (target: DisplayObject, paramObj: Object) / * Dì alla classe genitore di avviare il costruttore * / super (target, paramObj); / * assegna l'allineamento e il valore del margine tramite i parametri del costruttore * / var alignment = paramObj.alignment; var margin = paramObj.margin; / * Preimpostare l'allineamento e il valore del margine se necessario * / if (alignment == undefined) alignment = "MIDDLE"; if (margin == undefined) margin = 0; / * converte l'allineamento (ad esempio "TOP", "BOTTOM_RIGHT") in x, y, offsetX e offsetY * / var params = new Object (); switch (alignment) case "TOP_LEFT": params = x: 0, y: 0, offsetX: margin, offsetY: margin; rompere; caso "TOP": params = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; rompere; caso "TOP_RIGHT": params = x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin; rompere; case "LEFT": params = x: 0, y: .5, offsetX: margin, offsetY: -target.height / 2; rompere; case "MIDDLE": params = x: .5, y: .5, offsetX: -target.width / 2 - margin / 2, offsetY: -target.height / 2 - margin / 2; rompere; case "RIGHT": params = x: 1, y: .5, offsetX: -target.width - margin, offsetY: -target.height / 2; rompere; case "BOTTOM_LEFT": params = x: 0, y: 1, offsetX: margin, offsetY: -target.height - margin; rompere; case "BOTTOM": params = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height - margin; rompere; caso "BOTTOM_RIGHT": params = x: 1, y: 1, offsetX: -target.width - margin, offsetY: -target.height - margin; rompere; _param = params; / * riposiziona l'oggetto fluido nella posizione corretta * / this.reposition ();
Fare riferimento al file Website.as e provare a utilizzare il nuovo metodo di allineamento per allineare gli oggetti fluidi.
Il vecchio metodo per applicare l'allineamento al titolo:
/ * Applica l'allineamento al titolo * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam);
Il nuovo metodo per applicare l'allineamento al titolo:
var titleParam = alignment: "TOP_LEFT", margine: 0 new SimpleFluidObject (title, titleParam);
Allineamenti disponibili:
Ora l'allineamento del fluido funziona su "Test Movie" in Flash IDE, ma ce n'è uno chiave punta a farlo funzionare sul browser.
Apri website.fla. Vai su File> Impostazioni pubblicazione e assicurati che l'HTML sia abilitato. Fare clic sulla scheda HTML e modificare la dimensione in "Percent". Assicurarsi che la percentuale sia impostata su 100 sia in larghezza che in altezza.
Fai clic su "Pubblica" per pubblicare il sito Web come file "website.swf" e "website.html".
Ora apri il file "website.html" con il tuo editor di testo preferito e aggiungi il seguente codice nell'intestazione. Aggiunta del codice subito dopo l'etichetta sarebbe una buona scelta.
Questi stili CSS eliminano il divario tra il lato in alto a sinistra dell'HTML e il file SWF.
Un effetto di attenuazione può essere applicato quando il browser viene ridimensionato in modo che gli oggetti si spostino nella posizione corretta con un effetto di eliminazione.
Apri "FluidObject.as". Aggiungi le seguenti righe dopo "import flash.display. *;". Queste linee importeranno la classe di animazione tweening per dare la capacità del codice di facilitare gli oggetti.
/ * classi necessarie per Easing Animation * / import fl.transitions.Tween; importare fl.transitions.easing. *;
Quindi individuare le seguenti righe nel file "FluidObject.as". Sono all'interno della funzione "riposizionare".
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Sostituiscili con il seguente codice:
/ * imposta la durata dell'animazione di andamento (secondi) * / durata var = 0,5; / * dichiara il nuovo valore X / Y * / var newX = _target.x; var newY = _target.y; / * calcola il nuovo valore X in base allo stage Width * / if (_param.x! = undefined) newX = (stageW * _param.x) + _param.offsetX; / * calcola il nuovo valore Y in base all'altezza dello stage * / if (_param.y! = undefined) newY = (stageH * _param.y) + _param.offsetY; / * Indica a flash di interpolare l'oggetto target con la nuova posizione X / Y * / new Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); nuovo Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Prova il film, gli oggetti si stanno attenuando quando il browser ridimensiona
Abbiamo appena creato due classi che sono responsabili degli oggetti fluidi galleggianti. Abbiamo anche creato un esempio per allineare diversi oggetti sul palco usando le classi. Questo esempio è solo un esempio di caso; puoi usare la tua immaginazione per giocare con gli allineamenti. Ad esempio, un simbolo può essere interattivo e il suo allineamento può cambiare dall'alto verso il basso quando l'utente fa clic su di esso.
La struttura del file dovrebbe essere la stessa di quella seguente dopo aver completato questo tutorial. Nello specifico, FluidObject.as e SimpleFluidObject.as dovrebbero essere nella directory "FluidLayout" per funzionare.
Divertiti con il layout fluido!
Accentsconagua