Share
Deze Quick Tip legt uit hoe een afbeelding als een website-achtergrond moet worden gebruikt en hoe deze proportioneel aan de grootte van de stage wordt aangepast. Dit is geweldig als u een SWF-bestand op volledige hoogte en over de volledige breedte van een webpagina gebruikt.
iMac-pictogram van bobbyperux.
Kijk eens waar we aan zullen werken. Verklein het browservenster en klik op de SWF om de afbeelding automatisch te verkleinen.
Laten we beginnen met het maken van een nieuw Actionscript 3.0-bestand. Sla het op als resize.fla waar je maar wilt - ik neem aan C: \ resize \ resize.fla
Laten we de mappen maken die we nodig hebben voor deze tutorial. Als u bekend bent met klassenpaden en u hebt uw eigen klassenpad, maakt u de map \ Org \ scherm \ erin (ervan uitgaande dat je er nog geen hebt met dezelfde naam).
Maak anders de map \ Org \ scherm in dezelfde map als het resize.fla-document (bijvoorbeeld: C: \ verkleinen \ org \ scherm).
Importeer een afbeelding naar de bibliotheek van uw FLA zodat we deze kunnen gebruiken om het effect te testen. Klik op Bestand> Importeren> "Importeren in bibliotheek".
Zoek in het dialoogvenster dat wordt geopend naar het bestand dat u wilt gebruiken. De luchtafbeelding die ik heb gekozen, is beschikbaar in de brondownload bovenaan de pagina.
Vervolgens exporteren we onze afbeelding voor ActionScript, zodat we ernaar kunnen verwijzen in onze code.
Open eerst uw bibliotheek (als u het niet kunt zien, klik dan op Venster> Bibliotheek), klik met de rechtermuisknop op de afbeelding en klik op Eigenschappen.
Verander de naam in 'Sky'.
Als de geavanceerde opties niet zichtbaar zijn, klikt u op Geavanceerd in de rechterbenedenhoek van het venster Eigenschappen. Vink de opties "Exporteren voor ActionScript" en "Exporteren in frame 1" aan met behulp van de naam Hemel voor de klas en flash.display.BitmapData voor de basisklasse. Zorg er ook voor dat de optie "Allow smoothing" is aangevinkt; deze optie zorgt ervoor dat we een goede beeldkwaliteit behouden bij het vergroten of verkleinen van de afbeelding.
Klik op OK om het venster Eigenschappen te sluiten. Dus nu hebben we alles in onze FLA geconfigureerd, u kunt het opslaan.
Laten we nu een nieuw ActionScript-document maken en dit opslaan in onze \ Org \ scherm \ map als OffsetResize.as (bijvoorbeeld: C: \ verkleinen \ org \ weergave \ OffsetResize.as), of in de \ Org \ scherm \ map in uw klassenpad.
Volgende: code. Bekijk de reacties.
package org.display // Importeer de benodigde klassen voor dit object import flash.display.Sprite; import flash.display.DisplayObject; import flash.events.Event; // Een nieuwe klasse maken die de klasse Sprite uitbreidt class public OffsetResize breidt Sprite uit // Maak de statische constanten voor maximum en minimum // We zullen dit gebruiken voor de eigenschap offsetType public static const MAX: String = "max"; openbare statische const MIN: String = "min"; // Het soort formaat wijzigen - of de afbeelding groter of kleiner is dan de stage private var _offsetType: String; // De constructorfunctie public function OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // The offsetType; als er geen waarde is ingesteld, wordt de "max" -waarde automatisch aangenomen _offsetType = $ offsetType; // Voeg hier het kind toe, elk type DisplayObject addChild ($ child); // Controleer of dit object op het podium staat. in dat geval roept u de functie init () aan als (stage) init (); // Als het niet op het podium staat, zal het luisteren wanneer het wordt toegevoegd aan de stage en dan de init () -functie else addEventListener (Event.ADDED_TO_STAGE, init) aanroepen; // Hiermee wordt gecontroleerd wanneer dit object uit het werkgebied wordt verwijderd en de functie end () addEventListener (Event.REMOVED_FROM_STAGE, einde) wordt aangeroepen; // De init () -functie (genoemd wanneer het object zich in de fase bevindt) // De parameter Event = null is omdat we de init () zonder enige parameter in de constructor // hebben gebruikt en omdat deze ook als een gebeurtenislistener wordt gebruikt (ADDED_TO_STAGE) private function init (e: Event = null): void // Detecteer wanneer de grootte van de stage wordt gewijzigd en bel de stageResize () -functie stage.addEventListener (Event.RESIZE, stageResize); // Roep nu de functie stageResize () aan, ook stageResize (); // De functie stageResize () wordt aangeroepen elke keer dat de fase wordt gewijzigd // De parameter e: Event = null is omdat we de functie stageResize () hebben genoemd zonder een parameter private function stageResize (e: Event = null): void // Bereken de breedteverhouding door de breedte van het werkgebied te delen door de breedte van het object var px: Number = stage.stageWidth / width; // Bereken de hoogteverhouding door de hoogte van het podium te delen door de hoogte van het object. Var py: Number = stage.stageHeight / height; / * Dit is de ternaire operator; op één regel wordt gecontroleerd of _offsetType "max" is. Als dit het geval is, wordt de variabele div ingesteld als de maximale waarde tussen de breedte en de verhouding van de hoogte. Als dat niet het geval is, wordt de variabele div ingesteld als de minimumwaarde tussen de breedte en de verhouding van de hoogte. Deze regel is dus verantwoordelijk voor de vraag of de afbeelding groter of kleiner is dan het werkgebied. * / var div: Number = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Met deze twee regels wordt het formaat van dit object aangepast aan de divisieverhouding. // Als we hier scaleX of scaleY gebruiken, werkt het niet zoals we het nodig hebben. width * = div; hoogte * = div; // Deze twee lijnen zijn verantwoordelijk voor het centreren van dit object op het podium. x = (stage.stageWidth / 2) - (breedte / 2); y = (Stage.stageHeight / 2) - (lengte / 2); // Deze functie wordt aangeroepen wanneer dit object uit het werkgebied wordt verwijderd, omdat we de functie stageResize () niet meer nodig hebben voor een privéfunctie (e: Event): void // De luisteraar van RESIZE verwijderen uit de werkfase. removeEventListener (Event.RESIZE, stageResize); / * Hier maken we de parameter offsetType, zodat we kunnen wijzigen hoe het object dynamisch wordt gewijzigd * / public function set offsetType (type: String): void _offsetType = type; // Nadat het type is gewijzigd, noemen we de stageResize-functie opnieuw om bij te werken als (stage) stageResize (); // Alleen als we willen weten wat het offsetType is public function get offsetType (): String return _offsetType;
Nu kunt u het bestand OffsetResize.as opslaan. Je kunt het sluiten als je wilt; vanaf nu zullen we het niet meer bewerken, alleen gebruiken in andere klassen.
Schakel nu terug naar de FLA en laten we er een documentklasse aan toewijzen. (Niet bekend met documentklassen? Lees deze korte introductie.)
Open het paneel Eigenschappen van de FLA door op een lege ruimte op het werkgebied te klikken (zonder objecten geselecteerd) en klik vervolgens op Venster> Eigenschappen.
Typ 'Hoofd' voor de klasse (of documentklasse, in Flash CS3) in het deelvenster dat wordt geopend.
Sla de FLA opnieuw op maar sluit deze niet.
We zouden onze code rechtstreeks in de tijdlijn kunnen schrijven, maar dat is geen goede gewoonte; het doel van de documentklasse is om tijdlijnprogrammering te elimineren.
Maak dus een nieuw ActionScript-bestand en sla het op als "Main.as" in dezelfde map als uw FLA (bijvoorbeeld: C: \ resize \ Main.as).
Laten we het nu coderen (zie de opmerkingen in de code):
pakket // Laten we de benodigde klassen importeren import org.display.OffsetResize; import flash.display.Sprite; import flash.display.Bitmap; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; // We breiden de klasse Sprite uit in plaats van MovieClip, omdat we hier geen tijdlijnanimatie gebruiken. Public class Belangrijkste uitbreiding Sprite // Dit wordt het exemplaar van ons aangepaste object OffsetResize private var _bg: OffsetResize; // De constructor public function Main (): void / * We zouden de stage-eigenschap hier direct kunnen gebruiken, maar ik neem aan dat veel mensen een document maken zoals "base.swf" dat de "main.swf" laadt bestand - in welk geval onze main.swf de eigenschap stage niet zou hebben. Maar het controleert of er een fase-eigenschap is. We kunnen deze swf gebruiken die we zullen maken met of zonder de base.swf; in dit geval zullen we het gebruiken zonder de base.swf, maar het is klaar om te gebruiken met de laatste als we dat willen. Dus deze regel zal controleren of onze swf op het podium staat en, indien dat zo is, init () aanroepen. * / if (stage) init (); // Als het niet op het podium staat, zal het alleen de init () -functie aanroepen wanneer het wordt toegevoegd aan de stage else addEventListener (Event.ADDED_TO_STAGE, init); // De init-functie wordt alleen aangeroepen als het object zich in de fase bevindt // Het werd uitgelegd voordat we dit gebruiken in de constructorfunctie private function init (e: Event = null): void // Instellen hoe de stage wordt uitgevoerd zal schalen (het zal niet schalen) en zijn uitlijning (linkerbovenhoek) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Denk aan de afbeelding in de bibliotheek? Nou, dit is de reden waarom we het voor AS hebben geëxporteerd. // Laten we een bitmap-object met die afbeelding maken: var picture: Bitmap = new Bitmap (new Sky (0,0)); // Nu maken we een exemplaar van de klasse OffsetResize die we eerder hebben gecodeerd. // De tweede parameter is optioneel en kan leeg worden gelaten; de waarde kan OffsetResize.MAX of OffsetResize.MIN zijn. _bg = nieuw OffsetResize (afbeelding, OffsetResize.MIN); // voeg het exemplaar van de OffsetResize toe aan het werkvlak in kindindex 0, zodat deze zich achter alles bevindt (het is een achtergrond) stage.addChildAt (_bg, 0); // De code tot nu toe is voldoende om dit te laten werken, maar ik zal laten zien hoe het offsetType dynamisch te veranderen. // Laten we dus een MOUSE_DOWN-gebeurtenis toevoegen, die de mouseDown () -functie zal oproepen wanneer we op het werkgebied klikken. stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown); // Deze functie wordt aangeroepen elke keer dat we op de privéfunctie van de scène mouseDown klikken (e: MouseEvent): void / * Dit is de ternaire operator, het is een compacte versie van deze lange if-instructie: if (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN; else _bg.offsetType = OffsetResize.MAX; * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX;
Controleer of het goed is.
Als aan al deze vereisten is voldaan, kunt u deze nu testen!
We hebben een aangepaste klasse gemaakt met de naam "OffsetResize", die het formaat van een opgegeven object aanpast aan de grootte van de stage. Als u het in uw klassepad hebt gemaakt, kunt u het overal gebruiken: u hoeft alleen het object OffsetResize te importeren en het te gebruiken; het is uitbreidbaar en herbruikbaar. Maar onthouden het is te gebruiken met schaalbare inhoud, bijvoorbeeld een SWF in HTML die 100% van de breedte en hoogte in beslag neemt.
Bedankt voor het lezen! Plaats eventuele vragen in de comments.
Accentsconagua