Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. XML

Erstellen Sie eine dynamische Flash-Galerie mit Slider Control

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial erstellen wir eine Galerie, in der alle Bilddateien in einem bestimmten Verzeichnis angezeigt werden. Ein Schieberegler dient zum einfachen Durchsuchen der Bilder.


Schritt 1

Schaffen Sie ein neues Flash AS3-Dokument und eine leere ActionScript-Date. Wir werden zuerst die Hauptklasse erstellen; Nennen Sie es "Gallery" und speichern Sie es als "Galerie.as". Unten finden Sie den Code zum Einrichten der ersten Klasse:

In Flash können wir das jetzt als Basisklasse festlegen, indem wir den Namen in das Eingabefeld unter den Veröffentlichungseinstellungen des Dokuments eingeben. Sie können einen "trace('hello world')" in der Galerie-Funktion ausprobieren, um zu testen, ob er funktioniert.


Schritt 2

Bevor wir mit der Hauptklasse fortfahren, beginnen Sie am besten mit dem Schieberegler. Der Code ist ziemlich einfach zu verstehen und kann Aufschluss darüber geben, wie die Dinge in AS3 gemacht werden.

Erstellen Sie zwei neue Movieclips: einen Schieberegler und einen Griff für den Schieberegler. Der Schieberegler oder Sucher muss nicht für ActionScript exportiert werden, da nur einige Funktionen auf das Handle angewendet werden müssen. Legen Sie die Klasse für das Handle als "Handle" fest. Wir können jetzt eine neue Klasse mit dem Namen "Handle" erstellen. Wenn Flash im selben Verzeichnis gespeichert wird, verwendet Flash diese Klasse automatisch für das Handle. Geben Sie sowohl einen Instanznamen wie "slider" als auch "theHandle" an.


Schritt 3

Das Folgende ist der vollständige Code für das Handle, den ich in Schritten erläutern werde. Das muss als "Handle.as" im selben Verzeichnis wie Ihre .fla gespeichert werden. Auf diese Weise führt Flash den Code aus, sobald eine Instanz mit dem Klassennamen "Handle" verwendet wird.

In den ersten Zeilen erstellen wir einige Variablen für Daten, die wir in jeder Funktion dieser Klasse verwenden können. Die Schiebereglervariable enthält einen Verweis auf die Instanz "slider" auf dem übergeordneten Element. Wir brauchen es, um die x-Position, in die der Griff bewegt werden soll, korrekt zu berechnen. Im Konstruktor setzen wir "buttonMode" auf true, sodass ein Handcursor angezeigt wird, wenn Sie mit der Maus über den Griff fahren. Zusätzlich fügen wir zwei Ereignislistener hinzu, um auf Mausereignisse zu warten.

Sobald ein Mouse-Down-Ereignis auftritt, wird ein zusätzlicher Listener hinzugefügt. Dieser Listener bleibt aktiv, solange die Drag-Bewegung nicht gestoppt wird, und ruft die Funktion "followHandle" auf. Es wird wieder entfernt, wenn der Mausklick vorbei ist.

Diese letzte Funktion bewegt den Griff tatsächlich. Die Variable "newPos" speichert die neue Position, an die sich der Griff bewegen soll. Befindet sich diese Position jedoch weiter links oder rechts vom Schieberegler, sollte die Position auf den maximal möglichen Wert eingestellt werden. Wenn das Handle verschoben wird, senden wir ein neues benutzerdefiniertes Ereignis namens "sliding" aus, mit dem wir später die Bilder verschieben können.


Schritt 4

Wenn bis jetzt alles gut gelaufen ist, sollten Sie einen schönen funktionalen Schieberegler wie den folgenden haben. Fügen Sie darunter ein dynamisches Textfeld hinzu, das die Bildnummer enthält. Geben Sie ihm einen Instanznamen wie "countTxt", damit wir ihn später in ActionScript ansprechen können. Da noch nichts angezeigt werden kann, habe ich es mit dem Text "Loading" gefüllt, der auch angezeigt wird, während das Skript das erste Bild lädt.


Schritt 5

Als nächstes erstellen wir das PHP-Backend-Skript. Flash kann den Inhalt eines lokalen Verzeichnisses nicht lesen, daher müssen wir die Informationen von PHP an Flash übergeben. Wir werden XML verwenden, da es einfach mit PHP auszugeben und in AS3 noch einfacher wieder zu lesen ist.

