mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 13:03 Benutzername: Passwort: Auto-Login

Thema: [Tutorial] Gallerie mit Actionscript vom 08.11.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> [Tutorial] Gallerie mit Actionscript
Autor Nachricht
labrar
Threadersteller

Dabei seit: 04.04.2006
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Mi 08.11.2006 14:47
Titel

[Tutorial] Gallerie mit Actionscript

Antworten mit Zitat Zum Seitenanfang

Hallo.
Hier möchte ich euch kurz ein Script vorstellen mit dem ihr eine Gallerie erstellen könnt.
Das wichtigste ist kommentiert.

Die Thumbs werden in mehreren Reihen/Spalten dargestellt. Das ganze ist ziemlich einfach gehalten und soll mehr zum lernen, als zur eigentlichen Verwendung anregen.

Sämtliche Buttons usw werden dynamisch erzeugt als einfach das Actionscript ins erste Frame und ab dafür.

Schritt 1.
Bilder für die Gallerie in einen Ordner packen und diesen dann via FTP auf euren Server. Nennt den Ordner "Bilder"

Schritt 2.
Folgendes Script in einer Textdatei speichern und diese als "ausgabe.php" ebenfalls auf euren Server laden.
Code:

<?php
$ord="Bilder";
$files=opendir($ord);
while($pics=readdir($files)){
if($pics!="." && $pics!=".."){
$picarr[]="$ord/".$pics;
echo "&bilder=".implode("|",$picarr);
}}
?>


Schritt 3. folgendes AS ins erste Schlüsselbild eines neuen Filmes (600 auf 500 Pixel) und diesen ebenfalls veröffentlicht auf den Server uns Spaß haben.
Code:

