Wieder ein dynamisches Fensterproblem

[Syracus]

Jungs, ich brauche eure Hilfe. Es geht darum, wie man das Problem am professionellesten Löst. Folgendes:

Ich habe ein dynamisches Rechteck welches ich bequem mit:

rahmenzeichnen (200, 300); 

zeichnen kann. Jetzt will ich aber das Rechteck mit easing zu einer anderen Grösse wachsen oder schrumpfen lassen.

also:

rahmenzeichnen (Breite, Hoehe); 

Es gibt viele Möglichkeiten, doch suche ich eine solide und beste. Was es gibt ist:

- mx.transitions (für mich das beste)
- ein Script (gehen Schleifen??? oder ist das oberbillig?)
- Die Penner sache ;o)

Was würdet ihr machen? Oder habt ihr weitere Ideen??

Gruss Syra

[janoshnosh]

hi
deine frage ist sehr allgemein. allgemein gesprochen solltest du dich mit dem befassen, was du gut kannst. wenn mx.transitions für dich "das beste" ist, scheinst du dich damit gut auszukennen, es stünde dir also nichst im wege, dein ziel damit zu erreichen. allerdings kannst du einfache easing-geschichten auch sehr einfach mit simplen oEF schleifen erreichen, wie z.b.

mc.onEnterFrame = function () {
this._width += Math.ceil((target - this._width) / 8); //target sei eine nummer
if (this._width == target) delete this.onEnterFrame;
} 

zur breite des MC's mc wird bei jedem schleifendurchlauf ein achtel der differenz zur ziel-breite "target" addiert.

für spezielle easings, wie z.b. gefedertes abbremsen gibt es dann höchst komplizierte dinge wie die penner-easings... wenn du da durchblickst, dann nimm doch die. schleifen sind nicht oberbillig, sondern das A und O von easings, natürlich auch von linearen bewegungen.
ich persönlich habe mich bisher immer ausdrücklich davon distanziert, scripts zu benutzen, die ich nicht 100% durchblicke, wie die penner easings zum beispiel. simple schleifen wie o.g. beispiel haben den vorteil, dass ich zu 100% herr ihrer bin - damit kann ich nichts falsch machen.

soviel zu meiner meinung dazu....
gruß janosch

[Syracus]

Mein Problem ist folgendes. Ich möchte das Fenster:

rahmenzeichnen (Width, Hight); 

eben neu zeichnen und mich nicht auf den movieclip beziehen. Also einfach in Worten gesagt.

- Zeichne Rahmen dynamisch einmal
- berechne easeing
- Zeichne Rahmen dynamisch ein zweitesmal

Also ich zeig Dir hier wie ich bounce nach herzenslust. ABER eben nicht wie ich will. Weil bei mir soll sich der mc ja nicht verziehen, sondern ich möchte das Rechteck neu gezeichnet haben also kein mc bouncing das kenne ich gut, sondern ein neues Zeichnen des Rechtecks...OHNE VERZERREN des mc.

Anhängend Code (da werden sich viele freuen - ich hoff es bringt auch mir was).

MovieClip.prototype.drawRahmen = function(c,a) {
        //trace('drawRahmen called');
        this.lineStyle(10,col,15);
        this.moveTo(startX,startY);
        this.beginFill(c,a)
        this.lineTo(startX+breite,startY);
        this.lineTo(startX+breite,startY+hoehe);
        this.lineTo(startX,startY+hoehe);
        this.lineTo(startX,startY);
        this.endFill()
        updateAfterEvent();
        // drawShaddow();
};
MovieClip.prototype.drawRect = function(x1, y1, w, h,c,a,lthick,lc,la) {
        this.lineStyle(lthick,lc,la);
        this.moveTo(x1,y1)
        this.beginFill(c,a)
        this.lineTo(x1+w,y1)
        this.lineTo(x1+w,y1+h)
        this.lineTo(x1,y1+h)
        this.lineTo(x1,y1)
        this.endFill()
};
 