Das Folgende ist der PHP-Backend-Code, speichern Sie ihn als "backend.php". Der Code durchläuft das Verzeichnis "img" und schreibt dort eine XML-Zeile für jede Datei. Vor dem Drucken müssen wir das "." Herausfiltern. und ".." Verzeichnisse. Da das Verzeichnis nur Bilder enthält, ist keine weitere Überprüfung erforderlich.

Muss Folgendes sein:


Schritt 6

Bevor wir das in Flash laden, erstellen wir eine Klasse, in der unsere Bilder einzeln gespeichert werden. Auf die gleiche Weise, wie wir die Handle-Klasse erstellt haben, können wir jetzt eine Img-Klasse erstellen. Beginnen Sie mit der Erstellung eines Movieclips in der Größe, in der Ihre Bilder angezeigt werden sollen. Geben Sie einen Rand von einigen Pixeln ein und sparen Sie unten Platz für den Beschreibungstext. Fügen Sie ein dynamisches Textfeld für die Beschreibung hinzu und geben Sie ihm den Instanznamen "descr". Stellen Sie sicher, dass der Registrierungspunkt des Movieclips in der Mitte liegt, damit wir ihn später problemlos skalieren können. Exportieren Sie es für ActionScript unter dem Klassennamen "Img". Löschen Sie nun die Instanz von der Bühne, da wir sie direkt aus der Bibliothek aufrufen.


Schritt 7

Als nächstes laden wir die Informationen, die die PHP-Datei zurückgibt, mit ActionScript in unser Flash-Projekt. Öffnen Sie die Galerieklasse erneut. Der folgende Code fügt unserem Projekt zwei Funktionen hinzu. Zunächst wird "imagesClip" erstellt, ein leerer Movieclip, in dem die tatsächlichen Bilder später gespeichert werden. Wenn Sie hier "addChild" verwenden, wird der Movieclip zur Bühne hinzugefügt. Alles, was später zu imagesClip hinzugefügt wird, wird auch auf der Bühne angezeigt. Um die XML-Daten tatsächlich zu laden, erstellen wir einen "URLLoader". Diese Klasse kann die Ergebnisse abrufen und eine Funktion ausführen, wenn die Ergebnisse vorliegen.

Hier verwenden wir die Ladefunktion der URLLoader-Klasse. Um das Zwischenspeichern der Ergebnisse zu verhindern, können wir dem Ende der URL ein einfaches Datum hinzufügen. Der Ereignislistener prüft, wann der URLLoader fertig ist, und führt dann die Funktion loadImages aus.

Diese nächste Funktion durchläuft alle <img> -Instanzen in der XML. Für jede dieser Klassen wird eine neue Instanz der Img-Klasse erstellt. Als nächstes fügen wir es dem imagesClip hinzu (er dient nur zum Testen, da später nur die aktiven Bilder angezeigt werden sollen).


Schritt 8

Um unseren Img-Instanzen mehr Funktionalität zu geben, erstellen Sie eine Img-Klasse und speichern Sie sie als "Img.as". Ähnlich wie beim Laden des XML können wir das Bild selbst laden und im Img-Movieclip anzeigen. Das Laden sollte nicht im Konstruktor erfolgen, da sonst alle Bilder versuchen würden, gleichzeitig zu laden. Wir werden eine separate Funktion dafür erstellen.

Im Konstruktor setzen wir einen Verweis auf die Hauptgalerieklasse, damit wir später auf Elemente auf der Bühne oder auf öffentliche Variablen und Funktionen der Hauptklasse zugreifen können. Die Zeichenfolge "load" enthält den Pfad zu dem Bild, das PHP zurückgegeben hat. Wir speichern ihn in einer Variablen, damit wir später darauf zugreifen können.

Die Funktion "loadImage" lädt das Bild und führt nach Abschluss die Funktion "displayImage" aus.

