Can’t make my CSS code work for my dynamic loaded XML Button Box

[fery]

Hello there,
I’m a designer developing and drawing manly for web applications.
AS3 is completely new to me so I went trough a book to learn the basics and with some help from here and there I build my first clean coded and dynamic loaded Button Box. Everything worked fine until I tried to format the text with CSS.
I just can’t make it work! Please help, I spend so much time coding this and now I’m stuck!!!

I know, it’s a lot of code divided into 4 as-classes who communicates between each other.

Here you can see the latest example: http://www.ferylee.com/flash/
Here you can download the source files (ZIP): http://www.ferylee.com/flash/VisorImagenes.zip

and

Here the 3 classes including the code for the CCS:

1) Box_Buttons.as
Main box that loads all the content into it, also the CSS

package {
	//
	//------------------------------
	//IMPORTAR CLASES DE FLASH
	//------------------------------
	//
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.text.TextField;
	import flash.text.StyleSheet;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.getDefinitionByName;
	//
	//importar de la biblioteca, las propiedades de los Iconos para "Button_Aqua_Icon"
	import ZonaPersonal;
	import Imprimir;
	import DescargaPP;
	import DescargaImagen;
	import LupaMas;
	import LupaMenos;
	//
	import Separador;
	//
	//----------------------------
	//CREAR CLASE "Box_Buttons"
	//----------------------------
	//
	public class Box_Buttons extends MovieClip {
		//
		//----------------------------
		//DEFINIR VARIABLES
		//----------------------------
		//
		//vars para la comprobación de carga de xml y css
		private var _xmlLoaded:Boolean;
		private var _cssLoaded:Boolean;
		private var _started:Boolean;
		//
		//xml loader vars
		private var _xmlLoader:URLLoader;
		private var _xmlData:XML;
		public var _xmlReq:URLRequest=new URLRequest("xml/flash_Box_Buttons.xml");
		//
		//css loader vars
		private var _cssLoader:URLLoader;
		private var _cssStyle:StyleSheet;
		public var _cssReq:URLRequest=new URLRequest("css/flash_Visor.css");
		//
		//definir "Txt_Field_ButDisplay" y su posicionamiento
		private var _butDisplay:Txt_Field_ButDisplay;
		private var _butDisplayX:Number=6;
		private var _butDisplayY:Number=12;
		//
		//definir "Button_Aqua_Icon" y su posicionamiento
		private var _butAquaIco:Button_Aqua_Icon;
		private var _butAquaIcoX:Number=5;
		private var _butAquaIcoY:Number=36;
		//
		//definir "Separador" y su posicionamiento
		private var _separador:Separador;
		private var _separadorX:Number=8;
		private var _separadorY:Number=82;
		//
		//lista de Iconos del XML para los "Button_Aqua_Icon's"
		private var _listaIconos:XMLList;
		//
		//lista de textos del XML para visualos en el  
		//butDisplay al hacer rollOver en "Button_Aqua_Icon's"
		private var _listaEtiquetas:XMLList;
		//
		//definir "Button_Aqua_Text" y su posicionamiento
		private var _butAquaTxt:Button_Aqua_Text;
		private var _butAquaTxtX:Number=5;
		private var _butAquaTxtY:Number=94;
		//
		//lista de textos del XML para los "Button_Aqua_Texto's"
		private var _listaTextos:XMLList;
		//
		//----------------------------
		//CREAR FUNCIONES PUBLICAS(funciones que comunican con el exterior)
		//----------------------------
		//
		public function Box_Buttons() {
			//
			//poner la carga del xml y css a false
			_xmlLoaded=false;
			_cssLoaded=false;
			_started=false;
			//
			//load xml
			_xmlLoader=new URLLoader  ;
			_xmlLoader.load(_xmlReq);
			//
			//load css
			_cssLoader=new URLLoader  ;
			_cssLoader.load(_cssReq);
			//
			//crear XML and CSS EventListener para escuchar estado de evento
			_xmlLoader.addEventListener(Event.COMPLETE,onXMLload);
			_cssLoader.addEventListener(Event.COMPLETE,onCSSLoad);
			_xmlLoader.addEventListener(IOErrorEvent.IO_ERROR,xmlLoadError);
			_cssLoader.addEventListener(IOErrorEvent.IO_ERROR,cssLoadError);
			//
		}
		// 
		//----------------------------
		//CREAR FUNCIONES PRIVADAS(funciones internas)
		//----------------------------
		//
		private function onXMLload(ev:Event):void {
			//
			//delegar las estiquetas del xml a los textos
			_xmlData=new XML(ev.target.data);
			_listaIconos=_xmlData.butAquaIcon.but.attributes();
			_listaEtiquetas=_xmlData.butAquaIcon.but.txt.children();
			_listaTextos=_xmlData.butAquaText.but.txt.children();
			//
			//comprovando que xml y css estén cargados a la vez
			_xmlLoaded=true;
			//
			//si esta carago xml y css, hacemos visible los elementos "postLoad()"
			if (_cssLoaded == true && _started == false) {
				_started=true;
				postLoad();
			}
			//trace(event.target.data);
			//trace(_xmlData.butAquaIcon.but.attributes());
			//trace(_xmlData.butAquaIcon.but.txt.children());
		}
		//
		private function onCSSLoad(ev:Event):void {
			//
			//delegar las estiquetas del ccs a los textos
			_cssStyle=new StyleSheet  ;
			_cssStyle.parseCSS(ev.target.data);
			//
			//comprovando que css y xml estén cargados a la vez
			_cssLoaded=true;
			//
			//si esta carago css y xml, hacemos visible los elementos "postLoad()"
			if (_xmlLoaded == true && _started == false) {
				_started=true;
				postLoad();
			}
			//trace(event.target.data);
		}
		//
		private function xmlLoadError(event:IOErrorEvent):void {
			trace("ERROR LOADING XML");
		}
		//
		private function cssLoadError(event:IOErrorEvent):void {
			trace("ERROR LOADING CSS");
		}
		//
		private function postLoad() {
			//situar objetos en el stage
			cajaTitBox();
			separa();
			crearBotonesIconos();
			crearBotonesTextos();
			pos_CB();
		}
		//
		private function cajaTitBox() {
			//
			//situar el "Txt_Field_ButDisplay" dentro del "Box_Buttons"
			_butDisplay=new Txt_Field_ButDisplay  ;
			_butDisplay.setEstilo(_cssStyle);
			this.addChild(_butDisplay);
			//
			//posicionar el "Txt_Field_ButDisplay"
			_butDisplay.x=_butDisplayX;
			_butDisplay.y=_butDisplayY;
		}
		//
		private function crearBotonesIconos() {
			//
			for (var i:Number=0; i < _listaEtiquetas.length(); i++) {
				//
				//situar "Button_Aqua_Icon" dentro del "Box_Buttons"
				_butAquaIco=new Button_Aqua_Icon  ;
				this.addChild(_butAquaIco);
				//
				//definir la "_listaEtiquetas" y la "_listaIconos" para la comunicación entre Clases
				_butAquaIco.setIcono(_listaEtiquetas[i],string2object(_listaIconos[i]));
				//
				//comunicamos entre Clases
				_butAquaIco.setIcoTitBox(_butDisplay);
				//
				//posicionar los "Button_Aqua_Icon's"
				_butAquaIco.x=_butAquaIcoX;
				_butAquaIco.y=_butAquaIcoY;
				//
				//offset de los "Button_Aqua_Icon's"
				_butAquaIcoX+= _butAquaIco.width;
			}
		}
		//
		//función que convierte el texto(string) del XML a Objeto para poder utilizarlo como Clase
		//esto sirve para incrustar los iconos de la libreria en los botones a traves del xml
		private function string2object(nombre:String) {
			var _classReference:Class=getDefinitionByName(nombre)  as  Class;
			var _instance:Object=new _classReference  ;
			return _instance;
		}
		//
		private function separa() {
			//
			//situar el "Separador" de la biblioteca dentro del "Box_Buttons"
			_separador=new Separador  ;
			this.addChild(_separador);
			//
			//posicionar el "Separador"
			_separador.x=_separadorX;
			_separador.y=_separadorY;
		}
		//
		private function crearBotonesTextos() {
			//
			for (var k:Number=0; k < _listaTextos.length(); k++) {
				//
				//situar "Button_Aqua_Text" dentro del "Box_Buttons"
				_butAquaTxt=new Button_Aqua_Text  ;
				this.addChild(_butAquaTxt);
				//
				//definir la "_listaTextos" para la comunicación entre Clases
				_butAquaTxt.setTexto(_listaTextos[k]);
				_butAquaTxt.setEstilo(_cssStyle);
				//
				//posicionar los "Button_Aqua_Texto's"
				_butAquaTxt.x=_butAquaTxtX;
				_butAquaTxt.y=_butAquaTxtY;
				//
				//offset de los "Button_Aqua_Texto's"
				_butAquaTxtY+= _butAquaTxt.height;
			}
		}
		//
		private function pos_CB() {
			//
			//definir el color de la "cajaBut"
			this.cajaBut_mc.transform.colorTransform=_butAquaIco._BackColor;
			this.cajaButFinal_mc.transform.colorTransform=_butAquaIco._BackColor;
			//
			if (_listaTextos == null || _listaTextos.length() == 0) {
				//
				//posicionamiento automatico de "cajaButFinal"
				this.cajaButFinal_mc.y=this.cajaBut_mc.height;
				//
				//hacer invisible el "Separador" 
				_separador.visible=false;
			} else {
				//
				//alargamiento automatico de "cajaBut"
				this.cajaBut_mc.height=_butAquaTxtY;
				//
				//posicionamiento automatico de "cajaButFinal"
				this.cajaButFinal_mc.y=this.cajaBut_mc.height;
			}
		}
	}
}

