Bilder werden nicht richtig skaliert

[zirag]

Hallo Leute, ich bin am Ende mit meinem Wissen.

Ich bin grad dabei, eine XML Gallery zu schreiben. Nunja eigentlich klappt auch alles, aber wenn ich bei "pBreite" einen anderen Wert als 100 eingebe, dann werden die geladenen Bilder nicht richtig skaliert und falsch positioniert Ich kann es mir nicht erklären, weil es eben bei dem Wert 100 klappt.

Hier mal der Code:

// Variables 
var pBreite = 100;
var spacing = 10
var xAnz = Math.floor(Stage.width / (pBreite+spacing));
var yAnz = Math.floor(Stage.height / (pBreite+spacing));



// Import Classes
import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.display.BitmapData;
//================================

//load the XML File
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("images.xml");
//================================

// Setup MovieClipLoader
var mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
mcl.addListener(listener);

// when loading is done
xml.onLoad = function(success)
{
    if(success)
    {
        var nodes:Array = xml.firstChild.childNodes;
        var anzImgs:Number = nodes.length;
        for( var i:Number = 0; i<anzImgs ; i++)
        {
            _root.attachMovie("pic","pic"+i,_root.getNextHighestDepth());
            _root["pic"+i].createEmptyMovieClip("inMc",_root["pic"+i].getNextHighestDepth());
            _root["pic"+i]._width = pBreite;
            _root["pic"+i]._height = pBreite;
            mcl.loadClip("images/"+nodes[i].attributes.name,_root["pic"+i].inMc);
        }
    }
}
xcount = 0;
ycount = 0;
listener.onLoadInit = function(target:MovieClip)
{
    if(xcount == xAnz)
    {
        xcount = 0;
        ycount++
    }
    target._parent._alpha = 50;
    target.breite = target._width;
    target.hoehe = target._height;
    if(target.breite > target.hoehe)
    {
        target.scalFak = target.breite/pBreite;
        target._width = target.breite/target.scalFak;
        target._height = target.hoehe/target.scalFak;
        target._y = pBreite/2-target._height/2
    }else{
        target.scalFak = target.hoehe/pBreite;
        target._width = target.breite/target.scalFak;
        target._height = target.hoehe/target.scalFak;
        target._x = pBreite/2-target._width/2
    }
    target._parent._x = spacing+xcount * (pBreite+spacing);
    target._parent._y = spacing+ycount * (pBreite+spacing);
    trace(target._width+"   "+target._height)

    xcount++
    target.onRollOver = function()
            {
                var tw:Tween = new Tween(target._parent,"_alpha",Elastic.easeOut,50,100,1,true);
            
            }
    target.onRollOut = function()
            {
                var tw:Tween = new Tween(target._parent,"_alpha",Elastic.easeOut,100,50,10,true);
        
            }
}

Ich hoffe, irgendwer kann sich das ganze erklären

Der Debugger gibt mir auch die richtigen Werde aus

es geht hauptsächlich um diesen Teil:

    if(target.breite > target.hoehe)
    {
        target.scalFak = target.breite/pBreite;
        target._width = target.breite/target.scalFak;
        target._height = target.hoehe/target.scalFak;
        target._y = pBreite/2-target._height/2
    }else{
        target.scalFak = target.hoehe/pBreite;
        target._width = target.breite/target.scalFak;
        target._height = target.hoehe/target.scalFak;
        target._x = pBreite/2-target._width/2
    }

mfg und vielen Dank schonmal

 

[Tobias Menzel]

Hi,

was genau der Fehler ist, kann ich (ohne die Datei zu testen) auf die Schnelle nicht sagen, aber ich mache das immer so:

function reScale(maxw, maxh, obj) {
  var hr = obj._width / maxw;
  var vr = obj._height / maxh;
  if (hr > vr && hr > 1) {
    obj._width = maxw;
    obj._yscale = obj._xscale;
  } else if (vr > 1) {
    obj._height = maxh;
    obj._xscale = obj._yscale;
  }
}

Gruß
.

 

[zirag]

danke dir, ich werde es mal testen


mfg

 

[zirag]

Leider kommt mit der Funktion von dir das gleiche raus bei pBreite= 100 funktioniert es super ... jeder andere Wert klappt nicht.


Vielen Dank

mfg

 

[Tobias Menzel]

Hi,