Die Anzeigebildfunktion überprüft das von uns erstellte Bildarray und lädt das nächste Bild. Die Glättung wird im Loader auf true gesetzt (standardmäßig ist die Glättung bei dynamisch geladenen Bildern auf false gesetzt). Sobald Sie mit dem Skalieren oder Drehen eines Bildes beginnen, ist es wichtig, die Glättung so einzustellen, dass das Bild seine Qualität behält. Da sich der Registrierungspunkt des Img-Movieclips in der Mitte befindet, müssen wir die x- und y-Position berechnen, an der das Bild selbst platziert werden soll. In meinem Beispiel habe ich ein Verzeichnis von Bildern mit derselben Breite und Höhe verwendet. Wenn die Breite und Höhe des geladenen Bildes variabel sind, können Sie die Größe im laufenden Betrieb ändern. Kurz bevor wir es als Kind hinzufügen, setzen wir den Beschreibungstext auf "src", der den Namen des Bildes enthält.


Schritt 9

Nach den Änderungen, die wir an der Img-Klasse vorgenommen haben, müssen wir die Art und Weise aktualisieren, wie die Instanzen in der loadImages-Funktion der Gallery-Klasse aufgerufen werden. Wir müssen jetzt zwei Argumente übergeben, wenn wir new Img() aufrufen.

Der erste ist der Pfadname des Bildes, das geladen werden muss. Das erhalten wir aus der XML. Die zweite ist eine Referenz auf die Hauptklasse der Galerie; Wir können "this" verwenden, das auf die Klasse verweist, in der wir gerade arbeiten. Anstatt die Bilder mit addChild zum imagesClip-Container hinzuzufügen, erstellen wir eine neue Funktion "goTo". Diese Funktion ermittelt, welche Bilder auf dem Bildschirm platziert werden sollen. Das Argument, das wir übergeben müssen, ist die ID-Nummer des Bildes, dieselbe Nummer wie der Indexschlüssel im Bildarray. Wenn die Bilder zum ersten Mal geladen werden, setzen wir den Fokus auf das erste Bild, dessen ID-Nummer Zero ist.


Schritt 10

Um die goTo-Funktion nutzen zu können, müssen wir zuerst eine Variable "imagesToShow" deklarieren. Dadurch wird die Anzahl der Bilder festgelegt, die gleichzeitig auf den Bildschirm geladen werden sollen. Um die Richtung zu bestimmen, in die der Benutzer scrollt, überprüfen wir einfach, ob das Bild eine höhere oder niedrigere ID-Nummer als das letzte hat.

Die nächste "for loop" wiederholt alle auf dem Bildschirm benötigten Bilder. Beispiel: Wenn wir imagesToShow auf 5 setzen, wird eine Schleife von -2 bis 2 ausgeführt. Das bedeutet, dass wir bestimmen können, wo auf dem Bildschirm positioniert werden soll, wenn wir den Wert von i an die Img-Klasse übergeben (-2 ganz links) , 0 Mitte und 2 ganz rechts). Daher können wir die Bilder umso größer skalieren, je zentraler sie positioniert sind.

Es ist eine zusätzliche Prüfung enthalten, damit nicht vorhandene Bilder nicht aktiviert werden (sie werden beim ersten und letzten angehalten). Für jedes der aktiven Bilder führen wir die Funktion "makeActive" aus, die wir später erstellen werden.

Sobald wir die benötigten Bilder auf dem Bildschirm platziert haben, prüfen wir, welche nicht mehr vorhanden sein sollten, und bringen sie von der Bühne. Da alle Bilder zum imagesClip-Container hinzugefügt werden, können wir problemlos alle untergeordneten Elemente dieses Movieclips durchlaufen. Wenn ihre ID nicht innerhalb derjenigen liegt, die aktiv sein sollten, führen wir den "deActive" aus.

In der nächsten Zeile wird der Text des zuvor erstellten dynamischen Textfelds aktualisiert. Da die IDs der Bilder ihre Zählung bei 0 beginnen, addieren wir + 1 zur imgId, sodass das erste Bild tatsächlich die Nummer 1 usw. ist. Wir können die Gesamtzahl der Bilder durch Zugriff auf die Länge des Bildarrays ermitteln.

Schließlich setzen wir "orgImgId", damit beim nächsten Ausführen der Funktion die Richtung bestimmt werden kann, in die gescrollt wird.


Schritt 11

Wir brauchen jetzt die Funktionen "makeActive" und "deActive" in der Img-Klasse. Diese fügen das Bild entweder der Bühne hinzu oder entfernen es. Im Moment fügen wir sie einfach hinzu und platzieren sie richtig. Später werden wir sie auch an ihren richtigen Ort bringen.

