Quick Tips: Strekk SWF med Stage.ScaleMode

Quick Tips: Strekk SWF med Stage.ScaleMode
5
Del
en
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Hva skjer når en nettside crams SWF inn i et område hvor det ikke passer? I denne hurtig Tip, vil du finne ut hvordan du kan ta kontroll over hvordan SWF skalaer




Trinn 1:. Sett opp ditt SWF

Start en ny Flash-prosjektet, og sette scenen for å være 350 piksler bred, 250px høy

Lag et grunnlagsdokument klasse (se denne Quick Tips for mer info).
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main () {}}}

FLA (og SWC, for de av dere som ikke bruker Flash Pro) i zip-filen inneholder to eiendeler:

CheckedBackground
, som er samme størrelse som scenen, med sin registrering punkt i øverste venstre hjørne.

Face
, som er omtrent halvparten så bred som på scenen, . med sin registrering punkt i sentrum

Plasser dem på scenen slik:
public class Hoved strekker Sprite {private Var checkedBackground: CheckedBackground; private Var ansikt: Face; offentlig funksjon main () {checkedBackground = new CheckedBackground (); checkedBackground.x = 0; checkedBackground.y = 0; this.addChild (checkedBackground); face = ny Face (); face.x = stage.stageWidth /2; //sentrum ansiktet horisontalt face.y = stage.stageHeight /2; //sentrum ansiktet vertikalt this.addChild (ansiktet); }}

Kjør SWF:



Trinn 2: Strekk spilleren Window

Gjør vinduet større, gjøre den mindre, strekke det både inn og ut av proporsjoner, og se hvordan innholdet endres:

Dette er Flash standard skala modus, SHOW_ALL
. Innholdet er aldri forvrengt, og du kan alltid se hele scenen. Dette betyr at du får en "letterbox" effekt hvis strekke ut av proporsjoner



Trinn 3:. Prøv NO_BORDER Scale Mode

SHOW_ALL
er standard skala modus , men det er tre andre vi kan bruke

Importer StageScaleMode Klasse:
import flash.display.StageScaleMode;

Denne inneholder statiske consts som kan brukes til å sette skalaen modus.. La oss prøve NO_BORDER
; legge til denne linjen i konstruktør-funksjon:
stage.scaleMode = StageScaleMode.NO_BORDER;

Kjør din SWF og strekke det igjen:

Som navnet antyder, NO_BORDER
unngår letterbox effekt. Innholdet bo i proporsjon, men alltid fylle det tilgjengelige området, selv om det betyr å beskjære kantene



Trinn 4:. Prøv EXACT_FIT Scale Mode

Endre linjen som setter skalaen modus slik:
stage.scaleMode = StageScaleMode.EXACT_FIT;

Prøv det ut:

EXACT_FIT
gjør kantene på scenen pinne til kantene av tilgjengelig areal, fører til forvrengning hvis spilleren er strukket ut av proporsjoner



Trinn 5:. Prøv NO_SCALE Scale Mode

Hvis du vil sjekke ut det endelige omfanget modus, endrer linjen slik:
stage.scaleMode = StageScaleMode.NO_SCALE;

Sjekk det ut:

Med NO_SCALE
, gjør innholdet ikke endre størrelsen i det hele tatt; de bo sentrert i spillervinduet, selv om det betyr å beskjære store mengder kantene, eller forlater massive grenser på alle sider.



Konklusjon

Stage.scaleMode lar deg kontrollere hvordan SWF vises hvis en nettside endrer størrelsen på det tilgjengelige området. Det er også nyttig for å lage AIR apps og full skjerm Nettsteder; NO_SCALE
er et spesielt godt valg der, som (når den kombineres med en RESIZE hendelse lytteren) det tillater deg å passe hele innholdet i vinduet, og samtidig opprettholde størrelsen og proporsjonene av de enkelte eiendeler. Anmeldelser

For mer om det, sjekk ut Franci Zidar serie på full skjerm skalerbare Nettsteder :) Anmeldelser