[stuff] as2 bildergalerie, _alpha fade

[salazar]

hola,
in letzter zeit und speziell die letzten tage wurde hier im flashforum sehr häufig nach einem bildwechsel oder einer galery gefragt...
z.B.
Probleme mit einem Bildwechsler!
Galerie mit fliessenden Übergängen Preloaden?

Der Frager hatte dazu schon was kurzes und knackiges (siehe thread 2) geposted. ich wollte das jetzt aber mal für die mx2004 und aufwärts user scripten. also mit der tween klasse und fürs preloading mit der MovieClipLoader klasse. rausgekommen ist dabei gestern abend eine kleine bildergalerie. sie preloaded externe jpg´s. der bildwechsel erfolgt durch eine alpha überblendung. da so großes interesse zu bestehen scheint stell ich mal mein ergebnis der allgemeinheit zur verfügung. aber nicht meckern wenn was nicht funktioniert... war schon sehr spät gestern

hier gibts immer die neueste version zum anschauen:
-----> http://www.nkunited.de/bildwechsel/ <-----

wenn ich demnächst noch zeit finde werde ich den code noch kommentieren. bis dahin kann man sich viele comments aus dem alpha fade tutorial von mir ziehen.. da ist vieles ziemlich änlich.. siehe hier:
[Stuff] einfaden und ausfaden von mc´s

edit: und hier gibt es das ganze als dynamische variante mit xml datei:
[stuff] as2 bildergalerie, _alpha fade

edit: und hier das ganze mit einem kleinen blur effect für flash8
[stuff] as2 bildergalerie, _alpha fade

edit: erweiterte flash8 variante. kann jetzt auch gifs lesen
[stuff] as2 bildergalerie, _alpha fade

edit: erweiterte dynamsiche flash8 variante mit thumbnail vorschau. kann jetzt auch gif und png dateien lesen

http://www.flashforum.de/forum/showt...88#post1624588 ---> aktuelle FLA


hier das script:

PHP-Code:

//-------------------------------------

import mx.transitions.Tween;
import mx.transitions.easing.*;

//-------------------------------------

var deinMcAlphaTween:Tween;
var deinMcXScaleTween:Tween;
var deinMcYScaleTween:Tween;
var deinMcRotationTween:Tween;

var img:Array = new Array("CharlesBronson.JPG", "ClintEastwood.JPG", "FrancoNero.JPG", "GianMariaVolonte.JPG", "GiulianoGemma.JPG", "KlausKinski.JPG", "LeeVanCleef.JPG", "RichardHarrison.JPG", "TerenceHill.JPG", "TonyAnthony.JPG", "WilliamBerger.JPG");

var p:Number = 0;

var imgPos:Number = 0;
var imgAnz:Number = img.length;
var imgNam:String;

var imgLoader:MovieClipLoader = new MovieClipLoader();
var imgObject:Object = new Object();

var newClip:MovieClip;
var oldClip:MovieClip;

var container1:MovieClip = this.createEmptyMovieClip("mc_container_1", this.getNextHighestDepth());
var container2:MovieClip = this.createEmptyMovieClip("mc_container_2", this.getNextHighestDepth());

//-------------------------------------

imgObject.onLoadStart = function(target_mc:MovieClip) {
    
    p = 0;

    txt_prozent.text = p + "%";
    
}

imgObject.onLoadProgress = function(target_mc:MovieClip, bl:Number, bt:Number) { 

    p = Math.round(target_mc.getBytesLoaded() * 100 / target_mc.getBytesTotal()); 
    
    txt_prozent.text = p + "%";

}

imgObject.onLoadComplete = function(target_mc:MovieClip) {
    
    txt_prozent.text = "";
    
    mc_txt_info.txt_info.text = imgNam;
    
    setEffect(target_mc, true);
    setEffect(oldClip, false);

} 

imgObject.onLoadError = function(target_mc:MovieClip, txt:String) {

    txt_prozent.text = "FILE NOT FOUND";
    
}

imgLoader.addListener(imgObject);

//-------------------------------------

function initApplication():Void {
    
    mc_txt_info.swapDepths(10000);
    
    container1._x = 300;
    container1._y = 190;
    
    container2._x = 300;
    container2._y = 190;
    
    container1._alpha = 0;
    container2._alpha = 0;

    bt_prev.enabled = true;
    bt_next.enabled = true;
    
    newClip = container2;
    newClip.swapDepths(2); 
    newClip._xscale = 95;
    newClip._yscale = 95;
    
    imgNam = img[imgPos];

    imgLoader.loadClip(imgNam, newClip); 

}