//Variablen für Reihen Spalten usw. Diese Werte können verändert werden
thmbmaxbreite = 90;
//Entspricht der maximalen Breite bzw Höhe der angelegten Thumbs
picmaxbreite = 300;
//Entspricht der maximalen Breite bzw Höhe des angezeigten Bildes
thbreihen = 4;
//Thumbreihen
thbspalten = 3;
//Thbspalten
//Pfeile zum durchklicken der thumbfelder ertsellen 
pfeile = function () {
   this.createEmptyMovieClip("pflinks", 101);
   pflinks.lineStyle(2, 0x0000FF, 60);
   pflinks.beginFill(0xFF0000, 100);
   pflinks.moveTo(100, 100);
   pflinks.lineTo(200, 200);
   pflinks.lineTo(100, 200);
   pflinks.endFill();
   pflinks._rotation = 45;
   pflinks._xscale = 20;
   pflinks._yscale = 20;
   this.createEmptyMovieClip("pfrechts", 102);
   pfrechts.lineStyle(2, 0x0000FF, 60);
   pfrechts.beginFill(0xFF0000, 100);
   pfrechts.moveTo(100, 100);
   pfrechts.lineTo(200, 200);
   pfrechts.lineTo(100, 200);
   pfrechts.endFill();
   pfrechts._rotation = 225;
   pfrechts._xscale = 20;
   pfrechts._yscale = 20;
   pflinks._y = ywert;
   pfrechts._y = ywert+85;
   pflinks._x = 90;
   pfrechts._x = 200;
   if (a == felder) {
      pfrechts._visible = false;
   } else {
      pfrechts._visible = true;
   }
   if (a>1) {
      pflinks._visible = true;
   } else {
      pflinks._visible = false;
   }
   pfrechts.onPress = function() {
      if (a<felder) {
         a++;
         galstart();
      }
   };
   pflinks.onPress = function() {
      if (a>1) {
         a--;
         galstart();
      }
   };
};
//Bilderanzeige
this.createEmptyMovieClip("anzeige", 500);
bilderanzeige = function () {
   
   
   for (j=0; j<thmbscount; j++) {
      mc = this["thmbholder"+j];
      mc.id = j;
      mc.onPress = function() {
         anzeige.unloadMovie();
         anzeige.loadMovie(pics[this.id*a]);
         this.onEnterFrame=function(){
            if(anzeige._width>1 ){
               ogw=anzeige._width;
               skalierung=100/ogw*picmaxbreite;
               anzeige._xscale=skalierung;
               anzeige._yscale=skalierung;
               if(anzeige._width==picmaxbreite){
               delete this.onEnterFrame;
               anzeige._x=thmbmaxbreite*thbspalten;
               }
               }
            }
      };
   }
};
//Bilder einladen und anordnen in der Funktion galstart();
var a = 1;
//Damit steuern wir uns später durch die Thumbs
galstart = function () {
   //Function definieren
   //preloader erstellen
   this.createEmptyMovieClip("loader", 105);
   loader.lineStyle(2, 0x0000FF, 60);
   loader.beginFill(0xFF0000, 100);
   loader.moveTo(100, 100);
   loader.lineTo(200, 100);
   loader.lineTo(200, 110);
   loader.lineTo(100, 110);
   loader.endFill();
   loader._visible = false;
   this.createTextField("tx", 400, loader._x, loader._y, 100, 40);
   tx.color = 0xFF0000;
   //Variablen automatisch anhand der oben eingegebenen Werte erstellen
   thmbsanzahl = pics.length;
   //anzahl ausgelesenen Bilder
   thmbscount = Math.ceil(thbreihen*thbspalten);
   //anzahl der auf einmal angezeigten Thumbs
   felder = Math.round(thmbsanzahl/thmbscount);
   //Einladen der Bilder in dynmaisch erstellte mcs
   for (i=0; i<thmbscount; i++) {
      //solange i kleiner ist als angezeigte Thumbs Anzahl
      this.createEmptyMovieClip("thmbholder"+i, i);
      //erstelle leere mcs
      this["thmbholder"+i].loadMovie(pics[i*a]);
      //lade Bilder
      this["thmbholder"+i]._alpha = 0;
      //Bilder unsichtbar bis die Größen und Anordnung eingerichtet sind
      checker = 0;
      //Um die mcs nacheinander zu skalieren
      this.onEnterFrame = function() {
         //Durchlaufe Frame bis alles skaliert
         if (this["thmbholder"+checker]._width>1) {
            //wenn Bild 1 geladen bzw Breite größer 1
            orgw = this["thmbholder"+checker]._width;
            //Abfragen wie breit
            //Skalieren des Thumbs
            sklaliervorgabe = 100/orgw*thmbmaxbreite;
            // Vorgabe der Breite in Prozent aufgrund des eingegebenen maxbreite Wertes
            if (this["thmbholder"+checker]._width>thmbmaxbreite) {
               this["thmbholder"+checker]._xscale = sklaliervorgabe;
               //Skaliere Breite
               this["thmbholder"+checker]._yscale = sklaliervorgabe;
               //Skaliere Höhe
               //Gegenprüfung für die Höhe
               if (this["thmbholder"+checker]._height>thmbmaxbreite) {
                  // Wenn zu hoch
                  orgh = this["thmbholder"+checker]._height;
                  //Höhe auslesen
                  skalierhoehenvorgabe = 100/orgh*thmbmaxbreite;
                  // Vorgabe der Höhe in Prozent aufgrund des eingegebenen maxbreite Wertes
                  this["thmbholder"+checker]._xscale = skalierhoehenvorgabe;
                  //Skaliere Breite erneut angepasst
                  this["thmbholder"+checker]._yscale = skalierhoehenvorgabe;
                  //Skaliere Höhe   
               }
            }
            if (this["thmbholder"+checker]._width<=thmbmaxbreite) {
               //&& this["thmbholder"+checker]._height<=thmbmaxbreite){//wenn die Größen den Vorgaben entsprechen
               checker++;
               // gehe zu nächstem Bild
            }
            //Preloaderanzeige
            p = Math.round(100/thmbscount*checker);
            if (p>1) {
               loader._visible = true;
               loader._width = p;
               tx.text = "Lade Bilder "+p+"%";
            }
            trace("Fortschritt="+p);
            trace(checker+" zu "+this["thmbholder"+checker]._height+" zu "+this["thmbholder"+checker]._width);
            if (checker == thmbscount) {
               //Wenn alle Bilder skaliert sind
               delete this.onEnterFrame;
               //stoppe die Schleife
               bilderanzeige();
               loader.removeMovieClip();
               //preloader entfernen
               tx.removeTextField();
               ywert = thbreihen*thmbmaxbreite;
               pfeile();
               //Und ordne in Spalten und Reihen an
               aktuellermc = 0;
               for (s=0; s<thbreihen; s++) {
                  for (h=0; h<thbspalten; h++) {
                     this["thmbholder"+aktuellermc]._x = h*(thmbmaxbreite+2);
                     this["thmbholder"+aktuellermc]._y = s*(thmbmaxbreite+2);
                     this["thmbholder"+aktuellermc]._alpha = 100;
                     aktuellermc++;
                     xwert = this["thmbholder"+aktuellermc]._x+this["thmbholder"+aktuellermc]._width;
                  }
               }
            }
         }
      };
   }
};
//Bilderquelle auslesen
pc = new LoadVars();
pc.onLoad = function(geladen) {
   if (geladen) {
      pics = this.bilder.split("|");
      trace(pics);
      galstart();
   } else {
      trace("Loading failed");
   }
};
pc.sendAndLoad("ausgabe.php", pc, "POST");
[/quote]


