Problem: loading & tweening mehrerer Dateien

[Axel Sartorius]

Hallo Forum,
beisse mir jetzt seit Tagen die Zähne an folgendem Problem aus:
Ich lade mit Hilfe Bokels LoaderClass drei jpgs in drei MC in denen wiederum jeweils ein "holder"-MC sowie ein Hintergrund-MC liegen.
Der Hintergrund-MC wird - nachdem der Ladevorgang abgeschlossen ist - sanft aufskaliert.

Solange ich nur ein oder zwei JPG lade ist alles kein Problem, sobald ich mehrere laden will, wird es sehr buggy...

Das Problem liegt unter anderem darin, daß die Tweenfunktion nicht mehr als einen MC gleichzeitig tweenen kann.
Der jetzige Ansatz sieht so aus, daß erst dann der Hintergrund eines frisch geladenen MC durch die Tweenfunktion geschickt wird, sobald diese das Tweening des vorhergehenden abgeschlossen hat.

Funzt aber auch nicht 100%ig, da z.B. offline der Ladevorgang der drei jpgs so schnell abgeschlossen ist, daß Hintergrund von jpg 1 noch getweent wird und jpg 3 bereits fertig geladen ist. Der Effekt: Es werden nur die Tweenings für jpg1 und jpg3 durchgeführt, jpg2 bleibt auf der Strecke.

Sobald ich mit dem Webspeedsimulator von xat.com ein 56k Modem simuliere funzt es logischerweise wunderbar, aber ich will jetzt nicht die Breitbandsurfer verärgern und evtl. soll das ganze auch mal Offline auf CD laufen können.

Ok, hier mal die relevanten Teile des Skripts:

//==================LOADER CLASS========================
#include "com.qlod.LoaderClass.as"
 
myLoader = new com.qlod.LoaderClass();
 
//Listener-Objekt erstellen:
loadListener = new Object();
 
/*onLoadComplete übergibt die Layout-Werte erst einmal an die Funktion startWatch, diese 
startet wiederum die Funktion resizeMC:
*/
loadListener.onLoadComplete = function(success, loaderObj){
    var tg = loaderObj.getTarget();
    var targ = eval(tg.substr(0,5));
    var tgt = tg.substr(0,5);
    switch (tgt.slice(-1))
            {
            case "1":
            mcwidth = layout [0][0][0];
            mcheight = layout [0][0][1];
            break;
            case "2":
            mcwidth = layout [0][1][0];
            mcheight = layout [0][1][1];
            break;
            case "3":
            mcwidth = layout [0][2][0];
            mcheight = layout [0][2][1];
            break;
             }
    startWatch(targ.bg, mcwidth, mcheight);
}
//==================================================
// ===================CONTENT============================
_global.ready = true;
this.createEmptyMovieClip("watcher", 1000);
/*Funktion startWatch, um die MCs nacheinander durch die resizeMC-Funktion zu
schicken, da ein mehrfacher, gleichzeitiger Aufruf von resizeMC auch nicht geht.
Leider werden die einzelnen Bilder offline so schnell geladen, daß resizeMC noch 
den ersten MC tweent, in der Zwischenzeit bereits aber die beiden anderen geladen sind.
Das Resultat: Offline wird nur der erste und der dritte MC getweent und angezeigt*/
startWatch = function(mc, targetwidth, targetheight){
    watcher.mc = mc;
    watcher.tgWidth = targetwidth;
    watcher.tgHheight = targetheight;
    watcher.onEnterFrame = function(){
            if (ready){
            resizeMC(this.mc, this.tgWidth, this.tgHheight);
            delete this.onEnterFrame;
        }
    }
}
//============== TWEENFUNKTION =====================
Math.easeOutCubic = function (t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
};
//==================== FUNKTION RESIZE-MC ===========================
 
