Zurück   Flashforum > Aktuelles > Tutorials > Programmieren

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 02-03-2008, 12:49   #1 (permalink)
agedoubleju
Gast
 
Beiträge: n/a
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(hgalph);
            
moveTo(x1y1);
            
lineTo(x2y1);
            
lineTo(x2y2);
            
lineTo(x1y2);
            
lineTo(x1y1);
            
endFill();
            
        }
        else{
            
ls = (ls == undefined || ls == 0) ? 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(hgalph);
            
moveTo(x1y1);
            
lineTo(x2y1);
            
lineTo(x2y2);
            
lineTo(x1y2);
            
lineTo(x1y1);
            
endFill();
            
        }
        else{
            
ls = (ls == undefined || ls == 0) ? 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(hgalph);
            
moveTo(x1y1);
            
lineTo(x2y1);
            
lineTo(x2y2);
            
lineTo(x1y2);
            
lineTo(x1y1);
            
endFill();
            
        }
        else{
            
ls = (ls == undefined || ls == 0) ? 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); 

Geändert von agedoubleju (22-05-2008 um 21:25 Uhr)
  Mit Zitat antworten
Alt 02-03-2008, 13:19   #2 (permalink)
agedoubleju
Gast
 
Beiträge: n/a
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(urlobj);
    
    
//während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    
mclListener.onLoadProgress = function(target:MovieClipbytesLoaded:NumberbytesTotal: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(hgalph);
            
moveTo(x1y1);
            
lineTo(x2y1);
            
lineTo(x2y2);
            
lineTo(x1y2);
            
lineTo(x1y1);
            
endFill();
            
        }
        else{
            
ls = (ls == undefined || ls == 0) ? 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(urlobj);
    
    
//während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    
mclListener.onLoadProgress = function(target:MovieClipbytesLoaded:NumberbytesTotal: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(); 
  Mit Zitat antworten
Alt 02-03-2008, 13:33   #3 (permalink)
agedoubleju
Gast
 
Beiträge: n/a
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.easeNone01000.6true); 
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.easeNone01000.6true);

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

  Mit Zitat antworten
Alt 02-03-2008, 13:37   #4 (permalink)
agedoubleju
Gast
 
Beiträge: n/a
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(hgalph);
            
moveTo(x1y1);
            
lineTo(x2y1);
            
lineTo(x2y2);
            
lineTo(x1y2);
            
lineTo(x1y1);
            
endFill();
            
        }
        else{
            
ls = (ls == undefined || ls == 0) ? 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(urlobj);
    
    
//während des Ladens bspw. um Ladebalken o.ä. zu aktualisieren
    
mclListener.onLoadProgress = function(target:MovieClipbytesLoaded:NumberbytesTotal: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(objfcmx.transitions.easing.None.easeNonestartvalueendvaluedurationtrue);
    
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(); 
  Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
bilder laden, tutorial

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist aus.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


LinkBacks (?)
LinkBack zu diesem Thema: http://www.flashforum.de/forum/programmieren/bilder-mit-dynamischen-rahmen-per-preloader-laden-249405.html
Erstellt von Für Art Datum Hits
[FLASH!?] Auktionsgallerie per Flash selber gestallten/erstellen. - TweakPC Hardware Forum Dieses Thema Refback 25-08-2009 14:09 5


Alle Zeitangaben in WEZ +1. Es ist jetzt 22:10 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele