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();