Beispiel 11: Ein Bild nachladen und zentrieren mit Rahmen und Schatten in AS3 Anschauen Schritt 1: In AS3 ist die Vorgehensweise ein wenig anders. Wir lagern zuerst einige Funktionen in eigene Klassen aus, den Anfang macht die Shadow-Funktion, die den Schatten um das Bild erstellen soll. Eine entsprechende Klasse könnte folgendermaßen aussehen:
PHP-Code:
//shadow.as
package
{
import flash.display.Sprite;
import flash.filters.DropShadowFilter;
public class Shadow extends Sprite{
public function Shadow(obj:*){
var distance:uint = 0;
var angleInDegrees:uint = 90;
var color:uint = 0x000000;
var alpha:Number = .9;
var blurX:uint = 8;
var blurY:uint = 8;
var strength:uint = 1;
var quality:uint = 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 Package ist im Grunde genommen nur ein Folder. Mit Packages hat man aber auch die Möglichkeit, Klassen mit gleichen Bezeichnern in verschiedenen Packages unterzubringen. Danach werden verschiedene Klassen importiert, die im Script später benötigt werden.
"class" ist der Typ der Klasse und shadow der Klassenbezeichner. Auch wenn ihr von der objektorientierten Programmierung (OOP) noch nicht viel gehört habt, mit Klassen habt ihr auch schon in AS1/2 gearbeitet. Denn die vielen Flashobjekte wie MovieClips u.ä. sind auch Klassen.
Man unterscheidet zwischen den statischen Klassen wie bspw. Math und den nichtstatischen wie bspw. LoadVars. Da man nicht direkt mit einer Klasse arbeiten kann, sondern nur mit einer "Kopie", wird diese Kopie mit new instanziiert. Über den Instanznamen kann dann auf die "Kopie" zugreifen, bspw.:
PHP-Code:
var meinMC:MovieClip();
meinMC = new MovieClip();
Bei statischen Klassen wie Math wird das new weggelassen:
PHP-Code:
trace("Math.PI="+Math.PI);//gibt: Math.PI=3.141592653589793
Ohne tiefer in die OOP einzugehen sei hier noch der Hinweis gestattet, dass statische Klassen nicht vererbt werden können, nichstatische schon.
Zurück zum Beispiel: in die Klasse ist nur eine Konstruktorfunktion eingebettet, die als Parameter das Objekt übergeben bekommt, an das das Schatten-Array angehängt werden soll. Die weiteren Parameter für den DropShadowFilter könnt ihr in der Flash-Hilfe nachlesen.
Schritt 2: Die Funktion für das Rechteck wird auch ausgelagert. Hier habe ich mal ein Rechteck mit der Shape-Klasse erstellt. Es lässt sich aber natürlich auch eine Oldschool-Variante mit der Zeichen-API erstellen.
PHP-Code:
//Rectangle.as
package {
import flash.display.*;
public class Rectangle extends Sprite {
public function Rectangle(container:Sprite,wd:Number,ht:Number,color:uint,alpha:Number,ln:Number,fill:Boolean,shadw:Boolean=false ) {
//neues Container-Objekt erstellen
var sprite:Sprite = new Sprite();
//Shape-Instanz erstellen
var shape:Shape = new Shape();
//und in die Display List hängen
addChild(shape);
//Linienstil und Farben setzen
shape.graphics.lineStyle(ln, color, alpha);
if(fill){
shape.graphics.beginFill(color);
}
//ein Rechteck im Shape zeichnen
shape.graphics.drawRect(0,0,wd,ht);
shape.graphics.endFill();
//das Shape ins Sprite hängen
sprite.addChild(shape);
sprite.alpha = alpha;
//das Sprite mit dem Shape ins Container-Objekt hängen
container.addChild(sprite);
//falls ein Schatten gesetzt werden soll die Shadow-Klasse instanziieren
if(shadw){
var shadow:Shadow = new Shadow(sprite);
}
}
}
}
Schritt 3: Als nächstes benötigen wir eine Funktion, die das Bild laden soll und ggf. mit einem Preloader überprüft, ob das Laden beendet ist. Wir lagern diese Funktion in die Klasse "Imageladen" aus:
PHP-Code:
//ImageLaden.as
package {
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import Rectangle;
public var loader:Loader;
public var container:Sprite;
public var border:Boolean;
public var border_padding:uint = 5;
public var border_spr:Sprite;
public var startX:uint;
public var startY:uint;
public var id_internal:uint;
public function ImageLaden(pictURL:String,con:Sprite,br:Boolean=false) {
// Falls kein Container-Objekt übergeben wurde, wird jetzt eines erstellt
if(!con){
container = new Sprite();
//zuerst transparent
container.alpha = 0;
//und in die Display List hängen
addChild(container);
}
else{
this.container = con;
}
//Rahmen oder nicht...
border = br;
//mit der Loader-Klasse das Bild nachladen
loader = new Loader();
addChild( loader );
var pictURLReq:URLRequest = new URLRequest(pictURL);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadInit);
// jetzt das Laden starten...
loader.load( pictURLReq );
}
Die Loader-Klasse funzt wie die MovieClipLoader-Klasse. Über einen COMPLETE-Event können wir eine Funktion starten, die uns mitteilt, wenn das Laden beendet wurde. Erst dann werden Rahmen und Schatten gesetzt:
PHP-Code:
/**
* Bild ist geladen, jetzt noch Rahmen und Schatten setzen
*/
private function loadInit(event:Event):void {
if(border){
border_spr = new Sprite();
border_spr.x = border_padding * (-1);
border_spr.y = border_padding * (-1);
container.addChild(border_spr);
var wd:uint = loader.width + (2*border_padding);
var ht:uint = loader.height + (2*border_padding);
var rechteck:Rectangle = new Rectangle(border_spr,wd,ht,0xFFFFFF,1.0,1,true,true);
}
container.addChild(loader);
dispatchEvent(new Event("imageLadenFertig"));
}
"dispatchEvent" ist eine nette neue Funktion in AS3. Damit können nämlich eigene Customevents erstellt und über Listener abgefangen werden.
Schritt 4: Wir setzen in die Klasse noch einige Funktionen, die bspw. auf die Transparenz des Bildes einwirken und dadurch Faderfunktionen bereitstellen. Das wird hier durch Tweens erreicht ähnlich wie in den vorherigen AS2-Beispielen:
PHP-Code:
public function alpha_transition(richtung:String):void{
var tw:Tween;
if(richtung == "fadeIn"){
tw = new Tween(container, "alpha", None.easeInOut, 0, 1, 0.6, true);
//addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}
else if(richtung == "fadeOut"){
tw = new Tween(container, "alpha", None.easeInOut, 0, 1, 0.6, true);
//addEventListener(Event.ENTER_FRAME, onEnterFrameHandler2);
}
}
Wie die gesamte Klasse ausseht, könnt ihr euch im getoppten Beispiel-RAR anschauen.
Schritt 5: Wir erstellen eine Dokumentenklasse, die das ganze starten soll. Den Klassenbezeichner "Bildergalerie" tragen wir im Eigenschaftenbedienfeld bei DocumentClass ein.
PHP-Code:
//Bildergalerie.as
package {
import ImageLaden;
import flash.display.*;
import flash.events.*;
public class Bildergalerie extends Sprite
{
public var myImageMC:MovieClip;
public var pic:ImageLaden;
public var zielcontent:* = this;//das Sprite
//Konstruktor
public function Bildergalerie()
{
//die Folgefunktion aufrufen
init();
}
private function init():void
{
//einen leeren MC als Container-MC erstellen
myImageMC = new MovieClip();
//zuerst transparent setzen
myImageMC.alpha = 0;
//den Container-MC in das aktuelle Sprite hängen
zielcontent.addChild(myImageMC);
//jetzt die ImageLaden-Klasse instanziieren und ein Image laden
pic = new ImageLaden("pics-gr/feuerschiff-weser.jpg",myImageMC,true);//mit Rahmen
//dieser Listener soll den Event abfangen, den wir über dispatchEvent in der Klasse gesetzt haben
pic.addEventListener("imageLadenFertig",imageLadenFertigHandler);
}
//hier die Funktion, die gestartet wird, wenn das Laden abgeschlossen ist
private function imageLadenFertigHandler(event:Event):void
{
trace("Bild geladen");
//jetzt können wir auf die Größe des Images zugreifen und in der Bühne mittig zentrieren
myImageMC.x = (stage.stageWidth - myImageMC.width)/2;
myImageMC.y = (stage.stageHeight - myImageMC.height)/2;
//und zum Schluss wird das geladene Bild eingefadet
pic.alpha_transition("fadeIn");
}
}
}