2) Txt_Field_ButDisplay.as
Text display for the icon buttons (the CSS should be applied to the TextField “field_txt”)

package {
	//
	//------------------------------
	//IMPORTAR CLASES DE FLASH
	//------------------------------
	//
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.StyleSheet;
	import flash.text.TextFieldAutoSize;
	//
	//----------------------------
	//CREAR CLASE "Txt_Field_ButDisplay"
	//----------------------------
	//
	public class Txt_Field_ButDisplay extends MovieClip {
		//
		//----------------------------
		//DEFINIR VARIABLES
		//----------------------------
		// 
		//el asterisco(*) se pone si aún esta por definir el contenido a cargar
		private var _texto:*;
		private var _cssStyle:StyleSheet;
		// 
		//----------------------------
		//CREAR FUNCIONES PUBLICAS(funciones que comunican con el exterior)
		//----------------------------
		//
		public function setTexto(texto:*):void {
			_texto = texto;
			//trace(texto);
			//
			//aplicar las funciónes de las propiedades a la caja texto
			this.TextSettings(this.field_txt);
		}
		//
		public function setEstilo(cssStyle:StyleSheet) {
			_cssStyle = cssStyle;
			//trace(cssStyle);
		}
		// 
		//----------------------------
		//CREAR FUNCIONES PRIVADAS(funciones internas)
		//----------------------------
		//
		//properties for TextAreas
		private function TextSettings(txtSet) {
			//
			txtSet.autoSize = TextFieldAutoSize.CENTER;
			txtSet.selectable = false;
			txtSet.wordWrap = false;
			txtSet.condenseWhite = true;
			txtSet.htmlText = _texto;
			txtSet.styleSheet = _cssStyle;
		}
	}
}

