Share
Haben Sie jemals die Größe Ihrer eingebetteten SWF-Datei basierend auf der Benutzerinteraktion / -eingabe ändern müssen, z. B. wie Newgrounds es Ihnen ermöglicht, bestimmte Flash-Spiele an den Bildschirm anzupassen? Dies kann mit geschehen JavaScript und das Externe Schnittstelle Klasse in ActionScript. Aber wenn Sie es nicht wissen JavaScript überhaupt?
Nun, zum Glück für dich gibt es diese kleine Klasse da draußen BrowserCanvas Was für Sie hässlich ist, und in diesem kurzen Tipp zeige ich Ihnen, wie Sie damit umgehen.
Zunächst benötigen wir einen Code-Editor. Ich werde FlashDevelop für dieses Tutorial verwenden, da wir beide schreiben werden ActionScript und HTML und das ist ein guter Code-Editor für beide. Dies ist nicht zwingend erforderlich, so dass Sie jede gewünschte Software verwenden können. Wenn Sie es verwenden möchten, aber nicht wissen, wie es geht, lesen Sie diese Anleitung für Anfänger zu FlashDevelop.
Als nächstes brauchst du die BrowserCanvas Klasse, also geh hier und lade es herunter und lies eine detailliertere Übersicht darüber.
Außerdem benötigen Sie ein Bild, das den Inhalt darstellt (ich habe das Activetuts + -Logo verwendet) und ein Bild, das den Größenänderungs-Handler darstellt. Ich habe beide in die Download-Quelle aufgenommen, also sollte es dir gut gehen.
Jetzt, wo wir vorbereitet sind, fangen wir an!
Hinweis: In den ersten sechs Schritten habe ich erklärt, wie die Vorbereitungen getroffen werden und wie die Benutzeroberfläche erstellt wird, ohne auf die eigentliche Bezug zu nehmen BrowserCanvas Klasse. Wenn Sie ihnen nicht folgen möchten, können Sie direkt mit Schritt 7 fortfahren und das Projekt, das ich im Download-Paket bereitgestellt habe, weiter verwenden. Sie finden es im Quelle Ordner und unter der SWFResize - Meilenstein Mappe.
Öffnen FlashDevelop und erstellen Sie ein neues Projekt, indem Sie auf gehen Projekt> Neues Projekt? . Vergeben Sie einen Namen und drücken Sie OK.
Kopieren Sie auch die com Ordner aus der heruntergeladenen Datei in das Quellverzeichnis Ihres Projekts.
Stelle das active.png und pfeile.png Bilder aus dem heruntergeladenen Paket in einem Vermögenswerte Ordner in der Behälter Verzeichnis aus Ihrem Projekt.
Als nächstes öffnen Sie die Main.as Datei und platzieren Sie die vier hervorgehobenen Zeilen darin (der Rest wurde bereits automatisch von FlashDevelop erstellt):
package import flash.display.Sprite; import flash.events.Event; public class Main erweitert Sprite [Einbetten (source = '? /bin/assets/active.png')] public var logo: Class; [Embed (source = '? /Bin/assets/arrows.png')] öffentliche var-Pfeile: Klasse; öffentliche Funktion Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Dadurch werden die beiden Assets eingebettet, sodass wir sie zur Laufzeit verwenden können.
Im Moment hat die Bühne ihre Standardeinstellungen: Sie hat eine weiße Hintergrundfarbe, eine Bildrate von 24 Bildern pro Sekunde und eine Größe von 800 x 600 Pixel, was zu groß ist, um diesen Effekt demonstrieren zu können.
Fügen Sie die markierte Zeile unmittelbar vor der Klassendeklaration hinzu:
[SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")] Öffentliche Klasse Main erweitert Sprite
Wir möchten auch den Skalenmodus und die Ausrichtung der Bühne einstellen. Dazu fügen wir die setStage () Methode für unsere Klasse und rufen Sie es aus dem drin() Methode.
private Funktion setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); private Funktion onStageResize (e: Event): void
Wie Sie sehen können, habe ich der Bühne für Event einen Listener hinzugefügt Event.RESIZE event, zusammen mit der entsprechenden Handler-Funktion onStageResize ().
Okay. Wir haben jetzt unsere Bühne eingerichtet und werden mit dem Hinzufügen von Inhalten fortfahren.
Zuerst fügen Sie diese beiden Variablen unserer Klasse hinzu:
private var _logo: Bitmap; private var _Pfeile: Sprite;
Nun füge das hinzu createObjects () Methode und rufen Sie es aus dem drin() Methode:
private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); private Funktion createObjects (): void _logo = neues Logo () als Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (neue Pfeile () als Bitmap); addChild (_pfows);
Dadurch werden unsere Objekte instanziiert und der Anzeigeliste hinzugefügt.
Wenn Sie den Code jetzt kompilieren, werden Sie feststellen, dass sich diese beiden überlappen, also positionieren wir sie.
Nehmen wir an, dass wir unseren Inhalt benötigen, um immer in der Mitte der Bühne zu bleiben, und der Größenänderungs-Handler in der rechten unteren Ecke der Bühne sein muss. Wir werden dazu die folgenden zwei Methoden verwenden.
Das positionLogo () zentriert den Inhalt auf der Bühne?
private function positionLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0,5 - _logo.height * 0,5;
? und das positionArows () setzt den Handler für die Größenänderung in die rechte untere Ecke der Bühne:
private function positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
Zum Schluss rufen wir sie von innen an drin() Methode für die eigentliche Positionierung.
private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArows ();
Jetzt ist es auch an der Zeit, das zu ändern onStageResize () Handler, um das Logo bei jeder Größenänderung der Bühne zu positionieren.
private Funktion onStageResize (e: Event): void positionLogo ();
Kompilieren Sie den Code und überprüfen Sie das Ergebnis. Sieht nett aus, nicht wahr? :)
Das letzte, was wir tun müssen, damit unsere Benutzeroberfläche vollständig ist, ist, etwas Interaktivität hinzuzufügen.
Fügen Sie diese beiden hinzu MouseEvent Zuhörer nach der letzten Zeile in der createObjects () Methode
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Fügen Sie auch die entsprechenden Handlerfunktionen hinzu:
private Funktion onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); private Funktion onMouseUp (e: MouseEvent): void _arrows.stopDrag (); _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30; removeEventListener (Event.ENTER_FRAME, onEnterFrame); private Funktion onEnterFrame (e: Event): void
Wie du das sehen kannst MAUS NACH UNTEN und das MOUSE_UP Event-Handler werden für den Größenänderungs-Handler verwendet ENTER_FRAME Der Ereignislistener wird verwendet, um den Code für die Größenänderung auszuführen. Wir werden den entsprechenden Code in die onEnterFrame () Handler in den späteren Schritten.
Accentsconagua
BrowserCanvas KlasseBis jetzt haben wir nur die grundlegende AS3-Programmierung durchgeführt, ohne die eigentliche Idee dieses Tutorials zu besprechen: Ändern der Größe des Bereichs, den die SWF auf der Webseite einnimmt. Dies waren keine notwendigen Schritte, aber ich habe sie gemacht, um ein vereinfachtes reales Szenario zu simulieren.
Zunächst fügen wir zunächst eine neue Variable hinzu _Segeltuch vom Typ BrowserCanvas:
private var _canvas: BrowserCanvas;
Hinweis: Wenn Sie keinen Code-Editor verwenden, der die verwendeten Klassen automatisch importiert, vergessen Sie nicht, dies selbst zu tun.
Nachdem Sie die Variable erstellt haben, instantiieren Sie sie in der createObjects () Methode.
private Funktion createObjects (): void _canvas = new BrowserCanvas (stage); _logo = neues Logo () als Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (neue Pfeile () als Bitmap); addChild (_pfows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Wie du das sehen kannst BrowserCanvas Die Klasse nimmt die folgenden drei Parameter an:
Bühne -- Dies ist ein Bezug zur Bühne. Dies wird verwendet, um sicherzustellen, dass der richtige Flash-Film als Ziel ausgewählt wirdcontainerId -- Dies ist eine Referenz auf das div- oder object-Tag, das den Film enthält und dessen Größe wir ändern möchten. Dies ist nicht wirklich notwendig, es sei denn, Sie haben mehrere Instanzen derselben SWF-Datei auf derselben SeitebrowserHacks -- eine Liste der anzuwendenden Hacks. Sie müssen dies nicht wirklich übergeben, da standardmäßig alle Hacks angewendet werdenHinweis: Wenn Sie den Code jetzt kompilieren, sollten Sie die folgende Fehlermeldung erhalten:
Fehler # 2067: Das ExternalInterface ist in diesem Container nicht verfügbar. ExternalInterface erfordert Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 und höher oder andere Browser, die NPRuntime unterstützen.
Dies liegt daran, dass die SWF-Datei noch nicht in einen HTML-Container eingebettet ist. Der Film wird trotzdem erfolgreich kompiliert. Wenn Sie diesen Fehler jedoch nicht erhalten möchten, können Sie eine if-Anweisung hinzufügen, um zu überprüfen, ob sich der Film im richtigen Container befindet. Dies kann leicht durch Überprüfen der durchgeführt werden ExternalInterface.available Eigenschaft vor der Instanziierung der BrowserCanvas Objekt.
if (ExternalInterface.available) _canvas = new BrowserCanvas (stage);
Das letzte, was wir in Flash tun müssen, ist den eigentlichen Code hinzuzufügen, der die Größe ändert. Dieser Code wird innerhalb von ausgeführt onEnterFrame () Eventhandler:
private Funktion onEnterFrame (e: Event): void if (_canvas) var w: Number = _arrows.x + _arrows.width + 30; var h: Number = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString ();
Das w und h Variablen werden verwendet, um die entsprechende Bühnenbreite und -höhe zu berechnen. Danach werden die Eigenschaften width und height des festgelegt _Segeltuch Objekt auf die entsprechende Breite und Höhe. Diese beiden Eigenschaften müssen als Zeichenfolgen festgelegt werden.
Hinweis: Die if-Anweisung gibt an, ob die _Segeltuch Das Objekt wurde instanziiert, da wir einen Fehler erhalten, wenn wir den Code kompilieren und den Größenänderungs-Handler verwenden. Dies geschieht aufgrund des ungeeigneten Containers erneut. Da der Film im Standalone-Player abgespielt wird, gibt es keinen HTML-Container _Segeltuch Objekt wurde nicht instanziiert (siehe vorherigen Schritt).
Kompilieren Sie das Projekt und fahren Sie mit dem nächsten Schritt fort.
Nun, da der Flash-Teil fertig ist, müssen wir etwas in HTML arbeiten, da einige Schritte erforderlich sind, damit dies ordnungsgemäß funktioniert.
Wenn Sie verwenden FlashDevelop Sie sollten eine HTML-Datei haben, die aufgerufen wird index.html wird automatisch im erstellt Behälter Verzeichnis; wenn nicht, erstelle es. Es sollte so aussehen:
SWFResize
Dies ist eine einfache HTML-Datei, bei der die SWF-Datei mit SWFObject eingebettet ist.
Hinweis: Wenn Sie nicht haben SWFObject Sie können wenn von hier aus und die platzieren SWFObject.js Datei in einem Ordner namens js, der sich im selben Ordner befindet wie Ihr index.html und SWF-Dateien.
Dies funktioniert auch bei der grundlegenden Einbettung mit der und Stichworte.
Speichern Sie die HTML-Datei und öffnen Sie sie. Verwenden Sie den Doppelpfeil-Handler, um die Größe der Bühne zu ändern.
Wenn Sie die SWF-Datei mit einer der beiden Methoden einbetten, müssen Sie die allowScriptAccess einstellen immer. Dies ist unbedingt erforderlich, da die SWF-Datei erstellt werden kann JavaScript Anrufe.
Wenn Sie möchten, dass die SWF-Bühnenfarbe sichtbar ist, müssen Sie das festlegen wmode Parameter zu undurchsichtig.
Das letzte, was Sie vielleicht beachten sollten, sind die Breiten- und Höheneinstellungen des eingebetteten Objekts. Möglicherweise möchten Sie sie auf die ursprüngliche Größe der SWF-Phase einstellen. Dies ist jedoch nicht erforderlich, da die Größenänderung in beiden Richtungen funktioniert.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", Flashvars, Parameter, Attribute); Sie haben wahrscheinlich bemerkt, dass sich die Bühne auf jede Breite und Höhe ändert. Das ist großartig, aber es kann Fälle geben, in denen Sie dies nicht wünschen, da dies das Layout Ihrer Seite oder etwas Schlimmeres beeinträchtigen könnte.
Um dies zu beheben, verfügt die BrowserCanvas-Klasse über vier nützliche Eigenschaften, mit denen Sie die Größe der SWF-Datei einschränken können.
minWidth -- bestimmt das Minimum mit dem die Bühne haben kannminHöhe -- bestimmt die minimale Höhe, die die Bühne haben kannmaximale Breite -- bestimmt die maximale Breite, die die Bühne haben kannmaximale Höhe -- bestimmt die maximale Höhe, die die Bühne haben kannUm zu sehen, wie das funktioniert, fügen Sie das hinzu setMinMax () Methode an die AS-Klasse, an der wir gearbeitet haben.
private Funktion setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
Und ändern Sie die createObjects () Methode wie folgt:
private Funktion createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (stage); setMinMax (); _logo = neues Logo () als Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (neue Pfeile () als Bitmap); addChild (_pfows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Grundsätzlich beschränkt sich die Größe der SWF-Datei auf ein Minimum von 300px durch 300px und maximal 800px durch 500px.
Um das Ergebnis anzuzeigen, kompilieren Sie den Code und laden Sie die HTML-Datei erneut. Jetzt sollte es Ihnen nicht möglich sein, die SWF-Datei außerhalb der Grenzen zu ändern.
Ich hoffe, Sie finden diese kleine Klasse genauso nützlich wie ich. Beachten Sie, dass dies möglicherweise nicht in allen Browsern funktioniert, da JavaScript auf unterschiedliche Weise interpretiert werden kann.
Fühlen Sie sich frei, einen Kommentar zu hinterlassen, wenn einige Schritte unklar sind.
Hinweis: Ich habe nicht den vollständigen HTML-Code hinzugefügt, den Sie in der Demo sehen, weil ich ihn einfach halten wollte und außerhalb des Rahmens dieses Tutorials lag. Die HTML-Datei aus der Demo ist im Download-Paket enthalten, sodass Sie den Quellcode dort überprüfen können.
