Passend zum Thema gehts drum diese Galerie http://ush-media.de/gal.html mit PHP und Actionscript zu proggen.
Für euch zum lernen habe ich die Gal komplett in AS programmiert. D.h. es wurden keine Grafiken oder ähnliches verwendet. Alle agierenden Movieclips wurden via AS erstellt. Auch der Preloader.
Wer vorab schonmal in den Code spicken will der schau mal da:
PHP: (Datei heißt galout.php)
- Code: Alles auswählen
<?php
$type=array("jpg","JPG","PNG","png","gif","bmp");
$ordnerCheck=opendir("gallery");
while($dirs=readdir($ordnerCheck)){
if($dirs!="." && $dirs!=".."){
$dir_array[].=$dirs;
}
}
if(isset($_POST['chosen'])){$dir=$_POST['chosen'];}else{$dir=$dir_array[0];}
$piccheck=opendir("gallery/".$dir);
while($pic=readdir($piccheck)){
if($pic!="." && $pic!=".."){
$typefinder=explode(".",$pic);
for($i=0;$i<count($type);$i++){
if($typefinder[1]==$type[$i]){
$pictures[].="gallery/".$dir."/".$pic;
}
}
}
}
echo "&dirs=".implode("|",$dir_array);
echo "&pics=".implode("|",$pictures);
?>
und das AS ins erste Schlüsselbild (Ich habe die Filmgröße 800 auf 600 gewählt. Schwarzer Hintergrund);
- Code: Alles auswählen
//Parameter zum Einstellen
rows = 3;//Wieviele Reihen
weite = 120;//Thumbnailbreite
abstand = 2;//Abstand zwischen den Thumbs
vAbstand=10;//Abstand von oben
loaderboxes = 10;//Anzahl der Preloaderblinkboxen
loaderboxes_abstand = 2;//Abstand zwischen den Preloaderblinkboxen
loaderboxhoehe = 20;//Höhe der Preloaderblinkboxen
loaderboxweite = 10;//Breite der Preloaderblinkboxen
rahmenbreite=10;//Breite des Rahmens um das Hauptbild
pfad="";//Wenn du es offline testen willst dann pfad="http://deineseite.de/";
php="galout.php";
//Aus obigem resultierende Dimensionen
thm_weite = (weite+abstand)*rows;
mainpicweite = Stage.width-thm_weite-vAbstand;
picx=thm_weite;
startBild=0;
createEmptyMovieClip("framer",8);
createEmptyMovieClip("thframer",16);
//Preloader Kaestchenfadeoutprototyp
MovieClip.prototype.blink = function(fadestart,mc) {
this._alpha = fadestart;
this.up = true;
this.onEnterFrame = function() {
if (this.up) {
this._alpha += 10;
if (this._alpha>=100) {
this.up = false;
}
} else {
this._alpha -= 10;
}
if (this._alpha<=0) {
delete this.onEnterFrame;
if(this==2){removeMovieClip(this);
}
this.up = true;
}
};
};
//Preloader erstellen (Reservierte Ebene = 1006)
build_loader = function () {
createEmptyMovieClip("loader",1006);
for (i=0; i<loaderboxes; i++) {
loader.createEmptyMovieClip("box"+i,i);
loader['box'+i].beginFill(0xFFFFFF,100);
loader['box'+i].moveTo(0,0);
loader['box'+i].lineTo(0,0);
loader['box'+i].lineTo(0+loaderboxweite,0);
loader['box'+i].lineTo(0+loaderboxweite,0+loaderboxhoehe);
loader['box'+i].lineTo(0,0+loaderboxhoehe);
loader['box'+i]._x = loader['box'+(i-1)]._x+loader['box'+(i-1)]._width+loaderboxes_abstand;
loader['box'+i]._alpha=0;
}
loader._x = 70;//(Stage.width/2)-(loader._width/2);
loader._y = (Stage.height/2)-(loader._height/2);
createTextField("txt",1007,0,0,0,0);
textform=new TextFormat();
txt.autoSize=true;
with(textform){
font="arial";
bold=true;
color="0xFFFFFF";
size=14;
bold=true;
}
txt._x=loader._x+((loader._width/2)-(txt._width/2));
txt._y=loader._y+loader._height;
txt.setTextFormat(textform);
prestarter=0;
movieclip=0;
loader.onEnterFrame=function(){
loader['box'+movieclip].blink(1,1);
prestarter++;
if(prestarter>=loaderboxes){
prestarter=0;
movieclip++;
}
if(movieclip==loaderboxes){movieclip=0;}
}
};
//Daten laden
loadData=function(category){
loDat=new LoadVars();
loDat.onLoad=function(loaded){
if(loaded){
dirs=this.dirs.split("|");
build_links();
pics=this.pics.split("|");
create_thumbs(pics);
firstpic=pics[0];
loadMainPic(firstpic);
}
}
if(category!=""){
loDat.chosen=category;
}
loDat.sendAndLoad(pfad+php,loDat,"POST");
}
//Hauptbild laden
loadMainPic=function(bild){
if(startBild==0){
createEmptyMovieClip("Pic0",1004);
mainpic=Pic0;
}else{
createEmptyMovieClip("Pic1",1005);
mainpic=Pic1;
}
mainpic.createEmptyMovieClip("pertou",0);
mainpic.createEmptyMovieClip("picture",1);
pertou=mainpic.pertou;
picture=mainpic.picture;
picture.loadMovie(pfad+bild);
mainpic._alpha=0;
mainpic.onEnterFrame=function(){
prz=Math.round(100/picture.getBytesTotal()*picture.getBytesLoaded());
if(prz==100 && picture._width>1){
delete mainpic.onEnterFrame;
if(startBild==0){
Pic1.blink(100,2);
startBild=1;
}else{
Pic0.blink(100,2);
startBild=0;
}
scale=100/picture._width*(mainpicweite-(rahmenbreite*2));
picture._xscale=scale;
picture._yscale=scale;
picture._x=picx+rahmenbreite;
picture._y=vAbstand+rahmenbreite;
pertou.beginFill(0xFFFFFF,100);
pertou.moveTo(picx,vAbstand);
pertou.lineTo(picx,vAbstand);
pertou.lineTo(picx+mainpicweite,vAbstand);
pertou.lineTo(picx+mainpicweite,vAbstand+picture._height+(rahmenbreite*2));
pertou.lineTo(picx,vAbstand+picture._height+(rahmenbreite*2));
framer.onEnterFrame=function(){
mainpic._alpha+=10;
if(mainpic._alpha>=100){
delete framer.onEnterFrame;
}
}
}
}
}
//Kategorieauswahl erstellen
build_links=function(){
createEmptyMovieClip("links",9);
linkForm=new TextFormat();
with(linkForm){
font="Arial";
align="center";
color="0xFFFFFF";
bold=true;
size=10;
}
for(a=0;a<dirs.length;a++){
links.createEmptyMovieClip("link"+a,a);
links['link'+a].lineStyle(3,0xFFFFFF,100);
links['link'+a].beginFill(0xFF0000,100);
links['link'+a].moveTo(0,0);
links['link'+a].lineTo(0,0);
links['link'+a].lineTo(20,0);
links['link'+a].lineTo(20,120);
links['link'+a].lineTo(0,+90);
links['link'+a].endFill();
links['link'+a].createTextField("txt",a,2.5,0,20,100);
thisText=dirs[a].split("");
for(u=0;u<thisText.length;u++){
links['link'+a].txt.text+=thisText[u]+"\n";
}
links['link'+a].txt.setTextFormat(linkForm);
links['link'+a]._x=links['link'+(a-1)]._x+links['link'+(a-1)]._width;
clicker=links['link'+a];
clicker.id=a;
clicker.onRollOver=function(){links['link'+this.id]._alpha=30;}
clicker.onRollOut=function(){links['link'+this.id]._alpha=100;}
clicker.onRelease=function(){loadData(dirs[this.id]); }
}
links._x=0;
links._y=0;
}
//Thumbs erstellen
create_thumbs=function(bilder){
starter=0;
createEmptyMovieClip("maske",19);
createEmptyMovieClip("thmb_holder",13);
maske.beginFill(0xFFFFFF,100);
maske.moveTo(0,links._y+links._height);
maske.lineTo(0,links._y+links._height);
maske.lineTo(picx-abstand,links._height);
maske.lineTo(picx-abstand,Stage.height-vAbstand);
maske.lineTo(0,Stage.height-vAbstand);
maske.endFill;
maske._alpha=0;
for(i=0;i<bilder.length;i++){
thmb_holder.createEmptyMovieClip("boarder"+i,i);
thmb_holder.createEmptyMovieClip("thmb"+i,(i+bilder.length));
thmb_holder['thmb'+i].loadMovie(pfad+bilder[i]);
thmb_holder._alpha=0;
}
build_loader();
thframer.onEnterFrame=function(){
dprz=Math.round(100/thmb_holder['thmb'+starter].getBytesTotal()*thmb_holder['thmb'+starter].getBytesLoaded());
pr=Math.round(100/bilder.length*starter);
txt.text="Lade Thumbnails "+pr+"%";
txt.setTextFormat(textform);
if(dprz==100 && thmb_holder['thmb'+starter]._width>1){
starter++;
if(starter==bilder.length){delete thframer.onEnterFrame;
loader.blink(100,2);
txt.removeTextField();
th_max=10;
for(z=0;z<bilder.length;z++){
thmbscal=100/thmb_holder['thmb'+z]._width*(weite-(abstand*2));
thmb_holder['thmb'+z]._xscale=thmbscal;
thmb_holder['thmb'+z]._yscale=thmbscal;
thmb_holder['boarder'+z].beginFill(0xFFFFFF,100);
thmb_holder['boarder'+z].moveTo(0,0);
thmb_holder['boarder'+z].lineTo(0,0);
thmb_holder['boarder'+z].lineTo(weite,0);
thmb_holder['boarder'+z].lineTo(weite,(thmb_holder['thmb'+z]._height+(abstand*2)));
thmb_holder['boarder'+z].lineTo(0,(thmb_holder['thmb'+z]._height+(abstand*2)));
thmb_holder['boarder'+z].endFill();
clickme=thmb_holder['thmb'+z];
clickme.id=z;
clickme.onRollOver=function(){
thmb_holder['thmb'+this.id]._alpha=30;
}
clickme.onRollOut=function(){
thmb_holder['thmb'+this.id]._alpha=100;
}
clickme.onRelease=function(){
delete _root.onEnterFrame;
delete framer.onEnterFrame;
delete loader.onEnterFrame;
delete thframer.onEnterFrame;
loadMainPic(bilder[this.id]);}
if(thmb_holder['thmb'+z]._height>th_max){th_max=thmb_holder['thmb'+z]._height;}
}
//Modulo
folge=0;
for(h=0;h<(Math.round(bilder.length/rows));h++){
for(v=0;v<rows;v++){
thmb_holder['boarder'+folge]._x=(weite+abstand)*v;
thmb_holder['boarder'+folge]._y=(th_max+abstand)*h;
thmb_holder['thmb'+folge]._x=thmb_holder['boarder'+folge]._x+(abstand);
thmb_holder['thmb'+folge]._y=thmb_holder['boarder'+folge]._y+(abstand);
folge++;
}
}
//Moduloende
thmb_holder._x=maske._x;
thmb_holder._y=links._height;
thmb_holder.setMask(maske);
thmb_holder._alpha=100;
_root.onMouseMove=function(){
if(thmb_holder.hitTest(_root._xmouse,_root._ymouse,true)){
div=thmb_holder._height-(maske._height);
pos=Math.round(100/(maske._height-50)*(maske._ymouse-links._height));
newPos=(div/100*pos)-links._height;
if(div>0){
tween=new mx.transitions.Tween(thmb_holder,"_y",mx.transitions.easing.Regular.easeOut,thmb_holder._y,-newPos,3,true);
}
}
}
}
}
}
}
loadData("");
Testen
)