MovieClip.prototype.blurredRect = function(x, y, width, height, blur, color, alpha) {
        this.lineStyle();
        var f = [];
        var sum = 0;
        for (var i = 1; i<blur+1; i++) {
                f[i-1] = i*i;
                sum += f[i-1];
        }
        var newfactor= 2;
        var counter = 40;
        do {
                factor=newfactor
                var b = 0;
                for (var i = 0; i<=blur; i++) {
                        var ftemp = (f[i]*(factor*alpha)/sum)/100;
                        b = b*(1-ftemp)+ftemp;
                }
                counter--;
                newfactor *= alpha/(100*b);
        } while ((counter>0) && (Math.abs(100*b-alpha)>.5));
        for (var i = 0; i<=blur; i++) {
                f[i] *= (factor*alpha)/sum;
        }
        for (var i = 0; i<=blur; i++) {
                this.beginFill(color, f[i]);
                this.roundRect(1+(x+i)-blur/2, 1+(y+i)-blur/2, x+width-i+blur/2-1, y+height-i+blur/2-1, blur-(i*2/3));
                this.endFill();
        }
};
MovieClip.prototype.roundRect = function(x1, y1, x2, y2, r) {
        r = Math.min(Math.abs(r), Math.min(Math.abs(x1-x2), Math.abs(y1-y2))/2);
        var f = 0.707106781186548*r;
        var a = 0.588186525863094*r;
        var b = 0.00579432557070009*r;
        var ux = Math.min(x1, x2);
        var uy = Math.min(y1, y2);
        var lx = Math.max(x1, x2);
        var ly = Math.max(y1, y2);
        this.moveTo(ux+r, uy);
        var cx = lx-r;
        var cy = uy+r;
        this.lineTo(cx, uy);
        this.curveTo(lx-a, uy+b, cx+f, cy-f);
        this.curveTo(lx-b, uy+a, lx, uy+r);
        cy = ly-r;
        this.lineTo(lx, cy);
        this.curveTo(lx-b, ly-a, cx+f, cy+f);
        this.curveTo(lx-a, ly-b, lx-r, ly);
        cx = ux+r;
        this.lineTo(cx, ly);
        this.curveTo(ux+a, ly-b, cx-f, cy+f);
        this.curveTo(ux-b, ly-a, ux, ly-r);
        cy = uy+r;
        this.lineTo(ux, cy);
        this.curveTo(ux+b, uy+a, cx-f, cy-f);
        this.curveTo(ux+a, uy+b, ux+r, uy);
};
 
function update(){
        rahmen.clear();
        rahmen.blurredRect(X, Y, breite, hoehe, sblur, scolor, sfarbint);
        rahmen.drawRect(X+2,Y+1, breite-4, hoehe-4, rcolor, rfarbint, rrahmendicke, rrahmencolor, rrahmenint);
        
}
 
function rahmen(W, H) {
        X = 10;
        Y = 10;
        breite = W;
        hoehe = H;
        rcolor = "0xFFFFFF";
        rfarbint = 100;
        rrahmenint = 10;
        rrahmencolor = "0x000000";
        rrahmendicke = 3;
        sblur = 10;
        scolor = "0x333333";
        sfarbint = 55;
        
        rahmen = this.createEmptyMovieClip("rahmen",1);
        update();
}
rahmen (500,600);
 
import mx.transitions.*;
function tweenRahmen (instanz, easeMethode)
{ 
    var prop = "_width";
    var anfang = 30;
    var ende = 200;
    var dauer = 60;
    var signal = false;
    var Rahmentween = new Tween (instanz, prop, easeMethode, anfang, ende, dauer, signal);
}
 
starten_btn.onRelease = function ()
{
    tweenRahmen (rahmen, mx.transitions.easing.Elastic.easeOut);
}; 

Denkt dran, ich will ein dynamisches Fenster, bei dem die Schattendicke immer gleich bleibt kein bouncing. Also ein anderer Ansatz aber ich komme nicht drauf...verflixt nochmal...

Gruss Syra

[Syracus]

Also..das KANN ich von oben. WAS ICH ABER WILL:

ich habe ein viereck mit weißem hintergrund und grauer linie drumrum dynamisch gezeichnet plus Schatten (siehe oben).

Edel wäre über z.B xml, Werte für die Breite und die Höhe zu speichern die ich als nächstes brauche. Wie komme ich aber mit den mx.transitions oder anderen easing-methoden auf die aktuelle Höhe oder Breite.
Also ich verändere hier aber nicht breite und höhe des vierecks sondern zeichne es neu, ebenso zeichne ich den schatten neu - das wäre die Idee.

letztlich wiederholen sich immer die selben schritte, ich will auf eine andere seite:
- größe ermitteln
- aktuellen inhalt löschen
- größe verändern
- neuen inhalt einbauen

Bitte um Hilfe - ich weiss ihr habt das drauf Leuts...und mir wäre sehr daran gelegen das endlich zu kapieren...

Gruss an die Community, Syra

[Syracus]

muss sagen dass ich etwas enttäuscht bin...weiss niemand weiter hier?? Ich meine Code da...Erklärung da, eigene Ansätze da...? Also zu komplex is es sicher nicht, ihr habt schon Gröberes gemacht hier...an was fehlts?

Gruss Syra...

[Syracus]

na toll...ich denk das wird nichts mehr...