Galerie mit XML

[veNom]

Hallo,

ich bin gerade dabei mit einen Freund gemeinsam eine kleine Flash Portfolio für jemanden zu erstellen aber irgendwie stehen wir total an, haben eigentlich kaum Erfahrung mit ActionScript, haben uns ein Buch dazu gekauft um etwas zu studieren, haben auch schon zusammengebracht das immer 1 Bild geladen wird und man mit einen Weiter Button zum nächsten oder vorigen navigieren kann.

Es sollen aber alle Bilder aufgelistet werden (THumbnails), eine gewisse Anzahl nebeneinander und danach ein Umbruch, scheitern tut es eigentlich Hauptsächlich am anzeigen der Bilder, besonders mehrere Nebeneinander.
Die XML hat diesen Aufbau:
<gallery>
<pic>
<thumbnail>thumbnail.jpg</thumbnail>
<image>imagebig.jpg</image>
<infos>Informationen über das Bild</infos>
</pic>
...
</gallery>

Sollte von der Struktur her ja nicht falsch sein, hoffe ich, vielleicht könnt ihr mir ein paar Tipps oder Codes weiterhelfen, auch Google brachte uns nict wirklich weiter.

Möchte mich auch schon im vorhinein bedanken, da ich heute den ganze Tag kaum da sein werde erst etwas später wieder, bzw spätestens morgen

[Labrar]

Hi

Im Prinzip ganz einfach. Ihr habt also die XML Ausgabe welche auch getraced wird??
Sagen wir mal eurer Bilder sind mit Pfadangabe in einem Array namens "pics";

Zunächst erstellst du einen Thumbnailcontainer

Code: Alles auswählen

createEmptyMovieClip("th_cont",0);


Jetzt erstellst du in diesen Container kleine mcs die die Thumbs laden. Für jedes einen. Ausserdem werden hier gleich
die Bilder reingeladen.

Code: Alles auswählen

for(i=0;i<pics.length;i++){
th_cont.createEmptyMovieClip("holder"+i,i);
th_cont['holder'+i].loadMovie(pics[i]);
}


Jetzt wird bei jedem einzelnen Bild geprüft ob es schon voll geladen ist(Sehr wichtig und unabdingbar). Das geht in einer onEnterFrameschleife die wir so konstruieren dass sie ähnlich einer for Schleife Bild für Bild durchläuft. Wir prüfen also eins nach dem anderen, und skalieren es gleich

Code: Alles auswählen

hoehe=40;//Spätere Thumbnailhoehe
starter=0;//In etwa bei einer forschleife i=0
this.onEnterFrame=function(){
if(th_cont['holder'+starter].getBytesTotal()==th_cont['holder'+starter].getBytesLoaded() && th_cont['holder'+starter]._height>1){
scaler=100/th_cont['holder'+starter]._height*hoehe;
th_cont['holder'+starter]._xscale=scaler;
th_cont['holder'+starter]._yscale=scaler;
starter++;

if(starter==pics.length){
delete this.onEnterFrame;

//Alle Thumbs nebeneinander annordnen:
abstand=2;//Abstand zwischen den Thumbs
for(a=0;a<pics.length;a++){
th_cont['holder'+a]._x=th_cont['holder'+(x-1)]._x-th_cont['holder'+(x-1)]._width+abstand;
mc=th_cont['holder'+a];
mc.id=a;

//Und gleich noch den Click drauf
mc.onRelease=function(){
trace(this.id);
}
}
}

}
}


Ungetestet da im Moment kein Flash zur Hand. Müsst aber so gehen

[Labrar]

Ach so. Du willst ja auch gleich mehrere Reihen haben gell??

Also mal eine kleine Art Modulo

ersetzte

Code: Alles auswählen

abstand=2;//Abstand zwischen den Thumbs
for(a=0;a<pics.length;a++){
th_cont['holder'+a]._x=th_cont['holder'+(x-1)]._x-th_cont['holder'+(x-1)]._width+abstand;
mc=th_cont['holder'+a];
mc.id=a;

//Und gleich noch den Click drauf
mc.onRelease=function(){
trace(this.id);
}
}


durch

Code: Alles auswählen

perreihe=10;//Wieviele Thumbs je Reihe??
reihen=Math.round(pics.length/perreihe)+1;
anfang=0;   
for(h=0;h<perreihe;h++){
   for(v=0;v<reihen;v++){
      th_cont['holder'+anfang]._x=h*th_cont['holder'+anfang]._width;
      th_cont['holder'+anfang]._y=v*th_cont['holder'+anfang]._height;
      anfang++;
      }
   }
for(a=0;a<pics.length;a++){
mc=th_cont['holder'+a];
mc.id=a;
mc.onRelease=function(){
trace(this.id);
}
}


