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