SlideShow in AS3

[<ok>]

Hey,

ich möchte eine Slideshow in AS3 umsetzen. Eigentlich ja kein Problem - zumindest in AS2, aber mir bereiten die Loaders und addChilds doch etwas Probleme ,-((

Also:

Es gibt einen Array mit z.B. 3 Bildern. Diese sollen zu Beginn alle hintereinander geladen werden und in einen MovieClip bzw. Sprite gepackt werden. Anschließend soll das erste Bild eingefadet werden. Mittels Buttons kann ich vor und zurück "blättern" sowie das erste und letzte Bild direkt ansteuern. Beim weiterblättern soll das aktuell angezeigte Bild erst ausgefadet werden und dann das neue Bild eingefadet werden. Soviel zur Theorie..

Das ein- und ausfaden geschieht mit einer Tweening-Engine (Tweenlite).

In AS2 habe ich das über Movieclips gelöst, die ich über den Instanznamen direkt ansprechen konnte.

Nun zur Praxis:
Für das hintereinander Laden der Bilder nehme ich ein Loader-Object bzw. pro Bild ein Loader-Object.

PHP-Code:

    var counter : Number = imageList.length;
    for( var i:Number = 0; i < counter; i++ ) {
        loadImage( imageList[ i ] );
    }

function loadImage( url : String ) : void {
    var loader:Object = new Loader();
    loader.contentLoaderInfo.addEventListener( Event.INIT, handleSuccess );
    loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, handleError );
    loader.load( new URLRequest( url ) );
    imageArr.push( loader );
} 


Danach habe ich ein Array (imageArr) mit den Loader-Objects für jedes Bild. Die Funktion "handleSuccess" wird aufgerufen, sobald ein Bild fertig geladen ist. Dort platziere ich das jeweilige Object auf der Bühne. Allerdings sind das dann Loader-Objecte und keine Sprites.

PHP-Code:

var imgHolder : Sprite = new Sprite();
imgHolder.addChild( imageArr[ 0 ] ); 


Eigentlich möchte ich Sprites mit den Bildern drin haben, die ich gezielt ansteuern kann. Leider steh ich da etwas auf dem Schlauch, wann ich mit den Loadern arbeite, wie und ob man die Loader in einen Array packen muss und wann ich etwas mit addChild platziere.

Gruß
Olli

[Omega Psi]

Ich hab mal eine kleine Klasse geschrieben.

/**
 * @author
 * @version
 *
 * Created with BeanButler (c) 2007, Florian Salihovic,
 * <a href='mailto:florian.salihovic@gmail.com'>florian.salihovic</a>
 */
package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.net.URLRequest;
    public class MyPicture extends Sprite {
        public var loader:Loader;
        public var url:String;
        public function MyPicture(url:String) {
            this.url = url;
            this.loader = new Loader();
            this.load();
        }
        public function eventListener(event:Event):void {
            if (event.type == Event.INIT) {
                trace("Init.");
            } else if (event.type == Event.COMPLETE) {
                trace("Complete");
                this.addChild(this.loader);
            } else if (event.type == IOErrorEvent.IO_ERROR) {
                trace("Could not load the picture: "+this.url);
            }
        }
        public function load():void {
            this.loader.contentLoaderInfo.addEventListener(Event.INIT, eventListener); 
            this.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, eventListener); 
            this.loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, eventListener); 
            this.loader.load(new URLRequest(this.url));
        }
        public override function toString():String {
            var asString:String = 'Bean';
            asString += ' - loader: '+this.loader;
            asString += ' - url: '+this.url;
            return asString;
        }
    }
} 

Die kannst du ganz einfach anwenden:

var pictures:Array = new Array("architecture.png");
for (var i:uint = 0; i<pictures.length; i++) {
    this.addChild(new MyPicture(pictures[i]));
} 

Der ganze Lademechanismus ist nun in der Klasse MyPicture. Die Positionierung etc machst du dann einfach über die MyPicture Instanzen.

[<ok>]

Hi,

danke für die Klasse. Das hat schon mal etwas Licht und Dunkel gebracht.

Die MyPicture Instanzen liegen ja anschließend in der DisplayList von "this" also der Stage oder einem andersweitig definierten Sprite. Um an die einzelnen Elemente dranzukommen, verwende ich wiederum getChildAt() oder gibts auch einen anderen Weg?

Gruß
Olli

[Omega Psi]

Du kannst über das <instanz>.name einen Instanznamen vergeben und dann auf dieses Objekt via <container der die instanz enthält>.getChildByName(string); drauf zugreifen. Hängt davon ab, was du amchen willst.

[<ok>]

Hi,
soweit funktioniert alles. Ich habe allerdings noch Schwierigkeiten an die Höhe und Breite des geladenen Bilder zu kommen.

Wenn z.B. in <container>.getChildAt(0) die BildInstanz liegt. Wie erhalte ich die Maße des Bildes?

<container>.getChildAt(0).height -> geht nicht..
<container>.getChildAt(0).loaderInfo.height -> geht nicht, da zuerst noch nicht geladen und später als rückgabe die stage.height erfolgt.

In der MyPictures Klasse kann ich mit event.currentTarget.height die Höhe abfragen. Allerdings bringt mir das augenscheinlich nichts, wenn ich später in der Hauptklasse auf die Instanz zugreifen möchte.

Gruß
Olli

[Omega Psi]

Du musst dort, wo die Bilder verwaltet werden einen EventListener an die Bilder binden, der auf ein ADDED_TO_STAGE Event lauscht. Die Bilder dürfen dabei erst nach einem Event.COMPLETE geadded werden. Dann kannst du width und height abfragen.

[<ok>]

Super Danke Dir!

Musste allerdings auf Event.ADDED ausweichen, da ADDED_TO_STAGE nicht funktionierte. Letzteres ist wohl erst ab 9.0.28.0 enthalten. Hab allerdings Flash Player 9.0.45.0 installiert. Auf was greift den Flash CS3 IDE zurück?

Finde AS3 wirklich nen ordentlichen Schritt nach vorne, aber die Umstellung ist doch etwas aufwendiger, da man noch in der alten Denke des öfteren festhängt.

Gruß
Olli

[Omega Psi]

Auf was Flash CS3 zurückgreift, kann ich dir leider nicht sagen. Das müsste aber auch irgendwo stehen. Musst mal schauen.