//-------------------------------------

function setEffect(mc:MovieClip, inOut:Boolean):Void {

    if(inOut) {
        
        deinMcAlphaTween = new Tween(mc, "_alpha", Strong.easeOut, mc._alpha, 100, 2, true);
        
        deinMcXScaleTween = new Tween(mc, "_xscale", Bounce.easeOut, mc._xscale, 100, 2, true);
        deinMcYScaleTween = new Tween(mc, "_yscale", Bounce.easeOut, mc._yscale, 100, 2, true);
        
        deinMcRotationTween = new Tween(mc, "_rotation", Bounce.easeOut, 0, 4, 3, true);
    
    } else {
        
        deinMcAlphaTween = new Tween(mc, "_alpha", Strong.easeOut, mc._alpha, 0, 2, true);
        
    }

}

//-------------------------------------

function findImage(dir:Number):Void {

    var pos:Number = imgPos + dir;
    
    if(img[pos] != undefined) {
        
        imgPos += dir;

        if (newClip != container1) {

            newClip = container1;
            oldClip = container2;
            
        } else {

            newClip = container2;
            oldClip = container1;
            
        } 

        newClip.swapDepths(2); 
        newClip._xscale = 95;
        newClip._yscale = 95;

        imgNam = img[imgPos];

        imgLoader.loadClip(imgNam, newClip); 
        
    }

}

//-------------------------------------

this.bt_prev.enabled = false;
this.bt_prev.onPress = function():Void {

    findImage(-1);

}

//-------------------------------------

this.bt_next.enabled = false;
this.bt_next.onPress = function():Void {

    findImage(1);

}
//-------------------------------------

initApplication();

//------------------------------------- 


files gibts hier.... weil die maximale dateigröße hier im ff leider auf 48,8kb limitiert ist mußte ich alle projekt relevanten files in mehrere kleine zip pakete packen. wenn ihr die bildergalerie saugen wollt neht also alle zip files und entpackt die in ein und den selben ordner.
hinweis:
schriften hab ich hier besorgt:
http://www.dafont.com/ bitte beachtet evtl. die nutzungsbedingungen wenn ihr die font ebenfalls nutzen wollt. speziell kommerziell! das gleiche gilt für die bilder. die hab ich über google gefunden und zwar auf: http://www.spaghettiwesterns.com.ar/actores.htm (aktuelle fla)

viel spaß & cya, sal

[salazar]

na anscheinend konnten es ja schon 8 leute gebrauchen
ihr alten anonymous sauger ihr.. ein bissal feedback wär schon schön

cya, sal

[pwdVergesser]

schön isses - aber saugen tu ichs mir nicht - ätsch!

[salazar]

die dateigröße zu groß?!
grüße, sal

[bobo_k1]

Sehr schön - was mir nicht ganz so gut gefällt ist der Wackel-Effekt wenn das Bild reinfadet- sieht abgehackt aus, könnte etwas smoother sein.

Aber ansonsten, schickes Ding - wird bestimmt mal irgendwo bei mir auftauchen...

[Der Frager]

Zitat von salazar

...ein bissal feedback wär schon schön...

Gähn...

[muschko]

schickes ding von dir hätte ich noch erwartet das es dynamisch ist.. hab mich echt gewundert

feine sache sal

mfg
... geburtstags muschko

[salazar]

@bobo_k1: hast recht... aber das soll auch nur als bsp dienen was man mit "new Tween" noch alles schönes machen kann... einfach nur zum verdeutlichen. einen schönheitpreis wollte ich nicht gewinnen... auch wenn man das mit dem western look vielleicht denken könnte

@Der Frager: kein kommentar!

@muschko: happy birthday! ja dynamisch geht ja auch ohne weiteres... hier war es nur das ziel mal mit den transitions zu arbeiten... das machen noch soo wenig. ich denke das liegt meistens daran das die sich die scripts von wo ziehen... auch wenn die schon mehrere jahre alt sind. vielleicht ändert sich das ja. und vielleicht find ich auch mal die tage die zeit das dynamisch umzuschreiben

grüße & thx, sal

[quasimono]

schönes Teil Sal!

