Hurtig Tips Slik endrer du automatisk et bilde for å tilpasse skjermen

Denne Quick Tip forklarer hvordan du bruker et bilde som en nettsidebakgrunn, og skaler den proporsjonalt til scenestørrelsen. Det er flott for når du bruker en SWF som er fullhøyde og full bredde på en nettside.

iMac-ikonet av bobbyperux.


Endelig resultatforhåndsvisning

Ta en titt på hva vi skal jobbe med. Endre størrelse på nettleservinduet og klikk på SWF for å endre størrelsen på bildet automatisk.


Trinn 1: Opprett en ny fil

La oss begynne med å opprette en ny ActionScript 3.0-fil. Lagre det som resize.fla hvor du vil - jeg antar C: \ resize \ resize.fla


Trinn 2: Konfigurer mappene

La oss lage mappene vi trenger for denne opplæringen. Hvis du er kjent med kursstier og du har din egen klassepath, lager du mappen \ Org \ skjerm \ inne i det (forutsatt at du ikke allerede har en med samme navn).

Ellers lager du mappen \ Org \ skjerm i samme mappe som resize.fla-dokumentet (for eksempel: C: \ endre størrelsen \ org \ skjerm).


Trinn 3: Importer en bildefil

Importer et bilde til FLAs bibliotek slik at vi kan bruke det til å teste effekten. Klikk Fil> Import> "Importer til bibliotek".

I dialogboksen som åpnes, finn filen du vil bruke. Himmelen bildet jeg plukket er tilgjengelig i Kilde nedlastingen øverst på siden.


Trinn 4: Konfigurer bildet for eksport

Deretter eksporterer vi bildet vårt til ActionScript, slik at vi kan referere til det i vår kode.

Først åpner du biblioteket ditt (hvis du ikke kan se det, klikker du på Vindu> Bibliotek), høyreklikker bildet og klikker på Egenskaper.

Bytt navn til "Sky".

Hvis de avanserte alternativene ikke er synlige, klikker du Avansert i nederste høyre hjørne av Egenskaper-vinduet. Kontroller alternativene, "Export for ActionScript" og "Export in Frame 1", ved å bruke navnet Himmel for klassen og flash.display.BitmapData for grunnklassen. Pass også på at alternativet "Tillat utjevning" er merket; Dette alternativet sikrer at vi opprettholder god bildekvalitet når du endrer størrelsen på bildet.

Klikk OK for å lukke panelet Egenskaper. Så, nå har vi konfigurert alt i vår FLA, du kan lagre det.


Trinn 5: Tilpasset klasse OffsetResize

La oss nå lage et nytt ActionScript-dokument og lagre det i vår \ Org \ skjerm \ mappe som OffsetResize.as (for eksempel: C: \ endre størrelsen \ org \ skjerm \ OffsetResize.as), eller inne i \ Org \ skjerm \ mappe i klassestien din.

