Rask Tips Strekk SWF med Stage.ScaleMode

Hva skjer når et nettsted knytter SWF til et område der det ikke passer? I denne Quick Tip finner du ut hvordan du tar kontroll over hvordan din SWF skalerer.


Trinn 1: Konfigurer SWF

Start et nytt Flash-prosjekt, og sett scenen din til 350px bred, 250px høy.

Opprett en grunnleggende dokumentklasse (se denne Quick Tip for mer info):

 pakke import flash.display.Sprite; offentlig klasse Hoved utvider 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 like stor som scenen, med registreringsstedet i øverste venstre hjørne.

Ansikt, som er omtrent halvparten så bred som scenen, med registreringspunkt i sentrum.

Plasser dem på scenen slik:

 offentlig klasse Main utvider Sprite private var checkedBackground: CheckedBackground; privat var ansikt: ansikt; offentlig funksjon Main () checkedBackground = new CheckedBackground (); sjekketBackground.x = 0; sjekketBackground.y = 0; this.addChild (checkedBackground); ansikt = nytt ansikt (); face.x = scene.stageWidth / 2; // senter ansiktet horisontalt face.y = stage.stageHeight / 2; // senter ansiktet vertikalt this.addChild (ansikt); 

Kjør SWF:


Trinn 2: Strekk spillervinduet

Gjør vinduet større, gjør det mindre, strekk det både inn og ut og se hvordan innholdet endres:

Dette er Flashs standardskala modus, VIS ALT. Innholdet blir aldri forvrengt, og du kan alltid se hele scenen. Dette betyr at du får en "letterbox" -effekt hvis den strekker seg ut av forholdet.


Trinn 3: Prøv NO_BORDER Scale Mode

VIS ALT er standardskala modus, men det er tre andre vi kan bruke.

Importer StageScaleMode-klassen:

 importer flash.display.StageScaleMode;

Dette inneholder statiske consts som kan brukes til å angi skaleringsmodus. La oss prøve NO_BORDER; legg til denne linjen til konstruktørfunksjonen din:

 stage.scaleMode = StageScaleMode.NO_BORDER;

Kjør din SWF og strekk den igjen:

Som navnet antyder, NO_BORDER unngår letterbox-effekten. Innholdet forblir i proporsjon, men fyll alltid det tilgjengelige området, selv om det betyr å beskjære kantene.


Trinn 4: Prøv EXACT_FIT Scale Mode

Endre linjen som setter skala modusen slik:

 stage.scaleMode = StageScaleMode.EXACT_FIT;

Prøv det:

EXACT_FIT gjør kantene på scenen til kanten av det tilgjengelige området, noe som fører til forvrengning hvis spilleren strekkes ut av proporsjoner.


Trinn 5: Prøv NO_SCALE skaleringsmodus

For å sjekke ut sluttskala modus, endre linjen slik:

 stage.scaleMode = StageScaleMode.NO_SCALE;

Sjekk det ut:

Med NO_SCALE, innholdet endrer ikke størrelsen i det hele tatt; De holder seg sentrert i spillervinduet, selv om det betyr å beskjære store mengder kantene, eller forlate massive grenser på alle sider.


Konklusjon

Stage.scaleMode lar deg kontrollere hvordan SWF vil vises hvis et nettsted endrer størrelsen på det tilgjengelige området. Det er også nyttig for å lage AIR-apper og fullskjermwebsider; NO_SCALE er et spesielt godt valg der, som (når kombinert med en RESIZE event lytter) det lar deg passe hele innholdet til vinduet, samtidig som størrelsen og proporsjonene av de enkelte eiendelene opprettholdes.

For mer om det, sjekk ut Franci Zidars serie på fullskjerm skalerbare nettsteder :)