Bilder mit dynamischen Rahmen per Preloader laden

Dieses Tutorial zeigt einige wichtige grundlegende Flash-Techniken, wie z.B.
- Nachladen von externen Bildern
- Preloader mit der MovieClipLoader-Klasse
- dynamisches Zeichnen mit der Flash Zeichen-API
- gescriptete Animationen mit der Tween- und Transitionsklasse
- einfache Schatten

Ziel: einen statischen Bilderrahmen erstellen, ein externes Bild nachladen, den Rahmen dynamisch an die Bildgröße anpassen und das dazu über eine Tween-Animation. Und um das ganze noch ein wenig aufzuhübschen, wird dem Bilderrahmen noch ein Dropshadow spendiert.

Voraussetzungen: leere Bühne, leere Bibliothek, mind. Flash 8, Teile können aber auch mit MX2004 erstellt werden

Anschauen
Beispiel downloaden (Flash CS3)

Schritt 1: wir beginnen damit, ein statisches Rechteck mit der Flash-Zeichen-API zu erstellen. Ich habe mir dazu vor einiger Zeit mal eine dynamische Funktion erstellt, die ich immer wieder auch in anderen Projekten verwenden kann:

PHP-Code:

//**********************************************************************************************************
//ein Rechteck mit der Zeichen-API zeichnen

//Parameter:
//obj:MovieClip -> MC, in den das Rechteck gezeichnet wird
//hg:String -> hexadezimaler String für die Hintergrundfarbe

//x1:Number -> linke obere Ecke
//x2:Number -> rechte obere Ecke
//y1:Number -> linke untere Ecke
//y2:Number -> rechte untere Ecke

//gef:Number -> 1 für gefülltes Rechteck, 0 oder andere für ungefülltes Rechteck (nur Rahmen)

//ls:Number -> Linienstärke für Rahmen

//alph:Number ->Transparenzwert, 100=nicht transparent, 0=transparent

//Aufruf gefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,0,100);

//Aufruf ungefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,2,0);

function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}

//Zum Testen:

var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);

//Hintergrundfarbe für die Bühne bspw. 0xCCCCCC, sonst sieht man das Rechteck nicht
//weißes Rechteck zeichnen
_root.rechteck(border_mc,"0xFFFFFF",0,400,0,200,1,0,100); 


Schritt 2: wir positionieren das weiße Rechteck, das später unser Bilderrahmen werden soll zentriert auf die Bühne:

PHP-Code:

//
//**********************************************************************************************************
//ein Rechteck mit der Zeichen-API zeichnen

//Parameter:
//obj:MovieClip -> MC, in den das Rechteck gezeichnet wird
//hg:String -> hexadezimaler String für die Hintergrundfarbe

//x1:Number -> linke obere Ecke
//x2:Number -> rechte obere Ecke
//y1:Number -> linke untere Ecke
//y2:Number -> rechte untere Ecke

//gef:Number -> 1 für gefülltes Rechteck, 0 oder andere für ungefülltes Rechteck (nur Rahmen)

//ls:Number -> Linienstärke für Rahmen

//alph:Number ->Transparenzwert, 100=nicht transparent, 0=transparent

//Aufruf gefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,0,100);

//Aufruf ungefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,2,0);

function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}
//
//**********************************************************************************************************
//

//Startwerte festlegen, Breite und Höhe von 200 Pixeln
var start_width:Number = 200;
var start_height:Number = 200;

//in der Bühnenmitte positionieren
var start_posX:Number = ((Stage.width - start_width)/2);
var start_posY:Number = ((Stage.height - start_height)/2);

//leere MCs erstellen und positionieren
var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
main_mc._x = start_posX;
main_mc._y = start_posY;

var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = main_mc.createEmptyMovieClip("image_mc",10);
image_mc._alpha = 0;//zuerst verstecken

//weißes Rechteck zeichnen
_root.rechteck(border_mc,"0xFFFFFF",0,start_width,0,start_height,1,0,100); 


Die Breite und Höhe der Bühne lässt sich mit Stage.width und Stage.height auslesen, wenn man die Werte durch 2 teilt, erhält man genau die Bühnenmitte. Von dieser Bühnenmitte müssen wir aber noch den halben Wert der Breite und Höhe des zu positionierenden MCs abziehen. Das erledigt dieses Script:

