Komponenten AS3

Komponenten Referenzen bei Adobe.

• Button Komponente
• Radio Button
• Numeric Stepper
• Textformat
• Checkbox
• Color Picker
• ScrollPane
• Combo Box
• Listbox
• Galerie mit Listbox und Slider Komponente
• Slider Komponente
• Cell Renderer (Komponenten Style)

Button Komponente

Radio Button

Über die Eigenschaft groupName, kann man den RadioButtonGroup Namen ermitteln.

Numeric Stepper

Text Format

Hat man eine Komponente auf die Bühne geschoben, werden die einzelnen Elemente in die interne Bibliothek der fla Datei kopiert und können dort verändert werden. Selbstverständlich kann man auch die Instanzen doppelt anklicken, um in den Bearbeitungsmodus der Movieclipelemente aus denen die Komponente besteht, zu gelangen.

Außerdem kann man über Styles das Aussehen der Komponenten verändern. Siehe auch den Tipp Cell Renderer ganz unten

Check Box Komponente

Color Picker

Scroll Pane Komponente

Combo Box Komponente

List Box Komponente

Gallery mit List Komponente und Scroll Pane Komponente

Im diesem Beispiel habe ich händisch eine List Komponente (Instanzname: taiLi) und eine Scroll Pane Komponente (Instanzname: scrPane) auf die Bühne gezogen.
In der Bibliothek befinden sich mehrere Movieclips mit jeweils einem Bild. Diese Movieclips wurden als als eigene Klassen ohne Klassendatei definiert. Die Klassennamen sind a1, a2, a3 .... a12.

Mit dem Script wurden von jeder Klasse jeweils 2 Instanzen erzeugt Zu diesem Thema libObj siehe meinen SWF-Tipp "addChild Movieclips DisplayListe".

Das Array mcKlassen beinhaltet die MCs mit den Bilder, welche in der scrPane angezeigt werden. Die Vorschaubilder sind im Prinzip die gleichen Bilder, denn sie beinhalten lediglich eine neue Instanz der großen Bilder/ Klassen.

import fl.data.DataProvider;
import flash.display.DisplayObject;
import fl.controls.*;
import fl.events.*;
import flash.utils.*;
var anzahl:uint = 12;
var mcKlassen:Array = new Array();
var colorNames:Array = new Array("Monument","Technik","Wege","Rost & Grünspan","Komplexität","Lampe","Behälter","Anschlüsse","Hochofen","Treppe","3 Dosen","Schwarzer Mann");

var dp:DataProvider = new DataProvider();

for (var i:uint=1; i <= anzahl; i++)
{
	var libObj:Class;
	libObj=getDefinitionByName("a"+String(i)) as Class;
	var mc1:*= new libObj();
	var mc2:* = new libObj();
	mcKlassen.push(mc1);
	dp.addItem( {label:colorNames[i-1], source:mc2} );
}

taiLi.columnWidth = 132;
taiLi.rowHeight = 80;
taiLi.dataProvider = dp;
taiLi.direction = ScrollBarDirection.VERTICAL;
taiLi.columnCount = 4;
taiLi.rowCount = 2;
taiLi.scrollPolicy = ScrollPolicy.AUTO;

taiLi.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(event:Event):void
{
	trace(taiLi.selectedIndex);
	scrPane.source = mcKlassen[taiLi.selectedIndex];
}
scrPane.source = mcKlassen[0];

In diesem ähnlichen Beispiel verzichte ich darauf die Bilder in MovieClips zu legen und davon Klassen zu erzeugen, denn das macht eigentlich keinen Sinn, wenn man aus den Bildern bitmapData Klassen erzeugen kann und dann auf diese zugreift. Siehe dazu meinen Tipp Bitmap Jedes in die Bibliothek importierte Bild, wird für Actionscript exportiert und bekommt einen Klassennamen. Sie lauten: b1, b2, b3,.... b12.

Siehe auch die auskommentierten Stellen im Script, welche die Sache etwas verdeutlicht.

import fl.data.DataProvider;
import flash.display.DisplayObject;
import fl.controls.*;
import fl.events.*;
import flash.utils.*;

var anzahl:uint = 12;
var bitmapBilder:Array = new Array();

var colorNames:Array = new Array("Monument","Technik","Wege","Rost & Grünspan","Komplexität","Lampe","Behälter","Anschlüsse","Hochofen","Treppe","3 Dosen","Schwarzer Mann");

var dp:DataProvider = new DataProvider();

for (var i:uint=1; i <= anzahl; i++)
{
	var libObj:Class;
	libObj=getDefinitionByName("b"+String(i)) as Class;
	var bild:*= new libObj();
	//bitmapBilder.push(new Bitmap(new b1()));
	bitmapBilder.push(new Bitmap(bild));
	
	libObj=getDefinitionByName("b"+String(i)) as Class;
	var thumb:* = new libObj();
	//dp.addItem( {label:colorNames[i-1], source:new Bitmap(new b1())} );
	dp.addItem( {label:colorNames[i-1], source:new Bitmap(thumb)} );
}

taiLi.columnWidth = 132;
taiLi.rowHeight = 80;
taiLi.dataProvider = dp;
taiLi.direction = ScrollBarDirection.VERTICAL;
taiLi.columnCount = 4;
taiLi.rowCount = 2;
taiLi.scrollPolicy = ScrollPolicy.AUTO;

taiLi.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(evt:Event):void
{
	scrPane.source = bitmapBilder[taiLi.selectedIndex];
}
scrPane.source = bitmapBilder[0];

In diesem Beispiel werden die Vorschaubilder und die großen Bilder von außen geladen. Es gibt im gleichen Verzeichnis einen Ordner "img" für die großen Bilder und einen Ordner "thumbs" für die kleinen Vorschaubilder. Die großen und die kleinen Bilder haben die Dateinamen 1.jpg, 2.jpg...etc.

import fl.data.DataProvider;
import flash.display.DisplayObject;
import fl.controls.*;
import fl.events.*;
import flash.utils.*;

var anzahl:uint = 12;
var bigPicture:Array = new Array();

var colorNames:Array = new Array("Monument","Technik","Strecken","Rost & Grünspan","Komplexität","Lampe","Behälter","Anschlüsse","Hochofen","Treppe","3 Dosen","Schwarzer Mann");

var dp:DataProvider = new DataProvider();

for (var i:uint=1; i <= anzahl; i++)
{
	var bild:String = "img/" + i + ".jpg";
	bigPicture.push(bild);
	dp.addItem( {label:colorNames[i-1], source:"thumbs/"+i+".jpg"} );
}

taiLi.columnWidth = 132;
taiLi.rowHeight = 80;
taiLi.dataProvider = dp;
taiLi.direction = ScrollBarDirection.VERTICAL;
taiLi.columnCount = 4;
taiLi.scrollPolicy = ScrollPolicy.AUTO;

taiLi.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(evt:Event):void
{
	scrPane.source = bigPicture[taiLi.selectedIndex];
}
scrPane.source = bigPicture[0];

Slider Komponente

Cell Renderer

http://www.pastorpixel.de