[STUFF] StageManager AS3

[Linowitch]

Hallo,

ich habe mir erlaubt die StageManager Klasse von readme.txt in AS3 um zu bauen und will sie daher auch nicht für mich alleine behalten.
Eine detailierte Beschreibung hab ich mir gespart, ihr könnt ja im Tread von readme.txt details nachlesen.
Der einzige Unterschied besteht darin das die Klasse nur in Verbindung mit TweenLite funktioniert.

anschauen | laden

Verwendung

import sh.display.StageManager;
import sh.display.StageManagerAlign;
import sh.display.StageManagerScaleMode;
import gs.easing.*; 

this.StMa = new StageManager(stage);
this.StMa.moveTime = 200;   // die Zeit (ms) die nach dem Resize gewartet wird bevor die Tweens ausgelöst werden 
this.StMa.addBackImg("cachel5.JPG", StageManagerScaleMode.CACHEL);   // hier funktioniert bis jetzt nur Cachel.
 
this.StMa.addItem(mc, { attribute:"size", ratio:[0.5, 0.5], offset:[ -20, -20] },
                        { attribute:"position", pos:StageManagerAlign.TOP_LEFT },
                        { attribute:"animation", duration:1, ease:Strong.easeOut } ); 

Viel Spaß damit

[Linowitch]

UPDATE link oben benutzen

Ich hab jetzt nochmal ein paar sachen eingebaut.

public function addBackImg(path:String, scaleMode:String):void 

hier können jetzt auch

SageManagerScaleMode.SCALE 

und

SageManagerScaleMode.STRETCH 

verwendet werden.

attribute StageManagerAttribute.SIZE und StageManagerAttribute.POSITION kennen jetzt noch zusätzlich
lowSize:Array und highSize:Array

bsp.
Wenn man ein DisplayObject immer in der Mitte mit halber stage grösse haben möchte, aber height nicht skallieren soll wenn stageHeight < 500 ist, width wird allerdings weiter skalliert.

import sh.display.StageManager;
import sh.display.StageManagerAttribute;
import sh.display.StageManagerAlign;
 
var stMa:StageManager = new StageManager(stage);
stMa.addItem(mc, { attribute:StageManagerAttribute.POSITION, pos:StageManagerAlign.CENTER_CENTER, lowSize:[null, 500] },
                           { attribute:StageManagerAttribute.SIZE, ratio:[.5,.5], lowSize:[null, 500] } ); 

das ganze funktioniert dann natürlich auch mit width, oder wenn POSITION nicht mehr skallieren soll aber SIZE schon.

[milchreis]

funktioniert nicht so ganz wie ich mir das vorgestellt habe:

Ziel ist es, zwei Sprites so zu deformeiren, dass sie den Bildschirm füllen.
Der Abstand zwischen ihnen und dem Rand soll 10 pixel betragen.
Derdiedas linke Sprite soll aber bitteschön immer 300pixel breit sein.

erste(r/s) Sprite:

PHP-Code:

staMa.addItem(sprite1, { attribute:"size",ratio:[1,1], offset:[null, -20], highSize:[300,null]},{attribute:"position",pos:"tl", register:"tl", offset:[10,10]} ); 


Theorie von mir: ich mach das Ding erstmal so groß wie den Bildschirm, reduziere dann die Höhe um 20 (von wegen Rand und so), setzte die maximale Breite auf 300. Mit dem 10/10er offset, habe ich meinen Rand.

Praxis: oben sieht alles toll aus. der abstand links und oben passt und das Teil ist auch 300 breit, allerdings ist es zu lang und geht bis zur unteren Kante, wo ja aber eigentlich nochmal Rand sein sollte.

zweite(r/s) Sprite:

PHP-Code:

staMa.addItem(sprite2, { attribute:"size", ratio:[1,1], offset:[-330, -20]},{attribute:"position",pos:"tl", register:"tl", offset:[320,10]} ); 


Theorie von mir: Wieder fülle ich erstmal alles komplett. Diesmal muss ich 3 mal Rand und die 300 pixel abziehen, damit ich auf die restliche zu füllende Fläche komme. (für die Höhe ändert sich ja nichts, also hier wieder -20)
Ich verschiede mittels offset die Geschichte an die gewünschte Stelle (es sind 320, da ich in der Mitte ja nur 1mal Rand möchte).

Praxis: Ach du sch...tagemanager, wo hast du denn meine Fläche hingepappt?
Das zu beschreiben fällt schwer, denn meine Fläche ist irgendwie völlig falsch.

Ich hänge mal ein Bild an um zu zeigen was passiert.
Ich hab hier bestimmt irgendwas falsch verstanden und bin dankbar für Hilfe.

[Linowitch]

Wenn du im attribute "size" einen offset von -20 angibst, wird er oben und unten zu gleichen teilen gekürzt, wenn du den mc dann mit attribute "position" noch um offset 10 runter schiebst, ist unten kein Rand mehr.

highSize:[300,null] sagt nur das ab einer Bühnenbreite von 300 pixel der mc nicht mehr in der breite skalliert wird.

wenn immer noch probleme da sind mach mir ein Bild mit PS wie es sein soll, dann bau ich Dir ein Beispiel, am besten ist es aber Du machst ein attribut ohne offset usw. änderst dann immer nur eine Eigenschaft und schaust wie es sich verhält.

[milchreis]

Zitat von Linowitch

dann bau ich Dir ein Beispiel,

nö nö, die Suppe löffle ich selbst aus.
Ich habe mir die Sache einfacher vorgestellt.

Naja, wozu habe ich eigentlich flex?

[tentacles]

moin moin

versuche es gerade hinzubekommen das mein mc immer nur gleichmäßig skaliert, sich also das verhältniss von höhe zu breite nicht ändert.
versuche zu erreichen das ein foto sich an die stage größe anpasst ohne zu verzerren.

hat da jemand einen tip?

besten dank
tentacles

[Linowitch]

Das geht im moment nur mit einem Hintergrundbild, das du mit

stMa.addBackImg(...); 

registrierst, aber vielleicht komm ich am WE dazu das noch zu integrieren.
Die Berechnung ist aber nicht wirklich kompliziert.

var ratioStage:Number = stage.stageWidth/stage.stageHeight;
var ratioMC:Number = mc.width/mc.height;
 
if(ratioStage<=ratioMC){
    mc.width = stage.stageHeight * ratioMC;
    mc.height = stage.stageHeight;
    mc.x = -((stag.stageHeight * ratioMC - stage.stageWidth) / 2);
    mc.y = 0;
} else {
    mc.width = stage.stageWidth;
    mc.height = stage.stageWidth / ratioMC;
    mc.x = 0;
    mc.y = -((stage.stageWidth / ratioMC - stage.stageHeight) / 2);
} 

[Linowitch]

UPDATE link oben benutzen

So, auf mehrfache Anfrage hab ich die Funktion, mc mit gleichbleibendem Seitenverhältnis der Bühne anzupassen, noch eingefügt.

Es ist jetzt mit einem extra parameter scale möglich, das Seitenverhältins beizubehalten.
z.B.
Bei allen Beispielen bleibt das Seitenverhältnis gleich, wegen scale=true
mc an 100% der Breite der Stage anpassen.

var stMa = new StageManager(stage);
 
this.stMa.addItem(mc, { attribute:StageManagerAttributes.POSITION, pos:StageManagerAlign.CENTER_CENTER },
                                    { attribute:StageManagerAttributes.SIZE, scale:true, ratio:[1, null] } ); 

mc an 80% der höhe der Stage anpassen

var stMa = new StageManager(stage);
 
this.stMa.addItem(mc, { attribute:StageManagerAttributes.POSITION, pos:StageManagerAlign.CENTER_CENTER },
                                    { attribute:StageManagerAttributes.SIZE, scale:true, ratio:[null, .8] } ); 

bei den Beispielen bisher richtet sich der mc aber immer nur an einer Seite der Stage aus, das führt bei einer ungünstigen Auflösung zu häslichen Rändern.

mc an 100% breite oder höhe der Stage, je nach Seitenverhältnis, anpassen

var stMa = new StageManager(stage);
 
this.stMa.addItem(mc, { attribute:StageManagerAttributes.POSITION, pos:StageManagerAlign.CENTER_CENTER },
                                    { attribute:StageManagerAttributes.SIZE, scale:true, ratio:[1, 1] } ); 

das ganze funktioniert von 0 - 100% => 0 - 1

Bei Bugs, Verbesserungsvorschläge, konstruktiver Kritik oder ähnliches, bitte einfach eine mail an mich.

Viel Spaß damit

[tentacles]

besten dank,

werde ich gleich mal einbauen

[tentacles]

Hallo habe gerade mal ein wenig rumgespielt.

es ich bekomme das ganze nur zum laufen wenn ich ratio:[1,1] nutze. sobald ich null angebe (sieh unten) wird der mc gar nicht mehr bzw. vielleicht außerhalb der stage gezeigt.

Mache ich etwas falsch?

PHP-Code:

bigPic.myManager.addItem(bigPic.picContainer,{ attribute:"size", scale:true, ratio:[null, 1] },{ attribute:"position", pos:StageManagerAlign.CENTER_CENTER, offset:[-35,-79]},{ attribute:"animation", duration:1, ease:Strong.easeOut }); 


[Linowitch]

hast recht, das ist ein Bug.
steht schon auf meiner Liste.

[tentacles]

moin Linowitch,

bist du mit dem bug schon weitergekommen? oder hast du einen anhaltspunkt woran das liegen mag, dann könnte ich selber mal versuchen das zu beheben.

beste grüße,

tentacles

[Linowitch]

Hi,
ich hatte bis jetzt leider noch keine Zeit den Bug zu beheben.
Hab gerade nochmal rein geschaut, aber ich denke ich werd die Funktion Komplett überarbeiten müssen.
Der Fehler liegt in der Funktion calculateSize.
Da stimmt einiges nicht, weiß nicht was ich da gemacht hab.

Kannst gerne mal nachschauen.

[tentacles]

sag mal hast du noch die alte version ohne scale irgendwo zum download? habe leider mein zip überschrieben.

beste grüße,

tentacles

[mauri2006]

Sorry, ich weiß der letzte Beitrag ist schon etwas länger her, aber das ist sehr wichtig. Der haut mir immer 3 Fehler raus:




Weiß jemand, wie man das fixen könnte?