PHP-Code:

var start_posX:Number = ((Stage.width - start_width)/2);
var start_posY:Number = ((Stage.height - start_height)/2); 


Statt start_width und start_height kann man auch die Höhe und Breite eines beliebigen MCs angeben und kann diese Formel dann in anderen Scripten weiterverwenden.

Schritt 3: wie versprochen, setzen wir auf das Rechteck noch einen DropShadowFilter, damit wir etwas mehr "Tiefe" haben:

PHP-Code:

import flash.filters.DropShadowFilter;
//
//**********************************************************************************************************
//

function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
} 


Es steht euch frei, mit den Parametern herumzuspielen. Die vielen Werte sind am Anfang etwas verwirrend, aber es werden meist auch nur wenige benötigt. Mein Tipp: schaut euch die Infos zu den Parametern mal in der Flash-Hilfe an.

Im Prinzip wird ein Array mit allen wichtigen Filterwerten übergeben. Diese Werte legen z.B. fest, mit welcher Farbe und Intensivität der Filter gesetzt werden soll. Wichtig ist die Zeile

PHP-Code:

obj.filters = filterArray; 


Damit übergeben wir dem Objekt (also hier dem Rechteck-MC) die Filterliste. Einfach mal testen:

PHP-Code:

import flash.filters.DropShadowFilter;
//
//**********************************************************************************************************
//

function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}
//
//**********************************************************************************************************
//ein Rechteck mit der Zeichen-API zeichnen

//Parameter:
//obj:MovieClip -> MC, in den das Rechteck gezeichnet wird
//hg:String -> hexadezimaler String für die Hintergrundfarbe

//x1:Number -> linke obere Ecke
//x2:Number -> rechte obere Ecke
//y1:Number -> linke untere Ecke
//y2:Number -> rechte untere Ecke

//gef:Number -> 1 für gefülltes Rechteck, 0 oder andere für ungefülltes Rechteck (nur Rahmen)

//ls:Number -> Linienstärke für Rahmen

//alph:Number ->Transparenzwert, 100=nicht transparent, 0=transparent

//Aufruf gefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,0,100);

//Aufruf ungefülltes Rechteck: //_root.rechteck(obj,farbe,0,1024,0,768,1,2,0);

function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}
//
//**********************************************************************************************************
//

//Startwerte festlegen
var start_width:Number = 200;
var start_height:Number = 200;

//in der Bühnenmitte positionieren
var start_posX:Number = ((Stage.width - start_width)/2);
var start_posY:Number = ((Stage.height - start_height)/2);

//leere MCs erstellen und positionieren
var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
main_mc._x = start_posX;
main_mc._y = start_posY;

var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = main_mc.createEmptyMovieClip("image_mc",10);
image_mc._alpha = 0;//zuerst verstecken

//weißes Rechteck zeichnen
_root.rechteck(border_mc,"0xFFFFFF",0,start_width,0,start_height,1,0,100);

//und dem Rechteck einen Schatten geben
shadows(border_mc); 


Schritt 4: um den Bilderrahmen dynamisch an die Bildergröße anzupassen, müssen wir zuerst die Höhe und Breite des nachzuladenden Bildes ermitteln.

Nach einem Ladebefehl in Flash ist aber nicht sofort in der nächsten Mikrosekunde das Bild nachgeladen, gerade über Internet kann das Nachladen beliebig lange dauern oder im worst-case ganz abbrechen. Wir benötigen also eine Funktion, die das Laden überwacht und uns danach eine Rückmeldung gibt. Diese Funktion nennt man Preloader.

Ein Preloader kann sowohl unsichtbar im Hintergrund wirken, aber auch mit entsprechenden Text- oder Bildinformationen Hinweise zum Ladeverhalten geben. Einfache Preloader kann man bspw. mit kontinuierlichen onEnterFrame-Events oder Intervallen erzeugen. Seit Flash 7 steht aber auch die MovieClipLoader-Klasse zur Verfügung und ab CS3 mit AS3 kann man auch die Loader-Klasse nutzen.

Ich möchte hier mal ein Beispiel mit der MovieClipLoader-Klasse zeigen (zum Testen müsst ihr ein Bild in dasselbe Verzeichnis wie die swf legen):

