Galerie automatisch an Fenstergöße anpassen

[jones86]

Hallo,

ich bin gerade am verzweifeln. Habe mir eine Galerie in Flash (AS2) gebaut auf Basis eines Tutorials gebaut. Jetzt hätte ich aber gerne, dass diese sich in der Größe (nur Horizontal) automatisch an das Fenster anpasst. Wenn das Browserfenster breiter gezogen wird, soll auch der sichtbare Teil der Galerie verlängert werden und der Scrollbalken länger werden.
Die Variante im HTML 100% anzugeben möchte ich vermeiden, da dann meine Bilder skaliert werden.

Ich habe schon mit dem StageListener rumprobiert, aber ich bekomme das nicht hin. Könnt ihr mir helfen?

Hier noch der Quelltext meiner .fla und ein Bild der Seite. Die farbigen Flächen werden am Ende natürlich durch Bilder ersetzt.

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

var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;
myGalleryXML.load("images.xml");

myGalleryXML.onLoad = function() {

    _root.gallery_width = myGalleryXML.firstChild.attributes.width;
    _root.gallery_height = myGalleryXML.firstChild.attributes.height;
    _root.gallery_y = myGalleryXML.firstChild.attributes.y;

    _root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
    _root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
    _root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;
    _root.scroller_width = 49;

    _root.myImages = myGalleryXML.firstChild.childNodes;
    _root.myImagesTotal = _root.myImages.length;
    _root.image_width_temp = 0;
    _root.image_width_last = 0;
    
    createContainer();
    callImages();
    masking();
    scrollbar();
    scroller();

};

function createContainer() {
    _root.myGallery_mc = _root.createEmptyMovieClip("myGallery_mc", _root.getNextHighestDepth());
    _root.myGallery_mc._y = _root.gallery_y;
    //_root.myGallery_mc._x = (Stage.width-_root.gallery_width)/2;
    _root.myGallery_mc._x = 0;
}

function callImages() {

    _root.myImages_mc = _root.myGallery_mc.createEmptyMovieClip("myImages_mc", _root.myGallery_mc.getNextHighestDepth());

    var myMCL:MovieClipLoader = new MovieClipLoader();

    for (i=0; i<_root.myImagesTotal; i++) {
        imageURL = _root.myImages[i].attributes.url;
        image_mc = _root.myImages_mc.createEmptyMovieClip(i, _root.myImages_mc.getNextHighestDepth());
        _root.image_width_temp = Number(_root.image_width_temp) + Number(_root.image_width_last);
        image_mc._x = _root.image_width_temp;
        _root.image_width_last = Number(_root.myImages[i].attributes.width) + 1;
        myMCL.loadClip(imageURL,image_mc);
    }

}

function masking() {
    _root.myMask_mc = _root.myGallery_mc.createEmptyMovieClip("myMask_mc", _root.myGallery_mc.getNextHighestDepth());

    _root.myMask_mc.beginFill(0x000000,100);
    _root.myMask_mc.lineTo(_root.gallery_width,0);
    _root.myMask_mc.lineTo(_root.gallery_width,_root.gallery_height);
    _root.myMask_mc.lineTo(0,_root.gallery_height);
    _root.myMask_mc.lineTo(0,0);
    _root.myMask_mc.endFill();

    _root.myImages_mc.setMask(_root.myMask_mc);

}

function scrollbar() {
    _root.scrollbar_mc = _root.myGallery_mc.createEmptyMovieClip("scrollbar_mc", _root.myGallery_mc.getNextHighestDepth());
    _root.scrollbar_mc._y = _root.bar_y;

    _root.scrollbar_mc.beginFill(0xffffff,100);
    _root.scrollbar_mc.lineTo(gallery_width,0);
    _root.scrollbar_mc.lineTo(gallery_width,_root.bar_thickness);
    _root.scrollbar_mc.lineTo(0,_root.bar_thickness);
    _root.scrollbar_mc.lineTo(0,0);
    _root.scrollbar_mc.endFill();

    _root.scrollbar_mc.onPress = function() {
        _root.scroller_mc._x = this._xmouse;

        if (_root.scroller_mc._x>(this._width-_root.scroller_mc._width)) {
            _root.scroller_mc._x = this._width-_root.scroller_mc._width;
        }
        mover();
    };

}

function scroller() {
    _root.scroller_mc = _root.myGallery_mc.createEmptyMovieClip("scroller_mc", _root.myGallery_mc.getNextHighestDepth());
    _root.scroller_mc._y = Number(_root.bar_y) - 3;

    _root.scroller_mc.beginFill(0x6b7f91,100);
    _root.scroller_mc.lineTo(_root.scroller_width,0);
    _root.scroller_mc.lineTo(_root.scroller_width,7);
    _root.scroller_mc.lineTo(0,7);
    _root.scroller_mc.lineTo(0,0);
    _root.scroller_mc.endFill();

    _root.scroller_mc.onPress = function() {
        startDrag(this, false, 0, this._y, _root.scrollbar_mc._width-this._width, this._y);
        moverInterval = setInterval(mover,50);
    };

    _root.scroller_mc.onRelease = _root.scroller_mc.onReleaseOutside=function () {
        stopDrag();
        clearInterval(moverInterval);
        mover();
    };
}

function mover() {
    var scrollerLocation = _root.scroller_mc._x/(_root.scrollbar_mc._width-_root.scroller_mc._width);
    var galleryLocation = scrollerLocation*(_root.myMask_mc._width-_root.myImages_mc._width);

    new Tween(_root.myImages_mc, "_x", Strong.easeOut, _root.myImages_mc._x, galleryLocation, 1.5, true);
}

By at 2010-11-24

Schön das Du einen 30" Monitor hast. Link gesetzt.

 

[jones86]

AW: Galerie automatisch an Fenstergöße anpassen

Habe folgende Zeilen hinzugefügt:

    Stage.align = "TL";
    Stage.scaleMode = "noScale";

    stageListener = new Object();

    stageListener.onResize = function(){
        trace(Stage.width);
    }

    Stage.addListener(stageListener);

Durch den Trace sehe ich auch, dass die Funktion angesprochen wird und mir die richtigen Werte zurückliefert. Ich habe aber keine Ahnung, welche Funktionen ich jetzt aufrufen muss (oder ob ich eine neue bracueh) damit die Bühne wieder richtig befüllt wird.

Habe schon diverse Varianten durchgespielt, komme aber nie zu dem gewünschten Ergebnis. In der Regel bleibt meine Bühne schwarz und nur der neu dazugekommene Teil wird gefüllt....

Kann mir jemand helfen?

P.S.: Ist ein 27 Zoll Monitor ;-)

 

[jones86]

AW: Galerie automatisch an Fenstergöße anpassen

Problem ist gelöst!

Innerhalb der onResize funtion rufe ich die folgenden beiden Zeilen auf um die Maske und die Scrollbar an die Weite der Bühne anzupassen.

_root.myMask_mc._width = Stage.width;
_root.scrollbar_mc._width = Stage.width;