Build en Fluid Nettstedet Layout med Flash
Del
Del
to
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert i juli 2009.
En væske web layout bruker 100% bredde (og høyde) av nettleseren, flytende alle inneholdt elementer i visse stillinger. Dette er i motsetning til fast bredde layout hvor innholdet ligger fast uansett hva størrelsen leseren er.
Denne teknikken er populær i HTML /CSS nettsteder, men dette tut vil vise deg hvordan du opprette et lignende væske layout effekt i Flash. Hvert element vil omstille seg med letthet animasjon når nettleseren endrer størrelsen.
Innledning
I løpet av de neste trinnene vil vi lage Actionscript 3 klasser som gjør vår flash webside væske. Alle våre displaysymbolene vil beholde sin innretting når Flash er endret
Action klasser som er opprettet i denne opplæringen kan lett gjenbrukes i ulike prosjekter
Trinn 1:.. Bakgrunnsinformasjon
Som vist på bildet nedenfor, alle elementer som flyter i henhold til størrelsen leseren vil bli referert til som "flytende objekter"
Trinn 2:. Fluid Object Koordinater Anmeldelser
Hver væske objektet vil inneholde justeringsparametere. Parametrene lagre x, y, x offset, y offset verdien av gjenstanden for å indikere hvor det er justert.
Tildele x og y til 0 vil gjøre væsken objektet justere til venstre kryss. Tilordne x og y til 1, vil væsken objektet justere lavt i høyre hjørne. Derfor vil tildele x- og y-verdi mellom 0 og 1 flyte gjenstanden ved en prosentandel av bredden og høyden av nettleseren.
Forskyvningen X og Y offset posisjonen av fluid gjenstander mens de justeres. Utligne nyttig når du plasserer et objekt som justering Poenget er ikke i sentrum. Forskyvningen er også nyttig for å lage marginer på justeringen
Trinn 3:. Lag en katalog
Lag en katalog som heter "FluidLayout" i arbeidskopien. Denne katalogen vil lagre alle klasser som er knyttet til de flytende layout klasser.
Det er en god vane å sette Action class filer i kataloger etter kategori. For eksempel vil væske layout klasser bli plassert i "FluidLayout" -mappen i dette tilfellet.
La oss gjøre tittelen først. Målet med denne opplæringen er å skape flytende symboler i væsken layout heller da lage fancy nettside komponenter. Symbolene vil kun inneholde et tekstfelt som indikerer bare til formålet.
For tittelen symbol, det er en semi-transparent bakgrunn. . For å passe forskjellige bredder av nettleseren, bredden av bakgrunnen må være store nok
Etter å ha ferdig med å tegne symbolet Klikk Endre > Konverter til Symbol (F8). Klikk på "Avansert" knappen for å vise detaljerte innstillinger for symbolet.
Klikk "Export for Action" for å aktivere Actionscript for å få tilgang til dette symbolet. Deretter finne "Class" -feltet i dialogboksen og sett verdien til "Title" for tittelen symbol. Dette betyr at vi har tildelt en ny klasse kalt "Title" til dette symbolet. Vi kan bruke dette symbolet senere i Actionscript.
Husk å navngi symbol for enkel gjenkjenning før du klikker OK. Hvis en dialogboks åpnes med meldingen "En definisjon for denne klassen ble ikke funnet i klassebanen, ..." igjen, bare klikk "OK" for å omgå den. Siden vi ikke skal legge noen atferd til symbolet, vil vi gi Flash opprette en tom klasse for oss
Trinn 14:. Tegn Andre symboler
Slett "title "symbol eksempel på scenen fordi det vil være skapt av Action senere.
Vi vil bruke samme metode for å tegne" bakgrunn "," meny "," midt innhold "og" footer ". Klassen navnet av disse symbolene vil være Bakgrunn Bakgrunnsbildet kan lastes ned fra kildefilene. Andre symboler er tekst-feltet bare Opprett en Actionscript-fil og navngitt som "Website.as"; denne klassen filen skal lagres i samme katalog som website.fla filen. Denne klassen må også har samme navn som den som er innstilt på dokument Class (se trinn 12). For eksempel dokument Class "Nettstedet" refererer til "Website.as" i samme katalog. Dette Action klassen vil bli lastet rett etter blitsen er lastet Her er skjelettet av dokument Klasse:.. Åpne website.fla i Flash og sjekk igjen før tekste filmen Det er ikke nødvendig å plassere symboler. på scenen fordi Website.as vil skape symbol tilfeller fra biblioteket ved hjelp av sine klassenavn. Koblingen klasse navn av symbolene må være riktig for at skript for å bruke dem. Koblingen klassenavn kan kontrolleres i biblioteket panel Klikk Control > . Tekst Movie eller Ctrl (Cmd) + Enter for å teste flash nettsted Prøv å endre størrelse på vinduet og sjekke om alle objekter er reposisjonering til riktig justering Hver FluidObject nå må ha konkrete x, y, offsetX og offsetY eiendomsverdier. En ny klasse vil bli opprettet i de kommende tiltak for å forenkle fremtidig kode når du legger til nye flytende gjenstander Åpne en ny Actionscript-fil som heter "SimpleFluidObject. som". Lagre denne filen inne i "FluidLayout" katalog, fordi dette er en del av FluidLayout pakken. Denne filen strekker FluidObject klassen slik at det vil gir enkel justering ved hjelp av navn som øverste, midte BOTTOM_RIGHT stedet for å spesifisere x ., y egenskaper Her er skjelettet av klassen: Gå igjennom Website.as filen og prøve å bruke den nye justeringen metode for å justere væske objektene The Old Metode for å søke justering til Tittel: Den nye metoden for å søke justering til Tittel: Nå væsken justeringen fungerer på "Test Movie" i Flash IDE, men det er en -tasten Åpne website.fla. Gå til Fil > Publish Settings og sikre HTML er aktivert. Klikk på HTML-fanen og endre dimensjon til "Prosent". Kontroller at prosent er satt til 100 på både bredde og høyde. Klikk på "Publiser" for å publisere nettsiden som "website.swf" og "website.html" filer. Nå åpner "website.html" fil med din favoritt teksteditor og legge til følgende kode i spissen. Legge inn koden rett etter < /title > tag ville være et godt valg Disse CSS-stiler eliminere gapet mellom øvre venstre side av HTML og SWF-fil En lettelser effekten kan brukes når nettleseren endrer størrelse slik at gjenstandene flyttes til riktig posisjon med en letthet ut effekt . Åpne "FluidObject.as". Legg til følgende linjer etter "import flash.display. *;". Disse linjene vil importere tweening animasjon klassen å gi koden evnen til å lette gjenstander Twitter /* klasser som trengs for lettelser Animasjon * /import fl.transitions.Tween.; importere fl.transitions.easing. *; Så finner følgende linjer i "FluidObject.as" fil. De er innenfor "omplassere" -funksjonen Erstatt dem med følgende kode: Twitter /* angi varigheten på animasjonen lettelser (sekunder) * /var varighet = 0,5; /* Erklære den nye X /Y-verdien * /var newX = _target.x; Var newy = _target.y; /* Beregne ny X-verdi basert på scenen Bredde * /if (_param.x = udefinert!) {NewX = (stageW * _param.x) + _param.offsetX; } /* Beregne ny Y verdi basert på scenen Høyde * /if (_param.y = udefinert!) {Newy = (stageH * _param.y) + _param.offsetY; } /* Fortell flash til tween målobjektet til den nye X /Y posisjon * /ny Tween (_target, "x", Strong.easeOut, _target.x, newX, varighet, true); ny Tween (_target, "y", Strong.easeOut, _target.y, newy, varighet, true); Test filmen, vil objektene bli lettelser når nettleseren skale Vi har nettopp opprettet to klasser som er ansvarlig for de flytende væske stedene. Vi har også laget et eksempel for å justere forskjellige objekter på scenen ved hjelp av klasser. Dette eksemplet er bare et utvalg case; du kan bruke fantasien til å spille med de justeringer. For eksempel kan et symbol være interaktiv og justeringen kan endre seg fra topp til bunn når brukeren klikker på den. filstrukturen bør være den samme som under etter at du er ferdig med denne opplæringen. Spesifikt bør FluidObject.as og SimpleFluidObject.as være i "FluidLayout" katalog for å fungere. Nyt Fluid Layout! Anmeldelser
, Meny
, Middle Hotell og Footer
tilsvarende.
Trinn 15:. Kode dokument Class
Pakke {import flash.display *; import FluidLayout. *; public class Nettstedet strekker MovieClip {offentlig funksjon nettside () {}}}
Trinn 16:. Implementere Constructor
pakke {import flash.display *; import FluidLayout. *; public class Nettstedet strekker MovieClip {offentlig funksjon nettside () {/* Sett Scale Mode av Stage * /stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; /* Legg symbolene for å iscenesette * /var bg = new Bakgrunn (); addChild (bg); Var title = ny tittel (); addChild (tittel); Var menyen = new Meny (); addChild (meny); Var midten = new Middle (); addChild (midten); Var footer = ny bunntekst (); addChild (footer); /* Påfør justeringen til bakgrunnen * /var bgParam = {x: 0, y: 0, offsetX: 0, offsetY: 0} nytt FluidObject (bg, bgParam); /* Påfør justeringen til tittelen * /var titleParam = {x: 0, y: 0, offsetX: 0, offsetY: 0} nytt FluidObject (tittel, titleParam); /* Påfør justeringen til menyen * /var menuParam = {x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20} ny FluidObject (meny, menuParam); /* Påfør justering til innholdet * /var middleParam = {x: 0,5, y: 0,5, offsetX: -middle.width /2, offsetY: -middle.height /2} ny FluidObject (midten middleParam); /* Påfør justeringen til bunntekst * /var footerParam = {x: 1, y 1, offsetX: -footer.width - 10, offsetY: -footer.height -10} ny FluidObject (bunntekst, footerParam); }}}
Trinn 17: Sørg for at alle eiendelene er klare
Trinn 18:. Klar til å se resultatet
Trinn 19:. Ytterligere Arbeid
Trinn 20:. SimpleFluidObject Class
pakke FluidLayout {import flash.events.Event; importere flash.display. *; public class SimpleFluidObject strekker FluidObject {offentlig funksjon SimpleFluidObject (mål: Displayobject, paramObj: Object) {}}}
Trinn 21: Gjennomføring av Constructor
pakken FluidLayout {import flash.events.Event; importere flash.display. *; public class SimpleFluidObject strekker FluidObject {offentlig funksjon SimpleFluidObject (mål: Displayobject, paramObj: Object) {/* Fortell ordnede klassen til init konstruktøren * /super (target, paramObj); /* Tildele justering og margin verdi av konstruktørparametre * /var alignment = paramObj.alignment; Var margin = paramObj.margin; /* Preset innretting og margin verdi hvis behovet * /if (justering == udefinert) alignment = "Middle"; if (margin == udefinert) margin = 0; /* Konvertere justeringen (f.eks "TOP", "BOTTOM_RIGHT".) Til x, y, offsetX og offsetY * /var params = new Object (); bryteren (justering) {case "TOP_LEFT": params = {x: 0, y: 0, offsetX: margin, offsetY: margin}; gå i stykker; case "TOP": params = {x: 0,5, y: 0, offsetX: -target.width /2, offsetY: margin}; gå i stykker; case "TOP_RIGHT": params = {x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin}; gå i stykker; case "LEFT": params = {x: 0, y: 0,5, offsetX: margin, offsetY: -target.height /2}; gå i stykker; case "middle": params = {x: 0,5, y: 0,5, offsetX: -target.width /2 - margin /2, offsetY: -target.height /2 - margin /2}; gå i stykker; case "RIGHT": params = {x: 1, y: 0,5, offsetX: -target.width - margin, offsetY: -target.height /2}; gå i stykker; case "bottom_left": params = {x: 0, y: 1, offsetX: margin, offsetY: -target.height - margin}; gå i stykker; case "Bottom": params = {x: 0,5, y: 1, offsetX: -target.width /2, offsetY: -target.height - margin}; gå i stykker; case "BOTTOM_RIGHT": params = {x: 1, y 1, offsetX: -target.width - margin, offsetY: -target.height - margin}; gå i stykker; } _param = Params; /* Omplassere væsken objektet til riktig posisjon * /this.reposition (); }}}
Trinn 22:. Nytt Bruk av Fluid Objekter
/* Bruk justeringen til tittelen * /var titleParam = {x: 0, y: 0, offsetX: 0, offsetY: 0} nytt FluidObject (tittel, titleParam);
Var titleParam = {justering: "TOP_LEFT", margin: 0} nytt SimpleFluidObject (tittel, titleParam); < p> Tilgjengelige justeringer:
TOP_LEFT, TOP, TOP_RIGHT
VENSTRE, midten, høyre
bottom_left, BOTTOM, BOTTOM_RIGHT
Trinn 23: The Publisert HTML
poeng å gjøre dette arbeidet i nettleseren.
. <. style > body {margin: 0; padding: 0; } ≪ /style >
Trinn 24: Avansert teknikk Legge Lettelser
_target.x = stageW * _param.x + _param.offsetX.; _target.y = stageH * _param.y + _param.offsetY;
Konklusjon