PHP-Code:

//
//**********************************************************************************************************
//
function bildladen(obj:MovieClip,url:String){
        
    //Lauscher-Objekt erstellen
    var mclListener:Object = new Object();
    
    //MovieClipLoader-Instanz erstellen
    var mcLoader = new MovieClipLoader();
    
    //Lauscher auf die Instanz setzen
    mcLoader.addListener(mclListener);
    
    //Bild nachladen
    mcLoader.loadClip(url, obj);
    
    //während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
        trace(target + ".onLoadProgress with " + bytesLoaded + " bytes of " + bytesTotal);
        var prozent = Math.round(bytesLoaded*100/bytesTotal);
       _root.ausgabe_mc.ausgabe_txt.text = ""+prozent+" %"; 
    }

    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        _root.ausgabe_mc.removeMovieClip();//Preloader-Anzeige löschen
        
        
    }  
}
//
//**********************************************************************************************************
//

//leere MCs erstellen und positionieren
var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
main_mc._x = start_posX;
main_mc._y = start_posY;

var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = main_mc.createEmptyMovieClip("image_mc",10);

//Preloader-MC und Textfeld erstellen
var ausgabe_mc:MovieClip = this.createEmptyMovieClip("ausgabe_mc",100);
ausgabe_mc._x = Math.round((Stage.width/2)-10);
ausgabe_mc._y = Math.round((Stage.height/2)-10);
var ausgabe_txt:TextField = ausgabe_mc.createTextField("ausgabe_txt",1,0,0,100,25);
ausgabe_txt.text = "0 %";

//und jetzt ein Bild laden
bildladen(image_mc,"meinBild.jpg"); 


Der Listener (Lauscher) funktioniert dabei wie eine im Hintergrund unsichtbar arbeitende Alarmanlage: sobald der Loader Daten erhält, schaut der Listener nach, ob er angeflanschte Funktionen starten muss. Diese Funktionen können bspw. den Ladefortschritt (LoadProgress) mit Daten beliefern.

Wichtig ist dabei auch die onLoadInit-Funktion, die uns meldet, dass sowohl das Laden beendet wurde, aber auch der entsprechende Container-MC mit Daten befüllt wurde. Denn jetzt erst können wird die Breite und Höhe des gefüllten MCs (und damit natürlich auch der Grafik) ermitteln.

Schritt 5: jetzt bringen wir etwas Dynamik in unser Script. Der Bilderrahmen soll sich schließlich unserem Bild in Höhe und Breite anpassen. Außerdem macht es natürlich Sinn, ein paar Pixel Rand zu lassen:

PHP-Code:

import mx.transitions.*;
import mx.transitions.easing.*;
import flash.filters.DropShadowFilter;

//
//**********************************************************************************************************
//

function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}
//
//**********************************************************************************************************
//ein Rechteck mit der Zeichen-API zeichnen
//Aufruf gefülltes Rechteck: _root.rechteck(obj,farbe,0,1024,0,768,1,0,100);
//Aufruf ungefülltes Rechteck: _root.rechteck(obj,farbe,0,1024,0,768,1,2,0);
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}

//
//**********************************************************************************************************
//
function bildladen(obj:MovieClip,url:String){
        
    //Lauscher-Objekt erstellen
    var mclListener:Object = new Object();
    
    //MovieClipLoader-Instanz erstellen
    var mcLoader = new MovieClipLoader();
    
    //Lauscher auf die Instanz setzen
    mcLoader.addListener(mclListener);
    
    //Bild nachladen
    mcLoader.loadClip(url, obj);
    
    //während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
        trace(target + ".onLoadProgress with " + bytesLoaded + " bytes of " + bytesTotal);
        var prozent = Math.round(bytesLoaded*100/bytesTotal);
       _root.ausgabe_mc.ausgabe_txt.text = ""+prozent+" %"; 
    }

    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        _root.ausgabe_mc.removeMovieClip();//Preloader-Anzeige löschen
        //jetzt können wir über mc._width und mc._height die tatsächliche Größe des MCs und des Bildes ermitteln
        _root.target_width = mc._width + 10;
        _root.target_height = mc._height + 10; 
        
        //in der Bühnenmitte positionieren
        _root.target_posX = ((Stage.width - _root.target_width)/2);
        _root.target_posY = ((Stage.height - _root.target_height)/2);
        
        mc._x = 5;//5 Pixel Rand lassen
        mc._y = 5;
        
        _root.main_mc._x =_root.target_posX;
        _root.main_mc._y =_root.target_posY;
        
        _root.border_mc._width=_root.target_width;
        _root.border_mc._height=_root.target_height;
    }  
}

