Webdesign in Siegen

Tutorial AS/ PHP Gallerie

Fragen zum Thema Flash können hier gestellt werden

Tutorial AS/ PHP Gallerie

Beitragvon Labrar am 19.04.2007, 10:22

Keine Ahnung wo sowas hier reinkommt. Mögens die Mods verschieben :lol:

So. Da es hier sehr wenige Flashtutorials gibt, habe ich mich beschlossen hier jetzt von Zeit zu Teit eines reinzustellen.

Das folgende habe ich schon in anderen Foren gepostet und daraufhin auch Fragen bekommen, die ich jetzt hier gleich mal von vornherein beantworten möchte.

Die Gallerie ist zu 100% gecodet. D.h. es befinden sich keine Movieclips, Bilder usw in der Bibliothek.
Alles spielt sich im ersten und einzigen Frame ab. Visuelle Dinge wie Pfeile und Preloader werden vom Code generiert.

Die Gallerie funktioniert, ist aber vom Design her eher schlicht bis naja und sollte somit nicht 1 zu 1 verwendet werden.
War auch nie das Ziel dieses Tuts. Vielmehr wollte ich AS2 näherbringen und hoffe ihr lernt was daraus.

Ich habe die Gallerie nirgends zum anschauen oben, da ich denke daß sich jeder via Copy und Paste dieses Teil in 2 Minuten zusammengebaut hat.

So und nun viel Spaß und lernt auch was dabei 8)


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.


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.



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


//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>1) {
a--;
galstart();
}
};
};
//Bilderanzeige
this.createEmptyMovieClip("anzeige", 500);
bilderanzeige = function () {


for (j=0; j<thmbscount>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>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>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");



PS:

Keine Ahnung wie die Codedarstellung hier im Forum funzt.
Also. PHP Code natürlich in PHP Tag setzten
Labrar
Mitglied
 
Beiträge: 389
Registriert: 11.04.2007
Wohnort: Ludwigsburg

Zurück zu Flash

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast