Zoom Into Your Own lerret av innholdet
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Noen malerier krever at du ta en nærmere titt for å se alle detaljene. Nå i stedet for et maleri, tenk et tomt lerret som kan fylles med bilder og tekst og dynamiske beskrivelser.
Vi fant denne awesome forfatteren takket FlashGameLicense.com, stedet å kjøpe og selge Flash-spill.
//Legg pagespages = new Array (xmldata.page.length ()); for hver (var p: XML i xmldata.page) {var id: int = int (p.attributes () [ ,,,0],0]); sider [id] = ny Page (pageScroller, p, g_background);}
Trinn 8: Lage en Page
Viste nedenfor er konstruktøren av siden. Vi bare lagre alle parametrene lokalt i klassen for senere bruk
offentlig funksjon Page (container: Display, data: XML, bakgrunn: BitmapData). {This.id = id; this.container = beholder; this.data = data; this.background = bakgrunn; this.title = String (data.attributes () [1]);}
Nå litt mer interessante ting. Load funksjon Page starter ved å ta bakgrunnen tekstur vi lastet før og pakke det over lerretet. For å gjøre dette trenger vi å vite størrelsen på bakgrunnsbildet vi looping og størrelsen på hele lerretet. Lag en Sprite kalt g_background som fungerer som en grafikk container. Legg en solid bakgrunnsfarge for å forhindre linjer mellom bitmap bilder å vise.
Var b: int = background.width; Var h: int = background.height; Var trueWidth: int = Canvas.contentWidth; Var trueHeight: int = Canvas.contentHeight; //Bakgrunn layerg_background = new Sprite (); addChild (g_background); //En solid bakgrunn colorvar bg: Sprite = new Sprite (); bg.graphics.beginFill (Canvas.viewerBgColor); bg.graphics.drawRect (0, 0 , trueWidth, trueHeight); bg.graphics.endFill (); g_background.addChild (bg);
Innpakning bakgrunnen tekstur bruker to sløyfer, bare vertikalt og ett horisontalt. Det holder på looping inntil kanten er nådd. Hver hver flis på en enda stilling - som (2,2), (4,2), (4,6) et cetera - er snudd rundt ved hjelp scaleX eller Scaley. Dette gjør teksturen strøm over til neste sømløst. Sjekke om et tall er enda gjøres ved hjelp av modulo operatør (%). Hvis resten av et tall etter deviding av to er null da at antallet må være enda. Rundt kantene vi klippe av noen tekstur som går utenfor innholdsdimensjoner som angitt i trueWidth og trueHeight. Det er viktig at Page objektet forblir denne størrelsen som gjør det større vil endre sideforholdet og føre til skjermen for å deformere
//Legg løkker bakgrunn imagevar i: int, j. Int; while (i * b < trueWidth) {j = 0; while (j * h < trueHeight) {//ny bitmap Var s: Bitmap = new Bitmap (bakgrunn); //Posisjon s.x = i * b; s.y = j * h; //Alternativ horisontal og vertikal flip hvis (i% 2 = 0) {s.scaleX * = 1; s.x + = b; } If (j% 2 = 0) {s.scaleY * = 1; s.y + = h; } //Klipp if (i * b + b > trueWidth || j * h + h > trueHeight) {var clipw: int = Math.min (trueWidth - i * b, b); Var cliph: int = Math.min (trueHeight - j * h, h); Var NBD: BitmapData = new BitmapData (clipw, cliph); nbd.copyPixels (bakgrunn, ny rektangel (0, 0, clipw, cliph), ny Point ()); s.bitmapData = NBD; if (s.scaleX == -1) s.x - = b - clipw; if (s.scaleY == -1) s.y - = h - cliph; } //Legge bitmap å vise liste g_background.addChild (s); j ++; } I ++;}
Resultatet av den repeterende bakgrunn bør være noe sånt som dette. Mørke kanter blir lagt for klarhet
Trinn 9:. Loading Text
La oss starte vår side fyller reisen ved å legge til tekst. Gå gjennom alle XML oppføringer merket "tekst", og sende sine data til AddText funksjon
tekster = new Array (); for hver. (Var teksten: XML i data.text) {AddText (tekst);}
Den AddText funksjonen ser slik ut. Den første delen av koden validerer XML-data. I tilfelle noen felt ikke er fylt i den vil legge til en standard verdi. QuickText er en klasse som brukes til å opprette en tekstfeltet med visse alternativer. Endelig, må teksten være utelukket fra mus samhandling ved hjelp mouseEnabled = false og mouseChildren = false
privat funksjon AddText (tekst: XML):. (! Text.font) void {if text.font = null; (! text.size) hvis text.size = 12; (! text.color) hvis text.color = 0x000000; (! text.bold) hvis text.bold = 0; (! text.italic) hvis text.italic = 0; Var qt: QuickText = new QuickText (text.x, text.y, String (text.content), Canvas.customFont, int (text.size), uint (text.color), Boolean (text.bold), boolsk ( text.italic)); qt.blendMode = BlendMode.LAYER; texts.push (qt); addChild (qt); qt.mouseEnabled = false; qt.mouseChildren = false;}
Følgende bilde viser alle alternativene i QuickText Klasse:
Og resultatet av den nye siden, inkludert tekst:
Trinn 10: Lasting Images
Det første trinnet er å lage bildeobjekter som vil holde XML-data, bitmap og noen beskrivende tekst. Lyttere er direkte søkt om mus samhandling. Alle disse Bilde objekter blir deretter lagret i en matrise for enkel tilgang senere
//ta alt imagespictures = new Array (); for hver (var bilde: XML i data.image). {//Nytt bilde objekt med informasjon i det Var bilde: Picture = new Picture (bilde); pictures.push (bildet); //Legge lyttere til Bild picture.addEventListener (MouseEvent.MOUSE_OVER, PictureMouseOver); picture.addEventListener (MouseEvent.MOUSE_OUT, PictureMouseOut); picture.addEventListener (MouseEvent.MOUSE_DOWN, PictureMouseDown);}
Og her er den grunnleggende versjonen av Picture klassen, bare holder XML-data. Bildet strekker Sprite, kan vi allerede plassere den et sted. Skalaen innstillingen er verifisert før de blir brukt, fordi hvis brukeren utelater det fra XML vil den returnere 0. standard verdi for skala er 1.
offentlig funksjon Picture (data: XML) {title = data.title; description = data.description; url = data.url; page = data.page; x = data.x; y = data.y; if (Number (data.scale) = 0!) imgscale = Number (data.scale);}
Opprett en ny BulkLoader akkurat som første gang, men nå til å laste bilder av gangen. Vi kommer til å være lasting 5 bilder på en gang og vise dem når du er ferdig. Det vil holde hente nye bilder før alt er ferdig. Funksjonen Komplett kalles ved avslutningen av hvert parti
//Opprett bulk loader.loader = new BulkLoader ("side" + id);. Loader.addEventListener (BulkLoader.COMPLETE, Komplett, falsk, 0, true); < br /> < br /> //satt totale mengden picturestotalPictures = pictures.length; //Ta de første 5 bildene eller den totale mengden av bilder hvis det er less.i = 0; while (i < Math.min (totalPictures, 5)) {loader.add (String (Canvas.path + bilder [i ] .url), {id: "img" + i}); i ++;} //Start loaderloader.start ();
Trinn 11: Legge Images (fortsatt)
I dette trinnet skal vi sette de lastede data i bilde stedene. Den elementer eiendom lasteren holder alle objekter som har blitt lagt i. Løkken over alle disse objektene og sjekk om de er et bilde. Hver Bitmap er gitt til tilsvarende Picture objektet og bilde er lagt til lerretet. Vi sletter også lastet bildet fra listen dumper elementer for å hindre konflikt med en senere batch av lastet bilder.
//Bilde batch lastet. lagre data til individuell Picture objects.i = amountPicturesLoaded, for hver (var element: LoadingItem i loader.items) {if (item.isImage ()) {bildene [i] .SetImage (loader.getBitmap (item.id)); loader.remove (item.id); AddPicture (bilder [i]); i ++; amountPicturesLoaded ++; }}
Og en nærmere titt på SetImage funksjonen Picture
offentlig funksjon SetImage (ob: Bitmap):. void {//hvis ingen data er lastet inn, viser ingenting hvis (ob == null) tilbake; //Lagre data i klassen img = ob; //Showet bilde addChild (img); //Skala img.scaleX = img.scaleY = imgscale;}
Og legger til et bilde til lerretet er like enkelt som å ringe addChild
privat funksjon AddPicture (pict: Bilde):. Void {addChild (pict); }
Resultatet blir nå:
Trinn 12: Legge til Page
Legge noe til kameraet syn gjøres ved å legge et barn til viewerScroller container. Vi har lagt til viewerScroller til hver Page objekt som parameter, slik at vi kan legge det til som et barn ved å ringe Show () -funksjonen på siden
offentlig funksjon Show (). Void {container.addChild (denne); }
Gå tilbake til Canvas klassen og kaller Load () og Show () funksjoner når vi ønsker et show brukeren en side. Ved siden allerede er lastet inn, vil Load () returnere direkte så ingen unødvendige handlinger er gjort. Den nåværende siden vi viser reddes i klassen som siden. . Denne referansen vil være viktig for side interaksjon
privat funksjon utstillingssiden (nr: int): void {//skjule gamle siden if (side) page.Hide (); //Satt ny side side = sider [nr]; page.Load (); page.Show ();}
Trinn 13: Zoom Modes
Nå som vi har laget vår side med bilder og tekst, er det nødvendig å skalere det slik at det vil passe inn vår seer region . Vi bruker public static variabler zoom og magnifyStep for dette formålet. magnifyStep er en matrise som holder alle de forskjellige skala verdier av kameraet og zoom er den aktuelle posisjonen magnifyStep kameraet er skalert til. Å vite hvilke skaleringsverdi er nødvendig for å passe innholdet inne betrakteren vi trenger å vite forholdet mellom innhold og viewer regioner. Å ta høyde for feil størrelsesforhold vi tar minimal forholdet mellom bredde og høyde slik:
//Set foredle steplistmagnifyStepList [0] = Math.min (viewerWidth /contentWidth, viewerHeight /contentHeight);
Vi vil gjerne for å zoome inn når du klikker på lerretet. Legg en mus hendelse til hitfield av siden. Den hitfield er i utgangspunktet bare grafikken i bakgrunnen på siden, og fordi det er en Sprite vi kan sette muse samhandling på den
page.hitField.addEventListener (MouseEvent.MOUSE_DOWN, MouseZoomIn);.
Ved et museklikk vi ønsker at kameraet skal skalere ned til posisjonen zoom i magnifyStepList og flytte til et punkt på lerretet som vi klikket. Husker fra eksempelet at så kameraet blir mindre (skalerer ned), blir zoom på lerretet større. Det er derfor vi redusere heltall zoom med verdien en. Å få museposisjonen vi klikket på lerretet er enkelt ved hjelp page.mouseX og page.mouseY. Flash konverterer automatisk tallene slik at det ser ut til lokale - noe som betyr at hvis siden er for eksempel 2 000 px skalert ned med 50%, og du klikker halvveis, returnerer 1 000 px, selv om musen posisjon på skalaen koordinater er mye mindre <. br> privat funksjon MouseZoomIn (e: MouseEvent): void {var pt: Point; if (cam.bZooming &! & zoom > 0) {//zoom i ett trinn zoom--; //New kamerapunkt. Riktig grensene. pt = new Point (page.mouseX, page.mouseY); CameraBounds (pt); cam.Zoom (pt.x, pt.y, magnifyStepList [zoom]); }}
Trinn 14: Korrigering kameraets posisjon
For å holde området av kameraet inne lerretet må vi korrigere posisjonen innenfor rammene av kameraet. Ser vi på eksempelet kameraet igjen for en demonstrasjon av dette. Kameraet er sentrert rundt seg slik posisjon horisontalt for eksempel må holde seg innenfor 0 + kamera halv bredde og contentWidth - kamera halv bredde. En pålitelig måte å beregne bredden på kameraet når du zoomer inn er contentWidth /2 * magnifyStepList [zoom], fordi kameraet i sin første unzoomed tilstand har størrelsen contentWidth (samme størrelse som lerretet).
private funksjons CameraBounds (pt: Point): void {//horisontalt if (pt.x < contentWidth /2 * magnifyStepList [zoom]) pt.x = contentWidth /2 * magnifyStepList [zoom]; else if (pt.x > contentWidth - contentWidth /2 * magnifyStepList [zoom]) pt.x = contentWidth - contentWidth /2 * magnifyStepList [zoom]; //Vertikalt if (pt.y < contentHeight /2 * magnifyStepList [zoom]) pt.y = contentHeight /2 * magnifyStepList [zoom]; else if (pt.y > contentHeight - contentHeight /2 * magnifyStepList [zoom]) pt.y = contentHeight - contentHeight /2 * magnifyStepList [zoom];}
Synlig i bildet nedenfor er kameraet og lerret, zoomet inn en gang. De røde linjene viser grensene at kameraet ikke kan krysse, og må holde seg innenfor
Trinn 15:. Gjør Zoom Work
Zooming er utført ved å legge skala til kameraet. Vi bruker Tweener klassen og "easyOutQuint" overgang å få dette til på en smidig måte. bZooming er en variabel som brukes for å se om kameraet er allerede zooming eller ikke. Du kan ikke zoome på siden igjen mens det er fortsatt opptatt skalere opp eller ned. . Ved hver oppdatering av kameraet funksjonen Update kalles, som utfører skalering på innholdet
offentlig funksjon Zoom (newx: int, newy: int, newscale: Number): void {bZooming = true; Tweener.addTween (dette, {: 2, x: newx, y: newy, overgang: "easeOutQuint", scaleX: newscale, Scaley: newscale, onComplete: function (): void {bZooming = false;}, onUpdate: Oppdatering });}
Trinn 16: En nærmere titt på Bilder fra
Husk at vi har lagt MouseEvent lyttere til alle bildene inne på siden. Hva vi ønsker å gjøre er å zoome inn på et bilde når man er klikket på, og sørge for at det passer innenfor betrakteren regionen godt. Bilder mindre enn den faktiske betrakteren regionen må ikke skaleres utover sin oppløsning
privat funksjon PictureMouseDown (e: MouseEvent): void {var newScale: Number;. Var screenRatio: Number = Canvas.viewerWidth /Canvas.viewerHeight; Var imgW: Number = Math.max (e.target.width * 1,05, Canvas.viewerWidth); Var imgH: Number = Math.max (e.target.height * 1,05, Canvas.viewerHeight); Var imgRatio: Number = e.target.img.width /e.target.img.height //Beregn bildeskalering if (imgRatio < 1) newScale = imgH /Canvas.contentHeight; annet newScale = imgW /Canvas.contentWidth; Canvas.cam.Zoom (e.target.x + e.target.width /2, e.target.y + e.target.height /2, newScale); Canvas.cam.bLocked = true; PictureMouseDisable ();}
Det grunnleggende konseptet her er at størrelsesforholdet på et bilde må først bli bestemt. Hvis bredden på et bilde er høyere enn høyden da imgRatio < 1 vil holde til stede, og vice-versa hvis høyde er større enn bredden. Vi vil alltid skalere til den største del av et bilde, noe som betyr at hvis bildet er for eksempel 200x400px, vil vi behandle bildet som en 400x400 kvadrat. Et annet tillegg her er at vi skalere bildet med 1.05 først, noe som betyr at bildet blir 5% større. På denne måten bildet ikke kommer i kontakt med sidene når du zoomer inn. For å beregne omfanget av et bilde i forhold til innholdet størrelsen vi dele det med høyde eller bredde på innholdet.
Ring Zoom-funksjon kamera og flytte til midten av bildet vi fokusere på og bruke den nye skalaen som vi har beregnet.
Her er bildet zooming prosessen vist i aksjon. Legg merke til hvordan kameraet holdes innenfor rammene av siden, og hvordan hele bildet herunder beskrivelsen passer inni skjermen perfekt
Trinn 17:. Rulle Side
Hvis du ikke hadde 't lagt merke til, når du zoomer inn på en side du kan flytte musepekeren til kantene av skjermen for å bla deg rundt og se mer på siden. Koden vist nedenfor kan se litt bisarre til deg; det er noe jeg har skrevet en stund siden for en RTS stil spillmotor og har blitt re-brukt det siden for noe som trenger å rulle. Grunnprinsippene her er at du sjekke hvor museposisjonen er, og i tilfelle den beveger seg uten en viss rekkevidde rundt størrelsene (mouse_scroll_areax_reduced og mouse_scroll_areay_reduced) så vil det begynne å bevege seg til den ene siden med en hastighet i forhold til hvor langt du er inne dette området . Når musepekeren er ikke inne i serien vil det sette en dra på rulling for å roe det ned til slutt
//Få mengden scolling behov basert på musen positionmx = viewerContainer.mouseX;. Min = viewerContainer.mouseY; if (mx < mouse_scroll_areax & & mx > 0) {scrollAmountX = ((((mx - mouse_scroll_areax) /mouse_scroll_areax_reduced) * mouse_scroll_factor) + 0,5) < < 0;} else if ((viewerContainer.width - mx) < mouse_scroll_areax & & mx < viewerContainer.width) {scrollAmountX = (((1 - (viewerContainer.width - mx) /mouse_scroll_areax_reduced) * mouse_scroll_factor) +. 5) < < 0;} if (min < mouse_scroll_areay & & min > 0) {scrollAmountY = ((((min - mouse_scroll_areay) /mouse_scroll_areay_reduced) * mouse_scroll_factor) + 0,5) < < 0;} else if ((viewerContainer.height - min) < mouse_scroll_areay & & min < viewerContainer.height) {scrollAmountY = (((1 - (viewerContainer.height - min) /mouse_scroll_areay_reduced) * mouse_scroll_factor) +. 5) < < 0;} //Sett drag på rulle, så det holder ikke på å flytte evig og bremser ned smoothly.scollAmountX * = 0,95; scrollAmountY * = 0,95; //Update kamera positioncam.x + = int (scrollAmountX); cam.y + = int (scrollAmountY); //Pass på at kameraet er innenfor boundsvar pt: Point = new Point (cam.x, cam.y); CameraBounds (pt); cam.x = pt.x; cam.y = pt.y; //Oppdater Kameraet viewcam.Update ();
Nedenfor er det området der muse samhandling for rulling oppstår. Husk at det kan bare skje når du zoomer inn.
Konklusjon
Jeg tror dette oppsummerer alle læringsmålene jeg satt ut for denne opplæringen. Dessverre kunne ikke alt som vises på søknaden bli diskutert på grunn av omfanget av opplæringen, men jeg håper du klarte å lære det grunnleggende om XML-data, siden fylling og kamera manipulasjon. Takk for lesing!