Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i juli 2009.
Et flytende weboppsett bruker 100% bredde (og høyde) av nettleseren, som flytter alle de innebygde elementene til bestemte posisjoner. Dette er i motsetning til fix-breddeoppsett der innholdet forblir løst uansett hva nettleserens størrelse er.
Denne teknikken er populær i HTML / CSS nettsteder, men denne tuten vil vise deg hvordan du lager en lignende fluid layout effekt i Flash. Hvert element vil reposisjonere seg med enkel animasjon når nettleseren endrer størrelsen.
Under de følgende trinnene oppretter vi ActionScript 3-klasser som gjør vår Flash-nettside væsken. Alle våre symboler vil beholde sin justering når Flash er endret.
ActionScript-klassene som er opprettet i denne opplæringen, kan enkelt gjenbrukes i ulike prosjekter.
Som vist i bildet nedenfor, blir alle elementene som flyter i henhold til nettleserens størrelse, referert til som "fluidobjekter".
Hver væskeobjekt vil inneholde justeringsparametere. Parametrene lagrer objektet x, y, x offset, y offset for objektet for å indikere hvordan det justeres.
Tilordne x og y til 0 vil gjøre fluidobjektet rett i øverste venstre hjørne. Ved å tilordne x og y til 1 vil fluidobjektet justere seg til nederste høyre hjørne. Derfor tilordner x- og y-verdi mellom 0 og 1 objektet med en prosentandel av nettleserens bredde og høyde.
Forskjellen X og Y kompenserer posisjonen til væskeobjektene mens de justeres. Avsetting er nyttig når du plasserer et objekt hvis justeringspunkt ikke er i sentrum. Forskjellen er også nyttig for å lage marginer på justeringen.
Opprett en katalog som heter "FluidLayout" i arbeidskatalogen. Denne katalogen lagrer alle klasser som vedrører væskelayoutklassen.
Det er en god vane å sette ActionScript-klassefilene i kataloger etter kategori. For eksempel vil fluid layout klasser bli plassert i "FluidLayout" mappen i dette tilfellet.
Vær oppmerksom på at alle katalognavn, filnavn og koder er saksfølsomme.
Åpne en ny ActionScript-fil med navnet "FluidObject.as". Lagre denne ActionScript-filen i katalogen "FluidLayout".
Klassen FluidObject lagrer justeringsparametrene til symbolene og plasserer symbolene når nettleseren endrer størrelsen.
La oss begynne å kode FluidObject.as nå.
pakke FluidLayout / * Legg til importklasser her * / offentlig klasse FluidObject / * Deklar instansvariabler her * / / * Konstruktør av klassen * / offentlig funksjon FluidObject (mål: DisplayObject, paramObj: Object) / * Funksjon som reposisjonerer den overvåkede objektet * / beskyttet funksjon-reposisjon (): void / * Funksjon som kalles når RESIZE-hendelsen er avfyrt * / beskyttet funksjon onStageResize (e): void
Legg til følgende kode hvor du ser: / * Legg til importklasser her * /
/ * klasse som trengs for å endre størrelsen på Event * / import flash.events.Event; / * klasser som trengs for MovieClip og DisplayObject * / import flash.display. *;
Det finnes tre instansvariabler for denne klassen:
Det finnes også en setter for "_param" for å muliggjøre endring av justeringsparametrene. Legg til følgende kode hvor du ser: / * Erklære forekomstvariabler her * /
/ * justeringsparametere * / beskyttet var _param: Objekt; / * målobjekt som skal overvåkes * / beskyttet var _target: DisplayObject; / * scene forekomst av flash-dokumentet * / beskyttet var _stage: scenen; / * Setter for justeringen param * / public function set param (verdi: Object): void _param = value; this.reposition ();
Konstruktøren vil initialisere målet overvåket symbol og lagre de angitte justeringsparametrene.
/ * Konstruktør av klassen * / offentlig funksjon FluidObject (mål: DisplayObject, paramObj: Object) / * Tildel instansvariablene * / _target = target; _param = paramObj; _stage = target.stage; / * legg til hendelsesbehandler for trinnformat * / _stage.addEventListener (Event.RESIZE, onStageResize); / * reposisjon objektet med justeringsinnstillingen som er påført * / this.reposition ();
Omplasseringsfunksjonen er ansvarlig for å beregne den nye x / y-posisjonen for det overvåkede fluidobjektet.
/ * Funksjon som reposisjonerer den overvåkede objekten * / beskyttet funksjonreposisjon (): void / * få gjeldende bredde og høyde på flashdokumentet * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * Oppdater x- og y-verdien for den overvåkede objekten * / _target.x = (sceneW * _param.x) + _param.offsetX; _target.y = (sceneH * _param.y) + _param.offsetY;
Funksjonen onStageResize er en hendelseshåndterer som kalles når nettleseren endrer størrelse.
/ * Funksjon som kalles når RESIZE-hendelsen er avfyrt * / beskyttet funksjon onStageResize (e): void / * reposition målet * / this.reposition ();
Den ferdige klassen FluidObject er ferdig i dette trinnet.
pakke FluidLayout / * klasse nødvendig på resize Event * / import flash.events.Event; / * klasser som trengs for MovieClip og DisplayObject * / import flash.display. *; offentlig klasse FluidObject / * justeringsparametere * / beskyttet var _param: Objekt; / * målobjekt som skal overvåkes * / beskyttet var _target: DisplayObject; / * scene forekomst av flash-dokumentet * / beskyttet var _stage: scenen; / * Setter for justeringen param * / public function set param (verdi: Object): void _param = value; this.reposition (); / * Konstruktør av klassen * / offentlig funksjon FluidObject (mål: DisplayObject, paramObj: Object) / * Tildel instansvariablene * / _target = target; _param = paramObj; _stage = target.stage; / * legg til hendelsesbehandler for trinnformat * / _stage.addEventListener (Event.RESIZE, onStageResize); / * reposisjon objektet med justeringsinnstillingen som er påført * / this.reposition (); / * Funksjon som reposisjonerer den overvåkede objektet * / beskyttet funksjon reposisjon (): void / * få gjeldende bredde og høyde på flash dokumentet * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * Oppdater x- og y-verdien for den overvåkede objekten * / _target.x = (sceneW * _param.x) + _param.offsetX; _target.y = (sceneH * _param.y) + _param.offsetY; / * Funksjon som kalles når RESIZE-hendelsen er avfyrt * / beskyttet funksjon onStageResize (e): void / * reposition målet * / this.reposition ();
Start et nytt Flash-dokument med ActionScript 3.0 støttet og kaller det "website.fla". Sett deretter Dokument-klassen som "Nettsted".
Hvis en dialogboks dukker opp med meldingen: "En definisjon for dokumentklassen kunne ikke bli funnet i klassebanen, ..." bare klikk "OK" for å omgå den. Vi skal lage den klassen etter å ha tegnet grafikk symbolene.
Bakgrunnsbildet vil være mørkt i denne opplæringen (jeg har satt sammen mitt eget plasslignende bilde ved hjelp av Photoshop). Derfor må bakgrunnsfargen til flashdokumentet settes til svart. Klikk Endre> Dokument for å åpne dialogboksen Dokumentegenskaper og endre bakgrunnsfargen.
Det vil være 5 flash symboler på scenen:
La oss lage tittelen først. Målet med denne opplæringen er å skape flytende symboler i fluidoppsettet, og deretter lage fancy nettsidekomponenter. Symbolene vil bare inneholde et tekstfelt som bare angir formålet.
For tittelsymbolet er det en halv gjennomsiktig bakgrunn. For å passe til forskjellige bredder av nettleseren må bredden på bakgrunnen være stor nok.
Når du er ferdig med å tegne symbolet, klikker du Endre> Konverter til symbol (F8). Klikk på "Avansert" -knappen for å vise detaljerte innstillinger for symbolet.
Klikk på "Eksporter for ActionScript" for å aktivere ActionScript for å få tilgang til dette symbolet. Finn deretter feltet "Klasse" i dialogboksen og sett verdien til "Tittel" for tittelsymbolet. Dette betyr at vi har tildelt en ny klasse kalt "Tittel" til dette symbolet. Vi kan bruke dette symbolet senere i ActionScript.
Husk å navngi symbolet ditt for enkel gjenkjenning før du klikker OK. Hvis en dialogboks dukker opp med meldingen "En definisjon for denne klassen kunne ikke bli funnet i klassestien, ..." igjen, bare klikk "OK" for å omgå den. Siden vi ikke vil legge til noen oppførsel til symbolet, lar vi Flash opprette en tom klasse for oss.
Slett symbolet "Tittel" på scenen fordi det vil bli opprettet av ActionScript senere.
Vi bruker samme metode for å tegne "bakgrunn", "meny", "mellominnhold" og "bunntekst". Klassenavnet til disse symbolene vil være Bakgrunn, Meny, Midten og bunntekst tilsvarende.
Bakgrunnsbildet kan lastes ned fra kildefilene. Andre symboler er bare tekstfelt.
Opprett en ActionScript-fil og kaller som "Website.as"; denne klassen filen skal lagres i samme katalog som website.fla filen.
Denne klassen må også dele samme navn som det som er angitt i dokumentklassen (se trinn 12). For eksempel refererer dokumentklassen "Nettsted" til "Website.as" i samme katalog. Denne ActionScript-klassen lastes rett etter at flashen er lastet.
Her er skjelettet til dokumentklassen:
pakke import flash.display. *; importer FluidLayout. *; offentlig klasse Nettstedet utvider MovieClip offentlig funksjon Nettsted ()
pakke import flash.display. *; importer FluidLayout. *; offentlig klasse Nettstedet utvider MovieClip offentlig funksjon Nettsted () / * Angi skaleringsmodus av scenen * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Legg til symbolene til scenen * / var bg = ny Bakgrunn (); addChild (bg); var title = ny tittel (); addChild (tittel); var-meny = ny meny (); addChild (meny); var midten = ny midt (); addChild (midten); var footer = ny footer (); addChild (bunntekst); / * Bruk justeringen til bakgrunnen * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 ny FluidObject (bg, bgParam); / * Bruk justeringen til tittelen * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 ny FluidObject (tittel, titleParam); / * Bruk justeringen til menyen * / var menuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 ny FluidObject (meny, menuParam); / * Bruk justeringen til innholdet * / var middleParam = x: 0,5, y: 0,5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 ny FluidObject (midt, middleParam); / * Bruk justeringen til bunnteksten * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 ny FluidObject (footer, footerParam);
Åpne website.fla i Flash, og sjekk igjen før du snakker filmen.
Det er ikke nødvendig å plassere symbolene på scenen fordi Website.as vil lage symbolinstanser fra biblioteket ved å bruke klassenavnene sine. Lenkeklassens navn på symbolene må være riktige for at skriptet skal kunne brukes. Koblings klassenavnet kan kontrolleres i bibliotekspanelet.
Klikk på Kontroll> Tekstfilm eller Ctrl (Cmd) + Enter for å teste flashwebsiden.
Prøv å endre størrelsen på vinduet og sjekk om alle objekter flyttes til riktig justering.
Hver FluidObject trenger nå å ha spesifikke x, y, offsetX og offsetY eiendomsverdier. En ny klasse vil bli opprettet i de kommende trinnene for å forenkle fremtidige koden når du legger til nye væskeobjekter.
Åpne en ny ActionScript-fil med navnet "SimpleFluidObject.as". Lagre denne filen i katalogen "FluidLayout" fordi dette er en del av FluidLayout-pakken.
Denne filen utvider FluidObject-klassen slik at den vil gi enkel justering ved å bruke navn som TOP, MIDDLE, BOTTOM_RIGHT i stedet for å spesifisere egenskapene x, y.
Her er skjelettet til klassen:
pakke FluidLayout import flash.events.Event; importer flash.display. *; offentlig klasse SimpleFluidObject utvider FluidObject offentlig funksjon SimpleFluidObject (mål: DisplayObject, paramObj: Object)
pakke FluidLayout import flash.events.Event; importer flash.display. *; offentlig klasse SimpleFluidObject utvider FluidObject offentlig funksjon SimpleFluidObject (mål: DisplayObject, paramObj: Object) / * Fortell foreldre klasse til init konstruktøren * / super (target, paramObj); / * tilordne justering og marginal verdi av konstruktørparametrene * / var alignment = paramObj.alignment; var margin = paramObj.margin; / * Forhåndsinnstilling av justering og marginal verdi hvis nødvendig * / if (alignment == undefined) alignment = "MIDDLE"; hvis (margin == undefined) margin = 0; / * konverter justeringen (f.eks. "TOP", "BOTTOM_RIGHT") til x, y, offsetX og offsetY * / var params = nytt objekt (); bytte (justering) tilfelle "TOP_LEFT": params = x: 0, y: 0, offsetX: margin, offsetY: margin; gå i stykker; tilfelle "TOP": params = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; gå i stykker; tilfelle "TOP_RIGHT": params = x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin; gå i stykker; tilfelle "VENSTRE": params = x: 0, y: .5, offsetX: margin, offsetY: -target.height / 2; gå i stykker; tilfelle "MIDDLE": params = x: .5, y: .5, offsetX: -target.width / 2 - margin / 2, offsetY: -target.height / 2 - margin / 2; gå i stykker; tilfelle "RIGHT": params = x: 1, y: .5, offsetX: -target.width - margin, offsetY: -target.height / 2; gå i stykker; tilfelle "BOTTOM_LEFT": params = x: 0, y: 1, offsetX: margin, offsetY: -target.height-margin; gå i stykker; tilfelle "BOTTOM": params = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height-margin; gå i stykker; tilfelle "BOTTOM_RIGHT": params = x: 1, y: 1, offsetX: -target.width - margin, offsetY: -target.height-margin; gå i stykker; _param = params; / * reposisjoner væskobjektet til riktig posisjon * / denne.reposisjonen ();
Se filen Website.as, og prøv å bruke den nye justeringsmetoden for å justere væskenobjektene.
Den gamle metoden for å tilpasse til Tittel:
/ * Bruk justeringen til tittelen * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 ny FluidObject (tittel, titleParam);
Den nye metoden for å tilpasse til Tittel:
var titleParam = justering: "TOP_LEFT", margin: 0 ny SimpleFluidObject (tittel, titleParam);
Tilgjengelige innstillinger:
Nå fungerer fluidjusteringen på "Test Movie" i Flash IDE, men det er en nøkkel pek på å gjøre dette arbeidet i nettleseren.
Åpne nettsiden.fla. Gå til Arkiv> Publiser innstillinger og sørg for at HTML er aktivert. Klikk på HTML-fanen og endre dimensjonen til "Prosent". Kontroller at prosent er satt til 100 på både bredde og høyde.
Klikk på "Publiser" for å publisere nettstedet som "website.swf" og "website.html" -filer.
Åpne nå "website.html" -filen med din favoritt tekstredigerer og legg til følgende kode i overskriften. Legge til koden rett etter tag ville være et godt valg.
Disse CSS-stilene eliminerer gapet mellom den øverste venstre siden av HTML- og SWF-filen.
En lettelse effekt kan brukes når nettleseren endres slik at objektene vil bevege seg til riktig posisjon med en enkel utgangseffekt.
Åpne "FluidObject.as". Legg til følgende linjer etter "import flash.display. *;". Disse linjene vil importere klassen Tweening animasjon for å gi kodens evne til å lette objektene.
/ * klasser som trengs for Easing Animation * / import fl.transitions.Tween; importere fl.transitions.easing. *;
Finn deretter følgende linjer i filen "FluidObject.as". De er innenfor "reposisjon" -funksjonen.
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Erstatt dem med følgende kode:
/ * angi lengden på den lette animasjonen (sekunder) * / var duration = 0.5; / * erklære den nye X / Y-verdien * / var newX = _target.x; var newY = _target.y; / * beregne den nye X-verdien basert på scenen Bredde * / hvis (_param.x! = undefined) newX = (stageW * _param.x) + _param.offsetX; / * beregne den nye Y-verdien basert på scenen Høyde * / hvis (_param.y! = undefined) newY = (stadiumH * _param.y) + _param.offsetY; / * Fortell flash til mellom målobjektet til den nye X / Y-posisjonen * / ny Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); ny Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Test filmen, objekter vil bli lettere når nettleseren endrer størrelsen
Vi har nettopp opprettet to klasser som har ansvar for flytende væskeobjekter. Vi har også laget et eksempel for å justere forskjellige objekter på scenen ved å bruke klassene. Dette eksemplet er bare et eksempel tilfelle; du kan bruke fantasien til å spille med justeringer. For eksempel kan et symbol være interaktivt og dets justering kan endres fra topp til bunn når brukeren klikker på den.
Filstrukturen skal være den samme som nedenfor når du har fullført denne opplæringen. Spesielt bør FluidObject.as og SimpleFluidObject.as være i katalogen "FluidLayout" for å kunne jobbe.
Nyt Fluid Layout!
Accentsconagua