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”)
3) Button_Aqua_Text.asCode: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; } } }
Vertical alignment of text buttons (the CSS should be applied to the TextField “field_txt”)
Thanks a lot in advanceCode: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; } } }
A Flash Developer Resource Site
Reply With Quote