Die Funktion makeActive prüft zunächst, ob sie bereits zum imagesClip hinzugefügt wurde. Wenn kein übergeordnetes Element gefunden wird, fügt es sich dem imagesClip-Container hinzu. Das übergeordnete Element ist dann der imagesClip. Als nächstes setzen wir die sichtbare Eigenschaft auf true. Beim Deaktivieren setzen wir es auf false, so dass es nur normal ist, dass unser Bild wieder angezeigt wird, wenn es aktiviert wird.

Es besteht die Möglichkeit, dass das Bild selbst noch nicht geladen wurde. Um das zu überprüfen, überprüfe ich, ob die Anzahl der Kinder kleiner als 3 ist. Diese Anzahl kann von der Anzahl der Formen oder anderen Movieclips in Ihrem Img abhängen. Wenn Sie sich bei dieser Methode nicht sicher sind, ist es sicherer, zu Beginn einen Booleschen Wert zu deklarieren und ihn in der Funktion displayImage auf true zu setzen.

In AS3 gibt es keine Tiefe, aber sobald wir mit dem Skalieren und Drehen unserer Bilder beginnen, müssen wir sicherstellen, dass das Bild in der Mitte über den anderen liegt. Da wir die Position als Argument in der Funktion goTo übergeben haben, können wir sie jetzt verwenden, um den Index des Bildes im imagesClip festzulegen. Der Index eines Kindes kann mit einer Tiefe verglichen werden, aber es gibt keine Probleme beim Ändern, da die anderen Movieclips einen Index nach oben oder unten verschieben. Dieser Schritt ist nicht erforderlich, wenn Sie nicht vorhaben, die Bilder zu überlappen.

Zuletzt bestimmen wir die Position des Bildes. Die Variable "extra" wird hier verwendet, um herauszufinden, um wie viel das aktuelle Bild von der Mitte entfernt ist. "DefaultWidth" und "spaceBetween" sind öffentliche Variablen, die in der Hauptgalerieklasse festgelegt sind, sodass wir von überall darauf zugreifen können. Da alle Bilder in meinem Verzeichnis dieselbe Breite haben, setze ich defaultWidth auf 195 und spaceBetween auf 20. Um das Bild tatsächlich an die neue Position zu verschieben, setzen wir die x-Eigenschaft auf den neu gefundenen x-Wert.


Schritt 12

Die deActive-Funktion ist ziemlich einfach, sie ändert die Sichtbarkeit in false. Die Richtung ist bereits als Argument festgelegt, da wir später wissen müssen, in welche Richtung das Bild gesendet werden soll, wenn es von der Bühne genommen wird.


Schritt 13

Inzwischen sollten die ersten Bilder auf der Bühne erscheinen. Es fehlt nur noch eine Funktionalität. Der Schieberegler ist noch nicht mit der Funktion goTo verbunden. Da wir jedoch bereits ein benutzerdefiniertes Ereignis auslösen, sobald das Handle gezogen wurde, ist es nicht sehr schwierig, die beiden zu verbinden.

Fügen Sie der Galeriekonstruktorfunktion die folgende Zeile hinzu. Dieser Ereignislistener führt die Folienfunktion jedes Mal aus, wenn das "sliding"-Ereignis vom Handle aufgerufen wird.

Die Schiebefunktion muss lediglich berechnen, welches Bild in der Mitte angezeigt werden soll, je nachdem, wo sich der Griff befindet. In der Funktion "slider" und "TheHandle" sind die Instanznamen aufgeführt, die wir zuvor in den Movieclips auf der Bühne festgelegt haben. Um herauszufinden, zu welchem Bild Sie wechseln sollen, bestimmen wir zunächst den Prozentsatz der Position des Griffs über die Länge des Schiebereglers. Wenn Sie dann mit der Gesamtzahl der Bilder multiplizieren, gelangen Sie zur richtigen Bild-ID.


Schritt 14

Wenn Sie es geschafft haben, so weit zu folgen und zu verfolgen, welche Klassen importiert und welche Variablen deklariert werden sollen (oder den Quelldateien gefolgt sind), sollten Sie jetzt ein funktionierendes Beispiel haben.


Schritt 15

