Load Multiple External Images (dynamically)

[peat-ar]

Hallo Community

Meine Absicht: Aus einem Ordner "img" mit PHP-Skript Anzahl der Bilder (alle nach dem Schema: 0.jpg, 1.jpg, ... benannt) herausfinden (geschafft), diese dann an die SWF-Datei schicken (geschafft) und dann pro Bild in einem Array "listeBilder" ein Element String(i) + ".jpg" erstellen (Code dafür ist da, funktioniert aber aus mir unersichtlichen Gründen nicht) und damit abschließend die Bilder in einen Array "listeMC" laden (da kenn ich mich dann überhaupt nicht mehr aus, Code zwar da, aber da wird gar nichts reingeladen, geschweige denn irgendwie angezeigt)

Der Code ist eigentlich schon zu 90% fertiggestellt (die Bilderanzeige habe ich noch nicht programmiert, da es mir noch nicht einmal möglich war ein einziges Bild nach oben genannter Prozedur in den Array zu laden), und ist in einer externen AS-Datei, nur den Array in dem die Bilder gespeichert werden sollten ("listeMC") ist in der FLA-Datei, da ich ja auf ihn zugreifen will (ergibt auch keinen Fehler, wenn ich den Array aber in der AS-Datei definiere und mit der FLA darauf zugreifen will kommt mir immer eine Fehlermeldung (obwohl ich vor so ziemlich alles ein "public" gestellt habe))

PHP-Code:

package {
    
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.net.*;
    import flash.display.Loader;
    
    public class Main extends MovieClip {
        
        public function Main()  {
            
            // Prepare request                                             #/////////////////////////////////////////
            var request:URLRequest = new URLRequest("countImages.php");    //                                        //
            request.method = URLRequestMethod.GET;                        //                                        //
                                                                        //    PHP Variablen auslesen                //
            var loader:URLLoader = new URLLoader();                        //                                        //
            loader.dataFormat = URLLoaderDataFormat.VARIABLES;            //                                        //
            loader.addEventListener(Event.COMPLETE, completeHandler);    //                                        //
            loader.load(request);                                        /////////////////////////////////////////#
            
            var anzahlBilder:int;                                        //wurde gerade aus PHP-File ausgelesen
            
            function completeHandler(evt:Event) {
                
                anzahlBilder = evt.target.data.bilder;                            //funktioniert
                
                trace ("Im \"img\" Ordner befinden sich " + anzahlBilder + " Bilder.");
                
                var listeBilder:Array = new Array();                            //Hier werden Bildernamen (0.jpg, 1.jpg, ... ) hereingeladen
                
                for (var i:int=0; i < anzahlBilder; i++) {
                    listeBilder[i] = String(i) + ".jpg";                        //Elemente werden der Liste hinzugefügt
                    ausgabe.appendText(listeBilder[i]);
                    
                    var request:URLRequest = new URLRequest(listeBilder[i]);
                    var loader:Loader = new Loader;
                        loader.load(request);
                    
                        listeMC[i].addChild(loader);
                }
            }
        }
    }
} 


Ich hab hier einfach mal die ganze AS-Datei gepostet, da ich mich damit ehrlichgesagt nicht wirklich auskenne und auch keine Idee habe wo der Fehler ist.

Da mir in dem Forum immer freundlich und schnell geholfen wurde, hoffe ich auch dieses mal wieder auf eure Hilfe!

[ING]

der listener wird nicht dem loader selbst sondern dessen contentLoaderInfo objekt zugewiesen...

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); 

[peat-ar]

Wenn ich das mache kommt aber eine Fehlermeldung..."Zugriff auf eine möglicherweise nicht definierte Eigenschaft contentLoaderInfo über einen Verweis mit statischem Typ flash.net:URLLoader"

Der Teil klappt ja aber eh (ist ja dafür da PHP-Variable entgegenzunehmen und das funktioniert noch)

[ING]

ach so ja, is ja ein URLloader, hab nur das import loader oben gesehen und es fürn loader gehalten, vergiß was ich schrieb, oder doch nicht, brauchst du ja später noch

was genau funktioniert denn nicht? ansonsten würde es helfen ne txt zur verfügung zustellen damit man es selbst testen kann.