die von Dir hochgeladene Datei entspricht aber nicht dem Code in Deinem Eingangsposting. Poste bitte die aktuelle Version (am besten auch die, in der Du meinen Vorschlag umgesetzt hast).

Gruß
.

 

[zirag]

Das ist die aktuelle, da habe ich deine Funktion doch eingebaut. Oder nicht?

Bin nun auf Arbeit und die Datei ist zu Haus

Aber das sollte die aktuelle sein mit deiner Funktion. Und bei der klappt es auch nicht, wenn man pBreite ändert.

mfg

 

[zirag]

Ohh i´m so sorry

Hab aus versehen eine falsche FLA reingepack...

hier nochmal die richtige

 

[Tobias Menzel]

Hi,

Dein Problem ist, dass Du die Bilder selbst skalierst (und damit auch der Container, der die Bilddatei aufnimmt, entsprechend skaliert wird). Du müsstest den Container also nicht anhand von pBreite skalieren, sondern anhand der Originalbreite der Bilder.

Eine simple Lösung wäre z.B. folgende:

- Öffne den MC "pic" zum Bearbeiten, und wandle die weiße Fläche in einen MovieClip um. Gib diesem Clip den Instanznamen "bgnd".

- Skaliere dann zunächst nur diese Hintergrundfläche, und nicht das gesamte Bild:

_root["pic"+i].bgnd._width = pBreite;
_root["pic"+i].bgnd._height = pBreite;

Dadurch bleibt der eigentliche Bild-MC und der Container unskaliert, und Du kannst meine Funktion unverändert einsetzen.

Gruß
.

 

[zirag]

Super, es funktioniert ....


...aaaber ich habe nicht ganz verstanden, warum es vorher nicht ging
Um zu lernen muss man aber verstehen.

Kannst du nochmal versuchen, das ganze etwas anders zu erklären


Und vielen dank schonmal

mfg

 

[Tobias Menzel]

Hi,

Du skalierst den Bild-MC auf z.B. 50% (wenn pBreite bei Dir den Wert 50 hat).

angenommen, Du lädst nun in den Container "inMc", der sich in diesem skalierten Bild-MC befindet, eine Bilddatei mit den Maßen 100x100 Pixel, so wird das Bild zunächst zwar nur mit 50x50 Pixeln angezeigt (da der übergeordnete Clip ja auf 50% skaliert wurde), hat aber eigentlich noch seine Originalmaße (ein trace() auf die _width-Eigenschaft von "inMc" würde "100" ausgeben), da es selbst nicht skaliert wird.

Du skalierst nach dem Ladevorgang nun den Container "inMc". Wenn "pBreite" 50 ist, und Du den Container ebenfalls auf pBreite (also 50 Pixel) skalierst, dann wird er tatsächlich mit 25 Pixeln Breite angezeigt (da sowohl er, als auch sein übergeordneter Clip auf 50% skaliert wurden).

Das kann zu Beginn verwirrend sein, ist aber eigentlich recht logisch. Um solche Verwirrungen zu vermeiden, empfehle ich, Clips nie komplett mitsamt ihren Inhalten zu skalieren, sondern lieber alle enthaltenen Clips getrennt zu skalieren.

Ein Thumbnail enthält bei mir z.B. oft Hintergrund (bgnd), Leerfläche (pad), Bildmaske (mask) und den Bildcontainer (ct). Ich skaliere nun nicht das Thumbnail direkt, sondern rufe nur eine Methode auf, die alle enthaltenen Clips getrennt skaliert:

// im MC thumbnail:

function reScale(w, h) {
  bgnd._width = w;
  bgnd._height = h;
  pad._width = w - pad._x * 2;
  pad._height = h - pad._y * 2;
  mask._width = pad._width;
  mask._height = pad._height;
  reScaleImage();
}

function reScaleImage() { // Achtung: dies ist eine andere Art der Skalierung als bei Dir!
  var hr = ct._width / mask._width;
  var vr = ct._hight / mask._height;
  if (hr > vr) {
    ct._height = mask._height;
    ct._xscale = ct._yscale;
  } else {
    ct._width = mask._width;
    ct._yscale = ct._xscale;
  }
  ct._x = bgnd._width / 2 - ct._width / 2;
  ct._y = bgnd._height / 2 - ct._height / 2;
}

Gruß
.