Zum Abschluss dieses Tutorials fügen wir den Bildern Tweening hinzu, indem wir TweenLite verwenden, eine kostenlose und leichte Tweening-Engine. Die von Adobe bereitgestellten Standard-Tweening-Klassen funktionieren nicht gut, wenn viel los ist. Beim Ausprobieren stürzten sie oft ab oder frierten ein, während ich solche Probleme mit TweenLite noch nicht entdeckt habe. Die Syntax von TweenLite ist sehr einfach. Ich demonstriere alles, indem ich es mit einem normalen Flash-Tween vergleiche. Tweening eines Objekts von seinem aktuellen x auf 100 und Ändern des Alphas auf 0:

Hier ist die alternative Syntax von TweenLite:


Schritt 16

Erstellen wir eine neue Funktion, in der wir alle Tweening-Aktionen platzieren können. Nennen Sie es "flyTo" und platzieren Sie es in der Img-Klasse.

Für diese Funktion sind 3 Argumente erforderlich: der zuvor berechnete x-Wert, ob er nach dem Tween und der Skala entfernt werden soll. Der Parameter "removeAfter" wird in der Funktion deActive verwendet, sodass die Sichtbarkeit des Bildes nach Erreichen des Bühnenendes auf false gesetzt werden kann. Der Skalierungsparameter wird nur für das mittlere Bild verwendet. Wir werden es etwas größer als die anderen anzeigen.

Schauen wir uns die Tweening-Optionen an, um festzustellen, wann das Bild von der Bühne entfernt wird. Zuerst wählen wir eine Lockerungsoption, in diesem Fall "Linear.easeIn". das gibt normale, lineare Bewegung. Zweitens verblassen wir den Alpha-Wert auf Null, damit das Bild ausgeblendet wird. Dann skalieren wir es auf nur einen kleinen Prozentsatz seiner Breite und Höhe, damit es am Ende kleiner wird. Wenn das Tween abgeschlossen ist, setzen wir die Sichtbarkeit auf false.

Wenn ein Bild aktiviert wird, sind die Tweening-Optionen unterschiedlich. Wir setzen die Lockerung auf "Back.easeOut" Die Bilder scheinen also etwas zu weit zu fliegen und springen dann zurück. ein sehr subtiler Effekt. Als nächstes ändern wir das Alpha zurück auf 1 und skalieren das Bild auf den Skalierungswert, den wir an die Funktion übergeben haben. Zuletzt stellen wir eine zufällige Drehung von -10 bis 10 Grad ein. Wenn Ihr Beschreibungstext nach dieser Aktion nicht geladen werden kann, müssen Sie sicherstellen, dass die Schriftart eingebettet ist.


Schritt 17

Jetzt müssen wir die Funktionen makeActive und deActive aktualisieren, damit sie die neue Funktion flyTo verwenden.

In der Funktion makeActive müssen wir dem Bild einen x-Wert hinzufügen, damit es von diesem ursprünglichen Wert abweichen kann. Die defaultWidth muss in der Hauptklasse Gallery festgelegt werden und enthält die Breite der Bühne.

In der deActive-Funktion müssen wir lediglich einen moveTo-Wert hinzufügen, der den x-Wert enthält, zu dem das Bild wechseln soll. Wenn wir das außerhalb der Bühnenbreite lokalisieren, verschwindet das Bild direkt außerhalb der Bühne.


Schritt 18

Nachdem wir alles aktualisiert haben, haben wir jetzt eine funktionale Galerie. Um zu sehen, wie die Movieclips von der Bühne verschwinden, sehen Sie sich die Vollversion an.


Abschluss

Die endgültige Version ist immer noch wenig funktionsfähig. Die geladenen Bilder müssen alle dieselbe Größe haben und keine größere Vorschau haben. Sie können eine Größenänderungsfunktion und eine Option hinzufügen, um beim Klicken eine größere Vorschau des Bildes anzuzeigen. Darüber hinaus kann eine Option zum Durchsuchen von links oder rechts mit Schaltflächen oder mit einem Tastaturereignis hinzugefügt werden.

Sobald Sie das Konzept der Verwendung von Klassen zum Trennen und Strukturieren Ihres Codes verstanden haben, hilft das bei der Entwicklung und erleichtert die Dinge auf lange Sicht. Ich hoffe es hat euch Spaß gemacht mitzumachen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.