3) Button_Aqua_Text.as
Vertical alignment of text buttons (the CSS should be applied to the TextField “field_txt”)

package {
	//
	//------------------------------
	//IMPORTAR CLASES DE FLASH
	//------------------------------
	//
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
	import flash.geom.ColorTransform;
	import flash.text.TextField;
	import flash.text.StyleSheet;
	import flash.text.TextFieldAutoSize;
	//
	//----------------------------
	//CREAR CLASE "Button_Aqua_Text"
	//----------------------------
	//
	public class Button_Aqua_Text extends MovieClip {
		//
		//----------------------------
		//DEFINIR VARIABLES
		//----------------------------
		//
		//el asterisco(*) se pone si aún esta por definir el contenido a cargar
		private var _texto:*;
		private var _cssStyle:StyleSheet;
		//
		//filter effect vars
		private var _myGlowFilter:GlowFilter = new GlowFilter(0xFFFFFF, 0.5, 7, 7, 3, 2, false,false);
		private var _ButColor:ColorTransform = new ColorTransform(1, 1, 1, 1, -30, 0, 20, 0);
		public var _BackColor:ColorTransform = new ColorTransform(0, 0, 0, 1, 51, 51, 51, 0);
		//
		//----------------------------
		//CREAR FUNCIONES PUBLICAS(funciones que comunican con el exterior)
		//----------------------------
		//
		public function setTexto(texto:*):void {
			_texto = texto;
			//trace(texto);
			//
			//aplicar las funciónes de las propiedades a la caja texto
			TextSettings(this.field_txt);
		}
		//
		public function setEstilo(cssStyle:StyleSheet) {
			_cssStyle = cssStyle;
			//trace(cssStyle);
		}
		//
		public function Button_Aqua_Text() {
			//
			//propiedades del Button_Aqua_Text
			this.back_mc.transform.colorTransform = _BackColor;
			this.but_mc.transform.colorTransform = _ButColor;
			//
			//hacer cambiar el cursor a modo boton
			this.buttonMode = true;
			//
			//crear EventListener para escuchar estado de evento
			this.addEventListener(MouseEvent.ROLL_OVER, onOver);
			this.addEventListener(MouseEvent.ROLL_OUT, onOut);
		}
		// 
		//----------------------------
		//CREAR FUNCIONES PRIVADAS(funciones internas)
		//----------------------------
		//
		//properties for TextAreas
		private function TextSettings(txtSet) {
			// 
			txtSet.autoSize = TextFieldAutoSize.CENTER;
			txtSet.selectable = false;
			txtSet.wordWrap = false;
			txtSet.condenseWhite = true;
			txtSet.htmlText = _texto;
			txtSet.styleSheet = _cssStyle;
		}
		//
		private function onOver(event:MouseEvent):void {
			//
			//aplicar filtro
			this.shine_mc.filters = [_myGlowFilter];
			//
			//aplicar alpha
			this.but_mc.alpha = 0.4;
			//
			//hacer que se ponga el objeto rollOver arriba de todo
			this.parent.addChild(this);
		}
		//
		private function onOut(event:MouseEvent):void {
			//
			//quitar filtro
			this.shine_mc.filters = [];
			//
			//quitar alpha
			this.but_mc.alpha = 1.0;
		}
	}
}

Thanks a lot in advance

[fery]