//
//**********************************************************************************************************
//
//Startwerte festlegen
var start_width:Number = 200;
var start_height:Number = 200;

//in der Bühnenmitte positionieren
var start_posX:Number = ((Stage.width - start_width)/2);
var start_posY:Number = ((Stage.height - start_height)/2);

//leere MCs erstellen und positionieren
var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
main_mc._x = start_posX;
main_mc._y = start_posY;

var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = main_mc.createEmptyMovieClip("image_mc",10);


//weißes Rechteck zeichnen
_root.rechteck(border_mc,"0xFFFFFF",0,start_width,0,start_height,1,0,100);

//und dem Rechteck einen Schatten geben
shadows(border_mc);

//Preloader-MC und Textfeld erstellen
var ausgabe_mc:MovieClip = this.createEmptyMovieClip("ausgabe_mc",100);
ausgabe_mc._x = Math.round((Stage.width/2)-10);
ausgabe_mc._y = Math.round((Stage.height/2)-10);
var ausgabe_txt:TextField = ausgabe_mc.createTextField("ausgabe_txt",1,0,0,100,25);
ausgabe_txt.text = "0 %";

//und jetzt ein Bild laden
bildladen(image_mc,"meinBild.jpg");//460*307

//
//**********************************************************************************************************
//

this.stop(); 


Schritt 6: Bild und Rahmen sind nun zwar geladen und dynamisch positioniert, aber das ganze sieht noch immer recht statisch aus. Um die Darstellung ein wenig aufzulockern, werden wir die dynamische Anpassung des Rahmens über gescriptete Tweens vornehmen.

Die Tween- und Transitionsklasse gibt uns zahlreiche Bewegungsformeln an die Hand, mit der wir Zustandsänderungen einfach darstellen können. Schauen wir uns dazu mal einen einfachen Funktionsaufruf an:

PHP-Code:

import mx.transitions.*;

var tw = new Tween(meineInstanz, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true); 


Hier wird die Transparenz (also die _alpha-Eigenschaft) eines MCs mit Instanznamen "meineInstanz" verändert. Und zwar wird dazu die Transitions-Bewegungsformel des "easing.None.easeNone" genutzt, ein einfacher linearer Verlauf. Es lassen sich auch Transitions setzen, die beim Start und/oder zum Ende stärker wirken und damit Wabber-Effekte und ähnliches erzeugen.

Als weitere Parameter werden der Alpha-Startwert von 0 und der Endwert von 100 übergeben, sowie die Animations-Zeit von 0,6 Sekunden. Der letzte Parameter (true) bedeutet, dass wir den Tween über ein Intervall laufen lassen, statt über einen onEnterFrame-Event und damit die Animation von der voreingestellten Framerate abzukoppeln.

Wichtig ist noch, dass wir das Ende der Animation abfangen können, das funktioniert bspw. mit einem onMotionFinished:

PHP-Code:

import mx.transitions.*;

//meineInstanz einfaden
var tw = new Tween(meineInstanz, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);

//beendet
tw.onMotionFinished = function() {
   trace("ich habe fertig...");
} 


Schritt 7: wir verbinden jetzt unser vorhandenes Script mit den Tweens. Im Beispiel wird jetzt zuerst die Breite und x-Position des Rahmens verändert. Erst nach Ablauf dieser Animationen wird auch die Höhe und y-Position verändert.

Damit das nachgeladene Bild erst nach den Transitions gezeigt wird, setzen wir die _alpha-Eigenschaft des Bild-MCs zuerst auf 0. Erst wenn die Animationen durchlaufen wurden, wird das Bild gezeigt:

PHP-Code:

import mx.transitions.*;
import flash.filters.DropShadowFilter;

//
//**********************************************************************************************************
//