[peat-ar]

naja, das mit dem testen ist auch bei mir irgendwie ein problem, da ich beim debuggen keinen zugriff auf das PHP-File habe --> deshalb auch nur schwer feststellen kann was genau nicht funktioniert, denn es kommt ja keine fehlermeldung, aber es passiert halt einfach nicht was passieren sollte. Also hab ich mir sozusagen ein eigenes ausgabefeld (fürs "im-browser-/-auf-dem-server-testen") gemacht (txt-feld namens "ausgabe") aber wenn ich da hinschreibe er solle mit .appendText(listeBilder[i]) alle namen der bilder anzeigen kommt nicht grad das erwartete ergebnis (erwartet: 0.jpg1.jpg....is mir auch egal obs in einer zeile ist, aber der zeigt immer nur 0.jpg an. egal wie viele bilder drin sind -.-)

Also ich kann daraus nur schlussfolgern dass ab der schleife

PHP-Code:

for (var i:int=0; i < anzahlBilder; i++) { 


irgendetwas schief läuft. das mit der php variable auslesen klappt, dh man könnte zum debugging auch einfach statt anzahlBilder eine zahl seiner wahl nehmen (wenn er dann den fehler ausgeben würde, dass er diese bilder nicht finden würde wäre ich schon überglücklich )

EDIT: Noch eine frage nebenbei: debuggen mit Strg + Shift + Enter geht irgendwie nur mit der FLA-Datei, auf die AS-Datei hab ich irgendwie keinen zugriff, oder? Das stellt auch ein kleines Problem dar, da ich 99% des Codes in der AS-Datei habe

EDIT: Wenn ich

PHP-Code:

                   var request:URLRequest = new URLRequest(listeBilder[i]); 
                    var loader:Loader = new Loader; 
                        loader.load(request); 
                     
                        listeMC[i].addChild(loader); 


"wegkommentiere", dann funktionierts soweit, nur werden jez keine bilder geladen, ich schätze innerhalb dieser zeilen ist irgendein fehler wegen dem die schleife unterbrochen wird (deshalb vorher immer nur das erste element ausgegeben), könnte da mal bitte jemand nach dem fehler suchen? ^^ ich hab überhaupt keine ahnung von diesem ganzen loader-zeugs, usw

[peat-ar]

Ok, ich komm mir jetzt grad vor wie ein Trottel, aber nachdem ich mich durch jede Zeile einzeln "durchkommentiert" habe, bin ich auf den Fehler gekommen. Ich kann das aktuelle Element dem Array "listeMC" nur per "Event.COMPLPETE" Funktion übergeben. Außerdem musste ich die Elemente von "listeBilder" 'img' + String(i) + '.jpg' benennen...

Jetzt habe ich aber das peinliche Problem, dass ich nicht weiß wie ich die Bilder anzeigen soll/kann...

Also dachte ich es würde vielleicht gehen, wenn ich es wie in diesem Tutorial machen würde (hab also flash.display.Bitmap ge-"imported" und meine Funktion (die bei Event.COMPLETE aufgerufen wird) sieht jetzt folgendermaßen aus:

PHP-Code:

var image:Bitmap = new Bitmap(evt.target.content.bitmapData);
listeMC[i].addChild(image);
ausgabe.appendText(String(listeMC.length)); 


Wenn ich jetzt aber mit letzter Zeile überprüfen will wie viele / OB Bilder in diesen Array geladen wurden, dann kommt bei dem "ausgabe"-Textfeld einfach genau dasselbe, als ob die diese letzte Zeile / ganze Funktion gar nicht geschrieben hätte!! (Habs auch ohne dem ganzen Bitmap-Zeugs versucht (mit der "loader"-Variable, aber das klappt einfach nicht)

Hat jemand eine Ahnung wie ich diese Bilder auf die Bühne bringe? Mir ist es völlig egal wie, möchte sie nur per ActionScript ansprechen können (deshalb halt der Array)!

PLS HELP!!!

[peat-ar]

Das Projekt ist wie eine Hydra, kaum ist man ein Problem los, tun sich 2 neue auf -.-

Der Code sieht folgendermaßen aus:

PHP-Code:

            function completeHandler(evt:Event) {
                
                anzahlBilder = evt.target.data.bilder;
                
                var listeBilder:Array = new Array();                            //Hier werden Bildernamen (0.jpg, 1.jpg, ... ) hereingeladen
                
                for (var i:int=0; i < anzahlBilder; i++) {
                    listeBilder[i] = "img/" + String(i) + ".jpg\n";                //Elemente werden der Liste hinzugefügt
                    ausgabe.appendText(listeBilder[i]);
                    
                    var request:URLRequest = new URLRequest(listeBilder[i]);
                    var loader:Loader = new Loader;
                        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, addToArray);
                        loader.load(request);

                        function addToArray(evt:Event) {
                            var image:Bitmap = new Bitmap(evt.target.content.bitmapData);
                            var container:MovieClip = new MovieClip();
                            container.addChild(image);
                            container.width = 300;
                            container.height = 300;
                            listeMC[i] = container;
                            //listeMC[i].x = i*10;
                            //listeMC[1].visible = false;
                            addChild(listeMC[i]);
                        }
                }
        } 


Als ich etwas mit dem hier wegkommentierten .visible gespielt habe, ist mir aufgefallen, dass immer nur das erste Bild (0.jpg) angezeigt wird. Hat jemand eine Ahnung warum?! Ich versteh das einfach nicht mehr...

Das 2te Problem ist dass ich die MCs nun, da ich sie ja per addChild() ge"addet" habe nicht mehr ansprechen kann, hat dafür jemand einen Lösungsvorschlag?

BITTE UM HILFE, IST WIRKLICH DRINGEND

[ING]

also der code ist schon sehr sehr böse, du hast eine funktion in der ein schleife sitzt in der wiederum anzahlBilder mal die funktion addToArray definiert wird. das kann nur schiefgehen

grundsätzlich bevorzuge ich die methode ein bild nach dem anderen zu laden weil es sonst sehr schwer wird sich den kram wieder zurecht zu sortieren.

aufbau würde grob so aussehen...

bilderPfade = ["0.jpg", ...]
bilderObjekte = []
bilderGeladen = 0
 
konstruktor {
   ladeBild()
}
 
ladeBild {
   tempLoader = new loader
   tempLoader.load --> bilderPfade[bilderGeladen]
   tempLoader.callback --> bildFertig
   bilderObjekte.push(tempLoader)
}
 
bildFertig {
   bilderGeladen++
   if bilderGeladen < bilder.length : ladeBild()
   else alleFertig()
}
 
alleFertig {
   // alle bilder anzeigen
   for each (bild in bilderObjekte) addChild(bild)
} 

am besten als extra klasse erstellen und von dem php loading trennen. bilderPfade kannst du dann ja auch als parameter dem konstruktor übergeben.

[peat-ar]

Mir geht das auch wahnsinnig auf die Nerven, aber da ich mich mit externen as Dateien nicht so gut auskenne und mir immer wieder irgendeine Zugriffsverweigerung (Typ: static oder was weiß ich) aus mir unerklärlichen Gründen angezeigt wurde hab ichs mal einfach so "verschachtelt" gemacht. Hinzu kommt dass ich der Code einfach so gewachsen ist (dachte am Anfang nicht dass es überhaupt so viel wird :S )

Danke vielmals für den Aufbau (wollte das dann nachher eh umskripten, dass ein Bild nach dem anderen geladen wird), sieht ziemlich "funktionierend" aus. ^^
Eine Frage habe ich dazu jedoch: kann ich die einzelnen Bilder denn auch noch per AS ansprechen, wenn ja wie? (Ziel ist dann so eine Art Slide-Show, die einfach alle Bilder aus einem bestimmten Ordner in einer Endlosschleife "iterativ" abspielt ^^)

Und noch eine letzte Frage: Was ist das mit dem Konstruktor / was sollte ich da genau einsetzen? :schäm:

Aber auf jeden Fall noch mal ein großes Dankeschön

[Master Wu]

Zitat von peat-ar

BITTE UM HILFE, IST WIRKLICH DRINGEND

Sowas find ich einfach nur unverschämt ...

[ING]

Zitat von peat-ar

Eine Frage habe ich dazu jedoch: kann ich die einzelnen Bilder denn auch noch per AS ansprechen, wenn ja wie?

in meinem beispiel von oben stehen alle bildhandles in dem array bilderObjekte.

Zitat von peat-ar

Und noch eine letzte Frage: Was ist das mit dem Konstruktor / was sollte ich da genau einsetzen? :schäm:

naja, das was du halt an infos brauchst, in deinem fall wäre es das array das du aus den php daten erstellt hast und die bildpfade enthält. wenn du die klasse zb. ExtImageLibrary nennst würde der konstruktor zb. so aussehen...

public function ExtImageLibrary(_bilderPfade:Array) {
   bilderPfade = _bilderPfade; // array übernehmen
   ladeBild(); // ladevorgang beginnen
} 

das beispiel von oben ist aber nur pseudo code der den aufbau demonstrieren soll, wirklich schreiben musst du es schon noch selbst, egal wie eilig es du hast.

Zitat von Master Wu

Sowas find ich einfach nur unverschämt ...

solange er "bitte" sagt aber stimmt schon, das so fett zu schreiben ist nicht die feine art und führt in der regel zum gegenteiligen effekt aber weil ich nun schon dabei war wollt ich ihn nich hängen lassen...

[peat-ar]

Weiß schon dass das nicht die feine Art ist, aber das ist ein Projekt für meinen Ferialjob und langsam sollte ich etwas vorweisen können. Wenn ihr jetzt sagt, dass ich mir dann nicht so was (für mich vllt zu) schweres aussuchen soll, dann habt ihr wahrscheinlich Recht, aber das wurde halt grad auf der HP von denen gebraucht und ich dachte ich könnte mir halt das nötige Wissen dazu noch aneignen, aber jetzt war ich ganz verzweifelt weil es keinen Fehler angezeigt hat und trotzdem nicht so funktioniert hat, wie es hätte sollen
Aber danke fürs trotzdem erklären und habt doch bitte Verständnis

[peat-ar]

Ich bin und bleibe wohl irgendwie ein Problemkind...

Hab jetzt ein neues Projekt erstellt, mit 2 AS-Dateien (PHPLoading und ExtImageLibrary, im Anhang ist das Projekt, halt ohne .fla, weil ich da nur die Klassen ge"imported" habe)

PHPLoading holt sich wie der Name sagt die Variablen (atm noch die Variable) des PHP Skriptes, da hab ich einfach den Code bis zur for-Schleife übernommen, da der eigentlich eh funktioniert hat (die for-Schleife erstellt jetzt nur noch die einzelnen Elemente für den Array der die Dateinamen speichert).

ExtImageLibrary habe ich nach ING's Vorschlag gemacht, nur dass ich dem Konstruktor keine Parameter mitgebe, sondern einfach die ladeBild() Funktion initiiere (Jetzt zeigt es mir aber einen Fehler an wenn ich auf die in PHPLoading als public definierten Variablen "bilderPfade" und "anzahlBilder") und außerdem habe ich die Zeile

PHP-Code:

bilderObjekte.push(tempLoader) 


in die Funktion bildFertig() verschoben (weil Sachen ja erst gepushed werden lönnen, wenn sie geladen sind, oder?). Weiterhin habe ich die Funktion bildFertig() etwas erweitert, da ich nicht wusste, welchen Typ der "Platzhalter" namens "bild" in der "for each in"-Schleife annehmen sollte.

Übrigens kennt er auf einmal die Eigenschaften "evt" bei "evt.target.content.bitmapData" und "addChild()" in der "for each in"-Schleife nicht mehr, ich habe aber doch so ziemlich alles ge"imported"

Letztere AS-Datei sieht jetzt folgendermaßen aus (es sind beide Klassen + PHP Skript + Ordner mit 2 Testbildern in der slideShowAlpha.zip, zum Testen bräuchte man natürlich nen PHP-fähigen Server)

PHP-Code:

package  {
    
    public class ExtImageLibrary {
        
        import flash.events.*;
        import flash.display.*;
        import flash.net.*;
        import flash.utils.*;
        
        // Public Properties:
        public var bilderObjekte:Array = new Array();
        // Private Properties:
        var bilderGeladen:uint = 0;
    
        // Initialization:
        public function ExtImageLibrary() {
            ladeBild();
        }
    
        function ladeBild() {
            var tempLoader:Loader = new Loader();
            tempLoader.load(new URLRequest(bilderPfade[bilderGeladen]));
            tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bildFertig);
        }
        
        function bildFertig() {
            var tempBild:Bitmap = new Bitmap(evt.target.content.bitmapData);
            var tempHalter:MovieClip = new MovieClip();
            tempHalter.addChild(tempBild);
            
            bilderObjekte.push(tempHalter);
            
            if (bilderGeladen < anzahlBilder) {
                ladeBild();
            }
            
            else {
                alleFertig();
            }
            
            bilderGeladen++;
            
        }
        
        function alleFertig() {
            for each (var bild:MovieClip in bilderObjekte) {
                addChild(bild);
            }
        }
        
    }
    
} 


Und nochmal, tschuldige für vorher war nicht so gemeint

[ING]

also das sieht doch schon mal garnicht so schlecht aus, bis auf ein paar kleinigkeiten eigentlich sollten dir etliche fehler geworfen werden, falls nicht wird die klasse garnicht erst initalisiert.

gröbstes problem ist, wie du schon ahntest, das array bilderPfade, dieses existiert garnicht in der klasse, somit kann garnichts geladen werden weil die klasse keine bilderpfade hat die es laden kann.

den ganzen kram mit den movieclips brauchst du eigentlich auch nicht denn du kannst auch direkt das loader objekt mit addChild hinzufügen, so verhaspelst du dich sonst nur sehr schnell udn erstellst unnötig viele überflüssige objekte (was sollte das mit dem bitmap?), solange du nur bilder anzeigen willst hat das keinerlei nachteile. das pushen kannst du auch direkt im ladeBild() machen, denn das loader objekt existiert ja bereits auch wenn es noch leer ist, das musst du sogar weil du sonst nicht mehr an das loader objekt rankommst weil es ja eine temporäre variable in ladeBild() ist (daher der variablen name tempLoader ).

weitere fehler:

• die import anweisungen kommen ins package, nicht in die klasse
• die typisierungen der funktionen fehlen
• die klasse sollte sprite extenden, sonst kannst du nichts anzeigen lassen
• funktionen die von einem listener aufgerufen werden erwarten immer einen parameter

also nochmal von anfang an, du lädst die bilderpfade und legst sie in einem array ab, achte dabei darauf das es nur der bildpfad ist, also nicht wie oben mit einem \n oder ähnlichem!

sind die pfade geladen und in einem array abgelegt erstellst du ein ExtImageLibrary objekt und übergibst ihm das array, hier nochmal die überarbeitete klasse:

package  {
 
    import flash.events.Event;
    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.net.URLRequest;
          
    public class ExtImageLibrary extends Sprite {
 
        public  var bilderObjekte:Array = new Array();
        public  var bilderPfade:Array; 
        public  var bilderAnzahl:uint; 
        private var bilderGeladen:uint = 0;
 
        public function ExtImageLibrary(_bilderPfade:Array) {
            bilderPfade  = _bilderPfade;
            bilderAnzahl = bilderPfade.length;
            if (bilderAnzahl) ladeBild();
        }
 
        private function ladeBild() : void {
            var tempLoader:Loader = new Loader();
            tempLoader.load(new URLRequest(bilderPfade[bilderGeladen]));
            tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bildFertig);
            
            bilderObjekte.push(tempLoader);
        }
        
        private function bildFertig(e:Event) : void {
            bilderGeladen++;
            
            if (bilderGeladen < bilderAnzahl) {
                ladeBild();
            } else {
                alleFertig();
            } 
        }
        
        private function alleFertig() : void {
            var pos:int = 0;
            for each (var bild:Loader in bilderObjekte) {
                addChild(bild);
                
                bild.x = pos;
                pos += bild.width + 5;
            }
        }
    }
} 