mal so interessehalber:
warum setzt du die container-mcs auf 95% scale?

newClip._xscale = 95;
newClip._yscale = 95;

hat das einen bestimmten grund?
oder nur der optik wegen?


grüssle,
quasi

[salazar]

hi, danke

das hat nen grund. wenn das bild fertig geladen ist scale ich das bild hiermit auf 100%...:

PHP-Code:

deinMcXScaleTween = new Tween(mc, "_xscale", Bounce.easeOut, mc._xscale, 100, 2, true);
deinMcYScaleTween = new Tween(mc, "_yscale", Bounce.easeOut, mc._yscale, 100, 2, true); 


damit man davon aber überhaupt was sieht setze ich den container vorab auf 95%...
wenn du beides weglässt haste nur einen reinen alpha übergang.. ach ja. die drehung ist noch mit drinne, aber die lässt sich ja auch entfernen.

dazu einfach folgende as zeilen löschen:

PHP-Code:

var deinMcRotationTween:Tween; 
//und
deinMcRotationTween = new Tween(mc, "_rotation", Bounce.easeOut, 0, 4, 3, true); 


grüße, sal

[salazar]

Zitat von muschko

schickes ding von dir hätte ich noch erwartet das es dynamisch ist.. hab mich echt gewundert

hola, hab ja gesagt das wenn was zeit übrig ist ich eine dynamische version erstellen werde. anbei ist der code. ladet einfach die "alte", also nicht dynamische version runter und ersetzt den code dort durch den folgenden:

PHP-Code:

//-------------------------------------

Stage.showMenu = false;
Stage.scaleMode = "noScale";

//-------------------------------------

//_quality = "LOW";
//_quality = "MEDIUM";
_quality = "HIGH";
//_quality = "BEST";

//-------------------------------------

import mx.transitions.Tween;
import mx.transitions.easing.*;

//-------------------------------------

var deinMcAlphaTween:Tween;
var deinMcXScaleTween:Tween;
var deinMcYScaleTween:Tween;
var deinMcRotationTween:Tween;

var img:Array = new Array();
var xmlObject:XML = new XML();
var xmlFile:String = "images.xml";

var p:Number = 0;

var imgPos:Number = 0;
var imgAnz:Number = img.length;
var imgNam:String;

var imgLoader:MovieClipLoader = new MovieClipLoader();
var imgObject:Object = new Object();

var newClip:MovieClip;
var oldClip:MovieClip;

var container1:MovieClip = this.createEmptyMovieClip("mc_container_1", this.getNextHighestDepth());
var container2:MovieClip = this.createEmptyMovieClip("mc_container_2", this.getNextHighestDepth());

//-------------------------------------

imgObject.onLoadStart = function(target_mc:MovieClip) {
    
    p = 0;

    txt_prozent.text = p + "%";
    
}

imgObject.onLoadProgress = function(target_mc:MovieClip, bl:Number, bt:Number) { 

    p = Math.round(target_mc.getBytesLoaded() * 100 / target_mc.getBytesTotal()); 
    
    txt_prozent.text = p + "%";

}

imgObject.onLoadComplete = function(target_mc:MovieClip) {
    
    txt_prozent.text = "";
    
    mc_txt_info.txt_info.text = imgNam;
    
    setEffect(target_mc, true);
    setEffect(oldClip, false);

} 

imgObject.onLoadError = function(target_mc:MovieClip, txt:String) {

    txt_prozent.text = "FILE NOT FOUND";
    
}

imgLoader.addListener(imgObject);

//-------------------------------------

function loadXmlObject():Void {

    xmlObject.ignoreWhite = true;
    
    xmlObject.onLoad = function(ok:Boolean):Void {
        
        if(ok) parseXmlObject(this.firstChild.firstChild);

    }
    
    xmlObject.load(xmlFile); 
    
}

//-------------------------------------

function parseXmlObject(xmlObject:Object):Void {

    var i:String;

    for(i in xmlObject.attributes) img.push(xmlObject.attributes[i]);
    
    initApplication();

}

//-------------------------------------

function initApplication():Void {
    
    mc_txt_info.swapDepths(10000);
    
    container1._x = 300;
    container1._y = 190;
    
    container2._x = 300;
    container2._y = 190;
    
    container1._alpha = 0;
    container2._alpha = 0;

    bt_prev.enabled = true;
    bt_next.enabled = true;
    
    newClip = container2;
    newClip.swapDepths(2); 
    newClip._xscale = 95;
    newClip._yscale = 95;
    
    imgNam = img[imgPos];

    imgLoader.loadClip(imgNam, newClip); 

}

