Beispiel 9: Dynamische Bildergalerie Anschauen
Bisher waren unsere Bilderlisten ja statisch als Array in den Film eingefügt worden. Das ist allerdings sehr unpraktisch, wenn sich die Bilderliste ändert. Nach jeder Änderung müssten wir den Flashfilm neuveröffentlichen und auf den Server laden.
Abhilfe schafft hier ein Serverscript. Ein kleines PHP-File liest den Bilderfolder aus und sendet eine Komma-separierte Liste der Filenames an den Flashfilm. Wenn Bilder auf den Server geladen oder gelöscht werden, hat der Flashfilm beim nächsten Start die aktualisierten Daten dynamisch zur Verfügung.
Der Flashfilm holt sich die Daten am besten mit der LoadVars-Klasse, schaut euch bitte, falls ihr damit noch nicht sicher umgehen könnt, zuerst
mein Tutorial dazu an.
Achtung! Das PHP-Script funzt nicht auf der lokalen Festplatte, sondern tatsächlich nur in Verbindung mit einem Server und PHP als Middleware!
Schritt 1: Wir löschen in dem vorhandenen Schritt die statischen Arraywerte und löschen den Aufruf der startLoader-Funktion. Diese darf ja erst dann gestartet werden, wenn die dynamischen Daten auch tatsächlich als Response im Flashfilm angekommen sind. Dann setzen wir uns eine Instanz der LoadVars-Klasse:
PHP-Code:
lv = new LoadVars();//Instanz erstellen
lv.path = "pics-th/";//Foldernamen an das PHP-Script weiterleiten
lv.onLoad = geladen;//Callback setzen
lv.sendAndLoad("folder_auslesen.php",lv,"POST");//und den Request starten
Schritt 2: Das PHP-Script könnte folgendermaßen aussehen:
PHP-Code:
<?php
$path = stripslashes($_POST["path"]);//Pfadangabe des Ordners
$handle = opendir ($path);//Oeffnen des Ordners
//alle Einträge auslesen
while ($file = readdir ($handle)) {
if ($file != "." && $file != ".."){
$fileArray[] = $file;
}
}
closedir($handle);
asort($fileArray);//Liste sortieren
//Ausgabe für den Flashfilm vorbereitem
echo "liste=";
foreach($fileArray as $row) {
echo $row.',';
}
?>
Schritt 3: Wenn alles funktioniert hat, sendet der Server jetzt einen durch Kommas getrennten String an den Flashfilm. Den Response empfangen wir in der Funktion "geladen" und splitten ihn über einen String.split in ein Array. Dann können wir auch die Startfunktion aufrufen, denn jetzt haben wir ja die dynamischen Daten:
PHP-Code:
function geladen(erfolgreich) {
if(erfolgreich) {
trace("empfangene Variable: "+this.liste);
this.liste = this.liste.substring(0,this.liste.length-1);
//Liste der Bilder
_root.urls = this.liste.split(",");
//Anzahl der Bilder ermitteln über Länge des Arrays
_root.len = _root.urls.length;
//jetzt erst die Bilder laden:
_root.startLoader();
}
else {
trace("Fehler beim Laden");
}
}
Und auch hier wieder das gesamte Script:
PHP-Code:
//Stufe 9: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln
//mit Rahmen und Schatten
//Thumbnail-MC lässt sich scrollen
//Bilderliste wird dynamisch per LoadVars-Klasse über ein PHP-Script nachgeladen
import mx.transitions.*;
import flash.filters.DropShadowFilter;
//leeren MC erstellen
this.createEmptyMovieClip("con",1);
//und zwei weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);
//zuerst transparent setzen
this.con._alpha = 0;
//Zähler
var index:Number = 0;
function geladen(erfolgreich) {
if(erfolgreich) {
trace("empfangene Variable: "+this.liste);
this.liste = this.liste.substring(0,this.liste.length-1);
//Liste der Bilder
_root.urls = this.liste.split(",");
//_root.dtx.text += "\nListe="+_root.urls;//zum testweisen Ausgeben der Liste
//Anzahl der Bilder ermitteln über Länge des Arrays
_root.len = _root.urls.length;
//jetzt erst die Bilder laden:
_root.startLoader();
}
else {
trace("Fehler beim Laden");
}
}
lv = new LoadVars();//Instanz erstellen
lv.path = "pics-th/";//Foldernamen an das PHP-Script weiterleiten
lv.onLoad = geladen;//Callback setzen
lv.sendAndLoad("folder_auslesen.php",lv,"POST");//und den Request starten
//mit dem Dropshadowfilter einen Schlagschatten erzeugen
function shadows(obj){
var distance:Number = 0;
var angleInDegrees:Number = 90;
var color:Number = 0x000000;
var alpha:Number = .9;
var blurX:Number = 8;
var blurY:Number = 8;
var strength:Number = 1;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var hideObject:Boolean = false;
var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
var filterArray:Array = new Array();
filterArray.push(filter);
obj.filters = filterArray;
}
//ein Rechteck zeichnen für bspw. Bilderrahmen oder Masken
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
with (obj){
clear();
if(gef==1){
beginFill(hg, alph);
moveTo(x1, y1);
lineTo(x2, y1);
lineTo(x2, y2);
lineTo(x1, y2);
lineTo(x1, y1);
endFill();
}
else{
ls = (ls == undefined || ls == 0) ? 2 : ls;
lineStyle(ls,hg,100 );//ls = Linienstärke
moveTo(0,0);
lineTo(x2,0);
lineTo(x2,y2);
lineTo(0,y2);
lineTo(0,0);
}
}
}
function startLoader(){
//leeren MC für Thumbnail-Leiste erstellen
_root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
_root.thumbs._x = 50;
_root.thumbs._y = Stage.height - 150;
//Masken-MC erstellen
_root.createEmptyMovieClip("maske",_root.getNextHighestDepth());
_root.maske._x = _root.thumbs._x+50;
_root.maske._y = _root.thumbs._y;
_root.rechteck(maske,"0xFFFFFF",0,510,0,150,1,0,100);
//Maske setzen
_root.thumbs.setMask(maske);
//2 MCs mit Schaltflächen zur Steuerung erstellen
_root.createEmptyMovieClip("zurueck_mc",_root.getNextHighestDepth());
_root.createEmptyMovieClip("weiter_mc",_root.getNextHighestDepth());
//positionieren
zurueck_mc._y = weiter_mc._y = Stage.height - 100;
weiter_mc._x = Stage.width - 25;
//zwei fertige Grafiken attachen
zurueck_mc.attachMovie("zurueck_mc","zurueck_mc",1);
weiter_mc.attachMovie("weiter_mc","weiter_mc",1);
//und aus den Mcs Schaltflächen machen
zurueck_mc.onRelease = function(){
trace("Klick auf zurück");
_root.thumbs._x -= 250;
}
weiter_mc.onRelease = function(){
trace("Klick auf weiter");
_root.thumbs._x += 250;
}
//Liste der MCs im MC "thumbs" erstellen
_root.mcs = new Array();
//leere MCs erzeugen
for(var i=0;i<_root.len;i++){
_root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
_root.thumbs["con"+i]._x = (i*250 +80);//nebeneinander positionieren
_root.thumbs["con"+i].ID = i;//Zähler merken
}
//Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
_root.mclListener = new Object();
_root.mcLoader = new MovieClipLoader();
_root.mcLoader.addListener(_root.mclListener);
//Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
_root.mclListener2 = new Object();
_root.mcLoader2 = new MovieClipLoader();
_root.mcLoader2.addListener(_root.mclListener2);
//das erste große Bild laden
_root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con.image_mc);
//großes Bild ist geladen und MC wurde befüllt:
_root.mclListener2.onLoadInit = function(mc:MovieClip) {
_root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
_root.con.image_mc._x = 10;
_root.con.image_mc._y = 10;
//MC auf die Bühnen-Mitte setzen:
_root.con._x = int((Stage.width - _root.con._width)/2);
_root.con._y = int((Stage.height - _root.con._height)/2)-40;
_root.shadows(_root.con);
_root.fader(_root.con,true);
}
//und den ersten Thumb laden
_root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
//Thumb ist geladen und MC wurde befüllt:
_root.mclListener.onLoadInit = function(mc:MovieClip) {
//trace("fertig, beladen wurde "+mc);
mc.ID = _root.index;//index als MC-Variable merken
_root.index++;
if (_root.index < _root.len) {//sind noch weitere zu laden?
_root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
}
mc.onRelease = function(){
trace("this="+this);
trace("this.ID="+this.ID);
_root.index = this.ID;
//aktuelles Bild ausblenden
_root.fader(_root.con,false);
}
}
}
function fader(mc,blende){
//mc ist das ein- oder auszublendende Objekt
//blende ist true oder false, d.h. blendet ein oder aus
//während des Fadens die Schaltflächen sperren
_root.thumbs.enabled = false;
if(blende){
//einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
tw1.onMotionFinished = function() {//wenn ausblenden beendet...
_root.thumbs.enabled = true;
}
}
else{//ausblenden
var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
tw2.onMotionFinished = function() {//wenn ausblenden beendet...
_root.folgefilm();//nächsten Film laden und einblenden
}
}
}
function folgefilm(){
_root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con.image_mc);
//_root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
}
this.stop();