resizeMC = function (mc, targetwidth, targetheight)
{
        //Ausgangsgröße
        mc._visible = true;
        mc.startWidth = mc._width;
        mc.startHeight = mc._height;
        //Zielgröße
        mc.zielWidth = targetwidth;
        mc.zielHeight = targetheight;
        mc.changeWidth = mc.zielWidth - mc.startWidth;
        mc.changeHeight = mc.zielHeight - mc.startHeight;
        mc.duration = 20;
        mc.time = 0;
        mc.onEnterFrame  = function()
        {
            ready = false;
                with (this)
                {
                    
                    _width = Math.easeOutCubic(time++, startWidth, changeWidth, duration);
                    _height = Math.easeOutCubic(time++, StartHeight, changeHeight, duration);
                    if (time > duration)
                    {
                        switch (_parent._name.slice(-1))
                        {      
                        case "1":
                        _parent.holder._x = this._x + 5;
                        _parent.holder._y = this._y + 5;
                        break;
                        case "2":
                        _parent.holder._x = (this._width - 5) * (-1);
                        _parent.holder._y = this._y + 5;
                        break;
                        case "3":
                        _parent.holder._x = this._x + 5;
                        _parent.holder._y = (this._height - 5) * (-1);
                        break;
                        }
                    
                                        
                    fadeIn(_parent.holder);
                    delete onEnterFrame;
                    }
            }
        }
}
this.createEmptyMovieClip("blender", 5);
fadeIn = function(mc)
{
    blender.onEnterFrame = function()
    {
        if (mc._alpha<99)
        {
            mc._alpha += 9;
        }
        else
        {
            mc._alpha = 99;
            ready = true;
            delete this.onEnterFrame;
        }
    }
}
//===============================================================
//================CONTAINER ERSTELLUNG===========================
/* insgesamt werden 3 MC erzeugt, diese enthalten jeweils einen sogenannten 
   "holder" in den die Bilder geladen werden, sowie einen Hintergrund-MC ("bg").
   Dieser Hintergund-MC wird später durch die ResizeMC-Funktion geschickt*/
var contAnz = 3;
for (j = 1;j < contAnz+1;j++){
this.createEmptyMovieClip("cont"+j, j);
//Zeichne den Hintergrund in MC "bg":
this["cont"+j].createEmptyMovieClip("bg", 1);
//... hier folgte noch Skript für das Zeichnen der Hintergründe, habe ich euch mal erspart...
this["cont"+j].createEmptyMovieClip("holder",2);
this["cont"+j].holder._alpha = 1;
}
//===========================================================
//===========================LAYOUT===========================
/*Mehrdimensionaler Array mit Angaben zur Zielbreite und -höhe der Content-Container (3 versch. Layouts),
z.Zeit wird nur layA1-layA3 verwendet*/
layA1=[205,229];
layA2=[345,229];
layA3=[550, 80];
layB1=[275,180];
layB2=[275,180];
layB3=[550,129];
layC1=[300,150];
layC2=[250,150];
layC3=[550,159];
layA=[layA1,layA2,layA3];
layB=[layB1,layB2,layB3];
layC=[layC1,layC2,layC3];
layout=[layA,layB,layC];
 
//====================================================
//=========== LADE CONTENT ==================
myLoader.load("cont1.holder", "pix/left.jpg", loadListener);
myLoader.load("cont2.holder", "pix/right.jpg", loadListener);
myLoader.load("cont3.holder", "pix/foot1.jpg", loadListener); 

Ok, ok ist viel Holz, aber vielleicht hat jemand neben der Problemlösung noch ein paar tipps, wie man das ganze effizienter schreiben könnte? Bzw. einen ganz anderen Lösungsansatz im Ärmel?
Im Prinzip sollen nur die jpgs in container mit alpha = 1 geladen werden. Dann
soll sich der Hintergrund entsprechend der Layoutvorgaben getweent skalieren, das jpg in seinem Container bzgl. des skalierten Hintergrundes neu positionieren und dann langsam einblenden.

Für alle die das Wochenende noch nix vorhaben stell ich auch mal die *.fla hier rein :

Gruß und Dank an alle fleissigen Bienen da draussen!

[warrantmaster]

