Wie erstellt man eine Bildgalerie in Flash (AS2)

Beachten Sie bitte, dass Sie mit .swf Dateien, .jpeg Dateien, .png Dateien und .gif arbeiten können

1.Wir benötigen 3 Bilder auf 180 x 180 Pixel und 3 Thumbnails für diese Bilder, die 60×60 Pixels groß sind. Nennen Sie die als image-1.jpg, image-2.jpg, image-3.jpg und thumb-1.jpg, thumb-2.jpg, thumb-3.jpg.

2. Jetzt erstellen Sie eine neue Flash Datei. Gehen zum Eigenschaften-Bereich oder auf Modify/Bearbeiten >> Document/ Dokument (Ctrl+J) und setzen Sie die Breite auf 280 px, die Höhe auf 200 px. Dann speichern Sie es auf Ihrem Computer als loadMovie.fla. Zum Beispiel „neu folder“ (neuer Ordner). Setzen Sie alle Bilder und Thambnails im „gallery“ Ordner, der im “new folder” (neuer Ordner) sein soll:

(zum Vergrößern klicken)

3. Legen 2 neue Ebenen ein und übernennen Sie die Ebenen von oben nach unten: actions, images, buttons. (Aktionen, Bilder, Buttons)

4. Gehen zu den ersten Rahmen der Button-Ebene und fügen Sie Ihr erstes Thumbnail ein. Chose File/ Datei auswählen >> Import/Importieren >> Import to Stage/ auf die Bühne importieren (Ctrl+R) und wählen Sie thumb-1.jpg von Ihrem Computer aus, danach drücken Sie auf den Button „Open/Öffnen“. Während das Thumbnail noch ausgewählt ist, gehen Sie auf Modify/Bearbeiten >> Convert to Symbol/ In Symbol konvertieren (F8). Im erscheinten Fenster „Convert to Symbol“ wählen MovieClip als Typ aus und tippen Sie thumb1MC im Textfeld Name, drücken Sie auf den Schalter Ok. Während das movieclip noch ausgewählt ist, gehen Sie zum Eigenschaften-Bereich und tippen Sie thumb1_mc im Textfeld <Instance Name> (Instanzname), wie es auf dem unteren Screenshot angezeigt wird.

(zum Vergrößern klicken)

(zum Vergrößern klicken)

5. Wiederholen Sie den Schritt 4 für die andere 2 Thumbnails. Geben Sie movieclip und Instanz ansprechende Namen. Platzieren Sie die Thumbnails auf die linke, rechte, obere oder untere Teile der Bühne. Hier ist ein Beispiel:

6. Auf den ersten Rahmen der Bildebene. Mit den Rectangle tool (Rechteckswerkzeug)(R)zeichnen Sie auf der Bühne eine 180×180 rechteckige Form (füllen Sie mit der gewünschten Farbe aus). Setzen Sie die rechteckige Form an der Stelle, wo die Bilder erscheinen sollen

7. Während das Rechteck noch ausgewählt ist, konvertieren Sie es in movieclip (Modify/Bearbeiten >> Convert to Symbol/ In Symbol konvertieren >> wählen Sie MovieClip als Typ und nennen Sie es imagesMC >> danach drücken Sie auf den Button „OK“). Während das movieclip noch ausgewählt ist, gehen Sie zum Eigenschaften-Bereich und geben Sie einen Instanzname von images_mc.

8. Jetzt fügen Sie den ActionScript-Code ein.

Dafür gehen Sie zum ersten Rahmen der Aktionsebene und öffnen Sie dort das Aktionen-Panel (F9). Hier fügen Sie den folgenden ActionScript-Code, der die loadMovie() Methode verwendet:

  this.onLoad=function(){
  loadMovie("gallery/image-1.jpg", images_mc); 
  images_mc._alpha=0;
  }
this.onEnterFrame=function(){
  images_mc._alpha+=10;
  }
thumb1_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-1.jpg"); 
  images_mc._alpha=0;
  }
thumb2_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-2.jpg");
  images_mc._alpha=0;
  }
thumb3_mc.onRelease=function(){
  images_mc.loadMovie("gallery/image-3.jpg");
  images_mc._alpha=0;
  }

(zum Vergrößern klicken)

9. Veröffnen Sie Ihre .FLA Datei via File/Datei >>Publish Preview/Veröffentliche Vorschau >>Flash oder (CTRL+ENTER). Sie bekommen eine Vorschau Ihre Galerie mit erstellenden .SWF Datei im “new folder”:

(click to enlarge)