Neste: kode. Sjekk ut kommentarene.

 pakke org.display // Importer de nødvendige klassene for dette objektet import flash.display.Sprite; importer flash.display.DisplayObject; importere flash.events.Event; // Opprette en ny klasse som utvider Sprite-klassen offentlig klasse OffsetResize utvider Sprite // Opprett de statiske konstantene for maksimum og minimum // Vi vil bruke dette til offsetType-egenskapen offentlig statisk const MAX: String = "max"; offentlig statisk konst MIN: String = "min"; // Den slags resize - om bildet er større eller mindre enn scenen privat var _offsetType: String; // Konstruktørfunksjonen offentlig funksjon OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // OffsetType; Hvis ingen verdi er satt, vil "maks" -verdien automatisk antas _offsetType = $ offsetType; // Legg barnet her, noen form for DisplayObject addChild ($ barn); // Sjekk om dette objektet er på scenen. Hvis ja, ring init () -funksjonen hvis (stadium) init (); // Hvis det ikke er på scenen, vil det lytte etter når det legges til scenen og deretter ringe init () -funksjonen ellers addEventListener (Event.ADDED_TO_STAGE, init); // Dette vil sjekke når dette objektet er fjernet fra scenen og ring til slutten () -funksjonen addEventListener (Event.REMOVED_FROM_STAGE, end);  // init () -funksjonen (kalles når objektet er i scenen) // Event-null-parameteren er fordi vi brukte init () uten noen parameter i konstruktøren // og fordi den også brukes som en hendelselytter (ADDED_TO_STAGE) privat funksjon init (e: Event = null): void // Oppdag når scenen er endret og ring stageResize () funksjonen stage.addEventListener (Event.RESIZE, stageResize); // Ring stageResize () funksjonen nå, for stageResize ();  // Funksjonen stageResize () vil bli kalt hver gang scenen er endret // E: Event = null-parameteren er fordi vi har kalt stageResize () -funksjonen uten en parameter privatfunksjon stageResize (e: Event = null): void // Beregn breddeforholdet ved å dividere scenens bredde med objektets bredde var px: Nummer = scene.stage Bredde / bredde; // Beregn høydeforholdet ved å dividere scenens høyde ved objektets høyde var py: Nummer = scene.stageHøyde / høyde; / * Dette er den ternære operatøren; I en linje sjekker det om _offsetType er "max". I så fall setter den den variable div som den maksimale verdien mellom breddeforholdet og høydeforholdet. Hvis ikke, setter den den variable div som minimumsverdi mellom breddeforholdet og høydeforholdet. Så, denne linjen er ansvarlig for om bildet er større eller mindre enn scenen. * / var div: Nummer = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Disse to linjene endrer størrelsen på dette objektet i henhold til divisjonen. // Hvis vi bruker scaleX eller scaleY her vil det ikke fungere som vi trenger det til. bredde * = div; høyde * = div; // Disse to linjene er ansvarlige for å sentrere dette objektet på scenen. x = (stage.stageWidth / 2) - (bredde / 2); y = (stage.stageHeight / 2) - (høyde / 2);  // Denne funksjonen kalles når dette objektet er fjernet fra scenen, da vi ikke trenger stageResize () -funksjonen en hvilken som helst privatfunksjon slutten (e: Event): void // Fjern RESIZE-lytteren fra scenen. removeEventListener (Event.RESIZE, stageResize);  / * Her oppretter vi offsetType-parameteren, slik at vi kan endre hvordan størrelsen endres dynamisk * / Offentlig funksjon satt offsetType (type: String): void _offsetType = type; // Etter at du har endret typen, kaller vi stageResize funksjonen igjen for å oppdatere hvis (scene) stageResize ();  // Bare hvis vi vil vite hva offsetType er offentlig funksjon, få offsetType (): String return _offsetType; 

Nå kan du lagre filen OffsetResize.as. Du kan lukke den hvis du vil; fra nå av vil vi ikke redigere den lenger, bare bruke den i andre klasser.


Trinn 6: Konfigurer dokumentklassen

Bytt nå tilbake til FLA og la oss tildele en dokumentklasse til den. (Ikke kjent med dokumentklasser? Les denne korte introduksjonen.)

Åpne Egenskaper panelet av FLA ved å klikke i et tomt mellomrom på scenen (uten gjenstander valgt), og klikk deretter Vindu> Egenskaper.

I panelet som åpnes, skriv "Hoved" for klassen (eller dokumentklassen, i Flash CS3).

Lagre FLA igjen, men lukk den ikke.


Trinn 7: Kode dokumentklassen

Vi kunne skrive vår kode direkte i tidslinjen, men det er ikke en god vane; Formålet med dokumentklassen er å eliminere tidslinjeprogrammering.

Så lag en ny ActionScript-fil og lagre den som "Main.as" i samme mappe som FLA (for eksempel: C: \ resize \ Main.as).