//edit by barett
Bitte keine Eyecatcher im Titel


Zuletzt bearbeitet von Barett am Mi 28.02.2007 19:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
vulnerability

Dabei seit: 12.11.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 29.01.2007 09:12
Titel

kleine kritik..großer Dank

Antworten mit Zitat Zum Seitenanfang

Hallo,

danke für die tolle Arbeit, die du hier geleistet hast....ich will nur eine weitere Empefehlung machen ..ein Preview des Endergebnisses wäre meiner Meinung nach hier sehr angebracht....vielleicht ein Screenshot od. ähnliches.

Danke *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
l'Audiophile

Dabei seit: 16.09.2004
Ort: Berlin
Alter: 35
Geschlecht: Männlich
Verfasst Mo 29.01.2007 18:29
Titel

Antworten mit Zitat Zum Seitenanfang

Habs mir jetzt nich genau angeschaut aber dennoch Respekt für die ganze Arbeit. *Thumbs up!* * Ich bin unwürdig * * Applaus, Applaus *



Lächel
Gruß PJ
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
labrar
Threadersteller

Dabei seit: 04.04.2006
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Mi 14.02.2007 23:43
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für das Lob * Ja, ja, ja... *

Ja stimmt. Ich guschdel mal ein paar Bilder zusammen und mach mal nen Link dazu
  View user's profile Private Nachricht senden
Sunlifestyle

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mo 26.02.2007 23:22
Titel

Antworten mit Zitat Zum Seitenanfang

gibt es die Galerie schon irgendwo online ?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
labrar
Threadersteller

Dabei seit: 04.04.2006
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Di 27.02.2007 00:38
Titel

Antworten mit Zitat Zum Seitenanfang

Sorry ich wollte was hochladen zum zeigen aber ich finde nicht die Zeit ein paar Sinnvolle Bilder zusammenzugruschteln und das dann hochzuschieben.

Das Ding funzt aber. Gewinnt keinen Schöheitspreis * Such, Fiffi, such! * * Ich muß mich mal kurz übergeben... * aber um das geht es hierbei auch nicht.

Also keine Angst Grins

Wenn einer Interesse daran hat dann kann er sich das ja in 3 Minuten zusammenkopieren und hochschieben <-- Schuld!
*hehe*
sofern er Bilder zur Hand hat natürlich
So long
  View user's profile Private Nachricht senden
messywrk

Dabei seit: 17.10.2006
Ort: Düsseldorf
Alter: 37
Geschlecht: Männlich
Verfasst Mi 28.02.2007 19:51
Titel

Antworten mit Zitat Zum Seitenanfang

nur weil ich das jetzt hier grade so las..

erstmal sehr nett das du deinen code in einem Forum postest und vielen Dank dafür! Grins

ich wollte nur noch der vollständigkeit halber den Link zu einer anderen OpenSource Gallery dazusetzen..
aber nich falsch verstehen, das is n ganz anderes Kaliber - erfordert MySQL und PHP und so weiter..
quasi nur für die die das jetzt geblickt haben und ma gucken wollen wie der code von etwas "komplexerem" aussieht *hehe*

http://www.sephiroth.it/file_detail.php?id=139
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [Suche] Tutorial für Flash + ActionScript
simple gallerie
Slide Gallerie
Gallerie mit GoLive
Gallerie mit Fireworks 8
Flash-Gallerie
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.