Das Problem liegt unter anderem darin, daß die Tweenfunktion nicht mehr als einen MC gleichzeitig tweenen kann.

....dann ist das eine schaißfunktion

definier sie als movieclip.prototype...blabla und handle sie entsprechend.
grz

[Axel Sartorius]

Zitat von warrantmaster

....dann ist das eine schaißfunktion

Hi warrant!
Ich liebe Deine direkten Formulierungen
Aber Du hast natürlich recht und ich manchmal ein Brett vorm Kopp
btw: Haste noch weitere Verbesserungsvorschläge im Ärmel?

[warrantmaster]

@axel

btw: Haste noch weitere Verbesserungsvorschläge im Ärmel?

...dann müßte ich ja erst dein script lesen...

muß jetzt aber wech...(freitags-billard)....

btw, was funzt ist gut ! (verbessern/optimieren kann man so ziemlich alles)

grz&prost

[Axel Sartorius]

Wie, Du führst noch ein reales Leben neben Deinem Rechner???

[Axel Sartorius]

So, hab jetzt mal gemäß warrants vorschlag 'nen Prototypen daraus gebastelt - allerdings erbt bei gleichzeitigem Tweening von drei MC der erste und zweite MC die Parameter des dritten MC. Wo steckt mein Fehler

//============== TWEENFUNKTION =====================
Math.easeOutCubic = function (t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
};
//==================== FUNKTION RESIZE-MC ===========================
 
MovieClip.prototype.resize = function (targetwidth, targetheight)
{
    
    with (this)
    {
        //Ausgangsgröße
        _visible = true;
        startWidth = _width;
        startHeight = _height;
        //Zielgröße
        zielWidth = targetwidth;
        zielHeight = targetheight;
        changeWidth = zielWidth - startWidth;
        changeHeight = zielHeight - startHeight;
        duration = 40;
        time = 0;
    }
        this.onEnterFrame  = function()
        {
            this._width = Math.easeOutCubic(time++, startWidth, changeWidth, duration);
            this._height = Math.easeOutCubic(time++, StartHeight, changeHeight, duration);
                if (time > duration)
                {
                    switch (this._parent._name.slice(-1))
                    {      
                    case "1":
                    this._parent.holder._x = this._x + 5;
                    this._parent.holder._y = this._y + 5;
                    break;
                    case "2":
                    this._parent.holder._x = (this._width - 5) * (-1);
                    this._parent.holder._y = this._y + 5;
                    break;
                    case "3":
                    this._parent.holder._x = this._x + 5;
                    this._parent.holder._y = (this._height - 5) * (-1);
                    break;
                    }            
                delete this.onEnterFrame;
            }
        
        
    }
}
 
//===============================================================
//================CONTAINER ERSTELLUNG===========================
/* insgesamt werden 3 MC erzeugt, diese enthalten jeweils einen sogenannten 
   "holder" in den die Bilder geladen werden, sowie einen Hintergrund-MC ("bg").
   Dieser Hintergund-MC wird später durch die ResizeMC-Funktion geschickt*/
var contAnz = 3;
for (j = 1;j < contAnz+1;j++){
this.createEmptyMovieClip("cont"+j, j);
//Zeichne den Hintergrund in MC "bg":
this["cont"+j].createEmptyMovieClip("bg", 1);
this["cont"+j].bg.lineStyle(0,0x8D0C0C,80);
this["cont"+j].bg.beginFill(0x800B0B,65);
this["cont"+j].bg.moveTo(0, 0);
//Um von links nach rechts bzw. rechts nach links und von unten nach oben
// zu tweenen, muss der Registerpunkt für jeden "bg"-MC woanders angelegt sein:
switch (j){
    case 1:
    this["cont"+j].bg.lineTo(100,0);
    this["cont"+j].bg.lineStyle(0,0x2C0303,80);
    this["cont"+j].bg.lineTo(100,100);
    this["cont"+j].bg.lineTo(0,100);
    this["cont"+j].bg.lineStyle(0,0x8D0C0C,80);
    break;
    case 2:
    this["cont"+j].bg.lineTo(-100,0);
    this["cont"+j].bg.lineTo(-100,100);
    this["cont"+j].bg.lineStyle(0,0x2C0303,80);
    this["cont"+j].bg.lineTo(0,100);
    break;
    case 3:
    this["cont"+j].bg.lineStyle(0,0x2C0303,80);
    this["cont"+j].bg.lineTo(100,0);
    this["cont"+j].bg.lineTo(100,-100);
    this["cont"+j].bg.lineStyle(0,0x8D0C0C,80);
    this["cont"+j].bg.lineTo(0,-100);
    break;
}
this["cont"+j].bg.lineTo(0,0);
this["cont"+j].bg.endFill();
this["cont"+j].bg._width = 20;
this["cont"+j].bg._height = 20;
}
//Container-Positionierung:
cont1._x = 0;
cont1._y = 31;
cont1.bg._visible = false;
cont2._x = 550;
cont2._y= 31;
cont2.bg._visible = false;
cont3._x = 0;
cont3._y = 339;
cont3.bg._visible = false;
//===========================================================
 
