09.04.2009 - Building AS 3 Flash Components - AS 3 Flash Komponenten entwickeln (2)

Wer Teil 1 gelesen hat (und vielleicht ausprobiert) hat gesehen, dass man eine einfache Komponente schnell gebaut hat. Aber eigentlich ist das gar keine Komponente, sondern nur ein MovieClip der als kompilierter Clip ins Komponentenverzeichnis geschoben wurde. Sehen wir also weiter, wie eine richtige Flash Version 3 Komponente funktioniert.

In diesem Tutorial wird eine dynamische Popup-Window Komponente gebaut, wie sie als Version 2 Komponente von Flash 8 her bekannt war, jetzt aber nicht mehr zu den UserInterface Komponenten gehört.

Für dieses Tutorial benötigt man eine AS-Editor, Adobe Flash CS3 und die angehängten Dateien. 

Buildingv3Components_teil2.zip 533.33 KB
 

Wie sind Version 3 Komponenten aufgebaut? 

Die Komponenten in Version 3 sind etwas anders aufgebaut als diejenigen der Verison 2. AS 3.0 - Komponenten erben von der Klasse Sprite und nicht mehr von MovieClip, besitzen aber trozdem (wie auch die V2 Components) zwei Frames. Im ersten ist die BoundingBox, jetzt oft als Avatar der Komponente bezeichnet, in Frame 2 sind alle anderen assets, die die Komponente benötigt, z.B. Subkomponenten.
Wichtig: alle assets "Exportieren" aber nicht die Option "In erstes Bild exportieren" anklicken. Alle assetes sowie derAvatar bekommen keine Instanznamen und wenn Komponenten zu den assets gehören, bleiben alle Parameter auf 'default'!
Ein stop() ist nicht notwendig, da ein Sprite ja keine Zeitleiste abspielt. Werfen wir einen Blick in die Klasse, die zur Komponente gehört:

package com.skurrile.Window
{

    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import com.skurrile.Drawing.DrawRect;
    import fl.core.UIComponent;
 
    public class Window extends UIComponent   
    {
       
        protected var _background:Sprite;
       
        public function Window()
        {

        }

 

Hier sehen wir jetzt den Kopf einer Komponenten-AS Datei. Im Gegensatz zu Teil 1 erbt hier unsere Komponente von UIComponent und damit alle notwendigen Eigenschaften und Methoden.
Der Konstruktor bleibt in diesem Beispiel leer - es gibt nichts, was hier getan werden muss. Weiter gehts mit Methoden, die dem geneigten AS 2.0-Programmierer bekannt vorkommen:

 

 

        override protected function configUI():void
        {
            // Immer: super.configUI()
            super.configUI();
           
            _background = new Sprite();
            addChild(_background);
           
            var b:CloseButton = new CloseButton();
            b.move(width - 22,2);
            b.addEventListener(MouseEvent.CLICK, clickCloseButton);
            addChild(b);
           
           
        }

        override protected function draw():void
        {

            var n = new DrawRect(_background);
            n.width = width;
            n.height = height;
            n.gradient = false;
            n.fillColor = 0xFFFFFF;
            n.lineColor = 0x444444;
            n.lineThickness = 1;
            n.drawSolid();
           
            // Am Ende super.draw() aufrufen
            super.draw();
        }
    }
}

 

 configUI wird vom fl.core.UIComponent Konstruktor aufgerufen, nachdem die style und die invalidation Infrastruktur initialisiert worden sind. In dieser Funktion werden alle Display-Objekte erstellt und der Dipslayliste angefügt.
draw() erledigt das Layout. Anhand der durch den Avatar (oder BoundingBox) festgelegten Größe wird jetzt in diesem Beispiel ein Rahmen gezeichnet und gefüllt. Außerdem wird draw() bei jeder Größenänderung und allen Aktionen, die ein Neuzeichnen erfordern, aufgerufen.

Damit steht das Grundgerüst einer lauffähigen Flash Component. Um das Tutorial bis hierhin nachzubauen, bitte folgende Schritte ausführen:

• Eine neue Flash Datei öffnen (Actionscript 3.0).
• Zwei Ebenen anlegen, 'assets' und 'avatar'.
• In Frame 1 der Ebene 'avatar' ein Rechteck ohne Füllung zeichnen (100x100 Pixel), Linienstärke 'Haarlinie'. Das ist ganz wichtig, weil sonst beim skalieren des Avatars in der späteren Komponente die Linienstärke mit skaliert wird. Das würde in der Authoringumgebung eine unschöne Gechichte.
• In Frame 1 der Ebene 'assets' und Frame 2 der Ebene 'avatar' ein leeres Schlüsselbild anlegen.
• In Frame 2 der Ebene 'assets' alle notwendigen Subkomponenten, z.B. ListBox, Button oder TileList hineinkopieren.
• Eine neue AS-Datei im favorisierten Editor anlegen und obiges Skript hineinkopieren. (Wichtig: auch die skurrile.Drawing.DrawRect ist natürlich erforderlich)
• Die Bibliothek öffnen, Komponentenmovieclip rechts klicken und 'Komponentendefinition' aufrufen.
  

In diesem Dialogfenster folgende EInstellungen vornehmen:

Nach Bestätigen mit 'OK' dauert es eine Weile, bis sich das Fenster wieder schließt. Flash verarbeitet die AS-Dateien und meldet möglicherweise Fehler. Wenn nicht, ist alles in Ordnung und man kann die Komponente testen mit 'STRG-Enter'.

Die Actionscript 3.0-Einstellungen öffnen und folgende Einstellungen vornehmen:

Zusätzlich zu dem angegeben Klassenpfad für die fl.core.UIComponent ist natürlich auch noch der Pfad zu com.skurrile erforderlich, wenn die Dateien nicht in das gleiche Verzeichnis wie die FLA kopiert worden sind.

Im dritten Teil des Tutorials werde ich auf die Integration der Invalidate Infrastruktur eingehen.