diese klasse ist getestet und funktioniert, hab die funktion alleFertig etwas angepasst damit die bilder nebenenander angezeigt werden, diese funktion kannst du natürlich nach belieben bearbeiten, sie stellt quasi dein "finishing" dar. musst gucken ob du das anordnen der bilder direkt hier durchführst oder später von außen. kannst natürlich auch eine weiter funktion wie bilderPlatzieren() erstellen die du dann später ausführst und ihr die entsprechenden parameter übergibst die du zum anordnen brauchst, wie zb. anzahl der bilder pro spalte usw.

das erstellen eines ExtImageLibrary objekts würde dann zb. so aussehen:

// array mti den bilderpfaden
var meineBilder:Array = ["bild001.jpg", "bild002.jpg", "bild003.jpg", "bild004.jpg"];
 
// library erstellen und der anzeigeliste hinzufügen
var bilderLibrary:ExtImageLibrary = new ExtImageLibrary(meineBilder); 
addChild(bilderLibrary); 

alle bilder sind nun in dem ExtImageLibrary objekt enthalten (wie eine sammlung) und du kannst ggf. auch von außen weiter auf jedes einzelne bild über die bilderObjekte eigenschaft zugreifen.

[peat-ar]

Das mit den nicht existierenden Variablen habe ich mittlerweile so gelöst dass ich sie von der PHPLoading Klasse per Funktion mit return an die .fla übergebe und die dann eine Funktion getVars in der anderen .as Datei mit Parametern füttert. Die ExtImageLibrary-Funktion bleib jetzt einfach leer, das übernimmt die getVars-Funktion