cont1.bg.resize(205, 229);
cont2.bg.resize(345, 229);
cont3.bg.resize(300, 80); 

[Axel Sartorius]

Hab mir die Werte mal tracen lassen:
Obwohl die Variable targetwidth je nach MC auch nach Start des enterFrames ihre unterschiedlichen Werte beibehält, werden die Werte der anderen Variablen an die Parameter des zuletzt gestarteten MC angeglichen.

Die MC bekommen folgende Parameter mit auf den Weg:

cont1.bg.resize(205, 229);
cont2.bg.resize(345, 229);
cont3.bg.resize(300, 80); 

Trace gibt mir dann folgendes aus:

cont1.bg: targetwidth=205 changewidth=280 zielWidth=300
cont2.bg: targetwidth=345 changewidth=280 zielWidth=300
cont3.bg: targetwidth=300 changewidth=280 zielWidth=300


hier nochmal die relevanten Skriptstellen:

MovieClip.prototype.resize = function (targetwidth, targetheight)
{
    
    with (this)
    {
        //Ausgangsgröße
        _visible = true;
        startWidth = _width;
        startHeight = _height;
        //Zielgröße
        zielWidth = targetwidth;
        zielHeight = targetheight;
        changeWidth = zielWidth - startWidth;
        changeHeight = zielHeight - startHeight;
        duration = 40;
        time = 0;
    }
        this.onEnterFrame  = function()
        {
            this._width = Math.easeOutCubic(time++, startWidth, changeWidth, duration);
            this._height = Math.easeOutCubic(time++, StartHeight, changeHeight, duration);
                if (time > duration)
                {
                delete this.onEnterFrame;
            }    
    }
} 

Bin ratlos...

[Axel Sartorius]

Eigentlich machen diese Selbstgespräche keinen Spass, ich hab's aber nichts destotrotz gelöst. Vielleicht wills ja der eine oder andere ebenfals Wissen. Der Haken lag natürlich am Scoping, war mir auch ziemlich schnell klar, nur wie sieht der richtige Scope aus? Hier isser:

MovieClip.prototype.resize = function (targetwidth, targetheight)
{
//Ausgangsgröße
this._visible = true;
this.startWidth = this._width;
this.startHeight = this._height;
//Zielgröße
this.zielWidth = targetwidth;
this.zielHeight = targetheight;
this.changeWidth = this.zielWidth - this.startWidth;
this.changeHeight = this.zielHeight - this.startHeight;
this.duration = 40;
this.time = 0;
    this.onEnterFrame  = function()
    {
        with (this)
               {
        
        _width = Math.easeOutCubic(time++, startWidth, changeWidth, duration);
        _height = Math.easeOutCubic(time++, StartHeight, changeHeight, duration);
              if (time > duration)
            {            
              delete onEnterFrame;
            }
        }
    }
}
//Aufruf:
cont1.bg.resize(205,229);
cont2.bg.resize(345, 229);
cont3.bg.resize(550, 80); 

Alles wird gut