function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}
//
//**********************************************************************************************************
//ein Rechteck mit der Zeichen-API zeichnen
//Aufruf gefülltes Rechteck: _root.rechteck(obj,farbe,0,1024,0,768,1,0,100);
//Aufruf ungefülltes Rechteck: _root.rechteck(obj,farbe,0,1024,0,768,1,2,0);
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}
//
//**********************************************************************************************************
//
function abschluss(){
    if(_root.weiter == true){
        clearInterval(_root.intervalID);
        _root.weiter = false;
        
        //dann _y und _height
        _root.tweenit(_root.main_mc,"_y",_root.main_mc._y,_root.target_posY,0.4,0);
        _root.tweenit(_root.border_mc,"_height",_root.border_mc._height,_root.target_height,0.4,2);
    }
}
//
//**********************************************************************************************************
//
function bildladen(obj:MovieClip,url:String){
        
    //Lauscher-Objekt erstellen
    var mclListener:Object = new Object();
    
    //MovieClipLoader-Instanz erstellen
    var mcLoader = new MovieClipLoader();
    
    //Lauscher auf die Instanz setzen
    mcLoader.addListener(mclListener);
    
    //Bild nachladen
    mcLoader.loadClip(url, obj);
    
    //während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
        trace(target + ".onLoadProgress with " + bytesLoaded + " bytes of " + bytesTotal);
        var prozent = Math.round(bytesLoaded*100/bytesTotal);
       _root.ausgabe_mc.ausgabe_txt.text = ""+prozent+" %"; 
    }

    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        _root.ausgabe_mc.removeMovieClip();//Preloader-Anzeige löschen
        
        _root.target_width = mc._width + 10;
        _root.target_height = mc._height + 10; 
        
        //in der Bühnenmitte positionieren
        _root.target_posX = ((Stage.width - _root.target_width)/2);
        _root.target_posY = ((Stage.height - _root.target_height)/2);
        
        //zuerst _x und _width tweenen, dann _y und _height
        tweenit(_root.main_mc,"_x",_root.main_mc._x,_root.target_posX,0.4,0);
        tweenit(_root.border_mc,"_width",_root.border_mc._width,_root.target_width,0.4,1);
        
        mc._x = 5;
        mc._y = 5;
        //Ende der ersten beiden Animationen abwarten:
        _root.intervalID = setInterval(_root.abschluss,40);
        
    }  
}
//
//**********************************************************************************************************
//
function tweenit(obj:MovieClip,fc:String,startvalue:Number,endvalue:Number,duration,ff:Number){
    var tw = new Tween(obj, fc, mx.transitions.easing.None.easeNone, startvalue, endvalue, duration, true);
    tw.onMotionFinished = function() {
        //trace("ff="+ff);
        if(ff == 1){//weiter
            _root.weiter = true;
            
        }
        else if(ff == 2) {//ganz durch, Bild zeigen
            _root.image_mc._alpha = 100;
        }
    }    
}
//
//**********************************************************************************************************
//
//Startwerte festlegen
var start_width:Number = 200;
var start_height:Number = 200;

//in der Bühnenmitte positionieren
var start_posX:Number = ((Stage.width - start_width)/2);
var start_posY:Number = ((Stage.height - start_height)/2);

//leere MCs erstellen und positionieren
var main_mc:MovieClip = this.createEmptyMovieClip("main_mc",1);
main_mc._x = start_posX;
main_mc._y = start_posY;

var border_mc:MovieClip = main_mc.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = main_mc.createEmptyMovieClip("image_mc",10);
image_mc._alpha = 0;//zuerst verstecken

//weißes Rechteck zeichnen
_root.rechteck(border_mc,"0xFFFFFF",0,start_width,0,start_height,1,0,100);

//und dem Rechteck einen Schatten geben
shadows(border_mc);

//Preloader-MC und Textfeld erstellen
var ausgabe_mc:MovieClip = this.createEmptyMovieClip("ausgabe_mc",100);
ausgabe_mc._x = Math.round((Stage.width/2)-10);
ausgabe_mc._y = Math.round((Stage.height/2)-10);
var ausgabe_txt:TextField = ausgabe_mc.createTextField("ausgabe_txt",1,0,0,100,25);
ausgabe_txt.text = "0 %";

//und jetzt ein Bild laden
bildladen(image_mc,"feuerschiff-weser.jpg");//460*307

//
//**********************************************************************************************************
//

this.stop();