Ich hoff dass jetzt überall }{ stimmt und keines zuviel oder zuwenig ist
Aber wenns eine Fehlermeldung gibt kannst das ja selbst beheben. Ist wie bei jeder anderen Progsprache auch if's immer mit { beginnen und } beenden. Genauso auch alle Schleifen. Siehst ja selbst

[veNom]

Hmm naja, habs versucht, aber ich checks einfach nicht, ich kann zwar PHP Programmieren, aber ActionScript ist echt hart, also ich durchblick das ganz und gar nicht. Eigentlich weiß ich ja den Aufbau von der Logik her und in PHP wäre es in 1 Stunde getan aber echt Null Plan, vorallem verstehe ich bei deinen Code nicht wo du die XML-Daten ausliest oder sonstiges...

[Labrar]

Ups
Da hast du mich falsch verstanden. Ich dachte du wärst schon so weit dass die XML Daten bereits übertragen wurden. Irre ich mich da?

Es sollen aber alle Bilder aufgelistet werden (THumbnails), eine gewisse Anzahl nebeneinander und danach ein Umbruch, scheitern tut es eigentlich Hauptsächlich am anzeigen der Bilder, besonders mehrere Nebeneinander.

[veNom]

ja naja, wir haben ein "tutorial" aus einen buch gemacht wo man Bilder via weiter/zurück buttons durchgehen kann, aber ich habe null Ahnung wie das eigentlich funktioniert. Ich Durchblicke einfach ActionScript nicht, für mich ergibt dieser ganze Grimsgrams keine logische Funktion...

[Labrar]

Wieso? Ist doch eigentlich simpel. AS Unterscheidet sich fast nicht von anderen Programmiersprachen. Genaugenommen ist es zu 70% identisch mit Javascript. Nur das es eben bei Javasript Befehle gibt die es in Actionscript nicht gibt und umgekehrt. Die Syntax ist aber vollkommen identisch.

z.B. du ließt deine Bilder also vermutlich voa LoadVars bzw. loadXml ein und speicherst die in einem array Namens "pics".
pics sieht also jetzt so aus: [Bild1.jpg,Bild2.jpg, Bild3.jpg]
Und schon funktioniert mein Code.

[veNom]

Meine XML ist anders aufgebaut, steht oben dabei.

Ich habe nämlich 1 Thumbnail und 1Großes Bild und zusätzlich ein kurzer Text als Information zum Bild. Ein extra Thumbnail brauch ich weil es nicht einfach das komplette Bild verkleinert ist, sondern nur ein Ausschnitt.

Eigentlich bräuchte ich doch nur 1 Funktion womit ich meine Bildaten auslese, dann Pack ich die Funktion in ein Array und dann noch kurz verlinken und fertig, ich kenn nur leider die Befehle nicht dafür um 1 Bild auszulesen.

Achja und JavaScript kann ich auch nicht only HTML, CSS und PHP/MySQL

Edit:
Das ist jetzt ein Code wo ich 1 Bild auslesen kann

Code: Alles auswählen

var aktuelle_nummer = 0;

var bildanzeige:MovieClip = new MovieClip ();
this.addChild(bildanzeige);
bildanzeige.name = "bildanzeige_mc";
bildanzeige.x=38;
bildanzeige.y=63;

    var bilder = [];

   var loader:URLLoader = new URLLoader();
   loader.load(new URLRequest("bilder.xml"));
   loader.addEventListener(Event.COMPLETE, parseXML);

   function parseXML(ev) {
        var xml_dokument:XML = new XML(ev.target.data);
      xml_dokument.ignoreWhitespace = true;

      for (var i:int = 0; i < xml_dokument.bild.length(); i++) {
         trace("Lade Bild mit der ID " + xml_dokument.bild[i].@id);
         var bild = new Object();
            bild.dateiname = xml_dokument.bild[i].dateiname.text();
         bilder[bilder.length] = bild;
      }
      
      ladeBild(1);
   }
   
   function ladeBild(nr:int) {
      if (nr > 0 && nr < bilder.length) {
          var loader:Loader = new Loader();
          loader.load(new URLRequest(bilder[nr - 1].dateiname));
        while (bildanzeige.numChildren > 0) {
            bildanzeige.removeChildAt(0);
        }
        bildanzeige.addChild(loader);
        dateiname_txt.text = bilder[nr - 1].dateiname;
          aktuelle_nummer = nr;
      }
   }


Welches Bild ich auslese bestimme zur Zeit in dieser Zeile:

Code: Alles auswählen

      ladeBild(1);

Normalerweise sind bei diesen Script dann Vor und Zurück Buttons vorhanden die dann die "ID" ändern, zum Beispiel auf ladeBild(2), dies entfällt bei mir, eigentlich müsste ich dann doch nur ein Array ändern das er mir alles auflistet und ich nicht weiter klicken muss. Nur weiß ich leider nicht wie ich das anstellen kann.

[Labrar]

Okay. Hier mal ein kleines Tut nur für dich

Zunächst mal deine xml Datei. Bau die etwas strukturierter und vergib gleich richtige Übergabevariablennamen

Code: Alles auswählen

<gallery>
<ima infos="Blah Blah info" image="blid1.jpg" thumbnail="thmbild1.jpg"/>
<ima infos="Nochmal eine Info" image="bild2.jpg" thumbnail="thmbild2.jpg"/>
<ima infos="und wieder eine Info" bild3.jpg" thumbnail="thmbild3.jpg"/>
<ima infos="So viel Info????" image="bild4.jpg" thumbnail="thmbild4.jpg"/>
</gallery>


ima steht für image hat aber keine Prgrammiertechnische Relevants. Ich hätte auch mit Hund oder Auto einleiten können. Aber es soll ja Sinn machen.

Jetzt gilt es die XML wie sie ist einzulesen

Code: Alles auswählen

gal = new XML();//Klassenaufruf XML Struktur
gal.ignoreWhite = true;//Leerzeichen ignorieren
gal.onLoad = function(success) {//Wenn XML erfolgreich geladen
   trace(gal);//Zeige den Inhalt im Tracefenster an
};
gal.load("meine.xml");//Welche XML soll geladen werden?


So. Gar nicht so schwer oder?

Jetzt noch schnell einen datencontainer in deine Anweisung einbauen der die Daten hält.

Code: Alles auswählen

gal = new XML();//Klassenaufruf XML Struktur
gal.ignoreWhite = true;//Leerzeichen ignorieren
gal.onLoad = function(success) {//Wenn XML erfolgreich geladen
   anzahl = this.firstChild.childNodes.length;//Wieviele Sätze sind es
   for (i=0; i<anzahl; i++) {//Selbsterklärend
      this.datencontainer = this.firstChild.childNodes[i];//Eine Art Array wenn du so willst.Funktioniert aber eher wie ein Object
}
};
gal.load("meine.xml");//Welche XML soll geladen werden?


Ja und schon kannst du alles verschiedene Arrays packen und dann mein obiges Script weiterverwenden. Also:

Code: Alles auswählen

pics=new Array();//Wie im Script oben
info=new Array();//Array für deine Infos
thmb=new Array();//Deine Thumbnails (wenn du die unbedingt brauchst)
gal = new XML();//Klassenaufruf XML Struktur
gal.ignoreWhite = true;//Leerzeichen ignorieren
gal.onLoad = function(success) {//Wenn XML erfolgreich geladen
   anzahl = this.firstChild.childNodes.length;//Wieviele Sätze sind es
   for (i=0; i<anzahl; i++) {//Selbsterklärend
      this.datencontainer = this.firstChild.childNodes[i];//Eine Art Array wenn du so willst.Funktioniert aber eher wie ein Object
//Arrays füttern
pics[i]=this.datencontainer.attributes.image;
info[i]=this.datencontainer.attributes.infos;
thmb[i]=this.datencontainer.attributes.thumbnail;
}
};
gal.load("meine.xml");//Welche XML soll geladen werden?


Die Arrays info und thmb kannst du jetzt über die ID abrufen (info[this.id]). Schau dir dazu obiges Sript an wo dann auch der release Befehl drin steht.
Jetzt wurschtel mal ein bisschen und wenn du Schwierigkeiten hast, lass es mich wissen

Ich geh jetzt Motorrad fahren

[veNom]

Ich bekomme zwar keinen Fehler ausgegeben, allerdings sehe ich auch keine Bilder angezeigt.

[Labrar]

Mach mal direkt unter die for Schleife wo deine Arrays gefüllt werden ein

Code: Alles auswählen

trace(pics);


Mach dann Film testen
und sag mir ob was ausgegeben wird (Kleines Fenster müsste im Flash aufgehen)

[veNom]

Ich hab jetzt mit bisl Hilfe es geschafft einen Code zu schaffen welcher alle Bilder anzeigt, aber untereinander, ich 'zuck' bald aus, es ist echt so das ich den Code versuche zu verstehen, aber ich schau drauf und sehe "NICHTS". Für mich steckt null Sinn dahinter, keine Logik und alles irgendwas...

PS: Danke für den Code aber ich hab trotzdem keine Bilder gesehen, trace is doch nur die Ausgabe im Hintergrund oder?

Wie gesagt, ich bin zu dumm für diese Sprache, vielleicht einmal in Fernerzukunft.

Danke für deine Hilfe!!
Mal sehen ob ich weitermach, schaffe ja nichteinmal eine Schleife mit positionserweiterung in AS3

[Manuel]

Magst du das als Tutorial nicht auch einsenden dann Labrar? Dann wäre es auf jeden Fall vor den unendlichen Tiefen des Forums geschützt

(Motorrad fahren... *neid weil er seins vorletztes Jahr verkauft hat*)

[Labrar]

@ veNom
Sorry. Der Code war ungetestet. Müsste _root statt this sein.

Hier mal getestet und funktionierend mit der Funktion gleich das Bild neben die Leiste zu laden.

Ist kein Preloader dabei. Somit bitte ich um etwas Geduld bis alle geladen ist. Man sieht nicht daß sich was tut

Verwende einfach meine obige XML Struktur, speichere die als "bilder.xml" und pack folgenden Code

Code: Alles auswählen

bildcreation=function(pic){
   createEmptyMovieClip("bild",1);
               bild._x=th_cont._x+th_cont._width;
               bild._y=th_cont._y;
               bildw=Stage.width-th_cont._width-10;
               bild.loadMovie(pic);
               _root.onEnterFrame=function(){
                  if(bild.getBytesLoaded()==bild.getBytesTotal()&&bild._width>1){
                     delete _root.onEnterFrame;
                     scalpic=100/bild._width*bildw;
                     bild._xscale=scalpic;
                     bild._yscale=scalpic;
                     }
                  }
   }
pics = new Array();//Wie im Script oben
info = new Array();//Array für deine Infos
thmb = new Array();//Deine Thumbnails (wenn du die unbedingt brauchst)
gal = new XML();//Klassenaufruf XML Struktur
gal.ignoreWhite = true;//Leerzeichen ignorieren
gal.onLoad = function(success) {//Wenn XML erfolgreich geladen
   if (success) {
      anzahl = this.firstChild.childNodes.length;//Wieviele Sätze sind es
      for (i=0; i<anzahl; i++) {//Selbsterklärend
         this.datencontainer = this.firstChild.childNodes[i];//Eine Art Array wenn du so willst.Funktioniert aber eher wie ein Object
         //Arrays füttern
         pics[i] = this.datencontainer.attributes.image;
         info[i] = this.datencontainer.attributes.infos;
         thmb[i] = this.datencontainer.attributes.thumbnail;
      }
      createEmptyMovieClip("th_cont",0);
      for (u=0; u<pics.length; u++) {
         th_cont.createEmptyMovieClip("holder"+u,u);
         th_cont['holder'+u].loadMovie(pics[u]);
      }
      hoehe = 40;//Spätere Thumbnailhoehe
      weite=10;
      starter = 0;//In etwa bei einer forschleife i=0
      _root.onEnterFrame = function() {
         trace("Lade");
         if (th_cont['holder'+starter].getBytesTotal() == th_cont['holder'+starter].getBytesLoaded() && th_cont['holder'+starter]._height>1) {
            scaler = 100/th_cont['holder'+starter]._height*hoehe;
            th_cont['holder'+starter]._xscale = scaler;
            th_cont['holder'+starter]._yscale = scaler;
            if(th_cont['holder'+starter]._width>weite){weite=th_cont['holder'+starter]._width}
            starter++;

            if (starter == pics.length) {
               delete _root.onEnterFrame;
               trace("Durch");
               //Alle Thumbs nebeneinander annordnen:
               perreihe = 4;//Wieviele Thumbs je Reihe??
               reihen = Math.round(pics.length/perreihe)+1;
               anfang = 0;
               for (h=0; h<perreihe; h++) {
                  for (v=0; v<reihen; v++) {
                     th_cont['holder'+anfang]._x = h*weite;
                     th_cont['holder'+anfang]._y = v*hoehe;
                     anfang++;
                  }
               }
               bildcreation(pics[0]);
               for (a=0; a<pics.length; a++) {
                  mc = th_cont['holder'+a];
                  mc.id = a;
                  mc.onRelease = function() {
                     bildcreation(pics[this.id]);
                     
                  };
               }
            }

         }
      };
   }
};
gal.load("bilder.xml");//Welche XML soll geladen werden?


in eine neue Flashdatei ( !!!! AS2 nicht AS3 !!!!)

Der Code skaliert das Hauptbild automatisch auf die passende Größe zur Stage

PS:
Wenn du PHP proggst müsstest du aber auch Paralellen zu JavaScript und somit auch zu Actionscript ziehen könnten. Zumindest for Schleifen ,array auslesen und if Abfragen sind identisch. Und daraus besteht ja fast der ganze Code.
Lediglich das auslesen der XML und die onEnterFrameschleifen sind anderst.

@Manuel

Ja könnte ich machen und mach ich wahrscheinlich auch. Ich hatte ja auch das für das Ballerspiel gemacht welches aber leider einem Absturz zum Opfer viel und ich keine Sicherungskopie hatte. Diemal bin ich schlauer