Share
In diesem Quick Tip erfahren Sie, wie Sie die ExternalInterface-Funktion von Flash verwenden und ein wenig jQuery hinzufügen, um einen "Lichtschalter" zu erstellen, der die Webseite dimmt. Dies ist sehr effektiv bei Video - Playern, Diashows usw.
Um diesen Lichtschalter zu erstellen, verwenden wir in Flash den Befehl ExternalInterface. Wir erstellen einen Aufruf einer jQuery-Funktion, die die Webseite beim Klicken auf die Schaltfläche dimmt. Wir werden dann Dreamweaver (oder ein beliebiges HTML-Bearbeitungsprogramm) verwenden, um eine Webseite zum Anzeigen des Effekts zu erstellen.
Dies ist ein sehr nützlicher Effekt, um Flash-Anwendungen (z. B. Videoplayer) hinzuzufügen, um die Benutzererfahrung zu verbessern und Ihrer Website ein wenig zusätzliche Funktionalität hinzuzufügen.
Erstellen Sie ein neues Actionscript 3-Dokument und setzen Sie es auf 120 x 120 Pixel. Erstellen Sie ein 100 x 100px-Quadrat mit einem Eckenradius von 10.
Füllen Sie es mit einem Farbverlauf von #BBBBBB zu # 999999. Verwenden Sie das Verlaufstransformations-Tool (Tastenkombination 'F'), um den Farbverlauf so zu drehen, dass #BBBBBB oben und nicht rechts steht.
Wählen Sie dann den Hintergrund aus und konvertieren Sie ihn in ein Symbol (Modifizieren> In Symbol konvertieren). Benennen Sie ihn als "buttonBackground"..
Gehen Sie in den Movieclip des Schaltflächenhintergrunds, indem Sie darauf doppelklicken und den Verlauf auswählen. Drücken Sie dann STRG + C, um es zu kopieren, drücken Sie STRG + UMSCHALT + V, um es an der gleichen Stelle einzufügen, und wechseln Sie es anschließend nicht, indem Sie auf Modify> Shape> Expand Fill klicken und es einfügen 2px. Ändern Sie den Farbverlauf so, dass er abläuft #CCCCCC zu #AAAAAA.
Gehen Sie zurück zur Hauptzeitleiste und wählen Sie die Schaltfläche Movieclip. Wählen Sie dann Modifizieren> In Symbol konvertieren aus und wählen Sie Taste mit dem Namen Lichten aus.
Gehen Sie nun in die Schaltfläche, indem Sie darauf doppelklicken und zwei neue Ebenen über der Hintergrundebene erstellen Birne und Text. Schreiben Sie "Lights Off" auf die Textebene. Ich habe Arial Bold mit 20pt und einer Farbe von # 444444 verwendet. Ich habe auch eine einfache Glühbirne mit einem Kreis für die Oberseite und einigen abgerundeten Rechtecken für die Basis erstellt. Ich habe die Birne in einer Farbe von # 5D5D5D gemacht.
Gehen Sie zum nächsten Keyframe für den Zustand "over" der Schaltfläche, und stellen Sie die Textfarbe # 353535 und die Glühlampenfarbe # 4C4C4C ein. Geben Sie dem Hintergrund einen Glühfilter mit folgenden Eigenschaften:
Für den Down-Zustand löschen Sie einfach das Glühen vom Hintergrund und drehen den Hintergrund um 180 °.
Gehen Sie in Ihre Bibliothek, klicken Sie mit der rechten Maustaste auf die LightsOff-Schaltfläche, wählen Sie "Duplizieren" und nennen Sie die neue Kopie "LightsOn".
Geh in die Lichter an und ändern Sie den Text für alle Status in "Lights On". Fügen Sie einige Lichtstrahlen um die Birne hinzu, wie in der Abbildung unten gezeigt:
Gehe zurück zur Hauptbühne. Stellen Sie sicher, dass Sie eine Instanz von haben Lichten aus auf der Bühne und einer Lichter an Filmausschnitt. Geben Sie ihnen die Instanznamen "lightsOff" bzw. "lightsOn". Zentrieren Sie beide Tasten mithilfe des Ausrichtungsbereichs auf der Bühne. Wenn Sie es nicht sehen können, gehen Sie zu Fenster> Ausrichten (oder drücken Sie STRG + K). Stellen Sie sicher, dass Sie unten im Bedienfeld auf die Schaltfläche "An Bühne ausrichten" klicken.
Öffnen Sie eine neue Actionscript-Datei und schreiben Sie die grundlegende Dokumentklasse aus. Wenn Sie sich mit Dokumentenklassen nicht auskennen, lesen Sie den Quick-Tipp von Michael, um den Einstieg zu erleichtern.
Speichern Sie die Actionscript-Datei als "Lights.as" und setzen Sie dann in Flash die Dokumentenklasse der .fla auf Beleuchtung.
Das sieht nach viel Code aus, aber sobald Sie die Kommentare durchgelesen haben, ist es eigentlich ganz einfach.
Accentsconagua
package import flash.display.MovieClip; import flash.external.ExternalInterface; // Importiere die Klasse, die zum Aufrufen einer jQuery-Funktion erforderlich ist. Import flash.events.MouseEvent; // Importiere die Klasse, die zum Erkennen eines Mausklicks benötigt wird. Public class Lights erweitert MovieClip public function Lights () lightsOn.visible = false; // Die Schaltfläche lightsOn als unsichtbar definieren lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Einen Listener für einen Mausklick auf die Schaltfläche lightsOff hinzufügen lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Einen Listener für einen Mausklick auf die LightsOn-Schaltfläche hinzufügen Funktion turnLightsOff (e: MouseEvent): void // Lichter ausschalten function lightsOn.visible = true; // Mache die lightsOn-Schaltfläche sichtbar lightsOff.visible = false; // Die LightsOff-Schaltfläche als unsichtbar definieren ExternalInterface.call ("lightsOff"); // Aufruf der jQuery-Funktion 'lightsOff' Funktion turnLightsOn (e: MouseEvent): void // Beleuchtung aktivieren Funktion lightsOn.visible = false; // Die Schaltfläche lightsOn als unsichtbar definieren lightsOff.visible = true; // Die LightsOff-Schaltfläche sichtbar machen ExternalInterface.call ("lightsOn"); // Aufruf der jQuery-Funktion 'lightsOn' Öffnen Sie Ihren Texteditor zum Erstellen von HTML-Seiten. In meinem Fall verwende ich Adobe Dreamweaver. Erstellen Sie ein leeres HTML-Dokument und speichern Sie es als Lichtschalter.html im selben Verzeichnis wie Ihre SWF. Dann richten Sie Ihr Dokument mit folgendem Code ein:
Ich werde die Flash-Datei mit swfobject hinzufügen. Wenn Sie swfobject nicht kennen, können Sie Abschnitt 1 des Angel-Tutorials über die Verwendung von swfobject zum Einfügen Ihrer SWF-Dateien in Ihr HTML-Dokument lesen. Sobald Sie swfobject im Griff haben und die erforderlichen Dateien haben, können Sie fortfahren.
Sie müssen den folgenden Code in die Tags in Ihrer HTML-Seite. Wie Sie sehen können, benötigen Sie die swfobject.js und expressInstall.swf Dateien im selben Verzeichnis wie Ihre SWF- und HTML-Seite.
Jetzt müssen wir nur noch die jQuery-Funktionen schreiben. Dies sind zwei einfache Funktionen, die aus der SWF-Datei aufgerufen werden, wenn Sie auf die Schaltfläche klicken.
Diese gehen auch ins Innere Tags unter dem swfobject-Code. Wie Sie sehen, bekomme ich die jQuery-Datei direkt vom Google-Server.
Wenn Sie nun Ihre HTML-Datei testen, sollte der Lichtschalter wie in der Demo funktionieren. Dies ist ein sehr nützlicher Effekt für Flash-Video-Player, wenn Sie die Benutzererfahrung auf Ihrer Website verbessern möchten. Es macht es dem Benutzer viel einfacher, sich auf die SWF-Datei zu konzentrieren.
Ich hoffe, dass Ihnen dieses Tutorial gefallen hat, und vielen Dank für das Lesen!
