Share
In diesem Lernprogramm erkläre ich, wie Sie auf die Anzeigeliste zugreifen und diese verwenden, während Sie eine XML-basierte Bildergalerie mit ActionScript 3.0 erstellen.
Mithilfe von XML laden und erhalten wir dynamisch Informationen zu den Bildern, geben ihnen eine zufällige Mittelposition, fügen einen Rahmen hinzu, fügen Ziehfunktionen hinzu und schließlich verwenden wir ein Tween, um die Zoomanimation zu handhaben.
Öffnen Sie Flash und erstellen Sie eine neue Flash-Datei (ActionScript 3)..
Stellen Sie die Bühnengröße auf 600 x 350 ein und fügen Sie einen grauen radialen Farbverlauf hinzu (#EEEEEE, #DDDDDD)..
Wir werden eine vorinstallierte Animation hinzufügen, um den Benutzer darüber zu informieren, wenn der Inhalt geladen wird. In diesem Fall habe ich den von Apple erstellten Preloader verwendet, den wir zuvor erstellt hatten. Da wir nur die Animation verwenden, müssen Sie weder die Klasse importieren noch einen Export-Identifier verwenden.
Legen Sie den Preloader auf die Bühne und zentrieren Sie ihn.
Wir werden eine Schrift einbetten, eine sehr einfache Aufgabe, wenn Sie der Bühne in der Flash-IDE ein TextField hinzufügen, aber mit ActionScript etwas anders.
Öffnen Sie den Bibliotheksbereich und klicken Sie mit der rechten Maustaste in den Elementbereich, ohne einen auszuwählen. Ein Kontextmenü wird angezeigt.
Klicken Sie auf "Neue Schriftart", um ein Dialogfenster zu öffnen, geben Sie Ihrer Schriftart einen Namen und wählen Sie die Schriftart aus, die Sie verwenden möchten.
Dadurch wird eine Klasse der ausgewählten Schriftart erstellt. Diese wird in Schritt 9 instanziiert.
Erstellen wir die XML-Datei.
Öffnen Sie Ihren bevorzugten XML- oder Texteditor und schreiben Sie:
Wenn Sie fertig sind, speichern Sie es als "images.xml" in Ihrem XML-Ordner.
Der Code, den wir verwenden werden, wird in einer einzigen Klasse geschrieben, die als Dokumentklasse in der FLA-Datei verwendet wird.
Erstellen Sie eine neue ActionScript-Datei (Datei> Neu)
Speichern Sie es als "Main.as".
Wir beginnen mit:
Paketklassen
Das Paket Mit dem Schlüsselwort können Sie Ihren Code in Gruppen organisieren, die von anderen Skripts importiert werden können. Es wird empfohlen, sie mit einem Kleinbuchstaben zu beginnen und Intercaps für nachfolgende Wörter zu verwenden, beispielsweise: galleryClasses.
Wenn Sie Ihre Dateien nicht in einem Paket gruppieren möchten oder nur eine Klasse haben, können Sie sie direkt aus Ihrem Quellordner verwenden. Die Idee ist jedoch zu organisieren.
import flash.display.Sprite; import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import flash.text.TextField; importiere flash.text.AntiAliasType; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent;
Dies sind die Klassen, die wir benötigen, um diese Galerie zu erstellen. Wenn Sie Hilfe zu einer bestimmten Klasse benötigen, verwenden Sie bitte die Flash-Hilfe (F1)..
öffentliche Klasse Main erweitert MovieClip
Das erweitert Schlüsselwort definiert eine Klasse, die eine Unterklasse einer anderen Klasse ist. Die Unterklasse erbt alle Methoden, Eigenschaften und Funktionen, sodass wir sie in unserer Klasse verwenden können.
Wir werden MovieClip-spezifische Methoden und Eigenschaften verwenden, sodass wir die MovieClip-Klasse erweitern.
var xml: XML; // Das XML-Objekt, das die XML-Datei parsen wird var images: Array = new Array (); // Dieses Array speichert die geladenen Bilder. Var imagesLoaded: int = 0; // Ein Zähler zählt die geladenen Bilder. Var imagesTitle: Array = new Array (); // Die Titeleigenschaften der XML-Datei var tween: Tween; // Behandelt die Animation var zoomed: Boolean = false; // Überprüft, ob ein Bild vergrößert wird (standardmäßig false) var canClick: Boolean = true; // Überprüft, ob der Benutzer auf ein Bild klicken kann, um es zu vergrößern. Standardmäßig true var varX: int; // Speichert die x-Eigenschaft des zuletzt angeklickten Bildes var lastY: int; // Speichert die y-Eigenschaft des zuletzt geklickten Bildes var textformat: TextFormat = new TextFormat (); // Ein TextFormat-Objekt var-Bildschirm: Sprite = new Sprite (); // Ein schwarzer Bildschirm, um das aktive Bild zu fokussieren var formatFont: Avenir = new Avenir (); // Dies ist die eingebettete Schrift
Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn ein Objekt aus einer Klasse erstellt wird. Dieser Code wird zuerst ausgeführt, wenn Sie eine Instanz eines Objekts erstellen oder die Dokumentklasse verwenden.
In dieser Funktion legen wir die Eigenschaften des TextFormat-Objekts fest, das zum Anzeigen eines Titels oder einer Beschreibung jedes Bildes verwendet wird. Erstellen Sie den schwarzen Bildschirm, der angezeigt wird, wenn der Benutzer auf ein Bild klickt, und rufen Sie die Funktion auf, mit der die gewünschte XML-Datei geladen wird.
Accentsconagua
öffentliche Funktion Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Verwenden Sie dieselbe Größe, die Sie beim Einbetten der Schriftart aus dem Bildschirm "Bibliothek" verwendet haben. Graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); loadXML ("xml / images.xml"); Diese Funktion lädt die XML-Datei, die vom Parameter "file" bereitgestellt wird. Wir fügen auch einen Listener hinzu, der behandelt werden soll, wenn das Laden abgeschlossen ist.
private Funktion loadXML (Datei: String): void var urlLoader: URLLoader = neuer URLLoader (); var urlReq: URLRequest = neue URLRequest (Datei); urlLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Hier konvertieren wir die geladene XML-Datei mit dem Parameter "data" des URLLoader in ein gültiges XML-Objekt. Dann verwenden wir eine "for" -Anweisung, um einen Loader für jedes Bild in der XML-Datei zu erstellen. Weitere Informationen finden Sie im Kommentar.
private Funktion handleXML (e: Event): void xml = new XML (e.target.data); für (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Wenn ein Loader ein Bild aus der XML-Datei geladen hat, wird der folgende Code ausgeführt:
private Funktion geladen (e: Event): void imagesLoaded ++; // Fügt der imagesLoaded-Variablen eine hinzu. If (xml.children (). Length () == imagesLoaded) // Wenn alle Bilder geladen sind… removeChild (preloader); // Entfernt den Preloader MovieClip prepareImages (); // Diese Funktion wird im nächsten Schritt erklärt.
Diese Funktion fügt den Rahmen, das Textfeld zur Anzeige des Titels oder der Beschreibung, den dafür verwendeten schwarzen Hintergrund und einen Schattenfilter hinzu. Nehmen wir es in Teilen.
private Funktion preparImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Dies erstellt einen weißen Rahmen um das Bild.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, Bilder [i]. Breite + 40, Bilder [i] .height + 80); frame.graphics.endFill ();
Das Rechteck wird unter dem Bild positioniert, um als Rahmen verwendet zu werden.
Dadurch wird im unteren Teil des Bildes ein schwarzes Rechteck erstellt, in dem sich das Textfeld befindet.
infoArea.graphics.beginFill (0x111111, 0,75); infoArea.graphics.drawRect (0, 0, Bilder [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = images [i] .height - 60;
Mit dem folgenden Code werden die TextField-Eigenschaften festgelegt und der Inhalt hinzugefügt.
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Sie müssen dies hinzufügen, um die eingebettete Schriftart infoField.antiAliasType = AntiAliasType.ADVANCED zu verwenden. // Diese Eigenschaft zeigt den Text übersichtlicher an infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // Der Inhalt, der aus der XML abgerufen und im Array gespeichert wird
Hier stellen wir den gewünschten Maßstab der Bilder ein. Da sich alles im Container Sprite befindet, müssen wir nur die Größe ändern.
container.scaleX = 0,3; container.scaleY = 0,3;
Die Bilder haben eine zufällige Position basierend auf der Mitte des Bühnenbereichs. Dafür verwenden wir Mathe.
container.x = stage.stageWidth / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Dadurch wird ein Schattenfilter erstellt.
var shadowFilter: BitmapFilter = neuer DropShadowFilter (3, 90, 0x252525, 1, 2, 2, 1, 15); // Abstand, Winkel, Farbe, Alpha, Unschärfe, Stärke, Qualität var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Wende den Filter an
Zeit für das Hinzufügen der Kinder. Die Reihenfolge, in der wir sie hinzufügen, ist die Reihenfolge, in der sie in der Anzeigeliste aufgeführt werden. Fügen Sie sie also auf diese Weise hinzu.
infoArea.addChild (infoField); // fügt das TextField zum TextField-Hintergrund hinzu container.addChild (frame); // fügt den Rahmen zum Container hinzu container.addChild (images [i]); // Fügt das Bild über dem Rahmen im Container hinzu infoArea.visible = false; // Wir setzen die Bildinformationen standardmäßig auf unsichtbar. Container.addChild (infoArea); // Fügt den Informationsbereich über allem hinzu
Obwohl wir die Listener bereits zu jedem Sprite hinzufügen konnten, werde ich sie jetzt hinzufügen, sobald sie sich im Container befinden, um Ihnen zu zeigen, wie die Anzeigeliste funktioniert.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Dies ist das von der XML geladene Image. Dies ist das Loader-Objekt container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Dies ist der Frame container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (Container); // Zuletzt fügen wir den Container der Bühne hinzu
Im vorherigen Schritt haben wir dem Frame der Bilder zwei Hörer hinzugefügt. Diese Funktionen kümmern sich um das Ziehen.
Wir verwenden "parent", da wir alle Objekte ziehen möchten, da das "Ziel" das Frame Sprite ist, das übergeordnete Objekt der Container.
private Funktion dragImage (e: MouseEvent): void e.target.parent.startDrag (); private Funktion stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Diese Funktion ist für das Ein- und Auszoomen verantwortlich. Der Listener befindet sich im eigentlichen Bild. Wenn Sie in den Frame klicken, wird diese Funktion nicht aufgerufen.
Anmerkung des Herausgebers: Aus irgendeinem Grund die sonst if () Eine Anweisung innerhalb dieser zoomHandler-Funktion führte zum Absturz der Syntax-Markierung. Da es nicht auf der Seite angezeigt werden soll, habe ich die Funktion zum Download zur Verfügung gestellt. Bitte entschuldigen Sie die Unannehmlichkeiten, Ian.
Einige Aktionen müssen ausgeführt werden, wenn die Tweens abgeschlossen sind. Dies sind diese Aktionen.
private Funktion zoomInFinished (e: TweenEvent): void zoomed = true; // Ändern Sie die Variablen entsprechend dem Ereignis. CanClick = true; tween.obj.getChildAt (2) .visible = true; // Setzt den Informationsbereich auf sichtbar. Private Funktion zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (Bildschirm); // Entfernt den schwarzen Bildschirm tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // fügt den Drag-Listener wieder zum Frame-Sprite hinzu
Gehe zurück zur FLA und füge hinzu Main als Dokumentklasse im Eigenschaftenbereich. Wenn Sie Ihre Klasse in einem Paket speichern, müssen Sie auch den Namen des Pakets hinzufügen. deinPaket
Testen Sie Ihre Datei und sehen Sie, wie Ihre Galerie funktioniert!
Versuchen Sie, wie immer, verschiedene Dinge in Ihrem Code, um die Galerie nach Ihren Wünschen zu erstellen.
Ich hoffe, Ihnen hat dieses Tut gefallen, danke fürs Lesen!
