Share
In diesem Quick Tip wird erläutert, wie Sie ein Bild als Hintergrund einer Website verwenden und proportional zur Bühnengröße skalieren. Dies ist ideal, wenn Sie eine SWF-Datei mit voller Höhe und voller Breite in einer Webseite verwenden.
iMac icon von bobbyperux.
Schauen Sie sich an, woran wir arbeiten. Verändern Sie die Größe Ihres Browserfensters und klicken Sie auf die SWF-Datei, um die Größe des Bildes automatisch zu ändern.
Beginnen wir mit dem Erstellen einer neuen Actionscript 3.0-Datei. Speichern Sie es als resize.fla wo immer Sie möchten - ich gehe davon aus C: \ resize \ resize.fla
Erstellen wir die Ordner, die wir für dieses Tutorial benötigen. Wenn Sie mit Klassenpfaden vertraut sind und über einen eigenen Klassenpfad verfügen, erstellen Sie den Ordner \ org \ display \ darin (vorausgesetzt, Sie haben noch keinen Namen mit demselben Namen).
Ansonsten erstellen Sie den Ordner \ org \ display im selben Ordner wie das Dokument resize.fla (zum Beispiel: C: \ resize \ org \ display).
Importieren Sie ein Bild in die Bibliothek Ihrer FLA, damit wir den Effekt testen können. Klicken Sie auf Datei> Importieren> "In Bibliothek importieren"..
Suchen Sie in dem sich öffnenden Dialogfeld die Datei, die Sie verwenden möchten. Das Himmelbild, das ich ausgewählt habe, ist im Quelldownload oben auf der Seite verfügbar.
Als Nächstes exportieren wir unser Bild für ActionScript, damit wir es in unserem Code darauf verweisen können.
Öffnen Sie zuerst Ihre Bibliothek (wenn Sie sie nicht sehen können, klicken Sie auf Fenster> Bibliothek), klicken Sie mit der rechten Maustaste auf das Bild, und klicken Sie auf Eigenschaften.
Ändern Sie den Namen in "Sky".
Wenn die erweiterten Optionen nicht sichtbar sind, klicken Sie in der rechten unteren Ecke des Eigenschaftenfensters auf Erweitert. Überprüfen Sie die Optionen "Exportieren für ActionScript" und "Exportieren in Bild 1" anhand des Namens Himmel für die Klasse und flash.display.BitmapData für die Basisklasse. Stellen Sie außerdem sicher, dass die Option "Glätten zulassen" aktiviert ist. Mit dieser Option wird sichergestellt, dass die Bildqualität bei der Größenänderung des Bildes gut bleibt.
Klicken Sie auf OK, um das Eigenschaftenfenster zu schließen. Jetzt haben wir alles in unserem FLA konfiguriert, Sie können es speichern.
Jetzt erstellen wir ein neues ActionScript-Dokument und speichern es in unserem \ org \ display \ Ordner als OffsetResize.as (zum Beispiel: C: \ resize \ org \ display \ OffsetResize.as) oder innerhalb der \ org \ display \ Ordner in Ihrem Klassenpfad.
Weiter: Code. Überprüfen Sie die Kommentare.
package org.display // Importiere die benötigten Klassen für dieses Objekt import flash.display.Sprite; import flash.display.DisplayObject; import flash.events.Event; // Erstellen einer neuen Klasse, die die Sprite-Klasse erweitert public OffsetResize erweitert Sprite // Erzeuge die statischen Konstanten für Maximum und Minimum // Wir werden dies für die offsetType-Eigenschaft verwenden public static const MAX: String = "max"; public static const MIN: String = "min"; // Die Art der Größe - ob das Bild größer oder kleiner als die private Stufe ist var _offsetType: String; // Die Konstruktorfunktion public function OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // The offsetType; Wenn kein Wert festgelegt ist, wird automatisch der Wert "max" angenommen _offsetType = $ offsetType; // füge das Kind hier hinzu, jede Art von DisplayObject addChild ($ child); // Prüfen Sie, ob sich dieses Objekt auf der Bühne befindet. Wenn ja, rufen Sie die Funktion init () auf. if (stage) init (); // Wenn es nicht auf der Bühne ist, hört es auf, wenn es der Bühne hinzugefügt wird, und ruft die Funktion init () auf. Else addEventListener (Event.ADDED_TO_STAGE, init); // Dies prüft, wann dieses Objekt von der Bühne entfernt wird, und ruft die end () - Funktion auf. AddEventListener (Event.REMOVED_FROM_STAGE, end); // Die Funktion init () (wird aufgerufen, wenn sich das Objekt in der Bühne befindet) // Der Parameter Event = null ist darauf zurückzuführen, dass wir init () ohne Parameter im Konstruktor // verwendet haben und weil er auch als Ereignislistener verwendet wird (ADDED_TO_STAGE) private Funktion init (e: Event = null): void // Ermitteln, wenn die Größe der Bühne geändert wird, und Aufruf der stageResize () - Funktion stage.addEventListener (Event.RESIZE, stageResize); // Rufe jetzt die stageResize () - Funktion auf. StageResize (); // Die stageResize () - Funktion wird jedes Mal aufgerufen, wenn die Größe der Bühne geändert wird. // Der Parameter e: Event = null ist darauf zurückzuführen, dass wir die stageResize () - Funktion ohne die private Funktion stageResize (e: Event = null) aufgerufen haben. void // Berechne das Breitenverhältnis, indem die Breite der Bühne durch die Breite des Objekts dividiert wird. var px: Number = stage.stageWidth / width; // Berechne das Höhenverhältnis, indem die Höhe der Bühne durch die Höhe des Objekts dividiert wird. Anzahl: stage = stage.stageHeight / height; / * Dies ist der ternäre Operator. In einer Zeile wird geprüft, ob _offsetType "max" ist. Wenn ja, wird die Variable div als Maximalwert zwischen dem Breitenverhältnis und dem Höhenverhältnis festgelegt. Wenn nicht, wird die Variable div als Mindestwert zwischen dem Breitenverhältnis und dem Höhenverhältnis festgelegt. Diese Linie ist also dafür verantwortlich, ob das Bild größer oder kleiner als die Bühne ist. * / var div: Number = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Diese beiden Zeilen verändern die Größe dieses Objekts entsprechend dem Teilungsverhältnis. // Wenn wir scaleX oder scaleY verwenden, funktioniert es nicht so, wie wir es brauchen. width * = div; Höhe * = div; // Diese beiden Zeilen sind dafür verantwortlich, dieses Objekt auf der Bühne zu zentrieren. x = (stage.stagewhidth / 2) - (width / 2); y = (stage.stageHeight / 2) - (height / 2); // Diese Funktion wird aufgerufen, wenn dieses Objekt von der Bühne entfernt wird, da wir die stageResize () - Funktion nicht mehr als private Funktion benötigen. removeEventListener (Event.RESIZE, stageResize); / * Hier erstellen wir den Parameter offsetType, sodass wir ändern können, wie sich die Größe des Objekts dynamisch ändert. // Nach dem Ändern des Typs rufen wir die stageResize-Funktion erneut auf, um zu aktualisieren, ob (stage) stageResize (); // Nur, wenn wir wissen wollen, was die offsetType-Funktion ist. Public function get offsetType (): String return _offsetType;
Jetzt können Sie die Datei OffsetResize.as speichern. Sie können es schließen, wenn Sie möchten. Von jetzt an werden wir es nicht mehr bearbeiten, sondern nur in anderen Klassen verwenden.
Wechseln Sie nun wieder zur FLA und weisen Sie ihr eine Dokumentenklasse zu. (Sie kennen sich nicht mit Dokumentenklassen aus? Lesen Sie diese kurze Einführung.)
Öffnen Sie das Eigenschaftenfenster der FLA, indem Sie in eine beliebige leere Stelle der Bühne klicken (ohne Objekte ausgewählt), und dann auf Fenster> Eigenschaften klicken.
Geben Sie im folgenden Fenster "Main" für die Klasse (oder Dokumentklasse in Flash CS3) ein..
Speichern Sie die FLA erneut, schließen Sie sie jedoch nicht.
Wir könnten unseren Code direkt in der Timeline schreiben, aber das ist keine gute Angewohnheit. Der Zweck der Dokumentenklasse besteht darin, die Timeline-Programmierung zu beseitigen.
Erstellen Sie also eine neue ActionScript-Datei und speichern Sie sie als "Main.as" im selben Ordner wie Ihre FLA (zum Beispiel: C: \ resize \ main.as).
Lassen Sie uns jetzt den Code schreiben (siehe die Kommentare im Code):
package // Importieren Sie die benötigten Klassen 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; // Wir erweitern die Sprite-Klasse und nicht MovieClip, da wir hier keine Timeline-Animation verwenden. Public class Main erweitert Sprite // Dies ist die Instanz unseres benutzerdefinierten Objekts. OffsetResize private var _bg: OffsetResize; // Der Konstruktor public function Main (): void / * Wir könnten die stage -Eigenschaft direkt hier verwenden, aber ich gehe davon aus, dass viele Leute ein Dokument wie "base.swf" erstellen, das die "main.swf" lädt. Datei - In diesem Fall hätte unser main.swf keine Stage-Eigenschaft. Es wird jedoch geprüft, ob eine Bühneneigenschaft vorhanden ist. Wir können diesen SWF verwenden, den wir mit oder ohne base.swf erstellen werden. In diesem Fall werden wir es ohne base.swf verwenden, aber es ist bereit, es mit letzterem zu verwenden, wenn wir möchten. Diese Zeile prüft also, ob sich unser swf auf der Bühne befindet, und ruft dann init () auf. * / if (Stufe) init (); // Wenn nicht auf der Bühne, wird die init () - Funktion nur aufgerufen, wenn sie zur Bühne hinzugefügt wird else addEventListener (Event.ADDED_TO_STAGE, init); // Die init-Funktion wird nur aufgerufen, wenn sich das Objekt in der Stufe befindet. // Es wurde erklärt, bevor wir dies in der Konstruktorfunktion privater Funktion init (e: Event = null) verwenden: void // Festlegen der Stufe wird skalieren (es wird nicht skaliert) und seine Ausrichtung (obere linke Ecke) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Erinnerst du dich an das Bild in der Bibliothek? Nun, deshalb haben wir es für AS exportiert. // Erstellen Sie ein Bitmap-Objekt mit diesem Bild: var picture: Bitmap = new Bitmap (new Sky (0,0)); // Jetzt erstellen wir eine Instanz der OffsetResize-Klasse, die wir zuvor codiert haben. // Der zweite Parameter ist optional und kann leer bleiben. Sein Wert kann OffsetResize.MAX oder OffsetResize.MIN sein. _bg = new OffsetResize (Bild, OffsetResize.MIN); // füge die Instanz von OffsetResize der Stufe at child index 0 hinzu, damit sie hinter allem steht (es ist ein Hintergrund) stage.addChildAt (_bg, 0); // Der Code reicht aus, um dies zu erreichen, aber ich werde zeigen, wie man den offsetType dynamisch ändert. // Fügen wir also ein MOUSE_DOWN -Ereignis hinzu, das die mouseDown () - Funktion aufruft, wenn wir auf die Bühne klicken. stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown); // Diese Funktion wird jedes Mal aufgerufen, wenn wir auf die private Stage-Funktion mouseDown (e: MouseEvent) klicken: void / * Dies ist der ternäre Operator. Dies ist eine kompakte Version dieser langen if-Anweisung: if (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN; else _bg.offsetType = OffsetResize.MAX; * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX;
Überprüfen Sie, ob es in Ordnung ist.
Wenn alle diese Voraussetzungen erfüllt sind, können Sie es jetzt testen!
Wir haben eine benutzerdefinierte Klasse mit dem Namen "OffsetResize" erstellt, die die Größe eines angegebenen Objekts entsprechend der Bühnengröße ändert. Wenn Sie es in Ihrem Klassenpfad erstellt haben, können Sie es verwenden, wo immer Sie möchten: Sie müssen nur das OffsetResize-Objekt importieren und verwenden. es ist erweiterbar und wiederverwendbar. Aber merken Es ist mit skalierbarem Inhalt zu verwenden, zum Beispiel einer SWF-Datei in HTML, die 100% der Breite und Höhe beansprucht.
Danke fürs Lesen! Posten Sie Fragen in den Kommentaren.
Accentsconagua