04.04.2009 - Building AS 3 Flash Components - AS 3 Flash Komponenten entwickeln (1)

Weil es zu dem Thema nichts Richtiges gibt (oder habe ich es nicht gefunden? Für Tipps bin ich dankbar) fange ich mal damit an, eine einfache Komponente in AS 3 für Flash zu entwickeln.

Man kann es auf ein ganz einfaches Grundgerüst reduzieren. Wir bauen eine Komponente, die nur ein Rechteck zeichnet  und einen Button hineinstellt. Ein Klick auf den Button löscht die Komponente wieder von der Bühne.

 

1. Erstelle ein neues Flashdokument (AS3) und speicher es unter dem Namen SimpleComponent.fla. Zeichne ein Rechteck 100x100 Pixel in beliebiger Farbe, markiere es mit einem Doppelclick und mach es zu einem MovieClip-Symbol (F8 drücken) mit dem Namen SimpleComponent.

In das Feld "Klasse" gfehört der Name der Klasse: SimpleComponent.

2. Erstelle eine AS-Datei mit dem Namen SimpleComponent.as im gleichen Pfad wie die FLA und kopiere folgenden Code hinein:

package
{

    import flash.display.*;
    import flash.events.*;
    import com.skurrile.Drawing.DrawRect;
    import fl.controls.Button;
   
   
    public class SimpleComponent extends MovieClip   
    {

        private var _width:Number = 0;
        private var _height:Number = 0;

        private var _background:Sprite;

        /*
        * construct the class
        * and initialize it
        * create childrens
        * and draw interface
        */
       
        public function SimpleComponent()
        {
            init();
            createChildren();
            draw();
        }

        private function init():void
        {

            _width = width;
            _height = height;
            scaleX = 1;
            scaleY = 1;

            // remove bounding box
            removeChildAt(0);
        }

        private function createChildren():void
        {

            _background = new Sprite();

            var b:Button = new Button();
            b.setSize(80,25);
            b.move((_width/2) - 40,10);
            b.label = "Close";
           
            addEventListener(MouseEvent.CLICK, clickCloseButton);
           
            addChild(_background);
            addChild(b);
        }

        protected function draw():void
        {

            var n = new DrawRect(_background);
            n.width         = _width;
            n.height         = _height;
            n.gradient         = false;
            n.fillColor     = 0x6644A3;
            n.lineColor     = 0x444444;
            n.lineThickness = 1;
            n.radius         = 8;
            n.drawSolid();


        }
       
        private function clickCloseButton(event:Event):void
        {
            for(var i = 0; i < this.parent.numChildren; i++)
            {
                if(this.parent.getChildAt(i) == this)
                {
                    this.parent.removeChildAt(i);
                    break;
                }
            }
        }

        public function setSize(w:Number, h:Number):void
        {
            _width = w;
            _height = h;
            draw();
        }

    }
}

 (Die entsprechende Klasse DrawRect muss natürlich auch vorhanden sein, ist im Tutorial Download aber enthalten)

3. Das Bedienfeld Komponenten öffnen und die Button-Komponente dem Dokument (der Bibliothek) hinzufügen. 

4. Jetzt den MovieClip SimpleComponent in der Bibliothek rechts anklicken und "Komponentendefinition..." wählen.

Häkchen bei Anzeige im Komponentenbedienfeld, Klasse auch hier eintragen und fertig. Damit ist die Komponente schon erstellt, jetzt könnte man noch testen mit Strg-Enter und schauen, ob sich irgendwo Fehler eingeschlichen haben und ob der Button auch funktioniert.

 

5. Jetzt wieder rechts auf SimpleComponent in der Bibliothek klicken und "SWC-Datei exportieren..."  auswählen. Die SWC unter ...Lokale Einstellungen/Anwendungesdaten/Adobe/Flash CS3/de/Configuration/Components/ speichern, dass Bedienfeld Komponenten nach dem Exportieren erneut öffnen und den kleinen Pfeil rechts oben klicken - Neu Laden wählen. Die SimpleComponent-Komponente ist da:

 

Download der Dateien hier:
Buildingv3Components.zip 544.21 KB

 

 

Kommentar von Tester am 15.07.2009
An sich ne gute Sache, ich frag mich nur, ob das auch dauerhaft brauchbar bleibt.