[stuff] MiniAS3ImageSlider mit alpha überblendung

[salazar]

hi,
weil da immer wieder nach gefragt wird... hier ein sehr einfacher image slider. das ding ist in AS3 geschrieben und für den Flashplayer 9 / Flashplayer 10 gedacht. unten gibt es eine bsp fla (flash CS3) zum anschauen und weiter benutzen.

den folgenden code könnt ihr einfach in eine leere fla kopieren und loslegen.

PHP-Code:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

//---

var imagesToLoad:Array = new Array( "bild1.jpg", "bild2.jpg", "bild3.jpg" );//hier die bilder eintragen die geladen werden sollen
var pauseTime:int = 2000;//2 sek, ist ein bild zu sehen 
var fadeSpeed:int = 2;//2 sek, braucht ein bild zum einblenden 
var tweenEasing:Function = Strong.easeOut;//easing einstellen

//---

var tween:Tween;
var pos:int = 0;
var bitmapHolder:Array = new Array();
var setTimeoutID:uint;
var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite;
var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onLoadImageComplete );

//---
    
function loadImage( id:int ):void {

    loader.load( new URLRequest( imagesToLoad[ id ] ) );
    
}

function onLoadImageComplete( e:Event ):void {

    e.currentTarget.content.alpha = 0;

    bitmapHolder.push( holder.addChild( e.currentTarget.content ) );

    tween = new Tween( e.currentTarget.content, "alpha", tweenEasing, e.currentTarget.content.alpha, 1, fadeSpeed, true ); 
    tween.addEventListener( TweenEvent.MOTION_FINISH, onCompleteHandler );
    
}

function onCompleteHandler( e:Event ):void {
    
    tween.removeEventListener( TweenEvent.MOTION_FINISH, onCompleteHandler );

    if ( bitmapHolder.length > 1 ) 
        holder.removeChild( bitmapHolder.shift() );

    setTimeoutID = setTimeout( nextImage, pauseTime ); 

}

function nextImage():void {

    loadImage( pos = pos < imagesToLoad.length - 1 ? pos += 1 : 0 );

}

//---

loadImage( pos ); 


wollt ihr zusätzlich zum automatischen ablauf die bilder direkt per button ansteuern können ergänzt einfach folgenden code. ( im bsp sind drei bilder, also gibts drei buttons )

PHP-Code:

bt1.buttonMode = true;
bt2.buttonMode = true;
bt3.buttonMode = true;

bt1.addEventListener( MouseEvent.CLICK, clickHandler );
bt2.addEventListener( MouseEvent.CLICK, clickHandler );
bt3.addEventListener( MouseEvent.CLICK, clickHandler );

function clickHandler( e:MouseEvent ):void {
    
    if ( tween )
        tween.stop();
    
    clearTimeout( setTimeoutID );

    switch( e.currentTarget ) {
    
        case bt1:
        loadImage( pos = 0 );
        break;
        
        case bt2:
        loadImage( pos = 1 );
        break;
        
        case bt3:
        loadImage( pos = 2 );
        break;
    
    }
    
} 


das ding ist super simpel aufgebaut und in aller schnelle entstanden.
wer mag kann wie im bsp ein paar buttons adden und somit die bilder direkt ansteuern. je nach anzahl müssen händisch ein paar buttons auf der bühne platziert werden. siehe bsp fla.

folgende variablen können bequem eingestellt werden:

PHP-Code:

var imagesToLoad:Array = new Array( "bild1.jpg", "bild2.jpg", "bild3.jpg" );//hier die bilder eintragen die geladen werden sollen
var pauseTime:int = 2000;//2 sek, ist ein bild zu sehen 
var fadeSpeed:int = 2;//2 sek, braucht ein bild zum einblenden 
var tweenEasing:Function = Strong.easeOut;//easing einstellen 


alles andere sollte klar sein. sonst einfach fragen...

cheers,
sal

edit: es gab ein update. code wurde etwas optimert und somit gibts auch neue files. also bitte V2 ziehen.

---> MiniAS3ImageSliderV2.zip

[a.albrecht]

Das ist Spitze! Eine kurze Frage:
Kann ich den Bildern, die geladen werden jeweils einen eigenen Hyperlink geben? Es soll eine Website aufgerufen werden, wenn man auf das Bild klickt.

[salazar]

hi,
das ist kein großes ding.

ein paar kleine änderungen sind nötig. ergänze den code mit folgender function:

PHP-Code:

function link( e:MouseEvent ):void {

    navigateToURL( new URLRequest( imagesToLoad[ pos ].link ), "_blank" );

} 


änder das array welches die bilder enthält wie folgt ab:

PHP-Code:

var imagesToLoad:Array = new Array( { img:"bild1.jpg", link:"http://www.flashforum.de" }, { img:"bild2.jpg", link:"http://www.flashforum.de" }, { img:"bild3.jpg", link:"http://www.flashforum.de" } ); 