//-------------------------------------

function setEffect(mc:MovieClip, inOut:Boolean):Void {

    if(inOut) {
        
        deinMcAlphaTween = new Tween(mc, "_alpha", Strong.easeOut, mc._alpha, 100, 2, true);
        
        deinMcXScaleTween = new Tween(mc, "_xscale", Bounce.easeOut, mc._xscale, 100, 2, true);
        deinMcYScaleTween = new Tween(mc, "_yscale", Bounce.easeOut, mc._yscale, 100, 2, true);
        
        deinMcRotationTween = new Tween(mc, "_rotation", Bounce.easeOut, 0, 4, 3, true);
    
    } else {
        
        deinMcAlphaTween = new Tween(mc, "_alpha", Strong.easeOut, mc._alpha, 0, 2, true);
        
    }

}

//-------------------------------------

function findImage(dir:Number):Void {

    var pos:Number = imgPos + dir;
    
    if(img[pos] != undefined) {
        
        imgPos += dir;

        if (newClip != container1) {

            newClip = container1;
            oldClip = container2;
            
        } else {

            newClip = container2;
            oldClip = container1;
            
        } 

        newClip.swapDepths(2); 
        newClip._xscale = 95;
        newClip._yscale = 95;

        imgNam = img[imgPos];

        imgLoader.loadClip(imgNam, newClip); 
        
    }

}

//-------------------------------------

this.bt_prev.enabled = false;
this.bt_prev.onPress = function():Void {

    findImage(-1);

}

//-------------------------------------

this.bt_next.enabled = false;
this.bt_next.onPress = function():Void {

    findImage(1);

}[CODE][/CODE]
//-------------------------------------

loadXmlObject();

//------------------------------------- 


wie ihr seht holt sich flash nun seine informationen welche bilder es zu laden hat aus einer xml datei. wenn die xml datei alle bilder wie in der nicht dynamischen version laden soll dann könnte man die xml so aufbauen wie ich hier:

<?xml version="1.0" encoding="utf-8"?>

<content>

<images

img1="CharlesBronson.JPG"
img2="ClintEastwood.JPG"
img3="FrancoNero.JPG"
img4="GianMariaVolonte.JPG"
img5="KlausKinski.JPG"
img6="LeeVanCleef.JPG"
img7="RichardHarrison.JPG"
img8="TerenceHill.JPG"
img9="TonyAnthony.JPG"
img10="WilliamBerger.JPG"

>

</images>

</content>

das xml file könnt ihr z.B. einfach mit nem kleinen texteditor bauen... das file dann einfach als "images.xml" abspeichern und in den gleichen ordner wie die swf packen..

grüße, sal

[salazar]

hola,
anbei nochmal alle nötigen files der aktuellen version.
siehe: http://www.nkunited.de/bildwechsel/

cya, sal

[salazar]

und wieder hola,
in der folgenden version ist ein kleiner slideshow button integriert.. man kann auch den speed einstellen also wieviel sekunden jedes bild stehen bleiben soll... drückt man den button startet die slideshow automatisch, drückt man den button erneut, oder einen anderen button so wird die slideshow direkt wieder beendet.

grüße, sal

[salazar]

hier noch mit einem blur effekt der beim überblenden aktiv wird. funktioniert aber nur mit flash8!

hier gibts immer die neueste version zum anschauen:
----->>: http://www.nkunited.de/bildwechsel/

cya, sal

[renebe]

Hallo Leute,

also erstmal muß ich sagen, dass ich die letzte Varianten echt Klasse finde.
Ich bin Neuling und bastel gerade mit der Galerie und bin da auf ein Problem gestoßen.

Ich habe einen Movieclip, in der sich eine Übersicht befindet. Die Übersichtsbilder dienen als Buttons, um in die jeweilige Galerie zu kommen, die wiederum auch ein Movieclip ist. In der Galerie habe ich einen ZurückButton, um wieder in die Übersicht zu gelangen. wenn ich den Mocieclip entlade, bleiben die Bilder, einige Buttons und Texte erhalten...

kann mir jemand helfen, wie ich am besten zwischen der Übersicht und der Galerie wechseln kann?