La oss kode det nå (se kommentarene i koden):

 pakke // La oss importere de nødvendige klassene import org.display.OffsetResize; importer flash.display.Sprite; importer flash.display.Bitmap; importer flash.display.StageAlign; importer flash.display.StageScaleMode; importere flash.events.Event; importer flash.events.MouseEvent; // Vi utvider Sprite-klassen, i stedet for MovieClip, siden vi ikke vil bruke noen tidslinjeanimasjon her offentlig klasse Main utvider Sprite // Dette vil være forekomsten av vårt tilpassede objekt OffsetResize private var _bg: OffsetResize; // Konstruktørens offentlige funksjon Main (): void / * Vi kunne bruke scenen eiendom direkte her, men jeg antar at mange mennesker lager et dokument som "base.swf" som laster "main.swf" fil - i så fall vil vår main.swf ikke ha scenegenskapen. Men det sjekker om det er en scene eiendom. Vi kan bruke denne swf vi vil lage med eller uten base.swf; i dette tilfellet vil vi bruke det uten base.swf, men det er klart å bruke med sistnevnte hvis vi vil. Så denne linjen vil sjekke om vår swf er på scenen, og i så fall ring init (). * / hvis (stadium) init (); // Hvis ikke på scenen, vil det bare ringe init () -funksjonen når den legges til scenen ellers addEventListener (Event.ADDED_TO_STAGE, init);  // Init-funksjonen kalles bare når objektet er i scenen // Det ble forklart før vi bruker dette i konstruktørfunksjonen privatfunksjon init (e: Event = null): void // Angi hvordan scenen vil skalere (det vil ikke skalere) og dets justering (øverste venstre hjørne) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Husk bildet i biblioteket? Vel, derfor eksporterte vi det til AS. // La oss lage en Bitmap-objekt med det bildet: var bilde: Bitmap = ny Bitmap (new Sky (0,0)); // Nå lager vi en forekomst av OffsetResize-klassen vi kodet før. // Den andre parameteren er valgfri og kan stå tomt; verdien kan være OffsetResize.MAX eller OffsetResize.MIN. _bg = ny OffsetResize (bilde, OffsetResize.MIN); // legg til forekomsten av OffsetResize til scenen på child index 0, så det vil ligge bak alt (det er en bakgrunn) scene.addChildAt (_bg, 0); // Koden så langt er nok til å gjøre dette arbeidet, men jeg vil vise hvordan du kan endre offsetType dynamisk. // Så la oss legge til en MOUSE_DOWN-hendelse, som kaller funksjonen mouseDown () når vi klikker på scenen. stage.addEventListener (MouseEvent.MOUSE_DOWN, mousedown);  // Denne funksjonen kalles hver gang vi klikker på scenen privat funksjon mouseDown (e: MouseEvent): void / * Dette er den ternære operatøren, det er en kompakt versjon av denne lange if setningen: hvis (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN;  else _bg.offsetType = OffsetResize.MAX;  * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX; 

Trinn 8: Test det ut

Sjekk om det er greit.

  • Vi må ha et bilde i biblioteket kalt "Sky" som eksporteres for ActionScript med et klassenavn på Himmel og en grunnklasse av flash.display.BitmapData.
  • Vi må også ha dokumentklassen satt til "Main"
  • Main.as-filen i samme mappe som FLA
  • og filen OffsetResize.as inne \ Org \ skjerm (som er enten inne i samme mappe som .fla-filen eller er inne i klassestien).

Hvis alle disse kravene er oppfylt, kan du teste det nå!

Konklusjon

Vi opprettet en egendefinert klasse kalt "OffsetResize", som endrer størrelsen på et spesifisert objekt i henhold til scenens størrelse. Hvis du opprettet den i klassestien din, kan du bruke den uansett hvor du vil: alt du trenger å gjøre er å importere OffsetResize-objektet og bruke det. den er uttrekkbar og gjenbrukbar. Men huske Den skal brukes med skalerbart innhold, for eksempel en SWF i HTML som tar opp 100% av bredden og høyden.

Takk for at du leste! Legg inn eventuelle spørsmål i kommentarene.