PHP-Code:

public function getVars(_anzahlBilder:uint) {
[for-Schleife die aus anzahlBilder den Array mit Dateinamen erstellt];
anzahlBilder /*schon innerhalb der Klasse definiert*/ = _anzahlBilder
ladeBild
} 


Der "ganze Kram" hat sich so angesammelt, weil ich einfach alles was ich so im Internet gefunden habe ausprobiert habe, dann wurde irgendwann einmal ein Bild angezeigt und seitdem habe ich dieses ganze MC und Bitmap Zeugs immer mitgenommen ^^

import Anweisungen hab ich verschoben, scheint Flash aber keine Probleme gemacht zu haben (bin aber immer dankbar für Verbesserungsvorschläge an meinem Programmierstil, soweit man das denn so nennen darf )

Wenn du mit Typisierung das in den Klammern meinst (evt:Event), das habe ich schon ausgebessert (nach stundenlanger Suche :S)

Wie übergibst du der ExtImageLibrary Funktion eigentlich Parameter (das ist doch so eine Art von Funktion die automatisch gestartet wird oder? Ich hoffe das geht mit meiner oben genannter Lösung auch in Ordnung)?

Ich traus mich nach einer so perfekten & ausführlichen Erklärung des Sachverhalts (der bei dir auch noch funktioniert) schon gar nicht mehr sagen, aber jetzt steht da bei der Ausgabe: TypeError: Error #2007: Parameter dard nicht 'null'sein. (und halt noch wo er aller 'null' ist). Dachte mir ist doch eh ganz logisch, keinen Zugriff auf PHP-Resultat -> "anzahlBilder" bleibt 'null', allerdings zeigt es im Browser (am Server) einfach ein weißes Feld. Da kommt nichts :S

Wegen dem ExtImageLibrary objekt: das muss ich erstellen wenn ich die Bilder im Nachhinein ansprechen will? (Idee der simplen Animation ist dass einfach alle Bilder übereinander geworfen werden und dann immer das oberste per AlphaFade langsam ausgeblendet wird, wenn ich beim untersten Bild angekommen bin, dann werden einfach wieder alle AlphaWerte auf 1 gesetzt, das ist jetzt natürlich nicht als indirekte Auffordung zum Programmieren zu verstehen, möchte nicht gaanz so unverschämt sein , wenn ich alle Bilder übereinander habe und sie ansprechen kann, dann freu ich mich wie 'n Frosch )

Da die slideShowAlpha.zip 0,4Kb zu groß ist halt nur mit einem Bild -.-

PS.: Wenn ich PayPal oder ne Kreditkarte hätte würde ich dir was spenden, aber in Österreich kriegt man das ganze Zeug erst ab 18