A Flash Developer Resource Site

Results 1 to 6 of 6

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

  1. #1
    Senior Member
    Join Date
    Jan 2001
    Location
    Barcelona
    Posts
    129

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

    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
    Code:
    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”)
    Code:
    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”)
    Code:
    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

  2. #2
    Senior Member
    Join Date
    Jan 2001
    Location
    Barcelona
    Posts
    129

  3. #3
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    I don't understand your files. Where is the Document class located? Also what exactly are you looking for, which text?
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  4. #4
    Senior Member
    Join Date
    Jan 2001
    Location
    Barcelona
    Posts
    129
    It's an Object Class (Box_Buttons.as), working interpedently from a Document Class. This Box_Buttons holds other Object Classes inside like (Button_Aqua_Icon.as, Button_Aqua_Text.as, Txt_Field_ButDisplay.as):
    http://www.ferylee.com/flash/
    The Txt_Field_ButDisplay and the buttons Button_AquaText's TextField loads the content from a XML and have a CSS applied to it that for a reason doesn’t work. It's a bit complicated explaining the functioning of various files that are synchronized, maybe it's easier if you to download the package and see the structure of all the files:
    http://www.ferylee.com/flash/VisorImagenes.zip
    Thanks

  5. #5
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    You need to simplify the movie for the forum people. Nobody is willing and has the time to go through all code.
    Also here is an example of how to use the css.
    http://flashscript.biz/flashas3/text...tyleClass.html
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  6. #6
    Senior Member
    Join Date
    Jan 2001
    Location
    Barcelona
    Posts
    129
    Yes you are right. Problem is, I had it simpler without XML, just with an array for the buttons and it worked! Binding the code to the XML disabled the CSS somehow. Finally my programming experience is to small to find the problem and I don’t find any specific documentation to my problem.

    I will try to understand the problem studding the link you send me (XML, Stylesheet, Embed Fonts).

    Thanks for help

    PS: Personal question… When click your banner “Flash XML Applications” a link from Elsevier opens. Do you work for Elsevier?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center