und dann mach noch aus:

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite; 


einen zweilzeiler:

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite;
    holder.addEventListener( MouseEvent.CLICK, link ); 


zudem musste dann noch die kommende function wie folgt abändern:

PHP-Code:

function loadImage( id:int ):void {

    loader.load( new URLRequest( imagesToLoad[ id ].img ) );

} 


das sollte es dann schon gewesen sein

cheers,
sal

[a.albrecht]

Unfassbar! Grandios! Besten Dank!
Kann man den Hyperlink-Mauszeiger irgendwie erzwingen?

[salazar]

hui,
dann braucht es aber schon 'nen dreizeiler!

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite;
    holder.addEventListener( MouseEvent.CLICK, link );
    holder.buttonMode = true; 


viel spaß.
cheers,
sal

[dr_pulga]

Hi Salazar,

Danke zunächst für das gediegene Tutorial! Hätt noch folgende Frage dazu: Wo gibst Du an, dass die Bilder immer links oben sind bzw. anders gefragt: wie kann ich die Bildposition verändern? Die Variable pos bedient ja den Array und nicht die Position ...

lg

DrP

[thomas_E]

Wo gibst Du an, dass die Bilder immer links oben sind

garnicht, deshalb legt Flash sie automatisch oben links hin.

bzw. anders gefragt: wie kann ich die Bildposition verändern?

PHP-Code:

var imageCenter:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);
//...

function onLoadImageComplete( e:Event ):void {

    var image:DisplayObject = e.currentTarget.content;
        image.x = imageCenter.x - image.width * .5;
        image.y = imageCenter.y - image.height * .5;

    bitmapHolder.push( holder.addChild( image ) );

    tween = new Tween( image, "alpha", tweenEasing, 0, 1, fadeSpeed, true ); 
    tween.addEventListener( TweenEvent.MOTION_FINISH, onCompleteHandler );
} 


verständlich?
Ich hab es mir jetzt gespart e.currentTarget.content nach Bitmap zu casten, da für diese Aktionen DisplayObject völlig ausreicht.

[salazar]

hi,
grüß euch.

wie thomas schon beschrieben hat lässt sich die position natürlich auch verändern. das ganze geht aber auch initial. du kannst auch aus folgender zeile:

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite; 


das hier machen:

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite;
    holder.x = 300;
    holder.y = 100; 


so wären die bilder auf position x=300 und y=100 wieder zu finden und du müsstest nicht in die function eingreifen/umcoden.

Die Variable pos bedient ja den Array und nicht die Position ...

das ist natürlich ein gutes beispiel für blöde var namen!
statt pos wär hier sicherlich sowas wie arrayIndex besser gewesen, aber hinterher weiß man ja immer mehr.

viel spaß noch und grüße,
sal

[thomas_E]

*g hast recht.
letztlich würde ich wohl eine Kombination der beiden codes bevorzugen.
Salazar, du hast hier drei gleich grosse Bilder; das ist nicht immer der Fall.
Und wenn du unterschiedlich grosse Bilder überblendest sieht es imho am besten aus, wenn die zueinander zentriert sind.

Die Position(Mitte) der Bilder wird durch holder.x und y festgelegt, und in onLoadImageComplete werden sie im holder mittig ausgerichtet.

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite;
    holder.x = 300;
    holder.y = 100;

function onLoadImageComplete( e:Event ):void {
    var image:DisplayObject = e.currentTarget.content;
        image.x = -image.width/2;
        image.y = -image.height/2;

    bitmapHolder.push( holder.addChild( image ) );

    tween = new Tween( image, "alpha", tweenEasing, 0, 1, fadeSpeed, true ); 
    tween.addEventListener( TweenEvent.MOTION_FINISH, onCompleteHandler );
} 


[salazar]

japp, mit dem ausrichten haste recht.
wollte auch nur kurz ein beispiel geben wegen der position... hätte man jetzt noch wegen dem aussehen usw. gefragt wär mein ansatz in deine richtung gegangen...

bei deinem bsp. fällt mir nur auf die schnelle noch auf das die folgende zeile abhanden gekommen ist:

PHP-Code:

e.currentTarget.content.alpha = 0; 


beste grüße und n8,
sal

[dr_pulga]

Danke Salazar & Thomas,

werde die Früchte Eurer Korrespondenz übers WE probieren.

lg
DrP

[dr_pulga]

Danke Salazar & Thomas,

konnte die Essenz Eurer Korrespondenz erfolgreich anwenden.

Und um noch was Konstruktives beizutragen: Sollte jemand wie ich auf das Problem stossen, dass die Bilder durch andere Sprite-Inhalte verdeckt werden, dann schafft es Abhilfe, in folgender Zeile den Wert von 0 zu erhöhen.

PHP-Code:

var holder:Sprite = addChildAt( new Sprite(), 0 ) as Sprite; 


lg
DrP